.wrap{width:100%;max-width:720px;margin:0 auto;padding:0 18px}

/* ===== Top bar ===== */
.topbar{position:sticky;top:0;z-index:40;background:color-mix(in oklab,var(--background) 90%,transparent);backdrop-filter:blur(12px);border-bottom:1px solid var(--border)}
.topbar-in{display:flex;align-items:center;justify-content:space-between;height:58px;gap:12px}
.brand{display:flex;align-items:center;gap:9px;font-weight:800;font-size:1.05rem;letter-spacing:-.02em}
.brand-mark{width:30px;height:30px;border-radius:8px;background:var(--ink);color:#fff;display:grid;place-items:center;font-weight:900;font-size:.95rem;flex:none}
:root.dark .brand-mark{background:var(--brand);color:#0a192f}
.topbar .tel{font-size:.82rem;font-weight:600;color:var(--muted-foreground)}

/* ===== Hero ===== */
.hero{padding:34px 0 26px;position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;background:
  radial-gradient(70% 60% at 85% 0%,color-mix(in oklab,var(--brand) 15%,transparent),transparent 72%),
  radial-gradient(50% 50% at 0% 0%,color-mix(in oklab,var(--brand) 8%,transparent),transparent 70%);
  pointer-events:none}
.hero .wrap{position:relative}
.eyebrow{display:inline-flex;align-items:center;gap:7px;padding:5px 12px;border-radius:999px;border:1px solid var(--border);background:var(--card);font-size:.7rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--muted-foreground)}
.eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--brand)}
h1{font-size:clamp(1.75rem,7.5vw,2.6rem);line-height:1.1;letter-spacing:-.035em;font-weight:800;margin:16px 0 0}
h1 .grad{background:linear-gradient(100deg,var(--brand),var(--brand-strong));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p{color:var(--muted-foreground);font-size:1rem;margin:14px 0 0;max-width:52ch}
.hero p strong{color:var(--foreground);font-weight:600}

/* ===== Section label ===== */
.sec-label{display:flex;align-items:center;gap:12px;margin:34px 0 14px}
.sec-label span{font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-foreground);white-space:nowrap}
.sec-label::after{content:"";flex:1;height:1px;background:var(--border)}

/* ===== Produktfarger =====
   --accent-color: flate bak hvit tekst (logofirkant). Kan vaere mork i begge modus.
   --accent-text:  tekst, lenke og stripe. Ma lyse opp i mork modus for aa vaere lesbar. */
.pcard[data-brand="vikingnet"]{--accent-color:#0a192f;--accent-text:#0a192f}
.pcard[data-brand="vikingmester"]{--accent-color:#0a192f;--accent-text:#0a192f}
.pcard[data-brand="vikingcrm"]{--accent-color:#7c3aed;--accent-text:#7c3aed}
.pcard[data-brand="flexbook"]{--accent-color:#0ea5a4;--accent-text:#0ea5a4}
.pcard[data-brand="kursmarkedet"]{--accent-color:#d97706;--accent-text:#d97706}
.pcard[data-brand="qognito"]{--accent-color:#2563eb;--accent-text:#2563eb}

/* Mork modus: de morke merkefargene ville forsvunnet mot bakgrunnen. */
:root.dark .pcard[data-brand="vikingnet"],
:root.dark .pcard[data-brand="vikingmester"]{--accent-text:#cbd5e1}
:root.dark .pcard[data-brand="vikingcrm"]{--accent-text:#a78bfa}
:root.dark .pcard[data-brand="flexbook"]{--accent-text:#5eead4}
:root.dark .pcard[data-brand="kursmarkedet"]{--accent-text:#fbbf24}
:root.dark .pcard[data-brand="qognito"]{--accent-text:#60a5fa}

.stack{display:grid;gap:12px}
.pcard{position:relative;display:block;padding:18px 18px 18px 22px;border-radius:var(--radius);border:1px solid var(--border);background:var(--card);overflow:hidden;transition:border-color .15s ease,transform .15s ease}
.pcard::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--accent-text,var(--brand))}
.pcard:active{transform:scale(.99)}
@media (hover:hover){.pcard:hover{border-color:color-mix(in oklab,var(--accent-text,var(--brand)) 45%,transparent);transform:translateY(-2px)}}
.pcard-top{display:flex;align-items:center;gap:11px}
.pmark{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;font-weight:800;font-size:.95rem;color:#fff;flex:none;background:var(--accent-color,var(--brand))}
.pcard h2{font-size:1.1rem;font-weight:800;letter-spacing:-.02em;margin:0;line-height:1.2}
.pcard .cat{display:block;font-size:.78rem;color:var(--muted-foreground);margin-top:2px}
.pcard p{font-size:.9rem;color:var(--muted-foreground);margin:12px 0 0}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.chip{font-size:.72rem;font-weight:600;padding:3px 9px;border-radius:999px;background:var(--muted);color:var(--muted-foreground);border:1px solid var(--border)}
.chip.price{background:color-mix(in oklab,var(--accent-text,var(--brand)) 14%,transparent);color:var(--accent-text,var(--brand));border-color:color-mix(in oklab,var(--accent-text,var(--brand)) 30%,transparent)}
:root.dark .chip.price{color:var(--accent-text,var(--brand))}
.go{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:14px;padding-top:13px;border-top:1px solid var(--border);font-size:.88rem;font-weight:700;color:var(--accent-text,var(--brand))}
.go .arrow{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;background:color-mix(in oklab,var(--accent-text,var(--brand)) 16%,transparent);font-size:.9rem;flex:none}

/* ===== Contact ===== */
.contact{margin-top:34px;border-radius:var(--radius);padding:26px 20px;background:var(--ink);color:#fff;text-align:center;position:relative;overflow:hidden}
:root.dark .contact{background:var(--card);border:1px solid var(--border);color:var(--foreground)}
.contact::before{content:"";position:absolute;inset:0;background:radial-gradient(65% 100% at 50% 0%,color-mix(in oklab,var(--brand) 42%,transparent),transparent 70%)}
.contact > *{position:relative}
.contact h2{font-size:1.35rem;font-weight:800;letter-spacing:-.025em;margin:0}
.contact p{color:rgba(255,255,255,.72);font-size:.9rem;margin:10px auto 0;max-width:40ch}
:root.dark .contact p{color:var(--muted-foreground)}
.actions{display:grid;gap:9px;margin-top:20px}
@media (min-width:520px){.actions{grid-template-columns:1fr 1fr}}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:13px 18px;border-radius:11px;font-weight:700;font-size:.92rem;border:1px solid transparent;cursor:pointer}
.btn-primary{background:var(--brand);color:#fff}
:root.dark .btn-primary{color:#0a192f}
.btn-outline{background:transparent;border-color:rgba(255,255,255,.28);color:#fff}
:root.dark .btn-outline{border-color:var(--border);color:var(--foreground)}

footer{padding:30px 0 40px;text-align:center;font-size:.8rem;color:var(--muted-foreground)}
footer .org{margin-top:6px;font-size:.75rem}