/* ============================================================
   GF EPDM & Silicone Hose Factory
   视觉方向：macOS —— 壁纸 + 堆叠磨砂玻璃面板 + 工具栏顶栏
   ------------------------------------------------------------
   要点：SF Pro 字体 / Vibrancy 半透明材质 / 大圆角面板 /
        发丝描边 / 深而柔的投影 / 克制的高光
   ============================================================ */

:root{
  /* ---- 文字（macOS 浅色外观） ---- */
  --ink:#1d1d1f;
  --ink-2:#2c2c2e;
  --slate:#3a3a3c;
  --muted:#6e6e73;
  --muted-2:#86868b;

  /* ---- 强调色：保留工厂橙 B 端识别色 ---- */
  --accent:#f2610c;
  --accent-l:#ff8a3d;
  --accent-d:#d24f05;

  /* ---- macOS 材质（Vibrancy） ---- */
  --bg:#eceef4;
  --mat-thin:rgba(252,252,253,.84);
  --mat-regular:rgba(252,252,253,.90);
  --mat-thick:rgba(252,252,253,.90);
  --mat-dark:rgba(28,28,30,.72);
  --hair:rgba(0,0,0,.09);
  --hair-2:rgba(0,0,0,.055);
  --hair-light:rgba(255,255,255,.62);

  --vib:saturate(180%) blur(16px);
  --vib-lg:saturate(180%) blur(30px);

  /* ---- 形状 ---- */
  --r-sm:8px; --r:12px; --r-lg:16px; --r-xl:22px; --r-panel:26px; --r-pill:980px;
  --maxw:1180px;

  /* ---- 投影：窗格悬浮感 ---- */
  --sh-panel:0 1px 1px rgba(0,0,0,.04), 0 30px 60px -34px rgba(10,14,40,.55);
  --sh-1:0 1px 2px rgba(0,0,0,.05), 0 6px 18px -8px rgba(10,14,40,.22);
  --sh-2:0 2px 6px rgba(0,0,0,.06), 0 22px 46px -22px rgba(10,14,40,.34);
  --sh-3:0 36px 80px -34px rgba(10,14,40,.55);
  --sh-accent:0 8px 22px -8px rgba(242,97,12,.55);
  --sheen:inset 0 1px 0 rgba(255,255,255,.72);

  --ease:cubic-bezier(.32,.72,0,1);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}

/* ============================================================
   壁纸（固定不动，玻璃才有东西可糊）
   ============================================================ */
body{
  margin:0;
  color:var(--ink);
  background:#12173a;
  font:16px/1.6 -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
       "Segoe UI Variable Display", "Segoe UI", system-ui, Roboto,
       "Helvetica Neue", "Microsoft YaHei", sans-serif;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-feature-settings:"kern" 1,"liga" 1;
  letter-spacing:-.012em;
  overflow-x:hidden;
}
body:before{
  content:"";
  position:fixed; inset:-20%; z-index:-1; pointer-events:none;
  background:
    radial-gradient(64% 54% at 12% 6%,  #eaa06a 0%, rgba(234,160,106,0) 62%),
    radial-gradient(60% 50% at 88% 0%,  #8f83e8 0%, rgba(143,131,232,0) 62%),
    radial-gradient(66% 56% at 98% 86%, #59b6d8 0%, rgba(89,182,216,0) 62%),
    radial-gradient(62% 52% at 4% 98%,  #d87aa4 0%, rgba(216,122,164,0) 62%),
    linear-gradient(158deg,#2a2450 0%,#1b2148 46%,#151936 100%);
  filter:blur(40px) saturate(108%) brightness(.94);
}

img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
::selection{background:rgba(242,97,12,.22)}

h1,h2,h3,h4{margin:0 0 .5em;line-height:1.1;letter-spacing:-.026em;font-weight:700}
h1{font-size:clamp(34px,4.9vw,58px)}
h2{font-size:clamp(25px,3.1vw,40px)}
h3{font-size:19px;letter-spacing:-.019em;line-height:1.25}
p{margin:0 0 1em}
strong,b{font-weight:640}

/* ============================================================
   面板：整站是一叠悬浮的磨砂窗格
   ============================================================ */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}

section,
.hero{
  position:relative;
  max-width:calc(var(--maxw) + 48px);
  margin:16px auto;
  border-radius:var(--r-panel);
  background:var(--mat-regular);
  backdrop-filter:var(--vib-lg);-webkit-backdrop-filter:var(--vib-lg);
  border:1px solid var(--hair-light);
  box-shadow:var(--sh-panel), var(--sheen);
}
section{padding:76px 0}
section.soft{background:var(--mat-thin)}

section.sec-tight{padding:52px 0}
.sec-head{margin-bottom:40px;max-width:800px}

.eyebrow{
  display:inline-block;font-size:12.5px;font-weight:640;letter-spacing:.01em;
  color:var(--accent);margin-bottom:12px;
}
.lead{font-size:17px;color:var(--muted);max-width:700px;line-height:1.58}

/* ============================================================
   控件（macOS 风格：圆角矩形 + 发丝描边 + 轻微渐变）
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 20px;border-radius:var(--r);
  font-weight:590;font-size:15px;letter-spacing:-.01em;
  border:1px solid transparent;cursor:pointer;
  transition:transform .22s var(--ease),background .2s,box-shadow .25s,border-color .2s,color .2s;
}
.btn:active{transform:scale(.978)}

.btn-primary{
  color:#fff;border-color:rgba(0,0,0,.10);
  background:linear-gradient(180deg,var(--accent-l),var(--accent));
  box-shadow:var(--sh-accent), inset 0 1px 0 rgba(255,255,255,.32);
}
.btn-primary:hover{filter:brightness(1.04);transform:translateY(-1px)}

.btn-outline{
  color:var(--ink);background:rgba(255,255,255,.66);
  border-color:var(--hair);
  box-shadow:var(--sh-1), var(--sheen);
}
.btn-outline:hover{background:#fff;transform:translateY(-1px)}

.btn-ghost{
  color:#fff;background:rgba(255,255,255,.15);
  border-color:rgba(255,255,255,.30);
  backdrop-filter:var(--vib);-webkit-backdrop-filter:var(--vib);
}
.btn-ghost:hover{background:rgba(255,255,255,.24)}

.btn svg{width:17px;height:17px;fill:currentColor}

/* ============================================================
   顶部工具栏
   ============================================================ */
header.site{
  position:sticky;top:0;z-index:60;
  background:rgba(250,250,252,.66);
  backdrop-filter:var(--vib-lg);-webkit-backdrop-filter:var(--vib-lg);
  border-bottom:1px solid var(--hair);
}
.nav{display:flex;align-items:center;gap:26px;height:62px}
.brand{display:flex;align-items:center;gap:11px;font-weight:640;font-size:15.5px;line-height:1.15}
.brand small{display:block;font-weight:500;font-size:10.5px;color:var(--muted-2);letter-spacing:.03em}
.brand .mark{
  width:34px;height:34px;border-radius:10px;color:#fff;display:grid;place-items:center;
  font-size:14px;font-weight:700;letter-spacing:-.5px;
  background:linear-gradient(170deg,#48484a,#1d1d1f);
  box-shadow:0 1px 3px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.26);
}
.nav ul{display:flex;gap:2px;list-style:none;margin:0;padding:0;font-size:14.5px;font-weight:500;color:var(--slate)}
.nav ul a{padding:7px 13px;border-radius:var(--r-sm);transition:background .18s,color .18s}
.nav ul a:hover{background:rgba(0,0,0,.055);color:var(--ink)}
.nav .spacer{flex:1}
.nav .btn{padding:9px 17px;font-size:14.5px;border-radius:10px}
.burger{
  display:none;cursor:pointer;padding:8px 10px;border-radius:10px;
  background:rgba(255,255,255,.6);border:1px solid var(--hair);
  box-shadow:var(--sh-1);
}
.burger span{display:block;width:17px;height:2px;background:var(--ink);margin:4px 0;border-radius:2px}

/* ============================================================
   首屏
   ============================================================ */
.hero{color:#fff;overflow:hidden;margin-top:16px}
.hero .bg{position:absolute;inset:0}
.hero .bg img{width:100%;height:100%;object-fit:cover}
.hero .hv{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero .bg:after{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(130% 100% at 0% 0%, rgba(4,6,14,.90) 0%, rgba(4,6,14,.46) 50%, rgba(4,6,14,.66) 100%),
    linear-gradient(180deg,rgba(4,6,14,.38),rgba(4,6,14,.62));
}
.hero .inner{position:relative;padding:112px 0 68px}
.hero h1{max-width:880px;text-shadow:0 2px 34px rgba(0,0,0,.34)}
.hero p.lead{color:rgba(255,255,255,.84);font-size:18.5px;max-width:650px;margin-top:16px}
.hero .eyebrow{
  color:#fff;background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.26);
  padding:6px 14px;border-radius:var(--r-pill);
  backdrop-filter:var(--vib);-webkit-backdrop-filter:var(--vib);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22);
}
.hero .cta{display:flex;gap:12px;flex-wrap:wrap;margin:32px 0 38px}

.trust{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(194px,1fr));gap:8px;
  padding:10px;border-radius:var(--r-lg);
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.24);
  backdrop-filter:var(--vib);-webkit-backdrop-filter:var(--vib);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.20);
  max-width:1000px;
}
.trust div{display:flex;gap:9px;align-items:flex-start;font-size:13.5px;color:rgba(255,255,255,.95);font-weight:540;padding:8px 8px}
.trust svg{flex:0 0 17px;width:17px;height:17px;margin-top:3px;fill:#ffb787}

/* ============================================================
   卡片 / 网格
   ============================================================ */
.grid{display:grid;gap:20px}
.g2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(268px,1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}

.card{
  background:rgba(255,255,255,.70);
  border:1px solid var(--hair-light);
  border-radius:var(--r-xl);
  padding:24px;
  box-shadow:var(--sh-1), var(--sheen);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),background .3s;
}
.card:hover{transform:translateY(-2px);background:rgba(255,255,255,.78);box-shadow:var(--sh-2), var(--sheen)}
.card.tight{padding:20px}
.card .ico{
  width:44px;height:44px;border-radius:12px;margin-bottom:15px;
  display:grid;place-items:center;
  background:linear-gradient(180deg,#fff,rgba(242,97,12,.09));
  border:1px solid var(--hair-light);
  box-shadow:var(--sh-1), inset 0 1px 0 #fff;
}
.card .ico svg{width:22px;height:22px;fill:var(--accent)}
.card h3{margin-bottom:7px}
.card p{margin:0;color:var(--muted);font-size:14.8px}

/* ============================================================
   产品卡
   ============================================================ */
.pgrid{display:grid;gap:20px;grid-template-columns:repeat(auto-fill,minmax(256px,1fr))}
.pcard{
  display:flex;flex-direction:column;overflow:hidden;
  background:rgba(255,255,255,.70);
  border:1px solid var(--hair-light);border-radius:var(--r-xl);
  box-shadow:var(--sh-1), var(--sheen);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),background .3s;
}
.pcard:hover{transform:translateY(-4px);background:rgba(255,255,255,.8);box-shadow:var(--sh-2), var(--sheen)}
.pcard .ph{aspect-ratio:4/3;overflow:hidden;background:rgba(0,0,0,.05)}
.pcard .ph img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.pcard:hover .ph img{transform:scale(1.05)}
.pcard .bd{padding:17px 19px 21px;display:flex;flex-direction:column;flex:1}
.pcard h3{font-size:16.5px;margin-bottom:7px}
.pcard p{font-size:13.8px;color:var(--muted);margin:0 0 14px}
.pcard .tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto}
.tag{
  font-size:11.5px;font-weight:590;color:var(--slate);
  background:rgba(255,255,255,.78);border:1px solid var(--hair);
  border-radius:var(--r-sm);padding:3px 9px;
}

/* ============================================================
   规格表
   ============================================================ */
.table-wrap{
  overflow-x:auto;max-width:100%;
  background:rgba(255,255,255,.70);
  border:1px solid var(--hair-light);border-radius:var(--r-xl);
  box-shadow:var(--sh-1), var(--sheen);
}
table.spec{width:100%;border-collapse:collapse;min-width:560px;font-size:15px}
table.spec th,table.spec td{padding:14px 20px;text-align:left;border-bottom:1px solid var(--hair-2)}
table.spec th{
  background:rgba(255,255,255,.55);font-size:12px;letter-spacing:.045em;
  text-transform:uppercase;color:var(--muted);font-weight:640;
}
table.spec tr:last-child td{border-bottom:0}
table.spec td:first-child{font-weight:600}

/* ============================================================
   流程
   ============================================================ */
.steps{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(182px,1fr))}
.step{
  overflow:hidden;background:rgba(255,255,255,.70);
  border:1px solid var(--hair-light);border-radius:var(--r-xl);
  box-shadow:var(--sh-1), var(--sheen);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.step:hover{transform:translateY(-2px);box-shadow:var(--sh-2), var(--sheen)}
.step .ph{aspect-ratio:4/3;overflow:hidden;background:rgba(0,0,0,.05)}
.step .ph img{width:100%;height:100%;object-fit:cover}
.step .bd{padding:15px 17px 19px}
.step b{display:block;font-size:11.5px;color:var(--accent);letter-spacing:.07em;margin-bottom:6px;font-weight:680}
.step p{margin:0;font-size:13.8px;color:var(--muted)}

/* ============================================================
   分栏
   ============================================================ */
.split{display:grid;gap:44px;grid-template-columns:1.05fr 1fr;align-items:center}
.split.rev{grid-template-columns:1fr 1.05fr}
.media{
  border-radius:var(--r-xl);overflow:hidden;background:rgba(0,0,0,.05);
  border:1px solid var(--hair-light);box-shadow:var(--sh-2);
}
.media img{width:100%;height:100%;object-fit:cover}
.checklist{list-style:none;padding:0;margin:20px 0 0}
.checklist li{display:flex;gap:11px;margin-bottom:11px;font-size:15.3px;color:var(--slate)}
.checklist svg{flex:0 0 17px;width:17px;height:17px;margin-top:4px;fill:var(--accent)}

/* ============================================================
   深色 CTA
   ============================================================ */
.band{
  position:relative;overflow:hidden;color:#fff;
  border-radius:var(--r-panel);padding:44px;
  display:grid;gap:26px;grid-template-columns:1.2fr 1fr;align-items:center;
  background:linear-gradient(150deg,rgba(28,28,30,.86),rgba(28,28,30,.72));
  border:1px solid rgba(255,255,255,.14);
  backdrop-filter:var(--vib-lg);-webkit-backdrop-filter:var(--vib-lg);
  box-shadow:var(--sh-3), inset 0 1px 0 rgba(255,255,255,.14);
}
.band:before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(58% 130% at 90% 8%,rgba(242,97,12,.40),transparent 62%);
}
.band > *{position:relative}
.band h2{color:#fff;margin-bottom:9px}
.band p{color:rgba(255,255,255,.74);margin:0}
.band .acts{display:flex;gap:11px;flex-wrap:wrap;justify-content:flex-end}

/* ============================================================
   表单
   ============================================================ */
form.inquiry{display:grid;gap:15px;grid-template-columns:1fr 1fr}
form.inquiry .full{grid-column:1/-1}
label{display:block;font-size:12.8px;font-weight:600;margin-bottom:6px;color:var(--slate)}
input,select,textarea{
  width:100%;padding:12px 14px;border-radius:var(--r);
  font:inherit;font-size:15px;color:var(--ink);
  background:rgba(255,255,255,.86);
  border:1px solid var(--hair);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.045);
  transition:border-color .18s,box-shadow .18s,background .18s;
}
input:focus,select:focus,textarea:focus{
  outline:none;background:#fff;border-color:var(--accent);
  box-shadow:0 0 0 3.5px rgba(242,97,12,.16);
}
textarea{min-height:122px;resize:vertical}
.form-note{font-size:12.5px;color:var(--muted-2)}
.ok-msg{
  display:none;border-radius:var(--r);padding:15px 17px;font-size:14.5px;
  background:rgba(48,209,88,.13);border:1px solid rgba(48,209,88,.34);color:#1b6b33;
}
.ok-msg b{display:block;margin-bottom:4px}

/* ============================================================
   联系卡
   ============================================================ */
.ctile{
  display:flex;gap:14px;align-items:flex-start;padding:19px;
  background:rgba(255,255,255,.70);
  border:1px solid var(--hair-light);border-radius:var(--r-xl);
  box-shadow:var(--sh-1), var(--sheen);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.ctile:hover{transform:translateY(-2px);box-shadow:var(--sh-2), var(--sheen)}
.ctile .ico{
  width:40px;height:40px;flex:0 0 40px;border-radius:11px;display:grid;place-items:center;
  background:linear-gradient(180deg,#fff,rgba(0,0,0,.045));
  border:1px solid var(--hair-light);box-shadow:var(--sh-1);
}
.ctile .ico svg{width:19px;height:19px;fill:var(--accent)}
.ctile b{display:block;font-size:11.5px;color:var(--muted-2);letter-spacing:.04em;text-transform:uppercase;font-weight:640;margin-bottom:3px}
.ctile span{font-size:15.5px;font-weight:600;letter-spacing:-.01em}

/* ============================================================
   应用卡
   ============================================================ */
.appcard{
  display:block;padding:23px;
  background:rgba(255,255,255,.70);
  border:1px solid var(--hair-light);border-radius:var(--r-xl);
  box-shadow:var(--sh-1), var(--sheen);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),background .3s;
}
.appcard:hover{transform:translateY(-3px);background:rgba(255,255,255,.8);box-shadow:var(--sh-2), var(--sheen)}
.appcard .ico{
  width:44px;height:44px;border-radius:12px;display:grid;place-items:center;margin-bottom:15px;
  background:linear-gradient(180deg,#fff,rgba(242,97,12,.09));
  border:1px solid var(--hair-light);box-shadow:var(--sh-1), inset 0 1px 0 #fff;
}
.appcard .ico svg{width:22px;height:22px;fill:var(--accent)}
.appcard h3{font-size:17px;margin-bottom:7px}
.appcard p{font-size:14.3px;color:var(--muted);margin:0 0 13px}
.appcard .more{font-size:13.8px;font-weight:620;color:var(--accent)}

/* ============================================================
   视频
   ============================================================ */
.vwrap{
  border-radius:var(--r-panel);overflow:hidden;background:#0b0b0d;
  border:1px solid var(--hair-light);box-shadow:var(--sh-3);
}
.vwrap .vmain{display:block;width:100%;aspect-ratio:16/9;background:#0b0b0d;object-fit:cover}
.vgrid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(228px,1fr));margin-top:20px}
.vcard{
  margin:0;overflow:hidden;
  background:rgba(255,255,255,.70);
  border:1px solid var(--hair-light);border-radius:var(--r-xl);
  box-shadow:var(--sh-1), var(--sheen);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.vcard:hover{transform:translateY(-2px);box-shadow:var(--sh-2), var(--sheen)}
.vcard video{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;background:#0b0b0d}
.vcard figcaption{padding:14px 16px 17px}
.vcard b{display:block;font-size:14.8px;margin-bottom:4px}
.vcard span{font-size:13.3px;color:var(--muted);line-height:1.5}
.vnote{font-size:14.3px;color:var(--muted);margin:20px 0 0}
.vnote a{color:var(--accent);font-weight:620}

/* ============================================================
   FAQ（macOS 折叠列表）
   ============================================================ */
.faq{
  max-width:900px;overflow:hidden;
  background:rgba(255,255,255,.70);
  border:1px solid var(--hair-light);border-radius:var(--r-xl);
  box-shadow:var(--sh-1), var(--sheen);
}
.faq details{border-bottom:1px solid var(--hair-2)}
.faq details:last-child{border-bottom:0}
.faq summary{
  cursor:pointer;list-style:none;position:relative;
  padding:18px 54px 18px 22px;font-weight:600;font-size:16px;
  transition:color .18s,background .18s;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{
  content:"";position:absolute;right:22px;top:50%;
  width:9px;height:9px;border-right:1.8px solid var(--muted-2);border-bottom:1.8px solid var(--muted-2);
  transform:translateY(-70%) rotate(45deg);
  transition:transform .28s var(--ease);
}
.faq details[open] summary:after{transform:translateY(-30%) rotate(225deg)}
.faq summary:hover{color:var(--accent);background:rgba(255,255,255,.5)}
.faq .fq{padding:0 54px 20px 22px;color:var(--muted);font-size:15.2px}
.faq .fq p{margin:0}

/* ============================================================
   页脚
   ============================================================ */
footer.site{
  max-width:calc(var(--maxw) + 48px);
  margin:16px auto 28px;
  color:rgba(255,255,255,.62);font-size:14.3px;padding:56px 0 28px;
  border-radius:var(--r-panel);
  background:linear-gradient(180deg,rgba(28,28,30,.80),rgba(28,28,30,.90));
  border:1px solid rgba(255,255,255,.12);
  backdrop-filter:var(--vib-lg);-webkit-backdrop-filter:var(--vib-lg);
  box-shadow:var(--sh-panel), inset 0 1px 0 rgba(255,255,255,.12);
}
footer.site h4{color:#fff;font-size:12px;letter-spacing:.055em;text-transform:uppercase;margin-bottom:15px;font-weight:640}
footer.site a:hover{color:#fff}
footer.site ul{list-style:none;padding:0;margin:0}
footer.site li{margin-bottom:9px}
.fgrid{display:grid;gap:34px;grid-template-columns:1.4fr 1fr 1fr 1.2fr}
.fbot{
  border-top:1px solid rgba(255,255,255,.10);margin-top:40px;padding-top:20px;
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
  font-size:12.8px;color:rgba(255,255,255,.42);
}

/* ============================================================
   咨询面板（右下角，聚齐所有联系通道 + 留言入口）
   ============================================================ */
.dock{position:fixed;right:20px;bottom:20px;z-index:75;display:flex;flex-direction:column;align-items:flex-end;gap:12px}
.dock-btn{
  display:flex;align-items:center;gap:9px;padding:12px 19px;
  border:1px solid rgba(255,255,255,.30);border-radius:var(--r-pill);
  background:linear-gradient(180deg,rgba(30,30,32,.88),rgba(30,30,32,.80));
  color:#fff;font:inherit;font-size:14.6px;font-weight:620;letter-spacing:-.01em;cursor:pointer;
  backdrop-filter:var(--vib-lg);-webkit-backdrop-filter:var(--vib-lg);
  box-shadow:0 16px 36px -14px rgba(8,12,36,.62), inset 0 1px 0 rgba(255,255,255,.18);
  transition:transform .28s var(--ease),box-shadow .28s;
}
.dock-btn:hover{transform:translateY(-2px)}
.dock-btn:active{transform:scale(.98)}
.dock-btn svg{width:18px;height:18px;fill:#3ddc78}

.dock-panel{
  width:314px;max-width:calc(100vw - 32px);overflow:hidden;
  border-radius:var(--r-xl);
  background:rgba(252,252,253,.90);
  backdrop-filter:var(--vib-lg);-webkit-backdrop-filter:var(--vib-lg);
  border:1px solid var(--hair-light);
  box-shadow:var(--sh-3), var(--sheen);
  opacity:0;visibility:hidden;transform:translateY(10px) scale(.97);transform-origin:bottom right;
  transition:opacity .2s var(--ease),transform .3s var(--ease),visibility .3s;
}
.dock-panel.open{opacity:1;visibility:visible;transform:none}

.dock-head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px 10px}
.dock-head b{font-size:15.5px;letter-spacing:-.015em}
.dock-x{background:none;border:0;padding:5px;border-radius:8px;cursor:pointer;line-height:0}
.dock-x:hover{background:rgba(0,0,0,.06)}
.dock-x svg{width:15px;height:15px;fill:var(--muted-2)}

.dock-state{
  margin:0;padding:0 16px 13px;font-size:13px;color:var(--muted);
  display:flex;flex-wrap:wrap;align-items:center;gap:7px;
  border-bottom:1px solid var(--hair-2);
}
.dock-state .dot{width:8px;height:8px;border-radius:50%;background:#c7c7cc;box-shadow:0 0 0 3px rgba(0,0,0,.045);flex:0 0 8px}
.dock-state .dot.on{background:#30d158;box-shadow:0 0 0 3px rgba(48,209,88,.20)}
.dock-state i{display:block;width:100%;font-style:normal;font-size:12px;color:var(--muted-2);margin-top:1px}

.dock-list{padding:6px}
.dock-row{
  display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  padding:9px 11px;border:0;background:none;cursor:pointer;
  border-radius:var(--r);font:inherit;color:var(--ink);
  transition:background .16s;
}
.dock-row:hover{background:rgba(0,0,0,.055)}
.di{width:34px;height:34px;flex:0 0 34px;border-radius:10px;display:grid;place-items:center;background:rgba(0,0,0,.055)}
.di svg{width:18px;height:18px;fill:var(--slate)}
.di-wa{background:rgba(37,211,102,.16)}.di-wa svg{fill:#1faa52}
.di-fb{background:rgba(24,119,242,.14)}.di-fb svg{fill:#1877f2}
.di-wx{background:rgba(7,193,96,.15)}.di-wx svg{fill:#07c160}
.dt{display:block;font-size:14.4px;font-weight:600;line-height:1.32}
.dt b{display:block;font-size:12.4px;font-weight:500;color:var(--muted);overflow-wrap:anywhere}

.dock-cta{
  display:flex;align-items:center;gap:10px;margin:4px 6px 6px;padding:13px 16px;
  border-radius:var(--r);color:#fff;font-weight:620;font-size:14.6px;
  background:linear-gradient(180deg,var(--accent-l),var(--accent));
  box-shadow:var(--sh-accent);
  transition:filter .2s,transform .2s var(--ease);
}
.dock-cta:hover{filter:brightness(1.05);transform:translateY(-1px)}
.dock-cta svg{width:18px;height:18px;fill:#fff;flex:0 0 18px}

.dock-qr{display:none;padding:2px 16px 16px;text-align:center}
.dock-qr.show{display:block}
.dock-qr img{width:180px;height:180px;object-fit:contain;margin:0 auto 8px;border-radius:var(--r);border:1px solid var(--hair);background:#fff}
.dock-qr span{font-size:12.4px;color:var(--muted)}

/* ============================================================
   进入动画
   ============================================================ */
html.js .rv{opacity:0;transform:translateY(18px);transition:opacity .65s var(--ease),transform .65s var(--ease)}
/* 必须写成 html.js .rv.in：否则这条会被上面的规则按优先级压住，内容永远不显示 */
html.js .rv.in{opacity:1;transform:none}

/* ============================================================
   细节
   ============================================================ */
::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-thumb{background:rgba(0,0,0,.24);border:3px solid transparent;border-radius:99px;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:rgba(0,0,0,.38);background-clip:content-box}
::-webkit-scrollbar-track{background:transparent}
.grid > *, .split > *, .split.rev > *, .band > *, .pgrid > *, .vgrid > *, .steps > *{min-width:0}
.faq,.faq .fq,.vnote,.appcard{overflow-wrap:anywhere}

.mbar{display:none}

/* ============================================================
   响应式
   ============================================================ */
@media(max-width:1000px){
  section{padding:62px 0}
  .nav ul{display:none}
  .nav .burger{display:block}
  .nav.open ul{
    display:flex;position:absolute;left:0;right:0;top:62px;flex-direction:column;gap:0;
    padding:10px 22px 18px;
    background:rgba(250,250,252,.86);
    backdrop-filter:var(--vib-lg);-webkit-backdrop-filter:var(--vib-lg);
    border-bottom:1px solid var(--hair);box-shadow:var(--sh-2);
  }
  .nav.open ul li{border-bottom:1px solid var(--hair-2)}
  .nav.open ul a{display:block;padding:14px 4px;border-radius:0}
  .split,.split.rev,.band{grid-template-columns:1fr}
  .band{padding:30px;border-radius:var(--r-xl)}
  .band .acts{justify-content:flex-start}
  form.inquiry{grid-template-columns:1fr}
  .fgrid{grid-template-columns:1fr 1fr}
  .hero .inner{padding:84px 0 56px}
}
@media(max-width:860px){
  section,.hero,footer.site{max-width:none;margin-left:12px;margin-right:12px;border-radius:var(--r-xl)}
}
@media(max-width:760px){
  .mbar{
    display:flex;position:fixed;left:0;right:0;bottom:0;z-index:80;gap:10px;padding:10px 14px;
    background:rgba(250,250,252,.80);
    backdrop-filter:var(--vib-lg);-webkit-backdrop-filter:var(--vib-lg);
    border-top:1px solid var(--hair);
  }
  .mbar > *{flex:1;justify-content:center;padding:12px 10px;font-size:14.5px}
  .mbar svg{width:17px;height:17px;fill:currentColor}
  .dock{bottom:74px;right:14px}
  .dock-btn{display:none}
  body{padding-bottom:68px}
  .hero h1{overflow-wrap:anywhere}
}
@media(max-width:560px){
  .wrap{padding:0 18px}
  section,.hero,footer.site{margin-left:8px;margin-right:8px}
  .fgrid{grid-template-columns:1fr}
  .nav{gap:10px}
  .brand{font-size:14.5px;gap:9px}
  .brand .mark{width:31px;height:31px;font-size:13px;border-radius:9px}
  .brand small{display:none}
  .nav .btn{padding:9px 14px;font-size:14px}
  .hero .inner{padding:64px 0 46px}
  .trust{grid-template-columns:1fr;padding:7px}
  section{padding:52px 0}
  .sec-head{margin-bottom:30px}
}

/* ============================================================
   无障碍
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  html.js .rv{opacity:1;transform:none;transition:none}
  .hero .hv{display:none}
  *{animation-duration:.001ms !important;transition-duration:.001ms !important}
}