:root{
  --bg:#F3F5F7; --surface:#FFFFFF; --text:#0B1B2B; --body:#3D4C5A; --muted:#5B6B7A; --line:#E1E7EC; --rule:#D3DBE2;
  --link:#0E6F66; --navy:#0B1B2B; --navy2:#13283D; --navy3:#1B3550; --navyline:#2A3F54; --onnavy:#E8EEF3; --onnavy-muted:#B7C4D0;
  --accent:#2F6FE4; --onaccent:#0B1B2B;
  --head:'Space Grotesk', 'Segoe UI', system-ui, sans-serif; --sans:'IBM Plex Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
  color-scheme: light;
  box-sizing:border-box; padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --bg:#0F1720; --surface:#16212C; --text:#E8EEF3; --body:#B7C4D0; --muted:#8C9BAA; --line:#24313E; --rule:#24313E;
  --link:#2F6FE4; --navy:#0A1520; --navy2:#13283D; --navy3:#1B3550; color-scheme: dark; } }
:root[data-theme="dark"]{ --bg:#0F1720; --surface:#16212C; --text:#E8EEF3; --body:#B7C4D0; --muted:#8C9BAA; --line:#24313E; --rule:#24313E; --link:#2F6FE4; --navy:#0A1520; color-scheme: dark; }
html{scroll-padding-top:env(safe-area-inset-top,0px); background:var(--navy)}
*,*::before,*::after{box-sizing:border-box}
body{margin:0; background:var(--bg); color:var(--text); font-family:var(--sans); font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased}
img{max-width:100%}
a{color:var(--link)}
.skip{position:absolute; left:-9999px; top:8px; background:var(--accent); color:var(--onaccent); padding:10px 16px; border-radius:8px; z-index:10}
.skip:focus{left:12px}
.wrap{max-width:1240px; margin:0 auto; padding-left:32px; padding-right:32px}
h1,h2,h3{font-family:var(--head); font-weight:600; margin:0; color:inherit}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:6px}

/* header */
.site-head{background:var(--navy); color:var(--onnavy)}
.head-in{display:flex; align-items:center; justify-content:space-between; gap:20px; padding-top:22px; padding-bottom:22px; position:relative}
.logo{display:flex; align-items:center; gap:10px; text-decoration:none; color:#fff}
.logo-mark{width:34px; height:34px; border-radius:9px; background:var(--accent); color:var(--onaccent); display:flex; align-items:center; justify-content:center; font-family:var(--head); font-weight:700; font-size:20px}
.logo-word{font-family:var(--head); font-weight:600; font-size:24px; letter-spacing:-0.02em}
.nav{display:flex; align-items:center; gap:28px; font-size:15px}
.nav a,.dd summary{color:#C9D4DE; text-decoration:none; cursor:pointer}
.nav a:hover,.dd summary:hover{color:#fff}
.dd{position:relative}
.dd summary{list-style:none; display:flex; align-items:center; gap:6px; min-height:44px}
.dd summary::-webkit-details-marker{display:none}
.dd-panel{position:absolute; top:calc(100% + 6px); left:-16px; background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:8px; min-width:260px; display:flex; flex-direction:column; z-index:20; box-shadow:0 12px 32px rgba(11,27,43,.18)}
.dd-panel a{color:var(--text); padding:10px 14px; border-radius:10px}
.dd-panel a:hover{background:var(--bg); color:var(--text)}
.nav .btn{color:var(--onaccent)}
.menu-btn{display:none; background:none; border:1px solid var(--navyline); color:#fff; border-radius:10px; min-height:44px; padding:0 14px; font:inherit; font-size:15px; cursor:pointer}

/* buttons */
.btns{display:flex; flex-wrap:wrap; gap:14px; padding-top:8px}
.btn{display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:14px 26px; border-radius:999px; font-weight:600; font-size:16px; text-decoration:none; white-space:nowrap}
.btn-accent{background:var(--accent); color:var(--onaccent)}
.btn-accent:hover{filter:brightness(1.06); color:var(--onaccent)}
.btn-ghost{color:#fff; border:1px solid #3A4E61; font-weight:500}
.btn-ghost:hover{border-color:#6B8299; color:#fff}
.btn-lg{font-size:17px; padding:18px 32px}
.btn-sm{padding:10px 18px; font-size:15px}

/* hero */
.hero{background:var(--navy); color:var(--onnavy)}
.hero-in{display:flex; flex-wrap:wrap; align-items:center; gap:64px; padding-top:64px; padding-bottom:112px}
.hero-text{flex:999 1 560px; min-width:0; display:flex; flex-direction:column; gap:26px}
.eyebrow-acc{font-size:14px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); font-weight:600}
.h1-home,.h1-sub{color:#fff; letter-spacing:-0.03em; line-height:1.04}
.h1-home{font-size:clamp(40px,5.4vw,72px)}
.h1-sub{font-size:clamp(38px,4.6vw,60px)}
.lead{margin:0; font-size:20px; line-height:1.55; color:var(--onnavy-muted); max-width:620px}
.motif{flex:1 1 300px; max-width:420px; min-width:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px}
.motif span{aspect-ratio:1; border-radius:14px}
.m-a{background:#13283D}.m-b{background:#1B3550}.m-o{border:1px solid #2A3F54}.m-oc{border:1px solid #2A3F54; border-radius:50% !important}
.m-t{background:var(--accent)}.m-ic{display:flex; align-items:center; justify-content:center; color:var(--onaccent)}.m-ic svg{width:58%; height:58%}.m-tc{background:var(--accent); border-radius:50% !important}.m-l{background:#E8EEF3}

/* sections */
.intro{display:flex; flex-wrap:wrap; gap:40px 96px; padding-top:112px; padding-bottom:72px}
.eyebrow{font-size:14px; letter-spacing:.14em; text-transform:uppercase; color:var(--link); font-weight:600}
.intro .eyebrow{flex:1 1 220px; padding-top:10px}
.big{flex:999 1 560px; min-width:0; margin:0; font-family:var(--head); font-size:clamp(24px,2.4vw,34px); line-height:1.35; letter-spacing:-0.015em; font-weight:500}
.block{padding-top:56px; padding-bottom:64px; display:flex; flex-direction:column; gap:32px}
.view > .block:last-of-type{padding-bottom:120px}
.rowhead{display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:20px; border-top:1px solid var(--rule); padding-top:40px}
.rowhead h2,.sechead h2{font-size:clamp(30px,3.4vw,46px); letter-spacing:-0.025em; line-height:1.1}
.sechead{display:flex; flex-direction:column; gap:12px; border-top:1px solid var(--rule); padding-top:40px}
.sublead{margin:-12px 0 0; color:var(--body); max-width:720px; font-size:18px}
.linkstrong{font-weight:600; color:var(--text); text-decoration:none}
.linkstrong:hover{color:var(--link)}
.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:20px}
.card{background:var(--surface); border:1px solid var(--line); border-radius:20px; padding:36px; display:flex; flex-direction:column; gap:18px; color:var(--text); text-decoration:none}
a.card:hover{border-color:var(--link)}
.card-top{display:flex; justify-content:space-between; align-items:center}
.icbox{width:52px; height:52px; border-radius:14px; background:#0B1B2B; color:var(--accent); display:flex; align-items:center; justify-content:center; flex:0 0 52px}
.num{font-family:var(--head); font-size:15px; color:var(--muted)}
.card h3{font-size:24px; letter-spacing:-0.015em; line-height:1.2}
.card p{margin:0; color:var(--body); font-size:16px; flex-grow:1}
.more{font-weight:600; font-size:15px; color:var(--link)}
.tiles{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:16px}
.tile{background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:24px; display:flex; gap:18px; align-items:flex-start}
.tile h3{font-size:19px; letter-spacing:-0.01em; line-height:1.25; margin-bottom:6px}
.tile p{margin:0; color:var(--body); font-size:15.5px; line-height:1.55}
.band{background:var(--navy); color:var(--onnavy); border-radius:28px; padding:56px; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:28px}
.band > div{flex:999 1 480px; min-width:0; display:flex; flex-direction:column; gap:14px}
.band h2{color:#fff; font-size:clamp(26px,2.8vw,38px); letter-spacing:-0.02em; line-height:1.15}
.band p{margin:0; color:var(--onnavy-muted); max-width:680px}
.cta-wrap{padding:24px 32px 120px}
.cta{max-width:1176px; margin:0 auto; background:var(--navy); border-radius:28px; padding:64px; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:32px}
.cta h2{flex:999 1 480px; min-width:0; color:#fff; font-size:clamp(28px,3vw,42px); line-height:1.15; letter-spacing:-0.02em}
.prose{max-width:760px}
.hero-img{flex:1 1 380px; max-width:520px; min-width:0; border-radius:24px; overflow:hidden; aspect-ratio:4/3; background:#13283D}
.hero-img img{width:100%; height:100%; object-fit:cover; display:block}
.crumb{color:var(--accent); text-decoration:none}.crumb:hover{color:#fff}.crumb-sep{margin:0 10px; color:#5A7590}
.split{display:flex; flex-wrap:wrap; gap:32px 64px; align-items:center}
.split-text{flex:999 1 460px; min-width:0; display:flex; flex-direction:column; gap:20px}
.split-text .sublead{margin:0}
.panel{flex:1 1 360px; min-width:0; background:var(--surface); border:1px solid var(--line); border-radius:20px; padding:32px}
.checks{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px}
.checks li{display:flex; gap:12px; align-items:flex-start; color:var(--text); font-size:16px; line-height:1.5}
.chk{flex:0 0 24px; height:24px; border-radius:7px; background:var(--accent); color:var(--onaccent); display:flex; align-items:center; justify-content:center; margin-top:1px}
.stat{background:var(--navy); color:var(--onnavy); border-radius:28px; padding:48px 56px; display:flex; flex-wrap:wrap; align-items:center; gap:24px 48px}
.stat-num{font-family:var(--head); font-weight:600; font-size:clamp(48px,6vw,80px); line-height:1; letter-spacing:-0.03em; color:var(--accent); white-space:nowrap}
.stat-body{flex:1 1 360px; min-width:0}
.stat-body p{margin:0 0 10px; font-size:20px; line-height:1.5; color:#fff; max-width:640px}
.stat-src{font-size:14px; color:var(--onnavy-muted)}
.ladder{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:20px}
.lvl{background:var(--surface); border:1px solid var(--line); border-radius:20px; padding:32px; display:flex; flex-direction:column; gap:14px}
.lvl h3{font-size:24px; letter-spacing:-0.015em}
.lvl > p{margin:0; color:var(--body); font-size:16px}
.lvl-tag{font-size:13px; letter-spacing:.12em; text-transform:uppercase; font-weight:600; color:var(--link)}
.lvl-rec{background:var(--navy); border-color:var(--navy); color:#fff}
.lvl-rec > p{color:var(--onnavy-muted)} .lvl-rec .lvl-tag{color:var(--accent)} .lvl-rec .checks li{color:#fff}
.rels{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:16px}
.rel{display:flex; align-items:center; gap:18px; background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:22px; text-decoration:none; color:var(--text)}
.rel:hover{border-color:var(--link)}
.rel > span:nth-child(2){flex:1 1 auto; display:flex; flex-direction:column; gap:2px}
.rel strong{font-family:var(--head); font-size:19px; font-weight:600}
.rel > span:nth-child(2) > span{color:var(--body); font-size:15px}
.rel-arrow{color:var(--link); font-weight:600; font-size:18px}
.trust{background:var(--surface); border-bottom:1px solid var(--line)}
.trust-in{display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px 32px; padding-top:20px; padding-bottom:20px; font-size:15px; color:var(--body)}
.trust-in > span{display:flex; align-items:center; gap:10px}
.tdot{width:8px; height:8px; border-radius:50%; background:var(--accent); flex:0 0 8px}
.inds{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:0; border-top:1px solid var(--rule)}
.ind{padding:28px 28px 28px 0; border-bottom:1px solid var(--rule); display:flex; flex-direction:column; gap:8px}
.ind h3{font-size:22px; letter-spacing:-0.015em}
.ind p{margin:0; color:var(--body); font-size:16px}
.cards-4{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.stack{display:flex; flex-direction:column; gap:10px}
.layer{display:flex; align-items:center; gap:18px; background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:20px 24px; text-decoration:none; color:var(--text)}
.layer:hover{border-color:var(--link)}
.layer-txt{flex:1 1 auto; display:flex; flex-direction:column; gap:2px; min-width:0}
.layer-txt strong{font-family:var(--head); font-size:20px; font-weight:600}
.layer-txt span{color:var(--body); font-size:15.5px}
.layer-sec{background:var(--navy); border-color:var(--navy); color:#fff}
.layer-sec .layer-txt span{color:var(--onnavy-muted)} .layer-sec .rel-arrow{color:var(--accent)}
.layer-base{text-align:center; font-family:var(--head); font-weight:600; font-size:15px; letter-spacing:.06em; text-transform:uppercase; color:var(--onaccent); background:var(--accent); border-radius:14px; padding:14px}
.steps{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:20px}
.steps li{border-top:2px solid var(--text); padding-top:20px; display:flex; flex-direction:column; gap:8px}
.stepnum{font-family:var(--head); font-size:14px; color:var(--link); font-weight:600}
.steps h3{font-size:21px; letter-spacing:-0.01em}
.steps p{margin:0; color:var(--body); font-size:16px}
.placeholder{color:var(--muted); font-style:italic}


/* grafikk og bevegelse */
.orbit{flex:1 1 340px; max-width:460px; min-width:0}
.orbit svg{display:block; height:auto; overflow:visible}
.o-bg{fill:#0F2235}
.o-ring{stroke:#2A4560; stroke-width:1.2}
.o-dash{stroke-dasharray:2 8}
.o-dash2{stroke-dasharray:4 6}
.o-line{stroke:var(--accent); stroke-opacity:.45; stroke-width:1.5}
.o-box{fill:#13283D; stroke:#35506B}
.o-ic{stroke:#E8EEF3; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; fill:none}
.o-lbl{fill:#B7C4D0; font-family:var(--head); font-size:14px; font-weight:500}
.o-glow{fill:var(--accent); fill-opacity:.14}
.o-core{fill:var(--accent)}
.o-q{fill:#0B1B2B; font-family:var(--head); font-weight:700; font-size:48px}
.o-dot-a{fill:var(--accent)} .o-dot-l{fill:#E8EEF3} .o-dot-m{fill:#5A7590}
.o-pk{fill:var(--accent); opacity:0; animation:pk 3.6s ease-in-out infinite}
@keyframes pk{0%{transform:translate(0,0); opacity:0} 15%{opacity:1} 85%{opacity:1} 100%{transform:translate(var(--tx),var(--ty)); opacity:0}}
.o-spin{transform-origin:220px 220px; animation:spin 80s linear infinite}
.o-spin-rev{transform-origin:220px 220px; animation:spin 50s linear infinite reverse}
@keyframes spin{to{transform:rotate(360deg)}}
.o-node .o-box{animation:nodeglow 4.8s ease-in-out infinite; animation-delay:inherit}
@keyframes nodeglow{0%,100%{stroke:#35506B} 50%{stroke:var(--accent)}}
.o-glow{transform-origin:220px 220px; animation:breathe 4s ease-in-out infinite}
@keyframes breathe{0%,100%{transform:scale(1); fill-opacity:.12} 50%{transform:scale(1.12); fill-opacity:.2}}
.motif span:nth-child(5n+2), .motif span:nth-child(7n+4){animation:tile 7s ease-in-out infinite}
.motif span:nth-child(7n+4){animation-delay:2.5s}
@keyframes tile{0%,100%{opacity:1} 50%{opacity:.45}}
.m-ic{box-shadow:0 0 0 0 rgba(47,111,228,.5); animation:ping 3.2s ease-out infinite}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(47,111,228,.45)} 70%,100%{box-shadow:0 0 0 18px rgba(47,111,228,0)}}
.cta,.band,.stat{position:relative; overflow:hidden; isolation:isolate}
.cta::after,.band::after,.stat::after{content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image:radial-gradient(rgba(47,111,228,.22) 1.2px, transparent 1.6px); background-size:20px 20px;
  -webkit-mask-image:linear-gradient(90deg, transparent 35%, #000 100%); mask-image:linear-gradient(90deg, transparent 35%, #000 100%)}
.steps li{position:relative}
.steps li::before{content:""; position:absolute; top:-7px; left:0; width:12px; height:12px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 4px var(--bg)}
.js .rv{opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease}
.js .rv.in{opacity:1; transform:none}
.card,.tile,.layer,.rel,.lvl{transition:transform .2s ease, border-color .2s ease}
a.card:hover,.layer:hover,.rel:hover{transform:translateY(-3px)}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none !important; transition:none !important}
  .js .rv{opacity:1; transform:none}
  .o-pk{opacity:0}
}

.illus{flex:1 1 360px; max-width:480px; min-width:0}
.illus svg{display:block; height:auto}
.il-t{fill:#B7C4D0; font-family:var(--head); font-size:15px; font-weight:500}
.il-t-big{fill:#FFFFFF; font-size:17px; font-weight:600}
.il-t-dark{fill:#0B1B2B; font-family:var(--head); font-size:13px; font-weight:600}
.chips{display:flex; flex-wrap:wrap; gap:8px}
.chip{font:inherit; font-size:15px; min-height:44px; padding:0 18px; border-radius:999px; border:1px solid var(--line); background:var(--surface); color:var(--text); cursor:pointer}
.chip:hover{border-color:var(--link)}
.chip.on{background:var(--navy); color:#fff; border-color:var(--navy)}
.posts{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:20px}
.post{background:var(--surface); border:1px solid var(--line); border-radius:20px; padding:28px; display:flex; flex-direction:column; gap:14px; text-decoration:none; color:var(--text); transition:transform .2s ease, border-color .2s ease}
.post:hover{border-color:var(--link); transform:translateY(-3px)}
.post[hidden]{display:none}
.post-top{display:flex; align-items:center; gap:12px}
.post-top .icbox{width:40px; height:40px; flex:0 0 40px; border-radius:11px}
.post-top .icbox svg{width:20px; height:20px}
.post-cat{font-size:13px; letter-spacing:.1em; text-transform:uppercase; font-weight:600; color:var(--link)}
.post h3{font-size:21px; line-height:1.25; letter-spacing:-0.01em}
.post p{margin:0; color:var(--body); font-size:15.5px; flex-grow:1}
.post-meta{font-size:14px; color:var(--muted)}
.post-hero{padding-bottom:80px}
.post-meta-hero{font-size:15px; color:var(--onnavy-muted)}
.article{max-width:760px; display:flex; flex-direction:column; gap:18px}
.article h2{font-size:clamp(24px,2.4vw,30px); letter-spacing:-0.02em; margin-top:16px}
.article p{margin:0; font-size:18px; line-height:1.7; color:var(--body)}
.article-panel{margin-top:16px; display:flex; flex-direction:column; gap:18px}
.article-panel h2{margin:0; font-size:24px}
.sources h3{font-family:var(--sans); font-size:13px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); font-weight:600; margin-bottom:8px}
.sources ul{margin:0; padding-left:20px; color:var(--body); font-size:15px; display:flex; flex-direction:column; gap:6px}
.article-help{margin-top:8px; border-top:1px solid var(--rule); padding-top:24px; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px}
.article-help p{font-size:17px; margin:0; max-width:460px}
/* footer */
.site-foot{border-top:1px solid var(--rule); background:var(--bg)}
.foot-in{display:flex; flex-wrap:wrap; gap:48px 80px; padding-top:64px; padding-bottom:40px}
.foot-brand{flex:2 1 340px; display:flex; flex-direction:column; gap:16px}
.foot-brand .logo{color:var(--text)}
.foot-brand .logo-mark{background:#0B1B2B; color:var(--accent); width:30px; height:30px; font-size:18px; border-radius:8px}
.foot-brand .logo-word{font-size:22px}
.foot-brand p{margin:0; font-size:15px; color:var(--body); max-width:420px}
.foot-col{flex:1 1 200px; display:flex; flex-direction:column; gap:10px; font-size:15px}
.foot-col h2{font-family:var(--sans); font-size:13px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); font-weight:600; margin-bottom:4px}
.foot-col a{color:var(--text); text-decoration:none}
.foot-col a:hover{color:var(--link)}
.copy{padding-bottom:40px; font-size:14px; color:var(--muted)}

@media (max-width: 860px){
  .wrap{padding-left:20px; padding-right:20px}
  .menu-btn{display:inline-flex; align-items:center}
  .nav{display:none; position:absolute; top:100%; left:12px; right:12px; flex-direction:column; align-items:stretch; gap:4px; background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:12px; z-index:30; box-shadow:0 12px 32px rgba(11,27,43,.25)}
  .nav.open{display:flex}
  .nav a,.dd summary{color:var(--text); padding:10px 12px; border-radius:10px}
  .nav a:hover,.dd summary:hover{color:var(--text); background:var(--bg)}
  .dd-panel{position:static; box-shadow:none; border:none; padding:0 0 0 12px; min-width:0}
  .nav .btn{margin-top:8px}
  .hero-in{padding-top:40px; padding-bottom:72px; gap:40px}
  .motif{display:none}
  .orbit{max-width:320px; margin:0 auto}
  .illus{max-width:380px; margin:0 auto}
  .hero-img{max-width:none; aspect-ratio:16/9}
  .intro{padding-top:72px; padding-bottom:40px}
  .card{padding:28px}
  .band,.cta,.stat{padding:36px 28px}
  .panel{padding:24px}
  .cta-wrap{padding:16px 20px 80px}
}

/* ==========================================================
   Moderne lag – mørkt, futuristisk uttrykk
   Bytt bilder ved å endre URL-ene i --img-* under.
   ========================================================== */
:root:root:root{
  --bg:#05070D; --surface:rgba(255,255,255,.035); --surface-solid:#0B111C; --text:#EEF3F8; --body:#A9B6C4; --muted:#7D8B9A;
  --line:rgba(255,255,255,.08); --rule:rgba(255,255,255,.08); --link:#2F6FE4; --navy:#070B14; --navy2:#0D1524; --navy3:#14203A;
  --navyline:rgba(255,255,255,.12); --onnavy:#E8EEF3; --onnavy-muted:#A9B6C4;
  --accent:#2F6FE4; --accent2:#5B8CFF; --accent3:#5B8CFF; --onaccent:#04121A;
  --grad:linear-gradient(120deg,#2F6FE4 0%,#5B8CFF 55%,#5B8CFF 100%);
  --ease:cubic-bezier(.2,.7,.2,1);
  color-scheme:dark;

  --img-hjem:url("https://images.unsplash.com/photo-1654198340681-a2e0fc449f1b?w=2000&q=75&auto=format&fit=crop");
  --img-m365:url("https://images.unsplash.com/photo-1522202176988-66273c2fd55f?w=2000&q=75&auto=format&fit=crop");
  --img-azure:url("https://images.unsplash.com/photo-1680992046626-418f7e910589?w=2000&q=75&auto=format&fit=crop");
  --img-sikkerhet:url("https://images.unsplash.com/photo-1550751827-4bd374c3f58b?w=2000&q=75&auto=format&fit=crop");
  --img-ai:url("https://images.unsplash.com/photo-1753513291124-4f615bf1f6de?w=2000&q=75&auto=format&fit=crop");
  --img-itdrift:url("https://images.unsplash.com/photo-1763128516808-785e80c1dd68?w=2000&q=75&auto=format&fit=crop");
  --img-om:url("https://images.unsplash.com/photo-1541746972996-4e0b0f43e02a?w=2000&q=75&auto=format&fit=crop");
  --img-kontakt:url("https://images.unsplash.com/photo-1572021335469-31706a17aaef?w=2000&q=75&auto=format&fit=crop");
  --img-blogg:url("https://images.unsplash.com/photo-1614852206732-6728910dc175?w=2000&q=75&auto=format&fit=crop");
  --img-default:url("https://images.unsplash.com/photo-1638376776402-9a4b75fe21bb?w=2000&q=75&auto=format&fit=crop");
  --img-cat-sik:url("https://images.unsplash.com/photo-1614064641938-3bbee52942c7?w=900&q=70&auto=format&fit=crop");
  --img-cat-ai:url("https://images.unsplash.com/photo-1677442135136-760c813028c0?w=900&q=70&auto=format&fit=crop");
  --img-cat-trend:url("https://images.unsplash.com/photo-1758687125988-29bd184f0d09?w=900&q=70&auto=format&fit=crop");
  --img-cat-drift:url("https://images.unsplash.com/photo-1785682117028-6fcf2c0b515b?w=900&q=70&auto=format&fit=crop");
  --img-cat-pris:url("https://images.unsplash.com/photo-1771054243991-e7b2d194ac96?w=900&q=70&auto=format&fit=crop");
}
html{background:var(--bg)}
body{background:var(--bg); position:relative; isolation:isolate; overflow-x:hidden}
::selection{background:rgba(47,111,228,.35); color:#fff}

/* bakgrunn: aurora, rutenett og korn */
.aurora{position:fixed; inset:0; z-index:-2; pointer-events:none; overflow:hidden}
.aurora i{position:absolute; width:60vmax; height:60vmax; border-radius:50%; filter:blur(90px); opacity:.22; will-change:transform}
.aurora i:nth-child(1){background:#2F6FE4; top:-25vmax; left:-15vmax; animation:aur1 26s ease-in-out infinite alternate}
.aurora i:nth-child(2){background:#5B8CFF; top:10vmax; right:-25vmax; opacity:.18; animation:aur2 32s ease-in-out infinite alternate}
.aurora i:nth-child(3){background:#5B8CFF; bottom:-35vmax; left:20vmax; opacity:.12; animation:aur3 38s ease-in-out infinite alternate}
@keyframes aur1{to{transform:translate(20vmax,15vmax) scale(1.2)}}
@keyframes aur2{to{transform:translate(-18vmax,20vmax) scale(.85)}}
@keyframes aur3{to{transform:translate(-15vmax,-20vmax) scale(1.15)}}
body::before{content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 0%, #000 20%, transparent 75%); mask-image:radial-gradient(ellipse 80% 60% at 50% 0%, #000 20%, transparent 75%)}
body::after{content:""; position:fixed; inset:0; z-index:100; pointer-events:none; opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* markør-glød */
.cursor-glow{position:fixed; left:0; top:0; width:520px; height:520px; margin:-260px 0 0 -260px; border-radius:50%; pointer-events:none; z-index:-1;
  background:radial-gradient(circle, rgba(47,111,228,.13), rgba(91,140,255,.06) 40%, transparent 70%); opacity:0; transition:opacity .4s; will-change:transform}
.cursor-glow.on{opacity:1}
@media (hover:none){ .cursor-glow{display:none} }

/* fremdriftslinje */
.progress{position:fixed; top:0; left:0; right:0; height:2px; z-index:70; transform-origin:0 50%; transform:scaleX(0); background:var(--grad); box-shadow:0 0 12px rgba(47,111,228,.8); pointer-events:none}

/* header i glass */
.site-head{position:sticky; top:0; z-index:60; background:rgba(5,7,13,.45); -webkit-backdrop-filter:blur(18px) saturate(160%); backdrop-filter:blur(18px) saturate(160%); border-bottom:1px solid transparent; transition:background .3s, border-color .3s}
.site-head.scrolled{background:rgba(5,7,13,.78); border-bottom-color:var(--line)}
.head-in{transition:padding .3s var(--ease)}
.site-head.scrolled .head-in{padding-top:12px; padding-bottom:12px}
.logo-mark{background:var(--grad); box-shadow:0 0 24px -4px rgba(47,111,228,.7); transition:transform .4s var(--ease)}
.logo:hover .logo-mark{transform:rotate(-8deg) scale(1.06)}
.nav > a:not(.btn), .dd summary{position:relative}
.nav > a:not(.btn)::after{content:""; position:absolute; left:0; right:0; bottom:-6px; height:1px; background:var(--grad); transform:scaleX(0); transform-origin:left; transition:transform .35s var(--ease)}
.nav > a:not(.btn):hover::after{transform:scaleX(1)}
.dd-panel{background:rgba(11,17,28,.92); -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px); border-color:var(--line); box-shadow:0 24px 60px -12px rgba(0,0,0,.7); animation:ddin .25s var(--ease)}
@keyframes ddin{from{opacity:0; transform:translateY(-6px)}}
.dd-panel a:hover{background:rgba(47,111,228,.08)}

/* knapper */
.btn{position:relative; overflow:hidden; isolation:isolate; transition:box-shadow .3s, background-position .5s var(--ease), border-color .3s, translate .25s var(--ease)}
.btn-accent{background:linear-gradient(120deg,#2F6FE4,#4F86EE 40%,#5B8CFF); background-size:200% 100%; color:var(--onaccent); box-shadow:0 8px 30px -10px rgba(47,111,228,.6)}
.btn-accent:hover{filter:none; background-position:100% 0; box-shadow:0 12px 44px -8px rgba(47,111,228,.8)}
.btn-accent::after{content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(110deg, transparent 30%, rgba(255,255,255,.55) 50%, transparent 70%); transform:translateX(-120%)}
.btn-accent:hover::after{transform:translateX(120%); transition:transform .8s var(--ease)}
.btn-ghost{background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.16); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px)}
.btn-ghost:hover{border-color:rgba(47,111,228,.6); box-shadow:0 0 30px -10px rgba(47,111,228,.6)}

/* hero med bilde */
.hero{position:relative; background:transparent; overflow:hidden; isolation:isolate; --hero-img:var(--img-default); --py:0}
.hero::before{content:""; position:absolute; inset:-10% 0 -10% 0; z-index:-2; background:var(--hero-img) center/cover no-repeat; opacity:.5;
  translate:0 calc(var(--py) * 1px); animation:kenburns 28s ease-in-out infinite alternate}
@keyframes kenburns{from{scale:1.04} to{scale:1.16}}
.hero::after{content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(90deg, rgba(5,7,13,.96) 0%, rgba(5,7,13,.78) 45%, rgba(5,7,13,.35) 100%);
  -webkit-mask-image:linear-gradient(180deg, #000 55%, transparent 100%); mask-image:linear-gradient(180deg, #000 55%, transparent 100%)}
.hero::before{-webkit-mask-image:linear-gradient(180deg, #000 50%, transparent 92%); mask-image:linear-gradient(180deg, #000 50%, transparent 92%)}
.view[data-view="hjem"] .hero{--hero-img:var(--img-hjem)}
.view[data-view="m365"] .hero{--hero-img:var(--img-m365)}
.view[data-view="azure"] .hero{--hero-img:var(--img-azure)}
.view[data-view="sikkerhet"] .hero{--hero-img:var(--img-sikkerhet)}
.view[data-view="ai"] .hero{--hero-img:var(--img-ai)}
.view[data-view="itdrift"] .hero{--hero-img:var(--img-itdrift)}
.view[data-view="om"] .hero{--hero-img:var(--img-om)}
.view[data-view="kontakt"] .hero{--hero-img:var(--img-kontakt)}
.view[data-view="blogg"] .hero{--hero-img:var(--img-blogg)}
.view[data-view="hjem"] .hero-in{min-height:min(86vh,880px); padding-top:80px}
.hero .post-hero ~ *, .hero .post-hero{position:relative}

.h1-home,.h1-sub{text-wrap:balance}
.h1-home{font-size:clamp(44px,6.4vw,92px); letter-spacing:-0.045em; line-height:.98}
.grad,.grad .w{background:var(--grad); background-size:200% 100%; -webkit-background-clip:text; background-clip:text; color:transparent; animation:gradshift 8s ease-in-out infinite alternate}
@keyframes gradshift{to{background-position:100% 0}}
.w{display:inline-block; white-space:pre}
.hero.play .w{animation:wordin .9s var(--ease) both; animation-delay:calc(var(--i) * 55ms + 80ms)}
.hero.play .grad .w{animation:wordin .9s var(--ease) both, gradshift 8s ease-in-out infinite alternate; animation-delay:calc(var(--i) * 55ms + 80ms), 0s}
@keyframes wordin{from{opacity:0; transform:translateY(.45em) rotate(2deg); filter:blur(10px)}}
.hero.play .hero-text > :not(h1){animation:fadeup .9s var(--ease) both}
.hero.play .hero-text > :nth-child(1){animation-delay:0s}
.hero.play .hero-text > :nth-child(3){animation-delay:.35s}
.hero.play .hero-text > :nth-child(4){animation-delay:.5s}
.hero.play .hero-text > :nth-child(5){animation-delay:.6s}
.hero.play .motif,.hero.play .illus{animation:fadeup 1.2s var(--ease) .3s both}
@keyframes fadeup{from{opacity:0; transform:translateY(24px)}}
.hero .eyebrow-acc{display:inline-flex; align-items:center; gap:10px; align-self:flex-start; padding:7px 16px 7px 12px; border-radius:999px; border:1px solid rgba(47,111,228,.3); background:rgba(47,111,228,.07); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); font-size:13px}
.hero .eyebrow-acc::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 0 rgba(47,111,228,.6); animation:ping 2.4s ease-out infinite; flex:0 0 7px}
.lead{color:#B9C6D3}
.scroll-hint{position:absolute; left:50%; bottom:28px; translate:-50% 0; width:26px; height:42px; border:1px solid rgba(255,255,255,.25); border-radius:14px; display:flex; justify-content:center; padding-top:8px}
.scroll-hint::before{content:""; width:3px; height:8px; border-radius:2px; background:var(--accent); animation:wheel 1.8s ease-in-out infinite}
@keyframes wheel{0%{opacity:0; transform:translateY(-3px)} 30%{opacity:1} 100%{opacity:0; transform:translateY(12px)}}

/* motiv-ruter og illustrasjoner */
.motif span{transition:transform .35s var(--ease), box-shadow .35s, background .35s; transform:scale(var(--s,1))}
.m-a{background:rgba(255,255,255,.04); box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)} .m-b{background:rgba(91,140,255,.12); box-shadow:inset 0 0 0 1px rgba(91,140,255,.18)}
.m-o,.m-oc{border-color:rgba(255,255,255,.14)}
.m-t,.m-tc{background:var(--grad); box-shadow:0 0 40px -6px rgba(47,111,228,.6)}
.motif span.hot{box-shadow:0 0 0 1px rgba(47,111,228,.6), 0 0 30px -4px rgba(47,111,228,.6)}
.illus svg{filter:drop-shadow(0 30px 60px rgba(0,0,0,.5)) drop-shadow(0 0 40px rgba(47,111,228,.12)); animation:float 9s ease-in-out infinite}
@keyframes float{50%{transform:translateY(-12px)}}

/* teknologi-bånd */
.marquee{position:relative; overflow:hidden; border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:rgba(255,255,255,.015);
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image:linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent)}
.marquee-track{display:flex; width:max-content; animation:marq 138s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-track span{display:flex; align-items:center; gap:18px; padding:22px 18px; font-family:var(--head); font-size:clamp(18px,2vw,24px); font-weight:500; color:#8C9BAA; white-space:nowrap; transition:color .3s}
.marquee-track span:hover{color:#fff}
.marquee-track span::after{content:""; width:6px; height:6px; border-radius:50%; background:var(--accent); box-shadow:0 0 10px var(--accent); margin-left:18px}
@keyframes marq{to{transform:translateX(-50%)}}

/* bento-galleri */
.bento{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); grid-auto-rows:230px; gap:16px}
.b{position:relative; margin:0; border-radius:24px; overflow:hidden; isolation:isolate; border:1px solid var(--line); background:#0B111C}
.b-lg{grid-column:span 2; grid-row:span 2}
.b-wide{grid-column:span 2}
.b img{position:absolute; inset:0; width:100%; height:115%; object-fit:cover; z-index:-2; transition:transform 1.2s var(--ease), filter .6s; filter:saturate(.85) brightness(.8)}
.b:hover img{transform:scale(1.06); filter:saturate(1.05) brightness(.95)}
.b::before{content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg, transparent 35%, rgba(5,7,13,.92) 100%)}
a.b{display:block; text-decoration:none; color:#fff}
.b-cap{position:absolute; left:24px; right:24px; bottom:22px; font-family:var(--head); font-size:clamp(18px,1.7vw,24px); font-weight:600; line-height:1.2; letter-spacing:-0.01em; color:#fff; transition:transform .5s var(--ease)}
.b-cap > span{display:block; margin-bottom:8px; font-family:var(--sans); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); font-weight:600}
.b-more{display:block; margin-top:10px; font-family:var(--sans); font-style:normal; font-size:14px; font-weight:600; color:var(--accent); opacity:0; transform:translateY(6px); transition:opacity .4s, transform .4s var(--ease)}
.b:hover .b-cap,.b:focus-visible .b-cap{transform:translateY(-6px)}
.b:hover .b-more,.b:focus-visible .b-more{opacity:1; transform:none}
@media (hover:none){ .b-more{opacity:1; transform:none} }
.hero .hero-img{position:relative; border:1px solid var(--line); box-shadow:0 40px 100px -30px rgba(0,0,0,.8), 0 0 60px -20px rgba(47,111,228,.35)}
.hero .hero-img img{filter:saturate(.9) brightness(.9)}
.hero.play .hero-img{animation:fadeup 1.2s var(--ease) .3s both}
@supports (animation-timeline: view()){
  .b img{animation:imgpar linear both; animation-timeline:view(); animation-range:cover}
  @keyframes imgpar{from{translate:0 -12%} to{translate:0 0}}
}

/* seksjoner */
.big{background:linear-gradient(90deg, #fff, #9FB0C2); -webkit-background-clip:text; background-clip:text; color:transparent}
.rowhead h2,.sechead h2{letter-spacing:-0.035em; text-wrap:balance}
.eyebrow{display:flex; align-items:center; gap:10px}
.eyebrow::before{content:""; width:22px; height:1px; background:var(--grad)}
.sechead,.rowhead{border-top-color:transparent; position:relative}
.sechead::before,.rowhead::before{content:""; position:absolute; top:-1px; left:0; right:0; height:1px; background:linear-gradient(90deg, rgba(47,111,228,.5), rgba(255,255,255,.08) 40%, transparent)}
.linkstrong{transition:color .3s, letter-spacing .3s}

/* kort i glass med lyskaster */
.card,.tile,.lvl,.rel,.layer,.post,.panel{background:linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.015)); border-color:var(--line); position:relative; isolation:isolate; overflow:hidden}
.fx::before{content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit; pointer-events:none; opacity:0; transition:opacity .4s;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%), rgba(47,111,228,.12), transparent 45%)}
.fx::after{content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; pointer-events:none; opacity:0; transition:opacity .4s;
  background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%), rgba(47,111,228,.9), rgba(91,140,255,.4) 40%, transparent 70%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0)}
.fx:hover::before,.fx:hover::after{opacity:1}
a.card:hover,.layer:hover,.rel:hover,.post:hover{border-color:rgba(47,111,228,.25)}
.card,.lvl,.post,.b{transform-style:preserve-3d}
.tilting{transition:transform .15s ease-out !important}
.icbox{background:linear-gradient(135deg, rgba(47,111,228,.2), rgba(91,140,255,.1)); border:1px solid rgba(47,111,228,.28); box-shadow:inset 0 0 18px rgba(47,111,228,.12); transition:box-shadow .4s, transform .4s var(--ease)}
.fx:hover .icbox{box-shadow:inset 0 0 18px rgba(47,111,228,.25), 0 0 26px -4px rgba(47,111,228,.6); transform:translateZ(30px) scale(1.05)}
.num{font-variant-numeric:tabular-nums}
.card h3,.lvl h3,.post h3{transition:color .3s}
a.card:hover h3,.post:hover h3{color:#fff}
.more,.rel-arrow{transition:transform .3s var(--ease)}
.fx:hover .more,.fx:hover .rel-arrow{transform:translateX(5px)}

/* post-bilder */
.post{padding-top:0}
.post-img{display:block; margin:0 -28px 6px; aspect-ratio:16/8; background:var(--pimg, var(--img-cat-trend)) center/cover; position:relative; overflow:hidden; filter:saturate(.8) brightness(.75); transition:filter .5s, transform .8s var(--ease)}
.post-img::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 40%, rgba(11,17,28,.9))}
.post:hover .post-img{filter:saturate(1.05) brightness(.95)}
.post[data-cat="sik"]{--pimg:var(--img-cat-sik)} .post[data-cat="ai"]{--pimg:var(--img-cat-ai)} .post[data-cat="trend"]{--pimg:var(--img-cat-trend)}
.post[data-cat="drift"]{--pimg:var(--img-cat-drift)} .post[data-cat="pris"]{--pimg:var(--img-cat-pris)}

/* uthevede flater */
.band,.cta,.stat{border:1px solid var(--line);
  background:radial-gradient(120% 140% at 100% 0%, rgba(91,140,255,.22), transparent 50%), radial-gradient(100% 120% at 0% 100%, rgba(47,111,228,.16), transparent 55%), #0A101C}
.band::before,.cta::before,.stat::before{content:""; position:absolute; z-index:-1; width:520px; height:520px; right:-160px; top:-260px; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, rgba(47,111,228,.28), transparent 62%); animation:orb 14s ease-in-out infinite alternate}
@keyframes orb{to{transform:translate(-240px,180px) scale(1.25)}}
.cta{box-shadow:0 40px 120px -40px rgba(47,111,228,.35)}
.cta h2{background:linear-gradient(90deg,#fff,#B9C6D3); -webkit-background-clip:text; background-clip:text; color:transparent}
.stat-num{background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; font-variant-numeric:tabular-nums}
.lvl-rec{background:linear-gradient(180deg, rgba(47,111,228,.14), rgba(91,140,255,.05)); border-color:rgba(47,111,228,.4); box-shadow:0 0 80px -30px rgba(47,111,228,.6)}
.layer-sec{background:linear-gradient(90deg, rgba(47,111,228,.14), rgba(91,140,255,.08)); border-color:rgba(47,111,228,.35)}
.layer-base{background:var(--grad)}
.chk{background:var(--grad)}
.steps li{border-top:1px solid var(--line)}
.steps li::before{box-shadow:0 0 0 4px var(--bg), 0 0 16px rgba(47,111,228,.8); z-index:1}
.steps li::after{content:""; position:absolute; top:-1px; left:0; width:0; height:1px; background:var(--grad); transition:width 1.4s var(--ease) .3s}
.steps li.in::after{width:100%}
.ind{transition:padding-left .4s var(--ease)}
.ind:hover{padding-left:12px}
.ind:hover h3{background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent}
.chip{background:rgba(255,255,255,.03); transition:border-color .3s, background .3s, box-shadow .3s}
.chip.on{background:rgba(47,111,228,.14); border-color:rgba(47,111,228,.6); color:#fff; box-shadow:0 0 24px -8px rgba(47,111,228,.7)}

/* scroll-avsløring */
.js .rv{opacity:0; transform:translateY(32px) scale(.985); filter:blur(6px); transition:opacity .9s var(--ease), transform .9s var(--ease), filter .9s var(--ease), border-color .3s, box-shadow .3s; transition-delay:var(--d,0ms)}
.js .rv.in{opacity:1; transform:none; filter:none}

/* footer */
.site-foot{position:relative; overflow:hidden; isolation:isolate; background:linear-gradient(180deg, transparent, rgba(47,111,228,.035)); border-top-color:var(--line)}
.site-foot::before{content:""; position:absolute; top:-1px; left:10%; right:10%; height:1px; background:linear-gradient(90deg, transparent, rgba(47,111,228,.7), transparent)}
.foot-brand .logo-mark{background:var(--grad); color:var(--onaccent)}

@media (max-width: 860px){
  .nav{background:rgba(11,17,28,.97); -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px)}
  .nav a,.dd summary{color:var(--text)}
  .nav > a:not(.btn)::after{display:none}
  .hero::after{background:linear-gradient(180deg, rgba(5,7,13,.75) 0%, rgba(5,7,13,.85) 60%, var(--bg) 100%)}
  .view[data-view="hjem"] .hero-in{min-height:0; padding-top:48px}
  .scroll-hint{display:none}
  .hero .eyebrow-acc{font-size:11px; letter-spacing:.1em; border-radius:14px}
  .bento{grid-template-columns:repeat(2,minmax(0,1fr)); grid-auto-rows:180px; gap:12px}
  .b-lg{grid-row:span 2}
  .b-cap{left:16px; right:16px; bottom:14px}
  .post-img{margin:0 -28px 6px}
}
@media (max-width: 520px){
  .bento{grid-template-columns:minmax(0,1fr); grid-auto-rows:200px}
  .b-lg,.b-wide{grid-column:auto; grid-row:auto}
}
@media (prefers-reduced-motion: reduce){
  .js .rv{filter:none}
  .hero::before{translate:none}
  .marquee-track{transform:none}
}

.article .panel{flex:none}

/* ===== CTA med e-post ===== */
.cta-big{align-items:center}
.cta-text{flex:999 1 440px; min-width:0; display:flex; flex-direction:column; gap:16px}
.cta .cta-text h2{flex:none; font-size:clamp(28px,3vw,42px)}
.cta-text p{margin:0; color:var(--onnavy-muted); max-width:520px}
.cta-actions{flex:1 1 380px; min-width:0; display:flex; flex-direction:column; gap:16px}
.cta-mail{display:flex; align-items:center; gap:16px; padding:18px 22px; border-radius:20px; text-decoration:none; color:#fff; background:rgba(255,255,255,.04); border:1px solid rgba(47,111,228,.35); transition:border-color .3s, box-shadow .3s, background .3s}
.cta-mail:hover{border-color:var(--accent); background:rgba(47,111,228,.08); box-shadow:0 0 40px -10px rgba(47,111,228,.7); color:#fff}
.cta-mail > span:last-child{display:flex; flex-direction:column; font-family:var(--head); font-size:clamp(22px,2.4vw,30px); font-weight:600; letter-spacing:-0.02em; line-height:1.15; min-width:0; overflow-wrap:anywhere}
.cta-mail small{font-family:var(--sans); font-size:13px; font-weight:500; letter-spacing:.08em; text-transform:uppercase; color:var(--accent)}
.cta-mail-ic{flex:0 0 52px; height:52px; border-radius:14px; display:flex; align-items:center; justify-content:center; background:var(--grad); color:var(--onaccent); box-shadow:0 0 30px -6px rgba(47,111,228,.7)}
.cta-row{display:flex; flex-wrap:wrap; gap:12px}
.cta-row .btn{flex:1 1 auto}
button.btn{font:inherit; font-weight:600; cursor:pointer; color:#fff}
.btn.copied{border-color:var(--accent); color:var(--accent)}
.cta-phone{color:var(--onnavy-muted); font-size:15px; text-decoration:none}
.cta-phone:hover{color:#fff}

/* flytende kontaktknapp */
.float-cta{position:fixed; right:20px; bottom:20px; z-index:55; display:flex; align-items:center; gap:10px; padding:12px 18px; border-radius:999px; text-decoration:none; font-weight:600; font-size:15px;
  color:var(--onaccent); background:linear-gradient(120deg,#2F6FE4,#5B8CFF); box-shadow:0 12px 40px -8px rgba(47,111,228,.7);
  opacity:0; transform:translateY(20px); pointer-events:none; transition:opacity .35s, transform .35s var(--ease)}
.float-cta.show{opacity:1; transform:none; pointer-events:auto}
.float-cta:hover{color:var(--onaccent); box-shadow:0 16px 50px -8px rgba(47,111,228,.9)}

/* kontaktskjema */
.contact-form{display:flex; flex-direction:column; gap:16px; flex:2 1 520px}
.split:has(.contact-form) .split-text{flex:1 1 300px}
.split:has(.contact-form){align-items:flex-start}
.contact-form label{display:flex; flex-direction:column; gap:6px; font-size:14px; font-weight:600; color:var(--body); flex:1 1 200px; min-width:0}
.f-row{display:flex; flex-wrap:wrap; gap:16px}
.contact-form input,.contact-form textarea{font:inherit; font-size:16px; font-weight:400; color:var(--text); background:rgba(255,255,255,.04); border:1px solid var(--line); border-radius:12px; padding:12px 14px; min-height:48px; transition:border-color .3s, box-shadow .3s}
.contact-form textarea{resize:vertical}
.contact-form input:focus,.contact-form textarea:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(47,111,228,.2)}
.contact-form .btn{align-self:flex-start; white-space:normal; text-align:center}
.form-note{margin:0; font-size:15px; color:var(--body)}

@media (max-width: 860px){
  .float-cta{right:12px; bottom:12px; padding:12px 16px}
  .cta-mail{padding:14px 16px; gap:12px}
  .cta-mail-ic{flex-basis:44px; height:44px}
}

/* melding når e-postprogram ikke åpnes */
.toast{position:fixed; left:50%; bottom:24px; z-index:80; width:min(560px, calc(100% - 32px)); padding:16px 20px; border-radius:16px; font-size:15px; line-height:1.5; color:#fff;
  background:rgba(12,18,30,.96); border:1px solid rgba(47,111,228,.45); box-shadow:0 20px 60px -10px rgba(0,0,0,.7), 0 0 40px -12px rgba(47,111,228,.6);
  opacity:0; transform:translate(-50%, 16px); pointer-events:none; transition:opacity .3s, transform .3s var(--ease)}
.toast.show{opacity:1; transform:translate(-50%, 0); pointer-events:auto}
.toast a{color:var(--accent)}
.toast b{color:#fff}
#skjema{scroll-margin-top:90px}
.marquee-track a{color:inherit; text-decoration:none}
.marquee-track a:focus-visible{outline:2px solid var(--accent); outline-offset:4px; border-radius:6px}
.marquee:focus-within .marquee-track{animation-play-state:paused}
#pakker,#iqonic-basic,#iqonic-care{scroll-margin-top:100px}
.lvl .btn{align-self:flex-start; margin-top:auto}
.ms-link{color:inherit; text-decoration:underline; text-decoration-color:rgba(47,111,228,.45); text-decoration-thickness:1px; text-underline-offset:3px; transition:color .2s, text-decoration-color .2s}
.ms-link:hover,.ms-link:focus-visible{color:var(--accent); text-decoration-color:var(--accent)}
h3 .ms-link{text-decoration:none}
h3 .ms-link:hover{color:var(--accent)}
h3 .ms-link::after{content:"\2197"; display:inline-block; margin-left:5px; font-size:.65em; color:var(--accent); opacity:.75; transform:translateY(-.25em); transition:transform .2s, opacity .2s}
h3 .ms-link:hover::after{opacity:1; transform:translate(2px,-.4em)}
.dd-sep{display:block; height:1px; margin:6px 14px; background:var(--line)}
.article-rel{display:flex; flex-direction:column; gap:16px; margin-top:8px}
.article-rel h2{font-size:22px}
.article-rel .rels{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.view[data-view="ikkefunnet"] .hero{--hero-img:var(--img-default)}
/* mindre bilder pa mobil */
@media (max-width: 860px){ :root:root:root{
  --img-hjem:url("https://images.unsplash.com/photo-1654198340681-a2e0fc449f1b?w=1000&q=75&auto=format&fit=crop");
  --img-m365:url("https://images.unsplash.com/photo-1522202176988-66273c2fd55f?w=1000&q=75&auto=format&fit=crop");
  --img-azure:url("https://images.unsplash.com/photo-1680992046626-418f7e910589?w=1000&q=75&auto=format&fit=crop");
  --img-sikkerhet:url("https://images.unsplash.com/photo-1550751827-4bd374c3f58b?w=1000&q=75&auto=format&fit=crop");
  --img-ai:url("https://images.unsplash.com/photo-1753513291124-4f615bf1f6de?w=1000&q=75&auto=format&fit=crop");
  --img-itdrift:url("https://images.unsplash.com/photo-1763128516808-785e80c1dd68?w=1000&q=75&auto=format&fit=crop");
  --img-om:url("https://images.unsplash.com/photo-1541746972996-4e0b0f43e02a?w=1000&q=75&auto=format&fit=crop");
  --img-kontakt:url("https://images.unsplash.com/photo-1572021335469-31706a17aaef?w=1000&q=75&auto=format&fit=crop");
  --img-blogg:url("https://images.unsplash.com/photo-1614852206732-6728910dc175?w=1000&q=75&auto=format&fit=crop");
  --img-default:url("https://images.unsplash.com/photo-1638376776402-9a4b75fe21bb?w=1000&q=75&auto=format&fit=crop");
}}
/* karusell: logorad + produktrad */
.marquee-stack .marquee + .marquee{border-top:none}
.marquee-logos .marquee-track{animation-duration:51s}
.marquee-rev .marquee-track{animation-duration:95s; animation-direction:reverse}
.marquee-logos .marquee-track span{padding:26px 34px}
.marquee-logos .marquee-track span::after{display:none}
.logo-item{display:flex; align-items:center; height:32px; font-family:var(--head); font-size:clamp(20px,2.2vw,26px); font-weight:700; letter-spacing:-0.02em; color:#8C9BAA; transition:color .3s, opacity .3s, transform .3s}
.logo-item:hover,.logo-item:focus-visible{color:#fff; transform:translateY(-1px)}
.logo-item img{display:block; height:28px; width:auto; max-width:150px; filter:brightness(0) invert(1); opacity:.55; transition:opacity .3s}
.logo-item:hover img,.logo-item:focus-visible img{opacity:1}
@media (prefers-reduced-motion: reduce){
  .marquee-track{flex-wrap:wrap; justify-content:center; width:auto}
  .marquee-track span[aria-hidden="true"]{display:none}
}

/* ==========================================================
   Lys profil (2026-10-29): lys side, mørk topp, bunntekst og CTA.
   Iqonic-blå i stedet for turkis. Ingen rutenett, glød eller «piller».
   ========================================================== */
:root:root:root:root{
  --bg:#F4F6F9; --surface:#FFFFFF; --surface-solid:#FFFFFF; --text:#0B1B2B; --body:#3D4C5A; --muted:#5B6B7A;
  --line:#E1E7EC; --rule:#D3DBE2; --link:#1F57C3; --navy:#0B1B2B; --navy2:#13283D; --navy3:#1B3550;
  --accent:#2F6FE4; --accent2:#5B8CFF; --accent3:#5B8CFF; --onaccent:#FFFFFF;
  --grad:linear-gradient(120deg,#2F6FE4,#5B8CFF);
  color-scheme:light;
}
/* mørke soner */
.site-head,.hero,.site-foot,.cta,.band,.stat,.lvl-rec,.layer-sec,.b{
  --bg:#0B1B2B; --surface:rgba(255,255,255,.05); --text:#EEF3F8; --body:#B7C4D0; --muted:#8FA0B2;
  --line:rgba(255,255,255,.12); --rule:rgba(255,255,255,.12); --link:#9DBEFF; --accent:#7EA8FF;
  color:var(--text); color-scheme:dark;
}
.aurora,.cursor-glow{display:none}
body::before,body::after{display:none}

/* header og topp */
.site-head,.site-head.scrolled{background:rgba(11,27,43,.94); border-bottom-color:rgba(255,255,255,.08)}
.logo-mark{box-shadow:none}
.progress{box-shadow:none}
.hero{background:#0B1B2B}
.hero::after{background:linear-gradient(90deg, rgba(11,27,43,.97) 0%, rgba(11,27,43,.82) 45%, rgba(11,27,43,.45) 100%); -webkit-mask-image:none; mask-image:none}
.hero::before{opacity:.55}
.hero .eyebrow-acc{padding:0; border:none; border-radius:0; background:none; -webkit-backdrop-filter:none; backdrop-filter:none; font-size:13px; letter-spacing:.14em}
.hero .eyebrow-acc::before{width:28px; height:2px; flex:0 0 28px; border-radius:0; animation:none; box-shadow:none; background:var(--accent)}
.grad,.grad .w{background:none; color:#9FB2C6; -webkit-text-fill-color:currentColor; animation:none}
.hero.play .grad .w{animation:wordin .9s var(--ease) both; animation-delay:calc(var(--i) * 55ms + 80ms)}
.lead{color:#C3CFDA}
.illus svg{filter:drop-shadow(0 30px 60px rgba(0,0,0,.4))}
.hero .hero-img{box-shadow:0 40px 100px -30px rgba(0,0,0,.6)}

/* knapper */
.btn-accent{background:#2F6FE4; color:#fff; box-shadow:0 6px 18px -8px rgba(47,111,228,.6)}
.btn-accent:hover{background:#1F57C3; box-shadow:0 10px 26px -10px rgba(47,111,228,.7)}
.btn-ghost{background:#fff; border-color:#C9D3DD; color:var(--text); -webkit-backdrop-filter:none; backdrop-filter:none}
.btn-ghost:hover{border-color:var(--accent); box-shadow:none; color:var(--accent)}
.hero .btn-ghost,.cta .btn-ghost,.band .btn-ghost,.site-head .btn-ghost{background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.22); color:#fff}
.hero .btn-ghost:hover,.cta .btn-ghost:hover,.band .btn-ghost:hover{border-color:#9DBEFF; color:#fff}
.float-cta{background:#2F6FE4; color:#fff; box-shadow:0 12px 30px -10px rgba(11,27,43,.45)}
.float-cta:hover{color:#fff; background:#1F57C3}

/* seksjoner og kort */
.big{background:none; color:var(--text); -webkit-text-fill-color:currentColor}
.sechead::before,.rowhead::before{background:linear-gradient(90deg, rgba(47,111,228,.45), var(--line) 40%, transparent)}
.card,.tile,.lvl,.rel,.layer,.post,.panel{background:#fff; border-color:var(--line); box-shadow:0 1px 2px rgba(11,27,43,.04), 0 10px 30px -18px rgba(11,27,43,.18)}
a.card:hover,.layer:hover,.rel:hover,.post:hover{border-color:rgba(47,111,228,.35)}
a.card:hover h3,.post:hover h3{color:var(--accent)}
.fx::before{background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%), rgba(47,111,228,.06), transparent 45%)}
.fx::after{background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%), rgba(47,111,228,.55), rgba(91,140,255,.2) 40%, transparent 70%)}
.icbox{background:#EAF1FD; border-color:#D3E1FA; box-shadow:none; color:#1F57C3}
.fx:hover .icbox{box-shadow:none}
.lvl-rec,.layer-sec{background:#0B1B2B; border-color:#0B1B2B; box-shadow:0 20px 50px -24px rgba(11,27,43,.6)}
.lvl-rec .icbox,.layer-sec .icbox,.band .icbox,.cta .icbox{background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.16); color:#9DBEFF}
.post-img{filter:none}
.post-img::after{background:none}
.post:hover .post-img{filter:saturate(1.08)}
.chip{background:#fff}
.chip.on{background:#2F6FE4; border-color:#2F6FE4; color:#fff; box-shadow:none}
.steps li::before{box-shadow:0 0 0 4px var(--bg)}

/* uthevede flater: mørk marine i stedet for neon */
.band,.cta,.stat{background:radial-gradient(120% 140% at 100% 0%, rgba(91,140,255,.18), transparent 55%), #0B1B2B; border-color:#0B1B2B}
.band::before,.cta::before,.stat::before{background:radial-gradient(circle, rgba(91,140,255,.18), transparent 62%)}
.cta{box-shadow:0 30px 80px -40px rgba(11,27,43,.55)}
.cta-mail{border-color:rgba(157,190,255,.35)}
.cta-mail:hover{border-color:#9DBEFF; background:rgba(157,190,255,.08); box-shadow:none}
.cta-mail-ic{background:#2F6FE4; color:#fff; box-shadow:none}
.cta-mail small{color:#9DBEFF}

/* karusell */
.marquee{background:#fff}
.marquee-track span:hover,.logo-item:hover,.logo-item:focus-visible{color:var(--text)}
.marquee-track span::after{box-shadow:none}
.logo-item img{filter:grayscale(1); opacity:.6}

/* bunntekst */
.site-foot{background:#0B1B2B; border-top-color:#0B1B2B}
.site-foot::before{display:none}

/* skjema */
.contact-form input,.contact-form textarea{background:#F8FAFC}
.contact-form input:focus,.contact-form textarea:focus{box-shadow:0 0 0 3px rgba(47,111,228,.18)}

@media (max-width: 860px){
  .hero::after{background:linear-gradient(180deg, rgba(11,27,43,.8) 0%, rgba(11,27,43,.92) 100%)}
}
/* loddrett rulling: teknologien vi jobber med */
.ticker-wrap{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,440px); gap:56px; align-items:center}
.ticker-text{display:flex; flex-direction:column; gap:16px; align-items:flex-start}
.ticker-text h2{font-size:clamp(30px,3.4vw,46px); letter-spacing:-0.035em; text-wrap:balance}
.ticker-text .sublead{margin:0}
.ticker{position:relative; height:440px; overflow:hidden; background:#fff; border:1px solid var(--line); border-radius:22px; box-shadow:0 10px 30px -18px rgba(11,27,43,.18);
  -webkit-mask-image:linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent); mask-image:linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent)}
.ticker-track{list-style:none; margin:0; padding:0 28px; animation:tickup 107s linear infinite}
.ticker:hover .ticker-track,.ticker:focus-within .ticker-track{animation-play-state:paused}
@keyframes tickup{to{transform:translateY(-50%)}}
.ticker-track li{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:15px 0; border-bottom:1px solid var(--line)}
.ticker-track a{font-family:var(--head); font-size:clamp(18px,1.7vw,21px); font-weight:500; color:var(--text); text-decoration:none; transition:color .2s}
.ticker-track a:hover,.ticker-track a:focus-visible{color:var(--accent)}
.ticker-track a:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:4px}
.ticker-tag{flex:none; font-size:11px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); padding:4px 9px; border:1px solid var(--line); border-radius:6px}
@media (max-width: 860px){
  .ticker-wrap{grid-template-columns:minmax(0,1fr); gap:28px}
  .ticker{height:340px}
}
@media (prefers-reduced-motion: reduce){
  .ticker{height:auto; max-height:440px; overflow-y:auto; -webkit-mask-image:none; mask-image:none}
  .ticker-track li[aria-hidden="true"]{display:none}
}

/* ==========================================================
   Mørk marine (2026-10-29): hele siden mørk marineblå.
   Overstyrer «Lys profil» over. Iqonic-blå aksent, ingen turkis.
   ========================================================== */
:root:root:root:root:root{
  --bg:#0B1B2B; --surface:#102539; --surface-solid:#102539; --text:#EEF3F8; --body:#B7C4D0; --muted:#8FA0B2;
  --line:rgba(255,255,255,.09); --rule:rgba(255,255,255,.12); --link:#9DBEFF;
  --accent:#7EA8FF; --accent2:#5B8CFF; --onaccent:#FFFFFF;
  color-scheme:dark;
}
.card,.tile,.lvl,.rel,.layer,.post,.panel{background:#102539; border-color:var(--line); box-shadow:0 14px 36px -22px rgba(0,0,0,.6)}
a.card:hover,.layer:hover,.rel:hover,.post:hover{border-color:rgba(126,168,255,.4)}
.fx::before{background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%), rgba(126,168,255,.07), transparent 45%)}
.icbox{background:rgba(126,168,255,.1); border-color:rgba(126,168,255,.22); color:#9DBEFF}
.lvl-rec,.layer-sec{background:linear-gradient(180deg,#173459,#102539); border-color:rgba(126,168,255,.45); box-shadow:0 24px 60px -30px rgba(47,111,228,.45)}
.band,.cta,.stat{background:radial-gradient(120% 140% at 100% 0%, rgba(91,140,255,.22), transparent 55%), #12304F; border-color:rgba(126,168,255,.2)}
.cta{box-shadow:0 30px 80px -40px rgba(0,0,0,.6)}
.site-foot{background:#07131F; border-top-color:rgba(255,255,255,.06)}
.btn-ghost{background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.22); color:#fff}
.btn-ghost:hover{border-color:#9DBEFF; color:#fff}
.chip{background:rgba(255,255,255,.04); color:var(--text)}
.chip.on{background:#2F6FE4; border-color:#2F6FE4; color:#fff}
.ticker{background:#102539; border-color:var(--line); box-shadow:0 14px 36px -22px rgba(0,0,0,.6)}
.ticker-tag{border-color:rgba(255,255,255,.14)}
.contact-form input,.contact-form textarea{background:rgba(255,255,255,.04); color:var(--text)}
.contact-form input:focus,.contact-form textarea:focus{box-shadow:0 0 0 3px rgba(126,168,255,.25)}
.hero{border-bottom:1px solid rgba(255,255,255,.06)}
.sechead::before,.rowhead::before{background:linear-gradient(90deg, rgba(126,168,255,.5), var(--line) 40%, transparent)}

/* ==========================================================
   Rolig uttrykk (2026-10-29): færre effekter, systemskrift,
   lister i stedet for kort der det passer. Mindre «AI-mal».
   ========================================================== */
:root:root:root:root:root{
  --head:"Segoe UI Variable Display","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --sans:"Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
}
h1,h2,h3,.h1-home,.h1-sub{font-weight:600}
.h1-home{letter-spacing:-0.03em; line-height:1.04}
.h1-sub{letter-spacing:-0.025em}
.rowhead h2,.sechead h2,.ticker-text h2{letter-spacing:-0.02em}

/* bevegelse: bare en enkel inntoning */
.js .rv{opacity:0; transform:translateY(10px); filter:none; transition:opacity .6s ease, transform .6s ease; transition-delay:0s}
.js .rv.in{opacity:1; transform:none}
.hero::before{animation:none; translate:none; scale:1.02}
.illus svg{animation:none}
.band::before,.cta::before,.stat::before{animation:none}
.btn-accent::after{display:none}
.btn{transition:background-color .2s, border-color .2s, color .2s, box-shadow .2s}
.fx::before,.fx::after{display:none}
.fx:hover .icbox{transform:none}
.b img{animation:none; height:100%}
.b:hover img{transform:none; filter:saturate(.95) brightness(.88)}
.b:hover .b-cap,.b:focus-visible .b-cap{transform:none}
.b-more{opacity:1; transform:none}
.steps li::after{display:none}
.ind:hover{padding-left:0}
.ind:hover h3{background:none; color:var(--accent); -webkit-text-fill-color:currentColor}
.scroll-hint,.progress,.cursor-glow,.aurora{display:none}

/* tjenestelister: linjer i stedet for bokser */
.tiles{gap:0 48px}
.tile{background:none; border:none; border-top:1px solid var(--line); border-radius:0; box-shadow:none; padding:22px 0 18px}
.tile .icbox{display:none}
.tile h3{font-size:19px}
/* firkantmonster pa forsiden */
.motif{animation:motifin 1s ease .2s both}
@keyframes motifin{from{opacity:0; transform:translateY(16px)}}
@media (prefers-reduced-motion: reduce){ .motif{animation:none} }