@charset "utf-8";
/* ==========================================================================
   太洋模架 · 基础样式（设计变量 / 重置 / 通用组件）
   主色 #0963a0   风格：高端工业 · 直角现代
   ========================================================================== */

:root {
    /* 主色系 */
    --pri: #0963a0;
    --pri-d: #064b7b;
    --pri-dd: #04304f;
    --pri-l: #1b83c7;
    --pri-soft: #eaf4fb;
    --pri-soft-2: #d7e9f6;

    /* 中性色 */
    --ink: #101c28;
    --ink-2: #33465a;
    --ink-3: #4d6274;
    --muted: #77869a;
    --line: #e4ecf3;
    --line-2: #cfdce8;

    /* 背景 */
    --bg: #ffffff;
    --bg-soft: #f4f8fb;
    --bg-soft-2: #eaf1f7;
    --dark: #08192a;
    --dark-2: #0d2438;

    /* 尺寸 */
    --wrap: 1320px;
    --wrap-n: 1200px;
    --hdr-h: 96px;

    /* 圆角 / 阴影 / 过渡 */
    --r: 2px;
    --r-l: 4px;
    --sh-s: 0 4px 16px rgba(9, 99, 160, .08);
    --sh-m: 0 12px 34px rgba(9, 99, 160, .12);
    --sh-l: 0 22px 60px rgba(8, 40, 68, .16);
    --tr: .38s cubic-bezier(.22, .61, .36, 1);
    --tr-f: .22s ease;

    --ff: "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", "Helvetica Neue", Arial, sans-serif;
    --ff-num: "Bahnschrift", "DIN Alternate", "Helvetica Neue", Arial, sans-serif;
}

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

html { -webkit-text-size-adjust: 100%; overflow-x: clip; }

body {
    margin: 0;
    font-family: var(--ff);
    font-size: 15px;
    line-height: 1.75;
    color: var(--ink-2);
    background: var(--bg);
    overflow-x: clip;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6, p, figure, dl, dd, ul, ol { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img { max-width: 100%; border: 0; vertical-align: middle; }
a { color: inherit; text-decoration: none; transition: color var(--tr-f); }
a:hover { color: var(--pri); }
em, i, s { font-style: normal; text-decoration: none; }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }
table { border-collapse: collapse; width: 100%; }

::selection { background: var(--pri); color: #fff; }

/* 滚动条 */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--bg-soft-2); }
::-webkit-scrollbar-thumb { background: var(--line-2); }
::-webkit-scrollbar-thumb:hover { background: var(--pri-l); }

/* ---------- 布局 ---------- */
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.wrap-n { width: 100%; max-width: var(--wrap-n); margin: 0 auto; padding: 0 24px; }

.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- 通用按钮 ---------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    height: 50px; padding: 0 30px;
    font-size: 15px; font-weight: 600; letter-spacing: .5px;
    border-radius: var(--r); cursor: pointer;
    transition: all var(--tr); white-space: nowrap;
}
.btn i { font-size: 15px; }

.btn-pri { background: var(--pri); color: #fff; box-shadow: 0 8px 20px rgba(9, 99, 160, .26); }
.btn-pri:hover { background: var(--pri-d); color: #fff; transform: translateY(-2px); box-shadow: 0 14px 28px rgba(9, 99, 160, .34); }

.btn-line { border: 1px solid rgba(255, 255, 255, .55); color: #fff; }
.btn-line:hover { background: #fff; border-color: #fff; color: var(--pri-d); }

.btn-line-dark { border: 1px solid var(--line-2); color: var(--ink); background: #fff; }
.btn-line-dark:hover { border-color: var(--pri); color: var(--pri); transform: translateY(-2px); box-shadow: var(--sh-s); }

/* ---------- 板块标题 ---------- */
.sec { padding: 96px 0; position: relative; }
.sec-soft { background: var(--bg-soft); }

.sec-hd { margin-bottom: 54px; position: relative; }
.sec-hd .hd-line {
    display: block; width: 46px; height: 3px; background: var(--pri);
    margin-bottom: 18px; position: relative;
}
.sec-hd .hd-line::after {
    content: ""; position: absolute; left: 52px; top: 0;
    width: 10px; height: 3px; background: rgba(9, 99, 160, .3);
}
.sec-hd h2 {
    font-size: 40px; line-height: 1.24; font-weight: 800; color: var(--ink);
    letter-spacing: -.6px;
}
.sec-hd h2 b { color: var(--pri); font-weight: 800; }
.sec-hd .sec-d {
    margin-top: 14px; max-width: 720px;
    font-size: 15px; color: var(--muted); line-height: 1.85;
}
.sec-hd.center { text-align: center; }
.sec-hd.center .hd-line { margin-left: auto; margin-right: auto; }
.sec-hd.center .hd-line::after { left: auto; right: 52px; }
.sec-hd.center .sec-d { margin-left: auto; margin-right: auto; }

.sec-hd-row {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 30px; flex-wrap: wrap; margin-bottom: 54px;
}
.sec-hd-row .sec-hd { margin-bottom: 0; }

/* 深色板块 */
.sec-dark { background: var(--dark); color: rgba(255, 255, 255, .74); }
.sec-dark .sec-hd h2 { color: #fff; }
.sec-dark .sec-hd .sec-d { color: rgba(255, 255, 255, .58); }

/* ---------- 入场动画 ---------- */
[data-reveal] {
    opacity: 0; transform: translateY(34px);
    transition: opacity .8s cubic-bezier(.22, .61, .36, 1), transform .8s cubic-bezier(.22, .61, .36, 1);
    will-change: opacity, transform;
}
[data-reveal="left"] { transform: translateX(-40px); }
[data-reveal="right"] { transform: translateX(40px); }
[data-reveal="zoom"] { transform: scale(.94); }
[data-reveal].in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    [data-reveal] { opacity: 1 !important; transform: none !important; }
    * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ---------- 图片框 ---------- */
.pic { display: block; position: relative; overflow: hidden; background: var(--bg-soft-2); }
.pic img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .8s cubic-bezier(.22, .61, .36, 1); }
.pic-zoom:hover img { transform: scale(1.07); }

/* 首字母占位（无图时） */
.pic-ph {
    display: flex; align-items: center; justify-content: center;
    width: 100%; height: 100%; color: #fff; font-size: 30px; font-weight: 800;
    background: linear-gradient(135deg, var(--pri), var(--pri-d));
    letter-spacing: 1px;
}

/* ---------- 响应式 ---------- */
@media (max-width: 1440px) {
    :root { --wrap: 1240px; }
}
@media (max-width: 1200px) {
    :root { --wrap: 1140px; --wrap-n: 1140px; }
    .sec { padding: 80px 0; }
    .sec-hd h2 { font-size: 34px; }
}
@media (max-width: 992px) {
    body { font-size: 14.5px; }
    .sec { padding: 66px 0; }
    .sec-hd { margin-bottom: 40px; }
    .sec-hd h2 { font-size: 29px; }
    .sec-hd .sec-d { font-size: 14px; }
}
@media (max-width: 767px) {
    .wrap, .wrap-n { padding: 0 16px; }
    .sec { padding: 52px 0; }
    .sec-hd { margin-bottom: 32px; }
    .sec-hd h2 { font-size: 24px; letter-spacing: -.3px; }
    .sec-hd .hd-line { width: 36px; height: 3px; margin-bottom: 14px; }
    .btn { height: 46px; padding: 0 22px; font-size: 14px; }
}