/* ==========================================================================
   酉脑MES 落地页 — 视觉系统 v3（2026-10-20 重构，对齐企业级信息密度）
   基调：浅色专业 + 深色 Hero + 琥珀(#F59E0B)单点强调
   手法：点阵网格 / 英文 eyebrow 小标签 / 超大编号 / 8 卡功能 / 应用场景 tab /
        对比式效益 / 6 卡优势 / 悬浮试用入口
   栅格：8px；圆角：卡片 16 / 控件 12 / 按钮 999；图标：1.8px 线性描边
   ========================================================================== */

:root {
  /* 色板 */
  --ink:        #0F172A;   /* 主文字 / 深色底 */
  --ink-2:      #334155;
  --ink-3:      #64748B;
  --line:       #E5E7EB;
  --line-soft:  #EEF2F7;
  --bg:         #FFFFFF;
  --bg-alt:     #F8FAFC;
  --accent:     #F59E0B;   /* 琥珀 · 唯一高饱和色 */
  --accent-ink: #B45309;
  --accent-bg:  #FEF3C7;
  --teal:       #0E7490;
  --green:      #16A34A;
  --green-bg:   #ECFDF3;
  --green-ink:  #15803D;
  --red:        #EF4444;
  --red-bg:     #FEF2F2;
  --red-ink:    #B91C1C;

  /* 深色底（Hero / CTA / 页脚） */
  --dark:       #0B1220;
  --dark-2:     #141C2E;
  --on-dark:    #E2E8F0;
  --on-dark-3:  #94A3B8;

  /* 度量 */
  --r-card: 16px;
  --r-ctl:  12px;
  --shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 8px 24px rgba(15, 23, 42, .06);
  --shadow-lg: 0 24px 60px rgba(2, 6, 23, .45);
  --wrap: 1160px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
               -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }
h1, h2, h3 { letter-spacing: -.02em; margin: 0; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 24px;
}

/* ── 通用按钮 ─────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 46px;
  padding: 0 26px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  transition: transform .18s ease, background .18s ease, box-shadow .18s ease, border-color .18s ease, color .18s ease;
}
.btn:active { transform: translateY(1px); }

.btn-login {
  height: 38px;
  padding: 0 18px;
  font-size: 14px;
  border: 1px solid var(--line);
  color: var(--ink);
  background: #fff;
}
.btn-login:hover { border-color: var(--ink); background: var(--ink); color: #fff; }

/* ── 导航 ─────────────────────────────────────────────────── */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, .86);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line-soft);
}
.nav-inner {
  display: flex;
  align-items: center;
  gap: 20px;
  height: 66px;
}
.brand { display: flex; align-items: center; gap: 10px; }
.brand-mark { width: 34px; height: 34px; display: block; border-radius: 8px; object-fit: contain; background: #fff; }
.brand-text { font-size: 17px; font-weight: 700; letter-spacing: -.01em; }
.brand-text em { font-style: normal; color: var(--accent-ink); }

.nav-links {
  display: flex;
  gap: 28px;
  margin-left: auto;
  font-size: 15px;
  color: var(--ink-2);
}
.nav-links a { position: relative; padding: 4px 0; transition: color .18s ease; }
.nav-links a::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -2px;
  height: 2px; border-radius: 2px;
  background: var(--accent);
  transform: scaleX(0); transform-origin: left;
  transition: transform .22s ease;
}
.nav-links a:hover { color: var(--ink); }
.nav-links a:hover::after { transform: scaleX(1); }

/* ── Hero（深色 + 点阵网格） ───────────────────────────────── */
.hero {
  position: relative;
  overflow: hidden;
  background: var(--dark);
  color: var(--on-dark);
  padding: 76px 0 88px;
}
/* 点阵网格：低成本营造"工程感"，比纯色背景更有质感 */
.hero-grid {
  position: absolute; inset: 0;
  pointer-events: none;
  background-image: radial-gradient(rgba(148, 163, 184, .16) 1px, transparent 1px);
  background-size: 26px 26px;
  mask-image: radial-gradient(760px 460px at 62% 42%, #000 20%, transparent 78%);
  -webkit-mask-image: radial-gradient(760px 460px at 62% 42%, #000 20%, transparent 78%);
}
.hero-glow {
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    radial-gradient(680px 380px at 78% 8%,  rgba(245, 158, 11, .18), transparent 62%),
    radial-gradient(760px 420px at 12% 92%, rgba(14, 116, 144, .20), transparent 60%);
}
.hero-inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.25fr);
  gap: 40px;
  align-items: center;
}
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 28px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(245, 158, 11, .34);
  background: rgba(245, 158, 11, .1);
  color: #FCD34D;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .02em;
}
.hero h1 {
  margin: 22px 0 18px;
  font-size: clamp(32px, 4.4vw, 50px);
  line-height: 1.22;
  font-weight: 800;
  color: #fff;
}
.lede {
  max-width: 30em;
  font-size: clamp(15px, 1.6vw, 17px);
  color: var(--on-dark-3);
  line-height: 1.85;
}

/* Hero 三条卖点 */
.hero-points {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  margin-top: 28px;
}
.hero-points li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14.5px;
  color: var(--on-dark);
}
.hero-points svg {
  width: 17px; height: 17px;
  flex: 0 0 auto;
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hero-visual { position: relative; }
.hero-visual .shot {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 18px;
  box-shadow: var(--shadow-lg);
}
/* 宽屏让 Hero 图向右"出血"到接近视口边缘，把图放大到与左侧文字区等高 */
@media (min-width: 1161px) {
  .hero-visual {
    width: calc(100% + min(190px, (100vw - 1160px) / 2 + 24px));
  }
}
/* 窄屏（≤1160）改上下堆叠：图占满整行并居中，避免左右并排时图被压小 */
@media (max-width: 1160px) {
  .hero-inner { grid-template-columns: 1fr; gap: 36px; }
  .hero-visual .shot { max-width: 760px; margin: 0 auto; }
}

/* ── 区块通用 ─────────────────────────────────────────────── */
.section { padding: 88px 0; }
.section-alt { background: var(--bg-alt); border-block: 1px solid var(--line-soft); }

.sec-head { max-width: 760px; margin: 0 auto 56px; text-align: center; }
/* 英文小标签：营造国际专业感，但用词与我们自己的板块语义一致 */
.sec-eyebrow {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 12px;
  margin-bottom: 16px;
  border-radius: 999px;
  background: var(--bg);
  border: 1px solid var(--line);
  color: var(--accent-ink);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.section-alt .sec-eyebrow { background: #fff; }
.sec-head h2 {
  font-size: clamp(24px, 3vw, 34px);
  font-weight: 800;
  line-height: 1.35;
}
.sec-sub { color: var(--ink-3); font-size: 16px; margin-top: 12px; }

/* ── 系统能力：8 张功能卡 ─────────────────────────────────── */
.func-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}
.func {
  position: relative;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: 22px 20px 20px;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.func:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: #DBE1EA; }
.func .fnum {
  position: absolute;
  top: 14px; right: 16px;
  font-size: 30px; font-weight: 800; line-height: 1;
  color: #EEF1F6; letter-spacing: -.03em;
  transition: color .2s ease;
}
.func:hover .fnum { color: var(--accent-bg); }
.fico {
  width: 42px; height: 42px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--r-ctl);
  background: var(--accent-bg);
  color: var(--accent-ink);
  margin-bottom: 14px;
}
.fico svg {
  width: 22px; height: 22px;
  fill: none; stroke: currentColor;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.func h3 { font-size: 16.5px; font-weight: 700; line-height: 1.45; margin-bottom: 8px; }
.func p { color: var(--ink-3); font-size: 13.5px; line-height: 1.75; }
.func .pills { margin-top: 14px; }

/* 功能点小标签（功能卡 / 弹框复用） */
.pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pills li {
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--bg-alt);
  border: 1px solid var(--line);
  font-size: 12.5px;
  color: var(--ink-2);
  line-height: 1.6;
}

/* ── 应用场景：tab 切换 ───────────────────────────────────── */
.cases { max-width: 880px; margin: 0 auto; }
.case-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-bottom: 28px;
}
.case-tab {
  height: 42px;
  padding: 0 22px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink-2);
  font-size: 15px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: all .18s ease;
}
.case-tab:hover { border-color: var(--accent); color: var(--accent-ink); }
.case-tab.is-active {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}
.case-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.case-panels { position: relative; }
.case-panel {
  display: none;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: 30px 32px 28px;
  box-shadow: var(--shadow);
  animation: caseIn .28s ease;
}
.case-panel.is-active { display: block; }
@keyframes caseIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.case-steps { display: grid; gap: 14px; counter-reset: step; }
.case-steps li {
  position: relative;
  padding-left: 42px;
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--ink-2);
}
.case-steps li::before {
  counter-increment: step;
  content: counter(step);
  position: absolute; left: 0; top: 1px;
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--accent-bg);
  color: var(--accent-ink);
  font-size: 13px; font-weight: 700;
}
.case-note {
  margin-top: 22px;
  padding: 14px 16px;
  background: var(--bg-alt);
  border-left: 3px solid var(--accent);
  border-radius: 0 8px 8px 0;
  font-size: 14.5px;
  color: var(--ink);
  line-height: 1.7;
}

/* ── 用了之后不一样：对比式效益 ───────────────────────────── */
.gains-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}
.gain {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: 24px 24px 22px;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.gain:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: #DBE1EA; }
.gain-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 16px; }
.gnum {
  font-size: 30px; font-weight: 800; line-height: 1;
  color: #EDF1F6; letter-spacing: -.03em;
}
.gain-head h3 { font-size: 18px; font-weight: 700; }
.gain-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.gain-old, .gain-new {
  border-radius: var(--r-ctl);
  padding: 14px 14px 16px;
}
.gain-old { background: var(--red-bg); border: 1px solid #FBD5D5; }
.gain-new { background: var(--green-bg); border: 1px solid #C7EBD2; }
.tag-old, .tag-new {
  display: inline-block;
  font-size: 11.5px; font-weight: 700;
  margin-bottom: 10px;
}
.tag-old { color: var(--red-ink); }
.tag-new { color: var(--green-ink); }
.gain-old ul { display: grid; gap: 7px; }
.gain-old li {
  position: relative;
  padding-left: 16px;
  font-size: 13.5px;
  color: #7F2D2D;
  line-height: 1.6;
}
.gain-old li::before {
  content: "";
  position: absolute; left: 2px; top: .6em;
  width: 5px; height: 5px; border-radius: 999px;
  background: #F0A8A8;
}
.gain-new p { font-size: 13.5px; color: var(--green-ink); line-height: 1.7; }
.gain-kpi {
  display: inline-block;
  margin-top: 12px;
  padding: 4px 12px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid #C7EBD2;
  color: var(--green-ink);
  font-size: 12.5px; font-weight: 700;
}

/* ── 界面展示 ─────────────────────────────────────────────── */
/* 两图等比列宽：4.7175 = 电脑图宽高比(1266/492) ÷ 手机图宽高比(792/1452)
   ⇒ 两图各自 width:100%，渲染高度必然一致（电脑图更大、手机图更小） */
.showcase {
  display: grid;
  grid-template-columns: 4.7175fr 1fr;
  gap: 28px;
  align-items: start;
}
.shot-card { margin: 0; min-width: 0; }
.shot-card .shot {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--r-card);
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}
.shot-phone .shot { width: 100%; max-width: 100%; box-shadow: none; border: 0; background: transparent; }
.shot-card figcaption {
  margin-top: 14px;
  text-align: center;
  font-size: 13.5px;
  color: var(--ink-3);
}
.shot-phone figcaption { font-size: 12.5px; }

/* ── 为什么选酉脑：6 张优势卡 ─────────────────────────────── */
.adv-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}
.adv {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: 26px 24px 28px;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.adv:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: rgba(245, 158, 11, .45); }
.adv h3 { margin: 16px 0 10px; font-size: 17px; font-weight: 700; line-height: 1.5; }
.adv p { color: var(--ink-3); font-size: 14px; line-height: 1.8; }

.ico {
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--r-ctl);
  background: var(--accent-bg);
  color: var(--accent-ink);
}
.ico svg {
  width: 22px; height: 22px;
  fill: none; stroke: currentColor;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}

/* ── 结尾 CTA（深色） ─────────────────────────────────────── */
.cta {
  position: relative;
  overflow: hidden;
  background: var(--dark);
  color: var(--on-dark);
  padding: 84px 0;
  text-align: center;
}
.cta::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(720px 320px at 50% 0%, rgba(245, 158, 11, .18), transparent 65%);
  pointer-events: none;
}
.cta-inner { position: relative; }
.cta h2 {
  font-size: clamp(24px, 3vw, 34px);
  font-weight: 800;
  color: #fff;
}
.cta p { color: var(--on-dark-3); font-size: 16px; margin-top: 12px; }

/* ── 页脚（单行） ─────────────────────────────────────────── */
.foot {
  background: #080E18;
  color: #8A99B0;
  padding: 28px 0;
  font-size: 14px;
}
.foot-inner { display: flex; justify-content: center; }
.foot-line {
  margin: 0;
  color: #7C8CA5;
  font-size: 13.5px;
  line-height: 1.8;
  text-align: center;
}
.foot-line a {
  color: #9FB0C6;
  border-bottom: 1px dotted rgba(159, 176, 198, .5);
  transition: color .18s ease, border-color .18s ease;
}
.foot-line a:hover { color: #fff; border-color: #fff; }

/* ── 右侧悬浮：免费试用 ───────────────────────────────────── */
.trial-float {
  position: fixed;
  right: 22px;
  bottom: 96px;
  z-index: 80;
  /* 只包住按钮本身：弹框改为绝对定位，不再把上方空白区算进 :hover 命中范围 */
  display: flex;
}

.trial-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 20px 0 16px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, #F59E0B, #EA8C0A);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(245, 158, 11, .38);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.trial-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(245, 158, 11, .48); filter: brightness(1.03); }
.trial-btn:active { transform: translateY(0); }
.trial-btn svg {
  width: 18px; height: 18px;
  fill: none; stroke: #fff;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}

.trial-pop {
  /* 绝对定位：脱出父级文档流 ⇒ 父级命中区只剩按钮，空白处划过不再弹框 */
  position: absolute;
  right: 0;
  bottom: calc(100% + 12px);
  width: 344px;
  max-width: calc(100vw - 44px);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  box-shadow: 0 20px 56px rgba(15, 23, 42, .16);
  padding: 20px 20px 18px;
  text-align: left;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px) scale(.98);
  transform-origin: bottom right;
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
/* 透明"桥"：补上按钮与弹框之间 12px 的空隙，鼠标自按钮上移不闪断 */
.trial-pop::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -12px;
  height: 12px;
}
.trial-float:hover .trial-pop,
.trial-float.open .trial-pop,
.trial-pop:focus-within {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.trial-pop-head { display: flex; align-items: center; gap: 10px; }
.trial-pop-ico {
  width: 34px; height: 34px;
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 8px;
  background: var(--accent-bg);
  color: var(--accent-ink);
}
.trial-pop-ico svg {
  width: 18px; height: 18px;
  fill: none; stroke: currentColor;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.trial-pop-title { display: flex; flex-direction: column; }
.trial-pop-title b { font-size: 15px; font-weight: 600; line-height: 1.3; color: var(--ink); }
.trial-pop-title em { font-style: normal; font-size: 12px; color: var(--ink-3); margin-top: 2px; }

.trial-pop-desc { margin-top: 14px; font-size: 13px; line-height: 1.75; color: var(--ink-2); }
.trial-sec-label { margin-top: 16px; font-size: 12px; color: var(--ink-3); margin-bottom: 8px; }

.trial-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.trial-tags li {
  padding: 3px 10px;
  border-radius: 6px;
  background: #F1F5F9;
  color: var(--ink-2);
  font-size: 12px;
  line-height: 1.7;
}

.trial-qr {
  margin-top: 16px;
  padding: 12px;
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: 10px;
  text-align: center;
}
.trial-qr img { width: 100%; max-width: 180px; border-radius: 4px; background: #fff; display: block; margin: 0 auto; }
.trial-qr-fallback { display: none; font-size: 12px; color: var(--ink-3); }
.trial-qr-cap { margin-top: 10px; font-size: 13px; font-weight: 500; color: var(--ink); }

/* ── 滚动淡入 ─────────────────────────────────────────────── */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: none; }

/* ── 响应式 ───────────────────────────────────────────────── */
@media (max-width: 1040px) {
  .func-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .adv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .hero { padding: 56px 0 64px; }
  .hero-inner { grid-template-columns: 1fr; gap: 40px; }
  .hero-copy { text-align: left; }
  .hero-points { margin-top: 22px; }
  .showcase { grid-template-columns: 1fr; justify-items: stretch; gap: 34px; }
  .shot-phone img.shot { width: min(300px, 100%); margin: 0 auto; }
  .section { padding: 64px 0; }
  .sec-head { margin-bottom: 36px; }
  .gains-grid { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .nav-links { display: none; }
  .btn-login { margin-left: auto; }
  .func-grid { grid-template-columns: 1fr; }
  .adv-grid { grid-template-columns: 1fr; }
  .gain-cols { grid-template-columns: 1fr; }
  .case-tabs { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; padding-bottom: 4px; }
  .case-tab { flex: 0 0 auto; }
  .case-panel { padding: 24px 20px; }
  .trial-float { right: 14px; bottom: 84px; }
  .trial-btn { height: 40px; font-size: 14px; padding: 0 16px 0 13px; }
  .trial-pop { width: calc(100vw - 28px); }
  .foot-line { font-size: 12.5px; }
}

/* 尊重系统「减少动态效果」 */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .btn, .trial-btn, .func, .gain, .adv, .case-panel { transition: none; }
  .case-panel.is-active { animation: none; }
}