/* Portal tools.breinz.ai – styl breinz.ai (motyw breinz-theme): tokeny, nawigacja, chipy, hero, kafelki, stopka.
   Ten sam zestaw co w narzędziu Analytics MCP (breinz-tools/public/styl.css). Fonty: Google Fonts (jak breinz.ai). */

:root {
  --ink: #1d1d1b;
  --ink-soft: #4b4b57;
  --ink-faint: #9a9aa6;
  --ink-quiet: #6b6b77; /* drobny tekst – kontrast ≥ 4.5:1 na bieli i #f7f7f9 */
  --accent-a: #4f46e5;
  --accent-b: #c026d3;
  --pink-a: #ff5ec4;
  --pink-b: #b12bdd;
  --green-a: #8ed701;
  --green-b: #549e00;
  --blue-a: #5371ed;
  --blue-b: #2c3ec4;
  --gray-bg: #f7f7f9;
  --bg: #ffffff;
  --chip-border: #ececf1;
  --err: #e049d2;
  --mono: ui-monospace, 'SFMono-Regular', 'Cascadia Mono', 'JetBrains Mono', Menlo, Consolas, 'Roboto Mono', 'DejaVu Sans Mono', monospace;
  --gutter: clamp(16px, 6vw, 96px);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 96px; -webkit-text-size-adjust: 100%; }
body {
  background: var(--bg);
  font-family: 'Inter', sans-serif;
  color: var(--ink);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  overflow-x: hidden;
}
@supports (height: 100svh) { body { min-height: 100svh; } }
body > main { flex: 1 0 auto; width: 100%; }
img, svg { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
b, strong { font-weight: 700; }
::selection { background: rgba(255, 94, 196, .22); }
:focus-visible { outline: 2px solid var(--pink-b); outline-offset: 3px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- gradienty tekstu ---------- */
.grad, .grad-pink { background: linear-gradient(90deg, var(--pink-a), var(--pink-b)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.grad-green { background: linear-gradient(90deg, var(--green-a), var(--green-b)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.grad-blue { background: linear-gradient(90deg, var(--blue-a), var(--blue-b)); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- nawigacja ---------- */
.site-nav {
  position: sticky; top: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 16px var(--gutter);
  background: var(--gray-bg);
  border-bottom: 1px solid var(--chip-border);
}
.brand { display: flex; align-items: flex-end; gap: 14px; text-decoration: none; color: var(--ink); }
.brand img { height: 36px; width: auto; }
.brand .tagline { font-family: 'Manrope', sans-serif; font-weight: 500; font-size: 16px; color: var(--ink-faint); letter-spacing: .2px; line-height: 1; padding-bottom: 3px; }
.nav-right { display: flex; align-items: center; gap: 12px; }
.nav-cta {
  font-family: 'Manrope', sans-serif; font-weight: 800; font-size: 14px; color: #fff; text-decoration: none; white-space: nowrap;
  padding: 11px 22px; background: linear-gradient(90deg, var(--pink-a), var(--pink-b));
  transition: transform .25s ease, box-shadow .25s ease;
}
.nav-cta:hover { transform: translateY(-2px); box-shadow: 0 10px 22px -8px rgba(216, 54, 190, .5); }
@media (max-width: 760px) {
  .site-nav .nav-chips { display: none; }
  .brand img { height: 28px; }
  .brand .tagline { font-size: 14px; padding-bottom: 2px; }
  .site-nav { padding: 12px 16px; }
  .nav-cta { padding: 10px 14px; }
}

/* ---------- chipy (jak menu breinz.ai) ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; }
.chip {
  display: inline-block;
  font-family: 'Manrope', sans-serif; font-weight: 400; font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--ink-soft); background: #fff; border: 1px solid var(--ink-soft);
  padding: 6px 14px; text-decoration: none; white-space: nowrap; line-height: 1.4;
  transition: border-color .25s ease, color .25s ease;
}
a.chip:hover, a.chip:focus-visible, button.chip:hover, button.chip:focus-visible, .chip[aria-selected="true"] {
  border-color: transparent; background: linear-gradient(90deg, var(--pink-a), var(--pink-b)) border-box; color: #fff; outline: none;
}
button.chip { cursor: pointer; }
.chip.stack { position: relative; }
.chip.stack::after { content: ""; position: absolute; top: 3px; left: 3px; right: -5px; bottom: -5px; border: 1px solid var(--ink-soft); background: #fff; z-index: -1; pointer-events: none; }
.chip.stack:hover::after { display: none; }
.chip.cichy { border-color: var(--chip-border); color: var(--ink-quiet); }

/* ---------- przyciski ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: 'Manrope', sans-serif; font-weight: 800; font-size: 16px; color: #fff; text-decoration: none; border: 0; cursor: pointer;
  padding: 17px 34px; background: linear-gradient(90deg, var(--pink-a), var(--pink-b));
  box-shadow: 0 12px 30px -8px rgba(216, 54, 190, .45);
  transition: transform .25s ease, box-shadow .25s ease;
}
.btn:hover { transform: translateY(-3px); box-shadow: 0 18px 38px -8px rgba(216, 54, 190, .55); }
.btn svg { width: 18px; height: 18px; transition: transform .25s ease; }
.btn:hover svg { transform: translateX(4px); }
.btn.maly { font-size: 14px; padding: 11px 20px; box-shadow: none; }
.btn-ramka {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'Manrope', sans-serif; font-weight: 700; font-size: 14px; color: var(--ink); text-decoration: none; background: #fff; cursor: pointer;
  border: 1px solid var(--ink-soft); padding: 10px 18px; transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.btn-ramka:hover { border-color: transparent; background: linear-gradient(90deg, var(--pink-a), var(--pink-b)) border-box; color: #fff; }
.btn-ramka .zew { font-size: 12px; opacity: .7; }

/* ---------- hero ---------- */
.hero { position: relative; background: var(--gray-bg); isolation: isolate; overflow: hidden; }
.glow { position: absolute; border-radius: 50%; filter: blur(110px); opacity: .13; z-index: -1; animation: drift 14s ease-in-out infinite alternate; }
.glow.a { width: 480px; height: 480px; background: var(--accent-a); top: -120px; left: -100px; }
.glow.b { width: 420px; height: 420px; background: var(--accent-b); bottom: -80px; right: -80px; animation-delay: -7s; }
@keyframes drift { from { transform: translate(0, 0) scale(1); } to { transform: translate(60px, 40px) scale(1.1); } }
@media (prefers-reduced-motion: reduce) { .glow { animation: none; } html { scroll-behavior: auto; } }
.hero-in { max-width: 1100px; margin: 0 auto; padding: clamp(64px, 10vw, 120px) var(--gutter) clamp(64px, 9vw, 110px); text-align: center; display: flex; flex-direction: column; align-items: center; }
.kicker { font-family: 'Manrope', sans-serif; font-weight: 800; font-size: 13px; letter-spacing: 2.5px; text-transform: uppercase; background: linear-gradient(90deg, var(--pink-a), var(--pink-b)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.kicker.green { background-image: linear-gradient(90deg, var(--green-a), var(--green-b)); }
.kicker.blue { background-image: linear-gradient(90deg, var(--blue-a), var(--blue-b)); }
h1, h2, h3 { font-family: 'Manrope', sans-serif; font-weight: 800; color: var(--ink); }
.hero h1 { font-size: clamp(2.3rem, 6vw, 4.4rem); line-height: 1.1; letter-spacing: -2px; max-width: 16ch; margin-top: 18px; }
.hero .sub { font-family: 'Manrope', sans-serif; font-weight: 300; margin-top: 28px; font-size: clamp(1rem, 1.6vw, 1.2rem); line-height: 1.65; color: var(--ink-soft); max-width: 58ch; }
.hero .mark { height: 46px; width: auto; margin-bottom: 26px; }
.hero .logo-ga { width: 64px; height: 64px; margin-bottom: 24px; }
.wstecz { align-self: flex-start; font-family: 'Manrope', sans-serif; font-size: 13px; color: var(--ink-quiet); text-decoration: none; margin-bottom: 28px; }
.wstecz:hover { color: var(--pink-b); }
@media (max-width: 640px) { .hero h1 { letter-spacing: -1px; } }

/* ---------- sekcje ---------- */
.sekcja { padding: clamp(72px, 9vw, 110px) var(--gutter); }
.sekcja.szara { background: var(--gray-bg); }
.wnetrze { max-width: 1200px; margin: 0 auto; }
.wnetrze.waskie { max-width: 900px; }
.glowa { text-align: center; margin-bottom: clamp(40px, 6vw, 64px); }
.glowa h2 { font-size: clamp(1.9rem, 4vw, 3rem); letter-spacing: -1px; margin-top: 14px; }
.glowa p:not(.kicker) { font-family: 'Manrope', sans-serif; font-weight: 300; color: var(--ink-soft); margin: 18px auto 0; max-width: 56ch; line-height: 1.7; font-size: 1.05rem; }
.tekst { font-family: 'Manrope', sans-serif; font-weight: 300; font-size: 1.05rem; line-height: 1.75; color: var(--ink-soft); }
.tekst strong, .tekst b { font-weight: 700; color: var(--ink); }

/* ---------- kafelki narzędzi ---------- */
.kafelki { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 380px)); justify-content: center; gap: clamp(20px, 3vw, 32px); }
.kafelek {
  position: relative; display: flex; flex-direction: column; gap: 18px;
  background: var(--gray-bg); padding: clamp(28px, 3.4vw, 40px); text-decoration: none; color: inherit; min-height: 380px;
  border: 1px solid transparent; transition: transform .3s cubic-bezier(.22, 1, .36, 1), box-shadow .3s ease, border-color .3s ease, background .3s ease;
}
a.kafelek:hover, a.kafelek:focus-visible { transform: translateY(-4px); background: #fff; border-color: var(--ink-soft); box-shadow: 8px 8px 0 -1px #fff, 8px 8px 0 0 var(--ink-soft); outline: none; }
.kafelek .gora { isolation: isolate; display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.kafelek .logo { width: 56px; height: 56px; }
.kafelek h3 { font-size: clamp(1.5rem, 2.4vw, 1.9rem); letter-spacing: -.5px; line-height: 1.15; }
.kafelek .opis { font-family: 'Manrope', sans-serif; font-weight: 300; font-size: 1rem; line-height: 1.65; color: var(--ink-soft); flex: 1; }
.kafelek .dol { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding-top: 18px; border-top: 1px solid var(--chip-border); }
.kafelek .dalej { font-family: 'Manrope', sans-serif; font-weight: 800; font-size: 15px; display: inline-flex; align-items: center; gap: 8px; }
.kafelek .dalej svg { width: 16px; height: 16px; color: var(--pink-b); transition: transform .25s ease; }
a.kafelek:hover .dalej svg { transform: translateX(4px); }
.kafelek .adres { font-family: var(--mono); font-size: 12px; color: var(--ink-quiet); overflow-wrap: anywhere; }
.kafelek.wkrotce { background: #fff; border: 1px solid var(--chip-border); }
.kafelek.wkrotce .logo { opacity: .18; width: auto; height: 44px; }
.kafelek.wkrotce h3 { color: var(--ink-faint); }
.kafelek.wkrotce .dalej { color: var(--ink); text-decoration: none; }
.kafelek.wkrotce .dalej:hover { color: var(--pink-b); }

/* ---------- stopka ---------- */
.site-footer { background: #fff; border-top: 1px solid var(--chip-border); flex-shrink: 0; }
.copyright { padding: 18px 16px; text-align: center; font-family: 'Manrope', sans-serif; font-weight: 400; font-size: 13px; line-height: 1.6; color: var(--ink-quiet); }
.copyright .g { background: linear-gradient(90deg, var(--pink-a), var(--pink-b)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.copyright a { color: var(--pink-b); }