/* Creative systems page. Loads after ../style.css and ../case.css. */
body.sys .nav{--fg:#EEF3F8;--accent:#2FD6F2;color:#EEF3F8;background:rgba(10,18,32,.94);backdrop-filter:blur(10px);border-bottom:1px solid rgba(238,243,248,.1);padding-top:18px;padding-bottom:18px}

/* hero (dark) */
.sys-hero{background:#0A1220;--bg:#0A1220;--fg:#EEF3F8;--mute:#9FADBF;--line:rgba(238,243,248,.16);--accent:#2FD6F2;--on-accent:#04101C;--card:rgba(255,255,255,.05);color:var(--fg);padding:clamp(130px,20vh,220px) 0 clamp(56px,10vh,110px)}
.sys-h1{font-size:clamp(2.8rem,7.4vw,7.6rem);line-height:.96;letter-spacing:-.045em;max-width:15ch}
.sys-h1 em{color:var(--accent)}
.sys-lede{margin-top:clamp(22px,4vh,40px);font-size:clamp(1.1rem,1.5vw,1.4rem);line-height:1.6;max-width:56ch;color:#D3DCE7}
.sys-stats{list-style:none;margin:clamp(36px,7vh,80px) 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.6vw,22px)}
.sys-stats li{background:linear-gradient(135deg,#12243F,#0B1628);border:1px solid rgba(47,214,242,.18);border-radius:14px;padding:24px 22px 20px;display:grid;gap:10px;align-content:start}
.sys-stats b{font-family:var(--display);font-weight:800;font-size:clamp(1.5rem,2.3vw,2.3rem);letter-spacing:-.035em;line-height:1.05;min-height:2.1em;color:var(--accent)}
.sys-stats span{color:#C4CFDC;font-size:1rem;line-height:1.5}

/* rows */
.sys-rows{padding-top:clamp(56px,10vh,110px)}
.sys-row{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,5vw,80px);align-items:center;padding-block:clamp(36px,7vh,80px);border-top:1px solid var(--line)}
.sys-row.rev .sys-copy{order:2}
.sys-no{color:var(--accent);margin-bottom:12px}
.sys-copy h2{font-size:clamp(1.9rem,3.4vw,3.4rem);line-height:1.02;letter-spacing:-.035em;margin-bottom:18px}
.sys-copy p:not(.sys-no){font-size:clamp(1.05rem,1.3vw,1.22rem);line-height:1.65;max-width:50ch}
.sys-copy .more-link{margin-top:20px;color:var(--accent);border-bottom:1px solid var(--accent);padding-bottom:4px}
.sys-media{display:grid;align-items:start;gap:clamp(12px,1.6vw,22px)}
.sys-media.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.sys-media.two .sys-img:nth-child(2){margin-top:clamp(20px,4vw,56px)}
.sys-img{margin:0;border-radius:14px;overflow:hidden;background:#0A1220;box-shadow:0 22px 56px rgba(11,18,32,.22);transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.sys-img img{display:block;width:100%;height:auto}

.sys-row:hover .sys-img:nth-child(1){transform:perspective(900px) rotateY(-4deg) translateY(-4px)}
.sys-row:hover .sys-img:nth-child(2){transform:perspective(900px) rotateY(4deg) translateY(-4px)}

/* steps */
.sys-steps-sec{padding-block:clamp(48px,9vh,100px);border-top:1px solid var(--line)}
.sys-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(10px,1.4vw,18px);counter-reset:s}
.sys-steps li{counter-increment:s;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:22px 20px;display:grid;gap:10px;align-content:start}
.sys-steps li::before{content:"0" counter(s);font-family:var(--mono);font-size:.8rem;color:var(--accent);letter-spacing:.08em}
.sys-steps b{font-family:var(--display);font-weight:800;font-size:1.35rem;letter-spacing:-.02em}
.sys-steps span{color:var(--mute);line-height:1.5}

/* engage (dark close) */
.sys-engage{background:#0A1220;--bg:#0A1220;--fg:#EEF3F8;--mute:#9FADBF;--line:rgba(238,243,248,.16);--accent:#2FD6F2;--on-accent:#04101C;color:var(--fg);padding-block:clamp(64px,12vh,150px)}
.sys-h2{font-size:clamp(2.2rem,5.4vw,5.4rem);letter-spacing:-.045em;line-height:1}
.sys-h2 em{color:var(--accent)}
.engage-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.8vw,24px);margin-top:clamp(28px,5vh,56px)}
.engage-grid article{border:1px solid var(--line);border-radius:12px;padding:26px 24px;display:grid;gap:12px;align-content:start;background:rgba(255,255,255,.04)}
.engage-grid .mono{color:var(--accent)}
.engage-grid h3{font-size:clamp(1.3rem,1.8vw,1.8rem);letter-spacing:-.03em;line-height:1.1}
.engage-grid article p:last-child{color:#C4CFDC;line-height:1.55}
.close-cta{margin-top:clamp(30px,6vh,56px);display:flex;flex-wrap:wrap;gap:14px;align-items:center}

@media (max-width:900px){
  .sys-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sys-row{grid-template-columns:1fr}
  .sys-row.rev .sys-copy{order:0}
  .sys-steps{grid-template-columns:1fr 1fr}
  .engage-grid{grid-template-columns:1fr}
}
@media (max-width:560px){.sys-media.two{grid-template-columns:1fr}.sys-media.two .sys-img:nth-child(2){margin-top:0}.sys-steps{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.sys-row:hover .sys-img{transform:none}}