/* =========================================================
   联系我们（/contact/）：内页主视觉（inner.css 的 .pb）→ 需要什么帮助（.kp）→ 联系方式和在线留言（.kx）
   由联系我们区块的 block.json 引用，只在这个页面加载。板块标题用「关于宝锐」的 .ih（inner.css），
   缓动、进场（data-reveal）、悬停上浮和箭头位移的节奏和全站其他卡片一致。
   在线留言是 biori-commerce 的询价表单，基础样式在 shop.css 的 .iq-*，这里只调整放在页面里的样子。
   ========================================================= */

/* ---------- 需要什么帮助：入口卡片 ---------- */
.kp{position:relative;padding:calc(1 * var(--r)) 0 calc(.7 * var(--r));background:radial-gradient(40% 60% at 100% 0,rgba(214,232,255,.45),transparent 70%),#fff}
.kp-grid{display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));gap:calc(.24 * var(--r));margin-top:calc(.5 * var(--r))}
.kp-card{position:relative;overflow:hidden;display:flex;flex-direction:column;min-height:calc(2.7 * var(--r));padding:calc(.4 * var(--r)) calc(.34 * var(--r)) calc(.32 * var(--r));border:1px solid #e8edf4;border-radius:calc(.2 * var(--r));background:#fff;box-shadow:0 10px 30px rgba(15,37,87,.05);transition:transform .6s var(--ease),box-shadow .6s,border-color .6s}
.kp-line{position:absolute;inset:0 0 auto;height:calc(.03 * var(--r));background:linear-gradient(90deg,var(--blue-2),var(--blue-deep));transform:scaleX(0);transform-origin:0 50%;transition:transform .8s var(--ease)}
.kp-ic{display:grid;place-items:center;width:max(40px,calc(.54 * var(--r)));height:max(40px,calc(.54 * var(--r)));border-radius:16px;color:var(--blue);background:#eef4fc;transition:background .5s,color .5s,transform .6s var(--ease-back)}
.kp-ic svg{width:max(20px,calc(.26 * var(--r)));height:max(20px,calc(.26 * var(--r)))}
.kp-card h3{margin-top:calc(.3 * var(--r));font-size:max(18px,calc(.22 * var(--r)));font-weight:700;line-height:1.35;color:var(--ink)}
.kp-card p{margin-top:calc(.1 * var(--r));font-size:max(14px,calc(.15 * var(--r)));line-height:1.8;color:var(--body)}
.kp-more{display:flex;align-items:center;gap:calc(.1 * var(--r));margin-top:auto;padding-top:calc(.28 * var(--r));font-size:max(13px,calc(.14 * var(--r)));font-weight:600;color:var(--blue)}
.kp-more i{display:grid;place-items:center;width:max(21px,calc(.28 * var(--r)));height:max(21px,calc(.28 * var(--r)));border-radius:50%;background:#eef4fc;transition:background .4s,color .4s,transform .5s var(--ease)}
.kp-more svg{width:calc(.12 * var(--r))}
.kp-card:hover{transform:translateY(-8px);border-color:transparent;box-shadow:0 28px 60px rgba(15,37,87,.13)}
.kp-card:hover .kp-line{transform:none}
.kp-card:hover .kp-ic{color:#fff;background:linear-gradient(135deg,var(--blue-2),var(--blue-deep));transform:rotate(-6deg) scale(1.05)}
.kp-card:hover .kp-more i{color:#fff;background:var(--blue);transform:translateX(4px)}
/* 招聘入口横条（2026-11-05）：联系我们里最显眼的一块 */
.kj{position:relative;overflow:hidden;display:flex;align-items:center;gap:calc(.3 * var(--r));margin-top:calc(.24 * var(--r));padding:calc(.34 * var(--r)) calc(.4 * var(--r));border-radius:calc(.2 * var(--r));color:#fff;background:linear-gradient(115deg,#1f7ad8,#0f4aa3);box-shadow:0 18px 44px rgba(15,74,163,.22);transition:transform .5s var(--ease),box-shadow .5s}
.kj::after{content:"";position:absolute;right:-6%;top:-70%;width:38%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.22),rgba(255,255,255,0) 70%);pointer-events:none}
.kj-ic{flex:none;display:grid;place-items:center;width:max(48px,calc(.68 * var(--r)));height:max(48px,calc(.68 * var(--r)));border-radius:50%;background:rgba(255,255,255,.16)}
.kj-ic svg{width:48%;height:48%}
.kj-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:calc(.06 * var(--r))}
.kj-t small{font-family:var(--f-num);font-size:max(11px,calc(.12 * var(--r)));letter-spacing:.14em;color:rgba(255,255,255,.72)}
.kj-t b{font-size:max(18px,calc(.26 * var(--r)));font-weight:500;line-height:1.35}
.kj-note{font-size:max(13px,calc(.15 * var(--r)));color:rgba(255,255,255,.85)}
.kj-jobs{display:flex;flex-wrap:wrap;align-items:center;gap:calc(.08 * var(--r));margin-top:calc(.06 * var(--r));font-size:max(12px,calc(.14 * var(--r)))}
.kj-jobs em{font-style:normal;color:#ffe08a}
.kj-jobs i{padding:calc(.03 * var(--r)) calc(.12 * var(--r));border-radius:99px;font-style:normal;color:#fff;background:rgba(255,255,255,.14)}
.kj-more{position:relative;z-index:1;flex:none;display:flex;align-items:center;gap:calc(.1 * var(--r));padding:calc(.13 * var(--r)) calc(.22 * var(--r));border-radius:99px;font-size:max(14px,calc(.16 * var(--r)));font-weight:500;color:var(--blue-deep);background:#fff;transition:gap .4s var(--ease)}
.kj-more i{display:grid;place-items:center;width:max(14px,calc(.16 * var(--r)))}
.kj-more svg{width:100%}
.kj:hover{transform:translateY(-4px);box-shadow:0 26px 60px rgba(15,74,163,.3)}
.kj:hover .kj-more{gap:calc(.16 * var(--r))}

/* ---------- 联系方式和在线留言 ---------- */
.kx{position:relative;padding:calc(.8 * var(--r)) 0 calc(1.1 * var(--r));background:radial-gradient(45% 50% at 0 40%,rgba(214,232,255,.5),transparent 70%),linear-gradient(#f5f8fd,#fff 75%)}
.kx-grid{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:calc(.8 * var(--r));align-items:start}
.kx-lead{max-width:calc(4.8 * var(--r));margin-top:calc(.32 * var(--r));font-size:max(15px,calc(.17 * var(--r)));line-height:1.9;color:var(--body)}

/* 联系方式列表：悬停时整行右移、图标变蓝、箭头前移（和产品中心细分类列表同一节奏） */
.kx-list{margin-top:calc(.4 * var(--r));border-top:1px solid #e3e8f0}
.kx-list>li{border-bottom:1px solid #e3e8f0}
.kx-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:calc(.18 * var(--r));padding:calc(.26 * var(--r)) 4px;transition:transform .45s var(--ease)}
.kx-ic{display:grid;place-items:center;width:max(36px,calc(.48 * var(--r)));height:max(36px,calc(.48 * var(--r)));border-radius:50%;color:var(--blue);background:#eaf2fc;transition:background .45s,color .45s,box-shadow .45s}
.kx-ic svg{width:max(16px,calc(.22 * var(--r)));height:max(16px,calc(.22 * var(--r)))}
.kx-t small{display:block;font-size:max(12px,calc(.13 * var(--r)));color:var(--muted)}
.kx-t b{display:block;margin-top:calc(.04 * var(--r));font-size:max(16px,calc(.18 * var(--r)));font-weight:600;line-height:1.55;color:var(--ink)}
.kx-t em{display:block;margin-top:2px;font-size:max(12px,calc(.13 * var(--r)));font-style:normal;line-height:1.6;color:var(--muted)}
.kx-t b.is-num{font-family:var(--f-num),var(--f-cn);font-size:max(18px,calc(.22 * var(--r)));letter-spacing:.02em}
.kx-go{display:grid;place-items:center;color:#b6c2d4;font-style:normal;transition:color .3s,transform .45s var(--ease)}
.kx-go svg{width:calc(.16 * var(--r))}
a.kx-row:hover{transform:translateX(6px)}
a.kx-row:hover .kx-ic{color:#fff;background:linear-gradient(135deg,var(--blue-2),var(--blue-deep));box-shadow:0 10px 22px rgba(23,100,189,.28)}
a.kx-row:hover .kx-go{color:var(--blue-2);transform:translateX(4px)}
.kx-maps{display:flex;flex-wrap:wrap;gap:calc(.06 * var(--r)) calc(.18 * var(--r));margin-top:calc(.08 * var(--r))}
.kx-maps a{display:inline-flex;align-items:center;gap:calc(.04 * var(--r));font-size:max(12px,calc(.13 * var(--r)));font-weight:500;color:var(--blue);text-decoration:underline;text-decoration-color:transparent;text-underline-offset:3px;transition:text-decoration-color .3s}
.kx-maps a:hover{text-decoration-color:currentColor}
.kx-maps svg{width:calc(.1 * var(--r));height:calc(.1 * var(--r))}
/* 加入我们入口：和联系方式同一行样式，放在卡片里 */
.kx-qr{display:flex;align-items:center;gap:calc(.18 * var(--r));margin-top:calc(.36 * var(--r));padding:calc(.14 * var(--r)) calc(.18 * var(--r)) calc(.14 * var(--r)) calc(.14 * var(--r));border-radius:16px;background:#fff;box-shadow:0 12px 32px rgba(15,37,87,.07),0 0 0 1px rgba(15,37,87,.03)}
.kx-qr img{flex:none;width:max(72px,calc(.96 * var(--r)));height:max(72px,calc(.96 * var(--r)));border-radius:10px}
.kx-qr b{display:block;font-size:max(14px,calc(.15 * var(--r)));font-weight:700;color:var(--ink)}
.kx-qr small{display:block;margin-top:calc(.04 * var(--r));font-size:max(12px,calc(.13 * var(--r)));line-height:1.6;color:var(--muted)}

/* 在线留言卡片 */
.kx-form{position:relative;overflow:hidden;padding:calc(.5 * var(--r)) calc(.52 * var(--r)) calc(.46 * var(--r));border-radius:calc(.24 * var(--r));background:#fff;box-shadow:0 30px 70px rgba(15,37,87,.1),0 0 0 1px rgba(15,37,87,.04);scroll-margin-top:calc(var(--hd-h) + 24px)}
.kx-form::before{content:"";position:absolute;inset:0 0 auto;height:calc(.04 * var(--r));background:linear-gradient(90deg,var(--blue-2),#5fb2ff)}
.kx-form-title{font-size:max(22px,calc(.3 * var(--r)));font-weight:700;line-height:1.3;color:var(--ink)}
.kx-form-intro{margin-top:calc(.06 * var(--r));font-size:max(13px,calc(.14 * var(--r)));line-height:1.7;color:var(--body)}
.kx-off{margin-top:calc(.18 * var(--r));padding:calc(.16 * var(--r)) calc(.18 * var(--r));border-radius:12px;font-size:max(14px,calc(.15 * var(--r)));line-height:1.8;color:var(--body);background:#f5f8fd}
.kx-off a{font-weight:600;color:var(--blue)}
.kx-form .iq-form.is-inline{margin-top:calc(.3 * var(--r));padding:0}
.kx-form .iq-grid{gap:calc(.18 * var(--r)) max(15px,calc(.2 * var(--r)));margin-top:max(16px,calc(.22 * var(--r)))}
.kx-form .iq-field{font-size:max(13px,calc(.14 * var(--r)))}
.kx-form .iq-field input{height:max(36px,calc(.48 * var(--r)));border-radius:10px;background:#fbfcfe}
.kx-form .iq-field textarea{min-height:max(90px,calc(1.2 * var(--r)));border-radius:10px;background:#fbfcfe}
.kx-form .iq-field input:focus,.kx-form .iq-field textarea:focus{background:#fff}
.kx-form .iq-captcha input{width:max(120px,calc(1.6 * var(--r)))}
.kx-form .iq-captcha-img{height:max(36px,calc(.48 * var(--r)));border-radius:10px}
.kx-form .iq-captcha-img img{height:max(34px,calc(.46 * var(--r)))}
.kx-form .iq-submit{height:max(39px,calc(.52 * var(--r)));margin-top:max(16px,calc(.22 * var(--r)));box-shadow:0 12px 28px rgba(23,100,189,.28);transition:transform .4s var(--ease),box-shadow .4s}
.kx-form .iq-submit:hover{transform:translateY(-2px);box-shadow:0 16px 34px rgba(23,100,189,.34)}

/* =========================================================
   手机
   ========================================================= */
@media (max-width:1065px){
  .kp-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kx-grid{gap:calc(.5 * var(--r))}
}
@media (max-width:899px){
  .kp{padding:44px 0 28px}
  .kp-grid{gap:12px;margin-top:24px}
  .kp-card{min-height:0;padding:18px 16px 16px;border-radius:16px}
  .kj{flex-wrap:wrap;gap:14px;margin-top:12px;padding:20px 18px;border-radius:16px}
  .kj-ic{width:44px;height:44px}
  .kj-t{flex-basis:calc(100% - 58px)}
  .kj-t b{font-size:17px}
  .kj-more{width:100%;justify-content:center;padding:11px 16px;font-size:14px}
  .kp-ic{width:44px;height:44px;border-radius:13px}
  .kp-ic svg{width:22px;height:22px}
  .kp-card h3{margin-top:14px;font-size:16px}
  .kp-card p{margin-top:6px;font-size:13px;line-height:1.7}
  .kp-more{padding-top:14px;font-size:13px}
  .kx{padding:36px 0 56px}
  .kx-grid{grid-template-columns:minmax(0,1fr);gap:32px}
  .kx-list{margin-top:22px}
  .kx-row{gap:14px;padding:16px 2px}
  .kx-ic{width:42px;height:42px}
  .kx-ic svg{width:20px;height:20px}
  .kx-t b.is-num{font-size:18px}
  .kx-qr{margin-top:20px}
  .kx-form{padding:26px 16px 22px;border-radius:18px}
  .kx-form .iq-grid{grid-template-columns:minmax(0,1fr);gap:14px}
}
@media (prefers-reduced-motion:reduce){
  .kp-card,.kx-row,.kp-ic,.kj{transition:none}
}