/* PhotoCull 官网 — 与真实软件 (Linear/Raycast 浅色 + 电光紫) 视觉统一 */

* { box-sizing: border-box; }

:root {
  /* 沿用 PhotoCull 软件本身的色板 */
  --bg: #FAFAF9;
  --bg-elev: #FFFFFF;
  --bg-sunken: #F4F4F2;
  --bg-hover: #F0F0EE;
  --border: #E8E8E5;
  --border-strong: #D6D6D2;
  --border-subtle: #EFEFEC;

  --fg: #18181B;
  --fg-2: #52525B;
  --fg-3: #8B8B92;
  --fg-4: #B4B4B8;

  --accent: #5E47F5;
  --accent-hover: #4F38E8;
  --accent-soft: #EEEAFE;
  --accent-fg: #3B22B8;

  --blink: #DB2777;
  --overexp: #EA580C;
  --underexp: #4F46E5;
  --blur: #0891B2;
  --success: #00875A;

  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif;
  --font-display: "Inter Tight", "Inter", sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", monospace;

  --max: 1180px;
  --shadow-sm: 0 1px 3px rgba(0,0,0,.05), 0 1px 2px rgba(0,0,0,.03);
  --shadow-md: 0 4px 12px rgba(0,0,0,.06), 0 1px 3px rgba(0,0,0,.04);
  --shadow-lg: 0 12px 32px rgba(0,0,0,.10), 0 2px 6px rgba(0,0,0,.04);
  --shadow-xl: 0 28px 70px rgba(40,30,80,.18), 0 6px 16px rgba(40,30,80,.06);
}

html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--fg);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: 0; background: 0; color: inherit; }

/* 背景柔光（米白 + 紫晕） */
.site-bg {
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(900px 500px at 50% -100px, rgba(94,71,245,.10), transparent 60%),
    radial-gradient(700px 600px at 90% 20%, rgba(236,72,153,.06), transparent 60%);
}

.site-wrap { position: relative; z-index: 1; }
.container { max-width: var(--max); margin: 0 auto; padding: 0 28px; }

/* ============ Nav ============ */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(250,250,249,0.78);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 0.5px solid transparent;
  transition: border-color .2s, background .2s;
}
.nav.is-scrolled { border-bottom-color: var(--border); }
.nav-inner {
  height: 60px;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 28px;
  display: flex;
  align-items: center;
  gap: 32px;
}
.nav-brand {
  display: flex; align-items: center; gap: 9px;
  font: 700 15px/1 var(--font-display);
  letter-spacing: -0.01em;
}
.nav-mark {
  width: 26px; height: 26px;
  border-radius: 7px;
  background: linear-gradient(135deg, #5e47f5, #8b5cf6 55%, #ec4899);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 10px rgba(94,71,245,.30), inset 0 1px 0 rgba(255,255,255,.4);
}
.nav-links { display: flex; gap: 4px; flex: 1; margin-right: 24px; }
.nav-links a {
  padding: 8px 12px;
  font: 500 13px/1 var(--font-sans);
  color: var(--fg-2);
  border-radius: 6px;
  transition: all .15s;
}
.nav-links a:hover { color: var(--fg); background: var(--bg-hover); }
.nav-cta {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px;
  font: 600 12.5px/1 var(--font-sans);
  background: #1a1a1d;
  color: #fff;
  border-radius: 7px;
  box-shadow: 0 1px 0 rgba(255,255,255,.1) inset, 0 1px 3px rgba(0,0,0,.15);
  transition: all .15s;
}
.nav-cta:hover { background: #000; transform: translateY(-1px); }

/* ============ Hero ============ */
.hero {
  padding: 64px 0 40px;
  text-align: center;
}
.hero-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px 5px 7px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 999px;
  font: 500 11.5px/1 var(--font-mono);
  color: var(--fg-2);
  margin-bottom: 22px;
  box-shadow: var(--shadow-sm);
}
.hero-badge-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px rgba(94,71,245,.18);
}
.hero h1 {
  font-family: var(--font-display);
  font-size: clamp(40px, 6vw, 68px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.035em;
  margin: 0 0 18px;
  color: var(--fg);
}
.hero h1 em {
  font-style: normal;
  background: linear-gradient(120deg, #5e47f5 0%, #8b5cf6 50%, #ec4899 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero-sub {
  font-size: 18px;
  color: var(--fg-2);
  max-width: 580px;
  margin: 0 auto 28px;
  line-height: 1.55;
  text-wrap: pretty;
}
.hero-cta {
  display: inline-flex; gap: 10px;
  align-items: center;
  margin-bottom: 18px;
}
  margin-bottom: 14px;
}
.btn-primary {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 22px;
  font: 600 14px/1 var(--font-sans);
  background: linear-gradient(180deg, #6b54f7, #5e47f5);
  color: #fff;
  border-radius: 9px;
  box-shadow:
    0 0 0 0.5px rgba(94,71,245,.5),
    0 1px 0 rgba(255,255,255,.25) inset,
    0 -1px 0 rgba(0,0,0,.15) inset,
    0 6px 16px rgba(94,71,245,.30);
  transition: all .15s;
}
.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow:
    0 0 0 0.5px rgba(94,71,245,.5),
    0 1px 0 rgba(255,255,255,.25) inset,
    0 -1px 0 rgba(0,0,0,.15) inset,
    0 10px 24px rgba(94,71,245,.40);
}
.btn-secondary {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 12px 18px;
  font: 600 14px/1 var(--font-sans);
  background: var(--bg-elev);
  color: var(--fg);
  border-radius: 9px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  transition: all .15s;
}
.btn-secondary:hover { border-color: var(--border-strong); transform: translateY(-1px); }

.hero-meta {
  font: 500 12px/1 var(--font-mono);
  color: var(--fg-3);
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: 4px;
}
.hero-meta-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--fg-4); }

/* ============ App Frame (真实软件截图) ============ */
.app-shot {
  position: relative;
  margin: 48px auto 0;
  max-width: 1140px;
  padding: 0 8px;
}
.app-shot-glow {
  position: absolute;
  inset: 20px 60px -40px;
  background: radial-gradient(ellipse at 50% 50%, rgba(94,71,245,.30), transparent 65%);
  filter: blur(60px);
  z-index: 0;
}
.app-frame {
  position: relative; z-index: 1;
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--border);
  box-shadow:
    0 0 0 0.5px rgba(0,0,0,.05),
    0 1px 0 rgba(255,255,255,.8) inset,
    0 30px 80px rgba(40,30,80,.20),
    0 8px 20px rgba(40,30,80,.08);
}
.app-frame-bar {
  height: 32px;
  background: #ECECE9;
  border-bottom: 0.5px solid #d8d8d3;
  display: flex; align-items: center;
  padding: 0 14px;
  gap: 8px;
}
.app-frame-traffic {
  width: 12px; height: 12px;
  border-radius: 50%;
  position: relative;
}
.app-frame-traffic::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: 50%;
  box-shadow: inset 0 0 0 .5px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.4);
}
.app-frame-traffic--c { background: #ff5f57; }
.app-frame-traffic--m { background: #febc2e; }
.app-frame-traffic--x { background: #28c840; }
.app-frame-title {
  flex: 1;
  text-align: center;
  font: 500 11.5px/1 var(--font-sans);
  color: #6b6b66;
  margin-right: 50px;
}
.app-frame-iframe {
  width: 100%;
  height: 680px;
  border: 0;
  display: block;
  background: var(--bg);
}

/* ============ App 截图 / 跑马灯 ============ */
.app-frame-content {
  width: 100%;
  height: 680px;
  background: var(--bg);
  overflow: hidden;
  position: relative;
}
.app-carousel {
  position: relative;
  width: 100%;
  height: 100%;
}
.app-carousel-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
  opacity: 0;
  transition: opacity 600ms ease-in-out;
  pointer-events: none;
}
.app-carousel-slide.is-active {
  opacity: 1;
  pointer-events: auto;
}
.app-frame-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}

/* 跑马灯指示点 — 跟着 .app-shot 一起出现在 frame 下方 */
.app-carousel-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 16px 0 4px;
}
.app-carousel-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--border-strong);
  cursor: pointer;
  transition: all 200ms ease;
}
.app-carousel-dot:hover { background: var(--fg-tertiary); }
.app-carousel-dot.is-active {
  background: var(--accent);
  transform: scale(1.3);
}
.app-preview-placeholder {
  display: grid;
  grid-template-columns: 220px 1fr;
  height: 100%;
  background: var(--bg);
  font-family: var(--font-sans);
}
.app-preview-sidebar {
  border-right: 1px solid var(--border);
  padding: 16px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: var(--bg-sunken);
}
.app-preview-row {
  padding: 8px 10px;
  font-size: 12px;
  color: var(--fg-secondary);
  border-radius: 8px;
  display: flex;
  justify-content: space-between;
}
.app-preview-row.is-active {
  background: var(--accent-soft);
  color: var(--accent-fg);
  font-weight: 600;
}
.app-preview-row.is-reject {
  color: var(--danger);
  font-weight: 500;
}
.app-preview-row-sep {
  height: 1px;
  background: var(--border);
  margin: 8px 4px;
}
.app-preview-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  padding: 16px;
  align-content: start;
  overflow: hidden;
}
.app-preview-tile {
  aspect-ratio: 4 / 3;
  border-radius: 8px;
  border: 1px solid var(--border-subtle);
}
.app-preview-tile.tile-0 { background: linear-gradient(135deg, #f5d5b5, #e8a878); }
.app-preview-tile.tile-1 { background: linear-gradient(135deg, #b5d5f5, #7898d8); }
.app-preview-tile.tile-2 { background: linear-gradient(135deg, #d5e5b5, #98c878); }
.app-preview-tile.tile-3 { background: linear-gradient(135deg, #f5b5d5, #d878a8); border-color: var(--danger); opacity: 0.8; }
.app-preview-tile.tile-4 { background: linear-gradient(135deg, #e5d5f5, #a898d8); }

/* ============ 静态软件截图 — 检测结果界面 ============ */
.app-shot-body {
  display: grid;
  grid-template-columns: 200px 1fr;
  height: 540px;
  background: var(--bg);
}
.app-shot-side {
  background: var(--bg-sunken);
  border-right: 1px solid var(--border);
  padding: 14px 10px;
  overflow: hidden;
}
.app-shot-side-h {
  font: 600 10px/1 var(--font-mono);
  color: var(--fg-3);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 6px 8px;
  margin-bottom: 4px;
}
.app-shot-side-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  font: 500 12.5px/1 var(--font-sans);
  color: var(--fg);
  border-radius: 6px;
  margin-bottom: 1px;
}
.app-shot-side-item.is-active {
  background: var(--accent-soft);
  color: var(--accent-fg);
}
.app-shot-side-item b {
  margin-left: auto;
  font: 500 11px/1 var(--font-mono);
  color: var(--fg-3);
}
.app-shot-side-item.is-active b { color: var(--accent-fg); }
.app-shot-side-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.app-shot-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.app-shot-toolbar {
  height: 44px;
  border-bottom: 1px solid var(--border);
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg-elev);
}
.app-shot-tabs {
  display: flex;
  gap: 2px;
}
.app-shot-tabs span {
  padding: 6px 12px;
  font: 500 12px/1 var(--font-sans);
  color: var(--fg-3);
  border-radius: 5px;
}
.app-shot-tabs span.is-active {
  background: var(--bg-sunken);
  color: var(--fg);
  font-weight: 600;
}
.app-shot-stats {
  display: flex;
  align-items: center;
  gap: 10px;
  font: 500 11.5px/1 var(--font-mono);
  color: var(--fg-3);
}
.app-shot-stats b { color: var(--fg); font-weight: 700; }
.app-shot-stats .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--fg-4); }
.app-shot-grid {
  flex: 1;
  padding: 14px;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
  overflow: hidden;
  background: var(--bg-sunken);
}
.app-shot-card {
  position: relative;
  aspect-ratio: 4/3;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid var(--border);
}
.app-shot-tag {
  position: absolute;
  top: 6px; left: 6px;
  padding: 2px 5px;
  font: 700 9px/1 var(--font-mono);
  border-radius: 3px;
}
.app-shot-score {
  position: absolute;
  bottom: 6px; right: 6px;
  padding: 2px 5px;
  font: 600 10px/1 var(--font-mono);
  background: rgba(0,0,0,.55);
  color: #fff;
  border-radius: 3px;
}

/* ============ 下载弹窗 ============ */
.dl-modal-mask {
  position: fixed; inset: 0;
  background: rgba(20,20,22,.55);
  backdrop-filter: blur(6px);
  z-index: 100;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  animation: dl-mask-in .2s ease;
}
@keyframes dl-mask-in { from { opacity: 0; } to { opacity: 1; } }
.dl-modal {
  position: relative;
  width: 100%;
  max-width: 520px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 32px 28px 26px;
  box-shadow: var(--shadow-xl);
  animation: dl-pop-in .25s cubic-bezier(.4,0,.2,1);
}
@keyframes dl-pop-in {
  from { opacity: 0; transform: translateY(10px) scale(.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.dl-modal-close {
  position: absolute;
  top: 14px; right: 14px;
  width: 28px; height: 28px;
  border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  color: var(--fg-3);
  transition: all .15s;
}
.dl-modal-close:hover { background: var(--bg-hover); color: var(--fg); }
.dl-modal-head {
  text-align: center;
  margin-bottom: 22px;
}
.dl-modal-title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 4px;
}
.dl-modal-sub {
  font-size: 12.5px;
  color: var(--fg-3);
  margin: 0;
}

/* ============ Section base ============ */
section { padding: 70px 0; position: relative; }
.section-eyebrow {
  display: inline-block;
  font: 600 11px/1 var(--font-mono);
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 14px;
}
.section-title {
  font-family: var(--font-display);
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.025em;
  margin: 0 0 10px;
  text-wrap: balance;
}
.section-sub {
  font-size: 17px;
  color: var(--fg-2);
  max-width: 620px;
  margin: 0;
  text-wrap: pretty;
}
.section-head { margin-bottom: 36px; max-width: 720px; }
.section-head--center { margin-left: auto; margin-right: auto; text-align: center; }

/* ============ Stats strip — 紧凑 ============ */
.stats {
  padding: 22px 0;
  background: var(--bg-elev);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
}
.stat {
  text-align: center;
  padding: 4px 8px;
  border-right: 1px solid var(--border);
}
.stat:last-child { border-right: 0; }
.stat-num {
  font: 800 30px/1 var(--font-display);
  color: var(--fg);
  letter-spacing: -0.02em;
  margin-bottom: 6px;
  font-variant-numeric: tabular-nums;
}
.stat-num em {
  font-style: normal;
  background: linear-gradient(120deg, #5e47f5, #ec4899);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.stat-num-unit {
  font: 600 16px/1 var(--font-sans);
  color: var(--fg-3);
  margin-left: 2px;
}
.hero-meta-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 7px;
  background: var(--accent-soft);
  color: var(--accent-fg);
  border-radius: 4px;
  font: 700 10px/1 var(--font-mono);
  letter-spacing: 0.04em;
}
.stat-label {
  font: 500 11.5px/1.4 var(--font-sans);
  color: var(--fg-3);
}

/* ============ Features ============ */
.features-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
@media (max-width: 1100px) {
  .features-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; }
}
.feature {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 24px;
  transition: all .25s;
  position: relative;
  overflow: hidden;
}
.feature:hover {
  border-color: var(--border-strong);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.feature-demo {
  height: 160px;
  margin: -24px -24px 20px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-sunken);
  position: relative;
  overflow: hidden;
}
.feature-name {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 6px;
}
.feature-name b {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
  margin-left: 8px;
  vertical-align: middle;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.feature-name--blink b { background: #FCE7F3; color: #BE185D; }
.feature-name--exp b { background: #FFEDD5; color: #C2410C; }
.feature-name--blur b { background: #CFFAFE; color: #0E7490; }
.feature-name--dup b { background: #DCFCE7; color: #15803D; }
.feature-desc {
  font-size: 13.5px;
  color: var(--fg-2);
  margin: 0;
  line-height: 1.55;
}

/* —— Demo: 眨眼 —— */
.demo-blink {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  background:
    radial-gradient(circle at 50% 50%, rgba(219,39,119,.08), transparent 70%),
    var(--bg-sunken);
}
.demo-face {
  width: 110px; height: 110px;
  border-radius: 50%;
  background: linear-gradient(180deg, #fce7f3, #fbcfe8);
  position: relative;
  box-shadow: inset 0 -10px 20px rgba(190,24,93,.06);
}
.demo-eye {
  position: absolute;
  top: 38%;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: #5e47f5;
  transition: all .35s cubic-bezier(.4,0,.2,1);
}
.demo-eye--l { left: 24%; }
.demo-eye--r { right: 24%; }
.demo-blink-box {
  position: absolute;
  inset: -10px;
  border: 2px dashed var(--blink);
  border-radius: 16px;
  opacity: 0;
  animation: demo-blink-frame 3s ease-in-out infinite;
}
@keyframes demo-blink-frame {
  0%, 30% { opacity: 0; transform: scale(.95); }
  40%, 70% { opacity: 1; transform: scale(1); }
  80%, 100% { opacity: 0; transform: scale(1.05); }
}
.demo-face .demo-eye {
  animation: demo-blink-eye 3s ease-in-out infinite;
}
@keyframes demo-blink-eye {
  0%, 30% { height: 16px; }
  40%, 70% { height: 2px; }
  80%, 100% { height: 16px; }
}

/* —— Demo: 曝光 —— */
.demo-exp {
  height: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--border);
}
.demo-exp-cell {
  position: relative;
  overflow: hidden;
  display: flex; align-items: flex-end;
  padding: 8px;
  font: 600 10px/1 var(--font-mono);
  color: rgba(255,255,255,.85);
}
.demo-exp-cell--over {
  background: linear-gradient(135deg, #fef3c7, #fed7aa, #fff 80%);
}
.demo-exp-cell--over::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(circle at 60% 40%, rgba(255,255,255,.95) 0%, transparent 50%);
  animation: demo-exp-pulse 2.4s ease-in-out infinite;
}
.demo-exp-cell--over .demo-exp-tag { color: #C2410C; }
.demo-exp-cell--under {
  background: linear-gradient(135deg, #1e1b4b, #312e81, #4338ca 80%);
}
.demo-exp-cell--under::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(circle at 30% 60%, rgba(0,0,0,.6) 0%, transparent 50%);
  animation: demo-exp-pulse 2.4s ease-in-out infinite reverse;
}
.demo-exp-tag {
  position: relative;
  z-index: 1;
  padding: 2px 5px;
  background: rgba(255,255,255,.85);
  border-radius: 3px;
}
@keyframes demo-exp-pulse {
  0%, 100% { opacity: .9; }
  50% { opacity: 1; }
}

/* —— Demo: 模糊 —— */
.demo-blur {
  height: 100%;
  position: relative;
  background:
    repeating-linear-gradient(45deg, #cffafe 0 14px, #a5f3fc 14px 28px);
  overflow: hidden;
}
.demo-blur::before {
  content: '';
  position: absolute;
  inset: 0;
  background: inherit;
  filter: blur(8px);
  animation: demo-blur-anim 3s ease-in-out infinite;
}
@keyframes demo-blur-anim {
  0%, 100% { filter: blur(0); }
  50% { filter: blur(10px); }
}
.demo-blur-hot {
  position: absolute;
  top: 35%; left: 40%;
  width: 60px; height: 60px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(8,145,178,.6), transparent 70%);
  animation: demo-blur-hot 3s ease-in-out infinite;
  z-index: 1;
}
@keyframes demo-blur-hot {
  0%, 100% { transform: scale(.7); opacity: .4; }
  50% { transform: scale(1.2); opacity: .9; }
}

/* —— Demo: 重复检测 —— */
/* 三张缩略图叠在一起，模拟连拍/重复组；最上面的高亮是「保留」，下面两张半透明是「待清理」 */
.demo-dup {
  height: 100%;
  position: relative;
  background: linear-gradient(135deg, #ECFDF5 0%, #DCFCE7 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.demo-dup-tile {
  position: absolute;
  width: 78px;
  height: 60px;
  border-radius: 6px;
  background: linear-gradient(135deg, #86efac, #4ade80);
  border: 2px solid #fff;
  box-shadow: 0 2px 6px rgba(21,128,61,.15);
}
.demo-dup-tile--3 {
  transform: rotate(-9deg) translate(-22px, 8px);
  opacity: .35;
  animation: demo-dup-fade 3s ease-in-out infinite;
}
.demo-dup-tile--2 {
  transform: rotate(-3deg) translate(-10px, 4px);
  opacity: .55;
  animation: demo-dup-fade 3s ease-in-out infinite;
  animation-delay: .15s;
}
.demo-dup-tile--1 {
  transform: rotate(2deg) translate(2px, -2px);
  z-index: 2;
  background: linear-gradient(135deg, #22c55e, #15803D);
  box-shadow: 0 4px 12px rgba(21,128,61,.30);
  animation: demo-dup-pulse 2.4s ease-in-out infinite;
}
@keyframes demo-dup-fade {
  0%, 100% { opacity: .35; }
  50%      { opacity: .15; }
}
@keyframes demo-dup-pulse {
  0%, 100% { transform: rotate(2deg) translate(2px, -2px) scale(1); }
  50%      { transform: rotate(2deg) translate(2px, -2px) scale(1.04); }
}
.demo-dup-badge {
  position: absolute;
  top: 14px; right: 14px;
  padding: 3px 8px;
  background: #15803D;
  color: #fff;
  font: 700 11px/1 var(--font-mono);
  letter-spacing: 0.04em;
  border-radius: 999px;
  z-index: 3;
}

/* ============ Use Cases ============ */
.cases-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.case {
  padding: 28px 26px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: all .2s;
}
.case:hover {
  border-color: var(--border-strong);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.case-icon {
  width: 36px; height: 36px;
  border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent-soft);
  color: var(--accent);
}
.case-name {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0;
}
.case-desc {
  font-size: 13px;
  color: var(--fg-2);
  margin: 0;
  line-height: 1.6;
}
.case-stat {
  margin-top: 6px;
  padding-top: 14px;
  border-top: 0.5px solid var(--border);
  font: 500 11px/1.4 var(--font-mono);
  color: var(--fg-3);
}
.case-stat b {
  color: var(--accent);
  font-weight: 700;
}

/* ============ Pricing ============ */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
@media (max-width: 1100px) {
  .pricing-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
    max-width: 760px;
    margin: 0 auto;
  }
}
.pricing-trial {
  margin: 24px auto 0;
  text-align: center;
  font-size: 13px;
  color: var(--fg-3);
}
.pricing-trial b {
  color: var(--fg);
  font-weight: 600;
  margin: 0 4px;
}
.pricing-trial a,
.pricing-trial-btn {
  margin: 0 4px;
  color: var(--accent);
  font-weight: 500;
  background: transparent;
  border: 0;
  padding: 0;
  font: inherit;
  cursor: pointer;
}
.pricing-trial a:hover,
.pricing-trial-btn:hover { text-decoration: underline; }

/* ============ Pricing — 内测变体 ============ */
/* 不挂价格、单 CTA 引导联系我们；视觉上比正式版定价区更聚焦、更克制。 */
.pricing-beta {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 44px 32px 36px;
  position: relative;
  overflow: hidden;
}
.pricing-beta::before {
  /* 渐变光晕，把视觉重心收到这块卡片里 */
  content: '';
  position: absolute;
  top: -120px; left: 50%;
  transform: translateX(-50%);
  width: 600px; height: 240px;
  background: radial-gradient(closest-side, rgba(94,71,245,.18), transparent 70%);
  pointer-events: none;
}
.pricing-beta-eyebrow {
  background: linear-gradient(135deg, #5e47f5, #ec4899);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 700;
  letter-spacing: 0.12em;
}
.pricing-beta-title {
  margin: 8px 0 14px;
  position: relative;
}
.pricing-beta-sub {
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--fg-2);
  max-width: 480px;
  margin: 0 auto 28px;
  position: relative;
}
.pricing-beta-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 28px;
  background: linear-gradient(180deg, #6b54f7, #5e47f5);
  color: #fff;
  font: 600 14.5px/1 var(--font-sans);
  border-radius: 10px;
  border: 0;
  cursor: pointer;
  box-shadow:
    0 1px 0 rgba(255,255,255,.25) inset,
    0 8px 20px rgba(94,71,245,.30);
  transition: transform .15s, box-shadow .15s;
  position: relative;
}
.pricing-beta-cta:hover {
  transform: translateY(-1px);
  box-shadow:
    0 1px 0 rgba(255,255,255,.25) inset,
    0 12px 28px rgba(94,71,245,.40);
}
.pricing-beta-note {
  margin: 16px 0 0;
  font: 500 12.5px/1.5 var(--font-mono);
  color: var(--fg-3);
  position: relative;
}
.price {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 26px 22px;
  position: relative;
  display: flex;
  flex-direction: column;
}
@media (max-width: 1100px) {
  .price { padding: 32px 28px; }
}
.price--featured {
  border-color: var(--accent);
  box-shadow:
    0 0 0 1px var(--accent),
    0 20px 40px rgba(94,71,245,.15);
}
.price-tag {
  position: absolute;
  top: -10px; right: 20px;
  padding: 4px 10px;
  background: linear-gradient(135deg, #5e47f5, #8b5cf6);
  color: #fff;
  font: 700 10px/1 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-radius: 999px;
  box-shadow: 0 4px 10px rgba(94,71,245,.30);
}
.price-name {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 6px;
}
.price-tagline {
  font-size: 13px;
  color: var(--fg-3);
  margin: 0 0 22px;
}
.price-amount {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 24px;
}
.price-amount b {
  font: 800 36px/1 var(--font-display);
  letter-spacing: -0.025em;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
}
@media (max-width: 1100px) {
  .price-amount b { font-size: 44px; }
}
.price-amount span {
  font: 500 13px/1 var(--font-sans);
  color: var(--fg-3);
}
.price-amount--custom b {
  font-size: 28px;
  background: linear-gradient(120deg, #5e47f5, #ec4899);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.price-features {
  list-style: none;
  padding: 0;
  margin: 0 0 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}
.price-features li {
  display: flex;
  gap: 9px;
  font-size: 13.5px;
  color: var(--fg);
  line-height: 1.5;
}
.price-features li svg {
  flex-shrink: 0;
  color: var(--success);
  margin-top: 2px;
}
.price-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 11px 18px;
  font: 600 13.5px/1 var(--font-sans);
  border-radius: 8px;
  width: 100%;
  transition: all .15s;
}
.price-cta--primary {
  background: linear-gradient(180deg, #6b54f7, #5e47f5);
  color: #fff;
  box-shadow:
    0 1px 0 rgba(255,255,255,.25) inset,
    0 4px 10px rgba(94,71,245,.30);
}
.price-cta--primary:hover { transform: translateY(-1px); }
.price-cta--ghost {
  background: var(--bg-sunken);
  color: var(--fg);
  border: 1px solid var(--border);
}
.price-cta--ghost:hover { border-color: var(--border-strong); background: var(--bg-hover); }

/* ============ Download ============ */
.download {
  background:
    radial-gradient(800px 400px at 50% 0%, rgba(94,71,245,.08), transparent 70%),
    var(--bg-elev);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.dl-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  max-width: 760px;
  margin: 28px auto 0;
}
/* 卡片改成两段式纵向布局：上一行（icon + 名称 + 下载箭头），下一行（meta 规格 + 文件大小）。
   原来横向布局把名称和 meta 挤在一个 flex:1 的窄列里，容器一窄就强制 wrap，"Apple Silicon" / "M1 / M2 / M3 / M4 · 84.6 MB"
   都会断成多行。竖向后 meta 行获得整张卡的宽度，CJK / 英文都能不换行。 */
.dl-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px 18px 16px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  transition: all .15s;
}
.dl-card:hover {
  border-color: var(--accent);
  background: var(--bg-elev);
  box-shadow: 0 8px 20px rgba(94,71,245,.10);
  transform: translateY(-2px);
}
.dl-card-top {
  display: flex;
  align-items: center;
  gap: 12px;
}
.dl-arch {
  width: 38px; height: 38px;
  border-radius: 10px;
  background: linear-gradient(135deg, #1a1a1d, #2a2a30);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font: 700 14px/1 var(--font-mono);
  flex-shrink: 0;
}
.dl-arch-name {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  margin: 0;
  flex: 1;
  white-space: nowrap;        /* "Apple Silicon" 不许换行 */
}
.dl-card svg { color: var(--accent); flex-shrink: 0; }
.dl-arch-meta {
  font: 500 11.5px/1.4 var(--font-mono);
  color: var(--fg-3);
  display: flex;
  justify-content: space-between;
  gap: 8px;
}
.dl-arch-hint { white-space: nowrap; }   /* "M1 / M2 / M3 / M4" / "2017 及以后机型" 不换行 */
.dl-arch-size {
  color: var(--fg-2);
  font-weight: 600;
  white-space: nowrap;
}
/* 文件没就绪时（version.json 里 download 为 null）整卡置灰但保留位置 */
.dl-card.is-disabled {
  background: var(--bg-sunken);
  border-style: dashed;
  cursor: not-allowed;
  pointer-events: none;
}
.dl-card.is-disabled .dl-arch    { background: var(--fg-4); }
.dl-card.is-disabled .dl-arch-name,
.dl-card.is-disabled .dl-arch-hint { color: var(--fg-3); }
.dl-card.is-disabled .dl-arch-size { color: var(--fg-3); font-weight: 500; }
.dl-card.is-disabled svg          { color: var(--fg-4); }
.dl-req {
  margin-top: 22px;
  text-align: center;
  font: 500 12px/1.5 var(--font-mono);
  color: var(--fg-3);
}

/* 单卡布局：只有一个网盘下载入口时居中铺开 */
.dl-single {
  display: flex;
  justify-content: center;
  margin-top: 6px;
}
.dl-single-card {
  width: 100%;
  max-width: 380px;
}

/* ============ Contact Modal ============ */
/* contact-modal 复用 .dl-modal 的容器样式（mask / 弹出动画 / close 按钮），
   但 max-width 改大到放下三张 QR 卡片。 */
.contact-modal {
  max-width: 720px;
}
.contact-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 20px;
}
.contact-card {
  --accent: var(--accent);  /* JS inline style 会覆盖，提供回退值 */
  background: var(--bg-sunken);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transition: all .2s;
  position: relative;
  overflow: hidden;
}
.contact-card::before {
  /* 顶部一道彩色细条 — 用各平台的品牌色，弱视觉提示，强一致感 */
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--accent);
  opacity: .85;
}
.contact-card:hover {
  border-color: var(--border-strong);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.contact-head {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 12px;
  margin-top: 4px;
}
.contact-icon {
  width: 28px; height: 28px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent);
  color: #fff;
  flex-shrink: 0;
}
.contact-name {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  margin: 0;
}
.contact-qr {
  width: 100%;
  aspect-ratio: 1 / 1;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  margin-bottom: 12px;
  /* 透明度过渡：图片加载完前是空白，避免突兀 */
  transition: transform .25s;
}
.contact-card:hover .contact-qr { transform: scale(1.03); }
.contact-qr img {
  max-width: 100%;
  max-height: 100%;
  width: auto; height: auto;
  display: block;
  /* 微信 / 抖音 QR 周围的 padding 不一样，统一靠 object-fit: contain 居中 */
  object-fit: contain;
}
.contact-meta {
  width: 100%;
}
.contact-handle {
  font: 700 13px/1.3 var(--font-display);
  color: var(--fg);
  margin-bottom: 4px;
  /* 长账号截断（小红书号 5402080943 等） */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.contact-note {
  font: 500 11px/1.4 var(--font-mono);
  color: var(--fg-3);
}
.contact-tip {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  text-align: center;
  font: 500 12px/1.5 var(--font-sans);
  color: var(--fg-3);
}
@media (max-width: 600px) {
  .contact-modal { max-width: 360px; }
  .contact-grid { grid-template-columns: 1fr; gap: 12px; }
  .contact-qr { max-width: 220px; margin-left: auto; margin-right: auto; }
}

/* ============ FAQ ============ */
.faq-list {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}
.faq-item {
  border-bottom: 1px solid var(--border);
}
.faq-q {
  width: 100%;
  text-align: left;
  padding: 14px 0;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--fg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  transition: color .15s;
}
.faq-q:hover { color: var(--accent); }
.faq-q-icon {
  width: 24px; height: 24px;
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-sunken);
  color: var(--fg-2);
  transition: all .25s;
  flex-shrink: 0;
}
.faq-item.is-open .faq-q-icon {
  background: var(--accent);
  color: #fff;
  transform: rotate(45deg);
}
.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height .35s cubic-bezier(.4,0,.2,1);
}
.faq-item.is-open .faq-a { max-height: 220px; }
.faq-a-inner {
  padding: 0 0 14px;
  font-size: 14px;
  color: var(--fg-2);
  line-height: 1.65;
  text-wrap: pretty;
}

/* ============ Footer ============ */
.footer {
  padding: 50px 0 30px;
  border-top: 1px solid var(--border);
  background: var(--bg-elev);
}
.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.footer-brand {
  font: 700 14px/1 var(--font-display);
  display: flex; align-items: center; gap: 8px;
}
.footer-links {
  display: flex; gap: 18px;
  font: 500 12.5px/1 var(--font-sans);
  color: var(--fg-2);
}
.footer-links a,
.footer-link-btn {
  color: inherit;
  background: transparent;
  border: 0;
  padding: 0;
  font: inherit;
  cursor: pointer;
  transition: color .15s;
}
.footer-links a:hover,
.footer-link-btn:hover { color: var(--accent); }
.footer-copy {
  font: 500 11.5px/1 var(--font-mono);
  color: var(--fg-4);
  margin-top: 24px;
  text-align: center;
}

/* ============ Responsive ============ */
@media (max-width: 880px) {
  .nav-links { display: none; }
  .features-grid, .cases-grid, .pricing-grid, .stats-grid, .dl-grid {
    grid-template-columns: 1fr;
  }
  .stat { border-right: 0; border-bottom: 1px solid var(--border); }
  .stat:last-child { border-bottom: 0; }
  .app-frame-iframe { height: 480px; }
  section { padding: 60px 0; }
  .hero { padding: 40px 0 20px; }
}