:root{
  --bg:#ffffff;
  --fg:#0a0a0a;
  --muted: rgba(0,0,0,0.06);
  --accent: rgba(0,0,0,0.12);
  --transition: 320ms cubic-bezier(.2,.9,.3,1);
}

html,body{min-height:100%;margin:0;background:var(--bg);color:var(--fg);font-family:"Museo Moderno", Arial, sans-serif;}
a{color:var(--fg);text-decoration:none;}
a.under{border-bottom:1px solid rgba(0,0,0,.4);}
.wrap{max-width:1100px;margin:40px auto;padding:28px;}
.page-header{display:flex;align-items:center;gap:16px;margin-bottom:18px;}
.page-header img{height:44px;width:auto;border-radius:6px;}
.page-title{margin:0;font-size:30px;}
.lead{font-size:18px;opacity:.9;line-height:1.55;margin-top:18px;max-width:780px;}
.card{margin-top:24px;padding:20px;border-radius:12px;border:1px solid rgba(0,0,0,0.06);box-shadow:0 18px 40px rgba(0,0,0,0.04);}

/* Filmic fade */
body{opacity:0;transition:opacity 360ms ease}
body.page-loaded{opacity:1}
@media (prefers-reduced-motion:reduce){body{transition:none}}

/* Index */
.index-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:40px;}
.logo-container{position:relative;display:inline-block;padding:28px;border-radius:20px;transition:transform var(--transition), box-shadow var(--transition);}
.logo-container:hover{transform:translateY(-6px);box-shadow:0 30px 50px rgba(0,0,0,.08);}
.logo{display:block;max-width:430px;width:60vw;height:auto;filter:grayscale(0) contrast(1);}
.corner{position:absolute;width:48%;height:48%;z-index:5;background:transparent;cursor:pointer;transition:background-color var(--transition), transform var(--transition);border-radius:6px;display:flex;align-items:flex-start;justify-content:flex-start;}
.corner:focus{outline:3px solid rgba(0,0,0,0.08);outline-offset:4px;}
.corner::after{content: attr(data-label);position:absolute;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:6px 8px;background:rgba(0,0,0,.85);color:#fff;border-radius:6px;transform:translateY(-8px) scale(.95);opacity:0;transition:opacity 180ms linear, transform 220ms cubic-bezier(.2,.9,.3,1);pointer-events:none;white-space:nowrap;}
.corner:hover::after,.corner:focus::after{opacity:1;transform:translateY(-18px) scale(1);}
.corner:hover{background:var(--muted);transform:translateY(-3px);box-shadow:inset 0 8px 30px var(--accent);}
.top-left{top:6px;left:6px;border-radius:10px;}
.top-right{top:6px;right:6px;border-radius:10px;justify-content:flex-end;align-items:flex-start;}
.bottom-left{bottom:6px;left:6px;border-radius:10px;align-items:flex-end;justify-content:flex-start;}
.bottom-right{bottom:6px;right:6px;border-radius:10px;align-items:flex-end;justify-content:flex-end;}
.hint{margin-top:18px;text-align:center;font-size:13px;opacity:.7;}
@media (max-width:520px){.logo-container{padding:12px}.logo{width:86vw}.corner::after{font-size:11px;padding:5px 7px}}

/* Grid tiles */
.grid-tiles{display:grid;gap:24px;justify-content:center}
.tile{width:240px;height:240px;border:4px solid #000;border-radius:8px;background:#fff;overflow:hidden;box-shadow:0 8px 18px rgba(0,0,0,.04);display:flex;align-items:center;justify-content:center;transition:transform var(--transition), box-shadow var(--transition);will-change:transform;}
.tile:hover{transform:scale(1.25);box-shadow:0 18px 40px rgba(0,0,0,0.08);z-index:2}
.tile img{width:100%;height:100%;object-fit:cover;display:block;}
.tile .label{padding:10px;font-weight:700;text-align:center;}

/* Portfolio */
body.page-portfolio{padding-top:140px}
body.page-portfolio .grid-tiles{grid-template-columns:repeat(3,240px)}
@media(max-width:980px){body.page-portfolio .grid-tiles{grid-template-columns:repeat(2,240px)}}
@media(max-width:520px){body.page-portfolio .grid-tiles{grid-template-columns:240px;gap:18px}}
body.page-portfolio .tile.placeholder{visibility:hidden;border-color:transparent;box-shadow:none;opacity:0;pointer-events:none}

/* Usługi */
body.page-uslugi{padding-top:80px}
body.page-uslugi .grid-tiles{grid-template-columns:repeat(3,240px)}
@media(max-width:980px){body.page-uslugi .grid-tiles{grid-template-columns:repeat(2,240px)}}
@media(max-width:520px){body.page-uslugi .grid-tiles{grid-template-columns:240px;gap:18px}}

/* Kontakt hero + form */
.contact-hero{max-width:1200px;margin:56px auto 32px;padding:0 24px;display:flex;align-items:center;gap:32px}
.contact-hero .hero-media{flex:1 1 60%;min-width:320px}
.contact-hero .hero-media img{display:block;width:100%;height:auto;object-fit:contain}
.contact-hero .hero-info{flex:1 1 40%;min-width:280px}
.contact-info{font-size:1.05rem;line-height:1.65}
.contact-info p{display:flex;align-items:center;gap:10px;margin:10px 0}
.contact-info i{font-size:1.15em;min-width:22px;text-align:center}
.contact-info a{color:#000;text-decoration:none;border-bottom:1px solid rgba(0,0,0,.3);transition:border-color .2s, opacity .2s}
.contact-info a:hover{border-color:#000;opacity:.8}
@media(max-width:900px){
  .contact-hero{flex-direction:column;align-items:flex-start;text-align:left}
  .contact-hero .hero-media,.contact-hero .hero-info{width:100%}
}

/* Contact form */
.contact-form{
  max-width: 760px;
  margin: 0 auto 40px;
  padding: 20px;
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 12px;
  box-shadow: 0 18px 40px rgba(0,0,0,0.04);
}
.contact-form h2{margin:8px 0 12px}
.form-row{display:flex;gap:16px;flex-wrap:wrap}
.form-row .field{flex:1 1 240px;display:flex;flex-direction:column;gap:6px}
.field input,.field textarea{
  font-family: inherit;
  font-size: 16px;
  padding: 12px 14px;
  border: 1px solid rgba(0,0,0,0.25);
  border-radius: 10px;
  outline: none;
}
.field textarea{min-height: 140px; resize: vertical;}
button.btn{
  margin-top: 10px;
  padding: 12px 18px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,0.2);
  background:#000;color:#fff;font-weight:700;
  cursor:pointer;
  transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}
button.btn:hover{transform:translateY(-2px);box-shadow:0 10px 20px rgba(0,0,0,.12);opacity:.95}

/* Footer back button */
.page-footer{margin:40px auto 28px;display:flex;justify-content:center}
.back-home{display:inline-flex;align-items:center;gap:10px;padding:8px 12px;border:1px solid rgba(0,0,0,.15);border-radius:999px;transition:transform .18s ease, box-shadow .18s ease, background-color .18s ease}
.back-home img{height:24px;width:auto;border-radius:4px;display:block}
.back-home span{font-weight:700}
.back-home:hover{transform:translateY(-2px);box-shadow:0 10px 20px rgba(0,0,0,.06);background-color:rgba(0,0,0,.03)}

/* Lightbox */
.lb{position:fixed;inset:0;background:rgba(0,0,0,.9);display:none;align-items:center;justify-content:center;z-index:9999}
.lb.open{display:flex}
.lb img{max-width:90vw;max-height:90vh;display:block}
.lb .nav{position:absolute;top:50%;transform:translateY(-50%);font-size:34px;color:#fff;user-select:none;cursor:pointer;padding:12px 16px}
.lb .prev{left:10px} .lb .next{right:10px}
.lb .close{position:absolute;top:14px;right:18px;font-size:28px;color:#fff;cursor:pointer}


.contact-form-wrapper {
  max-width: 600px;
  margin: 40px auto;
  padding: 30px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.contact-form-wrapper h2 {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 25px;
  text-align: center;
}

.contact-form-wrapper label {
  display: block;
  font-weight: 600;
  margin-bottom: 6px;
  margin-top: 16px;
}

.contact-form-wrapper input,
.contact-form-wrapper textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #ccc;
  border-radius: 12px;
  font-size: 15px;
  transition: border-color 0.2s ease;
}

.contact-form-wrapper input:focus,
.contact-form-wrapper textarea:focus {
  outline: none;
  border-color: #000;
}

.contact-form-wrapper textarea {
  resize: vertical;
  min-height: 120px;
}

.contact-form-wrapper .btn {
  display: block;
  margin: 30px auto 0;
  padding: 12px 28px;
  background-color: #000;
  color: #fff;
  border-radius: 24px;
  font-weight: 600;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.2s ease;
  border: none;
}

.contact-form-wrapper .btn:hover {
  background-color: #222;
}

/* === RESPONSYWNOŚĆ === */
@media (max-width: 768px) {
  body {
    padding: 10px;
  }

  header nav ul {
    flex-direction: column;
    align-items: center;
  }

  header nav ul li {
    margin: 8px 0;
  }

  .portfolio-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px;
  }

  .form-container {
    flex-direction: column;
    width: 100% !important;
    padding: 10px;
  }

  input[type="text"],
  input[type="email"],
  textarea {
    width: 100% !important;
    margin: 6px 0;
  }

  .contact-info {
    text-align: center;
  }

  .submit-button {
    display: block;
    margin: 0 auto;
  }

  .logo-footer {
    flex-direction: column;
    align-items: center;
    gap: 6px;
  }

  .logo-footer img {
    margin: 0 auto;
  }
}