/* ==========================================================================
   云喵官网 · 品牌定制层
   --------------------------------------------------------------------------
   依赖（本地引入，位于 /static/libs/）：
     bootstrap.min.css          结构网格 / 工具类 / 基础组件
     bootstrap-icons.min.css    图标（<i class="bi bi-*">）
     aos.css                    滚动动效（data-aos 属性驱动）

   本文件只写「品牌层」：设计令牌、组件皮肤与区块样式。
   布局与间距尽量复用 Bootstrap 工具类，保证可维护性。
   章节目录：
     01 设计令牌        02 基础与排版      03 通用组件
     04 顶部导航        05 首页 Hero       06 数据条
     07 产品面板        08 核心能力(深色)  09 产品对比
     10 适用场景        11 内容卡片        12 开源面板
     13 页脚            14 内页(列表/文章) 15 动效
     16 响应式          17 无障碍降级
   ========================================================================== */

/* --------------------------------------------------------------------------
   01 设计令牌 —— 见 /static/css/tokens.css（官网与后台共用），本文件直接引用
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   02 基础与排版
   -------------------------------------------------------------------------- */
html { scroll-behavior: smooth; scroll-padding-top: 92px; }

body {
    font-family: var(--m-font-sans);
    line-height: 1.75;
    letter-spacing: .01em;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

::selection { color: #fff; background: var(--m-primary); }

h1, h2, h3, h4 { color: var(--m-ink); letter-spacing: -.03em; line-height: 1.18; font-weight: 800; }

a { text-decoration: none; }
img { max-width: 100%; }

:focus-visible { outline: 2px solid var(--m-primary); outline-offset: 3px; border-radius: 4px; }

/* 细滚动条 */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #c3cddf; border: 3px solid #fff; border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: #a9b6cf; }

/* 等宽技术字（编号、状态码、统计数字） */
.font-mono { font-family: var(--m-font-mono); }

/* 渐变文字 */
.text-gradient {
    background: var(--m-gradient-brand);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* 技术网格底纹：叠加在浅色 / 深色区块上 */
.m-grid-bg {
    background-image:
        linear-gradient(to right, rgba(61, 107, 245, .055) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(61, 107, 245, .055) 1px, transparent 1px);
    background-size: 46px 46px;
    -webkit-mask-image: radial-gradient(ellipse 90% 80% at 50% 20%, #000 25%, transparent 78%);
    mask-image: radial-gradient(ellipse 90% 80% at 50% 20%, #000 25%, transparent 78%);
}

/* --------------------------------------------------------------------------
   03 通用组件
   -------------------------------------------------------------------------- */

/* 小标签（眉题） */
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--m-primary);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .16em;
}
.eyebrow::before {
    content: "";
    width: 18px;
    height: 2px;
    border-radius: 2px;
    background: var(--m-gradient-brand);
}
.eyebrow-dot {
    padding: 6px 14px;
    color: var(--m-primary);
    background: var(--m-primary-soft);
    border-radius: 999px;
    letter-spacing: .12em;
}
.eyebrow-dot::before { width: 7px; height: 7px; border-radius: 50%; background: var(--m-primary); animation: m-pulse 2.2s ease-in-out infinite; }
.section-dark .eyebrow, .m-dark .eyebrow { color: #8fa8ff; }
.section-dark .eyebrow::before, .m-dark .eyebrow::before { background: linear-gradient(90deg, #8fa8ff, var(--m-accent)); }

/* 区块 */
.section { padding: 108px 0; position: relative; }
.section-soft { background: var(--m-bg-soft); }
.section-dark { color: #dbe3f5; background: var(--m-night); }
.section-dark h1, .section-dark h2, .section-dark h3, .section-dark h4 { color: #fff; }

.section-heading { max-width: 640px; margin-bottom: 52px; }
.section-heading.centered { margin-right: auto; margin-left: auto; text-align: center; }
.section-heading.centered .eyebrow::before { display: none; }
.section-heading.centered .eyebrow { padding: 6px 14px; color: var(--m-primary); background: var(--m-primary-soft); border-radius: 999px; }
.section-heading h2 { margin: 16px 0 18px; font-size: clamp(32px, 4vw, 48px); }
.section-heading p { margin: 0; color: var(--m-muted); font-size: 16.5px; }

/* 标题行（左侧标题 + 右侧链接） */
.heading-row {
    max-width: none;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 40px;
}
.heading-row > div { min-width: 0; }
.heading-row > p { max-width: 400px; margin-bottom: 6px; }

/* 按钮 —— 覆写 Bootstrap 令牌 */
.btn {
    --bs-btn-border-radius: 999px;
    --bs-btn-font-weight: 700;
    --bs-btn-padding-x: 1.6rem;
    --bs-btn-padding-y: .68rem;
    --bs-btn-font-size: .925rem;
    transition: transform .22s cubic-bezier(.22, .68, .32, 1.05), box-shadow .22s ease, background-color .22s ease, border-color .22s ease, color .22s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn-primary {
    --bs-btn-bg: var(--m-primary);
    --bs-btn-border-color: var(--m-primary);
    --bs-btn-hover-bg: var(--m-primary-deep);
    --bs-btn-hover-border-color: var(--m-primary-deep);
    --bs-btn-active-bg: var(--m-primary-deep);
    --bs-btn-active-border-color: var(--m-primary-deep);
    --bs-btn-disabled-bg: var(--m-primary);
    --bs-btn-disabled-border-color: var(--m-primary);
    box-shadow: 0 10px 26px -10px rgba(61, 107, 245, .55);
}
.btn-outline-primary {
    --bs-btn-color: var(--m-primary);
    --bs-btn-border-color: var(--m-line-strong);
    --bs-btn-hover-bg: var(--m-primary-soft);
    --bs-btn-hover-color: var(--m-primary-deep);
    --bs-btn-hover-border-color: var(--m-primary);
    --bs-btn-active-bg: var(--m-primary-soft);
}
.btn-dark {
    --bs-btn-bg: var(--m-ink);
    --bs-btn-border-color: var(--m-ink);
    --bs-btn-hover-bg: var(--m-primary);
    --bs-btn-hover-border-color: var(--m-primary);
    --bs-btn-active-bg: var(--m-primary-deep);
    --bs-btn-active-border-color: var(--m-primary-deep);
}
.btn-light { --bs-btn-bg: #baf863; --bs-btn-color: var(--m-night); --bs-btn-border-color: #baf863; --bs-btn-hover-bg: #c9ff74; --bs-btn-hover-color: var(--m-night); --bs-btn-hover-border-color: #c9ff74; }
.btn-outline-light {
    --bs-btn-color: rgba(255, 255, 255, .92);
    --bs-btn-border-color: rgba(255, 255, 255, .28);
    --bs-btn-hover-bg: rgba(255, 255, 255, .1);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-border-color: rgba(255, 255, 255, .6);
    --bs-btn-active-bg: rgba(255, 255, 255, .14);
    --bs-btn-active-color: #fff;
}

/* 文字链接（箭头动效） */
.text-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--m-primary);
    font-weight: 700;
}
.text-link .bi { transition: transform .25s ease; }
.text-link:hover .bi { transform: translateX(5px); }
.text-link.on-dark { color: var(--m-accent); }

/* 功能小圆标 */
.icon-tile {
    display: inline-grid;
    place-items: center;
    width: 46px;
    height: 46px;
    font-size: 21px;
    color: var(--m-primary);
    background: var(--m-primary-soft);
    border-radius: 14px;
    transition: transform .3s ease, box-shadow .3s ease;
}
.icon-tile.tile-accent { color: var(--m-accent); background: var(--m-accent-soft); }

/* 特性小胶囊 */
.chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 13px;
    color: var(--m-ink-2);
    background: var(--m-bg-soft);
    border: 1px solid var(--m-line);
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 650;
    transition: border-color .25s ease, color .25s ease, background-color .25s ease;
}
.chip:hover { color: var(--m-primary); border-color: var(--m-primary); background: #fff; }
.chip .bi { font-size: 12px; color: var(--m-accent); }

/* 深色面板里的胶囊 */
.m-dark .chip, .section-dark .chip {
    color: #c6d2f0;
    background: rgba(255, 255, 255, .05);
    border-color: var(--m-night-line);
}
.m-dark .chip:hover, .section-dark .chip:hover { color: #fff; border-color: rgba(143, 168, 255, .5); background: rgba(255, 255, 255, .08); }

/* 分段切换控件（Tab Switch）—— 通用组件
   用法：容器加 data-switcher，按钮加 data-switch-tab，
   面板加 data-switch-panel，文案加 data-switch-copy（见 site.js） */
.tab-switch {
    display: inline-flex;
    gap: 4px;
    padding: 5px;
    background: #fff;
    border: 1px solid var(--m-line);
    border-radius: 999px;
    box-shadow: var(--m-shadow-flat);
}
.tab-switch button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 124px;
    padding: 10px 20px;
    color: var(--m-muted);
    background: transparent;
    border: 0;
    border-radius: 999px;
    font-size: 13.5px;
    font-weight: 800;
    cursor: pointer;
    transition: color .25s ease, background-color .25s ease, box-shadow .25s ease;
}
.tab-switch button[aria-selected="true"] { color: #fff; background: var(--m-primary); box-shadow: 0 8px 18px -6px rgba(61, 107, 245, .55); }
.tab-switch button[data-switch-tab="cloud"][aria-selected="true"] { background: var(--m-accent); box-shadow: 0 8px 18px -6px rgba(16, 201, 138, .5); }

/* 卡片基类（扁平：细边框，悬停浮起） */
.card-flat {
    position: relative;
    background: var(--m-bg);
    border: 1px solid var(--m-line);
    border-radius: var(--m-radius-lg);
    box-shadow: var(--m-shadow-flat);
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.card-flat:hover {
    transform: translateY(-6px);
    border-color: rgba(61, 107, 245, .38);
    box-shadow: var(--m-shadow-lift);
}

/* --------------------------------------------------------------------------
   04 顶部导航
   -------------------------------------------------------------------------- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: rgba(255, 255, 255, .82);
    border-bottom: 1px solid rgba(230, 234, 244, .8);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}
.site-header .navbar { padding: 0; min-height: 74px; }
.site-header .nav-link {
    position: relative;
    padding: .55rem .15rem !important;
    color: var(--m-ink-2);
    font-size: 14.5px;
    font-weight: 650;
    transition: color .22s ease;
}
.site-header .nav-link:hover, .site-header .nav-link:focus { color: var(--m-primary); }
.site-header .nav-link[aria-expanded="true"] { color: var(--m-primary); }
.site-header .nav-link .bi-chevron-down { font-size: 11px; transition: transform .25s ease; }
.site-header .nav-link[aria-expanded="true"] .bi-chevron-down { transform: rotate(180deg); }
.site-header .nav-link::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 8px;
    height: 2px;
    border-radius: 2px;
    background: var(--m-gradient-brand);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .28s ease;
}
.site-header .nav-link:hover::after { transform: scaleX(1); }

/* 下拉菜单 */
.site-header .dropdown-menu {
    --bs-dropdown-border-color: var(--m-line);
    --bs-dropdown-border-radius: 14px;
    --bs-dropdown-link-active-bg: var(--m-primary-soft);
    --bs-dropdown-link-active-color: var(--m-primary);
    --bs-dropdown-link-hover-bg: #f3f6ff;
    --bs-dropdown-link-hover-color: var(--m-primary);
    margin-top: .85rem !important;
    padding: .5rem;
    box-shadow: 0 22px 54px -16px rgba(24, 45, 116, .22);
}
.site-header .dropdown-item { border-radius: 9px; font-size: 14px; font-weight: 600; padding: .55rem .8rem; }

/* 品牌标识 */
.brand { display: inline-flex; align-items: center; gap: 11px; }
.brand-mark {
    display: block;
    width: 48px;
    height: 36px;
    flex: 0 0 48px;
    transition: transform .3s ease;
}
.brand-mark img { display: block; width: 100%; height: 100%; object-fit: contain; }
.brand:hover .brand-mark { transform: rotate(-6deg) scale(1.05); }
.brand-name { display: flex; flex-direction: column; font-size: 20px; font-weight: 900; line-height: 1.05; letter-spacing: .06em; color: var(--m-ink); }
.brand-name small { margin-top: 5px; color: var(--m-faint); font-size: 8.5px; font-weight: 800; letter-spacing: .2em; }

/* 移动端抽屉菜单（offcanvas） */
.site-offcanvas {
    --bs-offcanvas-width: 320px;
    border-right: 1px solid var(--m-line);
}
.site-offcanvas .offcanvas-header { padding: 1.4rem 1.5rem .6rem; }
.site-offcanvas .offcanvas-body { display: flex; flex-direction: column; gap: .2rem; padding: .6rem 1.25rem 1.5rem; }
.site-offcanvas .nav-link, .site-offcanvas .dropdown-item { font-size: 15.5px; padding: .8rem .9rem; border-radius: 12px; }
.site-offcanvas .nav-link::after { display: none; }
.site-offcanvas .dropdown-menu {
    position: static;
    border: 0;
    box-shadow: none;
    background: var(--m-bg-soft);
    margin: .2rem 0 .5rem !important;
    transform: none !important;
}
.site-offcanvas .dropdown-item { font-size: 14.5px; }
.site-offcanvas .btn-primary { margin-top: auto; }

/* --------------------------------------------------------------------------
   05 首页 Hero
   -------------------------------------------------------------------------- */
.hero {
    position: relative;
    overflow: hidden;
    padding: 96px 0 0;
    background:
        radial-gradient(60% 46% at 82% 6%, rgba(25, 195, 230, .09), transparent 70%),
        radial-gradient(52% 44% at 6% 16%, rgba(61, 107, 245, .08), transparent 70%),
        linear-gradient(180deg, #f7f9ff 0%, #fff 100%);
}
.hero > .m-grid-bg { position: absolute; inset: 0; pointer-events: none; }

/* 光斑 */
.hero-orb { position: absolute; border-radius: 50%; filter: blur(70px); pointer-events: none; }
.hero-orb-one { top: -160px; right: -120px; width: 520px; height: 520px; background: rgba(61, 107, 245, .16); animation: m-float 13s ease-in-out infinite; }
.hero-orb-two { bottom: -40px; left: 34%; width: 380px; height: 380px; background: rgba(16, 201, 138, .12); animation: m-float 16s ease-in-out infinite reverse; }

.hero-grid { position: relative; z-index: 2; align-items: center; }
.hero-copy { padding-bottom: 64px; }
.hero-copy h1 { margin: 22px 0 18px; font-size: clamp(42px, 5.2vw, 68px); line-height: 1.08; letter-spacing: -.045em; font-weight: 900; }
.hero-copy h1 em { font-style: normal; background: var(--m-gradient-brand); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.hero-subtitle { margin: 0 0 12px; color: var(--m-ink-2); font-size: 20px; font-weight: 750; }
.hero-description { max-width: 560px; margin: 0; color: var(--m-muted); font-size: 16px; }

.hero-product-copy { animation: m-copy-in .4s ease both; }
.hero-product-copy[hidden] { display: none; }

/* 产品截图舞台 */
.hero-showcase { position: relative; height: 540px; }
.showcase-stage { position: absolute; inset: 0; animation: m-copy-in .4s ease both; }
.showcase-stage[hidden] { display: none; }

.showcase-pc {
    position: absolute;
    top: 52px;
    left: 0;
    width: 92%;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--m-line-strong);
    border-radius: 18px;
    box-shadow: var(--m-shadow-lift);
    transform: rotate(1.4deg);
    transition: transform .35s ease;
}
.showcase-pc:hover { transform: rotate(0) translateY(-4px); }
.window-bar { display: flex; height: 40px; padding: 0 16px; align-items: center; gap: 7px; border-bottom: 1px solid #eef1f7; }
.window-bar span { width: 8px; height: 8px; border-radius: 50%; }
.window-bar span:nth-child(1) { background: #ff6159; }
.window-bar span:nth-child(2) { background: #ffbd2e; }
.window-bar span:nth-child(3) { background: #28ca42; }
.window-bar b { margin-left: auto; color: var(--m-faint); font-family: var(--m-font-mono); font-size: 10px; letter-spacing: .05em; }
.showcase-pc > img { width: 100%; aspect-ratio: 2.07; object-fit: cover; object-position: top; }

.showcase-phone {
    position: absolute;
    right: -6px;
    bottom: 20px;
    z-index: 3;
    width: 182px;
    height: 376px;
    padding: 14px 8px 10px;
    overflow: hidden;
    background: #0b1120;
    border: 3px solid #0b1120;
    border-radius: 30px;
    box-shadow: 0 34px 64px -18px rgba(11, 17, 32, .5);
    transform: rotate(-3deg);
    animation: m-float 9s ease-in-out infinite;
}
.phone-speaker { position: absolute; top: 7px; left: 50%; z-index: 4; width: 52px; height: 5px; background: #0b1120; border-radius: 10px; transform: translateX(-50%); }
.showcase-phone img { width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: 20px; }

.showcase-badge {
    position: absolute;
    z-index: 4;
    display: flex;
    min-width: 176px;
    padding: 14px 17px;
    flex-direction: column;
    background: rgba(255, 255, 255, .94);
    border: 1px solid var(--m-line);
    border-radius: 16px;
    box-shadow: 0 18px 44px -14px rgba(24, 45, 116, .25);
    animation: m-float 11s ease-in-out infinite reverse;
}
.showcase-badge b { font-size: 13.5px; }
.showcase-badge span { margin-top: 2px; color: var(--m-faint); font-size: 10.5px; }
.badge-corner { bottom: 26px; left: 14px; }

/* --------------------------------------------------------------------------
   07 产品面板（单面板 + tab 切换两个产品舞台）
   -------------------------------------------------------------------------- */
.products-section .section-heading { margin-bottom: 36px; }
.product-tabs { margin-bottom: 28px; }

.product-panel {
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--m-line);
    border-radius: var(--m-radius-xl);
    box-shadow: var(--m-shadow-flat);
    transition: box-shadow .35s ease, border-color .35s ease;
}
.product-panel:hover { border-color: rgba(61, 107, 245, .35); box-shadow: var(--m-shadow-lift); }

.product-stage { display: grid; grid-template-columns: .92fr 1.08fr; animation: m-copy-in .4s ease both; }
.product-stage[hidden] { display: none; }

.product-copy { position: relative; z-index: 2; padding: 56px 52px; background: #fff; }
.product-index { color: var(--m-faint); font-family: var(--m-font-mono); font-size: 13px; font-weight: 800; }
.product-tag { padding: 7px 14px; color: var(--m-primary); background: var(--m-primary-soft); border-radius: 999px; font-size: 11.5px; font-weight: 800; }
.product-stage-cloud .product-tag { color: #0a9166; background: var(--m-accent-soft); }
.product-copy h3 { margin: 26px 0 14px; font-size: clamp(34px, 3.6vw, 46px); letter-spacing: -.04em; }
.product-copy h3 small { display: block; margin-top: 12px; color: var(--m-faint); font-size: 13px; font-weight: 700; letter-spacing: .12em; }
.product-lead { margin: 0; color: var(--m-muted); font-size: 15px; }
.feature-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 24px 0 28px; }

.check-list { display: grid; gap: 15px; margin: 0 0 32px; padding: 0; list-style: none; }
.check-list li { display: grid; grid-template-columns: 112px 1fr; gap: 12px; align-items: baseline; }
.check-list b { position: relative; padding-left: 24px; font-size: 13.5px; }
.check-list b::before {
    content: "\F26E"; /* bi-check2-circle */
    position: absolute;
    left: 0;
    top: 1px;
    color: var(--m-primary);
    font-family: "bootstrap-icons", serif;
    font-size: 15px;
}
.product-stage-cloud .check-list b::before { color: var(--m-accent); }
.check-list span { color: var(--m-muted); font-size: 12.5px; }

.repo-link { display: inline-flex; align-items: center; gap: 9px; color: var(--m-primary); font-size: 13.5px; font-weight: 800; }
.repo-link .bi { transition: transform .25s ease; }
.repo-link:hover .bi { transform: translate(3px, -3px); }
.product-stage-cloud .repo-link { color: #0a9166; }

/* 产品配图区 */
.product-gallery { position: relative; min-width: 0; overflow: hidden; }
.fox-gallery { background: linear-gradient(150deg, #e9efff, #f7faff); }
.cloud-gallery { background: linear-gradient(150deg, #e2faf1, #f6fffb); }
.product-gallery > .m-grid-bg { position: absolute; inset: 0; }
.gallery-desktop, .gallery-admin {
    position: absolute;
    top: 84px;
    left: 44px;
    width: 90%;
    overflow: hidden;
    background: #fff;
    border: 6px solid #fff;
    border-radius: 14px;
    box-shadow: 0 28px 60px -20px rgba(24, 45, 116, .3);
    transform: rotate(-1.1deg);
    transition: transform .35s ease;
}
.product-panel:hover .gallery-desktop, .product-panel:hover .gallery-admin { transform: rotate(0) translateY(-5px); }
.gallery-desktop img, .gallery-admin img { width: 100%; aspect-ratio: 2.03; object-fit: cover; object-position: top; }
.gallery-mobile {
    position: absolute;
    right: 32px;
    bottom: -56px;
    z-index: 2;
    width: 190px;
    height: 404px;
    padding: 8px;
    overflow: hidden;
    background: var(--m-night);
    border-radius: 28px;
    box-shadow: 0 28px 60px -18px rgba(10, 16, 31, .48);
    transform: rotate(2.6deg);
    animation: m-float 10s ease-in-out infinite;
}
.gallery-mobile img { width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: 21px; }
.cloud-gallery .gallery-admin { top: 106px; transform: rotate(1.2deg); }
.product-panel:hover .cloud-gallery .gallery-admin { transform: rotate(0) translateY(-5px); }
.cloud-gallery .gallery-mobile { right: auto; bottom: -44px; left: 44px; transform: rotate(-2.6deg); }

/* --------------------------------------------------------------------------
   08 核心能力（深色科技区块）
   -------------------------------------------------------------------------- */
.section-capabilities { overflow: hidden; }
.section-capabilities::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(to right, rgba(143, 168, 255, .05) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(143, 168, 255, .05) 1px, transparent 1px);
    background-size: 46px 46px;
    -webkit-mask-image: radial-gradient(ellipse 85% 70% at 50% 30%, #000 20%, transparent 75%);
    mask-image: radial-gradient(ellipse 85% 70% at 50% 30%, #000 20%, transparent 75%);
    pointer-events: none;
}
.section-capabilities .container { position: relative; }
.section-dark .section-heading p { color: #97a3c0; }

.capability-grid { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--m-night-line); border-radius: var(--m-radius-xl); overflow: hidden; background: rgba(255, 255, 255, .015); }
.capability-card {
    position: relative;
    min-height: 280px;
    padding: 34px;
    border-right: 1px solid var(--m-night-line);
    border-bottom: 1px solid var(--m-night-line);
    transition: background-color .3s ease;
}
.capability-card:nth-child(3n) { border-right: 0; }
.capability-card:nth-child(n + 4) { border-bottom: 0; }
.capability-card:hover { background: rgba(255, 255, 255, .035); }
.capability-card > span { position: absolute; top: 30px; right: 30px; color: #3d4a68; font-family: var(--m-font-mono); font-size: 12px; font-weight: 800; }
.capability-card .icon-tile { margin-bottom: 46px; color: #9db2ff; background: rgba(61, 107, 245, .14); border: 1px solid rgba(143, 168, 255, .18); }
.capability-card:nth-child(even) .icon-tile { color: #7de8c2; background: rgba(16, 201, 138, .1); border-color: rgba(16, 201, 138, .18); }
.capability-card h3 { margin: 0 0 10px; font-size: 20px; }
.capability-card p { margin: 0; color: #97a3c0; font-size: 14px; }

/* --------------------------------------------------------------------------
   09 产品对比
   -------------------------------------------------------------------------- */
.compare-section { background: linear-gradient(180deg, #fff, #f7f9fd); }
.choice-tip { margin-top: 32px; padding: 20px 22px; background: var(--m-primary-soft); border-left: 3px solid var(--m-primary); border-radius: 6px 16px 16px 6px; }
.choice-tip span { display: block; color: var(--m-primary); font-size: 10.5px; font-weight: 850; letter-spacing: .12em; }
.choice-tip b { display: block; margin-top: 5px; font-size: 14.5px; }

.compare-table { overflow: hidden; background: #fff; border: 1px solid var(--m-line); border-radius: var(--m-radius-lg); box-shadow: var(--m-shadow-flat); }
.compare-row { display: grid; grid-template-columns: .66fr 1.17fr 1.17fr; border-bottom: 1px solid var(--m-line); }
.compare-row:last-child { border-bottom: 0; }
.compare-row > span, .compare-row > b { min-width: 0; padding: 19px 22px; }
.compare-row > span { color: var(--m-faint); font-size: 12.5px; font-weight: 650; }
.compare-row > b { border-left: 1px solid var(--m-line); font-size: 13.5px; font-weight: 650; color: var(--m-ink-2); }
.compare-head { color: #fff; background: var(--m-ink); }
.compare-head > span { color: #a7b1c9; }
.compare-head > b:first-of-type { color: #93aaff; }
.compare-head > b:last-of-type { color: #6ee7b7; }

/* --------------------------------------------------------------------------
   10 适用场景
   -------------------------------------------------------------------------- */
.scenario-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.scenario-card { position: relative; min-height: 320px; padding: 30px; overflow: hidden; }
.scenario-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--m-gradient-brand);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .35s ease;
}
.scenario-card:hover::before { transform: scaleX(1); }
.scenario-card > span { position: absolute; top: 24px; right: 26px; color: #c3cbdb; font-family: var(--m-font-mono); font-size: 11px; font-weight: 800; }
.scenario-card .icon-tile { margin-bottom: 52px; }
.scenario-card.tone-accent .icon-tile { color: #0a9166; background: var(--m-accent-soft); }
.scenario-card h3 { margin: 0 0 10px; font-size: 18px; }
.scenario-card p { margin: 0; color: var(--m-muted); font-size: 13.5px; }
.scenario-card > b { display: inline-flex; align-items: center; gap: 6px; margin-top: 22px; color: var(--m-primary); font-size: 12px; font-weight: 800; }
.scenario-card > b .bi { font-size: 12px; }
.scenario-card.tone-accent > b { color: #0a9166; }

/* --------------------------------------------------------------------------
   11 内容卡片（新闻 / 案例通用，含 JS 动态注入的卡片）
   -------------------------------------------------------------------------- */
.content-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.content-card { position: relative; overflow: hidden; background: #fff; border: 1px solid var(--m-line); border-radius: var(--m-radius-lg); box-shadow: var(--m-shadow-flat); transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; }
.content-card:hover { transform: translateY(-6px); border-color: rgba(61, 107, 245, .35); box-shadow: var(--m-shadow-lift); }
.content-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    z-index: 1;
    background: var(--m-gradient-brand);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .35s ease;
}
.content-card:hover::before { transform: scaleX(1); }
.content-cover { display: grid; height: 210px; place-items: center; overflow: hidden; background: linear-gradient(140deg, #e9efff, #f3fbff); color: var(--m-primary); font-size: 12px; font-weight: 800; letter-spacing: .18em; }
.content-cover img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.content-card:hover .content-cover img { transform: scale(1.05); }
.content-body { padding: 26px; }
.content-meta { color: var(--m-primary); font-size: 12.5px; font-weight: 700; }
.content-body h3 { margin: 12px 0; font-size: 20px; line-height: 1.45; }
.content-body h3 a { color: inherit; transition: color .25s ease; }
.content-body h3 a:hover { color: var(--m-primary); }
.content-body p { margin: 0; color: var(--m-muted); font-size: 14px; }
.content-loading, .empty-state { grid-column: 1 / -1; padding: 54px 24px; color: var(--m-faint); text-align: center; background: var(--m-bg-soft); border: 1px dashed var(--m-line-strong); border-radius: var(--m-radius-lg); }

/* 首页新闻列表 */
.news-home-list { border-top: 1px solid var(--m-line); }
.news-home-item { display: grid; grid-template-columns: 132px 1fr 46px; gap: 28px; align-items: center; padding: 28px 4px; border-bottom: 1px solid var(--m-line); transition: background-color .25s ease, padding-left .25s ease; }
.news-home-item:hover { background: linear-gradient(90deg, rgba(61, 107, 245, .035), transparent 60%); padding-left: 14px; }
.news-home-item time { color: var(--m-faint); font-family: var(--m-font-mono); font-size: 12.5px; }
.news-home-item h3 { margin: 0 0 7px; font-size: 19px; }
.news-home-item h3 a { color: inherit; transition: color .25s ease; }
.news-home-item h3 a:hover { color: var(--m-primary); }
.news-home-item p { margin: 0; color: var(--m-muted); font-size: 14px; }
.round-arrow {
    display: grid;
    width: 46px;
    height: 46px;
    place-items: center;
    color: var(--m-primary);
    border: 1px solid var(--m-line-strong);
    border-radius: 50%;
    transition: color .25s ease, background-color .25s ease, border-color .25s ease, transform .25s ease;
}
.round-arrow:hover { color: #fff; background: var(--m-primary); border-color: var(--m-primary); transform: rotate(-45deg); }

/* --------------------------------------------------------------------------
   12 开源面板
   -------------------------------------------------------------------------- */
.opensource-section { padding: 16px 0 104px; }
.opensource-panel {
    position: relative;
    min-height: 440px;
    padding: 64px;
    overflow: hidden;
    color: #dbe3f5;
    background: var(--m-gradient-night);
    border: 1px solid var(--m-night-line);
    border-radius: var(--m-radius-xl);
    box-shadow: var(--m-shadow-dark);
}
.opensource-panel::after {
    content: "云";
    position: absolute;
    right: 30px;
    bottom: -150px;
    color: rgba(255, 255, 255, .03);
    font-size: 380px;
    font-weight: 900;
    line-height: 1;
    pointer-events: none;
}
.opensource-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(to right, rgba(143, 168, 255, .06) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(143, 168, 255, .06) 1px, transparent 1px);
    background-size: 46px 46px;
    -webkit-mask-image: radial-gradient(ellipse 80% 90% at 80% 10%, #000 15%, transparent 72%);
    mask-image: radial-gradient(ellipse 80% 90% at 80% 10%, #000 15%, transparent 72%);
    pointer-events: none;
}
.opensource-copy { position: relative; z-index: 2; max-width: 680px; }
.opensource-copy .eyebrow { color: #8fa8ff; }
.opensource-copy h2 { margin: 18px 0; font-size: clamp(34px, 4vw, 50px); letter-spacing: -.04em; }
.opensource-copy p { color: #a4b0cd; font-size: 16px; }
.tech-stack { position: relative; z-index: 2; display: flex; flex-wrap: wrap; gap: 9px; margin: 30px 0; }
.opensource-actions { position: relative; z-index: 2; display: flex; gap: 12px; }

/* --------------------------------------------------------------------------
   13 页脚
   -------------------------------------------------------------------------- */
.site-footer { padding: 72px 0 26px; color: #b9c2d6; background: var(--m-night); position: relative; overflow: hidden; }
.site-footer::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(60% 50% at 88% 0%, rgba(61, 107, 245, .14), transparent 65%);
    pointer-events: none;
}
.site-footer .container { position: relative; }
.brand-light { color: #fff; }
.brand-light .brand-name { color: #fff; }
.brand-light .brand-name small { color: #66718d; }
.footer-grid { display: grid; grid-template-columns: minmax(230px, 1fr) minmax(200px, .7fr) auto; gap: 56px; align-items: start; padding-bottom: 52px; }
.footer-grid p { color: #7b869e; }
.footer-links { display: flex; max-width: 260px; flex-wrap: wrap; gap: 16px 26px; align-items: flex-start; }
.footer-links a { font-size: 14px; transition: color .22s ease; }
.footer-links a:hover { color: #93aaff; }
.footer-contact-title { display: block; margin-bottom: 16px; color: #fff; font-size: 14px; }
.footer-qr-list { display: flex; gap: 14px; }
.footer-qr-card { width: 148px; margin: 0; }
.footer-qr-image { width: 148px; height: 148px; padding: 8px; overflow: hidden; background: #fff; border-radius: 14px; transition: transform .3s ease; }
.footer-qr-card:hover .footer-qr-image { transform: translateY(-4px); }
.footer-qr-image img { width: 100%; height: 100%; object-fit: cover; border-radius: 9px; }
.footer-qr-image .wechat-card-image { object-position: center 57%; }
.footer-qr-card figcaption { padding-top: 11px; text-align: center; }
.footer-qr-card figcaption b { display: block; color: #e7ebf4; font-size: 12.5px; }
.footer-qr-card figcaption span { display: block; margin-top: 2px; color: #6d7893; font-size: 10.5px; }
.footer-bottom { display: flex; padding-top: 22px; justify-content: space-between; gap: 12px; border-top: 1px solid rgba(255, 255, 255, .08); color: #5d6883; font-size: 12.5px; }

/* --------------------------------------------------------------------------
   14 内页：列表页 + 文章页
   -------------------------------------------------------------------------- */
.page-hero { position: relative; padding: 88px 0 68px; background: linear-gradient(180deg, #f5f8ff, #fff); overflow: hidden; }
.page-hero > .m-grid-bg { position: absolute; inset: 0; }
.page-hero .container { position: relative; }
.page-hero h1 { margin: 14px 0 16px; font-size: clamp(40px, 6vw, 62px); letter-spacing: -.05em; font-weight: 900; }
.page-hero p { max-width: 620px; margin: 0; color: var(--m-muted); font-size: 17px; }

.listing-toolbar { display: flex; margin-bottom: 38px; justify-content: space-between; gap: 24px; align-items: center; }
.filter-tabs { display: flex; flex-wrap: wrap; gap: 9px; }
.filter-tabs a { padding: 9px 17px; color: var(--m-muted); background: var(--m-bg-soft); border: 1px solid transparent; border-radius: 999px; font-size: 13px; font-weight: 700; transition: color .22s ease, background-color .22s ease, border-color .22s ease; }
.filter-tabs a:hover { color: var(--m-primary); }
.filter-tabs a.active { color: #fff; background: var(--m-primary); box-shadow: 0 8px 18px -8px rgba(61, 107, 245, .55); }

.search-form { display: flex; gap: 8px; }
.search-form .form-control { width: 250px; border-radius: 999px; border-color: var(--m-line-strong); }
.search-form .form-control:focus { border-color: var(--m-primary); box-shadow: 0 0 0 4px rgba(61, 107, 245, .12); }
.search-form .btn { border-radius: 999px; }

/* ThinkPHP 分页器皮肤（输出结构为 ul.pagination > li > a/span） */
.pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 46px 0 0; padding: 0; list-style: none; }
.pagination > li > a, .pagination > li > span {
    display: grid;
    min-width: 40px;
    height: 40px;
    padding: 0 10px;
    place-items: center;
    color: var(--m-ink-2);
    background: #fff;
    border: 1px solid var(--m-line);
    border-radius: 11px;
    font-size: 13.5px;
    font-weight: 700;
    transition: color .22s ease, background-color .22s ease, border-color .22s ease;
}
.pagination > li > a:hover { color: var(--m-primary); border-color: var(--m-primary); }
.pagination > .active > span { color: #fff; background: var(--m-primary); border-color: var(--m-primary); box-shadow: 0 8px 18px -8px rgba(61, 107, 245, .55); }
.pagination > .disabled > span { color: #b3bccd; background: var(--m-bg-soft); }

/* 文章页 */
.article-page { padding: 76px 0 110px; background: var(--m-bg-soft); }
.article-shell { max-width: 860px; padding: 60px 68px; background: #fff; border: 1px solid var(--m-line); border-radius: var(--m-radius-xl); box-shadow: var(--m-shadow-flat); }
.article-shell h1 { margin: 16px 0; font-size: clamp(32px, 4.6vw, 50px); line-height: 1.2; letter-spacing: -.04em; }
.article-shell h2 { margin: 44px 0 16px; font-size: 25px; }
.article-lead { color: var(--m-muted); font-size: 18px; }
.article-meta { display: flex; flex-wrap: wrap; gap: 10px 20px; margin: 24px 0 36px; color: var(--m-faint); font-size: 13px; }
.article-cover { width: 100%; max-height: 470px; margin: 0 0 40px; object-fit: cover; border-radius: var(--m-radius); }
.article-content { color: #33405c; font-size: 16.5px; line-height: 2.05; }
.article-content p { margin-bottom: 1.1em; }
.article-back { display: inline-flex; align-items: center; gap: 8px; margin-top: 46px; color: var(--m-primary); font-weight: 700; }
.article-back .bi { transition: transform .25s ease; }
.article-back:hover .bi { transform: translateX(-4px); }

.case-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 30px 0 42px; }
.case-facts > div { padding: 20px 22px; background: var(--m-bg-soft); border: 1px solid var(--m-line); border-radius: var(--m-radius); }
.case-facts small { display: block; color: var(--m-faint); font-size: 12px; }
.case-facts b { display: block; margin-top: 5px; font-size: 15px; }

/* --------------------------------------------------------------------------
   15 动效
   -------------------------------------------------------------------------- */
@keyframes m-float {
    0%, 100% { transform: translateY(0) rotate(var(--m-float-rotate, 0deg)); }
    50% { transform: translateY(-14px) rotate(var(--m-float-rotate, 0deg)); }
}
@keyframes m-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: .45; transform: scale(.8); }
}
@keyframes m-copy-in {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: none; }
}
.showcase-phone { --m-float-rotate: -3deg; }
.gallery-mobile { --m-float-rotate: 2.6deg; }
.cloud-gallery .gallery-mobile { --m-float-rotate: -2.6deg; }

/* AOS 微调：与品牌缓动一致 */
[data-aos] { transition-timing-function: cubic-bezier(.22, .68, .32, 1); }

/* --------------------------------------------------------------------------
   16 响应式
   -------------------------------------------------------------------------- */
@media (max-width: 1199.98px) {
    .hero-copy h1 { font-size: 52px; }
    .hero-showcase { height: 500px; }
    .capability-grid { grid-template-columns: repeat(2, 1fr); }
    .capability-card:nth-child(3n) { border-right: 1px solid var(--m-night-line); }
    .capability-card:nth-child(2n) { border-right: 0; }
    .capability-card:nth-child(n + 4) { border-bottom: 1px solid var(--m-night-line); }
    .capability-card:nth-child(n + 5) { border-bottom: 0; }
}

@media (max-width: 991.98px) {
    .section { padding: 84px 0; }
    .hero { padding-top: 72px; }
    .hero-grid { gap: 34px; }
    .hero-copy { padding-bottom: 24px; }
    .hero-copy h1 { font-size: 46px; }
    .hero-showcase { height: 500px; }
    .product-stage { grid-template-columns: 1fr; }
    .product-copy { padding: 44px 36px; }
    .product-gallery { min-height: 520px; }
    .scenario-cards { grid-template-columns: repeat(2, 1fr); }
    .content-grid { grid-template-columns: repeat(2, 1fr); }
    .compare-grid { gap: 44px; }
    .heading-row { align-items: flex-start; flex-direction: column; gap: 18px; }
    .footer-grid { grid-template-columns: 1fr; gap: 38px; }
    .listing-toolbar { align-items: stretch; flex-direction: column; }
    .search-form .form-control { width: 100%; }
    .opensource-panel { padding: 48px 40px; }
}

@media (max-width: 767.98px) {
    .section { padding: 68px 0; }
    .hero { padding-top: 54px; }
    .hero-copy h1 { font-size: 40px; }
    .hero-subtitle { font-size: 17px; }
    .hero-actions { align-items: stretch; flex-direction: column; }
    .hero-showcase { height: 380px; margin-top: 6px; }
    .tab-switch { width: 100%; }
    .tab-switch button { min-width: 0; flex: 1; }
    .showcase-pc { top: 44px; width: 94%; }
    .showcase-phone { right: 0; bottom: 10px; width: 118px; height: 246px; border-width: 2px; border-radius: 21px; }
    .showcase-badge { min-width: 138px; padding: 10px 12px; }
    .badge-corner { bottom: 10px; left: 2px; }
    .section-heading h2 { font-size: 32px; }
    .product-copy { padding: 36px 26px; }
    .check-list li { grid-template-columns: 1fr; gap: 3px; }
    .check-list span { padding-left: 24px; }
    .product-gallery { min-height: 350px; }
    .gallery-desktop, .gallery-admin { top: 50px; left: 22px; width: 93%; border-width: 4px; }
    .gallery-mobile { right: 16px; bottom: -62px; width: 122px; height: 262px; border-radius: 21px; }
    .cloud-gallery .gallery-admin { top: 66px; }
    .cloud-gallery .gallery-mobile { bottom: -40px; left: 22px; }
    .capability-grid { grid-template-columns: 1fr; }
    .capability-card { min-height: 0; padding: 28px; }
    .capability-card .icon-tile { margin-bottom: 22px; }
    .capability-card:nth-child(2n), .capability-card:nth-child(3n) { border-right: 0; }
    .capability-card:nth-child(n + 2) { border-bottom: 1px solid var(--m-night-line); }
    .capability-card:last-child { border-bottom: 0; }
    .compare-row { grid-template-columns: .6fr 1.2fr 1.2fr; }
    .compare-row > span, .compare-row > b { padding: 15px 11px; font-size: 11.5px; }
    .scenario-cards, .content-grid { grid-template-columns: 1fr; }
    .scenario-card { min-height: 0; }
    .news-home-item { grid-template-columns: 1fr 46px; gap: 12px; }
    .news-home-item time { grid-column: 1 / -1; }
    .opensource-section { padding-bottom: 76px; }
    .opensource-panel { padding: 40px 26px; border-radius: var(--m-radius-lg); }
    .opensource-actions { align-items: stretch; flex-direction: column; }
    .footer-bottom { flex-direction: column; }
    .footer-qr-card { width: 132px; }
    .footer-qr-image { width: 132px; height: 132px; }
    .article-page { padding: 34px 0 72px; }
    .article-shell { padding: 32px 24px; }
    .case-facts { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   17 无障碍：减少动态效果
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
    [data-aos] { opacity: 1 !important; transform: none !important; }
}