/* Databaseløsninger, /databaseutvikling (sak 27025, 2026-10-25). Hero: «fra kaos til orden» – løse regneark, e-poster,
 * lapper og gamle filer flyr sammen til én ryddig løsning («én kilde til sannheten»), og løses opp igjen i en rolig
 * løkke. Ingen tabeller eller kolonner: det er det kunden får, ikke hvordan det er laget. Merket «Illustrasjon». */

.db-hero { position: relative; overflow: hidden; overflow: clip; isolation: isolate; padding: 9.5rem 0 5rem; }
@media (max-width: 991.98px) { .db-hero { padding: 8rem 0 3rem; } }
.db-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: radial-gradient(45% 60% at 74% 50%, rgba(82,205,255,.14), transparent 70%), radial-gradient(35% 45% at 92% 12%, rgba(122,60,255,.16), transparent 70%), radial-gradient(30% 40% at 8% 88%, rgba(255,106,61,.12), transparent 70%); }
.db-hero .db-stov { filter: blur(.7px); }
.db-hero > .container { position: relative; z-index: 1; }
.db-eyebrow { font-size: .8rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgb(255,181,71); margin: 0 0 1rem; }
.db-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; }
.db-lead { font-size: 1.15rem; line-height: 1.6; color: rgba(255,255,255,.8); max-width: 32rem; margin: 0 0 2rem; }

/* Scenen */
.db-scene { position: relative; height: 400px; max-width: 560px; margin: 0 auto; pointer-events: none; user-select: none; font-family: Inter, Arial, sans-serif; }
@media (max-width: 991.98px) { .db-scene { margin-top: 2.5rem; height: 360px; } }
.db-tag { position: absolute; left: 0; bottom: -1.4rem; font-size: .62rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.45); }

/* Kaoset: løse biter som svever rundt */
.db-bit { position: absolute; display: flex; align-items: center; gap: .5rem; padding: .55rem .7rem; border-radius: 10px; font-size: .74rem; font-weight: 600;
    color: rgb(31,41,55); background: rgb(255,255,255); box-shadow: 0 14px 30px -14px rgba(0,0,0,.6); white-space: nowrap;
    transition: left 1.1s cubic-bezier(.65,0,.35,1), top 1.1s cubic-bezier(.65,0,.35,1), transform 1.1s cubic-bezier(.65,0,.35,1), opacity .6s ease; animation: db-svev 5s ease-in-out infinite; }
/* Plasseringene i kaoset */
.db-bit.b1 { left: 2%; top: 6%; transform: rotate(-7deg); }
.db-bit.b2 { left: 52%; top: 2%; transform: rotate(5deg); animation-delay: -1.2s; }
.db-bit.b3 { left: 30%; top: 30%; transform: rotate(-3deg); animation-delay: -2.4s; }
.db-bit.b4 { left: 64%; top: 40%; transform: rotate(8deg); animation-delay: -.6s; }
.db-bit.b5 { left: 0; top: 56%; transform: rotate(4deg); animation-delay: -3.1s; }
.db-bit.b6 { left: 40%; top: 72%; transform: rotate(-6deg); animation-delay: -1.8s; }
.db-bit.b7 { left: 70%; top: 78%; transform: rotate(3deg); animation-delay: -4s; }
@keyframes db-svev { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }
.db-bit i { flex: none; width: 22px; height: 22px; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-style: normal; font-size: .62rem; font-weight: 800; color: rgb(255,255,255); }
.db-bit.xls i { background: rgb(33,115,70); } .db-bit.mail i { background: rgb(37,99,235); } .db-bit.mdb i { background: rgb(164,55,58); } .db-bit.pdf i { background: rgb(220,38,38); }
.db-bit.lapp { background: rgb(254,240,138); color: rgb(113,63,18); font-family: "Comic Sans MS", "Segoe Print", cursive; font-weight: 400; }
.db-bit small { color: rgb(220,38,38); font-weight: 700; }
/* Når det samles: bitene flyr inn i vinduet og blir borte */
.db-scene.samle .db-bit { left: 42%; top: 46%; transform: rotate(0) scale(.4); opacity: 0; }

/* Orden: én ryddig løsning */
.db-app { position: absolute; left: 6%; right: 6%; top: 12%; 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); opacity: 0; transform: scale(.92) translateY(10px); transition: opacity .7s ease, transform .8s cubic-bezier(.2,.8,.2,1); }
.db-scene.orden .db-app { opacity: 1; transform: none; }
.db-app-bar { display: flex; align-items: center; gap: .35rem; padding: .55rem .8rem; background: rgb(236,239,245); }
.db-app-bar i { width: 9px; height: 9px; border-radius: 50%; background: rgb(243,154,143); } .db-app-bar i:nth-child(2) { background: rgb(245,207,122); } .db-app-bar i:nth-child(3) { background: rgb(143,211,166); }
.db-app-bar b { margin-left: .5rem; font-size: .72rem; }
.db-app-inn { padding: .9rem 1rem 1rem; }
.db-faner { display: flex; gap: .4rem; margin-bottom: .7rem; }
.db-faner span { padding: .25rem .65rem; border-radius: 99px; font-size: .68rem; font-weight: 700; color: rgb(107,114,128); background: rgb(236,239,245); }
.db-faner span.valgt { color: rgb(255,255,255); background: linear-gradient(90deg, rgb(255,106,61), rgb(255,61,139)); }
.db-sok { padding: .5rem .7rem; margin-bottom: .6rem; border-radius: 9px; background: rgb(255,255,255); box-shadow: 0 0 0 1px rgba(17,24,39,.08); font-size: .72rem; color: rgb(107,114,128); }
.db-rad { display: flex; align-items: center; gap: .6rem; padding: .48rem .6rem; margin-bottom: .38rem; border-radius: 9px; background: rgb(255,255,255); box-shadow: 0 0 0 1px rgba(17,24,39,.06);
    opacity: 0; transform: translateY(6px); transition: opacity .4s ease, transform .4s ease; transition-delay: .5s; }
.db-rad:nth-of-type(2) { transition-delay: .61s; } .db-rad:nth-of-type(3) { transition-delay: .72s; } .db-rad:nth-of-type(4) { transition-delay: .83s; }
.db-scene.orden .db-rad { opacity: 1; transform: none; }
.db-rad i { flex: none; width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-style: normal; font-size: .62rem; font-weight: 800; color: rgb(255,255,255);
    background: linear-gradient(135deg, rgb(82,140,255), rgb(122,60,255)); }
.db-rad span { flex: 1; min-width: 0; }
.db-rad b { display: block; font-size: .74rem; }
.db-rad small { display: block; font-size: .64rem; color: rgb(107,114,128); }
.db-rad em { flex: none; font-style: normal; font-size: .62rem; font-weight: 700; color: rgb(16,150,110); background: rgba(16,150,110,.1); padding: .15rem .5rem; border-radius: 99px; }
.db-merke { position: absolute; right: 0; bottom: 6%; z-index: 2; display: inline-flex; align-items: center; gap: .45rem; padding: .5rem .85rem; border-radius: 99px; font-size: .78rem; font-weight: 700;
    color: rgb(255,255,255); background: rgb(31,33,42); box-shadow: 0 14px 30px -10px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.12);
    opacity: 0; transform: translateY(8px) scale(.95); transition: opacity .5s ease 1.2s, transform .6s cubic-bezier(.2,1.6,.4,1) 1.2s; }
.db-merke::before { content: "✓"; display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; font-size: .62rem; background: rgb(16,150,110); }
.db-scene.orden .db-merke { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .db-bit { animation: none; } }

/* Ikonflis i kortene lenger ned */
.db-ikon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; margin-bottom: .9rem; color: rgb(204,74,21);
    background: linear-gradient(135deg, rgba(255,181,71,.22), rgba(255,61,139,.14)); }
.db-ikon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.db-kort { height: 100%; padding: 1.6rem 1.5rem; border-radius: 14px; background: rgb(255,255,255); box-shadow: 0 0 0 1px rgba(17,24,39,.06), 0 18px 40px -30px rgba(17,24,39,.4); }
.db-kort h3 { font-size: 1.1rem; margin: 0 0 .5rem; }
.db-kort p { margin: 0; color: rgb(75,85,99); }
.db-smerte { display: flex; gap: .9rem; align-items: flex-start; padding: 1.1rem 1.2rem; border-radius: 12px; background: rgb(255,255,255); box-shadow: 0 0 0 1px rgba(17,24,39,.06); height: 100%; }
.db-smerte b { flex: none; display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; font-size: .9rem; color: rgb(220,38,38); background: rgba(220,38,38,.08); }
.db-smerte p { margin: 0; }
.db-steg { counter-reset: steg; }
.db-steg li { position: relative; list-style: none; padding: 0 0 1.6rem 3.4rem; }
.db-steg li::before { counter-increment: steg; content: counter(steg); position: absolute; left: 0; top: -.2rem; width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-weight: 800; color: rgb(255,255,255); background: linear-gradient(135deg, rgb(255,181,71), rgb(255,61,139)); box-shadow: 0 8px 20px -8px rgba(255,61,139,.7); }
.db-steg li b { display: block; font-size: 1.1rem; margin-bottom: .25rem; }
.db-steg { padding: 0; margin: 0; }
.db-smerte b svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }