/* =============================================================
   互拓技术官网 · 站点补充样式（Bootstrap 5）

   主体视觉全部来自 Bootstrap 5.3 / Bootswatch 5 主题
   （public/theme/bs5/...，本地化，无 CDN 依赖）。
   本文件只保留 Bootstrap 无法直接表达的少量补充：
   Hero 底色、深色页脚、CTA 渐变、视频占位、知识库目录、表单蜜罐。
   不要在这里写按钮 / 卡片 / 表格 / 表单的视觉样式 —— 用 Bootstrap 5 类。
   ============================================================= */

/* 可读性：Bootswatch 的 secondary 文本在浅底上只有 ~4.1:1（WCAG AA 要 4.5），这里统一提深 */
:root { --bs-secondary-color: #5c636a; }

/* Hero：浅色渐变，突出主标题 */
.hero {
    background: linear-gradient(180deg, #f8f9fa 0%, #ffffff 100%);
    border-bottom: 1px solid #e9ecef;
}

/* 顶部导航品牌 */
.navbar-brand { font-size: 1.1rem; }
.navbar-brand small { font-size: .7rem; letter-spacing: .08em; color: rgba(255, 255, 255, .85); }

/* 品牌图形：透明底 PNG（源文件 public/brand/hutuotech/mark.svg），白气泡 + 主色纸飞机 */
.site-brand-mark { width: 36px; height: 36px; flex: 0 0 auto; }
.site-brand-mark--sm { width: 28px; height: 28px; }

/* 导航链接：默认 navbar-dark 是 55% 白，正文对比度不足；提到 92% 白 */
.navbar-dark .navbar-nav .nav-link { color: rgba(255, 255, 255, .92); }
.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link:focus { color: #fff; }
.navbar-dark .navbar-nav .nav-link.active { color: #fff; }

/* CTA：品牌渐变，比默认背景更醒目 */
.cta-band {
    background: linear-gradient(135deg, #0d6efd 0%, #5a3df0 60%, #3d2bbf 100%);
    color: #fff;
}
.cta-band h2 { color: #fff; }
.cta-band p { color: rgba(255, 255, 255, .88); }

/* 徽标：Bootswatch 用 !important 把 warning 徽标设成白字（对比度 1.7），这里覆盖为深色字 */
.badge.text-bg-warning { color: #1a1a1a !important; }

/* 页脚（深色） */
.site-footer {
    background: #212529;
    color: #adb5bd;
    padding: 3rem 0 1.5rem;
}
.site-footer h2 { color: #fff; font-size: 1rem; margin-bottom: 1rem; }
.site-footer a { color: #adb5bd; text-decoration: none; }
.site-footer a:hover, .site-footer a:focus { color: #fff; }
.site-footer hr { border-color: #495057; opacity: .35; }
.site-footer .footer-company dt { color: #adb5bd; font-weight: 400; margin-top: .35rem; }
.site-footer .footer-company dd { margin-bottom: .4rem; }

/* 视频课：比例容器内的占位层 */
.video-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    background: #f8f9fa;
    text-align: center;
    padding: 1.5rem;
}
.video-item { text-align: left; white-space: normal; }
.video-item.active small { color: inherit; }

/* 知识库目录与章节 */
.knowledge-toc .card-body ol { padding-left: 1.1rem; margin-bottom: 1rem; }
.knowledge-toc li { margin-bottom: .35rem; }
.article-section { margin-bottom: 2rem; scroll-margin-top: 5rem; }
.article-section h2 { font-size: 1.5rem; }

/* 知识库：结论卡与第一章之间留白，避免两段贴在一起 */
.knowledge-body > .card + .article-section { margin-top: 3rem; }
.further-reading { margin-top: 2rem; border-top: 1px solid #dee2e6; padding-top: 1.5rem; }

/* 表单蜜罐（正常用户不可见，机器人会填） */
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- 首页动效（D3 + GSAP） ---------- */
.hero { position: relative; overflow: hidden; }
.hero .container { position: relative; z-index: 1; }
.hero-motion {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    color: #8a97a8;
    opacity: .7;
    pointer-events: none;
    z-index: 0;
}
.hero-motion circle { transform-box: fill-box; transform-origin: center; }

/* 实线连线（跳动感由节点弹跳驱动，不使用虚线流动） */
.hero-motion line { stroke-dasharray: none; }

/* 主标题打字机（逐字输出 + 闪烁光标） */
.hero-title { min-height: 2.4em; }
.type-cursor {
    display: inline-block;
    width: 2px;
    height: 1em;
    margin-left: 3px;
    background: currentColor;
    vertical-align: -0.12em;
    animation: type-blink 1s steps(1) infinite;
}
.hero-title.is-typed .type-cursor { animation-duration: 1.2s; }
@keyframes type-blink {
    50% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .type-cursor { animation: none; }
}