/* ============================================================
   Jezyk wizualny wspolczesnych stron SaaS: bardzo duze naglowki
   o umiarkowanej wadze ze scisnietym trackingiem, przyciski pigulki,
   karty o duzym promieniu, jasne tlo z plamami gradientu.

   Makiety aplikacji (.app) sa zbudowane w HTML, a nie wstawione jako
   obrazki. Powody: zawsze ostre na kazdym ekranie, waza zero, i nie
   zdezaktualizuja sie po zmianie interfejsu. Ikony sa DOKLADNIE te
   same, ktore siedza w pasku bocznym aplikacji.
   ============================================================ */
:root{
  --ink:#14233B; --ink-2:#5A6B85; --orange:#FF6C2F; --orange-d:#E85A1F; --orange-t:#C4551F;
  --tint:#F7F9FC; --line:#E7EBF1; --shadow:0 4px 24px rgba(20,35,59,.07); --shadow-l:0 18px 60px rgba(20,35,59,.13);
}
*{box-sizing:border-box}
/* Bez scroll-behavior:smooth. Globalnie zamienial przeskok na gore nowej
   strony w animacje i - razem z tym, ze przegladarka przez chwile trzyma
   stara pozycje przewijania przy przejsciu w obrebie domeny - powodowal
   ladowanie na dole strony po kliknieciu linku w stopce. Menu nie ma juz
   kotwic, wiec smooth nie mial czego animowac. */
html{scroll-behavior:auto}
body{font-family:Lato,system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;margin:0;background:#fff;color:var(--ink);line-height:1.6;font-size:16.5px;-webkit-font-smoothing:antialiased}
a{color:var(--orange-t);text-decoration:none}
.wrap{max-width:1160px;margin:0 auto;padding:0 24px}
section[id],div[id]{scroll-margin-top:96px}   /* przyklejona nawigacja nie zasłania celu kotwicy */

.b{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:700;font-size:15.5px;
   padding:15px 30px;border-radius:100px;border:1.5px solid transparent;transition:.16s;white-space:nowrap;cursor:pointer}
.b.fill{background:var(--orange);color:#fff;box-shadow:0 6px 20px rgba(255,108,47,.28)}
.b.fill:hover{background:var(--orange-d);transform:translateY(-1px)}
.b.line{border-color:var(--line);color:var(--ink);background:#fff}
.b.line:hover{border-color:var(--ink);background:var(--tint)}
.b.on-dark{background:#fff;color:var(--ink);box-shadow:none}
.b.on-dark:hover{background:#F2F5F9}
.b.sm{font-size:14px;padding:11px 22px}

/* ---- nawigacja + mega menu ---- */
.nav{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.86);backdrop-filter:saturate(180%) blur(14px);border-bottom:1px solid var(--line)}
.nav .in{max-width:1160px;margin:0 auto;padding:14px 24px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.nav .brand{display:inline-flex;align-items:center;gap:11px}
.nav .brand span{font-size:21px;font-weight:700;letter-spacing:-.2px;color:var(--ink)}
.nav .links{display:flex;gap:28px;align-items:center}
.nav .links>a,.nav .links>.mm>button{font-size:15px;font-weight:700;color:var(--ink-2);background:none;border:0;font-family:inherit;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.nav .links>a:hover,.nav .links>.mm>button:hover{color:var(--ink)}
.mm{position:static}
.mm>button svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2.6;transition:.18s}
.mm.open>button{color:var(--ink)}
.mm.open>button svg{transform:rotate(180deg)}
.mega{position:absolute;left:0;right:0;top:100%;background:#fff;border-bottom:1px solid var(--line);
      box-shadow:0 26px 50px rgba(20,35,59,.12);opacity:0;visibility:hidden;transform:translateY(-8px);transition:.18s}
.mm.open .mega{opacity:1;visibility:visible;transform:translateY(0)}
.mega .cols{max-width:1160px;margin:0 auto;padding:30px 24px 34px;display:grid;grid-template-columns:repeat(3,1fr);gap:10px 34px}
.mega .gtitle{grid-column:1/-1;font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#94A2B8;margin:6px 0 2px}
.mega .gtitle:not(:first-child){margin-top:16px;padding-top:16px;border-top:1px solid var(--line)}
.mi{display:flex;gap:13px;padding:10px 12px;border-radius:12px;transition:.13s;align-items:flex-start}
.mi:hover{background:var(--tint)}
.mi .ic{flex:0 0 36px;height:36px;border-radius:10px;background:linear-gradient(140deg,#FFF1E8,#FFE2D2);display:flex;align-items:center;justify-content:center}
.mi .ic svg{width:18px;height:18px;stroke:var(--orange-t);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.mi b{display:block;font-size:14.5px;color:var(--ink);line-height:1.3}
.mi span{display:block;font-size:13px;color:var(--ink-2);line-height:1.4;margin-top:2px}
.mega .foot{background:var(--tint);border-top:1px solid var(--line)}
.mega .foot .i{max-width:1160px;margin:0 auto;padding:16px 24px;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;font-size:14.5px;color:var(--ink-2)}

/* ---- hero ---- */
.hero{position:relative;overflow:hidden;padding:88px 0 0}
.hero:before{content:"";position:absolute;top:-320px;left:50%;transform:translateX(-50%);width:1100px;height:800px;background:radial-gradient(closest-side,rgba(255,108,47,.16),rgba(255,108,47,0) 70%);pointer-events:none}
.hero:after{content:"";position:absolute;top:-180px;right:-220px;width:760px;height:700px;background:radial-gradient(closest-side,rgba(56,110,201,.14),rgba(56,110,201,0) 70%);pointer-events:none}
.hero .in{position:relative;z-index:2;text-align:center;max-width:900px;margin:0 auto}
.pill{display:inline-flex;align-items:center;gap:9px;background:#fff;border:1px solid var(--line);border-radius:100px;padding:7px 16px 7px 8px;font-size:13.5px;font-weight:700;color:var(--ink-2);box-shadow:var(--shadow);margin-bottom:26px}
.pill i{background:#FFF1E8;color:var(--orange-t);border-radius:100px;padding:3px 11px;font-style:normal;font-size:12px}
h1{font-size:66px;line-height:1.05;font-weight:700;letter-spacing:-2px;margin:0 0 22px}
h1 em{font-style:normal;background:linear-gradient(100deg,var(--orange),#FF9A6B);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p.lead{font-size:20px;color:var(--ink-2);max-width:690px;margin:0 auto 32px}
.ctas{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.fine{color:#8a97ab;font-size:14px;margin-top:20px}

/* ============================================================
   MAKIETA APLIKACJI - pasek boczny + gorna belka + tresc
   ============================================================ */
.app{background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow-l);overflow:hidden;display:flex;min-height:330px}
.app .rail{flex:0 0 54px;background:#14233B;padding:12px 0;display:flex;flex-direction:column;align-items:center;gap:5px}
.app .rail .lg{width:28px;height:28px;border-radius:7px;background:var(--orange);display:flex;align-items:center;justify-content:center;margin-bottom:10px}
.app .rail .lg svg{width:16px;height:16px;stroke:#fff;fill:none;stroke-width:2.4}
.app .rail i{width:32px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center}
.app .rail i svg{width:16px;height:16px;stroke:#7C8BA5;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.app .rail i.on{background:rgba(255,108,47,.16)}
.app .rail i.on svg{stroke:var(--orange)}
.app .main{flex:1;min-width:0;background:#F8FAFC}
.app .top{background:#F8FAFC;padding:14px 20px 12px;border-bottom:1px solid var(--line)}
.app .top .eb{font-size:9.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#94A2B8}
.app .top h4{margin:2px 0 0;font-size:17px;font-weight:700;letter-spacing:-.3px}
.app .cont{padding:16px 20px 20px}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;margin-bottom:14px}
.kpi{background:#fff;border:1px solid var(--line);border-radius:11px;padding:11px 13px}
.kpi .k{font-size:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#94A2B8}
.kpi .v{font-size:18px;font-weight:900;letter-spacing:-.5px;margin-top:2px}
.kpi .v.acc{color:var(--orange-t)}
.kpi .v.gd{color:#178a3d}
.tbl{background:#fff;border:1px solid var(--line);border-radius:11px;overflow:hidden}
.tbl .th{display:flex;gap:12px;padding:8px 13px;background:#F2F5F9;font-size:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#94A2B8}
.tbl .tr{display:flex;gap:12px;padding:9px 13px;font-size:13px;border-top:1px solid #F1F4F8;align-items:center}
.app .tbl .c2,.app .tbl .c3{align-self:center}
/* Etykieta zawija sie zamiast urywac wielokropkiem. W waskiej kolumnie
   ellipsis zostawial "I..", "V..", "S.." - czyli makiete bez tresci, ktora
   wyglada jak blad, a nie jak zrzut z programu. */
.tbl .c1{flex:1;min-width:0;line-height:1.3;word-break:break-word}
.tbl .c2{flex:0 0 74px;text-align:right;font-variant-numeric:tabular-nums}
.tbl .c3{flex:0 0 86px;text-align:right;font-variant-numeric:tabular-nums;font-weight:700}
.tag{font-size:10px;font-weight:700;padding:2px 9px;border-radius:100px;white-space:nowrap}
.tag.o{background:#FFF1E8;color:var(--orange-t)}
.tag.g{background:#E7F7EC;color:#15803d}
.tag.r{background:#FDECEC;color:#b91c1c}
.tag.b{background:#E8F0FE;color:#1d4ed8}
.bar{height:7px;border-radius:100px;background:#EDF1F6;overflow:hidden}
.bar span{display:block;height:100%;background:linear-gradient(90deg,var(--orange),#FF9A6B)}
.gantt{background:#fff;border:1px solid var(--line);border-radius:11px;padding:12px 13px}
.gantt .g{display:flex;align-items:center;gap:10px;margin-bottom:8px;font-size:12px}
.gantt .g:last-child{margin-bottom:0}
.gantt .g .nm{flex:0 0 92px;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gantt .g .track{flex:1;height:12px;background:#F1F4F8;border-radius:100px;position:relative}
.gantt .g .track b{position:absolute;top:0;bottom:0;border-radius:100px;background:linear-gradient(90deg,#2B4E85,#3B6BB5)}
.gantt .g .track b.acc{background:linear-gradient(90deg,var(--orange),#FF9A6B)}
.gantt .today{position:absolute;top:-4px;bottom:-4px;width:2px;background:#b91c1c;z-index:3}

.mock-wrap{position:relative;z-index:2;max-width:1000px;margin:60px auto 0;padding:0 24px}

/* ---- pasek liczb ---- */
.stats{padding:76px 0 96px}   /* odstep POD liczbami, zeby sekcja z tlem nie zaczynala sie tuz pod nimi */
.stats .in{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px;text-align:center}
.stats b{display:block;font-size:40px;font-weight:900;letter-spacing:-1.5px;line-height:1.1;background:linear-gradient(100deg,var(--orange),#FF9A6B);-webkit-background-clip:text;background-clip:text;color:transparent}
.stats span{font-size:14.5px;color:var(--ink-2)}

section{padding:112px 0}
section.tint{background:var(--tint)}
.head{text-align:center;max-width:750px;margin:0 auto 58px}
.eyebrow{display:inline-block;background:#FFF1E8;color:var(--orange-t);font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;padding:6px 15px;border-radius:100px;margin-bottom:18px}
h2{font-size:47px;line-height:1.1;font-weight:700;letter-spacing:-1.4px;margin:0 0 16px}
.head p{font-size:18px;color:var(--ink-2);margin:0}

.alt{display:grid;grid-template-columns:1fr 1.15fr;gap:64px;align-items:center;margin-bottom:104px}
.alt > *{min-width:0}
.alt:last-child{margin-bottom:0}
.alt.flip{grid-template-columns:1.15fr 1fr}
.alt h3{font-size:37px;font-weight:700;letter-spacing:-1.2px;line-height:1.15;margin:0 0 16px}
.alt p{color:var(--ink-2);font-size:17px;margin:0 0 20px}
.alt ul{list-style:none;padding:0;margin:0}
.alt li{padding-left:32px;position:relative;margin-bottom:12px;font-size:16px}
.alt li:before{content:"";position:absolute;left:0;top:7px;width:18px;height:18px;border-radius:50%;background:#FFF1E8;box-shadow:inset 0 0 0 2px var(--orange)}

/* ---- problem kontra rozwiazanie ---- */
.ba{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.ba-col{border-radius:22px;padding:30px 28px;border:1px solid var(--line);background:#fff}
.ba-col.good{border-color:transparent;background:linear-gradient(160deg,#14233B,#1E3A63);color:#fff}
.ba-h{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#94A2B8;padding-bottom:16px;margin-bottom:6px;border-bottom:1px solid var(--line)}
.ba-col.good .ba-h{color:#FFB58C;border-bottom-color:rgba(255,255,255,.16)}
.ba-r{padding:15px 0 15px 32px;position:relative;border-bottom:1px solid #F1F4F8}
.ba-col.good .ba-r{border-bottom-color:rgba(255,255,255,.1)}
.ba-r:last-child{border-bottom:0;padding-bottom:0}
.ba-r b{display:block;font-size:16px;line-height:1.35}
.ba-r span{display:block;font-size:14.5px;color:var(--ink-2);margin-top:3px}
.ba-col.good .ba-r span{color:#B9C7DC}
.ba-r:before{content:"";position:absolute;left:0;top:19px;width:17px;height:17px;border-radius:50%}
.ba-col.bad .ba-r:before{background:#FDECEC;box-shadow:inset 0 0 0 2px #E2A5A5}
.ba-col.good .ba-r:before{background:rgba(255,108,47,.22);box-shadow:inset 0 0 0 2px var(--orange)}
.act{margin-top:26px;background:#FFF4EC;border:1px solid #FFD9C2;border-radius:20px;padding:26px 30px;text-align:center}
.act b{display:block;font-size:19px;color:#8A3E12;margin-bottom:6px}
.act p{margin:0;color:#8A3E12;font-size:16px;max-width:760px;margin:0 auto}

/* ---- kalkulator ---- */
.calc{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line);border-radius:24px;overflow:hidden;box-shadow:var(--shadow-l)}
.calc .left{padding:38px 36px;background:#fff}
.calc .right{padding:38px 36px;background:linear-gradient(160deg,#14233B,#1E3A63);color:#fff;display:flex;flex-direction:column;justify-content:center}
.calc .left h3{font-size:23px;font-weight:700;letter-spacing:-.5px;margin:0 0 24px}
.fld{margin-bottom:24px}
.fld label{display:flex;justify-content:space-between;gap:14px;align-items:baseline;font-size:15px;color:var(--ink-2);margin-bottom:9px}
.fld label b{font-size:17px;color:var(--ink);font-weight:900;font-variant-numeric:tabular-nums}
.fld input[type=range]{width:100%;-webkit-appearance:none;appearance:none;height:5px;border-radius:100px;background:#E7EBF1;outline:none}
.fld input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:var(--orange);cursor:pointer;box-shadow:0 2px 8px rgba(255,108,47,.45)}
.fld input[type=range]::-moz-range-thumb{width:22px;height:22px;border:0;border-radius:50%;background:var(--orange);cursor:pointer}
.fld .hint{font-size:12.5px;color:#94A2B8;margin-top:7px}
.calc .right .lab{font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#8FA3BF}
.calc .right .big{font-size:52px;font-weight:900;letter-spacing:-2.5px;line-height:1.05;margin:6px 0 4px;
  background:linear-gradient(100deg,#FF9A6B,var(--orange));-webkit-background-clip:text;background-clip:text;color:transparent}
.calc .right .big.neg{background:none;color:#F0B8B8}
.calc .right .sub{color:#B9C7DC;font-size:15px;margin-bottom:26px}
.calc .rr{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1px solid rgba(255,255,255,.12);font-size:15px;color:#D5DEEA}
.calc .rr b{font-variant-numeric:tabular-nums;color:#fff;white-space:nowrap}
.calc .rr:last-of-type{border-bottom:0}
.calc .disc{font-size:12.5px;color:#8FA3BF;line-height:1.5;margin-top:22px;padding-top:16px;border-top:1px solid rgba(255,255,255,.12)}

.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:22px;margin-bottom:28px}
.pl{background:#fff;border:1px solid var(--line);border-radius:22px;padding:34px 30px;position:relative}
.pl.hi{border:2px solid var(--orange);box-shadow:var(--shadow-l)}
.pl.hi:before{content:"Most practices";position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--orange);color:#fff;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:5px 15px;border-radius:100px;white-space:nowrap}
.pl .nm{font-size:15px;font-weight:700;color:var(--ink-2);margin-bottom:14px}
.pl .amt{font-size:50px;font-weight:900;letter-spacing:-2.5px;line-height:1}
.pl .amt small{font-size:15px;font-weight:400;color:#8a97ab;letter-spacing:0}
.pl .who{font-size:15px;color:var(--ink-2);margin:14px 0 22px;min-height:48px}
.pl .b{width:100%}

.close{padding:0 0 96px}
.close .box{background:linear-gradient(135deg,#14233B 0%,#1E3A63 55%,#2B4E85 100%);border-radius:28px;padding:74px 40px;text-align:center;color:#fff;position:relative;overflow:hidden}
.close .box:before{content:"";position:absolute;top:-140px;right:-100px;width:520px;height:480px;background:radial-gradient(closest-side,rgba(255,108,47,.35),rgba(255,108,47,0) 70%)}
.close .box>*{position:relative;z-index:2}
.close h2{color:#fff;margin-bottom:16px}
.close p{color:#B9C7DC;font-size:18px;max-width:620px;margin:0 auto 32px}

/* ---- stopka: cztery kolumny plus dane spolki ---- */
footer{border-top:1px solid var(--line);padding:56px 0 40px;font-size:14.5px;color:var(--ink-2);margin-top:20px}
.fcols{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:40px;margin-bottom:40px}
.fbrand{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.fbrand img{height:30px;width:30px;border-radius:7px;display:block}
.fbrand b{font-size:18px;color:var(--ink);letter-spacing:-.2px}
/* text-wrap:pretty nie pozwala pojedynczemu slowu zostac samemu w ostatnim
   wierszu. Bez tego 'Act.' spadalo nizej i wygladalo jak blad skladu. */
.ftag{font-size:14.5px;line-height:1.6;max-width:340px;margin:0 0 14px;text-wrap:pretty}
.fmail{font-size:14.5px;font-weight:700}
.fh{font-size:12px;font-weight:700;color:var(--ink);letter-spacing:.12em;text-transform:uppercase;margin:0 0 14px}
.flist{list-style:none;padding:0;margin:0}
.flist li{margin-bottom:9px}
.flist a{color:var(--ink-2);font-weight:400}
.flist a:hover{color:var(--ink)}
/* Drobny druk na pelnej szerokosci kontenera: kazdy akapit miesci sie w jednym
   wierszu, wiec blok zajmuje trzy linie zamiast szesciu i przestaje konkurowac
   z trescia stopki. */
.flegal{border-top:1px solid var(--line);padding-top:24px;font-size:10.5px;color:#98a4b5;line-height:1.7;max-width:none;text-align:center}
.flegal p{margin:0 0 5px}
.flegal b{color:var(--ink-2)}
@media(max-width:900px){.fcols{grid-template-columns:1fr 1fr;gap:30px}}
@media(max-width:560px){.fcols{grid-template-columns:1fr;gap:26px}}

@media(max-width:1000px){ .mega .cols{grid-template-columns:repeat(2,1fr)} }
@media(max-width:900px){
  .nav .links>a:not(.b),.nav .links>.mm{display:none}
  .hero{padding:52px 0 0}
  h1{font-size:39px;letter-spacing:-1.2px}
  .hero p.lead{font-size:17.5px}
  h2{font-size:30px;letter-spacing:-.8px}
  section{padding:62px 0}
  .alt,.alt.flip{grid-template-columns:1fr;gap:32px;margin-bottom:64px}
  .ba{grid-template-columns:1fr}
  .calc{grid-template-columns:1fr;border-radius:20px}
  .calc .left,.calc .right{padding:30px 24px}
  .calc .right .big{font-size:40px;letter-spacing:-1.6px}
  .alt h3{font-size:26px;letter-spacing:-.7px}
  .app .rail{flex:0 0 44px}
  .close .box{padding:48px 24px;border-radius:22px}
  .stats b{font-size:32px}
}

/* ============================================================
   PODSTRONY FUNKCJI
   Naglowek makiety byl <h4>, czyli falszywym naglowkiem w strukturze
   dokumentu. Wyszukiwarka czytala "Dashboard" i "Interim certificate
   PC-04" jako sekcje strony, ktorymi nie sa. Teraz to zwykly div.
   ============================================================ */
.app .top .mt{margin:2px 0 0;font-size:17px;font-weight:700;letter-spacing:-.3px}

/* Hero podstron uzywa DOKLADNIE tego samego jezyka co strona glowna:
   wysrodkowanie, dwie plamy gradientu, ten sam rytm odstepow. Wczesniej
   byl wyrownany do lewej i mial jedna plame, przez co przejscie ze strony
   glownej na podstrone czytalo sie jak zmiana witryny. */
.fhero{position:relative;overflow:hidden;padding:76px 0 74px;text-align:center}
.fhero:before{content:"";position:absolute;top:-320px;left:50%;transform:translateX(-50%);width:1100px;height:800px;
  background:radial-gradient(closest-side,rgba(255,108,47,.16),rgba(255,108,47,0) 70%);pointer-events:none}
.fhero:after{content:"";position:absolute;top:-180px;right:-220px;width:760px;height:700px;
  background:radial-gradient(closest-side,rgba(56,110,201,.14),rgba(56,110,201,0) 70%);pointer-events:none}
.fhero .in{position:relative;z-index:2;max-width:880px;margin:0 auto}
.fhero h1{font-size:56px;line-height:1.06;letter-spacing:-1.8px;margin:14px 0 20px}
.fhero p.lead{font-size:20px;color:var(--ink-2);margin:0 auto 30px;max-width:700px}
.fhero .ctas{justify-content:center}
.fhero .fine{color:#8a97ab;font-size:14px;margin-top:20px}

/* min-width:0 na dzieciach: element siatki ma domyslnie min-width:auto, wiec
   szeroka zawartosc (makieta aplikacji, tabela) rozpycha kolumne ponad 1fr
   i cala strona wystaje w bok. To najczestsza przyczyna poziomego paska
   przewijania w ukladach opartych o grid.

   align-items:center zamiast start - kolumny roznej wysokosci wyrownuja sie
   teraz w pionie, o co prosiles. */
.split{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;margin-bottom:96px}
.split > *{min-width:0}
.split:last-child{margin-bottom:0}
/* Odwrocenie kolejnosci przez order, a nie przez direction:rtl. Ten drugi
   zmienia kierunek pisma i potrafi przesuwac zawartosc poza kontener. */
.split.flip > *:first-child{order:2}
.split h2{font-size:34px;letter-spacing:-1px;margin-bottom:14px}
.split p{color:var(--ink-2);font-size:16.5px;margin:0 0 16px}
.split ul{list-style:none;padding:0;margin:0}
.split li{padding-left:32px;position:relative;margin-bottom:12px;font-size:16px}
.split li:before{content:"";position:absolute;left:0;top:7px;width:18px;height:18px;border-radius:50%;
  background:#FFF1E8;box-shadow:inset 0 0 0 2px var(--orange)}

.faq{max-width:820px;margin:0 auto}
.faq details{background:#fff;border:1px solid var(--line);border-radius:16px;padding:0 24px;margin-bottom:12px}
.faq summary{cursor:pointer;list-style:none;padding:20px 0;font-size:17.5px;font-weight:700;display:flex;
  justify-content:space-between;gap:16px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"+";font-size:24px;font-weight:400;color:var(--orange);flex:0 0 auto;line-height:1}
.faq details[open] summary:after{content:"\2212"}
.faq details p{margin:0 0 20px;color:var(--ink-2);font-size:16px}

.rel{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px}
.rel a{display:block;background:#fff;border:1px solid var(--line);border-radius:18px;padding:22px 24px;transition:.16s}
.rel a:hover{transform:translateY(-3px);box-shadow:var(--shadow-l);border-color:transparent}
.rel a b{display:block;font-size:17px;color:var(--ink);margin-bottom:5px}
.rel a span{display:block;font-size:14.5px;color:var(--ink-2)}

@media(max-width:900px){
  .fhero h1{font-size:34px;letter-spacing:-1px}
  .fhero{padding:24px 0 48px}
  .split{grid-template-columns:1fr;gap:30px;margin-bottom:52px}
  .split h2{font-size:26px}
}

/* Naglowek artykulu i strony prawnej dziedziczy wysrodkowanie z .fhero,
   ale sama tresc musi wracac do lewej - wysrodkowany akapit prawny jest
   nieczytelny. */
article .fhero .in, .lgl{text-align:left}
article .fhero .in{max-width:780px}

/* ============================================================
   SIATKA KART. Uzywana na stronie glownej (funkcje) i w Support.
   Reguly zginely przy wyodrebnianiu arkusza z landing.html, przez co
   karty traciły pudelko, a ikony SVG bez width i fill:none renderowaly
   sie jako wielkie czarne ksztalty. Zostawiam ten komentarz, bo blad
   byl niewidoczny w kodzie i widoczny dopiero na ekranie.
   ============================================================ */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:22px}
.c{background:#fff;border:1px solid var(--line);border-radius:20px;padding:30px 28px;transition:.18s}
.c:hover{transform:translateY(-3px);box-shadow:var(--shadow-l);border-color:transparent}
.c .ic{width:50px;height:50px;border-radius:15px;background:linear-gradient(140deg,#FFF1E8,#FFE2D2);
  display:flex;align-items:center;justify-content:center;margin-bottom:18px}
.c .ic svg{width:24px;height:24px;stroke:var(--orange-t);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.c h3{font-size:20px;font-weight:700;letter-spacing:-.4px;margin:0 0 9px;color:var(--ink)}
.c p{margin:0;color:var(--ink-2);font-size:15.5px}
.c p a{font-weight:700}

/* Karta funkcji jako odnosnik. Kolor dziedziczony, zeby naglowek i tekst
   nie zrobily sie pomaranczowe od globalnej reguly dla <a>. Cala karta jest
   klikalna - mniejszy cel niz caly prostokat to niepotrzebne utrudnienie. */
a.c{display:block;color:inherit;text-decoration:none}
a.c h3{color:var(--ink)}
a.c p{color:var(--ink-2)}
a.c:after{content:"Learn more";display:block;margin-top:14px;font-size:14px;font-weight:700;color:var(--orange-t)}
a.c:hover:after{color:var(--orange-d)}

/* ============================================================
   MENU MOBILNE. Wczesniej na waskim ekranie linki byly po prostu
   ukrywane, przez co telefon nie mial ZADNEGO dostepu do podstron -
   zostawal tylko przycisk rejestracji. To nie byl uklad responsywny,
   tylko schowana nawigacja.
   ============================================================ */
#burger{display:none;width:40px;height:40px;border:0;background:none;cursor:pointer;
  flex-direction:column;justify-content:center;gap:5px;padding:0 8px}
#burger span{display:block;height:2.5px;background:var(--ink);border-radius:2px;transition:.2s}
#burger.on span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
#burger.on span:nth-child(2){opacity:0}
#burger.on span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}

/* Otwarcie przez display, NIE przez animowana max-height. Nawigacja nie moze
   zalezec od tego, czy transition sie wykona: gdy animacja z jakiegokolwiek
   powodu nie ruszy, menu zostaje wysokosci zero i telefon traci dostep do
   calej strony. Rezygnacja z plynnego rozwijania jest tanszą cena. */
.mnav{display:none;border-top:1px solid var(--line);background:#fff;max-height:80vh;overflow-y:auto}
.mnav.on{display:block}
.mnav-in{padding:10px 24px 22px}
.mnav a{display:block;padding:13px 0;font-size:17px;font-weight:700;color:var(--ink);border-bottom:1px solid var(--line)}
.mnav a.sub{font-size:15.5px;font-weight:400;color:var(--ink-2);padding:11px 0 11px 14px}
.mnav a:last-child{border-bottom:0}
.mnav-t{font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#94A2B8;
  margin:20px 0 4px;padding-top:14px;border-top:1px solid var(--line)}

@media(max-width:900px){
  #burger{display:flex}
}