/* ==========================================================================
   biliard.pl — główny arkusz stylów
   ========================================================================== */

/* ----- Fonty (lokalne, bez Google) ----- */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 200 800;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/bricolage-grotesque-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 200 800;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/bricolage-grotesque-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Familjen Grotesk';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/familjen-grotesk-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Familjen Grotesk';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/familjen-grotesk-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url("../fonts/jetbrains-mono-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url("../fonts/jetbrains-mono-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ----- Zmienne / tokeny ----- */
:root {
  --bg: #f4f1e9;
  --bg-alt: #efeadd;
  --panel: #fbfaf5;
  --ink: #16160f;
  --acid: #cddd1a;
  --acid-hover: #bccc10;
  --acid-dark: #5a5f0e;
  --text-soft: #4a463a;
  --text-mute: #5a5646;
  --text-dim: #6a6656;
  --text-faint: #8a8577;
  --text-ghost: #9a9483;
  --text-mist: #a39e8c;
  --line: #e6e1d3;
  --line-soft: #ece7d8;
  --line-strong: #d9d3c3;
  --line-nav: #e0dccf;
  --head-font: 'Bricolage Grotesque', sans-serif;
  --body-font: 'Familjen Grotesk', sans-serif;
  --mono-font: 'JetBrains Mono', monospace;
  --container: 1240px;
}

/* ----- Reset / baza ----- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body-font);
  min-height: 100vh;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
a:hover { color: var(--acid-dark); }

::selection { background: var(--acid); color: var(--ink); }

img { max-width: 100%; height: auto; }

[hidden] { display: none !important; }

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding-left: 32px;
  padding-right: 32px;
}

/* ----- Animacje ----- */
@keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes travel { 0% { transform: translateY(0); opacity: 0; } 8% { opacity: 1; } 90% { opacity: 1; } 100% { transform: translateY(206px); opacity: 0; } }
@keyframes ping { 0% { box-shadow: 0 0 0 0 rgba(205, 221, 26, 0.5); } 70%, 100% { box-shadow: 0 0 0 8px rgba(205, 221, 26, 0); } }
@keyframes barfill { 0% { width: 22%; } 100% { width: 94%; } }
@keyframes glowrow { 0%, 100% { background: #f7f4ec; } 50% { background: #f0f2d6; } }

/* ==========================================================================
   NAGŁÓWEK / NAWIGACJA
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(244, 241, 233, 0.82);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line-nav);
}

.site-header__inner {
  height: 74px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}

/* logo */
.logo { display: flex; align-items: center; gap: 10px; }
.logo:hover { color: inherit; }

.logo__mark {
  width: 34px;
  height: 34px;
  border-radius: 3px;
  background: var(--ink);
  display: flex;
  align-items: baseline;
  justify-content: center;
  padding-top: 7px;
}

.logo__mark-letter {
  font-family: var(--head-font);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: -0.03em;
  color: var(--bg);
  line-height: 1;
}

.logo__name {
  display: flex;
  align-items: baseline;
  font-family: var(--head-font);
  font-weight: 700;
  font-size: 23px;
  letter-spacing: -0.03em;
}

.logo .dot { color: var(--acid); }

/* menu */
.main-nav {
  display: flex;
  align-items: center;
  gap: 34px;
  font-size: 15px;
  font-weight: 500;
}

.main-nav a { display: flex; align-items: center; gap: 5px; }
.main-nav .caret { font-size: 10px; color: var(--text-faint); }

/* CTA w nagłówku */
.btn-nav {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--ink);
  color: var(--bg);
  font-weight: 600;
  font-size: 14.5px;
  padding: 12px 20px;
  border-radius: 3px;
  white-space: nowrap;
}
.btn-nav:hover { background: #2a2a1e; color: var(--bg); }
.btn-nav .dot-pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--acid); }

/* hamburger (mobile) */
.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--line-strong);
  border-radius: 3px;
  padding: 8px 10px;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  color: var(--ink);
}

/* ==========================================================================
   PRZYCISKI
   ========================================================================== */

.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--acid);
  color: var(--ink);
  font-weight: 600;
  font-size: 16px;
  padding: 16px 26px;
  border-radius: 3px;
}
.btn-primary:hover { background: var(--acid-hover); color: var(--ink); }

.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  font-weight: 600;
  font-size: 16px;
  padding: 16px 22px;
  border-radius: 3px;
}
.btn-ghost .square { width: 8px; height: 8px; background: var(--acid); }

.link-underline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ink);
  font-weight: 600;
  font-size: 15px;
  border-bottom: 2px solid var(--acid);
  padding-bottom: 2px;
}

/* ==========================================================================
   NAGŁÓWKI SEKCJI (kicker + tytuł)
   ========================================================================== */

.kicker {
  font-family: var(--mono-font);
  font-size: 12.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.kicker::before { content: ""; width: 24px; height: 2px; background: var(--acid); flex: 0 0 auto; }

.section-title {
  font-family: var(--head-font);
  font-weight: 600;
  font-size: 44px;
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin: 0;
}

/* ==========================================================================
   HERO
   ========================================================================== */

.hero {
  position: relative;
  max-width: var(--container);
  margin: 0 auto;
  padding: 88px 32px 96px;
}

.hero__blob {
  position: absolute;
  top: -40px;
  right: -120px;
  width: 520px;
  height: 520px;
  background: radial-gradient(circle at 40% 40%, rgba(205, 221, 26, 0.20), rgba(205, 221, 26, 0) 66%);
  pointer-events: none;
}

.hero__grid-accent {
  position: absolute;
  top: 0;
  right: 0;
  width: 340px;
  height: 340px;
  background-image: linear-gradient(#e3ddcc 1px, transparent 1px), linear-gradient(90deg, #e3ddcc 1px, transparent 1px);
  background-size: 26px 26px;
  opacity: 0.5;
  mask-image: radial-gradient(circle at 80% 20%, #000 0%, transparent 68%);
  -webkit-mask-image: radial-gradient(circle at 80% 20%, #000 0%, transparent 68%);
  pointer-events: none;
}

.hero__layout {
  position: relative;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 56px;
  align-items: center;
}

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono-font);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #7a7565;
  margin-bottom: 26px;
}
.hero__eyebrow::before { content: ""; width: 24px; height: 2px; background: var(--acid); }

.hero__title {
  font-family: var(--head-font);
  font-weight: 600;
  font-size: 62px;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0 0 24px;
  text-wrap: balance;
}

.hero__title .hl { position: relative; white-space: nowrap; }
.hero__title .hl::after {
  content: "";
  position: absolute;
  left: -2px;
  right: -2px;
  bottom: 5px;
  height: 14px;
  background: var(--acid);
  z-index: -1;
}

.hero__lead {
  font-size: 18.5px;
  line-height: 1.6;
  color: var(--text-soft);
  max-width: 520px;
  margin: 0 0 36px;
}

.hero__actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }

.hero__stats {
  display: flex;
  align-items: center;
  gap: 26px;
  margin-top: 44px;
  flex-wrap: wrap;
}

.stat__value {
  font-family: var(--head-font);
  font-weight: 700;
  font-size: 30px;
  line-height: 1;
}
.stat__label { font-size: 13px; color: var(--text-dim); margin-top: 4px; }
.stat-divider { width: 1px; height: 38px; background: #ddd8c9; }

/* --- panel „proces zautomatyzowany" --- */

.automation-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 3px;
  box-shadow: 0 40px 80px -46px rgba(30, 28, 15, 0.34);
}

.automation-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line-soft);
}

.automation-card__status { display: flex; align-items: center; gap: 10px; }
.automation-card__status .dot-live {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--acid);
  animation: ping 1.6s ease-out infinite;
}
.automation-card__status-label { font-weight: 600; font-size: 14px; }

.automation-card__counter { text-align: right; }
.automation-card__counter-label {
  font-family: var(--mono-font);
  font-size: 9.5px;
  letter-spacing: 0.08em;
  color: var(--text-mist);
  text-transform: uppercase;
  margin-bottom: 1px;
}
.automation-card__counter-value {
  font-family: var(--head-font);
  font-weight: 700;
  font-size: 16px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.pipeline { position: relative; padding: 8px 20px 4px; }
.pipeline__track { position: absolute; left: 37px; top: 38px; height: 170px; width: 2px; background: var(--line); }
.pipeline__pulse {
  position: absolute;
  left: 33px;
  top: 34px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--acid);
  box-shadow: 0 0 0 4px rgba(205, 221, 26, 0.22);
  animation: travel 3.4s ease-in-out infinite;
}

.pipeline__step { display: flex; align-items: center; gap: 16px; height: 72px; }
.pipeline__icon {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
  position: relative;
  z-index: 1;
}
.pipeline__icon--dark { background: var(--ink); color: var(--acid); }
.pipeline__icon--acid { background: var(--acid); color: var(--ink); }
.pipeline__icon--mono { font-family: var(--mono-font); }
.pipeline__icon--check { font-size: 16px; }

.pipeline__step-title { font-weight: 600; font-size: 14.5px; }
.pipeline__step-desc { font-size: 12.5px; color: var(--text-faint); }

.compare { display: flex; align-items: stretch; border-top: 1px solid var(--line-soft); }
.compare__cell { flex: 1; padding: 16px 20px; }
.compare__cell--before { border-right: 1px solid var(--line-soft); }
.compare__cell--after { background: var(--ink); }

.compare__label {
  font-family: var(--mono-font);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-mist);
  margin-bottom: 6px;
}
.compare__cell--after .compare__label { color: var(--acid); }

.compare__value--before {
  font-weight: 600;
  font-size: 19px;
  color: var(--text-ghost);
  text-decoration: line-through;
  text-decoration-color: #cabf6a;
}
.compare__value--after {
  font-family: var(--head-font);
  font-weight: 700;
  font-size: 19px;
  color: var(--bg);
}

/* ==========================================================================
   PASEK INTEGRACJI
   ========================================================================== */

.logo-strip {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--bg-alt);
}

.logo-strip__inner {
  padding-top: 22px;
  padding-bottom: 22px;
  display: flex;
  align-items: center;
  gap: 34px;
  flex-wrap: wrap;
}

.logo-strip__label {
  font-family: var(--mono-font);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--text-faint);
  text-transform: uppercase;
  white-space: nowrap;
}

.logo-strip__brands {
  display: flex;
  align-items: center;
  gap: 30px;
  flex-wrap: wrap;
  font-weight: 600;
  font-size: 16px;
  color: #7c7768;
}

/* ==========================================================================
   SEKCJA: PROBLEMY
   ========================================================================== */

.section { padding-top: 92px; padding-bottom: 92px; }

.section__head { max-width: 640px; margin-bottom: 52px; }
.section__head .section-title { max-width: 520px; }
.section__lead { font-size: 17px; line-height: 1.6; color: var(--text-soft); margin: 18px 0 0; max-width: 560px; }

.problems-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 48px;
  border-top: 1px solid var(--line-strong);
}

.problem {
  padding: 30px 16px 30px 0;
  border-bottom: 1px solid var(--line-strong);
}

.problem__num {
  font-family: var(--mono-font);
  font-size: 13px;
  color: var(--text-ghost);
  margin-bottom: 16px;
}
.problem__num--accent { color: var(--acid-dark); }

.problem__title {
  font-family: var(--head-font);
  font-weight: 600;
  font-size: 21px;
  margin: 0 0 10px;
}

.problem__desc {
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-mute);
  margin: 0;
}
.problem__desc + .link-underline { margin-top: 14px; }

/* ==========================================================================
   STOPKA
   ========================================================================== */

.site-footer {
  background: var(--ink);
  color: var(--bg);
  margin-top: 40px;
}

.site-footer a:hover { color: var(--acid); }

.site-footer__main {
  padding-top: 64px;
  padding-bottom: 48px;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 48px;
}

.site-footer .logo__name { color: var(--bg); }
.site-footer .logo__mark { background: var(--bg); }
.site-footer .logo__mark-letter { color: var(--ink); }

.site-footer__tagline {
  font-size: 14.5px;
  line-height: 1.6;
  color: #b8b4a4;
  max-width: 300px;
  margin: 18px 0 0;
}

.site-footer__heading {
  font-family: var(--mono-font);
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #8a8577;
  margin: 0 0 18px;
}

.site-footer__heading--gap { margin-top: 40px !important; }

.site-footer__links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 14.5px;
}

.site-footer__bottom {
  border-top: 1px solid #2e2e22;
  padding-top: 22px;
  padding-bottom: 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 13px;
  color: #8a8577;
}

.site-footer__legal { display: flex; gap: 22px; }

/* ==========================================================================
   RESPONSYWNOŚĆ
   ========================================================================== */

@media (max-width: 1024px) {
  .hero__layout { grid-template-columns: 1fr; gap: 48px; }
  .hero__title { font-size: 52px; }
  .problems-grid { grid-template-columns: repeat(2, 1fr); column-gap: 36px; }
  .site-footer__main { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 720px) {
  .main-nav {
    display: none;
    position: absolute;
    top: 74px;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    background: var(--bg);
    border-bottom: 1px solid var(--line-nav);
    padding: 8px 32px 16px;
  }
  .main-nav.is-open { display: flex; }
  .main-nav a { padding: 12px 0; width: 100%; }

  .nav-toggle { display: none; }
  .btn-nav { padding: 10px 14px; font-size: 13px; }

  .hero { padding-top: 56px; padding-bottom: 64px; }
  .hero__title { font-size: 40px; }
  .hero__blob, .hero__grid-accent { display: none; }

  .section { padding-top: 64px; padding-bottom: 64px; }
  .section-title { font-size: 34px; }

  .problems-grid { grid-template-columns: 1fr; }

  .site-footer__main { grid-template-columns: 1fr; gap: 36px; }
}

/* ----- Stopka: co znaczy biliard ----- */
.site-footer__note { font-size: 13.5px; line-height: 1.6; color: #b8b4a4; max-width: 300px; margin: 18px 0 0; }
.site-footer__note sup { font-size: 0.7em; }

/* ----- Stopka: dane podmiotu ----- */
.site-footer__company {
  font-family: var(--mono-font);
  font-size: 11.5px;
  line-height: 1.7;
  color: #8a8577;
  margin: 22px 0 0;
  letter-spacing: 0.02em;
}

/* ----- Blog na stronie głównej ----- */
.section--blog { padding-top: 0; }
#co-robimy { padding-top: 32px; }
.post-list--home { max-width: none; margin: 0; grid-template-columns: 1fr 1fr; padding-bottom: 0; }
@media (max-width: 720px) { .post-list--home { grid-template-columns: 1fr; } }

/* ----- Kto za tym stoi ----- */
.author__inner { display: flex; align-items: center; gap: 14px; margin-top: 40px; max-width: 520px; }
.author__photo { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; object-position: 50% 20%; flex: 0 0 52px; border: 2px solid var(--acid); }
.author__desc { font-size: 13.5px; color: var(--text-dim); line-height: 1.55; margin: 0; }
.author__desc strong { color: var(--ink); font-weight: 700; }