/* Kraftallians: tillägg för muspekare, scrollindikator, 3D-skulptur och nodnätverk.
   Laddas efter site.css. Övrig design ligger orörd i site.css. */

/* ---------- Muspekare (bara mus/styrplatta, aldrig pekskärm) ---------- */
.ka-cursor{position:fixed;left:0;top:0;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;
  border:1.5px solid rgb(123 108 255 / .9);background:rgb(103 92 255 / .05);
  pointer-events:none;z-index:2147483000;opacity:0;
  transition:opacity .3s var(--ease-soft),width .35s var(--ease-expo),height .35s var(--ease-expo),margin .35s var(--ease-expo),
    background-color .3s var(--ease-soft),border-color .3s var(--ease-soft);
  will-change:transform}
.ka-cursor.is-visible{opacity:1}
.ka-cursor.is-link{width:58px;height:58px;margin:-29px 0 0 -29px;border-color:rgb(94 140 255 / .95);background:rgb(94 140 255 / .08)}
.ka-cursor.is-down{width:26px;height:26px;margin:-13px 0 0 -13px}
.ka-cursor.is-link.is-down{width:48px;height:48px;margin:-24px 0 0 -24px}
.ka-cursor.is-text{opacity:0}
.tone-light .ka-cursor,.ka-cursor.on-light{border-color:rgb(91 80 240 / .85)}
@media (hover:none),(pointer:coarse){.ka-cursor{display:none!important}}

/* ---------- Scrollindikator i första sektionen ---------- */
.ka-scrollcue{display:inline-grid;place-items:center;width:6.25rem;height:6.25rem;margin-top:1.75rem;border-radius:50%;
  color:#dfe4f0;position:relative;transition:transform .5s var(--ease-expo)}
.ka-scrollcue svg{width:100%;height:100%;overflow:visible}
.ka-scrollcue__ring{fill:rgb(11 16 32 / .55);stroke:#6f63ff;stroke-width:1.4;transition:stroke .3s,fill .3s}
.ka-scrollcue__text{transform-origin:60px 60px;animation:ka-spin 22s linear infinite}
.ka-scrollcue__text text{font-family:var(--font-mono);font-size:9.2px;letter-spacing:.2em;fill:#c9ceff}
.ka-scrollcue__arrow{fill:none;stroke:#fff;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;animation:ka-bob 2.4s var(--ease-soft) infinite}
.ka-scrollcue::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:1px solid rgb(111 99 255 / .35);animation:ka-pulse 3.2s var(--ease-soft) infinite}
.ka-scrollcue:hover{transform:scale(1.05)}
.ka-scrollcue:hover .ka-scrollcue__ring{stroke:#8fa6ff;fill:rgb(103 92 255 / .16)}
.ka-scrollcue:focus-visible{outline:2px solid #9a93ff;outline-offset:6px}
@keyframes ka-spin{to{transform:rotate(360deg)}}
@keyframes ka-bob{0%,100%{transform:translateY(-2px)}50%{transform:translateY(3px)}}
@keyframes ka-pulse{0%{opacity:.7;transform:scale(.96)}70%,100%{opacity:0;transform:scale(1.14)}}
@media (max-width:1023px){.ka-scrollcue{width:5.75rem;height:5.75rem;margin-top:2rem}}

/* ---------- Nodnätverk ---------- */
.ka-net{position:relative;margin-top:clamp(2.5rem,5vw,4rem)}
.ka-net__stage{position:relative;height:clamp(26rem,62vh,40rem);border-radius:var(--radius-lg);overflow:hidden;
  background:radial-gradient(120% 90% at 50% 40%,#fff 0%,#f4f6fa 70%);border:1px solid #0b10201a;
  touch-action:pan-y;cursor:grab;user-select:none;-webkit-user-select:none}
.ka-net[data-tone="dark"] .ka-net__stage{background:radial-gradient(120% 90% at 50% 40%,#141b38 0%,#0b1020 70%);border-color:#ffffff1a}
.ka-net__stage.is-dragging{cursor:grabbing}
.ka-net__stage.is-dragging-node{cursor:move}
.ka-net__stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.ka-net__labels{position:absolute;inset:0;pointer-events:none}
.ka-net__label{position:absolute;left:0;top:0;white-space:nowrap;font-size:.8125rem;font-weight:600;color:#0b1020;
  background:#ffffffe0;border:1px solid #0b10201f;border-radius:999px;padding:.25rem .625rem;box-shadow:0 4px 14px -8px #0b102040;
  transition:opacity .25s}
.ka-net__tip{position:absolute;left:0;top:0;pointer-events:none;white-space:nowrap;font-size:.75rem;color:#fff;background:#0b1020e6;
  border-radius:.5rem;padding:.3rem .55rem;font-family:var(--font-mono);letter-spacing:.02em}
.ka-net__hint{position:absolute;left:1rem;bottom:.875rem;margin:0;font-family:var(--font-mono);font-size:.6875rem;letter-spacing:.14em;
  text-transform:uppercase;color:#5b6274;pointer-events:none}
.ka-net__controls{position:absolute;right:.875rem;bottom:.875rem;display:flex;gap:.375rem}
.ka-net__controls button,.ka-net__close{width:2.375rem;height:2.375rem;display:grid;place-items:center;border-radius:50%;
  background:#fff;border:1px solid #0b102026;color:#0b1020;cursor:pointer;transition:background-color .2s,border-color .2s}
.ka-net__controls button:hover,.ka-net__close:hover{border-color:#5b50f0;background:#f1f0ff}
.ka-net__controls svg,.ka-net__close svg{fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.ka-net__controls button:focus-visible,.ka-net__close:focus-visible,.ka-net__areas button:focus-visible{outline:2px solid #5b50f0;outline-offset:2px}
.ka-net__panel{position:absolute;top:1rem;right:1rem;width:min(22rem,calc(100% - 2rem));max-height:calc(100% - 5rem);overflow:auto;
  background:#ffffffeb;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid #0b10201a;border-radius:1.25rem;
  padding:1.375rem 1.375rem 1.25rem;box-shadow:0 20px 50px -30px #0b102066;animation:ka-panel .45s var(--ease-expo)}
.ka-net__panel[hidden]{display:none}
.ka-net__panel .display-3{margin-top:.5rem;font-size:1.5rem}
.ka-net__text{margin-top:.625rem;color:#475066;font-size:.9375rem;line-height:1.55}
.ka-net__panel ul{margin-top:.875rem;display:grid;gap:.375rem;font-size:.875rem;color:#0b1020}
.ka-net__panel li{padding-left:1rem;position:relative}
.ka-net__panel li::before{content:"";position:absolute;left:0;top:.55em;width:.375rem;height:.375rem;border-radius:50%;background:#5b50f0}
.ka-net__cross{margin-top:.875rem;font-size:.8125rem;color:#5b6274;line-height:1.5}
.ka-net__panel .link-arrow{margin-top:1rem;color:#4a3fdb}
.ka-net__close{position:absolute;top:.75rem;right:.75rem;width:2rem;height:2rem}
@keyframes ka-panel{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.ka-net__areas{margin-top:1rem;display:flex;flex-wrap:wrap;gap:.5rem}
.ka-net__areas button{display:inline-flex;align-items:center;gap:.5rem;padding:.55rem .95rem;border-radius:999px;border:1px solid #0b102026;
  background:#fff;color:#0b1020;font-size:.875rem;font-weight:500;cursor:pointer;transition:border-color .2s,background-color .2s}
.ka-net__areas button:hover{border-color:#5b50f0}
.ka-net__areas button[aria-pressed="true"]{background:#0b1020;color:#fff;border-color:#0b1020}
.ka-net__dot{width:.5rem;height:.5rem;border-radius:50%;background:var(--area,#5b50f0)}
.ka-net__fallback-link{display:none}
.ka-net__note{margin-top:.875rem;font-size:.8125rem;color:#5b6274;max-width:48rem}
/* Utan WebGL: dölj modellen och visa områdena som länkar */
.ka-net.is-fallback .ka-net__stage,.ka-net.is-fallback .ka-net__areas button{display:none}
.ka-net.is-fallback .ka-net__fallback-link{display:inline-flex;padding:.7rem 1.1rem;border-radius:999px;border:1px solid #0b102026;background:#fff;font-weight:600;font-size:.9375rem}
.ka-net.is-fallback .ka-net__panel{position:static;width:auto;margin-top:1rem}
@media (max-width:720px){
  .ka-net__stage{height:min(30rem,70vh)}
  .ka-net__panel{position:static;width:auto;max-height:none;margin-top:.75rem;animation:none}
  .ka-net__hint{font-size:.625rem;right:8.5rem}
}

@media (prefers-reduced-motion:reduce){
  .ka-scrollcue__text,.ka-scrollcue__arrow,.ka-scrollcue::after{animation:none}
  .ka-net__panel{animation:none}
  .ka-cursor{transition:opacity .2s}
}

/* ---------- Sidfot ---------- */
.ka-foot{border-top:1px solid var(--line);position:relative;overflow:hidden}
.ka-foot::before{content:"";position:absolute;left:50%;top:-1px;width:min(56rem,90%);height:1px;transform:translateX(-50%);
  background:linear-gradient(90deg,transparent,rgb(123 108 255 / .7),transparent)}
.ka-foot::after{content:"";position:absolute;left:50%;top:-12rem;width:44rem;height:18rem;transform:translateX(-50%);border-radius:50%;
  background:radial-gradient(closest-side,rgb(103 92 255 / .10),transparent);pointer-events:none}
.ka-foot__top{position:relative;z-index:1;display:grid;gap:3rem;padding-block:clamp(3.5rem,7vw,5.5rem) clamp(2.5rem,5vw,3.5rem)}
.ka-foot__brand{max-width:22rem}
.ka-foot__logo{display:inline-flex;border-radius:.5rem}
.ka-foot__tagline{margin-top:1.25rem;color:var(--muted);font-size:.9375rem;line-height:1.65}
.ka-foot__mail{margin-top:1.5rem;display:inline-flex;align-items:center;gap:.5rem;padding:.6rem 1rem;border-radius:999px;
  border:1px solid rgb(123 108 255 / .45);background:rgb(103 92 255 / .08);color:#e6e4ff;font-size:.9375rem;font-weight:500;
  transition:border-color .25s var(--ease-soft),background-color .25s var(--ease-soft)}
.ka-foot__mail svg{transition:transform .35s var(--ease-expo)}
.ka-foot__mail:hover{border-color:#8f86ff;background:rgb(103 92 255 / .16)}
.ka-foot__mail:hover svg{transform:translateX(3px)}
.ka-foot__nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2.5rem 1.5rem}
.ka-foot__head{font-family:var(--font-mono);font-size:.6875rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-text);white-space:nowrap}
.ka-foot__col ul{margin-top:1.125rem;display:grid;gap:.25rem}
.ka-foot__col a{display:inline-block;padding:.3rem 0;color:#a9b4cc;font-size:.9375rem;white-space:nowrap;position:relative;
  transition:color .2s var(--ease-soft)}
.ka-foot__col a::after{content:"";position:absolute;left:0;right:0;bottom:.2rem;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;
  transition:transform .35s var(--ease-expo)}
.ka-foot__col a:hover{color:#fff}
.ka-foot__col a:hover::after{transform:scaleX(1)}
.ka-foot a:focus-visible{outline:2px solid #9a93ff;outline-offset:3px;border-radius:4px}
.ka-foot__bottom{position:relative;z-index:1;display:flex;flex-direction:column;gap:.5rem;padding-block:1.5rem 2rem;border-top:1px solid var(--line);
  font-size:.8125rem;color:#7d879f}
.ka-foot__bottom a{color:#c3cbe0;text-decoration:underline;text-underline-offset:4px;text-decoration-color:rgb(195 203 224 / .35);transition:color .2s,text-decoration-color .2s}
.ka-foot__bottom a:hover{color:#fff;text-decoration-color:#fff}
@media (min-width:640px){.ka-foot__bottom{flex-direction:row;justify-content:space-between;align-items:center}}
@media (min-width:900px){.ka-foot__nav{grid-template-columns:repeat(4,minmax(0,auto));justify-content:space-between;gap:2rem}}
@media (min-width:1100px){.ka-foot__top{grid-template-columns:minmax(16rem,22rem) 1fr;gap:4rem}}
@media (max-width:420px){.ka-foot__col a{white-space:normal}}
.ka-nw{white-space:nowrap}

/* ---------- 3D-figur: systemmoduler ---------- */
.ka-sys{position:relative;width:100%;max-width:40rem;aspect-ratio:640/620;margin-inline:auto}
.ka-sys::before{content:"";position:absolute;inset:10% 6%;border-radius:50%;
  background:radial-gradient(closest-side,rgb(103 92 255 / .22),rgb(70 90 255 / .07) 55%,transparent 75%);filter:blur(10px);pointer-events:none}
.ka-sys canvas,.ka-sys__poster{position:absolute;inset:0;width:100%;height:100%;display:block}
.ka-sys canvas{opacity:0;transition:opacity 1s var(--ease-soft)}
.ka-sys.is-live canvas{opacity:1}
html.js .ka-sys:not(.is-fallback) .ka-sys__poster{display:none}
.ka-sys.is-fallback canvas,.ka-sys.is-fallback .ka-sys__labels{display:none}
.ka-sys__labels{position:absolute;inset:0;pointer-events:none}
.ka-sys__label{position:absolute;left:0;top:0;white-space:nowrap;font-family:var(--font-mono);font-size:.6875rem;letter-spacing:.12em;text-transform:uppercase;
  color:#c9ceff;padding:.2rem .5rem;border-radius:999px;background:rgb(11 16 32 / .55);border:1px solid rgb(123 108 255 / .28);
  transition:color .25s,border-color .25s,background-color .25s}
.ka-sys__label.is-hot{color:#fff;border-color:rgb(143 134 255 / .9);background:rgb(103 92 255 / .25)}
@media (max-width:1023px){.ka-sys{max-width:26rem}.ka-sys__label{font-size:.625rem}}

/* ---------- Problemlistan: diagrammen ska alltid ligga på en rad ---------- */
._1UuSFW_diagram{flex-wrap:nowrap;container-type:inline-size}
._1UuSFW_step{flex:1 1 auto;min-width:0}
._1UuSFW_step:last-child{flex:0 0 auto}
._1UuSFW_box{flex:none;padding:.4rem .6rem}
._1UuSFW_wire{flex:1 1 auto;width:auto;min-width:.75rem}
._1UuSFW_gap{flex:1 1 auto;width:auto;min-width:1.25rem}
@container (max-width:300px){._1UuSFW_box{font-size:.75rem;padding:.35rem .45rem}}