<style>
/* === KEYFRAMES === */
@keyframes ai-dash-fwd { to { stroke-dashoffset: -30; } }
@keyframes ai-dash-rev { to { stroke-dashoffset: 30; } }
@keyframes ai-node-pulse {
  0%, 100% { stroke-width: 1.5; opacity: 0.75; }
  50% { stroke-width: 2.5; opacity: 1; }
}
@keyframes ai-core-glow {
  0%, 100% { box-shadow:0 0 0 0 rgba(255,255,255,0.3); border-color:rgba(255,255,255,0.22); }
  50% { box-shadow:0 0 22px 2px rgba(255,255,255,0.45); border-color:rgba(255,255,255,0.5); }
}
@keyframes ai-fabric-glow {
  0%, 100% { border-color:rgba(0,123,255,0.32); box-shadow:0 0 0 0 rgba(0,123,255,0); }
  50% { border-color:rgba(0,123,255,0.55); box-shadow:0 0 30px 0 rgba(0,123,255,0.28), inset 0 0 18px 0 rgba(0,123,255,0.06); }
}
@keyframes ai-layer-pulse-int  { 0%,22%,100%{background:rgba(190,60,180,0.05);border-color:rgba(190,60,180,0.25);box-shadow:0 0 0 0 rgba(190,60,180,0);} 5%,18%{background:rgba(190,60,180,0.22);border-color:rgba(190,60,180,0.85);box-shadow:0 0 26px 0 rgba(190,60,180,0.55);} }
@keyframes ai-layer-pulse-data { 0%,22%,100%{background:rgba(120,64,216,0.05);border-color:rgba(120,64,216,0.25);box-shadow:0 0 0 0 rgba(120,64,216,0);} 5%,18%{background:rgba(120,64,216,0.22);border-color:rgba(120,64,216,0.85);box-shadow:0 0 26px 0 rgba(120,64,216,0.55);} }
@keyframes ai-layer-pulse-exec { 0%,22%,100%{background:rgba(60,80,220,0.05);border-color:rgba(60,80,220,0.25);box-shadow:0 0 0 0 rgba(60,80,220,0);} 5%,18%{background:rgba(60,80,220,0.22);border-color:rgba(60,80,220,0.85);box-shadow:0 0 26px 0 rgba(60,80,220,0.55);} }
@keyframes ai-layer-pulse-pres { 0%,22%,100%{background:rgba(0,100,220,0.05);border-color:rgba(0,100,220,0.25);box-shadow:0 0 0 0 rgba(0,100,220,0);} 5%,18%{background:rgba(0,100,220,0.22);border-color:rgba(0,100,220,0.85);box-shadow:0 0 26px 0 rgba(0,100,220,0.55);} }
@keyframes ai-layer-pulse-sec  { 0%,22%,100%{background:rgba(0,130,188,0.05);border-color:rgba(0,130,188,0.25);box-shadow:0 0 0 0 rgba(0,130,188,0);} 5%,18%{background:rgba(0,130,188,0.22);border-color:rgba(0,130,188,0.85);box-shadow:0 0 26px 0 rgba(0,130,188,0.55);} }

/* === LAYOUT === */
#ai-diagram { background:#1a1a2e; padding:80px 24px; font-family:Inter,sans-serif; max-width:100%; }
#ai-diagram .ai-inner { max-width:1100px; margin:0 auto; }

/* === H2 HEADING — matches platform/homepage diagram === */
#ai-diagram .ai-heading { text-align:center; margin-bottom:35px; }
#ai-diagram .ai-h-white { font-family:Manrope,sans-serif; font-size:42px; font-weight:800; line-height:1.15; color:#fff; }
#ai-diagram .ai-h-grad {
  font-family:Manrope,sans-serif; font-size:42px; font-weight:800; line-height:1.15;
  background:linear-gradient(90deg,#be3cb4 0%,#7840d8 25%,#3c50dc 50%,#0064dc 75%,#0082bc 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}

#ai-diagram .ai-grid { display:grid; grid-template-columns:200fr 180fr 340fr 180fr 200fr; }
#ai-diagram .ai-labels { margin-bottom:14px; }
#ai-diagram .ai-label { font-size:11px; font-weight:700; letter-spacing:2.5px; color:rgba(255,255,255,0.45); text-align:center; font-family:Manrope,sans-serif; }
#ai-diagram .ai-label-center { color:rgba(255,255,255,0.65); }

#ai-diagram .ai-canvas { position:relative; height:520px; }
#ai-diagram .ai-svg { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:2; }
#ai-diagram .ai-svg .ai-track {
  stroke-dasharray: 3 4;
  stroke-width: 1.6;
  stroke-linecap: round;
  opacity: 0.7;
  fill: none;
}
#ai-diagram .ai-svg .ai-dot-fwd,
#ai-diagram .ai-svg .ai-dot-rev {
  stroke: rgba(255,255,255,0.95);
  stroke-width: 1.6;
  stroke-dasharray: 1.5 20;
  stroke-linecap: round;
  opacity: 1;
  fill: none;
}
#ai-diagram .ai-svg .ai-node { animation:ai-node-pulse 2.5s ease-in-out infinite; transform-origin:center; transform-box:fill-box; }

#ai-diagram .ai-side { display:flex; flex-direction:column; justify-content:center; gap:7px; height:100%; min-width:0; }
#ai-diagram .ai-side-r { gap:6px; }
#ai-diagram .ai-box { display:flex; align-items:center; gap:10px; padding:9px 12px; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.1); border-radius:8px; border-left-width:3px; height:50px; box-sizing:border-box; }
#ai-diagram .ai-side-r .ai-box { height:46px; padding:8px 12px; }
#ai-diagram .ai-ico { width:22px; height:22px; flex-shrink:0; display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,0.7); }
#ai-diagram .ai-text { color:rgba(255,255,255,0.85); font-size:12px; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex:1; }
#ai-diagram .ai-chip { display:inline-block; padding:1px 5px; background:linear-gradient(90deg,#be3cb4,#0082bc); color:#fff; font-size:8px; font-weight:700; letter-spacing:1px; border-radius:3px; flex-shrink:0; font-family:Manrope,sans-serif; }

#ai-diagram .ai-center { display:flex; flex-direction:column; justify-content:center; height:100%; padding:0 6px; }
#ai-diagram .ai-outer-box {
  border:1.5px solid rgba(0,123,255,0.32);
  border-radius:18px;
  padding:14px;
  background:rgba(0,123,255,0.04);
  animation:ai-fabric-glow 4s ease-in-out infinite;
  position:relative;
}

#ai-diagram .ai-core-banner {
  display:flex; align-items:center; justify-content:center;
  gap:8px;
  padding:8px 14px;
  margin-bottom:10px;
  background:linear-gradient(90deg, rgba(190,60,180,0.18), rgba(120,64,216,0.18), rgba(60,80,220,0.18), rgba(0,100,220,0.18), rgba(0,130,188,0.18));
  border:1px solid rgba(255,255,255,0.22);
  border-radius:8px;
  text-decoration:none;
  cursor:pointer;
  animation:ai-core-glow 3s ease-in-out infinite;
  transition:transform 0.2s ease;
}
#ai-diagram .ai-core-banner:hover { transform:translateY(-1px); }
#ai-diagram .ai-core-text { color:#fff; font-size:11px; font-weight:700; letter-spacing:2.2px; font-family:Manrope,sans-serif; }
#ai-diagram .ai-core-dot { width:7px; height:7px; border-radius:50%; background:#fff; box-shadow:0 0 8px rgba(255,255,255,0.85); }

#ai-diagram .ai-layers { display:flex; flex-direction:column; gap:6px; }
#ai-diagram .ai-layer {
  display:flex; align-items:center; gap:11px;
  padding:9px 14px;
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.1);
  border-radius:8px;
  text-decoration:none;
  cursor:pointer;
  transition:transform 0.2s ease;
}
#ai-diagram .ai-layer:hover { transform:translateX(3px); }
#ai-diagram .ai-layer-bar { width:4px; height:30px; border-radius:2px; flex-shrink:0; }
#ai-diagram .ai-layer-body { flex:1; min-width:0; }
#ai-diagram .ai-layer-meta { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
#ai-diagram .ai-layer-num { color:rgba(255,255,255,0.4); font-size:9.5px; font-weight:700; letter-spacing:1.2px; font-family:'Courier New',monospace; }
#ai-diagram .ai-layer-name { color:rgba(255,255,255,0.95); font-size:11.5px; font-weight:700; letter-spacing:1px; font-family:Manrope,sans-serif; }
#ai-diagram .ai-layer-aichip { display:inline-block; padding:1px 5px; background:linear-gradient(90deg,#be3cb4,#0082bc); color:#fff; font-size:8px; font-weight:700; letter-spacing:1px; border-radius:3px; font-family:Manrope,sans-serif; }
#ai-diagram .ai-layer-desc { color:rgba(255,255,255,0.55); font-size:10px; margin-top:1px; }

@media (max-width:960px) {
  #ai-diagram .ai-canvas { height:auto; }
  #ai-diagram .ai-svg { display:none; }
  #ai-diagram .ai-grid { grid-template-columns:1fr; gap:20px; }
  #ai-diagram .ai-labels { display:none; }
  #ai-diagram .ai-side { height:auto; }
  #ai-diagram .ai-h-white, #ai-diagram .ai-h-grad { font-size:30px; }
}
</style>