:root{
  --bg:#f8fafc;
  --page-bg: var(--bg);
  --accent:#0b3a4a;
  --muted:#6b7280;
  --card:#ffffff;
  --radius:12px;
  --container:1200px;
  --brand-navy:#092c41;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

/* jedno źródło prawdy dla fali */
:root { --page-bg: var(--bg); }   /* było: #f8fafc na sztywno */


.hero svg {
  display: block; /* usuwa domyślny inline-gap */
}

/* usuwamy inline-gap i maskujemy 1px */
.wave-fix svg{display:block}
.wave-fix{border-top:2px solid var(--page-bg)}  /* 2–3px jeśli trzeba */


/* (opcjonalnie) delikatne podniesienie ścieżki o ułamki piksela */
.wave-fix svg path { transform: translateY(-0.5px); }

/* iOS Safari: var() w fill jako CSS, nie jako atrybut */
.wave-fill { fill: var(--page-bg); }

/* dodatkowo: usuń ewentualny „szew” */
.wave-fix svg { display:block; }
.wave-fix { border-top: 2px solid var(--page-bg); }

.hero-ocean{
  background-color:#0b3a4a;
  background-image:
    radial-gradient(1200px 600px at 80% -200px, rgba(255,255,255,.08), transparent 60%),
    linear-gradient(180deg, #0b3a4a 0%, #119e91 100%);
}


*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:#0f1724;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.5;
  font-size:16px;
}

.btn-brand-on-dark{
  background: linear-gradient(90deg,#0b3a4a,#119e91);
  color:#fff;
  border:2px solid rgba(255,255,255,.75);   /* wyraźna separacja */
  box-shadow: 0 10px 22px rgba(0,0,0,.25);
}
.btn-brand-on-dark:hover{ transform: translateY(-2px); }

.btn-glow{
  background:#fff; color:#0b3a4a;
  box-shadow: 0 6px 18px rgba(17,158,145,.35); /* subtelny glow w brand color */
}


.container{max-width:var(--container);margin:0 auto;padding:1rem}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:1rem 0}
.logo{height:56px}
#nav-toggle{display:none;background:none;border:0;font-size:1.4rem}
.nav ul{list-style:none;margin:0;padding:0;display:flex;gap:1rem}
.nav a{text-decoration:none;color:var(--accent);font-weight:600}

.hero{padding:3rem 0;background:linear-gradient(180deg,rgba(11,58,74,0.03),transparent)}
.hero-inner{display:flex;gap:2rem;align-items:center}
.hero-text{flex:1}
.hero-text h1{font-size:clamp(1.6rem,3vw,2.4rem);margin:0 0 .6rem}
.lede{color:var(--muted);margin-top:.25rem}

.btn{display:inline-block;background:var(--accent);color:#fff;padding:.8rem 1.2rem;border-radius:10px;text-decoration:none;font-weight:700}
.btn-outline{display:inline-block;border:2px solid var(--accent);padding:.6rem 1rem;border-radius:10px;text-decoration:none;color:var(--accent);font-weight:700}

.grid{display:grid;gap:1rem}
.services-grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));margin-top:1rem}
.card{background:var(--card);padding:1.25rem;border-radius:var(--radius);box-shadow:0 6px 18px rgba(11,58,74,0.06)}

.portfolio-grid{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));margin-top:1rem}
.portfolio-item{background:var(--card);border-radius:12px;overflow:hidden;box-shadow:0 6px 18px rgba(11,58,74,0.06)}
.portfolio-item img{width:100%;height:170px;object-fit:cover;display:block}
.portfolio-meta{padding:1rem}

.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:1rem}

.contact-grid{display:grid;grid-template-columns:1fr 320px;gap:1.5rem;margin-top:1rem}
.contact form{background:var(--card);padding:1rem;border-radius:12px;box-shadow:0 6px 18px rgba(11,58,74,0.06)}
label{display:block;margin-top:.75rem;font-weight:600}
input[type="text"],input[type="email"],textarea{width:100%;padding:.6rem;border-radius:8px;border:1px solid #e5e7eb;margin-top:.25rem}
.consent{margin-top:.5rem;font-weight:400}
.contact-info{background:var(--card);padding:1rem;border-radius:12px;box-shadow:0 6px 18px rgba(11,58,74,0.06)}
.social a{display:inline-block;margin-right:.5rem;text-decoration:none;padding:.4rem .6rem;border-radius:8px;border:1px solid #e6eef0;color:var(--accent)}

.site-footer{border-top:1px solid #eef2f5;padding:1rem 0;margin-top:2rem}
.footer-inner{display:flex;justify-content:space-between;align-items:center}

/* ===== Użyteczności brandowe i animacje (dodane) ===== */
.brand-shadow{box-shadow:0 6px 20px rgba(9,44,65,0.06)} 


#site-header { transition: box-shadow .25s cubic-bezier(.4,0,.2,1); }


/* animacje wejścia (fade + slide-in) */
.fade-enter{
  opacity:0;
  transform:translateY(10px);
  transition:opacity .35s ease, transform .35s ease;
  will-change:opacity, transform;
}
.fade-enter.show{
  opacity:1;
  transform:translateY(0);
}

.fade-scroll {
  opacity: 0;
  transform: translateY(15px);
  transition: opacity .6s ease, transform .6s ease;
}

.fade-scroll.show {
  opacity: 1;
  transform: translateY(0);
}


/* Responsive */
@media (max-width:900px){
  .hero-inner{flex-direction:column}
  .contact-grid{grid-template-columns:1fr}
  .about-grid{grid-template-columns:1fr}
  .nav{position:absolute;top:72px;right:1rem;background:var(--card);padding:1rem;border-radius:10px;display:none;box-shadow:0 6px 20px rgba(0,0,0,0.08)}
  .nav ul{flex-direction:column}
  #nav-toggle{display:block}
  #nav-toggle[aria-expanded="true"] + .nav{display:block}
}

/* Fade dla obrazka w hero */
#hero-img {
  opacity: 1;
  transition: opacity .8s ease;       /* czas = 800ms */
  will-change: opacity;
}
#hero-img.is-fading {
  opacity: 0;                          /* wygaszanie */
}

/* opcjonalnie: szanuj preferencje użytkownika */
@media (prefers-reduced-motion: reduce){
  #hero-img { transition: none; }
}


/* Fade dla hero rotatora */
.hero-rotator {
  position: relative;
  overflow: hidden;
}
.hero-rotator img {
  transition: opacity .8s ease;
  opacity: 1;
}
.hero-rotator img.is-fading {
  opacity: 0;
}

/* małe kapsułki (chip) do akcentów w hero) */
.chip {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .25rem .6rem;
  border-radius: 999px;
  background: #f1f5f9; /* slate-100 */
  border: 1px solid #e2e8f0; /* slate-200 */
}

/* gdy chcesz ciut więcej „oddechu” hero na małych ekranach */
@media (max-width: 640px) {
  .hero-section .rounded-2xl { border-radius: 16px; }
}

/* FAQ accordion */
.faq-panel {
  overflow: hidden;
  max-height: 0;         /* start: zamknięte */
  opacity: 0;
  padding-top: 0;        /* padding animujemy w JS */
  padding-bottom: 0;
  transition:
    max-height 420ms cubic-bezier(.22,.61,.36,1),
    opacity    260ms ease,
    padding    260ms ease;
  will-change: max-height, opacity, padding;
}

/* obrót strzałki gdy otwarte */
.faq-item.is-open .faq-icon {
  transform: rotate(180deg);
  transition: transform .28s cubic-bezier(.4,0,.2,1);
}

.faq-toggle {
  transition: background-color 0.4s ease 0.1s;
}


/* wejście reveal (delikatny slide+fade) */
.reveal{opacity:0; transform:translateY(10px); transition:opacity .5s ease, transform .5s ease}
.reveal.is-in{opacity:1; transform:translateY(0)}
.reveal[style*="--delay"]{transition-delay:var(--delay,0s)}

/* pływające orby w CTA */
@keyframes float-slow { 0%,100% { transform:translateY(0)} 50% { transform:translateY(12px)} }
@keyframes float-slower { 0%,100% { transform:translateY(0)} 50% { transform:translateY(-10px)} }
.animate-float-slow{ animation: float-slow 7s ease-in-out infinite }
.animate-float-slower{ animation: float-slower 9s ease-in-out infinite }
.animate-tiny-bob{ animation: float-slow 6s ease-in-out infinite }

/* CTA reveal */
.cta-enter{
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .5s cubic-bezier(.2,.8,.2,1), transform .5s cubic-bezier(.2,.8,.2,1);
  will-change: opacity, transform;
}
.cta-enter.is-in{
  opacity: 1;
  transform: translateY(0);
}

/* Szacunek dla prefers-reduced-motion */
@media (prefers-reduced-motion: reduce){
  .cta-enter{ transition: none !important; }
}

/* lepsza widoczność focusa */
a:focus-visible,
button:focus-visible {
  outline: 2px solid #119e91;
  outline-offset: 3px;
  border-radius: 10px;
}

/* ładniejsze łamanie akapitów */
.text-balance { text-wrap: balance; }

/* kolorowe tło hero – morski gradient */
.hero-ocean{
  background:
    radial-gradient(1200px 600px at 80% -200px, rgba(255,255,255,.08), transparent 60%),
    linear-gradient(180deg, #0b3a4a 0%, #119e91 100%);
}

/* animacja płynącej fali (bezszwowe przesuwanie) */
@keyframes waveScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.wave-run { animation: waveScroll 18s linear infinite; }

/* wolniej na mobile (naturalniej) */
@media (max-width: 640px) { .wave-run { animation-duration: 22s; } }

/* prefers-reduced-motion: wyłącz animację */
@media (prefers-reduced-motion: reduce) {
  .wave-run { animation: none; transform: translateX(0); }
}