/* treni.no — designsystem v2 (design-instruksen: HSL-tokens, lys+mørk, gradienter
   og skygger fra samme base, aksent med personlighet, bevegelse med mening) */
:root {
  --bg: 44 45% 97%;
  --fg: 160 28% 9%;
  --muted-fg: 158 10% 36%;
  --surface: 150 25% 93%;
  --surface-2: 148 22% 89%;
  --border: 148 15% 84%;
  --primary: 152 62% 20%;          /* dyp furugrønn */
  --primary-fg: 44 45% 97%;
  --accent: 84 80% 34%;            /* mose-lime — signaturen */
  --accent-fg: 160 28% 8%;
  --radius: 14px;
  --gradient-hero: linear-gradient(120deg, hsl(var(--fg)) 30%, hsl(var(--primary)) 75%, hsl(var(--accent)) 105%);
  --gradient-cta: linear-gradient(135deg, hsl(var(--primary)), hsl(152 55% 28%));
  --shadow-sm: 0 1px 2px hsl(var(--fg) / 0.06);
  --shadow-md: 0 10px 32px -12px hsl(var(--primary) / 0.25);
  --shadow-cta: 0 12px 32px -10px hsl(var(--primary) / 0.45);
  --shadow-cta-hover: 0 18px 44px -12px hsl(var(--primary) / 0.55);
  --font-serif: "New York", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --font-sans: -apple-system, system-ui, "Segoe UI", sans-serif;
  --ease-ut: cubic-bezier(0.16, 1, 0.3, 1);
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: 162 24% 5%;
    --fg: 42 30% 94%;
    --muted-fg: 150 8% 62%;
    --surface: 160 18% 9%;
    --surface-2: 158 16% 12%;
    --border: 156 12% 17%;
    --primary: 84 70% 52%;         /* i mørket ER limen primærfargen */
    --primary-fg: 162 30% 6%;
    --accent: 84 70% 52%;
    --accent-fg: 162 30% 6%;
    --gradient-hero: linear-gradient(120deg, hsl(var(--fg)) 25%, hsl(84 60% 70%) 80%);
    --gradient-cta: linear-gradient(135deg, hsl(84 70% 52%), hsl(74 75% 44%));
    --shadow-sm: 0 1px 2px hsl(0 0% 0% / 0.4);
    --shadow-md: 0 10px 32px -12px hsl(0 0% 0% / 0.55);
    --shadow-cta: 0 10px 36px -8px hsl(84 70% 45% / 0.35);
    --shadow-cta-hover: 0 16px 48px -10px hsl(84 70% 50% / 0.45);
  }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: hsl(var(--bg));
  color: hsl(var(--fg));
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
/* subtil «bane»-tekstur øverst: to store, myke glør fra samme base */
.bakteppe {
  position: absolute; inset: 0 0 auto 0; height: 46rem; z-index: -1; overflow: hidden;
  background:
    radial-gradient(42rem 30rem at 85% -12%, hsl(var(--accent) / 0.13), transparent 62%),
    radial-gradient(36rem 26rem at -10% 8%, hsl(var(--primary) / 0.12), transparent 60%);
}
main { max-width: 46rem; margin-inline: auto; padding-inline: clamp(1.25rem, 4vw, 2rem); }
main.bred { max-width: 62rem; }

h1, h2, .tall { font-family: var(--font-serif); font-weight: 600; letter-spacing: -0.015em; }
h1 { font-size: clamp(2.4rem, 9.5vw, 4.6rem); line-height: 1.04; margin: 0;
     background: var(--gradient-hero); -webkit-background-clip: text; background-clip: text;
     color: transparent; padding-bottom: .08em; }
h2 { font-size: clamp(1.6rem, 3.4vw, 2.1rem); line-height: 1.15; margin: 0 0 1.1rem; }
h3 { font-size: 1.0625rem; font-weight: 650; margin: 1.75rem 0 .5rem; }
p, li { max-width: 65ch; }

a { color: hsl(var(--primary)); text-decoration-thickness: 1px; text-underline-offset: 3px;
    transition: opacity 160ms var(--ease-ut); }
a:hover { opacity: .72; }
:focus-visible { outline: 2px solid hsl(var(--accent)); outline-offset: 3px; border-radius: 4px; }

.kicker { display: inline-flex; align-items: center; gap: .5rem;
          font-size: .875rem; font-weight: 650; letter-spacing: .09em; text-transform: uppercase;
          color: hsl(var(--accent)); margin: 0 0 1.4rem; }
.kicker::before { content: ""; width: 2.2rem; height: 2px; border-radius: 2px;
                  background: linear-gradient(90deg, hsl(var(--accent)), hsl(var(--accent) / 0)); }

.hero { position: relative; padding: clamp(5rem, 13vw, 8.5rem) 0 clamp(2.5rem, 5vw, 3.5rem); }
.ingress { font-size: clamp(1.15rem, 2.4vw, 1.35rem); line-height: 1.5;
           color: hsl(var(--muted-fg)); margin: 1.5rem 0 0; max-width: 34rem; }
.ingress b { color: hsl(var(--fg)); font-weight: 650; }

.knapper { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 2.4rem; }
.btn { display: inline-block; padding: .95rem 1.8rem; border-radius: 999px;
       font-weight: 650; font-size: 1.0625rem; text-decoration: none; line-height: 1.2;
       transition: transform 200ms var(--ease-ut), box-shadow 200ms var(--ease-ut),
                   background-color 200ms var(--ease-ut); }
.btn-primar { background: var(--gradient-cta); color: hsl(var(--primary-fg));
              box-shadow: var(--shadow-cta); }
.btn-primar:hover { opacity: 1; transform: translateY(-2px) scale(1.015);
                    box-shadow: var(--shadow-cta-hover); }
.btn-ghost { color: hsl(var(--fg)); border: 1.5px solid hsl(var(--border)); }
.btn-ghost:hover { opacity: 1; background: hsl(var(--surface)); border-color: hsl(var(--muted-fg) / .4); }

section { margin-block: clamp(4.5rem, 10vw, 7.5rem); }
/* undersider: strammere topp */
.hero.smal { padding-bottom: .25rem; }
.hero.smal ~ section:first-of-type, .hero.smal + section { margin-top: 2rem; }

/* nøkkeltall-stripe */
.tall-rad { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
            margin-top: 0; padding: 0; list-style: none; }
.tall-rad li { max-width: none; margin: 0; padding: 1.3rem 0 0; border-top: 2px solid hsl(var(--border)); }
.tall { font-size: clamp(1.9rem, 4.5vw, 2.6rem); line-height: 1; color: hsl(var(--primary)); display: block; }
.tall-rad p { margin: .45rem 0 0; font-size: .9rem; color: hsl(var(--muted-fg)); }

/* steg-kort */
.steg { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
        margin-top: 1.75rem; padding: 0; list-style: none; }
.steg li { max-width: none; margin: 0; background: hsl(var(--surface));
           border: 1px solid hsl(var(--border)); border-radius: var(--radius);
           padding: 1.6rem 1.6rem 1.5rem; box-shadow: var(--shadow-sm);
           transition: transform 220ms var(--ease-ut), box-shadow 220ms var(--ease-ut); }
.steg li:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.steg .nr { font-family: var(--font-serif); font-size: 2.1rem; line-height: 1;
            color: hsl(var(--accent)); display: block; margin-bottom: .7rem; }
.steg b { display: block; margin-bottom: .4rem; font-size: 1.05rem; }
.steg p { margin: 0; font-size: .9375rem; color: hsl(var(--muted-fg)); }

ul.liste { padding-left: 1.25rem; margin: .75rem 0; }
ul.liste li { margin-bottom: .6rem; }
ul.liste li::marker { color: hsl(var(--accent)); }

.sitat { border: 0; padding: 0; margin: 0; font-family: var(--font-serif);
         font-size: clamp(1.35rem, 3vw, 1.7rem); line-height: 1.4; }
.sitat::before { content: ""; display: block; width: 2.6rem; height: 3px; border-radius: 3px;
                 margin-bottom: 1.2rem;
                 background: linear-gradient(90deg, hsl(var(--accent)), hsl(var(--primary))); }
.sitat + p { color: hsl(var(--muted-fg)); font-size: .9375rem; margin-top: 1rem; }

.kort { background: hsl(var(--surface)); border: 1px solid hsl(var(--border));
        border-radius: var(--radius); padding: 1.6rem 1.8rem; box-shadow: var(--shadow-sm); }

/* CTA-avslutning */
.avslutt { background: var(--gradient-cta); color: hsl(var(--primary-fg));
           border-radius: calc(var(--radius) + 6px); padding: clamp(2.2rem, 5vw, 3.2rem);
           box-shadow: var(--shadow-cta); }
.avslutt h2 { color: inherit; margin-bottom: .5rem; }
.avslutt p { color: hsl(var(--primary-fg) / .82); margin: 0 0 1.6rem; }
.avslutt .btn { background: hsl(var(--bg)); color: hsl(var(--fg)); box-shadow: 0 6px 20px hsl(0 0% 0% / .2); }

.liten { font-size: .9375rem; color: hsl(var(--muted-fg)); }
.en-blokk { border-left: 3px solid hsl(var(--border)); padding-left: 1.25rem; }
.en-blokk p { color: hsl(var(--muted-fg)); }
.en-blokk b { color: hsl(var(--fg)); }

footer { margin-top: clamp(4.5rem, 10vw, 7rem); padding: 2.2rem 0 3rem;
         border-top: 1px solid hsl(var(--border)); font-size: .875rem;
         color: hsl(var(--muted-fg)); }
footer p { margin: .35rem 0; }
footer nav { margin-bottom: 1rem; display: flex; gap: 1.4rem; flex-wrap: wrap; }
footer nav a { font-weight: 600; }

/* Bevegelse med mening: innhold glir opp ved lasting, staggret */
@keyframes glid-opp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.reveal { animation: glid-opp 640ms var(--ease-ut) both; }
.reveal:nth-child(2) { animation-delay: 70ms; }
.reveal:nth-child(3) { animation-delay: 140ms; }
.reveal:nth-child(4) { animation-delay: 210ms; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  html { scroll-behavior: auto; }
}

/* Hero-foto-variant (Simons tips 26.07): full bredde, mørkt gradient-overlegg
   fra samme fargebase så tekst og lime-CTA leser godt. Foto: Pexels (fri lisens). */
.hero-foto {
  width: 100vw; margin-left: calc(50% - 50vw);
  padding: clamp(6rem, 15vw, 9.5rem) 0 clamp(3rem, 7vw, 4.5rem);
  position: relative;
  background:
    linear-gradient(100deg, hsl(162 26% 6% / .88) 22%, hsl(162 26% 6% / .55) 55%, hsl(162 26% 6% / .25) 100%),
    linear-gradient(to top, hsl(162 26% 6% / .82) 0%, hsl(162 26% 6% / 0) 45%),
    url("bilder/hero.jpg") center 32% / cover no-repeat;
}
.hero-foto .indre { max-width: 62rem; margin-inline: auto;
                    padding-inline: clamp(1.25rem, 4vw, 2rem); }
.hero-foto h1 { background: linear-gradient(120deg, hsl(42 30% 96%) 30%, hsl(84 60% 72%) 90%);
                -webkit-background-clip: text; background-clip: text; }
.hero-foto .ingress { color: hsl(40 20% 82%); }
.hero-foto .ingress b { color: hsl(42 30% 96%); }
.hero-foto .kicker { color: hsl(84 70% 60%); }
.hero-foto .btn-primar { background: linear-gradient(135deg, hsl(84 70% 52%), hsl(74 75% 44%));
                         color: hsl(162 30% 6%); }
.hero-foto .btn-ghost { color: hsl(42 30% 96%); border-color: hsl(42 30% 96% / .35); }
.hero-foto .btn-ghost:hover { background: hsl(42 30% 96% / .12); }