/* ==========================================================================
   Lista narzędzi (tools.solvart.pl) w wyglądzie strony solvart.pl: granat, złoto, Albert Sans,
   karty z kropkami, które po najechaniu składają się w znak narzędzia (js/kropki.js).
   ========================================================================== */

.strona-narzedzi {
  --navy-950: #060b18;
  --navy-900: #0a1128;
  --navy-850: #0e1630;
  --navy-800: #131c3a;
  --zloto: #d4a72c;
  --zloto-jasne: #ecc96a;
  --tekst: #f2f4fa;
  --tekst-slaby: #a7b1cc;
  --linia: rgba(255, 255, 255, 0.10);
  --promien: 18px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  color-scheme: only dark;
  background-color: var(--navy-900);
  background-image: radial-gradient(620px 560px at calc(100% + 40px) -60px, rgba(212, 167, 44, 0.17), transparent 62%);
  background-repeat: no-repeat;
  color: var(--tekst);
  font-size: 17px;
  line-height: 1.6;
}
.strona-narzedzi :focus-visible { outline: 2px solid var(--zloto-jasne); outline-offset: 3px; }
.strona-narzedzi ::selection { background: var(--zloto); color: #17130a; }
.strona-narzedzi a { color: var(--zloto-jasne); }

.oslona { max-width: 1200px; margin: 0 auto; padding: 0 24px; }

/* ---------- pasek ---------- */

.pasek { position: sticky; top: 0; z-index: 20; background: rgba(10, 17, 40, 0.82); backdrop-filter: blur(10px); border-bottom: 1px solid var(--linia); }
.pasek__tresc { display: flex; align-items: center; gap: 24px; min-height: 68px; }
.pasek__logo { display: flex; align-items: center; gap: 14px; text-decoration: none; color: var(--tekst); font-weight: 700; font-size: 16px; }
.pasek__logo img { height: 28px; width: auto; display: block; }
.pasek__logo span { padding-left: 14px; border-left: 1px solid rgba(236, 201, 106, 0.3); }
.pasek__nav { display: flex; gap: 26px; margin-left: auto; }
.pasek__nav a { color: var(--tekst-slaby); text-decoration: none; font-size: 15px; font-weight: 600; transition: color .2s; }
.pasek__nav a:hover { color: var(--tekst); }
.pasek__wersja { font-size: 12.5px; color: var(--tekst-slaby); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------- nagłówek strony ---------- */

.hero { padding: clamp(56px, 9vw, 104px) 0 clamp(36px, 5vw, 56px); }
.eyebrow { color: var(--zloto); font-size: 13px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; margin: 0 0 16px; }
.hero h1 { font-size: clamp(34px, 5.2vw, 58px); line-height: 1.08; letter-spacing: -0.02em; font-weight: 800; margin: 0 0 22px; max-width: 820px; }
.hero h1 .zloto { color: var(--zloto); }
.hero__lead { color: var(--tekst-slaby); font-size: clamp(17px, 1.6vw, 19px); max-width: 680px; margin: 0 0 26px; }
.znaczek {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 8px 14px; border: 1px solid rgba(212, 167, 44, 0.35); border-radius: 999px;
  background: rgba(212, 167, 44, 0.08); color: var(--zloto-jasne); font-size: 14px; font-weight: 600;
}

/* ---------- karty narzędzi ---------- */

.sekcja { padding: clamp(28px, 4vw, 48px) 0 clamp(56px, 7vw, 88px); }
.sekcja h2 { font-size: clamp(24px, 3vw, 32px); letter-spacing: -0.01em; margin: 0 0 10px; }
.sekcja__lead { color: var(--tekst-slaby); margin: 0 0 34px; max-width: 640px; }
.sekcja--ciemniej { background: var(--navy-950); border-top: 1px solid var(--linia); border-bottom: 1px solid var(--linia); padding-top: clamp(56px, 7vw, 88px); }

.karty-narzedzi { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; list-style: none; margin: 0; padding: 0; }
.strona-narzedzi .karta-narzedzia {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 0 28px 30px;
  border: 1px solid var(--linia);
  border-radius: var(--promien);
  background: var(--navy-800);
  color: var(--tekst);
  text-align: center;
  text-decoration: none;
  transition: border-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}
.karta-narzedzia:hover, .karta-narzedzia:focus-visible {
  border-color: rgba(212, 167, 44, 0.5);
  transform: translateY(-4px);
  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.35);
}
.karta-narzedzia__grafika { position: relative; display: block; height: 150px; margin-bottom: 22px; }
.karta-narzedzia__blob, .zaleta__blob {
  position: absolute;
  left: 50%;
  top: 18px;
  transform: translateX(-50%);
  display: grid;
  place-items: center;
  width: 116px;
  height: 116px;
  background: rgba(212, 167, 44, 0.10);
  border: 1px solid rgba(212, 167, 44, 0.35);
  border-radius: 58% 42% 46% 54% / 46% 52% 48% 54%;
  transition: border-radius .5s var(--ease), background .3s var(--ease), transform .5s var(--ease);
}
.karta-narzedzia:hover .karta-narzedzia__blob, .karta-narzedzia:focus-visible .karta-narzedzia__blob,
.zaleta:hover .zaleta__blob {
  border-radius: 44% 56% 58% 42% / 56% 44% 56% 44%;
  background: rgba(212, 167, 44, 0.16);
}
.karta-narzedzia:hover .karta-narzedzia__blob { transform: translateX(-50%) scale(1.06); }
.karta-narzedzia__plotno, .zaleta__plotno { width: 100%; height: 100%; display: block; }
.karta-narzedzia__nr { color: var(--zloto); font-size: 12px; font-weight: 700; letter-spacing: .16em; margin-bottom: 8px; }
.karta-narzedzia h3 { font-size: 20px; line-height: 1.3; margin: 0 0 12px; transition: color .25s; }
.karta-narzedzia:hover h3 { color: var(--zloto-jasne); }
.karta-narzedzia p { color: var(--tekst-slaby); font-size: 15.5px; margin: 0; }
.karta-narzedzia__cechy { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 18px 0 0; }
.karta-narzedzia__cechy span { font-size: 12.5px; color: var(--tekst-slaby); border: 1px solid var(--linia); border-radius: 999px; padding: 2px 10px; }
.karta-narzedzia__wiecej {
  align-self: center;
  margin-top: auto;
  padding-top: 22px;
  color: var(--zloto-jasne);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.karta-narzedzia__wiecej span { display: inline-block; padding-bottom: 3px; border-bottom: 2px solid var(--zloto); transition: padding .25s var(--ease); }
.karta-narzedzia:hover .karta-narzedzia__wiecej span { padding-right: 18px; }
.karta-narzedzia__wiecej span::after { content: ""; }

/* ---------- zalety ---------- */

.zalety { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; }
.zaleta { padding: 0 24px 26px; border: 1px solid var(--linia); border-radius: var(--promien); background: var(--navy-850); text-align: center; }
.zaleta__grafika { position: relative; display: block; height: 128px; margin-bottom: 14px; }
.zaleta__blob { width: 92px; height: 92px; top: 18px; }
.zaleta h3 { font-size: 17.5px; margin: 0 0 8px; }
.zaleta p { color: var(--tekst-slaby); font-size: 15px; margin: 0; }

/* ---------- stopka ---------- */

.stopka-strony { padding: 26px 0 34px; color: var(--tekst-slaby); font-size: 14px; }
.stopka-strony .oslona { display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; }

/* ---------- wąski ekran ---------- */

@media (max-width: 1000px) {
  .karty-narzedzi, .zalety { grid-template-columns: minmax(0, 1fr); max-width: 560px; }
}
@media (max-width: 640px) {
  .pasek__nav { display: none; }
  .pasek__wersja { margin-left: auto; }
  .oslona { padding: 0 16px; }
}