/* ProviaAI — Shared Design System v1.0 */

/* ── TOKENS ── */
/* ExGen palette — the site's only theme (Phase 10b removed the dark/light
   toggle entirely per Elton's explicit request, "ta bort helt"). Values
   match exgen-tokens.css's own verified-AA set (one source of truth) with
   one deliberate exception: --a/--a2 are NOT the raw --exgen-teal
   (#00B7D9, which measures 2.39:1 on white and fails AA) because --a is
   used as a `color:` value directly in many rules in this file, and far
   more across inline page styles — a token this widely used as text has
   to be AA-safe itself, not just usable as a fill. #00768F/#00647A are
   darker points on the same teal hue that clear 4.5:1 (5.27/6.77:1).
   Full-strength --exgen-teal/--exgen-gradient stay available (via
   exgen-tokens.css, loaded alongside this file) for fills/borders/hero
   moments. */
:root {
  --a: #00768F;
  --a2: #00647A;
  --a-dim: rgba(0,118,143,.08);
  --a-glow: rgba(0,118,143,.18);

  /* Page vs surface. These used to be identical (#ffffff), so cards had no
     depth against the page — the "flat, harsh white" problem. --bg is now a
     hair cooler than pure white so white cards read as raised surfaces
     without needing heavier shadows. Separation is deliberately subtle
     (1.055:1); anything stronger starts looking grey rather than clean. */
  --bg: #F7F9FB;
  --s: #ffffff;
  --s2: #f8fafc;
  --s3: #f1f4f8;

  /* Three genuine text tiers. --t2 and --t3 were previously the SAME value
     (#667085), so the system claimed three levels but rendered two — a
     direct cause of the flat hierarchy. Rather than lighten --t3 (the
     obvious move, which fails: #8A94A6 measures 3.06:1 and breaks AA), --t2
     is darkened and the old value becomes --t3. Every tier now clears AA on
     BOTH surfaces — measured on --bg, the worse of the two:
     --t 14.83:1, --t2 5.67:1, --t3 4.71:1. Secondary text is more readable
     than before this change, not less. */
  --t: #1B2430;
  --t2: #5B6472;
  --t3: #667085;

  /* Neutral borders. Previously every border/divider on the site was
     teal-tinted rgba(0,183,217,…) across ~274 usages, which made the whole
     UI shimmer faintly cyan and read as a generic AI product. Neutral
     hairlines put the brand colour back where it belongs — on accents and
     actions, not on every box edge. Same token names, so all 274 call
     sites pick this up without being touched. */
  --l: #EEF1F4;
  --l2: #E4E7EC;
  --l3: #D4D9E0;

  /* Softer than before (was .06/.08/.12) — with real bg/surface separation
     the elevation no longer has to be carried by shadow alone. */
  --sh: 0 1px 2px rgba(14,27,42,.04);
  --sh2: 0 4px 16px rgba(14,27,42,.06);
  --sh3: 0 12px 32px rgba(14,27,42,.09);

  --r: 8px;
  --r2: 4px;
  --max: 1080px;
  --font: 'DM Sans', system-ui, sans-serif;
  --mono: 'DM Mono', monospace;
  --danger: #B91C1C;
  --warn: #92620A;
  --ok: #166534;

  /* ── Scales (new) ──────────────────────────────────────────────
     index.html alone shipped 19 distinct font sizes, 10 radii and ad-hoc
     spacing (26/28/32/36/56/68/80px) — i.e. no system at all. These are
     additive: existing rules keep their literal values and are unaffected;
     new and reworked components use the scale. Nothing below 12px, because
     the old 9–10px labels were past comfortable reading size. */
  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-base: 15px;
  --fs-md: 17px;
  --fs-lg: 20px;
  --fs-xl: 26px;
  --fs-2xl: clamp(28px, 3.4vw, 38px);
  --fs-3xl: clamp(36px, 5vw, 56px);

  --lh-tight: 1.15;
  --lh-snug: 1.35;
  --lh-normal: 1.6;

  /* 4px base */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-24: 96px;

  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-pill: 999px;
}

/* ── RESET ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
:target { scroll-margin-top: 70px; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--t);
  line-height: 1.6;
  min-height: 100vh;
  transition: background .28s ease, color .28s ease;
}
a { text-decoration: none; color: inherit; }
input, select, textarea, button { font-family: var(--font); }
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--l2); border-radius: 3px; }

/* ── LOADER ── */
/* supports: .loader (index/pricing) and .pageLoader (app/korkortet) */
.loader, .pageLoader {
  position: fixed; inset: 0; z-index: 12000;
  display: grid; place-items: center;
  background: var(--bg);
  transition: opacity .3s ease, visibility .3s ease;
}
.loader.out,
.pageLoader.done,
.pageLoader.hide { opacity: 0; visibility: hidden; pointer-events: none; }

/* supports: .lOrb (index/pricing) and .loaderOrb (app/korkortet) */
.lOrb, .loaderOrb {
  width: 52px; height: 52px; border-radius: 50%;
  position: relative; border: 1px solid var(--l2);
}
.lOrb::before, .loaderOrb::before {
  content: "";
  position: absolute; inset: -6px; border-radius: 50%;
  border: 2px solid transparent;
  border-top-color: var(--a);
  border-right-color: rgba(0,183,217,.3);
  animation: spin .9s linear infinite;
}
.lTxt, .loaderText {
  margin-top: 14px;
  font-family: var(--mono); font-size: 11px; font-weight: 500;
  color: var(--t3); letter-spacing: .12em; text-transform: uppercase;
  text-align: center;
}
/* Laddarens ExGen-logotyp — ersätter den tidigare versaliserade texten "ExGen",
   så laddaren och intro-splashen visar samma märke. Höjden matchar splashens
   #piName-skala nedskalad; logotypen är en teal→grön gradient på transparent
   och sitter mot --bg (vitt) precis som i sidhuvudet. */
.lLogo {
  margin-top: 16px;
  height: 22px; width: auto; display: block;
}
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0,183,217,.4); }
  50%       { box-shadow: 0 0 0 7px rgba(0,183,217,0); }
}
@keyframes glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0,183,217,0); }
  50%       { box-shadow: 0 0 0 5px rgba(0,183,217,.1); }
}
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}

/* ── HEADER ── */
/* Gäller den GAMLA headern (.hWrap), som bara admin.html har kvar. Selektorn
   var tidigare bara `header`, alltså elementet, och träffade därför också den
   nya .xg-header på alla övriga sidor. Två mätbara följder:

     1. display:flex gjorde .xg-header-wrap till ett flex-item med
        flex:0 1 auto, så dess max-width:1080px aldrig fylldes. Headern blev
        770 px bred mitt på en 1080 px sida — märket hamnade på x=359 medan
        korten började på x=202 och h1 på x=130. Tre vänsterkanter på en sida.
     2. height:58px låste headern och åsidosatte .xg-header-wrap egen padding.

   :not(.xg-header) i stället för att flytta reglerna, eftersom admin.html
   fortfarande bygger på .hWrap och inget annat här ska ändras för den. */
header:not(.xg-header) {
  height: 58px; position: sticky; top: 0; z-index: 3000;
  /* Was rgba(243,248,245,.92) — a green-tinted white left over from the
     pre-ExGen ProviaAI palette, missed by the earlier colour purge because
     it is an rgba() triplet rather than one of the hex values that sweep
     searched for. Now a neutral translucent white matching --s. */
  background: rgba(255,255,255,.86);
  backdrop-filter: blur(18px) saturate(160%);
  border-bottom: 1px solid var(--l2);
  display: flex; align-items: center;
  transition: background .28s ease, border-color .28s ease;
}

.hWrap {
  max-width: var(--max); width: 100%; margin: 0 auto;
  padding: 0 22px;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.brand { display: flex; align-items: center; gap: 10px; }
.brand img { height: 30px; width: auto; display: block; }

/* ExGen brand mark — CSS-only gradient badge, extended here (style.css
   loads on every page) so every remaining spot that used the old raster
   proviaai-logo.png (splash screen, login overlays, admin/legal-page
   headers) shows the actual ExGen gradient instead
   of the pre-rebrand icon. Size via inline style="--em:NNpx"; content is
   always the literal text "Ex". Decorative — pair with aria-hidden="true"
   wherever adjacent visible text already names the brand. */
.exgenMark {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: var(--em, 30px); height: var(--em, 30px); border-radius: 26%;
  background: linear-gradient(110deg, #00B7D9 0%, #28C3B5 48%, #76D76A 100%);
  color: #0E1B2A; font: 700 calc(var(--em, 30px) * .44) / 1 'DM Sans', sans-serif;
  letter-spacing: -.03em;
}

/* supports: .bName/.bTag (index/pricing) and .brandName/.brandTag (app/korkortet) */
.bName, .brandName {
  font-weight: 700; font-size: 15px; color: var(--t);
  letter-spacing: -.02em; line-height: 1;
  transition: color .28s ease;
}
.bTag, .brandTag {
  font-family: var(--mono); font-size: 9.5px; color: var(--t3);
  letter-spacing: .1em; text-transform: uppercase;
  margin-top: 2px; line-height: 1;
  transition: color .28s ease;
}
/* supports: .hR (index/pricing) and .hRight (app/korkortet) */
.hR, .hRight { display: flex; align-items: center; gap: 6px; }

/* ── AI STATUS ── */
/* .aiDot = the container pill (index/pricing); .aiStatus = the container (pricing alt) */
.aiDot {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 0 10px; height: 30px;
  font-family: var(--mono); font-size: 10.5px; color: var(--t3);
  border: 1px solid var(--l); border-radius: var(--r); background: transparent;
}
/* the pulsing dot inside the pill */
.dot, .aiStatus .aiDot {
  width: 5px; height: 5px; border-radius: 50%; background: var(--a);
  box-shadow: 0 0 0 0 rgba(0,183,217,.4);
  animation: pulse 2s ease infinite;
}
/* pricing uses .aiStatus as the pill and .aiDot as the inner dot */
.aiStatus {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 0 10px; height: 30px;
  font-family: var(--mono); font-size: 10.5px; color: var(--t3);
  border: 1px solid var(--l); border-radius: var(--r); background: transparent;
}
.aiStatus .aiDot {
  display: block; padding: 0; height: auto; border: none;
  width: 5px; border-radius: 50%; background: var(--a);
  animation: pulse 2s ease infinite;
}

/* ── BUTTONS ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 0 15px; height: 38px;
  font-family: var(--font); font-weight: 600; font-size: 14px;
  border: 1px solid var(--l); border-radius: var(--r);
  background: var(--s2); color: var(--t);
  cursor: pointer; white-space: nowrap;
  transition: box-shadow .15s ease, border-color .15s ease, background .28s ease, color .28s ease;
}
.btn:hover { box-shadow: var(--sh); border-color: var(--l2); }
.btn:active { transform: scale(.98); }
.btn:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }
.btn:focus-visible { outline: 2px solid var(--a); outline-offset: 2px; }
.btnP { background: var(--a); color: #fff; border-color: var(--a); font-weight: 700; }
.btnP:hover { background: var(--a2); border-color: var(--a2); }
.btnG { background: transparent; border-color: rgba(0,183,217,.18); }
.btnG:hover { background: var(--a-dim); border-color: var(--l2); }

/* Bigger touch targets on mobile */
@media (max-width: 768px) {
  .btn { min-height: 44px; }
}

/* Hide brand tag on small screens to save header space */
@media (max-width: 640px) { .bTag, .brandTag { display: none; } }

/* ── MENY — bara korkortet.html ──
   Huvudet renderas numera av js/exgen-shell.js med klasser i xg-namnrymden,
   och åtta sidor är migrerade. Reglerna nedan står kvar av exakt ett skäl:
   korkortet.html är inte migrerad, eftersom modulen "korkort" är avstängd i
   js/exgen-modules.js och sidan omdirigerar till startsidan.

   Det här är alltså inte dubblering som glömts bort — det är den sista
   användaren av en gammal vokabulär. Halvan som hörde till de migrerade
   sidorna (.mWrap, .mBtn, .bars, .drop, .ddi, .ddi-ico, .dpill) är raderad,
   liksom .mPageTitle, som var stylad och användes på noll sidor. Resten ska
   bort samma dag korkortsmodulen antingen släpps och migreras, eller tas bort.

   .dropdown.open är korkortets egen öppna-klass (korkortet.html:2729). Två
   andra stöddes tidigare samtidigt — .drop.on och .dropdown.is-open — och
   båda är borta med sina sidor. */
.menuWrap { position: relative; z-index: 4000; }
.menuBtn {
  width: 44px; height: 44px; padding: 0;
  display: grid; place-items: center;
  border: 1px solid var(--l); border-radius: var(--r);
  background: transparent; color: var(--t2); cursor: pointer;
  touch-action: manipulation; user-select: none;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.menuBtn:hover { border-color: var(--l2); background: var(--a-dim); color: var(--t); }
.menuBtn:focus-visible { outline: 2px solid var(--a); outline-offset: 2px; }
.barsIcon { display: grid; gap: 3.5px; width: 16px; }
.barsIcon span { display: block; height: 1.5px; background: currentColor; border-radius: 1px; }
.dropdown {
  position: absolute; right: 0; top: calc(100% + 8px); min-width: 240px;
  background: var(--s); border: 1px solid var(--l2); border-radius: 14px;
  /* Ja, 50 % svart på en vit sida — en rest från ett mörkt tema. Den lagas
     inte här: korkortet.html är utanför den här omgången, och att ändra hur
     dess meny ser ut vore en ändring ingen bett om på en sida som just nu
     omdirigerar. Tas när modulen släpps. */
  box-shadow: 0 16px 48px rgba(0,0,0,.5); padding: 6px;
  display: none; opacity: 0; transform: translateY(-5px) scale(.99); z-index: 5000;
}
.dropdown.open { display: block; opacity: 1; transform: none; animation: fadeIn .15s ease; }
.ddItem {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 11px 14px; min-height: 46px; border-radius: 8px; border: 1px solid transparent;
  background: transparent; cursor: pointer;
  font-family: var(--font); font-weight: 500; font-size: 13px;
  color: var(--t2); text-align: left;
  transition: background .12s, border-color .12s, color .12s;
}
.ddItem:hover { background: var(--a-dim); border-color: var(--l); color: var(--t); }
.ddItem:focus-visible { outline: 2px solid var(--a); outline-offset: 1px; }
.ddItem .ddi-ico { font-size: 16px; flex-shrink: 0; width: 24px; text-align: center; line-height: 1; }
.ddItem .ddi-ico + span { flex: 1; }
.menuBtn.open { border-color: var(--a); background: var(--a-dim); color: var(--a); }

.ddPill {
  font-family: var(--mono); font-size: 10px; font-weight: 500;
  color: var(--t3); letter-spacing: .06em;
  border: 1px solid var(--l); border-radius: var(--r2); padding: 2px 7px;
}
.ddPill.hi { color: var(--a); border-color: var(--l2); background: rgba(0,183,217,.08); }
.ddSep { height: 1px; background: var(--l); margin: 4px 2px; }

/* ── LAYOUT ── */
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 22px; }
main.wrap { padding-top: 32px; padding-bottom: 32px; }

/* ── EYEBROW ── */
.eyebrow {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 11px; font-weight: 500;
  color: var(--a); letter-spacing: .12em; text-transform: uppercase; margin-bottom: 12px;
}
.eyebrow::before {
  content: ""; width: 24px; height: 1.5px;
  background: var(--a); border-radius: 1px; flex-shrink: 0;
}

/* ── PAGE TITLE ── */
.heroTitle, .pageTitle {
  font-weight: 700; font-size: clamp(22px, 3.5vw, 38px);
  letter-spacing: -.035em; line-height: 1.1; color: var(--t); margin-bottom: 10px;
}
.heroTitle em, .pageTitle em { font-style: normal; color: var(--a); }

/* ── BADGE ── */
.badge {
  font-family: var(--mono); font-size: 9.5px; font-weight: 500;
  color: var(--t3); letter-spacing: .05em;
  border: 1px solid var(--l); border-radius: var(--r2); padding: 3px 8px;
  background: var(--s2);
}

/* ── FORM ELEMENTS ── */
.fieldLabel {
  display: block;
  font-family: var(--mono); font-size: 11px; font-weight: 500;
  color: var(--t3); letter-spacing: .08em; text-transform: uppercase;
  margin-bottom: 7px;
}
select,
input[type="text"],
input[type="email"],
input[type="password"],
textarea {
  width: 100%; padding: 10px 12px;
  border: 1px solid var(--l); border-radius: var(--r);
  background: var(--s2); color: var(--t);
  font-family: var(--font); font-size: 13.5px;
  outline: none;
  transition: border-color .16s ease, background .28s ease, color .28s ease, box-shadow .16s ease;
}
select:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
textarea:focus { border-color: var(--l2); box-shadow: 0 0 0 3px rgba(0,183,217,.08); }
textarea { min-height: 160px; resize: vertical; line-height: 1.6; }
select option { background: var(--s); color: var(--t); }

/* ── GRID ── */
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 540px) { .grid2 { grid-template-columns: 1fr; } }

/* ── STATUS TEXT ── */
.stxt {
  font-family: var(--mono); font-size: 11.5px; font-weight: 400;
  color: var(--t3); margin-top: 8px; line-height: 1.5; word-break: break-word;
}
.stxt.ok { color: var(--ok); }
.stxt.bad { color: var(--danger); }
.stxt.warn { color: var(--warn); }

/* ── SPINNER ── */
.spinner {
  width: 14px; height: 14px; border-radius: 50%;
  border: 1.5px solid rgba(0,183,217,.15); border-top-color: var(--a);
  animation: spin .7s linear infinite; flex-shrink: 0;
}

/* ── LOGIN ── */
/* The .loginOverlay/.loginCard/.authBlock rules that lived here styled the
   per-page inline login forms in app.html, förbättring.html and
   korkortet.html. Those were removed in favour of the single shared dialog
   in shared.js, which carries its own styles, so nothing referenced these
   any more. */

/* ── QUOTA BANNER ── */
.quotaBanner {
  display: none;
  align-items: center; justify-content: space-between; gap: 12px;
  border: 1px solid var(--l2); border-radius: var(--r);
  background: rgba(0,183,217,.05);
  padding: 10px 14px; margin-bottom: 16px; flex-wrap: wrap;
}
.quotaBanner.show { display: flex; }
.quotaBannerTxt { font-family: var(--mono); font-size: 11.5px; color: var(--t2); line-height: 1.4; }
.quotaBannerTxt strong { color: var(--a); }
.quotaBannerLink {
  font-family: var(--mono); font-size: 11px; font-weight: 500;
  color: var(--a); border-bottom: 1px solid rgba(0,183,217,.3); white-space: nowrap;
}
.quotaBannerLink:hover { border-bottom-color: var(--a); }

/* ── TOAST ── */
#toastRoot {
  position: fixed; top: 70px; right: 16px; z-index: 9500;
  display: flex; flex-direction: column; align-items: flex-end; gap: 8px; pointer-events: none;
}
.toast {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 16px; border-radius: var(--r);
  background: var(--s); border: 1px solid var(--l2);
  font-family: var(--mono); font-size: 12px; font-weight: 500; color: var(--t2);
  box-shadow: var(--sh2); pointer-events: auto; cursor: pointer;
  animation: toastIn .22s cubic-bezier(.22,.61,.36,1) forwards;
  max-width: min(320px, calc(100vw - 32px));
}
.toast.ok  { border-color: rgba(0,183,217,.38); color: var(--a); }
.toast.bad { border-color: rgba(255,107,107,.35); color: #ff8484; }
.toast.out { animation: toastOut .18s ease forwards; }
@keyframes toastIn  { from { opacity: 0; transform: translateY(-10px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes toastOut { to   { opacity: 0; transform: translateY(-6px)  scale(.97); } }

/* ── SCROLL REVEAL ── */
/* supports: .rev/.rev.in (index/pricing) and .reveal/.reveal.in (app/korkortet) */
.rev, .reveal {
  opacity: 0; transform: translateY(12px);
  transition: opacity .26s ease, transform .26s cubic-bezier(.22,.61,.36,1);
}
.rev.in, .reveal.in { opacity: 1; transform: none; }
.rev.d1, .reveal.d1 { transition-delay: .07s; }
.rev.d2, .reveal.d2 { transition-delay: .14s; }
.rev.d3, .reveal.d3 { transition-delay: .21s; }

/* ── DESKTOP NAV LINKS ── */
.hNav { display: flex; align-items: center; gap: 2px; }
@media (max-width: 720px) { .hNav { display: none; } }
.hNavLink {
  padding: 0 14px; height: 36px;
  display: inline-flex; align-items: center;
  font-size: 13.5px; font-weight: 500; color: var(--t2);
  border-radius: var(--r);
  transition: color .15s ease, background .15s ease;
  white-space: nowrap;
}
.hNavLink:hover { color: var(--t); background: var(--a-dim); }
.hNavLink.active { color: var(--a); font-weight: 600; background: var(--a-dim); }
.hNavLink:focus-visible { outline: 2px solid var(--a); outline-offset: 2px; }

/* ── ACTIVE DROPDOWN ITEM ── */
.ddItem.active {
  background: var(--a-dim);
  color: var(--a);
  border-color: var(--l2);
}

/* ── FOOTER ── */
footer {
  border-top: 1px solid var(--l); padding: 20px 22px; text-align: center;
  font-family: var(--mono); font-size: 11px; color: var(--t3); letter-spacing: .04em;
  transition: border-color .28s ease, color .28s ease;
}
.fLink { color: var(--t2); transition: color .15s ease; }
.fLink:hover { color: var(--a); }
.fLink:focus-visible { outline: 2px solid var(--a); outline-offset: 2px; border-radius: 2px; }

/* ── SKIP LINK ── */
.skip-link {
  position: absolute; left: -9999px; top: 6px;
  background: var(--a); color: #fff;
  padding: 8px 16px; border-radius: var(--r);
  font-family: var(--font); font-weight: 700; font-size: 14px;
  z-index: 99999; white-space: nowrap;
  transition: none;
}
.skip-link:focus { left: 6px; }

/* ── VISITOR BOTTOM NAV — compact floating pill ── */
@keyframes navSlideUp {
  from { opacity: 0; transform: translateX(-50%) translateY(16px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
@keyframes navSlideDown {
  to { opacity: 0; transform: translateX(-50%) translateY(16px); }
}
/* visitorNav removed — bottom tab bar no longer used */
.visitorNav { display: none !important; }

/* ── REDUCED MOTION ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .rev, .reveal { opacity: 1; transform: none; }
}

/* ── PAGE EXIT TRANSITION ── */
body.pg-leaving {
  animation: pgFadeOut .2s ease forwards;
  pointer-events: none;
}
@keyframes pgFadeOut {
  to { opacity: 0; transform: translateY(-3px); }
}

/* ── WELCOME ANIMATION ── */
.welcomeAnim {
  position: fixed; inset: 0; z-index: 19000;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg); pointer-events: none;
  animation: wlcIn .3s cubic-bezier(.22,.61,.36,1) forwards;
}
.welcomeAnim.out { animation: wlcOut .45s cubic-bezier(.22,.61,.36,1) forwards; }
.welcomeInner { display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; }
.welcomeOrb {
  width: 60px; height: 60px; border-radius: 50%; flex-shrink: 0;
  border: 1px solid var(--l2);
  background: radial-gradient(circle at 38% 33%, rgba(0,183,217,.16), transparent 68%);
  box-shadow: 0 0 24px rgba(0,183,217,.16), inset 0 0 16px rgba(0,183,217,.05);
  animation: wlcOrbPulse 2s ease-in-out infinite;
}
.welcomeHi {
  font-family: var(--mono); font-size: 11px; font-weight: 500;
  color: var(--t3); letter-spacing: .12em; text-transform: uppercase;
  margin-bottom: 6px;
}
.welcomeName {
  font-weight: 700; font-size: clamp(22px, 3vw, 32px);
  letter-spacing: -.035em; line-height: 1.1; color: var(--t);
  animation: wlcNameIn .4s .12s cubic-bezier(.22,.61,.36,1) both;
}
@keyframes wlcIn  { from { opacity: 0; } to { opacity: 1; } }
@keyframes wlcOut { from { opacity: 1; } to { opacity: 0; transform: scale(1.02); } }
@keyframes wlcOrbPulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 24px rgba(0,183,217,.16), inset 0 0 16px rgba(0,183,217,.05); }
  50%       { transform: scale(1.06); box-shadow: 0 0 36px rgba(0,183,217,.26), inset 0 0 22px rgba(0,183,217,.08); }
}
@keyframes wlcNameIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* ── FÖRBÄTTRING HEADER COMPATIBILITY ── */
/* .topbar mirrors .hWrap; .bname/.btag mirror .bName/.bTag */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; height: 56px;
}
.bname { font-weight: 700; font-size: 15px; color: var(--t); letter-spacing: -.02em; line-height: 1; transition: color .28s ease; }
.btag  { font-family: var(--mono); font-size: 9.5px; color: var(--t3); letter-spacing: .1em; text-transform: uppercase; margin-top: 2px; line-height: 1; transition: color .28s ease; }
.hActions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.iconBtn {
  width: 44px; height: 44px; padding: 0;
  display: grid; place-items: center;
  border: 1px solid var(--l); border-radius: var(--r);
  background: transparent; color: var(--t2); cursor: pointer;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.iconBtn:hover { border-color: var(--l2); background: var(--a-dim); color: var(--t); }
.statusText { font-family: var(--mono); font-size: 11.5px; color: var(--t3); margin-bottom: 8px; }

/* ── MOBILE HEADER TWEAKS ── */
@media (max-width: 500px) {
  .bTag, .brandTag, .btag { display: none; }
  .aiDot, .aiStatus { display: none; }
  .hWrap { padding: 0 14px; }
}

/* ── DESKTOP hNAV UNDERLINE HOVER ── */
.hNavLink { position: relative; }
.hNavLink::after {
  content: '';
  position: absolute;
  bottom: 4px; left: 14px; right: 14px;
  height: 2px;
  background: var(--a);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .22s cubic-bezier(.22,.61,.36,1);
}
.hNavLink:hover::after, .hNavLink.active::after { transform: scaleX(1); }

/* ── HEADER SCROLL COMPRESS ── */
header { transition: box-shadow .2s ease; }
/* Kvar från det mörka temat: en nästan svart 24px-skugga. Under en vit header
   läser den som smuts. Scopad till den gamla headern; .xg-header får sin egen
   i exgen-shell.css. */
header.scrolled:not(.xg-header) {
  box-shadow: 0 2px 24px rgba(0,0,0,.35);
}
header.scrolled .hWrap { height: 48px; }

/* ── SECTION DIVIDER ── */
.sec-divider {
  border: none;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0,183,217,.18), transparent);
  margin: 4rem 0;
}

/* ── SCROLL REVEAL ── */
.rev, .reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .5s ease, transform .5s ease;
}
.rev.rev-visible, .reveal.rev-visible { opacity: 1; transform: none; }
/* Stagger delays */
.rev.d1, .reveal.d1 { transition-delay: .07s; }
.rev.d2, .reveal.d2 { transition-delay: .14s; }
.rev.d3, .reveal.d3 { transition-delay: .21s; }
.rev.d4, .reveal.d4 { transition-delay: .28s; }
.rev.d5, .reveal.d5 { transition-delay: .35s; }

/* ── MOBILE HEADER POLISH ── */
@media (max-width: 480px) {
  .hHeader { padding: 0 14px; }
  .hBrand { gap: 6px; }
  .brandName { font-size: 15px; }
}

/* ── MOBILE HERO PREVIEW ── */
.mobileHeroPreview {
  display: none;
  width: 100%; max-width: 340px;
  margin: 28px auto 0;
}
@media (max-width: 919px) { .mobileHeroPreview { display: block; } }
.mhpCard {
  background: var(--s);
  border: 1px solid var(--l2);
  border-radius: 14px;
  padding: 16px 18px;
  box-shadow: 0 4px 16px rgba(0,0,0,.09);
}
.mhpTop {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 12px;
}
.mhpBar { flex: 1; height: 3px; border-radius: 999px; background: var(--l); overflow: hidden; }
.mhpFill { height: 100%; width: 55%; background: var(--a); border-radius: 999px; }
.mhpLbl { font-family: var(--mono); font-size: var(--fs-xs); color: var(--t3); white-space: nowrap; }
.mhpQ { font-size: var(--fs-sm); font-weight: 600; color: var(--t); line-height: var(--lh-snug); margin-bottom: var(--sp-3); }
.mhpOpts { display: flex; flex-direction: column; gap: 5px; margin-bottom: 10px; }
.mhpOpt {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px; border-radius: 7px;
  border: 1px solid var(--l); background: var(--s2);
  font-size: var(--fs-sm); color: var(--t2);
}
.mhpOpt.mhpOk {
  border-color: var(--a); background: rgba(0,183,217,.09); color: var(--t);
}
.mhpLetter {
  width: 18px; height: 18px; border-radius: 3px; flex-shrink: 0;
  display: grid; place-items: center;
  font-family: var(--mono); font-size: 10px; font-weight: 600;
  background: var(--s); border: 1px solid var(--l2); color: var(--t3);
}
.mhpOpt.mhpOk .mhpLetter { background: var(--a); border-color: var(--a); color: #fff; }
.mhpExpl {
  font-size: var(--fs-xs); color: var(--t2); line-height: var(--lh-normal);
  border: 1px solid var(--l2); background: var(--s2);
  border-radius: var(--r-sm); padding: 10px 12px;
}
.mhpExplTag {
  font-family: var(--font); font-size: var(--fs-xs); font-weight: 600; color: var(--a);
  letter-spacing: 0; display: block; margin-bottom: 4px;
}

/* ── CARD HOVER GLOW (enhanced) ── */
.feat, .sCard, .featureCard {
  transition: border-color .22s ease, transform .22s cubic-bezier(.22,.61,.36,1), box-shadow .22s ease;
}
.feat:hover, .sCard:hover, .featureCard:hover {
  box-shadow: 0 0 40px rgba(0,183,217,.08);
}

/* ── DESIGN SYSTEM — Linear/Vercel-inspired improvements ── */

/* Stronger top-glow on important cards */
.feat::before, .sCard::before {
  content: ""; position: absolute; top: 0; left: 10%; right: 10%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0,183,217,.45), transparent);
  opacity: 0; transition: opacity .22s ease;
}
.feat:hover::before, .sCard:hover::before { opacity: 1; }

/* Section divider accent line */
.secAccentLine {
  width: 32px; height: 2px; border-radius: 1px;
  background: var(--a); margin: 0 auto 12px;
  opacity: .6;
}

/* Better mobile section spacing */
@media (max-width: 719px) {
  .wrap { padding: 0 16px; }
  footer { padding: 16px; }
}

/* Smoother hNav active underline (Linear-style) */
.hNavLink.active::after {
  content: ""; display: block; position: absolute;
  bottom: -1px; left: 14px; right: 14px; height: 1.5px;
  background: var(--a); border-radius: 1px;
  animation: navUnderIn .2s cubic-bezier(.22,.61,.36,1) forwards;
}
.hNavLink { position: relative; }
@keyframes navUnderIn { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* Mobile hero preview: subtle float animation */
.mhpCard {
  animation: mhpFloat 5s 1.2s ease-in-out infinite;
}
@keyframes mhpFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}
@media (prefers-reduced-motion: reduce) { .mhpCard { animation: none; } }