/* ===================================================================
   智颜AI工作台 · 官方站 (Light Cool · 匹配 zhiyan logo 青→紫渐变)
   -------------------------------------------------------------------
   气质: 高级 · 简洁 · 优雅 · 大气 · 现代 SaaS
   配色: 白 #FFFFFF + 浅灰 #F6F8FB + 品牌青 #1FB8C9 + 极光紫 #7E4FD0
   字体: Inter (sans) · Noto Sans SC
   =================================================================== */

:root {
  /* ---- 色板：Light Cool ---- */
  --c-paper:      #FFFFFF;
  --c-paper-2:    #F6F8FB;
  --c-paper-3:    #EEF1F6;
  --c-paper-warm: #FAFBFD;

  --c-ink:        #0F1729;
  --c-ink-2:      #4B5568;
  --c-ink-3:      #8A94A6;
  --c-ink-4:      #C4CBD6;

  --c-line:       rgba(15, 23, 41, 0.08);
  --c-line-soft:  rgba(15, 23, 41, 0.04);
  --c-line-strong:rgba(15, 23, 41, 0.14);

  /* ---- 强调色（极光青） ---- */
  --c-accent-50:  #E6F8FA;
  --c-accent-100: #C3EEF2;
  --c-accent-200: #8FDFE7;
  --c-accent-300: #4DC9D6;
  --c-accent-400: #28B7C7;
  --c-accent-500: #1FB8C9;
  --c-accent-600: #189BA9;
  --c-accent-700: #117482;
  --c-accent:     var(--c-accent-500);
  --c-accent-hover: var(--c-accent-400);
  --c-accent-soft: rgba(31, 184, 201, 0.10);
  --c-accent-soft-strong: rgba(31, 184, 201, 0.18);

  /* ---- 品牌紫（与青组成主渐变） ---- */
  --c-violet: #7E4FD0;
  --c-violet-600: #6B3FB8;
  --c-violet-soft: rgba(126, 79, 208, 0.12);

  /* ---- 品牌渐变（与 logo 一致：青→紫） ---- */
  --brand-grad: linear-gradient(135deg, #1FB8C9 0%, #4D6BB7 50%, #7E4FD0 100%);
  --brand-grad-soft: linear-gradient(135deg, rgba(31,184,201,0.10) 0%, rgba(126,79,208,0.10) 100%);

  /* ---- 科技点缀色 ---- */
  --c-cyan: #1FB8C9;
  --c-cyan-soft: rgba(31, 184, 201, 0.12);
  --c-mint: #5BE7C4;

  /* ---- 状态色 ---- */
  --c-ok: #10B981;
  --c-warn: #F59E0B;
  --c-err: #EF4444;
  --c-info: var(--c-accent);

  /* ---- 字体 ---- */
  --f-sans: "Inter", "PingFang SC", "Microsoft YaHei", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, "Cascadia Code", "SF Mono", Consolas, monospace;

  /* ---- 圆角 ---- */
  --r-1: 8px;
  --r-2: 14px;
  --r-3: 22px;
  --r-4: 32px;

  /* ---- 阴影 ---- */
  --sh-1: 0 1px 2px rgba(15,23,41,.05), 0 1px 1px rgba(15,23,41,.03);
  --sh-2: 0 4px 16px rgba(15,23,41,.06), 0 1px 2px rgba(15,23,41,.04);
  --sh-3: 0 12px 32px rgba(15,23,41,.08), 0 2px 6px rgba(15,23,41,.04);
  --sh-4: 0 32px 64px rgba(15,23,41,.12), 0 6px 16px rgba(15,23,41,.06);
  --sh-accent:    0 12px 32px rgba(31, 184, 201, 0.22);
  --sh-accent-lg: 0 24px 60px rgba(126, 79, 208, 0.28);

  /* ---- 节奏 ---- */
  --gutter: 56px;
  --container: 1280px;

  /* ---- 动画 ---- */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
}

@media (max-width: 768px) {
  :root { --gutter: 22px; }
}

/* ===================================================================
   RESET
   =================================================================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--f-sans);
  font-size: 16px;
  line-height: 1.7;
  color: var(--c-ink);
  background: var(--c-paper);
  letter-spacing: 0.005em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  font-feature-settings: "kern", "liga", "calt";
}

img, svg { display: block; max-width: 100%; height: auto; }

a {
  color: inherit;
  text-decoration: none;
  transition: color .3s var(--ease), opacity .3s var(--ease);
}

button {
  font-family: inherit;
  cursor: pointer;
  border: 0;
  background: none;
  color: inherit;
}

ol, ul { list-style: none; }

em, i { font-style: normal; }

::selection {
  background: var(--c-accent);
  color: #fff;
}

/* ===================================================================
   全屏背景（极淡青紫渐变 + 装饰光斑）
   =================================================================== */
.grain {
  position: fixed; inset: 0; z-index: -2;
  background:
    radial-gradient(ellipse 80% 60% at 20% 0%, rgba(31, 184, 201, 0.06), transparent 60%),
    radial-gradient(ellipse 60% 50% at 80% 30%, rgba(126, 79, 208, 0.05), transparent 60%),
    var(--c-paper);
  pointer-events: none;
}

.cursor-glow {
  position: fixed;
  width: 480px; height: 480px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(31, 184, 201, 0.10), transparent 60%);
  pointer-events: none; z-index: -1;
  transform: translate(-50%, -50%);
  filter: blur(40px);
  opacity: 0;
  transition: opacity .3s var(--ease);
}

body.js-on .cursor-glow { opacity: 1; }

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ===================================================================
   NAV
   =================================================================== */
.nav {
  position: sticky;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: saturate(160%) blur(20px);
  -webkit-backdrop-filter: saturate(160%) blur(20px);
  border-bottom: 1px solid var(--c-line);
}

.nav-in {
  max-width: var(--container);
  margin: 0 auto;
  padding: 14px var(--gutter);
  display: flex;
  align-items: center;
  gap: 32px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  font-size: 18px;
  letter-spacing: -0.01em;
  color: var(--c-ink);
}

.brand-mark {
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  border-radius: 0;
}
.brand-mark img {
  width: 100%; height: 100%;
  display: block;
  object-fit: contain;
  background: transparent;
}

.brand-text { color: var(--c-ink); font-weight: 600; }
.brand-text em { font-style: normal; color: var(--c-accent); font-weight: 600; }

.brand-tag {
  font-size: 11px;
  font-weight: 600;
  color: var(--c-violet);
  background: var(--c-violet-soft);
  padding: 2px 7px;
  border-radius: 5px;
  margin-left: 2px;
  letter-spacing: 0;
}

.nav-links {
  display: flex;
  gap: 28px;
  margin-left: auto;
  font-size: 14px;
  font-weight: 500;
}

.nav-links a {
  color: var(--c-ink-2);
  position: relative;
  padding: 4px 0;
  transition: color .25s var(--ease);
}

.nav-links a:hover { color: var(--c-accent); }

.nav-links a::after {
  content: "";
  position: absolute;
  left: 50%; bottom: -2px;
  width: 0; height: 2px;
  background: var(--brand-grad);
  transition: width .3s var(--ease), left .3s var(--ease);
}

.nav-links a:hover::after { width: 100%; left: 0; }

.nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  border-radius: 10px;
  background: var(--brand-grad);
  color: #fff !important;
  font-size: 14px;
  font-weight: 600;
  box-shadow: 0 4px 14px rgba(31, 184, 201, 0.30);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}

.nav-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(126, 79, 208, 0.36);
}

.nav-cta-arrow {
  display: inline-block;
  animation: nav-bounce 1.6s ease-in-out infinite;
}

@keyframes nav-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(2px); }
}

@media (max-width: 980px) {
  .nav-links { display: none; }
}

/* ===================================================================
   HERO
   =================================================================== */
.hero {
  position: relative;
  padding: 80px 0 100px;
  overflow: hidden;
}

.hero-bg {
  position: absolute; inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}

.hero-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.32;
}

.blob-1 {
  width: 520px; height: 520px;
  top: -120px; left: -160px;
  background: radial-gradient(circle, var(--c-accent-300), transparent 70%);
}

.blob-2 {
  width: 480px; height: 480px;
  top: 80px; right: -120px;
  background: radial-gradient(circle, var(--c-violet), transparent 70%);
  opacity: 0.26;
}

.blob-3 {
  width: 360px; height: 360px;
  bottom: -100px; left: 40%;
  background: radial-gradient(circle, var(--c-accent-200), transparent 70%);
  opacity: 0.22;
}

.hero-rule {
  position: absolute;
  top: 30%;
  right: 8%;
  width: 1px; height: 280px;
  background: linear-gradient(to bottom, transparent, var(--c-line-strong), transparent);
}

.container.hero-in {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 60px;
  align-items: center;
  min-height: 560px;
}

.hero-text { position: relative; z-index: 2; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 14px;
  border-radius: 100px;
  background: var(--c-accent-soft);
  border: 1px solid rgba(31, 184, 201, 0.20);
  font-size: 13px;
  font-weight: 500;
  color: var(--c-accent-700);
  margin-bottom: 26px;
}

.eyebrow-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--c-accent);
  box-shadow: 0 0 0 4px rgba(31, 184, 201, 0.20);
}

.eyebrow-sep { color: var(--c-ink-4); }
.eyebrow-meta { color: var(--c-ink-2); font-weight: 500; }

.display {
  font-size: clamp(38px, 5vw, 64px);
  line-height: 1.08;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--c-ink);
  margin-bottom: 24px;
}

.display em.ser {
  font-family: "Noto Serif SC", Georgia, serif;
  font-style: italic;
  font-weight: 500;
}

.display em.sun-grad {
  background: var(--brand-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-style: normal;
  font-weight: 700;
}

.d-line { display: block; }

.lede {
  font-size: 17px;
  line-height: 1.7;
  color: var(--c-ink-2);
  max-width: 560px;
  margin-bottom: 36px;
}

.lede strong {
  color: var(--c-ink);
  font-weight: 600;
}

.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 44px;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 22px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease);
  border: 1px solid transparent;
}

.btn-primary {
  background: var(--brand-grad);
  color: #fff;
  box-shadow: 0 6px 20px rgba(31, 184, 201, 0.32);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(126, 79, 208, 0.36);
}

.btn-ghost {
  background: var(--c-paper);
  color: var(--c-ink);
  border: 1px solid var(--c-line-strong);
}

.btn-ghost:hover {
  background: var(--c-paper-2);
  border-color: var(--c-accent);
  color: var(--c-accent);
}

.btn-lg { padding: 16px 28px; font-size: 16px; border-radius: 14px; }

.btn-icon { display: inline-flex; }
.btn-arrow { display: inline-block; transition: transform .25s var(--ease); }

.btn:hover .btn-arrow { transform: translateX(4px); }

.hero-meta {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  max-width: 560px;
  padding-top: 28px;
  border-top: 1px solid var(--c-line);
}

.hm-item { display: flex; flex-direction: column; gap: 4px; }
.hm-item b {
  font-size: 18px;
  font-weight: 700;
  background: var(--brand-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hm-item span { font-size: 12px; color: var(--c-ink-3); font-weight: 500; }

/* HERO 右侧：浮动卡片堆 */
.hero-art {
  position: relative;
  height: 540px;
}

.card-stack { position: relative; width: 100%; height: 100%; }

.floating-card {
  position: absolute;
  border-radius: 16px;
  background: var(--c-paper);
  box-shadow: var(--sh-4);
  overflow: hidden;
  border: 1px solid var(--c-line);
}

.fc-back {
  top: 30px; left: 0;
  width: 78%; height: 320px;
  transform: rotate(-4deg);
}

.fc-mid {
  top: 90px; right: 0;
  width: 70%; height: 290px;
  transform: rotate(5deg);
  z-index: 2;
}

.fc-front {
  bottom: 20px; left: 12%;
  width: 76%; height: 270px;
  transform: rotate(-1deg);
  z-index: 3;
}

.fc-frame { width: 100%; height: 100%; display: flex; flex-direction: column; }

.fc-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  background: var(--c-paper-2);
  border-bottom: 1px solid var(--c-line);
  font-size: 12px;
  color: var(--c-ink-2);
}

.fc-bar .d {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--c-line-strong);
}
.fc-bar .d1 { background: #ff5f57; }
.fc-bar .d2 { background: #febc2e; }
.fc-bar .d3 { background: #28c840; }
.fc-bar em {
  margin-left: auto;
  font-style: normal;
  font-weight: 500;
}

.fc-frame img {
  flex: 1;
  width: 100%;
  object-fit: cover;
  object-position: top;
}

.bubble {
  position: absolute;
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  border-radius: 100px;
  background: var(--c-paper);
  box-shadow: var(--sh-3);
  font-size: 12px;
  font-weight: 600;
  color: var(--c-ink);
  border: 1px solid var(--c-line);
  z-index: 4;
}

.bubble-1 {
  top: 16px; right: -10px;
  background: var(--brand-grad);
  color: #fff;
  border: 0;
}
.bubble-2 {
  bottom: 130px; left: -16px;
  color: var(--c-accent);
  border-color: var(--c-accent-soft-strong);
  background: var(--c-paper);
}
.bubble-3 {
  bottom: 50px; right: -10px;
  color: var(--c-violet);
  border-color: var(--c-violet-soft);
  background: var(--c-paper);
}

.scroll-hint {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--c-ink-3);
}

.scroll-line {
  display: block;
  width: 1px; height: 36px;
  background: linear-gradient(to bottom, var(--c-ink-4), transparent);
  animation: scroll-down 1.6s ease-in-out infinite;
}

@keyframes scroll-down {
  0%, 100% { transform: scaleY(1); opacity: 1; }
  50% { transform: scaleY(0.5); opacity: 0.4; }
}

@media (max-width: 980px) {
  .container.hero-in { grid-template-columns: 1fr; gap: 40px; }
  .hero-art { height: 380px; }
  .hero-meta { grid-template-columns: repeat(2, 1fr); }
  .scroll-hint { display: none; }
}

/* ===================================================================
   通用 SECTION
   =================================================================== */
.section {
  position: relative;
  padding: 100px 0;
}

.sec-head {
  max-width: 800px;
  margin: 0 auto 60px;
  text-align: center;
}

.sec-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-accent);
  margin-bottom: 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.sec-label em {
  background: var(--brand-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.sec-title {
  font-size: clamp(28px, 3.6vw, 44px);
  line-height: 1.18;
  font-weight: 600;
  letter-spacing: -0.018em;
  color: var(--c-ink);
  margin-bottom: 18px;
}

.sec-title em.ser {
  font-family: "Noto Serif SC", Georgia, serif;
  font-style: italic;
}

.sec-title em.sun-grad {
  background: var(--brand-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.sec-sub {
  font-size: 16px;
  color: var(--c-ink-2);
  line-height: 1.7;
}

.sec-sub strong { color: var(--c-ink); }

/* reveal 入场动画（无 JS 也可见，JS 启动后才隐藏做动画） */
.reveal {
  opacity: 1;
  transform: none;
  transition: opacity .8s var(--ease-out), transform .8s var(--ease-out);
}
body.js-on .reveal:not(.in) {
  opacity: 0;
  transform: translateY(20px);
}
body.js-on .reveal.in {
  opacity: 1;
  transform: translateY(0);
}

/* ===================================================================
   SECTION 01 · 我们是谁
   =================================================================== */
.intro {
  background: linear-gradient(180deg, var(--c-paper) 0%, var(--c-paper-warm) 100%);
}

.intro-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 70px;
  align-items: center;
}

.intro-text .sec-head {
  text-align: left;
  margin: 0 0 24px;
  max-width: none;
}

.intro-lead {
  font-size: 17px;
  color: var(--c-ink-2);
  line-height: 1.8;
  margin-bottom: 20px;
}

.intro-lead strong {
  color: var(--c-ink);
  font-weight: 600;
}

.intro-visual {
  position: relative;
  height: 460px;
  border-radius: 24px;
  background: var(--brand-grad);
  padding: 36px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: #fff;
  box-shadow: var(--sh-4);
  overflow: hidden;
}

.intro-visual::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at top right, rgba(255,255,255,0.20), transparent 60%);
}

.intro-visual-inner {
  position: relative;
  z-index: 1;
}

.intro-tagline {
  font-size: 28px;
  line-height: 1.4;
  font-weight: 500;
  margin-bottom: 24px;
  font-family: "Noto Serif SC", Georgia, serif;
}

.intro-tagline em {
  background: rgba(255,255,255,0.92);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-style: normal;
  font-weight: 700;
}

.intro-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
  padding-top: 28px;
  border-top: 1px solid rgba(255,255,255,0.25);
}

.is-num {
  font-size: 32px;
  font-weight: 700;
  line-height: 1;
  margin-bottom: 6px;
}

.is-label {
  font-size: 13px;
  opacity: 0.85;
  font-weight: 500;
}

@media (max-width: 980px) {
  .intro-grid { grid-template-columns: 1fr; gap: 40px; }
  .intro-text .sec-head { text-align: center; margin: 0 auto 24px; }
  .intro-visual { height: 380px; }
}

/* ===================================================================
   SECTION 02 · 四大板块
   =================================================================== */
.boards { background: var(--c-paper); }

.boards-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.board-card {
  position: relative;
  padding: 36px;
  border-radius: 22px;
  background: var(--c-paper);
  border: 1px solid var(--c-line);
  box-shadow: var(--sh-1);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
  overflow: hidden;
}

.board-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--brand-grad);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .5s var(--ease-out);
}

.board-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-3);
  border-color: var(--c-accent-soft-strong);
}

.board-card:hover::before { transform: scaleX(1); }

.board-head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 18px;
}

.board-num {
  font-size: 13px;
  font-weight: 700;
  color: var(--c-accent);
  padding: 5px 10px;
  border-radius: 6px;
  background: var(--c-accent-soft);
  letter-spacing: 0.06em;
}

.board-icon {
  width: 48px; height: 48px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--brand-grad-soft);
  color: var(--c-accent);
}

.board-card.b2 .board-icon { color: var(--c-violet); }
.board-card.b4 .board-icon { color: var(--c-violet); }

.board-title {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--c-ink);
  margin-bottom: 4px;
}

.board-sub {
  font-size: 14px;
  color: var(--c-violet);
  font-weight: 500;
  margin-bottom: 16px;
}

.board-desc {
  font-size: 15px;
  color: var(--c-ink-2);
  line-height: 1.7;
  margin-bottom: 22px;
}

.board-pts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 18px;
  padding-top: 18px;
  border-top: 1px dashed var(--c-line);
}

.board-pts li {
  font-size: 13px;
  color: var(--c-ink-2);
  padding-left: 16px;
  position: relative;
}

.board-pts li::before {
  content: "";
  position: absolute;
  left: 0; top: 8px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--c-accent);
}

.board-card.b2 .board-pts li::before { background: var(--c-violet); }
.board-card.b4 .board-pts li::before { background: var(--c-violet); }

@media (max-width: 760px) {
  .boards-grid { grid-template-columns: 1fr; }
  .board-pts { grid-template-columns: 1fr; }
}

/* ===================================================================
   SECTION 03 · 六大痛点
   =================================================================== */
.pains {
  background: var(--c-paper-warm);
}

.pains-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.pain-card {
  padding: 32px;
  border-radius: 20px;
  background: var(--c-paper);
  border: 1px solid var(--c-line);
  box-shadow: var(--sh-1);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}

.pain-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--sh-3);
}

.pain-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  border-radius: 10px;
  background: var(--brand-grad);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 18px;
}

.pain-title {
  font-size: 19px;
  font-weight: 600;
  color: var(--c-ink);
  margin-bottom: 14px;
}

.pain-quote {
  font-size: 14px;
  color: var(--c-ink-3);
  line-height: 1.6;
  padding: 14px 16px;
  border-left: 3px solid var(--c-line-strong);
  margin-bottom: 18px;
  font-style: italic;
}

.pain-quote::before {
  content: """;
  color: var(--c-accent);
  font-size: 18px;
  font-weight: 700;
  margin-right: 4px;
}

.pain-solution {
  font-size: 14px;
  color: var(--c-ink-2);
  line-height: 1.7;
  padding-top: 16px;
  border-top: 1px dashed var(--c-line);
}

.pain-solution b {
  display: block;
  font-size: 13px;
  color: var(--c-accent);
  font-weight: 600;
  margin-bottom: 6px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

@media (max-width: 760px) {
  .pains-grid { grid-template-columns: 1fr; }
}

/* ===================================================================
   SECTION 04 · 对比表
   =================================================================== */
.compare { background: var(--c-paper); }

.cmp-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--c-paper);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: var(--sh-3);
  border: 1px solid var(--c-line);
}

.cmp-table th, .cmp-table td {
  padding: 18px 22px;
  text-align: center;
  font-size: 14px;
  border-bottom: 1px solid var(--c-line);
  vertical-align: middle;
}

.cmp-table th {
  background: var(--c-paper-2);
  font-weight: 600;
  color: var(--c-ink);
  letter-spacing: 0.01em;
}

.cmp-table th:first-child {
  text-align: left;
  color: var(--c-ink-2);
}

.cmp-table td:first-child {
  text-align: left;
  color: var(--c-ink);
  font-weight: 500;
}

.cmp-table tr:last-child td { border-bottom: 0; }

.cmp-table .col-ours {
  background: linear-gradient(180deg, rgba(31,184,201,0.05), rgba(126,79,208,0.05));
}

.cmp-table th.col-ours {
  background: var(--brand-grad);
  color: #fff;
  font-weight: 700;
  font-size: 15px;
}

.cmp-table .col-ours {
  font-weight: 600;
  color: var(--c-violet-600);
}

.cmp-table .y { color: var(--c-ok); font-size: 18px; }
.cmp-table .n { color: var(--c-ink-3); font-size: 18px; }
.cmp-table .half { color: var(--c-warn); font-size: 16px; }

.cmp-summary {
  margin-top: 28px;
  text-align: center;
  font-size: 15px;
  color: var(--c-ink-2);
}

.cmp-summary em {
  font-style: normal;
  font-weight: 600;
  background: var(--brand-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

@media (max-width: 760px) {
  .cmp-table th, .cmp-table td { padding: 12px 10px; font-size: 12px; }
  .cmp-table { font-size: 12px; }
}

/* ===================================================================
   SECTION 05 · 适合谁
   =================================================================== */
.fit {
  background: var(--c-paper-warm);
}

.fit-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 30px;
}

.fit-col {
  padding: 36px;
  border-radius: 20px;
  background: var(--c-paper);
  border: 1px solid var(--c-line);
}

.fit-col h3 {
  font-size: 18px;
  font-weight: 600;
  color: var(--c-ink);
  margin-bottom: 22px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.fit-col h3 .badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 5px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
}

.fit-yes h3 .badge { background: var(--c-accent-soft); color: var(--c-accent-700); }
.fit-no h3 .badge { background: rgba(239,68,68,0.10); color: var(--c-err); }

.fit-col ul li {
  padding: 10px 0;
  font-size: 14px;
  color: var(--c-ink-2);
  border-bottom: 1px dashed var(--c-line);
  display: flex;
  align-items: flex-start;
  gap: 10px;
  line-height: 1.6;
}

.fit-col ul li:last-child { border-bottom: 0; }

.fit-yes ul li::before {
  content: "✓";
  flex-shrink: 0;
  color: var(--c-accent);
  font-weight: 700;
  margin-top: 2px;
}

.fit-no ul li::before {
  content: "✕";
  flex-shrink: 0;
  color: var(--c-err);
  font-weight: 700;
  margin-top: 2px;
}

@media (max-width: 760px) {
  .fit-grid { grid-template-columns: 1fr; }
}

/* ===================================================================
   SECTION 06 · 为什么选智颜
   =================================================================== */
.why { background: var(--c-paper); }

.why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.why-card {
  padding: 32px;
  border-radius: 18px;
  background: var(--c-paper-2);
  border: 1px solid var(--c-line);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}

.why-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--sh-3);
}

.why-icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: var(--brand-grad);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
}

.why-card h4 {
  font-size: 17px;
  font-weight: 600;
  color: var(--c-ink);
  margin-bottom: 8px;
}

.why-card p {
  font-size: 14px;
  color: var(--c-ink-2);
  line-height: 1.65;
}

@media (max-width: 860px) {
  .why-grid { grid-template-columns: 1fr; }
}

/* ===================================================================
   SECTION 07 · 产品形态
   =================================================================== */
.forms { background: var(--c-paper-warm); }

.forms-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.form-card {
  padding: 30px 26px;
  border-radius: 18px;
  background: var(--c-paper);
  border: 1px solid var(--c-line);
  text-align: center;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}

.form-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--sh-3);
}

.form-card.highlight {
  background: var(--brand-grad);
  color: #fff;
  border: 0;
  box-shadow: var(--sh-accent-lg);
}

.form-card.highlight .form-name { color: #fff; }
.form-card.highlight .form-desc { color: rgba(255,255,255,0.92); }
.form-card.highlight .form-meta { color: rgba(255,255,255,0.75); }

.form-icon {
  width: 52px; height: 52px;
  border-radius: 14px;
  background: var(--brand-grad-soft);
  color: var(--c-accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
}

.form-card.highlight .form-icon {
  background: rgba(255,255,255,0.20);
  color: #fff;
}

.form-name {
  font-size: 17px;
  font-weight: 600;
  color: var(--c-ink);
  margin-bottom: 8px;
}

.form-desc {
  font-size: 13px;
  color: var(--c-ink-2);
  line-height: 1.6;
  margin-bottom: 14px;
}

.form-meta {
  font-size: 11px;
  color: var(--c-ink-3);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

@media (max-width: 980px) {
  .forms-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
  .forms-grid { grid-template-columns: 1fr; }
}

/* ===================================================================
   SECTION 08 · 进度状态
   =================================================================== */
.progress { background: var(--c-paper); }

.progress-list {
  max-width: 820px;
  margin: 0 auto;
  display: grid;
  gap: 14px;
}

.pg-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 18px 22px;
  border-radius: 14px;
  background: var(--c-paper-2);
  border: 1px solid var(--c-line);
}

.pg-status {
  flex-shrink: 0;
  width: 26px; height: 26px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  margin-top: 2px;
}

.pg-status.done { background: var(--c-ok); color: #fff; }
.pg-status.doing { background: var(--c-warn); color: #fff; }
.pg-status.todo { background: var(--c-ink-4); color: #fff; }

.pg-text { flex: 1; }
.pg-text b {
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: var(--c-ink);
  margin-bottom: 4px;
}
.pg-text span {
  font-size: 13px;
  color: var(--c-ink-2);
  line-height: 1.6;
}

/* ===================================================================
   SECTION 09 · 下载收束
   =================================================================== */
.download {
  background: linear-gradient(180deg, var(--c-paper-warm) 0%, var(--c-paper-2) 100%);
}

.dl-wrap {
  position: relative;
  padding: 70px 60px;
  border-radius: 28px;
  background: var(--brand-grad);
  color: #fff;
  box-shadow: var(--sh-4);
  overflow: hidden;
}

.dl-bg {
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 50% 60% at 20% 20%, rgba(255,255,255,0.15), transparent 60%),
    radial-gradient(ellipse 60% 80% at 90% 80%, rgba(255,255,255,0.10), transparent 60%);
}

.dl-left {
  position: relative;
  z-index: 1;
  max-width: 720px;
}

.dl-wrap .sec-label {
  color: rgba(255,255,255,0.85);
}

.dl-wrap .sec-label em {
  background: rgba(255,255,255,0.95);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.dl-title {
  font-size: clamp(28px, 3.6vw, 42px);
  line-height: 1.18;
  font-weight: 600;
  letter-spacing: -0.018em;
  color: #fff;
  margin-bottom: 16px;
}

.dl-title em.sun-grad {
  background: rgba(255,255,255,0.95);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.dl-lede {
  font-size: 16px;
  color: rgba(255,255,255,0.92);
  line-height: 1.7;
  margin-bottom: 30px;
}

.dl-cta { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }

.btn-dl {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 30px;
  border-radius: 14px;
  background: #fff;
  color: var(--c-violet-600);
  font-size: 16px;
  font-weight: 700;
  box-shadow: 0 12px 32px rgba(0,0,0,0.18);
  transition: transform .25s var(--ease);
}

.btn-dl:hover { transform: translateY(-2px); }

.btn-dl.disabled {
  background: rgba(255,255,255,0.18);
  color: rgba(255,255,255,0.85);
  cursor: not-allowed;
  box-shadow: none;
}

.dl-tip {
  font-size: 13px;
  color: rgba(255,255,255,0.78);
  font-weight: 500;
}

@media (max-width: 760px) {
  .dl-wrap { padding: 50px 30px; }
}

/* ===================================================================
   SECTION 10 · FAQ
   =================================================================== */
.faq { background: var(--c-paper); }

.faq-list {
  max-width: 820px;
  margin: 0 auto;
  display: grid;
  gap: 12px;
}

.faq-item {
  padding: 18px 22px;
  border-radius: 14px;
  background: var(--c-paper);
  border: 1px solid var(--c-line);
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}

.faq-item[open] {
  border-color: var(--c-accent-soft-strong);
  box-shadow: var(--sh-2);
}

.faq-item summary {
  cursor: pointer;
  font-size: 16px;
  font-weight: 600;
  color: var(--c-ink);
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.faq-item summary::-webkit-details-marker { display: none; }

.faq-item summary::after {
  content: "+";
  flex-shrink: 0;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--c-accent-soft);
  color: var(--c-accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 600;
  transition: transform .25s var(--ease), background .25s var(--ease);
}

.faq-item[open] summary::after {
  content: "−";
  background: var(--brand-grad);
  color: #fff;
}

.faq-item p {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed var(--c-line);
  font-size: 14px;
  color: var(--c-ink-2);
  line-height: 1.7;
}

.faq-item p strong { color: var(--c-ink); font-weight: 600; }

/* ===================================================================
   FOOTER
   =================================================================== */
.foot {
  background: var(--c-paper-2);
  border-top: 1px solid var(--c-line);
  padding: 60px 0 30px;
}

.foot-in {
  display: grid;
  grid-template-columns: 1.3fr 2fr;
  gap: 60px;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--c-line);
}

.foot-brand .brand { margin-bottom: 12px; }
.foot-brand p {
  font-size: 14px;
  color: var(--c-ink-2);
  line-height: 1.6;
  max-width: 320px;
}

.foot-links {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

.fl-col h6 {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-ink-3);
  margin-bottom: 16px;
}

.fl-col a {
  display: block;
  font-size: 14px;
  color: var(--c-ink-2);
  padding: 6px 0;
  transition: color .25s var(--ease);
}

.fl-col a:hover { color: var(--c-accent); }

.fl-col p { font-size: 14px; color: var(--c-ink-2); padding: 6px 0; }
.fl-company { font-weight: 600; color: var(--c-ink) !important; }

.fl-wechat {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.fl-wechat-label {
  padding: 3px 8px;
  border-radius: 4px;
  background: var(--c-accent-soft);
  color: var(--c-accent);
  font-size: 11px;
  font-weight: 600;
}

.fl-wechat-id { font-family: var(--f-mono); font-weight: 600; color: var(--c-ink); }

.fl-qr { margin-top: 14px; display: flex; align-items: center; gap: 12px; }
.fl-qr img { width: 80px; height: 80px; border-radius: 8px; border: 1px solid var(--c-line); }
.fl-qr figcaption { font-size: 12px; color: var(--c-ink-3); }

.foot-bot {
  padding-top: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  font-size: 12px;
  color: var(--c-ink-3);
  flex-wrap: wrap;
}

.foot-rule { width: 4px; height: 4px; border-radius: 50%; background: var(--c-ink-4); }

.foot-beian { color: var(--c-ink-2); }
.foot-beian:hover { color: var(--c-accent); }

@media (max-width: 860px) {
  .foot-in { grid-template-columns: 1fr; gap: 40px; }
  .foot-links { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 560px) {
  .foot-links { grid-template-columns: 1fr; }
}

/* ===================================================================
   屏幕宽度 ≤ 860px 兜底
   =================================================================== */
@media (max-width: 860px) {
  .section { padding: 70px 0; }
}