/* DevOps-spesialist (sak 27025, 2026-10-25): hero med DevOps-løkka (∞). Lyspulser går rundt løkka, de åtte stegene står
 * rundt den (utvikling til venstre, drift til høyre), og et skjold i midten står for sikkerhet (DevSecOps). */
.do-hero { position: relative; overflow: hidden; overflow: clip; padding: 9.5rem 0 5rem; }
@media (max-width: 991.98px) { .do-hero { padding: 8rem 0 3rem; } }
.do-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(50% 60% at 74% 52%, rgba(122,60,255,.16), transparent 70%); }
.do-hero > .container { position: relative; z-index: 1; }
.do-h1 { font-size: clamp(2.3rem, 4.6vw, 3.7rem); line-height: 1.06; font-weight: 800; letter-spacing: -.02em; margin: 0 0 1.2rem; }
.do-lead { font-size: 1.15rem; line-height: 1.6; color: rgba(255,255,255,.8); max-width: 34rem; margin: 0; }

.do-loop { position: relative; width: 100%; max-width: 560px; aspect-ratio: 2 / 1; margin: 0 auto; }
@media (max-width: 991.98px) { .do-loop { margin-top: 2.5rem; } }
.do-loop svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.do-spor { fill: none; stroke: rgba(255,255,255,.1); stroke-width: 18; stroke-linecap: round; }
.do-strek { fill: none; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 60 30; animation: do-strek 6s linear infinite; }
@keyframes do-strek { to { stroke-dashoffset: -540; } }
/* Pulsene følger løkka (samme bane som i SVG-en, i et 600 x 300-koordinatsystem som skaleres med elementet) */
.do-bane { position: absolute; left: 0; top: 0; width: 600px; height: 300px; transform-origin: 0 0; }
.do-puls { position: absolute; left: 0; top: 0; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: rgb(255,255,255);
    offset-path: path("M300,150 C360,55 525,55 525,150 C525,245 360,245 300,150 C240,55 75,55 75,150 C75,245 240,245 300,150 Z"); offset-rotate: 0deg;
    box-shadow: 0 0 12px 4px rgba(255,180,120,.9), 0 0 30px 10px rgba(255,106,61,.45); animation: do-gaa 7s linear infinite; }
/* Ujevn avstand (0, 19 %, 44 %, 80 % av runden): med 25 % mellom var to prikker alltid i krysset samtidig og de andre to ytterst,
   så de speilet hverandre og så ikke ut til å gå i et 8-tall. Ingen par ligger nå en halv runde fra hverandre. */
.do-puls.p2 { animation-delay: -1.3s; box-shadow: 0 0 12px 4px rgba(200,160,255,.9), 0 0 30px 10px rgba(122,60,255,.5); }
.do-puls.p3 { animation-delay: -3.1s; }
.do-puls.p4 { animation-delay: -5.6s; box-shadow: 0 0 12px 4px rgba(150,220,255,.9), 0 0 30px 10px rgba(82,140,255,.5); }
@keyframes do-gaa { from { offset-distance: 0%; } to { offset-distance: 100%; } }
/* Stegene rundt løkka */
.do-steg { position: absolute; transform: translate(-50%, -50%); font-size: .82rem; font-weight: 700; letter-spacing: .02em; color: rgba(255,255,255,.75); white-space: nowrap; }
.do-steg.dev { color: rgb(255,181,71); } .do-steg.ops { color: rgb(150,200,255); }
.do-side { position: absolute; top: 50%; transform: translate(-50%, -50%); font-size: 1.05rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.9); }
/* Skjoldet i midten */
.do-skjold { position: absolute; left: 50%; top: 50%; width: 15%; aspect-ratio: 1; transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center;
    border-radius: 50%; background: radial-gradient(circle, rgba(36,36,44,1) 55%, rgba(36,36,44,0) 70%); }
.do-skjold svg { position: static; width: 60%; height: 60%; fill: none; stroke: rgb(255,255,255); stroke-width: 1.6; stroke-linejoin: round; filter: drop-shadow(0 0 8px rgba(226,52,110,.8)); animation: do-skjold 3s ease-in-out infinite; }
@keyframes do-skjold { 0%, 100% { filter: drop-shadow(0 0 6px rgba(226,52,110,.6)); } 50% { filter: drop-shadow(0 0 16px rgba(226,52,110,1)); } }
@media (prefers-reduced-motion: reduce) { .do-strek, .do-puls, .do-skjold svg { animation: none; } }
.do-strek { stroke: url(#doGrad); }
/* Stegenes plass rundt løkka */
.do-steg.s1 { left: 12%; top: 14%; } .do-steg.s2 { left: 3%; top: 50%; } .do-steg.s3 { left: 12%; top: 86%; } .do-steg.s4 { left: 37%; top: 88%; }
.do-steg.s5 { left: 63%; top: 12%; } .do-steg.s6 { left: 88%; top: 14%; } .do-steg.s7 { left: 97%; top: 50%; } .do-steg.s8 { left: 88%; top: 86%; }
.do-side.dev { left: 21%; } .do-side.ops { left: 79%; }