/* ===== HERO ===== */
section.hero{position:relative; min-height:78vh; isolation:isolate; display:grid; grid-template-columns:1.05fr .95fr; align-items:center; background: linear-gradient(90deg, rgba(255,255,255,.95) 0 48%, rgba(255,255,255,.35) 60%, rgba(255,255,255,0) 100%), radial-gradient(60% 100% at 0% 0%, rgba(233,182,194,.25), transparent 60%), radial-gradient(80% 100% at 20% 100%, rgba(243,216,207,.22), transparent 60%); overflow:hidden; max-width:var(--container); margin:24px auto; border-radius:24px; box-shadow:var(--shadow);}
@media (max-width:1280px){ section.hero{ margin:14px; } }
.hero .photo{position:absolute; inset:0 0 0 var(--hero-left); background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(246,240,232,.2) 70%), url('') center right/cover no-repeat; filter:saturate(1.02) contrast(1.02); transition: transform 1.5s ease;}
.hero:hover .photo { transform: scale(1.02); }
.hero .photo::after{content:""; position:absolute; inset:0; backdrop-filter:blur(3px); background:linear-gradient(90deg, transparent 0%, rgba(255,255,255,.08) 60%, rgba(255,255,255,.25) 100%);}
.hero-grid{display:grid;grid-template-columns:1fr;gap:20px;margin-top:30px}
.hero h1{font-family:"Playfair Display",serif; font-size:clamp(34px,5.6vw,66px); line-height:1.06; margin:8px 0; max-width:28ch; overflow-wrap:anywhere; hyphens:auto;}
.kicker{letter-spacing:.14em;color:var(--gold-strong);font-weight:700;text-transform:uppercase}
.lead{color:var(--muted);font-size:18px;margin:0 0 18px;max-width:56ch}

/* --- GRID KAFELKÓW Oferty (Home) --- */
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
@media (min-width: 1440px) { .grid { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 24px; } }
.svc {padding: 24px; background: rgba(255, 255, 255, 0.6); border: 1px solid rgba(200, 167, 90, 0.15); border-radius: 16px; transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.4s ease; cursor: default; position: relative; overflow: hidden;}
.svc::before {content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, transparent, var(--gold), transparent); opacity: 0; transition: opacity 0.3s;}
.svc:hover {transform: translateY(-6px) scale(1.02); box-shadow: 0 20px 40px rgba(200, 167, 90, 0.15); background: rgba(255, 255, 255, 0.85);}
.svc:hover::before { opacity: 1; }
.svc h3{margin:0 0 6px;font-size:18px}
.svc p{margin:0;color:var(--muted);font-size:14.5px}
.tag{display:inline-flex;gap:6px;align-items:center;margin-top:10px;padding:4px 10px;border-radius:999px;background:#fff;border:1px solid #eee}

/* ===== O mnie ===== */
#omnie .wrap{display:grid;grid-template-columns:1.15fr .85fr;gap:20px;align-items:center}
.about-photo{aspect-ratio:4/5;border-radius:22px;overflow:hidden;border:1px solid rgba(200,167,90,.28);background:linear-gradient(180deg,#fff,#faf7f2);display:grid;place-items:center}
.about-photo .ph{width:82%;height:82%;border-radius:18px;background:radial-gradient(140px 120px at 70% 30%, rgba(200,167,90,.18), transparent 70%),linear-gradient(180deg,#fff,#f9f4e8);border:1px solid rgba(200,167,90,.22)}
.signature{font-family:"Playfair Display",serif;font-size:22px;color:var(--gold-strong);margin-top:10px}

/* ===== Opinie ===== */
#opinie .row-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.carousel{position:relative;overflow:hidden;margin-bottom:12px}
.track{display:flex;gap:16px;transform:translateX(0);transition:transform .45s ease}
.slide{min-width:clamp(260px, 42vw, 360px);padding:18px;border-radius:16px;background:rgba(255,255,255,.85);border:1px solid rgba(200,167,90,.25);box-shadow:0 10px 24px rgba(0,0,0,.08)}
.navbtn{position:absolute;top:50%;transform:translateY(-50%);background:#fff;border:1px solid rgba(200,167,90,.35);border-radius:999px;width:40px;height:40px;display:grid;place-items:center;cursor:pointer;z-index:2}
.navbtn:hover{background:#fff7}
.nav-prev{left:6px}.nav-next{right:6px}
.dots{display:flex;gap:8px;justify-content:center;margin-top:10px}
.dot{width:8px;height:8px;border-radius:50%;background:#e5dfd2;cursor:pointer}
.dot[aria-current="true"]{background:var(--gold)}

/* ===== Booksy ===== */
.booksy-rating{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 16px;border-radius:16px;border:1px solid rgba(200,167,90,.25);background:linear-gradient(180deg,#fff, #fff7);box-shadow:0 6px 16px rgba(0,0,0,.06); transition:transform 0.3s}
.booksy-rating:hover{transform:translateY(-3px); text-decoration:none}
.booksy-rating .b-title{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
.booksy-rating .b-main{display:flex;align-items:baseline;gap:6px}
.booksy-rating .b-score{font-size:28px;font-weight:800}
.booksy-rating .b-max{color:var(--muted);font-weight:600}
.booksy-rating .b-sub{font-size:14px;color:var(--muted)}
.booksy-rating .b-right{font-weight:700;color:var(--gold-strong)}

/* ===== Social & Comparison ===== */
#social .list{display:flex;gap:12px;flex-wrap:wrap;margin-top:14px;width:100%}
#social .item{display:flex;align-items:center;gap:10px;border-radius:16px;border:1px solid rgba(200,167,90,.3);background:#fff;padding:12px 16px;transition:0.3s}
#social .item:hover{background:#fafafa;text-decoration:none}
#social .feed{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin-top:12px;width:100%;}
#social .feed img{width:100%; height:clamp(160px, 35vw, 260px); object-fit:cover; cursor:zoom-in; border-radius:14px; border:1px solid rgba(200,167,90,.22); box-shadow:0 8px 20px rgba(0,0,0,.06); transition:transform 0.3s ease;}
#social .feed img:hover{transform:scale(1.03)}
.comparison-slider {position: relative; width: 100%; max-width: 600px; margin: 20px auto; border-radius: 16px; overflow: hidden; aspect-ratio: 4/3; box-shadow: var(--shadow); border: 1px solid rgba(200,167,90,.3);}
.comparison-slider img { width: 100%; height: 100%; object-fit: cover; display: block; user-select: none; }
.img-wrapper-before {position: absolute; top: 0; left: 0; height: 100%; width: 50%; overflow: hidden; border-right: 2px solid #fff; z-index: 2;}
.img-wrapper-before img { width: 200%; max-width: none; }
.slider-range {position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: e-resize; z-index: 10; margin: 0;}
.handle {position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; background: rgba(255,255,255,0.8); z-index: 3; pointer-events: none; box-shadow: 0 0 10px rgba(0,0,0,0.2);}
.handle-circle {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 44px; height: 44px; border-radius: 50%; background: var(--gold); color: #fff; display: grid; place-items: center; font-size: 12px; font-weight: bold; border: 2px solid #fff;}

/* ===== RWD Home ===== */
@media (max-width: 1024px) {
  section.hero {display: flex; flex-direction: column; min-height: auto; max-width: none; margin: 10px; padding-bottom: 30px; background: #fff;}
  .hero-grid { order: 1; margin-top: 10px; padding: 10px; }
  .hero h1 { font-size: 32px; }
  .hero .photo {position: relative; order: 2; inset: auto; width: 100%; height: 400px; border-radius: 20px; margin-top: 20px; background-position: center top;}
  .hero .photo::after { display: none; }
  #omnie .wrap { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  section.hero {display: block; position: relative; min-height: 85vh; margin: 0; border-radius: 0; box-shadow: none; overflow: hidden;}
  .hero .photo {position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; border-radius: 0; z-index: 0; background-position: center top !important; background-size: cover !important;}
  .hero .photo::after {display: block; background: linear-gradient(to top, rgba(255,255,255,1) 20%, rgba(255,255,255,0.7) 50%, rgba(255,255,255,0) 100%);}
  .hero .container {position: absolute; bottom: 0; left: 0; right: 0; z-index: 2; padding: 24px 16px;}
  .hero h1 {font-size: 26px; margin-bottom: 8px; text-align: center; color: var(--ink);}
  .kicker { text-align: center; font-size: 12px; margin-bottom: 4px; opacity: 0.8; }
  .lead { display: none; }
  .cta-row { justify-content: center; margin-top: 12px; }
  .hero-grid > div > div[style*="display:flex"] { justify-content: center; font-size: 12px; }
  .badges { justify-content: center; margin-top: 10px; transform: scale(0.9); }
}