/* ==========================================================================
 * Juytu.Home —— 官网专属样式（组件类 / 模板类）
 * 由 input.css @import 引入，Tailwind CLI 统一编译。
 * 约定：
 *  - 页面 HTML 只写「颜色」与「布局差异」class；字号/字重/行高/字距等规格
 *    一律收敛到下方模板 class（.h1/.h2/.h3/.text-gradient/.juytu-section*），
 *    统一修改一处即全站生效。
 *  - 响应式间距优先使用 clamp()（随视口连续缩放），需要断点跳跃处用 @apply。
 * ========================================================================== */

/* ---------- 元素级兜底：未使用模板 class 的标题也有统一字重 ---------- */
h1, h2, h3, h4 {
    font-weight: 700;
}

/* ==========================================================================
 * 文字颜色令牌（语义变量）—— 全站文字颜色唯一入口
 * 用法：页面只写语义类（text-primary / text-secondary /
 *       text-faint / text-accent / text-accent-2），禁止再写裸透明度
 *       （text-white/35 等）。令牌默认值定义在 input.css @theme
 *       （--color-primary 等，自动生成 text-* utility）；变量随「容器背景」
 *       自动切换：命中深色容器（.dark / [data-theme="dark"] / juytu-* 深色
 *       背景类）时重定义同名字段 → 文字颜色自适应背景，无需手工指定。
 * 数字指标一律 text-primary 或 text-accent。
 * ========================================================================== */
/* 深色主题：HTML 容器显式加 data-theme="dark"（或 .dark 类）即命中。
 * 规范：变量预设只认这两个选择器，深色容器不再用 juytu-* 类隐式命中。
 * 注意：.juytu-card-ghost（白卡/浅底）不在此列，内部文字走浅色主题变量。 */
.dark,
[data-theme="dark"] {
    --color-primary: #ffffff;
    --color-secondary: rgba(255, 255, 255, 0.85);
    --color-faint: rgba(255, 255, 255, 0.45);
    --color-accent: #59f1ff;               /* 深色强调（cyan，深底可见） */
    --color-accent-2: #1b8dff;             /* 深色次级强调（brand） */
}

/* 白底深字（浅色徽章/chip 固定深字，不随容器主题切换） */
.text-on-light { color: var(--color-ink); }

/* 横贯两列（桌面）：Hero 数据指标置于文案与视频下方时跨整行。
 * 不用 Tailwind col-span（嵌套 @media 输出在部分环境解析不一致），显式媒体查询最可靠。 */
@media (min-width: 64rem) {
    .juytu-span-2 {
        grid-column: span 2;
    }
}

/* ===== Hero 价值主张打字机：覆盖 TypingText 组件最小样式（深色区白字、无衬线、加粗） =====
 * 注意：TypingText 是子组件，根元素带的是组件自身 scope，页面 scoped css 匹配不到；
 * 必须放全局 css，并用 !important 压过组件 scoped 规则（与加载顺序无关）。 */
.juytu-hero-typing {
    --bue-ty-color: var(--color-primary) !important;
    --bue-ty-cursor: var(--color-accent) !important;
    --bue-ty-hl-color: var(--color-accent) !important;
    --bue-ty-size: 1.125rem !important;
    --bue-ty-font: inherit !important;
}
.juytu-hero-typing .ty-text {
    color: var(--color-primary) !important;
    font-weight: 700;
}
.juytu-hero-typing .ty-cursor {
    background: var(--color-accent) !important;
}

/* 手机端首屏文字整体放大（仅首屏）：主标题 + 打字机 */
@media (max-width: 767px) {
    .juytu-hero-typing {
        --bue-ty-size: 1.3rem !important;
    }
}

/* 首屏 1 列区间（<1024，与 lg:grid-cols-2 对齐）文字整体居中 */
@media (max-width: 1023px) {
    .juytu-hero-bg .juytu-page-width {
        text-align: center;
    }

    .juytu-hero-bg .juytu-page-width > div:first-child {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
}

/* ---------- 标题档位模板 ----------
 * 页面只写 <h1 class="h1">（颜色等差异 class 另加，如 text-primary / text-accent）。
 * 档位：h1=Hero 主标题；h2=区块标题；h2--page=详情页/大区标题；
 *       h2--sm=二级/小节标题；h3=卡片标题；h3--sm=卡内小标题 */
.h1 {
    font-size: clamp(2.5rem, 1.25rem + 3.5vw, 3.75rem);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.02em;
}

/* 区块标题（统一放大一号档位：全站 Section 标题一致） */
.h2 {
    font-size: clamp(2.5rem, 1.375rem + 3.25vw, 3.5rem);
    font-weight: 800;
    line-height: 1.18;
    letter-spacing: -0.018em;
}

/* 详情页 / 大区标题（原 text-3xl md:text-4xl 组合收敛） */
.h2--page {
    font-size: clamp(1.875rem, 1.25rem + 1.8vw, 2.25rem);
    font-weight: 800;
    line-height: 1.22;
    letter-spacing: -0.015em;
}

.h2--sm {
    font-size: clamp(1.75rem, 1.125rem + 1.2vw, 2.125rem);
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -0.01em;
}

.h3 {
    font-size: clamp(1.25rem, 1rem + 0.75vw, 1.5rem);
    font-weight: 700;
    line-height: 1.35;
}

/* 卡内小标题（原 text-lg font-bold 组合收敛） */
.h3--sm {
    font-size: clamp(1.125rem, 1rem + 0.35vw, 1.25rem);
    font-weight: 700;
    line-height: 1.4;
}

/* ---------- 渐变强调文字（原 from-cyan to-brand bg-clip-text text-transparent） ---------- */
.text-gradient {
    background: linear-gradient(90deg, var(--color-cyan), var(--color-brand));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* ---------- 标签胶囊（统一三卡标签样式：边框 + 圆角 + 图标 + 文字） ---------- */
.juytu-pill {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .22rem .6rem;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 999px;
    background: rgba(255, 255, 255, .05);
    font-size: .75rem;
    color: var(--color-secondary);
    white-space: nowrap;
}
.juytu-pill img {
    width: 1rem;
    height: 1rem;
    object-fit: contain;
    flex-shrink: 0;
}

/* ---------- 区块纵向间距模板（响应式 clamp；对齐原 py-20/24/28） ----------
 * .juytu-section      标准区块（≈原 py-24，移动端自动收紧）
 * .juytu-section--sm  紧凑区块（≈原 py-16/20）
 * .juytu-section--lg  大留白区块 / Hero 头（≈原 py-28） */
.juytu-section {
    padding-block: clamp(4.5rem, 8vw, 8rem);
}

.juytu-section--sm {
    padding-block: clamp(3rem, 5.5vw, 5.5rem);
}

.juytu-section--lg {
    padding-block: clamp(5rem, 10vw, 9rem);
}

/* ==========================================================================
 * 官网基础组件类
 * ========================================================================== */

/* 页面容器：最大宽度走 --juytu-page-max 单一变量（改一处全站生效，自动响应式） */
.juytu-page-width {
    width: 100%;
    max-width: var(--juytu-page-max, 74rem);
    margin-inline: auto;
    padding-inline: 1.25rem;
}
@media (min-width: 1280px) {
    .juytu-page-width { --juytu-page-max: 82rem; }
}

/* 更宽容器：横向舒展的区块（如发展历程 Timeline）在标准宽度基础上放宽 */
.juytu-page-width--wide {
    --juytu-page-max: 88rem;
}

/* 嵌套消除：Section 容器（或页面）内重复包裹的 juytu-page-width 不再缩窄，
   统一由最外层容器控制宽度与内边距，保证全站各区块视觉宽度一致 */
.juytu-page-width .juytu-page-width {
    width: 100%;
    max-width: none;
    padding-inline: 0;
}

/* 区块 eyebrow（如 OVERSEAS SOCIAL AI） */
.juytu-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    font-size: .72rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--color-cyan);
}
.juytu-eyebrow i {
    width: 1.6rem;
    height: 1px;
    background: linear-gradient(90deg, var(--color-cyan), transparent);
}

/* 区块编号标题（kicker，如 GLOBAL GROWTH PAIN POINTS 01）
 * 颜色走语义强调（深区青/浅区品牌蓝）；右侧为 accent 减淡横线（原设计） */
.juytu-kicker {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    font-size: .72rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--color-accent);
}
.juytu-kicker::after {
    content: '';
    width: 2rem;
    height: 1px;
    background: linear-gradient(90deg, var(--color-accent), transparent);
}
.juytu-kicker span {
    font-variant-numeric: tabular-nums;
}

/* 主按钮 */
.juytu-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .72rem 1.35rem;
    border-radius: .55rem;
    font-weight: 600;
    font-size: .95rem;
    line-height: 1;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
    white-space: nowrap;
    cursor: pointer;
}
.juytu-btn:hover { transform: translateY(-1px); }
.juytu-btn:active { transform: translateY(0); }
.juytu-btn--primary {
    color: #fff; /* 按钮文字固定白：按钮自身为深色风格，不随容器主题切换 */
    background: var(--color-brand); /* 按钮是大面积底色，固定品牌蓝保证白字可读；accent 仅供文字强调随背景切换 */
    box-shadow: 0 8px 24px -10px rgba(27, 141, 255, .55);
}
.juytu-btn--primary:hover { box-shadow: 0 12px 30px -10px rgba(27, 141, 255, .7); }
.juytu-btn--primary:hover { box-shadow: 0 12px 30px -10px color-mix(in srgb, var(--color-accent) 70%, transparent); }
.juytu-btn--line {
    color: #e6f6ff; /* 描边按钮文字固定浅蓝（按钮为深色描边风格） */
    border: 1px solid color-mix(in srgb, var(--color-accent) 35%, transparent);
    background: color-mix(in srgb, var(--color-accent) 4%, transparent);
}
.juytu-btn--line:hover { border-color: color-mix(in srgb, var(--color-accent) 65%, transparent); background: color-mix(in srgb, var(--color-accent) 10%, transparent); }

/* ===== Hero 深空渐变背景 ===== */
.juytu-hero-bg {
    background:
        radial-gradient(circle at 74% 38%, #0a3260, #061a35 27%, #030b18 68%);
}
.juytu-hero-glow {
    position: absolute;
    inset: -8%;
    pointer-events: none;
    background:
        radial-gradient(circle at 78% 43%, rgba(27, 141, 255, .42), transparent 27%),
        radial-gradient(circle at 63% 70%, rgba(17, 206, 255, .2), transparent 31%),
        linear-gradient(118deg, transparent 43%, rgba(71, 214, 255, .08) 43.4%, transparent 44%),
        linear-gradient(24deg, transparent 62%, rgba(71, 214, 255, .06) 62.4%, transparent 63%);
}

/* ===== CTA 条：深空渐变 + 光晕（替代纯黑底） ===== */
.juytu-cta {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 0%, rgba(27, 141, 255, .20), transparent 44%),
        radial-gradient(circle at 18% 100%, rgba(0, 210, 221, .10), transparent 38%),
        radial-gradient(circle at 82% 100%, rgba(27, 141, 255, .12), transparent 40%),
        linear-gradient(180deg, #081a36 0%, #040b16 100%);
}
.juytu-cta-glow {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(118deg, transparent 43%, rgba(71, 214, 255, .07) 43.4%, transparent 44%),
        linear-gradient(24deg, transparent 62%, rgba(71, 214, 255, .05) 62.4%, transparent 63%);
}

/* 深色区通用文字色（已由 --text-* 语义变量取代，删除旧硬编码） */

/* 卡片（浅色区） */
.juytu-card {
    background: #fff;
    border: 1px solid #e6edf5;
    border-radius: 1rem;
    box-shadow: 0 1px 2px rgba(16, 23, 40, .04), 0 10px 30px -18px rgba(16, 23, 40, .2);
    transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.juytu-card:hover {
    transform: translateY(-4px);
    border-color: rgba(27, 141, 255, .4);
    box-shadow: 0 4px 10px rgba(16, 23, 40, .06), 0 22px 46px -18px rgba(16, 23, 40, .3);
}

/* Blazor 静态 SSR 组件隔离 JS 占位标签：不参与布局（脚本由 bue.js 异步加载执行） */
page-script {
    display: none !important;
}

/* ==========================================================================
 * 评价墙跑马灯（Home 评价区）—— 全局规则：Section 组件化后 scoped 标识不再
 * 匹配 Home.razor.css 的 ::deep 规则，破容器样式迁移至此。
 * left:50% + width:100vw + translate(-50%) 突破 juytu-page-width 占满视口。
 * ========================================================================== */
.juytu-home-review .bue-marquee {
    left: 50%;
    width: 100vw !important; /* 覆盖组件 scoped width:100%（后加载同特异性，需 !important） */
    transform: translate(-50%);
}

/* 左右渐变遮罩（浅色 mist 底淡出卡片边缘） */
.juytu-home-review .bue-marquee::before,
.juytu-home-review .bue-marquee::after {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2.5rem;
    z-index: 3;
    content: "";
    pointer-events: none;
}

.juytu-home-review .bue-marquee::before {
    left: 0;
    background: linear-gradient(90deg, #f4f7fb, transparent);
}

.juytu-home-review .bue-marquee::after {
    right: 0;
    background: linear-gradient(-90deg, #f4f7fb, transparent);
}

/* 评价墙卡片：悬停仅暂停滚动，不产生阴影/位移视觉变化 */
.juytu-home-review .juytu-card-ghost:hover {
    transform: none;
    box-shadow: none;
}

/* ========== 深色 section（首页/案例/新闻整体深色科技感） ========== */
.juytu-sec-dark {
    background:
        radial-gradient(circle at 72% 18%, rgba(21, 131, 207, .16), transparent 32%),
        radial-gradient(circle at 12% 88%, rgba(0, 210, 221, .08), transparent 30%),
        linear-gradient(180deg, #061426 0%, #040b16 100%);
}

/* 纯色深底（全深色页：与 hero-bg 渐变底部同色，section 间无缝衔接）
 * 用于 About / Partner 等整页深色场景，避免相邻渐变 section 交界截断。 */
.juytu-sec-flat {
    background: #040b16;
}

.juytu-sec-dark--red {
    background:
        radial-gradient(circle at 72% 18%, rgba(160, 20, 48, .30), transparent 34%),
        linear-gradient(180deg, #061426 0%, #040b16 100%);
}

.juytu-sec-dark--cyan {
    background:
        radial-gradient(circle at 20% 20%, rgba(0, 210, 221, .12), transparent 30%),
        linear-gradient(180deg, #061426 0%, #040b16 100%);
}

/* 深色区卡片（pain/process/customer/core-product 卡同源） */
.juytu-card-dark {
    background: linear-gradient(180deg, #0d192dcc, #090d1be0);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 1rem;
    box-shadow: 0 10px 30px -18px rgba(0, 0, 0, .55);
    transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.juytu-card-dark:hover {
    transform: translateY(-4px);
    border-color: rgba(89, 241, 255, .35);
    box-shadow: 0 20px 48px -20px rgba(0, 0, 0, .75);
}

/* 深色区半透明白卡（review-card 白卡 / choose-us 半透明白） */
.juytu-card-ghost {
    background: rgba(255, 255, 255, .92);
    border: 1px solid rgba(255, 255, 255, .6);
    border-radius: 1rem;
    box-shadow: 0 10px 30px -18px rgba(0, 0, 0, .35);
    transition: transform .25s ease, box-shadow .25s ease;
}
.juytu-card-ghost:hover {
    transform: translateY(-4px);
    box-shadow: 0 22px 48px -18px rgba(0, 0, 0, .45);
}

/* 深色区透明毛玻璃卡（ai-capabilities / 指标 / CTA 卡同源：
 * 白 4% 底 + 白 10% 边 + 毛玻璃，统一 hover 上浮 + 青边高亮） */
.juytu-card-glass {
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 1rem;
    backdrop-filter: blur(8px);
    transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.juytu-card-glass:hover {
    transform: translateY(-4px);
    border-color: rgba(89, 241, 255, .35);
    box-shadow: 0 20px 48px -20px rgba(0, 0, 0, .75);
}

/* ===== Tabs 深色背景适配（用于产品页 FEATURES 等深色 Section） ===== */
.juytu-tabs-dark .bue-tabs {
  --bue-tabs-label-idle: rgba(255, 255, 255, 0.72) !important;
  --bue-tabs-label-active: var(--color-accent, #59f1ff) !important;
  --bue-tabs-border: rgba(255, 255, 255, 0.16) !important;
}
.juytu-tabs-dark .bue-tabs__label.on {
  color: var(--bue-tabs-label-active) !important;
}
.juytu-tabs-dark .bue-tabs__label {
  color: var(--bue-tabs-label-idle) !important;
}

/* ==========================================================================
 * HeroVideo 标准化跨 Section 契约（唯一跨区做法，见 HeroVideo.razor 注释）
 *  - hero 底部 padding 留视频上半空间（调用方写 pb-24 md:pb-64）；
 *  - 下一 section 顶部 padding 留视频下半空间（调用方加本类）；
 *  - 视频组件本身是 h-0 锚点 + absolute，不占文档流。
 * ========================================================================== */
.juytu-section--video-next {
  /* 视频下半 252px（大屏 864×486 的一半）+ 标题留白：中值按 22vw 连续放大，
     小屏回落到 7rem（112px，视频 96.5px 半 + kicker 余量） */
  padding-top: clamp(7rem, 22vw, 22rem) !important;
}
.juytu-video-played {
  opacity: 0 !important;
}

/* ==========================================================================
 * Showcase 横向拖拽画廊（矩阵页平台视频卡）
 * 卡片宽度/间距归调用方（吸附步长 = JS 实测 offsetLeft 差值）；
 * Gallery 组件只提供拖拽/惯性/吸附机制与滚动容器。
 * ========================================================================== */
.juytu-showcase-card {
  width: clamp(280px, 62vw, 360px);
}
.juytu-showcase-gallery .bue-gallery__track {
  gap: 1.25rem;
  /* 首卡居中锚定：轨道起始留白 = 视口一半 − 卡宽一半 → 第一张卡中心对准视口中心；
     窄视口回落 1.25rem（贴边起点）。吸附步长 = JS 实测 offsetLeft 差值（含 gap），不受影响 */
  padding-left: max(calc((100vw - 360px) / 2), 1.25rem);
}
/* full-width 出血：不受 page-max 断点影响，横向延伸至视口边缘
   （父容器 auto 居中，margin = -(父左偏移) → 画廊左缘精确贴 0；窄视口自动回落贴齐视口） */
.juytu-showcase-gallery {
  margin-inline: calc((100% - 100vw) / 2);
}

/* ==========================================================================
 * API 页界面轮播：适配 Carousel 组件（slide 高度自适应 + 透明背景 + 图片圆角）
 * 组件 scoped CSS 用 [data-scope] 属性选择器（特异性 .crs[attr] = 0,2,0），且后加载，
 * 同特异性靠顺序会覆盖 portal 覆盖层 → 变量必须 !important 强制生效。
 * ========================================================================== */
.juytu-api-carousel.crs {
  --bue-crs-slide-h: auto !important;
  --bue-crs-slide-bg: transparent !important;
  /* 浅色 Section 下的圆点：默认白色点在浅底看不清 → 深色点 + accent 激活 */
  --bue-crs-dot-bg: rgba(16, 23, 40, 0.22) !important;
  --bue-crs-dot-active: var(--color-accent) !important;
  border-radius: 1rem;
  box-shadow: 0 24px 60px -24px rgba(0, 0, 0, .6);
}
.juytu-api-carousel .crs-slide img {
  border-radius: 1rem;
}


/* ==========================================================================
 * 获客闭环核心三步（搜索 → 识别 → 触达）样式：自 Home.razor.css 迁移，供 AI 产品页使用
 * ========================================================================== */
/* ========== 获客闭环核心三步（搜索 → 识别 → 触达，系统价值主线） ========== */
.juytu-loop-card {
    padding: 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 1.25rem;
    background: linear-gradient(180deg, rgba(112, 215, 255, 0.08), rgba(255, 255, 255, 0.03));
    backdrop-filter: blur(10px);
    box-shadow: 0 18px 50px -30px rgba(0, 0, 0, 0.5);
    transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

.juytu-loop-card:hover {
    border-color: rgba(27, 141, 255, 0.42);
    box-shadow: 0 24px 60px -30px rgba(27, 141, 255, 0.35);
    transform: translateY(-4px);
}

/* 大号描边编号（accent 色科技感） */
.juytu-loop-num {
    font-size: 3rem;
    font-weight: 800;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1.5px var(--color-accent);
}

/* 步骤图标（渐变圆角容器） */
.juytu-loop-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    margin-top: 1.4rem;
    border: 1px solid rgba(27, 141, 255, 0.32);
    border-radius: 1rem;
    background: rgba(27, 141, 255, 0.12);
    color: var(--color-accent);
}

.juytu-loop-icon svg {
    width: 1.75rem;
    height: 1.75rem;
}

/* 桌面：卡片间箭头（01→02→03 完整链，Razor 显式渲染，触达卡后不延续） */
.juytu-loop-arrow {
    position: absolute;
    top: 50%;
    right: -0.9rem;
    transform: translateY(-50%);
    z-index: 2;
    font-size: 1.3rem;
    line-height: 1;
    color: var(--color-accent);
    text-shadow: 0 0 12px rgba(89, 241, 255, 0.6);
}

@media (max-width: 63.999rem) {
    .juytu-loop-arrow {
        display: none;
    }
}

/* AI 识别卡：突出强化（中间列已加宽，不再 scale 避免溢出/与 hover 冲突）+ 呼吸光晕 */
.juytu-loop-card--focus {
    z-index: 2;
    border-color: rgba(27, 141, 255, 0.55);
    animation: bueFocusGlow 3s ease-in-out infinite;
}

/* AI 核心 badge（价格卡推荐位风格：顶部居中 pill，溢出卡片上缘） */
.juytu-loop-badge {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 0.3rem 0.9rem;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--color-brand), var(--color-accent));
    color: #04121f;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    white-space: nowrap;
    box-shadow: 0 8px 24px -8px rgba(27, 141, 255, 0.65);
    z-index: 3;
}

@keyframes bueFocusGlow {
    0%,
    100% {
        box-shadow: 0 18px 50px -30px rgba(27, 141, 255, 0.35);
    }
    50% {
        box-shadow: 0 18px 60px -26px rgba(89, 241, 255, 0.55);
    }
}

/* AI 匹配度条：模拟实时计算（0→70% 循环），45% / 70% 阈值刻度 */
.juytu-match-track {
    position: relative;
    height: 0.5rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.1);
}

.juytu-match-fill {
    height: 100%;
    width: 0;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--color-brand), var(--color-accent));
    animation: bueMatchCalc 4.5s ease-in-out infinite;
}

@keyframes bueMatchCalc {
    0%,
    12% {
        width: 0;
    }
    38%,
    68% {
        width: 70%;
    }
    92%,
    100% {
        width: 0;
    }
}

.juytu-match-mark {
    position: absolute;
    top: -0.35rem;
    transform: translateX(-50%);
    width: 2px;
    height: calc(100% + 0.7rem);
    background: rgba(255, 255, 255, 0.45);
}

.juytu-match-mark em {
    position: absolute;
    top: -1.15rem;
    left: 50%;
    transform: translateX(-50%);
    font-style: normal;
    font-size: 0.6rem;
    color: var(--color-secondary);
}

.juytu-match-mark--hot {
    background: var(--color-accent);
}

.juytu-match-mark--hot em {
    color: var(--color-accent);
    font-weight: 700;
}

/* 快速上手（QUICK START）：三步视频卡片 */
.juytu-quickstart {
    box-shadow: 0 20px 60px -40px rgba(0, 0, 0, 0.6);
}

.juytu-qs-card {
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 1.25rem;
    background: linear-gradient(180deg, rgba(112, 215, 255, 0.08), rgba(255, 255, 255, 0.03));
    box-shadow: 0 18px 50px -30px rgba(0, 0, 0, 0.5);
}

.juytu-qs-media {
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.25);
}

.juytu-qs-media video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.juytu-qs-body {
    padding: 1.25rem 1.5rem 1.5rem;
}

.juytu-qs-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2.25rem;
    height: 2.25rem;
    border: 1px solid rgba(27, 141, 255, 0.4);
    border-radius: 999px;
    background: rgba(27, 141, 255, 0.1);
    font-size: 0.8rem;
    font-weight: 800;
    color: var(--color-accent);
}

/* 02 卡向下箭头：识别通过 → 沉淀（桌面，落在行间 gap，与水平箭头同款） */
.juytu-loop-down {
    position: absolute;
    bottom: -1.3rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    font-size: 1.3rem;
    line-height: 1;
    color: var(--color-accent);
    text-shadow: 0 0 12px rgba(89, 241, 255, 0.6);
}

/* 01 卡向上箭头：深挖新客回流 → 回到搜索（桌面，落在行间 gap，回路语义，同款样式） */
.juytu-loop-up {
    position: absolute;
    bottom: -1.3rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    font-size: 1.3rem;
    line-height: 1;
    color: var(--color-accent);
    text-shadow: 0 0 12px rgba(89, 241, 255, 0.6);
}

@media (max-width: 63.999rem) {
    .juytu-loop-down,
    .juytu-loop-up {
        display: none;
    }
}

/* 闭环循环动画：三步依次点亮 + 箭头脉冲 + 循环图标旋转 */
.juytu-cycle-spin {
    display: inline-block;
    animation: bueSpin 6s linear infinite;
}

@keyframes bueSpin {
    to {
        transform: rotate(360deg);
    }
}

.juytu-cycle-step {
    font-weight: 700;
    color: var(--color-secondary);
    animation: bueCycleGlow 3s ease-in-out infinite;
}

.juytu-cycle-step:nth-of-type(1) {
    animation-delay: 0s;
}

.juytu-cycle-step:nth-of-type(3) {
    animation-delay: 1s;
}

.juytu-cycle-step:nth-of-type(5) {
    animation-delay: 2s;
}

@keyframes bueCycleGlow {
    0%,
    12% {
        color: var(--color-secondary);
    }
    16%,
    44% {
        color: var(--color-accent);
        text-shadow: 0 0 14px rgba(89, 241, 255, 0.55);
    }
    52%,
    100% {
        color: var(--color-secondary);
    }
}

.juytu-cycle-arrow {
    animation: bueArrowPulse 1.5s ease-in-out infinite;
    color: var(--color-accent);
}

@keyframes bueArrowPulse {
    0%,
    100% {
        opacity: 0.35;
    }
    50% {
        opacity: 1;
    }
}

/* ===== FAQ 区块（Accordion 定制：深浅背景自适应，圆角卡片 + 加号图标） =====
 * 说明：选择器带 .bue-accordion__item 提升特异性（> 组件 scoped (0,2,0)），确保覆盖生效；
 * 展开动画用 max-height 而非 grid 0fr→1fr（后者在部分内嵌浏览器渲染不完整，内容只显示一半）。 */
.juytu-faq {
    --faq-border: rgba(16, 23, 40, 0.14);
    --faq-bg: rgba(16, 23, 40, 0.035);
    --faq-icon-bg: rgba(16, 23, 40, 0.08);
    --faq-icon-on: rgba(27, 141, 255, 0.22);
}

.juytu-faq .bue-accordion__item {
    border: 1px solid var(--faq-border);
    border-radius: 1rem;
    margin-bottom: 0.75rem;
    overflow: hidden;
    background: var(--faq-bg);
    transition: border-color 0.3s ease;
}

.juytu-faq .bue-accordion__item.on {
    border-color: rgba(27, 141, 255, 0.45);
}

.juytu-faq .bue-accordion__item .bue-accordion__header {
    padding: 1.1rem 1.5rem;
    gap: 1rem;
}

/* max-height 展开动画（兼容所有内核，内容必完整显示） */
.juytu-faq .bue-accordion__item .bue-accordion__body {
    display: block;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease;
}

.juytu-faq .bue-accordion__item.on .bue-accordion__body {
    max-height: 500px;
}

.juytu-faq .bue-accordion__item .bue-accordion__content {
    overflow: visible;
    padding: 0 1.5rem 1.4rem;
}

/* 展开/收起加号图标（横竖线旋转 45°） */
.juytu-faq__icon {
    position: relative;
    width: 1.5rem;
    height: 1.5rem;
    flex: none;
    border-radius: 0.5rem;
    background: var(--faq-icon-bg);
    color: var(--color-secondary);
    transition: transform 0.3s ease, background 0.3s ease;
}

.juytu-faq__icon::before,
.juytu-faq__icon::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    background: currentColor;
    transform: translate(-50%, -50%);
}

.juytu-faq__icon::before {
    width: 0.7rem;
    height: 2px;
}

.juytu-faq__icon::after {
    width: 2px;
    height: 0.7rem;
}

.juytu-faq .bue-accordion__item.on .juytu-faq__icon {
    transform: rotate(45deg);
    background: var(--faq-icon-on);
    color: var(--color-accent);
}

/* 深色背景下的 FAQ（产品页 Dark section 内） */
.juytu-sec-dark .juytu-faq,
.juytu-sec-dark--red .juytu-faq,
.juytu-sec-dark--cyan .juytu-faq,
.juytu-sec-flat .juytu-faq,
[class*="bg-navy-"] .juytu-faq {
    --faq-border: rgba(255, 255, 255, 0.13);
    --faq-bg: rgba(255, 255, 255, 0.04);
    --faq-icon-bg: rgba(255, 255, 255, 0.09);
}