/* ============================================================
   SITE.CSS — det nye StaffMedia-designet (hvitt, blått, Recoleta)
   Linkes ETTER main.css. Body får class="site".
   Alt scopet til .site så det overstyrer det gamle temaet.
   ============================================================ */

@font-face { font-family:'Recoleta'; src:url('../fonts/recoleta-regular.otf')  format('opentype'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Recoleta'; src:url('../fonts/recoleta-medium.otf')   format('opentype'); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:'Recoleta'; src:url('../fonts/recoleta-semibold.otf') format('opentype'); font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:'Recoleta'; src:url('../fonts/recoleta-bold.otf')     format('opentype'); font-weight:700; font-style:normal; font-display:swap; }

.site {
  --blue: #0974F1;
  --blue-light: #9FCCFA;
  --grad: linear-gradient(90deg, hsla(212,93%,49%,1) 0%, hsla(210,90%,80%,1) 100%);
  --ink: #16181d;
  --muted: #5b6069;
  --line: rgba(20,22,26,0.10);
  --soft: #f5f8fd;
  background: #ffffff;
  color: var(--ink);
}
body.site { background: #ffffff; }
body.site::after { display: none !important; } /* fjern film-korn */

/* Vanlig musepeker (ingen custom cursor-ring) */
.site a, .site button, .site .btn, .site .nav__cta, .site .faq-item__q,
.site .project-row a, .site .link-arrow, .site input, .site label,
.site .pris-range, .site .kar__card { cursor: pointer !important; }
.site .pkg-card, .site .faq-item, .site .browser-mock, .site .service-item { cursor: auto !important; }

/* ---------- NAV: helt hvit ---------- */
.site .nav { background:#fff !important; backdrop-filter:none !important; color:var(--ink) !important; }
.site .nav.scrolled { box-shadow: 0 1px 0 rgba(20,22,26,0.09); }
.site .nav__logo { width:auto; height:38px; }
.site .nav__logo-main { position:static; transform:none; height:100%; width:auto; display:block; }
.site .nav__links a { color:var(--ink) !important; }
.site .nav__links a:hover { color:var(--blue) !important; }
.site .nav__hamburger span { background:var(--ink) !important; }
.site .nav__cta {
  color:#fff !important; padding:0.55rem 1.2rem; border-radius:999px;
  background-image:linear-gradient(100deg, var(--blue) 0%, var(--blue) 45%, var(--blue-light) 120%);
  background-size:220% 100%; background-position:0% 50%;
  transition:background-position .5s ease, color .35s;
}
.site .nav__cta:hover { background-position:100% 50%; color:var(--ink) !important; }
.site .nav__mobile { background:#fff; gap:1.6rem; }
.site .nav__mobile a {
  font-family:'Recoleta','DM Sans',sans-serif; font-weight:600; font-style:normal;
  color:var(--ink); letter-spacing:-0.01em;
}
.site .nav__mobile a:hover { color:var(--blue); font-style:normal; }
.site .nav__hamburger.active span { background:var(--ink) !important; }

/* ---------- Typografi ---------- */
.site h1, .site h2, .site h3,
.site .page-hero h1, .site .cta-section__title, .site .pkg-card__title {
  font-family:'Recoleta','DM Sans',sans-serif; font-weight:600;
  letter-spacing:-0.015em; color:var(--ink);
}
.site h1 em, .site h2 em, .site .cta-section__title em, .site .about-strip__title em {
  font-family:'Recoleta','DM Sans',sans-serif; font-style:normal; color:var(--blue);
}
.site .eyebrow { font-family:'DM Sans',sans-serif; font-size:0.72rem; font-weight:600;
  letter-spacing:0.28em; text-transform:uppercase; color:var(--blue); }
.site .eyebrow::before, .site .eyebrow::after { display:none !important; }
.site p, .site li, .site .page-hero__sub { color:var(--muted); }

/* ---------- Side-hero (ren, hvit) ---------- */
.site .page-hero {
  position:relative; overflow:hidden;
  background:
    radial-gradient(44% 42% at 14% 16%, rgba(9,116,241,0.10), transparent 70%),
    radial-gradient(48% 44% at 86% 86%, rgba(159,204,250,0.30), transparent 70%),
    #ffffff;
  padding: clamp(9rem,16vh,12rem) var(--gutter) clamp(3rem,7vw,5rem);
}
.site .page-hero__bg { display:none !important; }
.site .page-hero__media { display:none !important; }
.site .page-hero__inner { max-width:900px; margin:0 auto; text-align:center; display:block; }
.site .page-hero__text h1 { font-size:clamp(2.7rem,8vw,5.4rem); line-height:1.02; margin:0.7rem 0 1.3rem; }
.site .page-hero__sub { font-family:var(--font-text); font-size:clamp(1rem,1.5vw,1.2rem);
  line-height:1.7; max-width:52ch; margin:0 auto; }

/* ---------- Knapper ---------- */
.site .btn { cursor:pointer; }
.site .btn--fill, .site .btn--dark {
  color:#fff !important; border:none !important; border-radius:999px;
  background-image:linear-gradient(100deg, var(--blue) 0%, var(--blue) 42%, var(--blue-light) 120%) !important;
  background-size:220% 100%; background-position:0% 50%;
  box-shadow:0 16px 36px -16px rgba(9,116,241,0.6);
  transition:background-position .55s ease, color .4s, transform .3s, box-shadow .4s;
}
.site .btn--fill::after, .site .btn--dark::after { color:currentColor; }
.site .btn--fill:hover, .site .btn--dark:hover { background-position:100% 50%; color:var(--ink) !important; transform:translateY(-2px); }
.site .btn--ghost, .site .btn--ghost-light {
  background:transparent !important; color:var(--ink) !important;
  border:1px solid rgba(20,22,26,0.25) !important; border-radius:999px;
  transition:border-color .3s, transform .3s;
}
.site .btn--ghost:hover, .site .btn--ghost-light:hover { border-color:var(--ink) !important; transform:translateY(-2px); }
/* Fjern gull-border fra gammelt design på fylte/mørke knapper (også ved hover) */
.site .btn--fill, .site .btn--dark, .site .btn--light, .site .btn--bronze { border:none !important; }
.site .btn--fill:hover, .site .btn--dark:hover, .site .btn--light:hover, .site .btn--bronze:hover { border-color:transparent !important; }
.site .link-arrow { color:var(--blue); }
.site .link-arrow:hover { color:var(--ink); }

/* Blå gradientknapp (delt med forsiden) */
.site .btn-grad {
  display:inline-flex; align-items:center; justify-content:center; gap:0.5rem;
  font-family:'DM Sans',sans-serif; font-size:1rem; font-weight:600; letter-spacing:-0.01em;
  color:#fff; padding:1rem 2rem; border:none; border-radius:999px; width:auto; min-width:280px; cursor:pointer;
  background-image:linear-gradient(100deg, var(--blue) 0%, var(--blue) 42%, var(--blue-light) 120%);
  background-size:220% 100%; background-position:0% 50%;
  box-shadow:0 16px 36px -16px rgba(9,116,241,0.6);
  transition:background-position .55s ease, color .4s, transform .3s, box-shadow .4s;
}
.site .btn-grad:hover { background-position:100% 50%; color:var(--ink); transform:translateY(-2px); }

/* ---------- Mørke seksjoner → lyse ---------- */
.site .section--dark { background:#f5f8fd !important; color:var(--ink) !important; }
.site .section--dark h2, .site .section--dark h3, .site .section--dark .eyebrow { color:var(--ink) !important; }
.site .section--dark .eyebrow { color:var(--blue) !important; }

/* Roadmap-aksenter (om + prosess) */
.site .rmap__fill { background:var(--blue) !important; }
.site .rmap__line { background:rgba(9,116,241,0.16) !important; }
.site .rmap__node { background:#fff !important; border-color:var(--blue) !important; box-shadow:0 0 0 4px rgba(9,116,241,0.14) !important; }
.site .rmap__step.active .rmap__node { background:var(--blue) !important; }
.site .rmap__year { color:var(--blue) !important; }
.site .rmap__title { color:var(--ink) !important; font-family:'Recoleta','DM Sans',sans-serif; }
.site .rmap__desc { color:var(--muted) !important; }

/* ---------- CTA-kort ---------- */
.site .cta-card { background:#f5f8fd !important; }
.site .cta-card::before { display:none !important; }
.site .cta-section__title { color:var(--ink) !important; }
.site .cta-section__sub, .site .cta-section__mail { color:var(--muted) !important; }
.site .cta-section__mail a { color:var(--blue) !important; }
.site .eyebrow--center { color:var(--blue) !important; }

/* ---------- Footer (hvit) ---------- */
.site .footer { background:#fff !important; color:var(--ink); border-top:1px solid var(--line); }
.site .footer__tagline, .site .footer__copy, .site .footer__nav a { color:var(--muted); }
.site .footer__col-title { color:var(--ink); }
.site .footer__nav a:hover { color:var(--blue); }

/* ---------- Stats (om) ---------- */
.site .stats { background:#fff; }
.site .stat__number { color:var(--blue); font-family:'Recoleta','DM Sans',sans-serif; font-weight:600; }
.site .stat__label { color:var(--muted); }

/* ---------- About-strip (om) ---------- */
.site .about-strip { background:#fff; }
.site .about-strip__image img { border-radius:20px; }
.site .about-strip__content p { color:var(--muted); }
.site .about-strip__title { font-family:'Recoleta','DM Sans',sans-serif; }

/* ---------- FAQ ---------- */
.site .faq { background:#fff; }
.site .faq__heading h2 { font-family:'Recoleta','DM Sans',sans-serif; }
.site .faq__heading p { color:var(--muted); }
.site .faq-item { border-color:var(--line) !important; }
.site .faq-item__q {
  color:var(--ink); font-family:'DM Sans',sans-serif; font-weight:600; cursor:pointer;
}
.site .faq-item__q:hover { color:var(--blue); }
.site .faq-item__icon::before, .site .faq-item__icon::after { background:var(--blue) !important; }
.site .faq-item__a-inner { color:var(--muted); }

/* ---------- Prosjektliste-forhåndsvisning (browser-mock) ---------- */
.site .browser-mock { border-color:var(--line); }

@media (max-width:820px) {
  .site .page-hero__inner { text-align:left; }
}