/* ========== Base ========== */
:root{
  --bg: #f7f6f3;
  --ink: #0f1a1b;
  --muted: #6c7a7b;
  --teal: #227f86;
  --teal-700:#1a666c;
  --card:#227f86;
  --light:#ffffff;
  --shadow: 0 10px 30px rgba(0,0,0,.08);
  --radius: 18px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:'Poppins',system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,'Helvetica Neue',Arial,'Noto Sans',sans-serif;
  color:var(--ink);
  background:var(--bg);
  line-height:1.6;
}

/* ========== Layout helpers ========== */
.container{
  width:min(1150px, 92%);
  margin-inline:auto;
}

h1,h2,h3,h4{margin:0 0 .6rem}
h2{font-size: clamp(28px, 4vw, 40px)}
h3{font-size: clamp(20px, 2.2vw, 26px)}
pp {
  color: #000;
}


/* ========== Topbar ========== */
.topbar{
  position:sticky; top:0; z-index:50;
  background:#fff;
  border-bottom:1px solid #eef0f1;
  box-shadow:0 3px 12px rgba(0,0,0,.03);
}
.topbar__inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:.8rem 0;
}
.logo{display:flex;flex-direction:column;text-decoration:none;color:var(--ink)}
.logo__mark{font-weight:700;letter-spacing:.5px}
.logo__accent{color:var(--teal);font-weight:700;margin-left:.25rem}
.logo small{color:var(--muted);font-size:.72rem}

.nav{display:flex;gap:1rem;flex-wrap:wrap}
.nav__link{
  text-decoration:none;color:#2a2f30;font-weight:500;opacity:.85;
  padding:.4rem .6rem;border-radius:10px
}
.nav__link:hover{background:#f1f6f6;color:var(--teal)}

/* ========== Hero ========== */
.hero{
  background: linear-gradient(135deg, #1b8690, #52a6ac);
  color:#fff;
  padding: 64px 0;
  position:relative;
  overflow:hidden;
}
.hero__content{display:grid;grid-template-columns: 1.2fr 1fr;gap:28px;align-items:center}
.hero__text h1{
  font-size: clamp(36px, 6vw, 60px);
  line-height:1.05;
}
.hero__text h1 span{
  display:block;font-size: clamp(16px, 2.2vw, 20px);font-weight:400;opacity:.9;letter-spacing:.3px
}
.hero__text p{margin:.8rem 0 1.4rem;color:#eaf9fb}
.hero__image{
  min-height:260px;border-radius:var(--radius);
  background:
    radial-gradient(80% 80% at 100% 0%, rgba(255,255,255,.35), transparent 60%),
    url('baner.jpg') center/cover no-repeat;
  box-shadow:var(--shadow);
  border:1px solid rgba(255,255,255,.2);
}

.btn{
  display:inline-block;
  background:#fff;color:var(--teal);
  border:2px solid transparent;
  padding:.8rem 1.2rem;border-radius:12px;
  font-weight:700;text-decoration:none;box-shadow:var(--shadow)
}
.btn:hover{transform:translateY(-1px);}
.btn--light{background:#fff;color:var(--teal)}
.btn--outline{background:transparent;color:#133; border-color:#c7d9db}

/* ========== Offer cards ========== */
.offer{padding:64px 0}
.cards{
  margin-top:24px;
  display:grid;gap:18px;
  grid-template-columns: repeat(2,1fr);
}
.card{
  background:var(--card); color:#fff; border-radius:24px;
  padding:28px; box-shadow:var(--shadow);
}
.card--wide{grid-column:1/-1}
.card__icon{font-size:28px;margin-bottom:6px}

/* ========== About ========== */
.about{padding:40px 0 20px}
.about h2{position:relative;display:inline-block}
.about h2::after{
  content:"";display:block;height:5px;border-radius:6px;
  width:60%;background:linear-gradient(90deg,var(--teal),#6bb7bd);margin-top:6px
}
.about__lead{max-width:900px}
.about__tagline{margin-top:.75rem;font-weight:600}

/* ========== Why Us ========== */
.why{padding:32px 0 56px;background:#0d1616 url('https://images.unsplash.com/photo-1498050108023-c5249f4df085?q=80&w=1200&auto=format&fit=crop') center/cover fixed; color:#fff}
.why h2{color:#fff}
.why__grid{
  margin-top:18px; display:grid; gap:12px;
  grid-template-columns: repeat(auto-fit,minmax(220px,1fr));
  list-style:none; padding:0
}
.why__grid li{
  background:rgba(0,0,0,.45); border:1px solid rgba(255,255,255,.12);
  padding:14px 16px; border-radius:14px
}

/* ========== Pricing ========== */
.plans{padding:60px 0}
.plans__subtitle{margin-top:24px;color:#173d3f}
.pricing{
  margin-top:18px;
  display:grid; gap:18px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.pricing--4{grid-template-columns: repeat(4, minmax(200px, 1fr))}
.pricecard{
  background:#fff;border:1px solid #e7eeef;border-radius:18px;padding:20px;
  box-shadow:var(--shadow);
}
.pricecard__header{
  font-weight:700;text-transform:uppercase;letter-spacing:.5px;
  padding:10px 12px; border-radius:12px; background:#eff6f7; display:inline-block; margin-bottom:10px
}
.pricecard__header.teal{background:#e6f2f3;color:#0b4246}
.price{font-size:28px;color:var(--teal);font-weight:800}
.pricecard ul{margin:10px 0 18px; padding-left:18px}

/* ========== TV features ========== */
.tv{padding:60px 0}
.tv__features{
  display:grid; gap:16px; margin:16px 0 28px;
  grid-template-columns: repeat(auto-fit, minmax(200px,1fr));
}
.tv__tile{
  background:#fff;border:1px solid #e7eeef;border-radius:18px;padding:16px;box-shadow:var(--shadow);
  display:flex;flex-direction:column;gap:6px
}
.tv__tile strong{font-size:18px}

/* ========== Contact ========== */
.contact{padding:60px 0}
.contact__grid{display:grid;gap:24px;grid-template-columns:1.1fr 1fr}
.contact__cta{
  background:var(--card); color:#fff; border-radius:22px; padding:28px;
  box-shadow:var(--shadow)
}
.contact__pill{
  display:inline-block; margin:.4rem .4rem .4rem 0; padding:.6rem .8rem; border-radius:999px;
  background:rgba(255,255,255,.15); color:#fff; text-decoration:none; border:1px solid rgba(255,255,255,.25)
}
.contact__form{
  background:#fff;border:1px solid #e7eeef; border-radius:22px; padding:28px; box-shadow:var(--shadow)
}

/* ========== Footer ========== */
.footer{background:#0e1516;color:#cdd6d6;padding:36px 0 10px}
.footer__grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.footer h4{color:#fff;margin-bottom:.4rem}
.footer a{color:#e7f7f7;text-decoration:none}
.footer a:hover{text-decoration:underline}
.footer .meta{color:#a9b8b8}
.footer__copy{margin-top:16px;border-top:1px solid rgba(255,255,255,.1);padding-top:12px;text-align:center}

/* ========== Responsive tweaks ========== */
@media (max-width: 900px){
  .hero__content{grid-template-columns: 1fr}
  .cards{grid-template-columns:1fr}
  .pricing--4{grid-template-columns: repeat(2, minmax(200px, 1fr))}
  .contact__grid{grid-template-columns:1fr}
}
@media (max-width: 520px){
  .nav{display:none}
  .hero{padding:44px 0}
}

.logo__img {
  height: 7vw;         /* dostosuj do wielkości swojego logo */
  width: auto;
  display: block;
}

.footer__map {
  margin-top: 30px;
  grid-column: 1 / -1; /* mapa zajmuje całą szerokość stopki */
}
.footer__map h4 {
  color: #fff;
  margin-bottom: 10px;
}
.footer__map iframe {
  width: 100%;
  height: 300px;
  border: none;
  border-radius: 12px;
  box-shadow: var(--shadow);
}

.docs { padding: 60px 0; }
.docs h2 { margin-bottom: 14px; }

.docs__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

.doc-row {
  background: #fff;
  border: 1px solid #e7eeef;
  border-radius: 14px;
  padding: 14px 16px;
  box-shadow: var(--shadow);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.doc-row__title {
  font-weight: 600;
  color: #0f1a1b;
}

#counter {
  font-weight: 800;
  color: #fff;
  font-size: clamp(36px, 6vw, 60px);
  transition: all 0.3s ease;
}


@media (max-width: 520px){
  .nav{
    display:flex;        /* pokaż */
    flex-wrap: wrap;     /* łam linki do nowej linii */
    gap: .5rem;
  }
}