.sd-aic-wrap { position: relative; background: transparent; border-radius: 16px; width: 500px; height: 400px; margin: 0 auto; overflow: hidden; font-family: 'DM Sans', sans-serif; } .sd-aic-dot { position: absolute; width: 12px; height: 12px; border-radius: 50%; background: #11314a; top: 0; left: 0; z-index: 2; box-shadow: 0 0 8px rgba(17,49,74,0.4); opacity: 0; } .sd-aic-center { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); text-align: center; z-index: 1; pointer-events: none; } .sd-aic-center svg { width: 28px; height: 28px; stroke: rgba(17,49,74,0.3); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; animation: sd-aic-spin 8s linear infinite; } @keyframes sd-aic-spin { from { transform: rotate(0deg); } to   { transform: rotate(360deg); } } .sd-aic-center-label { margin-top: 6px; font-size: 11px; font-weight: 600; color: rgba(17,49,74,0.4); text-transform: uppercase; letter-spacing: 0.08em; } .sd-aic-paths { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; } .sd-aic-node { position: absolute; display: flex; flex-direction: column; align-items: center; z-index: 5; transition: transform 0.3s ease; } .sd-aic-node.sd-aic-active { transform: scale(1.10); } .sd-aic-icon { width: 80px; height: 80px; border-radius: 16px; display: flex; align-items: center; justify-content: center; transition: background 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease; background: rgba(17,49,74,0.08); border: 1px solid rgba(17,49,74,0.12); box-shadow: none; } .sd-aic-icon svg { width: 40px; height: 40px; fill: none; stroke: rgba(17,49,74,0.5); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: stroke 0.4s ease; } .sd-aic-active .sd-aic-icon { background: #11314a; border-color: transparent; box-shadow: 0 0 8px 3px rgba(17,49,74,0.25); animation: sd-aic-pulse-navy 2s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite; will-change: box-shadow; } .sd-aic-active .sd-aic-icon svg { stroke: #ffffff; } @keyframes sd-aic-pulse-navy { 0%, 100% { box-shadow: 0 0 8px 3px rgba(17,49,74,0.25); } 50%      { box-shadow: 0 0 10px 4px rgba(17,49,74,0.35); } } @media (prefers-reduced-motion: reduce) { .sd-aic-center svg, .sd-aic-active .sd-aic-icon, .sd-aic-node { animation: none !important; transition: none !important; } } .sd-aic-name { margin-top: 10px; font-size: 14px; font-weight: 700; color: rgba(17,49,74,0.5); letter-spacing: 0.02em; transition: color 0.4s ease; white-space: nowrap; } .sd-aic-active .sd-aic-name { color: #11314a; } .sd-aic-desc { margin-top: 3px; font-size: 11px; font-weight: 400; color: rgba(17,49,74,0.4); white-space: nowrap; transition: color 0.4s ease; } .sd-aic-active .sd-aic-desc { color: rgba(17,49,74,0.7); } .sd-aic-n-audit    { top: 10px;  left: 50%; transform: translateX(-50%); } .sd-aic-n-integrate { top: 50%;  right: 10px; transform: translateY(-50%); } .sd-aic-n-deploy   { bottom: 10px; left: 50%; transform: translateX(-50%); } .sd-aic-n-optimize { top: 50%;  left: 10px; transform: translateY(-50%); } .sd-aic-n-audit.sd-aic-active    { transform: translateX(-50%) scale(1.10); } .sd-aic-n-integrate.sd-aic-active { transform: translateY(-50%) scale(1.10); } .sd-aic-n-deploy.sd-aic-active   { transform: translateX(-50%) scale(1.10); } .sd-aic-n-optimize.sd-aic-active { transform: translateY(-50%) scale(1.10); } @media (max-width: 768px) { .sd-aic-wrap { width: 100%; max-width: 440px; height: 360px; margin: 0 auto; } .sd-aic-icon { width: 64px; height: 64px; border-radius: 13px; } .sd-aic-icon svg { width: 32px; height: 32px; } .sd-aic-name { font-size: 12px; margin-top: 8px; } .sd-aic-desc { display: none; } } @media (max-width: 480px) { .sd-aic-wrap { max-width: 100%; height: 320px; } .sd-aic-icon { width: 54px; height: 54px; border-radius: 11px; } .sd-aic-icon svg { width: 26px; height: 26px; } .sd-aic-name { font-size: 11px; margin-top: 6px; } .sd-aic-center-label { font-size: 9px; } @media (hover: none) { .sd-aic-node.sd-aic-active { transform: none; } .sd-aic-n-audit.sd-aic-active     { transform: translateX(-50%); } .sd-aic-n-integrate.sd-aic-active { transform: translateY(-50%); } .sd-aic-n-deploy.sd-aic-active    { transform: translateX(-50%); } .sd-aic-n-optimize.sd-aic-active  { transform: translateY(-50%); } } }