:root{--font-display:'Onest',system-ui,sans-serif;--font-body:'Manrope',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-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; }

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

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

    .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; }
    @media (max-width: 1100px) {}

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

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

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

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

    /* ─── 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 h1 { max-width: 17ch; margin-inline: 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; }
      /* 3. link „Zobacz moduły" wyśrodkowany, nie przyklejony do lewej */
      .hero-actions .btn-s { align-self: center; width: auto; padding: 12px 18px; }

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

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

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

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

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

    /* ─── 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 .wrap { position: relative; z-index: 1; }
    /* chaos cluster */
    .chaos { position: relative; height: 280px; }

    /* ─── 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(79,70,229,.08) 0%, transparent 68%);
      pointer-events: none;
    }
    .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-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; }

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

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

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

    /* ─── 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) {
      .mtab-panel.active { grid-template-columns: 1fr; }
      .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 { 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); }
    @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}
    .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}
    .justify-between{justify-content:space-between}
    .justify-center{justify-content:center}

    .gap-1{gap:.25rem}
    .gap-2{gap:.5rem}
    .gap-2\.5{gap:.625rem}
    .gap-4{gap: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}
    .z-50{z-index:50}

    .rounded{border-radius:.25rem}
    .rounded-\[10px\]{border-radius:10px}
    .rounded-\[12px\]{border-radius:12px}
    .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-500{color:#6b7280}
    .font-bold{font-weight:700}
    .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}
    .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}}
    .modal-input.bad, input.bad, textarea.bad {
      border-color: #DC2626 !important;
      background: #FEF2F2 !important;
    }

    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 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; }
    @media (max-width: 1200px) {
      .hero > .wrap { gap: 36px; width: calc(100% - 64px); }
      .hero h1 { font-size: 40px; }}
    @media (max-width: 1050px) {
      .hero { padding: 138px 0 64px; }
      .hero > .wrap { grid-template-columns: minmax(0,1fr); gap: 40px; }
      .hero h1, .hero-sub { margin-left: 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; }}
    .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-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-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; }
      .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; }
      .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; }
    .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; }
    .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; }
    @media (max-width: 900px) {
      .fit-inner { padding: 32px; }}
    @media (max-width: 640px) {
      .hero h1 { font-size: 34px; text-wrap: pretty; }
      .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; }}
    #mobile-menu.nav-bar { border-radius: 24px !important; }
    .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; }
    @media (max-width: 900px) {
      .cta-box-inner { display: flex; }}
    @media (max-width: 640px) {
      .cta-box { padding: 28px 24px; }}
    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;
    }
    :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; }}
.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; }
@media(max-width:900px) {}

.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; }
@media(max-width:640px) {}
.mtab-nav{background:#edf2ee;border:1px solid var(--surface-line);border-radius:20px;padding:6px;gap:4px;margin-bottom:28px}
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}}
@media(max-width:640px){:root{--section-space:48px}.s-head{margin-bottom:28px}.s-lead{font-size:16px}.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}}

@media (max-width: 900px) {}
@media (max-width: 640px) {}

/* 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 > .wrap {
  width: min(1500px, calc(100% - 96px));
  grid-template-columns: minmax(450px, .78fr) minmax(620px, 1.22fr);
  gap: clamp(48px, 5vw, 92px);
}
.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; }

@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; }}
@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 h1 { max-width: 16ch; font-size: 52px; }}
@media (max-width: 640px) {
  .hero { padding: 112px 0 52px; }
  .hero > .wrap { width: calc(100% - 32px); gap: 38px; }
  .hero h1 { max-width: 17ch; font-size: 38px !important; line-height: 1.1; }}

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

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

.packages-sec { border-top: 0; }

.process-sec { background: #fff; }

.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-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-button { width: 100%; }

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

@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; }
  .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; }
  .cta-final { padding: 32px 0 64px; }
  .cta-box { border-radius: 24px; }
  .cta-box-inner { padding: 32px 24px; }
  .cta-button { width: 100%; }}

@media (prefers-reduced-motion: reduce) {}

/* ─── FLOW HERO 2026 ─── */
body .action-pill {
  display: inline-flex;
  min-height: 54px;
  width: fit-content;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 6px 7px 6px 21px;
  border: 1px solid rgba(17,24,39,.11);
  border-radius: 999px;
  background: #fff;
  color: #111827 !important;
  box-shadow: 0 12px 30px -22px rgba(0,0,0,.48);
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
body .action-pill:hover {
  transform: translateY(-2px);
  border-color: rgba(22,131,70,.3);
  background: #fff;
  box-shadow: 0 18px 36px -22px rgba(16,105,54,.54);
}
body .action-pill:focus-visible {
  outline: 3px solid rgba(112,217,155,.3);
  outline-offset: 3px;
}
.action-pill-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  border-radius: 999px;
  background: #168346;
  color: #fff;
  transition: transform .22s ease, background .22s ease;
}
.action-pill:hover .action-pill-icon {
  transform: translateX(2px);
  background: #116f3a;
}
.action-pill-icon svg {
  width: 15px;
  height: 15px;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
body .action-pill-sm {
  min-height: 48px;
  padding: 5px 6px 5px 18px;
  font-size: 14px;
}
.action-pill-sm .action-pill-icon {
  width: 36px;
  height: 36px;
  flex-basis: 36px;
}

.flow-hero {
  position: relative;
  min-height: 860px;
  padding: 104px 0 64px;
  overflow: hidden;
  background:
    radial-gradient(ellipse 66% 50% at 50% 67%, rgba(22,163,74,.22), transparent 72%),
    radial-gradient(ellipse 34% 34% at 88% 12%, rgba(22,163,74,.16), transparent 75%),
    #09110e;
}
.flow-hero-grid {
  position: absolute;
  inset: 0;
  opacity: .42;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,.8) 56%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,.8) 56%, transparent 100%);
}
.flow-hero-glow {
  position: absolute;
  left: 50%;
  bottom: 70px;
  width: min(1100px,80vw);
  height: 460px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: rgba(52,184,103,.16);
  filter: blur(110px);
  pointer-events: none;
}
.flow-hero-wrap {
  position: relative;
  z-index: 1;
  display: grid;
  width: min(1320px,calc(100% - 64px));
  grid-template-columns: minmax(0,2fr) minmax(0,3fr);
  align-items: center;
  gap: clamp(48px,5vw,84px);
  margin: 0 auto;
}
.flow-hero-copy {
  max-width: 520px;
  margin: 0;
  text-align: left;
}
.flow-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 13px;
  border: 1px solid rgba(112,217,155,.2);
  border-radius: 999px;
  background: rgba(112,217,155,.07);
  color: #c2d3ca;
  font-size: 12px;
  font-weight: 650;
  letter-spacing: .015em;
}
.flow-hero-eyebrow i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #46c475;
  box-shadow: 0 0 0 4px rgba(70,196,117,.1);
}
.flow-hero h1 {
  max-width: 10ch;
  margin: 28px 0 0;
  color: #f7faf8;
  font-size: clamp(52px,4.2vw,70px);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -.045em;
  text-wrap: balance;
}
.flow-hero h1 span {
  display: block;
  margin-top: 4px;
  color: #70d99b;
}
.flow-hero-copy > p {
  max-width: 48ch;
  margin: 26px 0 0;
  color: #b8c8bf;
  font-size: 18px;
  line-height: 1.72;
  text-wrap: pretty;
}
.flow-hero-actions {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 34px;
}
.flow-hero-product {
  position: relative;
  min-width: 0;
  max-width: none;
  margin: 0;
  padding-bottom: 68px;
}
.flow-product-frame {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(170,211,186,.45);
  border-radius: 26px;
  background: #edf2ef;
  box-shadow:
    0 42px 100px -38px rgba(0,0,0,.9),
    0 0 0 1px rgba(255,255,255,.035),
    0 0 90px -38px rgba(70,196,117,.52);
}
.flow-product-bar {
  display: grid;
  min-height: 50px;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 18px;
  border-bottom: 1px solid #dce4df;
  background: #f3f6f4;
}
.flow-product-dots {
  display: flex;
  gap: 7px;
}
.flow-product-dots i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #bdc8c1;
}
.flow-product-bar > span {
  color: #526159;
  font-size: 11px;
  font-weight: 650;
}
.flow-product-bar > strong {
  display: inline-flex;
  align-items: center;
  justify-self: end;
  gap: 7px;
  color: #168346;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.flow-product-bar > strong i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #22b55e;
}
.flow-product-screen {
  position: relative;
  background: #edf2ef;
}
.flow-product-screen::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(17,24,39,.025);
}
.flow-product-screen img {
  display: block;
  width: 100%;
  height: auto;
}
.flow-hero-insights {
  position: absolute;
  left: 4%;
  right: 4%;
  bottom: 32px;
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  overflow: hidden;
  border: 1px solid rgba(155,206,175,.18);
  border-radius: 18px;
  background: rgba(13,28,20,.92);
  box-shadow: 0 24px 54px -26px rgba(0,0,0,.9);
  backdrop-filter: blur(18px);
}
.flow-hero-insight {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
}
.flow-hero-insight:not(:first-child) {
  border-left: 1px solid rgba(255,255,255,.08);
}
.flow-hero-insight span {
  color: #91a69a;
  font-size: 11px;
  font-weight: 600;
}
.flow-hero-insight strong {
  color: #eef9f2;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -.03em;
}
.flow-hero-insight-status strong {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #84e4aa;
  font-size: 12px;
  letter-spacing: 0;
}
.flow-hero-insight-status strong i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #46c475;
  box-shadow: 0 0 0 4px rgba(70,196,117,.1);
}
.flow-hero-caption {
  margin-top: 60px;
  color: #8fa097;
  font-size: 11px;
  text-align: center;
}

.nav-logo:hover { opacity: .88; }
.footer-brand .action-pill { margin-top: 30px; }
.mobile-cta .action-pill {
  width: auto;
  min-height: 44px;
  padding: 4px 5px 4px 16px;
  box-shadow: none;
}
.mobile-cta .action-pill-icon {
  width: 34px;
  height: 34px;
  flex-basis: 34px;
}

@media (max-width: 900px) {
  .flow-hero { min-height: 0; padding: 138px 0 74px; }
  .flow-hero-wrap {
    display: block;
    width: min(1200px,calc(100% - 56px));
  }
  .flow-hero-copy {
    max-width: 930px;
    margin: 0 auto;
    text-align: center;
  }
  .flow-hero h1 { font-size: clamp(46px,8vw,64px); }
  .flow-hero h1 { max-width: 14ch; margin-inline: auto; }
  .flow-hero-copy > p { max-width: 67ch; margin-inline: auto; }
  .flow-hero-actions { justify-content: center; }
  .flow-hero-product { margin-top: 58px; }
  .flow-hero-insights {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    grid-template-columns: repeat(2,minmax(0,1fr));
    margin: -22px 18px 0;
  }
  .flow-hero-insight:nth-child(3) { border-left: 0; border-top: 1px solid rgba(255,255,255,.08); }
  .flow-hero-insight:nth-child(4) { border-top: 1px solid rgba(255,255,255,.08); }
  .flow-hero-caption { margin-top: 18px; }
  .flow-hero-product { padding-bottom: 0; }}
@media (max-width: 640px) {
  .flow-hero { padding: 112px 0 56px; }
  .flow-hero-wrap { width: calc(100% - 32px); }
  .flow-hero-copy { text-align: left; }
  .flow-hero-eyebrow { font-size: 10px; line-height: 1.4; }
  .flow-hero h1 {
    max-width: 12ch;
    margin: 24px 0 0;
    font-size: 42px;
    line-height: 1.04;
    text-wrap: initial;
  }
  .flow-hero-copy > p {
    margin: 22px 0 0;
    font-size: 16px;
    line-height: 1.65;
  }
  .flow-hero-actions {
    align-items: stretch;
    flex-direction: column;
    margin-top: 28px;
  }
  .flow-hero-actions .action-pill { width: 100%; }
  .flow-hero-product { margin-top: 44px; }
  .flow-product-frame { border-radius: 17px; }
  .flow-product-bar { min-height: 40px; padding: 0 11px; }
  .flow-product-dots { gap: 5px; }
  .flow-product-dots i { width: 7px; height: 7px; }
  .flow-product-bar > span { font-size: 9px; }
  .flow-product-bar > strong { font-size: 8px; }
  .flow-hero-insights { margin: -12px 8px 0; border-radius: 15px; }
  .flow-hero-insight { align-items: flex-start; flex-direction: column; gap: 5px; padding: 14px; }
  .flow-hero-insight strong { font-size: 17px; }}

@media (prefers-reduced-motion: reduce) {
  body .action-pill,
  .action-pill-icon,
  .pricing-plan { transition: none; }}

/* ─── UNIFIED SECTION BADGES ─── */
body .tag,
body .cta-tag,
body .pricing-intro-label {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: 9px;
  padding: 8px 13px;
  border: 1px solid rgba(22,131,70,.18);
  border-radius: 999px;
  background: rgba(22,131,70,.06);
  color: #53645b !important;
  font-size: 12px;
  font-weight: 650;
  line-height: 1;
  letter-spacing: .015em;
  text-transform: none;
}
body .tag::before,
body .cta-tag::before,
body .pricing-intro-label::before {
  content: '';
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border-radius: 50%;
  background: #35b868;
  box-shadow: 0 0 0 4px rgba(53,184,104,.1);
}
body .demo-band .tag,
body .cta-box .cta-tag {
  border-color: rgba(112,217,155,.2);
  background: rgba(112,217,155,.07);
  color: #c2d3ca !important;
}

/* ─── BEFORE / AFTER 2026 ─── */
.ba-section {
  background:
    radial-gradient(circle at 86% 12%, rgba(196,235,210,.42), transparent 30%),
    #f4f7f5;
}
.ba-section .s-head { max-width: 790px; }
.transformation-panel {
  display: grid;
  grid-template-columns: minmax(320px, .78fr) minmax(0, 1.22fr);
  overflow: hidden;
  border: 1px solid #d5e1da;
  border-radius: 32px;
  background: #fff;
  box-shadow: 0 32px 80px -60px rgba(17,67,39,.55);
}
.transformation-before {
  padding: clamp(34px, 4vw, 52px);
  color: #f3f8f5;
  background:
    radial-gradient(circle at 0 0, rgba(64,169,104,.15), transparent 34%),
    #0c1913;
}
.transformation-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #7b9185;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.transformation-kicker::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #42bd70;
  box-shadow: 0 0 0 4px rgba(66,189,112,.1);
}
.transformation-before h3,
.transformation-after h3 {
  margin-top: 18px;
  font-family: var(--font-display);
  font-size: clamp(26px,2.3vw,34px);
  font-weight: 600;
  line-height: 1.16;
  letter-spacing: -.035em;
}
.transformation-before h3 { max-width: 13ch; color: #f4f8f5; }
.transformation-list { margin-top: 34px; }
.transformation-list article {
  display: grid;
  grid-template-columns: 30px minmax(0,1fr);
  gap: 14px;
  padding: 17px 0;
  border-top: 1px solid rgba(255,255,255,.09);
}
.transformation-list article > span {
  color: #5b7467;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.8;
}
.transformation-list strong {
  display: block;
  color: #e6eee9;
  font-size: 14px;
  font-weight: 650;
}
.transformation-list p {
  margin-top: 5px;
  color: #91a299;
  font-size: 13px;
  line-height: 1.55;
}
.transformation-after { min-width: 0; padding: clamp(26px,3vw,38px); }
.transformation-after-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 26px;
}
.transformation-after h3 { max-width: 18ch; color: #111827; }
.transformation-demo {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 7px;
  padding: 7px 10px;
  border: 1px solid #cfe7d7;
  border-radius: 999px;
  background: #f0faf3;
  color: #168346;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.transformation-demo i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #2db464;
}
.transformation-screen {
  overflow: hidden;
  border: 1px solid #dbe4de;
  border-radius: 19px;
  background: #eef3f0;
  box-shadow: 0 22px 44px -34px rgba(17,67,39,.5);
}
.transformation-screen img { display: block; width: 100%; height: auto; }
.transformation-screen figcaption {
  padding: 10px 14px;
  border-top: 1px solid #dbe4de;
  color: #6b7b72;
  font-size: 11px;
  text-align: center;
}
.transformation-outcomes {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 1px;
  overflow: hidden;
  margin-top: 20px;
  border: 1px solid #dce6e0;
  border-radius: 17px;
  background: #dce6e0;
}
.transformation-outcomes > div { padding: 16px 18px; background: #f8faf9; }
.transformation-outcomes strong {
  display: block;
  color: #17221c;
  font-size: 13px;
  font-weight: 700;
}
.transformation-outcomes span {
  display: block;
  margin-top: 4px;
  color: #66766d;
  font-size: 12px;
  line-height: 1.45;
}
.ba-section .comparison-note { margin-top: 18px; color: #75847c; }

@media (max-width: 900px) {
  .transformation-panel { grid-template-columns: 1fr; }
  .transformation-before h3 { max-width: 18ch; }}
@media (max-width: 640px) {
  :root { --heading-section: 32px; }
  body .s-lead,
  body .fit-top > p { font-size: 16px; }
  .transformation-panel { border-radius: 22px; }
  .transformation-before,
  .transformation-after { padding: 26px 22px; }
  .transformation-after-head { flex-direction: column; }
  .transformation-outcomes { grid-template-columns: 1fr; }}

/* ─── TYPOGRAPHY SYSTEM ─── */
:root {
  --type-display: clamp(52px,4.2vw,70px);
  --type-section: clamp(36px,3.15vw,50px);
  --type-subhead: clamp(24px,2vw,28px);
  --type-title: 20px;
  --type-lead: 18px;
  --type-body: 16px;
  --type-small: 14px;
  --type-label: 12px;
  --leading-display: 1.02;
  --leading-heading: 1.14;
  --leading-body: 1.65;
  --leading-small: 1.5;
}
html { font-size: 16px; }
body {
  font-size: var(--type-body);
  line-height: var(--leading-body);
}
.flow-hero h1 {
  font-size: var(--type-display);
  font-weight: 600;
  line-height: var(--leading-display);
}
body .s-head h2,
body .fit-top h2,
body .demo-band h2,
body .cta-box h2 {
  font-size: var(--type-section) !important;
  font-weight: 600 !important;
  line-height: var(--leading-heading) !important;
  letter-spacing: -.04em !important;
}
body .s-head h2 { margin-top: 20px; }
.flow-hero-copy > p,
body .s-lead,
body .fit-top > p {
  margin-top: 16px;
  font-size: var(--type-lead);
  line-height: var(--leading-body);
}
body :is(.mtab-text, .scroll-label) h3,
.pricing-intro h3,
.pricing-plan h3,
.transformation-before h3,
.transformation-after h3 {
  font-family: var(--font-display);
  font-size: var(--type-subhead);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -.03em;
}
body :is(.fit-card, .process-grid) h3,
.finance-capability h3 {
  font-family: var(--font-display);
  font-size: var(--type-title) !important;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -.02em;
}
.mtab-text p,
.scroll-label p,
.process-card p,
.demo-band-copy > p,
.cta-copy > p,
.footer-brand p,
.faq-body {
  font-size: var(--type-body) !important;
  line-height: var(--leading-body) !important;
}
.fit-card p,
.pricing-intro p,
.pricing-plan > strong,
.pricing-plan > p,
.pricing-feature,
.pricing-mobile-list li,
.pricing-board-footer p,
.pricing-board-footer strong,
.finance-capability p,
.transformation-list strong,
.transformation-list p,
.transformation-outcomes strong,
.transformation-outcomes span,
.footer-col a {
  font-size: var(--type-small);
  line-height: var(--leading-small);
}
.faq-trigger,
body .action-pill {
  font-size: var(--type-body);
  line-height: 1;
}
body .tag,
body .cta-tag,
body .pricing-intro-label,
.transformation-kicker,
.transformation-demo,
.process-meta,
.demo-band-action > span,
.cta-action small {
  font-size: var(--type-label);
  line-height: var(--leading-small);
}

@media (max-width: 640px) {
  :root {
    --type-display: 42px;
    --type-section: 32px;
    --type-subhead: 24px;
    --type-title: 18px;
    --type-lead: 16px;
  }}

/* ─── SIGNATURE PRODUCT HERO ─── */
.flow-hero {
  min-height: 800px;
  background:
    radial-gradient(circle at 76% 44%, rgba(22,163,74,.2), transparent 28%),
    radial-gradient(circle at 18% 12%, rgba(28,105,65,.12), transparent 30%),
    linear-gradient(135deg,#08100d 0%,#0a1510 58%,#0b1a13 100%);
}
.flow-hero-wrap {
  width: min(1560px,calc(100% - 72px));
  grid-template-columns: minmax(0,9fr) minmax(0,11fr);
  gap: clamp(48px,4vw,72px);
}
.flow-hero-copy { position: relative; z-index: 5; max-width: 650px; }
.flow-hero h1 {
  /* 18ch, zeby "Zespol, zlecenia i koszty." zostalo w jednej linii - Onest
     jest szerszy od poprzedniego kroju i przy 15.5ch lamal sie na dwie. */
  max-width: 18ch;
  font-size: clamp(48px,3.45vw,60px);
  line-height: 1.045;
  letter-spacing: -.048em;
}
.flow-hero h1 span { margin-top: 10px; }
.flow-hero-copy > p { max-width: 51ch; font-size: 17px; }
.flow-hero-eyebrow {
  padding: 8px 14px;
  color: #b9ccc1;
  font-weight: 600;
}
.flow-hero-actions { flex-wrap: nowrap; }
.flow-hero-product { padding: 0; }
.flow-hero-stage {
  position: relative;
  min-height: 590px;
  display: flex;
  align-items: center;
  padding: 56px 14px 90px 32px;
  isolation: isolate;
}
.flow-hero-stage::before {
  content: '';
  position: absolute;
  inset: 8% 0 5% 8%;
  z-index: -3;
  border: 1px solid rgba(111,217,154,.14);
  border-radius: 42px;
  background: linear-gradient(145deg,rgba(31,86,54,.22),rgba(10,23,17,.12));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
.flow-hero-stage::after {
  content: '';
  position: absolute;
  inset: 20% 10% 12% 18%;
  z-index: -4;
  border-radius: 50%;
  background: rgba(61,201,113,.2);
  filter: blur(80px);
}
.flow-stage-layer {
  position: absolute;
  z-index: -1;
  width: 56%;
  overflow: hidden;
  border: 1px solid rgba(181,222,197,.22);
  border-radius: 18px;
  background: #eef3f0;
  box-shadow: 0 28px 70px -34px rgba(0,0,0,.9);
  opacity: .85;
}
.flow-stage-layer img { display: block; width: 100%; height: auto; }
.flow-stage-schedule {
  top: 22px;
  right: -5%;
  transform: rotate(2.5deg);
  animation: flowLayerOne 7s ease-in-out infinite;
}
.flow-hero-stage > .flow-product-frame {
  z-index: 3;
  width: 100%;
  border-color: rgba(206,229,215,.65);
  border-radius: 24px;
  box-shadow:
    0 52px 100px -44px rgba(0,0,0,.95),
    0 0 0 1px rgba(255,255,255,.04),
    0 0 100px -46px rgba(81,205,127,.62);
}
.flow-hero-stage .flow-product-bar { min-height: 46px; }
.flow-hero-stage .flow-hero-insights {
  left: 11%;
  right: 0;
  bottom: 30px;
  z-index: 5;
  border-color: rgba(126,207,157,.2);
  background: rgba(10,27,18,.94);
}
.flow-hero-caption {
  margin: 4px 30px 0 0;
  text-align: right;
  letter-spacing: .02em;
}
@keyframes flowLayerOne {
  0%,100% { transform: rotate(2.5deg) translateY(0); }
  50% { transform: rotate(2.5deg) translateY(-8px); }
}
@keyframes flowLayerTwo {
  0%,100% { transform: rotate(-2.5deg) translateY(0); }
  50% { transform: rotate(-2.5deg) translateY(7px); }
}

/* ─── IMPLEMENTATION JOURNEY ─── */
.process-sec { background: #fff; }
.process-journey {
  display: grid;
  /* Lewa kolumna jest o polowe nizsza od trzech kart obok - bez wysrodkowania
     cala roznica ladowala jako pustka pod tekstem. */
  align-items: center;
  grid-template-columns: minmax(300px,.78fr) minmax(0,1.22fr);
  gap: clamp(46px,6vw,88px);
  padding: clamp(44px,5vw,70px);
  overflow: hidden;
  border: 1px solid #1c3729;
  border-radius: 38px;
  color: #fff;
  background:
    radial-gradient(circle at 0 100%,rgba(58,180,103,.16),transparent 35%),
    linear-gradient(145deg,#0d1b15,#0a1510);
  box-shadow: 0 38px 90px -66px rgba(7,61,29,.78);
}
.process-journey-intro { align-self: center; }
.process-journey-intro > .tag {
  border-color: rgba(112,217,155,.22);
  background: rgba(112,217,155,.08);
  color: #c4d7cc !important;
}
.process-journey-intro h2 {
  max-width: 18ch;
  margin-top: 22px;
  color: #f5faf7;
  font-family: var(--font-display);
  font-size: var(--type-section);
  font-weight: 600;
  line-height: var(--leading-heading);
  letter-spacing: -.04em;
}
.process-journey-intro > p {
  max-width: 39ch;
  margin-top: 18px;
  color: #a1b3a9;
  font-size: var(--type-body);
  line-height: var(--leading-body);
}
.process-route { position: relative; display: grid; gap: 12px; }
.process-route::before {
  content: '';
  position: absolute;
  top: 46px;
  bottom: 46px;
  left: 43px;
  width: 1px;
  background: linear-gradient(#4cc27a,rgba(76,194,122,.08));
}
.process-route article {
  position: relative;
  display: grid;
  grid-template-columns: 52px minmax(0,1fr) auto;
  align-items: center;
  gap: 20px;
  min-height: 142px;
  padding: 24px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 20px;
  background: rgba(255,255,255,.035);
  transition: transform .24s ease,border-color .24s ease,background .24s ease;
}
.process-route article:hover {
  transform: translateX(5px);
  border-color: rgba(101,210,143,.25);
  background: rgba(255,255,255,.055);
}
.process-route-no {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(109,218,150,.18);
  border-radius: 13px;
  background: #163526;
  color: #8be2ac;
  font-size: 12px;
  font-weight: 750;
}
.process-route small {
  color: #74c895;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.process-route h3 {
  margin-top: 4px;
  color: #f2f8f4;
  font-family: var(--font-display);
  font-size: var(--type-title);
  font-weight: 600;
  line-height: 1.25;
}
.process-route p {
  max-width: 48ch;
  margin-top: 7px;
  color: #92a59a;
  font-size: var(--type-small);
  line-height: var(--leading-small);
}
.process-route em {
  padding: 7px 10px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 999px;
  color: #7f9488;
  font-size: 11px;
  font-style: normal;
  white-space: nowrap;
}

@media (max-width: 1020px) {
  .flow-hero-wrap { width: min(1200px,calc(100% - 56px)); gap: 42px; }
  .flow-hero-stage { min-height: 550px; padding-left: 34px; }
  .finance-stage,
  .process-journey { grid-template-columns: 1fr; }
  .finance-stage-copy h2,
  .process-journey-intro h2 { max-width: 18ch; }}
@media (max-width: 900px) {
  .flow-hero-actions { flex-wrap: wrap; }
  .flow-hero-stage { min-height: 570px; margin-top: 20px; }
  .flow-stage-layer { display: block; }
  .flow-hero-stage .flow-hero-insights {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    margin: -22px 18px 0;
  }}
@media (max-width: 640px) {
  .flow-hero { min-height: 0; }
  .flow-hero-wrap { width: calc(100% - 32px); }
  .flow-hero h1 { max-width: 14ch; font-size: 42px; }
  .flow-hero-copy > p { font-size: 16px; }
  .flow-hero-stage { min-height: 0; padding: 32px 0 0; }
  .flow-hero-stage::before { inset: 4% -18px 7%; border-radius: 24px; }
  .flow-stage-layer { display: none; }
  .flow-hero-stage > .flow-product-frame { border-radius: 17px; }
  .flow-hero-stage .flow-hero-insights {
    left: auto;
    right: auto;
    bottom: auto;
    margin: -12px 8px 0;
  }
  .flow-hero-caption { margin: 12px 0 0; text-align: center; }
  .finance-stage,
  .process-journey { border-radius: 24px; }
  .finance-stage-copy,
  .process-journey { padding: 30px 24px; }
  .process-route article {
    grid-template-columns: 44px minmax(0,1fr);
    gap: 14px;
    min-height: 0;
    padding: 20px;
  }
  .process-route::before { left: 40px; }
  .process-route em { grid-column: 2; justify-self: start; }}
@media (prefers-reduced-motion: reduce) {
  .flow-stage-layer { animation: none; }}

@media (max-width: 1150px) and (min-width: 901px) {
  .flow-hero-actions { flex-wrap: wrap; }}

/* ─── BRIGHTER GREEN ACCENTS ─── */
:root {
  --accent-bright: #6ee7a1;
  --accent-main: #31c875;
  --accent-solid: #1fa85b;
  --accent-deep: #167f45;
  --accent-pale: #e4f8eb;
}
.flow-hero h1 span { color: var(--accent-bright); }
.flow-hero-eyebrow i,
.flow-product-bar > strong i,
.flow-hero-insight-status strong i,
.finance-stage-bar i,
.transformation-kicker::before,
.transformation-demo i,
body .tag::before,
body .cta-tag::before,
body .pricing-intro-label::before {
  background: var(--accent-main);
  box-shadow: 0 0 0 4px rgba(49,200,117,.13);
}
.action-pill-icon { background: var(--accent-solid); }
.action-pill:hover .action-pill-icon { background: var(--accent-deep); }
.scroll-label-num,
.process-route small,
.process-route-no,
.finance-stage-list article > span { color: var(--accent-bright); }
.pricing-plan-meta > span,
.flow-product-bar > strong,
.transformation-demo { color: var(--accent-deep); }

/* Hero metrics: stronger product signal */
.flow-hero-stage .flow-hero-insights {
  overflow: hidden;
  border-color: rgba(110,231,161,.34);
  background:
    linear-gradient(105deg,rgba(27,72,46,.98),rgba(10,31,20,.98));
  box-shadow:
    0 26px 56px -28px rgba(0,0,0,.95),
    inset 0 1px 0 rgba(181,255,211,.12),
    0 0 44px -28px rgba(91,231,148,.75);
}
.flow-hero-stage .flow-hero-insights::before {
  content: '';
  position: absolute;
  top: 0;
  left: 18px;
  right: 18px;
  height: 2px;
  border-radius: 0 0 999px 999px;
  background: linear-gradient(90deg,transparent,var(--accent-bright),transparent);
  opacity: .72;
}
.flow-hero-stage .flow-hero-insight { padding-block: 20px; }
.flow-hero-stage .flow-hero-insight:not(:first-child) {
  border-color: rgba(173,231,195,.13);
}
.flow-hero-stage .flow-hero-insight span {
  color: #b3c9bd;
  font-weight: 650;
}
.flow-hero-stage .flow-hero-insight strong {
  color: #f1fff6;
  text-shadow: 0 0 24px rgba(110,231,161,.2);
}
.flow-hero-stage .flow-hero-insight-status strong { color: var(--accent-bright); }

/* ─── FLOW CONVERSION SYSTEM 2026 ─── */
.demo-section {
  position: relative;
  padding-block: clamp(56px, 7vw, 92px);
  overflow: hidden;
  background: #f5f8f6;
}
.demo-band {
  position: relative;
  isolation: isolate;
  grid-template-columns: minmax(0, 1.2fr) minmax(330px, .8fr);
  gap: clamp(42px, 6vw, 84px);
  min-height: 430px;
  padding: clamp(44px, 5vw, 70px);
  overflow: hidden;
  border: 1px solid rgba(110,231,161,.2);
  border-radius: 38px;
  background:
    radial-gradient(circle at 88% 20%, rgba(74,222,128,.18), transparent 28%),
    radial-gradient(circle at 18% 110%, rgba(22,163,74,.1), transparent 32%),
    linear-gradient(135deg, #0a1711 0%, #10291d 100%);
  box-shadow: 0 40px 90px -58px rgba(7,55,29,.82), inset 0 1px 0 rgba(255,255,255,.05);
}
.demo-band::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: .34;
  background-image:
    linear-gradient(rgba(74,222,128,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(74,222,128,.06) 1px, transparent 1px);
  background-size: 58px 58px;
  mask-image: linear-gradient(90deg, #000, transparent 72%);
}
.demo-band-copy { align-self: center; }
.demo-band h2 {
  max-width: 12ch;
  margin-top: 22px;
  color: #f7fcf9;
  font-size: var(--type-section) !important;
  font-weight: 600 !important;
  line-height: 1.06 !important;
}
.demo-band h2 span { color: var(--accent-bright); }
.demo-band-copy > p { max-width: 48ch; margin-top: 20px; color: #b5c9bd; }
.demo-band-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 34px;
}
.demo-band-steps > span {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 36px;
  padding: 6px 12px 6px 7px;
  border: 1px solid rgba(201,239,215,.12);
  border-radius: 999px;
  background: rgba(255,255,255,.035);
  color: #c9d9d0;
  font-size: 12px;
  font-weight: 600;
}
.demo-band-steps i {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(110,231,161,.12);
  color: var(--accent-bright);
  font-size: 9px;
  font-style: normal;
  font-weight: 800;
}
.demo-spotlight {
  position: relative;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(30px, 4vw, 46px);
  border: 1px solid rgba(183,235,203,.16);
  border-radius: 28px;
  background: linear-gradient(145deg, rgba(255,255,255,.085), rgba(255,255,255,.025));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 26px 58px -42px rgba(0,0,0,.9);
  backdrop-filter: blur(18px);
}
.demo-spotlight-time { display: flex; align-items: center; gap: 16px; }
.demo-spotlight-time strong {
  color: #f4fff8;
  font-family: var(--font-display);
  font-size: clamp(68px, 7vw, 92px);
  font-weight: 600;
  line-height: .86;
  letter-spacing: -.07em;
}
.demo-spotlight-time span {
  color: var(--accent-bright);
  font-size: 13px;
  font-weight: 750;
  line-height: 1.35;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.demo-spotlight > p { margin-top: 26px; color: #a9beb2; font-size: 14px; line-height: 1.65; }
.demo-spotlight .action-pill { width: 100%; margin-top: 28px; }
.demo-spotlight small { margin-top: 12px; color: #82998d; font-size: 11px; line-height: 1.5; text-align: center; }

#moduly {
  position: relative;
  padding-bottom: var(--section-space) !important;
  background:
    radial-gradient(circle at 85% 12%, rgba(74,222,128,.09), transparent 26%),
    #f7f9f8;
}
.module-explorer {
  display: grid;
  grid-template-columns: 240px minmax(0,1fr);
  max-width: 1240px;
  min-height: 600px;
  margin: 0 auto;
  padding: 10px;
  border: 1px solid rgba(107,193,140,.17);
  border-radius: 34px;
  background:
    radial-gradient(circle at 8% 95%, rgba(75,196,121,.14), transparent 28%),
    #0a1711;
  box-shadow: 0 44px 100px -66px rgba(5,52,25,.8), inset 0 1px 0 rgba(255,255,255,.045);
}
.module-explorer .mtab-nav {
  display: flex;
  width: auto;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: flex-start;
  gap: 6px;
  margin: 0;
  padding: 18px 12px;
  border: 0;
  border-radius: 26px;
  background: transparent;
}
.module-explorer-label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 2px 8px 24px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(255,255,255,.09);
}
.module-explorer-label span { color: #fff; font-family: var(--font-display); font-size: 24px; font-weight: 700; letter-spacing: -.05em; }
.module-explorer-label span::after { content: '.'; color: var(--accent-bright); }
.module-explorer-label small { color: #789084; font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.module-explorer .mtab-btn {
  justify-content: flex-start;
  width: 100%;
  min-height: 52px;
  gap: 12px;
  padding: 10px 13px;
  border: 1px solid transparent;
  border-radius: 15px;
  color: #91a79b;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
}
.module-explorer .mtab-btn .mtab-num {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  border-radius: 9px;
  background: rgba(255,255,255,.045);
  color: #668074;
  font-size: 9px;
  font-weight: 800;
}
.module-explorer .mtab-btn:hover { color: #eaf5ee; background: rgba(255,255,255,.04); }
.module-explorer .mtab-btn.active {
  border-color: rgba(110,231,161,.2);
  background: linear-gradient(100deg, rgba(59,194,111,.2), rgba(59,194,111,.07));
  color: #effcf4;
  box-shadow: inset 3px 0 0 var(--accent-bright), 0 12px 28px -22px rgba(53,211,116,.8);
}
.module-explorer .mtab-btn.active .mtab-num { background: rgba(110,231,161,.15); color: var(--accent-bright); }
.module-explorer .mtab-content {
  min-height: 580px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 26px;
  background: #eef3f0;
}
.module-explorer .mtab-panel.active {
  height: 100%;
  min-height: 580px;
  grid-template-columns: minmax(280px,.68fr) minmax(0,1.32fr);
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.module-explorer .mtab-text { padding: clamp(36px,4vw,54px) clamp(30px,3.5vw,46px); }
.module-explorer .mtab-text h3 { font-size: var(--type-subhead); font-weight: 650; }
.module-explorer .mtab-text p { color: #596a61; font-size: 15px; line-height: 1.7; }
.module-explorer .mtab-highlight { margin-top: 28px; border-color: #c7e7d1; background: #e7f7ec; color: #176f3d; }
.module-explorer .mtab-chips { margin-top: 14px; }
.module-explorer .mtab-chip { border-color: #dae4dd; background: #f8faf9; color: #55645b; }
.module-explorer .mtab-mockup.real-screen {
  min-height: 580px;
  border-left-color: #d6e0d9;
  background:
    radial-gradient(circle at 54% 50%, rgba(80,194,122,.14), transparent 42%),
    #e8eeea;
}
.module-explorer .mtab-mockup.real-screen .mtab-mockup-bg { padding: 42px 28px 56px; }
.module-explorer .mtab-mockup.real-screen .mtab-mockup-bg img {
  height: auto;
  max-height: calc(100% - 20px);
  border: 1px solid #d5ded8;
  border-radius: 15px;
  background: #fff;
  box-shadow: 0 30px 58px -34px rgba(13,52,29,.42);
}
.module-explorer .preview-caption { color: #6f7e75; }

.packages-sec {
  background:
    radial-gradient(circle at 8% 18%, rgba(74,222,128,.11), transparent 25%),
    radial-gradient(circle at 92% 82%, rgba(22,163,74,.08), transparent 24%),
    #f3f7f4;
}

.faq-section {
  position: relative;
  background:
    linear-gradient(90deg, rgba(232,247,237,.65), transparent 34%),
    #fbfcfb;
}
.faq-layout {
  display: grid;
  grid-template-columns: minmax(280px,.72fr) minmax(0,1.28fr);
  gap: clamp(54px,7vw,100px);
  max-width: 1120px;
  margin: 0 auto;
}
.faq-intro { align-self: start; position: sticky; top: 120px; }
.faq-intro h2 { max-width: 17ch; margin-top: 24px; font-family: var(--font-display); font-size: var(--type-section); font-weight: 650; line-height: 1.08; letter-spacing: -.045em; }
.faq-intro > p { max-width: 37ch; margin-top: 20px; color: #65736b; font-size: 15px; line-height: 1.7; }
.faq-contact { margin-top: 36px; padding: 20px; border: 1px solid #d8e5dc; border-radius: 18px; background: rgba(255,255,255,.76); box-shadow: 0 18px 38px -34px rgba(17,74,40,.38); }
.faq-contact span { display: block; color: #79867e; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.faq-contact a { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; color: #173524; font-size: 15px; font-weight: 700; text-decoration: none; }
.faq-contact b { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--accent-pale); color: var(--accent-deep); }
.faq-layout .faq-list { max-width: none; gap: 10px; counter-reset: faq; }
.faq-layout .faq-item { counter-increment: faq; border-color: #dbe5de; border-radius: 18px; background: rgba(255,255,255,.88); box-shadow: 0 14px 34px -32px rgba(14,66,35,.35); }
.faq-layout .faq-trigger { display: grid; grid-template-columns: 32px minmax(0,1fr) 34px; min-height: 80px; padding: 16px 18px; color: #18251d; font-size: 16px; }
.faq-layout .faq-trigger::before { content: counter(faq, decimal-leading-zero); display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; background: #eef6f0; color: var(--accent-deep); font-size: 9px; font-weight: 800; }
.faq-layout .faq-icon { grid-column: 3; border-radius: 50%; background: #edf4ef; }
.faq-layout .faq-item.open { border-color: #a8d5b8; background: #fff; box-shadow: 0 26px 48px -38px rgba(11,83,41,.58); }
.faq-layout .faq-item.open .faq-icon { background: var(--accent-solid); }
.faq-layout .faq-body { padding-right: 70px; padding-left: 66px; color: #5e6d64; font-size: 15px; line-height: 1.75; }

.cta-final {
  padding: clamp(54px,7vw,88px) 0;
  background: #f5f8f6;
}
.cta-box {
  position: relative;
  isolation: isolate;
  min-height: 500px;
  border: 1px solid rgba(110,231,161,.2);
  border-radius: 40px;
  background:
    radial-gradient(circle at 82% 28%, rgba(74,222,128,.2), transparent 25%),
    radial-gradient(circle at 15% 110%, rgba(22,163,74,.13), transparent 34%),
    linear-gradient(135deg,#08150f,#10291d);
  box-shadow: 0 48px 100px -66px rgba(6,58,29,.85), inset 0 1px 0 rgba(255,255,255,.055);
}
.cta-box::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: .25;
  background-image:
    linear-gradient(rgba(74,222,128,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(74,222,128,.055) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(circle at 70% 40%, #000, transparent 60%);
}
.cta-signal { position: absolute; top: 50%; right: 10%; width: 280px; height: 280px; transform: translateY(-50%); }
.cta-signal i { position: absolute; inset: 50%; border: 1px solid rgba(110,231,161,.14); border-radius: 50%; transform: translate(-50%,-50%); }
.cta-signal i:nth-child(1) { width: 100%; height: 100%; }
.cta-signal i:nth-child(2) { width: 66%; height: 66%; }
.cta-signal i:nth-child(3) { width: 32%; height: 32%; background: radial-gradient(circle,rgba(74,222,128,.22),transparent 68%); box-shadow: 0 0 80px rgba(110,231,161,.15); }
.cta-box-inner {
  display: flex;
  min-height: 500px;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 0;
  padding: clamp(40px,4.5vw,56px);
}
.cta-box-inner > .cta-tag { width: fit-content; margin: 0; }
.cta-box h2 { max-width: 26ch; margin-top: 26px; color: #f4faf6; font-size: var(--type-section) !important; font-weight: 600 !important; line-height: 1.06 !important; }
.cta-box h2 span { color: var(--accent-bright); }
.cta-box-inner > p { max-width: 51ch; margin: 22px 0 0; color: #adc1b5; font-size: 16px; line-height: 1.7; }
.cta-box .cta-button { width: fit-content; min-width: 250px; margin-top: 32px; }
.cta-proof { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 22px; }
.cta-proof span { display: inline-flex; align-items: center; gap: 8px; color: #9fb5a8; font-size: 12px; font-weight: 600; }
.cta-proof span::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--accent-bright); box-shadow: 0 0 0 4px rgba(110,231,161,.08); }

footer {
  margin-top: 0;
  padding: clamp(64px,8vw,96px) 0 28px;
  border-top: 1px solid rgba(110,231,161,.22);
  box-shadow: inset 0 14px 34px -22px rgba(0,0,0,.85);
  background:
    radial-gradient(circle at 20% 0,rgba(22,163,74,.07),transparent 26%),
    #050c08;
  color: #fff;
}
footer .footer-top { grid-template-columns: minmax(0,1.6fr) repeat(3,minmax(130px,.65fr)); gap: clamp(34px,5vw,72px); }
.footer-logo { display: inline-flex; align-items: center; gap: 10px; color: #f5fbf7; text-decoration: none; }
.footer-logo > span { font-family: var(--font-display); font-size: 26px; font-weight: 700; line-height: 1; letter-spacing: -.055em; }
.footer-logo i { color: var(--accent-bright); font-style: normal; }
footer .footer-brand p { max-width: 31ch !important; margin-top: 24px !important; color: #91a69a !important; font-size: 15px !important; }
footer .footer-brand .action-pill { margin-top: 28px; }
footer .footer-col-title { margin-bottom: 12px; color: #71887b; font-size: 10px; letter-spacing: .1em; }
footer .footer-col { gap: 6px; }
footer .footer-col a { min-height: 36px; color: #a9bbb1; font-size: 14px; }
footer .footer-col a:hover { color: #f3fbf6; }
.footer-word {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: clamp(64px,8vw,100px) 0 28px;
  color: transparent;
  background: none;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 1px rgba(165,205,181,.12);
  font-size: clamp(72px,11vw,150px);
  font-weight: 650;
  letter-spacing: -.075em;
}
.footer-word span { color: rgba(255,255,255,.035); -webkit-text-fill-color: rgba(255,255,255,.035); -webkit-text-stroke: 0; }
footer .footer-bottom { padding-top: 22px; border-color: rgba(255,255,255,.09); color: #6f8579; font-size: 12px; }
footer .footer-bottom a { color: inherit; text-decoration: none; }
footer .footer-bottom a:hover { color: #c3d5ca; }

@media (max-width: 1080px) {
  .module-explorer { grid-template-columns: 210px minmax(0,1fr); }
  .module-explorer .mtab-panel.active { grid-template-columns: minmax(250px,.78fr) minmax(0,1.22fr); }}

@media (max-width: 900px) {
  .demo-band { grid-template-columns: 1fr; min-height: 0; }
  .demo-spotlight { max-width: none; }
  .module-explorer { grid-template-columns: 1fr; padding: 8px; }
  .module-explorer .mtab-nav {
    flex-direction: row;
    overflow-x: auto;
    padding: 12px;
    scrollbar-width: none;
  }
  .module-explorer .mtab-nav::-webkit-scrollbar { display: none; }
  .module-explorer-label { display: none; }
  .module-explorer .mtab-btn { width: auto; flex: 0 0 auto; padding: 9px 13px; }
  .module-explorer .mtab-content,
  .module-explorer .mtab-panel.active { min-height: 0; }
  .module-explorer .mtab-panel.active { grid-template-columns: 1fr; }
  .module-explorer .mtab-mockup.real-screen { min-height: 430px; border-left: 0; border-top: 1px solid #d6e0d9; }
  .faq-layout { grid-template-columns: 1fr; gap: 38px; }
  .faq-intro { position: static; }
  .faq-intro h2 { max-width: 16ch; }
  .faq-contact { max-width: 420px; }
  .cta-signal { right: -60px; opacity: .72; }
  footer .footer-top { grid-template-columns: repeat(2,minmax(0,1fr)); }
  footer .footer-brand { grid-column: 1 / -1; }}

@media (max-width: 640px) {
  .demo-section { padding-block: 38px; }
  .demo-band { gap: 26px; padding: 26px 20px; border-radius: 26px; }
  .demo-band h2 { font-size: var(--type-section) !important; }
  .demo-band-steps { flex-direction: column; align-items: flex-start; margin-top: 26px; }
  .demo-spotlight { padding: 24px 20px; border-radius: 20px; }
  .demo-spotlight-time strong { font-size: 66px; }
  .module-explorer { border-radius: 24px; }
  .module-explorer .mtab-content { border-radius: 18px; }
  .module-explorer .mtab-btn span:not(.mtab-num) { display: inline; }
  .module-explorer .mtab-text { padding: 30px 22px; }
  .module-explorer .mtab-mockup.real-screen { min-height: 300px; }
  .module-explorer .mtab-mockup.real-screen .mtab-mockup-bg { padding: 22px 12px 46px; }
  .faq-layout { gap: 30px; }
  .faq-intro h2 { font-size: var(--type-section); }
  .faq-layout .faq-trigger { grid-template-columns: 28px minmax(0,1fr) 32px; min-height: 72px; padding: 14px; font-size: 15px; }
  .faq-layout .faq-body { padding-right: 18px; padding-left: 56px; font-size: 14px; }
  .cta-final { padding: 40px 0; }
  .cta-box { min-height: 0; border-radius: 28px; }
  .cta-box-inner { min-height: 0; padding: 38px 24px; }
  .cta-box h2 { font-size: var(--type-section) !important; }
  .cta-box .cta-button { width: 100%; min-width: 0; }
  .cta-signal { top: 22%; right: -110px; width: 240px; height: 240px; }
  .cta-proof { flex-direction: column; gap: 9px; }
  footer { padding-top: 56px; }
  footer .footer-top { grid-template-columns: 1fr; gap: 34px; }
  footer .footer-brand { grid-column: auto; }
  .footer-word { display: block; font-size: 66px; }
  .footer-word span { display: none; }
  footer .footer-bottom { align-items: flex-start; flex-direction: column; }}

@media (prefers-reduced-motion: reduce) {}

/* ─── FINANCE PANORAMA ─── */
.finance-panorama-section {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 9% 14%, rgba(74,222,128,.13), transparent 25%),
    radial-gradient(circle at 92% 82%, rgba(22,163,74,.08), transparent 24%),
    #f4f8f5;
}
.finance-panorama-section::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .32;
  background-image:
    linear-gradient(rgba(24,83,48,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(24,83,48,.035) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: linear-gradient(to bottom,#000,transparent 62%);
}
.finance-panorama-section .wrap { position: relative; }
.finance-panorama-head {
  display: block;
  max-width: 1160px;
  margin: 0 auto clamp(44px,5vw,66px);
  text-align: center;
}
.finance-panorama-head h2 {
  max-width: 19ch;
  margin: 22px auto 0;
  color: #101b15;
  font-family: var(--font-display);
  font-size: var(--type-section);
  font-weight: 650;
  line-height: var(--leading-heading);
  letter-spacing: -.045em;
}
.finance-panorama-head > p {
  max-width: 58ch;
  margin: 20px auto 0;
  color: #5f6f66;
  font-size: var(--type-body);
  line-height: var(--leading-body);
}
.finance-panorama {
  position: relative;
  max-width: 1160px;
  margin: 0 auto;
  padding: clamp(20px,2vw,28px);
  border: 1px solid rgba(25,79,47,.13);
  border-radius: 34px;
  background: rgba(255,255,255,.72);
  box-shadow: 0 42px 90px -64px rgba(10,67,34,.62), inset 0 1px 0 rgba(255,255,255,.9);
  backdrop-filter: blur(18px);
}
.finance-panorama-screen {
  width: min(100%,960px);
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid #cfddd4;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 38px 70px -42px rgba(10,58,31,.48);
}
.finance-panorama-bar {
  display: flex;
  min-height: 48px;
  align-items: center;
  justify-content: space-between;
  padding: 0 18px;
  border-bottom: 1px solid #dce6df;
  background: #f5f8f6;
  color: #53655a;
  font-size: 11px;
  font-weight: 700;
}
.finance-panorama-bar span { display: inline-flex; align-items: center; gap: 9px; }
.finance-panorama-bar i { width: 7px; height: 7px; border-radius: 50%; background: var(--accent-solid); box-shadow: 0 0 0 4px rgba(49,200,117,.1); }
.finance-panorama-bar strong { color: var(--accent-deep); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.finance-panorama-screen img { display: block; width: 100%; height: auto; }
.finance-panorama-benefits {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 10px;
  margin-top: 16px;
}
.finance-panorama-benefits article {
  display: grid;
  grid-template-columns: 34px minmax(0,1fr);
  gap: 14px;
  min-height: 150px;
  padding: 24px 22px;
  border: 1px solid #dbe6df;
  border-radius: 20px;
  background: rgba(255,255,255,.88);
}
.finance-panorama-benefits article > span {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 10px;
  background: #e6f6eb;
  color: var(--accent-deep);
  font-size: 10px;
  font-weight: 800;
}
.finance-panorama-benefits h3 { color: #17221b; font-size: 17px; font-weight: 650; line-height: 1.28; letter-spacing: -.025em; }
.finance-panorama-benefits p { margin-top: 7px; color: #66766d; font-size: 13px; line-height: 1.58; }
.finance-panorama-flow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 10px;
  padding: 14px 16px 14px 20px;
  border-radius: 18px;
  background: #10251a;
}
.finance-panorama-flow > strong { color: #edf8f1; font-size: 13px; font-weight: 700; }
.finance-panorama-flow > div { display: flex; align-items: center; gap: 8px; }
.finance-panorama-flow span { padding: 7px 10px; border-radius: 999px; background: rgba(110,231,161,.1); color: #c7e3d1; font-size: 11px; font-weight: 700; }
.finance-panorama-flow i { color: #688576; font-size: 12px; font-style: normal; }
.finance-panorama-note { margin-top: 14px; color: #7a8981; font-size: 11px; text-align: center; }

/* ─── PRICING CARDS ─── */
.pricing-foundation {
  display: grid;
  grid-template-columns: minmax(230px,.75fr) minmax(0,1.55fr);
  gap: 26px 54px;
  max-width: 1160px;
  margin: 0 auto 18px;
  padding: 30px 34px;
  border: 1px solid rgba(110,231,161,.16);
  border-radius: 26px;
  color: #fff;
  background:
    radial-gradient(circle at 100% 0,rgba(74,222,128,.16),transparent 34%),
    linear-gradient(135deg,#0b1812,#11281c);
  box-shadow: 0 28px 60px -48px rgba(5,56,26,.8);
}
.pricing-foundation-label { display: inline-flex; align-items: center; gap: 9px; color: #a9beb2; font-size: 11px; font-weight: 700; }
.pricing-foundation-label i { width: 7px; height: 7px; border-radius: 50%; background: var(--accent-bright); box-shadow: 0 0 0 4px rgba(110,231,161,.1); }
.pricing-foundation h3 { max-width: 18ch; margin-top: 15px; color: #f3faf6; font-size: 24px; font-weight: 600; line-height: 1.18; letter-spacing: -.035em; }
.pricing-foundation-items { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); align-self: center; }
.pricing-foundation-items span { display: flex; align-items: center; gap: 11px; min-height: 46px; padding: 4px 16px; border-left: 1px solid rgba(255,255,255,.08); color: #c7d7ce; font-size: 13px; }
.pricing-foundation-items b { color: var(--accent-bright); font-size: 9px; letter-spacing: .08em; }
.pricing-foundation > p { grid-column: 1 / -1; margin-top: -10px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.08); color: #7f978a; font-size: 11px; }
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 14px;
  max-width: 1160px;
  margin: 0 auto;
}
.pricing-card {
  position: relative;
  display: flex;
  min-height: 500px;
  flex-direction: column;
  padding: 30px 28px 26px;
  overflow: hidden;
  border: 1px solid #d9e3dc;
  border-radius: 26px;
  background: rgba(255,255,255,.9);
  box-shadow: 0 24px 56px -46px rgba(10,61,31,.45);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.pricing-card:hover { transform: translateY(-5px); border-color: rgba(49,200,117,.38); box-shadow: 0 36px 66px -48px rgba(8,75,37,.58); }
.pricing-card-featured {
  border-color: rgba(49,200,117,.35);
  background: linear-gradient(155deg,#f5fff8,#e9f8ee);
  box-shadow: 0 30px 68px -48px rgba(9,97,43,.58);
}
.pricing-card-premium {
  border-color: rgba(110,231,161,.2);
  color: #fff;
  background: radial-gradient(circle at 100% 0,rgba(74,222,128,.17),transparent 36%),#10251a;
}
.pricing-card-ribbon { position: absolute; top: 0; right: 24px; padding: 8px 12px; border-radius: 0 0 10px 10px; background: var(--accent-solid); color: #fff; font-size: 9px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.pricing-card-top { display: flex; min-height: 34px; align-items: center; justify-content: space-between; gap: 14px; }
.pricing-card-top > span { color: var(--accent-deep); font-size: 10px; font-weight: 800; letter-spacing: .1em; }
.pricing-card-top small { padding: 6px 9px; border: 1px solid #dfe7e2; border-radius: 999px; color: #68766d; font-size: 9px; font-weight: 700; white-space: nowrap; }
.pricing-card-heading { margin-top: 42px; }
.pricing-card-heading > p { color: #3e5447; font-size: 12px; font-weight: 700; }
.pricing-card h3 { margin-top: 8px; color: #111b15; font-size: 31px; font-weight: 650; line-height: 1; letter-spacing: -.05em; }
.pricing-card-copy { min-height: 68px; margin-top: 20px; color: #66766d; font-size: 14px; line-height: 1.65; }
.pricing-card ul { display: grid; gap: 11px; margin-top: 24px; padding-top: 22px; border-top: 1px solid #e1e8e3; }
.pricing-card li { display: flex; align-items: center; gap: 10px; color: #35473c; font-size: 13px; }
.pricing-card li::before { content: '✓'; display: grid; place-items: center; width: 20px; height: 20px; flex: 0 0 20px; border-radius: 50%; background: #e4f6ea; color: var(--accent-deep); font-size: 10px; font-weight: 800; }
.pricing-card .action-pill { width: 100%; margin-top: auto; font-size: 13px; }
.pricing-card-premium .pricing-card-top > span { color: var(--accent-bright); }
.pricing-card-premium .pricing-card-top small { border-color: rgba(110,231,161,.17); background: rgba(110,231,161,.07); color: #bad9c6; }
.pricing-card-premium .pricing-card-heading > p { color: #b5cabe; }
.pricing-card-premium h3 { color: #f5fbf7; }
.pricing-card-premium .pricing-card-copy { color: #9eb3a7; }
.pricing-card-premium ul { border-color: rgba(255,255,255,.09); }
.pricing-card-premium li { color: #c9d9d0; }
.pricing-card-premium li::before { background: rgba(110,231,161,.12); color: var(--accent-bright); }
.pricing-guidance {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  max-width: 1160px;
  margin: 18px auto 0;
  padding: 18px 20px 18px 26px;
  border: 1px solid #d8e4dc;
  border-radius: 22px;
  background: rgba(255,255,255,.78);
}
.pricing-guidance > div { display: flex; flex-wrap: wrap; gap: 4px 8px; color: #6a796f; font-size: 13px; line-height: 1.55; }
.pricing-guidance strong { color: #1d3024; }
.pricing-guidance .action-pill { flex: 0 0 auto; }

@media (max-width: 900px) {
  .finance-panorama-head > p { max-width: 58ch; }
  .finance-panorama-benefits { grid-template-columns: 1fr; }
  .finance-panorama-benefits article { min-height: 0; }
  .pricing-foundation { grid-template-columns: 1fr; gap: 24px; }
  .pricing-foundation-items { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .pricing-foundation > p { margin-top: 0; }
  .pricing-grid { grid-template-columns: 1fr; }
  .pricing-card { min-height: 0; }
  .pricing-card .action-pill { margin-top: 30px; }}

@media (max-width: 640px) {
  .finance-panorama-head { margin-bottom: 34px; }
  .finance-panorama { padding: 8px; border-radius: 25px; }
  .finance-panorama-screen { border-radius: 18px; }
  .finance-panorama-bar { min-height: 42px; padding: 0 13px; }
  .finance-panorama-benefits { margin-top: 8px; }
  .finance-panorama-benefits article { padding: 20px 16px; border-radius: 17px; }
  .finance-panorama-flow { align-items: flex-start; flex-direction: column; gap: 12px; }
  .finance-panorama-flow > div { width: 100%; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
  .finance-panorama-flow > div::-webkit-scrollbar { display: none; }
  .finance-panorama-flow span { white-space: nowrap; }
  .pricing-foundation { padding: 26px 22px; border-radius: 24px; }
  .pricing-foundation-items { grid-template-columns: 1fr; }
  .pricing-foundation-items span { padding: 4px 0; border-left: 0; border-top: 1px solid rgba(255,255,255,.08); }
  .pricing-card { padding: 28px 22px 22px; border-radius: 22px; }
  .pricing-card-heading { margin-top: 34px; }
  .pricing-guidance { align-items: stretch; flex-direction: column; padding: 20px; }
  .pricing-guidance .action-pill { width: 100%; }}

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

/* ─── FULL-BLEED SECTION RHYTHM ─── */
.fit-band-section {
  position: relative;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(circle at 12% 4%,rgba(51,190,106,.18),transparent 31%),
    radial-gradient(circle at 92% 90%,rgba(30,80,158,.16),transparent 34%),
    linear-gradient(135deg,#09140e,#0d1d14 62%,#101a2a);
}
.fit-band-section::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .26;
  background-image:
    linear-gradient(rgba(74,222,128,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(74,222,128,.055) 1px,transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(circle at 18% 35%,#000,transparent 66%);
}
.fit-band-section .wrap { position: relative; }
.fit-band-section .fit-section {
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.fit-band-section .fit-section::after { display: none; }
.fit-band-section .fit-inner { padding: 0; }
.fit-band-section .fit-top {
  display: block;
  margin-bottom: clamp(44px,5vw,66px);
  text-align: center;
}
.fit-band-section .fit-top h2 { max-width: 26ch; margin: 0 auto; font-weight: 600; }
.fit-band-section .fit-top p { max-width: 52ch; margin: 20px auto 0; color: #a8bcb1; }
.fit-band-section .fit-grid {
  border-color: rgba(255,255,255,.11);
  border-radius: 24px;
  background: rgba(255,255,255,.025);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
}
.fit-band-section .fit-card { min-height: 170px; background: rgba(255,255,255,.02); }

.demo-section {
  color: #fff;
  background:
    radial-gradient(circle at 82% 20%,rgba(74,222,128,.16),transparent 26%),
    radial-gradient(circle at 10% 100%,rgba(22,163,74,.11),transparent 34%),
    linear-gradient(135deg,#08150f,#10291d);
}
.demo-section .demo-band {
  min-height: 0;
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.demo-section .demo-band::before { display: none; }
.demo-section .demo-spotlight {
  min-height: 390px;
  background: rgba(255,255,255,.055);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.09),0 30px 70px -48px rgba(0,0,0,.95);
}

.finance-panorama {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}
.finance-panorama-screen { width: min(100%,1040px); }

.process-sec {
  position: relative;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(circle at 4% 100%,rgba(58,180,103,.16),transparent 31%),
    radial-gradient(circle at 94% 8%,rgba(74,222,128,.1),transparent 27%),
    linear-gradient(145deg,#0d1b15,#08130e);
}
.process-sec::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .25;
  background-image:
    linear-gradient(rgba(74,222,128,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(74,222,128,.05) 1px,transparent 1px);
  background-size: 68px 68px;
  mask-image: linear-gradient(90deg,#000,transparent 70%);
}
.process-sec .wrap { position: relative; }
.process-sec .process-journey {
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.cta-final {
  position: relative;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(circle at 78% 30%,rgba(74,222,128,.18),transparent 25%),
    linear-gradient(135deg,#0a1711,#10291d);
}
.cta-final .cta-box {
  min-height: 330px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.cta-final .cta-box::before { opacity: .34; }
.cta-final .cta-box-inner { min-height: 330px; padding-inline: 0; }

@media (max-width: 900px) {
  .fit-band-section .fit-top p { max-width: 58ch; }
  .process-sec .process-journey { gap: 42px; }}

@media (max-width: 640px) {
  .fit-band-section .fit-inner { padding: 0; }
  .fit-band-section .fit-grid { border-radius: 20px; }
  .demo-section .demo-band { padding: 0; }
  .demo-section .demo-spotlight { min-height: 0; }
  .finance-panorama { padding: 0; }
  .cta-final .cta-box-inner { min-height: 0; padding-inline: 0; }}

/* ───────── logotyp ─────────
   Plik jest bitmapa 326x120 podana w podwojnej rozdzielczosci, wiec wysokosc
   ustawiamy na sztywno, a szerokosc niech sie dolicza z proporcji. */
.nav-brand-logo { height: 42px; width: auto; display: block; }
/* W stopce logotyp jest wiekszy, ale przygaszony - ma byc podpisem, a nie
   drugim akcentem po nawigacji. Bez zielonego kwadratu, caly monochromatyczny. */
.footer-brand-logo { height: 52px; width: auto; display: block; opacity: .62; }
@media (max-width: 640px) {
  .nav-brand-logo { height: 32px; }
}

/* Logotyp potrzebuje wiecej powietrza po lewej niz domyslne 16 px z klasy pl-4. */
.nav-bar:not(#mobile-menu) { padding-left: 30px; }
@media (max-width: 640px) { .nav-bar:not(#mobile-menu) { padding-left: 18px; } }

/* Lewa kolumna FAQ jest nizsza od listy pytan - bez tego roznica lezy jako
   pustka pod mailem kontaktowym. Ten sam zabieg co w sekcji wdrozenia. */
.faq-layout { align-items: center; }
@media (max-width: 900px) { .faq-layout { align-items: start; } }

/* ───────── waskie telefony ─────────
   Ponizej ~400 px logo, przycisk demo i hamburger nie mieszcza sie w jednym
   wierszu i pasek nawigacji lamie sie na dwa. Blok stoi na koncu pliku celowo:
   wczesniej przegrywal kolejnoscia z regulami dla 640 px. Regula zbiorcza
   przyciskow ma !important na paddingu i foncie, stad !important i tutaj. */
@media (max-width: 400px) {
  .nav-brand-logo { height: 26px; }
  .nav-bar:not(#mobile-menu) { padding-left: 14px; padding-right: 8px; gap: 8px; }
  body .nav-bar button.action-pill-sm {
    padding: 5px 5px 5px 13px !important;
    font-size: 13.5px !important;
    min-height: 44px !important;
  }
  body .nav-bar button.action-pill-sm .action-pill-icon { width: 30px; height: 30px; }
}
@media (max-width: 345px) {
  /* Na najwezszych ekranach strzalka w przycisku demo ustepuje - sam tekst
     wystarczy, a pasek zostaje w jednym wierszu. */
  body .nav-bar button.action-pill-sm { padding: 5px 14px !important; }
  body .nav-bar button.action-pill-sm .action-pill-icon { display: none; }
}

@media (max-width: 900px) {
  /* Cel dotykowy ma miec 44 px - w stopce linki mialy 36, a mail 28. */
  footer .footer-col a { min-height: 44px; display: flex; align-items: center; }
  .faq-contact a { min-height: 44px; display: inline-flex; align-items: center; }
  footer .footer-bottom a { min-height: 44px; display: inline-flex; align-items: center; }
}

/* ───────── "Przed Flow": rozproszone slady zamiast rownej listy ─────────
   Kolumna ma pokazywac balagan, a rowna lista z numerami 01-04 wygladala
   rownie poukladanie jak kolumna "po". Teraz forma niesie tresc: cztery
   scinki z roznych zrodel, kazdy inaczej przechylony, lekko na siebie
   nachodzace. Obroty sa staloe, nie losowe - uklad ma byc powtarzalny. */
.scatter {
  position: relative;
  margin: 26px 0 30px;
  min-height: 330px;
}
.scrap {
  position: absolute;
  padding: 13px 15px;
  border-radius: 12px;
  background: #16211b;
  border: 1px solid rgba(255,255,255,.09);
  box-shadow: 0 16px 34px -20px rgba(0,0,0,.9);
}
.scrap-src {
  display: block;
  margin-bottom: 7px;
  color: #7d9488;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .04em;
}
.scrap p { margin: 0; color: #d3e0d9; font-size: 13.5px; line-height: 1.45; }

.scrap-chat {
  top: 0; left: 0; width: 63%;
  transform: rotate(-2.2deg);
  border-radius: 12px 12px 12px 3px;
  background: #1b2b22;
}
.scrap-sheet {
  top: 96px; right: 0; width: 56%;
  transform: rotate(1.8deg);
  background: #141d18;
}
.scrap-rows { display: grid; gap: 4px; }
.scrap-rows div {
  display: flex; justify-content: space-between; align-items: center;
  padding: 4px 7px; border-radius: 5px;
  background: rgba(255,255,255,.045);
  font-size: 12px;
}
.scrap-rows b { color: #b8c8bf; font-weight: 600; }
.scrap-rows i { color: #8aa396; font-style: normal; }
.scrap-rows .pusty { background: rgba(239,68,68,.11); }
.scrap-rows .pusty i { color: #f08a8a; }

.scrap-note {
  top: 222px; left: 0; width: 49%;
  transform: rotate(-1.4deg);
  background: #1d2118;
  border-color: rgba(214,211,109,.16);
}
.scrap-call {
  top: 248px; right: 2%; width: 44%;
  transform: rotate(2.4deg);
  background: #221a1a;
  border-color: rgba(239,68,68,.2);
}
.scrap-call .scrap-src { color: #e08b8b; }

.before-summary {
  display: flex; flex-wrap: wrap; gap: 7px;
  margin: 0 0 14px; padding: 0; list-style: none;
}
.before-summary li {
  padding: 5px 11px; border-radius: 99px;
  border: 1px solid rgba(255,255,255,.1);
  color: #9fb3a7; font-size: 12.5px;
}
.before-foot { margin: 0; color: #8fa498; font-size: 13.5px; line-height: 1.5; }

@media (max-width: 900px) {
  /* Na waskim ekranie przechylone karty na siebie nachodza i robi sie
     nieczytelnie - ustawiamy je w kolumne i prostujemy. */
  .scatter { min-height: 0; display: grid; gap: 10px; }
  .scrap { position: static; width: auto !important; transform: none !important; }
}

/* Naglowki sekcji lamaly sie nierowno - dluga pierwsza linia i krotka
   koncowka. `balance` rozklada slowa rowno miedzy linie. Wyzsza specyficznosc,
   bo wczesniejsze reguly ustawiaja tu `pretty`. */
body section .s-head h2,
body section .fit-top h2,
body section .demo-band h2,
body section .finance-panorama-head h2,
body section .process-journey-intro h2,
body section .faq-intro h2,
body section .cta-box h2 { text-wrap: balance; }

/* ───────── pasek nawigacji: mniejsze zaokraglenie ─────────
   34 px robilo z paska pigulke, ktora odstawala od reszty serwisu.
   22 px jak na stronie glownej. Przycisk CTA idzie za paskiem - okragla
   pigulka w kanciastym pasku wygladala jak wklejona z innego projektu. */
header .nav-bar { border-radius: 22px !important; }
header #mobile-menu.nav-bar { border-radius: 18px !important; }
body .nav-bar button.action-pill-sm,
body .nav-bar .action-pill {
  border-radius: 13px !important;
}
body .nav-bar .action-pill-icon { border-radius: 9px !important; }



/* ───────── nawigacja dwupoziomowa ─────────
   Pasek marki na gorze prowadzi do siostrzanych produktow, pasek pod nim
   nalezy do tej strony i niesie sciezke. Przy Flow HR i Flow Fleet zmienia
   sie wylacznie drugi poziom - pierwszy zostaje ten sam w calym serwisie. */
.brand-links {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-right: auto;
  padding-left: 18px;
  margin-left: 16px;
  border-left: 1px solid rgba(255,255,255,.12);
}
.brand-links a {
  padding: 6px 11px;
  border-radius: 9px;
  color: rgba(255,255,255,.58);
  font-size: 13.5px;
  text-decoration: none;
  transition: color .2s ease, background .2s ease;
}
.brand-links a:hover { color: #fff; background: rgba(255,255,255,.07); }

.product-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  width: min(1160px, calc(100% - 32px));
  margin: 8px auto 0;
  padding: 9px 20px;
  border-radius: 14px;
  background: rgba(12,24,18,.5);
  border: 1px solid rgba(255,255,255,.07);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.product-name {
  color: var(--accent-bright, #6ee7a1);
  font-family: var(--font-display);
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: -.01em;
  white-space: nowrap;
}
.product-sep { width: 1px; height: 15px; background: rgba(255,255,255,.14); }
.product-crumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: rgba(255,255,255,.44);
  white-space: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
}
.product-crumbs::-webkit-scrollbar { display: none; }
.product-crumbs a { color: inherit; text-decoration: none; transition: color .2s ease; }
.product-crumbs a:hover { color: rgba(255,255,255,.8); }
.product-crumbs i { font-style: normal; color: rgba(255,255,255,.22); }
.product-crumbs [aria-current] { color: rgba(255,255,255,.82); font-weight: 600; }

@media (max-width: 1100px) { .brand-links { display: none; } }
@media (max-width: 760px) {
  /* Na telefonie zostaje sama nazwa produktu - sciezka zabieralaby caly wiersz. */
  .product-bar { gap: 0; padding: 8px 16px; }
  .product-sep, .product-crumbs { display: none; }
}

/* Po rozdzieleniu poziomow: gorny pasek to marka, dolny to ta strona.
   Menu sekcji zjechalo nizej, wiec traci tlo pigulki i zrownuje sie
   ze sciezka. */
.product-bar .nav-links {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: auto;
}
.product-bar .nav-link {
  padding: 5px 11px !important;
  border-radius: 8px;
  color: rgba(255,255,255,.6);
  font-size: 13px;
}
.product-bar .nav-link:hover { color: #fff; background: rgba(255,255,255,.07); }
.product-bar .nav-link.is-active { color: #fff; background: rgba(73,180,113,.16); }

@media (max-width: 1100px) {
  .brand-links { display: none; }
  .product-bar .nav-links { display: none !important; }
}

/* ───────── podstrona: paski pelnej szerokosci ─────────
   Pigulka sprawdza sie przy jednym plywajacym pasku (strona glowna).
   Przy dwoch poziomach dwa zaokraglone prostokaty jeden pod drugim czytaja
   sie jak dwa osobne widgety zamiast jak struktura serwisu - wiec tutaj
   paski ida na pelna szerokosc i przylegaja do gory okna. */
header { padding: 0 !important; }
header .nav-bar {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  border-radius: 0 !important;
  border-left: 0 !important;
  border-right: 0 !important;
  border-top: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  background: rgba(10,20,15,.82) !important;
}
header.compact .nav-bar { max-width: none !important; }
/* Zawartosc obu paskow trzyma sie tej samej kolumny co reszta strony.
   Hero uzywa width: min(1560px, 100% - 72px), czyli 36 px marginesu - tyle samo
   musza miec paski, inaczej logo nie stoi w jednej linii z naglowkiem. */
header .nav-bar > *:first-child { margin-left: max(36px, calc((100% - 1560px) / 2)); }
header .nav-bar > .nav-right:last-child { margin-right: max(36px, calc((100% - 1560px) / 2)); }

.product-bar {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding-left: max(36px, calc((100% - 1560px) / 2)) !important;
  padding-right: max(36px, calc((100% - 1560px) / 2)) !important;
  border-radius: 0 !important;
  border-left: 0; border-right: 0; border-top: 0;
  background: rgba(8,16,12,.7);
}

/* ───────── menu marki: rozwijane, jak na stronie glownej ─────────
   Ciemny wariant dropdownu z `pl/index.html` - ten sam uklad (ikona, nazwa,
   opis), tylko kolory pod ciemny pasek. */
.brand-trigger {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: 9px;
  background: none;
  border: 0;
  color: rgba(255,255,255,.62);
  font-family: var(--font-body);
  font-size: 13.5px;
  cursor: pointer;
  transition: color .2s ease, background .2s ease;
}
.brand-trigger svg { transition: transform .2s ease; }
.nav-dropdown:hover .brand-trigger,
.nav-dropdown:focus-within .brand-trigger { color: #fff; background: rgba(255,255,255,.07); }
.nav-dropdown:hover .brand-trigger svg,
.nav-dropdown:focus-within .brand-trigger svg { transform: rotate(180deg); }

.nav-dropdown { position: relative; }
/* Mostek, zeby kursor mogl zjechac z przycisku na menu bez gubienia hovera. */
.nav-dropdown::after { content: ''; position: absolute; top: 100%; left: 0; width: 100%; height: 14px; }

.nav-dropdown-menu {
  position: absolute;
  top: calc(100% + 12px);
  left: 0;
  min-width: 308px;
  padding: 8px;
  border-radius: 16px;
  background: #0e1a14;
  border: 1px solid rgba(255,255,255,.1);
  box-shadow: 0 24px 54px -18px rgba(0,0,0,.8);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-6px);
  transition: opacity .18s ease, transform .18s ease;
  z-index: 200;
}
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu {
  opacity: 1; pointer-events: auto; transform: translateY(0);
}
.nav-dd-item {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 10px; border-radius: 11px;
  text-decoration: none;
  transition: background .16s ease;
}
.nav-dd-item:hover { background: rgba(255,255,255,.06); }
.nav-dd-item[aria-current] { background: rgba(34,197,94,.09); }
.nav-dd-icon {
  width: 32px; height: 32px; border-radius: 9px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.nav-dd-label { display: block; color: #eef5f1; font-size: 13.5px; font-weight: 600; margin-bottom: 2px; }
.nav-dd-sub { display: block; color: #8aa093; font-size: 12px; line-height: 1.4; }

/* Pasek produktu lezal nad rozwinietym menu i zaslanial pierwsza pozycje. */
header .nav-bar { position: relative; z-index: 60; }
.product-bar { position: relative; z-index: 50; }

/* Pozycje paska marki bez rozwijania - ten sam rytm co przycisk "Produkty". */
.brand-plain {
  padding: 7px 12px;
  border-radius: 9px;
  color: rgba(255,255,255,.62);
  font-size: 13.5px;
  text-decoration: none;
  transition: color .2s ease, background .2s ease;
}
.brand-plain:hover { color: #fff; background: rgba(255,255,255,.07); }

/* ───────── jasny pasek nawigacji ─────────
   Oba paski przechodza na bialy, tak jak strony Firma i Kontakt. Na ciemnym
   hero bialy pasek czyta sie jak warstwa lezaca na tresci, a nie jak jej czesc. */
header .nav-bar {
  background: rgba(255,255,255,.9) !important;
  border-bottom: 1px solid #e3eae6 !important;
  box-shadow: none !important;
  backdrop-filter: blur(20px) saturate(1.3);
  -webkit-backdrop-filter: blur(20px) saturate(1.3);
}
header .nav-bar .brand-links { border-left-color: #e3eae6; }
header .nav-bar .brand-trigger,
header .nav-bar .brand-plain { color: #55665d; }
header .nav-bar .brand-trigger:hover,
header .nav-bar .brand-plain:hover { color: #0b1310; background: rgba(11,19,16,.05); }

.product-bar {
  background: #f5f8f6 !important;
  border-bottom: 1px solid #e3eae6;
}
.product-bar .product-name { color: #16a34a; }
.product-bar .product-sep { background: #e3eae6; }
.product-bar .product-crumbs { color: #8b9c93; }
.product-bar .product-crumbs a:hover { color: #0b1310; }
.product-bar .product-crumbs i { color: #c3d0c9; }
.product-bar .product-crumbs [aria-current] { color: #55665d; }
.product-bar .nav-link { color: #55665d; }
.product-bar .nav-link:hover { color: #0b1310; background: rgba(11,19,16,.05); }
.product-bar .nav-link.is-active { color: #0b1310; background: rgba(22,163,74,.1); }

/* rozwijane menu w jasnym wariancie */
.nav-dropdown-menu {
  background: #fff;
  border-color: #e3eae6;
  box-shadow: 0 20px 48px -20px rgba(11,19,16,.28);
}
.nav-dd-item:hover { background: rgba(11,19,16,.045); }
.nav-dd-item[aria-current] { background: var(--g-l, #f0faf4); }
.nav-dd-label { color: #0b1310; }
.nav-dd-sub { color: #7d8f85; }

/* CTA w jasnym pasku: zielony, zeby zostal najmocniejszym punktem */
body header .nav-bar button.action-pill-sm {
  background: #16a34a !important;
  border-color: #16a34a !important;
  color: #fff !important;
}
body header .nav-bar button.action-pill-sm:hover { background: #15803d !important; border-color: #15803d !important; }
body header .nav-bar button.action-pill-sm .action-pill-icon { background: rgba(255,255,255,.22) !important; color: #fff !important; }

/* ───────── wysokosc hero pod dwoma paskami ─────────
   Paski marki i produktu zabieraja razem ok. 118 px. Hero mialo staloa
   wysokosc, wiec po dodaniu drugiego paska robilo sie niskie. Teraz wypelnia
   ekran pod nimi, z dolna granica na wypadek niskich okien. */
.flow-hero {
  min-height: max(780px, calc(100svh - 118px)) !important;
  padding-top: clamp(64px, 7vh, 96px) !important;
  padding-bottom: clamp(56px, 6vh, 80px) !important;
}
@supports not (height: 100svh) {
  .flow-hero { min-height: max(780px, calc(100vh - 118px)) !important; }
}
@media (max-width: 900px) {
  .flow-hero { min-height: 0 !important; padding-top: 52px !important; }
}

/* ───────── gradienty i siatka, jak na stronie glownej ─────────
   Flow bylo plaskimi plamami: albo prawie czarna, albo prawie biala sekcja.
   Ta sama warstwa co na `pl/index.html`: dwie poswiaty i siatka kropek.
   Na jasnych sekcjach delikatna, na ciemnych mocniejsza, zeby czern
   przestala byc jednolita. */
.s, .ba-section, .bento-sec, .cta-final, .flow-hero { position: relative; }
.s::before, .ba-section::before, .bento-sec::before, .cta-final::before, .flow-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
/* Bez nadpisywania pozycji dzieciom: warstwa ::before ma z-index 0 i lezy
   pod trescia z racji kolejnosci rysowania. Wczesniejsza wersja ustawiala
   `position: relative` wszystkim dzieciom i wyrzucala z ukladu elementy
   dekoracyjne, ktore byly `absolute` - hero rozjezdzalo sie o 400 px. */

/* jasne sekcje */
.ba-section::before, .bento-sec::before,
#moduly::before, #finanse::before, #pakiety::before, #faq::before {
  background:
    radial-gradient(ellipse 55% 62% at 78% 12%, rgba(22,163,74,.09) 0%, transparent 72%),
    radial-gradient(ellipse 52% 58% at 8% 82%, rgba(79,70,229,.07) 0%, transparent 72%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28'%3E%3Ccircle cx='14' cy='14' r='1' fill='%23111827' opacity='0.06'/%3E%3C/svg%3E");
}

/* ciemne sekcje - te same poswiaty, mocniejsze, zeby tlo nie bylo plaska czernia */
#dla-kogo::before, #demo::before, #wdrozenie::before, .cta-final::before {
  background:
    radial-gradient(ellipse 58% 64% at 80% 10%, rgba(74,222,128,.10) 0%, transparent 70%),
    radial-gradient(ellipse 54% 60% at 6% 86%, rgba(79,70,229,.09) 0%, transparent 72%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28'%3E%3Ccircle cx='14' cy='14' r='1' fill='%23ffffff' opacity='0.05'/%3E%3C/svg%3E");
}

/* hero dostaje mocniejszy akcent, bo to pierwszy ekran */
.flow-hero::before {
  background:
    radial-gradient(ellipse 60% 66% at 82% 8%, rgba(74,222,128,.13) 0%, transparent 68%),
    radial-gradient(ellipse 50% 58% at 4% 88%, rgba(79,70,229,.11) 0%, transparent 70%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28'%3E%3Ccircle cx='14' cy='14' r='1' fill='%23ffffff' opacity='0.055'/%3E%3C/svg%3E");
}

/* ───────── pasek sekcji pod hero ─────────
   Wzorzec z serwisow produktowych Cisco i Microsoftu: nad hero zostaje tylko
   marka i sciezka, a nawigacja po sekcjach siedzi pod hero i przykleja sie
   dopiero przy przewijaniu. Hero dostaje przez to caly pierwszy ekran,
   a menu pojawia sie w momencie, gdy uzytkownik zaczyna czytac. */
.section-bar {
  position: sticky;
  top: 0;
  z-index: 55;
  background: rgba(255,255,255,.94);
  border-bottom: 1px solid #e3eae6;
  backdrop-filter: blur(18px) saturate(1.3);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
}
.section-bar-inner {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 0 max(36px, calc((100% - 1560px) / 2));
  min-height: 56px;
}
.section-bar-name {
  color: #0b1310;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
}
.section-bar-links {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-right: auto;
  overflow-x: auto;
  scrollbar-width: none;
}
.section-bar-links::-webkit-scrollbar { display: none; }
.sec-link {
  position: relative;
  padding: 17px 13px;
  color: #55665d;
  font-size: 14px;
  text-decoration: none;
  white-space: nowrap;
  transition: color .2s ease;
}
.sec-link:hover { color: #0b1310; }
.sec-link.is-active { color: #0b1310; font-weight: 600; }
/* Podkreslenie aktywnej sekcji, jak w paskach produktowych duzych serwisow. */
.sec-link.is-active::after {
  content: '';
  position: absolute;
  left: 13px; right: 13px; bottom: 0;
  height: 2px;
  border-radius: 2px 2px 0 0;
  background: #16a34a;
}
.section-bar-cta {
  flex-shrink: 0;
  padding: 9px 18px;
  border-radius: 11px;
  border: 1px solid #16a34a;
  background: #16a34a;
  color: #fff;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background .18s ease;
}
.section-bar-cta:hover { background: #15803d; border-color: #15803d; }

@media (max-width: 760px) {
  .section-bar-name, .section-bar-cta { display: none; }
  .section-bar-inner { padding-inline: 16px; min-height: 50px; }
  .sec-link { padding: 15px 11px; font-size: 13.5px; }
}

/* Pod paskiem marki zostaje sama sciezka - nazwa produktu przeniosla sie
   do paska sekcji pod hero. */
.product-bar { padding-top: 8px; padding-bottom: 8px; }
.product-bar .product-crumbs { font-size: 13px; }

/* ───────── co zostaje przyklejone ─────────
   Pasek marki i sciezka przewijaja sie razem z trescia, przykleja sie
   wylacznie pasek sekcji - inaczej oba siedzialyby na sobie w tym samym
   miejscu i zabieraly 125 px kazdego ekranu. Dlatego pasek sekcji ma
   wlasny przycisk demo: po zniknieciu paska marki to jedyne CTA na widoku. */
header { position: static !important; }

/* ───────── tlo sekcji "3 momenty dnia" ─────────
   Bylo kremowe (#F7F3EA) i odstawalo od reszty serwisu cieplym, zoltawym
   odcieniem. Teraz ten sam chlodny gradient co w hero strony glownej:
   biel przechodzaca w jasna szarosc, z zielona i chlodna poswiata. */
.bento-sec {
  background: linear-gradient(180deg, #ffffff 0%, #f8f8f8 42%, #f5f5f5 100%) !important;
}
.bento-sec::before {
  background:
    radial-gradient(ellipse 55% 62% at 78% 12%, rgba(22,163,74,.10) 0%, transparent 72%),
    radial-gradient(ellipse 52% 58% at 8% 82%, rgba(79,70,229,.09) 0%, transparent 72%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28'%3E%3Ccircle cx='14' cy='14' r='1' fill='%23111827' opacity='0.07'/%3E%3C/svg%3E") !important;
}

/* Stopka pochodzi z powloki i ma wlasny przycisk. Regula zbiorcza przyciskow
   Flow (z !important) robila go jasnym - tutaj wraca do wersji ze strony
   glownej, zeby stopka wygladala wszedzie tak samo. */
body footer.ft .btn-glow {
  background: #111827 !important;
  border: 0 !important;
  color: #fff !important;
  border-radius: 12px !important;
  box-shadow: none !important;
}
body footer.ft .btn-glow:hover { background: #1f2937 !important; }
body footer.ft .btn-glow .btn-glow-icon {
  background: rgba(255,255,255,.15) !important;
  color: #fff !important;
}

/* ───────── pasek sekcji: dopracowanie ─────────
   Sygnet przy nazwie produktu, zeby po zniknieciu paska marki nadal bylo
   widac, czyja to strona. Kreska oddziela tozsamosc od nawigacji, przez co
   pasek czyta sie jako dwie czesci, a nie jeden ciag slow. */
.section-bar-inner { gap: 0; min-height: 60px; }

.section-bar-brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 14px 7px 0;
  text-decoration: none;
  flex-shrink: 0;
}
.section-bar-brand img { height: 27px; width: auto; display: block; }
.section-bar-name { font-size: 15px; letter-spacing: -.015em; }
.section-bar-brand:hover .section-bar-name { color: #16a34a; }

.section-bar-sep {
  width: 1px;
  height: 22px;
  margin-right: 16px;
  background: #dfe7e2;
  flex-shrink: 0;
}

.section-bar-links { gap: 1px; }
.sec-link {
  padding: 19px 14px;
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: -.005em;
  color: #5d6e65;
}
.sec-link:hover { color: #0b1310; background: rgba(11,19,16,.035); }
.sec-link.is-active { color: #0b1310; font-weight: 600; background: transparent; }
.sec-link.is-active::after { left: 14px; right: 14px; height: 2px; }

/* Przycisk w pasku ma ten sam pelny zielony co CTA w glownym menu
   (decyzja Jana 25.09.2026, wczesniej byl sam obrys). */
.section-bar-cta {
  padding: 8px 17px;
  border-radius: 10px;
  border: 1px solid transparent;
  background: #168346;
  color: #fff;
  font-size: 13.5px;
  font-weight: 600;
  box-shadow: 0 10px 24px -16px rgba(16,105,54,.75);
  transition: background .18s ease;
}
.section-bar-cta:hover { background: #116f3a; color: #fff; }

@media (max-width: 760px) {
  .section-bar-sep { display: none; }
  .section-bar-brand { padding-right: 10px; }
  .section-bar-brand img { height: 23px; }
}

/* Pasek marki ma ten sam rozmiar pisma co nawigacja strony glownej (15 px).
   Pasek sekcji zostaje mniejszy - to drugi poziom i ma czytac sie lzej. */
header .nav-bar .brand-trigger,
header .nav-bar .brand-plain {
  font-size: 15px;
  padding: 8px 16px;
}

/* ───────── rytm jasnych i ciemnych sekcji ─────────
   Zakres systemu, Finanse i Pakiety mialy jasnosc 249, 247 i 246 - roznica
   nieodczuwalna, wiec trzy sekcje z rzedu zlewaly sie w jedna plame.
   Nowy uklad: Zakres na czystej bieli, Finanse odcinaja sie gradientem
   od gory, Pakiety ida na ciemne, a Wdrozenie wraca na jasne. */

/* 6. Zakres systemu - najjasniejsza sekcja strony */
#moduly { background: #ffffff !important; }
#moduly::before { opacity: .55; }

/* 7. Od operacji do rozliczen - wyrozniona gradientem schodzacym z gory */
.finance-panorama-section {
  background:
    radial-gradient(circle at 9% 14%, rgba(74,222,128,.10), transparent 25%),
    linear-gradient(180deg, #e8efe9 0%, #f4f8f5 38%, #ffffff 100%) !important;
}

/* 9. Wdrozenie - jasne, zeby po ciemnym cenniku strona znow sie otwierala */
.process-sec {
  color: #0b1310 !important;
  background:
    radial-gradient(ellipse 55% 62% at 78% 12%, rgba(22,163,74,.09) 0%, transparent 72%),
    radial-gradient(ellipse 52% 58% at 8% 82%, rgba(79,70,229,.07) 0%, transparent 72%),
    #f7faf8 !important;
}

/* Sekcja wdrozenia przeszla na jasne tlo, wiec caly jej tekst musi zmienic
   kolor - wczesniej byl bialy, zaprojektowany pod ciemne tlo. */
#wdrozenie .tag {
  border-color: rgba(22,163,74,.22);
  background: rgba(22,163,74,.08);
  color: #15803d;
}
#wdrozenie .process-journey-intro h2 { color: #0b1310; }
#wdrozenie .process-journey-intro p,
#wdrozenie .s-lead { color: #55665d; }
#wdrozenie .process-journey { border-color: #dfe7e2; background: #ffffff; }
#wdrozenie .process-route-no { color: #16a34a; }
#wdrozenie .process-route h3 { color: #0b1310; }
#wdrozenie .process-route p { color: #55665d; }
#wdrozenie .process-route-step { border-color: #e3eae6; }
#wdrozenie .process-route-tag,
#wdrozenie .process-route-meta {
  border-color: #dfe7e2;
  background: #f4f8f5;
  color: #55665d;
}
#wdrozenie .process-route-line { background: #dfe7e2; }

/* Panel wdrozenia byl bialy na tle o jasnosci 247 - roznica osmiu jednostek,
   czyli zadna. Sekcja schodzi glebiej w szarosc, panel zostaje bialy
   i dostaje cien, zeby lezal na niej, a nie w niej. */
.process-sec {
  background:
    radial-gradient(ellipse 55% 62% at 78% 12%, rgba(22,163,74,.10) 0%, transparent 72%),
    radial-gradient(ellipse 52% 58% at 8% 82%, rgba(79,70,229,.08) 0%, transparent 72%),
    #eaf0ec !important;
}
#wdrozenie .process-journey {
  border-color: #dde7e0;
  background: #ffffff;
  box-shadow: 0 24px 60px -34px rgba(11,40,24,.4);
}

/* ───────── wdrozenie: trzy kroki w rzedzie ─────────
   Poprzedni uklad to byl waski slupek tekstu obok pionowej listy - panel
   mial 1200 px szerokosci, z czego dwie trzecie stanowila pustka. Teraz
   naglowek idzie nad trescia, a trzy kroki stoja obok siebie: sekcja
   wypelnia sie, a kolejnosc czyta sie wprost. */
#wdrozenie .s-head { text-align: center; margin-bottom: 44px; }
#wdrozenie .s-head h2 { margin-inline: auto; max-width: 20ch; }
#wdrozenie .s-lead { margin-inline: auto; max-width: 56ch; }

.kroki {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: krok;
}
.krok {
  position: relative;
  padding: 26px 26px 28px;
  border-radius: 20px;
  border: 1px solid #dde7e0;
  background: #ffffff;
  box-shadow: 0 20px 48px -34px rgba(11,40,24,.34);
}
/* Strzalka laczaca kroki - pokazuje, ze to nastepstwo, nie trzy osobne rzeczy. */
.krok:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 44px; right: -13px;
  width: 9px; height: 9px;
  border-top: 2px solid #c7d8ce;
  border-right: 2px solid #c7d8ce;
  transform: rotate(45deg);
}
.krok-gora {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}
.krok-nr {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  border-radius: 11px;
  background: #0f2118;
  color: #6ee7a1;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
}
.krok-czas {
  padding: 5px 11px;
  border-radius: 99px;
  border: 1px solid #e0e8e3;
  background: #f4f8f5;
  color: #5d6e65;
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
}
.krok small {
  display: block;
  color: #16a34a;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.krok h3 {
  margin: 7px 0 9px;
  color: #0b1310;
  font-size: 21px;
}
.krok p { color: #55665d; font-size: 14.5px; line-height: 1.6; }

@media (max-width: 900px) {
  .kroki { grid-template-columns: 1fr; gap: 12px; }
  .krok:not(:last-child)::after { display: none; }
  #wdrozenie .s-head { text-align: left; }
  #wdrozenie .s-head h2, #wdrozenie .s-lead { margin-inline: 0; }
}

/* ───────── pakiety: zbudowane od nowa ─────────
   Wersja na ciemnym tle nie dzialala: karty traciły hierarchie, bo Premium
   zlewala sie z sekcja, a Professional miala ciemny tekst na ciemnym.
   Teraz sekcja niesie ten sam gradient co "Od operacji do rozliczen" -
   wyrozniona, ale nie odcieta od reszty strony. Hierarchia kart idzie
   kontrastem: lekka, wyrazna, ciemna. */
.packages-sec {
  color: #0b1310 !important;
  background:
    radial-gradient(ellipse 50% 44% at 84% 6%, rgba(22,163,74,.10) 0%, transparent 70%),
    radial-gradient(ellipse 46% 42% at 6% 92%, rgba(79,70,229,.08) 0%, transparent 72%),
    linear-gradient(180deg, #e6efe9 0%, #f2f7f4 42%, #ffffff 100%) !important;
}
.packages-sec .s-head h2 { color: #0b1310; }
.packages-sec .s-lead { color: #55665d; }
.packages-sec .tag {
  border-color: rgba(22,163,74,.2);
  background: rgba(22,163,74,.08);
  color: #15803d;
}

/* Wspolny rdzen: ciemny pas, ktory oddziela to, co dostaje kazdy,
   od tego, czym pakiety sie roznia. */
.packages-sec .pricing-foundation {
  border: 0;
  background: linear-gradient(140deg, #0c1a13 0%, #10251a 100%);
  box-shadow: 0 26px 58px -36px rgba(8,40,24,.6);
}

/* ── karty ── */
.packages-sec .pricing-grid { align-items: stretch; }
.packages-sec .pricing-card {
  background: #ffffff !important;
  border: 1px solid #dde7e0 !important;
  box-shadow: 0 14px 40px -30px rgba(11,40,24,.3) !important;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.packages-sec .pricing-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 26px 56px -32px rgba(11,40,24,.4) !important;
}

/* 02 Professional - najczestszy wybor, wiec najmocniej zaznaczony */
.packages-sec .pricing-card-featured {
  border-color: #16a34a !important;
  box-shadow: 0 0 0 1px #16a34a, 0 26px 60px -30px rgba(16,120,66,.45) !important;
}

/* 03 Premium - ciemna, bo to szczyt oferty i ma sie odcinac od dwoch pozostalych */
.packages-sec .pricing-card-premium {
  background: linear-gradient(160deg, #0d1e16 0%, #112a1e 100%) !important;
  border-color: rgba(110,231,161,.24) !important;
  box-shadow: 0 26px 62px -32px rgba(8,50,28,.66) !important;
}
.packages-sec .pricing-card-premium .pricing-card-heading h3,
.packages-sec .pricing-card-premium .pricing-card-top span { color: #f2f8f4 !important; }
.packages-sec .pricing-card-premium .pricing-card-heading p,
.packages-sec .pricing-card-premium .pricing-card-copy,
.packages-sec .pricing-card-premium li { color: #a8bcb1 !important; }
.packages-sec .pricing-card-premium .pricing-card-top small {
  border-color: rgba(110,231,161,.24);
  background: rgba(110,231,161,.1);
  color: #b9dec7;
}
.packages-sec .pricing-card-premium ul { border-top-color: rgba(255,255,255,.12) !important; }

/* Stopka sekcji: to samo tlo co rdzen, zeby domykala mysl */
.packages-sec .pricing-guidance {
  border: 1px solid #dde7e0;
  background: #ffffff;
  box-shadow: 0 14px 40px -32px rgba(11,40,24,.3);
}
.packages-sec .pricing-guidance strong { color: #0b1310; }
.packages-sec .pricing-guidance span { color: #55665d; }

/* ───────── Domkniecie strony: FAQ jasne, stopka tuz pod ciemnym CTA ─────────
   FAQ bez gradientu. Miedzy ciemna sekcja CTA a stopka nie ma juz jasnego
   paska: zdjety margines i linia nad stopka. */
.faq-section { background: #fbfcfb; }
.cta-final + .ft { margin-top: 0; border-top: 0; }

/* ───────── 1. Bez animacji wejscia ─────────
   Sekcje pojawialy sie z opoznieniem przy scrollu i strona sprawiala wrazenie
   zacinajacej sie. Tresc jest widoczna od razu. */
.reveal, .reveal.visible { opacity: 1 !important; transform: none !important; transition: none !important; }

/* ───────── 5. Jeden glowny przycisk: umow demo ─────────
   Pelna zielen zamiast bialego pilla. Wszystkie pozostale CTA (Zobacz system,
   Zapytaj o pakiet, Dobierz zakres) zostaja biale, czyli drugorzedne. */
body .action-pill-primary {
  border-color: transparent;
  background: #168346;
  color: #fff !important;
  box-shadow: 0 14px 32px -20px rgba(16,105,54,.75);
}
body .action-pill-primary:hover {
  border-color: transparent;
  background: #116f3a;
  box-shadow: 0 20px 40px -20px rgba(16,105,54,.8);
}
body .action-pill-primary .action-pill-icon { background: #fff; color: #116f3a; }
body .action-pill-primary:hover .action-pill-icon { background: #fff; }

/* ───────── 2. Zrzuty w eksploratorze modulow: wieksze i czytelne ─────────
   Zrzut panelu byl skalowany do ~33% i tekstu na nim nie dalo sie przeczytac,
   wiec nic nie dowodzil. Szerszy kontener, wezsza nawigacja i wezsza kolumna
   opisu oddaja obrazkowi ok. polowy szerokosci sekcji. */
#moduly .wrap { width: min(100% - 48px, 1300px); }
.module-explorer { max-width: 1300px; grid-template-columns: 208px minmax(0,1fr); }
.module-explorer .mtab-panel.active { grid-template-columns: minmax(280px,.6fr) minmax(0,1.4fr); }
.module-explorer .mtab-text { padding: clamp(32px,3vw,44px) clamp(24px,2.4vw,34px); }
.module-explorer .mtab-mockup.real-screen .mtab-mockup-bg { padding: 26px 20px 46px; }


/* ───────── 4. Inny rytm dwoch sekcji ─────────
   Piec sekcji z rzedu mialo ten sam uklad: badge, nagłowek na srodku, lead pod
   spodem. Moduly i Wdrozenie dostaja naglowek po lewej, a lead obok po prawej. */
/* Nagłówek sekcji: jedna kolumna, opis pod nagłówkiem. Nigdy opis po prawej. */
#moduly .s-head, #wdrozenie .s-head { display: block; max-width: 760px; margin-inline: 0; text-align: left; }
#moduly .s-head h2, #wdrozenie .s-head h2 { max-width: 22ch; margin-left: 0; margin-right: 0; text-align: left; }
#moduly .s-head .s-lead, #wdrozenie .s-head .s-lead { max-width: 56ch; margin: 16px 0 0; text-align: left; }

/* Menu Produkty: trzy grupy obok siebie (Wdrożenia, Aplikacje, Podstawa), jak na stronie głównej */
.nav-dropdown-menu.nav-mega-menu { width: min(900px, calc(100vw - 48px)); min-width: 0; padding: 20px; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 8px 20px; }
.nav-mega-col + .nav-mega-col { border-left: 1px solid #e3eae6; padding-left: 20px; }
.nav-mega-h { display: block; margin: 0 0 8px; padding: 0 10px; font-size: 12px; font-weight: 600; color: #7d8f85; }
.nav-mega-menu .nav-dd-item { align-items: flex-start; }
/* Menu Produkty wyrównane do kolumny strony (od logo do przycisku), a nie do przycisku „Produkty” */
header .nav-bar .nav-dropdown:has(.nav-mega-menu) { position: static; }
header .nav-bar .nav-dropdown:has(.nav-mega-menu)::after { left: 0; right: 0; width: auto; }
.nav-dropdown-menu.nav-mega-menu { top: calc(100% + 1px); width: auto; left: max(36px, calc((100% - 1560px) / 2)); right: max(36px, calc((100% - 1560px) / 2)); border-radius: 0 0 16px 16px; }
/* Otwarte menu: przycisk „Produkty” zostaje widoczny na jasnym pasku (wcześniej robił się biały na białym) */
header .nav-bar .nav-dropdown:hover .brand-trigger,
header .nav-bar .nav-dropdown:focus-within .brand-trigger { color: #0b1310; background: rgba(11,19,16,.05); }