/* =============================================================
   EWIDENCJA FAKTUR – home.css
   Style specyficzne dla strony głównej (index.php)
   ============================================================= */

/* ─── SEKCJE – TŁA ─────────────────────────────────────── */
.sec-white{background:#fff;padding:80px 24px}
.sec-light{background:var(--bg);padding:80px 24px}
.sec-white,.sec-light,.sec-dark,.sec-cta{scroll-margin-top:68px}
.sec-dark{background:var(--navy);padding:80px 24px}
.sec-cta{background:linear-gradient(135deg,#0F172A 0%,#1E3A8A 100%);padding:96px 24px;text-align:center}
@media(max-width:768px){.sec-white,.sec-light,.sec-dark,.sec-cta{padding:72px 20px 56px}}
@media(max-width:480px){.sec-white,.sec-light,.sec-dark{padding:72px 16px 44px}.sec-cta{padding:72px 16px 48px}}

/* ─── HERO ──────────────────────────────────────────────── */
.hero{
  background:var(--navy);
  padding:148px 0 0;
  position:relative;
  min-height:100vh;
  display:flex;flex-direction:column;justify-content:space-between;
  overflow-x:clip;
}
@media(max-width:900px){
  .hero{padding-top:100px;min-height:auto}
}
.hero-bg-mesh,.hero-dots{pointer-events:none;overflow:hidden}
.hero-bg-mesh{position:absolute;inset:0;background:radial-gradient(ellipse 80% 60% at 70% 50%,rgba(37,99,235,.25) 0%,transparent 70%)}
.hero-dots{position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.06) 1px,transparent 1px);background-size:28px 28px}
.hero-inner{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;position:relative;z-index:1;flex:1;padding-bottom:48px}
.hero-badge{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:100px;background:rgba(37,99,235,.2);border:1px solid rgba(37,99,235,.35);font-size:12px;font-weight:600;letter-spacing:.04em;color:#93C5FD;margin-bottom:20px}
.badge-dot{width:6px;height:6px;border-radius:50%;background:#F59E0B;flex-shrink:0;animation:blink 1.8s ease-in-out infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.3}}
.hero-h1{font-size:clamp(26px,3.2vw,56px);color:#F8FAFC;margin-bottom:20px;line-height:1.13}
.hero-accent{color:#60A5FA}
.hero-lead{font-size:17px;line-height:1.7;color:rgba(255,255,255,.6);margin-bottom:32px;max-width:480px}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:20px}
.hero-note{font-size:13px;color:rgba(255,255,255,.35)}

/* ─── HERO VISUAL ───────────────────────────────────────── */
.hero-visual{position:relative;display:flex;justify-content:center;align-items:center;min-width:0}
.screen-wrap{position:relative;display:inline-block;width:100%}
.screen-placeholder{width:100%;aspect-ratio:16/10;background:#fff;border-radius:16px;box-shadow:0 32px 80px rgba(0,0,0,.6),0 0 0 1px #3B82F6;display:block}
.phone-wrap{position:absolute;bottom:-20px;right:-20px;width:28%;min-width:80px}
.phone-placeholder{width:100%;aspect-ratio:9/16;background:#fff;border-radius:16px;box-shadow:0 16px 48px rgba(0,0,0,.6),0 0 0 1px #3B82F6;display:block}
.screen-img{width:100%;border-radius:16px;box-shadow:0 32px 80px rgba(0,0,0,.6),0 0 0 2px rgba(0,0,0,.9),0 0 0 4px rgba(255,255,255,.25);display:block}
.phone-img{width:100%;border-radius:16px;box-shadow:0 16px 48px rgba(0,0,0,.6),0 0 0 2px rgba(0,0,0,.9),0 0 0 4px rgba(255,255,255,.25);display:block}
@media(max-width:1100px){.hero-inner{gap:32px}}
@media(max-width:900px){
  .hero-inner{grid-template-columns:1fr;text-align:center}
  .hero-lead{max-width:100%;margin-left:auto;margin-right:auto}
  .hero-actions{justify-content:center}
  .hero-visual{margin-top:32px}
  .screen-img{max-width:500px;margin:0 auto}
  .phone-wrap{right:-10px;bottom:-10px;width:26%}
}
@media(max-width:640px){
  .hero{min-height:100svh;box-sizing:border-box;padding-top:72px}
  .hero-inner{padding-bottom:16px;gap:12px}
  .hero-h1{font-size:clamp(26px,6.5vw,38px)}
  .hero-lead{font-size:15px;margin-bottom:20px;line-height:1.65}
  .hero-actions{gap:8px;margin-bottom:12px}
  .hero-social-bar{display:none}
  .hero-visual{margin-top:16px}
  .screen-img{max-width:90%;border-radius:12px}
  .phone-wrap{right:-8px;bottom:-8px;width:22%}
}
@media(max-width:480px){
  .hero-inner{padding-bottom:8px;gap:8px}
  .hero-h1{font-size:clamp(22px,6.5vw,32px);line-height:1.16;margin-bottom:10px}
  .hero-lead{font-size:13.5px;margin-bottom:14px;line-height:1.55}
  .hero-actions{flex-direction:column;align-items:center;gap:7px;margin-bottom:10px}
  .hero-actions .btn{width:100%;max-width:300px;justify-content:center}
  .hero-note{font-size:11px;line-height:1.5}
  .hero-social-bar{display:none}
  .hero-visual{margin-top:8px}
  .screen-wrap{max-width:100%;margin:0 auto}
  .screen-img{max-width:100%;max-height:22svh;width:auto;object-fit:contain;border-radius:10px}
  .phone-wrap{right:-4px;bottom:-4px;width:20%;min-width:44px}
}

/* ─── TRUST BAR ─────────────────────────────────────────── */
.trust-bar{
  background:linear-gradient(135deg,#1D4ED8 0%,#2563EB 60%,#3B82F6 100%);
  padding:32px 24px 0;
  position:relative;
}
.trust-bar::after{
  content:'';
  display:block;
  margin-top:32px;
  height:48px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Cpath fill='%23F8FAFC' d='M0,48 C360,0 1080,0 1440,48 L1440,48 L0,48 Z'/%3E%3C/svg%3E") no-repeat bottom center/100% 100%;
}
.trust-inner{max-width:1160px;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:0}
.trust-label{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.55);white-space:nowrap}
.trust-logos{display:flex;gap:12px;flex-wrap:wrap;align-items:center;justify-content:center}
.trust-logo{
  padding:7px 16px;
  border-radius:8px;
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.18);
  font-size:13px;
  font-weight:700;
  color:#fff;
  white-space:nowrap;
  letter-spacing:.01em;
  transition:background .15s,transform .15s;
}
.trust-logo:hover{background:rgba(255,255,255,.22);transform:translateY(-1px)}
@media(max-width:600px){
  .trust-bar{padding:24px 20px 0}
  .trust-inner{flex-direction:column;gap:14px}
  .trust-logos{justify-content:center}
}
@media(max-width:400px){
  .trust-logo{padding:5px 12px;font-size:12px}
  .trust-logos{gap:8px}
}

/* ─── PROBLEM ───────────────────────────────────────────── */
.prob-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.prob-card{background:#fff;border:1px solid var(--border);border-radius:var(--r);padding:28px;transition:.2s}
.prob-card:hover{box-shadow:var(--sh-lg);transform:translateY(-2px)}
.prob-icon{width:52px;height:52px;border-radius:14px;display:flex;align-items:center;justify-content:center;margin-bottom:20px;flex-shrink:0}
.prob-icon.red{background:rgba(239,68,68,.1);color:#EF4444}
.prob-icon.orange{background:var(--orange-t);color:var(--orange)}
.prob-icon.blue{background:var(--blue-t);color:var(--blue)}
.prob-icon.purple{background:rgba(139,92,246,.1);color:#8B5CF6}
.prob-card h3{font-size:17px;font-weight:700;color:var(--navy);margin-bottom:10px}
.prob-card p{font-size:14px;line-height:1.65;color:var(--slate)}
@media(max-width:1100px){.prob-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.prob-grid{grid-template-columns:repeat(2,1fr);gap:14px}}
@media(max-width:480px){.prob-grid{grid-template-columns:1fr}.prob-card{padding:20px}}

/* ─── STEPS ─────────────────────────────────────────────── */
.steps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.step-card{background:#fff;border:1px solid var(--border);border-radius:var(--r);overflow:hidden;transition:.2s}
.step-card:hover{box-shadow:var(--sh-lg);transform:translateY(-2px)}
.step-num{font-family:'Bricolage Grotesque',sans-serif;font-size:48px;font-weight:800;color:var(--blue-t);padding:20px 24px 0;line-height:1}
.step-img{width:100%;height:200px;object-fit:cover;object-position:top}
.step-body{padding:20px 24px 24px}
.step-body h3{font-size:17px;font-weight:700;color:var(--navy);margin-bottom:8px}
.step-body p{font-size:14px;line-height:1.65;color:var(--slate)}
@media(max-width:900px){.steps-grid{grid-template-columns:1fr;max-width:540px;margin:0 auto}}
@media(max-width:480px){
  .step-num{font-size:36px;padding:16px 18px 0}
  .step-img{height:160px}
  .step-body{padding:16px 18px 20px}
}

/* ─── SCREENS TABS ───────────────────────────────────────────── */
.screens-tabs{display:flex;gap:8px;justify-content:center;margin-bottom:28px;flex-wrap:wrap}
.screens-tab{padding:9px 22px;border-radius:24px;border:1.5px solid rgba(255,255,255,.25);background:transparent;color:rgba(255,255,255,.6);font-size:14px;font-weight:600;cursor:pointer;transition:all .18s;font-family:'Inter',sans-serif}
.screens-tab:hover{border-color:rgba(255,255,255,.5);color:#fff}
.screens-tab.active{background:#2563EB;border-color:#2563EB;color:#fff}

/* ─── SCREENS GALLERY ───────────────────────────────────────────── */
.screens-grid{display:grid;grid-template-columns:1fr 250px;gap:24px;align-items:start;max-width:1000px;margin:0 auto 64px}
.screen-card{border-radius:16px;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.14),0 0 0 2px rgba(0,0,0,.9),0 0 0 4px rgba(255,255,255,.25);background:#fff}
.screen-card-img{width:100%;display:block;object-fit:cover;object-position:top}
.screen-card--wide{height:477px}
.screen-card--wide .screen-card-img{height:100%;width:100%;object-fit:cover;object-position:top left}
.screen-card--phone{width:250px;height:477px}
.screen-card--phone .screen-card-img{height:100%;width:100%;object-fit:cover;object-position:top}
.screen-card-label{padding:12px 16px;font-size:13px;font-weight:600;color:var(--slate);border-top:1px solid var(--border);background:#fff}
@media(max-width:760px){
  .screens-grid{display:flex;flex-direction:column;align-items:center}
  .screen-card--wide{display:none}
  .screen-card--phone{width:200px !important;height:381px !important;min-width:200px !important;max-width:200px !important;flex-shrink:0}
  .screen-card--phone .screen-card-img{width:200px !important;height:381px !important;object-fit:cover;object-position:top}
}

/* ─── VIDEO ─────────────────────────────────────────────── */
.video-wrap{max-width:860px;margin:0 auto}
.video-player{border-radius:16px;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.18);border:1px solid var(--border);background:#000}
.video-thumb{position:relative;cursor:pointer;display:block;aspect-ratio:16/9}
.video-thumb-img{width:100%;height:100%;object-fit:cover;object-position:top;display:block;transition:transform .4s ease}
.video-thumb:hover .video-thumb-img{transform:scale(1.02)}
.video-overlay{position:absolute;inset:0;background:rgba(10,18,40,.45);transition:background .3s}
.video-thumb:hover .video-overlay{background:rgba(10,18,40,.35)}
.video-play-btn{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:80px;height:80px;border-radius:50%;background:#fff;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--blue);box-shadow:0 8px 32px rgba(0,0,0,.3);transition:transform .2s,box-shadow .2s}
.video-thumb:hover .video-play-btn{transform:translate(-50%,-50%) scale(1.1);box-shadow:0 12px 40px rgba(0,0,0,.4)}
.video-play-label{position:absolute;bottom:28px;left:50%;transform:translateX(-50%);background:rgba(255,255,255,.15);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.25);color:#fff;font-size:13px;font-weight:600;padding:6px 18px;border-radius:100px;white-space:nowrap}
.demo-video{width:100%;display:block;aspect-ratio:16/9;background:#000}

/* ─── FEATURES ──────────────────────────────────────────── */
.feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.feat-card{background:#fff;border:1px solid var(--border);border-radius:var(--r);padding:28px;transition:.2s;border-top:3px solid transparent}
.feat-card:hover{box-shadow:var(--sh-lg);transform:translateY(-2px)}
.feat-card.fc-blue{border-top-color:var(--blue)}
.feat-card.fc-green{border-top-color:var(--green)}
.feat-card.fc-orange{border-top-color:var(--orange)}
.feat-icon{width:52px;height:52px;border-radius:14px;display:flex;align-items:center;justify-content:center;margin-bottom:18px}
.feat-icon.blue{background:var(--blue-t);color:var(--blue)}
.feat-icon.green{background:var(--green-t);color:var(--green)}
.feat-icon.orange{background:var(--orange-t);color:var(--orange)}
.feat-card h3{font-size:16px;font-weight:700;color:var(--navy);margin-bottom:8px}
.feat-card p{font-size:14px;line-height:1.65;color:var(--slate)}
@media(max-width:900px){.feat-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.feat-grid{grid-template-columns:1fr}}

/* ─── DLA KOGO ──────────────────────────────────────────── */
.for-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;max-width:900px;margin:0 auto}
.for-card{background:#fff;border:1px solid var(--border);border-radius:var(--r);padding:32px;display:flex;flex-direction:column;position:relative;transition:.2s}
.for-card:hover{box-shadow:var(--sh-lg);transform:translateY(-2px)}
.for-card-featured{border-color:var(--blue);box-shadow:0 0 0 3px rgba(37,99,235,.1)}
.for-badge{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--blue);color:#fff;font-size:11px;font-weight:700;padding:4px 14px;border-radius:100px;letter-spacing:.04em;white-space:nowrap}
.for-icon{font-size:36px;margin-bottom:16px}
.for-card h3{font-size:17px;font-weight:700;color:var(--navy);margin-bottom:10px}
.for-card p{font-size:14px;line-height:1.65;color:var(--slate);flex:1;margin-bottom:20px}
.for-link{font-size:14px;font-weight:600;color:var(--blue)}
.for-link:hover{color:var(--blue-d)}
@media(max-width:600px){.for-grid{grid-template-columns:1fr;max-width:480px;margin:0 auto}}

/* ─── MOBILE APP ────────────────────────────────────────── */
.mobile-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.mobile-list{display:flex;flex-direction:column;gap:12px;margin-bottom:32px}
.mobile-list li{font-size:15px;color:rgba(255,255,255,.7);font-weight:500}
.mobile-phones{display:flex;gap:20px;justify-content:center;align-items:flex-end}
.mobile-phones .screen-card--phone{width:250px;height:477px;flex-shrink:0}
@media(max-width:768px){
  .mobile-grid{grid-template-columns:1fr;text-align:center}
  .mobile-list{align-items:center}
  .mobile-phones{justify-content:center;margin-top:32px}
  .mob-ph{width:140px}
  .mobile-phones .screen-card--phone{width:min(280px,80vw)}
}
@media(max-width:480px){.mob-ph{width:110px}}

/* ─── SOCIAL PROOF BAR (wewnątrz hero) ──────────────────── */
.hero-social-bar{
  position:relative;z-index:1;
  border-top:1px solid rgba(255,255,255,.1);
  padding:20px 24px;
}
.hero-social-inner{max-width:900px;margin:0 auto;display:flex;align-items:center;justify-content:center}
.hero-social-stat{display:flex;flex-direction:column;align-items:center;padding:0 36px;gap:2px}
.hero-social-num{font-family:'Bricolage Grotesque',sans-serif;font-size:20px;font-weight:800;color:#F8FAFC;line-height:1.1}
.hero-social-lbl{font-size:11px;color:rgba(255,255,255,.4);font-weight:500;white-space:nowrap}
.hero-social-div{width:1px;height:30px;background:rgba(255,255,255,.12);flex-shrink:0}
@media(max-width:600px){.hero-social-bar{display:none}}

/* ─── INTEGRACJE ────────────────────────────────────────── */
.int-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;max-width:860px;margin:0 auto}
.int-card{background:var(--bg);border:1px solid var(--border);border-radius:var(--r);padding:28px;transition:.2s}
.int-card:hover{background:#fff;box-shadow:var(--sh-lg);transform:translateY(-2px)}
.int-logo-wrap{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.int-logo-name{font-size:16px;font-weight:700;color:var(--navy)}
.int-logo-banks{flex-wrap:wrap;gap:8px 12px}
.int-bank-chips{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:12px}
.int-bank-chips span{font-size:11px;font-weight:600;padding:3px 8px;border-radius:6px;background:#fff;border:1px solid var(--border);color:var(--slate)}
.int-card p{font-size:14px;line-height:1.65;color:var(--slate);margin-bottom:14px}
.int-badge{display:inline-block;padding:3px 10px;border-radius:6px;background:var(--blue-t);color:var(--blue);font-size:11px;font-weight:700}
@media(max-width:600px){.int-grid{grid-template-columns:1fr}}

/* ─── CENNIK ────────────────────────────────────────────── */
.price-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;align-items:stretch}
.price-card{background:#fff;border:1px solid var(--border);border-radius:var(--r);padding:28px 24px;display:flex;flex-direction:column;position:relative;transition:.2s}
.price-card:hover{box-shadow:var(--sh-lg);transform:translateY(-2px)}
.price-hot{border-color:var(--blue);box-shadow:0 0 0 3px rgba(37,99,235,.1)}
.price-ribbon{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--blue);color:#fff;font-size:11px;font-weight:700;padding:4px 14px;border-radius:100px;white-space:nowrap}
.price-name{font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--slate-l);margin-bottom:16px}
.price-amount{display:flex;align-items:baseline;gap:4px;margin-bottom:4px}
.price-val{font-family:'Bricolage Grotesque',sans-serif;font-size:clamp(28px,2.8vw,36px);font-weight:800;color:var(--navy)}
.price-per{font-size:13px;color:var(--slate-l)}
.price-note{font-size:12px;color:var(--slate-l);margin-bottom:24px;min-height:18px}
.price-feats{display:flex;flex-direction:column;gap:9px;flex:1;margin-bottom:28px}
.pf-yes{font-size:13px;color:var(--navy);display:flex;align-items:flex-start;gap:6px;line-height:1.4}
.pf-no{font-size:13px;color:var(--slate-l);display:flex;align-items:flex-start;gap:6px;line-height:1.4;text-decoration:line-through}
.price-btn{width:100%;justify-content:center}
@media(max-width:1100px){.price-grid{grid-template-columns:repeat(2,1fr);gap:16px}}
@media(max-width:600px){.price-grid{grid-template-columns:1fr;max-width:420px;margin:0 auto}}
@media(max-width:400px){.price-grid{max-width:100%}.price-card{padding:22px 18px}}

/* ─── FAQ ───────────────────────────────────────────────── */
.faq-wrap{display:grid;grid-template-columns:340px 1fr;gap:80px;align-items:start}
.faq-list{display:flex;flex-direction:column}
.faq-item{border-bottom:1px solid var(--border)}
.fq-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 0;font-family:'DM Sans',sans-serif;font-size:15px;font-weight:600;color:var(--navy);background:none;border:none;cursor:pointer;text-align:left}
.fq-arrow{flex-shrink:0;color:var(--slate-l);transition:transform .25s}
.faq-item.fqo .fq-arrow{transform:rotate(180deg)}
.fq-a{max-height:0;overflow:hidden;transition:max-height .3s ease}
.faq-item.fqo .fq-a{max-height:300px}
.fq-a p{padding-bottom:20px;font-size:14px;line-height:1.7;color:var(--slate)}
@media(max-width:900px){.faq-wrap{grid-template-columns:1fr;gap:40px}}

/* ─── CTA KOŃCOWE ───────────────────────────────────────── */
.cta-inner{max-width:640px;margin:0 auto}
.cta-btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}


/* ─── PRICE ADDON ───────────────────────────────────────── */
.price-addon{display:flex;align-items:center;gap:16px;max-width:860px;margin:32px auto 0;padding:20px 28px;background:#EFF6FF;border:1px solid #BFDBFE;border-radius:14px}
.price-addon-icon{font-size:28px;flex-shrink:0}
.price-addon-text{font-size:15px;color:var(--slate);line-height:1.6}
.price-addon-text strong{color:var(--navy)}
@media(max-width:480px){.price-addon{flex-direction:column;text-align:center;padding:18px 16px}.price-addon-icon{font-size:24px}}


/* ─── FEAT SECURITY CARD ────────────────────────────────── */
.feat-security-list{display:flex;flex-direction:column;gap:7px;list-style:none;padding:0;margin:0}
.feat-security-list li{font-size:13px;line-height:1.5;color:var(--slate)}
.feat-security-list strong{color:var(--navy)}

/* ─── INT CARD — OPTIMA ─────────────────────────────────── */
.int-card--optima{border-top:3px solid var(--blue)}
.int-feature-list{display:flex;flex-direction:column;gap:6px;list-style:none;padding:0;margin:0 0 14px}
.int-feature-list li{font-size:13px;color:var(--navy)}

/* ─── OPTIMA SHOWCASE ───────────────────────────────────── */
.optima-showcase{padding:80px 24px}
.optima-center .sec-h{color:#F8FAFC}
.optima-lead{font-size:16px;line-height:1.75;color:rgba(255,255,255,.6);margin-bottom:40px}
.optima-lead strong{color:#fff}
.optima-icons-row{display:flex;gap:24px;justify-content:center;margin-bottom:40px}
.optima-icon-item{flex:1;max-width:240px;display:flex;flex-direction:column;align-items:center;gap:10px}
.optima-icon-circle{width:52px;height:52px;border-radius:50%;background:rgba(37,99,235,.25);border:1.5px solid rgba(37,99,235,.5);display:flex;align-items:center;justify-content:center;color:#60A5FA;flex-shrink:0}
.optima-icon-label{font-size:14px;font-weight:700;color:#F8FAFC;line-height:1.3}
.optima-icon-desc{font-size:13px;color:rgba(255,255,255,.5);line-height:1.5}
.optima-screen-wide{position:relative;max-width:900px;margin:0 auto}
.optima-screen-badge{position:absolute;top:-12px;left:20px;background:var(--blue);color:#fff;font-size:11px;font-weight:700;padding:4px 14px;border-radius:100px;letter-spacing:.04em;white-space:nowrap;z-index:1}
.optima-img{width:100%;border-radius:14px;box-shadow:0 20px 60px rgba(0,0,0,.5),0 0 0 2px rgba(0,0,0,.9),0 0 0 4px rgba(255,255,255,.25);display:block}
@media(max-width:768px){
  .optima-showcase{padding:56px 20px}
  .optima-icons-row{flex-direction:column;align-items:center}
  .optima-icon-item{max-width:100%}
}

/* ─── KARTY PRZED I PO ──────────────────────────────────── */
.compare-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:40px;align-items:stretch}
.cmp-card{border-radius:16px;padding:28px;position:relative;border:2px solid transparent}
.cmp-card--neutral{background:#F8FAFC;border-color:var(--border)}
.cmp-card--bad{background:#FFF5F5;border-color:#FECACA}
.cmp-card--good{background:#F0FDF4;border-color:#86EFAC;box-shadow:0 8px 32px rgba(22,163,74,.12)}
.cmp-card-badge{position:absolute;top:-14px;left:50%;transform:translateX(-50%);background:#16A34A;color:#fff;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:4px 16px;border-radius:20px;white-space:nowrap}
.cmp-card-head{display:flex;align-items:center;gap:10px;margin-bottom:20px}
.cmp-card-icon{font-size:24px;flex-shrink:0}
.cmp-card-title{font-size:16px;font-weight:700;color:var(--navy);margin:0}
.cmp-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:12px}
.cmp-list li{display:flex;flex-direction:column;gap:3px;padding-bottom:12px;border-bottom:1px solid rgba(0,0,0,.06)}
.cmp-list li:last-child{border-bottom:none;padding-bottom:0}
.cmp-row-label{font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--slate)}
.cmp-row-val{font-size:14px;font-weight:500;color:var(--navy)}
.cmp-ok{color:#15803D;font-weight:600}
.cmp-bad{color:#DC2626;font-weight:600}
.cmp-cta{display:block;text-align:center;margin-top:24px;width:100%;box-sizing:border-box}
@media(max-width:900px){.compare-cards{grid-template-columns:1fr}}
@media(max-width:480px){.cmp-card{padding:20px}}


/* ─── HERO H1 BR — ukryj na mobile (word-wrap wystarczy) ─── */
@media(max-width:640px){
  .hero-h1 br{display:none}
}

/* ─── HERO NOTE CHECK ───────────────────────────────────── */
.hn-check{color:#4ADE80;font-weight:700}
.step-illustration{width:100%;overflow:hidden;border-bottom:1px solid var(--border)}
.step-ill-blue{background:#EFF6FF}
.step-ill-green{background:#F0FDF4}
.step-ill-orange{background:#FFF7ED}
.step-svg-anim{width:100%;height:160px;display:block}


/* ─── PROMO BANNER ──────────────────────────────────────── */
.promo-banner{display:flex;align-items:center;gap:12px;background:linear-gradient(135deg,#FEF9C3,#FEF08A);border:1px solid #FDE047;border-radius:12px;padding:16px 24px;margin-bottom:32px;font-size:15px;color:#713F12}
.promo-banner-icon{font-size:22px;flex-shrink:0}
.promo-banner strong{color:#451A03;margin-right:4px}

/* ─── RAKS COMPARE ──────────────────────────────────────── */
.raks-compare{margin-top:40px;max-width:720px;margin-left:auto;margin-right:auto}
.raks-compare-title{text-align:center;font-size:15px;font-weight:600;color:var(--slate);margin-bottom:16px}
.raks-table{border-radius:14px;overflow:hidden;border:1px solid var(--border);background:#fff}
.raks-head{display:grid;grid-template-columns:1fr 1fr 1fr;background:#1E293B;color:#fff;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.raks-head .raks-cell{padding:14px 16px}
.raks-col-raks{background:rgba(239,68,68,.15)}
.raks-col-ef{background:rgba(122,193,66,.15)}
.raks-row{display:grid;grid-template-columns:1fr 1fr 1fr;border-top:1px solid var(--border)}
.raks-row:hover{background:#F8FAFC}
.raks-cell{padding:12px 16px;font-size:14px;display:flex;align-items:center}
.raks-label{font-weight:500;color:var(--text-dark)}
.raks-bad{color:#EF4444;font-weight:600}
.raks-good{color:#16A34A;font-weight:600}
.raks-head .raks-label{color:#94A3B8}
.raks-head span{display:block;font-weight:400;font-size:11px;text-transform:none;letter-spacing:0;color:#94A3B8;margin-top:2px}
.raks-compare-note{text-align:center;font-size:13px;color:var(--slate);margin-top:14px;line-height:1.5}
@media(max-width:640px){.raks-table .raks-cell{padding:10px 10px;font-size:13px}}


/* ═══════════════════════════════════════════════════════════
   MOBILE OPTIMIZATIONS — 480px i mniej
   ═══════════════════════════════════════════════════════════ */

/* ─── TABELA PRZED I PO — przebudowa na karty ─────────────── */
@media(max-width:640px){
  .compare-table{border:none;background:none;overflow:visible;display:flex;flex-direction:column;gap:12px;margin-top:24px}
  .compare-head{display:none}
  .compare-row{display:flex;flex-direction:column;gap:0;border:1px solid var(--border);border-radius:12px;overflow:hidden;min-width:0}
  .compare-row:nth-child(even){background:#fff}
  .compare-cell{padding:10px 14px;font-size:13px;display:flex;justify-content:space-between;gap:8px;align-items:baseline;border-bottom:1px solid var(--border)}
  .compare-cell:last-child{border-bottom:none}
  .compare-label{font-weight:700;background:#F1F5F9;color:var(--navy);border-right:none;font-size:12px;text-transform:uppercase;letter-spacing:.03em;justify-content:flex-start;padding:8px 14px}
  .compare-good,.compare-warn,.compare-cell:not(.compare-label){font-size:13px}
  /* Dodaj etykiety kolumn przez pseudo-elementy */
  .compare-cell[data-label]::before{content:attr(data-label);font-size:11px;font-weight:600;color:var(--slate);white-space:nowrap;min-width:80px}
}

/* ─── CENNIK — 1 kolumna na małych ekranach ────────────────── */
@media(max-width:700px){
  .price-grid{grid-template-columns:1fr;max-width:400px;margin-left:auto;margin-right:auto}
}

/* ─── STEPS — 1 kolumna ─────────────────────────────────────── */
@media(max-width:700px){
  .steps-grid{grid-template-columns:1fr}
}

/* ─── FEAT GRID — 1 kolumna ─────────────────────────────────── */
@media(max-width:480px){
  .feat-grid{grid-template-columns:1fr !important}
}

/* ─── OPTIMA GRID — stack ────────────────────────────────────── */
@media(max-width:640px){
  .optima-grid{grid-template-columns:1fr;gap:28px}
}

/* ─── SCREENS GALLERY — stack ───────────────────────────────── */
@media(max-width:640px){
  .screens-grid{grid-template-columns:1fr}
  .screen-card--phone{max-width:200px;margin:0 auto}
}

/* ─── RAKS COMPARE — smaller ────────────────────────────────── */
@media(max-width:480px){
  .raks-table .raks-cell{padding:9px 8px;font-size:12px}
  .raks-compare{margin-top:28px}
}

/* ─── PROMO BANNER — stack na mobile ──────────────────────── */
@media(max-width:480px){
  .promo-banner{flex-direction:column;text-align:center;padding:14px 16px}
}

/* ─── PRICE ADDON — stack ────────────────────────────────── */
@media(max-width:600px){
  .price-addon{flex-direction:column;text-align:center;gap:10px;padding:16px 18px}
}

/* ─── FAQ — większy tap area ─────────────────────────────── */
@media(max-width:640px){
  .fq-q{padding:16px 14px;font-size:15px}
  .fq-a p{padding:0 14px 16px;font-size:14px}
}

/* ─── CTA BTNS — pełna szerokość ────────────────────────── */
@media(max-width:480px){
  .cta-btns{flex-direction:column;align-items:center}
  .cta-btns .btn{width:100%;max-width:320px;justify-content:center}
}

/* ─── SEC-SUB margin ──────────────────────────────────────── */
@media(max-width:768px){
  .sec-sub{font-size:15px;margin-bottom:32px}
}

/* ─── MOBILE APP — poprawki ─────────────────────────────── */
@media(max-width:480px){
  .mobile-phones{gap:12px}
  .mob-ph{width:100px}
  .mobile-list li{font-size:14px}
}

/* ─── INT GRID — mniejszy padding na mobile ─────────────── */
@media(max-width:480px){
  .int-card{padding:20px}
  .int-logo-name{font-size:15px}
}

/* ─── OPTIMA — mniejszy padding ────────────────────────────── */
@media(max-width:480px){
  .optima-showcase{padding:44px 16px}
  .optima-list li{font-size:13px}
}

/* ─── HERO NOTE — czytelność ─────────────────────────────── */
@media(max-width:480px){
  .hero-note{font-size:11px;line-height:1.7}
  .hero-badge{font-size:11px;padding:5px 11px}
}

/* ─── SEC-H na mobile ────────────────────────────────────── */
@media(max-width:480px){
  .sec-h{font-size:clamp(20px,5.5vw,28px);margin-bottom:10px}
}

/* ─── PROMO BANNER na małych ekranach ───────────────────── */
@media(max-width:380px){
  .promo-banner{padding:12px 14px;font-size:14px}
}

/* ─── COMPARE TABLE - data-label attribute labels ────────── */
@media(max-width:640px){
  .compare-table{margin-top:20px}
}

/* ─── FOOTER na mobile ───────────────────────────────────── */
@media(max-width:400px){
  .foot-top{gap:20px}
  .foot-desc{max-width:100%}
}


/* ─── BLOG PREVIEW (sekcja na stronie głównej) ──────────── */
.blog-preview-section {
  background: var(--bg);
  padding: 80px 24px;
  border-top: 1px solid var(--border);
}
.blog-preview-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 1100px;
  margin: 0 auto;
}
@media(max-width:900px){ .blog-preview-grid{ grid-template-columns: 1fr; } }

.blog-preview-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  transition: box-shadow .2s, transform .2s;
}
.blog-preview-card:hover {
  box-shadow: 0 10px 30px rgba(0,0,0,.09);
  transform: translateY(-3px);
}
.blog-preview-thumb {
  width: 100%;
  aspect-ratio: 16/7;
  overflow: hidden;
  background: var(--blue-l);
}
.blog-preview-thumb svg { width:100%; height:100%; display:block; }
.blog-preview-body { padding: 18px 18px 20px; }
.blog-preview-date { font-size:11px; color: var(--slate); margin-bottom:8px; }
.blog-preview-title {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.4;
  margin-bottom: 12px;
}
.blog-preview-tags { display:flex; gap:6px; flex-wrap:wrap; }

/* ─── ZAUFALI NAM ────────────────────────────────────────── */
.clients-section {
  background: #fff;
  padding: 48px 24px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.clients-label {
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--slate-l);
  margin-bottom: 28px;
}
.clients-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 32px 48px;
  max-width: 960px;
  margin: 0 auto;
}
.clients-item {
  display: flex;
  align-items: center;
  justify-content: center;
}
.clients-item img {
  height: 36px;
  width: auto;
  max-width: 140px;
  object-fit: contain;
  filter: grayscale(100%) opacity(.55);
  transition: filter .2s, transform .2s;
  display: block;
}
.clients-item img:hover {
  filter: grayscale(0%) opacity(1);
  transform: scale(1.05);
}
@media(max-width: 640px) {
  .clients-section { padding: 36px 20px; }
  .clients-grid { gap: 24px 32px; }
  .clients-item img { height: 28px; max-width: 110px; }
}

/* ─── ZAUFALI NAM — rozmiar logo ────────────────────────── */
.clients-item img { height: 72px !important; max-width: 180px !important; }
@media(max-width: 640px) { .clients-item img { height: 56px !important; max-width: 140px !important; } }


/* ─── ZAUFALI NAM wewnątrz trust-bar ────────────────────── */
.trust-clients-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
  text-align: center;
  width: 100%;
  margin-bottom: 20px;
}
.trust-clients-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 24px 40px;
  width: 100%;
  margin-bottom: 20px;
}
.trust-clients-item img {
  height: 72px;
  width: auto;
  max-width: 160px;
  object-fit: contain;
  filter: brightness(0) invert(1) opacity(.75);
  transition: opacity .2s, transform .2s;
  display: block;
}
.trust-clients-item img:hover {
  opacity: 1;
  filter: brightness(0) invert(1) opacity(1);
  transform: scale(1.05);
}
.trust-divider {
  width: 100%;
  height: 1px;
  background: rgba(255,255,255,.15);
  margin: 4px 0 20px;
}
@media(max-width: 640px) {
  .trust-clients-grid { gap: 18px 28px; }
  .trust-clients-item img { height: 48px; max-width: 120px; }
}


/* ─── ZAUFALI NAM — fix filtra i odstęp ─────────────────── */
.trust-clients-item img {
  filter: grayscale(30%) opacity(.8) !important;
}
.trust-clients-item img:hover {
  filter: grayscale(0%) opacity(1) !important;
}
.trust-label { margin-top: 8px; }
.trust-logos { margin-top: 10px; }


/* ─── ZAUFALI NAM — obwódka i odstęp banków ─────────────── */
.trust-clients-item img {
  border: 1.5px solid rgba(255,255,255,.25) !important;
  border-radius: 8px !important;
  padding: 6px 10px !important;
}
.trust-label { display: block; width: 100%; text-align: center; margin-top: 8px; }
.trust-logos { margin-top: 10px; }


/* ─── TRUST-BAR odstęp label/logos ──────────────────────── */
.trust-bar .trust-label { margin-top: 16px !important; margin-bottom: 12px !important; }
.trust-bar .trust-logos { margin-top: 0 !important; }


/* ─── TRUST-BAR label/logos równy odstęp ────────────────── */
.trust-bar .trust-label { margin-top: 16px !important; margin-bottom: 20px !important; }