/* APEX X2500 · medium-voltage power skid (Oct 2026): /systems/mv-skid and the home teaser band */

/* ---------- hero ---------- */
.apx{position:relative; background:var(--bg); padding-bottom:clamp(70px,9vw,140px)}
.apx-hero{position:relative; padding:clamp(80px,9vw,140px) 0 0; overflow:hidden; isolation:isolate}
.apx-top{position:relative; z-index:2}
.apx .apx-ph{position:relative; display:block; z-index:0; aspect-ratio:16/9; max-height:92vh; margin:calc(-1 * clamp(70px,10.5vw,170px)) auto 0; overflow:hidden}
.apx-ph img,.apx-band-ph img{display:block; width:100%; height:100%; object-fit:cover; object-position:50% 0%; transform:scale(var(--apx-s,1.06)); transform-origin:50% 60%; will-change:transform}
.apx-ph::before,.apx-band-ph::before{content:''; position:absolute; inset:0; z-index:1; pointer-events:none}
.apx-ph::before{background:radial-gradient(120% 90% at 50% 55%,rgba(5,7,12,0) 55%,rgba(5,7,12,.45) 100%)}
.apx .apx-ph{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 30%,#000 70%,transparent 100%),linear-gradient(90deg,transparent 0,#000 12%,#000 88%,transparent 100%);
  -webkit-mask-composite:source-in; mask-image:linear-gradient(180deg,transparent 0,#000 30%,#000 70%,transparent 100%),linear-gradient(90deg,transparent 0,#000 12%,#000 88%,transparent 100%); mask-composite:intersect}
.apx .apx-ph.vis::after,.apx-band .apx-band-ph.vis::after{bottom:auto; top:auto; bottom:18%; right:max(var(--gut),10px)}

.apx-top{text-align:center}
.apx-tag{display:inline-flex; align-items:center; gap:14px; font-family:var(--fm); font-size:10.5px; letter-spacing:.26em; text-transform:uppercase; color:var(--ink2)}
.apx-tag::before,.apx-tag::after{content:''; width:clamp(24px,4vw,56px); height:1px; background:linear-gradient(90deg,transparent,var(--line3))}
.apx-tag::after{transform:scaleX(-1)}
.apx-tag span{color:var(--bg); background:var(--cyan); padding:4px 7px 3px; border-radius:2px; letter-spacing:.22em; font-weight:500}
.apx-word{margin-top:clamp(14px,2vw,26px); font-family:var(--fd); font-weight:300; font-size:clamp(84px,17vw,252px); line-height:.8;
  letter-spacing:.16em; margin-right:-.16em; background:linear-gradient(180deg,#fff 0%,#EEF3FA 42%,rgba(196,210,228,.42) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent}
.apx-word sub{display:block; vertical-align:baseline; margin-top:clamp(16px,1.8vw,24px); font-family:var(--fm); font-weight:400; font-size:clamp(11px,1vw,13.5px);
  letter-spacing:.62em; margin-right:-.62em; line-height:1; -webkit-text-fill-color:var(--cyan); color:var(--cyan)}
.apx-sub{margin-top:clamp(12px,1.4vw,18px); font-size:clamp(14px,1.1vw,16.5px); color:var(--ink2); letter-spacing:.02em}

.apx-kpis{position:relative; z-index:2; display:grid; grid-template-columns:repeat(5,1fr); width:calc(100% - 2*var(--gut)); max-width:calc(var(--maxw) - 2*var(--gut)); padding:0;
  margin:calc(-1 * clamp(70px,8vw,130px)) auto 0;
  border:1px solid var(--line2); border-radius:14px; background:rgba(8,12,20,.52); -webkit-backdrop-filter:blur(16px) saturate(1.15); backdrop-filter:blur(16px) saturate(1.15)}
.apx-kpis>div{padding:clamp(16px,1.8vw,24px) clamp(14px,1.7vw,24px); border-left:1px solid var(--line)}
.apx-kpis>div:first-child{border-left:0}
.apx-kpis b{display:block; font-family:var(--fd); font-weight:300; font-size:clamp(26px,2.7vw,40px); line-height:1; letter-spacing:-.02em; color:var(--ink); white-space:nowrap}
.apx-kpis b u,.apx-blk b u,.apx-path b u{text-decoration:none; font-size:.38em; color:var(--cyan); margin-left:5px; letter-spacing:.02em; font-weight:400}
.apx-kpis span{display:block; margin-top:12px; font-family:var(--fm); font-size:9.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--mut)}
.apx-kpis em{display:block; font-style:normal; font-size:12.5px; color:var(--dim); margin-top:4px}

/* ---------- intro + voltage path ---------- */
.apx-intro{margin-top:clamp(64px,8vw,120px)}
.apx-path{position:relative; display:grid; grid-template-columns:repeat(3,1fr); column-gap:clamp(18px,3vw,48px)}
.apx-wire{position:absolute; left:27px; right:0; top:23px; width:calc(100% - 27px); height:8px; overflow:visible; pointer-events:none}
.apx-wire path{fill:none; stroke:var(--line3); stroke-width:1.2; vector-effect:non-scaling-stroke}
.apx-wire .f{stroke:var(--cyan); stroke-width:2; stroke-dasharray:60 940; stroke-dashoffset:1000; animation:apxflow 3.6s cubic-bezier(.45,0,.25,1) infinite}
@keyframes apxflow{to{stroke-dashoffset:0}}
.apx-path .st{position:relative}
.apx-path i{display:grid; place-items:center; width:54px; height:54px; border-radius:50%; background:var(--bg); border:1px solid var(--cyan);
  font-family:var(--fm); font-style:normal; font-size:11px; color:var(--cyan); letter-spacing:.08em; position:relative}
.apx-path .k{display:block; margin-top:22px; font-family:var(--fm); font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--cyan)}
.apx-path b{display:block; margin-top:10px; font-family:var(--fd); font-weight:300; font-size:clamp(34px,3.8vw,56px); line-height:1; letter-spacing:-.025em; white-space:nowrap}
.apx-path p{margin-top:12px; font-size:14px; color:var(--mut); line-height:1.6; max-width:32ch}

/* ---------- anatomy (light studio plate) ---------- */
.apx-anat{position:relative; background:#fff; color:#0A1217; border-radius:20px; padding:clamp(22px,3.4vw,52px); overflow:hidden}
.apx-anat-h{display:flex; justify-content:space-between; align-items:flex-end; gap:24px 40px; flex-wrap:wrap}
.apx-k{font-family:var(--fm); font-size:10px; letter-spacing:.24em; text-transform:uppercase; color:var(--cyan)}
.apx-anat .apx-k{color:var(--deep)}
.apx-anat h3{margin-top:14px; font-size:clamp(26px,3vw,42px); font-weight:400; letter-spacing:-.022em; line-height:1.08}
.apx-anat-h p{max-width:40ch; font-size:14.5px; color:#5F6C79; line-height:1.6}
.apx-fig{position:relative; margin:clamp(12px,2vw,28px) 0 0}
.apx-fig img{display:block; width:100%; height:auto}
.apx-fig figcaption{position:absolute; right:0; top:0; font-family:var(--fm); font-size:8.5px; letter-spacing:.2em; text-transform:uppercase; color:#8A96A3}
.apx-hs{position:absolute; left:var(--x); top:var(--y); width:30px; height:30px; margin:-15px 0 0 -15px; padding:0; border-radius:50%; cursor:pointer;
  background:#0A1217; border:2px solid #fff; box-shadow:0 0 0 1px rgba(10,18,23,.18),0 8px 18px -6px rgba(10,18,23,.55); transition:background .3s,transform .3s}
.apx-hs i{font-family:var(--fm); font-style:normal; font-size:11.5px; color:#fff; line-height:26px}
.apx-hs::before{content:''; position:absolute; inset:-9px; border-radius:50%; border:1px solid var(--deep); opacity:0; transform:scale(.6); transition:opacity .35s,transform .35s}
.apx-hs:hover,.apx-hs:focus-visible,.apx-hs.on{background:var(--deep); transform:scale(1.08); outline:none}
.apx-hs:hover::before,.apx-hs:focus-visible::before,.apx-hs.on::before{opacity:1; transform:none}
.apx-zones{list-style:none; margin:clamp(18px,2.4vw,30px) 0 0; padding:0; display:grid; grid-template-columns:repeat(4,1fr); column-gap:18px; row-gap:18px; counter-reset:z}
.apx-zones li{position:relative; padding-top:14px; border-top:2px solid #E3E9EF; cursor:default; transition:border-color .3s; counter-increment:z}
.apx-zones li::before{content:counter(z,decimal-leading-zero); font-family:var(--fm); font-size:10px; letter-spacing:.14em; color:#8A96A3; transition:color .3s}
.apx-zones li.on{border-top-color:var(--deep)}
.apx-zones li.on::before{color:var(--deep)}
.apx-zones b{display:block; margin-top:6px; font-size:14.5px; font-weight:500}
.apx-zones span{display:block; margin-top:3px; font-size:12.5px; color:#5F6C79; line-height:1.5}
.apx-dims{display:flex; flex-wrap:wrap; gap:8px 28px; margin-top:clamp(18px,2.4vw,30px); padding-top:16px; border-top:1px solid #E3E9EF;
  font-family:var(--fm); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:#5F6C79}

/* ---------- five design decisions ---------- */
.apx-why ol{list-style:none; margin:clamp(22px,3vw,40px) 0 0; padding:0; display:grid; grid-template-columns:repeat(5,1fr); column-gap:clamp(16px,2vw,30px); row-gap:28px}
.apx-why li{position:relative; padding-top:22px; border-top:1px solid var(--line2)}
.apx-why li::after{content:''; position:absolute; left:0; top:-1px; width:36px; height:1px; background:var(--cyan)}
.apx-why li i{font-family:var(--fm); font-style:normal; font-size:11px; letter-spacing:.14em; color:var(--cyan)}
.apx-why h4{margin-top:14px; font-size:18px; font-weight:500; letter-spacing:-.01em; line-height:1.25}
.apx-why p{margin-top:10px; font-size:14px; color:var(--mut); line-height:1.6}

/* ---------- in the plant ---------- */
.apx-plant{display:grid; grid-template-columns:1fr 1.1fr; gap:clamp(24px,4vw,64px); align-items:center}
.apx-blk{display:grid; grid-template-columns:1fr 1fr; margin-top:28px; border-top:1px solid var(--line2)}
.apx-blk>div{padding:18px 0 16px; border-bottom:1px solid var(--line)}
.apx-blk>div:nth-child(even){padding-left:22px; border-left:1px solid var(--line)}
.apx-blk b{display:block; font-family:var(--fd); font-weight:300; font-size:clamp(26px,2.5vw,36px); line-height:1; letter-spacing:-.02em; white-space:nowrap}
.apx-blk span{display:block; margin-top:10px; font-family:var(--fm); font-size:9.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--dim)}

.apx-scale{border:1px solid var(--line2); border-radius:16px; padding:clamp(20px,2.4vw,32px);
  background:radial-gradient(ellipse 90% 70% at 100% 0%,#0E2536 0%,var(--bg2) 64%)}
.sc-h{display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap}
.sc-seg{display:inline-flex; border:1px solid var(--line2); border-radius:8px; overflow:hidden}
.sc-seg button{min-width:46px; padding:9px 12px; background:transparent; border:0; border-left:1px solid var(--line); color:var(--ink2);
  font-family:var(--fm); font-size:12px; cursor:pointer; transition:background .25s,color .25s}
.sc-seg button:first-child{border-left:0}
.sc-seg button:hover{color:#fff; background:rgba(60,204,252,.08)}
.sc-seg button[aria-checked="true"]{background:var(--cyan); color:var(--bg); font-weight:500}
.sc-grid{display:grid; grid-template-columns:repeat(10,1fr); gap:6px; margin-top:22px}
.sc-grid i{display:grid; grid-template-columns:1fr 1.7fr; gap:2px; aspect-ratio:1.5; padding:3px; border:1px solid var(--line); border-radius:3px;
  transition:border-color .45s,background .45s; transition-delay:calc(var(--k)*22ms)}
.sc-grid i::before,.sc-grid i::after{content:''; border-radius:1px; background:rgba(150,190,255,.09); transition:background .45s; transition-delay:inherit}
.sc-grid i.on{border-color:rgba(60,204,252,.55); background:rgba(60,204,252,.06)}
.sc-grid i.on::before{background:var(--cyan-lt)}
.sc-grid i.on::after{background:linear-gradient(180deg,var(--cyan),var(--deep))}
.sc-out{display:grid; grid-template-columns:1fr 1fr; margin-top:22px; border-top:1px solid var(--line2)}
.sc-out>div{padding-top:18px}
.sc-out>div+div{padding-left:22px; border-left:1px solid var(--line)}
.sc-out b{font-family:var(--fd); font-weight:300; font-size:clamp(38px,4vw,58px); line-height:1; letter-spacing:-.03em; font-variant-numeric:tabular-nums}
.sc-out u{text-decoration:none; margin-left:6px; font-size:14px; color:var(--cyan)}
.sc-out span{display:block; margin-top:10px; font-family:var(--fm); font-size:9.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--dim)}
.sc-mv{margin-top:24px; padding-top:18px; border-top:1px solid var(--line)}
.sc-mv-h{display:flex; justify-content:space-between; font-family:var(--fm); font-size:9.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--dim)}
.sc-mv .row{display:grid; grid-template-columns:52px 1fr 64px; align-items:center; gap:12px; margin-top:12px; font-family:var(--fm); font-size:12px; color:var(--ink2)}
.sc-mv .bar{position:relative; height:8px; background:rgba(150,190,255,.07); border-radius:2px}
.sc-mv .bar::after{content:''; position:absolute; left:46.3%; top:-4px; bottom:-4px; width:1px; background:var(--line3)}
.sc-mv .bar i{position:absolute; left:0; top:0; bottom:0; width:var(--w,5%); border-radius:2px; background:linear-gradient(90deg,var(--deep),var(--cyan)); transition:width .7s cubic-bezier(.2,.7,.2,1),background .4s}
.sc-mv .row b{text-align:right; font-weight:500; color:var(--ink); font-variant-numeric:tabular-nums}
.sc-mv .row.hi .bar i{background:#3A4759}
.sc-mv .row.hi b{color:var(--dim)}
.sc-note{margin-top:14px; font-size:12px; color:var(--dim); line-height:1.5}

/* ---------- specification ---------- */
.apx-spec-h{display:flex; justify-content:space-between; align-items:flex-end; gap:16px 40px; flex-wrap:wrap}
.apx-spec-h .small{max-width:42ch}
.apx-sg{display:grid; grid-template-columns:repeat(3,1fr); column-gap:clamp(20px,3vw,48px); row-gap:clamp(26px,3vw,40px); margin-top:clamp(24px,3vw,40px)}
.apx-sg dl{margin:0}
.apx-sg dt{padding-bottom:12px; border-bottom:1px solid var(--line3); font-family:var(--fm); font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--cyan)}
.apx-sg dl>div{display:flex; justify-content:space-between; gap:18px; padding:11px 0; border-bottom:1px solid var(--line)}
.apx-sg dd{margin:0; font-size:13.5px; line-height:1.45}
.apx-sg dd:first-child{color:var(--mut); flex:none; max-width:45%}
.apx-sg dd+dd{color:var(--ink); text-align:right}
.apx-sg dd small{display:block; margin-top:3px; font-size:11.5px; color:var(--dim)}
.apx-cta .btn-row{flex:none}
.apx-scope{margin-top:clamp(22px,3vw,34px); max-width:110ch}
.apx-cta{display:flex; align-items:center; justify-content:space-between; gap:20px; margin-top:26px; padding:22px 24px;
  border:1px solid rgba(60,204,252,.35); border-radius:14px; background:linear-gradient(90deg,#0A2233,var(--bg2))}
.apx-cta b{display:block; font-family:var(--fd); font-weight:500; font-size:19px}
.apx-cta span{display:block; font-size:13.5px; color:var(--mut); margin-top:4px; max-width:62ch}
.apx-cta .btn svg{flex:none}

/* ---------- home teaser band ---------- */
.apx-band{position:relative; min-height:calc(min(64vw,1280px) * .671 + 40px); display:flex; align-items:center; overflow:hidden; isolation:isolate; padding:clamp(70px,8vw,120px) 0}
.apx-band .apx-band-ph{display:block; position:absolute; z-index:-1; right:0; top:50%; width:min(64vw,1280px); aspect-ratio:2000/1342; transform:translateY(-50%); overflow:hidden}
.apx-band-ph::before{display:none}
.apx-band .apx-band-ph{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 36%),linear-gradient(180deg,transparent 0,#000 18%,#000 76%,transparent 100%);
  -webkit-mask-composite:source-in; mask-image:linear-gradient(90deg,transparent 0,#000 36%),linear-gradient(180deg,transparent 0,#000 18%,#000 76%,transparent 100%); mask-composite:intersect}
.apx-band-c{width:100%}
.apx-band-c>*{max-width:min(46%,600px)}
.apx-band .apx-band-row{flex-direction:column; align-items:flex-start}
.apx-band .apx-tag::before{display:none}
.apx-band .apx-word{text-align:left; font-size:clamp(72px,10vw,150px); margin-right:0}
.apx-band .apx-word sub{margin-right:0}
.apx-band-row{display:flex; justify-content:space-between; align-items:flex-end; gap:24px 48px; flex-wrap:wrap; margin-top:clamp(20px,2.6vw,34px)}
.apx-band-row .lead{max-width:50ch}
.apx-mini{display:flex; gap:0; border:1px solid var(--line2); border-radius:12px; background:rgba(8,12,20,.5); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px)}
.apx-mini>div{padding:14px 20px; border-left:1px solid var(--line)}
.apx-mini>div:first-child{border-left:0}
.apx-mini b{display:block; font-family:var(--fd); font-weight:300; font-size:26px; line-height:1; white-space:nowrap}
.apx-mini b u{text-decoration:none; font-size:.42em; color:var(--cyan); margin-left:4px}
.apx-mini span{display:block; margin-top:8px; font-family:var(--fm); font-size:9px; letter-spacing:.18em; text-transform:uppercase; color:var(--mut)}

/* ---------- responsive ---------- */
@media(max-width:1100px){
  .apx-kpis{grid-template-columns:repeat(3,1fr)}
  .apx-kpis>div:nth-child(4){border-left:0}
  .apx-kpis>div:nth-child(n+4){border-top:1px solid var(--line)}
  .apx-zones{grid-template-columns:repeat(2,1fr)}
  .apx-why ol{grid-template-columns:repeat(3,1fr)}
  .apx-plant{grid-template-columns:1fr}
  .apx-sg{grid-template-columns:1fr 1fr}
}
@media(max-width:700px){
  .apx-hero{padding-top:calc(var(--navh) + 30px)}
  .apx-tag{font-size:9.5px; letter-spacing:.18em; gap:10px}
  .apx-tag::before,.apx-tag::after{display:none}
  .apx .apx-ph{aspect-ratio:1200/982; max-height:none; margin-top:-28px}
  .apx-kpis{margin-top:-40px}
  .apx-word{font-size:clamp(68px,22vw,110px); letter-spacing:.12em; margin-right:-.12em}
  .apx-word sub{letter-spacing:.46em; margin-right:-.46em}
  .apx-kpis{grid-template-columns:1fr 1fr}
  .apx-kpis>div{border-left:0; border-top:1px solid var(--line)}
  .apx-kpis>div:nth-child(even){border-left:1px solid var(--line)}
  .apx-kpis>div:nth-child(-n+2){border-top:0}
  .apx-kpis>div:last-child{grid-column:1/-1}
  .apx-path{grid-template-columns:1fr; row-gap:30px; padding-left:0}
  .apx-wire{display:none}
  .apx-path .st{display:grid; grid-template-columns:54px 1fr; column-gap:18px}
  .apx-path .st>*:not(i){grid-column:2}
  .apx-path i{grid-row:1/span 3}
  .apx-path .k{margin-top:4px}
  .apx-anat{border-radius:16px}
  .apx-hs{width:20px; height:20px; margin:-10px 0 0 -10px; border-width:1.5px}
  .apx-hs i{font-size:9px; line-height:17px}
  .apx-zones{grid-template-columns:1fr 1fr}
  .apx-why ol{grid-template-columns:1fr}
  .apx-blk>div:nth-child(even){padding-left:16px}
  .sc-grid{gap:4px}
  .sc-seg button{min-width:0; padding:9px 11px}
  .apx-sg{grid-template-columns:1fr}
  .apx-cta{flex-direction:column; align-items:flex-start}
  .apx-band{display:block; min-height:0; padding:0 0 clamp(48px,10vw,80px)}
  .apx-band .apx-band-ph{position:relative; top:auto; transform:none; width:100%; aspect-ratio:1200/982; margin-bottom:-12vw}
  .apx-band .apx-band-ph{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 18%,#000 66%,transparent 100%); mask-image:linear-gradient(180deg,transparent 0,#000 18%,#000 66%,transparent 100%)}
  .apx .apx-ph{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 22%,#000 72%,transparent 100%); mask-image:linear-gradient(180deg,transparent 0,#000 22%,#000 72%,transparent 100%)}
  .apx-band-c>*{max-width:none}
  .apx-mini{width:100%}
  .apx-mini>div{flex:1; padding:12px 12px}
  .apx-mini b{font-size:21px}
}
@media(prefers-reduced-motion:reduce){
  .apx-wire .f{animation:none; stroke-dasharray:none; stroke-dashoffset:0; opacity:.6}
  .apx-ph img,.apx-band-ph img{transform:none}
  .sc-grid i,.sc-mv .bar i{transition:none}
}
.apx-link{color:var(--cyan-lt); text-decoration:underline; text-decoration-color:rgba(127,226,254,.35); text-underline-offset:3px; transition:text-decoration-color .3s}
.apx-link:hover{text-decoration-color:var(--cyan-lt)}