/* ============================================================
   AmpRack · 设计系统  v2 · 「夜幕」
   来源 = 用户选中的那张卡：source/cards/card-3（方向 C）
   库出处：ui-ux-pro-max › style = "Modern Dark (Cinema)"
          底  = 线性渐变 #0a0a0f → #020203
          卡  = radius 16 · 发丝描边 rgba(255,255,255,.08~.10) · 玻璃（blur）
          氛围 = 两个极淡模糊光斑
   排版：库 › typography = "Modern Dark Cinema"（单一家族 + 等宽大写标签）
   站内不引外部字体 → 用系统栈对齐同一套角色
   ⛔ 卡就是规格。不确定的地方回卡里找，不另立第二套方向。

   ⚠️ 变量名与组件类名沿用 v1（页面已有，不改页面就能换皮）。
   ============================================================ */

:root{
  /* ---------- 表面 ---------- */
  --bg-top:      #0A0A0F;
  --bg-bot:      #020203;
  --glass:       rgba(255,255,255,.045);
  --glass-2:     rgba(255,255,255,.07);
  --glass-3:     rgba(255,255,255,.10);
  --hair:        rgba(255,255,255,.10);
  --hair-2:      rgba(255,255,255,.18);
  --hair-soft:   rgba(255,255,255,.06);

  /* ---------- 文字 ---------- */
  --fg:          #F5F5F7;
  --fg-2:        rgba(245,245,247,.70);
  --fg-3:        rgba(245,245,247,.56);   /* 对比度 ≥4.5:1 —— 小号等宽标签要用它 */

  /* ---------- 强调（全站一点薄荷） ---------- */
  --mint:        #5EEAD4;
  --mint-soft:   rgba(94,234,212,.12);
  --mint-ink:    #04241F;

  /* ---------- v1 变量名 → v2 值的映射（页面局部样式依赖这些名字） ---------- */
  --paper:       #0A0A0F;
  --paper-2:     rgba(255,255,255,.03);
  --field:       var(--glass);
  --ink:         var(--fg);
  --ink-2:       var(--fg-2);
  --ink-3:       var(--fg-3);
  --rule:        var(--hair-soft);
  --rule-2:      var(--hair);
  --mark:        var(--mint);
  --mark-soft:   var(--mint-soft);

  /* 语义别名（组件只用这一层） */
  --bg: var(--bg-top);
  --surface: var(--glass);
  --text: var(--fg);
  --text-2: var(--fg-2);
  --text-3: var(--fg-3);
  --line: var(--hair-soft);
  --line-strong: var(--hair);
  --accent: var(--mint);
  --on-accent: var(--mint-ink);

  /* ---------- 字体 · 三角色 ---------- */
  --font-display: system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --font-body:    system-ui,-apple-system,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
  --font-mono:    "Consolas","Cascadia Mono","SFMono-Regular","Courier New",monospace;

  /* ---------- 间距（4/8 基准，沿用 v1） ---------- */
  --s1:4px;  --s2:8px;  --s3:12px; --s4:16px; --s5:22px;
  --s6:28px; --s7:36px; --s8:44px; --s9:56px; --s10:72px; --s11:96px;

  /* ---------- 圆角（卡：radius 16） ---------- */
  --r0:0; --r1:10px; --r2:16px; --r-pill:999px;
  --radius: var(--r2);

  /* ---------- 版心 ---------- */
  --maxw: 1160px;
  --gutter: var(--s5);

  /* ---------- 字号阶 ---------- */
  --fs-h1: clamp(32px, 4.8vw, 58px);
  --fs-h2: clamp(22px, 3vw, 38px);
  --fs-h3: 19px;
  --fs-body: 16.5px;
  --fs-small: 15px;
  --fs-mono: 11.5px;
  --fs-mono-lg: 12.5px;

  /* ---------- 阴影（深色下用内高光 + 外阴影） ---------- */
  --sh-card: 0 1px 0 rgba(255,255,255,.05) inset, 0 18px 40px rgba(0,0,0,.35);
  --sh-soft: 0 1px 0 rgba(255,255,255,.04) inset, 0 10px 24px rgba(0,0,0,.28);
  --blur: blur(14px);
}

/* ============================================================
   基线
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
html{
  -webkit-text-size-adjust:100%;color-scheme:dark;
  /* 渐变放在 html 上；body 透明 —— 这样负 z-index 的光斑才看得见 */
  background-color:var(--bg-top);
  background-image:linear-gradient(180deg,var(--bg-top) 0%,var(--bg-bot) 62%);
  background-repeat:no-repeat;
  background-attachment:fixed;
}
body{
  margin:0;
  background:transparent;
  color:var(--text);
  font:var(--fs-body)/1.62 var(--font-body);
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
  overflow-x:hidden;
}
/* 两个极淡光斑 —— 卡里的氛围层。z-index:-1，不挡内容、不接事件。 */
body::before,
body::after{
  content:"";position:fixed;z-index:-1;border-radius:50%;pointer-events:none;
  filter:blur(90px);
}
body::before{width:520px;height:520px;left:-160px;top:-140px;background:rgba(94,234,212,.10)}
body::after{width:620px;height:620px;right:-200px;top:120px;background:rgba(120,120,255,.10)}

img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4{margin:0;font-family:var(--font-display);font-weight:600;letter-spacing:-.025em;line-height:1.1}
h1{font-size:var(--fs-h1)}
h2{font-size:var(--fs-h2)}
h3{font-size:var(--fs-h3)}
h1+p,h1+.lede,h1+ul,h1+ol{margin-top:var(--s4)}
p{margin:0}
ul,ol,figure,figcaption,blockquote{margin:0}
table{border-collapse:collapse}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}
.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-9999px}
.skip:focus{left:var(--s4);top:var(--s4);z-index:99;background:var(--mint);color:var(--mint-ink);
  border-radius:var(--r1);padding:10px 14px;font:var(--fs-mono)/1 var(--font-mono);font-weight:700}

main{position:relative;z-index:1}

/* ============================================================
   组件 · 页眉（玻璃条）
   ============================================================ */
.site-nav{
  position:sticky;top:0;z-index:20;
  background:rgba(10,10,15,.62);
  -webkit-backdrop-filter:blur(20px) saturate(160%);
  backdrop-filter:blur(20px) saturate(160%);
  border-bottom:1px solid var(--hair);
}
.site-nav__in{display:flex;align-items:center;gap:var(--s5);flex-wrap:wrap;padding:var(--s3) 0}
.site-nav__brand{font-family:var(--font-display);font-weight:700;font-size:17.5px;letter-spacing:-.02em;
  color:var(--fg);text-decoration:none}
.site-nav__links{display:flex;gap:var(--s5);flex-wrap:wrap}
.site-nav__links a{
  font-size:14px;letter-spacing:0;text-transform:none;
  color:var(--text-2);text-decoration:none;padding:3px 0;border-bottom:1px solid transparent;
  transition:color .16s cubic-bezier(.16,1,.3,1),border-color .16s cubic-bezier(.16,1,.3,1);
}
.site-nav__links a:hover{color:var(--fg);border-bottom-color:var(--hair-2)}
.site-nav__links a[aria-current="page"]{color:var(--fg);border-bottom-color:var(--mint)}
.site-nav__cta{
  margin-left:auto;border:1px solid var(--hair-2);border-radius:var(--r-pill);
  background:var(--glass);padding:10px 18px;color:var(--fg);text-decoration:none;
  font-size:14px;font-weight:600;letter-spacing:0;text-transform:none;white-space:nowrap;
  transition:background .16s cubic-bezier(.16,1,.3,1),color .16s,border-color .16s;
}
.site-nav__cta:hover{background:var(--mint);color:var(--mint-ink);border-color:var(--mint)}

/* ============================================================
   组件 · 页脚
   ============================================================ */
.site-foot{
  position:relative;z-index:1;
  border-top:1px solid var(--hair);
  margin-top:clamp(36px,6vh,84px);
  padding:var(--s6) 0 var(--s9);
}
.site-foot__in{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:var(--s6) var(--s7)}
.site-foot h2{font:var(--fs-mono)/1.6 var(--font-mono);letter-spacing:.16em;text-transform:uppercase;
  color:var(--text-3);font-weight:400;margin:0 0 var(--s3)}
.site-foot ul{list-style:none;padding:0}
.site-foot li{margin:7px 0}
.site-foot a{color:var(--text-2);text-decoration:none;font-size:var(--fs-small)}
.site-foot a:hover{color:var(--mint)}
.site-foot__brand{font-family:var(--font-display);font-weight:700;font-size:20px;letter-spacing:-.02em;color:var(--fg)}
.site-foot__note{margin-top:var(--s3);color:var(--text-3);font:var(--fs-mono)/1.9 var(--font-mono)}
.site-foot__legal{margin-top:var(--s6);padding-top:var(--s4);border-top:1px solid var(--hair-soft);
  display:flex;gap:var(--s4) var(--s6);flex-wrap:wrap;
  font:var(--fs-mono)/1.9 var(--font-mono);color:var(--text-3)}
.site-foot__member{color:var(--text-2);border-bottom:1px solid var(--hair)}

/* ============================================================
   组件 · 板块骨架
   ============================================================ */
.band{padding:var(--s8) 0;border-bottom:1px solid var(--hair-soft)}
.band--tight{padding:var(--s7) 0}
.band--field{background:var(--glass);border-radius:var(--r2);border-bottom:0;
  padding:var(--s7) var(--s6);margin:var(--s3) 0}
.band--ink{background:rgba(0,0,0,.28);border-bottom-color:var(--hair);border-radius:var(--r2)}
.band--ink .sec__num{color:var(--mint)}
.band--ink .sec__hint{color:var(--text-3)}
.band--ink .lede{color:var(--text-2)}

.sec__head{display:flex;align-items:baseline;gap:var(--s4);flex-wrap:wrap;margin-bottom:var(--s5)}
.sec__num{font:var(--fs-mono)/1 var(--font-mono);letter-spacing:.2em;text-transform:uppercase;color:var(--mint)}
.sec__head h2{font-size:var(--fs-h2)}
.sec__hint{margin-left:auto;font:var(--fs-mono)/1.5 var(--font-mono);letter-spacing:.12em;
  text-transform:uppercase;color:var(--text-3)}
.lede{color:var(--text-2);max-width:46em}
.lede+.lede{margin-top:var(--s3)}

/* ============================================================
   组件 · 规格（v1 是白底线框表 → v2 是发丝行玻璃卡）
   ============================================================ */
.spec{
  width:100%;background:rgba(255,255,255,.02);border:1px solid var(--hair);
  border-radius:var(--r2);overflow:hidden;
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
}
.spec caption{text-align:left;padding:var(--s4) var(--s5) 0;
  font:var(--fs-mono)/1.6 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--text-3)}
.spec th,.spec td{text-align:left;padding:15px 20px;font-size:var(--fs-small);
  border-top:1px solid var(--hair-soft);vertical-align:top}
.spec thead th{border-top:0;border-bottom:1px solid var(--hair);
  background:rgba(255,255,255,.03);
  font:11px/1.4 var(--font-mono);letter-spacing:.13em;text-transform:uppercase;color:var(--text-3);font-weight:400}
.spec tbody th{font-weight:600;width:30%;color:var(--fg)}
.spec tbody td{color:var(--text-2)}
.spec tbody td.src{font-family:var(--font-mono);color:var(--text-3);white-space:nowrap;width:1%}
.spec tbody tr:hover th,.spec tbody tr:hover td{background:rgba(255,255,255,.025)}
.spec--dense th,.spec--dense td{padding:12px 16px;font-size:14px}

/* ============================================================
   组件 · 数据点行（v2：一粒粒薄荷点的玻璃行）
   ============================================================ */
.facts{list-style:none;padding:0;display:grid;gap:var(--s2);background:transparent;border:0}
.facts li{
  background:var(--glass);border:1px solid var(--hair);border-radius:var(--r1);
  padding:14px 18px;display:flex;gap:var(--s4);align-items:baseline;
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
}
.facts b{font:var(--fs-mono)/1.5 var(--font-mono);letter-spacing:.06em;color:var(--mint);
  min-width:34px;font-weight:600}
.facts span{font-size:var(--fs-small);color:var(--text-2)}

/* ============================================================
   组件 · 按钮
   ============================================================ */
.btn{display:inline-block;padding:14px 20px;text-decoration:none;cursor:pointer;
  font-size:15px;font-weight:600;letter-spacing:0;text-transform:none;
  border:1px solid var(--hair-2);border-radius:var(--r2);
  color:var(--fg);background:var(--glass);
  transition:background .16s cubic-bezier(.16,1,.3,1),color .16s,border-color .16s;
}
.btn:hover{background:var(--glass-3)}
.btn--primary{background:var(--mint);border-color:var(--mint);color:var(--mint-ink)}
.btn--primary:hover{background:#7FF3E0;border-color:#7FF3E0}
.btn-row{display:flex;gap:var(--s3);flex-wrap:wrap;margin-top:var(--s6)}

/* ============================================================
   组件 · 边界声明块
   ============================================================ */
.boundary{
  background:var(--glass);border:1px solid var(--hair);border-left:2px solid var(--mint);
  border-radius:var(--r2);padding:var(--s5) var(--s6);
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
}
.boundary h2{font-size:var(--fs-h2);margin-bottom:var(--s3)}
.boundary ul{list-style:none;padding:0}
.boundary li{padding:11px 0;border-top:1px solid var(--hair-soft);font-size:var(--fs-small);color:var(--text-2)}
.boundary li:first-child{border-top:0}
.boundary li b{color:var(--fg)}

/* ============================================================
   组件 · 卡片组
   ============================================================ */
.cards{display:grid;gap:var(--s4);grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.card{
  background:var(--glass);border:1px solid var(--hair);border-radius:var(--r2);
  display:flex;flex-direction:column;overflow:hidden;
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  box-shadow:var(--sh-card);
  transition:border-color .18s cubic-bezier(.16,1,.3,1),background .18s;
}
.card:hover{border-color:var(--hair-2);background:var(--glass-2)}
.card img{width:100%;aspect-ratio:4/3;object-fit:cover;border-bottom:1px solid var(--hair-soft)}
.card__body{padding:var(--s5) var(--s5) var(--s6);display:flex;flex-direction:column;gap:var(--s2);flex:1}
.card__num{font:var(--fs-mono)/1 var(--font-mono);letter-spacing:.16em;color:var(--mint)}
.card__title{font-family:var(--font-display);font-weight:600;font-size:var(--fs-h3)}
.card__text{font-size:14px;color:var(--text-2)}
.card__meta{margin-top:auto;padding-top:var(--s3);border-top:1px solid var(--hair-soft);
  font:var(--fs-mono)/1.8 var(--font-mono);color:var(--text-3)}

/* ============================================================
   组件 · 步骤行
   ============================================================ */
.steps{list-style:none;padding:0;border-top:1px solid var(--hair)}
.steps li{display:grid;grid-template-columns:56px 1fr 1.6fr;gap:var(--s4);
  padding:var(--s4) 0;border-bottom:1px solid var(--hair-soft);align-items:baseline}
.steps__n{font:var(--fs-mono)/1.6 var(--font-mono);color:var(--mint)}
.steps__t{font-family:var(--font-display);font-weight:600;font-size:var(--fs-h3)}
.steps__d{font-size:var(--fs-small);color:var(--text-2)}

/* ============================================================
   组件 · 首屏
   ============================================================ */
.hero{border-bottom:1px solid var(--hair-soft)}
.hero__in{display:grid;grid-template-columns:1.06fr .94fr;gap:clamp(24px,4vw,64px);
  align-items:center;padding:clamp(40px,7vh,96px) 0 clamp(30px,5vh,56px)}
.hero__text{padding:0}
.kicker{font:var(--fs-mono)/1.5 var(--font-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--text-3)}
.hero h1{font-size:var(--fs-h1);margin-top:var(--s5);max-width:16em}
.hero__sub{margin-top:var(--s5);color:var(--text-2);font-size:17.5px;max-width:32em}
.hero__facts{margin-top:var(--s6)}
.hero__fig{
  position:relative;border:1px solid var(--hair);border-radius:var(--r2);overflow:hidden;
  min-height:340px;background:var(--glass);
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  box-shadow:var(--sh-card);
}
.hero__fig img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.94}
.hero__fig figcaption{position:absolute;left:0;right:0;bottom:0;padding:12px 16px;
  background:rgba(10,10,15,.72);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border-top:1px solid var(--hair);
  font:var(--fs-mono)/1.7 var(--font-mono);letter-spacing:.06em;color:var(--text-2)}

/* 尺寸线 → v2 的母题：接缝里透出来的一道薄荷光 */
.dim{position:absolute;background:var(--mint);box-shadow:0 0 12px var(--mint);opacity:.85}
.dim--v{left:26px;top:14%;bottom:14%;width:1px}
.dim--h{bottom:52px;left:26px;right:26px;height:1px}
.dim::before,.dim::after{content:"";position:absolute;background:var(--mint)}
.dim--v::before{top:-1px;left:-4px;width:9px;height:1px}
.dim--v::after{bottom:-1px;left:-4px;width:9px;height:1px}
.dim--h::before{left:-1px;top:-4px;height:9px;width:1px}
.dim--h::after{right:-1px;top:-4px;height:9px;width:1px}
.dim__label{position:absolute;font:10.5px/1 var(--font-mono);letter-spacing:.12em;
  color:var(--mint-ink);background:var(--mint);border-radius:var(--r-pill);padding:3px 8px}
.dim__label--v{left:12px;top:50%;transform:translateY(-50%) rotate(-90deg)}
.dim__label--h{bottom:40px;left:50%;transform:translateX(-50%)}

/* ============================================================
   组件 · 剖面图（冷 / 热通道）—— 纯 CSS，不用图片
   ============================================================ */
.corridor{display:grid;grid-template-columns:1fr 200px 1fr;
  border:1px solid var(--hair);border-radius:var(--r2);overflow:hidden;background:rgba(255,255,255,.02)}
.corridor__rows{display:grid;grid-template-rows:repeat(4,1fr);gap:1px;background:var(--hair-soft)}
.corridor__rows i{display:block;background:rgba(255,255,255,.05);min-height:74px}
.corridor__aisle{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;
  padding:var(--s5) var(--s3);border-left:1px solid var(--hair);border-right:1px solid var(--hair);
  background:rgba(94,234,212,.06)}
.corridor__k{font:10.5px/1.5 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;
  text-align:center;color:var(--text-3)}
.corridor__t{font-family:var(--font-display);font-weight:600;font-size:var(--fs-h3);text-align:center;color:var(--fg)}
.corridor__cap{margin-top:var(--s3);font:var(--fs-mono)/1.8 var(--font-mono);letter-spacing:.06em;color:var(--text-3)}

/* ============================================================
   组件 · 询价清单
   ============================================================ */
.ask{display:grid;gap:var(--s3);border:0;background:transparent;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.ask>div{background:var(--glass);border:1px solid var(--hair);border-radius:var(--r1);padding:var(--s5);
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur)}
.ask dt{font:11px/1.5 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mint)}
.ask dd{margin:var(--s2) 0 0;font-size:var(--fs-small);color:var(--text-2)}

/* ============================================================
   响应式
   ============================================================ */
@media (max-width:960px){
  .hero__in{grid-template-columns:1fr}
  .hero__fig{min-height:300px}
  .site-foot__in{grid-template-columns:1fr 1fr}
  .corridor{grid-template-columns:1fr}
  .corridor__aisle{border-left:0;border-right:0;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
  .corridor__rows i{min-height:40px}
  .steps li{grid-template-columns:40px 1fr}
  .steps__d{grid-column:2}
}
@media (max-width:640px){
  .site-nav__cta{margin-left:0}
  .site-foot__in{grid-template-columns:1fr}
  .spec tbody th{width:42%}
  .hero__fig{min-height:240px}
  body::before,body::after{display:none}
}
@media print{
  html{background-image:none;background-color:#fff}
  body{color:#000}
  body::before,body::after{display:none}
  .site-nav{position:static}
  .band{break-inside:avoid}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
}