/* style.css - ULCIART Pracownia Projektowa */
:root{
  --blue: #1F4D80;
  --dark: #111111;
  --muted: #f6f6f6;
  --max-width: 1100px;
}
*{box-sizing:border-box}
body{font-family: "Inter", "Helvetica Neue", Arial Narrow, sans-serif; margin:0; color:var(--dark); background:#fff; line-height:1.6}
a{color:inherit; text-decoration:none}
.container{max-width:var(--max-width); margin:0 auto; padding:0 20px}
.header{display:flex; align-items:center; justify-content:space-between; padding:18px 0; position:sticky; top:0; background:#fff; z-index:50; border-bottom:1px solid #eee}
.logo img{height:56px}
.nav{display:flex; gap:18px; align-items:center}
.nav a{padding:8px 12px; font-weight:600; letter-spacing:0.02em}
.cta{background:var(--blue); color:#fff; padding:8px 14px; border-radius:6px}

/* Hero */
.hero{display:grid; grid-template-columns:1fr 480px; gap:40px; align-items:center; padding:60px 0}
.hero .hero-text h1{font-size:40px; margin:0 0 16px}
.hero .hero-text p{margin:0 0 20px; color:#444}
.hero .hero-visual{border-radius:8px; overflow:hidden}
.hero .hero-visual img{width:100%; height:100%; object-fit:cover; display:block}

/* Sections */
.section{padding:60px 0}
.section h2{font-size:26px; margin:18px 0 18px}

/* Projekty grid */
.grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.card{background:#fff; border-radius:8px; overflow:hidden; box-shadow:0 6px 18px rgba(0,0,0,0.06); transition:transform .28s ease}
.card img{width:100%; display:block; height:600px; object-fit:cover}
.card .meta{padding:14px}
.card:hover{transform:translateY(-6px)}
.back-button {background:var(--blue); color: #fff; padding: 10px 14px; border: none; border-radius: 6px; cursor: pointer; transition: background-color 0.2s ease;}

/* Oferta */
.services{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.service{background:var(--muted); padding:18px; border-radius:8px}

/* Kontakt */
.contact-grid{display:grid; grid-template-columns:1fr 600px; gap:24px}
.form input, .form textarea{width:100%; padding:10px; margin-bottom:10px; border:1px solid #e3e3e3; border-radius:6px}
.map{border-radius:8px; overflow:hidden}
.contact-form button {background:var(--blue); color: #fff; padding: 10px 14px; border: none; border-radius: 6px; cursor: pointer; transition: background-color 0.2s ease;}

/* Footer */
.footer{padding:28px 0; border-top:1px solid #eee; margin-top:40px; color:#666}

/* Responsive */
@media (max-width:1000px){
  .hero{grid-template-columns:1fr; padding:40px 0}
  .grid{grid-template-columns:repeat(2,1fr)}
  .services{grid-template-columns:repeat(2,1fr)}
  .contact-grid{grid-template-columns:1fr}
}
@media (max-width:600px){
  .grid{grid-template-columns:1fr}
  .nav{display:none}
  .logo img{height:48px}
  .hero .hero-text h1{font-size:28px}
}