/* Kierunek „Dashboard”: neutralne szarości jak tło raportu BI, jeden akcent danych (turkus).
   --good / --warn to kolory semantyczne trendów (lepiej / gorzej), nie akcent. */
:root {
  --paper: #F3F5F7;
  --surface: #FFFFFF;
  --ink: #18202B;
  --muted: #5F6B7A;
  --line: #DCE1E7;
  --accent: #0E7C7B;
  --accent-soft: #D5ECEB;
  --good: #2E7D32;
  --warn: #955808;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #12171D; --surface: #1B222B; --ink: #E6EAEF;
    --muted: #97A3B2; --line: #2C3540;
    --accent: #4CC4C2; --accent-soft: #173B3B;
    --good: #73C77A; --warn: #E3A54A;
    color-scheme: dark;
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 1.0625rem; line-height: 1.6;
}
.wrap { max-width: 68rem; margin: 0 auto; padding: 0 1.5rem; }
.text { max-width: 40rem; }
a { color: var(--accent); text-underline-offset: 0.2em; }
a:focus-visible, button:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 2px; }
p { margin: 0 0 1rem; }

/* nagłówek strony */
header.top { padding: 1.5rem 0; }
header.top .wrap { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
.name { font-weight: 700; color: var(--ink); text-decoration: none; }
nav a { color: var(--ink); text-decoration: none; margin-left: 1.25rem; }
nav a:first-child { margin-left: 0; }
nav a:hover, .name:hover { text-decoration: underline; }
/* przełącznik języka: bieżący język bez linku, drugi jako link do odpowiednika strony */
.lang { margin-left: 1.25rem; padding-left: 1.25rem; border-left: 1px solid var(--line); font-weight: 600; white-space: nowrap; }
.lang .sep { color: var(--muted); padding: 0 0.3em; font-weight: 400; }
nav .lang a { margin-left: 0; color: var(--muted); }
nav .lang a:hover { color: var(--ink); }

.brand { color: var(--muted); font-weight: 600; margin-left: 0.4rem; }

/* hero strony głównej: tekst po lewej, kafle wskaźników po prawej (jedyny mocny element strony) */
.hero { padding: 3.5rem 0; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 2.5rem 3.5rem; align-items: center; }
.eyebrow { color: var(--accent); font-weight: 600; margin: 0 0 0.75rem; }
.hero h1 { font-weight: 700; font-size: clamp(2rem, 4.6vw, 3.1rem); line-height: 1.1; letter-spacing: -0.015em; margin: 0 0 1rem; text-wrap: balance; }
.lead { font-size: 1.1875rem; line-height: 1.55; color: var(--muted); margin: 0; max-width: 34rem; }
.cta { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 1.75rem 0 0; }
.btn {
  display: inline-block; font-weight: 600; text-decoration: none; padding: 0.7rem 1.2rem; border-radius: 6px;
  border: 1px solid var(--line); color: var(--ink); background: var(--surface);
}
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--paper); }
.btn:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.hire-links { margin: 1.25rem 0 0; font-size: 0.9375rem; color: var(--muted); }

/* kafle wskaźników: po jednym z każdego raportu */
.tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
.tile { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 0.9rem 1rem 0.7rem; display: grid; gap: 0.1rem; min-width: 0; }
.tile small { font-size: 0.8125rem; color: var(--muted); }
.tile b { font-size: 1.5rem; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; }
.tile .delta { font-size: 0.8125rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.spark { display: block; width: 100%; height: 32px; margin-top: 0.35rem; color: var(--accent); }
.spark .area { fill: var(--accent-soft); stroke: none; }
.spark .ln { fill: none; stroke: currentColor; stroke-width: 1.75; vector-effect: non-scaling-stroke; }
.tiles-note { grid-column: 1 / -1; font-size: 0.8125rem; color: var(--muted); margin: 0.25rem 0 0; }

/* sekcje */
section { padding: 3.5rem 0; border-top: 1px solid var(--line); }
h2 { font-weight: 700; font-size: 1.875rem; line-height: 1.15; letter-spacing: -0.01em; margin: 0 0 1rem; text-wrap: balance; }
h3 { font-size: 1.125rem; margin: 2rem 0 0.5rem; }
.section-lead { color: var(--muted); max-width: 40rem; }

/* lista projektów jak tabela w raporcie: obszar, wskaźniki, status */
.projects-head, .projects a {
  display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) 9rem; gap: 0.25rem 2rem;
}
.projects-head { margin-top: 1.5rem; padding: 0 0 0.5rem; font-size: 0.8125rem; color: var(--muted); border-bottom: 1px solid var(--ink); }
.projects { list-style: none; margin: 0; padding: 0; }
.projects li { border-bottom: 1px solid var(--line); }
.projects a { padding: 1.25rem 0; color: var(--ink); text-decoration: none; align-items: start; }
.projects a:hover .p-title { text-decoration: underline; text-underline-offset: 0.15em; }
.p-main { display: grid; gap: 0.25rem; min-width: 0; }
.p-title { font-weight: 700; font-size: 1.3rem; line-height: 1.2; color: var(--accent); }
.p-desc { color: var(--muted); }
.p-kpis { color: var(--ink); font-size: 0.9375rem; padding-top: 0.2rem; }
.p-status { justify-self: start; font-size: 0.8125rem; font-weight: 600; padding: 0.2rem 0.6rem; border-radius: 99px; border: 1px solid var(--line); color: var(--muted); white-space: nowrap; }
.p-status.ready { background: var(--accent-soft); border-color: var(--accent-soft); color: var(--accent); }

/* usługi: lista dwukolumnowa z liniami, bez kart */
.services { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 3rem; }
.services li { border-top: 1px solid var(--line); padding: 1.25rem 0 1.5rem; }
.services h3 { margin: 0 0 0.4rem; font-size: 1.1875rem; }
.services p { margin: 0; color: var(--muted); }
.services-cta { margin: 1.5rem 0 0; }

/* umiejętności */
.skills { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1.5rem 2.5rem; }
.skills h3 { margin-top: 0; }
.skills p { color: var(--muted); }

/* podstrona projektu */
.project-head { padding: 3rem 0 2rem; }
.back { display: inline-block; margin-bottom: 1.5rem; }
.project-head h1 { font-weight: 700; font-size: clamp(2.1rem, 5.5vw, 3.4rem); line-height: 1.1; letter-spacing: -0.015em; margin: 0 0 1rem; }
.project-meta { color: var(--muted); margin: 0; }
.questions, .findings, .tools { padding-left: 1.2rem; }
.questions li, .findings li, .tools li { margin-bottom: 0.5rem; }

/* raport Power BI */
.report {
  position: relative; width: 100%; aspect-ratio: 16 / 9.4;
  background: var(--surface); border: 1px solid var(--line); border-radius: 6px;
  overflow: hidden; margin: 0 0 0.75rem;
}
.report iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.report-placeholder {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center; padding: 1.5rem; gap: 1rem;
}
.report-placeholder p { color: var(--muted); margin: 0; max-width: 30rem; }
button.load {
  font: inherit; font-weight: 600; cursor: pointer;
  background: var(--accent); color: var(--paper); border: 0; border-radius: 4px; padding: 0.75rem 1.25rem;
}
.note { color: var(--muted); font-size: 0.9375rem; }

footer { padding: 2.5rem 0 3rem; border-top: 1px solid var(--line); color: var(--muted); font-size: 0.9375rem; }

@media (max-width: 52rem) {
  .hero { grid-template-columns: minmax(0, 1fr); }
  .services { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 40rem) {
  .hero { padding: 2.5rem 0; }
  nav a { margin-left: 0.9rem; }
  .lang { margin-left: 0.9rem; padding-left: 0.9rem; }
  .report { aspect-ratio: 3 / 4; }
  .projects-head { display: none; }
  .projects a { grid-template-columns: minmax(0, 1fr); gap: 0.6rem; }
  .projects-head + .projects { border-top: 1px solid var(--line); }
}
@media (max-width: 24rem) {
  .tiles { grid-template-columns: minmax(0, 1fr); }
}