/* Platform map: a connected, readable view of AtomERP business areas. */
.platformhero .systemmap {
  position: relative;
  isolation: isolate;
  grid-template-columns: minmax(0,1fr) minmax(235px,.82fr) minmax(0,1fr);
  gap: 27px;
  max-width: 1120px;
}
.platformhero .systemmap::before {
  content: '';
  position: absolute;
  z-index: -1;
  left: 12%;
  right: 12%;
  top: 50%;
  height: 2px;
  background: linear-gradient(90deg,transparent,#b3c5f2 15%,#839de0 50%,#b3c5f2 85%,transparent);
  opacity: .75;
}
.platformhero .mapcol { min-width: 0; gap: 14px; }
.platformhero .mapnode {
  display: grid;
  grid-template-columns: 46px minmax(0,1fr) 15px;
  align-items: center;
  gap: 14px;
  min-height: 94px;
  padding: 15px 17px;
  border: 1px solid #d5e0f5;
  border-radius: 14px;
  background: rgba(255,255,255,.91);
  box-shadow: 0 10px 25px rgba(42,70,133,.10);
  color: #172750;
  text-decoration: none;
  transition: transform .28s cubic-bezier(.2,.7,.2,1), box-shadow .28s ease, border-color .28s ease, background-color .28s ease;
}
.platformhero .mapnode-icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: linear-gradient(135deg,#6680db,#3f5abb);
  box-shadow: 0 7px 15px rgba(52,79,173,.21);
  transition: transform .28s ease, box-shadow .28s ease;
}
.platformhero .mapnode-icon img { display: block; width: 25px; height: 25px; object-fit: contain; }
.platformhero .mapnode-copy { display: block; min-width: 0; }
.platformhero .mapnode strong { margin: 0; color: #172750; font-size: 14px; line-height: 1.3; }
.platformhero .mapnode small { margin-top: 5px; color: #677899; font-size: 11px; line-height: 1.35; }
.platformhero .mapnode-arrow { align-self: start; color: #6680c5; font-size: 17px; line-height: 1; transition: transform .25s ease; }
.platformhero .mapnode:hover,
.platformhero .mapnode:focus-visible {
  transform: translateY(-5px);
  border-color: #7894dc;
  background: #fff;
  box-shadow: 0 19px 35px rgba(48,81,162,.19);
}
.platformhero .mapnode:is(:hover,:focus-visible) .mapnode-icon { transform: scale(1.08) rotate(-4deg); box-shadow: 0 11px 20px rgba(52,79,173,.3); }
.platformhero .mapnode:is(:hover,:focus-visible) .mapnode-arrow { transform: translate(3px,-3px); }
.platformhero .mapnode:focus-visible { outline: 3px solid #809ae0; outline-offset: 3px; }
.platformhero .mapcenter {
  z-index: 1;
  max-width: 265px;
  background: linear-gradient(135deg,#2845a0 3%,#5368c8 53%,#765eb6 100%);
  background-size: 160% 160%;
  box-shadow: 0 0 0 12px rgba(255,255,255,.56),0 0 0 27px rgba(176,195,240,.23),0 25px 60px rgba(42,65,149,.36);
  text-align: center;
}
.platformhero .mapcenter::before {
  content: '';
  position: absolute;
  inset: -17px;
  border: 1px solid rgba(120,150,225,.44);
  border-radius: 50%;
  pointer-events: none;
}
.platformhero .mapcenter::after {
  content: '';
  position: absolute;
  inset: -25px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 0,#fff 0 5px,#89a9ed 6px 8px,transparent 9px);
  pointer-events: none;
}
.platformhero .mapcenter > * { position: relative; z-index: 1; }
.platformhero .mapcloud {
  display: grid;
  place-items: center;
  width: 53px;
  height: 53px;
  margin: 0 0 14px;
  border: 1px solid rgba(255,255,255,.36);
  border-radius: 15px;
  background: rgba(255,255,255,.16);
  box-shadow: inset 0 1px rgba(255,255,255,.25),0 9px 18px rgba(19,33,97,.16);
}
.platformhero .mapcloud img { display: block; width: 30px; height: 30px; object-fit: contain; }
.platformhero .mapcenter b { font-size: clamp(28px,2.8vw,37px); line-height: 1.1; font-weight: 650; letter-spacing: -.025em; }
.platformhero .mapcenter .mapcenter-subtitle { margin-top: 10px; color: #e8edff; font-size: 12px; }
.cloudart {
  border: 1px solid #d9e3f7;
  background: radial-gradient(circle at 50% 30%,#dee8ff,#eef2ff 57%,#f7f8fe);
  box-shadow: inset 0 1px #fff,0 18px 36px rgba(49,73,140,.08);
}
.platformhero .cloudsymbol,
.cloudart .cloudsymbol {
  display: inline-grid;
  place-items: center;
  width: 90px;
  height: 90px;
  padding: 0;
  border-radius: 24px;
  background: linear-gradient(135deg,#385fc7,#7160bb);
  box-shadow: 0 18px 31px rgba(55,80,163,.28);
}
.cloudart .cloudsymbol img { display: block; width: 52px; height: 52px; object-fit: contain; }
.cloudart .devicebar span { transition: transform .25s ease, background-color .25s ease, box-shadow .25s ease; }
.cloudart .devicebar span:hover { transform: translateY(-3px); background: #fff; box-shadow: 0 10px 20px rgba(54,80,158,.12); }

@media (prefers-reduced-motion: no-preference) {
  @keyframes atom-orbit { to { transform: rotate(360deg); } }
  @keyframes atom-cloud-float { 50% { transform: translateY(-5px); } }
  @keyframes atom-halo { 50% { box-shadow: 0 0 0 15px rgba(255,255,255,.62),0 0 0 32px rgba(176,195,240,.28),0 28px 67px rgba(42,65,149,.4); } }
  @keyframes atom-gradient { 50% { background-position: 100% 100%; } }
  .platformhero .mapcenter { animation: atom-halo 4.8s ease-in-out infinite,atom-gradient 9s ease-in-out infinite; }
  .platformhero .mapcenter::after { animation: atom-orbit 18s linear infinite; }
  .platformhero .mapcloud,
  .cloudart .cloudsymbol { animation: atom-cloud-float 4s ease-in-out infinite; }
  html[data-motion-ready] .systemmap.motion-target:not(.motion-visible) .mapnode { opacity: 0; translate: 0 14px; }
  html[data-motion-ready] .systemmap .mapnode { transition: opacity .5s ease, translate .5s ease, transform .28s ease, box-shadow .28s ease, border-color .28s ease; }
  html[data-motion-ready] .systemmap .mapcol:first-child .mapnode:nth-child(2),
  html[data-motion-ready] .systemmap .mapcol:last-child .mapnode:nth-child(2) { transition-delay: .07s; }
  html[data-motion-ready] .systemmap .mapcol:first-child .mapnode:nth-child(3),
  html[data-motion-ready] .systemmap .mapcol:last-child .mapnode:nth-child(3) { transition-delay: .14s; }
}
@media (max-width: 900px) {
  .platformhero .systemmap { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 15px; }
  .platformhero .systemmap::before { display: none; }
  .platformhero .mapcenter { grid-column: 1 / -1; grid-row: 1; max-width: 205px; margin-bottom: 20px; }
  .platformhero .mapnode { min-height: 86px; }
}
@media (max-width: 700px) {
  .platformhero .mapcenter { max-width: 175px; }
  .platformhero .mapcloud { width: 40px; height: 40px; margin-bottom: 8px; border-radius: 11px; }
  .platformhero .mapcloud img { width: 25px; height: 25px; }
  .platformhero .mapcenter b { font-size: 27px; }
  .platformhero .mapnode { grid-template-columns: 35px minmax(0,1fr) 12px; min-height: 78px; gap: 9px; padding: 11px; }
  .platformhero .mapnode-icon { width: 35px; height: 35px; border-radius: 9px; }
  .platformhero .mapnode-icon img { width: 21px; height: 21px; }
  .platformhero .mapnode strong { font-size: 12px; }
  .platformhero .mapnode small { font-size: 10px; }
}
@media (max-width: 520px) {
  .platformhero .systemmap { grid-template-columns: 1fr; gap: 13px; }
  .platformhero .mapcenter { grid-column: 1; margin-bottom: 14px; }
  .platformhero .mapnode { grid-template-columns: 42px minmax(0,1fr) 15px; }
  .platformhero .mapnode-icon { width: 42px; height: 42px; }
  .platformhero .mapnode-icon img { width: 24px; height: 24px; }
  .platformhero .mapnode strong { font-size: 14px; }
  .platformhero .mapnode small { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .platformhero .mapcenter,
  .platformhero .mapcenter::after,
  .platformhero .mapcloud,
  .cloudart .cloudsymbol { animation: none!important; }
  .platformhero .mapnode,
  .platformhero .mapnode-icon,
  .platformhero .mapnode-arrow,
  .cloudart .devicebar span { transition: none!important; }
}