:root{
  color-scheme:light;
  --bg:#f4f6f7; --surface:#ffffff; --ink:#15232d; --muted:#5b6b76; --line:#d3dce1;
  --deep:#10202a; --sea:#cfe0e8; --pier:#8a7a66;
  --accent:#d9611c; --accent-dark:#b94f13; --accent-ink:#ffffff;
  --taken:#3d6b85; --free:#2f9e6a; --guest:#d9a21c; --reserved:#8b6bb5; --off:#b9c3c9;
  --display:"Barlow Condensed","Arial Narrow",system-ui,sans-serif;
  --body:"Source Sans 3",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Consolas,monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:72px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--bg);color:var(--ink);font:17px/1.6 var(--body);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
h1,h2,h3,h4{font-family:var(--display);font-weight:700;letter-spacing:.01em;line-height:1.05;margin:0 0 .4em}
h2{font-size:clamp(32px,4.5vw,46px)}
h3{font-size:24px}
p{margin:0 0 1em}
a{color:inherit}
.wrap{max-width:1180px;margin:0 auto;padding-inline:16px}
@media (min-width:700px){.wrap{padding-inline:32px}}
.mono{font-family:var(--mono);font-size:.85em;background:var(--sea);padding:1px 6px;border-radius:4px;word-break:break-all}
a:focus-visible,.btn:focus-visible{outline:3px solid var(--accent);outline-offset:3px}

/* knapper */
.btn{display:inline-flex;align-items:center;justify-content:center;font:600 17px var(--body);padding:12px 22px;border-radius:8px;background:var(--accent);color:var(--accent-ink);text-decoration:none;border:2px solid var(--accent);transition:background .15s,border-color .15s}
.btn:hover{background:var(--accent-dark);border-color:var(--accent-dark)}
.btn.ghost{background:transparent;border-color:rgba(255,255,255,.75);color:#fff}
.btn.ghost:hover{background:rgba(255,255,255,.12)}
.btn.small{padding:7px 14px;font-size:15px}

/* toppmeny */
header.site{position:sticky;top:0;z-index:20;background:rgba(244,246,247,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.bar{display:flex;align-items:center;justify-content:space-between;gap:16px;height:64px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-family:var(--display);font-weight:700;font-size:24px;letter-spacing:.02em;white-space:nowrap}
.brand .mark{width:34px;height:34px;flex:none}
.links{display:flex;align-items:center;gap:22px}
.links a:not(.btn){text-decoration:none;font-weight:600;color:var(--muted);font-size:16px}
.links a:not(.btn):hover{color:var(--ink)}
@media (max-width:720px){.links a:not(.btn){display:none}.brand{font-size:21px}}

/* hero */
.hero{position:relative;min-height:min(88vh,760px);display:flex;align-items:flex-end;color:#fff;overflow:hidden}
.hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 60%}
.hero-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(16,32,42,.15) 0%,rgba(16,32,42,.35) 40%,rgba(16,32,42,.88) 100%)}
.hero-inner{position:relative;padding-block:120px 64px;width:100%}
.hero h1{font-size:clamp(40px,7vw,78px);max-width:15ch;text-shadow:0 2px 24px rgba(0,0,0,.25)}
.lead{font-size:clamp(18px,2vw,21px);max-width:58ch;opacity:.95}
.tag{display:inline-block;font-weight:700;font-size:14px;text-transform:uppercase;letter-spacing:.08em;background:var(--accent);padding:5px 12px;border-radius:99px;margin-bottom:18px}
.cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px}

/* intro */
.intro{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:48px;padding-block:88px;align-items:center}
.intro p{color:var(--muted);font-size:19px;max-width:56ch}
.facts{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.facts li{background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:8px;padding:16px 20px;display:flex;align-items:baseline;gap:16px}
.facts b{font-family:var(--display);font-size:38px;line-height:1;min-width:3.2ch;color:var(--deep)}
.facts span{color:var(--muted)}
@media (max-width:820px){.intro{grid-template-columns:minmax(0,1fr);gap:32px;padding-block:64px}}

/* funksjoner */
.features{background:var(--deep);color:#e3ebef;padding-block:88px}
.features h2{color:#fff}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;margin-top:32px}
.feat{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:24px}
.feat svg{width:40px;height:40px;fill:none;stroke:var(--accent);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;margin-bottom:12px}
.feat h3{color:#fff}
.feat p{color:#b8c6ce;margin:0}

/* systemet */
.showcase{padding-block:88px;background:linear-gradient(180deg,var(--bg),#e6eef2)}
.sub{color:var(--muted);margin-bottom:32px}
.screens{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:32px;align-items:center}
@media (max-width:960px){.screens{grid-template-columns:minmax(0,1fr);justify-items:center}}
figure{margin:0}
.browser{background:var(--surface);border-radius:12px;box-shadow:0 30px 60px -20px rgba(16,32,42,.35),0 0 0 1px var(--line);overflow:hidden;width:100%;font-size:14px;line-height:1.45}
.chrome{display:flex;align-items:center;gap:6px;padding:10px 14px;background:#e9eef1;border-bottom:1px solid var(--line)}
.chrome i{width:11px;height:11px;border-radius:50%;background:#c9d3d9}
.chrome span{margin-left:12px;font:500 12px var(--mono);color:var(--muted);background:#fff;padding:3px 10px;border-radius:5px;flex:1;max-width:340px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.app{padding:16px;display:flex;flex-direction:column;gap:12px;background:#eef2f4}
.app-brand{display:flex;align-items:center;gap:10px}
.app-brand b{font-family:var(--display);font-size:22px;display:block;line-height:1}
.app-brand small{color:var(--muted);font-size:12px}
.app-logo{width:32px;height:32px;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;font:700 15px var(--display)}
.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.kpis div{background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:8px 10px}
.kpis b{display:block;font:600 24px/1.1 var(--display)}
.kpis span{color:var(--muted);font-size:12px}
@media (max-width:560px){.kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}
.mapgrid{display:grid;grid-template-columns:minmax(0,1fr) 210px;gap:12px}
@media (max-width:700px){.mapgrid{grid-template-columns:minmax(0,1fr)}}
.mapbox{background:var(--sea);border-radius:8px;padding:8px}
.mapbox svg{display:block;width:100%;height:auto}
.slot rect{stroke:#fff;stroke-width:1.5}
.slot.sel rect{stroke:var(--accent);stroke-width:4}
.slot text{font:500 9px var(--mono);fill:#fff}
.pierlabel{font:700 18px var(--display);fill:var(--ink)}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:12px;display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.panel h4{font-size:24px;margin:0}
.panel dl{display:grid;grid-template-columns:auto 1fr;gap:3px 10px;margin:0;font-size:13px}
.panel dt{color:var(--muted)} .panel dd{margin:0}
.pill{display:inline-block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;padding:2px 8px;border-radius:99px;color:#fff}
.btns{display:flex;gap:6px;flex-wrap:wrap}
.btn.mini{font-size:13px;padding:5px 10px;border-radius:6px;background:var(--surface);border:1px solid var(--line);color:var(--ink);pointer-events:none}
.btn.mini.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.legend{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:12px;color:var(--muted)}
.legend i{display:inline-block;width:11px;height:11px;border-radius:2px;margin-right:5px;vertical-align:-1px}

.phone{width:300px;max-width:100%;border:10px solid var(--deep);border-radius:38px;background:#eef2f4;box-shadow:0 30px 60px -20px rgba(16,32,42,.45);font-size:14px;line-height:1.4}
.phone-in{padding:20px 12px;display:flex;flex-direction:column;gap:10px}
.phone .hi{font:700 24px var(--display);margin:0 0 2px}
.tile{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:10px 12px;display:flex;flex-direction:column;gap:5px;align-items:flex-start}
.tile .lbl{font-size:11px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted)}
.tile .row{display:flex;justify-content:space-between;align-items:center;gap:8px;width:100%}
.tile .big{font:600 21px var(--display)}
.tile .small{font-size:12px;color:var(--muted)}
.tile .ok{color:var(--free);font-weight:600}
.meter{height:7px;width:100%;border-radius:4px;background:var(--line);overflow:hidden}
.meter i{display:block;height:100%;background:var(--accent)}

.wl{margin-top:40px;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:20px;box-shadow:0 20px 40px -24px rgba(16,32,42,.3)}
.wl-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:8px 20px;margin-bottom:8px}
.wl h3{margin:0}
.rules{display:flex;flex-wrap:wrap;gap:6px}
.rules span{font-size:13px;border:1px solid var(--line);border-radius:99px;padding:3px 10px;background:var(--bg)}
.rules b{color:var(--accent)}
.tablewrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:15px;font-variant-numeric:tabular-nums}
th{text-align:left;font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:600;padding:8px;border-bottom:1px solid var(--line);white-space:nowrap}
td{padding:9px 8px;border-bottom:1px solid var(--line);white-space:nowrap}
tr.next td{background:rgba(47,158,106,.12)}

/* bilder */
.photos{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);grid-template-areas:"tall text" "tall wide";gap:24px;padding-block:88px}
.ph img{width:100%;height:100%;object-fit:cover;border-radius:12px}
.ph.tall{grid-area:tall;max-height:720px}
.ph.wide{grid-area:wide}
.ph-text{grid-area:text;align-self:center}
.ph-text p{color:var(--muted);font-size:18px}
@media (max-width:820px){
  .photos{grid-template-columns:minmax(0,1fr);grid-template-areas:"text" "wide" "tall";padding-block:64px}
  .ph.tall{max-height:440px}
}

/* lansering */
.launch{padding-block:24px 88px}
.steps{list-style:none;margin:32px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;counter-reset:s}
.steps li{position:relative;background:var(--surface);border:1px solid var(--line);border-top:4px solid var(--off);border-radius:10px;padding:22px}
.steps li.done{border-top-color:var(--free)}
.steps li.now{border-top-color:var(--accent)}
.steps .when{display:block;font-size:13px;text-transform:uppercase;letter-spacing:.08em;font-weight:700;color:var(--muted);margin-bottom:6px}
.steps li.now .when{color:var(--accent)}
.steps b{display:block;font:700 23px/1.1 var(--display);margin-bottom:8px}
.steps p{color:var(--muted);margin:0;font-size:16px}
@media (max-width:820px){.steps{grid-template-columns:minmax(0,1fr)}}

/* kontakt */
.contact{position:relative;overflow:hidden;background:var(--deep);color:#fff;padding-block:96px}
.contact-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.25}
.contact-inner{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:center}
.contact p{font-size:19px;color:#d3dee4;max-width:44ch}
.cards{display:grid;gap:14px}
.ccard{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:16px;align-items:center;background:rgba(255,255,255,.95);color:var(--ink);text-decoration:none;border-radius:12px;padding:18px 22px;transition:transform .15s,box-shadow .15s}
.ccard:hover{transform:translateY(-2px);box-shadow:0 14px 30px -12px rgba(0,0,0,.5)}
.ccard svg{grid-row:span 2;width:40px;height:40px;fill:none;stroke:var(--accent);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ccard .lbl{font-size:13px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:600}
.ccard b{font:700 clamp(22px,3vw,30px)/1.1 var(--display);overflow-wrap:anywhere}
@media (max-width:820px){.contact-inner{grid-template-columns:minmax(0,1fr)}.contact{padding-block:72px}}
.contact-inner{align-items:start}
.contact .cards{margin-top:28px}

/* kontaktskjema */
.kform{background:var(--surface);color:var(--ink);border-radius:14px;padding:24px;display:grid;gap:14px;box-shadow:0 24px 50px -20px rgba(0,0,0,.55)}
.kform h3{margin:0}
.kform .two-col{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px}
.kform label{display:grid;gap:5px;font-weight:600;font-size:15px}
.kform .opt{font-weight:400;color:var(--muted)}
.kform input,.kform textarea{font:400 16px/1.4 var(--body);color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:8px;padding:10px 12px;width:100%}
.kform textarea{resize:vertical;min-height:120px}
.kform input:focus,.kform textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(217,97,28,.2)}
.kform .btn{justify-self:start;cursor:pointer}
.kform .btn:disabled{opacity:.6;cursor:wait}
.kform .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.kform p{max-width:none}
.kstatus{margin:0;font-weight:600;font-size:16px}
.kstatus:empty{display:none}
.kstatus.ok{color:var(--free)}
.kstatus.feil{color:#c0392b}
.kform .personvern{margin:0;font-size:13px;color:var(--muted)}

/* bunn */
footer.site{background:#0b161d;color:#93a4ae;padding-block:22px}
.foot{display:flex;flex-wrap:wrap;align-items:center;gap:10px 28px}
.brand.small{font-size:18px;color:#e3ebef}
.brand.small .mark{width:24px;height:24px}
.fine{margin:0;font-size:13px;line-height:1.5;flex:1;min-width:260px}