/* Digitalisering (sak 27025, 2026-10-25): hero med en sti som går steg for steg oppover. Et lys vandrer langs stien,
 * og hvert steg tennes når lyset passerer (Kartlegg → Prioriter → Bygg → Ta i bruk → Videreutvikle). */
.di-hero { position: relative; overflow: hidden; overflow: clip; padding: 9.5rem 0 5rem; }
@media (max-width: 991.98px) { .di-hero { padding: 8rem 0 3rem; } }
.di-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(50% 60% at 78% 45%, rgba(143,211,166,.12), transparent 70%), radial-gradient(40% 50% at 65% 85%, rgba(255,181,71,.1), transparent 70%); }
.di-hero > .container { position: relative; z-index: 1; }
.di-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; }
.di-lead { font-size: 1.15rem; line-height: 1.6; color: rgba(255,255,255,.8); max-width: 34rem; margin: 0; }
.di-sti { position: relative; width: 100%; max-width: 560px; aspect-ratio: 2 / 1.15; margin: 0 auto; }
@media (max-width: 991.98px) { .di-sti { margin-top: 2.5rem; } }
.di-sti svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.di-spor { fill: none; stroke: rgba(255,255,255,.1); stroke-width: 14; stroke-linecap: round; }
.di-lys { fill: none; stroke: url(#diGrad); stroke-width: 4; stroke-linecap: round; }
.di-stiprikk { fill: none; stroke: rgba(255,255,255,.25); stroke-width: 2; stroke-dasharray: 2 10; stroke-linecap: round; }
.di-steg { position: absolute; transform: translate(-50%, -9px); /* prikken (18 px) sitter nøyaktig på stien */ display: flex; flex-direction: column; align-items: center; gap: .5rem; }
.di-steg i { width: 18px; height: 18px; border-radius: 50%; background: rgb(40,40,48); box-shadow: inset 0 0 0 3px rgba(255,255,255,.25); transition: background .4s ease, box-shadow .4s ease, transform .4s cubic-bezier(.2,.8,.2,1); }
.di-steg b { font-size: .82rem; font-weight: 700; color: rgba(255,255,255,.5); white-space: nowrap; transition: color .4s ease; }
.di-steg small { font-size: .7rem; color: rgba(255,255,255,.45); white-space: nowrap; margin-top: -.35rem; }
.di-steg.tent i { background: rgb(255,181,71); box-shadow: 0 0 0 5px rgba(255,181,71,.2), 0 0 20px rgba(255,181,71,.7); transform: scale(1.15); }
.di-steg.tent b { color: rgb(255,255,255); }
.di-steg.over { flex-direction: column-reverse; transform: translate(-50%, calc(-100% + 9px)); }
.di-steg.over small { margin: 0 0 -.35rem; }
.di-markor { position: absolute; left: 0; top: 0; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: rgb(255,255,255); pointer-events: none;
    box-shadow: 0 0 14px 5px rgba(255,214,150,.9), 0 0 36px 12px rgba(255,140,60,.45); }
.di-lys { stroke: url(#diGrad); }