@font-face{font-family:"Manrope";font-style:normal;font-weight:400 800;font-display:swap;src:url("../fonts/manrope-latin-ext.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:"Manrope";font-style:normal;font-weight:400 800;font-display:swap;src:url("../fonts/manrope-latin.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:"Quicksand";font-style:normal;font-weight:500 700;font-display:swap;src:url("../fonts/quicksand-latin-ext.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:"Quicksand";font-style:normal;font-weight:500 700;font-display:swap;src:url("../fonts/quicksand-latin.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{
  --cream:#fbf8f1;--white:#fff;--sand:#f5f2ea;--line-row:#f1ede3;--line:#ede7d9;--line-strong:#c9c5b8;
  --text:#22302a;--text-2:#4a5449;--muted:#6f766e;
  --accent:#1c8399;--accent-text:#176b7d;--accent-soft:#e4f1f4;
  --gold:#d4a72c;--warn-bg:#fbefd2;--warn-fg:#9a6a0a;--ok-bg:#e8f0ea;
  --sans:Manrope,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --display:Quicksand,Manrope,system-ui,sans-serif;
  --mono:ui-monospace,Menlo,Consolas,monospace;
  --shadow-card:0 1px 2px rgba(60,50,20,.05);--shadow-auth:0 12px 40px rgba(60,50,20,.08);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--cream);color:var(--text);font-family:var(--sans);font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased;text-wrap:pretty}
h1,h2,h3{font-family:var(--display);font-weight:700;margin:0;line-height:1.15}
p,ul,ol{margin:0}
a{color:var(--accent-text);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
a:hover{color:var(--gold)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
::selection{background:var(--accent-soft)}
mark.placeholder{background:var(--warn-bg);color:var(--warn-fg);border-radius:6px;padding:1px 6px;font-weight:600;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.wrap{width:100%;max-width:1040px;margin:0 auto;padding:0 16px}
@media (min-width:768px){.wrap{padding:0 40px}}
.nav{display:flex;align-items:center;justify-content:space-between;gap:16px;height:64px}
@media (min-width:768px){.nav{height:76px}}
.brand{display:inline-flex;align-items:center;gap:10px;font-family:var(--display);font-weight:700;font-size:17px;color:var(--text);text-decoration:none}
.brand:hover{color:var(--text)}
.brand svg{display:block;flex:none;width:32px;height:32px}
.nav-link{font-weight:700;font-size:13.5px;color:var(--text-2);text-decoration:none;padding:9px 14px;border-radius:999px;border:1.5px solid var(--line);background:var(--white)}
.nav-link:hover{border-color:var(--accent);color:var(--text)}
.foot{border-top:1.5px solid var(--line);margin-top:56px;padding:28px 0 max(36px,env(safe-area-inset-bottom));display:grid;gap:10px;font-size:13.5px;color:var(--muted);line-height:1.6}
@media (min-width:768px){.foot{margin-top:80px;padding-top:32px}}
.foot a{font-weight:600}
.foot .policy{font-family:var(--display);font-weight:700;font-size:14.5px;color:var(--text);text-decoration:none}
.foot .policy:hover{color:var(--accent-text)}

/* --- strona główna --- */
.hero{position:relative;padding:36px 0 40px}
.hero::before{content:"";position:absolute;inset:-80px -16px 0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 0% 0%,var(--ok-bg) 0%,transparent 55%),radial-gradient(ellipse at 100% 60%,var(--warn-bg) 0%,transparent 45%)}
.tag{display:inline-flex;align-items:center;border-radius:999px;background:var(--accent-soft);color:var(--accent-text);font-weight:700;font-size:12px;padding:5px 11px;line-height:1.35}
.hero h1{font-size:44px;line-height:1.05;letter-spacing:-.01em;margin-top:16px;color:var(--text)}
.lead{margin-top:14px;max-width:560px;font-size:16px;line-height:1.55;color:var(--text-2)}
.lead code,.card code{font-family:var(--mono);font-size:.92em;font-weight:700;color:var(--accent-text);background:var(--white);border:1.5px solid var(--line);border-radius:7px;padding:1px 6px;white-space:nowrap}
@media (min-width:768px){.hero{padding:56px 0 64px}.hero::before{inset:-120px -40px 0}.hero h1{font-size:64px}.lead{font-size:18px;margin-top:18px}}
.cards{display:grid;gap:12px}
@media (min-width:768px){.cards{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}}
.card{background:var(--white);border-radius:18px;box-shadow:var(--shadow-card);padding:20px;display:flex;flex-direction:column;gap:12px}
@media (min-width:768px){.card{padding:24px 22px;border-radius:18px}}
.card .ico{display:grid;place-items:center;width:52px;height:52px;border-radius:16px;background:var(--accent-soft);color:var(--accent-text)}
.card h2{font-size:18px;color:var(--text)}
.card p{font-size:14.5px;line-height:1.55;color:var(--text-2)}
.card p+p{margin-top:6px}