/* Custom operational systems: a tangible service demonstration, not stock SaaS imagery. */
.systems { max-width:1440px; margin:0 auto; padding:clamp(94px,11vw,156px) 4.8vw; color:#eef0eb; background:#11222a; overflow:hidden; }
.systems-heading { display:grid; grid-template-columns:.72fr 1.55fr .8fr; gap:34px; align-items:end; margin-bottom:clamp(54px,7vw,92px); }
.systems-heading .section-number,.systems-heading .kicker { color:#dc9676; }.systems-heading .kicker { margin-top:12px; }
.systems-heading h2 { margin:0; font:500 clamp(3rem,5.35vw,5.85rem)/.87 var(--serif); letter-spacing:-.06em; }.systems-heading h2 em { color:#db8968; font-weight:500; }
.systems-heading > p { max-width:300px; margin:0 0 4px; color:#bac3c0; font-size:14px; line-height:1.62; }
.systems-stage { position:relative; display:grid; grid-template-columns:minmax(280px,.88fr) minmax(440px,1.12fr); gap:clamp(46px,7vw,120px); align-items:center; min-height:clamp(500px,43vw,620px); padding:clamp(34px,5vw,70px); overflow:hidden; border:1px solid rgba(232,238,234,.18); background:linear-gradient(120deg,rgba(12,27,34,.96),rgba(17,47,59,.88)); isolation:isolate; }
.systems-stage::before { position:absolute; inset:0; z-index:-2; content:""; opacity:.84; background:linear-gradient(90deg,transparent 49.95%,rgba(229,238,235,.09) 50%,transparent 50.1%),linear-gradient(0deg,transparent 33.3%,rgba(229,238,235,.045) 33.3%,rgba(229,238,235,.045) calc(33.3% + 1px),transparent calc(33.3% + 1px),transparent 66.6%,rgba(229,238,235,.045) 66.6%,rgba(229,238,235,.045) calc(66.6% + 1px),transparent calc(66.6% + 1px)); }
.systems-stage::after { position:absolute; z-index:-1; right:-13%; bottom:-62%; width:76%; aspect-ratio:1; border-radius:50%; content:""; background:radial-gradient(circle,rgba(47,124,164,.42),rgba(18,39,49,0) 65%); }
.systems-intro { position:relative; z-index:1; max-width:425px; }.systems-overline { margin:0; color:#de926f; font-size:10px; font-weight:700; letter-spacing:.14em; }.systems-intro h3 { margin:19px 0 19px; font:500 clamp(2.25rem,3.15vw,3.65rem)/.91 var(--serif); letter-spacing:-.052em; }.systems-intro > p:not(.systems-overline) { max-width:380px; margin:0; color:#c7ceca; font-size:14px; line-height:1.65; }
.systems-intro .systems-proof { max-width:355px; margin:20px 0 0; padding:2px 0 2px 14px; border-left:1px solid #dd906d; color:#e0e4dc; font-size:12px; font-weight:600; line-height:1.55; }
.systems-points { display:grid; gap:0; margin:39px 0 0; padding:0; list-style:none; border-top:1px solid rgba(233,239,234,.22); }.systems-points li { display:grid; grid-template-columns:32px minmax(0,1fr); column-gap:12px; padding:14px 0; border-bottom:1px solid rgba(233,239,234,.18); }.systems-points span { grid-row:span 2; color:#de926f; font-size:9px; font-weight:700; letter-spacing:.1em; }.systems-points strong { color:#f0f1ec; font-size:13px; font-weight:700; }.systems-points small { margin-top:3px; color:#aebbb7; font-size:11px; line-height:1.4; }
.systems-link { display:inline-flex; align-items:center; gap:12px; margin-top:30px; padding-bottom:8px; border-bottom:1px solid rgba(239,241,235,.62); color:#f1f1eb; font-size:11px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; }.systems-link span { color:#df906e; font-size:18px; transition:transform .25s ease; }.systems-link:hover span { transform:translate(3px,-3px); }
.systems-console { position:relative; z-index:1; width:100%; max-width:560px; margin-left:auto; overflow:hidden; border:1px solid rgba(237,242,235,.38); color:#eaf0eb; background:linear-gradient(135deg,#183844,#0c1b23); box-shadow:30px 34px 0 rgba(5,14,18,.22),0 28px 72px rgba(0,0,0,.35); transform:perspective(1400px) rotateY(-7deg) rotateX(3deg) rotateZ(-1.5deg); transition:transform .55s cubic-bezier(.16,1,.3,1),box-shadow .55s ease; }.systems-console:hover { box-shadow:36px 40px 0 rgba(5,14,18,.18),0 35px 80px rgba(0,0,0,.42); transform:perspective(1400px) rotateY(-2deg) rotateX(1deg) rotateZ(0); }
.systems-console-top,.systems-console-footer { display:flex; align-items:center; gap:9px; min-height:43px; padding:0 18px; border-bottom:1px solid rgba(235,242,236,.18); color:#b9c5c0; font-size:8px; font-weight:700; letter-spacing:.13em; }.systems-console-top b { margin-left:auto; color:#dce9df; font-size:8px; }.systems-console-top b::before { display:inline-block; width:6px; height:6px; margin-right:6px; border-radius:50%; content:""; background:#4da98d; box-shadow:0 0 0 5px rgba(77,169,141,.12); }.systems-console-mark { width:11px; height:11px; border:1px solid #dc8e6a; border-radius:50%; box-shadow:inset 0 0 0 3px #183844; }
.systems-console-main { padding:clamp(27px,3.5vw,43px); }.systems-console-title { display:flex; justify-content:space-between; gap:16px; align-items:end; }.systems-console-title p { margin:0; color:#d89070; font-size:9px; font-weight:700; letter-spacing:.12em; }.systems-console-title h3 { margin:9px 0 0; font:500 clamp(1.9rem,2.6vw,3rem)/.88 var(--serif); letter-spacing:-.05em; }.systems-console-title em { color:#d98d6c; font-weight:500; }.systems-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; margin:31px 0; background:rgba(232,239,233,.18); }.systems-stats div { padding:14px 13px; background:#16333e; }.systems-stats b { display:block; color:#f0f1ea; font:500 1.55rem/.9 var(--serif); }.systems-stats span { display:block; margin-top:5px; color:#aab8b3; font-size:8px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; }
.systems-task-list { display:grid; gap:9px; }.systems-task { display:grid; grid-template-columns:17px minmax(0,1fr) auto; gap:11px; align-items:center; min-height:58px; padding:0 13px; border:1px solid rgba(233,240,234,.18); background:rgba(8,21,28,.42); }.systems-task i { width:10px; height:10px; border:1px solid #c4d1cb; border-radius:50%; }.systems-task span { display:grid; gap:4px; }.systems-task b { color:#e7ebe6; font-size:11px; font-weight:700; }.systems-task small { color:#aab8b2; font-size:9px; }.systems-task em { color:#c7d2cc; font-size:9px; font-style:normal; font-weight:700; }.systems-task.is-done { opacity:.58; }.systems-task.is-done i { border-color:#72b69d; background:#72b69d; box-shadow:inset 0 0 0 3px #16333e; }.systems-task.is-done em { color:#72b69d; font-size:13px; }.systems-task.is-priority { border-color:rgba(219,140,105,.58); }.systems-task.is-priority i { border-color:#df906e; box-shadow:0 0 0 4px rgba(223,144,110,.1); }.systems-task.is-priority em { color:#e09a78; }
.systems-console-footer { justify-content:space-between; min-height:38px; border-top:1px solid rgba(235,242,236,.18); border-bottom:0; color:#9eafa9; font-size:7px; }.systems-console-footer span:last-child { color:#d78d6c; }
@media (max-width:1000px) { .systems-heading { grid-template-columns:.65fr 1.4fr; }.systems-heading > p { grid-column:2; margin-top:20px; }.systems-stage { grid-template-columns:.8fr 1.2fr; gap:35px; padding:34px; }.systems-console { transform:none; }.systems-console:hover { transform:translateY(-4px); } }
@media (max-width:800px) { .systems { padding:84px 22px; }.systems-heading { display:block; margin-bottom:47px; }.systems-heading h2 { margin-top:27px; font-size:clamp(2.9rem,12vw,4rem); }.systems-heading > p { margin-top:24px; }.systems-stage { display:block; min-height:0; padding:25px 20px 23px; overflow:hidden; }.systems-stage::after { right:-45%; bottom:-15%; width:130%; }.systems-intro h3 { font-size:clamp(2.2rem,10vw,3.1rem); }.systems-points { margin-top:31px; }.systems-console { max-width:none; margin:45px 0 0; transform:none; }.systems-console-main { padding:25px 18px; }.systems-console-title h3 { font-size:clamp(1.85rem,9vw,2.55rem); }.systems-console-top { padding:0 13px; font-size:7px; }.systems-console-footer { gap:7px; padding:0 13px; font-size:6px; }.systems-task { padding:0 10px; }.systems-task b { font-size:10px; } }
@media (prefers-reduced-motion:reduce) { .systems-console,.systems-console:hover,.systems-link span { transform:none; transition:none; } }