:root{
      --bg: #a0daf7;          /* jasny błękit tła jak w PDF */
      --bg-2: #a0daf7;        /* jasne bloki */
      --white:#ffffff;
      --text:#0a0f14;
      --muted:#141616;
      --accent:#2a9ec1;       /* morski niebieski */
      --accent-2:#1e7c98;
      --dark:#1b1f23;
      --max: 1360px;           /* szerokość kolumny jak na plakacie */
    }
    p {color: var(--muted);
  margin: 26px auto;
  font-weight: 300;
  font-size: 1.23em;
  max-width: 920px;
  text-align: center;
  line-height: 1.75;}

    *,*::before,*::after{box-sizing:border-box}
    html,body{margin:0;padding:0}
    body{font-family:"Poppins",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; color:var(--text); background:var(--bg); line-height:1.55}
    img{max-width:100%; height:auto; display:block}
    a{color:#0c5e7d; text-decoration:none}
    p a{color:#0c5e7d; text-decoration:underline}
    .wrap{max-width:var(--max); margin:0 auto; padding:0 }
#start {background: #fff;margin: 0 auto 40px;max-width: var(--max);padding: 120px 0 0;}
#start img {width: 100%;margin: auto;max-width: 1360px;}
    /* Pasek górny z hasłem */
    .top{background: #fff;top: 0;
  max-width: var(--max);
  padding: 30px 3%;
  margin: auto;
  text-align: center;
  position: fixed;
  width: 100%;
  left: 0;
  right: 0;
  z-index: 100;}
    .top h1{font-weight:700; letter-spacing:.04em; font-size:clamp(22px,5.4vw,56px); margin:0 0 6px;font-family: 'Birthstone';}
    .top .sub{font-weight:600; font-size:clamp(12px,2.4vw,16px); letter-spacing:.12em; text-transform:uppercase;text-align: right;}

    /* Sekcja intro z logo i dymkami */
    .intro{position:relative; padding:24px 0 80px; overflow:hidden}
    .intro .wrap{display:grid; grid-template-columns: 160px 1fr; gap:16px; align-items:center}
    .logo{width:140px; height:140px; border-radius:50%; background:#d6eef6; display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow)}
    .logo img{width:120px; height:auto}

    .bubble{position:relative; background:var(--white); border-radius: 40px; padding:26px 22px; box-shadow:var(--shadow)}
    .bubble .hello{font-weight:800; font-size:clamp(28px,6vw,44px); color:#0f1b1f; text-align:center; margin:6px 0 10px}
    .bubble p{margin:0; color:var(--muted)}

    .intro .where{margin-top:18px}

    /* Szerokie zdjęcie basenu */
    .hero{padding: 16px 0 0}
    .hero .pool{box-shadow: var(--shadow); background:#dbe7ee}
/* Motto przeniesione na zdjęcie — wersja z animacją */
.hero { position: relative; }
.hero .pool { position: relative; }

.motto-overlay {
  position: absolute;
  bottom: -50px;
  left: 50%;
  width: 90%;
  text-align: center;
  opacity: 0;
  transform: translate(-50%, 30px) scale(.98);
  transition: opacity .85s cubic-bezier(.22,.61,.36,1),
              transform .85s cubic-bezier(.22,.61,.36,1);
  transition-delay: .25s; /* lekkie opóźnienie „wynurzenia” */
  will-change: transform, opacity;
  pointer-events: none;
}

.motto-overlay.visible {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
}
.motto-overlay .t {
  pointer-events: auto;
  font-family: 'Birthstone', cursive;
  font-size: clamp(27px, 4vw, 55px);
  color: #111;
  text-shadow: none;
  padding: 10px 0;
  border-radius: 10px;
  display: inline-block;
  line-height: 1.2;
  user-select: none;
}
@media (min-width: 520px){
.motto-overlay .t {
  pointer-events: auto; /* potrzebne do hover/touch */
  font-family: 'Birthstone', cursive;
  font-size: clamp(22px, 4vw, 55px);
  color: #fff;
  text-shadow: 0 4px 16px rgba(0,0,0,1);
  padding: 14px 22px;
  border-radius: 10px;
  display: inline-block;
  line-height: 1.2;
  user-select: none;
}
.motto-overlay{bottom: 0;}
}

/* znaki – płynne powroty po zniekształceniu */
.m-char {
  display: inline-block;
  transition: transform .25s ease;
  will-change: transform;
}

/* accessibility */
@media (prefers-reduced-motion: reduce) {
  .motto-overlay { transition: none; }
  .m-char { transition: none; }
}




    /* Pierwsze sukcesy */
    .success{padding: 100px 0 40px;background: #fff;max-width: var(--max);margin: auto;}
 h3{font-weight:400; font-size:clamp(36px,5vw,60px); margin: 0 0 8px; text-align:center;font-family: 'Birthstone';cursor: default;}

    /* Galeria miniatur */
    .gallery{margin: 0 auto 0;background: #fff;padding: 0 0 80px;max-width: var(--max);}
    .gallery .row{display:grid; gap:10px; grid-template-columns: repeat(5, 1fr);padding: 0 10px;}
    .thumb{border-radius:12px; overflow:hidden; background:#e1e5e8; }
    @media (max-width: 820px){ .gallery .row{grid-template-columns: repeat(3, 1fr)} }
    @media (max-width: 520px){ .gallery .row{grid-template-columns: repeat(2, 1fr)}  }
    @media (max-width: 520px){
  .gallery .row{
    grid-template-columns: repeat(2, 1fr); /* 1 i 2 = po 50% */
  }
  .gallery .row .thumb:nth-child(3){
    grid-column: 1 / -1; /* 3 = 100% szerokości */
  }
  /* 4 i 5 zostają naturalnie po 50% dzięki układowi 2 kolumn */
}


    /* Współpraca */
    .coop{background: #fff;padding: 20px 0 120px;margin: 0 auto 120px;max-width: var(--max);border-radius: 0 0 16px 16px; box-shadow:var(--shadow)}

    /* Kontakt */
    .contact{padding:18px 0 10px; text-align:center}

    /* Stopka */
    footer{margin:120px 0 0}
    .foot{background: var(--white);
  border: 1px solid #e8ecef;
  border-radius: 16px 16px 0 0;
  padding: 50px 80px 40px;}
    .foot .cols{display:grid; gap:14px; grid-template-columns: 140px 1fr 200px; align-items:center}
    .foot .logo-small{width:142px; height:142px; border-radius:50%; display:flex; align-items:center; justify-content:center}
    .foot .logo-small img{width:110px}
    .foot .info{font-size:13px; color:#3b444b}
    .foot .info strong {font-size: 16px;}
    .foot .tel{display:flex; align-items:center; justify-content:flex-end; gap:10px; font-weight:100; font-size:32px}
    @media (max-width: 640px){ .foot .cols{grid-template-columns: 60px 1fr} .foot .tel{justify-content:flex-start; font-size: 26px;
    padding: 30px 0;} }

    /* Utility */
    .eyebrow{font-weight:700; letter-spacing:.12em; text-transform:uppercase; font-size:12px; text-align:center; color:#2d3a42}
    .sp-8{height:8px}
    .sp-12{height:12px}
    .sp-20{height:20px}
  

    /* Smooth scroll dla kotwic */
html { scroll-behavior: smooth; }

/* Header / menu */
.site-header { background:#fff; }
.site-header .wrap { max-width: var(--max); margin: 0 auto; padding: 16px 10px; }
.main-nav ul{ list-style:none; margin:0; padding:0; display:flex; justify-content:center; align-items:center; flex-wrap:wrap; }
.main-nav li{ display:flex; align-items:center; }
.main-nav li + li::before{
  content:"•"; margin: 0 14px; opacity:.55; transform: translateY(-1px);
}
.main-nav a{
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  font-size: clamp(12px, 1.4vw, 14px);
  color:#0484b3;
  text-decoration:none;
  position:relative;
  display:inline-block;
  line-height:1;
  padding: 4px 0;
}

/* (opcjonalnie) delikatny underline na hover */
.main-nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:-6px; height:2px;
  background:#0b1015; transform: scaleX(0); transform-origin: 50% 50%;
  transition: transform .25s ease;
  opacity:.15;
}
.main-nav a:hover::after{ transform: scaleX(1); }

/* znaki wykorzystywane przez efekt (używamy już w motcie) */
.m-char{ display:inline-block; transition: transform .25s ease; will-change: transform; }
.m-char.space { /* ewentualnie kontrola szerokości spacji */
  /* white-space: pre;  <-- niepotrzebne przy NBSP */
}



@media (max-width: 640px){
  .top {display: none;}
  p {
  font-size: 1.03em;
  padding: 0 20px;
}
.foot {padding: 50px 20px 90px;}
.foot .cols {
  display: block;
}
#start {margin: auto;
  padding: 40px 0 0;}
  .intro {
  padding: 24px 0 50px;}
}


#menu-mobile {display:block;bottom: 0;right: 0;left: 0;z-index: 1000;width: 100%;margin: auto;padding: 10px 0 7px;background: #fff;backdrop-filter: blur(10px);position: fixed;box-shadow:-3px 0 12px rgba(0,0,0,0.1);border-radius: 30px 30px 0 0;max-width: 400px;opacity: 1;animation: slideIn 0.75s forwards;}

#menu-mobile .menu {width: 100%;padding:0 0% 5px;max-width: 500px;margin:auto;float: none;}
#menu-mobile .menu .button {width: 20%;  padding: 2px 0 3px;float:left;text-align: center;cursor: pointer;}
#menu-mobile .menu .button .ico {width: 30%;padding: 0 0 7px;margin: 0 auto;}
#menu-mobile .menu a {text-transform: uppercase;color:#051c13;font-weight: 600;}
#menu-mobile .menu .gray span {display: block;font-size: 9.4px;  letter-spacing: 1px;}
.menu img {display:block !important;}
.mobile-menu {display: grid;}

@media (min-width:1060px) {
#menu-mobile {display: none;}
#menu1 {display: block;}
}

/* ► FB w białym kółku na banerze */
#start { position: relative; }

/* Pozycja i rozmiar – łatwo korygowane zmiennymi */
.fb-badge{
position: absolute;
  right: 2%;
  top: 58%;
  transform: translate(-50%,-50%);
  width: clamp(14px, 4.8vw, 56px);
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
}
.fb-badge img{
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,.12));
  transition: transform .2s ease;
}
.fb-badge:hover img{ transform: scale(1.06); }

/* Mobile: znacznie większe i delikatna korekta pozycji */
@media (max-width: 640px){
  .fb-badge{
   right: 0;
    top: 59%;
    width: clamp(20px, 6vw, 60px);
  }
}