/* =========================================================
   苔·迹 官网样式
   设计 Token 与 App 保持一致（明色 · 苔原绿）
   ========================================================= */
:root {
  color-scheme: light dark;
  --accent: #5f7f66;
  --accent-deep: #3f5c47;
  --accent-soft: rgba(95, 127, 102, 0.16);
  --accent-contrast: #ffffff;
  --bg: #eef1eb;
  --surface: #ffffff;
  --surface-2: #f5f7f2;
  --border: #e0e5db;
  --border-strong: #c0c9ba;
  --text-1: #2c332d;
  --text-2: #48514a;
  --text-3: #7a8478;
  --shadow: 0 8px 24px rgba(44, 51, 45, 0.08);
  --radius: 14px;
  --radius-lg: 22px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --accent: #9fb8a3;
    --accent-deep: #7a9781;
    --accent-soft: rgba(159, 184, 163, 0.14);
    --accent-contrast: #1a201c;
    --bg: #141a16;
    --surface: #1a201c;
    --surface-2: #202823;
    --border: #2c352e;
    --border-strong: #3a453c;
    --text-1: #e8ede9;
    --text-2: #b8c2ba;
    --text-3: #8a938a;
    --shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  }
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; background: var(--bg); }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  color: var(--text-1);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  background-color: var(--bg);
  background-image:
    radial-gradient(4px 100px at 0px 235px, rgba(95,127,102,0.12), #0000),
    radial-gradient(4px 100px at 300px 235px, rgba(95,127,102,0.12), #0000),
    radial-gradient(1.5px 1.5px at 150px 117.5px, rgba(95,127,102,0.12) 100%, #0000 150%),
    radial-gradient(4px 100px at 0px 252px, rgba(95,127,102,0.12), #0000),
    radial-gradient(4px 100px at 300px 252px, rgba(95,127,102,0.12), #0000),
    radial-gradient(1.5px 1.5px at 150px 126px, rgba(95,127,102,0.12) 100%, #0000 150%),
    radial-gradient(4px 100px at 0px 150px, rgba(95,127,102,0.12), #0000),
    radial-gradient(4px 100px at 300px 150px, rgba(95,127,102,0.12), #0000),
    radial-gradient(1.5px 1.5px at 150px 75px, rgba(95,127,102,0.12) 100%, #0000 150%),
    radial-gradient(4px 100px at 0px 253px, rgba(95,127,102,0.12), #0000),
    radial-gradient(4px 100px at 300px 253px, rgba(95,127,102,0.12), #0000),
    radial-gradient(1.5px 1.5px at 150px 126.5px, rgba(95,127,102,0.12) 100%, #0000 150%),
    radial-gradient(4px 100px at 0px 204px, rgba(95,127,102,0.12), #0000),
    radial-gradient(4px 100px at 300px 204px, rgba(95,127,102,0.12), #0000),
    radial-gradient(1.5px 1.5px at 150px 102px, rgba(95,127,102,0.12) 100%, #0000 150%),
    radial-gradient(4px 100px at 0px 134px, rgba(95,127,102,0.12), #0000),
    radial-gradient(4px 100px at 300px 134px, rgba(95,127,102,0.12), #0000),
    radial-gradient(1.5px 1.5px at 150px 67px, rgba(95,127,102,0.12) 100%, #0000 150%),
    radial-gradient(4px 100px at 0px 179px, rgba(95,127,102,0.12), #0000),
    radial-gradient(4px 100px at 300px 179px, rgba(95,127,102,0.12), #0000),
    radial-gradient(1.5px 1.5px at 150px 89.5px, rgba(95,127,102,0.12) 100%, #0000 150%),
    radial-gradient(4px 100px at 0px 299px, rgba(95,127,102,0.12), #0000),
    radial-gradient(4px 100px at 300px 299px, rgba(95,127,102,0.12), #0000),
    radial-gradient(1.5px 1.5px at 150px 149.5px, rgba(95,127,102,0.12) 100%, #0000 150%),
    radial-gradient(4px 100px at 0px 215px, rgba(95,127,102,0.12), #0000),
    radial-gradient(4px 100px at 300px 215px, rgba(95,127,102,0.12), #0000),
    radial-gradient(1.5px 1.5px at 150px 107.5px, rgba(95,127,102,0.12) 100%, #0000 150%),
    radial-gradient(4px 100px at 0px 281px, rgba(95,127,102,0.12), #0000),
    radial-gradient(4px 100px at 300px 281px, rgba(95,127,102,0.12), #0000),
    radial-gradient(1.5px 1.5px at 150px 140.5px, rgba(95,127,102,0.12) 100%, #0000 150%),
    radial-gradient(4px 100px at 0px 158px, rgba(95,127,102,0.12), #0000),
    radial-gradient(4px 100px at 300px 158px, rgba(95,127,102,0.12), #0000),
    radial-gradient(1.5px 1.5px at 150px 79px, rgba(95,127,102,0.12) 100%, #0000 150%),
    radial-gradient(4px 100px at 0px 210px, rgba(95,127,102,0.12), #0000),
    radial-gradient(4px 100px at 300px 210px, rgba(95,127,102,0.12), #0000),
    radial-gradient(1.5px 1.5px at 150px 105px, rgba(95,127,102,0.12) 100%, #0000 150%);
  background-size:
    300px 235px, 300px 235px, 300px 235px,
    300px 252px, 300px 252px, 300px 252px,
    300px 150px, 300px 150px, 300px 150px,
    300px 253px, 300px 253px, 300px 253px,
    300px 204px, 300px 204px, 300px 204px,
    300px 134px, 300px 134px, 300px 134px,
    300px 179px, 300px 179px, 300px 179px,
    300px 299px, 300px 299px, 300px 299px,
    300px 215px, 300px 215px, 300px 215px,
    300px 281px, 300px 281px, 300px 281px,
    300px 158px, 300px 158px, 300px 158px,
    300px 210px, 300px 210px, 300px 210px;
  animation: bg-rain 150s linear infinite;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-deep); }

img, svg { display: block; }

.container {
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ---------- 顶部导航 ---------- */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--bg);
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}

.nav-inner {
  max-width: 1040px;
  margin: 0 auto;
  padding: 12px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-1);
  font-weight: 700;
  font-size: 18px;
}
.brand:hover { color: var(--text-1); }

.brand-logo {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  flex: none;
  object-fit: cover;
  object-position: center;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.nav-links a {
  color: var(--text-2);
  padding: 6px 12px;
  border-radius: 8px;
  white-space: nowrap;
  font-size: 15px;
}
.nav-links a:hover {
  color: var(--text-1);
  background: var(--accent-soft);
}

/* ---------- 右侧悬浮导航（右侧垂直居中，滚动到对应内容时放大并变黑） ---------- */
.side-nav {
  position: fixed;
  right: 22px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 55;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 16px;
}
.side-nav a {
  color: var(--text-3);
  font-size: 14px;
  line-height: 1.3;
  transition: color 0.25s ease, font-size 0.25s ease;
}
.side-nav a:hover { color: var(--text-2); }
.side-nav a.is-active {
  color: var(--text-1);
  font-size: 20px;
  font-weight: 700;
}

/* ---------- 按钮 ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 600;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn svg { width: 18px; height: 18px; }

.btn-primary {
  background: var(--accent);
  color: var(--accent-contrast);
  box-shadow: 0 6px 16px var(--accent-soft);
}
.btn-primary:hover { background: var(--accent-deep); color: var(--accent-contrast); }

.btn-lg { padding: 16px 36px; font-size: 18px; }

.btn-ghost {
  background: transparent;
  color: var(--text-1);
  border-color: var(--border-strong);
}
.btn-ghost:hover { border-color: var(--accent); color: var(--accent-deep); }

/* ---------- 首屏两个按钮：悬停主题色扫入（样式改自 Uiverse.io by alexroumi，黑色换为主题色） ---------- */
.hero-actions .btn {
  padding: 15px 25px;
  border: unset;
  border-radius: 999px;
  color: var(--accent);
  z-index: 1;
  background: #e8e8e8;
  position: relative;
  font-weight: 1000;
  font-size: 17px;
  box-shadow: 4px 8px 19px -3px rgba(0, 0, 0, 0.27);
  transition: all 250ms;
  overflow: hidden;
}

.hero-actions .btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background-color: var(--accent);
  z-index: -1;
  box-shadow: 4px 8px 19px -3px rgba(0, 0, 0, 0.27);
  transition: all 250ms;
}

.hero-actions .btn:hover { color: #e8e8e8; }

.hero-actions .btn:hover::before { width: 100%; }

@media (prefers-color-scheme: dark) {
  .hero-actions .btn { background: var(--surface-2); }
}

/* ---------- Hero ---------- */
.hero {
  padding: 72px 0 56px;
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 40px;
  align-items: center;
}

.hero-kicker {
  color: var(--accent);
  font-weight: 600;
  letter-spacing: 0.08em;
  margin-bottom: 12px;
}

.hero h1 {
  font-size: clamp(30px, 5vw, 44px);
  line-height: 1.3;
  margin-bottom: 16px;
}

.hero-sub {
  color: var(--text-2);
  font-size: 17px;
  margin-bottom: 28px;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
}

.hero-meta { color: var(--text-3); font-size: 14px; }

/* 首页幼苗成长动画 */
.hero-art { display: flex; justify-content: center; }

.hero-art svg { width: 250px; height: auto; }

.hero-art .g-ground { fill: var(--accent-soft); }
.hero-art .g-stone { fill: var(--border-strong); }
.hero-art .g-stone-shade { fill: var(--text-3); opacity: 0.35; }
.hero-art .g-moss { fill: var(--accent); }
.hero-art .g-moss-deep { fill: var(--accent-deep); }
.hero-art .g-flower-stem { fill: none; stroke: var(--accent-deep); stroke-width: 1.2; stroke-linecap: round; }
.hero-art .g-flower-head { fill: var(--surface); }
.hero-art .g-stem { fill: none; stroke: var(--accent); stroke-width: 3.5; stroke-linecap: round; }
.hero-art .g-sprout-leaf { fill: var(--accent); }
.hero-art .g-trunk { fill: var(--accent-deep); }
.hero-art .g-bark { fill: none; stroke: rgba(20, 30, 16, 0.28); stroke-width: 1.5; stroke-linecap: round; }
.hero-art .g-branch { fill: none; stroke: var(--accent-deep); stroke-width: 4; stroke-linecap: round; }
.hero-art .g-leaf-a { fill: var(--accent); }
.hero-art .g-leaf-b { fill: var(--accent-deep); }
.hero-art .g-sun { fill: var(--accent-soft); }

.grow-sprout,
.grow-tree,
.grow-canopy,
.moss-l-a, .moss-l-b, .moss-r-a, .moss-r-b,
.flower-1, .flower-2, .flower-3, .flower-4 { transform-box: view-box; }

.grow-sprout { transform-origin: 130px 272px; animation: grow-sprout 10s ease-in-out forwards; }
.grow-tree   { transform-origin: 130px 273px; animation: grow-tree 10s ease-in-out forwards; }
.grow-canopy { transform-origin: 177px 115px; animation: grow-canopy 10s ease-in-out forwards; }

/* 苔藓在石头轮廓内从一点扩散，逐渐变绿但保留部分石面（clipPath 裁剪） */
.moss-l-a { transform-origin: 56px 268px;  animation: grow-moss-a 10s ease-in-out forwards; }
.moss-l-b { transform-origin: 54px 274px;  animation: grow-moss-b 10s ease-in-out forwards; }
.moss-r-a { transform-origin: 182px 272px; animation: grow-moss-a 10s ease-in-out forwards; }
.moss-r-b { transform-origin: 180px 277px; animation: grow-moss-b 10s ease-in-out forwards; }

/* 树成荫后苔花分两波绽放 */
.flower-1 { transform-origin: 56px 262px;  animation: grow-flower-a 10s ease-in-out forwards; }
.flower-2 { transform-origin: 66px 268px;  animation: grow-flower-b 10s ease-in-out forwards; }
.flower-3 { transform-origin: 178px 266px; animation: grow-flower-a 10s ease-in-out forwards; }
.flower-4 { transform-origin: 194px 272px; animation: grow-flower-b 10s ease-in-out forwards; }

/* 幼苗破土长大 → 化作大树生长成荫 → 冠层轻摇、苔花绽放，10s 播放一次后定格 */
@keyframes grow-sprout {
  0%   { transform: scaleY(0); opacity: 0; }
  6%   { transform: scaleY(0.15); opacity: 1; }
  32%  { transform: scaleY(1); opacity: 1; }
  40%  { transform: scaleY(1); opacity: 1; }
  48%  { transform: scaleY(1); opacity: 0; }
  100% { transform: scaleY(1); opacity: 0; }
}
@keyframes grow-tree {
  0%, 38% { transform: scale(0.06); opacity: 0; }
  46%     { transform: scale(0.22); opacity: 1; }
  86%, 100% { transform: scale(1); opacity: 1; }
}
@keyframes grow-canopy {
  0%, 88% { transform: rotate(0deg); }
  92%     { transform: rotate(1.8deg); }
  97%     { transform: rotate(-1.2deg); }
  100%    { transform: rotate(0deg); }
}

@keyframes grow-moss-a {
  0%, 20%  { transform: scale(0); opacity: 0; }
  30%      { transform: scale(0.5); opacity: 1; }
  60%, 100% { transform: scale(1); opacity: 1; }
}
@keyframes grow-moss-b {
  0%, 42%  { transform: scale(0); opacity: 0; }
  52%      { transform: scale(0.5); opacity: 1; }
  78%, 100% { transform: scale(1); opacity: 1; }
}
@keyframes grow-flower-a {
  0%, 72%  { transform: scale(0); opacity: 0; }
  77%      { transform: scale(1.2); opacity: 1; }
  80%, 100% { transform: scale(1); opacity: 1; }
}
@keyframes grow-flower-b {
  0%, 80%  { transform: scale(0); opacity: 0; }
  85%      { transform: scale(1.2); opacity: 1; }
  88%, 100% { transform: scale(1); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .grow-sprout, .grow-tree, .grow-canopy,
  .moss-l-a, .moss-l-b, .moss-r-a, .moss-r-b,
  .flower-1, .flower-2, .flower-3, .flower-4 { animation: none; }
  .grow-sprout { opacity: 0; }
}

/* ---------- 通用区块 ---------- */
.section { padding: 56px 0; }

.section-head { margin-bottom: 32px; }

.section-head .kicker {
  color: var(--accent);
  font-weight: 600;
  letter-spacing: 0.08em;
  margin-bottom: 8px;
}

.section-head h2 {
  font-size: clamp(24px, 3.6vw, 32px);
  line-height: 1.35;
}

.section-head p { color: var(--text-2); margin-top: 8px; }

/* ---------- 功能卡片（卡片样式改自 Uiverse.io，尺寸沿用原功能卡片） ---------- */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
}

.feature-grid .card {
  background: var(--surface);
  color: var(--text-1);
  position: relative;
  border-radius: var(--radius-lg);
  padding: 24px;
  transition: transform 0.4s ease;
}

.feature-grid .card-content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 3em;
  height: 100%;
  transition: transform 0.4s ease;
}

.feature-grid .card-top,
.feature-grid .card-bottom {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.feature-grid .card-top p,
.feature-grid .card-bottom p {
  margin: 0;
}

.feature-grid .card-top p {
  font-weight: 600;
}

.feature-grid .card-top > svg {
  width: 2em;
  height: 2em;
  flex: none;
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.4s ease;
}

.feature-grid .card-bottom {
  align-items: flex-end;
}
.feature-grid .card-bottom > p {
  font-weight: 400;
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-2);
}
.feature-grid .card-bottom > svg {
  flex: none;
  opacity: 0.3;
}

.feature-grid .card:hover {
  cursor: pointer;
  transform: scale(0.97);
}
.feature-grid .card:hover .card-content {
  transform: scale(0.96);
}
.feature-grid .card:hover .card-top > svg {
  transform: scale(1.05);
}
.feature-grid .card:active {
  transform: scale(0.9);
}

/* ---------- 理念引用 ---------- */
.quote-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius-lg);
  padding: 32px;
  max-width: 720px;
  margin: 0 auto;
}
.quote-card p {
  font-size: 17px;
  color: var(--text-1);
  margin-bottom: 16px;
}
.quote-card .quote-sign {
  color: var(--text-3);
  text-align: right;
  font-size: 14px;
}

/* ---------- 下载卡片（download.html） ---------- */
.download-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 40px 32px;
  text-align: center;
  max-width: 640px;
  margin: 0 auto;
}

.download-version {
  color: var(--accent);
  font-weight: 700;
  font-size: 20px;
  margin-bottom: 4px;
}

.download-meta {
  color: var(--text-3);
  font-size: 14px;
  margin-bottom: 24px;
}

.download-note { color: var(--text-3); font-size: 13px; margin-top: 16px; }

/* ---------- 步骤与指引 ---------- */
.steps {
  counter-reset: step;
  list-style: none;
  max-width: 640px;
  margin: 0 auto;
}
.steps li {
  counter-increment: step;
  position: relative;
  padding: 0 0 20px 52px;
}
.steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-contrast);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.vendor-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}

.vendor-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
}
.vendor-card h3 { font-size: 15px; margin-bottom: 6px; }
.vendor-card p { color: var(--text-2); font-size: 13.5px; }

.tip-note {
  background: var(--accent-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 18px;
  color: var(--text-2);
  font-size: 14px;
  max-width: 640px;
  margin: 24px auto 0;
}

/* ---------- 更新日志 ---------- */
.timeline { max-width: 680px; }

.timeline-item {
  position: relative;
  padding: 0 0 36px 28px;
}
/* 竖线：起于第一个圆点、止于最后一个圆点，与相邻节点无缝相连 */
.timeline-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--border-strong);
}
.timeline-item:first-child::before { top: 4px; }
.timeline-item:last-child::before { bottom: auto; height: 8px; }
.timeline-item::after {
  content: "";
  position: absolute;
  left: -5px;
  top: 4px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--accent);
}

.timeline-item h2 {
  font-size: 18px;
  margin-bottom: 4px;
}
.timeline-item .timeline-code {
  color: var(--text-3);
  font-size: 13px;
  margin-bottom: 12px;
}
.timeline-item ul { padding-left: 20px; color: var(--text-2); }
.timeline-item li { margin-bottom: 4px; }

/* ---------- FAQ ---------- */
.faq-list { max-width: none; }

.faq-list details {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 12px;
  overflow: hidden;
}

.faq-list summary {
  cursor: pointer;
  padding: 18px 20px;
  font-weight: 600;
  list-style: none;
  position: relative;
  padding-right: 44px;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after {
  content: "+";
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--accent);
  font-size: 22px;
  font-weight: 400;
}
.faq-list details[open] summary::after { content: "−"; }

.faq-list .faq-body {
  padding: 0 20px 18px;
  color: var(--text-2);
  font-size: 15px;
}
.faq-list .faq-body p + p { margin-top: 8px; }

/* 展开收起：高度弹性回弹 + 淡入淡出（不支持 ::details-content / interpolate-size 的浏览器直接显示，无动画） */
:root { interpolate-size: allow-keywords; }
.faq-list details::details-content {
  block-size: 0;
  overflow: hidden;
  opacity: 0;
  transition:
    block-size 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
    opacity 0.35s ease,
    content-visibility 0.5s allow-discrete;
}
.faq-list details[open]::details-content {
  block-size: auto;
  opacity: 1;
}

/* ---------- 下载横幅（index.html） ---------- */
.cta-banner {
  background: linear-gradient(135deg, var(--accent-deep), var(--accent));
  border-radius: var(--radius-lg);
  color: #ffffff;
  text-align: center;
  padding: 48px 24px;
}
.cta-banner h2 { font-size: clamp(22px, 3.4vw, 30px); margin-bottom: 8px; }
.cta-banner p { opacity: 0.85; margin-bottom: 24px; }

.cta-banner .btn {
  background: #ffffff;
  color: var(--accent-deep);
}
.cta-banner .btn:hover { background: var(--surface-2); }

/* ---------- 桌面小组件预览（index.html） ---------- */
.widget-grid {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 18px;
  align-items: start;
}
.widget-frame {
  border-radius: 28px;
  overflow: hidden;
  box-shadow: var(--shadow);
}
.widget-frame iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: none;
}
.wf-day { aspect-ratio: 1 / 1; grid-row: span 2; max-width: 320px; }
.wf-month, .wf-year { aspect-ratio: 2 / 1; }
@media (max-width: 760px) {
  .widget-grid { grid-template-columns: 1fr; }
  .wf-day { grid-row: auto; justify-self: center; width: 100%; }
}

/* ---------- 底部下载区（index.html） ---------- */
/* 点击锚点时，让目标区块顶部停在右侧导航的触发线（45% 视口）稍上方，保证对应的标签刚好点亮 */
#download { scroll-margin-top: 42vh; }
#features { scroll-margin-top: 42vh; }
#changelog { scroll-margin-top: 42vh; }
#faq { scroll-margin-top: 42vh; }
/* 底部下载区只保留 Download 按钮；isolation 让苔叶从按钮背后长出时不被其他内容盖住 */
#download {
  text-align: center;
  isolation: isolate;
}

/* 下载按钮（样式改自 Uiverse.io「Plant based」，悬停时长出五片苔叶） */
.plant-btn {
  position: relative;
  padding: 13px 35px;
  background: #f5ddb7;
  font-family: inherit;
  font-size: 17px;
  font-weight: 900;
  color: #181818;
  border: none;
  border-radius: 8px;
  box-shadow: 2px 2px 5px #18181869, inset 2px 2px 10px #ffffffb0;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}
.plant-btn .icon-1,
.plant-btn .icon-2,
.plant-btn .icon-3,
.plant-btn .icon-4,
.plant-btn .icon-5 {
  position: absolute;
  top: 10%;
  left: 50%;
  transform: translate(-50%, 0);
  width: 0;
  height: auto;
  transition: all 0.5s ease-in-out;
}
.plant-btn .icon-1 { z-index: -1; }
.plant-btn .icon-2,
.plant-btn .icon-3,
.plant-btn .icon-4,
.plant-btn .icon-5 { z-index: -2; }
.plant-btn:hover { padding: 13px 25px; border-radius: 8px 8px 24px 24px; }
.plant-btn:hover .icon-1 { top: -250%; left: 50%; width: 50px; animation: inIcon1 1s ease 0.45s forwards; }
.plant-btn:hover .icon-2 { top: -200%; left: 90%; width: 75px; animation: inIcon2 1s ease 0.45s forwards; }
.plant-btn:hover .icon-3 { top: -130%; left: 20%; width: 60px; animation: inIcon3 1s ease 0.45s forwards; }
.plant-btn:hover .icon-4 { top: -300%; left: 10%; width: 85px; animation: inIcon4 1s ease 0.45s forwards; }
.plant-btn:hover .icon-5 { top: -350%; left: 90%; width: 85px; animation: inIcon5 1s ease 0.45s forwards; }
.plant-btn .fil-leaf-1 { fill: #7B9B3A; }
.plant-btn .fil-leaf-2 { fill: #556729; fill-rule: nonzero; }
.plant-btn .fil-leaf-3 { fill: #556729; }
.plant-btn .fil-leaf-4,
.plant-btn .fil-leaf-5 { fill: #3C4819; }

/* 苔叶长出后的摇曳动画 */
@keyframes inIcon1 {
  0% { transform-origin: 0 100%; transform: translate(-50%, 0) rotate(0deg); }
  25% { transform-origin: 0 100%; transform: translate(-50%, 0) rotate(5deg); }
  50% { transform-origin: 0 100%; transform: translate(-50%, 0) rotate(1deg); }
  65% { transform-origin: 0 100%; transform: translate(-50%, 0) rotate(3deg); }
  100% { transform-origin: 0 100%; transform: translate(-50%, 0) rotate(0deg); }
}
@keyframes inIcon2 {
  0% { transform-origin: 0 100%; transform: translate(-50%, 0) rotate(0deg); }
  35% { transform-origin: 0 100%; transform: translate(-50%, 0) rotate(10deg); }
  50% { transform-origin: 0 100%; transform: translate(-50%, 0) rotate(4deg); }
  80% { transform-origin: 0 100%; transform: translate(-50%, 0) rotate(5deg); }
  100% { transform-origin: 0 100%; transform: translate(-50%, 0) rotate(0deg); }
}
@keyframes inIcon3 {
  0% { transform-origin: 0 100%; transform: translate(-50%, 0) rotate(0deg); }
  35% { transform-origin: 0 100%; transform: translate(-50%, 0) rotate(-2deg); }
  100% { transform-origin: 0 100%; transform: translate(-50%, 0) rotate(0deg); }
}
@keyframes inIcon4 {
  0% { transform-origin: 0 100%; transform: translate(-50%, 0) rotate(0deg); }
  40% { transform-origin: 0 100%; transform: translate(-50%, 0) rotate(-3deg); }
  100% { transform-origin: 0 100%; transform: translate(-50%, 0) rotate(0deg); }
}
@keyframes inIcon5 {
  0% { transform-origin: 0 100%; transform: translate(-50%, 0) rotate(0deg); }
  35% { transform-origin: 0 100%; transform: translate(-50%, 0) rotate(-3deg); }
  100% { transform-origin: 0 100%; transform: translate(-50%, 0) rotate(0deg); }
}

/* ---------- 下载渠道选择弹窗（index.html） ---------- */
.dl-modal {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(20, 26, 22, 0.45);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.dl-modal.show { opacity: 1; pointer-events: auto; }
.dl-modal-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-pop, 0 12px 40px rgba(0,0,0,0.2));
  width: 340px;
  max-width: 100%;
  padding: 24px 20px;
  text-align: center;
  transform: translateY(16px) scale(0.96);
  transition: transform 0.3s cubic-bezier(0.34, 1.4, 0.64, 1);
}
.dl-modal.show .dl-modal-card { transform: translateY(0) scale(1); }
.dl-modal-card h3 { font-size: 18px; margin-bottom: 4px; }
.dl-modal-sub { color: var(--text-3); font-size: 13px; margin-bottom: 18px; }
.dl-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 14px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 10px;
  color: var(--text-1);
  text-align: left;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}
.dl-option:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--text-1);
}
.dl-option:active { transform: scale(0.98); }
.dl-option svg { width: 22px; height: 22px; stroke: var(--accent); flex: none; }
.dl-option-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.dl-option-text b { font-size: 15px; }
.dl-option-text i { font-style: normal; font-size: 12px; color: var(--text-3); }
.dl-option-arrow { color: var(--text-3); font-size: 18px; }
.dl-modal-close {
  width: 100%;
  margin-top: 4px;
  padding: 10px;
  border: none;
  border-radius: var(--radius);
  background: var(--surface-2);
  color: var(--text-2);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}
.dl-modal-close:hover { background: var(--surface-3); }

/* ---------- 页脚 ---------- */
.site-footer {
  border-top: 1px solid var(--border);
  background: var(--surface-2);
  margin-top: 64px;
  padding: 40px 0 32px;
}

.footer-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  justify-content: space-between;
  margin-bottom: 24px;
}

.footer-brand { font-weight: 700; }
.footer-muted { color: var(--text-3); font-weight: 400; font-size: 13.5px; }

.footer-links { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.footer-links a { color: var(--text-2); font-size: 14px; }
.footer-links a:hover { color: var(--accent-deep); }

.footer-contact { color: var(--text-3); font-size: 14px; }

.footer-legal {
  border-top: 1px solid var(--border);
  padding-top: 20px;
  color: var(--text-3);
  font-size: 13px;
  text-align: center;
}

/* ---------- 页面标题（内页 Hero-lite） ---------- */
.page-head {
  padding: 48px 0 8px;
  text-align: center;
}
.page-head h1 { font-size: clamp(26px, 4vw, 36px); margin-bottom: 8px; }
.page-head p { color: var(--text-2); }

/* ---------- 响应式 ---------- */
@media (max-width: 760px) {
  .hero {
    grid-template-columns: 1fr;
    padding: 48px 0 40px;
    text-align: center;
  }
  .hero-actions { justify-content: center; }
  .section { padding: 40px 0; }
  .quote-card, .download-card { padding: 28px 20px; }
  .footer-inner { flex-direction: column; }
  .side-nav { right: 10px; gap: 12px; }
  .side-nav a { font-size: 12px; }
  .side-nav a.is-active { font-size: 16px; }
}

/* ---------- 滚动浮现（复用 App「我的」页卡片的滑入动效：进入视口弹入，滚出重置，回滚再播） ----------
   html.reveal-on 由 JS 添加：JS 不可用时元素直接显示，不会被藏起来 */
.reveal-on .reveal {
  opacity: 0;
  transform: translateY(-18px);
  transition: opacity 0.4s ease, transform 0.6s cubic-bezier(0.34, 1.9, 0.64, 1);
}
.reveal-on .reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}
/* 与组件自身的 hover 过渡共存 */
.reveal-on .feature-grid .card.reveal {
  transition: opacity 0.4s ease, transform 0.6s cubic-bezier(0.34, 1.9, 0.64, 1);
}
.reveal-on .plant-btn.reveal {
  transition:
    opacity 0.4s ease,
    transform 0.6s cubic-bezier(0.34, 1.9, 0.64, 1),
    padding 0.3s ease-in-out,
    border-radius 0.3s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
  .reveal-on .reveal { transform: none; transition: opacity 0.25s ease; }
}

/* ---------- 背景雨滴网格动画（源自 背景.txt，颜色改为主题色） ---------- */
@keyframes bg-rain {
  0% {
    background-position:
      0px 220px, 3px 220px, 151.5px 337.5px,
      25px 24px, 28px 24px, 176.5px 150px,
      50px 16px, 53px 16px, 201.5px 91px,
      75px 224px, 78px 224px, 226.5px 350.5px,
      100px 19px, 103px 19px, 251.5px 121px,
      125px 120px, 128px 120px, 276.5px 187px,
      150px 31px, 153px 31px, 301.5px 120.5px,
      175px 235px, 178px 235px, 326.5px 384.5px,
      200px 121px, 203px 121px, 351.5px 228.5px,
      225px 224px, 228px 224px, 376.5px 364.5px,
      250px 26px, 253px 26px, 401.5px 105px,
      275px 75px, 278px 75px, 426.5px 180px;
  }
  to {
    background-position:
      0px 6800px, 3px 6800px, 151.5px 6917.5px,
      25px 13632px, 28px 13632px, 176.5px 13758px,
      50px 5416px, 53px 5416px, 201.5px 5491px,
      75px 17175px, 78px 17175px, 226.5px 17301.5px,
      100px 5119px, 103px 5119px, 251.5px 5221px,
      125px 8428px, 128px 8428px, 276.5px 8495px,
      150px 9876px, 153px 9876px, 301.5px 9965.5px,
      175px 13391px, 178px 13391px, 326.5px 13540.5px,
      200px 14741px, 203px 14741px, 351.5px 14848.5px,
      225px 18770px, 228px 18770px, 376.5px 18910.5px,
      250px 5082px, 253px 5082px, 401.5px 5161px,
      275px 6375px, 278px 6375px, 426.5px 6480px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body { animation: none; }
}