/* ——— Paleta i baza ——— */
:root{
  --bg:#ffffff;            /* tło stron */
  --ink:#0f172a;           /* główny tekst (granat) */
  --muted:#64748b;         /* opisy */
  --brand:#2F5FFF;         /* niebieski akcent */
  --brand-dark:#1E3A8A;    /* głębszy niebieski */
  --shadow:0 10px 22px rgba(0,0,0,.08);
  --border:#e5e7eb;
}

*{box-sizing:border-box}
html,body{margin:0; height:100%;}
body{
  font-family:'Poppins',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--ink);
  background:var(--bg);
  line-height:1.6;
  position:relative;
  overflow-x:hidden;
}

/* ==== Globalne tło – dymki ==== */
body::before{
  content:"";
  position:fixed;
  inset:-15% -10% auto -10%;
  height:130%;
  z-index:-1;
  pointer-events:none;

  background:
    radial-gradient(60% 60% at 12% 8%,  rgba(91,124,255,0.35) 0%, transparent 60%),
    radial-gradient(60% 60% at 88% 6%,  rgba(30,58,138,0.35) 0%, transparent 60%),
    radial-gradient(60% 60% at 50% 100%, rgba(47,95,255,0.20) 0%, transparent 60%),
    #ffffff;
  filter: blur(16px) saturate(120%);
}

a{color:inherit;text-decoration:none}
.container{max-width:1100px;margin-inline:auto;padding:0 20px}

/* ——— NAV ——— */
.navbar{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; gap:16px;
  padding:12px 0;
  background:rgba(255,255,255,0.75);  /* półprzezroczysty */
  color:#0f172a;
  border-bottom:1px solid rgba(15,23,42,.06);
  backdrop-filter: blur(8px);
  
}
.brand{font-weight:800; letter-spacing:.2px}
.brand span{ color:#ff2e63 }                 /* mały różowy akcent */
.links{ display:flex; gap:20px; margin-left:auto }
.links a{ opacity:.9; padding:6px 4px; border-radius:8px }
.links a:hover{ opacity:1; background:rgba(15,23,42,.06) }

.spacer{ margin-left:16px }

/* ——— Social (header + footer) ——— */
.socials{ display:flex; gap:14px; align-items:center; }
.socials a{ display:inline-flex; line-height:1; transition:opacity .2s, transform .2s }
.socials a:hover{ transform:scale(1.15); opacity:.9 }

/* Kolory marek */
.socials a.insta svg{ color:#E1306C; fill:#E1306C }
.socials a.fb    svg{ color:#1877F2; fill:#1877F2 }
.socials a.tiktok svg{ color:#000000; fill:#000000 }
.socials a.tiktok:hover svg{ color:#25F4EE; filter:drop-shadow(0 0 4px #FF0050) }
.socials a.wa svg{ color:#25D366; fill:#25D366; }
.socials a.wa:hover svg{ filter:drop-shadow(0 0 4px #25D366); }


/* ——— HERO ——— */
.hero{
  position:relative;
  background:transparent; /* tło globalne już załatwia efekt */
  overflow:hidden;
  border-bottom:1px solid var(--border);
  min-height:56vh;
  display:flex; align-items:center;
}
.hero-content{ position:relative; z-index:1; }
.hero-content h1{
  margin:0 0 10px;
  font-size: clamp(34px, 5vw, 56px);
  line-height:1.1;
  font-weight:800;
}
.hero-content p{ color:var(--muted); margin:0 0 22px; max-width:900px }
.btn{
  display:inline-block;
  background:var(--brand); color:#fff;
  padding:14px 22px; border-radius:999px; font-weight:700;
  box-shadow:0 10px 20px rgba(47,95,255,.25);
  transition:transform .15s, filter .15s, box-shadow .15s;
}
.btn:hover{ transform:translateY(-1px); filter:brightness(1.05) }
.btn:active{ transform:none; box-shadow:0 6px 14px rgba(47,95,255,.28) }

/* ——— SEKCJE ——— */
section{ padding:48px 0 }
section + section{ border-top:1px solid rgba(15,23,42,.06) }
h2{ font-size: clamp(22px, 3vw, 28px); margin:0 0 12px }

/* Oferta (Twoje akordeony) */
#oferta h2{ cursor:pointer }
#oferta h2::after{ content:"▸"; margin-left:8px; transition:transform .2s }
#oferta h2[aria-expanded="true"]::after{ transform:rotate(90deg) }
.pakiety[hidden]{ display:none }
.pakiety.show{ display:block }

.kategoria{
  border:1px solid #e9eefb; border-radius:12px; overflow:hidden;
  margin:12px 0; box-shadow:var(--shadow); background:#fff;
}
.kategoria button{
  width:100%; padding:16px; border:0; background:#fff; cursor:pointer;
  font-size:1rem; text-align:left; display:flex; justify-content:space-between;
}
.kategoria .chev{ transition:transform .2s }
.kategoria.open .chev{ transform:rotate(90deg) }
.kategoria .content{ display:block; padding:0 16px 16px }
.kategoria .content[hidden]{ display:none }

.gallery{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:12px; margin-top:12px }
.tile{ background:#fff; border:1px solid #eef2ff; border-radius:10px; overflow:hidden }
.tile img{ width:100%; height:180px; object-fit:cover; display:block; transition:transform .2s }
.tile img:hover{ transform:scale(1.04) }

/* Lightbox */
.lightbox{ position:fixed; inset:0; background:rgba(0,0,0,.85);
  display:flex; align-items:center; justify-content:center; flex-direction:column; z-index:9999 }
.lightbox img{ max-width:90%; max-height:80%; border-radius:10px; box-shadow:0 0 20px rgba(0,0,0,.5) }
.lightbox p{ color:#fff; margin-top:12px }
.lightbox span{ position:absolute; top:20px; right:30px; color:#fff; font-size:2rem; cursor:pointer }

/* Kontakt */
.lead{ color:var(--muted) }
.contact{ margin-top:10px; display:grid; gap:6px }

/* Stopka – lekka wersja */
.site-footer{
  background: rgba(255,255,255,0.8);
  color:#0f172a;
  padding:20px 0;
  border-top:1px solid rgba(15,23,42,.06);
  backdrop-filter: blur(8px);
}
.footer-inner{ display:flex; align-items:center; justify-content:space-between }

/* ——— Responsywne ——— */
@media (max-width: 720px){
  .navbar{ flex-wrap:wrap }
  .links{ order:3; width:100%; gap:14px; margin-top:10px }
  .socials{ order:2; margin-left:auto }
  .hero{ min-height:52vh }
}

/* NAV jako zaokrąglony kafelek z akcentem gradientu */
/* NAV jako lekka karta z gradientową kreską na dole */
.navbar{
  background: transparent !important;   /* tło przezroczyste */
  padding: 12px 0;
  border-bottom: none !important;
}

.navbar .container{
  position: relative;
  background: rgba(255,255,255,0.78);
  backdrop-filter: blur(10px);
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(15,23,42,.06);
  overflow: hidden;
}


/* Gradientowa kreska na dole */
.navbar .container::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height:4px; /* grubość */
  background: linear-gradient(90deg,#2F5FFF,#1E3A8A);
  opacity:1;
  z-index:2;
}


.contact-section {
  padding: 80px 0;                 /* więcej oddechu */
  background: transparent;         /* przejrzyste tło */
  backdrop-filter: none;           /* bez blur */
  border-top: 1px solid rgba(15,23,42,.06); /* zostawiamy delikatną linię */
}


.contact-form {
  max-width: 600px;
  margin: 30px auto 0;
  display: grid;
  gap: 20px;
}

.contact-form .form-group {
  display: flex;
  flex-direction: column;
}

.contact-form label {
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--ink);
}

.contact-form input,
.contact-form textarea {
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 1rem;
  font-family: inherit;
}

.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 2px rgba(47,95,255,.15);
}

/* ===== Formularz kontaktowy — pewniak ===== */
#kontakt .container{max-width:900px;margin-inline:auto;padding:0 20px}

#kontakt .contact-form{
  max-width:720px;
  margin:32px 0 0;
  display:grid;
  gap:20px;
}

#kontakt .form-group{
  display:flex;
  flex-direction:column;     /* etykieta NAD polem */
  align-items:stretch;
}

#kontakt label{
  display:block;             /* wymusza nad polem */
  margin:0 0 8px;
  font-weight:700;
  color:var(--ink);
}

#kontakt input,
#kontakt textarea{
  width:100%;
  display:block;
  box-sizing:border-box;
  padding:14px 16px;
  border:1px solid var(--border);
  border-radius:12px;
  background:#fff;
  font:inherit;
  line-height:1.4;
}

#kontakt textarea{
  min-height:160px;
  resize:vertical;
}

#kontakt input:focus,
#kontakt textarea:focus{
  outline:none;
  border-color:var(--brand);
  box-shadow:0 0 0 3px rgba(47,95,255,.15);
}

/* przycisk na pełną szerokość jak na zrzucie */
#kontakt .btn{
  width:100%;
  padding:16px 28px;
  border-radius:999px;
  font-weight:800;
  box-shadow:0 12px 24px rgba(47,95,255,.25);
}
/* Kontakt – wymuszenie wyglądu jak reszta strony (Pages cache-safe) */
#kontakt.contact-section{
  padding:80px 0 !important;
  background:transparent !important;
  backdrop-filter:none !important;
  border-top:1px solid rgba(15,23,42,.06) !important;
}

/* ===== CONTACT FINAL (dopasowane do Twojego HTML) ===== */
section.contact-section{
  padding:80px 0 !important;
  background:transparent !important;   /* tło jak cała strona */
  backdrop-filter:none !important;
  border-top:1px solid rgba(15,23,42,.06) !important;
}

section.contact-section .container{
  max-width:900px;
  margin-inline:auto;
  padding:0 20px;
}

section.contact-section h2{
  text-align:center;
  margin:0 0 20px;
  font-size:clamp(22px,3vw,28px);
  color:var(--ink);
}

section.contact-section form.contact-form{
  max-width:720px;
  margin:32px auto 0;
  display:grid;
  gap:20px;
}

section.contact-section .form-group{
  display:flex;
  flex-direction:column;   /* label nad polem */
  align-items:stretch;
}

section.contact-section label{
  display:block;
  margin:0 0 8px;
  font-weight:700;
  color:var(--ink);
}

section.contact-section input,
section.contact-section textarea{
  width:100%;
  box-sizing:border-box;
  padding:14px 16px;
  border:1px solid var(--border);
  border-radius:12px;
  background:#fff;
  font:inherit;
  line-height:1.4;
}

section.contact-section textarea{
  min-height:160px;
  resize:vertical;
}

section.contact-section input:focus,
section.contact-section textarea:focus{
  outline:none;
  border-color:var(--brand);
  box-shadow:0 0 0 3px rgba(47,95,255,.15);
}

section.contact-section .btn{
  width:100%;
  padding:16px 28px;
  border-radius:999px;
  font-weight:800;
  box-shadow:0 12px 24px rgba(47,95,255,.25);
}