/* WOW: paleta systemu (granat #032D60, niebieski #0176D3, zieleń #2E844A). Ładowany po orlen.css. */
.vd h2,.vd h3{color:#032d60}.vd .hs h1,.vd .hs h3,.vd .tile h3,.vd .band h2,.vd .band h3,.vd footer h4,.vd .nc .im{color:#fff}.vd .light{background:#f3f3f3}
.vd .btn.p{background:#0176d3}.vd .btn.p:hover{background:#014486}.vd .ut nav a.on{background:#0176d3}.vd .hd .logo i{background:linear-gradient(135deg,#0176d3,#2e844a)}
#pbar{position:fixed;left:0;top:0;height:3px;width:0;background:linear-gradient(90deg,#0176d3,#2e844a,#1b96ff);z-index:400;transition:width .1s}
.vd .hd{transition:background .3s,box-shadow .3s}.vd .hd.sc{background:rgba(255,255,255,.82);backdrop-filter:blur(14px) saturate(1.4);box-shadow:0 6px 24px rgba(3,45,96,.12)}
/* tło hero: ruchomy fragment filmu + gradient + blobs + siatka */
.hs{background:linear-gradient(120deg,#032d60 0%,#014486 45%,#0176d3 100%);isolation:isolate}
.hs .bg{position:absolute;inset:0;z-index:0;overflow:hidden}
.hs .bg:after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(3,45,96,.93) 0%,rgba(3,45,96,.78) 42%,rgba(1,118,211,.38) 100%)}
.bgv{position:absolute;inset:0;opacity:.9;filter:saturate(1.15) contrast(1.05)}
.bgv .vw{position:absolute;left:0;top:50%;width:100%;aspect-ratio:16/9;transform:translateY(-50%) scale(1.04);overflow:hidden;animation:kb 28s ease-in-out infinite alternate}
.bgv video{position:absolute;width:100%;left:0;top:0;height:auto;max-width:none;border-radius:0;box-shadow:none;max-height:none;pointer-events:none}
@keyframes kb{to{transform:translateY(-50%) scale(1.14) translateX(-2%)}}
.blob{position:absolute;border-radius:50%;filter:blur(70px);opacity:.55;z-index:1;animation:bl 16s ease-in-out infinite alternate}
.blob.b1{width:520px;height:520px;background:#1b96ff;left:-120px;top:-160px}
.blob.b2{width:440px;height:440px;background:#2e844a;right:8%;bottom:-200px;animation-duration:21s;opacity:.4}
.blob.b3{width:320px;height:320px;background:#5a2db2;right:-60px;top:-80px;animation-duration:25s;opacity:.35}
@keyframes bl{to{transform:translate(90px,60px) scale(1.18)}}
.hs .grid{position:absolute;inset:0;z-index:2;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:56px 56px;-webkit-mask-image:radial-gradient(ellipse at 70% 40%,#000 10%,transparent 70%);mask-image:radial-gradient(ellipse at 70% 40%,#000 10%,transparent 70%)}
.hs .slide{z-index:3;position:relative}.hs .ctl{z-index:6}
.hs .eyebrow{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.3);backdrop-filter:blur(6px);border-radius:99px;padding:5px 14px}
.hs .gt{background:linear-gradient(90deg,#9fd0ff,#7ee0a5,#fff,#9fd0ff);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:gs 6s linear infinite}
@keyframes gs{to{background-position:200% 0}}
.hs h1{text-shadow:0 2px 30px rgba(3,45,96,.45)}
.rot{margin:2px 0 14px;font-weight:700;color:#cfe6ff}.rot b{color:#fff;border-bottom:3px solid #2e844a;padding-bottom:1px;transition:opacity .35s}.rot b.out{opacity:0}
.hs .slide.on .wrap>div:first-child>*{animation:up .7s both}
.hs .slide.on .wrap>div:first-child>*:nth-child(2){animation-delay:.08s}.hs .slide.on .wrap>div:first-child>*:nth-child(3){animation-delay:.16s}.hs .slide.on .wrap>div:first-child>*:nth-child(4){animation-delay:.24s}.hs .slide.on .wrap>div:first-child>*:nth-child(5){animation-delay:.32s}
@keyframes up{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
.hs .btn.p{background:#fff;color:#0176d3;font-weight:800;box-shadow:0 10px 30px rgba(0,0,0,.25)}.hs .btn.p:hover{background:#eaf4ff}
.hs .btn.s{border-color:rgba(255,255,255,.7)}.hs .btn.s:hover{background:rgba(255,255,255,.12)}
.hs .btn.p.pulse{animation:pls 2.4s infinite}
@keyframes pls{0%{box-shadow:0 0 0 0 rgba(255,255,255,.55)}70%,100%{box-shadow:0 0 0 18px rgba(255,255,255,0)}}
/* media: tilt + pływające szklane karty */
.mw{position:relative;perspective:1200px;display:grid;place-items:center}
.mw>.frame,.mw>.phone{transform:rotateY(calc(var(--mx,0)*-7deg)) rotateX(calc(var(--my,0)*6deg));transition:transform .25s ease-out;will-change:transform}
.frame{border:1px solid rgba(255,255,255,.35);box-shadow:0 40px 90px rgba(0,20,60,.6),0 0 0 6px rgba(255,255,255,.08)}
.phone{border-color:#0b1d3a;box-shadow:0 40px 90px rgba(0,20,60,.65),0 0 0 6px rgba(255,255,255,.1)}
.fc{position:absolute;z-index:5;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.4);backdrop-filter:blur(12px) saturate(1.5);-webkit-backdrop-filter:blur(12px);color:#fff;padding:9px 14px;border-radius:14px;font-weight:700;font-size:.86rem;box-shadow:0 14px 34px rgba(0,20,60,.35);white-space:nowrap;transform:translate(calc(var(--mx,0)*var(--k,20)*1px),calc(var(--my,0)*var(--k,20)*1px));animation:fy 5s ease-in-out infinite;transition:transform .25s ease-out}
.fc.f1{left:-4%;top:14%;--k:34}.fc.f2{right:-2%;top:46%;--k:-26;animation-delay:-1.6s}.fc.f3{left:6%;bottom:10%;--k:26;animation-delay:-3s}
@keyframes fy{50%{margin-top:-12px}}
/* kafelki 3D + poświata za kursorem */
.tile{transform-style:preserve-3d;transition:transform .25s ease-out,box-shadow .25s;box-shadow:0 6px 18px rgba(3,45,96,.18)}.tile:hover{box-shadow:0 24px 50px rgba(3,45,96,.32)}
.tile .glow{position:absolute;inset:0;z-index:1;background:radial-gradient(260px circle at var(--gx,50%) var(--gy,50%),rgba(255,255,255,.28),transparent 60%);opacity:0;transition:opacity .25s}.tile:hover .glow{opacity:1}
.nc{transition:transform .25s,box-shadow .25s}.nc:hover{transform:translateY(-6px)}
.nc .im{background:linear-gradient(135deg,#0176d3,#032d60 70%,#2e844a);position:relative;overflow:hidden}
.nc .im:after{content:"";position:absolute;inset:-40%;background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.25) 50%,transparent 60%);animation:sh 4.5s infinite}
@keyframes sh{to{transform:translateX(70%)}}
.qt ul{border-radius:14px;overflow:hidden;box-shadow:0 20px 50px rgba(3,45,96,.22)}.qt li a:after{color:#0176d3}
.qt .ico{display:inline-grid;place-items:center;width:46px;height:46px;border-radius:12px;background:#eaf4ff;font-size:1.4rem}
.vd .sh{border-bottom:2px solid #032d60}.vd .sh a{color:#0176d3}
/* wstęga modułów */
.mq{overflow:hidden;background:#032d60;color:#cfe6ff;padding:16px 0;border-block:1px solid #0176d3;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.mq .mt{display:flex;gap:44px;width:max-content;animation:mqs 55s linear infinite}.mq span{white-space:nowrap;font-weight:700;font-size:1.05rem}.mq:hover .mt{animation-play-state:paused}
@keyframes mqs{to{transform:translateX(-50%)}}
/* pas z ceną + liczby */
.band{background:linear-gradient(120deg,#032d60,#0176d3 60%,#2e844a);position:relative;overflow:hidden}
.band:before{content:"";position:absolute;inset:0;background:radial-gradient(500px 200px at 20% 0,rgba(255,255,255,.18),transparent)}.band .wrap{position:relative}.band .btn.p{color:#0176d3}
.nums b{background:linear-gradient(135deg,#0176d3,#2e844a);-webkit-background-clip:text;background-clip:text;color:transparent}
.vd .reveal{transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0s)}
.vbox{background:linear-gradient(135deg,#032d60,#014486);box-shadow:0 30px 60px rgba(3,45,96,.3)}
.vd footer{background:#032d60}.snd{background:#0176d3!important}
@media(max-width:980px){.bgv{display:none}.fc{display:none}.mw>.frame,.mw>.phone{transform:none}.hs .grid{-webkit-mask-image:none;mask-image:none}}
@media(prefers-reduced-motion:reduce){.blob,.bgv .vw,.fc,.mq .mt,.hs .gt,.nc .im:after,.hs .btn.p.pulse{animation:none!important}.hs .slide.on .wrap>div:first-child>*{animation:none}}
/* korekty czytelności i kontrolek */
.bgv{opacity:.55;filter:saturate(1.2) brightness(.8)}
.hs .bg:after{background:linear-gradient(100deg,rgba(3,45,96,.94) 0%,rgba(3,45,96,.82) 40%,rgba(1,68,134,.45) 100%)}
.hs .wrap{padding-bottom:140px;min-height:620px}.hs .ctl{bottom:92px}
@media(max-width:980px){.hs .wrap{min-height:0;padding-bottom:150px}}
.bgv .vw{filter:blur(7px)}
/* ===== Plany i cennik ===== */
.nb{background:#2e844a;color:#fff;font-size:.68rem;font-weight:800;padding:2px 7px;border-radius:99px;margin-left:2px}
.plans-wrap{display:grid;grid-template-columns:1fr 1.15fr;gap:40px;align-items:center}.pl-head h2{color:#fff;font-size:clamp(1.7rem,3.6vw,2.6rem)}.pl-head p{color:#dbeaff;font-size:1.05rem}
.plans{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.plan{background:#fff;color:#3e3e3c;border-radius:14px;padding:26px;box-shadow:0 20px 50px rgba(0,20,60,.3);display:flex;flex-direction:column;gap:12px;position:relative}
.plan .pt{font-size:.74rem;font-weight:800;letter-spacing:.12em;color:#0176d3}.plan .pp{font-size:clamp(2.2rem,4.5vw,3rem);font-weight:800;color:#032d60;line-height:1}.plan .pp small{font-size:.9rem;font-weight:600;color:#706e6b}
.plan ul{list-style:none;margin:0;padding:0;display:grid;gap:8px;flex:1}.plan li{padding-left:26px;position:relative;font-size:.94rem}.plan li:before{content:"✓";position:absolute;left:0;color:#2e844a;font-weight:800}
.plan.free{border-top:5px solid #2e844a}.plan.free .btn.p{background:#2e844a;color:#fff}.plan.free .btn.p:hover{background:#256b3b}
.plan.pro{border-top:5px solid #0176d3}.plan.pro .btn.s{border-color:#0176d3;color:#0176d3}.plan.pro .btn.s:hover{background:#eaf4ff}
.band .plan .btn.p{color:#fff}
@media(max-width:980px){.plans-wrap,.plans{grid-template-columns:1fr}}
/* ===== wyraźniejsze tło wideo i większy ekran GPS ===== */
.bgv{opacity:.85;filter:saturate(1.2) brightness(.95)}
.bgv .vw{filter:blur(5px)}
.hs .bg:after{background:linear-gradient(100deg,rgba(3,45,96,.92) 0%,rgba(3,45,96,.7) 40%,rgba(1,68,134,.18) 100%)}
.hs .wrap{grid-template-columns:.8fr 1.2fr}
.mw>.frame{width:100%;max-width:none}
@media(min-width:1200px){.mw>.frame{width:114%;justify-self:start}}
@media(max-width:980px){.hs .wrap{grid-template-columns:1fr}.mw>.frame{width:100%}}
/* nagłówek: bez zawijania, szerszy kontener */
.vd .hd .wrap,.vd .ut .wrap{max-width:1280px}
.mn>li>a,.mn>li>button,.nb,.hd .btn{white-space:nowrap}
.hd .btn.p{padding:12px 20px}
@media(max-width:1240px){.mn>li>a,.mn>li>button{padding:0 10px;font-size:.92rem}.nb{display:none}.hd .wrap{gap:14px}}
.plans-wrap{grid-template-columns:1fr;gap:30px;text-align:center}.pl-head{max-width:780px;margin:0 auto}.plans{max-width:920px;width:100%;margin:0 auto;text-align:left}
.band .wrap.plans-wrap{grid-template-columns:1fr;gap:30px;text-align:center}@media(max-width:980px){.band .wrap.plans-wrap{grid-template-columns:1fr}}