/* AI-løsninger, /kunstig-intelligens/ (sak 27025, 2026-10-25). Hero med en illustrasjon av AI som svarer ut fra
 * virksomhetens egne data: et spørsmål skrives, kildene lyser opp og sender svaret ned, svaret kommer med
 * kildehenvisninger, og en animert peker godkjenner (et menneske har siste ord). Merket «Illustrasjon», og ingenting
 * kan klikkes. Uten skript eller med redusert bevegelse vises første eksempel ferdig utfylt. */

.ki-hero { position: relative; overflow: hidden; overflow: clip; isolation: isolate; padding: 9.5rem 0 5rem; }
@media (max-width: 991.98px) { .ki-hero { padding: 8rem 0 3rem; } }
.ki-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: radial-gradient(45% 60% at 78% 45%, rgba(121,120,233,.22), transparent 70%), radial-gradient(35% 45% at 62% 90%, rgba(82,205,255,.12), transparent 70%), radial-gradient(30% 40% at 10% 15%, rgba(255,106,61,.1), transparent 70%); }
.ki-hero .ki-stov { filter: blur(.7px); }
.ki-hero > .container { position: relative; z-index: 1; }
.ki-eyebrow { font-size: .8rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgb(255,181,71); margin: 0 0 1rem; }
.ki-h1 { font-size: clamp(2.2rem, 4.2vw, 3.4rem); line-height: 1.08; font-weight: 800; letter-spacing: -.02em; margin: 0 0 1.2rem; }
.ki-lead { font-size: 1.15rem; line-height: 1.6; color: rgba(255,255,255,.8); max-width: 32rem; margin: 0 0 2rem; }

/* Vinduet */
.ki-demo { position: relative; max-width: 580px; margin: 0 auto; }
@media (max-width: 991.98px) { .ki-demo { margin-top: 2.5rem; } }
.ki-demo, .ki-demo * { pointer-events: none; user-select: none; cursor: default; }
.ki-demo::before { content: ""; position: absolute; inset: 8% -6% -4% 6%; z-index: -1; border-radius: 40px; filter: blur(50px);
    background: linear-gradient(135deg, rgba(121,120,233,.45), rgba(82,205,255,.25) 50%, rgba(255,106,61,.25)); animation: ki-aura 9s ease-in-out infinite alternate; }
@keyframes ki-aura { to { transform: translate(-3%, 3%) scale(1.04); opacity: .75; } }
.ki-vindu { position: relative; border-radius: 14px; overflow: hidden; background: rgb(250,251,253); color: rgb(31,41,55);
    box-shadow: 0 40px 80px -30px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.12); font-family: Inter, Arial, sans-serif; }
.ki-bar { display: flex; align-items: center; gap: .35rem; padding: .55rem .8rem; background: rgb(236,239,245); }
.ki-bar i { width: 9px; height: 9px; border-radius: 50%; background: rgb(243,154,143); } .ki-bar i:nth-child(2) { background: rgb(245,207,122); } .ki-bar i:nth-child(3) { background: rgb(143,211,166); }
.ki-tag { margin-left: auto; font-size: .62rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgb(107,114,128); }
.ki-innhold { padding: 1.1rem 1.2rem 1.2rem; }

/* Spørsmålet */
.ki-sporsmal { display: flex; align-items: center; gap: .7rem; padding: .7rem .8rem; border-radius: 12px; background: rgb(255,255,255);
    box-shadow: 0 0 0 1px rgba(31,41,55,.08), 0 6px 18px -10px rgba(31,41,55,.25); min-height: 52px; }
.ki-orb { flex: none; width: 30px; height: 30px; border-radius: 10px; display: flex; align-items: center; justify-content: center; color: rgb(255,255,255);
    background: linear-gradient(135deg, rgb(31,59,179), rgb(121,120,233) 55%, rgb(82,205,255)); background-size: 200% 200%; box-shadow: 0 6px 16px rgba(121,120,233,.4); animation: ki-orb 6s ease-in-out infinite; }
.ki-orb svg { width: 16px; height: 16px; fill: currentColor; }
.ki-demo.busy .ki-orb { animation: ki-orb 1.4s ease-in-out infinite, ki-puls 1.4s ease-in-out infinite; }
@keyframes ki-orb { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
@keyframes ki-puls { 0%, 100% { box-shadow: 0 6px 16px rgba(121,120,233,.4), 0 0 0 0 rgba(121,120,233,.45); } 50% { box-shadow: 0 6px 16px rgba(121,120,233,.4), 0 0 0 8px rgba(121,120,233,0); } }
.ki-q { font-size: .92rem; font-weight: 600; line-height: 1.35; }
.ki-caret { display: inline-block; width: 2px; height: 1.05em; margin-left: 1px; vertical-align: -.15em; background: rgb(121,120,233); animation: ki-blink 1s steps(1) infinite; }
@keyframes ki-blink { 50% { opacity: 0; } }

/* Kildene, med lysstråler ned til svaret */
.ki-kilder { display: grid; grid-template-columns: repeat(4, 1fr); gap: .6rem; margin: 1rem 0 2.2rem; }
.ki-kilde { position: relative; display: flex; flex-direction: column; align-items: center; gap: .35rem; padding: .6rem .3rem; border-radius: 10px;
    background: rgb(241,243,248); color: rgb(107,114,128); transition: background .4s ease, color .4s ease, box-shadow .4s ease, transform .4s ease; }
.ki-kilde svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ki-kilde b { font-size: .68rem; font-weight: 700; }
.ki-kilde::after { content: ""; position: absolute; left: 50%; top: 100%; width: 2px; height: 2.2rem; margin-left: -1px; opacity: 0; transition: opacity .4s ease;
    background: linear-gradient(rgba(121,120,233,.9), rgba(82,205,255,.2)); }
.ki-kilde::before { content: ""; position: absolute; left: 50%; top: 100%; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; opacity: 0; z-index: 1;
    background: rgb(255,255,255); box-shadow: 0 0 8px 3px rgba(121,120,233,.9); }
.ki-kilde.aktiv { background: rgb(255,255,255); color: rgb(79,70,229); transform: translateY(-2px); box-shadow: 0 0 0 1.5px rgba(121,120,233,.7), 0 8px 20px -8px rgba(121,120,233,.6); }
.ki-kilde.aktiv::after { opacity: 1; }
.ki-kilde.aktiv::before { animation: ki-drape 1.1s cubic-bezier(.5,0,.5,1) infinite; }
@keyframes ki-drape { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { transform: translateY(2.1rem); opacity: 0; } }

/* Svaret */
.ki-svar { position: relative; min-height: 172px; padding: .9rem 1rem 1rem; border-radius: 12px; background: rgb(255,255,255);
    box-shadow: 0 0 0 1px rgba(121,120,233,.25), 0 10px 30px -14px rgba(79,70,229,.45); }
.ki-svar-tekst { margin: 0 0 .7rem; font-size: .9rem; line-height: 1.5; min-height: 2.7em; }
.ki-svar-tekst .w { transition: opacity .25s ease; }
.ki-skel { position: absolute; left: 1rem; right: 1rem; top: 1rem; display: grid; gap: .45rem; opacity: 0; transition: opacity .3s ease; }
.ki-skel i { height: 10px; border-radius: 5px; background: linear-gradient(90deg, rgb(237,239,246) 0%, rgb(222,224,247) 40%, rgb(237,239,246) 80%); background-size: 200% 100%; animation: ki-skel 1.2s linear infinite; }
.ki-skel i.k { width: 60%; }
@keyframes ki-skel { to { background-position: -200% 0; } }
.ki-refs { display: flex; flex-wrap: wrap; gap: .4rem; min-height: 1.6rem; margin-bottom: .8rem; }
.ki-ref { display: inline-flex; align-items: center; gap: .3rem; padding: .2rem .55rem; border-radius: 99px; font-size: .68rem; font-weight: 700; color: rgb(79,70,229); background: rgb(238,238,252); }
.ki-ref::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .6; }
.ki-handling { display: flex; align-items: center; gap: .8rem; }
.ki-handling small { font-size: .7rem; color: rgb(107,114,128); }
.ki-btn { display: inline-flex; align-items: center; padding: .45rem .85rem; border-radius: 8px; font-size: .78rem; font-weight: 700; color: rgb(255,255,255);
    background: linear-gradient(135deg, rgb(79,70,229), rgb(121,120,233)); box-shadow: 0 4px 12px rgba(121,120,233,.4); transition: transform .2s ease, box-shadow .2s ease, background .3s ease; }
.ki-btn.hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(121,120,233,.55), 0 0 0 3px rgba(121,120,233,.15); }
.ki-btn.trykk { transform: scale(.96); }
.ki-btn.ferdig { background: rgb(23,166,115); box-shadow: 0 3px 10px rgba(23,166,115,.35); animation: ki-pop .5s cubic-bezier(.2,1.6,.4,1); }
.ki-btn .ja { display: none; } .ki-btn.ferdig .ja { display: inline; } .ki-btn.ferdig .nei { display: none; }
@keyframes ki-pop { 0% { transform: scale(.9); } 100% { transform: none; } }

/* Det som kommer inn steg for steg */
.ki-js .ki-inn { transition: opacity .45s ease, transform .45s cubic-bezier(.2,.8,.2,1); }
.ki-js .ki-inn.skjult { opacity: 0; transform: translateY(6px); }
.ki-nt, .ki-nt * { transition: none !important; }

/* Pekeren */
.ki-cursor { position: absolute; left: 0; top: 0; z-index: 20; width: 22px; height: 22px; opacity: 0; filter: drop-shadow(0 2px 4px rgba(0,0,0,.35));
    transform: translate(var(--cx, 90%), var(--cy, 110%)); transition: transform .75s cubic-bezier(.55,0,.25,1), opacity .4s ease; }
.ki-cursor.vis { opacity: 1; }
.ki-ring { position: absolute; z-index: 19; width: 30px; height: 30px; margin: -15px; border-radius: 50%; border: 2px solid rgba(121,120,233,.8); animation: ki-ring .6s ease-out forwards; }
@keyframes ki-ring { from { transform: scale(.4); opacity: 1; } to { transform: scale(1.6); opacity: 0; } }

@media (max-width: 575.98px) {
    .ki-innhold { padding: .9rem; }
    .ki-kilder { gap: .4rem; }
    .ki-kilde b { font-size: .6rem; }
    .ki-svar { min-height: 200px; }
    .ki-sporsmal { min-height: 66px; } /* plass til to linjer, så kildene ikke hopper mens spørsmålet skrives (CLS) */
}
@media (prefers-reduced-motion: reduce) {
    .ki-demo::before, .ki-orb, .ki-caret, .ki-skel i, .ki-kilde.aktiv::before { animation: none !important; }
    .ki-cursor, .ki-caret { display: none; }
}


/* ---- MCP: AI-assistentene koblet til systemene gjennom vår MCP-kobling (2026-10-25) ------------------------ */
.ki-mcp { position: relative; overflow: hidden; overflow: clip; padding: 6rem 0;
    background-image: radial-gradient(40% 60% at 78% 50%, rgba(122,60,255,.18), transparent 70%), radial-gradient(30% 50% at 8% 20%, rgba(255,106,61,.12), transparent 70%); }
@media (max-width: 991.98px) { .ki-mcp { padding: 4.5rem 0; } }
.ki-mcp-h2 { font-size: clamp(1.8rem, 3.2vw, 2.5rem); line-height: 1.12; font-weight: 800; letter-spacing: -.02em; margin: 0 0 1.2rem; }
.ki-mcp-tekst { font-size: 1.08rem; line-height: 1.65; color: rgba(255,255,255,.8); margin: 0 0 1rem; }
.ki-mcp .hero-knapper { margin-top: 1.5rem; }
.ki-mcp-figur { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); height: 320px; max-width: 620px; margin: 0 auto; }
.ki-mcp-linjer { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ki-mcp-linjer path { fill: none; vector-effect: non-scaling-stroke; }
.ki-mcp-spor path { stroke: rgba(255,255,255,.12); stroke-width: 2; }
.ki-mcp-flyt path { stroke: url(#ki-mcp-g); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 3 14; animation: ki-mcp-flyt 1.6s linear infinite; }
@keyframes ki-mcp-flyt { to { stroke-dashoffset: -17; } }
.ki-mcp-kol { position: relative; display: flex; flex-direction: column; justify-content: space-around; align-items: center; margin: 0; padding: 0; list-style: none; }
.ki-mcp-kol li { padding: .45rem .9rem; border-radius: 99px; font-size: .9rem; font-weight: 700; white-space: nowrap; color: rgb(255,255,255);
    background: rgb(28,33,52); box-shadow: inset 0 0 0 1px rgba(255,255,255,.16), 0 10px 24px -14px rgba(0,0,0,.8); }
.ki-mcp-hub { position: relative; align-self: center; justify-self: center; display: flex; flex-direction: column; align-items: center; justify-content: center;
    width: 132px; height: 132px; border-radius: 50%; text-align: center; background: radial-gradient(circle at 35% 30%, rgb(255,138,76), rgb(226,52,110) 55%, rgb(122,60,255));
    box-shadow: 0 0 0 8px rgba(255,61,139,.12), 0 0 60px rgba(255,61,139,.35); animation: ki-mcp-puls 3s ease-in-out infinite; }
.ki-mcp-hub b { font-size: .95rem; line-height: 1.2; }
.ki-mcp-hub small { font-size: .72rem; color: rgba(255,255,255,.85); }
@keyframes ki-mcp-puls { 50% { box-shadow: 0 0 0 14px rgba(255,61,139,.06), 0 0 80px rgba(255,61,139,.45); } }
@media (max-width: 575.98px) { .ki-mcp-figur { height: 280px; } .ki-mcp-kol li { font-size: .78rem; padding: .35rem .65rem; } .ki-mcp-hub { width: 104px; height: 104px; } .ki-mcp-hub b { font-size: .8rem; } }
@media (prefers-reduced-motion: reduce) { .ki-mcp-flyt path, .ki-mcp-hub { animation: none; } }

/* «Vi bruker det selv»: stemmesamtale med ChatGPT om dagens oppgaver. Boblene kommer etter hverandre når boksen er
   rullet fram (.is-visible fra reveal.js). Uten skript eller med redusert bevegelse står alt ferdig. */
.ki-mcp-selv { margin-top: 5rem; }
.ki-mcp-h3 { font-size: clamp(1.4rem, 2.4vw, 1.85rem); line-height: 1.2; font-weight: 800; margin: 0 0 1rem; }
.ki-prat { max-width: 540px; margin: 0 auto; padding: 1.1rem 1.2rem 1.3rem; border-radius: 18px; background: rgb(24,28,45);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.1), 0 40px 80px -40px rgba(0,0,0,.8); pointer-events: none; user-select: none; }
.ki-prat-topp { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; font-size: .78rem; color: rgba(255,255,255,.6); }
.ki-prat-bil { display: inline-flex; align-items: center; gap: .45rem; }
.ki-prat-bil svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ki-prat-merke { padding: .15rem .55rem; border-radius: 99px; font-size: .68rem; font-weight: 700; letter-spacing: .04em; background: rgba(255,255,255,.08); }
.ki-boble { max-width: 85%; margin: 0 0 .7rem; padding: .7rem .95rem; border-radius: 16px; font-size: .92rem; line-height: 1.45; }
.ki-boble.du { margin-left: auto; border-bottom-right-radius: 5px; background: linear-gradient(135deg, rgb(255,138,76), rgb(226,52,110)); color: rgb(255,255,255); }
.ki-boble.ai { border-bottom-left-radius: 5px; background: rgb(38,44,66); color: rgba(255,255,255,.9); }
.ki-logg { display: inline-flex; align-items: center; gap: .4rem; margin: .3rem 0 0; padding: .3rem .7rem; border-radius: 99px; font-size: .75rem; font-weight: 700; color: rgb(110,231,183); background: rgba(16,185,129,.12); }
.ki-logg svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
    .ki-prat .b1, .ki-prat .b2, .ki-prat .b3, .ki-prat .b4, .ki-prat .b5 { opacity: 0; transform: translateY(8px); }
    .ki-prat.is-visible .b1, .ki-prat.is-visible .b2, .ki-prat.is-visible .b3, .ki-prat.is-visible .b4, .ki-prat.is-visible .b5 { animation: ki-boble .5s cubic-bezier(.2,.8,.2,1) both; }
    .ki-prat.is-visible .b2 { animation-delay: 1.4s; } .ki-prat.is-visible .b3 { animation-delay: 3.2s; }
    .ki-prat.is-visible .b4 { animation-delay: 4.4s; } .ki-prat.is-visible .b5 { animation-delay: 5.3s; }
}
@keyframes ki-boble { to { opacity: 1; transform: none; } }

/* Sitat fra Richard under «Vi bruker det selv» */
.ki-sitat { margin: 1.8rem 0 0; padding: 1.2rem 1.3rem; border-left: 3px solid rgb(255,106,61); border-radius: 0 14px 14px 0; background: rgba(255,255,255,.05); }
.ki-sitat blockquote { margin: 0 0 1rem; }
.ki-sitat blockquote p { margin: 0; font-size: 1.05rem; line-height: 1.6; font-style: italic; color: rgb(255,255,255); }
.ki-sitat figcaption { display: flex; align-items: center; gap: .75rem; }
.ki-sitat img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.ki-sitat figcaption span { display: flex; flex-direction: column; font-size: .85rem; color: rgba(255,255,255,.65); }
.ki-sitat figcaption b { font-size: .95rem; color: rgb(255,255,255); }