/* =============================================================
   Landingsside.
   Layout og bevegelse. Alle farger kommer fra tokens.css.
   Bevegelsen følger CIRONs digitale identitet v1.0 kapittel 4:
   langsomt, syklisk, ingenting som blinker — og fullstendig av
   når operativsystemet ber om redusert bevegelse.
   ============================================================= */

.lside{position:relative;z-index:1;max-width:1000px;margin:0 auto;padding:0 26px 90px}

/* ── topplinje ── */
.ltop{display:flex;align-items:center}
.ltop .ordmerke b{font-family:var(--font-display);font-size:16px;font-weight:700;line-height:1.15;display:block}
.ltop .ordmerke span{display:block;font-family:var(--font-mono);font-size:10px;letter-spacing:.10em;
  text-transform:uppercase;color:var(--teal-fg);font-weight:600}
.ltop .hoyre{margin-left:auto;display:flex;gap:8px;align-items:center}

/* ── hero ── */
.hero{display:grid;grid-template-columns:1fr 300px;gap:40px;align-items:center;
  padding:64px 0 56px;border-bottom:1px solid var(--border-strong)}
@media(max-width:820px){.hero{grid-template-columns:1fr;gap:28px}.orbit{order:-1;justify-self:center}}
.hero .kicker{font-family:var(--font-mono);font-size:11px;letter-spacing:.10em;text-transform:uppercase;
  color:var(--teal-fg);font-weight:600}
.hero h1{font-family:var(--font-display);font-size:40px;font-weight:700;letter-spacing:-.02em;
  line-height:1.12;margin:12px 0 14px;max-width:18ch}
.hero p{font-size:17px;line-height:1.68;color:var(--fg-2);margin:0;max-width:52ch}
.hero .fakta{display:flex;gap:18px;flex-wrap:wrap;margin-top:26px;
  font-family:var(--font-mono);font-size:12px;color:var(--fg-3)}
.hero .cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px}
@media(max-width:700px){.hero h1{font-size:31px}}

/* ── seksjoner ── */
.lsek{padding:52px 0;border-bottom:1px solid var(--border-hairline)}
.lsek:last-of-type{border-bottom:0}
.lsek .kicker{font-family:var(--font-mono);font-size:11px;letter-spacing:.10em;text-transform:uppercase;
  color:var(--teal-fg);font-weight:600;margin-bottom:10px}
.lsek h2{font-family:var(--font-display);font-size:26px;font-weight:600;letter-spacing:-.015em;
  margin:0 0 12px;max-width:24ch}
.lsek p.ingress{font-size:16px;color:var(--fg-2);margin:0 0 24px;max-width:62ch;line-height:1.68}
.lsek p.ingress.etterpaa{margin:20px 0 0}

.tosidig{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--border-strong);
  border-radius:var(--radius-md);overflow:hidden;background:var(--surface-1)}
@media(max-width:760px){.tosidig{grid-template-columns:1fr}}
.tosidig > div{padding:20px 22px}
.tosidig .a{border-right:1px solid var(--border-hairline)}
@media(max-width:760px){.tosidig .a{border-right:0;border-bottom:1px solid var(--border-hairline)}}
.tosidig h3{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
  font-weight:600;color:var(--fg-3);margin:0 0 12px}
.tosidig ul{margin:0;padding-left:18px;font-size:14.5px;color:var(--fg-2)}
.tosidig li{margin-bottom:7px}

.lfot a{color:var(--teal-fg)}

/* ── merket i bevegelse ──────────────────────────────────────────
   Ytre ring 60 s med klokka, indre 38 s mot klokka, sveip 6 s,
   nodepuls 3,2 s forskjøvet 0,8 s. Merket i midten står helt i ro.
   Det er poenget: alt beveger seg rundt noe som ikke gjør det. */
.orbit{width:280px;height:280px;display:block;color:var(--ciron-teal)}
.orbit .ytre{animation:orbit-med 60s linear infinite;transform-origin:50% 50%}
.orbit .indre{animation:orbit-mot 38s linear infinite;transform-origin:50% 50%}
.orbit .sveip{animation:orbit-med 6s linear infinite;transform-origin:50% 50%}
.orbit .node{animation:orbit-puls 3.2s ease-in-out infinite}
.orbit .node:nth-of-type(2){animation-delay:.8s}
.orbit .node:nth-of-type(3){animation-delay:1.6s}
.orbit .node:nth-of-type(4){animation-delay:2.4s}

@keyframes orbit-med{to{transform:rotate(360deg)}}
@keyframes orbit-mot{to{transform:rotate(-360deg)}}
@keyframes orbit-puls{0%,100%{opacity:.35}50%{opacity:1}}

@media (prefers-reduced-motion: reduce){
  .orbit .ytre,.orbit .indre,.orbit .sveip,.orbit .node{animation:none}
}

.ordmerke.applogo{display:flex;align-items:center;gap:10px}.ordmerke.applogo svg{color:var(--ciron-teal)}.ordmerke.applogo div{display:flex;flex-direction:column}

/* Kobolt (M45): lys hjemmeside, trappen og CIRON som merkevare */
body{background:var(--surface-1)}
.hero{background:linear-gradient(180deg,var(--surface-1),var(--bg-app))}
.hero h1{font-size:46px;line-height:1.08;letter-spacing:-.025em;max-width:17ch}
.trapp{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s4);max-width:1180px;margin:0 auto;padding:0 var(--s6) var(--s7)}
.trapp div{border-radius:var(--radius-md);padding:var(--s5);color:var(--on-tilstand)}
.trapp .hverdag{background:var(--tilstand-hverdag)}.trapp .skjerpet{background:var(--tilstand-skjerpet)}.trapp .hendelse{background:var(--tilstand-hendelse)}
.trapp b{display:block;font-size:18px;margin-bottom:var(--s1)}.trapp span{opacity:.92;font-size:14.5px}
.ciron-seksjon{display:grid;grid-template-columns:auto 1fr;gap:var(--s7);align-items:center;padding:var(--s7) var(--s6);background:var(--rail);color:var(--rail-fg)}
.ciron-seksjon .orbit-lite.stor{width:140px;height:140px;color:var(--on-rail-hvit)}
.ciron-seksjon h2{margin:0 0 var(--s2);font-size:28px;letter-spacing:-.015em}.ciron-seksjon p{margin:0;color:var(--rail-mute);max-width:58ch;font-size:16px}
@media(max-width:900px){.trapp,.ciron-seksjon{grid-template-columns:1fr}.hero h1{font-size:34px}}

/* M45-2: marger, luft og lesbarhet. Én kant for alt, mindre å skrolle. */
.lpage,.ltop,.hero,.trapp,.lsek,.ltop .ordmerke span{font-family:var(--font-sans);font-size:13px;letter-spacing:0;text-transform:none;color:var(--fg-3)}
.hero{grid-template-columns:1.15fr .85fr;gap:var(--s7);padding-top:var(--s7);padding-bottom:var(--s6);background:none}
.hero h1{font-size:46px;line-height:1.08;letter-spacing:-.025em;max-width:none;margin:0 0 var(--s4)}
.hero p{font-size:18px;line-height:1.55;max-width:52ch;color:var(--fg-2)}
.hero .cta{margin-top:var(--s5)}
.fakta{font-family:var(--font-sans);font-size:14px;color:var(--fg-3);margin:var(--s4) 0 0}
.trapp{padding-top:0;padding-bottom:var(--s7)}
.lsek{padding-top:var(--s7);padding-bottom:var(--s7);border-top:1px solid var(--border-hairline)}
.lsek h2{font-size:28px;letter-spacing:-.015em;margin:0 0 var(--s3)}
.lsek>p{font-size:17px;color:var(--fg-2);max-width:60ch;margin:0 0 var(--s5)}
.tosidig{display:grid;grid-template-columns:1fr 1fr;gap:var(--s5);border:0}
.tosidig>div{padding:0}
.tosidig h3{font-family:var(--font-sans);font-size:15px;letter-spacing:0;text-transform:none;color:var(--fg-1);font-weight:700;margin:0 0 var(--s2)}
.tosidig li{margin-bottom:var(--s1)}
.trygg{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s5)}
.trygg>div{border:0;padding:0;box-shadow:none}.trygg h3{font-size:16px;margin:0 0 var(--s1)}.trygg p{color:var(--fg-2);font-size:15px;margin:0}
@media(max-width:900px){.hero{grid-template-columns:1fr;padding-top:var(--s6)}.hero h1{font-size:34px}.tosidig,.trygg{grid-template-columns:1fr}.lsek{padding-top:var(--s6);padding-bottom:var(--s6)}}

/* CIRON-seksjonen: mørkt bånd i full bredde, innholdet på samme kant som
   resten. Rutenettet ligger på det indre feltet — ikke på båndet — så
   tekstspalten kan ikke klemmes av en maksbredde satt på seksjonen. */
.ciron-seksjon{display:block;background:var(--rail);color:var(--rail-fg);padding:var(--s7) var(--s6)}
.ciron-seksjon>.innside{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:var(--s7)}
.ciron-seksjon .orbit-lite.stor{width:140px;height:140px;flex:0 0 140px;color:var(--on-rail-hvit)}
.ciron-seksjon h2{margin:0 0 var(--s2);font-size:28px;letter-spacing:-.015em;color:var(--rail-fg)}
.ciron-seksjon p{margin:0;color:var(--rail-mute);font-size:16.5px;line-height:1.55;max-width:62ch}
@media(max-width:900px){.ciron-seksjon>.innside{grid-template-columns:1fr;gap:var(--s5);justify-items:start}}

/* ── v0.27: luft i trappen, og temavelger på hjemmesiden ────────────
   Boksene lå inntil skillelinjen over seg: da M45-2 fjernet paddingen fra
   `.trapp`, ble det ingen margin igjen. Luft over en gruppe skal alltid være
   minst like stor som luften inni den. */
.trapp{margin:var(--s7) 0 var(--s7)}
.hero+.trapp{margin-top:var(--s6)}
.trapp+.lsek{border-top:1px solid var(--border-hairline);padding-top:var(--s7)}

/* Temavelger på hjemmesiden. Lyst er standard — en beredskapsside skal ikke
   møte deg mørk — men den som vil noe annet, skal kunne velge det. */
.ltema{display:inline-flex;border:1px solid var(--border-strong);border-radius:var(--radius-pill);
  padding:3px;gap:2px;background:var(--surface-1)}
.ltema button{border:0;background:transparent;font:inherit;font-size:13px;font-weight:600;
  color:var(--fg-3);padding:6px 12px;border-radius:var(--radius-pill);cursor:pointer;min-height:44px}
.ltema button[aria-pressed="true"]{background:var(--surface-3);color:var(--fg-1)}
.ltema button:focus-visible{outline:3px solid var(--ciron-teal);outline-offset:2px}
@media (max-width: 700px){.ltema button{padding:6px 10px;font-size:12.5px}}

/* Én kant for alt: topplinje, hero, trappen, seksjonene og bunnteksten deler
   samme maksbredde og sidemarg. */
.lpage,.ltop,.hero,.trapp,.lsek,.lfot{max-width:1180px;margin-left:auto;margin-right:auto;padding-left:var(--s6);padding-right:var(--s6)}

/* ── v0.28: fast topplinje og bunntekst ─────────────────────────────
   Topplinjen står fast mens siden ruller under den — samme som Nirona. Den er
   gjennomskinnelig med uskarphet, så innholdet såvidt anes bak. */
/* Topplinjen står fast mens siden ruller under den. Den er gjennomskinnelig
   med uskarphet, så innholdet såvidt anes bak — som hos Nirona. Båndet går i
   full bredde; innsiden holder samme kant som resten. */
.ltop{position:sticky;top:0;z-index:20;max-width:none;padding-left:0;padding-right:0;
  background:color-mix(in srgb, var(--bg-app) 82%, transparent);
  backdrop-filter:saturate(180%) blur(14px);-webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--border-hairline)}
.ltop-innside{width:100%;max-width:1180px;margin:0 auto;padding:var(--s4) var(--s6);
  display:flex;justify-content:space-between;align-items:center;gap:var(--s3);flex-wrap:wrap}
@supports not (backdrop-filter: blur(1px)){.ltop{background:var(--bg-app)}}

/* Bunntekst etter samme modell som TM Drone: merke, én linje om hva det er,
   lenker på rad, og opphavsretten til slutt. */
.lfot{display:grid;justify-items:center;gap:var(--s3);text-align:center;
  padding:var(--s7) var(--s6) var(--s6);border-top:1px solid var(--border-hairline)}
.lfot-merke{display:flex;align-items:center;gap:var(--s2);color:var(--fg-1)}
.lfot-merke svg{color:var(--ciron-teal)}
.lfot-merke b{font-family:var(--font-display);font-size:17px;font-weight:700}
.lfot-hva{margin:0;color:var(--fg-2);font-size:15px;max-width:52ch}
.lfot-lenker{display:flex;gap:var(--s5);flex-wrap:wrap;justify-content:center;margin:var(--s2) 0 0}
.lfot-lenker a{color:var(--fg-1);font-size:14.5px;font-weight:600;text-decoration:none;
  min-height:44px;display:inline-flex;align-items:center}
.lfot-lenker a:hover{color:var(--teal-fg);text-decoration:underline;text-underline-offset:3px}
.lfot-rett{margin:var(--s2) 0 0;color:var(--fg-3);font-size:13.5px}
.lfot-versjon{margin:0;color:var(--fg-3);font-family:var(--font-mono);font-size:12px}
@media (max-width: 700px){.lfot-lenker{gap:var(--s3)}}

/* ── v0.29: CIRON-topplinjen — standard for B2B-apper ───────────────
   Én form for alle CIRON-produkter: Nirona, TM Drone, Inxo og det som kommer.

     Høyde 64 px. Merket til venstre, navigasjonslenker i midten,
     handlinger til høyre — én lett og én fylt. Fast, med uskarphet,
     så siden ruller under.

   Alt annet på høyre side skal være ikon-størrelse, ikke knappestørrelse:
   en temavelger som tar like mye plass som «Logg inn» konkurrerer med den. */
.ltop-innside{min-height:64px;padding-top:0;padding-bottom:0;flex-wrap:nowrap}
.ltop .ordmerke{flex:0 0 auto}
.ltop .ordmerke b{font-size:17px}
.ltop .ordmerke span{display:none}

/* Navigasjonslenker i midten. Skjules på smale skjermer — der er
   handlingene viktigere enn snarveiene. */
.ltop-nav{display:flex;gap:var(--s5);align-items:center;margin:0 auto}
.ltop-nav a{color:var(--fg-2);font-size:15px;text-decoration:none;
  min-height:44px;display:inline-flex;align-items:center}
.ltop-nav a:hover{color:var(--fg-1)}
@media (max-width: 900px){.ltop-nav{display:none}}

/* Handlinger: én lett, én fylt. */
.ltop .hoyre{display:flex;align-items:center;gap:var(--s2);flex:0 0 auto}

/* Temavelgeren er sekundær: ikon-størrelse, ingen ramme, ingen tekst som
   konkurrerer med handlingene. */
.ltema{border:0;background:transparent;padding:0;gap:0;display:inline-flex}
.ltema button{min-height:32px;min-width:32px;padding:0;font-size:0;
  border-radius:var(--radius-sm);color:var(--fg-3);display:grid;place-items:center}
.ltema button::before{font-size:14px;line-height:1}
.ltema button[data-tema="light"]::before{content:"☀"}
.ltema button[data-tema="dark"]::before{content:"☾"}
.ltema button[data-tema="auto"]::before{content:"◐"}
.ltema button[aria-pressed="true"]{background:var(--surface-3);color:var(--fg-1)}
@media (pointer: coarse){.ltema button{min-height:44px;min-width:44px}}

/* ── v0.30: topplinjen på mobil ─────────────────────────────────────
   Testet mot iPhone 17 Pro Max (430 px) og iPad Pro.

   På 430 px får ikke merke + temavelger + to knapper plass, og «Opprett
   prøvekonto» rant ut av skjermen. Rangeringen er: merket og den fylte
   handlingen må være der. Snarveiene er allerede skjult; temavelgeren og den
   lette handlingen flytter til bunnteksten, der de hører hjemme når plassen
   er knapp. */
@media (max-width: 700px){
  .ltop-innside{padding-left:var(--s4);padding-right:var(--s4);gap:var(--s2)}
  .ltop .ltema{display:none}
  .ltop .hoyre .btn:not(.primary){display:none}
  .ltop .ordmerke b{font-size:16px}
  .hero{padding-top:var(--s5)}
  .hero .cta{display:flex;flex-wrap:wrap;gap:var(--s2)}
  .hero .cta .btn{flex:1 1 auto;justify-content:center}
  .lfot{padding-left:var(--s4);padding-right:var(--s4)}
}
/* Temavelger og «Logg inn» i bunnteksten når de er borte fra toppen. */
.lfot-tema{display:none;margin:var(--s3) 0 0}
@media (max-width: 700px){.lfot-tema{display:flex;justify-content:center}}

/* Nettbrett: heroen deler seg først når det er plass til begge deler. */
@media (min-width: 701px) and (max-width: 1024px){
  .ltop-innside{padding-left:var(--s5);padding-right:var(--s5)}
  .hero{gap:var(--s6)}
  .trygg{grid-template-columns:1fr 1fr}
}