/* SCANOVA - wspolne style dla index.html / system.html / dla-kogo.html / oferta.html */
  *{ box-sizing:border-box; }
  html{ scroll-behavior:smooth; }
  html,body{ margin:0; padding:0; background:#eef4fb; }
  [data-sec]{ scroll-margin-top:96px; }
  /* ---- nowe: header / fab / funnel / intro ---- */
  @keyframes fabIn { from{opacity:0;transform:translateY(10px) scale(.96);} to{opacity:1;transform:translateY(0) scale(1);} }
  @keyframes modalIn { from{opacity:0;transform:translateY(18px) scale(.985);} to{opacity:1;transform:translateY(0) scale(1);} }
  @keyframes promoFade { from{opacity:0;} to{opacity:1;} }
  @keyframes promoIn { 0%{opacity:0;transform:translateY(26px) scale(.97);} 100%{opacity:1;transform:translateY(0) scale(1);} }
  @keyframes qIn { from{opacity:0;transform:translateY(10px);} to{opacity:1;transform:translateY(0);} }
  @keyframes logoIn { from{opacity:0;transform:translateX(-50%) translateY(-6px);} to{opacity:.96;transform:translateX(-50%) translateY(0);} }
  /* ---- projekt 1 (hero) ---- */
  @keyframes floatY { 0%{ transform:translate(0,0) rotate(-1deg); } 50%{ transform:translate(14px,-32px) rotate(1.4deg); } 100%{ transform:translate(0,0) rotate(-1deg); } }
  @keyframes hintBob { 0%,100%{ transform:translateY(0); opacity:.45; } 50%{ transform:translateY(6px); opacity:1; } }
  @keyframes cardTilt { 0%,100%{ transform:perspective(1000px) rotateY(-19deg) rotateX(8deg) rotateZ(-3deg); } 50%{ transform:perspective(1000px) rotateY(19deg) rotateX(-6deg) rotateZ(3deg); } }
  /* ---- projekt 2 (landing) ---- */
  @keyframes pulseDot { 0%,100%{opacity:1;} 50%{opacity:.35;} }
  @keyframes floatCloud { 0%{transform:translateX(0);} 100%{transform:translateX(60px);} }
  @keyframes fadeUp { from{opacity:0;transform:translateY(14px);} to{opacity:1;transform:translateY(0);} }
  @keyframes nfcWave { 0%{transform:scale(.4);opacity:.9;} 80%{opacity:0;} 100%{transform:scale(1.4);opacity:0;} }
  @keyframes tapBob { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-6px);} }
  @keyframes fillBar { from{width:0;} to{width:100%;} }
  @keyframes sceneIn { from{opacity:0;transform:translateY(12px);} to{opacity:1;transform:translateY(0);} }
  @keyframes checkPop { 0%{transform:scale(0);opacity:0;} 60%{transform:scale(1.18);} 100%{transform:scale(1);opacity:1;} }
  @keyframes slideUpCard { 0%{transform:translateY(46px);opacity:0;} 100%{transform:translateY(0);opacity:1;} }
  @keyframes popStamp { 0%{transform:scale(0);} 55%{transform:scale(1.3);} 100%{transform:scale(1);} }
  @keyframes floatPlus { 0%{transform:translateY(4px);opacity:0;} 25%{opacity:1;} 100%{transform:translateY(-30px);opacity:0;} }
  @keyframes sparkle { 0%,100%{transform:scale(.7);opacity:.35;} 50%{transform:scale(1.3);opacity:1;} }
  @keyframes wave { 0%,100%{transform:scaleY(.4);} 50%{transform:scaleY(1);} }
  @keyframes marqueeL { from{transform:translateX(0);} to{transform:translateX(-50%);} }
  @keyframes marqueeR { from{transform:translateX(-50%);} to{transform:translateX(0);} }
  @keyframes softFloat { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-10px);} }
  /* ---- intro: chmury + filmowy pasek ---- */
  @keyframes cloudDrift { 0%{transform:translateX(0);} 100%{transform:translateX(40px);} }
  @keyframes heroEmerge { 0%{opacity:0;transform:translateY(26px) scale(.985);filter:blur(8px);} 100%{opacity:1;transform:translateY(0) scale(1);filter:blur(0);} }
  @keyframes barPulse { 0%,100%{opacity:.55;} 50%{opacity:1;} }
  @keyframes hintPulse { 0%,100%{opacity:.6;transform:translateY(0);} 50%{opacity:1;transform:translateY(4px);} }
  /* ---- ekran ładowania (loader) - 3D dots ---- */
  /* ---------- LOGO ---------- */
  .scn-loader .ls-logo-wrap {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -170px);
  }
  .scn-loader .ls-logo {
    height: 4rem; /* h-16 */
    width: auto;
    transition: opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
  }
  @media (min-width: 640px) {
    .scn-loader .ls-logo { height: 6rem; } /* sm:h-24 */
  }
  /* stan początkowy = initial framera, dochodzi do "animate" przez animację wejścia */
  .scn-loader .ls-logo--in {
    opacity: 1;
    transform: scale(1) translateY(0);
    animation: ls-logo-in 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
  }
  .scn-loader .ls-logo--out {
    opacity: 0;
    transform: scale(1.1) translateY(-10px);
  }
  @keyframes ls-logo-in {
    from { opacity: 0; transform: scale(0.8) translateY(14px); }
    to   { opacity: 1; transform: scale(1)   translateY(0);    }
  }

  /* ---------- LOADER (3D dots) ---------- */
  .scn-loader .loader {
    position: absolute;
    top: 50%;
    left: 50%;
    overflow: hidden;
    width: 200px;
    height: 200px;
    margin-top: -100px;
    margin-left: -100px;
    perspective: 1000px;
    transform-style: perserve-3d; /* literówka z oryginału - zostawiona celowo dla 1:1 */
  }

  .scn-loader .dots {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    perspective: 200px;
    transform-style: perserve-3d; /* j.w. */
    animation: dots 10000ms linear infinite;
  }

  .scn-loader .dots:nth-child(1) { animation-name: dots; }
  .scn-loader .dots:nth-child(2) { animation-name: dots2; }
  .scn-loader .dots:nth-child(3) { animation-name: dots3; }
  .scn-loader .dots:nth-child(4) { animation-name: dots4; }
  .scn-loader .dots:nth-child(5) { animation-name: dots5; }
  .scn-loader .dots:nth-child(6) { animation-name: dots6; }

  @keyframes dots {
    0%   { transform: rotateX(30deg) rotateZ(0deg)     translateZ(-50px); }
    50%  { transform: rotateX(60deg) rotateZ(5760deg)  translateZ(-100px); }
    100% { transform: rotateX(30deg) rotateZ(11520deg) translateZ(-50px); }
  }
  @keyframes dots2 {
    0%   { transform: rotateX(30deg) rotateZ(0deg)    translateZ(-36px); }
    50%  { transform: rotateX(60deg) rotateZ(2880deg) translateZ(-72px); }
    100% { transform: rotateX(30deg) rotateZ(5760deg) translateZ(-36px); }
  }
  @keyframes dots3 {
    0%   { transform: rotateX(30deg) rotateZ(0deg)    translateZ(-24px); }
    50%  { transform: rotateX(60deg) rotateZ(1440deg) translateZ(-48px); }
    100% { transform: rotateX(30deg) rotateZ(2880deg) translateZ(-24px); }
  }
  @keyframes dots4 {
    0%   { transform: rotateX(30deg) rotateZ(0deg)   translateZ(-14px); }
    50%  { transform: rotateX(60deg) rotateZ(720deg) translateZ(-28px); }
    100% { transform: rotateX(30deg) rotateZ(1440deg) translateZ(-14px); }
  }
  @keyframes dots5 {
    0%   { transform: rotateX(30deg) rotateZ(0deg)   translateZ(-6px); }
    50%  { transform: rotateX(60deg) rotateZ(360deg) translateZ(-12px); }
    100% { transform: rotateX(30deg) rotateZ(720deg) translateZ(-6px); }
  }
  @keyframes dots6 {
    0%   { transform: rotateX(30deg) rotateZ(0deg)   translateZ(0px); }
    50%  { transform: rotateX(60deg) rotateZ(180deg) translateZ(-3px); }
    100% { transform: rotateX(30deg) rotateZ(360deg) translateZ(0px); }
  }

  .scn-loader .dot {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 10px;
    margin-left: -5px;
    margin-top: -5px;
    border-radius: 100px;
    background-color: #1e3f57;
    transform-style: perserve-3d; /* literówka z oryginału - zostawiona celowo dla 1:1 */
    transform: rotateZ(0) translateY(0);
  }

  .scn-loader .dots:nth-child(6) .dot { background-color: #1e3f57; }

  .scn-loader .dots:nth-child(1) .dot:nth-child(1) { transform: rotateZ(0)      translateY(-10px); }
  .scn-loader .dots:nth-child(1) .dot:nth-child(2) { transform: rotateZ(90deg)  translateY(-10px) translateZ(-140px); }
  .scn-loader .dots:nth-child(1) .dot:nth-child(3) { transform: rotateZ(180deg) translateY(-10px); }
  .scn-loader .dots:nth-child(1) .dot:nth-child(4) { transform: rotateZ(270deg) translateY(-10px) translateZ(-140px); }

  .scn-loader .dots:nth-child(5) .dot { background-color: #295068; }

  .scn-loader .dots:nth-child(2) .dot:nth-child(1) { transform: rotateZ(0)      translateY(-22px); }
  .scn-loader .dots:nth-child(2) .dot:nth-child(2) { transform: rotateZ(45deg)  translateY(-22px) translateZ(-120px); }
  .scn-loader .dots:nth-child(2) .dot:nth-child(3) { transform: rotateZ(90deg)  translateY(-22px); }
  .scn-loader .dots:nth-child(2) .dot:nth-child(4) { transform: rotateZ(135deg) translateY(-22px) translateZ(-120px); }
  .scn-loader .dots:nth-child(2) .dot:nth-child(5) { transform: rotateZ(180deg) translateY(-22px); }
  .scn-loader .dots:nth-child(2) .dot:nth-child(6) { transform: rotateZ(225deg) translateY(-22px) translateZ(-120px); }
  .scn-loader .dots:nth-child(2) .dot:nth-child(7) { transform: rotateZ(270deg) translateY(-22px); }
  .scn-loader .dots:nth-child(2) .dot:nth-child(8) { transform: rotateZ(315deg) translateY(-22px) translateZ(-120px); }

  .scn-loader .dots:nth-child(4) .dot { background-color: #3b6a83; }

  .scn-loader .dots:nth-child(3) .dot:nth-child(1)  { transform: rotateZ(0)      translateY(-34px); }
  .scn-loader .dots:nth-child(3) .dot:nth-child(2)  { transform: rotateZ(30deg)  translateY(-34px) translateZ(-100px); }
  .scn-loader .dots:nth-child(3) .dot:nth-child(3)  { transform: rotateZ(60deg)  translateY(-34px); }
  .scn-loader .dots:nth-child(3) .dot:nth-child(4)  { transform: rotateZ(90deg)  translateY(-34px) translateZ(-100px); }
  .scn-loader .dots:nth-child(3) .dot:nth-child(5)  { transform: rotateZ(120deg) translateY(-34px); }
  .scn-loader .dots:nth-child(3) .dot:nth-child(6)  { transform: rotateZ(150deg) translateY(-34px) translateZ(-100px); }
  .scn-loader .dots:nth-child(3) .dot:nth-child(7)  { transform: rotateZ(180deg) translateY(-34px); }
  .scn-loader .dots:nth-child(3) .dot:nth-child(8)  { transform: rotateZ(210deg) translateY(-34px) translateZ(-100px); }
  .scn-loader .dots:nth-child(3) .dot:nth-child(9)  { transform: rotateZ(240deg) translateY(-34px); }
  .scn-loader .dots:nth-child(3) .dot:nth-child(10) { transform: rotateZ(270deg) translateY(-34px) translateZ(-100px); }
  .scn-loader .dots:nth-child(3) .dot:nth-child(11) { transform: rotateZ(300deg) translateY(-34px); }
  .scn-loader .dots:nth-child(3) .dot:nth-child(12) { transform: rotateZ(330deg) translateY(-34px) translateZ(-100px); }

  .scn-loader .dots:nth-child(3) .dot { background-color: #4d86a0; }

  .scn-loader .dots:nth-child(4) .dot:nth-child(1)  { transform: rotateZ(0)      translateY(-46px); }
  .scn-loader .dots:nth-child(4) .dot:nth-child(2)  { transform: rotateZ(20deg)  translateY(-46px) translateZ(-80px); }
  .scn-loader .dots:nth-child(4) .dot:nth-child(3)  { transform: rotateZ(40deg)  translateY(-46px); }
  .scn-loader .dots:nth-child(4) .dot:nth-child(4)  { transform: rotateZ(60deg)  translateY(-46px) translateZ(-80px); }
  .scn-loader .dots:nth-child(4) .dot:nth-child(5)  { transform: rotateZ(80deg)  translateY(-46px); }
  .scn-loader .dots:nth-child(4) .dot:nth-child(6)  { transform: rotateZ(100deg) translateY(-46px) translateZ(-80px); }
  .scn-loader .dots:nth-child(4) .dot:nth-child(7)  { transform: rotateZ(120deg) translateY(-46px); }
  .scn-loader .dots:nth-child(4) .dot:nth-child(8)  { transform: rotateZ(140deg) translateY(-46px) translateZ(-80px); }
  .scn-loader .dots:nth-child(4) .dot:nth-child(9)  { transform: rotateZ(160deg) translateY(-46px); }
  .scn-loader .dots:nth-child(4) .dot:nth-child(10) { transform: rotateZ(180deg) translateY(-46px) translateZ(-80px); }
  .scn-loader .dots:nth-child(4) .dot:nth-child(11) { transform: rotateZ(200deg) translateY(-46px); }
  .scn-loader .dots:nth-child(4) .dot:nth-child(12) { transform: rotateZ(220deg) translateY(-46px) translateZ(-80px); }
  .scn-loader .dots:nth-child(4) .dot:nth-child(13) { transform: rotateZ(240deg) translateY(-46px); }
  .scn-loader .dots:nth-child(4) .dot:nth-child(14) { transform: rotateZ(260deg) translateY(-46px) translateZ(-80px); }
  .scn-loader .dots:nth-child(4) .dot:nth-child(15) { transform: rotateZ(280deg) translateY(-46px); }
  .scn-loader .dots:nth-child(4) .dot:nth-child(16) { transform: rotateZ(300deg) translateY(-46px) translateZ(-80px); }
  .scn-loader .dots:nth-child(4) .dot:nth-child(17) { transform: rotateZ(320deg) translateY(-46px); }
  .scn-loader .dots:nth-child(4) .dot:nth-child(18) { transform: rotateZ(340deg) translateY(-46px) translateZ(-80px); }

  .scn-loader .dots:nth-child(2) .dot { background-color: #5ea0ba; }

  .scn-loader .dots:nth-child(5) .dot:nth-child(1)  { transform: rotateZ(0)      translateY(-58px); }
  .scn-loader .dots:nth-child(5) .dot:nth-child(2)  { transform: rotateZ(15deg)  translateY(-58px) translateZ(-40px); }
  .scn-loader .dots:nth-child(5) .dot:nth-child(3)  { transform: rotateZ(30deg)  translateY(-58px); }
  .scn-loader .dots:nth-child(5) .dot:nth-child(4)  { transform: rotateZ(45deg)  translateY(-58px) translateZ(-40px); }
  .scn-loader .dots:nth-child(5) .dot:nth-child(5)  { transform: rotateZ(60deg)  translateY(-58px); }
  .scn-loader .dots:nth-child(5) .dot:nth-child(6)  { transform: rotateZ(75deg)  translateY(-58px) translateZ(-40px); }
  .scn-loader .dots:nth-child(5) .dot:nth-child(7)  { transform: rotateZ(90deg)  translateY(-58px); }
  .scn-loader .dots:nth-child(5) .dot:nth-child(8)  { transform: rotateZ(105deg) translateY(-58px) translateZ(-40px); }
  .scn-loader .dots:nth-child(5) .dot:nth-child(9)  { transform: rotateZ(120deg) translateY(-58px); }
  .scn-loader .dots:nth-child(5) .dot:nth-child(10) { transform: rotateZ(135deg) translateY(-58px) translateZ(-40px); }
  .scn-loader .dots:nth-child(5) .dot:nth-child(11) { transform: rotateZ(150deg) translateY(-58px); }
  .scn-loader .dots:nth-child(5) .dot:nth-child(12) { transform: rotateZ(165deg) translateY(-58px) translateZ(-40px); }
  .scn-loader .dots:nth-child(5) .dot:nth-child(13) { transform: rotateZ(180deg) translateY(-58px); }
  .scn-loader .dots:nth-child(5) .dot:nth-child(14) { transform: rotateZ(195deg) translateY(-58px) translateZ(-40px); }
  .scn-loader .dots:nth-child(5) .dot:nth-child(15) { transform: rotateZ(210deg) translateY(-58px); }
  .scn-loader .dots:nth-child(5) .dot:nth-child(16) { transform: rotateZ(225deg) translateY(-58px) translateZ(-40px); }
  .scn-loader .dots:nth-child(5) .dot:nth-child(17) { transform: rotateZ(240deg) translateY(-58px); }
  .scn-loader .dots:nth-child(5) .dot:nth-child(18) { transform: rotateZ(255deg) translateY(-58px) translateZ(-40px); }
  .scn-loader .dots:nth-child(5) .dot:nth-child(19) { transform: rotateZ(270deg) translateY(-58px); }
  .scn-loader .dots:nth-child(5) .dot:nth-child(20) { transform: rotateZ(285deg) translateY(-58px) translateZ(-40px); }
  .scn-loader .dots:nth-child(5) .dot:nth-child(21) { transform: rotateZ(300deg) translateY(-58px); }
  .scn-loader .dots:nth-child(5) .dot:nth-child(22) { transform: rotateZ(315deg) translateY(-58px) translateZ(-40px); }
  .scn-loader .dots:nth-child(5) .dot:nth-child(23) { transform: rotateZ(330deg) translateY(-58px); }
  .scn-loader .dots:nth-child(5) .dot:nth-child(24) { transform: rotateZ(345deg) translateY(-58px) translateZ(-40px); }

  .scn-loader .dots:nth-child(1) .dot { background-color: #6bb1cd; }

  .scn-loader .dots:nth-child(6) .dot:nth-child(1)  { transform: rotateZ(0deg)   translateY(-70px); }
  .scn-loader .dots:nth-child(6) .dot:nth-child(2)  { transform: rotateZ(10deg)  translateY(-70px) translateZ(-20px); }
  .scn-loader .dots:nth-child(6) .dot:nth-child(3)  { transform: rotateZ(20deg)  translateY(-70px); }
  .scn-loader .dots:nth-child(6) .dot:nth-child(4)  { transform: rotateZ(30deg)  translateY(-70px) translateZ(-20px); }
  .scn-loader .dots:nth-child(6) .dot:nth-child(5)  { transform: rotateZ(40deg)  translateY(-70px); }
  .scn-loader .dots:nth-child(6) .dot:nth-child(6)  { transform: rotateZ(50deg)  translateY(-70px) translateZ(-20px); }
  .scn-loader .dots:nth-child(6) .dot:nth-child(7)  { transform: rotateZ(60deg)  translateY(-70px); }
  .scn-loader .dots:nth-child(6) .dot:nth-child(8)  { transform: rotateZ(70deg)  translateY(-70px) translateZ(-20px); }
  .scn-loader .dots:nth-child(6) .dot:nth-child(9)  { transform: rotateZ(80deg)  translateY(-70px); }
  .scn-loader .dots:nth-child(6) .dot:nth-child(10) { transform: rotateZ(90deg)  translateY(-70px) translateZ(-20px); }
  .scn-loader .dots:nth-child(6) .dot:nth-child(11) { transform: rotateZ(100deg) translateY(-70px); }
  .scn-loader .dots:nth-child(6) .dot:nth-child(12) { transform: rotateZ(110deg) translateY(-70px) translateZ(-20px); }
  .scn-loader .dots:nth-child(6) .dot:nth-child(13) { transform: rotateZ(120deg) translateY(-70px); }
  .scn-loader .dots:nth-child(6) .dot:nth-child(14) { transform: rotateZ(130deg) translateY(-70px) translateZ(-20px); }
  .scn-loader .dots:nth-child(6) .dot:nth-child(15) { transform: rotateZ(140deg) translateY(-70px); }
  .scn-loader .dots:nth-child(6) .dot:nth-child(16) { transform: rotateZ(150deg) translateY(-70px) translateZ(-20px); }
  .scn-loader .dots:nth-child(6) .dot:nth-child(17) { transform: rotateZ(160deg) translateY(-70px); }
  .scn-loader .dots:nth-child(6) .dot:nth-child(18) { transform: rotateZ(170deg) translateY(-70px) translateZ(-20px); }
  .scn-loader .dots:nth-child(6) .dot:nth-child(19) { transform: rotateZ(180deg) translateY(-70px); }
  .scn-loader .dots:nth-child(6) .dot:nth-child(20) { transform: rotateZ(190deg) translateY(-70px) translateZ(-20px); }
  .scn-loader .dots:nth-child(6) .dot:nth-child(21) { transform: rotateZ(200deg) translateY(-70px); }
  .scn-loader .dots:nth-child(6) .dot:nth-child(22) { transform: rotateZ(210deg) translateY(-70px) translateZ(-20px); }
  .scn-loader .dots:nth-child(6) .dot:nth-child(23) { transform: rotateZ(220deg) translateY(-70px); }
  .scn-loader .dots:nth-child(6) .dot:nth-child(24) { transform: rotateZ(230deg) translateY(-70px) translateZ(-20px); }
  .scn-loader .dots:nth-child(6) .dot:nth-child(25) { transform: rotateZ(240deg) translateY(-70px); }
  .scn-loader .dots:nth-child(6) .dot:nth-child(26) { transform: rotateZ(250deg) translateY(-70px) translateZ(-20px); }
  .scn-loader .dots:nth-child(6) .dot:nth-child(27) { transform: rotateZ(260deg) translateY(-70px); }
  .scn-loader .dots:nth-child(6) .dot:nth-child(28) { transform: rotateZ(270deg) translateY(-70px) translateZ(-20px); }
  .scn-loader .dots:nth-child(6) .dot:nth-child(29) { transform: rotateZ(280deg) translateY(-70px); }
  .scn-loader .dots:nth-child(6) .dot:nth-child(30) { transform: rotateZ(290deg) translateY(-70px) translateZ(-20px); }
  .scn-loader .dots:nth-child(6) .dot:nth-child(31) { transform: rotateZ(300deg) translateY(-70px); }
  .scn-loader .dots:nth-child(6) .dot:nth-child(32) { transform: rotateZ(310deg) translateY(-70px) translateZ(-20px); }
  .scn-loader .dots:nth-child(6) .dot:nth-child(33) { transform: rotateZ(320deg) translateY(-70px); }
  .scn-loader .dots:nth-child(6) .dot:nth-child(34) { transform: rotateZ(330deg) translateY(-70px) translateZ(-20px); }
  .scn-loader .dots:nth-child(6) .dot:nth-child(35) { transform: rotateZ(340deg) translateY(-70px); }
  .scn-loader .dots:nth-child(6) .dot:nth-child(36) { transform: rotateZ(350deg) translateY(-70px) translateZ(-20px); }
  /* ---- mobile / telefon ---- */
  html{ overflow-x:hidden; }
  img{ max-width:100%; }
  @media (max-width:1380px){
    /* Pigułka nawigacji nie zmieści się już wyśrodkowana obok przycisków po prawej,
       więc schodzi do drugiego rzędu - w podziale na podstrony musi zostać widoczna. */
    .scn-header{ flex-wrap:wrap; row-gap:9px; }
    .scn-nav{ position:static !important; transform:none !important; order:3; width:100%;
      justify-content:flex-start; overflow-x:auto; overscroll-behavior-x:contain;
      -webkit-overflow-scrolling:touch; scrollbar-width:none; -ms-overflow-style:none;
      border-radius:15px; padding:4px; }
    .scn-nav::-webkit-scrollbar{ display:none; }
    .scn-nav a{ padding:7px 13px !important; font-size:13.5px !important; }
    .scn-nav [data-navnum]{ display:none; }
    /* wyższy header = więcej miejsca nad pierwszą sekcją */
    .scn-sec#top{ padding-top:118px !important; }
    /* pierwsza sekcja podstron (system/dla-kogo/oferta) - bez baneru,
       potrzebuje wiecej miejsca niz hero strony glownej; selektor z dodatkowa
       klasa .scn-first ma wyzsza specyficznosc niz .scn-sec#top powyzej,
       wiec wygrywa tylko na elementach ktore faktycznie ja maja (podstrony) */
    .scn-sec#top.scn-first{ margin-top:0 !important; padding-top:170px !important; }
  }
  @media (max-width:520px){
    .scn-nav a{ padding:7px 11px !important; font-size:13px !important; }
  }
  @media (max-width:880px){
    .scn-header{ padding-left:16px !important; padding-right:16px !important; }
  }
  @media (max-width:760px){
    /* na wąskich ekranach logowanie zwija się do samej ikony, żeby CTA się mieściło */
    .scn-login-txt{ display:none; }
    .scn-header > div a.scn-login{ padding:7px 9px !important; }
  }
  /* loader gra teraz na KAŻDYM urządzeniu (desktop + mobile) */
  @media (max-width:820px){
    /* na telefonie ciężki morph interfejsu się ścina - chowamy całą sekcję */
    .scn-morph{ display:none !important; }
  }
  @media (max-width:640px){
    .scn-header{ padding-top:10px !important; padding-bottom:10px !important; padding-left:12px !important; padding-right:12px !important; }
    .scn-header img{ height:26px !important; }
    .scn-header > div{ gap:6px !important; }
    .scn-header > div a{ font-size:13px !important; padding:8px 12px !important; }
    .scn-header > div a.scn-cta svg{ display:none !important; }
    .scn-header > div a.scn-login{ padding:7px 9px !important; }
    .scn-header > div button{ font-size:12px !important; padding:6px 9px !important; }
    .scn-sec{ padding-top:84px !important; }
    .scn-sec.scn-mt{ margin-top:96px !important; }
    .scn-sec#top{ padding-bottom:120px !important; padding-top:104px !important; }
    .scn-sec#top.scn-first{ margin-top:0 !important; padding-top:150px !important; }
    #kontakt{ margin-top:96px !important; }
    .scn-rew-arrow{ display:none !important; }
  }
  @media (max-width:480px){
    .scn-sec{ padding-top:70px !important; }
  }
</style>
<style id="scn-theme-refresh">
  /* ============================================================
     THEME REFRESH - nakładka stylistyczna (bez zmian w strukturze)
     ============================================================ */

  /* ---- typografia sekcji (hero i kontakt zostają oryginalne, jak na produkcji) ---- */
  .scn-sec:not(#top):not(#kontakt) h2{
    font-weight:800 !important;
    letter-spacing:-0.03em !important;
    font-size:clamp(28px,4.6vw,40px) !important;
    color:#0d1a2e !important;
  }

  /* ---- eyebrow → wyraźne pigułki (tylko nagłówki sekcji, 14px) ---- */
  div[style*="font-size:14px"][style*="letter-spacing:.14em"],
  div[style*="font-size: 14px"][style*="letter-spacing: 0.14em"]{
    display:inline-flex !important;
    align-items:center !important;
    background:#e8effd !important;
    border:1px solid #d6e3fb !important;
    border-radius:999px !important;
    padding:6px 15px !important;
    font-size:12px !important;
    font-weight:700 !important;
    letter-spacing:.12em !important;
    margin-bottom:16px !important;
  }

  /* ---- KONTAKT: wygląd jak na produkcji (niebo), tylko chipy dodane ---- */
  #kontakt div[style*="letter-spacing:.14em"],
  #kontakt div[style*="letter-spacing: 0.14em"]{
    display:block !important; background:none !important; border:none !important;
    padding:0 !important; font-size:14px !important; letter-spacing:.14em !important;
    font-weight:600 !important; margin-bottom:12px !important;
  }

  /* ---- header: bez numerków 01/02/03 ---- */
  [data-navnum]{ display:none !important; }

  /* ---- czytelniejsze opisy sekcji ---- */
  .scn-sec [data-reveal] p[style*="#6b7280"]{ color:#4c5b74 !important; }

  /* ---- animacje ozdobników ---- */
  @keyframes pillPulse{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.06); } }
  @keyframes arrowNudge{ 0%,100%{ transform:translateX(0); opacity:.75; } 50%{ transform:translateX(5px); opacity:1; } }
  @keyframes badgeBob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-4px); } }
  @keyframes chipDrift{ 0%,100%{ transform:translateY(0) rotate(-1deg); } 50%{ transform:translateY(-10px) rotate(1.5deg); } }

  /* ---- pływające chipy-powiadomienia ---- */
  .scn-float-chip{
    display:inline-flex; align-items:center; gap:9px;
    background:#fff; border:1px solid #e4eaf3; border-radius:14px;
    padding:10px 16px; font-size:14px; font-weight:600; color:#0d1a2e;
    box-shadow:0 16px 40px -16px rgba(13,26,46,.35);
    animation:chipDrift 5.5s ease-in-out infinite;
    white-space:nowrap;
  }
  .scn-float-chip .ic{
    width:26px; height:26px; border-radius:9px; flex:none;
    display:flex; align-items:center; justify-content:center;
    background:#e8f7ee; color:#16a34a; font-size:14px;
  }
  .scn-float-chip .ic.gift{ background:#fef3e2; }

  /* ---- realistyczne karty Wallet (wzór: prawdziwy pass SCANOVA) ---- */
  .scn-pass{
    width:300px; max-width:88%; border-radius:16px; overflow:hidden; text-align:left;
    color:#fff; font-family:'Geist',system-ui,sans-serif; cursor:pointer;
    box-shadow:0 26px 60px rgba(30,60,110,.35);
    transition:transform .45s cubic-bezier(.22,.61,.36,1), box-shadow .45s;
  }
  .scn-pass:hover{ transform:translateY(-8px) scale(1.015); box-shadow:0 40px 84px rgba(30,60,110,.45); }
  .scn-pass-head{ display:flex; align-items:center; gap:10px; padding:12px 14px; }
  .scn-pass-logo{ width:32px; height:32px; border-radius:7px; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:800; background:rgba(0,0,0,.28); flex:none; }
  .scn-pass-name{ flex:1; font-size:13px; font-weight:700; letter-spacing:.13em; }
  .scn-pass-cnt{ text-align:right; line-height:1.15; }
  .scn-pass-cnt b{ display:block; font-size:17px; font-weight:700; }
  .scn-pass-cnt span{ font-size:8.5px; font-weight:700; letter-spacing:.14em; opacity:.8; text-transform:uppercase; }
  .scn-pass-strip{ position:relative; height:92px; background-size:cover; background-position:center; }
  .scn-pass-strip::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,.1),rgba(0,0,0,.24)); }
  .scn-pass-stamps{ position:absolute; inset:0; z-index:1; display:grid; grid-template-columns:repeat(5,1fr); place-items:center; padding:10px 16px; }
  .scn-stamp{ width:29px; height:29px; border-radius:50%; border:2px dashed rgba(255,255,255,.72); box-sizing:border-box; display:flex; align-items:center; justify-content:center; }
  .scn-stamp.on{ border:none; background:#fff; box-shadow:0 2px 8px rgba(0,0,0,.35); }
  .scn-pass-fields{ display:flex; justify-content:space-between; gap:12px; padding:13px 15px 0; }
  .scn-pass-fields span{ display:block; font-size:9px; font-weight:700; letter-spacing:.13em; opacity:.75; margin-bottom:2px; text-transform:uppercase; }
  .scn-pass-fields b{ font-size:16px; font-weight:600; letter-spacing:-0.01em; }
  .scn-pass-fields > div:last-child{ text-align:right; }
  .scn-pass-qr{ display:flex; justify-content:center; padding:16px 0 18px; }
  .scn-pass-qr .qrbox{ background:#fff; border-radius:10px; padding:9px 9px 5px; display:flex; flex-direction:column; align-items:center; gap:3px; }
  .scn-pass-qr img{ width:86px; height:86px; display:block; }
  .scn-pass-qr i{ font-style:normal; font-size:10.5px; letter-spacing:.28em; color:#4a5568; font-weight:600; }

  /* ---- pływająca karta w sekcji "Co dostajesz" ---- */
  .scn-float-phone{ position:absolute; right:-70px; top:-92px; width:225px; zoom:.82; z-index:6; animation:softFloat 6.5s ease-in-out infinite; pointer-events:none; }
  .scn-float-phone .scn-pass{ width:100%; max-width:none; transform:rotate(5deg); cursor:default; box-shadow:0 34px 70px -24px rgba(13,26,46,.45); }
  .scn-float-phone .scn-pass:hover{ transform:rotate(5deg); box-shadow:0 34px 70px -24px rgba(13,26,46,.45); }
  .scn-float-phone .scn-float-chip{ position:absolute; left:-96px; bottom:46px; font-size:13px; padding:9px 14px; }

  @media (max-width:1180px){ .scn-float-phone{ display:none; } }
  @media (max-width:900px){ .scn-kontakt-chip{ display:none !important; } }

  /* ---- GEOFENCING: animowana scenka (mapa + promień + push) ---- */
  .scn-geo-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:48px; align-items:center; }
  .scn-geo-map{ position:relative; height:400px; border-radius:26px; overflow:hidden; background:#e9eff6; border:1px solid #dde6f0; box-shadow:0 24px 60px -30px rgba(13,26,46,.35); }
  .scn-geo-block{ position:absolute; border-radius:10px; background:#dfe8f1; }
  .scn-geo-road-v{ position:absolute; top:0; bottom:0; left:26%; width:40px; background:#f8fafc; box-shadow:inset 0 0 0 1px #e2e9f2; }
  .scn-geo-road-h{ position:absolute; left:0; right:0; top:58%; height:46px; transform:translateY(-50%); background:#f8fafc; box-shadow:inset 0 0 0 1px #e2e9f2; }
  .scn-geo-road-h::after{ content:""; position:absolute; left:0; right:0; top:50%; border-top:2px dashed #d4dde8; }
  .scn-geo-radius{ position:absolute; left:62%; top:58%; width:230px; height:230px; transform:translate(-50%,-50%); border-radius:50%; border:2px dashed rgba(37,99,235,.5); background:rgba(37,99,235,.07); z-index:1; animation:geoRadius 9s linear infinite; }
  .scn-geo-radius::after{ content:""; position:absolute; inset:-2px; border-radius:50%; border:2px solid rgba(37,99,235,.55); opacity:0; animation:geoRipple 9s linear infinite; }
  @keyframes geoRadius{ 0%,42%{ background:rgba(37,99,235,.07); border-color:rgba(37,99,235,.5); } 46%,72%{ background:rgba(37,99,235,.16); border-color:#2563eb; } 78%,100%{ background:rgba(37,99,235,.07); border-color:rgba(37,99,235,.5); } }
  @keyframes geoRipple{ 0%,43%{ transform:scale(1); opacity:0; } 46%{ transform:scale(1); opacity:.8; } 58%{ transform:scale(1.45); opacity:0; } 100%{ opacity:0; } }
  .scn-geo-venue{ position:absolute; left:62%; top:58%; transform:translate(-50%,-50%); z-index:3; display:flex; flex-direction:column; align-items:center; gap:6px; }
  .scn-geo-venue .pin{ width:44px; height:44px; border-radius:14px; background:#39232f; color:#fff; display:flex; align-items:center; justify-content:center; font-size:20px; box-shadow:0 10px 24px -8px rgba(13,26,46,.5); }
  .scn-geo-venue .lbl{ font-size:11px; font-weight:800; letter-spacing:.1em; color:#39232f; background:#fff; padding:3px 10px; border-radius:999px; box-shadow:0 4px 12px -4px rgba(13,26,46,.25); }
  .scn-geo-dot{ position:absolute; top:58%; left:-6%; width:20px; height:20px; margin-top:-10px; z-index:4; animation:geoWalk 9s linear infinite; }
  .scn-geo-dot .d{ display:block; width:20px; height:20px; border-radius:50%; background:#2563eb; border:3px solid #fff; box-sizing:border-box; box-shadow:0 4px 12px rgba(37,99,235,.5); }
  .scn-geo-dot::after{ content:""; position:absolute; inset:-7px; border-radius:50%; border:2px solid rgba(37,99,235,.6); opacity:0; animation:geoDing 9s linear infinite; }
  @keyframes geoWalk{ 0%{ left:-6%; } 100%{ left:104%; } }
  @keyframes geoDing{ 0%,44%{ transform:scale(.6); opacity:0; } 47%{ transform:scale(1); opacity:1; } 56%{ transform:scale(1.7); opacity:0; } 100%{ opacity:0; } }
  .scn-geo-push{ position:absolute; top:18px; left:50%; width:min(350px,88%); background:rgba(255,255,255,.97); border:1px solid #e4eaf3; border-radius:16px; padding:12px 15px; display:flex; gap:11px; align-items:flex-start; box-shadow:0 18px 44px -14px rgba(13,26,46,.4); z-index:5; transform:translateX(-50%) translateY(-140%); animation:geoPush 9s cubic-bezier(.22,.61,.36,1) infinite; }
  .scn-geo-push .ic{ width:34px; height:34px; border-radius:9px; background:#0e1726; color:#fff; font-weight:800; font-size:15px; display:flex; align-items:center; justify-content:center; flex:none; }
  .scn-geo-push b{ font-size:13px; color:#0d1a2e; }
  .scn-geo-push .tm{ font-size:11px; color:#9aa3b2; font-weight:500; }
  .scn-geo-push p{ margin:2px 0 0; font-size:13.5px; line-height:1.4; color:#3f4756; }
  @keyframes geoPush{ 0%,45%{ transform:translateX(-50%) translateY(-140%); opacity:0; } 49%{ transform:translateX(-50%) translateY(0); opacity:1; } 84%{ transform:translateX(-50%) translateY(0); opacity:1; } 90%,100%{ transform:translateX(-50%) translateY(-140%); opacity:0; } }
  .scn-geo-copy .itm{ display:flex; gap:14px; padding:16px 0; border-top:1px solid #e6ecf5; }
  .scn-geo-copy .itm .n{ width:36px; height:36px; border-radius:11px; background:#eaf1fe; color:#2563eb; display:flex; align-items:center; justify-content:center; flex:none; }
  .scn-geo-copy .itm b{ display:block; font-size:16.5px; color:#0d1a2e; margin-bottom:3px; }
  .scn-geo-copy .itm span.tx{ font-size:14.5px; color:#5d6b83; line-height:1.5; }
  @media (max-width:900px){
    .scn-geo-grid{ grid-template-columns:1fr; gap:36px; }
    .scn-geo-map{ height:320px; }
  }

  @media (prefers-reduced-motion: reduce){
    .scn-float-chip, .scn-float-phone,
    .scn-geo-radius, .scn-geo-radius::after, .scn-geo-dot, .scn-geo-dot::after, .scn-geo-push,
    [style*="pillPulse"], [style*="arrowNudge"], [style*="badgeBob"]{ animation:none !important; }
    .scn-geo-push{ transform:translateX(-50%) translateY(0); opacity:1; }
    .scn-geo-dot{ left:52%; }
  }
  /* ================================================================
     NOWE SEKCJE (odtworzone z referencji, brand SCANOVA)
     ================================================================ */

  /* ---------- wspólne przyciski ---------- */
  .nx-cta{display:flex;gap:12px;justify-content:center;margin-top:26px;flex-wrap:wrap;}
  .nx-btn{font-family:inherit;font-size:15.5px;font-weight:500;padding:12px 24px;border-radius:999px;cursor:pointer;transition:.2s;text-decoration:none;display:inline-block;}
  .nx-btn--ghost{background:#fff;color:#2563eb;border:1px solid #c7d7f5;}
  .nx-btn--ghost:hover{border-color:#2563eb;}
  .nx-btn--solid{background:#2563eb;color:#fff;border:1px solid #2563eb;}
  .nx-btn--solid:hover{background:#1d4fd8;}

  /* ---------- 01 HERO-TELEFON (żywa karta + paleta) ---------- */
  .hp-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:40px;align-items:center;}
  @media (max-width:900px){ .hp-grid{grid-template-columns:1fr;} }
  .hp-stage{display:flex;justify-content:center;}
  .hp-phone{width:330px;height:660px;background:#fff;border:9px solid #111318;border-radius:56px;position:relative;padding:20px 16px;box-shadow:0 40px 80px -40px rgba(15,30,60,.35);}
  .hp-island{position:absolute;top:16px;left:50%;transform:translateX(-50%);width:88px;height:24px;background:#111318;border-radius:14px;z-index:5;}
  .hp-card{position:relative;margin-top:44px;border-radius:18px;overflow:hidden;color:#eef3fb;height:318px;box-shadow:0 20px 44px -18px rgba(12,30,70,.45);}
  .hp-bg{position:absolute;inset:0;opacity:0;}
  .hp-bg.navy {background:linear-gradient(175deg,#1d3a6e 0%,#16305e 55%,#122a54 100%);animation:nxBgNavy 16s ease infinite;}
  .hp-bg.green{background:linear-gradient(175deg,#1f7a49 0%,#166038 55%,#114d2e 100%);animation:nxBgGreen 16s ease infinite;}
  .hp-bg.dark {background:linear-gradient(175deg,#2a2d33 0%,#1b1d21 60%,#131417 100%);animation:nxBgDark 16s ease infinite;}
  @keyframes nxBgNavy {0%,55%{opacity:1;}62%,76%{opacity:0;}84%,100%{opacity:1;}}
  @keyframes nxBgGreen{0%,55%{opacity:0;}62%,76%{opacity:1;}84%,100%{opacity:0;}}
  @keyframes nxBgDark {0%,76%{opacity:0;}84%,92%{opacity:1;}97%,100%{opacity:0;}}
  .hp-cin{position:relative;z-index:2;padding:16px 16px 0;height:100%;display:flex;flex-direction:column;box-sizing:border-box;}
  .hp-row1{display:flex;align-items:flex-start;justify-content:space-between;}
  .hp-logo{font-size:21px;font-weight:700;font-style:italic;letter-spacing:-.02em;color:#fff;text-shadow:0 2px 0 rgba(9,20,45,.5);}
  .hp-cid{text-align:right;}
  .hp-cid .l{font-size:8px;letter-spacing:.22em;color:rgba(235,242,252,.65);font-weight:600;}
  .hp-cid .v{font-size:13px;font-weight:600;}
  .hp-stamp-layer{margin-top:16px;animation:nxStampLayer 16s ease infinite;}
  @keyframes nxStampLayer{0%,30%{opacity:1;transform:none;}36%,92%{opacity:0;transform:translateY(-8px);}98%,100%{opacity:1;transform:none;}}
  .nx-stamps{display:grid;grid-template-columns:repeat(5,1fr);gap:9px;}
  .nx-st{aspect-ratio:1;border-radius:50%;background:rgba(244,248,253,.96);display:grid;place-items:center;position:relative;}
  .nx-st svg{width:44%;height:44%;stroke:#16305e;}
  .nx-st.off{background:transparent;border:2px dashed rgba(200,214,236,.5);}
  .nx-st.off svg{stroke:rgba(200,214,236,.5);}
  .nx-st .fill{position:absolute;inset:0;border-radius:50%;background:rgba(244,248,253,.96);display:grid;place-items:center;transform:scale(0);}
  .nx-st .fill svg{width:44%;height:44%;stroke:#16305e;}
  .hp-card .nx-st.a6 .fill{animation:nxHpPop6 16s cubic-bezier(.34,1.56,.64,1) infinite;}
  .hp-card .nx-st.a7 .fill{animation:nxHpPop7 16s cubic-bezier(.34,1.56,.64,1) infinite;}
  @keyframes nxHpPop6{0%,8% {transform:scale(0);}11%{transform:scale(1.25);}13%,100%{transform:scale(1);}}
  @keyframes nxHpPop7{0%,16%{transform:scale(0);}19%{transform:scale(1.25);}21%,100%{transform:scale(1);}}
  .hp-pts{position:absolute;left:16px;right:16px;top:64px;opacity:0;animation:nxPtsLayer 16s ease infinite;}
  @keyframes nxPtsLayer{0%,32%{opacity:0;transform:translateY(10px);}38%,90%{opacity:1;transform:none;}96%,100%{opacity:0;}}
  .hp-pts .big{font-size:52px;font-weight:700;letter-spacing:-.02em;color:#fff;line-height:1;}
  .hp-pts .big small{font-size:20px;font-weight:600;color:rgba(235,242,252,.8);}
  .hp-slider{margin-top:18px;position:relative;height:5px;background:rgba(255,255,255,.25);border-radius:99px;}
  .hp-slider .fillbar{position:absolute;left:0;top:0;bottom:0;border-radius:99px;background:#fff;animation:nxSliderFill 16s ease infinite;}
  .hp-slider .knob{position:absolute;top:50%;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.35);transform:translate(-50%,-50%);animation:nxSliderKnob 16s ease infinite;}
  @keyframes nxSliderFill{0%,36%{width:20%;}48%,90%{width:72%;}100%{width:20%;}}
  @keyframes nxSliderKnob{0%,36%{left:20%;}48%,90%{left:72%;}100%{left:20%;}}
  .hp-marks{display:flex;justify-content:space-between;margin-top:10px;font-size:11px;color:rgba(235,242,252,.7);}
  .hp-nextlbl{margin-top:26px;font-size:9px;letter-spacing:.22em;color:rgba(235,242,252,.65);font-weight:600;}
  .hp-nextval{font-size:17px;font-weight:600;color:#fff;margin-top:3px;}
  .hp-cfoot{margin-top:auto;padding-bottom:14px;display:flex;align-items:baseline;justify-content:space-between;animation:nxStampLayer 16s ease infinite;}
  .hp-cfoot .l{font-size:9px;letter-spacing:.22em;color:rgba(235,242,252,.65);font-weight:600;}
  .hp-cfoot .v{font-size:15px;font-weight:600;color:#fff;}
  .hp-swatches{display:flex;justify-content:center;gap:14px;margin-top:26px;}
  .hp-sw{width:34px;height:34px;border-radius:50%;border:2px solid transparent;box-sizing:border-box;}
  .hp-sw.navy {background:#16305e;animation:nxSwNavy 16s ease infinite;}
  .hp-sw.green{background:#1a7f4b;animation:nxSwGreen 16s ease infinite;}
  .hp-sw.dark {background:#1b1d21;animation:nxSwDark 16s ease infinite;}
  .hp-sw.mint {background:#bfe6da;}
  .hp-sw.cream{background:#efe9dc;}
  @keyframes nxSwNavy {0%,55%{transform:scale(1.18);box-shadow:0 0 0 3px #fff,0 0 0 5px #16305e;}62%,92%{transform:scale(1);box-shadow:none;}100%{transform:scale(1.18);box-shadow:0 0 0 3px #fff,0 0 0 5px #16305e;}}
  @keyframes nxSwGreen{0%,55%{transform:scale(1);box-shadow:none;}62%,76%{transform:scale(1.18);box-shadow:0 0 0 3px #fff,0 0 0 5px #1a7f4b;}84%,100%{transform:scale(1);box-shadow:none;}}
  @keyframes nxSwDark {0%,76%{transform:scale(1);box-shadow:none;}84%,92%{transform:scale(1.18);box-shadow:0 0 0 3px #fff,0 0 0 5px #1b1d21;}97%,100%{transform:scale(1);box-shadow:none;}}
  .hp-paycard{margin:22px 10px 0;height:120px;border-radius:16px;background:linear-gradient(160deg,#e8eaee,#cfd3da);position:relative;overflow:hidden;}
  .hp-paycard::before{content:"";position:absolute;right:16px;top:16px;width:26px;height:26px;border-radius:50%;background:#eb001b;opacity:.9;}
  .hp-paycard::after{content:"";position:absolute;right:32px;top:16px;width:26px;height:26px;border-radius:50%;background:#f79e1b;opacity:.85;}
  .hp-paycard span{position:absolute;left:16px;bottom:12px;font-size:17px;font-style:italic;font-weight:700;color:#8a919d;letter-spacing:.04em;}

  /* ---------- 02 TRZY TYPY KART ---------- */
  .tk-strip{background:#eef1f4;border-radius:24px;padding:56px 24px 62px;}
  .tk-grid{display:grid;grid-template-columns:repeat(3,236px);gap:44px;justify-content:center;align-items:start;}
  @media (max-width:860px){ .tk-grid{grid-template-columns:236px;} }
  .tk-col{text-align:center;}
  .tk-lbl{font-size:16px;color:#3b4657;font-weight:500;margin-bottom:18px;}
  /* karty prosto, w rownym rzedzie; podnosza sie na hover */
  .tk-col .tk-card{transition:transform .45s cubic-bezier(.22,1,.36,1),box-shadow .45s ease;}
  .tk-col:hover .tk-card{transform:translateY(-8px);box-shadow:0 30px 56px -20px rgba(12,30,70,.55);}
  .tk-card{background:linear-gradient(175deg,#1d3a6e 0%,#16305e 55%,#122a54 100%);border-radius:14px;color:#eef3fb;overflow:hidden;text-align:left;box-shadow:0 22px 44px -20px rgba(12,30,70,.5);}
  .tk-r1{display:flex;align-items:flex-start;justify-content:space-between;padding:12px 13px 8px;}
  .tk-logo{font-size:16px;font-weight:700;font-style:italic;color:#fff;text-shadow:0 1.5px 0 rgba(9,20,45,.5);}
  .tk-cid{text-align:right;}
  .tk-cid .l{font-size:6.5px;letter-spacing:.2em;color:rgba(235,242,252,.6);font-weight:600;}
  .tk-cid .v{font-size:10.5px;font-weight:600;}
  .tk-band{background:rgba(9,20,45,.35);padding:9px 13px 11px;min-height:74px;box-sizing:border-box;}
  .tk-band .nx-stamps{gap:6px;}
  .tk-band .nx-st.off{border-width:1.6px;}
  .tk-band .nx-st.a6 .fill{animation:nxTkPop6 9s cubic-bezier(.34,1.56,.64,1) infinite;}
  .tk-band .nx-st.a7 .fill{animation:nxTkPop7 9s cubic-bezier(.34,1.56,.64,1) infinite;}
  @keyframes nxTkPop6{0%,22%{transform:scale(0);}27%{transform:scale(1.28);}30%,88%{transform:scale(1);}100%{transform:scale(0);}}
  @keyframes nxTkPop7{0%,42%{transform:scale(0);}47%{transform:scale(1.28);}50%,88%{transform:scale(1);}100%{transform:scale(0);}}
  .tk-band .hint{font-size:7.5px;color:rgba(235,242,252,.6);margin-bottom:6px;}
  .tk-pts{font-size:30px;font-weight:700;letter-spacing:-.02em;color:#fff;line-height:1;text-align:center;position:relative;height:32px;}
  .tk-pts small{font-size:13px;font-weight:600;color:rgba(235,242,252,.75);}
  .tk-pts .n{position:absolute;left:0;right:0;top:0;opacity:0;}
  .tk-pts .n1{animation:nxTkN1 9s steps(1) infinite;}
  .tk-pts .n2{animation:nxTkN2 9s steps(1) infinite;}
  .tk-pts .n3{animation:nxTkN3 9s steps(1) infinite;}
  @keyframes nxTkN1{0%,22%{opacity:1;}22.01%,94%{opacity:0;}94.01%,100%{opacity:1;}}
  @keyframes nxTkN2{0%,22%{opacity:0;}22.01%,40%{opacity:1;}40.01%,100%{opacity:0;}}
  @keyframes nxTkN3{0%,40%{opacity:0;}40.01%,94%{opacity:1;}94.01%,100%{opacity:0;}}
  .tk-psl{margin-top:9px;position:relative;height:4px;background:rgba(255,255,255,.25);border-radius:99px;}
  .tk-psl .f{position:absolute;left:0;top:0;bottom:0;background:#fff;border-radius:99px;animation:nxTkSl 9s ease infinite;}
  .tk-psl .k{position:absolute;top:50%;width:11px;height:11px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.35);transform:translate(-50%,-50%);animation:nxTkKn 9s ease infinite;}
  @keyframes nxTkSl{0%,15%{width:12%;}55%,88%{width:66%;}100%{width:12%;}}
  @keyframes nxTkKn{0%,15%{left:12%;}55%,88%{left:66%;}100%{left:12%;}}
  .tk-pmk{display:flex;justify-content:space-between;font-size:7px;color:rgba(235,242,252,.6);margin-top:5px;}
  .tk-ev{position:relative;height:74px;margin:-9px -13px -11px;padding:9px 13px 11px;box-sizing:border-box;background:linear-gradient(120deg,rgba(26,127,75,.55),rgba(9,20,45,.2)),repeating-linear-gradient(45deg,rgba(255,255,255,.06) 0 8px,transparent 8px 16px);}
  .tk-ev .fx{font-size:7px;letter-spacing:.24em;color:rgba(235,242,252,.7);font-weight:600;}
  .tk-ev .nm{font-family:'Newsreader',Georgia,serif;font-size:21px;font-style:italic;color:#fff;margin-top:6px;line-height:1.1;}
  .tk-ev .pulse{position:absolute;right:13px;top:10px;width:8px;height:8px;border-radius:50%;background:#6ee7a8;animation:nxEvPulse 2s ease infinite;}
  @keyframes nxEvPulse{0%,100%{box-shadow:0 0 0 0 rgba(110,231,168,.5);}50%{box-shadow:0 0 0 7px rgba(110,231,168,0);}}
  .tk-next{display:flex;align-items:baseline;justify-content:space-between;padding:9px 13px 4px;gap:8px;}
  .tk-next .l{font-size:6.5px;letter-spacing:.2em;color:rgba(235,242,252,.6);font-weight:600;}
  .tk-next .v{font-size:11.5px;font-weight:600;color:#fff;}
  .tk-qr{display:grid;place-items:center;padding:10px 0 16px;}
  .tk-qr .box{width:104px;height:104px;background:#fff;border-radius:10px;display:grid;place-items:center;}
  .tk-qr img{width:84px;height:84px;display:block;}

  /* ---------- 03 BANER APPLE WALLET ---------- */
  .wb{position:relative;height:470px;background:#e9edf1;border-radius:24px;overflow:hidden;}
  /* slad pieczatki — wlasny motyw SCANOVA w miejscu generycznych kol */
  .wb-stamp{position:absolute;border-radius:50%;border:2px dashed rgba(28,52,94,.13);display:grid;place-items:center;color:rgba(28,52,94,.13);}
  .wb-stamp svg{width:42%;height:42%;stroke:currentColor;}
  .wb-stamp.s1{right:7%;top:44%;width:118px;height:118px;transform:rotate(-14deg);}
  .wb-stamp.s2{left:9%;top:16%;width:74px;height:74px;transform:rotate(11deg);}
  .wb-stamp.s3{left:15%;bottom:12%;width:52px;height:52px;transform:rotate(-6deg);opacity:.7;}
  @media (max-width:720px){ .wb-stamp{display:none;} }
  /* tekst po prawej — baner niesie tresc, nie jest sama dekoracja */
  .wb-copy{position:absolute;right:6%;top:50%;transform:translateY(-50%);max-width:340px;z-index:4;}
  .wb-copy .eb{font-size:12px;font-weight:600;letter-spacing:.13em;color:#2563eb;margin-bottom:12px;}
  .wb-copy h3{font-size:clamp(22px,2.4vw,30px);font-weight:600;letter-spacing:-.015em;line-height:1.18;color:#0b1424;margin:0 0 14px;}
  .wb-copy li{list-style:none;display:flex;gap:9px;align-items:flex-start;font-size:14.5px;line-height:1.45;color:#54617a;padding:5px 0;}
  .wb-copy li svg{width:16px;height:16px;flex:none;margin-top:2px;stroke:#1a7f4b;}
  .wb-copy ul{margin:0;padding:0;}
  @media (max-width:980px){ .wb-copy{display:none;} }
  /* telefon prosto, zbity z osi w lewo (po prawej stronie panelu jest tresc) */
  .wb-phone{position:absolute;left:34%;top:30px;transform:translateX(-50%);width:400px;height:820px;background:#e2e3e5;border-radius:62px;padding:13px;box-sizing:border-box;box-shadow:0 46px 84px -34px rgba(15,30,60,.42), inset 0 0 0 2px #b9bcc2;}
  @media (max-width:980px){ .wb-phone{left:50%;} }
  @media (max-width:520px){ .wb-phone{width:88%;min-width:300px;left:50%;} }
  .wb-screen{width:100%;height:100%;border-radius:50px;overflow:hidden;position:relative;background:#0e2a5c;}
  .wb-lock{position:absolute;inset:0;color:#dfe9ff;background:linear-gradient(200deg,#8fb6da 0%,#5d90c8 30%,#2f66b0 60%,#1a4b96 82%,#123c7e 100%);animation:nxLockPhase 11s ease infinite;}
  .wb-lock::before{content:"";position:absolute;left:-40%;bottom:-35%;width:130%;height:75%;border-radius:50%;background:linear-gradient(150deg,#bfe6da 0%,#77c0b8 55%,#3f8fae 100%);}
  .wb-lock::after{content:"";position:absolute;right:-45%;top:-20%;width:110%;height:70%;border-radius:50%;background:linear-gradient(230deg,#0f3672 0%,#2a63b3 60%,rgba(42,99,179,0) 100%);opacity:.8;}
  @keyframes nxLockPhase{0%,30%{opacity:1;}38%,92%{opacity:0;}100%{opacity:1;}}
  .wb-status{position:absolute;top:16px;left:0;right:0;display:flex;justify-content:flex-end;gap:5px;padding:0 30px;z-index:2;font-size:12px;color:#eaf1ff;box-sizing:border-box;}
  .wb-island{position:absolute;top:14px;left:50%;transform:translateX(-50%);width:110px;height:30px;background:#000;border-radius:18px;z-index:5;}
  .wb-date{position:relative;text-align:center;margin-top:64px;font-size:15px;font-weight:500;z-index:2;}
  .wb-time{position:relative;text-align:center;font-size:78px;font-weight:600;letter-spacing:-.01em;z-index:2;line-height:1.05;background:linear-gradient(180deg,#f2f7ff,#a9c6ef);-webkit-background-clip:text;background-clip:text;color:transparent;}
  .wb-widgets{position:relative;display:flex;justify-content:center;gap:18px;margin-top:14px;z-index:2;font-size:11px;color:#d6e4fb;}
  .wb-widgets .w{display:flex;flex-direction:column;align-items:center;gap:3px;}
  .wb-widgets .ring{width:40px;height:40px;border-radius:50%;border:3px solid rgba(230,240,255,.85);display:grid;place-items:center;font-size:12px;font-weight:600;box-sizing:border-box;}
  .wb-wallet{position:absolute;inset:0;background:#f4f6f9;opacity:0;animation:nxWalletPhase 11s ease infinite;}
  @keyframes nxWalletPhase{0%,30%{opacity:0;}38%,92%{opacity:1;}100%{opacity:0;}}
  .wb-whead{display:flex;align-items:center;justify-content:space-between;padding:64px 24px 8px;color:#0e1726;}
  .wb-whead b{font-size:22px;letter-spacing:-.01em;}
  .wb-whead .plus{width:30px;height:30px;border-radius:50%;background:#e6eaf0;display:grid;place-items:center;font-size:18px;color:#2563eb;}
  .wb-card{position:relative;isolation:isolate;margin:10px 18px 0;background:linear-gradient(175deg,#1d3a6e 0%,#16305e 55%,#122a54 100%);border-radius:18px;color:#eef3fb;overflow:hidden;transform:translateY(40px);opacity:0;animation:nxCardIn 11s cubic-bezier(.22,1,.36,1) infinite;box-shadow:0 24px 50px -20px rgba(12,30,70,.5),inset 0 1px 0 rgba(255,255,255,.16),inset 0 0 0 1px rgba(255,255,255,.06);}
  @keyframes nxCardIn{0%,32%{transform:translateY(46px);opacity:0;}40%,92%{transform:translateY(0);opacity:1;}100%{transform:translateY(46px);opacity:0;}}
  /* tlo karty: aurora + delikatna siatka, wszystko w CSS */
  .wb-card::before{content:"";position:absolute;inset:-30%;z-index:0;pointer-events:none;
    background:
      radial-gradient(42% 38% at 78% 12%, rgba(56,189,248,.42) 0%, rgba(56,189,248,0) 70%),
      radial-gradient(46% 40% at 12% 88%, rgba(124,92,255,.38) 0%, rgba(124,92,255,0) 72%),
      radial-gradient(34% 30% at 30% 8%, rgba(37,99,235,.34) 0%, rgba(37,99,235,0) 70%);
    filter:blur(2px);animation:nxCardAurora 18s ease-in-out infinite alternate;}
  @keyframes nxCardAurora{
    0%{transform:translate3d(0,0,0) scale(1);}
    50%{transform:translate3d(3%,-2.5%,0) scale(1.08);}
    100%{transform:translate3d(-2.5%,2%,0) scale(1.04);}}
  /* przetarcie swiatlem, zsynchronizowane z wjazdem karty */
  .wb-card::after{content:"";position:absolute;top:-60%;left:-70%;width:60%;height:220%;z-index:0;pointer-events:none;
    background:linear-gradient(100deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.16) 45%,rgba(255,255,255,.28) 50%,rgba(255,255,255,.16) 55%,rgba(255,255,255,0) 100%);
    transform:rotate(14deg);animation:nxCardSheen 11s ease-in-out infinite;}
  @keyframes nxCardSheen{0%,42%{left:-70%;opacity:0;}46%{opacity:1;}64%{left:135%;opacity:.9;}66%,100%{left:135%;opacity:0;}}
  .wb-card > *{position:relative;z-index:1;}
  .wb-crow1{display:flex;align-items:flex-start;justify-content:space-between;padding:16px 18px 10px;}
  .wb-logo{font-size:24px;font-weight:700;font-style:italic;letter-spacing:-.02em;color:#fff;text-shadow:0 2px 0 rgba(9,20,45,.55);}
  .wb-cnt{text-align:right;}
  .wb-cnt .l{font-size:9px;letter-spacing:.22em;color:#9fb2d4;font-weight:600;}
  .wb-cnt .n{font-size:22px;font-weight:700;line-height:1.1;position:relative;height:26px;width:64px;}
  .wb-cnt .n span{position:absolute;right:0;top:0;opacity:0;}
  .wb-cnt .n .c7{animation:nxCnt7 11s steps(1) infinite;}
  .wb-cnt .n .c8{animation:nxCnt8 11s steps(1) infinite;}
  .wb-cnt .n .c9{animation:nxCnt9 11s steps(1) infinite;}
  .wb-cnt .n .c10{animation:nxCnt10 11s steps(1) infinite;}
  @keyframes nxCnt7 {0%,52%{opacity:1;}52.01%,100%{opacity:0;}}
  @keyframes nxCnt8 {0%,52%{opacity:0;}52.01%,62%{opacity:1;}62.01%,100%{opacity:0;}}
  @keyframes nxCnt9 {0%,62%{opacity:0;}62.01%,72%{opacity:1;}72.01%,100%{opacity:0;}}
  @keyframes nxCnt10{0%,72%{opacity:0;}72.01%,100%{opacity:1;}}
  .wb-band{background:rgba(9,20,45,.34);padding:12px 18px 14px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border-top:1px solid rgba(255,255,255,.09);border-bottom:1px solid rgba(255,255,255,.07);box-shadow:inset 0 1px 0 rgba(255,255,255,.05);}
  .wb-tag{font-size:10.5px;letter-spacing:.3em;color:#b9c8e4;font-weight:600;margin-bottom:10px;}
  .wb-band .nx-stamps{max-width:300px;}
  .wb-band .nx-st.p8 .fill{animation:nxPop8 11s cubic-bezier(.34,1.56,.64,1) infinite;}
  .wb-band .nx-st.p9 .fill{animation:nxPop9 11s cubic-bezier(.34,1.56,.64,1) infinite;}
  .wb-band .nx-st.p10 .fill{animation:nxPop10 11s cubic-bezier(.34,1.56,.64,1) infinite;}
  @keyframes nxPop8 {0%,50%{transform:scale(0);}54%{transform:scale(1.25);}56%,100%{transform:scale(1);}}
  @keyframes nxPop9 {0%,60%{transform:scale(0);}64%{transform:scale(1.25);}66%,100%{transform:scale(1);}}
  @keyframes nxPop10{0%,70%{transform:scale(0);}74%{transform:scale(1.25);}76%,100%{transform:scale(1);}}
  .wb-next{display:flex;align-items:baseline;justify-content:space-between;padding:12px 18px 16px;}
  .wb-next .l{font-size:9px;letter-spacing:.22em;color:#9fb2d4;font-weight:600;}
  .wb-next .v{font-size:16px;font-weight:600;color:#fff;}
  .wb-unlock{position:absolute;left:18px;right:18px;bottom:14px;background:#1a7f4b;color:#fff;border-radius:12px;padding:10px 14px;font-size:13px;font-weight:600;display:flex;align-items:center;gap:8px;opacity:0;transform:translateY(10px);animation:nxUnlockIn 11s ease infinite;}
  @keyframes nxUnlockIn{0%,76%{opacity:0;transform:translateY(10px);}80%,92%{opacity:1;transform:translateY(0);}96%,100%{opacity:0;}}

  /* ---------- 04 KREATOR KAMPANII ---------- */
  .cp{position:relative;background:#f2f4f5;border-radius:24px;overflow:hidden;display:grid;grid-template-columns:1fr 1.35fr;gap:40px;align-items:center;padding:56px;}
  @media (max-width:900px){ .cp{grid-template-columns:1fr;padding:32px 22px;} }
  .cp-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;position:relative;}
  .cp-tile{background:#fdfdfd;border:1px solid #e4e7ea;border-radius:14px;padding:14px 15px;min-height:88px;color:#20293a;box-sizing:border-box;}
  .cp-tile .ic{display:block;margin-bottom:16px;}
  .cp-tile .ic svg{width:17px;height:17px;stroke:#3b4657;}
  .cp-tile b{font-size:13.5px;font-weight:500;display:block;}
  .cp-tile i{font-style:normal;display:block;font-size:11.5px;color:#9aa3b2;line-height:1.35;margin-top:3px;max-height:0;opacity:0;overflow:hidden;}
  .cp-tile.h1{animation:nxTileHov 14s ease infinite;}
  .cp-tile.h1 i{animation:nxDescHov 14s ease infinite;}
  .cp-tile.h2{animation:nxTileHov 14s ease infinite;animation-delay:-7s;}
  .cp-tile.h2 i{animation:nxDescHov 14s ease infinite;animation-delay:-7s;}
  @keyframes nxTileHov{0%,4%{background:#fdfdfd;box-shadow:none;}8%,38%{background:#ececee;box-shadow:0 6px 18px -10px rgba(20,35,60,.25);}42%,100%{background:#fdfdfd;box-shadow:none;}}
  @keyframes nxDescHov{0%,4%{max-height:0;opacity:0;}8%,38%{max-height:40px;opacity:1;}42%,100%{max-height:0;opacity:0;}}
  .cp-cursor{position:absolute;z-index:10;width:20px;height:20px;pointer-events:none;animation:nxCurMove 14s ease-in-out infinite;}
  .cp-cursor svg{filter:drop-shadow(0 2px 4px rgba(0,0,0,.3));}
  @keyframes nxCurMove{0%,3%{left:64%;top:110%;}8%,38%{left:26%;top:26%;}45%,88%{left:74%;top:52%;}95%,100%{left:64%;top:110%;}}
  .cp-tl{position:relative;padding-left:6px;}
  .cp-step{position:relative;display:flex;gap:16px;align-items:flex-start;padding:0 0 26px 0;opacity:0;transform:translateY(10px);}
  .cp-step:not(:last-child)::before{content:"";position:absolute;left:9px;top:24px;bottom:2px;width:2px;background:#d9dee5;}
  .cp-dot{width:20px;height:20px;border-radius:50%;background:#2563eb;border:4px solid #cfdefb;flex:none;position:relative;z-index:2;box-sizing:border-box;}
  .cp-sc{flex:1;border-bottom:1px solid #e2e6ea;padding-bottom:16px;}
  .cp-sc b{font-size:15.5px;font-weight:500;color:#111a2c;display:block;}
  .cp-note{margin-top:10px;background:#fff;border:1px solid #e6e9ed;border-radius:12px;padding:10px 13px;display:flex;gap:10px;align-items:flex-start;box-shadow:0 8px 22px -14px rgba(20,35,60,.25);}
  .cp-note .av{width:30px;height:30px;border-radius:8px;background:#eef6ee;border:1px solid #dfeadf;flex:none;display:grid;place-items:center;font-size:8px;font-weight:700;color:#1a7f4b;text-align:center;line-height:1;}
  .cp-note .tx{font-size:12.5px;color:#2a3550;line-height:1.35;}
  .cp-note .tx .nm{color:#9aa3b2;font-size:10.5px;display:block;margin-bottom:1px;}
  .cp-step.s1{animation:nxSt1 14s ease infinite;}
  .cp-step.s2{animation:nxSt2 14s ease infinite;}
  .cp-step.s3{animation:nxSt3 14s ease infinite;}
  .cp-step.s4{animation:nxSt4 14s ease infinite;}
  @keyframes nxSt1{0%,44%{opacity:0;transform:translateY(12px);}48%,96%{opacity:1;transform:translateY(0);}100%{opacity:0;}}
  @keyframes nxSt2{0%,50%{opacity:0;transform:translateY(12px);}54%,96%{opacity:1;transform:translateY(0);}100%{opacity:0;}}
  @keyframes nxSt3{0%,56%{opacity:0;transform:translateY(12px);}60%,96%{opacity:1;transform:translateY(0);}100%{opacity:0;}}
  @keyframes nxSt4{0%,62%{opacity:0;transform:translateY(12px);}66%,96%{opacity:1;transform:translateY(0);}100%{opacity:0;}}

  /* ---------- 05 ANALITYKA: MACBOOK + DASHBOARD ---------- */
  .mb-wrap{max-width:1060px;margin:56px auto 0;}
  .mb-screen{position:relative;background:#0c0d10;border-radius:22px 22px 0 0;padding:10px 10px 0;box-shadow:0 40px 90px -30px rgba(15,30,60,.45);}
  .mb-notch{position:absolute;top:10px;left:50%;transform:translateX(-50%);width:96px;height:13px;background:#0c0d10;border-radius:0 0 9px 9px;z-index:5;}
  .mb-display{background:#f7f9fc;border-radius:12px 12px 0 0;overflow:hidden;aspect-ratio:1512/860;}
  .mb-base{position:relative;height:16px;background:linear-gradient(180deg,#e8eaee,#c9ccd3 60%,#9ea3ac);border-radius:0 0 16px 16px;margin:0 -26px;}
  .mb-base::before{content:"";position:absolute;left:50%;top:0;transform:translateX(-50%);width:170px;height:7px;background:linear-gradient(180deg,#b9bdc6,#dfe2e7);border-radius:0 0 9px 9px;}
  .db{display:flex;height:100%;font-size:10.5px;color:#3b4657;background:#f7f9fc;text-align:left;}
  .db-side{width:17.5%;min-width:120px;background:#fff;border-right:1px solid #e9edf3;padding:12px 10px;display:flex;flex-direction:column;gap:2px;box-sizing:border-box;}
  @media (max-width:720px){ .db-side{display:none;} }
  .db-logo{font-size:15px;font-weight:700;color:#16305e;letter-spacing:-.02em;font-style:italic;margin:2px 4px 12px;}
  .db-nav{display:flex;align-items:center;gap:7px;padding:6px 8px;border-radius:8px;color:#54617a;font-weight:500;white-space:nowrap;}
  .db-nav svg{width:11px;height:11px;flex:none;stroke:#7c8aa3;}
  .db-nav.on{background:#eaf1fe;color:#2563eb;font-weight:600;}
  .db-nav.on svg{stroke:#2563eb;}
  .db-side .sp{flex:1;}
  .db-contact{border:1px solid #e2e8f1;border-radius:8px;padding:6px 8px;text-align:center;color:#54617a;font-weight:500;}
  .db-user{display:flex;align-items:center;gap:6px;margin-top:8px;padding:0 4px;color:#7c8aa3;font-size:9px;}
  .db-user .av{width:16px;height:16px;border-radius:50%;background:#dbe6f7;color:#2563eb;font-weight:700;display:grid;place-items:center;font-size:8px;}
  .db-main{flex:1;padding:12px 14px;overflow:hidden;display:flex;flex-direction:column;gap:10px;box-sizing:border-box;}
  .db-top{display:flex;align-items:center;gap:9px;}
  .db-venue{width:26px;height:26px;border-radius:7px;background:#eef6ee;border:1px solid #dfeadf;display:grid;place-items:center;}
  .db-vt b{display:block;font-size:12.5px;color:#0e1726;letter-spacing:-.01em;}
  .db-vt span{font-size:9px;color:#8a96a8;}
  .db-range{margin-left:auto;display:flex;background:#fff;border:1px solid #e2e8f1;border-radius:8px;padding:2px;gap:1px;}
  .db-range span{padding:4px 8px;border-radius:6px;color:#54617a;font-weight:500;}
  .db-range span.on{background:#eaf1fe;color:#2563eb;font-weight:600;}
  .db-newbtn{background:#2563eb;color:#fff;border-radius:8px;padding:5px 10px;font-weight:600;}
  .db-grid{display:grid;grid-template-columns:1.35fr 1fr 1fr 1fr;grid-template-rows:auto auto;gap:8px;}
  .db-card{background:#fff;border:1px solid #e9edf3;border-radius:10px;padding:9px 11px;position:relative;box-sizing:border-box;}
  .db-card .lb{display:flex;align-items:center;gap:5px;color:#54617a;font-weight:500;font-size:9.5px;}
  .db-card .lb .ic{width:14px;height:14px;border-radius:5px;background:#eaf1fe;color:#2563eb;display:grid;place-items:center;font-size:8px;}
  .db-card .val{font-size:17px;font-weight:700;color:#0e1726;letter-spacing:-.02em;margin-top:4px;}
  .db-card .pct{position:absolute;top:9px;right:10px;font-size:8.5px;color:#9aa3b2;}
  .db-spark{margin-top:5px;height:18px;width:100%;}
  .db-spark polyline{fill:none;stroke:#2563eb;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;}
  .db-spark.g polyline{stroke:#16a34a;}
  .db-hero{grid-row:span 2;display:flex;flex-direction:column;}
  .db-hero .tag{font-size:8px;font-weight:700;letter-spacing:.12em;color:#1a7f4b;margin-bottom:6px;}
  .db-hero .ph{flex:1;background:#f2f7f2;border:1px solid #e3eee3;border-radius:8px;display:grid;place-items:center;min-height:64px;}
  .db-hero .ph .ym{font-weight:700;color:#1a7f4b;font-size:13px;letter-spacing:-.01em;line-height:1.05;text-align:center;}
  .db-hero .ph .ym svg{display:block;margin:0 auto 3px;}
  .db-hero b{font-size:11.5px;color:#0e1726;margin-top:7px;}
  .db-hero i{font-style:normal;font-size:9px;color:#8a96a8;}
  .db-bars{background:#fff;border:1px solid #e9edf3;border-radius:10px;padding:10px 12px 8px;flex:1;display:flex;flex-direction:column;min-height:0;box-sizing:border-box;}
  .db-bars .bh{display:flex;align-items:baseline;gap:8px;}
  .db-bars .bh b{font-size:11.5px;color:#0e1726;}
  .db-bars .bh span{font-size:9px;color:#8a96a8;}
  .db-bars .row{flex:1;display:flex;align-items:flex-end;gap:2.2px;margin-top:8px;min-height:46px;}
  .db-bars .row i{flex:1;background:#2563eb;border-radius:2px 2px 0 0;opacity:.9;}
  .db-bars .ax{display:flex;justify-content:space-between;color:#a5aebc;font-size:7.5px;margin-top:4px;}
  .db-bottom{display:grid;grid-template-columns:1.55fr 1fr;gap:8px;}
  .db-list{background:#fff;border:1px solid #e9edf3;border-radius:10px;padding:9px 11px;box-sizing:border-box;}
  .db-list b.t{font-size:11px;color:#0e1726;display:block;margin-bottom:6px;}
  .db-li{display:flex;align-items:center;gap:6px;padding:3.5px 0;border-top:1px solid #f2f5f9;font-size:9.5px;}
  .db-li:first-of-type{border-top:none;}
  .db-li .dot{width:5px;height:5px;border-radius:50%;background:#22c55e;flex:none;}
  .db-li .dot.b{background:#2563eb;}
  .db-li b{color:#1c2740;font-weight:600;}
  .db-li span{color:#68758b;}
  .db-li .tm{margin-left:auto;color:#a5aebc;font-size:8.5px;}
  .db-tot{background:#fff;border:1px solid #e9edf3;border-radius:10px;padding:9px 11px;box-sizing:border-box;}
  .db-tot b.t{font-size:11px;color:#0e1726;}
  .db-tot .big{background:#f4f8ff;border:1px solid #e2ecfd;border-radius:8px;padding:7px 9px;margin:6px 0;}
  .db-tot .big .n{font-size:16px;font-weight:700;color:#0e1726;}
  .db-tot .r{display:flex;justify-content:space-between;padding:3.5px 0;border-top:1px solid #f2f5f9;font-size:9.5px;color:#54617a;}
  .db-tot .r b{color:#0e1726;}

  /* ---------- 06 POWIADOMIENIE NA LOCK SCREENIE ---------- */
  .pn-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:56px;align-items:center;}
  @media (max-width:900px){ .pn-grid{grid-template-columns:1fr;} }
  .pn-panel{background:#eceef1;border-radius:26px;height:560px;position:relative;overflow:hidden;}
  .pn-phone{position:absolute;left:50%;top:40px;transform:translateX(-50%);width:440px;height:900px;background:#17181c;border-radius:66px;padding:15px;box-sizing:border-box;box-shadow:0 50px 90px -40px rgba(10,20,40,.55), inset 0 0 0 3px #3a3d44;}
  @media (max-width:520px){ .pn-phone{width:92%;min-width:300px;} }
  .pn-screen{width:100%;height:100%;border-radius:52px;overflow:hidden;position:relative;background:linear-gradient(200deg,#7fb6d9 0%,#4f8ecb 32%,#2764b6 58%,#174a9b 78%,#0e3a86 100%);}
  .pn-screen::before{content:"";position:absolute;left:-34%;top:-42%;width:150%;height:88%;border-radius:50%;background:linear-gradient(160deg,#bfe6da 0%,#7cc3bd 45%,#3f8fae 100%);box-shadow:0 30px 80px rgba(10,40,90,.35);}
  .pn-screen::after{content:"";position:absolute;right:-55%;top:-10%;width:120%;height:80%;border-radius:50%;background:linear-gradient(230deg,#123c7e 0%,#2a63b3 55%,rgba(42,99,179,0) 100%);opacity:.85;}
  .pn-notif{position:absolute;left:5.5%;right:5.5%;top:44%;z-index:3;display:flex;gap:12px;align-items:flex-start;background:rgba(235,242,250,.30);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border:1px solid rgba(255,255,255,.18);border-radius:22px;padding:13px 15px;color:#fff;animation:nxNotifIn 7s ease infinite;animation-delay:-2s;}
  @keyframes nxNotifIn{0%,6%{opacity:0;transform:translateY(-26px) scale(.94);}12%,90%{opacity:1;transform:translateY(0) scale(1);}97%,100%{opacity:0;transform:translateY(-14px) scale(.97);}}
  .pn-appic{width:40px;height:40px;border-radius:10px;background:#fff;flex:none;display:grid;place-items:center;overflow:hidden;}
  .pn-appic .ym{font-size:9px;font-weight:700;color:#1a7f4b;text-align:center;line-height:1.05;}
  .pn-nt{flex:1;min-width:0;}
  .pn-nt .r1{display:flex;align-items:baseline;gap:8px;}
  .pn-nt .r1 b{font-size:16.5px;font-weight:600;letter-spacing:-.01em;}
  .pn-nt .r1 span{margin-left:auto;font-size:13px;color:rgba(255,255,255,.75);flex:none;}
  .pn-nt p{font-size:15.5px;line-height:1.32;margin:2px 0 0;color:rgba(255,255,255,.96);}

  /* ================================================================
     TŁO PANELI MOTION GRAPHICS — "technical blueprint"
     Warstwy (od góry): ziarno → winieta
     → poswiata brandu za urzadzeniem → baza.
     Wszystko w jednej wlasciwosci background, bez dodatkowych
     elementow i bez z-index — animacje urzadzen pozostaja nietkniete.
     ================================================================ */
  .wb, .tk-strip, .cp, .pn-panel, .dm-stage{
    background:
      /* 1. ziarno — zdejmuje plastikowa plaskosc */
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.045'/%3E%3C/svg%3E") repeat,
      /* 2. winieta — skupia wzrok na srodku panelu */
      radial-gradient(125% 95% at 50% 42%, rgba(238,242,248,0) 30%, #eaeff6 82%),
      /* 3. poswiata brandu — jakby ekran urzadzenia swiecil na tlo */
      radial-gradient(72% 58% at 50% 46%, rgba(37,99,235,.17) 0%, rgba(37,99,235,0) 74%),
      /* 4. baza */
      linear-gradient(180deg, #f5f8fc 0%, #e4eaf3 100%);
    /* swiatlo na gornej krawedzi + wlosowa ramka: panel czyta sie jak fizyczna plytka */
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.85),
      inset 0 0 0 1px rgba(28,52,94,.055);
  }
  /* poswiata pod laptopem w sekcji analityki (bez panelu — laptop zostaje na bialym) */
  .mb-wrap{
    background:radial-gradient(58% 42% at 50% 62%, rgba(37,99,235,.13) 0%, rgba(37,99,235,0) 70%);
  }

  /* ================================================================
     FILARY na stronie glownej - na istniejacych komponentach:
     karta = .scn-pass (ta sama co na /dla-kogo), telefon = .pn-* (ten z NX-06)
     ================================================================ */
  /* --- wspolny naglowek sekcji --- */
  .hp-head{max-width:760px;margin:0 auto 66px;text-align:center;}
  .hp-head .eb{font-size:12px;font-weight:600;letter-spacing:.14em;color:#2563eb;margin-bottom:14px;}
  .hp-head h2{font-family:'Newsreader',Georgia,serif;font-size:clamp(30px,4vw,48px);font-weight:500;letter-spacing:-.02em;line-height:1.1;color:#0b1424;margin:0 0 16px;}
  .hp-head p{font-size:clamp(15px,1.5vw,18px);line-height:1.55;color:#54617a;margin:0;}

  /* --- 3 filary: wiersze --- */
  .hp-row{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,5vw,84px);align-items:center;margin-bottom:110px;}
  .hp-row:last-child{margin-bottom:0;}
  .hp-row.rev .hp-copy{order:2;}
  .hp-row.rev .hp-vis{order:1;}
  @media (max-width:900px){ .hp-row{grid-template-columns:1fr;gap:34px;margin-bottom:78px;} .hp-row.rev .hp-copy,.hp-row.rev .hp-vis{order:0;} }

  .hp-copy .eb{display:inline-block;font-size:11.5px;font-weight:700;letter-spacing:.13em;color:#2563eb;background:rgba(37,99,235,.08);border:1px solid rgba(37,99,235,.14);padding:6px 12px;border-radius:999px;margin-bottom:18px;}
  .hp-copy h3{font-family:'Newsreader',Georgia,serif;font-size:clamp(25px,3vw,37px);font-weight:500;letter-spacing:-.018em;line-height:1.14;color:#0b1424;margin:0 0 16px;}
  .hp-copy>p{font-size:16px;line-height:1.62;color:#54617a;margin:0 0 22px;}
  .hp-copy ul{margin:0 0 26px;padding:0;}
  .hp-copy li{list-style:none;display:flex;gap:10px;align-items:flex-start;font-size:15px;line-height:1.5;color:#37415a;font-weight:500;padding:7px 0;}
  .hp-copy li svg{width:17px;height:17px;flex:none;margin-top:2px;stroke:#1a7f4b;fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;}
  .hp-more{display:inline-flex;align-items:center;gap:8px;font-size:14.5px;font-weight:600;color:#2563eb;text-decoration:none;border-bottom:1px solid rgba(37,99,235,.3);padding-bottom:3px;transition:gap .18s ease,border-color .18s ease;}
  .hp-more:hover{gap:13px;border-color:#2563eb;}
  .hp-more svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;}

  .hp-vis{position:relative;border-radius:26px;min-height:400px;display:grid;place-items:center;overflow:hidden;padding:34px;}
  .hp-vis.v1{background:linear-gradient(160deg,#e6f0fb 0%,#dbe9f8 55%,#eef4fb 100%);}
  .hp-vis.v2{background:linear-gradient(160deg,#f3f6fa 0%,#e9eef6 60%,#f7f9fc 100%);}
  .hp-vis.v3{background:linear-gradient(165deg,#dfe9f8 0%,#cfe0f5 48%,#e9f1fb 100%);}
  @media (max-width:900px){ .hp-vis{min-height:340px;padding:26px;} }

  /* ===== HERO: plakietka "karty lojalnosciowe online" ===== */
  .hero-badge{display:inline-flex;align-items:center;gap:9px;flex-wrap:wrap;justify-content:center;
    background:rgba(255,255,255,.82);border:1px solid rgba(255,255,255,.9);
    box-shadow:0 8px 24px -12px rgba(20,50,90,.45);
    border-radius:999px;padding:8px 16px;margin:0 0 20px;
    -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);}
  .hero-badge svg{width:16px;height:16px;flex:none;color:#2563eb;}
  .hero-badge b{font-size:13.5px;font-weight:700;color:#12325c;letter-spacing:.01em;}
  .hero-badge i{width:1px;height:13px;background:rgba(18,50,92,.22);flex:none;}
  .hero-badge span{font-size:13px;font-weight:500;color:#42618c;}
  @media (max-width:520px){ .hero-badge{gap:7px;padding:7px 13px;} .hero-badge b{font-size:12.5px;} .hero-badge i,.hero-badge span{display:none;} }

  /* ===== STEMPLE NFC ===== */
  /* --- wyrozniony stempel (kafel obok tekstu) --- */
  .st-vis{padding:26px 20px 22px;}
  .st-hero{position:relative;margin:0;width:clamp(120px,20vw,168px);}
  .st-hero svg{display:block;width:100%;height:auto;max-height:340px;
    filter:drop-shadow(0 16px 22px rgba(20,45,85,.26)) drop-shadow(0 2px 4px rgba(20,45,85,.18));
    animation:stampBob 4.2s ease-in-out infinite;}

  @keyframes stampBob{0%,100%{transform:translateY(0);}50%{transform:translateY(-9px);}}
  @media (prefers-reduced-motion:reduce){ .st-hero svg{animation:none;} }

  /* --- karuzela wzorow --- */
  .st-car-wrap{margin-top:clamp(48px,6vw,74px);}
  .st-car-top{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0 0 18px;}
  .st-car-label{font-size:13.5px;font-weight:600;color:#54617a;}
  .st-car-nav{display:flex;gap:8px;flex:none;}
  .st-car-btn{width:38px;height:38px;border-radius:50%;flex:none;cursor:pointer;
    background:#fff;border:1px solid rgba(14,23,38,.12);color:#1c3a63;
    display:flex;align-items:center;justify-content:center;padding:0;
    box-shadow:0 4px 14px -6px rgba(14,23,38,.35);
    transition:background .18s ease,border-color .18s ease,opacity .18s ease,transform .18s ease;}
  .st-car-btn svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;}
  .st-car-btn:hover:not(:disabled){background:#f2f7ff;border-color:rgba(37,99,235,.4);transform:translateY(-1px);}
  .st-car-btn:disabled{opacity:.32;cursor:default;box-shadow:none;}
  @media (max-width:640px){ .st-car-nav{display:none;} }

  .st-car{display:flex;gap:clamp(10px,1.4vw,18px);overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x proximity;scroll-behavior:smooth;padding:4px 2px 10px;
    scrollbar-width:none;-ms-overflow-style:none;cursor:grab;}
  .st-car::-webkit-scrollbar{display:none;}
  .st-car.is-grab{cursor:grabbing;scroll-behavior:auto;scroll-snap-type:none;user-select:none;}
  .st-car.is-grab .st-card{pointer-events:none;}

  .st-card{flex:0 0 auto;width:clamp(132px,17vw,178px);margin:0;scroll-snap-align:start;
    background:linear-gradient(165deg,#e4eefb 0%,#d3e3f6 52%,#eef4fc 100%);
    border-radius:20px;padding:20px 14px 14px;display:flex;flex-direction:column;
    align-items:center;gap:14px;transition:transform .28s ease,box-shadow .28s ease;}
  .st-car:not(.is-grab) .st-card:hover{transform:translateY(-6px);box-shadow:0 18px 34px -18px rgba(20,45,85,.55);}
  .st-card-vis{width:74%;display:flex;align-items:flex-end;justify-content:center;}
  .st-card-vis svg{display:block;width:100%;height:auto;
    filter:drop-shadow(0 12px 18px rgba(20,45,85,.24)) drop-shadow(0 2px 3px rgba(20,45,85,.16));}
  /* staly slot na podpis - inaczej dwuliniowa etykieta rozjezdza stemple w pionie */
  .st-card figcaption{font-size:12px;font-weight:600;line-height:1.35;color:#3d5074;text-align:center;
    background:rgba(255,255,255,.78);border-radius:10px;padding:5px 10px;width:100%;box-sizing:border-box;
    margin-top:auto;min-height:44px;display:flex;align-items:center;justify-content:center;}

  .st-car-hint{display:flex;align-items:center;gap:7px;font-size:12.5px;color:#7c8798;}
  .st-car-hint svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;
    animation:hintNudge 1.8s ease-in-out infinite;}
  @keyframes hintNudge{0%,100%{transform:translateX(0);}50%{transform:translateX(5px);}}
  @media (prefers-reduced-motion:reduce){ .st-car-hint svg{animation:none;} }
  @media (min-width:641px){ .st-car-hint{display:none;} }

  /* plakietka NFC przy wyroznionym stemplu */
  .st-nfc{position:absolute;top:52%;left:-14px;width:38px;height:38px;pointer-events:none;}
  .st-nfc i{position:absolute;inset:0;border:2px solid #2563eb;border-radius:50%;animation:nfcWave 2s ease-out infinite;}
  .st-nfc i:last-of-type{animation-delay:.7s;}
  .st-nfc b{position:absolute;inset:7px;background:#2563eb;border-radius:50%;display:flex;align-items:center;
    justify-content:center;color:#fff;font-size:12px;font-weight:700;box-shadow:0 6px 16px rgba(37,99,235,.45);}

  @keyframes stampBob{0%,100%{transform:translateY(0);}50%{transform:translateY(-9px);}}
  @media (prefers-reduced-motion:reduce){ .st-fig.st-lift svg{animation:none;} }

  /* proba kolorow */
  .st-swatch{display:flex;align-items:center;gap:13px;flex-wrap:wrap;margin:0 0 24px;}
  .st-dots{display:inline-flex;gap:6px;flex:none;}
  .st-dots i{width:19px;height:19px;border-radius:50%;display:block;
    box-shadow:0 1px 3px rgba(14,23,38,.22),inset 0 0 0 1px rgba(14,23,38,.07);}
  .st-swatch em{font-style:normal;font-size:13.5px;font-weight:500;color:#54617a;}

  @media (max-width:900px){
    .st-vis{min-height:300px;padding:24px 16px 20px;}
    .st-hero{width:clamp(128px,34vw,168px);}
    .st-nfc{width:32px;height:32px;left:-12px;}
    .st-nfc b{font-size:10px;inset:6px;}
    .st-card{width:clamp(126px,40vw,164px);padding:18px 12px 12px;border-radius:18px;}
    .st-card figcaption{font-size:11px;padding:4px 8px;}
    .st-car-top{margin-bottom:14px;}
    .st-car-label{font-size:12.5px;}
  }

  /* --- telefon .pn-* przeskalowany do kafla filaru (identyczny styl, mniejszy) --- */
  .hp-vis.v-phone{ align-items:end; padding:34px 34px 0; }
  .hp-phbox{ position:relative; width:334px; height:436px; overflow:hidden; flex:none; }
  .hp-phbox .pn-phone{ position:absolute !important; left:0 !important; top:0 !important;
    width:440px !important; min-width:0 !important; height:900px !important;
    transform:scale(.76) !important; transform-origin:top left; }
  @media (max-width:900px){
    .hp-phbox{ width:290px; height:392px; }
    .hp-phbox .pn-phone{ transform:scale(.66) !important; }
  }

  /* --- wachlarz prawdziwych kart (filar 1) --- */
  .pass-fan{ position:relative; width:284px; height:352px; }
  /* na waskich ekranach wachlarz wychodzil poza kadr sekcji - skalujemy calosc */
  @media (max-width:520px){ .pass-fan{ transform:scale(.86); transform-origin:center; } }
  @media (max-width:390px){ .pass-fan{ transform:scale(.78); } }
  @media (max-width:900px){ .pass-fan{ width:238px; height:318px; } .pass-fan .scn-pass{ width:238px; } }
  .pass-fan .fan-item{ position:absolute; left:0; top:0; transform-origin:50% 100%; }
  .pass-fan .scn-pass{ width:284px; max-width:none; cursor:default; }
  .pass-fan .scn-pass:hover{ transform:none; box-shadow:0 26px 60px rgba(30,60,110,.35); }
  .pass-fan .fan-item.f3{ transform:translate(-34px,-20px) rotate(-9deg); opacity:.5; }
  .pass-fan .fan-item.f2{ transform:translate(-17px,-10px) rotate(-4.5deg); opacity:.78; }
  .pass-fan .fan-item.f1{ animation:passFloat 7s ease-in-out infinite; }
  @keyframes passFloat{ 0%,100%{ transform:translateY(0) rotate(0deg); } 50%{ transform:translateY(-10px) rotate(.6deg); } }
  .pass-fan .fan-fill{ height:168px; }
  .pass-inf{ position:absolute; left:-38px; bottom:-10px; z-index:5; background:#fff;
    border:1px solid rgba(14,23,38,.08); border-radius:15px; padding:11px 16px; text-align:center;
    box-shadow:0 18px 40px -18px rgba(14,23,38,.45); }
  @media (max-width:900px){ .pass-inf{ left:-18px; bottom:-4px; } }
  .pass-inf b{ display:block; font-size:27px; line-height:1; color:#1d4ed8; font-weight:700; }
  .pass-inf span{ display:block; font-size:10.5px; font-weight:700; letter-spacing:.1em; color:#6b7280; margin-top:5px; }

  /* --- arkusz "wystaw opinie" na ekranie telefonu (filar 2) --- */
  .rv-sheet{ position:absolute; left:16px; right:16px; top:19%; z-index:3; background:#fff;
    border-radius:34px; padding:28px 22px 26px; text-align:center;
    box-shadow:0 -18px 50px -18px rgba(6,20,50,.5); animation:rvIn 7s ease infinite; }
  @keyframes rvIn{ 0%,5%{ opacity:0; transform:translateY(70px); } 13%,88%{ opacity:1; transform:translateY(0); }
                   97%,100%{ opacity:0; transform:translateY(24px); } }
  /* awatar lokalu + plakietka Google */
  .rv-av{ position:relative; width:66px; height:66px; margin:0 auto 15px; border-radius:20px;
    background:linear-gradient(160deg,#f2fbf6,#dcf0e6); border:1px solid rgba(26,127,75,.16);
    display:grid; place-items:center; box-shadow:0 10px 22px -12px rgba(26,127,75,.55);
    animation:rvAv 7s cubic-bezier(.34,1.56,.64,1) infinite; }
  .rv-av .ym{ font-size:11px; font-weight:700; color:#1a7f4b; line-height:1.05; text-align:center; letter-spacing:-.01em; }
  .rv-av .ym svg{ display:block; margin:0 auto 2px; }
  .rv-gb{ position:absolute; right:-7px; bottom:-7px; width:27px; height:27px; border-radius:50%;
    background:#fff; box-shadow:0 3px 10px rgba(14,23,38,.22); display:grid; place-items:center;
    font-style:normal; font-size:0; animation:rvBadge 7s cubic-bezier(.34,1.56,.64,1) infinite; }
  .rv-gb::after{ content:"G"; font-size:15px; font-weight:700; line-height:1;
    background:conic-gradient(from -45deg,#ea4335 0 25%,#fbbc05 0 50%,#34a853 0 75%,#4285f4 0);
    -webkit-background-clip:text; background-clip:text; color:transparent; }
  @keyframes rvAv{ 0%,7%{ transform:scale(.6) rotate(-8deg); opacity:0; } 14%,90%{ transform:scale(1) rotate(0); opacity:1; }
                   97%,100%{ transform:scale(.9); opacity:0; } }
  @keyframes rvBadge{ 0%,11%{ transform:scale(0); } 17%,90%{ transform:scale(1); } 97%,100%{ transform:scale(.7); opacity:0; } }

  .rv-sheet h4{ font-size:25px; font-weight:600; letter-spacing:-.015em; color:#0b1424; margin:0 0 6px; }
  .rv-sheet p{ font-size:17px; line-height:1.4; color:#6b7280; margin:0 0 18px; }
  .rv-stars{ display:flex; justify-content:center; gap:7px; margin-bottom:12px; }
  .rv-stars svg{ width:38px; height:38px; fill:#d7dce4; animation:rvStar 7s ease-in-out infinite; }
  .rv-stars svg:nth-child(1){ animation-delay:.7s; } .rv-stars svg:nth-child(2){ animation-delay:.95s; }
  .rv-stars svg:nth-child(3){ animation-delay:1.2s; } .rv-stars svg:nth-child(4){ animation-delay:1.45s; }
  .rv-stars svg:nth-child(5){ animation-delay:1.7s; }
  @keyframes rvStar{ 0%,4%{ fill:#d7dce4; transform:scale(1); } 9%{ fill:#fbbc05; transform:scale(1.3); }
                     14%,90%{ fill:#fbbc05; transform:scale(1); } 100%{ fill:#d7dce4; transform:scale(1); } }

  /* ocena pojawia sie po zapaleniu gwiazdek */
  .rv-score{ display:flex; align-items:baseline; justify-content:center; gap:7px; margin-bottom:18px;
    opacity:0; animation:rvScore 7s ease-out infinite; }
  .rv-score b{ font-size:20px; font-weight:700; color:#0b1424; letter-spacing:-.02em; }
  .rv-score span{ font-size:14px; color:#9aa3b2; }
  @keyframes rvScore{ 0%,26%{ opacity:0; transform:translateY(6px); } 32%,90%{ opacity:1; transform:translateY(0); } 97%,100%{ opacity:0; } }

  .rv-btn{ position:relative; overflow:hidden; background:#1d4ed8; color:#fff; font-size:19px; font-weight:600;
    padding:17px; border-radius:18px; box-shadow:0 16px 34px -14px rgba(37,99,235,.9);
    animation:rvBtn 7s ease-in-out infinite; }
  .rv-btn span{ position:relative; z-index:2; }
  .rv-btn::after{ content:""; position:absolute; top:-60%; left:-70%; width:42%; height:220%; z-index:1;
    background:linear-gradient(100deg,rgba(255,255,255,0),rgba(255,255,255,.34),rgba(255,255,255,0));
    transform:rotate(16deg); animation:rvShine 7s ease-in-out infinite; }
  @keyframes rvShine{ 0%,34%{ left:-70%; } 52%,100%{ left:140%; } }
  @keyframes rvBtn{ 0%,60%{ transform:scale(1); } 64%{ transform:scale(.96); } 70%,100%{ transform:scale(1); } }
  /* dotkniecie palcem */
  .rv-tap{ position:absolute; left:50%; top:50%; width:22px; height:22px; margin:-11px 0 0 -11px; z-index:3;
    border-radius:50%; background:rgba(255,255,255,.55); opacity:0; animation:rvTap 7s ease-out infinite; }
  @keyframes rvTap{ 0%,60%{ opacity:0; transform:scale(.3); } 63%{ opacity:.9; transform:scale(1); }
                    74%{ opacity:0; transform:scale(6); } 100%{ opacity:0; transform:scale(6); } }
  /* --- rozdroze --- */
  .hub-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;max-width:1120px;margin:0 auto;}
  @media (max-width:900px){ .hub-grid{grid-template-columns:1fr;} }
  .hub-card{display:flex;flex-direction:column;background:#fff;border:1px solid rgba(14,23,38,.07);border-radius:22px;padding:30px 26px 26px;text-decoration:none;box-shadow:0 16px 40px -26px rgba(14,23,38,.4);transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;}
  .hub-card:hover{transform:translateY(-5px);box-shadow:0 30px 60px -28px rgba(14,23,38,.5);border-color:rgba(37,99,235,.24);}
  .hub-ic{width:46px;height:46px;border-radius:13px;background:linear-gradient(135deg,#2f6bf3,#1d4ed8);display:grid;place-items:center;margin-bottom:20px;box-shadow:0 12px 26px -12px rgba(37,99,235,.8);}
  .hub-ic svg{width:22px;height:22px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
  .hub-card h3{font-size:20px;font-weight:600;letter-spacing:-.015em;color:#0b1424;margin:0 0 10px;}
  .hub-card p{font-size:14.5px;line-height:1.55;color:#6b7280;margin:0 0 22px;flex:1;}
  .hub-go{display:inline-flex;align-items:center;gap:7px;font-size:14px;font-weight:600;color:#2563eb;transition:gap .18s ease;}
  .hub-card:hover .hub-go{gap:12px;}
  .hub-go svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;}

  /* --- pasek cen --- */
  .ps-box{max-width:1000px;margin:0 auto;background:linear-gradient(150deg,#f4f8fd 0%,#eaf1fa 60%,#f6f9fc 100%);border:1px solid rgba(14,23,38,.06);border-radius:26px;padding:clamp(30px,4vw,50px);}
  .ps-tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:32px 0 28px;}
  @media (max-width:720px){ .ps-tiers{grid-template-columns:1fr;} }
  .ps-t{background:#fff;border:1px solid rgba(14,23,38,.07);border-radius:17px;padding:22px 20px;text-align:center;box-shadow:0 14px 34px -22px rgba(14,23,38,.4);}
  .ps-t.hot{border-color:rgba(37,99,235,.35);box-shadow:0 20px 46px -22px rgba(37,99,235,.55);}
  .ps-t .n{font-size:12px;font-weight:700;letter-spacing:.11em;color:#2563eb;margin-bottom:12px;}
  .ps-t .p{font-size:34px;font-weight:700;letter-spacing:-.02em;color:#0b1424;line-height:1;}
  .ps-t .u{font-size:12.5px;color:#9aa3b2;margin-top:7px;}
  .ps-cta{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:center;}
  .ps-btn{display:inline-flex;align-items:center;gap:9px;background:linear-gradient(135deg,#2f6bf3,#1d4ed8);color:#fff;text-decoration:none;font-size:15px;font-weight:600;padding:14px 27px;border-radius:999px;box-shadow:0 16px 34px -14px rgba(37,99,235,.8);transition:transform .15s ease,filter .15s ease;}
  .ps-btn:hover{transform:translateY(-2px);filter:brightness(1.06);}
  .ps-btn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;}
  .ps-note{font-size:13.5px;color:#6b7280;}

  /* --- karta w telefonie w hero (ten sam .scn-pass, tylko mniejszy) --- */
  .hero-pass{ display:flex; justify-content:center; }
  .hero-pass .scn-pass{ width:284px; max-width:none; zoom:.66; cursor:default;
    box-shadow:0 14px 30px rgba(30,50,100,.3); }
  .hero-pass .scn-pass:hover{ transform:none; box-shadow:0 14px 30px rgba(30,50,100,.3); }

  /* pierwsza sekcja podstrony: jeden deterministyczny odstep zamiast margin+padding */
  .scn-sec.scn-first{ margin-top:0 !important; padding-top:150px !important; }

  /* ================================================================
     KONWERSJA: pasek CTA w srodku strony + zwarty rytm pionowy
     ================================================================ */
  .cta-band{ position:relative; overflow:hidden; border-radius:28px; text-align:center;
    background:linear-gradient(135deg,#1e51c8 0%,#2f6bf3 46%,#1d4ed8 100%);
    padding:clamp(40px,5vw,62px) clamp(24px,4vw,56px);
    box-shadow:0 34px 70px -34px rgba(23,60,150,.85); }
  .cta-band::before{ content:""; position:absolute; left:-12%; top:-70%; width:70%; height:190%;
    border-radius:50%; background:radial-gradient(circle,rgba(255,255,255,.16),rgba(255,255,255,0) 68%); pointer-events:none; }
  .cta-band::after{ content:""; position:absolute; right:-16%; bottom:-90%; width:64%; height:190%;
    border-radius:50%; background:radial-gradient(circle,rgba(10,30,90,.3),rgba(10,30,90,0) 66%); pointer-events:none; }
  .cta-band-in{ position:relative; z-index:2; max-width:640px; margin:0 auto; }
  .cta-band h2{ font-family:'Newsreader',Georgia,serif; font-size:clamp(28px,3.8vw,44px); font-weight:500;
    letter-spacing:-.02em; line-height:1.12; color:#fff; margin:0 0 14px; }
  .cta-band p{ font-size:clamp(15px,1.5vw,17.5px); line-height:1.55; color:rgba(255,255,255,.86); margin:0 0 28px; }
  .cta-band-btn{ display:inline-flex; align-items:center; gap:10px; background:#fff; color:#1235a6;
    text-decoration:none; font-size:16px; font-weight:600; padding:16px 32px; border-radius:999px;
    box-shadow:0 18px 38px -14px rgba(6,20,60,.6); transition:transform .15s ease, box-shadow .15s ease; }
  .cta-band-btn:hover{ transform:translateY(-2px); box-shadow:0 24px 48px -14px rgba(6,20,60,.7); }
  .cta-band-btn svg{ width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
  .cta-band-note{ margin-top:18px; font-size:13.5px; color:rgba(255,255,255,.72); }

  /* zwarty rytm: sekcje na stronie glownej stoja blizej siebie */
  .scn-sec{ padding-top:112px !important; }
  .scn-sec.scn-first{ padding-top:150px !important; }
  .hp-row{ margin-bottom:78px; }
  .hp-head{ margin-bottom:52px; }
  @media (max-width:900px){ .hp-row{ margin-bottom:60px; } }

  /* rozdroze na koncu strony: mniejsze, zeby nie konkurowalo z CTA */
  #wybierz .hp-head h2{ font-size:clamp(22px,2.6vw,30px); }
  #wybierz .hub-card{ padding:24px 22px 22px; }
  #wybierz .hub-ic{ width:38px; height:38px; border-radius:11px; margin-bottom:15px; }
  #wybierz .hub-ic svg{ width:18px; height:18px; }
  #wybierz .hub-card h3{ font-size:17px; }
  #wybierz .hub-card p{ font-size:13.5px; margin-bottom:16px; }

  /* --- pasek startowy pod hero: 3 kroki wdrozenia --- */
  .guar-sec{ padding-top:0 !important; margin-top:-196px; position:relative; z-index:5; }
  @media (max-width:900px){ .guar-sec{ margin-top:-104px; } }

  .flow{ position:relative; background:#fff; border:1px solid rgba(14,23,38,.07); border-radius:20px;
    padding:20px 18px 22px; box-shadow:0 26px 60px -30px rgba(14,23,38,.5); overflow:hidden; }
  .flow::before{ content:""; position:absolute; left:0; right:0; top:0; height:60%; pointer-events:none;
    background:radial-gradient(44% 100% at 50% 0%, rgba(37,99,235,.09) 0%, rgba(37,99,235,0) 72%); }

  .flow-pill{ position:relative; z-index:2; display:flex; align-items:center; justify-content:center; gap:8px;
    width:max-content; max-width:100%; margin:0 auto 20px; padding:8px 17px; border-radius:999px;
    background:linear-gradient(135deg,#2f6bf3,#1d4ed8); color:#fff; font-size:13.5px; font-weight:600;
    letter-spacing:-.01em; box-shadow:0 12px 26px -12px rgba(37,99,235,.9); overflow:hidden;
    animation:flowFloat 4.6s ease-in-out infinite; }
  .flow-pill svg{ width:14px; height:14px; flex:none; animation:flowBolt 4.6s ease-in-out infinite; }
  .flow-pill span{ position:relative; z-index:1; }
  .flow-pill::after{ content:""; position:absolute; top:-60%; left:-70%; width:45%; height:220%; pointer-events:none;
    background:linear-gradient(100deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.4) 50%,rgba(255,255,255,0) 100%);
    transform:rotate(16deg); animation:flowShine 4.6s ease-in-out infinite; }
  @keyframes flowFloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-3px); } }
  @keyframes flowBolt{ 0%,72%,100%{ transform:scale(1); opacity:.92; } 80%{ transform:scale(1.26); opacity:1; } 88%{ transform:scale(1); } }
  @keyframes flowShine{ 0%{ left:-70%; } 55%,100%{ left:140%; } }

  .flow-track{ position:relative; z-index:1; display:grid; grid-template-columns:1fr auto 1fr auto 1fr;
    align-items:start; gap:0 4px; max-width:760px; margin:0 auto; }

  .flow-node{ text-align:center; padding:0 2px; }
  .flow-node .dot{ position:relative; display:grid; place-items:center; width:44px; height:44px; margin:0 auto 11px;
    border-radius:50%; background:#fff; border:2px solid #d7e2f6; color:#93a6c7;
    font-size:15px; font-weight:700; box-shadow:0 0 0 0 rgba(37,99,235,0);
    animation:flowDot 6s ease-in-out infinite; }
  .flow-node .dot i{ font-style:normal; line-height:1; }
  .flow-node .dot svg{ width:19px; height:19px; }
  .flow-node .dot::before{ content:""; position:absolute; inset:-6px; border-radius:50%;
    border:2px solid rgba(37,99,235,.55); opacity:0; animation:flowRing 6s ease-out infinite; }
  .flow-node b{ display:block; font-size:14.5px; font-weight:700; color:#0b1424; letter-spacing:-.01em;
    line-height:1.25; margin-bottom:4px; animation:flowLbl 6s ease-in-out infinite; }
  .flow-node .d{ display:block; font-size:12.5px; line-height:1.4; color:#6b7280; max-width:186px; margin:0 auto; }

  .flow-node.s2 .dot, .flow-node.s2 .dot::before, .flow-node.s2 b{ animation-delay:2s; }
  .flow-node.s3 .dot, .flow-node.s3 .dot::before, .flow-node.s3 b{ animation-delay:4s; }

  @keyframes flowDot{
    0%{ transform:scale(1); border-color:#d7e2f6; color:#93a6c7; box-shadow:0 0 0 0 rgba(37,99,235,0); }
    6%{ transform:scale(1.12); border-color:#2563eb; color:#2563eb; box-shadow:0 12px 24px -10px rgba(37,99,235,.85); }
    12%,28%{ transform:scale(1.06); border-color:#2563eb; color:#2563eb; box-shadow:0 12px 24px -10px rgba(37,99,235,.85); }
    40%,100%{ transform:scale(1); border-color:#d7e2f6; color:#93a6c7; box-shadow:0 0 0 0 rgba(37,99,235,0); }
  }
  @keyframes flowRing{ 0%{ opacity:.7; transform:scale(.88); } 18%{ opacity:0; transform:scale(1.45); } 100%{ opacity:0; transform:scale(1.45); } }
  @keyframes flowLbl{ 0%,3%{ color:#0b1424; } 10%,28%{ color:#2563eb; } 40%,100%{ color:#0b1424; } }

  .flow-node.fin .dot{ animation-name:flowDotFin; }
  .flow-node.fin .dot::before{ border-color:rgba(22,163,74,.55); }
  .flow-node.fin b{ animation-name:flowLblFin; }
  @keyframes flowDotFin{
    0%{ transform:scale(1); border-color:#d7e2f6; background:#fff; color:#93a6c7; box-shadow:0 0 0 0 rgba(22,163,74,0); }
    6%{ transform:scale(1.14); border-color:#16a34a; background:#16a34a; color:#fff; box-shadow:0 14px 26px -10px rgba(22,163,74,.9); }
    12%,30%{ transform:scale(1.07); border-color:#16a34a; background:#16a34a; color:#fff; box-shadow:0 14px 26px -10px rgba(22,163,74,.9); }
    42%,100%{ transform:scale(1); border-color:#d7e2f6; background:#fff; color:#93a6c7; box-shadow:0 0 0 0 rgba(22,163,74,0); }
  }
  @keyframes flowLblFin{ 0%,3%{ color:#0b1424; } 10%,30%{ color:#16a34a; } 42%,100%{ color:#0b1424; } }

  .flow-node .spark{ position:absolute; font-style:normal; font-size:10px; color:#16a34a; opacity:0;
    animation:flowSpark 6s ease-out infinite; animation-delay:4s; }
  .flow-node .spark.s-a{ top:-5px; right:1px; }
  .flow-node .spark.s-b{ bottom:-2px; right:-5px; animation-delay:4.12s; }
  .flow-node .spark.s-c{ top:1px; left:-6px; animation-delay:4.24s; }
  @keyframes flowSpark{ 0%,4%{ opacity:0; transform:scale(.4); } 9%{ opacity:1; transform:scale(1.15); } 20%{ opacity:0; transform:scale(.7); } 100%{ opacity:0; } }

  .flow-arrow{ position:relative; align-self:start; margin-top:22px; width:clamp(30px,6vw,80px); height:2px;
    background:#e2e9f5; border-radius:2px; }
  .flow-arrow::after{ content:""; position:absolute; right:-1px; top:50%; width:6px; height:6px;
    border-top:2px solid #e2e9f5; border-right:2px solid #e2e9f5; transform:translateY(-50%) rotate(45deg); }
  .flow-arrow i{ position:absolute; top:50%; left:0; width:7px; height:7px; margin-top:-3.5px; border-radius:50%;
    background:#2563eb; box-shadow:0 0 0 4px rgba(37,99,235,.15); opacity:0;
    animation:flowDash 6s cubic-bezier(.5,0,.5,1) infinite; }
  .flow-arrow.a2 i{ animation-delay:2s; background:#16a34a; box-shadow:0 0 0 4px rgba(22,163,74,.15); }
  @keyframes flowDash{ 0%,24%{ left:0; opacity:0; } 27%{ left:0; opacity:1; } 37%{ left:100%; opacity:1; } 41%,100%{ left:100%; opacity:0; } }

  @media (max-width:760px){
    .flow{ padding:18px 16px 18px; }
    .flow-pill{ margin-bottom:18px; }
    .flow-track{ grid-template-columns:1fr; gap:0; max-width:330px; }
    .flow-node{ display:grid; grid-template-columns:44px 1fr; gap:0 14px; text-align:left; align-items:center; }
    .flow-node .dot{ margin:0; grid-row:span 2; }
    .flow-node b{ align-self:end; margin-bottom:2px; }
    .flow-node .d{ align-self:start; margin:0; max-width:none; }
    .flow-arrow{ width:2px; height:26px; margin:6px 0 6px 21px; align-self:auto; }
    .flow-arrow::after{ right:auto; left:50%; top:auto; bottom:-1px; transform:translateX(-50%) rotate(135deg); }
    .flow-arrow i{ top:0; left:50%; margin:0 0 0 -3.5px; animation-name:flowDashV; }
    @keyframes flowDashV{ 0%,24%{ top:0; opacity:0; } 27%{ top:0; opacity:1; } 37%{ top:100%; opacity:1; } 41%,100%{ top:100%; opacity:0; } }
  }

  @media (prefers-reduced-motion:reduce){
    .flow-pill, .flow-pill svg, .flow-pill::after,
    .flow-node .dot, .flow-node .dot::before, .flow-node b, .flow-node .spark, .flow-arrow i{ animation:none !important; }
    .flow-node .dot{ border-color:#2563eb; color:#2563eb; }
    .flow-node.fin .dot{ border-color:#16a34a; background:#16a34a; color:#fff; }
    .flow-arrow i{ opacity:1; left:100%; }
  }

  /* --- film w laptopie (strona glowna) --- */
  .film-mb{ margin-top:44px; }
  .film-mb .mb-display{ background:#fff; }
  .film-vid{ display:block; width:100%; height:100%; object-fit:cover; background:#fff; }
  @media (max-width:900px){ .film-mb{ margin-top:30px; } }

  /* --- baner: pierwsze 30 dni gratis --- */
  .trial-band{ display:flex; align-items:center; gap:22px; max-width:900px; margin:26px auto 0;
    background:linear-gradient(120deg,#e9faf3 0%,#f2fbf7 55%,#e6f7ee 100%);
    border:1.5px solid #b3ead4; border-radius:22px; padding:20px 24px;
    box-shadow:0 18px 44px -28px rgba(6,122,85,.55); }
  .tb-chip{ flex:none; width:78px; height:78px; border-radius:20px; display:grid; place-items:center; align-content:center;
    background:linear-gradient(150deg,#12a06c,#067a55); color:#fff; line-height:1;
    box-shadow:0 12px 26px -12px rgba(6,122,85,.95); }
  .tb-chip b{ font-size:32px; font-weight:700; letter-spacing:-.03em; }
  .tb-chip i{ font-style:normal; font-size:12px; font-weight:600; letter-spacing:.14em; opacity:.85; margin-top:3px; }
  .tb-tx{ flex:1; min-width:0; }
  .tb-tx b{ display:block; font-size:21px; font-weight:700; color:#06422f; letter-spacing:-.015em; margin-bottom:5px; }
  .tb-tx span{ display:block; font-size:15px; line-height:1.5; color:#3f6b5b; }
  .tb-live{ display:inline-block; width:9px; height:9px; border-radius:50%; background:#10b981;
    margin-right:10px; vertical-align:middle; position:relative; top:-1px; animation:pulseDot 1.8s infinite; }
  @media (max-width:720px){
    .trial-band{ flex-wrap:wrap; gap:16px; padding:18px 18px 20px; }
    .tb-chip{ width:62px; height:62px; border-radius:17px; }
    .tb-chip b{ font-size:26px; }
    .tb-tx{ flex:1 1 60%; }
    .tb-tx b{ font-size:18px; }
  }

  /* ================================================================
     INTERAKTYWNE DEMO "Wyprobuj sam" (sekcja #wyprobuj na stronie glownej)
     Dwa urzadzenia obok siebie: telefon klienta + tablet obslugi.
     Tlo panelu wspoldzielone z .wb/.tk-strip/.cp/.pn-panel (wyzej).
     ================================================================ */
  /* --- pasek postepu (4 etapy) --- */
  .dm-rail{ display:flex; justify-content:center; gap:8px; flex-wrap:wrap; margin:0 auto 34px; }
  .dm-rail-step{ display:flex; align-items:center; gap:8px; font-size:13px; font-weight:600;
    padding:8px 14px; border-radius:999px; border:1px solid #e4e9f1; transition:all .3s ease; }
  .dm-rail-step i{ font-style:normal; width:20px; height:20px; border-radius:50%; background:rgba(127,127,127,.16);
    display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; flex:none; }

  /* --- scena: siatka 2 urzadzen + lacznik --- */
  .dm-stage{ position:relative; display:grid; grid-template-columns:1fr auto 1fr; gap:clamp(20px,3.5vw,48px);
    align-items:start; justify-items:center; border-radius:26px; padding:clamp(24px,4vw,48px); }

  /* --- overlay startowy: "Obsluz klienta testowego" --- */
  .dm-veil{ position:absolute; inset:0; z-index:15; display:grid; place-items:center; padding:20px;
    background:rgba(238,244,251,.55); -webkit-backdrop-filter:blur(7px); backdrop-filter:blur(7px); border-radius:26px; }
  .dm-intro-card{ background:#fff; border:1px solid #e4e9f1; border-radius:22px; padding:28px 26px;
    max-width:400px; width:100%; text-align:center; box-shadow:0 34px 80px -24px rgba(13,26,46,.4);
    animation:sceneIn .45s ease both; }
  .dm-intro-card > b{ display:block; font-size:22px; font-weight:700; color:#0d1a2e; letter-spacing:-.015em; margin-bottom:8px; }
  .dm-intro-card > p{ margin:0 0 18px; font-size:14.5px; line-height:1.55; color:#54617a; }
  .dm-intro-card ul{ list-style:none; margin:0 0 22px; padding:0; text-align:left; display:flex; flex-direction:column; gap:9px; }
  .dm-intro-card li{ display:flex; gap:11px; align-items:flex-start; font-size:14px; line-height:1.45; color:#37415a; font-weight:500; }
  .dm-intro-card li i{ font-style:normal; width:22px; height:22px; border-radius:50%; background:#eaf1fe; color:#2563eb;
    font-size:11.5px; font-weight:700; display:flex; align-items:center; justify-content:center; flex:none; margin-top:1px; }
  .dm-btn.big{ font-size:16px; padding:14px 28px; }

  /* --- pasek przewodnika (narracja krokow) --- */
  .dm-guide{ display:flex; gap:14px; align-items:flex-start; max-width:640px; margin:0 auto 26px;
    background:#fff; border:1px solid #d6e3fb; border-radius:16px; padding:14px 18px;
    box-shadow:0 16px 40px -22px rgba(37,99,235,.45); animation:sceneIn .4s ease both; }
  .dm-guide .chip{ flex:none; font-size:11px; font-weight:800; letter-spacing:.1em; color:#fff; background:#2563eb;
    border-radius:999px; padding:6px 11px; margin-top:2px; white-space:nowrap; }
  .dm-guide .tx b{ display:block; font-size:15.5px; font-weight:700; color:#0d1a2e; margin-bottom:2px; }
  .dm-guide .tx p{ margin:0; font-size:13.5px; line-height:1.5; color:#54617a; }
  .dm-cell{ display:flex; flex-direction:column; align-items:center; gap:14px; width:100%; max-width:360px;
    border-radius:22px; padding:18px 16px 22px; transition:box-shadow .3s ease, background .3s ease; }
  .dm-role{ font-size:11.5px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:#2563eb;
    background:rgba(37,99,235,.08); border:1px solid rgba(37,99,235,.14); padding:6px 12px; border-radius:999px; }
  .dm-link{ align-self:center; margin-top:230px; width:64px; height:4px; position:relative;
    display:flex; align-items:center; justify-content:center; }
  .dm-link::before{ content:""; position:absolute; left:0; right:0; top:50%; border-top:2px dashed #b9cdec; }
  .dm-link i{ position:relative; width:10px; height:10px; border-radius:50%; background:#2563eb;
    box-shadow:0 0 0 5px rgba(37,99,235,.15); animation:pulseDot 1.6s ease-in-out infinite; }

  /* --- telefon klienta --- */
  .dm-phone{ background:#0e1726; border-radius:38px; padding:12px; width:300px; max-width:100%;
    box-shadow:0 30px 80px rgba(30,60,110,.4); }
  .dm-screen{ position:relative; background:linear-gradient(180deg,#eef4fc,#f8fbff); border-radius:30px;
    overflow:hidden; height:500px; display:flex; flex-direction:column; }
  .dm-status{ display:flex; align-items:center; justify-content:space-between; font-size:11px; color:#9aa3b2; padding:14px 22px 0; }
  .dm-scene{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:18px; padding:16px 22px 24px; box-sizing:border-box; animation:sceneIn .45s ease both; }

  /* scena przy ladzie: fizyczny stempel NFC na blacie + telefon klienta (cala klikalna) */
  .dm-counter{ position:relative; cursor:pointer; width:300px; max-width:100%; height:524px; border-radius:30px;
    overflow:hidden; background:linear-gradient(165deg,#dfe9f8 0%,#cfe0f5 48%,#e9f1fb 100%);
    box-shadow:0 30px 80px rgba(30,60,110,.28); transition:transform .25s ease, box-shadow .25s ease; }
  .dm-counter:hover{ transform:translateY(-3px); box-shadow:0 36px 90px rgba(30,60,110,.36); }
  .dm-counter-copy{ position:absolute; top:26px; left:22px; right:22px; text-align:center; z-index:2; }
  .dm-counter-copy b{ display:block; font-size:17.5px; font-weight:700; color:#0d1a2e; letter-spacing:-.01em; margin-bottom:6px; }
  .dm-counter-copy p{ margin:0; font-size:13.5px; line-height:1.5; color:#54617a; }
  .dm-ledge{ position:absolute; left:0; right:0; bottom:0; height:112px; z-index:1;
    background:
      repeating-linear-gradient(90deg, rgba(78,44,20,.09) 0 2px, transparent 2px 64px),
      linear-gradient(180deg,#cfa276 0%,#b5875c 30%,#9a6f47 100%);
    box-shadow:inset 0 14px 22px -14px rgba(78,44,20,.5); }
  .dm-ledge::before{ content:""; position:absolute; left:0; right:0; top:0; height:10px;
    background:linear-gradient(180deg,#e8c9a4,#cfa276); }
  .dm-stamp-shadow{ position:absolute; left:50%; bottom:98px; transform:translateX(-62%); z-index:2;
    width:104px; height:20px; border-radius:50%;
    background:radial-gradient(50% 50% at 50% 50%, rgba(30,20,10,.34) 0%, rgba(30,20,10,0) 72%); }
  .dm-stamp-fig{ position:absolute; left:50%; bottom:96px; transform:translateX(-62%); width:118px; margin:0; z-index:3; }
  .dm-stamp-fig svg{ display:block; width:100%; height:auto;
    filter:drop-shadow(0 14px 18px rgba(20,45,85,.3)) drop-shadow(0 2px 4px rgba(20,45,85,.2));
    animation:stampBob 4.2s ease-in-out infinite; }
  .dm-stamp-fig .st-nfc{ top:44%; left:-18px; }
  .dm-mini-phone{ position:absolute; right:24px; bottom:168px; width:58px; height:106px; z-index:3;
    background:#0e1726; border-radius:14px; padding:4px; box-shadow:0 14px 30px rgba(13,26,46,.4);
    transform:rotate(18deg); animation:tapBob 2.4s ease-in-out infinite;
    transition:transform .4s cubic-bezier(.22,.61,.36,1); }
  .dm-mini-phone .scr{ display:block; width:100%; height:100%; border-radius:10px; position:relative;
    background:linear-gradient(180deg,#eaf1fb,#cfe0f5); }
  .dm-mini-phone .scr::after{ content:""; position:absolute; left:50%; top:50%; width:16px; height:16px;
    transform:translate(-50%,-50%); border-radius:50%; background:#2563eb; opacity:.85; }
  .dm-hint-float{ position:absolute; left:50%; bottom:30px; transform:translateX(-50%); z-index:4; white-space:nowrap;
    box-shadow:0 10px 26px rgba(13,26,46,.25); }

  /* podpowiedz "co kliknac" (pulsujaca kropka) */
  .dm-hint{ display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:600; color:#2563eb;
    background:#eaf1fe; border:1px solid #d6e3fb; border-radius:999px; padding:7px 14px; text-align:left; }
  .dm-hint i{ width:8px; height:8px; border-radius:50%; background:#2563eb; flex:none; animation:pulseDot 1.4s ease-in-out infinite; }

  /* mini-landing po tapnieciu stojaka */
  .dm-land{ width:100%; background:#fff; border-radius:18px; padding:18px 16px; text-align:center;
    box-shadow:0 14px 34px rgba(40,70,120,.12); }
  .dm-land .lg{ width:46px; height:46px; border-radius:14px; background:#46281c; color:#fff; font-size:16px;
    font-weight:800; display:flex; align-items:center; justify-content:center; margin:0 auto 10px; }
  .dm-land b{ display:block; font-size:17px; color:#0e1726; margin-bottom:4px; }
  .dm-land .rw{ font-size:13.5px; color:#6b7280; margin-bottom:12px; }
  .dm-land .nt{ font-size:12px; line-height:1.45; color:#8a94a6; background:#f7f9fc; border-radius:10px; padding:8px 10px; }
  .dm-wbtn{ width:100%; display:flex; align-items:center; justify-content:center; gap:9px; font-family:inherit;
    font-size:14px; font-weight:600; padding:12px 14px; border-radius:12px; cursor:pointer;
    transition:transform .18s ease, box-shadow .18s ease; }
  .dm-wbtn:hover{ transform:translateY(-1px); }
  .dm-wbtn.apple{ background:#0b0b0f; color:#fff; border:1px solid #0b0b0f; box-shadow:0 10px 24px -10px rgba(11,11,15,.6); }
  .dm-wbtn.google{ background:#fff; color:#1b2738; border:1px solid #dfe5ee; box-shadow:0 8px 20px -12px rgba(40,70,120,.4); }

  /* karta w telefonie (bez hover-lift z .scn-pass) */
  .dm-scene-pass{ gap:12px; }
  .dm-pass{ width:236px; max-width:100%; cursor:default; animation:slideUpCard .6s cubic-bezier(.22,.61,.36,1) both; }
  .dm-pass:hover{ transform:none; box-shadow:0 26px 60px rgba(30,60,110,.35); }
  .dm-pass .scn-pass-qr{ padding:12px 0 14px; }
  .dm-pass .scn-pass-qr img{ width:64px; height:64px; }
  .dm-pass .scn-stamp{ width:25px; height:25px; }
  .dm-pass.gold{ box-shadow:0 0 0 3px #f6c14b, 0 26px 60px rgba(30,60,110,.35); }
  /* przy komplecie chowamy QR - zwalnia miejsce na baner nagrody w ekranie telefonu */
  .dm-pass.gold .scn-pass-qr{ display:none; }
  .dm-pass.gold .scn-pass-fields{ padding-bottom:14px; }
  .dm-pop{ animation:popStamp .45s cubic-bezier(.34,1.56,.64,1); }
  .dm-cap{ text-align:center; }
  .dm-cap b{ display:block; font-size:13.5px; color:#16a34a; margin-bottom:3px; }
  .dm-cap span{ font-size:12.5px; line-height:1.4; color:#8a94a6; display:block; max-width:220px; }

  /* toast "+1 pieczatka" */
  .dm-toast{ position:absolute; top:9px; left:50%; z-index:5; display:flex; align-items:center; gap:8px;
    background:rgba(255,255,255,.97); border:1px solid #e3e9f2; border-radius:12px; padding:9px 13px;
    box-shadow:0 14px 34px rgba(40,70,120,.25); white-space:nowrap; font-size:13px; font-weight:600; color:#1b2738;
    animation:dmToastIn .35s ease both; }
  .dm-toast .ic{ width:22px; height:22px; border-radius:7px; background:#e8f8f0; color:#0f9b6c; font-size:13px;
    display:flex; align-items:center; justify-content:center; flex:none; }
  @keyframes dmToastIn{ from{ opacity:0; transform:translateX(-50%) translateY(-10px); } to{ opacity:1; transform:translateX(-50%) translateY(0); } }

  /* baner nagrody + celebracja */
  .dm-ready{ width:100%; text-align:center; background:linear-gradient(150deg,#fff7e6,#fff);
    border:1px solid #f2dfae; border-radius:14px; padding:12px 14px; box-shadow:0 12px 30px rgba(180,140,40,.18); }
  .dm-ready b{ display:block; font-size:14.5px; color:#8a6210; margin-bottom:9px; }
  .dm-ready .sp{ font-style:normal; color:#f6c14b; display:inline-block; animation:sparkle 1.6s ease-in-out infinite; }
  .dm-ready .sp.s2{ animation-delay:.6s; }
  .dm-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; font-family:inherit;
    font-size:14.5px; font-weight:600; padding:12px 20px; border-radius:999px; border:none; cursor:pointer;
    background:#2563eb; color:#fff; box-shadow:0 14px 30px -12px rgba(37,99,235,.75);
    transition:transform .18s ease, background .18s ease; }
  .dm-btn:hover{ transform:translateY(-1px); background:#1d4fd8; }
  .dm-btn.green{ background:#16a34a; box-shadow:0 14px 30px -12px rgba(22,163,74,.7); }
  .dm-btn.green:hover{ background:#128a3e; }
  .dm-btn.ghost{ background:#fff; color:#2563eb; border:1px solid #c7d7f5; box-shadow:none; }
  .dm-btn.ghost:hover{ background:#f4f9ff; border-color:#2563eb; }
  .dm-done{ text-align:center; display:flex; flex-direction:column; align-items:center; gap:14px; }
  .dm-done .star{ position:relative; width:96px; height:96px; border-radius:28px; color:#fff; font-size:40px;
    background:linear-gradient(150deg,#3f6fe0,#1e2a44); display:flex; align-items:center; justify-content:center;
    box-shadow:0 16px 34px rgba(30,50,100,.32); animation:checkPop .5s cubic-bezier(.34,1.56,.64,1) both; }
  .dm-done .star em{ position:absolute; font-style:normal; color:#f6c14b; animation:sparkle 1.6s ease-in-out infinite; }
  .dm-done b{ font-size:19px; color:#0e1726; }
  .dm-done p{ margin:0; font-size:14px; line-height:1.5; color:#6b7280; max-width:230px; }

  /* --- tablet obslugi --- */
  .dm-tab{ width:100%; max-width:340px; background:#17181c; border-radius:26px; padding:10px;
    box-shadow:0 30px 80px rgba(30,60,110,.35); }
  .dm-tabscreen{ position:relative; background:linear-gradient(180deg,#f7fafe,#eef3fa); border-radius:18px;
    min-height:480px; display:flex; flex-direction:column; overflow:hidden; }
  .dm-tab-head{ font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#54617a;
    padding:14px 18px; border-bottom:1px solid #e6ecf5; background:#fff; }
  .dm-tab-body{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:16px; padding:22px; text-align:center; animation:sceneIn .45s ease both; }
  .dm-wait{ opacity:.65; }
  .dm-wait .ic{ width:52px; height:52px; border-radius:16px; background:#e8eef7; color:#8a97ab; font-size:22px;
    display:flex; align-items:center; justify-content:center; }
  .dm-wait b{ display:block; font-size:15.5px; color:#3f4756; }
  .dm-wait p{ margin:0; font-size:13.5px; color:#8a94a6; }
  .dm-scan{ position:relative; width:170px; height:170px; border-radius:18px; background:#fff; border:2px solid #d6e3fb;
    display:flex; align-items:center; justify-content:center; overflow:hidden; box-shadow:0 14px 30px rgba(40,70,120,.14); }
  .dm-scan img{ width:120px; height:120px; opacity:.9; }
  .dm-scanline{ position:absolute; left:8%; right:8%; height:3px; border-radius:2px;
    background:linear-gradient(90deg,rgba(37,99,235,0),#2563eb,rgba(37,99,235,0));
    animation:dmScan .9s ease-in-out infinite alternate; }
  @keyframes dmScan{ from{ top:10%; } to{ top:88%; } }
  .dm-guest{ width:100%; background:#fff; border:1px solid #e4e9f1; border-radius:16px; padding:16px;
    box-shadow:0 12px 30px rgba(40,70,120,.1); }
  .dm-guest b{ display:block; font-size:16px; color:#0e1726; }
  .dm-guest .cnt{ font-size:14px; font-weight:600; color:#2563eb; background:#eaf1fe; border-radius:8px;
    padding:4px 12px; display:inline-block; margin-top:6px; }
  .dm-dots{ display:flex; justify-content:center; gap:6px; margin-top:12px; }
  .dm-dot{ width:11px; height:11px; border-radius:50%; border:1.5px dashed #c7d2e0; box-sizing:border-box; }
  .dm-dot.on{ border:none; background:#2563eb; box-shadow:0 0 0 2px rgba(37,99,235,.18); animation:popStamp .4s ease; }
  .dm-ff{ display:inline-flex; align-items:center; gap:7px; font-family:inherit; font-size:13px; font-weight:600;
    color:#2563eb; background:#fff; border:1px dashed #9db9f0; border-radius:999px; padding:8px 14px; cursor:pointer;
    transition:background .18s ease, border-color .18s ease; }
  .dm-ff:hover{ background:#f4f9ff; border-color:#2563eb; }
  .dm-full{ display:flex; align-items:center; gap:10px; background:#e8f8f0; border:1px solid #bfe8d0; color:#166534;
    border-radius:14px; padding:14px 16px; font-size:14.5px; font-weight:600; text-align:left; }
  .dm-full .tick{ width:26px; height:26px; border-radius:50%; background:#16a34a; color:#fff; font-size:13px;
    display:flex; align-items:center; justify-content:center; flex:none; animation:checkPop .5s ease both; }

  /* --- mobilny sticky pasek statusu karty --- */
  .dm-mini{ display:none; }

  @media (max-width:880px){
    .dm-stage{ grid-template-columns:1fr; justify-items:center; }
    .dm-link{ display:none; }
    .dm-mini{ position:sticky; bottom:14px; z-index:20; display:flex; align-items:center; gap:6px;
      margin:18px auto 0; width:max-content; background:rgba(14,23,38,.92); color:#fff; font-size:13.5px;
      font-weight:600; border-radius:999px; padding:10px 18px; box-shadow:0 14px 34px rgba(13,26,46,.4); }
    .dm-mini .cnt{ color:#9ec2ff; }
  }
  @media (max-width:520px){
    .dm-phone{ width:270px; }
    .dm-screen{ height:470px; }
    .dm-counter{ width:270px; height:494px; }
    .dm-cell{ padding:12px 8px 16px; }
    .dm-rail-step{ font-size:12px; padding:7px 11px; }
    .dm-guide{ flex-direction:column; gap:8px; }
  }

  @media (prefers-reduced-motion: reduce){
    .dm-stamp-fig svg, .dm-stamp-fig .st-nfc i, .dm-mini-phone, .dm-hint i, .dm-scanline, .dm-link i,
    .dm-ready .sp, .dm-done .star em, .dm-toast, .dm-scene, .dm-tab-body, .dm-pop, .dm-pass,
    .dm-done .star, .dm-full .tick, .dm-guide, .dm-intro-card, .dm-dot.on{ animation:none !important; }
  }