/* Bezpieczny Tag - sekcja "Jak to dziala" plus film instruktazowy. Plik generowany przez Novamira. */

.bt-jak{position:relative;overflow:hidden;background:linear-gradient(180deg,#EFF6FE 0%,#F5FAFF 60%,#EFF6FE 100%);padding:clamp(56px,6vw,92px) 0 clamp(48px,5vw,80px)}

.bt-jak__deco{position:absolute;inset:0;pointer-events:none;z-index:1}
.bt-jak__deco svg{position:absolute;width:clamp(34px,3.4vw,58px);color:#FF3D9A;display:block}
.bt-jak__deco .s-l{left:1.6vw;top:clamp(96px,11vw,168px)}
.bt-jak__deco .s-r{right:1.6vw;top:clamp(96px,11vw,168px);transform:scaleX(-1)}

.bt-jak__in{position:relative;z-index:2;max-width:1240px;margin:0 auto;padding:0 clamp(18px,4vw,40px)}

.bt-jak__head{text-align:center;margin:0 0 clamp(30px,3.4vw,46px)}
.bt-jak__title{font-weight:900;font-size:clamp(30px,3.9vw,54px);line-height:1.08;letter-spacing:-.03em;color:var(--bt-hero-navy,#12225A);margin:0 0 14px}
.bt-jak__title span{position:relative;display:inline-block;z-index:1}
.bt-jak__title span::after{content:"";position:absolute;left:-.06em;right:-.06em;bottom:.02em;height:.22em;background:#C2DBF8;border-radius:999px;z-index:-1}
.bt-jak__lead{font-size:clamp(15.5px,1.2vw,18px);line-height:1.55;color:rgba(18,34,90,.72);margin:0;text-wrap:pretty}

.bt-jak__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,1.7vw,26px)}

.bt-step{background:#fff;border-radius:26px;padding:clamp(18px,1.5vw,24px);box-shadow:0 14px 34px rgba(20,38,94,.09);display:flex;flex-direction:column;transition:transform .3s cubic-bezier(.16,.84,.44,1),box-shadow .3s ease}
.bt-step:hover{transform:translateY(-5px);box-shadow:0 22px 46px rgba(20,38,94,.14)}

.bt-step__top{display:flex;align-items:flex-start;gap:14px;margin:0 0 16px;padding:4px 2px 0}
.bt-step__no{width:clamp(38px,3vw,46px);height:clamp(38px,3vw,46px);border-radius:999px;background:linear-gradient(135deg,#3BA5FA 0%,#0E82EE 100%);color:#fff;font-weight:900;font-size:clamp(17px,1.35vw,21px);display:grid;place-items:center;flex-shrink:0;box-shadow:0 6px 16px rgba(20,121,222,.32);line-height:1}
.bt-step__txt{min-width:0}
.bt-step__ttl{font-weight:900;font-size:clamp(18px,1.5vw,23px);letter-spacing:-.02em;color:var(--bt-hero-navy,#12225A);margin:0 0 6px;line-height:1.2}
.bt-step__desc{font-size:clamp(14px,1.05vw,15.5px);line-height:1.5;color:rgba(18,34,90,.72);margin:0;text-wrap:pretty}

.bt-step__img{margin:auto 0 0;border-radius:18px;overflow:hidden;background:#EAF2FC;aspect-ratio:1/1}
.bt-step__img img{width:100%;height:100%;object-fit:cover;display:block}

/* film instruktazowy */
.bt-jak__film{margin:clamp(28px,3vw,44px) auto 0;max-width:none}
.bt-jak__filmhead{text-align:center;margin:0 0 18px}
.bt-jak__filmhead h3{font-weight:900;font-size:clamp(20px,1.9vw,28px);letter-spacing:-.02em;color:var(--bt-hero-navy,#12225A);margin:0 0 6px}
.bt-jak__filmhead p{font-size:14.5px;font-weight:600;color:rgba(18,34,90,.62);margin:0}
.bt-jak__filmbox{background:#fff;border-radius:26px;padding:clamp(10px,1vw,16px);box-shadow:0 14px 34px rgba(20,38,94,.09)}
.bt-jak__filmbox video{display:block;width:100%;height:auto;aspect-ratio:16/9;border-radius:18px;background:#0B1B3F;object-fit:cover}

@media (max-width:900px){
  .bt-jak__grid{grid-template-columns:1fr;gap:16px}
  .bt-step{padding:16px}
  .bt-step__img{aspect-ratio:4/3}
  .bt-jak__deco svg{width:30px}
  .bt-jak__deco .s-l,.bt-jak__deco .s-r{top:clamp(80px,18vw,120px)}
}

@media (prefers-reduced-motion:reduce){
  .bt-step{transition:none}
}

/* --- korekta podkreslenia pod naglowkiem --- */
.bt-jak__title span::after{bottom:-.05em;height:.19em}

/* --- proporcja kadru zdjec krokow dopasowana do obecnych plikow 3:2 --- */
.bt-step__img{aspect-ratio:4/3}
@media (max-width:900px){.bt-step__img{aspect-ratio:16/10}}

/* --- wszystkie trzy zdjecia krokow sa juz kwadratowe, wiec kadr bez przycinania --- */
.bt-step__img{aspect-ratio:1/1}
@media (max-width:900px){.bt-step__img{aspect-ratio:1/1}}

/* --- rozowe akcenty przypiete do rogow siatki kart, jak na makiecie --- */
.bt-jak__deco{display:none}
.bt-jak__grid{position:relative}
.bt-jak__spark{position:absolute;z-index:3;width:clamp(26px,2.3vw,42px);height:auto;color:#FF3D9A;pointer-events:none;top:-2.6%}
.bt-jak__spark--l{left:-3%}
.bt-jak__spark--r{right:-3%;transform:scaleX(-1)}
@media (max-width:900px){
  .bt-jak__spark{width:26px;top:-30px}
  .bt-jak__spark--l{left:-6px}
  .bt-jak__spark--r{right:-6px}
}
@media (max-width:560px){
  .bt-jak__spark{display:none}
}

.bt-jak__spark{top:clamp(-36px,-2.6vw,-22px)}

/* --- rozmiar akcentow jak na makiecie --- */
.bt-jak__spark{width:clamp(28px,2.9vw,50px);overflow:visible}

/* --- akcenty odwzorowane z makiety: proporcje i pozycja wzgledem rogow siatki kart --- */
.bt-jak__spark{width:clamp(32px,4.7%,58px);height:auto;top:clamp(-50px,-3vw,-26px)}
.bt-jak__spark--l{left:-3.4%;right:auto}
.bt-jak__spark--r{right:-3.4%;left:auto;transform:scaleX(-1)}
@media (max-width:900px){
  .bt-jak__spark{width:38px;top:-34px}
  .bt-jak__spark--l{left:-10px}
  .bt-jak__spark--r{right:-10px}
}
@media (max-width:560px){
  .bt-jak__spark{display:none}
}