/* ==================================================================
   Statly — startsidan.

   Byggd på GetLayers-mallen "Vexon": ett fast Three.js-partikelhalo
   bakom hela sidan, en preloader som räknar 000 → 100, rubriker som
   suddas in tecken för tecken, och en egen markör i mix-blend.

   VAD SOM ÄR VÅRT OCH VAD SOM ÄR MALLENS. Mallens kontrakt säger
   `mutable: skin`, `preserve: motion, composition`. Alltså:

     ÄNDRAT   färger, typsnitt, innehåll, och de två sektioner vi
              lagt till längst ned (jämförelsen och avslutet).
     ORÖRT    shadermatten, entrén, turbulensen, preloaderns timing,
              Lenis-klockan och rörelsekurvorna. De är inte våra att
              skriva om, och en mall vars rörelse "städats" av en
              agent ser inte längre designad ut.

   Tonen är mörk, och det är ett val. Appen bakom inloggningen är
   ljus: den ska gå att titta på i åtta timmar. Startsidan ses en
   gång, och då ska den synas.
   ================================================================== */

/* ---- design tokens — lifted from src/index.css @theme ---- */
:root{
  /* Typsnitten ligger på vår egen disk, se assets/css/fonts.css.
     En sajt som lovar att inga besökardata lämnar landet får inte
     hämta sina bokstäver från Google. */
  --font-sans:"Inter", ui-sans-serif, system-ui, sans-serif;
  --font-mono:"JetBrains Mono", ui-monospace, SFMono-Regular, monospace;
  --font-display:"Space Grotesk", sans-serif;
  /* Vexon satte ordmärket i Orbitron. Den är rymdfärja, inte svensk
     webbanalys, och är utbytt mot displayfonten. Ett typsnitt mindre
     att ladda är dessutom ett löfte mindre att bryta. */
  --font-logo:"Space Grotesk", sans-serif;

  --bg:#000000;
  --fg:#ffffff;
  --muted:#E6E6E6;                              /* body copy / readouts */
  --nav-ink:#8E9299;                            /* idle nav links       */
  --hairline:rgba(255,255,255,.05);             /* border-white/5       */

  /* scene tint — mirrors the GPU vec3 literals in ParticleOrb */
  --halo-deep:#0d2e8c;                          /* vec3(0.05,0.18,0.55) */
  --halo-mid:#3473f2;                           /* vec3(0.20,0.45,0.95) */
  --halo-hot:#ccebff;                           /* vec3(0.80,0.92,1.00) */

  /* Accenten är halots mellanblå. En sida med ett lysande blått halo
     och en grön knapp har två åsikter om vad som är viktigt. */
  --accent:#3473f2;
  --accent-soft:rgba(52,115,242,.14);

  --ease-expo:cubic-bezier(0.16,1,0.3,1);       /* item/card variants   */
  --ease-out:cubic-bezier(0,0,0.58,1);          /* motion "easeOut"     */
  --ease-inout-strong:cubic-bezier(0.76,0,0.24,1); /* preloader exit    */
}

*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{scroll-behavior:smooth;-ms-overflow-style:none;scrollbar-width:none}
html::-webkit-scrollbar{display:none}
body{
  background:var(--bg);color:var(--fg);font-family:var(--font-sans);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  -ms-overflow-style:none;scrollbar-width:none;overflow-x:hidden;
}
body::-webkit-scrollbar{display:none}
body.is-loading{overflow:hidden}
::selection{background:#fff;color:#000}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none}
svg{display:block}
.lenis.lenis-smooth{scroll-behavior:auto !important}
.lenis.lenis-stopped{overflow:hidden}

/* ---- src/index.css @layer utilities ---- */
.progressive-blur{
  -webkit-mask-image:linear-gradient(to top,rgba(0,0,0,1) 0%,rgba(0,0,0,1) 40%,rgba(0,0,0,.8) 60%,rgba(0,0,0,0) 100%);
  mask-image:linear-gradient(to top,rgba(0,0,0,1) 0%,rgba(0,0,0,1) 40%,rgba(0,0,0,.8) 60%,rgba(0,0,0,0) 100%);
}
.hide-scrollbar{-ms-overflow-style:none;scrollbar-width:none}
.hide-scrollbar::-webkit-scrollbar{display:none}

/* ---- shared type helpers (resolved Tailwind) ---- */
.mono{font-family:var(--font-mono)}
.display{font-family:var(--font-display)}
.logo{font-family:var(--font-logo)}

/* ==================================================================
   PRELOADER — Preloader.tsx
================================================================== */
/* Inläsningen är bara globen, centrerad i det svarta. Räknaren, den
   cyklande taggraden och fotnoten är borttagna — scenen får hela ytan,
   så klotet blir lika stort som halot den lämnar över till. */
#preloader{
  position:fixed;inset:0;z-index:200;display:flex;
  align-items:center;justify-content:center;background:#000;
}
/* Utgången: klotet blommar utåt och löses upp medan hjälten tonar in
   under det, i stället för att slockna och lämna plats efteråt. */
#preloader.leaving{
  opacity:0;transform:scale(1.35);filter:blur(24px);pointer-events:none;
  transition:opacity .8s var(--ease-out),transform .8s var(--ease-expo),filter .8s var(--ease-out);
}
.pl-stage{position:relative;display:flex;flex:1 1 0%;width:100%;height:100%;align-items:center;justify-content:center;overflow:hidden}
.pl-stage canvas{position:relative;z-index:0;height:100%;width:100%}

/* ==================================================================
   PARTICLE HALO — fixed background (ParticleOrb.tsx)
================================================================== */
#orb-wrap{
  position:fixed;inset:0;z-index:0;transform-origin:center center;will-change:transform;
}
#orb{
  height:100%;width:100%;
  /* the hot light plume above the halo, matching the video's top glow */
  background:radial-gradient(60% 50% at 50% 22%, rgba(120,170,255,0.18), rgba(40,80,180,0.05) 40%, transparent 70%);
}
#orb canvas{display:block}

/* ==================================================================
   PAGE SHELL
================================================================== */
#shell{position:relative;min-height:100vh;background:#000;font-family:var(--font-sans)}
#content{opacity:0;transition:opacity .6s var(--ease-out)}
#content.in{opacity:1}
#stack{position:relative;z-index:10}

/* ---- reveal engine (motion variants → CSS) ---- */
[data-rv]{
  opacity:0;transform:translateY(100px) scale(.9) rotateX(15deg);filter:blur(10px);
  transition:opacity .6s var(--ease-expo),transform .6s var(--ease-expo),filter .6s var(--ease-expo);
  transition-delay:var(--d,0s);
}
[data-rv="card"]{transition-duration:1.6s}
[data-rv].in{opacity:1;transform:none;filter:blur(0px)}

/* ---- TextEffect preset="blur" ---- */
.te{white-space:pre-wrap}
.te .seg{
  display:inline-block;white-space:pre;opacity:0;filter:blur(12px);
  transition:opacity .3s ease,filter .3s ease;transition-delay:var(--d,0s);
}
.te.in .seg{opacity:1;filter:blur(0px)}

/* ---- arrow glyph (lucide ArrowUpRight) ---- */
.arrow{stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round;
  height:.75rem;width:.75rem;flex:none;transition:transform .15s ease}
.arrow.lg{height:.875rem;width:.875rem;stroke-width:2.5}

/* ==================================================================
   NAV
================================================================== */
.nav{
  position:fixed;top:0;left:0;z-index:50;display:flex;width:100%;
  align-items:flex-start;justify-content:space-between;padding:1.5rem;
}
@media (min-width:768px){.nav{padding:2rem 2.5rem}}
.nav-left{
  display:flex;flex-direction:column;gap:1.5rem;
  opacity:0;transform:translateX(-20px);
  transition:opacity .8s var(--ease-expo),transform .8s var(--ease-expo);
}
@media (min-width:768px){.nav-left{gap:2.5rem}}
.nav-right{
  display:flex;flex-direction:column;align-items:flex-end;gap:.5rem;
  opacity:0;transform:translateY(-10px);
  transition:opacity .8s var(--ease-expo),transform .8s var(--ease-expo);
}
#content.in .nav-left,#content.in .nav-right{opacity:1;transform:none}
.wordmark{
  display:flex;align-items:center;color:#fff;
}
.wordmark svg{display:block;height:22px;width:auto}
@media (min-width:768px){.wordmark svg{height:26px}}
.navlink{
  display:flex;align-items:center;gap:.25rem;font-size:11px;font-weight:500;
  letter-spacing:.1em;color:var(--nav-ink);text-transform:uppercase;
  transition:color .15s ease;
}
.navlink:hover{color:#fff}
.navlink:hover .arrow{transform:translate(.125rem,-.125rem)}

/* ==================================================================
   SECTION 1 — HERO
================================================================== */
.hero{
  display:flex;min-height:100vh;align-items:center;
  padding:8rem 1.5rem 10rem;
}
@media (min-width:768px){.hero{padding:5rem 2.5rem}}
.hero-grid{display:grid;width:100%;grid-template-columns:1fr}
@media (min-width:1024px){
  .hero-grid{grid-template-columns:repeat(12,minmax(0,1fr));gap:2.5rem}
  .hero-l{grid-column:span 12/span 12}
}
.hero-l{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
/* Rubriken gick från tre korta rader till fyra långa. "INTEGRITETSVÄNLIGT"
   är 18 tecken och sätter taket: storlekarna nedan är valda så att den
   raden ryms på en rad ända ner till 320px, annars bryter den mitt i ordet. */
.hero-h1{
  font-family:var(--font-display);font-size:6.8vw;line-height:.94;font-weight:700;
  text-transform:uppercase;letter-spacing:-.03em;color:#fff;
}
@media (min-width:768px){.hero-h1{font-size:5.9vw}}
@media (min-width:1024px){.hero-h1{font-size:3.7vw}}
.hero-line{display:flex;align-items:center;justify-content:center;gap:1rem}
.hero-h1 .te{color:#fff;filter:drop-shadow(0 0 18px rgba(255,255,255,.25))}

/* Bevisraden under rubriken. Två spalter på mobil, alla fyra på en rad
   från 1024px. Tonen är dämpad med flit: det är fotnoter till rubriken,
   inget att klicka på. */
.hero-proof{
  margin-top:2.25rem;display:grid;list-style:none;justify-content:center;
  grid-template-columns:repeat(2,max-content);gap:.875rem 1.5rem;
}
@media (min-width:1024px){
  .hero-proof{margin-top:2.5rem;grid-template-columns:repeat(4,max-content);gap:0 2.5rem}
}
.hero-proof li{
  display:flex;align-items:center;gap:.625rem;white-space:nowrap;
  font-size:.75rem;line-height:1.2;color:var(--muted);
}
@media (min-width:768px){.hero-proof li{font-size:.8125rem}}
.hero-proof .ico{height:1rem;width:1rem;flex:none;opacity:.72}
.hero-proof .ico:not(.ico-flagga){
  fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;
}
.hero-proof .ico-flagga{opacity:.85}

.hero-cta{margin-top:2.25rem;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:1rem}
@media (min-width:768px){.hero-cta{margin-top:2.75rem;gap:1.5rem}}
.btn-frame{
  position:relative;overflow:hidden;border-radius:9999px;background:rgba(0,0,0,.6);
  -webkit-backdrop-filter:blur(64px);backdrop-filter:blur(64px);
  padding:.75rem 1.5rem;font-size:.75rem;font-weight:500;letter-spacing:.025em;
  color:#fff;border:1px solid rgba(255,255,255,.3);
  transition:background .15s ease,border-color .15s ease;
}
@media (min-width:768px){.btn-frame{padding:1rem 2rem;font-size:.875rem}}
.btn-frame:hover{background:rgba(0,0,0,.8)}
.btn-frame span{position:relative;z-index:10;text-transform:uppercase;letter-spacing:.1em}
.btn-plain{
  font-size:.75rem;font-weight:500;letter-spacing:.025em;color:#fff;transition:opacity .15s ease;
}
@media (min-width:768px){.btn-plain{font-size:.875rem}}
.btn-plain:hover{opacity:.7}

/* ==================================================================
   SECTION 3 — MISSION GRID + MARQUEE
================================================================== */
.mission{
  position:relative;z-index:10;border-top:1px solid var(--hairline);background:#000;
  font-family:var(--font-sans);
}
.mission-block{padding:5rem 1.5rem;text-align:center}
@media (min-width:768px){.mission-block{padding:7rem 2.5rem}}
@media (min-width:1024px){.mission-block{padding:8rem 3rem}}
/* Samma typografi som .compare-h2 längre ned, så de två mellanrubrikerna
   väger lika mycket. Versalerna är borta: rubriken sätts som den står. */
.mission-h3{
  font-family:var(--font-display);font-size:1.875rem;font-weight:500;
  line-height:1.2;letter-spacing:-.025em;color:#fff;
}
@media (min-width:768px){.mission-h3{font-size:3rem}}
/* Brödtexten hör ihop med rubriken och ska sitta tätt under den, inte
   en luftrad bort. */
.mission-block p{
  margin:1rem auto 0;max-width:40rem;font-size:.9375rem;font-weight:300;
  line-height:1.7;color:#fff;opacity:.6;
}
@media (min-width:768px){.mission-block p{margin-top:1.25rem;font-size:1.0625rem}}
.mission-block .actions{margin-top:2rem;display:flex;align-items:center;justify-content:center;gap:1rem}
.link-btn{
  display:flex;align-items:center;gap:.5rem;font-size:11px;font-weight:500;text-transform:uppercase;
  letter-spacing:.2em;color:#fff;transition:opacity .15s ease;
}
.link-btn:hover{opacity:.7}
.link-btn:hover .arrow{transform:translate(.125rem,-.125rem)}

.marquee{width:100%;overflow:hidden;border-top:1px solid var(--hairline);padding:3rem 0}
@media (min-width:768px){.marquee{padding:5rem 0}}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.marquee-track{
  display:flex;white-space:nowrap;width:max-content;
  animation:marquee 40s linear infinite;
}
.marquee-track:hover{animation-play-state:paused}
.marquee-track span{
  margin:0 2rem;cursor:default;font-size:32px;font-weight:700;letter-spacing:-.05em;
  color:rgba(255,255,255,.2);transition:transform .15s ease,color .15s ease;display:inline-block;
}
@media (min-width:768px){.marquee-track span{margin:0 4rem;font-size:48px}}
.marquee-track span:hover{transform:scale(1.1);color:#fff}

/* ==================================================================
   FOOTER
================================================================== */
.foot{
  position:relative;z-index:10;width:100%;padding:5rem 1.5rem 3rem;background:#000;
}
@media (min-width:768px){.foot{padding:5rem 2.5rem 4rem}}
.foot .veil{
  position:absolute;left:0;right:0;top:0;height:10rem;z-index:-10;
  -webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);
}

/* ==================================================================
   SEKTION 4 — JÄMFÖRELSEN  (vår, inte Vexons)

   Byggd på mallens egen modulära rutnätsform: hårfina linjer, inga
   fyllningar, monoetiketter. Att uppfinna ett nytt formspråk för en
   tabell mitt i sidan hade läst som en tabell någon klistrat in.

   TVÅ KOLUMNER, INTE FYRA. En jämförelse med Google Analytics är
   inte en funktionsmatris — den har ett enda ärende: vad du slipper.
   Raderna är därför korta påståenden, inte kryss i rutor.
================================================================== */
.compare{
  position:relative;z-index:10;border-top:1px solid var(--hairline);
  background:#000;font-family:var(--font-sans);padding:5rem 1.5rem;
}
@media (min-width:768px){.compare{padding:7rem 2.5rem}}
.compare-head{max-width:64rem;margin-bottom:4rem}
.compare-h2{
  font-family:var(--font-display);font-size:1.875rem;font-weight:500;
  line-height:1.2;color:#fff;letter-spacing:-.025em;margin-top:1.25rem;
}
@media (min-width:768px){.compare-h2{font-size:3rem}}
.compare-p{
  margin-top:1.5rem;max-width:42rem;font-size:.9375rem;line-height:1.7;
  color:var(--muted);opacity:.6;font-weight:300;
}

.ctable{border:1px solid var(--hairline);border-radius:.375rem;overflow:hidden}
.crow{
  display:grid;grid-template-columns:1fr;
  border-bottom:1px solid var(--hairline);
}
.crow:last-child{border-bottom:0}
@media (min-width:860px){
  .crow{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) minmax(0,1fr)}
}
.ccell{padding:1.5rem;display:flex;flex-direction:column;justify-content:center;gap:.375rem}
@media (min-width:860px){
  .ccell + .ccell{border-left:1px solid var(--hairline)}
  .ccell{padding:1.75rem 2rem}
}
.crow--head .ccell{padding-top:1.25rem;padding-bottom:1.25rem}
.ccell-label{
  font-family:var(--font-mono);font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--muted);opacity:.45;
}
.ccell-q{font-size:.9375rem;line-height:1.5;color:#fff;font-weight:400}
.ccell-a{font-size:.875rem;line-height:1.6;color:var(--muted);opacity:.65;font-weight:300}
/* Ingen fyllning, ingen tonad etikett: tabellen går rätt upp och ner och
   hålls ihop av hårstrecken, precis som resten av sidan. Vår kolumn skiljs
   ut med enbart textens ljusstyrka, vilket är samma grepp som används i
   varje annan sektion. */
.ccell--us .ccell-a{color:#fff;opacity:.92}

/* ==================================================================
   SEKTION 5 — AVSLUTET  (vår, byggd på kompositionen negantropy-persist)

   Mittställd manifestruta: parentetisk överrad, EN rubrikrad, kort
   brödtext, en konturknapp — mot det fria halot. Hjälten är
   vänsterställd, så ett mittställt avslut läser som ankomst och inte
   som en upprepning. Mitten hålls tom med flit: det är halot som ska
   stå där, inte en till bild.
================================================================== */
.close{
  position:relative;z-index:10;min-height:88vh;display:flex;
  align-items:center;justify-content:center;text-align:center;
  padding:6rem 1.5rem;border-top:1px solid var(--hairline);
  background:rgba(0,0,0,.35);
  -webkit-backdrop-filter:blur(48px);backdrop-filter:blur(48px);
}
.close-in{max-width:52rem;display:flex;flex-direction:column;align-items:center;gap:1.75rem}
.close-eyebrow{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--muted);opacity:.5;
  display:flex;align-items:center;gap:.875rem;
}
.close-eyebrow i{display:block;width:3rem;height:1px;background:var(--hairline);font-style:normal}
.close-h2{
  font-family:var(--font-display);font-size:clamp(2rem,5.6vw,4.25rem);
  font-weight:500;line-height:1.05;letter-spacing:-.03em;color:#fff;
}
.close-p{
  max-width:34rem;font-size:.9375rem;line-height:1.7;
  color:var(--muted);opacity:.6;font-weight:300;
}
/* Konturpiller, inte fylld knapp: den fyllda knappen står i hjälten,
   och två fyllda knappar på samma sida tävlar om samma klick. */
.close-cta{
  display:inline-flex;align-items:center;gap:.625rem;
  padding:.875rem 1.75rem;border-radius:9999px;
  border:1px solid rgba(255,255,255,.25);background:transparent;color:#fff;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;text-decoration:none;cursor:pointer;
  transition:background var(--gl-d,.3s) var(--ease-out),border-color .3s var(--ease-out);
}
.close-cta:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.5)}
.close-cta svg{width:.875rem;height:.875rem;stroke:currentColor;stroke-width:2;fill:none}
.close-note{
  font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);opacity:.35;
}

/* ==================================================================
   SIDFOTEN

   Vexons sidfot var en tom slöja (dess suddpanel målades bakom sin
   egen bakgrund och syntes aldrig). Här står i stället det en svensk
   sajtägare faktiskt letar efter längst ned: juridiken.
================================================================== */
.sfoot{
  position:relative;z-index:10;border-top:1px solid var(--hairline);background:#000;
  padding:3.5rem 1.5rem 2.5rem;font-family:var(--font-sans);
}
@media (min-width:768px){.sfoot{padding:4rem 2.5rem 2.5rem}}
.sfoot-in{display:grid;grid-template-columns:1fr;gap:2.5rem;max-width:80rem;margin:0 auto}
@media (min-width:768px){.sfoot-in{grid-template-columns:2fr 1fr 1fr}}
.sfoot h2{
  font-family:var(--font-mono);font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--muted);opacity:.45;margin-bottom:1rem;font-weight:400;
}
.sfoot a{
  display:block;color:var(--muted);opacity:.65;text-decoration:none;
  font-size:.875rem;line-height:2;font-weight:300;transition:opacity .2s,color .2s;
}
.sfoot a:hover{opacity:1;color:#fff}
.sfoot-brand .mark{
  font-family:var(--font-logo);font-size:1.25rem;font-weight:700;
  letter-spacing:.08em;color:#fff;
}
.sfoot-brand p{
  margin-top:.875rem;max-width:22rem;font-size:.875rem;line-height:1.7;
  color:var(--muted);opacity:.5;font-weight:300;
}
.sfoot-legal{
  max-width:80rem;margin:3rem auto 0;padding-top:1.5rem;
  border-top:1px solid var(--hairline);display:flex;flex-wrap:wrap;gap:.75rem 2rem;
  font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);opacity:.35;
}