/* The opening scene connects audience, product, color and motion. */
.hero { --world-color: #3678e6; --world-secondary: #a172df; --world-rgb: 54,120,230; --world-scroll: 0; }
.hero-inner { z-index: 2; }
.hero-copy { padding-bottom: 18px; }
.world-wash { position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(ellipse at 24% 48%, rgba(var(--world-rgb),.11), transparent 49%); transition: background 1s; }
#hero-click-ripple { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; }
.hero h1 { margin-top: 20px; font-size: clamp(54px,5.6vw,83px); }
.hero h1 > span { display: inline-block; }
.hero-description { min-height: 101px; margin-top: 15px; }
.hero .gradient-text { background-image: linear-gradient(110deg, var(--world-secondary), var(--world-color) 68%, #159aaa); }
.world-selector { margin-top: 23px; }
.world-selector-label { display: block; font-size: 12px; color: #637c9e; margin-bottom: 9px; }
.world-options { display: inline-flex; align-items: center; gap: 5px; padding: 5px; background: #ffffffa1; border: 1px solid #dbe7f482; border-radius: 40px; box-shadow: 0 7px 25px #496da008; }
.world-options button { display: inline-flex; align-items: center; gap: 7px; min-height: 42px; padding: 8px 14px; color: #60799c; border-radius: 30px; font-size: 13px; white-space: nowrap; transition: color .25s, background .25s, box-shadow .25s; }
.world-options button > span { font: 19px/1 Arial; color: #7192bf; }
.world-options button:hover { color: var(--world-color); background: #eff5ff; }
.world-options button.selected { background: var(--world-color); color: #fff; box-shadow: 0 5px 16px rgba(var(--world-rgb),.24); }
.world-options button.selected > span { color: #fff; }
.hero-actions { margin-top: 24px; }
.hero-footnote { margin-top: 22px; }
.hero .button.primary { background: linear-gradient(115deg,var(--world-color),var(--world-secondary)); box-shadow: 0 12px 30px rgba(var(--world-rgb),.21); }
.universe { isolation: isolate; transform-origin: 50% 60%; }
.universe canvas { z-index: 0; }
.orbital-center { z-index: 1; width: 148px; height: 110px; justify-content: center; border-radius: 50%; background: radial-gradient(ellipse, #ffffff87, transparent 70%); }
.orbital-center > span { color: var(--world-color); transition: color .6s; }
.orbit-product { position: absolute; z-index: 3; text-align: right; direction: rtl; border: 1px solid #ffffffed; background: linear-gradient(125deg,#ffffffec,#ffffffe0); backdrop-filter: blur(18px); box-shadow: 0 15px 45px #44659b18, inset 0 0 0 1px #93b3dd12; border-radius: 19px; transition: box-shadow .3s, border-color .3s; overflow: hidden; }
.orbit-product::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(120deg,transparent 30%,#fff9 45%,transparent 60%); transform: translateX(120%); transition: transform .9s; }
.orbit-product:hover::after { transform: translateX(-120%); }
.orbit-product:hover { border-color: rgba(var(--world-rgb),.23); box-shadow: 0 22px 45px rgba(var(--world-rgb),.18); }
.orbit-product-main { top: 18%; left: -1%; width: 207px; padding: 15px 17px 12px; transform: translate(calc(var(--px)*-13px),calc(var(--py)*-13px + var(--world-scroll)*-24px)) rotate(-4deg); }
.orbit-product-eyebrow { color: #748bad; font-size: 11px; display: block; }
.orbit-product-title { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.orbit-product-title strong { color: #355d8b; font-size: 14px; line-height: 1.8; }
.orbit-product-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; border: 1px solid #fff; background: linear-gradient(145deg,#e9f3ff,#f6edff); color: var(--world-color); font: 600 13px Arial; flex-shrink: 0; }
.orbit-product-link { display: flex; align-items: center; justify-content: space-between; margin-top: 13px; padding-top: 9px; border-top: 1px solid #759bcc1c; font-size: 11px; color: var(--world-color); }
.orbit-product-link b { font: 19px Arial; }
.orbit-product-secondary { bottom: 20%; right: -1%; display: flex; align-items: center; gap: 12px; padding: 14px 18px; min-width: 181px; transform: translate(calc(var(--px)*-20px),calc(var(--py)*-20px + var(--world-scroll)*20px)) rotate(4deg); }
.orbit-product-secondary small { display: block; color: #7f90ab; font-size: 10px; }
.orbit-product-secondary strong { display: block; font-size: 14px; font-weight: 600; color: #465d88; }
.orbit-secondary-icon { width: 34px; height: 34px; display: grid; place-items: center; background: #f1edff; border: 1px solid #fff; border-radius: 11px; color: #9a77d4; font: 20px Arial; }
.orbital-coordinate { top: 8%; right: 7%; color: #7d91b2; }
.orbit-control { z-index: 3; }
.orbit-dot { position: absolute; width: 12px; height: 12px; border: 3px solid #fff; border-radius: 50%; pointer-events: none; box-shadow: 0 4px 15px #658cbd36; z-index: 2; }
.orbit-dot-one { left: 15%; bottom: 22%; background: #e6a68c; animation: satellite-drift 6s ease-in-out infinite alternate; }
.orbit-dot-two { right: 14%; top: 19%; width: 9px; height: 9px; background: var(--world-color); animation: satellite-drift 8s ease-in-out infinite alternate-reverse; }
@keyframes satellite-drift { to { transform: translate(9px,-13px); } }
.world-chapters { direction: ltr; display: flex; align-items: center; gap: 12px; }
.world-chapters > span { font: 10px Arial; color: #9aacc5; transition: color .4s; }
.world-chapters > span.current { color: var(--world-color); }
.world-chapters i { width: 38px; height: 1px; background: #97b0d23b; }
.hero-bottom-signature { font-size: 9px !important; }
.hero-world-changing .world-wash { opacity: .7; }
.motion-off #hero-click-ripple { display: none; }

/* An interactive, scroll-led map of the business. Text stays in the CMS. */
.connection-scene { height: 560px; isolation: isolate; --scene-x: 0; --scene-y: 0; --scene-accent: #5084de; }
.connection-scene::before, .connection-scene::after { top: 46%; width: 87%; height: 55%; aspect-ratio: auto; border: 1px solid #79a6df22; transform: translate(-50%,-50%) rotate(-24deg); background: radial-gradient(ellipse,#d7eaff18,transparent 70%); box-shadow: 0 0 55px #b7d9ff18; z-index: -1; }
.connection-scene::after { width: 72%; height: 59%; transform: translate(-50%,-50%) rotate(28deg); border-color: #b4a4e52b; }
.connection-scene canvas { pointer-events: none; }
.connection-core-base { position: absolute; left: 50%; top: 46%; width: 132px; height: 132px; transform: translate(calc(-50% + var(--scene-x)*8px),calc(-50% + var(--scene-y)*6px)); pointer-events: none; }
.connection-core-base i { position: absolute; inset: 0; border: 1px solid #fff; border-radius: 38px; background: linear-gradient(145deg,#ffffffc9,#cde3ff6e); box-shadow: 0 20px 35px #5c87bb20; transform: translateY(18px) rotate(-14deg); }
.connection-core-base i:nth-child(2) { inset: 6px; transform: translateY(8px) rotate(12deg); background: linear-gradient(145deg,#e4faff99,#e1dbffb0); }
.connection-core-base i:nth-child(3) { inset: -10px; transform: rotate(45deg); border: 1px solid #a7c8fb42; border-radius: 46px; background: transparent; box-shadow: none; }
.connection-hub { top: 46%; width: 116px; height: 116px; border-radius: 34px; transform: translate(calc(-50% + var(--scene-x)*8px),calc(-50% + var(--scene-y)*6px)); background: radial-gradient(circle at 25% 10%,#9adbff85,transparent 50%),linear-gradient(145deg,#389ce7,#5279de 52%,#8074d9); border: 1px solid #ffffffda; box-shadow: inset 0 1px 1px #fff9,inset 0 -8px 18px #234abb20,0 18px 40px #4f82cc40; cursor: pointer; transition: box-shadow .3s; }
.connection-hub::before { content: ''; position: absolute; inset: 7px; border: 1px solid #ffffff30; border-radius: 27px; pointer-events: none; }
.connection-hub::after { content: ''; position: absolute; inset: -7px; border-radius: 41px; border: 1px solid #78b6ec50; pointer-events: none; }
.connection-hub > span { color: #fff; font-size: 36px; letter-spacing: -2px; text-shadow: 0 2px 18px #fff4; }
.connection-hub small { color: #f2faff; font-size: 10px; }
.connection-hub:hover { box-shadow: inset 0 1px 1px #fff9,0 18px 48px #4f82cc60,0 0 0 6px #fff9; }
.connection-scene .connection-node { --node-color: #5484d9; --node-rgb: 84,132,217; gap: 10px; min-height: 57px; min-width: 124px; padding: 10px 13px; background: linear-gradient(135deg,#fffffffa,#f8fcffef); border: 1px solid #fff; border-radius: 18px; box-shadow: 0 9px 25px #537bab12,0 1px 2px #5e87bc12; color: #3c5578; font-weight: 600; transition: border-color .25s,box-shadow .25s,background .25s; will-change: transform; }
.connection-node[data-node="1"] { --node-color: #8b72d0; --node-rgb: 139,114,208; }
.connection-node[data-node="2"] { --node-color: #39a497; --node-rgb: 57,164,151; }
.connection-node[data-node="3"] { --node-color: #627ed0; --node-rgb: 98,126,208; }
.connection-node[data-node="4"] { --node-color: #c58b56; --node-rgb: 197,139,86; }
.connection-node[data-node="5"] { --node-color: #45a3b5; --node-rgb: 69,163,181; }
.connection-scene .connection-node > .connection-icon { width: 31px; height: 31px; flex-shrink: 0; display: grid; place-items: center; color: var(--node-color); border-radius: 10px; background: rgba(var(--node-rgb),.08); }
.connection-icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.connection-scene .connection-node > .connection-label { color: inherit; font: inherit; }
.connection-node > i { position: absolute; width: 5px; height: 5px; border-radius: 50%; left: 8px; top: 8px; background: var(--node-color); opacity: .32; transition: opacity .25s; }
.connection-scene .connection-node:hover, .connection-scene .connection-node.is-selected, .connection-scene .connection-node.is-signaled { border-color: rgba(var(--node-rgb),.45); background: #fff; box-shadow: 0 12px 32px rgba(var(--node-rgb),.18),0 0 0 4px rgba(var(--node-rgb),.06); color: var(--node-color); }
.connection-node:is(.is-selected,.is-signaled) > i { opacity: 1; box-shadow: 0 0 7px var(--node-color); }
.connection-scene button:focus-visible { outline: 2px solid var(--node-color,#5484d9); outline-offset: 5px; }
.connection-readout { position: absolute; bottom: 57px; left: 50%; transform: translateX(-50%); direction: rtl; display: flex; align-items: center; gap: 10px; width: max-content; max-width: 94%; padding: 11px 16px; border: 1px solid #ffffffed; border-radius: 30px; background: #ffffffaa; box-shadow: 0 8px 28px #7796bc0b; color: #54759c; }
.connection-readout strong { font-size: 12px; font-weight: 600; }
.connection-state-dot { width: 6px; height: 6px; background: var(--scene-accent); border-radius: 50%; box-shadow: 0 0 0 4px color-mix(in srgb,var(--scene-accent) 9%,transparent); flex-shrink: 0; }
.connection-stage { font: 9px Arial,sans-serif; letter-spacing: 1px; border-right: 1px solid #d7e3ef; padding-right: 10px; color: #93a5bb; }
.connection-hint { position: absolute; bottom: 23px; width: 100%; padding-inline: 8px; text-align: center; direction: rtl; color: #7b91ad; font-size: 11px; }
.connection-scene .scene-caption { top: 13px; bottom: auto; color: #7e9abb; font-size: 8px; letter-spacing: 2.2px; }
.connection-scene .scene-progress { bottom: 6px; left: 37%; width: 26%; height: 2px; border-radius: 2px; overflow: hidden; background: #dbe6f4; }
.connection-scene .scene-progress span { background: linear-gradient(90deg,#63b6d8,#7582d5); }
.story-step { position: relative; }
.story-step::after { content: ''; position: absolute; right: 17px; top: 45px; width: 1px; height: 12px; background: #b7cfee; opacity: .4; }
.story-step:last-child::after { display: none; }
@media (min-width:641px) and (max-width:1100px) {
  .connection-scene { height: 500px; }
  .connection-scene .connection-node { min-width: 101px; min-height: 49px; padding: 8px 10px; gap: 7px; font-size: 11px; border-radius: 14px; }
  .connection-scene .connection-node > .connection-icon { width: 25px; height: 25px; }
  .connection-icon svg { width: 19px; height: 19px; }
  .connection-hub { width: 91px; height: 91px; border-radius: 28px; }
  .connection-hub > span { font-size: 29px; }
  .connection-hub::before { border-radius: 22px; }
  .connection-core-base { width: 102px; height: 102px; }
}
@media (max-width:640px) {
  .connection-scene { height: 355px; max-width: 410px; margin-top: 16px; }
  .connection-scene .connection-node { min-width: 94px; min-height: 44px; padding: 7px 9px; gap: 6px; font-size: 10px; border-radius: 13px; }
  .connection-scene .connection-node > .connection-icon { width: 23px; height: 23px; border-radius: 7px; }
  .connection-icon svg { width: 17px; height: 17px; }
  .connection-hub { width: 77px; height: 77px; border-radius: 23px; }
  .connection-hub::before { inset: 5px; border-radius: 18px; }
  .connection-hub::after { inset: -5px; border-radius: 28px; }
  .connection-hub > span { font-size: 26px; }
  .connection-hub small { font-size: 8px; }
  .connection-core-base { width: 87px; height: 87px; }
  .connection-core-base i { border-radius: 26px; transform: translateY(11px) rotate(-14deg); }
  .connection-core-base i:nth-child(3) { border-radius: 33px; inset: -5px; }
  .connection-readout { bottom: 38px; padding: 7px 11px; gap: 8px; }
  .connection-readout strong { font-size: 10px; }
  .connection-hint { bottom: 12px; font-size: 10px; }
  .connection-scene .scene-caption { top: 0; font-size: 6px; }
  .connection-scene .scene-progress { bottom: 0; }
  .story-step::after { display: none; }
}
@media (max-width:360px) {
  .connection-scene .connection-node { min-width: 84px; padding-inline: 7px; gap: 5px; font-size: 9px; }
  .connection-scene .connection-node > .connection-icon { width: 20px; height: 20px; }
  .connection-icon svg { width: 16px; height: 16px; }
  .connection-hub { width: 66px; height: 66px; border-radius: 21px; }
  .connection-hub > span { font-size: 24px; }
  .connection-hub small { font-size: 7px; }
  .connection-core-base { width: 76px; height: 76px; }
  .connection-readout { gap: 7px; }
  .connection-hint { font-size: 9px; }
}
@media (prefers-reduced-motion:reduce) { .connection-scene *, .connection-scene *::after { transition: none !important; } }
.motion-off .connection-scene *, .motion-off .connection-scene *::after { transition: none !important; }
@media(max-width:1100px) {
  .hero { min-height: 880px; }
  .hero h1 { font-size: 61px; }
  .world-options { gap: 2px; }
  .world-options button { padding-inline: 11px; font-size: 12px; }
  .orbit-product-main { width: 186px; top: 15%; left: -3%; padding: 12px 14px; }
  .orbit-product-secondary { min-width: 165px; padding: 11px 14px; right: -2%; bottom: 16%; }
  .orbit-product-title strong,.orbit-product-secondary strong { font-size: 12px; }
  .orbit-product-eyebrow { font-size: 10px; }
}
@media(max-width:820px) {
  .hero h1 { font-size: 51px; }
  .hero-description { min-height: 112px; }
  .world-options button { font-size: 11px; padding-inline: 9px; gap: 5px; }
  .world-options button > span { font-size: 16px; }
  .orbit-product-main { width: 157px; padding: 11px; }
  .orbit-product-icon { width: 30px; height: 30px; font-size: 11px; }
  .orbit-product-title { gap: 7px; }
  .orbit-product-secondary { padding: 10px 12px; gap: 8px; min-width: 144px; }
  .orbit-secondary-icon { width: 28px; height: 28px; }
}
@media(max-width:640px) {

  .hero { min-height: 0; padding-top: 109px; }
  .hero h1 { font-size: clamp(44px,12vw,70px); margin-top: 19px; }
  .hero-description { min-height: 85px; margin-top: 12px; font-size: 14px; }
  .hero-copy { padding-bottom: 0; }
  .world-selector { margin-top: 13px; }
  .world-selector-label { font-size: 11px; margin-bottom: 7px; }
  .world-options { width: 100%; justify-content: space-between; gap: 2px; padding: 4px; }
  .world-options button { padding: 7px 12px; font-size: 12px; min-height: 40px; flex: 1; justify-content: center; }
  .world-options button > span { font-size: 17px; }
  .hero-actions { margin-top: 19px; gap: 20px; }
  .hero-actions .button { min-height: 51px; font-size: 13px; }
  .hero-actions .text-link { font-size: 12px; }
  .universe { height: 390px; margin-top: 9px; }
  .orbital-center { width: 120px; }
  .orbital-center > span { font-size: 37px; }
  .orbit-product-main { left: 0; top: 14%; width: 145px; padding: 10px; border-radius: 14px; }
  .orbit-product-title { margin-top: 6px; }
  .orbit-product-title strong { font-size: 11px; }
  .orbit-product-eyebrow { font-size: 9px; }
  .orbit-product-link { margin-top: 8px; padding-top: 6px; font-size: 10px; }
  .orbit-product-secondary { right: 0; bottom: 20%; min-width: 139px; padding: 10px 11px; border-radius: 13px; gap: 8px; }
  .orbit-product-secondary strong { font-size: 11px; }
  .orbit-product-secondary small { font-size: 9px; }
  .orbit-secondary-icon { width: 26px; height: 26px; font-size: 17px; }
  .orbit-dot-one { left: 12%; bottom: 23%; }
  .orbital-coordinate { top: 8%; right: 2%; font-size: 7px; }
  .orbit-control { bottom: 4%; }
  .world-chapters { gap: 9px; }
  .world-chapters i { width: 25px; }
  .hero-bottom-signature { display: none; }
}
@media(max-width:370px) {
  .hero h1 { font-size: 42px; }
  .hero-description { min-height: 98px; }
  .world-options button { padding-inline: 7px; font-size: 11px; }
  .hero-actions { gap: 12px; }
  .hero-actions .button { padding-inline: 13px; gap: 17px; font-size: 12px; }
  .hero-actions .text-link { gap: 7px; font-size: 11px; }
  .universe { height: 355px; }
  .orbit-product-main { width: 135px; }
  .orbit-product-secondary { min-width: 129px; }
}
@media(prefers-reduced-motion:reduce) { #hero-click-ripple { display: none; } .orbit-dot { animation: none; } }

/* Published systems orbit their flagship ERP in the opening scene. */
.hero-inner { grid-template-columns: minmax(0,.92fr) minmax(0,1.16fr); gap: 28px; }
.universe.ecosystem-scene { height: 650px; width: 100%; --px: 0; --py: 0; }
.ecosystem-kicker { position: absolute; top: 13px; inset-inline: 0; display: flex; justify-content: center; align-items: center; gap: 14px; color: #526f97; font-size: 11px; font-weight: 600; direction: rtl; }
.ecosystem-kicker i { width: 25px; height: 1px; background: linear-gradient(90deg,transparent,#8fadd6); }
.ecosystem-kicker i:last-child { transform: rotate(180deg); }
.ecosystem-base { position: absolute; z-index: 1; left: 50%; top: 45%; width: 168px; height: 172px; transform: translate(calc(-50% + var(--px)*5px),calc(-50% + var(--py)*4px)); pointer-events: none; }
.ecosystem-base i { position: absolute; inset: 0; border: 1px solid #ffffffed; border-radius: 43px; background: linear-gradient(145deg,#d2f5ff70,#e2e0ff55); transform: translateY(11px) rotate(-11deg); box-shadow: 0 22px 34px #4579ba17; }
.ecosystem-base i:nth-child(2) { inset: -9px; transform: rotate(13deg); border-color: #73a8e62d; background: transparent; box-shadow: none; }
.ecosystem-base i:nth-child(3) { inset: -24px; border-radius: 50%; transform: rotate(-20deg); border-color: #90baef2b; background: transparent; box-shadow: 0 0 45px #87b9fa15; }
.ecosystem-scene .ecosystem-core {
  pointer-events: auto; z-index: 4; top: 45%; width: 150px; height: 154px; padding: 14px 10px 12px;
  justify-content: center; gap: 7px; border-radius: 35px; direction: rtl; color: #fff; text-shadow: none;
  transform: translate(calc(-50% + var(--px)*5px),calc(-50% + var(--py)*4px));
  background: radial-gradient(circle at 24% 5%,#a8eaff85,transparent 48%),linear-gradient(145deg,#389de3,#4c7cdd 53%,#8c79dc);
  border: 1px solid #ffffffed; box-shadow: inset 0 1px 2px #ffffffbd,inset 0 -10px 22px #4257a528,0 18px 50px #4c83d343;
  transition: box-shadow .35s;
}
.ecosystem-core::before { content: ''; position: absolute; inset: 6px; border: 1px solid #ffffff40; border-radius: 29px; pointer-events: none; }
.ecosystem-core::after { content: ''; position: absolute; inset: -7px; border: 1px solid #ffffffbd; border-radius: 42px; pointer-events: none; }
.ecosystem-core .ecosystem-crown { position: absolute; top: -21px; left: calc(50% - 17px); width: 34px; height: 26px; filter: drop-shadow(0 4px 7px #bd965840); transition: transform .3s; }
.ecosystem-core > .ecosystem-core-art { width: 82px; height: 58px; border-radius: 16px; padding: 2px; background: #fff; box-shadow: 0 5px 15px #19489420; overflow: hidden; font: inherit; letter-spacing: 0; }
.ecosystem-core-art img { width: 100%; height: 100%; object-fit: cover; border-radius: 14px; }
.ecosystem-core > strong { font-size: 17px; font-weight: 800; line-height: 1.7; color: #fff; }
.ecosystem-scene .ecosystem-core > small { color: #f3f8ff; font-family: inherit; font-size: 9px; letter-spacing: 0; margin: 0; font-weight: 600; }
.ecosystem-core > .ecosystem-core-arrow { position: absolute; bottom: 10px; left: 14px; font: 13px/1 Arial,sans-serif; letter-spacing: 0; color: #e4f4ff; opacity: .85; }
.ecosystem-core:hover,.ecosystem-core.is-signaled { box-shadow: inset 0 1px 2px #fff,0 22px 54px #4c83d36b,0 0 0 12px #fff5; }
.ecosystem-node { position: absolute; left: 0; top: 0; z-index: 3; width: clamp(108px,28%,146px); padding: 0; direction: rtl; text-align: right; will-change: transform; }
.ecosystem-node-face { min-height: 72px; display: flex; align-items: center; gap: 7px; padding: 10px 10px; border: 1px solid #ffffffed; border-radius: 19px; background: linear-gradient(125deg,#fffffff5,#f8fcfff5); box-shadow: 0 8px 28px #6288bc12,inset 0 0 0 1px rgba(var(--node-rgb),.08); transition: background .25s,box-shadow .25s,border-color .25s,transform .25s; }
.ecosystem-node-image { flex: 0 0 32px; height: 36px; border-radius: 10px; background: rgba(var(--node-rgb),.09); overflow: hidden; border: 1px solid #fff; }
.ecosystem-node-image img { width: 100%; height: 100%; object-fit: cover; }
.ecosystem-node strong { font-size: 11px; line-height: 1.75; font-weight: 750; color: #345475; overflow-wrap: normal; }
.ecosystem-node-face > i { position: absolute; top: 7px; left: 8px; width: 4px; height: 4px; background: var(--node-color); border-radius: 50%; opacity: .45; }
.ecosystem-node-arrow { display: none; }
.ecosystem-node.is-world .ecosystem-node-face { border-color: rgba(var(--node-rgb),.24); }
.ecosystem-node.is-active .ecosystem-node-face,.ecosystem-node.is-signaled .ecosystem-node-face,.ecosystem-node:hover .ecosystem-node-face,.ecosystem-node:focus-visible .ecosystem-node-face { border-color: rgba(var(--node-rgb),.65); background: #fff; box-shadow: 0 11px 30px rgba(var(--node-rgb),.19),0 0 0 4px rgba(var(--node-rgb),.065); }
.ecosystem-node:is(.is-active,.is-signaled) .ecosystem-node-face > i { opacity: 1; box-shadow: 0 0 7px var(--node-color); }
.ecosystem-node:hover .ecosystem-node-face { transform: translateY(-3px); }
.ecosystem-scene button:focus-visible { outline: 2px solid #477fcb; outline-offset: 5px; }
.ecosystem-console { position: absolute; z-index: 5; bottom: 44px; left: 50%; transform: translateX(-50%); width: min(290px,90%); min-height: 43px; display: flex; align-items: center; justify-content: center; direction: rtl; gap: 10px; padding: 9px 14px; border: 1px solid #fffffff5; border-radius: 30px; color: #456891; background: #ffffffbf; box-shadow: 0 7px 25px #7096c20a; transition: box-shadow .25s,background .25s; }
.ecosystem-console:hover { background: #fff; box-shadow: 0 8px 28px #7096c220; }
.ecosystem-signal { width: 6px; height: 6px; background: var(--world-color); box-shadow: 0 0 0 4px rgba(var(--world-rgb),.08); flex-shrink: 0; border-radius: 50%; }
#ecosystem-readout { font-size: 11px; font-weight: 650; flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ecosystem-count { color: #6e87a8; font: 10px/1 Arial,sans-serif; border-right: 1px solid #cad9ee; padding-right: 10px; }
.ecosystem-console svg { width: 17px; height: 17px; flex-shrink: 0; color: #6e8fce; }
.ecosystem-hint { position: absolute; bottom: 5px; inset-inline: 5%; text-align: center; direction: rtl; font-size: 10px; line-height: 1.8; color: #637e9d; }
.universe.ecosystem-scene.ecosystem-catalog { height: auto; min-height: 680px; padding-top: 300px; }
.ecosystem-catalog .ecosystem-core,.ecosystem-catalog .ecosystem-base { top: 145px; }
.ecosystem-catalog .ecosystem-nodes { position: relative; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; padding: 0 10px; }
.ecosystem-catalog .ecosystem-node { position: relative; width: auto; transform: none !important; }
.ecosystem-catalog .ecosystem-console { position: relative; bottom: auto; margin-top: 25px; }
.ecosystem-catalog .ecosystem-hint { position: relative; inset: auto; margin-top: 12px; }
.ecosystem-core[hidden] { display: none; }
@media(min-width:1350px) {
  .hero-inner { gap: 42px; }
  .universe.ecosystem-scene { height: 690px; }
  .ecosystem-node { width: 158px; }
  .ecosystem-node-face { min-height: 78px; gap: 10px; }
  .ecosystem-node strong { font-size: 12px; }
}
@media(max-width:920px) {
  .hero-inner { display: flex; flex-direction: column; gap: 20px; }
  .hero-copy { width: 100%; max-width: 660px; margin-inline: auto; }
  .universe.ecosystem-scene { max-width: 600px; margin-inline: auto; align-self: center; }
}
@media(max-width:640px) {
  .universe.ecosystem-scene { height: 620px; margin-top: 14px; }
  .ecosystem-kicker { top: 9px; font-size: 10px; gap: 9px; }
  .ecosystem-base { width: 130px; height: 138px; }
  .ecosystem-base i { border-radius: 32px; }
  .ecosystem-base i:nth-child(2) { inset: -7px; }
  .ecosystem-base i:nth-child(3) { inset: -15px; }
  .ecosystem-scene .ecosystem-core { width: 116px; height: 126px; border-radius: 29px; padding: 12px 8px 9px; gap: 5px; }
  .ecosystem-core::before { inset: 5px; border-radius: 24px; }
  .ecosystem-core::after { inset: -5px; border-radius: 34px; }
  .ecosystem-core .ecosystem-crown { width: 28px; height: 23px; top: -19px; left: calc(50% - 14px); }
  .ecosystem-core > .ecosystem-core-art { width: 68px; height: 47px; border-radius: 13px; }
  .ecosystem-core > strong { font-size: 13px; }
  .ecosystem-scene .ecosystem-core > small { font-size: 8px; }
  .ecosystem-core > .ecosystem-core-arrow { left: 10px; bottom: 9px; font-size: 10px; }
  .ecosystem-node { width: clamp(82px,30%,116px); text-align: center; }
  .ecosystem-node-face { flex-direction: column; justify-content: center; min-height: 75px; gap: 3px; padding: 7px 5px 8px; border-radius: 16px; }
  .ecosystem-node-image { flex: 0 0 27px; width: 36px; height: 27px; border-radius: 8px; }
  .ecosystem-node strong { font-size: 10px; line-height: 1.6; }
  .ecosystem-console { bottom: 44px; min-height: 40px; padding: 8px 12px; gap: 8px; }
  #ecosystem-readout { font-size: 10px; }
  .ecosystem-hint { bottom: 4px; font-size: 9px; }
  .ecosystem-catalog .ecosystem-nodes { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media(max-width:360px) {
  .ecosystem-scene .ecosystem-core { width: 104px; height: 118px; }
  .ecosystem-core > strong { font-size: 12px; }
  .ecosystem-core > .ecosystem-core-art { width: 62px; height: 41px; }
  .ecosystem-base { width: 116px; height: 128px; }
  .ecosystem-node strong { font-size: 9px; }
}
.motion-off .ecosystem-scene * { transition: none !important; }
@media(prefers-reduced-motion:reduce) { .ecosystem-scene * { transition: none !important; } }

/* Original product marks sit inside clear glass frames without cropping. */
.ecosystem-node { width: clamp(108px,31%,154px); }
.ecosystem-node.has-product-logo .ecosystem-node-image { flex-basis: 40px; height: 42px; padding: 4px; background: linear-gradient(145deg,#fff,rgba(var(--node-rgb),.055)); border-color: rgba(var(--node-rgb),.12); box-shadow: inset 0 1px 2px #fff; }
.ecosystem-node.has-product-logo .ecosystem-node-image img,
.ecosystem-core.has-product-logo .ecosystem-core-art img { object-fit: contain; border-radius: 0; }
.ecosystem-scene .ecosystem-core.has-product-logo { gap: 4px; padding-block: 11px; }
.ecosystem-core.has-product-logo > .ecosystem-core-art { width: 112px; height: 78px; padding: 5px 8px; border: 1px solid #ffffffed; border-radius: 18px; background: #fffffff5; box-shadow: 0 6px 18px #234a831c,inset 0 1px 2px #fff; }
@media(max-width:640px) {
  .ecosystem-node { width: clamp(82px,30%,116px); }
  .ecosystem-node.has-product-logo .ecosystem-node-image { flex-basis: 30px; width: 40px; height: 30px; padding: 2px; border-radius: 8px; }
  .ecosystem-scene .ecosystem-core.has-product-logo { gap: 3px; padding-block: 9px; }
  .ecosystem-core.has-product-logo > .ecosystem-core-art { width: 88px; height: 63px; padding: 4px 6px; border-radius: 14px; }
}
@media(max-width:360px) { .ecosystem-core.has-product-logo > .ecosystem-core-art { width: 80px; height: 57px; } }

.universe.ecosystem-scene.ecosystem-many:not(.ecosystem-catalog) { height: 720px; }
@media(max-width:640px) {
  .universe.ecosystem-scene.ecosystem-many:not(.ecosystem-catalog) { height: 700px; }
  .ecosystem-many .ecosystem-node { width: clamp(74px,26.5%,110px); }
}
@media(max-width:360px) {
  .ecosystem-many .ecosystem-core { width: 98px; height: 118px; }
  .ecosystem-many .ecosystem-base { width: 106px; }
  .ecosystem-many .ecosystem-node strong { font-size: 9px; }
}

/* A suite's children surround their own parent; names stay still and readable. */
.hero:has(.ecosystem-many) { display: block; height: auto; min-height: 0; padding-top: 140px; }
.hero-inner:has(.ecosystem-many) { flex: none; padding-top: 0; grid-template-columns: minmax(280px,.7fr) minmax(0,1.55fr); gap: 24px; }
.hero:has(.ecosystem-many) .hero-bottom { margin-top: 16px; }
.ecosystem-scene .ecosystem-core,.ecosystem-scene .ecosystem-base { top: var(--suite-center,45%); }
.ecosystem-many .ecosystem-node { width: clamp(106px,19%,148px); text-align: center; }
.ecosystem-many .ecosystem-node-face { height: 86px; min-height: 0; flex-direction: column; justify-content: center; padding: 7px 5px; gap: 4px; }
.ecosystem-many .ecosystem-node strong { font-size: 11px; line-height: 1.6; }
.ecosystem-many .ecosystem-node.has-product-logo .ecosystem-node-image { flex: 0 0 36px; width: 48px; height: 36px; padding: 3px; }
.ecosystem-node.logo-icon-window .ecosystem-node-image { position: relative; }
.ecosystem-node.logo-icon-window .ecosystem-node-image img { position: absolute; width: 118px; max-width: none; height: auto; left: 50%; top: 1px; transform: translateX(-50%); }
.ecosystem-compact.ecosystem-many .ecosystem-node { width: min(42%,190px); }
.ecosystem-compact.ecosystem-many .ecosystem-node-face { height: 76px; }
.ecosystem-compact.ecosystem-many .ecosystem-core { width: 146px; height: 150px; }
.ecosystem-compact.ecosystem-many .ecosystem-base { width: 158px; }
.ecosystem-compact.ecosystem-many .ecosystem-core > strong { font-size: 16px; }
.ecosystem-compact.ecosystem-many .ecosystem-core.has-product-logo > .ecosystem-core-art { width: 104px; height: 68px; }
@media(max-width:1240px) {
  .hero-inner:has(.ecosystem-many) { display: flex; flex-direction: column; gap: 16px; }
  .hero-inner:has(.ecosystem-many) .hero-copy { max-width: 740px; width: 100%; margin-inline: auto; }
  .universe.ecosystem-scene.ecosystem-many { max-width: 1000px; margin-inline: auto; }
}
@media(max-width:640px) {
  .hero:has(.ecosystem-many) { padding-top: 112px; }
  .ecosystem-many .ecosystem-kicker { top: 0; }
  .ecosystem-compact.ecosystem-many .ecosystem-node strong { font-size: 11px; }
  .ecosystem-many .ecosystem-console { bottom: 44px; }
  .ecosystem-many .ecosystem-hint { bottom: 0; }
}

/* Large illustrations remain legible in the ERP family nodes. */
.ecosystem-many .ecosystem-node.has-scene-art .ecosystem-node-image { flex: 0 0 43px; width: 68px; height: 43px; padding: 0; border-radius: 10px; border: 1px solid #e5edf8; background: #eff7ff; }
.ecosystem-node.has-scene-art .ecosystem-node-image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ecosystem-compact.ecosystem-many .ecosystem-node.has-scene-art .ecosystem-node-face { height: 82px; padding-block: 6px; gap: 3px; }

/* The crowned flagship lifts out of its glass platform on hover or keyboard focus. */
.ecosystem-scene .ecosystem-core {
  overflow: visible;
  transform-style: preserve-3d;
  transform: translate(calc(-50% + var(--px)*5px),calc(-50% + var(--py)*4px)) perspective(780px) translateY(var(--core-rise,0px)) translateZ(var(--core-depth,0px)) rotateX(calc(var(--core-rest-tilt,0deg) + var(--core-tilt-x,0deg))) rotateY(var(--core-tilt-y,0deg)) scale(var(--core-scale,1));
  transition: transform .65s cubic-bezier(.16,1,.3,1), box-shadow .65s ease;
}
.ecosystem-scene.is-core-lifted .ecosystem-core {
  --core-depth: 195px; --core-rise: -12px; --core-scale: 1.12; --core-rest-tilt: -6deg;
  z-index: 6;
  box-shadow: inset 0 2px 2px #ffffffed,inset 0 -8px 20px #4664bb30,0 35px 45px -12px #235ab662,0 65px 85px -28px #537fc46b,0 0 0 1px #ffffffeb;
}
.ecosystem-core > .ecosystem-core-art,
.ecosystem-core > strong,
.ecosystem-core > small,
.ecosystem-core > .ecosystem-core-arrow,
.ecosystem-core .ecosystem-crown {
  transition: transform .7s cubic-bezier(.16,1,.3,1), filter .5s ease, box-shadow .5s ease;
}
.is-core-lifted .ecosystem-core > .ecosystem-core-art {
  transform: translateZ(30px);
  box-shadow: 0 12px 22px #214f9838,inset 0 1px 2px #fff;
}
.is-core-lifted .ecosystem-core > strong { transform: translateZ(22px); }
.is-core-lifted .ecosystem-core > small { transform: translateZ(15px); }
.is-core-lifted .ecosystem-core > .ecosystem-core-arrow { transform: translateZ(24px) translate(-2px,-2px); }
.is-core-lifted .ecosystem-core .ecosystem-crown {
  transform: translateY(-8px) translateZ(48px) rotate(-7deg) scale(1.16);
  filter: drop-shadow(0 8px 9px #b58a4160) drop-shadow(0 0 8px #ffe4a4a1);
}
.ecosystem-core::before {
  background: radial-gradient(ellipse at var(--core-light-x,50%) var(--core-light-y,30%),#fff8,transparent 62%);
  opacity: 0; transform: translateZ(2px); transition: opacity .5s;
}
.ecosystem-core::after { transition: transform .7s cubic-bezier(.16,1,.3,1),border-color .5s; }
.is-core-lifted .ecosystem-core::before { opacity: .55; }
.is-core-lifted .ecosystem-core::after { transform: translateZ(-20px) scale(1.06); border-color: #fff; }
.ecosystem-base::before {
  content: ''; position: absolute; inset: -55%; border-radius: 50%;
  background: radial-gradient(ellipse,#b6d4ff96 0,#b8dfff54 30%,#e7d5ff38 48%,transparent 70%);
  opacity: 0; transform: scale(.75); transition: opacity .65s,transform .8s cubic-bezier(.16,1,.3,1);
}
.ecosystem-base i { transition: transform .75s cubic-bezier(.16,1,.3,1),box-shadow .65s; }
.is-core-lifted .ecosystem-base::before { opacity: 1; transform: scale(1.2); }
.is-core-lifted .ecosystem-base i:first-child { transform: translateY(28px) rotate(-16deg) scale(1.08); box-shadow: 0 28px 36px #4579ba35; }
.is-core-lifted .ecosystem-base i:nth-child(2) { transform: translateY(9px) rotate(21deg) scale(1.12); }
.is-core-lifted .ecosystem-base i:nth-child(3) { transform: rotate(-32deg) scale(1.2); }
.ecosystem-compact.is-core-lifted .ecosystem-core {
  --core-depth: 65px; --core-rise: 0px; --core-scale: 1.03; --core-rest-tilt: -4deg;
}
.ecosystem-compact.is-core-lifted .ecosystem-core .ecosystem-crown { transform: translateY(-5px) translateZ(25px) rotate(-7deg) scale(1.08); }

/* The suite color follows the editor, including its light and click glow. */
.ecosystem-scene .ecosystem-core{background:radial-gradient(circle at 24% 5%,#ffffff70,transparent 48%),linear-gradient(145deg,color-mix(in srgb,var(--suite-color,#4182e6) 85%,#fff),var(--suite-color,#4182e6) 53%,color-mix(in srgb,var(--suite-color,#4182e6) 70%,#513797));box-shadow:inset 0 1px 2px #ffffffbd,inset 0 -10px 22px #4257a528,0 18px 50px rgba(var(--suite-rgb,65,130,230),.28)}
.ecosystem-scene.is-core-lifted .ecosystem-core,.ecosystem-scene .ecosystem-core.is-signaled{box-shadow:inset 0 1px 2px #fff,0 30px 65px rgba(var(--suite-rgb,65,130,230),.4),0 0 0 12px #fff5}
.ecosystem-scene[hidden]{display:none}