/* 中漫智声官网 · dubmic.com
   实现自设计稿「dubmic 官网设计稿.html」(Claude Design 定稿)。
   母品牌 token 为公司级,比立刻MV 品牌底色(#101113)更中性偏深,
   让两个子品牌各带自己的色温、母品牌不抢。 */

:root{
  /* 中性基底 */
  --bg-deep:#08090b; --bg:#0d0e11; --surface-low:#16171b; --surface:#1d1e22; --surface-high:#27292f;
  --outline:#34373f; --dim:#7f8694; --muted:#b8bdc8; --text:#f0eff2;
  /* 母品牌中性强调(区别于立刻MV 的 #4c8dff) */
  --parent:#d8dce4; --parent-dim:#9aa0ac;
  /* 冷暖双母题:想象=冷蓝(立刻MV);记忆=暖金(立刻修相片) */
  --cold:#4c8dff; --cold-soft:#b9ceff; --cold-bg:#0c1524;
  --warm:#f3c969; --warm-deep:#e0a53f; --cream:#f0e9d8; --ink:#14100a; --warm-bg:#181307;
  /* 字体:国内主机不引 Google Fonts,中文走系统栈、拉丁走系统 Helvetica */
  --cjk:ui-sans-serif,-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Source Han Sans SC",sans-serif;
  --latin:"Helvetica Neue",Helvetica,Arial,sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--text);font-family:var(--cjk);-webkit-font-smoothing:antialiased;line-height:1.5}
img{max-width:100%;display:block}
a{color:var(--cold-soft);text-decoration:none}
a:hover{color:#fff}

.wrap{max-width:1100px;margin:0 auto;padding:0 56px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:8px;top:8px;z-index:99;background:var(--parent);color:#101216;padding:8px 14px;border-radius:8px}

/* ===== 导航 ===== */
.nav{display:flex;align-items:center;justify-content:space-between;height:68px;border-bottom:1px solid var(--outline);padding:0 56px;position:relative}
.nav .brand{display:flex;align-items:center;gap:11px}
.nav .brand .wm-en{font-size:19px}
.nav .links{display:flex;gap:30px;align-items:center;font-size:14px;color:var(--muted)}
.nav .links a{color:var(--muted);position:relative}
.nav .links a:hover{color:var(--text)}
.nav .links a.on{color:var(--text)}
.nav .links a::after{content:"";position:absolute;left:0;bottom:-7px;height:2px;width:0;border-radius:2px;background:linear-gradient(90deg,var(--cold),var(--warm));transition:width .22s ease}
.nav .links a:hover::after{width:100%}
/* 汉堡(移动) */
.navtoggle{display:none;flex-direction:column;gap:4px;background:none;border:0;cursor:pointer;padding:8px}
.navtoggle span{width:20px;height:2px;background:var(--muted);display:block;border-radius:2px}

/* ===== 字标 ===== */
.wm-en{font-family:var(--latin);font-weight:700;letter-spacing:-.02em}
.wm-cn{font-family:var(--cjk);font-weight:700;letter-spacing:.14em}

/* ===== 按钮 ===== */
.btn{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;padding:12px 22px;border-radius:999px;cursor:pointer;border:1px solid transparent;font-family:var(--cjk);transition:transform .18s ease,box-shadow .18s ease,filter .18s ease}
.btn:hover{transform:translateY(-2px);filter:brightness(1.06);box-shadow:0 10px 26px rgba(0,0,0,.38)}
.btn .ar{font-family:var(--latin);transition:transform .18s ease;display:inline-block}
.btn:hover .ar{transform:translateX(3px)}
/* CTA 颜色跟随目的地色温 */
.btn-cold{background:linear-gradient(120deg,var(--cold-soft),var(--cold));color:var(--ink)}
.btn-cold:hover{color:var(--ink)}
.btn-warm{background:linear-gradient(120deg,var(--cream),var(--warm));color:var(--ink)}
.btn-warm:hover{color:var(--ink)}
.btn-parent{background:var(--parent);color:#101216}
.btn-parent:hover{color:#101216}
.btn-ghost{background:transparent;border-color:var(--outline);color:var(--text)}

/* ===== eyebrow / 段落标题 ===== */
.eyebrow{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--parent-dim);font-family:var(--latin);font-weight:700;display:inline-flex;align-items:center;gap:9px}
.eyebrow::before{content:"";width:22px;height:2px;background:linear-gradient(90deg,var(--cold),var(--warm));border-radius:2px}
.sec-h{font-size:30px;font-weight:700;letter-spacing:-.01em;line-height:1.25;margin:14px 0}

/* ===== 冷暖母题:横贯光谱条 ===== */
.spectrum{height:3px;border-radius:3px;background:linear-gradient(90deg,var(--cold-soft),var(--cold) 32%,#6e6b7a 50%,var(--warm-deep) 68%,var(--warm));opacity:.9;background-size:220% 100%;animation:shimmer 7s linear infinite}
@keyframes shimmer{from{background-position:0% 0}to{background-position:-220% 0}}

/* ===== hero 纹理:细网点 + 冷暖两端环境光 ===== */
.hero-tex{position:relative;overflow:hidden;background:var(--bg)}
.hero-tex::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.05) 1px,transparent 1.4px);background-size:26px 26px;-webkit-mask:linear-gradient(180deg,#000,transparent 78%);mask:linear-gradient(180deg,#000,transparent 78%);pointer-events:none}
.hero-tex>*{position:relative;z-index:1}
.glowcold{position:absolute;left:-6%;top:-30%;width:56%;height:150%;background:radial-gradient(closest-side,rgba(76,141,255,.20),transparent 70%);pointer-events:none;z-index:0}
.glowwarm{position:absolute;right:-6%;top:-24%;width:52%;height:150%;background:radial-gradient(closest-side,rgba(243,201,105,.17),transparent 70%);pointer-events:none;z-index:0}

/* ===== 产品卡 ===== */
.pcard{border:1px solid var(--outline);border-radius:16px;padding:26px;background:var(--surface-low);position:relative;overflow:hidden;transition:transform .28s ease,box-shadow .28s ease,border-color .28s ease}
.pcard:hover{transform:translateY(-5px);box-shadow:0 20px 44px rgba(0,0,0,.4)}
.pcard::after{content:"";position:absolute;right:-20%;top:-30%;width:60%;height:110%;border-radius:50%;pointer-events:none;opacity:.4}
.pcard.cold::after{background:radial-gradient(closest-side,rgba(76,141,255,.18),transparent 70%)}
.pcard.warm::after{background:radial-gradient(closest-side,rgba(243,201,105,.16),transparent 70%)}
.pcard.cold:hover{border-color:#3b5580}
.pcard.warm:hover{border-color:#5a4a24}
.pcard>*{position:relative;z-index:1}
.pcard .tint{position:absolute;inset:0 0 auto;height:3px;z-index:2}
.pcard.cold .tint{background:linear-gradient(90deg,var(--cold-soft),var(--cold))}
.pcard.warm .tint{background:linear-gradient(90deg,var(--cream),var(--warm))}
.pcard .phead{display:flex;align-items:center;gap:12px;margin-bottom:6px}
.pcard .pmark{width:44px;height:44px;border-radius:11px;flex:none}
.pcard .pname{font-size:20px;font-weight:700}
.pcard .pname .en{font-family:var(--latin);color:var(--dim);font-size:14px;font-weight:400}
.pcard .ptag{font-size:13px}
.pcard .plede{font-size:14.5px;color:var(--muted);line-height:1.6;margin:12px 0 16px}

.capchip{font-size:12.5px;color:var(--muted);padding:7px 0;display:flex;gap:9px;align-items:flex-start;line-height:1.45}
.capchip .dot{width:5px;height:5px;border-radius:50%;margin-top:7px;flex:none}
.cold .dot{background:var(--cold)}
.warm .dot{background:var(--warm)}

/* ===== 修复前/后对比 ===== */
/* 设计稿用 CSS 滤镜在占位图上「假装」before;这里是真实修复前原片,不加滤镜。 */
.baframe{position:relative;overflow:hidden;width:100%;height:100%}
.baframe .ba{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* before 铺底全显示,after 叠上做 clip-path 擦拭(同 likexiu.dubmic.com hero wipe) */
.baframe .ba-after{clip-path:inset(0 0 0 50%);animation:baWipe 5.4s ease-in-out infinite alternate}
@keyframes baWipe{from{clip-path:inset(0 0 0 70%)}to{clip-path:inset(0 0 0 22%)}}
@keyframes baSeam{from{left:70%}to{left:22%}}
.baframe .seam{position:absolute;top:0;bottom:0;left:50%;width:2px;transform:translateX(-1px);background:linear-gradient(180deg,rgba(243,201,105,.35),var(--warm) 20%,var(--warm) 80%,rgba(243,201,105,.35));box-shadow:0 0 12px rgba(243,201,105,.6);z-index:3;pointer-events:none;animation:baSeam 5.4s ease-in-out infinite alternate}
.ba-tag{position:absolute;bottom:9px;z-index:4;font-size:12px;color:#f0e9d8;background:rgba(20,16,10,.6);padding:4px 11px;border-radius:8px;font-weight:600;pointer-events:none}
.ba-l{left:9px}
.ba-r{right:9px}

/* ===== hero 拼贴浮动 + 光扫 ===== */
.floatA{animation:floatA 5.5s ease-in-out infinite}
.floatB{animation:floatB 6.8s ease-in-out infinite}
@keyframes floatA{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes floatB{0%,100%{transform:rotate(-2.4deg) translateY(0)}50%{transform:rotate(-2.4deg) translateY(-9px)}}
.sheen{position:absolute;inset:0;background:linear-gradient(115deg,transparent 42%,rgba(185,206,255,.38) 50%,transparent 58%);transform:translateX(-130%);animation:sweep 4.2s ease-in-out infinite;pointer-events:none;z-index:2}
@keyframes sweep{0%{transform:translateX(-130%)}55%,100%{transform:translateX(130%)}}

/* logo glyph 均衡器条动效 */
.gl-anim rect:not([stroke]){transform-box:fill-box;transform-origin:center bottom;animation:eqp 1.8s ease-in-out infinite}
.gl-anim rect:nth-of-type(3){animation-delay:.22s}
.gl-anim rect:nth-of-type(4){animation-delay:.44s}
.gl-anim rect:nth-of-type(5){animation-delay:.66s}
@keyframes eqp{0%,100%{transform:scaleY(.72)}50%{transform:scaleY(1.12)}}

/* ===== 页脚 + 备案底栏 ===== */
.foot{border-top:1px solid var(--outline);background:var(--bg-deep);padding:44px 56px 32px}
.foot .fcols{display:flex;flex-wrap:wrap;gap:56px;justify-content:space-between;margin-bottom:36px}
.foot .fcol h5{font-size:12px;letter-spacing:.08em;color:var(--dim);text-transform:uppercase;margin-bottom:14px}
.foot .fcol a,.foot .fcol p{display:block;font-size:14px;color:var(--muted);margin-bottom:9px;line-height:1.4}
.beian{border-top:1px solid var(--outline);padding-top:22px;font-size:12px;color:var(--dim);line-height:1.9}
.beian a{color:var(--dim);text-decoration:underline;text-underline-offset:2px}
.beian a:hover{color:var(--muted)}
.beian .sep{margin:0 6px;opacity:.5}

/* ===== 法务文档页 ===== */
.legal{display:grid;grid-template-columns:170px 1fr;gap:36px;padding:48px 0}
.legal .toc{font-size:13px;color:var(--dim);line-height:2.2;position:sticky;top:20px;align-self:start}
.legal .toc b{color:var(--muted);font-weight:600;display:block;margin-bottom:8px}
.legal .toc a{display:block;color:var(--dim)}
.legal .toc a:hover{color:var(--muted)}
.legal .doc h1{font-size:28px;font-weight:700;margin:12px 0 6px}
.legal .meta{font-size:12.5px;color:var(--dim);margin-bottom:26px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.legal .doc h2{font-size:16px;margin:24px 0 8px;font-weight:700}
.legal .doc p,.legal .doc li{font-size:14px;color:var(--muted);line-height:1.75;margin-bottom:12px}
.legal .doc ul{padding-left:20px}

@media (max-width:900px){
  .wrap{padding:0 20px}
  .nav{height:56px;padding:0 20px}
  .navtoggle{display:flex}
  .nav .links{display:none;position:absolute;top:56px;left:0;right:0;flex-direction:column;align-items:flex-start;gap:0;background:var(--surface-low);border-bottom:1px solid var(--outline);padding:6px 20px 14px;z-index:20}
  .nav .links.open{display:flex}
  .nav .links a{padding:12px 0;width:100%;font-size:15px}
  .nav .links a::after{display:none}
  .foot{padding:32px 20px}
  .foot .fcols{gap:28px}
  .sec-h{font-size:22px}
  .legal{grid-template-columns:1fr;gap:0;padding:32px 0}
  .legal .toc{display:none}
}

@media (prefers-reduced-motion:reduce){
  .spectrum,.gl-anim rect:not([stroke]),.floatA,.floatB,.sheen,.baframe .ba-after,.baframe .seam{animation:none}
  .btn,.pcard{transition:none}
}

/* ===================== 首页 ===================== */
.hero{padding:80px 56px 68px}
.herogrid{position:relative;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:52px;align-items:center;max-width:1100px;margin:0 auto}
.herotitle{font-size:52px;font-weight:700;letter-spacing:-.015em;line-height:1.16}
.herolede{font-size:18px;color:var(--muted);line-height:1.65;margin-top:24px;max-width:560px}
.herobtns{display:flex;gap:14px;margin-top:32px;flex-wrap:wrap}
.hero .spectrum{margin-top:40px;max-width:520px}
.spectrum-legend{display:flex;justify-content:space-between;max-width:520px;margin-top:10px;font-size:12px;color:var(--dim);font-family:ui-monospace,SFMono-Regular,Menlo,monospace}

/* 冷暖拼贴 */
.collage{position:relative;height:400px}
.cl-mv{position:absolute;right:0;top:6px;width:78%;border:1px solid var(--outline);border-radius:16px;overflow:hidden;box-shadow:0 26px 60px rgba(0,0,0,.5)}
.cl-mv img{width:100%;height:236px;object-fit:cover}
.cl-tag{position:absolute;left:12px;top:12px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;color:var(--cold-soft);background:rgba(12,21,36,.72);padding:4px 9px;border-radius:6px;pointer-events:none;z-index:3}
.cl-paper{position:absolute;left:0;bottom:0;width:62%;background:var(--cream);padding:9px 9px 24px;border-radius:6px;box-shadow:0 26px 60px rgba(0,0,0,.55);transform:rotate(-2.4deg)}
.cl-photo{position:relative;overflow:hidden;border-radius:3px;height:158px}
.cl-cap{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:9px;color:#9a8c6a;text-align:center;margin-top:7px}

/* 我们做什么 */
.whatwedo{padding-top:20px;padding-bottom:56px}
.wwd-inner{border-top:1px solid var(--outline);padding-top:40px;display:flex;gap:56px;align-items:flex-start}
.wwd-l{flex:1}
.wwd-r{flex:1;font-size:16px;color:var(--muted);line-height:1.7;padding-top:6px}

/* 产品双卡 */
.products{padding-bottom:80px}
.pgrid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
img.pcover{width:100%;height:150px;object-fit:cover;border-radius:10px;margin-bottom:16px}
div.pcover{position:relative;overflow:hidden;border-radius:10px;margin-bottom:16px;height:150px}

/* 合作 CTA */
.ctaband{background:var(--surface-low);border-top:1px solid var(--outline);border-bottom:1px solid var(--outline);padding:52px 56px;display:flex;align-items:center;justify-content:space-between;gap:40px}
.ctaband-h{font-size:24px;font-weight:700}
.ctaband-p{font-size:15px;color:var(--muted);margin-top:8px}

@media (max-width:900px){
  .hero{padding:44px 20px 36px;background:radial-gradient(120% 60% at 20% 0%,rgba(76,141,255,.14),transparent 60%),radial-gradient(120% 60% at 90% 12%,rgba(243,201,105,.12),transparent 55%)}
  .hero .glowcold,.hero .glowwarm{display:none}
  .herogrid{grid-template-columns:1fr;gap:36px}
  .herotitle{font-size:33px;line-height:1.2;letter-spacing:-.01em}
  .herolede{font-size:15px;line-height:1.6;margin-top:18px}
  .herobtns{margin-top:24px;gap:11px;flex-direction:column;align-items:stretch}
  .herobtns .btn{width:100%;justify-content:center}
  .hero .spectrum,.spectrum-legend{max-width:none}
  .collage{height:300px}
  .cl-mv img{height:180px}
  .cl-photo{height:120px}
  .whatwedo{padding-bottom:32px}
  .wwd-inner{flex-direction:column;gap:14px;padding-top:28px}
  .wwd-r{font-size:15px;padding-top:0}
  .products{padding-bottom:32px}
  .pgrid{grid-template-columns:1fr;gap:16px}
  .pcard{padding:20px}
  .pcard .pname{font-size:18px}
  .pcard .plede{font-size:13px}
  .pcard .btn{width:100%;justify-content:center}
  .ctaband{padding:32px 20px;flex-direction:column;align-items:stretch;gap:16px}
  .ctaband-h{font-size:19px}
  .ctaband .btn{width:100%;justify-content:center}
}

/* ===================== 立刻修相片产品页 ===================== */
body.warm-page{background:#100d08}
.lx-hero{padding:72px 56px 56px;background:radial-gradient(90% 120% at 8% 0%,rgba(243,201,105,.16),transparent 55%);display:flex;gap:48px;align-items:center;max-width:1212px;margin:0 auto}
.lx-hero-l{flex:1.1}
.lx-hero-r{flex:.9}
.lx-title{font-size:44px;font-weight:700;letter-spacing:-.01em;margin:14px 0;line-height:1.2}
.lx-lede{font-size:17px;color:var(--muted);line-height:1.65;max-width:460px}
.paper{background:var(--cream);padding:14px 14px 40px;border-radius:6px;box-shadow:0 30px 60px rgba(0,0,0,.5);transform:rotate(-1.4deg)}
.paper-photo{height:230px;border-radius:2px;overflow:hidden;position:relative}
.paper-cap{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10px;color:#9a8c6a;margin-top:10px;text-align:center}
.lx-caps{padding-top:56px;padding-bottom:48px}
.capgrid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:20px}
.capgrid .pcard{padding:20px}
.capgrid .pcard b{font-size:16px}
.capgrid .pcard p{font-size:13px;color:var(--muted);margin-top:6px;line-height:1.55}
.lx-qrsec{padding-bottom:48px}
.qrbox{background:var(--warm-bg);border:1px solid #4a3d1c;border-radius:16px;padding:36px 40px;display:flex;align-items:center;gap:40px}
.qrbox-l{flex:1}
.qrbox-h{font-size:24px;font-weight:700;color:var(--cream)}
.qrbox-p{font-size:15px;color:var(--muted);margin-top:10px;line-height:1.6}
.qrbox-note{font-size:12.5px;color:var(--warm-deep);margin-top:14px;line-height:1.5}
.qrcard{background:var(--cream);padding:14px;border-radius:12px;text-align:center;flex:none}
.qrcard img{width:150px;height:150px;border-radius:6px}
.qrcard-cap{font-size:11px;color:#8a7d60;margin-top:8px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}

/* ===================== 关于我们 ===================== */
.ab-head{padding:64px 56px 40px;max-width:1212px;margin:0 auto}
.ab-title{font-size:36px;font-weight:700;letter-spacing:-.01em;margin:14px 0;max-width:720px;line-height:1.25}
.ab-lede{font-size:16px;color:var(--muted);line-height:1.7;max-width:680px}
.ab-timeline{padding-bottom:48px}
.tl{border-left:2px solid var(--outline);padding-left:32px;margin-left:6px}
.tl-item{position:relative;padding-bottom:34px}
.tl-item:last-child{padding-bottom:0}
.tl-dot{position:absolute;left:-40px;top:3px;width:12px;height:12px;border-radius:50%}
.tl-year{font-family:var(--latin);font-size:14px;font-weight:700}
.tl-h{font-size:18px;font-weight:600;margin:5px 0 6px}
.tl-p{font-size:14.5px;color:var(--muted);line-height:1.6;max-width:640px}
.ab-facts{padding-bottom:56px}
.factgrid{border-top:1px solid var(--outline);padding-top:32px;display:grid;grid-template-columns:1fr 1fr 1fr;gap:28px}
.factwide{grid-column:1/4}
.fact{font-size:15px;margin-top:8px;line-height:1.5}

/* ===================== 联系我们 ===================== */
.ct-sec{padding:48px 0 56px}
.ct-title{font-size:32px;font-weight:700;margin:14px 0 8px}
.ct-lede{font-size:15px;color:var(--muted);margin-bottom:30px;max-width:560px}
.ctgrid{display:grid;grid-template-columns:280px 1fr;gap:20px;align-items:start}
.ct-wechat{padding:18px;text-align:center}
.ct-wechat .qrcard{padding:10px}
.ct-wechat .qrcard img{width:100%;height:auto}
.ct-h{font-size:13px;font-weight:600;margin-top:12px}
.ct-p{font-size:12px;color:var(--muted);margin-top:6px;line-height:1.5}
.ctside{display:flex;flex-direction:column;gap:14px}
.ct-line{padding:16px 18px}
.ct-mail{font-size:15px;font-weight:600;display:block;margin-top:8px;color:var(--parent)}
.ct-addr{font-size:13.5px;margin-top:8px;line-height:1.5}

@media (max-width:900px){
  .lx-hero{padding:44px 20px 36px;flex-direction:column;gap:32px;align-items:stretch}
  .lx-title{font-size:30px}
  .lx-lede{font-size:15px;max-width:none}
  .paper-photo{height:200px}
  .lx-caps{padding-top:32px;padding-bottom:32px}
  .capgrid{grid-template-columns:1fr;gap:12px}
  .qrbox{flex-direction:column;align-items:stretch;padding:24px 20px;gap:24px}
  .qrbox-h{font-size:19px}
  .qrbox .btn{width:100%;justify-content:center}
  .qrcard{align-self:center}
  .ab-head{padding:44px 20px 28px}
  .ab-title{font-size:26px}
  .ab-lede{font-size:15px}
  .factgrid{grid-template-columns:1fr;gap:20px;padding-top:24px}
  .factwide{grid-column:auto}
  .ct-sec{padding:32px 0 40px}
  .ct-title{font-size:26px}
  .ctgrid{grid-template-columns:1fr}
}