/* ============================================================
   Maicht Premium Layer v1 — 2026-09-25
   纯视觉升级层：只改呈现，不改任何内容。
   覆盖 token + 字体 + 按钮/卡片/深色区质感 + 微交互。
   ============================================================ */

/* ---------- 自托管字体（子集，只含站点用字） ---------- */
@font-face {
  font-family: 'Maicht Serif';
  src: url('/assets/fonts/maicht-serif-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Maicht Serif';
  src: url('/assets/fonts/maicht-serif-700.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Maicht Grotesk';
  src: url('/assets/fonts/maicht-grotesk-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}

/* ---------- 设计 token 收敛：墨蓝 + 哑光金 + 发丝线 ---------- */
:root {
  --color-primary: #0a1628;
  --color-primary-light: #17294a;
  --color-secondary: #2f56c9;
  --color-secondary-hover: #24439f;
  --color-accent: #d3a24a;
  --color-accent-hover: #b8862f;
  --color-ink: #1c2a40;
  --color-muted: #5b6a80;
  --color-border: #e6eaf1;
  --color-surface: #f5f7fa;

  --pm-serif: 'Maicht Serif', 'Noto Serif SC', 'Source Han Serif SC', 'Songti SC', 'STSong', serif;
  --pm-grotesk: 'Maicht Grotesk', 'Space Grotesk', ui-monospace, 'SFMono-Regular', monospace;
  --pm-gold: linear-gradient(135deg, #e8c67c 0%, #cf9c33 55%, #b8862f 100%);
  --pm-ink-grad: linear-gradient(180deg, #0a1628 0%, #2b4569 130%);
  --pm-blue-grad: linear-gradient(165deg, #3d66d4 0%, #24439f 100%);
  --pm-hairline: rgba(10, 22, 40, 0.08);
  --pm-shadow-1: 0 1px 2px rgba(10, 22, 40, 0.05), 0 1px 1px rgba(10, 22, 40, 0.03);
  --pm-shadow-2: 0 22px 45px -26px rgba(10, 22, 40, 0.28), 0 3px 10px rgba(10, 22, 40, 0.05);
  --pm-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------- 全局基础质感 ---------- */
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
::selection { background: rgba(211, 162, 74, 0.3); color: #0a1628; }
:focus-visible {
  outline: 2px solid rgba(47, 86, 201, 0.55);
  outline-offset: 3px;
  border-radius: 6px;
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #f5f7fa; }
::-webkit-scrollbar-thumb {
  background: rgba(10, 22, 40, 0.18);
  border-radius: 999px;
  border: 3px solid #f5f7fa;
}
::-webkit-scrollbar-thumb:hover { background: rgba(10, 22, 40, 0.3); }

/* ---------- 字体层级：衬线显示体做标题 ---------- */
h1, h2, h3, h4 { font-family: var(--pm-serif) !important; }
h1, h2 { font-weight: 700 !important; }
h2.tracking-wide, h3.tracking-wide { letter-spacing: 0.03em; }
nav a.flex span.font-bold { font-family: var(--pm-serif); letter-spacing: 0.04em; }

/* ---------- eyebrow 小标签：发丝线 + 大字距 ---------- */
span.tracking-widest.uppercase {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  letter-spacing: 0.3em;
  font-size: 0.72rem;
  font-weight: 600;
}
span.tracking-widest.uppercase::before,
span.tracking-widest.uppercase::after {
  content: '';
  width: 26px;
  height: 1px;
  background: currentColor;
  opacity: 0.4;
}
#cta span.tracking-widest.uppercase::before { display: none; }

/* ---------- 首屏 hero ---------- */
section:first-of-type {
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='0.028'/></svg>"),
    radial-gradient(900px 480px at 82% 8%, rgba(211, 162, 74, 0.07), transparent 60%),
    radial-gradient(1000px 560px at 8% 30%, rgba(47, 86, 201, 0.06), transparent 62%),
    linear-gradient(180deg, #fcfdff 0%, #f5f7fa 100%);
}
section:first-of-type h1,
section:first-of-type h1 * {
  background-image: var(--pm-ink-grad) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  letter-spacing: 0.005em;
}
section:first-of-type h1 { line-height: 1.18 !important; }
section:first-of-type h1 + p {
  max-width: 34rem;
  margin-top: 1.9rem;
  color: #46556c;
}
section:first-of-type h1 + p + div { margin-top: 2.7rem; }

/* hero 徽章 pill */
section:first-of-type .inline-flex.rounded-full {
  border: 1px solid rgba(47, 86, 201, 0.18);
  background: rgba(47, 86, 201, 0.07);
  letter-spacing: 0.08em;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

/* hero 数据栏 */
section:first-of-type .font-mono {
  font-family: var(--pm-grotesk);
  font-weight: 600;
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
}
section:first-of-type .w-px.h-10 {
  background: linear-gradient(180deg, transparent, rgba(28, 42, 64, 0.28), transparent);
}
section:first-of-type .text-xs.text-muted { letter-spacing: 0.06em; }

/* ---------- 按钮：统一设计语言 ---------- */
/* 主按钮（导航 + 首屏）：深蓝渐变 + 上浮 */
a.bg-secondary {
  background-image: var(--pm-blue-grad) !important;
  border-radius: 12px;
  box-shadow: 0 10px 22px -12px rgba(36, 67, 159, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.28);
  transition: transform 0.35s var(--pm-ease), box-shadow 0.35s var(--pm-ease), filter 0.35s;
  letter-spacing: 0.02em;
}
a.bg-secondary:hover {
  background-image: var(--pm-blue-grad) !important;
  background-color: transparent;
  filter: brightness(1.07);
  transform: translateY(-2px) scale(1.015);
  box-shadow: 0 18px 34px -16px rgba(36, 67, 159, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.34);
}
a.bg-secondary:active { transform: translateY(0) scale(0.995); }

/* 次按钮（首屏 联系我们）：发丝边 */
a.border-2.border-border {
  border: 1px solid rgba(28, 42, 64, 0.16) !important;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.6);
  letter-spacing: 0.02em;
  transition: transform 0.35s var(--pm-ease), border-color 0.35s, background 0.35s, box-shadow 0.35s;
}
a.border-2.border-border:hover {
  border-color: rgba(28, 42, 64, 0.42) !important;
  background: rgba(28, 42, 64, 0.035);
  color: var(--color-primary) !important;
  transform: translateY(-2px) scale(1.015);
  box-shadow: 0 14px 28px -18px rgba(10, 22, 40, 0.35);
}

/* CTA 金色按钮 */
a.bg-accent {
  background-image: var(--pm-gold) !important;
  border-radius: 12px;
  color: #241a06 !important;
  box-shadow: 0 12px 26px -14px rgba(184, 134, 47, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.4);
  transition: transform 0.35s var(--pm-ease), box-shadow 0.35s var(--pm-ease), filter 0.35s;
  letter-spacing: 0.03em;
}
a.bg-accent:hover {
  background-image: var(--pm-gold) !important;
  filter: brightness(1.05);
  transform: translateY(-2px) scale(1.015);
  box-shadow: 0 20px 38px -16px rgba(184, 134, 47, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.45);
}
a.bg-accent:active { transform: translateY(0) scale(0.995); }

/* ---------- 导航：玻璃态 + 发丝底线 ---------- */
nav.fixed {
  background: rgba(255, 255, 255, 0.72) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.7);
  backdrop-filter: blur(16px) saturate(1.7);
  border-bottom: 1px solid rgba(10, 22, 40, 0.06);
}
nav a.relative::after {
  content: '';
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--pm-gold);
  transition: right 0.4s var(--pm-ease);
}
nav a.relative:hover::after { right: 0; }

/* ---------- 关于我们 ---------- */
#about .rounded-xl.bg-surface.border {
  background: #fff;
  border-color: var(--pm-hairline);
  border-radius: 12px;
  box-shadow: var(--pm-shadow-1);
  letter-spacing: 0.12em;
  transition: transform 0.35s var(--pm-ease), border-color 0.35s, box-shadow 0.35s;
}
#about .rounded-xl.bg-surface.border:hover {
  transform: translateY(-3px);
  border-color: rgba(47, 86, 201, 0.35);
  box-shadow: var(--pm-shadow-2);
}
#about div[class*='rounded-xl'][class*='bg-secondary'] {
  box-shadow: inset 0 0 0 1px rgba(47, 86, 201, 0.12), 0 8px 18px -14px rgba(47, 86, 201, 0.5);
}

/* ---------- 核心能力卡片 ---------- */
#services .group {
  border-color: var(--pm-hairline);
  border-radius: 20px;
  background: linear-gradient(180deg, #ffffff 0%, #fcfdfe 100%);
  box-shadow: var(--pm-shadow-1);
  overflow: hidden;
  transition: transform 0.5s var(--pm-ease), box-shadow 0.5s var(--pm-ease), border-color 0.5s;
}
#services .group::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--pm-gold);
  opacity: 0;
  transition: opacity 0.5s var(--pm-ease);
}
#services .group:hover {
  transform: translateY(-6px);
  border-color: rgba(47, 86, 201, 0.3);
  box-shadow: var(--pm-shadow-2);
}
#services .group:hover::before { opacity: 0.9; }
#services .group > .text-6xl {
  font-family: var(--pm-serif);
  background-image: var(--pm-gold);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  opacity: 0.55;
  letter-spacing: 0.02em;
}
#services .group span.rounded-full {
  background: #fff;
  border-color: var(--pm-hairline);
  transition: color 0.4s, border-color 0.4s;
}
#services .group:hover span.rounded-full {
  color: var(--color-secondary);
  border-color: rgba(47, 86, 201, 0.28);
}

/* ---------- 企业文化 ---------- */
#culture .group > .rounded-full {
  box-shadow: inset 0 0 0 1px rgba(47, 86, 201, 0.12), 0 12px 26px -20px rgba(47, 86, 201, 0.55);
  transition: transform 0.5s var(--pm-ease), box-shadow 0.5s var(--pm-ease);
}
#culture .group:hover > .rounded-full {
  transform: translateY(-5px);
  box-shadow: inset 0 0 0 1px rgba(47, 86, 201, 0.2), 0 18px 32px -20px rgba(47, 86, 201, 0.6);
}
#culture .tracking-\[0\.2em\] { letter-spacing: 0.28em; }

/* ---------- 数据概览（深色区） ---------- */
#stats {
  background-color: #081222;
  background-image:
    radial-gradient(1100px 520px at 12% -12%, rgba(47, 86, 201, 0.32), transparent 60%),
    radial-gradient(900px 460px at 92% 115%, rgba(211, 162, 74, 0.16), transparent 55%),
    linear-gradient(180deg, #0a1628 0%, #081324 55%, #0a1628 100%);
}
#stats .font-mono {
  font-family: var(--pm-grotesk);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  background-image: linear-gradient(180deg, #f0d493 0%, #d3a24a 55%, #c08f30 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  letter-spacing: 0.01em;
  text-shadow: none;
}
#stats .grid > div + div {
  border-left: 1px solid rgba(255, 255, 255, 0.08);
}
#stats .w-12 {
  background: linear-gradient(90deg, transparent, rgba(211, 162, 74, 0.85), transparent);
}
#stats .text-sm.font-medium { color: rgba(255, 255, 255, 0.72); letter-spacing: 0.08em; }
#stats p { color: rgba(255, 255, 255, 0.72); }

/* ---------- CTA（深色区） ---------- */
#cta {
  background-color: #0a1628;
  background-image:
    radial-gradient(1000px 520px at 85% 15%, rgba(47, 86, 201, 0.38), transparent 62%),
    radial-gradient(760px 420px at 5% 95%, rgba(211, 162, 74, 0.14), transparent 55%),
    linear-gradient(135deg, #0a1628 0%, #14294c 55%, #0a1628 100%);
}
#cta .cta-grid { opacity: 0.7; }

/* ---------- 页脚 ---------- */
footer { background: #fff; }
footer span.rounded-lg {
  background: #fff;
  border-color: var(--pm-hairline);
  transition: color 0.35s, border-color 0.35s, transform 0.35s var(--pm-ease);
}
footer span.rounded-lg:hover {
  color: var(--color-secondary);
  border-color: rgba(47, 86, 201, 0.3);
  transform: translateY(-2px);
}
footer ul li a { transition: color 0.3s, transform 0.3s var(--pm-ease); }
footer ul li a:hover { transform: translateX(3px); }
footer h4 { letter-spacing: 0.14em; }

/* ---------- 滚动 reveal 缓动统一 ---------- */
.reveal {
  transition-duration: 1s;
  transition-timing-function: var(--pm-ease);
}

/* ---------- 无障碍：减少动效 ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   v1.1 打磨（2026-09-25 评审后）：行距、卡片存在感、金色收敛、
   深色区层次、玻璃卡、页脚发丝线
   ============================================================ */
:root {
  --pm-gold: linear-gradient(135deg, #e6c88a 0%, #c9962f 52%, #ab7a26 100%);
}
section:first-of-type h1 { line-height: 1.28 !important; }

#services .group {
  border-color: rgba(10, 22, 40, 0.11);
  box-shadow: 0 2px 6px rgba(10, 22, 40, 0.05), 0 1px 2px rgba(10, 22, 40, 0.04);
}
#services .group:hover {
  box-shadow: 0 26px 50px -26px rgba(10, 22, 40, 0.32), 0 4px 12px rgba(10, 22, 40, 0.06);
}
#services .group span.rounded-full {
  background: rgba(47, 86, 201, 0.045);
  border-color: rgba(47, 86, 201, 0.16);
  color: #44506a;
}
#services .group:hover span.rounded-full {
  color: var(--color-secondary);
  border-color: rgba(47, 86, 201, 0.35);
  background: rgba(47, 86, 201, 0.07);
}

#stats .grid > div + div { border-left: 1px solid rgba(255, 255, 255, 0.16); }
#stats .text-sm.font-medium { color: rgba(255, 255, 255, 0.85); font-weight: 600; }
#stats p { color: rgba(255, 255, 255, 0.8); }
#stats .font-mono {
  background-image: linear-gradient(180deg, #f6e3ac 0%, #dcae52 45%, #c1892c 100%);
}
#stats {
  background-image:
    radial-gradient(1100px 520px at 12% -12%, rgba(52, 92, 210, 0.4), transparent 62%),
    radial-gradient(900px 460px at 92% 115%, rgba(211, 162, 74, 0.22), transparent 58%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='0.05'/></svg>"),
    linear-gradient(180deg, #0a1628 0%, #081324 55%, #0a1628 100%);
}
#cta {
  background-image:
    radial-gradient(1000px 520px at 85% 15%, rgba(52, 92, 210, 0.46), transparent 64%),
    radial-gradient(760px 420px at 5% 95%, rgba(211, 162, 74, 0.2), transparent 58%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='0.05'/></svg>"),
    linear-gradient(135deg, #0a1628 0%, #16305a 55%, #0a1628 100%);
}
#cta h2 span {
  background-image: linear-gradient(180deg, #eed6a2 0%, #d0a14a 90%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
}
#cta div[class*="h-[280px]"] > div {
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.06);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
  backdrop-filter: blur(12px) saturate(1.2);
  border-radius: 16px;
  box-shadow: 0 20px 40px -24px rgba(0, 0, 0, 0.5);
}
footer .border-border { border-color: rgba(10, 22, 40, 0.11); }

/* ============================================================
   v2 反模板化（2026-09-25）：编辑部式墨金体系
   章节标题去居中模板脸 / 幽灵编号 / 破对称卡片 / 裁切框 / 菱形金点
   ============================================================ */
:root { --pm-gold-solid: #c9962e; }

/* --- 1. 章节标题：居中模板脸 → 编辑部左对齐 + 金色竖条 --- */
#about .text-center.max-w-2xl,
#services .text-center.max-w-2xl,
#culture .text-center.max-w-2xl,
#stats .text-center.max-w-2xl {
  text-align: left;
  margin-left: 0;
  margin-right: 0;
  max-width: 44rem;
  padding-left: 1.5rem;
  border-left: 2px solid var(--pm-gold-solid);
}
/* eyebrow：只留尾线，统一哑金 */
span.tracking-widest.uppercase { color: #b8862f; }
span.tracking-widest.uppercase::before { display: none; }
#stats span.tracking-widest.uppercase,
#cta span.tracking-widest.uppercase { color: var(--color-accent); }

/* --- 2. 幽灵编号 01-05：一眼非模板 --- */
#about, #services, #culture, #stats, #cta {
  position: relative;
  z-index: 0;
  overflow: hidden;
}
#about::after, #services::after, #culture::after, #stats::after, #cta::after {
  content: '01';
  position: absolute;
  right: -2rem;
  top: 2.5rem;
  z-index: -1;
  font-family: var(--pm-serif);
  font-weight: 700;
  font-size: clamp(9rem, 20vw, 18rem);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(201, 150, 47, 0.14);
  pointer-events: none;
  user-select: none;
}
#services::after { content: '02'; }
#culture::after { content: '03'; }
#stats::after { content: '04'; }
#cta::after { content: '05'; }
#stats::after, #cta::after { -webkit-text-stroke: 1.5px rgba(211, 162, 74, 0.2); }

/* --- 3. 分节菱形金点 --- */
#services::before, #culture::before, #stats::before, #cta::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: 7px;
  height: 7px;
  transform: translate(-50%, -50%) rotate(45deg);
  background: var(--pm-gold-solid);
  z-index: 1;
}

/* --- 4. 服务卡片破对称（偶数卡下沉） --- */
@media (min-width: 1024px) {
  #services .group:nth-child(even) { --pm-offset: 2.6rem; }
}
#services .group { transform: translateY(var(--pm-offset, 0)); }
#services .group:hover { transform: translateY(calc(var(--pm-offset, 0) - 6px)); }

/* --- 5. 首屏主标题：墨色大字 + 单行哑金点睛 --- */
section:first-of-type h1 span {
  background-image: linear-gradient(120deg, #d9ae5c 0%, #c08f30 55%, #ab7a26 100%) !important;
}

/* --- 6. 插画区编辑部裁切框（金色偏移块） --- */
#about div[class*='aspect-'] {
  border: 1px solid rgba(10, 22, 40, 0.08);
  border-radius: 18px;
  box-shadow: 14px 14px 0 -2px rgba(201, 150, 47, 0.14), 0 24px 48px -30px rgba(10, 22, 40, 0.35);
}

/* --- 7. 导航 logo 徽标：墨金 --- */
nav a.flex > div {
  background-image: var(--pm-ink-grad);
  border-radius: 10px;
  box-shadow: inset 0 0 0 1px rgba(211, 162, 74, 0.55), 0 4px 10px -6px rgba(10, 22, 40, 0.5);
}

/* --- 8. 深色数据带上沿/下沿金发丝 --- */
#stats {
  border-top: 1px solid rgba(211, 162, 74, 0.35);
  border-bottom: 1px solid rgba(211, 162, 74, 0.35);
}

/* --- 9. 移动端收敛 --- */
@media (max-width: 767px) {
  #about::after, #services::after, #culture::after, #stats::after, #cta::after { display: none; }
  #about .text-center.max-w-2xl, #services .text-center.max-w-2xl,
  #culture .text-center.max-w-2xl, #stats .text-center.max-w-2xl { max-width: none; }
}

/* ============================================================
   v3 品牌图形锤（2026-09-25）：M 徽记 + 金色轨道
   ============================================================ */
section:first-of-type div[class*="w-[340px]"] > *:not(.pm-brandmark) { display: none; }
.pm-brandmark {
  width: 100%;
  height: 100%;
  display: block;
  animation: pm-fadein 1s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.pm-spin {
  transform-box: view-box;
  transform-origin: 240px 240px;
  animation: pm-spin 70s linear infinite;
}
@keyframes pm-spin { to { transform: rotate(360deg); } }
@keyframes pm-fadein {
  from { opacity: 0; transform: scale(0.96); }
  to { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .pm-brandmark, .pm-spin { animation: none; }
}