/* Forsidens hero, testvariantene 1 (ekte løsninger i 3D) og 2 (skisse blir løsning). Sak 27025.
 * Ytelse: H1-teksten er LCP-elementet. Visuelt innhold bruker bare transform og opacity, bilder er små AVIF/WebP med lazy,
 * og skriptet starter først etter load. Uten skript står alt ferdig. */

/* ---- Tekstdelen (felles) ---------------------------------------------------------------------- */
.hx-eyebrow { display: inline-flex; align-items: center; gap: .6rem; font-size: .8rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #ffb547; margin-bottom: 1.1rem; }
.hx-eyebrow::before { content: ""; width: 28px; height: 2px; background: linear-gradient(90deg, #ff6a3d, #ff3d8b); }
.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-h1 em { font-style: normal; background: linear-gradient(100deg, #ffb547, #ff6a3d 45%, #ff3d8b); -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: .1em; }
.hx-lead { font-size: 1.15rem; line-height: 1.6; color: rgba(255,255,255,.78); max-width: 33rem; margin-bottom: 1.8rem; }
.hx-fakta { display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; list-style: none; padding: 0; margin: 1.4rem 0 0; font-size: .92rem; color: rgba(255,255,255,.72); }
.hx-fakta li { display: inline-flex; align-items: center; gap: .45rem; }
.hx-fakta li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #4fe3c1; box-shadow: 0 0 10px #4fe3c1; }

/* ---- Felles bakgrunn bak illustrasjonene --------------------------------------------------------- */
@property --hx-v { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
.hx-vis { position: relative; isolation: isolate; }
.hx-glow { position: absolute; inset: 0 -6% -4% -6%; z-index: -1; border-radius: 40%; pointer-events: none;
    background: conic-gradient(from var(--hx-v), rgba(31,59,179,.55), rgba(121,120,233,.55), rgba(82,205,255,.45), rgba(255,61,139,.35), rgba(31,59,179,.55));
    filter: blur(60px); opacity: .5; animation: hx-spin 16s linear infinite; }
@keyframes hx-spin { to { --hx-v: 360deg; } }

/* ---- Variant 1: ekte løsninger som roterer i 3D ----------------------------------------------- */
.hv1 { position: relative; height: 470px; perspective: 1600px; }
.hv1-rig { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateX(var(--rx, 6deg)) rotateY(var(--ry, -16deg)); transition: transform .9s cubic-bezier(.2,.8,.2,1); }
.hv1-card { position: absolute; left: 4%; top: 14%; width: 82%; border-radius: 14px; overflow: hidden; background: #fff; transform-style: preserve-3d;
    box-shadow: 0 40px 80px -30px rgba(0,0,0,.75), 0 0 0 1px rgba(255,255,255,.08);
    transition: transform 1.1s cubic-bezier(.2,.8,.2,1), opacity 1.1s ease, filter 1.1s ease; will-change: transform; }
.hv1-bar { display: flex; align-items: center; gap: .3rem; height: 22px; padding: 0 .6rem; background: #e6e9f2; }
.hv1-bar i { width: 7px; height: 7px; border-radius: 50%; background: #c3cadb; }
.hv1-bar i:nth-child(1) { background: #f39a8f; } .hv1-bar i:nth-child(2) { background: #f5cf7a; } .hv1-bar i:nth-child(3) { background: #8fd3a6; }
.hv1-card picture, .hv1-card img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; }
/* Glans som glir over kortet foran */
.hv1-card::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.28) 50%, transparent 65%); background-size: 260% 100%; background-repeat: no-repeat; background-position: 160% 0; }
.hv1-card[data-pos="0"]::after { animation: hx-sveip 1.4s .5s ease-out 1; }
@keyframes hx-sveip { to { background-position: -60% 0; } }
/* Plassene i stabelen */
.hv1-card[data-pos="0"] { transform: translate3d(0, 0, 0); opacity: 1; z-index: 3; }
.hv1-card[data-pos="1"] { transform: translate3d(9%, -11%, -160px); opacity: .7; filter: brightness(.7) saturate(.85); z-index: 2; }
.hv1-card[data-pos="2"] { transform: translate3d(18%, -22%, -320px); opacity: .4; filter: brightness(.55) saturate(.7); z-index: 1; }
/* Navnelappen */
.hv1-label { position: absolute; left: 4%; bottom: 3%; z-index: 5; display: flex; align-items: center; gap: .7rem; padding: .6rem .9rem; border-radius: 14px;
    background: rgba(17,22,40,.78); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.12); color: #fff; box-shadow: 0 12px 30px -12px rgba(0,0,0,.7); }
.hv1-label b { display: block; font-size: .95rem; }
.hv1-label small { display: block; font-size: .78rem; color: rgba(255,255,255,.68); }
.hv1-label .dot { width: 9px; height: 9px; border-radius: 50%; background: linear-gradient(135deg, #52cdff, #7978e9); box-shadow: 0 0 10px #7978e9; flex: none; }
.hv1-label > div { transition: opacity .35s ease, transform .35s ease; }
.hv1-label.bytt > div { opacity: 0; transform: translateY(4px); }
.hv1-prog { display: flex; gap: .35rem; position: absolute; right: 6%; bottom: 6%; z-index: 5; }
.hv1-prog i { width: 22px; height: 3px; border-radius: 2px; background: rgba(255,255,255,.25); overflow: hidden; position: relative; }
.hv1-prog i.on::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #52cdff, #7978e9); transform-origin: left; animation: hx-prog var(--hv1-t, 4s) linear forwards; }
@keyframes hx-prog { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ---- Variant 2: skisse blir løsning ---------------------------------------------------------- */
.hv2 { position: relative; padding-top: 2.4rem; }
.hv2-steg { position: absolute; top: 0; left: 0; right: 0; display: flex; justify-content: center; gap: .4rem; z-index: 4; }
.hv2-steg span { font-size: .72rem; font-weight: 700; letter-spacing: .04em; padding: .3rem .75rem; border-radius: 999px; color: rgba(255,255,255,.55); background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); transition: color .4s ease, background .4s ease, border-color .4s ease, box-shadow .4s ease; }
.hv2-steg span.on { color: #fff; border-color: transparent; background: linear-gradient(120deg, #1f3bb3, #7978e9 55%, #52cdff); box-shadow: 0 6px 18px rgba(121,120,233,.45); }
.hv2-win { position: relative; border-radius: 16px; overflow: hidden; background: #f3f5fa; box-shadow: 0 40px 80px -30px rgba(0,0,0,.75); transform: perspective(1600px) rotateY(-10deg) rotateX(4deg); }
.hv2-bar { display: flex; align-items: center; gap: .3rem; height: 26px; padding: 0 .7rem; background: #e2e6f0; }
.hv2-bar > i { width: 8px; height: 8px; border-radius: 50%; background: #c3cadb; }
.hv2-bar > i:nth-child(1) { background: #f39a8f; } .hv2-bar > i:nth-child(2) { background: #f5cf7a; } .hv2-bar > i:nth-child(3) { background: #8fd3a6; }
.hv2-tag { margin-left: auto; font-size: .58rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #5653c9; background: rgba(121,120,233,.14); border-radius: 999px; padding: .1rem .5rem; }
.hv2-app { position: relative; display: grid; grid-template-columns: 22% 1fr; height: 330px; }
/* Hvert element har en skisse-tilstand (stiplet strek) og en ferdig tilstand */
.hv2 .b { position: relative; border-radius: 8px; transition: background .6s ease, border-color .6s ease, box-shadow .6s ease, opacity .5s ease; border: 1.5px dashed #9aa6c4; background: transparent; }
.hv2-side { margin: .6rem; display: flex; flex-direction: column; gap: .45rem; padding: .55rem; }
.hv2-side .b { height: 14px; }
.hv2-side .b.logo { height: 22px; width: 70%; margin-bottom: .4rem; }
.hv2-main { padding: .6rem .7rem .6rem 0; display: grid; grid-template-rows: 26px 64px 1fr 58px; gap: .5rem; }
.hv2-top { display: flex; gap: .5rem; } .hv2-top .b:first-child { flex: 1; } .hv2-top .b:last-child { width: 26px; border-radius: 50%; }
.hv2-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.hv2-kpi { padding: .45rem .55rem; display: flex; flex-direction: column; justify-content: center; }
.hv2-kpi small, .hv2-kpi strong, .hv2-chart small { opacity: 0; transition: opacity .5s ease; }
.hv2-kpi small { font-size: .58rem; color: #8a94a6; } .hv2-kpi strong { font-size: 1.05rem; color: #1f2937; font-weight: 800; }
.hv2-chart { padding: .45rem .55rem; overflow: hidden; }
.hv2-chart small { font-size: .6rem; color: #8a94a6; }
.hv2-chart svg { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 75%; }
.hv2-chart .area { opacity: 0; transition: opacity .8s ease .3s; }
.hv2-chart .line { fill: none; stroke: url(#hvLinje); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 420; stroke-dashoffset: 420; transition: stroke-dashoffset 1.4s cubic-bezier(.65,0,.35,1); }
.hv2-chart .skisse { fill: none; stroke: #9aa6c4; stroke-width: 1.5; stroke-dasharray: 5 5; transition: opacity .4s ease; }
.hv2-rows { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.hv2-rows .b { padding: .45rem .55rem; display: flex; align-items: center; gap: .45rem; }
.hv2-rows .b i { width: 20px; height: 20px; border-radius: 6px; flex: none; background: transparent; transition: background .5s ease; }
.hv2-rows .b u { display: block; height: 6px; flex: 1; border-radius: 3px; background: transparent; text-decoration: none; transition: background .5s ease; }
/* Ferdig: farger, skygger, graf og tall */
.hv2.ferdig .b { border-color: transparent; border-style: solid; background: #fff; box-shadow: 0 4px 14px rgba(31,59,179,.08); }
.hv2.ferdig .hv2-side { background: linear-gradient(180deg, #1f2a5c, #141a3a); border-radius: 10px; }
.hv2.ferdig .hv2-side .b { background: rgba(255,255,255,.12); box-shadow: none; }
.hv2.ferdig .hv2-side .b.logo { background: linear-gradient(90deg, #ff6a3d, #ff3d8b); }
.hv2.ferdig .hv2-side .b.aktiv { background: rgba(121,120,233,.55); }
.hv2.ferdig .hv2-top .b:last-child { background: linear-gradient(135deg, #ffb547, #ff3d8b); }
.hv2.ferdig .hv2-kpi small, .hv2.ferdig .hv2-kpi strong, .hv2.ferdig .hv2-chart small { opacity: 1; }
.hv2.ferdig .hv2-chart .line { stroke-dashoffset: 0; }
.hv2.ferdig .hv2-chart .area { opacity: 1; }
.hv2.ferdig .hv2-chart .skisse { opacity: 0; }
.hv2.ferdig .hv2-rows .b i { background: linear-gradient(135deg, #7978e9, #52cdff); }
.hv2.ferdig .hv2-rows .b u { background: #e4e8f2; }
/* Skannelinjen som gjør skissen om */
.hv2-skann { position: absolute; top: 0; bottom: 0; left: -10%; width: 3px; z-index: 3; opacity: 0; background: linear-gradient(180deg, transparent, #fff 20%, #7978e9 50%, #fff 80%, transparent);
    box-shadow: 0 0 18px 6px rgba(121,120,233,.6), 0 0 50px 16px rgba(82,205,255,.3); }
.hv2.skanner .hv2-skann { animation: hx-skann 1.3s cubic-bezier(.65,0,.35,1) forwards; }
@keyframes hx-skann { 0% { left: -2%; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { left: 101%; opacity: 0; } }
/* AI-kortet som dukker opp til slutt */
.hv2-ai { position: absolute; right: -4%; bottom: -6%; z-index: 4; width: 52%; padding: .6rem .7rem; border-radius: 12px; background: #fff; color: #1f2937; font-size: .7rem; line-height: 1.4;
    box-shadow: 0 18px 40px -14px rgba(0,0,0,.6), 0 0 30px -6px rgba(121,120,233,.6); opacity: 0; transform: translateY(14px) scale(.95); transition: opacity .5s ease, transform .6s cubic-bezier(.2,1.3,.4,1); }
.hv2-ai::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; background: conic-gradient(from var(--hx-v), #1f3bb3, #7978e9, #52cdff, #a78bfa, #1f3bb3);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: hx-spin 3s linear infinite; }
.hv2-ai b { display: flex; align-items: center; gap: .4rem; font-size: .72rem; margin-bottom: .25rem; }
.hv2-ai b i { width: 18px; height: 18px; border-radius: 6px; background: linear-gradient(135deg, #1f3bb3, #7978e9, #52cdff); background-size: 200% 200%; animation: hx-orb 3s ease-in-out infinite; }
@keyframes hx-orb { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
.hv2.ai .hv2-ai { opacity: 1; transform: none; }
/* Uten skript: ferdig løsning med AI-kort */
.hv2:not(.hx-js) { }
.hv2:not(.hx-js) .b { border-color: transparent; background: #fff; }
.hv2:not(.hx-js) .hv2-kpi small, .hv2:not(.hx-js) .hv2-kpi strong, .hv2:not(.hx-js) .hv2-chart small, .hv2:not(.hx-js) .hv2-chart .area, .hv2:not(.hx-js) .hv2-ai { opacity: 1; }
.hv2:not(.hx-js) .hv2-chart .line { stroke-dashoffset: 0; } .hv2:not(.hx-js) .hv2-chart .skisse { opacity: 0; } .hv2:not(.hx-js) .hv2-ai { transform: none; }

/* ---- Mobil: illustrasjonen kommer under teksten, mindre ------------------------------------------ */
@media (max-width: 991px) {
    .hx-vis { margin-top: 2.5rem; }
    .hv1 { height: 300px; }
    .hv1-label { bottom: 0; }
    .hv2-app { height: 250px; }
    .hv2-win { transform: none; }
    .hv2-ai { right: 2%; width: 62%; }
}

@media (prefers-reduced-motion: reduce) {
    .hx-glow, .hv2-ai::before, .hv2-ai b i, .hv1-card::after { animation: none !important; }
    .hv1-card, .hv1-rig { transition: none; }
}
.hv2-chart .area { fill: url(#hvFlate); }
/* Variant 1 uten skript på mobil: bildene lastes aldri, så illustrasjonen skjules */
@media (max-width: 991px) { .hv1:not(.hx-js) { display: none; } }
/* Skriveeffekten starter med tomt felt (Typed.js visker ellers ut et ord den ikke har skrevet). Linjen holdes på plass mens den er tom. */
.hx-h1 em { display: inline-block; min-height: 1.06em; }
/* Skrivelinjen: ordet og markøren (Typed.js legger den rett etter <em>) holdes på samme linje i full størrelse.
   Ordene må derfor være korte nok til kolonnen. «forretningsplattform» ble for langt og er byttet med «plattform». */
.hx-typed { white-space: nowrap; }
.hx-typed .typed-cursor { font-weight: 300; color: rgba(255,255,255,.75); }
/* Fast høyde på skrivelinjen: når ordet er slettet, krympet hero 0,8 px, og stjernefeltet (dops-fx-starfield) startet på nytt ved hver størrelsesendring. */
.hx-typed { display: block; height: 1.2em; line-height: 1.2em; }
.hx-h1 em { display: inline; min-height: 0; }
/* Litt strammere bokstavavstand på skrivelinjen, så «databaseløsning» (det lengste ordet) får plass også på 360 px telefoner og 992–1199 px skjermer */
.hx-typed { letter-spacing: -.02em; }
/* Fargeovergangen ruller gjennom ordet som skrives, i bare gull, oransje og rosa. Gradienten gjentar seg to ganger over 400 % bredde,
   så forskyvningen på én periode (0 % til 100 %) blir sømløs i løkke. */
.hx-h1 em {
    background-image: linear-gradient(90deg, #ffb547 0%, #ff6a3d 16.667%, #ff3d8b 33.333%, #ffb547 50%, #ff6a3d 66.667%, #ff3d8b 83.333%, #ffb547 100%);
    background-size: 1200px 100%; background-repeat: repeat-x; -webkit-background-clip: text; background-clip: text; color: transparent;
    animation: hx-regnbue 6s linear infinite; }
/* Fast mønster i piksler (endrer seg ikke når ordet vokser), og forskyvningen er nøyaktig én periode på 600 px: sømløs løkke */
@keyframes hx-regnbue { from { background-position: 0 50%; } to { background-position: -600px 50%; } }
@media (prefers-reduced-motion: reduce) { .hx-h1 em { animation: none; } }

/* Markøren: en enkel, tynn strek (lasereffekten ble prøvd og forkastet 24.10.2026) */
.hx-typed .typed-cursor { font-weight: 300; color: rgba(255,255,255,.8); }

/* Stjernestøv og glimt over referansekortene */
.hv1-stov { position: absolute; inset: -6% -4%; z-index: 6; pointer-events: none;
    background-image: radial-gradient(1.6px 1.6px at 12% 22%, rgba(255,255,255,.95), transparent), radial-gradient(1px 1px at 28% 64%, rgba(255,230,200,.9), transparent),
        radial-gradient(1.8px 1.8px at 46% 18%, rgba(255,255,255,.9), transparent), radial-gradient(1.2px 1.2px at 61% 72%, rgba(210,200,255,.9), transparent),
        radial-gradient(1.5px 1.5px at 77% 30%, rgba(255,255,255,.95), transparent), radial-gradient(1px 1px at 89% 58%, rgba(255,220,180,.9), transparent),
        radial-gradient(1.4px 1.4px at 36% 88%, rgba(255,255,255,.85), transparent), radial-gradient(1px 1px at 8% 76%, rgba(200,220,255,.9), transparent);
    background-size: 320px 260px; animation: hx-drift 50s linear infinite, hx-glimt 3s ease-in-out infinite; mix-blend-mode: screen; }
.hv1-stov::after { content: ""; position: absolute; inset: 0;
    background-image: radial-gradient(2px 2px at 20% 40%, rgba(255,255,255,1), transparent), radial-gradient(2.4px 2.4px at 70% 20%, rgba(255,240,210,1), transparent), radial-gradient(2px 2px at 55% 80%, rgba(255,255,255,1), transparent);
    background-size: 420px 340px; filter: drop-shadow(0 0 4px rgba(255,200,150,.9)); animation: hx-drift2 34s linear infinite, hx-glimt 2.2s 1s ease-in-out infinite; }
.hv1-gnist { position: absolute; z-index: 6; bottom: 12%; width: 3px; height: 3px; border-radius: 50%; pointer-events: none; background: #fff; box-shadow: 0 0 8px 2px rgba(255,190,140,.9); opacity: 0;
    left: var(--x); animation: hx-stig 5.5s var(--d) ease-in infinite; }
@keyframes hx-drift { to { background-position: 320px -260px; } }
@keyframes hx-drift2 { to { background-position: -420px -340px; } }
@keyframes hx-glimt { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@keyframes hx-stig { 0% { opacity: 0; transform: translateY(0) scale(.6); } 15% { opacity: 1; } 100% { opacity: 0; transform: translateY(-260px) scale(1.1); } }
@media (prefers-reduced-motion: reduce) { .hv1-stov, .hv1-stov::after, .hv1-gnist { animation: none; } .hv1-gnist { display: none; } }

/* Mer gnister og glitter rundt referansekortene: firetaggede stjerner som blinker */
.hv1-glitter { position: absolute; z-index: 7; width: var(--s, 14px); height: var(--s, 14px); left: var(--x); top: var(--y); pointer-events: none; opacity: 0;
    background: radial-gradient(circle, #fff 0 18%, transparent 19%), conic-gradient(from 45deg, transparent 0 22%, rgba(255,255,255,.95) 25%, transparent 28% 47%, rgba(255,255,255,.95) 50%, transparent 53% 72%, rgba(255,255,255,.95) 75%, transparent 78% 97%, rgba(255,255,255,.95) 100%);
    -webkit-mask: radial-gradient(circle, #000 0 35%, transparent 70%); mask: radial-gradient(circle, #000 0 35%, transparent 70%);
    filter: drop-shadow(0 0 4px rgba(255,214,160,.95)) drop-shadow(0 0 10px rgba(255,120,160,.6));
    animation: hx-glitter var(--t, 2.8s) var(--d) ease-in-out infinite; }
@keyframes hx-glitter { 0%, 100% { opacity: 0; transform: scale(.2) rotate(0deg); } 45% { opacity: 1; transform: scale(1) rotate(45deg); } 60% { opacity: .9; transform: scale(.8) rotate(60deg); } }
@media (prefers-reduced-motion: reduce) { .hv1-glitter { display: none; } }

/* Glitter rundt ordet som skrives: stjerner som blinker langs ordet (følger bredden via --hx-w), og lysprikker fra markøren */
.hx-typed { position: relative; }
.hx-fx { position: absolute; left: 0; top: 0; height: 100%; width: var(--hx-w, 6em); pointer-events: none; transition: width .15s linear; }
.hx-stjerne { position: absolute; left: var(--x); top: var(--y); width: var(--s); height: var(--s); margin: calc(var(--s) / -2); opacity: 0;
    background: radial-gradient(circle, #fff 0 16%, transparent 18%), conic-gradient(from 45deg, transparent 0 22%, rgba(255,255,255,.95) 25%, transparent 28% 47%, rgba(255,255,255,.95) 50%, transparent 53% 72%, rgba(255,255,255,.95) 75%, transparent 78% 97%, rgba(255,255,255,.95) 100%);
    -webkit-mask: radial-gradient(circle, #000 0 35%, transparent 70%); mask: radial-gradient(circle, #000 0 35%, transparent 70%);
    filter: drop-shadow(0 0 4px rgba(255,214,160,.95)) drop-shadow(0 0 9px rgba(255,106,61,.7));
    animation: hx-stjerne var(--t) var(--d) ease-in-out infinite; }
@keyframes hx-stjerne { 0%, 100% { opacity: 0; transform: scale(.2) rotate(0deg); } 45% { opacity: 1; transform: scale(1) rotate(45deg); } 65% { opacity: .85; transform: scale(.75) rotate(70deg); } }
.hx-prikk { position: absolute; width: 4px; height: 4px; margin: -2px; border-radius: 50%; pointer-events: none; background: #fff;
    box-shadow: 0 0 6px 2px rgba(255,190,120,.9), 0 0 12px 3px rgba(255,61,139,.45); animation: hx-prikk .9s cubic-bezier(.2,.8,.2,1) forwards; }
@keyframes hx-prikk { 0% { opacity: 1; transform: translate(0, 0) scale(1); } 100% { opacity: 0; transform: translate(var(--px), var(--py)) scale(.3); } }
@media (prefers-reduced-motion: reduce) { .hx-fx { display: none; } }

/* Linserefleks i forsvinningspunktet bak referansekortene. Ligger under innholdet (som løftes til z-index 1),
   og flytter seg litt etter musa via --lx/--ly (forside-hero.js). */
#content > .container { position: relative; z-index: 1; }
.hx-flare { position: absolute; left: 72%; top: 44%; width: 0; height: 0; z-index: 0; pointer-events: none; mix-blend-mode: screen;
    transform: translate(calc(var(--lx, 0) * 18px), calc(var(--ly, 0) * 12px)); transition: transform 1.2s cubic-bezier(.2,.8,.2,1); }
.hx-flare i { position: absolute; left: 0; top: 0; border-radius: 50%; }
.hx-flare .kjerne { width: 220px; height: 220px; margin: -110px; background: radial-gradient(circle, rgba(255,255,255,.55) 0, rgba(255,214,160,.35) 12%, rgba(255,106,61,.16) 32%, transparent 62%); animation: hx-puls 5s ease-in-out infinite; }
.hx-flare .stripe { width: 640px; height: 3px; margin: -1.5px 0 0 -320px; border-radius: 3px; background: linear-gradient(90deg, transparent, rgba(255,190,140,.18) 20%, rgba(255,235,210,.75) 50%, rgba(255,190,140,.18) 80%, transparent);
    box-shadow: 0 0 14px 2px rgba(255,160,110,.35); animation: hx-stripe 5s ease-in-out infinite; }
.hx-flare .stripe2 { width: 520px; height: 1px; margin: -.5px 0 0 -260px; background: linear-gradient(90deg, transparent, rgba(180,200,255,.6), transparent); transform: rotate(-12deg); opacity: .5; border-radius: 1px; }
.hx-flare .ring { width: 340px; height: 340px; margin: -170px; background: radial-gradient(circle, transparent 58%, rgba(255,140,120,.10) 64%, rgba(160,140,255,.08) 70%, transparent 74%); animation: hx-puls 5s ease-in-out infinite reverse; }
/* «Spøkelser» langs linjen fra refleksen mot midten av bildet, som i et kameraobjektiv */
.hx-flare .g1 { width: 70px; height: 70px; margin: -35px; background: radial-gradient(circle, rgba(255,61,139,.22), transparent 70%); transform: translate(calc(-200px - var(--lx, 0) * 30px), calc(110px - var(--ly, 0) * 20px)); transition: transform 1.2s cubic-bezier(.2,.8,.2,1); }
.hx-flare .g2 { width: 34px; height: 34px; margin: -17px; background: radial-gradient(circle, rgba(82,205,255,.35), transparent 70%); transform: translate(calc(-330px - var(--lx, 0) * 50px), calc(180px - var(--ly, 0) * 34px)); transition: transform 1.2s cubic-bezier(.2,.8,.2,1); }
.hx-flare .g3 { width: 120px; height: 120px; margin: -60px; background: radial-gradient(circle, transparent 55%, rgba(255,181,71,.16) 65%, transparent 75%); transform: translate(calc(-470px - var(--lx, 0) * 70px), calc(255px - var(--ly, 0) * 48px)); transition: transform 1.2s cubic-bezier(.2,.8,.2,1); }
@keyframes hx-puls { 0%, 100% { opacity: .75; transform: scale(1); } 50% { opacity: 1; transform: scale(1.08); } }
@keyframes hx-stripe { 0%, 100% { opacity: .55; } 50% { opacity: .95; } }
@media (max-width: 991px) { .hx-flare { left: 50%; top: 78%; } .hx-flare .stripe { width: 600px; margin-left: -300px; } .hx-flare .g1, .hx-flare .g2, .hx-flare .g3 { display: none; } }
@media (prefers-reduced-motion: reduce) { .hx-flare .kjerne, .hx-flare .ring, .hx-flare .stripe { animation: none; } }

/* Glitter som drysser ned fra ordet med tyngdekraft: ytre element driver jevnt sidelengs, indre faller med økende fart (ease-in) og blinker */
.hx-fx { display: none; }
.hx-drys { position: absolute; z-index: 3; pointer-events: none; animation: hx-drysx var(--t) linear forwards; }
.hx-drys i { display: block; width: var(--s); height: var(--s); margin: calc(var(--s) / -2);
    background: radial-gradient(circle, #fff 0 16%, transparent 18%), conic-gradient(from 45deg, transparent 0 22%, rgba(255,255,255,.95) 25%, transparent 28% 47%, rgba(255,255,255,.95) 50%, transparent 53% 72%, rgba(255,255,255,.95) 75%, transparent 78% 97%, rgba(255,255,255,.95) 100%);
    -webkit-mask: radial-gradient(circle, #000 0 35%, transparent 70%); mask: radial-gradient(circle, #000 0 35%, transparent 70%);
    filter: drop-shadow(0 0 3px rgba(255,214,160,.95)) drop-shadow(0 0 8px rgba(255,106,61,.6));
    animation: hx-drysy var(--t) cubic-bezier(.55,.085,.68,.53) forwards; }
.hx-drys.prikk i { background: #fff; border-radius: 50%; -webkit-mask: none; mask: none; box-shadow: 0 0 5px 1px rgba(255,190,120,.9); }
@keyframes hx-drysx { to { transform: translateX(var(--vx)); } }
@keyframes hx-drysy { 0% { transform: translateY(0) rotate(0deg) scale(1); opacity: 0; } 8% { opacity: 1; } 70% { opacity: .9; } 100% { transform: translateY(var(--fall)) rotate(var(--rot)) scale(.35); opacity: 0; } }

/* Linserefleksen sitter ved markøren og følger den (forside-hero.js setter left/top). Den store refleksen bak kortene er tatt bort. */
.hx-flare { display: none; }
.hx-curflare { position: absolute; z-index: -1; left: 0; top: 50%; width: 0; height: 0; pointer-events: none; mix-blend-mode: screen; transition: left .12s linear; }
.hx-curflare i { position: absolute; left: 0; top: 0; border-radius: 50%; }
.hx-curflare .kjerne { width: 120px; height: 120px; margin: -60px; background: radial-gradient(circle, rgba(255,255,255,.75) 0, rgba(255,220,170,.45) 10%, rgba(255,106,61,.2) 30%, transparent 62%); animation: hx-puls 3s ease-in-out infinite; }
.hx-curflare .stripe { width: 420px; height: 2px; margin: -1px 0 0 -210px; border-radius: 2px; background: linear-gradient(90deg, transparent, rgba(255,200,150,.25) 25%, rgba(255,240,220,.9) 50%, rgba(255,200,150,.25) 75%, transparent); box-shadow: 0 0 10px 1px rgba(255,160,110,.45); animation: hx-stripe 3s ease-in-out infinite; }
.hx-curflare .stripe2 { width: 2px; height: 90px; margin: -45px 0 0 -1px; border-radius: 2px; background: linear-gradient(180deg, transparent, rgba(255,230,200,.55), transparent); opacity: .6; }
.hx-curflare .g1 { width: 26px; height: 26px; margin: -13px; background: radial-gradient(circle, rgba(255,61,139,.35), transparent 70%); transform: translate(-90px, 38px); }
.hx-curflare .g2 { width: 14px; height: 14px; margin: -7px; background: radial-gradient(circle, rgba(82,205,255,.45), transparent 70%); transform: translate(-150px, 64px); }
.hx-curflare .g3 { width: 46px; height: 46px; margin: -23px; background: radial-gradient(circle, transparent 52%, rgba(255,181,71,.25) 64%, transparent 76%); transform: translate(-215px, 92px); }
@media (prefers-reduced-motion: reduce) { .hx-curflare { display: none; } }

/* Riktig objektivfysikk: refleksringene ligger på linjen fra lyskilden (markøren) gjennom midten av bildet.
   --dx/--dy er vektoren fra markøren til skjermens midtpunkt (settes av forside-hero.js), --t er posisjonen langs linjen. */
.hx-curflare .g1, .hx-curflare .g2, .hx-curflare .g3 { display: none; }
.hx-curflare .gh { width: var(--s); height: var(--s); margin: calc(var(--s) / -2); opacity: var(--o, .5);
    transform: translate(calc(var(--dx, 0px) * var(--t)), calc(var(--dy, 0px) * var(--t))); transition: transform .12s linear; }
.hx-curflare .gh.fylt { background: radial-gradient(circle, var(--c) 0, transparent 70%); }
.hx-curflare .gh.ring { background: radial-gradient(circle, transparent 50%, var(--c) 62%, transparent 74%); }
.hx-curflare .gh.sekskant { border-radius: 0; clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0 50%); background: radial-gradient(circle, var(--c) 0, transparent 85%); }

/* Refleksen lyser bare mens bokstaver skrives: tones inn ved hver ny bokstav, ut når det slettes eller står stille */
.hx-curflare { opacity: 0; transition: left .12s linear, opacity .45s ease; }
.hx-curflare.aktiv { opacity: 1; transition: left .12s linear, opacity .12s ease; }

/* Tre typer bevegelse i drysset: faller (ease-in = tyngdekraft), spretter (opp, så ned) og svever (oppdrift, bremser opp og tones ut) */
.hx-drys.hopp i { animation-name: hx-drys-hopp; animation-timing-function: linear; }
.hx-drys.flyt i { animation-name: hx-drys-flyt; animation-timing-function: cubic-bezier(.22,.61,.36,1); }
@keyframes hx-drys-hopp { 0% { transform: translateY(0) scale(1); opacity: 0; } 8% { opacity: 1; }
    30% { transform: translateY(var(--hopp)) scale(.95); animation-timing-function: cubic-bezier(.55,.085,.68,.53); }
    100% { transform: translateY(var(--fall)) rotate(var(--rot)) scale(.4); opacity: 0; } }
@keyframes hx-drys-flyt { 0% { transform: translateY(0) scale(.8); opacity: 0; } 12% { opacity: .95; } 100% { transform: translateY(var(--fall)) rotate(var(--rot)) scale(.3); opacity: 0; } }
.hx-drys.prikk.liten i { box-shadow: 0 0 3px .5px rgba(255,200,140,.9); }

/* Ingen lang vannrett strek, og ringene glir mykt etter markøren i stedet for å hoppe ett steg per bokstav */
.hx-curflare .stripe { display: none; }
.hx-curflare { transition: left .45s cubic-bezier(.22,.61,.36,1), top .45s cubic-bezier(.22,.61,.36,1), opacity .45s ease; }
.hx-curflare.aktiv { transition: left .45s cubic-bezier(.22,.61,.36,1), top .45s cubic-bezier(.22,.61,.36,1), opacity .15s ease; }
.hx-curflare .gh { transition: transform .6s cubic-bezier(.22,.61,.36,1); will-change: transform; }
/* Partiklene: egne lag for transform og opacity, og bare én skygge på stjernene, så nettleseren tegner dem jevnt */
.hx-drys, .hx-drys i { will-change: transform, opacity; backface-visibility: hidden; }
.hx-drys i { filter: drop-shadow(0 0 3px rgba(255,200,150,.9)); }

/* Lyspunktet sitter fast på markøren (ingen overgang på plasseringen). Bare ringene glir, kort og mykt. */
.hx-curflare { transition: opacity .45s ease; }
.hx-curflare.aktiv { transition: opacity .15s ease; }
.hx-curflare .gh { transition: transform .28s cubic-bezier(.22,.61,.36,1); }

/* Plasseringen styres med transform i hvert bilde (forside-hero.js), så det er ingen overganger på posisjon eller ringer */
.hx-curflare { left: 0 !important; top: 0 !important; will-change: transform, opacity; }
.hx-curflare .gh { transition: none; }

/* Markøren til den egne skriveeffekten: blinker når den står stille, lyser fast mens den skriver eller sletter */
.hx-typed .typed-cursor { display: inline-block; margin-left: .02em; animation: hx-blinkmark 1s steps(1) infinite; }
.hx-typed .typed-cursor.skriver { animation: none; opacity: 1; }
@keyframes hx-blinkmark { 50% { opacity: 0; } }

/* Partiklene i samme fargespekter som ordet: hvit, lys gull, gull, oransje og rosa (--c settes per partikkel) */
.hx-drys i { background: radial-gradient(circle, #fff 0 16%, transparent 18%), conic-gradient(from 45deg, transparent 0 22%, var(--c, #fff) 25%, transparent 28% 47%, var(--c, #fff) 50%, transparent 53% 72%, var(--c, #fff) 75%, transparent 78% 97%, var(--c, #fff) 100%);
    filter: drop-shadow(0 0 3px var(--c, rgba(255,200,150,.9))); }
.hx-drys.prikk i { background: var(--c, #fff); box-shadow: 0 0 5px 1px var(--c, rgba(255,190,120,.9)); filter: none; }
.hx-drys.prikk.liten i { box-shadow: 0 0 3px .5px var(--c, rgba(255,200,140,.9)); }

/* Gnistene lyser fra første bilde (ingen inntoning), så de kommer samtidig med bokstaven.
   Fontene: alle skytes ut fra samme punkt med egen fart oppover (--opp) og sidelengs (--vx).
   Sidelengs fart er konstant (linear). Loddrett: bremser inn mot toppen (ease-out), faller med økende fart (ease-in). */
.hx-drys { animation: hx-drysx var(--t) linear forwards !important; }
.hx-drys i, .hx-drys.hopp i, .hx-drys.flyt i { animation: hx-fontene var(--t) linear forwards !important; }
@keyframes hx-fontene {
    0% { transform: translateY(0) rotate(0deg) scale(1.15); opacity: 1; animation-timing-function: cubic-bezier(.33,.66,.66,1); }
    38% { transform: translateY(var(--opp)) rotate(calc(var(--rot) * .4)) scale(.95); opacity: 1; animation-timing-function: cubic-bezier(.33,0,.66,.33); }
    100% { transform: translateY(var(--fall)) rotate(var(--rot)) scale(.35); opacity: 0; } }

/* Ringene glir mykt selv om lyspunktet står fast på markøren: --ox/--oy er avstanden til den utjevnede posisjonen */
.hx-curflare .gh { transform: translate(calc(var(--ox, 0px) + var(--dx, 0px) * var(--t)), calc(var(--oy, 0px) + var(--dy, 0px) * var(--t))); }

/* Ny bokstav gløder hvitvarm et øyeblikk og kjøles raskt ned til fargeovergangen: et kortvarig lag oppå akkurat den bokstaven */
.hx-glod { position: absolute; z-index: 2; pointer-events: none; white-space: pre; color: #fff; font-style: normal;
    text-shadow: 0 0 10px rgba(255,236,200,.95), 0 0 24px rgba(255,150,90,.85), 0 0 46px rgba(255,61,139,.55);
    animation: hx-glod .6s cubic-bezier(.2,.7,.3,1) forwards; will-change: opacity, filter; }
@keyframes hx-glod { 0% { opacity: 1; filter: brightness(1.35); } 35% { opacity: .85; } 100% { opacity: 0; filter: brightness(1); } }
@media (prefers-reduced-motion: reduce) { .hx-glod { display: none; } }

/* Sterkere glød på ny bokstav: kraftigere og videre glorie, holder litt lenger før den kjøles ned */
.hx-glod { text-shadow: 0 0 6px rgba(255,255,255,1), 0 0 14px rgba(255,236,200,1), 0 0 28px rgba(255,170,90,.95), 0 0 52px rgba(255,106,61,.85), 0 0 84px rgba(255,61,139,.65);
    animation: hx-glod2 .85s cubic-bezier(.2,.7,.3,1) forwards; }
@keyframes hx-glod2 { 0% { opacity: 1; filter: brightness(1.6); } 30% { opacity: 1; filter: brightness(1.25); } 100% { opacity: 0; filter: brightness(1); } }

/* Gnistene starter hvitglødende og kjøles ned til fargen sin i løpet av den første tredjedelen av flukten */
.hx-drys { animation: hx-drysx var(--t) linear forwards, hx-avkjol var(--t) ease-out forwards !important; }
@keyframes hx-avkjol { 0% { filter: saturate(0) brightness(1.9); } 35% { filter: saturate(.8) brightness(1.15); } 100% { filter: saturate(1) brightness(1); } }

/* Stjernestøv: bittesmå punkter som flimrer svakt mens de svever (eget flimmer per punkt via --ft/--fd) */
.hx-drys { animation: hx-drysx var(--t) linear forwards, hx-avkjol var(--t) ease-out forwards, hx-flimmer var(--ft, .3s) var(--fd, 0s) ease-in-out infinite alternate !important; }
@keyframes hx-flimmer { from { opacity: 1; } to { opacity: .45; } }
.hx-drys.prikk.liten i { box-shadow: 0 0 2px .5px var(--c, rgba(255,220,180,.95)); }
.hx-drys.prikk i { box-shadow: 0 0 4px 1px var(--c, rgba(255,200,150,.9)); }

/* Stjernestøvet tegnes på et canvas over ordet (forside-hero.js). De gamle .hx-drys-elementene brukes ikke lenger. */
.hx-stovcanvas { position: absolute; z-index: 3; pointer-events: none; }

/* ---- Banneret over footeren: kontorbildet fra Røa, tonet (sak 27025, 2026-10-24) ----------------------------
 * Jevn mørk tone over hele bildet, uten gradient, så sitatet leses godt. Bildet dempes litt i farge, så det ikke
 * konkurrerer med teksten. */
/* Fast høyde: lavere enn før (608 px). Bildet ligger absolutt i seksjonen, så høyden må settes her. */
.kontor-seksjon { position: relative; height: 420px; }
@media (max-width: 767.98px) { .kontor-seksjon { height: 320px; } }
/* Jevn tone over hele bildet, pluss en myk, mørkere flate midt på bak sitatet så teksten leses godt */
.kontor-banner::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background: radial-gradient(ellipse 48% 62% at 50% 50%, rgba(20,22,30,.55), rgba(20,22,30,0) 100%), rgba(20,22,30,.66); }
.kontor-banner > .container { position: relative; z-index: 1; }
/* Dempet farge, men skarpt: uskarphet fikk bildet til å se ut som dårlig kvalitet */
.kontor-banner > [id^="jarallax-container"] > * { filter: saturate(.5); }

/* Hero klipper innholdet sitt, så linseflare-ringene og stjernestøvet aldri kan gjøre siden bredere eller lengre (sak 27025, 2026-10-24) */
#content { overflow: hidden; overflow: clip; }

/* ---- Stjernestøv og nebula i hero (sak 27025, 2026-10-24) ---------------------------------------------------
 * Stjernestøvet tegnes av <dops-fx-starfield mode="stov">. Nebulaen er to lag med myke fargeflekker som glir og
 * puster sakte. Bare transform og opacity animeres, så nettleseren kan gjøre det på skjermkortet uten å tegne om. */
/* Lagene ligger nøyaktig over hero (inset: 0), ikke med negativ prosent-inset. Med inset: -20% flyttet toppkanten
 * seg hver gang hero endret høyde under lasting, og Lighthouse målte et layoutskift på 0,41 (CLS) på mobil. */
.hx-nebula { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hx-nebula::before, .hx-nebula::after { content: ""; position: absolute; inset: 0; will-change: transform, opacity; }
.hx-nebula::before {
    background:
        radial-gradient(38% 45% at 72% 38%, rgba(122,60,255,.20), transparent 70%),
        radial-gradient(30% 40% at 86% 72%, rgba(255,61,139,.13), transparent 70%);
    animation: hx-nebula1 26s ease-in-out infinite alternate; }
.hx-nebula::after {
    background:
        radial-gradient(34% 42% at 22% 88%, rgba(255,138,76,.09), transparent 70%),
        radial-gradient(28% 34% at 55% 12%, rgba(82,120,255,.08), transparent 70%);
    animation: hx-nebula2 32s ease-in-out infinite alternate; }
@keyframes hx-nebula1 { from { transform: translate3d(-2%, 1%, 0) scale(1); opacity: .75; } to { transform: translate3d(2%, -2%, 0) scale(1.08); opacity: 1; } }
@keyframes hx-nebula2 { from { transform: translate3d(2%, 0, 0) scale(1.05); opacity: 1; } to { transform: translate3d(-2%, 2%, 0) scale(1); opacity: .7; } }

/* Myk, mørk flate bak teksten som toner ned stjernene der. Samme farge som hero-bakgrunnen, så den ikke synes som en boks. */
.hx-tekst::before { content: ""; position: absolute; left: -14%; right: -12%; top: -18%; bottom: -18%; z-index: -1; pointer-events: none;
    background: radial-gradient(ellipse 50% 50% at 45% 50%, rgba(35,35,35,.92) 0%, rgba(35,35,35,.72) 50%, rgba(35,35,35,0) 100%); }

@media (prefers-reduced-motion: reduce) { .hx-nebula::before, .hx-nebula::after { animation: none; } }

/* Sitatet i banneret over footeren: samme uttrykk som sitatet under teamet på Om oss-siden (stort anførselstegn
 * over, midtstilt, rolig og stor tekst), men hvit tekst på bildet (sak 27025, 2026-10-24). */
.kontor-sitat { max-width: 46rem; margin: 0 auto; text-align: center; color: rgb(255,255,255); }
.kontor-sitat::before { content: "\201C"; display: block; height: 2.3rem; font-family: Georgia, "Times New Roman", serif; font-size: 5rem; line-height: 1; color: rgb(242,101,52); }
.kontor-sitat blockquote { margin: 0; }
.kontor-sitat p { margin: 0; font-size: clamp(1.3rem, 2.4vw, 1.85rem); line-height: 1.45; font-weight: 600; letter-spacing: -.01em; text-wrap: balance; text-shadow: 0 1px 2px rgba(0,0,0,.45), 0 2px 24px rgba(0,0,0,.55); }

/* ---- Kampanjestripen under hero: lenkene skal se klikkbare ut (sak 27025, 2026-10-24) -------------------------
 * Hver lenke er en flate med svak ramme som løftes ved hover. Pilen står i en rund knapp som fylles og glir mot
 * høyre, og ikonet får en glød. Grunnstilen ligger i custom.css; dette overstyrer bare på forsiden. */
.kampanjestripe { padding: .9rem 0; }
.kampanjestripe .col-md-6 + .col-md-6 { border-left: 0 !important; }
.kampanjestripe .stripe-lenke { position: relative; margin: .35rem 0; padding: 1rem 1.1rem !important; border-radius: 4px; cursor: pointer;
    background: rgb(255,255,255); box-shadow: 0 0 0 1px rgba(17,24,39,.09), 0 1px 2px rgba(17,24,39,.04);
    transition: box-shadow .25s ease, transform .25s cubic-bezier(.2,.8,.2,1), background .25s ease; }
.kampanjestripe .stripe-lenke:hover, .kampanjestripe .stripe-lenke:focus-visible {
    background: rgb(255,250,247); transform: translateY(-2px);
    box-shadow: 0 0 0 1px rgba(204,74,21,.35), 0 12px 28px -14px rgba(204,74,21,.45); }
.kampanjestripe .stripe-lenke:active { transform: translateY(0); box-shadow: 0 0 0 1px rgba(204,74,21,.45), 0 4px 10px -6px rgba(204,74,21,.4); }
.kampanjestripe .stripe-lenke:focus-visible { outline: 2px solid rgb(204,74,21); outline-offset: 2px; }
.kampanjestripe .stripe-ikon { transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease; }
.kampanjestripe .stripe-lenke:hover .stripe-ikon { transform: scale(1.06); box-shadow: 0 0 0 5px rgba(204,74,21,.12); }
.kampanjestripe .stripe-pil { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 2.4rem; height: 2.4rem; margin-left: auto;
    border-radius: 50%; font-size: 1.15rem; line-height: 1; color: rgb(204,74,21); box-shadow: inset 0 0 0 1.5px rgba(204,74,21,.45);
    transition: background .25s ease, color .25s ease, transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .25s ease; }
.kampanjestripe .stripe-lenke:hover .stripe-pil, .kampanjestripe .stripe-lenke:focus-visible .stripe-pil {
    background: rgb(204,74,21); color: rgb(255,255,255); box-shadow: 0 6px 14px -6px rgba(204,74,21,.8); transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) { .kampanjestripe .stripe-lenke, .kampanjestripe .stripe-pil, .kampanjestripe .stripe-ikon { transition: none; transform: none !important; } }

/* ---- De tre tjenestene: 3D-figurer i trådramme i bakgrunnen (forside-wire.js), sak 27025, 2026-10-24 -----------
 * Seksjonen bruker padding i stedet for margin, så figurene får hele flaten. Ikonene står i en lys flis i
 * merkevarefargen, som i menyen. */
.tj3 { position: relative; overflow: hidden; overflow: clip; padding: 9rem 0; }
@media (max-width: 767.98px) { .tj3 { padding: 5rem 0; } }
.tj3-wire { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.tj3 > .container { position: relative; z-index: 1; }
.tj3 .col-md > svg { width: 56px; height: 56px; padding: 14px; border-radius: 4px; background: rgb(250,243,239); fill: rgb(204,74,21);
    box-shadow: inset 0 0 0 1px rgba(204,74,21,.12); margin-bottom: 1.25rem !important; }

/* Bildeslideren i hero kan dras med mus og sveipes med touch (forside-hero.js). Kortene følger bevegelsen litt. */
.hx-vis.hx-js { touch-action: pan-y; cursor: grab; -webkit-user-select: none; user-select: none; }
.hx-vis.hx-js img { -webkit-user-drag: none; user-select: none; }
.hx-vis.drar { cursor: grabbing; }
.hv1-rig { transform: translateX(var(--dx, 0px)) rotateX(var(--rx, 6deg)) rotateY(var(--ry, -16deg)); }
.hx-vis.drar .hv1-rig { transition: transform .12s linear; }