/* ==========================================================================
   lm-theme.css — x3dgs.cn 视觉体系修复层
   --------------------------------------------------------------------------
   设计语言 : 蓝金（钴蓝 × 香槟金）
   修改范围 : 纯视觉层（色彩 / 表面层级 / 阴影 / 圆角 / 焦点态 / 中文排版）
   接入方式 : 在 index.html 中置于构建产物 index-*.css 之后
              <link rel="stylesheet" href="/assets/lm-theme.css">
   回滚方式 : 删除上面那行 <link> 即可完整还原，不影响任何构建产物
   --------------------------------------------------------------------------
   结构:
     01 设计令牌
     02 Tailwind 色彩变量重映射（全局一次性迁移）
     03 基础与排版修正
     04 导航
     05 Hero
     06 区块标题
     07 表面层级（清除区块彩虹渐变）
     08 通用卡片（features / about / contact）
     09 技术对比区
     10 作品案例区
     11 联系区
     12 页脚
     13 焦点态
     14 动效克制
   ========================================================================== */


/* ==========================================================================
   01 设计令牌
   ========================================================================== */

:root {
  /* —— 中性层（冷调石板灰，唯一的中性色源） —— */
  --lm-ink:      #0E1E33;   /* 标题 */
  --lm-body:     #3C5470;   /* 正文 */
  --lm-muted:    #5C718A;   /* 次级说明 */
  --lm-faint:    #8899AD;   /* 极弱（仅装饰） */
  --lm-line:     #E4EAF1;   /* 1px 发丝线 */
  --lm-surface:  #FFFFFF;   /* 卡片面 */
  --lm-canvas:   #F6F8FB;   /* 页面底 */

  /* —— 品牌蓝（交互与科技感，唯一强调色） —— */
  --lm-blue-950: #050D1A;
  --lm-blue-900: #0A1B33;
  --lm-blue-800: #102A52;
  --lm-blue-700: #16418F;
  --lm-blue-600: #1D4FD7;
  --lm-blue-500: #2E6BE8;
  --lm-blue-200: #C3D6F7;
  --lm-blue-100: #DBE7FB;
  --lm-blue-50:  #EEF3FD;

  /* —— 品牌金（点睛，仅用于眉标 / 高亮 / 强调线，不做大面积填充） —— */
  --lm-gold-600: #9C7A1C;
  --lm-gold-500: #C39B2A;
  --lm-gold-400: #DCBC5E;
  --lm-gold-300: #E8D38C;
  --lm-gold-200: #F1E4B8;
  --lm-gold-50:  #FCF9EF;

  /* —— 阴影（统一蓝灰色温，全站只用这一套） —— */
  --lm-shadow-1: 0 1px 2px rgba(14,30,51,.04), 0 2px 8px rgba(14,30,51,.05);
  --lm-shadow-2: 0 2px 6px rgba(14,30,51,.05), 0 10px 24px rgba(14,30,51,.07);
  --lm-shadow-3: 0 4px 10px rgba(14,30,51,.06), 0 20px 44px rgba(14,30,51,.10);
  --lm-ring:     0 0 0 4px rgba(46,107,232,.22);

  /* —— 半径梯度：控件 12px / 卡片 16px，不再出现 2/4/10/20 混用 —— */
  --lm-r-control: 12px;
  --lm-r-card:    16px;

  /* 迁移旧品牌变量（站点原 --lm-* 定义在此被重定义，
     使 .section-title 渐变条等依赖处自动跟随新色板） */
  --lm-cobalt: var(--lm-blue-600);
  --lm-cyan:   var(--lm-gold-500);
  --lm-mint:   var(--lm-gold-400);
  --lm-amber:  var(--lm-gold-300);
  --lm-violet: var(--lm-blue-500);
}


/* ==========================================================================
   02 Tailwind 色彩变量重映射
   --------------------------------------------------------------------------
   构建产物的所有工具类都走 var(--color-*)，因此在变量层重映射
   即可一次性完成全局迁移，无需逐条覆盖工具类。
   ========================================================================== */

:root {
  /* emerald（原绿色主色）→ 蓝 / 金 */
  --color-emerald-50:  var(--lm-blue-50);
  --color-emerald-100: var(--lm-blue-100);
  --color-emerald-200: var(--lm-blue-200);
  --color-emerald-300: var(--lm-gold-300);   /* hero 高亮词 → 金 */
  --color-emerald-400: var(--lm-blue-500);   /* CTA hover */
  --color-emerald-500: var(--lm-blue-600);   /* 主操作 */
  --color-emerald-600: var(--lm-blue-700);

  /* cyan（页脚链接 hover）→ 金 */
  --color-cyan-300: var(--lm-gold-300);
  --color-cyan-400: var(--lm-gold-400);
  --color-cyan-500: var(--lm-gold-500);

  /* amber（眉标）→ 香槟金 */
  --color-amber-300: var(--lm-gold-300);
  --color-amber-400: var(--lm-gold-400);
  --color-amber-500: var(--lm-gold-500);
  --color-amber-600: var(--lm-gold-600);

  /* blue（对比区推荐卡）→ 品牌蓝统一色阶 */
  --color-blue-50:  var(--lm-blue-50);
  --color-blue-100: var(--lm-blue-100);
  --color-blue-200: var(--lm-blue-200);
  --color-blue-500: var(--lm-blue-500);
  --color-blue-600: var(--lm-blue-600);
  --color-blue-700: var(--lm-blue-700);

  /* 中性灰阶统一为冷调石板系 */
  --color-gray-400: #8899AD;
  --color-gray-500: #5C718A;
  --color-gray-600: #3C5470;
  --color-gray-900: #0E1E33;

  /* shadcn 基础层同步（消除与品牌层的第二套真相） */
  --primary: var(--lm-blue-600);
  --primary-foreground: #FFFFFF;
  --ring: var(--lm-blue-600);
  --radius: 0.75rem;
}


/* ==========================================================================
   03 基础与排版修正
   ========================================================================== */

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  background: var(--lm-canvas);
  color: var(--lm-body);
}

/* 标题排版微调
   注意：本文件未分层（unlayered），优先级高于构建产物的 @layer utilities，
   因此这里绝不能写通用 color —— 否则会覆盖 .text-white 等工具类。
   标题颜色统一在各区块的局部作用域内处理（见 07）。 */
h1, h2, h3, h4 {
  letter-spacing: -0.01em;
}

/* 中文不做伪斜体（CJK 无真斜体，斜体是硬掰的） */
body :is(i, em, .italic) {
  font-style: normal;
}

/* 中英混排断行：标题与地址不拆词 */
h1, h2, h3, .case-content p {
  word-break: keep-all;
  overflow-wrap: break-word;
}

/* 数字与拉丁字符用等宽变体，表格化排版更稳 */
.section-title h2,
.case-index {
  font-variant-numeric: tabular-nums;
}


/* ==========================================================================
   04 导航
   ========================================================================== */

.site-nav {
  transition: background-color .3s ease, border-color .3s ease, backdrop-filter .3s ease;
}

/* 导航 logo 芯片：原为青→薄荷渐变（隐藏规则），统一为品牌蓝 */
.site-nav .bg-emerald-500 {
  background: linear-gradient(135deg, var(--lm-blue-500), var(--lm-blue-700)) !important;
  box-shadow: 0 4px 14px rgba(29,79,215,.30) !important;
}

/* 滚动后的导航条：白玻璃 + 发丝线 + 蓝灰投影（替换原蓝色投影） */
.site-nav.bg-white\/90 {
  background: rgba(255,255,255,.90) !important;
  border-bottom: 1px solid var(--lm-line) !important;
  box-shadow: 0 1px 2px rgba(14,30,51,.04), 0 8px 24px rgba(14,30,51,.06) !important;
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
}


/* ==========================================================================
   05 Hero
   --------------------------------------------------------------------------
   保留深色沉浸式基调，把底色校准为品牌深蓝，
   让金色眉标与金色高亮词成为唯一的两处点睛。
   ========================================================================== */

.hero-section {
  background: var(--lm-blue-950);
}

.hero-bg-image {
  background-color: var(--lm-blue-950);
  filter: saturate(1.02) contrast(1.05) brightness(1.04);
}

/* 暗角：由中性黑改为品牌深蓝，消除"灰蒙蒙" */
.hero-bg-vignette {
  background:
    linear-gradient(180deg, rgba(5,13,26,.80) 0%, rgba(5,13,26,.18) 34%,
                            rgba(5,13,26,.18) 64%, rgba(6,14,28,.78) 100%),
    radial-gradient(ellipse at 50% 44%, rgba(5,13,26,0) 0%,
                    rgba(5,13,26,.28) 62%, rgba(5,13,26,.72) 100%);
}

/* 眉标：金色小字 + 精确字距 */
.hero-copy > p:first-child {
  color: var(--lm-gold-300);
  letter-spacing: .3em;
  font-weight: 600;
}

/* 主标题：高亮词（emerald-300 已映射为金）加一点金色氛围 */
.hero-copy h1 .text-emerald-300 {
  color: var(--lm-gold-300);
  text-shadow: 0 2px 24px rgba(220,188,94,.28);
}

/* 副标题：由纯灰改为蓝白，压住与主标题的层级差 */
.hero-copy > p:nth-of-type(2) {
  color: #C9D6E8;
}

/* 主 CTA：蓝底 + 蓝调投影（替换原绿色投影） */
.hero-section button {
  background: var(--lm-blue-600);
  box-shadow: 0 8px 24px rgba(29,79,215,.32);
  border-radius: var(--lm-r-control);
}

.hero-section button:hover {
  background: var(--lm-blue-500);
  box-shadow: 0 12px 32px rgba(29,79,215,.38);
}


/* ==========================================================================
   06 区块标题
   ========================================================================== */

/* 标题下的装饰条：由"青→薄荷→琥珀"三色改为单一金色渐变
   并清掉隐藏规则残留在该条上的青色描边与投影 */
.section-title > div {
  background: linear-gradient(90deg, var(--lm-gold-500), var(--lm-gold-300)) !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

.section-title h2 {
  color: var(--lm-ink) !important;
  font-size: 1.875rem;
}

.section-title > p {
  color: var(--lm-muted) !important;
}


/* ==========================================================================
   07 表面层级（清除七个区块各自为政的渐变底色）
   --------------------------------------------------------------------------
   规则：页面只有一个底色 canvas，正文区块在 白 / canvas 之间交替，
   形成可预期的节奏，而不是七种色相的漂移。
   ========================================================================== */

.features-section {
  background: var(--lm-surface);
}

.compare-section {
  background: var(--lm-canvas);
}

.about-section {
  background: var(--lm-surface);
}

.cases-section {
  background: var(--lm-canvas);
}

.contact-section {
  background: var(--lm-surface);
}

/* 各区块标题色统一 */
.features-section h2,
.compare-section h2,
.about-section h2,
.cases-section h2,
.contact-section h2 {
  color: var(--lm-ink) !important;
}


/* ==========================================================================
   08 通用卡片
   --------------------------------------------------------------------------
   原状：9 张卡片 9 套手写渐变。现改为单一配方：
   白卡 + 1px 发丝线 + 统一蓝灰投影；色相差异一律移除。
   ========================================================================== */

/* --- features 区 --- */
.features-section .group {
  background: var(--lm-surface) !important;
  border: 1px solid var(--lm-line) !important;
  border-radius: var(--lm-r-card);
  box-shadow: var(--lm-shadow-1) !important;
  transition: transform .28s cubic-bezier(.23,1,.32,1),
              box-shadow .28s cubic-bezier(.23,1,.32,1),
              border-color .28s cubic-bezier(.23,1,.32,1);
}

.features-section .group:nth-child(2),
.features-section .group:nth-child(3) {
  background: var(--lm-surface) !important;
}

.features-section .group:hover {
  background: var(--lm-surface) !important;
  border-color: var(--lm-blue-200) !important;
  box-shadow: var(--lm-shadow-3) !important;
  transform: translateY(-4px);
}

/* 图标芯片：三张卡不再分别用 绿/蓝/黄，统一为蓝色浅底 */
.features-section .group .bg-emerald-50 {
  color: var(--lm-blue-600) !important;
  background: var(--lm-blue-50) !important;
  border-radius: var(--lm-r-control);
}

.features-section .group:nth-child(2) .bg-emerald-50,
.features-section .group:nth-child(3) .bg-emerald-50 {
  color: var(--lm-blue-600) !important;
  background: var(--lm-blue-50) !important;
}

.features-section .group:hover .bg-emerald-50 {
  background: var(--lm-blue-600) !important;
  color: #FFFFFF !important;
}

/* --- about 区 --- */
.about-section .group {
  background: var(--lm-canvas) !important;
  border: 1px solid var(--lm-line) !important;
  border-radius: var(--lm-r-card);
  box-shadow: none;
  transition: transform .28s cubic-bezier(.23,1,.32,1),
              box-shadow .28s cubic-bezier(.23,1,.32,1),
              border-color .28s cubic-bezier(.23,1,.32,1);
}

.about-section .group:nth-child(2),
.about-section .group:nth-child(3) {
  background: var(--lm-canvas) !important;
}

.about-section .group:hover {
  background: var(--lm-surface) !important;
  border-color: var(--lm-blue-200) !important;
  box-shadow: var(--lm-shadow-2) !important;
  transform: translateY(-4px);
}

.about-section .group .text-emerald-500 {
  color: var(--lm-blue-600) !important;
}

.about-section .group .bg-white {
  border: 1px solid var(--lm-line);
}

.about-section .group:hover .bg-white {
  background: var(--lm-blue-50) !important;
  border-color: var(--lm-blue-200);
  color: var(--lm-blue-600) !important;
}

.about-section .text-emerald-500 {
  color: var(--lm-blue-600) !important;
}


/* ==========================================================================
   09 技术对比区
   --------------------------------------------------------------------------
   修正：左列"缺点"chip 由品牌蓝改为中性灰（负面信息不穿品牌色），
   右列"优点"统一为品牌蓝；推荐卡用蓝色描边 + 金色徽标。
   ========================================================================== */

/* 左列：限制项 → 中性灰 pill */
.compare-section .bg-gray-100 {
  color: var(--lm-muted) !important;
  background: #EEF2F7 !important;
  border: 1px solid var(--lm-line);
  border-radius: 8px;
  padding: .3rem .7rem;
  font-weight: 500;
}

/* 右列：能力项 → 品牌蓝 pill（与左列语法对齐，语义为正向） */
.compare-section .text-blue-600,
.compare-section .text-blue-500 {
  color: var(--lm-blue-600) !important;
  font-weight: 600;
}

.compare-section .bg-blue-50 {
  background: var(--lm-blue-50) !important;
}

.compare-section .bg-emerald-50 {
  background: var(--lm-blue-50) !important;
}

/* 左卡：白卡 + 发丝线（不再是淡蓝描边） */
.compare-section > div > div:nth-of-type(2) > div:first-child,
.compare-section .bg-white.rounded-2xl {
  background: var(--lm-surface);
  border: 1px solid var(--lm-line);
  border-radius: var(--lm-r-card);
  box-shadow: var(--lm-shadow-1);
}

/* 右卡（推荐项）：品牌蓝描边 + 极浅蓝面 + 抬升 */
.compare-section .border-blue-200 {
  background: linear-gradient(180deg, var(--lm-blue-50), #FFFFFF 70%);
  border: 1.5px solid var(--lm-blue-200);
  border-radius: var(--lm-r-card);
  box-shadow: var(--lm-shadow-2);
}

/* 推荐徽标：改为金底深字，与"推荐"语义匹配 */
.compare-section .border-blue-200 .bg-blue-500,
.compare-section .border-blue-200 > span[class*="absolute"] {
  background: var(--lm-gold-500) !important;
  color: #FFFFFF !important;
}

/* 图标芯片统一 */
.compare-section .rounded-xl.bg-blue-500,
.compare-section .rounded-xl.bg-emerald-500 {
  background: var(--lm-blue-600) !important;
  color: #FFFFFF !important;
}

.compare-section .rounded-xl.bg-gray-200,
.compare-section .rounded-xl.bg-gray-100 {
  background: #EEF2F7 !important;
  color: var(--lm-muted) !important;
}


/* ==========================================================================
   10 作品案例区
   --------------------------------------------------------------------------
   原状：三张卡分别用 琥珀/青/紫 三套色。现统一为金色强调，
   卡片差异交给图片本身表达。
   ========================================================================== */

.case-card {
  background: var(--lm-surface);
  border: 1px solid var(--lm-line);
  border-radius: var(--lm-r-card);
  box-shadow: var(--lm-shadow-1);
  transition: transform .28s cubic-bezier(.23,1,.32,1),
              box-shadow .28s cubic-bezier(.23,1,.32,1),
              border-color .28s cubic-bezier(.23,1,.32,1);
}

.case-card:hover,
.case-card:focus-visible {
  transform: translateY(-6px);
  box-shadow: var(--lm-shadow-3);
  border-color: var(--lm-gold-400);
}

/* 顶部强调条：三色 → 单一金色渐变，厚度 4px → 3px */
.case-content {
  border-top: 3px solid transparent;
  padding: 1.5rem;
}

.case-card--amber .case-content,
.case-card--cyan .case-content,
.case-card--violet .case-content {
  border-top-color: transparent;
  position: relative;
}

/* 用伪元素画金色渐变条，替代原先的三色描边 */
.case-content::before {
  content: "";
  position: absolute;
  top: -3px;
  left: 1.5rem;
  width: 44px;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--lm-gold-500), var(--lm-gold-300));
}

/* 链接：统一品牌蓝，hover 加下划线偏移 */
.case-card--amber .case-link,
.case-card--cyan .case-link,
.case-card--violet .case-link {
  color: var(--lm-blue-600);
}

.case-card .case-link {
  transition: color .2s ease, gap .2s ease;
}

.case-card:hover .case-link {
  color: var(--lm-blue-700);
}

/* 媒体区 */
.case-media {
  background: var(--lm-blue-100);
}

/* 标签：金色小字（在深色影像上形成品牌呼应） */
.case-label {
  color: var(--lm-gold-300);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-shadow: 0 1px 6px rgba(5,13,26,.6);
}

.case-index {
  color: #FFFFFF;
  opacity: .82;
  font-size: 2.25rem;
  font-weight: 800;
  text-shadow: 0 2px 12px rgba(5,13,26,.55);
}

.case-content h3 {
  color: var(--lm-ink);
}

.case-content p {
  color: var(--lm-muted);
}

/* hover 边框三色 → 统一 */
.case-card--amber:hover,
.case-card--cyan:hover,
.case-card--violet:hover {
  border-color: var(--lm-gold-400);
}


/* ==========================================================================
   11 联系区
   ========================================================================== */

.contact-section .text-emerald-500 {
  color: var(--lm-blue-600) !important;
}

.contact-section > div > div:last-child > div {
  background: var(--lm-canvas) !important;
  border: 1px solid var(--lm-line) !important;
  border-radius: var(--lm-r-card);
  transition: transform .28s cubic-bezier(.23,1,.32,1),
              box-shadow .28s cubic-bezier(.23,1,.32,1),
              border-color .28s cubic-bezier(.23,1,.32,1);
}

.contact-section > div > div:last-child > div:nth-child(2),
.contact-section > div > div:last-child > div:nth-child(3) {
  background: var(--lm-canvas) !important;
}

.contact-section > div > div:last-child > div:hover {
  background: var(--lm-surface) !important;
  border-color: var(--lm-blue-200) !important;
  box-shadow: var(--lm-shadow-2) !important;
  transform: translateY(-4px);
}

/* 修正：标签对比度不足（原 text-gray-400 在白底上低于 AA） */
.contact-section .text-gray-400 {
  color: var(--lm-muted) !important;
  font-size: .8rem;
  letter-spacing: .08em;
  font-weight: 600;
}

/* 联系值（邮箱/电话/地址）提到正文色 */
.contact-section a,
.contact-section p:not(.text-gray-400) {
  color: var(--lm-ink);
}

/* 地址断行：避免把"B座"这类词拆开 */
.contact-section p,
.contact-section a {
  word-break: keep-all;
  overflow-wrap: anywhere;
}

/* Hero 三维点云画布：原 0.34 存在感过弱，
   适度提升让产品本身（点云）在首屏可见 */
.hero-section > canvas {
  opacity: .46 !important;
}


/* ==========================================================================
   12 页脚
   --------------------------------------------------------------------------
   原状：深蓝 → 藏青 → 墨绿三色渐变，绿尾巴来源不明。
   现改为品牌深蓝 + 顶部金色发丝线，与 hero 首尾呼应。
   ========================================================================== */

.site-footer {
  background: linear-gradient(180deg, var(--lm-blue-900), var(--lm-blue-950)) !important;
  border-top: 1px solid rgba(220,188,94,.28);
  color: #A9BBD2 !important;
}

.site-footer .text-gray-600 {
  color: var(--lm-gold-300) !important;
}

.site-footer a {
  transition: color .2s ease;
}

.site-footer a:hover {
  color: var(--lm-gold-200) !important;
}


/* ==========================================================================
   13 焦点态（键盘可达性）
   --------------------------------------------------------------------------
   原状：焦点环为薄荷绿，与主色、品牌色均不一致。
   ========================================================================== */

:where(a, button, [role="button"], input, textarea, select, [tabindex]):focus-visible {
  outline: 2px solid var(--lm-blue-600);
  outline-offset: 2px;
}

.case-card:focus-visible {
  outline: 2px solid var(--lm-blue-600);
  outline-offset: 3px;
  box-shadow: var(--lm-shadow-3) !important;
}


/* ==========================================================================
   14 动效克制
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .hero-bg-image {
    animation: none !important;
  }
  .features-section .group:hover,
  .about-section .group:hover,
  .contact-section > div > div:last-child > div:hover,
  .case-card:hover {
    transform: none;
  }
  * {
    transition-duration: .01ms !important;
  }
}