* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: 'Montserrat', 'Lato', sans-serif; background-color: #FAF5EC; color: #1C1108; }

/* Gold divider */
.divider-gold {
  width: 60px; height: 2px;
  background: linear-gradient(90deg, transparent, #C9A050, transparent);
  margin: 0 auto;
}

/* Hero gradient overlay */
.hero-overlay {
  background: linear-gradient(
    160deg,
    rgba(45,32,16,0.72) 0%,
    rgba(45,32,16,0.45) 50%,
    rgba(197,173,143,0.25) 100%
  );
}

/* Section soft bg */
.bg-section { background-color: #EDE4D6; }

/* Logo image sizing */
.logo-nav { height: 40px; width: auto; }
.logo-footer { height: 120px; width: auto; }
.logo-about { width: 65%; height: auto; }

/* Nav link underline hover */
.nav-link {
  position: relative; padding-bottom: 2px;
}
.nav-link::after {
  content: ''; position: absolute; bottom: 0; left: 0;
  width: 0; height: 1px; background: #C9A050;
  transition: width 0.3s ease;
}
.nav-link:hover::after { width: 100%; }

/* Service card */
.service-card {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.service-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(45,32,16,0.12);
}

/* Scroll-triggered fade-in */
.fade-in {
  opacity: 0; transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.fade-in.visible {
  opacity: 1; transform: translateY(0);
}

/* Language toggle */
.lang-btn.active { color: #C9A050; font-weight: 700; }


/* About section: float + breathe combined (must be in one animation property) */
@keyframes floatY {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
}
@keyframes breathe {
  0%, 100% { box-shadow: 0 20px 50px rgba(45,32,16,0.15), 0 0 0 0 rgba(201,160,80,0); }
  50% { box-shadow: 0 30px 70px rgba(45,32,16,0.30), 0 0 40px 8px rgba(201,160,80,0.20); }
}
.about-float {
  animation: floatY 5s ease-in-out infinite, breathe 4s ease-in-out infinite;
}

/* About badge slide in */
@keyframes slideInRight {
  from { opacity: 0; transform: translateX(20px); }
  to { opacity: 1; transform: translateX(0); }
}
.about-badge { animation: slideInRight 0.7s ease 0.9s both; }

/* Hero background animation */
@keyframes heroGlow1 {
  0%   { transform: translate(0%, 0%) scale(1); opacity: 0.35; }
  33%  { transform: translate(8%, 12%) scale(1.2); opacity: 0.55; }
  66%  { transform: translate(-6%, 6%) scale(0.9); opacity: 0.30; }
  100% { transform: translate(0%, 0%) scale(1); opacity: 0.35; }
}
@keyframes heroGlow2 {
  0%   { transform: translate(0%, 0%) scale(1); opacity: 0.25; }
  40%  { transform: translate(-10%, -8%) scale(1.15); opacity: 0.45; }
  70%  { transform: translate(6%, -12%) scale(1.05); opacity: 0.28; }
  100% { transform: translate(0%, 0%) scale(1); opacity: 0.25; }
}
.hero-glow-1 {
  position: absolute; pointer-events: none;
  width: 70%; padding-bottom: 70%; border-radius: 50%;
  background: radial-gradient(circle, rgba(201,160,80,0.7) 0%, transparent 65%);
  top: 5%; left: 50%;
  animation: heroGlow1 4s ease-in-out infinite;
}
.hero-glow-2 {
  position: absolute; pointer-events: none;
  width: 60%; padding-bottom: 60%; border-radius: 50%;
  background: radial-gradient(circle, rgba(190,140,80,0.5) 0%, transparent 65%);
  top: 35%; left: -5%;
  animation: heroGlow2 5s ease-in-out infinite;
}

/* ── Gallery carousel ── */
.gallery-viewport {
  overflow: hidden;
  position: relative;
}
.gallery-track {
  display: flex;
  transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform;
}
.gallery-slide {
  /* width set dynamically via JS: 100% / totalImages */
  flex-shrink: 0;
  padding: 0 8px;
  box-sizing: border-box;
}
@media (max-width: 767px) {
  .gallery-slide { padding: 0 4px; }
}
.gallery-slide img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  display: block;
}
.gallery-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 44px; height: 44px;
  background: rgba(28,17,8,0.75);
  color: #C9A050;
  border: 1px solid rgba(201,160,80,0.4);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}
.gallery-arrow:hover { background: #1C1108; border-color: #C9A050; }
.gallery-arrow-prev { left: 4px; }
.gallery-arrow-next { right: 4px; }
.gallery-dots {
  display: flex; justify-content: center; gap: 8px;
  margin-top: 20px;
}
.gallery-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #BEB0A2;
  cursor: pointer;
  transition: background 0.3s, transform 0.3s;
  border: none; padding: 0;
}
.gallery-dot.active {
  background: #C9A050;
  transform: scale(1.3);
}
.gallery-placeholder {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 12px;
  padding: 60px 20px;
  border: 2px dashed #BEB0A2;
  color: #BEB0A2;
  text-align: center;
}
.gallery-slide img { cursor: zoom-in; }

/* ── Lightbox ── */
#lightbox {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  width: 100%; height: 100%;
  z-index: 1000;
  background: rgba(10,6,2,0.93);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity 0.3s ease;
  will-change: opacity;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}
#lightbox.open { opacity: 1; pointer-events: all; }
#lightbox-img {
  max-width: 90vw; max-height: 88vh;
  object-fit: contain;
  display: block;
  transition: opacity 0.2s ease;
}
#lightbox-img.fade { opacity: 0; }
.lb-btn {
  position: absolute;
  width: 48px; height: 48px;
  background: rgba(28,17,8,0.80);
  border: 1px solid rgba(201,160,80,0.45);
  color: #C9A050;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}
.lb-btn:hover { background: #1C1108; border-color: #C9A050; }
#lb-close { top: 16px; right: 16px; }
#lb-prev  { top: 50%; left: 16px;  transform: translateY(-50%); }
#lb-next  { top: 50%; right: 16px; transform: translateY(-50%); }
#lb-counter {
  position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%);
  font-family: 'Montserrat', sans-serif; font-size: 12px;
  color: rgba(201,160,80,0.8); letter-spacing: 0.15em;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .fade-in { opacity: 1; transform: none; transition: none; }
  .service-card { transition: none; }
  .nav-link::after { transition: none; }
  .about-float { animation: none; box-shadow: 0 20px 50px rgba(45,32,16,0.15); }
  .about-badge { animation: none; opacity: 1; transform: none; }
  .hero-glow-1, .hero-glow-2 { animation: none; }
  .gallery-track { transition: none; }
  .word-reveal { animation: none; opacity: 1; transform: none; filter: none; }
  .sticky-cta-desktop { animation: none; }
  .bento-photo-wrap img { transition: none; }
  .bento-photo-wrap::after { transition: none; }
  button.bg-gold, a.bg-gold { transition: none; }
}

/* ═══════════════════════════════════════
   CSS CUSTOM PROPERTIES — Fluid Type
═══════════════════════════════════════ */
:root {
  --text-hero:   clamp(2.25rem, 5vw + 0.5rem, 4rem);
  --text-h2:     clamp(1.75rem, 3vw + 0.5rem, 2.5rem);
  --section-py:  clamp(5rem, 8vw, 7rem);
}

/* ═══════════════════════════════════════
   KINETIC TYPOGRAPHY
═══════════════════════════════════════ */
@keyframes wordSlideUp {
  from { opacity: 0; transform: translateY(28px) skewY(2deg); filter: blur(4px); }
  to   { opacity: 1; transform: translateY(0) skewY(0deg); filter: blur(0); }
}
.word-reveal {
  display: inline-block;
  opacity: 0;
  animation: wordSlideUp 0.65s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: calc(var(--wr-i, 0) * 0.11s + 0.25s);
  will-change: transform, opacity;
}

/* ═══════════════════════════════════════
   STICKY BOOKING CTA
═══════════════════════════════════════ */
@keyframes goldPulse {
  0%, 100% { box-shadow: 0 4px 20px rgba(201,160,80,0.3), 0 0 0 0 rgba(201,160,80,0.15); }
  50%       { box-shadow: 0 6px 32px rgba(201,160,80,0.55), 0 0 0 6px rgba(201,160,80,0.07); }
}
.sticky-cta-desktop {
  position: fixed;
  bottom: 2rem; right: 2rem;
  z-index: 40;
  transform: translateY(120px);
  opacity: 0;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.4s ease;
  display: none;
  align-items: center; gap: 0.5rem;
  background: #C9A050; color: #1C1108;
  font-family: 'Montserrat', sans-serif; font-weight: 700;
  font-size: 0.7rem; letter-spacing: 0.15em; text-transform: uppercase;
  padding: 0.75rem 1.5rem;
  cursor: pointer; border: none;
}
@media (min-width: 1024px) {
  .sticky-cta-desktop { display: flex; }
}
.sticky-cta-desktop.visible {
  transform: translateY(0); opacity: 1;
  animation: goldPulse 3s ease-in-out infinite;
}
.sticky-cta-desktop:hover { background: #A8842E; }

.sticky-cta-mobile {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 40;
  transform: translateY(100%);
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  background: #C9A050;
  padding: 0.75rem 1rem;
  padding-bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
  display: block;
}
@media (min-width: 1024px) {
  .sticky-cta-mobile { display: none; }
}
.sticky-cta-mobile.visible { transform: translateY(0); }
.sticky-cta-mobile button {
  width: 100%; background: none; border: none; cursor: pointer;
  color: #1C1108; font-family: 'Montserrat', sans-serif; font-weight: 700;
  font-size: 0.8rem; letter-spacing: 0.15em; text-transform: uppercase;
  padding: 0.5rem 0;
}

/* ═══════════════════════════════════════
   BENTO SERVICES GRID
═══════════════════════════════════════ */
.bento-services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
/* Desktop: explicit placement */
@media (min-width: 1024px) {
  .bento-services-grid > :nth-child(1) { grid-column: 1; grid-row: 1 / 3; }
  .bento-services-grid > :nth-child(2) { grid-column: 2; grid-row: 1; }
  .bento-services-grid > :nth-child(3) { grid-column: 3; grid-row: 1; }
  .bento-services-grid > :nth-child(4) { grid-column: 2 / 4; grid-row: 2; border-left: 3px solid #C9A050; }
  .bento-services-grid > :nth-child(5) { grid-column: 1 / 3; grid-row: 3; }
  .bento-services-grid > :nth-child(6) { grid-column: 3; grid-row: 3; }
}
/* Tablet: 2 cols */
@media (min-width: 768px) and (max-width: 1023px) {
  .bento-services-grid { grid-template-columns: repeat(2, 1fr); }
}
/* Mobile: 1 col */
@media (max-width: 767px) {
  .bento-services-grid { grid-template-columns: 1fr; }
}

/* Featured dark card (Koloryzacja) */
.bento-featured {
  background: linear-gradient(150deg, #1C1108 0%, #3A2410 100%);
}
.bento-featured h3 { color: #C9A050; }
.bento-featured p  { color: rgba(250,245,236,0.78); }
.bento-featured .text-gold { color: #D4AE5C; }

/* Standard cards: glassmorphism on hover */
.bento-services-grid .service-card:not(.bento-featured):hover {
  background: rgba(250, 245, 236, 0.72);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-color: rgba(201, 160, 80, 0.38) !important;
  box-shadow: 0 8px 32px rgba(45,32,16,0.09), inset 0 1px 0 rgba(255,255,255,0.55);
}

/* ═══════════════════════════════════════
   BENTO GALLERY (desktop)
═══════════════════════════════════════ */
#gallery-bento {
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 240px 240px;
  gap: 6px;
}
#gallery-bento > :first-child {
  grid-column: 1 / 3;
  grid-row: 1 / 3;
}
.bento-photo-wrap {
  width: 100%; height: 100%;
  overflow: hidden; position: relative;
  cursor: zoom-in;
}
.bento-photo-wrap img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform 0.4s ease, filter 0.3s ease;
}
.bento-photo-wrap:hover img {
  transform: scale(1.06);
  filter: brightness(1.06);
}
.bento-photo-wrap::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(201,160,80,0.2) 0%, transparent 55%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.bento-photo-wrap:hover::after { opacity: 1; }

/* ═══════════════════════════════════════
   NAVBAR GLASSMORPHISM (on scroll)
═══════════════════════════════════════ */
#navbar.scrolled {
  background: rgba(250, 245, 236, 0.88) !important;
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  border-bottom-color: rgba(201, 160, 80, 0.18) !important;
  box-shadow: 0 4px 24px rgba(28, 17, 8, 0.07);
}

/* ═══════════════════════════════════════
   ABOUT BADGE — Glassmorphism
═══════════════════════════════════════ */
.about-badge {
  animation: slideInRight 0.7s ease 0.9s both;
  background: rgba(250, 245, 236, 0.84) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(201, 160, 80, 0.28) !important;
  border-left: 2px solid #C9A050 !important;
  box-shadow: 0 8px 32px rgba(28,17,8,0.1), inset 0 1px 0 rgba(255,255,255,0.65) !important;
}

/* ═══════════════════════════════════════
   BUTTON MICRO-INTERACTIONS (gold CTA)
═══════════════════════════════════════ */
button.bg-gold, a.bg-gold {
  position: relative; overflow: hidden;
  transition: color 200ms ease, background-color 200ms ease,
              transform 200ms ease, box-shadow 200ms ease !important;
}
button.bg-gold:hover, a.bg-gold:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(201,160,80,0.38), 0 0 0 1px rgba(201,160,80,0.22) !important;
}
button.bg-gold:active, a.bg-gold:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(201,160,80,0.25) !important;
}
/* Shimmer sweep */
button.bg-gold::before, a.bg-gold::before {
  content: '';
  position: absolute; top: 0; left: -100%;
  width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.22), transparent);
  transform: skewX(-20deg);
  transition: left 0.55s ease;
  pointer-events: none;
}
button.bg-gold:hover::before, a.bg-gold:hover::before { left: 160%; }

/* ═══════════════════════════════════════
   SCROLL REVEAL — stagger helpers
═══════════════════════════════════════ */
.bento-services-grid .fade-in:nth-child(2) { transition-delay: 0.06s; }
.bento-services-grid .fade-in:nth-child(3) { transition-delay: 0.12s; }
.bento-services-grid .fade-in:nth-child(4) { transition-delay: 0.18s; }
.bento-services-grid .fade-in:nth-child(5) { transition-delay: 0.24s; }
.bento-services-grid .fade-in:nth-child(6) { transition-delay: 0.30s; }