:root{--ink:#122441;--blue:#12439a;--dark:#0b2b69;--pale:#f6f8fc;--line:#dce3ef;--muted:#63718a}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--pale);color:var(--ink);font:16px/1.55 Inter,Arial,sans-serif}.sprite{position:absolute;width:0;height:0}.wrap{width:min(1180px,calc(100% - 48px));margin:auto}.header{position:absolute;inset:0 0 auto;z-index:3;color:#fff}.nav{height:88px;display:flex;align-items:center;justify-content:space-between}.brand{display:flex;align-items:center;gap:10px;color:inherit;text-decoration:none;font-size:25px;letter-spacing:-1px}.brand img{width:40px;height:40px;border-radius:10px}.brand b{font-weight:800}.nav nav{display:flex;align-items:center;gap:27px}.nav nav a{color:#e6edfc;text-decoration:none;font-size:14px;font-weight:700}.nav .nav-button{padding:10px 16px;border-radius:99px;background:#fff;color:var(--blue)}.menu{display:none;background:none;border:0;color:#fff}.menu svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:2}.hero{overflow:hidden;min-height:735px;padding:155px 0 75px;color:#fff;background:linear-gradient(110deg,#08255d,#123f95 60%,#265bb1)}.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;align-items:center}.hero-copy>p:not(.eyebrow){max-width:530px;margin:25px 0 28px;color:#e4eafa;font-size:18px}.eyebrow{display:flex;align-items:center;gap:10px;margin:0 0 18px;color:#c5d8ff;font-size:11px;font-weight:800;letter-spacing:1.5px}.eyebrow i{width:27px;height:2px;background:currentColor}.eyebrow.blue{color:#3561a8}h1,h2{margin:0;letter-spacing:-2.5px;line-height:1.04}h1{font-size:clamp(51px,6vw,77px)}h1 em{color:#acc8ff;font-style:normal}.actions{display:flex;gap:13px;flex-wrap:wrap}.button{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:14px 19px;border:1px solid transparent;border-radius:13px;text-decoration:none;font-size:14px;font-weight:800;transition:.2s}.button:hover{transform:translateY(-2px)}.button svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2}.light{color:#113a87;background:#fff}.outline{color:#fff;border-color:#8ca8db}.hero small{display:flex;align-items:center;gap:9px;margin-top:26px;color:#d3e0fa}.hero small span,.tag-status i{width:8px;height:8px;border-radius:50%;background:#62e0a9;box-shadow:0 0 0 4px #62e0a933}.hero-art{position:relative;height:520px}.disk{position:absolute;inset:3% 1% 0;border-radius:50%;background:#7297dc38}.phone{position:absolute;overflow:hidden;border:7px solid #17223c;border-radius:36px;background:#fff;box-shadow:0 25px 45px #061a4e88}.phone:before{content:"";position:absolute;z-index:1;top:0;left:33%;width:34%;height:16px;border-radius:0 0 10px 10px;background:#17223c}.phone img{width:100%;height:100%;object-fit:cover;object-position:top}.home-shot{top:18px;left:20%;width:225px;height:462px;transform:rotate(-5deg)}.scan-shot{right:3%;bottom:0;width:184px;height:374px;transform:rotate(8deg)}.tag{position:absolute;z-index:2;display:flex;align-items:center;gap:9px;padding:11px 14px;border-radius:13px;color:#17366f;background:#fff;box-shadow:0 12px 26px #061a4e44;font-size:12px;line-height:1.35}.tag svg{width:25px;height:25px;fill:none;stroke:var(--blue);stroke-width:2}.tag-scan{top:74px;right:-8px}.tag-status{bottom:10px;left:5px}.intro{padding:85px 0;background:#fff}.intro-grid{display:grid;grid-template-columns:.72fr 1.02fr 1fr;gap:42px}.intro-grid>p:last-child,.section-title>p{max-width:375px;margin:7px 0 0;color:var(--muted);font-size:17px}h2{font-size:clamp(39px,4.3vw,57px)}.section{padding:108px 0}.section-title{display:flex;align-items:end;justify-content:space-between;gap:55px;margin-bottom:45px}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.card{min-height:295px;padding:27px;border:1px solid var(--line);border-radius:24px;background:#fff;transition:.25s}.card:hover{transform:translateY(-5px);box-shadow:0 18px 44px #12336b1a}.card.featured{color:#fff;border:0;background:linear-gradient(140deg,#164497,#0d2d72)}.icon{display:grid;place-items:center;width:48px;height:48px;margin-bottom:21px;border-radius:15px;color:var(--blue);background:#e8efff}.icon svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8}.featured .icon{color:#fff;background:#ffffff24}.card label,.steps label{color:#3561a9;font-size:10px;font-weight:800;letter-spacing:1.35px}.featured label{color:#c3d7ff}.card h3{margin:8px 0 10px;font-size:22px;line-height:1.2;letter-spacing:-.6px}.card p{margin:0;color:var(--muted);font-size:14.5px}.featured p{color:#d7e3fb}.pills{display:flex;flex-wrap:wrap;gap:7px;margin-top:20px}.pills span{padding:5px 8px;border-radius:7px;background:#ffffff18;font-size:11px}.tutorial{color:#fff;background:#0c2c6c}.tutorial-title>p{color:#bdceef}.tutorial-box{overflow:hidden;border:1px solid #cadbfb36;border-radius:27px;background:#ffffff0c}.tabs{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid #cadbfb36}.tabs button{padding:20px 10px;border:0;border-right:1px solid #cadbfb36;color:#c4d3ef;background:transparent;font:700 14px inherit;cursor:pointer}.tabs button.active{color:#fff;background:#ffffff12}.panel{display:grid;grid-template-columns:1.1fr .9fr;min-height:465px}.steps{padding:45px 50px}.steps label{color:#92b6f9}.steps h3{margin:8px 0 30px;font-size:30px;line-height:1.18;letter-spacing:-1px}.steps ol{display:grid;gap:19px;margin:0;padding:0;list-style:none}.steps li{display:flex;gap:15px}.steps li>b{display:grid;place-items:center;flex:none;width:27px;height:27px;border:1px solid #719de8;border-radius:50%;color:#bdd2fb;font-size:12px}.steps strong{font-size:14px}.steps li p{margin:2px 0;color:#b9cae8;font-size:13px}.panel-image{position:relative;overflow:hidden;background:#164497}.panel-image img{width:100%;height:100%;object-fit:cover;object-position:top}.panel-image.graphic img{object-position:center}.panel-image span{position:absolute;right:20px;bottom:20px;display:flex;align-items:center;gap:7px;padding:8px 11px;border-radius:10px;color:#11397f;background:#fff;font-size:12px;font-weight:800}.panel-image svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2}.security{background:#fff}.security-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:90px;align-items:center}.security-grid>div:last-child>p:not(.eyebrow){max-width:610px;margin:22px 0;color:var(--muted);font-size:17px}.lock-art{position:relative;height:350px}.lock-art>div{position:absolute;top:0;left:5%;width:320px;height:320px;border:34px solid #e9f0ff;border-radius:50%}.lock-art>span{position:absolute;top:105px;left:110px;display:grid;place-items:center;width:135px;height:135px;border-radius:38px;color:#fff;background:linear-gradient(145deg,#2057b0,#0d347d);box-shadow:0 22px 40px #1742963d}.lock-art svg{width:62px;height:62px;fill:none;stroke:currentColor;stroke-width:1.5}.security ul{display:grid;gap:13px;margin:25px 0 0;padding:0;list-style:none}.security li{display:flex;gap:10px;color:#30415e;font-size:14px}.security li svg{width:20px;height:20px;flex:none;color:#248b5e;fill:none;stroke:currentColor;stroke-width:3}.cta{padding:0 0 100px;background:var(--pale)}.cta-inner{display:flex;align-items:center;justify-content:space-between;gap:40px;overflow:hidden;padding:62px 70px;border-radius:28px;color:#fff;background:linear-gradient(120deg,#0b2d71,#1d56ae)}.cta .eyebrow{color:#aac7fa}.cta h2{font-size:44px}.cta p:not(.eyebrow){margin:15px 0 0;color:#cad9f4}footer{padding:31px 0;background:#081d48;color:#9bb0d8}footer .wrap{display:flex;align-items:center;justify-content:space-between}footer .brand{font-size:22px;color:#fff}footer .brand img{width:34px;height:34px}footer p{margin:0;font-size:12px}@media(max-width:850px){.hero-grid{grid-template-columns:1fr}.hero{padding-top:130px}.hero-art{width:min(510px,100%);margin:26px auto -35px}.cards{grid-template-columns:repeat(2,1fr)}.intro-grid{grid-template-columns:1fr 1.2fr}.intro-grid .eyebrow{grid-column:1/-1}.section-title{align-items:start;flex-direction:column;gap:20px}.panel{grid-template-columns:1fr}.panel-image{height:350px}.security-grid{grid-template-columns:.8fr 1.2fr;gap:20px}.lock-art>div{width:270px;height:270px}.lock-art>span{top:82px;left:84px}.cta-inner{padding:50px}}@media(max-width:620px){.wrap{width:calc(100% - 32px)}.header{position:relative;background:#0c2c6c}.nav{height:70px}.menu{display:block}.nav nav{position:absolute;top:70px;left:0;right:0;display:none;flex-direction:column;align-items:stretch;gap:0;padding:10px 16px 18px;background:#0c2c6c}.nav nav.open{display:flex}.nav nav a{padding:10px 0}.nav .nav-button{text-align:center;margin-top:6px}.hero{min-height:0;padding:65px 0 40px}h1{font-size:48px}.hero-copy>p:not(.eyebrow){font-size:16px}.hero-art{height:392px}.home-shot{left:12%;width:174px;height:356px}.scan-shot{right:5%;bottom:8%;width:136px;height:278px}.tag{padding:9px 10px;font-size:10px}.tag-scan{top:58px;right:0}.section,.intro{padding:65px 0}.intro-grid{display:block}.intro-grid h2{margin:17px 0}.cards{grid-template-columns:1fr}.card{min-height:0}.tabs{display:block;padding:8px}.tabs button{width:100%;border:0;border-radius:9px;text-align:left}.steps{padding:31px 24px}.steps h3{font-size:25px}.panel-image{height:295px}.security-grid{grid-template-columns:1fr}.lock-art{height:245px;transform:scale(.8);transform-origin:top left;margin-bottom:-42px}.cta{padding-bottom:65px}.cta-inner{align-items:start;flex-direction:column;padding:39px 28px}.cta h2{font-size:37px}footer .wrap{align-items:start;flex-direction:column;gap:11px}}


/* Korekty ikon, zakładek tutorialu i prezentacji ekranów mobilnych. */
svg { stroke-linecap: round; stroke-linejoin: round; }
.panel[hidden] { display: none !important; }

.panel-image:not(.graphic) {
  display: grid;
  min-height: 465px;
  place-items: center;
  isolation: isolate;
  background:
    radial-gradient(circle at 74% 24%, rgba(154, 190, 255, .45) 0 3%, transparent 3.3%),
    radial-gradient(circle at 23% 76%, rgba(255, 255, 255, .13) 0 9%, transparent 9.3%),
    linear-gradient(145deg, #174b9f, #0b2c6e);
}
.panel-image:not(.graphic) img {
  position: relative;
  z-index: 1;
  width: 208px;
  height: 430px;
  object-fit: cover;
  object-position: top;
  border: 6px solid #14213c;
  border-radius: 30px;
  box-shadow: 0 22px 34px rgba(4, 19, 53, .42);
}
.panel-image:not(.graphic)::after {
  content: "";
  position: absolute;
  z-index: 2;
  top: 18px;
  left: 50%;
  width: 72px;
  height: 15px;
  border-radius: 0 0 10px 10px;
  background: #14213c;
  transform: translateX(-50%);
}
.panel-image span { z-index: 3; }

@media (max-width: 850px) {
  .panel-image:not(.graphic) { min-height: 385px; }
  .panel-image:not(.graphic) img { width: 178px; height: 367px; border-radius: 27px; }
}
@media (max-width: 620px) {
  .panel-image:not(.graphic) { min-height: 350px; height: 350px; }
  .panel-image:not(.graphic) img { width: 160px; height: 332px; border-width: 5px; border-radius: 25px; }
  .panel-image:not(.graphic)::after { top: 14px; width: 57px; height: 12px; }
}

/* Ułożenie treści i finalne korekty desktop/mobile. */
.intro-grid {
  grid-template-columns: 1fr 1fr;
  column-gap: 90px;
  row-gap: 12px;
}
.intro-grid .eyebrow { grid-column: 1 / -1; margin-bottom: 4px; }
.tabs { grid-template-columns: repeat(4, 1fr); }
.lock-art > span {
  top: 93px;
  left: calc(5% + 93px);
}
.hero small b { color: #fff; font-size: 13px; letter-spacing: .2px; }

@media (max-width: 850px) {
  .lock-art > span { top: 68px; left: calc(5% + 68px); }
}

@media (max-width: 620px) {
  .intro-grid { display: block; }
  .intro-grid .eyebrow { margin-bottom: 17px; }
  .tabs { display: block; }
  .lock-art > span { top: 68px; left: calc(5% + 68px); }
}

/* Wyróżnik dostępności aplikacji w hero. */
.launch-badge {
  position: absolute;
  z-index: 2;
  bottom: 17px;
  left: -4px;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px 16px;
  border: 1px solid rgba(255, 255, 255, .8);
  border-radius: 15px;
  color: #103b88;
  background: #fff;
  box-shadow: 0 15px 30px rgba(4, 25, 69, .28);
}
.launch-badge svg {
  width: 29px;
  height: 29px;
  padding: 5px;
  border-radius: 9px;
  color: #fff;
  background: #1a56b4;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}
.launch-badge span { display: grid; gap: 1px; }
.launch-badge small {
  display: block;
  margin: 0;
  color: #5275b5;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1.1px;
  line-height: 1.25;
}
.launch-badge b { font-size: 14px; line-height: 1.25; white-space: nowrap; }
.launch-badge .badge-check{
  width:32px;
  height:32px;
  padding:7px;
  border:1px solid rgba(255,255,255,.5);
  border-radius:50%;
  background:linear-gradient(145deg,#2b6bca,#0c3b8d);
  box-shadow:0 5px 12px rgba(12,59,141,.28),inset 0 1px 1px rgba(255,255,255,.32);
  stroke-width:2.8;
}

@media (max-width: 620px) {
  .launch-badge { bottom: 6px; left: -2px; padding: 10px 12px; }
  .launch-badge svg { width: 26px; height: 26px; }
  .launch-badge .badge-check { width: 28px; height: 28px; padding: 6px; }
  .launch-badge b { font-size: 12px; }
}

.launch-badge {
  transform-origin: center;
  will-change: transform;
  animation: launch-breeze 4.8s cubic-bezier(.45, .05, .55, .95) infinite;
}
.launch-badge::after {
  content: "";
  position: absolute;
  z-index: 0;
  right: 12%;
  bottom: -18px;
  left: 12%;
  height: 13px;
  border-radius: 50%;
  background: rgba(2, 20, 58, .45);
  filter: blur(8px);
  animation: launch-shadow 4.8s cubic-bezier(.45, .05, .55, .95) infinite;
  pointer-events: none;
}
.launch-badge > svg,
.launch-badge > span { position: relative; z-index: 1; }

@keyframes launch-breeze {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-0.7deg); }
  25% { transform: translate3d(7px, -8px, 0) rotate(0.8deg); }
  57% { transform: translate3d(-5px, -3px, 0) rotate(-0.5deg); }
  80% { transform: translate3d(4px, 5px, 0) rotate(0.6deg); }
}

@keyframes launch-shadow {
  0%, 100% { opacity: .62; transform: scaleX(.96); }
  25% { opacity: .34; transform: scaleX(.76); }
  57% { opacity: .48; transform: scaleX(.86); }
  80% { opacity: .7; transform: scaleX(1.04); }
}

@media (prefers-reduced-motion: reduce) {
  .launch-badge { animation-duration: 7s; }
}

/* Kod pobrania w hero z delikatną strzałką prowadzącą od telefonów. */
.hero-art{height:520px}
.home-shot{top:98px}
.hero-qr{position:absolute;z-index:4;top:-36px;left:calc(60% + 10px);padding:8px;border:1px solid rgba(255,255,255,.85);border-radius:13px;background:#fff;box-shadow:0 16px 30px rgba(3,21,63,.42),0 4px 10px rgba(3,21,63,.2);transform:translateX(-50%)}
.hero-qr img{display:block;width:96px;height:96px;border-radius:6px}
.tag-scan{right:-23px}
.qr-arrow{position:absolute;z-index:3;top:-15px;left:calc(60% - 190px);width:150px;height:120px;overflow:visible;fill:none;stroke:#f4f8ff;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 4px 5px rgba(3,21,63,.52)) drop-shadow(0 0 8px rgba(160,199,255,.35));pointer-events:none;transform-box:fill-box;transform-origin:center;animation:qr-arrow-breeze 4.8s cubic-bezier(.45,.05,.55,.95) infinite;will-change:transform}
@keyframes qr-arrow-breeze{
  0%,100%{transform:translate3d(0,0,0) rotate(-.5deg)}
  25%{transform:translate3d(4px,-5px,0) rotate(.5deg)}
  57%{transform:translate3d(-3px,-2px,0) rotate(-.35deg)}
  80%{transform:translate3d(3px,3px,0) rotate(.35deg)}
}
@media(min-width:621px){.hero{min-height:780px}}
@media(max-width:850px){.hero-art{height:550px}.home-shot{top:100px}}
@media(max-width:620px){.hero-art{height:460px}.home-shot{top:98px}.hero-qr{top:-2px;left:60%;padding:6px;border-radius:10px}.hero-qr img{width:72px;height:72px;border-radius:5px}.tag-scan{top:100px;right:0}.qr-arrow{top:-5px;left:calc(60% - 164px);width:120px;height:96px;stroke-width:4}}

/* Pobranie aplikacji — niewielki moduł z kodem QR w istniejącym CTA. */
.download-qr{display:flex;align-items:center;gap:16px;flex:none;padding:12px 16px 12px 12px;border-radius:18px;color:#173b7c;background:#fff;box-shadow:0 14px 28px rgba(4,25,69,.2)}
.download-qr img{display:block;width:118px;height:118px;border-radius:8px;background:#fff}
.download-copy{display:grid;gap:4px;font-size:13px;line-height:1.35}
.download-qr strong{font-size:15px}.download-detail{color:#59719d}
@media(max-width:850px){.cta-inner{align-items:flex-start}.download-qr img{width:108px;height:108px}}
@media(max-width:620px){.download-qr{width:100%;gap:14px}.download-qr img{width:100px;height:100px}}

/* Zielony punkt pozostaje na wierzchu, a gradientowa fala rozchodzi się pod nim. */
.hero small .live-marker{position:relative;display:block;flex:none;background:transparent;box-shadow:none;overflow:visible}
.hero small .live-marker > i{position:absolute;z-index:1;inset:0;display:block;border-radius:inherit;background:#62e0a9}
.hero small .live-marker::after{content:"";position:absolute;z-index:0;inset:0;border-radius:inherit;background:radial-gradient(circle,rgba(98,224,169,.88) 0%,rgba(98,224,169,.68) 25%,rgba(98,224,169,.48) 50%,rgba(98,224,169,.25) 72%,rgba(98,224,169,0) 92%);animation:availability-live 1.7s linear infinite;will-change:opacity,transform}
@keyframes availability-live{
  0%{opacity:1;transform:scale(.65)}
  100%{opacity:0;transform:scale(5.5)}
}