/* =========================================================
 * 凯尔美科技 · 玩具风格装饰元素库
 * ---------------------------------------------------------
 * 全部为内联 SVG / CSS，零外部请求。
 * 视觉基准：儿童玩具名片（云朵、太阳、爱心、音符、波浪）
 * 用法：在 HTML 里用 <i class="deco deco-cloud"></i> 引入
 * ======================================================= */

/* ---------- 云朵 ---------- */
.deco-cloud {
  display: inline-block; width: var(--s, 80px); height: calc(var(--s, 80px) * .62);
  position: relative; vertical-align: middle;
}
.deco-cloud::before, .deco-cloud::after {
  content: ''; position: absolute; background: var(--c, var(--blue-soft));
  border-radius: 50%;
}
.deco-cloud::before {
  width: 54%; height: 100%; left: 0; bottom: 0;
  border-radius: 52% 48% 40% 40% / 62% 62% 38% 38%;
}
.deco-cloud::after {
  width: 40%; height: 82%; right: 8%; bottom: 0;
  border-radius: 46% 54% 44% 56% / 58% 58% 42% 42%;
}
.deco-cloud > i {
  position: absolute; left: 20%; bottom: 0; width: 48%; height: 100%;
  background: var(--c, var(--blue-soft));
  border-radius: 50%;
}

/* ---------- 太阳（光芒用 conic 渐变） ---------- */
.deco-sun {
  display: inline-block; width: var(--s, 56px); height: var(--s, 56px);
  position: relative; vertical-align: middle;
}
.deco-sun::before {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  background: var(--c, var(--amber));
}
.deco-sun::after {
  content: ''; position: absolute; inset: -34%;
  background: conic-gradient(from 0deg,
    transparent 0deg 8deg, var(--c, var(--amber)) 8deg 14deg,
    transparent 14deg 30deg, var(--c, var(--amber)) 30deg 36deg,
    transparent 36deg 60deg, var(--c, var(--amber)) 60deg 66deg,
    transparent 66deg 90deg, var(--c, var(--amber)) 90deg 96deg,
    transparent 96deg 120deg, var(--c, var(--amber)) 120deg 126deg,
    transparent 126deg 150deg, var(--c, var(--amber)) 150deg 156deg,
    transparent 156deg 180deg, var(--c, var(--amber)) 180deg 186deg,
    transparent 186deg 210deg, var(--c, var(--amber)) 210deg 216deg,
    transparent 216deg 240deg, var(--c, var(--amber)) 240deg 246deg,
    transparent 246deg 270deg, var(--c, var(--amber)) 270deg 276deg,
    transparent 276deg 300deg, var(--c, var(--amber)) 300deg 306deg,
    transparent 306deg 330deg, var(--c, var(--amber)) 330deg 336deg,
    transparent 336deg 360deg);
  -webkit-mask: radial-gradient(circle, transparent 0 32%, #000 33%);
  mask: radial-gradient(circle, transparent 0 32%, #000 33%);
  opacity: .8;
}

/* ---------- 爱心 ---------- */
.deco-heart { display: inline-block; width: var(--s, 22px); height: var(--s, 22px); vertical-align: middle; }
.deco-heart::before {
  content: ''; display: block; width: 100%; height: 100%;
  background: var(--c, var(--rose));
  clip-path: path("M12 21s-8.5-5.6-11-9.6C-1.4 8 1 3.6 5 3.6c2.4 0 4.3 1.4 5.4 3.2 1.1-1.8 3-3.2 5.4-3.2 4 0 6.4 4.4 4 7.8-2.5 4-11 9.6-11 9.6z");
}

/* ---------- 音符 ---------- */
.deco-note { display: inline-block; width: var(--s, 24px); height: var(--s, 24px); vertical-align: middle; }
.deco-note::before {
  content: ''; display: block; width: 100%; height: 100%;
  background: var(--c, var(--blue));
  clip-path: path("M19 2v12.5a3.5 3.5 0 1 1-2-3.16V4.6L10.5 6v10.4a3.5 3.5 0 1 1-2-3.16V2l11-1.5v2.2z");
}

/* ---------- 星星 ---------- */
.deco-star { display: inline-block; width: var(--s, 24px); height: var(--s, 24px); vertical-align: middle; }
.deco-star::before {
  content: ''; display: block; width: 100%; height: 100%;
  background: var(--c, var(--amber));
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

/* ---------- 小圆点阵列（纹理） ---------- */
.deco-dots {
  position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(var(--c, var(--blue-soft)) 2.5px, transparent 2.5px);
  background-size: 26px 26px;
  opacity: .5;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, #000 20%, transparent 75%);
  mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, #000 20%, transparent 75%);
}

/* ---------- 漂浮装饰层（Hero 用） ----------
   hero 是 display:flex，必须绝对定位才不会被当作 flex 子项挤进内容流 */
.deco-float {
  position: absolute; pointer-events: none; z-index: 1;
  opacity: .9; line-height: 0;
}
.deco-float > * { display: block; animation: decoBob 6s var(--e-io) infinite; }
.deco-float.d1 { top: 16%; left: 4%;  --s: 88px; }
.deco-float.d2 { top: 18%; right: 5%; --s: 58px; animation-delay: .8s; }
.deco-float.d3 { bottom: 22%; left: 3%; --s: 34px; animation-delay: 1.6s; }
.deco-float.d4 { bottom: 26%; right: 3%; --s: 44px; animation-delay: .4s; }
.deco-float.d2 > *, .deco-float.d4 > * { animation-duration: 7.5s; }
.deco-float.d3 > * { animation-duration: 8.5s; }
/* 装饰层整体不参与布局 */
.deco-float > i { line-height: 0; font-style: normal; }

@keyframes decoBob {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-16px) rotate(5deg); }
}

/* 移动端收敛装饰：小屏容易与内容抢空间 */
@media (max-width: 760px) {
  .deco-float.d1 { --s: 54px; top: 8%; left: 4%; }
  .deco-float.d2 { --s: 46px; top: 9%; right: 6%; }
  .deco-float.d3 { --s: 24px; bottom: 12%; left: 5%; }
  .deco-float.d4 { display: none; }
  /* Hero 内直接定位的装饰也缩小 */
  .hero-fig > .deco-star { --s: 18px; }
}

/* ---------- 波浪分割 ---------- */
/* 上凸波浪：分隔上一区块与下一区块 */
.wave { position: relative; line-height: 0; pointer-events: none; }
.wave svg { display: block; width: 100%; height: clamp(38px, 5vw, 84px); }
.wave-up   { margin-bottom: -1px; }
.wave-down { margin-top: -1px; }
.wave svg path { fill: var(--w, var(--cream)); }
.wave-b svg path { fill: var(--w, var(--blue)); }

/* ---------- 手写体强调（模仿名片的 script 标注） ---------- */
.script {
  font-family: var(--script);
  font-style: normal; font-weight: 700;
  color: var(--blue-deep); letter-spacing: .01em;
}
.script-amber { color: var(--amber-deep); }
.script-rose  { color: var(--rose); }

/* ---------- 波浪底纹（卡片内装饰） ---------- */
.wave-tex {
  position: absolute; left: 0; right: 0; bottom: 0; height: 42px;
  pointer-events: none; opacity: .5;
}
.wave-tex svg { width: 100%; height: 100%; display: block; }
.wave-tex svg path { fill: var(--c, var(--blue-wash)); }

/* ---------- 徽章圆点（图标底） ---------- */
.ico-round {
  width: 52px; height: 52px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--c, var(--blue-wash));
  font-weight: 700; font-size: 16px; color: var(--cc, var(--blue-deep));
  flex-shrink: 0;
}

/* =========================================================
   产品类型图标条 —— 仿名片底部的印章式分类条
   ======================================================= */
.catbar {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: clamp(10px, 1.2vw, 16px);
}
.catbar-item {
  display: flex; align-items: center; gap: 12px;
  background: #fff; border-radius: var(--r-pill);
  padding: 12px 20px;
  box-shadow: 0 3px 0 rgba(79,163,227,.10), 0 8px 22px rgba(79,163,227,.10);
  transition: transform .4s var(--e-out), box-shadow .4s var(--e-out);
}
.catbar-item:hover { transform: translateY(-4px); }
.catbar-item:nth-child(1) { box-shadow: 0 3px 0 rgba(79,163,227,.14), 0 8px 22px rgba(79,163,227,.14); }
.catbar-item:nth-child(2) { box-shadow: 0 3px 0 rgba(247,169,59,.18), 0 8px 22px rgba(247,169,59,.16); }
.catbar-item:nth-child(3) { box-shadow: 0 3px 0 rgba(242,120,159,.16), 0 8px 22px rgba(242,120,159,.14); }
.catbar-item:nth-child(4) { box-shadow: 0 3px 0 rgba(95,201,176,.18), 0 8px 22px rgba(95,201,176,.16); }
.catbar-item:nth-child(1):hover { box-shadow: 0 6px 0 rgba(79,163,227,.2), 0 18px 36px rgba(79,163,227,.2); }
.catbar-item:nth-child(2):hover { box-shadow: 0 6px 0 rgba(247,169,59,.24), 0 18px 36px rgba(247,169,59,.24); }
.catbar-item:nth-child(3):hover { box-shadow: 0 6px 0 rgba(242,120,159,.2), 0 18px 36px rgba(242,120,159,.2); }
.catbar-item:nth-child(4):hover { box-shadow: 0 6px 0 rgba(95,201,176,.24), 0 18px 36px rgba(95,201,176,.24); }
/* 彩色圆徽章 */
.catbar-ico {
  width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--c); flex-shrink: 0;
  transition: transform .45s var(--e-out);
}
.catbar-item:hover .catbar-ico { transform: rotate(-12deg) scale(1.1); }
.catbar-ico svg { width: 23px; height: 23px; fill: #fff; }
.catbar-item b { font-size: 14.5px; font-weight: 700; color: var(--ink); line-height: 1.3; }

/* ---------- Slogan 带（两端虚线 + 字母间距） ---------- */
.slogan {
  display: flex; align-items: center; justify-content: center;
  gap: clamp(14px, 2vw, 26px);
  padding: clamp(26px, 3vw, 40px) 0 0;
}
.slogan::before, .slogan::after {
  content: ''; height: 3px; flex: 1; max-width: 200px;
  border-radius: 3px;
  background: repeating-linear-gradient(90deg, var(--blue-soft) 0 12px, transparent 12px 22px);
}
.slogan-txt {
  font-family: var(--round);
  font-size: clamp(13px, 1.5vw, 18px); font-weight: 700;
  letter-spacing: .32em; color: var(--blue-deep);
  white-space: nowrap;
}
.slogan-cn {
  font-family: var(--round);
  font-size: 12.5px; font-weight: 700; letter-spacing: .3em;
  color: var(--t-low); text-align: center; margin-top: 12px;
}
@media (max-width: 760px) {
  .catbar { grid-template-columns: repeat(2, 1fr); }
  .slogan-txt { letter-spacing: .2em; font-size: 12.5px; }
  .slogan::before, .slogan::after { max-width: 60px; }
}
@media (max-width: 420px) {
  .catbar { grid-template-columns: 1fr; }
}

/* =========================================================
   微信二维码：卡内缩略图 + 点击放大灯箱
   ======================================================= */
.ct-qr {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: 'ico thumb' 'label thumb' 'val thumb' 'note thumb';
  align-items: center;
  text-align: left;
  border: 0; cursor: pointer; font: inherit; color: inherit;
  width: 100%;
}
.ct-qr .ct-ico { grid-area: ico; margin-bottom: 0; }
.ct-qr label { grid-area: label; }
.ct-qr b { grid-area: val; }
.ct-qr span:not(.ct-ico):not(.ct-thumb) { grid-area: note; }
.ct-thumb {
  grid-area: thumb;
  width: 84px; height: 84px; object-fit: contain;
  border-radius: var(--r-sm);
  background: #fff; padding: 4px;
  box-shadow: 0 2px 0 rgba(242,120,159,.18);
  transition: transform .4s var(--e-out);
}
.ct-qr:hover .ct-thumb { transform: scale(1.06) rotate(-3deg); }

/* 灯箱 */
.qr-box { position: fixed; inset: 0; z-index: 9998; display: none; }
.qr-box.on { display: block; }
.qr-mask {
  position: absolute; inset: 0;
  background: rgba(43, 58, 74, .55);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  animation: qrFade .3s var(--e-out);
}
.qr-panel {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  background: #fff; border-radius: var(--r-lg);
  padding: clamp(24px, 3vw, 38px);
  text-align: center;
  box-shadow: 0 8px 0 rgba(43,58,74,.12), 0 30px 70px rgba(43,58,74,.32);
  animation: qrPop .42s var(--e-out);
  max-width: 92vw;
}
.qr-big {
  display: block; width: clamp(210px, 34vw, 300px); height: auto;
  border-radius: var(--r-sm); image-rendering: crisp-edges;
}
.qr-tip { margin-top: 18px; font-size: 14px; font-weight: 700; color: var(--t-mid); }
.qr-close {
  position: absolute; top: -14px; right: -14px;
  width: 38px; height: 38px; border-radius: 50%;
  border: 0; background: var(--rose); color: #fff;
  font-size: 24px; line-height: 1; cursor: pointer;
  box-shadow: 0 3px 0 #D9557F;
  transition: transform .3s var(--e-out), background .3s;
}
.qr-close:hover { transform: rotate(90deg) scale(1.06); background: #D9557F; }
@keyframes qrFade { from { opacity: 0; } }
@keyframes qrPop {
  from { opacity: 0; transform: translate(-50%, -46%) scale(.9); }
}
@media (max-width: 760px) {
  .ct-qr { grid-template-columns: 1fr; grid-template-areas: 'thumb' 'ico' 'label' 'val' 'note'; text-align: center; }
  .ct-qr .ct-ico { margin: 0 auto 12px; }
  .ct-thumb { width: 116px; height: 116px; margin: 0 auto 14px; }
}