.systems-page { background: #eaf0f3; }
.systems-main { display: grid; grid-template-columns: 310px minmax(0, 1fr); min-height: calc(100vh - 76px); }
.systems-sidebar { padding: 76px 28px; background: #071522 url('../assets/background.png') center/cover; color: #fff; }
.systems-kicker { margin: 0; color: #ff7864; font: 800 10px var(--body); letter-spacing: 1.4px; text-transform: uppercase; }
.systems-sidebar h1 { margin: 20px 0 45px; font-size: 56px; line-height: .82; }
.systems-sidebar nav { display: grid; border-top: 1px solid rgba(124,190,232,.3); }
.systems-sidebar a { padding: 14px 0; border-bottom: 1px solid rgba(124,190,232,.22); color: #a9c7db; font: 700 12px var(--body); text-decoration: none; }
.systems-sidebar a:hover, .systems-sidebar a.active { color: #fff; }
.systems-document { width: min(900px, 100%); padding: 76px 7vw 120px; }
.systems-document > header { max-width: 620px; padding-bottom: 38px; border-bottom: 1px solid #c7d2da; }
.systems-document h2 { margin: 18px 0; color: #17202b; font-size: clamp(55px, 7vw, 88px); line-height: .84; }
.systems-document > header > p:last-child, .systems-section > p { color: #68727e; font-size: 15px; line-height: 1.8; }
.systems-at-a-glance { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 38px 0; border: 1px solid #c7d2da; background: #fff; }
.systems-at-a-glance div { padding: 18px; border-right: 1px solid #dfe4e8; border-bottom: 1px solid #dfe4e8; }
.systems-at-a-glance div:nth-child(2n) { border-right: 0; }
.systems-at-a-glance span, .systems-note strong { display: block; color: #1769ff; font: 800 9px var(--body); letter-spacing: .8px; text-transform: uppercase; }
.systems-at-a-glance strong { display: block; margin-top: 7px; color: #17202b; font: 700 20px var(--display); text-transform: uppercase; }
.systems-section { margin-top: 52px; }
.systems-section h3 { margin: 0 0 15px; color: #17202b; font: 700 36px var(--display); text-transform: uppercase; }
.systems-section table { width: 100%; margin-top: 24px; border-collapse: collapse; background: #fff; font-size: 13px; }
.systems-section th, .systems-section td { padding: 13px; border: 1px solid #c7d2da; text-align: left; }
.systems-section th { color: #1769ff; font-size: 10px; letter-spacing: .7px; text-transform: uppercase; }
.systems-note { margin-top: 24px; padding: 16px 18px; border-left: 4px solid #1769ff; background: #eef7ff; }
.systems-note p { margin: 8px 0 0; color: #4d5f73; font-size: 13px; line-height: 1.65; }
.systems-advanced { margin-top: 48px; border: 1px solid #b9c9d5; background: #fff; }
.systems-advanced summary { padding: 16px 18px; color: #17202b; font: 800 15px var(--body); cursor: pointer; }
.systems-advanced p { margin: 0; padding: 0 18px 18px; color: #68727e; line-height: 1.75; }
.systems-community { min-height: calc(100vh - 76px); background: linear-gradient(180deg, rgba(5,20,34,.72), rgba(7,21,34,.9)), url('../assets/img/closers%20game%20%20background.png') center/cover fixed; animation: guidePageEnter .28s ease-out both; }
.systems-community-hero { display: flex; align-items: end; justify-content: space-between; gap: 30px; padding: 76px 10vw 54px; border-bottom: 1px solid rgba(124,190,232,.3); background: transparent; }
.systems-community-hero h1 { margin: 18px 0; color: #fff; font-size: clamp(58px, 8vw, 100px); line-height: .82; }
.systems-community-hero p:last-child { max-width: 520px; margin: 0; color: #b8d2e2; font-size: 14px; line-height: 1.75; }
.systems-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.systems-back-link, .systems-review-button { padding: 12px 14px; border: 1px solid #1769ff; background: #fff; color: #1769ff; font: 800 10px var(--body); letter-spacing: .7px; text-decoration: none; text-transform: uppercase; }
.systems-back-link:hover, .systems-review-button:hover { background: #1769ff; color: #fff; }
.systems-feed-area { max-width: 1080px; margin: 0 auto; padding: 48px 5vw 100px; }
.systems-feed-heading { display: flex; align-items: end; justify-content: space-between; gap: 28px; margin-bottom: 28px; padding-bottom: 22px; border-bottom: 1px solid rgba(124,190,232,.3); }
.systems-feed-heading .section-label { color: #ff9c8c; }.systems-feed-heading .section-label span { color: #fff; }.systems-feed-heading p:last-child { margin: 0; color: #b8d2e2; font-size: 13px; }
@media (max-width: 760px) { .systems-main { grid-template-columns: 1fr; } .systems-sidebar { padding: 48px 8vw; } .systems-sidebar h1 { margin: 14px 0 30px; } .systems-sidebar nav { grid-template-columns: repeat(2, 1fr); gap: 0 14px; } .systems-document { padding: 55px 8vw 80px; } .systems-at-a-glance { grid-template-columns: 1fr; } .systems-at-a-glance div { border-right: 0; } .systems-community-hero { display: block; padding: 58px 8vw; } .systems-hero-actions { margin-top: 26px; } .systems-feed-area { padding: 35px 8vw 70px; } .systems-feed-heading { display: block; } .systems-feed-heading p:last-child { margin-top: 12px; } }