/* ============================================================
 * 落地页宣传平台 · 业务样式（依赖 ocean.css 的 tokens）
 * ========================================================== */

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  height: var(--header-h);
  display: flex; align-items: center;
  background-color: rgba(246,251,252,.82);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid rgba(191,230,238,.7);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 6px 24px -14px rgba(15,74,88,.18);
}
.site-header .container-responsive { display: flex; align-items: center; gap: 20px; }

.brand { display: flex; align-items: center; gap: 11px; flex-shrink: 0; }
.brand-mark {
  width: 38px; height: 38px; flex-shrink: 0;
  display: grid; place-items: center;
  border-radius: var(--r-md);
  background-image: linear-gradient(180deg, #3F9FB6 0%, #2F879D 60%, #286F82 100%);
  color: #fff; font-weight: 800; font-size: 17px; letter-spacing: -.5px;
  border: 1px solid rgba(15,74,88,.25);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 6px 14px -8px rgba(28,115,135,.55);
}
.brand-text { display: flex; flex-direction: column; line-height: 1.18; }
.brand-name { font-size: 15.5px; font-weight: 800; color: var(--sea-950); letter-spacing: -.2px; }
.brand-sub  { font-size: 11px; color: var(--sea-500); letter-spacing: .3px; }

.site-nav { display: none; align-items: center; gap: 2px; margin-left: 8px; }
@media (min-width: 1024px) { .site-nav { display: flex; } }
.site-nav a {
  padding: 8px 13px;
  border-radius: var(--r-sm);
  font-size: 14px; font-weight: 600; color: var(--sea-700);
  transition: background-color 180ms var(--ease-ocean), color 180ms var(--ease-ocean);
}
.site-nav a:hover { background-color: rgba(221,243,247,.7); color: var(--brand-700); }
.site-nav a.is-active { background-color: var(--brand-100); color: var(--brand-700); }
.products-menu { position: relative; }
.products-menu summary {
  list-style: none; cursor: pointer; padding: 8px 13px;
  border-radius: var(--r-sm); font-size: 14px; font-weight: 600;
  color: var(--sea-700); white-space: nowrap;
}
.products-menu summary::-webkit-details-marker { display: none; }
.products-menu summary:hover { background-color: rgba(221,243,247,.7); color: var(--brand-700); }
.products-panel {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 70;
  min-width: 230px; padding: 8px; border: 1px solid var(--pearl-400);
  border-radius: var(--r-md); background: rgba(255,255,255,.98);
  box-shadow: 0 16px 36px -18px rgba(15,74,88,.35);
}
.products-panel a { display: block; padding: 9px 11px; border-radius: var(--r-sm); white-space: nowrap; }
.products-panel a:hover { background: var(--brand-50); color: var(--brand-700); }

/* 价格标签和 CTA 按钮不参与压缩，空间不够时先让导航让位 */
.header-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.header-actions > * { flex-shrink: 0; }
.header-price-tag {
  display: none; align-items: center; gap: 6px;
  padding: 6px 12px;
  border-radius: var(--r-pill);
  background: var(--shell-gold-soft);
  border: 1px solid #E7D49A;
  color: var(--warning-700);
  font-size: 12.5px; font-weight: 700;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
}
@media (min-width: 768px) { .header-price-tag { display: inline-flex; } }

.nav-toggle { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--r-sm); color: var(--sea-700); }
.nav-toggle:hover { background: var(--pearl-200); }
@media (min-width: 1024px) { .nav-toggle { display: none; } }

.mobile-nav {
  display: none;
  padding: 10px 0 16px;
  border-bottom: 1px solid var(--pearl-400);
  background: rgba(255,255,255,.96);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  position: sticky; top: var(--header-h); z-index: 49;
}
.mobile-nav.is-open { display: block; }
.mobile-nav a {
  display: block; padding: 11px 14px;
  border-radius: var(--r-sm);
  font-size: 15px; font-weight: 600; color: var(--sea-800);
}
.mobile-nav a:hover, .mobile-nav a.is-active { background: var(--brand-50); color: var(--brand-700); }
.products-menu-mobile { margin: 2px 0 4px; }
.products-menu-mobile summary { padding: 11px 14px; font-size: 15px; font-weight: 600; color: var(--sea-800); }
.products-menu-mobile[open] summary { background: var(--brand-50); color: var(--brand-700); }
.products-menu-mobile .products-panel { position: static; min-width: 0; margin: 0 8px 6px; padding: 4px; box-shadow: none; background: var(--pearl-50); }
.products-menu-mobile .products-panel a { padding: 9px 11px; font-size: 14px; }

/* ---------- 通用 section ---------- */
.section { padding: 56px 0; }
.section-sm { padding: 36px 0; }
@media (min-width: 1024px) { .section { padding: 76px 0; } }

.section-head { max-width: 720px; margin-bottom: 30px; }
.section-head.is-center { margin-left: auto; margin-right: auto; text-align: center; }
.section-eyebrow {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--brand-600); margin-bottom: 10px;
}
.section-title { font-size: 26px; margin-bottom: 10px; }
@media (min-width: 768px) { .section-title { font-size: 32px; } }
.section-desc { font-size: 15px; color: var(--sea-600); line-height: 1.75; }

/* ---------- Hero ---------- */
.hero { padding: 44px 0 8px; }
@media (min-width: 1024px) { .hero { padding: 68px 0 16px; } }
.hero-inner { padding: 34px 22px; }
@media (min-width: 1024px) { .hero-inner { padding: 54px 48px; } }
.hero-grid { display: grid; gap: 34px; align-items: center; }
@media (min-width: 1024px) { .hero-grid { grid-template-columns: 1.15fr .85fr; gap: 48px; } }

.hero-badge {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 13px 5px 8px;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,.8);
  border: 1px solid var(--brand-200);
  color: var(--brand-700);
  font-size: 12.5px; font-weight: 700;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85), 0 2px 8px -4px rgba(15,74,88,.14);
  margin-bottom: 18px;
}
.hero-badge .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--success-500);
  box-shadow: 0 0 0 3px rgba(22,163,123,.18);
}
.hero-title { font-size: 30px; line-height: 1.22; letter-spacing: -.6px; margin-bottom: 16px; }
@media (min-width: 768px)  { .hero-title { font-size: 40px; } }
@media (min-width: 1024px) { .hero-title { font-size: 46px; } }
.hero-desc { font-size: 15.5px; color: var(--sea-700); line-height: 1.82; max-width: 620px; }
@media (min-width: 768px) { .hero-desc { font-size: 16.5px; } }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }

.hero-meta { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 26px; }
.hero-meta-item { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--sea-600); font-weight: 500; }
.hero-meta-item svg { color: var(--brand-500); flex-shrink: 0; }

/* Hero 右侧价格卡 */
.price-card { padding: 26px 24px; }
.price-card + .price-card { margin-top: 14px; }
.price-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.price-card-label { font-size: 13px; font-weight: 700; color: var(--sea-600); letter-spacing: .02em; }
.price-amount { display: flex; align-items: baseline; gap: 7px; }
.price-num { font-size: 44px; font-weight: 800; letter-spacing: -1.6px; color: var(--sea-950); font-variant-numeric: tabular-nums; line-height: 1; }
.price-cur { font-size: 17px; font-weight: 800; color: var(--brand-600); }
.price-per { font-size: 13.5px; color: var(--sea-500); font-weight: 500; }
.price-list { margin-top: 18px; display: flex; flex-direction: column; gap: 9px; }
.price-list li { display: flex; align-items: flex-start; gap: 9px; font-size: 13.5px; color: var(--sea-700); line-height: 1.6; }
.price-list svg { flex-shrink: 0; margin-top: 3px; color: var(--success-500); }

/* ---------- 统计条 ---------- */
.stats-strip { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 768px) { .stats-strip { grid-template-columns: repeat(4, 1fr); gap: 16px; } }
.stat-box { padding: 18px 16px; text-align: center; }
.stat-num { font-size: 27px; font-weight: 800; letter-spacing: -.8px; color: var(--sea-950); font-variant-numeric: tabular-nums; line-height: 1.15; }
.stat-num span { font-size: 16px; color: var(--brand-600); margin-left: 2px; }
.stat-label { margin-top: 5px; font-size: 12.5px; color: var(--sea-600); font-weight: 500; }

/* ---------- 分类筛选 ---------- */
/* 分类必须一眼看全。以前是横向滚动条，右边的分类被切掉，
   客户根本不知道还有 Telegram / 保健品这些类目 —— 现在一律换行铺开。 */
.cat-bar {
  display: flex; flex-wrap: wrap; gap: 9px;
  padding: 4px 0 12px;
}
.cat-chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 15px;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,.85);
  border: 1px solid var(--pearl-400);
  color: var(--sea-700);
  font-size: 13.5px; font-weight: 600;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85), 0 1px 2px rgba(15,74,88,.04);
  transition: all 180ms var(--ease-ocean);
}
.cat-chip:hover { border-color: var(--brand-300); transform: translateY(-1px); }
.cat-chip.is-active {
  background-image: linear-gradient(180deg, #3F9FB6 0%, #2F879D 60%, #286F82 100%);
  color: #fff;
  border-color: rgba(15,74,88,.25);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 8px 18px -10px rgba(28,115,135,.45);
}
.cat-chip .count {
  font-size: 11.5px; font-weight: 700;
  padding: 1px 7px; border-radius: var(--r-pill);
  background: var(--pearl-200); color: var(--sea-600);
}
.cat-chip.is-active .count { background: rgba(255,255,255,.24); color: #fff; }
@media (max-width: 767px) {
  .cat-bar { gap: 6px; padding-bottom: 10px; }
  .cat-chip { gap: 5px; padding: 6px 10px; font-size: 12px; }
  .cat-chip .count { font-size: 10.5px; padding: 0 5px; }
}

.toolbar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.search-box { position: relative; flex: 1 1 240px; max-width: 340px; }
.search-box svg { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--sea-500); pointer-events: none; }
.search-box input { padding-left: 40px; }

/* ---------- 产品卡片墙 ----------
   手机 2 列 → 平板 3 列 → 桌面 4 列。列数只跟视口宽度走，不写死像素宽度，
   所以窗口怎么缩放都是满的，不会出现右边一大片空白。 */
.card-grid { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 768px)  { .card-grid { gap: 18px; grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .card-grid { gap: 20px; grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1680px) { .card-grid { gap: 24px; } }

.lp-card { display: flex; flex-direction: column; height: 100%; }

/* 预览图当成一台 PC 显示器：顶部一条浏览器 chrome，下面是整页真实截图。
   截图按卡片宽度等比缩放，默认停在顶部；鼠标移上去会缓慢滚到底，
   这样在卡片上就能把整个首页看完，不用点进去。 */
.lp-card-thumb {
  /* 预览窗口高度跟着列数走：手机 2 列时卡片只有 160 多像素宽，
     再用桌面那个 372px 就成了一根细长条 */
  --thumb-h: 200px;
  --chrome-h: 22px;
  position: relative;
  display: block;
  height: var(--thumb-h);
  padding-top: var(--chrome-h);     /* 留给 chrome 条 */
  background: #0D2630;
  overflow: hidden;
  border-bottom: 1px solid var(--pearl-400);
}
@media (min-width: 768px)  { .lp-card-thumb { --thumb-h: 286px; } }
@media (min-width: 1024px) { .lp-card-thumb { --thumb-h: 330px; } }
@media (min-width: 1680px) { .lp-card-thumb { --thumb-h: 372px; } }
.lp-card-thumb::before {            /* chrome 条 */
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: var(--chrome-h);
  background: linear-gradient(180deg, #1C4652 0%, #12313B 100%);
  border-bottom: 1px solid rgba(0,0,0,.35);
  z-index: 4;
}
.lp-card-thumb::after {             /* chrome 上的三个圆点 */
  content: '';
  position: absolute; top: 8px; left: 10px;
  width: 6px; height: 6px; border-radius: 50%;
  background: #FF5F57;
  box-shadow: 10px 0 0 #FEBC2E, 20px 0 0 #28C840;
  z-index: 5;
}
.lp-card-thumb .shot {
  display: block; width: 100%; height: auto;
  transform: translateY(0);
  transition: transform 3.2s cubic-bezier(.32,.06,.36,1);
}
.ocean-trading-card:hover .lp-card-thumb .shot {
  /* 滚到图片底部：可视高度 = 窗口高 - chrome 条 */
  transform: translateY(calc(-100% + var(--thumb-h) - var(--chrome-h)));
}

/* The regional catalog covers are real 390px H5 screenshots. Give their first
   screen enough vertical room to show the image, headline and primary action. */
.lp-card-regional { container-type: inline-size; }
.lp-card-regional .lp-card-thumb { --thumb-h: 155cqw; }

/* 「悬停看完整页」提示：默认淡淡地挂在右下角，hover 时淡出别挡内容 */
.lp-card-hint {
  position: absolute; right: 10px; bottom: 10px; z-index: 6;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 9px;
  border-radius: var(--r-pill);
  background: rgba(13, 38, 48, .72);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border: 1px solid rgba(191, 230, 238, .28);
  color: #DDF3F7; font-size: 11px; font-weight: 600;
  pointer-events: none;
  transition: opacity 240ms var(--ease-ocean);
}
.ocean-trading-card:hover .lp-card-hint { opacity: 0; }
/* 没有截图时的占位（渐变 + 分类 emoji） */
.lp-card-thumb.is-empty {
  background-color: var(--pearl-200);
  background-image:
    radial-gradient(80% 70% at 20% 10%, rgba(191,230,238,.7) 0%, rgba(238,247,249,0) 60%),
    linear-gradient(140deg, #EEF7F9 0%, #DDF3F7 60%, #BFE6EE 100%);
  padding-top: 0;
}
.lp-card-thumb.is-empty::before,
.lp-card-thumb.is-empty::after { display: none; }
@media (prefers-reduced-motion: reduce) {
  .ocean-trading-card:hover .lp-card-thumb .shot { transform: translateY(0); }
}
.lp-card-thumb-fallback {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-size: 40px; opacity: .55;
}
/* 角标压在 chrome 条下方，别盖住那三个圆点 */
.lp-card-badges { position: absolute; top: 31px; left: 12px; display: flex; flex-wrap: wrap; gap: 6px; z-index: 6; }
.lp-card-thumb.is-empty .lp-card-badges { top: 11px; left: 14px; }
.lp-card-code {
  /* 放左下，右下留给「悬停看完整页」提示 */
  position: absolute; bottom: 10px; left: 12px; z-index: 6;
  padding: 3px 9px; border-radius: var(--r-sm);
  background: rgba(13,38,48,.72);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  color: #EAF6F9; font-size: 11px; font-weight: 700; letter-spacing: .06em;
  font-family: 'JetBrains Mono', Menlo, monospace;
}

.lp-card-body { padding: 16px 18px 0 18px; flex: 1; display: flex; flex-direction: column; }
.lp-card-cat { font-size: 11.5px; font-weight: 700; color: var(--brand-600); letter-spacing: .06em; text-transform: uppercase; margin-bottom: 7px; }
.lp-card-title { font-size: 16.5px; line-height: 1.4; margin-bottom: 7px; }
.lp-card-summary {
  font-size: 13.5px; color: var(--sea-600); line-height: 1.68;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.lp-card-specs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.lp-card-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.tag-mini {
  padding: 2px 8px; border-radius: var(--r-xs);
  background: var(--pearl-200); border: 1px solid var(--pearl-400);
  color: var(--sea-600); font-size: 11.5px; font-weight: 500;
}

.lp-card-foot { margin-top: auto; padding: 14px 18px 16px; }
.lp-card-foot .ocean-hairline { margin-bottom: 14px; }
.lp-card-price { display: flex; align-items: baseline; gap: 6px; margin-bottom: 12px; }
.lp-card-price .num { font-size: 25px; font-weight: 800; letter-spacing: -.9px; color: var(--sea-950); font-variant-numeric: tabular-nums; line-height: 1; }
.lp-card-price .cur { font-size: 13px; font-weight: 800; color: var(--brand-600); }
.lp-card-price .old { font-size: 13px; color: var(--sea-500); text-decoration: line-through; margin-left: 3px; }
.lp-card-price .note { font-size: 11.5px; color: var(--sea-500); margin-left: auto; }
/* 前台演示 / 后台演示 两个按钮并排，密码条紧跟在它们下面 */
.lp-card-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.lp-card-actions .btn-block { grid-column: span 2; }

.demo-creds {
  display: flex; align-items: center; gap: 8px;
  margin-top: 8px;
  padding: 8px 10px;
  border-radius: var(--r-sm);
  background: var(--brand-50);
  border: 1px dashed var(--brand-300);
  font-size: 12px; color: var(--sea-600); line-height: 1.5;
}
.demo-creds b {
  color: var(--coral-deep);
  font-family: 'JetBrains Mono', Menlo, monospace;
  font-weight: 700; font-size: 13px;
  letter-spacing: .04em;
}
.demo-creds i {
  display: block; margin-top: 1px;
  font-style: normal; font-size: 11px; color: var(--sea-500);
}
.demo-creds .copy {
  display: inline-flex; align-items: center; gap: 4px;
  margin-left: auto; flex-shrink: 0;
  padding: 4px 8px; border-radius: var(--r-xs);
  background: rgba(255, 255, 255, .85);
  border: 1px solid var(--brand-200);
  color: var(--brand-700); font-size: 11.5px; font-weight: 600;
  transition: all 160ms var(--ease-ocean);
}
.demo-creds .copy:hover { border-color: var(--brand-400); background: #fff; }

/* 手机上一行两张卡，宽度只剩 160 多像素。桌面那套字号和内边距会把
   标题挤成一列一个字、两个按钮并排也放不下，所以这里整体收一档。 */
@media (max-width: 767px) {
  .lp-card-body { padding: 12px 12px 0; }
  .lp-card-cat { font-size: 10.5px; margin-bottom: 5px; }
  .lp-card-title { font-size: 14px; line-height: 1.35; }
  .lp-card-summary { font-size: 12px; line-height: 1.6; -webkit-line-clamp: 3; }
  .lp-card-specs, .lp-card-tags { gap: 4px; margin-top: 8px; }
  .lp-card-specs .pill, .tag-mini { font-size: 10.5px; padding: 2px 6px; }
  .lp-card-foot { padding: 10px 12px 12px; }
  .lp-card-foot .ocean-hairline { margin-bottom: 10px; }
  .lp-card-price { gap: 4px; margin-bottom: 9px; }
  .lp-card-price .num { font-size: 20px; }
  .lp-card-price .cur { font-size: 11.5px; }
  .lp-card-price .note { flex-basis: 100%; margin-left: 0; font-size: 10.5px; }
  /* 两个演示按钮改上下排，横排在这个宽度会被压成两个字 */
  .lp-card-actions { grid-template-columns: 1fr; gap: 6px; }
  .lp-card-actions .btn-block { grid-column: span 1; }
  .lp-card-code { font-size: 10px; padding: 2px 6px; }
  .lp-card-hint { display: none; }
  .demo-creds { flex-wrap: wrap; gap: 6px; padding: 7px 8px; font-size: 11px; }
  .demo-creds b { font-size: 12px; }
  .demo-creds .copy { margin-left: 0; }
}

/* ---------- 空状态 ---------- */
.empty-state { padding: 56px 24px; text-align: center; }
.empty-state .icon { font-size: 44px; opacity: .4; margin-bottom: 12px; }
.empty-state h3 { font-size: 17px; margin-bottom: 7px; }
.empty-state p { font-size: 14px; color: var(--sea-600); }

/* ---------- 服务器套餐 ---------- */
.server-grid { display: grid; gap: 20px; }
@media (min-width: 900px) { .server-grid { grid-template-columns: 1.05fr .95fr; align-items: start; } }

.plan-card { padding: 30px 26px; }
.plan-badge { position: absolute; top: 18px; right: 20px; z-index: 3; }
.plan-name { font-size: 21px; margin-bottom: 6px; }
.plan-sub { font-size: 13.5px; color: var(--sea-600); line-height: 1.7; margin-bottom: 22px; }

.plan-price-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 20px; margin-bottom: 22px; }
.plan-price .num { font-size: 46px; font-weight: 800; letter-spacing: -1.8px; color: var(--sea-950); font-variant-numeric: tabular-nums; line-height: 1; }
.plan-price .cur { font-size: 17px; font-weight: 800; color: var(--brand-600); margin-left: 5px; }
.plan-price .label { font-size: 12.5px; color: var(--sea-500); margin-top: 5px; }
.plan-renew {
  padding: 9px 14px; border-radius: var(--r-md);
  background: var(--pearl-200); border: 1px solid var(--pearl-400);
}
.plan-renew .num { font-size: 21px; font-weight: 800; color: var(--sea-900); font-variant-numeric: tabular-nums; }
.plan-renew .label { font-size: 11.5px; color: var(--sea-500); }

.spec-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 22px; }
@media (min-width: 640px) { .spec-grid { grid-template-columns: repeat(4, 1fr); } }
.spec-box {
  padding: 13px 12px; text-align: center;
  border-radius: var(--r-md);
  background: rgba(255,255,255,.72);
  border: 1px solid var(--brand-200);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85);
}
.spec-box .v { font-size: 17px; font-weight: 800; color: var(--sea-950); letter-spacing: -.3px; }
.spec-box .k { font-size: 11.5px; color: var(--sea-500); margin-top: 3px; }

.feature-list { display: flex; flex-direction: column; gap: 11px; }
.feature-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: var(--sea-700); line-height: 1.68; }
.feature-list svg { flex-shrink: 0; margin-top: 3px; color: var(--success-500); }

.bonus-banner {
  display: flex; align-items: center; gap: 12px;
  margin-top: 22px; padding: 14px 16px;
  border-radius: var(--r-md);
  background-image: linear-gradient(135deg, #F5EBD0 0%, #FCEFCC 100%);
  border: 1px solid #E7D49A;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
}
.bonus-banner .emoji { font-size: 24px; flex-shrink: 0; }
.bonus-banner strong { color: var(--warning-700); font-size: 14.5px; display: block; }
.bonus-banner span { font-size: 12.5px; color: #8A6A22; }

/* ---------- 内容块 / 关于 ---------- */
/* 正文一行别超过 ~40 个汉字，超了眼睛回行会找错 */
.prose { font-size: 15px; line-height: 1.85; color: var(--sea-700); max-width: 78ch; }
.prose p + p { margin-top: 14px; }
.prose strong { color: var(--sea-900); font-weight: 700; }

.info-grid { display: grid; gap: 18px; }
@media (min-width: 768px)  { .info-grid-2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .info-grid-3 { grid-template-columns: repeat(3, 1fr); } .info-grid-4 { grid-template-columns: repeat(4, 1fr); } }

.info-card { padding: 24px 22px; }
.info-card-icon {
  width: 44px; height: 44px; margin-bottom: 15px;
  display: grid; place-items: center;
  border-radius: var(--r-md);
  background-image: linear-gradient(180deg, #DDF3F7 0%, #BFE6EE 100%);
  border: 1px solid var(--brand-300);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85);
  font-size: 21px;
}
.info-card h3 { font-size: 16.5px; margin-bottom: 8px; }
.info-card p { font-size: 13.5px; color: var(--sea-600); line-height: 1.72; }

.check-list { display: flex; flex-direction: column; gap: 10px; }
.check-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: var(--sea-700); line-height: 1.68; }
.check-list .mark { flex-shrink: 0; margin-top: 1px; font-weight: 800; }
.check-list.is-yes .mark { color: var(--success-500); }
.check-list.is-no .mark { color: var(--coral); }

/* ---------- FAQ ---------- */
.faq-list { display: flex; flex-direction: column; gap: 12px; max-width: 860px; margin: 0 auto; }
.faq-item { overflow: hidden; }
.faq-item summary {
  display: flex; align-items: center; gap: 12px;
  padding: 17px 20px;
  font-size: 15px; font-weight: 700; color: var(--sea-900);
  cursor: pointer; list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: ''; margin-left: auto; flex-shrink: 0;
  width: 9px; height: 9px;
  border-right: 2.2px solid var(--brand-500);
  border-bottom: 2.2px solid var(--brand-500);
  transform: rotate(45deg);
  transition: transform 220ms var(--ease-ocean);
}
.faq-item[open] summary::after { transform: rotate(-135deg); }
.faq-item .faq-answer { padding: 0 20px 18px; font-size: 14px; color: var(--sea-600); line-height: 1.82; }
.faq-item .faq-answer p + p { margin-top: 10px; }

/* ---------- 联系 CTA ---------- */
.cta-panel { padding: 38px 28px; text-align: center; }
@media (min-width: 768px) { .cta-panel { padding: 52px 40px; } }
.cta-panel h2 { font-size: 25px; margin-bottom: 12px; }
@media (min-width: 768px) { .cta-panel h2 { font-size: 31px; } }
.cta-panel p { font-size: 15px; color: var(--sea-600); max-width: 600px; margin: 0 auto 26px; line-height: 1.8; }
.cta-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
/* 手机上大按钮的文案可能比屏幕还宽（比如带上 @用户名 的那个），
   这里允许折行，避免整页出现横向滚动条 */
@media (max-width: 520px) {
  .cta-actions .btn-lg { white-space: normal; padding: 12px 18px; line-height: 1.45; }
}

.contact-chips { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 22px; }
.contact-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,.85);
  border: 1px solid var(--pearl-400);
  font-size: 13.5px; font-weight: 600; color: var(--sea-800);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85), 0 1px 2px rgba(15,74,88,.04);
  transition: all 180ms var(--ease-ocean);
}
.contact-chip:hover { border-color: var(--brand-300); transform: translateY(-1px); box-shadow: 0 6px 16px -8px rgba(15,74,88,.2); }
.contact-chip .k { color: var(--sea-500); font-weight: 500; }
/* 能直接点开对话的联系方式要让人看出来是可点的，别做成一串要手抄的号码 */
.contact-chip.is-link { cursor: pointer; border-color: var(--brand-300); background: var(--brand-50); }
.contact-chip.is-link:hover { border-color: var(--brand-400); background: #fff; }
.contact-chip.is-link b { color: var(--brand-700); }
a.pill-brand {
  background: var(--brand-50); color: var(--brand-700);
  border: 1px solid var(--brand-300);
  transition: all 160ms var(--ease-ocean);
}
a.pill-brand:hover { background: #fff; border-color: var(--brand-400); }
a.pill-brand svg { flex-shrink: 0; }
.demo-row a.v { color: var(--brand-700); text-decoration: underline; text-underline-offset: 2px; }
.demo-row a.v:hover { color: var(--brand-600); }

/* ---------- Footer ---------- */
.site-footer {
  margin-top: 40px;
  padding: 40px 0 30px;
  border-top: 1px solid var(--pearl-400);
  background: rgba(255,255,255,.6);
}
.footer-grid { display: grid; gap: 26px; margin-bottom: 26px; }
@media (min-width: 768px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
.footer-col h4 { font-size: 13px; font-weight: 700; color: var(--sea-900); margin-bottom: 12px; letter-spacing: .04em; }
.footer-col a, .footer-col p { display: block; font-size: 13.5px; color: var(--sea-600); line-height: 2; }
.footer-col a:hover { color: var(--brand-600); }
.footer-bottom { padding-top: 20px; border-top: 1px solid var(--pearl-400); }
.footer-note { font-size: 12.5px; color: var(--sea-500); line-height: 1.8; }
.footer-copy { margin-top: 10px; font-size: 12.5px; color: var(--sea-500); }

/* ---------- 详情页 ---------- */
.detail-layout { display: grid; gap: 26px; align-items: start; }
/* 详情页是长文，跟着 1520px 的容器一起铺开会一行七八十个字，读着很累，
   所以单独封顶并居中；卡片墙那种视觉内容才需要满宽。 */
.detail-layout { max-width: 1260px; margin-left: auto; margin-right: auto; }
@media (min-width: 1024px) { .detail-layout { grid-template-columns: 1fr 360px; gap: 32px; } }
@media (min-width: 1024px) { .detail-side { position: sticky; top: calc(var(--header-h) + 20px); } }

.breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--sea-500); margin-bottom: 18px; flex-wrap: wrap; }
.breadcrumb a:hover { color: var(--brand-600); }
.breadcrumb .sep { opacity: .5; }

.detail-hero { padding: 26px 24px; margin-bottom: 22px; }
.detail-title { font-size: 25px; line-height: 1.3; margin-bottom: 10px; }
@media (min-width: 768px) { .detail-title { font-size: 31px; } }
.detail-sub { font-size: 15px; color: var(--sea-600); line-height: 1.75; }

/* 详情页：整页截图放进一个 PC 浏览器窗口里，框内可滚动看完 */
.shot-frame {
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--pearl-400);
  background: #0D2630;
  box-shadow: var(--sh-l3);
}
.shot-frame-bar {
  display: flex; align-items: center; gap: 6px;
  height: 32px; padding: 0 12px;
  background: linear-gradient(180deg, #1C4652 0%, #12313B 100%);
  border-bottom: 1px solid rgba(0,0,0,.35);
}
.shot-frame-bar i { width: 8px; height: 8px; border-radius: 50%; background: #FF5F57; flex-shrink: 0; }
.shot-frame-bar i:nth-child(2) { background: #FEBC2E; }
.shot-frame-bar i:nth-child(3) { background: #28C840; }
.shot-frame-url {
  margin-left: 10px; padding: 2px 12px;
  border-radius: var(--r-pill);
  background: rgba(0,0,0,.28);
  color: #9FC4CE; font-size: 11.5px;
  font-family: 'JetBrains Mono', Menlo, monospace;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.shot-frame-body {
  max-height: 620px;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: #0D2630;
}
.shot-frame-body img { width: 100%; height: auto; display: block; }
.shot-frame-body::-webkit-scrollbar { width: 10px; }
.shot-frame-body::-webkit-scrollbar-track { background: rgba(255,255,255,.06); }
.shot-frame-body::-webkit-scrollbar-thumb { background: rgba(191,230,238,.35); border-radius: var(--r-pill); }
.shot-frame-body::-webkit-scrollbar-thumb:hover { background: rgba(191,230,238,.55); }
.shot-thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 12px; }
.shot-thumbs button {
  aspect-ratio: 16 / 10; overflow: hidden;
  border-radius: var(--r-sm);
  border: 1px solid var(--pearl-400);
  background: var(--pearl-200);
  transition: border-color 180ms var(--ease-ocean), transform 180ms var(--ease-ocean);
}
.shot-thumbs button:hover, .shot-thumbs button.is-active { border-color: var(--brand-400); transform: translateY(-1px); }
.shot-thumbs img { width: 100%; height: 100%; object-fit: cover; }

.spec-table { font-size: 14px; }
.spec-table tr { border-bottom: 1px solid var(--pearl-300); }
.spec-table tr:last-child { border-bottom: 0; }
.spec-table th {
  text-align: left; font-weight: 600; color: var(--sea-500);
  padding: 11px 0; width: 116px; vertical-align: top; font-size: 13px;
}
.spec-table td { padding: 11px 0; color: var(--sea-800); }

.buy-card { padding: 24px 22px; }
.buy-price { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; }
.buy-price .num { font-size: 42px; font-weight: 800; letter-spacing: -1.6px; color: var(--sea-950); font-variant-numeric: tabular-nums; line-height: 1; }
.buy-price .cur { font-size: 16px; font-weight: 800; color: var(--brand-600); }
.buy-price .old { font-size: 14px; color: var(--sea-500); text-decoration: line-through; }
.buy-note { font-size: 12.5px; color: var(--sea-500); margin-bottom: 18px; }
.buy-actions { display: flex; flex-direction: column; gap: 9px; }

.demo-panel { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--pearl-300); }
.demo-panel h4 { font-size: 13px; color: var(--sea-900); margin-bottom: 10px; }
.demo-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; margin-bottom: 8px;
  border-radius: var(--r-sm);
  background: var(--pearl-200);
  border: 1px solid var(--pearl-400);
  font-size: 12.5px;
}
.demo-row .k { color: var(--sea-500); flex-shrink: 0; }
.demo-row .v { color: var(--sea-900); font-weight: 700; font-family: 'JetBrains Mono', Menlo, monospace; word-break: break-all; }
.demo-row .copy { margin-left: auto; flex-shrink: 0; color: var(--brand-600); font-weight: 600; font-size: 12px; }

/* ---------- 提示条 ---------- */
.alert {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 13px 16px; margin-bottom: 18px;
  border-radius: var(--r-md);
  font-size: 13.5px; line-height: 1.7;
}
.alert-info    { background: var(--info-50);    border: 1px solid var(--info-200);    color: var(--info-700); }
.alert-success { background: var(--success-50); border: 1px solid var(--success-200); color: var(--success-700); }
.alert-warning { background: var(--warning-50); border: 1px solid var(--warning-200); color: var(--warning-700); }
.alert-danger  { background: var(--danger-50);  border: 1px solid var(--danger-200);  color: var(--danger-700); }
.alert svg { flex-shrink: 0; margin-top: 2px; }

/* ---------- 通用工具 ---------- */
.stack   { display: flex; flex-direction: column; }
.row     { display: flex; align-items: center; }
.wrap    { flex-wrap: wrap; }
.gap-4   { gap: 4px; }  .gap-6 { gap: 6px; }  .gap-8 { gap: 8px; }
.gap-10  { gap: 10px; } .gap-12 { gap: 12px; } .gap-16 { gap: 16px; } .gap-20 { gap: 20px; }
.ml-auto { margin-left: auto; }
.mt-8  { margin-top: 8px; }  .mt-10 { margin-top: 10px; } .mt-12 { margin-top: 12px; } .mt-16 { margin-top: 16px; }
.mt-20 { margin-top: 20px; } .mt-24 { margin-top: 24px; } .mt-32 { margin-top: 32px; }
.mb-0  { margin-bottom: 0; } .mb-8 { margin-bottom: 8px; } .mb-12 { margin-bottom: 12px; }
.mb-16 { margin-bottom: 16px; } .mb-20 { margin-bottom: 20px; } .mb-24 { margin-bottom: 24px; }
.text-center { text-align: center; }
.text-right  { text-align: right; }
.text-sm  { font-size: 13px; }
.text-xs  { font-size: 12px; }
.text-dim { color: var(--sea-500); }
.text-mid { color: var(--sea-600); }
.text-strong { color: var(--sea-950); font-weight: 700; }
.text-brand  { color: var(--brand-600); }
.text-coral  { color: var(--coral-deep); }
.text-success{ color: var(--success-600); }
.mono { font-family: 'JetBrains Mono', Menlo, Monaco, monospace; }
.nowrap { white-space: nowrap; }
/* 只负责「在手机上藏起来」，不负责「在桌面上显示成什么」。
   以前写成 @media(min-width:768px){display:initial}，而 initial 对 <a> 就是 inline，
   会把元素自己的 inline-flex 冲掉 —— 顶部「联系客服」按钮因此不是 flex 容器，
   加上图标后图标和文字排成两行、直接掉出圆角边框。 */
@media (max-width: 767px) { .hide-mobile { display: none !important; } }
.flex-1 { flex: 1; }

.lp-card-premium .lp-card-thumb{background:#e5eef0}.lp-card-premium .lp-card-thumb .shot{width:calc((var(--thumb-h) - var(--chrome-h)) * .4620853);max-width:100%;height:auto;margin-inline:auto;object-fit:contain;object-position:top center;box-shadow:0 0 0 1px #15384733,0 3px 16px #15384729;border-radius:9px 9px 0 0}.lp-card-premium .lp-card-code{font-size:9px;padding:6px 8px}.lp-card-premium .lp-card-hint{font-size:9px;right:8px;bottom:8px;padding:6px 8px}

/* DX catalog region labels 2026-10-15 */

.lp-card-specs { display: grid; grid-template-columns: 1fr; gap: 6px; margin-top: 12px; }
.lp-card-specs .lp-card-spec { display: flex; align-items: baseline; width: 100%; min-width: 0; max-width: 100%; gap: 7px; border-radius: var(--r-sm); white-space: normal; line-height: 1.4; }
.lp-card-spec-label { flex: 0 0 auto; font-size: 10.5px; font-weight: 700; color: var(--sea-600); }
.lp-card-spec-value { min-width: 0; font-size: 12px; font-weight: 700; overflow-wrap: anywhere; }