:root{--font-display:'Plus Jakarta Sans',system-ui,sans-serif;--font-body:'Instrument Sans',system-ui,sans-serif}

    .border-t{border-top-width:1px;border-top-style:solid}
    .my-1{margin-top:.25rem;margin-bottom:.25rem}
    .max-w-5xl{max-width:64rem}
    .pl-4{padding-left:1rem}
    .pr-2\.5{padding-right:.625rem}
    .pt-8{padding-top:2rem}
    .px-4{padding-left:1rem;padding-right:1rem}
    .rounded-\[18px\]{border-radius:18px}
    .text-\[13\.5px\]{font-size: 14.5px}

    /* ─── NAV (z index.html) ─── */
    .nav-bar {
      background: rgba(15,25,21,.68);
      border: 1px solid rgba(255,255,255,.11);
      backdrop-filter: blur(18px) saturate(1.25);
      -webkit-backdrop-filter: blur(18px) saturate(1.25);
      box-shadow: 0 8px 24px rgba(0,0,0,.24), 0 1px 0 rgba(255,255,255,.06) inset;
      border-radius: 34px !important;
      transition: background .35s ease, border-color .35s ease, box-shadow .35s ease, max-width .35s cubic-bezier(.22,1,.36,1);
    }
    .nav-bar .nav-link { color: rgba(255,255,255,.66); }
    .nav-bar .nav-link:hover { color: #fff; background: rgba(255,255,255,.07); }
    .nav-bar .nav-link.is-active { color: #fff; }
    .nav-bar .nav-brand-txt, .nav-bar .nav-brand-txt span { color: #fff !important; }
    .nav-pill { border-color: rgba(74,222,128,.26); }

    header.compact .nav-bar {
      background: rgba(15,25,21,.68);
      border-color: rgba(255,255,255,.12);
      box-shadow: 0 8px 24px rgba(0,0,0,.18), 0 1px 0 rgba(255,255,255,.06) inset;
    }
    .nav-link { position: relative; z-index: 1; }
    .nav-link.is-active { color: #14120E; font-weight: 600; }

    .nav-links { position: relative; }
    .nav-pill {
      position: absolute; top: 0; left: 0; height: 100%;
      border-radius: 999px;
      background: rgba(22,163,74,.10);
      border: 1px solid rgba(22,163,74,.16);
      transform: translateX(var(--x, 0)); width: var(--w, 0);
      opacity: 0; pointer-events: none;
      transition: transform .42s cubic-bezier(.22,1,.36,1), width .42s cubic-bezier(.22,1,.36,1), opacity .3s;
    }
    .nav-pill.on { opacity: 1; }

    header {
      position: fixed !important;
      top: 0; left: 0; right: 0;
      transition: padding .35s cubic-bezier(.22,1,.36,1);
    }
    header.compact { padding-top: 18px; }
    header.compact .nav-bar { max-width: 50rem; }
    .nav-brand-txt { display: inline-block; white-space: nowrap; margin-left: 2px; }
    .nav-live {
      display: inline-flex; align-items: center; gap: 6px;
      font-size: 14px; font-weight: 600; letter-spacing: .04em;
      color: #15803D; background: rgba(22,163,74,.09);
      border: 1px solid rgba(22,163,74,.16);
      padding: 5px 11px; border-radius: 999px;
    }
    .nav-live i {
      width: 6px; height: 6px; border-radius: 50%; background: #16A34A;
    }
    .nav-link {
      color: #6B7280;
      border-radius: 10px;
      transition: color 180ms ease, background 180ms ease;
    }
    .nav-link:hover { color: #111827; background: rgba(17,24,39,0.04); }
    #mobile-menu { display: none; }
    #mobile-menu.open { display: block; }
    .btn-glow {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      padding: 7px 7px 7px 20px;
      background: #111827;
      transition: all 240ms ease;
      color: #FFFFFF !important;
      box-shadow: 0 2px 12px rgba(17,24,39,0.06);
      font-family: var(--font-body);
      font-size: 15px;
      font-weight: 500;
      border: 1px solid rgba(255,255,255,0.1);
      cursor: pointer;
      border-radius: 14px;
      white-space: nowrap;
    }
    .btn-glow:hover {
      background: #1F2937;
      transform: translateY(-1px);
      box-shadow: 0 6px 20px rgba(17,24,39,0.15);
    }
    .btn-glow-icon {
      width: 36px; height: 36px; border-radius: 10px;
      background: rgba(255,255,255,0.15);
      display: inline-flex; align-items: center; justify-content: center;
      flex-shrink: 0;
    }

    /* ─── TOKENS ─── */
    :root {
      --g: #16a34a;
      --g-d: #15803D;
      --g-l: #f0faf4;
      --g-m: rgba(22,163,74,.12);
      --ink: #0d1117;
      --ink-2: #374151;
      --muted: #6b7280;
      --line: rgba(13,17,23,.08);
      --bg: #ffffff;
      --bg-2: #f8fafb;
      --bg-3: #f2f6f3;
      --r: 16px;
    }

    /* ─── RESET ─── */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; border-width: 0; border-style: solid; }
    html { scroll-behavior: smooth; font-size: 17px; }

    body {
      font-family: var(--font-body);
      color: #111827;
      background: #ECECEA;
      min-width: 320px;
      overflow-x: clip;
      scrollbar-color: rgba(17,24,39,0.2) transparent;
      scrollbar-width: thin;
    }
    body::-webkit-scrollbar { width: 6px; }
    body::-webkit-scrollbar-track { background: transparent; }
    body::-webkit-scrollbar-thumb { background: rgba(17,24,39,0.2); border-radius: 99px; }

    .mesh-bg {
      position: fixed; inset: 0; pointer-events: none; z-index: 0; background:linear-gradient(180deg,#fff 0%,#f8faf8 50%,#f4f7f4 100%);
    }

    .grid-overlay {
      position: fixed; inset: 0; pointer-events: none; z-index: 0;
      background: linear-gradient(180deg, rgba(17,24,39,0.018), transparent 260px);
    }

    .page-wrap { position: relative; z-index: 1; }

    a { color: inherit; text-decoration: none; }
    img { display: block; max-width: 100%; }

    h1,h2,h3,h4 { letter-spacing: -0.025em; line-height: 1.1; font-family:var(--font-display); font-weight:700; }

    /* ─── UTILS ─── */
    .wrap { width: min(100% - 48px, 1160px); margin-inline: auto; }

    .tag {
      display: inline-flex; align-items: center; gap: 7px;
      padding: 6px 16px; border-radius: 999px;
      border: 1px solid rgba(17,24,39,.10);
      background: rgba(17,24,39,.04);
      color: #6B7280 !important; font-size: 14px; font-weight: 600;
      letter-spacing: .06em; text-transform: uppercase;
      width: fit-content;
    }

    .tag::before {
      content: ''; width: 6px; height: 6px; border-radius: 999px;
      background: #16A34A;
      box-shadow: 0 0 0 3px rgba(22,163,74,.15);
    }
    .tag-icon::before { display: none; }

    /* Primary CTA — white pill (identical to index.html btn-glow-hero) */
    .btn-hero {
      display: inline-flex;
      align-items: center;
      padding: 7px 7px 7px 20px;
      border-radius: 14px;
      background: #FFFFFF;
      gap: 12px;
      color: #111827 !important;
      font-family: var(--font-body);
      font-size: 16px;
      font-weight: 500;
      letter-spacing: -0.01em;
      border: 1px solid rgba(17,24,39,0.10);
      cursor: pointer;
      transition: all 240ms ease;
      white-space: nowrap;
      box-shadow: 0 2px 12px rgba(17,24,39,0.06);
    }
    .btn-hero:hover {
      border-color: rgba(17,24,39,0.18);
      box-shadow: 0 6px 20px rgba(17,24,39,0.10);
      transform: translateY(-1px);
    }
    .btn-hero-icon {
      width: 36px; height: 36px; border-radius: 10px;
      background: #111827;
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
    }

    /* Secondary CTA — ghost outline */
    .btn-ghost {
      display: inline-flex;
      align-items: center;
      padding: 7px 7px 7px 20px;
      border-radius: 14px;
      background: transparent;
      gap: 12px;
      color: #374151 !important;
      font-family: var(--font-body);
      font-size: 15px;
      font-weight: 500;
      letter-spacing: -0.01em;
      border: 1px solid rgba(17,24,39,0.14);
      cursor: pointer;
      transition: all 240ms ease;
      white-space: nowrap;
    }
    .btn-ghost:hover {
      border-color: rgba(17,24,39,0.28);
      transform: translateY(-1px);
    }
    .btn-ghost-icon {
      width: 36px; height: 36px; border-radius: 10px;
      background: rgba(17,24,39,0.06);
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
    }

    /* ─── HERO ─── */
    .hero {
      position: relative;
      overflow: hidden;
      margin: 0;
      border-radius: 0;
      isolation: isolate;
      box-shadow: inset 0 -1px 0 rgba(74,222,128,.26);
    }
    .hero > .wrap {
      display: grid;
    }

    .hero::before {
      content: '';
      position: absolute; inset: 0; z-index: -1;
      background:
        linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px) 0 0 / 76px 76px,
        linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px) 0 0 / 76px 76px;
      pointer-events: none;
      mask-image: radial-gradient(ellipse 80% 70% at 50% 18%, black 5%, transparent 70%);
      -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 18%, black 5%, transparent 70%);
    }
    .hero::after {
      content: '';
      position: absolute; inset: 0; z-index: -1; pointer-events: none;
    }

    .hero-beam {
      position: absolute; top: 0; left: 50%; transform: translateX(-50%);
      width: min(1100px, 92%); height: 1px; z-index: 1; pointer-events: none;
      background: linear-gradient(90deg, transparent, rgba(74,222,128,.7) 25%, rgba(134,239,172,.95) 50%, rgba(74,222,128,.7) 75%, transparent);
    }
    .hero-beam::after {
      content: '';
      position: absolute; left: 12%; right: 12%; top: -1px; height: 110px;
      background: radial-gradient(ellipse 60% 100% at 50% 0%, rgba(74,222,128,.20), transparent 72%);
      filter: blur(3px);
    }

    .hero-text {
      text-align: left;
      max-width: 600px;
      margin: 0;
      position: relative;
      z-index: 20;
    }
    .hero-text > .tag {
      border-color: rgba(255,255,255,.14);
    }

    .hero h1 {
      color: #FFFFFF;
      margin: 0;
    }

    .hero h1 em {
      font-style: normal;
      -webkit-background-clip: text; background-clip: text;
      position: relative;
      display: inline-block;
      /* pudełko inline-block przycina gradient — polskie ogonki (ą, ł, g)
         schodzą poniżej line-height 1.04, więc dokładamy miejsca i cofamy je marginesem */
      margin-bottom: -0.18em;
    }

    .hero-sub {
      margin: 28px 0 0;
    }

    .hero-sub strong { color: rgba(255,255,255,.95); font-weight: 600; }

    .hero-meta {
      display: grid; align-items: center; justify-content: start;
    }

    .hero-mods {
      display: none;
      flex-wrap: wrap; align-items: center; justify-content: center;
      gap: 7px 8px; margin: 52px auto 0; max-width: 940px;
    }
    .hero-mods-lab {
      font-size: 14px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; margin-right: 4px;
    }
    .hero-mod {
      display: inline-flex; align-items: center; gap: 6px;
      font-size: 14px; font-weight: 500; color: rgba(255,255,255,.62);
      padding: 6px 11px; border-radius: 999px;
      background: rgba(255,255,255,.04);
      border: 1px solid rgba(255,255,255,.09);
      transition: color .2s, border-color .2s, background .2s;
    }
    .hero-mod:hover { color: #fff; border-color: rgba(74,222,128,.35); background: rgba(255,255,255,.08); }
    .hero-mod svg { width: 13px; height: 13px; color: #4ADE80; flex-shrink: 0; }
    .hero-mods-lab { color: rgba(255,255,255,.32) !important; }

    .hero-fact {
      display: inline-flex; align-items: center; gap: 8px; font-weight: 500;
    }
    .hero-fact svg { width: 14px; height: 14px; color: #4ADE80; flex-shrink: 0; }
    .hero-dot { display: none; }

    .hero-meta-dot {
      width: 3px; height: 3px; border-radius: 50%;
      background: #D1D5DB; flex-shrink: 0;
    }

    .hero-actions {
      display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start;
    }
    .hero-actions .btn-p {
      color: #FFFFFF !important;
    }
    .hero-actions .btn-p::after {
      content: '';
      position: absolute; inset: 0; pointer-events: none;
      background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,0) 44%);
    }
    .hero-actions .btn-p .arw { stroke: #FFFFFF; position: relative; z-index: 1; }
    .hero-actions .btn-p > span:not(.arw) { position: relative; z-index: 1; }

    .hero-actions .btn-s {
      color: rgba(255,255,255,.92);
    }
    .hero-actions .btn-s:hover {
      transform: translateY(-2px);
      background: rgba(255,255,255,.10);
      border-color: rgba(255,255,255,.24);
      color: #fff;
    }
    .hero-actions .btn-s .arw { stroke: #4ADE80; }

    .hero-link {
      font-size: 16px; font-weight: 500; color: var(--muted);
      text-decoration: underline; text-underline-offset: 4px;
      text-decoration-color: rgba(107,114,128,.3);
      transition: color .2s, text-decoration-color .2s;
    }
    .hero-link:hover { color: var(--ink); text-decoration-color: var(--ink); }

    .check {
      display: inline-flex; align-items: center; justify-content: center;
      width: 16px; height: 16px; border-radius: 999px;
      background: rgba(17,24,39,.12); color: #6B7280; flex-shrink: 0;
    }

    .check svg { width: 9px; height: 9px; }

    .btn-p, .btn-s {
      display: inline-flex; align-items: center; gap: 9px;
      padding: 15px 26px; border-radius: 999px;
      font-family: var(--font-body); font-size: 16.5px; font-weight: 600;
      letter-spacing: -.011em; cursor: pointer; white-space: nowrap; border: 0;
      position: relative; overflow: hidden;
      transition: transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s, border-color .3s, background .3s;
    }
    /* strzałka wyjeżdża przy najechaniu */
    .btn-p .arw, .btn-s .arw {
      width: 16px; height: 16px; flex-shrink: 0;
      transition: transform .3s cubic-bezier(.22,1,.36,1);
    }
    .btn-p:hover .arw, .btn-s:hover .arw { transform: translateX(3px); }
    .btn-p {
      background: linear-gradient(180deg, #22C55E 0%, #16A34A 100%);
      color: #fff !important;
      box-shadow: 0 6px 20px rgba(22,163,74,.30);
    }
    .btn-p:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(22,163,74,.42); }
    .btn-p .ico {
      width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
      background: rgba(255,255,255,.24);
      display: flex; align-items: center; justify-content: center;
    }
    .btn-s {
      background: rgba(255,255,255,.08); color: #fff;
      border: 1px solid rgba(255,255,255,.18);
    }
    .btn-s:hover { transform: translateY(-2px); background: rgba(255,255,255,.14); border-color: rgba(74,222,128,.45); }
    .btn-s svg { stroke: #4ADE80; }

    .hero-live {
      display: none;
      position: absolute; right: -18px; bottom: 330px; z-index: 30;
      width: 268px; padding: 18px 20px;
      border-radius: 20px;
      background: rgba(12,16,22,.78);
      border: 1px solid rgba(255,255,255,.13);
      backdrop-filter: blur(20px) saturate(1.4);
      -webkit-backdrop-filter: blur(20px) saturate(1.4);
      box-shadow: 0 24px 60px -18px rgba(0,0,0,.75), 0 0 0 1px rgba(255,255,255,.04) inset;
      text-align: left;
    }
    .hero-live-top {
      display: flex; align-items: center; gap: 8px;
      font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
      color: rgba(255,255,255,.5); margin-bottom: 14px;
    }
    .hero-live-dot {
      width: 7px; height: 7px; border-radius: 50%; background: #4ADE80;
      box-shadow: 0 0 0 4px rgba(74,222,128,.16), 0 0 12px rgba(74,222,128,.5);
    }
    .hero-live-rows { display: flex; flex-direction: column; gap: 11px; }
    .hero-live-row {
      display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
    }
    .hero-live-row span { font-size: 14px; color: rgba(255,255,255,.58); }
    .hero-live-row b { font-size: 21px; font-weight: 600; color: #fff; letter-spacing: -.02em; }
    .hero-live-row b.warn { color: #FBBF24; }
    .hero-live-foot {
      margin-top: 15px; padding-top: 13px;
      border-top: 1px solid rgba(255,255,255,.10);
      font-size: 11.5px; color: rgba(255,255,255,.38); line-height: 1.45;
    }
    @media (max-width: 1100px) { .hero-live { display: none; } }

    /* HERO DASHBOARD */
    .hero-visual-wrap {
      position: relative;
      z-index: 20;
      max-width: none;
      margin: 0;
      perspective: none;
    }

    .hero-visual-wrap .dashboard-shell {
      overflow: hidden;
      transform: none;
    }

    .hero-visual-wrap::before {
      content: '';
      position: absolute;
      left: 4%; right: 4%; top: -6%; bottom: -6%;
      background:
        radial-gradient(ellipse 78% 58% at 50% 34%, rgba(34,197,94,.13), transparent 74%),
        radial-gradient(ellipse 52% 46% at 82% 46%, rgba(59,130,246,.09), transparent 76%);
      z-index: -1;
    }

    .hero-visual-wrap::after {
      content: none;
      position: absolute;
      bottom: 0; left: 0; right: 0; height: 40%;
      background: linear-gradient(to bottom, transparent 0%, rgba(17,24,39,0.03) 60%, rgba(17,24,39,0.08) 100%);
      z-index: 1;
      border-radius: 0 0 16px 16px;
      pointer-events: none;
    }

    .dashboard-shell {
      border-radius: 16px;
      background: #fff;
      border: 1px solid rgba(17,24,39,.08);
      box-shadow:
        0 0 0 1px rgba(13,17,23,.03),
        0 4px 12px rgba(13,17,23,.04),
        0 16px 40px rgba(13,17,23,.08),
        0 48px 100px rgba(13,17,23,.14);
      overflow: hidden;
    }

    .dash-topbar {
      display: flex; align-items: center; justify-content: space-between;
      padding: 12px 18px;
      background: #fafafa;
      border-bottom: 1px solid var(--line);
    }

    .dash-dots { display: flex; gap: 6px; }
    .dash-dot { width: 11px; height: 11px; border-radius: 999px; }
    .dash-dot:nth-child(1) { background: #ff5f56; }
    .dash-dot:nth-child(2) { background: #ffbd2e; }
    .dash-dot:nth-child(3) { background: #28C840; }

    .dash-url {
      height: 26px; width: 280px; border-radius: 7px;
      background: #efefef; display: flex; align-items: center;
      padding: 0 12px; font-size: 12px; color: #999; font-weight: 500;
    }

    .dash-actions { display: flex; gap: 6px; }
    .dash-action { width: 28px; height: 22px; border-radius: 5px; background: #efefef; }

    .dash-screen {
      position: relative;
      overflow: hidden;
    }

    .dash-screen img {
      width: 100%;
      height: auto;
      display: block;
    }

    .dash-screen::after {
      content: '';
      position: absolute;
      top: 0; left: -100%; width: 60%; height: 100%;
      background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.08) 40%, rgba(255,255,255,.18) 50%, rgba(255,255,255,.08) 60%, transparent 100%);
      pointer-events: none;
    }

    .dash-live {
      display: flex; align-items: center; gap: 6px;
      font-size: 10px; font-weight: 600; color: #16A34A;
      letter-spacing: .04em; text-transform: uppercase;
    }
    .dash-live::before {
      content: ''; width: 6px; height: 6px; border-radius: 50%;
      background: #16A34A;
      box-shadow: 0 0 6px rgba(22,163,74,.4);
    }

    /* floating callouts */
    .float-badge {
      position: absolute;
      display: flex; align-items: center; gap: 7px;
      padding: 9px 13px; border-radius: 12px;
      background: #fff;
      border: 1px solid var(--line);
      box-shadow: 0 8px 24px rgba(13,17,23,.12);
      font-size: 14px; font-weight: 600; color: var(--ink);
      white-space: nowrap;
      pointer-events: none;
      opacity: 1;
      animation: badgeIn .6s ease forwards;
    }

    .float-badge::before {
      content: ''; width: 8px; height: 8px; border-radius: 999px;
      background: #16A34A; box-shadow: 0 0 0 3px rgba(22,163,74,.15);
      flex-shrink: 0;
    }

    @keyframes badgeIn {
      from { opacity: 0; transform: translateY(12px) scale(.9); }
      to { opacity: 1; transform: translateY(0) scale(1); }
    }

    .fb-1 { top: 18%; right: -16px; animation-delay: 1.2s, 2s; }
    .fb-2 { bottom: 30%; left: -20px; animation-delay: 1.6s, 2.4s; }
    .fb-3 { bottom: 12%; right: 8%; animation-delay: 2.0s, 2.8s; }

    /* ─── SECTION BASE ─── */
    .s {padding:var(--section-space) 0; }
    .s-sm { padding: 48px 0; }

    .s-head { text-align: center; max-width: 800px; margin: 0 auto 44px; margin-bottom:36px; }
    .s-head.left { text-align: left; margin-inline: 0; }

    .s-head h2 { font-size: clamp(31px, 3.7vw, 46px); margin-top: 12px; }

    .s-lead {
      margin-top: 16px;
      color: var(--muted); max-width: 540px; margin-left: auto; margin-right: auto; line-height:1.7; font-size:17px;
    }

    /* ─── OUTCOMES ─── */

    /* ─── FIT ─── */
    .fit-section {
      position: relative; overflow: hidden;
      background: #0B1220;
      border: 1px solid rgba(255,255,255,.08);
    }
    .fit-section::after {
      content: '';
      position: absolute; inset: 0; z-index: 0; pointer-events: none;
      background:
        radial-gradient(ellipse 60% 55% at 12% 8%, rgba(22,163,74,.30), transparent 65%),
        radial-gradient(ellipse 55% 50% at 88% 92%, rgba(37,99,235,.24), transparent 68%),
        linear-gradient(180deg, rgba(9,16,28,.78) 0%, rgba(9,16,28,.90) 100%);
    }
    .fit-inner {
      position: relative; z-index: 1;
    }
    .fit-top h2 { font-weight: 800; color: #fff; margin: 0 auto;
    }
    .fit-top p { line-height: 1.7;
      margin-top: 14px; margin-right: auto;
    }
    .fit-top .tag {
      background: rgba(22,163,74,.15); border-color: rgba(22,163,74,.3); color: rgba(255,255,255,.85);
    }
    .fit-grid {
      display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
      border: 1px solid rgba(255,255,255,.10); overflow: hidden;
      background: rgba(9,16,28,.35);
    }
    .fit-card {
      background: rgba(255,255,255,.035);
      border-right: 1px solid rgba(255,255,255,.08);
      border-bottom: 1px solid rgba(255,255,255,.08);
      transition: all .25s ease;
      cursor: default;
    }
    .fit-card:nth-child(3), .fit-card:nth-child(6) { border-right: none; }
    .fit-card:nth-child(n+4) { border-bottom: none; }
    .fit-card-ico {
      display: flex; align-items: center; justify-content: center;
      width: 42px; height: 42px; border-radius: 12px; margin-bottom: 16px;
      background: rgba(74,222,128,.10);
      border: 1px solid rgba(74,222,128,.20);
      transition: background .25s ease, border-color .25s ease, transform .25s ease;
    }
    .fit-card-ico svg { width: 20px; height: 20px; }
    .fit-card:hover .fit-card-ico { background: rgba(74,222,128,.18); border-color: rgba(74,222,128,.4); transform: translateY(-2px); }
    .fit-card h3 { font-size: 16px; font-weight: 700; color: #fff; line-height: 1.3; }
    .fit-card p { line-height: 1.55; margin-top: 6px; }
    .fit-card:hover { background: rgba(255,255,255,.07); }

    /* ─── SOCIAL PROOF ─── */

    .tcard {
      padding: 28px; border-radius: 18px;
      background: #fff; border: 1px solid var(--line);
      box-shadow: 0 2px 8px rgba(13,17,23,.04);
      display: flex; flex-direction: column; gap: 16px;
      transition: transform .22s ease, box-shadow .22s ease;
      position: relative; overflow: hidden;
    }

    .tcard::before {
      content: '';
      position: absolute; top: 0; left: 0; right: 0; height: 3px;
      background: linear-gradient(90deg, #111827, #374151);
    }

    .tcard:hover { transform: translateY(-3px); box-shadow: 0 12px 32px rgba(13,17,23,.08); }

    .tcard-stars { color: #f59e0b; letter-spacing: 2px; font-size: 15px; font-family: Arial, sans-serif; line-height: 1; }

    .tcard-quote {
      font-size: 16px; line-height: 1.78; color: var(--ink-2);
      font-style: italic; flex: 1;
    }

    .tcard-author { display: flex; align-items: center; gap: 12px; margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line); }

    .tcard-avatar {
      width: 42px; height: 42px; border-radius: 999px;
      background: #111827; color: #fff;
      display: flex; align-items: center; justify-content: center;
      font-weight: 600; font-size: 15px; flex-shrink: 0;
    }

    .tcard-name { font-size: 15px; font-weight: 600; }
    .tcard-role { font-size: 14px; color: var(--muted); margin-top: 2px; }
    .tcard-avatar-img {
      width: 42px; height: 42px; border-radius: 999px;
      object-fit: cover; flex-shrink: 0;
      border: 2px solid var(--line);
    }

    /* ─── DEMO ─── */
    .demo-section {
      position: relative; overflow: hidden;
    }

    .demo-card {
      border: 1px solid rgba(17,24,39,.10);
      background: #fff; overflow: hidden;
      display: grid;
    }

    .demo-left { display: flex; flex-direction: column; justify-content: center;
    }
    .demo-left h2 { margin-bottom: 10px;
      color: var(--ink); font-weight: 800; letter-spacing: -.03em;
    }
    .demo-left p { font-size: 16px; color: var(--muted); line-height: 1.75; margin-bottom: 24px; }

    .demo-cta-row { display: flex; flex-wrap: wrap; gap: 10px; }

    .demo-trust {
      display: flex; flex-wrap: wrap; color: var(--muted);
    }
    .demo-trust span { display: flex; align-items: center; gap: 5px; }
    .demo-trust .check { background: #16A34A; }

    .demo-right {
      position: relative; display: flex; flex-direction: column;
      justify-content: center; overflow: hidden;
    }
    .demo-right::before {
      content: ''; position: absolute; inset: 0;
      background: radial-gradient(ellipse at 30% 40%, rgba(22,163,74,.08) 0%, transparent 70%);
      pointer-events: none;
    }

    .agenda-list { display: flex; flex-direction: column; position: relative; z-index: 1; }

    .ag-item {
      display: grid; grid-template-columns: 40px 1fr;
      transition: all .2s ease;
    }

    .ag-num { border-radius: 10px;
      display: flex; align-items: center; justify-content: center;
      font-family: var(--font-body); font-weight: 700;
    }

    .ag-title { font-size: 15px; font-weight: 600; }
    .ag-body { font-size: 14px; line-height: 1.55; margin-top: 2px; }
    .ag-time { font-weight: 600; letter-spacing: .05em;
    }

    /* ─── MODULES ─── */
    .modules-grid {
      display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
    }

    /* ─── PROCESS ─── */
    /* ─── FUNNEL (moduły → Digan Flow) ─── */
    /* ─── FAQ ─── */
    .faq-list { display: flex; flex-direction: column; margin: 0 auto; }

    .faq-item { border: 1px solid rgba(17,24,39,.10);
      background: #fff; overflow: hidden;
    }

    .faq-trigger {
      width: 100%;
      display: flex; align-items: center; justify-content: space-between; gap: 16px;
      background: none; border: none; cursor: pointer;
      text-align: left; font-family: var(--font-body); font-weight: 600; color: var(--ink);
      transition: background .18s;
    }

    .faq-trigger:hover {background:#f6faf7; }

    .faq-icon {
      width: 32px; height: 32px; border-radius: 9px;
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0; transition: transform .25s ease, background .2s;
    }

    .faq-item.open .faq-icon {
      transform: rotate(45deg); color: #fff;
    }

    .faq-body {
      max-height: 0; overflow: hidden;
      transition: max-height .35s cubic-bezier(.4,0,.2,1), padding .2s;
      font-size: 16px;
      padding: 0 24px;
    }

    .faq-body-inner { padding-bottom: 22px; }

    .faq-item.open .faq-body { padding-top: 0; }

    /* ─── CTA FINAL ─── */
    .cta-final {
      position: relative;
      z-index: 30;
      overflow: hidden;
    }

    .cta-box {
      overflow: hidden;
      position: relative;
    }

    .cta-box-bg {
      position: absolute; inset: 0;
      background: url('../../assets/svg/cta-bg.svg') center/cover no-repeat;
    }

    .cta-box-inner {
      position: relative;
    }

    .cta-box h2 {
      font-weight: 600;
      color: #F9FAFB;
    }

    .cta-box p {
      margin: 20px auto 0; max-width: 46ch;
      font-size: 16px; color: rgba(255,255,255,0.5); line-height: 1.7;
    }

    .cta-btns {
      display: flex; flex-wrap: wrap; gap: 10px;
      justify-content: center; margin-top: 36px;
      position: relative; z-index: 1;
    }

    .cta-trust-row {
      display: flex; align-items: center; justify-content: center;
      flex-wrap: wrap; gap: 6px 22px;
      margin-top: 22px; font-size: 14px; font-weight: 600; color: var(--muted);
      position: relative; z-index: 1;
    }

    .cta-trust-row span { display: flex; align-items: center; gap: 5px; }

    .cta-float {
      position: absolute; z-index: 1;
      display: inline-flex; align-items: center; gap: 6px;
      padding: 8px 14px; border-radius: 10px;
      background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08);
      backdrop-filter: blur(8px);
      font-size: 14px; font-weight: 600; color: rgba(255,255,255,.35);
      pointer-events: none;
    }
    .cta-f1 { top: 20%; left: 8%; }
    .cta-f2 { bottom: 22%; right: 7%; }
    .cta-f3 { top: 18%; right: 10%; }

    @media (max-width: 700px) {
      .cta-float { display: none; }
    }

    /* ─── FOOTER ─── */
    footer {
      position: relative;
      border-top: 1px solid var(--line);
      overflow: hidden;
    }

    .footer-top {
      display: grid; padding-bottom: 0; border-bottom: 0;
    }

    .footer-brand p { font-size: 16px !important; line-height: 1.7 !important; max-width: 34ch !important; margin-top: 20px !important; }
    .footer-cta { margin-top: 30px; }

    .footer-col-title {
      font-size: 12px; font-weight: 700;
      text-transform: uppercase;
    }

    .footer-col { display: flex; flex-direction: column; align-items: flex-start; }

    .footer-col a {
      position: relative; width: fit-content; color: var(--muted); font-weight: 500;
      text-decoration: none; transition: color .18s;
    }
    .footer-col a::after {
      content: ''; position: absolute; left: 0; bottom: -3px;
      width: 100%; height: 1.5px; border-radius: 2px;
      background: linear-gradient(90deg, #22C55E, #16A34A);
      transform: scaleX(0); transform-origin: left;
      transition: transform .26s cubic-bezier(.22,1,.36,1);
    }
    .footer-col a:hover { color: var(--ink); }
    .footer-col a:hover::after { transform: scaleX(1); }

    .footer-word {
      font-family: var(--font-display);
      font-weight: 800; letter-spacing: -.055em; line-height: 1;
      user-select: none; pointer-events: none;
      background: linear-gradient(180deg, rgba(13,17,23,.085) 12%, rgba(13,17,23,.012) 96%);
      -webkit-background-clip: text; background-clip: text;
      -webkit-text-fill-color: transparent; color: transparent;
    }
    .footer-word i {
      font-style: normal;
      background: linear-gradient(180deg, rgba(22,163,74,.30) 12%, rgba(22,163,74,.04) 96%);
      -webkit-background-clip: text; background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .footer-bottom {
      display: flex; align-items: center; justify-content: space-between;
      flex-wrap: wrap; gap: 12px 24px; border-top: 1px solid var(--line);
      font-size: 13.5px;
    }

    @media (max-width: 900px) {
      footer { padding: 72px 0 32px; }
      .footer-top { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 48px 28px; }
      .footer-brand { grid-column: 1 / -1; }
    }
    @media (max-width: 700px) {
      footer { margin-top: 64px; padding: 56px 0 28px; }
      .footer-top { grid-template-columns: 1fr; gap: 38px; }
      .footer-word { margin: 56px 0 32px; }
      .footer-bottom { flex-direction: column; align-items: flex-start; gap: 6px; }
    }

    /* ─── SCROLL REVEAL ─── */
    .reveal {
      opacity: 0;
      transform:translateY(12px);
      transition:opacity .4s ease,transform .4s ease;
    }

    .reveal.visible { opacity: 1; transform: none; }

    /* ─── RESPONSIVE ─── */
    @media (max-width: 1000px) {
      .demo-card { grid-template-columns: 1fr; }
      .demo-left { padding: 36px 28px; }
      .demo-right { padding: 32px 28px; }
      .fit-inner { padding: 40px 28px; }
      .fit-top { margin-bottom: 32px; }
      .fit-grid { grid-template-columns: repeat(2, 1fr); }
      .fit-card { border-right: none !important; border-bottom: 1px solid rgba(255,255,255,.08) !important; }
      .fit-card:nth-child(odd) { border-right: 1px solid rgba(255,255,255,.08) !important; }
      .fit-card:nth-child(5), .fit-card:nth-child(6) { border-bottom: none !important; }

      .cta-box { padding: 44px 32px; }
    }

    @media (max-width: 1050px) {
      .hero { padding: 142px 0 78px; }
      .hero > .wrap { grid-template-columns: 1fr; gap: 46px; min-height: 0; }
      .hero-text { text-align: center; max-width: 820px; margin: 0 auto; }
      .hero h1 { max-width: 17ch; margin-inline: auto; }
      .hero-sub { max-width: 650px; margin-inline: auto; }
      .hero-actions { justify-content: center; }
      .hero-meta { justify-content: center; }
      .hero-visual-wrap { width: min(100%, 900px); margin: 0 auto; }
    }

    @media (max-width: 640px) {
      header { padding-top: 0 !important; }
      .wrap { width: min(100% - 32px, 100%); }

      nav { flex-wrap: wrap; }

      /* Hero */
      .hero { padding: 118px 0 58px; margin-top: 0; }
      .hero h1 { font-size: 32px !important; max-width: 16ch; }
      .hero-sub { font-size: 16.5px; margin-top: 18px; max-width: 34ch; }

      /* 2. mikro-dowód: kolumna bez wiszących separatorów */
      .hero-meta { flex-direction: column; align-items: center; gap: 9px; margin-top: 20px; }
      .hero-dot { display: none; }
      .hero-fact { font-size: 14px; }

      .hero-actions { margin-top: 26px; }
      /* 3. link „Zobacz moduły" wyśrodkowany, nie przyklejony do lewej */
      .hero-actions .btn-s { align-self: center; width: auto; padding: 12px 18px; }
      .hero-actions .btn-p { width: 100%; justify-content: center; }

      .hero-mods { margin-top: 30px; gap: 6px; }
      .hero-mods-lab { width: 100%; text-align: center; margin: 0 0 4px; }

      /* 4. mockup ucinany zbyt agresywnie — pokaż więcej panelu */
      .hero-visual-wrap { margin: 8px auto 0; }

      /* Sections */
      .s { padding: 40px 0; }
      .s-head { margin-bottom: 32px; }
      .s-head h2 { font-size: 24px !important; }
      .s-lead { font-size: 16px; }

      /* Fit */
      .fit-grid { grid-template-columns: 1fr; }
      .fit-card { border-right: none !important; border-bottom: 1px solid rgba(255,255,255,.08) !important; }
      .fit-card:last-child { border-bottom: none !important; }
      .fit-inner { padding: 28px 20px; }

      .fb-1, .fb-2, .fb-3 { display: none; }

      /* Buttons */
      .hero-actions, .demo-cta-row, .cta-btns {
        flex-direction: column; align-items: stretch;
      }
      .btn-hero, .btn-ghost, .btn-glow { width: 100%; justify-content: center; }

      /* CTA */
      .cta-final { padding: 48px 0 56px; }
      .cta-box { padding: 36px 22px; }
      .cta-box h2 { font-size: 22px !important; }
      .cta-trust-row { font-size: 14px; gap: 4px 14px; }

      /* Demo */
      .demo-left { padding: 28px 22px !important; }
      .demo-right { padding: 24px 22px !important; }

      /* Integracja */
      .int-wrap { border-radius: 16px !important; }
      .int-photo { height: clamp(200px, 45vw, 260px) !important; }
      .int-card { position: static !important; bottom: auto !important; left: auto !important; right: auto !important; border-radius: 0 0 16px 16px !important; padding: 18px 16px !important; border: none !important; border-top: 1px solid rgba(17,24,39,.08) !important; box-shadow: none !important; background: #fff !important; backdrop-filter: none !important; }
      .int-card span[style*="font-size: 16px"] { font-size: 14px !important; }
      .int-card span[style*="width:28px"] { width: 24px !important; height: 24px !important; }
      .int-card div[style*="gap:14px"] { gap: 10px !important; }

      /* Moduły */
      .subgrid { grid-template-columns: 1fr !important; }

      /* Finanse */
      .fin-table { grid-template-columns: 1fr !important; }

      /* FAQ */
      .faq-trigger { padding: 16px 18px; font-size: 15px; }

      /* Outcomes */

      /* BA cards */
      .ba-card { padding: 28px 22px; border-radius: 18px; }
      .ba-grid { gap: 16px; margin-top: 28px; }

      /* Bento */
      .bento-sec { padding-bottom: 48px !important; }

      /* Footer */
      footer { margin-top: 56px; padding: 56px 0 28px; }
      .footer-top { grid-template-columns: 1fr; gap: 38px; padding-bottom: 0; }
      .footer-word { margin: 48px 0 28px; }
    }
    @keyframes modalIn {
      from { opacity: 0; transform: translateY(16px) scale(0.97); }
      to   { opacity: 1; transform: translateY(0) scale(1); }
    }

    /* ════════ UI MOCKUPS (HTML/CSS) ════════ */
    .ui {
      background: #fff; border: 1px solid var(--line);
      border-radius: 14px; padding: 14px;
      box-shadow: 0 12px 30px rgba(13,17,23,.06), 0 2px 6px rgba(13,17,23,.04);
      position: relative; overflow: hidden;
    }
    .ui-bar {
      display: flex; align-items: center; gap: 8px;
      padding-bottom: 12px; margin-bottom: 12px;
      border-bottom: 1px solid var(--line);
    }
    .ui-title { font-size: 11px; font-weight: 700; color: var(--ink); letter-spacing: .02em; }
    .ui-pill {
      margin-left: auto; font-size: 10px; font-weight: 700;
      padding: 3px 9px; border-radius: 999px;
      background: var(--g-l); color: var(--g-d);
      display: inline-flex; align-items: center; gap: 5px;
    }
    .ui-pill .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--g); box-shadow: 0 0 0 3px var(--g-m); }
    .ui-dot-row { display: flex; gap: 5px; }
    .ui-dot-row i { width: 8px; height: 8px; border-radius: 50%; background: var(--line); display: inline-block; }

    .ui-row {
      display: flex; align-items: center; gap: 10px;
      padding: 9px 10px; border-radius: 10px;
      background: var(--bg-2); margin-bottom: 7px;
      border: 1px solid transparent;
      transition: background .2s ease, border-color .2s ease;
    }
    .ui-row:last-child { margin-bottom: 0; }
    .ui-row.hl { background: var(--g-l); border-color: rgba(22,163,74,.2); }
    .ui-av {
      width: 26px; height: 26px; border-radius: 8px; flex-shrink: 0;
      background: linear-gradient(135deg,#374151,#1f2937);
      color: #fff; font-size: 9px; font-weight: 800;
      display: flex; align-items: center; justify-content: center;
    }
    .ui-av.g { background: linear-gradient(135deg,#22C55E,#16a34a); }
    .ui-line { height: 7px; border-radius: 4px; background: rgba(13,17,23,.10); }
    .ui-grow { flex: 1; min-width: 0; }
    .ui-tag {
      font-size: 9px; font-weight: 700; padding: 2px 7px; border-radius: 6px;
      background: var(--g-l); color: var(--g-d); white-space: nowrap;
    }
    .ui-tag.gray { background: rgba(13,17,23,.06); color: var(--muted); }
    .ui-num { font-family: var(--font-body); font-weight: 700; color: var(--ink); }

    /* Bars chart */
    .ui-bars { display: flex; align-items: flex-end; gap: 8px; height: 78px; padding-top: 6px; }
    .ui-bars i {
      flex: 1; border-radius: 5px 5px 3px 3px;
      background: rgba(13,17,23,.10);
      transform-origin: bottom; transform: scaleY(0);
      transition: transform .7s cubic-bezier(.22,1,.36,1);
    }
    .ui-bars i.g { background: linear-gradient(180deg,#22C55E,#16a34a); }
    .reveal.visible .ui-bars i { transform: scaleY(1); }

    /* Calendar / schedule grid */
    .ui-cal { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
    .ui-cal .day { font-size: 9px; font-weight: 700; color: var(--muted); text-align: center; padding-bottom: 2px; }
    .ui-cal .slot { height: 18px; border-radius: 5px; background: var(--bg-2); }
    .ui-cal .slot.f { background: var(--g-m); border: 1px solid rgba(22,163,74,.3); }
    .ui-cal .slot.f2 { background: rgba(13,17,23,.06); }

    /* mini stat tiles inside mockup */
    .ui-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
    .ui-tile { background: var(--bg-2); border-radius: 10px; padding: 10px 11px; }
    .ui-tile .k { font-size: 9px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
    .ui-tile .v { font-family: var(--font-body); font-size: 19px; font-weight: 700; color: var(--ink); margin-top: 4px; line-height: 1; }
    .ui-tile .v.g { color: var(--g); }

    /* progress bar */
    .ui-prog { height: 7px; border-radius: 999px; background: rgba(13,17,23,.08); overflow: hidden; }
    .ui-prog > i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg,#22C55E,#16a34a); width: 0; transition: width 1s cubic-bezier(.22,1,.36,1); }
    .reveal.visible .ui-prog > i { width: var(--w, 70%); }

    /* ─── Module Tabs ─── */
    .mtab-nav {
      display: flex; flex-wrap: wrap; gap: 8px;
      justify-content: center; margin-bottom: 44px;
      background: rgba(17,24,39,.04); border-radius: 14px;
      padding: 5px; width: fit-content; margin-left: auto; margin-right: auto;
    }
    .mtab-btn { border: none;
      background: transparent; cursor: pointer; font-family: var(--font-body);
      font-size: 15px; font-weight: 600; color: var(--muted); display: flex; align-items: center; gap: 8px; border-radius:14px; padding:12px 18px; transition:background .2s,color .2s,box-shadow .2s;
    }
    .mtab-btn:hover { color: var(--ink); }
    .mtab-btn.active {
      background:#fff;
      color:#176a37;
      box-shadow:0 2px 8px rgba(23,54,35,.08);
    }
    .mtab-btn .mtab-num { display: none; }

    .mtab-content {
      position: relative; overflow: hidden; min-height: 420px;
    }

    .mtab-panel {
      display: none;
    }
    .mtab-panel.active {
      display: grid;
      grid-template-columns: .82fr 1.18fr; gap: 0; align-items: stretch;
      background: #fff;
      overflow: hidden;
      animation: mtabIn .4s ease both;
      border:1px solid var(--surface-line);
      box-shadow:var(--surface-shadow);
      border-radius:24px;
    }
    @keyframes mtabIn {
      from { opacity: 0; transform: translateY(16px); }
      to { opacity: 1; transform: translateY(0); }
    }

    .mtab-text {
      padding: 48px 44px; display: flex; flex-direction: column; justify-content: center;
    }
    .mtab-text h3 {
      font-family: var(--font-body); font-size: 26px; font-weight: 700;
      color: var(--ink); letter-spacing: -.03em; line-height: 1.25;
    }
    .mtab-text p { font-size: 16px; color: var(--muted); line-height: 1.75; margin: 14px 0 0; }
    .mtab-highlight {
      display: inline-flex; align-items: center; gap: 8px;
      margin-top: 20px; padding: 10px 16px; border-radius: 12px;
      font-size: 14px; border: 1px solid rgba(22,163,74,.12); color:#246e3d; background:#eff7f1; border-color:#dcecdf; font-weight:500;
    }
    .mtab-highlight svg { flex-shrink: 0; }
    .mtab-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 18px; }
    .mtab-chip { font-weight: 600; padding: 5px 12px; border-radius: 999px; border: 1px solid rgba(17,24,39,.08); font-size:12px; background:#f7f9f7; color:#526159;
    }

    .mtab-mockup {
      position: relative; border-left: 1px solid var(--line);
      display: flex; align-items: center; justify-content: center;
      padding: 40px 36px; overflow: hidden;
    }
    .mtab-mockup-bg {
      position: absolute; inset: 0; z-index: 0;
    }
    .mtab-mockup-bg img {
      width: 100%; height: 100%; object-fit: cover;
      opacity: .15;
    }
    .mtab-mockup .ui {
      position: relative; z-index: 1;
      width: 100%; max-width: 340px;
      background: rgba(255,255,255,.88); backdrop-filter: blur(16px);
      border: 1px solid rgba(255,255,255,.6);
      box-shadow: 0 12px 40px rgba(13,17,23,.1), 0 2px 6px rgba(13,17,23,.04);
    }
    .mtab-mockup.real-screen {
      padding: 0;
      min-height: 420px;
      background:#f0f4f1;
    }
    .mtab-mockup.real-screen .mtab-mockup-bg {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .mtab-mockup.real-screen .mtab-mockup-bg img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      opacity: 1;
      border-radius:12px;
      filter:drop-shadow(0 6px 12px rgba(23,54,35,.09));
    }
    .mtab-mockup.real-screen .ui { display: none; }

    @media (max-width: 900px) {
      .mtab-panel.active { grid-template-columns: 1fr; }
      .mtab-mockup { border-left: none; border-top: 1px solid var(--line); min-height: 280px; }
      .mtab-text { padding: 32px 28px; }
      .mtab-mockup { padding: 28px; }
      .mtab-nav { gap: 4px; padding: 4px; }
      .mtab-btn { padding: 9px 14px; font-size: 12px; }
    }
    @media (max-width: 640px) {
      .mtab-btn span:not(.mtab-num) { display: none; }
      .mtab-btn .mtab-num { opacity: .7; font-size: 12px; }
    }

    /* ─── Before / After ─── */
    .ba-section {
      position: relative; overflow: hidden;
    }
    .ba-section .ba-bg {
      position: absolute; inset: 0; z-index: 0;
    }
    .ba-section .ba-bg svg { width: 100%; height: 100%; display: block; }
    .ba-section .wrap { position: relative; z-index: 1; }

    .ba-grid { display: grid; grid-template-columns: 1fr auto 1fr; gap: 28px; align-items: stretch; margin-top: 40px; }
    .ba-card { border: 1px solid rgba(17,24,39,.10); padding:28px; border-radius:24px; }
    .ba-card.before { background: #111827; border-color: rgba(255,255,255,.06); }
    .ba-card.after { background: #fff; }
    .ba-label { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 20px; padding: 8px 14px; border-radius: 10px; }
    .ba-label.before { color: rgba(255,255,255,.55); background: rgba(239,68,68,.08); border: 1px solid rgba(239,68,68,.12); }
    .ba-label.after { color: var(--g-d); background: rgba(22,163,74,.06); border: 1px solid rgba(22,163,74,.12); }
    .ba-label .pin { width: 18px; height: 18px; border-radius: 6px; display: flex; align-items: center; justify-content: center; }
    .ba-label.before .pin { background: rgba(239,68,68,.15); }
    .ba-label.after .pin { background: rgba(22,163,74,.1); }
    /* chaos cluster */
    .chaos { position: relative; height: 280px; }
    .chaos-note {
      position: absolute; padding: 12px 16px; border-radius: 12px; font-size: 14px; font-weight: 600;
      background: rgba(239,68,68,.06); border: 1px solid rgba(239,68,68,.12); color: rgba(255,255,255,.65);
      box-shadow: 0 6px 20px rgba(0,0,0,.25);
      display: flex; align-items: center; gap: 8px;
      white-space: nowrap;
    }
    .chaos-note .em { font-size: 16px; }
    .chaos-note:nth-child(1) { top: 0; left: 0; --r:-4deg; animation-delay: 0s; }
    .chaos-note:nth-child(2) { top: 8px; right: 0; --r:3deg; animation-delay: .6s; }
    .chaos-note:nth-child(3) { top: 60px; left: 20px; --r:2deg; animation-delay: 1.2s; }
    .chaos-note:nth-child(4) { top: 75px; right: 10px; --r:-2deg; animation-delay: .3s; }
    .chaos-note:nth-child(5) { top: 140px; left: 0; --r:5deg; animation-delay: .9s; }
    .chaos-note:nth-child(6) { top: 155px; right: 5px; --r:-3deg; animation-delay: 1.5s; }
    .chaos-note:nth-child(7) { top: 220px; left: 30px; --r:2deg; animation-delay: 1.8s; }
    .ba-arrow {
      width: 52px; height: 52px; border-radius: 50%;
      background: linear-gradient(135deg, #16A34A, #15803D); border: none;
      display: flex; align-items: center; justify-content: center;
      box-shadow: 0 8px 24px rgba(22,163,74,.25);
      flex-shrink: 0; align-self: center;
    }
    .ba-arrow svg { stroke: #fff; }

    /* ─── BENTO dashboard ─── */
    .bento-sec {
      background: #F7F3EA;
      position: relative;
      margin: -46px 0 0;
      border-radius: 46px 46px 0 0;
      isolation: isolate;
      padding-top: 46px;
      z-index: 25;
    }
    .bento-sec::before {
      content: '';
      position: absolute; inset: 0; z-index: -1;
      border-radius: 46px 46px 0 0;
      overflow: hidden;
      background:
        radial-gradient(ellipse 55% 45% at 14% 14%, rgba(22,163,74,.10) 0%, transparent 66%),
        radial-gradient(ellipse 50% 42% at 88% 78%, rgba(99,102,241,.08) 0%, transparent 68%);
      pointer-events: none;
    }
    .fin-sec {
      background: #F9FAFB; position: relative; overflow: hidden;
    }
    .fin-sec .fin-bg {
      position: absolute; inset: 0; z-index: 0;
    }
    .fin-sec .fin-bg svg { width: 100%; height: 100%; display: block; }
    .fin-sec .wrap { position: relative; z-index: 1; }
    .bento {
      display: grid; grid-template-columns: 1.3fr 1fr 1fr; grid-auto-rows: minmax(0,auto);
      gap: 14px; margin-top: 8px;
      position: relative; z-index: 1;
    }
    .bento-card {
      background: #101A2B; border: 1px solid rgba(255,255,255,.08); border-radius: 18px; padding: 20px;
      box-shadow: 0 10px 30px -10px rgba(9,17,30,.35);
      transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
    }
    .bento-card:hover { transform: translateY(-2px); box-shadow: 0 16px 38px -16px rgba(9,17,30,.34); border-color: rgba(74,222,128,.24); }
    .bento-card.wide { grid-column: span 2; }
    .bento-card.tall { grid-row: span 2; }
    .bento-k { font-size: 14px; font-weight: 600; color: rgba(255,255,255,.45); text-transform: uppercase; letter-spacing: .05em; }
    .bento-v { font-family: var(--font-body); font-size: 34px; font-weight: 600; color: #F9FAFB; line-height: 1; margin-top: 8px; letter-spacing: -.03em; }
    .bento-v.g { color: #4ade80; }
    .bento-sub { font-size: 14px; color: rgba(255,255,255,.4); margin-top: 8px; display: flex; align-items: center; gap: 5px; }
    .bento-sub.up { color: #4ade80; font-weight: 600; }
    .bento-sec .ui-bar { border-color: rgba(255,255,255,.08); }
    .bento-sec .ui-title { color: rgba(255,255,255,.7); }
    .bento-sec .ui-pill { background: rgba(22,163,74,.15); color: #4ade80; }
    .bento-sec .ui-row { background: rgba(255,255,255,.04); }
    .bento-sec .ui-row.hl { background: rgba(22,163,74,.1); border-color: rgba(22,163,74,.2); }
    .bento-sec .ui-line { background: rgba(255,255,255,.1); }
    .bento-sec .ui-tag { background: rgba(22,163,74,.15); color: #4ade80; }
    .bento-sec .ui-tag.gray { background: rgba(255,255,255,.06); color: rgba(255,255,255,.4); }
    .bento-sec h2 { color: #14120E; }
    .bento-sec .s-lead { color: #6B7280; }
    .bento-sec .tag { color: #15803D !important; }
    .bento-sec .ui-bars i { background: rgba(255,255,255,.1); }
    .bento-sec .ui-bars i.g { background: linear-gradient(180deg,#4ade80,#16a34a); }
    .bento-sec .ui-prog { background: rgba(255,255,255,.08); }

    .bento-context {
      display: flex; align-items: center; justify-content: center;
      gap: 16px; margin-bottom: 40px;
    }
    .bento-ctx-item {
      display: flex; align-items: center; gap: 7px;
      font-size: 14px; font-weight: 500; color: rgba(255,255,255,.45);
    }
    .bento-ctx-dot {
      width: 3px; height: 3px; border-radius: 50%;
      background: rgba(255,255,255,.2);
    }

    /* ─── STICKY SCROLL BLOCKS ─── */
    /* Scroll area — tall container, JS sets exact height */
    .bento-scroll-area { position: relative; }

    /* Sticky panel — sticks in viewport */
    .bento-sticky {
      position: sticky;
      top: 80px;
      z-index: 10;
    }

    /* Layout: left label + right cards */
    .bento-layout {
      display: grid; grid-template-columns: 300px 1fr; gap: 48px;
      align-items: start;
    }

    /* Left: category info */
    .scroll-label-icon {
      width: 44px; height: 44px; border-radius: 12px;
      background: #101A2B; border: 1px solid rgba(17,24,39,.10);
      display: flex; align-items: center; justify-content: center;
      margin-bottom: 20px;
    }
    .scroll-label-num {
      font-size: 14px; font-weight: 700; color: rgba(17,24,39,.28);
      letter-spacing: .08em; text-transform: uppercase; margin-bottom: 12px;
      font-family: var(--font-body);
      transition: color .3s;
    }
    .scroll-label h3 {
      font-size: 24px; font-weight: 600; color: #14120E;
      line-height: 1.25; letter-spacing: -.02em;
      transition: opacity .3s;
    }
    .scroll-label p {
      font-size: 15px; color: #6B7280; line-height: 1.7;
      margin-top: 12px; max-width: 270px;
      transition: opacity .3s;
    }

    /* Progress dots */
    .bento-dots {
      display: flex; gap: 8px; margin-top: 32px;
    }
    .bento-dot {
      width: 8px; height: 8px; border-radius: 50%;
      background: rgba(17,24,39,.14);
      transition: background .3s, transform .3s;
    }
    .bento-dot.active {
      background: #16A34A; transform: scale(1.3);
    }

    /* Right: cards panel */
    .scroll-cards-wrap { position: relative; min-height: 400px; }
    .scroll-panel {
      display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
      align-content: start;
      opacity: 0; position: absolute; inset: 0;
      pointer-events: none;
      transition: opacity .35s ease, transform .35s ease;
      transform: translateY(16px);
    }
    .scroll-panel.active {
      opacity: 1; position: relative;
      pointer-events: auto;
      transform: translateY(0);
    }
    .scroll-panel .bento-card.wide { grid-column: span 2; }

    @media (max-width: 900px) {
      .bento-layout { grid-template-columns: 1fr; gap: 24px; }
      .bento-sticky { position: static; }
      .bento-scroll-area { height: auto !important; }
      .bento-dots { display: none; }
      .bento-mobile-tabs {
        display: flex; gap: 6px; flex-wrap: wrap; padding-bottom: 20px;
      }
      .bento-mob-tab {
        padding: 8px 16px; border-radius: 10px;
        font-size: 14px; font-weight: 600;
        border: 1px solid rgba(255,255,255,.1);
        background: rgba(255,255,255,.04); color: rgba(255,255,255,.4);
        cursor: pointer; transition: all .2s;
      }
      .bento-mob-tab.active {
        background: rgba(255,255,255,.12); color: #F9FAFB;
        border-color: rgba(255,255,255,.2);
      }
      .scroll-panel { position: relative; display: none; opacity: 1; transform: none; }
      .scroll-panel.active { display: grid; }
    }
    @media (min-width: 901px) {
      .bento-mobile-tabs { display: none; }
    }
    @media (max-width: 560px) {
      .scroll-panel { grid-template-columns: 1fr; }
      .scroll-panel .bento-card.wide { grid-column: auto; }
    }
    .bento-card-head {
      display: flex; align-items: center; gap: 8px;
      padding-bottom: 12px; margin-bottom: 12px;
      border-bottom: 1px solid rgba(255,255,255,.08);
    }
    .bento-card-head .ui-pill { margin-left: auto; }
    .bento-card-icon {
      width: 36px; height: 36px; border-radius: 10px;
      background: rgba(255,255,255,.06);
      display: flex; align-items: center; justify-content: center;
      margin-bottom: 14px;
    }
    .bento-alert-list { display: flex; flex-direction: column; gap: 8px; }
    .bento-alert {
      display: flex; align-items: start; gap: 10px;
      padding: 10px 12px; border-radius: 10px;
      background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.06);
      font-size: 14px; color: rgba(255,255,255,.55); line-height: 1.5;
    }
    .bento-alert.warn { border-color: rgba(251,191,36,.2); }
    .bento-alert.warn .alert-dot { background: #FBBF24; box-shadow: 0 0 0 3px rgba(251,191,36,.15); }
    .bento-alert.ok .alert-dot { background: #4ade80; box-shadow: 0 0 0 3px rgba(74,222,128,.15); }
    .alert-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; margin-top: 6px; }
    .bento-alert strong { color: rgba(255,255,255,.75); font-weight: 600; }

    .bento-map {
      position: relative; border-radius: 12px; overflow: hidden;
      background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.06);
      height: 160px; margin-top: 4px;
    }
    .map-grid {
      position: absolute; inset: 0;
      background:
        linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
      background-size: 28px 28px;
    }
    .map-pin {
      position: absolute; width: 10px; height: 10px; border-radius: 50%;
      background: #4ade80; box-shadow: 0 0 0 4px rgba(74,222,128,.15), 0 0 12px rgba(74,222,128,.2);
    }
    .map-pin.idle { background: rgba(255,255,255,.2); box-shadow: 0 0 0 3px rgba(255,255,255,.06); }
    .map-pin::after {
      content: attr(data-label); position: absolute; top: -20px; left: 50%; transform: translateX(-50%);
      font-size: 9px; font-weight: 600; color: rgba(255,255,255,.4); white-space: nowrap;
      background: rgba(0,0,0,.4); padding: 1px 5px; border-radius: 4px;
    }
    .map-region {
      position: absolute; border: 1px dashed rgba(255,255,255,.06); border-radius: 50%;
    }

    .fleet-row {
      display: flex; align-items: center; gap: 10px;
      padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,.06);
    }
    .fleet-row:last-child { border-bottom: none; }
    .fleet-icon {
      width: 28px; height: 28px; border-radius: 8px;
      background: rgba(255,255,255,.06);
      display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    }
    .fleet-name { font-size: 13px; color: rgba(255,255,255,.6); flex: 1; }
    .fleet-status {
      font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
      padding: 3px 8px; border-radius: 6px;
    }
    .fleet-status.active { background: rgba(74,222,128,.12); color: #4ade80; }
    .fleet-status.free { background: rgba(255,255,255,.06); color: rgba(255,255,255,.35); }
    .fleet-status.service { background: rgba(251,191,36,.12); color: #FBBF24; }

    .bento-insight {
      font-size: 15px; line-height: 1.7; color: rgba(255,255,255,.5);
      padding: 16px 0 0;
    }
    .bento-insight strong { color: #F9FAFB; font-weight: 600; }
    .bento-insight .num { color: #4ade80; font-weight: 700; font-family: var(--font-body); }

    .wniosek-row {
      display: flex; align-items: center; gap: 10px;
      padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,.06);
    }
    .wniosek-row:last-child { border-bottom: none; }
    .wniosek-av {
      width: 26px; height: 26px; border-radius: 50%;
      background: rgba(255,255,255,.08); display: flex; align-items: center; justify-content: center;
      font-size: 10px; font-weight: 600; color: rgba(255,255,255,.5); flex-shrink: 0;
    }
    .wniosek-info { flex: 1; }
    .wniosek-type { font-size: 13px; color: rgba(255,255,255,.6); }
    .wniosek-meta { font-size: 10px; color: rgba(255,255,255,.3); margin-top: 1px; }

    .bento-sec .ui { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.08); box-shadow: 0 2px 10px rgba(0,0,0,.12); }
    .bento-sec .ui-num { color: #F9FAFB; }
    .bento-sec .ui-tile { background: rgba(255,255,255,.04); }
    .bento-sec .ui-tile .k { color: rgba(255,255,255,.4); }
    .bento-sec .ui-tile .v { color: #F9FAFB; }
    .bento-sec .ui-tile .v.g { color: #4ade80; }

    /* ─── Sub-modules grid (pod-moduły) ─── */
    .subgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 8px; }
    .subcard {
      background: #fff; border: 1px solid rgba(17,24,39,.08); border-radius: 16px; padding: 22px;
      box-shadow: 0 2px 8px rgba(0,0,0,.04);
      transition: transform .22s ease, box-shadow .22s ease;
    }
    .subcard:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(0,0,0,.08); }
    .subcard .ic {
      width: 38px; height: 38px; border-radius: 11px; background: rgba(22,163,74,.08);
      display: flex; align-items: center; justify-content: center; margin-bottom: 14px;
    }
    .subcard h4 { font-family: var(--font-body); font-size: 17px; font-weight: 600; color: var(--ink); letter-spacing: -.01em; }
    .subcard p { font-size: 14px; color: var(--muted); line-height: 1.6; margin-top: 7px; }
    .subcard .sc-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 12px; }
    .sc-tag { font-size: 10px; font-weight: 600; padding: 3px 8px; border-radius: 6px; background: rgba(17,24,39,.04); color: var(--muted); }

    /* ─── Integration flow ─── */
    .flow {
      display: flex; align-items: stretch; gap: 0; margin-top: 8px;
      background: #fff; border: 1px solid rgba(17,24,39,.08); border-radius: 22px; padding: 14px;
      box-shadow: 0 2px 12px rgba(13,17,23,.03); overflow-x: auto;
    }
    @media (max-width: 900px) {
      .hero-visual-wrap .dashboard-shell { transform: none; }
      .hero-visual-wrap:hover .dashboard-shell { transform: none; }
      .hero-visual-wrap::before { display: none; }
      .bento-context { flex-wrap: wrap; }
      .mtab-panel.active { grid-template-columns: 1fr; }
      .ba-grid { grid-template-columns: 1fr; }
      .ba-arrow { transform: rotate(90deg); margin: 0 auto; }
      .bento { grid-template-columns: 1fr 1fr; }
      .bento-card.wide { grid-column: span 2; }
      .bento-card.tall { grid-row: auto; }
      .subgrid { grid-template-columns: 1fr 1fr; }
    }
    @media (max-width: 560px) {
      .hero h1 { font-size: 32px; }
      .bento-context { gap: 10px; justify-content: center; }
      .bento-ctx-dot { display: none; }
      .float-badge { display: none; }
      .bento { grid-template-columns: 1fr; }
      .bento-card.wide { grid-column: auto; }
      .subgrid { grid-template-columns: 1fr; }
    }

    /* ─── MOBILE STICKY CTA ─── */
    .mobile-cta {
      display: none;
      position: fixed; bottom: 0; left: 0; right: 0; z-index: 999;
      padding: 14px 16px calc(14px + env(safe-area-inset-bottom));
      background: rgba(255,255,255,.95);
      backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
      border-top: 1px solid rgba(17,24,39,.06);
      box-shadow: 0 -8px 32px rgba(0,0,0,.08);
      transform: translateY(100%);
      transition: transform .35s ease;
    }
    .mobile-cta.visible { transform: translateY(0); }
    .mobile-cta-inner {
      display: flex; align-items: center; gap: 14px;
    }
    .mobile-cta-text {
      flex: 1; min-width: 0;
    }
    .mobile-cta-text strong {
      display: block; font-size: 15px; font-weight: 700; color: #111827;
      letter-spacing: -.01em; line-height: 1.2;
    }
    .mobile-cta-text span {
      font-size: 14px; color: #6B7280; line-height: 1.3;
    }
    .mobile-cta button {
      flex-shrink: 0; padding: 12px 20px;
      border-radius: 12px; border: none; cursor: pointer;
      background: #111827;
      color: #fff; font-family: var(--font-body);
      font-size: 14px; font-weight: 600; letter-spacing: -.01em;
      display: flex; align-items: center; gap: 8px;
      box-shadow: 0 2px 8px rgba(17,24,39,.15);
      transition: background .2s, transform .2s;
    }
    .mobile-cta button:active { transform: scale(.97); }
    .mobile-cta button .mc-dot {
      width: 6px; height: 6px; border-radius: 50%;
      background: #16A34A; box-shadow: 0 0 6px rgba(22,163,74,.5);
    }
    @media (max-width: 768px) {
      .mobile-cta { display: block; }
      footer { padding-bottom: calc(80px + env(safe-area-inset-bottom)); }
    }
    @keyframes wzIn { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }

    @media (max-width: 560px) {
    }

    /* ─── RESET z Tailwind Preflight ─── */
    :where(html){line-height:1.5;-webkit-text-size-adjust:100%}
    :where(body){margin:0;line-height:inherit}
    :where(blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre){margin:0}
    :where(svg){display:block;vertical-align:middle}
    :where(button,input,optgroup,select,textarea){font-family:inherit;font-size:100%;font-weight:inherit;line-height:inherit;color:inherit;margin:0;padding:0}
    :where(button,select){text-transform:none}
    :where(button,[type=button],[type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}
    :where(h1,h2,h3,h4,h5,h6){font-size:inherit;font-weight:inherit}
    :where(ol,ul,menu){list-style:none;margin:0;padding:0}
    :where(a){color:inherit;text-decoration:inherit}
    :where(img,video,canvas,iframe,svg){display:block;max-width:100%}
    :where(input,textarea)::placeholder{color:#9ca3af;opacity:1}
    /* ─── UTILITY (zastępuje Tailwind CDN — tylko klasy faktycznie użyte) ─── */
    .flex{display:flex}
    .inline-flex{display:inline-flex}
    .grid{display:grid}
    .block{display:block}
    .hidden{display:none}
    .flex-col{flex-direction:column}
    .flex-shrink-0,.shrink-0{flex-shrink:0}
    .items-center{align-items:center}
    .items-start{align-items:flex-start}
    .justify-between{justify-content:space-between}
    .justify-center{justify-content:center}
    .grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}

    .gap-1{gap:.25rem}
    .gap-2{gap:.5rem}
    .gap-2\.5{gap:.625rem}
    .gap-3{gap:.75rem}
    .gap-4{gap:1rem}
    .space-y-4>*+*{margin-top:1rem}

    .mx-auto{margin-left:auto;margin-right:auto}
    .mb-5{margin-bottom:1.25rem}
    .mt-2{margin-top:.5rem}
    .mt-3{margin-top:.75rem}
    .mt-6{margin-top:1.5rem}
    .mt-\[3px\]{margin-top:3px}

    .pl-7{padding-left:1.75rem}
    .pr-2{padding-right:.5rem}
    .pt-1{padding-top:.25rem}
    .pt-4{padding-top:1rem}
    .px-2{padding-left:.5rem;padding-right:.5rem}
    .px-3\.5{padding-left:.875rem;padding-right:.875rem}
    .px-5{padding-left:1.25rem;padding-right:1.25rem}
    .px-6{padding-left:1.5rem;padding-right:1.5rem}
    .py-1\.5{padding-top:.375rem;padding-bottom:.375rem}
    .py-2{padding-top:.5rem;padding-bottom:.5rem}
    .py-2\.5{padding-top:.625rem;padding-bottom:.625rem}
    .py-4{padding-top:1rem;padding-bottom:1rem}

    .w-4{width:1rem}.w-8{width:2rem}.w-11{width:2.75rem}.w-16{width:4rem}.w-full{width:100%}
    .h-4{height:1rem}.h-8{height:2rem}.h-10{height:2.5rem}.h-11{height:2.75rem}.h-16{height:4rem}
    .h-\[52px\]{height:52px}

    .absolute{position:absolute}
    .relative{position:relative}
    .sticky{position:sticky}
    .top-0{top:0}
    .top-4{top:1rem}
    .right-4{right:1rem}
    .z-50{z-index:50}

    .rounded{border-radius:.25rem}
    .rounded-full{border-radius:9999px}
    .rounded-\[10px\]{border-radius:10px}
    .rounded-\[12px\]{border-radius:12px}
    .border-gray-300{border-color:#d1d5db}

    .text-center{text-center:center;text-align:center}
    .text-\[11px\]{font-size: 13px}
    .text-\[12px\]{font-size: 13px}
    .text-\[13px\]{font-size: 14px}
    .text-\[14px\]{font-size: 15px}
    .text-\[15px\]{font-size: 16px}
    .text-\[23px\]{font-size: 23px}
    .text-gray-400{color:#9ca3af}
    .text-gray-500{color:#6b7280}
    .text-gray-900{color:#111827}
        .text-green-600{color:#16a34a}
    .text-red-500{color:#ef4444}
    .font-bold{font-weight:700}
    .font-medium{font-weight:500}
    .font-display{font-family:var(--font-body)}
    .leading-none{line-height:1}
    .leading-\[1\.6\]{line-height:1.6}
    .tracking-\[-0\.05em\]{letter-spacing:-.05em}
    .underline{text-decoration-line:underline}

    .cursor-pointer{cursor:pointer}
    .select-none{user-select:none}
    .transition-colors{transition-property:color,background-color,border-color;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}
    .accent-\[\#16A34A\]{accent-color:#16A34A}

    .hover\:bg-gray-50:hover{background-color:#f9fafb}
    .hover\:bg-gray-100:hover{background-color:#f3f4f6}
    .hover\:text-gray-900:hover{color:#111827}
    .hover\:text-green-700:hover{color:#15803d}
    .focus\:ring-green-500:focus{outline:2px solid #22c55e;outline-offset:2px}

    @media (min-width:640px){ .sm\:inline-flex{display:inline-flex} }
    @media (min-width:1024px){ .lg\:flex{display:flex} .lg\:hidden{display:none} }

    .fld-err {
      display: none; align-items: center; gap: 6px;
      font-size: 14px; font-weight: 500; color: #DC2626;
      margin-top: 6px; line-height: 1.4;
    }
    .fld-err.on { display: flex; }
    .modal-input.bad, input.bad, textarea.bad {
      border-color: #DC2626 !important;
      background: #FEF2F2 !important;
    }
    .fld-err::before {
      content: ''; width: 14px; height: 14px; flex-shrink: 0;
      background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23DC2626' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5M12 16h.01'/%3E%3C/svg%3E");
    }

    h1,h2,h3,h4,h5,h6,button,.btn-p,.btn-s,.btn-hero,.btn-ghost,.btn-glow,
    .mtab-btn,.mobile-cta button,.font-display{font-family:var(--font-display)}
    .hero { padding: 156px 0 76px; background: #0c1212; }
    .hero::before, .hero-beam { display: none; }
    .hero::after { background: radial-gradient(ellipse 60% 80% at 85% 40%, rgba(35,88,66,.14), transparent 75%); }
    .hero > .wrap { width: min(1380px, calc(100% - 80px)); grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: 64px; min-height: 0; }
    .hero-text > .tag { padding: 0; border: 0; background: none; text-transform: none; letter-spacing: 0; font-size: 14px; color: #bacac2 !important; margin-bottom: 22px; }
    .hero h1 { letter-spacing: -.025em; font-weight: 600 !important; }
    .hero h1 em { background: none; -webkit-text-fill-color: #70d99b; color: #70d99b; line-height: inherit; margin: 0; }
    .hero h1 .h1-dot { color: #70d99b; }
    .hero-sub { margin-top: 24px; text-wrap: pretty; }
    .hero-actions { gap: 12px; }
    .hero-actions .btn-p, .hero-actions .btn-s { padding: 14px 18px; font-size: 15px; letter-spacing: 0; border-radius: 12px; min-height: 50px; }
    .hero-actions .btn-p { background: #159447; box-shadow: none; }
    .hero-actions .btn-p::after { display: none; }
    .hero-actions .btn-p:hover { background: #187c40; box-shadow: none; transform: none; }
    .hero-actions .btn-s { background: transparent; border: 1px solid #3b4841; box-shadow: none; }
    .hero-meta { margin-top: 26px; padding-top: 22px; border-top: 1px solid #26352c; }
    .hero-fact { line-height: 1.5; }
    .hero-visual-wrap { opacity: 1; transform: none; }
    .hero-visual-wrap::before { display: none; }
    .hero-visual-wrap .dashboard-shell { border-radius: 18px; border: 1px solid #39463f; }
    .hero .dash-topbar { padding: 10px 16px; background: #eef2ef; gap: 12px; }
    .hero .dash-url { width: auto; flex: 1; max-width: 280px; background: none; color: #526159; justify-content: center; }
    .hero .dash-dot { width: 8px; height: 8px; background: #bcc7c0; }
    .hero-visual-wrap > p { color: #a4b4aa !important; font-size: 12px !important; }
    @media (max-width: 1200px) {
      .hero > .wrap { gap: 36px; width: calc(100% - 64px); }
      .hero h1 { font-size: 40px; }
      .hero-actions { flex-direction: column; align-items: flex-start; }
    }
    @media (max-width: 1050px) {
      .hero { padding: 138px 0 64px; }
      .hero > .wrap { grid-template-columns: minmax(0,1fr); gap: 40px; }
      .hero-text { max-width: 660px; text-align: left; margin: 0; }
      .hero h1, .hero-sub { margin-left: 0; }
      .hero-actions { flex-direction: row; justify-content: flex-start; }
      .hero-meta { justify-content: start; }
      .hero-visual-wrap { width: 100%; margin: 0; }
    }
    @media (max-width: 640px) {
      .hero { padding: 112px 0 44px; }
      .hero > .wrap { width: calc(100% - 36px); gap: 30px; }
      .hero h1 { font-size: 34px !important; max-width: 17ch; }
      .hero-sub { font-size: 16px; max-width: none; }
      .hero-actions { flex-direction: column; align-items: stretch; }
      .hero-actions .btn-s { width: 100%; }
      .hero .dash-topbar { padding: 8px 10px; }
      .hero .dash-url { font-size: 10px; }
      .hero-text > .tag { font-size: 12px; }
    }
    .cta-final { margin-top: 0; padding: 48px 0 56px; border-radius: 0; }
    .cta-box { background: #10241b; border: 1px solid #264333; border-radius: 24px; text-align: left; }
    .cta-box-bg, .cta-float { display: none; }
    .cta-box-inner { display: grid; align-items: center; }
    .cta-box-inner > span { margin-bottom: 0 !important; width: fit-content; }
    .cta-box h2 { margin: 0; line-height: 1.25; letter-spacing: -.02em; }
    .cta-box-inner > p { grid-column: 1; margin: 0; max-width: 50ch; color: #b9cabf; font-size: 16px; }
    .cta-box .cta-btns { grid-column: 2; grid-row: 2 / span 2; margin: 0; justify-content: center; }
    .cta-box-inner > p:last-child { grid-column: 2; text-align: center; color: #b9cabf !important; margin-top: 0 !important; }
    footer { margin-top: 0; padding: 48px 0 28px; background: #f5f7f5; }
    .footer-top { gap: 32px; grid-template-columns: minmax(0,1.5fr) repeat(3,minmax(0,1fr)); }
    .footer-col-title { color: #526159; letter-spacing: .04em; margin-bottom: 8px; }
    .footer-col { gap: 8px; }
    .footer-col a { font-size: 15px; min-height: 36px; display: inline-flex; align-items: center; }
    .footer-word { font-size: 64px; margin: 36px 0 24px; }
    .footer-bottom { color: #59675e; padding-top: 20px; }
    @media (max-width: 900px) {
      .cta-box { padding: 32px; }
      .cta-box-inner { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
      .cta-box .cta-btns { justify-content: flex-start; }
      .footer-top { grid-template-columns: repeat(2,minmax(0,1fr)); }
    }
    @media (max-width: 560px) {
      .cta-box { padding: 28px 22px; }
      .cta-box h2 { font-size: 26px !important; }
      .cta-box .cta-btns { width: 100%; }
      .footer-top { grid-template-columns: 1fr; }
      .footer-word { font-size: 54px; }
    }
    #wdrozenie .s-head h2, #faq .s-head h2 { font-size: clamp(28px,3vw,38px); line-height: 1.25; letter-spacing: -.025em; }
    #wdrozenie .s-head, #faq .s-head { margin-bottom: 36px; }
    .process-grid > div { padding: 28px !important; border: 1px solid #dde5df !important; border-radius: 20px !important; box-shadow: none !important; gap: 18px !important; }
    .process-grid > div > span { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 14px; background: #edf6ef; color: #217844 !important; font-size: 22px !important; letter-spacing: 0 !important; }
    .process-grid > div > p { color: #526159 !important; font-size: 16px !important; }
    .process-grid > div > div { min-height: 42px; border-top: 1px solid #e9eeeb; padding-top: 16px !important; color: #59685f !important; }
    .faq-list { max-width: 880px; gap: 12px; }
    .faq-item { border-color: #dfe5e1; border-radius: 16px; }
    .faq-trigger { padding: 22px 26px; font-size: 16px; line-height: 1.5; }
    .faq-icon { background: #f0f5f1; color: #36704a; }
    .faq-item.open { border-color: #9dc7aa; background:#fcfefc; box-shadow:var(--surface-shadow); }
    .faq-item.open .faq-icon { background: #187c40; }
    .faq-body { padding-right: 76px; padding-left: 26px; color: #526159; line-height: 1.75; }
    .faq-item.open .faq-body { max-height: none; }
    .faq-trigger:focus-visible, .demo-cta-row a:focus-visible, .demo-cta-row button:focus-visible { outline: 3px solid #58b776; outline-offset: -4px; }
    .demo-card { }
    .demo-left > .tag { align-self: flex-start; }
    .demo-left h2 { margin-top: 20px; }
    .demo-left p { max-width: 44ch; }
    .demo-cta-row .btn-hero { background: #187c40; border-color: #187c40; color: #fff !important; box-shadow: none; border-radius: 999px; }
    .demo-cta-row .btn-hero-icon { background: rgba(255,255,255,.14); }
    .demo-cta-row .btn-ghost { border-radius: 12px; box-shadow: none; }
    .demo-trust { gap: 10px 16px; font-size: 13px; font-weight: 500; margin-top: 24px; }
    .ag-item { border-color: #33443a; gap: 16px; }
    .ag-time { font-size: 12px; }
    .fit-section { border-radius: 26px; box-shadow: 0 16px 36px -24px rgba(13,17,23,.35); }
    .fit-inner { padding: 48px; }
    .fit-top { text-align: left; margin-bottom: 32px; }
    .fit-top h2 { font-size: clamp(28px,3vw,38px); line-height: 1.25; max-width: 28ch; margin-left: 0; letter-spacing: -.025em; }
    .fit-top p { color: #bfcbc5; max-width: 60ch; margin-left: 0; font-size: 16px; }
    .fit-grid { border-radius: 18px; }
    .fit-card { padding: 26px; }
    .fit-card p { color: #bcc8c1; font-size: 15px; }
    .fit-card-ico { color: #78d99c; border-color: #3b6550; }
    .hero > .wrap { align-items: center; }
    .hero h1 { font-size: clamp(40px,3.2vw,48px); max-width: 19ch; line-height: 1.16; text-wrap: balance; }
    .hero-sub { font-size: 17px; line-height: 1.75; max-width: 52ch; color: #bec9c3; }
    .hero-actions { margin-top: 30px; }
    .hero-meta { gap: 12px; }
    .hero-fact { font-size: 13px; color: #c1cec6; }
    .hero-visual-wrap .dashboard-shell { border-color: #4a5c51; box-shadow: 0 18px 48px -22px rgba(0,0,0,.5); }
    @media (max-width: 900px) {
      .demo-card { grid-template-columns: 1fr; }
      .demo-left, .demo-right { padding: 32px; }
      .fit-inner { padding: 32px; }
      .process-grid { gap: 14px !important; }
      .process-grid > div { padding: 22px !important; }
    }
    @media (max-width: 640px) {
      .hero h1 { font-size: 34px; text-wrap: pretty; }
      .hero-sub { font-size: 16px; }
      .fit-inner { padding: 28px 22px; }
      .fit-top h2 { font-size: 28px; }
      .fit-card { padding: 22px; }
      .faq-trigger { padding: 18px; font-size: 15px; }
      .faq-body { padding-right: 18px; padding-left: 18px; font-size: 15px; }
      .ag-item { padding: 16px; grid-template-columns: 32px 1fr; gap: 12px; }
      .ag-num { width: 32px; height: 32px; }
    }
    #mobile-menu.nav-bar { border-radius: 24px !important; }
    .demo-card { grid-template-columns: 1.05fr 1fr; min-height: 0; padding: 12px; gap: 8px; border-radius: 28px; border-color:var(--surface-line); box-shadow:var(--surface-shadow); }
    .demo-left { padding: 30px; }
    .demo-left h2 { font-size: 30px; line-height: 1.25; }
    .demo-right { background: #f2f6f3; border-radius: 18px; padding: 28px; }
    .demo-right::before { display: none; }
    .agenda-list { gap: 0; }
    .ag-item { background: transparent; border: 0; border-bottom: 1px solid #dbe5de; border-radius: 0; padding: 18px 0; align-items: start; }
    .ag-item:first-child { padding-top: 0; }
    .ag-item:last-child { border-bottom: 0; }
    .ag-item:hover { background: transparent; border-color: #dbe5de; }
    .ag-num { background: #e0ece3; color: #267143; width: 32px; height: 32px; font-size: 14px; }
    .ag-title { color: #182c20; }
    .ag-body { color: #53655a; }
    .ag-time { text-align: left; margin-top: 6px; color: #586e60; }
    .demo-cta-row .btn-ghost { border: 0; padding-left: 4px; padding-right: 4px; background: transparent; }
    .fin-sec .fin-bg { opacity: .2; }
    .fin-sec .wrap { max-width: 1040px; }
    .fin-sec .s-head { text-align: left; margin-bottom: 32px; }
    .fin-sec .s-head h2 { font-size: clamp(28px,3vw,38px); line-height: 1.25; max-width: 27ch; margin-left: 0; }
    .fin-sec .s-lead { margin-left: 0; max-width: 60ch; font-size: 16px; }
    .fin-sec .fin-table { max-width: none !important; border-color: #dce5df !important; border-radius: 22px !important; }
    .fin-table > div { padding: 22px 26px !important; display: flex; flex-direction: column; gap: 7px; }
    .fin-table > div > span + span { margin-left: 0 !important; line-height: 1.5; }
    .cta-box { padding: 40px 44px; }
    .cta-box-inner { grid-template-columns: minmax(0,1.4fr) minmax(260px,1fr); gap: 14px 40px; }
    .cta-box-inner > span { grid-column: 1; }
    .cta-box h2 { font-size: 32px; max-width: 25ch; }
    .cta-action { grid-column: 2; grid-row: 1 / span 3; display: flex; flex-direction: column; align-items: center; gap: 14px; padding-left: 32px; border-left: 1px solid #355043; }
    .cta-action > p { margin: 0 !important; font-size: 12px !important; color: #bacdc1 !important; text-align: center; line-height: 1.6; }
    .cta-action button { border-radius: 999px !important; box-shadow: none !important; }
    .cta-action button > span { border-radius: 50% !important; background: #187c40 !important; }
    @media (max-width: 900px) {
      .demo-card { grid-template-columns: 1fr; }
      .cta-box-inner { display: flex; }
      .cta-action { border-left: 0; padding: 8px 0 0; align-items: flex-start; }
      .cta-action > p { text-align: left; }
    }
    @media (max-width: 640px) {
      .demo-card { padding: 8px; }
      .demo-left { padding: 22px 16px !important; }
      .demo-right { padding: 24px 18px !important; }
      .demo-left h2 { font-size: 26px; }
      .fin-table > div { border-right: 0 !important; padding: 20px !important; }
      .cta-box { padding: 28px 24px; }
      .cta-action { width: 100%; }
    }
    body :is(.hero-actions, .demo-cta-row, .nav-bar, footer, .cta-action, .mobile-cta) :is(.btn-p, .btn-s, .btn-hero, .btn-ghost, button[onclick*="openModal"]) {
      align-items: center; justify-content: space-between; gap: 12px !important;
      min-height: 50px; padding: 6px 6px 6px 20px !important;
      border: 1px solid #e1e7e3 !important; border-radius: 999px !important;
      background: #fff !important; color: #111827 !important;
      font-size: 15px !important; font-weight: 600; line-height: 1.4;
      box-shadow: none !important; text-decoration: none;
      transition: border-color .2s, box-shadow .2s;
    }
    body :is(.hero-actions, .demo-cta-row, .nav-bar, footer, .cta-action, .mobile-cta) :is(.btn-p, .btn-s, .btn-hero, .btn-ghost, button[onclick*="openModal"]):hover {
      border-color: #9bc5aa !important; box-shadow: 0 4px 14px rgba(20,80,42,.1) !important;
      transform: none !important;
    }
    body :is(.hero-actions, .demo-cta-row, .nav-bar, footer, .cta-action, .mobile-cta) :is(.btn-p, .btn-s, .btn-hero, .btn-ghost, button[onclick*="openModal"]):focus-visible {
      outline: 3px solid #70d99b; outline-offset: 4px;
    }
    body :is(.hero-actions, .demo-cta-row, .nav-bar, footer, .cta-action, .mobile-cta) :is(.btn-glow-icon, .btn-hero-icon, .btn-ghost-icon, .action-icon, .arw),
    body .cta-action button > span {
      display: inline-flex; align-items: center; justify-content: center;
      width: 36px !important; height: 36px !important; flex: 0 0 36px;
      border-radius: 50% !important; background: #187c40 !important; color: #fff !important;
      margin: 0 !important; box-shadow: none !important; transform: none !important;
    }
    body .hero-actions .arw { padding: 10px; box-sizing: border-box; }
    body :is(.btn-glow-icon, .btn-hero-icon, .btn-ghost-icon, .action-icon) svg { width: 14px; height: 14px; stroke: #fff; }
    body .btn-glow::before, body .btn-glow::after, body .hero-actions .btn-p::after { display: none; }
    :root { --heading-section: 38px; --heading-module: 24px; --heading-card: 18px; --surface-line:#dfe7e1; --surface-shadow:0 8px 28px -18px rgba(23,54,35,.2); --section-space:72px; }
    body section :is(.s-head, .fit-top, .demo-left, .cta-box) h2 {
      font-family: var(--font-display); font-size: var(--heading-section) !important;
      font-weight: 700 !important; line-height: 1.25 !important; letter-spacing: -.025em !important;
      text-wrap: pretty;
    }
    body :is(.mtab-text, .scroll-label) h3 {
      font-family: var(--font-display); font-size: var(--heading-module); font-weight: 700;
      line-height: 1.3; letter-spacing: -.02em;
    }
    body :is(.fit-card, .outcome-card, .process-grid) h3 {
      font-family: var(--font-display); font-size: var(--heading-card) !important; font-weight: 700;
      line-height: 1.35; letter-spacing: -.015em;
    }
    @media (max-width: 640px) {
      :root { --heading-section: 28px; --heading-module: 22px; --heading-card: 18px; }
    }

/* Before / after: product examples */
.comparison-details { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; margin-top:32px; }
.comparison-detail { background:#fff; border:1px solid #dce5df; border-radius:22px; overflow:hidden; padding:26px; border-color:var(--surface-line); box-shadow:var(--surface-shadow); display:flex; flex-direction:column; }
.comparison-detail h3 { font-family:var(--font-display); font-size:var(--heading-card); font-weight:700; line-height:1.35; margin-bottom:16px; }
.comparison-detail p { font-size:15px; line-height:1.7; color:#526159; }
.comparison-detail p strong { display:block; color:#187c40; font-size:12px; letter-spacing:.04em; text-transform:uppercase; margin-bottom:8px; }
.comparison-detail .comparison-before strong { color:#64716a; }
.comparison-detail figure {margin:16px -12px 22px; }
.comparison-detail img,.comparison-overview img { display:block; width:100%; height:auto; border:1px solid #dde5df; border-radius:12px; }
.comparison-detail figcaption,.comparison-overview figcaption,.comparison-note { font-size:12px; line-height:1.6; color:#586b60; margin-top:10px; text-align:center; }
.comparison-note { margin-top:22px; }
.comparison-overview { margin:0; }
.ba-card.after { display:flex; flex-direction:column; justify-content:center; border-color:var(--surface-line); box-shadow:var(--surface-shadow); }
.app-preview .int-photo { width:100%; height:auto !important; object-fit:contain; }
.app-preview .int-card { position:static !important; margin:0; border:0 !important; border-top:1px solid #dce5df !important; border-radius:0 !important; box-shadow:none !important; backdrop-filter:none !important; }
@media(max-width:900px) { .comparison-details { grid-template-columns:1fr; } .comparison-detail figure { max-width:640px; margin:22px auto; } }

.mtab-mockup .preview-caption { position:absolute; bottom:14px; left:12px; right:12px; text-align:center; font-size:12px; line-height:1.5; color:#526159; }
.mtab-mockup.real-screen .mtab-mockup-bg { padding-bottom:42px; padding:24px 20px 48px; }
.app-preview .int-card { padding:28px 32px; background:#fff; }
@media(max-width:640px) { .app-preview .int-card { padding:20px; } }
.mtab-nav{background:#edf2ee;border:1px solid var(--surface-line);border-radius:20px;padding:6px;gap:4px;margin-bottom:28px}
.comparison-detail .comparison-before{min-height:100px}
.comparison-detail figure + p{padding-top:18px;border-top:1px solid #e8eee9;margin-top:auto}
section[id]{scroll-margin-top:112px}
:is(.mtab-btn,.bento-mob-tab,.nav-link):focus-visible{outline:3px solid #66bb83;outline-offset:3px}
@media(max-width:900px){.mtab-btn{padding:11px 14px}.mtab-mockup.real-screen .mtab-mockup-bg{padding:18px 14px 44px}.comparison-detail .comparison-before{min-height:0}}
@media(max-width:640px){:root{--section-space:48px}.s-head{margin-bottom:28px}.s-lead{font-size:16px}.comparison-detail{padding:22px}.ba-card{padding:22px}.mtab-nav{border-radius:16px;justify-content:flex-start}.mtab-btn{min-height:44px}.mtab-mockup.real-screen{min-height:250px}section[id]{scroll-margin-top:96px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.reveal{opacity:1;transform:none;transition:none}*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

/* Finance product showcase */
.fin-sec .s-head { max-width: 760px; text-align: center; margin-inline: auto; }
.fin-sec .s-head h2 { max-width: none; margin-inline: auto; }
.fin-sec .s-lead { max-width: 620px; margin-inline: auto; }
.finance-showcase {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(320px, .65fr);
  gap: 0;
  max-width: 1120px;
  margin: 0 auto;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--surface-line);
  border-radius: 26px;
  box-shadow: var(--surface-shadow);
}
.finance-preview {
  min-width: 0;
  margin: 0;
  padding: 18px;
  background: #edf3ef;
  border-right: 1px solid var(--surface-line);
}
.finance-preview-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 32px;
  padding: 0 4px 12px;
  color: #53645a;
  font-size: 12px;
  font-weight: 600;
}
.finance-preview-bar span { display: inline-flex; align-items: center; gap: 7px; }
.finance-preview-bar i { width: 7px; height: 7px; border-radius: 50%; background: #1ca653; box-shadow: 0 0 0 4px rgba(28,166,83,.1); }
.finance-preview-bar strong { color: #217844; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; }
.finance-preview img {
  width: 100%;
  height: auto;
  border: 1px solid #d7e0da;
  border-radius: 14px;
  box-shadow: 0 14px 30px -22px rgba(17,39,25,.35);
}
.finance-capabilities { display: flex; flex-direction: column; padding: 12px 28px; }
.finance-capability {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 14px;
  align-items: start;
  padding: 22px 0;
  border-bottom: 1px solid #e7ece8;
}
.finance-capability:last-child { border-bottom: 0; }
.finance-capability-no {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 11px;
  background: #edf6ef;
  color: #217844;
  font-size: 11px;
  font-weight: 700;
}
.finance-capability h3 { margin: 1px 0 6px; font-size: 16px; line-height: 1.35; color: var(--ink); }
.finance-capability p { margin: 0; color: #59685f; font-size: 14px; line-height: 1.6; }

@media (max-width: 900px) {
  .finance-showcase { grid-template-columns: 1fr; max-width: 720px; }
  .finance-preview { border-right: 0; border-bottom: 1px solid var(--surface-line); }
  .finance-capabilities { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; }
  .finance-capability:nth-last-child(2) { border-bottom: 0; }
}
@media (max-width: 640px) {
  .finance-showcase { border-radius: 20px; }
  .finance-preview { padding: 10px; }
  .finance-preview-bar { padding: 2px 4px 10px; }
  .finance-preview img { border-radius: 11px; }
  .finance-capabilities { display: flex; padding: 8px 20px; }
  .finance-capability { padding: 18px 0; }
  .finance-capability:nth-last-child(2) { border-bottom: 1px solid #e7ece8; }
}

/* Hero — stronger product presentation */
.hero {
  min-height: 820px;
  display: flex;
  align-items: center;
  padding: 148px 0 92px;
  background: #09110e;
}
.hero::before {
  display: block;
  background:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px) 0 0 / 72px 72px,
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px) 0 0 / 72px 72px;
  opacity: .6;
  mask-image: linear-gradient(to right, rgba(0,0,0,.75), transparent 72%);
  -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,.75), transparent 72%);
}
.hero::after {
  background:
    radial-gradient(ellipse 54% 72% at 78% 42%, rgba(37,138,79,.24), transparent 67%),
    radial-gradient(ellipse 42% 46% at 12% 92%, rgba(31,88,62,.16), transparent 72%),
    linear-gradient(180deg, rgba(255,255,255,.015), transparent 40%);
}
.hero-beam {
  display: block;
  top: auto;
  bottom: 0;
  width: 76%;
  opacity: .55;
}
.hero-beam::after { top: auto; bottom: 0; transform: rotate(180deg); height: 90px; opacity: .45; }
.hero > .wrap {
  width: min(1500px, calc(100% - 96px));
  grid-template-columns: minmax(450px, .78fr) minmax(620px, 1.22fr);
  gap: clamp(48px, 5vw, 92px);
}
.hero-text { max-width: 650px; }
.hero-text > .tag {
  display: inline-flex;
  padding: 8px 13px;
  margin-bottom: 28px;
  border: 1px solid rgba(112,217,155,.22);
  border-radius: 999px;
  background: rgba(112,217,155,.07);
  color: #c9d8d0 !important;
  font-size: 13px;
}
.hero h1 {
  max-width: 15ch;
  font-size: 58px;
  line-height: 1.08;
  letter-spacing: -.04em;
  font-weight: 600 !important;
}
.hero h1 em { color: #73dfa0; -webkit-text-fill-color: #73dfa0; }
.hero-sub {
  max-width: 49ch;
  margin-top: 28px;
  color: #bdcbc4;
  font-size: 18px;
  line-height: 1.72;
}
.hero-actions { margin-top: 34px; }
.hero-actions :is(.btn-p,.btn-s) { min-height: 56px !important; font-size: 16px !important; }
.hero-meta {
  grid-template-columns: 1fr;
  gap: 12px;
  max-width: 540px;
  margin-top: 30px;
  padding-top: 24px;
  border-color: rgba(139,180,155,.22);
}
.hero-fact { color: #c8d6cf; font-size: 13px; }
.hero-fact svg { width: 16px; height: 16px; color: #70d99b; }
.hero-visual-wrap {
  z-index: 2;
  width: calc(100% + 28px);
  margin-left: -10px;
}
.hero-visual-wrap::before {
  display: block;
  left: -8%;
  right: -6%;
  top: -16%;
  bottom: -18%;
  background:
    radial-gradient(ellipse 70% 60% at 52% 44%, rgba(70,196,117,.25), transparent 72%),
    radial-gradient(ellipse 50% 54% at 88% 55%, rgba(58,112,86,.18), transparent 74%);
  filter: blur(8px);
}
.hero-visual-wrap .dashboard-shell {
  position: relative;
  border: 1px solid rgba(174,215,190,.5);
  border-radius: 22px;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.04),
    0 32px 80px -28px rgba(0,0,0,.85),
    0 0 70px -30px rgba(73,210,127,.48);
}
.hero .dash-topbar { min-height: 48px; padding: 10px 18px; }
.hero .dash-screen { background: #eef2ef; }
.hero-live {
  display: block;
  right: auto;
  left: -34px;
  bottom: -34px;
  width: 238px;
  padding: 16px 18px;
  border-radius: 18px;
  background: rgba(15,31,23,.88);
  border-color: rgba(139,210,166,.2);
  box-shadow: 0 24px 54px -22px rgba(0,0,0,.9);
}
.hero-live-row b { color: #dff7e7; }
.hero-live-foot { color: #9fb3a8; }
.hero-visual-wrap > p { margin-top: 18px !important; color: #9eafa6 !important; }

@media (max-width: 1320px) {
  .hero { min-height: 760px; }
  .hero > .wrap { width: calc(100% - 64px); grid-template-columns: minmax(400px,.85fr) minmax(540px,1.15fr); gap: 44px; }
  .hero h1 { font-size: 50px; }
  .hero-live { display: none; }
}
@media (max-width: 1050px) {
  .hero { min-height: 0; padding: 136px 0 76px; }
  .hero > .wrap { grid-template-columns: 1fr; width: min(820px,calc(100% - 48px)); gap: 52px; }
  .hero-text { max-width: 720px; }
  .hero h1 { max-width: 16ch; font-size: 52px; }
  .hero-visual-wrap { width: 100%; margin-left: 0; }
}
@media (max-width: 640px) {
  .hero { padding: 112px 0 52px; }
  .hero > .wrap { width: calc(100% - 32px); gap: 38px; }
  .hero-text > .tag { margin-bottom: 22px; padding: 7px 11px; font-size: 11px; }
  .hero h1 { max-width: 17ch; font-size: 38px !important; line-height: 1.1; }
  .hero-sub { margin-top: 22px; font-size: 16px; line-height: 1.65; }
  .hero-actions { margin-top: 26px; }
  .hero-actions :is(.btn-p,.btn-s) { min-height: 52px !important; font-size: 15px !important; }
  .hero-meta { margin-top: 24px; padding-top: 20px; }
  .hero-visual-wrap .dashboard-shell { border-radius: 16px; }
  .hero .dash-topbar { min-height: 38px; }
}

/* ─── PACKAGES ─── */
.packages-sec {
  position: relative;
  background:
    radial-gradient(circle at 16% 12%, rgba(112,217,155,.12), transparent 34%),
    linear-gradient(180deg, #f7faf8 0%, #f3f7f4 100%);
  border-block: 1px solid rgba(19,71,42,.08);
}
.package-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  align-items: stretch;
}
.package-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 410px;
  padding: 30px;
  overflow: hidden;
  border: 1px solid rgba(17,24,39,.09);
  border-radius: 24px;
  background: rgba(255,255,255,.88);
  box-shadow: 0 18px 50px -38px rgba(17,24,39,.35);
}
.package-card-featured {
  color: #fff;
  border-color: rgba(112,217,155,.25);
  background:
    radial-gradient(circle at 90% 0%, rgba(70,196,117,.25), transparent 40%),
    linear-gradient(145deg, #10271d 0%, #0b1712 100%);
  box-shadow: 0 28px 70px -38px rgba(12,74,38,.65);
}
.package-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 34px;
}
.package-name {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -.03em;
}
.package-count {
  padding: 6px 10px;
  border: 1px solid rgba(17,24,39,.08);
  border-radius: 999px;
  background: rgba(17,24,39,.035);
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}
.package-card-featured .package-count {
  color: #c9ddd1;
  border-color: rgba(112,217,155,.18);
  background: rgba(112,217,155,.08);
}
.package-card h3 {
  max-width: 14ch;
  font-size: 25px;
  line-height: 1.18;
  letter-spacing: -.035em;
}
.package-card > p {
  margin-top: 13px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.65;
}
.package-card-featured > p { color: #aebfb6; }
.package-list {
  display: grid;
  gap: 11px;
  margin: 28px 0 30px;
  padding: 22px 0 0;
  border-top: 1px solid rgba(17,24,39,.08);
}
.package-card-featured .package-list { border-color: rgba(255,255,255,.1); }
.package-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #34413a;
  font-size: 14px;
}
.package-card-featured .package-list li { color: #d8e4dc; }
.package-list li::before {
  content: '✓';
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  border-radius: 999px;
  background: rgba(22,163,74,.1);
  color: #168243;
  font-size: 11px;
  font-weight: 800;
}
.package-card-featured .package-list li::before {
  color: #8ee6b0;
  background: rgba(112,217,155,.12);
}
.package-btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 50px;
  margin-top: auto;
  padding: 6px 7px 6px 18px;
  border: 1px solid rgba(17,24,39,.11);
  border-radius: 999px;
  background: #fff;
  color: #111827;
  font-size: 14px;
  font-weight: 650;
  cursor: pointer;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.package-btn:hover {
  transform: translateY(-2px);
  border-color: rgba(22,163,74,.28);
  box-shadow: 0 12px 30px -20px rgba(17,92,47,.5);
}
.package-btn-icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: #178346;
  color: #fff;
  font-size: 17px;
}
.package-badge {
  position: absolute;
  top: 0;
  right: 26px;
  padding: 8px 13px;
  border-radius: 0 0 12px 12px;
  background: #70d99b;
  color: #0b2417;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.package-note {
  max-width: 660px;
  margin: 24px auto 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
  text-align: center;
}
@media (max-width: 900px) {
  .package-grid { grid-template-columns: 1fr; max-width: 620px; margin-inline: auto; }
  .package-card { min-height: 0; }
}
@media (max-width: 640px) {
  .package-card { padding: 24px; border-radius: 20px; }
  .package-card h3 { font-size: 23px; }
}


/* ─── FLOW 2026 — enterprise polish ─── */
:root {
  --section-space: clamp(72px, 7vw, 104px);
  --heading-section: clamp(34px, 3.2vw, 44px);
  --content-max: 1180px;
}

.wrap { max-width: var(--content-max); }
.s-head { max-width: 760px; margin-bottom: 44px; }
.s-head h2,
.fit-top h2,
.demo-band h2,
.cta-box h2 {
  font-family: var(--font-display);
  font-size: var(--heading-section) !important;
  line-height: 1.16 !important;
  letter-spacing: -.035em !important;
  font-weight: 700 !important;
  text-wrap: balance;
}
.s-lead { max-width: 620px; font-size: 17px; line-height: 1.7; }

header { padding-top: 20px; }
header.compact { padding-top: 12px; }
header .nav-bar {
  background: rgba(12, 24, 18, .72) !important;
  border: 1px solid rgba(255,255,255,.13) !important;
  border-radius: 999px !important;
  backdrop-filter: blur(22px) saturate(1.35);
  -webkit-backdrop-filter: blur(22px) saturate(1.35);
  box-shadow: 0 14px 34px -20px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.07) !important;
}
header.compact .nav-bar { max-width: 58rem; }
.nav-pill { display: none; }
.nav-bar .nav-link.is-active { color: #fff; background: rgba(73, 180, 113, .14); }
#mobile-menu.nav-bar { border-radius: 24px !important; }

.hero h1 em { display: inline; }
.hero-mods { opacity: .82; }
.hero-live { animation: heroFloat 5s ease-in-out infinite; }
@keyframes heroFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }

.bento-sec { padding-bottom: 48px !important; }
.bento-sec .s-head { padding-top: 82px !important; margin-bottom: 46px !important; }
.bento-layout { gap: clamp(30px, 5vw, 72px); }
.scroll-label-num { color: #55c981; }
.scroll-label h3 { max-width: 15ch; }
.scroll-label p { max-width: 34ch; }
.bento-dots { gap: 8px; }
.bento-dot { width: 24px; border-radius: 999px; }
.bento-dot.active { width: 42px; }

.fit-section { border-radius: 30px; }
.fit-inner { padding: clamp(34px, 5vw, 60px); }
.fit-top { margin-bottom: 38px; }
.fit-top h2 { max-width: 24ch; }
.fit-grid { border-radius: 20px; }
.fit-card { min-height: 154px; padding: 26px; }

.ba-section .s-head { max-width: 730px; }
.ba-grid { max-width: 1040px; margin-inline: auto; }
.comparison-details { max-width: 1180px; margin-inline: auto; }
.comparison-detail { transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; }
.comparison-detail:hover { transform: translateY(-3px); border-color: #bfd7c6; box-shadow: 0 18px 40px -28px rgba(23,54,35,.34); }

.demo-section { padding-block: 44px; }
.demo-band {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr);
  align-items: center;
  gap: 44px;
  padding: 42px 46px;
  border: 1px solid #294538;
  border-radius: 28px;
  color: #fff;
  background:
    radial-gradient(circle at 100% 0%, rgba(80,200,125,.17), transparent 38%),
    linear-gradient(135deg, #11271d 0%, #0b1712 68%);
  box-shadow: 0 24px 60px -42px rgba(10,62,32,.7);
}
.demo-band .tag { color: #bde5ca; border-color: rgba(112,217,155,.22); background: rgba(112,217,155,.08); }
.demo-band h2 { margin-top: 16px; color: #fff; max-width: 19ch; }
.demo-band-copy > p { max-width: 52ch; margin-top: 14px; color: #b7c8be; font-size: 16px; line-height: 1.65; }
.demo-band-action { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.demo-band-action .btn-hero { width: 100%; }
.demo-band-action > span { color: #9fb2a7; font-size: 12px; line-height: 1.5; }

.fin-sec {
  position: relative;
  background:
    radial-gradient(circle at 12% 8%, rgba(184,202,255,.32), transparent 34%),
    radial-gradient(circle at 88% 18%, rgba(164,236,191,.26), transparent 38%),
    #f4f7f5;
  border-block: 1px solid #e3eae5;
}
.finance-showcase { max-width: 1180px; }
.flow-connection {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  max-width: 1180px;
  margin: 18px auto 0;
  padding: 20px 24px;
  border: 1px solid var(--surface-line);
  border-radius: 18px;
  background: rgba(255,255,255,.84);
  box-shadow: 0 12px 30px -26px rgba(23,54,35,.28);
}
.flow-connection > strong { color: #23362b; font-size: 14px; }
.flow-connection-steps { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.flow-connection-steps span { padding: 7px 11px; border-radius: 999px; background: #edf6ef; color: #187c40; font-size: 12px; font-weight: 650; }
.flow-connection-steps i { color: #8da097; font-style: normal; }

.packages-sec { border-top: 0; }
.package-card { transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; }
.package-card:hover { transform: translateY(-4px); border-color: rgba(22,163,74,.2); box-shadow: 0 26px 62px -42px rgba(17,92,47,.5); }
.package-card-featured:hover { border-color: rgba(112,217,155,.38); }

.process-sec { background: #fff; }
.process-grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 18px;
  max-width: 1020px;
  margin: 0 auto;
}
.process-card {
  display: flex;
  min-height: 310px;
  flex-direction: column;
  padding: 30px;
  border: 1px solid var(--surface-line);
  border-radius: 24px;
  background: #fff;
  box-shadow: var(--surface-shadow);
}
.process-card-featured { border-color: #bcd9c5; background: #f4faf6; }
.process-no {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 15px;
  background: #edf6ef;
  color: #187c40;
  font-size: 14px;
  font-weight: 800;
}
.process-card h3 { margin-top: 34px; font-size: 22px !important; }
.process-card p { margin-top: 12px; color: #59685f; font-size: 15px; line-height: 1.7; }
.process-meta { margin-top: auto; padding-top: 24px; border-top: 1px solid #e8ede9; color: #718078; font-size: 12px; }

.cta-final { padding: 52px 0 82px; }
.cta-box { padding: 0; overflow: hidden; border-radius: 30px; }
.cta-box-inner {
  display: grid;
  grid-template-columns: minmax(0,1.25fr) minmax(300px,.75fr);
  align-items: center;
  gap: 56px;
  padding: 54px 58px;
}
.cta-copy { min-width: 0; }
.cta-tag { display: inline-flex; padding: 7px 12px; border: 1px solid rgba(112,217,155,.2); border-radius: 999px; background: rgba(112,217,155,.08); color: #b9dec7; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.cta-box h2 { max-width: 22ch; margin-top: 20px; color: #fff; }
.cta-copy > p { max-width: 54ch; margin-top: 16px; color: #b6c7bd; font-size: 16px; line-height: 1.65; }
.cta-action { padding-left: 38px; border-left: 1px solid #355043; }
.cta-box .cta-action { grid-column: auto !important; grid-row: auto !important; display: flex; }
.cta-button { width: 100%; }
.cta-action small { color: #9fb3a8; font-size: 12px; line-height: 1.55; text-align: center; }

@media (max-width: 900px) {
  .demo-band,
  .cta-box-inner { grid-template-columns: 1fr; gap: 30px; }
  .bento-mob-tab {
    color: #66736c;
    border-color: #dce5df;
    background: rgba(255,255,255,.72);
  }
  .bento-mob-tab.active {
    color: #176f3b;
    border-color: #b9d9c3;
    background: #fff;
    box-shadow: 0 5px 16px -12px rgba(17,92,47,.45);
  }
  .demo-band-action { max-width: 360px; }
  .flow-connection { align-items: flex-start; flex-direction: column; }
  .process-grid { grid-template-columns: 1fr; max-width: 620px; }
  .process-card { min-height: 0; }
  .cta-action { padding: 0; border: 0; max-width: 380px; }
}

@media (max-width: 640px) {
  :root { --section-space: 58px; --heading-section: 30px; }
  header { padding: 10px 10px 0 !important; }
  header.compact { padding-top: 8px !important; }
  .s-head { margin-bottom: 30px; }
  .s-lead { font-size: 16px; line-height: 1.65; }
  .hero h1 { max-width: 15ch; }
  .hero-mods { display: none; }
  .bento-sec .s-head { padding-top: 58px !important; margin-bottom: 30px !important; }
  .fit-section { border-radius: 24px; }
  .fit-inner { padding: 30px 20px; }
  .fit-grid { border-radius: 16px; }
  .fit-card { min-height: 0; padding: 20px; }
  .fit-card p { margin-top: 4px; font-size: 14px; }
  .demo-section { padding-block: 26px; }
  .demo-band { padding: 28px 22px; border-radius: 22px; }
  .demo-band h2 { margin-top: 14px; }
  .flow-connection { padding: 18px; }
  .flow-connection-steps { gap: 6px; }
  .flow-connection-steps span { padding: 6px 9px; }
  .process-card { padding: 24px; border-radius: 20px; }
  .process-card h3 { margin-top: 24px; }
  .cta-final { padding: 32px 0 64px; }
  .cta-box { border-radius: 24px; }
  .cta-box-inner { padding: 32px 24px; }
  .cta-action { width: 100%; }
  .cta-button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-live { animation: none; }
}