/* public/assets/style.css - LIGHT THEME */

/* RESET */

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

html { scroll-behavior: smooth; }

body { margin: 0; line-height: 1.55; }

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

a { color: inherit; text-decoration: none; }

a:hover { text-decoration: underline; }

button, input, select, textarea { font: inherit; }

/* THEME */

:root{

  --bg: #f6f8fc;

  --surface: #ffffff;

  --surface2: #f1f5fb;

  --text: #0B1F3B;

  --muted: rgba(11,31,59,0.72);

  --line: rgba(11,31,59,0.12);

  --accent: #22c1c3;   /* turkus */

  --accent2: #f2c14e;  /* złoto */

  --navy: #0B1F3B;

  --radius: 18px;

  --shadow: 0 14px 34px rgba(11,31,59,0.10);

  --container: 1120px;

}

body{

  background:

    radial-gradient(900px 900px at 10% 0%, rgba(34,193,195,0.14), transparent 60%),

    radial-gradient(900px 900px at 90% 0%, rgba(242,193,78,0.14), transparent 60%),

    var(--bg);

  color: var(--text);

  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Liberation Sans", sans-serif;

}

.container{

  width: min(var(--container), calc(100% - 32px));

  margin: 0 auto;

}

.small{ font-size: 0.94rem; color: var(--muted); }

.lead{ font-size: 1.08rem; color: var(--muted); }

.skip-link{

  position: absolute; left: -999px; top: 8px;

  background: #000; color: #fff; padding: 10px 12px; border-radius: 10px;

}

.skip-link:focus{ left: 12px; z-index: 9999; }

/* TOPBAR */

.topbar{

  position: sticky; top: 0; z-index: 1000;

  backdrop-filter: blur(10px);

  background: rgba(246,248,252,0.85);

  border-bottom: 1px solid var(--line);

}

.topbar__inner{

  display: flex; align-items: center; gap: 14px;

  padding: 12px 0;

}

.brand{

  display: flex; align-items: center; gap: 10px;

  min-width: 220px;

}

.brand__mark{

  width: 42px; height: 42px; border-radius: 14px;

  display: grid; place-items: center;

  background: linear-gradient(135deg, var(--navy), #133a6a);

  color: #fff;

  font-weight: 900;

  box-shadow: 0 10px 22px rgba(11,31,59,0.18);

}

.brand__name{ font-weight: 900; letter-spacing: 0.2px; display:block; }

.brand__tag{ font-size: 0.86rem; color: var(--muted); display:block; }

.nav{ margin-left: auto; position: relative; }

.nav__toggle{

  display: none;

  width: 44px; height: 44px; border-radius: 14px;

  background: var(--surface);

  border: 1px solid var(--line);

  color: var(--text);

}

.nav__toggle span{

  display:block; height: 2px; background: var(--text);

  margin: 7px 10px; border-radius: 2px;

}

.nav__list{

  display: flex; list-style: none; gap: 10px;

  padding: 0; margin: 0;

  align-items: center;

}

.nav__list a{

  padding: 10px 10px;

  border-radius: 14px;

  color: var(--muted);

}

.nav__list a:hover{

  color: var(--text);

  background: rgba(11,31,59,0.06);

  text-decoration: none;

}

.nav__cta{

  background: linear-gradient(135deg, rgba(34,193,195,0.22), rgba(242,193,78,0.20));

  border: 1px solid rgba(11,31,59,0.14);

  color: var(--text) !important;

}

.topbar__contact{ display: flex; align-items: center; }

.pill{

  display: inline-flex; align-items: center; gap: 8px;

  padding: 10px 12px;

  border-radius: 999px;

  border: 1px solid rgba(11,31,59,0.14);

  background: var(--surface);

  color: var(--text);

  box-shadow: 0 10px 22px rgba(11,31,59,0.08);

}

.pill:hover{ text-decoration: none; background: rgba(11,31,59,0.03); }

/* HERO */

.hero{ padding: 46px 0 10px; }

.hero__grid{

  display: grid;

  grid-template-columns: 1.25fr 0.75fr;

  gap: 16px;

  align-items: start;

}

.hero h1{

  margin: 0 0 12px;

  font-size: clamp(1.55rem, 2.2vw + 1rem, 2.55rem);

  line-height: 1.12;

  letter-spacing: -0.3px;

}

.hero__cta{ display: flex; gap: 12px; flex-wrap: wrap; margin: 18px 0 16px; }

.hero__bullets{

  display: flex;

  flex-wrap: wrap;

  gap: 10px;

  margin-top: 16px;

}

.chip{

  padding: 10px 12px;

  border-radius: 999px;

  background: rgba(11,31,59,0.04);

  border: 1px solid rgba(11,31,59,0.10);

  color: rgba(11,31,59,0.82);

  font-weight: 700;

  font-size: 0.94rem;

}

.hero__card .card{ position: sticky; top: 92px; }

/* SECTIONS */

.section{ padding: 56px 0; }

.section--alt{

  background: linear-gradient(180deg, rgba(11,31,59,0.02), rgba(11,31,59,0.01));

  border-top: 1px solid var(--line);

  border-bottom: 1px solid var(--line);

}

.section__head{ margin-bottom: 18px; }

.section__head h2{

  margin: 0 0 10px;

  font-size: clamp(1.25rem, 1vw + 1.1rem, 1.95rem);

}

.section__head p{ margin: 0; color: var(--muted); max-width: 80ch; }

/* CARD */

.card{

  border-radius: var(--radius);

  background: var(--surface);

  border: 1px solid var(--line);

  box-shadow: var(--shadow);

  padding: 16px;

}

.card--soft{ background: linear-gradient(180deg, #fff, #fbfcff); }

.card--highlight{

  border-color: rgba(34,193,195,0.40);

  box-shadow: 0 16px 40px rgba(34,193,195,0.12);

}

.card__title{ margin: 0 0 6px; font-size: 1.15rem; }

.card__desc{ margin: 0 0 12px; color: var(--muted); }

.note{

  margin-top: 14px;

  padding: 16px;

  border-radius: var(--radius);

  border: 1px solid rgba(34,193,195,0.30);

  background: rgba(34,193,195,0.10);

}

.mini-tip{

  margin-top: 12px;

  padding: 12px;

  border-radius: 14px;

  border: 1px solid rgba(242,193,78,0.35);

  background: rgba(242,193,78,0.16);

  color: rgba(11,31,59,0.86);

  font-weight: 650;

}

/* BUTTONS */

.btn{

  display: inline-flex; align-items: center; justify-content: center;

  gap: 8px;

  padding: 12px 14px;

  border-radius: 16px;

  border: 1px solid transparent;

  cursor: pointer;

  font-weight: 900;

}

.btn--primary{

  background: linear-gradient(135deg, rgba(34,193,195,0.95), rgba(242,193,78,0.92));

  color: #081426;

}

.btn--primary:hover{ filter: brightness(1.02); text-decoration: none; }

.btn--ghost{

  background: rgba(11,31,59,0.03);

  border-color: rgba(11,31,59,0.14);

  color: var(--text);

}

.btn--ghost:hover{ background: rgba(11,31,59,0.06); text-decoration: none; }

.btn--block{ width: 100%; }

.inline-cta{ display:flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; }

/* Floating CTA */

.floating-call{

  position: fixed;

  right: 14px;

  bottom: 14px;

  z-index: 999;

  padding: 12px 14px;

  border-radius: 999px;

  background: linear-gradient(135deg, rgba(34,193,195,0.95), rgba(242,193,78,0.92));

  color: #081426;

  font-weight: 900;

  border: 1px solid rgba(11,31,59,0.14);

  box-shadow: 0 16px 40px rgba(11,31,59,0.16);

  display: none;

}

.floating-call:hover{ text-decoration: none; filter: brightness(1.02); }

/* GRIDS */

.grid{ display:grid; gap: 14px; }

.cards{ grid-template-columns: repeat(3, 1fr); }

.two{ grid-template-columns: repeat(2, 1fr); }

.gminy{ grid-template-columns: repeat(3, 1fr); }

/* LISTS */

.ticks, .bullets{

  margin: 10px 0 0;

  padding-left: 18px;

  color: var(--muted);

}

.ticks li, .bullets li{ margin: 6px 0; }

.ticks li::marker{ content: "✓  "; color: var(--accent); font-weight: 900; }

/* FORMS */

.formgrid{ grid-template-columns: 1fr 1fr; gap: 12px; }

label span{ display:block; font-weight: 900; margin-bottom: 6px; }

input, select, textarea{

  width: 100%;

  padding: 12px 12px;

  border-radius: 16px;

  border: 1px solid rgba(11,31,59,0.16);

  background: rgba(11,31,59,0.02);

  color: var(--text);

  outline: none;

}

input:focus, select:focus, textarea:focus{

  border-color: rgba(34,193,195,0.75);

  box-shadow: 0 0 0 4px rgba(34,193,195,0.16);

  background: #fff;

}

textarea{ resize: vertical; }

.full{ grid-column: 1 / -1; }

.checkbox{ display:flex; align-items: flex-start; gap: 10px; }

.checkbox input{ width: 18px; height: 18px; margin-top: 3px; }

.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.form-actions{ margin-top: 10px; }

/* FAQ */

.faq details{

  border: 1px solid rgba(11,31,59,0.14);

  border-radius: 16px;

  background: var(--surface);

  padding: 10px 12px;

  margin: 10px 0;

  box-shadow: 0 10px 22px rgba(11,31,59,0.06);

}

.faq summary{

  cursor: pointer;

  font-weight: 900;

  color: var(--text);

  outline: none;

}

.faq__a{ margin-top: 8px; color: var(--muted); }

/* CONTACT */

.contact{

  display: grid;

  grid-template-columns: 0.95fr 1.05fr;

  gap: 14px;

  align-items: start;

}

.big a{ font-size: 1.25rem; font-weight: 1000; }

/* FOOTER */

.footer{

  border-top: 1px solid var(--line);

  padding: 30px 0 18px;

  background: rgba(11,31,59,0.02);

}

.footer__grid{

  display:grid;

  grid-template-columns: 1.2fr 1fr 1fr 1fr;

  gap: 14px;

}

.footer__brand{ font-weight: 1000; margin-bottom: 6px; }

.footer__head{ font-weight: 1000; margin-bottom: 6px; }

.footer__bottom{ margin-top: 18px; display:flex; justify-content: space-between; opacity: 0.9; }

.partner__link img{

  display:block;

  background: var(--surface);

  border: 1px solid rgba(11,31,59,0.14);

  border-radius: 14px;

  padding: 6px 10px;

}

.linklike{

  background: none;

  border: none;

  padding: 0;

  color: var(--text);

  text-decoration: underline;

  cursor: pointer;

}

/* COOKIE */

.cookie{

  position: fixed;

  inset: auto 0 0 0;

  z-index: 2000;

  padding: 14px;

  background: rgba(246,248,252,0.92);

  border-top: 1px solid var(--line);

  backdrop-filter: blur(10px);

}

.cookie__inner{

  width: min(var(--container), calc(100% - 32px));

  margin: 0 auto;

  display:flex;

  gap: 12px;

  align-items:center;

  justify-content: space-between;

}

.cookie__text{ color: var(--muted); max-width: 78ch; }

.cookie__actions{ display:flex; gap: 10px; }

/* RESPONSIVE */

@media (max-width: 980px){

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

  .hero__card .card{ position: relative; top: auto; }

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

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

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

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

}

@media (max-width: 720px){

  .nav__toggle{ display: inline-block; }

  .nav__list{

    position: absolute;

    right: 16px;

    top: 64px;

    width: min(360px, calc(100vw - 32px));

    flex-direction: column;

    align-items: stretch;

    background: var(--surface);

    border: 1px solid var(--line);

    border-radius: 18px;

    padding: 10px;

    box-shadow: var(--shadow);

    display: none;

  }

  .nav__list.is-open{ display: flex; }

  .topbar__contact{ display: none; }

  .floating-call{ display: inline-flex; }

  /* Mobil: ładnie na środku */

  .section__head{ text-align: center; }

  .section__head p{ margin: 0 auto; }

  .hero__copy{ text-align: center; }

  .hero__cta{ justify-content: center; }

  .hero__bullets{ justify-content: center; }

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

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

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

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

  .cookie__inner{ flex-direction: column; align-items: stretch; }

  .cookie__actions{ justify-content: stretch; }

  .cookie__actions .btn{ width: 100%; }

}