/* =========================
   UmzugPartner.de — redesign
   Kolory z wizytówki + Montserrat
   ========================= */

:root{
  /* Brand (wizytówka) */
  --brand:#1E5AA8;      /* ciemny granat */
  --brand-2:#2E7DD1;    /* jasny niebieski */
  --ink:#0F2342;        /* ciemny tekst */
  --text:#1A1A1A;
  --muted:#6B7391;

  /* Tła i obramowania */
  --bg:#F8FAFF;         /* delikatnie niebiesko-białe tło */
  --panel:#FFFFFF;
  --alt:#EAF2FD;        /* jasny niebieski */
  --line:#E6EAF5;

  /* Akcenty */
  --ok:#22C55E;
  --whats:#25D366;
  --shadow:0 10px 24px rgba(5,33,66,.08);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
html, body { max-width:100%; overflow-x:hidden; scroll-behavior:smooth; }

body{
  font-family: 'Montserrat', ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  color:var(--text);
  background:var(--bg);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Utils */
.container{width:min(1120px,92vw); margin:0 auto}
.flex{display:flex;gap:16px}
.center-v{align-items:center}
.between{justify-content:space-between}
.grid{display:grid; gap:24px}
.grid-2{display:grid; grid-template-columns:repeat(2,1fr); gap:14px}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
img, svg{max-width:100%; height:auto; display:block;}
.section{padding:72px 0}
.section.alt{background:var(--alt); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}

/* --------------------
   Topbar (sticky)
   -------------------- */
.topbar{
  position:sticky; top:0; z-index:50;
  backdrop-filter:saturate(1.05) blur(8px);
  background:rgba(255,255,255,.85);
  border-bottom:1px solid var(--line);
}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none}
.brand img{display:block; height:40px; width:auto}

.nav{display:flex; gap:14px; align-items:center}
.nav a{
  color:var(--ink); text-decoration:none; padding:10px 12px; border-radius:10px;
  font-weight:600;
}
.nav a:hover{background:#F2F6FF}
.btn{display:inline-block; padding:12px 18px; border-radius:12px; text-decoration:none; font-weight:800; letter-spacing:.2px}
.btn.primary{
  background:linear-gradient(135deg,var(--brand),var(--brand-2)); color:#fff; box-shadow:0 10px 20px rgba(23,90,168,.25)
}
.btn.secondary{background:#fff; color:var(--ink); border:1px solid var(--line)}
.btn.ghost{background:#fff; border:1px dashed var(--line); color:var(--ink)}
.btn.link{padding:0 4px; font-weight:800; color:var(--brand)}
.btn.whats{background:var(--whats); color:#fff}
.btn.wide{width:100%; text-align:center}

.nav-toggle{display:none; width:44px;height:44px;border:0;background:transparent}
.nav-toggle span{display:block;height:2px;background:#111;margin:8px;border-radius:2px;transition:.2s}

/* --------------------
   HERO — real photo
   -------------------- */
.hero{
  position:relative; min-height:520px;
  display:grid; place-items:center; overflow:hidden;
}
.hero-bg{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center;
  transform:scale(1.02);
z-index: 0;  
}
.hero-overlay{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(10,35,70,.68) 0%, rgba(10,35,70,.56) 40%, rgba(10,35,70,.68) 100%),
    linear-gradient(0deg, rgba(0,0,0,.1), rgba(0,0,0,.1));
 z-index: 1;  
}
.hero-content{
  position:relative; z-index:1; color:#fff; width:100%;
  display:grid; gap:16px;
  padding:72px 0;
  text-align:center;              /* wyśrodkowanie tekstu */
  justify-items:center;           /* wyśrodkowanie elementów (przyciski, pasek) */
  z-index: 2;  
}
.hero h1{
  font-size:clamp(32px,5vw,54px);
  line-height:1.1; margin:0; font-weight:900; letter-spacing:.2px;
  text-shadow:0 2px 6px rgba(0,0,0,.35);
}
.hero p{
  margin:6px 0 10px;
  font-size:clamp(16px,2.2vw,20px);
  opacity:.95;
  text-shadow:0 2px 5px rgba(0,0,0,.35);
}
.trust-bar span{
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.22);
  padding:8px 12px; border-radius:999px; backdrop-filter:blur(2px)
}

/* --------------------
   Trust Strip (po hero)
   -------------------- */
.trust{padding:16px 0 0}
.trust-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:12px}
.trust-item{
  background:#fff; border:1px solid var(--line); border-radius:12px; padding:14px;
  text-align:center; color:var(--ink); box-shadow: var(--shadow);
}
.badge{display:inline-block; font-weight:900; padding:4px 8px; border-radius:999px; background:#EFF4FF; margin-right:6px}

/* --------------------
   Sekcje + nagłówki
   -------------------- */
.section h2{
  font-size: clamp(28px, 3.6vw, 40px);
  line-height:1.2; font-weight:900; color:var(--brand);
  letter-spacing:.2px; margin:0 0 8px;
  scroll-margin-top:88px; /* anchor offset za sticky nav */
}
.lead{color:#3a3d57; max-width:68ch}

/* --------------------
   Karty / usługi
   -------------------- */
.cards .card{
  background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:20px;
  transition:transform .15s, box-shadow .15s; text-align:center; display:flex; flex-direction:column; align-items:center;
}
.cards .card:hover{transform:translateY(-3px); box-shadow:var(--shadow)}
.card h3{margin:6px 0 6px; font-weight:800; color:var(--ink)}
.card p{color:#4a5068; margin:0}
.card-img{margin:0 auto 10px; display:block; width:56px; height:auto}

/* --------------------
   Regionen (mapa + lista)
   -------------------- */
.regionen-grid{display:grid; grid-template-columns: 1.05fr .95fr; gap:24px; align-items:center}
.regionen-media img{width:100%; height:auto; display:block; border-radius:12px; border:1px solid var(--line)}
.pill-list{display:flex; flex-wrap:wrap; gap:10px; margin:14px 0 22px}
.pill{padding:8px 12px; background:#fff; border:1px solid var(--line); color:var(--ink); border-radius:999px; font-weight:600}

/* --------------------
   Ablauf (kroki)
   -------------------- */
.ablauf-grid{display:grid; grid-template-columns: 1.1fr .9fr; gap:24px; align-items:start}
.steps{list-style:none; padding:0; margin:18px 0 0}
.steps li{display:grid; grid-template-columns:auto 1fr; gap:12px; align-items:flex-start; padding:14px 0; border-bottom:1px dashed var(--line)}
.step-num{
  width:30px;height:30px;border-radius:10px; background:linear-gradient(135deg,var(--brand),var(--brand-2));
  color:#fff; display:grid; place-items:center; font-weight:900
}
.ablauf-media img{width:100%; height:auto; display:block; border-radius:16px; border:1px solid var(--line); background:#fff}

/* --------------------
   Preise
   -------------------- */
.price-cta{display:flex; gap:12px; margin-top:16px; flex-wrap:wrap}

/* --------------------
   Testimonials
   -------------------- */
.quote{background:#fff; border:1px solid var(--line); border-radius:16px; padding:22px; box-shadow: var(--shadow)}
.quote-meta{color:#6b7391; font-weight:600}

/* --------------------
   Kontakt + Formular
   -------------------- */
.contact{background:linear-gradient(180deg,#ffffff, #F3F7FF)}
.contact-grid{grid-template-columns: .9fr 1.1fr; gap:24px}
.contact-box{
  background:#fff; border:1px solid var(--line); border-radius:16px; padding:18px; box-shadow: var(--shadow)
}
.contact-lines{margin-top:14px; display:grid; gap:8px; color:#3b3e59}
.contact-lines a{color:var(--ink); text-decoration:none}
.form-box{
  background:#E4EEFD; border:1px solid var(--line); border-radius:16px; padding:18px; box-shadow: var(--shadow)
}
.form-box h3{margin-top:4px; font-weight:800; color:var(--ink)}
label{display:block; font-weight:700; color:#2d3147}
input, textarea{
  width:100%; margin-top:6px; padding:12px 12px;
  border:1px solid var(--line); border-radius:12px; font:inherit; background:#fff
}
textarea{resize:vertical}
.fineprint{color:#7c86a5; font-size:12px; margin-top:8px}

/* --------------------
   Footer
   -------------------- */
.footer{background:#0E315F; color:#E8EEF7; padding:44px 0 18px}
.footer-grid{grid-template-columns:1.2fr .7fr .8fr; gap:24px}
.footer a{color:#CFE2FF; text-decoration:none}
.footer a:hover{text-decoration:underline}
.list{list-style:none; padding:0; margin:0; display:grid; gap:8px}
.footnote{border-top:1px solid rgba(255,255,255,.15); margin-top:18px; padding-top:14px; color:#C6D7F5; text-align:center}

/* --------------------
   Pływający WhatsApp
   -------------------- */
.float-whats{
  position:fixed; right:18px; bottom:18px; width:56px; height:56px; border-radius:50%;
  background:var(--whats) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="white"><path d="M20 3.5A10.5 10.5 0 0 0 3.3 17.7L2 22l4.4-1.1A10.5 10.5 0 1 0 20 3.5Zm-5.8 14c-1.8 0-3.5-.5-5-1.5l-.4-.3-1.7.5.6-1.6-.3-.4a8 8 0 1 1 6.8 3.3ZM8.7 8.5c.1-.3.3-.3.5-.3h.4c.1 0 .3 0 .4.3l.5 1.2c.1.3 0 .4 0 .5l-.2.3c-.1.2-.2.3 0 .6.3.5.8 1.1 1.4 1.5.7.4 1.2.5 1.4.4l.4-.3c.1-.1.3-.2.5-.1l1.2.6c.3.1.3.2.3.5l-.1.8c-.1.4-.4.6-.8.7-.2.1-.5.1-.9.1-1.5 0-3.2-.8-4.5-2.1s-2.2-3-2.2-4.5c0-.4.1-.7.2-.9.1-.3.3-.6.7-.7Z"/></svg>') center/28px no-repeat;
  box-shadow:0 12px 24px rgba(37,211,102,.35)
}
.sr-only{position:absolute;clip:rect(1px,1px,1px,1px);padding:0;border:0;height:1px;width:1px;overflow:hidden}

/* --------------------
   Mikro-ikony (hero bullets etc.)
   -------------------- */
.ico{display:inline-block; width:20px; height:20px; background:#EEF3FF; border-radius:6px; position:relative}
.ico::after{content:""; position:absolute; inset:3px; background:linear-gradient(135deg,var(--brand),var(--brand-2)); border-radius:4px; mask-size:contain; mask-repeat:no-repeat; mask-position:center}
.ico-van::after{mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M3 7h11a3 3 0 0 1 3 3h2.5A1.5 1.5 0 0 1 21 11.5V15a2 2 0 0 1-2 2h-1a2.5 2.5 0 1 1-5 0H9a2.5 2.5 0 1 1-5 0H3a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2Zm1 2v4h6V9H4Zm12 0h-4v4h7v-1.5a1.5 1.5 0 0 0-1.5-1.5H16Z"/></svg>')}
.ico-tools::after{mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M21 2l-3 3 1.5 1.5-4.6 4.6-1.5-1.5L8 14l-1 4 4-1 6.4-6.4 1.5 1.5 3-3-2.4-2.4L21 2z"/></svg>')}
.ico-shield::after{mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M12 2l7 3v6c0 5-3.5 9.7-7 11-3.5-1.3-7-6-7-11V5l7-3z"/></svg>')}
.ico-route::after{mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M6 4a2 2 0 1 0 0 4c3.3 0 6 2.7 6 6v3h-2v3h6v-3h-2v-3c0-4.4-3.6-8-8-8zm12 12a2 2 0 1 0 0 4 2 2 0 0 0 0-4z"/></svg>')}
.ico-hands::after{mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M7 12l4 2 6-3 3 1-9 5-6-3 2-2zm5-8l4 2-6 3-4-2 6-3z"/></svg>')}
.ico-mail::after{mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M2 6a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v.5L12 13 2 6.5V6zm0 3.7L12 15l10-5.3V18a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V9.7z"/></svg>')}
.ico-phone::after{mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M6.6 10.8c1.8 3.3 4.3 5.8 7.6 7.6l2.5-2.5a1 1 0 0 1 1-.25c1.1.27 2.3.41 3.5.41a1 1 0 0 1 1 1V21a1 1 0 0 1-1 1C11.6 22 2 12.4 2 1a1 1 0 0 1 1-1h3.9a1 1 0 0 1 1 1c0 1.2.14 2.4.41 3.5a1 1 0 0 1-.25 1L6.6 10.8z"/></svg>')}
.ico-pin::after{mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M12 2a7 7 0 0 0-7 7c0 5.2 7 13 7 13s7-7.8 7-13a7 7 0 0 0-7-7zm0 9.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5z"/></svg>')}
.ico-clock::after{mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm1 10.6l3.7 2.2-.9 1.5L11 13V6h2v6.6z"/></svg>')}

/* --------------------
   RWD
   -------------------- */
@media (max-width: 980px){
  .brand img{ height:34px; }
  .grid-3{grid-template-columns:1fr 1fr}
  .contact-grid{grid-template-columns:1fr}
  .regionen-grid{grid-template-columns:1fr}
  .ablauf-grid{grid-template-columns:1fr}
  .trust-grid{grid-template-columns:repeat(2,1fr)}
  .nav{
    position:absolute; right:12px; left:12px; top:calc(100% + 8px);
    background:#fff; padding:12px; border:1px solid var(--line); border-radius:12px; flex-direction:column; display:none;
    box-shadow:var(--shadow)
  }
  .nav.open{display:flex}
  .nav-toggle{display:block}
  .hero{min-height:460px}
}
@media (max-width:640px){
  .grid-2, .grid-3{grid-template-columns:1fr}
  .trust-grid{grid-template-columns:1fr}
  .hero h1{font-size: clamp(28px, 7vw, 40px)}
}