/* ============================================================
   home_v2.css
   [1] 旧版基础样式（已剥离 !important，供询价/FAQ/博客等保留区块使用）
   [2] Modern Archive 首页新设计系统
   ============================================================ */

/* ---------- [1] legacy ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }
  :root {
    --navy: #0b1f3a;
    --navy-light: #142c52;
    --gold: #b8923f;
    --gold-light: #d4b06a;
    --cream: #f7f4ee;
    --text-dark: #1a1a1a;
    --text-muted: #5a5a5a;
    --border: #e0dcd2;
  }
  html { scroll-behavior: smooth; }
  body {
    font-family: 'Georgia', 'Times New Roman', serif;
    color: var(--text-dark);
    background: var(--cream);
    line-height: 1.6;
  }
  .sans { font-family: 'Helvetica Neue', Arial, sans-serif; }
  header {
    background: var(--navy);
    color: white;
    padding: 18px 5%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 2px 12px rgba(0,0,0,0.15);
  }
  .logo {
    font-size: 1.4rem;
    font-weight: bold;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .logo .mark {
    width: 34px; height: 34px;
    background: linear-gradient(135deg, var(--gold), var(--gold-light));
    border-radius: 4px;
    display: flex; align-items: center; justify-content: center;
    color: var(--navy);
    font-weight: bold;
    font-size: 1rem;
  }
  nav a {
    color: #cfd6e4;
    text-decoration: none;
    margin-left: 28px;
    font-size: 0.92rem;
    font-family: 'Helvetica Neue', Arial, sans-serif;
    transition: color 0.2s;
  }
  nav a:hover { color: var(--gold-light); }
  .nav-cta {
    background: var(--gold);
    color: var(--navy) ;
    padding: 9px 20px;
    border-radius: 3px;
    font-weight: 600;
  }
  /* FIX-2026-08-14 (P2-2): 汉堡菜单按钮 — 桌面隐藏，仅移动端显示 */
  .nav-toggle {
    display: none;
    background: none;
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: 4px;
    color: white;
    font-size: 1.3rem;
    line-height: 1;
    padding: 8px 12px;
    cursor: pointer;
  }
  .hero{
    color: white;
    padding: 90px 5% 100px;
    position: relative;
    overflow: hidden;
  }
  .hero::before {
    content: "";
    position: absolute;
    right: -100px; top: -100px;
    width: 500px; height: 500px;
    background: radial-gradient(circle, rgba(184,146,63,0.15) 0%, transparent 70%);
  }
  .hero-inner {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 50px;
    align-items: center;
    position: relative;
    z-index: 1;
  }
  .eyebrow {
    font-family: 'Helvetica Neue', Arial, sans-serif;
    color: var(--gold-light);
    font-size: 0.8rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 18px;
    font-weight: 600;
  }
  .hero h1 {
    font-size: 2.6rem;
    line-height: 1.25;
    margin-bottom: 22px;
    font-weight: 500;
  }
  .hero h1 strong { color: var(--gold-light); font-weight: 700; }
  .hero p.sub {
    font-size: 1.05rem;
    color: #c7cde0;
    margin-bottom: 32px;
    max-width: 480px;
  }
  .hero-ctas { display: flex; gap: 16px; flex-wrap: wrap; }
  .btn {
    font-family: 'Helvetica Neue', Arial, sans-serif;
    padding: 14px 28px;
    border-radius: 4px;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s;
    border: none;
    cursor: pointer;
  }
  .btn-primary { background: var(--gold); color: var(--navy); }
  .btn-primary:hover { background: var(--gold-light); transform: translateY(-1px); }
  .btn-outline { background: transparent; color: white; border: 1.5px solid rgba(255,255,255,0.4); }
  .btn-outline:hover { border-color: var(--gold-light); color: var(--gold-light); }
  .hero-stats {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 8px;
    padding: 30px;
    backdrop-filter: blur(4px);
  }
  .hero-stats .stat { padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,0.1); }
  .hero-stats .stat:last-child { border-bottom: none; }
  .hero-stats .stat .num {
    font-size: 1.8rem; font-weight: 700; color: var(--gold-light);
    font-family: 'Helvetica Neue', Arial, sans-serif;
  }
  .hero-stats .stat .label {
    font-family: 'Helvetica Neue', Arial, sans-serif;
    font-size: 0.82rem; color: #b4bcd0; margin-top: 2px;
  }
  section { padding: 80px 5%; }
  .section-inner { max-width: 1100px; margin: 0 auto; }
  .section-head { text-align: center; max-width: 640px; margin: 0 auto 50px; }
  .section-head .eyebrow { color: var(--gold); justify-content: center; display: flex; }
  .section-head h2 { font-size: 2rem; color: var(--navy); margin-bottom: 14px; }
  .section-head p { color: var(--text-muted); font-size: 1rem; }
  .provenance { background: white; }
  .flow {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-top: 20px;
  }
  .flow-step {
    text-align: center;
    padding: 30px 18px;
    border: 1px solid var(--border);
    border-radius: 8px;
    position: relative;
  }
  .flow-step .num-badge {
    width: 40px; height: 40px;
    background: var(--navy);
    color: var(--gold-light);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 16px;
    font-weight: bold;
    font-family: 'Helvetica Neue', Arial, sans-serif;
  }
  .flow-step h4 {
    font-family: 'Helvetica Neue', Arial, sans-serif;
    color: var(--navy);
    font-size: 0.98rem;
    margin-bottom: 8px;
  }
  .flow-step p { font-size: 0.88rem; color: var(--text-muted); font-family: 'Helvetica Neue', Arial, sans-serif; }
  .callout {
    background: var(--cream);
    border-left: 4px solid var(--gold);
    padding: 24px 28px;
    margin-top: 40px;
    border-radius: 4px;
  }
  .callout strong { color: var(--navy); }
  .callout p { font-size: 0.95rem; color: #444; }
  .products { background: var(--cream); }
  .sku-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
  }
  .sku-card {
    background: white;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--border);
    transition: transform 0.2s, box-shadow 0.2s;
  }
  .sku-card:hover { transform: translateY(-4px); box-shadow: 0 10px 30px rgba(11,31,58,0.1); }
  .sku-visual {
    height: 150px;
    background: linear-gradient(135deg, var(--navy), var(--navy-light));
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
  }
  .sku-visual img {
    max-width: 82%;
    max-height: 82%;
    object-fit: contain;
    border-radius: 4px;
    background: white;
    padding: 6px;
    box-shadow: 0 4px 14px rgba(0,0,0,0.25);
  }
  .sku-body { padding: 18px 20px; font-family: 'Helvetica Neue', Arial, sans-serif; }
  .sku-body .year {
    color: var(--gold);
    font-weight: 700;
    font-size: 0.78rem;
    letter-spacing: 1px;
    margin-bottom: 4px;
  }
  .sku-body h4 { color: var(--navy); font-size: 1.05rem; margin-bottom: 8px; }
  .sku-body .meta { font-size: 0.85rem; color: var(--text-muted); }
  .pricing { background: white; }
  .price-table {
    width: 100%;
    border-collapse: collapse;
    font-family: 'Helvetica Neue', Arial, sans-serif;
    margin-bottom: 40px;
  }
  .price-table th, .price-table td {
    padding: 16px 20px;
    text-align: left;
    border-bottom: 1px solid var(--border);
  }
  .price-table th {
    background: var(--navy);
    color: white;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }
  .price-table tr:last-child td { border-bottom: none; }
  .price-table td.tier-name { font-weight: 600; color: var(--navy); }
  .price-table td.discount-badge {
    color: #b02a2a;
    font-weight: 700;
  }
  .price-table tr.highlight { background: #fdf8ee; }
  .price-table tr.highlight td.tier-name::after {
    content: " — BEST VALUE";
    font-size: 0.7rem;
    color: var(--gold);
  }
  .calc-box {
    background: var(--navy);
    color: white;
    border-radius: 10px;
    padding: 36px;
    font-family: 'Helvetica Neue', Arial, sans-serif;
  }
  .calc-box h3 { color: var(--gold-light); margin-bottom: 20px; font-size: 1.2rem; }
  .calc-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    align-items: end;
  }
  .calc-field label { display: block; font-size: 0.85rem; color: #c7cde0; margin-bottom: 8px; }
  .calc-field input {
    width: 100%;
    padding: 12px 14px;
    border-radius: 5px;
    border: 1px solid rgba(255,255,255,0.2);
    background: rgba(255,255,255,0.08);
    color: white;
    font-size: 1rem;
  }
  .calc-field input::placeholder { color: #8b93a8; }
  .calc-result {
    background: rgba(255,255,255,0.08);
    border-radius: 8px;
    padding: 20px;
    margin-top: 24px;
  }
  .calc-result .row { display: flex; justify-content: space-between; padding: 6px 0; font-size: 0.92rem; color: #cfd6e4; }
  .calc-result .row.total { border-top: 1px solid rgba(255,255,255,0.15); margin-top: 8px; padding-top: 14px; font-size: 1.15rem; color: var(--gold-light); font-weight: 700; }
  .buyers { background: var(--cream); }
  .buyer-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
  .buyer-card {
    background: white;
    padding: 26px 20px;
    border-radius: 8px;
    text-align: center;
    border: 1px solid var(--border);
  }
  .buyer-card .icon { font-size: 1.8rem; margin-bottom: 12px; }
  .buyer-card h4 { font-family: 'Helvetica Neue', Arial, sans-serif; color: var(--navy); font-size: 0.95rem; margin-bottom: 6px; }
  .buyer-card p { font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 0.82rem; color: var(--text-muted); }
  .inquiry { background: linear-gradient(160deg, var(--navy), var(--navy-light)); color: white; }
  .inquiry-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
  }
  .inquiry-info h2 { font-size: 1.9rem; margin-bottom: 18px; }
  .inquiry-info p { color: #c7cde0; margin-bottom: 24px; font-size: 0.98rem; }
  .whatsapp-box {
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 8px;
    padding: 22px;
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 20px;
  }
  .whatsapp-box .wa-icon {
    width: 44px; height: 44px;
    background: #25D366;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.3rem;
    flex-shrink: 0;
  }
  .whatsapp-box .wa-text { font-family: 'Helvetica Neue', Arial, sans-serif; }
  .whatsapp-box .wa-text .label { font-size: 0.78rem; color: #b4bcd0; }
  .whatsapp-box .wa-text .number { font-size: 1.05rem; font-weight: 700; }
  form.inquiry-form {
    background: white;
    border-radius: 10px;
    padding: 32px;
    font-family: 'Helvetica Neue', Arial, sans-serif;
  }
  .inquiry-form h3 { color: var(--navy); margin-bottom: 20px; font-size: 1.15rem; }
  .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
  .form-group { margin-bottom: 14px; }
  .form-group label { display: block; font-size: 0.82rem; color: #444; margin-bottom: 6px; font-weight: 600; }
  .form-group input, .form-group select, .form-group textarea {
    width: 100%;
    padding: 11px 13px;
    border: 1px solid var(--border);
    border-radius: 5px;
    font-size: 0.92rem;
    font-family: inherit;
  }
  .form-group textarea { resize: vertical; min-height: 80px; }
  .form-submit {
    width: 100%;
    background: var(--navy);
    color: white;
    border: none;
    padding: 14px;
    border-radius: 5px;
    font-weight: 700;
    font-size: 0.95rem;
    cursor: pointer;
    margin-top: 8px;
    transition: background 0.2s;
  }
  .form-submit:hover { background: var(--navy-light); }
  .form-note { font-size: 0.75rem; color: var(--text-muted); margin-top: 10px; text-align: center; }
  .faq { background: white; }
  .faq-item { border-bottom: 1px solid var(--border); padding: 20px 0; }
  .faq-item h4 {
    color: var(--navy);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1rem;
  }
  .faq-item .faq-a {
    color: var(--text-muted);
    font-size: 0.92rem;
    margin-top: 12px;
    display: none;
    font-family: 'Helvetica Neue', Arial, sans-serif;
    line-height: 1.7;
  }
  .faq-item.open .faq-a { display: block; }
  .faq-item .toggle { color: var(--gold); font-size: 1.3rem; font-family: sans-serif; }
  /* FIX-2026-08-14 (P2-5): Latest from the Blog 区块样式 */
  .blog-teaser { background: var(--cream); }
  .teaser-card {
    background: white;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 26px 28px;
    max-width: 760px;
    margin: 0 auto;
    transition: transform 0.2s, box-shadow 0.2s;
  }
  .teaser-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(11,31,58,0.08); }
  .teaser-card .cat {
    font-size: 0.75rem; color: var(--gold); text-transform: uppercase;
    letter-spacing: 1px; font-weight: 700;
  }
  .teaser-card h3 { font-size: 1.3rem; color: var(--navy); margin: 8px 0; }
  .teaser-card h3 a { color: var(--navy); text-decoration: none; }
  .teaser-card h3 a:hover { color: var(--gold); }
  .teaser-card p { color: #555; font-size: 0.95rem; font-family: 'Helvetica Neue', Arial, sans-serif; }
  .teaser-card .meta { font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 0.8rem; color: var(--text-muted); margin-top: 12px; }
  .teaser-more { text-align: center; margin-top: 24px; }
  footer {
    background: var(--navy);
    color: #93a0bd;
    padding: 40px 5% 24px;
    text-align: center;
    font-family: 'Helvetica Neue', Arial, sans-serif;
    font-size: 0.82rem;
  }
  footer .foot-links { margin-bottom: 16px; }
  footer .foot-links a { color: #cfd6e4; text-decoration: none; margin: 0 12px; }
  /* FIX-2026-08-14 (P0-4): 表单提交成功提示条样式 */
  .success-banner {
    background: #1e7a46;
    color: white;
    text-align: center;
    padding: 14px 5%;
    font-family: 'Helvetica Neue', Arial, sans-serif;
    font-size: 0.95rem;
  }
  .success-banner strong { color: #ffe9a8; }
  /* FIX-2026-08-14 (P2-3): 移动端底部 sticky Request Quote 浮动按钮样式 */
  .mobile-cta {
    display: none;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 900;
    background: var(--navy);
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -4px 16px rgba(0,0,0,0.25);
  }
  .mobile-cta a {
    display: block;
    text-align: center;
    background: var(--gold);
    color: var(--navy);
    text-decoration: none;
    font-family: 'Helvetica Neue', Arial, sans-serif;
    font-weight: 700;
    font-size: 0.95rem;
    padding: 13px;
    border-radius: 5px;
  }
  /* FIX-2026-08-14 (P1-8): Cookie 同意横幅样式 */
  .cookie-banner {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 1000;
    background: var(--navy);
    color: #cfd6e4;
    font-family: 'Helvetica Neue', Arial, sans-serif;
    font-size: 0.85rem;
    padding: 18px 5%;
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
    border-top: 3px solid var(--gold);
    box-shadow: 0 -6px 24px rgba(0,0,0,0.35);
  }
  .cookie-banner.show { display: flex; }
  .cookie-banner a { color: var(--gold-light); }
  .cookie-actions { display: flex; gap: 10px; flex-wrap: wrap; }
  .cookie-actions button {
    font-family: 'Helvetica Neue', Arial, sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    padding: 10px 18px;
    border-radius: 4px;
    cursor: pointer;
    border: none;
  }
  .cookie-accept { background: var(--gold); color: var(--navy); }
  .cookie-essential { background: transparent; color: #cfd6e4; border: 1px solid rgba(255,255,255,0.4) ; }
  @media (max-width: 900px) {
    .hero-inner, .inquiry-grid { grid-template-columns: 1fr; }
    .flow, .sku-grid, .buyer-grid { grid-template-columns: repeat(2, 1fr); }
    .calc-grid { grid-template-columns: 1fr; }
    /* FIX-2026-08-14 (P2-2): 替换原 `nav { display: none; }` —— 移动端改为汉堡菜单展开式导航 */
    .nav-toggle { display: block; }
    nav {
      display: none;
      position: absolute;
      top: 100%; left: 0; right: 0;
      background: var(--navy);
      flex-direction: column;
      padding: 6px 5% 18px;
      box-shadow: 0 12px 20px rgba(0,0,0,0.3);
    }
    nav.nav-open { display: flex; }
    nav a { margin: 12px 0 0; font-size: 1rem; }
    nav a.nav-cta { margin-top: 14px; text-align: center; }
    .hero h1 { font-size: 2rem; }
    /* FIX-2026-08-14 (P2-3): 移动端启用 sticky CTA，并为底部留出空间 */
    .mobile-cta { display: block; }
    body { padding-bottom: 68px; }
    .cookie-banner { bottom: 68px; }
  }

/* ========== 豪华视觉升级 2026-08-26 ========== */
/* 导航吸顶 + 毛玻璃 */
nav, .nav, header { backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  background: rgba(11,31,58,.9) ; box-shadow: 0 8px 32px rgba(0,0,0,.3); }
nav a, .nav a { position: relative; transition: color .25s ease; }
nav a::after, .nav a::after { content:""; position:absolute; left:0; bottom:-4px; width:0; height:2px;
  background: linear-gradient(90deg, var(--gold), var(--gold-light)); transition: width .3s ease; }
nav a:hover::after, .nav a::after:hover { width: 100%; }
/* 卡片金色描边 + 悬浮 */
.card, .product-card, .feature, .plan, [class*="card"] { transition: transform .35s ease, box-shadow .35s ease;
  border: 1px solid rgba(184,146,63,.25) ; }
.card:hover, .product-card:hover, .feature:hover, .plan:hover, [class*="card"]:hover {
  transform: translateY(-5px); box-shadow: 0 20px 50px rgba(0,0,0,.2) ; border-color: var(--gold) ; }
/* 按钮金渐变 */
.btn, button[class*="btn"], .cta a { background: linear-gradient(135deg, var(--gold-light), var(--gold)) ;
  color: #0b1f3a ; box-shadow: 0 8px 24px rgba(184,146,63,.35); transition: all .3s ease; }
.btn:hover, button[class*="btn"]:hover, .cta a:hover { transform: translateY(-2px); box-shadow: 0 14px 36px rgba(184,146,63,.45); }
/* 标题金线 */
h2, .section-title { position: relative; }
h2::after, .section-title::after { content:""; display:block; width:60px; height:2px; margin:12px auto 0;
  background: linear-gradient(90deg, var(--gold), transparent); }
/* hero 深度 */
.hero, [class*="hero"] { background: linear-gradient(160deg, rgba(11,31,58,.92), rgba(11,31,58,.75)) ; }
/* 数字金色渐变 */
[class*="stat"] b, .stat b { background: linear-gradient(135deg, var(--gold-light), var(--gold)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
/* 表格/列表细腻边框 */
table, .price-table { box-shadow: 0 6px 30px rgba(11,31,58,.08); border-radius: 12px; overflow: hidden; }

/* ---------- [2] Modern Archive ---------- */
/* ==========================================================================
   Modern Archive — 首页设计系统
   深墨蓝 × 黄铜金，大字号、强对比、留白充足
   类名统一 hm- 前缀，避免与既有样式冲突
   ========================================================================== */

:root{
  --hm-navy:#0A0E18;
  --hm-navy-2:#0E1626;
  --hm-ink:#14181F;
  --hm-gold:#C9A227;
  --hm-gold-lt:#E8D9A8;
  --hm-gold-dp:#8F7016;
  --hm-cream:#F5F2EA;
  --hm-parch:#FBF9F4;
  --hm-muted:#6B6A64;
  --hm-line:#DDD6C6;
  --hm-hair:rgba(201,162,39,.24);
  --hm-font-d:'Playfair Display',Georgia,'Times New Roman',serif;
  --hm-font-b:'Inter','Helvetica Neue',Arial,sans-serif;
  --hm-font-m:'Roboto Mono',ui-monospace,Menlo,Consolas,monospace;
  --hm-ease:cubic-bezier(.22,1,.36,1);
}

.hm-wrap{width:100%;max-width:1280px;margin:0 auto;padding:0 5%}

/* ---------- 通用小组件 ---------- */
.hm-eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--hm-font-m);font-size:10.5px;font-weight:500;
  letter-spacing:.19em;text-transform:uppercase;color:var(--hm-gold-lt);
  margin-bottom:22px;
}
.hm-eyebrow.dark{color:var(--hm-gold-dp)}
.hm-dot{width:5px;height:5px;border-radius:50%;background:var(--hm-gold);
  box-shadow:0 0 0 4px rgba(201,162,39,.16);flex:0 0 auto}

.hm-h1{
  font-family:var(--hm-font-d);font-weight:600;
  font-size:clamp(40px,5.4vw,76px);line-height:1.03;letter-spacing:-.015em;
  color:#FBF9F4;margin:0 0 24px;
}
.hm-h1 em{font-style:italic;color:var(--hm-gold);font-weight:500}

.hm-h2{
  font-family:var(--hm-font-d);font-weight:600;
  font-size:clamp(28px,3.4vw,46px);line-height:1.12;letter-spacing:-.012em;
  color:var(--hm-ink);margin:0 0 14px;
}

.hm-lead{font-size:17px;line-height:1.72;color:var(--hm-muted);max-width:600px;font-weight:300}

.hm-head{margin-bottom:46px}
.hm-head-row{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap}
.hm-more{
  font-family:var(--hm-font-m);font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--hm-gold-dp);text-decoration:none;border-bottom:1px solid var(--hm-hair);
  padding-bottom:5px;transition:color .25s ease,border-color .25s ease;white-space:nowrap;
}
.hm-more i{font-style:normal;transition:transform .25s var(--hm-ease);display:inline-block}
.hm-more:hover{color:var(--hm-gold);border-color:var(--hm-gold)}
.hm-more:hover i{transform:translateX(4px)}

/* ==========================================================================
   HERO
   ========================================================================== */
.hm-hero{
  position:relative;overflow:hidden;isolation:isolate;
  background:linear-gradient(168deg,#0E1626 0%,var(--hm-navy) 58%,#070B12 100%);
  padding:clamp(72px,8vw,124px) 0 clamp(64px,7vw,110px);
}
.hm-hero-glow{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(900px 520px at 78% 8%,rgba(201,162,39,.20),transparent 62%),
    radial-gradient(760px 480px at 4% 92%,rgba(20,28,46,.62),transparent 60%);
}
.hm-hero-grid{
  position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background-image:
    linear-gradient(rgba(201,162,39,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(201,162,39,.055) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(72% 62% at 50% 34%,#000 0%,transparent 100%);
          mask-image:radial-gradient(72% 62% at 50% 34%,#000 0%,transparent 100%);
}
.hm-hero-inner{
  position:relative;z-index:1;
  display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(28px,4vw,64px);align-items:center;
}
.hm-hero-copy{max-width:640px}

.hm-sub{
  font-size:clamp(15px,1.15vw,18px);line-height:1.75;font-weight:300;
  color:rgba(237,234,227,.80);margin:0 0 34px;max-width:560px;
}

.hm-cta{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:32px}
.hm-btn{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--hm-font-b);font-size:14.5px;font-weight:500;letter-spacing:.01em;
  padding:15px 30px;border-radius:2px;text-decoration:none;cursor:pointer;
  border:1px solid transparent;transition:transform .28s var(--hm-ease),box-shadow .28s ease,
         background .28s ease,color .28s ease,border-color .28s ease;
}
.hm-btn-gold{
  background:linear-gradient(135deg,#F0E2B6 0%,var(--hm-gold) 48%,#96761C 100%);
  color:#0A0E18;box-shadow:0 12px 34px rgba(201,162,39,.30);
}
.hm-btn-gold:hover{transform:translateY(-2px);box-shadow:0 18px 46px rgba(201,162,39,.44)}
.hm-btn-ghost{
  background:transparent;color:rgba(237,234,227,.94);
  border-color:rgba(237,234,227,.30);
}
.hm-btn-ghost:hover{border-color:var(--hm-gold);color:var(--hm-gold-lt);
  background:rgba(201,162,39,.08);transform:translateY(-2px)}

.hm-ticks{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.hm-ticks li{
  position:relative;padding-left:26px;font-size:13.8px;line-height:1.5;
  color:rgba(237,234,227,.66);font-weight:300;
}
.hm-ticks li::before{
  content:'';position:absolute;left:0;top:6px;width:12px;height:7px;
  border-left:1.6px solid var(--hm-gold);border-bottom:1.6px solid var(--hm-gold);
  transform:rotate(-45deg);
}

/* --- 标本墙 --- */
.hm-hero-art{position:relative;height:clamp(360px,42vw,520px)}
.hm-art-item{
  position:absolute;margin:0;padding:0;
  width:31%;border-radius:3px;overflow:hidden;
  background:#fff;
  box-shadow:0 22px 54px rgba(0,0,0,.52),0 2px 8px rgba(0,0,0,.34);
  border:1px solid rgba(255,255,255,.07);
  transform:translate(var(--dx,0),var(--dy,0)) rotate(var(--rot,0deg));
  animation:hmFloat 8s ease-in-out infinite;animation-delay:var(--d,0ms);
  transition:box-shadow .4s ease;
}
.hm-art-item img{display:block;width:100%;height:auto}
.hm-art-item:nth-child(1){left:2%;  top:2%;  z-index:3}
.hm-art-item:nth-child(2){left:36%; top:0;   z-index:2}
.hm-art-item:nth-child(3){left:68%; top:14%; z-index:4}
.hm-art-item:nth-child(4){left:12%; top:44%; z-index:2}
.hm-art-item:nth-child(5){left:48%; top:52%; z-index:3}
@keyframes hmFloat{
  0%,100%{transform:translate(var(--dx,0),var(--dy,0)) rotate(var(--rot,0deg))}
  50%    {transform:translate(var(--dx,0),calc(var(--dy,0px) - 9px)) rotate(var(--rot,0deg))}
}

/* ==========================================================================
   统计条
   ========================================================================== */
.hm-stats{background:var(--hm-cream);border-bottom:1px solid var(--hm-line);padding:34px 0}
.hm-statgrid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:18px;
}
.hm-stat{text-align:center;padding:6px 10px;position:relative}
.hm-stat + .hm-stat::before{
  content:'';position:absolute;left:0;top:12%;height:76%;width:1px;background:var(--hm-line);
}
.hm-stat b{
  display:block;font-family:var(--hm-font-d);font-size:clamp(24px,2.6vw,36px);
  font-weight:600;color:var(--hm-ink);line-height:1.15;
}
.hm-stat span{
  display:block;margin-top:5px;font-family:var(--hm-font-m);font-size:10px;
  letter-spacing:.13em;text-transform:uppercase;color:var(--hm-muted);
}

/* ==========================================================================
   双路径
   ========================================================================== */
.hm-paths{background:var(--hm-parch);padding:clamp(64px,7vw,104px) 0}
.hm-pathgrid{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.hm-path{
  display:block;text-decoration:none;color:inherit;position:relative;
  background:#fff;border:1px solid var(--hm-line);border-radius:4px;
  padding:38px 34px 32px;overflow:hidden;
  transition:transform .38s var(--hm-ease),box-shadow .38s ease,border-color .38s ease;
}
.hm-path::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:3px;
  background:linear-gradient(180deg,var(--hm-gold-lt),var(--hm-gold));
}
.hm-path:hover{transform:translateY(-6px);box-shadow:0 30px 70px rgba(10,14,24,.14);
  border-color:var(--hm-gold)}
.hm-path-tag{
  display:inline-block;font-family:var(--hm-font-m);font-size:10px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--hm-gold-dp);
  background:rgba(201,162,39,.10);border:1px solid var(--hm-hair);
  padding:5px 11px;border-radius:2px;margin-bottom:18px;
}
.hm-path h3{
  font-family:var(--hm-font-d);font-size:clamp(22px,2.1vw,29px);font-weight:600;
  color:var(--hm-ink);margin:0 0 12px;line-height:1.2;
}
.hm-path > p{font-size:14.6px;line-height:1.72;color:var(--hm-muted);margin:0 0 20px;font-weight:300}
.hm-path ul{list-style:none;margin:0 0 26px;padding:0;display:grid;gap:9px}
.hm-path ul li{
  position:relative;padding-left:24px;font-size:13.8px;line-height:1.55;color:#3A3A36;
}
.hm-path ul li::before{
  content:'';position:absolute;left:0;top:5px;width:11px;height:6px;
  border-left:1.5px solid var(--hm-gold);border-bottom:1.5px solid var(--hm-gold);
  transform:rotate(-45deg);
}
.hm-path-go{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--hm-font-m);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--hm-gold-dp);
}
.hm-path-go i{font-style:normal;transition:transform .3s var(--hm-ease)}
.hm-path:hover .hm-path-go i{transform:translateX(5px)}

/* ==========================================================================
   精选陈列
   ========================================================================== */
.hm-featured{background:var(--hm-cream);padding:clamp(64px,7vw,100px) 0;border-top:1px solid var(--hm-line)}
.hm-pgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.hm-pcard{
  display:block;text-decoration:none;color:inherit;background:#fff;
  border:1px solid var(--hm-line);border-radius:3px;overflow:hidden;
  transition:transform .36s var(--hm-ease),box-shadow .36s ease,border-color .36s ease;
}
.hm-pcard:hover{transform:translateY(-5px);box-shadow:0 24px 58px rgba(10,14,24,.15);
  border-color:var(--hm-gold)}
.hm-pim{
  position:relative;aspect-ratio:4/5;background:#EFEAE0;overflow:hidden;
  display:flex;align-items:center;justify-content:center;padding:14px;
}
.hm-pim img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;
  transition:transform .46s var(--hm-ease)}
.hm-pcard:hover .hm-pim img{transform:scale(1.05)}
.hm-pbd{padding:15px 16px 17px}
.hm-pt{
  font-family:var(--hm-font-d);font-size:16px;font-weight:600;color:var(--hm-ink);
  line-height:1.3;margin-bottom:7px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  min-height:41px;
}
.hm-pm{
  display:flex;align-items:center;gap:7px;font-family:var(--hm-font-m);font-size:10px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--hm-muted);margin-bottom:9px;
}
.hm-pm .dot{opacity:.5}
.hm-pp{font-family:var(--hm-font-d);font-size:19px;font-weight:600;color:var(--hm-ink)}
.hm-pcard.is-oos .hm-pim img{opacity:.4;filter:grayscale(.6)}
.hm-pcard .oos-flag{
  position:absolute;top:9px;left:9px;z-index:2;background:rgba(10,14,24,.9);
  color:var(--hm-gold-lt);font-family:var(--hm-font-m);font-size:9px;
  letter-spacing:.13em;text-transform:uppercase;padding:4px 8px;border-radius:2px;
  border:1px solid rgba(201,162,39,.4);
}

/* ==========================================================================
   来源透明
   ========================================================================== */
.hm-prov{background:var(--hm-parch);padding:clamp(64px,7vw,100px) 0;border-top:1px solid var(--hm-line)}
.hm-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.hm-step{position:relative;padding-top:16px}
.hm-step + .hm-step{padding-left:30px;border-left:1px solid var(--hm-line)}
.hm-num{
  display:block;font-family:var(--hm-font-d);font-size:38px;font-weight:600;
  color:var(--hm-gold);line-height:1;margin-bottom:14px;opacity:.85;
}
.hm-step h4{
  font-family:var(--hm-font-d);font-size:19px;font-weight:600;color:var(--hm-ink);
  margin:0 0 10px;
}
.hm-step p{font-size:14.4px;line-height:1.75;color:var(--hm-muted);margin:0;font-weight:300}

/* ==========================================================================
   响应式
   ========================================================================== */
@media(max-width:1100px){
  .hm-pgrid{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:900px){
  .hm-hero-inner{grid-template-columns:1fr;gap:44px}
  .hm-hero-copy{max-width:none}
  .hm-hero-art{height:300px;order:-1}
  .hm-art-item{width:26%}
  .hm-statgrid{grid-template-columns:repeat(2,1fr);gap:26px}
  .hm-stat + .hm-stat::before{display:none}
  .hm-pathgrid{grid-template-columns:1fr}
  .hm-steps{grid-template-columns:1fr;gap:26px}
  .hm-step + .hm-step{padding-left:0;border-left:none;padding-top:26px;
    border-top:1px solid var(--hm-line)}
}
@media(max-width:640px){
  .hm-pgrid{grid-template-columns:repeat(2,1fr);gap:14px}
  .hm-path{padding:30px 24px 26px}
  .hm-hero-art{height:230px}
  .hm-art-item{width:30%}
  .hm-cta{flex-direction:column;align-items:stretch}
  .hm-btn{width:100%}
}
@media(prefers-reduced-motion:reduce){
  .hm-art-item{animation:none!important}
  .hm-hero-glow,.hm-hero-grid{display:none}
}