/* ============================================================
   qigeusa.com · 凯基美国 —— 全站样式唯一真相源
   ------------------------------------------------------------
   🔴 铁律:nav / footer / 按钮 / 区块 / 色变量只在这一份里定义。
   8/22/2026 从 index.html 的内联 <style> 原样抽出 —— 内容站要开
   三个类目 + 每日一篇文章,再让每页各带一份 CSS,必然分叉。
   ------------------------------------------------------------
   9/9/2026 字号体系重定(全站字体做到行业标准上限):
   正文 18px、文章正文 19px、导语 20px;任何可见文字不低于 13px。
   字号一律走下方 --fs-* 阶梯,不再在各处写零散像素值;
   中文标题不用负字距(西文习惯,对 CJK 只会挤字),行高按中文排版放宽。
   ============================================================ */
  /* ===== 器 · 品牌槽位(第五条:色彩不设限,本系统取靛蓝为主、朱红为辅——红为中国、蓝为美国)===== */
  :root{
    --bg:#ffffff; --bg2:#f5f7fa; --card:#ffffff;
    --ink:#12161d; --ink2:#454c58; --ink3:#767d8a;
    --line:#e2e6ee; --line2:#ccd3df;
    --acc:#1b4f9e; --acc2:#153c7c; --acc-w:#1b4f9e0e;
    --cn:#b8322c; --cn-w:#b8322c0e;
    --on-acc:#ffffff;
    /* 国旗用色(固定值,不随明暗主题变——国旗颜色不是品牌槽位) */
    --flag-cn-red:#de2910; --flag-cn-star:#ffde00;
    --flag-us-blue:#3c3b6e; --flag-us-red:#b22234; --flag-us-white:#ffffff;
    /* 道 · 结构 token */
    --shape-tian:999px; --radius-lg:16px; --radius-md:12px; --radius-sm:6px;
    --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px; --space-6:32px; --space-7:48px;
    --font-ui:Inter,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    /* 字号阶梯(9/9/2026):所有可见文字从这里取值 */
    --fs-xs:13px;      /* 小标签 / 大写字母标 / 图注副行 —— 全站下限 */
    --fs-sm:15px;      /* 元信息 / 面包屑 / 图注 / 芯片 / 表单标签 */
    --fs-base:18px;    /* 正文 */
    --fs-md:19px;      /* 文章正文 / 卡片正文 */
    --fs-lg:20px;      /* 导语 */
    --fs-xl:22px;      /* 四级标题 */
    --fs-h3:24px;      /* 三级标题 */
    --fs-h2:clamp(30px,3.8vw,42px);
    --fs-h1:clamp(36px,5.4vw,60px);
    --lh-body:1.85; --lh-tight:1.28;
  }
  @media (prefers-color-scheme:dark){
    :root:not([data-theme=light]){
      --bg:#0f1218; --bg2:#161a21; --card:#161a21;
      --ink:#edeff4; --ink2:#b3b9c6; --ink3:#8a919f;
      --line:#242936; --line2:#333a49;
      --acc:#6a9ceb; --acc2:#8ab6f4; --acc-w:#6a9ceb14;
      --cn:#e2776c; --cn-w:#e2776c14;
      --on-acc:#0b0f16;
    }
  }
  :root[data-theme=dark]{
    --bg:#0f1218; --bg2:#161a21; --card:#161a21;
    --ink:#edeff4; --ink2:#b3b9c6; --ink3:#8a919f;
    --line:#242936; --line2:#333a49;
    --acc:#6a9ceb; --acc2:#8ab6f4; --acc-w:#6a9ceb14;
    --cn:#e2776c; --cn-w:#e2776c14;
    --on-acc:#0b0f16;
  }

  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth;scroll-padding-top:92px}
  body{background:var(--bg);color:var(--ink);font-family:var(--font-ui);font-size:var(--fs-base);line-height:var(--lh-body);
       -webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%;overflow-x:clip;
       /* 顶部一层极浅的品牌色晕染,给首屏纵深;不放图,不加噪点 */
       background-image:radial-gradient(1100px 560px at 82% -8%,color-mix(in srgb,var(--acc) 9%,transparent),transparent 70%);
       background-repeat:no-repeat}
  p{text-wrap:pretty}
  ::selection{background:color-mix(in srgb,var(--acc) 22%,transparent)}
  .wrap{max-width:1180px;margin:0 auto;padding:0 var(--space-5)}
  /* 小标签:统一带一段 18px 的同色短横,做视觉锚点 */
  .lbl{display:inline-flex;align-items:center;gap:10px;font-size:var(--fs-xs);font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--acc)}
  .lbl::before{content:"";width:18px;height:2px;border-radius:1px;background:currentColor;flex:none}
  :focus-visible{outline:2px solid var(--acc);outline-offset:3px}
  a{color:inherit}
  img{max-width:100%}

  /* ===== 天 · 顶部一横(第三条:天上的控件一律胶囊)=====
     标识贴左:顶栏不再跟正文共用居中容器,改为整幅一横、标识靠视口左缘。 */
  .nav{position:sticky;top:0;z-index:60;background:color-mix(in srgb,var(--bg) 88%,transparent);
       backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
  .nav-in{max-width:none;margin:0;padding:14px var(--space-5);display:flex;align-items:center;gap:var(--space-5)}
  @media(min-width:1200px){.nav-in{padding-left:var(--space-6);padding-right:var(--space-6)}}
  .brand{display:flex;align-items:center;gap:12px;text-decoration:none}
  .brand svg,.brand img{width:36px;height:36px;flex:none}
  .brand .bt{font-size:21px;font-weight:800;letter-spacing:0;line-height:1.2}
  .brand .be{display:block;font-size:var(--fs-xs);font-weight:600;letter-spacing:.12em;color:var(--ink3);margin-top:2px}
  .nlinks{margin-left:auto;display:flex;gap:var(--space-6);font-size:16px;color:var(--ink2);font-weight:600}
  .nlinks a{text-decoration:none;padding:6px 0;transition:color .15s}
  .nlinks a:hover{color:var(--acc)}
  @media(max-width:960px){.nlinks{display:none}.nav .btn{margin-left:auto}}
  .btn{font-family:inherit;font-weight:700;cursor:pointer;text-decoration:none;display:inline-flex;
       align-items:center;justify-content:center;gap:8px;transition:background .15s,border-color .15s,color .15s,box-shadow .15s}
  .nav .btn{border-radius:var(--shape-tian);padding:10px 22px;font-size:var(--fs-sm);border:1px solid transparent}
  .btn-p{background:var(--acc);color:var(--on-acc);border:1px solid var(--acc)}
  .btn-p:hover{background:var(--acc2);border-color:var(--acc2)}
  .btn-o{background:transparent;color:var(--ink);border:1px solid var(--line2)}
  .btn-o:hover{border-color:var(--acc);color:var(--acc)}
  .body-btn{border-radius:var(--radius-md);padding:15px 30px;font-size:17px}

  /* ===== Hero ===== */
  .hero{padding:84px 0 72px;border-bottom:1px solid var(--line)}
  @media(max-width:880px){.hero{padding:56px 0 52px}}
  .hero-grid{display:grid;grid-template-columns:1.12fr .88fr;gap:var(--space-7);align-items:center}
  @media(max-width:880px){.hero-grid{grid-template-columns:1fr;gap:40px}}
  h1{font-size:var(--fs-h1);line-height:1.18;font-weight:800;letter-spacing:0;margin:18px 0 0;text-wrap:balance}
  @media(max-width:640px){h1{font-size:clamp(30px,8.4vw,40px)}.hubhead h1{font-size:clamp(28px,7.6vw,36px)}.art h1{font-size:clamp(27px,7.2vw,34px)}}
  .h1en{margin-top:16px;font-size:clamp(15px,1.6vw,18px);color:var(--ink3);font-weight:500;letter-spacing:.01em}
  .hlead{margin-top:26px;font-size:var(--fs-lg);line-height:1.9;color:var(--ink2);max-width:56ch}
  .hlead b{color:var(--ink);font-weight:600}
  .hcta{margin-top:34px;display:flex;gap:var(--space-3);flex-wrap:wrap;align-items:center}
  .hmail{font-size:var(--fs-sm);color:var(--ink3)}
  .hmail a{color:var(--acc);font-weight:600;text-decoration:none}
  .hmail a:hover{text-decoration:underline}

  .taiji{width:100%;max-width:360px;margin:0 auto;display:block}
  .tcap{margin-top:var(--space-4);text-align:center;font-size:var(--fs-sm);color:var(--ink3);line-height:1.7}

  .hfacts{margin-top:56px;display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-4)}
  @media(max-width:820px){.hfacts{grid-template-columns:repeat(2,1fr)}}
  .fact{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-md);padding:20px 22px}
  .fact .ft{font-size:var(--fs-base);font-weight:700;letter-spacing:0;line-height:1.4}
  .fact .fe{font-size:var(--fs-xs);color:var(--ink3);letter-spacing:.08em;margin-top:6px;text-transform:uppercase}

  /* ===== 通用节 ===== */
  section{padding:92px 0}
  @media(max-width:880px){section{padding:64px 0}}
  section.alt{background:var(--bg2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
  .shead{margin-bottom:44px;max-width:66ch}
  .shead h2{font-size:var(--fs-h2);font-weight:800;letter-spacing:0;margin-top:14px;line-height:var(--lh-tight);text-wrap:balance}
  .shead p{margin-top:18px;font-size:var(--fs-base);color:var(--ink2);line-height:var(--lh-body)}
  .shead p b{color:var(--ink);font-weight:600}
  h2,h3,h4{letter-spacing:0}

  /* ===== 找工厂两栏(供给侧 / 需求侧)===== */
  .liangyi{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-5)}
  @media(max-width:760px){.liangyi{grid-template-columns:1fr}}
  .team{border-radius:var(--radius-lg);padding:32px}
  @media(max-width:620px){.team{padding:24px}}
  .team.cn{background:var(--cn-w);border:1px solid var(--cn)}
  .team.us{background:var(--acc-w);border:1px solid var(--acc)}
  .team .tk{font-size:var(--fs-xs);font-weight:700;letter-spacing:.14em;text-transform:uppercase}
  .team.cn .tk{color:var(--cn)}
  .team.us .tk{color:var(--acc)}
  .team h3{font-size:var(--fs-h3);font-weight:800;margin:10px 0 6px;line-height:var(--lh-tight)}
  .team .tsub{font-size:var(--fs-sm);color:var(--ink3);margin-bottom:22px}
  .team ul{list-style:none;display:flex;flex-direction:column;gap:14px}
  .team li{font-size:17px;color:var(--ink2);line-height:1.8;padding-left:24px;position:relative}
  .team li b{color:var(--ink);font-weight:600}
  .team li::before{content:"◆";position:absolute;left:0;top:0;font-size:10px;line-height:3}
  .team.cn li::before{color:var(--cn)}
  .team.us li::before{color:var(--acc)}
  .joint{margin-top:var(--space-5);background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);
         padding:28px 32px;font-size:var(--fs-base);line-height:var(--lh-body);color:var(--ink2)}
  .joint b{color:var(--ink);font-weight:700}

  /* ===== 三步流程卡 ===== */
  .why3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-4)}
  @media(max-width:820px){.why3{grid-template-columns:1fr}}
  .why{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);padding:28px}
  .why .wl{font-size:var(--fs-xs);font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--acc);margin-bottom:12px}
  .why h4{font-size:var(--fs-xl);font-weight:800;margin-bottom:12px;line-height:var(--lh-tight)}
  .why p{font-size:16px;color:var(--ink2);line-height:1.8}
  .stack{margin-top:var(--space-5);background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);padding:32px}
  @media(max-width:620px){.stack{padding:24px}}
  .stack h4{font-size:var(--fs-xl);font-weight:800;margin-bottom:8px;line-height:var(--lh-tight)}
  .stack p{font-size:16px;color:var(--ink2);margin-bottom:20px;line-height:1.8}
  .chips{display:flex;flex-wrap:wrap;gap:var(--space-2)}
  .chip{font-size:var(--fs-sm);background:var(--bg2);border:1px solid var(--line);border-radius:var(--radius-sm);padding:7px 14px;color:var(--ink2);line-height:1.5}
  .chip.hi{background:var(--acc-w);border-color:var(--acc);color:var(--acc);font-weight:600}


  /* ===== 联系 ===== */
  .contact{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);padding:48px}
  @media(max-width:620px){.contact{padding:28px 20px}}
  .contact h2{font-size:clamp(28px,3.6vw,38px);font-weight:800;margin:14px 0 14px;line-height:var(--lh-tight);text-wrap:balance}
  .contact .csub{font-size:var(--fs-base);color:var(--ink2);max-width:62ch;line-height:var(--lh-body)}
  .mailrow{margin:34px 0 10px;display:flex;gap:var(--space-3);flex-wrap:wrap;align-items:center}
  .mail{font-size:clamp(20px,3vw,28px);font-weight:800;letter-spacing:0;color:var(--acc);text-decoration:none;
        border:1px solid var(--line2);border-radius:var(--radius-md);padding:14px 24px;background:var(--acc-w)}
  .mail:hover{border-color:var(--acc)}
  .copy{border-radius:var(--radius-md);padding:14px 22px;font-size:var(--fs-sm);background:transparent;color:var(--ink);border:1px solid var(--line2)}
  .copy:hover{border-color:var(--acc);color:var(--acc)}
  .copy.done{border-color:var(--acc);color:var(--acc)}
  .tips{margin-top:26px;background:var(--bg2);border:1px solid var(--line);border-radius:var(--radius-md);padding:22px 26px}
  .tips .tt{font-size:16px;font-weight:700;margin-bottom:10px;line-height:1.7}
  .tips ol{margin:0;padding-left:22px;font-size:16px;color:var(--ink2);line-height:1.95}
  /* 咨询表单(8/20/2026):留言直接落库,不再只给一个 mailto。
     四边 1px 等宽,区分靠底色 —— 宪法第五条之二。 */
  .form{margin-top:34px;display:grid;grid-template-columns:1fr 1fr;gap:18px}
  @media(max-width:620px){.form{grid-template-columns:1fr}}
  .f{display:flex;flex-direction:column;gap:8px}
  .f.wide{grid-column:1/-1}
  .f label,.f .label{font-size:var(--fs-sm);font-weight:700;color:var(--ink2);line-height:1.6}
  .f label .opt{font-weight:400;color:var(--ink3)}
  .f input,.f select,.f textarea{font-family:inherit;font-size:17px;line-height:1.6;color:var(--ink);
    background:var(--bg);border:1px solid var(--line2);border-radius:var(--radius-md);padding:13px 16px;width:100%}
  .f textarea{resize:vertical;min-height:140px}
  .f input:focus,.f select:focus,.f textarea:focus{outline:2px solid var(--acc);outline-offset:1px;border-color:var(--acc)}
  .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
  .frow{grid-column:1/-1;display:flex;gap:var(--space-4);align-items:center;flex-wrap:wrap;margin-top:4px}
  .frow .btn{font-size:17px;padding:15px 34px;border-radius:var(--radius-md)}
  .fmsg{font-size:var(--fs-sm);line-height:1.7}
  .fmsg.err{color:var(--cn)}
  .fmsg.ok{color:var(--acc);font-weight:700}
  .fnote{grid-column:1/-1;font-size:var(--fs-sm);color:var(--ink3);line-height:1.8}
  .fdone{background:var(--acc-w);border:1px solid var(--acc);border-radius:var(--radius-md);padding:24px 26px;margin-top:34px}
  .fdone h3{font-size:var(--fs-xl);font-weight:800;margin-bottom:8px}
  .fdone p{font-size:16px;color:var(--ink2);line-height:1.8}

  /* ===== 地 · 页脚(整块居中)===== */
  footer{border-top:1px solid var(--line);padding:56px 0 64px;background:var(--bg2);text-align:center}
  .fbrand{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:18px}
  .fbrand svg,.fbrand img{width:32px;height:32px}
  .fbrand span{font-size:21px;font-weight:800}
  .fe2{font-size:var(--fs-sm);color:var(--ink3);letter-spacing:.03em;line-height:2.15;max-width:72ch;margin:0 auto}
  .fe2 a{color:var(--acc);text-decoration:none}
  .fe2 a:hover{text-decoration:underline}

/* ===== 品类聚焦区(9/9/2026:饰品珠宝,主做 925 银)===== */
.twolayer{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-5)}
@media(max-width:760px){.twolayer{grid-template-columns:1fr}}
.layer{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);padding:32px}
.layer .lk{font-size:var(--fs-xs);font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink3)}
.layer h3{font-size:var(--fs-h3);font-weight:800;margin:10px 0 6px;line-height:var(--lh-tight)}
.layer .lsub{font-size:var(--fs-sm);color:var(--ink3);margin-bottom:20px;line-height:1.7}
.belt{margin-top:var(--space-5);background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);padding:32px}
@media(max-width:620px){.belt{padding:24px}}
.belt h4{font-size:var(--fs-xl);font-weight:800;margin-bottom:8px;line-height:var(--lh-tight)}
.belt>p{font-size:16px;color:var(--ink3);line-height:1.8;margin-bottom:22px}
.belt-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-4)}
@media(max-width:760px){.belt-grid{grid-template-columns:1fr}}
.belt-city{background:var(--bg2);border:1px solid var(--line);border-radius:var(--radius-md);padding:24px}
.belt-city .bc{font-size:var(--fs-xl);font-weight:800;line-height:var(--lh-tight)}
.belt-city .be2{font-size:var(--fs-xs);font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink3);margin-top:6px}
.belt-city p{font-size:16px;color:var(--ink2);line-height:1.8;margin-top:14px}
.belt-more{margin-top:22px;font-size:16px;color:var(--ink3);line-height:1.8}

/* ===== 表单单选 pill(不用原生 select:展开后的列表由系统绘制,CSS 管不到,
   必然出现「输入框是我们的样式、下拉是系统白方框」的割裂)===== */
.pills{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.pills input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.pills label{font-size:var(--fs-sm);line-height:1.6;padding:10px 18px;border-radius:var(--shape-tian);
  border:1px solid var(--line2);background:var(--card);color:var(--ink2);cursor:pointer;
  user-select:none;transition:border-color .12s,color .12s,background .12s}
.pills label:hover{border-color:var(--acc);color:var(--acc)}
.pills input:checked+label{background:var(--acc);border-color:var(--acc);color:var(--on-acc);font-weight:700}
.pills input:focus-visible+label{outline:2px solid var(--acc);outline-offset:2px}

/* ===== 内容站:类目 hub 与文章页 ===== */
.hubhead{padding:64px 0 48px;border-bottom:1px solid var(--line)}
@media(max-width:880px){.hubhead{padding:44px 0 36px}}
.hubhead h1{font-size:clamp(32px,4.6vw,50px)}
.hubhead .hlead{margin-top:22px}
.cats{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-4)}
@media(max-width:880px){.cats{grid-template-columns:1fr}}
.cat{display:block;text-decoration:none;color:inherit;background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius-lg);padding:32px;transition:border-color .15s,box-shadow .15s}
.cat:hover{border-color:var(--acc);box-shadow:0 12px 32px -18px color-mix(in srgb,var(--acc) 45%,transparent)}
.cat .ck{font-size:var(--fs-xs);font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--acc)}
.cat h3{font-size:var(--fs-h3);font-weight:800;margin:12px 0 12px;line-height:var(--lh-tight)}
.cat p{font-size:16px;color:var(--ink2);line-height:1.8}
.cat .cn{margin-top:18px;font-size:var(--fs-sm);color:var(--acc);font-weight:600}
.plist{display:flex;flex-direction:column;gap:var(--space-3)}
.pitem{display:block;text-decoration:none;color:inherit;background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius-md);padding:26px 28px;transition:border-color .15s,box-shadow .15s}
.pitem:hover{border-color:var(--acc);box-shadow:0 12px 32px -18px color-mix(in srgb,var(--acc) 45%,transparent)}
.pitem .pd{font-size:var(--fs-sm);color:var(--ink3);letter-spacing:.03em}
.pitem h3{font-size:var(--fs-xl);font-weight:700;margin:8px 0 10px;line-height:1.45}
.pitem p{font-size:16px;color:var(--ink2);line-height:1.8}
.crumb{font-size:var(--fs-sm);color:var(--ink3);padding:26px 0 0}
.crumb a{color:var(--ink2);text-decoration:none}
.crumb a:hover{color:var(--acc)}
.art{max-width:74ch;margin:0 auto;padding:12px 0 80px}
.art h1{font-size:clamp(32px,4.2vw,46px);margin:18px 0 0;line-height:1.28}
.art .meta{margin-top:20px;font-size:var(--fs-sm);color:var(--ink3);line-height:1.9;
  padding-bottom:26px;border-bottom:1px solid var(--line)}
.art h2{font-size:clamp(24px,3vw,31px);font-weight:800;margin:56px 0 18px;line-height:1.38}
.art h3{font-size:var(--fs-xl);font-weight:700;margin:36px 0 12px;line-height:1.45}
.art p{font-size:var(--fs-md);line-height:1.95;color:var(--ink2);margin:0 0 20px}
.art p b,.art li b{color:var(--ink);font-weight:600}
.art ul,.art ol{margin:0 0 22px;padding-left:24px}
.art li{font-size:var(--fs-md);line-height:1.95;color:var(--ink2);margin-bottom:10px}
.art .lead{font-size:21px;color:var(--ink);line-height:1.9}
.art table{width:100%;border-collapse:collapse;margin:0 0 24px;font-size:16.5px}
.art th,.art td{border:1px solid var(--line);padding:13px 16px;text-align:left;line-height:1.75;color:var(--ink2)}
.art th{background:var(--bg2);color:var(--ink);font-weight:700}
.art .tw{overflow-x:auto;margin-bottom:24px}
.art .tw table{margin-bottom:0}
.note{background:var(--bg2);border:1px solid var(--line);border-radius:var(--radius-md);padding:22px 26px;margin:0 0 26px}
.note .nt{font-size:16px;font-weight:700;margin-bottom:10px;color:var(--ink)}
.note p:last-child{margin-bottom:0}
.artcta{margin-top:56px;background:var(--acc-w);border:1px solid var(--acc);border-radius:var(--radius-lg);padding:32px}
.artcta h3{font-size:var(--fs-xl);font-weight:800;margin:0 0 12px;line-height:var(--lh-tight)}
.artcta p{font-size:17px;color:var(--ink2);line-height:1.85;margin-bottom:22px}

  /* ===== 品类聚焦 v3(9/8/2026):五条产品线 + 实拍陈列 =====
     饰品珠宝,主做 925 银——925 银 / K 金托为主推,莫桑石 / 培育钻 / 培育彩宝 / 天然宝石主石;其他底材按订单定制。
     图片为本公司美国端在售与供应商实拍;陈列区取深底 + 金色点缀,衬彩色主石。 */
  :root{--gold:#c9a24a;--gold-w:#c9a24a22;--show-bg:#0d0f14;--show-bg2:#14171e;--show-line:#2a2f3b;--show-ink:#f2f3f6;--show-ink2:#b9bfcb}

  /* hero 右栏:四宫格实拍 */
  .hmosaic{display:grid;grid-template-columns:1fr 1fr;gap:8px;max-width:480px;margin:0 auto}
  .hmosaic figure{position:relative;margin:0;border:1px solid var(--line);border-radius:var(--radius-md);overflow:hidden;background:var(--bg2);aspect-ratio:1}
  .hmosaic img{display:block;width:100%;height:100%;object-fit:cover}
  .hmosaic figcaption{position:absolute;left:0;right:0;bottom:0;padding:22px 12px 10px;font-size:var(--fs-xs);font-weight:700;letter-spacing:.04em;color:#fff;
    background:linear-gradient(to top,rgba(0,0,0,.66),rgba(0,0,0,0))}

  /* 五条产品线 */
  .lines{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--space-4)}
  @media(max-width:1100px){.lines{grid-template-columns:repeat(3,1fr)}}
  @media(max-width:640px){.lines{grid-template-columns:1fr 1fr}}
  @media(max-width:420px){.lines{grid-template-columns:1fr}}
  .line{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;display:flex;flex-direction:column}
  .line>img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover;border-bottom:1px solid var(--line)}
  .line-body{padding:20px 20px 22px;display:flex;flex-direction:column;gap:8px;flex:1}
  .line .lk{font-size:var(--fs-xs);font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
  .line h3{font-size:var(--fs-xl);font-weight:800;line-height:var(--lh-tight)}
  .line .lsub{font-size:var(--fs-sm);color:var(--ink2);line-height:1.75;margin:0 0 8px}
  .line .chips{margin-top:auto;gap:6px}
  .line .chip{font-size:var(--fs-xs);padding:4px 10px}

  /* 主推托材与主石两格 */
  .boundary{margin-top:var(--space-5);display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;background:var(--card)}
  @media(max-width:760px){.boundary{grid-template-columns:1fr}}
  .boundary>div{padding:22px 26px;border-right:1px solid var(--line);display:flex;flex-direction:column;gap:8px}
  .boundary>div:last-child{border-right:0}
  @media(max-width:760px){.boundary>div{border-right:0;border-bottom:1px solid var(--line)}.boundary>div:last-child{border-bottom:0}}
  .boundary .lk{font-size:var(--fs-xs);font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink3)}
  .boundary b{font-size:17px;font-weight:700;line-height:1.6}

  /* 实拍陈列:深底 */
  section.showcase{background:var(--show-bg);color:var(--show-ink);border-top:1px solid var(--show-line);border-bottom:1px solid var(--show-line)}
  .showcase .lbl{color:var(--gold)}
  .showcase .shead h2{color:var(--show-ink)}
  .showcase .shead p{color:var(--show-ink2)}
  .gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-4)}
  @media(max-width:900px){.gallery{grid-template-columns:repeat(3,1fr)}}
  @media(max-width:560px){.gallery{grid-template-columns:1fr 1fr}}
  .gallery figure{margin:0;position:relative;border:1px solid var(--show-line);border-radius:var(--radius-md);overflow:hidden;background:var(--show-bg2);aspect-ratio:1}
  .gallery img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
  .gallery figure:hover img{transform:scale(1.04)}
  .gallery figcaption{position:absolute;left:0;right:0;bottom:0;padding:34px 16px 14px;display:flex;flex-direction:column;gap:3px;
    background:linear-gradient(to top,rgba(5,6,10,.82),rgba(5,6,10,0))}
  .gallery figcaption b{font-size:var(--fs-sm);font-weight:700;color:#fff;line-height:1.4}
  .gallery figcaption span{font-size:var(--fs-xs);color:var(--gold);letter-spacing:.04em}
  .showcase .belt{margin-top:var(--space-7);background:var(--show-bg2);border-color:var(--show-line)}
  .showcase .belt h4{color:var(--show-ink)}
  .showcase .belt>p,.showcase .belt-more{color:var(--show-ink2)}
  .showcase .belt-more b{color:var(--gold)}
  .showcase .belt-city{background:var(--show-bg);border-color:var(--show-line)}
  .showcase .belt-city .bc{color:var(--show-ink)}
  .showcase .belt-city .be2{color:var(--gold)}
  .showcase .belt-city p{color:var(--show-ink2)}