/* ============================================================
   鹰牛官网 · 内页浅色主题（.hn-page--light）
   首页保留深色科技风（home.css 原样生效）；features/advantages/
   compare/roadmap 四个内页的 hn-page 容器追加 hn-page--light，
   把 home.css 的深色 token 整组换浅。品牌蓝绿渐变保留，仅把
   绿色端加深保证白底对比度；小号彩字单独加深。
   加载顺序：必须在 home.css 之后（_extra_css 数组尾部）。
   ============================================================ */

/* ---------- token 整组换浅（对照 home.css .hn-page 深色组） ---------- */
.hn-page--light {
    --hn-bg: #f6f8fb;
    --hn-bg-2: #eef2f7;
    --hn-card: #ffffff;
    --hn-card-solid: #ffffff;
    --hn-line: rgba(15, 23, 42, .10);
    --hn-text: #1a2333;
    --hn-muted: #4a5568;
    /* 品牌渐变换浅底可读版：蓝色端微加深，绿色端 #34d399→#0ea371 */
    --hn-grad: linear-gradient(120deg, #2f7cf6, #0ea371);
}

/* ---------- 深色专属硬编码的浅色替换 ---------- */
/* 网格纹理：深底浅蓝线 → 浅底淡蓝线 */
.hn-page--light::before {
    background:
        linear-gradient(rgba(59, 130, 246, .08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(59, 130, 246, .08) 1px, transparent 1px);
}
/* 玻璃卡片 hover：黑重阴影 → 浅底柔和阴影 */
.hn-page--light .hn-card:hover {
    box-shadow: 0 16px 38px rgba(15, 23, 42, .10), 0 0 0 1px rgba(59, 130, 246, .10);
}
/* 图标磁贴阴影减淡 */
.hn-page--light .hn-tile { box-shadow: 0 6px 18px rgba(15, 23, 42, .18); }

/* ---------- 小号彩字在白底上加深（保证 ≥4.5:1） ---------- */
.hn-page--light .hn-kicker { color: #2563eb; }
.hn-page--light .hn-hero-badge { color: #0a8f74; }
/* 对勾图标：绿圈白字 → 加深绿 */
.hn-page--light .hn-check {
    color: #0a8f74;
    border-color: rgba(14, 163, 113, .45);
    background: rgba(14, 163, 113, .10);
}

/* ---------- 流程胶囊链（动画帧写死深色，须整组换浅） ---------- */
/* home.css 的 hnPill 关键帧在 0%/100% 基态写死深底 rgba(23,37,63,.6)，
   动画优先级高于普通样式，这里换动画名而不是只覆盖基态样式 */
.hn-page--light .hn-chain-pill {
    color: #3f4c60;
    background: #ffffff;
    border-color: rgba(15, 23, 42, .12);
}
/* 常亮胶囊：半透明蓝底白字在浅底上不可读 → 实底蓝 */
.hn-page--light .hn-chain-pill--on {
    color: #fff;
    background: #2f7cf6;
    border-color: #2f7cf6;
}
@media (prefers-reduced-motion: no-preference) {
    .hn-page--light .hn-chain.in-view .hn-chain-pill { animation-name: hnPillLight; }
    @keyframes hnPillLight {
        0%, 100% { color: #3f4c60; border-color: rgba(15, 23, 42, .12); background: #fff; box-shadow: none; }
        45% { color: #fff; border-color: #2f7cf6; background: #2f7cf6; box-shadow: 0 0 18px rgba(59, 130, 246, .35); }
    }
}