/* crividplayer.com — 2026-08-17
   Bygget om etter gjennomgang av konkurransebildet. Strukturen er lånt fra en
   konkurrent som selger bedre enn oss; påstandene er våre egne og etterprøvd.

   Typografi: appens EGEN Inter, variabel (vekt 100–900, optisk 14–32), subsettet
   til latin + æøå. 856 KB -> 48 KB. Lokal fil, ikke CDN: en font som lastes fra
   et fremmed domene feiler stille og bytter typografi uten å si fra.

   Tema: SIDA ER MØRK, ALLTID. Se token-blokka under. */

@font-face{
  font-family:'InterVar';
  src:url('fonts/inter-var.woff2?v=202608170109') format('woff2');
  font-weight:100 900; font-style:normal; font-display:swap;
}

/* ⚠️ MØRK, ALLTID — sida følger IKKE systemtemaet.
   Første utgave hadde lys + mørk palett etter prefers-color-scheme. Christian
   kjører lyst systemtema og fikk en HVIT side: feil merkevare (appen er mørk,
   alle butikkpanelene er mørke), og ordmerket er en PNG tegnet for mørk bunn —
   på lys bakgrunn fikk det en synlig lys glorie rundt seg.
   Enkelt-tema er et VALG her, ikke en forglemmelse: hver farge settes eksplisitt,
   så sida holder seg uansett hva verten rundt gjør.
   (De to gamle mørk-blokkene hadde dessuten drevet fra hverandre — --live sto
   duplisert i den ene og manglet i den andre. Ett sett kan ikke drive.) */
:root{
  --ground:#060B16; --ground-2:#0B1526; --surface:#111F38; --surface-2:#0E1A30;
  --line:#1E3155; --line-soft:#182742;
  --ink:#E8F0FF; --ink-2:#C3D4EE; --muted:#93ACD6;
  --cyan:#22DDF5; --mint:#3BE8A8;
  --glow:rgba(34,221,245,.16); --on-accent:#04121C;
  --live:#2CE8C0; --live-line:rgba(44,232,192,.42); --live-fill:rgba(44,232,192,.10);
  --shadow:0 26px 70px rgba(0,0,0,.55),0 2px 8px rgba(0,0,0,.35);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'InterVar',system-ui,-apple-system,sans-serif;
  font-variation-settings:'opsz' 14,'wght' 400;
  background:var(--ground); color:var(--ink);
  line-height:1.6; -webkit-font-smoothing:antialiased;
}
.wrap{max-width:1120px;margin:0 auto;padding:0 28px}
a{color:inherit}

/* Ryggraden er FJERNET for godt. Ideen var guidens naa-linje foert gjennom
   sida. Foerste forsoek hang ikke sammen med noe; andre forsoek koblet den til
   seksjonsmerkene — og den fungerte fortsatt ikke i praksis. Christian saa den
   to ganger og reagerte begge ganger. Da er den feil, uansett hvor god ideen er
   paa papiret. */
.page{position:relative}

/* ── Topplinje ────────────────────────────────────────────────────────── */
.top{position:relative;z-index:2;border-bottom:1px solid var(--line-soft);background:var(--ground)}
.top .wrap{display:flex;align-items:center;gap:26px;padding-top:16px;padding-bottom:16px}
.top img{height:26px;width:auto;display:block}
.nav{margin-left:auto;display:flex;gap:22px;flex-wrap:wrap}
.nav-link{font-size:.9rem;color:var(--muted);text-decoration:none;font-variation-settings:'opsz' 14,'wght' 560}
.nav-link:hover{color:var(--ink)}
.nav-link:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:4px}

section{position:relative;padding:82px 0}
.eyebrow{
  position:relative;font-variation-settings:'opsz' 14,'wght' 640;font-size:.72rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:22px;
}
.eyebrow::before{content:"";display:inline-block;width:26px;height:2px;vertical-align:middle;
  margin-right:12px;border-radius:2px;background:linear-gradient(90deg,var(--cyan),var(--mint))}

h1,h2,h3{font-variation-settings:'opsz' 32,'wght' 780;letter-spacing:-.025em;line-height:1.04;text-wrap:balance}
h1{font-size:clamp(2.7rem,6.4vw,4.9rem)}
h1 .second{
  display:block;font-variation-settings:'opsz' 32,'wght' 500;color:var(--muted);
  letter-spacing:-.018em;margin-top:.16em;font-size:clamp(1.35rem,2.9vw,2.15rem);line-height:1.16;
}
h2{font-size:clamp(1.9rem,3.7vw,2.9rem);margin-bottom:16px}
h3{font-size:1.06rem;font-variation-settings:'opsz' 14,'wght' 680;letter-spacing:-.01em}
p{color:var(--ink-2);max-width:62ch}
.lede{font-size:1.14rem;color:var(--muted);margin-top:24px;max-width:56ch}
.define{font-size:.92rem;color:var(--muted);opacity:.75;margin-top:12px;max-width:62ch}
.punch{
  margin-top:20px;font-variation-settings:'opsz' 32,'wght' 640;font-size:1.5rem;
  letter-spacing:-.02em;color:var(--ink);max-width:46ch;
}

.hero{padding-top:64px;padding-bottom:34px}
.cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:36px}
.btn{
  display:inline-flex;align-items:center;gap:9px;padding:14px 24px;border-radius:11px;
  font-variation-settings:'opsz' 14,'wght' 640;font-size:.95rem;text-decoration:none;
  border:1px solid transparent;transition:transform .16s ease,box-shadow .16s ease;
}
.btn-primary{background:linear-gradient(135deg,var(--cyan),var(--mint));color:var(--on-accent);box-shadow:0 10px 30px var(--glow)}
.btn-ghost{border-color:var(--line);color:var(--ink);background:var(--surface)}
.btn:hover{transform:translateY(-2px)}
.btn:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
.fineprint{margin-top:18px;font-size:.9rem;color:var(--muted)}

.platforms{display:flex;flex-wrap:wrap;gap:8px;margin-top:34px;padding-top:26px;border-top:1px solid var(--line-soft)}
.chip{
  font-size:.78rem;padding:6px 12px;border-radius:99px;border:1px solid var(--line);
  color:var(--ink-2);font-variation-settings:'opsz' 14,'wght' 560;
}
.chip.live{border-color:var(--live-line);color:var(--live)}
.chip.soon{color:var(--muted);border-style:dashed}

/* ── Butikkpanelene bærer argumentet ──────────────────────────────────── */
figure{margin:0}
.shot{
  width:100%;height:auto;display:block;border-radius:14px;border:1px solid var(--line);
  box-shadow:var(--shadow);background:var(--surface);
}
.hero-shot{margin-top:52px}
.cap{margin-top:12px;font-size:.8rem;color:var(--muted)}
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(430px,1fr));gap:26px;margin-top:44px}
@media (max-width:900px){.gallery{grid-template-columns:1fr}}

/* ── Sammenlikning ───────────────────────────────────────────────────── */
.ledger{margin-top:40px;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--surface)}
.lrow{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line-soft)}
.lrow:first-child{border-top:none}
.lrow>div{padding:20px 22px;font-size:.95rem}
.lrow .them{color:var(--muted);border-right:1px solid var(--line-soft)}
.lrow .us{color:var(--ink)}
.lrow .us b{font-variation-settings:'opsz' 14,'wght' 680;color:var(--mint)}
.lhead{
  background:var(--surface-2);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);font-variation-settings:'opsz' 14,'wght' 640;
}

/* ── Steg ─────────────────────────────────────────────────────────────── */
.steps{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(248px,1fr));margin-top:44px;
  border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--surface);
}
.step{padding:28px 26px;border-left:1px solid var(--line-soft)}
.step:first-child{border-left:none}
.step .n{
  font-variant-numeric:tabular-nums;font-size:.75rem;letter-spacing:.14em;color:var(--cyan);
  font-variation-settings:'opsz' 14,'wght' 660;margin-bottom:12px;
}
.step p{font-size:.93rem;margin-top:9px;color:var(--muted)}

/* ── Resten av funksjonene ────────────────────────────────────────────── */
.more{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:1px;margin-top:40px;
  background:var(--line-soft);border:1px solid var(--line);border-radius:14px;overflow:hidden;
}
.more>div{background:var(--surface);padding:22px}
.more p{font-size:.9rem;color:var(--muted);margin-top:6px}
.pro-tag{
  display:inline-block;margin-left:8px;font-size:.63rem;letter-spacing:.1em;padding:3px 7px;border-radius:5px;
  border:1px solid color-mix(in srgb,var(--cyan) 42%,var(--line));color:var(--cyan);vertical-align:middle;
  font-variation-settings:'opsz' 14,'wght' 640;
}

.panel{margin-top:40px;border:1px solid var(--line);border-radius:16px;padding:40px 36px;background:var(--surface);box-shadow:var(--shadow)}
.price{
  font-variation-settings:'opsz' 32,'wght' 760;font-size:3rem;letter-spacing:-.03em;
  background:linear-gradient(135deg,var(--cyan),var(--mint));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.plist{list-style:none;margin-top:22px;display:grid;gap:11px}
.plist li{padding-left:26px;position:relative;color:var(--ink-2);font-size:.95rem}
.plist li::before{
  content:"";position:absolute;left:0;top:.52em;width:11px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--cyan),var(--mint));
}

/* ── FAQ ──────────────────────────────────────────────────────────────── */
.faq{margin-top:40px;border-top:1px solid var(--line-soft)}
details{border-bottom:1px solid var(--line-soft)}
summary{
  padding:19px 0;cursor:pointer;font-variation-settings:'opsz' 14,'wght' 620;font-size:1rem;
  list-style:none;display:flex;justify-content:space-between;gap:20px;align-items:center;
}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";color:var(--cyan);font-variation-settings:'opsz' 14,'wght' 500;font-size:1.3rem;line-height:1}
details[open] summary::after{content:"–"}
summary:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
details p{padding-bottom:20px;font-size:.95rem;color:var(--muted)}

/* ── Bunn: her hører ansvarsfraskrivelsen hjemme ──────────────────────── */
footer{border-top:1px solid var(--line);padding:44px 0 60px;margin-top:36px;background:var(--surface-2)}
.foot-nav{display:flex;gap:22px;flex-wrap:wrap;margin-bottom:26px}
.foot-nav a{font-size:.9rem;color:var(--muted);text-decoration:none;font-variation-settings:'opsz' 14,'wght' 560}
.foot-nav a:hover{color:var(--ink)}
.foot-nav a:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:4px}
.legal{font-size:.82rem;color:var(--muted);max-width:76ch;line-height:1.7}
.legal strong{color:var(--ink-2);font-variation-settings:'opsz' 14,'wght' 620}

@media (max-width:760px){
  section{padding:62px 0}
  .lrow{grid-template-columns:1fr}
  .lrow .them{border-right:none;border-bottom:1px solid var(--line-soft)}
  .step{border-left:none;border-top:1px solid var(--line-soft)}
  .step:first-child{border-top:none}
}
@media (prefers-reduced-motion:reduce){*{animation:none !important;transition:none !important;scroll-behavior:auto !important}}

/* ── Butikknapper ─────────────────────────────────────────────────────────
   Beholdt fra den gamle sida: SVG-glyf + to linjer («Google Play» over
   «DOWNLOAD NOW»). Fargene går nå gjennom tokens — originalen brukte
   rgba(255,255,255,…), som er usynlig på lys bunn. */
.store{
  display:inline-flex;align-items:center;gap:.7rem;
  padding:.8rem 1.25rem;border-radius:12px;
  border:1px solid var(--line);background:var(--surface);color:var(--ink);
  text-decoration:none;transition:border-color .18s,background .18s,transform .18s;
}
.store{background:linear-gradient(180deg,var(--live-fill),color-mix(in srgb,var(--live-fill) 45%,transparent));border-color:var(--live-line)}
.store:hover{border-color:var(--live);transform:translateY(-1px)}
.store:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
.store svg{width:22px;height:22px;flex:none;opacity:.92;stroke:var(--ink)}
.store.discord svg{fill:#fff;stroke:none}
.store.discord{background:linear-gradient(180deg,color-mix(in srgb,#5865F2 55%,transparent),color-mix(in srgb,#5865F2 28%,transparent));border-color:color-mix(in srgb,#5865F2 70%,transparent)}
.store.discord:hover{border-color:#7983f5}
.store.discord small{color:#c7cdff}
.store b{display:block;font-size:.95rem;font-variation-settings:'opsz' 14,'wght' 620;letter-spacing:-.01em}
.store small{display:block;font-size:.72rem;color:var(--live);letter-spacing:.06em}

/* ── Karusellen ───────────────────────────────────────────────────────────
   Uendret oppførsel fra den gamle sida, og av god grunn: hvert panel bærer
   sin egen store overskrift, så en ekte kryssfade viser TO overskrifter oppå
   hverandre midt i overgangen. Skiftet går derfor gjennom bakgrunnen — det
   utgående tones ut FØRST, det inngående starter etter at det er borte. */
.slider{position:relative;margin-top:52px}
/* OMGIVELSESLYS. En uskarp, forstørret kopi av SAMME bilde ligger bak rammen,
   så skjermen ser ut til å lyse ut i et mørkt rom. Fargen kommer fra bildet
   selv, så den skifter med hvert skjermbilde: blått i guiden, grønt på banen,
   ravgult i kløfta. Nettleseren laster fila én gang og tegner den to ganger.

   ⚠️ Rekkefølgen betyr noe: glødelaget må ligge UNDER rammen og ikke ta imot
   mus, ellers spiser det klikkene på pilene. */
.stage{position:relative;isolation:isolate}
.glow{
  position:absolute;inset:-7% -5%;z-index:0;pointer-events:none;
  filter:blur(58px) saturate(1.45);opacity:.5;
  border-radius:40px;overflow:hidden;
}
.glow img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .55s ease;
}
.glow img.on{opacity:1}

.frame{
  position:relative;z-index:1;border-radius:16px;overflow:hidden;aspect-ratio:16/9;
  background:#05070c;
  /* Tykkere kant enn før: skjermbildene er nå full-bleed uten egen marg, så
     rammen må gjøre jobben en TV-ramme gjør. */
  border:1px solid color-mix(in srgb,var(--line) 70%,#000);
  box-shadow:0 30px 70px rgba(0,0,0,.62), 0 0 0 1px rgba(255,255,255,.05) inset;
}
/* EKTE kryssfade. Den gamle overgangen tonet ut FØRST og inn ETTERPÅ, fordi
   bildene hadde innebrent overskrift og to overskrifter ville ligget oppå
   hverandre. Bildene er rene nå, så begge kan gå samtidig. */
.frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .55s ease}
.frame img.on{opacity:1}

/* Bildeteksten er EKTE tekst, ikke brent inn i bildet: den kan leses av
   søkemotorer, skalerer på mobil, og kan endres uten å rendre bilder på nytt. */
.caps{position:relative;margin-top:1.15rem;min-height:2.9em}
.cap{
  position:absolute;inset:0;margin:0;text-align:center;
  font-size:.98rem;line-height:1.45;color:var(--muted);max-width:52ch;
  margin-inline:auto;opacity:0;transition:opacity .45s ease;
}
.cap.on{opacity:1}

@media (prefers-reduced-motion:reduce){
  .frame img,.glow img,.cap{transition:none}
}
@media (max-width:640px){
  .glow{filter:blur(34px) saturate(1.4);opacity:.42}
  .cap{font-size:.88rem}
}

.controls{display:flex;justify-content:center;align-items:center;gap:1.1rem;margin-top:1.15rem}
.dots{display:flex;justify-content:center;gap:.45rem}
/* Prikken er 7px, men TRYKKFLATA er 24px. Revisjonen 22.08 målte at 7x7 er
   for lite til å treffes pålitelig med tommelen. Løsningen er ikke en større
   prikk (det ville endret designet), men en gjennomsiktig padding rundt den:
   fingeren treffer 24px, øyet ser 7px. */
.dots{gap:0}
.dots button{
  width:7px;height:7px;padding:0;border-radius:99px;cursor:pointer;border:0;
  background:color-mix(in srgb,var(--muted) 55%,transparent);transition:background .25s,width .25s;
  /* box-sizing:content-box gjør at paddingen legger seg UTENPÅ de 7 pikslene
     i stedet for å spise dem. Uten den ville prikken krympet til ingenting. */
  box-sizing:content-box;
  padding:8.5px;margin:0;background-clip:content-box;
}
.dots button[aria-current="true"]{background:var(--mint);width:22px;background-clip:content-box}
.dots button:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}

.arrow{
  position:absolute;top:calc(50% - 2.6rem);transform:translateY(-50%);z-index:3;
  width:40px;height:40px;border-radius:99px;cursor:pointer;display:grid;place-items:center;
  border:1px solid var(--line);background:color-mix(in srgb,var(--surface) 82%,transparent);
  backdrop-filter:blur(8px);transition:background .2s,border-color .2s;
}
.arrow:hover{background:var(--surface);border-color:color-mix(in srgb,var(--cyan) 45%,var(--line))}
.arrow:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.arrow svg{width:17px;height:17px;stroke:var(--ink);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.arrow.prev{left:1rem}
.arrow.next{right:1rem}
/* Piler oppå bildet forutsetter rolig bakgrunn i kantene. Panelene har brødtekst
   helt ut i venstre kant, og på smal skjerm dekket pilene den. Under 640 px
   faller de derfor ut av bildet og inn i kontrollraden. */
@media (max-width:640px){
  .arrow{position:static;top:auto;transform:none;width:36px;height:36px}
  .arrow.prev,.arrow.next{left:auto;right:auto}
}
.shot-note{margin:.55rem 0 0;text-align:center;font-size:.76rem;color:var(--muted);max-width:none}


/* ── Stats-stripe ─────────────────────────────────────────────────────────
   Tre ruter rett under helten. Tallet i foerste rute byttes av skriptet i
   index.html; verdien som staar i HTML-en er fallback, ikke pynt. */
.stats-sec{padding-top:0;padding-bottom:0}
.stats{border:1px solid var(--line);border-radius:14px;background:var(--surface);
  display:grid;grid-template-columns:repeat(3,1fr);overflow:hidden}
.stat{padding:30px 26px;text-align:center;border-left:1px solid var(--line-soft)}
.stat:first-child{border-left:none}
.stat .n{font-variation-settings:'opsz' 32,'wght' 780;font-size:2.35rem;letter-spacing:-.025em;
  line-height:1.05;display:block;color:var(--ink)}
.stat .l{margin-top:8px;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);font-variation-settings:'opsz' 14,'wght' 640}
.stat .s{margin-top:3px;font-size:.75rem;color:var(--muted);opacity:.72}
.stat a{color:var(--mint);text-decoration:none}
.stat a:hover{text-decoration:underline}
.stat a:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:4px}
@media(max-width:720px){
  .stats{grid-template-columns:1fr}
  .stat{border-left:none;border-top:1px solid var(--line-soft)}
  .stat:first-child{border-top:none}
}

/* ── Gjennomgang 26.09.2026 ───────────────────────────────────────────────
 Fire agenter gikk over sida. Endringene under er samlet her med vilje, saa
 de kan leses som én beslutning og ikke smøres utover fila. */

/* Glødelaget bak karusellen stakk 8 px ut paa nettbrett (768), og hele sida
 rullet sidelengs. clip, ikke hidden: hidden lager en rullebeholder og
 brekker position:sticky. */
html,body{overflow-x:clip}

/* Butikknappene skal vinne blikket, ikke Discord. Fylt mint med mørk tekst;
 Discord er en tekstlenke under finskriften. */
.store{background:linear-gradient(135deg,var(--cyan),var(--mint));border-color:transparent;color:var(--on-accent)}
.store:hover{border-color:transparent;filter:brightness(1.06)}
.store svg{stroke:var(--on-accent);opacity:1}
.store small{color:var(--on-accent);opacity:.78;letter-spacing:.02em;font-size:.76rem;text-transform:none}
.fineprint b{color:var(--ink);font-variation-settings:'opsz' 14,'wght' 640}
.community{margin-top:8px;font-size:.9rem;color:var(--muted)}
.community a{color:var(--mint);text-decoration:none;border-bottom:1px solid color-mix(in srgb,var(--mint) 40%,transparent)}
.community a:hover{border-bottom-color:var(--mint)}
.community a:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:4px}

/* PRO skal synes der Pro-funksjonene staar. */
.pro-note{margin-top:14px;font-size:.92rem;color:var(--muted)}
h2 .pro-tag{font-size:.8rem;vertical-align:.35em}

/* Seks funksjoner i fire kolonner ga to tomme ruter paa PC. */
@media (min-width:900px){.more{grid-template-columns:repeat(3,1fr)}}

/* Etiketter under 12 px var paa grensen i dempet farge paa mørk bunn. */
.pro-tag{font-size:.7rem}
.eyebrow{font-size:.76rem}
.chip{font-size:.8rem}
.stat .l{font-size:.76rem}

/* Trykkflater paa minst 44 px paa telefon. */
.nav-link,.foot-nav a{display:inline-block;padding:10px 2px}
.top .wrap{padding-top:8px;padding-bottom:8px}
.dots button{padding:10.5px}
@media (max-width:640px){
 .arrow{width:44px;height:44px}
 /* Definisjonen gjentar leden; paa telefon skyver den første skjermbilde ned. */
 .define{display:none}
}

/* Sammenlikningen mistet kolonnene paa telefon: overskriftene stablet seg
 øverst og radene vekslet uten merke. Hver celle faar sin egen etikett. */
@media (max-width:760px){
 .lrow:first-child{display:none}
 .lrow .them::before,.lrow .us::before{
  display:block;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);margin-bottom:4px;font-variation-settings:'opsz' 14,'wght' 640;
 }
 .lrow .them::before{content:"The player you have now"}
 .lrow .us::before{content:"Crivid"}
}
/* Fire menypunkter ved siden av ordmerket brakk i to rader paa 390 px.
 Paa smal skjerm faar menyen sin egen rad under ordmerket. */
.nav-link{white-space:nowrap}
@media (max-width:560px){
 .top .wrap{flex-wrap:wrap;row-gap:0}
 .nav{margin-left:0;width:100%;gap:18px}
 h1{font-size:2.25rem}
}