/* ============================================================
 * nl-base.css — 基础 reset / 版式 / 工具类
 * 断点对齐参考站 mediaQueries：main ≥992 / medium 768-991 / small 480-767 / tiny <480
 * ============================================================ */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body.nl-ui {
    margin: 0;
    font-family: var(--nl-font);
    font-size: var(--nl-fs-body);
    font-weight: 300;
    line-height: var(--nl-lh-body);
    color: var(--nl-black);
    background: var(--nl-white);
    -webkit-font-smoothing: antialiased;
}

img, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }

/* ---------- 排版 ---------- */
.nl-h1 { margin: 0 0 16px; font-size: var(--nl-fs-h1); font-weight: 700; line-height: 50px; color: var(--nl-black); }
.nl-h2 { margin: 0 0 16px; font-size: var(--nl-fs-h2); font-weight: 700; line-height: 41px; color: var(--nl-black); }
.nl-h3 { margin: 0 0 14px; font-size: var(--nl-fs-h3); font-weight: 500; line-height: 46px; }
.nl-h4 { margin: 0 0 10px; font-size: var(--nl-fs-h4); font-weight: 800; line-height: 32px; }
.nl-lead { color: var(--nl-dark-blue); font-size: 20px; line-height: 30px; margin: 0 0 24px; }
.nl-p { color: var(--nl-black); font-size: 16px; margin: 0 0 12px; }
.nl-small { color: var(--nl-text-mid); font-size: var(--nl-fs-small); }
.nl-eyebrow { color: var(--nl-steel-blue); font-size: 15px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; margin: 0 0 10px; }

/* ---------- 布局工具 ---------- */
.nl-container { width: var(--nl-container); max-width: var(--nl-max); margin: 0 auto; }
.nl-container-wide { width: var(--nl-container); max-width: var(--nl-max-wide); margin: 0 auto; }
.nl-section { margin: 0 0 var(--nl-section-gap); padding: var(--nl-section-pad-top) 0 var(--nl-section-pad-bottom); }
.nl-section--tight { padding-bottom: 16px; }
.nl-section--grey { background: var(--nl-grey-95); }
.nl-center { text-align: center; }
.nl-grid { display: grid; gap: 24px; }
.nl-grid--2 { grid-template-columns: repeat(2, 1fr); }
.nl-grid--3 { grid-template-columns: repeat(3, 1fr); }
.nl-grid--4 { grid-template-columns: repeat(4, 1fr); }
.nl-flex { display: flex; }
.nl-between { justify-content: space-between; }
.nl-acenter { align-items: center; }

/* 页面主体避开固定导航 */
.nl-page { padding-top: var(--nl-header-h); }

/* ---------- 响应式 ---------- */
@media (max-width: 991px) { /* medium */
    .nl-grid--4 { grid-template-columns: repeat(2, 1fr); }
    .nl-grid--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) { /* small */
    :root { --nl-fs-h1: 30px; --nl-fs-h2: 26px; --nl-fs-h3: 26px; --nl-fs-h4: 19px; }
    .nl-container, .nl-container-wide { width: 92%; }
    .nl-grid--2, .nl-grid--3, .nl-grid--4 { grid-template-columns: 1fr; }
    .nl-section { margin-bottom: 36px; }
}
@media (max-width: 479px) { /* tiny */
    .nl-lead { font-size: 17px; }
}

/* ---------- 进场动画初始态（nl-motion 激活；无 JS 时保持可见） ---------- */
html.nl-motion-on [data-nl-reveal] { opacity: 0; }
html.nl-motion-on [data-nl-reveal].is-revealed { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
    html.nl-motion-on [data-nl-reveal] { opacity: 1 !important; transform: none !important; }
    html { scroll-behavior: auto; }
}