/* Affectus – gemensamma stilar (delas av alla sidor) */
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800&family=Barlow:wght@400;500;600&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

:root{
    --bg: #e9efec;
    --ink: #0a1210;
    --ink-2: #121c19;
    --panel-light: #ffffff;
    --panel-dark: #14201d;
    --grid-line-light: rgba(10,18,16,.05);
    --grid-line-dark: rgba(233,239,236,.06);
    --signal: #ff0000;
    --signal-dim: #cc0000;
    --signal-soft: rgba(255,0,0,.30);
    --signal-faint: rgba(255,0,0,.22);
    --green: #22c55e;
    --green-soft: rgba(34,197,94,.35);
    --text-ink: #0a1210;
    --text-ink-dim: #4c5652;
    --text-on-dark: #e9efec;
    --text-on-dark-dim: rgba(233,239,236,.62);
    --border-light: rgba(10,18,16,.16);
    --border-dark: rgba(233,239,236,.16);
  }

:root[data-theme="dark"]{
    --bg: #0d1614;
    --panel-light: #14201d;
    --grid-line-light: rgba(233,239,236,.05);
    --text-ink: #e9efec;
    --text-ink-dim: rgba(233,239,236,.62);
    --border-light: rgba(233,239,236,.16);
  }

*{ box-sizing:border-box; }

html,body{ margin:0; }

body{
    background:
      linear-gradient(var(--grid-line-light) 1px, transparent 1px) 0 0/44px 44px,
      linear-gradient(90deg, var(--grid-line-light) 1px, transparent 1px) 0 0/44px 44px,
      var(--bg);
    color: var(--text-ink);
    font-family:'Barlow', ui-sans-serif, system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
    overflow-x:hidden;
    animation: gridDriftLight 14s linear infinite;
  }

@keyframes gridDriftLight{
    from{ background-position: 0 0, 0 0, 0 0; }
    to{ background-position: 44px 44px, 44px 44px, 0 0; }
  }

@media (prefers-reduced-motion: reduce){ body{ animation:none; } }

img{ max-width:100%; display:block; }

h1,h2,h3{ font-family:'Barlow Condensed', ui-sans-serif, sans-serif; font-weight:800; letter-spacing:-0.01em; line-height:0.96; text-wrap:balance; margin:0; text-transform:uppercase; }

p{ margin:0; }

a{ color:inherit; }

.linkedin-link{ display:inline-flex; align-items:center; gap:6px; }

.linkedin-mark{
    width:15px; height:15px; border-radius:3px; display:inline-flex; align-items:center; justify-content:center;
    background:var(--text-ink-dim); color:var(--bg); font-family:Arial,sans-serif; font-size:10px; font-weight:700; line-height:1;
  }

.linkedin-link:hover .linkedin-mark{ background:var(--signal-dim); }

.zone-dark .linkedin-mark{ color:var(--ink); }

.mono{ font-family:'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; }

.tag-label{
    font-family:'JetBrains Mono', monospace; font-size:11px; letter-spacing:.1em; text-transform:uppercase; font-weight:600;
  }

.tabular{ font-variant-numeric: tabular-nums; }

:focus-visible{ outline:2px solid var(--signal); outline-offset:3px; }

.wrap{ max-width:1180px; margin:0 auto; padding-inline: clamp(20px,5vw,56px); }

section{ position:relative; }

.zone-dark{
    background:
      radial-gradient(ellipse at 50% 0%, rgba(255,60,40,.05), transparent 55%),
      linear-gradient(var(--grid-line-dark) 1px, transparent 1px) 0 0/44px 44px,
      linear-gradient(90deg, var(--grid-line-dark) 1px, transparent 1px) 0 0/44px 44px,
      var(--ink);
    color: var(--text-on-dark);
    position:relative;
    animation: gridDriftDark 14s linear infinite;
  }

@keyframes gridDriftDark{
    from{ background-position: 50% 0%, 0 0, 0 0, 0 0; }
    to{ background-position: 50% 0%, 44px 44px, 44px 44px, 0 0; }
  }

@media (prefers-reduced-motion: reduce){ .zone-dark{ animation:none; } }

.zone-dark::after{
    content:''; position:absolute; inset:0; pointer-events:none; z-index:0;
    background: repeating-linear-gradient(0deg, rgba(0,0,0,.09) 0px, rgba(0,0,0,.09) 1px, transparent 1px, transparent 3px);
    mix-blend-mode: multiply;
  }

.zone-dark > .wrap{ position:relative; z-index:1; }

.zone-light{ background: transparent; color: var(--text-ink); }

.status-dot{ width:7px; height:7px; border-radius:50%; background:var(--signal); display:inline-block; box-shadow:0 0 0 3px var(--signal-soft); }

@keyframes blink{ 0%,100%{opacity:1;} 50%{opacity:.25;} }

.status-dot.live{ animation: blink 1.6s steps(2,end) infinite; }

@media (prefers-reduced-motion: reduce){ .status-dot.live{ animation:none; } }

/* ---------- NAV ---------- */
  .nav{
    position:sticky; top:env(safe-area-inset-top,0px); z-index:50;
    background: rgba(233,239,236,0.88); backdrop-filter: blur(10px);
    border-bottom:1px solid var(--border-light);
  }

.nav .wrap{ display:flex; align-items:center; justify-content:space-between; height:52px; padding-block:0; }

.nav-logo{ display:flex; align-items:center; gap:10px; text-decoration:none; }

.nav-logo img{ height:24px; width:auto; }

.nav-id{ font-family:'JetBrains Mono'; font-size:11px; color:var(--text-ink-dim); }

.nav-links{ display:flex; gap: clamp(10px,2vw,22px); list-style:none; margin:0; padding:0; }

.nav-links a{
    font-family:'JetBrains Mono'; font-size:12.5px; text-decoration:none; color:var(--text-ink);
    padding:6px 2px; position:relative;
  }

.nav-links a::before{ content:'['; opacity:0; margin-right:3px; color:var(--signal); }

.nav-links a::after{ content:']'; opacity:0; margin-left:3px; color:var(--signal); }

.nav-links a:hover::before, .nav-links a:hover::after{ opacity:1; }

.nav-links a.active{ color:var(--signal); }

.nav-links a.active::before, .nav-links a.active::after{ opacity:1; }

.nav-toggle{ display:none; background:none; border:1px solid var(--border-light); border-radius:4px; cursor:pointer; padding:5px 10px; font-family:'JetBrains Mono'; font-size:12px; }

.nav-toggle .bars{ display:block; width:20px; height:14px; background:linear-gradient(currentColor,currentColor) 0 0/100% 2px no-repeat, linear-gradient(currentColor,currentColor) 0 50%/100% 2px no-repeat, linear-gradient(currentColor,currentColor) 0 100%/100% 2px no-repeat; }

.nav-toggle{ color:var(--text-ink); }

.nav-links a.lang-link{ padding-left:14px; border-left:1px solid var(--border-light); font-weight:700; }

.nav-logo .logo-dark{ display:none; }

@media (min-width:861px){
    .nav-links{ margin-left:auto; overflow:hidden; white-space:nowrap; max-width:800px; transition:max-width .45s cubic-bezier(.4,0,.2,1), opacity .3s ease; }
    .nav:not(.is-scrolled) .nav-links{ transition-delay:.25s; }
    .nav.is-scrolled:not(.nav-open) .nav-links{ max-width:0; opacity:0; pointer-events:none; transition-delay:0s; }
    .nav-toggle{ display:block; opacity:0; max-width:0; padding:5px 0; margin-left:0; border-width:0; overflow:hidden; pointer-events:none; transition:opacity .3s ease, max-width .3s ease, padding .3s ease, margin .3s ease, border-width .3s ease; }
    .nav.is-scrolled .nav-toggle{ opacity:1; max-width:60px; padding:5px 10px; margin-left:14px; border-width:1px; pointer-events:auto; transition-delay:.45s; }
  }

@media (max-width:860px){
    .nav .wrap{ position:relative; }
    .nav-links{
      position:absolute; top:100%; left:clamp(20px,5vw,56px); right:clamp(20px,5vw,56px);
      display:none; flex-direction:column; align-items:flex-start; gap:12px;
      padding:16px 18px; background:var(--bg); border:1px solid var(--border-light);
      box-shadow:0 20px 36px -28px rgba(0,0,0,.45); z-index:60;
    }
    .nav.nav-open .nav-links{ display:flex; }
    .nav-links a.lang-link{ padding-left:2px; border-left:0; }
  }

@media (max-width:480px){
    .logo-strip{ --logo-gap:28px; --logo-offset:14px; }
    .logo-strip img{ flex-basis:128px; width:128px; height:36px; }
  }

.nav-logo .logo-clip{ display:flex; overflow:hidden; max-width:200px; transition:max-width .4s cubic-bezier(.4,0,.2,1); }

.nav-logo .logo-clip img{ flex:none; max-width:none; }

.nav-id{ white-space:nowrap; overflow:hidden; max-width:60px; transition:opacity .25s ease, max-width .4s cubic-bezier(.4,0,.2,1), margin .4s cubic-bezier(.4,0,.2,1); }

.nav.is-scrolled .logo-clip{ max-width:24px; }

.nav.is-scrolled .nav-id{ opacity:0; max-width:0; margin-left:-10px; }

[data-theme="dark"] .nav{ background: rgba(13,22,20,0.88); }

[data-theme="dark"] .nav-logo .logo-light{ display:none; }

[data-theme="dark"] .nav-logo .logo-dark{ display:block; }

.theme-toggle{
    background:none; border:1px solid var(--border-light); border-radius:4px; cursor:pointer;
    padding:5px 9px; font-size:13px; line-height:1; color:var(--text-ink); font-family:'JetBrains Mono';
    display:flex; align-items:center; transition: border-color .15s ease, color .15s ease;
  }

.theme-toggle:hover{ border-color:var(--signal); color:var(--signal); }

.theme-toggle .icon-moon{ display:none; }

[data-theme="dark"] .theme-toggle .icon-sun{ display:none; }

[data-theme="dark"] .theme-toggle .icon-moon{ display:inline; }

/* ---------- BUTTONS ---------- */
  .btn{
    display:inline-flex; align-items:center; gap:8px; font-family:'JetBrains Mono'; font-size:13px; font-weight:600;
    text-decoration:none; padding:12px 20px; border-radius:4px; border:1.5px solid transparent;
    transition: transform .15s ease, background .15s ease, border-color .15s ease;
  }

.btn:hover{ transform: translateY(-1px); }

.btn-fill{ background:var(--signal); color:#fff; }

.btn-fill:hover{ background:var(--signal-dim); }

.btn-outline-dark{ border-color: rgba(233,239,236,.5); color:var(--text-on-dark); }

.btn-outline-dark:hover{ border-color:#fff; }

.btn-row{ display:flex; gap:12px; flex-wrap:wrap; }

.footer-grid{ display:grid; grid-template-columns: 1.3fr repeat(4,1fr); gap:26px; }

.footer-brand img{ height:20px; }

.footer-brand p{ margin-top:14px; font-size:12.5px; color:var(--text-on-dark-dim); max-width:26ch; line-height:1.5; font-family:'JetBrains Mono'; }

.footer-col h4{ font-family:'JetBrains Mono'; font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--text-on-dark-dim); margin:0 0 12px; font-weight:600; }

.footer-col ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; }

.footer-col a{ text-decoration:none; font-family:'JetBrains Mono'; font-size:12px; color:var(--text-on-dark); }

.footer-col a:hover{ color:var(--signal); }

.footer-bottom{ margin-top:38px; padding-top:20px; border-top:1px solid var(--border-dark); display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; }

.footer-bottom p{ font-family:'JetBrains Mono'; font-size:11px; color:var(--text-on-dark-dim); }

/* ---------- SCROLL REVEAL ---------- */
  .reveal{
    opacity:0;
    transform: translateY(30px);
    transition: opacity .8s cubic-bezier(0.16,1,0.3,1), transform .8s cubic-bezier(0.16,1,0.3,1);
    will-change: opacity, transform;
  }

.reveal.is-visible{ opacity:1; transform:none; }