/* Hero på /webutvikling (sak 27025, 2026-10-25): stor overskrift og ingress som på forsiden, lysfiber-laget, kortene
 * med ikonfliser og prosesslinjen. (Illustrasjonen «skisse → løsning» som lå her, er tatt ut – den brukes ikke.) */
.hx-h1 { font-size: clamp(2.2rem, 4.4vw, 3.6rem); line-height: 1.06; font-weight: 800; margin: 0 0 1.2rem; color: #fff; }
.hx-lead { font-size: 1.15rem; line-height: 1.6; color: rgba(255,255,255,.78); max-width: 33rem; margin-bottom: 1.8rem; }

/* ---- /webutvikling (sak 27025, 2026-10-25) ---------------------------------------------------------------------- */
/* Hero: lysfiber-laget fyller høyre del og tones bort mot teksten til venstre */
.wu-hero { position: relative; min-height: 560px; }
.wu-hero > .container { position: relative; z-index: 1; }
.wu-fiber { position: absolute; top: 0; bottom: 0; right: 0; width: 64%; z-index: 0; pointer-events: none;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.6) 22%, black 45%); mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.6) 22%, black 45%); }
@media (max-width: 991.98px) { .wu-hero { min-height: 0; } .wu-fiber { width: 100%; opacity: .45; } }
/* De fire delene som kort med ikonflis */
.wu-kort { position: relative; width: 100%; padding: 1.6rem 1.4rem 1.4rem; border-radius: 4px; background: rgb(255,255,255);
    box-shadow: 0 0 0 1px rgba(17,24,39,.08), 0 10px 30px -18px rgba(17,24,39,.25); transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease; }
.wu-kort::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; border-radius: 4px 4px 0 0; background: linear-gradient(90deg, rgb(242,101,34), rgb(226,52,110), rgb(122,60,255)); opacity: 0; transition: opacity .3s ease; }
.wu-kort:hover { transform: translateY(-4px); box-shadow: 0 0 0 1px rgba(204,74,21,.25), 0 22px 40px -20px rgba(204,74,21,.45); }
.wu-kort:hover::before { opacity: 1; }
.wu-ikon { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 4px; margin-bottom: 1.1rem;
    color: rgb(204,74,21); background: rgb(250,243,239); box-shadow: inset 0 0 0 1px rgba(204,74,21,.12); transition: background .3s ease, color .3s ease; }
.wu-ikon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.wu-kort:hover .wu-ikon { color: rgb(255,255,255); background: linear-gradient(135deg, rgb(242,101,34), rgb(226,52,110)); }
/* Prosesslinjen: fem steg med en linje som fylles når den kommer inn i bildet */
.wu-prosess { position: relative; display: flex; justify-content: space-between; list-style: none; padding: 0; margin: 0 0 2.5rem; counter-reset: s; }
.wu-prosess::before, .wu-prosess::after { content: ""; position: absolute; left: 22px; right: 22px; top: 21px; height: 2px; background: rgba(17,24,39,.1); }
.wu-prosess::after { background: linear-gradient(90deg, rgb(242,101,34), rgb(226,52,110), rgb(122,60,255)); transform-origin: left; transform: scaleX(0); transition: transform 1.6s cubic-bezier(.65,0,.35,1) .2s; }
.wu-prosess.is-visible::after { transform: scaleX(1); }
.wu-prosess li { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: .55rem; font-size: .92rem; font-weight: 600; color: rgb(35,35,35); }
.wu-prosess b { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; font-size: 1rem;
    color: rgb(204,74,21); background: rgb(255,255,255); box-shadow: inset 0 0 0 2px rgba(204,74,21,.3); transition: background .4s ease, color .4s ease, box-shadow .4s ease; }
.wu-prosess.is-visible b { color: rgb(255,255,255); background: linear-gradient(135deg, rgb(242,101,34), rgb(226,52,110)); box-shadow: 0 8px 18px -8px rgba(226,52,110,.7); }
.wu-prosess.is-visible li:nth-child(1) b { transition-delay: .2s; } .wu-prosess.is-visible li:nth-child(2) b { transition-delay: .55s; }
.wu-prosess.is-visible li:nth-child(3) b { transition-delay: .9s; } .wu-prosess.is-visible li:nth-child(4) b { transition-delay: 1.25s; } .wu-prosess.is-visible li:nth-child(5) b { transition-delay: 1.6s; }
@media (max-width: 575.98px) { .wu-prosess li { font-size: .78rem; } .wu-prosess b { width: 36px; height: 36px; } .wu-prosess::before, .wu-prosess::after { top: 17px; } }
.wu-hero { overflow: hidden; overflow: clip; }