@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600;700&family=Fira+Sans:wght@300;400;500;600;700&display=swap');

/* ===== CSS 变量 ===== */
:root {
  --c-red: #ff0000;
  --c-pink: #ff1493;
  --c-dark: #261717;
  --c-dark2: #1a0f0f;
  --c-dark3: #0d0707;
  --c-text: #f0e0e0;
  --c-text-muted: #c8a0a0;
  --c-surface: rgba(38,23,23,0.85);
  --c-surface2: rgba(50,20,20,0.7);
  --c-border: rgba(255,20,147,0.25);
  --c-glow-red: rgba(255,0,0,0.35);
  --c-glow-pink: rgba(255,20,147,0.35);
  --radius-card: 28px;
  --radius-btn: 100px;
  --font-sans: 'Fira Sans', system-ui, -apple-system, sans-serif;
  --font-code: 'Fira Code', 'Fira Mono', monospace;
  --nav-h: 68px;
  --max-w: 1200px;
  --prose-w: 720px;
  --transition: 0.3s cubic-bezier(0.4,0,0.2,1);
}

/* ===== Reset ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 17px; scroll-behavior: smooth; }
body {
  font-family: var(--font-sans);
  background: var(--c-dark3);
  color: var(--c-text);
  line-height: 1.7;
  min-height: 100vh;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
a { color: var(--c-pink); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--c-red); }
ol, ul { list-style: none; }
button, input { font-family: inherit; }

/* ===== Aurora 背景 ===== */
.aurora-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.aurora-layer {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.55;
  mix-blend-mode: screen;
}
.aurora-layer.a1 {
  width: 80vw; height: 80vw;
  top: -30vw; left: -20vw;
  background: radial-gradient(ellipse, #ff0000 0%, #ff1493 40%, transparent 70%);
  animation: aurora-drift1 12s ease-in-out infinite alternate;
}
.aurora-layer.a2 {
  width: 70vw; height: 70vw;
  bottom: -20vw; right: -15vw;
  background: radial-gradient(ellipse, #ff1493 0%, #8b0000 40%, transparent 70%);
  animation: aurora-drift2 10s ease-in-out infinite alternate;
}
.aurora-layer.a3 {
  width: 60vw; height: 60vw;
  top: 30vh; left: 30vw;
  background: conic-gradient(from 90deg, #ff0000, #ff1493, #261717, #ff0000);
  animation: aurora-drift3 14s ease-in-out infinite alternate;
  opacity: 0.25;
}
@keyframes aurora-drift1 {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(8vw, 6vh) scale(1.15); }
}
@keyframes aurora-drift2 {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(-6vw, -8vh) scale(1.12); }
}
@keyframes aurora-drift3 {
  from { transform: translate(0, 0) rotate(0deg); }
  to   { transform: translate(-4vw, 5vh) rotate(30deg); }
}
@media (prefers-reduced-motion: reduce) {
  .aurora-layer { animation: none; }
}

/* ===== 通用布局 ===== */
body > *:not(.aurora-bg) { position: relative; z-index: 1; }

/* ===== Header / Nav ===== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(13,7,7,0.88);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--c-border);
}
.header-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 24px;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  gap: 20px;
}
.brand {
  font-family: var(--font-code);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--c-text);
  white-space: nowrap;
  flex-shrink: 0;
  letter-spacing: -0.01em;
}
.brand:hover { color: var(--c-pink); }
.site-header nav { flex: 1; overflow: hidden; }
.site-header nav ol {
  display: flex;
  gap: 6px;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 8px 0;
}
.site-header nav ol::-webkit-scrollbar { display: none; }
.site-header nav ol li a {
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 16px;
  border-radius: var(--radius-btn);
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--c-text-muted);
  border: 1px solid transparent;
  white-space: nowrap;
  transition: all var(--transition);
}
.site-header nav ol li a:hover {
  color: var(--c-text);
  background: rgba(255,20,147,0.15);
  border-color: var(--c-border);
}
.contact-btn {
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 20px;
  border-radius: var(--radius-btn);
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--c-text);
  background: linear-gradient(135deg, var(--c-red), var(--c-pink));
  flex-shrink: 0;
  transition: opacity var(--transition);
}
.contact-btn:hover { opacity: 0.85; color: var(--c-text); }

/* ===== 粘性锚点条 ===== */
.sticky-anchors {
  position: sticky;
  top: var(--nav-h);
  z-index: 90;
  background: rgba(26,15,15,0.9);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--c-border);
  display: flex;
  gap: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.sticky-anchors::-webkit-scrollbar { display: none; }
.sticky-anchors a {
  padding: 12px 24px;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--c-text-muted);
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: all var(--transition);
}
.sticky-anchors a:hover {
  color: var(--c-pink);
  border-bottom-color: var(--c-pink);
}

/* ===== 主容器 ===== */
.wrap {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 40px 24px;
}

/* ===== Hero（首页）===== */
.hero {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  position: relative;
  overflow: hidden;
}
.hero-media {
  position: relative;
  overflow: hidden;
}
.hero-media .hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-slice {
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 55%, var(--c-dark3) 55%);
  z-index: 2;
}
.hero-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  text-align: right;
  padding: 80px 60px 80px 40px;
  position: relative;
  z-index: 2;
}
.hero-media:not(:has(.hero-img)) + .hero-text,
.hero:not(:has(.hero-media .hero-img)) .hero-text {
  grid-column: 1 / -1;
  align-items: center;
  text-align: center;
  padding: 120px 60px;
  background: linear-gradient(135deg, rgba(255,0,0,0.12), rgba(255,20,147,0.08));
}
.hero-eyebrow {
  display: inline-block;
  font-family: var(--font-code);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--c-pink);
  background: rgba(255,20,147,0.12);
  border: 1px solid rgba(255,20,147,0.3);
  border-radius: var(--radius-btn);
  padding: 6px 16px;
  margin-bottom: 24px;
}
.hero-title {
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 20px;
  background: linear-gradient(135deg, #fff 30%, var(--c-pink) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.hero-desc {
  font-size: 1.1rem;
  color: var(--c-text-muted);
  max-width: 420px;
  margin-bottom: 36px;
  line-height: 1.7;
}
.hero-cta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* ===== 按钮 ===== */
.btn-primary {
  display: inline-flex;
  align-items: center;
  height: 48px;
  padding: 0 28px;
  border-radius: var(--radius-btn);
  font-weight: 600;
  font-size: 0.95rem;
  color: #fff;
  background: linear-gradient(135deg, var(--c-red), var(--c-pink));
  transition: opacity var(--transition), transform var(--transition);
  box-shadow: 0 4px 24px var(--c-glow-pink);
}
.btn-primary:hover { opacity: 0.88; transform: translateY(-2px); color: #fff; }
.btn-secondary {
  display: inline-flex;
  align-items: center;
  height: 48px;
  padding: 0 28px;
  border-radius: var(--radius-btn);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--c-pink);
  background: rgba(255,20,147,0.1);
  border: 1px solid rgba(255,20,147,0.4);
  transition: all var(--transition);
}
.btn-secondary:hover { background: rgba(255,20,147,0.2); color: var(--c-text); }

/* ===== 卡片网格 ===== */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
  margin-top: 20px;
}
.card {
  background: var(--c-surface);
  border-radius: var(--radius-card);
  border: 1px solid var(--c-border);
  overflow: hidden;
  transition: transform var(--transition), box-shadow var(--transition);
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px var(--c-glow-pink);
}
.card-link {
  display: block;
  color: var(--c-text);
  height: 100%;
}
.card-link:hover { color: var(--c-text); }
.card-media { overflow: hidden; border-radius: var(--radius-card) var(--radius-card) 0 0; }
.card-img { width: 100%; height: 180px; object-fit: cover; transition: transform 0.5s ease; }
.card:hover .card-img { transform: scale(1.04); }
.card-body { padding: 20px; }
.card-title {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 8px;
  line-height: 1.4;
}
.card-desc { font-size: 0.88rem; color: var(--c-text-muted); line-height: 1.6; margin-bottom: 10px; }
.card-date { font-size: 0.8rem; color: var(--c-text-muted); font-family: var(--font-code); }

/* ===== 首页专区标题 ===== */
.home-section { margin-bottom: 60px; }
.section-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--c-border);
  padding-bottom: 14px;
}
.section-header h2 {
  font-size: 1.4rem;
  font-weight: 700;
}
.section-header h2 span {
  background: linear-gradient(135deg, var(--c-text) 40%, var(--c-pink) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.more-link {
  font-size: 0.88rem;
  font-family: var(--font-code);
  color: var(--c-pink);
}
.more-link:hover { color: var(--c-red); }

/* ===== 布局：带侧边栏 ===== */
.layout-with-aside {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 40px;
  align-items: start;
}

/* ===== Aside ===== */
.content-aside { position: relative; }
.sticky-aside {
  position: sticky;
  top: calc(var(--nav-h) + 20px);
}
.aside-inner {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-card);
  padding: 24px;
}
.aside-inner h3 {
  font-size: 0.95rem;
  font-weight: 700;
  margin-bottom: 14px;
  font-family: var(--font-code);
  color: var(--c-pink);
}
.aside-inner h3 span { color: var(--c-pink); }
.aside-links { display: flex; flex-direction: column; gap: 8px; margin-bottom: 24px; }
.aside-links li a {
  display: block;
  padding: 8px 12px;
  border-radius: 12px;
  font-size: 0.88rem;
  color: var(--c-text-muted);
  background: rgba(255,255,255,0.04);
  transition: all var(--transition);
  line-height: 1.4;
}
.aside-links li a:hover {
  color: var(--c-text);
  background: rgba(255,20,147,0.12);
}
.aside-nav { margin-top: 20px; }
.aside-card {
  margin-bottom: 12px;
}
.aside-card a {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255,255,255,0.04);
  transition: all var(--transition);
}
.aside-card a:hover { background: rgba(255,20,147,0.12); }
.aside-card strong { font-size: 0.88rem; color: var(--c-text); line-height: 1.4; }
.aside-card small { font-size: 0.78rem; color: var(--c-text-muted); font-family: var(--font-code); }
.aside-card .aside-desc { font-size: 0.82rem; color: var(--c-text-muted); }
.aside-tip { margin-top: 16px; }
.aside-tip p { font-size: 0.84rem; color: var(--c-text-muted); line-height: 1.6; }
.global-aside {
  max-width: var(--max-w);
  margin: 0 auto 40px;
  padding: 0 24px;
}

/* ===== 正文排版 ===== */
.prose {
  max-width: var(--prose-w);
  line-height: 1.8;
}
.prose h2 {
  font-size: 1.4rem;
  font-weight: 700;
  margin: 2em 0 0.8em;
  color: var(--c-text);
}
.prose h2 span {
  background: linear-gradient(135deg, var(--c-text) 40%, var(--c-pink) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.prose h3 {
  font-size: 1.15rem;
  font-weight: 600;
  margin: 1.6em 0 0.6em;
  color: var(--c-pink);
}
.prose h3 span { color: var(--c-pink); }
.prose p { margin-bottom: 1.2em; color: var(--c-text); }
.prose ul, .prose ol { padding-left: 1.4em; margin-bottom: 1.2em; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li { margin-bottom: 0.5em; }
.prose a { color: var(--c-pink); border-bottom: 1px solid rgba(255,20,147,0.3); }
.prose a:hover { color: var(--c-red); border-bottom-color: var(--c-red); }
.prose strong { color: var(--c-text); font-weight: 600; }
.prose table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5em 0;
  font-size: 0.9rem;
  overflow-x: auto;
  display: block;
}
.prose th {
  background: rgba(255,20,147,0.15);
  color: var(--c-pink);
  padding: 10px 14px;
  text-align: left;
  border-bottom: 2px solid var(--c-border);
  font-family: var(--font-code);
  font-size: 0.85rem;
}
.prose td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--c-border);
  color: var(--c-text-muted);
}
.prose tr:hover td { background: rgba(255,20,147,0.06); }
.prose blockquote {
  border-left: 3px solid var(--c-pink);
  padding: 12px 20px;
  background: rgba(255,20,147,0.07);
  border-radius: 0 12px 12px 0;
  margin: 1.5em 0;
  color: var(--c-text-muted);
}
.prose code {
  font-family: var(--font-code);
  background: rgba(255,0,0,0.12);
  color: var(--c-red);
  padding: 2px 6px;
  border-radius: 6px;
  font-size: 0.88em;
}
.prose pre {
  background: rgba(0,0,0,0.4);
  border: 1px solid var(--c-border);
  border-radius: 12px;
  padding: 20px;
  overflow-x: auto;
  margin: 1.5em 0;
}
.prose pre code { background: none; color: var(--c-text); padding: 0; border-radius: 0; }

/* ===== Meta 日期栏 ===== */
.meta-bar {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin: 12px 0 20px;
}
.meta-bar time {
  font-size: 0.83rem;
  color: var(--c-text-muted);
  font-family: var(--font-code);
}

/* ===== Eyebrow 标签 ===== */
.eyebrow {
  display: inline-block;
  font-family: var(--font-code);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--c-pink);
  background: rgba(255,20,147,0.1);
  border: 1px solid rgba(255,20,147,0.25);
  border-radius: var(--radius-btn);
  padding: 5px 14px;
  margin-bottom: 16px;
}

/* ===== 评测 Layout ===== */
.review-hero {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-bottom: 36px;
}
.review-hero.has-media {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: center;
}
.review-hero-media { border-radius: var(--radius-card); overflow: hidden; }
.review-hero-img { width: 100%; height: 100%; object-fit: cover; max-height: 360px; }
.review-hero-text h1, .ranking-header h1, .compare-hero-text h1,
.faq-header h1, .about-header h1, .privacy-header h1 {
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 12px;
}
.review-lead, .ranking-lead, .compare-lead, .faq-lead, .about-lead {
  font-size: 1rem;
  color: var(--c-text-muted);
  line-height: 1.7;
}
.verdict-box, .method-box, .faq-contact-box, .about-cta-box, .privacy-back {
  margin-top: 48px;
  padding: 28px 32px;
  background: var(--c-surface2);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-card);
}
.verdict-box h2, .method-box h2, .faq-contact-box h2, .about-cta-box h2 {
  font-size: 1.2rem;
  margin-bottom: 12px;
}
.verdict-box h2 span, .method-box h2 span,
.faq-contact-box h2 span, .about-cta-box h2 span {
  background: linear-gradient(135deg, var(--c-text) 40%, var(--c-pink) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.verdict-box p, .method-box p, .faq-contact-box p,
.about-cta-box p, .privacy-back p {
  color: var(--c-text-muted);
  line-height: 1.7;
}
.about-btn-row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 20px; }
.about-logo-wrap { margin-bottom: 20px; }
.about-logo { max-width: 120px; height: auto; }

/* ===== 排行榜 Layout ===== */
.ranking-header { margin-bottom: 36px; }
.rank-list { display: flex; flex-direction: column; gap: 16px; margin-top: 20px; }
.rank-item {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-card);
  padding: 20px 24px;
  transition: transform var(--transition), box-shadow var(--transition);
}
.rank-item:hover {
  transform: translateX(4px);
  box-shadow: 0 8px 32px var(--c-glow-red);
}
.rank-num {
  font-family: var(--font-code);
  font-size: 2rem;
  font-weight: 700;
  color: rgba(255,20,147,0.3);
  min-width: 54px;
  line-height: 1;
  flex-shrink: 0;
}
.rank-item:nth-child(1) .rank-num { color: var(--c-red); }
.rank-item:nth-child(2) .rank-num { color: var(--c-pink); }
.rank-item:nth-child(3) .rank-num { color: #ff6b6b; }
.rank-media { flex-shrink: 0; border-radius: 16px; overflow: hidden; }
.rank-img { width: 100px; height: 70px; object-fit: cover; }
.rank-info { flex: 1; }
.rank-info h3 {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 6px;
  line-height: 1.4;
}
.rank-info h3 span { color: var(--c-text); }
.rank-info p { font-size: 0.88rem; color: var(--c-text-muted); margin-bottom: 8px; }
.rank-info a { color: var(--c-text); }
.rank-info a:hover { color: var(--c-pink); }
.rank-info small { font-size: 0.78rem; color: var(--c-text-muted); font-family: var(--font-code); }
.ranking-intro-prose { max-width: 100%; margin-bottom: 40px; }

/* ===== 对比 Layout ===== */
.compare-hero { margin-bottom: 36px; }
.compare-hero.has-media {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: center;
}
.compare-hero-media { border-radius: var(--radius-card); overflow: hidden; }
.compare-hero-img { width: 100%; object-fit: cover; max-height: 320px; }

/* ===== FAQ Layout ===== */
.faq-header { margin-bottom: 36px; }
.faq-prose .prose { max-width: 100%; }

/* ===== Footer ===== */
.site-footer {
  background: var(--c-dark2);
  border-top: 1px solid var(--c-border);
  margin-top: 80px;
}
.site-footer > article {
  max-width: var(--max-w);
  margin: 0 auto;
}
.site-footer {
  display: block;
}
.footer-brand, .footer-links {
  padding: 48px 24px 24px;
  max-width: var(--max-w);
  margin: 0 auto;
}
.site-footer article + article { border-top: none; }
.site-footer > article:first-of-type + article { border-top: 1px solid var(--c-border); }
.footer-brand { max-width: 100%; }
.site-footer > .footer-brand,
.site-footer > .footer-links {
  display: block;
}
.site-footer {
  display: grid;
  grid-template-rows: auto auto auto;
}
footer.site-footer {
  display: block;
}
footer.site-footer > article.footer-brand,
footer.site-footer > article.footer-links {
  max-width: var(--max-w);
  margin-left: auto;
  margin-right: auto;
  padding: 40px 24px 20px;
}
footer.site-footer > article.footer-brand {
  padding-top: 48px;
}
footer.site-footer > article.footer-brand .brand {
  display: inline-block;
  font-family: var(--font-code);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--c-text);
  margin-bottom: 12px;
}
footer.site-footer > article.footer-brand p {
  color: var(--c-text-muted);
  font-size: 0.9rem;
  max-width: 400px;
  line-height: 1.6;
  margin-bottom: 20px;
}
.footer-form { margin-top: 20px; }
.form-label { font-size: 0.85rem; color: var(--c-text-muted); margin-bottom: 10px; font-family: var(--font-code); }
.subscribe-form { display: flex; gap: 10px; flex-wrap: wrap; }
.subscribe-form input {
  flex: 1;
  min-width: 180px;
  height: 44px;
  padding: 0 16px;
  border-radius: var(--radius-btn);
  border: 1px solid var(--c-border);
  background: rgba(255,255,255,0.06);
  color: var(--c-text);
  font-size: 0.9rem;
  outline: none;
  transition: border-color var(--transition);
}
.subscribe-form input:focus { border-color: var(--c-pink); }
.subscribe-form input::placeholder { color: var(--c-text-muted); }
.subscribe-form button {
  height: 44px;
  padding: 0 22px;
  border-radius: var(--radius-btn);
  border: none;
  cursor: pointer;
  background: linear-gradient(135deg, var(--c-red), var(--c-pink));
  color: #fff;
  font-size: 0.9rem;
  font-weight: 600;
  transition: opacity var(--transition);
}
.subscribe-form button:hover { opacity: 0.85; }
footer.site-footer > article.footer-links nav ol {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
footer.site-footer > article.footer-links nav ol li a {
  color: var(--c-text-muted);
  font-size: 0.9rem;
  transition: color var(--transition);
  min-height: 36px;
  display: flex;
  align-items: center;
}
footer.site-footer > article.footer-links nav ol li a:hover { color: var(--c-pink); }
.footer-bar {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 20px 24px;
  border-top: 1px solid var(--c-border);
}
.footer-bar p { font-size: 0.82rem; color: var(--c-text-muted); font-family: var(--font-code); }

/* 页脚两栏 grid */
@media (min-width: 768px) {
  footer.site-footer {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
  }
  footer.site-footer > article.footer-brand { grid-column: 1; }
  footer.site-footer > article.footer-links { grid-column: 2; }
  .footer-bar { grid-column: 1 / -1; }
}

/* ===== 页脚导航两栏补充 ===== */
@media (min-width: 768px) {
  footer.site-footer > article.footer-links nav ol {
    columns: 2;
    gap: 8px 24px;
  }
}

/* ===== Scroll Reveal ===== */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ===== 标题装饰 ===== */
h2 > span, h3 > span {
  background: linear-gradient(135deg, var(--c-text) 40%, var(--c-pink) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.aside-inner h3 > span { background: none; -webkit-text-fill-color: var(--c-pink); color: var(--c-pink); }

/* ===== page-content-section ===== */
.page-content-section { margin-bottom: 48px; }
.page-content-body .prose { max-width: 100%; }

/* ===== 移动端 ===== */
@media (max-width: 900px) {
  .layout-with-aside {
    grid-template-columns: 1fr;
  }
  .content-aside { order: 2; }
  .sticky-aside { position: static; }
  .global-aside { display: none; }
}

@media (max-width: 768px) {
  :root { --nav-h: 60px; }
  .hero {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .hero-media {
    height: 55vw;
    min-height: 240px;
    max-height: 360px;
  }
  .hero-slice { background: linear-gradient(180deg, transparent 60%, var(--c-dark3) 100%); }
  .hero-text {
    align-items: flex-start;
    text-align: left;
    padding: 32px 24px 48px;
  }
  .hero-cta { justify-content: flex-start; }
  .review-hero.has-media { grid-template-columns: 1fr; }
  .compare-hero.has-media { grid-template-columns: 1fr; }
  .header-inner { gap: 12px; }
  .site-header nav ol li a { padding: 0 10px; font-size: 0.82rem; }
  .wrap { padding: 24px 16px; }
  .rank-item { flex-wrap: wrap; gap: 12px; }
  .rank-media { display: none; }
  .verdict-box, .method-box, .faq-contact-box, .about-cta-box { padding: 20px; }
}

@media (max-width: 480px) {
  .hero-title { font-size: 1.8rem; }
  .card-grid { grid-template-columns: 1fr; }
  .hero-cta { flex-direction: column; }
  .btn-primary, .btn-secondary { width: 100%; justify-content: center; }
  .subscribe-form { flex-direction: column; }
  .subscribe-form input, .subscribe-form button { width: 100%; }
  .site-header nav { display: none; }
  .header-inner { justify-content: space-between; }
}

/* ===== 通用小工具 ===== */
.card-title span { background: none; -webkit-text-fill-color: inherit; }
.rank-info h3 span { background: none; -webkit-text-fill-color: inherit; }