﻿/* ============================================================
   未来派视听 · 品牌官网主题
   影院级暗色 + 暖金强调。所有视觉数值仅在此定义。
   ============================================================ */

:root {
  color-scheme: dark;

  /* 颜色 */
  --color-primary: #c9a35c;
  --color-background: #0c0d10;
  --color-muted-text: #9aa0ab;
  --color-bg: #0c0d10;
  --color-surface: #15171c;
  --color-surface-2: #1c1f26;
  --color-text: #e9e6df;
  --color-muted: #9aa0ab;
  --color-faint: #6b7280;
  --color-border: rgba(233, 230, 223, 0.12);
  --color-border-strong: rgba(233, 230, 223, 0.22);

  --color-gold: #c9a35c;
  --color-gold-deep: #b08a47;
  --color-gold-high: #e7cd96;
  --color-on-gold: #1a140a;

  --color-focus: #e7cd96;

  /* 字体 */
  --font-body: system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", "Helvetica Neue", sans-serif;
  --font-display: "Noto Serif SC", "Songti SC", "STSong", Georgia, serif;

  /* 间距 / 圆角 / 宽度 */
  --space-unit: 0.25rem;
  --radius-sm: 0.5rem;
  --radius-md: 0.875rem;
  --radius-lg: 1.25rem;
  --content-width: 76rem;

  /* 层级 */
  --shadow-card: 0 18px 50px -24px rgba(0, 0, 0, 0.85);
  --shadow-float: 0 24px 70px -20px rgba(0, 0, 0, 0.9);
  --header-h: 4.5rem;
}

* { box-sizing: border-box; }

html {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

body {
  margin: 0;
  min-height: 100dvh;
  line-height: 1.7;
  font-size: 16px;
  overflow-x: clip;
}

img { max-width: 100%; display: block; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.25;
  margin: 0;
}

p { margin: 0; }

a { color: inherit; text-decoration: none; }

button, input, select, textarea { font: inherit; color: inherit; }

:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip-link {
  position: fixed;
  left: 1rem;
  top: 1rem;
  transform: translateY(-250%);
  z-index: 200;
  background: var(--color-gold);
  color: var(--color-on-gold);
  padding: 0.6rem 1rem;
  border-radius: var(--radius-sm);
  font-weight: 600;
  transition: transform 0.2s ease;
}
.skip-link:focus { transform: translateY(0); }

/* ---------------- 通用容器与标题 ---------------- */

.wrap {
  width: min(var(--content-width), calc(100% - 2.5rem));
  margin-inline: auto;
}

.section { padding: clamp(4rem, 8vw, 7rem) 0; }
.section--surface { background: var(--color-surface); }
.section--tight { padding: clamp(3.5rem, 6vw, 5rem) 0; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--color-gold);
  font-size: 0.8rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}
.eyebrow::before {
  content: "";
  width: 1.75rem;
  height: 1px;
  background: var(--color-gold);
}

.section-head { max-width: 46rem; margin-bottom: clamp(2.5rem, 5vw, 3.75rem); }
.section-head h2 {
  font-size: clamp(1.7rem, 3.4vw, 2.6rem);
  letter-spacing: 0.02em;
}
.section-head p { color: var(--color-muted); margin-top: 1rem; font-size: 1.02rem; }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .eyebrow { justify-content: center; }
.section-head--center .eyebrow::after {
  content: "";
  width: 1.75rem;
  height: 1px;
  background: var(--color-gold);
}

/* ---------------- 按钮 ---------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.85rem 1.75rem;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 0.98rem;
  letter-spacing: 0.04em;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}
.btn-gold {
  background: linear-gradient(135deg, var(--color-gold-high), var(--color-gold) 55%, var(--color-gold-deep));
  color: var(--color-on-gold);
  box-shadow: 0 10px 30px -12px rgba(201, 163, 92, 0.6);
}
.btn-gold:hover { transform: translateY(-2px); }
.hero-phone-static { cursor: default; user-select: all; font-variant-numeric: tabular-nums; }
.hero-phone-static:hover { transform: none; }
.btn-ghost {
  background: transparent;
  color: var(--color-text);
  border-color: var(--color-border-strong);
}
.btn-ghost:hover { border-color: var(--color-gold); color: var(--color-gold-high); }
.btn-block { width: 100%; }

/* ---------------- 顶部导航 ---------------- */

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--header-h);
  z-index: 100;
  transition: background 0.3s ease, border-color 0.3s ease, backdrop-filter 0.3s ease;
  border-bottom: 1px solid transparent;
}
.site-header.scrolled {
  background: rgba(12, 13, 16, 0.86);
  backdrop-filter: blur(14px);
  border-bottom-color: var(--color-border);
}
.nav {
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}
.brand { display: flex; flex-direction: column; line-height: 1.1; }
.brand .zh { font-family: var(--font-display); font-size: 1.25rem; letter-spacing: 0.18em; }
.brand .en { font-size: 0.62rem; letter-spacing: 0.32em; color: var(--color-gold); margin-top: 0.2rem; }

.nav-links { display: flex; align-items: center; gap: 1.9rem; list-style: none; margin: 0; padding: 0; }
.nav-links a {
  font-size: 0.93rem;
  color: var(--color-muted);
  letter-spacing: 0.06em;
  transition: color 0.2s ease;
}
.nav-links a:hover { color: var(--color-gold-high); }
.nav-cta { padding: 0.6rem 1.25rem; font-size: 0.9rem; }

.nav-toggle {
  display: none;
  width: 2.75rem; height: 2.75rem;
  background: transparent;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.nav-toggle span { width: 18px; height: 2px; background: var(--color-text); transition: transform .25s ease, opacity .2s ease; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------------- HERO ---------------- */

.hero {
  position: relative;
  min-height: 100dvh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.hero-media { position: absolute; inset: 0; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; }
.hero-media::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(12,13,16,.72) 0%, rgba(12,13,16,.35) 38%, rgba(12,13,16,.92) 88%, var(--color-bg) 100%),
    linear-gradient(90deg, rgba(12,13,16,.85) 0%, rgba(12,13,16,.25) 55%, transparent 100%);
}
.hero-inner { position: relative; z-index: 2; padding: 9rem 0 4.5rem; width: 100%; }
.hero-badge {
  display: inline-flex; align-items: center; gap: .6rem;
  border: 1px solid var(--color-border-strong);
  background: rgba(21,23,28,.55);
  backdrop-filter: blur(6px);
  padding: .5rem 1.1rem; border-radius: 999px;
  font-size: .82rem; letter-spacing: .14em; color: var(--color-text);
  margin-bottom: 1.5rem;
}
.hero-badge .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--color-gold); box-shadow: 0 0 12px var(--color-gold); }
.hero h1 {
  font-size: clamp(2.3rem, 5.4vw, 4.2rem);
  letter-spacing: 0.03em;
  max-width: 14ch;
  text-shadow: 0 4px 40px rgba(0,0,0,.6);
}
.hero h1 em { font-style: normal; color: var(--color-gold-high); }
.hero-sub { margin-top: 1.4rem; font-size: clamp(1rem, 1.6vw, 1.18rem); color: #d6d2c8; max-width: 36rem; }
.hero-actions { margin-top: 2.25rem; display: flex; flex-wrap: wrap; gap: 1rem; }
.hero-stats {
  margin-top: 3rem;
  display: flex; flex-wrap: wrap; gap: clamp(1.75rem, 5vw, 3.5rem);
}
.hero-stat .num { font-family: var(--font-display); font-size: clamp(1.6rem,3vw,2.3rem); color: var(--color-gold-high); }
.hero-stat .lbl { font-size: .85rem; color: var(--color-muted); letter-spacing: .08em; margin-top: .15rem; }

/* ---------------- 套餐分档 ---------------- */

.tier-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1.1rem;
}
.tier {
  position: relative;
  grid-column: span 2;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-surface);
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
  display: flex; flex-direction: column;
}
.tier:hover { transform: translateY(-6px); border-color: var(--color-gold); box-shadow: var(--shadow-card); }
.tier:nth-child(4), .tier:nth-child(5) { grid-column: span 3; }
.tier-media { aspect-ratio: 16 / 10; overflow: hidden; }
.tier-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.tier:hover .tier-media img { transform: scale(1.06); }
.tier-body { padding: 1.35rem 1.4rem 1.5rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.tier-price { font-family: var(--font-display); font-size: 1.45rem; color: var(--color-gold-high); }
.tier-price span { font-size: .8rem; color: var(--color-faint); font-family: var(--font-body); margin-left: .25rem; }
.tier-name { font-size: 1.12rem; }
.tier-desc { color: var(--color-muted); font-size: .9rem; flex: 1; }
.tier-more { margin-top: .6rem; font-size: .9rem; color: var(--color-gold); display: inline-flex; gap: .35rem; }

/* ---------------- 服务板块 ---------------- */

.svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.svc {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 2.25rem 2rem;
  background: linear-gradient(180deg, var(--color-surface-2), var(--color-surface));
  transition: border-color .25s ease, transform .25s ease;
}
.svc:hover { border-color: var(--color-gold); transform: translateY(-4px); }
.svc .ico {
  width: 3rem; height: 3rem; border-radius: var(--radius-sm);
  display: grid; place-items: center;
  border: 1px solid var(--color-gold);
  color: var(--color-gold-high);
  margin-bottom: 1.35rem;
}
.svc .ico svg { width: 1.5rem; height: 1.5rem; }
.svc h3 { font-size: 1.2rem; margin-bottom: .6rem; }
.svc p { color: var(--color-muted); font-size: .94rem; }

/* ---------------- 案例图廊 ---------------- */

.case-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 1.25rem; }
.case-link { text-decoration: none; color: inherit; display: block; border-radius: var(--radius-md); overflow: hidden; }
.case-link .case { min-height: auto; border: none; }
.case {
  position: relative; border-radius: var(--radius-md); overflow: hidden;
  min-height: 20rem; display: flex; align-items: flex-end;
  border: 1px solid var(--color-border);
}
.case--big { grid-column: span 7; min-height: 30rem; }
.case--std { grid-column: span 5; }
.case img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.case:hover img { transform: scale(1.05); }
.case::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(10,11,14,.9));
}
.case-cap { position: relative; z-index: 2; padding: 1.75rem; }
.case-cap .tag { color: var(--color-gold-high); font-size: .8rem; letter-spacing: .18em; }
.case-cap h3 { font-size: 1.3rem; margin-top: .4rem; }
.case-cap p { color: #cfcabf; font-size: .9rem; margin-top: .4rem; }
.case-more { margin-top: 2.75rem; text-align: center; }

/* ---------------- 资质 ---------------- */

.cert-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
.cert {
  text-align: center;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 2.25rem 1.5rem;
  background: var(--color-surface);
}
.cert .mark {
  font-family: var(--font-display);
  font-size: 1.7rem;
  color: var(--color-gold-high);
  letter-spacing: .05em;
  margin-bottom: .5rem;
}
.cert h3 { font-size: 1.05rem; margin-bottom: .6rem; }
.cert p { color: var(--color-muted); font-size: .85rem; text-align: left; }

/* ---------------- 流程 ---------------- */

.flow { display: grid; grid-template-columns: repeat(7, 1fr); gap: .9rem; counter-reset: step; }
.flow-step { position: relative; padding-top: 2.5rem; }
.flow-step::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  position: absolute; top: 0; left: 0;
  font-family: var(--font-display);
  color: var(--color-gold);
  font-size: 1.15rem;
  border-top: 2px solid var(--color-gold);
  padding-top: .75rem;
  width: 100%;
}
.flow-step h4 { font-size: .98rem; font-family: var(--font-body); font-weight: 600; }
.flow-step p { color: var(--color-faint); font-size: .82rem; margin-top: .25rem; }

/* ---------------- 预约表单 ---------------- */

.lead { display: grid; grid-template-columns: 5fr 6fr; gap: 0; border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-float); }
.lead-media { position: relative; min-height: 100%; }
.lead-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lead-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(12,13,16,.35), rgba(12,13,16,.82)); }
.lead-media-inner { position: relative; z-index: 2; padding: 2.75rem; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; }
.lead-media-inner h1, .lead-media-inner h2 { font-size: 1.9rem; margin: 0; }
.lead-media-inner p { color: #d6d2c8; margin-top: .8rem; font-size: .96rem; }
.lead-phone { margin-top: 1.5rem; font-family: var(--font-display); font-size: 1.5rem; color: var(--color-gold-high); }

.lead-form { background: var(--color-surface); padding: 2.75rem; }
.lead-form form { display: grid; gap: 1.15rem; }
.field { display: grid; gap: .45rem; }
.field label { font-size: .88rem; color: var(--color-muted); letter-spacing: .04em; }
.field label b { color: var(--color-gold); font-weight: 600; }
.field input, .field select, .field textarea {
  width: 100%;
  background: var(--color-bg);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  padding: .8rem .95rem;
  color: var(--color-text);
  transition: border-color .2s ease;
}
.field select option { background: var(--color-surface-2); }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--color-gold); outline: none; }
.field textarea { resize: vertical; min-height: 5.5rem; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.15rem; }
.form-note { font-size: .78rem; color: var(--color-faint); }
.form-success {
  display: none; text-align: center; padding: 3rem 1rem;
}
.form-success .tick {
  width: 4rem; height: 4rem; margin: 0 auto 1.25rem;
  border-radius: 50%; border: 2px solid var(--color-gold);
  display: grid; place-items: center; color: var(--color-gold-high); font-size: 1.8rem;
}
.form-success h3 { font-size: 1.4rem; margin-bottom: .6rem; }
.form-success p { color: var(--color-muted); }
.lead-form[data-state="complete"] form { display: none; }
.lead-form[data-state="complete"] .form-success { display: block; }

/* ---------------- 关于 ---------------- */

.about { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2.5rem, 5vw, 4.5rem); align-items: center; }
.about-media { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--color-border); }
.about-media img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.about-text h2 { font-size: clamp(1.7rem,3vw,2.4rem); margin-bottom: 1.25rem; }
.about-text p { color: var(--color-muted); margin-bottom: 1rem; }
.about-points { margin-top: 1.75rem; display: grid; gap: 1rem; }
.about-point { display: flex; gap: 1rem; align-items: flex-start; }
.about-point .n { font-family: var(--font-display); color: var(--color-gold); font-size: 1.2rem; line-height: 1.4; }
.about-point h4 { font-size: 1rem; font-family: var(--font-body); font-weight: 600; }
.about-point p { font-size: .88rem; margin: 0; }

/* ---------------- 页脚 ---------------- */

.site-footer { background: #08090b; border-top: 1px solid var(--color-border); padding: 4rem 0 2rem; margin-top: 0; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2.5rem; }
.footer-brand .zh { font-family: var(--font-display); font-size: 1.4rem; letter-spacing: .18em; }
.footer-brand .en { font-size: .66rem; letter-spacing: .3em; color: var(--color-gold); margin-top: .25rem; }
.footer-brand p { color: var(--color-muted); font-size: .9rem; margin-top: 1.25rem; max-width: 26rem; }
.footer-col h5 { font-size: .9rem; letter-spacing: .12em; color: var(--color-text); margin-bottom: 1.1rem; }
.footer-col a, .footer-col p { display: block; color: var(--color-muted); font-size: .9rem; margin-bottom: .7rem; }
.footer-col a:hover { color: var(--color-gold-high); }
.footer-bottom { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--color-border); display: flex; flex-wrap: wrap; gap: .75rem 2rem; justify-content: space-between; color: var(--color-muted); font-size: .8rem; }

/* ---------------- 联系方式卡片 ---------------- */

.contact-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin-bottom: 3rem;
}
.contact-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 2rem 1.5rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  transition: border-color .25s ease, transform .25s ease;
  color: var(--color-text);
}
.contact-card:hover {
  border-color: var(--color-gold);
  transform: translateY(-3px);
}
.contact-icon {
  width: 2.8rem; height: 2.8rem;
  display: grid; place-items: center;
  border: 1px solid var(--color-gold);
  border-radius: var(--radius-sm);
  color: var(--color-gold);
  margin-bottom: 1rem;
}
.contact-icon svg { width: 1.4rem; height: 1.4rem; }
.contact-card h3 { font-family: var(--font-body); font-size: 1rem; font-weight: 600; margin-bottom: .5rem; }
.contact-detail { font-size: 1.05rem; color: var(--color-text); font-weight: 500; }
.contact-sub { font-size: .85rem; color: var(--color-faint); margin-top: .2rem; }

.lead-form-wrapper {
  max-width: 40rem;
  margin: 0 auto;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 2.5rem;
}
.lead-form-wrapper > h3 {
  font-family: var(--font-display);
  font-size: 1.35rem;
  color: var(--color-text);
  text-align: center;
  margin-bottom: 1.75rem;
}

@media (max-width: 860px) {
  .contact-cards { grid-template-columns: 1fr; }
}

/* ---------------- FAQ 折叠 ---------------- */

.faq-list { display: grid; gap: 1rem; max-width: 52rem; }
.faq {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  transition: border-color .2s ease;
}
.faq[open] { border-color: var(--color-gold); }
.faq summary {
  cursor: pointer;
  padding: 1.4rem 1.75rem;
  font-size: 1.05rem;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  font-family: var(--font-display);
  color: var(--color-gold);
  font-size: 1.4rem;
  transition: transform .25s ease;
}
.faq[open] summary::after { content: "−"; }
.faq-body {
  padding: 0 1.75rem 1.5rem;
  color: var(--color-muted);
  font-size: .95rem;
}
.faq-body p { margin-bottom: .75rem; }
.faq-body ul { margin: .5rem 0 .75rem; padding-left: 1.25rem; }
.faq-body li { margin-bottom: .4rem; }

/* ---------------- 响应式 ---------------- */

@media (max-width: 1000px) {
  .tier { grid-column: span 3; }
  .tier:nth-child(4), .tier:nth-child(5) { grid-column: span 3; }
  .cert-strip { grid-template-columns: repeat(2, 1fr); }
  .flow { grid-template-columns: repeat(4, 1fr); row-gap: 2rem; }
  .case--big, .case--std { grid-column: span 12; min-height: 24rem; }
}

@media (max-width: 860px) {
  .nav-links {
    position: fixed;
    top: var(--header-h); right: 0;
    width: min(78vw, 20rem);
    height: calc(100dvh - var(--header-h));
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    background: rgba(14,15,19,.98);
    backdrop-filter: blur(18px);
    border-left: 1px solid var(--color-border);
    padding: 1.5rem 1.75rem;
    transform: translateX(110%);
    transition: transform .3s ease;
  }
  .nav-links.open { transform: translateX(0); }
  .nav-links li { width: 100%; }
  .nav-links a { display: block; padding: .9rem 0; font-size: 1rem; border-bottom: 1px solid var(--color-border); }
  .nav-links .nav-cta-item { padding-top: 1.5rem; border-bottom: none; }
  .nav-links .nav-cta { width: 100%; }
  .nav-links a.nav-cta { color: var(--color-on-gold); font-weight: 700; border-bottom: none; text-align: center; }
  .nav-toggle { display: flex; }

  .svc-grid { grid-template-columns: 1fr; }
  .lead { grid-template-columns: 1fr; }
  .lead-media { min-height: 16rem; }
  .about { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 2rem; }
}

@media (max-width: 600px) {
  .tier, .tier:nth-child(4), .tier:nth-child(5) { grid-column: span 6; }
  .cert-strip { grid-template-columns: 1fr; }
  .flow { grid-template-columns: repeat(2, 1fr); }
  .field-row { grid-template-columns: 1fr; }
  .lead-form, .lead-media-inner { padding: 1.75rem; }
  .hero-inner { padding-top: 8rem; }
}

/* ---------------- 文章卡片（知识专栏 / 内链推荐） ---------------- */

.post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.post-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-surface);
  display: flex;
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.post-card:hover { transform: translateY(-5px); border-color: var(--color-gold); box-shadow: var(--shadow-card); }
.post-card > a { display: flex; flex-direction: column; height: 100%; color: inherit; }
.post-media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; }
.post-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.post-card:hover .post-media img { transform: scale(1.06); }
.post-tag {
  position: absolute; top: .85rem; left: .85rem;
  font-size: .72rem; letter-spacing: .08em;
  color: var(--color-gold-high);
  background: rgba(12, 13, 16, .72);
  border: 1px solid rgba(201, 163, 92, .65);
  padding: .25rem .7rem;
  border-radius: 999px;
  backdrop-filter: blur(6px);
}
.post-body { padding: 1.35rem 1.45rem 1.45rem; display: flex; flex-direction: column; gap: .6rem; flex: 1; }
.post-body h3 { font-size: 1.06rem; line-height: 1.5; font-family: var(--font-body); font-weight: 600; }
.post-body p { color: var(--color-muted); font-size: .9rem; line-height: 1.65; flex: 1; }
.post-meta {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: .4rem; padding-top: .85rem;
  border-top: 1px solid var(--color-border);
  font-size: .8rem; color: var(--color-faint);
}
.post-more { color: var(--color-gold); display: inline-flex; gap: .3rem; align-items: center; transition: gap .2s ease; }
.post-card:hover .post-more { gap: .55rem; }

/* ---------------- 延伸阅读卡片 ---------------- */

.related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.related-card {
  display: block;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 1.6rem 1.65rem;
  background: var(--color-surface);
  height: 100%;
  transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.related-card:hover { border-color: var(--color-gold); transform: translateY(-4px); box-shadow: var(--shadow-card); }
.rc-tag { display: inline-block; font-size: .74rem; letter-spacing: .14em; color: var(--color-gold); text-transform: uppercase; }
.related-card h3 { font-family: var(--font-body); font-weight: 600; font-size: 1.04rem; margin: .55rem 0 .5rem; line-height: 1.5; }
.related-card p { color: var(--color-muted); font-size: .88rem; line-height: 1.65; }
.rc-more { display: inline-flex; gap: .3rem; align-items: center; margin-top: .9rem; font-size: .86rem; color: var(--color-gold); transition: gap .2s ease; }
.related-card:hover .rc-more { gap: .55rem; }

/* ---------------- 信任细节条 ---------------- */

.trust-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  padding: 1.5rem 1.6rem;
}
.trust-item { display: flex; gap: .9rem; align-items: flex-start; }
.trust-item .t-ico {
  flex-shrink: 0;
  width: 2.5rem; height: 2.5rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-gold);
  color: var(--color-gold-high);
  display: grid; place-items: center;
}
.trust-item .t-ico svg { width: 1.25rem; height: 1.25rem; }
.trust-item h4 { font-family: var(--font-body); font-size: .95rem; font-weight: 600; }
.trust-item p { font-size: .82rem; color: var(--color-faint); margin-top: .15rem; line-height: 1.5; }

/* ---------------- 金色内链横幅 ---------------- */

.link-banner {
  display: flex; flex-wrap: wrap; gap: 1rem 2rem;
  align-items: center; justify-content: space-between;
  border: 1px solid rgba(201, 163, 92, .45);
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, rgba(201, 163, 92, .12), rgba(201, 163, 92, .03) 55%, transparent);
  padding: 1.6rem 2rem;
}
.link-banner h3 { font-size: 1.15rem; font-family: var(--font-body); font-weight: 600; }
.link-banner p { color: var(--color-muted); font-size: .9rem; margin-top: .3rem; }

@media (max-width: 1000px) {
  .post-grid, .related-grid { grid-template-columns: repeat(2, 1fr); }
  .trust-strip { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .post-grid, .related-grid { grid-template-columns: 1fr; }
  .trust-strip { grid-template-columns: 1fr; }
  .link-banner { padding: 1.4rem 1.25rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ===== 本次新增：首页精选案例 / 案例网格 / 多风格 ===== */
.feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
.feat-card{position:relative;border-radius:var(--radius-md);overflow:hidden;border:1px solid var(--color-border);aspect-ratio:4/3;display:block}
.feat-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.feat-card:hover img{transform:scale(1.06)}
.feat-card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 42%,rgba(8,9,11,.88))}
.feat-card .ov{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:1.1rem 1.2rem}
.feat-card .ov span{display:block;font-family:var(--font-display);font-size:1.08rem;letter-spacing:.06em;color:#fff;text-shadow:0 2px 14px rgba(0,0,0,.7)}

.ov-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.ov-card{position:relative;border-radius:var(--radius-md);overflow:hidden;border:1px solid var(--color-border);aspect-ratio:3/2;display:block;transition:transform .25s ease,border-color .25s ease}
.ov-card:hover{transform:translateY(-5px);border-color:var(--color-gold)}
.ov-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.ov-card:hover img{transform:scale(1.06)}
.ov-card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(8,9,11,.9))}
.ov-card .bar{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:0 .9rem .95rem}
.ov-card .bar b{display:block;font-family:var(--font-display);font-size:1.15rem;letter-spacing:.08em;color:#fff}
.ov-card .bar i{display:block;margin-top:.2rem;height:3px;width:2.4rem;background:var(--color-gold);font-style:normal}

.gallery{columns:2;column-gap:1.25rem}
.gallery a{display:block;border-radius:var(--radius-md);overflow:hidden;border:1px solid var(--color-border);margin:0 0 1.25rem;break-inside:avoid}
.gallery img{width:100%;height:auto;display:block;transition:transform .5s ease}
.gallery a:hover img{transform:scale(1.05)}

.page-hero{position:relative;min-height:46vh;display:flex;align-items:flex-end;overflow:hidden;border-bottom:1px solid var(--color-border)}
.page-hero .ph-media{position:absolute;inset:0}
.page-hero .ph-media img{width:100%;height:100%;object-fit:cover}
.page-hero .ph-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(12,13,16,.7),rgba(12,13,16,.9))}
.page-hero .ph-inner{position:relative;z-index:2;width:100%;padding:7rem 0 2.5rem}
.page-hero h1{font-size:clamp(1.9rem,4vw,3rem)}
.page-hero p{color:var(--color-muted);margin-top:.7rem}

.crumb{font-size:.85rem;color:var(--color-faint);margin-bottom:1.6rem}
.crumb a{color:var(--color-muted)}
.crumb a:hover{color:var(--color-gold-high)}

@media(max-width:1000px){.feat-grid,.ov-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.feat-grid,.ov-grid{grid-template-columns:1fr}.gallery{columns:1}}

/* ===== HERO 居中版 ===== */
.hero--center .hero-inner{text-align:center}
.hero--center .wrap{display:flex;flex-direction:column;align-items:center}
.hero--center .hero-badge{justify-content:center}
.hero--center h1{max-width:16ch;margin-inline:auto}
.hero--center .hero-sub{margin-inline:auto}
.hero--center .hero-actions{justify-content:center}

/* ===== 莅临未来派 ===== */
.visit-card{border:1px solid rgba(201,163,92,.4);border-radius:var(--radius-lg);background:linear-gradient(135deg,rgba(201,163,92,.1),rgba(21,23,28,.6) 60%);padding:clamp(2.2rem,5vw,4rem);max-width:60rem;margin-inline:auto}
.visit-text .eyebrow{justify-content:flex-start}
.visit-text h2{font-size:clamp(1.8rem,3.4vw,2.6rem)}
.visit-en{color:var(--color-gold);letter-spacing:.32em;font-size:.85rem;margin:.4rem 0 1.8rem}
.visit-info{display:grid;gap:1.1rem;margin-bottom:2rem}
.vi{display:flex;gap:1.4rem;align-items:baseline;flex-wrap:wrap}
.vi .k{font-size:.85rem;color:var(--color-faint);letter-spacing:.12em;min-width:4.5rem}
.vi .v{font-family:var(--font-display);font-size:1.3rem;color:var(--color-gold-high)}

/* ===== 权威认证卡片 ===== */
.cert-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem}
.cert-card{display:flex;flex-direction:column;border:1px solid var(--color-border);border-radius:var(--radius-md);background:linear-gradient(180deg,var(--color-surface-2),var(--color-surface));overflow:hidden;transition:border-color .25s ease,transform .25s ease}
.cert-card:hover{border-color:var(--color-gold);transform:translateY(-5px)}
.cc-logo{display:grid;place-items:center;height:9.5rem;padding:1.4rem 1.2rem;border-bottom:1px solid var(--color-border);background:rgba(255,255,255,.03)}
.cc-logo img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;filter:grayscale(.1)}
.cc-body{padding:1.3rem 1.35rem 1.5rem;display:flex;flex-direction:column;gap:.45rem}
.cc-body h3{font-size:1.08rem;letter-spacing:.04em}
.cc-en{font-size:.72rem;letter-spacing:.08em;color:var(--color-gold);text-transform:uppercase}
.cc-body p{font-size:.83rem;color:var(--color-muted);line-height:1.65}
@media(max-width:1000px){.cert-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.cert-grid{grid-template-columns:1fr}}

/* ===== 风格结语（融入版） ===== */
.style-note{margin-top:2.6rem;text-align:center;display:flex;align-items:center;justify-content:center;gap:1.1rem;color:var(--color-muted);font-family:var(--font-display);font-size:1.02rem;letter-spacing:.14em}
.style-note::before,.style-note::after{content:"";height:1px;width:clamp(2.5rem,7vw,5.5rem);background:linear-gradient(90deg,transparent,var(--color-gold));}
.style-note::after{background:linear-gradient(90deg,var(--color-gold),transparent)}

/* ===== 价位参考（3×2，非标价） ===== */
.tier-grid{grid-template-columns:repeat(6,1fr)}
.tier{grid-column:span 2 !important}
.tier:nth-child(4),.tier:nth-child(5){grid-column:span 2 !important}
.tier-body{align-items:flex-start;gap:.35rem}
.tier-price{font-size:1.05rem;color:var(--color-gold);letter-spacing:.08em}
.tier-price::before{content:"参考 ";font-size:.7rem;color:var(--color-faint);font-family:var(--font-body);letter-spacing:.1em}
.tier-name{font-family:var(--font-display);font-size:1.22rem;color:var(--color-text)}
.tier-tagline{font-size:.82rem;color:var(--color-muted);margin-top:.15rem}
.tier-more{color:var(--color-faint);font-size:.85rem;letter-spacing:.06em}
@media(max-width:900px){.tier{grid-column:span 3 !important}.tier:nth-child(4),.tier:nth-child(5){grid-column:span 3 !important}}
@media(max-width:560px){.tier,.tier:nth-child(4),.tier:nth-child(5){grid-column:span 6 !important}}

/* ===== 服务流程（图标卡） ===== */
.flow.flow--6{grid-template-columns:repeat(6,1fr);gap:1.1rem;counter-reset:none}
.flow.flow--6 .flow-step{padding-top:0;border:1px solid var(--color-border);border-radius:var(--radius-md);padding:1.6rem 1.35rem 1.5rem;background:linear-gradient(180deg,var(--color-surface-2),var(--color-surface));transition:border-color .25s ease,transform .25s ease}
.flow.flow--6 .flow-step:hover{border-color:var(--color-gold);transform:translateY(-5px)}
.flow.flow--6 .flow-step::before{display:none}
.flow-ico{width:3rem;height:3rem;border-radius:50%;display:grid;place-items:center;border:1px solid var(--color-gold);color:var(--color-gold-high);margin-bottom:1.05rem;position:relative;background:rgba(201,163,92,.08)}
.flow-ico svg{width:1.45rem;height:1.45rem}
.flow-ico .flow-badge{position:absolute;top:-.4rem;right:-.4rem;min-width:1.35rem;height:1.35rem;padding:0 .3rem;border-radius:999px;background:var(--color-gold);color:#1a1408;font-size:.72rem;font-weight:700;display:grid;place-items:center;font-family:var(--font-display)}
.flow.flow--6 h4{font-size:1.04rem;font-weight:600;letter-spacing:.03em}
.flow.flow--6 p{color:var(--color-muted);font-size:.85rem;line-height:1.6;margin-top:.45rem}
@media(max-width:1000px){.flow.flow--6{grid-template-columns:repeat(3,1fr)}}
@media(max-width:600px){.flow.flow--6{grid-template-columns:repeat(2,1fr)}}
@media(max-width:420px){.flow.flow--6{grid-template-columns:1fr}}

/* ===== 价位参考详情页 ===== */
.pkg-block{padding:3rem 0;border-bottom:1px solid var(--color-border)}
.pkg-block:last-child{border-bottom:none}
.pkg-kicker{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin-bottom:1.6rem}
.pkg-kicker .idx{font-family:var(--font-display);font-size:1.1rem;color:var(--color-gold);letter-spacing:.1em}
.pkg-kicker h3{font-size:clamp(1.5rem,3vw,2.1rem)}
.pkg-kicker .lvl{margin-left:auto;border:1px solid var(--color-gold);color:var(--color-gold-high);padding:.4rem 1.1rem;border-radius:999px;font-size:.9rem;letter-spacing:.08em}
.pkg-lead{color:var(--color-muted);font-size:1.02rem;line-height:1.8;max-width:52rem;margin-bottom:2rem}
.pkg-shotgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem}
.pkg-shotgrid a{display:block;border-radius:var(--radius-md);overflow:hidden;border:1px solid var(--color-border);aspect-ratio:3/2}
.pkg-shotgrid img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.pkg-shotgrid a:hover img{transform:scale(1.06)}
@media(max-width:900px){.pkg-shotgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.pkg-shotgrid{grid-template-columns:1fr}}

/* ===== Services ===== */
.services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:2rem}
.service-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:2rem 1.5rem;text-align:center;transition:all .25s ease}
.service-card:hover{border-color:var(--color-gold);transform:translateY(-4px)}
.service-icon{width:48px;height:48px;margin:0 auto 1.2rem;color:var(--color-gold-high)}
.service-icon svg{width:100%;height:100%;stroke-width:1.5}
.service-card h3{font-size:1.25rem;margin-bottom:.6rem;color:var(--color-text)}
.service-sub{font-size:.92rem;color:var(--color-muted);line-height:1.6;margin-bottom:1rem}
.service-link{color:var(--color-gold);font-size:.9rem;text-decoration:none;transition:color .2s}
.service-link:hover{color:var(--color-gold-high)}
@media(max-width:900px){.services-grid{grid-template-columns:1fr}}
/* ===== Certs (optimized) ===== */
.cert-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem;margin-top:2rem}
.cert-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:1.5rem;display:flex;flex-direction:column;align-items:center;text-align:center;transition:all .25s ease}
.cert-card:hover{border-color:var(--color-gold);transform:translateY(-2px)}
.cc-logo{width:100%;max-width:140px;height:70px;margin-bottom:1rem;display:flex;align-items:center;justify-content:center;background:#fff;border-radius:var(--radius-sm);padding:.6rem;overflow:hidden}
.cc-logo img{max-width:100%;max-height:100%;object-fit:contain;width:auto;height:auto}
.cert-card h3{font-size:1.1rem;color:var(--color-text);margin-bottom:.3rem}
.cc-en{font-size:.78rem;color:var(--color-gold);letter-spacing:.04em;margin-bottom:.6rem}
.cert-card p{font-size:.88rem;color:var(--color-muted);line-height:1.55}
@media(max-width:1000px){.cert-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.cert-grid{grid-template-columns:1fr}}

/* ---------------- 悬浮联系按钮（全站统一） ---------------- */
.fp-fab{position:fixed;right:24px;bottom:24px;z-index:9999;display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.fp-fab-btn{width:56px;height:56px;border-radius:50%;background:linear-gradient(135deg,var(--color-gold-high),var(--color-gold) 55%,var(--color-gold-deep));border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 20px -4px rgba(201,163,92,.55);transition:transform .2s}
.fp-fab-btn:hover{transform:scale(1.08)}
.fp-fab-btn svg{width:24px;height:24px;fill:var(--color-on-gold)}
.fp-fab-panel{background:rgba(12,13,16,.97);border:1px solid var(--color-gold);border-radius:12px;padding:16px;min-width:220px;display:none;backdrop-filter:blur(8px)}
.fp-fab-panel.open{display:block}
.fp-fab-panel a{display:block;color:#e9e6df;text-decoration:none;padding:8px 0;font-size:15px;border-bottom:1px solid rgba(201,163,92,.15)}
.fp-fab-panel a:last-child{border-bottom:none}
.fp-fab-panel a:hover{color:var(--color-gold-high)}
.fp-fab-panel .label{font-size:12px;color:#888;margin-bottom:4px}
@media(max-width:640px){.fp-fab{right:12px;bottom:12px}.fp-fab-btn{width:48px;height:48px}.fp-fab-panel{min-width:180px}}

/* ============================================================
   2026-09-23 新增：hero分行/联系方式/导航电话/静态电话条
   ============================================================ */
.hero-inner h1 .hl-line { display: block; }
.hero-contact {
  margin-top: 1.1rem;
  font-size: 1.08rem;
  color: var(--color-text);
  letter-spacing: 0.03em;
}
.hero-contact a { color: var(--color-gold-high); font-weight: 700; }
.hero-contact a:hover { text-decoration: underline; }
.hero-nation {
  margin-top: 0.4rem;
  font-size: 0.9rem;
  color: var(--color-muted);
  letter-spacing: 0.04em;
}

/* 导航栏显著400电话 */
.nav-phone {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: linear-gradient(135deg, var(--color-gold-high), var(--color-gold) 55%, var(--color-gold-deep));
  color: var(--color-on-gold) !important;
  font-weight: 700;
  font-size: 0.98rem;
  letter-spacing: 0.02em;
  padding: 0.55rem 1.15rem;
  border-radius: 50px;
  box-shadow: 0 6px 18px -6px rgba(201, 163, 92, 0.6);
  white-space: nowrap;
}
.nav-phone:hover { transform: translateY(-1px); }

/* 右下角静态显著电话条 */
.static-phone {
  position: fixed;
  right: 1.5rem;
  bottom: 1.75rem;
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  background: linear-gradient(135deg, var(--color-gold-high), var(--color-gold) 55%, var(--color-gold-deep));
  color: var(--color-on-gold);
  padding: 0.7rem 1.35rem;
  border-radius: 50px;
  box-shadow: 0 10px 30px -8px rgba(201, 163, 92, 0.7);
  font-weight: 700;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.static-phone:hover { transform: translateY(-3px); box-shadow: 0 14px 38px -8px rgba(201,163,92,0.85); }
.static-phone svg { width: 20px; height: 20px; flex-shrink: 0; }
.static-phone .sp-label { font-size: 0.78rem; opacity: 0.85; }
.static-phone .sp-num { font-size: 1.12rem; letter-spacing: 0.03em; }
@media (max-width: 560px) {
  .static-phone { right: 0.85rem; bottom: 1rem; padding: 0.55rem 0.95rem; gap: 0.4rem; }
  .static-phone .sp-label { display: none; }
  .static-phone .sp-num { font-size: 1rem; }
}
