/* ──────────────────────────────────────────────────────────────────────────
   RUUD Web — app.css (v2, clean)
   Light-first, auto Dark via prefers-color-scheme
   Fokus: premium typografi, luft, minimal “boks-støy”, smooth micro-interactions
   ────────────────────────────────────────────────────────────────────────── */

/* ── Design tokens ───────────────────────────────────────────────────────── */
:root{
  color-scheme: light dark;

  /* Colors */
  --bg:#ffffff;
  --panel:#f7f7f9;
  --muted:#6b7280;
  --text:#0b1220;
  --border:rgba(17,24,39,.08);
  --accent:#0b0f1a;

  /* Elevation */
  --shadow:0 12px 32px rgba(2,6,23,.10);
  --shadow-soft:0 8px 22px rgba(2,6,23,.07);
  --shadow-tiny:0 1px 2px rgba(2,6,23,.05);

  /* Radii & spacing scale */
  --radius:16px;
  --radius-lg:22px;
  --radius-sm:12px;

  --space-1:8px;
  --space-2:12px;
  --space-3:16px;
  --space-4:20px;
  --space-5:28px;
  --space-6:36px;
  --space-7:48px;
  --space-8:72px;

  /* Containers */
  --container: 1160px;
  --container-narrow: 820px;
  --container-wide: 1320px;

  /* Buttons */
  --btn-bg:#111;
  --btn-text:#fff;
  --pill-bg:rgba(2,6,23,.05);

  /* Focus */
  --focus:0 0 0 3px rgba(2,6,23,.18);

  /* Decorative gradients */
  --grad-hero:
    radial-gradient(46% 46% at 10% -10%, rgba(124,156,255,.25), transparent 60%),
    radial-gradient(60% 60% at 80% -20%, rgba(124,156,255,.18), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(2,6,23,.03) 100%);
  --grad-chip: linear-gradient(180deg, rgba(2,6,23,.04), rgba(2,6,23,.02));

  /* Gold accents */
  --gold:#f2cc66;
  --gold-deep:#d9a436;
  --gold-ink:#0b0c10;
  --plan-glow:0 16px 36px rgba(217,164,54,.18);
}

@media (prefers-color-scheme: dark){
  :root{
    --bg:#0b0b0b;
    --panel:rgba(255,255,255,.06);
    --muted:#a1a1aa;
    --text:#f5f5f5;
    --border:rgba(255,255,255,.12);
    --accent:#ffffff;

    --shadow:0 14px 36px rgba(0,0,0,.42);
    --shadow-soft:0 8px 24px rgba(0,0,0,.30);
    --shadow-tiny:0 1px 2px rgba(0,0,0,.26);

    --btn-bg:#fff;
    --btn-text:#111;

    --pill-bg:rgba(255,255,255,.08);

    --grad-hero:
      radial-gradient(46% 46% at 10% -10%, rgba(124,156,255,.22), transparent 60%),
      radial-gradient(60% 60% at 80% -20%, rgba(124,156,255,.18), transparent 60%),
      linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.00));
    --grad-chip: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  }
}

/* ── Base/reset ───────────────────────────────────────────────────────────── */
*{box-sizing:border-box}
html,body{height:100%}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.001ms !important;animation-iteration-count:1 !important;transition-duration:0.001ms !important;scroll-behavior:auto !important}
}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--text);
  font:16px/1.6 ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
img{max-width:100%;display:block}
a{color:var(--text);text-decoration:none}
a:hover{opacity:.92}
a:focus-visible{outline:none;box-shadow:var(--focus);border-radius:10px}
.container{max-width:min(var(--container),92vw);margin:0 auto;padding:0 20px}
.container.narrow{max-width:min(var(--container-narrow),92vw)}
.container.wide{max-width:min(var(--container-wide),92vw)}
.page{position:relative}

/* Skip link */
.skip-link{
  position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;
}
.skip-link:focus{
  position:fixed;left:20px;top:16px;z-index:1000;
  background:var(--btn-bg);color:var(--btn-text);padding:8px 12px;border-radius:10px;
  box-shadow:var(--shadow);
}

/* Anchor offset for sticky header */
section[id]{scroll-margin-top:80px}

/* ── Header (glass + shimmer + “magnet” underline) ───────────────────────── */
.header{
  position:sticky; top:0; z-index:50;
  /* subtil glass + innvendig kant */
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bg) 86%, transparent), color-mix(in srgb, var(--bg) 70%, transparent)) border-box;
  backdrop-filter:saturate(140%) blur(10px);
  -webkit-backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid color-mix(in srgb, var(--border) 80%, transparent);
  /* løft litt når siden er scrolla */
  transition: box-shadow .22s ease, border-color .22s ease, background .22s ease;
}
.header.scrolled{
  box-shadow: var(--shadow);
  border-bottom-color: color-mix(in srgb, var(--border) 60%, transparent);
}
.header .row{display:flex;align-items:center;justify-content:space-between;height:64px;min-height:64px}
.brand{font-weight:800;letter-spacing:.2px}
.brand span{opacity:.7}
.nav{display:none;gap:24px;align-items:center}
@media(min-width:820px){.nav{display:flex}}
.burger{
  display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;border:1px solid var(--border);
  border-radius:12px;background:transparent;color:color-mix(in srgb, var(--text) 70%, transparent);
  transition: background .18s ease, border-color .18s ease, transform .12s ease;
}
.burger:hover{ background: color-mix(in srgb, var(--panel) 90%, transparent); border-color: color-mix(in srgb, var(--text) 18%, transparent) }
.burger:active{ transform: translateY(1px) }
body.nav-open{overflow:hidden}

/* Topp-gleam (1.5px) */
.header-gleam{
  position:absolute; inset:0 0 auto 0; height:1.5px; pointer-events:none;
  background:
    linear-gradient(90deg, transparent, var(--gold) 20%, #F3E39C 50%, var(--gold-deep) 80%, transparent);
  opacity:.0; transform:translateZ(0);
}
@media (prefers-reduced-motion:no-preference){
  .header-gleam{ animation: rw-gleam 4.8s ease-in-out infinite; }
  @keyframes rw-gleam{
    0%,100%{ opacity:.0; filter:saturate(100%) }
    15%,85%{ opacity:.75; }
    50%{ opacity:1; }
  }
}

/* Basis */
.nav a{
  position:relative; display:inline-flex; align-items:center;
  color:color-mix(in srgb, var(--text) 70%, transparent);
  line-height:1.2; font-weight:600; padding-inline:8px;
  transition: color .18s ease;
}

/* Hover-underline (alle størrelser) */
.nav a:not(.btn){
  padding-bottom:8px;
  background:
    radial-gradient(24px 12px at var(--ux, 0%) 100%, color-mix(in srgb, var(--gold) 60%, transparent) 0, transparent 70%) no-repeat,
    linear-gradient(96deg,var(--gold) 0%, #F3E39C 45%, var(--gold-deep) 100%) no-repeat;
  background-size: 0 2px, 0 2px;
  background-position: left bottom, left bottom;
  transition: background-size .28s cubic-bezier(.22,1,.36,1);
}

.nav a:not(.btn):hover{ background-size: 28px 2px, 55% 2px }

/* Aktiv lenke */
.nav a.active:not(.btn),
.nav a[aria-current="page"]:not(.btn){ background-size: 0 2px, 100% 2px }

/* Kun for bredde ≥ 820px */
@media (min-width:820px){
  .nav a.active:not(.btn){ color: var(--text) }
}


/* Modalboks (samme klasse-navn som du har, men mer “premium”) */
.nav-modal{
  position: fixed; inset:0; display:grid; place-items:center;
  pointer-events:none; opacity:0; visibility:hidden;
  transition: opacity .20s ease, visibility 0s linear .20s; z-index:99;
}
.nav-modal.is-open{ opacity:1; visibility:visible; pointer-events:auto }
.nav-modal__box{
  width:min(92vw,520px); max-height:86dvh; overflow:auto;
  border-radius: var(--radius-lg); background: color-mix(in srgb, var(--panel) 96%, transparent);
  border:1px solid color-mix(in srgb, var(--border) 80%, transparent);
  box-shadow: var(--shadow);
  transform: translateY(6px) scale(.98); opacity:0;
  transition: transform .25s cubic-bezier(.22,1,.36,1), opacity .25s ease;
}
.nav-modal.is-open .nav-modal__box{ transform: translateY(0) scale(1); opacity:1 }
.nav-modal__head{ display:flex; align-items:center; justify-content:flex-end; padding:10px 12px 0 12px }
.nav-modal__title{ margin:0; font-size:14px; font-weight:750 }
.nav-modal__close{
  appearance:none; border:1px solid var(--border); background:transparent;
  width:36px; height:36px; border-radius:12px; cursor:pointer; display:inline-grid; place-items:center; font-size:18px; line-height:1;
}
.nav-modal__close:hover{ background: color-mix(in srgb, var(--panel) 90%, transparent) }
.nav-modal__close:focus-visible{ outline:none; box-shadow: var(--focus) }
.nav-modal__content{ padding:12px 14px 16px 14px }
.nav-modal .nav{ display:flex; flex-direction:column; gap:8px }
.nav-modal .nav a{ transition: background .18s ease, color .18s ease }
.nav-modal .nav a:hover{ background: color-mix(in srgb, var(--panel) 86%, transparent) }
.nav-modal .nav a.btn{ border-radius:12px; padding:12px 14px; text-align:center }
.nav-modal .nav a:not(.btn)::before,.nav-modal .nav a:not(.btn)::after{ content:none !important }

@media (min-width:820px){
  .nav{ display:flex } .burger{ display:none }
  .nav-modal, .nav-overlay{ display:none !important; }
}


/* ── Typography / chips / minor UI ───────────────────────────────────────── */
.pill,.chip{
  display:inline-flex;align-items:center;gap:8px;
  border:1px solid var(--border);background:var(--pill-bg);
  padding:6px 10px;border-radius:999px;color:color-mix(in srgb, var(--text) 70%, transparent);font-size:12px
}
.chip{
  background:var(--grad-chip);
  border-color:color-mix(in srgb, var(--border) 70%, transparent);
}
.eyebrow{letter-spacing:.08em;text-transform:uppercase;font-size:12px;color:color-mix(in srgb, var(--text) 65%, transparent)}

.h1{
  font-size:clamp(36px,5.6vw,56px);
  line-height:1.05;margin:12px 0 8px;font-weight:800;letter-spacing:-.01em;
  text-wrap:balance;
}
.h2{font-size:clamp(24px,3.6vw,32px);line-height:1.2;margin:0 0 12px;font-weight:750}
.h3{font-size:20px;line-height:1.3;margin:0 0 6px;font-weight:750}
.lead{color:color-mix(in srgb, var(--text) 80%, transparent);max-width:760px;text-wrap:pretty}
.muted{color:var(--muted)}
.small{font-size:12px}
.actions{display:flex;gap:10px;margin:20px 0 10px;flex-wrap:wrap}

/* Divider */
.divider{height:1px;background:var(--border);width:100%;margin: var(--space-5) 0}

/* ── Sections & cards ─────────────────────────────────────────────────────── */
.section{padding:72px 0}
.section.alt{
  background:color-mix(in srgb, var(--panel) 70%, transparent);
  border-top:1px solid var(--border);border-bottom:1px solid var(--border)
}
.card{
  border:1px solid var(--border);background:var(--panel);
  border-radius:var(--radius);padding:20px;box-shadow:var(--shadow-soft)
}
.card-head{display:flex;align-items:center;justify-content:space-between;color:color-mix(in srgb, var(--text) 70%, transparent)}

/* Notes */
.note{
  border:1px solid var(--border);
  background:color-mix(in srgb, var(--panel) 82%, transparent);
  border-radius:14px;padding:12px 14px;
}
.note.inline{
  display:flex;gap:10px;align-items:center;border-left:3px solid color-mix(in srgb, var(--text) 28%, transparent);
  background:color-mix(in srgb, var(--panel) 80%, transparent)
}

/* ── Grids / layout utilities ─────────────────────────────────────────────── */
.grid.four{display:grid;grid-template-columns:repeat(1,1fr);gap:16px}
.grid.two{display:grid;grid-template-columns:1fr;gap:24px}
.grid.auto-fit{display:grid;grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));gap:16px}
@media(min-width:720px){.grid.four{grid-template-columns:repeat(4,1fr)}.grid.two{grid-template-columns:1.2fr .8fr}}
.feature .icon{width:40px;height:40px;border-radius:12px;background:color-mix(in srgb, var(--text) 8%, transparent);display:grid;place-items:center}
.stack{display:flex;flex-direction:column;gap:var(--space-3)}
.cluster{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.center{text-align:center}
.narrow{max-width:800px}
.mt{margin-top:12px}
.mt-2{margin-top:var(--space-3)}
.mt-3{margin-top:var(--space-4)}
.mt-4{margin-top:var(--space-5)}
.mb-0{margin-bottom:0}

/* ── Hero (v2) ────────────────────────────────────────────────────────────── */
.hero{
  padding:clamp(64px,8vw,120px) 0;
  position:relative;background:var(--bg);overflow:hidden;
}
.hero::before{
  content:"";position:absolute;inset:-10% -10% auto -10%;
  height:80%; pointer-events:none; z-index:-1; background:var(--grad-hero);
}
.hero .kpis{margin-top:14px}
.guarantee{
  margin-top:14px;border:1px dashed var(--border);
  background:color-mix(in srgb, var(--panel) 70%, transparent);
  padding:10px 12px;border-radius:12px;color:color-mix(in srgb, var(--text) 90%, transparent)
}
/* Optional split layout */
.hero-split{ display:grid; gap:20px; align-items:center; grid-template-columns: 1.1fr .9fr; }
@media (max-width:900px){ .hero-split{ grid-template-columns:1fr } }
.hero-art{
  position:relative; aspect-ratio: 4/3; border-radius: var(--radius-lg);
  background:
    radial-gradient(120% 120% at 100% -20%, rgba(124,156,255,.2), transparent 40%),
    linear-gradient(180deg, color-mix(in srgb, var(--panel) 70%, transparent), transparent);
  border:1px solid var(--border); box-shadow: var(--shadow); overflow:hidden;
}
.hero-art::after{
  content:""; position:absolute; inset:0;
  background-image:
    linear-gradient(transparent 0%, rgba(2,6,23,.06) 100%),
    repeating-linear-gradient(0deg, color-mix(in srgb, var(--text) 6%, transparent) 0, transparent 1px, transparent 32px);
  mix-blend-mode: soft-light; opacity:.8;
}
.hero-art picture, .hero-art img, .hero-art video {
  display:block; width:100%; height:100%; object-fit:cover; border-radius:inherit; box-shadow:none;
}

/* ── Compare (Skreddersydd vs Mal) ───────────────────────────────────────── */
.compare{
  border:1px solid var(--border); border-radius:var(--radius); overflow:hidden;
  background:var(--panel); box-shadow:var(--shadow-soft)
}
.compare .head{
  display:grid; grid-template-columns:1fr 1fr; gap:0;
  background:color-mix(in srgb, var(--panel) 80%, transparent);
  border-bottom:1px solid var(--border);
}
.compare .head div{ padding:14px; font-weight:700; text-align:center }
.compare .row{
  display:grid; grid-template-columns:1fr 1fr; align-items:center;
  gap:0; border-bottom:1px solid var(--border);
}
.compare .row:last-child{ border-bottom:0 }
.compare .row div{ padding:12px 14px }
.tick::before{content:"✅ "; margin-right:6px}
.cross{ color:color-mix(in srgb, #ef4444 70%, transparent) }
.cross::before{content:"✖ "; margin-right:6px}

/* ── Timeline (prosess) ───────────────────────────────────────────────────── */
.timeline{ --rail:3px; --gap:18px; position:relative; }
.timeline__rail{ position:relative; height: var(--rail); background:var(--border); border-radius:999px; overflow:hidden; }
.timeline{ --progress: 0; }
.timeline__progress{
  height:100%; width: calc(var(--progress,0) * 1%); background: color-mix(in srgb, var(--text) 28%, transparent);
  transition: width .6s cubic-bezier(.22,1,.36,1);
}
.timeline__grid{ display:grid; gap: var(--gap); grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top:14px; }
@media (max-width:900px){ .timeline__grid{ grid-template-columns:1fr } }
.timeline__item{
  border:1px solid var(--border); background:var(--panel); border-radius:var(--radius);
  padding:16px; box-shadow: var(--shadow-tiny); transition: transform .18s ease;
}
.timeline__item:hover{ transform: translateY(-2px) }
.step-badge{ display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:999px; background:color-mix(in srgb, var(--text) 8%, transparent); font-weight:800; font-size:12px; }

/* ===== Pricing v3 (gold, punchy, equal height) ===== */
.pricing{ display:grid; gap:18px; margin-top:22px; grid-template-columns:1fr; }
@media (min-width:720px){ .pricing{ grid-template-columns:repeat(2,1fr) } }
@media (min-width:1080px){ .pricing{ grid-template-columns:repeat(4,1fr) } }

.plan{
  --ring: color-mix(in srgb, var(--border) 70%, transparent);
  position:relative; display:flex; flex-direction:column;
  padding:20px 18px 18px; border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--panel) 96%, transparent);
  border:1px solid var(--ring); box-shadow: var(--shadow-soft);
  min-height: 420px; overflow:hidden;
  transition: transform .18s cubic-bezier(.22,1,.36,1), box-shadow .2s cubic-bezier(.22,1,.36,1), border-color .2s;
}
.plan:hover{ transform: translateY(-2px); box-shadow: var(--shadow); }
.plan .head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px; }
.plan h3{ margin:0; font-size:20px; font-weight:800; letter-spacing:.2px }

.plan .badge{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 10px; border-radius:999px;
  background: linear-gradient(180deg, var(--gold), var(--gold-deep));
  color: var(--gold-ink);
  font-weight:800; font-size:11px; text-transform:uppercase; letter-spacing:.04em;
  border: 1px solid color-mix(in srgb, var(--gold-deep) 50%, transparent);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.45), 0 6px 18px rgba(217,164,54,.22);
}
.plan .chip{
  background: linear-gradient(180deg, color-mix(in srgb, var(--gold) 14%, var(--panel)), color-mix(in srgb, var(--gold-deep) 8%, var(--panel)));
  border-color: color-mix(in srgb, var(--gold-deep) 40%, var(--border));
}
.plan .price{ font-size:34px; font-weight:900; line-height:1; margin:6px 0 10px; }
.plan .price .nok{ font-variant-numeric: tabular-nums }
.plan .price small, .plan .price span:last-child{ color:var(--muted); font-weight:600; font-size:14px }
.plan p{ margin:4px 0 8px; color: color-mix(in srgb, var(--text) 88%, transparent) }
.plan .list{ margin:8px 0 0; padding-left:18px; }
.plan .list li{ margin:6px 0; }
.plan .list li::marker{ color: color-mix(in srgb, var(--text) 40%, transparent) }
.plan details{ border-top:1px dashed var(--border); margin-top:12px; padding-top:10px; }
.plan details > summary{ list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; font-weight:700; }
.plan details > summary::-webkit-details-marker{ display:none }
.plan details > summary::after{ content:"+"; color:var(--muted); transition: transform .18s }
.plan details[open] > summary::after{ transform: rotate(45deg) }
.plan .mt{ margin-top:auto }
.plan .btn{ width:100% }
.plan.featured{
  position:relative; border:1.5px solid transparent;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--panel) 96%, transparent) 0%, color-mix(in srgb, var(--panel) 88%, transparent) 100%) padding-box,
    conic-gradient(from 140deg, var(--gold) 0 25%, transparent 25% 50%, var(--gold-deep) 50% 75%, transparent 75% 100%) border-box;
  box-shadow: var(--shadow-soft), var(--plan-glow);
}
.plan.featured .price{ font-size:36px }
.plan.featured .chip{
  background: linear-gradient(180deg, color-mix(in srgb, var(--gold) 18%, var(--panel)), color-mix(in srgb, var(--gold-deep) 12%, var(--panel)));
  border-color: color-mix(in srgb, var(--gold-deep) 55%, var(--border));
}
@media (prefers-color-scheme: dark){
  .plan{ background: color-mix(in srgb, #111 40%, var(--panel)); }
  .plan.featured{ background: color-mix(in srgb, #111 30%, var(--panel)); }
}
.strike{ text-decoration: line-through; opacity:.7; font-weight:600 }

/* ── Before/After slider ─────────────────────────────────────────────────── */
.before-after{margin-top:22px}
.slider{
  position:relative;border:1px solid var(--border);border-radius:var(--radius);
  overflow:hidden;background:color-mix(in srgb, var(--panel) 70%, transparent)
}
.slider:focus-within{box-shadow:var(--focus)}
.slider img{width:100%;height:auto;display:block}
.slider .handle{
  position:absolute;top:50%;left:55%;transform:translate(-50%,-50%);
  width:40px;height:40px;border-radius:999px;background:var(--btn-bg);color:var(--btn-text);
  display:grid;place-items:center;font-weight:700;box-shadow:var(--shadow)
}
.slider input{position:absolute;left:0;right:0;bottom:0;width:100%}
.slider input[type="range"]{appearance:none;height:28px;background:transparent}
.slider input[type="range"]::-webkit-slider-runnable-track{height:4px;background:color-mix(in srgb, var(--text) 25%, transparent);border-radius:999px}
.slider input[type="range"]::-webkit-slider-thumb{appearance:none;margin-top:-10px;width:24px;height:24px;border-radius:50%;background:var(--btn-bg);border:none;box-shadow:var(--shadow)}
.slider input[type="range"]::-moz-range-track{height:4px;background:color-mix(in srgb, var(--text) 25%, transparent);border-radius:999px}
.slider input[type="range"]::-moz-range-thumb{width:24px;height:24px;border-radius:50%;background:var(--btn-bg);border:none;box-shadow:var(--shadow)}

/* ── Stats ───────────────────────────────────────────────────────────────── */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px}
.stats div{border:1px solid var(--border);border-radius:12px;padding:10px 12px}
.stats small{color:var(--muted);display:block}

/* ── Referanser (legacy) ─────────────────────────────────────────────────── */
.cards.three{display:grid;grid-template-columns:1fr;gap:16px}
.cards .case{border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;background:var(--panel);transition:transform .15s ease, box-shadow .15s ease}
.cards .case:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.cards .thumb{height:140px;background:linear-gradient(135deg,#34d399,#059669)}
.cards .thumb.g2{background:linear-gradient(135deg,#38bdf8,#2563eb)}
.cards .thumb.g3{background:linear-gradient(135deg,#e879f9,#db2777)}
.cards .meta{display:flex;align-items:center;justify-content:space-between;padding:12px}
@media(min-width:900px){.cards.three{grid-template-columns:repeat(3,1fr)}}

/* ── Forms ───────────────────────────────────────────────────────────────── */
.form label{display:grid;gap:6px;margin:10px 0}
.form input,.form textarea{
  background:color-mix(in srgb, #000 2%, var(--panel));
  border:1px solid var(--border);border-radius:12px;padding:10px 12px;color:var(--text)
}
.form input::placeholder,.form textarea::placeholder{color:color-mix(in srgb, var(--muted) 85%, transparent)}
.form input:focus,.form textarea:focus{outline:none;border-color:color-mix(in srgb, var(--text) 25%, transparent);box-shadow:var(--focus)}
.form input:invalid,.form textarea:invalid{border-color:rgba(239,68,68,.55)}
.form .row{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px}
.notice.ok{border:1px solid rgba(34,197,94,.4);background:rgba(34,197,94,.08);padding:10px 12px;border-radius:12px}

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;border-radius:12px;
  padding:10px 14px;border:1px solid var(--border);color:var(--text);background:transparent;
  transition:.18s ease;gap:8px
}
.btn.primary{background:var(--btn-bg);color:var(--btn-text);border-color:transparent;box-shadow:var(--shadow)}
.btn.primary:hover{filter:brightness(.95)}
.btn.ghost:hover{background:color-mix(in srgb, var(--panel) 85%, transparent)}
.btn.small{padding:8px 12px}
.btn:focus-visible{outline:none;box-shadow:var(--focus)}
.btn:active{transform:translateY(1px)}
.btn[disabled], .btn.disabled{opacity:.5;pointer-events:none}

/* ── FAQ ─────────────────────────────────────────────────────────────────── */
.faq{
  border:1px solid var(--border);border-radius:12px;padding:12px 14px;background:var(--panel);margin:10px 0
}
.faq > summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;font-weight:600;color:color-mix(in srgb, var(--text) 92%, transparent)
}
.faq > summary::-webkit-details-marker{display:none}
.faq > summary::after{content:"+";color:var(--muted);transition:transform .15s ease}
.faq[open] > summary::after{transform:rotate(45deg)}
.faq > summary:focus-visible{outline:none;box-shadow:var(--focus);border-radius:10px}
.faq p{color:color-mix(in srgb, var(--text) 80%, transparent);margin:.6rem 0 0}

/* ── Footer ──────────────────────────────────────────────────────────────── */
.footer{border-top:1px solid var(--border);padding:24px 0}
.footer .row{display:flex;align-items:center;justify-content:space-between;gap:16px}
.footer .links{display:flex;gap:16px}

/* ── Reveal on scroll (JS legger .is-visible) ─────────────────────────────── */
.reveal{opacity:0;transform:translateY(12px);transition:opacity .6s cubic-bezier(.22,1,.36,1), transform .6s cubic-bezier(.22,1,.36,1)}
.reveal.is-visible{opacity:1;transform:none}
.reveal-up{opacity:0;transform:translateY(18px);transition:opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1)}
.reveal-up.is-visible{opacity:1;transform:none}
.reveal-fade{opacity:0;transition:opacity .8s ease}
.reveal-fade.is-visible{opacity:1}

/* ── Accessibility helpers ──────────────────────────────────────────────── */
.visually-hidden{
  position:absolute !important; width:1px;height:1px;padding:0;margin:-1px; overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* ── JS hooks ────────────────────────────────────────────────────────────── */
.js-ready .burger{will-change:transform}

/* ── Enterprise / Pro cards (legacy) ─────────────────────────────────────── */
.grid.pro{ display:grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap:16px }
.cap{ display:flex; flex-direction:column; gap:10px }
.cap-head{ display:flex; align-items:center; gap:12px }
.icon.lg{
  width:44px; height:44px; border-radius:12px; display:grid; place-items:center;
  background:color-mix(in srgb, var(--text) 8%, transparent); font-size:22px;
}
.cap h3{ margin:0; font-size:18px; font-weight:750 }
.cap-list{ margin:0; padding-left:18px; }
.cap-list li{ margin:6px 0; }
.badges{ display:flex; flex-wrap:wrap; gap:8px; margin-top:6px; }

/* KPI mini row */
.kpis{
  display:flex; flex-wrap:wrap; gap:16px; list-style:none; padding:0; margin:18px 0 6px;
}
.kpis li{
  border:1px solid var(--border); background:var(--panel); border-radius:12px;
  padding:10px 12px; display:flex; flex-direction:column; align-items:flex-start;
}
.kpis small{ color:var(--muted); display:block; margin-top:4px }

/* Selection highlight */
::selection{background:rgba(124,156,255,.25)}

/* ========== RUUD “Pro Timeline” (v3.1 — equal height + gold) ========== */
.rw-timeline{
  --rail-h: 5px;
  --rail: color-mix(in srgb, var(--text) 14%, transparent);
  --rail-active: color-mix(in srgb, var(--text) 38%, transparent);
  --card-bg: color-mix(in srgb, var(--panel) 92%, transparent);
  --card-bd: var(--border);
  --ease: cubic-bezier(.22,1,.36,1);
  --gold: #f2cc66; --gold-deep: #d9a436; --gold-glow: 0 10px 26px rgba(217,164,54,.18);
  --card-min: 240px;  --card-pad: 16px;
  position:relative; margin-top: var(--space-3);
}
.rw-tl-rail{ position:sticky; top:96px; z-index:0; height:var(--rail-h); width:100%; border-radius:999px; background:var(--rail); overflow:hidden; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--border) 60%, transparent); }
.rw-tl-progress{
  position:relative; height:100%; width:0%;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold));
  transition:width .5s var(--ease), filter .3s var(--ease); filter: drop-shadow(var(--gold-glow));
}
.rw-tl-progress::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(120deg, rgba(255,255,255,.0) 0%, rgba(255,255,255,.35) 40%, rgba(255,255,255,0) 60%) no-repeat;
  background-size: 40% 200%; mix-blend-mode: screen; animation: rwGoldShine 2.2s var(--ease) infinite;
}
@keyframes rwGoldShine{ 0%{background-position:-50% 0} 60%{background-position:120% 0} 100%{background-position:120% 0} }
.rw-tl-controls{ display:flex; align-items:center; justify-content:center; gap:10px; margin: 14px 0 6px; }
.rw-tl-controls button{
  border:1px solid var(--card-bd); background:var(--card-bg);
  padding:8px 12px; border-radius:12px; cursor:pointer;
  transition: background .15s var(--ease), transform .15s var(--ease), box-shadow .15s var(--ease), border-color .2s var(--ease);
}
.rw-tl-controls button:hover{ background:color-mix(in srgb, var(--panel) 85%, transparent); border-color: color-mix(in srgb, var(--text) 18%, transparent); }
.rw-tl-controls button:active{ transform: translateY(1px) }
.rw-tl-controls button:focus-visible{ outline:none; box-shadow: var(--focus) }
.rw-tl-dots{ display:flex; gap:8px }
.rw-tl-dots i{
  display:block; width:8px; height:8px; border-radius:999px;
  background: color-mix(in srgb, var(--text) 18%, transparent); opacity:.5;
  transition: transform .2s var(--ease), opacity .2s var(--ease), background .2s var(--ease), box-shadow .2s var(--ease);
}
.rw-tl-dots i.is-done{ opacity:.9; background: color-mix(in srgb, var(--text) 28%, transparent); }
.rw-tl-dots i.is-active{
  opacity:1; transform: scale(1.2); background: var(--gold);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--gold) 35%, transparent);
}
.rw-tl-track{ list-style:none; margin:18px 0 0; padding:0; display:grid; gap:22px; align-items: stretch; }
.rw-tl-item{ outline:none; height:100%; display:flex; }
.rw-tl-item:focus-visible .rw-tl-card{ box-shadow: var(--focus) }
.rw-tl-card{
  position:relative; overflow:hidden; border:1px solid var(--card-bd); background:var(--card-bg);
  border-radius: var(--radius); padding: var(--card-pad); min-height: var(--card-min); width:100%;
  display:flex; flex-direction:column; justify-content:flex-start; box-shadow: var(--shadow-tiny);
  transform: translateY(0) scale(1);
  transition: box-shadow .35s var(--ease), border-color .35s var(--ease), background .25s var(--ease), opacity .25s var(--ease), transform .28s var(--ease);
}
.rw-tl-item.is-active .rw-tl-card{
  border-color: color-mix(in srgb, var(--border) 50%, transparent);
  box-shadow: var(--shadow-soft), 0 10px 28px rgba(217,164,54,.10);
  transform: translateY(-2px) scale(1.03);
}
.rw-tl-head{ display:flex; align-items:center; gap:10px; font-weight:750; margin-bottom:6px; line-height:1.25; }
.rw-step{
  display:inline-grid; place-items:center; width:28px; height:28px; border-radius:999px; font-weight:800; font-size:12px;
  background: color-mix(in srgb, var(--text) 8%, transparent); color: color-mix(in srgb, var(--text) 85%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--border) 70%, transparent);
}
.rw-tl-item.is-active .rw-step{
  background: linear-gradient(180deg, var(--gold), var(--gold-deep)); color:#0b0c10;
  box-shadow: 0 8px 22px rgba(217,164,54,.22), inset 0 0 0 2px rgba(255,255,255,.55);
}
.rw-tl-card .list{ margin-top:8px }
.rw-tl-card .cluster{ margin-top:8px }
@media (min-width: 920px){
  .rw-timeline{ padding-block: 6px }
  .rw-tl-track{
    display:grid; grid-auto-flow: column; grid-auto-columns: minmax(360px, 1fr);
    gap: 24px; overflow-x:auto; scroll-snap-type: x mandatory; padding: 4px 2px 12px; align-items: stretch;
  }
  .rw-tl-item{ scroll-snap-align: start }
  .rw-tl-rail{ top:84px }
  .rw-tl-controls{ justify-content: space-between }
}
@media (hover:hover){ .rw-tl-item .rw-tl-card:hover{ box-shadow: var(--shadow) } }
@media (prefers-reduced-motion: reduce){
  .rw-tl-card, .rw-tl-progress{ transition:none !important }
  .rw-tl-progress::after{ animation:none !important }
  .rw-tl-item.is-active .rw-tl-card{ transform:none }
}
@media (min-width: 920px){ .rw-tl-track{ scroll-snap-type: x mandatory; } .rw-tl-track.is-program-scroll{ scroll-snap-type: none; } }

/* ========= Premium Skin (global harmonisering) ========= */
.theme-premium {
  --radius: 18px; --radius-lg: 24px;
  --shadow: 0 14px 36px rgba(2,6,23,.10);
  --shadow-soft: 0 10px 28px rgba(2,6,23,.08);
  --gold: #f2cc66; --gold-deep: #d9a436; --ring-gold: conic-gradient(from 140deg, var(--gold) 0 30%, var(--gold-deep) 30% 60%, transparent 60% 100%);
}
.theme-premium .h1{ letter-spacing:-.012em }
.theme-premium .h2{ letter-spacing:-.006em }
.theme-premium .lead{ font-weight:500 }
.theme-premium .pill{
  background: linear-gradient(180deg, color-mix(in srgb, var(--panel) 88%, transparent), color-mix(in srgb, var(--panel) 76%, transparent));
  border-color: color-mix(in srgb, var(--text) 18%, transparent);
}
.theme-premium .chip{
  background: linear-gradient(180deg, color-mix(in srgb, var(--gold) 14%, var(--panel)), color-mix(in srgb, var(--gold-deep) 8%, var(--panel)));
  border-color: color-mix(in srgb, var(--gold-deep) 45%, var(--border));
}
.theme-premium .btn{ border-radius:14px; font-weight:650 }
.theme-premium .btn.primary{ box-shadow:0 10px 26px rgba(2,6,23,.12) }
.theme-premium .btn.primary:hover{ transform:translateY(-1px); filter:none }
.theme-premium .btn.ghost:hover{ background: color-mix(in srgb, var(--panel) 88%, transparent) }
.theme-premium .btn.ghost-strong{ border-color: color-mix(in srgb, var(--text) 24%, transparent) }
.theme-premium .card,.theme-premium .feature{
  border-radius: var(--radius-lg);
  border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
  background: color-mix(in srgb, var(--panel) 96%, transparent);
  box-shadow: var(--shadow-soft);
  transition: box-shadow .22s cubic-bezier(.22,1,.36,1), transform .18s cubic-bezier(.22,1,.36,1), border-color .22s;
}
@media (hover:hover){
  .theme-premium .card:hover, .theme-premium .feature:hover{ box-shadow: var(--shadow); transform: translateY(-2px) }
}
.theme-premium .feature .icon{
  border-radius:14px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--text) 7%, transparent), color-mix(in srgb, var(--text) 4%, transparent));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--border) 65%, transparent);
}
.theme-premium .faq{
  border-radius:14px; padding:14px 16px; background: color-mix(in srgb, var(--panel) 94%, transparent);
}
.theme-premium .faq > summary{ font-weight:700 }
.theme-premium .faq > summary::after{ content:"＋"; opacity:.7 }
.theme-premium .faq[open] > summary::after{ transform: rotate(45deg) }
.theme-premium .compare{
  border-radius: var(--radius-lg); overflow: hidden;
  background: linear-gradient(180deg, color-mix(in srgb, var(--panel) 96%, transparent), color-mix(in srgb, var(--panel) 88%, transparent));
  box-shadow: var(--shadow-soft);
}
.theme-premium .compare .head{ background: color-mix(in srgb, var(--panel) 86%, transparent) }
.theme-premium .compare .row{ border-bottom-color: color-mix(in srgb, var(--border) 75%, transparent) }
.theme-premium .form input,.theme-premium .form textarea{
  border-radius:14px; background: color-mix(in srgb, #000 3%, var(--panel));
  border-color: color-mix(in srgb, var(--border) 80%, transparent);
}
.theme-premium .form input:focus,.theme-premium .form textarea:focus{ border-color: color-mix(in srgb, var(--text) 26%, transparent) }
.theme-premium .hero-art{
  border-radius: var(--radius-lg); box-shadow: var(--shadow);
  border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
}
.theme-premium .section.alt{
  background: radial-gradient(120% 80% at 100% -10%, color-mix(in srgb, var(--text) 4%, transparent), transparent 40%), color-mix(in srgb, var(--panel) 78%, transparent);
}
.theme-premium .footer { border-top-color: color-mix(in srgb, var(--border) 75%, transparent) }
.theme-premium .footer .row { gap: 12px }
.theme-premium .footer .links a:hover { opacity:1; text-decoration:underline }

/* Layout polish */
html { scrollbar-gutter: stable both-edges; scroll-padding-top: 80px; }
body { overflow-y: scroll; }
.header .row { height: 64px; min-height: 64px; }
.btn.small { line-height: 1; }
#ruud-chat.open .toggle{display:none}

/* --- PRISER: mer plass, bedre responsivitet --- */
#priser .container { max-width: 1280px; }
.pricing.grid5{
  display: grid; grid-template-columns: repeat(5, minmax(230px, 1fr));
  gap: 24px; align-items: stretch;
}
@media (min-width:1400px){ .pricing.grid5{ grid-template-columns: repeat(5, minmax(240px, 1fr)); gap:28px } }
@media (max-width:1200px){ .pricing.grid5{ grid-template-columns: repeat(3, minmax(0,1fr)) } }
@media (max-width:900px){ .pricing.grid5{ grid-template-columns: repeat(2, minmax(0,1fr)) } }
@media (max-width:640px){ .pricing.grid5{ grid-template-columns: 1fr } }
.plan.card{ display:flex; flex-direction:column; padding:20px 18px 18px; border-radius:14px }
.plan .head{ gap:10px }
.plan .price{ margin:10px 0 8px }
.plan .list{ margin-top:10px }
.plan .list li{ margin:6px 0; line-height:1.35 }
.plan .nok{ font-size:30px; font-weight:800 }
.plan .mt{ margin-top:auto !important }
.plan.ai{ order:99; border:2px solid var(--border) }

/* ── Modal burger nav (sentrert) ───────────────────────────────────────── */
.nav-overlay{
  position: fixed; inset: 0; z-index: 98;
  background: color-mix(in srgb, var(--bg) 58%, rgba(0,0,0,.28));
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .22s ease, visibility 0s linear .22s;
}
.nav-overlay.is-open{ opacity:1; visibility:visible; pointer-events:auto; transition: opacity .22s ease }
@media (prefers-color-scheme: dark){
  .nav-overlay{
    background: color-mix(in srgb, #000 68%, rgba(0,0,0,.32));
    backdrop-filter: blur(18px) saturate(130%); -webkit-backdrop-filter: blur(18px) saturate(130%);
  }
}
.nav-modal{
  position: fixed; inset:0; display:grid; place-items:center;
  pointer-events:none; opacity:0; visibility:hidden;
  transition: opacity .20s ease, visibility 0s linear .20s; z-index:99;
}
.nav-modal.is-open{ opacity:1; visibility:visible; pointer-events:auto; transition: opacity .20s ease }
.nav-modal__box{
  width:min(92vw,520px); max-height:86dvh; overflow:auto;
  border-radius: var(--radius-lg); background: color-mix(in srgb, var(--panel) 96%, transparent);
  border:1px solid color-mix(in srgb, var(--border) 80%, transparent);
  box-shadow: var(--shadow); transform: translateY(6px) scale(.98); opacity:0;
  transition: transform .25s cubic-bezier(.22,1,.36,1), opacity .25s ease;
}
.nav-modal.is-open .nav-modal__box{ transform: translateY(0) scale(1); opacity:1 }
.nav-modal__head{ display:flex; align-items:center; justify-content:flex-end; padding:10px 12px 0 12px }
.nav-modal__title{ margin:0; font-size:14px; font-weight:750 }
.nav-modal__close{
  appearance:none; border:1px solid var(--border); background:transparent;
  width:36px; height:36px; border-radius:12px; cursor:pointer; display:inline-grid; place-items:center; font-size:18px; line-height:1;
}
.nav-modal__close:hover{ background: color-mix(in srgb, var(--panel) 90%, transparent) }
.nav-modal__close:focus-visible{ outline:none; box-shadow: var(--focus) }
.nav-modal__content{ padding:12px 14px 16px 14px }
.nav-modal .nav{ display:flex; flex-direction:column; gap:8px }
.nav-modal .nav a{
  position:relative; transition: background .18s ease, color .18s ease, transform .18s ease;
}
.nav-modal .nav a:hover{ background: color-mix(in srgb, var(--panel) 86%, transparent); color: var(--text) }
.nav-modal .nav a:focus-visible{ outline:none; box-shadow: var(--focus) }
.nav-modal .nav a.btn{ display:inline-flex; align-items:center; justify-content:center; border-radius:12px; padding:12px 14px; text-align:center }
.nav-modal .nav a.btn.primary{ background: var(--btn-bg); color: var(--btn-text); border-color:transparent; box-shadow:var(--shadow) }
.nav-modal .nav a.btn.primary:hover,.nav-modal .nav a.btn.primary:focus-visible{ filter:brightness(.95) }
.nav-modal .nav a.btn.ghost{ background:transparent; color:var(--text); border:1px solid var(--border) }
.nav-modal .nav a.btn.ghost:hover,.nav-modal .nav a.btn.ghost:focus-visible{ background: color-mix(in srgb, var(--panel) 88%, transparent) }
.nav-modal .nav a:not(.btn)::before,.nav-modal .nav a:not(.btn)::after{ content:none !important } /* no stripes inside modal */
@media (min-width:820px){
  .nav{ display:flex } .burger{ display:none }
  .nav-modal, .nav-overlay{ display:none !important; }
}
@media (prefers-reduced-motion: reduce){
  .nav-overlay, .nav-modal, .nav-modal__box{ transition: none !important; }
}
@media (prefers-color-scheme: dark){
  .nav-modal__box{
    background: color-mix(in srgb, #0b0b0b 82%, var(--panel));
    border-color: color-mix(in srgb, var(--border) 85%, transparent);
  }
}

/* === FIX: slankere pill/chip globalt + ekstra på små skjermer === */
.pill,
.chip{
  padding: 4px 8px;           /* før: 6px 10px */
  font-size: 11px;            /* før: 12px */
  line-height: 1.1;           /* tettere vertikalt */
  gap: 6px;                   /* før: 8px */
  border-radius: 999px;       /* behold form */
}

/* Skinnet overstyrte bakgrunner – behold look, men gjør de mindre */
.theme-premium .pill{
  padding: 4px 8px;
  font-size: 11px;
}
.theme-premium .chip{
  padding: 4px 8px;
  font-size: 11px;
}

/* Litt ekstra nedskalering på mellomstore skjermer */
@media (max-width: 900px){
  .pill, .chip{
    padding: 3px 7px;
    font-size: 10.5px;
  }
}

/* Maks kompakt på små mobiler */
@media (max-width: 420px){
  .pill, .chip{
    padding: 2px 6px;
    font-size: 10px;
  }
}

/* Forside-seksjoner: gi disse pilene et lite ekstra kutt */
#referanser .pill,
#fullstack-vs-wp .why-head .pill,
#faq .pillbar .pill{
  padding: 3px 7px;
  font-size: 10.5px;
  line-height: 1.05;
}

/* Hvis noen pills skulle wrappe stygt, stram inn spacing rundt dem i rader */
.pillbar,
.ref-topline .pill{
  margin-top: 2px;
  margin-bottom: 2px;
}