/* Aliquam Consulting – utseende (design) för sidan Hem.
   Ä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; } }



  /* ================= reused verbatim from the Integrationer build: hero-grid + the
     integration-cluster/cluster-row/cluster-badge spotlight component. These live in a
     page-specific CSS block in the master file (between #hero-section and the header/footer
     rules) that the shared foundation extraction skips, so they're copied in directly here
     rather than redefined from scratch. ================= */
  /* minmax(0, 1fr) rather than a bare 1fr — a bare 1fr track's implicit minimum is "auto",
     which lets it grow past the available space to fit a child's min-content width (exactly
     what was happening here at narrow viewports); minmax(0, ...) removes that floor */
  .hero-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; align-items: center; }
  @media (min-width: 1024px) { .hero-grid { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); } }
  .integration-cluster {
    position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px;
    width: fit-content; margin: 0 auto; padding: 40px;
  }
  .cluster-row { display: flex; gap: 14px; justify-content: center; position: relative; z-index: 1; }
  .cluster-badge {
    position: relative; width: 104px; height: 104px; border-radius: 18px;
    background: rgba(255,255,255,0.045); border: 1px solid rgba(255,255,255,0.08);
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 6px 16px -10px rgba(0,0,0,0.5); flex-shrink: 0; overflow: hidden;
  }
  .cluster-badge img { width: 54px; height: 54px; object-fit: contain; border-radius: 10px; }
  .cluster-badge.center { background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.14); color: var(--accent-hi); }
  @media (max-width: 480px) {
    .integration-cluster { padding: 20px; }
    .cluster-row { gap: 8px; }
    .cluster-badge { width: 66px; height: 66px; border-radius: 14px; }
    .cluster-badge img { width: 34px; height: 34px; }
  }

  /* ================= 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: split layout (text left, connected-systems cluster right) ================= */
  #hero-section { position: relative; overflow: hidden; padding: clamp(56px, 7vw, 90px) 0; min-height: calc(100vh - 76px); min-height: calc(100svh - 76px); display: flex; flex-direction: column; justify-content: center; }
  /* absolutely-positioned children (the canvas, the scrim) stack above static ones by
     default regardless of DOM order, so the text wrap needs an explicit stacking context
     to actually land on top instead of being hidden behind them */
  #hero-section .wrap { position: relative; z-index: 2; width: 100%; }
  .hero-intro { max-width: 620px; }
  /* "verksamhetssystem" is an 18-character unbreakable Swedish compound word — at the
     headline's minimum clamp() size it's wider than a narrow single-column viewport, so it
     needs an explicit break-word fallback (the shared h1.headline rule has none) */
  .hero-intro .headline { text-align: left; overflow-wrap: break-word; word-break: break-word; }
  p.body-lg.hero-lead { margin: 22px 0 0; max-width: 480px; }
  .hero-ctas { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 32px; }
  @media (max-width: 479px) { .hero-ctas { gap: 12px; } .hero-ctas .btn { flex: 1 1 100%; justify-content: center; } }
  /* plain and quiet — a small credit line, not a decorative pill/button. No border, no
     fill, no chip behind the logo; just the mark, a thin divider, and a label. */
  .partner-badge { display: inline-flex; align-items: center; gap: 10px; margin-top: 28px; padding: 0; border: none; border-radius: 0; background: none; }
  .partner-badge .logo-chip { display: flex; align-items: center; padding: 0; border-radius: 0; background: none; flex: none; }
  .partner-badge .logo-chip img { display: block; height: 16px; width: auto; opacity: 0.85; }
  .partner-badge .badge-text { display: flex; flex-direction: row; align-items: center; gap: 10px; line-height: 1; }
  .partner-badge .badge-text::before { content: ""; width: 1px; height: 14px; background: var(--border-hi); }
  .partner-badge .badge-text b { font-family: "JetBrains Mono", monospace; font-size: 10.5px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); }

  /* the cluster on the home hero is bigger and un-masked (no spotlight fade) — the home page
     is where visitors should read every logo clearly, unlike the smaller supporting-proof use
     of this same component elsewhere on the site */
  /* the particle "three pillars" animation mounts here — needs real pixel dimensions for
     the WebGL canvas, so this is sized explicitly rather than left to shrink-to-fit */
  /* full-bleed hero background now, not a boxed side panel — the pillar group itself is
     shifted right in world space (see the resize handler) so it sits behind/beside the
     text on wide viewports rather than dead-centered behind it */
  .pillar-canvas-wrap { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
  .pillar-canvas-wrap canvas { display: block; width: 100%; height: 100%; }
  .hero-scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(90deg, var(--bg) 0%, rgba(0,0,0,0.86) 30%, rgba(0,0,0,0.42) 55%, transparent 78%); }
  /* <=860px: the animation sits on top of the hero as its own block, with the copy underneath
     (not behind the text). No scrim needed; top/bottom edges fade softly into the page */
  @media (max-width: 860px) {
    #hero-section { justify-content: flex-start; padding-top: 4px; }
    .pillar-canvas-wrap {
      position: relative; inset: auto; width: 100%; flex: none; height: clamp(250px, 68vw, 460px); margin-bottom: 0;
      background: radial-gradient(ellipse 46% 42% at 50% 52%, rgba(139,52,57,0.16), transparent 72%);
      -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 6%, #000 92%, transparent 100%);
              mask-image: linear-gradient(180deg, transparent 0%, #000 6%, #000 92%, transparent 100%);
    }
    .pillar-canvas-wrap canvas { position: absolute; inset: 0; }
    .hero-scrim { display: none; }
  }


  /* ================= capa: capability cards, feature-grid layout (theme-aware: white on light
     sections, glass on dark ones, rather than a hardcoded background either way) ================= */
  .capa-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; margin-top: clamp(40px, 5vw, 64px); }
  @media (min-width: 640px) { .capa-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (min-width: 1100px) { .capa-grid.grid-3 { grid-template-columns: repeat(3, 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; }
  section:not(.theme-light) .capa-cell { background: var(--glass); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
  .capa-cell:hover { transform: translateY(-4px); box-shadow: 0 16px 32px -12px rgba(20,20,20,0.14); border-color: var(--accent-hi); }
  /* row-icon layout waits for a wider breakpoint than the grid's own 2-column one — at
     exactly 640px both switching at once left each card too narrow for icon + text side by side */
  @media (min-width: 860px) { .capa-cell { flex-direction: row; align-items: flex-start; } }
  .capa-cell.featured { padding: 34px; }
  .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; }
  section:not(.theme-light) .capa-icon { background: rgba(227,100,112,0.14); }
  .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%; }
  /* Swedish compound words (verksamhetsutveckling, systemarkitektur, ...) run long with no
     natural break point — every card heading and paragraph gets a break-word fallback so a
     narrow tile can't be forced wider than its column by a single unbreakable word */
  .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); overflow-wrap: break-word; word-break: break-word; }
  .capa-cell p { margin: 0; font-size: 0.95rem; line-height: 1.65; color: var(--muted); overflow-wrap: break-word; word-break: break-word; min-width: 0; }
  .capa-cell .btn { margin-top: 16px; align-self: flex-start; }
  .capa-list { list-style: none; margin: 14px 0 0; padding: 16px 0 0; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 9px; }
  .capa-list li { display: flex; align-items: flex-start; gap: 8px; font-size: 0.86rem; line-height: 1.5; color: var(--muted); }
  .capa-list .icon { width: 15px; height: 15px; flex: none; margin-top: 2px; color: var(--accent-hi); }

  /* ================= "Vi kan även": a bento mosaic instead of another uniform grid —
     one big featured tile, one wide tile beside it, two small tiles under that, and a
     full-width strip along the bottom, so the shape itself signals "more of these exist"
     rather than presenting five equal, interchangeable boxes ================= */
  /* mobile-first: one column, every tile icon-on-top (consistent, and the narrowest layout
     can't afford the icon eating horizontal space). 640–1199: two columns — the featured tile
     spans the full width with its icon beside the text, the other four pair up 2+2.
     1200+: the full asymmetric mosaic. The 4-column mosaic only starts at 1200 because below
     that the two small squares get too narrow for the Swedish headings. */
  .bento-vka { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: clamp(40px, 5vw, 64px); }
  .bento-vka .capa-cell { margin: 0; height: 100%; flex-direction: column; align-items: flex-start; }
  .bi-1.featured .capa-icon { width: 56px; height: 56px; }
  .bi-1.featured .capa-icon .icon { width: 26px; height: 26px; }
  .bi-1.featured h3 { font-size: clamp(1.35rem, 1.3vw + 1rem, 1.6rem); }
  /* the "Läs mer" button sits beside the heading on wider screens; on narrow screens (where it
     would wrap under the heading, ~566px) it moves below the last card instead */
  .vka-cta-bottom { display: none; margin-top: 24px; }
  @media (max-width: 599px) {
    .vka-cta-top { display: none !important; }
    .vka-cta-bottom { display: block; }
    .vka-cta-bottom .btn { width: 100%; justify-content: center; }
  }
  @media (min-width: 640px) {
    .bento-vka { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
    .bento-vka .bi-1 { grid-column: 1 / -1; flex-direction: row; padding: 30px; }
  }
  @media (min-width: 1200px) {
    .bento-vka { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(140px, auto); }
    .bi-1 { grid-column: 1 / 3 !important; grid-row: 1 / 3; }
    .bi-2 { grid-column: 3 / 5; grid-row: 1 / 2; }
    .bi-3 { grid-column: 3 / 4; grid-row: 2 / 3; }
    .bi-4 { grid-column: 4 / 5; grid-row: 2 / 3; }
    .bi-5 { grid-column: 1 / 5; grid-row: 3 / 4; }
    .bento-vka .bi-1.featured { flex-direction: column; padding: 32px; }
    .bi-1.featured .capa-icon { width: 64px; height: 64px; margin-bottom: 4px; }
    .bi-1.featured .capa-icon .icon { width: 30px; height: 30px; }
    .bento-vka .bi-2, .bento-vka .bi-5 { flex-direction: row; }
    .bento-vka .bi-5 { align-items: center; }
  }

  /* the erisma partner badge, nested inside the "Anpassa Mobigo" card instead of sitting
     alone under the hero buttons — flush with the top of the card body, not floating with
     its own top margin like the original standalone hero placement */
  .partner-badge.card-badge { margin: 0 0 16px; }

  /* ================= closing cta: bordered glass panel ================= */
  .cta-panel { display: flex; flex-direction: column; gap: 22px; align-items: flex-start; padding: clamp(28px, 4vw, 48px);
    background: var(--glass); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid var(--border-hi); border-radius: 4px 24px 4px 4px; }
  @media (min-width: 860px) { .cta-panel { flex-direction: row; align-items: center; justify-content: space-between; gap: 40px; } }
  .cta-panel-copy { max-width: 640px; }
  .cta-panel-copy .body-lg { margin-top: 14px; }
  .cta-panel .btn { flex: none; }

  @media (prefers-reduced-motion: reduce) { .capa-cell { transition: none; } }

  /* ================= footer content (nav grid, contact, legal) — the header/footer chrome
     itself is auto-extracted from the master file, but these inner-content classes are not,
     so they're defined here same as they are for the other pages on the site ================= */
  .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); }
  .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); }
  .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; }

  /* ================= 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;
    }
  }