.suite { color: var(--ink); background: var(--ice); }
.suite :focus-visible { outline-color: var(--cobalt); }
.suite .eyebrow { color: var(--cobalt); }
.suite .section-lead { color: #4A5D78; }
.suite-visual { position: relative; }
.suite-orbit { position: relative; display: grid; place-items: center; width: 144px; height: 144px; margin: 0 auto 48px; border: 1px solid rgb(25 82 232 / 20%); border-radius: 50%; background: var(--paper); box-shadow: 0 18px 50px rgb(25 82 232 / 10%); }
.suite-orbit::before, .suite-orbit::after { position: absolute; z-index: -1; width: 220px; height: 220px; border: 1px dashed rgb(25 82 232 / 14%); border-radius: 50%; content: ""; }
.suite-orbit::after { width: 310px; height: 310px; }
.suite-orbit img { width: 112px; height: 112px; }
.suite-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0 0 32px; }
.suite-tabs button { padding: 9px 15px; border: 1px solid #C9D7E9; border-radius: 999px; color: #334A69; background: var(--paper); cursor: pointer; }
.suite-tabs button[aria-checked="true"] { border-color: var(--cobalt); color: var(--paper); background: var(--cobalt); }
.suite-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; }
.suite-node { min-width: 0; min-height: 220px; padding: 28px; border: 1px solid #D8E2EF; border-radius: 20px; background: var(--paper); box-shadow: 0 10px 30px rgb(11 24 48 / 4%); }
.node-index { display: block; margin-bottom: 32px; color: var(--cobalt); font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 0.75rem; }
.suite-node h3 { margin-bottom: 14px; font-size: 1.35rem; }
.suite-node p { margin: 0; color: #4A5D78; }
.suite-links path { fill: none; stroke: rgb(25 82 232 / 18%); stroke-width: 1.5; stroke-dasharray: 1; stroke-dashoffset: 0; vector-effect: non-scaling-stroke; transition: stroke 160ms ease, stroke-width 160ms ease, stroke-dashoffset 900ms ease var(--delay, 0ms); }
.suite-links[data-active="org"] [data-suite-path="org"],
.suite-links[data-active="attendance"] [data-suite-path="attendance"],
.suite-links[data-active="payroll"] [data-suite-path="payroll"],
.suite-links[data-active="workflow"] [data-suite-path="workflow"],
.suite-links[data-active="reporting"] [data-suite-path="reporting"],
.suite-links[data-active="open-api"] [data-suite-path="open-api"] { stroke: var(--cobalt); stroke-width: 3; }
.suite-links [data-suite-path="attendance"] { --delay: 70ms; }
.suite-links [data-suite-path="payroll"] { --delay: 140ms; }
.suite-links [data-suite-path="workflow"] { --delay: 210ms; }
.suite-links [data-suite-path="reporting"] { --delay: 280ms; }
.suite-links [data-suite-path="open-api"] { --delay: 350ms; }
html.reduce .suite-links path { stroke-dashoffset: 0; transition: none; }

@keyframes suite-node-in {
  from { opacity: 0; offset-distance: 0%; }
  to { opacity: 1; offset-distance: 100%; }
}

@media (min-width: 961px) {
  html.js .suite-network { display: grid; grid-template-columns: 600px minmax(0, 360px); align-items: center; justify-content: center; gap: 32px; }
  html.js .suite-visual { width: 600px; height: 600px; }
  html.js .suite-links { position: absolute; inset: 0; display: block; width: 100%; height: 100%; overflow: visible; }
  html.js:not(.reduce) #suite:not(.is-inview) .suite-links path { stroke-dashoffset: 1; }
  html.js .suite-orbit { position: absolute; z-index: 2; top: 50%; left: 50%; margin: 0; transform: translate(-50%, -50%); }
  html.js .suite-tabs { position: absolute; inset: 0; display: block; margin: 0; }
  html.js .suite-tabs button { position: absolute; top: 0; left: 0; width: 124px; min-height: 52px; margin: 0; padding: 10px 14px; offset-anchor: 50% 50%; offset-distance: 100%; offset-rotate: 0deg; box-shadow: 0 8px 24px rgb(11 24 48 / 7%); white-space: nowrap; }
  html.js .suite-tabs [data-suite="org"] { offset-path: path("M300 300 Q250 180 300 72"); }
  html.js .suite-tabs [data-suite="attendance"] { --delay: 70ms; offset-path: path("M300 300 Q410 250 497 185"); }
  html.js .suite-tabs [data-suite="payroll"] { --delay: 140ms; offset-path: path("M300 300 Q410 350 497 415"); }
  html.js .suite-tabs [data-suite="workflow"] { --delay: 210ms; offset-path: path("M300 300 Q350 420 300 528"); }
  html.js .suite-tabs [data-suite="reporting"] { --delay: 280ms; offset-path: path("M300 300 Q190 350 103 415"); }
  html.js .suite-tabs [data-suite="open-api"] { --delay: 350ms; offset-path: path("M300 300 Q190 250 103 185"); }
  html.js:not(.reduce) #suite.is-inview .suite-tabs button { animation: suite-node-in 900ms cubic-bezier(0.22, 1, 0.36, 1) var(--delay, 0ms) both; }
  html.reduce .suite-tabs button { animation: none; }
  html.js .suite-grid { display: block; }
  html.js .suite-node { display: flex; min-height: 320px; flex-direction: column; justify-content: center; }
}

@media (max-width: 960px) {
  .suite-links { display: none !important; }
  .suite-orbit { margin-bottom: 42px; }
  .suite-tabs { display: grid; grid-template-columns: 1fr; width: min(100%, 420px); margin: 0 auto 28px; }
  .suite-tabs button { width: 100%; min-height: 48px; padding: 11px 16px; border-radius: 14px; text-align: left; }
  .suite-grid { grid-template-columns: 1fr; }
  .suite-node { min-height: 0; }
}

@media (max-width: 600px) {
  .suite-orbit::after { width: 260px; height: 260px; }
  .suite-node { padding: 24px; }
  .node-index { margin-bottom: 20px; }
}