/**
 * Solutions list — from mach-solutions.html
 */
html:has(body.page-solutions){scroll-behavior:smooth;scroll-padding-top:88px}
/* 跨页带 #hash 进入时瞬时定位，避免从页顶 smooth 滑行很久 */
html.hash-landing{scroll-behavior:auto!important}
body.page-solutions .scene{scroll-margin-top:88px}
body.page-solutions{
  padding-top:0!important;
  --black:#0b0c0e;--black2:#141518;--white:#fff;--off:#f7f7f8;--tint:#f4f6fa;
  --blue:#1f6feb;--blue-deep:#0d2f66;--blue-light:#5a97ff;--gray:#6b7280;
  --line:rgba(0,0,0,.09);--line-d:rgba(255,255,255,.14);--navy:#0b2a5b;
  --maxw:1400px;--radius:2px;--ease:cubic-bezier(.2,.8,.2,1)
}
body.page-solutions h1,body.page-solutions h2,body.page-solutions h3,body.page-solutions h4{font-family:'Archivo',sans-serif;letter-spacing:-.01em;margin:0}
body.page-solutions p{margin:0;line-height:1.65;color:var(--gray)}
body.page-solutions .wrap:not(.footgrid):not(.footbar){max-width:var(--maxw);margin:0 auto;padding:0 40px;box-sizing:border-box}
@media(max-width:1000px){body.page-solutions .wrap:not(.footgrid):not(.footbar){padding:0 24px}}
body.page-solutions .site-footer{border-top:1px solid var(--line-d)}
body.page-solutions #nav{background:transparent!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;color:#fff!important;box-shadow:none!important}
body.page-solutions #nav .nav-inner{height:96px!important}
body.page-solutions #nav .nav-rule{background:rgba(255,255,255,.22)!important}
body.page-solutions #nav .logo .lg-light{display:block!important}
body.page-solutions #nav .logo .lg-dark{display:none!important}
body.page-solutions #nav .navcta{border-color:rgba(255,255,255,.55)!important;color:#fff!important}
body.page-solutions #nav .searchbtn,body.page-solutions #nav .iconbtn{background:rgba(255,255,255,.14)!important;border-color:rgba(255,255,255,.3)!important;color:#fff!important}
body.page-solutions #nav .searchbtn img{filter:none!important}
body.page-solutions #nav.scrolled,body.page-solutions #nav.menu-open{background:rgba(255,255,255,.96)!important;backdrop-filter:blur(12px)!important;-webkit-backdrop-filter:blur(12px)!important;color:var(--black)!important}
body.page-solutions #nav.scrolled .nav-inner,body.page-solutions #nav.menu-open .nav-inner{height:70px!important}
body.page-solutions #nav.scrolled .nav-rule,body.page-solutions #nav.menu-open .nav-rule{background:var(--line)!important}
body.page-solutions #nav.scrolled .logo .lg-light,body.page-solutions #nav.menu-open .logo .lg-light{display:none!important}
body.page-solutions #nav.scrolled .logo .lg-dark,body.page-solutions #nav.menu-open .logo .lg-dark{display:block!important}
body.page-solutions #nav.scrolled .navcta,body.page-solutions #nav.menu-open .navcta{border-color:rgba(11,12,14,.24)!important;color:inherit!important}
body.page-solutions #nav.scrolled .navcta:hover,body.page-solutions #nav.menu-open .navcta:hover{background:var(--blue)!important;border-color:var(--blue)!important;color:#fff!important}
body.page-solutions #nav.scrolled .searchbtn,body.page-solutions #nav.menu-open .searchbtn,body.page-solutions #nav.scrolled .iconbtn,body.page-solutions #nav.menu-open .iconbtn{background:transparent!important;border-color:rgba(0,0,0,.16)!important;color:var(--black)!important}
body.page-solutions #nav.scrolled .searchbtn img,body.page-solutions #nav.menu-open .searchbtn img{filter:brightness(0)!important}
@media(max-width:900px){body.page-solutions #nav .nav-inner{height:76px!important}}
body.page-solutions #banner .bg.has-img{background-size:cover;background-position:center 52%}
body.page-solutions #cta{padding:84px 0}
body.page-solutions #cta .wrap.cta-in,body.page-solutions .cta-in{display:flex;align-items:center;justify-content:space-between;gap:40px;flex-wrap:wrap;width:100%;box-sizing:border-box}
body.page-solutions #cta h2{color:#fff}
body.page-solutions #cta p{color:rgba(255,255,255,.62)!important}

/* ---- buttons (same family as homepage) ---- */
body.page-solutions .btn, body.page-solutions .btn-ghost, body.page-solutions .btn-ghost-d{display:inline-flex; align-items:center; gap:12px; height:48px; padding:0 26px; border:1px solid transparent; border-radius:var(--radius);
  font-size:13px; font-weight:600; letter-spacing:.04em; line-height:1; white-space:nowrap; cursor:pointer;
  transition:background .25s ease, color .25s ease, border-color .25s ease}
body.page-solutions .btn .chev, body.page-solutions .btn-ghost .chev, body.page-solutions .btn-ghost-d .chev{display:block; width:7px; height:7px; flex:none; margin:0 2px 0 0; border-top:1.6px solid currentColor; border-right:1.6px solid currentColor; transform:rotate(45deg); transition:transform .3s cubic-bezier(.2,.8,.2,1)}
body.page-solutions .btn:hover .chev, body.page-solutions .btn-ghost:hover .chev, body.page-solutions .btn-ghost-d:hover .chev{transform:translateX(4px) rotate(45deg)}
body.page-solutions .btn{background:var(--blue); color:#fff; border-color:var(--blue)}
body.page-solutions .btn:hover{background:var(--blue-deep); border-color:var(--blue-deep)}
body.page-solutions .btn-ghost{background:transparent; color:var(--black); border-color:rgba(11,12,14,.28)}
body.page-solutions .btn-ghost:hover{background:var(--blue); border-color:var(--blue); color:#fff}
body.page-solutions .btn-ghost-d{background:rgba(255,255,255,.06); color:#fff; border-color:rgba(255,255,255,.55)}
body.page-solutions .btn-ghost-d:hover{background:#fff; border-color:#fff; color:var(--black)}

/* ---- inner banner ---- */
body.page-solutions #banner{position:relative; background:var(--black); color:#fff; overflow:hidden; min-height:320px; display:flex; align-items:flex-end}
body.page-solutions #banner .bg{position:absolute; inset:-4% 0; background:linear-gradient(115deg,#0b1527,#182a42 70%,#13375b); will-change:transform; animation:bgIn 1.6s var(--ease) both}

/* ---- banner entrance (same treatment as mach-support.html) ---- */
@keyframes bgIn{from{opacity:0; transform:scale(1.12)}to{opacity:1; transform:scale(1.04)}}
@keyframes rise{to{opacity:1; transform:none}}
body.page-solutions .bn-in > *{opacity:0; transform:translateY(22px); animation:rise .9s var(--ease) forwards}
body.page-solutions .bn-in > *:nth-child(1){animation-delay:.1s}
body.page-solutions .bn-in > *:nth-child(2){animation-delay:.2s}
body.page-solutions .bn-in > *:nth-child(3){animation-delay:.3s}
body.page-solutions .bn-in > *:nth-child(4){animation-delay:.42s}
body.page-solutions .bn-in > *:nth-child(5){animation-delay:.54s}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  body.page-solutions, body.page-solutions, body.page-solutions{animation-duration:.01ms !important; animation-delay:0s !important; transition-duration:.01ms !important}
  body.page-solutions .bn-in > *{opacity:1; transform:none}
}
body.page-solutions #banner::before{content:''; position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(to bottom, rgba(5,7,10,.62) 0%, rgba(5,7,10,.2) 34%, rgba(5,7,10,0) 55%),
    linear-gradient(to top, rgba(5,7,10,.9) 0%, rgba(5,7,10,.45) 38%, rgba(5,7,10,.1) 70%),
    linear-gradient(to right, rgba(5,7,10,.55) 0%, rgba(5,7,10,0) 55%)}
body.page-solutions .bn-inner{position:relative; z-index:2; width:100%; max-width:var(--maxw); margin:0 auto; padding:112px 48px 28px}
body.page-solutions .hero-mark{display:flex; flex-direction:column; gap:4px; margin-bottom:22px}
body.page-solutions .hero-mark i{display:block; height:1px; background:rgba(255,255,255,.7); width:26px}
body.page-solutions .hero-mark i:nth-child(3){width:16px}
body.page-solutions .bn-eyebrow{font-size:11.5px; letter-spacing:.24em; font-weight:600; color:rgba(255,255,255,.68); margin-bottom:16px}
body.page-solutions #banner .bn-lede{max-width:960px; margin:6px 0 26px; font-size:16.5px; line-height:1.7; color:rgba(255,255,255,.75)}
body.page-solutions #banner h1{font-weight:800; font-size:40px; line-height:1.06; letter-spacing:-.02em; margin:0 0 18px}
body.page-solutions .accentsq{display:inline-block; width:.14em; height:.14em; background:var(--blue); margin-left:.12em; vertical-align:.06em}
body.page-solutions .crumbs{display:flex; flex-wrap:wrap; align-items:center; gap:10px; font-size:13px; color:rgba(255,255,255,.62)}
body.page-solutions .crumbs a{transition:color .2s}
body.page-solutions .crumbs a:hover{color:#fff}
body.page-solutions .crumbs .sep{width:5px; height:5px; border-top:1px solid currentColor; border-right:1px solid currentColor; transform:rotate(45deg); opacity:.6}
body.page-solutions .crumbs .now{color:#fff; font-weight:600}
@media(max-width:900px){
  body.page-solutions .bn-inner{padding:88px 20px 16px}
  body.page-solutions #banner{min-height:165px}
  body.page-solutions #banner h1{font-size:28px; margin-bottom:10px}
  body.page-solutions #banner .bn-lede{font-size:14.5px; line-height:1.55; max-width:100%; margin:0 0 16px}
  body.page-solutions #banner .bg{background-position:center 45%}
}

/* ================= solutions page ================= */

/* ---- lede inside the page banner ---- */
body.page-solutions #banner .bn-lede{max-width:960px; margin:24px 0 26px; font-size:16.5px; line-height:1.7; color:rgba(255,255,255,.75)}

/* ---- application scenes ---- */
body.page-solutions .scene{padding:96px 0; border-top:1px solid var(--line)}
body.page-solutions .scene.alt{background:var(--tint)}
body.page-solutions .scene-grid{display:grid; grid-template-columns:minmax(0,420px) minmax(0,1fr); gap:64px; align-items:start}
@media(max-width:1000px){body.page-solutions .scene-grid{grid-template-columns:1fr; gap:36px}}
body.page-solutions .scene-media{margin:0}
body.page-solutions .scene-media img{display:block; width:100%; aspect-ratio:3/4; object-fit:cover; border:1px solid var(--line)}
body.page-solutions .scene-body .tag{display:block; font-size:12.5px; font-weight:700; color:var(--blue); letter-spacing:.03em; margin-bottom:16px}
body.page-solutions .scene-body h2{font-size:clamp(30px,3.4vw,44px); font-weight:800; line-height:1.12; letter-spacing:-.02em}
body.page-solutions .scene-body h3{font-size:15px; font-weight:700; letter-spacing:.02em; margin:30px 0 14px}
body.page-solutions .scene-body p{font-size:15px; line-height:1.85}
body.page-solutions .scene-list{list-style:none; margin:0; padding:0}
body.page-solutions .scene-list li{position:relative; padding:13px 0 13px 24px; border-top:1px solid var(--line); font-size:14.5px; line-height:1.5; color:var(--black)}
body.page-solutions .scene-list li:last-child{border-bottom:1px solid var(--line)}
body.page-solutions .scene-list li::before{content:''; position:absolute; left:2px; top:21px; width:6px; height:6px; background:var(--blue); transform:rotate(45deg)}

/* ---- product starting points: the same card component as the listing / detail pages ---- */
body.page-solutions .scene-prod{margin-top:56px}
body.page-solutions .prodhead{margin-bottom:22px}
body.page-solutions .prodhead h3{font-size:17px; font-weight:700}
body.page-solutions .pgrid{display:grid; grid-template-columns:repeat(4,1fr); gap:26px}
@media(max-width:1100px){body.page-solutions .pgrid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:820px){body.page-solutions .pgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){body.page-solutions .pgrid{grid-template-columns:1fr}}
body.page-solutions .pcard{position:relative; display:flex; flex-direction:column; background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  transition:border-color .3s ease, box-shadow .35s ease, transform .35s cubic-bezier(.2,.8,.2,1);
  opacity:0; animation:cardIn .6s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes cardIn{from{opacity:0; transform:translateY(22px)} to{opacity:1; transform:none}}
body.page-solutions .pcard:hover{border-color:transparent; box-shadow:0 18px 46px rgba(20,35,65,.13); transform:translateY(-6px)}
/* product photo full-bleed on white */
body.page-solutions .pimg{position:relative; aspect-ratio:1/1; background:#fff; overflow:hidden; isolation:isolate}
body.page-solutions .pimg img{position:absolute; inset:0; width:100%; height:100%; object-fit:contain; transition:transform .6s cubic-bezier(.2,.8,.2,1)}
body.page-solutions .pcard:hover .pimg img{transform:scale(1.07)}
/* copy block: tint + hairline, reads apart from the white photo above */
body.page-solutions .pmeta{padding:20px 22px 22px; display:flex; flex-direction:column; flex:1; background:var(--tint); border-top:1px solid var(--line)}
body.page-solutions .pmodel{font-family:'Archivo',sans-serif; font-weight:700; font-size:13px; letter-spacing:.04em; color:var(--blue); margin-bottom:7px}
body.page-solutions .pmeta h4{font-size:17px; font-weight:700; line-height:1.3; text-transform:none; color:var(--black)}
body.page-solutions .pmeta .ptype{font-size:13px; color:var(--gray); margin-top:6px; line-height:1.5}
body.page-solutions .pmore{display:inline-flex; align-items:center; gap:9px; margin-top:auto; padding-top:18px; font-size:12.5px; font-weight:600; letter-spacing:.04em; color:var(--black); transition:color .25s}
body.page-solutions .pmore .chev{display:block; width:6px; height:6px; border-top:1.6px solid currentColor; border-right:1.6px solid currentColor; transform:rotate(45deg); transition:transform .3s cubic-bezier(.2,.8,.2,1)}
body.page-solutions .pcard:hover .pmore{color:var(--blue)}
body.page-solutions .pcard:hover .pmore .chev{transform:translateX(5px) rotate(45deg)}
@media(prefers-reduced-motion:reduce){body.page-solutions .pcard{animation:none; opacity:1}}

/* ---- related project ---- */
body.page-solutions .casecard{display:grid; grid-template-columns:260px minmax(0,1fr) auto; gap:28px; align-items:center;
  margin-top:26px; padding:22px; border:1px solid var(--line); background:#fff}
@media(max-width:900px){body.page-solutions .casecard{grid-template-columns:1fr; gap:18px}}
body.page-solutions .casecard-media{display:block}
body.page-solutions .casecard img{display:block; width:100%; aspect-ratio:16/9; object-fit:cover; background:var(--tint)}
body.page-solutions .casecard h4{font-size:17px; font-weight:700; letter-spacing:-.01em; text-transform:uppercase; margin-bottom:7px}
body.page-solutions .casecard h4 a{color:inherit; text-decoration:none}
body.page-solutions .casecard h4 a:hover{color:var(--blue)}
body.page-solutions .casecard .loc{display:flex; align-items:center; gap:8px; font-size:12px; font-weight:600; letter-spacing:.04em; color:var(--blue); margin-bottom:9px}
body.page-solutions .casecard .loc i{width:5px; height:5px; flex:none; background:currentColor; transform:rotate(45deg)}
body.page-solutions .casecard p{font-size:13.5px; line-height:1.7}
body.page-solutions .casecard .btn{height:44px; padding:0 22px; font-size:12.5px; justify-self:end}
@media(max-width:900px){body.page-solutions .casecard .btn{justify-self:start}}
/* =====================================================================
   ENHANCEMENTS 鈥?application scenes, product cards, project card
   (nav, banner, CTA and footer are intentionally untouched)
   ===================================================================== */

/* ---- reveal (JS adds .rv / .rvm, removes them again once the entrance is done) ---- */
html.js body.page-solutions .rv{opacity:0; transform:translateY(30px);
  transition:opacity .85s ease var(--d,0s), transform .85s cubic-bezier(.2,.8,.2,1) var(--d,0s)}
html.js body.page-solutions .rv.in{opacity:1; transform:none}

/* ---- scenes: more air, content vertically centred, alternate sides ---- */
body.page-solutions .scene{padding:112px 0 104px}
body.page-solutions .scene-grid{align-items:center; gap:88px; grid-template-columns:minmax(0,440px) minmax(0,1fr)}
body.page-solutions .scene.alt .scene-grid{grid-template-columns:minmax(0,1fr) minmax(0,440px)}
body.page-solutions .scene.alt .scene-media{order:2}
@media(max-width:1000px){
  body.page-solutions .scene{padding:80px 0}
  body.page-solutions .scene-grid, body.page-solutions .scene.alt .scene-grid{grid-template-columns:1fr; gap:48px}
  body.page-solutions .scene.alt .scene-media{order:0}
}
body.page-solutions .scene-body .tag{letter-spacing:.06em; text-transform:uppercase; font-size:12px}
body.page-solutions .scene-body h2{margin-bottom:6px}
body.page-solutions .scene-body h3{margin:34px 0 16px; font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--gray); font-weight:700}
body.page-solutions .scene-body p{max-width:680px}

/* media: offset blue frame + wipe reveal; frame drifts on hover */
body.page-solutions .scene-media{position:relative}
body.page-solutions .scene-media::before{content:''; position:absolute; inset:0; z-index:0; border:1px solid var(--blue);
  transform:translate(16px,16px); transition:transform .6s cubic-bezier(.2,.8,.2,1), opacity .8s ease .55s}
body.page-solutions .scene-media:hover::before{transform:translate(24px,24px)}
body.page-solutions .scene-media img{position:relative; z-index:1; background:var(--tint)}
html.js body.page-solutions .rvm::before{opacity:0}
html.js body.page-solutions .rvm.in::before{opacity:1}
html.js body.page-solutions .rvm img{clip-path:inset(0 100% 0 0); transform:scale(1.12);
  transition:clip-path 1.1s cubic-bezier(.7,0,.2,1), transform 1.5s cubic-bezier(.2,.8,.2,1)}
html.js body.page-solutions .scene.alt .rvm img{clip-path:inset(0 0 0 100%)}
html.js body.page-solutions .rvm.in img{clip-path:inset(0 0 0 0); transform:none}
@media(max-width:1000px){body.page-solutions .scene-media::before{transform:translate(12px,12px)}}

/* needs: three numbered cards instead of a plain ruled list */
body.page-solutions .scene-list{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; counter-reset:need}
@media(max-width:760px){body.page-solutions .scene-list{grid-template-columns:1fr}}
body.page-solutions .scene-list li, body.page-solutions .scene-list li:last-child{position:relative; counter-increment:need; padding:46px 20px 22px;
  background:var(--tint); border:1px solid var(--line); border-top:2px solid var(--blue);
  font-size:14px; line-height:1.6; overflow:hidden;
  transition:background .35s ease, transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s ease, border-color .3s ease}
body.page-solutions .scene.alt .scene-list li, body.page-solutions .scene.alt .scene-list li:last-child{background:#fff}
body.page-solutions .scene-list li::before{content:'0' counter(need); left:20px; top:16px; width:auto; height:auto; background:none; transform:none;
  font-family:'Archivo',sans-serif; font-size:13px; font-weight:700; letter-spacing:.08em; color:var(--blue)}
body.page-solutions .scene-list li::after{content:''; position:absolute; right:-30px; bottom:-30px; width:70px; height:70px;
  background:rgba(31,111,235,.08); transform:rotate(45deg) scale(0); transition:transform .5s cubic-bezier(.2,.8,.2,1)}
body.page-solutions .scene-list li:hover{background:#fff; transform:translateY(-5px); box-shadow:0 18px 36px -22px rgba(13,47,102,.35)}
body.page-solutions .scene.alt .scene-list li:hover{background:var(--tint)}
body.page-solutions .scene-list li:hover::after{transform:rotate(45deg) scale(1)}

/* ---- product starting points ---- */
body.page-solutions .scene-prod{margin-top:80px}
body.page-solutions .prodhead{display:flex; align-items:center; gap:22px; margin-bottom:28px}
body.page-solutions .prodhead h3{flex:none; font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--gray)}
body.page-solutions .prodhead::after{content:''; flex:1; height:1px; background:var(--line)}
/* the load-time animation also overrode the hover lift; entrances now run on scroll */
body.page-solutions .pcard{animation:none; opacity:1}
body.page-solutions .pcard::after{content:''; position:absolute; left:0; bottom:0; width:0; height:3px; background:var(--blue);
  transition:width .5s cubic-bezier(.2,.8,.2,1)}
body.page-solutions .pcard:hover::after{width:100%}
body.page-solutions .pmeta{transition:background .35s ease}
body.page-solutions .pcard:hover .pmeta{background:#fff}
body.page-solutions .pimg img{transition:transform .8s cubic-bezier(.2,.8,.2,1)}
body.page-solutions .pcard:hover .pimg img{transform:scale(1.08)}

/* ---- related project（独立板块） ---- */
body.page-solutions .solu-case{padding:20px 0 96px; background:#fff}
body.page-solutions .solu-case .casecard{margin-top:0}
body.page-solutions .casecard{position:relative; overflow:hidden; margin-top:64px; padding:26px; gap:36px; grid-template-columns:320px minmax(0,1fr) auto;
  box-shadow:0 30px 60px -46px rgba(13,47,102,.4);
  transition:box-shadow .5s ease, transform .5s cubic-bezier(.2,.8,.2,1), border-color .3s ease}
@media(max-width:900px){
  body.page-solutions .solu-case{padding:20px 0 72px}
  body.page-solutions .casecard{grid-template-columns:1fr; gap:20px; padding:20px}
}
body.page-solutions .casecard::before{content:''; position:absolute; left:0; top:0; width:3px; height:100%; background:var(--blue);
  transform:scaleY(0); transform-origin:top; transition:transform .6s cubic-bezier(.2,.8,.2,1)}
body.page-solutions .casecard:hover{transform:translateY(-4px); box-shadow:0 36px 64px -40px rgba(13,47,102,.5); border-color:rgba(31,111,235,.3)}
body.page-solutions .casecard:hover::before{transform:scaleY(1)}
body.page-solutions .casecard h4{font-size:19px}
body.page-solutions .casecard p{max-width:560px}

@media(prefers-reduced-motion:reduce){
  html.js body.page-solutions .rv{opacity:1; transform:none; transition:none}
  html.js body.page-solutions .rvm img{clip-path:none; transform:none; transition:none}
  html.js body.page-solutions .rvm::before{opacity:1}
}

/* ---- bottom cta ---- */
body.page-solutions #cta{position:relative; background:var(--black); color:#fff; overflow:hidden; isolation:isolate; padding:84px 0}
body.page-solutions #cta::before{content:''; position:absolute; right:-40px; top:0; width:44%; height:100%; background:linear-gradient(120deg, transparent 20%, rgba(31,111,235,.2) 70%, transparent 100%); transform:skewX(-14deg); z-index:-1}
body.page-solutions .cta-in{display:flex; align-items:center; justify-content:space-between; gap:40px; flex-wrap:wrap}
body.page-solutions #cta .tag{display:block; font-size:12.5px; font-weight:700; color:var(--blue-light); letter-spacing:.03em; margin-bottom:14px}
body.page-solutions #cta h2{font-size:clamp(28px,3.2vw,42px); font-weight:800; line-height:1.12; letter-spacing:-.02em; margin-bottom:14px; max-width:640px}
body.page-solutions #cta p{color:rgba(255,255,255,.62); max-width:520px; font-size:15px}
body.page-solutions .cta-btns{display:flex; gap:14px; flex-wrap:wrap}