/* ============================================================
   DigitAIzer — shared site styles
   Extracted from index.html inline <style> for multi-page reuse.
   Loaded by index.html and every page under /loesungen/.
   ============================================================ */

/* ---- Self-hosted fonts ---- */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 300; font-display: swap; src: url('/fonts/inter-300.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
    @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/inter-400.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
    @font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/inter-500.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
    @font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/inter-600.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
    @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/montserrat-400.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
    @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/montserrat-500.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
    @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/montserrat-600.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
    @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/montserrat-700.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
    /* Space Grotesk — self-hosted variable font (weights 500–700, latin subset incl. äöüß + arrows) */
    @font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 500 700; font-display: swap; src: url('/fonts/space-grotesk.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ---- Global + component styles ---- */
html {
      scroll-behavior: smooth;
    }

    body {
      font-family: 'Inter', system-ui, sans-serif;
      /* Headings use Montserrat via font-display class */
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

    /* Focus-visible ring */
    *:focus-visible {
      outline: 2px solid #0097b2;
      outline-offset: 2px;
    }

    /* Scroll reveal base */
    .reveal {
      opacity: 0;
      transform: translateY(1.5rem);
      transition: opacity 700ms cubic-bezier(0.34, 1.56, 0.64, 1),
                  transform 700ms cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    .reveal.visible {
      opacity: 1;
      transform: translateY(0);
    }

    .reveal-delay-1 { transition-delay: 100ms; }
    .reveal-delay-2 { transition-delay: 200ms; }
    .reveal-delay-3 { transition-delay: 300ms; }
    .reveal-delay-4 { transition-delay: 400ms; }

    /* Card hover transitions */
    .card-hover {
      transition: transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1),
                  box-shadow 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    .card-hover:hover {
      transform: translateY(-4px);
    }

    /* Custom dropdown */
    .cf-dd-trigger {
      transition: border-color 200ms ease, box-shadow 200ms ease;
    }
    .cf-dd-trigger:focus {
      border-color: #0097b2;
      box-shadow: 0 0 0 1px #0097b2;
      outline: none;
    }
    .cf-dd-chevron {
      transition: transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
      flex-shrink: 0;
    }
    .cf-dd-panel {
      animation: dd-in 150ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    }
    @keyframes dd-in {
      from { opacity: 0; transform: translateY(-6px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    .cf-dd-option {
      transition: background-color 120ms ease, color 120ms ease;
    }
    .cf-dd-option:hover {
      background: rgba(255,255,255,0.06);
      color: #ffffff;
    }
    .cf-dd-option.selected {
      color: #0097b2;
    }
    /* Textarea placeholder */
    .cf-placeholder-active {
      color: #6b6b6b;
    }

    /* Button transitions */
    .btn-transition {
      transition: transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1),
                  background-color 200ms ease,
                  box-shadow 200ms ease,
                  border-color 200ms ease,
                  color 200ms ease;
    }

    .btn-transition:active {
      transform: scale(0.97);
    }

    /* Header scroll state */
    .header-scrolled {
      background-color: rgba(30, 30, 30, 0.95) !important;
      border-bottom-color: rgba(255, 255, 255, 0.08) !important;
    }

    /* Leistungen — Neural Command Panel (white bg) */
    @keyframes sn-ring-pulse {
      0%, 100% { transform: scale(1); opacity: 0.5; }
      50%       { transform: scale(2); opacity: 0; }
    }
    @keyframes sn-hub-glow {
      0%, 100% { box-shadow: 0 0 22px rgba(0,151,178,0.35), 0 0 44px rgba(0,151,178,0.1); }
      50%       { box-shadow: 0 0 38px rgba(0,151,178,0.55), 0 0 76px rgba(0,151,178,0.18); }
    }
    @keyframes sn-ring-rotate     { to { transform: rotate(360deg); } }
    @keyframes sn-ring-rotate-rev { to { transform: rotate(-360deg); } }
    @keyframes sn-flow  { to { stroke-dashoffset: -18; } }
    @keyframes sn-node-lock {
      0%   { transform: scale(1); }
      40%  { transform: scale(1.35); }
      70%  { transform: scale(0.95); }
      100% { transform: scale(1.15); }
    }
    @keyframes sn-scanline {
      from { top: 0; opacity: 0.7; }
      to   { top: 100%; opacity: 0; }
    }
    @keyframes sn-fade-in {
      from { opacity: 0; transform: translateY(-5px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    @keyframes sn-compact-slide-in {
      from { opacity: 0; transform: translateX(-18px) scale(0.96); }
      to   { opacity: 1; transform: translateX(0) scale(1); }
    }
    @keyframes sn-grid-card-in {
      from { opacity: 0; transform: translateY(12px) scale(0.97); }
      to   { opacity: 1; transform: translateY(0) scale(1); }
    }

    /* ── Grid mode (default) ── */
    .sn-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 1rem;
    }
    @media (min-width: 640px) {
      .sn-grid {
        grid-template-columns: 1fr 1fr;
      }
    }

    /* ── Focus mode (card active) ── */
    .sn-grid.sn-focus {
      display: flex;
      flex-direction: column;
      align-items: stretch;
      gap: 1.25rem;
    }
    @media (min-width: 640px) {
      .sn-grid.sn-focus {
        flex-direction: row;
        align-items: flex-start;
      }
    }
    .sn-grid.sn-focus .sn-active-wrap {
      min-width: 0;
    }
    @media (min-width: 640px) {
      .sn-grid.sn-focus .sn-active-wrap {
        flex: 0 0 58%;
      }
    }
    .sn-grid.sn-focus .sn-others-wrap {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 0.625rem;
      min-width: 0;
    }

    /* ── Card base ── */
    .sn-card {
      background: rgba(255,255,255,0.04);
      backdrop-filter: blur(18px) saturate(1.6);
      -webkit-backdrop-filter: blur(18px) saturate(1.6);
      border: 1px solid rgba(255,255,255,0.07);
      border-radius: 16px;
      overflow: hidden;
      position: relative;
      transition: border-color 250ms ease, box-shadow 250ms ease, opacity 250ms ease;
    }
    .sn-card:hover {
      border-color: rgba(0,151,178,0.3) !important;
      box-shadow: 0 4px 18px rgba(0,151,178,0.12) !important;
    }

    /* Active (expanded) card */
    .sn-card.sn-active {
      border-color: rgba(0,151,178,0.4) !important;
      box-shadow: 0 4px 28px rgba(0,151,178,0.18), 0 1px 4px rgba(0,0,0,0.2) !important;
    }

    /* Compact side card (in focus mode) */
    .sn-card.sn-compact {
      cursor: pointer;
      border-color: rgba(255,255,255,0.08) !important;
      box-shadow: 0 1px 3px rgba(0,0,0,0.2) !important;
    }
    .sn-card.sn-compact:hover {
      border-color: rgba(0,151,178,0.28) !important;
      box-shadow: 0 2px 10px rgba(0,151,178,0.12) !important;
    }
    .sn-card.sn-compact .sn-compact-row {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      padding: 0.875rem 1rem;
      cursor: pointer;
    }
    .sn-card.sn-compact .sn-compact-node {
      width: 36px; height: 36px;
      flex-shrink: 0;
      border-radius: 50%;
      background: rgba(0,151,178,0.1);
      border: 1.5px solid rgba(0,151,178,0.22);
      display: flex; align-items: center; justify-content: center;
      color: #0097b2;
      transition: background-color 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
    }
    .sn-card.sn-compact:hover .sn-compact-node {
      background: rgba(0,151,178,0.2);
      border-color: #0097b2;
      box-shadow: 0 0 10px rgba(0,151,178,0.2);
    }
    .sn-card.sn-compact .sn-compact-title {
      font-size: 0.8125rem;
      font-weight: 600;
      color: #e5e7eb;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .sn-card.sn-compact .sn-compact-num {
      font-family: monospace;
      font-size: 0.7rem;
      color: rgba(0,151,178,0.5);
      flex-shrink: 0;
    }
    .sn-card.sn-compact .sn-compact-arrow {
      margin-left: auto;
      flex-shrink: 0;
      color: rgba(255,255,255,0.25);
    }

    /* Scanline overlay */
    .sn-card .sn-scanline {
      position: absolute; left: 0; right: 0;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(0,151,178,0.5), transparent);
      pointer-events: none; opacity: 0;
    }
    .sn-card.sn-scanning .sn-scanline {
      animation: sn-scanline 0.55s ease-out forwards;
    }

    /* Corner brackets */
    .sn-card::before, .sn-card::after {
      content: ''; position: absolute;
      width: 12px; height: 12px;
      opacity: 0;
      transition: opacity 250ms ease, width 250ms ease, height 250ms ease;
      pointer-events: none; z-index: 2;
    }
    .sn-card::before {
      top: -1px; left: -1px;
      border-top: 2px solid #0097b2; border-left: 2px solid #0097b2;
      border-top-left-radius: 16px;
    }
    .sn-card::after {
      bottom: -1px; right: -1px;
      border-bottom: 2px solid #0097b2; border-right: 2px solid #0097b2;
      border-bottom-right-radius: 16px;
    }
    .sn-card:hover::before, .sn-card:hover::after,
    .sn-card.sn-active::before, .sn-card.sn-active::after { opacity: 1; }
    .sn-card.sn-active::before, .sn-card.sn-active::after { width: 18px; height: 18px; }

    /* Node dot transitions */
    .sn-node-dot {
      transition: background-color 250ms ease, border-color 250ms ease,
                  box-shadow 250ms ease, color 250ms ease;
    }
    .sn-card.sn-active .sn-node-dot {
      background: rgba(0,151,178,0.18) !important;
      border-color: #0097b2 !important;
      box-shadow: 0 0 16px rgba(0,151,178,0.4), 0 0 32px rgba(0,151,178,0.12) !important;
      color: #0097b2 !important;
      animation: sn-node-lock 0.4s cubic-bezier(0.34,1.56,0.64,1) forwards;
    }
    .sn-card.sn-active .sn-node-ring {
      border-color: rgba(0,151,178,0.45) !important;
      animation-duration: 1.8s !important;
    }

    /* Expanded body */
    .sn-body { animation: sn-fade-in 260ms ease forwards; }

    /* Flip helpers */
    .sn-card { transform-style: preserve-3d; will-change: transform, opacity; }
    .sn-card.sn-compact { animation: sn-compact-slide-in 280ms cubic-bezier(0.34,1.3,0.64,1) both; }
    .sn-card.sn-grid-restore { animation: sn-grid-card-in 300ms cubic-bezier(0.34,1.3,0.64,1) both; }

    /* Reset button */
    .sn-reset-btn {
      display: none;
      align-items: center;
      gap: 0.375rem;
      font-size: 0.75rem;
      font-weight: 500;
      color: #6b6b6b;
      cursor: pointer;
      background: none;
      border: none;
      padding: 0;
      margin-bottom: 1rem;
      transition: color 200ms ease;
    }
    .sn-reset-btn:hover { color: #0097b2; }
    .sn-focus ~ * .sn-reset-btn,
    .sn-grid.sn-focus + .sn-reset-btn { display: flex; }

    .sn-trigger { cursor: pointer; }
    .sn-chevron { transition: transform 300ms ease; }

    /* ══════════ Leistungen Orbital (Desktop only) ══════════ */
    .lo-container { display: none; }
    @media (min-width: 1024px) {
      .lo-container { display: block; }
      #snGrid, #snResetBtn { display: none !important; }
    }

    .lo-stage {
      position: relative;
      width: 720px;
      max-width: 100%;
      height: 620px;
      margin: 0 auto;
      user-select: none;
    }
    .lo-orbit-ring {
      position: absolute;
      top: 50%; left: 50%;
      width: 480px; height: 480px;
      transform: translate(-50%, -50%);
      border: 1px solid rgba(0, 151, 178, 0.18);
      border-radius: 50%;
      pointer-events: none;
      z-index: 1;
    }
    .lo-orbit-ring::after {
      content: '';
      position: absolute;
      inset: -14px;
      border: 1px dashed rgba(0, 151, 178, 0.08);
      border-radius: 50%;
    }
    .lo-lines {
      position: absolute;
      top: 50%; left: 50%;
      width: 720px; height: 620px;
      transform: translate(-50%, -50%);
      pointer-events: none;
      z-index: 1;
      overflow: visible;
    }
    .lo-line {
      stroke: rgba(0, 151, 178, 0.32);
      stroke-width: 1;
      stroke-linecap: round;
      stroke-dasharray: 3 7;
      animation: lo-flow-dash 2.4s linear infinite;
      transition: stroke 280ms ease, stroke-width 280ms ease;
    }
    .lo-line.active {
      stroke: rgba(26, 187, 217, 0.9);
      stroke-width: 1.5;
      stroke-dasharray: 4 6;
      animation: lo-flow-dash 1.1s linear infinite;
      filter: drop-shadow(0 0 4px rgba(26, 187, 217, 0.55));
    }
    @keyframes lo-flow-dash { to { stroke-dashoffset: -20; } }
    .lo-line-endpoint {
      fill: rgba(0, 151, 178, 0.55);
      transition: fill 280ms ease, r 280ms ease;
    }
    .lo-line-endpoint.active {
      fill: rgba(26, 187, 217, 1);
      filter: drop-shadow(0 0 4px rgba(26, 187, 217, 0.7));
    }
    .lo-line-pulse {
      fill: rgba(26, 187, 217, 0.95);
      filter: drop-shadow(0 0 3px rgba(26, 187, 217, 0.7));
    }
    .lo-orbit {
      position: absolute;
      top: 50%; left: 50%;
      width: 0; height: 0;
      z-index: 3;
    }
    .lo-center {
      position: absolute;
      top: 50%; left: 50%;
      width: 124px; height: 124px;
      transform: translate(-50%, -50%);
      border-radius: 50%;
      background: radial-gradient(circle at 30% 30%, rgba(0,151,178,0.22), rgba(0,151,178,0.06) 60%, rgba(30,30,30,0.95));
      border: 1px solid rgba(0, 151, 178, 0.45);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 6;
      box-shadow: 0 0 50px rgba(0, 151, 178, 0.3), inset 0 0 20px rgba(0, 151, 178, 0.12);
      pointer-events: none;
    }
    .lo-center::before, .lo-center::after {
      content: '';
      position: absolute;
      border-radius: 50%;
      border: 1px solid rgba(0, 151, 178, 0.3);
      animation: lo-ping 3.4s cubic-bezier(0, 0, 0.2, 1) infinite;
    }
    .lo-center::before { inset: -10px; }
    .lo-center::after { inset: -22px; animation-delay: 1.4s; }
    .lo-center img {
      width: 78%;
      height: auto;
      opacity: 0.95;
      filter: drop-shadow(0 0 8px rgba(0, 151, 178, 0.4));
    }
    @keyframes lo-ping {
      0%   { transform: scale(0.95); opacity: 0.7; }
      75%, 100% { transform: scale(1.5); opacity: 0; }
    }

    .lo-node {
      position: absolute;
      top: 0; left: 0;
      width: 60px; height: 60px;
      margin-left: -30px; margin-top: -30px;
      border-radius: 50%;
      background: linear-gradient(135deg, rgba(0,151,178,0.15), rgba(0,151,178,0.05));
      border: 1.5px solid rgba(0, 151, 178, 0.4);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: opacity 380ms ease, border-color 250ms ease, box-shadow 250ms ease, background 250ms ease;
      color: #0097b2;
      will-change: transform, opacity;
    }
    .lo-node:hover {
      border-color: rgba(0, 151, 178, 0.85);
      box-shadow: 0 0 18px rgba(0, 151, 178, 0.35);
      background: linear-gradient(135deg, rgba(0,151,178,0.25), rgba(0,151,178,0.1));
    }
    .lo-node.active {
      border-color: rgba(26, 187, 217, 0.95);
      background: linear-gradient(135deg, rgba(0,151,178,0.32), rgba(0,151,178,0.14));
      box-shadow: 0 0 32px rgba(0, 151, 178, 0.55);
      color: #1abbd9;
    }
    .lo-node svg { width: 24px; height: 24px; }
    .lo-node-num {
      position: absolute;
      top: -7px; right: -7px;
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.55rem;
      background: rgba(0,151,178,0.85);
      color: #061018;
      padding: 2px 5px;
      border-radius: 8px;
      font-weight: 700;
      letter-spacing: 0.04em;
    }
    .lo-node-label {
      position: absolute;
      top: 70px;
      left: 50%;
      white-space: nowrap;
      font-family: 'Inter', sans-serif;
      font-size: 0.72rem;
      font-weight: 600;
      letter-spacing: 0.03em;
      color: rgba(255, 255, 255, 0.9);
      pointer-events: none;
      padding: 4px 10px;
      border-radius: 999px;
      background: rgba(0, 151, 178, 0.18);
      border: 1px solid rgba(0, 151, 178, 0.4);
      transform: translateX(-50%) translateZ(0);
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      transition: color 200ms ease, border-color 250ms ease, background 250ms ease, box-shadow 250ms ease;
    }
    .lo-node:hover .lo-node-label {
      color: #fff;
      border-color: rgba(0, 151, 178, 0.7);
      background: rgba(0, 151, 178, 0.28);
    }
    .lo-node.active .lo-node-label {
      color: #fff;
      border-color: rgba(26, 187, 217, 0.95);
      background: rgba(0, 151, 178, 0.36);
      box-shadow: 0 0 14px rgba(0, 151, 178, 0.35);
      /* counter-scale so text stays crisp when node is scaled 1.4x */
      transform: translateX(-50%) scale(0.715) translateZ(0);
      transform-origin: top center;
    }

    .lo-card {
      position: absolute;
      top: 50%; left: 50%;
      width: 360px;
      max-width: calc(100% - 40px);
      background: rgba(30, 30, 30, 0.95);
      backdrop-filter: blur(18px) saturate(1.5);
      -webkit-backdrop-filter: blur(18px) saturate(1.5);
      border: 1px solid rgba(0, 151, 178, 0.45);
      border-radius: 14px;
      padding: 1.4rem 1.4rem 1.5rem;
      z-index: 10;
      box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55), 0 0 30px rgba(0, 151, 178, 0.12);
      opacity: 0;
      pointer-events: none;
      transform: translate(-50%, calc(-50% + 130px));
      transition: opacity 280ms ease, transform 280ms cubic-bezier(0.34,1.3,0.64,1);
    }
    .lo-card.visible {
      opacity: 1;
      pointer-events: auto;
      transform: translate(-50%, calc(-50% + 100px));
    }
    .lo-card-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 0.75rem;
      margin-bottom: 0.6rem;
    }
    .lo-card-num {
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.7rem;
      color: rgba(0,151,178,0.85);
      letter-spacing: 0.1em;
      text-transform: uppercase;
    }
    .lo-card-close {
      width: 26px; height: 26px;
      border-radius: 50%;
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.1);
      color: rgba(255,255,255,0.65);
      display: flex; align-items: center; justify-content: center;
      cursor: pointer;
      transition: all 180ms ease;
      flex-shrink: 0;
    }
    .lo-card-close:hover { color: #fff; border-color: rgba(0,151,178,0.5); background: rgba(0,151,178,0.08); }
    .lo-card-title {
      font-family: 'Montserrat', sans-serif;
      font-size: 1.05rem;
      font-weight: 600;
      color: #fff;
      letter-spacing: -0.01em;
      line-height: 1.3;
      margin-bottom: 0.7rem;
    }
    .lo-card-body {
      font-family: 'Inter', sans-serif;
      font-size: 0.82rem;
      line-height: 1.65;
      color: rgba(229,231,235,0.78);
    }
    .lo-card-stats {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0.6rem;
      margin-top: 1rem;
      padding-top: 0.9rem;
      border-top: 1px solid rgba(255,255,255,0.07);
    }
    .lo-card-stat {
      background: linear-gradient(135deg, rgba(0,151,178,0.12), rgba(0,151,178,0.04));
      border: 1px solid rgba(0,151,178,0.2);
      border-radius: 10px;
      padding: 0.7rem 0.8rem;
    }
    .lo-card-stat-value {
      font-family: 'Montserrat', sans-serif;
      font-size: 1rem;
      font-weight: 700;
      color: #1abbd9;
      letter-spacing: -0.01em;
    }
    .lo-card-stat-label {
      font-family: 'Inter', sans-serif;
      font-size: 0.65rem;
      color: rgba(156,163,175,0.85);
      line-height: 1.4;
      margin-top: 0.2rem;
    }

    .lo-nav {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 0.5rem;
      margin-top: 2rem;
    }
    .lo-nav-chip {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      padding: 0.5rem 0.95rem;
      border-radius: 999px;
      background: rgba(255,255,255,0.025);
      border: 1px solid rgba(255,255,255,0.08);
      color: rgba(255,255,255,0.7);
      font-family: 'Inter', sans-serif;
      font-size: 0.78rem;
      font-weight: 500;
      cursor: pointer;
      transition: all 220ms ease;
      white-space: nowrap;
    }
    .lo-nav-chip:hover {
      border-color: rgba(0,151,178,0.5);
      color: #fff;
      background: rgba(0,151,178,0.07);
    }
    .lo-nav-chip.active {
      background: rgba(0,151,178,0.18);
      border-color: rgba(0,151,178,0.75);
      color: #fff;
      box-shadow: 0 0 16px rgba(0,151,178,0.28);
    }
    .lo-nav-chip-num {
      font-family: 'JetBrains Mono', monospace;
      color: rgba(0,151,178,0.75);
      font-size: 0.7rem;
    }
    .lo-nav-chip.active .lo-nav-chip-num { color: #1abbd9; }

    /* Mobile menu transitions */
    .mobile-menu {
      transition: transform 400ms cubic-bezier(0.34, 1.56, 0.64, 1),
                  opacity 300ms ease;
    }

    .mobile-menu.open {
      transform: translateX(0) !important;
      opacity: 1 !important;
    }

    /* Hamburger animation */
    .hamburger span {
      transition: transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1),
                  opacity 200ms ease;
    }

    .hamburger.active span:nth-child(1) {
      transform: rotate(45deg) translate(5px, 5px);
    }

    .hamburger.active span:nth-child(2) {
      opacity: 0;
      transform: translateX(-8px);
    }

    .hamburger.active span:nth-child(3) {
      transform: rotate(-45deg) translate(7px, -6px);
    }

    /* Input focus transition */
    input, textarea {
      transition: border-color 200ms ease,
                  box-shadow 200ms ease;
    }

    /* Scroll indicator bounce */
    @keyframes gentleBounce {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(8px); }
    }

    .scroll-bounce {
      animation: gentleBounce 2s ease-in-out infinite;
    }

    /* Grain texture overlay */
    .grain::after {
      content: '';
      position: absolute;
      inset: 0;
      opacity: 0.03;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
      pointer-events: none;
      z-index: 1;
    }

    /* ── Circular Team Component ── */
    .team-circ-images-wrap {
      padding-top: 72px; /* space for side cards that translateY upward */
    }
    .team-circ-images {
      position: relative;
      width: 260px;
      height: 380px;
      margin: 0 auto;
      perspective: 1000px;
    }
    .team-circ-img {
      position: absolute;
      top: 0; left: 0;
      width: 100%; height: 100%;
      object-fit: cover;
      object-position: top center;
      border-radius: 1.25rem;
      box-shadow: 0 0 0 1px rgba(255,255,255,0.07);
      transition: transform 0.8s cubic-bezier(.4,2,.3,1),
                  opacity 0.8s cubic-bezier(.4,2,.3,1);
    }
    .team-circ-content {
      transition: opacity 0.28s ease, transform 0.28s ease;
    }
    .team-circ-content.fading {
      opacity: 0;
      transform: translateY(-14px);
    }
    .team-circ-arrow {
      width: 2.7rem;
      height: 2.7rem;
      border-radius: 50%;
      border: none;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      background-color: #1e1e1e;
      transition: background-color 0.3s ease,
                  transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
    }
    .team-circ-arrow:hover {
      background-color: #0097b2;
      transform: scale(1.1);
    }
    .team-circ-arrow:active {
      transform: scale(0.94);
    }

    /* ── Case Studies ── */
    .cs-tab {
      font-size: 0.8125rem;
      font-weight: 500;
      padding: 0.5rem 1.25rem;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,0.12);
      color: #6b6b6b;
      background: transparent;
      cursor: pointer;
      transition: color 200ms ease, border-color 200ms ease, background-color 200ms ease;
    }
    .cs-tab:hover {
      color: #c8c8c8;
      border-color: rgba(255,255,255,0.22);
    }
    .cs-tab.cs-tab-active {
      color: #0097b2;
      border-color: rgba(0,151,178,0.45);
      background: rgba(0,151,178,0.08);
    }
    .cs-card { display: none !important; }
    .cs-card.cs-card-active { display: grid !important; }
    .cs-service-list {
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
    }
    .cs-service-list-label {
      font-size: 0.6rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.12em;
      color: #4a4a4a;
      margin-bottom: 0.25rem;
    }
    .cs-tag {
      font-size: 0.78rem;
      color: #9a9a9a;
      line-height: 1.4;
      display: flex;
      align-items: flex-start;
      gap: 0.55rem;
    }
    .cs-tag::before {
      content: '';
      display: block;
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: #0097b2;
      flex-shrink: 0;
      margin-top: 0.42em;
    }
    .cs-tag-icon::before { display: none; }
    .cs-tag-icon svg { flex-shrink: 0; color: #0097b2; margin-top: 1px; }
    .cs-kpi-block {
      padding: 1rem;
      border-radius: 14px;
      background: rgba(0,151,178,0.06);
      border: 1px solid rgba(0,151,178,0.15);
      display: flex;
      flex-direction: column;
    }
    .cs-kpi-value {
      font-family: 'Montserrat', sans-serif;
      font-size: 1.75rem;
      font-weight: 700;
      color: #0097b2;
      line-height: 1.1;
      letter-spacing: -0.03em;
    }
    .cs-kpi-label {
      font-size: 0.6875rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: #c8c8c8;
      margin-top: 0.35rem;
    }
    .cs-kpi-desc {
      font-size: 0.75rem;
      color: #6b6b6b;
      margin-top: 0.5rem;
      line-height: 1.55;
      flex: 1;
    }
    .cs-section-label {
      font-size: 0.6875rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      padding: 0.2rem 0.65rem;
      border-radius: 4px;
      display: inline-block;
    }
    .cs-label-problem {
      background: rgba(239,68,68,0.1);
      color: #f87171;
      border: 1px solid rgba(239,68,68,0.2);
    }
    .cs-label-loesung {
      background: rgba(0,151,178,0.1);
      color: #0097b2;
      border: 1px solid rgba(0,151,178,0.25);
    }
    .cs-logo-placeholder {
      width: 72px; height: 72px;
      border-radius: 12px;
      background: #2d2d2d;
      border: 1px solid rgba(255,255,255,0.08);
      display: flex; align-items: center; justify-content: center;
    }

    /* ── Reference Cards: Flip + Inline-Expand Mechanic ── */
    .ref-card-grid {
      position: relative;
      transition: min-height 600ms cubic-bezier(0.4, 0, 0.2, 1);
    }
    .ref-card {
      position: relative;
      display: flex;
      flex-direction: column;
      cursor: pointer;
      perspective: 1600px;
      transition: border-color 220ms ease, box-shadow 220ms ease, transform 380ms cubic-bezier(0.4, 0, 0.2, 1), opacity 380ms ease;
      background: transparent !important;
      border: none !important;
      box-shadow: none !important;
    }
    .ref-card:hover .ref-card-front {
      border-color: rgba(0,151,178,0.28);
      box-shadow: 0 0 0 1px rgba(0,151,178,0.1), 0 4px 20px rgba(0,151,178,0.08);
    }
    .ref-card:hover {
      transform: translateY(-2px);
    }
    .ref-card-inner {
      position: relative;
      flex: 1;
      min-height: 0;
      width: 100%;
      display: flex;
      flex-direction: column;
      transform-style: preserve-3d;
      transition: transform 700ms cubic-bezier(0.4, 0, 0.2, 1);
      will-change: transform;
    }
    .ref-card.active .ref-card-inner {
      position: absolute;
      inset: 0;
      flex: none;
    }
    .ref-card.flipped .ref-card-inner { transform: rotateY(180deg); }
    .ref-card-face {
      backface-visibility: hidden;
      -webkit-backface-visibility: hidden;
      background: rgba(255,255,255,0.04);
      backdrop-filter: blur(18px) saturate(1.6);
      -webkit-backdrop-filter: blur(18px) saturate(1.6);
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 1rem;
      overflow: hidden;
      transition: border-color 220ms ease, box-shadow 220ms ease, opacity 1ms linear 350ms;
    }
    .ref-card-front {
      position: relative;
      display: flex;
      flex-direction: column;
      flex: 1;
      min-height: 0;
      opacity: 1;
    }
    .ref-card.flipped .ref-card-front { opacity: 0; }
    .ref-card-back {
      position: absolute;
      inset: 0;
      transform: rotateY(180deg);
      overflow-y: auto;
      overflow-x: hidden;
      opacity: 0;
      pointer-events: none;
    }
    .ref-card.flipped .ref-card-back {
      opacity: 1;
      pointer-events: auto;
    }
    .ref-card-back::-webkit-scrollbar { width: 8px; }
    .ref-card-back::-webkit-scrollbar-track { background: transparent; }
    .ref-card-back::-webkit-scrollbar-thumb { background: rgba(0,151,178,0.25); border-radius: 4px; }
    .ref-card-back::-webkit-scrollbar-thumb:hover { background: rgba(0,151,178,0.45); }

    /* Active state — card grows in place, absolutely positioned within grid */
    .ref-card.active {
      position: absolute;
      z-index: 10;
      cursor: default;
      transform: none !important;
      transition: top 600ms cubic-bezier(0.4, 0, 0.2, 1),
                  left 600ms cubic-bezier(0.4, 0, 0.2, 1),
                  width 600ms cubic-bezier(0.4, 0, 0.2, 1),
                  height 600ms cubic-bezier(0.4, 0, 0.2, 1);
    }
    .ref-card.active .ref-card-front,
    .ref-card.active .ref-card-back {
      box-shadow: 0 24px 80px rgba(0, 0, 0, 0.55), 0 0 40px rgba(0, 151, 178, 0.18);
      border-color: rgba(0, 151, 178, 0.35);
    }

    /* Other cards fade out when one is active */
    .ref-card-grid.has-active .ref-card:not(.active) {
      opacity: 0;
      pointer-events: none;
      transform: scale(0.96);
    }

    /* Backside content layout */
    .ref-cs-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
      padding: 1.25rem 1.5rem;
      border-bottom: 1px solid rgba(255,255,255,0.06);
      position: sticky;
      top: 0;
      background: rgba(30,30,30,0.92);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      z-index: 2;
    }
    .ref-cs-header-brand {
      display: flex;
      align-items: center;
      gap: 0.7rem;
      flex: 1;
      min-width: 0;
    }
    .ref-cs-header img {
      height: 36px;
      width: auto;
      flex-shrink: 0;
    }
    .ref-cs-header-name {
      font-family: 'Inter', sans-serif;
      font-size: 0.95rem;
      font-weight: 600;
      color: #fff;
    }
    .ref-cs-close {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background: rgba(255,255,255,0.05);
      border: 1px solid rgba(255,255,255,0.12);
      color: rgba(255,255,255,0.7);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 180ms ease;
      flex-shrink: 0;
    }
    .ref-cs-close:hover {
      color: #fff;
      border-color: rgba(0,151,178,0.55);
      background: rgba(0,151,178,0.1);
    }
    .ref-cs-body {
      padding: 1.5rem 1.75rem 2rem;
      display: flex;
      flex-direction: column;
      gap: 1.5rem;
    }
    .ref-cs-section { display: flex; flex-direction: column; gap: 0.55rem; }
    .ref-cs-section-title {
      font-family: 'Inter', sans-serif;
      font-size: 0.7rem;
      font-weight: 700;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: #0097b2;
    }
    .ref-cs-section p {
      font-family: 'Inter', sans-serif;
      font-size: 0.88rem;
      line-height: 1.7;
      color: rgba(229,231,235,0.82);
    }
    .ref-cs-stats {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 0.6rem;
      margin-top: 0.3rem;
    }
    .ref-cs-stat {
      background: linear-gradient(135deg, rgba(0,151,178,0.14), rgba(0,151,178,0.05));
      border: 1px solid rgba(0,151,178,0.22);
      border-radius: 12px;
      padding: 0.85rem 0.9rem;
    }
    .ref-cs-stat-val {
      font-family: 'Montserrat', sans-serif;
      font-size: 1.25rem;
      font-weight: 700;
      color: #1abbd9;
      letter-spacing: -0.02em;
      line-height: 1.1;
    }
    .ref-cs-stat-lbl {
      font-family: 'Inter', sans-serif;
      font-size: 0.66rem;
      color: rgba(156,163,175,0.9);
      margin-top: 0.3rem;
      line-height: 1.35;
    }
    .ref-cs-quote {
      background: rgba(0,151,178,0.05);
      border-left: 2px solid rgba(0,151,178,0.55);
      padding: 0.9rem 1.1rem;
      border-radius: 0 10px 10px 0;
    }
    .ref-cs-quote p {
      font-family: 'Inter', sans-serif;
      font-size: 0.92rem;
      line-height: 1.7;
      color: #e5e7eb;
      font-style: italic;
    }
    .ref-cs-quote footer {
      margin-top: 0.7rem;
      font-style: normal;
    }
    .ref-cs-quote-name {
      font-size: 0.85rem;
      font-weight: 600;
      color: #fff;
    }
    .ref-cs-quote-role {
      font-size: 0.72rem;
      color: rgba(156,163,175,0.85);
      margin-top: 0.1rem;
    }
    .ref-cs-placeholder {
      display: inline-block;
      padding: 0.15rem 0.5rem;
      border-radius: 4px;
      background: rgba(245, 158, 11, 0.12);
      border: 1px dashed rgba(245, 158, 11, 0.5);
      color: rgba(252, 211, 77, 0.95);
      font-size: 0.72rem;
      font-weight: 600;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      margin-bottom: 0.4rem;
    }

    @media (max-width: 720px) {
      .ref-cs-stats { grid-template-columns: 1fr 1fr; }
      .ref-cs-body { padding: 1.25rem 1.25rem 1.5rem; gap: 1.25rem; }
      .ref-cs-header { padding: 1rem 1.1rem; }
    }

    @media (prefers-reduced-motion: reduce) {
      .ref-card,
      .ref-card-inner,
      .ref-card.active,
      .ref-card-grid {
        transition-duration: 0.01ms !important;
      }
    }
    /* "Projekt in Umsetzung" overlay */
    .ref-wip-overlay {
      position: absolute;
      inset: 0;
      z-index: 2;
      border-radius: 1rem;
      background: rgba(20,20,20,0.68);
      display: flex;
      align-items: center;
      justify-content: center;
      pointer-events: none;
    }
    .ref-wip-badge {
      display: flex;
      align-items: center;
      gap: 0.45rem;
      padding: 0.45rem 1rem;
      background: rgba(30,30,30,0.92);
      border: 1px solid rgba(255,255,255,0.13);
      border-radius: 999px;
      font-family: 'Inter', sans-serif;
      font-size: 0.72rem;
      font-weight: 600;
      color: rgba(200,200,200,0.75);
      letter-spacing: 0.06em;
      text-transform: uppercase;
      white-space: nowrap;
    }
    .ref-card[data-wip] { cursor: default; }
    .ref-card[data-wip]:hover { transform: none; }
    .ref-card[data-wip]:hover .ref-card-front { border-color: rgba(255,255,255,0.08); box-shadow: none; }
    .ref-wip-dot {
      width: 6px; height: 6px;
      border-radius: 50%;
      background: rgba(0,151,178,0.7);
      animation: nodeAccentPulse 2.4s ease-in-out infinite;
      flex-shrink: 0;
    }
    .ref-logo-placeholder {
      width: 44px; height: 44px;
      border-radius: 10px;
      background: #2d2d2d;
      border: 1px solid rgba(255,255,255,0.08);
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
    }
    .ref-kpi-pill {
      display: flex;
      flex-direction: column;
      padding: 0.5rem 0.75rem;
      border-radius: 10px;
      background: rgba(0,151,178,0.07);
      border: 1px solid rgba(0,151,178,0.18);
      min-width: 0;
    }
    .ref-kpi-val {
      font-family: 'Montserrat', sans-serif;
      font-size: 1.25rem;
      font-weight: 700;
      color: #0097b2;
      line-height: 1.1;
      letter-spacing: -0.02em;
    }
    .ref-kpi-lbl {
      font-size: 0.6rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      color: #7a7a7a;
      margin-top: 0.2rem;
      white-space: nowrap;
    }

    /* ── Über uns value cards ── */
    .ueber-value-card {
      transition: border-color 280ms cubic-bezier(0.4, 0, 0.2, 1),
                  background-color 280ms cubic-bezier(0.4, 0, 0.2, 1),
                  box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1),
                  transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1);
      cursor: default;
    }
    .ueber-value-card:hover {
      border-color: rgba(0, 151, 178, 0.28) !important;
      background-color: rgba(0, 151, 178, 0.06) !important;
      box-shadow: 0 4px 24px rgba(0, 151, 178, 0.12), 0 1px 3px rgba(0, 0, 0, 0.2);
      transform: translateY(-2px);
    }
    .ueber-value-icon {
      transition: background-color 280ms cubic-bezier(0.4, 0, 0.2, 1),
                  border-color 280ms cubic-bezier(0.4, 0, 0.2, 1),
                  box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
    }
    .ueber-value-card:hover .ueber-value-icon {
      background-color: rgba(0, 151, 178, 0.09) !important;
      border-color: rgba(0, 151, 178, 0.32) !important;
      box-shadow: 0 0 12px rgba(0, 151, 178, 0.15);
    }
    .ueber-value-svg {
      transition: color 280ms cubic-bezier(0.4, 0, 0.2, 1);
    }
    .ueber-value-svg {
      color: #0097b2 !important;
    }
    .ueber-value-card:hover .ueber-value-svg {
      color: #1abbd9 !important;
    }
    .ueber-value-title {
      color: #0097b2;
      transition: color 280ms cubic-bezier(0.4, 0, 0.2, 1);
    }
    .ueber-value-card:hover .ueber-value-title {
      color: #1abbd9 !important;
    }
    @keyframes nodeAccentPulse {
      0%, 100% { opacity: 0.5; transform: scale(1); }
      50% { opacity: 1; transform: scale(1.5); }
    }

    /* ── Global background ── */
    html, body { background: #1e1e1e; }

    /* ── Tools ticker ── */
    @keyframes toolTicker {
      0%   { transform: translateX(0); }
      100% { transform: translateX(-50%); }
    }
    .tool-ticker-track { animation: toolTicker 42s linear infinite; }
    .tool-ticker-track:hover { animation-play-state: paused; }
    .tool-ticker-item {
      display: flex; align-items: center; gap: 0.55rem;
      white-space: nowrap; opacity: 0.55;
      transition: opacity 220ms ease;
    }
    .tool-ticker-item:hover { opacity: 0.9; }
    .tool-ticker-item span {
      font-size: 0.8rem; font-weight: 600;
      color: #9ca3af; letter-spacing: 0.06em;
      text-transform: uppercase;
    }

    /* ── Section divider ── */
    .section-divider {
      position: relative;
      height: 1px;
      background: linear-gradient(90deg,
        transparent 0%,
        rgba(0,151,178,0.08) 10%,
        rgba(0,151,178,0.35) 30%,
        rgba(34,211,238,0.7) 50%,
        rgba(0,151,178,0.35) 70%,
        rgba(0,151,178,0.08) 90%,
        transparent 100%);
      overflow: visible;
      z-index: 10;
    }
    .section-divider::before {
      content: '';
      position: absolute;
      top: 50%; left: 50%;
      transform: translate(-50%, -50%);
      width: 4px; height: 4px;
      border-radius: 50%;
      background: rgba(34,211,238,0.95);
      box-shadow: 0 0 8px rgba(34,211,238,0.8), 0 0 20px rgba(0,151,178,0.5);
    }
    .section-divider::after {
      content: '';
      position: absolute;
      top: 0; left: 50%;
      transform: translateX(-50%);
      width: 200px; height: 1px;
      background: linear-gradient(90deg, transparent, rgba(34,211,238,0.25), transparent);
      filter: blur(3px);
    }

    /* ══════════ Hero Dashboard ══════════ */
    @keyframes dashFadeIn { from { opacity:0; transform: translateY(14px); } to { opacity:1; transform: translateY(0); } }
    @keyframes barGrow { from { transform: scaleY(0.08); } to { transform: scaleY(1); } }
    @keyframes countPulse { 0%,100% { opacity:1; } 50% { opacity:0.55; } }
    @keyframes blink { 0%,49% { opacity:1; } 50%,100% { opacity:0; } }
    @keyframes flowDash { to { stroke-dashoffset: -24; } }

    .hero-dash {
      animation: dashFadeIn 900ms cubic-bezier(0.22,1,0.36,1) both;
      animation-delay: 400ms;
      will-change: transform, opacity;
      transform-origin: 80% 50%;
    }
    .hero-dash-card {
      background: rgba(255,255,255,0.04);
      backdrop-filter: blur(18px) saturate(1.6);
      -webkit-backdrop-filter: blur(18px) saturate(1.6);
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 18px;
      position: relative;
      overflow: hidden;
    }
    .hero-dash-card::before, .hero-dash-card::after {
      content:''; position:absolute; width:14px; height:14px; pointer-events:none;
    }
    .hero-dash-card::before { top:-1px; left:-1px;
      border-top:1.5px solid rgba(0,151,178,0.6); border-left:1.5px solid rgba(0,151,178,0.6);
      border-top-left-radius:18px;
    }
    .hero-dash-card::after { bottom:-1px; right:-1px;
      border-bottom:1.5px solid rgba(0,151,178,0.6); border-right:1.5px solid rgba(0,151,178,0.6);
      border-bottom-right-radius:18px;
    }
    .hero-dash-bar {
      transform-origin: bottom;
      animation: barGrow 1100ms cubic-bezier(0.22,1,0.36,1) both;
    }
    .hero-dash-live-dot {
      width:6px; height:6px; border-radius:50%; background:#22d3ee;
      box-shadow: 0 0 8px rgba(34,211,238,0.9);
      animation: countPulse 1.6s ease-in-out infinite;
    }
    .hero-flow-path {
      stroke-dasharray: 4 8;
      animation: flowDash 1.2s linear infinite;
    }
    .cursor-blink::after {
      content:'▋'; color:#0097b2; margin-left:2px;
      animation: blink 1s steps(2,start) infinite;
    }

    /* ══════════ Hero — Cinematic Statement ══════════ */
    @keyframes heroWordIn {
      from { opacity: 0; transform: translateY(0.5em); }
      to   { opacity: 1; transform: translateY(0);    }
    }
    @keyframes heroLineRise {
      from { opacity: 0; transform: translateY(14px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    @keyframes heroBacklightIn {
      from { opacity: 0; transform: scale(0.85); }
      to   { opacity: 1; transform: scale(1); }
    }
    @keyframes heroAuroraDrift {
      0%   { transform: translate3d(0,0,0); }
      50%  { transform: translate3d(-2%,1.5%,0); }
      100% { transform: translate3d(0,0,0); }
    }
    @keyframes heroCtaGlowPulse {
      0%, 100% { opacity: 0.35; }
      50%      { opacity: 1; }
    }

    /* Aurora mesh layer */
    .hero-aurora {
      position: absolute; inset: -20%;
      background:
        radial-gradient(ellipse 55% 45% at 15% 25%, rgba(0,151,178,0.55), transparent 60%),
        radial-gradient(ellipse 50% 45% at 85% 75%, rgba(0,95,115,0.55), transparent 62%),
        radial-gradient(ellipse 45% 35% at 50% 100%, rgba(26,187,217,0.28), transparent 70%);
      filter: blur(32px) saturate(1.1);
      animation: heroAuroraDrift 22s ease-in-out infinite;
      will-change: transform;
      pointer-events: none;
    }

    /* Noise texture layer */
    .hero-noise {
      position: absolute; inset: 0;
      background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.55'/></svg>");
      opacity: 0.07;
      mix-blend-mode: overlay;
      pointer-events: none;
    }

    /* Statement headline */
    .hero-statement {
      font-family: 'Space Grotesk', 'Montserrat', system-ui, sans-serif;
      font-weight: 500;
      color: #ffffff;
      font-size: clamp(1.15rem, 4.2vw, 3.85rem);
      line-height: 1.18;
      letter-spacing: -0.02em;
      white-space: nowrap;
      margin: 0;
    }
    .hero-statement .hero-line {
      display: block;
      position: relative;
    }
    .hero-statement .hero-word {
      display: inline-block;
      opacity: 0;
      will-change: transform, opacity;
      animation: heroWordIn 820ms cubic-bezier(0.22,1,0.36,1) forwards;
    }
    .hero-statement .hero-word + .hero-word { margin-left: 0.22em; }
    .hero-statement .hero-accent {
      color: #0097b2;
      font-weight: 600;
      letter-spacing: -0.015em;
    }

    /* Cyan-accent line shrinks to its text so the backlight doesn't span the full row. */
    .hero-statement .hero-line-accent {
      width: fit-content;
    }

    /* Smooth backlight behind the cyan line — opacity/transform only (composite layer) */
    .hero-line-accent::before {
      content: '';
      position: absolute;
      inset: -0.35em -0.6em -0.25em -0.6em;
      background:
        radial-gradient(ellipse 60% 75% at 28% 55%, rgba(0,151,178,0.42), rgba(0,151,178,0.08) 45%, transparent 72%),
        radial-gradient(ellipse 55% 70% at 75% 60%, rgba(26,187,217,0.22), transparent 70%);
      filter: blur(18px);
      z-index: -1;
      opacity: 0;
      transform-origin: 35% 60%;
      will-change: opacity, transform;
      animation: heroBacklightIn 1500ms cubic-bezier(0.22,1,0.36,1) 1000ms forwards;
      pointer-events: none;
    }

    /* Eyebrow + body reveals (animation-based, not scroll-based) */
    .hero-eyebrow { opacity: 0; animation: heroLineRise 700ms cubic-bezier(0.22,1,0.36,1) 80ms forwards; }
    .hero-sub     { opacity: 0; animation: heroLineRise 700ms cubic-bezier(0.22,1,0.36,1) 880ms forwards; }
    .hero-ctas    { opacity: 0; animation: heroLineRise 700ms cubic-bezier(0.22,1,0.36,1) 1040ms forwards; }
    .hero-badges  { opacity: 0; animation: heroLineRise 700ms cubic-bezier(0.22,1,0.36,1) 1180ms forwards; }
    .hero-badge   { opacity: 0; animation: heroLineRise 600ms cubic-bezier(0.22,1,0.36,1) forwards; }
    .hero-mini-card { opacity: 0; animation: heroLineRise 700ms cubic-bezier(0.22,1,0.36,1) 1500ms forwards; }

    /* Primary CTA — subtle ambient glow + hover lift
       Glow lives on a sibling ::before so we animate opacity (composite) instead of box-shadow (paint). */
    .hero-cta-primary {
      position: relative;
    }
    .hero-cta-primary::before {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: inherit;
      box-shadow: 0 2px 14px rgba(0,151,178,0.45), 0 14px 48px rgba(0,151,178,0.28);
      opacity: 0;
      pointer-events: none;
      animation: heroCtaGlowPulse 4.5s ease-in-out 1.6s infinite;
      will-change: opacity;
    }
    .hero-cta-primary:hover {
      box-shadow: 0 4px 18px rgba(0,151,178,0.55), 0 18px 56px rgba(0,151,178,0.32) !important;
      transform: translateY(-1px);
    }

    /* Floating mini-card (Glaubwürdigkeits-Anker) */
    .hero-mini-card {
      width: 100%;
      max-width: 380px;
    }
    @media (min-width: 1024px) {
      .hero-mini-card-wrap {
        position: absolute;
        right: clamp(24px, 4vw, 60px);
        bottom: clamp(40px, 5vw, 80px);
        z-index: 3;
      }
    }

    /* Mobile tightening */
    @media (max-width: 640px) {
      .hero-statement { line-height: 1.1; letter-spacing: -0.015em; white-space: normal; }
      .hero-aurora { filter: blur(20px) saturate(1.1); animation: none; }
    }

    /* Reduced motion — make hero content visible immediately, no aurora drift, no cta pulse */
    @media (prefers-reduced-motion: reduce) {
      .hero-statement .hero-word,
      .hero-statement .hero-accent,
      .hero-eyebrow, .hero-sub, .hero-ctas, .hero-badges, .hero-badge, .hero-mini-card {
        opacity: 1 !important;
        filter: none !important;
        transform: none !important;
        animation: none !important;
      }
      .hero-line-accent::before {
        opacity: 1 !important;
        transform: scale(1) !important;
        animation: none !important;
      }
      .hero-aurora { animation: none !important; }
      .hero-cta-primary::before { animation: none !important; opacity: 0.5 !important; }
    }

    /* ══════════ Ablauf / Process section ══════════ */
    @keyframes stepPulse {
      0%,100% { box-shadow: 0 0 0 0 rgba(0,151,178,0.5); }
      50%     { box-shadow: 0 0 0 8px rgba(0,151,178,0); }
    }
    .ablauf-step-num { animation: stepPulse 2.6s ease-in-out infinite; }
    .ablauf-rail {
      background: linear-gradient(180deg, transparent, rgba(0,151,178,0.35) 20%, rgba(0,151,178,0.35) 80%, transparent);
    }
    @media (min-width: 1024px) {
      .ablauf-rail-h {
        background: linear-gradient(90deg, transparent, rgba(0,151,178,0.35) 15%, rgba(0,151,178,0.35) 85%, transparent);
      }
    }
    .ablauf-step-card {
      transition: transform 320ms cubic-bezier(0.34,1.56,0.64,1);
    }
    .ablauf-step-card:hover { transform: translateY(-4px); }
    .ablauf-step-card:hover .ablauf-step-num {
      border-color: rgba(0,151,178,0.7) !important;
      box-shadow: 0 0 24px rgba(0,151,178,0.35);
    }

    /* ════════════════════════════════════════════════
       MOBILE OPTIMIZATIONS
    ════════════════════════════════════════════════ */

    /* Prevent iOS auto-zoom on input focus — requires 16px minimum font-size */
    @media (max-width: 640px) {
      input[type="text"],
      input[type="email"],
      input[type="tel"],
      input[type="number"],
      input[type="search"],
      input[type="url"],
      input[type="password"],
      textarea,
      select {
        font-size: 16px !important;
      }
    }

    /* Touch devices: disable hover-driven reveals so tapped cards don't get stuck in hover state */
    @media (hover: none) {
      .card-hover:hover,
      .sn-card:hover,
      .ablauf-step-card:hover {
        transform: none !important;
        box-shadow: none !important;
        border-color: rgba(255,255,255,0.07) !important;
      }
      .ablauf-step-card:hover .ablauf-step-num {
        border-color: inherit !important;
        box-shadow: none !important;
      }
    }

    /* Hero CTA stacking on very small screens */
    @media (max-width: 480px) {
      #startseite .hero-ctas > a {
        flex: 1 1 100%;
        justify-content: center;
      }
    }

    /* Respect reduced-motion preference: kill decorative animations */
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
      }
      #heroCanvas, #bgCanvas {
        display: none !important;
      }
    }

    /* ===========================================================
       Plattform v2 — Sticky-Scroll Spotlight
       =========================================================== */

    /* Layout grid */
    .pf-layout { position: relative; }

    /* Sticky stage (desktop only). On mobile the visual sits at the top
       of the column at natural flow. */
    .pf-stage { position: relative; }
    @media (min-width: 1024px) {
      .pf-stage {
        position: sticky;
        top: 6rem;
        align-self: start;
      }
    }

    .pf-svg-wrap {
      position: relative;
      width: 100%;
      max-width: 460px;
      margin: 0 auto;
      padding: 1.25rem;
      border-radius: 20px;
      background: linear-gradient(135deg, rgba(0,151,178,0.06), rgba(0,151,178,0.02));
      border: 1px solid rgba(0,151,178,0.18);
      overflow: hidden;
    }
    .pf-svg-wrap::before {
      content: "";
      position: absolute;
      inset: -1px;
      border-radius: 20px;
      pointer-events: none;
      background: radial-gradient(ellipse at 50% 0%, rgba(0,151,178,0.14), transparent 70%);
      opacity: 0.7;
    }
    .pf-svg { display: block; width: 100%; height: auto; position: relative; z-index: 1; }

    /* Layer dim/active states */
    .pf-svg .pf-layer {
      opacity: 0.32;
      transition: opacity 450ms ease, filter 450ms ease;
      filter: drop-shadow(0 0 0 rgba(0,151,178,0));
    }
    .pf-svg-wrap[data-active="0"] .pf-layer[data-layer="0"],
    .pf-svg-wrap[data-active="1"] .pf-layer[data-layer="1"],
    .pf-svg-wrap[data-active="2"] .pf-layer[data-layer="2"] {
      opacity: 1;
      filter: drop-shadow(0 0 10px rgba(0,151,178,0.45));
    }

    /* Outer pulse ring — only animates on the active layer */
    .pf-svg .pf-pulse { opacity: 0; transform-box: fill-box; transform-origin: center; }
    .pf-svg-wrap[data-active="0"] .pf-layer[data-layer="0"] .pf-pulse,
    .pf-svg-wrap[data-active="1"] .pf-layer[data-layer="1"] .pf-pulse,
    .pf-svg-wrap[data-active="2"] .pf-layer[data-layer="2"] .pf-pulse {
      animation: pf-pulse 2.4s ease-in-out infinite;
    }
    @keyframes pf-pulse {
      0%, 100% { opacity: 0;    transform: scale(1);    }
      50%      { opacity: 0.55; transform: scale(1.02); }
    }

    /* Data flow dots traveling down the spine */
    .pf-svg .pf-flow-dot {
      filter: drop-shadow(0 0 4px rgba(26,187,217,0.8));
    }
    .pf-svg .pf-flow-dot--1 { animation: pf-flow 4.2s linear infinite; }
    .pf-svg .pf-flow-dot--2 { animation: pf-flow 4.2s linear infinite; animation-delay: -1.4s; }
    .pf-svg .pf-flow-dot--3 { animation: pf-flow 4.2s linear infinite; animation-delay: -2.8s; }
    @keyframes pf-flow {
      0%   { transform: translateY(0);     opacity: 0; }
      8%   { opacity: 1; }
      92%  { opacity: 1; }
      100% { transform: translateY(480px); opacity: 0; }
    }

    /* Scanline over the dashboard frame */
    .pf-svg .pf-scanline { animation: pf-scan 3.6s ease-in-out infinite; opacity: 0.6; }
    @keyframes pf-scan {
      0%   { transform: translateY(0);   opacity: 0;   }
      10%  { opacity: 0.6; }
      90%  { opacity: 0.6; }
      100% { transform: translateY(140px); opacity: 0; }
    }

    /* Heartbeat path (draws on, then loops) */
    .pf-svg .pf-beat {
      animation: pf-beat 2.6s ease-in-out infinite;
    }
    @keyframes pf-beat {
      0%   { stroke-dashoffset: 200; opacity: 0.2; }
      40%  { stroke-dashoffset: 0;   opacity: 1; }
      75%  { stroke-dashoffset: 0;   opacity: 1; }
      100% { stroke-dashoffset: -200; opacity: 0.2; }
    }

    /* Status dot pulse */
    .pf-svg .pf-status-dot {
      animation: pf-blink 1.8s ease-in-out infinite;
      filter: drop-shadow(0 0 4px rgba(34,197,94,0.7));
    }
    @keyframes pf-blink {
      0%, 100% { opacity: 1; }
      50%      { opacity: 0.45; }
    }

    /* Shield ring (slow rotate around server stack) */
    .pf-svg .pf-shield {
      transform-box: fill-box;
      transform-origin: center;
      animation: pf-rotate 18s linear infinite;
    }
    @keyframes pf-rotate { to { transform: rotate(360deg); } }

    /* Center spine subtle breathing */
    .pf-svg .pf-spine {
      animation: pf-spine 4s ease-in-out infinite;
    }
    @keyframes pf-spine {
      0%, 100% { stroke: rgba(0,151,178,0.18); }
      50%      { stroke: rgba(0,151,178,0.32); }
    }

    /* ================ Right column: feature blocks ================ */
    .pf-blocks { display: flex; flex-direction: column; gap: 4rem; }
    @media (min-width: 1024px) {
      /* Generous bottom buffer keeps the sticky visual in view while the
         user is still reading block 3. */
      .pf-blocks { gap: 9rem; padding-bottom: 30vh; }
    }

    .pf-block { position: relative; }

    .pf-block-eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 0.75rem;
      padding: 0.4rem 0.8rem 0.4rem 0.45rem;
      border-radius: 999px;
      background: rgba(0,151,178,0.08);
      border: 1px solid rgba(0,151,178,0.22);
      margin-bottom: 1.25rem;
    }
    .pf-block-num {
      font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
      font-size: 0.7rem;
      font-weight: 600;
      letter-spacing: 0.18em;
      color: #1abbd9;
      background: rgba(0,151,178,0.18);
      border: 1px solid rgba(0,151,178,0.35);
      padding: 0.15rem 0.45rem;
      border-radius: 999px;
    }
    .pf-block-label {
      font-family: 'Inter', system-ui, sans-serif;
      font-size: 0.78rem;
      font-weight: 600;
      letter-spacing: 0.04em;
      color: #e5e7eb;
    }

    .pf-block-title {
      font-family: 'Montserrat', system-ui, sans-serif;
      font-size: 1.6rem;
      line-height: 1.2;
      font-weight: 600;
      letter-spacing: -0.02em;
      color: #fff;
      margin-bottom: 1rem;
    }
    @media (min-width: 768px) { .pf-block-title { font-size: 1.85rem; } }
    @media (min-width: 1024px) { .pf-block-title { font-size: 2.1rem; } }

    .pf-block-body {
      color: rgba(229,231,235,0.72);
      font-size: 1rem;
      line-height: 1.7;
      margin-bottom: 1.5rem;
      max-width: 32rem;
    }

    .pf-stat-row {
      display: flex;
      flex-wrap: wrap;
      gap: 0.5rem;
      margin-bottom: 1.5rem;
    }
    .pf-stat {
      display: inline-flex;
      align-items: center;
      padding: 0.35rem 0.7rem;
      border-radius: 999px;
      font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
      font-size: 0.72rem;
      letter-spacing: 0.04em;
      color: #cbd5e1;
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.08);
      transition: border-color 250ms ease, background-color 250ms ease, color 250ms ease;
    }
    .pf-block:hover .pf-stat,
    .pf-block.visible .pf-stat {
      border-color: rgba(0,151,178,0.32);
      color: #e5e7eb;
    }

    .pf-live {
      display: inline-flex;
      align-items: center;
      gap: 0.55rem;
      font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
      font-size: 0.72rem;
      letter-spacing: 0.04em;
      color: #94a3b8;
    }
    .pf-live-dot {
      width: 8px; height: 8px;
      border-radius: 999px;
      background: #94a3b8;
      box-shadow: 0 0 0 0 rgba(148,163,184,0.5);
    }
    .pf-live-dot--green {
      background: #22c55e;
      animation: pf-live-pulse 1.8s ease-in-out infinite;
    }
    @keyframes pf-live-pulse {
      0%, 100% { box-shadow: 0 0 0 0 rgba(34,197,94,0.55); }
      50%      { box-shadow: 0 0 0 6px rgba(34,197,94,0); }
    }
    .pf-live-beat {
      width: 60px; height: 14px;
      color: #1abbd9;
    }
    .pf-live-check {
      width: 14px; height: 14px;
      color: #1abbd9;
    }

    /* Reduced motion: kill continuous animations but keep the active-layer
       opacity swap working (it's CSS opacity, not animation) */
    @media (prefers-reduced-motion: reduce) {
      #plattform .pf-svg *,
      #plattform .pf-live-dot--green,
      #plattform .pf-stat { animation: none !important; transition: none !important; }
      #plattform .pf-svg .pf-flow-dot,
      #plattform .pf-svg .pf-scanline,
      #plattform .pf-svg .pf-pulse { display: none; }
    }

    /* Mobile compact: visual smaller, no sticky, all layers static and lit */
    @media (max-width: 1023px) {
      .pf-svg-wrap { max-width: 360px; padding: 1rem; }
      .pf-svg-wrap .pf-layer { opacity: 1 !important; filter: none !important; }
      .pf-svg-wrap .pf-pulse { display: none; }
    }

    /* Prevent horizontal overflow on the whole document.
       Use `clip` (not `hidden`) so body doesn't become a scroll container,
       which would break `position: sticky` on descendants. Fallback to
       `hidden` for browsers without `clip` support. */
    html, body {
      overflow-x: hidden;
      overflow-x: clip;
    }

    /* ============================================================
       Navigation dropdown ("Lösungen") — desktop hover + mobile accordion
       Added for multi-page solutions menu. CSP-safe (pure CSS, no inline JS).
       ============================================================ */
    .nav-dd { position: relative; }
    .nav-dd-trigger {
      display: inline-flex; align-items: center; gap: 0.35rem;
      background: none; border: none; cursor: pointer; padding: 0;
      font-size: 0.875rem; font-weight: 500; color: #9ca3af;
      font-family: inherit; transition: color 200ms ease;
    }
    .nav-dd-trigger:hover, .nav-dd:hover .nav-dd-trigger, .nav-dd:focus-within .nav-dd-trigger { color: #fff; }
    .nav-dd-trigger svg { width: 0.8rem; height: 0.8rem; transition: transform 250ms ease; }
    .nav-dd:hover .nav-dd-trigger svg, .nav-dd:focus-within .nav-dd-trigger svg { transform: rotate(180deg); }
    .nav-dd-panel {
      position: absolute; top: 100%; left: 50%;
      transform: translateX(-50%) translateY(10px);
      margin-top: 14px; min-width: 320px; padding: 0.6rem;
      border-radius: 16px; background: rgba(22,22,22,0.97);
      -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
      border: 1px solid rgba(255,255,255,0.1);
      box-shadow: 0 24px 60px -12px rgba(0,0,0,0.65);
      opacity: 0; visibility: hidden; pointer-events: none;
      transition: opacity 220ms ease, transform 220ms ease; z-index: 60;
    }
    .nav-dd-panel::before { content: ''; position: absolute; top: -14px; left: 0; right: 0; height: 14px; }
    .nav-dd:hover .nav-dd-panel, .nav-dd:focus-within .nav-dd-panel {
      opacity: 1; visibility: visible; pointer-events: auto;
      transform: translateX(-50%) translateY(0);
    }
    .nav-dd-group-label {
      font-family: 'Space Grotesk', monospace; font-size: 0.62rem;
      text-transform: uppercase; letter-spacing: 0.16em; color: #6b7280;
      padding: 0.55rem 0.75rem 0.35rem;
    }
    .nav-dd-item {
      display: flex; flex-direction: column; gap: 1px;
      padding: 0.55rem 0.75rem; border-radius: 10px; color: #d1d5db;
      transition: background 180ms ease, color 180ms ease;
    }
    .nav-dd-item:hover { background: rgba(0,151,178,0.1); color: #fff; }
    .nav-dd-item-title { font-size: 0.9rem; font-weight: 600; }
    .nav-dd-item-desc { font-size: 0.72rem; color: #7c7c7c; line-height: 1.4; }
    .nav-dd-sep { height: 1px; background: rgba(255,255,255,0.08); margin: 0.4rem 0.35rem; }

    /* Mobile accordion variant inside #mobile-menu */
    .mobile-dd { width: 100%; max-width: 340px; text-align: center; }
    .mobile-dd > summary {
      list-style: none; cursor: pointer; display: inline-flex; align-items: center;
      justify-content: center; gap: 0.5rem; font-family: 'Montserrat', system-ui, sans-serif;
      font-size: 1.5rem; line-height: 2rem; color: #d1d5db; transition: color 200ms ease;
    }
    .mobile-dd > summary::-webkit-details-marker { display: none; }
    .mobile-dd > summary:hover { color: #fff; }
    .mobile-dd > summary svg { width: 1.1rem; height: 1.1rem; transition: transform 250ms ease; }
    .mobile-dd[open] > summary svg { transform: rotate(180deg); }
    .mobile-dd-panel { display: flex; flex-direction: column; gap: 0.85rem; margin-top: 1.1rem; }
    .mobile-dd-item { font-size: 1.05rem; color: #9ca3af; transition: color 200ms ease; }
    .mobile-dd-item:hover { color: #fff; }

    /* ============================================================
       Loesungen-Unterseiten: Visuals (bespoke + dezente Animationen)
       Genutzt nur unter /loesungen/. CSP-safe (reine CSS-Animationen).
       ============================================================ */
    .sp-split { display: grid; gap: 2.5rem; align-items: center; }
    @media (min-width: 960px) { .sp-split { grid-template-columns: 1.04fr 0.96fr; gap: 4rem; } .sp-split.sp-rev .sp-visual { order: -1; } }
    .sp-visual { position: relative; }
    .sp-eyebrow { font-family: 'Space Grotesk', monospace; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.22em; color: #1abbd9; }
    .sp-icon-badge { width: 2.25rem; height: 2.25rem; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: rgba(0,151,178,0.1); border: 1px solid rgba(0,151,178,0.25); color: #1abbd9; flex-shrink: 0; }
    .sp-icon-badge svg { width: 1.2rem; height: 1.2rem; }

    .sp-feature-grid { display: grid; gap: 1rem; grid-template-columns: 1fr; }
    @media (min-width: 640px) { .sp-feature-grid.cols2 { grid-template-columns: repeat(2, 1fr); } }
    @media (min-width: 760px) { .sp-feature-grid.cols3 { grid-template-columns: repeat(3, 1fr); } }
    .sp-feature { padding: 1.1rem 1.2rem; border-radius: 14px; background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.07); transition: border-color 0.25s ease, background 0.25s ease, transform 0.25s ease; }
    .sp-feature:hover { border-color: rgba(0,151,178,0.35); background: rgba(0,151,178,0.05); transform: translateY(-2px); }

    .sp-statband { display: grid; gap: 1rem; grid-template-columns: 1fr; }
    @media (min-width: 640px) { .sp-statband { grid-template-columns: repeat(3, 1fr); } }
    .sp-stat { position: relative; padding: 1.6rem 1.4rem; border-radius: 16px; background: linear-gradient(135deg, rgba(0,151,178,0.12), rgba(0,151,178,0.04)); border: 1px solid rgba(0,151,178,0.18); overflow: hidden; }
    .sp-stat::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 2px; background: linear-gradient(90deg, transparent, rgba(26,187,217,0.7), transparent); transform: translateX(-100%); animation: sp-sweep 3.4s ease-in-out infinite; }

    .sp-card { position: relative; border-radius: 18px; background: linear-gradient(160deg, rgba(44,44,44,0.65), rgba(22,22,22,0.9)); border: 1px solid rgba(255,255,255,0.08); box-shadow: 0 30px 70px -22px rgba(0,0,0,0.65); padding: 1.25rem; }
    .sp-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
    .sp-livedot { width: 7px; height: 7px; border-radius: 50%; background: #1abbd9; box-shadow: 0 0 0 0 rgba(26,187,217,0.6); animation: sp-pulse 2s ease-out infinite; }

    .sp-dash-bars { display: flex; align-items: flex-end; gap: 7px; height: 92px; padding-top: 6px; }
    .sp-dash-bar { flex: 1; border-radius: 4px 4px 0 0; background: linear-gradient(180deg, rgba(26,187,217,0.85), rgba(0,151,178,0.22)); transform-origin: bottom; animation: sp-bar 1s cubic-bezier(0.22,1,0.36,1) both; }

    .sp-doc { position: absolute; display: none; align-items: center; gap: 6px; padding: 7px 11px; border-radius: 10px; background: rgba(30,30,30,0.92); border: 1px solid rgba(255,255,255,0.1); font-size: 0.7rem; color: #cbd5e1; box-shadow: 0 12px 26px -10px rgba(0,0,0,0.6); animation: sp-float 6s ease-in-out infinite; }
    @media (min-width: 640px) { .sp-doc { display: inline-flex; } }
    .sp-typing::after { content: ''; display: inline-block; width: 7px; height: 1.05em; background: #1abbd9; margin-left: 2px; vertical-align: -2px; animation: sp-blink 1.05s steps(1) infinite; }

    .sp-tl { position: relative; padding-left: 2.4rem; }
    .sp-tl::before { content: ''; position: absolute; left: 0.72rem; top: 0.5rem; bottom: 0.5rem; width: 2px; background: linear-gradient(180deg, rgba(0,151,178,0.55), rgba(0,151,178,0.08)); }
    .sp-tl-item { position: relative; padding-bottom: 1.4rem; }
    .sp-tl-item:last-child { padding-bottom: 0; }
    .sp-tl-dot { position: absolute; left: -2.4rem; top: 0; width: 1.5rem; height: 1.5rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(0,151,178,0.12); border: 1.5px solid rgba(0,151,178,0.4); color: #1abbd9; }
    .sp-tl-dot svg { width: 0.85rem; height: 0.85rem; }
    .sp-tl-dot.done { background: #0097b2; border-color: #0097b2; color: #fff; }
    .sp-tl-dot.active { box-shadow: 0 0 0 0 rgba(0,151,178,0.5); animation: sp-pulse 2s ease-out infinite; }

    .sp-pipe { display: flex; flex-direction: column; gap: 0.75rem; position: relative; }
    @media (min-width: 560px) { .sp-pipe { flex-direction: row; align-items: stretch; gap: 0; } }
    .sp-pipe-node { position: relative; z-index: 1; flex: 1; text-align: center; padding: 1rem 0.6rem; border-radius: 14px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.09); }
    @media (min-width: 560px) { .sp-pipe-node:not(:last-child) { margin-right: 1.6rem; } }
    .sp-pipe-conn { display: none; }
    @media (min-width: 560px) { .sp-pipe-conn { display: block; position: absolute; top: 50%; left: 7%; right: 7%; height: 2px; background: rgba(0,151,178,0.22); z-index: 0; } .sp-pipe-conn::after { content: ''; position: absolute; top: 50%; left: 0; width: 9px; height: 9px; border-radius: 50%; background: #1abbd9; box-shadow: 0 0 10px rgba(26,187,217,0.85); transform: translate(-50%,-50%); animation: sp-travel 3.6s linear infinite; } }

    .sp-steps { display: grid; gap: 1rem; grid-template-columns: 1fr; }
    @media (min-width: 760px) { .sp-steps { grid-template-columns: repeat(3, 1fr); } }
    .sp-step { position: relative; padding: 1.3rem; border-radius: 16px; background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.08); }
    .sp-step-num { font-family: 'Space Grotesk', monospace; font-size: 0.75rem; font-weight: 700; color: #1abbd9; letter-spacing: 0.1em; }

    .sp-flow { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; margin-top: 0.9rem; }
    .sp-flow-chip { font-size: 0.68rem; padding: 4px 9px; border-radius: 999px; background: rgba(0,151,178,0.08); border: 1px solid rgba(0,151,178,0.2); color: #9fd9e6; }
    .sp-flow-arrow { color: rgba(0,151,178,0.55); font-size: 0.8rem; }

    .sp-mini { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.9rem; }
    .sp-mini-cell { padding: 1.1rem; border-radius: 14px; background: rgba(255,255,255,0.025); border: 1px solid rgba(255,255,255,0.08); display: flex; flex-direction: column; gap: 0.55rem; align-items: flex-start; animation: sp-pulse-soft 3s ease-in-out infinite; }
    .sp-mini-cell:nth-child(2) { animation-delay: 0.6s; }
    .sp-mini-cell:nth-child(3) { animation-delay: 1.2s; }
    .sp-mini-cell:nth-child(4) { animation-delay: 1.8s; }

    @keyframes sp-bar { from { transform: scaleY(0); } to { transform: scaleY(1); } }
    @keyframes sp-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
    @keyframes sp-blink { 0%,50% { opacity: 1; } 51%,100% { opacity: 0; } }
    @keyframes sp-pulse { 0% { box-shadow: 0 0 0 0 rgba(0,151,178,0.5); } 70% { box-shadow: 0 0 0 12px rgba(0,151,178,0); } 100% { box-shadow: 0 0 0 0 rgba(0,151,178,0); } }
    @keyframes sp-pulse-soft { 0%,100% { border-color: rgba(255,255,255,0.08); } 50% { border-color: rgba(0,151,178,0.35); } }
    @keyframes sp-travel { 0% { left: 0; } 100% { left: 100%; } }
    @keyframes sp-sweep { 0% { transform: translateX(-100%); } 60%,100% { transform: translateX(100%); } }

    @media (prefers-reduced-motion: reduce) {
      .sp-dash-bar, .sp-doc, .sp-tl-dot.active, .sp-pipe-conn::after, .sp-mini-cell, .sp-stat::before, .sp-typing::after, .sp-livedot { animation: none !important; }
      .sp-dash-bar { transform: none !important; }
    }