/* ==========
   Design tokens
   ========== */
:root{
  --bg:#0B1220;            /* dyp blåsvart bakgrunn for moderne preg */
  --bg-soft:#111827;       /* mykere mørk bakgrunn for seksjoner */
  --bg-surface:#0f172a;    /* semimørk for “surface”-felt */
  --panel:#101827;         /* kortbakgrunn (mørk) */
  --panel-light:#E5EEF7;   /* lys panel (fallback i lyse seksjoner) */

  --text:#E9EEF6;          /* hovedtekst på mørkt */
  --muted:#A9B4C7;         /* sekundær tekst */
  --line:#22324b;          /* tynne linjer / borders */

  --primary:#1E6CDE;       /* primær blå (matcher blå du likte) */
  --primary-2:#2A8FFF;     /* lysere blå for hover */
  --accent:#E4452F;        /* rød-oransje, spiller fint med rød/hvit logo */
  --accent-soft:#7a1f14;

  --white:#ffffff;
  --radius:14px;
  --shadow:0 14px 40px rgba(0,0,0,.25);
  --shadow-soft:0 8px 24px rgba(0,0,0,.18);
  --focus:0 0 0 3px rgba(42,143,255,.35);

  --maxw:1140px;
}

/* ====== Base ====== */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font: 17px/1.65 system-ui,-apple-system,"Segoe UI",Roboto,Inter,"Helvetica Neue",Arial,sans-serif;
}
.container{max-width:var(--maxw); margin-inline:auto; padding:0 20px}
.visually-hidden{position:absolute!important; height:1px; width:1px; overflow:hidden; clip:rect(1px,1px,1px,1px)}
.skip-link{position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden;}
.skip-link:focus{left:12px; top:12px; width:auto; height:auto; background:#fff; color:#000; padding:10px 14px; border-radius:8px; box-shadow:var(--focus)}
a{color:var(--primary-2); text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%; height:auto; display:block}

/* ====== Header / Nav ====== */
.site-header{
  background: radial-gradient(1200px 400px at 20% 0%, rgba(30,108,222,.25), transparent 60%),
              linear-gradient(135deg, #0b1327 0%, #0c1530 60%, #0b1327 100%);
  position: relative;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 0;
}
.brand{display:flex; align-items:center; gap:10px; font-weight:700; letter-spacing:.3px; color:var(--white)}
.brand-logo{
  width:36px; height:36px; border-radius:9px;
  background:linear-gradient(145deg, #fff, #e6e6e6);
  color:#c1121f; display:grid; place-items:center; font-weight:800;
  border:2px solid #c1121f; /* spiller med rød/hvit logo-planen */
}
.menu-btn{
  display:none; gap:8px; align-items:center;
  background:transparent; color:var(--white);
  border:1px solid rgba(255,255,255,.25);
  padding:10px 12px; border-radius:10px; font-weight:700;
}
.menu-btn:focus{outline:none; box-shadow:var(--focus)}
.menu-icon{
  width:20px; height:2px; background:#fff; position:relative; display:inline-block;
}
.menu-icon::before, .menu-icon::after{
  content:""; position:absolute; left:0; width:20px; height:2px; background:#fff;
}
.menu-icon::before{top:-6px}
.menu-icon::after{top:6px}

.nav-collapsible ul{
  list-style:none; margin:0; padding:0; display:flex; gap:18px; flex-wrap:wrap;
}
.nav-collapsible a{color:#EAF2FF; font-weight:600}
.nav-collapsible a:hover{color:#fff}

/* Mobile collapse */
@media (max-width: 768px){
  .menu-btn{display:flex}
  .nav-collapsible{
    width:100%;
    overflow:hidden;
    max-height:0;
    transition:max-height .3s ease;
  }
  .nav-collapsible.open{max-height:280px}
  .nav-collapsible ul{
    flex-direction:column; gap:8px; padding:12px 0 6px;
    border-top:1px solid rgba(255,255,255,.1);
  }
}

/* ====== Hero ====== */
.hero{
  position:relative;
  padding:64px 0 56px;
}
.hero h1{margin:12px 0 8px; font-size: clamp(28px, 4vw, 44px)}
.hero p{max-width:820px; color:#dbe8ff; margin:0 0 22px}
.pill{
  display:inline-block; background: rgba(228,69,47,.1); color:#ffd2cc;
  border:1px solid rgba(228,69,47,.35); padding:6px 10px; border-radius:999px;
  font-size:.92rem; font-weight:700
}
.cta{display:flex; gap:12px; flex-wrap:wrap}
.btn{
  display:inline-block; padding:12px 18px; border-radius:12px; font-weight:800; letter-spacing:.2px;
  box-shadow:var(--shadow-soft); border:1px solid transparent
}
.btn-primary{background:var(--primary); color:#fff; border-color:#2a65c4}
.btn-primary:hover{filter: brightness(1.05)}
.btn-outline{background:transparent; color:#eaf2ff; border-color:rgba(255,255,255,.35)}
.btn-outline:hover{background:rgba(255,255,255,.06)}
.search{margin-top:18px}
.search form{display:flex; gap:8px; flex-wrap:wrap}
.search input[type="search"]{
  flex:1 1 260px; padding:12px 14px; border:1px solid #25324a; border-radius:10px; font-size:1rem;
  background:#0b1322; color:#d9e6ff;
}
.search button{padding:12px 16px; border-radius:10px; background:var(--accent); color:#fff; border:1px solid #ab2e1e; font-weight:800}
.search button:hover{filter:brightness(.95)}
.search :focus{outline:none; box-shadow:var(--focus)}

/* dekorativt gridmønster i hero */
.hero-grid{
  position:absolute; inset:0; pointer-events:none; opacity:.12;
  background-image: linear-gradient(transparent 23px, rgba(255,255,255,.08) 24px),
                    linear-gradient(90deg, transparent 23px, rgba(255,255,255,.08) 24px);
  background-size:24px 24px;
}

/* ====== Seksjonsrammer ====== */
section{padding:64px 0}
.surface{background: linear-gradient(180deg, #0f172a 0%, #0b1320 100%); position:relative}
.dark{background: linear-gradient(180deg, #0b1425 0%, #0b1220 100%); position:relative}
.section-title{font-size: clamp(24px, 3.4vw, 34px); margin:0 0 14px}
.muted{color:var(--muted)}

/* ====== Responsive grids ====== */
.grid{display:grid; gap:24px}
.grid.two{grid-template-columns:1.2fr .8fr; align-items:center}
.grid.three{grid-template-columns:repeat(3,1fr)}
@media (max-width: 980px){
  .grid.two{grid-template-columns:1fr}
  .grid.three{grid-template-columns:repeat(2,1fr)}
}
@media (max-width: 640px){
  .grid.three{grid-template-columns:1fr}
}

/* ====== Illustrasjon (enkel “tech”-form uten å være futuristisk) ====== */
.illustr{
  position:relative; height:220px; border-radius:16px; overflow:hidden;
  background: radial-gradient(600px 180px at 20% 20%, rgba(30,108,222,.25), transparent 60%),
              linear-gradient(160deg, #0f1a33, #0b1220);
  border:1px solid #1a2740; box-shadow:var(--shadow-soft);
  display:grid; place-items:center;
}
.illustr-chip{
  position:absolute; top:14px; left:14px; background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.18); padding:6px 10px; border-radius:999px; font-weight:700; color:#eaf2ff
}
.illustr-shape{
  width:72%; height:58%; border-radius:16px;
  background: linear-gradient(135deg, rgba(42,143,255,.22), rgba(228,69,47,.18));
  border:1px solid rgba(255,255,255,.12);
  box-shadow: inset 0 0 40px rgba(0,0,0,.25);
}

/* ====== Kort / Cards ====== */
.card{
  background: linear-gradient(180deg, #0e172b, #0c1627);
  border:1px solid #1a2842; border-radius: var(--radius);
  padding:20px; box-shadow:var(--shadow-soft); height:100%;
}
.card h3{margin:6px 0 8px; font-size:1.15rem}
.card p{color:var(--muted); margin:0 0 10px}
.chip{
  display:inline-flex; align-items:center; gap:8px; background:rgba(255,255,255,.04);
  border:1px solid #22324b; padding:6px 10px; border-radius:999px; font-size:.95rem; color:#eaf2ff
}
.more{font-weight:800}

/* ====== Feature-bokser (AI-revolusjonen) ====== */
.feature{
  background: linear-gradient(180deg, #0f182c, #0d1526);
  border-left:4px solid var(--accent);
  border-radius:12px; padding:18px 18px 20px; box-shadow:var(--shadow-soft); border-top:1px solid #1b2841; border-right:1px solid #1b2841; border-bottom:1px solid #1b2841;
}
.feature h3{margin:6px 0 8px}
.feature .more{color:#ffd5cd}

/* ====== Lenke-lister ====== */
.links a{
  display:inline-block; margin: 0 18px 6px 0; font-weight:800;
}
.learn .links{
  display:flex; flex-wrap:wrap; gap:10px
}
.link-tile{
  background:linear-gradient(180deg, #0f182c, #0d1526);
  border:1px solid #1a2740; border-radius:12px; padding:12px 14px; font-weight:800; color:#eaf2ff
}

/* dekorativt grid for mørke seksjoner */
.section-grid{
  position:absolute; inset:0; pointer-events:none; opacity:.08;
  background-image: linear-gradient(transparent 23px, rgba(255,255,255,.08) 24px),
                    linear-gradient(90deg, transparent 23px, rgba(255,255,255,.08) 24px);
  background-size:24px 24px;
}
.section-grid.subtle{opacity:.05}

/* ====== Footer ====== */
.footer{
  background: linear-gradient(180deg, #0b1121, #0b0f1b);
  color:#d6e1f8; padding:32px 0; border-top:1px solid rgba(255,255,255,.06)
}
.footer-grid{display:grid; grid-template-columns:2fr 1fr 1fr; gap:24px}
.footer a{color:#eaf2ff}
.footer h4{margin:8px 0}
.copyright{border-top:1px solid rgba(255,255,255,.15); margin-top:18px; padding-top:14px; font-size:.95rem; opacity:.9}
@media (max-width: 980px){.footer-grid{grid-template-columns:1fr 1fr}}
@media (max-width: 640px){.footer-grid{grid-template-columns:1fr}}

/* ====== Focus & misc ====== */
a:focus, button:focus, input:focus{outline:none; box-shadow:var(--focus)}

/* (Valgfritt) lysmodus – om du vil støtte preferanser
@media (prefers-color-scheme: light){
  body{background:#F8FAFF; color:#222}
  .site-header{background:linear-gradient(135deg, #0a47a5, #2a8fff)}
  .card, .feature, .link-tile{background:#fff; color:#222; border-color:#e6eef9}
  .hero p{color:#16233b}
}
*/