/* ==========================================================================
   微功夫官网 · 首页专用样式
   依赖 tokens.css；只保留首页独有区块（首屏、信任条、方法、交付、证据、适配、联系）
   ========================================================================== */

/* ---------- 首屏 ---------- */
.hero{position:relative;overflow:hidden;background:var(--ink);color:#fff}
.hero-media{position:absolute;inset:0;z-index:0}
.hero-media img,.hero-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:58% 42%;transform:scale(1.02)}
.hero-media img{filter:grayscale(1) contrast(1.04) brightness(.72) saturate(.9)}
.hero-media video{filter:grayscale(1) contrast(1.04) brightness(.72) saturate(.9);background:#071017;pointer-events:none}
.hero-media .hero-video.is-hidden{display:none}
.hero-media::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(4,10,16,.97) 0%,rgba(4,10,16,.90) 30%,rgba(4,10,16,.55) 56%,rgba(4,10,16,.20) 78%,rgba(4,10,16,.38) 100%),linear-gradient(0deg,rgba(4,10,16,.82) 0%,rgba(4,10,16,.12) 40%,transparent 68%),radial-gradient(760px 520px at 72% 42%,rgba(53,164,245,.16),transparent 70%)}
.hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1fr) 336px;gap:64px;align-items:center;padding-top:88px;padding-bottom:84px;min-height:620px}
.hero h1{color:#fff;font-size:clamp(38px,4.4vw,60px);line-height:1.1;letter-spacing:-.045em;margin:20px 0 0;max-width:720px}
.hero h1 em{font-style:normal;color:var(--blue-soft)}
.hero .sub{margin-top:22px;max-width:560px;color:rgba(255,255,255,.68);font-size:16px;line-height:1.85}
.hero .hero-actions{margin-top:32px}
.hero-cities{margin-top:28px;max-width:720px}
.hc-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;margin:0 0 10px;font-size:12.5px;letter-spacing:.04em;color:rgba(255,255,255,.56);text-shadow:0 1px 2px rgba(0,0,0,.45)}
.hc-head b{font-size:13px;font-weight:700;color:#fff;letter-spacing:.02em}
.hc-head span{font-weight:400;color:rgba(255,255,255,.44)}
.hc-list{display:flex;flex-wrap:wrap;align-items:center;list-style:none;margin:0;padding:0}
.hc-list li{display:inline-flex;align-items:center}
.hc-list li+li::before{content:"·";margin:0 7px;color:rgba(255,255,255,.26);font-size:12px}
.hc-list a{color:rgba(255,255,255,.78);font-size:12.5px;text-shadow:0 1px 2px rgba(0,0,0,.45);line-height:1.6;text-decoration:none;border-bottom:1px solid transparent;padding-bottom:1px;transition:color .18s,border-color .18s}
.hc-list a:hover{color:#fff;border-bottom-color:rgba(255,255,255,.45)}
.hc-list a.is-local{color:#fff;font-weight:700}
.hc-list a em{font-style:normal;font-size:9.5px;font-weight:700;letter-spacing:.04em;color:#9DD4FF;border:1px solid rgba(157,212,255,.42);border-radius:3px;padding:0 3px;margin:0 3px 0 6px;vertical-align:1px}
.hero .facts{margin-top:22px}
.hero .btn-on-dark{backdrop-filter:blur(8px)}
.facts{display:flex;align-items:center;flex-wrap:wrap;margin-top:34px;color:rgba(255,255,255,.5);font-size:12px}
.facts span{padding:0 14px;border-left:1px solid rgba(255,255,255,.16)}
.facts span:first-child{padding-left:0;border-left:0}

/* 首屏诊断卡 */
.diag{background:rgba(9,19,29,.55);border:1px solid rgba(255,255,255,.16);border-radius:var(--radius-lg);padding:22px;box-shadow:0 34px 90px rgba(0,0,0,.42);backdrop-filter:blur(18px)}
.diag-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.diag-top .label{color:#fff;font-size:13.5px;font-weight:700}
.diag-top .pill{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:999px;background:rgba(53,164,245,.16);color:#9DD4FF;font-size:11px;font-weight:700}
.diag-top .pill i{width:5px;height:5px;border-radius:50%;background:#5CC8FF;display:block}
.diag-row{display:flex;gap:12px;padding:13px 0;border-top:1px solid rgba(255,255,255,.09)}
.diag-row h4{color:#fff;font-size:12px;font-weight:700;margin:0 0 3px}
.diag-row p{color:rgba(255,255,255,.5);font-size:12px;line-height:1.6;margin:0}
.diag-icon{flex:0 0 28px;height:28px;border-radius:var(--radius-sm);background:rgba(53,164,245,.14);display:flex;align-items:center;justify-content:center;color:var(--blue-soft)}
.diag-icon svg{width:14px;height:14px}
.diag-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px;padding-top:15px;border-top:1px solid rgba(255,255,255,.1);color:#9DD4FF;font-size:12px;font-weight:600}
.diag-foot svg{width:13px;height:13px}

/* ---------- 信任条 ---------- */
.trust{background:#fff;border-bottom:1px solid var(--line)}
.trust .wrap{display:flex;align-items:center;justify-content:space-between;gap:28px;min-height:88px;padding:18px 0}
.trust-left{display:flex;align-items:center;gap:28px;flex-wrap:wrap}
.trust-label{color:var(--muted);font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap}
.stats{display:flex;align-items:center;flex-wrap:wrap}
.stat{padding:0 22px;border-left:1px solid var(--line);display:flex;align-items:baseline;gap:7px}
.stat:first-child{border-left:0;padding-left:0}
.stat b{color:var(--ink);font-size:var(--fs-h3);font-weight:800;letter-spacing:-.02em}
.stat span{color:var(--muted);font-size:12px;white-space:nowrap}
.trust-link{color:var(--blue-deep);font-size:12px;font-weight:700;display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.trust-link svg{width:13px;height:13px}

/* ---------- 诊断 / 痛点 ---------- */
.intro-head{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;margin-bottom:38px}
.intro-head h2{max-width:640px;font-size:var(--fs-h2)}
.intro-head p{max-width:400px;color:var(--muted);font-size:13.5px;line-height:1.85;text-align:right}
.pain-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:48px}
.pain{background:#fff;border:1px solid var(--line);border-radius:var(--radius-md);padding:20px;min-height:172px;display:flex;flex-direction:column;box-shadow:var(--shadow-sm)}
.pain .ico{width:36px;height:36px;border-radius:var(--radius-sm);background:var(--tint);display:flex;align-items:center;justify-content:center;color:var(--blue-deep);margin-bottom:16px}
.pain .ico svg{width:18px;height:18px}
.pain h3{font-size:var(--fs-card);line-height:1.45;margin-bottom:7px}
.pain p{color:var(--muted);font-size:13.5px;line-height:1.75}
.services{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.service{position:relative;overflow:hidden;background:#fff;border:1px solid var(--line);border-radius:var(--radius-md);padding:20px;min-height:200px;display:flex;flex-direction:column;justify-content:space-between;box-shadow:var(--shadow-sm);transition:border-color .2s,transform .2s}
.service:hover{border-color:var(--blue);transform:translateY(-2px)}
.service::before{content:"";position:absolute;right:-46px;top:-58px;width:150px;height:150px;border-radius:50%;background:radial-gradient(circle,rgba(53,164,245,.14),transparent 68%)}
.service .num{color:var(--blue-deep);font-size:11px;font-weight:800;letter-spacing:.1em;margin-bottom:12px}
.service h3{font-size:var(--fs-card);line-height:1.35;margin-bottom:7px}
.service p{color:var(--muted);font-size:13.5px;line-height:1.7}
.service .go{margin-top:16px;width:28px;height:28px;border-radius:50%;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--blue-deep)}
.service .go svg{width:11px;height:11px}
.service:nth-child(2){background:linear-gradient(160deg,#0E1C28,#0A141D);border-color:#0E1C28}
.service:nth-child(2) h3{color:#fff}
.service:nth-child(2) p{color:rgba(255,255,255,.55)}
.service:nth-child(2) .num{color:var(--blue-soft)}
.service:nth-child(2) .go{border-color:rgba(255,255,255,.2);color:var(--blue-soft)}

/* ---------- 方法（深色） ---------- */
.method{position:relative;overflow:hidden;background:var(--footer-bg);color:#fff}
.intro-def{margin:0 0 28px;padding:20px 24px;border:1px solid var(--line);border-radius:var(--radius-md);background:#fff;font-size:var(--fs-body);line-height:1.9;color:var(--text);max-width:1000px;box-shadow:0 1px 2px rgba(11,27,43,.04)}
.method-note{margin:22px 0 0;padding:16px 20px;border-left:2px solid var(--blue-soft);background:rgba(255,255,255,.045);border-radius:0 var(--radius-sm) var(--radius-sm) 0;font-size:var(--fs-sm);line-height:1.85;color:rgba(255,255,255,.66);max-width:1000px}
.method::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(720px 420px at 84% 8%,rgba(53,164,245,.16),transparent 68%),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(0deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:auto,88px 88px,88px 88px;mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.55) 70%,transparent 100%)}
.method .wrap{position:relative;z-index:2}
.method h2{color:#fff}
.method .section-head .lead{color:rgba(255,255,255,.55)}
.method .kicker{color:var(--blue-soft)}
.method .kicker::before{background:var(--blue-soft)}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.step{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:var(--radius-md);padding:24px;min-height:212px;display:flex;flex-direction:column;justify-content:space-between;transition:transform .2s,border-color .2s,background .2s}
.step .n{font-size:11px;font-weight:800;letter-spacing:.14em;color:var(--blue-soft)}
.step h3{color:#fff;font-size:var(--fs-h3);line-height:1.35;margin:12px 0 7px}
.step p{color:rgba(255,255,255,.56);font-size:13.5px;line-height:1.78}
.step .out{margin-top:16px;padding-top:13px;border-top:1px solid rgba(255,255,255,.1);font-size:12px;line-height:1.7;color:#9DD4FF}
.step .out b{color:#fff}

/* ---------- 交付 ---------- */
.deliver-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.deliver-item{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-md);padding:20px;min-height:174px;display:flex;flex-direction:column;justify-content:space-between}
.deliver-item .ico{width:34px;height:34px;border-radius:var(--radius-sm);background:var(--tint);display:flex;align-items:center;justify-content:center;color:var(--blue-deep);margin-bottom:14px}
.deliver-item .ico svg{width:17px;height:17px}
.deliver-item h3{font-size:var(--fs-card);line-height:1.4;margin-bottom:6px}
.deliver-item p{color:var(--muted);font-size:13.5px;line-height:1.7}
.deliver-item .fmt{margin-top:14px;color:var(--blue-deep);font-size:11px;font-weight:800;letter-spacing:.06em}
.deliver-item.accent{background:var(--footer-bg);border-color:var(--footer-bg)}
.deliver-item.accent h3{color:#fff}
.deliver-item.accent p{color:rgba(255,255,255,.56)}
.deliver-item.accent .ico{background:rgba(53,164,245,.14);color:var(--blue-soft)}
.deliver-item.accent .fmt{color:var(--blue-soft)}

/* ---------- 证据 ---------- */
.proof-top{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:40px}
.proof-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-md);padding:20px;min-height:174px}
.proof-card .big{color:var(--ink);font-size:30px;line-height:1.1;font-weight:800;letter-spacing:-.04em}
.proof-card .big span{font-size:12px;color:var(--muted);font-weight:600;letter-spacing:0;margin-left:4px}
.proof-card h3{font-size:var(--fs-card);margin:11px 0 7px}
.proof-card p{color:var(--muted);font-size:13.5px;line-height:1.75}
.proof-card.dark{background:var(--footer-bg);border-color:var(--footer-bg)}
.proof-card.dark .big,.proof-card.dark h3{color:#fff}
.proof-card.dark p{color:rgba(255,255,255,.55)}
.proof-card.dark .big span{color:rgba(255,255,255,.55)}
.case-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.case-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--radius-md);overflow:hidden;box-shadow:var(--shadow-sm)}
.case-body{padding:20px;display:flex;flex-direction:column;flex:1}
.case-body .meta{font-size:11px;font-weight:700;letter-spacing:.05em;color:var(--blue-deep);margin-bottom:8px}
.case-body h3{font-size:var(--fs-card);line-height:1.4;margin-bottom:7px}
.case-body p{color:var(--muted);font-size:13.5px;line-height:1.75;margin-bottom:14px}
.case-link{margin-top:auto;color:var(--blue-deep);font-size:12px;font-weight:800;display:inline-flex;align-items:center;gap:7px}
.case-link svg{width:12px;height:12px}
.proof-note{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:22px;color:var(--muted);font-size:12px;line-height:1.7}
.proof-note a{color:var(--blue-deep);font-weight:700;white-space:nowrap}

/* ---------- 适配 ---------- */
.fit-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.fit-card{border:1px solid var(--line);border-radius:var(--radius-lg);padding:28px;background:var(--surface)}
.fit-card.good{border-color:#BFE3FF;background:linear-gradient(180deg,#F4FAFF 0%,#fff 100%)}
.fit-card.bad{border-color:#F3D6D6;background:linear-gradient(180deg,#FFF7F7 0%,#fff 100%)}
.fit-card h3{font-size:var(--fs-h3);line-height:1.35;margin-bottom:16px;display:flex;align-items:center;gap:10px}
.fit-card h3 .mark{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13.5px;font-weight:800}
.fit-card.good .mark{background:#DCFCE7;color:#15803D}
.fit-card.bad .mark{background:#FEE2E2;color:#B91C1C}
.fit-list{list-style:none;display:grid;gap:12px}
.fit-list li{display:flex;gap:10px;align-items:flex-start;color:var(--muted);font-size:13.5px;line-height:1.75}
.fit-list li svg{flex:0 0 16px;width:16px;height:16px;margin-top:3px}
.fit-card.good .fit-list svg{color:#16A34A}
.fit-card.bad .fit-list svg{color:#DC2626}

/* ---------- 首页 FAQ ---------- */
.faq-home-grid{display:grid;grid-template-columns:340px minmax(0,1fr);gap:64px;align-items:start}
.faq-intro h2{font-size:var(--fs-h2);line-height:1.22}
.faq-intro p{color:var(--muted);font-size:13.5px;line-height:1.85;margin-top:14px;max-width:320px}
.contact-mini{display:grid;gap:6px;margin-top:22px;color:var(--muted);font-size:12px}
.contact-mini b{color:var(--ink)}

/* ---------- 首页联系区（深色表单） ---------- */
.contact{position:relative;overflow:hidden;background:linear-gradient(135deg,#071017 0%,#0A2234 56%,#0D3A57 100%);color:#fff}
.contact::before{content:"";position:absolute;inset:0;background:radial-gradient(720px 420px at 80% 18%,rgba(53,164,245,.2),transparent 68%),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(0deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:auto,76px 76px,76px 76px;mask-image:linear-gradient(180deg,#000,rgba(0,0,0,.4))}
.contact .wrap{position:relative;z-index:2}
.contact-grid{display:grid;grid-template-columns:minmax(0,1fr) 460px;gap:64px;align-items:start}
.contact h2{color:#fff;font-size:var(--fs-h2)}
.contact .kicker{color:var(--blue-soft)}
.contact .kicker::before{background:var(--blue-soft)}
.contact .lead{color:rgba(255,255,255,.64);font-size:14.5px;line-height:1.85;margin-top:16px;max-width:520px}
.contact-list{display:grid;gap:14px;margin-top:28px}
.contact-item{display:flex;gap:12px;align-items:flex-start;font-size:13.5px;line-height:1.7;color:rgba(255,255,255,.72)}
.contact-item .ci{flex:0 0 30px;height:30px;border-radius:var(--radius-sm);background:rgba(53,164,245,.14);display:flex;align-items:center;justify-content:center;color:var(--blue-soft)}
.contact-item .ci svg{width:14px;height:14px}
.contact-item b{display:block;color:#fff;font-size:11px;letter-spacing:.08em;margin-bottom:2px}
.contact-form{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);border-radius:var(--radius-lg);padding:26px 24px 22px;backdrop-filter:blur(14px)}
.contact-form h3{color:#fff;font-size:var(--fs-h3);margin-bottom:5px}
.contact-form .form-sub{color:rgba(255,255,255,.5);font-size:12px;line-height:1.7;margin-bottom:18px}
.contact-form .field{margin-bottom:12px;gap:6px}
.contact-form .field label{font-size:11px;font-weight:700;letter-spacing:.04em;color:rgba(255,255,255,.6)}
.contact-form .field input,.contact-form .field textarea{height:42px;padding:0 11px;border:1px solid rgba(255,255,255,.16);border-radius:var(--radius-sm);background:rgba(255,255,255,.07);color:#fff;font-size:13.5px}
.contact-form .field textarea{height:86px;padding-top:10px}
.contact-form .field input::placeholder,.contact-form .field textarea::placeholder{color:rgba(255,255,255,.34)}
.contact-form .field input:focus,.contact-form .field textarea:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(53,164,245,.14)}
.contact-form .consent-line{color:rgba(255,255,255,.55);font-size:12px;margin:2px 0 14px}
.contact-form .consent-line a{color:var(--blue-soft)}
.contact-form .btn{width:100%}
.contact-form .form-note{color:rgba(255,255,255,.36);font-size:11px;margin-top:10px}
.contact-form .form-note a{color:var(--blue-soft)}

/* ---------- 响应式 ---------- */
@media(max-width:1200px){
  .hero-grid{grid-template-columns:minmax(0,1fr) 316px;gap:40px}
  .pain-grid{grid-template-columns:repeat(2,1fr)}
  .services{grid-template-columns:repeat(3,1fr)}
  .deliver-grid{grid-template-columns:repeat(2,1fr)}
  .proof-top{grid-template-columns:repeat(2,1fr)}
  .proof-top .proof-card:last-child{grid-column:1/-1}
  .contact-grid{grid-template-columns:minmax(0,1fr) 420px;gap:36px}
}
@media(max-width:1000px){
  .steps{grid-template-columns:repeat(2,1fr)}
  .faq-home-grid{grid-template-columns:1fr;gap:28px}
  .faq-intro h2{font-size:var(--fs-h2);line-height:1.22}
.faq-intro p{max-width:640px}
}
@media(max-width:960px){
  .hero-grid{grid-template-columns:1fr;gap:32px;padding-top:56px;padding-bottom:56px;min-height:0}
  .hero h1{font-size:clamp(30px,8.6vw,40px)}
  .hero .sub{font-size:14.5px}
  .hero .hero-actions{flex-direction:column;align-items:stretch}
  .hero .btn{width:100%}
  .diag{order:3}
  .trust .wrap{flex-direction:column;align-items:flex-start;gap:14px;padding:20px 0}
  .stat{padding:0 14px}
  .intro-head{display:block}
  .intro-head p{text-align:left;max-width:none;margin-top:14px}
  .services,.steps,.deliver-grid,.proof-top,.case-grid,.fit-grid,.contact-grid{grid-template-columns:1fr}
  .proof-top .proof-card:last-child{grid-column:auto}
  .services .service:last-child{grid-column:auto}
}
@media(max-width:640px){
  .pain-grid{grid-template-columns:1fr}
  .services{grid-template-columns:1fr 1fr}
  .services .service:last-child{grid-column:1/-1}
  .stat{width:50%;padding:0}
  .facts{width:100%}
}
@media (prefers-reduced-motion: reduce){.hero-media .hero-video{display:none}}

@media (max-width:600px){
  .hero-cities{margin-top:22px}
  .hc-head{font-size:12px;gap:6px;margin-bottom:8px}
  .hc-head span{display:block;flex-basis:100%}
  .hc-list a{font-size:12px}
  .hc-list li+li::before{margin:0 5px;font-size:11px}
  .hc-list a em{font-size:9px;margin:0 2px 0 4px}
}

/* 移动端/平板首屏：静态图替代视频，避免 16:9 被裁成窄条 */
@keyframes heroDrift{
  0%{transform:scale(1.03) translate3d(0,0,0)}
  100%{transform:scale(1.08) translate3d(1.4%,-1.2%,0)}
}
@media (max-width:960px){
  .hero-media{inset:0 0 auto 0;height:74%}
  .hero-media .hero-video{display:none!important}
  .hero-media img{object-position:50% 40%;animation:heroDrift 26s ease-in-out infinite alternate;will-change:transform}
  .hero-media::after{background:linear-gradient(180deg,rgba(4,10,16,.76) 0%,rgba(4,10,16,.60) 34%,rgba(4,10,16,.88) 68%,var(--ink) 100%)}
  .hero .facts{display:none}
}
@media (max-width:760px){
  .hero-media img{object-position:50% 38%}
  .hero-media::after{background:linear-gradient(180deg,rgba(4,10,16,.74) 0%,rgba(4,10,16,.52) 30%,rgba(4,10,16,.86) 66%,var(--ink) 100%)}
}

/* 尊重系统设置：减少动态效果时关闭首屏漂移 */
@media (prefers-reduced-motion:reduce){
  .hero-media img{animation:none!important}
}

/* ---------- 首页最新文章 ---------- */
.news-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.news-item{background:var(--white);padding:26px 28px;display:flex;flex-direction:column;gap:10px;transition:background .2s}
.news-item:hover{background:var(--surface)}
.news-item h3{font-size:16.5px;line-height:1.5;margin:0;color:var(--ink)}
.news-item p{margin:0;font-size:13.5px;line-height:1.75;color:var(--muted)}
.news-meta{font-size:12px;letter-spacing:.02em;color:var(--muted-2)}
.news-more{margin:24px 0 0}
.news-more a{font-size:13.5px;color:var(--blue-deep);text-decoration:none;border-bottom:1px solid var(--line-2);padding-bottom:2px}
.news-more a:hover{border-color:var(--blue-deep)}
@media(max-width:760px){.news-list{grid-template-columns:1fr}}