/* chrome.css — wspolne elementy serwisu verbot.pl (motyw 2026-09).
   Fonty lezace u nas, naglowek, menu mobilne, stopka i kilka poprawek
   dla artboardow z design canvas. Generowane strony wstawiaja go przez theme.py. */

/* --- fonty (hostowane lokalnie, bez Google Fonts) --------------------------- */
@font-face{font-family:Geist;font-style:normal;font-weight:100 900;font-display:swap;src:url(/fonts/geist-latin-ext-wght-normal.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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Geist;font-style:normal;font-weight:100 900;font-display:swap;src:url(/fonts/geist-latin-wght-normal.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}
@font-face{font-family:"Geist Mono";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/geist-mono-latin-ext-400-normal.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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Geist Mono";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/geist-mono-latin-400-normal.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}
@font-face{font-family:"Geist Mono";font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/geist-mono-latin-ext-500-normal.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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Geist Mono";font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/geist-mono-latin-500-normal.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}
@font-face{font-family:"Instrument Serif";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/instrument-serif-latin-ext-400-normal.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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Instrument Serif";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/instrument-serif-latin-400-normal.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}
@font-face{font-family:"Instrument Serif";font-style:italic;font-weight:400;font-display:swap;src:url(/fonts/instrument-serif-latin-ext-400-italic.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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Instrument Serif";font-style:italic;font-weight:400;font-display:swap;src:url(/fonts/instrument-serif-latin-400-italic.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}

:root{
  --vbx-bg:#EDECE9; --vbx-bg2:#E4E2DC; --vbx-card:#FAFAF8;
  --vbx-ink:#0C1A1D; --vbx-body:#33403F; --vbx-ink2:#56615F; --vbx-ink3:#7A8583;
  --vbx-teal:#0B4A55; --vbx-teal2:#0E5C68; --vbx-night:#061619;
  --vbx-mint:#A6FFED; --vbx-mint2:#3FD9BE; --vbx-gold:#C9A25A; --vbx-gold2:#E6CB8E;
  --vbx-hair:rgba(12,26,29,.08);
  --vbx-ease:cubic-bezier(.2,.75,.1,1);
}

/* artboardy zakladaja wysokosc 100% na #dc-root — strona z naglowkiem i stopka
   poza artboardem musi rosnac razem z trescia, inaczej stopka wjezdza na tresc */
.vbx #dc-root,.vbx #dc-root>.sc-host{height:auto!important}
.vbx{background:var(--vbx-bg)}
/* poswiata jak w hero strony glownej: mieta z prawej, zloto z lewej */
.vbx-page{background:radial-gradient(900px 560px at 88% -140px,rgba(166,255,237,.34),transparent 70%),
  radial-gradient(700px 460px at -8% 6%,rgba(201,162,90,.12),transparent 70%),var(--vbx-bg);background-repeat:no-repeat}
.vbx ::selection{background:var(--vbx-mint);color:var(--vbx-night)}
/* !important: przyciski z `all:unset` w stylu inline gubia obwodke fokusu */
.vbx :focus-visible{outline:2px solid var(--vbx-teal)!important;outline-offset:3px!important}

/* akcenty z nowej strony glownej, uzywane przez theme.py w starszych artboardach */
.vbx-serif{font-family:"Instrument Serif",Georgia,serif;font-style:italic;font-weight:400;letter-spacing:-.01em;color:var(--vbx-teal)}
.vbx-eyebrow{display:inline-flex;align-items:center;gap:10px}
.vbx-eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--vbx-gold);flex:none}
h1 .vbx-serif,h2 .vbx-serif{font-size:1.06em;line-height:.9}

/* --- pasek postepu przewijania -------------------------------------------- */
.vbx-prog{position:fixed;top:0;left:0;right:0;height:2px;z-index:1002;pointer-events:none;
  background:linear-gradient(90deg,#0B4A55,#3FD9BE,#C9A25A);transform-origin:0 50%;transform:scaleX(0)}

.vbx-skip{position:fixed;left:16px;top:-60px;z-index:1003;padding:10px 16px;border-radius:999px;background:var(--vbx-ink);color:#fff;font:500 14px/1 Geist,system-ui,sans-serif;text-decoration:none;transition:top .2s}
.vbx-skip:focus{top:12px}

/* --- naglowek ------------------------------------------------------------- */
.vbx-top{position:fixed;top:14px;left:0;right:0;z-index:1001;display:flex;flex-direction:column;align-items:center;gap:8px;padding:0 16px;pointer-events:none;font-family:Geist,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
.vbx-top *{box-sizing:border-box}
.vbx-nav{pointer-events:auto;width:100%;max-width:1240px;display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:9px 9px 9px 18px;border-radius:999px;background:rgba(246,245,242,.74);
  -webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);
  border:1px solid rgba(12,26,29,.08);box-shadow:0 10px 40px -20px rgba(6,22,25,.35);transition:box-shadow .3s,background .3s}
.vbx-top.is-scrolled .vbx-nav{background:rgba(246,245,242,.9);box-shadow:0 14px 44px -18px rgba(6,22,25,.42)}
.vbx-logo{display:flex;align-items:center;gap:10px;color:var(--vbx-ink)!important;font-weight:600;font-size:20px;letter-spacing:-.035em;text-decoration:none;flex:none}
.vbx-mark{position:relative;width:30px;height:30px;border-radius:9px;background:var(--vbx-teal);display:grid;place-items:center;color:#fff;font-size:16px;font-weight:600;letter-spacing:0;flex:none}
.vbx-mark i{position:absolute;top:5px;right:4px;width:7px;height:7px;border-radius:50%;border:1.5px solid var(--vbx-gold)}
.vbx-links{display:flex;align-items:center;gap:4px;font-size:14px}
.vbx-links a{position:relative;padding:8px 12px;border-radius:999px;color:#33403F;text-decoration:none;transition:color .2s,background .2s}
.vbx-links a:hover{color:var(--vbx-teal);background:rgba(11,74,85,.06)}
.vbx-links a[aria-current="page"]{color:var(--vbx-ink);font-weight:500}
.vbx-links a[aria-current="page"]::after{content:"";position:absolute;left:50%;bottom:2px;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:var(--vbx-gold)}
.vbx-act{display:flex;align-items:center;gap:6px;flex:none}
.vbx-login{padding:10px 14px;font-size:14px;color:var(--vbx-ink)!important;text-decoration:none;border-radius:999px;transition:background .2s}
.vbx-login:hover{background:rgba(11,74,85,.06)}
.vbx-cta{display:inline-flex;align-items:center;gap:8px;padding:11px 18px;border-radius:999px;background:var(--vbx-ink);color:#fff!important;font-size:14px;font-weight:500;text-decoration:none;white-space:nowrap;transition:background .3s}
.vbx-cta:hover{background:var(--vbx-teal)}
.vbx-cta b{color:var(--vbx-mint);font-weight:400}
.vbx-burger{display:none;width:42px;height:42px;border-radius:50%;border:1px solid rgba(12,26,29,.12);background:#fff;cursor:pointer;place-items:center;align-content:center;gap:5px;padding:0}
.vbx-burger i{display:block;width:16px;height:1.5px;border-radius:2px;background:var(--vbx-ink);transition:transform .3s var(--vbx-ease)}
.vbx-burger[aria-expanded="true"] i:first-child{transform:translateY(3.25px) rotate(45deg)}
.vbx-burger[aria-expanded="true"] i:last-child{transform:translateY(-3.25px) rotate(-45deg)}

.vbx-menu{pointer-events:auto;width:100%;max-width:1240px;border-radius:28px;padding:10px;background:rgba(250,250,248,.97);
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border:1px solid rgba(12,26,29,.08);box-shadow:0 30px 70px -30px rgba(6,22,25,.5);
  animation:vbxDrop .35s var(--vbx-ease) both}
.vbx-menu[hidden]{display:none}
.vbx-menu-links{display:flex;flex-direction:column}
.vbx-menu-links a{display:flex;align-items:center;justify-content:space-between;padding:15px 16px;border-radius:18px;color:var(--vbx-ink);font-size:21px;font-weight:500;letter-spacing:-.02em;text-decoration:none}
.vbx-menu-links a+a{border-top:1px solid rgba(12,26,29,.06)}
.vbx-menu-links a:hover,.vbx-menu-links a[aria-current="page"]{background:rgba(11,74,85,.06)}
.vbx-menu-links a i{font-style:normal;color:var(--vbx-gold)}
.vbx-menu-act{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:10px 6px 6px}
.vbx-menu-act a{display:flex;align-items:center;justify-content:center;gap:6px;padding:15px 12px;border-radius:999px;font-size:14.5px;font-weight:500;text-decoration:none;white-space:nowrap}
.vbx-menu-login{border:1px solid rgba(12,26,29,.16);color:var(--vbx-ink)!important}
.vbx-menu-cta{background:var(--vbx-teal);color:#fff!important}
@keyframes vbxDrop{from{opacity:0;transform:translateY(-8px) scale(.98)}to{opacity:1;transform:none}}

.vbx-page #dc-root{padding-top:92px}
/* stare artboardy mialy wlasny, przyklejony naglowek — kotwice przewijaja sie pod nowy */
.vbx [id]{scroll-margin-top:110px}

@media (max-width:1060px){.vbx-links{display:none}.vbx-burger{display:grid}}
@media (min-width:1061px){.vbx-menu{display:none!important}}
@media (max-width:560px){
  .vbx-top{top:10px;padding:0 10px}
  .vbx-nav{padding:7px 7px 7px 14px;gap:10px}
  .vbx-act .vbx-login{display:none}
  .vbx-cta{padding:10px 14px;font-size:13.5px}
  .vbx-page #dc-root{padding-top:78px}
}
@media (max-width:370px){.vbx-cta b{display:none}.vbx-logo{font-size:18px}}

/* --- stopka --------------------------------------------------------------- */
.vbx-foot{background:var(--vbx-bg);color:var(--vbx-ink);font-family:Geist,system-ui,sans-serif;-webkit-font-smoothing:antialiased;position:relative}
.vbx-foot *{box-sizing:border-box}
.vbx-foot-in{max-width:1320px;margin:0 auto;padding:80px 32px 32px;display:flex;flex-direction:column;gap:56px}
.vbx-foot-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:40px}
.vbx-foot-brand{display:flex;flex-direction:column;gap:16px}
.vbx-foot-brand p{margin:0;font-size:14px;line-height:1.6;color:var(--vbx-ink2);max-width:240px}
.vbx-foot nav{display:flex;flex-direction:column;gap:12px;font-size:14.5px}
.vbx-foot h2{margin:0 0 4px;font-family:"Geist Mono",ui-monospace,monospace;font-size:11.5px;font-weight:400;letter-spacing:.12em;text-transform:uppercase;color:var(--vbx-ink2)}
.vbx-foot nav a,.vbx-linkbtn{color:var(--vbx-ink);text-decoration:none;transition:color .2s}
.vbx-foot nav a:hover,.vbx-linkbtn:hover{color:var(--vbx-teal)}
.vbx-linkbtn{font:inherit;background:none;border:0;padding:0;text-align:left;cursor:pointer}
.vbx-word{font-size:clamp(90px,21vw,330px);font-weight:600;letter-spacing:-.07em;line-height:.8;color:var(--vbx-teal);text-align:center;user-select:none;overflow:hidden;padding-bottom:.04em}
.vbx-word span{color:var(--vbx-gold)}
.vbx-foot-bar{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px 24px;font-size:13px;color:var(--vbx-ink2);border-top:1px solid rgba(12,26,29,.1);padding-top:24px}
.vbx-status{display:inline-flex;align-items:center;gap:8px;color:var(--vbx-ink2)!important;text-decoration:none}
.vbx-status i{width:7px;height:7px;border-radius:50%;background:#9AA3A1}
.vbx-status.is-ok i{background:var(--vbx-mint2);box-shadow:0 0 8px var(--vbx-mint2)}
.vbx-status.is-bad i{background:#C2462F;box-shadow:0 0 8px rgba(194,70,47,.6)}
@media (max-width:560px){.vbx-foot-in{padding:56px 20px 28px;gap:40px}.vbx-foot-cols{grid-template-columns:1fr 1fr;gap:32px 20px}.vbx-foot-brand{grid-column:1/-1}}

/* --- panel na telefonie: boczne menu jako szuflada ----------------------- */
.vbx-drawer-btn,.vbx-drawer-bg{display:none}
@media (max-width:900px){
  .vbx-side{position:fixed!important;left:0;top:0;bottom:0;z-index:950;height:100%!important;width:min(300px,86vw)!important;
    transform:translateX(-105%);transition:transform .32s var(--vbx-ease);box-shadow:30px 0 60px -30px rgba(6,22,25,.45)}
  .vbx-drawer-open .vbx-side{transform:none}
  .vbx-drawer-bg{display:block;position:fixed;inset:0;z-index:940;background:rgba(6,22,25,.38);opacity:0;pointer-events:none;transition:opacity .3s}
  .vbx-drawer-open .vbx-drawer-bg{opacity:1;pointer-events:auto}
  .vbx-drawer-btn{display:inline-flex;align-items:center;gap:9px;position:fixed;left:14px;bottom:14px;z-index:930;padding:12px 18px 12px 14px;
    border:0;border-radius:999px;background:var(--vbx-ink);color:#fff;font:500 14px/1 Geist,system-ui,sans-serif;cursor:pointer;
    box-shadow:0 18px 40px -14px rgba(6,22,25,.6)}
  .vbx-drawer-btn i{display:grid;gap:3px}
  .vbx-drawer-btn i::before,.vbx-drawer-btn i::after{content:"";width:14px;height:1.5px;border-radius:2px;background:var(--vbx-mint);display:block}
  .vbx-drawer-btn b{font-weight:500}
  .vbx-panel main{padding-bottom:96px!important}
}
@media (prefers-reduced-motion:reduce){.vbx-side{transition:none}}

/* /konto na telefonie: najpierw formularz, potem panel marki (ktos przyszedl sie zalogowac) */
@media (max-width:820px){.vbx-konto aside{order:2}.vbx-konto main{order:1}}

@media (prefers-reduced-motion:reduce){.vbx-menu{animation:none}.vbx-prog{display:none}}