:root{
  --bg: #000;
  --card: #f3f0f1;
  --pink: #d61fb6;
  --white: #fff;
  --muted: #cfcfcf;
  --container: 1100px;
  --radius: 18px;
  --gap: 28px;
  --nav-gap: clamp(40px, 10vw, 300px);
}

/* reset + podstawowe */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background:var(--bg);
  color:var(--white);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
.wrap{width:92%;max-width:var(--container);margin:0 auto}

/* ================= Header / Nav (z indicator) ================= */
/* HEADER / NAV */
.site-header{
  position:sticky;
  top:0;
  z-index:60;
  padding:18px 0;
  background:transparent;
  transition: background-color 220ms ease, box-shadow 220ms ease, backdrop-filter 220ms ease;
  will-change: background-color, box-shadow;
}
.header-inner{
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative; /* potrzebne dla pozycji indikator */
}

/* gdy przewinięte lub menu otwarte */
.site-header.scrolled{
  background-color: rgba(0,0,0,0.98); /* mocniej przyciemnione */
  box-shadow: 0 8px 30px rgba(0,0,0,0.65);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

/* lista nav (wyśrodkowana) */
.nav-list{
  display:flex;
  gap:var(--nav-gap);
  align-items:center;
  list-style:none;
  padding:0;
  margin:0;
  position:relative; /* dla prawidłowego obliczania pozycji indikator */
}
.nav-list li{ position: relative; } /* ułatwia targetowanie pozycji linku */
.nav-link{color:var(--muted);text-decoration:none;font-weight:600;font-size:15px;letter-spacing:0.06em;padding:6px 2px;display:inline-block}
.nav-link:hover,.nav-link:focus{color:var(--white);outline:none}
/* active link (fallback color) */
.nav-link.active{ color: var(--white); }

/* INDICATOR: zaokrąglona kreska pod aktywnym itemem */
.nav-indicator{
  position:absolute;
  height:8px;                     /* grubość kreski */
  background:var(--pink);
  border-radius:999px;
  bottom: -8px;                   /* jak daleko od dolnej krawędzi nav-list (dostosuj) */
  left: 0;
  width: 0;
  transform: translateX(0);
  transition: transform 320ms cubic-bezier(.2,.9,.2,1), width 320ms cubic-bezier(.2,.9,.2,1), opacity 200ms ease;
  box-shadow: 0 6px 18px rgba(214,31,182,0.12);
  pointer-events: none;
  z-index: 10;
  opacity: 1;
}

/* ukryj indicator jeśli brak pozycji aktywnej (opcjonalne) */
.nav-indicator.hidden{ opacity: 0; width: 0; }
.nav-contact{
  display:inline-block;
  background:var(--pink);
  color:var(--white);
  padding:8px 18px;
  border-radius:24px;
  text-decoration:none;
  font-weight:700;
  font-size:15px;
}
.site-header.scrolled .nav-contact{ background:var(--pink); color:var(--white);}
/* burger (mobile) */
.burger{
  position:absolute;
  right:18px;
  top:16px;
  background:transparent;
  border:0;
  padding:8px;
  display:flex;
  flex-direction:column;
  gap:6px;
  cursor:pointer;
  z-index:1015;
}
.burger-line{width:22px;height:2px;background:var(--white);display:block}

/* overlay menu (mobile) starts from top */
.nav-overlay{
  display:none;
  position:fixed;
  top:0;
  left:18px;
  right:18px;
  bottom:auto;
  background:rgba(0,0,0,0.95);
  padding:18px;
  border-radius:0 0 12px 12px;
  flex-direction:column;
  gap:12px;
  z-index:1005;
  transform-origin: top center;
  pointer-events: none;
}
@keyframes slideDown { from { transform: translateY(-8px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.nav-overlay.show{ display:flex; animation: slideDown 220ms cubic-bezier(.2,.9,.2,1); pointer-events:auto; }
.nav-overlay a{ color:var(--muted); text-decoration:none; padding:10px; border-radius:8px; pointer-events:auto; }
.nav-overlay a.nav-contact{ background:var(--pink); color:var(--white); padding:10px 14px; border-radius:20px; pointer-events:auto; }

/* NAV INDICATOR (rounded underline) */
.nav-indicator{
 display: none !important;
}
.nav-indicator.hidden{ opacity:0; width:0; }

/* small-screen adjustments */
@media (max-width:767px){
  .nav-list{display:none}
  .burger{display:flex}
  .site-logo{ left:12px }
  .nav-indicator{ height:6px; bottom:-5px; }
}
@media (min-width:768px){
  .burger{display:none}
}

/* ================= Contact page styles ================= */
.contact-section{padding:64px 0}
.contact-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap);
  align-items:start;
}
.contact-left{ padding:36px; }
.contact-title{
  font-family:"Montserrat",sans-serif;
  font-size:40px;
  margin:0 0 18px 0;
  line-height:1;
}
.contact-lead{ color:var(--muted); margin:0 0 22px 0; max-width:44ch; }
.contact-list{list-style:none;padding:0;margin:12px 0 18px 0;display:block}
.contact-item{ display:flex; align-items:center; gap:12px; margin:12px 0; color:var(--muted); }
.contact-link{ color:var(--white); text-decoration:none; font-weight:600; }
.icon{ width:20px; height:20px; flex:0 0 20px; color:var(--pink) }
.contact-note{ margin-top:22px; color:var(--muted); font-size:14px }

/* right panel: form */
.contact-right{
  background:linear-gradient(180deg,rgba(255,255,255,0.03),rgba(255,255,255,0.01));
  padding:28px;
  border-radius:12px;
  box-shadow:0 12px 40px rgba(0,0,0,0.6);
}
.contact-form{ display:grid; gap:14px; }
.field label{ display:block; margin-bottom:6px; font-size:13px; color:var(--muted); font-weight:600; }
.field input[type="text"], .field input[type="email"], .field input[type="tel"], .field textarea{
  width:100%; padding:12px 14px; border-radius:10px; border:0; background:#0d0d0d; color:var(--white);
  font-size:15px; outline:2px solid rgba(255,255,255,0.03); transition: outline .12s ease, box-shadow .12s ease;
}
.field input::placeholder, .field textarea::placeholder{ color:#777 }
.field textarea{ min-height:160px; resize:vertical; }

/* two columns inside form */
.two-up{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }

/* actions */
.actions{ display:flex; align-items:center; gap:12px; }
.btn{ padding:10px 14px; border-radius:10px; border:0; cursor:pointer; }
.btn-primary{ background:var(--pink); color:var(--white); font-weight:700; }
.form-msg{ color:var(--muted); font-size:14px }

/* small screen */
@media (max-width:900px){
  .contact-grid{ grid-template-columns:1fr; padding:0; }
  .contact-left{ order:1; padding:18px 6px; }
  .contact-right{ order:2; margin-top:18px; }
  .contact-title{ font-size:28px; }
  .two-up{ grid-template-columns:1fr; }
}

/* focus states */
input:focus, textarea:focus, .btn:focus{ outline:3px solid rgba(214,31,182,0.14); outline-offset:2px; }

/* sr-only helper */
.sr-only{ position:absolute!important; height:1px; width:1px; overflow:hidden; clip:rect(1px,1px,1px,1px); white-space:nowrap; border:0; padding:0; margin:-1px; }

.contact-title {
  font-family:"Montserrat",sans-serif;
  font-size:40px;
  margin:0 0 38px 0; /* zwiększona przerwa pod tytułem */
  line-height:1;
}
.contact-title span {
  color: var(--pink);
}
.contact-logo {
  width: 200px;
  max-width: 100%;
  height: auto;
  display: block;
  margin-bottom: 24px;
}
.contact-link {
  color: inherit;
}

.contact-link strong {
  color: var(--pink);
}
.site-logo.mobile-only {
  display: none;
}

@media (max-width: 900px) {
  .site-logo.mobile-only {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 64px;
    margin-right: 16px;
  }
  .site-logo.mobile-only img {
    height: 40px;
    width: auto;
    display: block;
    border-radius: 12px; /* lekko zaokrąglone krawędzie */
  }
  .header-inner {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    height: 64px;
    min-height: 64px;
  }
}

/* toast popup (slide-up) */
.toast-popup {
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%) translateY(120%);
  z-index: 9999;
  min-width: 260px;
  max-width: calc(100% - 40px);
  background: rgba(10, 10, 10, 0.98);
  color: #e9eef0;
  border-radius: 12px;
  padding: 14px 18px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.6);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  font-size: 14px;
  line-height: 1.3;
  opacity: 0;
  transition: transform .42s cubic-bezier(.22,.9,.26,1), opacity .24s ease;
  pointer-events: none;
}

/* visible */
.toast-popup.show {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
  pointer-events: auto;
}

/* message */
.toast-popup .toast-body { color: #f3f6f7; }

/* success / error accent */
.toast-popup.success { border: 1px solid rgba(255,47,166,0.12); }
.toast-popup.error { border: 1px solid rgba(255,80,80,0.08); }

/* small responsive tweak */
@media (max-width: 420px) {
  .toast-popup { left: 50%; bottom: 12px; padding: 12px 14px; border-radius: 10px; }
}