/* ============================================================
   ATOMYHOUSE 首页 C 版（工程控制台 + 苹果滚动）
   全部作用域限定在 .cx，不影响 main.css 与内页
   ============================================================ */
.cx{
  --teal-50:#E6F4F5;--teal-100:#C2E6E8;--teal-200:#93D4D8;--teal-300:#5FBEC4;--teal-400:#2BA3AB;
  --teal-500:#008B94;--teal-600:#007880;--teal-700:#006970;--teal:var(--teal-500);
  --teal-06:rgba(0,139,148,.06);--teal-10:rgba(0,139,148,.10);--teal-16:rgba(0,139,148,.16);--teal-24:rgba(0,139,148,.24);--teal-ring:rgba(0,139,148,.4);--teal-glow:#3FE0E8;
  --cbg:#04070A;--cs1:#0A0F15;--cs2:#111922;--cs3:#18222E;--cbd:#1B2632;--cbd2:#2A3849;
  --ctext:#EAF1F7;--cmuted:#9FB2C6;--cfaint:#637688;
  --csp4:1rem;--csp5:1.5rem;--csp6:2rem;--csp8:3rem;--csp10:4rem;--csp12:5.5rem;--csp16:8rem;
  --cr:10px;--crlg:18px;--cpill:999px;
  --csh:0 1px 2px rgba(0,0,0,.5);--cshmd:0 12px 34px rgba(0,0,0,.5);--cshlg:0 26px 70px rgba(0,0,0,.6);
  --cease:cubic-bezier(.16,.84,.34,1);--cdur:.32s;
  --cfs:'IBM Plex Sans','Noto Sans SC',system-ui,sans-serif;
  --cfm:'IBM Plex Mono','Noto Sans SC',monospace;
  --cfd:'Space Grotesk','IBM Plex Sans','Noto Sans SC',sans-serif;
  --ccw:1280px;
  position:relative;display:block;color:var(--ctext);font-family:var(--cfs);line-height:1.65;
  background:var(--cbg);
}
.cx::before{content:'';position:fixed;inset:0;z-index:0;pointer-events:none;background:radial-gradient(1200px 620px at 50% -280px,var(--teal-10),transparent 70%)}
.cx::after{content:'';position:fixed;inset:0;z-index:0;pointer-events:none;background:radial-gradient(140% 120% at 50% 40%,transparent 55%,rgba(0,0,0,.55))}
.cx .grain{position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.04;mix-blend-mode:soft-light;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.cx *{box-sizing:border-box}
.cx .wrap{max-width:var(--ccw);margin:0 auto;padding:0 var(--csp6);position:relative;z-index:1}
.cx a{color:inherit;text-decoration:none}
.cx h1,.cx h2,.cx h3{line-height:1.1;font-weight:600;margin:0}
.cx :where(a,button,.cbtn,.ccard,.ttag):focus-visible{outline:2px solid var(--teal-300);outline-offset:3px;border-radius:6px}
.cx .mono{font-family:var(--cfm);font-variant-numeric:tabular-nums;letter-spacing:normal}
.cx .tlabel{font-family:var(--cfm);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--teal-300);display:inline-flex;align-items:center;gap:.6rem}
.cx .tlabel::before{content:'';width:22px;height:1px;background:var(--teal-700)}
.cx .ttag{display:inline-flex;align-items:center;font-family:var(--cfm);font-size:.7rem;letter-spacing:.03em;color:var(--cmuted);border:1px solid var(--cbd2);border-radius:4px;padding:.2rem .5rem;background:var(--cs1);white-space:nowrap}
.cx .ttag.tl{color:var(--teal-200);border-color:var(--teal-700);background:var(--teal-10)}
.cx .tags{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:var(--csp4)}
.cx .cbtn{display:inline-flex;align-items:center;gap:.5rem;font-weight:600;font-size:.85rem;padding:.8rem 1.5rem;border-radius:6px;border:1px solid transparent;cursor:pointer;transition:transform .2s var(--cease),box-shadow var(--cdur),border-color var(--cdur),color var(--cdur)}
.cx .cbtn svg{width:16px;height:16px}
.cx .cbtn-p{background:linear-gradient(135deg,var(--teal-500),var(--teal-400));color:#fff;box-shadow:inset 0 0 0 1px var(--teal-600),var(--csh)}
.cx .cbtn-p:hover{transform:translateY(-2px);box-shadow:var(--cshmd),0 0 30px var(--teal-ring)}
.cx .cbtn-g{background:rgba(255,255,255,.02);color:var(--ctext);border-color:var(--cbd2)}
.cx .cbtn-g:hover{border-color:var(--teal-400);color:var(--teal-200);transform:translateY(-2px)}
.cx section{position:relative;padding:var(--csp16) 0}
.cx .sechead{position:relative;max-width:820px;margin-bottom:var(--csp10)}
.cx .sechead h2{font-family:var(--cfd);font-size:clamp(2rem,3.6vw,2.9rem);letter-spacing:-.015em;margin:var(--csp4) 0}
.cx .sechead .lead{color:var(--cmuted);font-size:1.1rem;max-width:640px}
.cx .secidx{position:absolute;top:-2.6rem;right:0;font-family:var(--cfd);font-weight:700;font-size:clamp(5rem,11vw,9rem);line-height:1;color:transparent;-webkit-text-stroke:1px var(--cbd2);opacity:.5;pointer-events:none}
.cx .sechead>*{position:relative;z-index:1}
.cx .ccard{position:relative;background:linear-gradient(180deg,var(--cs2),var(--cs1));border:1px solid var(--cbd);border-radius:var(--crlg);padding:var(--csp6);overflow:hidden;box-shadow:var(--csh);transition:transform var(--cdur) var(--cease),border-color var(--cdur),box-shadow var(--cdur)}
.cx .ccard::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--teal-300),transparent);opacity:.4}
.cx .ccard::after{content:'';position:absolute;inset:0;pointer-events:none;opacity:0;background:radial-gradient(240px circle at var(--mx,50%) var(--my,0%),var(--teal-16),transparent 60%);transition:opacity var(--cdur)}
.cx .ccard:hover{transform:translateY(-5px);border-color:var(--teal-700);box-shadow:var(--cshlg),0 0 0 1px var(--teal-ring)}
.cx .ccard:hover::after{opacity:1}
.cx .ccode{position:absolute;top:var(--csp5);right:var(--csp5);font-family:var(--cfm);font-size:.66rem;letter-spacing:.1em;color:var(--cfaint)}
.cx .grid{display:grid;gap:var(--csp5)}
.cx .g2{grid-template-columns:repeat(2,1fr)}.cx .g3{grid-template-columns:repeat(3,1fr)}
.cx .itile{width:50px;height:50px;border-radius:var(--cr);display:grid;place-items:center;margin-bottom:var(--csp5);background:radial-gradient(120% 120% at 30% 20%,var(--teal-16),var(--cs3));border:1px solid var(--teal-700);color:var(--teal-200)}
.cx .itile svg{width:24px;height:24px}
.cx .ccard h3{font-size:1.4rem;letter-spacing:-.01em;margin-bottom:.4rem}
.cx .ccard .sub{color:var(--teal-300);font-family:var(--cfm);font-size:.72rem;letter-spacing:.04em;margin-bottom:.8rem}
.cx .ccard p{color:var(--cmuted);font-size:.9rem;margin:0}
.cx .feat{list-style:none;margin:var(--csp4) 0 0;padding:0;display:grid;gap:.6rem}
.cx .feat li{display:flex;gap:.7rem;font-size:.88rem;color:var(--cmuted)}
.cx .feat li svg{width:16px;height:16px;color:var(--teal-300);flex:none;margin-top:4px}
.cx .cardhead{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem}
.cx .pnum{font-family:var(--cfd);font-weight:700;font-size:1.6rem;color:transparent;-webkit-text-stroke:1px var(--teal-700)}

/* HERO 钉屏 */
.cx .hero{height:125vh;position:relative;display:block;min-height:0;padding:0;overflow:visible}
.cx .hpin{position:sticky;top:0;height:100vh;overflow:hidden;display:flex;align-items:center}
.cx .hbg{position:absolute;inset:0;z-index:0}
.cx .hgrid{position:absolute;inset:-2px;background-image:linear-gradient(var(--cbd) 1px,transparent 1px),linear-gradient(90deg,var(--cbd) 1px,transparent 1px);background-size:58px 58px;opacity:.5;animation:cx-gf 40s linear infinite;-webkit-mask-image:radial-gradient(120% 95% at 60% 12%,#000 25%,transparent 80%);mask-image:radial-gradient(120% 95% at 60% 12%,#000 25%,transparent 80%)}
@keyframes cx-gf{to{background-position:58px 58px}}
.cx #cnet{position:absolute;inset:0;width:100%;height:100%;z-index:1}
.cx .hglow{position:absolute;top:-24%;right:4%;width:820px;height:560px;background:radial-gradient(circle,var(--teal-24),transparent 64%);filter:blur(26px);z-index:1}
.cx .hscrim{position:absolute;inset:0;z-index:2;background:linear-gradient(90deg,var(--cbg) 6%,rgba(4,7,10,.35) 48%,transparent 72%)}
.cx .hhud{position:absolute;inset:var(--csp8) var(--csp6);z-index:3;pointer-events:none}
.cx .hhud span{position:absolute;width:30px;height:30px;border:1px solid var(--teal-700)}
.cx .hhud .tl{top:0;left:0;border-right:0;border-bottom:0}.cx .hhud .tr{top:0;right:0;border-left:0;border-bottom:0}.cx .hhud .bl{bottom:0;left:0;border-right:0;border-top:0}.cx .hhud .br{bottom:0;right:0;border-left:0;border-top:0}
.cx .hin{position:relative;z-index:4;will-change:transform,opacity,filter}
.cx .hbadge{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--cfm);font-size:.72rem;letter-spacing:.16em;color:var(--teal-200);text-transform:uppercase;border:1px solid var(--teal-700);border-radius:var(--cpill);padding:.4rem .95rem;background:var(--teal-06)}
.cx .dot{width:7px;height:7px;border-radius:50%;background:var(--teal-300);animation:cx-ping 2.6s ease-out infinite}
@keyframes cx-ping{0%{box-shadow:0 0 0 0 var(--teal-ring)}70%,100%{box-shadow:0 0 0 7px transparent}}
.cx .hin h1{font-family:var(--cfd);font-size:clamp(2.4rem,5.4vw,4rem);letter-spacing:-.025em;margin:var(--csp5) 0;max-width:18ch}
.cx .hin h1 .hl{background:linear-gradient(120deg,var(--teal-300),var(--teal-glow));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.cx .hsub{font-size:1.08rem;color:var(--cmuted);max-width:640px;margin-bottom:var(--csp6)}
.cx .hacts{display:flex;align-items:center;gap:var(--csp5);flex-wrap:wrap}
.cx .cnote{font-family:var(--cfm);font-size:.72rem;color:var(--cfaint);display:flex;align-items:center;gap:.5rem}
.cx .hstats{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--csp6);margin-top:var(--csp10);padding-top:var(--csp6);border-top:1px solid var(--cbd);max-width:1000px}
.cx .st .tlabel{margin-bottom:.6rem}.cx .st .tlabel::before{display:none}
.cx .st .v{font-family:var(--cfd);font-size:1.25rem;color:var(--ctext)}
.cx .st .bar{height:2px;background:var(--cbd2);margin-top:.8rem;border-radius:2px;overflow:hidden}
.cx .st .bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--teal-500),var(--teal-glow));transition:width 1.2s var(--cease)}
.cx .hin.shown .st .bar i{width:var(--f,75%)}

/* 价值链一句话 */
.cx .chain{padding:10vh 0;text-align:center}
.cx .chain h2{font-family:var(--cfd);font-size:clamp(1.6rem,3.2vw,2.4rem);letter-spacing:-.015em;line-height:1.3;max-width:24ch;margin:0 auto}
.cx .chain .steps{display:flex;justify-content:center;flex-wrap:wrap;gap:.8rem;margin-top:var(--csp8);font-family:var(--cfm);font-size:.85rem;color:var(--cmuted)}
.cx .chain .steps b{color:var(--teal-300);font-weight:500}

/* 产品 spotlight S3D */
.cx .pgrid3 .ccard h3{font-size:1.1rem}

/* Autosupport 钉屏故事 */
.cx .story{position:relative;background:linear-gradient(180deg,var(--cbg),#06090d)}
.cx .spin{position:sticky;top:0;height:100vh;overflow:hidden;display:grid;grid-template-columns:1.15fr .85fr;align-items:center;gap:var(--csp8);max-width:1240px;margin:0 auto;padding:0 var(--csp6)}
.cx .sglow{position:absolute;top:50%;left:32%;width:760px;height:760px;transform:translate(-50%,-50%);background:radial-gradient(circle,var(--teal-16),transparent 60%);filter:blur(30px);pointer-events:none}
.cx .sviz{position:relative;z-index:1;border:1px solid var(--cbd2);border-radius:14px;overflow:hidden;background:var(--cs1);box-shadow:var(--cshlg);aspect-ratio:16/10}
.cx .sviz svg{width:100%;height:100%;display:block}
.cx .stext{position:relative;z-index:2;min-height:300px}
.cx .stext .tlabel{color:var(--teal-300)}
.cx .step{position:absolute;inset:0;opacity:0;transform:translateY(26px);transition:opacity .5s var(--cease),transform .5s var(--cease);pointer-events:none}
.cx .step.on{opacity:1;transform:none}
.cx .step .n{font-family:var(--cfm);font-size:.8rem;color:var(--teal-300);letter-spacing:.1em;margin:1rem 0 .7rem}
.cx .step h3{font-family:var(--cfd);font-size:clamp(1.6rem,2.8vw,2.2rem);letter-spacing:-.015em;margin-bottom:.9rem}
.cx .step p{font-size:1.05rem;color:var(--cmuted);max-width:38ch}
.cx .sprog{position:absolute;bottom:40px;left:var(--csp6);right:var(--csp6);max-width:1192px;margin:0 auto;height:3px;background:rgba(255,255,255,.1);border-radius:3px}
.cx .sprog i{display:block;height:100%;width:100%;background:linear-gradient(90deg,var(--teal),var(--teal-glow));border-radius:3px;transform:scaleX(0);transform-origin:left;will-change:transform}
/* Autosupport SVG 演示母题 */
.cx .viz [class^="g-"]{transition:opacity .55s var(--cease)}
.cx .viz .g-span,.cx .viz .g-ghost,.cx .viz .g-solid,.cx .viz .g-badge,.cx .viz .g-scan{opacity:0}
.cx .viz[data-stage="0"] .g-scan{opacity:1}
.cx .viz[data-stage="1"] .g-span{opacity:1}
.cx .viz[data-stage="2"] .g-span{opacity:1}.cx .viz[data-stage="2"] .g-ghost{opacity:1}
.cx .viz[data-stage="3"] .g-solid{opacity:1}.cx .viz[data-stage="3"] .g-badge{opacity:1}
.cx .viz .lbl{font-family:var(--cfm);font-size:13px;fill:#8fa3b2}
.cx .viz .lbl-t{fill:var(--teal-200)}

/* Agent + 信任机制 */
.cx .agents{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--csp5)}
.cx .agent{background:var(--cs2);border:1px solid var(--cbd);border-radius:var(--crlg);padding:var(--csp6)}
.cx .agent .ai{color:var(--teal-300);margin-bottom:.5rem;display:flex}
.cx .agent .ai svg{width:24px;height:24px}
.cx .agent h4{font-size:1.05rem;margin:0 0 .5rem}
.cx .agent p{color:var(--cmuted);font-size:.88rem;margin:0}

/* 指标 */
.cx .metrics{background:var(--cs1);border-top:1px solid var(--cbd);border-bottom:1px solid var(--cbd)}
.cx .mg{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--csp6)}
.cx .m{border-left:2px solid var(--teal-700);padding-left:var(--csp5)}
.cx .m .num{font-family:var(--cfd);font-size:clamp(2.4rem,4.5vw,3.4rem);font-weight:700;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums;color:var(--ctext)}
.cx .m .num .u{font-size:.5em;color:var(--teal-300)}
.cx .m p{color:var(--cmuted);font-size:.9rem;margin:.7rem 0 0}
.cx .mnote{margin:var(--csp6) 0 0;color:var(--cfaint);font-family:var(--cfm);font-size:.76rem;line-height:1.7;max-width:760px}

/* 流程 */
.cx .pipe{position:relative;display:grid;grid-template-columns:repeat(5,1fr);gap:var(--csp4);margin-top:var(--csp6)}
.cx .pipe::before{content:'';position:absolute;top:14px;left:6%;right:6%;height:1px;background:linear-gradient(90deg,var(--teal-700),var(--teal-400),var(--teal-700))}
.cx .pipe .fd{position:absolute;top:10px;left:6%;width:9px;height:9px;border-radius:50%;background:var(--teal-glow);box-shadow:0 0 14px var(--teal-glow);animation:cx-flow 5.5s linear infinite}
@keyframes cx-flow{to{left:94%}}
.cx .pst{position:relative;text-align:center;padding-top:var(--csp8)}
.cx .pst .nd{position:absolute;top:7px;left:50%;transform:translateX(-50%);width:16px;height:16px;border-radius:50%;background:var(--cbg);border:2px solid var(--teal-400)}
.cx .pst .nd::after{content:'';position:absolute;inset:3px;border-radius:50%;background:var(--teal-400)}
.cx .pst .pn{font-family:var(--cfm);font-size:.72rem;color:var(--teal-300)}
.cx .pst .pt{font-size:.9rem;margin-top:.2rem}

/* CTA */
.cx .cta{text-align:center;background:radial-gradient(760px 360px at 50% 0%,var(--teal-16),transparent 70%)}
.cx .cta h2{font-family:var(--cfd);font-size:clamp(2rem,4.5vw,3rem);letter-spacing:-.02em;margin-bottom:var(--csp4)}
.cx .cta p{color:var(--cmuted);max-width:580px;margin:0 auto var(--csp6)}
.cx .cacts{display:flex;gap:var(--csp4);justify-content:center;flex-wrap:wrap}

/* 滚动揭示 */
.cx [data-rev]{opacity:0;transform:translateY(24px);transition:opacity .7s var(--cease),transform .7s var(--cease)}
.cx [data-rev].shown{opacity:1;transform:none}

@media(max-width:960px){
  .cx .hstats,.cx .mg{grid-template-columns:repeat(2,1fr)}
  .cx .g3{grid-template-columns:1fr}
}
@media(max-width:820px){
  .cx .g2,.cx .agents,.cx .hstats,.cx .mg{grid-template-columns:1fr}
  .cx .spin{grid-template-columns:1fr;gap:var(--csp5);padding-top:90px}
  .cx .stext{min-height:200px}
  .cx .pipe{grid-template-columns:1fr}.cx .pipe::before,.cx .pipe .fd{display:none}
  .cx .pst{padding-top:0;padding-left:var(--csp6);text-align:left}.cx .pst .nd{top:4px;left:0;transform:none}
  .cx .secidx{font-size:5rem;top:-1.4rem}
}
@media(prefers-reduced-motion:reduce){
  .cx *,.cx *::before,.cx *::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .cx [data-rev]{opacity:1;transform:none}
  .cx .hero,.cx .story{height:auto}
  .cx .hpin,.cx .spin{position:static;height:auto;padding-top:90px;padding-bottom:60px}
  .cx .hin{opacity:1!important;transform:none!important;filter:none!important}
  .cx .step{position:static;opacity:1!important;transform:none!important;margin-bottom:28px}
}