* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --bg: #f0e6d3;
    --bg2: #e8d9c3;
    --bg3: #f7f0e4;
    --coral: #e8603a;
    --coral-dark: #c94e2c;
    --cobalt: #1a3a8f;
    --mustard: #d4a017;
    --sage: #4a7060;
    --ink: #1c1008;
    --mid: #4a3520;
    --fade: #8a7560;
    --warm-white: #faf5ee;
    --divline: rgba(28,16,8,0.12);
    --header-height: 60px; /* 提取头部高度变量 */
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Syne',sans-serif;
    background: var(--bg);
    color: var(--ink);
    overflow-x: hidden;
}

    /* ─── PAPER TEXTURE ─── */
    body::after {
        content: '';
        position: fixed;
        inset: 0;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");
        pointer-events: none;
        z-index: 9999;
        opacity: 0.5;
    }


.hd-logo {
    padding: 0 20px; /* 移动端减少内边距 */
    height: var(--header-height);
    display: flex;
    align-items: center;
    background: var(--coral);
}

.hd-logo-text {
    font-family: 'Righteous',sans-serif;
    font-size: 16px;
    letter-spacing: 2px; /* 移动端缩小字体 */
    color: var(--warm-white);
    text-transform: uppercase;
}
/* 移动端汉堡菜单 */
.hd-hamburger {
    display: none; /* PC端隐藏 */
    width: 40px;
    height: var(--header-height);
    align-items: center;
    justify-content: center;
    margin-right: 15px;
    cursor: pointer;
}

    .hd-hamburger span {
        display: block;
        width: 24px;
        height: 2px;
        background: var(--warm-white);
        position: relative;
    }

        .hd-hamburger span::before,
        .hd-hamburger span::after {
            content: '';
            position: absolute;
            width: 24px;
            height: 2px;
            background: var(--warm-white);
            left: 0;
        }

        .hd-hamburger span::before {
            top: -8px;
        }

        .hd-hamburger span::after {
            bottom: -8px;
        }

.hd-nav {
    display: flex;
    height: var(--header-height);
}

    .hd-nav a {
        font-family: 'Syne',sans-serif;
        font-size: 14px;
        font-weight: 400;
        letter-spacing: 2px;
        padding: 0 18px; /* 移动端减少内边距 */
        display: flex;
        align-items: center;
        border-right: 1px solid rgba(255,255,255,0.08);
        transition: all 0.2s;
        color: var(--warm-white);
        text-decoration: none;
    }

        .hd-nav a:hover {
            color: var(--warm-white);
            background: rgba(255,255,255,0.05);
        }

.hd-right {
    padding: 0 20px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.hd-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

    .hd-dot.c {
        background: var(--coral);
    }

    .hd-dot.b {
        background: var(--cobalt);
    }

    .hd-dot.m {
        background: var(--mustard);
    }

/* ─── HERO: 复古海报风 (适配移动端) ─── */
.hero {
    height: 820px;
    padding-top: var(--header-height);
    background: var(--bg);
    display: grid;
    grid-template-rows: 1fr auto;
    position: relative;
    overflow: hidden;
}
/* 几何装饰背景 */
.hero-geo {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

.geo-circle {
    position: absolute;
    border-radius: 50%;
}

.geo-c1 {
    width: 300px;
    height: 300px; /* 移动端缩小 */
    right: -80px;
    top: -80px;
    border: 20px solid var(--coral); /* 移动端缩小边框 */
    opacity: 0.15;
}

.geo-c2 {
    width: 200px;
    height: 200px; /* 移动端缩小 */
    right: 40px;
    top: 40px;
    border: 15px solid var(--mustard); /* 移动端缩小边框 */
    opacity: 0.2;
}

.geo-rect {
    position: absolute;
    background: var(--cobalt);
    opacity: 0.08;
}

.geo-r1 {
    left: 0;
    top: var(--header-height);
    width: 4px;
    height: 50vh; /* 移动端调整 */
}

.geo-r2 {
    left: 0;
    bottom: 0;
    width: 100%;
    height: 4px;
    background: var(--coral);
    opacity: 1;
}

.hero-content {
    display: grid;
    grid-template-columns: 1fr; /* 移动端默认单列 */
    align-items: center;
    padding: 40px 20px; /* 移动端调整内边距 */
    gap: 40px;
    max-width: 1400px;
    margin: 0 auto;
    width: 100%;
    margin-top:-7vh;
}

.hero-pretag {
    display: inline-block;
    font-family: 'Righteous',sans-serif;
    font-size: 12px;
    letter-spacing: 3px; /* 移动端缩小 */
    text-transform: uppercase;
    color: var(--warm-white);
    background: var(--cobalt);
    padding: 6px 16px;
    margin-bottom: 20px; /* 移动端调整内边距 */
}

.hero-headline {
    font-family: 'Righteous',sans-serif;
    font-size: clamp(30px,10vw,80px); /* 响应式字体 */
    line-height: 0.9;
    letter-spacing: -1px;
    color: var(--ink);
}

    .hero-headline .stroke {
        -webkit-text-stroke: 1.5px var(--ink); /* 移动端缩小描边 */
        color: transparent;
    }

    .hero-headline .coral {
        color: var(--coral);
    }

.hero-underline {
    width: 60px;
    height: 3px; /* 移动端缩小 */
    background: var(--coral);
    margin: 20px 0; /* 移动端调整间距 */
}

.hero-body {
    font-size: 14px;
    font-weight: 400;
    line-height: 2; /* 移动端调整 */
    color: var(--mid);
    max-width: 100%; /* 移动端宽度100% */
}

.hero-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 20px; /* 移动端调整 */
}

.badge {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1px; /* 移动端缩小 */
    padding: 6px 12px; /* 移动端调整内边距 */
    border: 1.5px solid;
    text-transform: uppercase;
}

.badge-c {
    border-color: var(--coral);
    color: var(--coral);
}

.badge-b {
    border-color: var(--cobalt);
    color: var(--cobalt);
}

.badge-m {
    border-color: var(--mustard);
    color: var(--mustard);
}

.badge-s {
    border-color: var(--sage);
    color: var(--sage);
}

.hero-cta {
    margin-top: 30px;
    display: flex;
    gap: 15px;
    align-items: center;
    flex-wrap: wrap;
}

.btn-solid {
    font-family: 'Righteous',sans-serif;
    font-size: 12px;
    letter-spacing: 2px; /* 移动端缩小 */
    text-transform: uppercase;
    background: var(--coral);
    color: var(--warm-white);
    padding: 12px 30px;
    text-decoration: none;
    transition: all 0.2s;
    display: inline-block; /* 保证点击区域 */
}

    .btn-solid:hover {
        background: var(--coral-dark);
    }

.btn-outline {
    font-family: 'Righteous',sans-serif;
    font-size: 12px;
    letter-spacing: 2px; /* 移动端缩小 */
    text-transform: uppercase;
    border: 1.5px solid var(--ink);
    color: var(--ink);
    padding: 11px 28px;
    text-decoration: none;
    transition: all 0.2s;
    display: inline-block; /* 保证点击区域 */
}

    .btn-outline:hover {
        background: var(--ink);
        color: var(--warm-white);
    }

.hero-img-wrap {
    position: relative;
    width: 100%;
}

.hero-img-bg {
    position: absolute;
    bottom: -10px;
    right: -10px;
    top: 10px;
    left: 10px;
    background: var(--cobalt);
    opacity: 0.15;
}

.hero-img {
    width: 100%;
    height: 350px; /* 移动端调整高度 */
    object-fit: cover;
    background: url('images/clothes1.jpg') center/cover no-repeat;
    position: relative;
    z-index: 1;
    filter: sepia(10%) contrast(1.05);
}

.hero-img-label {
    position: absolute;
    bottom: 15px;
    left: -15px;
    z-index: 2;
    background: var(--coral);
    padding: 8px 18px; /* 移动端调整 */
    font-family: 'Righteous',sans-serif;
    font-size: 12px;
    letter-spacing: 2px; /* 移动端缩小 */
    text-transform: uppercase;
    color: var(--warm-white);
}

.hero-stats {
    display: flex;
    gap: 0;
    margin-top: 20px; /* 移动端调整 */
    border: 1.5px solid var(--divline);
    width: 100%;
}

.hstat {
    flex: 1;
    padding: 15px; /* 移动端调整 */
    border-right: 1.5px solid var(--divline);
    text-align: center;
}

    .hstat:last-child {
        border-right: none;
    }

.hstat-n {
    font-family: 'Righteous',sans-serif;
    font-size: 22px;
    color: var(--ink);
    letter-spacing: 1px; /* 移动端缩小 */
}

.hstat-l {
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 1px;
    color: var(--fade);
    margin-top: 4px;
}
/* 移动端缩小 */

/* ─── STRIPE ─── */
.stripe {
    height: 8px; /* 移动端缩小 */
    background: repeating-linear-gradient( 90deg, var(--coral) 0px, var(--coral) 20px, var(--cobalt) 20px, var(--cobalt) 40px, var(--mustard) 40px, var(--mustard) 60px, var(--sage) 60px, var(--sage) 80px, var(--bg) 80px, var(--bg) 100px );
}

/* ─── SECTION COMMON (适配移动端) ─── */
section {
    padding: 60px 0; /* 移动端减少padding */
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px; /* 移动端调整内边距 */
}

.sec-tag {
    display: inline-block;
    font-family: 'Righteous',sans-serif;
    font-size: 12px;
    letter-spacing: 3px; /* 移动端缩小 */
    text-transform: uppercase;
    color: var(--warm-white);
    padding: 5px 12px; /* 移动端调整 */
    margin-bottom: 15px;
}

    .sec-tag.coral {
        background: var(--coral);
    }

    .sec-tag.cobalt {
        background: var(--cobalt);
    }

    .sec-tag.mustard {
        background: var(--mustard);
    }

    .sec-tag.sage {
        background: var(--sage);
    }

.sec-h {
    font-family: 'Righteous',sans-serif;
    font-size: clamp(30px,8vw,40px); /* 响应式字体 */
    letter-spacing: 1px;
    color: var(--ink);
    line-height: 0.95;
}

    .sec-h span {
        color: var(--coral);
    }

.sec-p {
    font-size: 14px;
    font-weight: 400;
    line-height: 2; /* 移动端调整 */
    color: var(--mid);
    max-width: 100%; /* 移动端宽度100% */
    margin-top: 12px;
}

/* ─── INDUSTRY (适配移动端) ─── */
.industry-bg {
    background: var(--bg2);
}

.industry-layout {
    display: grid;
    grid-template-columns: 1fr; /* 移动端单列 */
    gap: 40px;
    align-items: start;
    margin-top: 40px; /* 移动端调整间距 */
}

.ind-item {
    display: flex;
    align-items: center;
    gap: 12px; /* 移动端调整 */
    padding: 12px 0;
    border-bottom: 1.5px solid var(--divline);
}

    .ind-item:first-child {
        border-top: 1.5px solid var(--divline);
    }

.ind-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0; /* 移动端缩小 */
}

.ind-name {
    font-size: 14px;
    font-weight: 400;
    color: var(--mid);
    flex: 1;
}
/* 移动端缩小 */
.ind-count {
    font-family: 'Righteous',sans-serif;
    font-size: 18px;
    color: var(--ink); /* 移动端缩小 */
}

.ind-chart canvas {
    height: 280px !important; /* 移动端调整图表高度 */
}

/* ─── FULL POSTER IMAGE (适配移动端) ─── */
.poster-section {
    position: relative;
    height: 40vh; /* 移动端调整高度 */
    overflow: hidden;
}

.poster-img {
    width: 100%;
    height: 100%;
    background: url('images/clothes2.jpg') center/cover no-repeat;
    filter: sepia(8%) brightness(0.75) contrast(1.05);
}

.poster-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to right,rgba(28,16,8,0.75) 0%,transparent 70%), linear-gradient(to top,rgba(28,16,8,0.5) 0%,transparent 50%);
}

.poster-text {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
}

.poster-text-main {
    font-family: 'Righteous',sans-serif;
    font-size: clamp(25px,8vw,50px); /* 响应式字体 */
    color: var(--warm-white);
    line-height: 1.1;
    letter-spacing: 1px;
}

    .poster-text-main span {
        color: var(--coral);
    }

.poster-text-sub {
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 2px; /* 移动端缩小 */
    color: rgba(250,245,238,0.5);
    margin-top: 15px;
}

.poster-labels {
    position: absolute;
    bottom: 0;
    right: 0;
    display: flex;
    flex-wrap: wrap; /* 移动端允许换行 */
}

.pl-item {
    font-family: 'Righteous',sans-serif;
    font-size: 12px;
    letter-spacing: 1px; /* 移动端缩小 */
    text-transform: uppercase;
    color: var(--warm-white);
    padding: 10px 15px; /* 移动端调整 */
}

    .pl-item.c {
        background: var(--coral);
    }

    .pl-item.b {
        background: var(--cobalt);
    }

    .pl-item.m {
        background: var(--mustard);
    }

/* ─── JOBS (适配移动端) ─── */
.jobs-bg {
    background: var(--warm-white);
}

.jobs-layout {
    display: grid;
    grid-template-columns: 1fr; /* 移动端单列 */
    gap: 40px;
    margin-top: 40px; /* 移动端调整 */
}

.job-row {
    display: flex;
    align-items: center;
    gap: 15px; /* 移动端调整 */
    padding: 15px 0;
    border-bottom: 1.5px solid var(--divline);
}

    .job-row:first-child {
        border-top: 1.5px solid var(--divline);
    }

.job-rank-box {
    width: 35px;
    height: 35px; /* 移动端缩小 */
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Righteous',sans-serif;
    font-size: 14px; /* 移动端缩小 */
    border: 1.5px solid var(--divline);
    color: var(--fade);
    flex-shrink: 0;
}

.job-row.top .job-rank-box {
    background: var(--coral);
    border-color: var(--coral);
    color: var(--warm-white);
}

.job-name {
    font-size: 14px;
    font-weight: 400;
    color: var(--mid);
    flex: 1;
}
/* 移动端缩小 */
.job-row.top .job-name {
    color: var(--ink);
    font-weight: 700;
}

.job-count {
    font-family: 'Righteous',sans-serif;
    font-size: 20px;
    color: var(--ink); /* 移动端缩小 */
}

.jobs-chart canvas {
    height: 250px !important; /* 移动端调整图表高度 */
}

/* ─── DISTRICTS (适配移动端) ─── */
.dist-bg {
    background: var(--ink);
}

    .dist-bg .sec-h {
        color: var(--warm-white);
    }

        .dist-bg .sec-h span {
            color: var(--coral);
        }

    .dist-bg .sec-p {
        color: rgba(250,245,238,0.45);
    }

    .dist-bg .sec-tag {
        background: var(--coral);
    }

.districts-layout {
    margin-top: 40px;
    display: grid;
    grid-template-columns: 1fr; /* 移动端单列 */
    gap: 40px;
    align-items: center;
}

.dist-row {
    display: flex;
    align-items: center;
    gap: 15px; /* 移动端调整 */
    padding: 15px 0;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

    .dist-row:first-child {
        border-top: 1px solid rgba(255,255,255,0.08);
    }

    .dist-row.top .dist-col-name {
        color: var(--coral);
    }

.dist-col-rank {
    font-family: 'Righteous',sans-serif;
    font-size: 12px; /* 移动端缩小 */
    color: rgba(255,255,255,0.2);
    width: 25px;
    flex-shrink: 0;
}

.dist-col-name {
    font-size: 14px;
    font-weight: 700; /* 移动端缩小 */
    color: rgba(255,255,255,0.7);
    flex: 1;
    letter-spacing: 1px;
}

.dist-col-num {
    font-family: 'Righteous',sans-serif;
    font-size: 20px; /* 移动端缩小 */
    color: var(--warm-white);
}

.dist-chart canvas {
    height: 250px !important; /* 移动端调整图表高度 */
}

/* ─── SALARY (适配移动端) ─── */
.salary-bg {
    background: var(--bg3);
}

.salary-layout {
    display: grid;
    grid-template-columns: 1fr; /* 移动端单列 */
    gap: 40px;
    align-items: start;
    margin-top: 40px; /* 移动端调整 */
}

.sal-row {
    display: flex;
    align-items: center;
    gap: 15px; /* 移动端调整 */
    padding: 15px 0;
    border-bottom: 1.5px solid var(--divline);
}

    .sal-row:first-child {
        border-top: 1.5px solid var(--divline);
    }

.sal-name {
    font-size: 14px;
    font-weight: 400;
    color: var(--mid);
    flex: 1;
}
/* 移动端缩小 */
.sal-range {
    font-family: 'Righteous',sans-serif;
    font-size: 16px; /* 移动端缩小 */
    color: var(--coral-dark);
    letter-spacing: 1px;
}

.salary-chart canvas {
    height: 280px !important; /* 移动端调整图表高度 */
}

/* ─── CLOSING (适配移动端) ─── */
.closing {
    background: var(--bg);
    border-top: 4px solid var(--coral); /* 移动端缩小边框 */
    position: relative;
    overflow: hidden;
}

.closing-img {
    height: 35vh; /* 移动端调整高度 */
    background: url('images/clothes3.jpg') center/cover no-repeat;
    filter: sepia(15%) brightness(0.8) contrast(1.05);
    position: relative;
}

    .closing-img::after {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(to bottom,transparent 30%,var(--bg) 100%);
    }

.closing-body {
    padding: 40px 20px 60px; /* 移动端调整 */
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr; /* 移动端单列 */
    gap: 40px;
    align-items: center;
    position: relative;
    z-index: 1;
    margin-top: -60px; /* 移动端调整 */
}

.closing-pretag {
    display: inline-block;
    font-family: 'Righteous',sans-serif;
    font-size: 12px;
    letter-spacing: 3px; /* 移动端缩小 */
    text-transform: uppercase;
    color: var(--warm-white);
    background: var(--coral);
    padding: 6px 15px;
    margin-bottom: 20px; /* 移动端调整 */
}

.closing-title {
    font-family: 'Righteous',sans-serif;
    font-size: clamp(30px,8vw,45px); /* 响应式字体 */
    line-height: 0.9;
    color: var(--ink);
    letter-spacing: -1px;
}

    .closing-title span {
        display: block;
        color: var(--cobalt);
    }

.closing-text {
    font-size: 14px;
    font-weight: 400;
    line-height: 2; /* 移动端调整 */
    color: var(--mid);
    margin-top: 20px;
    max-width: 100%; /* 移动端宽度100% */
}

.closing-right {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px;
}

.info-block {
    padding: 20px; /* 移动端调整 */
    background: var(--bg2);
}

    .info-block.dark {
        background: var(--ink);
    }

.ib-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 2px; /* 移动端缩小 */
    text-transform: uppercase;
    color: var(--fade);
    margin-bottom: 8px;
}

.info-block.dark .ib-label {
    color: rgba(255,255,255,0.3);
}

.ib-value {
    font-size: 14px;
    font-weight: 400;
    color: var(--mid);
}
/* 移动端缩小 */
.info-block.dark .ib-value {
    color: rgba(255,255,255,0.7);
}

/* ─── 媒体查询: 适配平板/PC (768px以上) ─── */
@media (min-width: 768px) {
    /* 恢复PC端布局 */
    .hero-content {
        grid-template-columns: 1fr 1fr;
        padding: 80px 60px;
        gap: 60px;
    }

    .industry-layout,
    .jobs-layout,
    .districts-layout,
    .salary-layout {
        grid-template-columns: 1fr 1fr;
    }

    .districts-layout {
        grid-template-columns: 2fr 3fr;
    }

    .closing-body {
        grid-template-columns: 1fr 1fr;
        padding: 60px 80px 100px;
        margin-top: -80px;
    }

    .hd-logo {
        padding: 0 40px;
    }

    .hd-nav a {
        padding: 0 28px;
    }

    .hd-right {
        padding: 0 40px;
    }

    .container {
        padding: 0 60px;
    }

    .geo-c1 {
        width: 500px;
        height: 500px;
        right: -100px;
        top: -100px;
        border: 40px solid var(--coral);
    }

    .geo-c2 {
        width: 300px;
        height: 300px;
        right: 80px;
        top: 80px;
        border: 20px solid var(--mustard);
    }

    .hero-img {
        height: 580px;
    }

    .poster-section {
        height: 55vh;
    }

    .closing-img {
        height: 50vh;
    }
}

/* ─── 媒体查询: 隐藏PC导航，显示汉堡菜单 (768px以下) ─── */
@media (max-width: 767px) {
    .hd-nav {
        display: none; /* 移动端隐藏默认导航 */
    }

    .hd-hamburger {
        display: flex; /* 移动端显示汉堡菜单 */
    }

    .hd-right {
        padding: 0 15px;
    }
}
/* ============================================================
     弹窗 Modal 样式
     ============================================================ */
.modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0,0,0,0.55);
    backdrop-filter: blur(4px);
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: fadeOverlay .25s ease
}

    .modal-overlay.active {
        display: flex
    }

@keyframes fadeOverlay {
    from {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

.modal-box {
    background: #fff;
    border-radius: 24px;
    max-width: 680px;
    width: 100%;
    max-height: 68vh;
    overflow-y: auto;
    position: relative;
    box-shadow: 0 30px 80px rgba(0,0,0,0.2);
    animation: slideUp .3s cubic-bezier(.34,1.56,.64,1);
}

    /* 针对弹窗容器的滚动条样式（替换成你的弹窗容器类名） */
    .modal-box::-webkit-scrollbar {
        width: 1px; /* 滚动条宽度，调小即可变细 */
        border-radius: 10px;
    }

    .modal-box::-webkit-scrollbar-track {
        background: transparent; /* 滚动条轨道背景透明 */
    }

    .modal-box::-webkit-scrollbar-thumb {
        background: #ccc; /* 滚动条滑块颜色 */
        border-radius: 10px; /* 滑块圆角 */
    }

        .modal-box::-webkit-scrollbar-thumb:hover {
            background: #aaa; /* 鼠标悬浮时滑块颜色 */
        }

@keyframes slideUp {
    from {
        transform: translateY(40px);
        opacity: 0
    }

    to {
        transform: translateY(0);
        opacity: 1
    }
}

.modal-header {
    background: linear-gradient(135deg,#FF6B6B,#FF9B71);
    border-radius: 24px 24px 0 0;
    padding: 28px 32px 24px;
    position: relative;
    color: #fff
}

    .modal-header h3 {
        font-family: 'Nunito',sans-serif;
        font-size: 1.6rem;
        font-weight: 900;
        margin-bottom: 6px;
        line-height: 1.3
    }

    .modal-header p {
        font-size: .9rem;
        opacity: .85
    }

.modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255,255,255,0.25);
    border: none;
    cursor: pointer;
    font-size: 1.2rem;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .2s;
    line-height: 1
}

    .modal-close:hover {
        background: rgba(255,255,255,0.4)
    }

.modal-body {
    padding: 28px 32px 32px;
    font-size: 16px;
    line-height: 26px;
    overflow: auto;
    height: 320px
}

    .modal-body p {
        font-size: .95rem;
        color: #555;
        line-height: 1.9;
        margin-bottom: 14px
    }

        .modal-body p:last-child {
            margin-bottom: 0
        }

    .modal-body strong {
        color: #2D2D2D
    }

.modal-stat-row {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 12px;
    margin: 20px 0;
}

.modal-stat {
    background: linear-gradient(135deg,#FFF0E6,#FFE8E8);
    border-radius: 14px;
    padding: 16px;
    text-align: center
}

.modal-stat-num {
    font-family: 'Nunito',sans-serif;
    font-size: 1.8rem;
    font-weight: 900;
    color: #FF6B6B;
    line-height: 1;
    margin-bottom: 4px
}

.modal-stat-label {
    font-size: .78rem;
    color: #888
}

.modal-tag-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 16px 0
}

.modal-tag {
    background: #FFF0E6;
    color: #FF6B6B;
    border: 1.5px solid #FFD0C0;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: .8rem;
    font-weight: 600
}

.modal-footer {
    border-top: 1px solid #f0f0f0;
    padding: 16px 32px;
    display: flex;
    justify-content: flex-end;
    gap: 10px
}

.modal-btn-primary {
    background: #FF6B6B;
    color: #fff;
    padding: 11px 28px;
    border-radius: 50px;
    font-size: .95rem;
    font-weight: 700;
    text-decoration: none;
    transition: all .3s;
    box-shadow: 0 4px 15px rgba(255,107,107,0.35);
    border: none;
    cursor: pointer;
    font-family: 'Noto Sans SC',sans-serif
}

    .modal-btn-primary:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(255,107,107,0.45)
    }

.modal-btn-ghost {
    background: #f5f5f5;
    color: #666;
    padding: 11px 22px;
    border-radius: 50px;
    font-size: .95rem;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: background .2s;
    font-family: 'Noto Sans SC',sans-serif
}

    .modal-btn-ghost:hover {
        background: #eee
    }

@media(max-width:600px) {
    .modal-header {
        padding: 22px 20px 18px
    }

    .modal-body {
        padding: 20px 20px 24px
    }

    .modal-footer {
        padding: 14px 20px
    }

    .modal-stat-row {
        grid-template-columns: repeat(3,1fr);
        gap: 8px
    }

    .modal-stat-num {
        font-size: 1.4rem
    }

    .modal-header h3 {
        font-size: 1.3rem
    }
    /* 图表容器样式 */
    #distChart {
        width: 100% !important; /* 强制占满父容器 */
        max-width: 100%; /* 禁止超出父容器 */
        display: block;
        margin: 0 auto; /* 居中显示 */
    }

    /* 父容器兜底：禁止页面横向溢出 */
    .chart-container {
        width: 100%;
        overflow-x: hidden; /* 关键：隐藏横向溢出内容 */
        box-sizing: border-box;
        padding: 0 10px; /* 左右留边，避免贴边 */
    }
}
.footer{
    display:none;
}
/* 分类标签容器 - 核心响应式布局 */
.category-tabs {
    display: grid;
    /* 移动端：2列自适应，PC端：4列均分 */
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 5px;
    width: 100%;
    max-width: 100%;
    margin: 20px 0;
    padding: 0 0px;
    box-sizing: border-box;
}

/* 标签项统一样式 */
.tab-item {
    /* 基础样式 */
    padding: 10px 16px;
    border: none;
    border-radius: 20px;
    font-size: 15px;
    font-weight: 500;
    font-family: 'Syne', sans-serif;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    /* 主题色统一 */
    background: #e8603a;
    color: #fff;
    /* 防止文字换行 */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

    /* 激活态样式（当前选中项） */
    .tab-item.active {
        background: #d15430;
        box-shadow: 0 2px 8px rgba(232, 96, 58, 0.3);
    }

    /*  hover态（PC端交互） */
    .tab-item:hover:not(.active) {
        background: #f07a4a;
    }

/* 移动端极致适配（可选，进一步压缩） */
@media (max-width: 480px) {
    .category-tabs {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .tab-item {
        font-size: 14px;
        padding: 8px 12px;
    }
}

/* ─── FAQ ─── */
.faq-bg {
    background: var(--bg3);
}

.faq-list {
    margin-top: 56px;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.faq-item {
    border-bottom: 1.5px solid var(--divline);
    padding: 32px 0;
}

    .faq-item:first-child {
        border-top: 1.5px solid var(--divline);
    }

.faq-q {
    font-family: 'Righteous',sans-serif;
    font-size: 20px;
    color: var(--ink);
    margin-bottom: 14px;
    cursor: default;
    display: flex;
    align-items: center;
    gap: 16px;
}

    .faq-q::before {
        content: 'Q';
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        flex-shrink: 0;
        background: var(--coral);
        color: var(--warm-white);
        font-size: 15px;
        font-family: 'Righteous',sans-serif;
    }

.faq-a p {
    font-size: 16px;
    line-height: 2;
    color: var(--mid);
    padding-left: 48px;
    max-width: 800px;
}

.faq-a strong {
    color: var(--coral-dark);
}
/* 底部CTA */
.cta {
    background: linear-gradient(135deg,#FF6B6B,#FF9B71);
    padding: 60px 40px;
    text-align: center;
    color: #fff;
    position: relative;
    overflow: hidden
}

  

    .cta h2 {
        font-family: 'Nunito',sans-serif;
        font-size: 2.2rem;
        font-weight: 900;
        margin-bottom: 10px
    }

    .cta p {
        font-size: 1.05rem;
        opacity: .9;
        margin-bottom: 30px
    }

.cta-btns {
    display: flex;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap
}

.cta .btn-white {
    background: #fff;
    color: #FF6B6B;
    padding: 14px 35px;
    border-radius: 50px;
    font-size: 1rem;
    font-weight: 800;
    text-decoration: none;
    box-shadow: 0 4px 15px rgba(0,0,0,0.15);
    transition: all .3s;
    display: inline-block;
    font-family: 'Nunito',sans-serif
}

    .cta .btn-white:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(0,0,0,0.2)
    }

.cta .btn-outline {
    border: 2px solid #fff;
    color: #fff;
    padding: 12px 33px;
    border-radius: 50px;
    font-size: 1rem;
    font-weight: 800;
    text-decoration: none;
    transition: all .3s;
    display: inline-block;
    font-family: 'Nunito',sans-serif
}

    .cta .btn-outline:hover {
        background: rgba(255,255,255,0.2)
    }
.icon1 {
    width: 16px;
    vertical-align: middle;
}

.icon3 {
    width: 16px !important;
    vertical-align: middle;
}

.icon2 {
    width: 8px !important;
    vertical-align: middle;
}

.icon4 {
    width: 16px !important;
    vertical-align: middle;
}

.icon5 {
    width: 16px !important;
    vertical-align: middle;
    margin-right: 4px;
}

.icon6 {
    width: 16px !important;
    vertical-align: middle;
    margin-right: 4px;
}

.icon7 {
    width: 16px !important;
    vertical-align: middle;
    margin-right: 4px;
}

.icon8 {
    width: 16px !important;
    vertical-align: middle;
    margin-right: 4px;
}

.icon9 {
    width: 36px !important;
    vertical-align: middle;
    margin-right: 4px;
    margin-top: 6px;
}

.icon10 {
    width: 36px !important;
    vertical-align: middle;
    margin-right: 4px;
    margin-top: 6px;
}

.icon15 {
    width: 36px !important;
    vertical-align: middle;
    margin-right: 4px;
    margin-top: 6px;
}

.icon16 {
    width: 36px !important;
    vertical-align: middle;
    margin-right: 4px;
    margin-top: 6px;
}

.icon17 {
    width: 36px !important;
    vertical-align: middle;
    margin-right: 4px;
    margin-top: 6px;
}

.icon18 {
    width: 36px !important;
    vertical-align: middle;
    margin-right: 4px;
    margin-top: 6px;
}

.icon20 {
    width: 36px !important;
    vertical-align: middle;
    margin-top: 20px;
}

.icon25 {
    width: 16px !important;
    vertical-align: middle;
    margin-top: 0px;
}

.icon26 {
    width: 16px !important;
    vertical-align: middle;
    margin-top: 0px;
}


.icon51 {
    width: 24px !important;
    vertical-align: middle;
    margin-right: 4px;
}

.icon27 {
    width: 16px !important;
    vertical-align: middle;
    margin-top: 0px;
}