/* wa-lint: skip */
/* ==== UdstillerGuide marketing site — Playful direction ====
   Tokens (brand-skala, surfaces, aliases, radius, status, font) defineres i
   tokens.css som single source of truth (ugdk-1oa). cd-app.css holder kun
   page-specifikke styles + dark-mode-justeringer for topbar-elementer. */

[data-theme="dark"] .topbar { background: rgba(24,32,40,0.82); }
[data-theme="dark"] .topbar__logo-pill,
[data-theme="dark"] .topbar__iconbtn,
[data-theme="dark"] .topbar__logo-pill,
[data-theme="dark"] .topbar__iconbtn {
  background: var(--surface);
  border-color: rgba(255,255,255,0.08);
}
[data-theme="dark"] .topbar__search-pill {
  background: var(--surface);
  border-color: rgba(255,255,255,0.08);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  font-feature-settings: 'ss02' on, 'cv11' on;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
img, svg { display: block; max-width: 100%; }

/* ---- Wordmark ---- */
.brand-light { font-weight: var(--fw-light); color: var(--primary); letter-spacing: -0.01em; }
.brand-bold  { font-weight: var(--fw-bold); color: var(--accent); letter-spacing: -0.015em; }

/* ---- Topbar — centered logo pill + side navs + utility buttons ---- */
.topbar {
  position: sticky; top: 0; z-index: 40;
  background: rgba(248,249,250,0.85);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s, background .2s;
}
.topbar.scrolled { border-bottom-color: var(--line); }
.topbar__inner {
  max-width: 1200px; margin: 0 auto;
  padding: 14px 28px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 20px;
  position: relative;
}
/* Edge-spread topbar: utils-venstre, pille-midt, CTA-højre.
   Beslutning bekræftet af 5-agent design review (brand, UX/Fitts, visuel,
   a11y, konvertering): pillen fortjener tomrum, CTA i top-right er F-pattern
   hot zone og 20+ års B2B SaaS-konvention (Linear/Stripe/Vercel/Notion/Figma). */
.topbar__inner--minimal { align-items: center; }

/* Eksplicit :focus-visible på alle topbar-elementer (a11y-fund). */
.topbar__iconbtn:focus-visible,
.topbar__logo-pill__trigger:focus-visible,
.topbar__search-pill:focus-visible,
.topbar__cta:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Center-cluster: wordmark-pille + søge-pille som sidestillede søskende.
   Adskilt fra hinanden (8px gap) så de visuelt læses som to forskellige
   affordances (menu vs. søg), ikke ét sammensat element. */
.topbar__center {
  justify-self: center;
  display: inline-flex; align-items: center; gap: 8px;
}

/* Wordmark-pille: logo + brand-tekst, åbner standkort (sitets menu).
   Højden (38px) matcher .topbar__iconbtn så alle topbar-elementer
   sidder på samme baseline. */
.topbar__logo-pill {
  display: inline-flex; align-items: center;
  height: 38px;
  padding: 0 14px;
  background: rgb(255, 255, 255);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 18px; line-height: 1;
  color: var(--primary);
  transition: background .2s, border-color .2s, transform .15s;
}
.topbar__logo-pill:hover,
.topbar__logo-pill:focus-within {
  background: var(--surface-hover);
  border-color: var(--primary);
  transform: translateY(-1px);
}

/* Logo+wordmark trigger: transparent indre wa-button, åbner standkort.
   --wa-form-control-height fjerner wa-button'ens intrinsic højde-inflation.
   --wa-color-fill-quiet og --wa-color-on-quiet sættes så wa-button'ens
   interne .button ikke tegner sin egen hover-bg eller grå tekstfarve oven
   på host'en (R6-fix: wa-button med appearance=plain tegnede et grå inder-
   rektangel der ikke dækkede hele pillen). */
.topbar__logo-pill__trigger {
  --wa-form-control-height: 36px;
  --wa-color-fill-quiet: transparent;
  --wa-color-neutral-fill-quiet: transparent;
  --wa-color-on-quiet: var(--primary);
  --wa-color-neutral-on-quiet: var(--primary);
  display: inline-flex; align-items: center; gap: 10px;
  padding: 0;
  background: transparent;
  border: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
/* wa-button slotter indhold i ::part(label) der default er inline-block -
   gap + align-items skal også sættes der for at logo-mark og wordmark
   lægger sig pænt på samme baseline. */
.topbar__logo-pill__trigger::part(label) {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.topbar__search-pill::part(label) {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.topbar__wordmark { display: inline-flex; align-items: center; }

/* Søge-pille: standalone pill ved siden af wordmark-pillen. Samme 38px
   chassis så pillene står som visuelle peers. Samme wa-* variabel-override
   som logo-pill__trigger så hover-bg dækker hele pillen. */
.topbar__search-pill {
  --wa-form-control-height: 36px;
  --wa-color-fill-quiet: transparent;
  --wa-color-neutral-fill-quiet: transparent;
  --wa-color-on-quiet: var(--primary);
  --wa-color-neutral-on-quiet: var(--primary);
  display: inline-flex; align-items: center; justify-content: center;
  gap: 3px;
  padding: 0;
  background: rgb(255, 255, 255);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--primary);
  cursor: pointer;
  transition: background .2s, border-color .2s, transform .15s;
}
.topbar__search-pill:hover,
.topbar__search-pill:focus-visible {
  background: var(--surface-hover);
  border-color: var(--primary);
  transform: translateY(-1px);
}
.topbar__search-pill kbd {
  font-family: inherit;
  font-weight: 600;
  color: var(--primary);
  background: transparent;
  padding: 0;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.02em;
}
.topbar__search-pill--icon { padding: 0 12px; }
.topbar__search-pill--icon svg {
  width: 16px; height: 16px;
  color: var(--primary);
}

.topbar__utils {
  justify-self: start;
  display: flex; align-items: center; gap: 8px;
}
.topbar__logo-pill svg { width: 22px; height: 22px; color: var(--primary); }
.topbar__logo-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  color: var(--primary);
}
.topbar__logo-mark svg { width: 100%; height: 100%; display: block; }
@keyframes logo-pop {
  0%   { opacity: 0; transform: scale(.75) rotate(-8deg); }
  60%  { opacity: 1; transform: scale(1.08) rotate(2deg); }
  100% { opacity: 1; transform: scale(1)   rotate(0deg); }
}
.topbar__logo-mark.is-swap svg { animation: logo-pop .45s cubic-bezier(.2,.7,.3,1.2); }

/* Nav groups sit left / right of the pill */

/* Round utility buttons — language + theme */
.topbar__utils {
  display: flex; align-items: center; gap: 6px;
}
.topbar__iconbtn {
  /* wa-button appearance=plain override: lad host'ens color + bg vinde
     i stedet for at .button tegner sin egen grå tekst og hover-fill. */
  --wa-color-on-quiet: var(--primary);
  --wa-color-neutral-on-quiet: var(--primary);
  --wa-color-fill-quiet: transparent;
  --wa-color-neutral-fill-quiet: transparent;
  width: 38px; height: 38px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgb(255, 255, 255);
  color: var(--primary);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.04em;
  transition: all .15s;
  padding: 0;
}
/* `display: inline-flex` ovenfor overrider `hidden`-attributtens default
   `display: none`. Eksplicit override så lang-toggle (hidden indtil i18n
   er komplet) faktisk er usynlig. */
.topbar__iconbtn[hidden] { display: none; }
.topbar__iconbtn:hover {
  border-color: var(--primary);
  transform: translateY(-1px);
}
.topbar__iconbtn:active { transform: scale(0.95); }
/* wa-button er custom element med shadow DOM. Host'ens flex-centering gælder
   IKKE shadow-DOM'ens interne button-wrapper, som har default `padding: 0 12px`
   (fra Web Awesome's "has-label"-variant). Det skubber slot-indholdet (vores
   svg) til højre i den runde 38px-knap. Vi neutraliserer pluginens padding og
   tvinger label-slottet til at fylde hele basen, så ikonet centreres præcis.
   Bug ugdk-7dl. */
.topbar__iconbtn::part(base) {
  padding: 0;
  width: 100%;
  height: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.topbar__iconbtn::part(label) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.topbar__iconbtn svg { width: 16px; height: 16px; }
.topbar__iconbtn .icon-moon { display: none; }
[data-theme="dark"] .topbar__iconbtn .icon-sun  { display: none; }
[data-theme="dark"] .topbar__iconbtn .icon-moon { display: inline; }

/* Touch target ≥ 44px på mobil (WCAG 2.5.5 AAA). */
@media (max-width: 720px) {
  .topbar__iconbtn { width: 44px; height: 44px; }
}

.topbar__cta {
  justify-self: end;
  display: inline-flex; align-items: center;
  height: 38px;
  background: var(--primary); color: rgb(255, 255, 255);
  padding: 0 18px; border-radius: var(--radius-pill);
  font-weight: 600; font-size: 14px; letter-spacing: -0.01em;
  transition: background .15s, transform .1s;
}
.topbar__cta:hover { background: var(--brand-40); color: rgb(255, 255, 255); transform: translateY(-1px); }
.topbar__cta:active { transform: scale(0.97); }

/* ─── Topbar mobil-tilpasning ───────────────────────────────────────────────
   <480px overflower default-layoutet (utils + pille + CTA = 392px på 375px
   viewport). Kompakteringer i prioriteret rækkefølge:
   1) Skjul .topbar__utils (lang + theme — theme er stadig persistent via
      localStorage fra desktop, og kan eksponeres via menu/footer senere).
   2) Skjul ⌘K-badgen (irrelevant på touch — kun search-ikon-knappen vises).
   3) Reducér CTA-padding + brug kortere "Kontakt"-tekst når der ikke er plads.
   4) Reducér .topbar__inner padding så pillen + CTA får luft. */
@media (max-width: 480px) {
  .topbar__inner {
    grid-template-columns: auto auto 1fr auto;
    padding: 10px 12px;
    gap: 8px;
  }
  /* Behold theme-toggle synlig på mobil (a11y-feature der bør være tilgængelig
     på alle viewports — R7-B-fix). Lang-toggle har stadig hidden-attribut indtil
     oversættelser er komplette. */
  .topbar__utils { display: flex; gap: 4px; }
  /* Skjul ⌘K-badge (#searchOpen) — keyboard-genvejen er irrelevant på touch.
     Vis ikon-knappen (#searchOpenIcon) i dens sted. */
  #searchOpen { display: none !important; }
  #searchOpenIcon { display: inline-flex !important; }
  .topbar__center { justify-self: start; gap: 6px; }
  /* WCAG 2.5.5 AAA: pillerne ≥44px på touch — bumper desktop-højden 38→44
     for begge pills og iconbtn (sidstnævnte allerede sat ovenfor). */
  .topbar__logo-pill { height: 44px; padding: 0 12px; }
  .topbar__logo-pill__trigger { --wa-form-control-height: 42px; gap: 8px; }
  .topbar__search-pill { --wa-form-control-height: 42px; height: 44px; min-width: 44px; padding: 0 14px; }
  .topbar__search-pill--icon { padding: 0 12px; }
  .topbar__cta {
    padding: 11px 16px;
    font-size: 13px;
    min-height: 44px;
  }
}

/* Topbar CTA: label vises på desktop, icon-only under 400px så CTA ikke
   overflower 320/375 viewport. R10-fix: tidligere kompakt-mode var ikke nok —
   R10-audit rapporterede 120px overflow på 320 og 65px på 375. Icon (kalender)
   er aria-label="Book et møde", så skærmlæsere får uændret label. */
.topbar__cta-icon { display: none; width: 20px; height: 20px; }
@media (max-width: 480px) {
  .topbar__cta { padding: 0; min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
  .topbar__cta-label { display: none; }
  .topbar__cta-icon { display: block; }
}

/* R11-fix: topbar overflower stadig på undersider på 320 (63px), 375 (8px)
   og 414 (64px) pga. den brede wordmark "UdstillerGuide". På smalle viewports
   skjules wordmark og kun logo-mark vises i pillen — kombineret med icon-only
   CTA og ⌘K-→search-icon-erstatning er topbaren så kompakt nok til iPhone Plus
   414px og iPhone SE 320px. Cutoff hævet fra 400 → 480 (efter 2026-05-25
   live-overflow på iPhone Plus). */
@media (max-width: 480px) {
  .topbar__wordmark { display: none; }
  .topbar__logo-pill { padding: 6px 8px; }
  .topbar__inner { padding: 10px 8px; gap: 6px; }
  .topbar__utils { gap: 2px; }
}

/* Desktop (≥721px): vis ⌘K-pillen, skjul ikon-pillen — ⌘K kommunikerer
   keyboard-genvejen som power-users forventer. Cutoff'et matcher
   .topbar__search-pill-skjul-reglen ved 720px længere nede så der
   ikke opstår et viewport-gab hvor ingen søge-affordance er synlig. */
@media (min-width: 721px) {
  #searchOpenIcon { display: none; }
}

/* ---- Buttons ---- */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 22px;
  border-radius: var(--radius-pill);
  font-weight: 600; font-size: 15px;
  transition: all .15s ease;
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
}
.btn-accent { background: var(--accent); color: rgb(255, 255, 255); }
.btn-accent:hover { background: var(--accent-hover); transform: translateY(-1px); }
.btn-outline { background: transparent; color: var(--primary); border-color: var(--line); }
.btn-outline:hover { border-color: var(--primary); }
.btn-lg { padding: 15px 28px; font-size: 16px; }

/* ---- Layout ---- */
.container { max-width: 1200px; margin: 0 auto; padding: 0 28px; }
.section { padding: 96px 0; }

/* ---- Hero ---- */
.hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse 900px 600px at 15% 25%, rgba(127,190,198,0.22), transparent 60%),
    radial-gradient(ellipse 700px 500px at 88% 78%, rgba(184,90,58,0.14), transparent 60%),
    var(--bg);
}

/* Minimal hero: huge centered animation, info reveals on scroll */
@keyframes scrollCueBounce {
  0%, 100% { transform: translate(-50%, 0); }
  50% { transform: translate(-50%, 6px); }
}

/* playful grid paper — subtle, full-bleed for minimal hero */
.hero::before {
  content: ''; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(49,79,89,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(49,79,89,0.035) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 70% 50% at 50% 50%, rgb(0, 0, 0) 50%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 70% 50% at 50% 50%, rgb(0, 0, 0) 50%, transparent 80%);
  pointer-events: none;
}

.hero__pill {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgb(255, 255, 255); border: 1px solid var(--line);
  padding: 6px 14px; border-radius: var(--radius-pill);
  font-size: 13px; color: var(--primary); font-weight: 600;
  margin-bottom: 24px;
}
.hero__pill .dot {
  width: 8px; height: 8px; background: var(--success); border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(0,136,60,0.18);
  animation: pulse-dot 1.8s ease-in-out infinite;
}
@keyframes pulse-dot { 0%,100% { box-shadow: 0 0 0 4px rgba(0,136,60,0.18);} 50% {box-shadow: 0 0 0 8px rgba(0,136,60,0.05);} }

/* ---- Hero Animation panel ---- */

/* swap animations */
@keyframes iconBeat { 0% {transform:scale(1)} 30% {transform:scale(1.25)} 100% {transform:scale(1)} }
@keyframes iconBeatFade { 0% {transform:scale(1); opacity:.3} 30% {transform:scale(1.2); opacity:1} 100% {transform:scale(1); opacity:1} }
@keyframes iconBounce { 0% {transform:translateY(30px) scale(.9); opacity:.4} 50% {transform:translateY(-10px) scale(1.05); opacity:1} 70% {transform:translateY(4px)} 100% {transform:translateY(0) scale(1); opacity:1} }
@keyframes iconFade { 0% {opacity:0; transform:scale(1.04)} 100% {opacity:1; transform:scale(1)} }
@keyframes iconFlip { 0% {transform:perspective(400px) rotateY(90deg); opacity:.4} 60% {transform:perspective(400px) rotateY(-10deg); opacity:1} 100% {transform:perspective(400px) rotateY(0); opacity:1} }
@keyframes iconShake { 0% {transform:translateX(-15px); opacity:.5} 25% {transform:translateX(12px); opacity:1} 50% {transform:translateX(-8px)} 75% {transform:translateX(4px)} 100% {transform:translateX(0); opacity:1} }
@keyframes iconSpin { 0% {transform:rotate(0); opacity:.4} 100% {transform:rotate(360deg); opacity:1} }
@keyframes iconSpinReverse { 0% {transform:rotate(0); opacity:.4} 100% {transform:rotate(-360deg); opacity:1} }
@keyframes iconSpinPulse { 0% {transform:rotate(0) scale(.8); opacity:.3} 50% {transform:rotate(180deg) scale(1.1); opacity:1} 100% {transform:rotate(360deg) scale(1); opacity:1} }
@keyframes finalBounce { 0% {transform:scale(.3) rotate(-15deg); opacity:1} 35% {transform:scale(1.2) rotate(3deg); opacity:1} 70% {transform:scale(.95) rotate(-1deg); opacity:1} 100% {transform:scale(1) rotate(0); opacity:1} }
@keyframes ringPulse { 0% {transform:translate(-50%,-50%) scale(.8); opacity:1} 100% {transform:translate(-50%,-50%) scale(1.8); opacity:0} }
@keyframes ringPulseFinal { 0% {transform:translate(-50%,-50%) scale(.8); opacity:1} 100% {transform:translate(-50%,-50%) scale(2.4); opacity:0} }
@keyframes burst {
  0% { opacity: 1; transform: translate(0,0) scale(1); }
  100% { opacity: 0; transform: translate(var(--tx), var(--ty)) scale(0); }
}
@keyframes slideUp { 0% {opacity:0; transform:translateY(40px)} 100% {opacity:1; transform:translateY(0)} }
@keyframes growLine { 0% {width:0} 100% {width:100%} }

/* Hero play button — lower left */

/* Hero variants */

/* Map variant elements */
@keyframes boothFade { 0% {transform:scale(0); opacity:0} 100% {transform:scale(1); opacity:0.9} }
@keyframes boothFavorite {
  0%,100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(184,90,58,0.5); }
  50% { transform: scale(1.15); box-shadow: 0 0 0 10px rgba(184,90,58,0); }
}
@keyframes pinDrop { 0% {transform: rotate(-45deg) translateY(-30px); opacity: 0;} 100% {transform: rotate(-45deg) translateY(0); opacity: 1;} }

/* ================== FEATURE GRID ================== */

/* Feature card: hero/wide has a little illustration area */

/* ================== PROBLEM band ================== */

/* ================== SOCIAL PROOF ================== */
.logos {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 40px 56px; padding: 32px 0; color: var(--brand-40);
  font-weight: 700; letter-spacing: -0.01em; font-size: 20px;
  align-items: center;
}
.logos span { opacity: 0.6; transition: opacity .2s; }
.logos span:hover { opacity: 1; color: var(--primary); }
.logos span small { font-weight: 400; font-size: 13px; display: block; color: var(--muted); letter-spacing: 0; }

/* ================== BLOG STRIP ================== */
.post {
  padding: 26px 24px 24px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  display: flex; flex-direction: column; gap: 16px;
  transition: all .2s;
  position: relative; overflow: hidden;
  cursor: pointer;
}
.post:hover { transform: translateY(-3px); box-shadow: 0 10px 30px -10px rgba(49,79,89,0.15); }
.post h3 { margin: 0; font-size: 20px; font-weight: 700; color: var(--primary); line-height: 1.2; letter-spacing: -0.015em; text-wrap: balance; }
.post p { margin: 0; font-size: 14px; color: var(--muted); line-height: 1.5; }

/* ================== CTA FINAL ================== */

/* ================== FOOTER ================== */
.footer {
  background: var(--brand-10); color: rgba(255,255,255,0.8);
  padding: 64px 0 28px;
}
.footer__grid {
  display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 48px;
  max-width: 1200px; margin: 0 auto; padding: 0 28px;
}
.footer h4 { font-size: 13px; text-transform: uppercase; letter-spacing: .12em; color: var(--highlight); margin: 0 0 14px; font-weight: 700; }
.footer a { display: block; padding: 4px 0; font-size: 14px; color: rgba(255,255,255,0.7); transition: color .15s; }
.footer a:hover { color: rgb(255, 255, 255); }
.footer__bar {
  max-width: 1200px; margin: 48px auto 0; padding: 20px 28px 0;
  border-top: 1px solid rgba(255,255,255,0.08);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px;
  font-size: 13px; color: rgba(255,255,255,0.5);
}
/* Footer logo-pill — flyttet fra inline styles i base.njk. Genbruger
   .topbar__logo-pill chassiset men override til mørk footer-baggrund. */
.footer .footer__logo-pill {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.14);
  color: rgb(255, 255, 255);
  font-size: 18px;
}
.footer .footer__logo-mark { color: var(--highlight); }
.footer__brand-light { color: rgb(255, 255, 255); font-weight: 300; }
.footer__brand-bold { color: var(--accent); font-weight: 700; }
.footer__tagline {
  font-size: 14px;
  color: rgba(255,255,255,0.85);
  max-width: 30ch;
  margin-top: 16px;
}

/* ================== SECTION HEADERS ================== */

/* ================== PRODUCT PAGE ================== */

/* map booths layout */

/* Filter panel — sits top-right of the map, clearly in the front */

/* Product feature rows */

/* ================== SERVICES ================== */
.setup {
  background: var(--cream); padding: 18px 20px;
  border-radius: var(--radius); border: 1px solid var(--line);
  display: flex; justify-content: space-between; align-items: baseline;
}
.setup .lbl { font-size: 13px; color: var(--muted); }

/* ================== BLOG ================== */
.blog-hero { padding: 64px 0 24px; }
.blog-hero h1 { font-size: clamp(36px, 4vw, 56px); font-weight: 300; color: var(--primary); letter-spacing: -0.03em; margin: 0 0 12px; }
.blog-hero h1 b { font-weight: 700; color: var(--accent); }

/* ================== TWEAKS PANEL ================== */

/* ============ COMMAND PALETTE — playful orbital menu ============ */
.palette {
  position: fixed; inset: 0;
  z-index: 200;
  display: flex; align-items: center; justify-content: center;
}
.palette[hidden] { display: none; }
.palette__backdrop {
  position: absolute; inset: 0;
  background: rgba(20, 30, 35, 0);
  backdrop-filter: blur(0px) saturate(140%);
  -webkit-backdrop-filter: blur(0px) saturate(140%);
  transition: background .35s ease, backdrop-filter .35s ease;
  cursor: pointer;
}
.palette.is-open .palette__backdrop {
  background: rgba(20, 30, 35, 0.55);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
}

.palette__stage {
  position: relative;
  width: min(92vw, 960px);
  height: min(85vh, 680px);
  display: flex; align-items: center; justify-content: center;
}

/* Orbital rings — decorative */
.palette.is-open .palette__ring {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

/* Center: search */
.palette.is-open .palette__searchwrap { transform: scale(1); opacity: 1; }
.palette.is-open .palette__hint { opacity: 0.7; }

/* Layout switch tabs */
.palette.is-open .palette__layout-switch { opacity: 1; }

/* Nav items container — positioned below the search field */
/* Layout: STACK — neat rows, circles on top, pills below */

/* Layout: DECK — fanned cards, slight rotations, overlapping */
/* Apply fan rotation only when the palette is open (so it composes with
   the enter transition). */
.palette.is-open .palette__orbit[data-layout="deck"] .palette__item {
  transform: translateY(0) scale(1) rotate(var(--fan-rot, 0deg));
}

/* Layout: CLUSTER — tight packed bubble-ish cloud with varied sizes */
.palette.is-open .palette__orbit[data-layout="cluster"] .palette__item:nth-child(odd) {
  transform: translateY(6px) scale(1) rotate(-3deg);
}
.palette.is-open .palette__orbit[data-layout="cluster"] .palette__item:nth-child(3n) {
  transform: translateY(-4px) scale(1) rotate(2deg);
}
.palette.is-open .palette__item {
  opacity: 1;
  transform: translateY(0) scale(1);
  transition-delay: var(--delay, 0s);
}

/* Selected (keyboard nav) */

/* No results state */

/* Topbar button-flavored rendering */

/* Responsive */
@media (max-width: 720px) {
  /* Skjul ⌘K-keyboard-shortcut på mobil (keyboard er irrelevant på touch),
     men BEHOLD søg-ikon-pillen - den er den primære søge-affordance
     når keyboard ikke findes. */
  .topbar__search-pill:not(.topbar__search-pill--icon) { display: none; }
}

/* ================== ROUTER / PAGES ================== */
.page { display: none; }
.page.active { display: block; animation: pageIn .3s ease-out; }
@keyframes pageIn { 0% { opacity: 0; transform: translateY(8px); } 100% { opacity: 1; transform: translateY(0); } }

/* utilities */
.text-center { text-align: center; }

/* small screens */
@media (max-width: 960px) {
   .footer__grid { grid-template-columns: 1fr; }
}

/* Keyboard focus-visible — WCAG 2.4.7 */
.topbar__iconbtn:focus-visible,
.topbar__cta:focus-visible,
.hero-exit:focus-visible {
  outline: 2px solid var(--brand-accent);
  outline-offset: 2px;
  border-radius: 4px;
}