/* VO Theme — baza wszystkich stron (system Glass Duo): zmienne .po, siatka, typografia, przyciski, karty, formularze.
   Kolory marki: tokeny w ns33.css i paleta z p17-virtual-office (inc/palette.php). */
.po{
  --bg:#F6F8FB; --ink:#0A1B3D; --surface:#FFFFFF; --acc:#2563FF; --acc-hover:#1D4FE0; --lime:#2563FF; --lime-hover:#1D4FE0;
  --text:#0A1B3D; --text-inv:#FFFFFF; --muted:#4A5878; --muted-inv:#E6EEFF; --steel:#6B7785;
  --border:rgba(10,27,61,.10); --border-inv:rgba(255,255,255,.26); --control:#7B8794; --warn:#FFF4D6;
  --ok:#0F6B45; --err:#B42318;
  --tint:#2563FF; --tint-ink:#FFFFFF;
  --r-control:10px; --r-card:16px; --r-hero:20px; --shadow:0 18px 40px -24px rgba(10,27,61,.24);
  --glass-w:rgba(255,255,255,.74);
  --glass-b:linear-gradient(155deg,rgba(255,255,255,.20) 0%,rgba(255,255,255,0) 32%),linear-gradient(135deg,rgba(37,90,235,.82),rgba(16,52,175,.90));
  container-type:inline-size; container-name:po;
  background-color:var(--bg);
  background-image:linear-gradient(rgba(10,27,61,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(10,27,61,.045) 1px,transparent 1px);
  background-size:80px 80px;
  color:var(--text);
  font-family:Onest, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}
/* blue-glass contexts flip the tint */
.po *{box-sizing:border-box}
.po-page{font-size:17px; line-height:27px; font-weight:400; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility}
.po img{max-width:100%; display:block}
.po p{margin:0}
.po h1,.po h2,.po h3,.po h4{margin:0; font-family:Onest, ui-sans-serif, system-ui, sans-serif; text-wrap:balance}
.po ul,.po ol{margin:0; padding:0; list-style:none}
:where(.po) a{color:inherit}
.po :focus-visible{outline:3px solid var(--acc); outline-offset:3px; border-radius:6px}
.sr-only{position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}
/* ---------- layout ---------- */
.wrap{max-width:1240px; margin:0 auto; padding-inline:var(--pad); width:100%}
.sec{padding-block:var(--sec-y)}
.sec-head{display:flex; flex-direction:column; max-width:820px}
/* ---------- type ---------- */
.eyebrow{font:600 13px/16px Onest, system-ui, sans-serif; letter-spacing:.06em; text-transform:uppercase; color:var(--muted)}
.h2{font-size:var(--fs-h2); line-height:var(--lh-h2); font-weight:var(--fw-h2); letter-spacing:var(--ls-h2)}
.h4{font-size:20px; line-height:26px; font-weight:700; letter-spacing:-.01em}
.hl{color:var(--acc)}
.bodyL{font-size:var(--fs-lead); line-height:var(--lh-lead)}
.small{font-size:15px; line-height:23px}
.muted{color:var(--muted)}
/* ---------- buttons ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:52px; padding:0 24px; border-radius:var(--r-control);
  font:600 16px/1.2 Onest, system-ui, sans-serif; text-decoration:none; border:1px solid transparent; cursor:pointer; text-align:center;
  transition:transform 160ms ease-out, background-color 160ms ease-out, border-color 160ms ease-out, filter 160ms ease-out}
.btn:hover{transform:translateY(-1px)}
.btn--lg{min-height:56px; padding:0 28px}
.btn--lime{background:var(--acc); color:#FFFFFF; box-shadow:0 10px 24px -12px color-mix(in srgb,var(--color-primary) 55%,transparent)}
.btn--lime:hover{background:var(--acc-hover)}
.btn--sec{background:rgba(255,255,255,.72); color:var(--ink); border-color:rgba(10,27,61,.16); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px)}
.btn--sec:hover{border-color:var(--ink)}
/* on blue glass: white buttons */
.btn--sm{min-height:44px; padding:0 18px; font-size:15px}
.btn--block{width:100%}
.btn[disabled]{background:#E4E8ED; color:#33414F; border-color:#CDD4DC; cursor:not-allowed; transform:none; box-shadow:none}
/* ---------- icons ---------- */
.ic{width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; flex:none}
/* ---------- nav (floating white glass bar) ---------- */
.nav{position:sticky; top:0; z-index:40; padding:14px 0 0; background:transparent; color:var(--ink)}
.nav-in{height:68px; display:flex; align-items:center; justify-content:space-between; gap:24px; max-width:1240px; padding:0 12px 0 24px!important; background:rgba(255,255,255,.78); -webkit-backdrop-filter:blur(16px) saturate(150%); backdrop-filter:blur(16px) saturate(150%); border:1px solid rgba(10,27,61,.10); box-shadow:inset 0 1px 0 #FFFFFF,0 16px 36px -22px rgba(10,27,61,.28); border-radius:16px}
.logo{font:800 21px/1 Onest, system-ui, sans-serif; letter-spacing:-.03em; text-decoration:none; color:var(--ink); display:inline-flex; align-items:center; gap:10px; min-height:44px}
.logo b{color:var(--acc); font-weight:800}
.nav-links{display:flex; align-items:center; gap:2px}
.nav-link{display:inline-flex; align-items:center; gap:6px; min-height:44px; padding:0 14px; border-radius:10px; font:500 15px/1 Onest, system-ui, sans-serif; color:var(--ink); text-decoration:none; background:none; border:0; cursor:pointer}
.nav-link:hover{background:rgba(10,27,61,.06)}
.nav-link .ic{width:16px; height:16px}
.drawer{margin-top:8px; padding:0}
.drawer > .wrap{background:rgba(255,255,255,.92); -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px); border:1px solid rgba(10,27,61,.10); border-radius:16px; padding:8px 20px 20px!important}
.drawer a{display:flex; align-items:center; justify-content:space-between; min-height:52px; border-bottom:1px solid rgba(10,27,61,.08); text-decoration:none; font:600 17px/1 Onest, system-ui, sans-serif; color:var(--ink)}
.drawer a.btn{border-bottom:0; color:#FFFFFF}
.only-t{display:none!important}
/* ---------- cards ---------- */
.card{background:var(--glass-w); -webkit-backdrop-filter:blur(14px) saturate(140%); backdrop-filter:blur(14px) saturate(140%); border:1px solid rgba(10,27,61,.10); box-shadow:inset 0 1px 0 #FFFFFF,0 18px 40px -24px rgba(10,27,61,.24); border-radius:var(--r-card); padding:32px; position:relative}
/* ---------- pricing ---------- */
.price{display:flex; align-items:baseline; gap:8px; flex-wrap:wrap}
/* ---------- accordion ---------- */
.acc{border-top:1px solid rgba(10,27,61,.10)}
.acc:last-child{border-bottom:1px solid rgba(10,27,61,.10)}
.acc summary{list-style:none; display:flex; align-items:center; justify-content:space-between; gap:24px; min-height:64px; padding:16px 0; cursor:pointer; font:600 19px/26px Onest, system-ui, sans-serif}
.acc summary::-webkit-details-marker{display:none}
.acc summary .ic{transition:transform 200ms ease}
.acc[open] summary .ic{transform:rotate(45deg)}
.acc-body{padding:0 64px 24px 0; color:var(--muted); max-width:78ch; animation:po-fade 200ms ease}
@keyframes po-fade{from{opacity:0; transform:translateY(-4px)} to{opacity:1; transform:none}}
/* ---------- forms ---------- */
.field{display:flex; flex-direction:column; gap:8px}
.field label{font:600 15px/20px Onest, system-ui, sans-serif; color:var(--ink)}
.input{min-height:52px; width:100%; border:1px solid var(--control); border-radius:var(--r-control); background:#fff; padding:0 16px; font:400 16px/1.4 Onest, system-ui, sans-serif; color:var(--ink); transition:border-color 160ms ease-out, box-shadow 160ms ease-out}
.input::placeholder{color:#6B7785}
.input:hover{border-color:var(--ink)}
.input:focus{outline:none; border-color:var(--acc); box-shadow:0 0 0 4px color-mix(in srgb,var(--color-primary) 22%,transparent)}
.input.is-error{border-color:var(--err); box-shadow:0 0 0 1px var(--err)}
.err{display:flex; gap:6px; align-items:flex-start; font-size:14px; line-height:20px; color:var(--err); font-weight:600}
.err .ic{width:18px; height:18px; margin-top:1px}
.check{display:flex; gap:12px; align-items:flex-start; font-size:14px; line-height:21px; color:var(--muted); cursor:pointer; min-height:44px}
.check input{width:22px; height:22px; margin:0; accent-color:var(--acc); flex:none}
.notice{display:flex; gap:12px; align-items:flex-start; padding:16px 18px; border-radius:var(--r-control); font-size:15px; line-height:22px}
.notice--err{background:#FDECEA; color:#7A1A12; border:1px solid #F3C1BB}
.notice--ok{background:#E8F5DF; color:#173F22; border:1px solid #C3E3AE}
/* ---------- accessibility fallbacks ---------- */
@media (prefers-reduced-motion: reduce){ .po *{animation:none!important; transition:none!important}  }
@media (prefers-reduced-transparency: reduce){
  .card,.nav-in{background:#FFFFFF!important; -webkit-backdrop-filter:none!important; backdrop-filter:none!important}
}
/* ---------- responsive (container queries) ---------- */
@container po (max-width:1023px){
  .wrap{padding-inline:24px}
  .nav-links{display:none!important}
  .only-t{display:inline-flex!important}
}
@container po (max-width:767px){
  .po-page{font-size:16px; line-height:25px}
  .wrap{padding-inline:20px}
  .nav{padding-top:8px}
  .nav-in{height:60px; margin-inline:12px; width:auto; padding:0 8px 0 16px!important}
  .only-d{display:none!important}
  .card{padding:22px}
  .acc-body{padding-right:0}
}