/* knapp.css — sajtens knappsystem v2 + panelbehandling (laddas på ALLA sidor,
   efter pages.css/buttons.css så basen vinner; KNAPP-labbets html[data-btn]-
   varianter kan fortfarande väljas ovanpå — detta är nya designbasen).
   Primär: nära-svart translucent, 1px mint-hairline, 8px radius, mono-versaler.
   Hover: EN långsam diagonal sheen (0.9s) + något ljusare kant. Inget glöd.
   Sekundär (textlänkar): understrykning ritas in från vänster, pilen glider 4px. */

/* ── primär: cursor-medveten cirkelfyllnad (Snellenberg-stil, knapp.js) ──
   Vila: mörk nästan-opak botten, MINT text, ingen kant, inget glöd.
   Hover: mint cirkel expanderar från exakt inträdespunkten (≥2.4× större
   dimensionen så den täcker bortersta hörnet), etiketten går mörk;
   på leave kontraherar cirkeln mot UTGÅNGSpunkten. */
/* v3 2026-07-28 (Williams "knappen måste va något mycket clenare, awwwards"):
   den spärrade mono-VERSAL-lådan STRUKEN — den bröt husets egen regel (spärrad
   mono-versal är reserverad för nav-brand, filmens beat-meta, kickers, fbrand)
   och läste som en generisk AI-knapp. Ersatt av PILLRET, språket båda våra
   färskaste referenser landat i (lenis.dev:s två piller-CTA:er + gsap.com:s
   "Get GSAP"-piller, skördade i kupolen-tavlan/film/): fullt rundat, hårfin
   mint-kant, etiketten i Supreme normal-case, en punkt som växer till pil.
   Cursor-fyllnaden (knapp.js .kfyll) behålls oförändrad — den funkar på
   99px-radie också och är sajtens signatur. */
.btn,.cta{
  position:relative;display:inline-flex;align-items:center;gap:.75em;
  background:none;border:0;border-radius:99px;
  color:var(--text);font-family:Supreme,system-ui,sans-serif;font-weight:600;
  font-size:1rem;letter-spacing:.005em;text-transform:none;
  padding:.92em 1.5em .92em 1.75em;text-decoration:none;overflow:hidden;cursor:pointer;
  line-height:1.2;isolation:isolate;
  transition:color .28s ease .05s,border-color .35s ease;-webkit-tap-highlight-color:transparent}
.btn::before,.cta::before{content:"";position:absolute;inset:0;z-index:-2;
  background:rgba(5,10,12,.55);border:1px solid rgba(79,227,212,.32);border-radius:inherit;
  transition:border-color .35s ease}
.btn:hover::before,.cta:hover::before{border-color:rgba(79,227,212,.7)}
/* punkten som blir pil: mint prick i vila, sträcker sig till → vid hover */
.btn::after,.cta::after{content:"→";font-family:var(--mono);font-size:.9em;
  opacity:.55;transform:translateX(-3px);
  transition:transform .38s cubic-bezier(.23,1,.32,1),opacity .3s ease}
.btn:hover::after,.cta:hover::after,.btn:focus-visible::after,.cta:focus-visible::after{
  transform:translateX(1px);opacity:1}
.kfyll{position:absolute;border-radius:50%;background:var(--teal);transform:scale(0);z-index:-1;pointer-events:none;will-change:transform}
.btn.fylld,.cta.fylld{color:var(--duk)}
.btn.ghost{color:var(--teal-dim)}
.qback{position:relative;display:inline-block;background:rgba(5,10,12,.55);border:1px solid rgba(232,244,242,.2);
  border-radius:8px;color:var(--dis);font-family:var(--mono);font-weight:600;font-size:.76rem;letter-spacing:.18em;
  text-transform:uppercase;padding:.95em 1.7em;cursor:pointer;line-height:1.2;transition:border-color .4s,color .4s}
.qback:hover{border-color:rgba(79,227,212,.6);color:var(--text)}
/* touch: tryck-fyllnaden bor på ::before (bakgrunden) — ::after är pilen sedan
   v3 och får aldrig kapas här (krock som fanns i första v3-utkastet) */
@media (pointer:coarse){
  .btn:active::before,.cta:active::before{background:var(--teal);border-color:var(--teal)}
  .btn:active,.cta:active{color:var(--duk)}
}
/* fokus — synlig mint-outline vid tab */
.btn:focus-visible,.cta:focus-visible,.nav-cta:focus-visible,.topp-cta:focus-visible,.qback:focus-visible,
.mer:focus-visible,.svc-more:focus-visible,.split-lank:focus-visible,.sl-more:focus-visible{
  outline:2px solid var(--teal);outline-offset:3px}

/* ── nav-CTA: ren textlänk i mint — ingen låda, passar den tysta nav:en.
   Pil som glider + understrykning som ritas in från vänster (sajtens
   sekundärspråk); cirkelfyllnaden är kvar på de stora sido-CTA:erna. */
.nav-cta,.topp-cta{position:relative;display:inline-flex;align-items:center;gap:.45rem;
  background:none;border:0;border-radius:0;padding:.2em 0;overflow:visible;isolation:auto;
  color:var(--teal);font-family:Supreme,system-ui,sans-serif;font-weight:600;font-size:.95rem;
  letter-spacing:.01em;text-transform:none;text-decoration:none;cursor:pointer;line-height:1.3;
  transition:color .3s ease}
.nav-cta::before,.topp-cta::before{content:"";position:absolute;left:0;bottom:-3px;height:1px;width:100%;
  background:var(--teal);transform:scaleX(0);transform-origin:left;transition:transform .32s ease;
  inset:auto auto -3px 0;border:0;border-radius:0;z-index:auto}
.nav-cta:hover::before,.topp-cta:hover::before,.nav-cta:focus-visible::before,.topp-cta:focus-visible::before{transform:scaleX(1)}
.nav-cta::after,.topp-cta::after{content:"\2192";position:static;display:inline-block;background:none;
  transform:none;opacity:1;transition:transform .32s ease;font-family:var(--mono);font-size:.9em}
.nav-cta:hover::after,.topp-cta:hover::after{transform:translateX(4px)}
.nav-cta:focus-visible,.topp-cta:focus-visible{outline:2px solid var(--teal);outline-offset:4px}

/* ── cirkulär badge-CTA: bara de STORA sektions-CTA:erna (startsidans slutkapitel
   + Om-sidans avslut). Nav-knappen och formulärknapparna rörs inte — de är kvar
   som .nav-cta/.btn ovan. Rund, mörk nästan-opak botten, ingen kant, mint-pil i
   mitten, etiketten som roterande textring runt kanten (SVG <textPath>, byggs av
   knapp.js ur data-ring). Inga nya färgvärden: --teal, samt rgba av --duk
   (5,10,12) och --duk2 (8,20,24) som redan används i huset. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

.cta-badge{
  --bd:clamp(110px,12vw,158px);
  position:relative;display:inline-grid;place-items:center;isolation:isolate;
  width:var(--bd);height:var(--bd);border:0;border-radius:50%;
  background:rgba(5,10,12,.85);color:var(--teal);text-decoration:none;cursor:pointer;
  margin-top:2.2rem;transition:background-color .35s ease;
  -webkit-tap-highlight-color:transparent}
.cta-badge:hover,.cta-badge:focus-visible{background:rgba(8,20,24,.9)}   /* ett steg ljusare */
.cta-badge:focus-visible{outline:2px solid var(--teal);outline-offset:4px}
/* ringen: fyller hela badgen, aldrig i vägen för klick — hela cirkeln är länken */
.cta-badge__ring{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;
  overflow:visible;transform-origin:50% 50%}
.cta-badge__ring text{font-family:var(--mono);font-weight:700;font-size:6.4px;
  text-transform:uppercase;fill:var(--teal);fill-opacity:.7}
.cta-badge__arrow{position:relative;pointer-events:none;line-height:1;
  font-size:calc(var(--bd)*.21);color:var(--teal);transition:color .3s ease}

/* ═══ GLÖDKNAPPEN (2026-07-29, Williams val från Uiverse — MIT, av
   gharsh11032000). Mekaniken hans: mörk knapp · gradient-ram bakom som
   ROTERAR ett halvt varv vid hover · blurrad gradient som glöder utanför
   kanten och växer vid hover · trycket krymper ramen.
   BRAND-FIT: originalets magenta/cyan (#e81cff/#fc00ff) bytt mot husets
   aurora — teal #4fe3d4 → grön #2ee6a8. Lila glöd står på sajtens egen
   anti-slop-lista och krockar med kupolens identitet.
   SCOPE: body.page = Om/Tjänster/Kontakt. Scroll-startsidan har ingen
   body-klass och rörs därför inte (Williams "alla sidor förutom scroll-sidan").
   ⚠ Måste släcka basens overflow:hidden + isolation:isolate — annars klipps
   glöden bort; och .kfyll (cursor-cirkeln) döljs, den nya hovern ersätter den. */
body.page .btn,body.page .cta{
  overflow:visible;isolation:auto;border-radius:8px;
  background:#050a0c;color:var(--text);
  transition:color .3s ease,transform .25s cubic-bezier(.23,1,.32,1)}
body.page .btn::before,body.page .cta::before{
  content:"";position:absolute;inset:-4px -4px auto;left:-4px;top:-4px;
  width:calc(100% + 8px);height:calc(100% + 8px);margin:auto;
  border-radius:10px;border:0;
  background:linear-gradient(-45deg,#4fe3d4 0%,#2ee6a8 100%);
  z-index:-10;pointer-events:none;
  transition:transform .6s cubic-bezier(.175,.885,.32,1.275),scale .3s ease;
  /* ramen sticker ut 4px runt om — det är den som ÄR gradienten man ser */}
/* ⚠ UPPMÄTT: knappen ärver z-index:1 (CTA-bandet) → den ÄR ett eget stacking
   context, så negativa z-index-barn målas OVANPÅ dess bakgrund (hela knappen
   blev mintfylld i första försöket). Lösningen är två lager i stället för att
   lita på knappens egen bakgrund: ::before = gradienten som sticker ut 4px
   (RAMEN), ::after = den mörka plattan inset:0 som täcker mitten. Ordningen
   -10 < -1 håller oavsett stacking context. Glöden = box-shadow (ritas i
   bakgrundssteget, alltså utanför båda lagren). */
body.page .btn::after,body.page .cta::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:#050a0c;border-radius:8px;
  transform:none;opacity:1;font-size:0;
  transition:background-color .3s ease}
body.page .btn,body.page .cta{
  box-shadow:0 0 20px rgba(79,227,212,.42),0 0 44px rgba(46,230,168,.22)}
body.page .btn:hover,body.page .cta:hover{
  box-shadow:0 0 30px rgba(79,227,212,.6),0 0 66px rgba(46,230,168,.34)}
body.page .btn:hover::before,body.page .cta:hover::before{transform:rotate(-180deg)}
body.page .btn:active::before,body.page .cta:active::before{scale:.7}
body.page .btn:active,body.page .cta:active{transform:scale(.97)}
body.page .kfyll{display:none}                 /* cursor-cirkeln ersatt av glöden */

/* ── sekundär: ren text + pil, understrykning ritas in från vänster ──
   v3 2026-07-28: mono + .14em-spärrningen struken här också — sekundärlänkarna
   står bredvid pillret (t.ex. "Boka ett samtal" / "Se resan") och den tekniska
   spärrningen krockade med det rena språket. Supreme, normal case, samma
   ritade understrykning. */
.mer,.svc-more,.split-lank,.sl-more{position:relative;border:0;background:none;border-radius:0;
  padding:0 0 .25em 0;font-family:Supreme,system-ui,sans-serif;font-weight:600;font-size:.98rem;
  letter-spacing:.005em;text-transform:none;color:var(--teal);text-decoration:none}
.mer::after,.svc-more::after,.split-lank::after,.sl-more::after{content:"";position:absolute;left:0;bottom:0;
  height:1px;width:100%;background:var(--teal);transform:scaleX(0);transform-origin:left;transition:transform .32s ease}
.mer:hover::after,.svc-more:hover::after,.split-lank:hover::after,.sl-more:hover::after{transform:scaleX(1)}
.mer .kpil,.svc-more span,.split-lank .kpil,.sl-more .kpil{display:inline-block;transition:transform .32s ease}
.mer:hover .kpil,.svc-more:hover span,.sl-more:hover .kpil{transform:translateX(4px)}
.split-lank:hover .kpil{transform:translateY(4px)}          /* ↓-pilen glider nedåt */
.mer:hover{letter-spacing:.005em}                            /* neutralisera gamla letter-spacing-hovern */

/* ── reduced motion: ingen cirkel/magnetism — omedelbar färgväxling ── */
@media (prefers-reduced-motion: reduce){
  .kfyll{display:none}
  /* badgen: ringen renderas statisk (knapp.js startar ingen rotation), ingen
     magnetism — hovern blir ren botten- + pilfärgsväxling */
  .cta-badge{transition:none}
  .cta-badge__arrow{transition:none}
  .cta-badge:hover .cta-badge__arrow,
  .cta-badge:focus-visible .cta-badge__arrow{color:var(--text)}
  .btn,.cta{transition:none}
  .btn:hover,.cta:hover,
  .btn:focus-visible,.cta:focus-visible{color:var(--duk)}
  .btn:hover::before,.cta:hover::before,
  .btn:focus-visible::before,.cta:focus-visible::before{background:var(--teal)}
  .mer::after,.svc-more::after,.split-lank::after,.sl-more::after{transition:none}
  .mer .kpil,.svc-more span,.split-lank .kpil,.sl-more .kpil{transition:none}
}