/* Aliquam Consulting – utseende (design) för sidan Mobigo.
   Ändra bara här om du vet vad du gör: färger, typsnitt och avstånd styrs av den här filen. */
:root {
    --bg:        #000000;
    --bg-alt:    #000000;
    --paper:     #FFFFFF;
    --glass:     rgba(255,255,255,0.05);
    --glass-hi:  rgba(255,255,255,0.08);
    --border:    rgba(255,255,255,0.10);
    --border-hi: rgba(255,255,255,0.16);
    --ink:       #F3F3F4;
    --muted:     rgba(243,243,244,0.62);
    --faint:     rgba(243,243,244,0.42);
    --accent:    #8B3439;
    --accent-hi: #E36470;   /* the system's own dark-mode-safe tint of the brand red */
    --accent-deep: #6E2529;
  }
  /* light-theme override: redefining these custom properties inside a
     scoped section flips every child rule already written in terms of
     them (cards, icons, text, beams) — no separate light-mode markup,
     no structural changes, just a different set of token values. */
  section.theme-light {
    --bg:        #FFFFFF;
    --bg-alt:    #F5F4F1;
    --glass:     rgba(20,20,22,0.035);
    --glass-hi:  rgba(20,20,22,0.055);
    --border:    rgba(20,20,22,0.10);
    --border-hi: rgba(20,20,22,0.18);
    --ink:       #17171A;
    --muted:     rgba(23,23,26,0.62);
    --faint:     rgba(23,23,26,0.45);
    --accent-hi: #8B3439;
    background: var(--bg);
    color: var(--ink);
  }
  * { box-sizing: border-box; }
  html, body {
    margin: 0; padding: 0; width: 100%;
    background: var(--bg);
    font-family: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
  }
  a { text-decoration: none; color: inherit; }
  em { font-style: normal; color: var(--accent-hi); }

  .wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
  @media (min-width: 768px) { .wrap { padding: 0 40px; } }

  .eyebrow {
    font-family: "JetBrains Mono", monospace;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--faint);
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
  }
  .eyebrow .mark { color: var(--accent-hi); }

  h1.headline, h2.headline {
    font-family: "Space Grotesk", sans-serif;
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.12;
    margin: 0;
    color: var(--ink);
  }
  h1.headline { font-size: clamp(2.3rem, 4.6vw, 3.4rem); }
  h2.headline { font-size: clamp(1.8rem, 3.2vw, 2.4rem); }

  p.body-lg { font-size: 1.08rem; line-height: 1.65; color: var(--muted); margin: 0; }
  p.body-md { font-size: 0.94rem; line-height: 1.6; color: var(--muted); margin: 0; }

  .btn {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: "Manrope", sans-serif;
    font-size: 14.5px; font-weight: 600;
    padding: 13px 24px;
    border-radius: 4px 10px 4px 4px;
    transition: background 0.2s ease, transform 0.1s ease, border-color 0.2s ease;
  }
  .btn:active { transform: translateY(1px); }
  .btn.primary { background: var(--accent); color: #fff; }
  .btn.primary:hover { background: var(--accent-deep); }
  .btn.secondary { background: var(--glass); color: var(--ink); border: 1px solid var(--border); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
  .btn.secondary:hover { border-color: var(--border-hi); }

  .chrome-section { position: relative; overflow: hidden; }
  .chrome-section canvas.chromebg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
  .chrome-section .content { position: relative; z-index: 2; }

  .glass-card {
    background: var(--glass);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    border: 1px solid var(--border);
    border-radius: 4px 20px 4px 4px;
    box-shadow: 0 6px 16px -10px rgba(0,0,0,0.2);
  }
  .glass-card:hover { border-color: var(--border-hi); }

  :root { --section-pad: 72px; }
  @media (min-width: 641px) { :root { --section-pad: clamp(100px, calc(5.5vw + 50px), 136px); } }
  section { padding: var(--section-pad) 0; position: relative; background: var(--bg); color: var(--ink); }
  section.alt { background: var(--bg-alt); }

  /* visually hidden but read by search engines and screen readers */
  .sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

  header.site-header {
    position: sticky; top: 0; z-index: 50;
    background: rgba(10,10,12,0.72);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--border);
  }
  .header-inner { height: 76px; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; }
  @media (min-width: 768px) { .header-inner { padding: 0 40px; } }
  .logo-link { display: flex; align-items: center; gap: 12px; }
  .logo-link img { height: 34px; width: auto; filter: brightness(1.15) saturate(1.05); transition: transform .35s cubic-bezier(.16,1,.3,1); }
  .logo-link:hover img { transform: scale(1.07) rotate(-2deg); }
  .logo-text { display: flex; flex-direction: column; line-height: 1.1; }
  .logo-text .name { font-family: "Space Grotesk", sans-serif; font-weight: 600; font-size: 1rem; color: var(--ink); }
  .logo-text .sub { font-family: "JetBrains Mono", monospace; font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); }
  nav.main-nav { display: none; align-items: center; gap: 30px; }
  @media (min-width: 1024px) { nav.main-nav { display: flex; } }
  /* ===== mobile menu: below 1024px the same nav element becomes a dropdown panel under the
     header (one link list, so each page's "active" marking keeps working). Positioned absolute,
     not fixed — the header's backdrop-filter makes it the containing block for fixed children. ===== */
  .nav-toggle { display: none; }
  @media (max-width: 1023px) {
    .header-inner { gap: 12px; }
    .header-inner > .header-cta { margin-left: auto; white-space: nowrap; flex: none; }
    .nav-toggle { display: inline-flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px; width: 44px; height: 44px; margin-left: 0; padding: 0; background: transparent; border: 1px solid var(--border-hi); border-radius: 4px 10px 4px 4px; cursor: pointer; flex: none; }
    .nav-toggle span { display: block; width: 18px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform .3s cubic-bezier(.16,1,.3,1), opacity .2s ease; }
    .nav-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
    .nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
    .nav-toggle:focus-visible { outline: 2px solid var(--accent-hi); outline-offset: 2px; }
    header.site-header.nav-open nav.main-nav {
      display: flex; flex-direction: column; align-items: stretch; gap: 0;
      position: absolute; top: 100%; left: 0; right: 0;
      padding: 8px 24px 20px; background: #0a0a0c; border-bottom: 1px solid var(--border-hi);
      box-shadow: 0 24px 40px -16px rgba(0,0,0,0.7);
      max-height: calc(100vh - 76px); overflow-y: auto;
      animation: navDrop .28s cubic-bezier(.16,1,.3,1);
    }
    header.site-header.nav-open nav.main-nav a { font-size: 1.05rem; padding: 15px 0; border-bottom: 1px solid var(--border); color: var(--ink); }
    header.site-header.nav-open nav.main-nav a:last-child { border-bottom: none; }
    header.site-header.nav-open nav.main-nav a::after { display: none; }
    header.site-header.nav-open nav.main-nav a.active { color: var(--accent-hi); border-bottom: 1px solid var(--border); }
  }
  @media (max-width: 767px) { header.site-header.nav-open nav.main-nav { padding: 8px 24px 20px; } }
  @media (min-width: 768px) and (max-width: 1023px) { header.site-header.nav-open nav.main-nav { padding: 8px 40px 24px; } }
  @media (max-width: 399px) { .header-inner > .header-cta { padding-left: 14px; padding-right: 14px; font-size: 0.85rem; } }
  @media (max-width: 359px) {
    .header-inner { padding: 0 16px; gap: 10px; }
    .logo-link { gap: 8px; } .logo-link img { height: 30px; }
    .header-inner > .header-cta { padding: 11px 12px; font-size: 0.8rem; }
    .nav-toggle { margin-left: 0; }
    header.site-header.nav-open nav.main-nav { padding: 8px 16px 20px; }
  }
  @keyframes navDrop { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
  @media (prefers-reduced-motion: reduce) { header.site-header.nav-open nav.main-nav { animation: none; } .nav-toggle span { transition: none; } }
  nav.main-nav a { font-size: 0.9rem; color: var(--muted); padding: 8px 0; transition: color 0.15s; }
  nav.main-nav a:hover { color: var(--ink); }
  nav.main-nav a.active { color: var(--accent-hi); font-weight: 600; border-bottom: 2px solid var(--accent-hi); }

  footer.site-footer { background: #060607; color: var(--muted); border-top: 1px solid var(--border); padding: 56px 0 28px; }
  .footer-grid { display: grid; grid-template-columns: 1fr; gap: 40px; margin-bottom: 32px; }
  @media (min-width: 768px) { .footer-grid { grid-template-columns: 7fr 5fr; } }
  .footer-brand { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
  .footer-brand .mark { font-family: "JetBrains Mono", monospace; color: var(--accent-hi); }
  .footer-brand .name { font-family: "Space Grotesk", sans-serif; font-weight: 600; color: var(--ink); }
  .footer-eyebrow { font-family: "JetBrains Mono", monospace; font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--faint); margin-bottom: 8px; display: block; }
  .footer-bottom { padding-top: 24px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 12px; font-size: 0.85rem; color: var(--faint); }
  @media (min-width: 640px) { .footer-bottom { flex-direction: row; align-items: center; justify-content: space-between; } }
  /* ================= shared site footer (.sf) — the same on every page; markup in shared/site_footer.py ================= */
  .sf-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 36px; margin-bottom: 36px; }
  @media (min-width: 600px) and (max-width: 899px) { .sf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 32px; } .sf-col-brand { grid-column: 1 / -1; } }
  @media (min-width: 900px) { .sf-grid { grid-template-columns: 1.7fr 0.9fr 1.2fr; gap: 48px; } }
  .sf-brand { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
  .sf-logo { display: block; height: 40px; width: auto; flex: none; filter: brightness(1.15) saturate(1.05); }
  .sf-name { margin: 0; font-family: "Space Grotesk", sans-serif; font-weight: 600; font-size: 1.1rem; color: var(--ink); }
  .sf-sub { display: block; margin-top: 2px; font-family: "JetBrains Mono", monospace; font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); }
  .sf-tagline { margin: 0; max-width: 36ch; font-size: 0.88rem; line-height: 1.7; color: var(--faint); }
  .sf-eyebrow { display: block; margin-bottom: 12px; font-family: "JetBrains Mono", monospace; font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--faint); }
  .sf-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
  .sf-links li { font-size: 0.88rem; line-height: 1.5; color: var(--faint); }
  .sf-links a { font-size: 0.9rem; color: var(--muted); display: inline-block; transition: color .2s ease, transform .3s cubic-bezier(.16,1,.3,1); }
  .sf-links a:hover { color: var(--ink); transform: translateX(4px); }
  .sf-plain a:hover { transform: none; }
  .sf-team { list-style: none; margin: 16px 0 0; padding: 14px 0 0; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 7px; }
  .sf-team li { font-size: 0.82rem; line-height: 1.45; color: var(--muted); }
  .sf-team-role { color: var(--faint); }
  .sf-team-role::before { content: " · "; }
  .sf-bottom { padding-top: 24px; border-top: 1px solid var(--border); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; }
  .sf-bottom p { margin: 0; font-size: 0.85rem; color: var(--faint); }
  .sf-bottom .sf-eyebrow { margin: 0; }
  @media (max-width: 1023px), (pointer: coarse) { .sf-links { gap: 0; } .sf-links li { padding: 6px 0; } .sf-links a { padding: 2px 0; } }
  @media (prefers-reduced-motion: reduce) { .sf-links a { transition: none; } }



  /* ================= base additions ================= */
  .icon { display: inline-flex; width: 20px; height: 20px; vertical-align: middle; flex-shrink: 0; }
  .icon svg { width: 100%; height: 100%; display: block; }
  .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
  section[id] { scroll-margin-top: 76px; }

  /* ================= hero ================= */
  #hero-section { padding: clamp(64px, 7vw, 100px) 0; min-height: calc(100vh - 76px); min-height: calc(100svh - 76px); display: flex; align-items: center; }
  #hero-section .wrap { width: 100%; }
  .hero-intro { max-width: 720px; margin: 0 auto; text-align: center; display: flex; flex-direction: column; align-items: center; }
  .hero-intro .headline { max-width: 640px; }
  .hero-intro .eyebrow { justify-content: center; }
  p.body-lg.hero-lead { margin: 22px auto 0; max-width: 540px; }
  .hero-ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; margin-top: 30px; }
  /* phones: one equal-width stack instead of three ragged, differently-sized centered buttons,
     with the main action ("Kontakta oss om Mobigo") first rather than third */
  @media (max-width: 479px) {
    .hero-ctas { gap: 12px; }
    .hero-ctas .btn { flex: 1 1 100%; justify-content: center; }
    .hero-ctas .btn.primary { order: -1; }
    .katalog-spec > .btn { width: 100%; justify-content: center; }
  }
  .partner-badge { display: inline-flex; align-items: center; gap: 14px; margin-top: 24px; padding: 8px 20px 8px 8px; border: 1.5px solid var(--accent-hi); border-radius: 999px; background: rgba(227,100,112,0.10); }
  .partner-badge-top { margin-top: 0; margin-bottom: 24px; }
  .partner-badge .logo-chip { display: flex; align-items: center; justify-content: center; padding: 7px 10px; border-radius: 999px; background: #fff; flex: none; }
  .partner-badge .logo-chip img { display: block; height: 20px; width: auto; }
  .partner-badge .badge-text { display: flex; flex-direction: column; line-height: 1.25; }
  .partner-badge .badge-text b { font-family: "Manrope", sans-serif; font-size: 13.5px; font-weight: 700; color: var(--ink); }
  .partner-badge .badge-text span { font-family: "JetBrains Mono", monospace; font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-hi); }

  /* device mockups: a "Safari_01"-style browser-chrome card for the desktop screenshot, with a
     realistic phone frame centered on top and a bottom fade — scaled up like the reference */
  .mock-stage { position: relative; width: 100%; max-width: 720px; margin: 72px auto 0; }
  .desktop-wrap { position: relative; width: 100%; border-radius: 12px; overflow: hidden;
    border: 1px solid #27272a; background: #18181b; box-shadow: 0 24px 50px -20px rgba(0,0,0,0.55); }
  .desktop-wrap .browser-bar { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; background: #18181b; border-bottom: 1px solid #27272a; }
  .desktop-wrap .browser-dots { display: flex; align-items: center; gap: 8px; }
  .desktop-wrap .browser-dots span { width: 12px; height: 12px; border-radius: 50%; flex: none; }
  .desktop-wrap .browser-dots span:nth-child(1) { background: #f87171; }
  .desktop-wrap .browser-dots span:nth-child(2) { background: #facc15; }
  .desktop-wrap .browser-dots span:nth-child(3) { background: #22c55e; }
  .desktop-wrap .browser-address { flex: 1; margin: 0 16px; max-width: 420px; height: 20px; border-radius: 6px; background: #27272a; }
  /* preview area is sized to the screenshot's own aspect ratio (no forced 16:9), so the image
     fills the card edge-to-edge with no letterboxing and nothing gets cropped */
  .desktop-wrap .browser-preview { position: relative; width: 100%; line-height: 0; }
  .desktop-wrap .browser-preview img { display: block; width: 100%; height: auto; }
  .phone { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 170px; z-index: 25; }
  /* explicit ratio so Safari never has to infer the inline SVG's height from the viewBox */
  .phone svg { display: block; width: 100%; height: auto; aspect-ratio: 433 / 882; }
  .fade { position: absolute; left: 0; right: 0; bottom: -2px; height: 160px; z-index: 30; pointer-events: none; border-radius: 10px;
    background: linear-gradient(to top, var(--bg), rgba(0,0,0,0.7), transparent); }
  @media (min-width: 640px) { .mock-stage { max-width: 880px; margin-top: 84px; } .phone { width: 230px; } .fade { height: 200px; } }
  @media (min-width: 900px) { .mock-stage { max-width: 1020px; margin-top: 100px; } .phone { width: 280px; transform: translate(-50%, -55%); } .fade { height: 230px; } }
  @media (min-width: 1180px) { .mock-stage { max-width: 1100px; margin-top: 110px; } .phone { width: 320px; } .fade { height: 260px; } }

  @keyframes mockIn { from { opacity: 0; filter: blur(8px); transform: translateY(16px); } to { opacity: 1; filter: blur(0); transform: none; } }
  @keyframes phoneIn { from { opacity: 0; transform: translate(-50%, calc(-50% + 16px)) scale(.85); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
  /* below 900px the phone is taller than the desktop card relative to its width, so centering it
     made its bottom hang below the card — past the bottom fade, which then cut across the phone
     with its lower part sticking out. Here the phone sits on the card's bottom edge instead
     (rising above the card), so the fade covers both devices evenly */
  @media (max-width: 899px) {
    .mock-stage .phone { top: auto; bottom: 0; transform: translateX(-50%); transform-origin: 50% 100%; }
    @keyframes phoneInLow { from { opacity: 0; transform: translate(-50%, 16px) scale(.9); } to { opacity: 1; transform: translateX(-50%) scale(1); } }
  }
  @media (max-width: 639px) { .mock-stage { margin-top: 104px; } .mock-stage .phone { width: 150px; } }
  @media (max-width: 359px) { .mock-stage { margin-top: 128px; } }
  @media (min-width: 640px) and (max-width: 899px) { .mock-stage { margin-top: 120px; } }
  @media (min-width: 900px) { @keyframes phoneIn { from { opacity: 0; transform: translate(-50%, calc(-55% + 16px)) scale(.85); } to { opacity: 1; transform: translate(-50%, -55%) scale(1); } } }
  @media (prefers-reduced-motion: no-preference) {
    .js .desktop-wrap { animation: mockIn .8s cubic-bezier(.16,1,.3,1) .1s backwards; }
    .js .phone { animation: phoneIn .8s cubic-bezier(.16,1,.3,1) .35s backwards; }
    @media (max-width: 899px) { .js .mock-stage .phone { animation-name: phoneInLow; } }
    .js .fade { animation: mockIn .6s ease .35s backwards; }
  }

  /* ================= capa: four capability cards, feature-grid layout ================= */
  .capa-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; margin-top: clamp(40px, 5vw, 64px); }
  @media (min-width: 900px) { .capa-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  /* five cards reads better as 3+2 than 2+2+1 (an orphaned single card on its own row) */
  @media (min-width: 1100px) { .capa-grid.grid-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  @media (min-width: 900px) and (max-width: 1099px) { .capa-grid.grid-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  .capa-cell { position: relative; display: flex; flex-direction: column; gap: 20px; min-width: 0; padding: 26px;
    background: #FFFFFF; border: 1px solid var(--border-hi); border-radius: 4px 20px 4px 4px; text-decoration: none; color: inherit;
    transition: transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s cubic-bezier(.16,1,.3,1), border-color .3s ease; }
  .capa-cell:hover { transform: translateY(-4px); box-shadow: 0 16px 32px -12px rgba(20,20,20,0.14); border-color: var(--accent-hi); }
  @media (min-width: 640px) { .capa-cell { flex-direction: row; align-items: flex-start; } }
  .capa-icon { flex: none; width: 56px; height: 56px; border-radius: 4px 16px 4px 4px; background: rgba(139,52,57,0.08); display: flex; align-items: center; justify-content: center; }
  .capa-icon .icon { width: 26px; height: 26px; color: var(--accent-hi); }
  .capa-body { flex: 1; min-width: 0; display: flex; flex-direction: column; height: 100%; }
  .capa-cell h3 { margin: 0 0 8px; font-family: "Space Grotesk", sans-serif; font-weight: 600; font-size: clamp(1.2rem, 1.1vw + 0.95rem, 1.4rem); line-height: 1.26; letter-spacing: -0.015em; color: var(--ink); }
  .capa-cell p { margin: 0; font-size: 0.95rem; line-height: 1.65; color: var(--muted); }


  /* ================= integrationer: split layout + spotlight tile cluster ================= */
  .int-split { display: flex; flex-direction: column; gap: 48px; align-items: center; }
  .int-intro { max-width: 480px; display: flex; flex-direction: column; align-items: center; text-align: center; }
  .int-intro .eyebrow { justify-content: center; }
  .int-intro .headline { max-width: 460px; }
  .int-intro .body-lg { margin: 16px auto 0; max-width: 440px; }
  .int-cluster-col { width: 100%; display: flex; justify-content: center; }
  @media (min-width: 1040px) {
    .int-split { flex-direction: row; align-items: center; justify-content: space-between; gap: 24px; }
    .int-intro { flex: 0 0 auto; text-align: left; align-items: flex-start; }
    .int-intro .eyebrow { justify-content: flex-start; }
    .int-cluster-col { flex: 1 1 auto; }
  }

  .integration-cluster {
    position: relative;
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    width: fit-content; margin: 0 auto; padding: 30px;
    -webkit-mask-image: radial-gradient(circle, black 0%, black 42%, transparent 60%);
            mask-image: radial-gradient(circle, black 0%, black 42%, transparent 60%);
  }
  .cluster-row { display: flex; gap: 10px; justify-content: center; position: relative; z-index: 1; }
  .cluster-badge {
    position: relative; width: 78px; height: 78px; border-radius: 14px;
    background: #FFFFFF; border: 1px solid var(--border-hi);
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 6px 20px -12px rgba(23,23,26,0.22); flex-shrink: 0; overflow: hidden;
  }
  .cluster-badge img { width: 40px; height: 40px; object-fit: contain; border-radius: 8px; }
  .cluster-badge.center {
    background: #FFFFFF; border: 1.5px solid rgba(139,52,57,0.35);
    box-shadow: 0 10px 26px -12px rgba(23,23,26,0.28); color: var(--accent-hi);
  }
  .cluster-badge.center img { width: 30px; height: auto; object-fit: contain; border-radius: 0; }
  @media (max-width: 480px) {
    .integration-cluster { padding: 16px; }
    .cluster-row { gap: 6px; }
    .cluster-badge { width: 52px; height: 52px; border-radius: 11px; }
    .cluster-badge img { width: 26px; height: 26px; }
    .cluster-badge.center img { width: 22px; }
  }

  /* ================= katalog: filterable feature catalog ================= */
  .katalog-filter-label { display: block; margin-top: clamp(32px, 4vw, 44px); font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); }
  .katalog-tabs { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 10px; }
  .katalog-tab { all: unset; box-sizing: border-box; cursor: pointer; padding: 10px 18px; border-radius: 999px; border: 1px solid var(--border-hi); font-family: "Manrope", sans-serif; font-size: 0.86rem; font-weight: 600; color: var(--muted); transition: background .2s ease, border-color .2s ease, color .2s ease; }
  .katalog-tab:hover { border-color: var(--accent-hi); color: var(--ink); }
  .katalog-tab.active { background: var(--accent-hi); border-color: var(--accent-hi); color: #fff; }
  .katalog-grid { margin-top: 28px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1px; background: var(--border); }
  @media (min-width: 640px) { .katalog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (min-width: 1024px) { .katalog-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  .katalog-item { padding: 22px 24px; background: #101013; }
  .katalog-item h3 { margin: 0 0 8px; font-family: "Space Grotesk", sans-serif; font-weight: 600; font-size: 1rem; line-height: 1.3; letter-spacing: -0.01em; color: var(--ink); }
  .katalog-q { all: unset; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; gap: 14px; width: 100%; cursor: default; }
  .katalog-plus { display: none; }
  .katalog-a { display: grid; grid-template-rows: 1fr; }
  .katalog-a-inner { overflow: hidden; min-height: 0; }
  /* ===== phones: swipeable tab row + titles-only accordion list ===== */
  @media (max-width: 639px) {
    .katalog-tabs {
      flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity;
      margin-left: -24px; margin-right: -24px; padding: 2px 24px 4px; scroll-padding-inline: 24px; scrollbar-width: none;
      --fade-l: 0px; --fade-r: 44px;
      -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent 100%);
              mask-image: linear-gradient(90deg, transparent 0, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent 100%);
    }
    /* edges only fade where there's more to swipe toward */
    .katalog-tabs.scrolled { --fade-l: 32px; }
    .katalog-tabs.at-end { --fade-r: 0px; }
    .katalog-tabs::-webkit-scrollbar { display: none; }
    .katalog-tab { flex: none; white-space: nowrap; scroll-snap-align: start; }
    .katalog-grid { margin-top: 18px; }
    .katalog-item { padding: 0; }
    .katalog-item h3 { margin: 0; }
    .katalog-q { cursor: pointer; padding: 16px 18px 16px 20px; min-height: 58px; }
    .katalog-q:focus-visible { outline: 2px solid var(--accent-hi); outline-offset: -2px; }
    .katalog-plus { display: block; flex: none; position: relative; width: 26px; height: 26px; border: 1px solid var(--border-hi); border-radius: 50%; transition: border-color .25s ease, background .25s ease; }
    .katalog-plus::before, .katalog-plus::after { content: ""; position: absolute; top: 50%; left: 50%; width: 10px; height: 1.5px; border-radius: 2px; background: var(--accent-hi); transform: translate(-50%, -50%); transition: transform .3s cubic-bezier(.16,1,.3,1), opacity .3s ease; }
    .katalog-plus::after { transform: translate(-50%, -50%) rotate(90deg); }
    .katalog-item.open .katalog-plus { border-color: var(--accent-hi); background: rgba(227,100,112,0.10); }
    .katalog-item.open .katalog-plus::after { transform: translate(-50%, -50%) rotate(0deg); opacity: 0; }
    .katalog-a { grid-template-rows: 0fr; transition: grid-template-rows .35s cubic-bezier(.16,1,.3,1); }
    .katalog-item.open .katalog-a { grid-template-rows: 1fr; }
    .katalog-a-inner { visibility: hidden; transition: visibility 0s .35s; }
    .katalog-item.open .katalog-a-inner { visibility: visible; transition-delay: 0s; }
    .katalog-a p { padding: 0 20px 18px; }
  }
  @media (prefers-reduced-motion: reduce) { .katalog-a, .katalog-a-inner, .katalog-plus, .katalog-plus::before, .katalog-plus::after { transition: none !important; } }
  .katalog-item p { margin: 0; font-size: 0.86rem; line-height: 1.55; color: var(--muted); }
  .katalog-count { margin-top: 16px; font-family: "JetBrains Mono", monospace; font-size: 11.5px; letter-spacing: 0.06em; color: var(--faint); }
  .katalog-spec { margin-top: clamp(36px, 5vw, 56px); padding: clamp(26px, 3.4vw, 38px); display: flex; flex-direction: column; gap: 6px; align-items: flex-start;
    background: var(--glass); border: 1px solid var(--border-hi); border-radius: 4px 24px 4px 4px; }
  @media (min-width: 860px) { .katalog-spec { flex-direction: row; align-items: center; justify-content: space-between; gap: 36px; } }
  .katalog-spec-copy { max-width: 520px; }
  .katalog-spec-copy h3 { margin: 8px 0 8px; font-family: "Space Grotesk", sans-serif; font-weight: 600; font-size: clamp(1.2rem, 1.8vw, 1.4rem); line-height: 1.3; letter-spacing: -0.01em; color: var(--ink); }
  .katalog-spec-copy p { margin: 0; color: var(--muted); font-size: 0.96rem; line-height: 1.6; }
  .katalog-spec .btn { flex: none; }

  /* ================= om mobigo: text-left / big mockups-right intro split ================= */
  .om-top-split { display: flex; flex-direction: column-reverse; gap: 40px; }
  .om-mockups-col { width: 100%; display: flex; justify-content: center; }
  .om-text-col { max-width: 520px; }
  @media (min-width: 1040px) {
    /* .wrap tops out at 1180px total (≈1100px of content once padding is subtracted), so the
       text column is trimmed down here specifically to leave real room for a big mockup
       without the two ever exceeding that fixed budget */
    .om-top-split { flex-direction: row; align-items: center; gap: 40px; }
    .om-text-col { flex: 0 0 400px; }
    .om-mockups-col { flex: 1 1 auto; min-width: 0; justify-content: flex-end; }
  }
  /* big desktop mockup with the phone layered on top, anchored to its right edge
     (not centered like the hero, and not fully separate beside it either) */
  .om-mockups { position: relative; width: 100%; max-width: 640px; padding-bottom: 20%; }
  @media (min-width: 640px)  { .om-mockups { max-width: 760px; } }
  @media (min-width: 1040px) { .om-mockups { max-width: 660px; } }
  .om-mockups .desktop-wrap { width: 100%; }
  .om-mockups .phone {
    position: absolute; top: auto; bottom: -8%; right: 2%; left: auto;
    transform: none; width: 30%; z-index: 5;
  }
  @media (min-width: 640px) { .om-mockups .phone { right: 0%; bottom: -10%; } }
  /* the phone here is absolutely positioned but anchored bottom-right, not centered, so it
     needs the plain fade/rise entrance instead of the hero's translate(-50%,-50%)-based pop-in */
  @media (prefers-reduced-motion: no-preference) {
    .js .om-mockups .phone { animation: mockIn .8s cubic-bezier(.16,1,.3,1) .3s backwards; }
  }

  /* ================= om mobigo: minimalist bento grid ==============================
     "Det här ingår" / "Branscher" / "Behörighetsnivåer" as three bordered tiles instead
     of a flat stacked layout — two square-ish tiles side by side, one wide tile below
     holding the three license levels. Deliberately plain: thin border, no shadow/fill,
     so it reads as a quick reference grid rather than a set of marketing cards. */
  .bento-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; margin-top: clamp(56px, 7vw, 88px); }
  @media (min-width: 860px) { .bento-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  .bento-tile { padding: clamp(24px, 2.6vw, 32px); background: var(--glass); border-radius: 4px 22px 4px 4px; }
  .bento-wide { grid-column: 1 / -1; }
  .glance-label { display: flex; align-items: center; gap: 10px; margin: 0 0 22px;
    font-family: "Space Grotesk", sans-serif; font-weight: 600;
    font-size: clamp(1.15rem, 1vw + 0.9rem, 1.35rem); letter-spacing: -0.01em; color: var(--ink); }
  .glance-label .icon { flex: none; width: 22px; height: 22px; color: var(--accent-hi); }
  /* plain, editorial rows — a short heading and a sentence of real prose underneath,
     separated only by a soft divider, not boxed up like dashboard widgets */
  .glance-row { padding: 16px 0; border-top: 1px solid var(--border); }
  .glance-row:first-of-type { padding-top: 0; border-top: none; }
  .glance-row b { display: block; margin-bottom: 6px; font-family: "Space Grotesk", sans-serif; font-weight: 600; font-size: 0.95rem; color: var(--ink); }
  .glance-row p { margin: 0; font-size: 0.92rem; line-height: 1.65; color: var(--muted); }

  /* ================= om mobigo: permission levels (nested in the bento-wide tile) ================= */
  .levels-intro { margin: 0 0 22px; font-size: 0.95rem; color: var(--muted); }
  /* editorial numbering instead of a UI-style divider rule — a soft, oversized numeral
     sitting above the heading, the way a magazine feature list would number things */
  .levels-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }
  @media (min-width: 640px) { .levels-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; } }
  .level-card { display: flex; flex-direction: column; gap: 6px; }
  .level-n { font-family: "Space Grotesk", sans-serif; font-weight: 600; font-size: 1.7rem; line-height: 1; color: var(--accent-hi); opacity: 0.5; margin-bottom: 2px; }
  .level-card h3 { margin: 0; font-family: "Space Grotesk", sans-serif; font-weight: 600; font-size: 1rem; line-height: 1.3; letter-spacing: -0.01em; color: var(--ink); }
  .level-card p { margin: 0; font-size: 0.85rem; line-height: 1.5; color: var(--muted); }
  .levels-outro { margin: 24px 0 0; padding-top: 18px; border-top: 1px solid var(--border); font-size: 0.86rem; line-height: 1.55; color: var(--muted); }

  .arch-faq .eyebrow { margin-bottom: 10px; }
  .arch-faq h4 { margin: 0 0 10px; font-family: "Space Grotesk", sans-serif; font-weight: 600; font-size: clamp(1.1rem, 1.6vw, 1.3rem); line-height: 1.3; letter-spacing: -0.01em; color: var(--ink); }
  .arch-faq p { margin: 0 0 20px; color: var(--muted); font-size: 0.96rem; line-height: 1.6; max-width: 640px; }

  /* ================= footer (this page's own content) ================= */
  /* the page-wide closing CTA, folded into the footer itself instead of being its own
     section — a banner above the nav/contact grid, separated by a bottom border */
  .footer-cta { display: flex; flex-direction: column; gap: 22px; align-items: flex-start;
    padding-bottom: clamp(32px, 4vw, 48px); margin-bottom: clamp(32px, 4vw, 48px); border-bottom: 1px solid var(--border); }
  @media (min-width: 860px) { .footer-cta { flex-direction: row; align-items: center; justify-content: space-between; gap: 40px; } }
  .footer-cta-copy { max-width: 620px; }
  .footer-cta-copy .headline { color: var(--ink); }
  .footer-cta-copy .body-lg { margin-top: 14px; }
  .footer-cta .btn { flex: none; }

  .footer-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; margin-bottom: 32px; }
  @media (min-width: 600px) and (max-width: 899px) { .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 32px; } }
  @media (min-width: 900px) { .footer-grid { grid-template-columns: 1.6fr 0.8fr 1.1fr 1.1fr; gap: 32px; } }
  .footer-col-brand .footer-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
  .footer-brand .mark { font-family: "JetBrains Mono", monospace; font-weight: 700; font-size: 20px; color: var(--accent-hi); }
  .footer-name { margin: 0; font-family: "Space Grotesk", sans-serif; font-weight: 600; font-size: 1.1rem; color: var(--ink); }
  .footer-sub { display: block; margin-top: 2px; font-family: "JetBrains Mono", monospace; font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); }
  .footer-tagline { margin: 0; max-width: 34ch; font-size: 0.88rem; line-height: 1.7; color: var(--faint); }
  .footer-badge { margin-top: 16px; display: flex; align-items: center; gap: 8px; }
  .footer-badge .mark2 { font-family: "JetBrains Mono", monospace; font-weight: 700; font-size: 11px; color: var(--accent-hi); }
  .footer-badge span:last-child { font-family: "JetBrains Mono", monospace; font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); }
  .footer-col p { margin: 0 0 8px; font-size: 0.86rem; color: var(--faint); line-height: 1.7; }
  .footer-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
  .footer-links a { font-size: 0.9rem; color: var(--muted); display: inline-block; transition: color .2s ease, transform .3s cubic-bezier(.16,1,.3,1); }
  .footer-links a:hover { color: var(--ink); transform: translateX(4px); }
  @media (max-width: 1023px), (pointer: coarse) {
    .footer-links { gap: 0; } .footer-links a { padding: 7px 0; }
    .katalog-tab { min-height: 42px; display: inline-flex; align-items: center; }
  }
  .footer-legal-list { gap: 8px; }
  .footer-legal-list li { font-size: 0.86rem; color: var(--faint); }
  .footer-team { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
  .footer-team-row { font-size: 0.82rem !important; color: var(--muted) !important; }
  .footer-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; }
  .footer-bottom p { margin: 0; font-size: 0.85rem; color: var(--faint); }
  .footer-bottom .footer-eyebrow { color: var(--faint); }

  @media (prefers-reduced-motion: reduce) { .capa-cell, .case-card, .katalog-tab { transition: none; } }

  /* ================= motion (all of it off for prefers-reduced-motion) ================= */
  .scroll-progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 70; background: var(--accent-hi); transform: scaleX(0); transform-origin: 0 50%; pointer-events: none; }

  /* nav: underline slides in from the left on hover */
  nav.main-nav a { position: relative; }
  nav.main-nav a:not(.active)::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 2px; background: var(--accent-hi); transform: scaleX(0); transform-origin: 0 50%; transition: transform .35s cubic-bezier(.16,1,.3,1); }
  nav.main-nav a:not(.active):hover::after { transform: scaleX(1); }

  /* buttons: lift, glow, and the arrow nudges forward */
  .btn { transition: background 0.2s ease, transform 0.25s cubic-bezier(.16,1,.3,1), border-color 0.2s ease, box-shadow 0.25s ease; }
  .btn:hover { transform: translateY(-2px); }
  .btn:active { transform: translateY(1px); }
  .btn.primary:hover { box-shadow: 0 12px 22px -12px rgba(139,52,57,0.75); }
  .btn .icon { transition: transform .25s cubic-bezier(.16,1,.3,1); }
  .btn:hover .icon { transform: translateX(4px); }
  .contact-actions a { transition: transform .25s cubic-bezier(.16,1,.3,1), background .2s ease, border-color .2s ease, box-shadow .25s ease; }
  .contact-actions a:hover { transform: translateY(-2px); }

  /* form: fields respond to focus, success message slides in */
  .field input, .field textarea { transition: border-color .2s ease, background .2s ease, box-shadow .25s ease; }
  .field input:focus, .field textarea:focus { box-shadow: 0 0 0 4px rgba(139,52,57,0.12); }
  @keyframes feedbackIn { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
  .form-feedback.show { animation: feedbackIn .5s cubic-bezier(.16,1,.3,1) backwards; }

  @keyframes revealUp    { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
  @keyframes revealLeft  { from { opacity: 0; transform: translateX(-40px); } to { opacity: 1; transform: none; } }
  @keyframes revealRight { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: none; } }
  @keyframes revealScale { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }
  @keyframes tilePop     { from { opacity: 0; transform: translateY(18px) scale(.88); } to { opacity: 1; transform: none; } }
  @keyframes tileFloat   { from { transform: translateY(0); } to { transform: translateY(-4px); } }

  @media (prefers-reduced-motion: no-preference) {
    /* scroll reveals: hidden only until JS marks them in view. `backwards` fill (not `forwards`) so hover transforms keep working afterwards */
    .js .reveal { opacity: 0; }
    .js .reveal.is-in { opacity: 1; animation: revealUp .9s cubic-bezier(.16,1,.3,1) backwards; animation-delay: var(--d, 0s); }
    .js .reveal.from-left.is-in  { animation-name: revealLeft; }
    .js .reveal.from-right.is-in { animation-name: revealRight; }
    .js .reveal.from-scale.is-in { animation-name: revealScale; }

    /* hero: staggered entrance on load, then the tiles drift gently */
    .js #hero-section .eyebrow   { animation: revealUp .9s cubic-bezier(.16,1,.3,1) .05s backwards; }
    .js #hero-section h1         { animation: revealUp .9s cubic-bezier(.16,1,.3,1) .15s backwards; }
    .js #hero-section p.body-lg  { animation: revealUp .9s cubic-bezier(.16,1,.3,1) .28s backwards; }
    .js #hero-section .hero-ctas { animation: revealUp .9s cubic-bezier(.16,1,.3,1) .42s backwards; }
    .js .cluster-badge {
      animation: tilePop .85s cubic-bezier(.16,1,.3,1) calc(.3s + var(--i, 0) * .09s) backwards,
                 tileFloat 7s ease-in-out calc(1.7s + var(--i, 0) * .35s) infinite alternate;
    }
  }