/* 03 / Modular systems — construction sequence */
.mx{--mx-line:#26364e;--mx-accent:#9fb8de;--mx-top:0px;position:relative;background:var(--navy,#050c19);color:#fff;padding:110px 7% 120px;overflow-x:clip}
.mx:before{content:'03';position:absolute;right:2%;bottom:-40px;font:500 260px/1 Manrope,Arial,sans-serif;color:rgba(159,184,222,.035);pointer-events:none}
.mx-pin{position:relative;display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:5%;align-items:center}
.mx-copy{position:relative;z-index:1;min-width:0}
.mx-eyebrow{display:block;color:#a9c0e2;margin-bottom:28px}
.mx-step-no{display:block;font:600 11px/1 Manrope,Arial,sans-serif;letter-spacing:2.4px;color:var(--mx-accent);margin-bottom:16px}
.mx-step-title{margin:0 0 10px;font:500 clamp(26px,2.3vw,36px)/1.12 Manrope,Arial,sans-serif;letter-spacing:-.6px;color:#fff}
.mx-step>p:not(.mx-step-title){margin:0;color:#aebcd0;max-width:440px}
.mx-step--final h2{margin:0 0 22px;font-size:clamp(34px,3.3vw,54px);line-height:1.06}
.mx-step--final p{margin:0 0 26px!important}
.mx .system-row{display:flex;gap:25px;border-top:1px solid var(--mx-line);padding:16px 0;transition:opacity .35s ease}
.mx .system-row:last-child{border-bottom:1px solid var(--mx-line)}
.mx .system-row>span{font-size:13px;color:#a9c0e2}
.mx .system-row h3{margin:0;font-size:17px;font-weight:600}
.mx .system-row p{margin:4px 0 0;font-size:14px;color:#aebcd0}
.mx-visual{position:relative;margin:0;min-width:0}
.mx-visual .mx-svg{display:block;width:100%;height:auto;max-height:78vh}
.mx-visual figcaption,.mx-card-fig figcaption{margin-top:10px;font-size:11px;letter-spacing:1.6px;text-transform:uppercase;color:#7f93b0}
.mx-index{display:none}

/* static / reduced-motion / no-JS: final state */
.mx:not(.is-scroll):not(.is-cards) .mx-step:not(.mx-step--final):not(.mx-step--systems),
.mx:not(.is-scroll):not(.is-cards) .mx-step--systems>.mx-step-no,
.mx:not(.is-scroll):not(.is-cards) .mx-step--systems>.mx-step-title,
.mx:not(.is-scroll):not(.is-cards) .mx-step--final>.mx-step-no{display:none}

/* SVG language */
.mx-svg{overflow:visible;font-family:'DM Sans',Arial,sans-serif}
.mx-svg path,.mx-svg polygon,.mx-svg circle,.mx-svg rect{vector-effect:non-scaling-stroke}
.mx-gl{fill:none;stroke:rgba(159,184,222,.1);stroke-width:.6}
.mx-gl--major{stroke:rgba(159,184,222,.22)}
.mx-bubble circle{fill:var(--navy,#050c19);stroke:rgba(159,184,222,.5);stroke-width:.8}
.mx-bubble text{font-size:10px;fill:#a9c0e2;text-anchor:middle;dominant-baseline:central}
.mx-dim,.mx-tick{fill:none;stroke:rgba(237,242,249,.45);stroke-width:.8}
.mx-dimtext{font-size:9px;letter-spacing:2.4px;fill:#7f93b0;text-anchor:middle}
.mx-slab{fill:rgba(159,184,222,.03);stroke:rgba(159,184,222,.35);stroke-width:.8;stroke-dasharray:4 4}
.mx-pt path{fill:none;stroke:#cfdcef;stroke-width:1}
.mx-pt .mx-pier{stroke:rgba(237,242,249,.7)}
.mx-fill .t{fill:#14233a}.mx-fill .r{fill:#0d192c}.mx-fill .l{fill:#0a1422}
.mx-edge{fill:none;stroke:rgba(226,235,247,.82);stroke-width:1;stroke-linejoin:round}
.mx-rib{fill:none;stroke:rgba(226,235,247,.14);stroke-width:.8}
.mx-guide{fill:none;stroke:rgba(159,184,222,.55);stroke-width:.8;stroke-dasharray:3 5}
.mx-it-p{fill:none;stroke:#dfe8f5;stroke-width:.7;stroke-linejoin:round;opacity:.85}
.mx-pw-p{fill:none;stroke:var(--mx-accent);stroke-width:1.4;stroke-linejoin:round}
.mx-node{fill:var(--navy,#050c19);stroke:var(--mx-accent);stroke-width:1}
.mx-node--main{fill:var(--mx-accent)}
.mx-pipe-o{fill:none;stroke:#c9d6e8;stroke-width:4.2;stroke-linecap:round;stroke-linejoin:round}
.mx-pipe-i{fill:none;stroke:#0a1424;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.mx-flange path{fill:none;stroke:#c9d6e8;stroke-width:1.3}
.mx-flow{fill:none;stroke:#f3f7fc;stroke-width:1;stroke-dasharray:2 16;opacity:.55}
.mx-lab circle{fill:#edf2f9}
.mx-lab path{fill:none;stroke:rgba(237,242,249,.45);stroke-width:.8}
.mx-lab text{font-size:10.5px;letter-spacing:1.8px;fill:#dfe8f5;dominant-baseline:central}
@keyframes mx-flow{to{stroke-dashoffset:-36}}
@media (prefers-reduced-motion:no-preference){
  .mx.is-live .mx-flow,.mx-card-fig .mx-flow{animation:mx-flow 2.4s linear infinite}
}

/* Discrete states (static final + mobile cards) */
.mx-svg[data-state] .mx-guides{opacity:0}
.mx-svg[data-state="1"] :is(.mx-l1,.mx-l2,.mx-sys,.mx-labels),
.mx-svg[data-state="2"] :is(.mx-l2,.mx-sys,.mx-labels),
.mx-svg[data-state="3"] :is(.mx-sys,.mx-labels){opacity:0;visibility:hidden}
.mx-svg[data-state="3"] .mx-guides{opacity:1}
.mx-svg[data-state="4"] .mx-fill{opacity:.14}
.mx-svg[data-state="4"] .mx-rib{opacity:.3}
.mx-svg[data-state="5"] .mx-fill{opacity:.72}
.mx-svg[data-state="5"] .mx-grid{opacity:.55}
.mx-svg:is([data-state="3"],[data-state="4"],[data-state="5"]) .mx-axes{opacity:0}
.mx-svg[data-state="5"] .mx-it-p{opacity:.45}
.mx-svg[data-state="5"] .mx-lab{opacity:.6}
.mx-svg[data-state="scroll"] .mx-guides{opacity:1}

/* Desktop: scroll-driven stage */
.mx.is-scroll{height:350vh;padding:0 7%}
.mx.is-scroll .mx-pin{position:sticky;top:var(--mx-top);height:calc(100vh - var(--mx-top));height:calc(100svh - var(--mx-top));padding:4vh 0}
.mx.is-scroll .mx-steps{position:relative;min-height:min(430px,52vh)}
.mx.is-scroll .mx-step{position:absolute;left:0;top:0;width:100%}
.mx.is-scroll .mx-visual .mx-svg{max-height:calc(100vh - var(--mx-top) - 12vh)}
.mx.is-scroll .mx-index{display:block;position:relative;margin-top:32px;padding-top:18px}
.mx-index ol{display:flex;justify-content:space-between;gap:10px;margin:0;padding:0;list-style:none}
.mx-index li{font:600 10px/1 Manrope,Arial,sans-serif;letter-spacing:1.6px;text-transform:uppercase;color:#5f7391;transition:color .3s ease}
.mx-index li.is-active{color:#fff}
.mx-index-bar{position:absolute;left:0;right:0;top:0;height:1px;background:var(--mx-line)}
.mx-index-bar i{position:absolute;inset:0;background:var(--mx-accent);transform-origin:0 50%;transform:scaleX(0)}

/* Mobile: stacked compact reveal states */
.mx.is-cards .mx-pin{display:block}
.mx.is-cards .mx-visual{display:none}
.mx.is-cards .mx-steps{display:flex;flex-direction:column;gap:18px}
.mx.is-cards .mx-step{order:var(--o,0);border:1px solid var(--mx-line);background:rgba(10,20,36,.6);padding:18px 18px 22px;opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.mx.is-cards .mx-step.is-in{opacity:1;transform:none}
.mx.is-cards .mx-step[data-step="5"]{--o:5}
.mx.is-cards .mx-step-title{font-size:24px}
.mx.is-cards .mx-step--final h2{font-size:clamp(30px,8vw,40px)}
.mx-card-fig{margin:0 0 16px;border-bottom:1px solid var(--mx-line);padding-bottom:10px}
.mx-card-fig .mx-svg{display:block;width:100%;height:auto;max-height:260px}
.mx-card-fig figcaption{margin-top:6px}
/* entering layer for each compact state */
.mx-card-fig .mx-svg :is(.mx-grid,.mx-axes,.mx-dims,.mx-base,.mx-mod,.mx-sys,.mx-fill,.mx-labels){transition:opacity .9s ease,transform 1s cubic-bezier(.2,.7,.2,1)}
.mx-step:not(.is-in) .mx-svg[data-state="1"] :is(.mx-grid,.mx-axes,.mx-dims,.mx-base){opacity:0}
.mx-step:not(.is-in) .mx-svg[data-state="2"] .mx-l1 .mx-mod{opacity:0;transform:translate(97px,56px)}
.mx-step:not(.is-in) .mx-svg[data-state="3"] .mx-l2 .mx-mod{opacity:0;transform:translateY(-120px)}
.mx-step:not(.is-in) .mx-svg[data-state="4"] :is(.mx-sys,.mx-labels){opacity:0}
.mx-step:not(.is-in) .mx-svg[data-state="4"] .mx-fill{opacity:1}
.mx-step:not(.is-in) .mx-svg[data-state="5"] .mx-fill{opacity:.14}
.mx-card-fig .mx-mod:nth-child(2){transition-delay:.08s}.mx-card-fig .mx-mod:nth-child(3){transition-delay:.16s}.mx-card-fig .mx-mod:nth-child(4){transition-delay:.24s}.mx-card-fig .mx-mod:nth-child(5){transition-delay:.32s}.mx-card-fig .mx-mod:nth-child(6){transition-delay:.4s}
.mx-card-fig .mx-pw{transition-delay:.25s}.mx-card-fig .mx-cool{transition-delay:.5s}

@media (max-width:899.98px){
  .mx{padding:75px 6% 80px}
  .mx:before{font-size:160px}
  .mx-pin{grid-template-columns:1fr;gap:28px}
}
@media (max-width:760px){.mx{padding:55px 5% 60px}}