/**
 * Kenmore Design High-Fidelity Fintech Theme
 * Directly inspired by https://www.kenmoredesign.com/
 */

:root {
    --km-bg-darkest: #070814;
    --km-bg-main: #0c0e1e;
    --km-bg-surface: #12152d;
    --km-bg-surface-hover: #191e3e;
    --km-bg-card: rgba(18, 22, 48, 0.75);
    --km-border: rgba(255, 255, 255, 0.08);
    --km-border-hover: rgba(250, 108, 6, 0.4);
    
    /* Kenmore 经典配色体系 */
    --km-primary-orange: #FA6C06;
    --km-primary-orange-hover: #ff7d1f;
    --km-primary-orange-glow: rgba(250, 108, 6, 0.35);
    /* 橙底上的文字用近黑：白字在 #FA6C06 上只有 2.91:1，达不到 AA 4.5:1。
       保持品牌橙不变，只把「填充按钮/选中态」的文字压深，对比度升到 6.5:1。 */
    --km-on-orange: #0d1117;
    --km-accent-blue: #0066ff;
    --km-accent-cyan: #00e5ff;
    --km-accent-purple: #7928ca;
    
    --km-text-light: #ffffff;
    --km-text-body: #9da7c0;
    --km-text-dim: #626c85;
    
    --km-font: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    --km-code-font: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
}

/* 基础全局设置 */
body.km-body {
    background-color: var(--km-bg-darkest);
    color: var(--km-text-light);
    font-family: var(--km-font);
    margin: 0;
    padding: 0;
    line-height: 1.6;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

/* 渐变流光背景 */
.km-glow-bg {
    position: relative;
    background: radial-gradient(circle at 50% 0%, #171b3c 0%, #0c0e1e 45%, #070814 100%);
}
.km-ambient-glow {
    position: absolute;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(250, 108, 6, 0.12) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

/* 导航栏 */
.km-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 76px;
    background: rgba(7, 8, 20, 0.88);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--km-border);
    z-index: 1000;
    display: flex;
    align-items: center;
    transition: all 0.3s ease;
}
.km-header.scrolled {
    background: rgba(7, 8, 20, 0.98);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
}
.km-nav-container {
    max-width: 1260px;
    margin: 0 auto;
    padding: 0 24px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* 品牌 Logo */
.km-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: #fff;
    font-size: 21px;
    font-weight: 800;
    letter-spacing: -0.5px;
}
.km-brand-flame {
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, #FA6C06 0%, #ff9800 100%);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 18px;
    font-weight: 900;
    box-shadow: 0 0 18px var(--km-primary-orange-glow);
}
.km-brand-text {
    font-weight: 800;
}
.km-brand-text span {
    color: var(--km-primary-orange);
    font-weight: 300;
    margin-left: 4px;
}

/* 导航链接 */
.km-nav-links {
    display: flex;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 26px;
}
.km-nav-link {
    color: var(--km-text-body);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 6px;
}
.km-nav-link:hover {
    color: #fff;
}
.km-nav-link.active {
    color: var(--km-primary-orange);
}

/* 导航动作区 */
.km-nav-actions {
    display: flex;
    align-items: center;
    gap: 16px;
}

/* 语言下拉。用原生 <details>：无 JS 也能展开，键盘与读屏语义由浏览器提供。 */
.km-lang {
    position: relative;
    flex: none;
}
.km-lang > summary {
    list-style: none;
}
.km-lang > summary::-webkit-details-marker {
    display: none;
}
.km-lang-trigger {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 34px;
    padding: 0 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--km-border);
    border-radius: 20px;
    color: var(--km-text-body);
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition: color 0.2s, background 0.2s, border-color 0.2s;
}
.km-lang-trigger:hover,
.km-lang[open] > .km-lang-trigger {
    color: #fff;
    background: rgba(255, 255, 255, 0.09);
    border-color: var(--km-border-hover);
}
.km-lang-trigger:focus-visible {
    outline: 2px solid var(--km-primary-orange);
    outline-offset: 2px;
}
.km-lang-trigger .fa-globe {
    font-size: 13px;
}
.km-lang-caret {
    font-size: 11px;
    opacity: 0.7;
    transition: transform 0.2s;
}
.km-lang[open] .km-lang-caret {
    transform: rotate(180deg);
}
/* 触发器当前语言的宽度会被「EN / 中文」撑动，给个下限避免整条导航左右跳 */
.km-lang-current {
    min-width: 16px;
    text-align: center;
}
.km-lang-menu {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 20;
    min-width: 168px;
    margin: 0;
    padding: 6px;
    list-style: none;
    background: #12152d;
    border: 1px solid var(--km-border);
    border-radius: 12px;
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.6);
}
.km-lang-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 9px 12px;
    border-radius: 8px;
    color: var(--km-text-body);
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s;
}
.km-lang-option:hover,
.km-lang-option:focus-visible {
    background: rgba(255, 255, 255, 0.07);
    color: #fff;
}
.km-lang-option.is-active {
    color: var(--km-primary-orange);
    font-weight: 700;
}
.km-lang-check {
    font-size: 11px;
}
/* 抽屉是滚动容器，浮层会被裁掉；这里就地展开成一段内联列表 */
.km-drawer .km-lang {
    width: 100%;
}
.km-drawer .km-lang-trigger {
    width: 100%;
    height: 42px;
    padding: 0 14px;
    font-size: 13px;
}
.km-drawer .km-lang-caret {
    margin-left: auto;
}
.km-drawer .km-lang-menu {
    position: static;
    min-width: 0;
    margin-top: 8px;
    background: rgba(255, 255, 255, 0.04);
    box-shadow: none;
}
.km-drawer .km-lang-option {
    padding: 11px 12px;
    font-size: 14px;
}
/* 读屏可见、视觉不可见：给只有图标的控件补文字标签 */
.km-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* 按钮规范 */
.km-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 11px 24px;
    font-size: 14px;
    font-weight: 700;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    cursor: pointer;
    border: none;
}
.km-btn-primary {
    background: var(--km-primary-orange);
    color: var(--km-on-orange);
    box-shadow: 0 4px 20px var(--km-primary-orange-glow);
}
.km-btn-primary:hover {
    background: var(--km-primary-orange-hover);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(250, 108, 6, 0.5);
    color: var(--km-on-orange);
}
.km-btn-outline {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--km-border);
    color: #fff;
}
.km-btn-outline:hover {
    background: rgba(255, 255, 255, 0.09);
    border-color: rgba(255, 255, 255, 0.25);
    transform: translateY(-2px);
    color: #fff;
}
.km-btn-lg {
    padding: 14px 34px;
    font-size: 16px;
    border-radius: 10px;
}
.km-btn-sm {
    padding: 8px 16px;
    font-size: 13px;
    border-radius: 8px;
}

/* 页头纯文字入口（登录 / 控制台）。对比度刻意低于主按钮，不与其抢视觉焦点 */
.km-nav-plain {
    color: var(--km-text-body);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    transition: color 0.2s;
}
.km-nav-plain:hover {
    color: #fff;
}

/* 移动端汉堡按钮：只在 ≤768 出现，桌面端一级导航直接铺开 */
.km-nav-toggle {
    display: none;
    width: 40px;
    height: 40px;
    padding: 0;
    background: transparent;
    border: 1px solid var(--km-border);
    border-radius: 8px;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 4px;
}
.km-nav-toggle span {
    display: block;
    width: 18px;
    height: 2px;
    border-radius: 2px;
    background: #fff;
    transition: transform 0.2s, opacity 0.2s;
}
.km-nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.km-nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.km-nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* 移动端抽屉 */
.km-drawer {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 1500;
    background: rgba(3, 4, 12, 0.72);
    backdrop-filter: blur(4px);
    display: flex;
    justify-content: flex-end;
}
.km-drawer[hidden] { display: none; }
.km-drawer-panel {
    width: 340px;
    max-width: 86vw;
    height: 100%;
    box-sizing: border-box;
    padding: 20px 22px 30px;
    background: #0c0e1e;
    border-left: 1px solid var(--km-border);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 26px;
    animation: km-drawer-in 0.24s ease;
}
@keyframes km-drawer-in {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
}
.km-drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.km-drawer-close {
    background: none;
    border: none;
    color: #fff;
    font-size: 26px;
    line-height: 1;
    padding: 0 4px;
    cursor: pointer;
}
.km-drawer-title {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--km-text-dim);
    margin-bottom: 10px;
}
.km-drawer-links {
    list-style: none;
    margin: 0;
    padding: 0;
}
.km-drawer-links a {
    display: block;
    padding: 12px 0;
    font-size: 15px;
    color: var(--km-text-body);
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.km-drawer-links a:hover,
.km-drawer-links a.active { color: var(--km-primary-orange); }
.km-drawer-foot {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.km-drawer-foot .km-btn { width: 100%; }

/* Section 1: Hero 首屏 */
.km-hero {
    padding: 165px 24px 80px;
    max-width: 1260px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}
.km-hero-split {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 40px;
    align-items: center;
}
.km-hero-pre {
    color: var(--km-primary-orange);
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 12px;
}
.km-hero-title {
    font-size: 56px;
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: -1.5px;
    margin-bottom: 20px;
}
.km-hero-badge-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(250, 108, 6, 0.12);
    border: 1px solid rgba(250, 108, 6, 0.3);
    color: #ffa154;
    padding: 5px 14px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 18px;
}
.km-hero-headline {
    font-size: 26px;
    font-weight: 700;
    color: #e2e8f0;
    line-height: 1.35;
    margin-bottom: 18px;
}
.km-hero-subtitle {
    font-size: 16px;
    color: var(--km-text-body);
    line-height: 1.7;
    margin-bottom: 34px;
    max-width: 620px;
}
.km-hero-cta {
    display: flex;
    gap: 16px;
    margin-bottom: 40px;
}

/* Hero 右侧虚拟多屏金融仪表盘 (Mockup UI) */
.km-hero-visual {
    position: relative;
}
.km-mockup-frame {
    background: #11142b;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.6), 0 0 40px rgba(0, 102, 255, 0.1);
    position: relative;
    overflow: hidden;
}
.km-mockup-frame::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, #FA6C06, #00e5ff, #7928ca);
}
.km-mockup-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.km-mockup-dots {
    display: flex;
    gap: 6px;
}
.km-mockup-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}
.dot-red { background: #ff5f56; }
.dot-yellow { background: #ffbd2e; }
.dot-green { background: #27c93f; }

.km-mockup-body {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.km-ui-card {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    padding: 16px;
}
.km-ui-stat-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.km-ui-val-green {
    color: #10b981;
    font-weight: 700;
}
.km-chart-mock {
    height: 90px;
    display: flex;
    align-items: flex-end;
    gap: 8px;
    padding-top: 10px;
}
.km-chart-bar {
    flex: 1;
    background: linear-gradient(180deg, #00e5ff 0%, rgba(0, 229, 255, 0.2) 100%);
    border-radius: 4px 4px 0 0;
}

/* 统计条网格 */
.km-stats-banner {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-top: 60px;
    padding: 30px;
    background: var(--km-bg-card);
    border: 1px solid var(--km-border);
    border-radius: 16px;
    backdrop-filter: blur(14px);
}
.km-stat-cell {
    text-align: center;
    border-right: 1px solid rgba(255, 255, 255, 0.06);
}
.km-stat-cell:last-child {
    border-right: none;
}
.km-stat-number {
    font-size: clamp(20px, 2vw, 26px);
    font-weight: 900;
    color: #fff;
    line-height: 1.1;
    margin-bottom: 6px;
}
.km-stat-caption {
    font-size: 13px;
    color: var(--km-text-body);
}

/* 跑马灯 Ticker */
.km-ticker-bar {
    padding: 34px 0;
    border-top: 1px solid var(--km-border);
    border-bottom: 1px solid var(--km-border);
    background: rgba(14, 17, 36, 0.6);
    margin-bottom: 80px;
}
.km-ticker-title {
    text-align: center;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--km-text-dim);
    margin-bottom: 22px;
}
.km-ticker-badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 16px;
    max-width: 1260px;
    margin: 0 auto;
    padding: 0 20px;
}
.km-ticker-pill {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--km-border);
    padding: 9px 18px;
    border-radius: 30px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 600;
    color: #e2e8f0;
    transition: all 0.25s;
}
.km-ticker-pill:hover {
    border-color: var(--km-primary-orange);
    transform: translateY(-2px);
    background: rgba(250, 108, 6, 0.1);
}
.km-pill-tag {
    font-size: 10px;
    padding: 2px 7px;
    border-radius: 12px;
    background: rgba(0, 229, 255, 0.15);
    color: var(--km-accent-cyan);
    font-weight: 700;
}

/* 通用 Section 结构与滚动偏移 */
.km-container, section[id] {
    scroll-margin-top: 86px;
}
.km-container {
    max-width: 1260px;
    margin: 0 auto;
    padding: 80px 24px;
}
.km-section-heading {
    text-align: center;
    margin-bottom: 54px;
}
.km-section-tag {
    display: inline-block;
    color: var(--km-primary-orange);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 12px;
}
.km-section-h2 {
    font-size: 40px;
    font-weight: 900;
    letter-spacing: -0.8px;
    margin-bottom: 14px;
    line-height: 1.2;
}
.km-section-desc {
    font-size: 16px;
    color: var(--km-text-body);
    max-width: 760px;
    margin: 0 auto;
    line-height: 1.65;
}

/* 8 大卡片网格 (对标 Kenmore Solutions 8-Card Grid) */
.km-solutions-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-bottom: 40px;
}
.km-sol-card {
    background: var(--km-bg-surface);
    border: 1px solid var(--km-border);
    border-radius: 16px;
    padding: 30px 24px;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}
.km-sol-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: transparent;
    transition: background 0.3s;
}
.km-sol-card:hover {
    transform: translateY(-6px);
    border-color: rgba(250, 108, 6, 0.5);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.45);
    background: var(--km-bg-surface-hover);
}
.km-sol-card:hover::before {
    background: var(--km-primary-orange);
}
.km-sol-icon-box {
    width: 52px;
    height: 52px;
    border-radius: 12px;
    background: rgba(250, 108, 6, 0.12);
    color: var(--km-primary-orange);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    margin-bottom: 22px;
}
.km-sol-card.cyan-accent .km-sol-icon-box {
    background: rgba(0, 229, 255, 0.12);
    color: var(--km-accent-cyan);
}
.km-sol-title {
    font-size: 19px;
    font-weight: 700;
    margin-bottom: 12px;
    line-height: 1.3;
}
.km-sol-desc {
    font-size: 14px;
    color: var(--km-text-body);
    line-height: 1.6;
    margin-bottom: 20px;
    flex: 1;
}
.km-sol-link {
    color: var(--km-primary-orange);
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 6px;
}
.km-sol-link:hover {
    color: #fff;
}

/* Section 4: 图文交错展示大卡片 (Powerful Solutions Showcase) */
.km-showcase-list {
    display: flex;
    flex-direction: column;
    gap: 48px;
}
.km-showcase-item {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    background: var(--km-bg-surface);
    border: 1px solid var(--km-border);
    border-radius: 24px;
    padding: 50px;
    position: relative;
    overflow: hidden;
}
.km-showcase-item.reverse {
    direction: rtl;
}
.km-showcase-item.reverse .km-showcase-content,
.km-showcase-item.reverse .km-showcase-preview {
    direction: ltr;
}
.km-showcase-title {
    font-size: 28px;
    font-weight: 800;
    line-height: 1.3;
    margin-bottom: 16px;
}
.km-showcase-text {
    font-size: 16px;
    color: var(--km-text-body);
    line-height: 1.7;
    margin-bottom: 24px;
}
.km-showcase-points {
    list-style: none;
    padding: 0;
    margin: 0;
}
.km-showcase-point {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 12px;
    font-size: 14px;
    color: #e2e8f0;
}
.km-showcase-point i {
    color: var(--km-primary-orange);
    margin-top: 4px;
}

/* Section 5: 双入口启动卡片 (Dual Launch Section) */
.km-dual-launch {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
}
.km-launch-card {
    background: linear-gradient(180deg, #181d3d 0%, #10132b 100%);
    border: 1px solid var(--km-border);
    border-radius: 22px;
    padding: 48px;
    position: relative;
    overflow: hidden;
    transition: all 0.3s;
}
.km-launch-card:hover {
    transform: translateY(-4px);
    border-color: rgba(250, 108, 6, 0.5);
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.5);
}
.km-launch-badge {
    display: inline-block;
    padding: 4px 14px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 20px;
}
.badge-fx {
    background: rgba(0, 102, 255, 0.15);
    color: #60a5fa;
    border: 1px solid rgba(0, 102, 255, 0.3);
}
.badge-prop {
    background: rgba(250, 108, 6, 0.15);
    color: #ff9800;
    border: 1px solid rgba(250, 108, 6, 0.3);
}
.km-launch-h3 {
    font-size: 28px;
    font-weight: 800;
    margin-bottom: 16px;
}
.km-launch-desc {
    font-size: 15px;
    color: var(--km-text-body);
    line-height: 1.7;
    margin-bottom: 30px;
}

/* Section 6: 开发者 API 代码终端 (Developer Terminal) */
.km-terminal-window {
    position: relative;
    background: #090a16;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
    overflow: hidden;
    font-family: var(--km-code-font);
}
.km-terminal-header {
    background: #121428;
    padding: 12px 18px;
    display: flex;
    align-items: center;
    gap: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.km-terminal-title {
    /* #626c85 在 #121428 上只有 3.46:1；标题虽为 12px，仍按 AA 正文标准抬到 6.3:1。 */
    color: #8b95ac;
    font-size: 12px;
    margin-left: 12px;
}
.km-terminal-code {
    padding: 24px;
    font-size: 13px;
    /* Bootstrap 的 `pre` 默认底色是 #f5f5f5，会盖住终端的深色外壳；
       这里显式透明，让高亮色始终落在 .km-terminal-window 的 #090a16 上。 */
    background: transparent;
    color: #38bdf8;
    line-height: 1.6;
    margin: 0;
    overflow-x: auto;
}
.km-code-key { color: #f472b6; }
.km-code-str { color: #4ade80; }
.km-code-num { color: #fbbf24; }

/* Section 8: 底部行动转化横幅 (Fast CTA Banner) */
.km-fast-banner {
    background: linear-gradient(135deg, #1c1538 0%, #2c1228 50%, #1f1124 100%);
    border: 1px solid rgba(250, 108, 6, 0.3);
    border-radius: 24px;
    padding: 60px 40px;
    text-align: center;
    position: relative;
    overflow: hidden;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.5);
}
.km-fast-banner h2 {
    font-size: 38px;
    font-weight: 900;
    margin-bottom: 16px;
    line-height: 1.2;
}
.km-fast-banner p {
    font-size: 17px;
    color: var(--km-text-body);
    max-width: 680px;
    margin: 0 auto 34px;
}

/* 预约演示模态框 (Modal) */
.km-modal-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(12px);
    z-index: 2000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.km-modal-overlay.active { display: flex; }
.km-modal-content {
    background: #0f1228;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 20px;
    max-width: 600px;
    width: 100%;
    padding: 40px;
    position: relative;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.9);
}
.km-modal-close {
    position: absolute;
    top: 20px; right: 20px;
    background: none; border: none;
    color: var(--km-text-dim);
    font-size: 26px;
    cursor: pointer;
}
.km-modal-close:hover { color: #fff; }
.km-modal-title {
    font-size: 24px;
    font-weight: 800;
    margin: 0 0 8px;
}
.km-modal-subtitle {
    font-size: 13px;
    color: var(--km-text-body);
    margin: 0 0 24px;
}
.km-form-group { margin-bottom: 18px; }
.km-form-label {
    display: block;
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 6px;
    color: #cbd5e1;
}
.km-form-input, .km-form-select, .km-form-textarea {
    width: 100%;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--km-border);
    border-radius: 8px;
    padding: 12px 16px;
    color: #fff;
    font-size: 14px;
    font-family: inherit;
    box-sizing: border-box;
}
.km-form-input:focus, .km-form-select:focus, .km-form-textarea:focus {
    outline: none;
    border-color: var(--km-primary-orange);
    box-shadow: 0 0 12px var(--km-primary-orange-glow);
}
.km-form-select option { background: #0f1228; color: #fff; }

/* 页脚 (Footer) */
.km-footer {
    border-top: 1px solid var(--km-border);
    background: #05060f;
    padding: 80px 24px 30px;
}
.km-footer-grid {
    max-width: 1260px;
    margin: 0 auto 50px;
    display: grid;
    /* 品牌列 + 4 个导航列（产品 / 自营 / 行情 / 公司） */
    grid-template-columns: 2fr repeat(4, 1fr);
    gap: 40px;
}
.km-footer-about {
    font-size: 13px;
    /* --km-text-dim (#626c85) 在页脚 #05060f 上只有 3.85:1，正文级字号必须 ≥4.5:1。
       #8b95ac 为 6.73:1，仍比正文暗一档，不抢视觉层级。 */
    color: #8b95ac;
    line-height: 1.7;
    max-width: 320px;
    margin: 0;
}
/* 精简页脚：登录 / 收银台 / 凭证等单任务页面，只留品牌与版权行 */
.km-footer-compact .km-footer-grid {
    grid-template-columns: 1fr;
    margin-bottom: 30px;
}
.km-footer-col-title {
    font-size: 14px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 22px;
    color: #fff;
}
.km-footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}
.km-footer-links li { margin-bottom: 12px; }
.km-footer-links a {
    color: #8b95ac;
    text-decoration: none;
    font-size: 14px;
    transition: color 0.2s;
}
.km-footer-links a:hover { color: #fff; }
.km-footer-disclaimer {
    max-width: 1260px;
    margin: 0 auto 30px;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    font-size: 12px;
    color: #8b95ac;
    line-height: 1.7;
}
.km-footer-disclaimer p { margin: 0 0 8px; }
.km-footer-disclaimer p:last-child { margin-bottom: 0; }
.km-footer-disclaimer a { color: #b8c2d9; text-decoration: underline; }
.km-footer-disclaimer a:hover { color: #fff; }
.km-legal-page { padding-top: 140px; padding-bottom: 80px; }
.km-legal-body {
    max-width: 820px;
    margin: 0 auto;
    color: #c3cbe0;
    font-size: 15px;
    line-height: 1.8;
}
.km-legal-body a { color: #00e5ff; }
.km-legal-body h2 { margin: 32px 0 10px; font-size: 20px; color: #fff; }
.km-legal-body ul { padding-left: 20px; }
.km-legal-body li { margin-bottom: 8px; }
.km-legal-draft {
    padding: 12px 16px;
    border-radius: 10px;
    background: rgba(250, 108, 6, 0.08);
    border: 1px solid rgba(250, 108, 6, 0.3);
    font-size: 13px;
}
.km-sol-tag {
    display: block;
    margin-bottom: 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #FA6C06;
}
.km-form-privacy {
    margin: 12px 0 0;
    font-size: 12px;
    color: #8b95ac;
    text-align: center;
}
.km-form-privacy a { color: #b8c2d9; text-decoration: underline; }
.km-footer-reg { display: block; margin-top: 4px; font-size: 12px; }
.km-calc-note {
    max-width: 900px;
    margin: 16px auto 0;
    font-size: 12px;
    line-height: 1.6;
    color: #8b95ac;
    text-align: center;
}
.km-not-found { text-align: center; }
.km-not-found .km-section-desc { margin-bottom: 32px; }
.km-not-found-code {
    font-size: 96px;
    font-weight: 900;
    line-height: 1;
    color: #FA6C06;
    margin-bottom: 12px;
}
.km-hp {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}
.km-integrations-note {
    max-width: 960px;
    margin: 18px auto 0;
    padding: 0 20px;
    font-size: 12px;
    line-height: 1.6;
    color: #8b95ac;
    text-align: center;
}
.km-mockup-frame { padding-bottom: 40px; }
.km-illustrative-tag {
    position: absolute;
    bottom: 8px;
    right: 12px;
    z-index: 2;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: #a5b0c7;
    font-size: 10px;
    font-family: inherit;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    pointer-events: none;
}
.km-footer-bottom {
    max-width: 1260px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    font-size: 13px;
    color: #8b95ac;
}
.km-footer-bottom-right {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}
.km-footer-mail {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #8b95ac;
    text-decoration: none;
    transition: color 0.2s;
}
.km-footer-mail:hover { color: #fff; }
.km-footer-langs {
    display: flex;
    align-items: center;
    gap: 14px;
}
.km-footer-langs a {
    color: #8b95ac;
    text-decoration: none;
    transition: color 0.2s;
}
.km-footer-langs a:hover { color: #fff; }
.km-footer-langs a.active { color: var(--km-primary-orange); }

/* ==========================================================================
   模块二级导航条（U04A）
   一级导航只保留一个「行情数据」入口，模块 6 页的实现靠这条互相可达。
   吸顶偏移必须与页头高度一致（76px），否则滚动时会有 1px 缝或叠盖。
   ========================================================================== */
.km-subnav {
    position: sticky;
    top: 76px;
    z-index: 900;
    background: rgba(12, 14, 30, 0.94);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--km-border);
}
.km-subnav-inner {
    max-width: 1260px;
    margin: 0 auto;
    padding: 0 24px;
    width: 100%;
    box-sizing: border-box;
}
.km-subnav-links {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 52px;
    overflow-x: auto;
    /* 桌面端内容放得下就不显示滚动条；窄屏靠 hidden 隐藏，仍可横扫 */
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.km-subnav-links::-webkit-scrollbar { display: none; }
.km-subnav-link {
    flex: none;
    padding: 7px 14px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 500;
    color: var(--km-text-body);
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.2s, background 0.2s;
}
.km-subnav-link:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.06);
}
.km-subnav-link.active {
    color: var(--km-on-orange);
    background: var(--km-primary-orange);
    box-shadow: 0 2px 10px var(--km-primary-orange-glow);
}

/* 响应式断点 */
/* 1400 以下收紧页头间距：6 个入口 + 动作区在 1260 容器里刚好差一点 */
@media (max-width: 1400px) {
    .km-nav-links { gap: 18px; }
    .km-nav-actions { gap: 12px; }
}
/* 1280 以下收起页头「免费试用」次级按钮，主 CTA 不让位；模块二级条与抽屉里仍有入口 */
@media (max-width: 1280px) {
    .km-nav-actions .km-btn-sm { display: none; }
}
@media (max-width: 1100px) {
    .km-hero-split { grid-template-columns: 1fr; }
    .km-hero-title { font-size: 42px; }
    .km-solutions-grid { grid-template-columns: repeat(2, 1fr); }
    .km-showcase-item { grid-template-columns: 1fr; }
    .km-stats-banner { grid-template-columns: repeat(2, 1fr); }
    .km-dual-launch { grid-template-columns: 1fr; }
    .km-footer-grid { grid-template-columns: 1fr 1fr 1fr; }
    /* 6 个入口在 1100 以下放不下（实测英文需 ~1120px），统一折叠成汉堡 + 抽屉 */
    .km-nav-links { display: none; }
    .km-nav-plain { display: none; }
    .km-nav-toggle { display: inline-flex; }
    .km-nav-actions .km-lang { display: none; }
}
@media (max-width: 768px) {
    .km-hero-title { font-size: 32px; }
    .km-hero-headline { font-size: 20px; }
    .km-solutions-grid { grid-template-columns: 1fr; }
    .km-stats-banner { grid-template-columns: 1fr; }
    .km-footer-grid { grid-template-columns: 1fr; }
    /* 390px 下品牌 + 主按钮原本会溢出（实测右侧被裁 38px），按比例回收 */
    .km-nav-container { padding: 0 16px; }
    .km-brand { font-size: 17px; gap: 8px; }
    .km-brand-flame { width: 30px; height: 30px; font-size: 15px; }
    .km-brand-text span { display: none; }
    .km-nav-actions { gap: 10px; }
    .km-nav-actions .km-btn { padding: 9px 14px; font-size: 13px; }
    .km-nav-actions .km-btn .fa { display: none; }
    .km-hero-cta { flex-direction: column; }
    .km-btn-lg { width: 100%; }
    .km-footer-bottom { flex-direction: column; align-items: flex-start; }
}

/* ---------------------------------------------------------------
   联系页（/contact）：真实页面，左侧联系方式 + 右侧预约表单。
   与法务页共用 .km-container 的左右留白，这里只补两栏布局。
   --------------------------------------------------------------- */
.km-contact-page { padding-top: 140px; padding-bottom: 80px; }
.km-contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: start;
    margin-top: 40px;
}
.km-contact-h2 {
    margin: 0 0 14px;
    font-size: 20px;
    color: #fff;
}
.km-contact-info .km-contact-h2 + .km-contact-list,
.km-contact-info .km-contact-h2 + .km-contact-steps { margin-bottom: 32px; }
.km-contact-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.km-contact-list li {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 12px 0;
    border-bottom: 1px solid rgba(148, 163, 184, 0.16);
    color: #c3cbe0;
    font-size: 15px;
}
.km-contact-list li:last-child { border-bottom: 0; }
.km-contact-list a { color: #00e5ff; word-break: break-all; }
.km-contact-label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #8b95ac;
}
.km-contact-steps {
    margin: 0;
    padding-left: 20px;
    color: #c3cbe0;
    font-size: 15px;
    line-height: 1.7;
}
.km-contact-steps li { margin-bottom: 10px; }
.km-contact-note {
    margin: 0;
    padding: 12px 16px;
    border-radius: 10px;
    background: rgba(148, 163, 184, 0.08);
    border: 1px solid rgba(148, 163, 184, 0.22);
    font-size: 13px;
    color: #8b95ac;
    line-height: 1.6;
}
.km-contact-card {
    background: var(--km-bg-surface, rgba(15, 18, 40, 0.9));
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 20px;
    padding: 32px;
}
.km-contact-form-sub {
    margin: 0 0 20px;
    font-size: 14px;
    color: #8b95ac;
}
@media (max-width: 900px) {
    .km-contact-grid { grid-template-columns: 1fr; gap: 32px; }
    .km-contact-card { padding: 24px; }
}

/* ---------------------------------------------------------------
   解决方案卡片双 CTA：主链接「了解详情」→ 子页锚点，次级「预约演示」弹窗。
   之前整张卡片只有一条 js-open-demo，既跳转又弹窗，语义含糊。
   --------------------------------------------------------------- */
.km-sol-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: auto;
}
.km-sol-demo {
    font-size: 13px;
    font-weight: 600;
    color: #8b95ac;
    text-decoration: none;
    border-bottom: 1px solid rgba(139, 149, 172, 0.4);
}
.km-sol-demo:hover { color: #fff; border-bottom-color: #fff; }

/* ---------------------------------------------------------------
   解决方案子页（/forex-crm、/prop-firm-crm）
   --------------------------------------------------------------- */
.km-product-hero { padding-top: 140px; padding-bottom: 20px; }
.km-breadcrumb {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 22px;
    font-size: 13px;
    color: #8b95ac;
}
.km-breadcrumb a { color: #8b95ac; text-decoration: none; }
.km-breadcrumb a:hover { color: #fff; }
.km-product-points {
    list-style: none;
    padding: 0;
    margin: 26px 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 12px 26px;
}
.km-product-points li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #c3cbe0;
}
.km-product-points .fa { color: #10b981; }
.km-product-section { padding-top: 60px; padding-bottom: 20px; }
.km-product-modules {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    margin-top: 34px;
}
.km-product-module {
    background: var(--km-bg-surface, rgba(15, 18, 40, 0.9));
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 18px;
    padding: 28px;
    /* 从首页卡片深链过来时，锚点标题不要被固定页头盖住 */
    scroll-margin-top: 110px;
}
.km-product-module-title {
    margin: 10px 0 8px;
    font-size: 19px;
    line-height: 1.4;
    color: #fff;
}
.km-product-bullets {
    margin: 14px 0 0;
    padding-left: 18px;
    color: #c3cbe0;
    font-size: 14px;
    line-height: 1.7;
}
.km-product-bullets li { margin-bottom: 8px; }
.km-product-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    list-style: none;
    padding: 0;
    margin: 34px 0 0;
    counter-reset: step;
}
.km-product-steps li {
    background: rgba(148, 163, 184, 0.06);
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 16px;
    padding: 22px;
}
.km-product-steps h3 { margin: 0 0 8px; font-size: 15px; color: #fff; }
.km-product-steps p { margin: 0; font-size: 13px; line-height: 1.7; color: #c3cbe0; }
.km-product-faq { margin-top: 28px; max-width: 860px; }
.km-product-faq-item {
    border-bottom: 1px solid rgba(148, 163, 184, 0.18);
    padding: 14px 0;
}
.km-product-faq-item summary {
    cursor: pointer;
    font-weight: 700;
    color: #fff;
    list-style: none;
}
.km-product-faq-item summary::-webkit-details-marker { display: none; }
.km-product-faq-item summary::after { content: '+'; float: right; color: #8b95ac; }
.km-product-faq-item[open] summary::after { content: '−'; }
.km-product-faq-item p {
    margin: 10px 0 0;
    font-size: 14px;
    line-height: 1.8;
    color: #c3cbe0;
}
.km-product-cta {
    margin-top: 30px;
    padding: 44px;
    border-radius: 24px;
    text-align: center;
    background: rgba(7, 8, 20, 0.7);
    border: 1px solid rgba(148, 163, 184, 0.2);
}
.km-product-cta .km-section-desc { margin-bottom: 24px; }
.km-product-related { margin: 26px 0 0; font-size: 14px; color: #8b95ac; }
.km-product-related .km-sol-tag { display: inline; margin-right: 6px; }
.km-product-related a { color: #00e5ff; }
@media (max-width: 1024px) {
    .km-product-steps { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
    .km-product-modules { grid-template-columns: 1fr; }
    .km-product-steps { grid-template-columns: 1fr; }
    .km-product-cta { padding: 28px; }
}

/* ---------------------------------------------------------------
   键盘焦点可见性（S4-1）：抽屉与弹窗里的链接/按钮默认没有焦点样式，
   键盘走查时看不出焦点在哪，等于把「可键盘操作」做成了盲操。
   --------------------------------------------------------------- */
.km-modal-content a:focus-visible,
.km-modal-content button:focus-visible,
.km-drawer-panel a:focus-visible,
.km-drawer-panel button:focus-visible,
.km-sol-link:focus-visible,
.km-sol-demo:focus-visible,
.km-breadcrumb a:focus-visible {
    outline: 2px solid #00e5ff;
    outline-offset: 3px;
    border-radius: 4px;
}

/* ---------------------------------------------------------------
   减少动态效果（S4-2）：系统开启「减少动态效果」时关掉滑入与过渡，
   但保留状态切换本身——只是不再做动画，不做「功能也一起关掉」。
   --------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .km-drawer-panel {
        animation: none;
    }
    .km-modal-overlay,
    .km-modal-content,
    .km-drawer,
    .km-drawer-panel,
    .km-sol-card,
    .km-btn {
        transition: none;
    }
    html {
        scroll-behavior: auto;
    }
}

/* 表单字段用隐式标签（控件在 <label> 内）：标签文字保持小号加粗，
   控件本身恢复正文字号与常规字重，否则 input 会继承 label 的 13px/700。 */
.km-form-label .km-form-input,
.km-form-label .km-form-select,
.km-form-label .km-form-textarea {
    margin-top: 6px;
    font-size: 14px;
    font-weight: 400;
}