/* Sekcja CSS 1 z pliku HTML */
/* ===================================================================
   RESET + TOKENS
=================================================================== */
      *,
      *::before,
      *::after {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        -webkit-tap-highlight-color: rgba(31, 122, 77, 0.14);
      }
      /* overflow-x:clip zamiast hidden — clip nie psuje position:sticky w dzieciach (sticky rail w procesie) */
      html {
        scroll-behavior: smooth;
        -webkit-text-size-adjust: 100%;
        overflow-x: clip;
        width: 100%;
        max-width: 100vw;
      }
      body {
        font-family:
          "Inter",
          system-ui,
          -apple-system,
          BlinkMacSystemFont,
          Segoe UI,
          sans-serif;
        background: var(--bg);
        color: var(--ink-2);
        line-height: 1.55;
        -webkit-font-smoothing: antialiased;
        overflow-x: clip;
        width: 100%;
        max-width: 100vw;
        min-height: 100vh;
        min-height: 100svh;
        position: relative;
      }
      img,
      svg,
      video {
        max-width: 100%;
        height: auto;
      }
      .container,
      .section {
        max-width: 100%;
      }
      /* Mobile: tap target sizing + safe-area */
      button,
      a,
      [onclick] {
        touch-action: manipulation;
      }
      .k-left {
        padding-left: max(var(--px), env(safe-area-inset-left));
        padding-right: max(var(--px), env(safe-area-inset-right));
      }
      .container {
        padding-left: max(var(--px), env(safe-area-inset-left));
        padding-right: max(var(--px), env(safe-area-inset-right));
      }
      /* Prevent iOS zoom on focus */
      @media (pointer: coarse) {
        input,
        textarea,
        select,
        .kf-group input,
        .kf-group textarea,
        .kf-group select,
        .w98-input,
        .w98-select,
        .w98-textarea {
          font-size: 16px !important;
        }
      }
      img,
      svg {
        display: block;
        max-width: 100%;
      }
      button {
        font-family: inherit;
        cursor: pointer;
        border: none;
        background: none;
      }
      a {
        color: inherit;
        text-decoration: none;
      }
      ul {
        list-style: none;
      }
      input,
      textarea,
      select {
        font-family: inherit;
      }
      [hidden] {
        display: none !important;
      }

      :root {
        /* === PAPER & INK === warm cream paper, deep forest ink */
        --bg: #f2efe6;
        --bg-2: #ebe7d9;
        --bg-3: #e2ddcc;
        --surface: #fbf9f2;
        --surface-2: #f6f3ea;
        --ink: #0d1a13;
        --ink-2: #1b2a21;
        --ink-3: #334039;
        --muted: #5f6b60;
        --muted-2: #5f6b60;
        --border: #d9d4c2;
        --border-2: #c3bda7;
        /* === BRAND === vibrant emerald green */
        --brand: #1f7a4d;
        --brand-hover: #145e38;
        --brand-light: #5ca380;
        --brand-soft: #dce9e0;
        --brand-glow: rgba(31, 122, 77, 0.22);
        /* === DARK PANEL === deep forest — wyróżnienie spójne z paletą, nie prawie-czarne */
        --dark: #1a4732;
        --dark-2: #235a3c;
        /* === PANEL ACCENT === ciepły cream na ciemnym panelu zamiast acid lime */
        --panel-hi: #e8dfb8;
        --panel-hi-2: #c8d4a4;
        /* === ACCENT === acid lime (używany tylko drobnie: dots, marquee hover, active chips) */
        --accent: #c7ea4b;
        --accent-2: #a6c93a;
        --sage: #8aa67a;
        --success: #2d8659;
        --warn: #c47d18;
        --danger: #c23b2e;
        /* === RADII, LAYOUT === */
        --r-xs: 6px;
        --r-sm: 10px;
        --r: 14px;
        --r-lg: 22px;
        --r-xl: 32px;
        --mw: 1200px;
        --px: clamp(20px, 4.5vw, 56px);
        --site-nav-top: 16px;
        --site-nav-height: 56px;
        --page-hero-gap: 48px;
        /* === SHADOWS === warmer, less blue */
        --shadow-sm:
          0 1px 2px rgba(13, 26, 19, 0.04), 0 1px 3px rgba(13, 26, 19, 0.06);
        --shadow:
          0 4px 12px rgba(13, 26, 19, 0.05), 0 2px 6px rgba(13, 26, 19, 0.04);
        --shadow-lg:
          0 24px 48px -16px rgba(13, 26, 19, 0.14),
          0 8px 24px -8px rgba(13, 26, 19, 0.08);
        --shadow-xl: 0 32px 64px -24px rgba(13, 26, 19, 0.22);
        /* === FONTS === */
        --display: "Fraunces", "Instrument Serif", Georgia, serif;
        --serif: "Instrument Serif", Georgia, serif;
        --mono: "JetBrains Mono", ui-monospace, monospace;
      }
      ::selection {
        background: var(--brand);
        color: #fff;
        text-shadow: none;
      }

      /* ===== PAPER GRAIN TEXTURE — subtle noise over whole page ===== */
      body::before {
        content: "";
        position: fixed;
        inset: 0;
        pointer-events: none;
        z-index: 999;
        opacity: 0.045;
        background-image: url("spoko-do-wyslania-assets/noise.svg");
        mix-blend-mode: multiply;
      }
      @media (pointer: coarse) {
        body::before {
          opacity: 0.03;
        }
      }

      /* ===== CUSTOM CURSOR ===== */
      @media (hover: hover) and (pointer: fine) {
        html,
        body,
        *,
        *::before,
        *::after {
          cursor: none !important;
        }
      }

      .cursor-dot,
      .cursor-ring {
        position: fixed;
        top: 0;
        left: 0;
        pointer-events: none;
        z-index: 9999;
        will-change: transform, width, height, opacity;
        transform: translate3d(-100px, -100px, 0);
      }
      .cursor-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--brand);
        box-shadow: 0 0 12px rgba(31, 122, 77, 0.55);
        margin: -4px 0 0 -4px;
        mix-blend-mode: normal;
        transition:
          opacity 0.2s,
          background 0.2s,
          width 0.2s,
          height 0.2s;
      }
      .cursor-ring {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        border: 1.5px solid var(--ink);
        margin: -18px 0 0 -18px;
        opacity: 0.85;
        transition:
          width 0.25s cubic-bezier(0.2, 0.6, 0.2, 1),
          height 0.25s cubic-bezier(0.2, 0.6, 0.2, 1),
          background 0.25s,
          border-color 0.25s,
          opacity 0.2s,
          border-width 0.25s;
      }

      /* Hide when leaving viewport */
      body.cursor-hidden .cursor-dot,
      body.cursor-hidden .cursor-ring {
        opacity: 0;
      }

      /* Hover: ring grows + fills brand soft, dot grows */
      body.cursor-hover .cursor-ring {
        width: 56px;
        height: 56px;
        margin: -28px 0 0 -28px;
        background: rgba(31, 122, 77, 0.09);
        border-color: var(--brand);
      }
      body.cursor-hover .cursor-dot {
        width: 12px;
        height: 12px;
        margin: -6px 0 0 -6px;
        background: var(--brand);
      }

      /* Click / active */
      body.cursor-click .cursor-ring {
        width: 26px;
        height: 26px;
        margin: -13px 0 0 -13px;
        background: rgba(31, 122, 77, 0.22);
        border-color: var(--brand);
      }
      body.cursor-click .cursor-dot {
        width: 6px;
        height: 6px;
        margin: -3px 0 0 -3px;
        background: #fff;
      }

      /* On dark sections (CTA blocks, kontakt left, medical case cover) */
      body.cursor-dark .cursor-ring {
        border-color: rgba(255, 255, 255, 0.9);
      }
      body.cursor-dark .cursor-dot {
        background: var(--brand-light);
      }
      body.cursor-dark.cursor-hover .cursor-ring {
        background: rgba(255, 255, 255, 0.15);
        border-color: #fff;
      }

      /* Text input state — I-beam replacement: ring becomes thin vertical line */
      body.cursor-text .cursor-ring {
        width: 2px;
        height: 22px;
        margin: -11px 0 0 -1px;
        border-radius: 2px;
        border: none;
        background: var(--ink);
      }
      body.cursor-text .cursor-dot {
        opacity: 0;
      }

      /* Cursor label (data-cursor) — WYŁĄCZONY, rozwiń-tooltip przylatywał z rogu i psuł UX */
      .cursor-label {
        display: none !important;
      }

      /* Hide custom cursor on W98 page - native pointer fits better there */
      @media (hover: hover) and (pointer: fine) {
        body.w98-mode .cursor-dot,
        body.w98-mode .cursor-ring,
        body.w98-mode .cursor-label {
          display: none;
        }
        body.w98-mode,
        body.w98-mode *,
        body.w98-mode *::before,
        body.w98-mode *::after {
          cursor: auto !important;
        }
        body.w98-mode .w98-icon,
        body.w98-mode .w98-start,
        body.w98-mode .w98-task-btn,
        body.w98-mode .w98-nav-pull,
        body.w98-mode .w98-nav-override,
        body.w98-mode .w98-start-item,
        body.w98-mode .w98-file,
        body.w98-mode .w98-btn,
        body.w98-mode .w98-seg,
        body.w98-mode .w98-tab,
        body.w98-mode .w98-title-btn,
        body.w98-mode .w98-ms-cell,
        body.w98-mode .w98-ms-face,
        body.w98-mode a,
        body.w98-mode button {
          cursor: pointer !important;
        }
        body.w98-mode .w98-title {
          cursor: move !important;
        }
        body.w98-mode input,
        body.w98-mode textarea,
        body.w98-mode select,
        body.w98-mode .w98-input,
        body.w98-mode .w98-select,
        body.w98-mode .w98-textarea {
          cursor: text !important;
        }
      }

      /* Touch/coarse: keep native cursor */
      @media (pointer: coarse), (hover: none) {
        .cursor-dot,
        .cursor-ring,
        .cursor-label {
          display: none;
        }
      }

      .container {
        max-width: var(--mw);
        margin: 0 auto;
        padding: 0 var(--px);
      }
      .section {
        padding: clamp(72px, 9vw, 120px) 0;
      }
      h1,
      h2,
      h3,
      h4,
      h5 {
        color: var(--ink);
        letter-spacing: -0.02em;
        font-weight: 600;
        line-height: 1.1;
        text-wrap: balance;
      }
      p {
        text-wrap: pretty;
      }
      .serif {
        font-family: var(--display);
        font-weight: 400;
        letter-spacing: -0.01em;
        font-style: italic;
      }
      .mono {
        font-family: var(--mono);
        letter-spacing: -0.02em;
      }
      .hl {
        color: var(--brand);
      }

      .eyebrow {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        font-family: var(--mono);
        font-size: 11px;
        font-weight: 500;
        letter-spacing: 0.12em;
        color: var(--brand);
        margin-bottom: 18px;
        text-transform: uppercase;
      }
      .eyebrow::before {
        content: "";
        width: 22px;
        height: 1px;
        background: var(--brand);
        display: inline-block;
      }

      .reveal {
        opacity: 0;
        transform: translateY(20px);
        transition:
          opacity 0.7s cubic-bezier(0.2, 0.6, 0.2, 1),
          transform 0.7s cubic-bezier(0.2, 0.6, 0.2, 1);
      }
      .reveal.vis {
        opacity: 1;
        transform: none;
      }

      /* Tilt 3D cards — applied via JS */
      .tilt {
        transition:
          transform 0.25s cubic-bezier(0.2, 0.6, 0.2, 1),
          box-shadow 0.25s;
        transform-style: preserve-3d;
        will-change: transform;
      }
      .tilt::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        background: radial-gradient(
          circle at var(--mx, 50%) var(--my, 50%),
          rgba(31, 122, 77, 0.18),
          transparent 40%
        );
        opacity: 0;
        transition: opacity 0.25s;
        pointer-events: none;
        z-index: 1;
      }
      .tilt.hovering::before {
        opacity: 1;
      }
      .tilt > * {
        position: relative;
        z-index: 2;
      }

      /* Magnetic buttons — cursor attracts the button */
      .magnetic {
        transition: transform 0.25s cubic-bezier(0.2, 0.6, 0.2, 1);
      }

      /* Marquee for trust logos */
      .trust-marquee {
        overflow: hidden;
        mask-image: linear-gradient(
          90deg,
          transparent 0,
          #000 5%,
          #000 95%,
          transparent 100%
        );
        -webkit-mask-image: linear-gradient(
          90deg,
          transparent 0,
          #000 5%,
          #000 95%,
          transparent 100%
        );
      }
      .trust-marquee-track {
        display: flex;
        gap: 40px;
        animation: marquee 42s linear infinite;
        width: max-content;
        align-items: center;
      }
      /* Nie pauzujemy na hover — ciągły ruch */
      @keyframes marquee {
        from {
          transform: translateX(0);
        }
        to {
          transform: translateX(-50%);
        }
      }

      /* Scramble text placeholder */
      .scramble {
        font-variant-ligatures: none;
      }

      /* Word-by-word hero reveal */
      .word-split {
        display: inline-block;
        overflow: hidden;
        padding-bottom: 0.1em;
        vertical-align: top;
      }
      .word-split > span {
        display: inline-block;
        transform: translateY(110%);
        opacity: 0;
        transition: none;
      }
      .word-split.done > span {
        animation: wordUp 1.1s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
      }
      @keyframes wordUp {
        to {
          transform: translateY(0);
          opacity: 1;
        }
      }

      /* Hero spinning circular badge */
      .hero-spinner {
        position: absolute;
        bottom: -40px;
        right: 20px;
        width: 130px;
        height: 130px;
        pointer-events: none;
        z-index: 3;
        opacity: 0.88;
      }
      .hero-spinner-ring {
        animation: spinSlow 18s linear infinite;
        transform-origin: center;
      }
      @keyframes spinSlow {
        to {
          transform: rotate(360deg);
        }
      }
      .hero-spinner-center {
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 28px;
        color: var(--brand);
      }

      /* Parallax pill follows mouse */
      .hero-pill {
        will-change: transform;
        transition: transform 0.4s cubic-bezier(0.2, 0.6, 0.2, 1);
      }

      /* Arrow rotate on hover (global) */
      .btn-primary:hover .btn-arrow,
      .btn-ghost:hover .btn-arrow,
      .btn-outline:hover .btn-arrow {
        transform: translateX(3px) rotate(-8deg);
      }
      .hero-ctas .btn-primary,
      .hero-ctas .btn-ghost {
        position: relative;
      }

      /* Animated gradient on hero headline span */
      .hero-h1 .serif {
        background: linear-gradient(
          90deg,
          var(--brand) 0%,
          #4a7a5e 25%,
          var(--accent) 50%,
          #4a7a5e 75%,
          var(--brand) 100%
        );
        background-size: 200% 100%;
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent !important;
        -webkit-text-fill-color: transparent;
        animation: gradShift 8s ease-in-out infinite;
      }
      @keyframes gradShift {
        0%,
        100% {
          background-position: 0% 50%;
        }
        50% {
          background-position: 100% 50%;
        }
      }

      /* Hover pulse on links/ctas */
      .btn-primary,
      .btn-outline {
        position: relative;
        overflow: hidden;
      }
      .btn-primary::before,
      .btn-outline::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(
          120deg,
          transparent 30%,
          rgba(255, 255, 255, 0.25) 50%,
          transparent 70%
        );
        transform: translateX(-100%);
        transition: transform 0.6s;
      }
      .btn-primary:hover::before,
      .btn-outline:hover::before {
        transform: translateX(100%);
      }

      /* BUTTONS — editorial, pill-shape, with rotating arrow chip */
      .btn-primary,
      .btn-ghost,
      .btn-outline {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        padding: 12px 18px 12px 22px;
        font-size: 14px;
        font-weight: 500;
        border-radius: 999px;
        transition: all 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
        white-space: nowrap;
        cursor: pointer;
        border: 1px solid transparent;
        letter-spacing: -0.005em;
      }
      .btn-primary {
        background: var(--ink);
        color: var(--bg);
        box-shadow: 0 1px 2px rgba(13, 26, 19, 0.1);
      }
      .btn-primary:hover {
        background: var(--brand);
        transform: translateY(-2px);
        box-shadow: 0 12px 28px var(--brand-glow);
      }
      .btn-ghost {
        background: transparent;
        color: var(--ink);
        border-color: var(--border-2);
        padding: 12px 22px;
      }
      .btn-ghost:hover {
        background: var(--surface);
        border-color: var(--ink);
        color: var(--ink);
      }
      .btn-outline {
        background: transparent;
        color: var(--ink);
        border-color: var(--ink);
        padding: 12px 22px;
      }
      .btn-outline:hover {
        background: var(--ink);
        color: var(--bg);
        border-color: var(--ink);
      }
      /* Arrow becomes a circle chip with rotate-on-hover */
      .btn-primary .btn-arrow {
        width: 22px;
        height: 22px;
        border-radius: 50%;
        background: var(--accent);
        color: var(--brand);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 11px;
        font-weight: 600;
        transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.3, 1.3);
      }
      .btn-primary:hover .btn-arrow {
        transform: rotate(-45deg) scale(1.08);
      }
      .btn-ghost .btn-arrow,
      .btn-outline .btn-arrow {
        display: inline-block;
        transition: transform 0.25s;
        font-weight: 500;
      }
      .btn-ghost:hover .btn-arrow,
      .btn-outline:hover .btn-arrow {
        transform: translateX(3px);
      }

      /* NAV — LIQUID GLASS, centered */
      .hud-bar {
        display: none;
      }
      nav {
        position: fixed;
        top: var(--site-nav-top);
        left: 50%;
        transform: translateX(-50%);
        z-index: 500;
        border-radius: 999px;
        height: var(--site-nav-height);
        background: linear-gradient(
          135deg,
          rgba(251, 249, 242, 0.75) 0%,
          rgba(251, 249, 242, 0.88) 50%,
          rgba(251, 249, 242, 0.72) 100%
        );
        backdrop-filter: blur(22px) saturate(1.6);
        -webkit-backdrop-filter: blur(22px) saturate(1.6);
        border: 1px solid var(--border);
        box-shadow:
          0 8px 32px rgba(13, 26, 19, 0.08),
          0 2px 8px rgba(13, 26, 19, 0.04),
          inset 0 1px 0 rgba(255, 255, 255, 0.7);
        transition: all 0.35s cubic-bezier(0.2, 0.6, 0.2, 1);
        width: auto;
        max-width: calc(100vw - 32px);
        overflow: hidden;
      }
      nav::before {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        border-radius: 999px;
        background: linear-gradient(
          180deg,
          rgba(255, 255, 255, 0.45) 0%,
          transparent 45%,
          transparent 55%,
          rgba(255, 255, 255, 0.15) 100%
        );
        mix-blend-mode: overlay;
      }
      nav::after {
        content: "";
        position: absolute;
        top: -50%;
        left: -25%;
        width: 150%;
        height: 200%;
        pointer-events: none;
        background: radial-gradient(
          ellipse 60% 45% at 50% 0%,
          rgba(255, 255, 255, 0.8),
          transparent 60%
        );
        mix-blend-mode: screen;
        opacity: 0.55;
        transition: opacity 0.5s;
      }
      nav.scrolled {
        background: linear-gradient(
          135deg,
          rgba(255, 255, 255, 0.55) 0%,
          rgba(255, 255, 255, 0.78) 50%,
          rgba(255, 255, 255, 0.58) 100%
        );
        box-shadow:
          0 14px 40px rgba(11, 20, 38, 0.12),
          0 2px 8px rgba(11, 20, 38, 0.06),
          inset 0 1px 0 rgba(255, 255, 255, 0.95),
          inset 0 -1px 0 rgba(255, 255, 255, 0.3),
          inset 0 0 0 1px rgba(255, 255, 255, 0.22);
      }
      nav.scrolled::after {
        opacity: 0.35;
      }
      /* Auto-hide nav przy scroll down, pokaż przy scroll up lub hover strefy nad nav-em */
      body.nav-hidden nav {
        transform: translateX(-50%) translateY(-170%);
        opacity: 0;
        pointer-events: none;
      }
      .nav-hot-zone {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: 40px;
        z-index: 499;
        pointer-events: auto;
      }
      body.w98-mode .nav-hot-zone {
        display: none;
      }
      .nav-inner {
        max-width: var(--mw);
        margin: 0 auto;
        padding: 0 8px 0 20px;
        height: 100%;
        display: grid;
        grid-template-columns: auto 1fr auto;
        align-items: center;
        gap: 18px;
        position: relative;
        z-index: 2;
      }
      .nav-logo {
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 15px;
        font-weight: 700;
        color: var(--ink);
        letter-spacing: -0.01em;
        cursor: pointer;
      }
      .nav-logo-mark {
        width: 30px;
        height: 30px;
        position: relative;
        display: inline-block;
        flex-shrink: 0;
      }
      .nav-logo-mark svg {
        width: 100%;
        height: 100%;
        display: block;
      }
      .nav-logo-mark .mark-orbit {
        animation: markOrbit 8s linear infinite;
        transform-origin: center;
      }
      .nav-logo:hover .mark-orbit {
        animation-duration: 2.5s;
      }
      .nav-logo-mark .mark-core {
        transition: transform 0.4s cubic-bezier(0.2, 0.6, 0.2, 1);
      }
      .nav-logo:hover .mark-core {
        transform: scale(1.18) rotate(20deg);
        transform-origin: center;
      }
      @keyframes markOrbit {
        to {
          transform: rotate(360deg);
        }
      }
      .nav-logo-text {
        display: inline-flex;
        align-items: baseline;
        gap: 1px;
        font-family: var(--display);
        font-weight: 600;
        letter-spacing: -0.025em;
        font-size: 17px;
        color: var(--ink);
      }
      .nav-logo-text .dot {
        color: var(--brand);
        animation: dotPulse 2.6s ease-in-out infinite;
        display: inline-block;
      }
      @keyframes dotPulse {
        0%,
        100% {
          transform: scale(1);
          opacity: 1;
        }
        50% {
          transform: scale(1.35);
          opacity: 0.7;
        }
      }

      /* Legacy fallback */
      .nav-logo-dot {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: var(--brand);
        box-shadow: 0 0 0 3px var(--brand-glow);
      }
      .nav-links {
        display: flex;
        gap: 2px;
        align-items: center;
        justify-self: center;
        position: relative;
        padding: 0;
        margin: 0;
        list-style: none;
      }
      .nav-links li {
        list-style: none;
      }
      .nav-links a {
        font-size: 13px;
        font-weight: 500;
        color: var(--ink-3);
        padding: 8px 14px;
        border-radius: 999px;
        transition: color 0.3s;
        cursor: pointer;
        position: relative;
        z-index: 2;
        display: inline-block;
        letter-spacing: -0.005em;
      }
      .nav-links a:hover {
        color: var(--ink);
      }
      .nav-links a.active {
        color: var(--brand);
      }
      /* Sliding active pill za aktywnym itemem */
      .nav-slider {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        height: 32px;
        background: var(--brand-soft);
        border-radius: 999px;
        z-index: 1;
        transition:
          left 0.4s cubic-bezier(0.2, 0.8, 0.3, 1),
          width 0.4s cubic-bezier(0.2, 0.8, 0.3, 1);
        pointer-events: none;
        left: 0;
        width: 0;
        opacity: 0;
      }
      .nav-slider.ready {
        opacity: 1;
      }
      /* Nav right: status + CTA */
      .nav-right {
        display: flex;
        align-items: center;
        gap: 14px;
        justify-self: end;
      }
      .nav-status {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-family: var(--mono);
        font-size: 10.5px;
        font-weight: 500;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: var(--ink-3);
      }
      .nav-status-dot {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: var(--success);
        box-shadow:
          0 0 0 2px rgba(45, 134, 89, 0.2),
          0 0 10px rgba(45, 134, 89, 0.5);
        animation: pulse 2.2s infinite;
      }
      .nav-cta {
        display: inline-flex !important;
        align-items: center;
        gap: 8px;
        background: var(--brand) !important;
        color: var(--bg) !important;
        padding: 9px 8px 9px 16px !important;
        font-weight: 600 !important;
        font-size: 13px;
        border-radius: 999px;
        transition: background 0.25s;
        cursor: pointer;
        letter-spacing: -0.005em;
        white-space: nowrap;
      }
      .nav-cta:hover {
        background: var(--brand-hover) !important;
        color: var(--bg) !important;
      }
      .nav-cta-arr {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 22px;
        height: 22px;
        border-radius: 50%;
        background: var(--panel-hi);
        color: var(--dark);
        font-size: 11px;
        font-weight: 600;
        transition: transform 0.3s;
      }
      .nav-cta:hover .nav-cta-arr {
        transform: translateX(2px);
      }
      @media (max-width: 960px) {
        .nav-status {
          display: none;
        }
      }
      .nav-burger {
        display: none;
        width: 40px;
        height: 40px;
        align-items: center;
        justify-content: center;
        border-radius: 999px;
        cursor: pointer;
      }
      .nav-burger span {
        display: block;
        width: 18px;
        height: 2px;
        background: var(--ink);
        border-radius: 2px;
        position: relative;
      }
      .nav-burger span::before,
      .nav-burger span::after {
        content: "";
        position: absolute;
        left: 0;
        width: 18px;
        height: 2px;
        background: var(--ink);
        border-radius: 2px;
      }
      .nav-burger span::before {
        top: -6px;
      }
      .nav-burger span::after {
        top: 6px;
      }
      .mobile-nav {
        position: fixed;
        inset: 0;
        z-index: 600;
        background: rgba(245, 247, 251, 0.98);
        backdrop-filter: blur(20px);
        display: none;
        flex-direction: column;
        padding: 90px 28px 40px;
        opacity: 0;
        transition: opacity 0.25s;
      }
      .mobile-nav.open {
        display: flex;
        opacity: 1;
      }
      .mobile-nav a {
        font-family: var(--display);
        font-size: 36px;
        color: var(--ink);
        padding: 14px 0;
        border-bottom: 1px solid var(--border);
        cursor: pointer;
      }
      .mobile-nav a.active {
        color: var(--brand);
      }
      .mobile-nav-close {
        position: absolute;
        top: 26px;
        right: 22px;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: var(--ink);
        color: #fff;
        font-size: 22px;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      /* PAGE ROUTING */
      .page {
        display: none;
      }
      .page.active {
        display: block;
      }
      body.w98-mode {
        overflow: hidden;
      }
      body.w98-mode #page-aplikacje.active {
        display: block;
      }
      /* In w98 mode, nav slides down from top — hidden until button clicked */
      body.w98-mode nav {
        top: 62px;
        transform: translate(-50%, -12px);
        opacity: 0;
        pointer-events: none;
        transition:
          transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
          opacity 0.25s ease;
        background: rgba(21, 43, 31, 0.88);
        border-color: rgba(199, 234, 75, 0.25);
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
      }
      body.w98-mode nav .nav-logo,
      body.w98-mode nav .nav-links a {
        color: #f2efe6;
      }
      body.w98-mode nav .nav-logo-text,
      body.w98-mode nav .nav-links a {
        color: #f2efe6;
      }
      body.w98-mode nav .nav-links a:hover {
        background: rgba(199, 234, 75, 0.1);
        color: #c7ea4b;
      }
      body.w98-mode nav .nav-links a.active {
        background: rgba(199, 234, 75, 0.15);
        color: #c7ea4b;
      }
      body.w98-mode nav .nav-cta {
        background: #c7ea4b !important;
        color: #0d1a13 !important;
      }
      body.nav-pull-down nav {
        transform: translate(-50%, 0);
        opacity: 1;
        pointer-events: auto;
      }
      body.w98-mode .mobile-nav {
        display: none !important;
      }
      body.w98-mode .nav-logo-dot {
        background: #c7ea4b;
        box-shadow: 0 0 8px rgba(199, 234, 75, 0.4);
      }

      /* W98 nav pull-down button */
      .w98-nav-pull {
        position: absolute;
        top: 16px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 10001;
        padding: 8px 16px;
        background: rgba(21, 43, 31, 0.88);
        border: 1px solid rgba(199, 234, 75, 0.32);
        font-family: "JetBrains Mono", monospace;
        font-size: 11px;
        color: #c7ea4b;
        cursor: pointer;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        border-radius: 999px;
        transition: all 0.2s;
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        display: none;
        font-weight: 500;
      }
      body.w98-mode .w98-nav-pull {
        display: inline-flex;
        align-items: center;
        gap: 8px;
      }
      .w98-nav-pull:hover {
        background: rgba(199, 234, 75, 0.15);
        color: #f2efe6;
      }
      .w98-nav-pull-arrow {
        display: inline-block;
        transition: transform 0.3s;
        font-size: 10px;
      }
      body.nav-pull-down .w98-nav-pull-arrow {
        transform: rotate(180deg);
      }

      /* ============================================================
   EDITORIAL SYSTEM — typography, layout, components
============================================================ */

      /* Editorial container */
      .ed-wrap {
        max-width: 1440px;
        margin: 0 auto;
        padding: 0 var(--px);
      }

      /* Display type utilities */
      .ed-display {
        font-family: var(--display);
        font-weight: 500;
        letter-spacing: -0.04em;
        line-height: 0.9;
        color: var(--ink);
        font-optical-sizing: auto;
        font-variation-settings:
          "opsz" 96,
          "SOFT" 0,
          "WONK" 0;
      }
      .ed-italic {
        font-family: var(--serif);
        font-style: italic;
        font-weight: 400;
        letter-spacing: -0.01em;
      }
      .ed-mono-label {
        font-family: var(--mono);
        font-size: 11px;
        font-weight: 500;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--muted);
      }
      .ed-mono-label.accent {
        color: var(--brand);
      }

      /* Editorial SECTION HEADER — 3-col: number · title · description + right link */
      .ed-section {
        padding: clamp(64px, 8vw, 112px) 0;
        position: relative;
      }
      .ed-section + .ed-section {
        padding-top: 0;
      }
      .ed-sec-head {
        display: grid;
        grid-template-columns: 120px minmax(0, 1fr) minmax(0, 1fr) auto;
        gap: clamp(24px, 3vw, 56px);
        align-items: baseline;
        margin-bottom: 48px;
        padding-top: 48px;
      }
      .ed-sec-head-num {
        font-family: var(--mono);
        font-size: 11px;
        font-weight: 500;
        color: var(--brand);
        letter-spacing: 0.12em;
        text-transform: uppercase;
        white-space: nowrap;
        display: inline-flex;
        align-items: center;
        gap: 10px;
      }
      .ed-sec-head-num::before {
        content: "";
        width: 24px;
        height: 1px;
        background: var(--brand);
        flex-shrink: 0;
      }
      .ed-sec-head-num span {
        display: block;
        color: var(--muted);
        margin-top: 6px;
        font-weight: 400;
        letter-spacing: 0.08em;
      }
      .ed-sec-head-title {
        min-width: 0;
      }
      .ed-sec-head-title h2 {
        font-family: var(--display);
        font-size: clamp(26px, 3.2vw, 44px);
        font-weight: 500;
        letter-spacing: -0.025em;
        line-height: 1;
        color: var(--ink);
        text-wrap: balance;
        margin: 0;
      }
      .ed-sec-head-title h2 .serif,
      .ed-sec-head-title h2 .ital {
        color: var(--brand);
        font-weight: 600;
        font-family: inherit;
        font-style: normal;
      }
      .ed-sec-head-desc {
        font-size: 14px;
        line-height: 1.5;
        color: var(--muted);
        max-width: 42ch;
        text-wrap: pretty;
        margin: 0;
        align-self: center;
      }
      .ed-sec-head .ed-sec-right {
        justify-self: end;
        align-self: center;
        white-space: nowrap;
      }
      @media (max-width: 960px) {
        .ed-sec-head {
          grid-template-columns: 1fr auto;
          gap: 14px 20px;
          align-items: center;
        }
        .ed-sec-head-num {
          grid-column: 1;
        }
        .ed-sec-head .ed-sec-right {
          grid-column: 2;
          grid-row: 1;
        }
        .ed-sec-head-title {
          grid-column: 1/-1;
          margin-top: 6px;
        }
        .ed-sec-head-desc {
          grid-column: 1/-1;
          margin-top: 0;
        }
      }

      /* Underline reveal link */
      .ed-link {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        font-size: 14px;
        font-weight: 500;
        color: var(--ink);
        position: relative;
        cursor: pointer;
      }
      .ed-link::after {
        content: "";
        position: absolute;
        left: 0;
        right: 24px;
        bottom: -4px;
        height: 1px;
        background: currentColor;
        transform: scaleX(1);
        transform-origin: right;
        transition: transform 0.5s cubic-bezier(0.2, 0.9, 0.3, 1);
      }
      .ed-link:hover::after {
        transform: scaleX(0);
        transform-origin: left;
      }
      .ed-link .ed-arrow {
        width: 26px;
        height: 26px;
        border-radius: 50%;
        background: var(--ink);
        color: var(--bg);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 11px;
        transition: transform 0.4s cubic-bezier(0.2, 0.9, 0.3, 1.2);
      }
      .ed-link:hover .ed-arrow {
        transform: rotate(-45deg);
      }

      /* Big editorial buttons */
      .ed-btn {
        display: inline-flex;
        align-items: center;
        gap: 14px;
        padding: 14px 12px 14px 24px;
        border-radius: 999px;
        font-size: 14px;
        font-weight: 500;
        transition:
          transform 0.35s cubic-bezier(0.2, 0.9, 0.3, 1),
          background 0.3s,
          color 0.3s,
          box-shadow 0.3s;
        position: relative;
        white-space: nowrap;
        border: 1px solid transparent;
        cursor: pointer;
        font-family: inherit;
        letter-spacing: -0.005em;
        line-height: 1;
      }
      .ed-btn .ed-btn-arrow {
        width: 28px;
        height: 28px;
        border-radius: 50%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        transition: transform 0.4s cubic-bezier(0.2, 0.9, 0.3, 1.3);
      }
      .ed-btn:hover .ed-btn-arrow {
        transform: rotate(-45deg);
      }
      .ed-btn-dark {
        background: var(--dark);
        color: var(--bg);
      }
      .ed-btn-dark .ed-btn-arrow {
        background: var(--panel-hi);
        color: var(--dark);
      }
      .ed-btn-dark:hover {
        background: var(--brand);
      }
      .ed-btn-accent {
        background: var(--brand);
        color: var(--bg);
        font-weight: 600;
      }
      .ed-btn-accent .ed-btn-arrow {
        background: var(--panel-hi);
        color: var(--dark);
      }
      .ed-btn-accent:hover {
        background: #b6d835;
      }
      .ed-btn-outline {
        background: transparent;
        color: var(--ink);
        border-color: var(--ink);
        padding: 14px 22px;
      }
      .ed-btn-outline:hover {
        background: var(--ink);
        color: var(--bg);
      }
      .ed-btn-light {
        background: var(--bg);
        color: var(--ink);
      }
      .ed-btn-light .ed-btn-arrow {
        background: var(--ink);
        color: var(--bg);
      }
      .ed-btn-light:hover {
        background: var(--accent);
      }

      /* ============================================================
   HERO — editorial brutalist
============================================================ */
      .ed-hero {
        padding: 120px 0 64px;
        position: relative;
        overflow: hidden;
      }
      .ed-hero-meta {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 32px;
        margin-bottom: 36px;
        flex-wrap: wrap;
      }
      .ed-hero-meta-left {
        display: flex;
        flex-direction: column;
        gap: 10px;
        max-width: 520px;
      }
      .ed-hero-status {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        padding: 8px 14px;
        border-radius: 999px;
        background: var(--ink);
        color: var(--bg);
        font-family: var(--mono);
        font-size: 11px;
        font-weight: 500;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        width: fit-content;
      }
      .ed-hero-status-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--accent);
        box-shadow: 0 0 10px var(--accent);
        animation: pulse 2.2s infinite;
      }
      .ed-hero-meta-right {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 6px;
        font-family: var(--mono);
        font-size: 11px;
        color: var(--muted);
        text-transform: uppercase;
        letter-spacing: 0.08em;
        text-align: right;
      }
      .ed-hero-meta-right strong {
        color: var(--ink);
        font-weight: 500;
      }

      /* Hero 2-col grid — title on left, navigator on right */
      .ed-hero-grid {
        display: grid;
        grid-template-columns: minmax(0, 1.2fr) minmax(360px, 1fr);
        gap: clamp(32px, 5vw, 80px);
        align-items: start;
        margin-top: 8px;
      }
      @media (max-width: 980px) {
        .ed-hero-grid {
          grid-template-columns: 1fr;
          gap: 40px;
        }
      }
      .ed-hero-main {
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 32px;
      }
      .ed-hero-aside {
        min-width: 0;
        position: sticky;
        top: 96px;
      }
      @media (max-width: 980px) {
        .ed-hero-aside {
          position: static;
        }
      }

      .ed-hero-title {
        position: relative;
      }
      .ed-hero-title h1 {
        font-family: var(--display);
        font-size: clamp(40px, 6.4vw, 96px);
        font-weight: 500;
        letter-spacing: -0.04em;
        line-height: 1.02;
        color: var(--ink);
        text-wrap: balance;
        font-variation-settings: "opsz" 120;
        max-width: 14ch;
      }
      .ed-hero-title h1 .line {
        display: block;
        overflow: hidden;
        padding: 0.12em 0 0.14em;
        margin: -0.12em 0 -0.14em;
      }
      .ed-hero-title h1 .word {
        display: inline-block;
        transform: translateY(108%);
        animation: edWordUp 1s cubic-bezier(0.2, 0.9, 0.3, 1.05) forwards;
        opacity: 0;
      }
      .ed-hero-title h1 .word.i1 {
        animation-delay: 0.08s;
      }
      .ed-hero-title h1 .word.i2 {
        animation-delay: 0.16s;
      }
      .ed-hero-title h1 .word.i3 {
        animation-delay: 0.24s;
      }
      .ed-hero-title h1 .word.i4 {
        animation-delay: 0.32s;
      }
      .ed-hero-title h1 .word.i5 {
        animation-delay: 0.4s;
      }
      .ed-hero-title h1 .word.i6 {
        animation-delay: 0.48s;
      }
      .ed-hero-title h1 .word.i7 {
        animation-delay: 0.56s;
      }
      .ed-hero-title h1 .word.i8 {
        animation-delay: 0.64s;
      }
      @keyframes edWordUp {
        from {
          transform: translateY(108%);
          opacity: 0;
        }
        to {
          transform: translateY(0);
          opacity: 1;
        }
      }
      .ed-hero-ital {
        color: var(--brand);
        font-weight: 600;
      }

      .ed-hero-bottom {
        display: flex;
        flex-direction: column;
        gap: 22px;
        border-top: 1px solid var(--border);
        padding-top: 28px;
      }
      .ed-hero-desc {
        max-width: 46ch;
        font-size: 17px;
        line-height: 1.5;
        color: var(--ink-3);
        text-wrap: pretty;
        margin: 0;
      }
      .ed-hero-actions {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
        align-items: center;
      }
      .ed-hero-specs {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 0;
        margin-top: 4px;
        border-top: 1px solid var(--border);
        border-bottom: 1px solid var(--border);
      }
      .ed-hero-specs > span {
        min-width: 0;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 5px;
        padding: 14px 16px;
        border-left: 1px solid var(--border);
        font-family: var(--mono);
        font-size: 9px;
        line-height: 1.35;
        color: var(--muted);
        text-transform: uppercase;
        letter-spacing: 0.08em;
      }
      .ed-hero-specs > span:first-child {
        border-left: 0;
        padding-left: 0;
      }
      .ed-hero-specs > span::before {
        display: none;
      }
      .ed-hero-specs strong {
        display: block;
        color: var(--ink);
        font-family: var(--sans);
        font-size: 12px;
        line-height: 1.3;
        font-weight: 600;
        letter-spacing: 0;
        text-transform: none;
        text-wrap: balance;
      }

      /* Hero rotating medallion — small corner mark */
      .ed-hero-badge {
        display: none;
      }

      /* Hero bg decoration */
      .ed-hero-bg {
        position: absolute;
        inset: 0;
        pointer-events: none;
        z-index: 0;
        overflow: hidden;
      }
      .ed-hero-bg::before {
        content: "";
        position: absolute;
        width: 640px;
        height: 640px;
        border-radius: 50%;
        background: radial-gradient(circle, var(--brand-glow), transparent 70%);
        filter: blur(80px);
        top: -220px;
        right: -180px;
        animation: blob 22s ease-in-out infinite;
      }
      .ed-hero > .ed-wrap {
        position: relative;
        z-index: 2;
      }

      /* ============================================================
   HERO NAVIGATOR — ULTRAMODERN command-palette style
   inspirations: Linear, Raycast, Arc, Mercury concepts
============================================================ */
      .np {
        position: relative;
        font-family: inherit;
        isolation: isolate;
        background: linear-gradient(
          180deg,
          rgba(251, 249, 242, 0.98) 0%,
          rgba(246, 243, 234, 0.96) 100%
        );
        border: 1px solid rgba(217, 212, 194, 0.7);
        border-radius: 24px;
        overflow: hidden;
        backdrop-filter: blur(20px) saturate(1.35);
        -webkit-backdrop-filter: blur(20px) saturate(1.35);
        box-shadow:
          0 1px 0 rgba(255, 255, 255, 0.85) inset,
          0 -1px 0 rgba(217, 212, 194, 0.25) inset,
          0 32px 56px -32px rgba(13, 26, 19, 0.18),
          0 12px 28px -14px rgba(13, 26, 19, 0.1);
        animation: npEnter 0.9s cubic-bezier(0.2, 0.9, 0.3, 1.2) both;
      }
      @keyframes npEnter {
        from {
          opacity: 0;
          transform: translateY(20px) scale(0.98);
        }
        to {
          opacity: 1;
          transform: none;
        }
      }

      /* Edge glow — emerald → lime subtle sheen */
      .np::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        padding: 1px;
        pointer-events: none;
        background: linear-gradient(
          165deg,
          rgba(31, 122, 77, 0.32) 0%,
          rgba(217, 212, 194, 0.1) 45%,
          rgba(199, 234, 75, 0.2) 100%
        );
        -webkit-mask:
          linear-gradient(#000 0 0) content-box,
          linear-gradient(#000 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
        z-index: 1;
      }
      /* Subtle noise */
      .np::after {
        content: "";
        position: absolute;
        inset: 0;
        opacity: 0.04;
        pointer-events: none;
        mix-blend-mode: multiply;
        background-image: url("spoko-do-wyslania-assets/noise-alt.svg");
        z-index: 1;
      }

      /* Top meta bar */
      .np-top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        padding: 13px 16px 13px 14px;
        border-bottom: 1px solid rgba(217, 212, 194, 0.4);
        position: relative;
        z-index: 2;
      }
      .np-tag {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 5px 10px 5px 8px;
        background: var(--ink);
        color: var(--bg);
        border-radius: 999px;
        font-family: var(--mono);
        font-size: 10px;
        font-weight: 500;
        letter-spacing: 0.1em;
        text-transform: uppercase;
      }
      .np-tag-dot {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--accent);
        box-shadow: 0 0 8px var(--accent);
        animation: pulse 2s infinite;
      }
      .np-time {
        font-family: var(--mono);
        font-size: 11px;
        letter-spacing: 0.12em;
        color: var(--ink);
        font-weight: 500;
        font-variant-numeric: tabular-nums;
      }
      .np-kbd {
        padding: 3px 8px;
        background: var(--bg);
        border: 1px solid var(--border);
        border-radius: 5px;
        font-family: var(--mono);
        font-size: 10px;
        color: var(--ink-3);
        letter-spacing: 0.05em;
        font-weight: 500;
      }

      /* Search area */
      .np-search {
        display: grid;
        grid-template-columns: 18px 1fr auto;
        gap: 12px;
        align-items: center;
        padding: 15px 18px;
        border-bottom: 1px solid rgba(217, 212, 194, 0.4);
        position: relative;
        z-index: 2;
        transition: background 0.3s;
      }
      .np-search-ico {
        width: 18px;
        height: 18px;
        color: var(--muted);
        transition: color 0.3s;
        flex-shrink: 0;
      }
      .np-search-ico svg {
        width: 100%;
        height: 100%;
        display: block;
        stroke-width: 2;
        stroke: currentColor;
        fill: none;
        stroke-linecap: round;
        stroke-linejoin: round;
      }
      .np-search-input {
        width: 100%;
        border: none;
        outline: none;
        background: transparent;
        font-family: inherit;
        font-size: 14px;
        color: var(--ink);
        padding: 2px 0;
        letter-spacing: -0.005em;
      }
      .np-search-input::placeholder {
        color: var(--muted);
        opacity: 0.8;
      }
      .np-search:focus-within {
        background: rgba(199, 234, 75, 0.04);
      }
      .np-search:focus-within .np-search-ico {
        color: var(--brand);
      }
      .np-search:focus-within::after {
        content: "";
        position: absolute;
        left: 14px;
        right: 14px;
        bottom: -1px;
        height: 2px;
        background: linear-gradient(
          90deg,
          transparent,
          var(--brand),
          transparent
        );
        transform-origin: center;
        animation: npSearchBar 0.5s cubic-bezier(0.3, 0, 0.3, 1);
      }
      @keyframes npSearchBar {
        from {
          transform: scaleX(0);
        }
        to {
          transform: scaleX(1);
        }
      }
      .np-search-kbd {
        padding: 3px 8px;
        background: var(--bg);
        border: 1px solid var(--border);
        border-radius: 5px;
        font-family: var(--mono);
        font-size: 10px;
        color: var(--muted);
        transition: opacity 0.25s;
        font-weight: 500;
      }
      .np-search-input:focus ~ .np-search-kbd {
        opacity: 0;
      }

      /* Greeting */
      .np-greet {
        padding: 18px 22px 12px;
        position: relative;
        z-index: 2;
      }
      .np-greet-label {
        display: block;
        font-family: var(--mono);
        font-size: 10px;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--brand);
        margin-bottom: 10px;
        font-weight: 500;
      }
      .np-greet h3 {
        font-family: var(--display);
        font-size: clamp(20px, 1.9vw, 24px);
        font-weight: 500;
        letter-spacing: -0.025em;
        line-height: 1.05;
        color: var(--ink);
        margin: 0;
        text-wrap: balance;
      }
      .np-greet h3 .italic {
        color: var(--brand);
        font-weight: 600;
      }

      /* Options list */
      .np-opts {
        display: flex;
        flex-direction: column;
        padding: 4px 10px 10px;
        gap: 2px;
        position: relative;
        z-index: 2;
      }
      .np-opt {
        display: grid;
        grid-template-columns: 28px minmax(0, 1fr) 28px;
        gap: 14px;
        align-items: center;
        padding: 11px 12px;
        background: transparent;
        border: 1px solid transparent;
        border-radius: 13px;
        cursor: pointer;
        font-family: inherit;
        text-align: left;
        transition:
          background 0.3s cubic-bezier(0.3, 0, 0.3, 1),
          border-color 0.3s,
          transform 0.6s cubic-bezier(0.3, 1.4, 0.6, 1);
        position: relative;
        will-change: transform;
      }
      .np-opt:hover,
      .np-opt.kbd-active,
      .np-opt.auto-active {
        background: rgba(199, 234, 75, 0.08);
        border-color: rgba(31, 122, 77, 0.18);
      }
      .np-opt.auto-active {
        background: rgba(199, 234, 75, 0.05);
      }
      .np-opt.kbd-active {
        animation: npKbdFlash 0.35s cubic-bezier(0.3, 1.4, 0.6, 1);
      }
      @keyframes npKbdFlash {
        0% {
          background: rgba(199, 234, 75, 0.3);
        }
        100% {
          background: rgba(199, 234, 75, 0.08);
        }
      }
      .np-opt.filtered-out {
        display: none;
      }
      .np-opt-key {
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .np-opt-key kbd {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 24px;
        height: 24px;
        background: var(--bg);
        border: 1px solid var(--border);
        border-radius: 6px;
        font-family: var(--mono);
        font-size: 11px;
        font-weight: 500;
        color: var(--muted);
        transition: all 0.3s;
        line-height: 1;
      }
      .np-opt:hover .np-opt-key kbd,
      .np-opt.auto-active .np-opt-key kbd,
      .np-opt.kbd-active .np-opt-key kbd {
        background: var(--ink);
        color: var(--accent);
        border-color: var(--ink);
        transform: scale(1.05);
      }
      .np-opt-body {
        display: flex;
        flex-direction: column;
        gap: 3px;
        min-width: 0;
      }
      .np-opt-title {
        font-size: 14.5px;
        font-weight: 500;
        line-height: 1.2;
        color: var(--ink);
        letter-spacing: -0.005em;
      }
      .np-opt-title .italic {
        color: var(--brand);
        font-weight: 600;
      }
      .np-opt-meta {
        font-family: var(--mono);
        font-size: 10px;
        color: var(--muted);
        letter-spacing: 0.04em;
        line-height: 1.3;
      }
      .np-opt-arrow {
        width: 24px;
        height: 24px;
        border-radius: 50%;
        border: 1px solid var(--border);
        background: transparent;
        color: var(--ink);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 11px;
        transition: all 0.4s cubic-bezier(0.3, 1.4, 0.6, 1);
        justify-self: end;
        opacity: 0.55;
      }
      .np-opt:hover .np-opt-arrow,
      .np-opt.auto-active .np-opt-arrow {
        background: var(--brand);
        color: var(--bg);
        border-color: var(--brand);
        opacity: 1;
        transform: translateX(3px) rotate(-45deg);
      }

      /* Smart pick badge */
      .np-opt-smart {
        position: absolute;
        right: 42px;
        top: 50%;
        transform: translateY(-50%);
        font-family: var(--mono);
        font-size: 8.5px;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--brand);
        padding: 2px 7px;
        background: var(--brand-soft);
        border: 1px solid rgba(31, 122, 77, 0.2);
        border-radius: 999px;
        font-weight: 600;
        opacity: 0;
        transition:
          opacity 0.3s,
          transform 0.3s;
      }
      .np-opt[data-smart] .np-opt-smart {
        opacity: 1;
      }
      .np-opt:hover .np-opt-smart {
        opacity: 0;
      }

      /* Empty search state */
      .np-empty {
        display: none;
        padding: 28px 22px 20px;
        text-align: center;
        position: relative;
        z-index: 2;
      }
      .np-opts.no-matches {
        padding-top: 8px;
      }
      .np-opts.no-matches .np-empty {
        display: block;
      }
      .np-empty-title {
        font-family: var(--display);
        font-size: 16px;
        font-weight: 500;
        color: var(--ink);
        margin: 0 0 8px;
        letter-spacing: -0.02em;
      }
      .np-empty-desc {
        font-size: 13px;
        color: var(--muted);
        line-height: 1.5;
        margin: 0 0 16px;
        max-width: 28ch;
        margin-left: auto;
        margin-right: auto;
      }
      .np-empty-btn {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 9px 14px 9px 16px;
        background: var(--ink);
        color: var(--bg);
        border: none;
        border-radius: 999px;
        font-family: inherit;
        font-size: 12.5px;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.25s;
      }
      .np-empty-btn:hover {
        background: var(--brand);
        transform: translateY(-1px);
      }
      .np-empty-btn-arr {
        width: 18px;
        height: 18px;
        border-radius: 50%;
        background: var(--accent);
        color: var(--ink);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 10px;
        font-weight: 600;
        transition: transform 0.35s;
      }
      .np-empty-btn:hover .np-empty-btn-arr {
        transform: rotate(-45deg);
      }

      /* Footer */
      .np-foot {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 12px 18px;
        border-top: 1px solid rgba(217, 212, 194, 0.4);
        font-family: var(--mono);
        font-size: 10px;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--muted);
        position: relative;
        z-index: 2;
      }
      .np-foot-status {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        color: var(--ink-2);
      }
      .np-status-dot {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: var(--success);
        box-shadow: 0 0 8px var(--success);
        animation: pulse 2s infinite;
      }
      .np-foot-id {
        color: var(--ink-3);
        display: inline-flex;
        align-items: center;
        gap: 8px;
      }
      .np-foot-id::before {
        content: "";
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: var(--brand);
        opacity: 0.5;
      }

      /* Answer state — shown after pick */
      .np.has-answer .np-search,
      .np.has-answer .np-greet,
      .np.has-answer .np-opts,
      .np.has-answer .np-foot {
        display: none;
      }
      .np-answer {
        display: none;
        position: relative;
        z-index: 2;
      }
      .np.has-answer .np-answer {
        display: block;
        animation: npAnswerIn 0.5s cubic-bezier(0.3, 1.2, 0.6, 1);
      }
      @keyframes npAnswerIn {
        from {
          opacity: 0;
          transform: translateY(12px);
        }
        to {
          opacity: 1;
          transform: none;
        }
      }

      .np-answer-head {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 13px 16px;
        border-bottom: 1px solid rgba(217, 212, 194, 0.4);
        font-family: var(--mono);
        font-size: 10.5px;
        color: var(--muted);
        letter-spacing: 0.1em;
        text-transform: uppercase;
      }
      .np-answer-back {
        background: transparent;
        border: 1px solid var(--border);
        color: var(--ink);
        cursor: pointer;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-family: inherit;
        font-size: 14px;
        transition: all 0.3s;
        flex-shrink: 0;
      }
      .np-answer-back:hover {
        background: var(--ink);
        color: var(--bg);
        border-color: var(--ink);
      }
      .np-answer-head-title {
        flex: 1;
        color: var(--ink);
        font-weight: 500;
      }
      .np-answer-head-num {
        color: var(--brand);
      }

      .np-answer-body {
        padding: 22px 22px 20px;
      }
      .np-answer-title {
        font-family: var(--display);
        font-size: clamp(22px, 2.2vw, 28px);
        font-weight: 500;
        letter-spacing: -0.025em;
        line-height: 1.02;
        color: var(--ink);
        margin: 0 0 14px;
        text-wrap: balance;
      }
      .np-answer-title .italic {
        color: var(--brand);
        font-weight: 600;
      }
      .np-answer-desc {
        font-size: 14px;
        line-height: 1.55;
        color: var(--ink-3);
        margin: 0 0 18px;
        text-wrap: pretty;
      }
      .np-answer-desc strong {
        color: var(--brand);
        font-weight: 500;
      }

      .np-answer-kpi {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 16px;
        align-items: center;
        padding: 14px 16px;
        background: var(--bg);
        border: 1px solid var(--border);
        border-radius: 14px;
        margin-bottom: 18px;
      }
      .np-kpi-v {
        font-family: var(--display);
        font-size: 28px;
        font-weight: 500;
        letter-spacing: -0.035em;
        line-height: 0.9;
        color: var(--brand);
        font-variant-numeric: tabular-nums;
      }
      .np-kpi-v .up {
        font-family: var(--mono);
        font-size: 10px;
        color: var(--success);
        margin-left: 6px;
        vertical-align: super;
        letter-spacing: 0.04em;
        font-weight: 500;
      }
      .np-kpi-l {
        font-family: var(--mono);
        font-size: 10px;
        color: var(--muted);
        letter-spacing: 0.08em;
        text-transform: uppercase;
        margin-top: 4px;
        line-height: 1.3;
      }
      .np-kpi-chart {
        width: 92px;
      }
      .np-kpi-chart svg {
        width: 100%;
        height: 44px;
        display: block;
      }
      .np-kpi-chart svg path.line {
        fill: none;
        stroke: var(--brand);
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
        stroke-dasharray: 300;
        stroke-dashoffset: 300;
        animation: npKpiDraw 1.4s cubic-bezier(0.3, 0, 0.2, 1) 0.1s forwards;
      }
      @keyframes npKpiDraw {
        to {
          stroke-dashoffset: 0;
        }
      }
      .np-kpi-chart svg path.area {
        fill: url(#npGrad);
        opacity: 0;
        animation: fadeArea 1.2s ease 0.3s forwards;
      }

      .np-answer-cta {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
      }
      .np-answer-cta .pri,
      .np-answer-cta .sec {
        font-family: inherit;
        font-size: 13px;
        font-weight: 500;
        cursor: pointer;
        padding: 10px 14px 10px 16px;
        border-radius: 999px;
        border: 1px solid transparent;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        transition: all 0.3s;
      }
      .np-answer-cta .pri {
        background: var(--ink);
        color: var(--bg);
      }
      .np-answer-cta .pri .np-cta-arr {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background: var(--accent);
        color: var(--ink);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 10px;
        transition: transform 0.35s cubic-bezier(0.3, 1.4, 0.6, 1);
      }
      .np-answer-cta .pri:hover {
        background: var(--brand);
        transform: translateY(-1px);
      }
      .np-answer-cta .pri:hover .np-cta-arr {
        transform: rotate(-45deg);
      }
      .np-answer-cta .sec {
        background: transparent;
        color: var(--ink);
        border-color: var(--border-2);
      }
      .np-answer-cta .sec:hover {
        border-color: var(--ink);
        background: rgba(199, 234, 75, 0.06);
      }

      /* ============================================================
   HERO NAVIGATOR — .ed-nav-* (panel po prawej hero)
============================================================ */
      .ed-hero-aside {
        align-self: start;
        max-width: 480px;
        width: 100%;
        justify-self: end;
      }
      @media (max-width: 1100px) {
        .ed-hero-aside {
          justify-self: stretch;
          max-width: none;
        }
      }

      .ed-nav-panel {
        position: relative;
        font-family: inherit;
        isolation: isolate;
        min-height: 560px;
        background: linear-gradient(
          180deg,
          rgba(251, 249, 242, 0.98) 0%,
          rgba(246, 243, 234, 0.96) 100%
        );
        border: 1px solid rgba(217, 212, 194, 0.75);
        border-radius: 22px;
        overflow: hidden;
        backdrop-filter: blur(18px) saturate(1.3);
        -webkit-backdrop-filter: blur(18px) saturate(1.3);
        box-shadow:
          0 1px 0 rgba(255, 255, 255, 0.8) inset,
          0 24px 44px -20px rgba(26, 71, 50, 0.16),
          0 10px 22px -12px rgba(13, 26, 19, 0.08);
      }
      @media (max-width: 560px) {
        .ed-nav-panel {
          min-height: auto;
        }
      }
      .ed-nav-panel::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        padding: 1px;
        pointer-events: none;
        background: linear-gradient(
          160deg,
          rgba(31, 122, 77, 0.28) 0%,
          rgba(217, 212, 194, 0.08) 50%,
          rgba(92, 163, 128, 0.22) 100%
        );
        -webkit-mask:
          linear-gradient(#000 0 0) content-box,
          linear-gradient(#000 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
        z-index: 1;
      }

      /* Head */
      .ed-nav-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        padding: 13px 16px;
        border-bottom: 1px solid rgba(217, 212, 194, 0.45);
        position: relative;
        z-index: 2;
        font-family: var(--mono);
        font-size: 11px;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: var(--muted);
        font-weight: 500;
      }
      .ed-nav-head strong {
        color: var(--ink);
        font-weight: 600;
      }
      .ed-nav-status {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        color: var(--brand);
      }
      .ed-nav-status-dot {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: var(--brand);
        box-shadow: 0 0 8px var(--brand-glow);
        animation: pulse 2s infinite;
      }

      /* Prompt */
      .ed-nav-prompt {
        padding: 18px 20px 14px;
        position: relative;
        z-index: 2;
        display: flex;
        flex-direction: column;
        gap: 12px;
      }
      .ed-nav-prompt-label {
        font-family: var(--mono);
        font-size: 10px;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--brand);
        font-weight: 500;
      }
      .ed-nav-prompt h3 {
        font-family: var(--display);
        font-size: clamp(20px, 1.9vw, 24px);
        font-weight: 500;
        letter-spacing: -0.025em;
        line-height: 1.1;
        color: var(--ink);
        margin: 0;
        text-wrap: balance;
      }
      .ed-nav-prompt h3 .ital {
        color: var(--brand);
        font-weight: 600;
      }
      .ed-nav-feed {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 9px 12px;
        background: var(--bg);
        border: 1px solid var(--border);
        border-radius: 10px;
        font-family: var(--mono);
        font-size: 11px;
        color: var(--ink-3);
        letter-spacing: 0.02em;
        line-height: 1.4;
        overflow: hidden;
      }
      .ed-nav-feed-tag {
        flex-shrink: 0;
        padding: 2px 8px;
        background: var(--brand);
        color: var(--bg);
        border-radius: 999px;
        font-size: 9px;
        font-weight: 600;
        letter-spacing: 0.1em;
        text-transform: uppercase;
      }
      .ed-nav-feed-text {
        flex: 1;
        min-width: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        transition: opacity 0.3s;
      }
      .ed-nav-feed-text strong {
        color: var(--brand);
        font-weight: 600;
      }

      /* List */
      .ed-nav-list {
        display: flex;
        flex-direction: column;
        gap: 2px;
        padding: 4px 10px 10px;
        position: relative;
        z-index: 2;
      }
      .ed-nav-opt {
        display: grid;
        grid-template-columns: 30px minmax(0, 1fr) 30px;
        gap: 14px;
        align-items: center;
        padding: 11px 12px;
        background: transparent;
        border: 1px solid transparent;
        border-radius: 12px;
        cursor: pointer;
        font-family: inherit;
        text-align: left;
        transition:
          background 0.3s,
          border-color 0.3s;
        position: relative;
        width: 100%;
      }
      .ed-nav-opt:hover,
      .ed-nav-opt.auto-current {
        background: var(--brand-soft);
        border-color: rgba(31, 122, 77, 0.18);
      }
      .ed-nav-opt.auto-current {
        background: rgba(220, 233, 224, 0.6);
      }
      .ed-nav-num {
        font-family: var(--mono);
        font-size: 11px;
        font-weight: 600;
        color: var(--muted);
        letter-spacing: 0.06em;
        text-align: center;
        transition: color 0.3s;
      }
      .ed-nav-opt:hover .ed-nav-num,
      .ed-nav-opt.auto-current .ed-nav-num {
        color: var(--brand);
      }
      .ed-nav-lbl {
        display: flex;
        flex-direction: column;
        gap: 3px;
        min-width: 0;
      }
      .ed-nav-lbl-main {
        font-size: 14.5px;
        font-weight: 500;
        line-height: 1.2;
        color: var(--ink);
        letter-spacing: -0.005em;
      }
      .ed-nav-lbl-main .ital {
        color: var(--brand);
        font-weight: 600;
      }
      .ed-nav-lbl-sub {
        font-family: var(--mono);
        font-size: 10px;
        color: var(--muted);
        letter-spacing: 0.03em;
        line-height: 1.3;
      }
      .ed-nav-arrow {
        width: 26px;
        height: 26px;
        border-radius: 50%;
        border: 1px solid var(--border);
        background: transparent;
        color: var(--ink-2);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        transition: all 0.35s cubic-bezier(0.3, 1.4, 0.6, 1);
        justify-self: end;
        opacity: 0.6;
      }
      .ed-nav-opt:hover .ed-nav-arrow,
      .ed-nav-opt.auto-current .ed-nav-arrow {
        background: var(--brand);
        color: var(--bg);
        border-color: var(--brand);
        opacity: 1;
        transform: translateX(2px);
      }

      /* Foot */
      .ed-nav-foot {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 12px 18px;
        border-top: 1px solid rgba(217, 212, 194, 0.45);
        font-family: var(--mono);
        font-size: 10px;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--muted);
        position: relative;
        z-index: 2;
      }
      .ed-nav-foot-name {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        color: var(--ink-2);
        font-weight: 500;
      }
      .ed-nav-foot-avatar {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 22px;
        height: 22px;
        border-radius: 50%;
        background: var(--brand);
        color: var(--bg);
        font-family: var(--display);
        font-size: 12px;
        font-weight: 500;
        letter-spacing: 0;
        text-transform: none;
      }

      /* Answer state — shown after pick. Position absolute żeby nie zmieniać wysokości panelu */
      .ed-nav-answer {
        display: none;
        position: absolute;
        inset: 0;
        z-index: 3;
        background: inherit;
        border-radius: inherit;
        overflow: auto;
      }
      .ed-nav-panel.has-answer .ed-nav-prompt,
      .ed-nav-panel.has-answer .ed-nav-list,
      .ed-nav-panel.has-answer .ed-nav-foot {
        visibility: hidden;
        pointer-events: none;
      }
      .ed-nav-panel.has-answer .ed-nav-answer {
        display: block;
        animation: edNavAnswerIn 0.5s cubic-bezier(0.3, 1.2, 0.6, 1);
      }
      @keyframes edNavAnswerIn {
        from {
          opacity: 0;
          transform: translateY(10px);
        }
        to {
          opacity: 1;
          transform: none;
        }
      }
      .ed-nav-answer-head {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 13px 16px;
        border-bottom: 1px solid rgba(217, 212, 194, 0.45);
        font-family: var(--mono);
        font-size: 10.5px;
        color: var(--muted);
        letter-spacing: 0.1em;
        text-transform: uppercase;
      }
      .ed-nav-back {
        background: transparent;
        border: 1px solid var(--border);
        color: var(--ink);
        cursor: pointer;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-family: inherit;
        font-size: 14px;
        transition: all 0.3s;
        flex-shrink: 0;
      }
      .ed-nav-back:hover {
        background: var(--brand);
        color: var(--bg);
        border-color: var(--brand);
      }
      .ed-nav-answer-head-title {
        flex: 1;
        color: var(--ink);
        font-weight: 500;
      }
      .ed-nav-answer-head-num {
        color: var(--brand);
      }
      .ed-nav-answer-body-wrap {
        padding: 20px 22px 22px;
      }
      .ed-nav-answer-title {
        font-family: var(--display);
        font-size: clamp(22px, 2.2vw, 28px);
        font-weight: 500;
        letter-spacing: -0.025em;
        line-height: 1.05;
        color: var(--ink);
        margin: 0 0 14px;
        text-wrap: balance;
      }
      .ed-nav-answer-title .ital {
        color: var(--brand);
        font-weight: 600;
      }
      .ed-nav-answer-desc {
        font-size: 14px;
        line-height: 1.55;
        color: var(--ink-3);
        margin: 0 0 18px;
        text-wrap: pretty;
      }
      .ed-nav-answer-desc strong {
        color: var(--brand);
        font-weight: 500;
      }
      .ed-nav-answer-kpi {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 14px;
        align-items: center;
        padding: 14px 16px;
        background: var(--bg);
        border: 1px solid var(--border);
        border-radius: 12px;
        margin-bottom: 18px;
      }
      .ed-nav-kpi-v {
        font-family: var(--display);
        font-size: 26px;
        font-weight: 500;
        letter-spacing: -0.035em;
        line-height: 0.9;
        color: var(--brand);
        font-variant-numeric: tabular-nums;
      }
      .ed-nav-kpi-v .up {
        font-family: var(--mono);
        font-size: 10px;
        color: var(--success);
        margin-left: 6px;
        vertical-align: super;
        letter-spacing: 0.04em;
        font-weight: 500;
      }
      .ed-nav-kpi-l {
        font-family: var(--mono);
        font-size: 10px;
        color: var(--muted);
        letter-spacing: 0.08em;
        text-transform: uppercase;
        margin-top: 4px;
        line-height: 1.3;
      }
      .ed-nav-kpi-chart {
        width: 92px;
      }
      .ed-nav-kpi-chart svg {
        width: 100%;
        height: 44px;
        display: block;
      }
      .ed-nav-kpi-chart svg path.line {
        fill: none;
        stroke: var(--brand);
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
        stroke-dasharray: 300;
        stroke-dashoffset: 300;
        animation: edNavKpiDraw 1.4s cubic-bezier(0.3, 0, 0.2, 1) 0.1s forwards;
      }
      @keyframes edNavKpiDraw {
        to {
          stroke-dashoffset: 0;
        }
      }
      .ed-nav-kpi-chart svg path.area {
        fill: url(#navGrad);
        opacity: 0;
        animation: fadeArea 1.2s ease 0.3s forwards;
      }
      @keyframes fadeArea {
        to {
          opacity: 1;
        }
      }
      .ed-nav-answer-cta {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
      }
      .ed-nav-answer-cta .pri,
      .ed-nav-answer-cta .sec {
        font-family: inherit;
        font-size: 13px;
        font-weight: 500;
        cursor: pointer;
        padding: 10px 14px 10px 16px;
        border-radius: 999px;
        border: 1px solid transparent;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        transition: all 0.3s;
      }
      .ed-nav-answer-cta .pri {
        background: var(--brand);
        color: var(--bg);
      }
      .ed-nav-cta-arrow {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background: var(--bg);
        color: var(--brand);
        font-size: 11px;
        font-weight: 600;
      }
      .ed-nav-answer-cta .pri:hover {
        background: var(--brand-hover);
      }
      .ed-nav-answer-cta .sec {
        background: transparent;
        color: var(--ink-2);
        border-color: var(--border);
      }
      .ed-nav-answer-cta .sec:hover {
        border-color: var(--brand);
        color: var(--brand);
      }

      /* ============================================================
   STATS BAND — full width 4 columns
============================================================ */
      .ed-stats {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        border-top: 1px solid var(--border);
        border-bottom: 1px solid var(--border);
        margin: 0 calc(-1 * var(--px));
      }
      .ed-stat {
        padding: 40px clamp(18px, 2.2vw, 36px);
        display: flex;
        flex-direction: column;
        gap: 8px;
        border-left: 1px solid var(--border);
        position: relative;
        overflow: hidden;
        transition: background 0.4s;
      }
      .ed-stat:first-child {
        border-left: none;
      }
      .ed-stat:hover {
        background: var(--surface-2);
      }
      .ed-stat:hover .ed-stat-big {
        color: var(--brand);
      }
      .ed-stat-big {
        font-family: var(--display);
        font-size: clamp(44px, 5.2vw, 72px);
        font-weight: 500;
        letter-spacing: -0.045em;
        line-height: 0.92;
        color: var(--ink);
        transition: color 0.4s;
        font-variant-numeric: tabular-nums;
        font-feature-settings: "tnum";
      }
      .ed-stat-big .unit {
        font-family: var(--serif);
        font-style: italic;
        font-weight: 400;
        color: var(--brand);
        font-size: 0.5em;
        vertical-align: super;
        margin-left: -4px;
        letter-spacing: -0.01em;
      }
      .ed-stat-name {
        font-family: var(--mono);
        font-size: 11px;
        color: var(--muted);
        letter-spacing: 0.08em;
        text-transform: uppercase;
        margin-top: 10px;
        line-height: 1.4;
        max-width: 24ch;
      }

      /* ============================================================
   MARQUEE — big display scrolling text
============================================================ */
      .ed-marquee {
        overflow: hidden;
        border-top: 1px solid var(--dark);
        border-bottom: 1px solid var(--dark);
        padding: 10px 0;
        background: var(--dark);
        color: var(--bg);
        position: relative;
      }
      .ed-marquee-light {
        background: var(--bg);
        color: var(--ink);
        border-color: var(--border);
      }
      .ed-marquee-track {
        display: flex;
        gap: 28px;
        animation: edScroll var(--ed-marquee-duration, 48s) linear infinite;
        white-space: nowrap;
        align-items: center;
        width: max-content;
      }
      .ed-marquee-sequence {
        display: flex;
        flex: none;
        gap: inherit;
        align-items: center;
        width: max-content;
      }
      /* Nie pauzujemy na hover — user oczekuje ciągłego ruchu */
      .ed-marquee-track span {
        font-family: var(--display);
        font-size: clamp(12px, 1.1vw, 15px);
        font-weight: 500;
        letter-spacing: -0.015em;
        display: inline-flex;
        align-items: center;
        gap: 20px;
        color: inherit;
        line-height: 1;
      }
      .ed-marquee-track span.ital {
        color: var(--panel-hi);
        font-weight: 600;
      }
      .ed-marquee-light .ed-marquee-track span.ital {
        color: var(--brand);
      }
      .ed-marquee-track span::after {
        content: "✦";
        color: var(--panel-hi);
        font-family: var(--sans);
        font-size: 0.45em;
        vertical-align: middle;
        margin-left: 8px;
      }
      .ed-marquee-light .ed-marquee-track span::after {
        color: var(--brand);
      }
      @keyframes edScroll {
        from {
          transform: translateX(0);
        }
        to {
          transform: translateX(var(--ed-marquee-distance, -50%));
        }
      }

      /* ============================================================
   SERVICES — horizontal scroll with tall cards
============================================================ */
      .ed-svc-wrap {
        margin-top: 8px;
      }
      .ed-svc-scroll {
        position: relative;
      }
      .ed-svc-track {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 16px;
      }
      @media (max-width: 980px) {
        .ed-svc-track {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }
      }
      @media (max-width: 560px) {
        .ed-svc-track {
          grid-template-columns: 1fr;
        }
      }
      .ed-svc-card {
        padding: 28px;
        border-radius: 20px;
        background: var(--surface);
        border: 1px solid var(--border);
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        position: relative;
        overflow: hidden;
        min-height: 380px;
        cursor: pointer;
      }
      .ed-svc-card::after {
        content: "";
        position: absolute;
        left: -1px;
        top: 28px;
        width: 0;
        height: 40px;
        background: var(--brand);
        border-radius: 0 3px 3px 0;
        transition: width 0.35s cubic-bezier(0.2, 0.8, 0.3, 1);
        pointer-events: none;
        z-index: 2;
      }
      .ed-svc-card:hover::after {
        width: 3px;
      }

      /* Auto-animation visual — now lives inline next to title, no absolute */
      .ed-svc-title-row {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 16px;
        margin-bottom: 4px;
      }
      .ed-svc-title-row h3 {
        flex: 1;
        min-width: 0;
        margin: 0;
      }
      .ed-svc-visual {
        flex-shrink: 0;
        width: 64px;
        height: 48px;
        pointer-events: none;
        opacity: 0.8;
        position: relative;
        transition: opacity 0.3s;
      }
      .ed-svc-visual svg {
        width: 100%;
        height: 100%;
        display: block;
        overflow: visible;
      }
      .ed-svc-visual .pri {
        stroke: var(--brand);
        fill: none;
      }
      .ed-svc-vis-icon {
        fill: none;
        stroke: var(--brand);
        stroke-width: 1.7;
        stroke-linecap: round;
        stroke-linejoin: round;
      }
      .ed-svc-card:hover .ed-svc-visual {
        opacity: 1;
      }

      /* 1 · bar chart auto-growing */
      .ed-svc-vis-bars rect {
        fill: var(--brand);
        opacity: 0.85;
        transform-origin: bottom;
        animation: edBarsPulse 2.8s cubic-bezier(0.4, 0.1, 0.3, 1) infinite;
      }
      .ed-svc-vis-bars rect:nth-child(1) {
        animation-delay: 0s;
      }
      .ed-svc-vis-bars rect:nth-child(2) {
        animation-delay: 0.2s;
      }
      .ed-svc-vis-bars rect:nth-child(3) {
        animation-delay: 0.4s;
      }
      .ed-svc-vis-bars rect:nth-child(4) {
        animation-delay: 0.6s;
      }
      .ed-svc-vis-bars rect:nth-child(5) {
        animation-delay: 0.8s;
      }
      @keyframes edBarsPulse {
        0%,
        100% {
          transform: scaleY(0.4);
          opacity: 0.55;
        }
        50% {
          transform: scaleY(1);
          opacity: 0.95;
        }
      }

      /* 2 · AI network — pulsing dots + connecting lines */
      .ed-svc-vis-ai circle {
        fill: var(--brand);
        animation: edAiPulse 2.6s cubic-bezier(0.4, 0.1, 0.3, 1) infinite;
      }
      .ed-svc-vis-ai circle:nth-of-type(1) {
        animation-delay: 0s;
      }
      .ed-svc-vis-ai circle:nth-of-type(2) {
        animation-delay: 0.4s;
      }
      .ed-svc-vis-ai circle:nth-of-type(3) {
        animation-delay: 0.8s;
      }
      .ed-svc-vis-ai circle:nth-of-type(4) {
        animation-delay: 1.2s;
      }
      .ed-svc-vis-ai line {
        stroke: var(--brand);
        stroke-width: 1;
        opacity: 0.35;
        stroke-dasharray: 3 3;
      }
      @keyframes edAiPulse {
        0%,
        100% {
          opacity: 0.35;
          r: 2.5;
        }
        50% {
          opacity: 1;
          r: 4;
        }
      }

      /* 3 · Mentoring — rising dots forming trend */
      .ed-svc-vis-trend circle {
        fill: var(--brand);
        animation: edTrendUp 3s cubic-bezier(0.4, 0.1, 0.3, 1) infinite;
      }
      .ed-svc-vis-trend circle:nth-of-type(1) {
        animation-delay: 0s;
      }
      .ed-svc-vis-trend circle:nth-of-type(2) {
        animation-delay: 0.15s;
      }
      .ed-svc-vis-trend circle:nth-of-type(3) {
        animation-delay: 0.3s;
      }
      .ed-svc-vis-trend circle:nth-of-type(4) {
        animation-delay: 0.45s;
      }
      .ed-svc-vis-trend circle:nth-of-type(5) {
        animation-delay: 0.6s;
      }
      .ed-svc-vis-trend path {
        fill: none;
        stroke: var(--brand);
        stroke-width: 1.5;
        stroke-linecap: round;
        stroke-dasharray: 80;
        stroke-dashoffset: 80;
        animation: edTrendDraw 3s cubic-bezier(0.4, 0.1, 0.3, 1) infinite;
      }
      @keyframes edTrendUp {
        0%,
        70% {
          opacity: 0;
          transform: translateY(4px);
        }
        40%,
        60% {
          opacity: 1;
          transform: translateY(0);
        }
        100% {
          opacity: 0;
        }
      }
      @keyframes edTrendDraw {
        0%,
        25% {
          stroke-dashoffset: 80;
        }
        60%,
        70% {
          stroke-dashoffset: 0;
        }
        100% {
          stroke-dashoffset: 80;
        }
      }

      /* 4 · Audit — rotating radar */
      .ed-svc-vis-radar {
        animation: edRadarSpin 6s linear infinite;
        transform-origin: center;
      }
      .ed-svc-vis-radar circle.ring {
        fill: none;
        stroke: var(--brand);
        stroke-width: 1;
        opacity: 0.25;
      }
      .ed-svc-vis-radar line {
        stroke: var(--brand);
        stroke-width: 1.5;
        stroke-linecap: round;
      }
      .ed-svc-vis-radar circle.blip {
        fill: var(--brand);
        animation: edBlipPulse 2s ease-in-out infinite;
      }
      @keyframes edRadarSpin {
        from {
          transform: rotate(0);
        }
        to {
          transform: rotate(360deg);
        }
      }
      @keyframes edBlipPulse {
        0%,
        100% {
          opacity: 0;
        }
        50% {
          opacity: 1;
        }
      }

      .ed-svc-card.accent {
        background: var(--brand);
        color: var(--bg);
        border-color: var(--brand);
      }
      .ed-svc-card.accent .ed-svc-visual .pri,
      .ed-svc-card.accent .ed-svc-vis-bars rect,
      .ed-svc-card.accent .ed-svc-vis-ai circle,
      .ed-svc-card.accent .ed-svc-vis-ai line,
      .ed-svc-card.accent .ed-svc-vis-trend circle,
      .ed-svc-card.accent .ed-svc-vis-trend path,
      .ed-svc-card.accent .ed-svc-vis-radar circle.ring,
      .ed-svc-card.accent .ed-svc-vis-radar line,
      .ed-svc-card.accent .ed-svc-vis-radar circle.blip {
        stroke: var(--panel-hi);
        fill: var(--panel-hi);
      }
      .ed-svc-card.accent .ed-svc-vis-icon {
        stroke: var(--panel-hi);
        fill: none;
      }
      .ed-svc-card.accent .ed-svc-vis-ai line {
        fill: none;
      }
      .ed-svc-card.accent .ed-svc-vis-radar circle.ring {
        fill: none;
      }
      .ed-svc-card.accent .ed-svc-vis-trend path {
        fill: none;
      }
      .ed-svc-card.accent h3,
      .ed-svc-card.accent .ed-svc-num-big,
      .ed-svc-card.accent .ed-svc-price {
        color: var(--bg);
      }
      .ed-svc-card.accent .ed-svc-desc {
        color: rgba(242, 239, 230, 0.82);
      }
      .ed-svc-card.accent .ed-svc-tags span {
        border-color: rgba(242, 239, 230, 0.3);
        color: var(--bg);
      }
      .ed-svc-card.accent .ed-svc-arrow {
        background: var(--panel-hi);
        color: var(--dark);
      }
      .ed-svc-card.accent h3 .ital {
        color: var(--panel-hi);
        font-weight: 600;
      }
      .ed-svc-card.accent::after {
        background: var(--panel-hi);
      }

      .ed-svc-top {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 20px;
        position: relative;
        z-index: 2;
      }
      .ed-svc-num-big {
        font-family: var(--display);
        font-size: 36px;
        font-weight: 500;
        letter-spacing: -0.04em;
        line-height: 0.9;
        color: var(--ink);
        transition: color 0.3s;
        font-variant-numeric: tabular-nums;
      }
      .ed-svc-price {
        font-family: var(--mono);
        font-size: 10px;
        font-weight: 500;
        color: var(--ink);
        letter-spacing: 0.04em;
        padding: 4px 10px;
        border: 1px solid currentColor;
        border-radius: 999px;
        align-self: flex-start;
        opacity: 0.75;
      }
      .ed-svc-mid {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 12px;
        margin-top: 24px;
        position: relative;
        z-index: 2;
      }
      .ed-svc-card h3 {
        font-family: var(--display);
        font-size: 22px;
        font-weight: 500;
        letter-spacing: -0.025em;
        line-height: 1.1;
        color: var(--ink);
        transition: color 0.3s;
        text-wrap: balance;
        word-wrap: break-word;
        hyphens: auto;
      }
      .ed-svc-card h3 .ital {
        color: var(--brand);
        font-weight: 600;
      }
      .ed-svc-card:hover h3 .ital {
        color: var(--brand);
      }
      .ed-svc-desc {
        font-size: 14px;
        line-height: 1.5;
        color: var(--ink-3);
        transition: color 0.3s;
        text-wrap: pretty;
      }
      .ed-svc-tags {
        display: flex;
        flex-wrap: wrap;
        gap: 5px;
      }
      .ed-svc-tags span {
        padding: 3px 9px;
        border-radius: 999px;
        font-size: 10px;
        font-family: var(--mono);
        letter-spacing: 0.03em;
        background: transparent;
        color: var(--ink-3);
        border: 1px solid var(--border-2);
        transition: all 0.3s;
      }
      .ed-svc-bottom {
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        position: relative;
        z-index: 2;
        margin-top: 24px;
        gap: 12px;
      }
      .ed-svc-link {
        font-family: var(--mono);
        font-size: 10px;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: inherit;
        opacity: 0.7;
        line-height: 1.3;
      }
      .ed-svc-arrow {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background: var(--ink);
        color: var(--bg);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 13px;
        transition:
          transform 0.3s ease,
          background 0.3s,
          color 0.3s;
        cursor: pointer;
        flex-shrink: 0;
      }
      .ed-svc-card.open .ed-svc-arrow {
        transform: rotate(90deg);
      }

      /* Expandable accordion inside card */
      .ed-svc-expand {
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        transition:
          max-height 0.5s cubic-bezier(0.2, 0.8, 0.3, 1),
          opacity 0.4s,
          margin-top 0.4s;
        position: relative;
        z-index: 2;
      }
      .ed-svc-card.open .ed-svc-expand {
        max-height: 320px;
        opacity: 1;
        margin-top: 16px;
      }
      .ed-svc-expand-inner {
        padding-top: 16px;
        border-top: 1px solid var(--border);
      }
      .ed-svc-card.accent .ed-svc-expand-inner {
        border-top-color: rgba(242, 239, 230, 0.2);
      }
      .ed-svc-expand-inner p {
        font-size: 13.5px;
        line-height: 1.55;
        color: var(--ink-3);
        margin: 0 0 14px;
        text-wrap: pretty;
      }
      .ed-svc-card.accent .ed-svc-expand-inner p {
        color: rgba(242, 239, 230, 0.82);
      }
      .ed-svc-expand-inner p strong {
        color: var(--brand);
        font-weight: 500;
      }
      .ed-svc-card.accent .ed-svc-expand-inner p strong {
        color: var(--panel-hi);
      }
      .ed-svc-expand-btn {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 10px 14px 10px 18px;
        background: var(--dark);
        color: var(--bg);
        border: none;
        border-radius: 999px;
        font-family: inherit;
        font-size: 12.5px;
        font-weight: 500;
        cursor: pointer;
        transition: background 0.3s;
        letter-spacing: -0.005em;
      }
      .ed-svc-expand-btn:hover {
        background: var(--brand);
      }
      .ed-svc-expand-btn .ed-svc-expand-btn-arrow {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background: var(--panel-hi);
        color: var(--dark);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 11px;
      }
      .ed-svc-card.accent .ed-svc-expand-btn {
        background: var(--panel-hi);
        color: var(--dark);
      }
      .ed-svc-card.accent .ed-svc-expand-btn .ed-svc-expand-btn-arrow {
        background: var(--dark);
        color: var(--panel-hi);
      }
      .ed-svc-card.accent .ed-svc-expand-btn:hover {
        background: var(--panel-hi-2);
      }

      /* Services scroll progress + arrow */
      .ed-svc-nav {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 20px;
        margin-top: 12px;
        padding-top: 12px;
        font-family: var(--mono);
        font-size: 11px;
        color: var(--muted);
        letter-spacing: 0.08em;
        text-transform: uppercase;
      }
      .ed-svc-hint {
        display: inline-flex;
        align-items: center;
        gap: 8px;
      }
      .ed-svc-hint-dot {
        width: 4px;
        height: 4px;
        border-radius: 50%;
        background: var(--brand);
        animation: pulse 2s infinite;
      }

      /* ============================================================
   CASE CARDS — animated expandable tiles (portfolio preview)
============================================================ */
      .ed-cs-grid {
        display: grid;
        grid-template-columns: 1.25fr 1fr;
        gap: 16px;
        margin-bottom: 20px;
        align-items: start;
      }
      .ed-cs-grid > .ed-cs-tile {
        min-height: 400px;
      }
      @media (max-width: 860px) {
        .ed-cs-grid {
          grid-template-columns: 1fr;
        }
        .ed-cs-grid > .ed-cs-tile {
          min-height: auto;
        }
      }
      .ed-cs-row {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
        align-items: start;
      }
      @media (max-width: 860px) {
        .ed-cs-row {
          grid-template-columns: 1fr;
        }
      }

      .ed-cs-tile {
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: 22px;
        padding: 28px;
        position: relative;
        overflow: hidden;
        cursor: pointer;
        min-height: 320px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
      }
      .ed-cs-tile::after {
        content: "";
        position: absolute;
        left: -1px;
        top: 28px;
        width: 0;
        height: 40px;
        background: var(--brand);
        border-radius: 0 3px 3px 0;
        transition: width 0.35s cubic-bezier(0.2, 0.8, 0.3, 1);
        pointer-events: none;
        z-index: 3;
      }
      .ed-cs-tile:hover::after {
        width: 3px;
      }
      .ed-cs-tile.feat {
        background: var(--dark);
        color: var(--bg);
        border-color: var(--dark);
        min-height: 400px;
      }
      .ed-cs-tile.feat::after {
        background: var(--panel-hi);
      }
      .ed-cs-tile.feat::before {
        content: "";
        position: absolute;
        width: 500px;
        height: 500px;
        border-radius: 50%;
        background: radial-gradient(
          circle,
          rgba(92, 163, 128, 0.22),
          transparent 65%
        );
        top: -180px;
        right: -180px;
        pointer-events: none;
      }

      /* Auto-animated signature visuals per case */
      .ed-cs-vis {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 120px;
        opacity: 0.22;
        pointer-events: none;
        transition: opacity 0.5s;
      }
      .ed-cs-tile.feat .ed-cs-vis {
        opacity: 0.32;
      }
      .ed-cs-tile:hover .ed-cs-vis,
      .ed-cs-tile.open .ed-cs-vis {
        opacity: 0.32;
      }
      .ed-cs-tile.feat:hover .ed-cs-vis,
      .ed-cs-tile.feat.open .ed-cs-vis {
        opacity: 0.45;
      }
      .ed-cs-vis svg {
        width: 100%;
        height: 100%;
        display: block;
        overflow: visible;
      }
      .ed-cs-vis .brand {
        fill: var(--brand);
      }
      .ed-cs-vis .acc {
        fill: var(--accent);
      }

      /* 1) Medical wholesale case — revenue bars */
      .ed-cs-vis-revenue rect {
        fill: var(--brand);
        transform-origin: bottom;
        animation: csBarsGrow 6s cubic-bezier(0.3, 0.05, 0.3, 1) infinite;
      }
      .ed-cs-tile.feat .ed-cs-vis-revenue rect {
        fill: var(--panel-hi);
      }
      .ed-cs-vis-revenue rect:nth-child(1) {
        animation-delay: 0s;
      }
      .ed-cs-vis-revenue rect:nth-child(2) {
        animation-delay: 0.12s;
      }
      .ed-cs-vis-revenue rect:nth-child(3) {
        animation-delay: 0.24s;
      }
      .ed-cs-vis-revenue rect:nth-child(4) {
        animation-delay: 0.36s;
      }
      .ed-cs-vis-revenue rect:nth-child(5) {
        animation-delay: 0.48s;
      }
      .ed-cs-vis-revenue rect:nth-child(6) {
        animation-delay: 0.6s;
      }
      .ed-cs-vis-revenue rect:nth-child(7) {
        animation-delay: 0.72s;
      }
      .ed-cs-vis-revenue rect:nth-child(8) {
        animation-delay: 0.84s;
      }
      .ed-cs-vis-revenue rect:nth-child(9) {
        animation-delay: 0.96s;
      }
      .ed-cs-vis-revenue rect:nth-child(10) {
        animation-delay: 1.08s;
      }
      .ed-cs-vis-revenue rect:nth-child(11) {
        animation-delay: 1.2s;
      }
      @keyframes csBarsGrow {
        0%,
        78% {
          transform: scaleY(0);
          opacity: 0;
        }
        8% {
          transform: scaleY(1);
          opacity: 0.9;
        }
        60%,
        78% {
          transform: scaleY(1);
          opacity: 0.9;
        }
        85%,
        100% {
          transform: scaleY(0);
          opacity: 0;
        }
      }

      /* 2) Shumee — product matrix (many products lighting up) */
      .ed-cs-vis-matrix circle {
        fill: var(--brand);
        opacity: 0.18;
        animation: csMatrixFlash 5s cubic-bezier(0.4, 0.1, 0.3, 1) infinite;
      }
      .ed-cs-tile.feat .ed-cs-vis-matrix circle {
        fill: var(--panel-hi);
      }
      .ed-cs-vis-matrix circle:nth-child(8n + 1) {
        animation-delay: 0s;
      }
      .ed-cs-vis-matrix circle:nth-child(8n + 2) {
        animation-delay: 0.3s;
      }
      .ed-cs-vis-matrix circle:nth-child(8n + 3) {
        animation-delay: 0.7s;
      }
      .ed-cs-vis-matrix circle:nth-child(8n + 4) {
        animation-delay: 1.1s;
      }
      .ed-cs-vis-matrix circle:nth-child(8n + 5) {
        animation-delay: 1.5s;
      }
      .ed-cs-vis-matrix circle:nth-child(8n + 6) {
        animation-delay: 2s;
      }
      .ed-cs-vis-matrix circle:nth-child(8n + 7) {
        animation-delay: 2.5s;
      }
      .ed-cs-vis-matrix circle:nth-child(8n) {
        animation-delay: 3s;
      }
      @keyframes csMatrixFlash {
        0%,
        90%,
        100% {
          opacity: 0.18;
        }
        15%,
        30% {
          opacity: 1;
        }
      }

      /* 3) Hurtownia elektrotechniczna — rozwój kanałów sprzedaży */
      .ed-cs-vis-nodes .node-core {
        fill: var(--brand);
        animation: csNodeCorePulse 3.2s cubic-bezier(0.3, 0.1, 0.3, 1) infinite;
      }
      .ed-cs-tile.feat .ed-cs-vis-nodes .node-core,
      .ed-cs-tile.feat .ed-cs-vis-nodes .sat {
        fill: var(--panel-hi);
      }
      .ed-cs-vis-nodes .sat {
        fill: var(--brand);
        animation: csSatPulse 3.2s cubic-bezier(0.3, 0.1, 0.3, 1) infinite;
      }
      .ed-cs-vis-nodes .sat:nth-child(3) {
        animation-delay: 0.2s;
      }
      .ed-cs-vis-nodes .sat:nth-child(5) {
        animation-delay: 0.5s;
      }
      .ed-cs-vis-nodes .sat:nth-child(7) {
        animation-delay: 0.8s;
      }
      .ed-cs-vis-nodes line {
        stroke: var(--brand);
        stroke-width: 1.5;
        stroke-linecap: round;
        stroke-dasharray: 80;
        stroke-dashoffset: 80;
        animation: csNodeLine 3.2s cubic-bezier(0.3, 0.1, 0.3, 1) infinite;
      }
      .ed-cs-tile.feat .ed-cs-vis-nodes line {
        stroke: var(--panel-hi);
      }
      .ed-cs-vis-nodes line:nth-child(2) {
        animation-delay: 0.2s;
      }
      .ed-cs-vis-nodes line:nth-child(4) {
        animation-delay: 0.5s;
      }
      .ed-cs-vis-nodes line:nth-child(6) {
        animation-delay: 0.8s;
      }
      @keyframes csNodeCorePulse {
        0%,
        100% {
          r: 6;
          opacity: 0.8;
        }
        50% {
          r: 8;
          opacity: 1;
        }
      }
      @keyframes csSatPulse {
        0%,
        100% {
          r: 3;
          opacity: 0.5;
        }
        50% {
          r: 4.5;
          opacity: 1;
        }
      }
      @keyframes csNodeLine {
        0%,
        15% {
          stroke-dashoffset: 80;
          opacity: 0;
        }
        45%,
        75% {
          stroke-dashoffset: 0;
          opacity: 0.8;
        }
        95%,
        100% {
          stroke-dashoffset: 0;
          opacity: 0;
        }
      }

      /* 4) Własna marka — rising particles + signal wave */
      .ed-cs-vis-wave path {
        fill: none;
        stroke: var(--brand);
        stroke-width: 2;
        stroke-linecap: round;
        stroke-dasharray: 320;
        stroke-dashoffset: 320;
        animation: csWaveDraw 5s cubic-bezier(0.3, 0.1, 0.3, 1) infinite;
      }
      .ed-cs-tile.feat .ed-cs-vis-wave path {
        stroke: var(--panel-hi);
      }
      .ed-cs-vis-wave circle {
        fill: var(--brand);
        animation: csParticleRise 3.5s cubic-bezier(0.4, 0, 0.3, 1) infinite;
      }
      .ed-cs-tile.feat .ed-cs-vis-wave circle {
        fill: var(--panel-hi);
      }
      .ed-cs-vis-wave circle:nth-of-type(1) {
        animation-delay: 0s;
      }
      .ed-cs-vis-wave circle:nth-of-type(2) {
        animation-delay: 0.4s;
        cx: 120 !important;
      }
      .ed-cs-vis-wave circle:nth-of-type(3) {
        animation-delay: 0.9s;
      }
      .ed-cs-vis-wave circle:nth-of-type(4) {
        animation-delay: 1.3s;
      }
      .ed-cs-vis-wave circle:nth-of-type(5) {
        animation-delay: 1.8s;
      }
      .ed-cs-vis-wave circle:nth-of-type(6) {
        animation-delay: 2.3s;
      }
      @keyframes csWaveDraw {
        0%,
        10% {
          stroke-dashoffset: 320;
        }
        55%,
        70% {
          stroke-dashoffset: 0;
        }
        95%,
        100% {
          stroke-dashoffset: -320;
        }
      }
      @keyframes csParticleRise {
        0% {
          transform: translateY(35px);
          opacity: 0;
          r: 1.5;
        }
        20%,
        60% {
          opacity: 0.9;
          r: 3;
        }
        100% {
          transform: translateY(-15px);
          opacity: 0;
          r: 1;
        }
      }

      .ed-cs-head {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 14px;
        margin-bottom: 20px;
        position: relative;
        z-index: 2;
      }
      .ed-cs-badge {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-family: var(--mono);
        font-size: 11px;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: var(--muted);
        font-weight: 500;
      }
      .ed-cs-badge::before {
        content: "";
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--brand);
        box-shadow: 0 0 8px var(--brand-glow);
        animation: edDotPulse 2s infinite;
      }
      .ed-cs-tile.feat .ed-cs-badge {
        color: var(--panel-hi);
      }
      .ed-cs-tile.feat .ed-cs-badge::before {
        background: var(--panel-hi);
        box-shadow: 0 0 10px rgba(232, 223, 184, 0.45);
      }
      @keyframes edDotPulse {
        0%,
        100% {
          opacity: 0.5;
        }
        50% {
          opacity: 1;
        }
      }
      .ed-cs-year {
        font-family: var(--mono);
        font-size: 11px;
        letter-spacing: 0.08em;
        color: var(--muted);
      }
      .ed-cs-tile.feat .ed-cs-year {
        color: rgba(242, 239, 230, 0.55);
      }

      .ed-cs-title {
        font-family: var(--display);
        font-size: clamp(24px, 2.8vw, 38px);
        font-weight: 500;
        letter-spacing: -0.03em;
        line-height: 1;
        color: var(--ink);
        margin: 0 0 14px;
        text-wrap: balance;
        position: relative;
        z-index: 2;
      }
      .ed-cs-tile.feat .ed-cs-title {
        color: var(--bg);
      }
      .ed-cs-title .ital {
        color: var(--brand);
        font-weight: 600;
      }
      .ed-cs-tile.feat .ed-cs-title .ital {
        color: var(--panel-hi);
      }

      .ed-cs-desc {
        font-size: 14px;
        line-height: 1.55;
        color: var(--ink-3);
        margin: 0 0 22px;
        text-wrap: pretty;
        position: relative;
        z-index: 2;
        max-width: 42ch;
      }
      .ed-cs-tile.feat .ed-cs-desc {
        color: rgba(242, 239, 230, 0.75);
      }

      .ed-cs-metrics {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 0;
        position: relative;
        z-index: 2;
        margin-bottom: 18px;
        padding-top: 16px;
        border-top: 1px solid var(--border);
      }
      .ed-cs-tile.feat .ed-cs-metrics {
        border-top-color: rgba(242, 239, 230, 0.15);
      }
      .ed-cs-met {
        display: flex;
        flex-direction: column;
        gap: 4px;
        padding-right: 14px;
        border-right: 1px solid var(--border);
      }
      .ed-cs-tile.feat .ed-cs-met {
        border-right-color: rgba(242, 239, 230, 0.15);
      }
      #page-home .ed-cs-met,
      #page-portfolio .ed-cs-met {
        border-right: none;
      }
      .ed-cs-met:last-child {
        border-right: none;
      }
      .ed-cs-met-v {
        font-family: var(--display);
        font-size: clamp(18px, 2.2vw, 26px);
        font-weight: 500;
        letter-spacing: -0.03em;
        line-height: 0.9;
        color: var(--ink);
        font-variant-numeric: tabular-nums;
      }
      .ed-cs-met-v.brand {
        color: var(--brand);
      }
      .ed-cs-met-v.accent {
        color: var(--brand);
      }
      .ed-cs-tile.feat .ed-cs-met-v {
        color: var(--bg);
      }
      .ed-cs-tile.feat .ed-cs-met-v.brand,
      .ed-cs-tile.feat .ed-cs-met-v.accent {
        color: var(--panel-hi);
      }
      .ed-cs-met-l {
        font-family: var(--mono);
        font-size: 10px;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--muted);
      }
      .ed-cs-tile.feat .ed-cs-met-l {
        color: rgba(242, 239, 230, 0.55);
      }

      /* Expandable section — accordion */
      .ed-cs-expand {
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        transition:
          max-height 0.55s cubic-bezier(0.2, 0.8, 0.3, 1),
          opacity 0.4s,
          margin-top 0.4s;
        position: relative;
        z-index: 2;
      }
      .ed-cs-tile.open .ed-cs-expand {
        max-height: 380px;
        opacity: 1;
        margin-top: 18px;
      }
      .ed-cs-expand-inner {
        padding-top: 18px;
        border-top: 1px solid var(--border);
      }
      .ed-cs-tile.feat .ed-cs-expand-inner {
        border-top-color: rgba(242, 239, 230, 0.15);
      }
      .ed-cs-expand-inner p {
        font-size: 14px;
        line-height: 1.6;
        color: var(--ink-3);
        margin: 0 0 16px;
      }
      .ed-cs-tile.feat .ed-cs-expand-inner p {
        color: rgba(242, 239, 230, 0.78);
      }
      .ed-cs-expand-hl {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        margin-bottom: 18px;
      }
      .ed-cs-expand-hl span {
        padding: 5px 12px;
        border-radius: 999px;
        font-family: var(--mono);
        font-size: 10px;
        letter-spacing: 0.04em;
        background: var(--brand-soft);
        color: var(--brand);
        border: 1px solid var(--brand-light);
      }
      .ed-cs-tile.feat .ed-cs-expand-hl span {
        background: rgba(232, 223, 184, 0.14);
        color: var(--panel-hi);
        border-color: rgba(232, 223, 184, 0.3);
      }
      .ed-cs-expand-btn {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        padding: 11px 14px 11px 20px;
        background: var(--dark);
        color: var(--bg);
        border: none;
        border-radius: 999px;
        font-family: inherit;
        font-size: 13px;
        font-weight: 500;
        cursor: pointer;
        transition: background 0.3s;
      }
      .ed-cs-tile.feat .ed-cs-expand-btn {
        background: var(--panel-hi);
        color: var(--dark);
      }
      .ed-cs-expand-btn:hover {
        background: var(--brand);
      }
      .ed-cs-tile.feat .ed-cs-expand-btn:hover {
        background: var(--panel-hi-2);
      }
      .ed-cs-expand-btn .ed-cs-expand-arrow {
        width: 22px;
        height: 22px;
        border-radius: 50%;
        background: var(--panel-hi);
        color: var(--dark);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 11px;
      }
      .ed-cs-tile.feat .ed-cs-expand-btn .ed-cs-expand-arrow {
        background: var(--dark);
        color: var(--panel-hi);
      }

      .ed-cs-foot {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 14px;
        position: relative;
        z-index: 2;
        margin-top: auto;
        padding-top: 18px;
      }
      .ed-cs-tile.open .ed-cs-foot {
        margin-top: 24px;
      }
      .ed-cs-tags {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
      }
      .ed-cs-tags span {
        padding: 4px 11px;
        border-radius: 999px;
        font-family: var(--mono);
        font-size: 10px;
        letter-spacing: 0.04em;
        color: var(--ink-3);
        background: var(--bg);
        border: 1px solid var(--border);
      }
      .ed-cs-tile.feat .ed-cs-tags span {
        background: rgba(242, 239, 230, 0.06);
        border-color: rgba(242, 239, 230, 0.15);
        color: var(--bg);
      }
      .ed-cs-open {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-family: var(--mono);
        font-size: 11px;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--brand);
        transition: gap 0.3s;
        cursor: pointer;
        white-space: nowrap;
      }
      .ed-cs-tile.feat .ed-cs-open {
        color: var(--panel-hi);
      }
      .ed-cs-tile:hover .ed-cs-open {
        gap: 10px;
      }
      .ed-cs-open-arrow {
        display: inline-block;
        transition: transform 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.2);
        font-size: 10px;
      }
      .ed-cs-tile.open .ed-cs-open-arrow {
        transform: rotate(180deg);
      }

      /* ============================================================
   CASE ROW — editorial list style (kept for subpages if needed)
============================================================ */
      .ed-case-list {
        display: flex;
        flex-direction: column;
        border-top: 1px solid var(--border);
      }
      .ed-case-row {
        display: grid;
        grid-template-columns: 50px minmax(0, 1fr) 140px 140px 60px;
        gap: clamp(14px, 2.4vw, 36px);
        align-items: center;
        padding: 28px 12px;
        border-bottom: 1px solid var(--border);
        transition: background 0.25s ease;
        cursor: pointer;
        position: relative;
      }
      .ed-case-row:hover {
        background: var(--surface-2);
      }
      .ed-case-row::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 0;
        background: var(--brand);
        transition: width 0.3s ease;
      }
      .ed-case-row:hover::before {
        width: 2px;
      }
      .ed-case-idx {
        font-family: var(--mono);
        font-size: 12px;
        color: var(--muted);
        letter-spacing: 0.1em;
        font-weight: 500;
      }
      .ed-case-title {
        font-family: var(--display);
        font-size: clamp(22px, 2.6vw, 34px);
        font-weight: 500;
        letter-spacing: -0.025em;
        line-height: 1.02;
        color: var(--ink);
        text-wrap: balance;
      }
      .ed-case-title .ital {
        color: var(--brand);
        font-weight: 600;
      }
      .ed-case-title small {
        display: block;
        font-family: var(--mono);
        font-size: 11px;
        color: var(--muted);
        letter-spacing: 0.1em;
        text-transform: uppercase;
        margin-top: 8px;
        font-weight: 500;
        line-height: 1.4;
      }
      .ed-case-metric {
        display: flex;
        flex-direction: column;
        gap: 4px;
      }
      .ed-case-metric-v {
        font-family: var(--display);
        font-size: clamp(22px, 2.4vw, 32px);
        font-weight: 500;
        letter-spacing: -0.03em;
        line-height: 0.9;
        color: var(--ink);
        font-variant-numeric: tabular-nums;
      }
      .ed-case-metric-v.accent {
        color: var(--brand);
      }
      .ed-case-metric-l {
        font-family: var(--mono);
        font-size: 10px;
        color: var(--muted);
        letter-spacing: 0.1em;
        text-transform: uppercase;
      }
      .ed-case-go {
        display: flex;
        justify-content: flex-end;
      }
      .ed-case-go-btn {
        width: 42px;
        height: 42px;
        border-radius: 50%;
        border: 1px solid var(--ink);
        background: transparent;
        color: var(--ink);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        transition: all 0.4s cubic-bezier(0.2, 0.9, 0.3, 1.2);
        cursor: pointer;
        flex-shrink: 0;
      }
      .ed-case-row:hover .ed-case-go-btn {
        background: var(--ink);
        color: var(--bg);
        border-color: var(--ink);
      }

      /* Asymmetric feature case — wider card above list */
      .ed-case-feature {
        display: grid;
        grid-template-columns: 1.15fr 0.85fr;
        gap: 0;
        background: var(--dark);
        color: var(--bg);
        border-radius: 22px;
        overflow: hidden;
        margin-bottom: 20px;
        position: relative;
        min-height: 340px;
        cursor: pointer;
        transition: background 0.35s ease;
      }
      .ed-case-feature:hover {
        background: var(--dark-2);
      }
      .ed-case-feature::before {
        content: "";
        position: absolute;
        width: 500px;
        height: 500px;
        border-radius: 50%;
        background: radial-gradient(
          circle,
          rgba(92, 163, 128, 0.22),
          transparent 70%
        );
        top: -180px;
        right: -180px;
        pointer-events: none;
      }
      .ed-case-feature-left {
        padding: clamp(28px, 3vw, 44px);
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        gap: 20px;
        position: relative;
        z-index: 2;
      }
      .ed-case-feature-tag {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        font-family: var(--mono);
        font-size: 11px;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--panel-hi);
      }
      .ed-case-feature-tag::before {
        content: "";
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--panel-hi);
        box-shadow: 0 0 10px rgba(232, 223, 184, 0.5);
        animation: pulse 2s infinite;
      }
      .ed-case-feature h3 {
        font-family: var(--display);
        font-size: clamp(28px, 3.4vw, 46px);
        font-weight: 500;
        letter-spacing: -0.03em;
        line-height: 1;
        color: var(--bg);
        text-wrap: balance;
        margin-top: 12px;
      }
      .ed-case-feature h3 .ital {
        color: var(--panel-hi);
        font-weight: 600;
      }
      .ed-case-feature p {
        font-size: 15px;
        line-height: 1.5;
        color: rgba(242, 239, 230, 0.72);
        max-width: 48ch;
        text-wrap: pretty;
      }
      .ed-case-feature-foot {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 20px;
        padding-top: 18px;
        border-top: 1px solid rgba(242, 239, 230, 0.15);
      }
      .ed-case-feature-meta {
        font-family: var(--mono);
        font-size: 11px;
        color: rgba(242, 239, 230, 0.6);
        letter-spacing: 0.08em;
        text-transform: uppercase;
      }
      .ed-case-feature-right {
        position: relative;
        padding: clamp(28px, 3vw, 44px);
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 20px;
        border-left: 1px solid rgba(242, 239, 230, 0.12);
        background: rgba(242, 239, 230, 0.02);
      }
      .ed-case-feature-kpi {
        display: flex;
        flex-direction: column;
        gap: 4px;
      }
      .ed-case-feature-kpi-v {
        font-family: var(--display);
        font-size: clamp(40px, 4.6vw, 64px);
        font-weight: 500;
        letter-spacing: -0.045em;
        line-height: 0.88;
        color: var(--panel-hi);
        font-variant-numeric: tabular-nums;
      }
      .ed-case-feature-kpi-v .unit {
        font-family: var(--serif);
        font-style: italic;
        font-weight: 400;
        color: var(--bg);
        font-size: 0.45em;
        vertical-align: super;
        margin-left: -4px;
      }
      .ed-case-feature-kpi-l {
        font-family: var(--mono);
        font-size: 11px;
        color: rgba(242, 239, 230, 0.55);
        letter-spacing: 0.1em;
        text-transform: uppercase;
      }
      .ed-case-feature-kpi-sub {
        font-size: 13px;
        line-height: 1.5;
        color: rgba(242, 239, 230, 0.68);
        max-width: 36ch;
      }

      /* ============================================================
   PROCESS — numbered editorial rows
============================================================ */
      .ed-proc {
        display: flex;
        flex-direction: column;
        border-top: 1px solid var(--border);
      }
      /* Vertical journey — sticky big number stays with user through whole section */
      .ed-proc-v {
        display: grid;
        grid-template-columns: minmax(140px, 200px) minmax(0, 1fr);
        gap: clamp(24px, 4vw, 64px);
        position: relative;
        align-items: stretch;
      }
      @media (max-width: 720px) {
        .ed-proc-v {
          grid-template-columns: 1fr;
          gap: 18px;
        }
      }

      .ed-proc-rail {
        position: relative;
      }
      .ed-proc-rail-inner {
        position: sticky;
        top: 96px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
        z-index: 2;
        padding-top: 4px;
      }
      .ed-proc-rail-num-wrap {
        position: relative;
        width: 100%;
        min-height: 1em;
        overflow: hidden;
        font-family: var(--display);
        font-size: clamp(72px, 10vw, 148px);
        font-weight: 500;
        letter-spacing: -0.05em;
        line-height: 0.85;
        color: var(--brand);
        font-variant-numeric: tabular-nums;
        font-feature-settings: "tnum";
      }
      .ed-proc-rail-num {
        position: relative;
        display: block;
        transition:
          transform 0.5s cubic-bezier(0.2, 0.8, 0.3, 1),
          opacity 0.4s;
        will-change: transform, opacity;
      }
      .ed-proc-rail-num.leaving {
        transform: translateY(-35%);
        opacity: 0;
      }
      .ed-proc-rail-num.entering {
        transform: translateY(35%);
        opacity: 0;
      }
      .ed-proc-rail-label {
        font-family: var(--mono);
        font-size: 11px;
        font-weight: 500;
        color: var(--brand);
        letter-spacing: 0.14em;
        text-transform: uppercase;
        display: flex;
        align-items: center;
        gap: 10px;
      }
      .ed-proc-rail-label::before {
        content: "";
        width: 20px;
        height: 1px;
        background: var(--brand);
      }
      .ed-proc-rail-progress {
        width: 100%;
        height: 3px;
        background: var(--border);
        border-radius: 4px;
        overflow: hidden;
        margin-top: 6px;
      }
      .ed-proc-rail-progress-fill {
        display: block;
        height: 100%;
        background: var(--brand);
        width: 0;
        transition: width 0.6s cubic-bezier(0.2, 0.8, 0.3, 1);
      }
      .ed-proc-rail-phase {
        font-family: var(--display);
        font-size: 16px;
        font-weight: 500;
        color: var(--ink);
        letter-spacing: -0.02em;
        margin-top: 4px;
        transition: color 0.3s;
      }
      @media (max-width: 720px) {
        .ed-proc-rail {
          grid-column: 1;
          position: static;
        }
        .ed-proc-rail-inner {
          position: sticky;
          top: 72px;
          background: var(--bg);
          padding: 12px 0;
          flex-direction: row;
          align-items: center;
          gap: 14px;
          z-index: 5;
        }
        .ed-proc-rail-num-wrap {
          font-size: 44px;
          min-width: 60px;
        }
        .ed-proc-rail-progress {
          flex: 1;
        }
        .ed-proc-rail-phase {
          font-size: 13px;
        }
      }

      .ed-proc-steps {
        display: flex;
        flex-direction: column;
        position: relative;
      }
      .ed-proc-steps::before {
        content: "";
        position: absolute;
        left: 18px;
        top: 16px;
        bottom: 16px;
        width: 1px;
        background: repeating-linear-gradient(
          to bottom,
          var(--border-2) 0 6px,
          transparent 6px 12px
        );
      }
      @media (max-width: 720px) {
        .ed-proc-steps::before {
          display: none;
        }
      }

      .ed-proc-step {
        display: grid;
        grid-template-columns: 56px minmax(0, 1fr);
        gap: 24px;
        align-items: start;
        padding: 36px 0;
        border-bottom: 1px solid var(--border);
        position: relative;
        transition: opacity 0.4s;
        min-height: 220px;
      }
      .ed-proc-step:last-child {
        border-bottom: none;
      }
      .ed-proc-step-dot {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        border: 1px solid var(--border-2);
        background: var(--bg);
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: var(--mono);
        font-size: 11px;
        font-weight: 500;
        color: var(--muted);
        letter-spacing: 0.05em;
        transition: all 0.4s cubic-bezier(0.2, 0.8, 0.3, 1);
        position: relative;
        z-index: 1;
        margin-left: 0;
      }
      .ed-proc-step-body {
        min-width: 0;
      }
      .ed-proc-step-head {
        display: flex;
        align-items: baseline;
        gap: 14px;
        flex-wrap: wrap;
        margin-bottom: 10px;
      }
      .ed-proc-step-phase {
        font-family: var(--mono);
        font-size: 11px;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--muted);
        font-weight: 500;
        transition: color 0.3s;
      }
      .ed-proc-step-phase::after {
        content: " · ";
        color: var(--border-2);
      }
      .ed-proc-step-time {
        font-family: var(--mono);
        font-size: 11px;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--muted);
      }
      .ed-proc-step-title {
        font-family: var(--display);
        font-size: clamp(22px, 2.6vw, 34px);
        font-weight: 500;
        letter-spacing: -0.03em;
        line-height: 1;
        color: var(--ink);
        margin: 0 0 10px;
        text-wrap: balance;
      }
      .ed-proc-step-title .ital {
        color: var(--brand);
        font-weight: 600;
      }
      .ed-proc-step-desc {
        font-size: 15px;
        line-height: 1.55;
        color: var(--ink-3);
        max-width: 56ch;
        margin: 0 0 16px;
        text-wrap: pretty;
      }
      .ed-proc-step-deliver {
        display: flex;
        gap: 6px;
        flex-wrap: wrap;
      }
      .ed-proc-step-deliver span {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-family: var(--mono);
        font-size: 11px;
        letter-spacing: 0.04em;
        color: var(--ink-2);
        padding: 5px 12px;
        background: var(--bg);
        border: 1px solid var(--border);
        border-radius: 999px;
        transition: all 0.3s;
      }
      .ed-proc-step-deliver span::before {
        content: "✦";
        color: var(--brand-light);
        font-size: 10px;
      }

      .ed-proc-step.current {
      }
      .ed-proc-step.current .ed-proc-step-dot {
        background: var(--brand);
        border-color: var(--brand);
        color: var(--accent);
        transform: scale(1.05);
        box-shadow: 0 0 0 8px rgba(31, 122, 77, 0.08);
      }
      .ed-proc-step.current .ed-proc-step-phase {
        color: var(--brand);
      }
      .ed-proc-step.current .ed-proc-step-deliver span {
        border-color: var(--brand-light);
      }
      .ed-proc-step.current .ed-proc-step-deliver span::before {
        color: var(--brand);
      }

      /* ============================================================
   TIMELINE — horizontal editorial
============================================================ */
      /* Journey — zigzag story map with SVG connecting path */
      .ed-journey {
        position: relative;
        padding: 40px 0;
      }
      .ed-journey-path {
        position: absolute;
        inset: 0;
        pointer-events: none;
        z-index: 0;
      }
      .ed-journey-path svg {
        width: 100%;
        height: 100%;
        display: block;
      }
      .ed-journey-path path.trail {
        fill: none;
        stroke: var(--border-2);
        stroke-width: 1.5;
        stroke-dasharray: 5 7;
      }
      .ed-journey-path path.progress {
        fill: none;
        stroke: var(--brand);
        stroke-width: 2;
        stroke-linecap: round;
        stroke-dasharray: 2000;
        stroke-dashoffset: 2000;
        transition: stroke-dashoffset 0.4s linear;
      }

      .ed-journey-list {
        display: flex;
        flex-direction: column;
        gap: clamp(24px, 4vw, 64px);
        position: relative;
        z-index: 1;
      }

      .ed-journey-node {
        display: grid;
        grid-template-columns: 1fr 72px 1fr;
        align-items: center;
        gap: clamp(20px, 3vw, 48px);
        position: relative;
      }
      .ed-journey-node.left .ed-journey-card {
        grid-column: 1;
        justify-self: end;
        text-align: right;
      }
      .ed-journey-node.left .ed-journey-ghost {
        grid-column: 3;
        justify-self: start;
      }
      .ed-journey-node.right .ed-journey-card {
        grid-column: 3;
        justify-self: start;
        text-align: left;
      }
      .ed-journey-node.right .ed-journey-ghost {
        grid-column: 1;
        justify-self: end;
      }
      .ed-journey-node .ed-journey-dot {
        grid-column: 2;
        justify-self: center;
      }

      .ed-journey-card {
        max-width: clamp(260px, 36vw, 440px);
        padding: 20px 22px;
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: 16px;
        transition:
          border-color 0.35s ease,
          background 0.35s ease;
        cursor: pointer;
      }
      .ed-journey-card:hover {
        border-color: var(--brand-light);
      }
      .ed-journey-card:hover .ed-journey-year {
        color: var(--ink);
      }

      /* Ghost side (opposite) — big year text as background decoration */
      .ed-journey-ghost {
        pointer-events: none;
        user-select: none;
        font-family: var(--display);
        font-size: clamp(56px, 10vw, 140px);
        font-weight: 500;
        letter-spacing: -0.05em;
        line-height: 0.85;
        color: var(--bg-2);
        opacity: 0.55;
        white-space: nowrap;
        font-variant-numeric: tabular-nums;
      }
      .ed-journey-node.left .ed-journey-ghost {
        text-align: left;
      }
      .ed-journey-node.right .ed-journey-ghost {
        text-align: right;
      }

      .ed-journey-year {
        font-family: var(--display);
        font-size: clamp(26px, 3vw, 38px);
        font-weight: 500;
        letter-spacing: -0.035em;
        color: var(--brand);
        line-height: 0.9;
        font-variant-numeric: tabular-nums;
        margin: 0 0 6px;
        transition: color 0.35s;
      }
      .ed-journey-year small {
        display: inline-block;
        margin-left: 10px;
        font-size: 0.32em;
        font-family: var(--mono);
        color: var(--muted);
        letter-spacing: 0.12em;
        text-transform: uppercase;
        font-weight: 400;
        vertical-align: middle;
      }
      .ed-journey-node.left .ed-journey-year small {
        margin-left: 0;
        margin-right: 10px;
      }

      .ed-journey-title {
        font-family: var(--display);
        font-size: clamp(18px, 2vw, 24px);
        font-weight: 500;
        letter-spacing: -0.025em;
        line-height: 1.1;
        color: var(--ink);
        margin: 0 0 8px;
        text-wrap: balance;
      }
      .ed-journey-title .ital {
        color: var(--brand);
        font-weight: 600;
      }
      .ed-journey-desc {
        font-size: 13.5px;
        line-height: 1.5;
        color: var(--muted);
        margin: 0 0 10px;
        text-wrap: pretty;
      }

      .ed-journey-stat {
        display: inline-flex;
        align-items: baseline;
        gap: 8px;
        font-family: var(--mono);
        font-size: 11px;
        color: var(--muted);
        letter-spacing: 0.04em;
        text-transform: uppercase;
      }
      .ed-journey-stat strong {
        font-family: var(--display);
        font-size: 16px;
        font-weight: 500;
        letter-spacing: -0.02em;
        color: var(--brand);
        text-transform: none;
        letter-spacing: -0.02em;
      }

      .ed-journey-dot {
        width: 18px;
        height: 18px;
        border-radius: 50%;
        background: var(--bg);
        border: 2px solid var(--border-2);
        position: relative;
        z-index: 2;
        transition: all 0.4s cubic-bezier(0.2, 0.9, 0.3, 1.2);
      }
      .ed-journey-node:hover .ed-journey-dot {
        border-color: var(--brand);
        background: var(--brand);
        transform: scale(1.25);
      }

      /* Peak entry — highlighted dark card */
      .ed-journey-node.peak .ed-journey-card {
        background: var(--dark);
        color: var(--bg);
        border-color: var(--dark);
        position: relative;
        overflow: hidden;
      }
      .ed-journey-node.peak .ed-journey-card::before {
        content: "";
        position: absolute;
        width: 260px;
        height: 260px;
        border-radius: 50%;
        background: radial-gradient(
          circle,
          rgba(92, 163, 128, 0.22),
          transparent 65%
        );
        top: -100px;
        right: -100px;
        pointer-events: none;
      }
      .ed-journey-node.peak .ed-journey-year {
        color: var(--panel-hi);
      }
      .ed-journey-node.peak .ed-journey-year small {
        color: rgba(242, 239, 230, 0.6);
      }
      .ed-journey-node.peak .ed-journey-title {
        color: var(--bg);
        position: relative;
        z-index: 1;
      }
      .ed-journey-node.peak .ed-journey-title .ital {
        color: var(--panel-hi);
      }
      .ed-journey-node.peak .ed-journey-desc {
        color: rgba(242, 239, 230, 0.75);
        position: relative;
        z-index: 1;
      }
      .ed-journey-node.peak .ed-journey-stat {
        color: rgba(242, 239, 230, 0.6);
        position: relative;
        z-index: 1;
      }
      .ed-journey-node.peak .ed-journey-stat strong {
        color: var(--panel-hi);
      }
      .ed-journey-node.peak .ed-journey-dot {
        border-color: var(--brand);
        background: var(--brand);
        transform: scale(1.35);
        box-shadow: 0 0 0 8px rgba(31, 122, 77, 0.18);
      }

      @media (max-width: 760px) {
        .ed-journey-node {
          grid-template-columns: 36px 1fr;
          gap: 16px;
        }
        .ed-journey-node.left .ed-journey-card,
        .ed-journey-node.right .ed-journey-card {
          grid-column: 2;
          justify-self: start;
          text-align: left;
          max-width: none;
        }
        .ed-journey-node .ed-journey-dot {
          grid-column: 1;
          justify-self: center;
        }
        .ed-journey-node.left .ed-journey-ghost,
        .ed-journey-node.right .ed-journey-ghost {
          display: none;
        }
        .ed-journey-node.left .ed-journey-year small,
        .ed-journey-node.right .ed-journey-year small {
          margin-right: 0;
          margin-left: 10px;
        }
        .ed-journey-path {
          left: 18px;
          right: auto;
          width: 1px;
        }
        .ed-journey-path svg {
          display: none;
        }
        .ed-journey-list::before {
          content: "";
          position: absolute;
          left: 17px;
          top: 8px;
          bottom: 8px;
          width: 1px;
          background: repeating-linear-gradient(
            to bottom,
            var(--border-2) 0 6px,
            transparent 6px 12px
          );
        }
      }

      /* Keep legacy .ed-timeline* styles so old markup still renders */
      .ed-timeline {
        position: relative;
      }
      .ed-timeline-track {
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        gap: 16px;
      }

      /* ============================================================
   FAQ — editorial list (no card boxes)
============================================================ */
      .ed-faq {
        max-width: 980px;
        margin: 0 auto;
        border-top: 1px solid var(--border);
      }
      .ed-faq-item {
        border-bottom: 1px solid var(--border);
        transition: background 0.3s;
      }
      .ed-faq-item:hover {
        background: var(--surface-2);
      }
      .ed-faq-q {
        width: 100%;
        padding: 24px 16px 24px 8px;
        background: none;
        border: none;
        color: var(--ink);
        text-align: left;
        cursor: pointer;
        display: grid;
        grid-template-columns: 64px 1fr 40px;
        align-items: center;
        gap: 20px;
        transition: color 0.3s;
        font-family: inherit;
      }
      .ed-faq-q:hover {
        color: var(--brand);
      }
      .ed-faq-idx {
        font-family: var(--mono);
        font-size: 12px;
        font-weight: 500;
        color: var(--muted);
        letter-spacing: 0.1em;
        transition: color 0.3s;
      }
      .ed-faq-item:hover .ed-faq-idx {
        color: var(--brand);
      }
      .ed-faq-item.open .ed-faq-idx {
        color: var(--brand);
      }
      .ed-faq-text {
        font-family: var(--display);
        font-size: clamp(20px, 2.2vw, 28px);
        font-weight: 500;
        letter-spacing: -0.02em;
        line-height: 1.15;
        min-width: 0;
      }
      .ed-faq-ico {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background: transparent;
        border: 1px solid var(--border-2);
        color: var(--ink);
        font-size: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.2);
        justify-self: end;
      }
      .ed-faq-item:hover .ed-faq-ico {
        border-color: var(--ink);
      }
      .ed-faq-item.open .ed-faq-ico {
        background: var(--brand);
        color: var(--bg);
        border-color: var(--brand);
        transform: rotate(45deg);
      }
      .ed-faq-a {
        max-height: 0;
        overflow: hidden;
        transition:
          max-height 0.45s ease,
          padding 0.35s ease;
        color: var(--ink-3);
        font-size: 15px;
        line-height: 1.6;
        padding-left: 84px;
        padding-right: 56px;
        max-width: 62ch;
      }
      .ed-faq-item.open .ed-faq-a {
        max-height: 320px;
        padding-bottom: 24px;
      }
      @media (max-width: 640px) {
        .ed-faq-q {
          grid-template-columns: 36px 1fr 34px;
          gap: 12px;
          padding: 20px 8px;
        }
        .ed-faq-idx {
          font-size: 10px;
        }
        .ed-faq-a {
          padding-left: 48px;
          padding-right: 20px;
          font-size: 14px;
        }
      }

      /* ============================================================
   CTA BIG — editorial giant block
============================================================ */
      .ed-cta {
        background: var(--dark);
        color: var(--bg);
        position: relative;
        overflow: hidden;
        padding: clamp(80px, 12vw, 160px) 0;
        border-radius: 32px;
        margin: 0 calc(-1 * var(--px));
      }
      .ed-cta::before {
        content: "";
        position: absolute;
        width: 800px;
        height: 800px;
        border-radius: 50%;
        background: radial-gradient(
          circle,
          rgba(92, 163, 128, 0.22),
          transparent 70%
        );
        top: -320px;
        left: 50%;
        transform: translateX(-50%);
        pointer-events: none;
        animation: blob 22s ease-in-out infinite;
      }
      .ed-cta-inner {
        position: relative;
        z-index: 2;
        text-align: center;
        max-width: 980px;
        margin: 0 auto;
        padding: 0 var(--px);
      }
      .ed-cta-label {
        font-family: var(--mono);
        font-size: 12px;
        color: var(--panel-hi);
        letter-spacing: 0.15em;
        text-transform: uppercase;
        margin-bottom: 24px;
        display: inline-flex;
        align-items: center;
        gap: 10px;
      }
      .ed-cta-label::before,
      .ed-cta-label::after {
        content: "";
        width: 22px;
        height: 1px;
        background: var(--panel-hi);
      }
      .ed-cta h2 {
        font-family: var(--display);
        font-size: clamp(52px, 9vw, 140px);
        font-weight: 500;
        letter-spacing: -0.045em;
        line-height: 0.9;
        color: var(--bg);
        margin-bottom: 32px;
        text-wrap: balance;
      }
      .ed-cta h2 .ital {
        color: var(--panel-hi);
        font-weight: 600;
      }
      .ed-cta p {
        font-size: 18px;
        color: rgba(242, 239, 230, 0.7);
        max-width: 56ch;
        margin: 0 auto 40px;
        line-height: 1.5;
        text-wrap: pretty;
      }
      .ed-cta-actions {
        display: flex;
        gap: 12px;
        justify-content: center;
        flex-wrap: wrap;
        margin-bottom: 40px;
      }
      .ed-cta-perks {
        display: flex;
        gap: 32px;
        justify-content: center;
        flex-wrap: wrap;
        font-family: var(--mono);
        font-size: 11px;
        color: rgba(242, 239, 230, 0.55);
        letter-spacing: 0.1em;
        text-transform: uppercase;
      }
      .ed-cta-perk {
        display: inline-flex;
        align-items: center;
        gap: 10px;
      }
      .ed-cta-perk::before {
        content: "✦";
        color: var(--panel-hi);
        font-size: 14px;
      }

      /* ============================================================
   KONTAKT PAGE — editorial refresh (overrides old .k-* styles)
============================================================ */
      #page-kontakt .kontakt-grid {
        padding-top: 0;
      }
      #page-kontakt .k-left {
        background: linear-gradient(165deg, var(--dark) 0%, #132820 100%);
        color: var(--bg);
        padding: calc(88px + clamp(48px, 5vw, 80px)) var(--px)
          clamp(48px, 5vw, 80px);
        position: relative;
        overflow: hidden;
      }
      #page-kontakt .k-left::before {
        content: "";
        position: absolute;
        width: 520px;
        height: 520px;
        border-radius: 50%;
        background: radial-gradient(
          circle,
          rgba(92, 163, 128, 0.22),
          transparent 65%
        );
        bottom: -220px;
        right: -200px;
        pointer-events: none;
      }

      #page-kontakt .eyebrow {
        color: var(--panel-hi) !important;
        font-family: var(--mono) !important;
        font-size: 11px !important;
        letter-spacing: 0.14em !important;
        text-transform: uppercase !important;
        margin-bottom: 22px;
        font-weight: 500;
        display: inline-flex;
        align-items: center;
        gap: 10px;
        opacity: 1 !important;
      }
      #page-kontakt .eyebrow::before {
        content: "";
        width: 22px;
        height: 1px;
        background: var(--panel-hi);
        display: inline-block;
      }

      #page-kontakt .k-title {
        font-family: var(--display) !important;
        font-size: clamp(44px, 6.5vw, 88px) !important;
        font-weight: 500 !important;
        letter-spacing: -0.045em !important;
        line-height: 0.94 !important;
        color: var(--bg) !important;
        text-wrap: balance;
        margin-bottom: 22px;
      }
      #page-kontakt .k-title .serif {
        color: var(--panel-hi);
        font-weight: 600;
        font-family: inherit;
        font-style: normal;
        letter-spacing: -0.02em;
      }
      #page-kontakt .k-sub {
        font-size: 16px !important;
        line-height: 1.55 !important;
        color: rgba(242, 239, 230, 0.72) !important;
        max-width: 48ch;
        margin-bottom: 0;
      }

      #page-kontakt .k-perks {
        display: flex;
        flex-direction: column;
        gap: 14px;
        margin-top: 8px;
      }
      #page-kontakt .k-perk {
        display: flex;
        gap: 14px;
        align-items: flex-start;
        padding: 14px 16px;
        background: rgba(242, 239, 230, 0.05);
        border: 1px solid rgba(242, 239, 230, 0.12);
        border-radius: 12px;
        transition:
          background 0.3s,
          border-color 0.3s;
      }
      #page-kontakt .k-perk:hover {
        background: rgba(242, 239, 230, 0.08);
        border-color: rgba(232, 223, 184, 0.3);
      }
      #page-kontakt .k-perk-ico {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background: var(--panel-hi);
        color: var(--dark);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
      }
      #page-kontakt .k-perk-ico svg {
        width: 16px;
        height: 16px;
      }
      #page-kontakt .k-perk-title {
        font-family: var(--display);
        font-size: 15px;
        font-weight: 500;
        letter-spacing: -0.015em;
        color: var(--bg);
        margin-bottom: 2px;
      }
      #page-kontakt .k-perk-desc {
        font-size: 13px;
        color: rgba(242, 239, 230, 0.6);
        line-height: 1.45;
      }

      /* Live availability — switch to accent green */
      #page-kontakt .k-live {
        background: rgba(242, 239, 230, 0.04);
        border: 1px solid rgba(242, 239, 230, 0.14);
        border-radius: 14px;
        padding: 18px;
      }
      #page-kontakt .k-live-head {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        margin-bottom: 14px;
        gap: 14px;
      }
      #page-kontakt .k-live-count-num {
        font-family: var(--display);
        font-size: 24px;
        font-weight: 500;
        letter-spacing: -0.025em;
        color: var(--panel-hi);
        font-variant-numeric: tabular-nums;
      }
      #page-kontakt .k-live-count-lbl {
        font-family: var(--mono);
        font-size: 10px;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: rgba(242, 239, 230, 0.55);
        margin-left: 6px;
      }
      #page-kontakt .k-live-status {
        font-family: var(--mono);
        font-size: 10px;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--panel-hi);
        display: inline-flex;
        align-items: center;
        gap: 8px;
      }
      #page-kontakt .k-live-status::before {
        content: "";
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--panel-hi);
        box-shadow: 0 0 8px rgba(232, 223, 184, 0.5);
        animation: pulse 1.8s infinite;
      }
      #page-kontakt .k-live-grid {
        display: grid;
        grid-template-columns: 40px repeat(7, 1fr);
        gap: 4px;
        margin-bottom: 14px;
      }
      #page-kontakt .k-live-cell {
        aspect-ratio: 1/1;
        border-radius: 4px;
        background: rgba(242, 239, 230, 0.12);
        transition: all 0.3s;
        cursor: help;
        position: relative;
        border: 1px solid rgba(242, 239, 230, 0.05);
      }
      #page-kontakt .k-live-cell.level-1 {
        background: rgba(232, 223, 184, 0.22);
        border-color: rgba(232, 223, 184, 0.14);
      }
      #page-kontakt .k-live-cell.level-2 {
        background: rgba(232, 223, 184, 0.5);
        border-color: rgba(232, 223, 184, 0.28);
      }
      #page-kontakt .k-live-cell.level-3 {
        background: rgba(232, 223, 184, 0.78);
        border-color: rgba(232, 223, 184, 0.45);
      }
      #page-kontakt .k-live-cell.level-4 {
        background: var(--panel-hi);
        border-color: var(--panel-hi);
        box-shadow: 0 0 10px rgba(232, 223, 184, 0.45);
      }
      #page-kontakt .k-live-cell:hover {
        transform: scale(1.25);
        z-index: 2;
        outline: 1px solid var(--panel-hi);
      }
      #page-kontakt .k-live-gh {
        font-family: var(--mono);
        font-size: 9px;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: rgba(242, 239, 230, 0.55);
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 4px;
      }
      #page-kontakt .k-live-gh.day-label {
        justify-content: flex-start;
      }
      #page-kontakt .k-live-foot {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-family: var(--mono);
        font-size: 10px;
        color: rgba(242, 239, 230, 0.6);
        letter-spacing: 0.06em;
        text-transform: uppercase;
        flex-wrap: wrap;
        gap: 10px;
      }
      #page-kontakt .k-live-scale {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        color: rgba(242, 239, 230, 0.55);
      }
      #page-kontakt .k-live-scale-dot {
        width: 10px;
        height: 10px;
        border-radius: 2px;
        display: inline-block;
      }

      /* Socials */
      #page-kontakt .k-socials {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        margin-top: 4px;
      }
      #page-kontakt .k-soc {
        padding: 8px 14px;
        border-radius: 999px;
        font-family: var(--mono);
        font-size: 10.5px;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: rgba(242, 239, 230, 0.82);
        background: rgba(242, 239, 230, 0.05);
        border: 1px solid rgba(242, 239, 230, 0.15);
        transition: all 0.25s;
        text-decoration: none;
        font-weight: 500;
      }
      #page-kontakt .k-soc:hover {
        background: var(--panel-hi);
        color: var(--dark);
        border-color: var(--panel-hi);
      }

      /* Right side — form */
      #page-kontakt .k-right {
        background: var(--bg);
        padding: calc(88px + clamp(48px, 5vw, 80px)) var(--px)
          clamp(48px, 5vw, 80px);
      }

      @media (max-width: 1024px) {
        #page-kontakt .k-left {
          padding-top: 112px;
        }
        #page-kontakt .k-right {
          padding-top: clamp(40px, 5vw, 56px);
        }
      }
      #page-kontakt .k-form-wrap {
        max-width: 640px;
        margin: 0 auto;
      }

      #page-kontakt .k-tabs {
        display: flex;
        gap: 6px;
        padding: 4px;
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: 999px;
        margin-bottom: 32px;
        width: fit-content;
      }
      #page-kontakt .k-tab {
        padding: 9px 18px;
        border-radius: 999px;
        font-family: var(--mono);
        font-size: 11px;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--muted);
        background: transparent;
        border: none;
        cursor: pointer;
        transition: all 0.25s;
        font-weight: 500;
      }
      #page-kontakt .k-tab:hover {
        color: var(--ink);
      }
      #page-kontakt .k-tab.active {
        background: var(--ink);
        color: var(--bg);
      }

      #page-kontakt .kp-title {
        font-family: var(--display);
        font-size: clamp(28px, 3.4vw, 42px);
        font-weight: 500;
        letter-spacing: -0.035em;
        line-height: 1;
        color: var(--ink);
        margin-bottom: 10px;
        text-wrap: balance;
      }
      #page-kontakt .kp-sub {
        font-size: 15px;
        line-height: 1.5;
        color: var(--muted);
        margin-bottom: 28px;
        max-width: 52ch;
      }

      #page-kontakt .kf-group {
        margin-bottom: 20px;
      }
      #page-kontakt .kf-group label {
        font-family: var(--mono);
        font-size: 10px;
        font-weight: 500;
        color: var(--brand);
        text-transform: uppercase;
        letter-spacing: 0.12em;
        margin-bottom: 8px;
        display: block;
      }
      #page-kontakt .kf-group input,
      #page-kontakt .kf-group textarea {
        width: 100%;
        padding: 12px 14px;
        font-family: inherit;
        font-size: 14px;
        color: var(--ink);
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: 10px;
        outline: none;
        transition:
          border-color 0.25s,
          box-shadow 0.25s;
      }
      #page-kontakt .kf-group input:focus,
      #page-kontakt .kf-group textarea:focus {
        border-color: var(--brand);
        box-shadow: 0 0 0 3px var(--brand-glow);
      }
      #page-kontakt .kf-group input::placeholder,
      #page-kontakt .kf-group textarea::placeholder {
        color: var(--muted-2);
      }
      #page-kontakt .kf-group textarea {
        min-height: 96px;
        resize: vertical;
        line-height: 1.5;
      }

      #page-kontakt .kf-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
      }
      @media (max-width: 520px) {
        #page-kontakt .kf-row {
          grid-template-columns: 1fr;
        }
      }

      #page-kontakt .kf-checks {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
      }
      #page-kontakt .kf-check {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 8px 14px;
        border-radius: 999px;
        cursor: pointer;
        font-size: 12.5px;
        color: var(--ink-3);
        background: var(--surface);
        border: 1px solid var(--border);
        transition: all 0.2s;
        user-select: none;
      }
      #page-kontakt .kf-check input {
        display: none;
      }
      #page-kontakt .kf-check:hover {
        border-color: var(--brand-light);
      }
      #page-kontakt .kf-check:has(input:checked) {
        background: var(--brand);
        color: var(--bg);
        border-color: var(--brand);
        font-weight: 500;
      }

      /* Calendar */
      #page-kontakt .cal-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 14px;
      }
      #page-kontakt .cal-nav {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background: var(--surface);
        border: 1px solid var(--border);
        color: var(--ink);
        cursor: pointer;
        transition: all 0.25s;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
      }
      #page-kontakt .cal-nav:hover {
        background: var(--ink);
        color: var(--bg);
        border-color: var(--ink);
      }
      #page-kontakt .cal-month {
        font-family: var(--display);
        font-size: 18px;
        font-weight: 500;
        letter-spacing: -0.02em;
        color: var(--ink);
      }
      #page-kontakt .cal-grid {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        gap: 4px;
      }
      #page-kontakt .cal-cell {
        aspect-ratio: 1/1;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: var(--mono);
        font-size: 12px;
        color: var(--ink);
        background: var(--surface);
        border: 1px solid transparent;
        border-radius: 8px;
        cursor: pointer;
        transition: all 0.2s;
      }
      #page-kontakt .cal-cell.dow {
        background: transparent;
        font-size: 10px;
        color: var(--muted);
        letter-spacing: 0.1em;
        text-transform: uppercase;
        cursor: default;
        font-weight: 500;
      }
      #page-kontakt .cal-cell.empty,
      #page-kontakt .cal-cell.past {
        background: transparent;
        color: var(--muted-2);
        cursor: default;
      }
      #page-kontakt .cal-cell.past {
        opacity: 0.4;
      }
      #page-kontakt .cal-cell.free:hover {
        border-color: var(--brand);
        color: var(--brand);
      }
      #page-kontakt .cal-cell.sel {
        background: var(--dark) !important;
        color: var(--panel-hi) !important;
        border-color: var(--dark);
      }

      #page-kontakt .time-slots {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
        gap: 6px;
      }
      #page-kontakt .time-slot {
        padding: 10px;
        font-family: var(--mono);
        font-size: 12px;
        color: var(--ink);
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: 8px;
        cursor: pointer;
        transition: all 0.2s;
        text-align: center;
      }
      #page-kontakt .time-slot:hover {
        border-color: var(--brand);
        color: var(--brand);
      }
      #page-kontakt .time-slot.sel {
        background: var(--dark);
        color: var(--panel-hi);
        border-color: var(--dark);
      }

      #page-kontakt .k-submit {
        display: inline-flex;
        align-items: center;
        gap: 12px;
        padding: 14px 18px 14px 24px;
        background: var(--dark);
        color: var(--bg);
        border: none;
        border-radius: 999px;
        font-family: inherit;
        font-size: 14px;
        font-weight: 500;
        cursor: pointer;
        transition: background 0.3s;
        width: 100%;
        justify-content: center;
        margin-top: 4px;
      }
      #page-kontakt .k-submit::after {
        content: "→";
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 24px;
        height: 24px;
        border-radius: 50%;
        background: var(--panel-hi);
        color: var(--dark);
        font-size: 12px;
        transition: transform 0.3s;
      }
      #page-kontakt .k-submit:hover {
        background: var(--brand);
      }
      #page-kontakt .k-submit:hover::after {
        transform: rotate(-45deg);
      }
      /* Hide default → arrow in content since we add ::after */
      #page-kontakt .k-submit {
        text-indent: 0;
      }

      #page-kontakt .kf-hint {
        display: flex;
        justify-content: flex-end;
        font-family: var(--mono);
        font-size: 10px;
        letter-spacing: 0.05em;
        color: var(--muted);
        margin-top: 6px;
      }
      #page-kontakt .kf-note {
        font-family: var(--mono);
        font-size: 11px;
        letter-spacing: 0.04em;
        color: var(--muted);
        text-align: center;
        margin-top: 14px;
        line-height: 1.5;
      }
      #page-kontakt .kf-note strong {
        color: var(--brand);
        font-weight: 600;
      }

      #page-kontakt .k-success {
        text-align: center;
        padding: 40px 20px;
      }
      #page-kontakt .k-suc-icon {
        width: 72px;
        height: 72px;
        border-radius: 50%;
        background: var(--brand);
        color: var(--bg);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 32px;
        margin: 0 auto 20px;
        font-weight: 700;
      }
      #page-kontakt .k-suc-title {
        font-family: var(--display);
        font-size: 32px;
        font-weight: 500;
        letter-spacing: -0.03em;
        color: var(--ink);
        margin-bottom: 8px;
      }
      #page-kontakt .k-suc-desc {
        font-size: 15px;
        color: var(--muted);
        margin-bottom: 24px;
        line-height: 1.5;
      }

      /* ============================================================
   STUDIO LIVE PANEL — dashboard with animated metrics
============================================================ */
      .ed-studio {
        background: var(--dark);
        color: var(--bg);
        border-radius: 28px;
        padding: clamp(32px, 4vw, 56px);
        position: relative;
        overflow: hidden;
      }
      .ed-studio::before {
        content: "";
        position: absolute;
        width: 700px;
        height: 700px;
        border-radius: 50%;
        background: radial-gradient(
          circle,
          rgba(92, 163, 128, 0.22),
          transparent 65%
        );
        top: -280px;
        right: -200px;
        pointer-events: none;
        animation: blob 22s ease-in-out infinite;
      }

      .ed-studio-head {
        max-width: 720px;
        margin: 0 0 clamp(28px, 4vw, 48px);
        position: relative;
        z-index: 2;
      }
      .ed-studio-label {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        font-family: var(--mono);
        font-size: 11px;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--panel-hi);
        font-weight: 500;
        margin-bottom: 14px;
      }
      .ed-studio-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--panel-hi);
        box-shadow: 0 0 10px rgba(232, 223, 184, 0.5);
        animation: pulse 1.8s infinite;
      }
      .ed-studio-title {
        font-family: var(--display);
        font-size: clamp(32px, 4.2vw, 56px);
        font-weight: 500;
        letter-spacing: -0.035em;
        line-height: 1;
        color: var(--bg);
        margin: 0 0 14px;
        text-wrap: balance;
      }
      .ed-studio-title .ital {
        color: var(--panel-hi);
        font-weight: 600;
      }
      .ed-studio-sub {
        font-size: 15px;
        line-height: 1.55;
        color: rgba(242, 239, 230, 0.7);
        margin: 0;
        max-width: 48ch;
      }

      .ed-studio-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 14px;
        position: relative;
        z-index: 2;
      }
      @media (max-width: 880px) {
        .ed-studio-grid {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }
      }
      @media (max-width: 440px) {
        .ed-studio-grid {
          grid-template-columns: 1fr;
        }
      }

      .ed-studio-panel {
        padding: 22px;
        background: rgba(242, 239, 230, 0.04);
        border: 1px solid rgba(242, 239, 230, 0.12);
        border-radius: 16px;
        transition:
          background 0.35s,
          border-color 0.35s;
        display: flex;
        flex-direction: column;
        gap: 14px;
        min-height: 240px;
      }
      .ed-studio-panel:hover {
        background: rgba(242, 239, 230, 0.07);
        border-color: rgba(232, 223, 184, 0.3);
      }
      .ed-studio-panel-label {
        font-family: var(--mono);
        font-size: 10px;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--panel-hi);
        font-weight: 500;
      }
      .ed-studio-panel-v {
        font-family: var(--display);
        font-size: clamp(32px, 3.6vw, 48px);
        font-weight: 500;
        letter-spacing: -0.04em;
        line-height: 0.9;
        color: var(--bg);
        margin-top: auto;
        font-variant-numeric: tabular-nums;
      }
      .ed-studio-panel-v .unit {
        font-family: var(--serif);
        font-style: italic;
        font-weight: 400;
        color: var(--panel-hi);
        font-size: 0.55em;
        vertical-align: super;
        margin-left: -2px;
        letter-spacing: -0.01em;
      }
      .ed-studio-panel-l {
        font-family: var(--mono);
        font-size: 10px;
        color: rgba(242, 239, 230, 0.6);
        letter-spacing: 0.04em;
        line-height: 1.5;
        max-width: 28ch;
        text-transform: none;
      }

      /* Panel 1: Clock */
      .ed-studio-clock {
        width: 96px;
        height: 96px;
        color: var(--panel-hi);
      }
      .ed-studio-clock svg {
        width: 100%;
        height: 100%;
        display: block;
      }
      .ed-studio-clock .clock-ring {
        fill: none;
        stroke: rgba(242, 239, 230, 0.2);
        stroke-width: 2;
      }
      .ed-studio-clock .clock-arc {
        fill: none;
        stroke: currentColor;
        stroke-width: 3;
        stroke-linecap: round;
        stroke-dasharray: 264;
        stroke-dashoffset: 264;
        animation: clockFill 3.5s cubic-bezier(0.3, 0.1, 0.3, 1) infinite;
        transform: rotate(-90deg);
        transform-origin: center;
      }
      @keyframes clockFill {
        0% {
          stroke-dashoffset: 264;
        }
        50%,
        65% {
          stroke-dashoffset: 70;
        }
        85%,
        100% {
          stroke-dashoffset: 264;
        }
      }
      .ed-studio-clock .clock-hand {
        stroke: currentColor;
        stroke-width: 2;
        stroke-linecap: round;
        transform-origin: 50px 50px;
        animation: clockTick 3.5s cubic-bezier(0.3, 0.1, 0.3, 1) infinite;
      }
      @keyframes clockTick {
        0%,
        10% {
          transform: rotate(0);
        }
        50%,
        65% {
          transform: rotate(270deg);
        }
        85%,
        100% {
          transform: rotate(360deg);
        }
      }
      .ed-studio-clock .clock-text {
        font-family: var(--mono);
        font-size: 11px;
        fill: var(--panel-hi);
        font-weight: 600;
        letter-spacing: 1px;
      }

      /* Panel 2: Bars */
      .ed-studio-bars {
        display: flex;
        align-items: flex-end;
        gap: 8px;
        height: 96px;
        padding-top: 8px;
      }
      .sp-bar {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 6px;
        align-items: center;
        min-width: 0;
      }
      .sp-bar span {
        display: block;
        width: 100%;
        background: var(--panel-hi);
        border-radius: 3px 3px 0 0;
        transform: scaleY(0);
        transform-origin: bottom;
        animation: spBarGrow 1s cubic-bezier(0.3, 0.1, 0.3, 1) forwards;
      }
      .sp-bar:nth-child(1) span {
        animation-delay: 0.1s;
      }
      .sp-bar:nth-child(2) span {
        animation-delay: 0.3s;
      }
      .sp-bar:nth-child(3) span {
        animation-delay: 0.5s;
      }
      .sp-bar:nth-child(4) span {
        animation-delay: 0.7s;
        background: rgba(242, 239, 230, 0.2);
      }
      @keyframes spBarGrow {
        to {
          transform: scaleY(1);
        }
      }
      .sp-bar small {
        font-family: var(--mono);
        font-size: 9px;
        letter-spacing: 0.06em;
        color: rgba(242, 239, 230, 0.55);
        text-transform: uppercase;
      }
      .sp-bar.new span {
        background: transparent;
        border: 1px dashed rgba(242, 239, 230, 0.3);
      }
      .sp-bar.new small {
        color: var(--panel-hi);
      }

      /* Panel 3: Wave */
      .ed-studio-wave {
        height: 96px;
        display: flex;
        align-items: center;
      }
      .ed-studio-wave svg {
        width: 100%;
        height: 100%;
        display: block;
      }
      .ed-studio-wave .wave-path {
        fill: none;
        stroke: var(--panel-hi);
        stroke-width: 2.5;
        stroke-linecap: round;
        stroke-dasharray: 420;
        stroke-dashoffset: 420;
        animation: waveDraw 4s cubic-bezier(0.3, 0.1, 0.3, 1) infinite;
      }
      @keyframes waveDraw {
        0% {
          stroke-dashoffset: 420;
        }
        55%,
        75% {
          stroke-dashoffset: 0;
        }
        95%,
        100% {
          stroke-dashoffset: -420;
        }
      }
      .ed-studio-wave .wave-dot {
        fill: var(--panel-hi);
        animation: waveDot 4s cubic-bezier(0.3, 0.1, 0.3, 1) infinite;
      }
      @keyframes waveDot {
        0%,
        55% {
          opacity: 0;
          r: 3;
        }
        60%,
        75% {
          opacity: 1;
          r: 5;
          filter: drop-shadow(0 0 8px rgba(232, 223, 184, 0.6));
        }
        95%,
        100% {
          opacity: 0;
          r: 2;
        }
      }

      /* Panel 4: Availability heatmap */
      .ed-studio-heat {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        grid-template-rows: repeat(3, 1fr);
        gap: 4px;
        height: 96px;
      }
      .ed-studio-heat .cell {
        background: rgba(242, 239, 230, 0.08);
        border-radius: 3px;
        border: 1px solid rgba(242, 239, 230, 0.04);
        transition: background 0.3s;
      }
      .ed-studio-heat .cell.l1 {
        background: rgba(232, 223, 184, 0.22);
      }
      .ed-studio-heat .cell.l2 {
        background: rgba(232, 223, 184, 0.5);
      }
      .ed-studio-heat .cell.l3 {
        background: rgba(232, 223, 184, 0.82);
      }
      .ed-studio-heat .cell.l4 {
        background: var(--panel-hi);
        box-shadow: 0 0 8px rgba(232, 223, 184, 0.45);
      }

      .ed-studio-foot {
        margin-top: clamp(24px, 3vw, 40px);
        padding-top: 24px;
        border-top: 1px solid rgba(242, 239, 230, 0.15);
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 14px;
        flex-wrap: wrap;
        position: relative;
        z-index: 2;
      }
      .ed-studio-foot-label {
        font-family: var(--mono);
        font-size: 10px;
        letter-spacing: 0.08em;
        color: rgba(242, 239, 230, 0.45);
        text-transform: uppercase;
      }

      /* ============================================================
   PORTFOLIO PAGE — editorial case study index
============================================================ */

      /* Portfolio filters — pill bar */
      .ed-pf-filters {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        margin: 0 0 40px;
        padding: 16px 0;
        border-top: 1px solid var(--border);
        border-bottom: 1px solid var(--border);
        align-items: center;
      }
      .ed-pf-filters-label {
        font-family: var(--mono);
        font-size: 10px;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--muted);
        margin-right: 10px;
        font-weight: 500;
      }
      .ed-pf-filter {
        padding: 8px 16px;
        border-radius: 999px;
        font-family: var(--mono);
        font-size: 11px;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--ink-3);
        background: transparent;
        border: 1px solid var(--border-2);
        cursor: pointer;
        transition: all 0.25s ease;
        font-weight: 500;
      }
      .ed-pf-filter:hover {
        border-color: var(--ink);
        color: var(--ink);
      }
      .ed-pf-filter.active {
        background: var(--ink);
        color: var(--bg);
        border-color: var(--ink);
      }
      .ed-pf-filter.active:hover {
        background: var(--brand);
        border-color: var(--brand);
      }

      /* Portfolio korzysta bezpośrednio z układu kafelków strony głównej. */
      .ed-pf-grid {
        display: block;
      }
      /* Staggered reveal for tiles — display:none żeby grid się przepakowywał */
      .ed-pf-grid .ed-cs-tile.filtered-out {
        display: none;
      }
      .ed-pf-grid .ed-cs-tile.filtered-in {
        animation: edPfFadeIn 0.45s cubic-bezier(0.2, 0.8, 0.3, 1) both;
      }
      @keyframes edPfFadeIn {
        from {
          opacity: 0;
          transform: translateY(10px);
        }
        to {
          opacity: 1;
          transform: none;
        }
      }

      /* Portfolio summary ribbon */

      /* ============================================================
   O MNIE PAGE — "Dossier" editorial portrait
============================================================ */

      /* Hero */
      .ed-bio-hero {
        padding: 140px 0 60px;
        position: relative;
        overflow: hidden;
      }
      .ed-bio-hero-meta {
        display: flex;
        justify-content: space-between;
        gap: 24px;
        flex-wrap: wrap;
        margin-bottom: 40px;
        font-family: var(--mono);
        font-size: 11px;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--muted);
      }
      .ed-bio-hero-meta strong {
        color: var(--brand);
        font-weight: 500;
      }
      .ed-bio-hero-grid {
        display: grid;
        grid-template-columns: minmax(0, 1.35fr) minmax(260px, 420px);
        gap: clamp(28px, 4vw, 64px);
        align-items: start;
      }
      @media (max-width: 900px) {
        .ed-bio-hero-grid {
          grid-template-columns: 1fr;
        }
      }

      .ed-bio-hero-left h1 {
        font-family: var(--display);
        font-size: clamp(56px, 10vw, 180px);
        font-weight: 500;
        letter-spacing: -0.055em;
        line-height: 0.86;
        color: var(--ink);
        margin: 0 0 24px;
        text-wrap: balance;
        font-variation-settings: "opsz" 144;
      }
      .ed-bio-hero-left h1 .ital {
        color: var(--brand);
        font-weight: 600;
      }
      .ed-bio-hero-role {
        display: inline-flex;
        align-items: center;
        gap: 12px;
        font-family: var(--mono);
        font-size: 12px;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--brand);
        margin-bottom: 24px;
        font-weight: 500;
      }
      .ed-bio-hero-role::before {
        content: "";
        width: 24px;
        height: 1px;
        background: var(--brand);
      }
      .ed-bio-hero-lead {
        font-size: 18px;
        line-height: 1.5;
        color: var(--ink-3);
        max-width: 52ch;
        margin: 0 0 28px;
        text-wrap: pretty;
      }
      .ed-bio-hero-lead strong {
        color: var(--ink);
        font-weight: 500;
      }
      .ed-bio-hero-pills {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
      }
      .ed-bio-pill {
        padding: 6px 14px;
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: 999px;
        font-family: var(--mono);
        font-size: 11px;
        letter-spacing: 0.05em;
        color: var(--ink-2);
        font-weight: 500;
        transition: all 0.35s;
      }
      .ed-bio-pill:hover {
        border-color: var(--brand);
        color: var(--brand);
        background: var(--bg);
      }
      .ed-bio-pill.accent {
        background: var(--brand);
        color: var(--bg);
        border-color: var(--brand);
      }

      /* Abstract portrait SVG */
      .ed-bio-portrait {
        position: relative;
        aspect-ratio: 1/1;
        max-width: 420px;
        justify-self: center;
      }
      .ed-bio-portrait svg {
        width: 100%;
        height: 100%;
        display: block;
        overflow: visible;
      }
      .ed-bio-portrait-outer {
        animation: edPortraitRot 28s linear infinite;
        transform-origin: center;
      }
      .ed-bio-portrait-inner {
        animation: edPortraitRot 18s linear infinite reverse;
        transform-origin: center;
      }
      @keyframes edPortraitRot {
        to {
          transform: rotate(360deg);
        }
      }
      .ed-bio-portrait-core {
        fill: var(--brand);
      }
      .ed-bio-portrait-mark {
        fill: var(--brand-light);
      }
      .ed-bio-portrait-ring {
        fill: none;
        stroke: var(--brand);
        stroke-width: 1;
        opacity: 0.35;
      }
      .ed-bio-portrait-ring.dashed {
        stroke-dasharray: 3 5;
      }
      .ed-bio-portrait-arc {
        fill: none;
        stroke: var(--brand);
        stroke-width: 2;
        stroke-linecap: round;
      }
      .ed-bio-portrait-dots circle {
        fill: var(--brand);
        animation: edBioDotPulse 3s ease-in-out infinite;
      }
      .ed-bio-portrait-dots circle:nth-child(1) {
        animation-delay: 0s;
      }
      .ed-bio-portrait-dots circle:nth-child(2) {
        animation-delay: 0.6s;
      }
      .ed-bio-portrait-dots circle:nth-child(3) {
        animation-delay: 1.2s;
      }
      .ed-bio-portrait-dots circle:nth-child(4) {
        animation-delay: 1.8s;
      }
      @keyframes edBioDotPulse {
        0%,
        100% {
          opacity: 0.3;
        }
        50% {
          opacity: 1;
        }
      }
      .ed-bio-portrait-letter {
        font-family: var(--display);
        font-size: 110px;
        font-weight: 500;
        fill: var(--bg);
        text-anchor: middle;
      }

      /* Impact stats strip */
      .ed-bio-stats {
        margin: clamp(40px, 6vw, 80px) calc(-1 * var(--px)) 0;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        border-top: 1px solid var(--border);
        border-bottom: 1px solid var(--border);
        background: var(--surface-2);
      }
      @media (max-width: 760px) {
        .ed-bio-stats {
          grid-template-columns: repeat(2, 1fr);
        }
      }
      .ed-bio-stat {
        padding: 32px clamp(16px, 2vw, 32px);
        border-left: 1px solid var(--border);
        position: relative;
        transition: background 0.35s ease;
      }
      .ed-bio-stat:first-child {
        border-left: none;
      }
      .ed-bio-stat:hover {
        background: var(--bg);
      }
      .ed-bio-stat:hover .ed-bio-stat-v {
        color: var(--brand);
      }
      @media (max-width: 760px) {
        .ed-bio-stat:nth-child(2) {
          border-left: none;
        }
        .ed-bio-stat:nth-child(3),
        .ed-bio-stat:nth-child(4) {
          border-top: 1px solid var(--border);
        }
      }
      .ed-bio-stat-v {
        font-family: var(--display);
        font-size: clamp(36px, 4.6vw, 64px);
        font-weight: 500;
        letter-spacing: -0.04em;
        line-height: 0.9;
        color: var(--ink);
        font-variant-numeric: tabular-nums;
        transition: color 0.35s;
      }
      .ed-bio-stat-v .unit {
        font-size: 0.45em;
        color: var(--brand);
        font-weight: 500;
        margin-left: -2px;
      }
      .ed-bio-stat-l {
        font-family: var(--mono);
        font-size: 10px;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: var(--muted);
        margin-top: 10px;
        line-height: 1.4;
        max-width: 20ch;
      }

      /* Manifesto quote */
      .ed-bio-manifest {
        padding: clamp(80px, 10vw, 140px) 0;
        border-top: 1px solid var(--border);
        position: relative;
        overflow: hidden;
      }
      .ed-bio-manifest::before {
        content: '"';
        position: absolute;
        top: -40px;
        left: clamp(20px, 3vw, 60px);
        font-family: var(--display);
        font-size: clamp(200px, 22vw, 400px);
        line-height: 1;
        color: var(--brand-soft);
        opacity: 0.6;
        pointer-events: none;
        font-weight: 500;
      }
      .ed-bio-manifest-inner {
        position: relative;
        z-index: 1;
        max-width: 980px;
        margin: 0 auto;
      }
      .ed-bio-manifest-label {
        font-family: var(--mono);
        font-size: 11px;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--brand);
        margin-bottom: 28px;
        display: inline-flex;
        align-items: center;
        gap: 10px;
        font-weight: 500;
      }
      .ed-bio-manifest-label::before {
        content: "";
        width: 24px;
        height: 1px;
        background: var(--brand);
      }
      .ed-bio-manifest blockquote {
        font-family: var(--display);
        font-size: clamp(32px, 4.8vw, 72px);
        font-weight: 500;
        letter-spacing: -0.035em;
        line-height: 1.05;
        color: var(--ink);
        margin: 0 0 24px;
        text-wrap: balance;
      }
      .ed-bio-manifest blockquote .ital {
        color: var(--brand);
        font-weight: 600;
      }
      .ed-bio-manifest cite {
        font-style: normal;
        font-family: var(--mono);
        font-size: 12px;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--muted);
        display: flex;
        align-items: center;
        gap: 12px;
      }
      .ed-bio-manifest cite::before {
        content: "";
        width: 32px;
        height: 1px;
        background: var(--muted);
      }

      /* Career journey — MAP with pins */
      .ed-bio-story {
        padding: clamp(64px, 9vw, 128px) 0;
        border-top: 1px solid var(--border);
        overflow: hidden;
      }
      .ed-bio-story-head-row {
        display: grid;
        grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
        gap: clamp(32px, 5vw, 80px);
        align-items: end;
        margin-bottom: clamp(32px, 4vw, 56px);
      }
      @media (max-width: 760px) {
        .ed-bio-story-head-row {
          grid-template-columns: 1fr;
          gap: 20px;
        }
      }
      .ed-bio-story-num {
        font-family: var(--mono);
        font-size: 11px;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--brand);
        margin-bottom: 16px;
        display: block;
        font-weight: 500;
      }
      .ed-bio-story-h2 {
        font-family: var(--display);
        font-size: clamp(34px, 4.2vw, 60px);
        font-weight: 500;
        letter-spacing: -0.035em;
        line-height: 0.95;
        color: var(--ink);
        margin: 0;
        text-wrap: balance;
      }
      .ed-bio-story-h2 .ital {
        color: var(--brand);
        font-weight: 600;
      }
      .ed-bio-story-intro {
        font-size: 15px;
        line-height: 1.55;
        color: var(--muted);
        margin: 0;
        max-width: 48ch;
      }

      /* The map surface */
      .ed-map {
        position: relative;
        padding: clamp(24px, 3vw, 48px);
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: 24px;
        overflow: hidden;
        min-height: 820px;
      }
      @media (max-width: 760px) {
        .ed-map {
          padding: 20px 16px;
          min-height: auto;
          border-radius: 18px;
        }
      }

      /* Map grid decoration (like folded paper map) */
      .ed-map::before {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        background-image:
          linear-gradient(
            to right,
            rgba(13, 26, 19, 0.035) 1px,
            transparent 1px
          ),
          linear-gradient(
            to bottom,
            rgba(13, 26, 19, 0.035) 1px,
            transparent 1px
          );
        background-size: 32px 32px;
        mask-image: radial-gradient(
          ellipse at center,
          #000 40%,
          transparent 90%
        );
        -webkit-mask-image: radial-gradient(
          ellipse at center,
          #000 40%,
          transparent 90%
        );
      }
      /* Compass rose in corner */
      .ed-map-compass {
        position: absolute;
        top: 20px;
        right: 20px;
        width: 56px;
        height: 56px;
        opacity: 0.45;
        pointer-events: none;
        z-index: 1;
      }
      .ed-map-compass svg {
        width: 100%;
        height: 100%;
      }
      .ed-map-compass .ring {
        fill: none;
        stroke: var(--ink-3);
        stroke-width: 1;
      }
      .ed-map-compass .needle-n {
        fill: var(--brand);
      }
      .ed-map-compass .needle-s {
        fill: var(--ink-3);
      }
      .ed-map-compass .compass-txt {
        font-family: var(--mono);
        font-size: 10px;
        font-weight: 600;
        fill: var(--ink-3);
        letter-spacing: 1px;
      }

      /* The winding road */
      .ed-map-road {
        position: absolute;
        inset: clamp(40px, 5vw, 72px) clamp(24px, 3vw, 48px);
        pointer-events: none;
        z-index: 0;
      }
      .ed-map-road svg {
        width: 100%;
        height: 100%;
        display: block;
        overflow: visible;
      }
      .ed-map-road .road-trail {
        fill: none;
        stroke: var(--border-2);
        stroke-width: 3;
        stroke-linecap: round;
        stroke-dasharray: 7 10;
        opacity: 0.7;
      }
      .ed-map-road .road-progress {
        fill: none;
        stroke: var(--brand);
        stroke-width: 3;
        stroke-linecap: round;
        stroke-dasharray: 2000;
        stroke-dashoffset: 2000;
        transition: stroke-dashoffset 0.3s linear;
      }

      /* Pin nodes */
      .ed-map-pins {
        position: relative;
        z-index: 2;
        min-height: 720px;
      }
      @media (max-width: 760px) {
        .ed-map-pins {
          min-height: auto;
          display: flex;
          flex-direction: column;
          gap: 18px;
          padding: 20px 0;
        }
      }

      .ed-pin {
        position: absolute;
        left: var(--x);
        top: var(--y);
        transform: translate(-50%, -50%);
        z-index: 3;
        width: clamp(200px, 22vw, 260px);
      }
      @media (max-width: 760px) {
        .ed-pin {
          position: relative;
          left: auto !important;
          top: auto !important;
          transform: none;
          width: 100%;
        }
      }
      .ed-pin-mark {
        position: absolute;
        left: 50%;
        top: 0;
        transform: translate(-50%, -50%);
        width: 36px;
        height: 36px;
        z-index: 2;
      }
      @media (max-width: 760px) {
        .ed-pin-mark {
          position: relative;
          transform: none;
          left: 0;
          margin-bottom: -8px;
        }
      }
      .ed-pin-mark svg {
        width: 100%;
        height: 100%;
        display: block;
        filter: drop-shadow(0 4px 8px rgba(13, 26, 19, 0.25));
      }
      .ed-pin-mark .pin-body {
        fill: var(--brand);
      }
      .ed-pin-mark .pin-dot {
        fill: var(--accent);
      }
      .ed-pin-mark .pin-ring {
        fill: none;
        stroke: var(--brand);
        stroke-width: 1.5;
        opacity: 0.35;
        animation: pinPulse 2.4s ease-in-out infinite;
      }
      @keyframes pinPulse {
        0%,
        100% {
          opacity: 0.15;
          r: 16;
        }
        50% {
          opacity: 0.45;
          r: 22;
        }
      }

      .ed-pin.peak .pin-body {
        fill: var(--dark);
      }
      .ed-pin.peak .pin-dot {
        fill: var(--panel-hi);
        r: 6;
      }
      .ed-pin.peak .pin-ring {
        stroke: var(--brand-light);
        animation: pinPulsePeak 2s ease-in-out infinite;
      }
      @keyframes pinPulsePeak {
        0%,
        100% {
          opacity: 0.25;
          r: 18;
        }
        50% {
          opacity: 0.6;
          r: 26;
        }
      }

      .ed-pin-card {
        margin-top: 24px;
        padding: 16px 18px;
        background: var(--bg);
        border: 1px solid var(--border);
        border-radius: 14px;
        position: relative;
        transition: all 0.35s cubic-bezier(0.2, 0.8, 0.3, 1);
        cursor: pointer;
      }
      @media (max-width: 760px) {
        .ed-pin-card {
          margin-top: 14px;
        }
      }
      .ed-pin:hover .ed-pin-card {
        border-color: var(--brand);
        box-shadow: 0 12px 28px rgba(13, 26, 19, 0.12);
        transform: translateY(-2px);
      }
      .ed-pin-year {
        font-family: var(--mono);
        font-size: 10px;
        color: var(--brand);
        letter-spacing: 0.14em;
        text-transform: uppercase;
        font-weight: 600;
        display: block;
        margin-bottom: 6px;
      }
      .ed-pin.peak .ed-pin-year {
        color: var(--panel-hi);
      }
      .ed-pin.peak .ed-pin-card {
        background: var(--dark);
        color: var(--bg);
        border-color: var(--dark);
      }
      .ed-pin.peak:hover .ed-pin-card {
        border-color: var(--brand-light);
        box-shadow: 0 12px 28px rgba(31, 122, 77, 0.25);
      }
      .ed-pin-title {
        font-family: var(--display);
        font-size: 17px;
        font-weight: 500;
        letter-spacing: -0.02em;
        line-height: 1.1;
        color: var(--ink);
        margin: 0 0 6px;
        text-wrap: balance;
      }
      .ed-pin.peak .ed-pin-title {
        color: var(--bg);
      }
      .ed-pin-title .ital {
        color: var(--brand);
        font-weight: 600;
      }
      .ed-pin.peak .ed-pin-title .ital {
        color: var(--panel-hi);
      }
      .ed-pin-desc {
        font-size: 12.5px;
        line-height: 1.5;
        color: var(--muted);
        margin: 0;
      }
      .ed-pin.peak .ed-pin-desc {
        color: rgba(242, 239, 230, 0.7);
      }

      /* Stack — MIND-MAP (Obsidian-style) */
      .ed-bio-stack {
        padding: clamp(64px, 9vw, 128px) 0;
        border-top: 1px solid var(--border);
        background: var(--surface-2);
        overflow: hidden;
      }

      /* ============================================================
   HOME STACK — mindmap technologii (wersja wow na home)
============================================================ */
      .ed-home-stack {
        position: relative;
        padding: clamp(80px, 11vw, 152px) 0;
        border-top: 1px solid var(--border);
        background: linear-gradient(
          180deg,
          var(--bg) 0%,
          var(--surface-2) 50%,
          var(--bg) 100%
        );
        overflow: hidden;
      }
      .ed-stack-bg {
        position: absolute;
        inset: 0;
        pointer-events: none;
        z-index: 1;
        overflow: hidden;
      }
      .ed-stack-bg::before {
        content: "";
        position: absolute;
        inset: -20% -10%;
        background-image:
          radial-gradient(
            circle at 20% 30%,
            rgba(31, 122, 77, 0.09),
            transparent 38%
          ),
          radial-gradient(
            circle at 80% 20%,
            rgba(92, 163, 128, 0.08),
            transparent 40%
          ),
          radial-gradient(
            circle at 50% 85%,
            rgba(31, 122, 77, 0.07),
            transparent 45%
          );
        animation: stackBgDrift 28s ease-in-out infinite alternate;
      }
      .ed-stack-bg::after {
        content: "";
        position: absolute;
        inset: 0;
        background-image: radial-gradient(
          circle,
          rgba(13, 26, 19, 0.12) 1px,
          transparent 1.5px
        );
        background-size: 28px 28px;
        background-position: 0 0;
        opacity: 0.25;
        mask-image: radial-gradient(
          ellipse at center,
          #000 35%,
          transparent 78%
        );
        -webkit-mask-image: radial-gradient(
          ellipse at center,
          #000 35%,
          transparent 78%
        );
      }
      @keyframes stackBgDrift {
        0% {
          transform: translate(0, 0);
        }
        100% {
          transform: translate(-2%, 1.5%);
        }
      }

      /* Grid klastrów — lekko większy gap, auto-fit */
      .ed-mm.ed-mm-wow {
        margin-top: clamp(40px, 6vw, 72px);
        gap: clamp(22px, 3vw, 44px);
      }

      /* Klaster — karta z bg, subtelny frame, hover glow */
      .ed-mm-wow .ed-mm-cluster {
        min-height: 340px;
        aspect-ratio: unset;
        padding: 20px;
        background: linear-gradient(
          180deg,
          var(--surface) 0%,
          rgba(251, 249, 242, 0.85) 100%
        );
        border: 1px solid var(--border);
        border-radius: 22px;
        box-shadow:
          0 2px 4px rgba(13, 26, 19, 0.02),
          0 1px 2px rgba(13, 26, 19, 0.04);
        transition:
          border-color 0.4s,
          box-shadow 0.4s,
          transform 0.4s cubic-bezier(0.2, 0.8, 0.3, 1);
        overflow: hidden;
      }
      .ed-mm-wow .ed-mm-cluster:hover {
        border-color: var(--brand-light);
        box-shadow:
          0 18px 40px -14px rgba(31, 122, 77, 0.22),
          0 6px 14px -6px rgba(13, 26, 19, 0.08);
        transform: translateY(-3px);
      }
      .ed-mm-wow .ed-mm-cluster::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        pointer-events: none;
        background: radial-gradient(
          circle at 50% 50%,
          rgba(92, 163, 128, 0.12),
          transparent 68%
        );
        opacity: 0;
        transition: opacity 0.4s;
      }
      .ed-mm-wow .ed-mm-cluster:hover::before {
        opacity: 1;
      }

      /* Hub — gradient brand, większy, z numerem */
      .ed-mm-wow .ed-mm-hub {
        padding: 14px 22px 14px 14px;
        background: linear-gradient(
          135deg,
          var(--brand) 0%,
          var(--brand-hover) 60%,
          var(--dark) 100%
        );
        color: var(--bg);
        font-family: var(--display);
        font-size: clamp(14px, 1.1vw, 16px);
        font-weight: 500;
        letter-spacing: -0.015em;
        text-transform: none;
        box-shadow:
          0 8px 22px -6px rgba(26, 71, 50, 0.4),
          inset 0 1px 0 rgba(255, 255, 255, 0.15);
        display: inline-flex;
        align-items: center;
        gap: 10px;
      }
      .ed-mm-wow .ed-mm-hub-num {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 26px;
        height: 26px;
        border-radius: 50%;
        background: var(--panel-hi);
        color: var(--dark);
        font-family: var(--mono);
        font-size: 10px;
        font-weight: 600;
        letter-spacing: 0.02em;
        flex-shrink: 0;
      }
      .ed-mm-wow .ed-mm-hub::before {
        display: none;
      } /* wyłącz oryginalną kropkę, numer zastępuje */
      .ed-mm-wow .ed-mm-cluster:hover .ed-mm-hub {
        transform: translate(-50%, -50%) scale(1.08);
      }

      /* Paths — grubsze, subtelnie animowane */
      .ed-mm-wow .ed-mm-cluster-svg path {
        stroke: var(--border-2);
        stroke-width: 1.2;
        opacity: 0.7;
        stroke-dasharray: 3 4;
        animation: edMmDashFlow 18s linear infinite;
      }
      @keyframes edMmDashFlow {
        to {
          stroke-dashoffset: -140;
        }
      }
      .ed-mm-wow .ed-mm-cluster:hover .ed-mm-cluster-svg path {
        stroke: var(--brand);
        opacity: 0.9;
        stroke-width: 1.6;
      }

      /* Leaves — większe, lepszy hover */
      .ed-mm-wow .ed-mm-leaf {
        padding: 7px 12px;
        font-size: 11.5px;
        font-weight: 500;
        background: var(--bg);
        border: 1px solid var(--border);
        box-shadow: 0 1px 2px rgba(13, 26, 19, 0.04);
        letter-spacing: -0.005em;
        color: var(--ink-2);
        max-width: calc(60% - 6px);
        text-overflow: ellipsis;
        overflow: hidden;
      }
      .ed-mm-wow .ed-mm-leaf:hover,
      .ed-mm-wow .ed-mm-leaf.active {
        background: var(--brand);
        color: var(--bg);
        border-color: var(--brand);
        box-shadow:
          0 6px 16px -4px rgba(31, 122, 77, 0.38),
          0 2px 6px -2px rgba(31, 122, 77, 0.24);
      }

      /* Popup na home — trochę większy by uczestniczyć w "wow" */
      .ed-mm-wow .ed-mm-info {
        padding: 20px 22px 18px;
        font-size: 13.5px;
        line-height: 1.55;
        border-radius: 16px;
        background: linear-gradient(180deg, var(--dark) 0%, var(--dark-2) 100%);
        box-shadow: 0 24px 50px -14px rgba(26, 71, 50, 0.5);
      }
      .ed-mm-wow .ed-mm-info .ed-mm-info-name {
        font-size: 11px;
        letter-spacing: 0.14em;
      }
      .ed-mm-wow .ed-mm-info-close {
        width: 26px;
        height: 26px;
        font-size: 15px;
      }

      /* Foot caption */
      .ed-stack-foot {
        margin-top: clamp(32px, 4vw, 56px);
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 16px;
        flex-wrap: wrap;
        padding-top: 20px;
        border-top: 1px solid var(--border);
        font-family: var(--mono);
        font-size: 11px;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--muted);
      }
      .ed-stack-foot-label {
        color: var(--muted-2);
      }
      .ed-stack-foot-hint {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        color: var(--brand);
        font-weight: 500;
      }
      .ed-stack-foot-hint::before {
        content: "";
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--brand);
        animation: pulse 2.2s infinite;
      }

      .ed-mm {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: clamp(16px, 3vw, 40px);
        margin-top: 48px;
      }
      @media (max-width: 900px) {
        .ed-mm {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }
      }
      @media (max-width: 560px) {
        .ed-mm {
          grid-template-columns: 1fr;
        }
      }

      .ed-mm-cluster {
        position: relative;
        aspect-ratio: 5/4;
        min-height: 280px;
        padding: 8px;
        transition: opacity 0.3s;
      }
      .ed-mm-cluster-svg {
        position: absolute;
        inset: 0;
        pointer-events: none;
        z-index: 0;
        width: 100%;
        height: 100%;
        overflow: visible;
      }
      .ed-mm-cluster-svg path {
        fill: none;
        stroke: var(--border-2);
        stroke-width: 1;
        stroke-linecap: round;
        opacity: 0.65;
        transition:
          stroke 0.35s,
          opacity 0.35s,
          stroke-width 0.35s;
      }
      .ed-mm-cluster:hover .ed-mm-cluster-svg path {
        stroke: var(--brand);
        opacity: 0.85;
        stroke-width: 1.3;
      }

      .ed-mm-hub {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        padding: 12px 18px;
        background: var(--dark);
        color: var(--panel-hi);
        border-radius: 999px;
        font-family: var(--mono);
        font-size: 11px;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        font-weight: 500;
        z-index: 3;
        display: inline-flex;
        align-items: center;
        gap: 10px;
        white-space: nowrap;
        transition:
          transform 0.4s cubic-bezier(0.2, 0.9, 0.3, 1.2),
          background 0.35s,
          color 0.35s,
          box-shadow 0.4s;
        box-shadow: 0 4px 16px rgba(26, 71, 50, 0.24);
      }
      .ed-mm-hub::before {
        content: "";
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: var(--panel-hi);
        box-shadow: 0 0 8px rgba(232, 223, 184, 0.55);
        animation: pulse 2.2s infinite;
      }
      .ed-mm-cluster:hover .ed-mm-hub {
        transform: translate(-50%, -50%) scale(1.06);
        box-shadow: 0 8px 24px rgba(31, 122, 77, 0.35);
      }

      .ed-mm-leaf {
        position: absolute;
        left: var(--x);
        top: var(--y);
        transform: translate(-50%, -50%);
        padding: 6px 12px;
        background: var(--bg);
        border: 1px solid var(--border);
        border-radius: 999px;
        font-size: 12px;
        color: var(--ink-2);
        font-weight: 500;
        white-space: nowrap;
        z-index: 2;
        transition:
          background 0.25s,
          color 0.25s,
          border-color 0.25s,
          box-shadow 0.3s;
        /* Static labels stay sharp and avoid continuous layout repaints. */
        animation: none;
        cursor: default;
        letter-spacing: -0.005em;
      }
      .ed-mm-leaf {
        cursor: pointer;
      }
      .ed-mm-leaf:hover,
      .ed-mm-leaf.active {
        background: var(--brand);
        color: var(--bg);
        border-color: var(--brand);
        z-index: 4;
        box-shadow: 0 4px 12px rgba(31, 122, 77, 0.25);
        animation-play-state: paused;
      }
      .ed-mm-leaf.active {
        z-index: 5;
        transform: translate(-50%, -50%) scale(1.06);
      }

      /* Podświetlony path do aktywnego leaf-a */
      .ed-mm-cluster-svg path.active {
        stroke: var(--brand);
        stroke-width: 2;
        opacity: 1;
        animation: mmPathPulse 1.8s ease-in-out infinite;
      }
      @keyframes mmPathPulse {
        0%,
        100% {
          stroke-width: 2;
          opacity: 0.9;
        }
        50% {
          stroke-width: 2.6;
          opacity: 1;
        }
      }

      /* Popup z opisem technologii — pojawia się NAD klastrem, na całości, by zawsze był dostępny */
      .ed-mm-info {
        position: absolute;
        inset: 12px;
        padding: 18px 20px 16px;
        border-radius: 14px;
        background: var(--dark);
        color: var(--bg);
        font-size: 13px;
        line-height: 1.5;
        letter-spacing: -0.005em;
        box-shadow: 0 18px 40px -12px rgba(26, 71, 50, 0.45);
        opacity: 0;
        transform: scale(0.96);
        pointer-events: none;
        transition:
          opacity 0.25s,
          transform 0.3s cubic-bezier(0.2, 0.9, 0.3, 1.2);
        z-index: 20;
        text-wrap: pretty;
        cursor: pointer;
        user-select: none;
        display: flex;
        flex-direction: column;
        justify-content: center;
      }
      .ed-mm-info strong {
        color: var(--panel-hi);
        font-weight: 600;
      }
      .ed-mm-info .ed-mm-info-name {
        display: block;
        font-family: var(--mono);
        font-size: 10px;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--panel-hi);
        margin-bottom: 8px;
        font-weight: 500;
      }
      .ed-mm-info-close {
        position: absolute;
        top: 8px;
        right: 10px;
        width: 24px;
        height: 24px;
        border-radius: 50%;
        background: rgba(242, 239, 230, 0.12);
        color: var(--bg);
        border: none;
        cursor: pointer;
        font-size: 14px;
        line-height: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: background 0.2s;
        font-family: inherit;
      }
      .ed-mm-info-close:hover {
        background: rgba(242, 239, 230, 0.22);
      }
      .ed-mm-info-hint {
        display: block;
        margin-top: 10px;
        font-family: var(--mono);
        font-size: 9.5px;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: rgba(242, 239, 230, 0.45);
        font-weight: 500;
      }
      .ed-mm-cluster.has-info .ed-mm-info {
        opacity: 1;
        transform: scale(1);
        pointer-events: auto;
      }
      .ed-mm-cluster.has-info .ed-mm-hub,
      .ed-mm-cluster.has-info .ed-mm-leaf:not(.active) {
        opacity: 0.2;
        pointer-events: none;
      }
      /* One big mind-map for rules */
      .ed-mm-big {
        position: relative;
        aspect-ratio: 16/10;
        max-width: 1080px;
        margin: 48px auto 0;
        min-height: 480px;
        padding: 20px;
      }
      @media (max-width: 760px) {
        .ed-mm-big {
          aspect-ratio: 4/5;
          min-height: 640px;
        }
      }
      .ed-mm-big-svg {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
        overflow: visible;
        z-index: 0;
      }
      .ed-mm-big-svg path {
        fill: none;
        stroke: var(--border-2);
        stroke-width: 1;
        stroke-linecap: round;
        opacity: 0.7;
        transition: all 0.4s;
      }
      .ed-mm-big:hover .ed-mm-big-svg path {
        stroke: var(--brand);
        opacity: 0.85;
        stroke-width: 1.3;
      }
      .ed-mm-big-hub {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        padding: 18px 26px;
        background: var(--dark);
        color: var(--panel-hi);
        border-radius: 999px;
        font-family: var(--display);
        font-weight: 500;
        font-size: clamp(18px, 2vw, 24px);
        letter-spacing: -0.015em;
        z-index: 3;
        box-shadow: 0 8px 32px rgba(26, 71, 50, 0.3);
        display: inline-flex;
        align-items: center;
        gap: 12px;
        white-space: nowrap;
      }
      .ed-mm-big-hub::before {
        content: "✦";
        color: var(--panel-hi);
        font-family: var(--serif);
        font-style: italic;
        font-size: 0.85em;
      }
      .ed-mm-rule {
        position: absolute;
        left: var(--x);
        top: var(--y);
        transform: translate(-50%, -50%);
        width: clamp(200px, 20vw, 260px);
        padding: 16px 18px;
        background: var(--bg);
        border: 1px solid var(--border);
        border-radius: 16px;
        z-index: 2;
        transition: all 0.35s ease;
        /* Keep rule cards and their text crisp and inexpensive to render. */
        animation: none;
      }
      .ed-mm-rule {
        cursor: pointer;
      }
      .ed-mm-rule:hover,
      .ed-mm-rule.active {
        border-color: var(--brand);
        background: var(--surface);
        box-shadow: 0 10px 28px rgba(13, 26, 19, 0.1);
        z-index: 4;
        animation-play-state: paused;
      }
      .ed-mm-rule.active {
        border-color: var(--brand);
        background: var(--brand-soft);
        box-shadow: 0 14px 32px rgba(31, 122, 77, 0.22);
        z-index: 5;
        transform: translate(-50%, -50%) scale(1.03);
      }
      .ed-mm-rule-long {
        display: none;
        margin-top: 8px;
        font-size: 12.5px;
        line-height: 1.55;
        color: var(--ink-3);
        padding-top: 8px;
        border-top: 1px solid var(--brand-light);
      }
      .ed-mm-rule.active .ed-mm-rule-long {
        display: block;
      }
      .ed-mm-big-svg path.active {
        stroke: var(--brand);
        stroke-width: 2;
        opacity: 1;
        animation: mmPathPulse 1.8s ease-in-out infinite;
      }
      .ed-mm-rule-num {
        font-family: var(--mono);
        font-size: 10px;
        letter-spacing: 0.12em;
        color: var(--brand);
        font-weight: 500;
        text-transform: uppercase;
        margin-bottom: 6px;
        display: block;
      }
      .ed-mm-rule-title {
        font-family: var(--display);
        font-size: 18px;
        font-weight: 500;
        letter-spacing: -0.025em;
        line-height: 1.1;
        color: var(--ink);
        margin: 0 0 6px;
      }
      .ed-mm-rule-title .ital {
        color: var(--brand);
        font-weight: 600;
      }
      .ed-mm-rule-desc {
        font-size: 12px;
        line-height: 1.5;
        color: var(--muted);
        margin: 0;
      }
      @media (max-width: 760px) {
        .ed-mm-big {
          display: flex;
          flex-direction: column;
          gap: 14px;
          padding: 0;
          aspect-ratio: unset;
        }
        .ed-mm-big-svg {
          display: none;
        }
        .ed-mm-big-hub {
          position: relative;
          top: auto;
          left: auto;
          transform: none;
          align-self: center;
          margin-bottom: 8px;
        }
        .ed-mm-rule {
          position: relative;
          left: auto;
          top: auto;
          transform: none;
          width: 100%;
          animation: none;
        }
        .ed-mm-rule:hover {
          transform: none;
        }
      }

      /* Rules — numbered editorial list */
      .ed-bio-rules {
        padding: clamp(64px, 9vw, 128px) 0;
        border-top: 1px solid var(--border);
      }
      .ed-bio-rules-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0;
        border-top: 1px solid var(--border);
      }
      @media (max-width: 760px) {
        .ed-bio-rules-grid {
          grid-template-columns: 1fr;
        }
      }
      .ed-bio-rule {
        display: flex;
        gap: 20px;
        padding: 28px 0;
        border-bottom: 1px solid var(--border);
        transition: background 0.35s ease;
        padding-right: 24px;
      }
      .ed-bio-rule:nth-child(odd) {
        padding-right: 24px;
        border-right: 1px solid var(--border);
      }
      @media (max-width: 760px) {
        .ed-bio-rule:nth-child(odd) {
          border-right: none;
          padding-right: 0;
        }
      }
      .ed-bio-rule:nth-child(even) {
        padding-left: 24px;
      }
      @media (max-width: 760px) {
        .ed-bio-rule:nth-child(even) {
          padding-left: 0;
        }
      }
      .ed-bio-rule:hover {
        background: var(--surface-2);
      }
      .ed-bio-rule-num {
        font-family: var(--display);
        font-size: 48px;
        font-weight: 500;
        letter-spacing: -0.04em;
        line-height: 0.85;
        color: var(--brand);
        min-width: 64px;
        font-variant-numeric: tabular-nums;
      }
      .ed-bio-rule-body {
        flex: 1;
        min-width: 0;
      }
      .ed-bio-rule-title {
        font-family: var(--display);
        font-size: 22px;
        font-weight: 500;
        letter-spacing: -0.025em;
        line-height: 1.1;
        color: var(--ink);
        margin: 0 0 8px;
        text-wrap: balance;
      }
      .ed-bio-rule-title .ital {
        color: var(--brand);
        font-weight: 600;
      }
      .ed-bio-rule-desc {
        font-size: 14px;
        line-height: 1.55;
        color: var(--muted);
        margin: 0;
        text-wrap: pretty;
      }

      /* Currently / Now section */
      .ed-bio-now {
        padding: clamp(64px, 9vw, 128px) 0;
        border-top: 1px solid var(--border);
        background: var(--dark);
        color: var(--bg);
        position: relative;
        overflow: hidden;
      }
      .ed-bio-now::before {
        content: "";
        position: absolute;
        width: 600px;
        height: 600px;
        border-radius: 50%;
        background: radial-gradient(
          circle,
          rgba(92, 163, 128, 0.22),
          transparent 65%
        );
        top: -240px;
        right: -180px;
        pointer-events: none;
      }
      .ed-bio-now-wrap {
        position: relative;
        z-index: 2;
      }
      .ed-bio-now-head {
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        gap: 24px;
        flex-wrap: wrap;
        margin-bottom: 40px;
        padding-bottom: 24px;
        border-bottom: 1px solid rgba(242, 239, 230, 0.15);
      }
      .ed-bio-now-label {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        font-family: var(--mono);
        font-size: 11px;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--panel-hi);
        font-weight: 500;
      }
      .ed-bio-now-label::before {
        content: "";
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--panel-hi);
        box-shadow: 0 0 10px rgba(232, 223, 184, 0.5);
        animation: pulse 2s infinite;
      }
      .ed-bio-now-head h2 {
        font-family: var(--display);
        font-size: clamp(32px, 4.5vw, 64px);
        font-weight: 500;
        letter-spacing: -0.035em;
        line-height: 0.95;
        color: var(--bg);
        margin: 16px 0 0;
        text-wrap: balance;
      }
      .ed-bio-now-head h2 .ital {
        color: var(--panel-hi);
        font-weight: 600;
      }
      .ed-bio-now-timestamp {
        font-family: var(--mono);
        font-size: 11px;
        letter-spacing: 0.06em;
        color: rgba(242, 239, 230, 0.55);
      }

      .ed-bio-now-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
        gap: 14px;
      }
      .ed-bio-now-item {
        padding: 22px;
        background: rgba(242, 239, 230, 0.04);
        border: 1px solid rgba(242, 239, 230, 0.12);
        border-radius: 14px;
        transition:
          background 0.35s ease,
          border-color 0.35s ease;
      }
      .ed-bio-now-item:hover {
        background: rgba(242, 239, 230, 0.08);
        border-color: rgba(232, 223, 184, 0.3);
      }
      .ed-bio-now-item-k {
        font-family: var(--mono);
        font-size: 10px;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--panel-hi);
        margin-bottom: 10px;
        display: block;
        font-weight: 500;
      }
      .ed-bio-now-item-v {
        font-family: var(--display);
        font-size: 20px;
        font-weight: 500;
        letter-spacing: -0.02em;
        line-height: 1.2;
        color: var(--bg);
        margin: 0 0 6px;
        text-wrap: balance;
      }
      .ed-bio-now-item-v .ital {
        color: var(--panel-hi);
        font-weight: 600;
      }
      .ed-bio-now-item-sub {
        font-size: 13px;
        line-height: 1.5;
        color: rgba(242, 239, 230, 0.65);
        margin: 0;
      }

      /* ============================================================
   OFERTA PAGE — editorial service directory + spreads
============================================================ */

      /* Page hero for oferta */
      .ed-page-hero {
        padding: 120px 0 48px;
        position: relative;
        overflow: hidden;
      }
      .ed-page-hero-meta {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 24px;
        flex-wrap: wrap;
        margin-bottom: 32px;
        font-family: var(--mono);
        font-size: 11px;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: var(--muted);
      }
      .ed-page-hero-meta strong {
        color: var(--brand);
        font-weight: 500;
      }
      .ed-page-hero h1 {
        font-family: var(--display);
        font-size: clamp(42px, 7vw, 108px);
        font-weight: 500;
        letter-spacing: -0.045em;
        line-height: 0.92;
        color: var(--ink);
        text-wrap: balance;
        margin-bottom: 28px;
        max-width: 16ch;
      }
      .ed-page-hero h1 .ital {
        color: var(--brand);
        font-weight: 600;
      }
      .ed-page-hero-sub {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: clamp(20px, 4vw, 56px);
        align-items: end;
        padding-top: 8px;
      }
      @media (max-width: 860px) {
        .ed-page-hero-sub {
          grid-template-columns: 1fr;
          gap: 20px;
        }
      }
      .ed-page-hero-desc {
        max-width: 52ch;
        font-size: 16px;
        line-height: 1.5;
        color: var(--ink-3);
        margin: 0;
      }
      .ed-page-hero-actions {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
      }

      /* Service deck — prosty katalog usług */
      .ed-deck {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 12px;
        margin: 0 0 clamp(40px, 5vw, 72px);
      }
      @media (max-width: 1100px) {
        .ed-deck {
          grid-template-columns: repeat(3, minmax(0, 1fr));
        }
      }
      @media (max-width: 720px) {
        .ed-deck {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }
      }
      @media (max-width: 480px) {
        .ed-deck {
          grid-template-columns: 1fr;
        }
      }

      .ed-deck-card {
        display: flex;
        flex-direction: column;
        gap: 14px;
        padding: 22px 20px;
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: 18px;
        cursor: pointer;
        position: relative;
        transition: border-color 0.3s ease;
        text-decoration: none;
        color: inherit;
      }
      .ed-deck-card:hover {
        border-color: var(--brand-light);
      }
      .ed-deck-card:hover .ed-deck-num {
        color: var(--brand);
      }
      .ed-deck-card:hover .ed-deck-arrow {
        background: var(--brand);
        color: var(--bg);
        border-color: var(--brand);
        transform: rotate(-45deg);
      }

      .ed-deck-top {
        display: flex;
        align-items: baseline;
        gap: 8px;
      }
      .ed-deck-num {
        font-family: var(--display);
        font-size: 32px;
        font-weight: 500;
        letter-spacing: -0.04em;
        line-height: 0.9;
        color: var(--ink);
        font-variant-numeric: tabular-nums;
        transition: color 0.3s;
      }

      .ed-deck-name {
        font-family: var(--display);
        font-size: 17px;
        font-weight: 500;
        letter-spacing: -0.02em;
        line-height: 1.15;
        color: var(--ink);
        margin: 0;
        text-wrap: balance;
      }
      .ed-deck-name .ital {
        color: var(--brand);
        font-weight: 600;
      }

      .ed-deck-price-wrap {
        margin-top: auto;
        padding-top: 2px;
      }
      .ed-deck-price-label {
        display: grid;
        gap: 4px;
        font-family: var(--mono);
        font-size: 9px;
        line-height: 1.4;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--muted);
      }
      .ed-deck-price-label strong {
        color: var(--brand);
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 0.04em;
        white-space: normal;
      }

      .ed-deck-foot {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 10px;
        margin-top: auto;
        padding-top: 6px;
      }
      .ed-deck-time {
        font-family: var(--mono);
        font-size: 10px;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--muted);
      }
      .ed-deck-arrow {
        width: 28px;
        height: 28px;
        border-radius: 50%;
        border: 1px solid var(--border-2);
        background: transparent;
        color: var(--ink);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 11px;
        transition: all 0.4s cubic-bezier(0.2, 0.9, 0.3, 1.2);
        flex-shrink: 0;
      }

      .ed-deck-card.accent-card {
        background: var(--brand);
        color: var(--bg);
        border-color: var(--brand);
      }
      .ed-deck-card.accent-card .ed-deck-num,
      .ed-deck-card.accent-card .ed-deck-name {
        color: var(--bg);
      }
      .ed-deck-card.accent-card .ed-deck-name .ital {
        color: var(--panel-hi);
      }
      .ed-deck-card.accent-card .ed-deck-price-label,
      .ed-deck-card.accent-card .ed-deck-time {
        color: rgba(242, 239, 230, 0.6);
      }
      .ed-deck-card.accent-card .ed-deck-price-label strong {
        color: var(--panel-hi);
      }
      .ed-deck-card.accent-card .ed-deck-arrow {
        color: var(--bg);
        border-color: rgba(242, 239, 230, 0.3);
      }
      .ed-deck-card.accent-card:hover {
        border-color: var(--panel-hi);
      }
      .ed-deck-card.accent-card:hover .ed-deck-arrow {
        background: var(--panel-hi);
        color: var(--dark);
        border-color: var(--panel-hi);
      }
      .ed-deck-card.hub-primary-card {
        order: -1;
      }
      .ed-offer-spreads {
        display: flex;
        flex-direction: column;
      }
      .ed-offer-spreads #ofSpread6 {
        order: -1;
      }
      .calc-services .hub-primary-calc {
        order: -1;
      }

      /* Service spread section */
      .ed-spread {
        padding: clamp(64px, 9vw, 128px) 0;
        border-top: 1px solid var(--border);
        position: relative;
        scroll-margin-top: 88px;
      }
      .ed-spread-top {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(240px, 0.55fr);
        grid-template-areas: "num num" "title price";
        column-gap: clamp(28px, 4vw, 64px);
        row-gap: 12px;
        align-items: end;
        margin-bottom: 40px;
      }
      .ed-spread-num {
        grid-area: num;
        max-width: 30ch;
        font-family: var(--mono);
        font-size: 11px;
        line-height: 1.45;
        letter-spacing: 0.12em;
        color: var(--brand);
        text-transform: uppercase;
        font-weight: 500;
        white-space: normal;
        text-wrap: balance;
      }
      .ed-spread-num span {
        display: block;
        color: var(--muted);
        margin-top: 4px;
        font-weight: 400;
        letter-spacing: 0.08em;
      }
      .ed-spread-title {
        grid-area: title;
        font-family: var(--display);
        font-size: clamp(36px, 5vw, 76px);
        font-weight: 500;
        letter-spacing: -0.04em;
        line-height: 0.94;
        color: var(--ink);
        margin: 0;
        text-wrap: balance;
        min-width: 0;
      }
      .ed-spread-title .ital {
        color: var(--brand);
        font-weight: 600;
      }
      .ed-spread-pricebox {
        grid-area: price;
        min-width: 0;
        max-width: 34ch;
        justify-self: end;
        align-self: end;
        padding-bottom: 3px;
        font-family: var(--mono);
        font-size: 10px;
        line-height: 1.35;
        color: var(--muted);
        letter-spacing: 0.08em;
        text-transform: uppercase;
        text-align: right;
      }
      .ed-spread-pricebox > span,
      .ed-spread-pricebox > small {
        display: block;
      }
      .ed-spread-pricebox strong {
        display: block;
        font-family: var(--display);
        font-size: clamp(24px, 2.5vw, 34px);
        font-weight: 500;
        line-height: 1.05;
        color: var(--brand);
        letter-spacing: -0.025em;
        margin-top: 4px;
        text-transform: none;
        text-wrap: pretty;
        overflow-wrap: normal;
      }
      .ed-spread-pricebox small {
        margin-top: 5px;
        font-size: 9px;
        line-height: 1.4;
        letter-spacing: 0.06em;
        color: var(--muted);
        text-transform: none;
      }
      @media (max-width: 720px) {
        .ed-spread-top {
          grid-template-columns: 1fr;
          grid-template-areas: "num" "title" "price";
          gap: 12px;
        }
        .ed-spread-pricebox {
          justify-self: start;
          text-align: left;
          padding-bottom: 0;
        }
        .ed-spread-title {
          max-width: 100%;
          overflow-wrap: normal;
        }
      }

      .ed-spread-body {
        display: grid;
        grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
        gap: clamp(32px, 5vw, 72px);
        align-items: start;
        margin-bottom: 28px;
      }
      @media (max-width: 860px) {
        .ed-spread-body {
          grid-template-columns: 1fr;
          gap: 28px;
        }
      }
      .ed-spread-lead {
        font-size: 17px;
        line-height: 1.55;
        color: var(--ink-3);
        max-width: 52ch;
        margin: 0 0 28px;
        text-wrap: pretty;
      }
      .ed-spread-lead strong {
        color: var(--ink);
        font-weight: 500;
      }
      .ed-spread-details {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 0;
        border: 1px solid var(--border);
        border-radius: 16px;
        overflow: hidden;
        background: var(--surface);
      }
      @media (max-width: 640px) {
        .ed-spread-details {
          grid-template-columns: 1fr;
        }
      }
      .ed-spread-detail {
        padding: 20px 22px;
        border-right: 1px solid var(--border);
      }
      .ed-spread-detail:last-child {
        border-right: none;
      }
      @media (max-width: 640px) {
        .ed-spread-detail {
          border-right: none;
          border-bottom: 1px solid var(--border);
        }
        .ed-spread-detail:last-child {
          border-bottom: none;
        }
      }
      .ed-spread-detail-k {
        font-family: var(--mono);
        font-size: 10px;
        color: var(--brand);
        letter-spacing: 0.12em;
        text-transform: uppercase;
        margin-bottom: 8px;
        display: block;
        font-weight: 500;
      }
      .ed-spread-detail-v {
        font-size: 14px;
        line-height: 1.45;
        color: var(--ink);
      }
      .ed-spread-detail-v strong {
        color: var(--brand);
        font-weight: 600;
      }

      /* Proof card (dark, in spread-right column) */
      .ed-spread-proof {
        background: var(--dark);
        color: var(--bg);
        border-radius: 18px;
        padding: 32px;
        position: relative;
      }
      .ed-spread-proof-label {
        font-family: var(--mono);
        font-size: 10px;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--panel-hi);
        margin-bottom: 16px;
        position: relative;
        z-index: 2;
        display: block;
      }
      .ed-spread-proof-quote {
        font-family: var(--display);
        font-size: clamp(22px, 2.2vw, 30px);
        font-weight: 500;
        letter-spacing: -0.025em;
        line-height: 1.15;
        color: var(--bg);
        margin-bottom: 18px;
        position: relative;
        z-index: 2;
        text-wrap: balance;
      }
      .ed-spread-proof-quote strong {
        color: var(--panel-hi);
        font-weight: 600;
      }
      .ed-spread-proof-foot {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 14px;
        padding-top: 16px;
        border-top: 1px solid rgba(242, 239, 230, 0.15);
        font-family: var(--mono);
        font-size: 10px;
        color: rgba(242, 239, 230, 0.65);
        letter-spacing: 0.1em;
        text-transform: uppercase;
        position: relative;
        z-index: 2;
      }

      .ed-spread-actions {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
        margin-top: 16px;
      }
      .ed-spread-actions .ed-btn {
        padding: 12px 18px;
        font-size: 13px;
      }

      /* Editorial calculator section */
      .ed-calc-section {
        padding: clamp(64px, 9vw, 128px) 0;
        border-top: 1px solid var(--border);
        background: var(--surface-2);
      }
      .ed-calc-layout {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 360px;
        gap: clamp(24px, 3vw, 48px);
        align-items: start;
      }
      @media (max-width: 960px) {
        .ed-calc-layout {
          grid-template-columns: 1fr;
        }
      }
      .ed-calc-services {
        display: flex;
        flex-direction: column;
        gap: 12px;
      }

      /* Legacy svc-calc styling override for editorial look */
      .ed-calc-services .svc-calc {
        background: var(--bg);
        border: 1px solid var(--border);
        border-radius: 14px;
        overflow: hidden;
        transition:
          border-color 0.25s,
          background 0.25s;
      }
      .ed-calc-services .svc-calc.on {
        border-color: var(--brand);
        background: var(--surface);
      }
      .ed-calc-services .svc-head {
        padding: 18px 22px;
        cursor: pointer;
      }
      .ed-calc-services .sh-ico {
        font-family: var(--mono);
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 0.05em;
        background: var(--surface-2) !important;
        color: var(--ink) !important;
        border: 1px solid var(--border);
      }
      .ed-calc-services .svc-calc.on .sh-ico {
        background: var(--brand) !important;
        color: var(--bg) !important;
        border-color: var(--brand);
      }
      .ed-calc-services .sh-name {
        font-family: var(--display);
        font-size: 17px;
        font-weight: 500;
        letter-spacing: -0.015em;
        color: var(--ink);
      }
      .ed-calc-services .sh-hint {
        font-family: var(--mono);
        font-size: 10px;
        color: var(--muted);
        letter-spacing: 0.08em;
        text-transform: uppercase;
        margin-top: 2px;
      }

      /* CCHIPS — nowe karty-chipy zamiast sliderów */
      .cchips-block {
        padding: 0 22px 20px;
        display: flex;
        flex-direction: column;
        gap: 18px;
      }
      .cchips-group {
        display: flex;
        flex-direction: column;
        gap: 8px;
      }
      .cchips-label {
        font-family: var(--mono);
        font-size: 10px;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--muted);
        font-weight: 500;
      }
      .cchips-row {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
      }
      .cchip {
        display: inline-flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 3px;
        padding: 9px 14px;
        background: var(--bg);
        border: 1px solid var(--border);
        border-radius: 10px;
        cursor: pointer;
        font-family: inherit;
        font-size: 13px;
        font-weight: 500;
        color: var(--ink-2);
        transition: all 0.2s;
        line-height: 1.1;
        text-align: left;
        min-width: 0;
      }
      .cchip:hover {
        border-color: var(--brand-light);
        background: var(--surface);
      }
      .cchip.on {
        background: var(--brand);
        color: var(--bg);
        border-color: var(--brand);
        box-shadow: 0 2px 8px rgba(31, 122, 77, 0.18);
      }
      .cchip-sub {
        font-family: var(--mono);
        font-size: 10px;
        font-weight: 500;
        letter-spacing: 0.04em;
        opacity: 0.7;
        color: inherit;
      }
      .cchip.on .cchip-sub {
        opacity: 0.85;
      }

      /* Sticky summary sidebar — HIGH CONTRAST */
      .calc-summary-wrap {
        position: sticky;
        top: 96px;
        align-self: start;
      }
      .ed-calc-summary {
        background: var(--dark);
        color: #ffffff;
        border-radius: 18px;
        padding: 28px;
        position: relative;
      }
      .ed-calc-summary .sum-header {
        position: relative;
        z-index: 2;
        padding-bottom: 18px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.18);
        margin-bottom: 18px;
      }
      .ed-calc-summary .sum-title {
        font-family: var(--mono) !important;
        font-size: 10px !important;
        color: var(--panel-hi) !important;
        letter-spacing: 0.12em !important;
        text-transform: uppercase !important;
        margin-bottom: 8px !important;
        font-weight: 500 !important;
      }
      .ed-calc-summary .sum-sub {
        font-family: var(--display) !important;
        font-size: 22px !important;
        font-weight: 500 !important;
        letter-spacing: -0.025em !important;
        color: #ffffff !important;
        line-height: 1.1 !important;
        opacity: 1 !important;
      }
      .ed-calc-summary #sum-body {
        position: relative;
        z-index: 2;
        color: #ffffff;
      }
      .ed-calc-summary .sum-empty p {
        color: rgba(255, 255, 255, 0.7) !important;
        font-size: 13.5px !important;
        line-height: 1.5 !important;
        text-align: left !important;
      }
      .ed-calc-summary .sum-items {
        color: #ffffff;
      }
      .ed-calc-summary .sum-item-name {
        color: #ffffff !important;
        font-size: 14px !important;
        font-weight: 500 !important;
      }
      .ed-calc-summary .sum-item-price {
        color: var(--panel-hi) !important;
        font-family: var(--mono) !important;
        font-size: 13px !important;
        font-weight: 500 !important;
      }
      .ed-calc-summary .sum-divider {
        background: rgba(255, 255, 255, 0.18) !important;
      }
      .ed-calc-summary .sum-total-label {
        color: rgba(255, 255, 255, 0.7) !important;
        font-size: 11px !important;
        font-family: var(--mono) !important;
        letter-spacing: 0.1em !important;
        text-transform: uppercase !important;
        font-weight: 500 !important;
      }
      .ed-calc-summary .sum-total-val {
        color: var(--panel-hi) !important;
        font-family: var(--display) !important;
        font-size: clamp(27px, 2.3vw, 30px) !important;
        font-weight: 500 !important;
        letter-spacing: -0.015em !important;
        line-height: 1.1 !important;
        white-space: nowrap;
        width: 100%;
        text-align: left;
        font-variant-numeric: tabular-nums;
      }
      .ed-calc-summary .sum-note {
        color: rgba(255, 255, 255, 0.55) !important;
        font-size: 11px !important;
        font-family: var(--mono) !important;
        letter-spacing: 0.05em !important;
        line-height: 1.5 !important;
      }
      .ed-calc-summary .sum-note strong {
        color: var(--panel-hi) !important;
      }
      .ed-calc-summary .sum-cta-btn {
        background: var(--panel-hi) !important;
        color: var(--dark) !important;
        font-family: inherit !important;
        font-weight: 600 !important;
        border-radius: 999px !important;
        margin-top: 18px !important;
        padding: 14px !important;
        transition: background 0.25s !important;
        border: none !important;
        width: 100% !important;
      }
      .ed-calc-summary .sum-cta-btn:hover {
        background: var(--panel-hi-2) !important;
      }
      /* Stabilny layout — items animują się in/out ale nie pchają kolejnych */
      .ed-calc-summary .sum-items {
        display: flex;
        flex-direction: column;
        gap: 10px;
        margin-bottom: 12px;
      }
      .ed-calc-summary .sum-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 10px;
        padding: 10px 0;
        transition: opacity 0.3s;
      }
      .ed-calc-summary .sum-item[hidden] {
        display: none;
      }
      .ed-calc-summary .sum-divider {
        height: 1px;
        margin: 6px 0 10px;
      }
      .ed-calc-summary .sum-divider[hidden] {
        display: none;
      }
      .ed-calc-summary .sum-total {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
        min-height: 76px;
        padding: 6px 0;
      }
      .ed-calc-summary .sum-total[hidden] {
        display: none;
      }
      @media (max-width: 420px) {
        .ed-calc-summary .sum-total-val {
          font-size: clamp(24px, 7vw, 27px) !important;
        }
      }
      .ed-calc-summary .sum-note[hidden],
      .ed-calc-summary .sum-cta-btn[hidden] {
        display: none;
      }
      .ed-calc-summary .sum-note {
        margin-top: 10px;
      }
      /* Pulse numerków przy zmianie */
      .ed-calc-summary .tn {
        display: inline-block;
        font-variant-numeric: tabular-nums;
        transition: color 0.25s;
      }

      /* ============================================================
   Scroll-triggered reveals
============================================================ */
      .ed-reveal {
        opacity: 0;
        transform: translateY(30px);
        transition:
          opacity 0.9s cubic-bezier(0.2, 0.8, 0.3, 1),
          transform 0.9s cubic-bezier(0.2, 0.8, 0.3, 1);
      }
      .ed-reveal.visible {
        opacity: 1;
        transform: none;
      }

      /* Responsive */
      @media (max-width: 1024px) {
        .ed-sec-head {
          grid-template-columns: 1fr;
          gap: 20px;
          padding-top: 32px;
          margin-bottom: 32px;
        }
        .ed-sec-head-num {
          padding-top: 0;
        }
        .ed-sec-head-num::before {
          display: none;
        }
        .ed-stats {
          grid-template-columns: repeat(2, 1fr);
        }
        .ed-stat:nth-child(odd) {
          border-left: none;
        }
        .ed-stat:nth-child(3),
        .ed-stat:nth-child(4) {
          border-top: 1px solid var(--border);
        }
        .ed-case-row {
          grid-template-columns: 40px 1fr 120px 60px;
          gap: 16px;
          padding: 32px 0;
        }
        .ed-case-row .ed-case-metric:nth-of-type(2) {
          display: none;
        }
        .ed-case-feature {
          grid-template-columns: 1fr;
          min-height: 0;
        }
        .ed-case-feature-right {
          border-left: none;
          border-top: 1px solid rgba(242, 239, 230, 0.12);
        }
        .ed-proc-row {
          grid-template-columns: 60px 1fr;
          gap: 16px 24px;
          padding: 28px 0;
        }
        .ed-proc-row .ed-proc-desc {
          grid-column: 2;
        }
        .ed-proc-row .ed-proc-meta {
          grid-column: 2;
          justify-self: start;
          text-align: left;
        }
        .ed-timeline-track {
          grid-template-columns: repeat(3, 1fr);
          gap: 24px 16px;
        }
        .ed-timeline-track::before {
          display: none;
        }
      }
      @media (max-width: 720px) {
        .ed-hero {
          padding: 96px 0 48px;
        }
        .ed-hero-meta {
          margin-bottom: 24px;
        }
        .ed-hero-meta-right {
          align-items: flex-start;
          text-align: left;
        }
        .ed-hero-title {
          margin-bottom: 32px;
        }
        .ed-hero-title h1 {
          font-size: clamp(36px, 10vw, 64px);
          line-height: 1.04;
          max-width: none;
        }
        .ed-hero-title h1 .line {
          overflow: visible;
          padding: 0;
          margin: 0;
        }
        .ed-hero-title h1 .word {
          transform: none;
          animation: none;
          opacity: 1;
        }
        .ed-hero-bottom {
          grid-template-columns: 1fr;
          gap: 24px;
          padding-top: 24px;
        }
        .ed-hero-specs {
          grid-template-columns: repeat(2, minmax(0, 1fr));
          text-align: left;
        }
        .ed-hero-specs > span {
          padding: 13px 12px;
        }
        .ed-hero-specs > span:first-child {
          padding-left: 0;
        }
        .ed-hero-specs > span:nth-child(3) {
          border-left: 0;
          padding-left: 0;
        }
        .ed-hero-specs > span:nth-child(n + 3) {
          border-top: 1px solid var(--border);
        }
        .ed-hero-actions {
          width: 100%;
          flex-direction: column;
        }
        .ed-hero-actions .ed-btn {
          flex: 1;
          justify-content: space-between;
          width: 100%;
        }
        .ed-stats {
          grid-template-columns: 1fr;
        }
        .ed-stat:nth-child(n) {
          border-left: none;
          border-top: 1px solid var(--border);
          padding: 32px var(--px);
        }
        .ed-stat:first-child {
          border-top: none;
        }
        .ed-stat-big {
          font-size: clamp(48px, 13vw, 72px);
        }
        .ed-sec-head-title h2 {
          font-size: clamp(36px, 9vw, 56px);
        }
        .ed-case-row {
          grid-template-columns: 30px 1fr 50px;
          gap: 14px;
          padding: 26px 0;
        }
        .ed-case-row .ed-case-metric {
          display: none;
        }
        .ed-case-go-btn {
          width: 44px;
          height: 44px;
        }
        .ed-case-feature-left,
        .ed-case-feature-right {
          padding: 32px 28px;
        }
        .ed-faq-q {
          font-size: 22px;
          padding: 22px 0;
          gap: 16px;
        }
        .ed-faq-ico {
          width: 36px;
          height: 36px;
          font-size: 16px;
        }
        .ed-cta h2 {
          font-size: clamp(42px, 13vw, 72px);
        }
        .ed-cta {
          border-radius: 20px;
        }
        .ed-marquee-track {
          gap: 36px;
        }
        .ed-marquee-track span {
          gap: 28px;
          font-size: clamp(24px, 8vw, 40px);
        }
        .ed-svc-card {
          flex-basis: 82vw;
          min-height: 460px;
          padding: 28px;
          border-radius: 20px;
        }
        .ed-svc-num-big {
          font-size: 64px;
        }
        .ed-svc-card h3 {
          font-size: 28px;
        }
        /* Process steps — mniejsza min-height na mobile, rail nie sticky */
        .ed-proc-step {
          min-height: auto;
          padding: 24px 0;
        }
        .ed-proc-step-title {
          font-size: clamp(20px, 6vw, 28px);
        }
        /* CS tiles — mniej padding, mniejsze min-height */
        .ed-cs-tile {
          padding: 22px;
          min-height: auto;
        }
        .ed-cs-tile.feat {
          min-height: auto;
        }
        .ed-pf-grid .ed-cs-tile {
          min-height: auto;
        }
        .ed-pf-grid .ed-cs-tile.feat {
          min-height: auto;
        }
        .ed-cs-title {
          font-size: clamp(22px, 6vw, 30px);
        }
        .ed-cs-foot {
          flex-direction: column;
          align-items: flex-start;
          gap: 10px;
        }
        /* Page hero — mniejszy h1 na mobile */
        .ed-page-hero {
          padding: 96px 0 32px;
        }
        .ed-page-hero h1 {
          font-size: clamp(38px, 11vw, 68px);
          margin-bottom: 20px;
        }
        .ed-page-hero-meta {
          font-size: 10px;
          margin-bottom: 20px;
        }
        .ed-page-hero-actions {
          width: 100%;
          flex-direction: column;
        }
        .ed-page-hero-actions .ed-btn {
          justify-content: space-between;
          width: 100%;
        }
      }

      /* ========================================================
   HOMEPAGE — HERO
======================================================== */
      .hero {
        padding: 120px 0 60px;
        position: relative;
        overflow: hidden;
        min-height: 100vh;
        min-height: 100svh;
        display: flex;
        flex-direction: column;
        justify-content: center;
      }
      .hero > .container {
        width: 100%;
      }
      .hero-stats-wrap {
        padding: 72px 0 0;
        position: relative;
      }
      .hero-bg-grid {
        position: absolute;
        inset: 0;
        background-image:
          linear-gradient(
            to right,
            rgba(13, 26, 19, 0.045) 1px,
            transparent 1px
          ),
          linear-gradient(
            to bottom,
            rgba(13, 26, 19, 0.045) 1px,
            transparent 1px
          );
        background-size: 56px 56px;
        mask-image: radial-gradient(
          ellipse at 35% 40%,
          #000 8%,
          transparent 70%
        );
        -webkit-mask-image: radial-gradient(
          ellipse at 35% 40%,
          #000 8%,
          transparent 70%
        );
        pointer-events: none;
      }
      .hero-blob {
        position: absolute;
        width: 640px;
        height: 640px;
        border-radius: 50%;
        background: radial-gradient(circle, var(--brand-glow), transparent 70%);
        filter: blur(80px);
        top: -220px;
        right: -180px;
        pointer-events: none;
        animation: blob 20s ease-in-out infinite;
      }
      @keyframes blob {
        0%,
        100% {
          transform: translate(0, 0) scale(1);
        }
        50% {
          transform: translate(-30px, 50px) scale(1.15);
        }
      }

      /* Hero upper meta-strip — editorial top bar */
      .hero-meta-bar {
        position: relative;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        padding: 14px 0 22px;
        border-bottom: 1px solid var(--border);
        margin-bottom: 44px;
        flex-wrap: wrap;
        font-family: var(--mono);
        font-size: 11px;
        color: var(--muted);
        letter-spacing: 0.08em;
        text-transform: uppercase;
      }
      .hero-meta-bar .hmb-col {
        display: flex;
        align-items: center;
        gap: 10px;
      }
      .hero-meta-bar strong {
        color: var(--ink);
        font-weight: 500;
      }
      .hero-meta-bar .hmb-dot {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: var(--success);
        box-shadow: 0 0 8px var(--success);
        animation: pulse 2.2s infinite;
      }
      .hero-meta-bar .hmb-sep {
        color: var(--border-2);
      }
      .hero-meta-bar .hmb-live::before {
        content: "●";
        color: var(--danger);
        margin-right: 6px;
        animation: pulse 1.6s infinite;
      }

      .hero-inner {
        position: relative;
        z-index: 2;
        display: grid;
        grid-template-columns: 1.1fr 0.9fr;
        gap: 64px;
        align-items: center;
        margin-top: 24px;
      }
      .hero-pill {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 6px 14px 6px 8px;
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: 999px;
        font-size: 12px;
        font-weight: 500;
        color: var(--ink-2);
        box-shadow: var(--shadow-sm);
        margin-bottom: 22px;
        font-family: var(--mono);
        letter-spacing: 0.05em;
        text-transform: uppercase;
      }
      .hero-pill-dot {
        width: 18px;
        height: 18px;
        border-radius: 50%;
        background: var(--brand);
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--accent);
        font-size: 10px;
        font-weight: 700;
      }
      .hero-h1 {
        font-family: var(--display);
        font-size: clamp(52px, 8vw, 120px);
        font-weight: 500;
        letter-spacing: -0.045em;
        line-height: 0.92;
        margin-bottom: 28px;
        color: var(--ink);
        text-wrap: balance;
      }
      .hero-h1 .serif {
        font-family: var(--serif);
        font-style: italic;
        font-weight: 400;
        color: var(--brand);
        display: inline-block;
        letter-spacing: -0.01em;
      }
      .hero-h1 .word-split {
        overflow: hidden;
        vertical-align: top;
      }
      .hero-sub {
        font-size: 18px;
        line-height: 1.55;
        color: var(--ink-3);
        max-width: 480px;
        margin-bottom: 32px;
        text-wrap: pretty;
      }
      .hero-sub::before {
        content: "";
        display: inline-block;
        width: 32px;
        height: 1px;
        background: var(--brand);
        vertical-align: middle;
        margin-right: 14px;
        transform: translateY(-3px);
      }
      .hero-ctas {
        display: flex;
        gap: 12px;
        flex-wrap: wrap;
        margin-bottom: 36px;
      }
      .hero-badges {
        display: flex;
        gap: 22px;
        flex-wrap: wrap;
      }
      .hero-badge {
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 13px;
        color: var(--muted);
      }
      .hero-badge strong {
        color: var(--ink);
        font-weight: 700;
      }
      .hero-badge-ico {
        width: 22px;
        height: 22px;
        border-radius: 50%;
        background: var(--brand);
        color: var(--accent);
        font-size: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 700;
      }

      /* Hero right col (contains widget + medallion) */
      .hero-right {
        position: relative;
      }

      /* === EDITORIAL ROTATING MEDALLION — floats in hero === */
      .hero-medallion {
        position: absolute;
        width: 172px;
        height: 172px;
        top: -90px;
        right: -36px;
        pointer-events: none;
        z-index: 3;
        display: none;
        filter: drop-shadow(0 12px 24px rgba(13, 26, 19, 0.12));
      }
      @media (min-width: 1100px) {
        .hero-medallion {
          display: block;
        }
      }
      .hero-medallion svg {
        width: 100%;
        height: 100%;
      }
      .hero-medallion .hm-ring {
        animation: hmSpin 22s linear infinite;
        transform-origin: center;
      }
      .hero-medallion .hm-core {
        transform-origin: center;
      }
      @keyframes hmSpin {
        to {
          transform: rotate(360deg);
        }
      }
      .hero-medallion .hm-core-bg {
        fill: var(--brand);
      }
      .hero-medallion .hm-core-mark {
        fill: var(--accent);
      }

      /* HERO RIGHT — interactive picker widget */
      .hero-widget {
        position: relative;
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: var(--r-lg);
        padding: 24px;
        box-shadow: var(--shadow-lg);
      }
      .hw-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 18px;
        padding-bottom: 16px;
        border-bottom: 1px solid var(--border);
      }
      .hw-head-left {
        display: flex;
        align-items: center;
        gap: 10px;
      }
      .hw-avatar {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background: linear-gradient(135deg, var(--brand), var(--accent));
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        font-weight: 700;
        font-size: 13px;
      }
      .hw-name {
        font-size: 14px;
        font-weight: 600;
        color: var(--ink);
      }
      .hw-status {
        font-size: 11px;
        color: var(--success);
        display: flex;
        align-items: center;
        gap: 5px;
      }
      .hw-status::before {
        content: "";
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--success);
        box-shadow: 0 0 6px var(--success);
        animation: pulse 2s infinite;
      }
      @keyframes pulse {
        0%,
        100% {
          opacity: 1;
        }
        50% {
          opacity: 0.5;
        }
      }
      .hw-online {
        font-family: var(--mono);
        font-size: 10px;
        color: var(--muted-2);
      }
      .hw-q {
        font-size: 14px;
        color: var(--ink-2);
        margin-bottom: 14px;
        line-height: 1.5;
      }
      .hw-options {
        display: flex;
        flex-direction: column;
        gap: 8px;
        margin-bottom: 14px;
      }
      .hw-opt {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 12px 14px;
        background: var(--bg-2);
        border: 1px solid transparent;
        border-radius: var(--r-sm);
        cursor: pointer;
        text-align: left;
        transition: all 0.2s;
        font-size: 13.5px;
        color: var(--ink-2);
        font-weight: 500;
      }
      .hw-opt:hover {
        background: var(--brand-soft);
        border-color: var(--brand);
        color: var(--brand);
      }
      .hw-opt-ico {
        width: 28px;
        height: 28px;
        border-radius: 8px;
        background: var(--surface);
        border: 1px solid var(--border);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        flex-shrink: 0;
      }
      .hw-answer {
        display: none;
        padding: 16px;
        background: var(--brand-soft);
        border: 1px solid rgba(31, 122, 77, 0.2);
        border-radius: var(--r-sm);
        font-size: 13.5px;
        color: var(--ink-2);
        line-height: 1.6;
      }
      .hw-answer.show {
        display: block;
        animation: slideIn 0.3s ease;
      }
      @keyframes slideIn {
        from {
          opacity: 0;
          transform: translateY(8px);
        }
        to {
          opacity: 1;
          transform: none;
        }
      }
      .hw-answer strong {
        color: var(--brand);
      }
      .hw-answer-cta {
        display: flex;
        gap: 8px;
        margin-top: 14px;
      }
      .hw-answer-cta button {
        font-size: 12px;
        padding: 8px 14px;
        border-radius: 999px;
        font-weight: 600;
        cursor: pointer;
        border: none;
      }
      .hw-answer-cta .pri {
        background: var(--brand);
        color: #fff;
      }
      .hw-answer-cta .pri:hover {
        background: var(--brand-hover);
      }
      .hw-answer-cta .sec {
        background: var(--surface);
        color: var(--ink-2);
        border: 1px solid var(--border);
      }
      .hw-reset {
        font-size: 11px;
        color: var(--muted);
        margin-top: 10px;
        text-align: center;
        cursor: pointer;
      }
      .hw-reset:hover {
        color: var(--brand);
      }

      /* HERO STATS — editorial band with oversized display numbers */
      .hero-stats {
        margin-top: 0;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 0;
        border-top: 1px solid var(--border);
        border-bottom: 1px solid var(--border);
        position: relative;
        background: transparent;
        overflow: hidden;
      }
      .hs-item {
        padding: 44px 28px;
        border-right: 1px solid var(--border);
        position: relative;
        transition: all 0.35s;
        cursor: default;
        overflow: hidden;
      }
      .hs-item:last-child {
        border-right: none;
      }
      .hs-item::before {
        content: "";
        position: absolute;
        inset: 0;
        background: var(--surface-2);
        opacity: 0;
        transition: opacity 0.35s;
        z-index: 0;
      }
      .hs-item:hover::before {
        opacity: 1;
      }
      .hs-item > * {
        position: relative;
        z-index: 1;
      }
      .hs-item:hover .hs-val {
        color: var(--brand);
      }
      .hs-item::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 2px;
        background: var(--brand);
        transform: scaleX(0);
        transform-origin: left;
        transition: transform 0.4s cubic-bezier(0.2, 0.6, 0.2, 1);
        z-index: 2;
      }
      .hs-item:hover::after {
        transform: scaleX(1);
      }
      .hs-val {
        font-family: var(--display);
        font-size: clamp(48px, 5.5vw, 84px);
        font-weight: 500;
        letter-spacing: -0.045em;
        color: var(--ink);
        line-height: 0.9;
        font-variant-numeric: tabular-nums;
        transition: color 0.3s;
      }
      .hs-val .hl {
        font-family: var(--serif);
        font-style: italic;
        font-weight: 400;
        color: var(--brand);
        font-size: 0.55em;
        vertical-align: super;
        margin-left: -4px;
        letter-spacing: -0.01em;
      }
      .hs-val .counter {
        display: inline-block;
      }
      .hs-lbl {
        font-family: var(--mono);
        font-size: 11px;
        color: var(--muted);
        margin-top: 16px;
        line-height: 1.45;
        letter-spacing: 0.06em;
        text-transform: uppercase;
      }

      /* MINI HERO GROWTH CHART (shown after picker answer) */
      .hw-chart {
        margin-top: 14px;
        padding: 14px;
        background: #fff;
        border: 1px solid var(--border);
        border-radius: var(--r-sm);
      }
      .hw-chart-head {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        margin-bottom: 10px;
      }
      .hw-chart-title {
        font-size: 11px;
        color: var(--muted);
        font-family: var(--mono);
        text-transform: uppercase;
        letter-spacing: 0.5px;
      }
      .hw-chart-val {
        font-size: 18px;
        font-weight: 700;
        color: var(--brand);
        font-family: var(--mono);
        letter-spacing: -0.02em;
      }
      .hw-chart-val .up {
        font-size: 11px;
        color: var(--success);
        margin-left: 6px;
        font-weight: 600;
      }
      .hw-chart svg {
        width: 100%;
        height: 80px;
        display: block;
      }
      .hw-chart .hw-line {
        fill: none;
        stroke: var(--brand);
        stroke-width: 2.5;
        stroke-linecap: round;
        stroke-linejoin: round;
        stroke-dasharray: 600;
        stroke-dashoffset: 600;
        animation: drawLine 1.8s cubic-bezier(0.3, 0, 0.2, 1) forwards;
      }
      .hw-chart .hw-area {
        fill: url(#hwGrad);
        opacity: 0;
        animation: fadeArea 1.5s ease 0.3s forwards;
      }
      .hw-chart .hw-bar {
        fill: var(--brand);
        opacity: 0;
        animation: hwBarGrow 0.8s cubic-bezier(0.2, 0.6, 0.2, 1) forwards;
      }
      @keyframes hwBarGrow {
        to {
          opacity: 0.15;
        }
      }

      /* TRUST STRIP */
      .trust {
        padding: 14px 0;
        background: var(--dark);
        border-top: 1px solid var(--dark);
        border-bottom: 1px solid var(--dark);
        overflow: hidden;
        position: relative;
      }
      .trust-item {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        font-family: var(--display);
        font-weight: 500;
        font-size: clamp(13px, 1.2vw, 17px);
        color: var(--bg);
        letter-spacing: -0.015em;
        white-space: nowrap;
        transition: color 0.25s;
      }
      .trust-marquee-track:hover .trust-item:hover {
        color: var(--panel-hi);
      }
      .trust-item svg {
        width: 22px;
        height: 22px;
        color: var(--panel-hi);
        flex-shrink: 0;
      }
      .trust-item .bullet {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--panel-hi);
        flex-shrink: 0;
        opacity: 0.85;
      }
      .trust-item.num {
        font-family: var(--display);
        font-weight: 500;
        color: var(--bg);
        font-feature-settings: "tnum";
      }
      .trust-item.num strong {
        font-family: var(--serif);
        font-style: italic;
        font-weight: 400;
        color: var(--panel-hi);
      }
      .trust-logo {
        font-family: var(--serif);
        font-style: italic;
        font-weight: 400;
        font-size: clamp(15px, 1.4vw, 19px);
        color: var(--panel-hi);
        letter-spacing: -0.01em;
      }
      .trust-item::after {
        content: "✦";
        font-size: 0.4em;
        color: var(--panel-hi);
        margin-left: 16px;
        vertical-align: middle;
      }

      /* SECTION HEADERS — editorial numbered style */
      .sec-head {
        margin-bottom: 56px;
        max-width: 780px;
        position: relative;
        padding-top: 28px;
        border-top: 1px solid var(--border);
      }
      .sec-head.center {
        margin: 0 auto 56px;
        text-align: center;
        padding-top: 32px;
      }
      .home-growth .sec-head,
      .cta-block .sec-head,
      .k-left .sec-head {
        border-top-color: rgba(255, 255, 255, 0.15);
      }
      .sec-head h2 {
        font-family: var(--display);
        font-size: clamp(34px, 5vw, 68px);
        font-weight: 500;
        letter-spacing: -0.035em;
        line-height: 0.98;
        margin-bottom: 16px;
        color: var(--ink);
        text-wrap: balance;
      }
      .sec-head h2 .serif {
        font-family: var(--serif);
        font-style: italic;
        font-weight: 400;
        color: var(--brand);
        letter-spacing: -0.01em;
      }
      .sec-head p {
        font-size: 17px;
        color: var(--muted);
        line-height: 1.55;
        max-width: 560px;
        text-wrap: pretty;
      }
      .sec-head.center p {
        margin-left: auto;
        margin-right: auto;
      }
      .sec-head .eyebrow {
        margin-bottom: 14px;
      }
      .sec-head .sec-num {
        position: absolute;
        top: 28px;
        right: 0;
        font-family: var(--mono);
        font-size: 11px;
        font-weight: 500;
        color: var(--brand);
        letter-spacing: 0.1em;
        text-transform: uppercase;
        opacity: 0.8;
      }
      .sec-head .sec-num span {
        display: block;
        color: var(--muted-2);
        margin-top: 4px;
        font-weight: 400;
      }

      /* SERVICES */
      .svc-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 18px;
        align-items: start;
      }
      .svc-big-grid {
        align-items: start;
      }
      .svc-card {
        padding: 36px;
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: var(--r-lg);
        transition:
          transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
          box-shadow 0.35s,
          border-color 0.3s,
          background 0.3s;
        position: relative;
        overflow: hidden;
        cursor: pointer;
      }
      .svc-card::after {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        width: 320px;
        height: 320px;
        background: radial-gradient(circle, var(--brand-glow), transparent 70%);
        opacity: 0;
        transition: opacity 0.4s;
        pointer-events: none;
        transform: translate(30%, -30%);
      }
      .svc-card::before {
        content: attr(data-svc-idx);
        position: absolute;
        top: 22px;
        right: 26px;
        font-family: var(--mono);
        font-size: 11px;
        color: var(--muted-2);
        letter-spacing: 0.1em;
        font-weight: 500;
        pointer-events: none;
      }
      .svc-card:hover {
        border-color: var(--ink);
        transform: translateY(-6px);
        box-shadow: var(--shadow-xl);
      }
      .svc-card:hover::after {
        opacity: 1;
      }
      .svc-card:hover .svc-ico {
        transform: scale(1.1) rotate(-4deg);
        background: var(--brand);
        color: var(--accent);
      }
      .svc-ico {
        transition:
          transform 0.3s cubic-bezier(0.2, 0.6, 0.2, 1),
          background 0.3s,
          color 0.3s;
      }
      .svc-card .svc-arrow {
        transition:
          gap 0.25s,
          color 0.25s;
      }
      .svc-card:hover .svc-arrow {
        gap: 14px;
      }
      .svc-card.open {
        transform: none !important;
      }
      .svc-card.open:hover {
        transform: none !important;
      }

      /* Service expand — skrócony opis in-place */
      .svc-expand {
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        transition:
          max-height 0.5s cubic-bezier(0.2, 0.6, 0.2, 1),
          opacity 0.4s,
          margin-top 0.4s;
      }
      .svc-card.open .svc-expand {
        max-height: 520px;
        opacity: 1;
        margin-top: 20px;
      }
      .svc-expand-inner {
        padding-top: 20px;
        border-top: 1px solid var(--border);
      }
      .svc-expand-row {
        display: flex;
        gap: 10px;
        align-items: flex-start;
        margin-bottom: 12px;
      }
      .svc-expand-row:last-of-type {
        margin-bottom: 14px;
      }
      .svc-expand-k {
        font-family: var(--mono);
        font-size: 11px;
        font-weight: 600;
        color: var(--muted);
        text-transform: uppercase;
        letter-spacing: 0.5px;
        min-width: 88px;
        flex-shrink: 0;
        padding-top: 2px;
      }
      .svc-expand-v {
        font-size: 14px;
        color: var(--ink-2);
        line-height: 1.55;
        flex: 1;
      }
      .svc-expand-v strong {
        color: var(--ink);
        font-weight: 600;
      }
      .svc-expand-ex {
        padding: 12px 14px;
        background: var(--brand-soft);
        border-radius: var(--r-sm);
        font-size: 13px;
        color: var(--ink-2);
        line-height: 1.5;
        margin: 14px 0;
        border-left: 3px solid var(--brand);
      }
      .svc-expand-ex strong {
        color: var(--brand);
        font-family: var(--mono);
        font-size: 12px;
        letter-spacing: 0.5px;
        text-transform: uppercase;
        display: block;
        margin-bottom: 3px;
      }
      .svc-expand-cta {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
        margin-top: 6px;
      }
      .svc-expand-cta button {
        font-size: 13px;
        padding: 10px 16px;
        border-radius: 999px;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-weight: 600;
        border: 1px solid transparent;
        transition: all 0.2s;
      }
      .svc-expand-cta .pri {
        background: var(--ink);
        color: #fff;
        border-color: var(--ink);
      }
      .svc-expand-cta .pri:hover {
        background: var(--brand);
        border-color: var(--brand);
      }
      .svc-expand-cta .sec {
        background: transparent;
        color: var(--ink-2);
        border-color: var(--border-2);
      }
      .svc-expand-cta .sec:hover {
        color: var(--brand);
        border-color: var(--brand);
      }
      .svc-card .svc-toggle-indicator {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        margin-left: auto;
        font-size: 13px;
        font-weight: 600;
        color: var(--brand);
        transition: gap 0.2s;
        font-family: inherit;
      }
      .svc-card:hover .svc-toggle-indicator {
        gap: 10px;
      }
      .svc-toggle-arrow {
        display: inline-block;
        transition: transform 0.35s;
        font-size: 12px;
      }
      .svc-card.open .svc-toggle-arrow {
        transform: rotate(180deg);
      }
      .svc-card.open .svc-arrow {
        display: none;
      }
      .svc-top {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        margin-bottom: 22px;
      }
      .svc-ico {
        width: 56px;
        height: 56px;
        border-radius: var(--r);
        background: var(--brand-soft);
        color: var(--brand);
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        overflow: hidden;
      }
      .svc-ico svg {
        width: 28px;
        height: 28px;
        position: relative;
        z-index: 2;
      }
      .svc-ico::before {
        content: "";
        position: absolute;
        inset: -2px;
        border-radius: inherit;
        background: conic-gradient(
          from 0deg,
          transparent 0deg,
          currentColor 40deg,
          transparent 120deg
        );
        opacity: 0;
        transition: opacity 0.5s;
        animation: spin 3s linear infinite;
      }
      .svc-card:hover .svc-ico::before {
        opacity: 0.25;
      }
      @keyframes spin {
        to {
          transform: rotate(360deg);
        }
      }
      .svc-ico::after {
        content: "";
        position: absolute;
        inset: 2px;
        border-radius: inherit;
        background: inherit;
        z-index: 1;
      }

      /* Icon utility — for inline icons with currentColor */
      .ico {
        width: 24px;
        height: 24px;
        flex-shrink: 0;
        display: inline-block;
        vertical-align: middle;
      }
      .ico-lg {
        width: 32px;
        height: 32px;
      }
      .svc-price {
        font-family: var(--mono);
        font-size: 12px;
        font-weight: 500;
        color: var(--ink);
        padding: 6px 14px;
        background: var(--bg-2);
        border-radius: 999px;
        letter-spacing: 0.02em;
        border: 1px solid var(--border);
      }
      .svc-card h3 {
        font-family: var(--display);
        font-size: 28px;
        font-weight: 500;
        margin-bottom: 10px;
        letter-spacing: -0.03em;
        line-height: 1.05;
        color: var(--ink);
      }
      .svc-card p {
        font-size: 15px;
        color: var(--ink-3);
        line-height: 1.6;
        margin-bottom: 20px;
      }
      .svc-arrow {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-size: 13px;
        font-weight: 600;
        color: var(--brand);
        transition: gap 0.2s;
      }
      .svc-card:hover .svc-arrow {
        gap: 10px;
      }

      /* PORTFOLIO PREVIEW */
      .port-grid {
        display: grid;
        grid-template-columns: 2fr 1fr;
        gap: 16px;
      }
      .port-card {
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: var(--r-lg);
        padding: 32px;
        position: relative;
        overflow: hidden;
        transition: all 0.3s;
        cursor: pointer;
        min-height: 280px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
      }
      .port-card:hover {
        transform: translateY(-4px);
        border-color: var(--brand);
        box-shadow: var(--shadow-lg);
      }
      .port-card.feat {
        grid-column: span 1;
        background: linear-gradient(135deg, var(--dark) 0%, var(--dark-2) 100%);
        color: #fff;
      }
      .port-card.feat h3,
      .port-card.feat .port-metric-val {
        color: #fff;
      }
      .port-card.feat p {
        color: rgba(255, 255, 255, 0.75);
      }
      .port-card.feat .port-tag {
        background: rgba(255, 255, 255, 0.1);
        color: #fff;
        border-color: rgba(255, 255, 255, 0.15);
      }
      .port-card.feat::before {
        content: "";
        position: absolute;
        width: 300px;
        height: 300px;
        border-radius: 50%;
        background: radial-gradient(
          circle,
          rgba(92, 163, 128, 0.22),
          transparent 70%
        );
        top: -100px;
        right: -100px;
        pointer-events: none;
      }
      .port-tag {
        display: inline-flex;
        padding: 4px 12px;
        border-radius: 999px;
        font-family: var(--mono);
        font-size: 10px;
        font-weight: 500;
        background: var(--bg-2);
        color: var(--ink-2);
        border: 1px solid var(--border);
        margin-bottom: 16px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        width: max-content;
      }
      .port-card h3 {
        font-size: 26px;
        font-weight: 600;
        margin-bottom: 10px;
        letter-spacing: -0.025em;
      }
      .port-card p {
        font-size: 15px;
        line-height: 1.55;
        color: var(--ink-3);
        margin-bottom: 20px;
      }
      .port-metrics {
        display: flex;
        gap: 28px;
      }
      .port-metric-val {
        font-size: 28px;
        font-weight: 700;
        color: var(--ink);
        letter-spacing: -0.02em;
        line-height: 1;
      }
      .port-metric-lbl {
        font-size: 12px;
        color: var(--muted);
        margin-top: 4px;
      }
      .port-card.feat .port-metric-lbl {
        color: rgba(255, 255, 255, 0.5);
      }

      /* PROCESS */
      .proc-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 16px;
        position: relative;
      }
      .proc-card {
        position: relative;
        padding: 28px;
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: var(--r-lg);
        transition: all 0.3s;
      }
      .proc-card:hover {
        border-color: var(--brand);
        transform: translateY(-3px);
        box-shadow: var(--shadow);
      }
      .proc-num {
        display: inline-block;
        font-family: var(--mono);
        font-size: 13px;
        font-weight: 600;
        color: var(--brand);
        padding: 4px 10px;
        background: var(--brand-soft);
        border-radius: 6px;
        margin-bottom: 18px;
      }
      .proc-ico {
        width: 48px;
        height: 48px;
        border-radius: var(--r);
        background: var(--brand-soft);
        color: var(--brand);
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 16px;
        transition: all 0.3s;
      }
      .proc-ico svg {
        width: 24px;
        height: 24px;
      }
      .proc-card:hover .proc-ico {
        background: var(--brand);
        color: #fff;
        transform: rotate(-6deg) scale(1.08);
      }
      .proc-card h4 {
        font-size: 18px;
        font-weight: 600;
        margin-bottom: 8px;
        letter-spacing: -0.02em;
      }
      .proc-card p {
        font-size: 14px;
        color: var(--ink-3);
        line-height: 1.55;
      }

      /* TIMELINE MINI WIDGET */
      .tl-widget {
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: var(--r-lg);
        padding: 36px;
        position: relative;
        overflow: hidden;
      }
      .tl-widget-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 32px;
        flex-wrap: wrap;
        gap: 20px;
      }
      .tl-widget-head h3 {
        font-size: 24px;
        font-weight: 600;
        letter-spacing: -0.025em;
      }
      .tl-widget-head .serif {
        color: var(--brand);
      }
      .tl-mini {
        position: relative;
        padding: 20px 0 30px;
      }
      .tl-mini::before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: 50%;
        height: 2px;
        background: linear-gradient(
          to right,
          var(--border) 0%,
          var(--brand) 50%,
          var(--border) 100%
        );
        transform: translateY(-50%);
      }
      .tl-mini-track {
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        gap: 0;
        position: relative;
      }
      .tl-mini-point {
        position: relative;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
        cursor: pointer;
      }
      .tl-mini-dot {
        width: 14px;
        height: 14px;
        border-radius: 50%;
        background: var(--surface);
        border: 2px solid var(--brand);
        transition: all 0.3s;
        position: relative;
        z-index: 2;
      }
      .tl-mini-point.highlight .tl-mini-dot {
        background: var(--brand);
        transform: scale(1.4);
        box-shadow: 0 0 0 6px var(--brand-glow);
      }
      .tl-mini-point:hover .tl-mini-dot {
        background: var(--brand);
        transform: scale(1.3);
      }
      .tl-mini-date {
        font-family: var(--mono);
        font-size: 10px;
        font-weight: 600;
        color: var(--muted);
        position: absolute;
        top: -24px;
        left: 50%;
        transform: translateX(-50%);
        white-space: nowrap;
      }
      .tl-mini-label {
        font-size: 12px;
        color: var(--ink-3);
        font-weight: 500;
        position: absolute;
        bottom: -28px;
        left: 50%;
        transform: translateX(-50%);
        white-space: nowrap;
        max-width: 140px;
        text-align: center;
        line-height: 1.3;
      }
      .tl-mini-point.highlight .tl-mini-label {
        color: var(--brand);
        font-weight: 600;
      }

      /* RESULTS */
      .results-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
        align-items: start;
      }
      .result-card {
        padding: 32px;
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: var(--r-lg);
        transition: all 0.4s;
        cursor: pointer;
        position: relative;
        overflow: hidden;
      }
      .result-card:hover {
        transform: translateY(-3px);
        box-shadow: var(--shadow-lg);
        border-color: var(--brand);
      }
      .result-num {
        font-size: 56px;
        font-weight: 700;
        letter-spacing: -0.04em;
        color: var(--ink);
        line-height: 1;
        margin-bottom: 12px;
      }
      .result-num .hl {
        color: var(--brand);
      }
      .result-sub {
        font-size: 14px;
        color: var(--muted);
        font-weight: 500;
        margin-bottom: 14px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        font-family: var(--mono);
      }
      .result-card h4 {
        font-size: 18px;
        font-weight: 600;
        margin-bottom: 8px;
        letter-spacing: -0.015em;
      }
      .result-card p {
        font-size: 14px;
        color: var(--ink-3);
        line-height: 1.55;
      }

      /* result-expand */
      .result-expand {
        max-height: 0;
        overflow: hidden;
        transition:
          max-height 0.5s cubic-bezier(0.2, 0.6, 0.2, 1),
          margin-top 0.5s,
          opacity 0.4s;
        opacity: 0;
      }
      .result-card.open .result-expand {
        max-height: 320px;
        margin-top: 18px;
        opacity: 1;
      }
      .result-expand-inner {
        padding-top: 18px;
        border-top: 1px solid var(--border);
      }
      .result-expand-inner p {
        font-size: 14px;
        color: var(--ink-3);
        line-height: 1.65;
        margin-bottom: 14px;
      }
      .result-toggle {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-family: var(--mono);
        font-size: 12px;
        color: var(--brand);
        font-weight: 600;
        cursor: pointer;
        margin-top: 14px;
        transition: gap 0.2s;
        text-transform: uppercase;
        letter-spacing: 0.5px;
      }
      .result-toggle:hover {
        gap: 10px;
      }
      .result-toggle-arrow {
        display: inline-block;
        transition: transform 0.3s;
        font-size: 14px;
      }
      .result-card.open .result-toggle-arrow {
        transform: rotate(180deg);
      }
      .result-expand .btn-outline {
        padding: 10px 18px;
        font-size: 13px;
      }

      /* Home growth showcase */
      .home-growth {
        background: linear-gradient(135deg, var(--dark) 0%, #183126 100%);
        border-radius: var(--r-xl);
        padding: clamp(36px, 5vw, 64px);
        color: #fff;
        position: relative;
        overflow: hidden;
      }
      .home-growth::before {
        content: "";
        position: absolute;
        width: 720px;
        height: 720px;
        border-radius: 50%;
        background: radial-gradient(
          circle,
          rgba(199, 234, 75, 0.16),
          transparent 70%
        );
        top: -280px;
        right: -180px;
        pointer-events: none;
        animation: blob 20s ease-in-out infinite;
      }
      .home-growth-head {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        gap: 28px;
        margin-bottom: 32px;
        flex-wrap: wrap;
        position: relative;
        z-index: 2;
      }
      .home-growth h2 {
        font-family: var(--display);
        color: var(--bg);
        font-size: clamp(34px, 5vw, 64px);
        font-weight: 500;
        letter-spacing: -0.035em;
        line-height: 1;
        margin-bottom: 14px;
        max-width: 620px;
        text-wrap: balance;
      }
      .home-growth h2 .serif {
        color: var(--accent);
        font-weight: 600;
        font-family: inherit;
        font-style: normal;
      }
      .home-growth .intro {
        color: rgba(255, 255, 255, 0.7);
        font-size: 16px;
        max-width: 440px;
        line-height: 1.55;
      }
      .home-growth-stats {
        display: flex;
        gap: 32px;
        flex-wrap: wrap;
      }
      .hg-stat-val {
        font-family: var(--mono);
        font-size: 28px;
        font-weight: 700;
        color: var(--brand-light);
        letter-spacing: -0.02em;
        line-height: 1;
      }
      .hg-stat-lbl {
        font-size: 12px;
        color: rgba(255, 255, 255, 0.5);
        margin-top: 6px;
        font-family: var(--mono);
        text-transform: uppercase;
        letter-spacing: 0.5px;
      }
      .home-growth-chart {
        background: rgba(255, 255, 255, 0.04);
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: var(--r-lg);
        padding: 28px;
        position: relative;
        z-index: 2;
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
      }
      .hgc-svg {
        width: 100%;
        height: 240px;
        display: block;
      }
      .hgc-svg .axis {
        stroke: rgba(255, 255, 255, 0.08);
        stroke-width: 1;
        stroke-dasharray: 2 4;
      }
      .hgc-svg .axis-label {
        fill: rgba(255, 255, 255, 0.4);
        font-size: 10px;
        font-family: "JetBrains Mono", monospace;
      }
      .hgc-svg .bar {
        fill: var(--brand-light);
        opacity: 0;
        transform-origin: bottom;
        animation: barGrow 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
      }
      .hgc-svg .line {
        fill: none;
        stroke: var(--brand-light);
        stroke-width: 2.5;
        stroke-linecap: round;
        stroke-linejoin: round;
        stroke-dasharray: 2000;
        stroke-dashoffset: 2000;
        animation: drawLine 2.4s cubic-bezier(0.3, 0, 0.2, 1) 0.5s forwards;
      }
      .hgc-svg .area {
        fill: url(#hgcGrad);
        opacity: 0;
        animation: fadeArea 1.5s ease 0.8s forwards;
      }
      .hgc-svg .point {
        fill: var(--brand-light);
        stroke: var(--ink);
        stroke-width: 2;
        opacity: 0;
        animation: popIn 0.35s ease forwards;
      }
      .hgc-svg .point.peak {
        fill: #fff;
        animation-delay: 3s;
        r: 6;
      }
      @keyframes barGrow {
        from {
          transform: scaleY(0);
          opacity: 0;
        }
        to {
          transform: scaleY(1);
          opacity: 0.28;
        }
      }
      .home-growth-foot {
        margin-top: 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        gap: 16px;
        position: relative;
        z-index: 2;
      }
      .home-growth-foot .hgf-label {
        font-size: 12px;
        color: rgba(255, 255, 255, 0.45);
        font-family: var(--mono);
        letter-spacing: 0.5px;
      }
      .home-growth-cta {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 12px 22px;
        background: var(--brand);
        color: #fff;
        border-radius: 999px;
        font-size: 13px;
        font-weight: 600;
        cursor: pointer;
        border: none;
        transition: all 0.25s;
      }
      .home-growth-cta:hover {
        background: #fff;
        color: var(--ink);
        transform: translateY(-2px);
      }

      /* Mini sparkline for result cards */
      .result-spark {
        margin-top: 10px;
        height: 36px;
        width: 100%;
        opacity: 0;
        transform: translateY(6px);
        transition:
          opacity 0.5s,
          transform 0.5s;
      }
      .result-card:hover .result-spark,
      .result-card.open .result-spark {
        opacity: 1;
        transform: none;
      }
      .result-spark svg {
        width: 100%;
        height: 100%;
      }
      .result-spark path.line {
        fill: none;
        stroke: var(--brand);
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
        stroke-dasharray: 400;
        stroke-dashoffset: 400;
        transition: stroke-dashoffset 1.2s cubic-bezier(0.2, 0.7, 0.2, 1) 0.2s;
      }
      .result-card:hover .result-spark path.line,
      .result-card.open .result-spark path.line {
        stroke-dashoffset: 0;
      }
      .result-spark path.area {
        fill: url(#sparkGrad);
        opacity: 0.25;
      }

      /* FAQ */
      .faq-wrap {
        max-width: 760px;
        margin: 0 auto;
      }
      .faq-item {
        border-bottom: 1px solid var(--border);
      }
      .faq-q {
        width: 100%;
        padding: 24px 0;
        background: none;
        border: none;
        font-family: inherit;
        font-size: 17px;
        font-weight: 600;
        color: var(--ink);
        text-align: left;
        cursor: pointer;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 16px;
        transition: color 0.2s;
      }
      .faq-q:hover {
        color: var(--brand);
      }
      .faq-ico {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background: var(--bg-2);
        color: var(--ink);
        font-size: 18px;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.3s;
        flex-shrink: 0;
      }
      .faq-item.open .faq-ico {
        background: var(--brand);
        color: #fff;
        transform: rotate(45deg);
      }
      .faq-a {
        max-height: 0;
        overflow: hidden;
        transition:
          max-height 0.4s ease,
          padding 0.3s ease;
        color: var(--ink-3);
        font-size: 15px;
        line-height: 1.65;
      }
      .faq-item.open .faq-a {
        max-height: 260px;
        padding-bottom: 24px;
      }

      /* CTA BLOCK */
      .cta-block {
        background: linear-gradient(135deg, var(--dark) 0%, var(--dark-2) 100%);
        border-radius: var(--r-xl);
        padding: clamp(40px, 6vw, 80px);
        text-align: center;
        position: relative;
        overflow: hidden;
        color: var(--bg);
      }
      .cta-block::before {
        content: "";
        position: absolute;
        width: 600px;
        height: 600px;
        border-radius: 50%;
        background: radial-gradient(
          circle,
          rgba(92, 163, 128, 0.22),
          transparent 70%
        );
        top: -220px;
        left: 50%;
        transform: translateX(-50%);
        pointer-events: none;
      }
      .cta-block h2 {
        font-family: var(--display);
        color: var(--bg);
        font-size: clamp(38px, 5.5vw, 72px);
        font-weight: 500;
        letter-spacing: -0.035em;
        line-height: 0.98;
        margin-bottom: 22px;
        position: relative;
        text-wrap: balance;
      }
      .cta-block h2 .serif {
        font-family: var(--serif);
        font-style: italic;
        font-weight: 400;
        color: var(--panel-hi);
      }
      .cta-block p {
        color: rgba(242, 239, 230, 0.75);
        font-size: 17px;
        max-width: 520px;
        margin: 0 auto 32px;
        position: relative;
      }
      .cta-block .btn-primary {
        background: var(--panel-hi);
        color: var(--dark);
      }
      .cta-block .btn-primary .btn-arrow {
        background: var(--dark);
        color: var(--panel-hi);
      }
      .cta-block .btn-primary:hover {
        background: var(--bg);
        color: var(--ink);
      }
      .cta-block .btn-ghost {
        color: var(--bg);
        border-color: rgba(242, 239, 230, 0.3);
      }
      .cta-block .btn-ghost:hover {
        background: rgba(242, 239, 230, 0.1);
        border-color: var(--bg);
      }
      .cta-btns {
        display: flex;
        gap: 12px;
        justify-content: center;
        flex-wrap: wrap;
        position: relative;
      }
      .cta-perks {
        display: flex;
        gap: 24px;
        justify-content: center;
        margin-top: 32px;
        flex-wrap: wrap;
        position: relative;
      }
      .cta-perk {
        font-family: var(--mono);
        font-size: 12px;
        color: rgba(242, 239, 230, 0.7);
        display: flex;
        align-items: center;
        gap: 8px;
        letter-spacing: 0.06em;
        text-transform: uppercase;
      }
      .cta-perk::before {
        content: "✦";
        color: var(--panel-hi);
        font-size: 14px;
      }

      /* FOOTER — editorial, emerald forest, spójna paleta z resztą */
      footer {
        background: var(--dark);
        color: var(--bg);
        padding: clamp(64px, 8vw, 96px) 0 36px;
        margin-top: 0;
        position: relative;
        overflow: hidden;
      }
      footer::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 1px;
        background: linear-gradient(
          90deg,
          transparent,
          var(--panel-hi),
          transparent
        );
        opacity: 0.35;
      }
      footer::after {
        content: "";
        position: absolute;
        width: 560px;
        height: 560px;
        border-radius: 50%;
        background: radial-gradient(
          circle,
          rgba(92, 163, 128, 0.18),
          transparent 65%
        );
        top: -260px;
        right: -200px;
        pointer-events: none;
      }
      .footer-inner {
        display: grid;
        grid-template-columns: minmax(260px, 1.6fr) repeat(3, minmax(0, 1fr));
        gap: clamp(28px, 4vw, 56px);
        margin-bottom: 48px;
        position: relative;
        z-index: 2;
      }
      .f-brand {
        display: flex;
        flex-direction: column;
        gap: 18px;
      }
      .f-logo {
        display: flex;
        align-items: center;
        gap: 10px;
        font-family: var(--display);
        font-size: 22px;
        font-weight: 500;
        color: var(--bg);
        letter-spacing: -0.02em;
      }
      .f-logo .nav-logo-text {
        color: var(--bg);
        font-size: 22px;
        font-weight: 500;
        letter-spacing: -0.025em;
      }
      .f-logo .nav-logo-text .dot {
        color: var(--panel-hi);
      }
      .f-logo .nav-logo-dot {
        width: 10px;
        height: 10px;
        background: var(--panel-hi) !important;
        box-shadow: 0 0 12px rgba(232, 223, 184, 0.55);
      }
      .f-tagline {
        font-size: 14.5px;
        color: rgba(242, 239, 230, 0.72);
        line-height: 1.6;
        max-width: 340px;
        text-wrap: pretty;
        margin: 0;
      }
      .f-soc {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
        margin-top: 6px;
      }
      .f-soc a {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 9px 16px 9px 14px;
        border-radius: 999px;
        border: 1px solid rgba(242, 239, 230, 0.18);
        background: rgba(242, 239, 230, 0.04);
        color: var(--bg);
        font-family: var(--mono);
        font-size: 11px;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        transition: all 0.25s;
        cursor: pointer;
        text-decoration: none;
      }
      .f-soc a:hover {
        background: var(--panel-hi);
        color: var(--dark);
        border-color: var(--panel-hi);
      }
      .f-soc a::before {
        content: "→";
        font-size: 10px;
        opacity: 0.6;
        transition: transform 0.25s;
      }
      .f-soc a:hover::before {
        transform: translateX(2px);
        opacity: 1;
      }
      .f-col {
        display: flex;
        flex-direction: column;
        gap: 14px;
      }
      .f-col-title {
        font-family: var(--mono);
        font-size: 10.5px;
        font-weight: 500;
        color: var(--panel-hi);
        text-transform: uppercase;
        letter-spacing: 0.12em;
        margin: 0;
        display: inline-flex;
        align-items: center;
        gap: 10px;
      }
      .f-col-title::before {
        content: "";
        width: 18px;
        height: 1px;
        background: var(--panel-hi);
        opacity: 0.7;
        flex-shrink: 0;
      }
      .f-links {
        display: flex;
        flex-direction: column;
        gap: 11px;
        list-style: none;
        padding: 0;
        margin: 0;
      }
      .f-links a,
      .f-links span {
        font-size: 14px;
        color: rgba(242, 239, 230, 0.82);
        display: inline-flex;
        align-items: center;
        gap: 8px;
        text-decoration: none;
      }
      .f-links a {
        transition:
          color 0.25s,
          transform 0.25s;
        cursor: pointer;
      }
      .f-links a:hover {
        color: var(--panel-hi);
        transform: translateX(3px);
      }
      .f-status {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        color: var(--panel-hi) !important;
      }
      .f-status::before {
        content: "";
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: var(--panel-hi);
        box-shadow: 0 0 8px rgba(232, 223, 184, 0.6);
        animation: pulse 2s infinite;
      }
      .footer-bottom {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-top: 28px;
        border-top: 1px solid rgba(242, 239, 230, 0.12);
        flex-wrap: wrap;
        gap: 14px;
        font-family: var(--mono);
        font-size: 11px;
        color: rgba(242, 239, 230, 0.55);
        letter-spacing: 0.06em;
        text-transform: uppercase;
        position: relative;
        z-index: 2;
      }
      .footer-bottom strong {
        color: var(--panel-hi);
        font-weight: 500;
      }
      @media (max-width: 860px) {
        .footer-inner {
          grid-template-columns: 1fr 1fr;
          gap: 32px;
        }
        .f-brand {
          grid-column: 1/-1;
        }
      }
      @media (max-width: 560px) {
        .footer-inner {
          grid-template-columns: 1fr;
        }
        .footer-bottom {
          flex-direction: column;
          align-items: flex-start;
          gap: 6px;
        }
      }

      /* ========================================================
   OFERTA (SERVICES PAGE)
======================================================== */
      .page-header {
        padding: 150px 0 60px;
        text-align: left;
        position: relative;
      }
      .page-header .container > .reveal {
        position: relative;
      }
      .page-header h1 {
        font-family: var(--display);
        font-size: clamp(56px, 10vw, 160px);
        font-weight: 500;
        letter-spacing: -0.05em;
        line-height: 0.9;
        margin-bottom: 28px;
        color: var(--ink);
        text-wrap: balance;
        font-variation-settings: "opsz" 144;
      }
      .page-header h1 .serif {
        color: var(--brand);
        font-weight: 600;
        font-family: inherit;
        font-style: normal;
      }
      #page-case-elektro .page-header h1 {
        letter-spacing: -0.035em;
        word-spacing: 0.12em;
      }
      .page-header p {
        font-size: 18px;
        color: var(--ink-3);
        max-width: 580px;
        line-height: 1.5;
        text-wrap: pretty;
        padding-left: 48px;
        position: relative;
      }
      .page-header p::before {
        content: "";
        position: absolute;
        left: 0;
        top: 14px;
        width: 32px;
        height: 1px;
        background: var(--brand);
      }
      .page-header .eyebrow {
        margin-bottom: 24px;
        font-size: 11px;
        letter-spacing: 0.14em;
      }

      /* Services list (oferta) */
      .svc-big-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
        margin-top: 48px;
      }
      .svc-big {
        padding: 40px;
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: var(--r-lg);
        transition: all 0.3s;
        position: relative;
      }
      .svc-big:hover {
        border-color: var(--brand);
        transform: translateY(-3px);
        box-shadow: var(--shadow-lg);
      }

      /* Calculator */
      .calc-layout {
        display: grid;
        grid-template-columns: 1fr 380px;
        gap: 24px;
        align-items: start;
        margin-top: 48px;
      }
      .calc-services {
        display: flex;
        flex-direction: column;
        gap: 12px;
      }
      .svc-calc {
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: var(--r-lg);
        overflow: hidden;
        transition: all 0.25s;
      }
      .svc-calc.on {
        border-color: var(--brand);
        box-shadow: 0 0 0 3px var(--brand-glow);
      }
      .svc-head {
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 20px 24px;
        cursor: pointer;
        user-select: none;
      }
      .sh-ico {
        width: 42px;
        height: 42px;
        border-radius: var(--r-sm);
        background: var(--brand-soft);
        color: var(--brand);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        font-weight: 700;
        flex-shrink: 0;
      }
      .sh-ico svg {
        width: 22px;
        height: 22px;
        display: block;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
      }
      .sh-info {
        flex: 1;
        min-width: 0;
      }
      .sh-name {
        font-size: 15px;
        font-weight: 600;
        color: var(--ink);
      }
      .sh-hint {
        font-size: 12px;
        color: var(--muted);
        margin-top: 2px;
      }
      .svc-toggle {
        width: 44px;
        height: 26px;
        border-radius: 999px;
        background: var(--bg-3);
        position: relative;
        transition: all 0.25s;
        flex-shrink: 0;
      }
      .svc-calc.on .svc-toggle {
        background: var(--brand);
      }
      .svc-sw {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background: #fff;
        position: absolute;
        top: 3px;
        left: 3px;
        transition: transform 0.25s;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      }
      .svc-calc.on .svc-sw {
        transform: translateX(18px);
      }
      .svc-body {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.4s ease;
      }
      .svc-calc.on .svc-body {
        max-height: 500px;
      }
      .svc-body-inner {
        padding: 0 24px 24px;
        display: flex;
        flex-direction: column;
        gap: 18px;
        border-top: 1px solid var(--border);
        margin-top: 12px;
        padding-top: 20px;
      }
      .slider-group,
      .chips-group {
        display: flex;
        flex-direction: column;
        gap: 8px;
      }
      .sl-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
      .sl-label {
        font-size: 13px;
        font-weight: 500;
        color: var(--ink-2);
      }
      .sl-value {
        font-size: 13px;
        font-weight: 600;
        color: var(--brand);
      }
      .styled-range {
        width: 100%;
        height: 4px;
        -webkit-appearance: none;
        appearance: none;
        background: var(--bg-3);
        border-radius: 4px;
        outline: none;
      }
      .styled-range::-webkit-slider-thumb {
        -webkit-appearance: none;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background: var(--brand);
        cursor: pointer;
        border: 3px solid #fff;
        box-shadow: 0 0 0 1px var(--brand);
      }
      .styled-range::-moz-range-thumb {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background: var(--brand);
        cursor: pointer;
        border: 3px solid #fff;
        box-shadow: 0 0 0 1px var(--brand);
      }
      .sl-ticks {
        display: flex;
        justify-content: space-between;
        margin-top: 4px;
      }
      .sl-ticks span {
        font-size: 10px;
        color: var(--muted-2);
      }
      .chips-label {
        font-size: 13px;
        font-weight: 500;
        color: var(--ink-2);
      }
      .chips-row {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
      }
      .chip-btn {
        padding: 7px 14px;
        border-radius: 999px;
        font-size: 12.5px;
        font-weight: 500;
        color: var(--ink-3);
        background: var(--surface);
        border: 1px solid var(--border);
        cursor: pointer;
        transition: all 0.2s;
      }
      .chip-btn:hover {
        border-color: var(--brand);
        color: var(--brand);
      }
      .chip-btn.on {
        background: var(--brand);
        color: #fff;
        border-color: var(--brand);
        font-weight: 600;
      }

      .calc-summary-wrap {
        position: sticky;
        top: 88px;
      }
      .calc-summary {
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: var(--r-lg);
        padding: 28px;
        box-shadow: var(--shadow);
      }
      .sum-header {
        margin-bottom: 20px;
        padding-bottom: 16px;
        border-bottom: 1px solid var(--border);
      }
      .sum-title {
        font-size: 16px;
        font-weight: 600;
        color: var(--ink);
      }
      .sum-sub {
        font-size: 13px;
        color: var(--muted);
        margin-top: 4px;
      }
      .sum-empty {
        text-align: center;
        padding: 28px 0;
      }
      .sum-empty p {
        font-size: 13.5px;
        color: var(--muted);
      }
      .sum-items {
        display: flex;
        flex-direction: column;
        gap: 14px;
      }
      .sum-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 14px;
      }
      .sum-item-name {
        font-size: 14px;
        font-weight: 600;
        color: var(--ink);
      }
      .sum-item-price {
        font-size: 13px;
        font-weight: 600;
        color: var(--ink);
        white-space: nowrap;
        font-family: var(--mono);
      }
      .sum-divider {
        height: 1px;
        background: var(--border);
        margin: 18px 0;
      }
      .sum-total {
        display: flex;
        justify-content: space-between;
        margin-bottom: 6px;
        align-items: baseline;
      }
      .sum-total-label {
        font-size: 13px;
        font-weight: 500;
        color: var(--muted);
      }
      .sum-total-val {
        font-size: 18px;
        font-weight: 700;
        color: var(--ink);
        font-family: var(--mono);
      }
      .sum-note {
        font-size: 11.5px;
        color: var(--muted);
        margin-top: 14px;
        line-height: 1.5;
      }
      .sum-cta-btn {
        width: 100%;
        padding: 14px;
        margin-top: 16px;
        background: var(--ink);
        color: #fff;
        border: none;
        border-radius: var(--r-sm);
        font-size: 14px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.2s;
      }
      .sum-cta-btn:hover {
        background: var(--brand);
      }

      /* ========================================================
   PORTFOLIO PAGE
======================================================== */
      .cs-filters {
        display: flex;
        gap: 6px;
        flex-wrap: wrap;
        margin-bottom: 40px;
      }
      .cs-filter {
        padding: 8px 18px;
        border-radius: 999px;
        font-size: 13px;
        font-weight: 500;
        color: var(--ink-3);
        background: var(--surface);
        border: 1px solid var(--border);
        cursor: pointer;
        transition: all 0.2s;
      }
      .cs-filter:hover {
        border-color: var(--brand);
        color: var(--brand);
      }
      .cs-filter.active {
        background: var(--ink);
        color: #fff;
        border-color: var(--ink);
      }
      .cs-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
      }
      .cs-card {
        padding: 0;
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: var(--r-lg);
        display: flex;
        flex-direction: column;
        transition: all 0.3s;
        cursor: pointer;
        overflow: hidden;
        position: relative;
      }
      .cs-card:hover {
        border-color: var(--brand);
        transform: translateY(-5px);
        box-shadow: var(--shadow-xl);
      }
      .cs-cover {
        position: relative;
        padding: 36px;
        background: linear-gradient(
          135deg,
          var(--surface) 0%,
          var(--bg-2) 100%
        );
        overflow: hidden;
      }
      .cs-card.feat .cs-cover {
        background: linear-gradient(135deg, var(--dark) 0%, var(--dark-2) 100%);
        color: #fff;
      }
      .cs-card.feat .cs-cover .cs-card-co,
      .cs-card.feat h3 {
        color: #fff;
      }
      .cs-card.feat .cs-cover .cs-card-co {
        color: rgba(255, 255, 255, 0.6);
      }
      .cs-cover::before {
        content: "";
        position: absolute;
        width: 300px;
        height: 300px;
        border-radius: 50%;
        background: radial-gradient(circle, var(--brand-glow), transparent 70%);
        top: -100px;
        right: -100px;
        pointer-events: none;
        transition: transform 0.6s;
      }
      .cs-card.feat .cs-cover::before {
        background: radial-gradient(
          circle,
          rgba(92, 163, 128, 0.22),
          transparent 70%
        );
      }
      .cs-card:hover .cs-cover::before {
        transform: scale(1.3);
      }
      .cs-cover-top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 24px;
        position: relative;
        z-index: 2;
      }
      .cs-card-top {
        display: flex;
        align-items: center;
        gap: 10px;
      }
      .cs-card-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        box-shadow: 0 0 0 3px currentColor;
        opacity: 0.25;
      }
      .cs-card-dot-wrap {
        color: var(--brand);
      }
      .cs-card-co {
        font-family: var(--mono);
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: 0.8px;
        color: var(--muted);
        font-weight: 600;
      }
      .cs-year {
        font-family: var(--mono);
        font-size: 11px;
        color: var(--muted-2);
        letter-spacing: 1px;
      }
      .cs-card.feat .cs-year {
        color: rgba(255, 255, 255, 0.45);
      }
      .cs-card h3 {
        font-family: var(--display);
        font-size: 32px;
        font-weight: 500;
        margin-bottom: 14px;
        letter-spacing: -0.035em;
        line-height: 1;
        position: relative;
        z-index: 2;
      }
      .cs-card .cs-desc {
        font-size: 15px;
        line-height: 1.55;
        color: var(--ink-3);
        margin-bottom: 24px;
        position: relative;
        z-index: 2;
        text-wrap: pretty;
      }
      .cs-card.feat .cs-desc {
        color: rgba(242, 239, 230, 0.78);
      }

      .cs-metrics {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 0;
        border-top: 1px solid var(--border);
        position: relative;
        z-index: 2;
        background: var(--surface);
      }
      .cs-met {
        padding: 20px 24px;
        border-right: 1px solid var(--border);
      }
      .cs-met:last-child {
        border-right: none;
      }
      .cs-met-val {
        font-size: 22px;
        font-weight: 700;
        color: var(--ink);
        letter-spacing: -0.02em;
        font-family: var(--mono);
        line-height: 1;
      }
      .cs-met-val.brand {
        color: var(--brand);
      }
      .cs-met-val.success {
        color: var(--success);
      }
      .cs-met-lbl {
        font-size: 11px;
        color: var(--muted);
        text-transform: uppercase;
        letter-spacing: 0.5px;
        margin-top: 4px;
        font-weight: 500;
      }

      .cs-footer {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 18px 24px;
        border-top: 1px solid var(--border);
        background: var(--surface);
        gap: 12px;
        flex-wrap: wrap;
      }
      .cs-tags {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
      }
      .cs-tags span {
        padding: 4px 10px;
        border-radius: 999px;
        font-size: 11px;
        background: var(--bg-2);
        color: var(--ink-3);
        border: 1px solid var(--border);
        font-weight: 500;
      }
      .cs-cta {
        font-size: 13px;
        font-weight: 600;
        color: var(--brand);
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 6px;
        transition: gap 0.2s;
        white-space: nowrap;
        margin-left: 12px;
      }
      .cs-card:hover .cs-cta {
        gap: 12px;
      }

      /* Mini chart area inside cover */
      .cs-chart {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 60px;
        opacity: 0.22;
        pointer-events: none;
        z-index: 1;
        transition:
          opacity 0.4s,
          height 0.4s;
      }
      .cs-chart svg {
        width: 100%;
        height: 100%;
      }
      .cs-chart .line {
        fill: none;
        stroke: var(--brand);
        stroke-width: 1.5;
      }
      .cs-card.feat .cs-chart .line {
        stroke: var(--brand-light);
      }
      .cs-chart .area {
        fill: currentColor;
        opacity: 0.18;
      }
      .cs-card:hover .cs-chart {
        opacity: 0.4;
        height: 80px;
      }

      /* Card glow ring — animated border on hover */
      .cs-card {
        position: relative;
      }
      .cs-card::before {
        content: "";
        position: absolute;
        inset: -1px;
        border-radius: inherit;
        padding: 1px;
        background: conic-gradient(
          from 0deg,
          transparent,
          var(--brand),
          transparent 45%
        );
        -webkit-mask:
          linear-gradient(#000 0 0) content-box,
          linear-gradient(#000 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
        opacity: 0;
        transition: opacity 0.4s;
        pointer-events: none;
        animation: spin 4s linear infinite;
        animation-play-state: paused;
      }
      .cs-card:hover::before {
        opacity: 0.6;
        animation-play-state: running;
      }

      /* Corner decoration */
      .cs-corner {
        position: absolute;
        top: 14px;
        right: 14px;
        z-index: 3;
        font-family: var(--mono);
        font-size: 10px;
        color: var(--muted-2);
        letter-spacing: 1px;
        text-transform: uppercase;
        display: flex;
        align-items: center;
        gap: 6px;
        transition: color 0.3s;
      }
      .cs-card.feat .cs-corner {
        color: rgba(255, 255, 255, 0.55);
      }
      .cs-corner-dot {
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: var(--brand);
        box-shadow: 0 0 6px var(--brand);
        animation: pulse 2s infinite;
      }

      /* Expand section inside cs-card */
      .cs-expand {
        max-height: 0;
        overflow: hidden;
        transition:
          max-height 0.5s cubic-bezier(0.2, 0.6, 0.2, 1),
          opacity 0.4s;
        opacity: 0;
        background: linear-gradient(
          180deg,
          var(--bg-2) 0%,
          var(--surface) 100%
        );
        border-top: 1px solid var(--border);
      }
      .cs-card.open .cs-expand {
        max-height: 400px;
        opacity: 1;
      }
      .cs-expand-inner {
        padding: 24px 28px;
      }
      .cs-expand-inner h5 {
        font-family: var(--mono);
        font-size: 11px;
        color: var(--muted);
        letter-spacing: 0.8px;
        text-transform: uppercase;
        margin-bottom: 10px;
        font-weight: 600;
      }
      .cs-expand-inner p {
        font-size: 14.5px;
        line-height: 1.65;
        color: var(--ink-2);
        margin-bottom: 16px;
      }
      .cs-expand-hl {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
        margin-bottom: 16px;
      }
      .cs-expand-hl span {
        padding: 6px 12px;
        border-radius: 999px;
        font-size: 12px;
        font-weight: 600;
        background: var(--brand-soft);
        color: var(--brand);
        border: 1px solid rgba(31, 122, 77, 0.15);
      }
      .cs-expand .btn-primary {
        padding: 11px 20px;
        font-size: 13px;
      }
      .cs-open-indicator {
        position: absolute;
        bottom: 18px;
        right: 28px;
        z-index: 4;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-family: var(--mono);
        font-size: 11px;
        color: var(--brand);
        font-weight: 600;
        letter-spacing: 0.5px;
        text-transform: uppercase;
        cursor: pointer;
        transition: all 0.2s;
      }
      .cs-card:hover .cs-open-indicator {
        gap: 10px;
      }
      .cs-open-indicator-arrow {
        display: inline-block;
        transition: transform 0.35s;
      }
      .cs-card.open .cs-open-indicator-arrow {
        transform: rotate(180deg);
      }

      /* Case detail */
      .case-stats {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 12px;
        margin-top: 36px;
      }
      .case-stat {
        padding: 24px 22px;
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: var(--r-lg);
        transition: all 0.3s;
      }
      .case-stat:hover {
        border-color: var(--brand);
        transform: translateY(-3px);
        box-shadow: var(--shadow-lg);
      }
      .case-stat-val {
        font-size: 28px;
        font-weight: 700;
        color: var(--ink);
        font-family: var(--mono);
        letter-spacing: -0.03em;
        line-height: 1;
      }
      .case-stat-val.ok {
        color: var(--success);
      }
      .case-stat-val.brand {
        color: var(--brand);
      }
      .case-stat-lbl {
        font-size: 11px;
        color: var(--muted);
        text-transform: uppercase;
        letter-spacing: 0.5px;
        margin-top: 10px;
      }

      .case-section {
        padding: 72px 0;
      }
      .case-section.alt {
        background: var(--surface);
        border-top: 1px solid var(--border);
        border-bottom: 1px solid var(--border);
      }
      .case-cta {
        margin-top: clamp(100px, 14vw, 192px);
      }
      .case-head {
        display: flex;
        align-items: baseline;
        gap: 20px;
        margin-bottom: 40px;
        flex-wrap: wrap;
      }
      .case-head-num {
        font-family: var(--display);
        font-style: italic;
        font-size: 72px;
        line-height: 1;
        color: var(--brand);
        opacity: 0.35;
        letter-spacing: -0.03em;
      }
      .case-head-body h2 {
        font-size: clamp(28px, 3.5vw, 44px);
        font-weight: 600;
        letter-spacing: -0.03em;
        line-height: 1.1;
        margin-bottom: 6px;
      }
      .case-head-body h2 .serif {
        color: var(--brand);
      }
      .case-head-body p {
        font-size: 16px;
        color: var(--muted);
        max-width: 620px;
        line-height: 1.6;
      }

      /* Before/After */
      .ba-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
        position: relative;
      }
      .ba-card {
        padding: 32px;
        border-radius: var(--r-lg);
        border: 1px solid var(--border);
        background: var(--surface);
        position: relative;
      }
      .ba-card.before {
        background: linear-gradient(135deg, #fff5f5 0%, #fef3f3 100%);
        border-color: #fecaca;
      }
      .ba-card.after {
        background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 100%);
        border-color: #a7f3d0;
      }
      .ba-tag {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 4px 10px;
        border-radius: 999px;
        font-family: var(--mono);
        font-size: 11px;
        font-weight: 600;
        margin-bottom: 20px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
      }
      .ba-card.before .ba-tag {
        background: #fecaca;
        color: #991b1b;
      }
      .ba-card.after .ba-tag {
        background: #a7f3d0;
        color: #065f46;
      }
      .ba-card h3 {
        font-size: 22px;
        font-weight: 600;
        margin-bottom: 16px;
        letter-spacing: -0.02em;
      }
      .ba-list {
        display: flex;
        flex-direction: column;
        gap: 10px;
      }
      .ba-item {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        font-size: 14.5px;
        color: var(--ink-2);
        line-height: 1.5;
      }
      .ba-item::before {
        flex-shrink: 0;
        margin-top: 6px;
        font-family: var(--mono);
        font-size: 12px;
        font-weight: 700;
      }
      .ba-card.before .ba-item::before {
        content: "✕";
        color: #dc2626;
      }
      .ba-card.after .ba-item::before {
        content: "✓";
        color: #059669;
      }
      .ba-arrow {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 56px;
        height: 56px;
        border-radius: 50%;
        background: var(--ink);
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 22px;
        box-shadow: var(--shadow-lg);
        z-index: 2;
      }

      /* Steps list */
      .steps-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
      }
      .step-card {
        padding: 32px 28px;
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: var(--r-lg);
        transition: all 0.3s;
        position: relative;
      }
      .step-card:hover {
        border-color: var(--brand);
        transform: translateY(-3px);
        box-shadow: var(--shadow-lg);
      }
      .step-num {
        display: inline-block;
        font-family: var(--mono);
        font-size: 12px;
        font-weight: 600;
        color: var(--brand);
        padding: 4px 10px;
        background: var(--brand-soft);
        border-radius: 6px;
        margin-bottom: 16px;
      }
      .step-card h4 {
        font-size: 19px;
        font-weight: 600;
        margin-bottom: 10px;
        letter-spacing: -0.02em;
      }
      .step-card p {
        font-size: 14.5px;
        color: var(--ink-3);
        line-height: 1.6;
      }

      /* Animated growth chart — historical styling */
      .growth-wrap {
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: var(--r-lg);
        padding: 36px;
        margin-top: 20px;
        box-shadow: var(--shadow);
      }
      .growth-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 20px;
        margin-bottom: 24px;
      }
      .growth-title {
        font-size: 20px;
        font-weight: 600;
        letter-spacing: -0.015em;
      }
      .growth-sum {
        display: flex;
        gap: 24px;
        flex-wrap: wrap;
      }
      .growth-sum-item {
        display: flex;
        flex-direction: column;
      }
      .growth-sum-val {
        font-family: var(--mono);
        font-size: 22px;
        font-weight: 700;
        color: var(--ink);
        letter-spacing: -0.02em;
        line-height: 1;
      }
      .growth-sum-lbl {
        font-size: 11px;
        color: var(--muted);
        text-transform: uppercase;
        letter-spacing: 0.5px;
        margin-top: 6px;
        font-family: var(--mono);
      }
      .growth-svg {
        width: 100%;
        height: 300px;
        display: block;
        overflow: visible;
      }
      .growth-svg .axis {
        stroke: var(--border-2);
        stroke-width: 1;
        stroke-dasharray: 2 4;
      }
      .growth-svg .label {
        fill: var(--muted);
        font-size: 11px;
        font-family: "JetBrains Mono", monospace;
      }
      .growth-svg .bar {
        fill: var(--brand);
        opacity: 0.15;
        transition: opacity 0.2s;
      }
      .growth-svg .bar:hover {
        opacity: 0.3;
      }
      .growth-svg .line {
        fill: none;
        stroke: var(--brand);
        stroke-width: 2.5;
        stroke-linejoin: round;
        stroke-linecap: round;
        stroke-dasharray: 1500;
        stroke-dashoffset: 1500;
        animation: drawLine 2.2s cubic-bezier(0.3, 0, 0.2, 1) 0.3s forwards;
      }
      .growth-svg .area {
        fill: url(#gradA);
        opacity: 0;
        animation: fadeArea 1.5s ease 0.5s forwards;
      }
      .growth-svg .point {
        fill: var(--brand);
        stroke: #fff;
        stroke-width: 2;
        opacity: 0;
        transform: scale(0);
        transform-origin: center;
        animation: popIn 0.4s ease forwards;
      }
      .growth-svg .point:hover {
        fill: var(--ink);
      }
      .growth-svg .tooltip-pt {
        cursor: pointer;
      }
      @keyframes drawLine {
        to {
          stroke-dashoffset: 0;
        }
      }
      @keyframes fadeArea {
        to {
          opacity: 0.25;
        }
      }
      @keyframes popIn {
        to {
          opacity: 1;
          transform: scale(1);
        }
      }
      .growth-legend {
        display: flex;
        gap: 18px;
        margin-top: 16px;
        flex-wrap: wrap;
        font-size: 12px;
        color: var(--muted);
        font-family: var(--mono);
      }
      .growth-legend-item {
        display: flex;
        align-items: center;
        gap: 6px;
      }
      .growth-legend-dot {
        width: 10px;
        height: 10px;
        border-radius: 50%;
      }

      /* Strategy list */
      .strategy-list {
        display: flex;
        flex-direction: column;
        gap: 16px;
      }
      .strat-item {
        display: grid;
        grid-template-columns: auto 1fr;
        gap: 28px;
        padding: 24px 0;
        border-bottom: 1px solid var(--border);
        align-items: start;
      }
      .strat-item:last-child {
        border-bottom: none;
      }
      .strat-num {
        font-family: var(--display);
        font-style: italic;
        font-size: 56px;
        color: var(--brand);
        line-height: 1;
        opacity: 0.55;
        letter-spacing: -0.03em;
      }
      .strat-body h4 {
        font-size: 19px;
        font-weight: 600;
        margin-bottom: 8px;
        letter-spacing: -0.015em;
      }
      .strat-body p {
        font-size: 15px;
        color: var(--ink-3);
        line-height: 1.65;
      }

      /* Quote */
      .case-quote {
        padding: 48px 56px 44px 128px;
        background:
          radial-gradient(
            circle at 100% 0%,
            rgba(31, 122, 77, 0.08),
            transparent 34%
          ),
          linear-gradient(145deg, #fffdf7 0%, var(--surface-2) 100%);
        border: 1px solid var(--border);
        border-radius: 26px;
        box-shadow:
          0 18px 44px -32px rgba(13, 26, 19, 0.38),
          inset 0 1px 0 rgba(255, 255, 255, 0.9);
        text-align: left;
        position: relative;
        overflow: hidden;
        color: var(--ink);
      }
      .case-quote::before {
        content: "“";
        position: absolute;
        top: 46px;
        left: 48px;
        width: 56px;
        height: 56px;
        display: grid;
        place-items: center;
        padding-top: 7px;
        border-radius: 50%;
        background: var(--dark);
        box-shadow: 0 10px 24px -14px rgba(13, 26, 19, 0.65);
        font-family: var(--display);
        font-size: 52px;
        font-weight: 600;
        color: var(--panel-hi);
        line-height: 1;
      }
      .case-quote::after {
        content: "";
        position: absolute;
        top: 0;
        right: 48px;
        width: 72px;
        height: 4px;
        border-radius: 0 0 4px 4px;
        background: var(--brand);
        pointer-events: none;
      }
      .case-quote blockquote {
        font-family: var(--display);
        font-style: normal;
        font-weight: 500;
        font-size: clamp(25px, 3vw, 34px);
        color: var(--ink-2);
        max-width: 680px;
        margin: 0;
        line-height: 1.36;
        position: relative;
        letter-spacing: -0.018em;
      }
      .case-quote cite {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-top: 26px;
        font-family: var(--mono);
        font-size: 11px;
        font-weight: 600;
        color: var(--brand-hover);
        font-style: normal;
        letter-spacing: 0.08em;
        position: relative;
        text-transform: uppercase;
      }
      .case-quote cite::before {
        content: "";
        width: 28px;
        height: 1px;
        background: var(--brand-light);
        flex: 0 0 auto;
      }

      /* Takeaways */
      .take-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
      }
      .take-card {
        padding: 28px;
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: var(--r-lg);
        display: flex;
        gap: 20px;
        align-items: flex-start;
        transition: all 0.3s;
      }
      .take-card:hover {
        border-color: var(--brand);
        transform: translateY(-3px);
        box-shadow: var(--shadow);
      }
      .take-arrow {
        flex-shrink: 0;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: var(--brand-soft);
        color: var(--brand);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        font-weight: 700;
      }
      .take-body h4 {
        font-size: 17px;
        font-weight: 600;
        margin-bottom: 8px;
        letter-spacing: -0.015em;
      }
      .take-body p {
        font-size: 14.5px;
        color: var(--ink-3);
        line-height: 1.6;
      }

      /* Data table */
      .data-table-wrap {
        overflow-x: auto;
        border: 1px solid var(--border);
        border-radius: var(--r-sm);
        background: var(--surface);
        margin-top: 24px;
      }
      .data-table {
        width: 100%;
        border-collapse: collapse;
        font-family: var(--mono);
        font-size: 13px;
      }
      .data-table th {
        background: var(--bg-2);
        padding: 14px 18px;
        text-align: left;
        font-size: 11px;
        font-weight: 600;
        color: var(--muted);
        text-transform: uppercase;
        letter-spacing: 0.5px;
        border-bottom: 1px solid var(--border);
      }
      .data-table td {
        padding: 12px 18px;
        border-bottom: 1px solid var(--border);
        color: var(--ink-2);
      }
      .data-table tr:last-child td {
        border-bottom: none;
        background: var(--brand-soft);
        font-weight: 700;
        color: var(--ink);
      }
      .data-table td.num {
        text-align: right;
        font-variant-numeric: tabular-nums;
      }
      .data-table td.pct {
        text-align: right;
        color: var(--muted);
        font-size: 12px;
      }

      /* Financial summary grid */
      .fin-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 14px;
        margin-top: 24px;
      }
      .fin-cell {
        padding: 22px;
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: var(--r-sm);
      }
      .fin-cell.highlight {
        background: linear-gradient(135deg, var(--dark) 0%, var(--dark-2) 100%);
        color: #fff;
        border-color: var(--dark);
      }
      .fin-cell.highlight .fin-lbl {
        color: rgba(255, 255, 255, 0.6);
      }
      .fin-val {
        font-family: var(--mono);
        font-size: 26px;
        font-weight: 700;
        letter-spacing: -0.02em;
        line-height: 1;
      }
      .fin-val.brand {
        color: var(--brand);
      }
      .fin-val.success {
        color: var(--success);
      }
      .fin-cell.highlight .fin-val {
        color: var(--brand-light);
      }
      .fin-lbl {
        font-size: 12px;
        color: var(--muted);
        margin-top: 8px;
        line-height: 1.4;
      }

      /* Case study B2B · układ artykułu */
      .case-source-strip {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
        margin: 26px 0 34px;
      }
      .case-source {
        padding: 20px;
        border: 1px solid var(--border);
        border-radius: 14px;
        background: var(--surface);
      }
      .case-source strong {
        display: block;
        font-family: var(--mono);
        font-size: 13px;
        color: var(--ink);
        margin-bottom: 6px;
      }
      .case-source span {
        display: block;
        font-size: 12px;
        line-height: 1.55;
        color: var(--muted);
      }
      .case-method-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 14px;
      }
      .case-method {
        padding: 25px;
        border: 1px solid var(--border);
        border-radius: var(--r-sm);
        background: var(--surface);
      }
      .case-method b {
        display: block;
        font-size: 16px;
        margin-bottom: 9px;
      }
      .case-method p {
        font-size: 13.5px;
        line-height: 1.65;
        color: var(--ink-3);
      }
      .case-data-note {
        margin-top: 18px;
        padding: 18px 20px;
        border-left: 3px solid var(--brand);
        background: var(--brand-soft);
        font-size: 13px;
        line-height: 1.65;
        color: var(--ink-2);
      }
      .case-data-note strong {
        color: var(--ink);
      }
      .case-chart-caption {
        margin-top: 14px;
        font-size: 12px;
        line-height: 1.6;
        color: var(--muted);
      }
      .case-channel-grid {
        display: grid;
        grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);
        gap: 26px;
        align-items: start;
        margin-top: 28px;
      }
      .case-channel-bars {
        padding: 28px;
        border: 1px solid var(--border);
        border-radius: var(--r-lg);
        background: var(--surface);
      }
      .case-channel-bars h3 {
        font-size: 19px;
        margin-bottom: 22px;
      }
      .channel-row {
        display: grid;
        grid-template-columns: 120px 1fr 70px;
        gap: 12px;
        align-items: center;
        margin: 15px 0;
      }
      .channel-label {
        font-family: var(--mono);
        font-size: 11px;
        color: var(--ink-2);
      }
      .channel-track {
        height: 12px;
        border-radius: 999px;
        background: var(--bg-2);
        overflow: hidden;
        border: 1px solid var(--border);
      }
      .channel-fill {
        display: block;
        height: 100%;
        border-radius: inherit;
        background: var(--brand);
      }
      .channel-value {
        text-align: right;
        font-family: var(--mono);
        font-size: 11px;
        color: var(--muted);
      }
      .case-report-shot {
        margin: 0;
        border: 1px solid var(--border);
        border-radius: var(--r-lg);
        overflow: hidden;
        background: var(--surface);
        box-shadow: var(--shadow);
      }
      .case-report-shot img {
        display: block;
        width: 100%;
        aspect-ratio: 16/9;
        object-fit: contain;
        object-position: center;
        background: #f4f6fa;
      }
      .case-report-shot figcaption {
        padding: 13px 16px;
        border-top: 1px solid var(--border);
        font-size: 11px;
        line-height: 1.5;
        color: var(--muted);
      }
      .case-billing-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 12px;
        margin-top: 24px;
      }
      .case-billing {
        padding: 20px;
        border: 1px solid var(--border);
        border-radius: 12px;
        background: var(--surface);
      }
      .case-billing strong {
        display: block;
        font-family: var(--mono);
        font-size: 21px;
        color: var(--ink);
        margin-bottom: 7px;
      }
      .case-billing span {
        display: block;
        font-size: 11px;
        line-height: 1.45;
        color: var(--muted);
      }
      .case-channel-copy {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 12px;
        margin-top: 24px;
      }
      .case-channel-card {
        padding: 22px;
        border-top: 2px solid var(--border);
        background: var(--surface);
      }
      .case-channel-card.primary {
        border-top-color: var(--brand);
      }
      .case-channel-card strong {
        display: block;
        font-size: 16px;
        margin-bottom: 8px;
      }
      .case-channel-card p {
        font-size: 13px;
        line-height: 1.6;
        color: var(--ink-3);
      }
      .case-stats.case-stats-three {
        grid-template-columns: repeat(3, 1fr);
      }
      .fin-grid.case-fin-three {
        grid-template-columns: repeat(3, 1fr);
      }
      .case-story {
        max-width: 820px;
      }
      .case-story p {
        font-size: 16px;
        line-height: 1.75;
        color: var(--ink-3);
        margin: 0 0 18px;
      }
      .case-story p:last-child {
        margin-bottom: 0;
      }
      .case-brief-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 14px;
        margin-top: 30px;
      }
      .case-brief {
        padding: 24px;
        border: 1px solid var(--border);
        border-radius: var(--r-sm);
        background: var(--surface);
      }
      .case-brief strong {
        display: block;
        font-size: 17px;
        margin-bottom: 8px;
      }
      .case-brief p {
        font-size: 13.5px;
        line-height: 1.6;
        color: var(--ink-3);
        margin: 0;
      }
      .case-flow-wrap {
        margin-top: 42px;
        padding: 28px;
        border: 1px solid var(--border);
        border-radius: var(--r-lg);
        background: var(--surface);
      }
      .case-flow-wrap h3 {
        font-size: 20px;
        letter-spacing: -0.02em;
        margin: 0 0 20px;
      }
      .case-flow {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 28px;
      }
      .case-flow-step {
        position: relative;
        min-width: 0;
        padding: 18px;
        border: 1px solid var(--border);
        border-radius: 12px;
        background: var(--bg);
      }
      .case-flow-step:not(:last-child)::after {
        content: "→";
        position: absolute;
        right: -21px;
        top: 50%;
        transform: translateY(-50%);
        font-family: var(--mono);
        font-size: 16px;
        color: var(--brand);
      }
      .case-flow-step small {
        display: block;
        font-family: var(--mono);
        font-size: 9px;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: var(--brand);
        margin-bottom: 8px;
      }
      .case-flow-step strong {
        display: block;
        font-size: 16px;
        line-height: 1.25;
        margin-bottom: 7px;
      }
      .case-flow-step span {
        display: block;
        font-size: 12px;
        line-height: 1.5;
        color: var(--muted);
      }
      .case-proof-screen {
        margin: 28px 0 0;
        border: 1px solid var(--border);
        border-radius: var(--r-lg);
        overflow: hidden;
        background: var(--surface);
      }
      .case-proof-screen img {
        display: block;
        width: 100%;
        aspect-ratio: 1.75/1;
        object-fit: cover;
        object-position: top left;
      }
      .case-proof-screen figcaption {
        padding: 14px 18px;
        border-top: 1px solid var(--border);
        font-size: 12px;
        line-height: 1.55;
        color: var(--muted);
      }
      .case-margin-visual {
        display: grid;
        grid-template-columns: 240px 1fr;
        gap: 34px;
        align-items: center;
        margin-top: 30px;
        padding: 30px;
        border: 1px solid var(--border);
        border-radius: var(--r-lg);
        background: var(--surface);
      }
      .case-margin-ring {
        width: 190px;
        height: 190px;
        border-radius: 50%;
        display: grid;
        place-items: center;
        background: conic-gradient(var(--brand) 0 37%, var(--bg-2) 37% 100%);
        position: relative;
      }
      .case-margin-ring::after {
        content: "";
        position: absolute;
        inset: 19px;
        border-radius: 50%;
        background: var(--surface);
        border: 1px solid var(--border);
      }
      .case-margin-ring div {
        position: relative;
        z-index: 1;
        text-align: center;
      }
      .case-margin-ring strong {
        display: block;
        font-family: var(--mono);
        font-size: 34px;
        line-height: 1;
        color: var(--brand);
      }
      .case-margin-ring span {
        display: block;
        max-width: 110px;
        margin: 7px auto 0;
        font-size: 10px;
        line-height: 1.35;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: var(--muted);
      }
      .case-margin-copy h3 {
        font-size: 24px;
        letter-spacing: -0.025em;
        margin: 0 0 10px;
      }
      .case-margin-copy p {
        font-size: 14px;
        line-height: 1.7;
        color: var(--ink-3);
        margin: 0;
      }
      .case-margin-scale {
        display: flex;
        justify-content: space-between;
        margin-top: 18px;
        padding-top: 14px;
        border-top: 1px solid var(--border);
        font-family: var(--mono);
        font-size: 10px;
        color: var(--muted);
      }
      @media (max-width: 900px) {
        .case-source-strip,
        .case-method-grid {
          grid-template-columns: 1fr;
        }
        .case-channel-grid {
          grid-template-columns: 1fr;
        }
        .case-billing-grid,
        .case-channel-copy {
          grid-template-columns: repeat(2, 1fr);
        }
      }
      @media (max-width: 900px) {
        .case-stats.case-stats-three,
        .case-brief-grid,
        .fin-grid.case-fin-three {
          grid-template-columns: 1fr;
        }
        .case-flow {
          grid-template-columns: 1fr;
        }
        .case-flow-step:not(:last-child)::after {
          content: "↓";
          right: auto;
          left: 50%;
          top: auto;
          bottom: -24px;
          transform: translateX(-50%);
        }
        .case-margin-visual {
          grid-template-columns: 1fr;
        }
        .case-margin-ring {
          margin: 0 auto;
        }
        .case-proof-screen img {
          aspect-ratio: 1.2/1;
        }
      }
      @media (max-width: 560px) {
        .case-billing-grid,
        .case-channel-copy {
          grid-template-columns: 1fr;
        }
        .channel-row {
          grid-template-columns: 82px 1fr 54px;
          gap: 8px;
        }
        .case-channel-bars {
          padding: 20px;
        }
        .case-report-shot img {
          aspect-ratio: 16/9;
        }
      }

      /* ========================================================
   KONTAKT
======================================================== */
      .kontakt-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        min-height: 100svh;
        padding-top: 80px;
      }
      .k-left {
        background: linear-gradient(160deg, var(--dark) 0%, var(--dark-2) 100%);
        padding: 64px var(--px);
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        position: relative;
        overflow: hidden;
        color: var(--bg);
      }
      .k-left::before {
        content: "";
        position: absolute;
        width: 560px;
        height: 560px;
        border-radius: 50%;
        background: radial-gradient(
          circle,
          rgba(199, 234, 75, 0.14),
          transparent 70%
        );
        bottom: -220px;
        right: -220px;
        pointer-events: none;
      }
      .k-left-content {
        position: relative;
        z-index: 2;
        display: flex;
        flex-direction: column;
        gap: 32px;
      }
      .k-left .eyebrow {
        color: var(--accent);
      }
      .k-left .eyebrow::before,
      .home-growth .eyebrow::before,
      .cta-block .eyebrow::before {
        background: var(--accent);
      }
      .home-growth .eyebrow {
        color: var(--accent) !important;
      }
      .k-title {
        font-size: clamp(36px, 4.5vw, 56px);
        font-weight: 600;
        letter-spacing: -0.03em;
        line-height: 1.05;
        color: #fff;
        margin-bottom: 16px;
      }
      .k-title .serif {
        color: var(--brand-light);
      }
      .k-sub {
        font-size: 16px;
        color: rgba(255, 255, 255, 0.7);
        line-height: 1.65;
        max-width: 380px;
        margin-bottom: 32px;
      }
      .k-perks {
        display: flex;
        flex-direction: column;
        gap: 10px;
        margin-bottom: 32px;
      }
      .k-perk {
        display: flex;
        gap: 12px;
        align-items: flex-start;
        padding: 14px 16px;
        background: rgba(255, 255, 255, 0.06);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: var(--r-sm);
      }
      .k-perk-ico {
        width: 40px;
        height: 40px;
        border-radius: 10px;
        background: var(--brand);
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
      }
      .k-perk-ico svg {
        width: 20px;
        height: 20px;
      }
      .k-perk-title {
        font-size: 14px;
        font-weight: 600;
        color: #fff;
      }
      .k-perk-desc {
        font-size: 12px;
        color: rgba(255, 255, 255, 0.6);
        margin-top: 2px;
      }
      .k-socials {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
      }
      .k-soc {
        padding: 8px 14px;
        border-radius: 999px;
        font-size: 12px;
        font-weight: 500;
        color: rgba(255, 255, 255, 0.85);
        background: rgba(255, 255, 255, 0.06);
        border: 1px solid rgba(255, 255, 255, 0.1);
        transition: all 0.2s;
        cursor: pointer;
      }
      .k-soc:hover {
        background: var(--brand);
        border-color: var(--brand);
        color: #fff;
      }

      .k-right {
        padding: 48px var(--px) 64px;
        display: flex;
        align-items: flex-start;
        justify-content: center;
        overflow-y: auto;
        background: var(--bg-2);
      }
      .k-form-wrap {
        width: 100%;
        max-width: 520px;
      }
      .k-tabs {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 4px;
        padding: 4px;
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: var(--r-sm);
        margin-bottom: 32px;
      }
      .k-tab {
        padding: 12px;
        border-radius: var(--r-xs);
        font-size: 13px;
        font-weight: 500;
        color: var(--muted);
        transition: all 0.2s;
      }
      .k-tab.active {
        background: var(--ink);
        color: #fff;
        font-weight: 600;
      }
      .k-panel {
        display: none;
      }
      .k-panel.active {
        display: block;
      }
      .kp-title {
        font-size: 22px;
        font-weight: 600;
        color: var(--ink);
        margin-bottom: 4px;
        letter-spacing: -0.02em;
      }
      .kp-sub {
        font-size: 14px;
        color: var(--muted);
        margin-bottom: 24px;
      }
      .kf-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
        margin-bottom: 14px;
      }
      .kf-group {
        margin-bottom: 14px;
      }
      .kf-group label {
        display: block;
        font-size: 12px;
        font-weight: 600;
        color: var(--ink-2);
        margin-bottom: 6px;
      }
      .kf-group input,
      .kf-group textarea,
      .kf-group select {
        width: 100%;
        padding: 12px 14px;
        font-size: 14px;
        color: var(--ink);
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: var(--r-sm);
        outline: none;
        transition:
          border-color 0.2s,
          box-shadow 0.2s;
      }
      .kf-group input:focus,
      .kf-group textarea:focus,
      .kf-group select:focus {
        border-color: var(--brand);
        box-shadow: 0 0 0 3px var(--brand-glow);
      }
      .kf-group input::placeholder,
      .kf-group textarea::placeholder {
        color: var(--muted-2);
      }
      .kf-group textarea {
        resize: vertical;
        min-height: 88px;
        line-height: 1.55;
      }
      .kf-checks {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
      }
      .kf-check {
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 7px 14px;
        border-radius: 999px;
        cursor: pointer;
        font-size: 12.5px;
        font-weight: 500;
        color: var(--ink-3);
        background: var(--surface);
        border: 1px solid var(--border);
        transition: all 0.15s;
      }
      .kf-check input {
        display: none;
      }
      .kf-check:has(input:checked) {
        background: var(--brand);
        color: #fff;
        border-color: var(--brand);
        font-weight: 600;
      }
      .kf-hint {
        display: flex;
        justify-content: flex-end;
        font-size: 11px;
        color: var(--muted);
        margin-top: 4px;
      }
      .cal-grid {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        gap: 3px;
        margin-top: 6px;
      }
      .cal-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 10px;
      }
      .cal-month {
        font-size: 14px;
        font-weight: 600;
        color: var(--ink);
      }
      .cal-nav {
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: var(--r-xs);
        padding: 4px 10px;
        cursor: pointer;
        font-size: 14px;
        color: var(--ink-2);
        transition: all 0.2s;
      }
      .cal-nav:hover {
        border-color: var(--brand);
        color: var(--brand);
      }
      .cal-day-head {
        font-size: 10px;
        font-weight: 600;
        color: var(--muted);
        text-align: center;
        padding: 4px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
      }
      .cal-day {
        font-size: 12.5px;
        text-align: center;
        padding: 9px 4px;
        border-radius: var(--r-xs);
        cursor: pointer;
        color: var(--ink-2);
        transition: all 0.15s;
        border: 1px solid transparent;
      }
      .cal-day:hover {
        background: var(--brand-soft);
        color: var(--brand);
        border-color: var(--brand);
      }
      .cal-day.selected {
        background: var(--brand);
        color: #fff;
        font-weight: 700;
        border-color: var(--brand);
      }
      .cal-day.empty {
        cursor: default;
        opacity: 0;
      }
      .cal-day.past {
        opacity: 0.3;
        cursor: not-allowed;
      }
      .cal-day.past:hover {
        background: transparent;
        color: var(--ink-2);
        border-color: transparent;
      }

      /* Time slot picker */
      .time-slots {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 6px;
        margin-top: 8px;
      }
      .time-slot {
        padding: 10px 6px;
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: var(--r-sm);
        font-family: var(--mono);
        font-size: 12.5px;
        font-weight: 500;
        color: var(--ink-2);
        cursor: pointer;
        transition: all 0.15s;
        text-align: center;
      }
      .time-slot:hover {
        border-color: var(--brand);
        color: var(--brand);
      }
      .time-slot.selected {
        background: var(--brand);
        color: #fff;
        border-color: var(--brand);
        font-weight: 700;
      }
      .time-slot.taken {
        opacity: 0.3;
        cursor: not-allowed;
        text-decoration: line-through;
      }
      .time-slot.taken:hover {
        border-color: var(--border);
        color: var(--ink-2);
      }

      /* Live availability viz (k-left) */
      .k-live {
        background: rgba(255, 255, 255, 0.06);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: var(--r-lg);
        padding: 22px;
        margin-top: 8px;
        position: relative;
        overflow: hidden;
      }
      .k-live-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 16px;
        flex-wrap: wrap;
        gap: 10px;
      }
      .k-live-title {
        font-family: var(--mono);
        font-size: 11px;
        color: rgba(255, 255, 255, 0.7);
        text-transform: uppercase;
        letter-spacing: 0.8px;
      }
      .k-live-status {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-size: 12px;
        color: var(--brand-light);
        font-family: var(--mono);
      }
      .k-live-status::before {
        content: "";
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--success);
        box-shadow: 0 0 8px var(--success);
        animation: pulse 1.6s infinite;
      }
      .k-live-grid {
        display: grid;
        grid-template-columns: auto repeat(7, 1fr);
        gap: 4px;
        margin-bottom: 14px;
      }
      .k-live-gh {
        font-family: var(--mono);
        font-size: 9px;
        color: rgba(255, 255, 255, 0.45);
        text-align: center;
        padding: 4px 0;
        letter-spacing: 0.5px;
        text-transform: uppercase;
      }
      .k-live-gh.day-label {
        text-align: right;
        padding-right: 6px;
      }
      .k-live-cell {
        aspect-ratio: 1;
        border-radius: 3px;
        background: rgba(255, 255, 255, 0.06);
        transition: all 0.3s;
        cursor: help;
        position: relative;
      }
      .k-live-cell.level-1 {
        background: rgba(199, 234, 75, 0.14);
      }
      .k-live-cell.level-2 {
        background: rgba(96, 165, 250, 0.4);
      }
      .k-live-cell.level-3 {
        background: rgba(96, 165, 250, 0.65);
      }
      .k-live-cell.level-4 {
        background: rgba(96, 165, 250, 0.9);
        box-shadow: 0 0 10px rgba(96, 165, 250, 0.4);
      }
      .k-live-cell:hover {
        transform: scale(1.3);
        z-index: 2;
        outline: 1px solid rgba(96, 165, 250, 0.8);
      }
      .k-live-foot {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-family: var(--mono);
        font-size: 10px;
        color: rgba(255, 255, 255, 0.5);
        letter-spacing: 0.5px;
      }
      .k-live-scale {
        display: flex;
        align-items: center;
        gap: 4px;
      }
      .k-live-scale-dot {
        width: 10px;
        height: 10px;
        border-radius: 2px;
      }
      .k-live-count-num {
        font-size: 22px;
        font-weight: 700;
        color: #fff;
        font-family: var(--mono);
        letter-spacing: -0.02em;
        display: block;
        line-height: 1;
      }
      .k-live-count-lbl {
        font-size: 10px;
        color: rgba(255, 255, 255, 0.5);
        margin-top: 3px;
        font-family: var(--mono);
        text-transform: uppercase;
      }
      .k-submit {
        width: 100%;
        padding: 14px;
        margin-top: 10px;
        background: var(--ink);
        color: #fff;
        border: none;
        border-radius: var(--r-sm);
        font-size: 14px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.2s;
      }
      .k-submit:hover {
        background: var(--brand);
        box-shadow: 0 8px 20px var(--brand-glow);
      }
      .kf-note {
        font-size: 12px;
        color: var(--muted);
        text-align: center;
        margin-top: 12px;
      }
      .kf-note strong {
        color: var(--brand);
      }
      .k-success {
        display: none;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        min-height: 380px;
        gap: 14px;
      }
      .k-suc-icon {
        width: 72px;
        height: 72px;
        border-radius: 50%;
        background: var(--success);
        color: #fff;
        font-size: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 700;
      }
      .k-suc-title {
        font-size: 26px;
        font-weight: 600;
        color: var(--ink);
        letter-spacing: -0.02em;
      }
      .k-suc-desc {
        font-size: 15px;
        color: var(--muted);
      }

      /* ========================================================
   O MNIE — ULTRA MODERN HORIZONTAL TIMELINE
======================================================== */
      .about-hero {
        padding: 140px 0 80px;
        position: relative;
        overflow: hidden;
      }
      .about-hero-grid {
        display: grid;
        grid-template-columns: 1.3fr 0.7fr;
        gap: 64px;
        align-items: center;
      }
      .about-hero h1 {
        font-family: var(--display);
        font-size: clamp(56px, 9vw, 140px);
        font-weight: 500;
        letter-spacing: -0.045em;
        line-height: 0.92;
        margin-bottom: 24px;
        color: var(--ink);
        text-wrap: balance;
      }
      .about-hero h1 .serif {
        color: var(--brand);
        font-weight: 600;
        font-family: inherit;
        font-style: normal;
      }
      .about-hero-role {
        font-family: var(--mono);
        font-size: 12px;
        color: var(--brand);
        margin-bottom: 26px;
        font-weight: 500;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        display: inline-flex;
        align-items: center;
        gap: 10px;
      }
      .about-hero-role::before {
        content: "";
        width: 22px;
        height: 1px;
        background: var(--brand);
      }
      .about-hero p {
        font-size: 18px;
        color: var(--ink-3);
        line-height: 1.55;
        max-width: 520px;
        margin-bottom: 28px;
        text-wrap: pretty;
      }
      .about-pills {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
      }
      .about-pill {
        padding: 7px 14px;
        border-radius: 999px;
        font-size: 12.5px;
        font-weight: 500;
        color: var(--ink-2);
        background: var(--surface);
        border: 1px solid var(--border);
      }
      .about-portrait {
        aspect-ratio: 3/4;
        border-radius: var(--r-lg);
        background: linear-gradient(135deg, var(--brand-soft), var(--bg-3));
        position: relative;
        overflow: hidden;
        display: flex;
        align-items: flex-end;
        padding: 28px;
        box-shadow: var(--shadow-lg);
      }
      .about-portrait::before {
        content: "FD";
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: var(--display);
        font-size: 160px;
        color: var(--brand);
        opacity: 0.25;
        letter-spacing: -0.05em;
      }
      .about-portrait-tag {
        position: relative;
        z-index: 2;
        background: rgba(255, 255, 255, 0.9);
        backdrop-filter: blur(8px);
        padding: 14px 20px;
        border-radius: var(--r-sm);
        font-size: 13px;
        color: var(--ink-2);
        line-height: 1.5;
        box-shadow: var(--shadow);
      }

      /* Horizontal scroll timeline */
      .tl-horizontal {
        padding: 60px 0;
        position: relative;
        overflow: hidden;
      }
      .tl-h-head {
        max-width: var(--mw);
        margin: 0 auto;
        padding: 0 var(--px) 40px;
      }
      .tl-h-head h2 {
        font-size: clamp(36px, 5vw, 64px);
        font-weight: 600;
        letter-spacing: -0.03em;
      }
      .tl-h-head h2 .serif {
        color: var(--brand);
      }
      .tl-h-head .hint {
        font-size: 14px;
        color: var(--muted);
        margin-top: 10px;
        display: flex;
        align-items: center;
        gap: 10px;
      }
      .tl-h-head .hint-arrow {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-family: var(--mono);
        font-size: 12px;
        color: var(--brand);
        font-weight: 600;
      }
      .tl-track-wrap {
        position: relative;
        padding-bottom: 30px;
      }
      .tl-track-line {
        position: absolute;
        top: 50%;
        left: 0;
        right: 0;
        height: 2px;
        background: linear-gradient(
          to right,
          var(--border) 0%,
          var(--brand) 20%,
          var(--brand) 80%,
          var(--border) 100%
        );
        transform: translateY(-50%);
        z-index: 1;
      }
      .tl-track {
        display: flex;
        gap: 24px;
        overflow-x: auto;
        padding: 80px var(--px);
        scrollbar-width: none;
        position: relative;
        z-index: 2;
        scroll-behavior: smooth;
      }
      .tl-track::-webkit-scrollbar {
        display: none;
      }
      .tl-node {
        flex: 0 0 340px;
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: var(--r-lg);
        padding: 28px;
        position: relative;
        transition: all 0.4s cubic-bezier(0.2, 0.6, 0.2, 1);
        box-shadow: var(--shadow-sm);
      }
      .tl-node::before {
        content: "";
        position: absolute;
        top: -40px;
        left: 50%;
        transform: translateX(-50%);
        width: 2px;
        height: 20px;
        background: var(--brand);
      }
      .tl-node::after {
        content: "";
        position: absolute;
        top: -56px;
        left: 50%;
        transform: translateX(-50%);
        width: 16px;
        height: 16px;
        border-radius: 50%;
        background: var(--surface);
        border: 3px solid var(--brand);
        box-shadow: 0 0 0 4px var(--brand-glow);
        z-index: 3;
        transition: all 0.3s;
      }
      .tl-node:hover {
        transform: translateY(-6px);
        box-shadow: var(--shadow-xl);
        border-color: var(--brand);
      }
      .tl-node:hover::after {
        background: var(--brand);
        transform: translateX(-50%) scale(1.3);
        box-shadow: 0 0 0 6px var(--brand-glow);
      }
      .tl-node.highlight {
        background: linear-gradient(135deg, var(--dark) 0%, var(--dark-2) 100%);
        color: #fff;
        border-color: var(--dark);
      }
      .tl-node.highlight h4 {
        color: #fff;
      }
      .tl-node.highlight p {
        color: rgba(255, 255, 255, 0.75);
      }
      .tl-node.highlight .tl-node-date {
        color: var(--panel-hi);
      }
      .tl-node.highlight .tl-tag {
        background: rgba(232, 223, 184, 0.16);
        color: var(--panel-hi);
        border-color: rgba(232, 223, 184, 0.3);
      }
      .tl-node-date {
        font-family: var(--mono);
        font-size: 13px;
        font-weight: 600;
        color: var(--brand);
        margin-bottom: 14px;
        letter-spacing: -0.02em;
      }
      .tl-node h4 {
        font-size: 22px;
        font-weight: 600;
        margin-bottom: 10px;
        letter-spacing: -0.02em;
      }
      .tl-node p {
        font-size: 14.5px;
        color: var(--ink-3);
        line-height: 1.55;
        margin-bottom: 16px;
      }
      .tl-tags {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
      }
      .tl-tag {
        padding: 4px 10px;
        border-radius: 999px;
        font-size: 11px;
        font-weight: 500;
        background: var(--brand-soft);
        color: var(--brand);
        border: 1px solid var(--brand-soft);
      }
      .tl-metric {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 6px 12px;
        background: rgba(16, 185, 129, 0.1);
        color: var(--success);
        border-radius: 999px;
        font-family: var(--mono);
        font-size: 12px;
        font-weight: 600;
        margin-bottom: 14px;
        border: 1px solid rgba(16, 185, 129, 0.2);
      }
      .tl-node.highlight .tl-metric {
        background: rgba(16, 185, 129, 0.2);
        border-color: rgba(16, 185, 129, 0.35);
      }
      .tl-progress {
        max-width: var(--mw);
        margin: 20px auto 0;
        padding: 0 var(--px);
        display: flex;
        align-items: center;
        gap: 16px;
      }
      .tl-progress-bar {
        flex: 1;
        height: 4px;
        background: var(--border);
        border-radius: 999px;
        overflow: hidden;
        position: relative;
      }
      .tl-progress-fill {
        position: absolute;
        inset: 0;
        background: var(--brand);
        width: 0;
        transition: width 0.25s ease-out;
        border-radius: 999px;
      }
      .tl-progress-count {
        font-family: var(--mono);
        font-size: 12px;
        color: var(--muted);
        font-weight: 500;
        min-width: 60px;
        text-align: right;
      }
      .tl-progress-count span {
        color: var(--brand);
        font-weight: 700;
      }
      .tl-nav-btn {
        width: 44px;
        height: 44px;
        border-radius: 50%;
        background: var(--surface);
        border: 1px solid var(--border);
        color: var(--ink);
        font-size: 18px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.2s;
        flex-shrink: 0;
        box-shadow: var(--shadow-sm);
      }
      .tl-nav-btn:hover {
        background: var(--ink);
        color: #fff;
        border-color: var(--ink);
        transform: scale(1.08);
      }
      .tl-nav-btn:active {
        transform: scale(0.95);
      }
      .tl-nav-btn:disabled {
        opacity: 0.35;
        cursor: not-allowed;
      }
      .tl-nav-btn:disabled:hover {
        background: var(--surface);
        color: var(--ink);
        transform: none;
      }
      .tl-track {
        cursor: grab;
      }
      .tl-track.dragging {
        cursor: grabbing;
        scroll-snap-type: none;
      }
      .tl-track.dragging .tl-node {
        pointer-events: none;
      }

      /* Extended about sections */
      .about-bio {
        padding: 80px 0;
        border-top: 1px solid var(--border);
      }
      .about-bio-grid {
        display: grid;
        grid-template-columns: 1fr 1.2fr;
        gap: 56px;
        align-items: start;
      }
      .about-bio h3 {
        font-size: 14px;
        font-weight: 600;
        color: var(--muted);
        text-transform: uppercase;
        letter-spacing: 0.8px;
        font-family: var(--mono);
        margin-bottom: 24px;
      }
      .about-bio-text p {
        font-size: 17px;
        line-height: 1.7;
        color: var(--ink-2);
        margin-bottom: 18px;
      }
      .about-bio-text p strong {
        color: var(--ink);
        font-weight: 600;
      }
      .about-quote {
        padding: 24px 28px;
        background: var(--brand-soft);
        border-left: 3px solid var(--brand);
        border-radius: 0 var(--r-sm) var(--r-sm) 0;
        margin: 24px 0;
        font-family: var(--display);
        font-style: italic;
        font-size: 20px;
        color: var(--ink);
        line-height: 1.45;
      }

      .stack-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
        margin-top: 24px;
      }
      .stack-cat h4 {
        font-size: 13px;
        font-weight: 600;
        color: var(--muted);
        text-transform: uppercase;
        letter-spacing: 0.5px;
        font-family: var(--mono);
        margin-bottom: 12px;
      }
      .stack-list {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
      }
      .stack-tag {
        padding: 7px 14px;
        border-radius: 999px;
        font-size: 12.5px;
        font-weight: 500;
        background: var(--surface);
        color: var(--ink-2);
        border: 1px solid var(--border);
        transition: all 0.2s;
        cursor: pointer;
        position: relative;
      }
      .stack-tag:hover {
        background: var(--brand-soft);
        color: var(--brand);
        border-color: var(--brand);
        transform: translateY(-2px);
      }
      .stack-tag.active {
        background: var(--brand);
        color: #fff;
        border-color: var(--brand);
      }

      /* Stack popup — liquid glass bubble */
      .stack-pop {
        position: fixed;
        z-index: 800;
        pointer-events: none;
        opacity: 0;
        transform: translate(-50%, calc(-100% - 20px)) scale(0.9);
        transition:
          opacity 0.25s cubic-bezier(0.2, 0.6, 0.2, 1),
          transform 0.3s cubic-bezier(0.2, 0.6, 0.2, 1);
        max-width: 280px;
        min-width: 220px;
        padding: 18px 20px;
        background: linear-gradient(
          135deg,
          rgba(255, 255, 255, 0.78) 0%,
          rgba(255, 255, 255, 0.88) 50%,
          rgba(255, 255, 255, 0.72) 100%
        );
        backdrop-filter: blur(22px) saturate(1.8);
        -webkit-backdrop-filter: blur(22px) saturate(1.8);
        border: 1px solid rgba(255, 255, 255, 0.7);
        border-radius: 18px;
        box-shadow:
          0 14px 50px rgba(11, 20, 38, 0.18),
          0 4px 12px rgba(11, 20, 38, 0.08),
          inset 0 1px 0 rgba(255, 255, 255, 0.95),
          inset 0 -1px 0 rgba(255, 255, 255, 0.3);
        color: var(--ink-2);
        font-size: 13.5px;
        line-height: 1.55;
      }
      .stack-pop.show {
        opacity: 1;
        transform: translate(-50%, calc(-100% - 14px)) scale(1);
        pointer-events: auto;
      }
      .stack-pop::before {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        border-radius: inherit;
        background: linear-gradient(
          180deg,
          rgba(255, 255, 255, 0.4) 0%,
          transparent 50%
        );
        mix-blend-mode: overlay;
        opacity: 0.6;
      }
      .stack-pop::after {
        content: "";
        position: absolute;
        bottom: -7px;
        left: 50%;
        transform: translateX(-50%) rotate(45deg);
        width: 14px;
        height: 14px;
        background: linear-gradient(
          135deg,
          rgba(255, 255, 255, 0.72),
          rgba(255, 255, 255, 0.88)
        );
        backdrop-filter: blur(22px) saturate(1.8);
        border-right: 1px solid rgba(255, 255, 255, 0.7);
        border-bottom: 1px solid rgba(255, 255, 255, 0.7);
      }
      .stack-pop-title {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 8px;
        font-weight: 700;
        color: var(--ink);
        font-size: 14px;
        letter-spacing: -0.01em;
      }
      .stack-pop-title-ic {
        width: 26px;
        height: 26px;
        border-radius: 8px;
        background: var(--brand);
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 13px;
        font-weight: 700;
        flex-shrink: 0;
        font-family: var(--mono);
      }
      .stack-pop-body {
        color: var(--ink-3);
        font-size: 13px;
        line-height: 1.6;
      }
      .stack-pop-tag {
        display: inline-block;
        margin-top: 10px;
        padding: 3px 10px;
        border-radius: 999px;
        font-family: var(--mono);
        font-size: 10.5px;
        font-weight: 600;
        background: rgba(31, 122, 77, 0.15);
        color: var(--brand);
        letter-spacing: 0.5px;
        text-transform: uppercase;
      }

      /* Fun facts */
      .fun-facts {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 16px;
        margin-top: 40px;
      }
      .fun-fact {
        padding: 28px 22px;
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: var(--r-lg);
        text-align: center;
        transition: all 0.3s;
      }
      .fun-fact:hover {
        transform: translateY(-4px);
        box-shadow: var(--shadow);
        border-color: var(--brand);
      }
      .fun-fact-ico {
        width: 48px;
        height: 48px;
        margin: 0 auto 14px;
        border-radius: 50%;
        background: var(--brand-soft);
        color: var(--brand);
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .fun-fact-ico svg {
        width: 24px;
        height: 24px;
      }
      .fun-fact-val {
        font-size: 26px;
        font-weight: 700;
        color: var(--ink);
        letter-spacing: -0.02em;
        font-family: var(--mono);
        line-height: 1;
      }
      .fun-fact-lbl {
        font-size: 12px;
        color: var(--muted);
        margin-top: 6px;
        line-height: 1.4;
      }

      /* Rules */
      .rules-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
        margin-top: 40px;
      }
      .rule-card {
        padding: 32px 28px;
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: var(--r-lg);
        position: relative;
        transition: all 0.3s;
      }
      .rule-card:hover {
        border-color: var(--brand);
        transform: translateY(-3px);
        box-shadow: var(--shadow);
      }
      .rule-num {
        font-family: var(--display);
        font-size: 64px;
        font-style: italic;
        font-weight: 400;
        color: var(--brand);
        opacity: 0.2;
        position: absolute;
        top: 8px;
        right: 20px;
        line-height: 1;
        transition:
          opacity 0.3s,
          transform 0.3s;
      }
      .rule-card:hover .rule-num {
        opacity: 0.45;
        transform: rotate(-6deg) scale(1.1);
      }
      .rule-ico {
        width: 44px;
        height: 44px;
        border-radius: 10px;
        background: var(--brand-soft);
        color: var(--brand);
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 16px;
        transition: all 0.3s;
      }
      .rule-ico svg {
        width: 22px;
        height: 22px;
      }
      .rule-card:hover .rule-ico {
        background: var(--brand);
        color: #fff;
      }
      .rule-card h4 {
        font-size: 17px;
        font-weight: 600;
        margin-bottom: 8px;
        letter-spacing: -0.015em;
      }
      .rule-card p {
        font-size: 14px;
        color: var(--ink-3);
        line-height: 1.6;
      }

      /* ========================================================
   APLIKACJE — Studio OS (editorial, retro-restrained)
   muted forest + paper + minimal accent
======================================================== */
      /* ============================================================
   NARZĘDZIA — 2 TABS: LANDING (SEO) + SYSTEM (retro Win98)
   Landing: normalna scrollowana strona, System: fullscreen
============================================================ */
      #page-aplikacje.active {
        display: block;
        min-height: 100vh;
      }
      #page-aplikacje:not(.show-system) .nar-sys {
        display: none;
      }
      #page-aplikacje.show-system .nar-landing {
        display: none;
      }
      /* Nav chowamy tylko w trybie Win98 (retro system). Na Landing nav jest widoczny, a .nar-tabs leży pod nim jako submenu */
      body.w98-mode nav,
      body.w98-mode footer {
        display: none;
      }

      /* TAB SWITCHER — pill pod głównym nav jako submenu */
      .nar-tabs {
        position: fixed;
        top: 88px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 450;
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: 999px;
        padding: 4px;
        box-shadow:
          0 10px 30px -10px rgba(13, 26, 19, 0.18),
          0 2px 8px rgba(13, 26, 19, 0.06);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        transition:
          transform 0.35s cubic-bezier(0.2, 0.6, 0.2, 1),
          opacity 0.3s;
      }
      /* Pozostałość starszego trybu narzędzi pozostaje niedostępna w interfejsie. */
      body.w98-mode .nar-tabs {
        display: none;
      }
      body.nav-hidden #page-aplikacje:not(.show-system) .nar-tabs {
        transform: translateX(-50%) translateY(-24px);
        opacity: 0.6;
      }
      body.nav-hidden #page-aplikacje:not(.show-system) .nar-tabs:hover {
        transform: translateX(-50%);
        opacity: 1;
      }
      .nar-tabs-inner {
        display: flex;
        align-items: center;
        gap: 4px;
      }
      .nar-tabs-label {
        font-family: var(--mono);
        font-size: 10px;
        color: var(--muted);
        letter-spacing: 0.12em;
        text-transform: uppercase;
        padding: 0 10px 0 8px;
        font-weight: 500;
      }
      body.w98-mode .nar-tabs-label {
        color: rgba(242, 239, 230, 0.55);
      }
      .nar-tab {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 8px 16px;
        background: transparent;
        border: none;
        border-radius: 999px;
        font-family: inherit;
        font-size: 13px;
        font-weight: 500;
        color: var(--ink-2);
        cursor: pointer;
        transition: all 0.25s;
        letter-spacing: -0.005em;
        position: relative;
      }
      body.w98-mode .nar-tab {
        color: rgba(242, 239, 230, 0.7);
      }
      .nar-tab:hover {
        color: var(--ink);
        background: var(--bg-2);
      }
      body.w98-mode .nar-tab:hover {
        color: var(--c-ink);
        background: rgba(242, 239, 230, 0.08);
      }
      .nar-tab.active {
        background: var(--brand);
        color: var(--bg);
      }
      body.w98-mode .nar-tab.active {
        background: var(--c-cyan);
        color: var(--c-bg);
      }
      .nar-tab-ico {
        font-size: 13px;
        opacity: 0.85;
      }
      .nar-tab-badge {
        font-family: var(--mono);
        font-size: 8.5px;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        padding: 2px 6px;
        border-radius: 999px;
        background: rgba(242, 239, 230, 0.2);
        color: var(--bg);
        font-weight: 600;
        margin-left: 2px;
      }
      .nar-tab:not(.active) .nar-tab-badge {
        background: var(--bg-2);
        color: var(--brand);
      }
      body.w98-mode .nar-tab:not(.active) .nar-tab-badge {
        background: rgba(92, 163, 128, 0.2);
        color: var(--c-cyan);
      }
      @media (max-width: 560px) {
        .nar-tabs-label {
          display: none;
        }
        .nar-tab {
          padding: 7px 12px;
          font-size: 12px;
        }
        .nar-tab-badge {
          display: none;
        }
      }

      /* LANDING — normal scrollable page (padding-top żeby nav+tabs nie zasłaniały hero) */
      .nar-landing {
        padding: 168px 0 96px;
        min-height: 100vh;
        position: relative;
      }
      @media (max-width: 560px) {
        .nar-landing {
          padding-top: 150px;
        }
      }
      .nar-hero {
        margin-bottom: clamp(48px, 6vw, 88px);
      }
      .nar-hero-meta {
        display: flex;
        justify-content: space-between;
        gap: 24px;
        flex-wrap: wrap;
        margin-bottom: 32px;
        font-family: var(--mono);
        font-size: 11px;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--muted);
      }
      .nar-hero-meta strong {
        color: var(--brand);
        font-weight: 500;
      }
      .nar-hero-title {
        font-family: var(--display);
        font-size: clamp(44px, 7.5vw, 128px);
        font-weight: 500;
        letter-spacing: -0.05em;
        line-height: 0.9;
        color: var(--ink);
        margin: 0 0 32px;
        text-wrap: balance;
      }
      .nar-hero-title .ital {
        color: var(--brand);
        font-weight: 600;
      }
      .nar-hero-lead {
        font-size: 18px;
        line-height: 1.55;
        color: var(--ink-3);
        max-width: 62ch;
        margin: 0 0 36px;
        text-wrap: pretty;
      }
      .nar-hero-lead strong {
        color: var(--ink);
        font-weight: 500;
      }
      /* GRID kart narzędzi */
      .nar-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 14px;
        margin-bottom: clamp(56px, 7vw, 96px);
      }
      @media (max-width: 960px) {
        .nar-grid {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }
      }
      @media (max-width: 560px) {
        .nar-grid {
          grid-template-columns: 1fr;
        }
      }
      .nar-card {
        display: flex;
        flex-direction: column;
        gap: 10px;
        padding: 24px;
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: 18px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
        transition:
          border-color 0.3s,
          box-shadow 0.3s,
          transform 0.35s cubic-bezier(0.2, 0.8, 0.3, 1);
      }
      .nar-card::after {
        content: "";
        position: absolute;
        left: -1px;
        top: 24px;
        width: 0;
        height: 36px;
        background: var(--brand);
        border-radius: 0 2px 2px 0;
        transition: width 0.35s cubic-bezier(0.2, 0.8, 0.3, 1);
      }
      .nar-card:hover {
        border-color: var(--brand-light);
        box-shadow: 0 14px 30px -12px rgba(31, 122, 77, 0.2);
        transform: translateY(-2px);
      }
      .nar-card:hover::after {
        width: 3px;
      }
      .nar-card-ico {
        width: 48px;
        height: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 4px;
      }
      .nar-card-tag {
        display: inline-flex;
        width: fit-content;
        padding: 3px 10px;
        background: var(--bg);
        border: 1px solid var(--border);
        border-radius: 999px;
        font-family: var(--mono);
        font-size: 10px;
        font-weight: 500;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: var(--muted);
        margin-bottom: 4px;
      }
      .nar-card-title {
        font-family: var(--display);
        font-size: 22px;
        font-weight: 500;
        letter-spacing: -0.025em;
        line-height: 1.1;
        color: var(--ink);
        margin: 0;
        text-wrap: balance;
      }
      .nar-card-title .ital {
        color: var(--brand);
        font-weight: 600;
      }
      .nar-card-desc {
        font-size: 13.5px;
        line-height: 1.55;
        color: var(--ink-3);
        margin: 0;
        flex: 1;
        text-wrap: pretty;
      }
      .nar-card-foot {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
        margin-top: 8px;
        padding-top: 12px;
        border-top: 1px solid var(--border);
      }
      .nar-card-meta {
        font-family: var(--mono);
        font-size: 10.5px;
        color: var(--muted);
        letter-spacing: 0.05em;
        text-transform: uppercase;
      }
      .nar-card-arr {
        width: 28px;
        height: 28px;
        border-radius: 50%;
        border: 1px solid var(--border-2);
        color: var(--ink-2);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        transition: all 0.4s cubic-bezier(0.2, 0.9, 0.3, 1.2);
      }
      .nar-card:hover .nar-card-arr {
        background: var(--brand);
        color: var(--bg);
        border-color: var(--brand);
        transform: translateX(2px);
      }

      /* INFO — why Studio OS */
      .nar-info {
        display: grid;
        grid-template-columns: 2fr 1fr;
        gap: 48px;
        align-items: center;
        padding: clamp(40px, 5vw, 72px);
        background: linear-gradient(135deg, var(--dark) 0%, var(--dark-2) 100%);
        border-radius: 28px;
        color: var(--bg);
        position: relative;
        overflow: hidden;
      }
      .nar-info::before {
        content: "";
        position: absolute;
        width: 600px;
        height: 600px;
        border-radius: 50%;
        background: radial-gradient(
          circle,
          rgba(92, 163, 128, 0.22),
          transparent 70%
        );
        top: -240px;
        right: -200px;
        pointer-events: none;
      }
      @media (max-width: 860px) {
        .nar-info {
          grid-template-columns: 1fr;
          gap: 24px;
        }
      }
      .nar-info-left {
        position: relative;
        z-index: 2;
      }
      .nar-info-tag {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        font-family: var(--mono);
        font-size: 11px;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--panel-hi);
        font-weight: 500;
        margin-bottom: 18px;
      }
      .nar-info-tag::before {
        content: "✦";
        font-size: 14px;
      }
      .nar-info-left h2 {
        font-family: var(--display);
        font-size: clamp(28px, 3.4vw, 44px);
        font-weight: 500;
        letter-spacing: -0.035em;
        line-height: 1;
        color: var(--bg);
        margin: 0 0 22px;
        text-wrap: balance;
      }
      .nar-info-left h2 .ital {
        color: var(--panel-hi);
        font-weight: 600;
      }
      .nar-info-left p {
        font-size: 15px;
        line-height: 1.6;
        color: rgba(242, 239, 230, 0.8);
        margin: 0 0 14px;
        text-wrap: pretty;
      }
      .nar-info-left p:last-child {
        margin-bottom: 0;
      }
      .nar-info-left p strong {
        color: var(--panel-hi);
        font-weight: 500;
      }
      .nar-info-right {
        position: relative;
        z-index: 2;
        display: flex;
        justify-content: flex-end;
      }
      @media (max-width: 860px) {
        .nar-info-right {
          justify-content: flex-start;
        }
      }
      .nar-info-right .ed-btn-dark {
        background: var(--panel-hi) !important;
        color: var(--dark) !important;
      }
      .nar-info-right .ed-btn-dark:hover {
        background: var(--panel-hi-2) !important;
      }
      .nar-info-right .ed-btn-dark .ed-btn-arrow {
        background: var(--dark) !important;
        color: var(--panel-hi) !important;
      }

      /* MODAL KALKULATORA — chrome w stylu strony, content kalkulatora wewnątrz */
      .nar-calc-modal {
        position: fixed;
        inset: 0;
        z-index: 9000;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 20px;
      }
      .nar-calc-modal[hidden] {
        display: none;
      }
      /* Backdrop BEZ blur — blur powoduje lag przy animowanych elementach na stronie (glob/particles) */
      .nar-calc-backdrop {
        position: absolute;
        inset: 0;
        background: rgba(13, 26, 19, 0.72);
        animation: narCalcFade 0.25s ease;
      }
      @keyframes narCalcFade {
        from {
          opacity: 0;
        }
        to {
          opacity: 1;
        }
      }
      .nar-calc-dialog {
        position: relative;
        width: 100%;
        max-width: 540px;
        max-height: calc(100vh - 40px);
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: 20px;
        box-shadow:
          0 32px 80px -20px rgba(13, 26, 19, 0.5),
          0 12px 24px rgba(13, 26, 19, 0.15);
        display: flex;
        flex-direction: column;
        overflow: hidden;
        animation: narCalcPop 0.28s cubic-bezier(0.2, 0.9, 0.3, 1.2);
        will-change: transform, opacity;
      }
      @keyframes narCalcPop {
        from {
          opacity: 0;
          transform: translateY(14px);
        }
        to {
          opacity: 1;
          transform: none;
        }
      }
      /* Gdy modal otwarty — zatrzymaj animacje na stronie żeby nie ciągały wydajności */
      body.nar-calc-open .ed-home-stack *,
      body.nar-calc-open .ed-marquee-track,
      body.nar-calc-open .ed-mm-wow * {
        animation-play-state: paused !important;
      }
      .nar-calc-head {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 16px 20px;
        border-bottom: 1px solid var(--border);
        background: linear-gradient(180deg, var(--bg) 0%, var(--surface) 100%);
      }
      .nar-calc-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--brand);
        box-shadow: 0 0 8px var(--brand-glow);
        animation: pulse 2s infinite;
        flex-shrink: 0;
      }
      .nar-calc-title {
        flex: 1;
        font-family: var(--display);
        font-size: 18px;
        font-weight: 500;
        letter-spacing: -0.02em;
        color: var(--ink);
      }
      .nar-calc-close {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background: var(--bg-2);
        border: 1px solid var(--border);
        color: var(--ink-2);
        font-size: 15px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.25s;
        font-family: inherit;
      }
      .nar-calc-close:hover {
        background: var(--brand);
        color: var(--bg);
        border-color: var(--brand);
      }
      .nar-calc-body {
        flex: 1;
        overflow-y: auto;
        padding: 22px;
        display: flex;
        flex-direction: column;
        gap: 14px;
      }
      .nar-calc-foot {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 14px;
        padding: 12px 20px;
        border-top: 1px solid var(--border);
        background: var(--bg);
        font-family: var(--mono);
        font-size: 11px;
        color: var(--muted);
        letter-spacing: 0.04em;
      }
      .nar-calc-foot strong {
        color: var(--brand);
        font-weight: 500;
      }
      .nar-calc-foot-btn {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 6px 12px;
        background: var(--brand);
        color: var(--bg);
        border: none;
        border-radius: 999px;
        font-family: inherit;
        font-size: 11px;
        font-weight: 500;
        cursor: pointer;
        transition: background 0.25s;
      }
      .nar-calc-foot-btn:hover {
        background: var(--brand-hover);
      }

      /* Override w98 calc styling w modalu — normal look zamiast retro */
      .nar-calc-body .w98-field {
        display: flex;
        flex-direction: column;
        gap: 6px;
        margin: 0;
      }
      .nar-calc-body .w98-field label {
        font-family: var(--mono);
        font-size: 10px;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: var(--muted);
        font-weight: 500;
      }
      .nar-calc-body .w98-input,
      .nar-calc-body .w98-select,
      .nar-calc-body .w98-textarea {
        font-family: inherit;
        font-size: 14px;
        padding: 10px 14px;
        background: var(--bg);
        border: 1px solid var(--border);
        border-radius: 10px;
        color: var(--ink);
        outline: none;
        transition:
          border-color 0.2s,
          box-shadow 0.2s;
        letter-spacing: -0.005em;
        width: 100%;
      }
      .nar-calc-body .w98-input:focus,
      .nar-calc-body .w98-select:focus,
      .nar-calc-body .w98-textarea:focus {
        border-color: var(--brand);
        box-shadow: 0 0 0 3px var(--brand-glow);
      }
      .nar-calc-body .w98-seg-row {
        display: flex;
        gap: 4px;
        flex-wrap: wrap;
        padding: 3px;
        background: var(--bg-2);
        border: 1px solid var(--border);
        border-radius: 10px;
      }
      .nar-calc-body .w98-seg {
        flex: 1;
        min-width: 0;
        padding: 8px 12px;
        background: transparent;
        border: none;
        border-radius: 7px;
        font-family: inherit;
        font-size: 12.5px;
        font-weight: 500;
        color: var(--ink-3);
        cursor: pointer;
        transition: all 0.2s;
        letter-spacing: -0.005em;
        white-space: nowrap;
      }
      .nar-calc-body .w98-seg:hover {
        color: var(--ink);
      }
      .nar-calc-body .w98-seg.on {
        background: var(--brand);
        color: var(--bg);
      }
      .nar-calc-body .w98-result {
        padding: 16px;
        background: var(--dark);
        color: var(--bg);
        border-radius: 12px;
        font-family: var(--mono);
        font-size: 12.5px;
        line-height: 1.6;
        white-space: pre-wrap;
        overflow-x: auto;
        min-height: 60px;
      }
      .nar-calc-body .w98-small {
        font-family: var(--mono);
        font-size: 10px;
        color: var(--muted);
        letter-spacing: 0.04em;
        line-height: 1.55;
      }
      .nar-calc-body .w98-tab-row {
        display: flex;
        gap: 4px;
        padding: 3px;
        background: var(--bg-2);
        border: 1px solid var(--border);
        border-radius: 10px;
      }
      .nar-calc-body .w98-tab {
        flex: 1;
        padding: 8px 12px;
        background: transparent;
        border: none;
        border-radius: 7px;
        font-family: inherit;
        font-size: 12.5px;
        font-weight: 500;
        color: var(--ink-3);
        cursor: pointer;
        transition: all 0.2s;
      }
      .nar-calc-body .w98-tab.on {
        background: var(--brand);
        color: var(--bg);
      }
      .nar-calc-body .w98-toolbar,
      .nar-calc-body .w98-statusbar {
        display: none;
      }
      .nar-calc-body > div {
        max-width: none;
      }
      .nar-calc-body .w98-mycomputer-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
      }
      .nar-calc-body .w98-file {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 6px;
        padding: 12px 8px;
        background: var(--bg);
        border: 1px solid var(--border);
        border-radius: 10px;
        cursor: pointer;
        font-family: var(--mono);
        font-size: 10.5px;
        color: var(--ink-2);
        text-align: center;
        transition: all 0.2s;
      }
      .nar-calc-body .w98-file:hover {
        border-color: var(--brand);
        color: var(--brand);
        transform: translateY(-1px);
      }
      .nar-calc-body .w98-file-icon {
        font-size: 20px;
        line-height: 1;
      }

      @media (max-width: 560px) {
        .nar-calc-modal {
          padding: 12px;
        }
        .nar-calc-body {
          padding: 16px;
        }
        .nar-calc-foot {
          padding: 10px 14px;
          flex-wrap: wrap;
          font-size: 10.5px;
        }
      }

      #page-aplikacje {
        --c-cyan: #5ca380; /* sage — borders/outlines */
        --c-magenta: #e8dfb8; /* warm cream — highlights (było lime, teraz spójne z panel-hi) */
        --c-yellow: #c8d4a4; /* soft sage-yellow (było ochre) */
        --c-lime: #8aa67a; /* muted sage (było accent-2 lime) */
        --c-purple: #1f7a4d; /* brand emerald */
        --c-red: #c07a60; /* muted warn/danger */
        --c-bg: #0d1a13; /* deep forest */
        --c-bg-2: #152b1f; /* slightly lighter */
        --c-panel: #1a4732; /* window body — nasze --dark */
        --c-panel-2: #235a3c; /* raised surface — nasze --dark-2 */
        --c-border: rgba(232, 223, 184, 0.28);
        --c-ink: #f2efe6; /* paper cream */
        --c-ink-2: rgba(242, 239, 230, 0.65);
        position: relative;
        color: var(--ink);
      }
      /* W TRYBIE SYSTEM — fullscreen retro OS */
      #page-aplikacje.show-system {
        min-height: 100vh;
        overflow: hidden;
        color: var(--c-ink);
        background:
          radial-gradient(
            circle at 20% 20%,
            rgba(232, 223, 184, 0.05),
            transparent 55%
          ),
          radial-gradient(
            circle at 80% 80%,
            rgba(92, 163, 128, 0.08),
            transparent 55%
          ),
          linear-gradient(160deg, var(--c-bg) 0%, #0a1510 50%, var(--c-bg) 100%);
      }
      #page-aplikacje.show-system .nar-sys {
        display: flex;
        flex-direction: column;
        height: 100vh;
      }

      /* Subtle grid only, no scanlines — tylko w System trybie */
      #page-aplikacje.show-system::before {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        z-index: 1;
        background-image:
          linear-gradient(rgba(242, 239, 230, 0.025) 1px, transparent 1px),
          linear-gradient(
            90deg,
            rgba(242, 239, 230, 0.025) 1px,
            transparent 1px
          );
        background-size: 56px 56px;
        mask-image: radial-gradient(
          ellipse at center,
          #000 30%,
          transparent 95%
        );
        -webkit-mask-image: radial-gradient(
          ellipse at center,
          #000 30%,
          transparent 95%
        );
      }
      /* Paper grain overlay (very subtle) — tylko w System */
      #page-aplikacje.show-system::after {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        z-index: 2;
        opacity: 0.035;
        background-image: url("spoko-do-wyslania-assets/noise.svg");
        mix-blend-mode: overlay;
      }

      /* LOGIN / BOOT SCREEN — shows first, fades to desktop */
      .w98-login {
        position: absolute;
        inset: 0;
        z-index: 50;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background: linear-gradient(160deg, var(--c-bg) 0%, #0a1510 100%);
        transition:
          opacity 0.7s cubic-bezier(0.3, 0.1, 0.3, 1),
          visibility 0.7s;
        font-family: var(--mono);
        text-align: center;
        padding: 0 24px;
      }
      .w98-login::before {
        content: "";
        position: absolute;
        width: 700px;
        height: 700px;
        border-radius: 50%;
        background: radial-gradient(
          circle,
          rgba(199, 234, 75, 0.1),
          transparent 65%
        );
        top: -240px;
        left: 50%;
        transform: translateX(-50%);
        pointer-events: none;
      }
      .w98-login.hidden {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
      }
      .w98-login-logo {
        width: 76px;
        height: 76px;
        border-radius: 50%;
        background: var(--c-magenta);
        color: var(--c-bg);
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: var(--display);
        font-size: 32px;
        font-weight: 500;
        margin-bottom: 24px;
        box-shadow:
          0 0 0 1px rgba(199, 234, 75, 0.4),
          0 12px 40px rgba(199, 234, 75, 0.25);
        position: relative;
        z-index: 2;
      }
      .w98-login-tag {
        font-family: var(--mono);
        font-size: 11px;
        letter-spacing: 0.16em;
        text-transform: uppercase;
        color: var(--c-magenta);
        margin-bottom: 12px;
        display: inline-flex;
        align-items: center;
        gap: 10px;
        position: relative;
        z-index: 2;
      }
      .w98-login-tag::before,
      .w98-login-tag::after {
        content: "";
        width: 24px;
        height: 1px;
        background: var(--c-magenta);
      }
      .w98-login h2 {
        font-family: var(--display);
        font-size: clamp(32px, 4.5vw, 56px);
        font-weight: 500;
        letter-spacing: -0.035em;
        line-height: 1;
        color: var(--c-ink);
        margin: 0 0 14px;
        text-wrap: balance;
        position: relative;
        z-index: 2;
      }
      .w98-login h2 .accent {
        color: var(--c-magenta);
        font-weight: 600;
      }
      .w98-login-sub {
        font-family: var(--mono);
        font-size: 12px;
        letter-spacing: 0.08em;
        color: var(--c-ink-2);
        margin-bottom: 36px;
        max-width: 44ch;
        line-height: 1.6;
        position: relative;
        z-index: 2;
      }
      .w98-login-status {
        font-family: var(--mono);
        font-size: 11px;
        letter-spacing: 0.1em;
        color: var(--c-magenta);
        margin-bottom: 28px;
        min-height: 16px;
        position: relative;
        z-index: 2;
      }
      .w98-login-status::before {
        content: "▸";
        margin-right: 8px;
        color: var(--c-cyan);
      }
      .w98-login-dots {
        display: inline-block;
        min-width: 20px;
        text-align: left;
      }
      .w98-login-btn {
        display: inline-flex;
        align-items: center;
        gap: 12px;
        padding: 14px 22px;
        background: var(--c-magenta);
        color: var(--c-bg);
        border: none;
        border-radius: 999px;
        font-family: inherit;
        font-size: 13px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.25s;
        letter-spacing: 0.02em;
        position: relative;
        z-index: 2;
      }
      .w98-login-btn:hover {
        background: var(--c-ink);
        color: var(--c-bg);
        transform: translateY(-1px);
      }
      .w98-login-btn .arr {
        width: 22px;
        height: 22px;
        border-radius: 50%;
        background: var(--c-bg);
        color: var(--c-magenta);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 11px;
        transition: transform 0.3s;
      }
      .w98-login-btn:hover .arr {
        transform: rotate(-45deg);
        color: var(--c-bg);
        background: var(--c-magenta);
      }
      .w98-login-hint {
        font-family: var(--mono);
        font-size: 10px;
        letter-spacing: 0.1em;
        color: var(--c-ink-2);
        margin-top: 28px;
        position: relative;
        z-index: 2;
        opacity: 0.55;
      }

      .w98-nav-override {
        position: absolute;
        top: 16px;
        right: 16px;
        z-index: 10000;
        padding: 8px 16px;
        background: rgba(21, 43, 31, 0.85);
        border: 1px solid var(--c-border);
        font-family: var(--mono);
        font-size: 11px;
        color: var(--c-ink);
        cursor: pointer;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        border-radius: 999px;
        backdrop-filter: blur(10px);
        transition: all 0.25s;
        font-weight: 500;
      }
      .w98-nav-override::before {
        content: "← ";
        color: var(--c-magenta);
      }
      .w98-nav-override:hover {
        background: var(--c-magenta);
        color: var(--c-bg);
        border-color: var(--c-magenta);
      }
      .w98-nav-override:hover::before {
        color: var(--c-bg);
      }

      .w98-desktop {
        flex: 1;
        position: relative;
        overflow: hidden;
        padding: 28px 24px 12px;
        z-index: 3;
        font-family: var(--mono);
      }

      /* Boot banner top-left — restrained editorial */
      .w98-boot-banner {
        position: absolute;
        top: 22px;
        left: 24px;
        z-index: 5;
        pointer-events: none;
        font-family: var(--mono);
        font-size: 11px;
        color: var(--c-ink-2);
        letter-spacing: 0.06em;
        line-height: 1.6;
        opacity: 0.8;
      }
      .w98-boot-banner .bb-title {
        font-family: var(--display);
        font-size: 18px;
        color: var(--c-magenta);
        margin-bottom: 6px;
        letter-spacing: -0.015em;
        font-weight: 500;
        text-transform: none;
        text-shadow: none;
        opacity: 1;
      }
      .w98-boot-banner .bb-line {
        color: var(--c-ink-2);
      }
      .w98-boot-banner .bb-line::before {
        content: "— ";
        color: var(--c-magenta);
        opacity: 0.6;
      }

      .w98-desktop-icons {
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        gap: 4px;
        align-content: flex-start;
        height: calc(100% - 60px);
        width: 100%;
        padding-top: 90px;
        position: relative;
        z-index: 4;
      }
      .w98-icon {
        width: 92px;
        padding: 10px 6px;
        text-align: center;
        cursor: pointer;
        color: var(--c-ink);
        user-select: none;
        border: 1px dashed transparent;
        border-radius: 10px;
        transition: all 0.2s;
        position: relative;
      }
      .w98-icon:hover {
        border-color: var(--c-border);
        background: rgba(199, 234, 75, 0.05);
      }
      .w98-icon:hover .w98-icon-label {
        color: var(--c-magenta);
      }
      .w98-icon.selected {
        background: rgba(199, 234, 75, 0.1);
        border-color: var(--c-magenta);
        border-style: solid;
      }
      .w98-icon.selected .w98-icon-label {
        color: var(--c-magenta);
      }
      .w98-icon-img {
        width: 40px;
        height: 40px;
        margin: 0 auto 6px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .w98-icon-label {
        font-family: var(--mono);
        font-size: 11px;
        line-height: 1.25;
        letter-spacing: 0.02em;
        color: var(--c-ink);
        font-weight: 500;
        text-shadow: none;
      }

      /* Windows */
      .w98-window {
        position: absolute;
        background: var(--c-panel);
        border: 1px solid var(--c-border);
        box-shadow:
          0 16px 48px rgba(0, 0, 0, 0.45),
          0 2px 8px rgba(0, 0, 0, 0.3);
        border-radius: 10px;
        min-width: 280px;
        display: flex;
        flex-direction: column;
        font-family: var(--mono);
        color: var(--c-ink);
        z-index: 100;
        overflow: hidden;
      }
      .w98-window.maximized {
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: calc(100% - 40px) !important;
        border-radius: 0;
      }
      .w98-window.minimized {
        display: none;
      }
      .w98-title {
        background: var(--c-bg-2);
        color: var(--c-ink);
        padding: 10px 12px;
        font-weight: 500;
        font-size: 12px;
        display: flex;
        align-items: center;
        gap: 10px;
        cursor: move;
        user-select: none;
        height: 38px;
        font-family: var(--mono);
        letter-spacing: 0.04em;
        border-bottom: 1px solid var(--c-border);
        position: relative;
      }
      .w98-title.inactive {
        color: var(--c-ink-2);
        background: var(--c-panel);
      }
      .w98-title-icon {
        width: 16px;
        height: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        opacity: 0.85;
      }
      .w98-title-text {
        flex: 1;
        font-size: 11px;
        letter-spacing: 0.06em;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        text-transform: uppercase;
        font-weight: 500;
      }
      .w98-title-btns {
        display: flex;
        gap: 4px;
      }
      .w98-title-btn {
        width: 22px;
        height: 22px;
        background: transparent;
        border: 1px solid var(--c-border);
        color: var(--c-ink-2);
        font-size: 11px;
        font-weight: 500;
        font-family: var(--mono);
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        line-height: 1;
        padding: 0;
        transition: all 0.2s;
        border-radius: 999px;
      }
      .w98-title-btn:hover {
        background: var(--c-magenta);
        color: var(--c-bg);
        border-color: var(--c-magenta);
      }
      .w98-title-btn:nth-child(3):hover {
        background: var(--c-red);
        color: var(--c-ink);
        border-color: var(--c-red);
      }

      .w98-menu {
        background: var(--c-panel);
        border-bottom: 1px solid var(--c-border);
        padding: 4px 6px;
        display: flex;
        gap: 0;
        font-size: 11px;
        font-family: var(--mono);
      }
      .w98-menu-item {
        padding: 5px 12px;
        cursor: pointer;
        color: var(--c-ink-2);
        letter-spacing: 0.04em;
        border-radius: 6px;
        transition: all 0.2s;
      }
      .w98-menu-item:hover {
        background: rgba(199, 234, 75, 0.1);
        color: var(--c-magenta);
      }
      .w98-menu-item u {
        text-decoration: underline;
        color: var(--c-magenta);
      }

      .w98-content {
        padding: 18px;
        flex: 1;
        overflow: auto;
        background: var(--c-panel);
        scrollbar-width: thin;
        scrollbar-color: var(--c-border) transparent;
      }
      .w98-content::-webkit-scrollbar {
        width: 10px;
        height: 10px;
      }
      .w98-content::-webkit-scrollbar-track {
        background: transparent;
      }
      .w98-content::-webkit-scrollbar-thumb {
        background: var(--c-border);
        border-radius: 5px;
      }

      .w98-statusbar {
        background: var(--c-bg-2);
        border-top: 1px solid var(--c-border);
        padding: 6px 10px;
        display: flex;
        gap: 10px;
        font-size: 10px;
        font-family: var(--mono);
        color: var(--c-ink-2);
        letter-spacing: 0.06em;
        text-transform: uppercase;
      }
      .w98-status-cell {
        padding: 2px 8px;
        flex: 1;
      }

      /* Taskbar */
      .w98-taskbar {
        height: 40px;
        background: var(--c-bg-2);
        border-top: 1px solid var(--c-border);
        display: flex;
        align-items: center;
        padding: 5px 8px;
        gap: 6px;
        flex-shrink: 0;
        z-index: 200;
        position: relative;
      }
      .w98-start {
        height: 30px;
        padding: 0 16px 0 12px;
        background: var(--c-magenta);
        border: none;
        color: var(--c-bg);
        font-family: var(--mono);
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        display: flex;
        align-items: center;
        gap: 10px;
        cursor: pointer;
        border-radius: 999px;
        transition: all 0.25s;
      }
      .w98-start:hover {
        background: var(--c-ink);
        color: var(--c-bg);
      }
      .w98-start.open {
        background: var(--c-ink);
        color: var(--c-magenta);
      }
      .w98-start-logo {
        display: inline-block;
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background: var(--c-bg);
      }
      .w98-start.open .w98-start-logo {
        background: var(--c-magenta);
      }
      .w98-task-divider {
        width: 1px;
        height: 22px;
        background: var(--c-border);
        margin: 0 4px;
        opacity: 0.5;
      }
      .w98-task-btns {
        flex: 1;
        display: flex;
        gap: 4px;
        overflow: hidden;
      }
      .w98-task-btn {
        height: 30px;
        padding: 0 14px;
        background: transparent;
        border: 1px solid var(--c-border);
        color: var(--c-ink-2);
        font-size: 10.5px;
        font-family: var(--mono);
        letter-spacing: 0.04em;
        display: flex;
        align-items: center;
        gap: 8px;
        cursor: pointer;
        min-width: 140px;
        max-width: 220px;
        transition: all 0.2s;
        border-radius: 999px;
      }
      .w98-task-btn:hover {
        color: var(--c-ink);
        border-color: var(--c-magenta);
      }
      .w98-task-btn.active {
        background: rgba(199, 234, 75, 0.1);
        border-color: var(--c-magenta);
        color: var(--c-magenta);
      }
      .w98-task-btn .w98-title-icon {
        width: 14px;
        height: 14px;
        filter: none;
      }
      .w98-task-btn span {
        flex: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .w98-tray {
        padding: 0 14px;
        display: flex;
        align-items: center;
        gap: 14px;
        font-size: 11px;
        color: var(--c-ink-2);
        font-family: var(--mono);
        min-width: 120px;
        border-left: 1px solid var(--c-border);
        height: 30px;
      }
      .w98-tray-clock {
        font-variant-numeric: tabular-nums;
        color: var(--c-magenta);
        font-size: 13px;
        letter-spacing: 0.08em;
        font-family: var(--mono);
        font-weight: 500;
      }
      .w98-tray-status {
        font-size: 10px;
        color: var(--c-magenta);
        letter-spacing: 0.08em;
        text-transform: uppercase;
        display: flex;
        align-items: center;
        gap: 6px;
      }
      .w98-tray-status::before {
        content: "";
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--c-magenta);
        animation: cp-blink 1.8s infinite;
      }
      @keyframes cp-blink {
        0%,
        100% {
          opacity: 1;
        }
        50% {
          opacity: 0.35;
        }
      }

      /* Start menu */
      .w98-start-menu {
        position: absolute;
        bottom: 44px;
        left: 8px;
        width: 260px;
        background: var(--c-panel);
        border: 1px solid var(--c-border);
        border-radius: 12px;
        box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
        display: none;
        z-index: 500;
        font-family: var(--mono);
        overflow: hidden;
      }
      .w98-start-menu.open {
        display: flex;
      }
      .w98-start-side {
        width: 34px;
        background: var(--c-magenta);
        color: var(--c-bg);
        font-weight: 600;
        font-size: 10px;
        font-family: var(--mono);
        writing-mode: vertical-rl;
        text-orientation: mixed;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 16px 0;
        letter-spacing: 0.2em;
        text-transform: uppercase;
      }
      .w98-start-items {
        flex: 1;
        padding: 8px 6px;
      }
      .w98-start-item {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 9px 12px;
        font-size: 11.5px;
        color: var(--c-ink);
        cursor: pointer;
        letter-spacing: 0.02em;
        transition: all 0.2s;
        border-radius: 8px;
      }
      .w98-start-item:hover {
        background: rgba(199, 234, 75, 0.1);
        color: var(--c-magenta);
      }
      .w98-start-item-icon {
        width: 18px;
        height: 18px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        color: var(--c-magenta);
        font-size: 14px;
      }
      .w98-start-sep {
        height: 1px;
        background: var(--c-border);
        margin: 6px 12px;
      }

      /* Form controls inside windows */
      .w98-field {
        display: flex;
        flex-direction: column;
        gap: 6px;
        margin-bottom: 14px;
      }
      .w98-field label {
        font-size: 10px;
        color: var(--c-magenta);
        letter-spacing: 0.12em;
        text-transform: uppercase;
        font-family: var(--mono);
        font-weight: 500;
      }
      .w98-input,
      .w98-select,
      .w98-textarea {
        padding: 10px 12px;
        border: 1px solid var(--c-border);
        background: var(--c-bg);
        font-family: var(--mono);
        font-size: 12px;
        color: var(--c-ink);
        outline: none;
        border-radius: 8px;
        transition: all 0.2s;
      }
      .w98-input:focus,
      .w98-select:focus,
      .w98-textarea:focus {
        border-color: var(--c-magenta);
        box-shadow: 0 0 0 3px rgba(199, 234, 75, 0.18);
      }
      .w98-input::placeholder {
        color: var(--c-ink-2);
        opacity: 0.5;
      }
      .w98-select {
        cursor: pointer;
      }
      .w98-select option {
        background: var(--c-bg);
        color: var(--c-ink);
      }
      .w98-btn {
        padding: 9px 16px;
        background: transparent;
        border: 1px solid var(--c-border);
        color: var(--c-ink);
        font-family: var(--mono);
        font-size: 11px;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        cursor: pointer;
        border-radius: 999px;
        transition: all 0.2s;
        font-weight: 500;
      }
      .w98-btn:hover {
        background: var(--c-magenta);
        border-color: var(--c-magenta);
        color: var(--c-bg);
      }
      .w98-btn.pri {
        background: var(--c-magenta);
        border-color: var(--c-magenta);
        color: var(--c-bg);
        font-weight: 600;
      }
      .w98-btn.pri:hover {
        background: var(--c-ink);
        color: var(--c-bg);
        border-color: var(--c-ink);
      }
      .w98-result {
        margin-top: 16px;
        padding: 14px 16px;
        background: var(--c-bg);
        border: 1px solid var(--c-border);
        border-radius: 10px;
        font-family: var(--mono);
        font-size: 11.5px;
        color: var(--c-magenta);
        white-space: pre-line;
        line-height: 1.8;
        letter-spacing: 0.02em;
      }
      .w98-result::before {
        content: "— OUTPUT";
        display: block;
        font-size: 9px;
        color: var(--c-ink-2);
        margin-bottom: 8px;
        letter-spacing: 0.1em;
        opacity: 0.7;
        font-weight: 500;
      }
      .w98-radio-row {
        display: flex;
        gap: 10px;
        margin-top: 4px;
        flex-wrap: wrap;
      }
      .w98-radio-lbl {
        display: flex;
        align-items: center;
        gap: 5px;
        font-size: 11px;
        cursor: pointer;
        color: var(--c-ink-2);
      }
      .w98-radio-lbl input {
        accent-color: var(--c-magenta);
      }
      .w98-textarea {
        width: 100%;
        resize: none;
        font-family: var(--mono);
        min-height: 220px;
        line-height: 1.6;
      }
      .w98-small {
        font-size: 10px;
        color: var(--c-ink-2);
        margin-top: 10px;
        line-height: 1.6;
        font-family: var(--mono);
        opacity: 0.75;
        letter-spacing: 0.02em;
      }

      /* Segmented (seg) button rows */
      .w98-seg-row {
        display: inline-flex;
        flex-wrap: wrap;
        gap: 4px;
        margin-top: 2px;
        padding: 4px;
        background: var(--c-bg);
        border: 1px solid var(--c-border);
        border-radius: 999px;
      }
      .w98-seg {
        padding: 7px 13px;
        background: transparent;
        border: none;
        color: var(--c-ink-2);
        font-family: var(--mono);
        font-size: 10.5px;
        cursor: pointer;
        letter-spacing: 0.05em;
        transition: all 0.2s;
        border-radius: 999px;
        font-weight: 500;
        text-transform: uppercase;
      }
      .w98-seg:hover {
        color: var(--c-ink);
      }
      .w98-seg.on {
        background: var(--c-magenta);
        color: var(--c-bg);
        font-weight: 600;
      }

      /* Tabs (for wynagrodzenia) */
      .w98-tabs {
        display: inline-flex;
        gap: 4px;
        margin-bottom: 16px;
        padding: 4px;
        background: var(--c-bg);
        border: 1px solid var(--c-border);
        border-radius: 999px;
      }
      .w98-tab {
        padding: 8px 16px;
        background: transparent;
        border: none;
        color: var(--c-ink-2);
        font-family: var(--mono);
        font-size: 11px;
        cursor: pointer;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        transition: all 0.2s;
        border-radius: 999px;
        font-weight: 500;
      }
      .w98-tab:hover {
        color: var(--c-ink);
      }
      .w98-tab.on {
        background: var(--c-magenta);
        color: var(--c-bg);
        font-weight: 600;
      }

      /* Result grid (for breakdowns) */
      .w98-breakdown {
        margin-top: 14px;
        padding: 14px 16px;
        background: var(--c-bg);
        border: 1px solid var(--c-border);
        border-radius: 10px;
        font-family: var(--mono);
        font-size: 11.5px;
        line-height: 1.9;
      }
      .w98-breakdown-row {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 20px;
        padding: 3px 0;
        color: var(--c-ink-2);
      }
      .w98-breakdown-row.tot {
        border-top: 1px solid var(--c-border);
        margin-top: 6px;
        padding-top: 8px;
        color: var(--c-magenta);
        font-weight: 600;
        font-size: 13px;
      }
      .w98-breakdown-row.cost {
        color: var(--c-red);
      }

      /* My Computer */
      .w98-mycomputer-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
        gap: 6px;
        padding: 12px;
        background: var(--c-bg);
        border: 1px solid var(--c-border);
        border-radius: 10px;
        min-height: 220px;
      }
      .w98-file {
        text-align: center;
        padding: 12px 6px;
        cursor: pointer;
        color: var(--c-ink);
        font-size: 11px;
        border: 1px dashed transparent;
        transition: all 0.2s;
        font-family: var(--mono);
        border-radius: 8px;
        letter-spacing: 0.02em;
      }
      .w98-file:hover {
        border-color: var(--c-magenta);
        background: rgba(199, 234, 75, 0.06);
        color: var(--c-magenta);
      }
      .w98-file-icon {
        width: 34px;
        height: 34px;
        margin: 0 auto 6px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 22px;
      }
      .w98-toolbar {
        display: flex;
        gap: 4px;
        padding: 8px 10px;
        background: var(--c-bg-2);
        border-bottom: 1px solid var(--c-border);
        align-items: center;
        font-family: var(--mono);
      }
      .w98-path {
        flex: 1;
        padding: 5px 10px;
        background: var(--c-bg);
        border: 1px solid var(--c-border);
        font-size: 11px;
        margin: 0 8px;
        color: var(--c-magenta);
        font-family: var(--mono);
        border-radius: 6px;
        letter-spacing: 0.04em;
      }

      /* Minesweeper */
      .w98-ms {
        padding: 14px;
        background: var(--c-bg);
        display: inline-block;
        border: 1px solid var(--c-border);
        border-radius: 10px;
      }
      .w98-ms-head {
        padding: 8px 10px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 10px;
        background: var(--c-panel);
        border: 1px solid var(--c-border);
        border-radius: 6px;
        gap: 10px;
      }
      .w98-ms-digits {
        background: var(--c-bg);
        color: var(--c-magenta);
        font-family: var(--mono);
        font-size: 16px;
        padding: 4px 10px;
        border: 1px solid var(--c-border);
        letter-spacing: 0.15em;
        min-width: 56px;
        text-align: center;
        border-radius: 4px;
        font-weight: 600;
        font-variant-numeric: tabular-nums;
      }
      .w98-ms-face {
        width: 32px;
        height: 32px;
        background: var(--c-magenta);
        border: none;
        font-size: 16px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        color: var(--c-bg);
        transition: all 0.2s;
      }
      .w98-ms-face:hover {
        background: var(--c-ink);
        color: var(--c-magenta);
      }
      .w98-ms-board {
        display: grid;
        border: 1px solid var(--c-border);
        padding: 4px;
        background: var(--c-bg);
        border-radius: 6px;
      }
      .w98-ms-cell {
        width: 22px;
        height: 22px;
        background: var(--c-panel-2);
        border: 1px solid var(--c-border);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 13px;
        font-weight: 700;
        font-family: var(--mono);
        cursor: pointer;
        user-select: none;
        transition: all 0.1s;
        border-radius: 3px;
      }
      .w98-ms-cell:hover {
        background: rgba(199, 234, 75, 0.08);
        border-color: var(--c-magenta);
      }
      .w98-ms-cell.open {
        border-color: transparent;
        background: var(--c-bg);
        opacity: 0.85;
      }
      .w98-ms-cell.flag {
        color: var(--c-magenta);
      }
      .w98-ms-cell[data-n="1"] {
        color: var(--c-cyan);
      }
      .w98-ms-cell[data-n="2"] {
        color: var(--c-lime);
      }
      .w98-ms-cell[data-n="3"] {
        color: var(--c-red);
      }
      .w98-ms-cell[data-n="4"] {
        color: var(--c-purple);
      }
      .w98-ms-cell[data-n="5"] {
        color: var(--c-magenta);
      }
      .w98-ms-cell[data-n="6"] {
        color: var(--c-yellow);
      }
      .w98-ms-cell[data-n="7"] {
        color: #d68050;
      }
      .w98-ms-cell[data-n="8"] {
        color: var(--c-ink);
      }
      .w98-ms-cell.mine {
        background: var(--c-red);
        color: var(--c-bg);
        border-color: var(--c-red);
      }

      /* Notepad */
      .w98-notepad {
        display: flex;
        flex-direction: column;
        height: 100%;
      }
      .w98-notepad textarea {
        flex: 1;
        width: 100%;
        border: 1px solid var(--c-border);
        background: var(--c-bg);
        font-family: var(--mono);
        font-size: 12px;
        padding: 12px;
        resize: none;
        outline: none;
        color: var(--c-ink);
        line-height: 1.7;
        border-radius: 8px;
        letter-spacing: 0.02em;
      }
      .w98-notepad textarea:focus {
        border-color: var(--c-magenta);
        box-shadow: 0 0 0 3px rgba(199, 234, 75, 0.18);
      }

      /* About this site */
      .w98-about {
        padding: 10px;
        min-width: 280px;
      }
      .w98-about-row {
        display: flex;
        gap: 16px;
        align-items: flex-start;
        margin-bottom: 12px;
      }
      .w98-about-logo {
        width: 54px;
        height: 54px;
        background: var(--c-magenta);
        color: var(--c-bg);
        font-weight: 600;
        font-size: 22px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        font-family: var(--display);
        border-radius: 50%;
        letter-spacing: -0.02em;
      }
      .w98-about p {
        font-size: 12.5px;
        color: var(--c-ink);
        line-height: 1.65;
        margin-bottom: 8px;
        font-family: inherit;
      }
      .w98-about strong {
        color: var(--c-magenta);
      }

      /* Table for data */
      .w98-table {
        width: 100%;
        border-collapse: collapse;
        font-family: var(--mono);
        font-size: 11.5px;
        margin-top: 8px;
      }
      .w98-table th {
        background: rgba(199, 234, 75, 0.1);
        color: var(--c-magenta);
        padding: 8px 12px;
        text-align: left;
        border-bottom: 1px solid var(--c-border);
        font-size: 10px;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        font-weight: 500;
      }
      .w98-table td {
        padding: 7px 12px;
        border-bottom: 1px solid var(--c-border);
        color: var(--c-ink);
      }
      .w98-table tr:hover td {
        background: rgba(199, 234, 75, 0.04);
      }

      /* ========================================================
   RESPONSIVE
======================================================== */
      /* ================================================================
   RESPONSIVE — tablet (≤1024), phone (≤768), small phone (≤480)
================================================================ */

      /* TABLET */
      @media (max-width: 1024px) {
        .container {
          max-width: 100%;
        }
        .section {
          padding: clamp(56px, 8vw, 96px) 0;
        }
        .sec-head {
          margin-bottom: 36px;
        }
        .sec-head h2 {
          font-size: clamp(28px, 4vw, 44px);
        }

        .hero-inner {
          grid-template-columns: 1fr;
          gap: 44px;
        }
        .hero-h1 {
          font-size: clamp(36px, 5.5vw, 60px);
        }
        .hero-spinner {
          display: none;
        }
        .hero-stats {
          grid-template-columns: repeat(2, 1fr);
        }
        .hs-item:nth-child(2) {
          border-right: none;
        }
        .hs-item:nth-child(1),
        .hs-item:nth-child(2) {
          border-bottom: 1px solid var(--border);
        }
        .hs-val {
          font-size: 32px;
        }

        .svc-grid,
        .proc-grid,
        .results-grid,
        .rules-grid,
        .svc-big-grid {
          grid-template-columns: repeat(2, 1fr);
        }
        .cs-grid {
          grid-template-columns: 1fr;
        }
        .case-stats,
        .fin-grid,
        .stack-grid {
          grid-template-columns: repeat(2, 1fr);
        }
        .ba-grid,
        .steps-grid,
        .take-grid {
          grid-template-columns: 1fr;
        }
        #page-case-shumee .steps-grid[style] {
          grid-template-columns: 1fr !important;
        }
        .ba-arrow {
          position: static;
          margin: 8px auto;
          transform: none;
        }
        .about-bio-grid {
          grid-template-columns: 1fr;
          gap: 32px;
        }
        .about-hero-grid {
          grid-template-columns: 1fr;
          gap: 32px;
        }

        .nav-links {
          display: none;
        }
        .nav-burger {
          display: flex;
        }

        .kontakt-grid {
          grid-template-columns: 1fr;
          min-height: auto;
        }
        .k-left {
          padding: 48px var(--px);
        }
        .k-right {
          padding: 40px var(--px);
        }
        .calc-layout {
          grid-template-columns: 1fr;
        }
        .calc-summary-wrap {
          position: static;
        }
        .kf-row {
          grid-template-columns: 1fr;
        }

        .footer-inner {
          grid-template-columns: 1fr 1fr;
          gap: 28px;
        }

        .tl-node {
          flex: 0 0 300px;
        }
        .tl-mini-track {
          grid-template-columns: repeat(3, 1fr);
          gap: 40px 0;
        }
        .tl-mini::before {
          display: none;
        }
        .tl-mini-point {
          flex-direction: row;
          align-items: center;
          gap: 12px;
          text-align: left;
          padding: 10px 14px;
          background: var(--bg-2);
          border-radius: var(--r-sm);
        }
        .tl-mini-date,
        .tl-mini-label {
          position: static;
          transform: none;
          max-width: none;
          white-space: normal;
          text-align: left;
          margin: 0;
        }

        .home-growth-head {
          gap: 20px;
        }
        .hgc-svg {
          height: 200px;
        }

        .case-head-num {
          font-size: 56px;
        }
        .stack-pop {
          max-width: min(280px, calc(100vw - 32px));
        }
        .tilt::before {
          display: none;
        }
      }

      /* PHONE */
      @media (max-width: 768px) {
        html {
          font-size: 15px;
        }
        :root {
          --px: 18px;
          --site-nav-top: 12px;
          --site-nav-height: 52px;
          --page-hero-gap: 32px;
        }
        .section {
          padding: 56px 0;
        }
        .sec-head {
          margin-bottom: 28px;
        }
        .sec-head h2 {
          font-size: clamp(26px, 6vw, 36px);
        }
        .sec-head p {
          font-size: 15px;
        }

        /* NAV */
        nav {
          top: 8px;
          left: 8px !important;
          right: 8px;
          height: 50px;
          transform: none;
          max-width: none;
          width: calc(100% - 16px);
        }
        nav .nav-inner {
          padding: 0 12px 0 16px;
        }
        .nav-logo {
          font-size: 14px;
          gap: 8px;
        }
        .nav-logo-mark {
          width: 26px;
          height: 26px;
        }
        .nav-logo-text {
          font-size: 14px;
        }
        .mobile-nav a {
          font-size: 28px;
          padding: 10px 0;
        }

        /* HERO */
        .hero {
          padding: 84px 0 40px;
        }
        .hero-blob {
          width: 340px;
          height: 340px;
          top: -120px;
          right: -100px;
        }
        .hero-inner {
          gap: 32px;
          margin-top: 8px;
          grid-template-columns: 1fr;
        }
        .hero-meta-bar {
          font-size: 10px;
          padding: 10px 0 16px;
          margin-bottom: 28px;
          gap: 8px;
        }
        .hero-meta-bar .hmb-col {
          font-size: 10px;
        }
        .hero-h1 {
          font-size: clamp(44px, 11vw, 72px);
          line-height: 0.98;
          margin-bottom: 18px;
          letter-spacing: -0.04em;
        }
        .hero-sub {
          font-size: 15px;
          margin-bottom: 24px;
          max-width: none;
        }
        .hero-sub::before {
          display: none;
        }
        .hero-ctas {
          flex-direction: column;
          align-items: stretch;
          gap: 10px;
          margin-bottom: 28px;
        }
        .hero-ctas .btn-primary,
        .hero-ctas .btn-ghost {
          justify-content: center;
          width: 100%;
          padding: 14px 18px;
        }
        .hero-badges {
          flex-direction: column;
          gap: 10px;
          align-items: flex-start;
        }
        .hero-stats {
          grid-template-columns: 1fr;
          margin-top: 40px;
        }
        .hs-item {
          padding: 26px 18px;
          border-right: none;
          border-bottom: 1px solid var(--border);
        }
        .hs-item:last-child {
          border-bottom: none;
        }
        .hs-val {
          font-size: clamp(42px, 11vw, 56px);
        }
        .hero-widget {
          padding: 18px;
        }
        .hw-head {
          margin-bottom: 14px;
          padding-bottom: 12px;
        }
        .hw-opt {
          padding: 10px 12px;
          font-size: 13px;
        }

        /* SEC HEAD mobile */
        .sec-head {
          padding-top: 20px;
          margin-bottom: 36px;
        }
        .sec-head .sec-num {
          font-size: 10px;
          top: 20px;
        }

        /* TRUST */
        .trust {
          padding: 18px 0;
        }
        .trust-item {
          font-size: clamp(18px, 5vw, 26px);
          gap: 8px;
        }
        .trust-marquee-track {
          gap: 36px;
          animation-duration: 28s;
        }
        .word-split {
          padding-bottom: 0.06em;
        }

        /* Grids — all 1 column */
        .svc-grid,
        .proc-grid,
        .results-grid,
        .rules-grid,
        .svc-big-grid,
        .cs-grid {
          grid-template-columns: 1fr;
        }
        .svc-card,
        .proc-card,
        .rule-card,
        .result-card,
        .take-card,
        .step-card {
          padding: 24px;
        }
        .svc-card h3 {
          font-size: 20px;
        }
        .svc-card p {
          font-size: 14px;
        }
        .svc-ico {
          width: 48px;
          height: 48px;
        }
        .svc-ico svg {
          width: 24px;
          height: 24px;
        }
        .svc-expand-row {
          flex-direction: column;
          gap: 4px;
        }
        .svc-expand-k {
          min-width: 0;
        }
        .svc-expand-cta {
          flex-direction: column;
        }
        .svc-expand-cta button {
          width: 100%;
          justify-content: center;
        }

        /* Portfolio cards */
        .cs-cover {
          padding: 24px;
        }
        .cs-card h3 {
          font-size: 22px;
        }
        .cs-card .cs-desc {
          font-size: 14px;
          margin-bottom: 18px;
        }
        .cs-metrics {
          grid-template-columns: repeat(3, 1fr);
        }
        .cs-met {
          padding: 14px 10px;
        }
        .cs-met-val {
          font-size: 17px;
        }
        .cs-footer {
          padding: 14px 16px;
          flex-direction: column;
          align-items: flex-start;
          gap: 10px;
        }
        .cs-cta {
          margin-left: 0;
        }
        .cs-tags span {
          font-size: 10px;
          padding: 3px 8px;
        }
        .cs-expand-inner {
          padding: 20px 22px;
        }
        .cs-corner {
          top: 12px;
          right: 12px;
          font-size: 9px;
        }

        /* Home growth */
        .home-growth {
          padding: 28px 22px;
          border-radius: 22px;
        }
        .home-growth h2 {
          font-size: 26px;
          line-height: 1.1;
        }
        .home-growth .intro {
          font-size: 14.5px;
        }
        .home-growth-head {
          flex-direction: column;
          gap: 16px;
        }
        .home-growth-stats {
          gap: 20px;
        }
        .hg-stat-val {
          font-size: 22px;
        }
        .home-growth-chart {
          padding: 16px;
        }
        .hgc-svg {
          height: 160px;
        }
        .home-growth-foot {
          gap: 12px;
          flex-direction: column;
          align-items: flex-start;
        }
        .home-growth-cta {
          width: 100%;
          justify-content: center;
        }

        .proc-num {
          font-size: 12px;
        }
        .proc-ico {
          width: 40px;
          height: 40px;
        }
        .proc-ico svg {
          width: 20px;
          height: 20px;
        }
        .result-num {
          font-size: 44px;
        }
        .result-expand-inner p {
          font-size: 13.5px;
        }

        /* Timeline mini (home) */
        .tl-widget {
          padding: 24px 20px;
        }
        .tl-widget-head {
          flex-direction: column;
          align-items: flex-start;
          gap: 14px;
        }
        .tl-widget-head h3 {
          font-size: 20px;
        }
        .tl-mini-track {
          grid-template-columns: 1fr;
          gap: 10px;
        }
        .tl-mini-point {
          padding: 12px 14px;
        }

        /* FAQ */
        .faq-q {
          font-size: 15px;
          padding: 18px 0;
          gap: 12px;
        }
        .faq-ico {
          width: 28px;
          height: 28px;
        }
        .faq-a {
          font-size: 14px;
        }

        /* CTA Block */
        .cta-block {
          padding: 36px 24px;
        }
        .cta-block h2 {
          font-size: 28px;
        }
        .cta-block p {
          font-size: 15px;
        }
        .cta-btns {
          flex-direction: column;
          gap: 10px;
        }
        .cta-btns button {
          width: 100%;
          justify-content: center;
        }
        .cta-perks {
          gap: 14px;
          font-size: 12px;
        }

        /* Footer */
        .footer-inner {
          grid-template-columns: 1fr;
          gap: 28px;
          margin-bottom: 32px;
        }
        .footer-bottom {
          flex-direction: column;
          gap: 6px;
          font-size: 12px;
        }

        /* Page header (subpages) */
        .page-header {
          padding: 100px 0 24px;
        }
        .page-header h1 {
          font-size: clamp(34px, 9vw, 52px);
        }
        .page-header p {
          font-size: 16px;
        }

        /* Calculator */
        .svc-calc {
          border-radius: var(--r);
        }
        .svc-head {
          padding: 16px 18px;
          gap: 12px;
        }
        .sh-name {
          font-size: 14px;
        }
        .sh-hint {
          font-size: 11px;
        }
        .svc-body-inner {
          padding: 0 18px 20px;
        }
        .chips-row {
          gap: 5px;
        }
        .chip-btn {
          font-size: 11.5px;
          padding: 6px 11px;
        }
        .calc-summary {
          padding: 22px;
        }

        /* Portfolio filters */
        .cs-filters {
          gap: 5px;
          margin-bottom: 28px;
        }
        .cs-filter {
          font-size: 12px;
          padding: 7px 12px;
        }

        /* Case study pages */
        .case-section {
          padding: 52px 0;
        }
        .case-head {
          flex-direction: column;
          gap: 0;
          margin-bottom: 28px;
        }
        .case-head-num {
          font-size: 52px;
          opacity: 0.25;
        }
        .case-head-body h2 {
          font-size: 26px;
        }
        .case-head-body p {
          font-size: 15px;
        }
        .case-stats {
          grid-template-columns: repeat(2, 1fr);
          gap: 8px;
        }
        .case-stat {
          padding: 16px 14px;
        }
        .case-stat-val {
          font-size: 22px;
        }
        .case-stat-lbl {
          font-size: 10px;
        }
        .fin-grid {
          grid-template-columns: repeat(2, 1fr);
          gap: 8px;
        }
        .fin-cell {
          padding: 18px 14px;
        }
        .fin-val {
          font-size: 20px;
        }
        .ba-grid {
          gap: 12px;
        }
        .ba-card {
          padding: 22px 20px;
        }
        .ba-card h3 {
          font-size: 19px;
        }
        .ba-item {
          font-size: 13.5px;
        }
        .steps-grid .step-card {
          padding: 22px;
        }
        .step-card h4 {
          font-size: 17px;
        }
        .strat-item {
          grid-template-columns: auto 1fr;
          gap: 16px;
          padding: 20px 0;
        }
        .strat-num {
          font-size: 40px;
        }
        .strat-body h4 {
          font-size: 17px;
        }
        .take-card {
          padding: 22px;
          gap: 14px;
        }
        .take-arrow {
          width: 34px;
          height: 34px;
          font-size: 16px;
        }
        .case-quote {
          padding: 38px 32px 34px 98px;
          border-radius: 22px;
        }
        .case-quote blockquote {
          font-size: 24px;
        }
        .case-quote::before {
          width: 46px;
          height: 46px;
          padding-top: 6px;
          font-size: 44px;
          top: 38px;
          left: 30px;
        }
        .data-table th,
        .data-table td {
          padding: 10px 12px;
          font-size: 11.5px;
        }
        .growth-wrap {
          padding: 22px 18px;
        }
        .growth-sum-val {
          font-size: 18px;
        }
        .growth-svg {
          height: 220px;
        }

        /* About */
        .about-hero {
          padding: 100px 0 48px;
        }
        .about-hero h1 {
          font-size: clamp(48px, 12vw, 68px);
        }
        .about-hero p {
          font-size: 16px;
        }
        .about-portrait {
          aspect-ratio: 4/5;
          max-width: 280px;
          margin: 0 auto;
          padding: 20px;
        }
        .about-portrait::before {
          font-size: 120px;
        }
        .about-portrait-tag {
          padding: 12px 16px;
          font-size: 12px;
        }
        .about-bio {
          padding: 48px 0;
        }
        .about-bio h3 {
          margin-bottom: 18px;
        }
        .about-bio .serif {
          font-size: 24px !important;
        }
        .about-bio-text p {
          font-size: 15px;
        }
        .about-quote {
          padding: 18px 20px;
          font-size: 17px;
          margin: 18px 0;
        }
        .stack-grid {
          grid-template-columns: 1fr;
          gap: 18px;
        }

        /* Timeline horizontal */
        .tl-horizontal {
          padding: 40px 0;
        }
        .tl-h-head {
          padding: 0 var(--px) 24px;
        }
        .tl-h-head h2 {
          font-size: 28px;
        }
        .tl-track {
          padding: 60px var(--px) 40px;
          gap: 16px;
        }
        .tl-node {
          flex: 0 0 calc(100vw - 52px);
          padding: 22px;
        }
        .tl-node h4 {
          font-size: 19px;
        }
        .tl-node p {
          font-size: 14px;
        }
        .tl-progress {
          padding: 0 var(--px);
          gap: 10px;
        }
        .tl-nav-btn {
          width: 38px;
          height: 38px;
          font-size: 16px;
        }

        /* Kontakt */
        .kontakt-grid {
          padding-top: 68px;
        }
        .k-left {
          padding: 40px 22px;
        }
        .k-title {
          font-size: 32px;
        }
        .k-sub {
          font-size: 15px;
          max-width: none;
        }
        .k-perk {
          padding: 12px 14px;
          gap: 10px;
        }
        .k-perk-ico {
          width: 36px;
          height: 36px;
        }
        .k-right {
          padding: 32px 22px;
        }
        .kp-title {
          font-size: 20px;
        }
        .kf-check {
          font-size: 11.5px;
          padding: 6px 12px;
        }
        .cal-grid {
          gap: 2px;
        }
        .cal-day {
          padding: 8px 2px;
          font-size: 11.5px;
        }
        .cal-day-head {
          font-size: 9px;
          padding: 3px;
        }
        .time-slots {
          grid-template-columns: repeat(3, 1fr);
          gap: 5px;
        }
        .time-slot {
          padding: 9px 4px;
          font-size: 11.5px;
        }
        .k-live {
          padding: 18px;
        }
        .k-live-gh {
          font-size: 8px;
          padding: 3px 0;
        }
        .k-live-count-num {
          font-size: 20px;
        }
        .k-live-grid {
          grid-template-columns: auto repeat(7, 1fr);
          gap: 3px;
        }
        .k-socials {
          gap: 6px;
        }
        .k-soc {
          padding: 7px 12px;
          font-size: 11.5px;
        }

        /* Win98 mobile */
        .w98-desktop {
          padding: 8px;
          font-size: 11px;
        }
        .w98-boot-banner {
          top: 12px;
          left: 10px;
          font-size: 11px;
          max-width: calc(100vw - 130px);
        }
        .w98-boot-banner .bb-title {
          font-size: 16px;
        }
        .w98-desktop-icons {
          height: calc(100% - 72px);
          padding-top: 70px;
          flex-direction: row;
          flex-wrap: wrap;
          gap: 6px;
          align-content: flex-start;
        }
        .w98-icon {
          width: 72px;
          padding: 6px 2px;
        }
        .w98-icon-img {
          width: 32px;
          height: 32px;
        }
        .w98-icon-img svg {
          width: 32px;
          height: 32px;
        }
        .w98-icon-label {
          font-size: 13px;
        }
        .w98-nav-override {
          top: 10px;
          right: 10px;
          padding: 6px 10px;
          font-size: 10px;
          letter-spacing: 1px;
        }
        .w98-nav-pull {
          top: 10px;
          padding: 6px 10px;
          font-size: 10px;
          letter-spacing: 1px;
        }
        .w98-window {
          min-width: 0;
          max-width: calc(100vw - 12px);
          width: calc(100vw - 24px) !important;
          max-height: calc(100vh - 80px);
        }
        .w98-window:not(.maximized) {
          top: 58px !important;
          left: 12px !important;
        }
        .w98-title {
          padding: 4px 4px 4px 8px;
          height: 26px;
        }
        .w98-title-text {
          font-size: 8.5px;
          letter-spacing: 0.5px;
        }
        .w98-title-btn {
          width: 24px;
          height: 22px;
          font-size: 13px;
        }
        .w98-content {
          padding: 10px;
          font-size: 11px;
        }
        .w98-field label {
          font-size: 9.5px;
        }
        .w98-input,
        .w98-select,
        .w98-textarea {
          padding: 8px 10px;
          font-size: 14px;
        }
        .w98-seg {
          padding: 8px 10px;
          font-size: 10.5px;
        }
        .w98-seg-row {
          gap: 3px;
        }
        .w98-radio-lbl {
          font-size: 11px;
        }
        .w98-result {
          padding: 12px;
          font-size: 11px;
          line-height: 1.7;
        }
        .w98-btn {
          padding: 10px 14px;
          font-size: 11px;
        }
        .w98-breakdown {
          padding: 12px;
          font-size: 10.5px;
          line-height: 1.8;
        }
        .w98-table th,
        .w98-table td {
          padding: 5px 7px;
          font-size: 10px;
        }
        .w98-tabs {
          overflow-x: auto;
          white-space: nowrap;
          scrollbar-width: none;
        }
        .w98-tabs::-webkit-scrollbar {
          display: none;
        }
        .w98-tab {
          padding: 6px 14px;
          font-size: 10px;
        }
        .w98-taskbar {
          height: 34px;
          padding: 2px;
        }
        .w98-start {
          height: 28px;
          padding: 0 10px 0 6px;
          font-size: 10px;
        }
        .w98-task-btn {
          height: 28px;
          min-width: 80px;
          max-width: 130px;
          font-size: 9.5px;
          padding: 0 6px;
        }
        .w98-tray {
          min-width: auto;
          padding: 3px 8px;
        }
        .w98-tray-status {
          display: none;
        }
        .w98-tray-clock {
          font-size: 14px;
          letter-spacing: 1px;
        }
        .w98-start-menu {
          width: min(220px, calc(100vw - 20px));
          bottom: 40px;
          left: 4px;
        }
        .w98-start-item {
          padding: 10px 10px;
          font-size: 10.5px;
        }
        .w98-mycomputer-grid {
          grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
        }
        .w98-file {
          font-size: 12px;
          padding: 8px 3px;
        }
        .w98-ms-cell {
          width: 24px;
          height: 24px;
          font-size: 14px;
        }
        .w98-ms-digits {
          font-size: 20px;
          min-width: 52px;
        }
        .w98-ms-face {
          width: 32px;
          height: 32px;
        }
      }

      /* SMALL PHONE */
      @media (max-width: 480px) {
        html {
          font-size: 14.5px;
        }
        :root {
          --px: 14px;
        }
        .section {
          padding: 48px 0;
        }
        nav {
          height: 48px;
          top: 6px;
          left: 6px !important;
          right: 6px;
          width: calc(100% - 12px);
        }
        nav .nav-inner {
          padding: 0 10px;
        }
        .nav-logo-text {
          font-size: 13px;
        }
        .nav-cta {
          padding: 8px 14px !important;
          font-size: 11.5px !important;
        }
        .hero {
          padding: 72px 0 32px;
        }
        .hero-h1 {
          font-size: clamp(30px, 9vw, 40px);
        }
        .btn-primary,
        .btn-ghost,
        .btn-outline {
          padding: 12px 18px;
          font-size: 13px;
        }
        .eyebrow {
          font-size: 10px;
        }
        .sec-head h2 {
          font-size: 24px;
        }
        .home-growth {
          padding: 24px 18px;
          border-radius: 18px;
        }
        .home-growth h2 {
          font-size: 22px;
        }
        .home-growth-stats {
          gap: 14px;
        }
        .hg-stat-val {
          font-size: 20px;
        }
        .hgc-svg {
          height: 140px;
        }
        .case-quote {
          padding: 78px 22px 28px;
        }
        .case-quote blockquote {
          font-size: 20px;
          line-height: 1.42;
        }
        .case-quote::before {
          top: 22px;
          left: 22px;
          width: 40px;
          height: 40px;
          padding-top: 5px;
          font-size: 38px;
        }
        .case-quote::after {
          right: 22px;
          width: 52px;
        }
        .case-quote cite {
          margin-top: 22px;
          font-size: 10px;
          line-height: 1.5;
        }
        .cta-block {
          padding: 28px 18px;
          border-radius: 20px;
        }
        .cta-block h2 {
          font-size: 24px;
        }
        .tl-track {
          padding: 50px 14px 32px;
        }
        .tl-node {
          flex: 0 0 calc(100vw - 40px);
        }
        .w98-icon {
          width: 68px;
        }
        .w98-icon-label {
          font-size: 12px;
        }
        .w98-window {
          width: calc(100vw - 12px) !important;
          left: 6px !important;
        }
        .w98-window.maximized {
          width: 100% !important;
          left: 0 !important;
        }
        .w98-ms-cell {
          width: 22px;
          height: 22px;
        }
      }

      /* Touch devices — remove hover transforms */
      @media (hover: none) {
        .tilt {
          transform: none !important;
        }
        .tilt.hovering::before {
          opacity: 0 !important;
        }
        .svc-card:hover,
        .cs-card:hover,
        .proc-card:hover,
        .rule-card:hover,
        .result-card:hover {
          transform: translateY(-2px);
        }
        .magnetic {
          transform: none !important;
        }
      }

      /* ================================================================
   W98 MOBILE MENU — hamburger top-left, dropdown to the right
================================================================ */
      .w98-mobile-menu-btn {
        display: none;
      }
      .w98-mobile-menu-list {
        display: none;
      }
      @media (max-width: 768px) {
        /* Hide the desktop center pull on mobile */
        .w98-nav-pull {
          display: none !important;
        }
        body.w98-mode nav {
          display: none !important;
        }

        .w98-mobile-menu-btn {
          display: flex !important;
          flex-direction: column;
          justify-content: center;
          gap: 4px;
          position: absolute;
          top: max(10px, env(safe-area-inset-top));
          left: max(10px, env(safe-area-inset-left));
          z-index: 10001;
          width: 38px;
          height: 38px;
          padding: 0 9px;
          background: var(--c-panel);
          border: 1px solid var(--c-cyan);
          box-shadow:
            0 0 14px rgba(92, 163, 128, 0.35),
            inset 0 0 10px rgba(92, 163, 128, 0.08);
          cursor: pointer;
        }
        .w98-mobile-menu-btn span {
          display: block;
          width: 18px;
          height: 2px;
          background: var(--c-cyan);
          box-shadow: 0 0 4px var(--c-cyan);
          transition:
            transform 0.25s,
            opacity 0.2s;
        }
        .w98-mobile-menu-btn.open span:nth-child(1) {
          transform: translateY(6px) rotate(45deg);
        }
        .w98-mobile-menu-btn.open span:nth-child(2) {
          opacity: 0;
        }
        .w98-mobile-menu-btn.open span:nth-child(3) {
          transform: translateY(-6px) rotate(-45deg);
        }

        .w98-mobile-menu-list {
          display: flex !important;
          flex-direction: column;
          position: absolute;
          top: max(10px, env(safe-area-inset-top));
          left: calc(max(10px, env(safe-area-inset-left)) + 46px);
          z-index: 10000;
          min-width: 180px;
          padding: 4px 0;
          background: linear-gradient(
            180deg,
            var(--c-panel) 0%,
            var(--c-bg-2) 100%
          );
          border: 1px solid var(--c-magenta);
          box-shadow:
            0 0 30px rgba(199, 234, 75, 0.4),
            0 0 0 1px rgba(92, 163, 128, 0.25) inset;
          opacity: 0;
          pointer-events: none;
          transform: translateX(-8px);
          transition:
            opacity 0.2s,
            transform 0.2s;
          font-family: "JetBrains Mono", monospace;
        }
        .w98-mobile-menu-list.open {
          opacity: 1;
          pointer-events: auto;
          transform: translateX(0);
        }
        .w98-mobile-menu-list a {
          display: block;
          padding: 11px 14px;
          font-size: 12px;
          color: var(--c-ink);
          letter-spacing: 1px;
          text-transform: uppercase;
          border-bottom: 1px solid rgba(92, 163, 128, 0.12);
          cursor: pointer;
        }
        .w98-mobile-menu-list a:last-child {
          border-bottom: none;
        }
        .w98-mobile-menu-list a:hover,
        .w98-mobile-menu-list a:active {
          background: var(--c-cyan);
          color: #000;
        }
        .w98-mobile-menu-list a.active {
          color: var(--c-magenta);
          text-shadow: 0 0 4px var(--c-magenta);
        }

        /* Shift boot-banner "system" label to the right so it doesn't collide with hamburger */
        .w98-boot-banner {
          left: calc(max(12px, env(safe-area-inset-left)) + 56px) !important;
        }
      }

      /* ================================================================
   MOBILE FIXES — nav centering, w98 touch, iOS Safari
================================================================ */
      @media (max-width: 768px) {
        /* Keep nav pill centered on mobile (override stretched layout) */
        nav {
          top: var(--site-nav-top) !important;
          left: 50% !important;
          right: auto !important;
          transform: translateX(-50%) !important;
          width: auto !important;
          max-width: calc(100vw - 20px) !important;
          height: var(--site-nav-height) !important;
          border-radius: 999px !important;
        }
        nav .nav-inner {
          padding: 0 8px 0 14px;
          gap: 8px;
        }
        .nav-burger {
          width: 38px;
          height: 38px;
          flex-shrink: 0;
        }
        .nav-cta {
          padding: 8px 14px !important;
          font-size: 12px !important;
          white-space: nowrap;
        }
        /* w98 nav pull/override — spacing with safe-area */
        .w98-nav-pull {
          top: max(10px, env(safe-area-inset-top)) !important;
        }
        .w98-nav-override {
          top: max(10px, env(safe-area-inset-top)) !important;
          right: max(10px, env(safe-area-inset-right)) !important;
        }

        /* Boot banner — show only "system" label on mobile */
        .w98-boot-banner .bb-title,
        .w98-boot-banner .bb-line {
          display: none !important;
        }
        .w98-boot-banner {
          top: max(12px, env(safe-area-inset-top)) !important;
          left: max(12px, env(safe-area-inset-left)) !important;
          max-width: none !important;
        }
        .w98-boot-banner::before {
          content: "Studio OS";
          font-family: "JetBrains Mono", monospace;
          font-size: 10px;
          color: var(--c-magenta);
          letter-spacing: 0.12em;
          text-transform: uppercase;
          opacity: 0.85;
          display: inline-block;
          font-weight: 500;
        }
        /* More room for icons since banner is tiny now */
        .w98-desktop-icons {
          padding-top: 44px !important;
          height: calc(100% - 46px) !important;
        }

        /* Start menu — mobile shows only exit_session */
        .w98-start-menu {
          width: min(220px, calc(100vw - 20px));
        }
        .w98-start-menu .w98-start-sep {
          display: none !important;
        }
        .w98-start-menu .w98-start-item:not(:last-child) {
          display: none !important;
        }
        .w98-start-menu .w98-start-item:last-child {
          padding: 14px 12px;
          font-size: 12px;
        }

        /* Safe-area for w98 taskbar */
        .w98-taskbar {
          padding-bottom: max(2px, env(safe-area-inset-bottom)) !important;
          height: auto !important;
          min-height: 34px;
        }
        #page-aplikacje.active {
          height: 100vh;
          height: 100svh;
        }
      }

      /* iOS Safari — safer backdrop-filter fallback + prevent rendering glitch */
      @supports not (backdrop-filter: blur(1px)) {
        nav {
          background: rgba(255, 255, 255, 0.92) !important;
        }
      }

      /* ================================================================
   FIRMOWY HUB — product showcase + portfolio case
================================================================ */
      .hub-home {
        padding: clamp(72px, 9vw, 132px) 0;
        position: relative;
        overflow: hidden;
      }
      .hub-home::before {
        content: "";
        position: absolute;
        inset: 10% -15%;
        background: radial-gradient(
          circle at 72% 42%,
          rgba(92, 163, 128, 0.16),
          transparent 34%
        );
        pointer-events: none;
      }
      .hub-shell {
        position: relative;
        overflow: hidden;
        border-radius: 28px;
        background: linear-gradient(
          135deg,
          #0d1a14 0%,
          #14271f 56%,
          #0a1510 100%
        );
        color: var(--bg);
        border: 1px solid rgba(242, 239, 230, 0.12);
        box-shadow: 0 34px 90px -38px rgba(13, 26, 19, 0.72);
      }
      .hub-shell::before {
        content: "";
        position: absolute;
        inset: 0;
        background-image:
          linear-gradient(rgba(232, 223, 184, 0.045) 1px, transparent 1px),
          linear-gradient(
            90deg,
            rgba(232, 223, 184, 0.045) 1px,
            transparent 1px
          );
        background-size: 46px 46px;
        mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.8), transparent 72%);
        pointer-events: none;
      }
      .hub-shell::after {
        content: "";
        position: absolute;
        width: 420px;
        height: 420px;
        border-radius: 50%;
        right: -140px;
        top: -210px;
        background: radial-gradient(
          circle,
          rgba(199, 234, 75, 0.18),
          transparent 68%
        );
        animation: hubGlow 7s ease-in-out infinite alternate;
        pointer-events: none;
      }
      @keyframes hubGlow {
        to {
          transform: translate(-36px, 42px) scale(1.12);
          opacity: 0.65;
        }
      }
      .hub-home-grid {
        display: grid;
        grid-template-columns: minmax(0, 0.82fr) minmax(520px, 1.18fr);
        gap: clamp(34px, 5vw, 74px);
        align-items: center;
        padding: clamp(34px, 5vw, 76px);
        position: relative;
        z-index: 2;
      }
      .hub-copy {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
      }
      .hub-kicker {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        font-family: var(--mono);
        font-size: 10px;
        letter-spacing: 0.15em;
        text-transform: uppercase;
        color: var(--panel-hi);
        font-weight: 600;
        margin-bottom: 24px;
      }
      .hub-kicker::before {
        content: "";
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #c7ea4b;
        box-shadow:
          0 0 0 5px rgba(199, 234, 75, 0.09),
          0 0 18px rgba(199, 234, 75, 0.4);
        animation: pulse 2s infinite;
      }
      .hub-copy h2 {
        font-family: var(--display);
        font-size: clamp(38px, 5vw, 74px);
        font-weight: 500;
        letter-spacing: -0.045em;
        line-height: 0.9;
        color: var(--bg);
        text-wrap: balance;
        margin: 0 0 24px;
      }
      .hub-copy h2 .ital {
        color: var(--panel-hi);
        font-weight: 600;
      }
      .hub-copy > p {
        font-size: 15px;
        line-height: 1.65;
        color: rgba(242, 239, 230, 0.72);
        max-width: 54ch;
        margin: 0 0 24px;
      }
      .hub-tags {
        display: flex;
        flex-wrap: wrap;
        gap: 7px;
        margin-bottom: 28px;
      }
      .hub-tags span {
        padding: 6px 10px;
        border: 1px solid rgba(242, 239, 230, 0.15);
        border-radius: 999px;
        background: rgba(242, 239, 230, 0.04);
        font-family: var(--mono);
        font-size: 9.5px;
        letter-spacing: 0.09em;
        text-transform: uppercase;
        color: rgba(242, 239, 230, 0.72);
      }
      .hub-actions {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
        margin-bottom: 34px;
      }
      .hub-proof {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        width: 100%;
        border-top: 1px solid rgba(242, 239, 230, 0.13);
        padding-top: 22px;
        gap: 16px;
      }
      .hub-proof-item strong {
        display: block;
        font-family: var(--display);
        font-size: clamp(22px, 2.2vw, 32px);
        font-weight: 500;
        color: var(--panel-hi);
        letter-spacing: -0.03em;
        line-height: 1;
      }
      .hub-proof-item span {
        display: block;
        margin-top: 7px;
        font-family: var(--mono);
        font-size: 9px;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: rgba(242, 239, 230, 0.48);
        line-height: 1.4;
      }
      .hub-demo {
        min-width: 0;
        position: relative;
      }
      .hub-demo::before {
        content: "";
        position: absolute;
        inset: 16% 8% -8%;
        background: rgba(0, 0, 0, 0.42);
        filter: blur(38px);
        border-radius: 30px;
        z-index: -1;
      }
      .hub-browser {
        overflow: hidden;
        border: 1px solid rgba(242, 239, 230, 0.17);
        border-radius: 18px;
        background: #f4f6fa;
        box-shadow: 0 24px 70px -20px rgba(0, 0, 0, 0.6);
        transform: perspective(1500px) rotateY(-2.5deg) rotateX(1deg);
        transition: transform 0.55s cubic-bezier(0.2, 0.8, 0.3, 1);
      }
      .hub-browser:hover {
        transform: perspective(1500px) rotateY(0) rotateX(0) translateY(-4px);
      }
      .hub-browser-bar {
        height: 42px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        padding: 0 15px;
        background: #101a2a;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        color: #fff;
      }
      .hub-browser-dots {
        display: flex;
        gap: 6px;
      }
      .hub-browser-dots i {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.28);
      }
      .hub-browser-dots i:first-child {
        background: #c7ea4b;
      }
      .hub-browser-url {
        font-family: var(--mono);
        font-size: 9px;
        letter-spacing: 0.08em;
        color: rgba(255, 255, 255, 0.56);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .hub-live {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-family: var(--mono);
        font-size: 8px;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        color: #c7ea4b;
      }
      .hub-live::before {
        content: "";
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: #c7ea4b;
        box-shadow: 0 0 8px #c7ea4b;
      }
      .hub-tabs {
        display: flex;
        gap: 3px;
        padding: 8px;
        background: #111c2d;
        overflow-x: auto;
        scrollbar-width: none;
      }
      .hub-tabs::-webkit-scrollbar {
        display: none;
      }
      .hub-tab {
        border: 0;
        border-radius: 8px;
        background: transparent;
        color: rgba(255, 255, 255, 0.57);
        font-family: var(--mono);
        font-size: 9px;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        padding: 8px 11px;
        cursor: pointer;
        white-space: nowrap;
        transition: all 0.25s;
      }
      .hub-tab:hover {
        color: #fff;
        background: rgba(255, 255, 255, 0.07);
      }
      .hub-tab.active {
        background: #2864ef;
        color: #fff;
        box-shadow: 0 6px 18px rgba(40, 100, 239, 0.3);
      }
      .hub-shot-stage {
        position: relative;
        aspect-ratio: 1.44/1;
        background: #edf1f7;
        overflow: hidden;
      }
      .hub-shot {
        display: none;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: top left;
        animation: hubShotIn 0.55s cubic-bezier(0.2, 0.8, 0.3, 1) both;
      }
      .hub-shot.active {
        display: block;
      }
      @keyframes hubShotIn {
        from {
          opacity: 0;
          transform: scale(1.025) translateY(7px);
        }
        to {
          opacity: 1;
          transform: none;
        }
      }
      .hub-shot-meta {
        position: absolute;
        left: 14px;
        right: 14px;
        bottom: 13px;
        display: flex;
        justify-content: space-between;
        gap: 12px;
        padding: 10px 13px;
        background: rgba(10, 20, 31, 0.88);
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: 10px;
        color: #fff;
        font-family: var(--mono);
        font-size: 9px;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        backdrop-filter: blur(12px);
      }
      .hub-shot-meta strong {
        color: #c7ea4b;
        font-weight: 600;
      }
      .hub-note {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        margin-top: 14px;
        font-family: var(--mono);
        font-size: 9px;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: rgba(242, 239, 230, 0.47);
      }
      .hub-note span:first-child {
        display: flex;
        align-items: center;
        gap: 7px;
      }
      .hub-note span:first-child::before {
        content: "↻";
        color: #c7ea4b;
        font-size: 14px;
        animation: hubSpin 5s linear infinite;
      }
      @keyframes hubSpin {
        to {
          transform: rotate(360deg);
        }
      }
      .hub-module-info {
        display: grid;
        grid-template-columns: 150px 1fr;
        gap: 18px;
        padding: 17px 19px;
        background: #101a2a;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        color: #fff;
      }
      .hub-module-info strong {
        font-family: var(--display);
        font-size: 19px;
        font-weight: 500;
        color: #c7ea4b;
        letter-spacing: -0.02em;
      }
      .hub-module-info span {
        font-size: 11px;
        line-height: 1.55;
        color: rgba(255, 255, 255, 0.6);
      }
      .hub-mail-demo {
        background: #eef2f7;
        padding: 13px;
        color: #111c2d;
        font-family: Inter, Arial, sans-serif;
      }
      .hub-mail-top {
        display: flex;
        gap: 7px;
        flex-wrap: wrap;
        margin-bottom: 11px;
      }
      .hub-mail-chip {
        padding: 7px 10px;
        border-radius: 999px;
        background: #fff;
        border: 1px solid #d7deea;
        font-size: 9px;
        font-weight: 700;
      }
      .hub-mail-chip.active {
        background: #e6efff;
        border-color: #9cbcff;
        color: #1556d8;
      }
      .hub-mail-grid {
        display: grid;
        grid-template-columns: 0.38fr 0.72fr 1.1fr;
        height: calc(100% - 42px);
        border: 1px solid #d7deea;
        border-radius: 10px;
        overflow: hidden;
        background: #fff;
      }
      .hub-mail-folders {
        padding: 13px;
        border-right: 1px solid #d7deea;
        background: #f8faff;
      }
      .hub-mail-folders strong,
      .hub-mail-list strong,
      .hub-mail-message strong {
        display: block;
        font-size: 10px;
        margin-bottom: 9px;
      }
      .hub-mail-folder {
        display: flex;
        justify-content: space-between;
        gap: 7px;
        padding: 7px 8px;
        margin-bottom: 3px;
        border-radius: 7px;
        font-size: 8px;
        font-weight: 650;
      }
      .hub-mail-folder.active {
        background: #e6efff;
        color: #1556d8;
      }
      .hub-mail-list {
        padding: 13px;
        border-right: 1px solid #d7deea;
      }
      .hub-mail-row {
        padding: 8px 7px;
        border-top: 1px solid #edf0f5;
      }
      .hub-mail-row b {
        display: block;
        font-size: 8.5px;
      }
      .hub-mail-row span {
        font-size: 7.5px;
        color: #708097;
      }
      .hub-mail-pill {
        display: inline-flex !important;
        width: auto;
        margin-top: 4px;
        padding: 2px 5px;
        border-radius: 999px;
        background: #dcfce7;
        color: #15803d !important;
        font-size: 6.5px !important;
      }
      .hub-mail-message {
        padding: 15px;
      }
      .hub-mail-message h4 {
        font-size: 15px;
        margin: 0 0 11px;
      }
      .hub-mail-actions {
        display: flex;
        gap: 6px;
        margin-bottom: 16px;
      }
      .hub-mail-actions i {
        font-style: normal;
        padding: 6px 8px;
        border: 1px solid #d7deea;
        border-radius: 6px;
        font-size: 7px;
        font-weight: 700;
      }
      .hub-mail-body {
        padding: 14px;
        border: 1px solid #e1e6ef;
        border-radius: 8px;
        font-size: 8px;
        line-height: 1.7;
        color: #4b5870;
      }
      .hub-case-browser {
        border-radius: 22px;
        overflow: hidden;
        box-shadow: var(--shadow-lg);
      }
      .hub-case-browser .hub-browser {
        transform: none;
        border-radius: 0;
        border-color: #d9e0eb;
        box-shadow: none;
      }
      .hub-case-browser .hub-tabs {
        padding: 11px;
        gap: 5px;
      }
      .hub-case-browser .hub-tab {
        font-size: 9px;
        padding: 9px 12px;
      }
      .hub-case-browser .hub-shot-stage {
        aspect-ratio: 1.44/1;
      }
      .hub-case-browser .hub-module-info {
        grid-template-columns: 210px 1fr;
        padding: 22px 25px;
      }
      .hub-case-browser .hub-module-info strong {
        font-size: 24px;
      }
      .hub-case-browser .hub-module-info span {
        font-size: 13px;
        max-width: 86ch;
      }

      .hub-case-hero {
        padding: 130px 0 44px;
        position: relative;
        overflow: hidden;
        background: linear-gradient(
          180deg,
          rgba(92, 163, 128, 0.08),
          transparent
        );
      }
      .hub-case-hero::before {
        content: "";
        position: absolute;
        inset: 0;
        background-image: radial-gradient(
          rgba(31, 122, 77, 0.18) 1px,
          transparent 1px
        );
        background-size: 28px 28px;
        mask-image: linear-gradient(180deg, #000, transparent 86%);
        pointer-events: none;
      }
      .hub-case-head {
        position: relative;
        z-index: 2;
      }
      .hub-case-meta {
        display: flex;
        justify-content: space-between;
        gap: 18px;
        flex-wrap: wrap;
        font-family: var(--mono);
        font-size: 10px;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--muted);
        margin-bottom: 26px;
      }
      .hub-case-meta strong {
        color: var(--brand);
      }
      .hub-case-title {
        font-family: var(--display);
        font-size: clamp(48px, 8.4vw, 126px);
        line-height: 0.84;
        letter-spacing: -0.055em;
        font-weight: 500;
        max-width: 11ch;
        margin: 0 0 32px;
        text-wrap: balance;
      }
      .hub-case-title .ital {
        color: var(--brand);
        font-weight: 600;
      }
      .hub-case-lead {
        display: grid;
        grid-template-columns: minmax(0, 1.2fr) minmax(300px, 0.8fr);
        gap: clamp(28px, 6vw, 84px);
        align-items: end;
      }
      .hub-case-lead p {
        font-size: 18px;
        line-height: 1.6;
        color: var(--ink-3);
        max-width: 62ch;
        margin: 0;
      }
      .hub-case-lead p strong {
        color: var(--ink);
      }
      .hub-case-badges {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
      }
      .hub-case-badge {
        padding: 16px;
        border: 1px solid var(--border);
        border-radius: 14px;
        background: var(--surface);
      }
      .hub-case-badge strong {
        display: block;
        font-family: var(--display);
        font-size: 25px;
        letter-spacing: -0.03em;
        color: var(--brand);
      }
      .hub-case-badge span {
        display: block;
        margin-top: 5px;
        font-family: var(--mono);
        font-size: 9px;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--muted);
      }
      .hub-case-cover {
        margin-top: 42px;
        position: relative;
        border-radius: 24px;
        padding: 10px;
        background: var(--dark);
        box-shadow: 0 36px 80px -38px rgba(13, 26, 19, 0.65);
      }
      .hub-case-cover img {
        width: 100%;
        display: block;
        border-radius: 16px;
      }
      .hub-case-cover::after {
        content: "Działająca aplikacja · środowisko lokalne";
        position: absolute;
        right: 26px;
        bottom: 22px;
        padding: 8px 12px;
        border-radius: 999px;
        background: rgba(13, 26, 19, 0.88);
        color: var(--panel-hi);
        border: 1px solid rgba(242, 239, 230, 0.12);
        font-family: var(--mono);
        font-size: 9px;
        letter-spacing: 0.1em;
        text-transform: uppercase;
      }
      .hub-problem-grid {
        display: grid;
        grid-template-columns: 0.8fr 1.2fr;
        gap: clamp(28px, 5vw, 70px);
        align-items: start;
      }
      .hub-problem-quote {
        position: sticky;
        top: 110px;
        padding: clamp(26px, 4vw, 44px);
        border-radius: 22px;
        background: var(--dark);
        color: var(--bg);
        overflow: hidden;
      }
      .hub-problem-quote::after {
        content: "?";
        position: absolute;
        right: -4px;
        bottom: -50px;
        font-family: var(--display);
        font-size: 210px;
        color: rgba(232, 223, 184, 0.07);
        line-height: 1;
      }
      .hub-problem-quote p {
        font-family: var(--display);
        font-size: clamp(26px, 3vw, 42px);
        line-height: 1.05;
        letter-spacing: -0.035em;
        position: relative;
        z-index: 2;
      }
      .hub-problem-quote span {
        display: block;
        margin-top: 22px;
        font-family: var(--mono);
        font-size: 10px;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--panel-hi);
        position: relative;
        z-index: 2;
      }
      .hub-friction {
        display: flex;
        flex-direction: column;
        border-top: 1px solid var(--border);
      }
      .hub-friction-item {
        display: grid;
        grid-template-columns: 42px 1fr;
        gap: 18px;
        padding: 22px 0;
        border-bottom: 1px solid var(--border);
      }
      .hub-friction-item > span {
        font-family: var(--mono);
        font-size: 10px;
        color: var(--brand);
        letter-spacing: 0.1em;
      }
      .hub-friction-item h3 {
        font-size: 20px;
        margin: 0 0 6px;
        letter-spacing: -0.02em;
      }
      .hub-friction-item p {
        color: var(--muted);
        line-height: 1.6;
        margin: 0;
        font-size: 14px;
      }
      .hub-feature-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
      }
      .hub-feature {
        padding: 26px;
        border: 1px solid var(--border);
        border-radius: 18px;
        background: var(--surface);
        transition:
          transform 0.3s,
          border-color 0.3s,
          box-shadow 0.3s;
      }
      .hub-feature:hover {
        transform: translateY(-5px);
        border-color: var(--brand);
        box-shadow: var(--shadow-lg);
      }
      .hub-feature-num {
        font-family: var(--mono);
        font-size: 10px;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--brand);
        margin-bottom: 34px;
      }
      .hub-feature h3 {
        font-family: var(--display);
        font-size: 24px;
        line-height: 1;
        letter-spacing: -0.03em;
        margin-bottom: 10px;
      }
      .hub-feature p {
        font-size: 13px;
        line-height: 1.6;
        color: var(--muted);
        margin: 0;
      }
      .hub-feature-tags {
        display: flex;
        gap: 5px;
        flex-wrap: wrap;
        margin-top: 18px;
      }
      .hub-feature-tags span {
        padding: 4px 8px;
        border-radius: 999px;
        background: var(--bg-2);
        font-family: var(--mono);
        font-size: 8px;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--ink-3);
      }
      .hub-gallery {
        display: grid;
        grid-template-columns: 1.12fr 0.88fr;
        gap: 18px;
      }
      .hub-gallery-card {
        margin: 0;
        border: 1px solid var(--border);
        border-radius: 20px;
        background: var(--surface);
        overflow: hidden;
        transition:
          transform 0.35s,
          box-shadow 0.35s;
      }
      .hub-gallery-card:hover {
        transform: translateY(-5px);
        box-shadow: var(--shadow-lg);
      }
      .hub-gallery-card.wide {
        grid-row: span 2;
      }
      .hub-gallery-card img {
        display: block;
        width: 100%;
        height: auto;
      }
      .hub-gallery-card figcaption {
        padding: 18px 20px;
        border-top: 1px solid var(--border);
      }
      .hub-gallery-card figcaption strong {
        display: block;
        font-family: var(--display);
        font-size: 20px;
        letter-spacing: -0.02em;
      }
      .hub-gallery-card figcaption span {
        display: block;
        margin-top: 5px;
        font-size: 12px;
        line-height: 1.5;
        color: var(--muted);
      }
      .hub-local {
        position: relative;
        overflow: hidden;
        border-radius: 26px;
        background: linear-gradient(135deg, var(--dark), #173426);
        color: var(--bg);
        padding: clamp(32px, 5vw, 68px);
      }
      .hub-local::before {
        content: "";
        position: absolute;
        width: 500px;
        height: 500px;
        right: -190px;
        top: -250px;
        border-radius: 50%;
        background: radial-gradient(
          circle,
          rgba(199, 234, 75, 0.18),
          transparent 66%
        );
      }
      .hub-local-grid {
        display: grid;
        grid-template-columns: minmax(0, 0.85fr) minmax(460px, 1.15fr);
        gap: clamp(34px, 6vw, 90px);
        align-items: center;
        position: relative;
        z-index: 2;
      }
      .hub-local h2 {
        font-family: var(--display);
        font-size: clamp(36px, 4.8vw, 68px);
        font-weight: 500;
        line-height: 0.92;
        letter-spacing: -0.045em;
        margin: 0 0 20px;
        color: var(--bg);
      }
      .hub-local h2 .ital {
        color: var(--panel-hi);
        font-weight: 600;
      }
      .hub-local p {
        color: rgba(242, 239, 230, 0.68);
        line-height: 1.65;
        margin: 0;
      }
      .hub-flow {
        display: grid;
        grid-template-columns: 1fr 34px 1fr 34px 1fr;
        align-items: center;
      }
      .hub-flow-arrow {
        text-align: center;
        color: #c7ea4b;
        font-size: 20px;
      }
      .hub-flow-node {
        min-height: 160px;
        border: 1px solid rgba(242, 239, 230, 0.15);
        border-radius: 16px;
        padding: 20px;
        background: rgba(242, 239, 230, 0.045);
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        transition:
          background 0.25s,
          transform 0.25s;
      }
      .hub-flow-node:hover {
        background: rgba(242, 239, 230, 0.08);
        transform: translateY(-3px);
      }
      .hub-flow-node i {
        font-style: normal;
        font-family: var(--mono);
        font-size: 9px;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--panel-hi);
      }
      .hub-flow-node strong {
        font-family: var(--display);
        font-size: 22px;
        line-height: 1.05;
        color: var(--bg);
        font-weight: 500;
      }
      .hub-flow-node span {
        font-size: 11px;
        line-height: 1.4;
        color: rgba(242, 239, 230, 0.48);
      }
      .hub-fit-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 10px;
      }
      .hub-fit {
        padding: 24px;
        border: 1px solid var(--border);
        border-radius: 16px;
        background: var(--surface);
      }
      .hub-fit strong {
        display: block;
        font-family: var(--display);
        font-size: 22px;
        letter-spacing: -0.025em;
        margin-bottom: 8px;
      }
      .hub-fit span {
        font-size: 12px;
        line-height: 1.55;
        color: var(--muted);
      }
      .hub-warning {
        margin-top: 22px;
        display: grid;
        grid-template-columns: 180px 1fr;
        gap: clamp(22px, 4vw, 52px);
        padding: clamp(24px, 4vw, 42px);
        border: 1px solid rgba(183, 119, 21, 0.3);
        border-radius: 20px;
        background: linear-gradient(
          135deg,
          rgba(232, 223, 184, 0.24),
          rgba(255, 255, 255, 0.64)
        );
        box-shadow: 0 18px 50px -42px rgba(70, 45, 8, 0.55);
      }
      .hub-warning-label {
        font-family: var(--mono);
        font-size: 10px;
        letter-spacing: 0.13em;
        text-transform: uppercase;
        color: #8a5b12;
        display: flex;
        align-items: flex-start;
        gap: 9px;
      }
      .hub-warning-label::before {
        content: "!";
        display: grid;
        place-items: center;
        width: 22px;
        height: 22px;
        flex: 0 0 22px;
        border-radius: 50%;
        background: #8a5b12;
        color: #fff;
        font-weight: 700;
      }
      .hub-warning h3 {
        font-family: var(--display);
        font-size: clamp(24px, 3vw, 34px);
        line-height: 1;
        letter-spacing: -0.03em;
        margin: 0 0 12px;
      }
      .hub-warning p {
        font-size: 13px;
        line-height: 1.65;
        color: var(--ink-3);
        margin: 0;
      }
      .hub-warning ul {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px 24px;
        margin: 18px 0 0;
        padding: 0;
        list-style: none;
      }
      .hub-warning li {
        position: relative;
        padding-left: 17px;
        font-size: 12px;
        line-height: 1.5;
        color: var(--muted);
      }
      .hub-warning li::before {
        content: "—";
        position: absolute;
        left: 0;
        color: #8a5b12;
      }

      @media (max-width: 1050px) {
        .hub-home-grid {
          grid-template-columns: 1fr;
          padding: clamp(28px, 5vw, 58px);
        }
        .hub-demo {
          max-width: 760px;
        }
        .hub-feature-grid {
          grid-template-columns: repeat(2, 1fr);
        }
        .hub-local-grid {
          grid-template-columns: 1fr;
        }
        .hub-flow {
          max-width: 720px;
        }
        .hub-fit-grid {
          grid-template-columns: repeat(2, 1fr);
        }
      }
      @media (max-width: 760px) {
        .hub-home {
          padding: 64px 0;
        }
        .hub-shell {
          border-radius: 20px;
        }
        .hub-copy h2 {
          font-size: clamp(38px, 12vw, 58px);
        }
        .hub-proof {
          gap: 8px;
        }
        .hub-proof-item strong {
          font-size: 23px;
        }
        .hub-browser {
          transform: none;
          border-radius: 13px;
        }
        .hub-browser:hover {
          transform: translateY(-3px);
        }
        .hub-shot-stage,
        .hub-case-browser .hub-shot-stage {
          aspect-ratio: 1.05/1;
        }
        .hub-shot {
          object-fit: cover;
        }
        .hub-shot-meta {
          display: none;
        }
        .hub-note {
          display: none;
        }
        .hub-module-info,
        .hub-case-browser .hub-module-info {
          grid-template-columns: 1fr;
          gap: 5px;
          padding: 14px;
        }
        .hub-case-browser .hub-module-info strong {
          font-size: 19px;
        }
        .hub-case-browser .hub-module-info span {
          font-size: 11px;
        }
        .hub-mail-demo {
          padding: 8px;
        }
        .hub-mail-grid {
          grid-template-columns: 0.58fr 1fr;
        }
        .hub-mail-message {
          display: none;
        }
        .hub-mail-folders {
          padding: 8px;
        }
        .hub-mail-list {
          padding: 8px;
          border-right: 0;
        }
        .hub-mail-chip {
          font-size: 7px;
          padding: 5px 7px;
        }
        .hub-case-hero {
          padding: 104px 0 28px;
        }
        .hub-case-title {
          font-size: clamp(46px, 15vw, 72px);
        }
        .hub-case-lead {
          grid-template-columns: 1fr;
        }
        .hub-case-lead p {
          font-size: 16px;
        }
        .hub-case-cover {
          margin-top: 28px;
          border-radius: 16px;
          padding: 6px;
          overflow: hidden;
        }
        .hub-case-cover img {
          min-height: 270px;
          object-fit: cover;
          object-position: top left;
        }
        .hub-case-cover::after {
          right: 12px;
          bottom: 10px;
          font-size: 7px;
        }
        .hub-problem-grid {
          grid-template-columns: 1fr;
        }
        .hub-problem-quote {
          position: relative;
          top: auto;
        }
        .hub-feature-grid {
          grid-template-columns: 1fr;
        }
        .hub-gallery {
          grid-template-columns: 1fr;
        }
        .hub-gallery-card.wide {
          grid-row: auto;
        }
        .hub-flow {
          grid-template-columns: 1fr;
        }
        .hub-flow-arrow {
          transform: rotate(90deg);
          height: 28px;
        }
        .hub-fit-grid {
          grid-template-columns: 1fr;
        }
        .hub-case-badges {
          grid-template-columns: 1fr 1fr;
        }
        .hub-warning {
          grid-template-columns: 1fr;
        }
        .hub-warning ul {
          grid-template-columns: 1fr;
        }
      }

/* Sekcja CSS 2 z pliku HTML */
/* Firmowy HUB — spokojniejszy, produktowy layout bez dekoracji udających interfejs. */
      .nav-links a,
      .nav-cta {
        white-space: nowrap;
      }
      .hub-home {
        padding: clamp(32px, 4vw, 60px) 0;
        overflow: visible;
      }
      .hub-home::before,
      .hub-shell::before,
      .hub-shell::after,
      .hub-demo::before {
        display: none;
      }
      .hub-shell {
        border-radius: 22px;
        background: #10281e;
        border: 1px solid rgba(242, 239, 230, 0.13);
        box-shadow: 0 22px 60px -38px rgba(13, 26, 19, 0.65);
      }
      .hub-home-grid {
        grid-template-columns: minmax(300px, 0.72fr) minmax(0, 1.28fr);
        gap: clamp(28px, 4vw, 52px);
        padding: clamp(28px, 3.6vw, 48px);
      }
      .hub-kicker {
        gap: 0;
        margin-bottom: 16px;
        letter-spacing: 0.13em;
      }
      .hub-kicker::before {
        display: none;
      }
      .hub-copy h2 {
        font-size: clamp(36px, 4.2vw, 58px);
        line-height: 0.96;
        margin-bottom: 18px;
      }
      .hub-copy > p {
        font-size: 14.5px;
        line-height: 1.55;
        max-width: 52ch;
        margin-bottom: 22px;
      }
      .hub-tags,
      .hub-proof,
      .hub-note {
        display: none;
      }
      .hub-actions {
        margin-bottom: 0;
      }
      .hub-browser {
        position: relative;
        border-radius: 14px;
        box-shadow: 0 18px 42px -26px rgba(0, 0, 0, 0.65);
        transform: none;
        transition: none;
      }
      .hub-browser:hover {
        transform: none;
      }
      .hub-mobile-preview {
        display: none;
      }
      .hub-browser-bar {
        height: 36px;
        padding: 0 13px;
      }
      .hub-browser-dots {
        display: none;
      }
      .hub-live {
        color: rgba(255, 255, 255, 0.55);
      }
      .hub-live::before {
        display: none;
      }
      .hub-interactive-label {
        color: #c7ea4b;
        font-weight: 600;
      }
      .hub-interactive-label::before {
        display: block;
        width: 6px;
        height: 6px;
        background: #c7ea4b;
        box-shadow: 0 0 0 4px rgba(199, 234, 75, 0.12);
      }
      .hub-tab {
        border-radius: 7px;
        font-size: 8.5px;
        letter-spacing: 0.04em;
        padding: 7px 10px;
        transition:
          background 0.2s,
          color 0.2s;
      }
      .hub-tab.active {
        background: #2f5fe8;
        box-shadow: none;
      }
      .hub-tab.coach-target {
        position: relative;
        z-index: 9;
        color: #fff;
        background: rgba(199, 234, 75, 0.13);
        box-shadow: 0 0 0 2px #c7ea4b;
        animation: hubCoachTarget 1.4s ease-in-out infinite;
      }
      .hub-tab-coach {
        --coach-arrow-x: 50%;
        position: absolute;
        z-index: 12;
        left: 12px;
        top: 82px;
        width: max-content;
        max-width: calc(100% - 24px);
        padding: 10px 13px;
        border: 1px solid rgba(199, 234, 75, 0.55);
        border-radius: 10px;
        background: #101a2a;
        color: #fff;
        box-shadow:
          0 14px 34px rgba(0, 0, 0, 0.3),
          0 0 0 3px rgba(199, 234, 75, 0.08);
        text-align: left;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-7px);
        pointer-events: none;
        transition:
          opacity 0.22s ease,
          transform 0.22s ease,
          visibility 0s linear 0.22s;
      }
      .hub-tab-coach::before {
        content: "";
        position: absolute;
        top: -7px;
        left: var(--coach-arrow-x);
        width: 12px;
        height: 12px;
        background: #101a2a;
        border-left: 1px solid rgba(255, 255, 255, 0.2);
        border-top: 1px solid rgba(255, 255, 255, 0.2);
        transform: translateX(-50%) rotate(45deg);
      }
      .hub-tab-coach.show {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        transition-delay: 0s;
      }
      .hub-tab-coach span {
        display: flex;
        align-items: center;
        gap: 6px;
        font-family: var(--mono);
        font-size: 8px;
        letter-spacing: 0.09em;
        text-transform: uppercase;
        color: #c7ea4b;
      }
      .hub-tab-coach span::before {
        content: "";
        width: 6px;
        height: 6px;
        flex: 0 0 6px;
        border-radius: 50%;
        background: currentColor;
        box-shadow: 0 0 0 4px rgba(199, 234, 75, 0.12);
      }
      .hub-tab-coach strong {
        display: block;
        margin-top: 3px;
        font-size: 11px;
        font-weight: 500;
        white-space: nowrap;
      }
      .hub-tab-coach.done {
        opacity: 0;
        visibility: hidden;
        transform: translateY(-7px);
      }
      @keyframes hubCoachTarget {
        0%,
        100% {
          box-shadow: 0 0 0 2px #c7ea4b;
        }
        50% {
          box-shadow: 0 0 0 7px rgba(199, 234, 75, 0.28);
        }
      }
      .hub-shot-stage {
        aspect-ratio: 1.52/1;
      }
      .hub-shot {
        animation: hubShotIn 0.3s ease both;
      }
      .hub-module-info {
        grid-template-columns: minmax(130px, 180px) 1fr;
        gap: 16px;
        align-items: baseline;
        padding: 13px 16px;
      }
      .hub-module-info strong {
        font-size: 17px;
        line-height: 1.15;
        color: #fff;
      }
      .hub-module-info span {
        font-size: 10.5px;
        line-height: 1.45;
      }
      .hub-case-browser {
        border: 1px solid var(--border);
        border-radius: 16px;
        box-shadow: 0 20px 50px -38px rgba(13, 26, 19, 0.45);
      }
      .hub-case-browser .hub-browser {
        border: 0;
      }
      .hub-case-browser .hub-shot-stage {
        aspect-ratio: 1.44/1;
      }
      .hub-case-browser .hub-module-info {
        grid-template-columns: 190px 1fr;
        padding: 18px 22px;
      }
      .hub-case-browser .hub-module-info strong {
        font-size: 21px;
      }
      .hub-case-browser .hub-module-info span {
        font-size: 12px;
      }
      .hub-case-hero {
        padding: 122px 0 44px;
        background: none;
      }
      .hub-case-hero::before {
        display: none;
      }
      .hub-case-title {
        font-size: clamp(48px, 7.6vw, 108px);
        line-height: 0.9;
        max-width: 12ch;
        margin-bottom: 28px;
      }
      .hub-case-lead {
        display: block;
      }
      .hub-case-lead p {
        max-width: 72ch;
      }
      .hub-case-badges {
        display: none;
      }
      .hub-case-cover {
        margin-top: 36px;
        border: 1px solid var(--border);
        border-radius: 16px;
        padding: 6px;
        background: var(--surface);
        box-shadow: 0 24px 60px -42px rgba(13, 26, 19, 0.6);
      }
      .hub-case-cover img {
        border-radius: 11px;
      }
      .hub-case-cover::after {
        display: none;
      }
      .hub-problem-quote {
        border-radius: 16px;
        padding: clamp(26px, 3vw, 40px);
      }
      .hub-problem-quote::after {
        display: none;
      }
      .hub-problem-quote p {
        font-size: clamp(25px, 2.7vw, 38px);
        line-height: 1.1;
      }
      .hub-problem-quote span {
        color: rgba(242, 239, 230, 0.62);
      }
      .hub-feature-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
      }
      .hub-feature {
        padding: 26px;
        border-radius: 14px;
        transition: none;
      }
      .hub-feature:hover {
        transform: none;
        border-color: var(--border);
        box-shadow: none;
      }
      .hub-feature-num {
        margin-bottom: 20px;
        letter-spacing: 0.1em;
      }
      .hub-feature h3 {
        font-size: 25px;
        line-height: 1.05;
      }
      .hub-feature p {
        font-size: 13.5px;
      }
      .hub-feature-tags {
        display: none;
      }
      .hub-local {
        border-radius: 18px;
        background: var(--dark);
        padding: clamp(30px, 4vw, 54px);
      }
      .hub-local::before {
        display: none;
      }
      .hub-local-grid {
        grid-template-columns: minmax(280px, 0.78fr) minmax(0, 1.22fr);
        gap: clamp(30px, 4vw, 58px);
      }
      .hub-local h2 {
        font-size: clamp(34px, 4vw, 58px);
        line-height: 1;
      }
      .hub-process {
        list-style: none;
        counter-reset: hub-step;
        margin: 0;
        padding: 0;
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        border-top: 1px solid rgba(242, 239, 230, 0.18);
        border-bottom: 1px solid rgba(242, 239, 230, 0.18);
      }
      .hub-process li {
        counter-increment: hub-step;
        min-width: 0;
        padding: 20px 18px;
        border-left: 1px solid rgba(242, 239, 230, 0.14);
      }
      .hub-process li:first-child {
        border-left: 0;
      }
      .hub-process li::before {
        content: "0" counter(hub-step);
        display: block;
        margin-bottom: 28px;
        font-family: var(--mono);
        font-size: 9px;
        letter-spacing: 0.1em;
        color: var(--panel-hi);
      }
      .hub-process strong {
        display: block;
        font-family: var(--display);
        font-size: 20px;
        line-height: 1.15;
        color: var(--bg);
        font-weight: 500;
        overflow-wrap: normal;
        word-break: normal;
        hyphens: none;
      }
      .hub-process span {
        display: block;
        margin-top: 8px;
        font-size: 11px;
        line-height: 1.45;
        color: rgba(242, 239, 230, 0.55);
      }
      .hub-deployment-list {
        border-top: 1px solid rgba(242, 239, 230, 0.18);
      }
      .hub-deployment-item {
        display: grid;
        grid-template-columns: 120px 1fr;
        gap: 18px;
        padding: 18px 0;
        border-bottom: 1px solid rgba(242, 239, 230, 0.18);
      }
      .hub-deployment-item strong {
        font-family: var(--display);
        font-size: 20px;
        color: var(--bg);
        font-weight: 500;
      }
      .hub-deployment-item span {
        font-size: 12px;
        line-height: 1.5;
        color: rgba(242, 239, 230, 0.6);
      }
      .hub-fit-grid {
        grid-template-columns: repeat(2, 1fr);
      }
      .hub-fit {
        border-radius: 14px;
      }
      .hub-fit span {
        font-size: 13px;
      }
      .hub-warning {
        border: 1px solid var(--border);
        border-radius: 16px;
        background: var(--surface);
        box-shadow: none;
      }
      .hub-warning-label::before {
        display: none;
      }
      .hub-mobile-showcase {
        display: grid;
        grid-template-columns: minmax(260px, 0.58fr) minmax(0, 1.42fr);
        gap: clamp(26px, 5vw, 72px);
        align-items: start;
        margin-top: clamp(38px, 6vw, 74px);
        padding-top: clamp(28px, 4vw, 48px);
        border-top: 1px solid var(--border);
      }
      .hub-mobile-showcase + .hub-demo-callout {
        margin-top: clamp(28px, 4vw, 48px);
      }
      .hub-mobile-showcase-head {
        position: sticky;
        top: 100px;
      }
      .hub-mobile-showcase-head h3 {
        font-family: var(--display);
        font-size: clamp(32px, 4vw, 54px);
        font-weight: 500;
        line-height: 0.98;
        letter-spacing: -0.04em;
        margin: 0 0 16px;
      }
      .hub-mobile-showcase-head h3 em {
        color: var(--brand);
        font-style: normal;
        font-weight: 600;
      }
      .hub-mobile-showcase-head p {
        font-size: 14px;
        line-height: 1.65;
        color: var(--muted);
        margin: 0;
      }
      .hub-mobile-screen-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 12px;
        align-items: start;
      }
      .hub-mobile-screen-grid figure {
        overflow: hidden;
        margin: 0;
        border: 1px solid var(--border);
        border-radius: 18px;
        background: var(--surface);
        box-shadow: 0 22px 52px -40px rgba(13, 26, 19, 0.55);
      }
      .hub-mobile-screen-grid img {
        display: block;
        width: 100%;
        height: auto;
        background: #eef2f7;
      }
      .hub-mobile-screen-grid figcaption {
        padding: 14px;
        border-top: 1px solid var(--border);
      }
      .hub-mobile-screen-grid figcaption strong {
        display: block;
        font-family: var(--display);
        font-size: 17px;
        font-weight: 500;
      }
      .hub-mobile-screen-grid figcaption span {
        display: block;
        margin-top: 4px;
        font-size: 10.5px;
        line-height: 1.45;
        color: var(--muted);
      }
      @media (min-width: 1100px) and (min-height: 700px) {
        .hub-home {
          padding: 34px 0;
        }
        .hub-home-grid {
          padding: 34px 38px;
        }
        .hub-copy h2 {
          font-size: clamp(40px, 3.9vw, 56px);
        }
        .hub-shot-stage {
          aspect-ratio: 1.58/1;
        }
      }
      @media (max-width: 980px) {
        .hub-home-grid {
          grid-template-columns: 1fr;
          padding: clamp(28px, 5vw, 50px);
        }
        .hub-demo {
          max-width: 760px;
        }
        .hub-local-grid {
          grid-template-columns: 1fr;
        }
        .hub-mobile-showcase {
          grid-template-columns: 1fr;
        }
        .hub-mobile-showcase-head {
          position: static;
          max-width: 620px;
        }
      }
      @media (max-width: 760px) {
        .hub-home {
          padding: 48px 0;
        }
        .hub-shell {
          border-radius: 16px;
        }
        .hub-home-grid {
          padding: 22px;
        }
        .hub-copy h2 {
          font-size: clamp(38px, 12vw, 54px);
        }
        .hub-actions {
          width: 100%;
        }
        .hub-actions .ed-btn {
          width: 100%;
          justify-content: space-between;
        }
        .hub-browser-bar,
        .hub-tabs,
        .hub-tab-coach,
        .hub-shot-stage {
          display: none;
        }
        .hub-mobile-preview {
          display: grid;
          grid-template-columns: minmax(116px, 0.48fr) minmax(0, 0.52fr);
          gap: 16px;
          align-items: center;
          padding: 14px;
          background: #eef2f7;
        }
        .hub-mobile-preview img {
          display: block;
          width: 100%;
          max-height: 430px;
          object-fit: cover;
          object-position: top;
          border: 1px solid #cfd8e5;
          border-radius: 12px;
          box-shadow: 0 16px 30px -22px rgba(15, 30, 53, 0.55);
        }
        .hub-mobile-preview strong {
          display: block;
          font-family: var(--display);
          font-size: 24px;
          color: #101a2a;
        }
        .hub-mobile-preview span {
          display: block;
          margin-top: 7px;
          font-size: 11px;
          line-height: 1.5;
          color: #65738a;
        }
        .hub-module-info,
        .hub-case-browser .hub-module-info {
          grid-template-columns: 1fr;
          gap: 5px;
          padding: 13px;
        }
        .hub-case-browser .hub-mobile-preview {
          display: none;
        }
        .hub-case-browser .hub-browser-bar,
        .hub-case-browser .hub-tabs,
        .hub-case-browser .hub-tab-coach,
        .hub-case-browser .hub-shot-stage {
          display: flex;
        }
        .hub-case-browser .hub-shot-stage {
          display: block;
          aspect-ratio: 1.05/1;
        }
        .hub-tab-coach {
          padding: 9px 10px;
        }
        .hub-tab-coach strong {
          font-size: 10px;
        }
        .hub-case-hero {
          padding: 104px 0 28px;
        }
        .hub-case-title {
          font-size: clamp(44px, 14vw, 68px);
        }
        .hub-case-cover {
          max-width: 390px;
          margin: 28px auto 0;
          padding: 5px;
          background: var(--dark);
        }
        .hub-case-cover picture,
        .hub-case-cover img {
          display: block;
          width: 100%;
        }
        .hub-case-cover img {
          min-height: 0;
          max-height: 680px;
          object-fit: cover;
          object-position: top;
          border-radius: 12px;
        }
        .hub-feature-grid,
        .hub-fit-grid {
          grid-template-columns: 1fr;
        }
        .hub-process {
          grid-template-columns: 1fr;
        }
        .hub-process li {
          border-left: 0;
          border-top: 1px solid rgba(242, 239, 230, 0.14);
          padding: 17px 0;
        }
        .hub-process li:first-child {
          border-top: 0;
        }
        .hub-process li::before {
          margin-bottom: 9px;
        }
        .hub-deployment-item {
          grid-template-columns: 1fr;
          gap: 5px;
        }
        .hub-mobile-screen-grid {
          display: flex;
          gap: 12px;
          overflow-x: auto;
          padding: 0 2px 14px;
          scroll-snap-type: x mandatory;
        }
        .hub-mobile-screen-grid figure {
          min-width: min(78vw, 310px);
          scroll-snap-align: start;
        }
        .hub-mobile-screen-grid figcaption {
          padding: 13px;
        }
      }
      @media (prefers-reduced-motion: reduce) {
        .hub-tab.coach-target {
          animation: none;
        }
      }

      /* Finalne ograniczenia typografii: nagłówki mają mieścić się także na niskich ekranach. */
      .ed-hero-title h1 {
        font-size: clamp(42px, min(5.8vw, 11svh), 84px);
        line-height: 1.02;
        max-width: 15ch;
      }
      .ed-page-hero h1 {
        font-size: clamp(42px, min(6.2vw, 11.5svh), 92px);
        line-height: 0.96;
        max-width: 17ch;
      }
      .page-header {
        padding: clamp(108px, 14svh, 138px) 0 clamp(30px, 5svh, 54px);
      }
      .page-header h1 {
        font-size: clamp(44px, min(6.1vw, 11svh), 92px);
        line-height: 0.96;
        max-width: 18ch;
      }
      .hub-case-title {
        font-size: clamp(46px, min(6.6vw, 11.5svh), 96px);
        line-height: 0.94;
        max-width: 14ch;
      }
      .nar-hero-title {
        font-size: clamp(46px, min(6.4vw, 11.5svh), 96px);
        line-height: 0.94;
        max-width: 16ch;
      }
      .ed-bio-hero-left h1 {
        font-size: clamp(50px, min(6.6vw, 11.5svh), 108px);
        line-height: 0.92;
        max-width: 15ch;
      }
      #page-kontakt .k-title {
        font-size: clamp(42px, min(5.6vw, 10svh), 78px) !important;
        line-height: 0.98 !important;
        max-width: 14ch;
      }
      .ed-cta h2 {
        font-size: clamp(48px, min(7.2vw, 12svh), 106px);
        line-height: 0.94;
      }
      .ed-bio-manifest blockquote {
        font-size: clamp(32px, min(4vw, 8svh), 60px);
      }

      /* Cztery usługi pomocnicze, a pod nimi jeden pełny blok produktu głównego. */
      .ed-svc-track {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        grid-auto-rows: 1fr;
        align-items: stretch;
      }
      .ed-svc-card {
        min-height: 0;
        height: auto;
        align-self: stretch;
      }
      .hub-home-integrated {
        width: 100%;
        padding: 18px 0 0;
        margin: 0;
        overflow: visible;
      }
      .hub-offer-facts {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        width: 100%;
        margin: 0 0 22px;
        border-top: 1px solid rgba(242, 239, 230, 0.14);
        border-bottom: 1px solid rgba(242, 239, 230, 0.14);
      }
      .hub-offer-facts > span {
        min-width: 0;
        padding: 14px 14px 14px 0;
        border-right: 1px solid rgba(242, 239, 230, 0.14);
      }
      .hub-offer-facts > span + span {
        padding-left: 14px;
      }
      .hub-offer-facts > span:last-child {
        border-right: 0;
      }
      .hub-offer-facts small {
        display: block;
        margin-bottom: 5px;
        font-family: var(--mono);
        font-size: 8px;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: rgba(242, 239, 230, 0.5);
      }
      .hub-offer-facts strong {
        display: block;
        font-family: var(--display);
        font-size: 17px;
        font-weight: 500;
        line-height: 1.15;
        letter-spacing: -0.015em;
        color: var(--panel-hi);
      }

      /* Narzędzia bez drugiej, retro zakładki. */
      .nar-tabs {
        display: none !important;
      }
      /*
       * Wspólny początek nagłówków podstron. Odstęp wynika z położenia
       * nawigacji, jej wysokości i jednego rytmu sekcji, zamiast z osobnych
       * wartości przypisanych do każdej zakładki.
       */
      .page-hero-flow {
        padding-top: calc(
          var(--site-nav-top) + var(--site-nav-height) + var(--page-hero-gap)
        );
      }
      .nar-sys[hidden] {
        display: none !important;
      }
      .nar-tools-head {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(280px, 0.7fr);
        gap: 18px 48px;
        align-items: end;
        margin: clamp(54px, 7vw, 90px) 0 28px;
        padding-top: 28px;
        border-top: 1px solid var(--border);
      }
      .nar-tools-head .hub-sim-kicker {
        grid-column: 1/-1;
      }
      .nar-tools-head h2 {
        font-family: var(--display);
        font-size: clamp(34px, 4.4vw, 62px);
        font-weight: 500;
        letter-spacing: -0.04em;
        line-height: 0.98;
        text-wrap: balance;
        margin: 0;
      }
      .nar-tools-head h2 span {
        color: var(--brand);
        font-weight: 600;
      }
      .nar-tools-head p {
        font-size: 14px;
        line-height: 1.6;
        color: var(--muted);
        margin: 0;
        max-width: 50ch;
      }

      /* Interaktywne demo Firmowego HUB-u. */
      .hub-sim-section {
        scroll-margin-top: 104px;
        margin-bottom: clamp(64px, 8vw, 112px);
      }
      .hub-sim-intro {
        display: grid;
        grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.75fr);
        gap: clamp(28px, 5vw, 80px);
        align-items: end;
        margin-bottom: 28px;
      }
      .hub-sim-kicker {
        display: inline-flex;
        align-items: center;
        gap: 9px;
        font-family: var(--mono);
        font-size: 10px;
        letter-spacing: 0.13em;
        text-transform: uppercase;
        color: var(--brand);
        font-weight: 600;
        margin-bottom: 14px;
      }
      .hub-sim-kicker::before {
        content: "";
        width: 24px;
        height: 1px;
        background: currentColor;
      }
      .hub-sim-intro h2 {
        font-family: var(--display);
        font-size: clamp(38px, 5vw, 72px);
        font-weight: 500;
        letter-spacing: -0.045em;
        line-height: 0.95;
        margin: 0;
        text-wrap: balance;
      }
      .hub-sim-intro h2 span {
        color: var(--brand);
        font-weight: 600;
      }
      .hub-sim-intro-copy p {
        font-size: 15px;
        line-height: 1.62;
        color: var(--ink-3);
        margin: 0 0 16px;
      }
      .hub-sim-legend {
        display: flex;
        flex-wrap: wrap;
        gap: 8px 18px;
        font-family: var(--mono);
        font-size: 9px;
        letter-spacing: 0.07em;
        text-transform: uppercase;
        color: var(--muted);
      }
      .hub-sim-legend span {
        display: inline-flex;
        align-items: center;
        gap: 7px;
      }
      .hub-sim-legend i {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: #28a96b;
        box-shadow: 0 0 0 4px rgba(40, 169, 107, 0.12);
      }
      .hub-demo-entry {
        padding: 120px 0 64px;
        scroll-margin-top: 88px;
        background: none;
      }
      .hub-demo-entry-head {
        display: grid;
        grid-template-columns: minmax(0, 1.15fr) minmax(310px, 0.65fr);
        gap: clamp(28px, 5vw, 74px);
        align-items: end;
        margin-bottom: 26px;
      }
      .hub-demo-entry-head h1 {
        max-width: 17ch;
        margin: 0;
        font-family: var(--display);
        font-size: clamp(42px, min(6.2vw, 11.5svh), 92px);
        font-weight: 500;
        line-height: 0.96;
        letter-spacing: -0.045em;
        color: var(--ink);
        text-wrap: balance;
      }
      .hub-demo-entry-head h1 span {
        color: var(--brand);
        font-weight: 600;
      }
      .hub-demo-entry-copy {
        font-size: 16px;
        line-height: 1.5;
        color: var(--ink-3);
      }
      .hub-demo-entry-copy p {
        margin: 0;
      }
      .hub-demo-entry-copy strong {
        color: inherit;
        font-weight: 600;
      }
      .hub-demo-entry-steps {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px 16px;
        margin: 16px 0 0;
        padding: 0;
        list-style: none;
      }
      .hub-demo-entry-steps li {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        gap: 8px;
        align-items: start;
        min-width: 0;
        padding-top: 9px;
        border-top: 1px solid var(--border);
      }
      .hub-demo-entry-steps > li > span {
        display: grid;
        width: 20px;
        height: 20px;
        place-items: center;
        border-radius: 50%;
        background: var(--brand-soft);
        font-family: var(--mono);
        font-size: 9px;
        line-height: 1;
        color: var(--brand);
      }
      .hub-demo-entry-steps p {
        margin: 0;
        font-size: 12px;
        line-height: 1.45;
        color: var(--ink-3);
      }
      .hub-demo-entry-steps p strong {
        color: var(--ink);
        font-weight: 600;
      }
      #hubDemoApp {
        scroll-margin-top: 84px;
      }
      #page-case-hub .hub-case-hero {
        padding-top: 72px;
      }
      .hub-case-actions {
        display: flex;
        align-items: center;
        gap: 14px;
        flex-wrap: wrap;
        margin-top: 22px;
      }
      .hub-case-actions > span {
        font-family: var(--mono);
        font-size: 9px;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--muted);
      }
      .hub-custom-note {
        display: grid;
        grid-template-columns: 220px 1fr;
        align-items: center;
        gap: 24px;
        margin-top: 14px;
        padding: 22px 24px;
        border: 1px solid var(--border);
        border-radius: 14px;
        background: var(--brand-soft);
      }
      .hub-custom-note strong {
        font-family: var(--display);
        font-size: 20px;
        line-height: 1.1;
        color: var(--brand);
      }
      .hub-custom-note span {
        font-size: 13px;
        line-height: 1.6;
        color: var(--ink-3);
      }
      .hub-demo-callout {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 22px;
        margin-bottom: 18px;
        padding: 18px 20px;
        border: 1px solid var(--border);
        border-radius: 14px;
        background: var(--surface);
      }
      .hub-demo-callout > div {
        display: flex;
        flex-direction: column;
        gap: 5px;
      }
      .hub-demo-callout strong {
        font-family: var(--display);
        font-size: 19px;
        letter-spacing: -0.02em;
      }
      .hub-demo-callout span {
        font-size: 12px;
        color: var(--muted);
        line-height: 1.45;
      }
      .hub-mobile-note {
        display: flex;
        align-items: center;
        gap: 13px;
        margin: -6px 0 18px;
        padding: 13px 15px;
        border: 1px solid var(--border);
        border-radius: 12px;
        background: var(--surface);
      }
      .hub-mobile-note-icon {
        display: grid;
        width: 36px;
        height: 36px;
        flex: 0 0 36px;
        place-items: center;
        border-radius: 9px;
        background: var(--brand-soft);
        color: var(--brand);
        font-size: 18px;
      }
      .hub-mobile-note > div {
        display: flex;
        gap: 5px 14px;
        align-items: baseline;
        flex-wrap: wrap;
      }
      .hub-mobile-note strong {
        font-size: 12px;
      }
      .hub-mobile-note div span {
        font-size: 11px;
        line-height: 1.45;
        color: var(--muted);
      }

      @media (max-width: 1100px) {
        .ed-svc-track {
          grid-template-columns: repeat(2, minmax(0, 1fr));
          grid-auto-rows: auto;
        }
        .ed-svc-card {
          min-height: 350px;
        }
      }
      @media (max-width: 760px) {
        #page-aplikacje.active {
          height: auto !important;
          min-height: 100svh;
        }
        .ed-hero-title h1,
        .ed-page-hero h1,
        .page-header h1,
        .hub-case-title,
        .hub-demo-entry-head h1,
        .nar-hero-title,
        .ed-bio-hero-left h1 {
          font-size: clamp(38px, 11vw, 58px);
          line-height: 1;
          max-width: none;
        }
        #page-kontakt .k-title {
          font-size: clamp(38px, 10vw, 54px) !important;
        }
        .ed-cta h2 {
          font-size: clamp(42px, 11vw, 62px);
        }
        .ed-svc-track {
          grid-template-columns: 1fr;
        }
        .ed-svc-card {
          grid-column: auto;
          min-height: 0;
        }
        .hub-offer-facts {
          grid-template-columns: 1fr;
        }
        .hub-offer-facts > span,
        .hub-offer-facts > span + span {
          padding: 12px 0;
          border-right: 0;
          border-top: 1px solid rgba(242, 239, 230, 0.14);
        }
        .hub-offer-facts > span:first-child {
          border-top: 0;
        }
        .nar-hero {
          margin-bottom: 54px;
        }
        .nar-hero-title {
          margin-bottom: 22px;
        }
        .nar-hero-lead {
          font-size: 16px;
        }
        .hub-sim-intro,
        .nar-tools-head {
          grid-template-columns: 1fr;
        }
        .hub-sim-intro {
          gap: 20px;
        }
        .hub-sim-intro h2 {
          font-size: clamp(36px, 11vw, 54px);
        }
        .hub-custom-note {
          grid-template-columns: 1fr;
          gap: 8px;
        }
        .hub-demo-callout {
          align-items: flex-start;
          flex-direction: column;
        }
        .hub-demo-callout .ed-btn {
          width: 100%;
          justify-content: space-between;
        }
        .hub-mobile-note {
          align-items: flex-start;
        }
        .hub-mobile-note > div {
          display: grid;
          gap: 3px;
        }
      }
      @media (max-width: 480px) {
        .ed-svc-card {
          padding: 22px;
        }
        .ed-svc-price {
          font-size: 8.5px;
        }
        .hub-mobile-note {
          padding: 11px;
        }
        .hub-mobile-note-icon {
          width: 32px;
          height: 32px;
          flex-basis: 32px;
        }
      }

/* Sekcja CSS 3 z pliku HTML */
/* Izolowana makieta Firmowego HUB-u. Wszystkie selektory są ograniczone do #hubDemoApp. */
      #hubDemoApp {
        --sx-blue: #2864e8;
        --sx-blue-dark: #1f51c3;
        --sx-ink: #101a2e;
        --sx-copy: #34425a;
        --sx-muted: #718099;
        --sx-line: #dbe3ef;
        --sx-bg: #f3f6fa;
        --sx-panel: #fff;
        --sx-green: #159455;
        --sx-green-bg: #eaf9f0;
        --sx-orange: #c97614;
        --sx-orange-bg: #fff5e7;
        --sx-red: #d34242;
        --sx-red-bg: #fff0f0;
        --sx-purple: #7655d8;
        position: relative;
        display: grid;
        grid-template-columns: 72px minmax(0, 1fr);
        height: 850px;
        min-height: 720px;
        overflow: hidden;
        border: 1px solid #d9e2ef;
        border-radius: 18px;
        background: var(--sx-bg);
        box-shadow: 0 30px 76px -44px rgba(15, 28, 50, 0.58);
        color: var(--sx-ink);
        font-family: Inter, Arial, sans-serif;
        font-size: 13px;
        text-align: left;
      }
      #hubDemoApp * {
        box-sizing: border-box;
      }
      #hubDemoApp button,
      #hubDemoApp input,
      #hubDemoApp select,
      #hubDemoApp textarea {
        font: inherit;
      }
      #hubDemoApp button,
      #hubDemoApp [data-hub-view],
      #hubDemoApp [data-hub-action] {
        cursor: pointer;
      }
      #hubDemoApp button:focus-visible,
      #hubDemoApp input:focus-visible,
      #hubDemoApp select:focus-visible,
      #hubDemoApp textarea:focus-visible {
        outline: 3px solid rgba(40, 100, 232, 0.22);
        outline-offset: 1px;
      }
      .sx-rail {
        z-index: 3;
        display: flex;
        min-height: 0;
        flex-direction: column;
        align-items: center;
        padding: 12px 8px;
        background: #111b2e;
        color: #9facbf;
      }
      .sx-brand {
        display: grid;
        width: 46px;
        height: 46px;
        flex: 0 0 46px;
        place-items: center;
        margin-bottom: 10px;
        border: 0;
        border-radius: 13px;
        background: linear-gradient(145deg, #15385e, #1aa5a8);
        color: #fff;
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
      }
      .sx-brand svg {
        width: 28px;
        height: 28px;
      }
      .sx-nav {
        display: flex;
        width: 100%;
        min-height: 0;
        flex: 1;
        flex-direction: column;
        gap: 3px;
      }
      .sx-nav-sep {
        height: 9px;
        flex: 0 0 9px;
      }
      .sx-nav-btn {
        position: relative;
        display: grid;
        width: 52px;
        min-height: 42px;
        flex: 0 0 42px;
        place-items: center;
        border: 0;
        border-radius: 9px;
        background: transparent;
        color: #9facbf;
      }
      .sx-nav-btn svg {
        width: 18px;
        height: 18px;
        stroke-width: 1.8;
      }
      .sx-nav-btn:hover {
        background: #1b2a43;
        color: #fff;
      }
      .sx-nav-btn.active {
        background: #243858;
        color: #fff;
        box-shadow: inset 3px 0 0 #5b9aff;
      }
      .sx-nav-label {
        display: none;
      }
      .sx-nav-btn .sx-nav-count {
        position: absolute;
        top: 3px;
        right: 2px;
        min-width: 16px;
        height: 16px;
        padding: 0 4px;
        border: 2px solid #111b2e;
        border-radius: 99px;
        background: #2864e8;
        color: #fff;
        font-size: 8px;
        font-weight: 800;
        line-height: 12px;
        text-align: center;
      }
      .sx-nav-btn::after {
        content: attr(data-label);
        position: absolute;
        z-index: 20;
        left: 60px;
        top: 50%;
        padding: 7px 9px;
        border-radius: 6px;
        background: #0c1424;
        color: #fff;
        box-shadow: 0 7px 18px rgba(4, 10, 20, 0.3);
        font-size: 10px;
        font-weight: 700;
        line-height: 1;
        white-space: nowrap;
        opacity: 0;
        transform: translate(4px, -50%);
        pointer-events: none;
        transition: 0.15s;
      }
      .sx-nav-btn:hover::after,
      .sx-nav-btn:focus-visible::after {
        opacity: 1;
        transform: translate(0, -50%);
      }
      .sx-workspace {
        display: grid;
        min-width: 0;
        min-height: 0;
        grid-template-rows: 64px minmax(0, 1fr);
      }
      .sx-topbar {
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        padding: 0 18px;
        border-bottom: 1px solid var(--sx-line);
        background: #fff;
      }
      .sx-global-search {
        position: relative;
        width: min(520px, 55%);
      }
      .sx-global-search svg {
        position: absolute;
        left: 13px;
        top: 50%;
        width: 16px;
        transform: translateY(-50%);
        color: #8a99af;
      }
      .sx-global-search input {
        width: 100%;
        height: 38px;
        padding: 0 14px 0 39px;
        border: 1px solid #cdd8e6;
        border-radius: 7px;
        background: #fff;
        color: var(--sx-ink);
      }
      .sx-top-meta {
        display: flex;
        align-items: center;
        gap: 9px;
      }
      .sx-demo-pill {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        padding: 7px 9px;
        border: 1px solid #cfe4d8;
        border-radius: 99px;
        background: #f1fbf5;
        color: #23734a;
        font-size: 9px;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.06em;
      }
      .sx-demo-pill::before {
        content: "";
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: #23a968;
      }
      .sx-stage {
        min-width: 0;
        min-height: 0;
        overflow-x: hidden;
        overflow-y: auto;
        padding: 24px 20px 34px;
        background: var(--sx-bg);
        scrollbar-color: #b7c2d2 transparent;
        scrollbar-width: thin;
      }
      .sx-page-head {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        gap: 18px;
        margin-bottom: 17px;
      }
      .sx-page-head .sx-kicker {
        margin: 0 0 6px;
        color: #577196;
        font-size: 9px;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.04em;
      }
      .sx-page-head h3 {
        margin: 0;
        color: var(--sx-ink);
        font-size: 24px;
        line-height: 1.05;
        letter-spacing: -0.025em;
      }
      .sx-page-head p {
        margin: 7px 0 0;
        color: var(--sx-muted);
        font-size: 11px;
        line-height: 1.45;
      }
      .sx-head-actions {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 7px;
        flex-wrap: wrap;
      }
      .sx-btn {
        display: inline-flex;
        min-height: 35px;
        align-items: center;
        justify-content: center;
        gap: 7px;
        padding: 8px 12px;
        border: 1px solid #cdd7e5;
        border-radius: 7px;
        background: #fff;
        color: #1b2940;
        font-size: 10px;
        font-weight: 750;
        line-height: 1.1;
        text-decoration: none;
        white-space: nowrap;
      }
      .sx-btn svg {
        width: 14px;
        height: 14px;
      }
      .sx-btn:hover {
        border-color: #96a8c1;
        background: #f9fbfd;
      }
      .sx-btn.primary {
        border-color: var(--sx-blue);
        background: var(--sx-blue);
        color: #fff;
      }
      .sx-btn.primary:hover {
        background: var(--sx-blue-dark);
      }
      .sx-btn.success {
        border-color: #178a50;
        background: #178a50;
        color: #fff;
      }
      .sx-btn.danger {
        border-color: #e6b8b8;
        color: #bb3838;
      }
      .sx-btn:disabled {
        cursor: not-allowed;
        filter: saturate(0.3);
        opacity: 0.52;
      }
      .sx-icon-btn {
        display: grid;
        width: 32px;
        height: 32px;
        place-items: center;
        border: 1px solid #d1dae7;
        border-radius: 7px;
        background: #fff;
        color: #526078;
      }
      .sx-icon-btn svg {
        width: 15px;
        height: 15px;
      }
      .sx-metrics {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 10px;
        margin-bottom: 16px;
      }
      .sx-metrics.six {
        grid-template-columns: repeat(6, minmax(0, 1fr));
      }
      .sx-metric {
        position: relative;
        min-width: 0;
        padding: 15px 15px 14px 52px;
        border: 1px solid var(--sx-line);
        border-radius: 9px;
        background: #fff;
      }
      .sx-metric-icon {
        position: absolute;
        left: 13px;
        top: 15px;
        display: grid;
        width: 29px;
        height: 29px;
        place-items: center;
        border-radius: 7px;
        background: #edf3ff;
        color: var(--sx-blue);
      }
      .sx-metric-icon svg {
        width: 15px;
        height: 15px;
      }
      .sx-metric.orange .sx-metric-icon {
        background: var(--sx-orange-bg);
        color: var(--sx-orange);
      }
      .sx-metric.green .sx-metric-icon {
        background: var(--sx-green-bg);
        color: var(--sx-green);
      }
      .sx-metric.red .sx-metric-icon {
        background: var(--sx-red-bg);
        color: var(--sx-red);
      }
      .sx-metric.purple .sx-metric-icon {
        background: #f3efff;
        color: var(--sx-purple);
      }
      .sx-metric span {
        display: block;
        overflow: hidden;
        color: #7d8ca3;
        font-size: 9px;
        font-weight: 700;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .sx-metric strong {
        display: block;
        margin-top: 4px;
        font-size: 21px;
        line-height: 1;
      }
      .sx-metric small {
        display: block;
        overflow: hidden;
        margin-top: 5px;
        color: #8491a4;
        font-size: 8px;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .sx-panel {
        min-width: 0;
        border: 1px solid var(--sx-line);
        border-radius: 9px;
        background: #fff;
        overflow: hidden;
      }
      .sx-panel-head {
        display: flex;
        min-height: 52px;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 12px 15px;
        border-bottom: 1px solid #e6ebf2;
      }
      .sx-panel-head h4,
      .sx-panel-head strong {
        margin: 0;
        font-size: 13px;
      }
      .sx-panel-head p {
        margin: 4px 0 0;
        color: var(--sx-muted);
        font-size: 9px;
      }
      .sx-panel-body {
        padding: 14px 15px;
      }
      .sx-grid {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(290px, 0.72fr);
        gap: 12px;
      }
      .sx-grid.equal {
        grid-template-columns: 1fr 1fr;
      }
      .sx-grid.three {
        grid-template-columns: repeat(3, 1fr);
      }
      .sx-tabs {
        display: flex;
        align-items: center;
        gap: 2px;
        margin-bottom: 12px;
        border-bottom: 1px solid #d8e0eb;
        overflow-x: auto;
      }
      .sx-tab {
        position: relative;
        min-height: 38px;
        padding: 8px 11px;
        border: 0;
        background: transparent;
        color: #53627a;
        font-size: 10px;
        font-weight: 750;
        white-space: nowrap;
      }
      .sx-tab span {
        display: inline-grid;
        min-width: 18px;
        height: 18px;
        place-items: center;
        margin-left: 5px;
        padding: 0 5px;
        border-radius: 99px;
        background: #edf2fa;
        color: #436087;
        font-size: 8px;
      }
      .sx-tab.active {
        color: var(--sx-blue);
      }
      .sx-tab.active::after {
        content: "";
        position: absolute;
        left: 8px;
        right: 8px;
        bottom: -1px;
        height: 2px;
        background: var(--sx-blue);
      }
      .sx-badge {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        padding: 4px 7px;
        border: 1px solid #dbe3ef;
        border-radius: 99px;
        background: #f5f7fa;
        color: #536178;
        font-size: 8px;
        font-weight: 800;
        line-height: 1.1;
        white-space: nowrap;
      }
      .sx-badge.blue {
        border-color: #c8d9ff;
        background: #edf3ff;
        color: #245acb;
      }
      .sx-badge.green {
        border-color: #b8eccb;
        background: #eafaf0;
        color: #167a45;
      }
      .sx-badge.orange {
        border-color: #f0d08e;
        background: #fff5df;
        color: #a8680f;
      }
      .sx-badge.red {
        border-color: #ffcaca;
        background: #fff0f0;
        color: #c73b3b;
      }
      .sx-badge.purple {
        border-color: #d8cef9;
        background: #f3efff;
        color: #674bc1;
      }
      .sx-list {
        display: flex;
        flex-direction: column;
      }
      .sx-list-row {
        display: grid;
        grid-template-columns: 32px minmax(0, 1fr) auto;
        gap: 10px;
        align-items: center;
        padding: 11px 12px;
        border-bottom: 1px solid #e8edf3;
        background: #fff;
        color: inherit;
        text-align: left;
      }
      .sx-list-row:last-child {
        border-bottom: 0;
      }
      .sx-list-row.button {
        width: 100%;
        border-top: 0;
        border-left: 0;
        border-right: 0;
        cursor: pointer;
      }
      .sx-list-row.button:hover,
      .sx-list-row.button.active {
        background: #edf4ff;
      }
      .sx-row-icon {
        display: grid;
        width: 30px;
        height: 30px;
        place-items: center;
        border-radius: 7px;
        background: #eef4ff;
        color: var(--sx-blue);
      }
      .sx-row-icon svg {
        width: 15px;
        height: 15px;
      }
      .sx-row-main {
        min-width: 0;
      }
      .sx-row-main strong {
        display: block;
        overflow: hidden;
        font-size: 10px;
        line-height: 1.35;
        text-overflow: ellipsis;
      }
      .sx-row-main small {
        display: block;
        overflow: hidden;
        margin-top: 3px;
        color: var(--sx-muted);
        font-size: 8.5px;
        line-height: 1.35;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .sx-row-end {
        display: flex;
        align-items: center;
        gap: 7px;
        color: #8190a5;
        font-size: 8px;
      }
      .sx-row-end.column {
        align-items: flex-end;
        flex-direction: column;
      }
      .sx-form {
        display: grid;
        gap: 10px;
      }
      .sx-form.two {
        grid-template-columns: 1fr 1fr;
      }
      .sx-form.three {
        grid-template-columns: repeat(3, 1fr);
      }
      .sx-form .wide {
        grid-column: 1/-1;
      }
      .sx-field {
        display: grid;
        gap: 5px;
      }
      .sx-field > span,
      .sx-field > label {
        color: #3e4c63;
        font-size: 8px;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.025em;
      }
      .sx-input,
      .sx-select,
      .sx-textarea {
        width: 100%;
        min-height: 36px;
        padding: 8px 10px;
        border: 1px solid #cbd6e4;
        border-radius: 6px;
        background: #fff;
        color: #18243a;
        font-size: 10px;
      }
      .sx-textarea {
        min-height: 75px;
        resize: vertical;
      }
      .sx-input::placeholder,
      .sx-textarea::placeholder {
        color: #96a2b3;
      }
      .sx-check {
        display: flex;
        align-items: center;
        gap: 7px;
        color: #46546b;
        font-size: 9px;
      }
      .sx-file-drop {
        display: grid;
        min-height: 100px;
        place-items: center;
        padding: 16px;
        border: 1px dashed #afbdd1;
        border-radius: 7px;
        background: #f8fafc;
        text-align: center;
      }
      .sx-file-drop strong {
        display: block;
        font-size: 11px;
      }
      .sx-file-drop small {
        display: block;
        margin-top: 5px;
        color: #7d8a9d;
        font-size: 8px;
      }
      .sx-table-wrap {
        overflow: auto;
      }
      .sx-table {
        width: 100%;
        border-collapse: collapse;
        min-width: 650px;
      }
      .sx-table th {
        padding: 9px 10px;
        border-bottom: 1px solid #dfe6ef;
        background: #f7f9fc;
        color: #718098;
        font-size: 7.5px;
        font-weight: 800;
        text-align: left;
        text-transform: uppercase;
        letter-spacing: 0.04em;
      }
      .sx-table td {
        padding: 10px;
        border-bottom: 1px solid #e8edf3;
        color: #35435a;
        font-size: 9px;
        vertical-align: middle;
      }
      .sx-table tr:last-child td {
        border-bottom: 0;
      }
      .sx-table tr.selected td {
        background: #edf4ff;
      }
      .sx-table strong {
        color: #111c30;
      }
      .sx-table small {
        display: block;
        margin-top: 3px;
        color: #7a8799;
        font-size: 8px;
      }
      .sx-table .numeric {
        text-align: right;
        font-variant-numeric: tabular-nums;
      }
      .sx-split-work {
        display: grid;
        grid-template-columns: 285px minmax(0, 1fr);
        min-height: 420px;
        border: 1px solid var(--sx-line);
        border-radius: 9px;
        background: #fff;
        overflow: hidden;
      }
      .sx-split-list {
        min-width: 0;
        border-right: 1px solid var(--sx-line);
        background: #fbfcfe;
      }
      .sx-split-detail {
        min-width: 0;
        padding: 14px;
      }
      .sx-split-list-head {
        padding: 12px;
        border-bottom: 1px solid var(--sx-line);
      }
      .sx-detail-head {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 14px;
        padding-bottom: 12px;
        border-bottom: 1px solid #e4e9f0;
      }
      .sx-detail-head h4 {
        margin: 0;
        font-size: 15px;
        line-height: 1.25;
      }
      .sx-detail-head p {
        margin: 5px 0 0;
        color: var(--sx-muted);
        font-size: 9px;
      }
      .sx-detail-actions {
        display: flex;
        justify-content: flex-end;
        gap: 6px;
        flex-wrap: wrap;
      }
      .sx-callout {
        padding: 11px 12px;
        border: 1px solid #cfe0ff;
        border-radius: 7px;
        background: #f1f6ff;
        color: #294d91;
        font-size: 9px;
        line-height: 1.45;
      }
      .sx-callout.warning {
        border-color: #efd59b;
        background: #fff8e9;
        color: #825c16;
      }
      .sx-callout.success {
        border-color: #bfe8ce;
        background: #effbf4;
        color: #216d44;
      }
      .sx-callout.danger {
        border-color: #f2c3c3;
        background: #fff2f2;
        color: #963535;
      }
      .sx-callout strong {
        font-weight: 800;
      }
      .sx-summary-list {
        display: flex;
        flex-direction: column;
      }
      .sx-summary-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 10px 0;
        border-bottom: 1px solid #e8edf3;
      }
      .sx-summary-item:last-child {
        border-bottom: 0;
      }
      .sx-summary-item span {
        color: #536077;
        font-size: 9px;
      }
      .sx-summary-item strong {
        font-size: 11px;
        text-align: right;
      }
      .sx-flow {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 7px;
      }
      .sx-flow-step {
        min-height: 75px;
        padding: 10px;
        border: 1px solid #dce4ef;
        border-radius: 7px;
        background: #fafbfd;
      }
      .sx-flow-step span {
        display: block;
        color: #78869a;
        font-size: 7.5px;
        font-weight: 800;
        text-transform: uppercase;
      }
      .sx-flow-step strong {
        display: block;
        margin-top: 17px;
        font-size: 17px;
      }
      .sx-flow-step.active {
        border-color: #a9c1fa;
        background: #eef4ff;
        color: #245ed6;
      }
      .sx-flow-step.done {
        border-color: #bfe9ce;
        background: #effaf3;
        color: #157944;
      }
      .sx-card-board {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
      }
      .sx-card {
        padding: 13px;
        border: 1px solid #dce4ef;
        border-radius: 8px;
        background: #fff;
      }
      .sx-card-top {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 10px;
      }
      .sx-card h5 {
        margin: 7px 0 4px;
        font-size: 12px;
        line-height: 1.3;
      }
      .sx-card p {
        margin: 0;
        color: #6f7c90;
        font-size: 8.5px;
        line-height: 1.45;
      }
      .sx-card-meta {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        margin: 12px 0 0;
        border: 1px solid #e1e7ef;
        border-radius: 6px;
        overflow: hidden;
      }
      .sx-card-meta div {
        padding: 8px;
        border-right: 1px solid #e1e7ef;
      }
      .sx-card-meta div:last-child {
        border-right: 0;
      }
      .sx-card-meta small {
        display: block;
        color: #8290a4;
        font-size: 7px;
        text-transform: uppercase;
      }
      .sx-card-meta strong {
        display: block;
        margin-top: 4px;
        font-size: 11px;
      }
      .sx-mail-layout {
        display: grid;
        grid-template-columns: 185px 300px minmax(340px, 1fr);
        height: 570px;
        border: 1px solid var(--sx-line);
        border-radius: 9px;
        background: #fff;
        overflow: hidden;
      }
      .sx-mail-folders,
      .sx-mail-list {
        min-width: 0;
        overflow: auto;
        border-right: 1px solid var(--sx-line);
      }
      .sx-mail-folders {
        padding: 12px;
        background: #fbfcfe;
      }
      .sx-mail-folders h5 {
        margin: 15px 0 7px;
        color: #64738a;
        font-size: 8px;
        text-transform: uppercase;
      }
      .sx-folder {
        display: flex;
        width: 100%;
        align-items: center;
        justify-content: space-between;
        padding: 8px;
        border: 0;
        border-radius: 6px;
        background: transparent;
        color: #27364d;
        font-size: 9px;
        font-weight: 700;
      }
      .sx-folder:hover,
      .sx-folder.active {
        background: #eaf2ff;
        color: #1f57c9;
      }
      .sx-mail-list-head {
        position: sticky;
        z-index: 1;
        top: 0;
        padding: 10px;
        border-bottom: 1px solid var(--sx-line);
        background: #fff;
      }
      .sx-mail-item {
        display: grid;
        width: 100%;
        grid-template-columns: 26px minmax(0, 1fr);
        gap: 8px;
        padding: 10px;
        border: 0;
        border-bottom: 1px solid #e8edf3;
        background: #fff;
        text-align: left;
      }
      .sx-mail-item:hover,
      .sx-mail-item.active {
        background: #edf4ff;
      }
      .sx-mail-avatar {
        display: grid;
        width: 26px;
        height: 26px;
        place-items: center;
        border-radius: 50%;
        background: #edf1f7;
        color: #607089;
        font-size: 9px;
        font-weight: 800;
      }
      .sx-mail-item strong,
      .sx-mail-item span,
      .sx-mail-item small {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .sx-mail-item strong {
        font-size: 9.5px;
      }
      .sx-mail-item span {
        margin-top: 2px;
        color: #59677c;
        font-size: 8px;
      }
      .sx-mail-item small {
        margin-top: 5px;
        color: #8190a4;
        font-size: 7.5px;
      }
      .sx-mail-detail {
        min-width: 0;
        overflow: auto;
        padding: 14px;
      }
      .sx-mail-body {
        margin-top: 12px;
        padding: 16px;
        border: 1px solid #e0e6ee;
        border-radius: 8px;
        background: #fff;
        color: #40506a;
        font-size: 9.5px;
        line-height: 1.65;
      }
      .sx-attachment {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        margin-top: 10px;
        padding: 9px 10px;
        border: 1px solid #cfdcf0;
        border-radius: 7px;
        background: #f8fbff;
      }
      .sx-compose {
        display: grid;
        gap: 8px;
        margin-top: 11px;
        padding: 12px;
        border: 1px solid #d9e2ed;
        border-radius: 8px;
        background: #f9fbfd;
      }
      .sx-thread-feature {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        margin: 0 0 10px;
        padding: 11px 13px;
        border: 1px solid #cfe0ff;
        border-radius: 9px;
        background: linear-gradient(135deg, #eef5ff, #f8fbff);
      }
      .sx-thread-feature strong {
        display: block;
        color: #174fae;
        font-size: 10px;
      }
      .sx-thread-feature span {
        display: block;
        margin-top: 3px;
        color: #52647e;
        font-size: 8px;
        line-height: 1.4;
      }
      .sx-thread-feature .sx-badge {
        flex: 0 0 auto;
      }
      .sx-thread-count {
        display: inline-flex !important;
        margin-left: 4px;
        padding: 2px 5px;
        border-radius: 999px;
        background: #dce9ff;
        color: #1c58c5 !important;
        font-size: 7px !important;
        font-weight: 800;
      }
      .sx-chat-thread {
        display: flex;
        flex-direction: column;
        gap: 10px;
        margin-top: 12px;
        padding: 13px;
        border: 1px solid #e0e6ee;
        border-radius: 10px;
        background: #f6f8fb;
      }
      .sx-chat-date {
        align-self: center;
        padding: 4px 8px;
        border-radius: 999px;
        background: #e7ebf1;
        color: #6a788e;
        font-size: 7px;
        font-weight: 750;
      }
      .sx-chat-message {
        max-width: 84%;
        padding: 10px 12px;
        border: 1px solid #dce3ec;
        border-radius: 12px 12px 12px 4px;
        background: #fff;
        box-shadow: 0 5px 14px rgba(35, 55, 84, 0.05);
      }
      .sx-chat-message.out {
        align-self: flex-end;
        border-color: #2d68dc;
        border-radius: 12px 12px 4px 12px;
        background: #2864e8;
        color: #fff;
      }
      .sx-chat-meta {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        margin-bottom: 6px;
        font-size: 7.5px;
      }
      .sx-chat-meta strong {
        font-size: 8.5px;
      }
      .sx-chat-meta span {
        color: #7b899d;
      }
      .sx-chat-message.out .sx-chat-meta span {
        color: rgba(255, 255, 255, 0.72);
      }
      .sx-chat-copy {
        font-size: 9px;
        line-height: 1.55;
        white-space: normal;
      }
      .sx-chat-file {
        display: flex;
        align-items: center;
        gap: 6px;
        margin-top: 8px;
        padding: 7px 8px;
        border: 1px solid #d7e1f1;
        border-radius: 7px;
        background: #f6f9ff;
        color: #2858a8;
        font-size: 8px;
        font-weight: 750;
      }
      .sx-chat-message.out .sx-chat-file {
        border-color: rgba(255, 255, 255, 0.3);
        background: rgba(255, 255, 255, 0.12);
        color: #fff;
      }
      .sx-calendar {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        border-top: 1px solid #e0e6ef;
        border-left: 1px solid #e0e6ef;
      }
      .sx-day {
        min-height: 82px;
        padding: 8px;
        border-right: 1px solid #e0e6ef;
        border-bottom: 1px solid #e0e6ef;
        background: #fff;
      }
      .sx-day > span {
        color: #708098;
        font-size: 8px;
        font-weight: 800;
      }
      .sx-day.today {
        background: #f1f6ff;
      }
      .sx-day.today > span {
        display: inline-grid;
        width: 20px;
        height: 20px;
        place-items: center;
        border-radius: 50%;
        background: var(--sx-blue);
        color: #fff;
      }
      .sx-day-event {
        display: block;
        margin-top: 5px;
        padding: 4px 5px;
        border-radius: 4px;
        background: #edf3ff;
        color: #2457bd;
        font-size: 7px;
        line-height: 1.25;
      }
      .sx-day-event.warehouse {
        background: #fff2e2;
        color: #9a5d0c;
      }
      .sx-day-event.done {
        background: #eaf9f0;
        color: #19794a;
        text-decoration: line-through;
      }
      .sx-carriers {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        margin-bottom: 14px;
        border: 1px solid var(--sx-line);
        border-radius: 8px;
        background: #fff;
        overflow: hidden;
      }
      .sx-carrier {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        padding: 12px;
        border-right: 1px solid var(--sx-line);
      }
      .sx-carrier:last-child {
        border-right: 0;
      }
      .sx-carrier strong {
        font-size: 10px;
      }
      .sx-carrier small {
        display: block;
        margin-top: 3px;
        color: #7e8b9e;
        font-size: 7.5px;
      }
      .sx-carrier-mark {
        display: grid;
        min-width: 50px;
        height: 26px;
        place-items: center;
        border-radius: 5px;
        background: #ffd600;
        color: #111;
        font-size: 10px;
        font-weight: 900;
      }
      .sx-carrier-mark.dpd {
        background: #fff0f0;
        color: #d12121;
      }
      .sx-carrier-mark.gls {
        background: #edf5ff;
        color: #1260ad;
      }
      .sx-progress {
        height: 7px;
        overflow: hidden;
        border-radius: 99px;
        background: #e8edf4;
      }
      .sx-progress b {
        display: block;
        height: 100%;
        border-radius: inherit;
        background: var(--sx-blue);
        transition: width 0.3s;
      }
      .sx-timeline {
        display: flex;
        flex-direction: column;
        gap: 8px;
      }
      .sx-timeline-row {
        display: grid;
        grid-template-columns: 10px minmax(0, 1fr) auto;
        gap: 8px;
      }
      .sx-timeline-row i {
        width: 8px;
        height: 8px;
        margin-top: 3px;
        border-radius: 50%;
        background: #8ea1bd;
      }
      .sx-timeline-row.done i {
        background: var(--sx-green);
      }
      .sx-timeline-row strong {
        display: block;
        font-size: 9px;
      }
      .sx-timeline-row span,
      .sx-timeline-row time {
        color: #7f8da1;
        font-size: 7.5px;
      }
      .sx-report-kpis {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        border: 1px solid var(--sx-line);
        border-radius: 8px;
        background: #fff;
        overflow: hidden;
      }
      .sx-report-kpis > div {
        padding: 13px;
        border-right: 1px solid var(--sx-line);
      }
      .sx-report-kpis > div:last-child {
        border-right: 0;
      }
      .sx-report-kpis span {
        display: block;
        color: #728198;
        font-size: 8px;
      }
      .sx-report-kpis strong {
        display: block;
        margin-top: 7px;
        font-size: 18px;
      }
      .sx-report-kpis small {
        display: block;
        margin-top: 4px;
        color: #8390a3;
        font-size: 7px;
      }
      .sx-report-kpis .focus {
        box-shadow: inset 3px 0 0 var(--sx-blue);
      }
      .sx-bars {
        display: flex;
        height: 170px;
        align-items: flex-end;
        gap: 10px;
        padding: 20px 15px 24px;
        border-left: 1px solid #e0e6ef;
        border-bottom: 1px solid #e0e6ef;
        background: repeating-linear-gradient(
          to top,
          transparent 0,
          transparent 39px,
          #edf1f6 40px
        );
      }
      .sx-bar {
        position: relative;
        flex: 1;
        min-width: 12px;
        border-radius: 4px 4px 0 0;
        background: linear-gradient(#6390f7, #2a64e8);
      }
      .sx-bar::after {
        content: attr(data-label);
        position: absolute;
        left: 50%;
        bottom: -17px;
        transform: translateX(-50%);
        color: #7c899b;
        font-size: 7px;
      }
      .sx-empty {
        display: grid;
        min-height: 240px;
        place-items: center;
        padding: 30px;
        text-align: center;
      }
      .sx-empty svg {
        width: 35px;
        height: 35px;
        color: #8190a5;
      }
      .sx-empty h4 {
        margin: 11px 0 5px;
        font-size: 13px;
      }
      .sx-empty p {
        max-width: 48ch;
        margin: 0;
        color: #77859a;
        font-size: 9px;
        line-height: 1.5;
      }
      .sx-search-results {
        position: absolute;
        z-index: 15;
        top: 55px;
        left: 90px;
        width: min(520px, calc(100% - 120px));
        max-height: 420px;
        overflow: auto;
        border: 1px solid #cfd9e7;
        border-radius: 9px;
        background: #fff;
        box-shadow: 0 18px 48px rgba(15, 30, 53, 0.2);
      }
      .sx-search-results-head {
        display: flex;
        justify-content: space-between;
        padding: 11px 13px;
        border-bottom: 1px solid #e3e8ef;
        color: #68768b;
        font-size: 9px;
      }
      .sx-search-result {
        display: flex;
        width: 100%;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        padding: 11px 13px;
        border: 0;
        border-bottom: 1px solid #e8edf3;
        background: #fff;
        text-align: left;
      }
      .sx-search-result:hover {
        background: #edf4ff;
      }
      .sx-search-result strong {
        display: block;
        font-size: 10px;
      }
      .sx-search-result small {
        display: block;
        margin-top: 3px;
        color: #79879a;
        font-size: 8px;
      }
      .sx-toast {
        position: absolute;
        z-index: 30;
        right: 18px;
        bottom: 18px;
        max-width: 360px;
        padding: 11px 14px;
        border-radius: 8px;
        background: #111c30;
        color: #fff;
        box-shadow: 0 16px 36px rgba(12, 25, 46, 0.28);
        font-size: 9.5px;
        line-height: 1.45;
        opacity: 0;
        transform: translateY(8px);
        pointer-events: none;
        transition: 0.2s;
      }
      .sx-toast.show {
        opacity: 1;
        transform: translateY(0);
      }
      .sx-actions {
        display: flex;
        align-items: center;
        gap: 7px;
        flex-wrap: wrap;
        margin-top: 11px;
      }
      .sx-muted {
        color: var(--sx-muted);
        font-size: 9px;
      }
      .sx-spacer {
        height: 12px;
      }
      .sx-link {
        padding: 0;
        border: 0;
        background: transparent;
        color: var(--sx-blue);
        font-size: 9px;
        font-weight: 750;
        text-decoration: none;
      }
      .sx-link:hover {
        text-decoration: underline;
      }
      .sx-number {
        font-variant-numeric: tabular-nums;
      }
      .sx-right {
        text-align: right;
      }
      .sx-hidden {
        display: none !important;
      }
      @media (max-width: 1100px) {
        #hubDemoApp {
          grid-template-columns: 64px minmax(0, 1fr);
        }
        .sx-metrics.six {
          grid-template-columns: repeat(3, 1fr);
        }
        .sx-mail-layout {
          grid-template-columns: 160px 260px minmax(320px, 1fr);
        }
        .sx-report-kpis {
          grid-template-columns: repeat(3, 1fr);
        }
        .sx-report-kpis > div:nth-child(3) {
          border-right: 0;
        }
        .sx-report-kpis > div:nth-child(n + 4) {
          border-top: 1px solid var(--sx-line);
        }
      }
      @media (max-width: 820px) {
        #hubDemoApp {
          display: flex;
          height: 900px;
          min-height: 720px;
          flex-direction: column;
          border-radius: 15px;
          font-size: 14px;
        }
        .sx-rail {
          display: grid;
          width: 100%;
          height: 104px;
          min-height: 104px;
          grid-template-rows: 49px 55px;
          align-items: stretch;
          padding: 0;
          background: #111b2e;
        }
        .sx-brand {
          display: flex;
          width: 154px;
          height: 49px;
          align-items: center;
          justify-content: flex-start;
          gap: 8px;
          margin: 0;
          padding: 0 14px;
          border-radius: 0;
          background: transparent;
          box-shadow: none;
        }
        .sx-brand svg {
          display: none;
        }
        .sx-brand::after {
          content: "FIRMOWY HUB";
          color: #fff;
          font-size: 22px;
          font-weight: 900;
          letter-spacing: -0.04em;
        }
        .sx-nav {
          grid-row: 2;
          flex-direction: row;
          gap: 0;
          overflow-x: auto;
          overflow-y: hidden;
          padding: 0 7px;
          scrollbar-width: none;
        }
        .sx-nav::-webkit-scrollbar {
          display: none;
        }
        .sx-nav-sep {
          width: 2px;
          height: auto;
          flex-basis: 2px;
        }
        .sx-nav-btn {
          display: flex;
          width: auto;
          min-width: max-content;
          height: 48px;
          min-height: 48px;
          flex: 0 0 auto;
          gap: 7px;
          padding: 0 12px;
          border-radius: 6px;
          color: #bdc7d6;
        }
        .sx-nav-btn svg {
          width: 15px;
          height: 15px;
        }
        .sx-nav-label {
          display: block;
          font-size: 10px;
          font-weight: 800;
          white-space: nowrap;
        }
        .sx-nav-btn.active {
          background: #203452;
          box-shadow: inset 0 -3px 0 #5b9aff;
          color: #fff;
        }
        .sx-nav-btn::after {
          display: none;
        }
        .sx-nav-btn .sx-nav-count {
          position: static;
          display: grid;
          min-width: 20px;
          height: 20px;
          place-items: center;
          padding: 0 5px;
          border: 0;
          background: #3b4a61;
          font-size: 9px;
          line-height: 20px;
        }
        .sx-workspace {
          flex: 1;
          min-height: 0;
        }
        .sx-topbar {
          height: 64px;
          min-height: 64px;
          padding: 0 13px;
        }
        .sx-global-search {
          width: min(440px, calc(100% - 48px));
        }
        .sx-global-search input {
          height: 40px;
          border-radius: 7px;
          font-size: 12px;
        }
        .sx-top-meta {
          gap: 5px;
        }
        .sx-demo-pill {
          display: none;
        }
        .sx-top-meta .sx-btn {
          width: 40px;
          min-width: 40px;
          height: 40px;
          padding: 0;
          font-size: 16px;
        }
        .sx-top-meta .sx-btn span {
          display: none;
        }
        .sx-stage {
          padding: 23px 14px 32px;
        }
        .sx-page-head {
          width: 100%;
          min-width: 0;
          max-width: 100%;
          align-items: flex-start;
          flex-direction: column;
          margin-bottom: 18px;
        }
        .sx-page-head .sx-kicker {
          font-size: 10px;
        }
        .sx-page-head h3 {
          font-size: 25px;
        }
        .sx-page-head p {
          font-size: 12px;
        }
        .sx-head-actions {
          width: 100%;
          min-width: 0;
          max-width: 100%;
          justify-content: flex-start;
        }
        .sx-head-actions > .sx-tabs {
          width: 100%;
          max-width: 100%;
        }
        .sx-head-actions > .sx-btn {
          flex: 1;
          min-height: 39px;
        }
        .sx-btn {
          min-height: 39px;
          padding: 9px 12px;
          font-size: 11px;
        }
        .sx-metrics,
        .sx-metrics.six {
          grid-template-columns: repeat(2, minmax(0, 1fr));
          gap: 9px;
        }
        .sx-metric {
          min-height: 104px;
          padding: 15px 11px 13px 50px;
          border-radius: 12px;
        }
        .sx-metric-icon {
          left: 11px;
          top: 15px;
          width: 29px;
          height: 29px;
        }
        .sx-metric span {
          font-size: 9px;
        }
        .sx-metric strong {
          margin-top: 6px;
          font-size: 23px;
        }
        .sx-metric small {
          font-size: 8.5px;
        }
        .sx-panel,
        .sx-split-work,
        .sx-mail-layout {
          border-radius: 12px;
        }
        .sx-panel-head {
          min-height: 56px;
          padding: 13px 15px;
        }
        .sx-panel-head h4,
        .sx-panel-head strong {
          font-size: 14px;
        }
        .sx-panel-body {
          padding: 15px;
        }
        .sx-stage .sx-grid,
        .sx-stage .sx-grid.equal,
        .sx-stage .sx-grid.three {
          grid-template-columns: minmax(0, 1fr) !important;
        }
        .sx-list-row {
          min-height: 58px;
          padding: 12px;
        }
        .sx-row-main strong {
          font-size: 11px;
        }
        .sx-row-main small {
          font-size: 9.5px;
        }
        .sx-split-work {
          grid-template-columns: 220px minmax(0, 1fr);
        }
        .sx-mail-layout {
          grid-template-columns: 210px minmax(360px, 1fr);
        }
        .sx-mail-folders {
          display: none;
        }
        .sx-card-board {
          grid-template-columns: 1fr;
        }
        .sx-flow {
          grid-template-columns: repeat(3, 1fr);
        }
        .sx-report-kpis {
          grid-template-columns: repeat(2, 1fr);
        }
        .sx-report-kpis > div {
          border-top: 0 !important;
          border-right: 1px solid var(--sx-line) !important;
          border-bottom: 1px solid var(--sx-line);
        }
        .sx-report-kpis > div:nth-child(2n) {
          border-right: 0 !important;
        }
        .sx-search-results {
          top: 154px;
          left: 12px;
          width: calc(100% - 24px);
        }
      }
      @media (max-width: 560px) {
        #hubDemoApp {
          height: 820px;
          border-radius: 12px;
        }
        .sx-stage {
          padding: 20px 9px 28px;
        }
        .sx-page-head h3 {
          font-size: 23px;
        }
        .sx-page-head p {
          max-width: 38ch;
        }
        .sx-head-actions {
          display: grid;
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }
        .sx-head-actions > .sx-btn {
          width: 100%;
          white-space: normal;
        }
        .sx-head-actions > .sx-btn:last-child:nth-child(odd) {
          grid-column: 1/-1;
        }
        .sx-head-actions > .sx-tabs {
          grid-column: 1/-1;
        }
        .sx-metrics,
        .sx-metrics.six {
          grid-template-columns: 1fr 1fr;
        }
        .sx-metric {
          min-width: 0;
          min-height: 112px;
          padding: 14px 9px 12px;
        }
        .sx-metric-icon {
          position: static;
          width: 32px;
          height: 32px;
          margin-bottom: 11px;
        }
        .sx-metric span {
          white-space: normal;
          line-height: 1.2;
        }
        .sx-metric strong {
          max-width: 100%;
          overflow-wrap: anywhere;
          font-size: 24px;
        }
        .sx-metric small {
          white-space: normal;
          line-height: 1.25;
        }
        .sx-split-work {
          display: block;
          min-height: 0;
        }
        .sx-split-list {
          max-height: 245px;
          border-right: 0;
          border-bottom: 1px solid var(--sx-line);
        }
        .sx-form.two,
        .sx-form.three {
          grid-template-columns: 1fr;
        }
        .sx-input,
        .sx-select,
        .sx-textarea {
          min-height: 42px;
          font-size: 12px;
        }
        .sx-mail-layout {
          display: block;
          height: auto;
        }
        .sx-mail-list {
          height: 265px;
          border-right: 0;
          border-bottom: 1px solid var(--sx-line);
        }
        .sx-mail-detail {
          height: 460px;
          padding: 12px;
        }
        .sx-mail-item {
          min-height: 66px;
        }
        .sx-flow {
          grid-template-columns: 1fr 1fr;
        }
        .sx-flow-step {
          min-height: 88px;
        }
        .sx-carriers {
          grid-template-columns: 1fr;
        }
        .sx-carrier {
          border-right: 0;
          border-bottom: 1px solid var(--sx-line);
        }
        .sx-carrier:last-child {
          border-bottom: 0;
        }
        .sx-calendar {
          min-width: 560px;
        }
        .sx-panel.calendar-panel {
          overflow: auto;
        }
        .sx-report-kpis {
          grid-template-columns: 1fr 1fr;
        }
        .sx-report-kpis > div {
          border-right: 1px solid var(--sx-line) !important;
        }
        .sx-report-kpis > div:nth-child(2n) {
          border-right: 0 !important;
        }
        .sx-card-meta {
          grid-template-columns: repeat(3, 1fr);
        }
        .sx-card-meta div {
          padding: 7px;
          border-right: 1px solid #e1e7ef;
        }
        .sx-table {
          min-width: 580px;
        }
        .sx-toast {
          left: 10px;
          right: 10px;
          bottom: 10px;
          max-width: none;
          font-size: 11px;
        }
      }
      @media (max-width: 820px) {
        .hub-demo-entry {
          padding-top: 96px;
        }
        .hub-demo-entry-head {
          grid-template-columns: 1fr;
          gap: 15px;
        }
        .hub-demo-entry-head h1 {
          max-width: none;
        }
        #page-case-hub .hub-case-hero {
          padding-top: 52px;
        }
        .sx-thread-feature {
          align-items: flex-start;
        }
        .sx-chat-message {
          max-width: 92%;
        }
      }
      @media (max-width: 560px) {
        .hub-demo-entry-head h1 {
          max-width: none;
        }
        .hub-demo-entry-steps {
          grid-template-columns: 1fr;
        }
        .sx-brand {
          width: 190px;
        }
        .sx-brand::after {
          font-size: 18px;
          white-space: nowrap;
        }
      }

      /* Czytelniejsza typografia demo: interfejs pozostaje zwarty, ale tekst nie jest miniaturowy. */
      #hubDemoApp {
        font-size: 15px;
      }
      .sx-nav-btn .sx-nav-count {
        font-size: 10px;
      }
      .sx-nav-btn::after {
        font-size: 12px;
      }
      .sx-global-search input {
        font-size: 13px;
      }
      .sx-demo-pill {
        font-size: 11px;
      }
      .sx-page-head .sx-kicker {
        font-size: 11px;
      }
      .sx-page-head h3 {
        font-size: 26px;
      }
      .sx-page-head p {
        font-size: 13px;
      }
      .sx-btn {
        min-height: 29px;
        gap: 5px;
        padding: 5px 8px;
        font-size: 10px;
      }
      .sx-btn svg {
        width: 12px;
        height: 12px;
      }
      .sx-tab {
        font-size: 12px;
      }
      .sx-tab span {
        font-size: 10px;
      }
      .sx-metric span {
        font-size: 11px;
      }
      .sx-metric strong {
        font-size: 22px;
      }
      .sx-metric small {
        font-size: 10px;
      }
      .sx-panel-head h4,
      .sx-panel-head strong {
        font-size: 15px;
      }
      .sx-panel-head p {
        font-size: 11px;
      }
      .sx-badge {
        font-size: 10px;
      }
      .sx-row-main strong {
        font-size: 12px;
      }
      .sx-row-main small {
        font-size: 10.5px;
      }
      .sx-row-end {
        font-size: 10px;
      }
      .sx-field > span,
      .sx-field > label {
        font-size: 10px;
      }
      .sx-input,
      .sx-select,
      .sx-textarea {
        min-height: 40px;
        font-size: 13px;
      }
      .sx-check {
        font-size: 11px;
      }
      .sx-file-drop strong {
        font-size: 13px;
      }
      .sx-file-drop small {
        font-size: 10px;
      }
      .sx-table th {
        font-size: 10px;
      }
      .sx-table td {
        font-size: 12px;
      }
      .sx-table small {
        font-size: 10px;
      }
      .sx-detail-head h4 {
        font-size: 17px;
      }
      .sx-detail-head p {
        font-size: 11px;
      }
      .sx-callout {
        font-size: 11px;
      }
      .sx-summary-item span {
        font-size: 11px;
      }
      .sx-summary-item strong {
        font-size: 13px;
      }
      .sx-flow-step span {
        font-size: 10px;
      }
      .sx-flow-step strong {
        font-size: 18px;
      }
      .sx-card h5 {
        font-size: 14px;
      }
      .sx-card p {
        font-size: 11px;
      }
      .sx-card-meta small {
        font-size: 10px;
      }
      .sx-card-meta strong {
        font-size: 12px;
      }
      .sx-mail-folders h5 {
        font-size: 10px;
      }
      .sx-folder {
        font-size: 11.5px;
      }
      .sx-mail-avatar {
        font-size: 10px;
      }
      .sx-mail-item .sx-mail-avatar {
        display: grid;
        place-items: center;
        margin-top: 0;
        overflow: visible;
        color: #607089;
        font-size: 10px;
        font-weight: 800;
        line-height: 1;
        text-overflow: clip;
        white-space: normal;
      }
      .sx-mail-detail > .sx-actions [data-hub-action="mail-handled"] {
        order: 1;
      }
      .sx-mail-detail > .sx-actions [data-hub-action="mail-order"] {
        order: 2;
      }
      .sx-mail-item strong {
        font-size: 12px;
      }
      .sx-mail-item span {
        font-size: 10.5px;
      }
      .sx-mail-item small {
        font-size: 10px;
      }
      .sx-mail-body {
        font-size: 12px;
      }
      .sx-thread-feature strong {
        font-size: 12px;
      }
      .sx-thread-feature span {
        font-size: 10px;
      }
      .sx-thread-count {
        font-size: 10px !important;
      }
      .sx-chat-date {
        font-size: 10px;
      }
      .sx-chat-meta {
        font-size: 10px;
      }
      .sx-chat-meta strong {
        font-size: 11px;
      }
      .sx-chat-copy {
        font-size: 11.5px;
      }
      .sx-chat-file {
        font-size: 10px;
      }
      .sx-day > span {
        font-size: 10px;
      }
      .sx-day-event {
        font-size: 10px;
      }
      .sx-carrier strong {
        font-size: 12px;
      }
      .sx-carrier small {
        font-size: 10px;
      }
      .sx-carrier-mark {
        font-size: 11px;
      }
      .sx-timeline-row strong {
        font-size: 11px;
      }
      .sx-timeline-row span,
      .sx-timeline-row time {
        font-size: 10px;
      }
      .sx-report-kpis span {
        font-size: 10px;
      }
      .sx-report-kpis strong {
        font-size: 20px;
      }
      .sx-report-kpis small {
        font-size: 10px;
      }
      .sx-bar::after {
        font-size: 10px;
      }
      .sx-empty h4 {
        font-size: 15px;
      }
      .sx-empty p {
        font-size: 11px;
      }
      .sx-search-results-head {
        font-size: 11px;
      }
      .sx-search-result strong {
        font-size: 12px;
      }
      .sx-search-result small {
        font-size: 10px;
      }
      .sx-toast {
        font-size: 12px;
      }
      .sx-muted {
        font-size: 11px;
      }
      .sx-link {
        font-size: 11px;
      }
      @media (max-width: 820px) {
        .sx-btn {
          min-height: 34px;
          padding: 7px 10px;
          font-size: 11px;
        }
        .sx-nav-label {
          font-size: 12px;
        }
        .sx-nav-btn .sx-nav-count {
          font-size: 10px;
        }
        .sx-global-search input {
          font-size: 13px;
        }
        .sx-page-head p {
          font-size: 13px;
        }
      }

      /* Samouczek i zwarty import w Zamówieniach klientów. */
      .sx-file-drop > svg {
        width: 30px;
        height: 30px;
        flex: 0 0 30px;
        color: var(--sx-blue);
      }
      .sx-file-drop-compact {
        position: relative;
        display: flex;
        min-height: 58px;
        align-items: center;
        justify-content: flex-start;
        gap: 11px;
        padding: 10px 12px;
        cursor: pointer;
        text-align: left;
      }
      .sx-file-drop-compact:hover {
        border-color: #739aee;
        background: #f1f6ff;
      }
      .sx-file-drop-compact .sx-file-input {
        position: absolute;
        width: 1px;
        height: 1px;
        opacity: 0;
        pointer-events: none;
      }
      .sx-file-drop-compact strong,
      .sx-file-drop-compact small {
        display: block;
      }
      .sx-file-drop-compact small {
        margin-top: 3px;
      }
      .sx-guide {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        gap: 13px;
        align-items: center;
        margin: 0 0 14px;
        padding: 14px 15px;
        border: 1px solid #b9cffb;
        border-radius: 10px;
        background: linear-gradient(135deg, #edf4ff, #f8fbff);
        color: #203c72;
      }
      .sx-guide.success {
        border-color: #acdcbc;
        background: linear-gradient(135deg, #ecfaf1, #f8fcf9);
        color: #1d6741;
      }
      .sx-guide.warning {
        border-color: #efd39a;
        background: linear-gradient(135deg, #fff7e6, #fffcf6);
        color: #765113;
      }
      .sx-guide-step {
        display: grid;
        min-width: 58px;
        height: 38px;
        place-items: center;
        padding: 0 9px;
        border-radius: 8px;
        background: #2864e8;
        color: #fff;
        font-size: 10px;
        font-weight: 850;
        letter-spacing: 0.04em;
      }
      .sx-guide.success .sx-guide-step {
        background: #178a50;
      }
      .sx-guide.warning .sx-guide-step {
        background: #c47a18;
      }
      .sx-guide-copy strong {
        display: block;
        font-size: 13px;
        line-height: 1.3;
      }
      .sx-guide-copy p {
        margin: 4px 0 0;
        font-size: 11px;
        line-height: 1.5;
        color: inherit;
      }
      .sx-guide .sx-btn {
        justify-self: end;
      }
      .sx-customer-work {
        min-height: 500px;
      }
      .sx-customer-work .sx-split-list-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        padding: 14px 12px;
      }
      .sx-customer-tools {
        margin-top: 14px;
      }
      .sx-customer-tools .sx-panel-head p {
        max-width: 52ch;
      }
      .sx-nav-btn.guide-target {
        background: #314c28;
        color: #dffb70;
        box-shadow: inset 0 0 0 2px #b7db49;
        animation: sxGuidePulse 1.35s ease-in-out infinite;
      }
      .sx-nav-btn.guide-target.active {
        background: #36562b;
      }
      @keyframes sxGuidePulse {
        50% {
          box-shadow:
            inset 0 0 0 2px #dffb70,
            0 0 0 4px rgba(183, 219, 73, 0.18);
        }
      }
      @media (max-width: 560px) {
        .sx-guide {
          grid-template-columns: auto minmax(0, 1fr);
          align-items: start;
        }
        .sx-guide .sx-btn {
          grid-column: 1/-1;
          width: 100%;
          justify-self: stretch;
        }
        .sx-customer-work {
          min-height: 0;
        }
        .sx-customer-work .sx-split-list {
          max-height: none;
          overflow: visible;
        }
        .sx-file-drop-compact {
          min-height: 64px;
        }
      }

      /* Nazwa wybranego modułu pod galerią zawsze pozostaje w jednym wierszu. */
      .hub-module-name {
        white-space: nowrap;
      }
      @media (min-width: 761px) {
        .hub-module-info,
        .hub-case-browser .hub-module-info {
          grid-template-columns: max-content minmax(0, 1fr);
        }
      }

      /* Strona główna — dopracowany, zwarty układ telefonu. */
      .ed-hero-desc-mobile {
        display: none;
      }
      .hub-copy-mobile,
      .ed-cta-copy-mobile {
        display: none;
      }

      @media (max-width: 760px) {
        #page-home .ed-hero {
          padding-top: 104px;
          padding-bottom: 34px;
        }
        #page-home .ed-hero-main {
          gap: 24px;
        }
        #page-home .ed-hero-title {
          margin-bottom: 18px;
        }
        #page-home .ed-hero-title h1 {
          font-size: clamp(48px, 13.2vw, 56px);
          line-height: 0.96;
          letter-spacing: -0.05em;
          max-width: none;
        }
        #page-home .ed-hero-bottom {
          gap: 18px;
          padding-top: 22px;
        }
        #page-home .ed-hero-desc {
          max-width: 34ch;
          font-size: 16px;
          line-height: 1.48;
        }
        #page-home .ed-hero-desc-desktop {
          display: none;
        }
        #page-home .ed-hero-desc-mobile {
          display: inline;
        }
        #page-home .ed-hero-specs > span:nth-child(n + 3) {
          display: none;
        }
        #page-home .ed-hero-specs {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        /* Cztery liczby tworzą jedną planszę 2 × 2 zamiast długiego stosu. */
        #page-home .ed-stats {
          grid-template-columns: repeat(2, minmax(0, 1fr));
          margin: 0;
          border: 1px solid var(--border);
          border-radius: 18px;
          overflow: hidden;
        }
        #page-home #homeProof {
          padding-bottom: 24px;
        }
        #page-home .ed-stat:nth-child(n) {
          min-width: 0;
          min-height: 150px;
          padding: 22px 16px 18px;
          border: 0;
          border-left: 1px solid var(--border);
          border-top: 1px solid var(--border);
          justify-content: space-between;
          gap: 16px;
        }
        #page-home .ed-stat:nth-child(odd) {
          border-left: 0;
        }
        #page-home .ed-stat:nth-child(-n + 2) {
          border-top: 0;
        }
        #page-home .ed-stat-big {
          font-size: clamp(38px, 11vw, 48px);
          line-height: 0.9;
          white-space: nowrap;
        }
        #page-home .ed-stat-name {
          max-width: 18ch;
          margin-top: 0;
          font-size: 9px;
          line-height: 1.45;
          letter-spacing: 0.07em;
        }

        /* Pasek ma być subtelnym separatorem, nie kolejnym nagłówkiem. */
        #page-home .ed-marquee {
          padding: 7px 0;
        }
        #page-home .ed-marquee-track {
          gap: 22px;
        }
        #page-home .ed-marquee-track span {
          gap: 16px;
          font-size: clamp(16px, 4.8vw, 19px);
        }
        #page-home .ed-marquee-track span::after {
          margin-left: 4px;
        }

        /* Nagłówki sekcji korzystają z całej szerokości ekranu. */
        #page-home .ed-sec-head {
          grid-template-columns: minmax(0, 1fr) auto;
          gap: 14px 16px;
        }
        #page-home .ed-sec-head-title,
        #page-home .ed-sec-head-desc {
          grid-column: 1 / -1;
          width: 100%;
          max-width: none;
        }
        #page-home .ed-sec-head-title h2 {
          width: 100%;
          max-width: none;
          font-size: clamp(38px, 10.5vw, 46px);
          text-wrap: pretty;
        }
        #page-home .ed-sec-head-desc {
          font-size: 15px;
          line-height: 1.5;
        }

        /* Na telefonie aktywny etap wskazuje wyłącznie numer przy treści. */
        #page-home .ed-proc-v {
          grid-template-columns: 1fr;
          gap: 0;
        }
        #page-home .ed-proc-rail {
          display: none;
        }
        #page-home .ed-proc-step {
          grid-template-columns: 48px minmax(0, 1fr);
          gap: 14px;
        }

        /* Mobilny HUB: krótki opis produktu bez długiego dema interfejsu. */
        #page-home .hub-home-integrated {
          padding-top: 12px;
        }
        #page-home .hub-home-integrated .hub-home-grid {
          gap: 0;
          padding: 24px 18px;
        }
        #page-home .hub-home-integrated .hub-copy h2 {
          margin-bottom: 14px;
          font-size: clamp(34px, 9.5vw, 40px);
          line-height: 0.98;
        }
        #page-home .hub-home-integrated .hub-copy > p {
          margin-bottom: 16px;
          font-size: 14px;
          line-height: 1.5;
        }
        #page-home .hub-copy-desktop {
          display: none;
        }
        #page-home .hub-copy-mobile {
          display: inline;
        }
        #page-home .hub-home-integrated .hub-offer-facts {
          grid-template-columns: repeat(3, minmax(0, 1fr));
          margin-bottom: 16px;
        }
        #page-home .hub-home-integrated .hub-offer-facts > span,
        #page-home .hub-home-integrated .hub-offer-facts > span + span {
          padding: 10px 8px;
          border-top: 0;
          border-right: 1px solid rgba(242, 239, 230, 0.14);
        }
        #page-home .hub-home-integrated .hub-offer-facts > span:first-child {
          padding-left: 0;
        }
        #page-home .hub-home-integrated .hub-offer-facts > span:last-child {
          padding-right: 0;
          border-right: 0;
        }
        #page-home .hub-home-integrated .hub-offer-facts strong {
          font-size: 13px;
          line-height: 1.2;
        }
        #page-home .hub-home-integrated .hub-demo,
        #page-home .hub-home-integrated .hub-actions .ed-btn:nth-child(2) {
          display: none;
        }
        #page-home .hub-home-integrated .hub-actions .ed-btn {
          min-height: 48px;
          padding: 10px 14px 10px 18px;
          font-size: 12px;
        }

        /* Końcowe CTA jest niskim, lewostronnym panelem zamiast plakatu. */
        #page-home .ed-cta {
          margin: 0;
          padding: 32px 0;
          border-radius: 18px;
        }
        #page-home .ed-cta::before {
          display: none;
        }
        #page-home .ed-cta-inner {
          max-width: 100%;
          padding: 0 20px;
          text-align: left;
        }
        #page-home .ed-cta-label {
          display: none;
        }
        #page-home .ed-cta h2 {
          width: 100%;
          max-width: none;
          margin: 0 0 14px;
          font-size: clamp(30px, 8.4vw, 34px);
          line-height: 1.03;
          letter-spacing: -0.035em;
          text-align: left;
          text-wrap: pretty;
        }
        #page-home .ed-cta p {
          max-width: 32ch;
          margin: 0 0 20px;
          font-size: 14px;
          line-height: 1.45;
          text-align: left;
        }
        #page-home .ed-cta-copy-desktop {
          display: none;
        }
        #page-home .ed-cta-copy-mobile {
          display: inline;
        }
        #page-home .ed-cta-actions {
          justify-content: flex-start;
          margin-bottom: 0;
        }
        #page-home .ed-cta-actions .ed-btn {
          width: 100%;
          min-height: 48px;
          padding: 10px 14px 10px 18px;
          font-size: 12px;
          justify-content: space-between;
        }
        #page-home .ed-cta-actions .ed-btn:nth-child(2) {
          display: none;
        }
      }