/* =========================================================================
   ilovlo.pl - system wizualny strony
   Paleta aplikacji (teal + chlodne neutrale). Czcionka Inter (jak regulamin).
   Wlasne ikony liniowe (bez emoji).
   Jeden plik dla wszystkich stron - wgrywasz razem z .html.
   ========================================================================= */

:root {
  /* Paleta aplikacji ilovlo (AppColors): teal + chlodne neutrale. */
  --paper:#F5F8FA; --card:#FFFFFF; --ink:#1F2937; --ink-soft:#6B7280;
  --ink-faint:#9CA3AF; --rule:#E5E7EB; --rule-strong:#D1D5DB;
  --accent:#0E7490; --accent-dark:#164E63; --accent-tint:#E2F2FE;
  --measure:1040px; --measure-text:680px;

  --t-meta:12.5px; --t-small:16.5px; --t-body:18.5px; --t-lead:22px;
  --t-h3:21px; --t-h2:29px; --t-h1:50px;
}
* { box-sizing:border-box; }
html { -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; scroll-behavior:smooth; }
body {
  margin:0; background:var(--paper); color:var(--ink);
  font:400 var(--t-body)/1.72 'Inter', system-ui, sans-serif;
}
::selection { background:var(--accent); color:#fff; }
a { color:var(--accent); text-decoration:none; }
a:hover { color:var(--accent-dark); }

/* ---- Kicker / naglowki ---- */
.kicker { font:600 var(--t-meta)/1 'Inter', system-ui, sans-serif; letter-spacing:.22em;
  text-transform:uppercase; color:var(--accent); margin-bottom:16px; }
h1 { font-family:'Inter', system-ui, sans-serif; font-weight:600; font-size:var(--t-h1);
  line-height:1.06; letter-spacing:-.01em; margin:0 0 22px; }
h2 { font-family:'Inter', system-ui, sans-serif; font-weight:600; font-size:var(--t-h2);
  line-height:1.18; letter-spacing:-.01em; margin:0 0 16px; }
h3 { font-family:'Inter', system-ui, sans-serif; font-weight:600; font-size:var(--t-h3);
  line-height:1.25; margin:0 0 8px; }
.lead { font-size:var(--t-lead); line-height:1.55; color:var(--ink-soft); margin:0 0 30px; }
p { margin:0 0 20px; }
strong { font-weight:600; }
ul,ol { margin:0 0 22px; padding-left:20px; }
li { margin-bottom:10px; }

/* ---- Masthead ---- */
.masthead { border-bottom:1px solid var(--rule); background:var(--paper);
  position:sticky; top:0; z-index:10; }
.masthead-in { max-width:var(--measure); margin:0 auto; padding:20px 28px;
  display:flex; align-items:center; justify-content:space-between; gap:14px; }
.wordmark { display:flex; align-items:center; gap:9px; color:var(--accent); }
.wordmark .ring { width:26px; height:26px; border:4px solid currentColor;
  border-radius:50%; flex:0 0 auto; }
.wordmark b { font:600 24px 'Inter', system-ui, sans-serif; letter-spacing:-.02em; }
.masthead nav { display:flex; gap:26px; flex-wrap:wrap; }
.masthead nav a { font-size:var(--t-meta); letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-soft); font-weight:600; }
.masthead nav a:hover { color:var(--accent); }
.auth { display:flex; align-items:center; gap:16px; flex:0 0 auto; }
.auth .log { font-size:var(--t-meta); letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink); font-weight:600; }
.auth .log:hover { color:var(--accent); }
.auth .reg { font:600 13px 'Inter', system-ui, sans-serif; letter-spacing:.03em;
  background:var(--accent); color:#fff; padding:9px 17px; border-radius:0; }
.auth .reg:hover { background:var(--accent-dark); color:#fff; }

/* ---- Sekcje / uklad ---- */
main { max-width:var(--measure); margin:0 auto; padding:0 28px; }
main.text { max-width:var(--measure-text); padding-top:56px; padding-bottom:90px; }
.wrap { max-width:var(--measure); margin:0 auto; padding:0 28px; }
.rule { border:0; border-top:1px solid var(--rule); margin:0; }
.band { background:var(--card); border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); }

/* ---- Hero ---- */
.hero { max-width:var(--measure); margin:0 auto; padding:76px 28px 30px;
  display:grid; grid-template-columns:1.35fr .9fr; gap:56px; align-items:center; }
.hero .h-copy h1 { font-size:clamp(38px, 5.6vw, var(--t-h1)); }
.hero .h-side { border-left:1px solid var(--rule); padding-left:40px; }
.hero .h-side .num { font:600 15px 'Inter',system-ui,sans-serif; color:var(--accent);
  letter-spacing:.12em; }
.hero .h-side p { font-size:16.5px; color:var(--ink-soft); margin:6px 0 26px; }
@media (max-width:820px){
  .hero { grid-template-columns:1fr; padding-top:52px; gap:34px; }
  .hero .h-side { border-left:0; border-top:1px solid var(--rule); padding-left:0; padding-top:30px; }
}

/* ---- Przyciski ---- */
.cta-row { display:flex; gap:14px; flex-wrap:wrap; margin:30px 0 6px; }
.btn { display:inline-flex; align-items:center; gap:10px; font:600 16px 'Inter',system-ui,sans-serif;
  padding:14px 26px; border:1px solid var(--ink); border-radius:0; transition:.15s; }
.btn svg { width:18px; height:18px; }
.btn.primary { background:var(--accent); border-color:var(--accent); color:#fff; }
.btn.primary:hover { background:var(--accent-dark); border-color:var(--accent-dark); color:#fff; }
.btn.ghost { background:transparent; color:var(--ink); }
.btn.ghost:hover { border-color:var(--accent); color:var(--accent); }

/* ---- Badge sklepow ---- */
.store-row { display:flex; gap:12px; flex-wrap:wrap; margin:16px 0; }
.store { display:inline-flex; align-items:center; gap:11px; border:1px solid var(--ink);
  border-radius:0; padding:9px 18px; color:var(--ink); min-width:186px; transition:.15s; }
.store:hover { background:var(--ink); color:var(--paper); }
.store svg { width:22px; height:22px; flex:0 0 auto; }
.store small { display:block; font-size:11px; letter-spacing:.04em; opacity:.75; }
.store b { display:block; font:600 16px 'Inter',system-ui,sans-serif; }
.store.store-soon { cursor:default; border-color:var(--rule); color:var(--ink-soft); opacity:.85; }
.store.store-soon:hover { background:transparent; color:var(--ink-soft); }

/* ---- Stan "aplikacja wkrotce" (przed premiera apki) ---- */
.auth .soon { display:inline-flex; align-items:center; gap:8px; font-size:14px; font-weight:600;
  color:var(--accent-dark); background:var(--accent-tint); border:1px solid #BFE1F2;
  padding:8px 16px; border-radius:0; }
.auth .soon::before { content:""; width:7px; height:7px; border-radius:50%;
  background:var(--accent); flex:0 0 auto; }
.btn.is-soon { cursor:default; }
.btn.is-soon:hover { background:var(--accent); border-color:var(--accent); color:#fff; }
.btn.ghost.is-soon:hover { background:transparent; border-color:var(--rule); color:var(--ink); }
.btn.is-soon em { font-style:normal; font-weight:600; font-size:11px; letter-spacing:.05em;
  text-transform:uppercase; padding:3px 9px; border-radius:0; margin-left:2px;
  background:var(--accent-tint); color:var(--accent-dark); }

/* ---- Widelec / karty ---- */
.forks { display:grid; grid-template-columns:1fr 1fr; gap:0; border:1px solid var(--rule);
  background:var(--card); margin:8px 0; }
.forks > * + * { border-left:1px solid var(--rule); }
.fork { padding:38px 34px; display:flex; flex-direction:column; height:100%; }
.fork .ic { color:var(--accent); margin-bottom:20px; width:52px; height:52px;
  border-radius:0; background:var(--accent-tint);
  display:inline-flex; align-items:center; justify-content:center; }
.fork .ic svg { width:26px; height:26px; }
.fork p { color:var(--ink-soft); font-size:17px; }
.fork .go { display:inline-flex; align-items:center; gap:9px; margin-top:auto;
  align-self:flex-start; padding:11px 20px; border:1px solid var(--rule);
  border-radius:0; font-weight:600; font-size:15px; color:var(--accent-dark);
  background:var(--card); transition:.16s; }
.fork .go:hover { border-color:var(--accent); background:var(--accent-tint); color:var(--accent-dark); }
.fork .go svg { width:16px; height:16px; transition:transform .16s; }
.fork .go:hover svg { transform:translateX(3px); }
@media (max-width:720px){
  .forks { grid-template-columns:1fr; }
  .forks > * + * { border-left:0; border-top:1px solid var(--rule); }
}

.grid3 { display:grid; grid-template-columns:repeat(auto-fit,minmax(288px,1fr)); gap:1px;
  background:var(--rule); border:1px solid var(--rule); }
.cell { background:var(--card); padding:30px 28px; }
.cell .ic { color:var(--accent); margin-bottom:16px; width:46px; height:46px;
  border-radius:0; background:var(--accent-tint);
  display:inline-flex; align-items:center; justify-content:center; }
.cell .ic svg { width:24px; height:24px; }
.cell p { margin:0; color:var(--ink-soft); font-size:16.5px; }

/* ---- Lista faktow ---- */
.facts { list-style:none; padding:0; margin:26px 0; }
.facts li { display:flex; gap:16px; padding:18px 0; border-top:1px solid var(--rule); margin:0;
  align-items:flex-start; }
.facts li:last-child { border-bottom:1px solid var(--rule); }
.facts .ic { color:var(--accent); flex:0 0 auto; width:36px; height:36px; border-radius:0;
  background:var(--accent-tint); display:inline-flex; align-items:center; justify-content:center; }
.facts .ic svg { width:19px; height:19px; }
.facts b { font-weight:600; }

/* ---- Notka / disclaimer ---- */
.notice { background:var(--paper); border:1px solid var(--rule); border-radius:0;
  padding:18px 22px; font-size:16.5px; line-height:1.62; color:var(--ink); margin:30px 0; }
.notice strong { color:var(--accent-dark); }

/* ---- Naglowek sekcji z numerem ---- */
.sec-head { display:flex; align-items:baseline; gap:14px; margin-bottom:6px; }
.sec-head .no { font:600 14px 'Inter',system-ui,sans-serif; color:var(--accent); letter-spacing:.1em; }

/* ---- Stopka ---- */
footer { margin-top:80px; background:var(--accent-dark); color:#CBE0E8; }
.foot-in { max-width:var(--measure); margin:0 auto; padding:40px 28px 56px; }
.foot-in .fw { display:inline-flex; align-items:center; gap:8px;
  font:600 22px 'Inter',system-ui,sans-serif; color:#fff; }
.foot-in .fw .ring { width:22px; height:22px; border:3.5px solid currentColor;
  border-radius:50%; flex:0 0 auto; }
.foot-in nav { display:flex; gap:22px; flex-wrap:wrap; margin:20px 0; }
.foot-in nav a { color:#CBE0E8; font-size:14px; }
.foot-in nav a:hover { color:#fff; }
.foot-in .disc { font-size:13.5px; line-height:1.7; color:#A6C7D1;
  border-top:1px solid #2A5C6E; padding-top:20px; margin-top:8px; }
.foot-in .meta { font-size:13px; color:#88AEB9; margin-top:14px; }
.foot-projects { font-size:13.5px; color:#88AEB9; margin-top:16px; }
.foot-projects a { color:#CBE0E8; }
.foot-projects a:hover { color:#fff; }

/* ---- Responsywnie ---- */
/* ---- Powrot (strzalka) ---- */
.back { display:inline-flex; align-items:center; gap:7px; font-size:14px; font-weight:600;
  color:var(--ink-soft); margin-bottom:22px; }
.back:hover { color:var(--accent); }
.back svg { width:16px; height:16px; }
.foot-note { font-size:12.5px; line-height:1.6; color:#88AEB9; margin-top:14px; }

/* ---- Artykul (blog / wzor) ---- */
.article { max-width:730px; margin:0 auto; padding:40px 28px 90px; }
.article .kicker a { color:inherit; }
.article .lead { border-bottom:1px solid var(--rule); padding-bottom:26px; }
.article h2 { margin:40px 0 12px; }
.article h3 { margin:28px 0 8px; }
.article p { margin:0 0 18px; }
.article ul, .article ol { margin:0 0 20px; padding-left:22px; }
.article li { margin-bottom:9px; }
.article table { border-collapse:collapse; width:100%; font-size:16px; margin:24px 0; }
.article th, .article td { text-align:left; padding:11px 14px 11px 0;
  border-bottom:1px solid var(--rule); vertical-align:top; }
.article th { text-transform:uppercase; font-size:12.5px; letter-spacing:.06em;
  color:var(--ink-soft); border-bottom:1.5px solid var(--ink); }
.article blockquote { margin:26px 0; padding-left:18px; border-left:2px solid var(--rule);
  color:var(--ink-soft); font-style:italic; }
.article hr { border:0; border-top:1px solid var(--rule); margin:24px 0; }

/* ---- Dokument A4 (wzor pisma) ---- */
.dl-bar { display:flex; gap:12px; flex-wrap:wrap; margin:6px 0 2px; }
.dl-bar .btn { padding:11px 20px; font-size:15px; }
.doc-wrap { background:#EDF1F4; border:1px solid var(--rule); border-radius:0;
  padding:34px 0; margin:22px 0 6px; }
.doc-a4 { background:#fff; box-shadow:0 8px 34px rgba(20,78,99,.12);
  width:min(560px, 92%); margin:0 auto; padding:60px 62px; min-height:760px;
  font-family:'Arial Narrow','Arial Nova Cond',Arial,sans-serif;
  font-size:16px; line-height:1.65; color:#20242A;
  overflow-wrap:anywhere; }
.doc-a4 p { margin:0 0 13px; }
.doc-a4 .r { text-align:right; }
.doc-a4 .c { text-align:center; font-weight:400; text-transform:uppercase;
  letter-spacing:.03em; margin:22px 0; }
.doc-a4 .hint { color:#94989E; font-style:italic; font-size:13px; }
.doc-a4 strong { font-weight:inherit; }
@media (max-width:600px){ .doc-a4 { padding:34px 26px; min-height:0; } }

/* ---- Blog: wyszukiwarka ---- */
.blog-search { position:relative; margin:22px 0 36px; }
.blog-search svg { position:absolute; left:18px; top:50%; transform:translateY(-50%);
  width:20px; height:20px; color:var(--ink-faint); pointer-events:none; }
.blog-search input { width:100%; box-sizing:border-box; padding:15px 18px 15px 50px;
  font:inherit; font-size:17px; color:var(--ink); background:var(--card);
  border:1px solid var(--rule); border-radius:0; }
.blog-search input:focus { outline:none; border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(14,116,144,.12); }
.blog-nores { margin:6px 0 30px; color:var(--ink-soft); font-size:16px; }

/* ---- Blog: karty pogrupowane po dziale, wyrazisty naglowek dzialu ---- */
.cat-block { margin:0 0 36px; }
.cat-band { display:flex; align-items:center; justify-content:space-between; gap:14px;
  margin:0 0 18px; padding:14px 22px; background:var(--accent); color:#fff;
  border-radius:0; font-size:21px; font-weight:700; letter-spacing:-.01em; }
.cat-band span { flex:none; font-size:14px; font-weight:600; background:rgba(255,255,255,.2);
  padding:3px 13px; border-radius:0; }
.blog-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:18px; margin:0 0 10px; }
.blog-card .cat { display:none; }
.blog-card { display:flex; flex-direction:column; background:var(--card); border:1px solid var(--rule);
  border-radius:0; padding:22px 24px 20px; color:var(--ink); transition:.15s; }
.blog-card:hover { border-color:var(--accent); box-shadow:0 6px 22px rgba(20,78,99,.08); color:var(--ink); }
.blog-card .cat { font-size:11.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--accent); font-weight:600; }
.blog-card h3 { margin:9px 0 9px; font-size:19px; line-height:1.28; }
.blog-card p { margin:0 0 14px; font-size:15px; color:var(--ink-soft); flex:1; }
.blog-card .rd { font-weight:600; font-size:14.5px; color:var(--accent); }

/* ---- Blog: spis wzorow (osobny blok) ---- */
.wzory-index { margin:64px 0 0; padding:36px 0 0; border-top:1px solid var(--rule); }
.wzory-index h2 { font-size:27px; margin:0 0 6px; }
.wzory-index .lead-sm { color:var(--ink-soft); font-size:16px; margin:0 0 28px; }
.wz-cols { columns:3 250px; column-gap:36px; }
.wz-group { break-inside:avoid; display:inline-block; width:100%; margin:0 0 24px; }
.wz-group h3 { font-size:12.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--accent);
  font-weight:600; margin:0 0 9px; padding-bottom:7px; border-bottom:1px solid var(--rule); }
.wz-group ul { list-style:none; margin:0; padding:0; }
.wz-group li { margin:0 0 8px; line-height:1.4; }
.wz-group a { font-size:15px; color:var(--ink); }
.wz-group a:hover { color:var(--accent); }

/* ---- Blog / wzory: lista wpisow (wzory) ---- */
.listing { max-width:1040px; margin:0 auto; padding:44px 28px 90px; }
.listing .lead { margin-bottom:34px; }
.post-group { margin:0 0 42px; }
.post-group > h2 { font-size:13px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent); border-bottom:1.5px solid var(--ink); padding-bottom:8px; margin:0 0 4px; }
.post-group > h2 em { color:var(--ink-faint); font-style:normal; font-weight:500; }
.post-list { list-style:none; margin:0; padding:0; }
.post-list li { padding:18px 0; border-bottom:1px solid var(--rule); }
.post-list a.tt { font-weight:600; font-size:18.5px; }
.post-list .tag { display:inline-block; font-size:11px; text-transform:uppercase;
  letter-spacing:.07em; color:var(--ink-soft); border:1px solid var(--rule);
  border-radius:0; padding:2px 7px; margin-left:10px; vertical-align:middle; }
.post-list .d { display:block; color:var(--ink-soft); font-size:15px; margin-top:5px; line-height:1.5; }

/* ---- Autorstwo (byline) pod leadem artykulu/wzoru ---- */
.byline { display:flex; align-items:center; gap:9px; margin:2px 0 26px;
  font-size:14.5px; color:var(--ink-soft); }
.byline strong { color:var(--ink); font-weight:600; }
.byline a { color:var(--ink); text-decoration:none; border-bottom:1px solid var(--rule); }
.byline a:hover { color:var(--accent); border-color:var(--accent); }
.byline .by-dot { flex:none; width:26px; height:26px; border-radius:50%;
  border:2px solid var(--accent); }

/* ---- Wyodrebniona statystyka w artykule ---- */
.statbox { display:flex; align-items:center; gap:26px; margin:28px 0 32px;
  padding:24px 28px; background:var(--card); border:1px solid var(--rule);
  border-radius:0; }
.statbox .stat-num { flex:none; font-size:44px; line-height:1; font-weight:700;
  color:var(--accent-dark); letter-spacing:-.02em; padding-right:26px;
  border-right:1px solid var(--rule); }
.statbox .stat-body { min-width:0; }
.statbox .stat-txt { margin:0; font-size:16px; line-height:1.45; color:var(--ink); font-weight:500; }
.statbox .stat-src { margin:6px 0 0; font-size:13px; color:var(--ink-soft); }
.statbox .stat-src a { color:var(--accent-dark); }
@media (max-width:520px){ .statbox { flex-direction:column; align-items:flex-start; gap:10px; }
  .statbox .stat-num { font-size:36px; padding-right:0; border-right:0; } }

/* ---- Zapis na liste oczekujacych (premiera) - ciemne tlo ---- */
.band.premiera { background:var(--accent-dark); }
.band.premiera .sec-head h2 { color:#fff; }
.band.premiera > .wrap > p { color:#CBE0E8; }
.band.premiera .wl-consent { color:#A9CBD6; }
.band.premiera .wl-consent a { color:#7FC7DB; }
.band.premiera .wl-msg { color:#EAF4F8; }
.waitlist { max-width:720px; margin:20px 0 0; }
.waitlist .wl-row { display:flex; gap:10px; flex-wrap:wrap; }
.waitlist input[type=email], .waitlist select { flex:1 1 200px; min-width:0;
  padding:13px 16px; font:inherit; font-size:16px; color:var(--ink);
  background:var(--card); border:1px solid var(--rule); border-radius:0; }
.waitlist .btn { border-radius:0; }
.waitlist input[type=email]:focus, .waitlist select:focus { outline:none;
  border-color:var(--accent); box-shadow:0 0 0 3px rgba(14,116,144,.12); }
.waitlist .btn { flex:0 0 auto; }
.waitlist .wl-consent { display:flex; gap:9px; align-items:flex-start; margin:14px 0 0;
  font-size:14px; color:var(--ink-soft); line-height:1.5; }
.waitlist .wl-consent input { margin-top:3px; flex:0 0 auto; }
.waitlist .wl-consent a { color:var(--accent-dark); }
.waitlist .wl-msg { margin:14px 0 0; font-size:16px; font-weight:600; color:var(--accent-dark); }

/* ---- "Przeczytaj takze" - powiazane artykuly ---- */
.article .related { margin:52px 0 0; padding:34px 0 0; border-top:1px solid var(--rule); }
.article .related h2 { font-size:var(--t-h3); margin:0 0 18px; }

/* ---- Ocena artykulu (kciuki) ---- */
.feedback { display:flex; align-items:center; flex-wrap:wrap; gap:14px; margin:44px 0 0;
  padding:18px 22px; background:var(--paper); border:1px solid var(--rule); border-radius:0; }
.feedback .fb-q { font-weight:600; color:var(--ink); }
.feedback .fb-btns { display:flex; gap:10px; }
.feedback .fb-btn { display:inline-flex; align-items:center; gap:7px; padding:8px 16px;
  border:1px solid var(--rule); border-radius:0; background:var(--card); color:var(--ink);
  font:inherit; font-size:14.5px; font-weight:600; cursor:pointer; transition:.15s; }
.feedback .fb-btn:hover { border-color:var(--accent); background:var(--accent-tint); color:var(--accent-dark); }
.feedback .fb-btn svg { width:17px; height:17px; }
.feedback .fb-btn.fb-no svg { transform:rotate(180deg); }
.feedback .fb-btn:disabled { opacity:.5; cursor:default; }
.feedback.voted .fb-btns { display:none; }
.feedback .fb-thx { color:var(--accent-dark); font-weight:600; }

/* ---- CTA "opisz sprawe" pod artykulem ---- */
.more { margin:52px 0 0; padding:26px 28px; background:var(--card); border:1px solid var(--rule);
  border-radius:0; }
.more h2 { margin:0 0 8px; font-size:var(--t-h3); }
.more p { margin:0 0 14px; color:var(--ink-soft); }

/* ---- Inne projekty (stopka) - z opisem ---- */
.foot-projects { margin-top:20px; padding-top:20px; border-top:1px solid #2A5C6E; }
.foot-projects .fp-h { font-size:12px; letter-spacing:.12em; text-transform:uppercase;
  color:#7FC7DB; font-weight:600; margin-bottom:12px; }
.fp-list { display:flex; gap:28px; flex-wrap:wrap; }
.fp-item { max-width:280px; }
.fp-item a { color:#fff; font-weight:600; font-size:15px; }
.fp-item a:hover { color:#7FC7DB; }
.fp-item span { display:block; color:#A6C7D1; font-size:13px; line-height:1.5; margin-top:3px; }

@media (max-width:640px){
  :root{ --t-body:17.5px; --t-lead:20px; --t-h2:24px; --t-h1:36px; --t-h3:19px; }
  .masthead-in{ flex-direction:column; align-items:flex-start; }
  .fork{ padding:28px 24px; }
}