:root{
  /* tło jak wizytówka (ciemny grafit) */
  --bg:#1E1E1C;

  /* karty/panele trochę jaśniejsze od tła */
 --card: #121211;

  /* tekst */
  --text:#F2F2F0;
  --muted:#B8B8B2;

  /* akcent (złoto z logo) */
  --accent:#C6A15B;

  /* obramowania i cienie */
  --border: rgba(198,161,91,.18);
  --shadow: 0 10px 30px rgba(0,0,0,.35);
  --radius: 18px;
}


*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Liberation Sans", sans-serif;
  /* background: */
   /*radial-gradient(900px 600px at 20% 10%, rgba(198,161,91,.14), transparent 60%),
  radial-gradient(900px 600px at 85% 15%, rgba(198,161,91,.08), transparent 55%),
  var(--bg); */

   background: var(--card);

  color:var(--text);
  line-height:1.6;
}

a{color:inherit}

.container{
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 24px;
}


.nav{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:16px 18px;border:1px solid var(--border);border-radius:999px;
  /* background: rgba(17,27,46,.7); backdrop-filter: blur(10px); */
   background: var(--card);
  box-shadow: var(--shadow);
}
.brand{font-weight:700;letter-spacing:.3px}
.lang a{
  display:inline-block;padding:8px 12px;border-radius:999px;
  border:1px solid var(--border); text-decoration:none; color:var(--muted);
}
.lang a:hover{border-color:rgba(255,255,255,.25); color:var(--text)}
.lang a.active{background:rgba(106,166,255,.18); color:var(--text); border-color:rgba(106,166,255,.35)}

.hero{
  padding: 56px 0 24px;
}


/* Opcjonalnie: żeby przyciski ładnie “siadały” pod tekstem */
.hero-inner .cta .btn{
  min-width: 120px;
}

.hero-subline{
  font-size: clamp(16px, 2vw, 18px);
  color: var(--muted);
  margin-top: 10px;
}

.hero-langs{
  white-space: nowrap;  /* kluczowe */
  opacity: .9;
  font-weight: 500;
}

.hero h1{font-size: clamp(28px, 4vw, 46px); line-height:1.15; margin:0 0 12px}
.hero p{max-width:820px;color:var(--muted);margin:0 0 18px;font-size: clamp(16px, 2vw, 18px)}
.badges{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0 24px}
.badge{
  border:1px solid var(--border); color:var(--muted);
  padding:8px 12px;border-radius:999px;background: rgba(17,27,46,.55);
}

/* Hero uses the same content axis as the rest of the page */
.hero-wrap{
  max-width: 840px;   /* dopasuj do tego, co masz w innych sekcjach */
  margin: 0 auto;
  padding: 0 24px;
}



.hero .hero-inner{
  max-width: 840px;
  margin: 0 auto;   /* <-- TO centruje blok */
  text-align: left;
}








.cta{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:18px}




/* ===== Buttons – black + gold (brand style) ===== */

.btn{
  display:inline-block;
  text-decoration:none;
  padding:12px 18px;
  border-radius:12px;

  background: var(--card);
  color: var(--text);

  border: 1px solid rgba(198,161,91,.35);
  transition: all .2s ease;
}

.btn.primary{
  border-color: var(--accent);
}

.btn.secondary{
  border-color: rgba(198,161,91,.25);
  color: var(--text);
}

.btn:hover{
  background: rgba(198,161,91,.12);
  border-color: var(--accent);
}


.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:16px;margin:20px 0 0}
.card{
  grid-column: span 12;
  border:1px solid var(--border);
  border-radius: var(--radius);
  /* background: rgba(17,27,46,.65); */
   background: var(--card);
  box-shadow: var(--shadow);
  padding:18px 18px;
}
.card h2{margin:0 0 8px;font-size:20px}
.card p{margin:0;color:var(--muted)}
.list{margin:10px 0 0;padding-left:18px;color:var(--muted)}
.list li{margin:6px 0}

@media (min-width: 860px){
  .card.span6{grid-column: span 6;}
  .card.span4{grid-column: span 4;}
}

.footer{
  margin:34px 0 10px;
  color: var(--muted);
  font-size: 14px;
  display:flex; flex-wrap:wrap; gap:10px; justify-content:space-between; align-items:center;
  border-top:1px solid var(--border);
  padding-top:16px;
}
.small{font-size:13px;color:var(--muted)}

.hero-center{
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.hero-center h1{
  margin-left: auto;
  margin-right: auto;
}

/* Landing – przyciski wyrównane do lewej krawędzi */
/* Landing: przyciski mają wyrównywać się do lewej krawędzi bloku */
/*.hero-inner .cta{
  width: 100%;
  justify-content: flex-start !important;
}

.hero-inner .cta .btn:first-child{
  margin-left: 0;
} */

/* Landing – przyciski dopasowane do szerokości tekstu */
.hero-inner .cta{
  width: max-content;      /* nie 100% */
  max-width: 100%;
  justify-content: flex-start;
}

.hero-inner .cta .btn{
  flex: 1;
  min-width: 140px;        /* kontrola minimalnej szerokości */
  text-align: center;
}


.hero-inner .cta .btn{
  flex: 1;                 /* KAŻDY przycisk zajmuje tyle samo miejsca */
  text-align: center;
}

/* Landing – helper text nie szerszy niż opis */
.hero-inner .small{
  max-width: 480px;
}

/* Mobile fix: nav układa się równo w nagłówku */
@media (max-width: 520px){
  .nav{
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    border-radius: 18px; /* opcjonalnie, może wyglądać lepiej przy 2 liniach */
  }
  .brand{
    width: 100%;
    text-align: center;
  }
  .lang{
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 8px;
  }
  .lang a{
    flex: 1;            /* równe „kafelki” */
    text-align: center;
  }
}


h1, h2{
  color: var(--accent);
}

.lang a.active{
  color: var(--accent);
  border-color: var(--accent);
}

.lang a:hover{
  border-color: var(--accent);
}

/* ===== Brand (logo + name) ===== */

.brand{
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
}

.brand img{
  height: 28px;      /* desktop */
  width: auto;
  display: block;
}

@media (max-width: 520px){
  .brand{
    justify-content: center;
  }
  .brand img{
    height: 32px;   /* logo może być trochę większe na mobile */
  }
}

footer{
  margin-top: 60px;
  padding: 30px 0 20px;
  border-top: 1px solid rgba(198,161,91,.2);
}

.footer-top{
  display:flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 14px;
}

.footer-right a{
  text-decoration: none;
  color: var(--muted);
  transition: color .2s ease;
}

.footer-right a:hover{
  color: var(--accent);
}

.company-data{
  margin-top: 12px;
  font-size: 12px;
  color: var(--muted);
  opacity: .85;
  line-height: 1.6;
}

@media (max-width: 600px){
  .footer-top{
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .footer-right{
    line-height: 1.8;
  }
}

/* ===== Clean centered footer ===== */

.footer-clean{
  margin-top: 70px;
  padding: 35px 20px 25px;
  border-top: 1px solid rgba(198,161,91,.2);
  text-align: center;
}

.footer-line{
  max-width: 1100px;        /* taka sama szerokość jak content */
  margin: 0 auto;
}

.footer-copy{
  font-size: 14px;
  margin-bottom: 10px;
}

.footer-links{
  font-size: 14px;
  margin-bottom: 14px;
}

.footer-links a{
  text-decoration: none;
  color: var(--muted);
  transition: color .2s ease;
}

.footer-links a:hover{
  color: var(--accent);
}

.footer-company{
  font-size: 12px;
  color: var(--muted);
  opacity: .85;
  line-height: 1.6;
}

@media (max-width: 600px){
  .footer-links{
    line-height: 1.8;
  }

  .footer-company{
    padding: 0 10px;
  }
}

/* ===== Premium footer polish ===== */

.footer-clean{
  position: relative;
}

.footer-clean::before{
  content:"";
  display:block;
  height: 1px;
  max-width: 1100px;
  margin: 0 auto 18px;
  background: linear-gradient(90deg, transparent, rgba(198,161,91,.45), transparent);
}

.footer-copy{
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: 13px;
  color: var(--text);
  opacity: .92;
}

.footer-links{
  font-size: 13px;
  opacity: .92;
}

.footer-company{
  max-width: 980px;
  margin: 0 auto;
}

/* ===== Premium surfaces ===== */

.card, .box, .panel, .section, .nav{
  border-color: rgba(198,161,91,.18);
  box-shadow: 0 18px 40px rgba(0,0,0,.35);
  backdrop-filter: blur(6px);
}

h1{
  letter-spacing: -0.02em;
}

h2{
  letter-spacing: -0.01em;
}