/* ============================================================
   鹰牛官网 · 首页 16 段（设计稿 S01-S16 版式）
   贴设计稿基调：深海军蓝底 + 网格纹理 · 蓝#3b82f6→绿#34d399 渐变
   · 玻璃卡片 · 渐变图标磁贴 · 流程胶囊链 · 渐变横幅 · 轨道图
   仅首页用深色 token（.hn-page）；features/advantages/compare/roadmap
   四个内页也加载本文件的 .hn-* 组件，但通过 light.css 的 .hn-page--light
   把 token 整组换浅。本文件其余硬编码深色只出现在首页专属组件上。
   进场动效复用 style.css 的 .fx + main.js 观察器；本文件只补
   链式点亮 / 轨道旋转的专属动画，并统一受 prefers-reduced-motion 约束。
   ============================================================ */

/* ---------- tokens ---------- */
.hn-page {
    --hn-bg: #0a1220;
    --hn-bg-2: #0c1626;
    --hn-card: rgba(23, 37, 63, .55);
    --hn-card-solid: #12203a;
    --hn-line: rgba(96, 148, 255, .16);
    --hn-blue: #3b82f6;
    --hn-green: #34d399;
    --hn-purple: #8b5cf6;
    --hn-cyan: #22d3ee;
    --hn-grad: linear-gradient(120deg, var(--hn-blue), var(--hn-green));
    --hn-text: #eef2f8;
    --hn-muted: #9fb0c9;
    position: relative;
    background: var(--hn-bg);
    color: var(--hn-text);
    overflow: hidden;
}
/* 全页网格纹理（贴设计稿的暗格底） */
.hn-page::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(rgba(96, 148, 255, .05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(96, 148, 255, .05) 1px, transparent 1px);
    background-size: 56px 56px;
    -webkit-mask-image: radial-gradient(75% 60% at 50% 0%, #000 0%, transparent 100%);
    mask-image: radial-gradient(75% 60% at 50% 0%, #000 0%, transparent 100%);
    pointer-events: none;
}
.hn-page > * { position: relative; }

/* ---------- 段落骨架 ---------- */
.hn-sec { padding: 92px 0; position: relative; }
.hn-sec--alt { background: var(--hn-bg-2); }
.hn-sec--alt::before {
    content: "";
    position: absolute; inset: 0;
    background:
        radial-gradient(50% 65% at 85% 20%, rgba(59, 130, 246, .08), transparent 60%),
        radial-gradient(45% 60% at 10% 85%, rgba(52, 211, 153, .06), transparent 60%);
    pointer-events: none;
}
.hn-head { max-width: 780px; margin: 0 auto 52px; text-align: left; }
.hn-kicker {
    display: inline-block;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 3px;
    color: var(--hn-blue);
    background: rgba(59, 130, 246, .1);
    border: 1px solid rgba(59, 130, 246, .3);
    border-radius: 999px;
    padding: 5px 14px;
    margin-bottom: 16px;
}
.hn-title {
    font-size: clamp(26px, 3.6vw, 42px);
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: .5px;
    margin-bottom: 12px;
}
.hn-sub { color: var(--hn-muted); font-size: clamp(14.5px, 1.5vw, 17px); }
.hn-page .grad-text {
    background: var(--hn-grad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* ---------- 网格 ---------- */
.hn-grid { display: grid; gap: 18px; }
.hn-grid--2 { grid-template-columns: repeat(2, 1fr); }
.hn-grid--3 { grid-template-columns: repeat(3, 1fr); }
.hn-grid--4 { grid-template-columns: repeat(4, 1fr); }
.hn-grid--tight { gap: 14px; }

/* ---------- 玻璃卡片 ---------- */
.hn-card {
    background: var(--hn-card);
    border: 1px solid var(--hn-line);
    border-radius: 16px;
    padding: 26px 24px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.hn-card:hover {
    transform: translateY(-5px);
    border-color: rgba(59, 130, 246, .5);
    box-shadow: 0 16px 38px rgba(2, 8, 20, .55), 0 0 0 1px rgba(59, 130, 246, .12);
}
.hn-card h3 { font-size: 17px; font-weight: 700; margin: 14px 0 8px; }
.hn-card p { color: var(--hn-muted); font-size: 14px; line-height: 1.75; }
.hn-card--big { padding: 32px 30px; }
.hn-card--big h3 { font-size: 20px; }
.hn-card-lead { color: var(--hn-text) !important; font-size: 14.5px !important; margin-bottom: 6px; }
.hn-card--center { text-align: center; }
.hn-big {
    font-size: clamp(30px, 3.2vw, 42px);
    font-weight: 800;
    background: var(--hn-grad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    margin-bottom: 8px;
}

/* ---------- 图标磁贴 ---------- */
.hn-tile {
    width: 46px; height: 46px;
    border-radius: 13px;
    display: inline-flex; align-items: center; justify-content: center;
    color: #fff;
    flex-shrink: 0;
    box-shadow: 0 6px 18px rgba(2, 8, 20, .4);
}
.hn-tile svg { width: 23px; height: 23px; }
.hn-tile--b { background: linear-gradient(135deg, #3b82f6, #2563eb); }
.hn-tile--g { background: linear-gradient(135deg, #34d399, #0ea371); }
.hn-tile--p { background: linear-gradient(135deg, #8b5cf6, #6d3ee0); }
.hn-tile--c { background: linear-gradient(135deg, #22d3ee, #0891b2); }
.hn-tile--r { background: linear-gradient(135deg, #fb7185, #e11d48); }

/* ---------- 编号圆片 ---------- */
.hn-num {
    width: 34px; height: 34px;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--hn-grad);
    color: #fff;
    font-weight: 800;
    font-size: 15px;
    flex-shrink: 0;
    box-shadow: 0 4px 14px rgba(59, 130, 246, .35);
}

/* ---------- 流程胶囊链 ---------- */
.hn-chain {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 26px 0;
}
.hn-chain-pill {
    display: inline-flex;
    align-items: center;
    padding: 9px 20px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    color: var(--hn-muted);
    background: rgba(23, 37, 63, .6);
    border: 1px solid var(--hn-line);
    transition: color .4s, border-color .4s, box-shadow .4s, background .4s;
}
.hn-chain-arrow { color: var(--hn-blue); font-size: 15px; opacity: .75; }
.hn-chain-pill--on {
    color: #fff;
    background: rgba(59, 130, 246, .16);
    border-color: rgba(59, 130, 246, .55);
}
/* 进场后沿链推进的点亮波（--i 为序号） */
@media (prefers-reduced-motion: no-preference) {
    .hn-chain.in-view .hn-chain-pill { animation: hnPill 3.2s ease calc(var(--i) * .45s) infinite alternate; }
    @keyframes hnPill {
        0%, 100% { color: var(--hn-muted); border-color: var(--hn-line); background: rgba(23, 37, 63, .6); box-shadow: none; }
        45% { color: #fff; border-color: rgba(59, 130, 246, .6); background: rgba(59, 130, 246, .16); box-shadow: 0 0 18px rgba(59, 130, 246, .25); }
    }
}

/* ---------- 渐变横幅 ---------- */
.hn-ribbon {
    margin-top: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    text-align: center;
    padding: 16px 26px;
    border-radius: 14px;
    font-size: 15px;
    font-weight: 600;
    color: var(--hn-text);
    background:
        linear-gradient(var(--hn-card-solid), var(--hn-card-solid)) padding-box,
        var(--hn-grad) border-box;
    border: 1px solid transparent;
}
.hn-ribbon-dot {
    width: 9px; height: 9px;
    border-radius: 50%;
    background: var(--hn-grad);
    flex-shrink: 0;
    box-shadow: 0 0 12px rgba(52, 211, 153, .8);
}

/* ---------- Hero ---------- */
.hn-hero {
    padding: 88px 0 72px;
    background:
        radial-gradient(55% 60% at 80% 10%, rgba(59, 130, 246, .16), transparent 62%),
        radial-gradient(45% 50% at 12% 82%, rgba(52, 211, 153, .10), transparent 62%);
}
.hn-hero-badge {
    display: inline-flex;
    align-items: center;
    padding: 6px 16px;
    border-radius: 999px;
    border: 1px solid rgba(52, 211, 153, .4);
    background: rgba(52, 211, 153, .08);
    color: var(--hn-green);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1px;
    margin-bottom: 22px;
}
.hn-hero-title {
    font-size: clamp(34px, 5vw, 60px);
    font-weight: 900;
    line-height: 1.24;
    letter-spacing: 1px;
    margin-bottom: 16px;
}
.hn-hero-sub { color: var(--hn-muted); font-size: clamp(15px, 1.8vw, 19px); }
.hn-hero-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin: 34px 0 8px;
}
.hn-stat {
    background: var(--hn-card);
    border: 1px solid var(--hn-line);
    border-radius: 14px;
    padding: 18px 20px;
}
.hn-stat-num {
    font-size: clamp(24px, 2.6vw, 34px);
    font-weight: 800;
    background: var(--hn-grad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    line-height: 1.2;
}
.hn-stat-unit { font-size: 14px; font-weight: 700; margin-left: 2px; }
.hn-stat-label { color: var(--hn-muted); font-size: 13px; margin-top: 4px; }
.hn-hero-main {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: 36px;
    align-items: center;
    margin-top: 30px;
}
.hn-hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; }
.hn-page .icon { width: 17px; height: 17px; display: inline-block; vertical-align: -3px; }
.hn-hero-shot { animation: hnFloat 6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
    .hn-hero-shot { animation: none; }
}
@keyframes hnFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

/* ---------- 截图位（玻璃窗） ---------- */
.hn-shot {
    background: linear-gradient(165deg, rgba(23, 37, 63, .75), rgba(12, 22, 38, .9));
    border: 1px solid var(--hn-line);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 22px 60px rgba(2, 8, 20, .5);
}
.hn-shot-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 16px;
    border-bottom: 1px solid var(--hn-line);
    background: rgba(10, 18, 32, .8);
}
.hn-shot-dots { display: inline-flex; gap: 6px; }
.hn-shot-dots i {
    width: 10px; height: 10px;
    border-radius: 50%;
    background: rgba(159, 176, 201, .35);
}
.hn-shot-dots i:first-child { background: #f87171aa; }
.hn-shot-dots i:nth-child(2) { background: #fbbf24aa; }
.hn-shot-dots i:nth-child(3) { background: #34d399aa; }
.hn-shot-title { font-size: 12.5px; color: var(--hn-muted); letter-spacing: .5px; }
/* 截图按宽度固定、高度自适应：源图为 3840px 超清真实系统截图（2x DPR），
   等比缩放不裁切不限高，文字锐利无变形 */
.hn-shot-body {
    display: flex;
    justify-content: center;
    background: rgba(10, 18, 32, .45);
}
.hn-shot-body img {
    width: 100%;
    height: auto;
}
.hn-shot-ph {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-align: center;
    padding: 24px;
    background:
        radial-gradient(40% 50% at 50% 40%, rgba(59, 130, 246, .07), transparent 70%);
    color: var(--hn-muted);
    font-size: 13px;
}
.hn-shot-ph b { color: var(--hn-text); font-size: 15px; }
.hn-shot-ph-icon {
    width: 44px; height: 44px;
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    color: var(--hn-blue);
    background: rgba(59, 130, 246, .12);
    border: 1px solid rgba(59, 130, 246, .3);
}
.hn-shot-ph-icon svg { width: 22px; height: 22px; }

/* ---------- 左右分栏 ---------- */
.hn-split {
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    gap: 44px;
    align-items: center;
}
.hn-split--shot-left { grid-template-columns: 1.15fr 1fr; }
.hn-split--shot-left .hn-split-text { order: 2; }
.hn-split--shot-left .hn-split-shot { order: 1; }
.hn-cap-no {
    font-size: 60px;
    font-weight: 900;
    line-height: 1;
    background: var(--hn-grad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    opacity: .85;
    margin-bottom: 18px;
}
/* 竖排卡片列（S09 主动获客：截图左 + 编号卡片右） */
.hn-stack { display: grid; gap: 16px; }
.hn-stack .hn-card { display: grid; grid-template-columns: auto 1fr; column-gap: 14px; align-items: start; }
.hn-stack .hn-card h3 { grid-column: 2; }
.hn-stack .hn-card p { grid-column: 2; margin-top: 6px; }
.hn-stack .hn-num { grid-row: span 2; }
.hn-bullets { list-style: none; display: grid; gap: 16px; margin-top: 18px; }
.hn-bullets li { display: flex; gap: 12px; align-items: flex-start; }
.hn-bullets b { display: block; font-size: 16px; }
.hn-bullets p { color: var(--hn-muted); font-size: 14px; margin-top: 2px; }
.hn-bullets--sm { gap: 10px; margin-top: 12px; }
.hn-bullets--sm b { font-size: 14px; font-weight: 600; }
.hn-check {
    width: 22px; height: 22px;
    border-radius: 50%;
    background: rgba(52, 211, 153, .14);
    border: 1px solid rgba(52, 211, 153, .45);
    color: var(--hn-green);
    font-size: 12px;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    margin-top: 2px;
}

/* ---------- 平台 chips ---------- */
.hn-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 8px; }
.hn-chip {
    padding: 8px 18px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    color: var(--hn-text);
    background: var(--hn-card);
    border: 1px solid var(--hn-line);
    transition: transform .2s, border-color .2s;
}
.hn-chip:hover { transform: translateY(-2px); border-color: rgba(59, 130, 246, .55); }

/* ---------- 架构六层 ---------- */
.hn-arch {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 28px;
    align-items: start;
}
.hn-arch-layers { list-style: none; display: grid; gap: 12px; }
.hn-arch-layer {
    display: flex;
    gap: 16px;
    align-items: center;
    background: var(--hn-card);
    border: 1px solid var(--hn-line);
    border-radius: 14px;
    padding: 16px 20px;
    transition: transform .2s, border-color .2s;
}
.hn-arch-layer:hover { transform: translateX(6px); border-color: rgba(59, 130, 246, .5); }
.hn-arch-layer b { font-size: 16px; }
.hn-arch-layer p { color: var(--hn-muted); font-size: 13.5px; margin-top: 2px; }
.hn-arch-side {
    position: sticky;
    top: calc(var(--nav-h) + 24px);
    background:
        linear-gradient(var(--hn-card-solid), var(--hn-card-solid)) padding-box,
        var(--hn-grad) border-box;
    border: 1px solid transparent;
    border-radius: 16px;
    padding: 30px 28px;
}
.hn-arch-side h3 { font-size: 20px; margin-bottom: 8px; }
.hn-arch-side p { color: var(--hn-muted); font-size: 14px; }
.hn-chain--sm { margin: 18px 0 0; }
.hn-chain--sm .hn-chain-pill { padding: 6px 14px; font-size: 13px; }
/* 侧栏小链常亮即可，不参与循环动画 */
.hn-chain--sm .hn-chain-pill { animation: none !important; }

/* ---------- 轨道图（S15） ---------- */
.hn-orbit {
    position: relative;
    width: min(480px, 86vw);
    aspect-ratio: 1;
    margin: 44px auto 10px;
    --orbit-r: calc(min(480px, 86vw) * .36);
}
.hn-orbit-ring {
    position: absolute;
    inset: 14%;
    border-radius: 50%;
    border: 1px dashed rgba(96, 148, 255, .3);
}
.hn-orbit-ring::after {
    content: "";
    position: absolute;
    inset: -14%;
    border-radius: 50%;
    border: 1px solid rgba(96, 148, 255, .12);
}
.hn-orbit-center {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 44%;
    height: 44%;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(18px, 2.4vw, 24px);
    font-weight: 800;
    background:
        radial-gradient(circle at 30% 25%, rgba(59, 130, 246, .25), rgba(12, 22, 38, .95) 70%) padding-box,
        var(--hn-grad) border-box;
    border: 1px solid transparent;
    box-shadow: 0 0 44px rgba(59, 130, 246, .28);
    z-index: 2;
}
.hn-orbit-spin { position: absolute; inset: 0; }
@media (prefers-reduced-motion: no-preference) {
    .hn-orbit.in-view .hn-orbit-spin { animation: hnSpin 36s linear infinite; }
    .hn-orbit.in-view .hn-orbit-item { animation: hnSpinRev 36s linear infinite; }
}
@keyframes hnSpin { to { transform: rotate(360deg); } }
@keyframes hnSpinRev { to { transform: rotate(-360deg); } }
/* 卫星标签：摆到 --a 角度；反向自转抵消轨道旋转保持文字水平 */
.hn-orbit-item {
    position: absolute;
    top: 50%; left: 50%;
    transform: rotate(var(--a)) translateY(calc(-1 * var(--orbit-r))) rotate(calc(-1 * var(--a))) translate(-50%, -50%);
    padding: 7px 16px;
    border-radius: 999px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--hn-text);
    background: var(--hn-card-solid);
    border: 1px solid var(--hn-line);
    box-shadow: 0 6px 18px rgba(2, 8, 20, .45);
    white-space: nowrap;
}

/* ---------- S16 CTA ---------- */
.hn-sec--cta {
    padding: 110px 0;
    background:
        radial-gradient(55% 70% at 50% 100%, rgba(52, 211, 153, .12), transparent 65%),
        radial-gradient(50% 60% at 50% 0%, rgba(59, 130, 246, .14), transparent 65%),
        var(--hn-bg-2);
    text-align: center;
}
.hn-cta { display: flex; flex-direction: column; align-items: center; }
.hn-cta .hn-sub { margin-bottom: 30px; }
.hn-cta-btn { font-size: 18px; padding: 17px 46px; box-shadow: 0 14px 40px rgba(59, 130, 246, .4); }
.hn-cta-foot { margin-top: 26px; color: var(--hn-muted); font-size: 13px; letter-spacing: 1px; }

/* ---------- 响应式 ---------- */
@media (max-width: 1024px) {
    .hn-grid--4 { grid-template-columns: repeat(2, 1fr); }
    .hn-arch { grid-template-columns: 1fr; }
    .hn-arch-side { position: static; }
    .hn-split, .hn-split--shot-left { grid-template-columns: 1fr; gap: 28px; }
    .hn-split--shot-left .hn-split-text { order: 1; }
    .hn-split--shot-left .hn-split-shot { order: 2; }
}
@media (max-width: 640px) {
    .hn-sec { padding: 60px 0; }
    .hn-hero { padding: 56px 0 48px; }
    .hn-hero-stats { grid-template-columns: repeat(2, 1fr); }
    .hn-hero-main { grid-template-columns: 1fr; }
    .hn-grid--2, .hn-grid--3, .hn-grid--4 { grid-template-columns: 1fr; }
    .hn-head { margin-bottom: 34px; }
    .hn-chain { gap: 6px; }
    .hn-chain-pill { padding: 7px 13px; font-size: 12.5px; }
    .hn-chain-arrow { font-size: 12px; }
    .hn-ribbon { font-size: 13.5px; padding: 14px 18px; }
    .hn-orbit-item { font-size: 12px; padding: 5px 12px; }
}

/* ---------- 深色首页的例外（全站转浅后保留的深色面） ---------- */
/* 全站内容页转浅后，首页仍是唯一深色页：ghost 按钮在深色 hero 上
   需要浅色文字/深色底。:not(.hn-page--light) 排除复用本文件的内页。 */
.hn-page:not(.hn-page--light) .btn-ghost {
    color: #eef2f8;
    border-color: rgba(148, 163, 184, .30);
    background: rgba(14, 23, 40, .5);
}
.hn-page:not(.hn-page--light) .btn-ghost:hover {
    color: #7ab5ff;
    border-color: rgba(60, 156, 255, .55);
    background: rgba(14, 23, 40, .7);
}