/* ScolaFlow: tokeny, pisma, przyciski, pasek, ramki urządzeń i stopka. Wspólne dla strony głównej i podstron. Jedyne źródło kolorów: :root niżej. */
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-display:swap;font-weight:400 800;src:url("/a/fonty-plus-jakarta-sans-latin-ext-wght-normal.38e3b8fd80.woff2") format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-display:swap;font-weight:400 800;src:url("/a/fonty-plus-jakarta-sans-latin-wght-normal.153fc85b70.woff2") format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* 04.11 (makieta Adama): fiolet jako kolor główny, granatowa noc pod pasek, pierwszy ekran, pas danych i stopkę,
   jasne chłodne tła z odrobiną fioletu. Znak: fioletowe koło z białym zegarem (uklad.mjs).
   Czerwień tylko w etykietach problemów na głównej i w alarmach. Papier tylko pod karty. */
:root{
  --noc:#0E0B26;--noc-2:#16123A;
  --tab:#15122E;--tab2:#2B2650;--tab3:#6A3DF0;
  --fio:#6A3DF0;--fio-h:#5A2BE0;--fio-j:#F0EBFF;--fio-t:#5229D6;
  --law:#F4F1FF;
  --kreda:#F8F8FC;--kreda-2:#F2F1F9;--pap:#fff;
  --lin:#E8E6F2;--lin2:#D3CFE6;
  --t2:#4A4766;--t3:#5E5B7A;
  --zak:#B9A6FF;--zak-h:#D2C6FF;--zak2:#EFEAFF;
  --cz:#C21F35;--cz-j:#FDECEE;
  --na-noc:#FFFFFF;--na-noc-2:#CFCBE6;--na-noc-3:#A9A4C8;
  --lin-c:rgba(255,255,255,.12);
  --suw:#8E89AA;
  --blad:#B3261E;--ok:#1F6B45;
  --cien-m:0 1px 2px rgba(21,18,46,.05),0 10px 28px -14px rgba(21,18,46,.16);
  --cien:0 1px 2px rgba(21,18,46,.08),0 28px 64px -28px rgba(21,18,46,.36);
  --r-s:8px;--r-m:10px;--r-l:18px;--r-xl:26px;
  --wyd:cubic-bezier(.2,.8,.2,1);
  --g:clamp(48px,6.4vw,104px);
  --bok:40px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:88px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--kreda);color:var(--tab);font:400 17px/1.55 'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',sans-serif;overflow-x:hidden;overflow-x:clip;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,p,ul,ol,dl,dd,figure{margin:0}
ul,ol{padding:0;list-style:none}
img,svg{display:block;max-width:100%}
img{height:auto}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
a{color:inherit}
p{text-wrap:pretty}
h1,h2,h3{text-wrap:balance;font-weight:800;letter-spacing:-.03em;line-height:1.08}
[hidden]{display:none!important}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.nw{white-space:nowrap}
.ik{width:24px;height:24px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
:focus-visible{outline:3px solid var(--fio);outline-offset:2px;border-radius:6px}
.nag :focus-visible,.h :focus-visible,.bz :focus-visible,.pod:not(.dok) :focus-visible,.sto :focus-visible,.ciemna :focus-visible,.cen-b :focus-visible,.film :focus-visible{outline-color:var(--zak)}
.skok{position:absolute;left:12px;top:-60px;z-index:100;background:var(--fio);color:#fff;padding:10px 16px;border-radius:var(--r-s)}
.skok:focus{top:12px}

/* przyciski: fiolet z białą strzałką; .dr obrys; .jas wariant na ciemnym tle */
.prz{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 22px;border-radius:var(--r-m);border:2px solid var(--fio);background:var(--fio);color:#fff;font-weight:700;font-size:16px;letter-spacing:-.005em;line-height:1.15;text-decoration:none;text-align:center;box-shadow:0 10px 24px -12px rgba(106,61,240,.7);transition:background .2s,color .2s,border-color .2s,transform .2s var(--wyd),box-shadow .2s}
.prz:hover{background:var(--fio-h);border-color:var(--fio-h)}
.prz:active{transform:scale(.98)}
.prz i{position:relative;flex:none;width:16px;height:16px;transition:transform .25s var(--wyd)}
.prz i::before{content:'';position:absolute;left:1px;right:2px;top:7px;height:2px;border-radius:2px;background:currentColor}
.prz i::after{content:'';position:absolute;right:2px;top:3.5px;width:7px;height:7px;border-top:2px solid currentColor;border-right:2px solid currentColor;transform:rotate(45deg);border-radius:1px}
.prz:hover i{transform:translateX(3px)}
.prz .ik{width:18px;height:18px}
.ik.gr{fill:currentColor;stroke:none}
.prz .gr{width:16px;height:16px}
.prz.dr{background:transparent;color:var(--fio-t);border-color:var(--fio);box-shadow:none}
.prz.dr:hover{background:var(--fio-j);color:var(--fio-h);border-color:var(--fio-h)}
.prz.ciem{background:transparent;color:var(--tab);border-color:var(--tab);box-shadow:none}
.prz.ciem:hover{background:var(--tab);color:#fff}
.prz.jas{background:transparent;color:#fff;border-color:rgba(255,255,255,.6);box-shadow:none}
.prz.jas:hover{background:#fff;color:var(--tab);border-color:#fff}
.prz-m{min-height:44px;padding:0 16px;font-size:15px;border-radius:var(--r-s);white-space:nowrap;box-shadow:none}
.akcje{display:flex;flex-wrap:wrap;gap:12px}

/* pasek: granatowy na wszystkich stronach jak w makiecie, kreska pod nim po przewinięciu */
.nag{position:sticky;top:0;z-index:60;background:var(--noc);color:#fff;border-bottom:1px solid transparent;transition:border-color .25s}
.nag.pod-s{border-bottom-color:var(--lin-c)}
.nag-w{max-width:1440px;margin:0 auto;padding:0 var(--bok);height:72px;display:flex;align-items:center;gap:14px}
.logo{display:inline-flex;align-items:center;gap:9px;text-decoration:none;font-weight:800;font-size:21px;letter-spacing:-.03em;color:inherit;min-height:44px}
.logo svg{width:32px;height:32px}

.nag nav{margin-left:auto;display:flex;gap:2px}
.nag nav a{padding:10px 12px;text-decoration:none;font-weight:600;font-size:15px;color:var(--na-noc-2);border-radius:8px;white-space:nowrap;transition:color .2s,background .2s}
.nag nav a:hover,.nag nav a[aria-current=page]{color:#fff;background:rgba(255,255,255,.08)}
.nag-log{margin-left:18px;padding:10px 8px;font-weight:600;font-size:15px;text-decoration:none;color:#fff;white-space:nowrap}
.nag-log:hover{text-decoration:underline;text-underline-offset:4px}
.nag-cena{display:none;margin-left:auto;padding:10px 8px;font-weight:700;font-size:15px;text-decoration:none;color:#fff}
.burger{display:none;position:relative;flex:none;width:44px;height:44px;border-radius:10px;background:rgba(255,255,255,.1)}
.burger span{position:absolute;left:12px;right:12px;height:2px;background:#fff;border-radius:2px}
.burger span:first-child{top:17px}
.burger span:last-child{top:25px}
#menu-tel{inset:auto 12px auto auto;top:calc(env(safe-area-inset-top,0px) + 66px);margin:0;max-height:calc(100vh - 84px);max-height:calc(100dvh - 84px);overflow:auto;border:1px solid var(--lin);border-radius:16px;background:#fff;color:var(--tab);padding:8px;box-shadow:var(--cien);min-width:236px}
#menu-tel::backdrop{background:rgba(14,11,38,.5)}
@supports not selector(:popover-open){#menu-tel{display:none}#menu-tel.otw{display:block;position:fixed;z-index:70}}
#menu-tel nav{display:grid}
#menu-tel a{padding:12px 14px;border-radius:10px;text-decoration:none;font-weight:600}
#menu-tel a:hover{background:var(--fio-j)}
#menu-tel a.prz{margin-top:6px;color:#fff}
#menu-tel a.prz:hover{background:var(--fio-h)}

/* telefon: prawdziwy ekran w ramce iPhone'a (czesci.mjs, iphone()). Wymiary w cqw, czyli w procentach szerokości telefonu,
   z proporcji iPhone'a 15: ekran 393 × 852 pt, róg ekranu 55 pt, pasek na dole 134 × 5 pt; wyspa i pasek stanu są w SVG.
   Rodzic ramki musi mieć container-type:inline-size. Kolory obudowy to nie kolory marki. */
.ip{position:relative;padding:1cqw;border-radius:16.8cqw;background:linear-gradient(145deg,#80868a,#2c3033 15%,#1a1c1e 48%,#303437 82%,#6f7579);box-shadow:inset 0 0 0 .35cqw rgba(255,255,255,.14)}
/* przyciski: z lewej przycisk czynności i głośność, z prawej boczny */
.ip::before,.ip::after{content:'';position:absolute;width:1cqw;border-radius:.6cqw;z-index:-1}
.ip::before{left:-.7cqw;top:36cqw;height:57cqw;background:linear-gradient(#4a4f53 0 15.8%,transparent 0 35%,#4a4f53 0 63%,transparent 0 72%,#4a4f53 0)}
.ip::after{right:-.7cqw;top:62cqw;height:27cqw;background:#4a4f53}
.ip-r{padding:2.8cqw;border-radius:15.8cqw;background:#050607}
.ip-e{position:relative;aspect-ratio:393/852;border-radius:13cqw;overflow:hidden;background:#ECE9F6;isolation:isolate}
.ip-e img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 0}
.ip-p{position:absolute;left:0;top:0;width:100%;height:auto}
.ip-p text{font:600 17px/1 -apple-system,'SF Pro Text','Plus Jakarta Sans',system-ui,sans-serif;letter-spacing:-.2px;fill:#000}
.ip-e::after{content:'';position:absolute;left:50%;bottom:1.9cqw;width:31.5cqw;height:1.2cqw;margin-left:-15.75cqw;border-radius:99px;background:#111}
.ip-c .ip-e::after{background:rgba(255,255,255,.92)}

/* laptop: prawdziwy ekran panelu (1280 × 800, 16:10) w ramce; wymiary w cqw szerokości laptopa, rodzic ma container-type:inline-size.
   Kolory ramki i podstawy to nie kolory marki. */
.lap-e{position:relative;padding:1.6cqw 1.6cqw 2.2cqw;border-radius:2.6cqw 2.6cqw 0 0;background:#141418;box-shadow:inset 0 0 0 .18cqw rgba(255,255,255,.14)}
.lap-e::before{content:'';position:absolute;left:50%;top:.55cqw;width:.6cqw;height:.6cqw;margin-left:-.3cqw;border-radius:50%;background:#2c2c34}
.lap-e img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;object-position:0 0;border-radius:.5cqw}
.lap-b{position:relative;height:2.6cqw;margin:0 -7%;border-radius:0 0 3cqw 3cqw;background:linear-gradient(180deg,#e8e7ee 0%,#c9c8d3 45%,#9d9cab 100%)}
.lap-b::before{content:'';position:absolute;left:50%;top:0;width:15%;height:1cqw;margin-left:-7.5%;border-radius:0 0 1.2cqw 1.2cqw;background:#b4b3c0}

/* stopka */
.sto{background:var(--noc);color:var(--na-noc-2);border-top:1px solid var(--lin-c);padding:clamp(40px,5vw,64px) 0 40px;font-size:16px}
.sto-g{max-width:1440px;margin:0 auto;padding:0 var(--bok);display:grid;grid-template-columns:minmax(0,5fr) repeat(3,minmax(0,2fr));gap:32px}
.sto .logo{color:#fff}
.sto-m p{margin-top:10px;max-width:24em}
.sto-m a{color:var(--zak)}
.sto h2{font-size:16px;font-weight:700;letter-spacing:0;line-height:1.3;color:#fff;margin-bottom:6px}
.sto nav a{display:flex;align-items:center;min-height:36px;text-decoration:none}
.sto nav a:hover{color:var(--zak)}
.sto-d{max-width:1440px;margin:28px auto 0;padding:0 var(--bok);font-size:15px;color:var(--na-noc-3)}
.sto-d p{border-top:1px solid var(--lin-c);padding-top:24px}
.sto-d a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.sto-d a:hover{color:var(--zak)}

@media (max-width:1240px){
  :root{--bok:28px}
  .nag nav,.nag-log{display:none}
  .nag-cena{display:block}
  .burger{display:block}
  .prz-m{margin-left:0}
}
@media (max-width:860px){
  .sto-g{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sto-m{grid-column:1/-1}
}
@media (max-width:640px){
  :root{--bok:16px;--g:52px}
  body{font-size:16px}
  html{scroll-padding-top:72px}
  .nag-w{height:60px;gap:6px}
  .logo{font-size:19px}
  .logo svg{width:30px;height:30px}
  .prz-m{display:none}
  .prz{min-height:52px}
  .sto{font-size:15px}
}
@media (max-width:350px){
  .logo{font-size:17px;gap:6px}
  .logo svg{width:26px;height:26px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}
/* ScolaFlow: strona główna według makiety Adama z 04.11. Granatowa góra ze zdjęciem tancerki w fioletowym świetle,
   prawdziwy panel w laptopie i panel rodzica w iPhonie; dalej jasne sekcje z kartami, fioletowy pas pokazu, cennik,
   granatowy pas danych i jasne zakończenie. Jeden ruch: wejście pierwszego ekranu. Kolory wyłącznie z tokenów baza.css. */
.sz{max-width:1320px;margin:0 auto;padding:0 var(--bok)}
:where(.gl main) h2{font-size:clamp(28px,2.6vw,38px);line-height:1.14;letter-spacing:-.03em;font-weight:800}
/* kropka w Plus Jakarta Sans ma szeroki lewy odstęp: w dużych nagłówkach dosuwamy ją do litery */
.kr{margin-left:-.1em}
:where(.gl main) h3{font-size:18px;line-height:1.25;letter-spacing:-.015em;font-weight:800}

/* ---------- pierwszy ekran ---------- */
.h{position:relative;isolation:isolate;overflow:hidden;background:var(--noc);color:#fff}
.h-tlo{position:absolute;inset:0 0 auto auto;z-index:-2;width:min(100%,1920px);height:100%;object-fit:cover;object-position:100% 0}
/* tekst zawsze na granacie: zdjęcie ściemnione z lewej i u dołu */
.h::before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,var(--noc) 0%,var(--noc) 26%,rgba(14,11,38,.7) 44%,rgba(14,11,38,0) 66%),linear-gradient(0deg,var(--noc) 0%,rgba(14,11,38,0) 30%)}
.h-w{max-width:1440px;margin:0 auto;padding:clamp(40px,4.6vw,72px) var(--bok) clamp(20px,2vw,28px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.06fr);gap:clamp(28px,3.4vw,56px);align-items:center}
.h-od{display:inline-block;padding:7px 14px;border-radius:99px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);font-size:14px;font-weight:600;line-height:1.2;color:var(--na-noc-2)}
.h-h{margin-top:20px;font-size:clamp(36px,3.5vw,54px);line-height:1.06;letter-spacing:-.035em;font-weight:800;color:#fff}
.h-a{color:var(--zak);background:linear-gradient(90deg,#9B7BFF 0%,#C9B8FF 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.h-p{margin-top:20px;font-size:clamp(17px,1.3vw,19px);line-height:1.55;color:var(--na-noc-2);max-width:34em}
.h-ch{display:flex;flex-wrap:wrap;gap:12px 24px;margin-top:24px;font-size:15px;font-weight:600;color:#fff}
.h-ch li,.h-gw li{display:flex;align-items:center;gap:8px}
.h-ch .ik{width:20px;height:20px;padding:4px;border-radius:50%;background:var(--fio);color:#fff;stroke-width:3}
.h .akcje{margin-top:30px}
.h-gw{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:20px;font-size:14px;color:var(--na-noc-3)}
.h-gw .ik{width:16px;height:16px;color:var(--zak);stroke-width:2.6}
/* urządzenia: laptop z panelem szkoły i iPhone z panelem rodzica na prawym brzegu laptopa; nad laptopem widać tancerkę */
.h-s{position:relative;padding:clamp(120px,13vw,190px) clamp(56px,6vw,96px) 18px 0}
.h-lap{container-type:inline-size;filter:drop-shadow(0 30px 50px rgba(0,0,0,.5))}
.h-tel{position:absolute;right:0;bottom:0;width:clamp(120px,12vw,188px);container-type:inline-size}
.h-tel .ip{box-shadow:inset 0 0 0 .35cqw rgba(255,255,255,.14),0 30px 60px -18px rgba(0,0,0,.7)}
.h-uw{position:relative;max-width:1440px;margin:0 auto;padding:0 var(--bok) 22px;font-size:14px;color:var(--na-noc-3);text-align:right}
/* wejście: tekst wypływa, potem laptop, na końcu telefon; jedyny ruch bez działania osoby */
.ruch .h-t>*{opacity:0;transform:translateY(16px);transition:opacity .7s ease,transform .8s var(--wyd)}
.ruch .h-t>:nth-child(2){transition-delay:.06s}.ruch .h-t>:nth-child(3){transition-delay:.12s}.ruch .h-t>:nth-child(4){transition-delay:.18s}.ruch .h-t>:nth-child(5){transition-delay:.24s}.ruch .h-t>:nth-child(6){transition-delay:.3s}
.ruch .h-lap{opacity:0;transform:translateY(40px);transition:opacity .9s ease .25s,transform 1.1s var(--wyd) .25s}
.ruch .h-tel{opacity:0;transform:translate(24px,30px);transition:opacity .8s ease .7s,transform 1s var(--wyd) .7s}
.ruch .h.start .h-t>*,.ruch .h.start .h-lap,.ruch .h.start .h-tel{opacity:1;transform:none}

/* ---------- dla jakich szkół ---------- */
.ty{background:var(--kreda-2);border-bottom:1px solid var(--lin);padding:28px 0}
.ty-g{display:grid;grid-template-columns:minmax(170px,.9fr) minmax(0,6fr);gap:clamp(20px,3vw,40px);align-items:center}
.ty h2{font-size:clamp(20px,1.6vw,23px);line-height:1.25;letter-spacing:-.02em}
.ty-l{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
.ty-l a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;min-height:96px;padding:16px 8px 14px;border-radius:12px;background:var(--pap);border:1px solid var(--lin);box-shadow:var(--cien-m);text-align:center;font-size:14px;font-weight:700;line-height:1.25;text-decoration:none;color:var(--tab);transition:border-color .2s,transform .2s var(--wyd)}
.ty-l a:hover{border-color:var(--fio);transform:translateY(-2px)}
.ty-l .ik{width:30px;height:30px;color:var(--fio);stroke-width:1.7}

/* ---------- codzienne sytuacje ---------- */
/* odstępy gęstsze niż w reszcie strony, jak w makiecie */
.pr{background:var(--pap);padding:clamp(44px,4.4vw,68px) 0 clamp(36px,3.4vw,52px)}
.pr-h,.pr-p{text-align:center}
.pr-p{margin-top:10px;color:var(--t2);font-size:16px}
.pr-g{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:clamp(28px,3vw,40px)}
.pr-k{display:flex;flex-direction:column;align-items:flex-start;padding:26px 26px 24px;border-radius:var(--r-l);background:var(--pap);border:1px solid var(--lin);box-shadow:var(--cien-m)}
.pr-k .ik{width:30px;height:30px;color:var(--fio)}
.pr-k h3{margin-top:16px}
.pr-k p{margin-top:8px;font-size:15px;line-height:1.55;color:var(--t2)}
.pr-k p:not(.tag){margin-bottom:18px}
/* etykieta skutku: jedyne miejsce z czerwienią poza alarmami (MARKA.md, Kolor) */
.pr-k .tag{display:inline-flex;align-items:center;gap:6px;margin-top:auto;padding:6px 10px;border-radius:6px;background:var(--cz-j);color:var(--cz);font-size:14px;font-weight:700;line-height:1.2}
.pr-k .tag::before{content:'↘' / '';font-size:14px;line-height:1}

/* ---------- funkcje ---------- */
.fu{background:var(--pap);padding:0 0 clamp(40px,4vw,60px)}
.fu-g{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,2.4fr);gap:clamp(32px,5vw,80px);align-items:start;padding-top:clamp(36px,3.6vw,52px);border-top:1px solid var(--lin)}
.fu-h{position:relative;padding-bottom:22px}
.fu-h::after{content:'';position:absolute;left:0;bottom:0;width:96px;height:6px;border-radius:99px;background:linear-gradient(90deg,var(--fio),#9B7BFF);transform:rotate(-2.5deg);transform-origin:0 50%}
.fu-l{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px 32px}
.fu-l li{display:flex;gap:14px;align-items:flex-start}
.fu-l .ik{width:28px;height:28px;margin-top:1px;color:var(--fio)}
.fu-l h3{font-size:16.5px}
.fu-l p{margin-top:5px;font-size:14.5px;line-height:1.5;color:var(--t2)}

/* ---------- pokaz ---------- */
.ak{background:var(--pap);padding:0 0 clamp(44px,4.4vw,68px)}
.ak-b{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:center;border-radius:var(--r-xl);background:linear-gradient(110deg,var(--fio-j) 0%,var(--law) 60%,#F8F5FF 100%);border:1px solid #E3DAFF;overflow:hidden}
.ak-z{align-self:end;padding:clamp(24px,3vw,40px) 0 0 clamp(24px,3vw,40px)}
.ak-gr{position:relative;display:block;height:clamp(220px,24vw,340px);border-radius:14px 14px 0 0;overflow:hidden;background:var(--noc);box-shadow:0 -1px 0 rgba(21,18,46,.06),0 24px 60px -20px rgba(21,18,46,.4);border:6px solid #141418;border-bottom:0}
.ak-gr img{width:100%;height:100%;object-fit:cover;object-position:0 0}
.ak-p{position:absolute;left:50%;top:50%;width:76px;height:76px;margin:-38px 0 0 -38px;border-radius:50%;display:grid;place-items:center;background:rgba(14,11,38,.82);color:#fff;box-shadow:0 0 0 8px rgba(255,255,255,.3);transition:transform .25s var(--wyd),background .2s}
.ak-p .ik{width:30px;height:30px;margin-left:4px}
.ak-gr:hover .ak-p{transform:scale(1.07);background:var(--fio)}
.ak-t{padding:clamp(28px,3vw,44px) clamp(24px,3vw,44px) clamp(28px,3vw,44px) 0}
.ak-t>p{margin-top:12px;font-size:16.5px;line-height:1.55;color:var(--t2);max-width:30em}
.ak-t .akcje{margin-top:22px}
.ak-m{margin-top:16px;font-size:14.5px;color:var(--t3)}
.ak-m a,.ce-m a{color:var(--fio-t);font-weight:600}

/* ---------- cennik ---------- */
.ce{background:var(--kreda);padding:clamp(48px,4.8vw,72px) 0 clamp(40px,4vw,60px);border-top:1px solid var(--lin)}
.ce-g{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr) minmax(0,1fr);gap:clamp(20px,2.6vw,36px);align-items:center}
.ce-t>p{margin-top:14px;font-size:16.5px;line-height:1.55;color:var(--t2)}
.ce-t .ce-m{font-size:15px;color:var(--t3)}
.ce-k{position:relative;padding:36px clamp(22px,2.4vw,34px) 28px;border-radius:var(--r-l);background:var(--pap);border:2px solid var(--fio);box-shadow:0 30px 60px -30px rgba(106,61,240,.45)}
.ce-od{position:absolute;left:50%;top:0;transform:translate(-50%,-50%);white-space:nowrap;padding:6px 14px;border-radius:99px;background:var(--fio);color:#fff;font-size:14px;font-weight:700;line-height:1.2}
.ce-kw{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px}
.ce-kw b{font-size:clamp(40px,3.6vw,52px);font-weight:800;letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums}
.ce-kw span{font-size:16px;font-weight:600;color:var(--t2)}
.ce-dla{margin-top:8px;font-size:15px;color:var(--t2)}
.ce-l{display:grid;gap:10px;margin-top:20px;padding-top:20px;border-top:1px solid var(--lin);font-size:15.5px;font-weight:600}
.ce-l li{display:flex;align-items:center;gap:10px}
.ce-l .ik{width:20px;height:20px;color:var(--fio);stroke-width:2.6}
.ce-w{padding:28px clamp(22px,2.4vw,30px);border-radius:var(--r-l);background:var(--pap);border:1px solid var(--lin);box-shadow:var(--cien-m)}
.ce-w h3{font-size:20px}
.ce-w p{margin-top:10px;font-size:15px;line-height:1.55;color:var(--t2)}
.ce-w .prz{margin-top:20px;min-height:46px;font-size:15px}
.gw{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px 28px;margin-top:28px;padding:20px clamp(18px,2.4vw,32px);border-radius:var(--r-l);background:var(--pap);border:1px solid var(--lin)}
.gw li{display:flex;align-items:center;gap:14px}
.gw .ik{width:30px;height:30px;color:var(--fio)}
.gw b{display:block;font-size:15.5px;font-weight:800;letter-spacing:-.01em}
.gw span{display:block;margin-top:2px;font-size:14px;line-height:1.4;color:var(--t3)}

/* ---------- dane ---------- */
.bz{background:var(--noc);color:#fff;padding:clamp(30px,3.4vw,44px) 0}
.bz-g{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,3.6fr);gap:clamp(24px,4vw,64px);align-items:center}
.bz h2{font-size:clamp(24px,2vw,30px);line-height:1.15}
.bz h2 a,.bz b a{text-decoration:none;color:inherit}
.bz h2 a:hover,.bz b a:hover{text-decoration:underline;text-underline-offset:5px}
.bz-l{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px 36px}
.bz-l li{display:flex;gap:14px;align-items:flex-start}
.bz-l .ik{width:32px;height:32px;color:var(--zak)}
.bz-l b{display:block;font-size:16px;font-weight:700}
.bz-l span{display:block;margin-top:3px;font-size:14.5px;line-height:1.45;color:var(--na-noc-2)}

/* ---------- zakończenie ---------- */
.kon{background:linear-gradient(180deg,var(--law) 0%,var(--kreda) 100%);padding:clamp(44px,4.6vw,68px) 0;text-align:center}
.kon p{margin:12px auto 0;max-width:34em;font-size:17px;color:var(--t2)}
.kon .akcje{justify-content:center;margin-top:26px}

/* ---------- okno filmu ---------- */
.film{width:min(1120px,94vw);max-height:94vh;margin:auto;padding:0;border:0;border-radius:16px;background:var(--noc);color:#fff;box-shadow:0 40px 120px rgba(0,0,0,.6)}
.film::backdrop{background:rgba(14,11,38,.8)}
.film video{display:block;width:100%;height:auto;max-height:calc(94vh - 80px);background:#000}
.film-d{display:flex;flex-wrap:wrap;align-items:center;gap:10px 20px;padding:14px 18px;font-size:14.5px;color:var(--na-noc-2)}
.film-d a{color:var(--zak);font-weight:600}
.film-x{margin-left:auto;min-height:42px;padding:0 16px;font-size:15px}

/* ---------- przycisk na dole telefonu ---------- */
.dol{display:none}

/* ---------- mniejsze ekrany ---------- */
@media (max-width:1180px){
  .ty-g{grid-template-columns:minmax(0,1fr)}
  .fu-l{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ce-g{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .ce-t{grid-column:1/-1}
  .gw{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:1000px){
  .h-w{grid-template-columns:minmax(0,1fr);padding-bottom:12px}
  .h-tlo{object-position:72% 0;height:min(100%,780px)}
  .h::before{background:linear-gradient(180deg,rgba(14,11,38,.62) 0%,rgba(14,11,38,.82) 40%,var(--noc) 62%)}
  .h-s{max-width:720px;width:100%;margin:0 auto;padding-top:8px}
  .h-uw{text-align:left}
  .ty-l{grid-template-columns:repeat(3,minmax(0,1fr))}
  .pr-g{grid-template-columns:minmax(0,1fr)}
  .fu-g,.ak-b,.bz-g{grid-template-columns:minmax(0,1fr)}
  .ak-t{order:-1;padding:clamp(24px,4vw,40px) clamp(24px,4vw,40px) 0}
  .ak-z{padding-right:clamp(24px,4vw,40px)}
  .bz-l{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:760px){
  .ce-g{grid-template-columns:minmax(0,1fr)}
  .ce-k{margin-top:10px}
  .bz-l{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
  .h-w{padding-top:28px}
  .h-h{font-size:clamp(32px,9.4vw,44px)}
  .h-p{font-size:16.5px}
  .h-ch{gap:10px 16px;font-size:14.5px}
  .h .akcje .prz,.kon .akcje .prz,.ak-t .akcje .prz{width:100%}
  .h-s{padding:4px 40px 12px 0}
  .h-tel{width:30%}
  .ty-l{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .ty-l a{min-height:84px}
  .fu-l{grid-template-columns:minmax(0,1fr);gap:22px}
  .gw{grid-template-columns:minmax(0,1fr)}
  .ak-gr{height:200px}
  .kon{text-align:left}
  .kon .akcje{justify-content:flex-start}
  .kon p{margin-left:0}
  .film-x{margin-left:0}
  .dol{display:block;position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));z-index:50;transform:translateY(160%);visibility:hidden;transition:transform .35s var(--wyd),visibility 0s .35s}
  .dol.on{transform:none;visibility:visible;transition:transform .35s var(--wyd),visibility 0s}
  .dol .prz{width:100%;box-shadow:0 14px 34px -10px rgba(14,11,38,.6)}
}