:root{
  --bg:#0b0c12; --surface:#15161d; --surface2:#1d2030;
  --line:rgba(255,255,255,.085); --line2:rgba(226,232,255,.18);
  --fg:#f2f3f7; --dim:rgba(242,243,247,.64);
  --accent:#4a86d4; --accent2:#6ba3ea; --accent-strong:#22568f; --accent-press:#2b6bb0; --accent3:#d6e6ff; --ok:#9fc3ff;
  --accent-soft:rgba(74,134,212,.16); --accent-line:rgba(214,230,255,.28);
  --accent-glow:rgba(74,134,212,.28);
  --font:"Schibsted Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-display:"Bricolage Grotesque",system-ui,-apple-system,"Segoe UI",sans-serif;
  /* strong ease-out (Emil) — built-in `ease` is too weak for UI feedback */
  --ease-out:cubic-bezier(.23,1,.32,1);
  /* fluid page gutter: min 28px, grows with viewport, and on wide screens
     grows further to center content within --maxw so it never sprawls */
  --maxw:1500px;
  --gutter-x:max(clamp(28px,5vw,80px), calc((100% - var(--maxw)) / 2));
}
*{margin:0;padding:0;box-sizing:border-box}
html{background:var(--bg)}
body{font-family:var(--font);color:var(--fg);min-height:100vh;display:flex;flex-direction:column;position:relative}

/* ---- ambient drifting glow (subtle background life) ---- */
body::before{content:"";position:fixed;left:0;right:0;top:-24vh;height:80vh;z-index:0;pointer-events:none;
  background:radial-gradient(560px 380px at 28% 30%, rgba(74,134,212,.10), transparent 70%);
  animation:kpds-drift 30s ease-in-out infinite alternate;will-change:transform}
@keyframes kpds-drift{from{transform:translate3d(-5%,-3%,0)}to{transform:translate3d(7%,5%,0)}}
body>*{position:relative;z-index:1}

/* ---- scroll reveal (IntersectionObserver adds .in) ---- */
.sr{opacity:0;transform:translateY(24px);filter:blur(6px);
  transition:opacity .7s var(--ease-out),transform .7s var(--ease-out),filter .7s var(--ease-out)}
.sr.in{opacity:1;transform:none;filter:none}

@media (prefers-reduced-motion:reduce){
  body::before{animation:none}
  .sr{opacity:1;transform:none;filter:none;transition:none}
}

/* ---- shared header (identical on every page) ---- */
.site-header{display:flex;align-items:center;gap:14px;padding:17px var(--gutter-x);border-bottom:1px solid var(--line);background:rgba(11,12,18,.55);backdrop-filter:blur(14px)}
.site-header .logo{width:44px;height:44px;border-radius:13px;display:block}
.site-header .brand{font-weight:700;font-size:21px;letter-spacing:.1px}
.nav{margin-left:auto;display:flex;gap:28px}
.nav a{color:var(--dim);font-size:15.5px;font-weight:600;text-decoration:none}
.nav a:hover,.nav a.active{color:var(--fg)}
.nav a:focus-visible,.site-footer a:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px;color:var(--fg)}

/* ---- shared status pill (identical everywhere) ---- */
.pill{margin-left:20px;display:inline-flex;align-items:center;gap:8px;padding:8px 16px;border-radius:999px;
  background:var(--accent-soft);border:1px solid var(--accent-line);color:#eef1ff;
  font-size:14px;font-weight:700;white-space:nowrap}
.pill svg{width:16px;height:16px}

/* ---- shared footer ---- */
.site-footer{margin-top:auto;display:flex;align-items:center;gap:22px;padding:17px var(--gutter-x);
  border-top:1px solid var(--line);color:var(--dim);font-size:14.5px;flex-wrap:wrap}
.site-footer .fbrand{display:flex;align-items:center;gap:9px;color:var(--fg);font-weight:600}
.site-footer .fbrand img{width:24px;height:24px;border-radius:7px}
.site-footer .flinks{display:flex;gap:20px;margin-left:auto;flex-wrap:wrap}
.site-footer a{text-decoration:none;color:var(--dim)}
.site-footer a:hover{color:var(--fg)}

@media (max-width:900px){
  body{min-height:100vh}
  .site-header{padding:20px 28px;flex-wrap:wrap}
  .nav{order:3;width:100%;margin-left:0;gap:20px;overflow-x:auto;padding-top:8px}
  .pill{margin-left:auto}
  .site-footer{padding:22px 28px;gap:14px}
  .site-footer .flinks{width:100%;margin-left:0;gap:14px}
}