.system-page .hero-hero-inner{ grid-template-columns:.91fr 1.2fr; gap:42px; align-items:center; padding-top:168px; padding-bottom:76px; }
.system-page .hero-copy h1{ font-size:clamp(48px,4.3vw,64px); }
.system-page .hero-copy h1 strong{ color:#26a7df; }
.system-map{ --system-stacked:0; position:relative; isolation:isolate; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); grid-template-rows:auto auto auto; gap:52px 20px; align-content:center; width:100%; min-height:510px; height:auto; padding:6px 0; margin:0; min-width:0; }
.system-caption{ grid-column:1 / -1; grid-row:4; margin:-28px 0 0; color:#c4d5e8; font-size:14px; line-height:1.5; text-align:center; font-weight:400; letter-spacing:0; }
.system-lines{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; overflow:visible; }
.system-card{ position:relative; z-index:1; grid-row:2; min-width:0; min-height:166px; padding:16px 15px; border:1px solid #8aa6c55c; border-radius:10px; background:linear-gradient(115deg,#193c62,#28528b); color:#f4f8fd; }
.system-card-title{ display:flex; align-items:center; gap:9px; min-height:48px; }
.system-card-title svg{ width:30px; height:30px; flex:0 0 30px; fill:#c6edff; }
.system-map .system-card h2{ margin:0; color:#f4f8fd; font-size:19px!important; line-height:1.3!important; letter-spacing:-.2px!important; font-weight:500; }
.system-card p{ margin:10px 0 0; color:#e0ecf8; font-size:15px; line-height:1.5; letter-spacing:normal; }
.system-data{ grid-column:1; }
.system-models{ grid-column:2; }
.system-apps{ grid-column:3; }
.system-integration{ grid-column:1 / -1; grid-row:1; justify-self:center; display:grid; grid-template-columns:38px minmax(0,1fr); column-gap:14px; align-content:center; width:78%; min-height:112px; padding:16px 20px; }
.system-integration .system-card-title{ display:contents; }
.system-integration .system-card-title svg{ grid-column:1; grid-row:1 / 3; align-self:center; width:36px; height:36px; }
.system-map .system-integration h2{ grid-column:2; grid-row:1; font-size:19px!important; }
.system-integration p{ grid-column:2; grid-row:2; margin-top:4px; font-size:15px; line-height:1.5; }
.system-endpoint{ position:relative; z-index:1; grid-row:3; justify-self:center; align-self:center; width:104px; height:104px; border-radius:50%; border:1px solid #8ba8c4; background:#23496e; color:#f0f9ff; display:grid; place-items:center; font-size:16px; font-weight:500; }
.system-end-data{ grid-column:1; }
.system-end-models{ grid-column:2; }
.system-end-people{ grid-column:3; background:#167f9a; border-color:#87e3f0; }
.system-connection{ fill:none; stroke:#8bd5e9; stroke-width:1.15px; opacity:.8; stroke-linecap:round; stroke-linejoin:round; }
.system-arrow{ fill:#a6e0ee; }
.system-port{ fill:#9ddceb; }
.system-shared-label{ fill:#c6dfef; font-size:12px; font-family:inherit; font-weight:400; text-anchor:middle; }
.system-packet{ fill:#defaff; }
.system-packet-halo{ fill:#65d8ed; opacity:.13; }
.system-page .hero-hero .hero-button{ transform:none; box-shadow:none; transition:background-color .18s ease,border-color .18s ease,color .18s ease; }
.system-page .hero-hero .hero-button-primary{ color:#111; background:#bde5f5; border-color:#bde5f5; }
.system-page .hero-hero .hero-button-outline{ color:#f2f7ff; background:#ffffff08; border-color:#b8d2f36b; }
@media(hover:hover) and (pointer:fine){.system-page .hero-hero .hero-button-primary:hover{ background:#91d4ef; border-color:#91d4ef; }
.system-page .hero-hero .hero-button-outline:hover{ color:#172e49; background:#eef6fc; border-color:#eef6fc; }
}
.system-page .hero-hero .hero-button-primary:active{ background:#77c9e9; border-color:#77c9e9; }
.system-page .hero-hero .hero-button-outline:active{ color:#172e49; background:#d6e7f3; border-color:#d6e7f3; }
@media(prefers-reduced-motion:reduce){.system-page .hero-hero .hero-button{ transition:none; }
}
.system-page .hero-offices{ position:static; max-width:460px; gap:30px; margin-top:28px; padding:20px 0 0; border:0; border-top:1px solid #a9c6e24a; border-radius:0; background:none; }
.system-page .hero-offices::after{ content:none; }
.system-page .hero-office{ grid-template-columns:19px minmax(0,1fr); gap:9px; min-width:0; }
.system-page .hero-office>svg{ display:block; width:19px; height:22px; margin-top:1px; fill:currentColor; stroke:none; color:#a6d9ef; }
.system-page .hero-office strong{ font-size:19px; font-weight:500; line-height:1.2; letter-spacing:-.2px; }
.system-page .hero-office p>.system-office-role{ margin-top:6px; color:#bfd0e2; font-size:13px; font-weight:400; line-height:1.5; letter-spacing:normal; text-transform:none; }
.system-page .hero-office p>.system-office-country{ margin-top:0; color:#bfd0e2; font-size:13px; line-height:1.5; }
@media(max-width:600px){.system-page .hero-offices{ gap:24px; }
.system-page .hero-office strong{ font-size:18px; }
}
@media(min-width:1500px){.system-page .hero-hero-inner{ padding-top:178px; }
}
@media(max-width:1250px) and (min-width:1101px){.system-card{ padding:16px 12px; }
.system-map .system-card h2{ font-size:17px!important; }
.system-card p{ font-size:13.5px; }
.system-card-title{ gap:7px; }
.system-card-title svg{ width:27px; height:27px; flex-basis:27px; }
.system-integration{ padding:13px 14px; }
}
@media(max-width:1100px){.system-page .hero-hero-inner{ grid-template-columns:1fr; gap:52px; padding-top:168px; }
.system-page .hero-copy h1{ font-size:64px; }
.system-map{ max-width:700px; justify-self:center; }
}
@media(max-width:740px){.system-page .hero-hero-inner{ padding-top:148px; padding-bottom:64px; gap:46px; }
.system-page .hero-copy h1{ font-size:48px; }
}
@media(max-width:740px){.system-caption{ grid-row:5; margin-top:-12px; font-size:13.5px; }
.system-map{ --system-stacked:1; grid-template-columns:minmax(0,1fr) 62px; grid-template-rows:repeat(4,auto); gap:34px 12px; min-height:0; padding:0 0 0 12px; align-content:start; }
.system-card{ grid-column:1; min-height:0; padding:17px 14px; }
.system-card-title{ min-height:44px; gap:9px; }
.system-map .system-card h2{ font-size:18px!important; }
.system-card-title svg{ width:28px; height:28px; flex-basis:28px; }
.system-card p{ font-size:14px; margin-top:11px; line-height:1.55; }
.system-integration{ grid-column:1 / -1; grid-row:1; grid-template-columns:32px minmax(0,1fr); column-gap:12px; width:100%; min-height:112px; padding:15px 14px; }
.system-map .system-integration h2{ font-size:16px!important; }
.system-integration .system-card-title svg{ width:32px; height:32px; }
.system-integration p{ font-size:13.5px; margin-top:4px; }
.system-data{ grid-row:2; }
.system-models{ grid-row:3; }
.system-apps{ grid-row:4; }
.system-endpoint{ grid-column:2; width:62px; height:62px; font-size:12px; }
.system-end-data{ grid-row:2; }
.system-end-models{ grid-row:3; }
.system-end-people{ grid-row:4; }
}
@media(max-width:370px){.system-page .hero-office{ grid-template-columns:16px minmax(0,1fr); gap:7px; }
.system-page .hero-office>svg{ width:16px; height:19px; }
.system-page .hero-copy h1{ font-size:39px; }
.system-map{ grid-template-columns:minmax(0,1fr) 54px; column-gap:10px; padding-left:10px; }
.system-map .system-card h2{ font-size:16px!important; }
.system-map .system-integration h2{ font-size:15px!important; }
.system-card{ padding-inline:12px; }
.system-card-title{ gap:8px; }
.system-card-title svg{ width:25px; height:25px; flex-basis:25px; }
.system-integration{ grid-template-columns:28px minmax(0,1fr); column-gap:10px; }
.system-integration .system-card-title svg{ width:28px; height:28px; }
.system-endpoint{ width:54px; height:54px; font-size:11px; }
}