/* =========================================================
   Global: zmienne, typografia, reset formularzy
   ========================================================= */
:root{
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", "Courier New", monospace;

  --bg:#f6f8fc;
  --surface:#ffffff;
  --text:#0f172a;
  --muted:#64748b;
  --line:#e5e7eb;
  --accent:#3b82f6;
  --accent-2:#6366f1;
  --ok:#16a34a; --warn:#f59e0b; --err:#ef4444;

  --radius:14px;
  --shadow:0 10px 28px rgba(15,23,42,.08);

  /* wysokość nagłówka */
  --header-h: 64px;      /* mobile */
  --header-h-lg: 72px;   /* desktop */
}

/* Typografia bazowa */
html{ font-family:var(--font-sans); -webkit-text-size-adjust:100%; text-size-adjust:100%; font-size:16px; }
*,*::before,*::after{ box-sizing:border-box }
html,body{ height:100% }
body{
  margin:0; color:var(--text); line-height:1.5;
  background:
    radial-gradient(1000px 600px at 95% -10%, rgba(99,102,241,.10), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, rgba(59,130,246,.10), transparent 60%),
    var(--bg);
  padding-top: var(--header-h);  /* odsuwamy treść pod fixed headerem */
}
@media (min-width:900px){ body{ padding-top: var(--header-h-lg); } }

button,input,select,textarea{ font:inherit; color:inherit; letter-spacing:inherit }
h1,h2,h3,h4,h5,h6{ margin:0; font-family:inherit; font-weight:700; letter-spacing:-0.01em; line-height:1.2 }
pre,code,kbd,samp,.code{ font-family:var(--font-mono) }

/* Delikatna siatka w tle */
.bg-grid{
  position:fixed; inset:0; pointer-events:none; opacity:.14;
  background:
    linear-gradient(to right, rgba(15,23,42,.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(15,23,42,.06) 1px, transparent 1px);
  background-size:28px 28px;
  mask-image: radial-gradient(1000px 1000px at 50% 30%, #000 45%, transparent 75%);
}

/* =========================================================
   HEADER (fixed) + brand + hamburger
   ========================================================= */
.header{
  position:fixed; top:0; left:0; right:0; z-index:1200;
  backdrop-filter:blur(10px);
  background:linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,.70));
  border-bottom:1px solid var(--line);
}
.header-inner{
  max-width:1200px; margin:0 auto; padding:12px 18px;
  display:flex; align-items:center; gap:12px;
}
.brand{
  display:inline-flex; align-items:center; gap:10px; min-width:0;
  color:inherit; text-decoration:none;
}
.brand svg{ color:var(--accent) }
.brand .name{ font-size:18px; font-weight:700 }
.brand .avatar{
  width:44px; height:44px; border-radius:50%; object-fit:cover;
  border:2px solid var(--line); box-shadow:0 1px 2px rgba(0,0,0,.06);
}
@media (min-width:900px){ .brand .avatar{ width:48px; height:48px } }
.brand .byline{ display:inline-flex; align-items:center; gap:6px; white-space:nowrap; font-size:14px; color:var(--muted) }
.brand .byline a{ color:var(--accent); font-weight:600; text-decoration:none }
.brand .byline a:hover{ text-decoration:underline }

/* Nawigacja (desktop) */
.nav{
  margin-left:auto;
  display:flex; align-items:center; gap:8px;
  z-index:1201;
}
.link{ padding:8px 12px; border-radius:10px; color:var(--muted); text-decoration:none }
.link:hover{ background:#eff3fb; color:var(--text) }

/* Hamburger (mobile) */
.nav-toggle{
  display:none; position:relative; z-index:1202;
  width:40px; height:40px; border:1px solid var(--line);
  border-radius:10px; background:#fff; cursor:pointer;
  align-items:center; justify-content:center; gap:4px;
}
.nav-toggle span{ display:block; width:20px; height:2px; background:#0f172a; transition:transform .2s, opacity .2s }
.nav-toggle.open span:nth-child(1){ transform:translateY(6px) rotate(45deg) }
.nav-toggle.open span:nth-child(2){ opacity:0 }
.nav-toggle.open span:nth-child(3){ transform:translateY(-6px) rotate(-45deg) }

/* Mobile: pokaż hamburgera i zwijaj menu */
@media (max-width:900px){
  .nav-toggle{ display:inline-flex }
  .nav{
    position:absolute; top:var(--header-h); right:18px;
    display:none; flex-direction:column; align-items:stretch; gap:8px;
    background:#fff; border:1px solid var(--line); border-radius:12px;
    padding:10px; box-shadow:var(--shadow);
  }
  .nav.open{ display:flex }
  .nav .link{ padding:10px 12px }
  .nav .btn{ width:100%; text-align:center }
}

/* HEADER — kompaktowe przyciski, aby mieściły się w jednej linii */
.header .btn {
  padding: 8px 12px;        /* było 12px 16px */
  font-size: 16px;          /* było ~16px */
  white-space: nowrap;      /* nie łam tekstu */
}
.header .link {
  padding: 6px 10px;
  font-size: 14px;
  white-space: nowrap;
}
.header .nav {
  gap: 6px;                 /* było 8px */
}


/* =========================================================
   Layout & cards
   ========================================================= */
.container{ max-width:1200px; margin:0 auto; padding:24px 18px 60px }
.hero{ padding:36px 0 8px }
.kicker{ font-size:12px; letter-spacing:.8px; color:var(--muted); text-transform:uppercase }
.h1{ font-size:40px; line-height:1.12; margin:12px 0 10px }
.grad{ background:linear-gradient(90deg,var(--accent),var(--accent-2)); -webkit-background-clip:text; background-clip:text; color:transparent }
/* Większy lead w hero */
.lead{
  color:#334155;
  font-size: 15px;
  line-height: 1.5;
  margin: 0 0 8px;
}

@media (min-width: 900px){
  .lead{
    font-size: 15px;   /* wygodna wielkość na desktopie */
  }
}

.pill{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 12px; background:#f1f5f9; border:1px solid var(--line);
  border-radius:999px; color:#0f172a;
}

.card{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--shadow);
  padding:18px; margin:16px 0;
}
.card-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px }
.card h2{ font-size:18px; margin:0 }
.sub{ color:var(--muted); font-size:13px }
.note{ font-size:12px; color:var(--muted) }

/* Inputs & buttons */
.input,.file{
  width:100%; background:#f8fafc; color:var(--text);
  border:1px solid var(--line); border-radius:12px; padding:12px 14px;
  font-size:15px; line-height:1.45; outline:none;
}
.input:focus{ border-color:#cbd5e1; box-shadow:0 0 0 4px #3b82f61a }
.input::placeholder{ color:#94a3b8 }

.btn{ appearance:none; border:none; cursor:pointer; font-weight:600; padding:12px 16px; border-radius:12px; letter-spacing:.2px }
.btn-primary{ color:#fff; background:linear-gradient(90deg,var(--accent),var(--accent-2)) }
.btn-primary:hover{ filter:brightness(1.05) }
.btn-secondary{ background:#fff; color:var(--text); border:1px solid var(--line) }
.btn-secondary:hover{ background:#f3f6fb }
.btn-ghost{ background:transparent; color:var(--text); border:1px solid var(--line) }
.btn-ghost:hover{ background:#f3f6fb }
.btn-ico{ margin-right:8px }

/* Code blocks */
.code{
  background:#f1f5f9; color:#0f172a; border:1px solid #e2e8f0; border-radius:12px;
  padding:14px; overflow:auto; min-height:120px;
}

/* Table */
.table-scroll{ overflow:auto; border-radius:12px; border:1px solid var(--line) }
table{ width:100%; border-collapse:collapse; font-size:14px; background:#fff }
thead th{ position:sticky; top:0; background:#f8fafc; color:#334155; text-align:left; font-weight:600; padding:10px; border-bottom:1px solid #e2e8f0 }
tbody td{ padding:10px; border-bottom:1px solid #eef2f7; color:#0f172a }
tbody tr:hover{ background:#f9fbff }
.empty{ color:var(--muted); padding:8px 2px }

/* Utilities */
.grid-2{ display:grid; gap:18px }
@media (min-width:1000px){ .grid-2{ grid-template-columns:1.15fr .85fr } }
.mt-8{ margin-top:8px } .mt-12{ margin-top:12px } .mt-16{ margin-top:16px } .mt-20{ margin-top:20px }
.right{ margin-left:auto }

/* =========================================================
   Sekcje: Jak to działa / Dlaczego
   ========================================================= */
.section-how, .section-why{ padding:18px; border-radius:var(--radius) }
.section-how .card-head h2, .section-why .card-head h2{ font-size:18px }

/* Instrukcja: akapit +2px, lista 15px, code bez monospace */
.section-how .sub{ font-size:16px; line-height:1.75; color:#334155 }
.section-how ul, .section-how li{ font-size:15px; line-height:1.75 }
.section-how ul{ margin:8px 0 0 18px }
.section-how li code{
  font-family:inherit; font-size:15px;
  background:#f8fafc; border:1px solid var(--line); border-radius:6px; padding:2px 6px;
}

/* Numery kroków */
.step-num{
  width:44px; height:44px; border-radius:999px; display:grid; place-items:center;
  border:2px solid var(--accent-2); background:#fff; color:var(--text);
  font-weight:700; font-size:18px; box-shadow:0 2px 6px rgba(15,23,42,.06); margin-bottom:10px;
}

/* Gridy kart (3 → 2 → 1 kolumna) */
.grid-steps, .grid-features{
  display:grid; gap:16px; grid-template-columns:repeat(3, minmax(0,1fr));
}
@media (max-width:1024px){
  .grid-steps, .grid-features{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (max-width:640px){
  .grid-steps, .grid-features{ grid-template-columns:1fr; }
}
.grid-steps > .card, .grid-features > .card{
  min-width:0; display:flex; flex-direction:column; height:100%; margin:0; padding:16px;
}

/* PRE w panelach z kodem – łamanie linii na telefonach */
.pane-body pre{ white-space:pre-wrap; word-break:break-word }

/* Mniejsze paddingi kontenera na bardzo małych ekranach */
@media (max-width:640px){
  .container{ padding-left:14px; padding-right:14px }
}

/* =========================================================
   CTA
   ========================================================= */
.cta-block{
  padding:44px 32px; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:22px;
}
.section-cta{ margin:24px 0 }
.cta-block h3{ margin:0 }

/* =========================================================
   FOOTER
   ========================================================= */
.footer{ border-top:1px solid var(--line) }
.footer-inner{
  max-width:1200px; margin:0 auto; padding:18px;
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
}
.footer .sep{ margin:0 8px; color:var(--muted) }
.footer .warn{ white-space:nowrap }
@media (max-width:640px){
  .footer-inner{ gap:8px }
  .footer .warn{ white-space:normal }
}

/* =========================================================
   Responsywne drobnostki
   ========================================================= */
@media (max-width:720px){
  .h1{ font-size:34px }
  .container{ padding-bottom:48px }
}
/* Callout w hero: „jak zrobić schema.json” */
.info-callout{
  background:#f8fafc;
  border:1px solid var(--line);
  border-radius:12px;
  padding:14px 16px;
}

/* Hero: wyrównaj tekst w bloku instrukcji do wielkości akapitu lead */
.schema-hint .sub{
  font-size: 18px;      /* jak lead na mobile */
  line-height: 1.75;
  color: #334155;
  margin: 0 0 8px;
}

@media (min-width: 900px){
  .schema-hint .sub{
    font-size: 20px;    /* jak lead na desktopie */
  }
}

/* Hero: większa czcionka w calloucie "jak zrobić schema.json" */
.hero .info-callout p,
.hero .info-callout .sub{
  font-size: clamp(15px, 1.9vw, 16px);
  line-height: 1.5;
  color: #334155;
  margin: 0 0 8px;
}