@import url(../libs/font-awesome-4.7.0/css/font-awesome.min.css);
/* =====================================================================
   设计令牌（Design Tokens）— 照抄《名师页》L23-76 同款 :root，色值零新增
   ===================================================================== */
:root {
    /* ===== Primary 柠檬黄（黄增强核心） ===== */
    --color-brand-yellow: #F5D800;
    --color-brand-yellow-hover: #FFD60A;
    --color-brand-yellow-active: #D9C000;
    --color-bg-yellow-soft: #FFF8C5;
    --color-brand-yellow-text: #7A6800;
    /* 浅色底安全黄文字（eyebrow，白底 AA ~5.5:1；禁 #F5D800 落白底小字） */
    /* ===== Secondary 电光蓝 ===== */
    --color-brand-blue: #1E40AF;
    --color-brand-blue-hover: #1D4ED8;
    --color-brand-blue-deep: #10246B;
    --color-brand-blue-light: #DCE6FF;
    /* ===== Neutral ===== */
    --color-ink: #0A0A0A;
    --color-white: #FFFFFF;
    --color-bg: #FFFFFF;
    --color-bg-soft: #F5F5F5;
    --color-border: #E5E7EB;
    --color-text-heading: #0A0A0A;
    --color-text-primary: #1F2937;
    --color-text-secondary: #6B7280;
    --color-text-tertiary: #9CA3AF;
    /* ===== Dark Block Scheme（深色区） ===== */
    --color-dark-blue: #10246B;
    --color-dark-ink: #0A0A0A;
    --color-on-dark: #FFFFFF;
    --color-on-dark-muted: #C7D2FE;
    --color-on-dark-yellow: #F5D800;
    --color-dark-border: rgba(255, 255, 255, 0.14);
    /* ===== On-Color Text ===== */
    --color-on-yellow: #0A0A0A;
    --color-on-blue: #FFFFFF;
    /* ===== Yellow Overlay / Glow ===== */
    --overlay-yellow-teacher: rgba(245, 216, 0, 0.08);
    --overlay-yellow-campus: rgba(245, 216, 0, 0.05);
    --glow-yellow-pulse: 0 0 0 6px rgba(245, 216, 0, 0.25);
    /* ===== Fonts（全站仅 3 字族） ===== */
    --font-heading: "Source Han Sans SC", "Noto Sans SC", "Alibaba PuHuiTi", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
    --font-body: "Source Han Sans SC", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
    --font-english: "Inter", "Helvetica Neue", "Arial", sans-serif;
    --font-number: "Inter", "Archivo Narrow", "DIN Alternate", "Roboto Mono", ui-monospace, monospace;
    /* ===== Spacing (8pt 栅格) ===== */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 56px;
    --space-8: 72px;
    --space-9: 104px;
    --space-10: 144px;
    /* ===== Radius ===== */
    --radius-card: 14px;
    --radius-card-sm: 10px;
    --radius-button: 10px;
    --radius-input: 10px;
    --radius-pill: 999px;
    --radius-hardcut: 0;
    /* ===== Shadow（四级） ===== */
    --shadow-card: 0 1px 2px rgba(10, 10, 10, 0.03), 0 2px 8px rgba(10, 10, 10, 0.05);
    --shadow-float: 0 6px 20px rgba(10, 10, 10, 0.08), 0 1px 4px rgba(10, 10, 10, 0.05);
    --shadow-sticky: 0 1px 12px rgba(16, 36, 107, 0.14);
    /* Z-index */
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-modal: 300;
    --z-toast: 400;
    /* 容器 */
    --container: 1200px;
    --container-wide: 1440px;
    --head-h: 60px;
}

/* =====================================================================
   基础重置 / 排版节奏（照抄名师页 L78-140）
   ===================================================================== */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

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

body {
    font-family: var(--font-body);
    color: var(--color-text-primary);
    background: var(--color-bg);
    line-height: 1.7;
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}

img,
svg,
video {
    display: block;
    max-width: 100%;
}

a {
    color: inherit;
    text-decoration: none;
}

button {
    font-family: inherit;
    cursor: pointer;
    border: none;
    background: none;
    color: inherit;
}

ul {
    list-style: none;
}

::selection {
    background: var(--color-brand-yellow);
    color: var(--color-on-yellow);
}

/* 字号阶梯（移动优先 / PC 跃升） */
.display {
    font-family: var(--font-heading);
    font-weight: 900;
    font-size: 2.5rem;
    line-height: 1.05;
    letter-spacing: -0.02em;
}

h1.h1 {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 1.75rem;
    line-height: 1.15;
    letter-spacing: -0.01em;
}

h2.h2 {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 1.375rem;
    line-height: 1.2;
}

h3.h3 {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.125rem;
    line-height: 1.3;
}

h4.h4 {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 1rem;
    line-height: 1.4;
}

.lead {
    color: var(--color-text-secondary);
}

.body {
    font-size: 0.9375rem;
    line-height: 1.7;
    color: var(--color-text-secondary);
}

.small {
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--color-text-secondary);
}

.micro {
    font-size: 0.75rem;
    line-height: 1.4;
    font-weight: 500;
    letter-spacing: 0.02em;
}

.num {
    font-family: var(--font-number);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}

@media(min-width:768px) {
    .display {
        font-size: 3.5rem;
        line-height: 1.03;
    }

    h1.h1 {
        font-size: 2.25rem;
    }

    h2.h2 {
        font-size: 1.75rem;
    }

    h3.h3 {
        font-size: 1.25rem;
    }

    .body {
        font-size: 1rem;
    }
}

@media(min-width:1024px) {
    .display {
        font-size: 4.5rem;
    }

    h1.h1 {
        font-size: 2.75rem;
    }

    h2.h2 {
        font-size: 2.25rem;
    }

    h4.h4 {
        font-size: 1.0625rem;
    }
}

/* 布局容器 / 区块 */
.container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: 20px;
}

.section {
    padding-block: var(--space-6);
    /* min-height: calc(100vh - 64px); */
    display: flex;
    flex-direction: column;
    justify-content: center;
}

@media(min-width:1024px) {
    .section {
        padding-block: var(--space-7);
    }
}

section[id],
footer[id] {
    scroll-margin-top: 64px;
}

.section-head {
    max-width: 760px;
    margin-bottom: var(--space-6);
}

.section-head .eyebrow {
    margin-bottom: var(--space-3);
}

.section-head h1,
.section-head h2 {
    margin-bottom: var(--space-3);
}

/* eyebrow 双轨：浅色区用安全黄 #7A6800（AA）；深色区/黄底用变体 */
.eyebrow {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-brand-yellow-text);
}

.eyebrow--ink {
    color: var(--color-ink);
    opacity: .75;
}

.eyebrow--dark {
    color: var(--color-on-dark-yellow);
}

/* =====================================================================
   组件：CTA 按钮（黄主态 / 蓝次态 / 墨描边）— 照抄名师页 L145-166
   ===================================================================== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-weight: 800;
    font-size: 0.9375rem;
    border-radius: var(--radius-button);
    padding: 14px 28px;
    transition: transform .18s ease, background .18s ease, box-shadow .18s ease, border-color .18s ease, color .18s ease;
    white-space: nowrap;
    will-change: transform;
    border: 1.5px solid transparent;
}

/* 黄主态 */
.btn--primary {
    background: var(--color-brand-yellow);
    color: var(--color-on-yellow);
}

.btn--primary:hover {
    background: var(--color-brand-yellow-hover);
    transform: translateY(-1px);
    box-shadow: var(--shadow-float);
}

.btn--primary:active {
    background: var(--color-brand-yellow-active);
    box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.12);
    transform: translateY(0);
}

/* 蓝次态 */
.btn--secondary {
    background: var(--color-brand-blue);
    color: var(--color-on-blue);
}

.btn--secondary:hover {
    background: var(--color-brand-blue-hover);
    transform: translateY(-1px);
    box-shadow: var(--shadow-float);
}

.btn--secondary:active {
    background: var(--color-brand-blue-hover);
    box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.18);
}

/* 墨描边 */
.btn--ghost-ink {
    background: transparent;
    border-color: var(--color-ink);
    color: var(--color-ink);
}

.btn--ghost-ink:hover {
    background: var(--color-ink);
    color: var(--color-brand-yellow);
    transform: translateY(-1px);
}

/* 黄描边（深色区次态） */
.btn--ghost-yellow {
    background: transparent;
    border-color: var(--color-brand-yellow);
    color: var(--color-on-dark-yellow);
}

.btn--ghost-yellow:hover {
    background: var(--color-brand-yellow);
    color: var(--color-on-yellow);
    transform: translateY(-1px);
}

.btn:focus-visible {
    outline: 3px solid rgba(30, 64, 175, 0.35);
    outline-offset: 2px;
}

.btn--sm {
    padding: 10px 18px;
    font-size: 0.8125rem;
}