/* The component is isolated from the site's service and hero layouts. */
.solar-intro { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin: 72px 0 28px; }
.solar-intro h3 { font-family: var(--home-display); font-size: clamp(28px, 3vw, 42px); line-height: 1.15; letter-spacing: -.045em; font-weight: 650; }
.solar-intro > p { max-width: 330px; color: var(--home-text-soft); font-size: 16px; line-height: 1.6; }
.solar-system { --solar-line: rgba(210, 226, 235, .16); position: relative; isolation: isolate; overflow: hidden; color: #edf4f7; background: radial-gradient(ellipse at 50% 35%, #18252b 0, #101a22 42%, #0b131b 80%); border: 1px solid #27343d; border-radius: 8px; }
.solar-system__toolbar { position: relative; z-index: 3; display: flex; min-height: 76px; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 32px; border-bottom: 1px solid var(--solar-line); }
.solar-system__eyebrow { color: #cbd5dc; font-size: 13px; font-weight: 400; letter-spacing: .05em; }
.solar-system__controls { display: flex; gap: 8px; }
.solar-system__controls[hidden], .solar-system__hint[hidden] { display: none; }
.solar-system__controls button { min-height: 40px; padding: 7px 13px; color: #e4ebef; border: 1px solid #40505a; background: #131f27; border-radius: 3px; font-size: 13px; cursor: pointer; transition: border-color 180ms, background 180ms; }
.solar-system__controls button:hover { background: #20313a; border-color: #8cf4e1; }
.solar-system__controls button:active { transform: translateY(1px); }
.solar-system :focus-visible { outline: 2px solid #8cf4e1; outline-offset: 3px; }
.solar-system__stage { position: relative; height: clamp(460px, 43vw, 610px); }
.solar-system__canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; opacity: 0; touch-action: pan-y; cursor: grab; }
.solar-system__canvas:active { cursor: grabbing; }
.solar-system.is-ready .solar-system__canvas { opacity: 1; }
.solar-system__labels { position: absolute; z-index: 2; inset: 0; pointer-events: none; }
.solar-system:not(.is-ready) .solar-system__labels { display: none; }
.solar-system__leaders { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.solar-system__leaders line { stroke: #8ba5af; stroke-width: .65; opacity: .55; }
.solar-label { position: absolute; display: flex; align-items: center; gap: 7px; padding: 5px 9px; color: #eef5f7; border: 1px solid rgba(164, 195, 206, .2); border-radius: 3px; background: rgba(10, 20, 28, .86); font-size: 14px; font-weight: 400; white-space: nowrap; will-change: transform; pointer-events: auto; cursor: pointer; }
.solar-label b { color: #a6bac5; font-size: 11px; font-weight: 400; }
.solar-label.is-active { border-color: #8cf4e1; background: #142c32; }
.solar-system__sun-label { position: absolute; z-index: 2; left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center; pointer-events: none; color: #352209; font-family: var(--home-display); font-size: clamp(22px, 2.5vw, 36px); font-weight: 750; letter-spacing: -.045em; text-shadow: 0 1px 12px #ffdb8c; }
.solar-system__sun-label small { position: absolute; top: calc(100% + 42px); left: 50%; width: 140px; transform: translateX(-50%); color: #f2d9ae; font-family: var(--home-body); font-size: 12px; font-weight: 400; letter-spacing: .03em; text-shadow: 0 1px 8px #0b131b; }
.solar-system__hint { position: absolute; bottom: 18px; left: 0; width: 100%; color: #a6bac5; text-align: center; font-size: 12px; pointer-events: none; }
.solar-system__hint-touch { display: none; }
@media (hover: none), (max-width: 920px) {
  .solar-system__hint-hover { display: none; }
  .solar-system__hint-touch { display: inline; }
}
.solar-system__fallback { position: absolute; inset: 20px; overflow: hidden; }
.solar-system__fallback i { position: absolute; top: 50%; left: 50%; width: 90%; height: 70%; transform: translate(-50%, -50%) rotate(-12deg); border: 1px solid #374953; border-radius: 50%; }
.solar-system__fallback i:nth-child(2) { width: 75%; height: 58%; }
.solar-system__fallback i:nth-child(3) { width: 60%; height: 46%; }
.solar-system__fallback i:nth-child(4) { width: 45%; height: 34%; }
.solar-system__fallback i:nth-child(5) { width: 30%; height: 22%; }
.solar-system__fallback i::after { content: ''; position: absolute; top: 40%; right: -12px; width: 25px; height: 25px; background: radial-gradient(circle at 30% 30%, #b6eced, #43889b 40%, #132f3d 80%); border-radius: 50%; }
.solar-system__fallback i:nth-child(even)::after { right: auto; left: -12px; }
.solar-system__fallback i::before { content: ''; position: absolute; top: 6%; left: 22%; width: 18px; height: 18px; background: radial-gradient(circle at 30% 30%, #e8e2bf, #a68d60 40%, #42362e 80%); border-radius: 50%; }
.solar-system__fallback b { position: absolute; top: 50%; left: 50%; display: grid; place-items: center; width: 100px; height: 100px; transform: translate(-50%, -50%); color: transparent; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff5c9, #ffc66c 45%, #c66622); box-shadow: 0 0 40px #eaaa4655, 0 0 100px #ee981322; }
.solar-system.is-ready .solar-system__fallback { display: none; }
.solar-system__legend { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); padding: 0 24px !important; border-top: 1px solid var(--solar-line); }
.solar-system__legend li { min-width: 0; border-bottom: 1px solid var(--solar-line); }
.solar-system__legend button { display: flex; align-items: center; gap: 9px; width: 100%; min-height: 55px; padding: 12px 10px; border: 0; color: #d3dee5; background: transparent; font-size: 14px; font-weight: 400; text-align: left; cursor: pointer; transition: color 180ms, background 180ms; }
.solar-system__legend button span { color: #8cabb9; font-size: 11px; font-variant-numeric: tabular-nums; }
.solar-system__legend button:hover, .solar-system__legend button[aria-pressed="true"] { color: #a9f9e7; background: #1b353b; }
.solar-system__legend button:disabled { cursor: default; opacity: 1; }
.solar-system__detail { display: grid; grid-template-columns: 180px 1fr; align-items: baseline; gap: 24px; min-height: 88px; padding: 24px 34px; }
.solar-system__detail strong { color: #8cf4e1; font-family: var(--home-display); font-size: 18px; font-weight: 600; }
.solar-system__detail p { max-width: 860px; color: #c2d0d9; font-size: 15px; line-height: 1.6; }
.solar-system__callout[hidden] { display: none; }
.solar-system__callout { position: relative; z-index: 5; padding: 0 22px 20px; margin: 0 18px 20px; background: #101e26; border-radius: 3px; }
.solar-system__callout-head { display: flex; align-items: center; gap: 10px; min-height: 54px; padding-right: 38px; }
.solar-system__callout-head > span { color: #8cf4e1; font-size: 12px; font-variant-numeric: tabular-nums; }
.solar-system__callout-head h4 { color: #f1f8f8; font-family: var(--home-display); font-size: 20px; font-weight: 600; letter-spacing: -.025em; line-height: 1.2; }
.solar-system__callout-head button { position: absolute; top: 8px; right: 7px; width: 36px; height: 36px; padding: 0; color: #b9ccd2; background: transparent; border: 0; font-size: 26px; line-height: 1; cursor: pointer; }
.solar-system__callout-head button:hover { color: #8cf4e1; background: #20383f; }
.solar-system__callout-rule { height: 2px; background: #8cf4e1; transform-origin: left; }
.solar-system__services { display: grid; gap: 11px; margin: 16px 0 0 !important; padding: 0 !important; list-style: none; }
.solar-system__services li { position: relative; padding-left: 15px; color: #e0ecef; font-size: 15px; line-height: 1.4; }
.solar-system__services li::before { content: ''; position: absolute; top: .62em; left: 0; width: 5px; height: 2px; background: #8cf4e1; }
.solar-system__connector { display: none; position: absolute; inset: 0; z-index: 6; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.solar-system__connector path { fill: none; stroke: #8cf4e1; stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.solar-system__connector circle { fill: #8cf4e1; stroke: #13272d; stroke-width: 2; }
.is-callout-opening .solar-system__connector path { animation: solar-line-draw 1.4s cubic-bezier(.22, .65, .3, 1) both; }
.is-callout-opening .solar-system__callout-rule { animation: solar-rule-draw 1.4s cubic-bezier(.22, .65, .3, 1) both; }
.is-callout-opening .solar-system__services { animation: solar-services-in .4s .2s both; }
@keyframes solar-line-draw { from { stroke-dasharray: 1; stroke-dashoffset: 1; } to { stroke-dasharray: 1; stroke-dashoffset: 0; } }
@keyframes solar-rule-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes solar-services-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
@media (min-width: 921px) {
  .solar-system.is-ready .solar-system__callout { position: absolute; left: var(--callout-x, 24px); top: var(--callout-y, 100px); width: var(--callout-width, 340px); margin: 0; padding: 0 18px 20px; box-shadow: 0 12px 40px #06101555; }
  .solar-system.is-ready[data-callout] .solar-system__connector { display: block; }
  .solar-system.is-ready .solar-system__callout-rule { visibility: hidden; }
  .solar-system[data-callout] .solar-label:not(.is-active) { opacity: .65; }
  .solar-system[data-callout] .solar-label:hover { opacity: 1; }
}
@media (max-width: 920px) {
  .solar-intro { display: block; margin-top: 52px; }
  .solar-intro > p { max-width: 100%; margin-top: 14px; }
  .solar-system__legend { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .solar-system__detail { grid-template-columns: 140px 1fr; }
  .solar-system__callout { min-height: 280px; }
}
@media (max-width: 600px) {
  .solar-system__toolbar { align-items: flex-start; flex-direction: column; gap: 12px; min-height: 106px; padding: 18px; }
  .solar-system__controls { width: 100%; }
  .solar-system__controls button { flex: 1; }
  .solar-system__stage { height: 340px; }
  .solar-label { justify-content: center; width: 24px; height: 24px; padding: 0; border-radius: 50%; }
  .solar-label span { display: none; }
  .solar-label b { color: #edf4f7; font-size: 11px; }
  .solar-system__sun-label { font-size: 22px; }
  .solar-system__sun-label small { display: none; }
  .solar-system__hint { bottom: 12px; font-size: 11px; }
  .solar-system__callout { min-height: 300px; margin: 0 10px 16px; padding: 0 14px 18px; }
  .solar-system__callout-head h4 { font-size: 19px; }
  .solar-system__services li { font-size: 14px; }
  .solar-system__legend { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 0 10px !important; }
  .solar-system__legend button { gap: 5px; min-height: 50px; padding: 10px 4px; font-size: 14px; }
  .solar-system__detail { display: block; min-height: 130px; padding: 20px 18px 24px; }
  .solar-system__detail p { margin-top: 8px; font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) { .solar-system * { transition: none !important; animation: none !important; } }
@media print { .solar-system__canvas, .solar-system__controls, .solar-system__labels, .solar-system__hint { display: none !important; } .solar-system.is-ready .solar-system__fallback { display: block; } }
