/* ==========================================================================
   Marora - AI-systemet för marknadsavdelningar
   Designsystem: harmony.ai (rundade block, prickmönster, pill-knappar)
   blandat med legora.com (hallonröd + ljusrosa, off-white editorial, full-bredd hero, centrerad
   ordbild, ↳-länkar, lagrade plattor, stora siffror, gigantisk ordbild).
   Radie-regel: knappar = pill, kort/bilder = 20px, fält = 12px.
   ========================================================================== */

:root {
  --bg: #fbf7fa;
  --surface: #f6eef4;
  --surface-2: #efe2ea;
  --pink: #ffd6ef;
  --plum: #a8386f;
  --plum-deep: #7d1f4a;
  --ink: #1e1119;
  --muted: #6e6170;
  --line: rgba(30, 17, 25, 0.10);
  --line-strong: rgba(30, 17, 25, 0.18);
  --pill: rgba(90, 28, 60, 0.07);

  --btn-bg: var(--plum-deep);
  --btn-fg: #ffffff;
  --btn-soft-bg: var(--pink);
  --btn-soft-fg: var(--plum-deep);

  --nav-bg: rgba(251, 247, 250, 0.86);
  --card-bg: #ffffff;
  --shadow: 0 20px 60px rgba(90, 28, 60, 0.10), 0 1px 2px rgba(90, 28, 60, 0.06);
  --accent-text: #7d1f4a;

  --r-card: 20px;
  --r-input: 12px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --font: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #160a14; --surface: #231220; --surface-2: #2c1728; --pink: #4a1a3a;
    --plum: #e07bb0; --plum-deep: #3a0a2a; --ink: #faeef0; --muted: #c0a4aa;
    --line: rgba(255, 214, 239, 0.12); --line-strong: rgba(255, 214, 239, 0.22); --pill: rgba(255, 214, 239, 0.08);
    --btn-bg: #ffd6ef; --btn-fg: #3a0a2a; --btn-soft-bg: #4a1a3a; --btn-soft-fg: #ffd6ef;
    --nav-bg: rgba(22, 10, 20, 0.82); --card-bg: #231220;
    --shadow: 0 20px 60px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.4); --accent-text: #ffb6dc;
  }
}
:root[data-theme="dark"] {
  --bg: #160a14; --surface: #231220; --surface-2: #2c1728; --pink: #4a1a3a;
  --plum: #e07bb0; --plum-deep: #3a0a2a; --ink: #faeef0; --muted: #c0a4aa;
  --line: rgba(255, 214, 239, 0.12); --line-strong: rgba(255, 214, 239, 0.22); --pill: rgba(255, 214, 239, 0.08);
  --btn-bg: #ffd6ef; --btn-fg: #3a0a2a; --btn-soft-bg: #4a1a3a; --btn-soft-fg: #ffd6ef;
  --nav-bg: rgba(22, 10, 20, 0.82); --card-bg: #231220;
  --shadow: 0 20px 60px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.4); --accent-text: #ffb6dc;
}

/* ---------- Bas ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; font-family: var(--font); font-size: 17px; line-height: 1.55;
  color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
h1, h2, h3, h4, p { margin: 0; }
h1, h2, h3 { font-weight: 400; letter-spacing: -0.02em; line-height: 1.05; text-wrap: balance; }
h1 { font-size: clamp(2.6rem, 5.6vw, 4.4rem); letter-spacing: -0.025em; line-height: 1.02; }
h2 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); }
h3 { font-size: clamp(1.3rem, 1.9vw, 1.6rem); letter-spacing: -0.015em; }
.lede { color: var(--muted); font-size: 1.08rem; max-width: 56ch; text-wrap: pretty; }
:focus-visible { outline: 2px solid var(--plum); outline-offset: 3px; border-radius: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.container { width: min(1320px, 100% - 2rem); margin-inline: auto; }
@media (min-width: 768px) { .container { width: min(1320px, 100% - 4rem); } }

section { padding-block: clamp(4.5rem, 9vw, 8rem); }
.section-head { max-width: 46rem; margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.section-head .lede { margin-top: 1rem; }
.section-head.centered { text-align: center; margin-inline: auto; }
.section-head.centered .lede { margin-inline: auto; }
.eyebrow { display: inline-block; font-size: 0.8rem; letter-spacing: 0.04em; color: var(--muted); margin-bottom: 0.9rem; }

/* ↳-länk (legora) */
.link-more { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 1.15rem; color: var(--muted); margin-top: 0.75rem; transition: color 0.2s; }
.link-more .ph { font-size: 1.25em; }
.link-more:hover { color: var(--ink); }
.on-dark .link-more { color: rgba(255, 255, 255, 0.7); }
.on-dark .link-more:hover { color: #fff; }

/* ---------- Knappar ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 0.55rem; padding: 0.75rem 1.3rem; border-radius: 999px;
  border: 1px solid transparent; font-size: 0.98rem; font-weight: 500; line-height: 1; white-space: nowrap;
  transition: transform 0.25s var(--ease), background-color 0.25s var(--ease), box-shadow 0.25s var(--ease), color 0.25s;
}
.btn:active { transform: scale(0.97); }
.btn-primary { background: var(--btn-bg); color: var(--btn-fg); }
.btn-primary:hover { box-shadow: 0 10px 30px rgba(90, 28, 60, 0.25); transform: translateY(-1px); }
.btn-light { background: #fff; color: var(--plum-deep); }
.btn-light:hover { transform: translateY(-1px); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn-ghost:hover { background: var(--surface); }
.btn-lg { padding: 0.95rem 1.5rem; font-size: 1.05rem; }
.btn .ph { font-size: 1.15em; }
.icon-circle {
  display: inline-grid; place-items: center; width: 1.55rem; height: 1.55rem; border-radius: 50%;
  margin-right: -0.45rem; transition: transform 0.3s var(--ease);
}
.btn:hover .icon-circle { transform: translateX(3px); }
.btn-primary .icon-circle { background: var(--pink); color: #7d1f4a; }
.btn-light .icon-circle { background: var(--pink); }
:root[data-theme="dark"] .btn-primary .icon-circle { background: rgba(58, 10, 42, 0.12); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .btn-primary .icon-circle { background: rgba(58, 10, 42, 0.12); } }

/* ---------- Annonsrad (legora) ---------- */
.announce {
  background: var(--plum-deep); color: #fff; font-size: 0.85rem; text-align: center; padding: 0.55rem 3rem;
  position: relative;
}
.announce a { display: inline-flex; align-items: center; gap: 0.35rem; margin-left: 0.5rem; color: #ffd6ef; }
.announce a:hover { color: #fff; }
.announce[hidden] { display: none; }
.announce-close { position: absolute; right: 0.75rem; top: 50%; transform: translateY(-50%); background: transparent; border: 0; color: rgba(255, 255, 255, 0.7); display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; }
.announce-close:hover { color: #fff; background: rgba(255, 255, 255, 0.1); }

/* ---------- Navigation (full bredd, centrerad ordbild) ---------- */
.nav-sentinel { position: absolute; top: 160px; height: 1px; width: 1px; }
.nav {
  position: sticky; top: 0; z-index: 50; color: var(--ink); background: var(--bg);
  transition: background-color 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.nav.is-scrolled, .nav.is-open { color: var(--ink); background: var(--nav-bg); -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%); box-shadow: 0 1px 0 var(--line); }
.nav-inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 64px; gap: 1rem; }
.nav-links { display: none; gap: 1.5rem; list-style: none; margin: 0; padding: 0; justify-self: start; }
.nav-links a { font-size: 0.95rem; opacity: 0.78; transition: opacity 0.2s; }
.nav-links a:hover { opacity: 1; }
.brand { display: inline-flex; align-items: center; gap: 0.55rem; font-weight: 600; font-size: 1.25rem; letter-spacing: 0.08em; text-transform: uppercase; justify-self: center; }
.brand img { display: block; height: 26px; width: auto; }
.brand .logo-light { display: none; }
[data-theme="dark"] .brand .logo-dark, .scroll-dark .brand .logo-dark { display: none; }
[data-theme="dark"] .brand .logo-light, .scroll-dark .brand .logo-light { display: block; }
.footer .brand img { height: 30px; }
@media (max-width: 767px) { .brand img { height: 22px; } }
.brand-mark { position: relative; width: 26px; height: 18px; }
.brand-mark::before, .brand-mark::after { content: ""; position: absolute; top: 0; width: 18px; height: 18px; border-radius: 50%; background: currentColor; }
.brand-mark::after { left: 8px; opacity: 0.55; }
.nav-actions { display: flex; align-items: center; gap: 0.5rem; justify-self: end; }
.nav-login { display: none; font-size: 0.95rem; padding: 0.6rem 0.9rem; opacity: 0.78; }
.nav-login:hover { opacity: 1; }
.nav .btn { padding: 0.65rem 1rem; font-size: 0.9rem; }
.nav-toggle { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: transparent; border: 0; font-size: 1.3rem; }
@media (min-width: 1024px) { .nav-links { display: flex; } .nav-login { display: inline-flex; } .nav-toggle { display: none; } }
@media (max-width: 1023px) { .nav-inner { grid-template-columns: auto 1fr auto; } .brand { justify-self: start; } .nav .btn-primary { display: none; } }
.nav-mobile { display: none; padding: 0.5rem 0 1.25rem; }
.nav-mobile[data-open="true"] { display: block; }
.nav-mobile ul { list-style: none; margin: 0; padding: 0; }
.nav-mobile a { display: block; padding: 0.8rem 0; border-top: 1px solid var(--line); font-size: 1.05rem; }
.nav-mobile .btn { display: inline-flex; margin-top: 1rem; border: 0; }
@media (min-width: 1024px) { .nav-mobile { display: none !important; } }

/* ---------- Hero (centrerad, harmony) ---------- */
.hero { padding-top: clamp(3rem, 7vw, 5.5rem); padding-bottom: 0; text-align: center; }
.hero h1 { max-width: 18ch; margin-inline: auto; }
.hero .lede { margin: 1.4rem auto 0; font-size: clamp(1.05rem, 1.4vw, 1.25rem); }
.hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; margin-top: 2rem; }
.hero-anim { opacity: 0; transform: translateY(18px); animation: rise 0.9s var(--ease) forwards; }
.hero-anim:nth-child(2) { animation-delay: 0.1s; }
.hero-anim:nth-child(3) { animation-delay: 0.2s; }
@keyframes rise { to { opacity: 1; transform: none; } }
.hero-media {
  position: relative; margin-top: clamp(2.5rem, 6vw, 4.5rem); border-radius: var(--r-card); overflow: hidden;
  background: var(--plum-deep); opacity: 0; animation: rise 1s var(--ease) 0.3s forwards;
}
.hero-media img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: 86% center; }
.hero-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(60, 10, 40, 0) 55%, rgba(60, 10, 40, 0.95) 100%), linear-gradient(90deg, rgba(60, 10, 40, 0.55) 0%, rgba(60, 10, 40, 0.05) 60%); pointer-events: none; }
@media (max-width: 767px) { .hero-media img { aspect-ratio: 4 / 3; } .hero-media::after { display: none; } }
.demo-card { position: relative; z-index: 2; text-align: left; background: var(--plum-deep); color: #fff; padding: 1.5rem 1.25rem 1.75rem; }
@media (min-width: 768px) { .demo-card { position: absolute; left: 1.5rem; bottom: 1.5rem; max-width: 440px; border-radius: 16px; padding: 1.75rem; } }
@media (min-width: 1024px) { .demo-card { left: 2rem; bottom: 2rem; } }
.demo-card h3 { font-size: 1.3rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.demo-card h3 .ph { font-size: 1.5rem; background: var(--pink); color: #7d1f4a; border-radius: 50%; padding: 0.45rem; flex: none; }
.demo-card .field label { color: rgba(255, 255, 255, 0.72); }
.demo-card .field input { color: #fff; border-bottom-color: rgba(255, 255, 255, 0.35); }
.demo-card .field input::placeholder { color: rgba(255, 255, 255, 0.5); opacity: 1; }
.demo-card .field input:focus { border-bottom-color: #ffd6ef; }
.demo-card .field input[aria-invalid="true"] { border-bottom-color: #ff9cc9; }
.demo-card .field .error { color: #ffb6d9; }
.demo-card .form-status { color: rgba(255, 255, 255, 0.85); }

/* ---------- Megameny (legora) ---------- */
.has-menu { position: relative; }
.nav-menu-btn { display: inline-flex; align-items: center; gap: 0.3rem; background: transparent; border: 0; font-size: 0.95rem; opacity: 0.78; padding: 0; color: inherit; }
.nav-menu-btn:hover, .nav-menu-btn[aria-expanded="true"] { opacity: 1; }
.nav-menu-btn .ph { font-size: 0.8rem; transition: transform 0.25s var(--ease); }
.nav-menu-btn[aria-expanded="true"] .ph { transform: rotate(180deg); }
.mega {
  position: absolute; left: -1rem; top: calc(100% + 0.9rem); z-index: 60; min-width: 860px; display: grid; grid-template-columns: 1fr 1fr 1fr 1.1fr; gap: 1.5rem;
  padding: 1.5rem; background: var(--card-bg); color: var(--ink); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow);
  opacity: 0; transform: translateY(-6px); pointer-events: none; transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
}
.mega::before { content: ""; position: absolute; left: 0; right: 0; top: -1rem; height: 1rem; }
.has-menu:hover .mega, .has-menu:focus-within .mega, .has-menu.is-open .mega { opacity: 1; transform: none; pointer-events: auto; }
.mega-col { display: grid; gap: 0.4rem; align-content: start; }
.mega-col h4 { font-size: 0.78rem; font-weight: 500; color: var(--muted); margin-bottom: 0.3rem; }
.mega-col a { display: flex; align-items: center; gap: 0.5rem; font-size: 0.95rem; padding: 0.35rem 0.5rem; margin-left: -0.5rem; border-radius: 8px; opacity: 1; }
.mega-col a:hover { background: var(--surface); }
.mega-col a .ph { color: var(--accent-text); font-size: 1.05rem; }
.mega-feature { display: grid; gap: 0.3rem; align-content: end; padding: 1.1rem; border-radius: 14px; background: var(--plum-deep); color: #fff; position: relative; min-height: 150px; }
.mega-feature span { font-size: 0.78rem; opacity: 0.75; }
.mega-feature strong { font-weight: 500; font-size: 1.15rem; letter-spacing: -0.01em; max-width: 12ch; }
.mega-feature .ph { position: absolute; right: 1rem; bottom: 1rem; font-size: 1.2rem; background: var(--pink); color: #7d1f4a; border-radius: 50%; padding: 0.35rem; }

/* ---------- Full-bredd hero (produktsidan, legora) ---------- */
.page-agenter .nav { color: #fff; background: transparent; }
.page-agenter .nav.is-scrolled, .page-agenter .nav.is-open { color: var(--ink); background: var(--nav-bg); -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%); }
.page-agenter .nav:not(.is-scrolled):not(.is-open) .btn-primary { background: #fff; color: #7d1f4a; }
.page-agenter .nav:not(.is-scrolled):not(.is-open) .mega { color: var(--ink); }
.hero-full { position: relative; padding: 0; min-height: min(88dvh, 860px); display: flex; align-items: flex-end; color: #fff; margin-top: -64px; }
.hero-full .hero-bg { position: absolute; inset: 0; overflow: hidden; }
.hero-full .hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; transform: scale(1.04); animation: hero-zoom 8s var(--ease) forwards; }
@keyframes hero-zoom { to { transform: scale(1); } }
.hero-full .hero-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(60, 10, 40, 0.5) 0%, rgba(60, 10, 40, 0.08) 35%, rgba(60, 10, 40, 0.4) 65%, rgba(60, 10, 40, 0.88) 100%); }
.hero-full-content { position: relative; z-index: 1; padding: 9rem 0 clamp(2.5rem, 6vw, 5rem); }
.hero-full .eyebrow { color: rgba(255, 255, 255, 0.75); display: block; }
.hero-full h1 { max-width: 14ch; font-size: clamp(2.8rem, 6.4vw, 5.2rem); }
.hero-full .hero-row { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin-top: 1.5rem; }
.hero-full .hero-row p { font-size: clamp(1.05rem, 1.4vw, 1.25rem); color: rgba(255, 255, 255, 0.85); max-width: 42ch; }

/* ---------- Produktkort (legora "innovations") ---------- */
.product-grid { display: grid; gap: 1rem; }
@media (min-width: 768px) { .product-grid { grid-template-columns: repeat(3, 1fr); } .product-card--photo { grid-column: span 3; } }
.product-card { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 300px; border-radius: var(--r-card); overflow: hidden; background: var(--surface); border: 1px solid var(--line); padding: 1.75rem; transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease); }
.product-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.product-card--photo { min-height: 420px; color: #fff; border: 0; }
.product-card--photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.product-card--photo:hover img { transform: scale(1.03); }
.product-card--photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(60, 10, 40, 0.92) 0%, rgba(60, 10, 40, 0.55) 45%, rgba(60, 10, 40, 0.1) 100%); }
.product-card.product-card--photo p { color: rgba(255, 255, 255, 0.95); }
@media (max-width: 767px) { .product-card--photo::after { background: linear-gradient(180deg, rgba(60, 10, 40, 0) 25%, rgba(60, 10, 40, 0.92) 100%); } }
.product-card.product-card--photo .link-more { color: rgba(255, 255, 255, 0.9); }
.product-card--plum { background: var(--plum-deep); color: #fff; border: 0; }
.product-card.product-card--plum p { color: rgba(255, 255, 255, 0.95); }
.product-card.product-card--plum .link-more { color: rgba(255, 255, 255, 0.92); }
.product-card--plum .dots { --dot: var(--pink); opacity: 0.07; }
.product-card--pink { background: var(--pink); border: 0; color: #3a0a2a; }
.product-card--pink .dots { --dot: #7d1f4a; opacity: 0.1; }
.product-card.product-card--pink p { color: #3a0a2a; }
.product-body { position: relative; z-index: 1; display: grid; gap: 0.5rem; max-width: 36ch; }
.product-card h3 { font-size: clamp(1.4rem, 2vw, 1.8rem); }
.product-card p { color: var(--muted); font-size: 0.98rem; }
.product-card .link-more { margin-top: 0.4rem; font-size: 1rem; }
.product-card:hover .link-more { color: inherit; }

/* ---------- Branscher som fotokort (legora) ---------- */
.photo-row { display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0.5rem max(1rem, calc((100vw - 1320px) / 2 + 2rem)) 1rem; scrollbar-width: none; }
.photo-row::-webkit-scrollbar { display: none; }
.photo-card { position: relative; flex: 0 0 auto; width: min(68vw, 300px); aspect-ratio: 3 / 4; margin: 0; border-radius: var(--r-card); overflow: hidden; scroll-snap-align: start; background: var(--surface); }
@media (min-width: 1024px) { .photo-card:nth-child(even) { margin-top: 2.5rem; } }
.photo-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.photo-card:hover img { transform: scale(1.04); }
.photo-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(60, 10, 40, 0.55) 0%, rgba(60, 10, 40, 0) 45%); }
.photo-card figcaption { position: absolute; top: 1.1rem; left: 1.2rem; z-index: 1; color: #fff; font-size: 1.05rem; font-weight: 500; }

/* ---------- Scrollstyrd lagersektion (produktsidan) ---------- */
@media (min-width: 1024px) {
  .scrolly { position: relative; min-height: 440vh; }
  .scrolly-sticky { position: sticky; top: 6rem; }
  .scrolly-steps { position: absolute; inset: 0; pointer-events: none; display: grid; grid-auto-rows: 1fr; }
}
@media (max-width: 1023px) { .scrolly-steps { display: none; } }

/* ---------- Agentsektioner (produktsidan) ---------- */
.agent { padding-block: clamp(3.5rem, 7vw, 6rem); }
.agent + .agent { padding-top: 0; }
.agent-step { font-size: 0.8rem; color: var(--accent-text); letter-spacing: 0.04em; margin-bottom: 0.75rem; }
.feature-panel.is-static { display: grid; }
@media (min-width: 1024px) { .agent--flip .feature-panel > .feature-text { order: 2; } }
.kanaler { background: var(--surface); }
.duo { display: grid; gap: 2rem; }
@media (min-width: 1024px) { .duo { grid-template-columns: 1fr 1fr; gap: 2.5rem; align-items: start; } }
.duo h3 { font-size: 1.4rem; }
.duo-text { color: var(--muted); margin: 0.5rem 0 1rem; max-width: 46ch; }

/* ---------- Undersidor: lätt hero ---------- */
.hero--sub { padding-bottom: clamp(3rem, 6vw, 5rem); }
.hero--sub .eyebrow { display: block; margin-bottom: 1rem; }
.hero--sub h1 { max-width: 16ch; }
.hero--tight { padding-bottom: 1rem; }
.chan-pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; margin-top: 2rem; }
.chan-pills a { font-size: 0.9rem; padding: 0.5rem 0.95rem; border-radius: 999px; background: var(--pill); color: var(--ink); transition: background-color 0.2s, color 0.2s; }
.chan-pills a:hover { background: var(--plum-deep); color: #fff; }

/* ---------- Kanalsidan: klistrad meny + block ---------- */
.chan { padding-top: 0; }
.chan-layout { display: grid; gap: 2rem; }
.chan-layout > * { min-width: 0; }
@media (min-width: 1024px) { .chan-layout { grid-template-columns: 3fr 9fr; gap: 4rem; align-items: start; } }
.chan-nav { position: sticky; top: 64px; z-index: 5; background: var(--bg); padding: 0.75rem 0; }
@media (min-width: 1024px) { .chan-nav { top: 6rem; padding: 0; background: transparent; } }
.chan-nav ul { list-style: none; margin: 0; padding: 0 1rem; margin-inline: -1rem; display: flex; gap: 0.4rem; overflow-x: auto; scrollbar-width: none; }
.chan-nav ul::-webkit-scrollbar { display: none; }
@media (min-width: 1024px) { .chan-nav ul { flex-direction: column; gap: 0.2rem; overflow: visible; padding: 0; margin-inline: 0; } }
.chan-nav a { display: block; white-space: nowrap; font-size: 0.92rem; padding: 0.5rem 0.9rem; border-radius: 999px; color: var(--muted); transition: background-color 0.2s, color 0.2s; }
.chan-nav a:hover { color: var(--ink); background: var(--pill); }
.chan-nav a.is-active { background: var(--plum-deep); color: #fff; }
.chan-blocks { display: grid; gap: clamp(2.5rem, 5vw, 4rem); }
.chan-block { display: grid; gap: 1.5rem; padding-top: clamp(2.5rem, 5vw, 4rem); border-top: 1px solid var(--line); scroll-margin-top: 7rem; }
.chan-block:first-child { border-top: 0; padding-top: 0; }
@media (min-width: 768px) { .chan-block { grid-template-columns: 7fr 5fr; gap: 2.5rem; align-items: start; } }
.chan-text h2 { font-size: clamp(1.7rem, 2.8vw, 2.3rem); }
.chan-text .lede { margin-top: 0.75rem; font-size: 1rem; }
.chan-steps { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: 0.6rem; }
.chan-steps li { display: grid; grid-template-columns: 5.5rem 1fr; gap: 0.75rem; align-items: start; padding: 0.7rem 0; border-top: 1px solid var(--line); }
.chan-steps li span { font-size: 0.8rem; color: var(--accent-text); padding-top: 0.15rem; }
.chan-steps li p { font-size: 0.95rem; color: var(--muted); }
.chan-text .uc-tags { margin-top: 1.25rem; }
.chan-visual { border-radius: var(--r-card); overflow: hidden; background: var(--surface); display: grid; place-items: center; min-height: 280px; }
.chan-visual .uc-art { width: 100%; height: 100%; min-height: 280px; }
.chan-visual .canvas--static { margin: 1.5rem; }
.chan-rules { padding-top: 0; }

/* ---------- Branschsidan ---------- */
.branscher-foto--page { padding-top: 0; padding-bottom: clamp(2rem, 4vw, 3rem); }
.photo-card { color: inherit; }
.photo-label { position: absolute; top: 1.1rem; left: 1.2rem; z-index: 1; color: #fff; font-size: 1.05rem; font-weight: 500; }
.ind-list { padding-top: 0; }
.ind-list .container { display: grid; gap: clamp(3rem, 7vw, 6rem); }
.ind { display: grid; gap: 2rem; scroll-margin-top: 6rem; }
@media (min-width: 1024px) { .ind { grid-template-columns: 5fr 7fr; gap: 4rem; align-items: center; } .ind--flip .ind-media { order: 2; } }
.ind-media { position: relative; border-radius: var(--r-card); overflow: hidden; }
.ind-media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.ind-stat { position: absolute; left: 1.25rem; bottom: 1.25rem; right: 1.25rem; background: var(--card-bg); color: var(--ink); border-radius: 14px; padding: 0.9rem 1.1rem; display: flex; align-items: baseline; gap: 0.75rem; box-shadow: var(--shadow); }
.ind-stat strong { font-size: 2rem; font-weight: 400; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.ind-stat span { font-size: 0.85rem; color: var(--muted); }
.ind-text h2 { font-size: clamp(1.9rem, 3.2vw, 2.6rem); }
.ind-text .lede { margin-top: 0.75rem; }
.ind-text h3 { font-size: 0.85rem; font-weight: 500; color: var(--muted); margin: 1.75rem 0 0.6rem; }
.ind-text .feature-points { margin-top: 0; }
.ind-text .link-more { margin-top: 1.5rem; }
.ind-band { background: var(--plum-deep); color: #fff; border-radius: var(--r-card); padding: clamp(2rem, 5vw, 3.5rem); }
.ind-band blockquote { margin: 0; }
.ind-band blockquote p { font-size: clamp(1.4rem, 2.6vw, 2.1rem); letter-spacing: -0.02em; line-height: 1.2; max-width: 30ch; text-wrap: balance; }
.ind-band figcaption { margin-top: 1.25rem; font-size: 0.9rem; color: rgba(255, 255, 255, 0.7); }
.ind-band figcaption strong { display: block; color: #fff; font-weight: 500; }
.ind-band--stats { display: grid; gap: 1.5rem; background: var(--surface); color: var(--ink); }
@media (min-width: 640px) { .ind-band--stats { grid-template-columns: repeat(3, 1fr); } }
.ind-band--stats div { display: grid; gap: 0.3rem; }
.ind-band--stats strong { font-size: clamp(2.5rem, 5vw, 4rem); font-weight: 400; letter-spacing: -0.04em; line-height: 1; }
.ind-band--stats span { color: var(--muted); font-size: 0.95rem; }

/* ---------- Kundcase: lista ---------- */
.case-more { padding-top: 0; }
.case-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.case-list li { display: grid; gap: 1.25rem; padding: clamp(1.75rem, 4vw, 2.75rem) 0; border-bottom: 1px solid var(--line); align-items: start; }
@media (min-width: 768px) { .case-list li { grid-template-columns: 160px 1fr 200px; gap: 2.5rem; } }
.case-list img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 16px; max-width: 160px; }
.case-company { display: block; font-size: 0.85rem; color: var(--muted); margin-bottom: 0.5rem; }
.case-list h3 { font-size: clamp(1.3rem, 2vw, 1.7rem); }
.case-list p { color: var(--muted); margin-top: 0.6rem; max-width: 60ch; }
.case-list .link-more { margin-top: 0.9rem; font-size: 1rem; }
.case-stat { display: grid; gap: 0.25rem; }
.case-stat strong { font-size: clamp(2.2rem, 4vw, 3.2rem); font-weight: 400; letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.case-stat span { font-size: 0.88rem; color: var(--muted); }

/* ---------- Säkerhet: policyer ---------- */
.policies { padding-top: 0; }
.policy-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); max-width: 48rem; }
.policy-list li { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.1rem 0; border-bottom: 1px solid var(--line); font-size: 1.1rem; }
.policy-list em { font-style: normal; font-size: 0.8rem; color: var(--muted); padding: 0.25rem 0.6rem; border-radius: 999px; background: var(--pill); }
.policy-list a { display: flex; justify-content: space-between; align-items: center; gap: 1rem; width: 100%; transition: color 0.2s; }
.policy-list a:hover { color: var(--accent-text); }
.policy-list .ph { font-size: 1.3rem; color: var(--muted); }
.ai-gov { background: var(--surface); }

/* ---------- Priser ---------- */
.bill-toggle { display: inline-flex; gap: 0.25rem; margin-top: 2rem; padding: 0.3rem; border-radius: 999px; background: var(--pill); }
.bill-toggle button { border: 0; background: transparent; border-radius: 999px; padding: 0.55rem 1.1rem; font-size: 0.92rem; color: var(--muted); display: inline-flex; align-items: center; gap: 0.5rem; transition: background-color 0.25s, color 0.25s; }
.bill-toggle button.is-on { background: var(--plum-deep); color: #fff; }
.bill-toggle button span { font-size: 0.72rem; padding: 0.15rem 0.5rem; border-radius: 999px; background: var(--pink); color: #7d1f4a; }
.plans { padding-top: 0; }
.plan-grid { display: grid; gap: 1rem; }
@media (min-width: 1024px) { .plan-grid { grid-template-columns: repeat(3, 1fr); align-items: start; } }
.plan { position: relative; background: var(--card-bg); border: 1px solid var(--line); border-radius: var(--r-card); padding: 1.75rem; display: grid; gap: 1rem; }
.plan--featured { background: var(--plum-deep); color: #fff; border-color: transparent; }
@media (min-width: 1024px) { .plan--featured { margin-top: -1.5rem; padding-top: 3rem; } }
.plan-flag { position: absolute; top: 1rem; right: 1rem; font-size: 0.75rem; padding: 0.3rem 0.7rem; border-radius: 999px; background: var(--pink); color: #7d1f4a; font-weight: 500; }
.plan h2 { font-size: 1.5rem; }
.plan-desc { color: var(--muted); font-size: 0.95rem; min-height: 3em; }
.plan--featured .plan-desc { color: rgba(255, 255, 255, 0.75); }
.plan-price { display: grid; gap: 0.2rem; }
.plan-price strong { font-size: clamp(2.2rem, 3.5vw, 3rem); font-weight: 400; letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.plan-price span { font-size: 0.85rem; color: var(--muted); }
.plan--featured .plan-price span { color: rgba(255, 255, 255, 0.7); }
.plan .btn { justify-self: start; }
.plan--featured .btn-primary { background: #fff; color: #7d1f4a; }
.plan--featured .btn-primary .icon-circle { background: var(--pink); }
.plan-list { list-style: none; margin: 0.5rem 0 0; padding: 1rem 0 0; border-top: 1px solid var(--line); display: grid; gap: 0.55rem; }
.plan--featured .plan-list { border-top-color: rgba(255, 255, 255, 0.18); }
.plan-list li { display: flex; align-items: center; gap: 0.6rem; font-size: 0.95rem; }
.plan-list .ph { color: var(--accent-text); font-size: 1rem; background: var(--pill); border-radius: 50%; padding: 0.2rem; }
.plan--featured .plan-list .ph { color: #7d1f4a; background: var(--pink); }
.plan-note { margin-top: 1.5rem; font-size: 0.88rem; color: var(--muted); text-align: center; }

/* ---------- Om oss ---------- */
.team-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 768px) { .team-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .team-grid { grid-template-columns: repeat(6, 1fr); gap: 1rem; } }
.team-grid li { display: grid; gap: 0.2rem; }
.team-grid img { width: 100%; aspect-ratio: 5 / 6; object-fit: cover; border-radius: 16px; margin-bottom: 0.5rem; filter: saturate(0.85); }
.team-grid strong { font-weight: 500; font-size: 0.98rem; }
.team-grid span { font-size: 0.85rem; color: var(--muted); }
.careers { padding-top: 0; }
.careers-inner { background: var(--plum-deep); color: #fff; border-radius: var(--r-card); padding: clamp(2rem, 5vw, 3.5rem); display: grid; gap: 2rem; }
@media (min-width: 1024px) { .careers-inner { grid-template-columns: 5fr 7fr; gap: 4rem; align-items: start; } }
.careers-inner h2 { font-size: clamp(2rem, 4vw, 3rem); }
.careers-inner > div > p { color: rgba(255, 255, 255, 0.78); margin-top: 1rem; max-width: 42ch; }
.job-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(255, 255, 255, 0.18); }
.job-list a { display: grid; grid-template-columns: 1fr auto auto; gap: 1rem; align-items: center; padding: 1rem 0; border-bottom: 1px solid rgba(255, 255, 255, 0.18); font-size: 1.05rem; transition: opacity 0.2s; }
.job-list a:hover { opacity: 0.8; }
.job-list em { font-style: normal; font-size: 0.85rem; color: rgba(255, 255, 255, 0.65); }
.job-list .ph { font-size: 1.2rem; }
@media (max-width: 480px) { .job-list a { grid-template-columns: 1fr auto; } .job-list em { grid-column: 1; } }

/* ---------- Assistenten (harmony "Meet Siena") ---------- */
.assistant-head { text-align: center; max-width: 44rem; margin: 0 auto clamp(2rem, 4vw, 3rem); }
.assistant-head .lede { margin: 1rem auto 0; }
.assistant-mark { display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: 18px; background: var(--plum-deep); color: var(--pink); font-size: 1.8rem; margin-bottom: 1.5rem; box-shadow: 0 12px 30px rgba(125, 31, 74, 0.25); }
.assistant-tabs { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 1.5rem; margin-bottom: 1.75rem; overflow-x: auto; scrollbar-width: none; }
.assistant-tabs::-webkit-scrollbar { display: none; }
@media (max-width: 767px) { .assistant-tabs { grid-auto-columns: minmax(220px, 1fr); padding-bottom: 0.25rem; } }
.assistant-tabs [role="tab"] { display: grid; gap: 0.45rem; align-content: start; text-align: left; background: transparent; border: 0; padding: 0; color: var(--muted); transition: color 0.3s; cursor: pointer; }
.assistant-tabs [role="tab"] span { font-size: 1.05rem; font-weight: 500; letter-spacing: -0.01em; color: var(--ink); opacity: 0.55; transition: opacity 0.3s; margin-top: 0.5rem; }
.assistant-tabs [role="tab"] small { font-size: 0.88rem; line-height: 1.45; color: var(--muted); opacity: 0.75; transition: opacity 0.3s; }
.assistant-tabs [role="tab"][aria-selected="true"] span, .assistant-tabs [role="tab"][aria-selected="true"] small { opacity: 1; }
.assistant-tabs [role="tab"]:hover span { opacity: 0.85; }
.assistant-tabs .bar { display: block; height: 2px; background: var(--line-strong); border-radius: 2px; overflow: hidden; }
.assistant-tabs .bar b { display: block; height: 100%; background: var(--plum-deep); transform: scaleX(0); transform-origin: left; }
.assistant-frame {
  --gx: 22%; --gy: 10%;
  position: relative; border-radius: var(--r-card); padding: clamp(1.25rem, 5vw, 4rem) clamp(1rem, 5vw, 4rem) 0; overflow: hidden; isolation: isolate;
  background:
    radial-gradient(55% 60% at var(--gx) var(--gy), rgba(255, 214, 239, 0.55) 0%, rgba(255, 214, 239, 0) 70%),
    radial-gradient(60% 50% at 90% 100%, rgba(224, 123, 176, 0.5) 0%, rgba(224, 123, 176, 0) 70%),
    linear-gradient(160deg, #5f1238 0%, #7d1f4a 48%, #9c3568 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.assistant-frame::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(circle, rgba(255, 255, 255, 0.16) 1px, transparent 1.6px); background-size: 22px 22px; -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.15)); mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.15)); }
.assistant-caption { text-align: center; font-size: 0.85rem; color: var(--muted); margin-top: 1rem; }
/* ---------- Systemet i förhandsvisning (.sys): speglar appens designsystem (Marora, frontend/src/styles.css) ---------- */
/* Egna tokens (--s-*) så att sidans scrollstyrda färgbyten inte påverkar appen. Appen är alltid ljus. */
.sys { --s-bg: #FBF7FA; --s-bg2: #F6EEF4; --s-surf2: #EFE2EA; --s-pill: rgba(90, 28, 60, 0.07); --s-ink: #1E1119; --s-t2: #4B3D46; --s-t3: #6E6170; --s-t4: #9C8F99; --s-border: rgba(30, 17, 25, 0.10); --s-border2: rgba(30, 17, 25, 0.18); --s-plum: #7D1F4A; --s-plum2: #A8386F; --s-plumdeep: #3A0A2A; --s-plumsoft: #F6EEF4; --s-pink: #FFD6EF;
  display: grid; grid-template-columns: 240px minmax(0, 1fr); height: 760px; background: var(--s-bg); color: var(--s-ink); font-family: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 13px; line-height: 1.45; text-align: left; -webkit-font-smoothing: antialiased;
  border: 1px solid rgba(255, 255, 255, 0.55); border-bottom: 0; border-radius: 18px 18px 0 0; box-shadow: 0 0 0 1px rgba(40, 5, 25, 0.25), 0 24px 48px rgba(30, 4, 20, 0.35), 0 60px 140px rgba(30, 4, 20, 0.45); overflow: hidden; }
.sys *, .sys *::before, .sys *::after { box-sizing: border-box; }
.sys h1, .sys h2, .sys h3 { margin: 0; font-weight: 500; letter-spacing: -0.02em; line-height: 1.2; text-wrap: auto; }
.sys p { margin: 0; }
.sys a { color: inherit; text-decoration: none; }
.sys svg { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.sys kbd { font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; background: var(--s-surf2); border: 1px solid var(--s-border2); border-bottom-width: 2px; border-radius: 4px; padding: 0 5px; color: var(--s-t2); }
.sys .car { font-style: normal; color: var(--s-t4); font-size: 11px; }
@media (max-width: 767px) { .sys { border-radius: 12px 12px 0 0; } }
@media (max-width: 899px) { .sys { grid-template-columns: minmax(0, 1fr); height: 640px; } .sys .sys-side { display: none; } }

/* Sidomeny */
.sys-side { background: var(--s-bg); border-right: 1px solid var(--s-border); display: flex; flex-direction: column; padding: 14px 12px 12px; min-height: 0; }
.sys-side-head { display: flex; align-items: center; justify-content: space-between; padding: 2px 0 4px; }
.sys-ws { display: flex; align-items: center; gap: 8px; padding: 4px 6px; border-radius: 12px; }
.sys-wm svg { width: 22px; height: 22px; display: block; stroke: none; }
.sys-wm rect { fill: var(--s-ink); } .sys-wm circle { fill: #F9EFF6; }
.sys-ws b { font-weight: 600; font-size: 13px; letter-spacing: 0.02em; color: var(--s-ink); }
.sys-collapse { color: var(--s-t4); font-size: 16px; width: 24px; height: 24px; display: grid; place-items: center; }
.sys-search { display: flex; align-items: center; gap: 8px; margin: 6px 0 12px; padding: 7px 10px; border-radius: 999px; background: var(--s-pill); color: var(--s-t3); font-size: 12.5px; }
.sys-search svg { width: 14px; height: 14px; stroke: var(--s-t3); stroke-width: 1.8; flex: 0 0 auto; }
.sys-search kbd { margin-left: auto; font-size: 10.5px; color: var(--s-t4); background: none; border: 0; padding: 0; }
.sys-nav { flex: 1; overflow: hidden; min-height: 0; }
.sys-nav-sec { display: block; font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--s-t4); font-weight: 500; padding: 18px 10px 6px; }
.sys-nav-sec.first { padding-top: 0; }
.sys-nav-item { display: flex; align-items: center; gap: 10px; padding: 6px 9px; border-radius: 10px; color: var(--s-t2); font-weight: 450; font-size: 13px; margin-bottom: 1px; cursor: pointer; transition: background-color 0.2s; }
.sys-nav-item:hover { background: rgba(126, 29, 76, 0.06); }
.sys-nav-item.is-active { background: var(--s-pink); color: var(--s-plumdeep); font-weight: 500; }
.sys-nav-item svg { width: 17px; height: 17px; flex: 0 0 17px; stroke: var(--s-t3); stroke-width: 1.6; }
.sys-nav-item.is-active svg { stroke: var(--s-plumdeep); }
.sys-nav-item .lbl { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sys .sys-nav-item .badge { margin-left: auto; background: #fff; color: var(--s-plum); border: 1px solid var(--s-border); font-weight: 500; border-radius: 999px; font-size: 11px; line-height: 1.4; padding: 1px 7px; min-width: 20px; text-align: center; }
.sys-nav-item.soon { opacity: 0.5; cursor: default; }
.sys-nav-item.soon:hover { background: transparent; }
.sys-side-foot { border-top: 1px solid var(--s-border); padding-top: 10px; }
.sys-user { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 8px; }
.sys-user .nm { font-weight: 600; font-size: 13px; } .sys-user .rl { font-size: 11.5px; color: var(--s-t3); }
.sys-user .car { margin-left: auto; font-size: 10px; }

/* Primitiver */
.sys-av { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; font-size: 10.5px; font-weight: 600; color: #fff; flex: 0 0 auto; font-style: normal; line-height: 1; }
.sys-av.ag { border-radius: 6px; background: var(--s-plumsoft); color: var(--s-ink); }
.sys-av.lg { width: 36px; height: 36px; font-size: 13px; }
.sys-av.sm { width: 18px; height: 18px; font-size: 8px; } .sys-av.sm.ag { border-radius: 4px; }
.sys-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 999px; font-weight: 500; font-size: 13px; border: 1px solid var(--s-border2); background: #fff; color: var(--s-ink); white-space: nowrap; line-height: 1.2; box-shadow: 0 1px 1px rgba(90, 28, 60, 0.04); cursor: default; }
.sys-btn.primary { background: var(--s-plum); border-color: var(--s-plum); color: #fff; }
.sys-btn.ghost { border-color: transparent; background: transparent; box-shadow: none; }
.sys-btn.sm { padding: 3px 11px; font-size: 12px; }
.sys-btn kbd { margin-left: 4px; }
.sys-btn.primary kbd { background: rgba(255, 255, 255, 0.16); color: #fff; border-color: transparent; }
.sys-seg { display: inline-flex; background: var(--s-pill); border-radius: 999px; padding: 3px; }
.sys-seg > span { padding: 3px 11px; border-radius: 999px; font-weight: 500; color: var(--s-t2); font-size: 12.5px; }
.sys-seg > span.on { background: #fff; color: var(--s-ink); box-shadow: 0 1px 2px rgba(90, 28, 60, 0.12); font-weight: 600; }
.sys .pill { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 5px; font-size: 12px; font-weight: 500; white-space: nowrap; }

/* Huvudyta och vyer */
.sys-main { min-width: 0; display: flex; flex-direction: column; overflow: hidden; background: var(--s-bg); }
.sys-view { flex: 1; min-height: 0; overflow: auto; scrollbar-width: thin; }
.sys .sys-view[hidden] { display: none !important; }
.sys-topbar { display: flex; align-items: center; gap: 12px; padding: 0 24px; height: 52px; border-bottom: 1px solid var(--s-border); flex: 0 0 auto; background: var(--s-bg); position: sticky; top: 0; z-index: 3; }
.sys-topbar .ttl { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sys-topbar .crumb { color: var(--s-t3); font-size: 13px; white-space: nowrap; }
.sys-topbar .crumb::before { content: "/"; margin: 0 8px; color: var(--s-border2); }
.sys-topbar .spacer { flex: 1; }

/* Hem: editorial bento */
.sys .hm { padding: 28px 32px 48px; }
.sys .hm svg { width: 14px; height: 14px; flex: 0 0 auto; }
.sys .hm-head { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(380px, 520px); gap: 32px; align-items: start; max-width: 1320px; margin: 0 auto; }
.sys .hm-greet .eyebrow { display: inline-block; font-size: 12.5px; letter-spacing: 0.04em; color: var(--s-t3); margin-bottom: 12px; text-transform: none; font-weight: 400; }
.sys .hm-greet h1 { font-size: 36px; line-height: 1.1; letter-spacing: -0.025em; font-weight: 400; color: var(--s-ink); }
.sys .hm-greet h1 .dim { color: var(--s-t3); } .sys .hm-greet h1 .dim b { font-weight: 500; color: var(--s-ink); }
.sys .hm-ask { padding-top: 6px; }
.sys .hm-ask .bar { display: flex; align-items: center; gap: 10px; padding: 6px 6px 6px 14px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px var(--s-border2); height: auto; }
.sys .hm-ask .ic { color: var(--s-plum2); display: grid; place-items: center; }
.sys .hm-ask .ic svg { fill: currentColor; stroke: none; width: 16px; height: 16px; }
.sys .hm-ask .plh { flex: 1; min-width: 0; font-size: 14px; color: var(--s-t4); padding: 7px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sys .hm-ask .go { width: 36px; height: 36px; border-radius: 50%; background: var(--s-plum); color: #fff; display: grid; place-items: center; opacity: 0.35; flex: 0 0 auto; }
.sys .hm-ask .sugg { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 10px 4px 0; }
.sys .hm-ask .sugg span { font-size: 12.5px; color: var(--s-t3); }
.sys .hm-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin: 30px 0 0; background: var(--s-border); border-radius: 16px; overflow: hidden; box-shadow: 0 0 0 1px var(--s-border); }
.sys .hm-stats a { display: flex; flex-direction: column; gap: 4px; padding: 18px 20px; background: #fff; color: var(--s-ink); }
.sys .hm-stats a:hover { background: var(--s-bg2); }
.sys .hm-stats b { font-size: 28px; font-weight: 400; letter-spacing: -0.02em; line-height: 1; font-variant-numeric: tabular-nums; }
.sys .hm-stats span { font-size: 12.5px; color: var(--s-t3); }
.sys .hm-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; margin-top: 16px; }
.sys .hm-card { background: #fff; border-radius: 20px; box-shadow: 0 0 0 1px var(--s-border); padding: 18px 20px 12px; min-width: 0; }
.sys .hm-card > header { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.sys .hm-card h2 { font-size: 17px; font-weight: 500; letter-spacing: -0.015em; }
.sys .hm-card .more { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--s-t3); white-space: nowrap; }
.sys .hm-need { grid-column: span 7; } .sys .hm-today { grid-column: span 5; } .sys .hm-agents { grid-column: span 7; } .sys .hm-moving { grid-column: span 5; } .sys .hm-feed { grid-column: span 12; }
.sys .row-need { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-top: 1px solid var(--s-border); }
.sys .row-need .b { flex: 1; min-width: 0; }
.sys .row-need .t { font-size: 14px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sys .row-need .s { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--s-t3); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sys .row-need .s i { width: 6px; height: 6px; border-radius: 50%; flex: 0 0 auto; }
.sys .row-need .acts { display: flex; gap: 6px; flex: 0 0 auto; }
.sys .hm-today .tl { padding: 4px 0 6px; margin: 0; list-style: none; }
.sys .hm-today .tl li { display: flex; align-items: center; gap: 12px; padding: 9px 0; font-size: 13.5px; }
.sys .hm-today .tl .tm { width: 44px; font-size: 12px; color: var(--s-t3); font-variant-numeric: tabular-nums; }
.sys .hm-today .tl .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--s-plum2); box-shadow: 0 0 0 3px var(--s-pink); flex: 0 0 auto; }
.sys .hm-today .tl .t { flex: 1; min-width: 0; font-weight: 500; color: var(--s-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sys .hm-today .tl .k { font-size: 11.5px; color: var(--s-t4); white-space: nowrap; }
.sys .hm-today .tl li.done .t { text-decoration: line-through; color: var(--s-t4); }
.sys .hm-today .tl li.done .dot { background: var(--s-t4); box-shadow: none; }
.sys .row-agent { display: flex; align-items: center; gap: 14px; padding: 11px 0; border-top: 1px solid var(--s-border); color: var(--s-ink); }
.sys .row-agent .b { flex: 1; min-width: 0; }
.sys .row-agent .t { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 500; }
.sys .row-agent .st { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 500; padding: 2px 9px 2px 7px; border-radius: 999px; background: var(--s-pill); color: var(--s-t2); }
.sys .row-agent .st em { width: 6px; height: 6px; border-radius: 50%; background: var(--s-t4); }
.sys .row-agent .st.live { background: #E8F5EE; color: #1F7A4D; } .sys .row-agent .st.live em { background: #2A9163; animation: sys-pulse 1.6s infinite; }
.sys .row-agent .st.blocked { background: #FDE4E4; color: #A12C2C; } .sys .row-agent .st.blocked em { background: #D64545; }
@keyframes sys-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(42, 145, 99, 0.3); } 50% { box-shadow: 0 0 0 4px rgba(42, 145, 99, 0.08); } }
.sys .row-agent .s { display: flex; align-items: center; gap: 10px; margin-top: 4px; font-size: 12.5px; color: var(--s-t3); }
.sys .row-agent .s .pt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 55%; }
.sys .row-agent .s .bar { flex: 1; height: 3px; border-radius: 2px; background: var(--s-surf2); overflow: hidden; display: block; }
.sys .row-agent .s .bar i { display: block; height: 100%; background: var(--s-plum); }
.sys .row-agent .s .pct { font-variant-numeric: tabular-nums; }
.sys .hm-moving { position: relative; overflow: hidden; background: var(--s-plum); color: #fff; box-shadow: none; }
.sys .hm-moving .dots { position: absolute; inset: 0; background-image: radial-gradient(circle, var(--s-pink) 34%, transparent 36%); background-size: 34px 34px; background-position: center; opacity: 0.1; -webkit-mask-image: linear-gradient(200deg, #000 20%, transparent 70%); mask-image: linear-gradient(200deg, #000 20%, transparent 70%); pointer-events: none; }
.sys .hm-moving > * { position: relative; }
.sys .hm-moving h2 { color: #fff; } .sys .hm-moving .more { color: rgba(255, 255, 255, 0.7); }
.sys .row-move { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-top: 1px solid rgba(255, 255, 255, 0.14); color: #fff; }
.sys .row-move .b { flex: 1; min-width: 0; }
.sys .row-move .t { font-size: 14px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sys .row-move .s { font-size: 12px; color: rgba(255, 255, 255, 0.65); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sys .row-move .pct { font-size: 20px; font-weight: 400; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--s-pink); }
.sys .hm-feed .feed { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; }
.sys .row-feed { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--s-border); color: var(--s-ink); font-size: 13.5px; }
.sys .row-feed .b { flex: 1; min-width: 0; }
.sys .row-feed .t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sys .row-feed .t b { font-weight: 500; }
.sys .row-feed .s { font-size: 12px; color: var(--s-t3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sys .row-feed .tm { font-size: 11.5px; color: var(--s-t4); white-space: nowrap; }
@media (max-width: 1100px) { .sys .hm { padding: 22px 20px 40px; } .sys .hm-head { grid-template-columns: 1fr; gap: 18px; } .sys .hm-need, .sys .hm-today, .sys .hm-agents, .sys .hm-moving, .sys .hm-feed { grid-column: span 12; } .sys .hm-stats { grid-template-columns: repeat(2, 1fr); } .sys .hm-feed .feed { grid-template-columns: 1fr; } }

/* Inkorg: lista + konversation */
.sys .ib { display: grid; grid-template-columns: 380px minmax(0, 1fr); background: #fff; overflow: hidden; }
.sys .ib-list { border-right: 1px solid var(--s-border); display: flex; flex-direction: column; overflow: hidden; min-width: 0; }
.sys .ib-list-head { padding: 18px 16px 12px; display: flex; align-items: flex-start; gap: 6px; }
.sys .ib .lead { flex: 1; min-width: 0; margin: 0; max-width: none; font-size: inherit; }
.sys .ib-list-head h1 { font-size: 20px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; }
.sys .ib-list-head .w { color: var(--s-t3); font-size: 12.5px; margin-top: 3px; }
.sys .ib-icon { width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--s-border); background: #fff; color: var(--s-t2); display: grid; place-items: center; flex: 0 0 auto; }
.sys .ib-icon svg { width: 15px; height: 15px; stroke-width: 1.8; }
.sys .ib-seg { display: flex; gap: 2px; margin: 0 16px 12px; padding: 3px; background: var(--s-surf2); border-radius: 9px; }
.sys .ib-seg > span { flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: center; gap: 5px; height: 28px; padding: 0 8px; border-radius: 7px; font-size: 12px; font-weight: 500; color: var(--s-t2); white-space: nowrap; min-width: 0; }
.sys .ib-seg > span.on { background: #fff; color: var(--s-ink); box-shadow: 0 1px 2px rgba(90, 28, 60, 0.10), 0 0 0 1px rgba(90, 28, 60, 0.04); }
.sys .ib-seg .n { display: inline-grid; place-items: center; min-width: 18px; height: 17px; padding: 0 4px; border-radius: 4px; border: 1px solid var(--s-border2); background: #fff; font-size: 10.5px; font-weight: 500; color: var(--s-t2); font-variant-numeric: tabular-nums; }
.sys .ib-scroll { flex: 1; overflow-y: auto; border-top: 1px solid var(--s-border); scrollbar-width: thin; }
.sys .ib-row { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; cursor: pointer; position: relative; border-bottom: 1px solid var(--s-border); }
.sys .ib-row:hover { background: var(--s-bg); }
.sys .ib-row.sel { background: var(--s-surf2); }
.sys .ib-row .sys-av { width: 36px; height: 36px; font-size: 12.5px; margin-top: 1px; }
.sys .ib-row .body { min-width: 0; flex: 1; }
.sys .ib-row .top { display: flex; align-items: baseline; gap: 8px; }
.sys .ib-row .nm { font-size: 13.5px; font-weight: 500; color: var(--s-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; }
.sys .ib-row.unread .nm { font-weight: 600; }
.sys .ib-row .tm { font-size: 11.5px; color: var(--s-t4); white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
.sys .ib-row .unread-dot { width: 7px; height: 7px; border-radius: 50%; background: #E2445C; display: inline-block; }
.sys .ib-row .role { font-size: 12px; color: var(--s-t3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
.sys .ib-row .pv { font-size: 13px; color: var(--s-ink); margin-top: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sys .ib-row .pv2 { font-size: 12.5px; color: var(--s-t3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
.sys .ib-row .ib-chip { margin-top: 8px; }
.sys .ib-hints { padding: 8px 16px; border-top: 1px solid var(--s-border); font-size: 11.5px; color: var(--s-t3); display: flex; gap: 10px; flex-wrap: wrap; }
.sys .ib-hints kbd { font-size: 10px; }
.sys .ib-chip { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px; border-radius: 6px; font-size: 12px; font-weight: 500; color: var(--s-t2); background: #fff; border: 1px solid var(--s-border); white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.sys .ib-chip svg { width: 12px; height: 12px; stroke-width: 1.8; flex: 0 0 auto; }
.sys .ib-chip .dot { width: 7px; height: 7px; border-radius: 50%; background: #2A9163; flex: 0 0 auto; display: inline-block; }
.sys .ib-chip.kind, .sys .ib-chip.hi { color: var(--c, var(--s-plum)); background: color-mix(in srgb, var(--c, var(--s-plum)) 12%, #fff); border-color: transparent; }
.sys .ib-chip.kind svg, .sys .ib-chip.hi svg { fill: currentColor; stroke: none; }
.sys .ib-main { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.sys .ib-head { padding: 16px 28px; border-bottom: 1px dashed var(--s-border2); display: flex; align-items: center; gap: 14px; }
.sys .ib-head .nm { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; display: flex; align-items: center; gap: 8px; }
.sys .ib-head .nm .st { width: 8px; height: 8px; border-radius: 50%; background: #2A9163; display: inline-block; }
.sys .ib-head .sub { color: var(--s-t3); font-size: 13px; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sys .ib-head .sub .pl { color: var(--s-t2); font-weight: 500; }
.sys .ib-head .acts { display: flex; gap: 6px; align-items: center; flex: 0 0 auto; }
.sys .ib-head .acts .sys-btn { padding: 7px 14px; }
.sys .ib-body { flex: 1; overflow-y: auto; padding: 20px 28px 28px; scrollbar-width: thin; }
.sys .ib-stream { max-width: 820px; display: flex; flex-direction: column; gap: 18px; }
.sys .ib-ai { position: relative; border-radius: 12px; padding: 14px 16px; background: #fff; }
.sys .ib-ai::before { content: ""; position: absolute; inset: 0; border-radius: 12px; padding: 1.5px; background: linear-gradient(135deg, #F0ABFC, #A78BFA 60%, #C4B5FD); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
.sys .ib-ai .h { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; margin-bottom: 6px; }
.sys .ib-ai .h svg { width: 16px; height: 16px; fill: #C084FC; stroke: none; }
.sys .ib-ai .tx { font-size: 13.5px; line-height: 1.5; color: var(--s-ink); }
.sys .ib-ai .tx.ins { margin-top: 6px; color: var(--s-t2); } .sys .ib-ai .tx.ins b { font-weight: 600; color: var(--s-ink); }
.sys .ib-ai .chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.sys .ib-msg { display: flex; gap: 12px; align-items: flex-start; padding-bottom: 18px; border-bottom: 1px dashed var(--s-border2); }
.sys .ib-msg .sys-av { width: 32px; height: 32px; font-size: 12px; margin-top: 1px; }
.sys .ib-msg .bub { min-width: 0; flex: 1; }
.sys .ib-msg .meta { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--s-t3); margin-bottom: 6px; flex-wrap: wrap; }
.sys .ib-msg .meta b { color: var(--s-ink); font-weight: 600; font-size: 14px; } .sys .ib-msg .meta .tm { color: var(--s-t4); }
.sys .ib-msg .txt { font-size: 14px; line-height: 1.6; color: var(--s-ink); }
.sys .ib-card { background: #fff; border: 1px solid var(--s-border); border-radius: 10px; overflow: hidden; }
.sys .ib-card .ch { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--s-border); font-weight: 600; font-size: 13px; }
.sys .ib-card .ch .m { color: var(--s-t3); font-weight: 500; font-size: 12px; }
.sys .ib-step { display: flex; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--s-border); align-items: flex-start; }
.sys .ib-step:last-child { border-bottom: 0; }
.sys .check { width: 16px; height: 16px; border-radius: 4px; border: 1.5px solid var(--s-border2); display: inline-grid; place-items: center; font-size: 11px; color: #fff; flex: 0 0 auto; margin-top: 2px; }
.sys .check.on { background: #00A86B; border-color: #00A86B; }
.sys .ib-step .k { font-weight: 600; }
.sys .ib-step .l { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--s-plum); font-weight: 600; margin-right: 6px; }
.sys .ib-step .d { color: var(--s-t3); font-size: 12.5px; margin-top: 2px; }
.sys .ib-composer { padding: 12px 28px 16px; border-top: 1px solid var(--s-border); }
.sys .ib-composer .box { max-width: 820px; display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--s-border2); border-radius: 12px; padding: 10px 10px 10px 16px; }
.sys .ib-composer .plh { flex: 1; min-width: 0; font-size: 14px; color: var(--s-t4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sys .ib-composer .hint { margin-top: 6px; font-size: 12px; color: var(--s-t3); }
.sys .ib-send { width: 32px; height: 32px; border-radius: 8px; background: var(--s-ink); color: #fff; display: grid; place-items: center; flex: 0 0 auto; opacity: 0.3; }
.sys .ib-send svg { width: 15px; height: 15px; stroke-width: 2; }

@media (max-width: 1100px) { .sys .ib { grid-template-columns: 320px minmax(0, 1fr); } .sys .ib-head, .sys .ib-body, .sys .ib-composer { padding-left: 18px; padding-right: 18px; } }
@media (max-width: 899px) { .sys .ib { grid-template-columns: minmax(0, 1fr); } .sys .ib-main { display: none; } .sys .ib-seg { overflow-x: auto; scrollbar-width: none; } .sys .ib-seg > span { flex: 0 0 auto; padding: 0 9px; } }

/* Projekt: tät rutnätstabell per status */
.sys .pj { background: #fff; }
.sys .pj-tools { display: flex; align-items: center; gap: 12px; height: 46px; padding: 0 16px; border-bottom: 1px solid var(--s-border); position: sticky; top: 52px; background: #fff; z-index: 3; }
.sys .pj-views { display: flex; gap: 22px; height: 100%; }
.sys .pj-views > span { position: relative; display: inline-flex; align-items: center; gap: 7px; height: 100%; padding: 0 2px; font-size: 13px; font-weight: 500; color: var(--s-t3); white-space: nowrap; }
.sys .pj-views > span.on { color: var(--s-ink); }
.sys .pj-views > span.on::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--s-ink); border-radius: 2px 2px 0 0; }
.sys .pj-views .n { font-size: 11px; color: var(--s-t4); font-variant-numeric: tabular-nums; }
.sys .pj-views .d { width: 6px; height: 6px; border-radius: 50%; background: #FDAB3D; display: inline-block; }
.sys .pj-search { display: flex; align-items: center; gap: 8px; height: 30px; width: 280px; padding: 0 10px; border-radius: 8px; background: var(--s-pill); color: var(--s-t4); margin-left: 8px; font-size: 12.5px; white-space: nowrap; overflow: hidden; flex: 0 1 auto; }
.sys .pj-search svg { width: 13px; height: 13px; stroke: var(--s-t3); stroke-width: 1.8; flex: 0 0 auto; }
.sys .pj-tools .right { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.sys .pj-tool { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 9px; border-radius: 999px; font-size: 12.5px; font-weight: 500; color: var(--s-t3); white-space: nowrap; }
.sys .pj-tool svg { width: 13px; height: 13px; stroke-width: 1.8; }
.sys .pj-tools .stats { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--s-t3); margin-left: 8px; white-space: nowrap; }
.sys .pj-tools .stats b { font-weight: 600; color: var(--s-ink); margin-left: 10px; font-variant-numeric: tabular-nums; }
.sys .pj-tools .stats b:first-child { margin-left: 0; }
.sys .pj-scroll { overflow-x: auto; background: #fff; }
.sys .pj-table { width: 100%; min-width: 1100px; border-collapse: separate; border-spacing: 0; font-size: 13px; table-layout: fixed; }
.sys .pj-table th, .sys .pj-table td { border-right: 1px solid var(--s-border); border-bottom: 1px solid var(--s-border); }
.sys .pj-table th:last-child, .sys .pj-table td:last-child { border-right: 0; }
.sys .pj-table th { background: #fff; text-align: left; font-size: 12px; font-weight: 500; color: var(--s-t2); height: 40px; padding: 0 12px; white-space: nowrap; border-top: 1px solid var(--s-border2); border-bottom: 1px solid var(--s-border2); }
.sys .pj-table tbody tr.ghead:first-child th { border-top: 0; }
.sys .pj-table th .h { display: inline-flex; align-items: center; gap: 6px; }
.sys .pj-table th svg { width: 13px; height: 13px; stroke: var(--s-t3); flex: 0 0 auto; }
.sys .pj-table th.g .h { gap: 8px; font-weight: 600; font-size: 13px; color: var(--s-ink); }
.sys .pj-table th.g .dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.sys .pj-table th.g .n { display: inline-grid; place-items: center; min-width: 20px; height: 18px; padding: 0 6px; border-radius: 4px; background: var(--g-bg, var(--s-surf2)); color: var(--g-fg, var(--s-t3)); font-size: 11px; font-weight: 500; font-variant-numeric: tabular-nums; }
.sys .pj-table th:not(.g):not(.sel):not(.chk) { text-align: center; }
.sys .pj-table td { height: 44px; padding: 0 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--s-ink); background: #fff; }
.sys .pj-table tr.prow td:not(:nth-child(3)):not(.sel):not(.chk), .sys .pj-table tfoot td:not(:nth-child(3)):not(.sel):not(.chk) { text-align: center; }
.sys .pj-table tr.prow:hover td { background: var(--s-bg2); }
.sys .pj-table td.num { font-variant-numeric: tabular-nums; color: var(--s-t2); }
.sys .pj-table td.sel, .sys .pj-table th.sel { padding: 0 0 0 14px; }
.sys .pj-table td.chk, .sys .pj-table th.chk { padding: 0 0 0 10px; }
.sys .gt-check { display: inline-block; width: 15px; height: 15px; border: 1.5px solid var(--s-border2); border-radius: 4px; background: #fff; vertical-align: middle; opacity: 0; transition: opacity 0.12s; }
.sys .pj-table tr:hover .gt-check, .sys .pj-table th .gt-check { opacity: 1; }
.sys .gt-exp { display: inline-flex; align-items: center; gap: 4px; vertical-align: middle; }
.sys .gt-chev { width: 20px; height: 20px; border-radius: 5px; display: inline-grid; place-items: center; color: var(--s-t4); font-style: normal; }
.sys .gt-chev svg { width: 14px; height: 14px; stroke-width: 1.75; transition: transform 0.22s cubic-bezier(0.2, 0.7, 0.2, 1); }
.sys .gt-exp.open .gt-chev { color: var(--s-t2); } .sys .gt-exp.open .gt-chev svg { transform: rotate(90deg); }
.sys .gt-count { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 4px; background: var(--s-surf2); color: var(--s-t3); font-size: 11px; font-weight: 500; font-variant-numeric: tabular-nums; display: inline-grid; place-items: center; }
.sys .pj-table .cell { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; }
.sys .pj-table tr.prow td .cell { justify-content: center; }
.sys .pj-table tr.prow td:nth-child(3) .cell { justify-content: flex-start; }
.sys .pj-table .cell .nm { font-weight: 500; overflow: hidden; text-overflow: ellipsis; }
.sys .pj-table .cell .nw { font-size: 10px; font-weight: 600; color: var(--s-plum); letter-spacing: 0.04em; }
.sys .pj-table .steps { display: inline-flex; gap: 2px; margin-left: 6px; }
.sys .pj-table .steps i { width: 4px; height: 4px; border-radius: 50%; background: var(--s-border); display: inline-block; }
.sys .pj-table .steps i.done { background: #2A9163; } .sys .pj-table .steps i.doing { background: var(--s-plum); }
.sys .pj-table td.fill { padding: 0; }
.sys .pj-table td.fill .pill { display: flex; width: 100%; height: 44px; border-radius: 0; justify-content: center; align-items: center; line-height: 1.2; padding: 0 12px; overflow: hidden; text-overflow: ellipsis; }
.sys .pj-table tr.addrow td { height: 38px; color: var(--s-t4); font-size: 12.5px; border-right: 0; text-align: left; }
.sys .pj-table tfoot td { position: sticky; bottom: 0; background: var(--s-bg2); height: 34px; font-size: 12px; color: var(--s-t3); border-top: 1px solid var(--s-border); border-bottom: 0; }
.sys .pj-table tfoot td b { color: var(--s-ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.sys .pj-table tfoot .calc { color: var(--s-t4); }
@media (max-width: 1100px) { .sys .pj-search { width: 200px; } }
@media (max-width: 899px) { .sys .pj-tools { position: static; } .sys .pj-views { gap: 14px; overflow-x: auto; scrollbar-width: none; } }

/* Översikt: kort med staplar + två tabeller */
.sys .ov-body { padding: 16px 24px 40px; }
.sys .ov-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.sys .ov-card { background: #fff; border: 1px solid var(--s-border); border-radius: 8px; padding: 20px 20px 18px; display: flex; flex-direction: column; gap: 4px; box-shadow: 0 1px 2px rgba(90, 28, 60, 0.06); min-height: 250px; transition: box-shadow 0.15s, border-color 0.15s, transform 0.15s; }
.sys .ov-card:hover { border-color: var(--s-border2); box-shadow: 0 10px 30px rgba(90, 28, 60, 0.08); transform: translateY(-1px); }
.sys .ov-card .kick { display: flex; justify-content: space-between; align-items: center; font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--s-t4); font-weight: 500; }
.sys .ov-card .kick .open { color: var(--s-plum); letter-spacing: 0; text-transform: none; font-size: 12.5px; opacity: 0; transition: opacity 0.15s; }
.sys .ov-card:hover .kick .open { opacity: 1; }
.sys .ov-card .ttl { font-size: 15px; font-weight: 600; margin-top: 6px; }
.sys .ov-card .metric { font-size: 26px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.05; margin-top: 8px; font-variant-numeric: tabular-nums; }
.sys .ov-card .sub { font-size: 12.5px; font-weight: 500; margin-top: 2px; color: var(--s-t3); }
.sys .ov-card .spark { margin-top: 14px; height: 54px; width: 100%; display: block; stroke: none; }
.sys .ov-card .desc { color: var(--s-t3); font-size: 12.5px; margin-top: 10px; line-height: 1.45; }
.sys .ov-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 16px; margin-top: 16px; }
.sys .grid-wrap { border: 1px solid var(--s-border); border-radius: 8px; overflow: hidden; background: #fff; }
.sys .grid-wrap .hd { padding: 10px 12px; font-weight: 600; font-size: 13px; display: flex; align-items: center; justify-content: space-between; gap: 8px; border-bottom: 1px solid var(--s-border); }
.sys .grid-wrap .hd .hint { font-weight: 400; font-size: 12px; color: var(--s-t3); }
.sys .grid-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }
.sys .grid-table th, .sys .grid-table td { border-right: 1px solid var(--s-border); border-bottom: 1px solid var(--s-border); }
.sys .grid-table th:last-child, .sys .grid-table td:last-child { border-right: 0; }
.sys .grid-table th { background: var(--s-bg2); text-align: left; font-size: 12px; font-weight: 500; color: var(--s-t3); height: 36px; padding: 0 12px; white-space: nowrap; }
.sys .grid-table th .h { display: inline-flex; align-items: center; gap: 6px; }
.sys .grid-table th svg { width: 13px; height: 13px; stroke: var(--s-t4); flex: 0 0 auto; }
.sys .grid-table th.num .h { justify-content: flex-end; width: 100%; }
.sys .grid-table td { height: 42px; padding: 0 12px; white-space: nowrap; background: #fff; color: var(--s-ink); }
.sys .grid-table tbody tr:hover td { background: var(--s-bg2); }
.sys .grid-table td.num, .sys .grid-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.sys .grid-table td.num { color: var(--s-t2); }
.sys .grid-table td.first { font-weight: 500; }
.sys .grid-table tr:last-child td { border-bottom: 0; }
.sys .grid-table .cell { display: inline-flex; align-items: center; gap: 8px; }
.sys .grid-table td.up { color: #1F7A4D; font-weight: 500; } .sys .grid-table td.down { color: #C0283C; font-weight: 500; }
@media (max-width: 1200px) { .sys .ov-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sys .ov-two { grid-template-columns: 1fr; } }
@media (max-width: 899px) { .sys .ov-body { padding: 14px 14px 32px; } .sys .ov-grid { grid-template-columns: 1fr; } .sys .ov-card { min-height: 0; } .sys .grid-wrap { overflow-x: auto; } }


.sys { position: relative; }
.sys-chat { position: absolute; right: 24px; bottom: 24px; width: 44px; height: 44px; border-radius: 50%; background: var(--s-ink); color: #fff; display: grid; place-items: center; box-shadow: 0 20px 60px rgba(90, 28, 60, 0.10), 0 1px 2px rgba(90, 28, 60, 0.06); z-index: 5; }
.sys-chat svg { width: 24px; height: 24px; stroke: #fff; stroke-width: 1.8; }
.sys-excerpt .sys-chat { display: none; }

/* Utdrag ur systemet på agentsidan (.sys-excerpt): ingen sidomeny, höjd efter innehållet */
.sys.sys-excerpt { display: block; height: auto; border: 1px solid rgba(40, 20, 35, 0.1); border-radius: 14px; box-shadow: 0 1px 2px rgba(40, 20, 35, 0.06), 0 24px 60px rgba(60, 10, 40, 0.14); background: #fff; }
.sys-excerpt .sys-main { overflow: visible; }
.sys-excerpt .sys-view { overflow: visible; flex: none; }
.sys-excerpt .sys-topbar { position: static; border-radius: 14px 14px 0 0; }
.sys-excerpt .sys-topbar .sys-av { margin-left: 4px; }
.sys-excerpt .ib-main { display: flex; flex-direction: column; min-height: 0; }
.sys-excerpt .ib-body { flex: none; overflow: visible; padding: 18px 22px 22px; }
.sys-excerpt .ib-head { padding: 14px 22px; }
.sys-excerpt .ib-composer { padding: 12px 22px 16px; }
.sys-excerpt .ib-head .acts .sys-btn { padding: 6px 12px; font-size: 12.5px; }
.sys .ib-foot { display: block; margin-top: 8px; font-size: 12px; color: var(--s-t3); }
.sys .ib-msg .txt b { font-weight: 600; }
.sys .plh.is-typed { color: var(--s-ink); }
.sys .ib-send.is-on { opacity: 1; }
.sys .sys-chip { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 999px; font-size: 11.5px; font-weight: 500; border: 1px solid var(--s-border); background: #fff; color: var(--s-t2); white-space: nowrap; }
.sys .sys-chip.on { background: var(--s-plum); color: #fff; border-color: var(--s-plum); }
.sys .ib-agents { display: flex; gap: 5px; padding: 0 16px 12px; flex-wrap: wrap; }
/* Bild som bilaga i ett meddelande (Creative-agenten) */
.sys .ib-attach { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: center; margin-top: 12px; padding: 12px; border: 1px solid var(--s-border); border-radius: 10px; background: var(--s-bg2); }
.sys .ib-attach .canvas { width: 168px; height: 168px; border-radius: 8px; padding: 0.8rem; font-size: 13px; box-shadow: 0 8px 24px rgba(40, 20, 35, 0.14); }
.sys .ib-attach .canvas-text { font-size: 1.05rem; }
.sys .ib-attach-meta { display: grid; gap: 4px; font-size: 12.5px; color: var(--s-t3); min-width: 0; }
.sys .ib-attach-meta b { font-weight: 500; color: var(--s-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sys .ib-attach-link { color: var(--s-plum); font-weight: 500; }
@media (max-width: 560px) { .sys .ib-attach { grid-template-columns: 1fr; justify-items: start; } }
/* Bred inkorg på agentsidan: lista + konversation med fast höjd */
.sys-excerpt--inbox .ib { display: grid; grid-template-columns: 360px minmax(0, 1fr); height: 640px; overflow: hidden; border-radius: 14px; }
.sys-excerpt--inbox .ib-main { height: 100%; overflow: hidden; }
.sys-excerpt--inbox .ib-body { flex: 1; overflow-y: auto; }
@media (max-width: 899px) { .sys-excerpt--inbox .ib { grid-template-columns: minmax(0, 1fr); height: 560px; } .sys.sys-excerpt--inbox .ib-main { display: none; } }
/* Projekttabell i halv bredd */
.sys-excerpt--table .pj-scroll { border-radius: 0 0 14px 14px; }
.sys .pj-table--narrow { min-width: 560px; }
.sys .pj-table tr.sub td { background: var(--s-bg2); padding: 4px 12px 10px 44px; height: auto; white-space: normal; border-right: 0; text-align: left; }
.sys .pj-table tr.sub .grid-wrap { border-color: var(--s-border2); }
.sys .pj-table tr.sub .grid-table td { height: 38px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sys .pj-table tr.sub .grid-wrap { overflow-x: auto; }
.sys .pj-table tr.sub .grid-table td.fill { padding: 0; text-align: center; }
.sys .pj-table tr.sub .grid-table td.fill .pill { display: flex; width: 100%; height: 38px; border-radius: 0; justify-content: center; align-items: center; }
.sys .pj-table .steps i.review { background: #FDAB3D; }
.sys .pj-table td.late { color: #A12C2C; }
.sys .pj-table tr.addrow:last-child td { border-bottom: 0; }
/* Översiktens detaljvy */
.sys .ov-back { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px 4px 8px; border-radius: 6px; border: 1px solid var(--s-border2); background: #fff; font-size: 12.5px; font-weight: 500; color: var(--s-t2); white-space: nowrap; }
.sys .ov-range { font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--s-t4); font-weight: 500; white-space: nowrap; }
.sys .ov-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0 0 14px; }
.sys .ov-stat { background: #fff; border: 1px solid var(--s-border); border-radius: 8px; padding: 14px 16px; box-shadow: 0 1px 2px rgba(90, 28, 60, 0.06); min-width: 0; }
.sys .ov-stat .lbl { font-size: 12px; color: var(--s-t3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sys .ov-stat .val { font-size: 20px; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; margin-top: 6px; line-height: 1.1; }
.sys .ov-stat .sub { font-size: 12px; margin-top: 4px; font-weight: 500; color: var(--s-t3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sys .ov-chart { background: #fff; border: 1px solid var(--s-border); border-radius: 8px; box-shadow: 0 1px 2px rgba(90, 28, 60, 0.06); padding: 16px 18px 10px; }
.sys .ov-chart .top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.sys .ov-chart .top .h { font-size: 14px; font-weight: 600; }
.sys .ov-chart .top .v { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; margin-top: 4px; font-variant-numeric: tabular-nums; }
.sys .ov-chart .top .v small { font-size: 12.5px; letter-spacing: 0; font-weight: 500; margin-left: 8px; }
.sys .ov-chart .ctrls { display: flex; gap: 8px; flex-wrap: wrap; }
.sys .ov-chart svg { width: 100%; height: 190px; display: block; margin-top: 8px; overflow: visible; stroke: none; }
.sys .ov-chart .ov-line { fill: none; stroke: #7E1D4C; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.sys .ov-chart .ov-pts circle { fill: #fff; stroke: #7E1D4C; stroke-width: 1.5; }
.sys .ov-chart .axis { font-size: 10px; fill: var(--s-t4); }
.sys .ov-summary { position: relative; overflow: hidden; background: #fff; border: 1px solid var(--s-border); border-radius: 8px; padding: 16px 18px 14px; box-shadow: 0 1px 2px rgba(90, 28, 60, 0.06); margin-top: 14px; }
.sys .ov-summary::before { content: ""; position: absolute; right: -90px; top: -130px; width: 340px; height: 340px; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 117, 225, 0.22), rgba(126, 29, 76, 0.06) 60%, transparent 75%); filter: blur(10px); pointer-events: none; }
.sys .ov-summary > * { position: relative; }
.sys .ov-summary .who { display: flex; align-items: center; gap: 10px; }
.sys .ov-summary .who .nm { font-weight: 600; }
.sys .ov-summary .who .rl { font-size: 12px; color: var(--s-t3); }
.sys .ov-summary .who .upd { margin-left: auto; font-size: 12px; color: var(--s-t3); display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.sys .ov-summary .who .upd i { width: 7px; height: 7px; border-radius: 50%; background: var(--s-plum2); box-shadow: 0 0 0 3px rgba(255, 117, 225, 0.25); }
.sys .ov-summary p { margin-top: 12px; font-size: 14px; line-height: 1.5; letter-spacing: -0.005em; }
.sys .ov-summary p b { font-weight: 600; }
.sys .ov-summary .acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
@media (max-width: 1100px) { .sys .ov-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .sys .ov-summary .who .upd { display: none; } }

.feature-points--row { display: grid; gap: 0.6rem 1.5rem; margin-top: 1.5rem; }
@media (min-width: 900px) { .feature-points--row { grid-template-columns: repeat(3, 1fr); } }

/* ---------- Logovägg ---------- */
.logos { padding-block: clamp(3rem, 6vw, 5rem); border-bottom: 1px solid var(--line); }
.logos p { text-align: center; font-size: 0.9rem; color: var(--muted); margin-bottom: 2rem; }
.claims { list-style: none; margin: 0 0 clamp(2.5rem, 5vw, 4rem); padding: 0; display: grid; gap: 1.25rem; }
@media (min-width: 768px) { .claims { grid-template-columns: repeat(3, 1fr); gap: 2rem; } }
.claims li { display: grid; grid-template-columns: auto 1fr; gap: 0.35rem 0.9rem; align-items: start; padding-top: 1.25rem; border-top: 1px solid var(--line-strong); }
.claims .ph { grid-row: span 2; font-size: 1.35rem; color: var(--accent-text); margin-top: 0.1rem; }
.claims strong { font-weight: 500; font-size: 1.05rem; letter-spacing: -0.01em; color: var(--ink); }
.claims span { font-size: 0.92rem; line-height: 1.5; color: var(--muted); }
.marquee { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.marquee-track { display: flex; gap: 3.5rem; width: max-content; animation: marquee 38s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }
.logo-item { display: inline-flex; align-items: center; gap: 0.65rem; color: var(--muted); font-weight: 500; font-size: 1.05rem; white-space: nowrap; }
.logo-item svg { width: 30px; height: 30px; }

/* ---------- Systemet (lagrade plattor, legora aOS) ---------- */
.system-grid { display: grid; gap: 2.5rem; }
@media (min-width: 1024px) { .system-grid { grid-template-columns: 5fr 7fr; gap: 4rem; align-items: center; } }
.layers { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.layer button {
  display: flex; align-items: center; gap: 0.6rem; width: auto; text-align: left; border: 0; border-radius: 999px;
  padding: 0.55rem 0.6rem 0.55rem 1rem; background: var(--pill); color: var(--ink); font-size: 0.95rem;
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease);
}
.layer button .ph { font-size: 1rem; opacity: 0.6; background: rgba(30, 17, 25, 0.08); border-radius: 50%; padding: 0.25rem; transition: transform 0.3s var(--ease); }
.layer button:hover { background: var(--surface-2); }
.layer-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.45s var(--ease); }
.layer-body > div { overflow: hidden; }
.layer-body p { padding: 0.35rem 1.2rem 1.1rem; color: rgba(255, 255, 255, 0.85); font-size: 1rem; max-width: 42ch; }
.layer.is-active button { background: var(--plum-deep); color: #fff; border-radius: 16px 16px 0 0; width: 100%; }
.layer.is-active button .ph { transform: rotate(45deg); background: rgba(255, 255, 255, 0.15); opacity: 1; }
.layer.is-active .layer-body { grid-template-rows: 1fr; background: var(--plum-deep); border-radius: 0 0 16px 16px; }
.stack { position: relative; height: 440px; perspective: 1400px; --squeeze: 1; }
.stack-inner { position: absolute; inset: 0; transform-style: preserve-3d; }
@media (max-width: 767px) { .stack { height: 320px; } }
.plate {
  position: absolute; left: 50%; top: 50%; width: min(440px, 80%); aspect-ratio: 16 / 10;
  margin-left: calc(min(440px, 80%) / -2); margin-top: calc(min(440px, 80%) * -0.3125);
  border-radius: 20px; border: 1px solid rgba(255, 255, 255, 0.85);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.78) 0%, rgba(248, 236, 244, 0.62) 55%, rgba(255, 255, 255, 0.72) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 1), 0 14px 20px -10px rgba(90, 28, 60, 0.2);
  transform: rotateX(58deg) rotateZ(-34deg) translateZ(calc(var(--z) * var(--squeeze) * 1px)); opacity: 0; transform-style: preserve-3d; backface-visibility: hidden;
  transition: transform 0.9s var(--ease), opacity 0.5s var(--ease);
  display: grid; place-items: center;
}
/* Tjocklek: ett skikt under plattan ger en synlig kant i 3D */
.plate::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; transform: translateZ(-14px); background: rgba(214, 160, 190, 0.95); backface-visibility: hidden; }
.plate-in { display: grid; place-items: center; gap: 0.5rem; transform-style: preserve-3d; }
.plate-in > span:last-child { font-size: 1.05rem; color: var(--plum-deep); letter-spacing: 0.02em; opacity: 0; transition: opacity 0.4s; }
.plate-icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 15px; background: rgba(255, 255, 255, 0.92); color: var(--plum-deep); font-size: 1.55rem; box-shadow: 0 6px 14px rgba(90, 28, 60, 0.16), inset 0 1px 0 #fff; opacity: 0; transform: translateZ(28px); transition: opacity 0.4s, background-color 0.4s, color 0.4s; }
.plate.is-shown { opacity: 1; }
.plate.is-shown .plate-icon { opacity: 1; }
.plate.is-top { background: linear-gradient(135deg, rgba(255, 214, 239, 0.95), rgba(255, 240, 248, 0.9)); border-color: #fff; }
.plate.is-top .plate-in > span:last-child { opacity: 1; }
.plate.is-top .plate-icon { background: var(--plum-deep); color: #fff; }
.stack.is-done { --squeeze: 0.62; }
.stack.is-done .plate { border-color: #fff; }
html:not(.gsap-on) .plate.is-shown .plate-in { animation: plate-float 4s ease-in-out infinite; }
@keyframes plate-float { 50% { transform: translateY(-5px); } }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .uc-art.tint-rose { background: #2c1728; }
  :root:not([data-theme="light"]) .tint-rose .dots { --dot: #e07bb0; }
  :root:not([data-theme="light"]) .layer button .ph { background: rgba(255, 214, 239, 0.12); }
}
:root[data-theme="dark"] .uc-art.tint-rose { background: #2c1728; }
:root[data-theme="dark"] .tint-rose .dots { --dot: #e07bb0; }
:root[data-theme="dark"] .layer button .ph { background: rgba(255, 214, 239, 0.12); }
.system-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--line); }
.system-foot p { max-width: 44ch; color: var(--muted); }

/* ---------- Lösningar (karusell, harmony) ---------- */
.usecases-head { display: flex; align-items: end; justify-content: space-between; gap: 2rem; max-width: none; }
.usecases-head > div { max-width: 46rem; }
.carousel-nav { display: none; gap: 0.5rem; }
@media (min-width: 768px) { .carousel-nav { display: flex; } }
.carousel-nav button { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line-strong); background: transparent; display: grid; place-items: center; font-size: 1.1rem; transition: background 0.2s, transform 0.2s; }
.carousel-nav button:hover { background: var(--surface); }
.carousel-nav button:active { transform: scale(0.95); }
.carousel { display: grid; grid-auto-flow: column; grid-auto-columns: min(86%, 560px); gap: 1.25rem; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 0.5rem; scrollbar-width: none; }
.carousel::-webkit-scrollbar { display: none; }
.uc-card { scroll-snap-align: start; display: grid; grid-template-rows: auto 1fr; background: var(--card-bg); border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; }
@media (min-width: 640px) { .uc-card { grid-template-columns: 1fr 1fr; grid-template-rows: auto; } }
.uc-body { padding: 1.6rem; display: flex; flex-direction: column; gap: 0.75rem; }
.uc-body p { color: var(--muted); font-size: 0.98rem; flex: 1; }
.uc-tags { list-style: none; margin: 0.75rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.uc-tags li { font-size: 0.8rem; padding: 0.3rem 0.7rem; border-radius: 999px; background: var(--pill); color: var(--muted); }
.uc-art { min-height: 200px; position: relative; overflow: hidden; }
.uc-art.tint-pink { background: var(--pink); }
.uc-art.tint-plum { background: var(--plum-deep); }
.uc-art.tint-rose { background: var(--surface); }
.dots { position: absolute; inset: 0; background-image: radial-gradient(circle, var(--dot) 34%, transparent 36%); background-size: 34px 34px; background-position: center; }
.tint-pink .dots { --dot: var(--plum-deep); opacity: 0.85; }
.tint-plum .dots { --dot: var(--pink); opacity: 0.85; }
.tint-rose .dots { --dot: var(--plum-deep); opacity: 0.75; }
.dots.rings { background-image: radial-gradient(circle, transparent 38%, var(--dot) 40%, var(--dot) 52%, transparent 54%); background-size: 46px 46px; }
.dots.half { background-image: linear-gradient(90deg, var(--dot) 50%, transparent 50%); background-size: 42px 42px; -webkit-mask: radial-gradient(circle, #000 48%, transparent 50%); mask: radial-gradient(circle, #000 48%, transparent 50%); -webkit-mask-size: 42px 42px; mask-size: 42px 42px; }
.dots.focus::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at center, var(--dot) 0 14%, transparent 15%); }

/* ---------- Funktioner (flikar + mini-demon) ---------- */
.feature-tabs { display: flex; gap: 0.5rem; overflow-x: auto; padding-bottom: 0.5rem; margin-bottom: 2rem; scrollbar-width: none; }
.feature-tabs::-webkit-scrollbar { display: none; }
.feature-tabs [role="tab"] {
  display: inline-flex; align-items: center; gap: 0.5rem; white-space: nowrap; border: 1px solid var(--line-strong); background: transparent;
  color: var(--ink); border-radius: 999px; padding: 0.6rem 1.1rem; font-size: 0.95rem; transition: background-color 0.25s, color 0.25s, border-color 0.25s;
}
.feature-tabs [role="tab"] .ph { font-size: 1.1rem; color: var(--accent-text); }
.feature-tabs [role="tab"]:hover { background: var(--surface); }
.feature-tabs [role="tab"][aria-selected="true"] { background: var(--plum-deep); color: #fff; border-color: var(--plum-deep); }
.feature-tabs [role="tab"][aria-selected="true"] .ph { color: #ffd6ef; }
.feature-panel { display: grid; gap: 2rem; }
.feature-panel[hidden] { display: none; }
@media (min-width: 1024px) { .feature-panel { grid-template-columns: 5fr 7fr; gap: 4rem; align-items: center; } }
.feature-text h3 { font-size: clamp(1.5rem, 2.4vw, 2rem); }
.feature-text > p { color: var(--muted); margin-top: 1rem; max-width: 46ch; }
.feature-points { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: 0.6rem; }
.feature-points li { display: flex; align-items: center; gap: 0.6rem; font-size: 0.98rem; }
.feature-points .ph { color: var(--accent-text); font-size: 1.05rem; background: var(--pill); border-radius: 50%; padding: 0.25rem; }
.feature-text .link-more { margin-top: 1.5rem; }

.mini { background: var(--card-bg); border: 1px solid var(--line); border-radius: var(--r-card); padding: 1.25rem; box-shadow: var(--shadow); display: grid; gap: 1rem; }
.mini-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; font-size: 0.95rem; font-weight: 500; }
.mini-status { font-size: 0.78rem; font-weight: 500; padding: 0.3rem 0.7rem; border-radius: 999px; background: var(--pill); color: var(--muted); }
.mini-status[data-state="working"] { background: var(--pink); color: #7d1f4a; }
.mini-status[data-state="review"] { background: #fff1c9; color: #6b4a00; }
.mini-status[data-state="done"] { background: var(--pink); color: #7d1f4a; }
.mini-form { display: grid; gap: 0.75rem; }
@media (min-width: 640px) { .mini-form { grid-template-columns: 1fr 1fr auto; align-items: end; } }
.mini-form label { display: grid; gap: 0.3rem; font-size: 0.8rem; color: var(--muted); }
.mini-form select, .mini-form input { font: inherit; font-size: 0.98rem; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-input); padding: 0.6rem 0.75rem; width: 100%; }
.mini-form select:focus, .mini-form input:focus { outline: 2px solid var(--plum); outline-offset: 1px; }
.mini-form .btn { padding: 0.7rem 1.1rem; font-size: 0.92rem; }
.mini-form .btn[aria-busy="true"] { opacity: 0.6; pointer-events: none; }
.mini-plan { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; counter-reset: p; }
.mini-plan:empty { display: none; }
.mini-plan li { counter-increment: p; display: grid; grid-template-columns: auto 1fr auto; gap: 0.75rem; align-items: center; padding: 0.65rem 0.8rem; border-radius: 12px; background: var(--surface); animation: rise 0.5s var(--ease) both; }
.mini-plan li::before { content: counter(p, decimal-leading-zero); font-size: 0.75rem; color: var(--accent-text); font-variant-numeric: tabular-nums; }
.plan-step { font-size: 0.95rem; }
.plan-meta { display: flex; align-items: center; gap: 0.6rem; font-size: 0.82rem; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.plan-meta em { font-style: normal; padding: 0.15rem 0.5rem; border-radius: 999px; background: var(--pill); color: var(--ink); }
.mini-foot { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; font-size: 0.88rem; color: var(--muted); padding-top: 0.75rem; border-top: 1px solid var(--line); }
.mini-foot[hidden] { display: none; }
.mini-foot .btn { padding: 0.6rem 1rem; font-size: 0.9rem; }
.btn-soft:disabled { opacity: 0.8; cursor: default; transform: none; }
.chip-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
.chip-label { font-size: 0.78rem; color: var(--muted); margin-right: 0.3rem; min-width: 2.6rem; }
.chip { font-size: 0.85rem; padding: 0.35rem 0.8rem; border-radius: 999px; border: 1px solid var(--line-strong); background: transparent; color: var(--ink); transition: background-color 0.2s, color 0.2s, border-color 0.2s; }
.chip:hover { background: var(--surface); }
.chip.is-on { background: var(--plum-deep); color: #fff; border-color: var(--plum-deep); }
.mini-output { background: var(--surface); border-radius: 12px; padding: 1rem 1.1rem; font-size: 1rem; line-height: 1.5; min-height: 5.5rem; }
.mini-output.is-fresh { animation: fade-in 0.4s var(--ease); }
@keyframes fade-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.switch { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; font-weight: 400; color: var(--muted); cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch-track { position: relative; width: 38px; height: 22px; border-radius: 999px; background: var(--line-strong); transition: background-color 0.25s; flex: none; }
.switch-track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform 0.25s var(--ease); }
.switch input:checked + .switch-track { background: var(--plum); }
.switch input:checked + .switch-track::after { transform: translateX(16px); }
.switch input:focus-visible + .switch-track { outline: 2px solid var(--plum); outline-offset: 2px; }
.bars, .line { width: 100%; height: auto; display: block; }
.bar { fill: var(--plum-deep); transition: y 0.8s var(--ease), height 0.8s var(--ease); }
.bar:nth-child(5) { fill: var(--plum); }
.bar-val { font-size: 12px; fill: var(--ink); font-variant-numeric: tabular-nums; transition: y 0.8s var(--ease); }
.bar-lbl { font-size: 12px; fill: var(--muted); }
.line-path { fill: none; stroke: var(--plum); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.line-area { fill: var(--plum); opacity: 0.08; }
.kpi-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; }
.kpi { display: grid; gap: 0.2rem; padding: 0.75rem 0.9rem; border-radius: 12px; background: var(--surface); }
.kpi span { font-size: 0.75rem; color: var(--muted); }
.kpi strong { font-weight: 500; font-size: 1.15rem; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.kpi.is-better strong { color: var(--accent-text); }
#report-delta.is-up { color: var(--accent-text); }
.mini-note { font-size: 0.88rem; color: var(--muted); }
@media (max-width: 480px) { .kpi-row { grid-template-columns: 1fr; } .mini-plan li { grid-template-columns: auto 1fr; } .plan-meta { grid-column: 2; } }

/* ---------- Flödet (idé till lansering) ---------- */
.flow { background: var(--surface); }
.flow-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; counter-reset: none; }
@media (min-width: 768px) { .flow-steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .flow-steps { grid-template-columns: repeat(4, 1fr); gap: 1.25rem; } }
.flow-step { position: relative; background: var(--card-bg); border-radius: var(--r-card); padding: 1.6rem 1.5rem 1.75rem; display: grid; gap: 0.6rem; align-content: start; }
@media (min-width: 1024px) {
  .flow-step:not(:last-child)::after { content: ""; position: absolute; right: -1.25rem; top: 2.6rem; width: 1.25rem; height: 2px; background: var(--line-strong); }
}
.flow-num { font-size: 0.8rem; color: var(--accent-text); letter-spacing: 0.05em; font-variant-numeric: tabular-nums; }
.flow-step h3 { font-size: 1.5rem; }
.flow-agent { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; font-size: 0.85rem; font-weight: 500; color: var(--accent-text); }
.flow-agent .ph { font-size: 1rem; background: var(--pink); color: #7d1f4a; border-radius: 50%; padding: 0.3rem; }
.flow-agent span { color: var(--muted); }
.flow-step > p:last-child { color: var(--muted); font-size: 0.95rem; }

/* ---------- Creative-agenten ---------- */
.mini-input { display: grid; gap: 0.3rem; font-size: 0.8rem; color: var(--muted); }
.mini-input input { font: inherit; font-size: 0.98rem; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-input); padding: 0.6rem 0.75rem; width: 100%; }
.mini-input input:focus { outline: 2px solid var(--plum); outline-offset: 1px; }
.canvas-wrap { display: grid; place-items: center; background: var(--surface); border-radius: 12px; padding: 1rem; min-height: 300px; }
.canvas { position: relative; overflow: hidden; border-radius: 10px; display: grid; align-content: end; gap: 0.4rem; padding: 1rem; color: #fff; box-shadow: var(--shadow); background: linear-gradient(135deg, var(--c1), var(--c2)); transition: width 0.4s var(--ease), height 0.4s var(--ease); }
.canvas[data-format="feed"] { width: 260px; height: 260px; }
.canvas[data-format="story"] { width: 158px; height: 280px; }
.canvas[data-format="banner"] { width: 320px; height: 180px; }
.canvas img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.4s; }
.canvas[data-style="photo"] img { opacity: 1; }
.canvas[data-style="photo"]::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 30%, var(--c1) 100%); opacity: 0.85; }
.canvas-dots { position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(255, 255, 255, 0.35) 30%, transparent 32%); background-size: 22px 22px; opacity: 0; transition: opacity 0.4s; }
.canvas[data-style="pattern"] .canvas-dots { opacity: 1; }
.canvas > span, .canvas > strong { position: relative; }
.canvas-brand { font-size: 0.6rem; letter-spacing: 0.12em; font-weight: 600; opacity: 0.85; }
.canvas-text { font-size: 1.3rem; line-height: 1.05; letter-spacing: -0.02em; font-weight: 500; text-wrap: balance; }
.canvas[data-format="story"] .canvas-text { font-size: 1.15rem; }
.canvas-cta { justify-self: start; font-size: 0.7rem; font-weight: 500; padding: 0.3rem 0.7rem; border-radius: 999px; background: #fff; color: #7d1f4a; margin-top: 0.2rem; }
.canvas.is-light { color: #7d1f4a; }
.canvas.is-light .canvas-cta { background: #7d1f4a; color: #fff; }
.canvas.is-light .canvas-dots { background-image: radial-gradient(circle, rgba(125, 31, 74, 0.25) 30%, transparent 32%); }
.canvas.is-fresh { animation: fade-in 0.4s var(--ease); }

/* ---------- Stödfunktioner (rutnät utan kort) ---------- */
.support { padding-top: 0; }
.support-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
@media (min-width: 768px) { .support-grid { grid-template-columns: repeat(2, 1fr); column-gap: 3rem; } }
@media (min-width: 1024px) { .support-grid { grid-template-columns: repeat(3, 1fr); column-gap: 3rem; } }
.support-grid li { padding: 1.75rem 0; border-top: 1px solid var(--line); display: grid; gap: 0.5rem; align-content: start; }
.support-grid .ph { font-size: 1.5rem; color: var(--accent-text); }
.support-grid h3 { font-size: 1.2rem; }
.support-grid p { color: var(--muted); font-size: 0.95rem; max-width: 36ch; }

/* ---------- Vision (plommonblock, legora-layout) ---------- */
.vision { padding: 0 0 clamp(4.5rem, 9vw, 8rem); }
.vision-inner { position: relative; overflow: hidden; background: var(--plum-deep); color: #fff; border-radius: var(--r-card); padding: clamp(3rem, 6vw, 5rem) clamp(1.5rem, 5vw, 4rem); }
@media (min-width: 1024px) { .vision-inner { padding-bottom: clamp(6.5rem, 10vw, 9rem); } }
.vision-grid { display: grid; gap: 2rem; position: relative; }
@media (min-width: 1024px) { .vision-grid { grid-template-columns: 3fr 4fr 4fr; gap: 3rem; } }
.vision-grid h2 { font-size: clamp(1.9rem, 3.2vw, 2.6rem); }
.vision-grid p { color: rgba(255, 255, 255, 0.82); font-size: 1.02rem; }
.vision-grid p + p { margin-top: 1rem; }
.vision-tag { margin-top: 0.9rem; font-size: 1.05rem; color: var(--pink); font-weight: 500; letter-spacing: -0.005em; }
.vision-founder { margin-top: 2.5rem; font-size: 0.9rem; color: rgba(255, 255, 255, 0.65); }
.vision-founder strong { display: block; color: #fff; font-weight: 500; font-size: 1rem; }
.vision-shapes { position: absolute; right: 4%; bottom: -1px; width: 26%; height: clamp(4.5rem, 7vw, 6.5rem); display: flex; gap: 2%; pointer-events: none; opacity: 0.9; }
.vision-shapes span { flex: 1; background: var(--pink); border-radius: 50% 50% 0 0 / 100% 100% 0 0; transform: translateY(60%); transition: transform 1.2s var(--ease); }
.vision-shapes span:nth-child(2) { transition-delay: 0.12s; }
.vision-inner.is-visible .vision-shapes span { transform: translateY(22%); }
@media (max-width: 1023px) { .vision-shapes { display: none; } }
:root[data-theme="dark"] .vision-shapes span { background: #c9568a; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .vision-shapes span { background: #c9568a; } }

/* ---------- Plattform (sticky split, harmony) ---------- */
.why-grid { display: grid; gap: 2.5rem; }
@media (min-width: 1024px) { .why-grid { grid-template-columns: 5fr 6fr; gap: 5rem; align-items: start; } }
.why-media { border-radius: var(--r-card); overflow: hidden; }
@media (min-width: 1024px) { .why-media { position: sticky; top: 6rem; } }
.why-media img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.why-list { list-style: none; margin: 0; padding: 0; }
.why-list li { padding: 1.8rem 0; border-top: 1px solid var(--line); display: grid; gap: 0.5rem; }
.why-list li:first-child { border-top: 0; padding-top: 0; }
.why-list h3 { font-size: clamp(1.4rem, 2.2vw, 1.9rem); }
.why-list p { color: var(--muted); max-width: 46ch; }
.why-list .ph { font-size: 1.5rem; color: var(--accent-text); margin-bottom: 0.2rem; }

/* ---------- Branscher (bento) ---------- */
.bento { display: grid; gap: 1rem; }
@media (min-width: 768px) { .bento { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .bento { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 280px; } }
.tile { position: relative; border-radius: var(--r-card); overflow: hidden; padding: 1.6rem; display: flex; flex-direction: column; justify-content: flex-end; gap: 0.5rem; min-height: 240px; background: var(--surface); border: 1px solid var(--line); }
.tile h3 { font-size: 1.4rem; }
.tile p { color: var(--muted); font-size: 0.95rem; max-width: 40ch; }
.tile-photo { border: 0; color: #fff; }
.tile-photo p { color: rgba(255, 255, 255, 0.82); }
.tile-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; transition: transform 1.2s var(--ease); }
.tile-photo:hover img { transform: scale(1.04); }
.tile-photo::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(60, 10, 40, 0) 35%, rgba(60, 10, 40, 0.85) 100%); }
.tile-photo > :not(img) { position: relative; z-index: 2; }
.tile-pink { background: var(--pink); border: 0; }
.tile-pink .dots { opacity: 0.18; --dot: var(--plum-deep); }
.tile-pink > :not(.dots) { position: relative; }
@media (min-width: 1024px) { .tile-wide { grid-column: span 2; } }

/* ---------- Rapportband (full bredd foto, legora) ---------- */
.report { position: relative; padding: 0; min-height: 62vh; display: grid; place-items: center; color: #fff; text-align: center; overflow: hidden; }
.report img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.report::after { content: ""; position: absolute; inset: 0; background: rgba(60, 10, 40, 0.45); }
.report-content { position: relative; z-index: 1; padding: 5rem 1rem; }
.report-content .eyebrow { color: rgba(255, 255, 255, 0.7); }
.report-content h2 { max-width: 22ch; margin-inline: auto; }
.report-content .link-more { justify-content: center; font-size: 1.35rem; margin-top: 1rem; }

/* ---------- Kundcase (stora siffror, legora) ---------- */
.case-quote { max-width: 60rem; }
.case-quote blockquote { margin: 0; }
.case-quote blockquote p { font-size: clamp(1.5rem, 2.8vw, 2.4rem); letter-spacing: -0.02em; line-height: 1.2; text-wrap: balance; }
.case-quote figcaption { margin-top: 1.5rem; display: flex; align-items: center; gap: 0.9rem; color: var(--muted); font-size: 0.95rem; }
.case-quote figcaption img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.case-quote figcaption strong { display: block; color: var(--ink); font-weight: 500; }
.stat-rows { margin-top: clamp(3rem, 6vw, 5rem); border-top: 1px solid var(--line); }
.stat-row { display: grid; gap: 0.5rem; padding: clamp(1.5rem, 3vw, 2.5rem) 0; border-bottom: 1px solid var(--line); align-items: center; }
@media (min-width: 768px) { .stat-row { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 2rem; } .stat-row > span { max-width: 30ch; } }
.stat-row strong { font-size: clamp(3.5rem, 9vw, 7.5rem); font-weight: 400; letter-spacing: -0.04em; line-height: 0.95; font-variant-numeric: tabular-nums; }
.stat-row > span { color: var(--muted); font-size: 1.02rem; }
.stat-row strong span { font: inherit; color: inherit; }

/* ---------- Säkerhet (legora) ---------- */
.security { padding-top: 0; }
.security-head { display: grid; gap: 1.5rem; margin-bottom: 3rem; }
@media (min-width: 1024px) { .security-head { grid-template-columns: 7fr 5fr; gap: 4rem; align-items: end; } }
.security-head h2 { max-width: 18ch; }
.badges { display: grid; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
@media (min-width: 640px) { .badges { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .badges { grid-template-columns: repeat(4, 1fr); } }
.badge { padding: 1.75rem 1.5rem 1.75rem 0; display: grid; gap: 0.5rem; border-left: 1px solid var(--line); padding-left: 1.5rem; }
.badge:first-child { border-left: 0; padding-left: 0; }
@media (max-width: 1023px) { .badge { border-left: 0; padding-left: 0; } }
.badge strong { font-weight: 500; font-size: 1.1rem; display: flex; align-items: center; gap: 0.5rem; }
.badge strong .ph { color: var(--accent-text); }
.badge span { color: var(--muted); font-size: 0.92rem; }

/* ---------- FAQ ---------- */
.faq-grid { display: grid; gap: 2rem; }
@media (min-width: 1024px) { .faq-grid { grid-template-columns: 4fr 7fr; gap: 5rem; } }
.faq details { border-top: 1px solid var(--line); }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; padding: 1.25rem 0; font-size: 1.15rem; letter-spacing: -0.01em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .ph { flex: none; font-size: 1.2rem; transition: transform 0.35s var(--ease); color: var(--muted); }
.faq details[open] summary .ph { transform: rotate(45deg); }
.faq .answer { padding: 0 0 1.5rem; color: var(--muted); max-width: 62ch; }

/* ---------- CTA (centrerad plommonruta, harmony) ---------- */
.cta { padding-bottom: 0; }
.cta-inner { position: relative; overflow: hidden; background: var(--plum-deep); color: #fff; border-radius: var(--r-card); padding: clamp(4rem, 9vw, 7rem) clamp(1.5rem, 5vw, 4rem); text-align: center; }
.cta-inner h2 { max-width: 16ch; margin-inline: auto; font-size: clamp(2.2rem, 5vw, 4rem); }
.cta-inner p { color: rgba(255, 255, 255, 0.75); max-width: 42ch; margin: 1.25rem auto 0; }
.cta-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; margin-top: 2rem; position: relative; }
.cta-inner .btn-ghost { color: #fff; border-color: rgba(255, 255, 255, 0.3); }
.cta-inner .btn-ghost:hover { background: rgba(255, 255, 255, 0.08); }
.cta-dots { position: absolute; inset: auto -5% -40% -5%; height: 60%; opacity: 0.3; --dot: var(--pink); pointer-events: none; }
:root[data-theme="dark"] .cta-dots { --dot: #c9568a; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .cta-dots { --dot: #c9568a; } }
.demo-form { display: grid; gap: 0.9rem; margin-top: 1.25rem; }
.field { display: grid; gap: 0.35rem; }
.field label { font-size: 0.8rem; color: var(--muted); }
.field input { width: 100%; padding: 0.7rem 0.1rem; background: transparent; border: 0; border-bottom: 1px solid var(--line-strong); color: var(--ink); font: inherit; font-size: 1.05rem; border-radius: 0; transition: border-color 0.2s; }
.field input::placeholder { color: var(--muted); opacity: 0.7; }
.field input:focus { outline: none; border-bottom-color: var(--plum); }
.field input[aria-invalid="true"] { border-bottom-color: #d63a6e; }
.field .error { font-size: 0.8rem; color: #d63a6e; display: none; }
.field[data-invalid="true"] .error { display: block; }
.demo-form .btn { justify-self: start; margin-top: 0.3rem; }
.demo-form .btn[aria-busy="true"] { opacity: 0.7; pointer-events: none; }
.form-status { font-size: 0.95rem; display: none; }
.demo-form[data-state="success"] .form-status.success, .demo-form[data-state="error"] .form-status.error { display: block; }
.demo-form[data-state="success"] .field, .demo-form[data-state="success"] .btn { display: none; }

/* ---------- Footer (kolumner + gigantisk ordbild, legora) ---------- */
.footer { padding: clamp(3rem, 6vw, 5rem) 0 1.5rem; }
.footer-grid { display: grid; gap: 2.5rem; }
@media (min-width: 768px) { .footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr; gap: 2rem; } }
.footer-brand p { color: var(--muted); font-size: 0.95rem; max-width: 30ch; margin-top: 0.9rem; }
.footer .brand { justify-self: start; }
.footer h4 { font-size: 0.85rem; font-weight: 500; color: var(--muted); margin-bottom: 0.9rem; }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }
.footer ul a { font-size: 0.98rem; transition: color 0.2s; }
.footer ul a:hover { color: var(--accent-text); }
.wordmark { margin: clamp(3rem, 8vw, 6rem) 0 1.5rem; text-align: center; font-size: clamp(3.4rem, 15.5vw, 14rem); line-height: 0.85; letter-spacing: -0.03em; font-weight: 500; color: var(--wordmark, var(--plum-deep)); user-select: none; }
:root[data-theme="dark"] .wordmark { color: #ffd6ef; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .wordmark { color: #ffd6ef; } }
.footer-bottom { padding-top: 1.5rem; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; font-size: 0.88rem; color: var(--muted); }
.footer-bottom nav { display: flex; gap: 1.25rem; }
.theme-toggle { display: inline-flex; align-items: center; gap: 0.4rem; background: transparent; border: 1px solid var(--line-strong); border-radius: 999px; padding: 0.35rem 0.8rem; font-size: 0.85rem; color: var(--muted); }

/* ---------- När GSAP är aktivt: CSS-animationerna lämnar över ---------- */
.gsap-on .hero-anim, .gsap-on .hero-media { animation: none; opacity: 1; transform: none; }
.gsap-on .reveal { transition: none; }
.gsap-on .reveal:not(.is-visible) { opacity: 1; transform: none; }
.gsap-on .vision-shapes span { transition: none; transform: translateY(70%); }
.gsap-on .product-card, .gsap-on .photo-card, .gsap-on .tile { transition: box-shadow 0.4s var(--ease); }
.gsap-on .product-card:hover { transform: none; }
.gsap-on .report { overflow: hidden; }
.gsap-on .report img, .gsap-on .hero-full .hero-bg img { height: 118%; top: -9%; }
.gsap-on .hero-full .hero-bg img { animation: none; transform: none; }
.w-wrap { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.w { display: inline-block; will-change: transform; }

/* ---------- Mörkt scroll-tema: block som ska lysa på mörk botten ---------- */
.scroll-dark .vision-inner, .scroll-dark .cta-inner, .scroll-dark .careers-inner { box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35); }
.scroll-dark .photo-card { background: var(--surface); }
.scroll-dark .nav .btn-primary { background: var(--btn-bg); color: var(--btn-fg); }
.scroll-dark .nav .btn-primary .icon-circle { background: rgba(125, 31, 74, 0.15); }
.scroll-dark .mega { background: var(--card-bg); }
.scroll-dark .theme-toggle { color: var(--muted); }
.scroll-dark .uc-art.tint-rose { background: var(--surface-2); }
.scroll-dark .tint-rose .dots { --dot: #ffb6dc; }
.scroll-dark .uc-tags li { color: var(--ink); }
.scroll-dark .hero-full { color: #fff; }

/* ---------- Reveal ---------- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); transition-delay: calc(var(--i, 0) * 70ms); }
.reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-anim, .hero-media { animation: none; opacity: 1; transform: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .marquee-track { animation: none; }
  .vision-shapes span { transform: translateY(22%); transition: none; }
  .plate, .plate-in, .layer-body, .btn, .tile-photo img, .faq summary .ph { transition: none; animation: none; }
}