/* =========================================================
   Qeike 官网样式
   结构：1 设计变量 → 2 基础 → 3 通用组件 → 4 演示插画(Mock) → 5 各区块 → 6 响应式 → 7 减少动效
   ========================================================= */

/* ---------- 1. 设计变量 ---------- */
:root {
  --c-primary: #4F7CFF;
  --c-primary-hover: #3A63E0;
  --c-accent: #FF8A3D;
  --c-bg: #FFFFFF;
  --c-bg-alt: #F6F7FB;
  --c-bg-dark: #0F1222;
  --c-title: #111827;
  --c-text: #4B5563;
  --c-muted: #9CA3AF;
  --c-dark-title: #FFFFFF;
  --c-dark-text: #C7CBE0;
  --c-line: #E7E9F2;

  --fs-h1: 64px; --fs-h2: 44px; --fs-h3: 22px; --fs-body: 17px; --fs-small: 14px;
  --r-card: 20px; --r-btn: 12px; --r-pill: 999px;
  --sh-card: 0 8px 30px rgba(17,24,39,0.06);
  --sh-card-hover: 0 16px 40px rgba(17,24,39,0.12);
  --maxw: 1200px; --pad-x: 24px; --section-y: 120px;
  --font: "Inter", "Noto Sans SC", system-ui, -apple-system, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  --ease: cubic-bezier(.2,.7,.2,1);
}

/* ---------- 2. 基础 ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; font-family: var(--font); font-size: var(--fs-body); font-weight: 400; line-height: 1.6;
  color: var(--c-text); background: var(--c-bg); -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
h1, h2, h3, h4 { color: var(--c-title); font-weight: 700; margin: 0; letter-spacing: -0.01em; }
h1 { font-size: var(--fs-h1); line-height: 1.15; }
h2 { font-size: var(--fs-h2); line-height: 1.25; }
h3 { font-size: var(--fs-h3); line-height: 1.4; }
p { margin: 0; }
a { color: var(--c-primary); text-decoration: none; }
img, svg, video { display: block; max-width: 100%; }
button { font: inherit; color: inherit; cursor: pointer; }
ul { list-style: none; margin: 0; padding: 0; }
:focus-visible { outline: 3px solid rgba(79,124,255,.55); outline-offset: 3px; border-radius: 6px; }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: 16px; top: -60px; z-index: 200; background: var(--c-primary); color: #fff; padding: 10px 16px; border-radius: var(--r-btn); }
.skip-link:focus { top: 12px; }

/* 图标（Lucide，统一 2px 线性描边） */
.i { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.i-sm { width: 18px; height: 18px; }
.i-lg { width: 28px; height: 28px; }

/* ---------- 3. 通用组件 ---------- */
.container { width: 100%; max-width: calc(var(--maxw) + var(--pad-x) * 2); margin: 0 auto; padding: 0 var(--pad-x); }
.section { padding: var(--section-y) 0; position: relative; }
.section--alt { background: var(--c-bg-alt); }
.section--dark { background: var(--c-bg-dark); color: var(--c-dark-text); }
.section--dark h1, .section--dark h2, .section--dark h3 { color: var(--c-dark-title); }

.section-head { text-align: center; max-width: 760px; margin: 0 auto 64px; }
.section-head p { margin-top: 18px; font-size: 19px; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; margin-bottom: 18px;
  border-radius: var(--r-pill); background: rgba(79,124,255,.1); color: var(--c-primary);
  font-size: var(--fs-small); font-weight: 600;
}

/* 按钮 */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 14px 26px; border-radius: var(--r-btn); border: 0; font-weight: 600; font-size: 16px; line-height: 1.2;
  transition: transform .2s var(--ease), background-color .2s, box-shadow .2s, color .2s;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn--primary { background: var(--c-primary); color: #fff; box-shadow: 0 8px 24px rgba(79,124,255,.32); }
.btn--primary:hover { background: var(--c-primary-hover); box-shadow: 0 12px 28px rgba(58,99,224,.4); }
.btn--lg { padding: 18px 32px; font-size: 18px; border-radius: var(--r-btn); }
.btn--ghost { background: #fff; color: var(--c-title); box-shadow: inset 0 0 0 1px var(--c-line); }
.btn--ghost:hover { background: #F0F3FF; color: var(--c-primary-hover); box-shadow: inset 0 0 0 1px rgba(79,124,255,.4); }
.btn--sm { padding: 10px 18px; font-size: 15px; }
.win-logo { width: 20px; height: 20px; fill: currentColor; }
.mac-logo { width: 18px; height: 18px; fill: currentColor; }

/* 胶囊 / 标签 */
.pill { display: inline-flex; align-items: center; gap: 8px; border-radius: var(--r-pill); padding: 6px 14px; font-size: var(--fs-small); }
.tag-free {
  display: inline-flex; align-items: center; padding: 2px 10px; border-radius: var(--r-pill);
  background: var(--c-accent); color: #fff; font-size: 12px; font-weight: 700; line-height: 1.6; letter-spacing: .02em;
}
.download-meta { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px; margin-top: 16px; font-size: var(--fs-small); }
.os-note { margin-top: 8px; font-size: var(--fs-small); color: var(--c-muted); }
.os-note[hidden] { display: none; }

/* 卡片 */
.card {
  background: #fff; border-radius: var(--r-card); box-shadow: var(--sh-card);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--sh-card-hover); }
.link-more { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; font-size: 15px; transition: gap .2s, color .2s; }
.link-more:hover { gap: 8px; color: var(--c-primary-hover); }

/* 图标块 */
.icon-box {
  width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center;
  background: rgba(79,124,255,.1); color: var(--c-primary); flex: none;
}

/* 滚动淡入：位移 24px、0.6s、依次延迟 0.08s（延迟由 JS 写入 --d） */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s var(--ease), transform .6s var(--ease); transition-delay: var(--d, 0s); }
.reveal.is-in { opacity: 1; transform: none; }
.no-js .reveal { opacity: 1; transform: none; }

/* 占位说明角标：标出该位置需要替换的素材尺寸 */
.ph { position: relative; }
.ph-label {
  position: absolute; right: 12px; bottom: 12px; z-index: 5; pointer-events: none;
  padding: 3px 10px; border-radius: var(--r-pill); font: 500 11px/1.6 "Inter", monospace;
  color: rgba(17,24,39,.6); background: rgba(255,255,255,.78); backdrop-filter: blur(6px);
  box-shadow: 0 0 0 1px rgba(17,24,39,.06);
}
.ph-label--dark { color: rgba(255,255,255,.72); background: rgba(15,18,34,.6); box-shadow: 0 0 0 1px rgba(255,255,255,.1); }
.ph > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }

/* ---------- 4. 演示插画（CSS 模拟软件界面，替换为真实视频/截图前的占位） ---------- */
/* 4.1 软件窗口外框（Windows 风格标题栏） */
.mock-win {
  position: relative; border-radius: 16px; background: #fff; overflow: hidden;
  box-shadow: 0 0 0 1px rgba(17,24,39,.06), 0 24px 60px rgba(17,24,39,.12);
  display: flex; flex-direction: column;
}
.mock-bar { height: 34px; display: flex; align-items: center; gap: 10px; padding: 0 0 0 14px; background: #F3F4F8; border-bottom: 1px solid #E8EAF1; flex: none; }
.mock-bar__logo { width: 14px; height: 14px; }
.mock-bar__title { font: 600 12px/1 "Inter", sans-serif; color: #6B7280; }
.mock-bar__ctrls { margin-left: auto; display: flex; height: 100%; }
.mock-bar__ctrls i { width: 40px; height: 100%; position: relative; }
.mock-bar__ctrls i::before { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); }
.mock-bar__ctrls i:nth-child(1)::before { width: 10px; height: 1.5px; background: #6B7280; }
.mock-bar__ctrls i:nth-child(2)::before { width: 9px; height: 9px; border: 1.5px solid #6B7280; border-radius: 1px; }
.mock-bar__ctrls i:nth-child(3)::before { content: "×"; font: 400 16px/1 sans-serif; color: #6B7280; }
.mock-body { flex: 1; display: grid; grid-template-columns: 180px 1fr; min-height: 0; }
.mock-side { background: #F8F9FC; border-right: 1px solid #EDEFF5; padding: 14px 12px; display: flex; flex-direction: column; gap: 6px; overflow: hidden; }
.mock-side b { display: block; height: 9px; border-radius: 5px; background: #E2E5EE; }
.mock-side .ms-item { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 8px; }
.mock-side .ms-item::before { content: ""; width: 12px; height: 12px; border-radius: 4px; background: var(--dot, #CBD2E1); flex: none; }
.mock-side .ms-item b { flex: 1; }
.mock-side .ms-item.is-on { background: rgba(79,124,255,.12); }
.mock-side .ms-item.is-on b { background: rgba(79,124,255,.45); }
.mock-side .ms-gap { height: 10px; }
.mock-side .ms-head { width: 50%; height: 7px; background: #D5D9E4; margin: 4px 8px; }
.mock-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.mock-tool { height: 46px; display: flex; align-items: center; gap: 10px; padding: 0 16px; border-bottom: 1px solid #EFF1F6; flex: none; }
.mock-search { flex: 0 1 280px; height: 28px; border-radius: 8px; background: #F2F4F9; display: flex; align-items: center; gap: 8px; padding: 0 10px; color: #9CA3AF; font-size: 12px; }
.mock-search .i { width: 14px; height: 14px; }
.mock-tool .chip { height: 24px; width: 54px; border-radius: 999px; background: #F2F4F9; }
.mock-tool .chip.is-on { background: rgba(79,124,255,.16); }
.mock-tool .chip:last-child { margin-left: auto; width: 28px; }
.mock-grid { flex: 1; padding: 14px; overflow: hidden; position: relative; }

/* 4.2 瀑布流缩略图：渐变色块 + 抽象图形 */
.tiles { columns: 4 120px; column-gap: 10px; }
.tile {
  break-inside: avoid; margin-bottom: 10px; border-radius: 10px; position: relative; overflow: hidden;
  background: linear-gradient(var(--a, 160deg), var(--c1), var(--c2));
  height: var(--h, 120px);
  animation: tileIn .7s var(--ease) both; animation-delay: var(--td, 0s);
}
.tile::before { /* 抽象“画面”：圆形太阳 */
  content: ""; position: absolute; width: 34%; aspect-ratio: 1; border-radius: 50%;
  right: 14%; top: 16%; background: rgba(255,255,255,.55);
}
.tile::after { /* 抽象“画面”：山丘 */
  content: ""; position: absolute; left: -10%; right: -10%; bottom: -30%; height: 62%;
  background: rgba(255,255,255,.22); border-radius: 50% 50% 0 0;
}
.tile--b::before { left: 18%; right: auto; top: 22%; width: 26%; border-radius: 30%; transform: rotate(12deg); }
.tile--c::before { width: 60%; left: 20%; top: 20%; border-radius: 40% 60% 55% 45%; background: rgba(255,255,255,.35); }
.tile--c::after { display: none; }
@keyframes tileIn { from { opacity: 0; transform: translateY(12px) scale(.97); } to { opacity: 1; transform: none; } }
/* 字体 / 音频 / 视频 / GIF / 图标 等不同类型缩略图 */
.tile--font::before, .tile--font::after, .tile--audio::before, .tile--audio::after, .tile--icon::after { display: none; }
.tile--font { display: grid; place-items: center; color: rgba(255,255,255,.95); font: 700 34px/1 Georgia, "Times New Roman", serif; }
.tile--font:nth-child(3n) { font-family: "Inter", sans-serif; font-weight: 800; }
.tile--font:nth-child(3n+1) { font-family: "Courier New", monospace; }
.tile--audio { display: flex; align-items: center; justify-content: center; gap: 3px; padding: 0 14px; }
.tile--audio span { width: 3px; border-radius: 2px; background: rgba(255,255,255,.85); height: var(--bh, 40%); animation: eq 1.1s ease-in-out infinite alternate; animation-delay: var(--bd, 0s); }
@keyframes eq { from { transform: scaleY(.35); } to { transform: scaleY(1); } }
.tile--video .play, .tile--gif .gif-badge { position: absolute; z-index: 2; }
.tile--video .play { left: 50%; top: 50%; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; background: rgba(15,18,34,.55); display: grid; place-items: center; }
.tile--video .play::before { content: ""; border-left: 11px solid #fff; border-top: 7px solid transparent; border-bottom: 7px solid transparent; margin-left: 3px; }
.tile--video .dur { position: absolute; z-index: 2; right: 6px; bottom: 6px; font: 600 10px/1 "Inter", sans-serif; color: #fff; background: rgba(0,0,0,.45); padding: 3px 5px; border-radius: 4px; }
.tile--gif .gif-badge { left: 6px; top: 6px; font: 700 9px/1 "Inter", sans-serif; color: #fff; background: rgba(0,0,0,.4); padding: 3px 5px; border-radius: 4px; }
.tile--gif::before { animation: bob 1.6s ease-in-out infinite alternate; }
@keyframes bob { from { transform: translate(0,0) scale(1); } to { transform: translate(-30%, 40%) scale(1.25); } }
.tile--icon { display: grid; place-items: center; }
.tile--icon::before { position: static; width: 36%; background: rgba(255,255,255,.85); border-radius: 28%; }
.tile.is-selected { box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--c-primary); }

/* 4.3 模拟鼠标指针 */
.cursor { position: absolute; z-index: 6; width: 22px; height: 22px; pointer-events: none; filter: drop-shadow(0 2px 3px rgba(0,0,0,.25)); }
.cursor svg { width: 100%; height: 100%; }

/* 4.4 暂停：离开视口时暂停所有演示动画 */
.demo.is-paused, .demo.is-paused * { animation-play-state: paused !important; }

/* ---------- 5. 各区块 ---------- */
/* 5.1 顶部导航 */
.nav { position: fixed; inset: 0 0 auto 0; z-index: 100; transition: background-color .3s, box-shadow .3s, backdrop-filter .3s; }
.nav__inner { height: 72px; display: flex; align-items: center; gap: 32px; }
.logo { display: inline-flex; align-items: center; gap: 10px; color: #fff; font: 700 22px/1 "Inter", sans-serif; letter-spacing: -.02em; }
.logo picture, .logo__mark { display: block; width: 32px; height: 32px; flex: none; }
.nav__links { display: flex; gap: 6px; margin: 0 auto; }
.nav__links a { padding: 8px 14px; border-radius: 10px; color: var(--c-dark-text); font-size: 15px; font-weight: 500; transition: color .2s, background-color .2s; }
.nav__links a:hover { color: #fff; background: rgba(255,255,255,.08); }
.nav__cta { margin-left: 0; }
.nav__toggle { display: none; margin-left: auto; width: 44px; height: 44px; border-radius: 12px; border: 0; background: rgba(255,255,255,.08); color: #fff; place-items: center; }
.nav.is-scrolled { background: rgba(255,255,255,.72); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 1px 0 rgba(17,24,39,.08); }
.nav.is-scrolled .logo { color: var(--c-title); }
.nav.is-scrolled .nav__links a { color: var(--c-text); }
.nav.is-scrolled .nav__links a:hover { color: var(--c-primary); background: rgba(79,124,255,.08); }
.nav.is-scrolled .nav__toggle { background: #F2F4F9; color: var(--c-title); }
/* 手机端全屏下拉菜单 */
.mobile-menu {
  position: fixed; inset: 0; z-index: 99; background: rgba(255,255,255,.98); backdrop-filter: blur(12px);
  padding: 96px 24px 32px; display: flex; flex-direction: column; gap: 4px;
  transform: translateY(-100%); visibility: hidden; transition: transform .4s var(--ease), visibility .4s;
}
.mobile-menu.is-open { transform: none; visibility: visible; }
.mobile-menu a:not(.btn) { padding: 16px 4px; border-bottom: 1px solid var(--c-line); color: var(--c-title); font-size: 20px; font-weight: 600; display: flex; justify-content: space-between; align-items: center; }
.mobile-menu a:not(.btn) .i { color: var(--c-muted); }
.mobile-menu .btn { margin-top: 28px; }
body.menu-open { overflow: hidden; }
body.menu-open .nav { background: transparent; box-shadow: none; backdrop-filter: none; }
body.menu-open .nav .logo { color: var(--c-title); }
body.menu-open .nav .nav__toggle { background: #F2F4F9; color: var(--c-title); }

/* 5.2 首屏 */
.hero { position: relative; padding: 168px 0 0; overflow: hidden; text-align: center; }
.hero::before { /* 柔和光晕背景 */
  content: ""; position: absolute; inset: -20% -10% auto; height: 900px; pointer-events: none;
  background: radial-gradient(50% 45% at 50% 30%, rgba(79,124,255,.35), transparent 70%),
              radial-gradient(30% 30% at 80% 20%, rgba(255,138,61,.12), transparent 70%),
              radial-gradient(30% 30% at 18% 40%, rgba(124,92,255,.18), transparent 70%);
}
.hero .container { position: relative; }
.hero__badge { border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.06); color: #fff; margin-bottom: 28px; transition: background-color .2s, border-color .2s; }
.hero__badge:hover { background: rgba(255,255,255,.1); border-color: rgba(79,124,255,.6); }
.hero__badge .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c-primary); box-shadow: 0 0 0 4px rgba(79,124,255,.25); }
.hero__badge .i { width: 16px; height: 16px; color: var(--c-dark-text); }
.hero h1 { max-width: 900px; margin: 0 auto; }
.hero h1 .grad { display: inline-block; background: linear-gradient(90deg, #8FB0FF, #4F7CFF 55%, #A98BFF); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero__sub { text-wrap: balance; max-width: 720px; margin: 24px auto 0; font-size: 19px; color: var(--c-dark-text); }
.hero__cta { margin-top: 40px; }
.hero .download-meta { color: var(--c-dark-text); }
.hero .os-note { color: #8C91AD; }

/* 场景胶囊（可横向滚动） */
.scenes { margin: 72px auto 0; max-width: 1000px; position: relative; }
.scenes__track { display: flex; gap: 10px; overflow-x: auto; padding: 6px 24px; scrollbar-width: none; scroll-snap-type: x proximity; -webkit-mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent); mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent); }
.scenes__track::-webkit-scrollbar { display: none; }
.scene-pill {
  flex: none; scroll-snap-align: center; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.04);
  color: var(--c-dark-text); padding: 9px 18px; border-radius: var(--r-pill); font-size: 15px; font-weight: 500;
  transition: background-color .25s, color .25s, border-color .25s; position: relative; overflow: hidden;
}
.scene-pill:hover { color: #fff; border-color: rgba(255,255,255,.3); }
.scene-pill[aria-selected="true"] { background: var(--c-primary); border-color: var(--c-primary); color: #fff; box-shadow: 0 6px 20px rgba(79,124,255,.4); }
.scene-pill .prog { position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: rgba(255,255,255,.7); }
.scene-pill[aria-selected="true"] .prog { animation: prog 4s linear forwards; }
.scenes.is-hold .scene-pill .prog { animation-play-state: paused; }
@keyframes prog { to { width: 100%; } }

/* 首屏大展示图 */
.showcase { position: relative; max-width: 1120px; margin: 28px auto 0; padding: 0 0 0; }
.showcase::before { /* 光晕阴影 */
  content: ""; position: absolute; inset: 10% 6% -4%; border-radius: 40px; filter: blur(60px);
  background: linear-gradient(90deg, rgba(79,124,255,.55), rgba(140,110,255,.45), rgba(79,124,255,.4));
  opacity: .55;
}
.showcase .mock-win { aspect-ratio: 1200 / 720; border-radius: 16px 16px 0 0; box-shadow: 0 0 0 1px rgba(255,255,255,.1), 0 40px 120px rgba(0,0,0,.5); }
.showcase__stage { transition: opacity .35s var(--ease); }
.showcase__stage.is-fading { opacity: 0; }
.showcase .tiles { columns: 5 120px; }
.scene-title { display: flex; align-items: baseline; gap: 10px; margin: 0 0 12px; font: 700 15px/1.2 var(--font); color: var(--c-title); text-align: left; }
.scene-title small { font-weight: 400; color: var(--c-muted); font-size: 12px; }

/* 5.3 为什么选择 */
.why-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.why-card { overflow: hidden; display: flex; flex-direction: column; }
.why-card__demo { aspect-ratio: 4 / 3; background: var(--c-bg-alt); position: relative; overflow: hidden; }
.why-card__body { padding: 24px 24px 28px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.why-card__body p { font-size: 15px; flex: 1; }
.why-card__body h3 { display: flex; align-items: center; gap: 10px; }
.why-card__body h3 .i { color: var(--c-primary); }

/* 小演示：收藏（图片飞入收藏夹） */
.d-collect .src { position: absolute; left: 14%; top: 18%; width: 44%; height: 50%; border-radius: 12px; background: #fff; box-shadow: var(--sh-card); padding: 8px; }
.d-collect .src i { display: block; height: 100%; border-radius: 8px; background: linear-gradient(140deg, #FFC9A8, #FF8A3D); }
.d-collect .fly { position: absolute; left: calc(14% + 8px); top: calc(18% + 8px); width: calc(44% - 16px); height: calc(50% - 16px); border-radius: 8px; background: linear-gradient(140deg, #FFC9A8, #FF8A3D); animation: fly 3.2s var(--ease) infinite; }
.d-collect .box { position: absolute; right: 12%; bottom: 14%; width: 30%; aspect-ratio: 1; border-radius: 16px; background: var(--c-primary); display: grid; place-items: center; color: #fff; box-shadow: 0 10px 24px rgba(79,124,255,.35); animation: boxPulse 3.2s var(--ease) infinite; }
.d-collect .box .i { width: 40%; height: 40%; }
@keyframes fly { 0%,15% { transform: none; opacity: 1; } 55% { transform: translate(105%, 70%) scale(.3) rotate(8deg); opacity: 1; } 60%,100% { transform: translate(105%, 70%) scale(.1); opacity: 0; } }
@keyframes boxPulse { 0%,52% { transform: scale(1); } 60% { transform: scale(1.12); } 70%,100% { transform: scale(1); } }
/* 小演示：整理（色块按标签归位） */
.d-organize { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 16% 12% 12%; }
.d-organize .chipbar { position: absolute; left: 12%; top: 6%; display: flex; gap: 6px; }
.d-organize .chipbar span { height: 16px; border-radius: 999px; padding: 0 8px; font: 600 9px/16px var(--font); color: #fff; }
.d-organize .o { border-radius: 8px; animation: sort 4s var(--ease) infinite; }
@keyframes sort { 0%,20% { transform: translate(var(--x0,0), var(--y0,0)); } 50%,90% { transform: none; } 100% { transform: translate(var(--x0,0), var(--y0,0)); } }
/* 小演示：搜索 */
.d-search { padding: 12% 10%; }
.d-search .bar { height: 34px; border-radius: 10px; background: #fff; box-shadow: var(--sh-card); display: flex; align-items: center; gap: 8px; padding: 0 12px; font-size: 13px; color: var(--c-title); }
.d-search .bar .i { width: 15px; height: 15px; color: var(--c-primary); }
.d-search .typed { overflow: hidden; white-space: nowrap; border-right: 2px solid var(--c-primary); width: 0; animation: type 4s steps(4) infinite, caret .7s step-end infinite; }
@keyframes type { 0%,10% { width: 0; } 40%,85% { width: 4.2em; } 100% { width: 0; } }
@keyframes caret { 50% { border-color: transparent; } }
.d-search .res { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 14px; }
.d-search .res i { aspect-ratio: 1; border-radius: 8px; background: #DDE3F0; transition: none; animation: hit 4s var(--ease) infinite; }
.d-search .res i.hit { animation-name: hitOn; }
@keyframes hit { 0%,38% { opacity: 1; } 45%,88% { opacity: .18; } 100% { opacity: 1; } }
@keyframes hitOn { 0%,38% { box-shadow: none; } 45%,88% { box-shadow: 0 0 0 2px var(--c-primary); transform: scale(1.04); } 100% { box-shadow: none; } }
/* 小演示：浏览（瀑布流缓慢滚动） */
.d-browse .tiles { columns: 3; column-gap: 8px; padding: 10px; animation: scrollUp 12s linear infinite; }
.d-browse .tile { margin-bottom: 8px; border-radius: 8px; animation: none; }
@keyframes scrollUp { from { transform: translateY(0); } to { transform: translateY(-50%); } }

/* 5.4 收藏功能：左侧竖排标签 + 右侧大演示 */
.feature-tabs { display: grid; grid-template-columns: 360px 1fr; gap: 48px; align-items: center; }
.vtabs { display: flex; flex-direction: column; gap: 4px; }
.vtab {
  text-align: left; border: 0; background: transparent; padding: 18px 20px 18px 24px; border-radius: 14px; position: relative;
  transition: background-color .25s;
}
.vtab::before { content: ""; position: absolute; left: 0; top: 18px; bottom: 18px; width: 3px; border-radius: 3px; background: var(--c-line); transition: background-color .25s; }
.vtab:hover { background: rgba(79,124,255,.04); }
.vtab[aria-selected="true"] { background: #fff; box-shadow: var(--sh-card); }
.vtab[aria-selected="true"]::before { background: var(--c-primary); }
.vtab__title { display: flex; align-items: center; gap: 12px; font-size: 18px; font-weight: 600; color: var(--c-title); }
.vtab__title .i { color: var(--c-muted); transition: color .25s; }
.vtab[aria-selected="true"] .vtab__title .i { color: var(--c-primary); }
.vtab__desc { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s var(--ease); font-size: 15px; }
.vtab__desc > span { overflow: hidden; padding-left: 36px; }
.vtab[aria-selected="true"] .vtab__desc { grid-template-rows: 1fr; }
.vtab[aria-selected="true"] .vtab__desc > span { padding-top: 6px; }
.tab-stage { position: relative; aspect-ratio: 760 / 520; border-radius: 24px; background: linear-gradient(150deg, #EEF2FF, #F6F7FB 60%, #FFF3EA); overflow: hidden; }
.tab-panel { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .4s var(--ease), visibility .4s; }
.tab-panel.is-active { opacity: 1; visibility: visible; }
.tab-desc-mobile { display: none; }
.mini-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 72px; }
.mini-card { padding: 28px; display: flex; gap: 18px; align-items: flex-start; }
.mini-card h3 { font-size: 19px; margin-bottom: 6px; }
.mini-card p { font-size: 15px; }

/* 收藏演示 1：浏览器扩展 */
.browser { position: absolute; left: 8%; top: 9%; width: 84%; height: 82%; border-radius: 14px; background: #fff; box-shadow: 0 20px 50px rgba(17,24,39,.12); overflow: hidden; }
.browser__bar { height: 40px; background: #F3F4F8; display: flex; align-items: center; gap: 10px; padding: 0 12px; border-bottom: 1px solid #E8EAF1; }
.browser__bar .url { flex: 1; height: 24px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px #E5E7EF; display: flex; align-items: center; padding: 0 12px; font: 11px/1 "Inter", sans-serif; color: #9CA3AF; }
.browser__bar .ext { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; animation: extPing 5s var(--ease) infinite; }
.browser__bar .ext img { width: 22px; height: 22px; }
.browser__nav { display: flex; gap: 6px; }
.browser__nav i { width: 10px; height: 10px; border-radius: 50%; background: #D7DBE6; }
.browser__page { padding: 22px; display: grid; grid-template-columns: 1.3fr 1fr; gap: 18px; }
.browser__page .hero-img { height: 200px; border-radius: 12px; background: linear-gradient(135deg, #A5B8FF, #6C8DFF 60%, #FFB98A); position: relative; overflow: hidden; }
.browser__page .lines b { display: block; height: 10px; border-radius: 6px; background: #E6E9F2; margin-bottom: 10px; }
.browser__page .lines b:nth-child(1) { width: 80%; height: 16px; background: #D5DAE7; }
.browser__page .lines b:nth-child(4) { width: 60%; }
.save-pop { position: absolute; right: 16px; top: 48px; width: 210px; border-radius: 14px; background: #fff; box-shadow: 0 18px 40px rgba(17,24,39,.18); padding: 14px; font-size: 12px; color: var(--c-title); animation: popIn 5s var(--ease) infinite; transform-origin: top right; }
.save-pop .thumb { height: 74px; border-radius: 8px; background: linear-gradient(135deg, #A5B8FF, #6C8DFF 60%, #FFB98A); margin-bottom: 10px; }
.save-pop .row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; }
.save-pop .btn-mini { background: var(--c-primary); color: #fff; border-radius: 8px; padding: 6px 0; text-align: center; font-weight: 600; margin-top: 10px; animation: btnPress 5s var(--ease) infinite; }
.save-pop .done { position: absolute; inset: 0; border-radius: 14px; background: rgba(255,255,255,.96); display: grid; place-items: center; align-content: center; gap: 6px; font-weight: 600; color: var(--c-primary); animation: doneIn 5s var(--ease) infinite; }
.save-pop .done .i { width: 30px; height: 30px; }
.browser-logos { position: absolute; left: 8%; bottom: 3%; display: flex; gap: 8px; font: 600 11px/1 "Inter", sans-serif; color: var(--c-text); }
.browser-logos span { background: #fff; border-radius: 999px; padding: 5px 10px; box-shadow: var(--sh-card); }
@keyframes extPing { 0%,8% { box-shadow: 0 0 0 0 rgba(214,2,34,.45); } 18% { box-shadow: 0 0 0 8px rgba(214,2,34,0); } 100% { box-shadow: none; } }
@keyframes popIn { 0%,12% { opacity: 0; transform: scale(.9) translateY(-6px); } 20%,92% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes btnPress { 0%,44% { transform: none; } 48% { transform: scale(.95); } 52%,100% { transform: none; } }
@keyframes doneIn { 0%,52% { opacity: 0; } 58%,92% { opacity: 1; } 100% { opacity: 0; } }

/* 收藏演示 2：拖拽收藏 */
.drag-src { position: absolute; left: 6%; top: 14%; width: 34%; height: 66%; border-radius: 14px; background: #fff; box-shadow: var(--sh-card); padding: 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-content: start; }
.drag-src i { height: 64px; border-radius: 8px; }
.drag-dst { position: absolute; right: 6%; top: 10%; width: 50%; height: 74%; }
.drag-dst .mock-win { height: 100%; }
.drag-dst .mock-body { grid-template-columns: 70px 1fr; }
.drop-zone { position: absolute; inset: 44px 10px 10px 80px; border-radius: 10px; border: 2px dashed transparent; animation: dropZone 4.5s var(--ease) infinite; }
.drag-item { position: absolute; left: calc(6% + 14px); top: calc(14% + 14px); width: 15%; height: 64px; border-radius: 8px; z-index: 4; background: linear-gradient(140deg, #B8F0D9, #34C38F); box-shadow: 0 14px 30px rgba(17,24,39,.2); animation: dragMove 4.5s var(--ease) infinite; }
.drag-item + .cursor { left: calc(6% + 14px + 7%); top: calc(14% + 14px + 40px); animation: dragMove 4.5s var(--ease) infinite; }
@keyframes dragMove { 0%,10% { transform: none; opacity: 1; } 55% { transform: translate(310%, 30%) rotate(-4deg); opacity: 1; } 65% { transform: translate(310%, 30%) scale(.9); opacity: 0; } 100% { opacity: 0; transform: none; } }
@keyframes dropZone { 0%,25% { border-color: transparent; background: transparent; } 35%,55% { border-color: var(--c-primary); background: rgba(79,124,255,.08); } 65%,100% { border-color: transparent; background: transparent; } }
.drag-dst .new-tile { animation: newTile 4.5s var(--ease) infinite; }
@keyframes newTile { 0%,58% { opacity: 0; transform: scale(.6); } 70%,95% { opacity: 1; transform: none; } 100% { opacity: 0; } }

/* 收藏演示 3：批量收藏 */
.batch { position: absolute; left: 7%; top: 9%; width: 86%; height: 82%; border-radius: 16px; background: #fff; box-shadow: 0 20px 50px rgba(17,24,39,.12); padding: 18px; display: flex; flex-direction: column; gap: 14px; }
.batch__head { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--c-title); font-weight: 600; }
.batch__head .f { margin-left: auto; display: flex; gap: 6px; }
.batch__head .f span { padding: 4px 10px; border-radius: 999px; background: #F2F4F9; font-weight: 500; font-size: 11px; color: var(--c-text); }
.batch__head .f span.is-on { background: rgba(79,124,255,.14); color: var(--c-primary); }
.batch__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; flex: 1; }
.batch__grid i { border-radius: 10px; position: relative; }
.batch__grid i::after { content: ""; position: absolute; right: 6px; top: 6px; width: 16px; height: 16px; border-radius: 5px; background: rgba(255,255,255,.9); box-shadow: inset 0 0 0 1.5px #C9CFDD; animation: check 4s steps(1) infinite; animation-delay: var(--cd, 0s); }
@keyframes check { 0%,30% { background: rgba(255,255,255,.9) ; box-shadow: inset 0 0 0 1.5px #C9CFDD; } 31%,90% { background: var(--c-primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/12px no-repeat; box-shadow: none; } }
.batch__grid i.dim { opacity: .35; }
.batch__grid i.dim::after { display: none; }
.batch__foot { display: flex; align-items: center; justify-content: space-between; font-size: 12px; }
.batch__foot .btn-mini { background: var(--c-primary); color: #fff; padding: 7px 16px; border-radius: 8px; font-weight: 600; }

/* 收藏演示 4：高清下载 */
.hd { position: absolute; inset: 10% 8%; display: grid; grid-template-columns: 1fr 1.6fr; gap: 28px; align-items: center; }
.hd__small, .hd__big { border-radius: 14px; position: relative; overflow: hidden; }
.hd .pic { position: absolute; inset: 0; border-radius: inherit; }
.hd__small { aspect-ratio: 1; box-shadow: var(--sh-card); }
.hd__small .pic { background: linear-gradient(140deg, #C9D6FF, #8EA6FF); filter: blur(3px) saturate(.8); transform: scale(1.06); }
.hd__big { aspect-ratio: 4/3; box-shadow: 0 24px 50px rgba(79,124,255,.25); }
.hd__big .pic { background: linear-gradient(140deg, #A9BEFF, #4F7CFF 55%, #FFB27A); animation: hdSharp 4s var(--ease) infinite; }
.hd__big .pic::before { content: ""; position: absolute; width: 30%; aspect-ratio: 1; border-radius: 50%; right: 14%; top: 14%; background: rgba(255,255,255,.6); }
.hd__big .pic::after { content: ""; position: absolute; left: -10%; right: -10%; bottom: -30%; height: 60%; background: rgba(255,255,255,.25); border-radius: 50% 50% 0 0; }
.hd .badge { position: absolute; z-index: 2; left: 12px; bottom: 12px; padding: 4px 10px; border-radius: 999px; font: 600 11px/1.4 "Inter", sans-serif; background: rgba(15,18,34,.6); color: #fff; }
.hd .badge--hi { background: #fff; color: var(--c-primary); }
.hd__arrow { position: absolute; left: calc(38% - 4px); top: 50%; width: 36px; height: 36px; margin-top: -18px; border-radius: 50%; background: #fff; box-shadow: var(--sh-card); display: grid; place-items: center; color: var(--c-primary); z-index: 3; animation: nudge 1.6s ease-in-out infinite alternate; }
@keyframes hdSharp { 0%,15% { filter: blur(6px); transform: scale(.96); } 45%,100% { filter: none; transform: none; } }
@keyframes nudge { to { transform: translateX(6px); } }

/* 收藏演示 5：Alt + 右键 */
.alt { position: absolute; inset: 0; }
.alt .page { position: absolute; left: 8%; top: 10%; width: 62%; height: 78%; border-radius: 14px; background: #fff; box-shadow: var(--sh-card); padding: 18px; }
.alt .page .img { height: 70%; border-radius: 10px; background: linear-gradient(140deg, #FFD3B5, #FF8A3D 55%, #C063FF); }
.alt .page b { display: block; height: 9px; border-radius: 5px; background: #E6E9F2; margin-top: 12px; width: 70%; }
.alt .blocked { position: absolute; left: 22%; top: 30%; padding: 6px 12px; border-radius: 8px; background: rgba(15,18,34,.8); color: #fff; font-size: 12px; animation: blockMsg 6s var(--ease) infinite; }
.alt .ctx { position: absolute; left: 44%; top: 38%; width: 200px; border-radius: 12px; background: #fff; box-shadow: 0 18px 40px rgba(17,24,39,.18); padding: 6px; font-size: 12px; color: var(--c-title); animation: ctxIn 6s var(--ease) infinite; }
.alt .ctx div { padding: 8px 10px; border-radius: 8px; display: flex; align-items: center; gap: 8px; }
.alt .ctx div.is-on { background: rgba(79,124,255,.12); color: var(--c-primary); font-weight: 600; }
.alt .ctx .i { width: 14px; height: 14px; }
.keys { position: absolute; right: 7%; bottom: 14%; display: flex; align-items: center; gap: 10px; font: 600 14px/1 "Inter", sans-serif; color: var(--c-text); }
.key { min-width: 54px; height: 50px; padding: 0 14px; border-radius: 12px; background: #fff; display: grid; place-items: center; color: var(--c-title); box-shadow: 0 4px 0 #D9DEEA, 0 10px 20px rgba(17,24,39,.08); animation: keyDown 6s var(--ease) infinite; }
.mouse { width: 44px; height: 64px; border-radius: 22px; background: #fff; box-shadow: 0 10px 20px rgba(17,24,39,.08), inset 0 0 0 1.5px #D9DEEA; position: relative; overflow: hidden; }
.mouse::before { content: ""; position: absolute; left: 50%; top: 0; width: 50%; height: 40%; background: var(--c-primary); border-left: 1.5px solid #D9DEEA; animation: rClick 6s var(--ease) infinite; opacity: 0; }
.mouse::after { content: ""; position: absolute; left: 0; right: 0; top: 40%; height: 1.5px; background: #D9DEEA; }
@keyframes blockMsg { 0%,8% { opacity: 0; } 12%,30% { opacity: 1; } 34%,100% { opacity: 0; } }
@keyframes keyDown { 0%,36% { transform: none; box-shadow: 0 4px 0 #D9DEEA, 0 10px 20px rgba(17,24,39,.08); } 40%,90% { transform: translateY(3px); box-shadow: 0 1px 0 #D9DEEA, 0 6px 12px rgba(17,24,39,.08); background: #EEF2FF; color: var(--c-primary); } 100% { transform: none; } }
@keyframes rClick { 0%,44% { opacity: 0; } 46%,52% { opacity: 1; } 56%,100% { opacity: 0; } }
@keyframes ctxIn { 0%,50% { opacity: 0; transform: scale(.94); } 55%,92% { opacity: 1; transform: none; } 100% { opacity: 0; } }

/* 5.5 整理功能 */
.org-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.org-card { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.org-card__demo { height: 150px; background: linear-gradient(160deg, #F2F5FF, #FAFBFE); position: relative; overflow: hidden; display: grid; place-items: center; }
.org-card__body { padding: 22px 24px 26px; }
.org-card__body h3 { font-size: 19px; display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.org-card__body h3 .i { color: var(--c-primary); width: 20px; height: 20px; }
.org-card__body p { font-size: 15px; }
/* 迷你插画通用 */
.mm-tagrow { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; max-width: 80%; }
.mm-tag { padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 600; background: #fff; box-shadow: 0 2px 8px rgba(17,24,39,.08); color: var(--c-text); }
.mm-tag.pop { animation: tagPop 3s var(--ease) infinite; background: var(--c-primary); color: #fff; }
@keyframes tagPop { 0%,20% { opacity: 0; transform: scale(.6); } 35%,85% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.mm-tree { display: flex; flex-direction: column; gap: 6px; width: 64%; }
.mm-tree div { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--c-text); background: #fff; border-radius: 8px; padding: 5px 8px; box-shadow: 0 2px 8px rgba(17,24,39,.05); }
.mm-tree div .i { width: 13px; height: 13px; color: var(--c-primary); }
.mm-tree .l2 { margin-left: 18px; animation: treeIn 3.6s var(--ease) infinite; }
.mm-tree .l3 { margin-left: 36px; animation: treeIn 3.6s var(--ease) infinite .3s; }
@keyframes treeIn { 0%,15% { opacity: 0; transform: translateX(-8px); } 30%,90% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.mm-rules { width: 72%; display: flex; flex-direction: column; gap: 6px; }
.mm-rules div { font-size: 11px; background: #fff; border-radius: 8px; padding: 5px 10px; display: flex; justify-content: space-between; box-shadow: 0 2px 8px rgba(17,24,39,.05); }
.mm-rules em { font-style: normal; color: var(--c-primary); font-weight: 600; }
.mm-rules .sw { width: 12px; height: 12px; border-radius: 4px; background: #FF8A3D; display: inline-block; vertical-align: middle; }
.mm-mark { width: 62%; aspect-ratio: 4/3; border-radius: 10px; background: linear-gradient(140deg, #CFE0FF, #8FA9FF); position: relative; }
.mm-mark svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.mm-mark path { fill: none; stroke: #FF8A3D; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 220; stroke-dashoffset: 220; animation: draw 3.5s var(--ease) infinite; }
.mm-mark .note { position: absolute; right: -14%; top: -8%; background: #FFF4E5; color: #B85A12; font-size: 10px; padding: 4px 8px; border-radius: 8px; box-shadow: 0 4px 10px rgba(17,24,39,.08); animation: tagPop 3.5s var(--ease) infinite; }
@keyframes draw { 0%,10% { stroke-dashoffset: 220; } 50%,90% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 220; } }
.mm-batch { display: grid; grid-template-columns: repeat(4, 34px); gap: 6px; }
.mm-batch i { width: 34px; height: 34px; border-radius: 8px; background: #DCE3F5; animation: selAll 3s steps(1) infinite; animation-delay: var(--cd, 0s); }
@keyframes selAll { 0%,30% { box-shadow: none; } 31%,90% { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--c-primary); } }
.mm-dup { display: flex; gap: 14px; align-items: center; }
.mm-dup i { width: 54px; height: 54px; border-radius: 10px; background: linear-gradient(140deg, #FFD0B0, #FF8A3D); box-shadow: 0 4px 12px rgba(17,24,39,.08); }
.mm-dup i:nth-child(1) { animation: mergeL 3.4s var(--ease) infinite; }
.mm-dup i:nth-child(3) { animation: mergeR 3.4s var(--ease) infinite; }
.mm-dup .eq { font: 700 14px/1 "Inter"; color: var(--c-primary); animation: tagPop 3.4s infinite; }
@keyframes mergeL { 0%,40% { transform: none; } 70%,90% { transform: translateX(34px); } 100% { transform: none; } }
@keyframes mergeR { 0%,40% { transform: none; opacity: 1; } 70%,90% { transform: translateX(-34px); opacity: 0; } 100% { transform: none; opacity: 1; } }
.mm-stars { display: flex; gap: 6px; color: #D7DBE6; }
.mm-stars .i { width: 26px; height: 26px; animation: starOn 3s steps(1) infinite; animation-delay: var(--sd, 0s); }
@keyframes starOn { 0%,25% { color: #D7DBE6; fill: none; } 26%,90% { color: #FFB020; fill: #FFB020; } }
.mm-auto { display: flex; align-items: center; gap: 14px; }
.mm-auto .fold { width: 70px; height: 56px; border-radius: 10px; background: #fff; box-shadow: 0 4px 12px rgba(17,24,39,.08); display: grid; place-items: center; color: var(--c-primary); position: relative; }
.mm-auto .fold small { position: absolute; bottom: -10px; font-size: 9px; padding: 2px 6px; border-radius: 999px; background: var(--c-primary); color: #fff; }
.mm-auto .file { width: 34px; height: 34px; border-radius: 8px; background: linear-gradient(140deg, #B8F0D9, #34C38F); animation: autoIn 3.2s var(--ease) infinite; }
@keyframes autoIn { 0%,15% { transform: translateX(-30px); opacity: 0; } 30% { opacity: 1; } 60%,100% { transform: translateX(60px) scale(.5); opacity: 0; } }

/* 5.6 搜索功能 */
.search-layout { display: grid; grid-template-columns: 1.25fr 1fr; gap: 32px; align-items: center; }
.search-demo { border-radius: 24px; background: linear-gradient(150deg, #EEF2FF, #F6F7FB); padding: 28px; position: relative; overflow: hidden; height: 540px; display: flex; flex-direction: column; }
.search-demo .mock-win, .search-demo .mock-body, .search-demo .mock-main { min-height: 0; }
.search-demo .mock-win { flex: 1; }
.search-demo .mock-body { grid-template-columns: 1fr; }
.search-demo .mock-tool { height: 56px; }
.search-demo .mock-search { flex: 1 1 auto; max-width: none; height: 34px; font-size: 14px; color: var(--c-title); box-shadow: inset 0 0 0 1.5px var(--c-primary); background: #fff; }
.search-demo .mock-search .i { color: var(--c-primary); }
.search-demo .q::after { content: "|"; color: var(--c-primary); animation: caretBlink .8s step-end infinite; margin-left: 1px; }
@keyframes caretBlink { 50% { opacity: 0; } }
.search-demo .meta { font: 500 12px/1 "Inter", sans-serif; color: var(--c-muted); white-space: nowrap; }
.search-demo .meta b { color: var(--c-primary); }
.search-demo .tiles { columns: 4 100px; transition: opacity .25s; }
.search-demo .tiles.is-refresh { opacity: 0; }
.search-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.feat-card { padding: 28px; display: flex; flex-direction: column; gap: 12px; }
.feat-card h3 { font-size: 19px; }
.feat-card p { font-size: 15px; }

/* 5.7 浏览体验 */
.browse-demo { max-width: 1100px; margin: 0 auto; }
.pill-tabs { display: flex; justify-content: center; gap: 8px; margin-bottom: 28px; flex-wrap: wrap; }
.pill-tab { border: 0; background: #fff; color: var(--c-text); padding: 10px 22px; border-radius: var(--r-pill); font-weight: 600; font-size: 15px; display: inline-flex; gap: 8px; align-items: center; box-shadow: 0 0 0 1px var(--c-line); transition: all .2s; }
.pill-tab .i { width: 18px; height: 18px; }
.pill-tab:hover { color: var(--c-primary); }
.pill-tab[aria-selected="true"] { background: var(--c-primary); color: #fff; box-shadow: 0 8px 20px rgba(79,124,255,.3); }
.browse-stage { aspect-ratio: 1100 / 500; border-radius: 24px; position: relative; overflow: hidden; background: #fff; box-shadow: var(--sh-card); z-index: 0; isolation: isolate; }
.browse-stage .tab-panel { padding: 24px; }
.browse-stage .tiles { columns: 5 140px; column-gap: 14px; }
.browse-stage .tile { margin-bottom: 14px; animation: none; transition: transform .35s var(--ease), box-shadow .35s; }
.bp-img .tile.is-hover { transform: scale(1.05); box-shadow: 0 16px 30px rgba(17,24,39,.2); z-index: 2; }
.bp-video .tile.is-hover .scrub { position: absolute; left: 0; bottom: 0; height: 4px; background: var(--c-primary); z-index: 3; animation: scrub 3s linear infinite; }
@keyframes scrub { from { width: 0; } to { width: 100%; } }
.bp-video .tile.is-hover::before { animation: bob 1.4s ease-in-out infinite alternate; }
.audio-list { display: flex; flex-direction: column; gap: 12px; height: 100%; justify-content: center; }
.audio-row { display: grid; grid-template-columns: 44px 160px 1fr 60px; gap: 18px; align-items: center; padding: 12px 18px; border-radius: 14px; background: var(--c-bg-alt); font-size: 14px; color: var(--c-title); transition: background-color .3s, box-shadow .3s; }
.audio-row .pbtn { width: 40px; height: 40px; border-radius: 50%; background: #fff; display: grid; place-items: center; color: var(--c-primary); box-shadow: 0 2px 8px rgba(17,24,39,.08); }
.audio-row .pbtn .i { width: 16px; height: 16px; }
.audio-row small { display: block; color: var(--c-muted); font-size: 12px; }
.wave { display: flex; align-items: center; gap: 3px; height: 44px; }
.wave span { flex: 1; border-radius: 2px; background: #C9D3EC; height: var(--bh, 40%); }
.audio-row.is-hover { background: #fff; box-shadow: 0 10px 24px rgba(17,24,39,.08); }
.audio-row.is-hover .wave span { background: var(--c-primary); animation: eq .9s ease-in-out infinite alternate; animation-delay: var(--bd, 0s); }
.audio-row.is-hover .pbtn { background: var(--c-primary); color: #fff; }
.audio-row .time { font: 500 12px/1 "Inter"; color: var(--c-muted); text-align: right; }
.hover-cursor { transition: left .6s var(--ease), top .6s var(--ease); }
.browse-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 48px; }

/* 5.8 插件中心 */
.plugin-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.plugin-col { padding: 40px; display: flex; flex-direction: column; gap: 16px; align-items: flex-start; position: relative; overflow: hidden; }
.plugin-col p { flex: 1; }
.plugin-col .deco { position: absolute; right: -30px; top: -30px; width: 180px; height: 180px; border-radius: 40px; transform: rotate(18deg); background: linear-gradient(140deg, rgba(79,124,255,.12), rgba(79,124,255,0)); }
.plugin-col--dev .deco { background: linear-gradient(140deg, rgba(255,138,61,.14), rgba(255,138,61,0)); }
.code-snip { width: 100%; border-radius: 14px; background: var(--c-bg-dark); color: #C7CBE0; font: 13px/1.7 "JetBrains Mono", Consolas, "Courier New", monospace; padding: 16px 18px; overflow: hidden; white-space: pre; }
.code-snip .k { color: #8FB0FF; } .code-snip .s { color: #FFB27A; } .code-snip .c { color: #6B7194; }
.plugin-strip { display: flex; gap: 10px; flex-wrap: wrap; }
.plugin-strip span { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; color: #fff; }
.plugin-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 24px; }
.plugin-card { padding: 24px; display: flex; flex-direction: column; gap: 10px; }
.plugin-card .pi { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; color: #fff; margin-bottom: 6px; }
.plugin-card h3 { font-size: 18px; }
.plugin-card p { font-size: 15px; flex: 1; }
.plugin-card .dl { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--c-muted); padding-top: 12px; border-top: 1px solid var(--c-line); }
.plugin-card .dl .i { width: 14px; height: 14px; }

/* 5.9 更多功能 */
.more-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.more-item { padding: 24px; display: flex; gap: 16px; align-items: flex-start; }
.more-item h3 { font-size: 17px; }
.more-item p { font-size: 14px; color: var(--c-muted); margin-top: 2px; }
.more-item:last-child:nth-child(3n+1) { grid-column: 2; }

/* 5.10 用户评价：双行无限滚动 */
.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee + .marquee { margin-top: 24px; }
.marquee__track { display: flex; gap: 24px; width: max-content; animation: marquee 60s linear infinite; padding: 8px 0 16px; }
.marquee--rev .marquee__track { animation-direction: reverse; }
.marquee:hover .marquee__track, .marquee:focus-within .marquee__track { animation-play-state: paused; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(calc(-50% - 12px)); } }
.review { width: 360px; padding: 28px; flex: none; display: flex; flex-direction: column; gap: 16px; }
.review__who { display: flex; align-items: center; gap: 12px; }
.review__who img { width: 48px; height: 48px; border-radius: 50%; background: #E6EAF5; object-fit: cover; flex: none; }
.section-head p.review-note { margin-top: 12px; font-size: var(--fs-small); color: var(--c-muted); }
.review__who strong { display: block; color: var(--c-title); font-size: 16px; }
.review__who span { font-size: 13px; color: var(--c-muted); }
.review p { font-size: 15px; }
.review p b { color: var(--c-title); font-weight: 600; }
.review .i-quote { color: rgba(79,124,255,.25); width: 28px; height: 28px; }

/* 5.11 底部 CTA */
.cta { text-align: center; overflow: hidden; }
.cta::before { content: ""; position: absolute; inset: 0; background: radial-gradient(40% 60% at 50% 100%, rgba(79,124,255,.35), transparent 70%), radial-gradient(25% 40% at 85% 10%, rgba(255,138,61,.12), transparent 70%); pointer-events: none; }
.cta .container { position: relative; }
.cta h2 { max-width: 760px; margin: 0 auto; }
.cta p.sub { margin-top: 18px; font-size: 19px; }
.cta .btn { margin-top: 40px; }
.cta .download-meta { color: var(--c-dark-text); }
.cta .os-note { color: #8C91AD; }
.cta__float { position: absolute; width: 90px; height: 90px; border-radius: 22px; opacity: .5; animation: floaty 6s ease-in-out infinite alternate; }
@keyframes floaty { to { transform: translateY(-18px) rotate(6deg); } }

/* 5.12 页脚 */
.footer { background: #fff; padding: 80px 0 32px; border-top: 1px solid var(--c-line); }
.footer__grid { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 32px; }
.footer .logo { color: var(--c-title); }
.footer__brand p { margin-top: 16px; font-size: 14px; max-width: 260px; }
.footer h4 { font-size: 15px; margin-bottom: 16px; }
.footer ul { display: flex; flex-direction: column; gap: 10px; }
.footer ul a { color: var(--c-text); font-size: 14px; transition: color .2s; }
.footer ul a:hover { color: var(--c-primary); }
.footer .social { display: inline-flex; align-items: center; gap: 8px; }
.footer .si { width: 16px; height: 16px; fill: currentColor; flex: none; }
.footer__bottom { margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--c-line); display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; font-size: 14px; color: var(--c-muted); }
.lang { display: inline-flex; padding: 4px; border-radius: 999px; background: var(--c-bg-alt); gap: 2px; }
.lang a { padding: 5px 14px; border-radius: 999px; color: var(--c-text); font-size: 13px; }
.lang a[aria-current="true"] { background: #fff; color: var(--c-title); box-shadow: 0 1px 4px rgba(17,24,39,.08); font-weight: 600; }

/* ---------- 6. 响应式 ---------- */
/* 平板：768–1199px */
@media (max-width: 1199px) {
  :root { --fs-h1: 52px; --fs-h2: 38px; --section-y: 96px; }
  .nav__links { gap: 0; }
  .nav__links a { padding: 8px 10px; }
  .why-grid, .org-grid, .plugin-cards, .browse-cards { grid-template-columns: repeat(2, 1fr); }
  .feature-tabs { grid-template-columns: 300px 1fr; gap: 32px; }
  .search-layout { grid-template-columns: 1fr; }
  .search-demo { height: 480px; }
  .footer__grid { grid-template-columns: repeat(4, 1fr); }
  .footer__brand { grid-column: 1 / -1; }
  .mock-body { grid-template-columns: 140px 1fr; }
}
@media (max-width: 1023px) {
  .nav__links, .nav__cta { display: none; }
  .nav__toggle { display: grid; }
  .feature-tabs { grid-template-columns: 1fr; }
  .vtabs { flex-direction: row; overflow-x: auto; scrollbar-width: none; gap: 8px; padding: 4px 2px 8px; margin: 0 calc(var(--pad-x) * -1); padding-left: var(--pad-x); padding-right: var(--pad-x); }
  .vtabs::-webkit-scrollbar { display: none; }
  .vtab { flex: none; padding: 10px 18px; border-radius: 999px; background: #fff; box-shadow: 0 0 0 1px var(--c-line); }
  .vtab::before { display: none; }
  .vtab[aria-selected="true"] { background: var(--c-primary); box-shadow: 0 8px 20px rgba(79,124,255,.3); }
  .vtab[aria-selected="true"] .vtab__title, .vtab[aria-selected="true"] .vtab__title .i { color: #fff; }
  .vtab__title { font-size: 15px; gap: 8px; }
  .vtab__title .i { width: 18px; height: 18px; }
  .vtab__desc { display: none; }
  .tab-desc-mobile { display: block; text-align: center; font-size: 15px; margin: 4px 0 0; min-height: 3.2em; }
}
/* 手机：< 768px */
@media (max-width: 767px) {
  :root { --fs-h1: 36px; --fs-h2: 28px; --fs-h3: 20px; --fs-body: 16px; --section-y: 72px; }
  .nav__inner { height: 64px; }
  .hero { padding-top: 116px; }
  .hero__sub, .section-head p, .cta p.sub { font-size: 16px; }
  .section-head { margin-bottom: 40px; }
  .btn--lg { padding: 16px 24px; font-size: 16px; width: 100%; max-width: 360px; }
  .scenes { margin-top: 48px; }
  .scenes__track { padding: 6px 16px; }
  .scene-pill { font-size: 14px; padding: 8px 14px; }
  .showcase { margin-left: -8px; margin-right: -8px; }
  .showcase .mock-win { aspect-ratio: 4 / 5; }
  .mock-body, .drag-dst .mock-body { grid-template-columns: 1fr; }
  .mock-side { display: none; }
  .showcase .tiles { columns: 3 80px; }
  .mock-tool .chip:not(:last-child) { display: none; }
  .why-grid, .org-grid, .plugin-cards, .mini-cards, .plugin-cols { grid-template-columns: 1fr; }
  .more-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .more-item { flex-direction: column; padding: 18px; gap: 12px; }
  .more-item p { font-size: 13px; }
  .more-item:last-child:nth-child(3n+1) { grid-column: auto; }
  .search-cards, .browse-cards { grid-template-columns: 1fr 1fr; gap: 12px; }
  .search-cards .feat-card, .browse-cards .feat-card { padding: 18px; gap: 10px; }
  .search-cards .feat-card h3, .browse-cards .feat-card h3 { font-size: 16px; }
  .search-cards .feat-card p, .browse-cards .feat-card p { font-size: 13px; }
  .browse-cards { margin-top: 28px; }
  .pill-tabs { gap: 6px; flex-wrap: nowrap; }
  .pill-tab { padding: 8px 12px; gap: 6px; }
  .mini-cards { margin-top: 40px; gap: 16px; }
  .tab-stage { aspect-ratio: 4 / 3.6; border-radius: 18px; }
  .browser__page { grid-template-columns: 1fr; padding: 14px; }
  .browser__page .hero-img { height: 120px; }
  .browser__page .lines { display: none; }
  .save-pop { width: 160px; right: 8px; padding: 10px; }
  .save-pop .thumb { height: 50px; }
  .batch__grid { grid-template-columns: repeat(3, 1fr); }
  .batch__grid i:nth-child(n+10) { display: none; }
  .batch__head .f span:nth-child(n+3) { display: none; }
  .alt .ctx { width: 150px; left: 34%; }
  .keys { right: 5%; bottom: 6%; transform: scale(.8); transform-origin: right bottom; }
  .search-demo { padding: 14px; height: 420px; border-radius: 18px; }
  .search-demo .tiles { columns: 3 70px; }
  .search-demo .meta { display: none; }
  .browse-stage { aspect-ratio: 5 / 4; border-radius: 18px; }
  .browse-stage .tab-panel { padding: 14px; }
  .browse-stage .tiles { columns: 2; column-gap: 10px; }
  .browse-stage .tile { margin-bottom: 10px; }
  .audio-row { grid-template-columns: 40px 1fr 44px; gap: 10px; padding: 10px 12px; }
  .audio-row .wave { grid-column: 1 / -1; height: 28px; order: 4; }
  .pill-tab { font-size: 14px; }
  .plugin-col { padding: 28px; }
  .review { width: 290px; padding: 22px; }
  .footer__grid { grid-template-columns: repeat(2, 1fr); gap: 32px 16px; }
  .footer__bottom { flex-direction: column-reverse; align-items: flex-start; }
  .hd { grid-template-columns: 1fr 1.4fr; gap: 18px; inset: 14% 6%; }
}

/* ---------- 7. 减少动效 ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0s !important; }
  .reveal { opacity: 1; transform: none; }
  .marquee__track { animation: none; }
  .marquee { overflow-x: auto; }
}

/* --- layout fix only: 8 overview cards + WP is-layout-flow --- */
/* WP is-layout-flow sets display:block and breaks .why-grid / .why-card */
.why-grid.wp-block-group,
.why-grid.wp-block-group-is-layout-flow,
.why-grid.is-layout-flow {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  align-items: stretch;
}
.why-grid--8.wp-block-group,
.why-grid--8.wp-block-group-is-layout-flow,
.why-grid--8.is-layout-flow,
.why-grid--8 {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 24px !important;
  align-items: stretch;
}
.why-card.wp-block-group,
.why-card.wp-block-group-is-layout-flow,
.why-card.is-layout-flow {
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden;
  min-width: 0;
  height: 100%;
}
.why-card__body.wp-block-group,
.why-card__body.wp-block-group-is-layout-flow,
.why-card__body.is-layout-flow {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px;
  flex: 1 1 auto;
  padding: 24px 24px 28px;
  min-width: 0;
}
@media (max-width: 1080px) {
  .why-grid.wp-block-group,
  .why-grid.wp-block-group-is-layout-flow,
  .why-grid--8.wp-block-group,
  .why-grid--8 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 640px) {
  .why-grid.wp-block-group,
  .why-grid.wp-block-group-is-layout-flow,
  .why-grid--8.wp-block-group,
  .why-grid--8 { grid-template-columns: 1fr !important; }
}