/* "Our Services" logos: glass core, a still tick-mark dial ring and a soft glow on the logo
   (no moving glow - the spinning scanner arc and the running card-border light were removed). Light theme uses the brand red/navy, dark theme the hero orange/blue. */

.dm-service-icon {
    --si-a: #e91d2b;                    /* arc / glow colour */
    --si-b: #14244a;                    /* dial ticks */
    position: relative;
    isolation: isolate;
    overflow: visible;
    background: radial-gradient(circle at 35% 30%, #fff 0%, #fff3f2 55%, #ffe1de 100%);
    box-shadow: inset 0 0 0 1px rgba(233, 29, 43, .22), 0 6px 18px rgba(233, 29, 43, .14);
}

.dm-service-icon::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: -1;
}
/* fine dial ticks (still) */
.dm-service-icon::after {
    inset: -13px;
    background: repeating-conic-gradient(var(--si-b) 0 1.5deg, transparent 1.5deg 15deg);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3.5px));
            mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3.5px));
    opacity: .28;
}

.dm-service-icon img {
    filter: drop-shadow(0 0 4px rgba(233, 29, 43, .35));
    animation: dmSiFloat 3.6s ease-in-out infinite;
}

/* hover: card turns blue, so the ring goes white */
.dm-service-card:hover .dm-service-icon { --si-a: #fff; --si-b: #fff; box-shadow: 0 0 0 1px rgba(255, 255, 255, .5), 0 0 22px rgba(255, 255, 255, .35); }
.dm-service-card:hover .dm-service-icon::after { opacity: .55; }
.dm-service-card:hover .dm-service-icon img { filter: drop-shadow(0 0 5px rgba(233, 29, 43, .45)); }

/* dark (futuristic) theme */
[data-theme="dark"] .dm-service-icon {
    --si-a: #a78bfa;
    --si-b: #8ee9ff;
    background: radial-gradient(circle at 35% 30%, rgba(11, 206, 252, .28) 0%, rgba(11, 18, 32, .85) 70%);
    box-shadow: inset 0 0 0 1px rgba(142, 233, 255, .35), 0 0 24px rgba(167, 139, 250, .18);
    animation: none;
}
[data-theme="dark"] .dm-service-icon img,
[data-theme="dark"] .dm-service-card:hover .dm-service-icon img {
    filter: invert(1) hue-rotate(180deg) brightness(1.15) drop-shadow(0 0 5px rgba(142, 233, 255, .7));
}
[data-theme="dark"] .dm-service-card:hover .dm-service-icon {
    --si-a: #8ee9ff;
    --si-b: #a78bfa;
    background: radial-gradient(circle at 35% 30%, rgba(11, 206, 252, .4) 0%, rgba(11, 18, 32, .85) 70%);
    box-shadow: inset 0 0 0 1px rgba(142, 233, 255, .6), 0 0 30px rgba(11, 206, 252, .45);
}

@keyframes dmSiFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }

@media (prefers-reduced-motion: reduce) {
    .dm-service-icon img { animation: none; }
}

/* Our Services cards only: the moving glow around the logo
   - a scanner arc spinning just outside the circle (faster on hover)
   - the tick-mark dial ring turning slowly the other way
   - dark theme: the halo pulses orange <-> blue
   (the light running round the card border stays off) */
#dm-services .dm-service-icon::before {
    content: "";
    position: absolute;
    inset: -7px;
    z-index: -1;
    border-radius: 50%;
    pointer-events: none;
    background: conic-gradient(from 0deg, transparent 0 55%, var(--si-a) 88%, transparent 100%);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2px));
            mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2px));
    animation: dmSiSpin 4.5s linear infinite;
}
#dm-services .dm-service-icon::after { animation: dmSiSpin 24s linear infinite reverse; }
#dm-services .dm-service-card:hover .dm-service-icon::before { animation-duration: 1.6s; }
[data-theme="dark"] #dm-services .dm-service-icon { animation: dmSiHalo 4s ease-in-out infinite; }
@keyframes dmSiSpin { to { transform: rotate(360deg); } }
@keyframes dmSiHalo {
    0%, 100% { box-shadow: inset 0 0 0 1px rgba(127, 182, 255, .35), 0 0 18px rgba(244, 140, 24, .14); }
    50%      { box-shadow: inset 0 0 0 1px rgba(64, 137, 221, .45), 0 0 30px rgba(64, 137, 221, .32); }
}
@media (prefers-reduced-motion: reduce) {
    #dm-services .dm-service-icon::before,
    #dm-services .dm-service-icon::after,
    [data-theme="dark"] #dm-services .dm-service-icon { animation: none; }
}