/* COS 招聘站 - 前台样式（访客页面）
   二哥备注：想改配色只动下面 :root 里的几个变量即可 */
:root {
    --primary: #0b4a8f;
    --primary-dark: #073a70;
    --primary-soft: #e8f0fa;
    --accent: #10b981;
    --accent-soft: #e7f8f1;
    --ink: #12213a;
    --ink-2: #4a5a70;
    --line: #e2e8f0;
    --bg: #ffffff;
    --bg-soft: #f6f8fb;
    --danger: #d92d20;
    --radius: 12px;
    --shadow: 0 2px 10px rgba(16, 32, 60, .07);
    --shadow-lg: 0 12px 32px rgba(16, 32, 60, .12);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    font-family: "Segoe UI", "Helvetica Neue", Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
    color: var(--ink);
    background: var(--bg);
    line-height: 1.6;
    font-size: 16px;
}
img { max-width: 100%; }
a { color: var(--primary); text-decoration: none; }
h1, h2, h3, h4 { line-height: 1.25; margin: 0 0 .5em; }

.container { width: 100%; max-width: 1140px; margin: 0 auto; padding: 0 20px; }
.section { padding: 64px 0; }
.section.alt { background: var(--bg-soft); }
.section-title { font-size: 30px; margin-bottom: 8px; }
.section-sub { color: var(--ink-2); margin-top: 0; margin-bottom: 28px; }

/* 顶部条 */
.topbar { background: var(--primary-dark); color: #fff; font-size: 13px; }
.topbar-inner { display: flex; justify-content: space-between; align-items: center; padding: 8px 20px; }
.topbar a { color: #fff; font-weight: 600; }
.topbar-wa { background: rgba(255,255,255,.14); padding: 4px 12px; border-radius: 20px; }

/* 导航 */
.site-header { background: #fff; border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 50; }
.nav-inner { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; }
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.logo-mark {
    background: linear-gradient(160deg, #1266bd 0%, var(--primary) 100%);
    color: #fff; font-weight: 800; letter-spacing: 2px;
    padding: 7px 14px; border-radius: 9px; font-size: 19px;
    box-shadow: 0 2px 6px rgba(11, 40, 80, .22), inset 0 1px 0 rgba(255, 255, 255, .25);
}
/* 后台传的官方 LOGO 图片 */
.logo-img { height: 46px; width: auto; max-width: 190px; object-fit: contain; display: block; }
.logo-text { font-weight: 700; color: var(--ink); font-size: 15px; }
.nav { display: flex; align-items: center; gap: 22px; }
.nav a { color: var(--ink-2); font-weight: 600; font-size: 15px; }
.nav a:hover { color: var(--primary); }
/* 导航里的按钮要压住上面 .nav a 的颜色，否则白字被改成灰蓝，看不清 */
.nav a.btn, .nav a.btn-primary { color: #fff !important; text-shadow: 0 1px 1px rgba(0, 0, 0, .18); }
.nav a.btn:hover, .nav a.btn-primary:hover { color: #fff !important; }

/* 按钮：悬浮抬起 + 按下回弹 + 聚焦光圈 */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    border: 1px solid transparent; border-radius: 10px;
    padding: 12px 22px; font-weight: 700; font-size: 15px; cursor: pointer;
    transition: transform .15s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
    text-align: center; font-family: inherit; text-decoration: none;
    box-shadow: 0 1px 2px rgba(11, 40, 80, .12), 0 4px 12px rgba(11, 40, 80, .10);
    transform: translateY(0);
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 6px 14px rgba(11, 40, 80, .16), 0 14px 28px rgba(11, 40, 80, .14); }
.btn:active { transform: translateY(1px); box-shadow: inset 0 2px 4px rgba(6, 25, 50, .28); }
.btn:focus-visible { outline: 3px solid rgba(11, 74, 143, .35); outline-offset: 2px; }
.btn-primary { background: linear-gradient(180deg, #1a6fc4 0%, var(--primary) 100%); color: #fff; border-color: var(--primary-dark); }
.btn-primary:hover { background: linear-gradient(180deg, #1d7adb 0%, var(--primary-dark) 100%); color: #fff; }
.btn-ghost { background: #fff; color: var(--primary); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--primary); color: var(--primary); }
.btn-outline { background: var(--primary-soft); color: var(--primary); border-color: #cfe0f5; }
.btn-outline:hover { background: linear-gradient(180deg, #1a6fc4 0%, var(--primary) 100%); color: #fff; border-color: var(--primary-dark); }
.btn-whats { background: linear-gradient(180deg, #2ee06f 0%, #1da851 100%); color: #fff; border-color: #128a41; }
.btn-whats:hover { background: linear-gradient(180deg, #37ec79 0%, #128a41 100%); color: #fff; }
.btn-link { background: none; color: var(--ink-2); padding-left: 6px; box-shadow: none; }
.btn-link:hover { transform: none; box-shadow: none; }
.btn-sm { padding: 9px 18px; font-size: 15px; font-weight: 800; letter-spacing: .2px; }
.btn-lg { padding: 14px 28px; font-size: 16px; }
.btn-block { display: block; width: 100%; margin-top: auto; }

/* Hero */
.hero { background: linear-gradient(160deg, #0b4a8f 0%, #1063b8 60%, #1287c9 100%); color: #fff; padding: 72px 0 80px; }
.hero-inner { max-width: 760px; }
.hero-eyebrow { text-transform: uppercase; letter-spacing: 2px; font-size: 12px; opacity: .85; margin: 0 0 10px; }
.hero h1 { font-size: 44px; margin: 0 0 14px; }
.hero-lead { font-size: 18px; opacity: .95; margin-bottom: 22px; }
.hero-badges { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 28px; }
.badge { background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.28); padding: 6px 14px; border-radius: 20px; font-size: 14px; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; }
.hero .btn-ghost { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.4); }

/* 国家卡片 */
.country-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; }
.country-card {
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
    padding: 22px; display: block; color: var(--ink); box-shadow: var(--shadow);
    transition: .18s ease;
}
.country-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: var(--primary); }
.country-card.active { border-color: var(--primary); background: var(--primary-soft); }
.country-flag { font-size: 34px; line-height: 1; margin-bottom: 10px; }
.country-card h3 { margin-bottom: 4px; font-size: 20px; }
.country-count { color: var(--accent); font-weight: 700; font-size: 14px; margin: 0 0 8px; }
.country-summary { color: var(--ink-2); font-size: 14px; }
.country-meta { list-style: none; padding: 0; margin: 12px 0 0; font-size: 13px; color: var(--ink-2); }
.country-meta li { border-top: 1px dashed var(--line); padding-top: 6px; margin-top: 6px; }

/* 筛选 */
.filters {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px; background: #fff; border: 1px solid var(--line);
    border-radius: var(--radius); padding: 18px; margin-bottom: 26px; box-shadow: var(--shadow);
}
.filter-item label { display: block; font-size: 13px; font-weight: 700; color: var(--ink-2); margin-bottom: 6px; }
.filter-item select, .filter-item input {
    width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px;
    font-size: 15px; font-family: inherit; background: #fff; color: var(--ink);
}
.filter-btn { display: flex; align-items: flex-end; gap: 10px; }

/* 职位卡片 */
.job-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; }
.job-card {
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
    padding: 22px; display: flex; flex-direction: column; gap: 10px; box-shadow: var(--shadow);
}
.job-card:hover { box-shadow: var(--shadow-lg); }
.job-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.job-head h3 { margin: 0; font-size: 20px; }
.job-country { background: var(--primary-soft); color: var(--primary); font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 20px; white-space: nowrap; }
.job-meta { margin: 0; font-size: 13px; color: var(--ink-2); display: flex; gap: 14px; flex-wrap: wrap; }
.job-salary { margin: 0; font-weight: 700; color: var(--accent); }
.job-summary { margin: 0; color: var(--ink-2); font-size: 14px; }
.job-benefits { margin: 0; padding-left: 18px; font-size: 13px; color: var(--ink-2); }
.job-benefits li { margin-bottom: 3px; }
.empty { background: #fff; border: 1px dashed var(--line); padding: 30px; border-radius: var(--radius); text-align: center; color: var(--ink-2); }

/* 流程 */
.process-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; }
.process-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; }
.process-no {
    width: 38px; height: 38px; border-radius: 50%; background: var(--primary); color: #fff;
    display: flex; align-items: center; justify-content: center; font-weight: 800; margin-bottom: 12px;
}
.process-card h3 { font-size: 17px; margin-bottom: 6px; }
.process-card p { margin: 0; color: var(--ink-2); font-size: 14px; }

/* 信任提示 */
.trust-box {
    background: var(--accent-soft); border: 1px solid #bfe9d5; border-left: 5px solid var(--accent);
    border-radius: var(--radius); padding: 18px 22px; margin-bottom: 28px;
}
.trust-box h3 { margin: 0 0 6px; font-size: 17px; color: #0a6e4e; }
.trust-box p { margin: 0; font-size: 14px; color: #145c46; }

/* 步骤条 */
.stepper { list-style: none; padding: 0; margin: 0 0 26px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.step-item {
    display: flex; gap: 10px; align-items: flex-start; background: #fff;
    border: 1px solid var(--line); border-radius: var(--radius); padding: 14px;
}
.step-item.active { border-color: var(--primary); background: var(--primary-soft); }
.step-item.done { border-color: var(--accent); background: var(--accent-soft); }
.step-no {
    width: 28px; height: 28px; border-radius: 50%; background: var(--ink-2); color: #fff;
    display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 14px; flex: none;
}
.step-item.active .step-no { background: var(--primary); }
.step-item.done .step-no { background: var(--accent); }
.step-body strong { display: block; font-size: 14px; }
.step-body em { font-style: normal; font-size: 12px; color: var(--ink-2); }

/* 表单 */
.apply-form fieldset.step {
    border: 1px solid var(--line); border-radius: var(--radius); background: #fff;
    padding: 26px; margin: 0; box-shadow: var(--shadow);
}
.apply-form legend { font-size: 20px; font-weight: 800; padding: 0 8px; display: flex; align-items: center; gap: 8px; }
.legend-no {
    background: var(--primary); color: #fff; width: 28px; height: 28px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center; font-size: 14px;
}
.legend-sub { color: var(--ink-2); font-size: 14px; margin: 0 0 18px; }
.group-title { font-size: 14px; text-transform: uppercase; letter-spacing: 1px; color: var(--primary); margin: 22px 0 12px; }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 4px; }
.field label { font-weight: 600; font-size: 14px; }
.field input, .field select, .field textarea {
    padding: 11px 12px; border: 1px solid var(--line); border-radius: 8px;
    font-size: 15px; font-family: inherit; background: #fff; color: var(--ink); width: 100%;
}
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--primary-soft); border-color: var(--primary); }
.field small, .hint { font-size: 12px; color: var(--ink-2); }
.req { color: var(--danger); }
.checkbox { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; font-weight: 600; cursor: pointer; }
.checkbox.small { font-weight: 400; font-size: 13px; color: var(--ink-2); }
.checkbox input { width: 16px; height: 16px; margin-top: 3px; }
.consent { margin: 18px 0; font-weight: 400; color: var(--ink-2); }

/* 上传区 */
.dropzone {
    border: 2px dashed var(--line); border-radius: var(--radius); padding: 18px; background: var(--bg-soft);
}
.dropzone label { font-weight: 700; font-size: 14px; display: block; }
.dropzone .hint { margin: 4px 0 10px; }
.dropzone input[type=file] { width: 100%; font-size: 13px; }
.file-note { font-size: 12px; color: var(--ink-2); margin: 8px 0 0; }
.tag { background: var(--bg-soft); border: 1px solid var(--line); color: var(--ink-2); font-size: 11px; padding: 2px 8px; border-radius: 12px; margin-left: 6px; }
.tag.required { background: #fdecea; border-color: #f8c9c4; color: var(--danger); }
.secure-note { background: var(--primary-soft); border-radius: 8px; padding: 12px 14px; font-size: 13px; color: var(--primary-dark); margin-top: 16px; }

.step-actions { display: flex; gap: 12px; margin-top: 26px; flex-wrap: wrap; }

/* 复核 */
.review { background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; }
.review table { width: 100%; border-collapse: collapse; font-size: 14px; }
.review th, .review td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.review th { width: 40%; color: var(--ink-2); font-weight: 600; }

/* 提示 */
.notice { background: #fff8e6; border: 1px solid #f2d99b; color: #7a5b00; padding: 14px 18px; border-radius: var(--radius); margin-bottom: 20px; }
.notice.error { background: #fdecea; border-color: #f8c9c4; color: #8a1c13; }
.notice ul { margin: 8px 0 0; padding-left: 20px; }

/* 成功卡片 */
.success-card {
    max-width: 640px; margin: 0 auto; background: #fff; border: 1px solid var(--line);
    border-radius: var(--radius); padding: 40px; text-align: center; box-shadow: var(--shadow-lg);
}
.success-icon {
    width: 62px; height: 62px; border-radius: 50%; background: var(--accent); color: #fff;
    display: flex; align-items: center; justify-content: center; font-size: 32px; margin: 0 auto 16px;
}
.success-card h2 { font-size: 26px; }
.ref { background: var(--primary-soft); display: inline-block; padding: 8px 16px; border-radius: 8px; margin: 14px 0 20px; }
.success-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* FAQ */
.faq { display: grid; gap: 10px; }
.faq-item { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 20px; }
.faq-item summary { font-weight: 700; cursor: pointer; font-size: 16px; }
.faq-item p { margin: 12px 0 0; color: var(--ink-2); font-size: 14px; }

/* 页脚 */
.site-footer { background: #0c2340; color: #c7d4e5; padding: 44px 0 20px; }
.footer-inner { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.footer-brand { font-size: 18px; font-weight: 700; color: #fff; margin: 0 0 4px; }
.footer-tag { margin: 0; font-size: 14px; }
.footer-contact { display: flex; gap: 18px; flex-wrap: wrap; font-size: 14px; }
.footer-contact a { color: #c7d4e5; }
.footer-bottom { border-top: 1px solid #1c3557; margin-top: 26px; padding-top: 16px; font-size: 13px; }
.footer-bottom p { margin: 0; }

/* 浮动 WhatsApp */
.wa-float {
    position: fixed; right: 20px; bottom: 20px; background: #25d366; color: #fff;
    padding: 12px 20px; border-radius: 30px; font-weight: 700; box-shadow: var(--shadow-lg); z-index: 60;
}

/* ============ 卡片统一悬浮手感 ============ */
.country-card, .job-card, .process-card, .benefit-card, .fee-card, .story-card, .faq-item {
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.country-card:hover, .job-card:hover, .process-card:hover,
.benefit-card:hover, .fee-card:hover, .story-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 10px 20px rgba(11, 40, 80, .10), 0 22px 44px rgba(11, 40, 80, .14);
    border-color: #c3d8f2;
}
.faq-item:hover { box-shadow: 0 8px 22px rgba(11, 40, 80, .10); border-color: #c3d8f2; }

/* ============ 首屏统计三卡 ============ */
.statbar { background: #fff; border-bottom: 1px solid var(--line); }
.statbar-inner { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; padding: 26px 20px; }
.statbar-item { text-align: center; padding: 6px 10px; }
.statbar-value { display: block; font-size: 22px; font-weight: 800; color: var(--primary); }
.statbar-label { display: block; font-size: 13px; color: var(--ink-2); letter-spacing: .5px; text-transform: uppercase; }
@media (max-width: 620px) { .statbar-inner { grid-template-columns: 1fr; gap: 10px; } }

/* ============ Track 进度查询 ============ */
.track-section { background: linear-gradient(180deg, #f6f8fb 0%, #eef3fa 100%); }
.track-wrap {
    background: #fff; border: 1px solid var(--line); border-radius: 18px;
    box-shadow: 0 10px 30px rgba(11, 40, 80, .08), 0 30px 60px rgba(11, 40, 80, .06);
    padding: 30px; display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: start;
}
.track-eyebrow { text-transform: uppercase; letter-spacing: 2px; font-size: 12px; color: var(--primary); font-weight: 700; margin: 0 0 8px; }
.track-intro h2 { font-size: 26px; margin: 0 0 10px; }
.track-desc { color: var(--ink-2); font-size: 15px; margin: 0 0 20px; }
.track-form { display: flex; gap: 10px; flex-wrap: wrap; }
.track-input-wrap { position: relative; flex: 1; min-width: 220px; }
.track-input-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); font-size: 15px; opacity: .6; }
.track-form input {
    width: 100%; padding: 13px 14px 13px 40px; border: 1px solid var(--line);
    border-radius: 10px; font-size: 15px; font-family: inherit; color: var(--ink);
    letter-spacing: 1px; text-transform: uppercase;
    box-shadow: inset 0 1px 2px rgba(11, 40, 80, .06);
    transition: border-color .2s ease, box-shadow .2s ease;
}
.track-form input:focus {
    outline: none; border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(11, 74, 143, .14), inset 0 1px 2px rgba(11, 40, 80, .05);
}
.track-hint { font-size: 12px; color: var(--ink-2); margin: 12px 0 0; }

/* 结果卡 */
.track-result { min-height: 120px; }
.result-box { border-radius: 16px; padding: 22px; font-size: 14px; }
.result-idle {
    background: var(--bg-soft); border: 1px dashed var(--line); color: var(--ink-2);
    display: flex; align-items: center; gap: 10px;
}
.result-error {
    background: #fdecea; border: 1px solid #f8c9c4; color: #8a1c13;
    display: flex; align-items: center; gap: 10px; font-weight: 700;
}
.result-warn { background: #fff; border: 1px solid #e8d9a8; box-shadow: var(--shadow); }
.result-warn .warn-head {
    display: flex; align-items: center; gap: 8px; color: #96620a;
    font-weight: 800; font-size: 16px; margin-bottom: 10px;
}
.result-warn p { color: var(--ink-2); margin: 0 0 14px; }
.result-warn a { color: var(--primary); font-weight: 700; }
.warn-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.res-ico { font-size: 20px; }

.result-dark {
    background: linear-gradient(160deg, #0f172a 0%, #1c2c47 100%);
    color: #e2e8f0; box-shadow: 0 18px 40px rgba(8, 20, 40, .35); border: 1px solid #24344f;
}
.res-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; border-bottom: 1px solid #2a3b57; padding-bottom: 14px; }
.res-head h4 { margin: 0; font-size: 19px; color: #fff; }
.res-muted { margin: 0 0 2px; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: #94a3b8; }
.res-badge {
    background: rgba(16, 185, 129, .16); color: #34d399; border: 1px solid rgba(16, 185, 129, .35);
    font-size: 11px; font-weight: 800; letter-spacing: .5px; padding: 6px 12px; border-radius: 20px; white-space: nowrap;
}
.res-grid, .res-pos { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.res-grid { margin: 16px 0; }
.res-strong { margin: 0; font-size: 15px; font-weight: 800; color: #f1f5f9; }
.res-strong.ok { color: #34d399; }
.res-strong.mono { letter-spacing: 2px; font-family: "Consolas", monospace; }
.res-positions { display: grid; gap: 10px; margin-bottom: 16px; }
.res-pos { background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .10); border-radius: 12px; padding: 12px; }
.res-stages { display: grid; gap: 8px; padding: 14px 0; border-top: 1px solid #2a3b57; border-bottom: 1px solid #2a3b57; }
.stage { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 700; }
.stage-ico {
    width: 24px; height: 24px; border-radius: 50%; flex: none;
    display: flex; align-items: center; justify-content: center; font-size: 11px;
}
.stage-done .stage-ico { background: #10b981; color: #fff; }
.stage-done .stage-label { color: #6ee7b7; }
.stage-current .stage-ico { background: #f59e0b; color: #1f2937; }
.stage-current .stage-label { color: #fcd34d; }
.stage-pending .stage-ico { background: #334155; color: #94a3b8; }
.stage-pending .stage-label { color: #94a3b8; }
.res-next { margin-top: 16px; }
.res-next p { margin: 0 0 8px; font-size: 13px; color: #cbd5e1; }
.next-label { text-transform: uppercase; letter-spacing: 1px; font-size: 11px !important; font-weight: 800; color: #7dd3fc !important; }
.hr-note { background: rgba(125, 211, 252, .08); border-left: 3px solid #38bdf8; padding: 8px 12px; border-radius: 6px; }
.res-updated { font-size: 11px !important; color: #94a3b8 !important; }
.res-secure { font-size: 11px !important; color: #64748b !important; margin-bottom: 14px !important; }

@media (max-width: 900px) {
    .track-wrap { grid-template-columns: 1fr; padding: 22px; }
    .res-grid, .res-pos { grid-template-columns: 1fr; }
}

/* ============ 福利 / 费用 / 故事 ============ */
.benefit-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; }
.benefit-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow); }
.benefit-icon { font-size: 30px; margin-bottom: 10px; }
.benefit-card h3 { font-size: 18px; }
.benefit-card p { margin: 0; color: var(--ink-2); font-size: 14px; }

.fee-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; }
.fee-card {
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
    padding: 22px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 10px;
}
.fee-top { display: flex; gap: 12px; align-items: center; }
.fee-flag { font-size: 32px; line-height: 1; }
.fee-top h3 { margin: 0; font-size: 18px; }
.fee-program { margin: 0; font-size: 12px; color: var(--ink-2); }
.fee-amount { margin: 0; font-size: 22px; font-weight: 800; color: var(--primary); }
.fee-perks { list-style: none; padding: 0; margin: 0; font-size: 13px; color: var(--ink-2); }
.fee-perks li { padding: 5px 0 5px 20px; border-top: 1px dashed var(--line); position: relative; }
.fee-perks li::before { content: "\2713"; position: absolute; left: 0; color: var(--accent); font-weight: 800; }

.story-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; }
.story-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.story-thumb { height: 150px; position: relative; display: flex; align-items: flex-start; padding: 14px; }
.thumb-1 { background: linear-gradient(135deg, #1e3a8a 0%, #0ea5e9 100%); }
.thumb-2 { background: linear-gradient(135deg, #065f46 0%, #10b981 100%); }
.thumb-3 { background: linear-gradient(135deg, #7c2d12 0%, #f59e0b 100%); }
.story-tag { background: rgba(255, 255, 255, .9); color: #0c2340; font-size: 11px; font-weight: 800; padding: 5px 12px; border-radius: 20px; }
.story-body { padding: 18px; }
.story-date { margin: 0 0 6px; font-size: 12px; color: var(--accent); font-weight: 700; }
.story-body h3 { font-size: 17px; margin: 0 0 8px; }
.story-body p { margin: 0; font-size: 14px; color: var(--ink-2); }

/* 移动端 */
@media (max-width: 860px) {
    .hero h1 { font-size: 32px; }
    .section-title { font-size: 24px; }
    .stepper { grid-template-columns: repeat(2, 1fr); }
    .nav { gap: 14px; }
    .nav a:not(.btn) { display: none; }
}
@media (max-width: 520px) {
    .stepper { grid-template-columns: 1fr; }
    .topbar-inner { flex-direction: column; gap: 4px; }
    .hero-cta .btn { width: 100%; }
}