/* ========================================================================
   styles.css — pełny, nowoczesny styl dla HOUSE Master
   Zastępuje dotychczasowy plik; zawiera layout, typografię, przyciski,
   hero, services, portfolio, contact form, footer i responsywność.
   ======================================================================== */

/* -------------------------- Root / variables --------------------------- */
:root{
  /* Colors */
  --bg: #ffffff;
  --surface: #fbfcfe;
  --muted: #6b7280;
  --text: #0f1724;
  --accent: #c79e3b;
  --accent-dark: #a07d2e;
  --primary: #0d6efd;

  /* Buttons & UI */
  --btn-radius: 12px;
  --card-radius: 14px;

  /* Layout */
  --max-width: 1200px;
  --gap: 24px;

  /* Transitions */
  --ease-md: cubic-bezier(.16,.8,.28,1);
}

/* ------------------------------ Reset --------------------------------- */
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; color:var(--text); background:var(--bg); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; line-height:1.45}
img{display:block;max-width:100%;height:auto}
a{text-decoration:none;color:inherit}
ul{margin:0;padding:0}
button{font:inherit}

/* ----------------------------- Container ------------------------------- */
.container {
    width: 100%;
    max-width: 1700px;      /* było 1180px → teraz znacznie szerzej */
    margin: 0 auto;
    padding: 0 40px;        /* większy odstęp od krawędzi */
}

/* ----------------------------- Header --------------------------------- */
.header{
  background: linear-gradient(180deg, rgba(255,255,255,0.6), rgba(255,255,255,0.8));
  border-bottom: 1px solid rgba(15,23,42,0.04);
}
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:18px 0;
}
.logo img{height:56px;width:auto;display:block}
.nav ul{display:flex;gap:14px;align-items:center;list-style:none;margin:0}
.nav a{display:inline-block;padding:8px 10px;border-radius:10px;color:var(--text);font-weight:600}
.nav a:hover{background:rgba(15,23,42,0.04)}
.nav a.active{background:rgba(199,158,59,0.08);color:var(--accent)}

/* mobile nav toggle (if you have one) */
.menu-toggle{display:none;background:none;border:0;font-size:1.4rem;padding:8px;border-radius:8px}

/* ------------------------------ Hero ---------------------------------- */
.hero{padding:48px 0}
.hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:center}
.hero-text h1{font-family:'Playfair Display', serif;font-size:2.1rem;margin:0 0 10px}
.hero-text p.lead{color:var(--muted);margin:0 0 18px;font-size:1rem;max-width:54ch}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap}

/* hero images grid */
.hero-media{display:flex;justify-content:center;align-items:center}
.hero-media-framed{position:relative}
.hero-grid-images{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;width:100%;max-width:640px}
.hero-grid-images img {
  width: 100%;
  height: 260px;            /* stała wysokość dla wszystkich */
  object-fit: cover;        /* zdjęcie zawsze wypełnia */
  border-radius: 12px;
  box-shadow: 0 12px 36px rgba(2,6,23,0.06);
  transition: transform 320ms var(--ease-md), box-shadow 320ms var(--ease-md);
}

.hero-grid-images img:hover{transform:translateY(-6px) scale(1.02);box-shadow:0 24px 60px rgba(2,6,23,0.12)}

/* ---------------------------- Buttons (unified) ----------------------- */
.btn,
button,
.service-link {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:12px 18px;
  border-radius:var(--btn-radius);
  font-weight:700;
  cursor:pointer;
  transition: transform 220ms var(--ease-md), box-shadow 220ms var(--ease-md), background 220ms var(--ease-md);
}

/* primary CTA — gold */
.btn-primary{
  background: linear-gradient(180deg, var(--accent), var(--accent-dark));
  color:#07101a;
  box-shadow:0 12px 34px rgba(199,158,59,0.12);
}
.btn-primary:hover{transform:translateY(-4px);box-shadow:0 24px 60px rgba(160,125,46,0.14)}
.btn-primary:active{transform:translateY(-1px)}

/* outline secondary */
.btn-outline{
  background:transparent;
  border:1px solid rgba(15,23,42,0.06);
  color:var(--text);
}
.btn-outline:hover{background:rgba(0,0,0,0.04);transform:translateY(-3px)}

/* small */
.btn-small{padding:8px 12px;border-radius:10px;font-weight:700}

/* service link (card CTA) */
.service-link{background:transparent;border:1px solid rgba(199,158,59,0.12);color:var(--accent);padding:10px 14px;border-radius:10px}
.service-link:hover{background:var(--accent);color:#fff;transform:translateY(-3px)}

/* header-login */
.header-login{padding:8px 12px;border-radius:10px;border:1px solid rgba(0,0,0,0.06)}
.header-login:hover{background:rgba(0,0,0,0.04);transform:translateY(-2px)}

/* ---------------------------- Services -------------------------------- */
.services{padding:48px 0}
.section-title{font-family:'Playfair Display',serif;font-size:1.75rem;text-align:center;margin:0 0 8px}
.services-intro{text-align:center;color:var(--muted);max-width:720px;margin:0 auto 28px}
.section-kicker {
  color: var(--accent);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: .08em;
  margin-bottom: 8px;
  text-align: center;
  text-transform: uppercase;
}

/* services grid */
.services-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;align-items:stretch}
.service{background:linear-gradient(180deg, rgba(255,255,255,0.95), #ffffff);border-radius:var(--card-radius);padding:20px;box-shadow:0 10px 30px rgba(2,6,23,0.06);display:flex;flex-direction:column;gap:12px;transition:transform 220ms var(--ease-md),box-shadow 220ms var(--ease-md)}
.service:hover{transform:translateY(-8px);box-shadow:0 20px 48px rgba(2,6,23,0.08)}
.service h3{margin:0;font-size:1.05rem}
.service p{margin:0;color:var(--muted);flex-grow:1}

.why-section {
  background:
    linear-gradient(135deg, rgba(199,158,59,0.10), rgba(255,255,255,0) 42%),
    linear-gradient(180deg, #ffffff, #fbfcfe);
  padding: 64px 0;
}

.why-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin: 28px auto 0;
  max-width: 1050px;
}

.why-card {
  background: rgba(255,255,255,0.96);
  border: 1px solid rgba(15,23,42,0.06);
  border-radius: 14px;
  box-shadow: 0 18px 46px rgba(8,12,20,0.07);
  padding: 24px;
  position: relative;
  overflow: hidden;
  transition: transform 220ms var(--ease-md), box-shadow 220ms var(--ease-md);
}

.why-card-centered {
  grid-column: 2;
}

.why-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(90deg, var(--accent), rgba(199,158,59,0.16));
}

.why-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 28px 70px rgba(8,12,20,0.10);
}

.why-icon {
  align-items: center;
  background: rgba(199,158,59,0.14);
  border: 1px solid rgba(199,158,59,0.26);
  border-radius: 12px;
  color: var(--accent-dark);
  display: flex;
  font-size: 1.15rem;
  font-weight: 900;
  height: 42px;
  justify-content: center;
  margin-bottom: 16px;
  width: 42px;
}

.why-card h3 {
  margin: 0 0 10px;
  font-size: 1.1rem;
}

.why-card p {
  color: var(--muted);
  margin: 1,2;
}

.local-seo {
  background: #f5f7fb;
  padding: 64px 0;
}

.area-panel {
  background:
    radial-gradient(circle at 12% 16%, rgba(199,158,59,0.18), transparent 30%),
    linear-gradient(135deg, #101722, #1d2633);
  border-radius: 18px;
  box-shadow: 0 26px 80px rgba(8,12,20,0.16);
  color: #f8fafc;
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(220px, .6fr);
  gap: 28px;
  padding: 36px;
}

.area-copy .section-kicker,
.area-copy .section-title {
  text-align: left;
}

.area-copy .section-title {
  color: #ffffff;
  max-width: 760px;
}

.area-copy p {
  color: #cbd5e1;
  max-width: 720px;
}

.area-highlight {
  align-self: start;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 16px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.10);
  padding: 22px;
}

.area-highlight span,
.area-highlight small {
  color: #cbd5e1;
  display: block;
  font-weight: 700;
}

.area-highlight strong {
  color: #f6c85f;
  display: block;
  font-size: 2rem;
  line-height: 1.1;
  margin: 8px 0;
}

.area-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  grid-column: 1 / -1;
  margin-top: 4px;
}

.area-list span {
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  color: #f8fafc;
  font-weight: 700;
  padding: 9px 13px;
  transition: background 180ms ease, border-color 180ms ease, transform 180ms ease;
}

.area-list span:hover {
  background: rgba(199,158,59,0.20);
  border-color: rgba(199,158,59,0.46);
  transform: translateY(-2px);
}

/* ---------------------------- Services -------------------------------- */
.uslugi{padding:48px 0}
.uslugi-title{font-family:'Playfair Display',serif;font-size:1.75rem;text-align:center;margin:0 0 8px}
.uslugi-intro{text-align:center;color:var(--muted);max-width:720px;margin:0 auto 28px}
.uslugi-kicker {
  color: var(--accent);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: .08em;
  margin-bottom: 8px;
  text-align: center;
  text-transform: uppercase;
}

/* services grid */
.uslugi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;align-items:stretch}
.uslugi-grid .service-centered{grid-column:2 / span 2;text-align:center;align-items:center}
.uslugi{background:linear-gradient(180deg, rgba(255,255,255,0.95), #ffffff);border-radius:var(--card-radius);padding:20px;box-shadow:0 10px 30px rgba(2,6,23,0.06);display:flex;flex-direction:column;gap:12px;transition:transform 220ms var(--ease-md),box-shadow 220ms var(--ease-md)}
.uslugi:hover{transform:translateY(-8px);box-shadow:0 20px 48px rgba(2,6,23,0.08)}
.uslugi h3{margin:0;font-size:1.05rem}
.uslugi h4{margin:0;font-size:1.05rem;}
.uslugi p{margin:0;color:var(--muted);flex-grow:1}

/* ---------------------------- Portfolio -------------------------------- */
.portfolio-grid{margin-top:30px;display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.portfolio-grid img{width:100%;border-radius:12px;object-fit:cover;height:220px;box-shadow:0 12px 30px rgba(2,6,23,0.06)}

/* --------------------------- Contact form ------------------------------ */
.contact-form{margin-top:25px;display:flex;flex-direction:column;gap:18px;max-width:520px}
.contact-form label{display:block;font-weight:600;color:#334155}
.contact-form input,.contact-form textarea{width:100%;padding:12px;border-radius:10px;border:1px solid #d0d7e0;font-size:1rem}
.contact-form input:focus,.contact-form textarea:focus{outline:none;border:1px solid var(--accent);box-shadow:0 0 0 4px rgba(199,158,59,0.12)}

/* ---------------------------- Footer ---------------------------------- */
/* Modern footer (dark) */
.site-footer {
  background: #1c1f26;
  padding: 40px 0;
  color: #e2e8f0;
  margin-top: 60px;
}

.footer-inner{display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap}
.footer-brand{display:flex;align-items:center;gap:16px}
.footer-logo{width:48px;height:auto}
.footer-copy{font-size:0.95rem;opacity:0.9;margin:0}
.footer-links{display:flex;gap:20px}
.footer-link{color:#e2e8f0;text-decoration:none;font-weight:600;border-bottom:1px solid transparent;transition:0.2s}
.footer-link:hover{color:var(--accent);border-bottom:1px solid var(--accent)}

.section-divider {
  border: 0;
  border-top: 1px solid rgba(15,23,42,0.12);
  margin: 32px 0;
}

.cta-centered {
  justify-content: center;
  margin-top: 10px;
}

/* -------------------------- Utility classes ---------------------------- */
.muted{color:var(--muted)}
.section{padding:40px 0}

/* ------------------------ Small screens / responsive ------------------- */
@media (max-width:1100px){
  .services-grid{grid-template-columns:repeat(2,1fr)}
  .uslugi-grid .service-centered{grid-column:1 / -1;justify-self:center;width:min(100%, 560px)}
  .hero-grid{grid-template-columns:1fr}
  .why-grid{grid-template-columns:1fr}
  .area-panel{grid-template-columns:1fr}
}
@media (max-width:760px){
  .nav ul{display:none}
  .menu-toggle{display:inline-block}
  .services-grid{grid-template-columns:1fr}
  .uslugi-grid .service-centered{width:100%}
  .hero{padding:28px 0}
  .hero-grid-images img{height:160px}
  .portfolio-grid img{height:160px}
  .footer-inner{flex-direction:column;text-align:center}
  .footer-links{flex-direction:column;gap:10px}
  .why-section,
  .local-seo{padding:44px 0}
  .why-card{padding:20px}
  .area-panel{border-radius:14px;padding:24px}
  .area-copy .section-kicker,
  .area-copy .section-title{text-align:center}
  .area-copy p{text-align:center}
  .area-highlight{text-align:center}
  .area-list{justify-content:center}
}

/* ---------------------- Minor UI & accessibility ----------------------- */
:focus{outline:3px solid rgba(199,158,59,0.12);outline-offset:2px}
.visually-hidden{position:absolute!important;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}

/* --------------------------- Animations -------------------------------- */
.fade-in{opacity:0;transform:translateY(18px);transition:opacity 520ms var(--ease-md),transform 520ms var(--ease-md);will-change:opacity,transform}
.in-view{opacity:1;transform:none}

/* small polish tweaks */
h1,h2,h3{line-height:1.12}
p{margin:0 0 12px}

.contact-card {
  flex: 1;
  min-width: 300px;
  max-width: 380px;
  margin-left: auto;
  background: linear-gradient(180deg, #ffffff, #f6f7fa);
  border: 1px solid rgba(199,158,59,0.25);
  box-shadow: 0 12px 34px rgba(199,158,59,0.15);
  border-radius: 14px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.contact-card h3 {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 700;
  color: #0f1724;
  border-bottom: 1px solid rgba(15,23,42,0.08);
  padding-bottom: 8px;
}

.contact-item {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 1rem;
}

.contact-item a {
  color: #0f1724;
  font-weight: 600;
  transition: 0.2s;
}

.contact-item a:hover {
  color: #c79e3b;
}

.icon {
  font-size: 1.3rem;
}

/* ==========================
   ABOUT PAGE — custom style
   ========================== */

.about-page main {
  background: #ffffff;
}

.contact-layout {
  display: flex;
  gap: 40px;
  flex-wrap: wrap;
  margin-top: 30px;
}

.contact-form-wide {
  flex: 1;
  min-width: 320px;
}

.portfolio-section {
  margin-bottom: 48px;
}

.portfolio-long-desc {
  margin-top: 18px;
}

.about-hero {
  background:
    radial-gradient(circle at 14% 10%, rgba(199,158,59,0.24), transparent 32%),
    linear-gradient(135deg, #101722, #1d2633);
  color: #f9fafb;
  padding: 72px 0;
  position: relative;
  overflow: hidden;
}

.about-hero::after {
  content: "";
  position: absolute;
  right: -120px;
  top: -120px;
  width: 340px;
  height: 340px;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 999px;
}

.about-hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(300px, .65fr);
  gap: 34px;
  align-items: center;
  position: relative;
  z-index: 1;
}

.about-hero .section-kicker {
  text-align: left;
}

.about-hero-text h1 {
  font-family: 'Playfair Display', serif;
  font-size: 2.75rem;
  line-height: 1.05;
  margin: 0 0 18px;
  max-width: 760px;
}

.about-hero-text p {
  color: #cbd5e1;
  font-size: 1.02rem;
  margin: 0;
  max-width: 780px;
}

.about-hero-actions {
  margin-top: 24px;
}

.about-hero-link {
  border-color: rgba(255,255,255,0.18);
  color: #f8fafc;
}

.about-hero-link:hover {
  background: rgba(255,255,255,0.10);
}

.about-hero-card {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 18px;
  box-shadow: 0 26px 70px rgba(0,0,0,0.26);
  display: grid;
  gap: 12px;
  padding: 18px;
}

.about-stat {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 14px;
  padding: 16px;
}

.about-stat-number {
  color: #f6c85f;
  display: block;
  font-size: 1.8rem;
  font-weight: 900;
  line-height: 1.1;
}

.about-stat-label {
  color: #e5e7eb;
  display: block;
  font-size: 0.92rem;
  margin-top: 4px;
}

.about-pillars {
  background:
    linear-gradient(180deg, #ffffff, #fbfcfe);
  padding: 64px 0;
}

.about-card-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin-top: 28px;
}

.about-card {
  background: rgba(255,255,255,0.97);
  border: 1px solid rgba(15,23,42,0.06);
  border-radius: 14px;
  box-shadow: 0 16px 42px rgba(8,12,20,0.06);
  padding: 22px;
  position: relative;
  transition: transform 220ms var(--ease-md), box-shadow 220ms var(--ease-md);
}

.about-card:hover {
  box-shadow: 0 26px 64px rgba(8,12,20,0.10);
  transform: translateY(-6px);
}

.about-card-icon {
  color: var(--accent);
  font-size: .82rem;
  font-weight: 900;
  letter-spacing: .08em;
  margin-bottom: 16px;
}

.about-card h3 {
  font-size: 1.05rem;
  margin: 0 0 10px;
}

.about-card p {
  color: var(--muted);
  margin: 0;
}

.about-process {
  background: #f5f7fb;
  padding: 64px 0;
}

.about-timeline {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin-top: 32px;
  position: relative;
}

.about-timeline::before {
  background: rgba(199,158,59,0.28);
  content: "";
  height: 2px;
  left: 8%;
  position: absolute;
  right: 8%;
  top: 27px;
}

.about-timeline .step {
  background: #ffffff;
  border: 1px solid rgba(15,23,42,0.06);
  border-radius: 14px;
  box-shadow: 0 16px 42px rgba(8,12,20,0.06);
  padding: 20px;
  position: relative;
  z-index: 1;
}

.about-timeline .step-badge {
  align-items: center;
  background: linear-gradient(180deg, var(--accent), var(--accent-dark));
  border-radius: 999px;
  box-shadow: 0 10px 24px rgba(160,125,46,0.22);
  color: #07101a;
  display: flex;
  font-weight: 900;
  height: 40px;
  justify-content: center;
  margin-bottom: 16px;
  width: 40px;
}

.about-timeline .step-content h3 {
  font-size: 1.02rem;
  margin: 0 0 8px;
}

.about-timeline .step-content p {
  color: #4b5563;
  font-size: 0.95rem;
  margin: 0;
}

.about-why {
  background:
    linear-gradient(135deg, rgba(199,158,59,0.10), rgba(255,255,255,0) 42%),
    #ffffff;
  padding: 64px 0;
}

.about-card-grid.compact .about-card {
  border-top: 4px solid rgba(199,158,59,0.56);
}

.about-cta {
  background:
    radial-gradient(circle at top, rgba(199,158,59,0.20), transparent 34%),
    linear-gradient(135deg, #101722, #1d2633);
  color: #e5e7eb;
  padding: 64px 0;
  text-align: center;
}

.about-cta h2 {
  color: #ffffff;
  margin: 0 0 10px;
}

.about-cta p {
  color: #cbd5e1;
  margin: 0 auto 18px;
  max-width: 680px;
}

.about-cta .btn-primary {
  box-shadow: 0 18px 40px rgba(0,0,0,0.28);
}

@media (max-width:900px) {
  .about-hero-inner {
    grid-template-columns: 1fr;
  }

  .about-card-grid,
  .about-timeline {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .about-timeline::before {
    display: none;
  }
}

@media (max-width:600px) {
  .about-hero {
    padding: 48px 0;
  }

  .about-hero-text h1 {
    font-size: 2rem;
  }

  .about-hero .section-kicker {
    text-align: center;
  }

  .about-hero-text {
    text-align: center;
  }

  .about-hero-actions {
    justify-content: center;
  }

  .about-card-grid,
  .about-timeline {
    grid-template-columns: 1fr;
  }

  .about-pillars,
  .about-process,
  .about-why,
  .about-cta {
    padding: 44px 0;
  }
}

.hero-logo-overlay {
  position: absolute;
  top: 50%;
  left: 35%;
  transform: translate(-50%, -50%);
  background: rgba(255,255,255,0.6);
  backdrop-filter: blur(8px);
  padding: 22px;
  border-radius: 16px;
  box-shadow: 0 14px 40px rgba(0,0,0,0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
  transition: transform .3s ease, box-shadow .3s ease;
}


.hero-logo-overlay img {
  width: 250px;
  height: auto;
  opacity: 0.95;
}

.hero-logo-overlay:hover {
  transform: translate(-50%, -50%) scale(1.06);
  box-shadow: 0 22px 60px rgba(0,0,0,0.22);
}

@media (max-width: 760px){
  .hero-logo-overlay {
    padding: 14px;
  }
  .hero-logo-overlay img {
    width: 65px;
  }
}

/* ===========================
   Reviews — nowoczesne karty
   =========================== */

.reviews-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
  margin-top: 18px;
}

/* Hero: logo above one large bathroom image */
.hero-media-framed {
  position: relative;
  flex-direction: column;
  gap: 22px;
}

.hero-media-framed .hero-logo-overlay {
  order: 1;
  position: relative;
  transform: none;
  background: transparent;
  backdrop-filter: none;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
}

.hero-media-framed .hero-logo-overlay img {
  width: 260px;
  height: auto;
  opacity: 1;
}

.hero-media-framed .hero-logo-overlay:hover {
  transform: none;
  box-shadow: none;
}

.hero-media-framed .hero-grid-images {
  order: 2;
  display: block;
  width: 100%;
  max-width: 760px;
}

.hero-media-framed .hero-grid-images img {
  width: 100%;
  height: 430px;
  object-fit: cover;
}

.hero-media-framed .hero-grid-images img:not(:first-child) {
  display: none;
}

@media (max-width: 760px) {
  .hero-media-framed .hero-logo-overlay img {
    width: 170px;
  }

  .hero-media-framed .hero-grid-images img {
    height: 280px;
  }
}

/* Karta opinii */
.review-card {
  background: linear-gradient(180deg, #000000, #ffffff);
  border-radius: 14px;
  padding: 18px;
  box-shadow: 0 12px 30px rgba(8,12,20,0.06);
  border: 1px solid rgba(238, 238, 238, 0.04);
  transition: transform .18s ease, box-shadow .18s ease;
  position: relative;
  overflow: hidden;
}
.review-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 26px 60px rgba(8,12,20,0.10);
}

/* Nagłówek karty: autor + ocena */
.review-header {
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:10px;
}

/* Avatar placeholder */
.review-avatar {
  width:48px;
  height:48px;
  border-radius:10px;
  flex:0 0 48px;
  background: linear-gradient(180deg,#f3f4f6,#eef2f6);
  display:flex;
  align-items:center;
  justify-content:center;
  color:#8b9096;
  font-weight:700;
  font-size:0.95rem;
  box-shadow: 0 6px 18px rgba(10,14,20,0.04);
}

/* Autor i meta */
.review-header strong {
  display:block;
  font-size:1rem;
  color:#ffffff;
}
.review-meta {
  font-size:1.0rem;
  color: #000000;
  margin-top:8px;
}

/* Treść opinii */
.review-card p {
  margin: 0 0 12px 0;
  color: #000000;
  line-height:1.5;
  font-size:1.5rem;
}

/* Gwiazdki — lepsza kontrola (wersja z indywidualnymi <span>) */
.stars{display:inline-flex;gap:6px;align-items:center}
.star {
  font-size:1rem;
  color:#000000; /* neutral */
  transition: transform .18s ease, color .18s ease;
  line-height:1;
  display:inline-block;
}
.star.filled{
  color: #f6c85f; /* złota gwiazdka */
  text-shadow: 0 1px 0 rgba(0,0,0,0.08);
}
.star.filled:hover{ transform: translateY(-3px) scale(1.08); }

/* Krótkie info na dole karty */
.review-footer {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-top:10px;
}

/* Styl dla małych ekranów */
@media (max-width:760px){
  .review-header { gap:10px; }
  .review-avatar { width:44px; height:44px; flex:0 0 44px; font-size:0.88rem; }
}

/* Dodatkowe drobne elementy */
.reviews-empty {
  padding:22px;
  border-radius:10px;
  background:linear-gradient(180deg,#fff,#fbfbfc);
  border:1px dashed rgba(13,18,23,0.04);
  color:var(--muted);
  text-align:center;
}

/* ====== Review form — nowoczesny wygląd ====== */

/* Kontener formularza (jeśli nie masz klasy, użyj .contact-form) */
.contact-form {
  max-width: 760px;
  margin: 22px 0 40px 0;
  display: grid;
  gap: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(250,250,250,0.98));
  padding: 18px;
  border-radius: 14px;
  border: 1px solid rgba(11,14,20,0.04);
  box-shadow: 0 12px 36px rgba(8,12,20,0.06);
}

/* Etykiety */
.contact-form label {
  display:block;
  font-weight:700;
  color:#334155;
  margin-bottom:6px;
  font-size:0.95rem;
}

/* Pola tekstowe i textarea */
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form select,
.contact-form textarea {
  width:100%;
  padding:14px 16px;
  border-radius:12px;
  border:1px solid rgba(15,23,42,0.06);
  background:linear-gradient(180deg,#fff,#fbfbfd);
  color:#0b1220;
  font-size:0.98rem;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.5);
  transition: box-shadow .18s ease, transform .12s ease, border-color .15s ease;
  outline: none;
  resize: vertical;
}

/* Placeholder delikatny */
.contact-form input::placeholder,
.contact-form textarea::placeholder {
  color: #9aa3ad;
}

/* Focus state */
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  border-color: rgba(199,158,59,0.9);
  box-shadow: 0 6px 28px rgba(199,158,59,0.10);
  transform: translateY(-2px);
}

/* Select — lekko stylowany */
.contact-form select {
  appearance: none;
  -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, #9aa3ad 50%),
                    linear-gradient(135deg, #9aa3ad 50%, transparent 50%);
  background-position: calc(100% - 18px) calc(1em + 2px), calc(100% - 13px) calc(1em + 2px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right:42px;
}

/* Przyciski */
.contact-form .btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:14px 22px;
  border-radius:12px;
  font-weight:800;
  cursor:pointer;
  text-decoration:none;
  border:0;
  transition: transform .14s cubic-bezier(.16,.8,.28,1), box-shadow .14s;
}

/* Główny przycisk — złoty gradient */
.contact-form .btn-primary {
  background: linear-gradient(180deg, #c79e3b, #a07d2e);
  color:#07101a;
  box-shadow: 0 12px 36px rgba(160,125,46,0.12);
}
.contact-form .btn-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 26px 60px rgba(160,125,46,0.16);
}
.contact-form .btn-primary:active { transform: translateY(-1px); }

/* Alternatywny (outline) przycisk */
.contact-form .btn-outline {
  background:transparent;
  border:1px solid rgba(15,23,42,0.06);
  color:#0b1220;
}

/* Mały pomocniczy tekst pod polami */
.contact-form .hint {
  font-size:0.9rem;
  color:#6b7280;
  margin-top:6px;
}

/* Układ pól w wierszach (np. imię + ocena obok siebie) */
.form-row {
  display:flex;
  gap:12px;
}
.form-row .col { flex:1; }

/* Responsywność */
@media (max-width:880px) {
  .contact-form { padding:14px; }
  .form-row { flex-direction:column; }
}

/* Drobne poprawki wizualne */
.contact-form textarea { min-height:120px; }
.contact-form input[type="text"] { min-height:44px; }


/* End of styles.css */