/* Automation page: the approved Development layout with an open process map. */
.automation-page .dev-hero{
  min-height:1020px;
  padding-bottom:205px;
  background:radial-gradient(ellipse at 78% 31%,rgba(13,93,139,.58) 0,rgba(7,49,84,.34) 25%,transparent 47%),linear-gradient(180deg,#04172d 0%,#031326 52%,#010817 100%);
}

.automation-page .dev-hero:before{
  inset:58px 0 45px;
  opacity:1;
  background:repeating-radial-gradient(ellipse at 73% 46%,transparent 0 78px,rgba(76,193,222,.04) 79px 80px);
}

.automation-page .dev-hero .hero-grid{grid-template-columns:.98fr 1.02fr;gap:46px}
.automation-page .dev-hero .hero-copy{min-width:0}
.automation-page .dev-hero h1{font-size:clamp(54px,4.3vw,62px)}
.automation-page .dev-hero h1 em{white-space:nowrap}

.automation-map{
  position:relative;
  width:100%;
  margin:0;
  min-width:0;
  align-self:center;
  justify-self:stretch;
  isolation:isolate;
  padding:20px 0 4px;
  color:#a3c2ce;
}

.automation-map-inner{
  width:min(100%,548px);
  margin-left:auto;
}

.automation-map:before{
  content:"";
  position:absolute;
  z-index:-1;
  inset:8% 3% 12%;
  border-radius:50%;
  background:radial-gradient(ellipse,rgba(22,142,177,.18),rgba(5,43,72,.07) 46%,transparent 72%);
  filter:blur(10px);
  pointer-events:none;
}

.automation-map-head{
  display:flex;
  justify-content:space-between;
  gap:20px;
  padding:0 0 2px;
  color:#789bab;
  font-size:12px;
  font-weight:800;
  letter-spacing:.16em;
  text-transform:uppercase;
}

.automation-map-head span:last-child{color:#84effa}
.automation-map-head span:first-child{padding-left:18px}
.automation-map-head i{
  display:inline-block;
  width:7px;
  height:7px;
  margin-right:8px;
  border-radius:50%;
  background:#2de8fd;
  box-shadow:0 0 12px rgba(45,232,253,.72);
  animation:automationLive 3.4s ease-in-out infinite;
}

.automation-map svg{display:block;width:100%;height:auto;overflow:visible}
.automation-routes path{
  stroke:#3d9ab2;
  stroke-width:2.6;
  stroke-linecap:round;
  stroke-dasharray:8 10;
  opacity:.64;
  animation:automationRoute 15s linear infinite;
}
.automation-routes path:nth-child(even){animation-direction:reverse;animation-duration:18s}

.automation-sources circle:first-child{fill:#06213a;stroke:#59ddeb;stroke-width:2.7}
.automation-sources .source-dot{fill:#2de8fd;stroke:none}
.automation-sources text{
  fill:#a7c4d0;
  font:800 12px Manrope,sans-serif;
  letter-spacing:.12em;
}

.automation-core .core-orbit{
  fill:none;
  stroke:#59ddeb;
  stroke-width:2.6;
  stroke-dasharray:8 11;
  opacity:.62;
  transform-box:fill-box;
  transform-origin:center;
  animation:automationOrbit 24s linear infinite;
}
.automation-core .core-body{
  stroke:#72e7f2;
  stroke-width:2.6;
  filter:drop-shadow(0 15px 25px rgba(0,0,0,.22));
}
.automation-core path{stroke:#8af4fc;stroke-width:5;stroke-linecap:round}
.automation-core .core-status{fill:#4feaf7;stroke:#d7fdff;stroke-width:2.5;animation:automationStatus 3.8s ease-in-out infinite}
.automation-core text{
  fill:#91b6c4;
  font:800 14px Manrope,sans-serif;
  text-anchor:middle;
  letter-spacing:.14em;
}
.automation-core .core-label{fill:#7ae9f3;font-size:11px}

.automation-results circle{fill:#06213a;stroke:#67e6f1;stroke-width:3.5}
.automation-results path{fill:none;stroke:#67e6f1;stroke-width:4.8;stroke-linecap:round;stroke-linejoin:round}
.automation-results text{
  fill:#9cc0cc;
  font:800 12px Manrope,sans-serif;
  text-anchor:middle;
  letter-spacing:.12em;
}
.automation-signals{fill:#78f2fb;opacity:.7}

.automation-map-foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  width:94%;
  margin:0 auto;
  border-top:1px solid rgba(83,184,205,.2);
  color:#7697a7;
  font-size:10px;
  font-weight:750;
  letter-spacing:.06em;
  text-align:center;
}
.automation-map-foot span{flex:0 0 auto;padding:14px 0;white-space:nowrap}
.automation-map-foot b{margin-right:5px;color:#37dceb}

.automation-page .dev-proof strong{font-size:29px;line-height:1.05}
.automation-page .dev-proof span{font-size:14px}
.automation-page .format-card h3{align-items:flex-start}
.automation-page .format-icon img,
.automation-page .format-card-dark .format-icon img,
.automation-page .format-card-dark:hover .format-icon img{filter:drop-shadow(0 9px 14px rgba(20,66,111,.14))}
.automation-page .format-card:hover .format-icon img{filter:drop-shadow(0 11px 17px rgba(20,66,111,.18))}
.automation-page .format-card:first-child .format-icon img{width:152px;height:140px}
.automation-page .format-card:nth-child(3) .format-icon img{width:144px;height:134px;transform:translateY(-3px)}
.automation-page .format-card:nth-child(3):hover .format-icon img{transform:translateY(-3px) scale(1.04)}
.automation-page .format-card:nth-child(4) .format-icon img{width:149px;height:138px}
.automation-page .step-icon svg{stroke:#7da5b6}
.automation-page .step-icon .step-accent{stroke:#39dce9}
.automation-page .dev-steps article:hover .step-icon svg{stroke:#a9d4df}
.automation-page .dev-steps article:hover .step-icon .step-accent{stroke:#6ff3fc}

@keyframes automationRoute{to{stroke-dashoffset:-72}}
@keyframes automationOrbit{to{transform:rotate(360deg)}}
@keyframes automationLive{50%{opacity:.55;box-shadow:0 0 5px rgba(45,232,253,.42)}}
@keyframes automationStatus{50%{opacity:.62;transform:scale(.88);transform-origin:center}}

@media(min-width:761px){
  .automation-map svg{transform:translateY(-24px)}
  .automation-map-foot{transform:translateY(-28px)}
}

@media(max-width:1050px){
  .automation-page .dev-hero{min-height:980px;padding-bottom:190px}
  .automation-page .dev-hero .hero-grid{grid-template-columns:1.05fr .95fr;gap:28px}
  .automation-map{width:min(720px,100%);margin-inline:auto}
  .automation-map-inner{margin-inline:auto}
}

@media(max-width:899px){
  .automation-page .dev-hero{min-height:auto;padding-bottom:72px}
  .automation-page .dev-hero .hero-grid{grid-template-columns:1fr}
}

@media(max-width:760px){
  .automation-page .dev-hero h1{font-size:clamp(42px,12.7vw,61px)}
  .automation-page .dev-hero h1 em{white-space:normal}
  .automation-map{padding-top:8px}
  .automation-map-head{padding-inline:6px;font-size:7px;letter-spacing:.12em}
  .automation-map svg{margin:-6px 0 -2px}
  .automation-map-foot{margin-inline:4px;font-size:6.5px}
  .automation-map-foot span{padding:9px 2px}
  .automation-map-foot b{display:block;margin:0 0 2px}
  .automation-page .dev-proof strong{font-size:24px}
  .automation-page .dev-proof span{font-size:12px}
}

@media(prefers-reduced-motion:reduce){
  .automation-routes path,
  .automation-map-head i,
  .automation-core .core-orbit,
  .automation-core .core-status{animation:none!important}
  .automation-signals{display:none}
}
