/* ============================================================
   ART DIRECTION: Leśny Zakątek — Luxury Forest Real Estate
   Palette: Ivory surfaces + Deep Forest Green + Warm Brass
   Typography: Cormorant Garamond (display) + Jost (body)
   Mood: Spacious, editorial, organic luxury
   ============================================================ */

/* === DESIGN TOKENS === */
:root {
  /* Type Scale */
  --text-xs:   clamp(0.72rem,  0.68rem + 0.2vw,  0.85rem);
  --text-sm:   clamp(0.85rem,  0.8rem  + 0.3vw,  1rem);
  --text-base: clamp(1rem,     0.95rem + 0.25vw,  1.125rem);
  --text-lg:   clamp(1.1rem,   0.95rem + 0.75vw,  1.5rem);
  --text-xl:   clamp(1.5rem,   1.2rem  + 1.25vw,  2.25rem);
  --text-2xl:  clamp(2rem,     1.2rem  + 2.5vw,   3.5rem);
  --text-hero: clamp(2.8rem,   0.5rem  + 7vw,     7.5rem);

  /* Spacing */
  --space-1:  .25rem;  --space-2:  .5rem;   --space-3:  .75rem;
  --space-4:  1rem;    --space-5:  1.25rem; --space-6:  1.5rem;
  --space-8:  2rem;    --space-10: 2.5rem;  --space-12: 3rem;
  --space-16: 4rem;    --space-20: 5rem;    --space-24: 6rem;

  /* Forest Luxury Palette */
  --color-bg:              #f6f4ef;
  --color-surface:         #f9f7f2;
  --color-surface-2:       #faf9f5;
  --color-surface-offset:  #ede9e1;
  --color-divider:         #ddd9d0;
  --color-border:          rgba(42, 74, 52, 0.14);

  --color-text:            #1a1f1c;
  --color-text-muted:      #4e5c53;
  --color-text-faint:      #96a49a;
  --color-text-inverse:    #f5f4ef;

  /* Deep Forest Green */
  --color-forest:          #1e3d2f;
  --color-forest-mid:      #2a4f3d;
  --color-forest-light:    #3b6650;
  --color-forest-glow:     rgba(30, 61, 47, 0.08);

  /* Warm Brass (accent — replaces gold) */
  --color-brass:           #9c7a3c;
  --color-brass-hover:     #7f6128;
  --color-brass-soft:      rgba(156, 122, 60, 0.12);
  --color-brass-border:    rgba(156, 122, 60, 0.28);

  /* Status */
  --color-success:         #2e6b3e;
  --color-warning:         #86641e;
  --color-error:           #7e3030;

  /* UI */
  --radius-sm:   .25rem;
  --radius-md:   .65rem;
  --radius-lg:   1rem;
  --radius-xl:   1.4rem;
  --radius-full: 9999px;

  --transition:  200ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-slow: 500ms cubic-bezier(0.16, 1, 0.3, 1);

  --shadow-sm:  0 1px 4px rgba(15, 28, 20, 0.08);
  --shadow-md:  0 6px 20px rgba(12, 22, 16, 0.11);
  --shadow-lg:  0 16px 48px rgba(10, 18, 14, 0.16);
  --shadow-xl:  0 28px 72px rgba(8, 16, 12, 0.22);

  --content-default: 960px;
  --content-wide:    1280px;

  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body:    'Jost', 'Helvetica Neue', Arial, sans-serif;
}

/* === BASE RESET === */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
}
body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-text);
  background-color: var(--color-bg);
  line-height: 1.7;
}
img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; }
ul { list-style: none; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; background: none; border: none; font: inherit; }
table { border-collapse: collapse; width: 100%; }
input, textarea, select { font: inherit; }
h1,h2,h3,h4,h5,h6 { font-family: var(--font-display); line-height: 1.12; text-wrap: balance; }
p, li { text-wrap: pretty; }
::selection { background: rgba(30,61,47,.18); }
:focus-visible { outline: 2px solid var(--color-brass); outline-offset: 3px; border-radius: var(--radius-sm); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}
/* ============================================================
   PRELOADER
   ============================================================ */
#site-preloader {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(165deg, #2a4f3d 0%, #1e3d2f 55%, #14291f 100%);
  transition: opacity .7s ease, visibility .7s ease;
  text-transform: uppercase;
  letter-spacing: 5px;
  z-index: 99999;
}
#site-preloader.is-hidden {
  opacity: 0; visibility: hidden; pointer-events: none;
}
.preloader-inner {
  display: flex; flex-direction: column; align-items: center; gap: var(--space-5);
  text-align: center;
  color:white;
}
.preloader-icon {
  width: 96px; height: 96px;
  border-radius: var(--radius-lg);
  border: 2px solid rgba(255, 255, 255, .3);
  display: flex; align-items: center; justify-content: center;
  animation: preloaderPulse 2s ease-in-out infinite;
}
.preloader-icon svg {
  width: 64px; height: 64px;
  fill: var(--color-brass-soft);
}
.preloader-name {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 1rem + 2vw, 3rem);
  font-weight: 700;
  font-style: italic;
  color: #fff;
  letter-spacing: 0.05em;
}
.preloader-tagline {
  font-family: var(--font-body);
  font-size: .8rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: white;
}
.preloader-progress {
  width: 144px; height: 4px;
  background: rgba(255, 255, 255, .24);
  position: relative; overflow: hidden;
}
.preloader-progress::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to right, transparent, var(--color-brass-soft), transparent);
  animation: preloaderSweep 1.4s ease-in-out infinite;
}
@keyframes preloaderPulse {
  0%,100% { opacity: .7; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.06); }
}
@keyframes preloaderSweep {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* ============================================================
   NAVIGATION
   ============================================================ */
#mainNav {
  background: rgba(18, 34, 24, 0.93) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(156,122,60,.18);
  padding-block: var(--space-3) !important;
  transition: background var(--transition), box-shadow var(--transition), padding var(--transition);
}
#mainNav.scrolled {
  background: rgba(12, 24, 17, 0.98) !important;
  box-shadow: 0 8px 32px rgba(5,12,8,.28);
}
/* Navbar brand */
#mainNav .navbar-brand {
  font-family: var(--font-display);
  font-size: 25px
  font-weight: 500;
  font-style: italic;
  letter-spacing: .02em;
  color: #fff !important;
  display: inline-flex; align-items: center; gap: .4rem;
  padding-block: .1rem;
  position: relative;
  transition: color var(--transition);
}
/* Leaf ornament */

/* Brass underline */
#mainNav .navbar-brand::after {
  content: "";
  position: absolute;
  left: 1rem; bottom: -0.5px;
  width: calc(100% - 1rem);
  height: 0.5px;
  background: linear-gradient(to right, rgba(156,122,60,.85), transparent);
  transform: scaleX(.3);
  transform-origin: left;
  transition: transform var(--transition-slow);
}
#mainNav .navbar-brand:hover { color: #f5f2eb !important; }
#mainNav .navbar-brand:hover::after { transform: scaleX(1); }

/* Nav links */
#mainNav .nav-link {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: rgba(245, 244, 239, 0.68) !important;
  padding: var(--space-2) var(--space-4) !important;
  position: relative;
  transition: color var(--transition);
}
#mainNav .nav-link::after {
  content: "";
  position: absolute; bottom: 0;
  left: var(--space-4); right: var(--space-4);
  height: 1px;
  background: var(--color-brass);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--transition);
}
#mainNav .nav-link:hover { color: #fff !important; }
#mainNav .nav-link:hover::after { transform: scaleX(1); }

/* ============================================================
   HERO
   ============================================================ */
header {
  position: relative; min-height: 100svh;
  display: flex; align-items: center; justify-content: center;
  background-size: cover !important; background-position: center !important;
  background-attachment: fixed; overflow: hidden;
}
header::before {
  content: "";
  position: absolute; inset: 0; z-index: 1;
  background:
    radial-gradient(circle at 30% 40%, rgba(18, 44, 28, 0.55) 0%, transparent 60%),
    linear-gradient(155deg, rgba(10, 26, 16, 0.72) 0%, rgba(18, 34, 24, 0.48) 50%, rgba(8, 18, 12, 0.7) 100%);
}
header::after {
  content: "";
  position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(to top, rgba(14, 28, 18, 0.68) 0%, transparent 55%);
}
.header-fog {
  position: relative; z-index: 3; width: 100%;
  display: flex; align-items: center; justify-content: center;
  min-height: 100svh; padding: var(--space-16) var(--space-6);
}
header .container { max-width: 900px; margin-inline: auto; }
header h1 {
  font-family: var(--font-display);
  font-size: var(--text-hero);
  font-weight: 400;
  color: #fff; line-height: 1.0;
  letter-spacing: -.01em;
  margin-bottom: var(--space-5);
  text-shadow: 0 2px 40px rgba(0,0,0,.4);
}
header .lead {
  font-size: var(--text-lg); font-weight: 300;
  color: rgba(255,255,255,.82);
  letter-spacing: .07em; text-transform: uppercase;
  margin-bottom: var(--space-10);
  text-shadow: 0 1px 12px rgba(0,0,0,.3);
}
header .btn-primary {
  display: inline-flex; align-items: center; gap: var(--space-3);
  background: transparent;
  border: 1px solid rgba(156,122,60,.75);
  color: rgba(245,238,220,.95);
  font-family: var(--font-body); font-size: var(--text-xs);
  font-weight: 500; letter-spacing: .18em; text-transform: uppercase;
  padding: var(--space-4) var(--space-12);
  border-radius: 0;
  position: relative; overflow: hidden;
  transition: color var(--transition), border-color var(--transition), box-shadow var(--transition);
}
header .btn-primary::before {
  content: ""; position: absolute; inset: 0;
  background: rgba(156,122,60,.18);
  transform: translateX(-101%);
  transition: transform 380ms cubic-bezier(0.16, 1, 0.3, 1);
  z-index: -1;
}
header .btn-primary:hover {
  color: #fff; border-color: var(--color-brass);
  box-shadow: 0 0 28px rgba(156,122,60,.3);
}
header .btn-primary:hover::before { transform: translateX(0); }

/* Scroll indicator */
.scroll-hint {
  position: absolute; bottom: var(--space-10); left: 50%;
  transform: translateX(-50%); z-index: 10;
  display: flex; flex-direction: column; align-items: center; gap: var(--space-2);
  color: rgba(255,255,255,.5); font-family: var(--font-body);
  font-size: var(--text-xs); letter-spacing: .14em; text-transform: uppercase;
  animation: scrollBounce 2.6s ease-in-out infinite;
}
.scroll-hint svg { width: 18px; height: 26px; }
@keyframes scrollBounce {
  0%,100% { transform: translateX(-50%) translateY(0); opacity: .5; }
  50% { transform: translateX(-50%) translateY(8px); opacity: .85; }
}

/* ============================================================
   SECTION GLOBALS
   ============================================================ */
.section-kicker {
  font-family: var(--font-body); font-size: .76rem;
  font-weight: 500; letter-spacing: .22em; text-transform: uppercase;
  color: var(--color-brass); margin-bottom: var(--space-3);
}
.section-heading {
  font-family: var(--font-display);
  font-size: var(--text-2xl); font-weight: 500; line-height: 1.05;
  margin-bottom: var(--space-3);
}
.section-line {
  display: block; width: 60px; height: 1px; margin: var(--space-4) auto var(--space-12);
  background: linear-gradient(to right, transparent, var(--color-brass), transparent);
}

/* ============================================================
   OPIS INWESTYCJI
   ============================================================ */
#opisinwestycji { background: var(--color-bg); padding-block: clamp(var(--space-16), 8vw, var(--space-24)); }
#opisinwestycji .opnier {
  max-width: 100%; color: var(--color-text-muted); line-height: 1.85;
  max-height: 320px; overflow: hidden;
  position: relative; cursor: pointer;
  transition: max-height 600ms cubic-bezier(0.16,1,0.3,1);
}
#opisinwestycji .opnier::after {
  content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 110px;
  background: linear-gradient(to bottom, transparent, var(--color-bg));
  pointer-events: none; transition: opacity 400ms;
}
#opisinwestycji .opnier.hidebef { max-height: 2000px; }
#opisinwestycji .opnier.hidebef::after { opacity: 0; }
.read-more-hint {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-size: var(--text-sm); color: var(--color-forest-light); font-weight: 500;
  letter-spacing: .06em; margin-top: var(--space-5); cursor: pointer;
  border-bottom: 1px solid transparent;
  transition: border-color var(--transition), gap var(--transition);
}
.read-more-hint:hover { border-color: var(--color-forest-light); gap: var(--space-3); }

/* ============================================================
   GALERIA
   ============================================================ */

.galery {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.galitem {
  width: calc(100% / 3 - var(--space-6));
  aspect-ratio: 4/3;
  object-fit: cover;
  display: block;
  cursor: pointer;
  filter: saturate(0.88);
  transition: all 250ms ease-in-out;
}
.galitem:hover {
  filter: saturate(1.05);
  z-index: 2;
  filter: grayscale(80%) brightness(80%);
}
@media (max-width: 768px) {
  .galitem {
    width: calc(100% / 2 - var(--space-6));
  }
}

/* Last item full width */
.galery .galitem:last-child {
  width: 100%;
  aspect-ratio: auto;
}


#new-galeria {
    display: flex;
    flex-wrap: wrap;
    gap: 10px; /* Odstęp między obrazami */
}

#new-galeria figure {
    border: 1px solid #ccc;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease-in-out;
}

#new-galeria figure:hover {
    transform: scale(1.05);
}

#new-galeria img {
    width: 100%;
    height: auto;
    display: block;
}

#new-galeria figcaption {
    padding: 8px;
    text-align: center;
    font-size: 0.9em;
    color: #333;
}

/* ============================================================
   OKOLICA
   ============================================================ */
#okolica {
  position: relative;
  background:
    radial-gradient(ellipse 60% 50% at 10% 15%, rgba(30,61,47,.25), transparent),
    radial-gradient(ellipse 50% 40% at 90% 90%, rgba(42,79,61,.2), transparent),
    linear-gradient(175deg, #1a3328 0%, #122419 45%, #0e1c14 100%);
  overflow: hidden;
  padding-block: clamp(var(--space-16), 8vw, var(--space-24));
}
/* Subtle grain texture overlay */
#okolica::before {
  content: "";
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.045'/%3E%3C/svg%3E");
  opacity: .9; pointer-events: none;
}
/* Dashed ring decoration */
#okolica::after {
  content: "";
  position: absolute;
  top: -180px; right: -180px;
  width: 520px; height: 520px;
  border-radius: 50%;
  border: 1px dashed rgba(156,122,60,.15);
  pointer-events: none;
}
#okolica .container-fluid {
  position: relative; z-index: 1;
  max-width: var(--content-wide); margin-inline: auto;
  padding-inline: var(--space-8);
}

/* Section header */
.okolica-header { text-align: center; margin-bottom: var(--space-16); }
.okolica-header .section-kicker { color: rgba(156,122,60,.9); }
.okolica-header .section-heading { color: #fff; }

/* Karty odległości — bez ruszania Bootstrap col-* */
.luxury-distance-card {
  height: 100%; min-height: 240px; 
  
  padding: var(--space-10) var(--space-6) var(--space-8);
  border-radius: var(--radius-lg);
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-top: 1px solid rgba(156,122,60,.28);
  position: relative; overflow: hidden;
  transition: background var(--transition), border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}
.luxury-distance-card::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(156,122,60,.06) 0%, transparent 50%);
  pointer-events: none;
}
/* Bottom shimmer line */
.luxury-distance-card::after {
  content: "";
  position: absolute; bottom: 0; left: var(--space-8); right: var(--space-8);
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(156,122,60,.55), transparent);
  opacity: .6;
}
.luxury-distance-card:hover {
  background: rgba(255,255,255,.07);
  border-color: rgba(156,122,60,.35);
  border-top-color: rgba(156,122,60,.6);
  transform: translateY(-4px);
  box-shadow: 0 20px 50px rgba(0,0,0,.22);
}
.luxury-distance-card svg {
  width: 50px !important; height: 50px !important;
  margin: 0 auto var(--space-5);
  opacity: .88;
  transition: opacity var(--transition), transform var(--transition);
}
.luxury-distance-card:hover svg { opacity: 1; transform: scale(1.06); }
.distance-label {
  display: block; font-family: var(--font-body);
  font-size: .72rem; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase;
  color: rgba(255,255,255,.48); margin-bottom: var(--space-3);
}
.distance-value {
  display: block; font-family: var(--font-display);
  font-size: clamp(1.4rem, 1.1rem + .9vw, 2rem);
  font-weight: 600; color: #fff; line-height: 1.05;
}
.distance-value::after {
  content: ""; display: block; width: 28px; height: 2px;
  margin: var(--space-4) auto 0;
  background: var(--color-brass);
  transition: width var(--transition);
}
.luxury-distance-card:hover .distance-value::after { width: 48px; }

/* ============================================================
   DOSTĘPNE MIESZKANIA
   ============================================================ */
.houses {
  background: var(--color-bg);
  padding-block: clamp(var(--space-12), 6vw, var(--space-20));
}
.houses h2 {
  font-family: var(--font-display); font-size: var(--text-2xl);
  font-weight: 400; color: var(--color-text); padding: 0 var(--space-8) var(--space-6);
  letter-spacing: -.01em;
}
.houses > .col-lg-12 { padding-inline: var(--space-8); }
.houses .table-responsive { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); }
.houses .table { border-collapse: separate; border-spacing: 0; font-size: var(--text-sm); }
.houses .table thead tr { background: var(--color-forest); }
.houses .table thead th {
  color: rgba(245,244,239,.72); font-weight: 500;
  font-size: var(--text-xs); letter-spacing: .12em; text-transform: uppercase;
  padding: var(--space-5) var(--space-4); border: none; white-space: nowrap;
}
.houses .table thead th:first-child { border-radius: var(--radius-md) 0 0 0; }
.houses .table thead th:last-child  { border-radius: 0 var(--radius-md) 0 0; }
.houses .table tbody tr { background: var(--color-surface); transition: background var(--transition); }
.houses .table tbody tr:nth-child(even) { background: var(--color-surface-2); }
.houses .table tbody tr:hover { background: rgba(30,61,47,.05); }
.houses .table tbody td, .houses .table tbody th {
  padding: var(--space-4); border-bottom: 1px solid var(--color-divider);
  color: var(--color-text); vertical-align: middle;
}
/* Status badges */
.houses .btn-success {
  background: rgba(46,107,62,.12); color: #2e6b3e;
  border: 1px solid rgba(46,107,62,.3);
  font-size: var(--text-xs); font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; padding: 3px var(--space-4); border-radius: var(--radius-full);
}
.houses .btn-warning {
  background: rgba(134,100,30,.12); color: #86641e;
  border: 1px solid rgba(134,100,30,.3);
  font-size: var(--text-xs); font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; padding: 3px var(--space-4); border-radius: var(--radius-full);
}
.houses .btn-danger {
  background: rgba(126,48,48,.10); color: #7e3030;
  border: 1px solid rgba(126,48,48,.25);
  font-size: var(--text-xs); font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; padding: 3px var(--space-4); border-radius: var(--radius-full);
}
.houses .btn-light {
  background: rgba(78,92,83,.10); color: #4e5c53;
  border: 1px solid rgba(78,92,83,.25);
  font-size: var(--text-xs); font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; padding: 3px var(--space-4); border-radius: var(--radius-full);
}
.houses .btn-primary {
  background: var(--color-forest); color: #fff;
  border: none; font-size: var(--text-xs); font-weight: 500; letter-spacing: .07em;
  padding: var(--space-2) var(--space-5); border-radius: var(--radius-sm);
  transition: background var(--transition), box-shadow var(--transition);
}
.houses .btn-primary:hover { background: var(--color-forest-mid); color: #fff; box-shadow: var(--shadow-sm); }
.houses .btn-secondary {
  background: transparent; color: var(--color-text-faint);
  border: 1px solid var(--color-divider); font-size: var(--text-xs);
  padding: var(--space-2) var(--space-5); border-radius: var(--radius-sm);
  opacity: .5; cursor: not-allowed;
}
/* Price cell emphasis */
.houses .table tbody td:nth-child(9) { font-family: var(--font-display); font-weight: 600; font-size: 1.05em; color: var(--color-forest); }

/* ============================================================
   UDOGODNIENIA
   ============================================================ */
#udogodnienia {
  position: relative; overflow: hidden;
  background:
    radial-gradient(ellipse 55% 45% at 85% 15%, rgba(30,61,47,.14), transparent),
    linear-gradient(170deg, #f5f2ea 0%, #ede8de 100%);
  padding-block: clamp(var(--space-16), 8vw, var(--space-24));
}
#udogodnienia::before {
  content: "";
  position: absolute; bottom: -120px; left: -120px;
  width: 420px; height: 420px; border-radius: 50%;
  border: 1px dashed rgba(30,61,47,.12); pointer-events: none;
}
#udogodnienia .container {
  position: relative; z-index: 1;
  max-width: var(--content-wide); margin-inline: auto;
}
#udogodnienia h4.h1 {
  font-family: var(--font-display); font-size: var(--text-2xl);
  font-weight: 500; color: var(--color-text); margin-bottom: var(--space-3);
  letter-spacing: 0; line-height: 1.08;
}
#udogodnienia .col-md-12 { margin-bottom: var(--space-10); }
.luxury-feature-box {
    background:var(--color-forest);
    border-radius: 15px;
    padding: 30px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
    text-align: center;
}
.luxury-feature-box::after {
  content: "";
  position: absolute; right: -50px; bottom: -50px;
  width: 150px; height: 150px; border-radius: 50%;
  background: radial-gradient(circle, rgba(30,61,47,.08), transparent 70%);
  pointer-events: none;
}
.luxury-feature-box:hover {
  transform: translateY(-5px);
  box-shadow: 0 18px 50px rgba(12,22,16,.13);
  border-color: rgba(30,61,47,.22);
  border-top-color: var(--color-forest);
  background:var(--color-success)
}
.feature-no {
  display: inline-block; font-family: var(--font-body);
  font-size: .72rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--color-brass); font-weight: 600; margin-bottom: var(--space-4);
}
.luxury-feature-box h4 {
    color: #ffffff;
    font-size: 24px;
    margin-bottom: 15px;
}
/* Brass underline on hover */
.luxury-feature-box h4::after {
  content: ""; display: block; width: 30px; height: 2px;
  background: var(--color-brass); margin-top: var(--space-5);
  transition: width 300ms cubic-bezier(0.16,1,0.3,1);
  margin:15px auto;
}
.luxury-feature-box:hover h4::after { width: 54px; }
/* Col padding adjusted for feature boxes */
#udogodnienia .col-md-6 { padding: var(--space-3); }

/* ============================================================
   LOKALIZACJA
   ============================================================ */
#lokalizacja {
  padding: 0; height: 500px; overflow: hidden; position: relative;
}
#lokalizacja::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0;
  height: 3px; z-index: 10;
  background: linear-gradient(to right, var(--color-forest), var(--color-brass), var(--color-forest));
}
#lokalizacja iframe { width: 100%; height: 100%; border: none; filter: grayscale(25%) contrast(1.05); }

/* ============================================================
   FOOTER
   ============================================================ */
.elegant-footer {
  background: linear-gradient(175deg, #1a3328 0%, #11201a 55%, #0c1810 100%) !important;
  color: rgba(245,244,239,.78);
  position: relative; overflow: hidden;
}
.elegant-footer::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(to right, transparent, rgba(156,122,60,.65), transparent);
}
.elegant-footer::after {
  content: ""; position: absolute; top: -100px; right: -100px;
  width: 480px; height: 480px; border-radius: 50%;
  background: radial-gradient(circle, rgba(30,61,47,.15), transparent 65%);
  pointer-events: none;
}
.footer-container {
  max-width: var(--content-wide); margin-inline: auto;
  padding-inline: var(--space-8); position: relative; z-index: 1;
}
.footer-content {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-12);
  padding-block: var(--space-16);
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.footer-section h3 {
  font-family: var(--font-display); font-size: var(--text-lg);
  font-weight: 400; color: #fff; margin-bottom: var(--space-6);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid rgba(156,122,60,.45);
  display: inline-block;
}
.footer-section ul { display: flex; flex-direction: column; gap: var(--space-2); }
.footer-section ul a {
  font-size: var(--text-sm); color: rgba(245,244,239,.55);
  transition: color var(--transition), padding-left var(--transition);
  display: inline-flex; align-items: center;
}
.footer-section ul a::before { content: "—"; color: var(--color-brass); margin-right: var(--space-2); opacity: 0; font-size: .7em; transition: opacity var(--transition); }
.footer-section ul a:hover { color: rgba(245,244,239,.92); padding-left: var(--space-3); }
.footer-section ul a:hover::before { opacity: 1; }
.contact-info { display: flex; flex-direction: column; gap: var(--space-4); }
.contact-item { display: flex; align-items: flex-start; gap: var(--space-3); font-size: var(--text-sm); color: rgba(245,244,239,.60); line-height: 1.55; }
.contact-item i { color: var(--color-brass); flex-shrink: 0; margin-top: .2em; }
.contact-item span { flex: 1; }
.footer-bottom { padding-block: var(--space-8); }
.footer-bottom-content { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--space-4); }
.footer-bottom p { font-size: var(--text-xs); color: rgba(245,244,239,.38); letter-spacing: .04em; max-width: none; }
.footer-links { display: flex; gap: var(--space-6); }
.footer-links a { font-size: var(--text-xs); color: rgba(245,244,239,.38); letter-spacing: .08em; text-transform: uppercase; transition: color var(--transition); }
.footer-links a:hover { color: var(--color-brass); }

/* ============================================================
   SCROLL TO TOP
   ============================================================ */
.scroll-to-top {
  position: fixed; bottom: var(--space-8); right: var(--space-8);
  width: 46px; height: 46px;
  background: var(--color-forest);
  color: rgba(245,244,239,.9); border: 1px solid rgba(156,122,60,.3);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--text-lg);
  opacity: 0; pointer-events: none; transform: translateY(12px);
  transition: opacity var(--transition), transform var(--transition), background var(--transition), box-shadow var(--transition);
  z-index: 1000; border-radius: 0; text-decoration: none;
  box-shadow: var(--shadow-md);
}
.scroll-to-top.visible { opacity: 1; pointer-events: auto; transform: translateY(0); }
.scroll-to-top:hover { background: var(--color-forest-mid); color: #fff; box-shadow: var(--shadow-lg); }

/* ============================================================
   SCROLL REVEAL (CSS-native, no layout shift)
   ============================================================ */
.reveal-fade { opacity: 1; }
@supports (animation-timeline: view()) {
  .reveal-fade {
    opacity: 0;
    animation: revealFade linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 72%;
  }
}
@keyframes revealFade { to { opacity: 1; } }

/* JS fallback */
.reveal-fade.is-visible {
  opacity: 1 !important;
  transition: opacity .75s ease, clip-path .75s ease !important;
}
.reveal-fade.needs-reveal { opacity: 0; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 991.98px) {
  .luxury-feature-box, .luxury-distance-card { min-height: 200px; }
  #mainNav .navbar-brand::after { display: none; }
}
@media (max-width: 767.98px) {
  header { background-attachment: scroll; }
  .galery { grid-template-columns: 1fr 1fr; }
  .galery .galitem:first-child { grid-column: span 2; grid-row: span 1; }
  #okolica .container-fluid { padding-inline: var(--space-4); }
  #udogodnienia .col-md-6 { padding: var(--space-2); }
  .luxury-feature-box { min-height: auto; padding: var(--space-6); }
  .luxury-distance-card { min-height: 210px; padding: var(--space-8) var(--space-5); }
  .houses h2, .houses > .col-lg-12 { padding-inline: var(--space-4); }
  .footer-content { grid-template-columns: 1fr; }
  .scroll-to-top { bottom: var(--space-4); right: var(--space-4); }
}
@media (max-width: 480px) {
  .galery { grid-template-columns: 1fr; }
  .galery .galitem:first-child { grid-column: span 1; }
  #mainNav .navbar-brand::before { display: none; }
}

/* ============================================================
   OPIS INWESTYCJI — REDESIGN
   ============================================================ */
#opisinwestycji {
  background:
    radial-gradient(ellipse 65% 55% at 95% 10%, rgba(30,61,47,.07), transparent),
    var(--color-bg);
  padding-block: clamp(var(--space-16), 9vw, var(--space-24));
  position: relative; overflow: hidden;
}
/* Dekoracyjny duży numer w tle */
#opisinwestycji::before {
  content: "01";
  position: absolute; top: -0.15em; left: -0.05em;
  font-family: var(--font-display); font-size: clamp(10rem, 22vw, 22rem);
  font-weight: 600; line-height: 1; color: rgba(30,61,47,.04);
  pointer-events: none; user-select: none; letter-spacing: -.04em;
}

#opisinwestycji .container { max-width: var(--content-wide); }

/* Dwukolumnowy layout — etykieta po lewej, treść po prawej */
.opis-layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: var(--space-12) var(--space-16);
  align-items: start;
}
@media (max-width: 991px) {
  .opis-layout { grid-template-columns: 1fr; gap: var(--space-8); }
}

/* Lewa kolumna — sticky label */
.opis-sidebar {
  position: sticky; top: 100px;
  padding-top: var(--space-2);
}
.opis-sidebar .section-kicker { display: block; margin-bottom: var(--space-5); }
.opis-sidebar-title {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 1.2rem + 2vw, 2.8rem);
  font-weight: 500; line-height: 1.08;
  color: var(--color-text); margin-bottom: var(--space-8);
}
/* Pionowa linia dekoracyjna */
.opis-sidebar::after {
  content: "";
  display: block; width: 1px; height: 80px;
  background: linear-gradient(to bottom, var(--color-brass), transparent);
  margin-top: var(--space-6);
}
@media (max-width: 991px) {
  .opis-sidebar { position: static; }
  .opis-sidebar::after { display: none; }
}

/* Prawa kolumna — treść */
.opis-content {}
.opnier {
  max-height: 380px; overflow: hidden;
  position: relative; cursor: pointer;
  transition: max-height 700ms cubic-bezier(0.16,1,0.3,1);
}
.opnier::after {
  content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 120px;
  background: linear-gradient(to bottom, transparent, var(--color-bg));
  pointer-events: none; transition: opacity 500ms;
}
.opnier.hidebef { max-height: 3000px; }
.opnier.hidebef::after { opacity: 0; }

/* Typografia treści */
.opnier p, .opnier li {
  font-family: var(--font-body); font-size: var(--text-base);
  color: var(--color-text-muted); line-height: 1.88;
  margin-bottom: var(--space-5); 
}
.opnier p:first-child {
  font-family: var(--font-display);
  font-size: var(--text-lg); font-weight: 400;
  color: var(--color-text); line-height: 1.55;
  font-style: italic;
}
.opnier strong { color: var(--color-text); font-weight: 600; }
.opnier h2, .opnier h3 {
  font-family: var(--font-display); font-size: var(--text-xl);
  font-weight: 500; color: var(--color-text);
  margin-block: var(--space-8) var(--space-4);
}

/* Ozdobna cudzysłówka na pierwszym akapicie */
.opnier p:first-child::before {
  content: "\201C";
  font-family: var(--font-display); font-size: 4.5rem; line-height: 0;
  vertical-align: -1.4rem; color: rgba(156,122,60,.3);
  margin-right: .15em; float: left;
}

/* Read-more button */
.read-more-hint {
  display: inline-flex; align-items: center; gap: var(--space-3);
  margin-top: var(--space-8);
  font-family: var(--font-body); font-size: var(--text-xs);
  font-weight: 500; letter-spacing: .18em; text-transform: uppercase;
  color: var(--color-forest-light);
  background: none; border: none; cursor: pointer; padding: 0;
  position: relative;
  transition: gap var(--transition), color var(--transition);
}
.read-more-hint::after {
  content: "";
  position: absolute; bottom: -4px; left: 0; right: 0; height: 1px;
  background: var(--color-forest-light); transform: scaleX(0); transform-origin: left;
  transition: transform var(--transition);
}
.read-more-hint:hover { gap: var(--space-5); color: var(--color-forest); }
.read-more-hint:hover::after { transform: scaleX(1); }
.read-more-hint svg { flex-shrink: 0; transition: transform var(--transition); }
.read-more-hint:hover svg { transform: translateY(3px); }


@media(max-width:1280px){
  
  .table-responsive{
    width: 100%;
           overflow-x: auto !important;
  }

.display-4{
	font-size:2.5rem;
}
}