/* Aliquam Consulting – utseende (design) för sidan Integrationer.
   Ä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; }
  #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-scrim {
    position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(90deg, rgba(0,0,0,0.88) 0%, rgba(0,0,0,0.72) 38%, rgba(0,0,0,0.3) 58%, transparent 76%);
  }
  .hero-grid { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: center; }
  @media (min-width: 1024px) { .hero-grid { grid-template-columns: 6fr 6fr; } }
  .hero-ctas { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 30px; }
  @media (max-width: 479px) { .hero-ctas { gap: 12px; } .hero-ctas .btn { flex: 1 1 100%; justify-content: center; } }
  /* phones/tablets: the logo cluster opens the hero (above the eyebrow + headline) instead of
     trailing below the buttons; its spotlight padding is trimmed so the headline stays high */
  @media (max-width: 1023px) {
    .hero-grid { gap: 8px; }
    .integration-cluster { order: -1; margin-top: -24px; margin-bottom: -12px; }
  }
  @media (max-width: 639px) { #hero-section { align-items: flex-start; padding-top: 28px; padding-bottom: 48px; } }
  @media (max-width: 399px) {
    #hero-section { padding-top: 16px; }
    #integrationCluster { gap: 6px; padding: 14px; margin-bottom: -18px; }
    #integrationCluster .cluster-row { gap: 6px; }
    #integrationCluster .cluster-badge { width: 54px; height: 54px; border-radius: 12px; }
    #integrationCluster .cluster-badge img { width: 28px; height: 28px; }
  }

  .integration-cluster {
    position: relative;
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    width: fit-content;
    margin: 0 auto;
    padding: 40px;
    /* simple spotlight: fully visible in the middle, fading away to
       nothing (revealing the black page behind) toward the edges */
    -webkit-mask-image: radial-gradient(circle, black 0%, black 22%, transparent 60%);
            mask-image: radial-gradient(circle, black 0%, black 22%, transparent 60%);
  }
  .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; }
  @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; }
    .cluster-badge.center svg { width: 26px; height: 26px; }
  }
  .cluster-badge.center {
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.14);
    color: var(--accent-hi);
  }

  .beam-visual { position: relative; height: 460px; }
  .beam-node {
    position: absolute;
    display: flex; align-items: center; justify-content: center;
    width: 54px; height: 54px;
    background: var(--glass-hi);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    border: 1px solid var(--border-hi);
    border-radius: 50%;
    box-shadow: 0 10px 26px -10px rgba(0,0,0,0.5);
    color: rgba(243,243,244,0.75);
  }
  .beam-node.hub {
    width: 84px; height: 84px;
    background: rgba(139,52,57,0.14);
    border: 1px solid rgba(227,100,112,0.3);
    color: var(--accent-hi);
  }
  .beam-node.company {
    width: auto; height: 40px; border-radius: 999px; padding: 0 18px;
    font-family: "Space Grotesk", sans-serif; font-weight: 500; font-size: 13.5px; white-space: nowrap;
    color: var(--ink);
  }
  .beam-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
  .beam-track { fill: none; stroke: var(--border); stroke-width: 1.4; }
  .beam-glow { fill: none; stroke-width: 2.2; stroke-linecap: round; }

  .card-grid { display: grid; gap: 28px; margin-top: 48px; }
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  @media (max-width: 900px) { .grid-3 { grid-template-columns: 1fr; } }
  @media (max-width: 1199px) { .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (max-width: 640px) { .grid-2, .grid-4 { grid-template-columns: 1fr; } }

  .stagger-item { opacity: 0; transform: translateY(20px); transition: opacity 0.7s cubic-bezier(.16,1,.3,1), transform 0.7s cubic-bezier(.16,1,.3,1); }
  .stagger-group.in-view .stagger-item { opacity: 1; transform: translateY(0); }
  .stagger-group .stagger-item:nth-child(1) { transition-delay: 0s; }
  .stagger-group .stagger-item:nth-child(2) { transition-delay: .1s; }
  .stagger-group .stagger-item:nth-child(3) { transition-delay: .2s; }
  .stagger-group .stagger-item:nth-child(4) { transition-delay: .3s; }
  .stagger-group .stagger-item:nth-child(5) { transition-delay: .4s; }
  .stagger-group .stagger-item:nth-child(6) { transition-delay: .5s; }
  @media (prefers-reduced-motion: reduce) { .stagger-item { opacity: 1; transform: none; transition: none; } }

  .icon { display: inline-flex; width: 20px; height: 20px; vertical-align: middle; flex-shrink: 0; }
  .icon svg { width: 100%; height: 100%; display: block; }

  /* ================= capa-cell: same card design as "Allt vi gör med Mobigo" on the
     Mobigo page — icon chip + always-visible title/description, no hover-reveal ================= */
  .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)); } }
  .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); }
  .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; }
  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%; }
  .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); }

  /* grid rows size to their own row's tallest content by default, so with uneven text
     lengths the bottom row (shorter copy) ends up visibly shorter than the top row even
     though each row's own pair matches — give every card in this group a shared floor
     so all four line up evenly regardless of which row they're in */
  @media (min-width: 900px) { #problemGroup .capa-cell { min-height: 210px; } }
  @media (prefers-reduced-motion: reduce) {
    .capa-cell { transition: none; }
  }
  #problemGroup { gap: 16px; margin-top: 32px; align-items: start; }
  .benefit-card { padding: 30px; display: flex; flex-direction: column; justify-content: space-between; }
  .benefit-card h3 { font-family: "Space Grotesk", sans-serif; font-size: 1.02rem; font-weight: 600; margin: 0 0 10px; color: var(--ink); }
  .benefit-tag { font-family: "JetBrains Mono", monospace; font-size: 10.5px; letter-spacing: 0.06em; color: var(--faint); text-transform: uppercase; padding-top: 18px; margin-top: 18px; border-top: 1px solid var(--border); display: block; }

  .flow-card { padding: 28px; }
  .flow-icon-row { text-align: center; color: var(--faint); margin-bottom: 16px; }
  .flow-diagram { position: relative; height: 64px; margin-bottom: 22px; }
  .flow-diagram svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
  .flow-node {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 42%; height: 44px;
    background: var(--glass);
    border: 1px solid var(--border);
    border-radius: 4px;
    display: flex; align-items: center; justify-content: center;
    text-align: center; padding: 4px 8px;
    font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: 0.02em;
    color: var(--muted); text-transform: uppercase; line-height: 1.2;
  }
  .flow-node.left { left: 0; }
  .flow-node.right { right: 0; }
  .flow-card h3 { font-family: "Space Grotesk", sans-serif; font-size: 1.02rem; font-weight: 600; color: var(--ink); margin: 0 0 8px; }

  /* ---- checklist: scroll-driven fill line + per-item activation (Utmaningar) ---- */
  .checklist { position: relative; margin-top: 56px; padding-left: 76px; }
  .checklist-track { position: absolute; left: 27px; top: 8px; bottom: 8px; width: 2px; background: var(--border); }
  .checklist-fill { position: absolute; left: 27px; top: 8px; width: 2px; height: 0; background: var(--accent-hi); transition: height 0.05s linear; box-shadow: 0 0 12px rgba(227,100,112,0.5); }
  .check-item { position: relative; padding-bottom: 56px; }
  .check-item:last-child { padding-bottom: 0; }
  .check-dot {
    position: absolute; left: -76px; top: 0;
    width: 56px; height: 56px;
    border-radius: 4px 16px 4px 4px;
    background: var(--glass); border: 1px solid var(--border);
    display: flex; align-items: center; justify-content: center;
    color: var(--faint);
    transition: background 0.4s ease, border-color 0.4s ease, color 0.4s ease;
  }
  .check-dot.filled { background: rgba(227,100,112,0.14); border-color: rgba(227,100,112,0.4); color: var(--accent-hi); }
  .check-item h3 { font-family: "Space Grotesk", sans-serif; font-weight: 600; font-size: 1.15rem; margin: 8px 0 8px; color: var(--ink); }
  .check-item p { max-width: 560px; }
  @media (max-width: 640px) {
    .checklist { padding-left: 60px; }
    .checklist-track, .checklist-fill { left: 19px; }
    .check-dot { left: -60px; width: 44px; height: 44px; }
  }

  /* ---- benefit split: one featured panel + compact stacked list ---- */
  .benefit-split { display: grid; grid-template-columns: 1fr; gap: 28px; margin-top: 48px; }
  @media (min-width: 900px) { .benefit-split { grid-template-columns: 5fr 7fr; } }
  .benefit-featured { padding: 40px; position: relative; overflow: hidden; min-height: 320px; display: flex; flex-direction: column; justify-content: flex-end; }
  .benefit-featured h3 { font-family: "Space Grotesk", sans-serif; font-weight: 600; font-size: 1.4rem; margin: 0 0 10px; color: var(--ink); }
  .benefit-list { display: flex; flex-direction: column; justify-content: space-between; gap: 0; }
  .benefit-row { display: flex; gap: 20px; padding: 24px 4px; border-bottom: 1px solid var(--border); }
  .benefit-row:last-child { border-bottom: none; }
  .benefit-row .icon { width: 24px; height: 24px; color: var(--accent-hi); flex-shrink: 0; margin-top: 4px; }
  .benefit-row h3 { font-family: "Space Grotesk", sans-serif; font-weight: 600; font-size: 1.02rem; margin: 0 0 6px; color: var(--ink); }

  .orbit-mini { position: absolute; top: 24px; right: 24px; width: 150px; height: 150px; }
  .orbit-mini-hub {
    position: absolute; top: 50%; left: 50%; width: 34px; height: 34px;
    transform: translate(-50%,-50%);
    background: rgba(227,100,112,0.16); border: 1px solid rgba(227,100,112,0.4);
    border-radius: 50%;
  }
  .orbit-mini-icon {
    position: absolute; top: 50%; left: 50%;
    width: 26px; height: 26px; margin-top: -13px; margin-left: -13px;
    background: var(--glass-hi); border: 1px solid var(--border-hi);
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    color: var(--muted); font-size: 12px;
  }
  .orbit-mini-icon .icon { width: 14px; height: 14px; }

  /* ---- flow rows: alternating zig-zag, not a card grid ---- */
  .flow-list { margin-top: 48px; display: flex; flex-direction: column; }
  .flow-row { display: flex; align-items: center; gap: 48px; padding: 40px 0; border-bottom: 1px solid var(--border); }
  .flow-row:last-child { border-bottom: none; }
  .flow-row:nth-child(even) { flex-direction: row-reverse; }
  .flow-visual { flex: 0 0 auto; width: 40%; padding: 26px; }
  .flow-text { flex: 1; }
  .flow-text h3 { font-family: "Space Grotesk", sans-serif; font-weight: 600; font-size: 1.15rem; margin: 0 0 10px; color: var(--ink); }
  .flow-text p { max-width: 480px; }
  @media (max-width: 800px) {
    .flow-row, .flow-row:nth-child(even) { flex-direction: column; align-items: stretch; gap: 24px; }
    .flow-visual { width: 100%; }
  }

  /* ===== Ekosystem: animated logo panel (left) + text (right) ===== */
  .eco-grid { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; gap: 48px; }
  .eco-panel, .eco-text { min-width: 0; }
  @media (min-width: 1024px) { .eco-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 64px; } }
  @media (min-width: 1024px) { .eco-panel { justify-self: end; } }
  /* phones/tablets: the logo animation leads the section instead of coming after the text + button */
  @media (max-width: 1023px) { .eco-grid { gap: 28px; } .eco-panel { order: -1; justify-self: center; } }
  .eco-text .eco-lead { margin-top: 20px; max-width: 480px; }
  .eco-text .eco-note { margin: 28px 0 20px; max-width: 460px; }
  .eco-panel {
    position: relative; width: 100%; max-width: 540px; padding: 8px 0;
    display: flex; flex-direction: column; gap: 0;
    -webkit-mask-image: radial-gradient(ellipse closest-side at 50% 50%, #000 42%, transparent 100%);
            mask-image: radial-gradient(ellipse closest-side at 50% 50%, #000 42%, transparent 100%);
  }
  .eco-row { overflow: hidden; padding: 6px 0 14px; }  /* room for the badge shadow: overflow:hidden was slicing it flat */
  .eco-track { display: flex; gap: 20px; padding-right: 20px; width: max-content; }
  .eco-row.left .eco-track { animation: ecoLeft 34s linear infinite; }
  .eco-row.right .eco-track { animation: ecoRight 34s linear infinite; }
  .eco-row:hover .eco-track { animation-play-state: paused; }
  @keyframes ecoLeft { from { transform: translateX(0); } to { transform: translateX(-50%); } }
  @keyframes ecoRight { from { transform: translateX(-50%); } to { transform: translateX(0); } }
  .eco-badge {
    flex-shrink: 0; width: 72px; height: 72px; border-radius: 50%;
    background: var(--glass-hi); border: 1px solid var(--border);
    display: flex; align-items: center; justify-content: center; overflow: hidden;
  }
  .eco-badge img { width: 40px; height: 40px; object-fit: contain; }
  .eco-badge.wide { width: auto; min-width: 72px; padding: 0 22px; border-radius: 36px; }
  .eco-badge.wide img { width: auto; height: auto; max-width: 120px; max-height: 38px; }
  .theme-light .eco-badge { background: #FFFFFF; box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); }
  @media (prefers-reduced-motion: reduce) { .eco-row.left .eco-track, .eco-row.right .eco-track { animation: none; } }

  /* ===== flows-section: a plain, static grid — no ticker, no auto-scroll, just six
     minimal cards that can be scanned at a glance ===== */
  .flow-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; margin-top: clamp(32px, 4vw, 48px); }
  @media (min-width: 700px) { .flow-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (min-width: 1040px) { .flow-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  .flow-mini { display: flex; align-items: flex-start; gap: 14px; padding: 18px; border: 1px solid var(--border); border-radius: 4px 14px 4px 4px; background: var(--glass); }
  .flow-mini-icon { flex: none; width: 38px; height: 38px; border-radius: 4px 10px 4px 4px; background: rgba(227,100,112,0.12); display: flex; align-items: center; justify-content: center; }
  .flow-mini-icon .icon { width: 19px; height: 19px; color: var(--accent-hi); }
  .flow-arrow { display: inline-block; width: 1.05em; height: 0.6em; vertical-align: 0.08em; margin: 0 0.12em; color: var(--accent-hi); }
  .flow-arrow svg { display: block; width: 100%; height: 100%; }
  .flow-mini h3 { margin: 0 0 4px; font-family: "Space Grotesk", sans-serif; font-weight: 600; font-size: 0.95rem; line-height: 1.3; letter-spacing: -0.005em; color: var(--ink); }
  .flow-mini p { margin: 0; font-size: 0.84rem; line-height: 1.5; color: var(--muted); }
  .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; }

  .contact-card { padding: 40px; display: flex; flex-direction: column; gap: 24px; }
  @media (min-width: 768px) { .contact-card { flex-direction: row; align-items: center; justify-content: space-between; } }
  .contact-left { display: flex; align-items: flex-start; gap: 20px; }
  .contact-avatar { width: 62px; height: 62px; border-radius: 50%; background: rgba(227,100,112,0.1); border: 1px solid rgba(227,100,112,0.25); display: flex; align-items: center; justify-content: center; color: var(--accent-hi); flex-shrink: 0; }
  .contact-avatar .icon { width: 26px; height: 26px; }
  .contact-actions { display: flex; flex-direction: column; gap: 10px; flex-shrink: 0; }
  @media (min-width: 640px) { .contact-actions { flex-direction: row; } }
  .contact-actions a { font-family: "JetBrains Mono", monospace; font-size: 13px; padding: 12px 16px; border-radius: 4px; display: inline-flex; align-items: center; gap: 8px; }
  .contact-actions a.tel { background: var(--glass); border: 1px solid var(--border); color: var(--ink); }
  .contact-actions a.mail { background: var(--accent); color: #fff; border-radius: 4px 10px 4px 4px; }
  .contact-card h3 { font-family: "Space Grotesk", sans-serif; font-weight: 600; font-size: 1.2rem; margin: 0 0 6px; color: var(--ink); }

  .form-grid { display: grid; grid-template-columns: 1fr; gap: 48px; }
  @media (min-width: 1024px) {
    .form-grid { grid-template-columns: 5fr 7fr; align-items: start; }
    /* left column follows the reader while the (taller) form scrolls; sits just under the 77px sticky header */
  }
  @media (min-width: 1024px) and (min-height: 560px) {
    .form-grid > div:first-child { position: sticky; top: 108px; }
  }
  form.contact-form { padding: 40px; display: flex; flex-direction: column; gap: 20px; }
  .field { display: flex; flex-direction: column; gap: 7px; }
  .field label { font-family: "JetBrains Mono", monospace; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--faint); }
  .field input, .field textarea {
    width: 100%; padding: 12px 14px; font-size: 0.95rem; font-family: "Manrope", sans-serif;
    background: var(--glass); border: 1px solid var(--border); border-radius: 4px; color: var(--ink);
  }
  .field input::placeholder, .field textarea::placeholder { color: var(--faint); }
  .field input:focus, .field textarea:focus { outline: none; border-color: var(--accent-hi); background: var(--glass-hi); }
  .theme-light .field input, .theme-light .field textarea { background: #FFFFFF; }
  .theme-light .field input:focus, .theme-light .field textarea:focus { background: #FFFFFF; }
  @media (max-width: 1023px), (pointer: coarse) { .field input, .field textarea { font-size: 16px; } #formular input[type=checkbox] { width: 20px; height: 20px; flex: none; } }
  .field-row { display: grid; grid-template-columns: 1fr; gap: 20px; }
  @media (min-width: 640px) { .field-row { grid-template-columns: 1fr 1fr; } }
  .consent-row { display: flex; align-items: flex-start; gap: 10px; }
  .consent-row input { margin-top: 3px; }
  .consent-row label { font-size: 13px; color: var(--muted); line-height: 1.5; }
  .form-feedback { display: none; align-items: center; gap: 10px; padding: 16px; border-radius: 4px; background: rgba(75,107,98,0.15); border: 1px solid rgba(75,107,98,0.3); color: #9ecdbc; font-size: 0.9rem; }
  .form-feedback.show { display: flex; }
  .form-alt { display: flex; flex-direction: column; gap: 14px; margin-top: 6px; }
  .form-alt-divider { display: flex; align-items: center; gap: 14px; font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); }
  .form-alt-divider::before, .form-alt-divider::after { content: ""; flex: 1; height: 1px; background: var(--border); }
  .form-alt-text { margin: 0; text-align: center; font-size: 0.94rem; line-height: 1.55; color: var(--muted); }
  .form-alt .contact-actions { flex-direction: row; flex-wrap: wrap; width: 100%; }
  .form-alt .contact-actions a { flex: 1 1 150px; justify-content: center; }
  .theme-light .form-feedback { color: #2F5247; background: rgba(75,107,98,0.10); }

  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; } }

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