/* ==========================================================================
   Shadowrocket Official Portal - New Delhi Gazette Style 2026
   Style Sheet: 最终版151 / 阳极氧化铝 / 补色对撞 玫红 / 水蓝 (面积 8:1)
   布局：2:3 杂志页，对角线斜切，左上标题右下元数据，居中轴对称，不对称左宽右窄
   设计：棋盘格只出现在页脚；材质按 阳极氧化铝；装饰只出现在 右上；禁止渐变与投影；圆角 13 / 5 / 9 / 7
   骨架：引号包裹主标题 / 无引号副信息；关键词植入「小火箭免费节点2026」；断行策略：问号收束；信息点数量 3
   ========================================================================== */

:root {
  /* 材质与背景：阳极氧化铝 (Anodized Aluminum) 哑光金属冷基质 */
  --al-bg-root:            #17191D;
  --al-surface-dark:       #1E2228;
  --al-surface-elevated:   #252A32;
  --al-border-metal:       #3A414D;
  --al-border-subtle:      #2A303A;

  /* 补色对撞色彩：玫红 / 水蓝 (面积严格按 8:1 分配，色相约 298°) */
  --color-rose:            #C35573; /* 面积 8 份：主交互、主按钮、标签、核心高亮 */
  --color-rose-subtle:     #341B24; /* 阳极氧化铝与玫红底调 */
  --color-rose-text:       #FFA3BD;
  --color-water-blue:      #2D16B9; /* 面积 1 份：点睛对撞色、专业版强调、关键指示器 */
  --color-water-blue-neon: #5E46FF;

  /* 文字体系 */
  --text-primary:          #ECEFF4;
  --text-secondary:        #A5B0BF;
  --text-muted:            #6F7A8A;
  --text-light:            #FFFFFF;

  /* 物理排版参数规范 */
  --section-gap:           13pt; /* 模块间隙 13pt (约 17.33px) */
  --safe-margin:           5.4%; /* 安全边 5.4% */
  --radius-gazette:        13px 5px 9px 7px; /* 严格规定四值圆角 13 / 5 / 9 / 7 */
  --container-max:         1180px;
}

/* 强制重置与“禁止渐变与投影”铁律 */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  box-shadow: none !important;
  text-shadow: none !important;
}

html {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  background-color: var(--al-bg-root);
  color: var(--text-primary);
  line-height: 1.6;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
}

body {
  background-color: var(--al-bg-root);
  color: var(--text-primary);
  overflow-x: hidden;
  position: relative;
}

/* 2:3 杂志页比例外框视觉基底 */
.gazette-page-wrapper {
  width: 100%;
  min-height: 100vh;
  padding-left: var(--safe-margin);
  padding-right: var(--safe-margin);
  margin-left: auto;
  margin-right: auto;
  position: relative;
}

/* 居中轴对称容器 */
.gazette-container {
  width: 100%;
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
}

/* 对角线斜切切角元素通用工具类 (纯平无投影) */
.diagonal-cut {
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
}

/* 阳极氧化铝材质卡片基类 (圆角 13/5/9/7, 装饰只出现在右上) */
.al-card {
  position: relative;
  background-color: var(--al-surface-dark);
  border: 1px solid var(--al-border-metal);
  border-radius: var(--radius-gazette);
  padding: 30px;
  overflow: hidden;
}

/* 装饰只出现在 右上：新德里公文专属徽记 / 批文编号 */
.al-card::after,
.gazette-top-right-decor::after {
  content: "DEL-GAZ-2026";
  position: absolute;
  top: 0;
  right: 0;
  background-color: var(--color-rose);
  color: #FFFFFF;
  font-size: 9px;
  font-family: "Courier New", monospace;
  font-weight: 700;
  letter-spacing: 1px;
  padding: 3px 8px;
  border-radius: 0 5px 0 6px;
  line-height: 1.2;
  pointer-events: none;
}

/* 左上标题右下元数据布局 */
.al-card-header-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: 16px;
}

.al-card-metadata-bottom-right {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-top: 18px;
  padding-top: 12px;
  border-top: 1px solid var(--al-border-subtle);
  font-size: 11px;
  color: var(--text-muted);
  font-family: "Courier New", monospace;
}

/* ==========================================================================
   1. 导航 (Navigation)
   左 Logo，中 5 个锚点，右「立即下载」
   <768px 收进汉堡菜单，留 Logo、下载按钮和菜单图标
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background-color: var(--al-surface-dark);
  border-bottom: 2px solid var(--al-border-metal);
}

.nav-wrapper {
  max-width: var(--container-max);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 68px;
  padding: 0 16px;
}

.nav-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}

.nav-brand-seal {
  width: 38px;
  height: 38px;
  background-color: var(--color-rose);
  border: 1px solid var(--text-primary);
  border-radius: var(--radius-gazette);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  color: #FFFFFF;
  font-size: 18px;
}

.nav-brand-text {
  display: flex;
  flex-direction: column;
}

.nav-brand-title {
  font-size: 16px;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1.2;
  letter-spacing: 0.5px;
}

.nav-brand-subtitle {
  font-size: 10px;
  color: var(--color-rose-text);
  font-family: "Courier New", monospace;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* 导航居中 5 个锚点 */
.nav-links {
  display: flex;
  align-items: center;
  gap: 28px;
  list-style: none;
}

.nav-link-item a {
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  padding: 6px 4px;
  border-bottom: 2px solid transparent;
  transition: color 0.15s, border-color 0.15s;
}

.nav-link-item a:hover {
  color: var(--text-primary);
  border-bottom-color: var(--color-rose);
}

/* 右侧立即下载 CTA (玫红主色 8 份) */
.nav-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.btn-gazette-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background-color: var(--color-rose);
  color: #FFFFFF;
  font-size: 14px;
  font-weight: 700;
  padding: 10px 22px;
  text-decoration: none;
  border-radius: var(--radius-gazette);
  border: 1px solid #E06F8D;
  cursor: pointer;
  white-space: nowrap;
}

.btn-gazette-primary:hover {
  background-color: #B24664;
}

.btn-gazette-waterblue {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background-color: var(--color-water-blue); /* 水蓝点睛 1 份 */
  color: #FFFFFF;
  font-size: 14px;
  font-weight: 700;
  padding: 10px 22px;
  text-decoration: none;
  border-radius: var(--radius-gazette);
  border: 1px solid var(--color-water-blue-neon);
  cursor: pointer;
  white-space: nowrap;
}

.btn-gazette-waterblue:hover {
  background-color: #210F8E;
}

.btn-gazette-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background-color: var(--al-surface-elevated);
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 600;
  padding: 10px 20px;
  text-decoration: none;
  border-radius: var(--radius-gazette);
  border: 1px solid var(--al-border-metal);
  cursor: pointer;
}

.btn-gazette-secondary:hover {
  background-color: #2E343E;
  color: #FFFFFF;
}

/* 汉堡按钮 */
.menu-toggle {
  display: none;
  background: transparent;
  border: 1px solid var(--al-border-metal);
  border-radius: var(--radius-gazette);
  padding: 8px 10px;
  cursor: pointer;
  color: var(--text-primary);
}

.menu-toggle svg {
  width: 22px;
  height: 22px;
  display: block;
  fill: currentColor;
}

/* 移动端汉堡下拉抽屉 */
.mobile-drawer {
  display: none;
  flex-direction: column;
  background-color: var(--al-surface-dark);
  border-bottom: 2px solid var(--al-border-metal);
  padding: 16px 20px;
}

.mobile-drawer.active {
  display: flex;
}

.mobile-drawer a {
  color: var(--text-primary);
  text-decoration: none;
  padding: 12px 0;
  border-bottom: 1px solid var(--al-border-subtle);
  font-size: 15px;
  font-weight: 600;
}

/* ==========================================================================
   2. Hero 首屏
   >1024px: 居中轴对称，不对称左宽右窄 (左文案 62% / 右模拟窗 38%)
   主标题占幅 56% (在视口中拥有 56% 宽幅权重)
   文案顺序：版本胶囊 → 大标题 (引号包裹) → 说明 → 日期 → 4 条勾选卖点 → 双 CTA → 五个平台 emoji
   右边窗口：绿灯、延迟、带宽条装产品感，嵌入 1.webp (下载页嵌入 2.webp)，eager 1200x628
   <1024px: 单列，模拟窗掉到文字下方
   ========================================================================== */
.hero-section {
  margin-top: calc(var(--section-gap) * 1.5);
  margin-bottom: var(--section-gap);
}

.hero-gazette-layout {
  display: grid;
  grid-template-columns: 1.55fr 1fr; /* 不对称左宽右窄：左 60.8% / 右 39.2% */
  gap: 28px;
  align-items: stretch;
}

.hero-content-column {
  background-color: var(--al-surface-dark);
  border: 1px solid var(--al-border-metal);
  border-radius: var(--radius-gazette);
  padding: 34px 38px;
  position: relative;
  overflow: hidden;
}

/* 装饰只出现在右上 */
.hero-content-column::after {
  content: "GAZETTE NO. 2026-X";
  position: absolute;
  top: 0;
  right: 0;
  background-color: var(--color-rose);
  color: #FFFFFF;
  font-size: 10px;
  font-family: "Courier New", monospace;
  font-weight: 700;
  letter-spacing: 1px;
  padding: 4px 12px;
  border-radius: 0 5px 0 8px;
}

/* 1) 版本胶囊 */
.hero-version-capsule {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background-color: var(--color-rose-subtle);
  border: 1px solid var(--color-rose);
  border-radius: var(--radius-gazette);
  padding: 5px 14px;
  margin-bottom: 18px;
}

.capsule-badge {
  background-color: var(--color-rose);
  color: #FFFFFF;
  font-size: 11px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 3px;
  text-transform: uppercase;
}

.capsule-text {
  font-size: 12px;
  color: var(--color-rose-text);
  font-weight: 600;
  font-family: "Courier New", monospace;
}

/* 2) 大标题 (引号包裹主标题 / 主标题占幅 56%) */
.hero-gazette-h1 {
  font-size: clamp(24px, 3.2vw, 36px);
  font-weight: 900;
  line-height: 1.25;
  color: var(--text-light);
  margin-bottom: 16px;
  letter-spacing: -0.5px;
  max-width: 92%; /* 内部宽度饱和，占幅在网格中为 56% 全局视口等比映射 */
}

.hero-quote-mark {
  color: var(--color-rose);
  font-weight: 900;
  margin: 0 2px;
}

/* 3) 一段说明 (断行策略：问号收束) */
.hero-gazette-desc {
  font-size: 15px;
  color: var(--text-secondary);
  line-height: 1.75;
  margin-bottom: 14px;
}

/* 4) 更新日期 (新德里公文归档时间) */
.hero-gazette-date {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text-muted);
  font-family: "Courier New", monospace;
  margin-bottom: 22px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--al-border-subtle);
  width: 100%;
}

.gazette-stamp-icon {
  color: var(--color-rose);
  font-weight: 700;
}

/* 5) 4 条勾选卖点 (信息点结构严谨) */
.hero-checklist-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 18px;
  margin-bottom: 26px;
}

.hero-check-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13.5px;
  color: var(--text-primary);
  line-height: 1.4;
}

.hero-check-box {
  width: 18px;
  height: 18px;
  background-color: var(--color-rose);
  border-radius: 3px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  font-size: 11px;
  font-weight: 900;
  flex-shrink: 0;
  margin-top: 2px;
}

/* 6) 双 CTA 按钮组 (玫红 8 份 / 水蓝 1 份对撞) */
.hero-cta-group {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 22px;
  flex-wrap: wrap;
}

/* 7) 五个平台 emoji */
.hero-platform-emojis {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--al-border-subtle);
}

.platform-badge-label {
  font-size: 12px;
  color: var(--text-muted);
  font-family: "Courier New", monospace;
  text-transform: uppercase;
}

.platform-emoji-list {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
}

/* 右边「已连接」模拟窗 (产品感：绿灯、延迟、带宽条，嵌入 1.webp，首屏 eager) */
.hero-simulation-column {
  background-color: var(--al-surface-dark);
  border: 1px solid var(--al-border-metal);
  border-radius: var(--radius-gazette);
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
}

/* 装饰只出现在右上 */
.hero-simulation-column::after {
  content: "METRIC-ACTIVE";
  position: absolute;
  top: 0;
  right: 0;
  background-color: var(--color-water-blue); /* 水蓝点睛 */
  color: #FFFFFF;
  font-size: 9px;
  font-family: "Courier New", monospace;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 0 5px 0 6px;
}

.sim-window-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--al-border-subtle);
}

.sim-status-indicator {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sim-green-light {
  width: 10px;
  height: 10px;
  background-color: #00FF88; /* 绿灯 */
  border-radius: 50%;
  display: inline-block;
}

.sim-status-title {
  font-size: 13px;
  font-weight: 800;
  color: #00FF88;
  letter-spacing: 0.5px;
}

.sim-protocol-tag {
  background-color: var(--al-surface-elevated);
  border: 1px solid var(--al-border-metal);
  color: var(--text-secondary);
  font-size: 11px;
  font-family: "Courier New", monospace;
  padding: 2px 8px;
  border-radius: 3px;
}

/* 延迟与带宽条产品感仪表 */
.sim-telemetry-dashboard {
  background-color: #121417;
  border: 1px solid var(--al-border-subtle);
  border-radius: var(--radius-gazette);
  padding: 14px 16px;
  margin-bottom: 16px;
}

.sim-metrics-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
  margin-bottom: 12px;
}

.metric-cell {
  display: flex;
  flex-direction: column;
}

.metric-cell-label {
  font-size: 10px;
  color: var(--text-muted);
  font-family: "Courier New", monospace;
}

.metric-cell-value {
  font-size: 14px;
  font-weight: 800;
  color: var(--text-primary);
  font-family: "Courier New", monospace;
}

.metric-cell-value.highlight-green {
  color: #00FF88;
}

.metric-cell-value.highlight-rose {
  color: var(--color-rose-text);
}

.sim-bandwidth-bar-container {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sim-bandwidth-label-row {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: var(--text-muted);
  font-family: "Courier New", monospace;
}

.sim-bandwidth-track {
  width: 100%;
  height: 8px;
  background-color: var(--al-surface-elevated);
  border: 1px solid var(--al-border-metal);
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}

.sim-bandwidth-fill {
  width: 86%;
  height: 100%;
  background-color: var(--color-rose); /* 玫红纯平填充，禁止渐变 */
}

/* 嵌入 1.webp 容器 (显式声明 1200x628，首屏 eager) */
.hero-product-img-box {
  width: 100%;
  border: 1px solid var(--al-border-metal);
  border-radius: var(--radius-gazette);
  overflow: hidden;
  background-color: #121417;
}

.hero-product-img-box img {
  width: 100%;
  height: auto;
  aspect-ratio: 1200 / 628;
  display: block;
  object-fit: cover;
}

/* ==========================================================================
   3. 通用模块套路 (功能 / 平台 / 场景 / 流程)
   居中小标题 + H2 (引号包裹) + 一句副文案 (问号收束)
   卡片深色底 (阳极氧化铝)、1px 边、圆角 13/5/9/7、28–32px 内边距、图标圆底
   信息点数量：严格为 3！
   流程用 CSS counter 做 01–03
   折叠屏嵌入 3.webp 和 4.webp (lazy)
   ========================================================================== */
.gazette-section {
  margin-top: var(--section-gap);
  margin-bottom: var(--section-gap);
}

.section-gazette-head {
  text-align: center;
  max-width: 780px;
  margin: 0 auto calc(var(--section-gap) * 1.2) auto;
}

.section-kicker {
  display: inline-block;
  font-size: 11px;
  font-weight: 800;
  font-family: "Courier New", monospace;
  color: var(--color-rose-text);
  background-color: var(--color-rose-subtle);
  border: 1px solid var(--color-rose);
  padding: 3px 12px;
  border-radius: var(--radius-gazette);
  margin-bottom: 8px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.section-h2 {
  font-size: clamp(20px, 2.5vw, 28px);
  font-weight: 900;
  color: var(--text-light);
  line-height: 1.35;
  margin-bottom: 10px;
}

.section-subtitle {
  font-size: 14.5px;
  color: var(--text-secondary);
  line-height: 1.6;
}

/* 信息点数量严格为 3 的栅格 */
.gazette-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.al-feature-card {
  position: relative;
  background-color: var(--al-surface-dark);
  border: 1px solid var(--al-border-metal);
  border-radius: var(--radius-gazette);
  padding: 30px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* 装饰只出现在右上 */
.al-feature-card::after {
  content: "DEL-SEC-3";
  position: absolute;
  top: 0;
  right: 0;
  background-color: var(--color-rose);
  color: #FFFFFF;
  font-size: 9px;
  font-family: "Courier New", monospace;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 0 5px 0 6px;
}

.card-icon-round {
  width: 48px;
  height: 48px;
  background-color: var(--al-surface-elevated);
  border: 1px solid var(--color-rose);
  border-radius: 50%; /* 图标圆底 */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  margin-bottom: 18px;
  color: var(--color-rose);
}

.card-title-h3 {
  font-size: 17px;
  font-weight: 800;
  color: var(--text-light);
  margin-bottom: 10px;
  line-height: 1.35;
}

.card-body-p {
  font-size: 13.5px;
  color: var(--text-secondary);
  line-height: 1.65;
  margin-bottom: 14px;
}

/* 3 点参数清单 (严格 3 个信息点) */
.card-spec-triad {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 10px;
  border-top: 1px solid var(--al-border-subtle);
}

.card-spec-triad li {
  font-size: 12px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: "Courier New", monospace;
}

.card-spec-triad li::before {
  content: "▸";
  color: var(--color-rose);
  font-weight: 700;
}

/* 流程用 CSS counter 做 01–03 (信息点数量严格为 3) */
.flow-counter-container {
  counter-reset: gazette-flow-step;
}

.flow-step-card {
  position: relative;
  background-color: var(--al-surface-dark);
  border: 1px solid var(--al-border-metal);
  border-radius: var(--radius-gazette);
  padding: 30px;
  counter-increment: gazette-flow-step;
}

.flow-step-card::after {
  content: "FLOW-03";
  position: absolute;
  top: 0;
  right: 0;
  background-color: var(--color-water-blue); /* 水蓝点睛 */
  color: #FFFFFF;
  font-size: 9px;
  font-family: "Courier New", monospace;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 0 5px 0 6px;
}

.flow-counter-badge {
  display: inline-block;
  font-size: 26px;
  font-weight: 900;
  font-family: "Courier New", monospace;
  color: var(--color-rose);
  margin-bottom: 14px;
}

.flow-counter-badge::before {
  content: "0" counter(gazette-flow-step);
}

/* 折叠屏嵌入插图 (3.webp 和 4.webp, 1200x628, lazy) */
.gazette-banner-media {
  margin-top: calc(var(--section-gap) * 1.1);
  border: 1px solid var(--al-border-metal);
  border-radius: var(--radius-gazette);
  overflow: hidden;
  background-color: #121417;
  position: relative;
}

.gazette-banner-media::after {
  content: "ARCHIVE-GRAPH";
  position: absolute;
  top: 0;
  right: 0;
  background-color: var(--color-rose);
  color: #FFFFFF;
  font-size: 9px;
  font-family: "Courier New", monospace;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 0 5px 0 6px;
}

.gazette-banner-media img {
  width: 100%;
  height: auto;
  aspect-ratio: 1200 / 628;
  display: block;
  object-fit: cover;
}

/* ==========================================================================
   4. 定价 (Pricing)
   三张卡：¥15 / ¥39 / ¥79
   专业版加 featured：水蓝色描边、纯平实框 (禁止渐变与投影)、「最受欢迎」胶囊
   全页对比最强的一块，转化意图最清楚
   ========================================================================== */
.pricing-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  align-items: stretch;
}

.pricing-card {
  position: relative;
  background-color: var(--al-surface-dark);
  border: 1px solid var(--al-border-metal);
  border-radius: var(--radius-gazette);
  padding: 32px 26px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* 装饰只出现在右上 */
.pricing-card::after {
  content: "TIER-VALID";
  position: absolute;
  top: 0;
  right: 0;
  background-color: var(--al-border-metal);
  color: #FFFFFF;
  font-size: 9px;
  font-family: "Courier New", monospace;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 0 5px 0 6px;
}

/* 专业版 Featured (水蓝色强对比描边，纯平无渐变无外发光) */
.pricing-card.featured-pro {
  border: 2px solid var(--color-water-blue-neon);
  background-color: #1F2533;
}

.pricing-card.featured-pro::after {
  content: "MOST POPULAR";
  background-color: var(--color-water-blue);
  color: #FFFFFF;
}

.popular-capsule {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--color-water-blue);
  color: #FFFFFF;
  font-size: 11px;
  font-weight: 800;
  padding: 3px 14px;
  border-radius: var(--radius-gazette);
  border: 1px solid var(--color-water-blue-neon);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.pricing-tier-name {
  font-size: 18px;
  font-weight: 800;
  color: var(--text-light);
  margin-bottom: 6px;
}

.pricing-amount-row {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--al-border-subtle);
}

.currency-sym {
  font-size: 20px;
  font-weight: 700;
  color: var(--color-rose-text);
}

.featured-pro .currency-sym {
  color: #9AA8FF;
}

.amount-val {
  font-size: 38px;
  font-weight: 900;
  color: var(--text-light);
  font-family: "Courier New", monospace;
  line-height: 1;
}

.amount-period {
  font-size: 13px;
  color: var(--text-muted);
}

/* 定价卡 3 点权益 (信息点数量 3) */
.pricing-perks-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 24px;
}

.pricing-perks-list li {
  font-size: 13.5px;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 10px;
}

.pricing-perks-list li svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  fill: var(--color-rose);
}

.featured-pro .pricing-perks-list li svg {
  fill: var(--color-water-blue-neon);
}

/* ==========================================================================
   5. 评价和博客
   评价 8 张、博客 8 张，都是同款卡片 (阳极氧化铝底、圆角 13/5/9/7、装饰在右上)
   评价：星级、引用、头像首字、日期；信息点维度为 3
   博客：分类标签、标题、摘要、阅读量；信息点维度为 3
   ========================================================================== */
.gazette-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

/* 评价卡片 */
.review-gazette-card {
  position: relative;
  background-color: var(--al-surface-dark);
  border: 1px solid var(--al-border-metal);
  border-radius: var(--radius-gazette);
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.review-gazette-card::after {
  content: "VERIFIED";
  position: absolute;
  top: 0;
  right: 0;
  background-color: var(--color-rose);
  color: #FFFFFF;
  font-size: 9px;
  font-family: "Courier New", monospace;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 0 5px 0 6px;
}

.review-rating-stars {
  color: #FFB800;
  font-size: 14px;
  margin-bottom: 12px;
  letter-spacing: 2px;
}

.review-quote-body {
  font-size: 13px;
  color: var(--text-primary);
  line-height: 1.6;
  margin-bottom: 16px;
  font-style: italic;
}

.review-author-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--al-border-subtle);
}

.review-avatar-char {
  width: 32px;
  height: 32px;
  background-color: var(--color-rose-subtle);
  border: 1px solid var(--color-rose);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-rose-text);
  font-weight: 800;
  font-size: 13px;
}

.review-author-meta {
  display: flex;
  flex-direction: column;
}

.review-author-name {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-light);
}

.review-date-stamp {
  font-size: 10.5px;
  color: var(--text-muted);
  font-family: "Courier New", monospace;
}

/* 博客卡片 */
.blog-gazette-card {
  position: relative;
  background-color: var(--al-surface-dark);
  border: 1px solid var(--al-border-metal);
  border-radius: var(--radius-gazette);
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.blog-gazette-card::after {
  content: "DEL-POST";
  position: absolute;
  top: 0;
  right: 0;
  background-color: var(--al-border-metal);
  color: #FFFFFF;
  font-size: 9px;
  font-family: "Courier New", monospace;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 0 5px 0 6px;
}

.blog-tag-pill {
  display: inline-block;
  align-self: flex-start;
  font-size: 10px;
  font-weight: 800;
  font-family: "Courier New", monospace;
  color: var(--color-rose-text);
  background-color: var(--color-rose-subtle);
  border: 1px solid var(--color-rose);
  padding: 2px 8px;
  border-radius: 3px;
  margin-bottom: 10px;
}

.blog-title-h3 {
  font-size: 14.5px;
  font-weight: 800;
  color: var(--text-light);
  line-height: 1.4;
  margin-bottom: 10px;
}

.blog-summary-p {
  font-size: 12.5px;
  color: var(--text-secondary);
  line-height: 1.55;
  margin-bottom: 14px;
}

.blog-meta-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 10px;
  border-top: 1px solid var(--al-border-subtle);
  font-size: 11px;
  color: var(--text-muted);
  font-family: "Courier New", monospace;
}

/* ==========================================================================
   6. FAQ 和底部 CTA
   FAQ 是单列手风琴，默认展开第一项
   底部 CTA 居中，纯平深色底 (禁止渐变)
   再接 4 栏页脚
   设计铁律：棋盘格只出现在页脚！
   ========================================================================== */
.faq-accordion-column {
  max-width: 860px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.faq-item-card {
  position: relative;
  background-color: var(--al-surface-dark);
  border: 1px solid var(--al-border-metal);
  border-radius: var(--radius-gazette);
  overflow: hidden;
}

.faq-item-card::after {
  content: "DEL-QA";
  position: absolute;
  top: 0;
  right: 0;
  background-color: var(--color-rose);
  color: #FFFFFF;
  font-size: 9px;
  font-family: "Courier New", monospace;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 0 5px 0 6px;
  pointer-events: none;
}

.faq-question-btn {
  width: 100%;
  background: transparent;
  border: none;
  color: var(--text-light);
  font-size: 15.5px;
  font-weight: 700;
  text-align: left;
  padding: 18px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
}

.faq-toggle-icon {
  width: 22px;
  height: 22px;
  background-color: var(--al-surface-elevated);
  border: 1px solid var(--color-rose);
  color: var(--color-rose-text);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 900;
  transition: transform 0.2s ease;
  flex-shrink: 0;
  margin-left: 12px;
}

.faq-answer-panel {
  display: none;
  padding: 0 24px 20px 24px;
  font-size: 13.5px;
  color: var(--text-secondary);
  line-height: 1.7;
  border-top: 1px solid var(--al-border-subtle);
  margin-top: 4px;
  padding-top: 14px;
}

.faq-item-card.is-open .faq-answer-panel {
  display: block;
}

.faq-item-card.is-open .faq-toggle-icon {
  transform: rotate(45deg);
  background-color: var(--color-rose);
  color: #FFFFFF;
}

/* 底部居中 CTA (纯平深色底，高对比玫红/水蓝，严禁渐变与投影) */
.bottom-cta-box {
  background-color: #21262F; /* 纯平阳极氧化铝深色基质 */
  border: 2px solid var(--color-rose);
  border-radius: var(--radius-gazette);
  padding: 44px 30px;
  text-align: center;
  margin-top: calc(var(--section-gap) * 1.5);
  margin-bottom: var(--section-gap);
  position: relative;
  overflow: hidden;
}

.bottom-cta-box::after {
  content: "DEL-DISPATCH-2026";
  position: absolute;
  top: 0;
  right: 0;
  background-color: var(--color-rose);
  color: #FFFFFF;
  font-size: 10px;
  font-family: "Courier New", monospace;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 0 5px 0 8px;
}

.bottom-cta-h2 {
  font-size: clamp(22px, 2.8vw, 32px);
  font-weight: 900;
  color: var(--text-light);
  margin-bottom: 12px;
}

.bottom-cta-p {
  font-size: 15px;
  color: var(--text-secondary);
  max-width: 680px;
  margin: 0 auto 24px auto;
  line-height: 1.6;
}

/* 4 栏页脚 (Footer) */
.site-footer {
  background-color: #121417;
  border-top: 2px solid var(--al-border-metal);
  margin-top: var(--section-gap);
  padding-top: 40px;
  position: relative;
}

/* 棋盘格设计规范：棋盘格只出现在页脚！ */
.footer-checkerboard {
  width: 100%;
  height: 14px;
  background-color: #1A1D22;
  /* 纯色几何交替方格拼贴 (无渐变) */
  background-image: 
    linear-gradient(45deg, #2D333C 25%, transparent 25%), 
    linear-gradient(-45deg, #2D333C 25%, transparent 25%), 
    linear-gradient(45deg, transparent 75%, #2D333C 75%), 
    linear-gradient(-45deg, transparent 75%, #2D333C 75%);
  background-size: 14px 14px;
  background-position: 0 0, 0 7px, 7px -7px, -7px 0px;
  border-bottom: 1px solid var(--al-border-metal);
  margin-bottom: 30px;
}

.footer-gazette-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 30px;
  margin-bottom: 36px;
}

.footer-col-about {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer-gazette-title {
  font-size: 16px;
  font-weight: 800;
  color: var(--text-light);
}

.footer-gazette-desc {
  font-size: 12.5px;
  color: var(--text-muted);
  line-height: 1.6;
}

.footer-col h4 {
  font-size: 13.5px;
  font-weight: 800;
  color: var(--color-rose-text);
  margin-bottom: 14px;
  font-family: "Courier New", monospace;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.footer-col ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.footer-col ul li a {
  font-size: 12.5px;
  color: var(--text-secondary);
  text-decoration: none;
  transition: color 0.15s;
}

.footer-col ul li a:hover {
  color: var(--text-light);
}

.footer-bottom-bar {
  border-top: 1px solid var(--al-border-subtle);
  padding: 18px 0 28px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 11px;
  color: var(--text-muted);
  font-family: "Courier New", monospace;
}

/* ==========================================================================
   响应式断点控制
   >1024px: 左右分栏 (左宽右窄)
   <1024px: 单列，模拟窗下沉到文字下方
   <768px: 汉堡菜单生效，卡片单列化
   ========================================================================== */
@media (max-width: 1024px) {
  .hero-gazette-layout {
    grid-template-columns: 1fr; /* 单列化 */
  }

  .gazette-grid-3 {
    grid-template-columns: 1fr;
  }

  .pricing-grid-3 {
    grid-template-columns: 1fr;
  }

  .gazette-grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }

  .footer-gazette-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .nav-links {
    display: none; /* 收进汉堡 */
  }

  .menu-toggle {
    display: block;
  }

  .hero-checklist-grid {
    grid-template-columns: 1fr;
  }

  .gazette-grid-4 {
    grid-template-columns: 1fr;
  }

  .footer-gazette-grid {
    grid-template-columns: 1fr;
  }

  .hero-content-column {
    padding: 24px 20px;
  }
}