.motion-grid {
  position: relative;
  overflow: hidden;
}

.motion-grid::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(120deg, transparent 0%, rgba(83, 168, 255, 0.12) 35%, transparent 70%),
    radial-gradient(circle at 78% 18%, rgba(255, 255, 255, 0.18), transparent 28%);
  transform: translateX(-100%);
  animation: scan-light 7s ease-in-out infinite;
}

.float-soft {
  animation: float-soft 5s ease-in-out infinite;
}

.float-soft:nth-child(2n) {
  animation-delay: -1.4s;
}

.float-soft:nth-child(3n) {
  animation-delay: -2.6s;
}

.lift-card {
  transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
}

.lift-card:hover {
  transform: translateY(-6px);
  border-color: rgba(83, 168, 255, 0.42);
  box-shadow: 0 24px 56px rgba(12, 61, 120, 0.14);
}

.icon-badge {
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  color: #0057a6;
  background: linear-gradient(135deg, #eef7ff, #ffffff);
  border: 1px solid rgba(83, 168, 255, 0.24);
  box-shadow: 0 12px 26px rgba(12, 61, 120, 0.08);
}

.icon-badge i,
i[data-lucide] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.35em;
  height: 1.35em;
  font-style: normal;
  font-weight: 900;
  line-height: 1;
  text-align: center;
}

.icon-badge i {
  font-size: 23px;
}

i[data-lucide]::before {
  content: "◇";
}

i[data-lucide="cloud-cog"]::before { content: "☁"; }
i[data-lucide="brain-circuit"]::before { content: "AI"; font-size: 0.72em; letter-spacing: 0; }
i[data-lucide="app-window"]::before { content: "▣"; }
i[data-lucide="smartphone"]::before { content: "▯"; }
i[data-lucide="blocks"]::before { content: "▦"; }
i[data-lucide="database-zap"]::before { content: "DB"; font-size: 0.68em; letter-spacing: 0; }
i[data-lucide="bot"]::before { content: "⌘"; }
i[data-lucide="workflow"]::before { content: "↬"; }
i[data-lucide="route"]::before { content: "⇄"; }
i[data-lucide="panel-top"]::before { content: "▤"; }
i[data-lucide="sparkles"]::before { content: "✦"; }
i[data-lucide="truck"]::before { content: "▰"; }
i[data-lucide="factory"]::before { content: "▥"; }
i[data-lucide="users"]::before { content: "人"; font-size: 0.86em; }
i[data-lucide="calculator"]::before { content: "¥"; }
i[data-lucide="landmark"]::before { content: "〒"; font-size: 0.86em; }
i[data-lucide="layout-dashboard"]::before { content: "▧"; }
i[data-lucide="git-branch"]::before { content: "⑂"; }
i[data-lucide="cable"]::before { content: "∞"; }
i[data-lucide="shield-check"]::before { content: "✓"; }
i[data-lucide="search-check"]::before { content: "⌕"; }
i[data-lucide="pen-tool"]::before { content: "✎"; }
i[data-lucide="code-2"]::before { content: "</>"; font-size: 0.58em; letter-spacing: -0.08em; }
i[data-lucide="refresh-cw"]::before { content: "↻"; }
i[data-lucide="clipboard-list"]::before { content: "☷"; }
i[data-lucide="drafting-compass"]::before { content: "△"; }
i[data-lucide="file-code-2"]::before { content: "{ }"; font-size: 0.56em; letter-spacing: -0.06em; }
i[data-lucide="terminal"]::before,
i[data-lucide="square-terminal"]::before { content: ">_"; font-size: 0.62em; letter-spacing: -0.08em; }
i[data-lucide="badge-check"]::before { content: "◎"; }
i[data-lucide="settings-2"]::before { content: "⚙"; }
i[data-lucide="building-2"]::before { content: "▥"; }
i[data-lucide="trending-up"]::before { content: "↗"; }
i[data-lucide="phone-call"]::before,
i[data-lucide="phone"]::before { content: "☎"; }
i[data-lucide="handshake"]::before { content: "◈"; }
i[data-lucide="network"]::before { content: "⌬"; }
i[data-lucide="file-badge"]::before { content: "□"; }
i[data-lucide="server"]::before { content: "▨"; }
i[data-lucide="database"]::before { content: "DB"; font-size: 0.68em; letter-spacing: 0; }
i[data-lucide="send"]::before { content: "➤"; }
i[data-lucide="file-search"]::before { content: "⌕"; }
i[data-lucide="messages-square"]::before { content: "…"; }
i[data-lucide="clock-3"]::before { content: "◷"; }
i[data-lucide="calendar-x"]::before { content: "×"; }
i[data-lucide="map-pin"]::before { content: "⌖"; }
i[data-lucide="mail"]::before { content: "✉"; }
i[data-lucide="map"]::before { content: "□"; }

.dark-icon-badge {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.18);
}

.inline-block[data-lucide],
i.inline-block[data-lucide] {
  width: 1.1em;
  height: 1.1em;
  color: currentColor;
  vertical-align: -0.15em;
}

.mx-auto[data-lucide],
i.mx-auto[data-lucide] {
  display: flex;
  margin-left: auto;
  margin-right: auto;
  font-size: 24px;
}

.tech-orbit {
  position: relative;
}

.tech-orbit::before {
  content: "";
  position: absolute;
  inset: 18px;
  border: 1px dashed rgba(83, 168, 255, 0.35);
  border-radius: 28px;
  animation: pulse-border 3.6s ease-in-out infinite;
}

.tech-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  color: #0c3d78;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(83, 168, 255, 0.22);
  box-shadow: 0 10px 24px rgba(12, 61, 120, 0.08);
}

.flow-link {
  position: relative;
}

.flow-link::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -14px;
  width: 28px;
  height: 2px;
  background: linear-gradient(90deg, rgba(83, 168, 255, 0.2), rgba(0, 87, 166, 0.65));
}

.flow-link:last-child::after {
  display: none;
}

.mini-shine {
  position: relative;
  overflow: hidden;
}

.mini-shine::before {
  content: "";
  position: absolute;
  top: 0;
  left: -70%;
  width: 42%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.34), transparent);
  transform: skewX(-18deg);
  animation: mini-shine 4.8s ease-in-out infinite;
}

@keyframes scan-light {
  0%, 45% { transform: translateX(-100%); opacity: 0; }
  55% { opacity: 1; }
  100% { transform: translateX(100%); opacity: 0; }
}

@keyframes float-soft {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

@keyframes pulse-border {
  0%, 100% { opacity: 0.32; transform: scale(1); }
  50% { opacity: 0.82; transform: scale(1.018); }
}

@keyframes mini-shine {
  0%, 56% { left: -70%; }
  100% { left: 125%; }
}

@media (max-width: 768px) {
  .flow-link::after {
    display: none;
  }
}
