/* Delikatne animacje ikon usług. Ruch nie zmienia wymiarów kart. */
.service-icon[data-icon-motion] { --icon-play-state: paused; }
.service-icon.motion-running { --icon-play-state: running; }
.service-icon .camera-head { transform-origin: 9px 15px; }
@media (prefers-reduced-motion: no-preference) {
  .service-icon[data-icon-motion="network"] svg > rect { fill: currentColor; fill-opacity: 0; animation: cctv-network-node 6.8s ease-in-out infinite; animation-play-state: var(--icon-play-state); }
  .service-icon[data-icon-motion="network"] svg > rect:nth-of-type(3) { animation-delay: 0s; }
  .service-icon[data-icon-motion="network"] svg > rect:nth-of-type(2) { animation-delay: .35s; }
  .service-icon[data-icon-motion="network"] svg > rect:nth-of-type(1) { animation-delay: .7s; }
  .service-icon[data-icon-motion="camera"] .camera-head { animation: cctv-camera-scan 8.4s ease-in-out infinite; animation-play-state: var(--icon-play-state); }
  .service-icon[data-icon-motion="shield"] svg > path:first-of-type { fill: currentColor; fill-opacity: 0; animation: cctv-shield-protect 7.4s ease-in-out 1.2s infinite; animation-play-state: var(--icon-play-state); }
  .service-icon[data-icon-motion="shield"] svg > path:last-of-type { stroke-dasharray: 1; stroke-dashoffset: 0; animation: cctv-shield-check 7.4s ease-in-out 1.2s infinite; animation-play-state: var(--icon-play-state); }
  .service-icon[data-icon-motion="power"] svg { transform-origin: center; fill: currentColor; fill-opacity: 0; animation: cctv-power-pulse 6.6s ease-in-out 2.1s infinite; animation-play-state: var(--icon-play-state); }
}
@keyframes cctv-network-node { 0%, 28%, 100% { fill-opacity: 0; } 10%, 16% { fill-opacity: .22; } }
@keyframes cctv-camera-scan { 0%, 22%, 100% { transform: rotate(0deg); } 42% { transform: rotate(-4deg); } 64% { transform: rotate(3deg); } 82% { transform: rotate(0deg); } }
@keyframes cctv-shield-protect { 0%, 50%, 100% { fill-opacity: 0; } 23%, 34% { fill-opacity: .12; } }
@keyframes cctv-shield-check { 0%, 15%, 50%, 100% { stroke-dashoffset: 0; opacity: 1; } 22% { stroke-dashoffset: .94; opacity: .6; } 36% { stroke-dashoffset: 0; opacity: 1; } }
@keyframes cctv-power-pulse { 0%, 48%, 100% { transform: scale(1); fill-opacity: 0; } 18% { transform: scale(1.045); fill-opacity: .18; } 30% { transform: scale(1); fill-opacity: .05; } 38% { transform: scale(1.02); fill-opacity: .1; } }

/* Device graphics turn the homepage service cards into visual navigation. */
.service-card--visual{padding-top:0}.service-card-media{display:block;align-self:stretch;height:180px;flex-shrink:0;margin:0 -25px 24px;overflow:hidden;background:#14202a;border-bottom:1px solid var(--line)}.service-card-image{display:block;width:100%;height:100%;object-fit:var(--service-card-fit,contain)}.service-card.alarm .service-card-media,.service-card.electric .service-card-media{background:#fff}.service-card:focus-visible{outline:3px solid var(--accent);outline-offset:4px}
@media(prefers-reduced-motion:no-preference){.service-card-image{transition:transform .4s ease}.service-card:hover .service-card-image,.service-card:focus-visible .service-card-image{transform:scale(1.035)}}
@media(max-width:900px){.service-card-media{height:200px}}
@media(max-width:640px){.service-card-media{height:210px}}

/* Homepage cards follow the service palette without dark image backdrops. */
.offer-section{background:#faf7f1}.offer-section .section-heading h2{color:#24343b}.section-heading-accent{color:#167786}.service-card.lan{--accent:#167786;--accent-text:#125f6c;--tint:#e9f6f8}.service-card.cctv{--accent:#c65338;--accent-text:#9c3d28;--tint:#fff0e9}.service-card.alarm{--accent:#23885e;--accent-text:#17613f;--tint:#eaf7ef}.service-card.electric{--accent:#b78816;--accent-text:#795b10;--tint:#fff6d9}.service-card h3{color:var(--accent-text)}.service-card.lan .service-card-media{background:#e9f6f8}.service-card.cctv .service-card-media{background:#fff0e9}.service-card{background:linear-gradient(180deg,var(--tint),#fff 78%)}.service-card.alarm .service-card-media,.service-card.electric .service-card-media{background:#fff}.service-card .card-tags span{background:var(--tint);color:var(--accent-text)}

/* Sidebar icons share the visible-only animation without card styling. */
.side-item .service-icon.side-icon{display:grid;place-items:center;width:22px;height:22px;min-width:22px;flex:0 0 22px;margin:0;padding:0;border:0;border-radius:0;background:none;color:var(--accent-text)}
.side-item .side-icon svg{width:22px;height:22px;display:block}
@media(max-width:640px){.side-item .service-icon.side-icon{width:18px;height:18px;min-width:18px;flex-basis:18px}.side-item .side-icon svg{width:18px;height:18px}}

.side-item.access{--accent:#239971;--accent-text:#147c57;--tint:#e9f7ef}