#services { overflow: hidden; }
#services .services-system-home { display: none; }
.content-page > .crew-services-model { display: block; width: min(calc(100% - 36px), 1480px); overflow: hidden; }
.crew-services-model .services-system { margin: 0 auto; }
.crew-services-model .services-network-container { width: min(calc(100% - 48px), 1480px); max-width: none; }

@media (max-width:760px) {
  .content-page > .crew-services-model { width: min(calc(100% - 28px), 620px); }
  .crew-services-model .services-network-container { width: 100%; }
}
#services .services-network-container { width: min(calc(100% - 48px), 1680px); max-width: none; }
.services-showcase { display: grid; min-height: 760px; grid-template-columns: minmax(420px, .88fr) minmax(640px, 1.12fr); gap: clamp(40px, 5vw, 90px); align-items: center; }
.services-copy { padding: clamp(30px, 4vw, 70px) 0; }
.services-copy .eyebrow { display: flex; gap: 22px; align-items: center; margin-bottom: 24px; }
.services-copy .eyebrow::after { width: 34px; height: 1px; background: var(--muted); content: ""; }
.services-copy h2 { max-width: 680px; margin: 0; font-size: clamp(2.55rem, 4.2vw, 4.65rem); line-height: .98; letter-spacing: -.045em; }
.services-claim { margin: 14px 0 24px; color: var(--accent); font-size: clamp(1.65rem, 2.8vw, 3rem); font-weight: 750; line-height: 1.06; letter-spacing: -.035em; }
.services-intro { max-width: 660px; margin: 0 0 32px; color: var(--muted); font-size: clamp(1rem, 1.3vw, 1.17rem); line-height: 1.6; }
.services-summary { display: grid; max-width: 620px; gap: 15px; }
.services-summary a { position: relative; display: grid; padding: 8px 42px 8px 0; grid-template-columns: 66px 1fr; gap: 18px; align-items: center; border-radius: 18px; color: inherit; text-decoration: none; cursor: pointer; transition: background .25s ease, padding-left .25s ease; }
.services-summary a::after { position: absolute; right: 12px; display: grid; width: 28px; height: 28px; place-items: center; border: 1px solid color-mix(in srgb, var(--accent) 42%, var(--line)); border-radius: 50%; color: var(--accent); content: "→"; opacity: .8; transition: transform .25s ease, background .25s ease, color .25s ease; }
.services-summary a:hover, .services-summary a:focus-visible { padding-left: 8px; background: color-mix(in srgb, var(--accent) 6%, transparent); outline: none; }
.services-summary a:hover::after, .services-summary a:focus-visible::after { background: var(--accent); color: #15100b; transform: translateX(3px); }
.summary-icon { display: grid; width: 66px; height: 66px; place-items: center; border-radius: 50%; background: color-mix(in srgb, var(--accent) 9%, var(--surface)); color: var(--accent); transition: transform .25s ease, background .25s ease; }
.services-summary a:hover .summary-icon { background: color-mix(in srgb, var(--accent) 16%, var(--surface)); transform: translateX(4px); }
.summary-icon svg { width: 34px; fill: none; stroke: currentColor; stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; }
.services-summary strong, .services-summary small { display: block; }
.services-summary strong { margin-bottom: 4px; font-size: 1.06rem; }
.services-summary small { color: var(--muted); font-size: .93rem; line-height: 1.45; }
.services-system { position: relative; width: min(100%, 760px); height: 720px; margin: 0 auto; }
.system-orbit { position: absolute; top: 50%; left: 50%; border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent); border-radius: 50%; transform: translate(-50%, -50%); }
.system-orbit-one { width: 440px; height: 440px; background: color-mix(in srgb, var(--accent) 5%, transparent); }
.system-orbit-two { width: 620px; height: 620px; border-style: dashed; opacity: .7; animation: orbit-spin 45s linear infinite; }
.system-core { position: absolute; top: 50%; left: 50%; z-index: 3; display: grid; width: 240px; height: 240px; place-content: center; border-radius: 50%; background: linear-gradient(145deg, #ffad2f, #ff6500); box-shadow: 0 22px 60px rgba(244,107,18,.28), 0 0 0 22px color-mix(in srgb, var(--accent) 8%, transparent); color: #fff; text-align: center; transform: translate(-50%, -50%); }
.system-core strong { margin-bottom: 18px; font-size: 2rem; font-weight: 500; letter-spacing: .12em; }
.system-core span { font-size: 1.05rem; font-weight: 650; line-height: 1.35; }
.system-core .system-core-logo { display: grid; width: 58px; height: 58px; margin: 0 auto 8px; place-items: center; border: 1px solid rgba(255,255,255,.24); border-radius: 18px; background: rgba(20,14,9,.18); box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 10px 24px rgba(92,37,0,.18); backdrop-filter: blur(6px); }
.system-core .system-core-logo img { width: 45px; height: 45px; object-fit: contain; }
.system-core .system-core-logo + strong { margin-bottom: 11px; font-size: 1.65rem; }
.system-core .system-core-logo { width: 68px; height: 68px; margin-bottom: 14px; }
.system-core .system-core-logo img { width: 52px; height: 52px; }
.system-core .system-core-logo + strong { margin-bottom: 0; font-size: 1.8rem; }
.system-node { position: absolute; z-index: 4; display: grid; width: 220px; height: 220px; padding: 25px; place-content: center; justify-items: center; border: 1px solid color-mix(in srgb, var(--line) 78%, transparent); border-radius: 50%; background: color-mix(in srgb, var(--surface) 96%, transparent); box-shadow: 0 18px 46px rgba(24,31,42,.12); color: inherit; text-align: center; text-decoration: none; cursor: pointer; transition: transform .28s ease, border-color .28s ease, box-shadow .28s ease; backdrop-filter: blur(12px); }
.system-node::after { position: absolute; top: 17px; right: 22px; display: grid; width: 30px; height: 30px; place-items: center; border: 1px solid color-mix(in srgb, var(--accent) 48%, var(--line)); border-radius: 50%; color: var(--accent); font-size: .9rem; content: "↗"; opacity: .82; transition: background .25s ease, color .25s ease, transform .25s ease; }
.system-node:hover { border-color: color-mix(in srgb, var(--accent) 60%, var(--line)); box-shadow: 0 22px 52px rgba(244,131,18,.18); }
.system-node:hover::after, .system-node:focus-visible::after { background: var(--accent); color: #15100b; transform: translate(2px,-2px); }
.system-node:focus-visible, .system-hub:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 65%, transparent); outline-offset: 5px; }
.system-node-consulting { top: 0; left: 50%; transform: translateX(-50%); }
.system-node-consulting:hover { transform: translate(-50%, -5px); }
.system-node-digital { top: 50%; left: 0; transform: translateY(-42%); }
.system-node-digital:hover { transform: translateY(calc(-42% - 5px)); }
.system-node-workshops { top: 50%; right: 0; transform: translateY(-42%); }
.system-node-workshops:hover { transform: translateY(calc(-42% - 5px)); }
.system-node-icon { display: grid; width: 50px; height: 50px; margin-bottom: 10px; place-items: center; color: var(--accent); }
.system-node-icon svg { width: 42px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.system-node strong { font-size: 1.05rem; line-height: 1.18; }
.node-title-short { display: none; }
.system-node small { max-width: 155px; margin-top: 9px; color: var(--muted); font-size: .79rem; line-height: 1.35; }
.system-line { position: absolute; z-index: 2; background: var(--accent); opacity: .75; }
.system-line::after { position: absolute; width: 10px; height: 10px; border-radius: 50%; background: inherit; content: ""; }
.system-line-top { top: 212px; left: 50%; width: 1px; height: 39px; }
.system-line-top::after { bottom: 0; left: -4px; }
.system-line-left { top: 50%; left: 208px; width: 52px; height: 1px; }
.system-line-left::after { right: 0; top: -4px; }
.system-line-right { top: 50%; right: 208px; width: 52px; height: 1px; }
.system-line-right::after { left: 0; top: -4px; }
.system-hub { position: absolute; bottom: 0; left: 0; z-index: 5; display: grid; min-width: 255px; padding: 14px 20px; grid-template-columns: 42px 1fr; gap: 12px; align-items: center; border: 1px solid color-mix(in srgb, var(--line) 82%, transparent); border-radius: 24px; background: color-mix(in srgb, var(--surface) 97%, transparent); box-shadow: 0 13px 35px rgba(24,31,42,.1); color: inherit; text-decoration: none; cursor: pointer; transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; }
.system-hub::before { position: absolute; bottom: 100%; left: 109px; width: 2px; height: 133px; background: linear-gradient(to top, var(--accent), color-mix(in srgb, var(--accent) 62%, transparent)); box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 40%, transparent); content: ""; }
.system-hub::after { position: absolute; bottom: calc(100% + 127px); left: 105px; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 14px var(--accent); content: ""; }
.system-hub:hover { border-color: var(--accent); box-shadow: 0 18px 42px rgba(244,131,18,.22); transform: translateY(-4px); }
.system-hub-icon { color: var(--accent); }
.system-hub-icon svg { width: 38px; fill: none; stroke: currentColor; stroke-width: 2.3; }
.system-hub strong, .system-hub small { display: block; }
.system-hub strong { font-size: .92rem; }
.system-hub small { margin-top: 2px; color: var(--muted); font-size: .74rem; }
.system-hub .system-hub-label { margin: 0 0 3px; color: var(--accent); font-size: .58rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
body[data-theme="dark"] .system-node, body[data-theme="dark"] .system-hub { background: rgba(17,17,17,.94); box-shadow: 0 18px 48px rgba(0,0,0,.34); }
@keyframes orbit-spin { to { transform: translate(-50%, -50%) rotate(360deg); } }
@media (max-width: 1180px) { .services-showcase { grid-template-columns: 1fr; } .services-copy { max-width: 760px; margin: 0 auto; text-align: center; } .services-copy .eyebrow { justify-content: center; } .services-intro, .services-summary { margin-right: auto; margin-left: auto; } .services-summary { text-align: left; } .services-system { margin-top: 10px; } }
@media (max-width: 760px) { #services .services-network-container { width: min(calc(100% - 28px), 620px); } .services-showcase { min-height: 0; gap: 20px; } .services-copy { padding: 20px 0; } .services-copy h2 { font-size: clamp(2.2rem, 11vw, 3.4rem); } .services-summary a { grid-template-columns: 54px 1fr; gap: 13px; } .summary-icon { width: 54px; height: 54px; } .services-system { display: grid; width: 100%; height: auto; gap: 15px; } .system-orbit, .system-line { display: none; } .system-core { position: relative; inset: auto; width: 174px; height: 174px; margin: 10px auto 20px; transform: none; } .system-core strong { margin-bottom: 10px; font-size: 1.4rem; } .system-core span { font-size: .9rem; } .system-node { position: relative; inset: auto; width: 100%; height: auto; min-height: 150px; padding: 22px; grid-template-columns: 64px 1fr; align-items: center; justify-items: start; border-radius: 24px; text-align: left; transform: none !important; } .system-node-icon { grid-row: 1 / 3; margin: 0; } .system-node strong { align-self: end; } .system-node small { align-self: start; max-width: none; } .system-hub { position: relative; inset: auto; min-width: 0; margin: -5px 18px 0; border-radius: 20px; } .system-hub::before { bottom: 100%; height: 16px; } .system-hub::after { display: none; } }
@media (prefers-reduced-motion: reduce) { .system-orbit-two { animation: none; } }
@media (max-width: 760px) {
  .system-node { padding-right: 56px; }
  .system-node::after { top: 18px; right: 18px; }
  .system-hub::before { left: 50%; }
}

/* Homepage desktop: the service map lives on the About page, so no empty second column remains. */
@media (min-width: 1181px) {
  #services .services-showcase {
    display: block;
    min-height: 0;
  }

  #services .services-copy {
    width: min(100%, 1580px);
    margin-inline: auto;
    padding: clamp(34px, 5vw, 76px) 0 clamp(18px, 2vw, 30px);
    text-align: center;
  }

  #services .services-copy .eyebrow { justify-content: center; }
  #services .services-copy h2 { max-width: 1540px; margin-inline: auto; font-size: clamp(2.55rem, 4.35vw, 4.4rem); }
  #services .services-title-break { display: none; }
  #services .services-claim { margin-inline: auto; }
  #services .services-intro { max-width: 920px; margin-inline: auto; }
}

/* Reduced repetition and clearer interaction language */
.services-method { display: flex; max-width: 610px; margin-top: 42px; align-items: center; }
.services-method > span { display: grid; gap: 5px; }
.services-method b { color: var(--accent); font-size: .68rem; font-weight: 700; letter-spacing: .14em; }
.services-method strong { font-size: clamp(.95rem, 1.25vw, 1.08rem); }
.services-method i { width: clamp(34px, 4vw, 70px); height: 1px; margin: 0 16px; background: linear-gradient(90deg, var(--line), var(--accent), var(--line)); }
.system-node { padding: 18px 20px; }
.system-node::after { display: none; }
.system-node-icon { position: relative; width: 52px; height: 52px; margin-bottom: 7px; border: 1px solid color-mix(in srgb, var(--accent) 52%, transparent); border-radius: 16px; background: linear-gradient(145deg, color-mix(in srgb, var(--accent) 18%, transparent), color-mix(in srgb, var(--accent) 3%, transparent)); box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 10px 24px rgba(244,131,18,.1); transform: rotate(-4deg); transition: transform .3s ease, background .3s ease; }
.system-node-icon::after { position: absolute; top: 6px; right: 6px; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent); content: ""; }
.system-node-icon svg { width: 31px; transform: rotate(4deg); }
.system-node:hover .system-node-icon { background: color-mix(in srgb, var(--accent) 24%, transparent); transform: rotate(0) scale(1.04); }
.system-node small { margin-top: 5px; }
.node-action { display: inline-flex; min-height: 27px; margin-top: 10px; padding: 4px 9px 4px 11px; gap: 6px; align-items: center; border: 1px solid color-mix(in srgb, var(--accent) 42%, var(--line)); border-radius: 999px; color: var(--accent); font-size: .64rem; font-weight: 750; letter-spacing: .04em; text-transform: uppercase; transition: background .25s ease, color .25s ease, border-color .25s ease; }
.node-action svg, .hub-action svg { width: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s ease; }
.system-node:hover .node-action, .system-node:focus-visible .node-action { border-color: var(--accent); background: var(--accent); color: #16110c; }
.system-node:hover .node-action svg, .system-node:focus-visible .node-action svg, .system-hub:hover .hub-action svg { transform: translateX(3px); }
.system-hub { grid-template-columns: 42px 1fr 34px; }
.hub-action { display: grid; width: 32px; height: 32px; place-items: center; border: 1px solid color-mix(in srgb, var(--accent) 48%, var(--line)); border-radius: 50%; color: var(--accent); transition: background .25s ease, color .25s ease; }
.system-hub:hover .hub-action { background: var(--accent); color: #16110c; }

@media (max-width: 1180px) { .services-method { margin-right: auto; margin-left: auto; justify-content: center; } }
@media (max-width: 760px) {
  .services-method { margin-top: 30px; justify-content: center; }
  .services-method i { margin: 0 9px; }
  .system-node { padding: 22px 22px 22px 20px; grid-template-columns: 64px 1fr; }
  .system-node-icon { grid-row: 1 / 4; }
  .node-action { margin-top: 8px; }
  .system-hub { grid-template-columns: 38px 1fr 32px; }
}

/* Final composition: message first, connected service system underneath. */
.services-showcase {
  display: flex;
  min-height: 0;
  gap: clamp(28px, 4vw, 54px);
  align-items: stretch;
  flex-direction: column;
}

.services-copy {
  width: min(100%, 1040px);
  margin: 0 auto;
  padding: clamp(34px, 5vw, 76px) 0 0;
  text-align: left;
}

.services-copy .eyebrow { justify-content: flex-start; }
.services-copy h2 { max-width: 920px; }
.services-intro { max-width: 820px; margin-right: 0; margin-bottom: 0; margin-left: 0; }
.services-system { flex: 0 0 auto; margin: 0 auto clamp(22px, 4vw, 60px); }

/* Homepage: wide introduction followed immediately by the 3D service cards. */
#services .services-showcase { gap: 0; }
#services .services-copy { width: min(100%, 1580px); padding-bottom: 0; }
#services .services-copy h2 { max-width: 1540px; }
#services .services-intro { max-width: 920px; }

@media (max-width: 760px) {
  .services-showcase { gap: 30px; }
  .services-copy { padding-top: 22px; text-align: left; }
  .services-copy .eyebrow { justify-content: flex-start; }
  .services-intro { margin-right: 0; margin-left: 0; }
  .services-system { margin-top: 0; }
  .system-core .system-core-logo { width: 46px; height: 46px; margin-bottom: 4px; border-radius: 14px; }
  .system-core .system-core-logo img { width: 35px; height: 35px; }
  .system-core .system-core-logo + strong { margin-bottom: 6px; font-size: 1.2rem; }

  /* Mobile: one professional service directory instead of a stack of loose cards. */
  .services-system {
    position: relative;
    overflow: hidden;
    gap: 0;
    padding: 0;
    border: 1px solid color-mix(in srgb, var(--line) 88%, transparent);
    border-radius: 24px;
    background: color-mix(in srgb, var(--surface) 97%, transparent);
    box-shadow: 0 22px 55px rgba(0,0,0,.16);
  }

  .services-system::before { display: none; }

  .system-core,
  .system-node,
  .system-hub { z-index: 1; }

  .system-core {
    display: flex;
    width: 100%;
    height: 82px;
    margin: 0;
    padding: 0 22px;
    gap: 12px;
    align-items: center;
    justify-content: flex-start;
    border-radius: 0;
    background: linear-gradient(110deg, #ff8a0b, #f46912);
    box-shadow: none;
    text-align: left;
  }

  .system-core .system-core-logo {
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    margin: 0;
    border-radius: 12px;
    background: rgba(255,255,255,.16);
  }

  .system-core .system-core-logo img { width: 32px; height: 32px; }
  .system-core .system-core-logo + strong { margin: 0; font-size: 1.18rem; letter-spacing: .08em; }

  .system-node {
    min-height: 116px;
    padding: 17px 54px 17px 18px;
    grid-template-columns: 58px minmax(0, 1fr);
    column-gap: 10px;
    border: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--line) 82%, transparent);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
  }

  .system-node:hover { border-color: color-mix(in srgb, var(--line) 82%, transparent); background: color-mix(in srgb, var(--accent) 6%, transparent); box-shadow: none; }

  .system-node-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
  }

  .system-node-icon svg { width: 28px; }
  .system-node strong { font-size: 1rem; }
  .system-node small { margin-top: 3px; font-size: .78rem; }
  .node-action { min-height: 25px; margin-top: 7px; padding: 3px 8px 3px 10px; }

  .system-hub {
    width: 100%;
    min-height: 98px;
    margin: 0;
    padding: 16px 18px;
    border: 0;
    border-radius: 0;
    background: color-mix(in srgb, var(--accent) 7%, var(--surface));
    box-shadow: inset 3px 0 0 var(--accent);
  }

  .system-hub::before,
  .system-hub::after { display: none; }

  .system-hub:hover { border-color: transparent; box-shadow: inset 3px 0 0 var(--accent); transform: none; }

  .system-hub strong { font-size: .9rem; }
  .system-hub .system-hub-label { font-size: .55rem; }
}

/* Desktop: concise message left, connected service system right. */
@media (min-width: 1181px) {
  .services-showcase {
    display: grid;
    min-height: 760px;
    grid-template-columns: minmax(430px, .82fr) minmax(680px, 1.18fr);
    gap: clamp(38px, 4vw, 76px);
    align-items: center;
  }

  .services-copy {
    width: 100%;
    margin: 0;
    padding: 0;
  }

  .services-copy h2 { max-width: 650px; }
  .services-intro { max-width: 650px; }
  .services-system { margin: 0 auto; }
}

/* Compact mobile service map: short labels, circular areas, visible relationship. */
@media (max-width: 760px) {
  .services-system {
    position: relative;
    display: block;
    overflow: visible;
    width: min(100%, 500px);
    height: 570px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .services-system::before {
    position: absolute;
    top: 96px;
    left: 50%;
    display: block;
    width: min(78vw, 360px);
    height: min(78vw, 360px);
    border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
    border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--accent) 8%, transparent), transparent 64%);
    content: "";
    transform: translateX(-50%);
  }

  .system-orbit-one {
    top: 276px;
    display: block;
    width: min(56vw, 260px);
    height: min(56vw, 260px);
    background: transparent;
  }

  .system-orbit-two { display: none; }

  .system-line { z-index: 0; display: block; opacity: .42; }
  .system-line-top { top: 132px; left: 50%; width: 1px; height: 82px; }
  .system-line-top::after { display: none; }
  .system-line-left { top: 273px; left: 25%; width: 27%; height: 1px; transform: rotate(35deg); transform-origin: right center; }
  .system-line-right { top: 273px; right: 25%; width: 27%; height: 1px; transform: rotate(-35deg); transform-origin: left center; }
  .system-line-left::after,
  .system-line-right::after { display: none; }

  .system-core {
    position: absolute;
    top: 166px;
    left: 50%;
    display: grid;
    width: 126px;
    height: 126px;
    padding: 0;
    place-content: center;
    justify-items: center;
    border-radius: 50%;
    background: linear-gradient(145deg, #ff9b1e, #f2670c);
    box-shadow: 0 15px 38px rgba(244,107,18,.24), 0 0 0 12px color-mix(in srgb, var(--accent) 7%, transparent);
    text-align: center;
    transform: translateX(-50%);
  }

  .system-core .system-core-logo {
    display: grid;
    width: 42px;
    height: 42px;
    margin: 0 0 5px;
    place-items: center;
    border-radius: 12px;
    background: rgba(255,255,255,.14);
  }

  .system-core .system-core-logo img { width: 32px; height: 32px; }
  .system-core .system-core-logo + strong { margin: 0; font-size: .96rem; letter-spacing: .08em; }

  .system-node {
    position: absolute;
    display: flex;
    width: clamp(126px, 35vw, 150px);
    height: clamp(126px, 35vw, 150px);
    min-height: 0;
    padding: 16px 12px 13px;
    gap: 5px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    border: 1px solid color-mix(in srgb, var(--line) 86%, transparent);
    border-radius: 50%;
    background: color-mix(in srgb, var(--surface) 97%, transparent);
    box-shadow: 0 13px 34px rgba(0,0,0,.14);
    text-align: center;
    backdrop-filter: blur(12px);
  }

  .system-node-consulting { top: 0; left: 50%; transform: translateX(-50%) !important; }
  .system-node-digital { top: 304px; left: 0; transform: none !important; }
  .system-node-workshops { top: 304px; right: 0; transform: none !important; }
  .system-node:hover { border-color: color-mix(in srgb, var(--accent) 60%, var(--line)); background: color-mix(in srgb, var(--surface) 97%, transparent); }

  .system-node-icon {
    width: 38px;
    height: 38px;
    margin: 0;
    flex: 0 0 38px;
    border-radius: 12px;
  }

  .system-node-icon svg { width: 23px; }
  .node-title-full { display: none; }
  .node-title-short { display: inline; }
  .system-node strong { font-size: clamp(.78rem, 3.2vw, .92rem); line-height: 1.08; }
  .system-node strong,
  .node-title-short,
  .node-title-short > span {
    width: 100%;
    text-align: center;
  }

  .node-title-short > span { justify-content: center; }
  .system-node small { display: none; }

  .node-action {
    width: 28px;
    min-height: 28px;
    margin: 1px 0 0;
    padding: 0;
    justify-content: center;
    border-radius: 50%;
    font-size: 0;
  }

  .node-action svg { width: 15px; }

  .system-hub {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    min-height: 82px;
    margin: 0;
    padding: 13px 16px;
    border: 1px solid color-mix(in srgb, var(--line) 86%, transparent);
    border-radius: 18px;
    background: color-mix(in srgb, var(--accent) 6%, var(--surface));
    box-shadow: none;
  }

  .system-hub::before {
    position: absolute;
    top: -48px;
    bottom: auto;
    left: 50%;
    display: block;
    width: 2px;
    height: 48px;
    background: linear-gradient(to bottom, color-mix(in srgb, var(--accent) 35%, transparent), var(--accent));
    box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 25%, transparent);
    content: "";
    transform: translateX(-50%);
  }

  .system-hub::after {
    position: absolute;
    top: -5px;
    left: 50%;
    display: block;
    width: 10px;
    height: 10px;
    border: 2px solid var(--accent);
    border-radius: 50%;
    background: #090b0e;
    box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 45%, transparent);
    content: "";
    transform: translateX(-50%);
  }

  .system-hub > span:nth-child(2) { min-width: 0; text-align: left; }
  .system-hub strong,
  .system-hub .system-hub-label { text-align: left; }
  .system-hub:hover { border-color: var(--accent); box-shadow: none; transform: none; }
  .system-hub > span:nth-child(2) > small:last-child { display: none; }
}