/* Bezpieczny Tag - sekcja produktowa "Jak dziala Bezpieczny Tag?": kroki po lewej, pionowy film po prawej (jedna sekcja). */

.bt-jak--v2{background:transparent;padding:clamp(36px,4.6vw,68px) 0}
.bt-jak--v2 .bt-jak__in{max-width:1240px}

.bt-v2{position:relative;background:linear-gradient(160deg,rgba(255,255,255,.72) 0%,rgba(222,236,252,.5) 100%);border:clamp(6px,.8vw,12px) solid #fff;border-radius:clamp(28px,3.4vw,52px);padding:clamp(20px,3.2vw,48px);box-shadow:0 24px 60px rgba(20,38,94,.08)}

.bt-v2__spark{position:absolute;z-index:3;color:#FF3D9A;width:clamp(24px,2.8vw,44px);height:auto;overflow:visible;pointer-events:none}
.bt-v2__spark--r{right:clamp(14px,3vw,48px);top:clamp(14px,2.6vw,38px);transform:scaleX(-1)}
.bt-v2__spark--l{left:clamp(-16px,-1vw,-6px);bottom:clamp(54px,9%,120px)}

.bt-v2__head{text-align:left;margin:0 0 clamp(20px,2.6vw,34px)}
.bt-v2__pill{display:inline-block;background:#FFE3F0;color:#F0187C;font-weight:800;font-size:clamp(12px,1vw,15px);letter-spacing:.05em;text-transform:uppercase;padding:9px 20px;border-radius:999px;margin:0 0 14px;line-height:1.2}
.bt-v2__title{font-weight:900;font-size:clamp(28px,3.6vw,50px);line-height:1.08;letter-spacing:-.03em;color:var(--bt-hero-navy,#12225A);margin:0 0 12px}
.bt-v2__title span{position:relative;display:inline-block;z-index:1}
.bt-v2__title span::after{content:"";position:absolute;left:0;width:62%;bottom:-.06em;height:.17em;background:#9CCBF8;border-radius:999px;z-index:-1}
.bt-v2__lead{font-size:clamp(15px,1.25vw,19px);line-height:1.5;color:rgba(18,34,90,.72);margin:0}

.bt-v2__grid{display:grid;grid-template-columns:minmax(0,1fr) clamp(260px,29%,340px);gap:clamp(20px,3vw,44px);align-items:stretch}
.bt-v2__grid--solo{grid-template-columns:minmax(0,1fr)}

.bt-v2__card{background:rgba(255,255,255,.7);border-radius:30px;padding:clamp(12px,1.6vw,24px);box-shadow:0 14px 40px rgba(20,38,94,.07);display:flex;flex-direction:column;gap:clamp(10px,1.2vw,16px)}
.bt-v2__steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:clamp(10px,1.2vw,16px);flex:1}
.bt-v2__step{position:relative;display:flex;align-items:center;gap:clamp(12px,1.6vw,22px);background:#fff;border-radius:22px;padding:clamp(14px,1.6vw,22px);flex:1;margin:0}
.bt-v2__step+.bt-v2__step::before{content:"";position:absolute;left:calc(clamp(14px,1.6vw,22px) + clamp(19px,2.3vw,28px) - 3px);top:calc(-1 * clamp(10px,1.2vw,16px));height:clamp(10px,1.2vw,16px);width:6px;background:#BBD9FA;border-radius:3px}
.bt-v2__no{flex:0 0 auto;width:clamp(38px,4.6vw,56px);height:clamp(38px,4.6vw,56px);border-radius:999px;background:linear-gradient(135deg,#3BA5FA 0%,#0E82EE 100%);color:#fff;font-weight:900;font-size:clamp(17px,2vw,28px);display:grid;place-items:center;line-height:1;box-shadow:0 6px 16px rgba(20,121,222,.3)}
.bt-v2__step--green .bt-v2__no{background:linear-gradient(135deg,#34D26B 0%,#16A34A 100%);box-shadow:0 6px 16px rgba(22,163,74,.3)}
.bt-v2__txt{flex:1;min-width:0}
.bt-v2__ttl{font-weight:900;font-size:clamp(18px,1.9vw,26px);letter-spacing:-.02em;color:var(--bt-hero-navy,#12225A);margin:0 0 6px;line-height:1.15}
.bt-v2__desc{font-size:clamp(14px,1.2vw,17.5px);line-height:1.5;color:rgba(18,34,90,.7);margin:0;text-wrap:pretty}
.bt-v2__ico{flex:0 0 auto;width:clamp(54px,6vw,84px);height:clamp(54px,6vw,84px);border-radius:999px;background:#EAF3FE;display:grid;place-items:center}
.bt-v2__ico svg{width:58%;height:58%;display:block}
.bt-v2__step--green .bt-v2__ico{background:#E3F7EA}
.bt-v2__step--green .bt-v2__ico svg{width:82%;height:82%}

.bt-v2__chips{list-style:none;margin:0;padding:clamp(10px,1.1vw,14px) clamp(14px,1.6vw,24px);background:#EAF3FE;border-radius:999px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 18px}
.bt-v2__chips li{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:clamp(13px,1.15vw,17px);color:var(--bt-hero-navy,#12225A);margin:0}
.bt-v2__chips li::before{content:"";width:16px;height:16px;border-radius:50%;background:#1479DE;flex:0 0 auto}

.bt-v2__media{position:relative;display:flex;background:#fff;border-radius:30px;padding:clamp(10px,1vw,14px);box-shadow:0 14px 40px rgba(20,38,94,.09)}
.bt-v2__tag{position:absolute;z-index:4;top:clamp(-20px,-1.6vw,-12px);right:clamp(-26px,-1.8vw,-8px);display:inline-flex;align-items:center;gap:10px;background:linear-gradient(135deg,#FF2D8A 0%,#F0187C 100%);color:#fff;font-weight:800;text-transform:uppercase;letter-spacing:.03em;font-size:clamp(11px,1.05vw,15px);padding:clamp(10px,1vw,15px) clamp(16px,1.6vw,26px);border-radius:999px;box-shadow:0 10px 22px rgba(240,24,124,.32);line-height:1.1;white-space:nowrap}
.bt-v2__tag svg{width:1.15em;height:1.15em;fill:#fff;display:block}
.bt-v2__vbox{position:relative;flex:1;min-width:0;aspect-ratio:9/16;border-radius:22px;overflow:hidden;background:#0B1B3F}
.bt-v2__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;background:#0B1B3F}
.bt-v2__play{position:absolute;inset:0;z-index:2;border:0;padding:0;margin:0;cursor:pointer;display:grid;place-items:center;background:linear-gradient(180deg,rgba(11,27,63,0) 52%,rgba(11,27,63,.38) 100%)}
.bt-v2__playc{width:clamp(62px,6.4vw,92px);height:clamp(62px,6.4vw,92px);border-radius:50%;background:#fff;display:grid;place-items:center;box-shadow:0 0 0 clamp(5px,.5vw,8px) rgba(255,255,255,.35),0 14px 30px rgba(11,27,63,.3);transition:transform .25s ease}
.bt-v2__play:hover .bt-v2__playc,.bt-v2__play:focus-visible .bt-v2__playc{transform:scale(1.07)}
.bt-v2__playc svg{width:46%;height:46%;margin-left:7%;fill:#1479DE;display:block}
.bt-v2__cap{position:absolute;z-index:3;left:50%;bottom:clamp(10px,1.2vw,16px);transform:translateX(-50%);background:#0F2A66;color:#fff;font-weight:800;font-size:clamp(14px,1.3vw,19px);padding:clamp(9px,.9vw,13px) clamp(20px,2vw,30px);border-radius:999px;white-space:nowrap;pointer-events:none}
.bt-v2__media.is-playing .bt-v2__play,.bt-v2__media.is-playing .bt-v2__cap{display:none}

@media (max-width:900px){
  .bt-v2__grid{grid-template-columns:minmax(0,1fr)}
  .bt-v2__media{width:100%;max-width:340px;margin:10px auto 0}
  .bt-v2__spark--l{display:none}
}
@media (max-width:560px){
  .bt-v2{padding:20px 14px}
  .bt-v2__ico{width:46px;height:46px}
  .bt-v2__chips{justify-content:flex-start;border-radius:22px}
  .bt-v2__spark{display:none}
  .bt-v2__tag{right:-4px}
}
@media (prefers-reduced-motion:reduce){
  .bt-v2__playc{transition:none}
}

/* --- MOBILE 25.10.2026: zwarty uklad na telefonie (strona glowna i karta produktu), mniej zagniezdzonych marginesow --- */
@media (max-width:560px){
  .bt-jak--v2{padding:22px 0 26px}
  .bt-jak--v2 .bt-jak__in{padding:0 12px}
  .bt-v2{padding:18px 10px 12px;border-width:6px;border-radius:26px}
  .bt-v2__head{margin:0 0 14px;padding:0 6px}
  .bt-v2__pill{font-size:11.5px;padding:7px 14px;margin:0 0 10px}
  .bt-v2__title{font-size:clamp(25px,7.6vw,30px)}
  .bt-v2__lead{font-size:15px}
  .bt-v2__card{padding:8px;border-radius:22px;gap:8px}
  .bt-v2__steps{gap:8px}
  .bt-v2__step{gap:10px;padding:12px;border-radius:18px;align-items:center}
  .bt-v2__step+.bt-v2__step::before{left:calc(12px + 17px - 3px);top:-8px;height:8px}
  .bt-v2__no{width:34px;height:34px;font-size:16px}
  .bt-v2__ttl{font-size:16.5px;margin:0 0 3px}
  .bt-v2__desc{font-size:13.5px;line-height:1.42}
  .bt-v2__ico{width:42px;height:42px}
  .bt-v2__chips{flex-direction:column;align-items:flex-start;gap:8px;padding:12px 16px;border-radius:18px}
  .bt-v2__chips li{font-size:14px}
  .bt-v2__media{max-width:300px;margin:22px auto 4px;padding:8px;border-radius:24px}
  .bt-v2__vbox{border-radius:18px}
  .bt-v2__tag{top:-16px;right:50%;transform:translateX(50%);font-size:11.5px;padding:10px 16px}
}