/* ══════════════════════════════════════════════════════════════════
   Alice Landing Page — style.css
   ══════════════════════════════════════════════════════════════════ */

/* ── Reset & Base ──────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-padding-top: 63px; }

:root {
  --bg:       #FAFAF7;
  --card:     #F5F3EE;
  --border:   #E8E4DC;
  --text:     #1A1714;
  --muted:    #6B6460;
  --blue:     #4A7FA5;
  --brand-warm: #C25566;
  --gold:     #C9A96E;
  --surface:  #EFEFEB;
}

html { scroll-behavior: smooth; overflow-x: hidden; max-width: 100%; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

.serif { font-family: 'Playfair Display', Georgia, serif; }
.serif-italic { font-family: 'Playfair Display', Georgia, serif; font-style: italic; }

/* ── Nav ───────────────────────────────────────────────────── */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 48px; height: 64px;
  background: rgba(250,250,247,0.85);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s;
}
nav.scrolled { border-bottom-color: var(--border); }

.nav-brand {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'PingFang SC', sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 20px;
  color: var(--brand-warm);
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.nav-links {
  display: flex; align-items: center; gap: 32px; list-style: none;
}
.nav-links li { display: flex; align-items: center; }
.nav-links a { line-height: 1.4; }
.nav-links a {
  font-size: 13px; color: var(--muted);
  transition: color 0.2s;
}
.nav-links a:hover { color: var(--text); }

.nav-handbook-link {
  color: var(--brand-warm) !important;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.nav-handbook-link:hover {
  opacity: 0.8;
}

.nav-careers-link {
  color: var(--accent, #C9A96E) !important;
  font-weight: 500;
}
.nav-careers-link:hover { opacity: 0.8; }

/* 二创入口：Alice 头像 + 暖金渐变文字，位于导航第二位 */
.nav-links a.nav-fanart-link {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 3px 12px 3px 3px;
  border-radius: 999px;
  color: #8E6A2E !important;
  font-weight: 600; letter-spacing: 0.02em;
  background: linear-gradient(135deg, rgba(201,169,110,0.16), rgba(232,160,150,0.14));
  box-shadow: inset 0 0 0 1px rgba(201,169,110,0.35);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.nav-links a.nav-fanart-link:hover {
  transform: translateY(-1px);
  background: linear-gradient(135deg, rgba(201,169,110,0.26), rgba(232,160,150,0.24));
  box-shadow: inset 0 0 0 1px rgba(201,169,110,0.6), 0 4px 12px rgba(201,169,110,0.22);
}
.nav-fanart-avatar {
  width: 24px; height: 24px; flex: none;
  border-radius: 50%; object-fit: cover;
  background: #fff;
  box-shadow: 0 0 0 1.5px #fff, 0 0 0 2.5px rgba(201,169,110,0.7);
}
.nav-fanart-label { line-height: 1; white-space: nowrap; }

.nav-cta {
  font-size: 13px; font-weight: 500;
  padding: 8px 20px; border-radius: 20px;
  background: var(--text); color: var(--bg);
  transition: opacity 0.2s;
}
.nav-cta:hover { opacity: 0.8; }

/* ── Hero ──────────────────────────────────────────────────── */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex; align-items: center; justify-content: flex-start;
  overflow: hidden;
  padding-top: 64px;
}

.hero-bg {
  position: absolute; inset: 0;
}
.hero-bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 20%;
  filter: brightness(1.0) saturate(1.1);
}
.hero-bg::after {
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(to bottom, rgba(250,250,247,0.96) 0%, transparent 10%, transparent 86%, var(--bg) 100%),
    linear-gradient(to right, rgba(250,250,247,0.84) 0%, rgba(250,250,247,0.45) 42%, transparent 70%);
}

/* 首屏图是三人合影，主体在画面中段：整张图推到右侧 62% 宽度，左缘渐隐，避免被文字层盖住。 */
.hero-bg { background: var(--bg); }
.hero-bg img {
  width: 66%; margin-left: 34%;
  object-position: center 30%;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 22%);
  mask-image: linear-gradient(to right, transparent 0%, #000 22%);
}

/* 左侧阅读层：只托住文字，向插画方向自然淡出。 */
.hero::before {
  content: '';
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: clamp(500px, 50vw, 720px);
  background: rgba(250,250,247,0.8);
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  z-index: 1;
  -webkit-mask-image: linear-gradient(to right, black 0%, black 58%, rgba(0,0,0,0.78) 72%, rgba(0,0,0,0.22) 90%, transparent 100%);
  mask-image: linear-gradient(to right, black 0%, black 58%, rgba(0,0,0,0.78) 72%, rgba(0,0,0,0.22) 90%, transparent 100%);
}

.hero-content {
  position: relative; z-index: 2;
  text-align: left;
  width: clamp(440px, 43vw, 620px);
  padding: 12px clamp(36px, 4vw, 56px) 0 clamp(40px, 6vw, 80px);
}

.hero-eyebrow {
  font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
  color: #716A65; margin-bottom: 22px;
}

/* 导航承担过渡期全称，Hero 只突出当前语言短称，避免两个品牌标题争夺焦点。 */
.hero-title {
  font-family: 'Songti SC', 'STSong', 'Noto Serif SC', 'Playfair Display', serif;
  font-size: clamp(52px, 6vw, 72px);
  font-weight: 600;
  font-style: normal;
  line-height: 1.08;
  color: var(--brand-warm);
  margin-bottom: 24px;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

html[lang="en-US"] .hero-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  letter-spacing: -0.01em;
}

.hero-title-sub {
  font-family: 'Playfair Display', serif;
  font-size: clamp(20px, 3vw, 32px);
  font-weight: 500;
  color: var(--text);
  margin-bottom: 20px;
  opacity: 0.7;
}

/* 主标语「眼里有活，心里有你」：站在渐变大标题和副文案之间。
   背景：24px 被裁成注解；立刻放到 48px / 字重 500 后，hero 栏（最窄约 368px 可用）
   装不下 8 个 48px 汉字，折成「眼里有活，心里 / 有你」，用户裁「什么鬼啊」。
   设计意图：中文强制一行。字号上限由栏宽反推，停在 36px；字重 400，避免系统
   中文无衬线把 500 合成假粗。英文句子更长，允许在空格/词边界折行。 */
.hero-slogan {
  font-family: 'Inter', -apple-system, 'PingFang SC', sans-serif;
  font-size: clamp(27px, 2.4vw, 34px);
  font-weight: 400;
  color: #302B27;
  line-height: 1.35;
  letter-spacing: 0.04em;
  font-feature-settings: 'palt' 1;
  margin-bottom: 20px;
  white-space: nowrap;
  word-break: keep-all;
}

html[lang="en-US"] .hero-slogan {
  white-space: normal;
  letter-spacing: 0.02em;
  font-size: clamp(20px, 2.2vw, 26px);
}

.hero-subtitle {
  font-family: 'Inter', system-ui, sans-serif;
  font-style: normal;
  font-size: clamp(15px, 1.2vw, 17px);
  color: #403A35;
  margin-bottom: 34px;
  line-height: 1.9;
  letter-spacing: 0.01em;
  /* 背景：文案已用 <br> 排成四行，但 hero 栏约 368–500px，第二句
     「我会记住你的偏好，帮你处理工作与生活中的任务。」被栏宽二次切断，
     「的任务。」掉到下一行。用户画箭头说「这句话应该超过」。
     设计意图：桌面端按作者的 br 成行，允许向右溢出到插画上；
     头像和按钮仍走栏宽。窄屏在 768px 断点恢复自动折行。 */
  white-space: nowrap;
}

.hero-friends {
  display: flex;
  align-items: center;
  gap: 0;
  margin-bottom: 26px;
}
.hero-friend-avatar {
  display: block;
  text-decoration: none;
  width: 36px; height: 36px;
  /* flex 容器宽度不够时默认会横向压缩，高度不变就成了椭圆；固定尺寸不参与收缩并锁定 1:1 */
  flex: 0 0 auto;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid var(--bg);
  margin-right: -10px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
  transition: transform 0.2s;
  cursor: pointer;
  position: relative;
}
.hero-friend-avatar:last-child { margin-right: 0; }
.hero-friend-avatar:hover { transform: translateY(-4px) scale(1.1); z-index: 10; }
.hero-friend-avatar > img { width: 100%; height: 100%; object-fit: cover; object-position: center top; border-radius: 50%; }
.hero-friend-add {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px dashed #b0794f;
  background: #fdf6ec;
  color: #b0794f;
  font-size: 18px;
  font-weight: 300;
  line-height: 1;
  box-shadow: 0 2px 8px rgba(80,55,30,.12);
}
.hero-friend-add:hover { background: #fff; }

/* ── Hero Friend Card（全局浮动卡片，不受 hero overflow:hidden 限制）──────── */
.hfc-global {
  position: fixed;
  width: 220px;
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.18s ease;
  z-index: 9999;
  box-shadow: 0 16px 48px rgba(0,0,0,0.2), 0 0 0 1px rgba(0,0,0,0.05);
}
.hfc-global::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 7px solid transparent;
  border-top-color: #fff;
}
.hfc-global.hfc-visible {
  opacity: 1;
  pointer-events: auto;
}
.hfc-card { display: none; }
.hfc-card.active { display: block; }
.hfc-cover {
  width: 100%;
  height: 110px;
  overflow: hidden;
}
.hfc-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 25%;
}
.hfc-body {
  padding: 0 14px 14px;
  display: flex;
  gap: 10px;
  margin-top: -18px;
  position: relative;
}
.hfc-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  border: 2px solid #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.12);
}
.hfc-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}
.hfc-info {
  flex: 1;
  min-width: 0;
  padding-top: 20px;
}
.hfc-name {
  font-size: 13px;
  font-weight: 600;
  color: #1A1714;
  line-height: 1.3;
}
.hfc-name span {
  font-weight: 400;
  color: #8A8480;
  font-size: 11px;
}
.hfc-role {
  font-size: 11px;
  color: #8A8480;
  margin-top: 1px;
  margin-bottom: 6px;
}
.hfc-desc {
  font-size: 11px;
  color: #4A4542;
  line-height: 1.55;
}
.hfc-card-add .hfc-cover {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #fdf6ec, #f3e3cf);
  color: #c9a07a;
  font-size: 44px;
  font-weight: 200;
}
.hfc-card-add .hfc-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  border-style: dashed;
  border-color: #b0794f;
  background: #fdf6ec;
  color: #b0794f;
  font-size: 18px;
}


.hero-actions {
  display: flex; gap: clamp(8px, 0.8vw, 12px); justify-content: flex-start; flex-wrap: nowrap;
}
.hero-actions .btn-primary,
.hero-actions .btn-secondary {
  flex: none; white-space: nowrap;
  padding-left: clamp(16px, 1.7vw, 28px); padding-right: clamp(16px, 1.7vw, 28px);
}
.btn-primary {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 28px; border-radius: 28px;
  background: var(--text); color: var(--bg);
  font-size: 14px; font-weight: 500;
  transition: transform 0.2s, opacity 0.2s;
}
.btn-primary:hover { transform: translateY(-1px); opacity: 0.85; }

.btn-secondary {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 28px; border-radius: 28px;
  background: rgba(255,255,255,0.18);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: var(--text);
  font-size: 14px; font-weight: 500;
  border: 1px solid rgba(255,255,255,0.35);
  transition: background 0.2s, border-color 0.2s;
}
.btn-secondary:hover {
  background: rgba(255,255,255,0.28);
  border-color: rgba(255,255,255,0.5);
}

.hero-scroll {
  position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%);
  z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.hero-scroll span { font-size: 11px; color: var(--muted); letter-spacing: 0.1em; }
.scroll-line {
  width: 1px; height: 40px;
  background: linear-gradient(to bottom, var(--border), transparent);
  animation: scrollPulse 2s ease-in-out infinite;
}
@keyframes scrollPulse {
  0%, 100% { opacity: 0.4; } 50% { opacity: 1; }
}

/* ── Quote divider ─────────────────────────────────────────── */
.quote-divider {
  text-align: center;
  padding: 96px 24px;
  background: var(--text);
  position: relative;
  overflow: hidden;
}
.quote-divider::before {
  content: '\201C';
  position: absolute;
  top: -40px; left: 50%;
  transform: translateX(-50%);
  font-family: 'Playfair Display', serif;
  font-size: 320px;
  color: rgba(255,255,255,0.03);
  line-height: 1;
  pointer-events: none;
  user-select: none;
}
.quote-divider blockquote {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: clamp(20px, 3vw, 32px);
  color: rgba(250,250,247,0.92);
  max-width: 720px;
  margin: 0 auto 20px;
  line-height: 1.5;
  position: relative; z-index: 1;
}
.quote-divider cite {
  font-size: 13px;
  color: rgba(250,250,247,0.4);
  font-style: normal;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  position: relative; z-index: 1;
}

/* ── Section Base ──────────────────────────────────────────── */
section { padding: 100px 24px; }
.container { max-width: 1080px; margin: 0 auto; }

/* ── Positioning / 关系型生产力 Agent ───────────────────────────── */
.positioning {
  padding: 128px 0 136px;
  background: var(--bg);
}
.positioning-intro {
  max-width: 720px;
  margin: 0 auto 64px;
  text-align: center;
}
.positioning-intro .section-title { margin-bottom: 22px; }
.positioning-intro .section-sub { margin: 0 auto; }
.positioning-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
}
.positioning-card {
  min-height: 248px;
  padding: 30px 26px 32px;
  background: var(--bg);
  transition: background 0.25s, transform 0.25s;
}
.positioning-card:hover {
  background: var(--card);
  transform: translateY(-4px);
}
.positioning-index {
  display: block;
  margin-bottom: 24px;
  color: var(--brand-warm);
  font: 500 12px/1 'Inter', sans-serif;
  letter-spacing: 0.16em;
}
.positioning-card h3 {
  margin-bottom: 10px;
  font-size: 20px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0.02em;
}
.positioning-lead {
  margin: 0 0 10px;
  font-size: 15px;
  font-weight: 600;
  color: #2a1f1a;
  line-height: 1.45;
}
.positioning-desc {
  margin: 0;
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.65;
}

@media (max-width: 760px) {
  .positioning { padding: 88px 20px 96px; }
  .positioning-intro { margin-bottom: 42px; }
  .positioning-grid { grid-template-columns: repeat(2, 1fr); }
  .positioning-card { min-height: 220px; padding: 24px 20px 26px; }
  .positioning-index { margin-bottom: 32px; }
}

@media (max-width: 480px) {
  .positioning-grid { grid-template-columns: 1fr; }
  .positioning-card { min-height: auto; }
}
.section-label {
  font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 12px;
}
.section-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(32px, 4.5vw, 52px);
  font-weight: 600; line-height: 1.15;
  margin-bottom: 16px;
}
.section-sub {
  font-size: 16px; color: var(--muted);
  max-width: 480px; line-height: 1.7;
}

/* ── Features Section ─────────────────────────────────────────── */
.features { background: #141210; padding-top: 0; padding-bottom: 0; }
.features > .container { margin-bottom: 48px; text-align: center; }
.features .section-label { color: #C9A96E; }
.features .section-title { color: #FAFAF7; }

/* ── Hero Evolution Compare ─────────────────────────────────── */
.hero-evolution-compare {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 28px;
  max-width: 340px;
}
.hero-cmp-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 12px;
}
.hero-cmp-row-from {
  background: rgba(0,0,0,0.04);
  border: 1px solid var(--border);
}
.hero-cmp-row-to {
  background: linear-gradient(135deg, #eef5fb 0%, #f5f0fc 100%);
  border: 1px solid rgba(74,127,165,0.2);
}
.hero-cmp-badge {
  flex-shrink: 0;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 20px;
  line-height: 1.6;
}
.hero-cmp-row-from .hero-cmp-badge {
  background: rgba(0,0,0,0.06);
  color: var(--muted);
}
.hero-cmp-row-to .hero-cmp-badge {
  background: rgba(74,127,165,0.12);
  color: var(--blue);
}
.hero-cmp-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.hero-cmp-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
}
.hero-cmp-row-from .hero-cmp-label { color: var(--muted); }
.hero-cmp-desc {
  font-size: 11px;
  color: var(--muted);
  line-height: 1.4;
}
.hero-cmp-row-to .hero-cmp-desc { color: var(--blue); opacity: 0.85; }
.hero-cmp-arrow {
  display: flex;
  justify-content: flex-start;
  padding-left: 22px;
  color: var(--muted);
  opacity: 0.35;
}

/* ── Self-Evolution Section ─────────────────────────────────── */
.evolution-section {
  background: var(--text);
  color: var(--bg);
  padding: 120px 24px;
}
.evolution-section .section-label { color: var(--gold); }
.evolution-section .section-title { color: var(--bg); }
.evo-header { margin-bottom: 72px; }
.evo-header-sub {
  font-size: 16px;
  color: rgba(250,250,247,0.55);
  max-width: 560px;
  line-height: 1.8;
  margin-top: 16px;
}

.evo-steps {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: start;
  gap: 0;
  margin-bottom: 80px;
}
.evo-step-num {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--gold);
  margin-bottom: 16px;
}
.evo-step-img {
  width: 100%;
  aspect-ratio: 16/9;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 20px;
  border: 1px solid rgba(255,255,255,0.08);
}
.evo-step-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 25%;
  filter: brightness(0.75) saturate(0.9);
}
.evo-step-title {
  font-family: 'Playfair Display', serif;
  font-size: 20px;
  font-weight: 600;
  color: var(--bg);
  margin-bottom: 8px;
}
.evo-step-desc {
  font-size: 13px;
  color: rgba(250,250,247,0.5);
  line-height: 1.75;
}
.evo-step-divider {
  color: rgba(250,250,247,0.2);
  padding: 0 20px;
  margin-top: 60px;
  flex-shrink: 0;
}
@media (max-width: 900px) {
  .evo-steps { grid-template-columns: 1fr; }
  .evo-step-divider { display: none; }
}

.evo-detail {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  margin-bottom: 72px;
}
@media (max-width: 900px) {
  .evo-detail { grid-template-columns: 1fr; }
}

.evo-demo-label {
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(250,250,247,0.3);
  margin-bottom: 16px;
  display: block;
}

.evo-demo {
  background: #1a1d21;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-family: -apple-system, BlinkMacSystemFont, 'Inter', sans-serif;
  position: relative;
  overflow: hidden;
}
.evo-demo::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.06), transparent);
}

.evo-demo-msg {
  font-size: 13px;
  line-height: 1.65;
  padding: 10px 14px;
  border-radius: 14px;
  max-width: 82%;
}
.evo-msg-user {
  background: #2c3038;
  color: rgba(255,255,255,0.88);
  align-self: flex-end;
  border-radius: 14px 4px 14px 14px;
}
.evo-msg-alice {
  background: transparent;
  color: rgba(255,255,255,0.62);
  align-self: flex-start;
  border-radius: 4px 14px 14px 14px;
  padding: 8px 2px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.evo-thinking {
  font-size: 10px;
  color: #c9a96e;
  background: rgba(201,169,110,0.12);
  padding: 2px 8px;
  border-radius: 8px;
  white-space: nowrap;
  animation: blink 1.5s ease-in-out infinite;
  border: 1px solid rgba(201,169,110,0.18);
}
@keyframes blink { 0%,100%{opacity:0.5} 50%{opacity:1} }

.evo-demo-result {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #1f2328;
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 12px;
  padding: 12px 14px;
  align-self: flex-start;
  max-width: 92%;
}
.evo-result-icon {
  width: 36px; height: 36px;
  background: #262b31;
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  color: #7bb8d4;
  flex-shrink: 0;
}
.evo-result-title {
  font-size: 13px; font-weight: 600;
  color: rgba(255,255,255,0.88);
}
.evo-result-sub {
  font-size: 11px;
  color: rgba(255,255,255,0.32);
  margin-top: 3px;
}
.evo-result-check {
  margin-left: auto;
  width: 22px; height: 22px;
  background: rgba(74,222,128,0.15);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.evo-result-check svg {
  width: 12px; height: 12px;
  color: #4ade80;
}

.evo-scope-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 32px;
}
.evo-scope-item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.evo-scope-icon {
  width: 36px; height: 36px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  color: rgba(250,250,247,0.5);
  flex-shrink: 0;
}
.evo-scope-title {
  font-size: 13px; font-weight: 600;
  color: rgba(250,250,247,0.9);
  margin-bottom: 3px;
}
.evo-scope-desc {
  font-size: 12px;
  color: rgba(250,250,247,0.4);
  line-height: 1.6;
}

.evo-guarantees {
  border-top: 1px solid rgba(255,255,255,0.08);
  padding-top: 24px;
}
.evo-guarantee-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.evo-guarantee {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  font-size: 12px;
  color: rgba(250,250,247,0.4);
  line-height: 1.5;
}
.evo-guarantee svg { flex-shrink: 0; color: var(--gold); margin-top: 2px; }

.evo-philosophy {
  border-top: 1px solid rgba(255,255,255,0.1);
  padding-top: 64px;
}
.evo-philosophy-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
}
@media (max-width: 768px) {
  .evo-philosophy-inner { grid-template-columns: 1fr; gap: 32px; }
}
.evo-philosophy-q {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: clamp(18px, 2.5vw, 26px);
  color: rgba(250,250,247,0.8);
  line-height: 1.5;
  position: relative;
}
.evo-philosophy-icon {
  font-size: 80px;
  line-height: 0.5;
  color: var(--gold);
  opacity: 0.3;
  display: block;
  margin-bottom: 16px;
  font-family: Georgia, serif;
}
.evo-philosophy-a {
  font-size: 15px;
  color: rgba(250,250,247,0.5);
  line-height: 1.9;
}
.evo-philosophy-highlight {
  margin-top: 20px;
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: 18px;
  color: var(--gold);
}

/* ── Evolution Screenshots ──────────────────────────────────── */
.evo-screenshots {
  margin: 0 auto 56px;
  max-width: 860px;
}
.evo-scr-tabs {
  display: flex;
  gap: 12px;
  margin-bottom: 20px;
}
.evo-scr-card {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.04);
  color: rgba(250,250,247,0.5);
  cursor: pointer;
  transition: all 0.25s;
}
.evo-scr-card:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.18); color: rgba(250,250,247,0.8); }
.evo-scr-card.active { background: rgba(212,175,96,0.1); border-color: rgba(212,175,96,0.35); color: var(--gold); }
.evo-scr-card-icon { width: 36px; height: 36px; border-radius: 10px; background: rgba(255,255,255,0.06); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.evo-scr-card.active .evo-scr-card-icon { background: rgba(212,175,96,0.12); }
.evo-scr-card-text { display: flex; flex-direction: column; gap: 2px; }
.evo-scr-card-title { font-size: 14px; font-weight: 600; line-height: 1.3; }
.evo-scr-card-desc { font-size: 12px; opacity: 0.6; line-height: 1.4; }
.evo-tab-badge {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 10px;
  background: rgba(255,255,255,0.1);
  font-size: 11px;
  color: rgba(250,250,247,0.65);
  margin-left: 2px;
}
.evo-scr-frame {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.1);
  background: #0a0a0a;
}
.evo-scr-stack {
  position: relative;
}
.evo-scr-stack .evo-scr-sizer {
  visibility: hidden;
  pointer-events: none;
  display: block;
  width: 100%;
}
.evo-scr-item {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  opacity: 0;
  transition: opacity 0.7s ease;
  pointer-events: none;
}
.evo-scr-item.active {
  opacity: 1;
  pointer-events: auto;
}
.evo-scr-item img {
  width: 100%;
  height: auto;
  display: block;
}
.evo-scr-caption {
  padding: 12px 20px;
  font-size: 13px;
  color: rgba(250,250,247,0.5);
  text-align: center;
  background: rgba(0,0,0,0.4);
}

/* ── Persona Section ───────────────────────────────────────── */
.persona { background: var(--card); }

/* ── A day with Alice ───────────────────────────────────────── */
.day-in-life { background: #f7f4ed; padding: 120px 24px 128px; }
.day-in-life .container { max-width: 1200px; }
.day-header { max-width: 720px; margin: 0 auto 56px; text-align: center; }
.day-header .section-label { color: #b36c52; }
.day-header .section-title { color: #282521; }
.day-header .section-sub { color: #706a62; max-width: none; }
.day-grid { display: grid; grid-template-columns: repeat(12, 1fr); grid-template-rows: repeat(3, 460px) 380px; grid-auto-rows: 460px; gap: 18px; }
.day-card { border-radius: 22px; overflow: hidden; position: relative; background: #e9e0d4; isolation: isolate; }
.day-card > img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .8s ease; }
.day-card:hover > img { transform: scale(1.03); }
.day-card::after { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgba(28,22,18,.74), rgba(28,22,18,0) 56%); pointer-events: none; }
.day-card-copy { position: absolute; z-index: 2; left: 30px; right: 30px; bottom: 28px; color: #fff; }
.day-card-copy span { display: block; font-size: 12px; letter-spacing: .14em; opacity: .74; margin-bottom: 10px; }
.day-card-copy h3 { font-size: 24px; margin: 0 0 8px; font-weight: 600; }
.day-card-copy p { margin: 0; font-size: 14px; line-height: 1.75; opacity: .86; }

.day-card-breakfast { grid-column: span 7; }
.day-card-breakfast > img { object-position: 38% center; }
.day-card-work { grid-column: span 5; background: #d8c6ad; }
.day-card-work .day-slides img { object-position: center 30%; }
.day-card-call { grid-column: span 5; background: linear-gradient(160deg, #4a3d33 0%, #2a211b 100%); }
.day-card-friends { grid-column: span 7; }
.day-card-friends > img { object-position: center 40%; }
.day-card-reading, .day-card-travel, .day-card-food { grid-column: span 4; }
.day-card-life { grid-column: 1 / -1; grid-row: span 1; }
.day-card-reading > img { object-position: center 45%; }
.day-card-travel > img { object-position: center 35%; }

/* 多图轮播：纯 CSS 交叉淡入，两张图轮流出现 */
.day-slides { position: absolute; inset: 0; background: #e9e0d4; }
.day-slides img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; animation: dayFadeB 12s ease-in-out infinite; }
.day-slides img:first-child { opacity: 1; animation-name: dayFadeA; }
.day-card:hover .day-slides img { transform: none; }
.day-card-travel .day-slides img { object-position: center 35%; }
.day-slides-slow img { animation-duration: 14s; }
@keyframes dayFadeA { 0%, 42% { opacity: 1; } 50%, 92% { opacity: 0; } 100% { opacity: 1; } }
@keyframes dayFadeB { 0%, 42% { opacity: 0; } 50%, 92% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .day-slides img, .day-slides img:first-child { animation: none; } .day-slides img + img { display: none; } .day-slides img:first-child { opacity: 1; } }

/* 电话：两张真实通话截图错落叠放，底部被渐变吞掉 */
.day-phones { position: absolute; inset: 0; z-index: 0; }
.day-phone { position: absolute; width: 44%; height: auto; border-radius: 16px; box-shadow: 0 18px 44px rgba(0,0,0,.45); top: 34px; }
.day-phone-a { left: 8%; transform: rotate(-4deg); }
.day-phone-b { right: 8%; top: 58px; transform: rotate(3deg); }
.day-card-call:hover .day-phone-a { transform: rotate(-5deg) translateY(-4px); }
.day-card-call:hover .day-phone-b { transform: rotate(4deg) translateY(-4px); }
.day-phone { transition: transform .5s ease; }

/* 美食：四宫格拼成一张，格间留细缝 */
.day-food-grid { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 3px; background: #f7f4ed; }
.day-food-grid img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .8s ease; }
.day-card-food:hover .day-food-grid img { transform: scale(1.04); }
.day-food-grid { overflow: hidden; }
.day-food-grid img { min-height: 0; }
.day-card-food::after { background: linear-gradient(to top, rgba(28,22,18,.82), rgba(28,22,18,0) 62%); }

/* 热爱生活：四张拼成一排，手机上变 2×2 */
.day-card-life { background: #f7f4ed; }
.day-life-grid { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; overflow: hidden; }
.day-life-grid img { width: 100%; height: 100%; min-height: 0; object-fit: cover; display: block; transition: transform .8s ease; }
.day-card-life:hover .day-life-grid img { transform: scale(1.04); }
.day-card-life::after { background: linear-gradient(to top, rgba(28,22,18,.82), rgba(28,22,18,0) 58%); }
.day-card-life .day-card-copy { max-width: 640px; }

/* ── Inside Alice 灯箱 ─────────────────────────────────────── */
.inside-lb { position: fixed; inset: 0; z-index: 9999; background: rgba(12,9,7,.92); display: flex; align-items: stretch; justify-content: center; animation: insideLbIn .2s ease; }
.inside-lb[hidden] { display: none; }
@keyframes insideLbIn { from { opacity: 0; } to { opacity: 1; } }
.inside-lb-scroll { flex: 1; overflow: auto; display: flex; justify-content: center; align-items: flex-start; padding: 56px 72px 72px; cursor: zoom-out; }
.inside-lb-scroll img { display: block; width: min(1100px, 100%); height: auto; border-radius: 10px; box-shadow: 0 20px 80px rgba(0,0,0,.6); cursor: default; background: #efe9de; }
.inside-lb-close { position: absolute; top: 14px; right: 18px; z-index: 2; width: 42px; height: 42px; border: 0; border-radius: 50%; background: rgba(255,255,255,.12); color: #fff; font-size: 26px; line-height: 1; cursor: pointer; transition: background .2s ease; }
.inside-lb-nav { position: absolute; top: 50%; z-index: 2; width: 48px; height: 48px; margin-top: -24px; border: 0; border-radius: 50%; background: rgba(255,255,255,.12); color: #fff; font-size: 30px; line-height: 1; cursor: pointer; transition: background .2s ease; }
.inside-lb-close:hover, .inside-lb-nav:hover { background: rgba(255,255,255,.26); }
.inside-lb-prev { left: 18px; }
.inside-lb-next { right: 18px; }
.inside-lb-count { position: absolute; left: 0; right: 0; bottom: 18px; margin: 0; text-align: center; font-size: 13px; letter-spacing: .06em; color: rgba(255,255,255,.7); pointer-events: none; text-shadow: 0 1px 6px rgba(0,0,0,.6); }
@media (max-width: 768px) {
  .inside-lb-scroll { padding: 60px 12px 64px; }
  .inside-lb-nav { top: auto; bottom: 10px; margin-top: 0; width: 42px; height: 42px; }
  .inside-lb-prev { left: 12px; }
  .inside-lb-next { right: 12px; }
}

/* ── Inside Alice：她的生活（浅色重设计）──────────────────────
   上一版是深棕底 + 左侧竖排折叠列表 + 右侧截图；用户不喜欢发黑，也不喜欢这种布局。
   现在：暖白底，标题居中，横排胶囊切换，下方一张大白卡——左边是截图，右边是大号序号与说明。 */
.inside {
  overflow-x: clip;
  padding: clamp(72px, 9vw, 130px) 24px;
  background:
    radial-gradient(ellipse 70% 50% at 50% 0%, rgba(240,200,165,.32), rgba(240,200,165,0) 70%),
    radial-gradient(ellipse 50% 40% at 90% 100%, rgba(255,214,196,.35), rgba(255,214,196,0) 70%),
    linear-gradient(180deg, #fbf6ef 0%, #fffaf4 100%);
  color: var(--text);
}
.inside-wrap { max-width: 1180px; margin: 0 auto; }
.inside-head { text-align: center; max-width: 760px; margin: 0 auto; }
.inside-head .section-label { color: #b0794f; display: flex; justify-content: center; }
.inside-head .section-title { text-align: center; text-wrap: balance; }
.inside-head .section-sub { margin: 0 auto; text-align: center; max-width: 560px; }
.inside-tabs {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
  margin: clamp(30px, 4vw, 46px) auto clamp(26px, 3.4vw, 40px);
}
.inside-tab {
  appearance: none; border: 1px solid #ecdccb; background: rgba(255,255,255,.75);
  color: #7a6a62; font: inherit; font-size: 15px; font-weight: 600; letter-spacing: .02em;
  padding: 11px 24px; border-radius: 999px; cursor: pointer; white-space: nowrap;
  transition: background .25s ease, color .25s ease, border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.inside-tab:hover { color: #3a2e28; border-color: #d9b48f; transform: translateY(-2px); }
.inside-tab.active {
  color: #fff; border-color: transparent;
  background: linear-gradient(135deg, #ff8a70, #e8644a);
  box-shadow: 0 8px 22px rgba(232,100,74,.32); transform: none;
}
.inside-tab:focus-visible { outline: 2px solid #e8644a; outline-offset: 3px; }
.inside-stage { position: relative; }
.inside-card {
  display: grid; grid-template-columns: minmax(0, 460px) minmax(0, 1fr);
  gap: clamp(32px, 6vw, 96px); align-items: center; justify-content: center;
  padding: clamp(28px, 4.4vw, 64px) clamp(24px, 5vw, 80px);
  background: #fff; border: 1px solid rgba(176,121,79,.14);
  border-radius: clamp(28px, 3.4vw, 48px);
  box-shadow: 0 40px 100px -40px rgba(120,80,50,.30);
}
.inside-device { position: relative; }
.inside-device::before {
  content: ''; position: absolute; inset: 6% -7% -6% 7%; z-index: 0;
  border-radius: 36px; background: linear-gradient(145deg, #ffd9c4, #ffe9d6 55%, #f9d3b8);
  transform: rotate(3deg);
}
.inside-frame {
  position: relative; z-index: 1; aspect-ratio: 4 / 5; border-radius: 26px; overflow: hidden;
  background: #f3ece2; cursor: zoom-in;
  box-shadow: 0 24px 60px -18px rgba(90,60,40,.35), 0 0 0 1px rgba(90,60,40,.08);
}
.inside-frame:focus-visible { outline: 2px solid #e8644a; outline-offset: 4px; }
.inside-zoom {
  position: absolute; z-index: 2; right: 14px; bottom: 14px; display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; border-radius: 999px; background: rgba(255,255,255,.88); color: #7a4f2c;
  font-size: 12px; line-height: 1; box-shadow: 0 4px 14px rgba(90,60,40,.18);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  transition: transform .2s ease; pointer-events: none;
}
.inside-frame:hover .inside-zoom { transform: translateY(-2px); }
.inside-shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; opacity: 0; transition: opacity .6s ease; }
.inside-shot.active { opacity: 1; }
.inside-caps { display: grid; }
.inside-cap {
  grid-area: 1 / 1; align-self: center;
  opacity: 0; transform: translateY(14px); pointer-events: none;
  transition: opacity .5s ease, transform .5s ease;
}
.inside-cap.active { opacity: 1; transform: none; pointer-events: auto; }
.inside-idx {
  display: block; font-size: clamp(64px, 9vw, 128px); font-weight: 800; line-height: .95; letter-spacing: -.02em;
  background: linear-gradient(180deg, #ffb59f 0%, #ffe0d3 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.inside-cap h3 { font-size: clamp(30px, 3.8vw, 52px); font-weight: 800; line-height: 1.2; letter-spacing: .01em; color: #2a1f1a; margin: 6px 0 18px; }
.inside-cap p { font-size: clamp(16px, 1.5vw, 20px); line-height: 1.9; color: #7a6a62; margin: 0; max-width: 24em; }
.inside-note { margin-top: 18px; font-size: 12px; color: #a99a8f; text-align: center; }

.team-grid-static { width: min(1200px, calc(100vw - 48px)); margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; animation: none !important; transform: none !important; }
.team-grid-static .team-card { flex: none; width: auto; }
.team-filmstrip:has(.team-grid-static)::before,
.team-filmstrip:has(.team-grid-static)::after { display: none; }

.persona-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}

.persona-images {
  position: relative; height: 520px;
  margin-left: -80px;
}
.persona-img-main {
  position: absolute;
  top: 0; left: 0; right: 60px; bottom: 60px;
  border-radius: 16px; overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.12);
}
.persona-img-main img {
  width: 100%; height: 100%; object-fit: cover;
  object-position: center 30%;
}
.persona-img-sub {
  position: absolute;
  bottom: 0; right: -20px;
  width: 50%; aspect-ratio: 4/3;
  border-radius: 12px; overflow: hidden;
  box-shadow: 0 12px 40px rgba(0,0,0,0.15);
  border: 4px solid var(--bg);
}
.persona-img-sub img {
  width: 100%; height: 100%; object-fit: cover;
  object-position: center 30%;
}

.persona-name {
  font-family: 'Songti SC', 'STSong', 'Noto Serif SC', 'Playfair Display', serif;
  font-size: 36px;
  font-weight: 600;
  color: var(--brand-warm);
  line-height: 1.2;
  margin-bottom: 8px;
  letter-spacing: 0.01em;
}
html[lang="en-US"] .persona-name {
  font-family: 'Playfair Display', Georgia, serif;
  letter-spacing: -0.02em;
}
.persona-taunt {
  font-size: 15px;
  color: var(--muted);
  font-style: italic;
  margin-bottom: 24px;
  opacity: 0.75;
}
.persona-meta {
  font-size: 13px; color: var(--muted); margin-bottom: 32px;
}
.persona-quote {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: 20px;
  color: var(--text);
  line-height: 1.6;
  margin-bottom: 32px;
  padding-left: 20px;
  border-left: 2px solid var(--gold);
}
.persona-desc {
  font-size: 15px; color: var(--muted);
  line-height: 1.8; margin-bottom: 28px;
}

/* ── 卖点三条 ── */
.persona-selling-points {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 28px;
}
.persona-sp {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.persona-sp-icon {
  flex-shrink: 0;
  width: 36px; height: 36px;
  border-radius: 10px;
  background: rgba(74,127,165,0.08);
  display: flex; align-items: center; justify-content: center;
  margin-top: 2px;
}
.persona-sp-icon svg {
  width: 18px; height: 18px;
  stroke: #4A7FA5;
}
.persona-sp-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 3px;
}
.persona-sp-desc {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.65;
}
.persona-tags {
  display: flex; flex-wrap: wrap; gap: 8px;
}
.persona-tag {
  font-size: 12px; padding: 5px 12px;
  border-radius: 20px; border: 1px solid var(--border);
  color: var(--muted); background: var(--bg);
}

/* ── Team ──────────────────────────────────────────────────── */
.team {
  background: #141210;
  padding: 100px 0 120px;
  overflow: hidden;
}
.team > .container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}
.team .section-label { color: #C9A96E; }
.team .section-title { color: #FAFAF7; }
.team .section-sub { color: rgba(250,250,247,0.5); }

/* 外层容器：打破 container 限制，全宽显示 */
.team-filmstrip {
  position: relative;
  width: 100vw;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 64px;
}
.team-filmstrip::before,
.team-filmstrip::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 120px;
  z-index: 2;
  pointer-events: none;
}
.team-filmstrip::before {
  left: 0;
  background: linear-gradient(to right, #141210 0%, transparent 100%);
}
.team-filmstrip::after {
  right: 0;
  background: linear-gradient(to left, #141210 0%, transparent 100%);
}

/* 滚动带：宽度由内容撑开，CSS 动画驱动；translateX(-50%) 在内容克隆一份后正好循环 */
.team-grid {
  display: flex;
  gap: 20px;
  width: max-content;
  animation: filmstrip-scroll 60s linear infinite;
}
@keyframes filmstrip-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.team-filmstrip:hover .team-grid {
  animation-play-state: paused;
}

/* 卡片：横版宽图，每张约 33vw，3-4 张铺满全屏 */
.team-card {
  flex: 0 0 clamp(320px, 33vw, 480px);
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  cursor: default;
}

.team-card-cover-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: 12px;
}
/* 底部渐变遮罩，让文字可读 */
.team-card-cover-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    transparent 45%,
    rgba(14,12,10,0.65) 75%,
    rgba(14,12,10,0.88) 100%
  );
  border-radius: 12px;
}

.team-card-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
  display: block;
  transition: transform 0.8s ease;
}
.team-card:hover .team-card-cover {
  transform: scale(1.04);
}

/* 创建专属 OPC 的入口卡，和团队成员卡保持同样比例，填补网格中的最后一个位置。 */
.team-card-opc {
  min-height: 0;
  aspect-ratio: 2 / 3;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  color: rgba(250,250,247,0.86);
  text-decoration: none;
  border: 1px dashed rgba(212,175,96,0.45);
  background: #2b2823;
  transition: transform 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}
.team-card-opc:hover {
  transform: translateY(-4px);
  border-color: rgba(212,175,96,0.85);
  background: #2b2823;
}
.team-card-opc-cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .46; transition: transform .8s ease, opacity .25s ease; }
.team-card-opc::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,18,16,.12), rgba(20,18,16,.9)); pointer-events: none; }
.team-card-opc:hover .team-card-opc-cover { transform: scale(1.04); opacity: .62; }
.team-card-opc-inner { position: relative; z-index: 1; width: 100%; padding: 28px 22px 24px; text-align: center; }
.team-card-opc-plus {
  display: inline-flex;
  width: 42px; height: 42px;
  align-items: center; justify-content: center;
  margin-bottom: 14px;
  border: 1px solid rgba(212,175,96,0.65);
  border-radius: 50%;
  color: var(--gold);
  font-size: 28px;
  font-weight: 300;
  line-height: 1;
}
.team-card-opc-title { margin: 0; color: #FAFAF7; font-size: 18px; font-weight: 600; }
.team-card-opc-desc { max-width: 260px; margin: 10px auto 16px; color: rgba(250,250,247,0.58); font-size: 12px; line-height: 1.7; }
.team-card-opc-action { color: var(--gold); font-size: 12px; letter-spacing: .04em; }

/* 名字/角色叠在图片内底部 */
.team-card-body {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 16px 20px;
  z-index: 1;
}
.team-card-avatar { display: none; }
.team-card-info   { padding: 0; }

.team-card-name {
  font-size: 15px;
  font-weight: 600;
  color: #FAFAF7;
  margin-bottom: 3px;
  line-height: 1.3;
}
.team-card-name span:last-child {
  font-weight: 400;
  color: rgba(250,250,247,0.45);
  font-size: 13px;
  margin-left: 4px;
}
.team-card-role {
  font-size: 10px;
  color: #C9A96E;
  letter-spacing: 0.08em;
  font-weight: 500;
  text-transform: uppercase;
}
.team-card-desc { display: none; }

@media (max-width: 768px) {
  .day-in-life { padding: 78px 16px 84px; }
  .day-grid { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-rows: 400px; gap: 14px; }
  .day-card-breakfast, .day-card-work, .day-card-call, .day-card-friends,
  .day-card-reading, .day-card-travel, .day-card-food, .day-card-life { grid-column: auto; }
  .day-life-grid { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
  .day-card-breakfast, .day-card-friends, .day-card-work { grid-row: span 1; }
  .day-phone { width: 40%; }
  .day-card-copy { left: 22px; right: 22px; bottom: 22px; }
  .inside { padding: 64px 16px; }
  .inside-tabs { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; margin-left: -16px; margin-right: -16px; padding: 4px 16px 10px; scrollbar-width: none; }
  .inside-tabs::-webkit-scrollbar { display: none; }
  .inside-tab { padding: 9px 18px; font-size: 14px; flex: none; }
  .inside-card { grid-template-columns: 1fr; gap: 34px; padding: 26px 20px 30px; }
  .inside-device { width: min(100%, 360px); margin: 0 auto; }
  .inside-cap { text-align: center; }
  .inside-cap p { margin: 0 auto; }
  .team-grid-static { width: calc(100vw - 32px); grid-template-columns: 1fr; }
  .team { padding: 60px 0 80px; }
  .team-filmstrip { margin-top: 40px; }
  .team-filmstrip::before,
  .team-filmstrip::after { width: 48px; }
  .team-grid { gap: 10px; animation-duration: 40s; }
  .team-card { flex: 0 0 80vw; border-radius: 8px; }
  .team-card-cover-wrap { border-radius: 8px; }
  .team-card-body { padding: 12px 14px; }
  .team-card-name { font-size: 13px; }
  .team-card-role { font-size: 9px; }
}

@media (prefers-reduced-motion: reduce) {
  .team-grid { animation: none; }
}

/* ── Brainstorm ────────────────────────────────────────────── */
/* ── Brainstorm ─────────────────────────────────────────────────── */
.brainstorm {
  background: linear-gradient(180deg, #110f0d 0%, #1a1714 50%, #110f0d 100%);
  padding: 120px 0 100px;
  overflow: hidden;
  position: relative;
}

/* Subtle grid background for brainstorm */
.brainstorm::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: 
    linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
  background-size: 60px 60px;
  background-position: center;
  mask-image: radial-gradient(circle at center, black 0%, transparent 70%);
  -webkit-mask-image: radial-gradient(circle at center, black 0%, transparent 70%);
  z-index: 1;
}

.brainstorm .container {
  position: relative;
  z-index: 2;
}

.brainstorm .section-label { color: rgba(255,255,255,0.45); }
.brainstorm .section-title { color: #f5f0e8; margin-bottom: 24px; }
.brainstorm .section-sub { color: rgba(255,255,255,0.6); }

/* 圆桌区域 */
.bs-showcase {
  position: relative;
  width: 100%;
  height: 520px;
  margin: 64px auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bs-roundtable {
  position: relative;
  width: 100%;
  max-width: 560px;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Concentric Rings */
.bs-ring {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.06);
}
.bs-ring-1 { width: 60%; height: 60%; animation: bs-pulse 4s ease-in-out infinite alternate; }
.bs-ring-2 { width: 80%; height: 80%; border-style: dashed; animation: bs-spin-slow 60s linear infinite; }
.bs-ring-3 { width: 100%; height: 100%; animation: bs-pulse 5s ease-in-out infinite alternate-reverse; }

@keyframes bs-spin-slow {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}
@keyframes bs-pulse {
  0%   { opacity: 0.4; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 1;   transform: translate(-50%, -50%) scale(1.03); }
}

/* 中心命题卡 */
.bs-topic-card {
  position: relative;
  background: rgba(30, 26, 24, 0.8);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,0.15);
  box-shadow: 0 16px 40px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.1);
  border-radius: 16px;
  padding: 20px 24px;
  text-align: center;
  z-index: 10;
  max-width: 180px;
}
.bs-topic-glow {
  position: absolute;
  inset: -1px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(255,255,255,0.3) 0%, transparent 50%, rgba(255,255,255,0.1) 100%);
  z-index: -1;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  padding: 1px;
}
.bs-topic-icon {
  color: #fff;
  margin-bottom: 8px;
  display: inline-flex;
  background: rgba(255,255,255,0.1);
  padding: 8px;
  border-radius: 50%;
}
.bs-topic-icon svg { width: 18px; height: 18px; }
.bs-topic-text {
  color: #f5f0e8;
  font-size: 14px;
  line-height: 1.5;
  margin: 0;
  font-weight: 500;
}

/* 头像环 */
.bs-avatars-ring {
  position: absolute;
  inset: 0;
  z-index: 5;
}
.bs-avatar-slot {
  position: absolute;
  transform: translate(-50%, -50%);
  text-align: center;
  z-index: 5;
}
.bs-avatar-slot:hover {
  z-index: 50;
}
.bs-avatar-float {
  animation: bs-float 4s ease-in-out infinite alternate;
}
.bs-avatar-slot:nth-child(1) .bs-avatar-float { animation-delay: 0s;   animation-duration: 3.5s; }
.bs-avatar-slot:nth-child(2) .bs-avatar-float { animation-delay: 0.5s; animation-duration: 4.0s; }
.bs-avatar-slot:nth-child(3) .bs-avatar-float { animation-delay: 1.0s; animation-duration: 3.8s; }
.bs-avatar-slot:nth-child(4) .bs-avatar-float { animation-delay: 1.5s; animation-duration: 4.2s; }
.bs-avatar-slot:nth-child(5) .bs-avatar-float { animation-delay: 2.0s; animation-duration: 3.6s; }
.bs-avatar-slot:nth-child(6) .bs-avatar-float { animation-delay: 2.5s; animation-duration: 4.1s; }
.bs-avatar-slot:nth-child(7) .bs-avatar-float { animation-delay: 3.0s; animation-duration: 3.9s; }
.bs-avatar-img-wrap {
  width: 56px; height: 56px;
  border-radius: 50%;
  padding: 3px;
  background: linear-gradient(135deg, rgba(255,255,255,0.2), rgba(255,255,255,0.05));
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  transition: transform 0.3s;
}
.bs-avatar-slot img {
  width: 100%; height: 100%;
  border-radius: 50%;
  object-fit: cover;
  background: #1a1714;
}
.bs-avatar-slot:hover .bs-avatar-img-wrap {
  transform: scale(1.15);
  background: linear-gradient(135deg, rgba(255,255,255,0.5), rgba(255,255,255,0.1));
}
.bs-avatar-label {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  color: rgba(255,255,255,0.8);
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(4px);
  padding: 3px 8px;
  border-radius: 10px;
  margin-top: 6px;
  white-space: nowrap;
  letter-spacing: 0.3px;
  border: 1px solid rgba(255,255,255,0.08);
}

@keyframes bs-float {
  0%   { transform: translateY(0) scale(1); }
  100% { transform: translateY(-14px) scale(1.04); }
}

/* 流程步骤 */
.bs-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 960px;
  margin: 0 auto 80px;
}
.bs-step-card {
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 24px;
  padding: 32px 28px;
  text-align: left;
  display: flex;
  flex-direction: column;
  transition: transform 0.3s, background 0.3s, border-color 0.3s;
}
.bs-step-card:hover {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.15);
  transform: translateY(-4px);
}
.bs-step-icon {
  width: 48px; height: 48px;
  border-radius: 14px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  color: #fff;
  font-size: 18px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
}
.bs-step-title {
  color: #f5f0e8;
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 12px;
}
.bs-step-desc {
  color: rgba(255,255,255,0.55);
  font-size: 14px;
  line-height: 1.7;
  margin: 0;
}

/* 底部头像墙 - Marquee */
.bs-avatar-marquee {
  text-align: center;
  position: relative;
  z-index: 100;
}
.bs-wall-caption {
  color: rgba(255,255,255,0.4);
  font-size: 13px;
  margin-bottom: 24px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.marquee-track-container {
  width: 100%;
  max-width: 800px;
  margin: -80px auto -20px;
  padding: 80px 0 20px;
  overflow: hidden;
  position: relative;
  mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}
.marquee-track {
  display: flex;
  width: max-content;
  gap: 16px;
  animation: marquee-scroll 35s linear infinite;
}
.marquee-track:hover {
  animation-play-state: paused;
}
.marquee-item {
  position: relative;
  cursor: pointer;
}
.marquee-item img {
  width: 56px; height: 56px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(255,255,255,0.1);
  background: #1a1714;
  transition: transform 0.3s, border-color 0.3s;
}
.marquee-item:hover img {
  transform: scale(1.15) translateY(-4px);
  border-color: rgba(255,255,255,0.3);
}

/* Tooltip shared styles */
.tooltip-target, .marquee-item {
  position: relative;
  cursor: pointer;
  z-index: 1;
}
.tooltip-target:hover, .marquee-item:hover {
  z-index: 100;
}
.tooltip-target::after, .marquee-item::after {
  content: attr(data-quote);
  position: absolute;
  bottom: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%) translateY(10px) scale(0.95);
  background: rgba(30, 26, 24, 0.95);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.15);
  color: #fff;
  padding: 10px 16px;
  border-radius: 12px;
  font-size: 13px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 8px 30px rgba(0,0,0,0.4);
  z-index: 20;
}
.tooltip-target::before, .marquee-item::before {
  content: '';
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  border-width: 6px;
  border-style: solid;
  border-color: rgba(30, 26, 24, 0.95) transparent transparent transparent;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 21;
}
.tooltip-target:hover::after, .marquee-item:hover::after,
.tooltip-target:hover::before, .marquee-item:hover::before {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0) scale(1);
}
.tooltip-target:hover::before, .marquee-item:hover::before {
  transform: translateX(-50%) translateY(0);
}

@keyframes marquee-scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(calc(-50% - 8px)); }
}

/* 响应式 */
@media (max-width: 900px) {
  .bs-steps {
    grid-template-columns: 1fr;
    gap: 16px;
    max-width: 400px;
    margin: 0 auto 60px;
  }
}
@media (max-width: 768px) {
  .brainstorm { padding: 80px 0 60px; }
  .bs-showcase { height: 380px; margin: 40px auto; }
  .bs-roundtable { max-width: 340px; }
  .bs-avatar-img-wrap { width: 44px !important; height: 44px !important; }
  .bs-avatar-label { font-size: 9px; padding: 2px 6px; }
  .bs-topic-card { padding: 14px 18px; max-width: 140px; }
  .bs-topic-text { font-size: 12px; }
  .bs-topic-icon svg { width: 14px; height: 14px; }
  .marquee-track img, .marquee-item img { width: 48px; height: 48px; }
}

@media (prefers-reduced-motion: reduce) {
  .bs-avatar-float { animation: none; }
  .bs-ring-2 { animation: none; }
  .marquee-track { animation: none; overflow-x: auto; }
}

/* ── Providers ─────────────────────────────────────────────── */
.providers { background: var(--bg); }
.providers-sub { text-align: center; max-width: 100%; }

/* ── 供应商 chip 列表 ── */
.providers-grid {
  display: flex; flex-wrap: wrap;
  gap: 12px; justify-content: center;
  margin-top: 48px;
}
.provider-chip {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 16px; border-radius: 24px;
  border: 1px solid var(--border);
  background: var(--bg);
  font-size: 12.5px; font-weight: 500;
  transition: border-color 0.2s, transform 0.2s;
}
.provider-chip:hover { border-color: var(--blue); transform: translateY(-2px); }
.provider-dot {
  width: 7px; height: 7px; border-radius: 50%;
}

.providers-note {
  text-align: center; margin-top: 32px;
  font-size: 13px; color: var(--muted);
}

/* 保留旧 featured chip 样式以兼容其他地方 */
.provider-chip-featured {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 20px; border-radius: 24px;
  border: 1.5px solid rgba(99,102,241,0.55);
  background: rgba(99,102,241,0.08);
  font-size: 13px; font-weight: 600;
  color: inherit;
  text-decoration: none;
  transition: border-color 0.2s, transform 0.2s, background 0.2s;
  position: relative;
}
.provider-chip-featured:hover {
  border-color: #6366f1;
  background: rgba(99,102,241,0.14);
  transform: translateY(-2px);
  color: inherit;
  text-decoration: none;
}
.provider-chip-featured .chip-badge {
  display: inline-flex; align-items: center;
  background: #6366f1; color: #fff;
  font-size: 10px; font-weight: 700;
  padding: 1px 6px; border-radius: 10px;
  letter-spacing: 0.03em;
  line-height: 1.6;
}
.provider-chip-icon {
  width: 16px; height: 16px;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

/* ── Gallery Row ───────────────────────────────────────────── */
.gallery-section { padding: 0; overflow: hidden; }
.gallery-row {
  display: flex; gap: 0;
  height: 320px;
}
.gallery-item {
  flex: 1; overflow: hidden; position: relative;
  transition: flex 0.5s ease;
  cursor: pointer;
}
.gallery-item:hover { flex: 1.6; }
.gallery-item img {
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.15);
  transform-origin: center center;
  transition: transform 0.5s ease;
}
.gallery-item:hover img { transform: scale(1.1); }
.gallery-item-caption {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 16px;
  background: linear-gradient(to top, rgba(0,0,0,0.5) 0%, transparent 100%);
  color: white; font-size: 12px;
  opacity: 0; transition: opacity 0.3s;
}
.gallery-item:hover .gallery-item-caption { opacity: 1; }

/* ── CTA ───────────────────────────────────────────────────── */
.cta-section {
  background: var(--text);
  padding: 120px 24px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta-section::before {
  content: '';
  position: absolute; inset: 0;
  background: url('https://img.alice.fans/illustrations/life_wide/life_onboarding_teahouse.jpg') center 30% / cover no-repeat;
  opacity: 0.06;
}
.cta-inner { position: relative; z-index: 1; }
.cta-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(36px, 5.5vw, 64px);
  font-weight: 700;
  color: var(--bg);
  margin-bottom: 16px;
  line-height: 1.15;
  letter-spacing: -0.01em;
}
.cta-title em { font-style: italic; color: #C9A96E; }
.cta-sub {
  font-size: 16px; color: rgba(250,250,247,0.55);
  margin-bottom: 48px;
}
.btn-cta {
  position: relative;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 16px 36px; border-radius: 32px;
  background: var(--bg); color: var(--text);
  font-size: 15px; font-weight: 500;
  transition: transform 0.2s, opacity 0.2s, box-shadow 0.2s;
}
.btn-cta:hover { transform: translateY(-2px); opacity: 0.92; }

.cta-download-group {
  display: flex; gap: 20px; justify-content: center;
  align-items: stretch; flex-wrap: wrap;
  margin-bottom: 20px;
}

.btn-cta-primary {
  background: #FAFAF7;
  color: #1a1a18;
  box-shadow: 0 0 0 0 rgba(250,250,247,0);
  flex-direction: column; align-items: flex-start;
  padding: 18px 32px;
  gap: 4px;
  min-width: 200px;
}
.btn-cta-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 40px rgba(250,250,247,0.15);
  opacity: 1;
}
.btn-cta-primary .btn-label {
  display: flex; align-items: center; gap: 8px;
  font-size: 15px; font-weight: 600;
}
.btn-cta-primary .btn-hint {
  font-size: 11px; font-weight: 400;
  color: #888880;
  padding-left: 26px;
  letter-spacing: 0.02em;
}

.btn-cta-secondary {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.18);
  color: rgba(255,255,255,0.75);
  flex-direction: column; align-items: flex-start;
  padding: 18px 32px;
  gap: 4px;
  min-width: 200px;
}
.btn-cta-secondary:hover {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.3);
  color: rgba(255,255,255,0.9);
  opacity: 1;
  transform: translateY(-2px);
}
.btn-cta-secondary .btn-label {
  display: flex; align-items: center; gap: 8px;
  font-size: 15px; font-weight: 500;
}
.btn-cta-secondary .btn-hint {
  font-size: 11px;
  color: rgba(255,255,255,0.35);
  padding-left: 26px;
  letter-spacing: 0.02em;
}

.download-divider {
  display: flex; align-items: center;
  color: rgba(255,255,255,0.2);
  font-size: 12px; padding: 0 4px;
  align-self: center;
}

.cta-chip-note {
  font-size: 11px; color: rgba(255,255,255,0.3);
  letter-spacing: 0.02em;
  margin-top: 4px;
}
.hero-chip-note {
  font-size: 11px; color: var(--muted);
  margin-top: 12px; letter-spacing: 0.01em;
}
.hero-download-stats {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 14px;
  font-size: 13px; color: var(--muted);
  opacity: 0;
  transition: opacity 0.6s ease;
}
.hero-download-stats.visible { opacity: 1; }
.hero-download-stats svg { flex-shrink: 0; }
.hero-download-stats .stat-num {
  font-weight: 600;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.hero-watcha-badge {
  display: block;
  margin-top: 18px;
  width: 360px;
  max-width: 100%;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.6s ease, transform 0.6s ease, filter 0.2s ease;
}
.hero-watcha-badge.visible { opacity: 1; transform: none; }
.hero-watcha-badge img { display: block; width: 100%; height: auto; }
.hero-watcha-badge:hover { filter: brightness(0.97); }

.fictional-tag {
  font-family: 'Inter', sans-serif;
  font-size: 10px; font-weight: 500;
  font-style: normal;
  color: var(--muted);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 1px 6px;
  letter-spacing: 0.05em;
  vertical-align: middle;
  margin-left: 6px;
}

.startup-tip {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 20px;
  padding: 10px 16px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 12px;
  font-size: 12px;
  color: rgba(255,255,255,0.55);
}
.startup-cmd-wrap {
  display: inline-flex; align-items: center; gap: 6px;
}
.startup-cmd {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: rgba(255,255,255,0.85);
  background: rgba(0,0,0,0.25);
  padding: 3px 8px;
  border-radius: 6px;
  letter-spacing: 0.01em;
}
.copy-btn {
  background: none; border: none; cursor: pointer;
  color: rgba(255,255,255,0.5);
  padding: 3px 5px; border-radius: 5px;
  transition: color 0.2s, background 0.2s;
  display: inline-flex; align-items: center;
}
.copy-btn:hover { color: rgba(255,255,255,0.9); background: rgba(255,255,255,0.1); }

.qr-trigger {
  position: relative;
  display: inline-flex;
}
.btn-cta-qr {
  cursor: pointer;
  border: none;
  font-family: inherit;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.25);
  color: rgba(255,255,255,0.85);
}
.btn-cta-qr:hover {
  background: rgba(255,255,255,0.2);
  transform: translateY(-2px);
}
.qr-popup {
  position: absolute;
  bottom: calc(100% + 16px);
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  background: rgba(255,255,255,0.72);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(255,255,255,0.6);
  border-radius: 20px;
  padding: 16px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.14), 0 2px 8px rgba(0,0,0,0.08);
  text-align: center;
  width: 188px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s, transform 0.22s;
}
.qr-popup::after {
  content: '';
  position: absolute;
  top: 100%; left: 50%;
  transform: translateX(-50%);
  border: 8px solid transparent;
  border-top-color: rgba(255,255,255,0.72);
}
.qr-popup img {
  width: 148px; height: 148px;
  object-fit: cover; border-radius: 10px;
  display: block; margin: 0 auto 10px;
}
.qr-popup p {
  font-size: 13px; font-weight: 600;
  color: #1a1714; margin-bottom: 4px;
}
.qr-popup span {
  font-size: 11px; color: #8a7f78;
  line-height: 1.5; display: block;
}
.qr-trigger:hover .qr-popup {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

/* ── Footer ────────────────────────────────────────────────── */
footer {
  background: var(--text);
  border-top: 1px solid rgba(255,255,255,0.06);
  padding: 40px 48px;
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 16px;
}
.footer-brand {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: 20px; color: var(--blue);
}
.footer-links {
  display: flex; gap: 10px 24px; list-style: none;
  /* 链接增多后（含三条内容页入口，英韩文案很长）必须允许换行，否则手机端整页被撑宽、布局塌到左半边 */
  flex-wrap: wrap; justify-content: center; max-width: 100%; margin: 0; padding: 0;
}
.footer-links a {
  font-size: 13px; color: rgba(250,250,247,0.4);
  transition: color 0.2s;
}
.footer-links a:hover { color: rgba(250,250,247,0.8); }
.footer-copy {
  font-size: 12px; color: rgba(250,250,247,0.35);
  line-height: 1.8; text-align: center;
}
.footer-copy a {
  color: rgba(250,250,247,0.5);
  text-decoration: none;
}
.footer-copy a:hover {
  color: rgba(250,250,247,0.8);
  text-decoration: underline;
}

.nav-changelog-link {
  position: relative;
}
.changelog-loading {
  text-align: center;
  padding: 40px 0;
  font-size: 13px;
  color: var(--muted);
}

/* ── Changelog Drawer ───────────────────────────────────────── */
.cl-overlay {
  position: fixed; inset: 0; z-index: 900;
  background: rgba(26, 23, 20, 0.45);
  backdrop-filter: blur(4px);
  opacity: 0; pointer-events: none;
  transition: opacity 0.3s ease;
}
.cl-overlay.open { opacity: 1; pointer-events: auto; }

.cl-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 901;
  width: min(680px, 92vw);
  background: var(--bg);
  border-left: 1px solid var(--border);
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.35s cubic-bezier(0.32, 0, 0.15, 1), visibility 0s linear 0.35s;
  box-shadow: -20px 0 60px rgba(0,0,0,0.12);
  /* 关闭时移出屏幕的抽屉不能参与布局宽度：部分手机浏览器会把它算进可滚动区域 */
  visibility: hidden;
}
.cl-drawer.open { transform: translateX(0); visibility: visible; transition: transform 0.35s cubic-bezier(0.32, 0, 0.15, 1), visibility 0s; }

.cl-drawer-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 28px 28px 20px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.cl-drawer-label {
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted); display: block; margin-bottom: 4px;
}
.cl-drawer-title {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: 22px; color: var(--blue);
}
.cl-close {
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface); border: none; border-radius: 8px;
  cursor: pointer; color: var(--muted);
  transition: background 0.2s, color 0.2s;
  flex-shrink: 0; margin-top: 4px;
}
.cl-close:hover { background: var(--border); color: var(--text); }

.cl-drawer-body {
  flex: 1; overflow-y: auto;
  padding: 0 28px 40px;
  scroll-behavior: smooth;
}
.cl-drawer-body::-webkit-scrollbar { width: 4px; }
.cl-drawer-body::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }

.cl-md h2 {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 15px; font-weight: 700;
  color: var(--text);
  margin: 32px 0 16px;
  padding: 20px 0 14px;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 10px;
  flex-wrap: wrap;
}
.cl-md h2:first-child { margin-top: 20px; }
.cl-ver-badge {
  font-size: 11px; font-weight: 700; letter-spacing: 0.04em;
  background: var(--text); color: var(--bg);
  padding: 2px 8px; border-radius: 6px;
  white-space: nowrap;
}
.cl-ver-badge.wip { background: var(--gold); color: var(--text); }
.cl-ver-date {
  font-size: 11px; font-weight: 400; color: var(--muted);
}
.cl-md h3 {
  font-size: 12px; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--muted);
  margin: 20px 0 10px;
}
.cl-md h4 {
  font-size: 13px; font-weight: 600; color: var(--text);
  margin: 14px 0 6px;
}
.cl-md ul {
  list-style: none; padding: 0; margin: 0 0 8px;
}
.cl-md ul li {
  font-size: 13px; color: var(--muted);
  line-height: 1.75;
  padding-left: 14px;
  position: relative;
}
.cl-md ul li::before {
  content: '\00B7';
  position: absolute; left: 0;
  color: var(--border);
}
.cl-md ul li ul { margin-top: 2px; }
.cl-md ul li ul li { font-size: 12px; padding-left: 14px; }
.cl-md strong { color: var(--text); font-weight: 600; }
.cl-md code {
  font-family: ui-monospace, 'SF Mono', Consolas, monospace;
  font-size: 11px; background: var(--surface);
  border: 1px solid var(--border);
  padding: 1px 5px; border-radius: 4px;
  color: var(--text);
}
.cl-md hr { display: none; }
.cl-md p { display: none; }
.cl-md > p:first-child { display: none; }
.cl-idea-link {
  font-family: ui-monospace, 'SF Mono', Consolas, monospace;
  font-size: 11px; font-weight: 600;
  color: var(--blue); text-decoration: none;
  background: rgba(74,127,165,0.08);
  padding: 1px 6px; border-radius: 4px;
  display: inline-flex; align-items: center;
  transition: background 0.2s;
}
.cl-idea-link:hover { background: rgba(74,127,165,0.18); text-decoration: none; }
.cl-user-link {
  font-size: 11px; font-weight: 600;
  color: #059669; text-decoration: none;
  background: rgba(5,150,105,0.10);
  padding: 1px 6px; border-radius: 4px;
  display: inline-flex; align-items: center; gap: 2px;
  transition: background 0.15s;
}
.cl-user-link:hover { background: rgba(5,150,105,0.18); text-decoration: none; }
.cl-load-more {
  text-align: center; padding: 20px 0 10px;
  font-size: 12px; color: var(--muted);
}

/* ── Scroll Fade In ────────────────────────────────────────── */
.fade-up {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.fade-up.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── Large screens ─────────────────────────────────────────── */
@media (min-width: 1440px) {
  nav {
    padding: 0 max(48px, 4vw);
  }
  .nav-links { gap: 40px; }
  .nav-links a { font-size: 14px; }
  .nav-cta { font-size: 14px; padding: 10px 24px; }

  .hero::before {
    width: 48vw;
  }
  .hero-content {
    width: 44vw;
    max-width: 700px;
    padding: 0 60px 0 max(100px, 8vw);
  }
  .hero-title {
    font-size: 72px;
  }
  .hero-subtitle {
    font-size: 18px;
    line-height: 2.2;
  }
  .hero-bg img {
    object-position: 62% 20%;
  }
}

@media (min-width: 1920px) {
  nav {
    padding: 0 max(60px, 5vw);
  }
  .nav-links { gap: 48px; }
  .nav-brand { font-size: 24px; }

  .hero::before {
    width: 46vw;
  }
  .hero-content {
    width: 40vw;
    max-width: 740px;
    padding: 0 60px 0 max(140px, 9vw);
  }
  .hero-title {
    font-size: 72px;
  }
  .hero-subtitle {
    font-size: 19px;
    line-height: 2.3;
  }
  .hero-bg img {
    object-position: 64% 18%;
  }
}

@media (min-width: 2560px) {
  nav {
    padding: 0 max(80px, 6vw);
  }
  .nav-brand { font-size: 26px; }

  .hero::before {
    width: 42vw;
  }
  .hero-content {
    width: 36vw;
    max-width: 800px;
    padding: 0 80px 0 max(240px, 12vw);
  }
  .hero-title {
    font-size: 72px;
  }
  .hero-subtitle {
    font-size: 21px;
    line-height: 2.3;
  }
  .hero-friend-avatar {
    width: 44px; height: 44px;
  }
  .hero-bg img {
    object-position: 66% 16%;
  }
}

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 1180px) {
  nav { padding: 0 28px; }
  .nav-links { display: none; }
}

@media (max-width: 768px) {
  nav { padding: 0 20px; }
  .nav-links { display: none; }
  section { padding: 72px 20px; }

  /* Hero */
  .hero { min-height: 100svh; padding-top: 64px; padding-bottom: 0; align-items: flex-end; }

  /* 移动端：磨砂面板半透明，只覆盖下半区域让文字可读 */
  .hero::before {
    width: 100%;
    top: auto; bottom: 0;
    height: 56%;
    backdrop-filter: blur(12px) saturate(1.3);
    -webkit-backdrop-filter: blur(12px) saturate(1.3);
    background: rgba(250,250,247,0.75);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.4) 15%, black 35%, black 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.4) 15%, black 35%, black 100%);
  }

  .hero-content {
    width: 100%;
    padding: 0 24px 48px;
  }
  .hero-subtitle { white-space: normal; }
  .hero-bg img { width: 100%; margin-left: 0; -webkit-mask-image: none; mask-image: none; object-position: 58% 15%; }
  .hero-bg::after {
    background: linear-gradient(to bottom, var(--bg) 0%, transparent 6%, transparent 50%, transparent 100%);
  }
  .hero-title { font-size: clamp(44px, 12vw, 72px); }
  .hero-slogan { font-size: clamp(24px, 5.5vw, 30px); margin-bottom: 20px; letter-spacing: 0.03em; }
  html[lang="en-US"] .hero-slogan { font-size: clamp(16px, 4.2vw, 20px); letter-spacing: 0.02em; white-space: normal; }
  .hero-actions { flex-direction: column; align-items: stretch; gap: 10px; }
  .hero-actions .btn-primary,
  .hero-actions .btn-secondary { text-align: center; justify-content: center; }
  .hero-evolution-compare { max-width: 100%; }
  .hero-scroll { display: none; }
  .hero-chip-note { font-size: 10px; }
  .hero-friends { flex-wrap: wrap; }

  /* Persona */
  .persona-inner { grid-template-columns: 1fr; gap: 40px; }
  .persona-images { height: 320px; }
  .gallery-row { height: 200px; }

  /* Evolution */
  .evo-detail { grid-template-columns: 1fr; gap: 32px; }
  .evo-guarantee-grid { grid-template-columns: 1fr; }
  .evo-scr-tabs { flex-direction: column; gap: 8px; }
  .evo-scr-card { padding: 12px 16px; }
  .evo-scr-card-icon { width: 32px; height: 32px; }
  .evo-scr-card-title { font-size: 13px; }
  .evo-scr-card-desc { font-size: 11px; }
  .evolution-section { padding: 72px 20px; }

  /* Providers / Model Wall */
  .providers-grid { gap: 8px; margin-top: 32px; }
  .provider-chip { padding: 8px 14px; font-size: 12px; }
  .provider-chip-featured { padding: 8px 14px; font-size: 12px; }
  footer { flex-direction: column; text-align: center; }
}

@media (max-width: 480px) {
  .hero-title { font-size: 36px; }
  .hero-slogan { font-size: 22px; letter-spacing: 0.03em; margin-bottom: 16px; }
  html[lang="en-US"] .hero-slogan { font-size: 15px; letter-spacing: 0.02em; white-space: normal; }
  .hero-title-sub { font-size: 18px; }
  .hero-content { padding: 0 16px 36px; }
  .hero-friend-avatar { width: 30px; height: 30px; }
  .hero::before { height: 60%; }
  .hero-cmp-row { padding: 8px 10px; }
  .hero-cmp-label { font-size: 11px; }
  .hero-cmp-desc { font-size: 10px; }

  .evolution-section { padding: 56px 16px; }
  .evo-header { margin-bottom: 48px; }
  .evo-step-title { font-size: 17px; }
  .evo-demo { padding: 16px 14px; }
  .evo-msg { max-width: 95%; }
  .evo-scope-grid { grid-template-columns: 1fr; }
  .evo-philosophy-inner { gap: 24px; }

  .providers-grid { gap: 6px; }
  .provider-chip { padding: 6px 10px; font-size: 11px; border-radius: 18px; }
  .provider-chip-featured { padding: 6px 10px; font-size: 11px; border-radius: 18px; }
  .provider-dot { width: 6px; height: 6px; }

  .persona-images { height: 240px; }
  .persona-img-main { right: 30px; bottom: 30px; }
  .persona-img-sub { width: 50%; }

  footer { padding: 32px 16px; gap: 12px; }
}

/* ── Gallery Section ──────────────────────────────────────── */
.gallery-section {
  padding: 80px 0;
  background: linear-gradient(180deg, var(--bg) 0%, #F5F3EE 50%, var(--bg) 100%);
}

.gallery-home-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 48px;
}

.gh-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  transition: all 0.25s;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  display: block;
}
.gh-card:hover {
  border-color: #D0C9BC;
  transform: translateY(-3px);
  box-shadow: 0 8px 28px rgba(0,0,0,0.06);
}

.gh-card-image img {
  width: 100%;
  display: block;
  aspect-ratio: 16/10;
  object-fit: cover;
}

.gh-card-quote {
  padding: 32px 24px;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 18px;
  font-style: italic;
  line-height: 1.5;
  color: var(--text);
  position: relative;
}
.gh-card-quote::before {
  content: '\201C';
  position: absolute;
  top: 8px;
  left: 14px;
  font-size: 42px;
  color: var(--blue);
  opacity: 0.18;
  font-family: 'Playfair Display', Georgia, serif;
}

.gh-card-body {
  padding: 14px 20px 18px;
}

.gh-card-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 6px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.gh-card-meta {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 12px;
  color: var(--muted);
}

.gh-card-type {
  display: inline-flex;
  padding: 2px 8px;
  border-radius: 8px;
  font-size: 10px;
  font-weight: 600;
  background: rgba(74,127,165,0.1);
  color: var(--blue);
}

.gh-card-like {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.gh-card-like svg {
  width: 12px;
  height: 12px;
}

.gallery-more-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  font-weight: 500;
  color: var(--blue);
  transition: opacity 0.2s;
}
.gallery-more-link:hover {
  opacity: 0.75;
}

@media (max-width: 900px) {
  .gallery-home-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .gallery-section { padding: 56px 16px; }
  .gallery-home-grid { grid-template-columns: 1fr; }
}

/* ── Reviews Section ──────────────────────────────────────────────── */
.reviews-section {
  background: var(--bg);
  padding: 80px 40px;
}
.reviews-grid {
  columns: 5;
  column-gap: 20px;
  max-width: 1600px;
  margin: 0 auto;
}
.review-kw {
  background: none;
  color: #E8571A;
  font-weight: 600;
}
.review-card {
  break-inside: avoid;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 20px 22px;
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.25s;
  opacity: 0;
  transform: translateY(16px);
}
.review-card.visible {
  opacity: 1;
  transform: translateY(0);
}
.review-card.visible:hover {
  transform: translateY(-3px);
  transition-delay: 0s !important;
  border-color: var(--gold);
  box-shadow: 0 6px 24px rgba(201,169,110,0.10), 0 2px 6px rgba(0,0,0,0.03);
}
.review-card:hover {
  transform: translateY(-3px);
  border-color: var(--gold);
  box-shadow: 0 6px 24px rgba(201,169,110,0.10), 0 2px 6px rgba(0,0,0,0.03);
}
.review-header {
  display: flex;
  align-items: center;
  gap: 12px;
}
.review-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 1.5px solid var(--border);
}
.review-card:hover .review-avatar {
  border-color: var(--gold);
}
.review-meta {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.review-name {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
}
.review-upvotes {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--muted);
  flex-shrink: 0;
  font-weight: 500;
}
.review-upvotes svg {
  color: #3baf79;
}
.review-content {
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--text);
  opacity: 0.8;
}
.review-content.collapsed {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 6;
  overflow: hidden;
}
.review-expand-btn {
  display: inline-block;
  margin-top: 4px;
  font-size: 12.5px;
  color: var(--gold);
  cursor: pointer;
  user-select: none;
  font-weight: 500;
  opacity: 0.9;
  transition: opacity 0.2s;
  text-decoration: none;
}
.review-expand-btn:hover {
  opacity: 1;
}
.reviews-watcha-link {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  margin: 0 2px;
}
.reviews-watcha-logo {
  height: 18px;
  width: auto;
  vertical-align: middle;
  opacity: 0.75;
  transition: opacity 0.2s;
}
.reviews-watcha-link:hover .reviews-watcha-logo {
  opacity: 1;
}
a.review-card {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
@media (max-width: 960px) {
  .reviews-grid { columns: 2; }
}
@media (max-width: 640px) {
  .reviews-section { padding: 60px 16px; }
  .reviews-grid { columns: 1; column-gap: 0; }
}

/* ── Language Switcher (in footer) ── */
.footer-lang {
  display: flex;
  flex-wrap: wrap;
  max-width: 100%;
  justify-content: center;
  gap: 4px;
  margin: 20px auto 16px;
  padding: 4px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 20px;
  width: fit-content;
}
.lang-btn {
  padding: 6px 14px;
  border: none;
  background: transparent;
  border-radius: 16px;
  font-size: 13px;
  color: rgba(255,255,255,0.5);
  cursor: pointer;
  transition: all 0.2s;
  font-weight: 500;
}
.lang-btn:hover { color: rgba(255,255,255,0.85); background: rgba(255,255,255,0.08); }
.lang-btn.active { background: rgba(255,255,255,0.15); color: #fff; }

@media (max-width: 768px) {
  .lang-btn { padding: 5px 10px; font-size: 12px; }
}

/* ── Careers Popup（招聘拍脸图弹窗）已于 2026-07-01 下线 ──────────
   应用户要求移除首页招聘弹窗广告，对应 HTML/JS 已同步移除。
   相关 CSS 规则（含移动端媒体查询）整体删除；如需恢复可从 git 历史中找回本文件此前版本。 */

/* ── 加群二维码 Lightbox ────────────────────────────────────────
   背景：加群入口原本跳金山文档，用户要在文档里再找一次二维码才能扫。
   设计意图：就地弹一张二维码，桌面用微信扫、手机长按识别，两种情况一句提示覆盖。
   关键约束：二维码必须白底承托（识别依赖黑白对比），且不加任何滤镜或 CDN 有损参数。 */
.qr-overlay {
  position: fixed; inset: 0; z-index: 950;
  background: rgba(26, 23, 20, 0.5);
  backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  opacity: 0; pointer-events: none;
  transition: opacity 0.25s ease;
}
.qr-overlay.open { opacity: 1; pointer-events: auto; }

.qr-modal {
  position: relative;
  width: min(340px, 100%);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 28px 24px 24px;
  text-align: center;
  box-shadow: 0 24px 70px rgba(0,0,0,0.22);
  transform: translateY(12px) scale(0.98);
  transition: transform 0.28s cubic-bezier(0.32, 0, 0.15, 1);
}
.qr-overlay.open .qr-modal { transform: translateY(0) scale(1); }

.qr-modal-close {
  position: absolute; top: 12px; right: 12px;
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface); border: none; border-radius: 8px;
  cursor: pointer; color: var(--muted);
  transition: background 0.2s, color 0.2s;
}
.qr-modal-close:hover { background: var(--border); color: var(--text); }

.qr-modal-title { font-size: 17px; font-weight: 700; margin-bottom: 6px; }
.qr-modal-sub { font-size: 13px; color: var(--muted); margin-bottom: 20px; line-height: 1.6; }

.qr-modal-frame {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 12px;
  margin-bottom: 16px;
}
.qr-modal-frame img { width: 100%; height: auto; border-radius: 6px; background: #fff; }

.qr-modal-hint { font-size: 13px; font-weight: 600; margin-bottom: 2px; }
.qr-modal-hint-sub { font-size: 12px; color: var(--muted); }

.qr-modal-link {
  display: inline-flex; align-items: center; justify-content: center;
  margin-top: 16px; padding: 10px 18px;
  border-radius: 10px; border: 1px solid var(--border);
  background: transparent; color: var(--muted);
  font-size: 13px; font-weight: 600;
  transition: background 0.18s, color 0.18s;
}
.qr-modal-link:hover { background: var(--surface); color: var(--text); }

@media (max-width: 480px) {
  .qr-modal { padding: 24px 18px 20px; }
  .qr-modal-title { font-size: 16px; }
}

/* Homepage friends: static portrait gallery, independent of JS and legacy filmstrip. */
#team { background: #f0eee7; padding: 96px 0; }
#team .section-label { color: #9b7457; }
#team .section-title { color: #343a32; }
#team .section-sub { color: #73786e; }
#team .team-filmstrip { width: 100%; left: auto; transform: none; margin-top: 48px; }
#team .team-filmstrip::before, #team .team-filmstrip::after { display: none; }
#team .team-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); width: 100%; gap: 24px; animation: none; transform: none; }
#team .team-card { min-width: 0; width: 100%; border-radius: 16px; background: #faf9f5; border: 1px solid #e3e1d7; }
#team .team-card-cover-wrap { aspect-ratio: 2 / 3; border-radius: 0; }
#team .team-card-cover-wrap::after { display: none; }
#team .team-card-cover { object-fit: cover; object-position: center; }
#team .team-card-body { position: relative; padding: 18px; }
#team .team-card-name { color: #343a32; font-size: 17px; }
#team .team-card-name span:last-child { color: #92978b; }
#team .team-card-role { color: #96785e; font-size: 11px; margin-top: 7px; }
#team .team-card-desc { display: block; color: #7b7f75; font-size: 12px; line-height: 1.8; margin-top: 10px; }
@media(max-width: 960px) { #team .team-grid { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; } }
@media(max-width: 640px) { #team { padding: 64px 0; } #team .team-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; } #team .team-card-body { padding: 12px; } #team .team-card-name { font-size: 14px; } }

/* 首页团队网格：成员数不是列数的整倍数时，OPC 入口卡横向撑满最后一行，不留空位。
   成员 13 人 + 入口卡 = 14 格：4 列时末行剩 3 格（占 3），3 列时末行剩 2 格（占 2），2 列刚好排满。
   外观与上方成员卡同一套浅色卡片语言，虚线边框表示「这里等你来填」。 */
#team .team-card-opc { grid-column: span 3; aspect-ratio: auto; min-height: 320px; align-items: center; background: #faf9f5; border: 1.5px dashed #d9b48f; color: #343a32; }
#team .team-card-opc:hover { background: #fdf6ec; border-color: #b0794f; }
#team .team-card-opc::after { display: none; }
#team .team-card-opc-inner { max-width: 520px; padding: 32px 28px; }
#team .team-card-opc-stack { display: inline-flex; align-items: center; margin-bottom: 18px; }
#team .team-card-opc-stack img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; border: 3px solid #faf9f5; margin-left: -12px; box-shadow: 0 2px 8px rgba(80,55,30,.12); }
#team .team-card-opc-stack img:first-child { margin-left: 0; }
#team .team-card-opc-plus { width: 52px; height: 52px; margin: 0 0 0 -12px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; border: 1.5px dashed #b0794f; background: #fdf6ec; color: #b0794f; font-size: 26px; font-weight: 300; line-height: 1; }
#team .team-card-opc-title { color: #343a32; font-size: 19px; }
#team .team-card-opc-desc { max-width: 380px; margin: 10px auto 18px; color: #7b7f75; font-size: 13px; }
#team .team-card-opc-action { display: inline-flex; align-items: center; gap: 6px; padding: 9px 18px; border-radius: 999px; background: linear-gradient(135deg, #c48a5c, #b0794f); color: #fff; font-size: 13px; font-weight: 600; letter-spacing: 0; box-shadow: 0 6px 16px rgba(176,121,79,.28); transition: background .2s ease, transform .2s ease; }
#team .team-card-opc:hover .team-card-opc-action { background: linear-gradient(135deg, #b87a4c, #9c6540); transform: translateY(-1px); }
@media(max-width: 960px) { #team .team-card-opc { grid-column: span 2; } }
@media(max-width: 640px) {
  #team .team-card-opc { grid-column: span 1; min-height: 0; align-items: center; }
  #team .team-card-opc-inner { padding: 20px 10px; }
  #team .team-card-opc-stack img, #team .team-card-opc-plus { width: 38px; height: 38px; margin-left: -9px; }
  #team .team-card-opc-stack img:first-child { margin-left: 0; }
  #team .team-card-opc-title { font-size: 14px; }
  #team .team-card-opc-desc { font-size: 11px; margin: 6px auto 12px; }
  #team .team-card-opc-action { padding: 7px 12px; font-size: 12px; }
}

/* ── 中文排版：不用宋体、不用斜体 ───────────────────────────────
   中文没有斜体的概念，强行倾斜只是把字形拉歪；各处 serif 声明在 macOS 上会把中文落到宋体，
   所以中文界面统一回到无衬线，斜体一律取消。英文界面（html[lang="en-US"]）保留原有的衬线与斜体设计。
   选择器带 :not() 链是为了稳稳压过各处单类选择器，不用 !important。 */
html:not([lang^="en"]) body *:not(code):not(pre):not(kbd):not(samp) {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
  font-style: normal;
}

/* ── 认识白艾莉：排版 ─────────────────────────────────────── */
.persona-name { font-size: 34px; font-weight: 700; line-height: 1.25; letter-spacing: -0.01em; margin-bottom: 14px; word-break: keep-all; }
.persona-taunt { font-size: 17px; line-height: 1.7; color: var(--text); opacity: 1; margin-bottom: 30px; padding-left: 14px; border-left: 3px solid #d9b48f; text-wrap: balance; word-break: keep-all; }
.persona-selling-points { gap: 12px; margin-bottom: 26px; }
.persona-sp { gap: 16px; align-items: center; padding: 16px 18px; border: 1px solid var(--border); border-radius: 14px; background: #fff; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.persona-sp:hover { transform: translateX(4px); border-color: #d9b48f; box-shadow: 0 8px 24px rgba(80,55,30,.08); }
.persona-sp-icon { width: 42px; height: 42px; margin-top: 0; border-radius: 12px; background: rgba(176,121,79,.12); }
.persona-sp-icon svg { width: 20px; height: 20px; stroke: #b0794f; }
.persona-sp-title { font-size: 16px; font-weight: 700; margin-bottom: 4px; }
.persona-sp-desc { font-size: 13.5px; line-height: 1.7; text-wrap: pretty; }
.persona-tags { gap: 8px; }
.persona-tag { font-size: 12.5px; padding: 6px 14px; border-color: #e6d6c4; background: #fbf6ec; color: #8a6a4f; }
.persona-tag:last-child { background: linear-gradient(135deg, #fbeedd 0%, #f6dcc0 100%); border-color: #e3c19c; color: #7a4f2c; font-weight: 600; box-shadow: 0 2px 10px rgba(176,121,79,.14); }
@media (max-width: 768px) {
  .persona-name { font-size: 28px; }
  .persona-taunt { font-size: 15.5px; }
  .persona-sp { padding: 14px; gap: 12px; align-items: flex-start; }
  .persona-sp:hover { transform: none; }
}

.provider-chip { text-decoration: none; color: inherit; }

/* ── 概念区：全模态 Personal Agent → 关系型生产力 Agent ───────── */
.concept { padding: 148px 24px 40px; background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(217,180,143,.20), rgba(217,180,143,0) 70%), var(--bg); }
.concept .container { max-width: 1240px; }
.concept-inner { display: block; }
.concept-head { max-width: 1160px; margin: 0 auto 64px; text-align: center; }
.concept-title { font-size: clamp(30px, 4.6vw, 64px); font-weight: 700; line-height: 1.12; letter-spacing: -0.025em; color: var(--text); margin: 0 0 28px; text-wrap: balance; }
.concept-sub { max-width: 860px; margin-left: auto; margin-right: auto; }
@media (min-width: 700px) { .concept-title { white-space: nowrap; } }
.concept-sub { font-size: clamp(16px, 1.5vw, 19px); line-height: 1.9; color: var(--muted); margin: 0 auto; max-width: 860px; }
.concept-visual { border-radius: 30px; overflow: hidden; box-shadow: 0 40px 110px rgba(80,55,30,.22); background: #e9f1fb; }
.concept-visual img { display: block; width: 100%; height: auto; }
.concept-foot { max-width: 920px; margin: 56px auto 0; text-align: center; }
.concept-modes { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 0 0 40px; padding: 0; }
.concept-modes li { padding: 11px 22px; border-radius: 999px; border: 1px solid #e6d6c4; background: #fbf6ec; color: #8a6a4f; font-size: 15px; font-weight: 600; }
.concept-bridge { font-size: clamp(17px, 1.8vw, 22px); line-height: 1.85; color: var(--text); padding: 0; border: 0; background: none; margin: 0 auto; max-width: 780px; text-wrap: balance; }
.concept-bridge a, .positioning-back a { white-space: nowrap; color: #b0794f; font-weight: 700; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1.5px; }
.concept-bridge a:hover, .positioning-back a:hover { color: #8a5a36; }
.concept-term { white-space: nowrap; font-weight: 600; }
.positioning-back { margin: 16px 0 0; font-size: 14px; color: var(--muted); }
#relational-agent { padding-top: 88px; }
.concept-faq { max-width: 820px; margin: 72px auto 0; }
.concept-faq-title { font-size: 20px; font-weight: 700; color: var(--text); margin: 0 0 16px; text-align: center; }
.concept-faq-item { border: 1px solid var(--border); border-radius: 14px; background: #fff; margin-bottom: 10px; overflow: hidden; }
.concept-faq-item summary { cursor: pointer; padding: 16px 20px; font-size: 15px; font-weight: 600; color: var(--text); list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.concept-faq-item summary::-webkit-details-marker { display: none; }
.concept-faq-item summary::after { content: '+'; font-size: 20px; font-weight: 400; color: #b0794f; transition: transform .2s ease; }
.concept-faq-item[open] summary::after { transform: rotate(45deg); }
.concept-faq-item p { margin: 0; padding: 0 20px 18px; font-size: 14px; line-height: 1.85; color: var(--muted); }
@media (max-width: 860px) {
  .concept { padding: 64px 0 8px; }
  .concept-inner { grid-template-columns: 1fr; gap: 28px; }
  #relational-agent { padding-top: 64px; }
  .concept-faq { margin-top: 48px; }
}

/* 认识白艾莉主标题：中文一行放下，字号跟随文字列宽缩放（container query），不再把末尾「子」孤零零折到第二行。
   英文标题更长，仍允许折行，用 balance 让两行均匀。 */
.persona-text { container-type: inline-size; }
html:not([lang^="en"]) .persona-name { font-size: clamp(18px, 5.9cqw, 34px); white-space: nowrap; }
html[lang^="en"] .persona-name { text-wrap: balance; }
@media (max-width: 768px) { html:not([lang^="en"]) .persona-name { font-size: clamp(18px, 5.9cqw, 28px); } }

/* 常见问题独立成节，放在下载区之前 */
.faq-section { padding: 72px 0 24px; background: var(--bg); }
.faq-section .concept-faq { margin-top: 0; }
@media (max-width: 860px) { .faq-section { padding: 48px 0 8px; } }

/* ── 关系型生产力 Agent：放大标题、留白与卡片 ─────────────────── */
.positioning { padding: 120px 24px 160px; }
.positioning .container { max-width: 1240px; }
.positioning-intro { max-width: 900px; margin-bottom: 84px; }
.positioning .section-title { font-size: clamp(36px, 5.4vw, 68px); font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; margin: 10px 0 28px; text-wrap: balance; }
.positioning-intro .section-sub { width: fit-content; max-width: 780px; text-align: left; font-size: clamp(15px, 1.25vw, 17px); line-height: 1.9; color: #8a847c; }
.positioning-coda { display: block; margin-top: 0.9em; color: var(--brand-warm); font-weight: 500; }
.positioning-back { margin-top: 22px; font-size: 15px; }
.positioning-grid { border-radius: 24px; overflow: hidden; box-shadow: 0 30px 80px rgba(80,55,30,.10); }
.positioning-card { min-height: 340px; padding: 44px 34px 44px; }
.positioning-index { margin-bottom: 64px; font-size: 42px; font-weight: 300; letter-spacing: 0; color: #d9b48f; }
.positioning-card h3 { font-size: 30px; font-weight: 600; margin-bottom: 16px; }
.positioning-card p { font-size: 15px; line-height: 1.9; }
@media (max-width: 760px) {
  .concept { padding: 96px 20px 24px; }
  .concept-head { margin-bottom: 40px; }
  .concept-visual { border-radius: 20px; }
  .concept-foot { margin-top: 36px; }
  .concept-modes { gap: 8px; margin-bottom: 28px; }
  .concept-modes li { padding: 8px 15px; font-size: 13px; }
  .positioning { padding: 88px 20px 104px; }
  .positioning-intro { margin-bottom: 48px; }
  .positioning-card { min-height: 250px; padding: 28px 22px 30px; }
  .positioning-index { font-size: 32px; margin-bottom: 36px; }
  .positioning-card h3 { font-size: 24px; }
}

/* ── 下载区（#cta）：对齐 /download 页的浅色暖调设计 ──────────────────
   背景：原来是近黑底 + 白色按钮，与整页浅色基调不搭，也不如 /download 好看。
   设计意图：暖奶油渐变底，左侧插画卡（斜叠的杏粉底板 + 气泡），右侧品牌头、
   珊瑚渐变主按钮、白色次按钮、浅杏色终端提示。DOM 钩子（id、占位符、onclick）一概不动。 */
#cta.cta-section {
  background:
    radial-gradient(900px 520px at 8% -8%, #FFE2C4 0%, rgba(255,226,196,0) 60%),
    radial-gradient(800px 560px at 100% 0%, #DDEEFF 0%, rgba(221,238,255,0) 62%),
    radial-gradient(760px 520px at 0% 100%, #E5F3DF 0%, rgba(229,243,223,0) 60%),
    #FFF8EF;
  padding: 120px 24px 130px;
  text-align: left;
}
#cta.cta-section::before { content: none; }
#cta .cta-inner { max-width: 1040px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 64px; align-items: center; }
#cta .cta-main { min-width: 0; }

#cta .cta-art { position: relative; }
#cta .cta-art::before { content: ''; position: absolute; inset: -18px 26px 22px -18px; border-radius: 36px; background: linear-gradient(220deg, #FFE6C2 0%, #FFD0D6 100%); transform: rotate(-2.4deg); opacity: .8; }
#cta .cta-art img { position: relative; display: block; width: 100%; height: auto; aspect-ratio: 3 / 2.3; object-fit: cover; object-position: 38% center; border-radius: 28px; border: 6px solid #fff; box-shadow: 0 24px 60px rgba(150,100,60,.22); }
#cta .cta-art-tag { position: absolute; left: 18px; bottom: 18px; padding: 9px 16px; border-radius: 14px; background: rgba(255,255,255,.92); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); font-size: 13px; font-weight: 500; color: #5A4A3E; box-shadow: 0 8px 22px rgba(120,90,50,.15); }

#cta .cta-head { display: flex; align-items: center; gap: 16px; padding-bottom: 22px; margin-bottom: 18px; border-bottom: 1px dashed #EBDFD1; }
#cta .cta-logo { width: 68px; height: 68px; flex-shrink: 0; border-radius: 50%; object-fit: cover; background: #fff; border: 4px solid #fff; box-shadow: 0 10px 28px rgba(228,88,109,.22), 0 0 0 6px rgba(255,213,138,.28); }
#cta .cta-title { font-family: inherit; font-size: 21px; font-weight: 700; line-height: 1.45; letter-spacing: .01em; color: #2B2420; margin: 0; text-wrap: balance; }
#cta .cta-tagline { margin: 8px 0 0; font-size: 15px; font-weight: 500; color: #E4586D; letter-spacing: .12em; }
#cta .cta-sub { font-size: 13px; color: #8A7D73; margin: 0 0 24px; letter-spacing: .02em; }

#cta .cta-download-group { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px; }
#cta .btn-cta { padding: 15px 20px; border-radius: 16px; min-width: 0; box-shadow: none; }
#cta .btn-cta:hover { opacity: 1; transform: translateY(-2px); }
#cta .btn-cta-primary, #cta .btn-cta-secondary { flex-direction: column; align-items: flex-start; gap: 3px; }
#cta .btn-cta-primary, #cta .btn-cta-secondary:not(.btn-cta-win) { grid-column: 1 / -1; }
#cta .btn-cta-primary { background: linear-gradient(135deg, #F5908F 0%, #E4586D 100%); color: #fff; box-shadow: 0 10px 26px rgba(228,88,109,.30); }
#cta .btn-cta-primary:hover { box-shadow: 0 14px 32px rgba(228,88,109,.38); }
#cta .btn-cta-primary .btn-hint { color: rgba(255,255,255,.84); }
#cta .btn-cta-secondary { background: rgba(255,255,255,.88); border: 1px solid #EBDFD1; color: #2B2420; box-shadow: 0 4px 14px rgba(120,90,50,.06); }
#cta .btn-cta-secondary:hover { background: #fff; border-color: #E3CDB6; color: #2B2420; box-shadow: 0 8px 20px rgba(120,90,50,.12); }
#cta .btn-cta-secondary .btn-label svg { color: #E4586D; }
#cta .btn-cta-secondary .btn-hint { color: #B3A598; }
#cta .btn-cta-qr { align-self: stretch; justify-content: center; text-decoration: none; background: rgba(255,255,255,.88); border: 1px solid #EBDFD1; color: #2B2420; font-weight: 600; }
#cta .btn-cta-qr:hover { background: #fff; border-color: #E3CDB6; }
#cta .btn-cta-qr svg { color: #E4586D; }
#cta .cta-chip-note { font-size: 12px; color: #B3A598; margin: 0 0 16px; }
#cta .startup-tip { margin-top: 0; padding: 9px 14px; background: rgba(255,244,228,.9); border: 1px solid #F3DFC3; border-radius: 12px; color: #8B7762; }
#cta .startup-cmd { color: #6B4E3A; background: #fff; border: 1px solid #F0E0CA; }
#cta .copy-btn { color: #B39B83; }
#cta .copy-btn:hover { color: #E4586D; background: transparent; }

@media (max-width: 900px) {
  #cta.cta-section { padding: 84px 20px 96px; }
  #cta .cta-inner { grid-template-columns: 1fr; gap: 36px; max-width: 520px; }
  #cta .cta-art::before { inset: -10px 14px 16px -10px; }
  #cta .cta-art img { aspect-ratio: 16 / 10; }
}
@media (max-width: 500px) {
  #cta .cta-head { gap: 14px; }
  #cta .cta-logo { width: 56px; height: 56px; }
  #cta .cta-title { font-size: 19px; }
  #cta .cta-download-group { grid-template-columns: 1fr; }
}

/* 两个大区块的小标签原来只有 11px，在 76px 大标题旁显得太小：放大并上暖色 */
.concept .section-label, .positioning .section-label {
  font-size: clamp(16px, 1.5vw, 20px); font-weight: 600; letter-spacing: .14em;
  color: #b0794f; margin-bottom: 16px;
}
.positioning-card p { font-size: 16px; }
.positioning-back { font-size: 16px; }
.concept-modes li { font-size: 16px; }
@media (max-width: 760px) {
  .concept-modes li { font-size: 14px; }
  .positioning-card p { font-size: 15px; }
}


/* 向下的引导：放在四张能力卡（最后一张是「会来事」）之后，滑向紧随其后的「认识白艾莉」 */
.positioning-next { display: flex; width: fit-content; align-items: center; gap: 10px; margin: 88px auto 0; padding: 15px 30px; border-radius: 999px; background: linear-gradient(135deg, #F5908F 0%, #E4586D 100%); color: #fff; font-size: 17px; font-weight: 600; text-decoration: none; box-shadow: 0 12px 30px rgba(228,88,109,.28); transition: transform .2s ease, box-shadow .2s ease; }
.positioning-next:hover { transform: translateY(-2px); box-shadow: 0 16px 36px rgba(228,88,109,.36); }
.positioning-next svg { animation: positioningNextBob 1.6s ease-in-out infinite; }
@keyframes positioningNextBob { 0%, 100% { transform: translateY(-2px); } 50% { transform: translateY(3px); } }
@media (prefers-reduced-motion: reduce) { .positioning-next svg { animation: none; } }
@media (max-width: 760px) { .positioning-next { margin-top: 64px; padding: 13px 24px; font-size: 15px; } }

/* ── 二创展示（#gallery）：最新 10 张，一次一幅大图 + 创作者 + 文案 ─────────
   背景：原来是一排小卡片，信息只有标题；用户要「创作者、文案、大气」。
   设计意图：一张通栏大卡，左侧作品（模糊底 + 完整图，竖图横图都不裁），右侧编号、标题、
   一段文案、创作者；下面是自带进度的圆点。接口取不到时用 gallery-fallback.json 兜底。 */
.gs-section { padding: 128px 24px 136px; background: radial-gradient(ellipse 70% 50% at 50% 0%, rgba(245,144,143,.13), rgba(245,144,143,0) 70%), #fbf6ec; overflow: hidden; }
.gs-head { max-width: 860px; margin: 0 auto 64px; text-align: center; }
.gs-label { font-size: clamp(16px, 1.5vw, 20px); font-weight: 600; letter-spacing: .14em; color: #b0794f; margin: 0 0 16px; }
.gs-title-main { font-size: clamp(36px, 5.4vw, 68px); font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; color: var(--text); margin: 0 0 24px; text-wrap: balance; }
.gs-sub { font-size: clamp(16px, 1.5vw, 19px); line-height: 1.95; color: var(--muted); max-width: 760px; margin: 0 auto; }
.gs-count { margin: 22px 0 0; font-size: 15px; color: #b0794f; font-weight: 600; }
.gs-count #galleryTotal { font-size: 22px; font-variant-numeric: tabular-nums; }

.gs-stage { max-width: 1240px; margin: 0 auto; border-radius: 36px; background: #fff; box-shadow: 0 40px 110px rgba(120,80,40,.18); overflow: hidden; outline: none; }
.gs-stage:focus-visible { box-shadow: 0 0 0 3px rgba(228,88,109,.45), 0 40px 110px rgba(120,80,40,.18); }
.gs-slides { display: grid; }
.gs-slide { grid-area: 1 / 1; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); opacity: 0; visibility: hidden; transition: opacity .7s ease, visibility 0s linear .7s; }
.gs-slide.is-active { opacity: 1; visibility: visible; transition: opacity .7s ease, visibility 0s; }

.gs-media { position: relative; display: block; min-height: clamp(500px, 44vw, 600px); overflow: hidden; background: #f1e6d6; }
.gs-media-bg { position: absolute; inset: -30px; background-size: cover; background-position: center; filter: blur(34px) saturate(1.15); transform: scale(1.08); opacity: .9; }
.gs-media img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; transition: transform 6s ease-out; }
.gs-slide.is-active .gs-media img { transform: scale(1.025); }
.gs-type { position: absolute; left: 22px; top: 22px; padding: 7px 14px; border-radius: 999px; background: rgba(255,255,255,.9); color: #7a4f2c; font-size: 13px; font-weight: 600; box-shadow: 0 6px 18px rgba(0,0,0,.12); }

.gs-info { position: relative; display: flex; flex-direction: column; justify-content: center; padding: 56px 52px; }
.gs-info::before { content: '\201C'; position: absolute; right: 38px; top: 6px; font-size: 150px; line-height: 1; color: rgba(228,88,109,.12); font-family: Georgia, 'Times New Roman', serif; pointer-events: none; }
.gs-no { display: flex; align-items: baseline; gap: 8px; margin-bottom: 20px; color: #c8b8a6; font-variant-numeric: tabular-nums; }
.gs-no b { font-size: 46px; font-weight: 300; color: #E4586D; line-height: 1; }
.gs-no span { font-size: 15px; letter-spacing: .1em; }
.gs-title { font-size: clamp(26px, 2.6vw, 38px); font-weight: 700; line-height: 1.3; color: var(--text); margin: 0 0 20px; text-wrap: balance; }
.gs-copy { font-size: 17px; line-height: 1.95; color: #6b6259; margin: 0 0 32px; white-space: pre-line; display: -webkit-box; -webkit-line-clamp: 7; -webkit-box-orient: vertical; overflow: hidden; }
.gs-by { display: flex; align-items: center; gap: 14px; padding-top: 24px; border-top: 1px dashed #eadfce; }
.gs-avatar { flex: 0 0 auto; width: 52px; height: 52px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 700; color: #fff; background: linear-gradient(135deg, #F5908F, #E4586D); box-shadow: 0 8px 20px rgba(228,88,109,.28); }
.gs-by-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.gs-by-label { font-size: 12px; letter-spacing: .12em; color: #b3a598; }
.gs-by-name { font-size: 19px; font-weight: 700; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gs-view { align-self: flex-start; margin-top: 28px; display: inline-flex; align-items: center; gap: 8px; padding: 12px 24px; border-radius: 999px; background: linear-gradient(135deg, #F5908F 0%, #E4586D 100%); color: #fff; font-size: 15px; font-weight: 600; text-decoration: none; box-shadow: 0 10px 26px rgba(228,88,109,.26); transition: transform .2s ease, box-shadow .2s ease; }
.gs-view:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(228,88,109,.34); }
.gs-view i { font-style: normal; }

.gs-bar { max-width: 1240px; margin: 34px auto 0; display: flex; align-items: center; justify-content: center; gap: 22px; }
.gs-nav { width: 50px; height: 50px; border-radius: 50%; border: 1px solid #ebdfd1; background: rgba(255,255,255,.92); color: #7a4f2c; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 6px 18px rgba(120,90,50,.08); transition: transform .2s ease, background .2s ease, color .2s ease; }
.gs-nav:hover { background: #E4586D; color: #fff; border-color: #E4586D; transform: translateY(-2px); }
.gs-dots { display: flex; align-items: center; gap: 10px; }
.gs-dot { position: relative; width: 10px; height: 10px; padding: 0; border: 0; border-radius: 999px; background: #e3d3bf; cursor: pointer; overflow: hidden; transition: width .35s ease, background .2s ease; }
.gs-dot span { position: absolute; inset: 0; border-radius: inherit; background: #E4586D; transform-origin: left center; transform: scaleX(0); }
.gs-dot.is-active { width: 54px; }
.gs-dot.is-active span { transform: scaleX(1); opacity: .35; }
.gs-dot.is-active.is-running span { opacity: 1; animation: gsProgress 6s linear forwards; }
@keyframes gsProgress { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.gs-more-wrap { text-align: center; margin-top: 40px; }
.gs-more { display: inline-flex; align-items: center; padding: 14px 32px; border-radius: 999px; border: 1px solid #e3cdb6; background: rgba(255,255,255,.9); color: #7a4f2c; font-size: 16px; font-weight: 600; text-decoration: none; transition: background .2s ease, transform .2s ease, box-shadow .2s ease; }
.gs-more:hover { background: #fff; transform: translateY(-2px); box-shadow: 0 10px 24px rgba(120,90,50,.12); }

@media (prefers-reduced-motion: reduce) { .gs-slide, .gs-slide.is-active { transition: none; } .gs-media img, .gs-slide.is-active .gs-media img { transition: none; transform: none; } .gs-dot.is-active.is-running span { animation: none; } }

@media (max-width: 900px) {
  .gs-section { padding: 88px 16px 96px; }
  .gs-head { margin-bottom: 40px; }
  .gs-stage { border-radius: 26px; }
  .gs-slide { grid-template-columns: 1fr; }
  .gs-media { min-height: 0; aspect-ratio: 4 / 3; }
  .gs-info { padding: 28px 24px 30px; }
  .gs-info::before { font-size: 110px; right: 20px; top: -4px; }
  .gs-no b { font-size: 36px; }
  .gs-copy { font-size: 15.5px; -webkit-line-clamp: 6; margin-bottom: 24px; }
  .gs-nav { width: 44px; height: 44px; }
  .gs-dot.is-active { width: 40px; }
}


/* ── 首屏「白艾莉的一天」轮播：5 张图交叉淡入 ─────────────── */
.hero-bg img.hero-slide {
  position: absolute; top: 0; left: 0;
  opacity: 0;
  transition: opacity 1.4s ease;
}
.hero-bg img.hero-slide.is-active { opacity: 1; }

.hero-times {
  position: absolute; z-index: 3;
  right: clamp(24px, 3.4vw, 56px); bottom: 36px;
  display: flex; gap: 4px; padding: 5px;
  border-radius: 999px;
  background: rgba(255,255,255,0.72);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: 0 8px 28px rgba(60,40,30,0.12);
}
.hero-time {
  border: 0; background: transparent; cursor: pointer;
  font: inherit; font-size: 13px; font-weight: 600; letter-spacing: 0.04em;
  color: #7a6a62;
  padding: 8px 16px; border-radius: 999px;
  white-space: nowrap; flex: none;
  transition: background 0.3s, color 0.3s;
}
.hero-time:hover { color: #3a2e28; }
.hero-time.is-active {
  color: #fff;
  background: linear-gradient(135deg, #ff8a70, #e8644a);
  box-shadow: 0 4px 12px rgba(232,100,74,0.35);
}
@media (max-width: 768px) {
  .hero-times { right: auto; left: 50%; transform: translateX(-50%); bottom: auto; top: 76px; max-width: calc(100vw - 20px); overflow-x: auto; scrollbar-width: none; }
  .hero-times::-webkit-scrollbar { display: none; }
  .hero-time { padding: 6px 12px; font-size: 12px; }
}
/* 窄屏英/韩文标签更长，4 个胶囊合计会超出屏宽，iOS Safari 会因此把整页布局视口撑宽、内容缩成左侧窄列 */
@media (max-width: 480px) {
  .hero-time { padding: 6px 9px; font-size: 11.5px; letter-spacing: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-bg img.hero-slide { transition: none; }
}


/* 首屏轮播图铺满整屏。左侧的阅读层沿用线上原有的那一层：
   `.hero::before` 的暖白半透明 + 毛玻璃 + 向右渐隐的遮罩，加上 `.hero-bg::after` 的左→右渐变。
   之前我换成「暖色正片叠底」是重复造轮子，且肉眼几乎看不出渐变，已撤掉。 */
@media (min-width: 769px) {
  .hero-bg img,
  .hero-bg img.hero-slide {
    width: 100%; margin-left: 0;
    -webkit-mask-image: none; mask-image: none;
    object-position: center 35%;
  }

  /* 左侧阅读层做成「液态玻璃」：半透明，图片透出来，不再整块盖掉。
     几层叠加：① 很淡的白色着色 ② 左上角一抹高光 ③ 强模糊 + 提饱和，让后面的色彩像隔着玻璃晕开。
     遮罩沿用线上的向右渐隐，边缘自然融进画面。 */
  .hero::before {
    background:
      radial-gradient(120% 70% at 0% 0%, rgba(255,255,255,0.42), rgba(255,255,255,0) 60%),
      linear-gradient(100deg, rgba(255,255,255,0.30) 0%, rgba(255,252,247,0.20) 55%, rgba(255,250,244,0.10) 100%);
    backdrop-filter: blur(18px) saturate(1.7) brightness(1.04);
    -webkit-backdrop-filter: blur(18px) saturate(1.7) brightness(1.04);
  }
  /* 全幅的左→右渐变原本 0.84 起步，会把玻璃后面的图盖白；降下来，只留一点托底 */
  .hero-bg::after {
    background:
      linear-gradient(to bottom, rgba(250,250,247,0.96) 0%, transparent 10%, transparent 86%, var(--bg) 100%),
      linear-gradient(to right, rgba(250,250,247,0.34) 0%, rgba(250,250,247,0.14) 42%, transparent 70%);
  }
}
.hero-bg img.hero-slide { transition: opacity 0.9s ease; }


/* ── 模型驱动横幅：由纯国产模型驱动 ───────────────────────── */
.providers { padding-left: clamp(20px, 5vw, 64px); padding-right: clamp(20px, 5vw, 64px); }
.pv-card {
  position: relative; overflow: hidden;
  max-width: 1180px; margin: 0 auto clamp(64px, 8vw, 112px);
  padding: clamp(40px, 5vw, 68px) clamp(20px, 4vw, 56px) clamp(36px, 4.4vw, 56px);
  text-align: center;
  background:
    radial-gradient(ellipse 60% 80% at 15% 0%, rgba(255,214,170,0.45), transparent 70%),
    radial-gradient(ellipse 55% 80% at 90% 100%, rgba(190,205,255,0.4), transparent 70%),
    #fffaf4;
  border: 1px solid rgba(176,121,79,0.18);
  border-radius: clamp(26px, 3vw, 40px);
  box-shadow: 0 34px 90px -44px rgba(90,60,40,0.34);
}
.pv-title {
  font-size: clamp(24px, 3.3vw, 42px); line-height: 1.35; font-weight: 800;
  letter-spacing: 0.01em; color: #2a1f1a; margin: 0 auto;
  max-width: 20em; text-wrap: balance;
}
/* 背景：横幅从 6 家国产模型扩成 7 家全球顶尖模型，7 不能被 3 或 4 整除，
   用 grid 会在窄屏留下左对齐的孤儿行；改 flex-wrap + 居中，每行宽度由 --pv-cols 决定，末行自动居中。 */
.pv-tiles {
  --pv-cols: 7;
  --pv-gap: clamp(10px, 1.4vw, 18px);
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: var(--pv-gap);
  margin: clamp(28px, 3.6vw, 44px) auto 0;
}
.pv-tiles > .pv-tile { flex: 0 0 calc((100% - (var(--pv-cols) - 1) * var(--pv-gap)) / var(--pv-cols)); min-width: 0; }
.pv-tile {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  min-height: clamp(104px, 10vw, 128px); padding: 18px 10px;
  text-decoration: none; color: #2a1f1a;
  background: color-mix(in srgb, var(--c) 6%, #fff);
  border: 1px solid color-mix(in srgb, var(--c) 20%, transparent);
  border-radius: 20px;
  box-shadow: 0 10px 26px -16px color-mix(in srgb, var(--c) 55%, transparent);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
a.pv-tile:hover, div.pv-tile:hover { transform: translateY(-4px); box-shadow: 0 18px 34px -16px color-mix(in srgb, var(--c) 65%, transparent); }
.pv-tile img { width: clamp(34px, 3.4vw, 44px); height: clamp(34px, 3.4vw, 44px); object-fit: contain; flex: none; }
.pv-tile img.pv-wm { width: auto; height: clamp(34px, 3.4vw, 44px); max-width: 82%; }
.pv-name { font-size: clamp(14px, 1.3vw, 17px); font-weight: 700; letter-spacing: 0.01em; white-space: nowrap; }
@media (max-width: 860px) { .pv-tiles { --pv-cols: 4; } }
/* 手机端同样 4+3 排布，避免 3+3+1 的孤儿行；格子变窄，名称字号与内边距同步收紧，DeepSeek 不换行 */
@media (max-width: 480px) {
  .pv-card { padding-left: 14px; padding-right: 14px; }
  .pv-tiles { --pv-cols: 4; --pv-gap: 8px; }
  .pv-tile { min-height: 88px; padding: 12px 4px; gap: 8px; border-radius: 14px; }
  .pv-name { font-size: 12px; }
}

/* ── 导航语言切换（下载按钮左侧）：五种语言 ───────────────── */
.nav-right { display: flex; align-items: center; gap: 14px; flex: none; }
.nav-lang { position: relative; }
.nav-lang-btn {
  display: inline-flex; align-items: center; gap: 7px;
  height: 36px; padding: 0 12px 0 11px;
  border: 1px solid var(--border); border-radius: 999px;
  background: rgba(255,255,255,0.7);
  color: var(--text); font: inherit; font-size: 13px; font-weight: 500;
  cursor: pointer; white-space: nowrap;
  transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.nav-lang-btn:hover, .nav-lang-btn[aria-expanded="true"] { background: #fff; border-color: #d9b48f; box-shadow: 0 4px 14px rgba(120,90,50,0.1); }
.nav-lang-globe { color: #b0794f; flex: none; }
.nav-lang-caret { color: #8a7a70; flex: none; transition: transform 0.2s; }
.nav-lang-btn[aria-expanded="true"] .nav-lang-caret { transform: rotate(180deg); }
.nav-lang-menu {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 120;
  min-width: 168px; margin: 0; padding: 6px; list-style: none;
  background: #fff; border: 1px solid var(--border); border-radius: 16px;
  box-shadow: 0 18px 50px -12px rgba(60,40,30,0.28);
}
.nav-lang-menu[hidden] { display: none; }
.lang-opt {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; padding: 10px 12px; border: 0; border-radius: 10px;
  background: transparent; color: var(--text); font: inherit; font-size: 14px; text-align: left; cursor: pointer;
}
.nav-lang-menu .lang-opt:hover, .nav-lang-menu .lang-opt:focus-visible { background: #fbf6ec; outline: none; }
.nav-lang-menu .lang-opt.active { color: #b0794f; font-weight: 700; }
.nav-lang-menu .lang-opt.active::after { content: '✓'; font-size: 13px; }
@media (max-width: 768px) {
  .nav-right { gap: 8px; }
  .nav-lang-btn { height: 34px; padding: 0 10px; }
  .nav-lang-cur, .nav-lang-caret { display: none; }
}
/* 韩语：主标语与标题更长，允许折行并略缩字号；粤语比普通话多两三个字，同样放宽 */
html[lang="ko-KR"] .hero-slogan,
html[lang="yue-Hant-HK"] .hero-slogan { white-space: normal; font-size: clamp(22px, 2.2vw, 28px); }
html[lang="ko-KR"] .hero-title { letter-spacing: -0.01em; }
html[lang="ko-KR"] .persona-name { white-space: normal; font-size: clamp(20px, 4.6cqw, 28px); text-wrap: balance; }
html[lang="yue-Hant-HK"] .persona-name { font-size: clamp(18px, 5.1cqw, 32px); }
html[lang="ko-KR"] .hero-subtitle { word-break: keep-all; }
/* 字体栈补上韩文与繁体字体，避免落到不合适的回退字体 */
html:not([lang^="en"]) body *:not(code):not(pre):not(kbd):not(samp) {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'PingFang SC', 'PingFang TC', 'Apple SD Gothic Neo', 'Hiragino Sans GB', 'Microsoft YaHei', 'Microsoft JhengHei', 'Malgun Gothic', sans-serif;
}
/* 导航加了语言切换后横向更紧：中等宽度收紧间距，更窄时由原有 ≤1180px 规则收起链接 */
@media (max-width: 1360px) {
  .nav-links { gap: 20px; }
  .nav-right { gap: 10px; }
}
@media (max-width: 1260px) {
  nav { padding: 0 24px; }
  .nav-links { gap: 14px; }
  .nav-links a { font-size: 12.5px; }
}
@media (max-width: 1230px) {
  .nav-links { display: none; }
}

/* ── 页面图片灯箱（#inside 之外的内容图）────────────────────── */
#personal-agent .concept-visual img,
#persona .persona-images img,
#day-in-life .day-grid img,
#team .team-grid img.team-card-cover,
#gallery .gs-media img,
#day-in-life .day-card:not(.day-card-food):not(.day-card-life):not(.day-card-call) .day-card-copy { cursor: zoom-in; }
.pg-lb { position: fixed; inset: 0; z-index: 9999; background: rgba(14,10,8,.9); display: flex; align-items: center; justify-content: center; animation: insideLbIn .2s ease; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.pg-lb[hidden] { display: none; }
.pg-lb-fig { margin: 0; max-width: 100%; display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 56px 84px 64px; box-sizing: border-box; }
.pg-lb-fig img { display: block; max-width: min(1400px, 100%); max-height: calc(100vh - 190px); width: auto; height: auto; object-fit: contain; border-radius: 12px; background: #2a211b; box-shadow: 0 24px 90px rgba(0,0,0,.6); opacity: 0; transform: scale(.985); transition: opacity .3s ease, transform .3s ease; }
.pg-lb-fig img.in { opacity: 1; transform: none; }
.pg-lb-fig figcaption { max-width: 720px; text-align: center; font-size: 14px; line-height: 1.7; color: rgba(255,255,255,.78); }
.pg-lb-close, .pg-lb-nav { position: absolute; z-index: 2; border: 0; border-radius: 50%; background: rgba(255,255,255,.12); color: #fff; line-height: 1; cursor: pointer; transition: background .2s ease; }
.pg-lb-close { top: 14px; right: 18px; width: 42px; height: 42px; font-size: 26px; }
.pg-lb-nav { top: 50%; width: 48px; height: 48px; margin-top: -24px; font-size: 30px; }
.pg-lb-close:hover, .pg-lb-nav:hover { background: rgba(255,255,255,.26); }
.pg-lb-prev { left: 18px; }
.pg-lb-next { right: 18px; }
.pg-lb.single .pg-lb-nav { display: none; }
.pg-lb-count { position: absolute; left: 0; right: 0; bottom: 18px; margin: 0; text-align: center; font-size: 13px; letter-spacing: .06em; color: rgba(255,255,255,.7); pointer-events: none; }
@media (max-width: 768px) {
  .pg-lb-fig { padding: 60px 12px 92px; }
  .pg-lb-fig img { max-height: calc(100vh - 220px); }
  .pg-lb-nav { top: auto; bottom: 12px; margin-top: 0; width: 42px; height: 42px; }
  .pg-lb-prev { left: calc(50% - 90px); }
  .pg-lb-next { right: calc(50% - 90px); }
}
@media (prefers-reduced-motion: reduce) { .pg-lb, .pg-lb-fig img { animation: none; transition: none; } }

/* ── 折行与对齐修补（2026-10-03）──────────────────────────────────
   英文/韩文没有字间空格可借，标题、短句容易甩出孤字（"done."、"you."）。
   balance 让多行标题均匀断行，pretty 避免段尾只剩一个词；中文保持原样不动。 */
html:not([lang^="zh"]) .hero-slogan,
html:not([lang^="zh"]) .hero-subtitle,
html:not([lang^="zh"]) .persona-name,
html:not([lang^="zh"]) .persona-taunt,
html:not([lang^="zh"]) .persona-meta,
html:not([lang^="zh"]) .inside-cap h3,
html:not([lang^="zh"]) .gs-sub,
html:not([lang^="zh"]) .section-title,
html:not([lang^="zh"]) .team-card-role { text-wrap: balance; }
html:not([lang^="zh"]) .persona-quote,
html:not([lang^="zh"]) .inside-cap p,
html:not([lang^="zh"]) .section-sub,
html:not([lang^="zh"]) #team .team-card-desc,
html:not([lang^="zh"]) .hfc-desc { text-wrap: pretty; }

/* 首次启动提示：横向撑满按钮栏，不再随文案长短缩成一小块 */
.startup-tip { display: flex; width: 100%; box-sizing: border-box; justify-content: center; }

/* 作品展示图：比例接近时铺满，不留左右模糊空带；极端比例由 JS 保持 contain */
.gs-media img.is-fill { object-fit: cover; object-position: center 28%; }
@media (min-width: 769px) {
  .gs-slide.is-portrait { grid-template-columns: minmax(0, .62fr) minmax(0, 1fr); }
}
@media (max-width: 768px) {
  .gs-slide.is-portrait .gs-media { aspect-ratio: 4 / 5; }
}

/* 一天的生活卡：说明文字不留单字/两字孤行（中文也适用），热爱生活卡放宽到一行半能收住 */
.day-card-copy h3 { text-wrap: balance; }
.day-card-copy p { text-wrap: balance; }
.day-card-life .day-card-copy { max-width: 720px; }

/* 首页指向内容页（Personal Agent / 关系型生产力 Agent 定义）的入口链接 */
.guide-more { margin: 14px 0 0; text-align: center; font-size: 15px; }
.guide-more a { color: #b0794f; font-weight: 600; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(176,121,79,.35); }
.guide-more a:hover { text-decoration-color: #b0794f; }

/* 用户评价里可能带长链接（如方法论章节 URL），小屏必须允许在任意位置断行，否则整页被撑宽 3px 以上 */
.review-content, .review-content * { overflow-wrap: anywhere; }