/* ============================================================
   SUPREITY — wspólny arkusz dla całego ekosystemu.
   Zmiana identyfikacji w jednym pliku zamiast w pięciu kompletach.
   Paleta cieplejsza od olsztyn.ai — marka-parasol ma wyglądać
   inaczej niż strona miejska, mimo wspólnego układu.
   ============================================================ */

:root{
  --bg:#0a0f1a; --bg-soft:#0f1728; --panel:#131d31; --line:#22304c;
  --ink:#eaf0fb; --ink-dim:#a6b5d2; --ink-faint:#7285a6;
  --accent:#5eead4; --accent-2:#fbbf24; --accent-3:#818cf8;
  --maxw:1080px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; background:var(--bg); color:var(--ink);
  font:16px/1.65 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Inter,Arial,sans-serif;
  -webkit-font-smoothing:antialiased}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 22px}
.wrap.narrow{max-width:740px}
code,.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}

.skip{position:absolute;left:-9999px;top:0;background:var(--accent);color:#04121f;
  padding:10px 16px;border-radius:0 0 8px 0;z-index:100}
.skip:focus{left:0}

/* ---------- nav ---------- */
header.nav{position:sticky; top:0; z-index:50; background:rgba(10,15,26,.88);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--line)}
.nav-in{display:flex; align-items:center; justify-content:space-between; gap:20px; padding:14px 0}
.brand{font-weight:700; font-size:1.14rem; letter-spacing:-.01em; color:var(--ink);
  display:flex; align-items:center; gap:9px}
.brand .dot{width:9px;height:9px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 12px var(--accent)}
.brand:hover{text-decoration:none}
.nav-links{display:flex; gap:22px; align-items:center; font-size:.93rem}
.nav-links a{color:var(--ink-dim)}
.nav-links a:hover{color:var(--ink); text-decoration:none}
.lang{border:1px solid var(--line); border-radius:7px; padding:4px 10px;
  font-size:.82rem; color:var(--ink-faint)}
.lang:hover{border-color:var(--accent); color:var(--accent); text-decoration:none}
@media(max-width:780px){.nav-links .hide-sm{display:none}}

/* ---------- hero ---------- */
.hero{padding:80px 0 62px; border-bottom:1px solid var(--line);
  background:radial-gradient(1100px 500px at 76% -14%, rgba(94,234,212,.13), transparent 62%)}
.eyebrow{color:var(--accent-2); font-size:.79rem; letter-spacing:.16em;
  text-transform:uppercase; font-weight:600; margin-bottom:16px}
h1{font-size:clamp(2rem,5vw,3.3rem); line-height:1.12; margin:0 0 20px;
  letter-spacing:-.025em; font-weight:750}
h1 .hl{color:var(--accent)}
.lede{font-size:clamp(1.03rem,2vw,1.2rem); color:var(--ink-dim); max-width:650px; margin:0 0 30px}
.cta-row{display:flex; gap:13px; flex-wrap:wrap; align-items:center}
.btn{display:inline-block; padding:12px 25px; border-radius:9px; font-weight:600;
  font-size:.95rem; transition:.15s}
.btn-primary{background:var(--accent); color:#04211c}
.btn-primary:hover{background:#99f6e4; text-decoration:none; transform:translateY(-1px)}
.btn-ghost{border:1px solid var(--line); color:var(--ink-dim)}
.btn-ghost:hover{border-color:var(--accent); color:var(--accent); text-decoration:none}

.cred{display:flex; gap:26px; flex-wrap:wrap; margin-top:46px; padding-top:26px;
  border-top:1px solid var(--line)}
.cred div{font-size:.87rem; color:var(--ink-faint); max-width:215px}
.cred b{display:block; color:var(--ink); font-size:1.42rem; font-weight:700; letter-spacing:-.01em}

/* Jedno zdanie zamiast paska "statystyk" — 3 z 4 pozycji nie byly osiagnieciami. */
.cred-line{margin:40px 0 0; padding-top:24px; border-top:1px solid var(--line);
  font-size:.92rem; color:var(--ink-faint); max-width:620px}
.cred-line b{color:var(--ink); font-weight:600}

/* ---------- sekcje ---------- */
section{padding:70px 0; border-bottom:1px solid var(--line)}
.sec-label{color:var(--accent-2); font-size:.79rem; letter-spacing:.16em;
  text-transform:uppercase; font-weight:600; margin-bottom:13px}
h2{font-size:clamp(1.5rem,3vw,2.05rem); margin:0 0 16px; letter-spacing:-.02em; font-weight:700}
h3{font-size:1.16rem; margin:0 0 11px; font-weight:650}
.sec-intro{color:var(--ink-dim); max-width:670px; margin:0 0 38px}
p{margin:0 0 16px}

/* ---------- karty ---------- */
.grid{display:grid; gap:20px; grid-template-columns:repeat(auto-fit,minmax(285px,1fr))}
.card{background:var(--panel); border:1px solid var(--line); border-radius:13px;
  padding:26px; transition:.18s}
.card:hover{border-color:#2f4368; transform:translateY(-2px)}
.card h3{margin:0 0 11px; font-size:1.11rem}
.card p{margin:0 0 15px; color:var(--ink-dim); font-size:.94rem}
.card .ico{font-size:1.5rem; margin-bottom:13px; display:block}
.tags{display:flex; gap:7px; flex-wrap:wrap; margin-top:auto}
.tag{font-size:.75rem; padding:3px 10px; border-radius:99px;
  background:rgba(94,234,212,.1); color:var(--accent); border:1px solid rgba(94,234,212,.24)}
.tag.warm{background:rgba(251,191,36,.1); color:var(--accent-2); border-color:rgba(251,191,36,.24)}

/* ---------- realizacje ---------- */
.case{background:linear-gradient(135deg,var(--panel),var(--bg-soft));
  border:1px solid var(--line); border-radius:15px; padding:34px;
  display:grid; gap:30px; grid-template-columns:1.35fr 1fr}
@media(max-width:820px){.case{grid-template-columns:1fr; padding:26px}}
.case h3{margin:0 0 13px; font-size:1.42rem; font-weight:700}
.case .sub{color:var(--accent); font-size:.83rem; letter-spacing:.09em;
  text-transform:uppercase; margin-bottom:11px; font-weight:600}
.case p{color:var(--ink-dim); margin:0 0 15px}
.case ul{margin:0 0 20px; padding-left:19px; color:var(--ink-dim); font-size:.93rem}
.case li{margin-bottom:7px}
.snippet{background:#060c17; border:1px solid var(--line); border-radius:10px; padding:17px;
  font-size:.79rem; overflow-x:auto; color:var(--ink-dim); line-height:1.55}
.snippet .k{color:var(--accent)} .snippet .s{color:var(--accent-2)} .snippet .c{color:var(--ink-faint)}

/* ---------- miasta ---------- */
.miasta{display:grid; gap:18px; grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.miasto{background:var(--panel); border:1px solid var(--line); border-radius:13px;
  padding:24px; display:block; transition:.18s}
.miasto:hover{border-color:var(--accent); transform:translateY(-2px); text-decoration:none}
.miasto h3{color:var(--ink); margin:0 0 8px}
.miasto p{color:var(--ink-dim); font-size:.92rem; margin:0 0 12px}
.miasto .wiecej{color:var(--accent); font-size:.88rem; font-weight:600}

/* ---------- callout / uwagi ---------- */
.callout{background:rgba(94,234,212,.06); border:1px solid rgba(94,234,212,.22);
  border-left:3px solid var(--accent); border-radius:11px; padding:26px}
.callout h3{margin:0 0 11px; font-size:1.16rem; color:var(--accent)}
.callout p{margin:0; color:var(--ink-dim); font-size:.95rem}
.disclaimer{background:var(--bg-soft); border:1px solid var(--line); border-radius:10px;
  padding:18px 22px; font-size:.88rem; color:var(--ink-faint); margin:0 0 22px}
.disclaimer b{color:var(--ink-dim)}

/* ---------- o mnie ---------- */
.about{display:grid; grid-template-columns:1fr 1fr; gap:38px; align-items:start}
@media(max-width:820px){.about{grid-template-columns:1fr; gap:26px}}
.about p{color:var(--ink-dim)}
.facts{list-style:none; padding:0; margin:0}
.facts li{padding:11px 0; border-bottom:1px solid var(--line); font-size:.92rem;
  color:var(--ink-dim); display:flex; gap:13px}
.facts li:last-child{border-bottom:0}
.facts .yr{color:var(--accent); font-variant-numeric:tabular-nums; flex-shrink:0;
  min-width:64px; font-size:.87rem}

/* ---------- tabele ---------- */
table{width:100%; border-collapse:collapse; margin:0 0 22px; font-size:.92rem;
  display:block; overflow-x:auto}
th,td{padding:11px 14px; text-align:left; border-bottom:1px solid var(--line); vertical-align:top}
th{font-weight:650; font-size:.85rem; letter-spacing:.03em; text-transform:uppercase;
  color:var(--ink-faint)}
td{color:var(--ink-dim)}
td small{display:block; color:var(--ink-faint); font-size:.82em; margin-top:3px}

/* ---------- kontakt ---------- */
.kontakt-row{display:flex; gap:30px; flex-wrap:wrap; margin-top:22px}
.kontakt-row div{font-size:.95rem}
.kontakt-row b{display:block; color:var(--ink-faint); font-size:.79rem;
  text-transform:uppercase; letter-spacing:.12em; margin-bottom:5px; font-weight:600}

/* ---------- stopka ---------- */
footer{padding:42px 0 52px; color:var(--ink-faint); font-size:.87rem}
.foot-grid{display:grid; gap:26px; grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  padding-bottom:26px; border-bottom:1px solid var(--line)}
.foot-col b{display:block; color:var(--ink); font-size:.9rem; margin-bottom:11px; font-weight:650}
.foot-col div{margin-bottom:7px}
footer a{color:var(--ink-faint)}
footer a:hover{color:var(--accent)}
.foot-bottom{display:flex; justify-content:space-between; gap:16px;
  flex-wrap:wrap; padding-top:22px}
.nota{margin-top:14px; font-size:.83rem; color:var(--ink-faint); line-height:1.6}

/* ---------- wybor regionu: pasek w hero ---------- */
.region-pick{display:flex; flex-wrap:wrap; align-items:center; gap:10px;
  margin:22px 0 0; padding:14px 16px; background:var(--bg-soft);
  border:1px solid var(--line); border-radius:11px}
.region-pick-label{color:var(--ink-dim); font-size:.9rem; font-weight:600;
  margin-right:2px}
.region-pick a{display:inline-block; padding:7px 15px; border-radius:8px;
  background:var(--panel); border:1px solid var(--line); color:var(--ink);
  font-size:.92rem; font-weight:600; text-decoration:none; transition:.16s}
.region-pick a:hover{border-color:var(--accent); color:var(--accent);
  text-decoration:none; transform:translateY(-1px)}
.region-pick .region-pick-all{background:none; border:none; color:var(--accent);
  padding:7px 4px; font-weight:600}
.region-pick .region-pick-all:hover{transform:none; opacity:.8}

/* ---------- sekcja regionow: wyrozniona, bo to glowna sciezka wyboru ---------- */
.sec-regiony{background:var(--bg-soft); border-bottom:1px solid var(--line)}
.miasto .dom{font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.82rem;
  color:var(--accent); margin:0 0 10px; letter-spacing:.02em}

@media (max-width:640px){
  .region-pick{gap:8px; padding:12px}
  .region-pick-label{width:100%; margin-bottom:2px}
}

/* podpis autora w sekcji kontakt (przeniesiony z hero) */
.kontakt-nota{display:block; margin-top:5px; font-size:.83rem; color:var(--ink-faint);
  font-weight:400; line-height:1.45}