@charset "UTF-8";
/* ==========================================================================
   base.css — 品牌变量、重置、排版、通用组件
   几乎不随页面迭代改动；页面级样式请写进 site.css
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 设计令牌
   -------------------------------------------------------------------------- */
:root {
    /* 品牌色（取自公司 logo 实测取样） */
    --brand:          #002E67;   /* 主色·深海军蓝，logo 主色 */
    --brand-dark:     #001E45;   /* 更深，用于页脚/悬停 */
    --brand-mid:      #14498F;   /* 中间调，用于渐变 */
    --accent:         #006CF1;   /* 强调蓝，logo 斜角色 */

    /* 文字色阶（均在白底上通过对比度要求） */
    --text:           #1F2D3D;   /* 正文，约 13:1 */
    --text-strong:    #002E67;   /* 标题 */
    --text-muted:     #5A6572;   /* 次要说明，约 6:1 */
    --text-invert:    #FFFFFF;

    /* 链接与可交互色（比 --accent 加深，保证白底小字达标） */
    --link:           #0B4FA8;
    --link-hover:     #002E67;

    /* 中性色 */
    --bg:             #FFFFFF;
    --bg-soft:        #F4F7FB;   /* 浅色区块底 */
    --bg-mist:        #EAF0F8;   /* 更浅的分隔底 */
    --border:         #DCE3EC;
    --border-strong:  #C2CDDB;

    /* 语义色（预警/状态，页面正文小字不单独依靠它传达信息） */
    --success:        #2E7D32;
    --warning:        #B26A00;
    --danger:         #C0362C;

    /* 排版 */
    --font-sans: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB",
                 "Microsoft YaHei", "Source Han Sans SC", "Noto Sans CJK SC", sans-serif;
    --font-num:  "SF Mono", ui-monospace, Menlo, Consolas, "Courier New", monospace;

    /* 间距刻度 */
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 24px;
    --sp-6: 32px;
    --sp-7: 48px;
    --sp-8: 64px;
    --sp-9: 96px;

    /* 容器 */
    --container: 1160px;
    --radius:    10px;
    --radius-sm: 6px;
    --radius-lg: 16px;

    /* 阴影 */
    --shadow-sm: 0 1px 2px rgba(0, 46, 103, .06);
    --shadow:    0 4px 16px rgba(0, 46, 103, .08);
    --shadow-lg: 0 12px 32px rgba(0, 46, 103, .12);

    /* 层级 */
    --z-header: 100;
    --z-lightbox: 500;
}

/* --------------------------------------------------------------------------
   2. 重置
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: 84px;   /* 锚点跳转时避开固定头部 */
}

body {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.7;
    color: var(--text);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--link); text-decoration: none; }
a:hover { color: var(--link-hover); text-decoration: underline; }

button { font: inherit; color: inherit; cursor: pointer; }
ul, ol { margin: 0; padding: 0; list-style: none; }
figure { margin: 0; }

/* 键盘可达性：保留清晰的焦点轮廓 */
:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 2px;
    border-radius: 3px;
}

/* 供屏幕阅读器使用 */
.visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0);
    white-space: nowrap; border: 0;
}

.skip-link {
    position: absolute; left: 8px; top: -60px;
    z-index: 999;
    padding: 10px 18px;
    background: var(--brand); color: #fff;
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
    transition: top .15s ease;
}
.skip-link:focus { top: 0; text-decoration: none; color: #fff; }

/* --------------------------------------------------------------------------
   3. 排版
   -------------------------------------------------------------------------- */
h1, h2, h3, h4, h5 {
    margin: 0 0 var(--sp-4);
    color: var(--text-strong);
    line-height: 1.3;
    font-weight: 700;
    letter-spacing: -.01em;
}

h1 { font-size: 2.5rem; }
h2 { font-size: 1.875rem; }
h3 { font-size: 1.25rem; }
h4 { font-size: 1.0625rem; }

p { margin: 0 0 var(--sp-4); }
p:last-child { margin-bottom: 0; }

strong { font-weight: 700; color: var(--text-strong); }
code, kbd { font-family: var(--font-num); font-size: .9em; }

/* --------------------------------------------------------------------------
   4. 布局
   -------------------------------------------------------------------------- */
.container {
    width: 100%;
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 var(--sp-5);
}

.section { padding: var(--sp-9) 0; }
.section--tight { padding: var(--sp-7) 0; }
.section--soft { background: var(--bg-soft); }
.section--mist { background: var(--bg-mist); }
.section--dark {
    background: var(--brand);
    color: #E8EFF9;
}
.section--dark h2,
.section--dark h3 { color: #fff; }

.section-head { max-width: 760px; margin: 0 auto var(--sp-7); text-align: center; }
.section-head p { color: var(--text-muted); font-size: 1.0625rem; }

.eyebrow {
    display: inline-block;
    margin-bottom: var(--sp-3);
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--link);
}
.section--dark .eyebrow { color: #8FC0FF; }

.grid { display: grid; gap: var(--sp-5); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

/* --------------------------------------------------------------------------
   5. 按钮
   -------------------------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    min-height: 44px;              /* 触控目标下限 */
    padding: 11px 26px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    transition: background-color .18s ease, color .18s ease,
                border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--primary {
    background: var(--brand);
    color: #fff;
    box-shadow: var(--shadow-sm);
}
.btn--primary:hover { background: var(--brand-dark); color: #fff; box-shadow: var(--shadow); }

.btn--accent { background: var(--accent); color: #fff; }
.btn--accent:hover { background: #0060D8; color: #fff; }

.btn--ghost {
    background: transparent;
    color: var(--brand);
    border-color: var(--border-strong);
}
.btn--ghost:hover { border-color: var(--brand); background: var(--bg-soft); color: var(--brand-dark); }

.btn--invert {
    background: #fff;
    color: var(--brand);
}
.btn--invert:hover { background: #EAF2FF; color: var(--brand-dark); }

.btn--outline-invert {
    background: transparent;
    color: #fff;
    border-color: rgba(255, 255, 255, .5);
}
.btn--outline-invert:hover { background: rgba(255, 255, 255, .12); color: #fff; border-color: #fff; }

.btn--sm { min-height: 38px; padding: 8px 18px; font-size: .9375rem; }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--sp-4); }
.btn-row--center { justify-content: center; }

/* --------------------------------------------------------------------------
   6. 卡片
   -------------------------------------------------------------------------- */
.card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--sp-6);
    box-shadow: var(--shadow-sm);
    transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.card--hover:hover {
    box-shadow: var(--shadow);
    transform: translateY(-3px);
    border-color: var(--border-strong);
}
.card h3 { margin-bottom: var(--sp-2); }
.card p { color: var(--text-muted); font-size: .9375rem; }

.card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px; height: 48px;
    margin-bottom: var(--sp-4);
    border-radius: var(--radius-sm);
    background: var(--bg-mist);
    font-size: 1.375rem;
    line-height: 1;
}

/* --------------------------------------------------------------------------
   7. 徽标 / 标签
   -------------------------------------------------------------------------- */
.badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 100px;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .02em;
    background: var(--bg-mist);
    color: var(--brand);
    vertical-align: middle;
}
.badge--accent { background: #E3F0FF; color: #0B4FA8; }
.badge--outline { background: transparent; border: 1px solid var(--border-strong); color: var(--text-muted); }

/* --------------------------------------------------------------------------
   8. 通用文本块
   -------------------------------------------------------------------------- */
.lead { font-size: 1.125rem; color: var(--text-muted); }
.muted { color: var(--text-muted); }
.small { font-size: .875rem; }
.center { text-align: center; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   9. 响应式
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
    h1 { font-size: 2.125rem; }
    h2 { font-size: 1.625rem; }
    .section { padding: var(--sp-8) 0; }
    .grid--4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    body { font-size: 15.5px; }
    h1 { font-size: 1.75rem; }
    h2 { font-size: 1.4375rem; }
    h3 { font-size: 1.125rem; }
    .container { padding: 0 var(--sp-4); }
    .section { padding: var(--sp-7) 0; }
    .section--tight { padding: var(--sp-6) 0; }
    .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
    .card { padding: var(--sp-5); }
    .btn-row { gap: var(--sp-3); }
    .btn-row .btn { flex: 1 1 auto; }
    html { scroll-padding-top: 68px; }
}

/* 尊重"减少动态效果"偏好 */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .001ms !important;
        transition-duration: .001ms !important;
    }
}

/* 打印：隐去导航与装饰 */
@media print {
    .site-header, .site-footer, .btn, .lightbox { display: none !important; }
    body { color: #000; }
}