/* =====================================================================
   FORSIDEN · utkast 3 (lyst og midtstilt)
   Rekkefølge: toppfeltet med det nyeste prosjektet, tre tall, seks
   tjenestekort med levende strektegninger, demoene, et mørkt bånd om
   oss og kontakt (kontakt og bunn står i stil.css).
   ===================================================================== */

/* ---------- Toppfeltet ----------
   NORDVO i Cormorant, sperret som i toppen, omtrent like stort som den
   gamle tittelen. Setningen under i tynn Inter med ett kursivt ord. */
.hero { padding-block: clamp(3.5rem, 2rem + 6vw, 8rem) clamp(1rem, .5rem + 2vw, 2.5rem); }
.hero-tekst { display: grid; justify-items: center; text-align: center; gap: 1.5rem; }
/* H1-en holder både navnet og setningen; den legger dem under hverandre med samme luft som før */
.hero-tittel { display: grid; justify-items: center; gap: 1.5rem; }
.hero-tittel > span { display: block; }
.hero-navn {
  margin: 0; font-family: var(--skrift-merke); font-weight: 400; text-transform: uppercase;
  font-size: clamp(3.6rem, 1.6rem + 8vw, 8rem); line-height: .95; letter-spacing: .14em;
  margin-right: -.14em; /* sperringen etter siste bokstav, så navnet står midt på */
  color: var(--tekst);
}
.hero-under { max-width: 26em; font-size: clamp(1.2rem, 1rem + .9vw, 1.65rem); font-weight: 300; line-height: 1.35; letter-spacing: -.02em; color: var(--svak); text-wrap: balance; }
.hero-under em { font-style: italic; color: var(--tekst); }
.hero-tekst .knapperad { justify-content: center; margin-top: .6rem; }
/* Bare mobil (Kasper 06.10): mer luft over NORDVO og ned til «Kort fortalt», og setningen litt lenger ned.
   Knappene følger setningen. PC-en er uendret. */
@media (max-width: 640px) {
  .hero { padding-top: 7.5rem; padding-bottom: 4rem; }
  .hero-under { margin-top: 1rem; }
}

/* ---------- Kort fortalt: tre tall ---------- */
.tall-rad { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 1000px; margin-inline: auto; }
.tall-rad li { display: grid; justify-items: center; align-content: start; gap: 1rem; padding: 1.25rem clamp(1rem, .5rem + 2vw, 2.5rem); text-align: center; }
.tall-rad li + li { border-left: 1px solid var(--strek-sterk); }
.tall-tekst { color: var(--svak); font-size: .9375rem; max-width: 17em; }
@media (max-width: 760px) {
  .tall-rad { grid-template-columns: 1fr; max-width: 420px; }
  .tall-rad li + li { border-left: 0; border-top: 1px solid var(--strek-sterk); }
  .tall-rad li { padding-block: 1.75rem; }
}

/* ---------- Tjenestekortene ----------
   Mørke kort med strektegninger som lever av seg selv (CSS-animasjon).
   Teksten ligger nederst over en mørk skygge, så den alltid kan leses. */
.fliser { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.fliser > li { display: grid; }
.flis {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; grid-template-rows: auto 1fr auto; grid-template-areas: "topp" "." "bunn";
  width: 100%; min-width: 0; aspect-ratio: 6 / 5; padding: 26px 30px 28px;
  border: 1px solid rgba(245, 245, 243, .08); border-radius: var(--radius);
  background: radial-gradient(120% 90% at 30% 20%, rgba(245, 245, 243, .045), rgba(245, 245, 243, 0) 55%), linear-gradient(165deg, #18181B 0%, #09090B 75%);
  color: var(--tekst); text-decoration: none;
  transition: transform .55s var(--myk), box-shadow .55s var(--myk);
}
.flis:hover { color: var(--tekst); }
.flis:focus-visible { outline: 2px solid #123A72; outline-offset: 3px; }
/* Skyggen nederst som gjør teksten lesbar over tegningen */
.flis::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(to top, #09090B 0%, rgba(9, 9, 11, .9) 26%, rgba(9, 9, 11, 0) 56%);
}
.flis-kunst { position: absolute; inset: 30px 0 0; z-index: -2; transition: transform 1.8s var(--myk), opacity 1s var(--myk); }
.kunst { width: 100%; height: 100%; color: #F5F5F3; overflow: visible; }

.flis-topp { grid-area: topp; display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.flis-nr, .flis-merke { font-size: .6875rem; font-weight: 500; line-height: 1.5; text-transform: uppercase; color: rgba(245, 245, 243, .85); font-variant-numeric: tabular-nums; }
.flis-nr { letter-spacing: .22em; transition: letter-spacing 1.2s var(--myk); }
.flis-merke { display: inline-flex; align-items: center; gap: .6em; letter-spacing: .14em; text-align: right; }
.flis-merke .prikk { width: 5px; height: 5px; transition: transform 1s var(--myk); }
.flis-bunn { grid-area: bunn; display: grid; }
.flis-tittel { font-size: 1.5rem; font-weight: 500; letter-spacing: -.025em; line-height: 1.2; color: var(--tekst); transition: transform 1s var(--myk); }
.flis-tekst {
  max-height: 0; opacity: 0; overflow: hidden; margin-top: 0;
  font-size: .875rem; line-height: 1.55; color: rgba(245, 245, 243, .72); max-width: 30em;
  transition: max-height 1s var(--myk), margin-top 1s var(--myk), opacity .9s var(--myk) .15s;
}
.flis-cta {
  position: relative; display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid rgba(245, 245, 243, .25);
  font-size: .75rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--tekst);
  transition: border-color 1s var(--myk);
}
/* Streken over «Se tjenesten» fylles fra venstre ved pek */
.flis-cta::before { content: ""; position: absolute; left: 0; top: -1px; height: 1px; right: 100%; background: rgba(245, 245, 243, .9); transition: right 1.1s var(--myk); }
.flis-cta .pil { width: 15px; height: 15px; transition: transform 1.1s var(--myk); }

.flis:hover, .flis:focus-visible { transform: translateY(-5px); box-shadow: 0 24px 50px -28px rgba(9, 9, 11, .55); }
/* Tegningen kommer nærmere og dempes, så teksten som glir fram kan leses */
.flis:hover .flis-kunst, .flis:focus-visible .flis-kunst { transform: scale(1.06); opacity: .38; }
.flis:hover .glod, .flis:focus-visible .glod { opacity: 1; }
.flis:hover .flis-nr, .flis:focus-visible .flis-nr { letter-spacing: .32em; }
.flis:hover .flis-merke .prikk, .flis:focus-visible .flis-merke .prikk { transform: scale(1.6); }
.flis:hover .flis-tittel, .flis:focus-visible .flis-tittel { transform: translateY(-3px); }
.flis:hover .flis-tekst, .flis:focus-visible .flis-tekst { max-height: 7em; opacity: 1; margin-top: .85rem; }
.flis:hover .flis-cta::before, .flis:focus-visible .flis-cta::before { right: 0; }
.flis:hover .flis-cta .pil, .flis:focus-visible .flis-cta .pil { transform: translate(4px, -4px); }
/* Uten mus (telefon, nettbrett) står teksten alltid framme */
@media (hover: none) {
  .flis-tekst { max-height: none; opacity: 1; margin-top: .75rem; }
  .flis::before { background: linear-gradient(to top, #09090B 0%, rgba(9, 9, 11, .92) 40%, rgba(9, 9, 11, 0) 72%); }
}
/* Nettbrett: kortene står flere i bredden og er lave, så tegningen dempes som ved pek */
@media (hover: none) and (min-width: 641px) { .flis-kunst { opacity: .38; } }

.fliser-fot { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .75rem; margin-top: clamp(2.25rem, 1.8rem + 1.5vw, 3rem); }

@media (max-width: 1080px) { .fliser { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .fliser { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .flis { aspect-ratio: auto; min-height: 330px; padding: 22px 22px 24px; }
}

/* ---------- Tegningene: felles ---------- */
.kunst .rutenett { opacity: .1; }
.kunst .glod { opacity: .6; transition: opacity 1.2s var(--myk); }
.sv-tekst { font-family: var(--skrift); font-size: 8px; font-weight: 500; letter-spacing: 1.5px; text-transform: uppercase; fill: currentColor; opacity: .55; }
.sv-sum { font-family: var(--skrift); font-size: 13.5px; font-weight: 300; letter-spacing: -.3px; fill: currentColor; font-variant-numeric: tabular-nums; }
/* Alt som skaleres eller fylles, gjør det fra sin egen boks */
.kunst .fyll, .kunst .t-spenn, .kunst .k-pris, .kunst .i-film { transform-box: fill-box; transform-origin: left center; }
.kunst .t-knapp, .kunst .t-ping, .kunst .i-hjerte, .kunst .blip, .kunst .d-status { transform-box: fill-box; transform-origin: center; }

/* Lagene svever sakte opp og ned, i ulikt tempo */
.kunst .lag-a { animation: flyt 11s ease-in-out infinite alternate; }
.kunst .lag-b { animation: flyt 13s ease-in-out infinite alternate-reverse; }
.kunst .lag-c { animation: flyt 15s ease-in-out infinite alternate; }
@keyframes flyt { from { transform: translateY(0); } to { transform: translateY(-7px); } }

/* Nettside: en linje skrives, markøren blinker, siden publiseres */
.kunst-nettside .skriv { stroke-dasharray: 80; stroke-dashoffset: 0; animation: skriv 4.4s linear infinite; }
@keyframes skriv { 0% { stroke-dashoffset: 80; opacity: .9; } 45%, 72% { stroke-dashoffset: 0; opacity: .9; } 82%, 100% { stroke-dashoffset: 0; opacity: 0; } }
.kunst-nettside .markor { animation: blink 1.05s ease-in-out infinite; }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: .15; } }
.kunst-nettside .fyll { transform: scaleX(.7); animation: fyll 5s ease-in-out infinite; }
@keyframes fyll { 0% { transform: scaleX(0); opacity: .85; } 60%, 80% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(1); opacity: 0; } }
.kunst-nettside .blip { opacity: .6; animation: blip 3.6s ease-in-out infinite; }
.kunst-nettside .blip-2 { animation-delay: .4s; } .kunst-nettside .blip-3 { animation-delay: .8s; }
.kunst-nettside .blip-4 { animation-delay: 1.2s; } .kunst-nettside .blip-5 { animation-delay: 1.6s; }
@keyframes blip { 0% { opacity: .25; transform: scale(.85); } 20% { opacity: 1; transform: scale(1.2); } 40% { opacity: .7; transform: scale(1); } 100% { opacity: .25; transform: scale(.85); } }

/* Chatbot: kunden spør, boten «skriver», svaret kommer */
.kunst-chatbot .c-skriver { opacity: 0; }
.kunst-chatbot .c-boble-1 { animation: boble-1 10s var(--myk) infinite; }
.kunst-chatbot .c-skriver { animation: skriver 10s linear infinite; }
.kunst-chatbot .c-boble-2 { animation: boble-2 10s var(--myk) infinite; }
.kunst-chatbot .c-boble-3 { animation: boble-3 10s var(--myk) infinite; }
@keyframes boble-1 { 0%, 4% { opacity: 0; transform: translateY(8px); } 10%, 90% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: none; } }
@keyframes skriver { 0%, 12% { opacity: 0; } 15%, 30% { opacity: 1; } 32%, 100% { opacity: 0; } }
@keyframes boble-2 { 0%, 31% { opacity: 0; transform: translateY(8px); } 37%, 90% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: none; } }
@keyframes boble-3 { 0%, 54% { opacity: 0; transform: translateY(8px); } 60%, 90% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: none; } }
.kunst-chatbot .c-p { animation: hopp-prikk 1.1s ease-in-out infinite; }
.kunst-chatbot .c-p-2 { animation-delay: .15s; } .kunst-chatbot .c-p-3 { animation-delay: .3s; }
@keyframes hopp-prikk { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-3px); opacity: 1; } }

/* Tilbudssystem: et valg, et trykk, et overslag, en e-post */
.kunst-tilbud .t-valg { opacity: 0; }
.kunst-tilbud .t-valg-2 { opacity: 1; }
.kunst-tilbud .t-valg-1 { animation: valg-1 8s linear infinite; }
.kunst-tilbud .t-valg-2 { animation: valg-2 8s linear infinite; }
@keyframes valg-1 { 0%, 6% { opacity: 0; } 9%, 20% { opacity: 1; } 23%, 100% { opacity: 0; } }
@keyframes valg-2 { 0%, 20% { opacity: 0; } 23%, 92% { opacity: 1; } 96%, 100% { opacity: 0; } }
.kunst-tilbud .t-knapp { animation: trykk 8s linear infinite; }
@keyframes trykk { 0%, 30% { transform: none; } 32% { transform: scale(.92); } 35%, 100% { transform: none; } }
.kunst-tilbud .t-reise { stroke-dasharray: 8 90; stroke-dashoffset: -60; opacity: 0; animation: reise 8s linear infinite; }
@keyframes reise { 0%, 34% { stroke-dashoffset: 8; opacity: 0; } 35% { opacity: 1; } 46% { stroke-dashoffset: -60; opacity: 1; } 47%, 100% { stroke-dashoffset: -60; opacity: 0; } }
.kunst-tilbud .t-sum { animation: sum 8s linear infinite; }
@keyframes sum { 0%, 46% { opacity: 0; } 52%, 92% { opacity: 1; } 97%, 100% { opacity: 0; } }
.kunst-tilbud .t-spenn { animation: spenn 8s var(--myk) infinite; }
@keyframes spenn { 0%, 48% { transform: scaleX(0); } 58%, 92% { transform: scaleX(1); } 97%, 100% { transform: scaleX(0); } }
.kunst-tilbud .t-ping { animation: ping 8s var(--myk) infinite; }
@keyframes ping { 0%, 58% { opacity: 0; transform: scale(.4); } 62% { opacity: 1; transform: scale(1.35); } 66%, 92% { opacity: 1; transform: scale(1); } 97%, 100% { opacity: 0; transform: scale(1); } }

/* 3D-konfigurator: kuben snur seg, valget flytter seg, prisen følger */
.kunst-3d .k-bane { stroke-dasharray: 36 520; stroke-dashoffset: 0; animation: bane 6s linear infinite; }
@keyframes bane { to { stroke-dashoffset: -507; } }
.kunst-3d .k-ring { animation: ring 9s var(--myk) infinite; }
@keyframes ring { 0%, 30% { transform: translateX(0); } 34%, 63% { transform: translateX(18px); } 67%, 96% { transform: translateX(36px); } 100% { transform: translateX(0); } }
.kunst-3d .k-pris { transform: scaleX(.6); animation: kpris 9s var(--myk) infinite; }
@keyframes kpris { 0%, 30% { transform: scaleX(.55); } 34%, 63% { transform: scaleX(.82); } 67%, 96% { transform: scaleX(.68); } 100% { transform: scaleX(.55); } }
.kube-scene { position: absolute; left: 50%; top: 40%; width: 132px; height: 96px; margin: -48px 0 0 -66px; perspective: 700px; pointer-events: none; }
.kube { position: relative; display: block; width: 100%; height: 100%; transform-style: preserve-3d; transform: rotateX(-16deg) rotateY(-28deg); animation: snu 28s linear infinite; }
@keyframes snu { from { transform: rotateX(-16deg) rotateY(-28deg); } to { transform: rotateX(-16deg) rotateY(332deg); } }
.kube-side { position: absolute; display: block; border: 1px solid rgba(245, 245, 243, .8); background: rgba(245, 245, 243, .025); }
.kube-side.foran, .kube-side.bak { left: 0; top: 0; width: 132px; height: 96px; }
.kube-side.foran { transform: translateZ(48px); }
.kube-side.bak { transform: rotateY(180deg) translateZ(48px); }
.kube-side.venstre, .kube-side.hoyre { left: 18px; top: 0; width: 96px; height: 96px; }
.kube-side.venstre { transform: rotateY(-90deg) translateZ(66px); }
.kube-side.hoyre { transform: rotateY(90deg) translateZ(66px); }
.kube-side.oppe, .kube-side.nede { left: 0; top: 0; width: 132px; height: 96px; }
.kube-side.oppe { transform: rotateX(90deg) translateZ(48px); }
.kube-side.nede { transform: rotateX(-90deg) translateZ(48px); border-color: rgba(245, 245, 243, .25); }
.kube-dor { position: absolute; display: block; left: 18px; bottom: 0; width: 30px; height: 64px; border: 1px solid rgba(245, 245, 243, .7); border-bottom: 0; }
.kube-vindu { position: absolute; display: block; right: 18px; top: 22px; width: 52px; height: 30px; border: 1px solid rgba(245, 245, 243, .7); background: rgba(245, 245, 243, .07); }
.kube-vindu-side { right: auto; left: 22px; }
.flis:hover .kube-scene, .flis:focus-visible .kube-scene { transform: scale(1.04); }
.kube-scene { transition: transform 1.8s var(--myk); }

/* Innhold: innleggene ruller, kalenderen fylles, videoen spilles */
.kunst-innhold .i-strom { animation: strom 6s linear infinite; }
@keyframes strom { from { transform: translateY(0); } to { transform: translateY(-76px); } }
.kunst-innhold .i-dag-1 { animation: dag-1 10s linear infinite; }
.kunst-innhold .i-dag-2 { animation: dag-2 10s linear infinite; }
.kunst-innhold .i-dag-3 { animation: dag-3 10s linear infinite; }
.kunst-innhold .i-dag-4 { animation: dag-4 10s linear infinite; }
.kunst-innhold .i-dag-5 { animation: dag-5 10s linear infinite; }
@keyframes dag-1 { 0%, 8% { opacity: 0; } 12%, 88% { opacity: 1; } 94%, 100% { opacity: 0; } }
@keyframes dag-2 { 0%, 20% { opacity: 0; } 24%, 88% { opacity: 1; } 94%, 100% { opacity: 0; } }
@keyframes dag-3 { 0%, 32% { opacity: 0; } 36%, 88% { opacity: 1; } 94%, 100% { opacity: 0; } }
@keyframes dag-4 { 0%, 44% { opacity: 0; } 48%, 88% { opacity: 1; } 94%, 100% { opacity: 0; } }
@keyframes dag-5 { 0%, 56% { opacity: 0; } 60%, 88% { opacity: 1; } 94%, 100% { opacity: 0; } }
.kunst-innhold .i-hjerte { opacity: .7; animation: hjerte 2.4s ease-in-out infinite; }
@keyframes hjerte { 0%, 100% { transform: scale(1); opacity: .5; } 15% { transform: scale(1.35); opacity: 1; } 30% { transform: scale(1); opacity: .8; } }
.kunst-innhold .i-film { transform: scaleX(.6); animation: film 7s linear infinite; }
@keyframes film { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* Drift: pulsen går, lysene blinker, siden er på nett */
.kunst-drift .d-status { animation: status 2.2s ease-in-out infinite; }
@keyframes status { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.kunst-drift .d-led-1 { animation: led 1.3s steps(1) infinite; }
.kunst-drift .d-led-2 { animation: led 2.1s steps(1) .4s infinite; }
.kunst-drift .d-led-3 { animation: led 1.7s steps(1) .8s infinite; }
@keyframes led { 0%, 49% { opacity: 1; } 50%, 100% { opacity: .25; } }
.kunst-drift .d-puls { stroke-dasharray: 46 440; stroke-dashoffset: -150; animation: puls 3.4s linear infinite; }
@keyframes puls { from { stroke-dashoffset: 46; } to { stroke-dashoffset: -420; } }

/* KI-synlighet: tre svarlinjer med små lamper og en hake. Bruker bevegelsene «led» og «status» fra Drift-kortet. */
.kunst-ki .k-led-1 { animation: led 1.3s steps(1) infinite; }
.kunst-ki .k-led-2 { animation: led 2.1s steps(1) .4s infinite; }
.kunst-ki .k-led-3 { animation: led 1.7s steps(1) .8s infinite; }
.kunst-ki .k-hake { animation: status 2.2s ease-in-out infinite; }

/* Et kort som står alene på siste rad, står midt i rutenettet i stedet for til venstre */
@media (min-width: 1081px) { .fliser > li:last-child:nth-child(3n+1) { grid-column: 2; } }
@media (min-width: 641px) and (max-width: 1080px) { .fliser > li:last-child:nth-child(2n+1) { grid-column: 1 / -1; justify-self: center; width: calc(50% - 10px); } }

/* Avspillingen styres av js/felles.js: fire sekunder når kortet kommer inn
   i bildet, så står tegningen på et ferdig bilde. Uten JavaScript står den
   stille fra start. Med redusert bevegelse er animasjonene slått av. */
.flis .kunst *, .flis .kube { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .kunst *, .kube { animation: none !important; }
  /* Teksten står framme hele tiden; samme mørke overgang som på telefon, så den kan leses oppå tegningen */
  .flis-tekst { max-height: none; opacity: 1; margin-top: .75rem; }
  .flis::before { background: linear-gradient(to top, #09090B 0%, rgba(9, 9, 11, .92) 40%, rgba(9, 9, 11, 0) 72%); }
  .flis-kunst { opacity: .38; }
}

/* ---------- Demoene: kort med ekte skjermbilder ---------- */
/* Kortene står i stil.css, fordi 3D-siden bruker dem også */

/* ---------- Om oss: mørkt, avrundet bånd ---------- */
.om-band { margin-inline: clamp(8px, 1.2vw, 16px); padding-block: var(--seksjon); border-radius: 24px; }
.om-band .seksjonshode { margin-bottom: 0; }
.om-band .knapperad { justify-content: center; margin-top: .5rem; }
.om-band .knapp:not(.knapp-lys) { background: var(--tekst); color: var(--morkt); border-color: var(--tekst); }
.om-band .knapp:not(.knapp-lys):hover { background: var(--hvit); border-color: var(--hvit); }