.automation-core {
  position: relative;
  min-height: clamp(760px, 92vh, 940px);
  overflow: hidden;
  isolation: isolate;
  border-bottom: 1px solid rgba(115, 220, 255, 0.15);
  background:
    radial-gradient(circle at 50% 43%, rgba(91, 67, 218, 0.24), transparent 30%),
    radial-gradient(circle at 14% 20%, rgba(39, 197, 235, 0.12), transparent 27%),
    linear-gradient(180deg, #07091a 0%, #0b0e2b 58%, #07091a 100%);
}
.automation-core:before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.22;
  background-image:
    linear-gradient(rgba(102, 217, 255, 0.18) 1px, transparent 1px),
    linear-gradient(90deg, rgba(102, 217, 255, 0.18) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: linear-gradient(to bottom, transparent, #000 16%, #000 80%, transparent);
  transform: perspective(700px) rotateX(67deg) scale(1.4) translateY(23%);
  transform-origin: center bottom;
}
.automation-core:after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(
    circle at 50% 50%,
    transparent 16%,
    rgba(4, 5, 18, 0.25) 58%,
    rgba(4, 5, 18, 0.9) 100%
  );
  pointer-events: none;
}
#automationCanvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}
.automation-code-veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
  mix-blend-mode: screen;
  opacity: 0.46;
  font:
    600 7px/1 "ASTROLEX Persian",
    ui-monospace,
    SFMono-Regular,
    Menlo,
    monospace;
  letter-spacing: 0.2em;
  color: #72e5ff;
}
.automation-code-veil:before {
  content: "";
  position: absolute;
  inset: -30% 0;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(88, 223, 255, 0.03) 48%,
    rgba(112, 232, 255, 0.16) 50%,
    rgba(88, 223, 255, 0.03) 52%,
    transparent 100%
  );
  animation: codeScan 7s linear infinite;
}
.automation-code-veil span {
  position: absolute;
  padding: 7px 9px;
  border-left: 1px solid currentColor;
  background: linear-gradient(90deg, rgba(73, 209, 255, 0.08), transparent);
  text-shadow: 0 0 12px currentColor;
  opacity: 0.44;
  animation: cipherBlink 4.5s steps(1, end) infinite;
}
.automation-code-veil span:nth-child(1) {
  left: 3%;
  top: 35%;
}
.automation-code-veil span:nth-child(2) {
  right: 3%;
  top: 31%;
  color: #d780ff;
  animation-delay: -1.1s;
}
.automation-code-veil span:nth-child(3) {
  left: 5%;
  bottom: 14%;
  color: #e7c66f;
  animation-delay: -2.4s;
}
.automation-code-veil span:nth-child(4) {
  right: 4%;
  bottom: 12%;
  animation-delay: -3.2s;
}
.automation-inner {
  width: min(1240px, calc(100% - 36px));
  margin: auto;
  position: relative;
  z-index: 2;
  padding: 70px 0 55px;
  text-align: center;
}
.automation-intro {
  position: relative;
  z-index: 5;
  max-width: 850px;
  margin: 0 auto;
}
.automation-intro .section-label {
  margin-bottom: 13px;
}
.automation-intro h2 {
  font:
    600 clamp(40px, 5.5vw, 76px)/0.98 "ASTROLEX Persian",
    "Cormorant Garamond",
    Vazirmatn,
    serif;
  margin: 0;
  color: #f6f2eb;
  letter-spacing: -0.025em;
}
.automation-intro h2 em {
  font-weight: 500;
  color: transparent;
  background: linear-gradient(90deg, #f1d17a, #8de9ff 53%, #bda5ff);
  -webkit-background-clip: text;
  background-clip: text;
}
.automation-intro > p:not(.section-label) {
  max-width: 720px;
  margin: 21px auto 0;
  color: #b8bfd6;
  font-size: 14px;
  line-height: 1.85;
}
.automation-stage {
  height: 500px;
  position: relative;
  margin-top: 8px;
  transform-style: preserve-3d;
  perspective: 1100px;
  transition: transform 0.25s ease-out;
}
.automation-core-logo {
  position: absolute;
  z-index: 5;
  left: 50%;
  top: 50%;
  width: 230px;
  aspect-ratio: 1;
  transform: translate(-50%, -46%) translateZ(70px);
  display: grid;
  place-items: center;
  border-radius: 50%;
  filter: drop-shadow(0 32px 50px rgba(0, 0, 0, 0.42));
  animation: coreFloat 5s ease-in-out infinite;
}
.automation-core-logo:before,
.automation-core-logo:after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.automation-core-logo:before {
  inset: -18%;
  border: 1px solid rgba(126, 230, 255, 0.22);
  box-shadow:
    inset 0 0 36px rgba(88, 207, 255, 0.07),
    0 0 60px rgba(83, 84, 240, 0.12);
  animation: coreSpin 18s linear infinite;
}
.automation-core-logo:after {
  inset: -42%;
  border: 1px dashed rgba(216, 180, 105, 0.27);
  box-shadow:
    0 0 26px rgba(89, 219, 255, 0.09),
    inset 0 0 24px rgba(180, 109, 255, 0.07);
  animation: coreSpin 28s linear infinite reverse;
}
.automation-core-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  position: relative;
  z-index: 2;
}
.core-status {
  position: absolute;
  bottom: -37px;
  white-space: nowrap;
  padding: 7px 12px;
  border: 1px solid rgba(113, 232, 187, 0.25);
  border-radius: 99px;
  background: rgba(6, 12, 31, 0.72);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.28);
  color: #7cebbd;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.18em;
}
.core-status i {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #7cebbd;
  box-shadow: 0 0 12px #7cebbd;
  margin-right: 7px;
  animation: statusPulse 1.5s ease-in-out infinite;
}
.automation-node {
  position: absolute;
  z-index: 4;
  left: var(--x);
  top: var(--y);
  transform: translate(-50%, -50%) translateZ(var(--z, 0));
  width: 150px;
  min-height: 70px;
  padding: 13px 12px;
  border: 1px solid rgba(130, 225, 255, 0.22);
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.105), rgba(255, 255, 255, 0.025));
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.08),
    0 20px 45px rgba(0, 0, 0, 0.31),
    0 0 26px rgba(83, 119, 238, 0.08);
  backdrop-filter: blur(16px);
  color: #e9edf8;
  text-align: left;
  animation: nodeFloat var(--speed, 6s) ease-in-out infinite var(--delay, 0s);
  transition:
    border-color 0.25s,
    box-shadow 0.25s,
    filter 0.25s;
}
.automation-node:before {
  content: "";
  position: absolute;
  left: -4px;
  top: 50%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #86e9ff;
  box-shadow: 0 0 14px #5bdcff;
}
.automation-node b {
  display: block;
  color: #91eaff;
  font-size: 9px;
  letter-spacing: 0.13em;
  margin-bottom: 6px;
}
.automation-node span {
  font:
    600 15px/1.2 "ASTROLEX Persian",
    "Cormorant Garamond",
    Vazirmatn,
    serif;
}
.automation-node.active,
.automation-node:hover {
  border-color: rgba(164, 236, 255, 0.62);
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.15),
    0 22px 52px rgba(0, 0, 0, 0.4),
    0 0 34px rgba(85, 208, 255, 0.18);
}
.automation-node:nth-of-type(even):before {
  background: #c5a4ff;
  box-shadow: 0 0 14px #9b75ff;
}
.automation-actions {
  position: relative;
  z-index: 7;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: -4px;
}
.automation-actions .button {
  min-width: 195px;
}
.automation-trust {
  display: flex;
  justify-content: center;
  gap: 26px;
  flex-wrap: wrap;
  margin-top: 27px;
  color: #9ea7c4;
  font-size: 9px;
  letter-spacing: 0.11em;
}
.automation-trust span:before {
  content: "✓";
  color: #7cebbd;
  margin-right: 7px;
}
@keyframes coreFloat {
  50% {
    transform: translate(-50%, -50%) translateZ(85px) scale(1.025);
  }
}
@keyframes coreSpin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes nodeFloat {
  50% {
    margin-top: -11px;
    filter: brightness(1.12);
  }
}
@keyframes statusPulse {
  50% {
    opacity: 0.35;
    transform: scale(0.72);
  }
}
@keyframes codeScan {
  to {
    transform: translateY(38%);
  }
}
@keyframes cipherBlink {
  0%,
  44%,
  100% {
    opacity: 0.22;
  }
  45%,
  72% {
    opacity: 0.58;
  }
  73% {
    opacity: 0.12;
  }
}
html[dir="rtl"] .automation-node {
  text-align: right;
}
html[dir="rtl"] .automation-node:before {
  left: auto;
  right: -4px;
}
html[dir="rtl"] .core-status i,
html[dir="rtl"] .automation-trust span:before {
  margin-right: 0;
  margin-left: 7px;
}
@media (max-width: 900px) {
  .automation-core {
    min-height: 930px;
  }
  .automation-inner {
    padding-top: 55px;
  }
  .automation-stage {
    height: 590px;
  }
  .automation-core-logo {
    width: 205px;
  }
  .automation-node {
    width: 135px;
  }
  .automation-node span {
    font-size: 14px;
  }
  .automation-node[data-node="agents"] {
    --x: 19% !important;
    --y: 25% !important;
  }
  .automation-node[data-node="workflow"] {
    --x: 81% !important;
    --y: 25% !important;
  }
  .automation-node[data-node="crm"] {
    --x: 14% !important;
    --y: 55% !important;
  }
  .automation-node[data-node="data"] {
    --x: 86% !important;
    --y: 55% !important;
  }
  .automation-node[data-node="content"] {
    --x: 24% !important;
    --y: 82% !important;
  }
  .automation-node[data-node="support"] {
    --x: 76% !important;
    --y: 82% !important;
  }
  .automation-node[data-node="software"] {
    --x: 50% !important;
    --y: 96% !important;
  }
}
@media (max-width: 580px) {
  .automation-core {
    min-height: 880px;
  }
  .automation-inner {
    width: calc(100% - 24px);
    padding-top: 42px;
  }
  .automation-intro h2 {
    font-size: clamp(36px, 10.5vw, 40px);
  }
  .automation-intro > p:not(.section-label) {
    font-size: 12px;
    line-height: 1.7;
  }
  .automation-stage {
    height: 535px;
    margin-top: 0;
  }
  .automation-core-logo {
    width: clamp(140px, 38vw, 166px);
    top: 45.5%;
  }
  .automation-core-logo:after {
    inset: -24%;
  }
  .automation-node {
    width: clamp(94px, 24vw, 110px);
    min-height: 54px;
    padding: 8px 7px;
    border-radius: 12px;
  }
  .automation-node b {
    font-size: clamp(6.5px, 1.55vw, 7px);
    margin-bottom: 4px;
  }
  .automation-node span {
    font-size: clamp(10.5px, 2.8vw, 12px);
  }
  .automation-node[data-node="agents"] {
    --x: 21% !important;
    --y: 18% !important;
  }
  .automation-node[data-node="workflow"] {
    --x: 79% !important;
    --y: 18% !important;
  }
  .automation-node[data-node="crm"] {
    --x: 21% !important;
    --y: 45.5% !important;
  }
  .automation-node[data-node="data"] {
    --x: 79% !important;
    --y: 45.5% !important;
  }
  .automation-node[data-node="content"] {
    --x: 22% !important;
    --y: 73% !important;
  }
  .automation-node[data-node="support"] {
    --x: 78% !important;
    --y: 73% !important;
  }
  .automation-node[data-node="software"] {
    --x: 50% !important;
    --y: 93% !important;
  }
  .automation-actions {
    margin-top: -10px;
  }
  .automation-actions .button {
    width: min(100%, 310px);
  }
  .automation-trust {
    gap: 10px 18px;
    margin-top: 20px;
    font-size: 7px;
  }
  .automation-code-veil {
    font-size: 5px;
    opacity: 0.34;
  }
  .automation-code-veil span:nth-child(1),
  .automation-code-veil span:nth-child(2) {
    top: 27%;
  }
  .automation-code-veil span:nth-child(3),
  .automation-code-veil span:nth-child(4) {
    bottom: 11%;
  }
}
@media (max-width: 360px) {
  .automation-core {
    min-height: 845px;
  }
  .automation-inner {
    width: calc(100% - 16px);
    padding-top: 36px;
  }
  .automation-intro h2 {
    font-size: 36px;
  }
  .automation-stage {
    height: 505px;
  }
  .automation-core-logo {
    width: 128px;
  }
  .automation-node {
    width: 86px;
    min-height: 50px;
    padding: 7px 6px;
  }
  .automation-node b {
    font-size: 6px;
  }
  .automation-node span {
    font-size: 9.5px;
  }
  .automation-node[data-node="agents"],
  .automation-node[data-node="crm"] {
    --x: 20% !important;
  }
  .automation-node[data-node="workflow"],
  .automation-node[data-node="data"] {
    --x: 80% !important;
  }
  .automation-node[data-node="content"] {
    --x: 21% !important;
  }
  .automation-node[data-node="support"] {
    --x: 79% !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  .automation-core-logo,
  .automation-core-logo:before,
  .automation-core-logo:after,
  .automation-node,
  .core-status i,
  .automation-code-veil:before,
  .automation-code-veil span {
    animation: none !important;
  }
  .automation-stage {
    transition: none;
  }
}