/* 幽云轩 · 官网样式 —— 东方极简美学
   轻量优先：系统字体、无外部依赖、无 web font 下载 */

:root {
  --sky:       #8EC5E0;
  --sky-deep:  #5CA9D6;
  --sky-soft:  #EAF4FA;
  --paper:     #F9F8F5;
  --paper-2:   #FFFFFF;
  --ink:       #23262B;
  --ink-soft:  #5B6470;
  --ink-faint: #9AA3AD;
  --line:      #E7E4DD;
  --amber:     #F4C77B;
  --radius:    18px;
  --maxw:      1080px;
  --serif:     "Songti SC", "Noto Serif CJK SC", "Source Han Serif SC", "SimSun", "STSong", serif;
  --sans:      system-ui, -apple-system, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 28px; }

/* ---------- 顶部导航 ---------- */
.nav {
  position: sticky; top: 0; z-index: 20;
  background: rgba(249, 248, 245, 0.82);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
}
.nav .wrap { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.brand { display: flex; align-items: center; gap: 12px; }
.brand img { width: 34px; height: 34px; display: block; }
.brand b {
  font-family: var(--serif); font-weight: 400;
  font-size: 20px; letter-spacing: 6px; color: var(--ink);
}
.nav-links { display: flex; gap: 30px; }
.nav-links a { color: var(--ink-soft); font-size: 15px; }
.nav-links a:hover { color: var(--ink); }
/* CTA 按钮统一用历史修复过的「浅底深字」配色（见 76b6c75）：
   不再依赖会随主题翻转的 var(--ink)，避免任何场景下「浅底白字看不清 / 发暗粉发黄」。 */
.nav-cta {
  background: #E8E8EA; color: #17181B; padding: 9px 18px;
  border-radius: 999px; font-size: 14px;
}
.nav-cta:hover { background: #fff; }

/* ---------- 通用区块 ---------- */
section { padding: 96px 0; }
.eyebrow {
  font-size: 12px; letter-spacing: 4px; text-transform: uppercase;
  color: var(--sky-deep); font-weight: 600; margin: 0 0 14px;
}
.section-title {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(26px, 4vw, 38px); letter-spacing: 4px;
  margin: 0 0 16px; color: var(--ink);
}
.section-sub { color: var(--ink-soft); font-size: 16px; max-width: 620px; margin: 0; }
.center { text-align: center; }
.center .section-sub { margin: 0 auto; }

/* ---------- Hero ---------- */
.hero {
  position: relative; overflow: hidden; text-align: center;
  padding: 120px 0 110px;
  background:
    radial-gradient(120% 80% at 50% -10%, var(--sky-soft) 0%, rgba(234,244,250,0) 60%),
    var(--paper);
}
.hero .logo-mark { width: 92px; height: 92px; margin: 0 auto 30px; display: block; }
.hero h1 {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(44px, 9vw, 78px); letter-spacing: 16px;
  margin: 0; color: var(--ink);
}
.hero .latin {
  margin: 14px 0 0; font-size: 11px; letter-spacing: 6px;
  font-weight: 300; color: var(--ink-faint); text-transform: uppercase;
}
.hero .tagline {
  margin: 30px auto 0; max-width: 560px;
  font-size: clamp(16px, 2.4vw, 19px); color: var(--ink-soft); line-height: 1.9;
}
.hero .tagline strong { color: var(--ink); font-weight: 600; }
.hero .actions { margin-top: 42px; display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 26px; border-radius: 999px; font-size: 15px; font-weight: 500;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn-primary { background: #E8E8EA; color: #17181B; }
.btn-primary:hover { background: #fff; transform: translateY(-2px); box-shadow: 0 10px 24px rgba(35,38,43,.18); }
.btn-ghost { background: var(--paper-2); color: var(--ink); border: 1px solid var(--line); }
.btn-ghost:hover { border-color: var(--sky); color: var(--sky-deep); }
/* 蓝色渐变面板上的次按钮：半透明深底保证白字可读 */
.btn-onblue { background: rgba(16, 42, 58, .32); color: #fff; border: 1px solid rgba(255,255,255,.55); }
.btn-onblue:hover { background: rgba(16, 42, 58, .5); border-color: #fff; transform: translateY(-2px); }

/* ---------- 震撼卖点 ---------- */
.killer { background: linear-gradient(180deg, #fff 0%, var(--paper) 100%); }
.cannot-grid { margin-top: 56px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.cannot {
  background: var(--paper-2); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 30px 24px;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.cannot:hover { transform: translateY(-4px); box-shadow: 0 16px 36px rgba(92,169,214,.12); border-color: var(--sky); }
.cannot .big {
  font-family: var(--serif); font-weight: 400;
  font-size: 32px; letter-spacing: 8px; line-height: 1;
  color: var(--sky-deep); margin-bottom: 16px;
}
.cannot h3 { margin: 0 0 10px; font-size: 17px; font-weight: 600; letter-spacing: .5px; }
.cannot p { margin: 0; color: var(--ink-soft); font-size: 14.5px; }
.stats {
  list-style: none; padding: 36px 0 0; margin: 48px 0 0;
  border-top: 1px solid var(--line);
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; text-align: center;
}
.stats b {
  display: block; font-family: var(--serif); font-weight: 400;
  font-size: clamp(34px, 5vw, 46px); line-height: 1.1; color: var(--ink);
}
.stats b i { font-style: normal; font-size: .42em; letter-spacing: 2px; margin-left: 2px; color: var(--ink-soft); }
.stats span { display: block; margin-top: 6px; font-size: 13.5px; color: var(--ink-soft); letter-spacing: 1px; }
@media (max-width: 860px) { .cannot-grid { grid-template-columns: 1fr 1fr; } .stats { grid-template-columns: 1fr 1fr; gap: 28px 16px; } }
@media (max-width: 560px) { .cannot-grid { grid-template-columns: 1fr; } }

/* ---------- 安全箱 ---------- */
.safebox { padding-top: 0; }
.sb-panel {
  background: linear-gradient(160deg, #2A2E35 0%, #15171B 100%);
  border-radius: 28px; padding: 60px 56px;
  display: grid; grid-template-columns: 1.5fr 1fr; gap: 48px; align-items: center;
  box-shadow: 0 30px 70px rgba(20, 22, 26, .3);
}
.sb-panel .eyebrow { color: var(--sky); }
.sb-panel h2 {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(24px, 3.6vw, 34px); letter-spacing: 4px;
  margin: 0 0 16px; color: #fff;
}
.sb-text > p { margin: 0; color: #A8AEB6; font-size: 15.5px; line-height: 1.9; }
.sb-text ul { list-style: none; padding: 0; margin: 24px 0 0; }
.sb-text li {
  padding: 9px 0; font-size: 14.5px; color: #C6CBD2;
  display: flex; gap: 10px; align-items: flex-start;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.sb-text li:last-child { border-bottom: none; }
.sb-text li::before { content: "✓"; color: var(--sky); font-weight: 700; flex: 0 0 auto; }
.sb-note { margin: 18px 0 0; font-size: 12.5px; color: #6B7178; }
.sb-art { display: flex; align-items: center; justify-content: center; }
.sb-art span {
  width: 170px; aspect-ratio: 1; border-radius: 50%;
  border: 1px dashed rgba(142,197,224,.4);
  display: flex; align-items: center; justify-content: center;
  font-size: 64px;
  background: radial-gradient(60% 60% at 50% 40%, rgba(142,197,224,.14), transparent 75%);
}
@media (max-width: 760px) {
  .sb-panel { grid-template-columns: 1fr; padding: 44px 30px; gap: 32px; }
  .sb-art { order: -1; }
  .sb-art span { width: 120px; font-size: 46px; }
}

/* ---------- 特色功能网格 ---------- */
.features-grid {
  margin-top: 56px;
  display: grid; gap: 20px;
  grid-template-columns: repeat(3, 1fr);
}
.card {
  background: var(--paper-2); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 30px 26px;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.card:hover { transform: translateY(-4px); box-shadow: 0 16px 36px rgba(92,169,214,.12); border-color: var(--sky); }
.card .ico {
  width: 46px; height: 46px; border-radius: 12px;
  background: var(--sky-soft); color: var(--sky-deep);
  display: flex; align-items: center; justify-content: center; margin-bottom: 18px;
}
.card .ico svg { width: 24px; height: 24px; }
.card h3 { margin: 0 0 8px; font-size: 18px; font-weight: 600; letter-spacing: .5px; }
.card p { margin: 0; color: var(--ink-soft); font-size: 14.5px; }

/* ---------- 隐私理念 ---------- */
.privacy { background: linear-gradient(180deg, #fff 0%, var(--paper) 100%); }
.privacy .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.privacy ul { list-style: none; padding: 0; margin: 28px 0 0; }
.privacy li { padding: 14px 0; border-bottom: 1px solid var(--line); display: flex; gap: 14px; align-items: flex-start; }
.privacy li:last-child { border-bottom: none; }
.privacy li b { display: block; font-size: 16px; margin-bottom: 2px; }
.privacy li span { color: var(--ink-soft); font-size: 14.5px; }
.dot { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: var(--sky-deep); margin-top: 9px; }
.privacy-art {
  aspect-ratio: 1; border-radius: 26px;
  background:
    radial-gradient(120% 90% at 50% 0%, var(--sky-soft), transparent 70%),
    linear-gradient(160deg, var(--sky) 0%, var(--sky-deep) 100%);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 30px 60px rgba(92,169,214,.25);
}
.privacy-art img { width: 58%; max-width: 192px; }

/* ---------- 多端覆盖 ---------- */
.platforms-grid { margin-top: 48px; display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.plat {
  text-align: center; padding: 38px 24px; border: 1px solid var(--line);
  border-radius: var(--radius); background: var(--paper-2);
}
.plat .pico { width: 40px; height: 40px; margin: 0 auto 16px; color: var(--sky-deep); }
.plat h4 { margin: 0 0 6px; font-size: 18px; }
.plat p { margin: 0 0 18px; color: var(--ink-soft); font-size: 14px; }
.plat .dl { font-size: 14px; color: var(--sky-deep); font-weight: 600; }
.plat .dl:hover { text-decoration: underline; }

/* ---------- 下载 CTA ---------- */
.cta { text-align: center; }
.cta .panel {
  background: linear-gradient(160deg, var(--sky) 0%, var(--sky-deep) 100%);
  border-radius: 28px; padding: 72px 32px; color: #fff;
  box-shadow: 0 30px 70px rgba(92,169,214,.28);
}
.cta h2 { font-family: var(--serif); font-weight: 300; font-size: clamp(28px,5vw,44px); letter-spacing: 8px; margin: 0 0 14px; }
.cta p { margin: 0 auto 34px; max-width: 460px; opacity: .92; }
.cta .btn-primary { background: #fff; color: var(--sky-deep); }
.cta .btn-primary:hover { box-shadow: 0 12px 28px rgba(0,0,0,.18); }

/* ---------- 页脚 ---------- */
footer { padding: 56px 0 40px; border-top: 1px solid var(--line); color: var(--ink-soft); font-size: 13.5px; }
footer .wrap { display: flex; flex-wrap: wrap; gap: 20px; justify-content: space-between; align-items: center; }
footer .brand b { font-size: 16px; letter-spacing: 4px; }
footer .legal { text-align: right; line-height: 1.9; }
footer a:hover { color: var(--ink); }

/* ---------- 滚动揭示动画 ---------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: none; }

/* ---------- 响应式 ---------- */
@media (max-width: 860px) {
  .nav-links { display: none; }
  .features-grid, .platforms-grid { grid-template-columns: 1fr 1fr; }
  .privacy .wrap { grid-template-columns: 1fr; gap: 40px; }
  .privacy-art { max-width: 340px; margin: 0 auto; }
}
@media (max-width: 560px) {
  section { padding: 72px 0; }
  .features-grid, .platforms-grid { grid-template-columns: 1fr; }
  .hero h1 { letter-spacing: 10px; }
  footer .wrap { flex-direction: column; text-align: center; }
  footer .legal { text-align: center; }
}

/* ---------- 卡片内链接 ---------- */
.card-link { display: inline-block; margin-top: 14px; font-size: 14px; color: var(--sky-deep); font-weight: 600; }
.card-link:hover { text-decoration: underline; }

/* ---------- 全链路加密区块 ---------- */
.encryption { background: linear-gradient(180deg, var(--paper) 0%, #fff 100%); }
.msg-types {
  list-style: none; padding: 0; margin: 48px auto 8px; max-width: 780px;
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: center;
}
.msg-types li {
  background: var(--paper-2); border: 1px solid var(--line); border-radius: 999px;
  padding: 9px 20px; font-size: 14.5px; color: var(--ink);
  display: flex; align-items: center; gap: 8px;
}
.msg-types li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--sky-deep); }

/* 加密流程图 */
.encrypt-flow { margin: 56px auto 0; max-width: 920px; display: flex; align-items: stretch; gap: 8px; }
.ef-node {
  flex: 1; background: var(--paper-2); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 26px 18px; text-align: center;
}
.ef-node .ef-ico { font-size: 34px; line-height: 1; margin-bottom: 12px; }
.ef-node b { display: block; font-size: 16px; margin-bottom: 6px; }
.ef-node span { font-size: 13px; color: var(--ink-soft); line-height: 1.6; }
.ef-server { border-color: var(--sky); background: var(--sky-soft); }
.ef-arrow { flex: 0 0 54px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; }
.ef-arrow span { width: 100%; height: 2px; background: linear-gradient(90deg, var(--sky), var(--sky-deep)); position: relative; }
.ef-arrow span::after { content: ""; position: absolute; right: -1px; top: -4px; border: 5px solid transparent; border-left-color: var(--sky-deep); }
.ef-arrow em { font-style: normal; font-size: 11px; color: var(--ink-faint); letter-spacing: 1px; }
@media (max-width: 760px) {
  .encrypt-flow { flex-direction: column; gap: 4px; }
  /* 竖排时改成纵向箭头：细竖线 + 朝下箭头，文字保持正向不旋转 */
  .ef-arrow { flex-basis: auto; height: auto; padding: 6px 0; }
  .ef-arrow span { width: 2px; height: 30px; background: linear-gradient(180deg, var(--sky), var(--sky-deep)); }
  .ef-arrow span::after {
    right: auto; left: -4px; top: 100%;
    border-left-color: transparent; border-top-color: var(--sky-deep);
  }
}

/* ---------- E2E 解释页 ---------- */
.subpage-hero { padding: 116px 0 80px; text-align: center;
  background: radial-gradient(120% 80% at 50% -10%, var(--sky-soft) 0%, rgba(234,244,250,0) 60%), var(--paper); }
.subpage-hero h1 { font-family: var(--serif); font-weight: 300; font-size: clamp(32px, 6vw, 52px); letter-spacing: 6px; margin: 0 0 18px; }
.lead { font-size: 18px; color: var(--ink-soft); max-width: 680px; margin: 0 auto; line-height: 1.9; }
.analogy { max-width: 720px; margin: 0 auto; text-align: center; }
.analogy .big-ico { font-size: 60px; margin-bottom: 22px; line-height: 1; }

.steps { margin: 48px auto 0; max-width: 760px; display: grid; gap: 18px; }
.step { display: flex; gap: 20px; align-items: flex-start; background: var(--paper-2);
  border: 1px solid var(--line); border-radius: var(--radius); padding: 24px 26px; }
.step .num { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 50%; background: var(--sky-deep);
  color: #fff; font-family: var(--serif); font-size: 20px; display: flex; align-items: center; justify-content: center; }
.step h3 { margin: 0 0 6px; font-size: 18px; }
.step p { margin: 0; color: var(--ink-soft); font-size: 15px; }

.compare { margin: 48px auto 0; max-width: 840px; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.compare .col { border-radius: var(--radius); padding: 30px 28px; border: 1px solid var(--line); background: var(--paper-2); }
.compare .col.good { border-color: var(--sky); background: var(--sky-soft); }
.compare .col h3 { margin: 0 0 16px; font-size: 18px; }
.compare .col ul { list-style: none; padding: 0; margin: 0; }
.compare .col li { padding: 8px 0; font-size: 14.5px; color: var(--ink-soft); display: flex; gap: 10px; align-items: flex-start; }
.compare .col li::before { content: "—"; color: var(--ink-faint); flex: 0 0 auto; }
.compare .col.good li::before { content: "✓"; color: var(--sky-deep); font-weight: 700; }
@media (max-width: 680px) { .compare { grid-template-columns: 1fr; } }

/* ---------- 两个版本 / 私有部署 ---------- */
.editions { background: linear-gradient(180deg, #fff 0%, var(--paper) 100%); }
.edition-grid { margin-top: 48px; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.edition {
  position: relative; background: var(--paper-2); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 38px 34px;
}
.edition.feat { border-color: var(--sky); box-shadow: 0 20px 50px rgba(92,169,214,.14); }
.edition .badge {
  display: inline-block; font-size: 12px; letter-spacing: 2px; padding: 5px 12px;
  border-radius: 999px; background: var(--sky-soft); color: var(--sky-deep);
  font-weight: 600; margin-bottom: 16px;
}
.edition .badge-dark { background: var(--ink); color: var(--paper-2); }
.edition h3 { font-family: var(--serif); font-weight: 400; font-size: 26px; letter-spacing: 5px; margin: 0 0 12px; }
.edition > p { color: var(--ink-soft); font-size: 15px; margin: 0 0 18px; }
.edition ul { list-style: none; padding: 0; margin: 0 0 26px; }
.edition li { padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 14.5px; color: var(--ink-soft); display: flex; gap: 10px; align-items: flex-start; }
.edition li:last-child { border-bottom: none; }
.edition li::before { content: "✓"; color: var(--sky-deep); font-weight: 700; flex: 0 0 auto; }
@media (max-width: 760px) { .edition-grid { grid-template-columns: 1fr; } }

/* 朴素正文页（隐私政策） */
.doc { max-width: 760px; margin: 0 auto; }
.doc h2 { font-size: 20px; margin: 38px 0 10px; letter-spacing: 1px; }
.doc p, .doc li { color: var(--ink-soft); font-size: 15px; line-height: 1.9; }
.doc ul { padding-left: 20px; }

/* ---------- 深色模式（跟随系统） ---------- */
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #121214; --paper-2: #1B1C1F; --ink: #ECECEC;
    --ink-soft: #A8AEB6; --ink-faint: #6B7178; --line: #2A2C30;
    --sky-soft: #1C2A33;
  }
  .nav { background: rgba(18,18,20,.82); }
  /* CTA 浅底深字已在基础样式固定（不随主题翻转）；深色模式仅加深悬浮阴影 */
  .btn-primary:hover { box-shadow: 0 10px 24px rgba(0,0,0,.45); }
  .cta .btn-primary { background: #fff; color: var(--sky-deep); }
  .sb-panel { border: 1px solid var(--line); box-shadow: none; }
  .killer { background: linear-gradient(180deg, #16171A 0%, var(--paper) 100%); }
  .privacy { background: linear-gradient(180deg, #16171A 0%, var(--paper) 100%); }
  .encryption { background: linear-gradient(180deg, var(--paper) 0%, #16171A 100%); }
  .editions { background: linear-gradient(180deg, #16171A 0%, var(--paper) 100%); }
}