:root{
  color-scheme: light;
  --paper:#F7F4EE; --surface:#FFFFFF; --line:#DDD5C6;
  --stone-200:#E7E1D4; --stone-400:#B9AF9E; --stone-600:#6E675C;
  --ink:#152B33; --ink-soft:#3A4E56;
  --gl-300:#7CC5D6; --gl-500:#0E8CA8; --gl-600:#0B6F86; --gl-700:#0A5A6E;
  --coral-500:#D64530; --coral-600:#C03A26; --coral-700:#A83220;
  --meadow:#55703F; --sky:#1F6BA8;
  --sans:"Inter Tight","Archivo","Helvetica Neue",Helvetica,Arial,sans-serif;
}
html{scroll-behavior:smooth}
body{margin:0; background:var(--paper); font-family:var(--sans); color:var(--ink);
     -webkit-font-smoothing:antialiased}
img{max-width:100%}

/* ── site nav ──────────────────────────────── */
.nav{position:sticky; top:0; z-index:20; display:flex; align-items:center; gap:24px;
     padding:14px 30px; background:color-mix(in srgb, var(--paper) 92%, transparent);
     backdrop-filter:blur(8px); border-bottom:1px solid var(--line)}
.brand{display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:-.01em;
       color:var(--ink); text-decoration:none; font-size:16px}
.brand .mark{width:26px; height:26px; border-radius:50%; object-fit:cover; display:block;
     box-shadow:0 0 0 2px var(--gl-300)}
.nav .nl{font-size:14.5px; font-weight:600; color:var(--ink-soft); text-decoration:none;
       padding:4px 0; border-bottom:2px solid transparent; cursor:pointer}
.nav .nl:hover{color:var(--ink)}
.nav .nl.active{color:var(--ink); border-bottom-color:var(--coral-600)}
.nav .cta{margin-left:auto}

.btn{display:inline-block; border:0; cursor:pointer; font-family:var(--sans);
     font-weight:700; font-size:15.5px; letter-spacing:.01em; border-radius:10px;
     padding:13px 26px; text-decoration:none}
.btn-buy{background:var(--coral-600); color:#fff; box-shadow:0 2px 8px rgba(21,43,51,.14)}
.btn-buy:hover{background:var(--coral-700)}
.btn-ghost{background:transparent; color:var(--gl-700); border:1.5px solid var(--gl-600);
           box-shadow:none}
.btn-ghost:hover{background:rgba(14,140,168,.07)}

main{background:var(--paper)}
.sec{max-width:1020px; margin:0 auto; padding:68px 30px}
.eyebrow{font-size:12.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
         color:var(--gl-600); margin:0 0 14px}
h1,h2,h3{margin:0; letter-spacing:-.02em; text-wrap:balance}
h2{font-size:clamp(26px,3.4vw,34px); font-weight:800}
p{line-height:1.62}
.alt{background:var(--surface); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.alt + .alt{border-top:0}

/* ── hero ──────────────────────────────────── */
.hero{position:relative; overflow:hidden; border-bottom:1px solid var(--line)}
.hero-bg{position:absolute; inset:0; background-image:url("assets/01-hero-tlo.jpg");
         background-size:cover; background-position:50% 38%}
.hero-bg::after{content:""; position:absolute; inset:0;
    background:linear-gradient(96deg, var(--paper) 34%, color-mix(in srgb, var(--paper) 60%, transparent) 58%, color-mix(in srgb, var(--paper) 0%, transparent) 80%),
               linear-gradient(0deg, var(--paper) 2%, transparent 26%)}
.hero-in{position:relative; max-width:1020px; margin:0 auto; padding:80px 30px 88px;
         display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:36px; align-items:center}
.hero h1{font-size:clamp(32px,4.6vw,50px); font-weight:800; line-height:1.08}
.hero .sub{font-size:clamp(16px,1.8vw,18.5px); color:var(--ink-soft); max-width:32em; margin:20px 0 26px}
.hero-cta{display:flex; gap:14px; flex-wrap:wrap; align-items:center}
.chips{display:flex; flex-wrap:wrap; gap:10px; margin-top:24px}
.chip{background:var(--surface); border:1px solid var(--line); border-radius:999px;
      padding:7px 14px; font-size:13px; font-weight:600; color:var(--ink-soft)}
.chip b{color:var(--gl-700)}

.stack{position:relative; justify-self:end; width:100%; max-width:400px;
       height:auto; display:flex; justify-content:center}
.scard{background:var(--surface); padding:8px 8px 9px; border-radius:10px;
       box-shadow:0 18px 44px rgba(21,43,51,.24); border-top:3px solid var(--sacc,var(--gl-500));
       width:min(100%,300px); transform:rotate(-2deg)}
.scard img{display:block; border-radius:6px; width:100%}
.scard .t{font-size:10px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
          color:var(--sacc,var(--gl-600)); padding:6px 2px 1px}

/* ── sklep ─────────────────────────────────── */
.plist{display:grid; grid-template-columns:1fr; gap:18px; margin-top:34px}
.pcard{background:var(--surface); border:1px solid var(--line); border-radius:14px;
       border-top:3px solid var(--pacc,var(--gl-500)); overflow:hidden}
.pcard.h{display:grid; grid-template-columns:180px minmax(0,1fr); gap:26px; align-items:center; padding:26px}
.pcard.h img{width:100%; border-radius:8px; box-shadow:0 12px 28px rgba(21,43,51,.16)}
.pcard h3{font-size:18px; font-weight:800; letter-spacing:-.01em}
.pcard .pd{font-size:14px; color:var(--ink-soft); line-height:1.55; margin:8px 0 16px}
.ptag{display:inline-block; font-size:11px; font-weight:800; letter-spacing:.1em;
       text-transform:uppercase; color:var(--pacc,var(--gl-600)); margin-bottom:8px}
.prow{display:flex; align-items:center; gap:16px; flex-wrap:wrap}
.price{font-size:21px; font-weight:800; font-variant-numeric:tabular-nums}
.price small{font-size:12px; font-weight:600; color:var(--stone-600); display:block}

/* ── zawartość ebooka ──────────────────────── */
.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:16px; margin-top:34px}
.card{background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:22px}
.alt .card{background:var(--paper)}
.card h3{font-size:16.5px; font-weight:750; margin-bottom:8px}
.card p{font-size:14px; color:var(--ink-soft); margin:0; line-height:1.55}
.card .k{display:inline-block; font-size:11.5px; font-weight:800; letter-spacing:.1em;
         color:var(--gl-600); margin-bottom:10px}
.metric{background:var(--surface); border:1px solid var(--line); border-radius:14px;
        padding:26px 28px; margin-top:34px; display:grid;
        grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:18px}
.alt .metric{background:var(--paper)}
.metric div{border-left:3px solid var(--gl-300); padding-left:14px}
.metric .lab{font-size:11.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
             color:var(--stone-600)}
.metric .val{font-size:16px; font-weight:750; margin-top:4px; font-variant-numeric:tabular-nums}

/* ── galeria ───────────────────────────────── */
.gal{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px; margin-top:34px}
.gal figure{margin:0; border-radius:10px; overflow:hidden; box-shadow:0 10px 26px rgba(21,43,51,.14);
            background:var(--surface)}
.gal img{width:100%; height:200px; object-fit:cover; display:block}
.gal figcaption{font-size:12.5px; color:var(--stone-600); padding:8px 10px 10px}

/* ── o autorce ─────────────────────────────── */
.about-grid{display:grid; grid-template-columns:280px minmax(0,1fr); gap:40px; align-items:center}
.about-grid img{width:100%; border-radius:12px; box-shadow:0 18px 40px rgba(21,43,51,.18)}
.link{color:var(--gl-700); font-weight:700; text-decoration:none; border-bottom:2px solid var(--gl-300)}
.link:hover{border-bottom-color:var(--gl-600)}

/* ── faq ───────────────────────────────────── */
details{background:var(--paper); border:1px solid var(--line); border-radius:10px;
        padding:0 20px; margin-top:10px}
summary{cursor:pointer; font-weight:700; font-size:15.5px; padding:16px 0; list-style:none;
        display:flex; justify-content:space-between; align-items:center; gap:14px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+"; font-size:20px; color:var(--gl-600); font-weight:600; flex:0 0 auto}
details[open] summary::after{content:"-"}
details p{margin:0 0 16px; font-size:14.5px; color:var(--ink-soft)}
details a{color:var(--gl-700)}

/* ── subpages ──────────────────────────────── */
.sub-head{padding:64px 30px 8px}
.prose{max-width:760px}
.prose p{color:var(--ink-soft); font-size:15.5px}
.prose h3{font-size:17px; margin:28px 0 8px}
.prose a{color:var(--gl-700)}

/* ── contact form ──────────────────────────── */
.form{background:var(--surface); border:1px solid var(--line); border-radius:14px;
      padding:30px; max-width:560px}
.form label.f{display:block; font-size:13px; font-weight:700; margin:16px 0 6px}
.form label.f:first-child{margin-top:0}
.form input[type=text],.form input[type=email],.form textarea{
      width:100%; box-sizing:border-box; font-family:var(--sans); font-size:15px;
      border:1px solid var(--line); border-radius:8px; padding:11px 13px; background:#FDFCF9; color:var(--ink)}
.form textarea{min-height:110px; resize:vertical}
.form input:focus,.form textarea:focus{outline:2px solid var(--gl-500); outline-offset:1px; border-color:var(--gl-500)}
.consent{display:flex; gap:10px; align-items:flex-start; font-size:13px; color:var(--ink-soft); margin:18px 0}
.consent a{color:var(--gl-700); font-weight:700; text-decoration:none}
.form .btn{border:0}

/* ── footer ────────────────────────────────── */
footer{background:var(--ink); color:#B9C8CE; font-size:13.5px}
.foot-in{max-width:1020px; margin:0 auto; padding:38px 30px; display:flex; flex-wrap:wrap;
         gap:14px 34px; align-items:center}
footer a{color:#DDE8EB; text-decoration:none}
footer a:hover{color:#fff; text-decoration:underline}
.foot-in .spacer{flex:1}

/* ── cookie banner ─────────────────────────── */
.cookie{position:fixed; left:16px; right:16px; bottom:16px; z-index:100; background:var(--ink);
        color:#DDE8EB; border-radius:14px; padding:16px 20px; display:flex; gap:16px;
        align-items:center; flex-wrap:wrap; box-shadow:0 20px 50px rgba(0,0,0,.4);
        max-width:720px; margin:0 auto}
.cookie p{margin:0; font-size:13px; flex:1 1 260px; line-height:1.5}
.cookie a{color:#7CC5D6}
.cookie button{border:0; border-radius:8px; padding:10px 18px; font-weight:700;
               cursor:pointer; font-family:var(--sans); font-size:13.5px}
.c-acc{background:var(--coral-600); color:#fff}
.c-acc:hover{background:var(--coral-700)}
.c-dec{background:transparent; color:#B9C8CE; border:1px solid rgba(255,255,255,.3)}

/* ── responsive ────────────────────────────── */
@media (max-width:840px){
  .hero-in{grid-template-columns:1fr; padding-top:56px}
  .stack{justify-self:start; max-width:340px}
  .about-grid{grid-template-columns:1fr}
  .about-grid img{max-width:320px}
  .nav{gap:16px; padding:12px 18px; flex-wrap:wrap}
  .nav .cta{margin-left:0}
  .sec{padding:52px 20px}
  .sub-head{padding:48px 20px 8px}
}
@media (max-width:560px){
  .pcard.h{grid-template-columns:1fr}
  .pcard.h img{max-width:200px}
}