:root{
  --brand:#0b3a63; --gold:#ffb703; --ink:#0b0f19; --muted:#2f3a40; --bg:#f7f7f7;
}

/* RESET & BASE */
*,*::before,*::after{box-sizing:border-box}
html,body{width:100%;overflow-x:hidden}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Open Sans',sans-serif;color:var(--ink);background:#fff;-webkit-text-size-adjust:100%;text-size-adjust:100%}
img{max-width:100%;height:auto;display:block}
a{text-decoration:none;color:var(--brand)}
.container{max-width:1200px;margin:0 auto;padding:0 24px}

/* BUTTONS */
.btn{display:inline-block;padding:12px 18px;border-radius:12px;font-weight:700}
.btn-primary{background:var(--gold);color:var(--brand);}

/* HEADER */
.topbar{position:sticky;top:0;z-index:40;background:#fff;box-shadow:0 2px 12px rgba(0,0,0,.05)}
.topbar .container{display:flex;align-items:center;gap:18px;padding:10px 14px}
.brand img{height:42px;width:auto}
.mainnav{display:flex;gap:22px;margin-left:auto}
.mainnav a{color:#222;font-weight:600;transition:color .3s ease;}   /* hover (menu) */
.mainnav a:hover{color:var(--brand);}                                /* niebieski */

/* >>> Telefon: stały #00AEEF, hover na pomarańczowy + animacja ikony */
.topbar-phone{
  display:flex;align-items:center;gap:8px;margin-left:14px;
  font-weight:700;color:#00AEEF; /* nowy odcień niebieskiego */
  transition:color .3s ease;
}
.topbar-phone:hover{color:var(--gold);}                               /* pomarańczowy */
.nav-toggle{display:none;background:transparent;border:0;width:40px;height:36px;padding:0}
.nav-toggle span{display:block;height:2px;background:#222;margin:7px 0}

/* Animacja ikony telefonu */
.topbar-phone svg{
  transition:transform .25s ease, filter .25s ease, opacity .25s ease;
  transform-origin:12px 12px;
}
.topbar-phone:hover svg{
  filter:drop-shadow(0 0 6px rgba(255,183,3,.55));
  animation:ring .6s ease-in-out 2, pulse 1.4s ease-in-out infinite;
}
@keyframes ring{
  0%{transform:rotate(0deg)}
  20%{transform:rotate(12deg)}
  40%{transform:rotate(-12deg)}
  60%{transform:rotate(8deg)}
  80%{transform:rotate(-6deg)}
  100%{transform:rotate(0deg)}
}
@keyframes pulse{
  0%,100%{transform:scale(1);opacity:1}
  50%{transform:scale(1.06);opacity:.95}
}
@media (prefers-reduced-motion:reduce){
  .topbar-phone svg,
  .topbar-phone:hover svg{
    animation:none!important;transition:none!important;filter:none!important
  }
}

/* HERO */
.hero{position:relative;color:#fff}
.hero-bg{position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(0,0,0,.55),rgba(0,0,0,.35)),
  url('images/hero-bg.jpg') center/cover no-repeat;z-index:-1}
.hero-inner{padding:90px 0 70px}
.hero h1{font-size:48px;margin:0 0 6px}
.hero h2{font-size:28px;font-weight:800;margin:0 0 10px}
.hero p{max-width:720px;opacity:.95}

/* SECTIONS */
.section{padding:56px 0}
.section-tight{padding:36px 0}
.sec-head{display:flex;align-items:center;gap:10px;margin-bottom:18px}
.sec-head.center{justify-content:center;text-align:center}
.arrow{color:var(--gold);font-weight:700}

/* USŁUGI */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.service{background:#fff;border:1px solid #eef0f3;border-radius:14px;padding:18px;text-align:center;box-shadow:0 6px 18px rgba(2,20,53,.06)}
.service img{height:54px;width:auto;margin:0 auto 10px}
.service h3{margin:6px 0 6px}

/* USP BAND */
.usp-band{background:#0c3f70;color:#fff}
.usp-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:18px;padding:14px 0}

/* >>> treść boxów USP od lewej */
.usp{
  display:flex;
  gap:14px;
  align-items:center;
  justify-content:flex-start;
  text-align:left;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.18);
  border-radius:14px;
  padding:14px;
}
/* ikonka w USP */
.usp .icon{
  width:44px;height:44px;display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
/* wariant telefoniczny (jeśli używany gdziekolwiek) */
.usp.call{background:rgba(255,183,3,.12);border-color:rgba(255,183,3,.5);color:#fff}
.usp .n{min-width:64px;text-align:center;font-weight:800;font-size:28px;color:var(--gold)}
.usp .n span{font-size:12px}

/* BENEFITS */
.benefits{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.benefit{position:relative;border-radius:18px;overflow:hidden;box-shadow:0 12px 28px rgba(2,20,53,.15)}
.benefit img{width:100%;height:240px;object-fit:cover}
.benefit .overlay{position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.65),rgba(0,0,0,.1));display:flex;align-items:flex-end;padding:16px;color:#fff}
.benefit .overlay h3{margin:0;font-size:26px}
.benefit .overlay p{margin:0;opacity:.92}

/* OPINIE */
.testimonials{background:#fafafa}
.t-slider{position:relative;min-height:200px}
.t-item{display:none;text-align:center;max-width:720px;margin:0 auto}
.t-item img{width:92px;height:92px;border-radius:50%;object-fit:cover;margin:6px auto 10px}
.t-item h4{margin:6px 0 6px}
.dots{display:flex;justify-content:center;gap:8px;margin-top:10px}
.dots button{width:10px;height:10px;border-radius:50%;border:0;background:#d6dbe0;cursor:pointer}
.dots button.active{background:var(--brand)}

/* PARTNERZY */
.partners{background:#f7f7f7;padding:40px 0}
.partner-logos{display:flex;gap:34px;justify-content:center;align-items:center;flex-wrap:wrap}
.partner-logos img{height:40px;width:auto}

/* MAP + CONTACT (embed/gmaps lub własna inicjalizacja) */
.map-section{background:#f7f7f7;padding:60px 20px;text-align:center}
.map-container{max-width:1200px;margin:0 auto}
.map-title{font-size:28px;font-weight:700;margin-bottom:8px;color:#0b0f19}
.map-subtitle{font-size:15px;color:#2f3a40;margin-bottom:24px;line-height:1.4}
#map{width:100%;height:420px;border-radius:12px;box-shadow:0 6px 20px rgba(0,0,0,.12);overflow:hidden}
@media (max-width:768px){
  .map-title{font-size:24px}
  .map-subtitle{font-size:14px}
  #map{height:300px}
}
@media (max-width:480px){
  #map{height:220px}
}

/* FOOTER */
.site-footer{position:relative;color:#fff;text-align:center;padding:60px 20px 30px;background:url('images/stopka.jpg') center/cover no-repeat}
.site-footer::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.55);z-index:0}
.site-footer > *{position:relative;z-index:1}
.footer-nav{margin-bottom:18px}
.footer-nav a{color:#fff;margin:0 12px;font-weight:600}
.footer-logo{max-width:200px;margin:10px auto 12px;display:block}
.footer-social{display:inline-block;margin:6px 0 10px}
.footer-meta{font-size:14px;line-height:1.6}
.footer-meta a{color:#fff}

/* --- FB: animacja na hover/focus, pewny selektor i brak konfliktów --- */
.site-footer .footer-social .social.fb {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%;
  transition: transform .25s ease;
  will-change: transform;
}
.site-footer .footer-social .social.fb svg{
  display:block; pointer-events:none;            /* hover zawsze na <a> */
  transition: transform .3s ease;
}

.site-footer .footer-social .social.fb:is(:hover,:focus-visible){
  transform: translateY(-2px);
}
.site-footer .footer-social .social.fb:is(:hover,:focus-visible) svg{
  animation: fb-bounce .6s ease both;           /* uruchom animację */
  transform-origin: center;
}

/* animacja */
@keyframes fb-bounce{
  0%   { transform: scale(1) translateY(0); }
  30%  { transform: scale(1.1) translateY(-4px); }
  60%  { transform: scale(0.95) translateY(2px); }
  100% { transform: scale(1) translateY(0); }
}

/* jeżeli ktoś ma włączone „redukcję ruchu” – wyłącz efekt */
@media (prefers-reduced-motion: reduce){
  .site-footer .footer-social .social.fb,
  .site-footer .footer-social .social.fb svg{
    animation:none!important; transition:none!important; transform:none!important;
  }
}


/* RWD */
@media (max-width:1024px){
  .cards{grid-template-columns:repeat(2,1fr)}
  .benefits{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:768px){
  .nav-toggle{display:inline-block}
  .mainnav{display:none}
  .mainnav.open{display:flex;flex-direction:column;gap:12px}
  .hero h1{font-size:38px}
  .usp-grid{grid-template-columns:1fr}
}
@media (max-width:560px){
  .cards{grid-template-columns:1fr}
  .benefits{grid-template-columns:1fr}
  .hero h1{font-size:32px}
  .hero h2{font-size:22px}
}