/* ══════════════════════════════════════════════════════════
   Luna Nieruchomości — prototyp (etap 0)
   Paleta z logo: czerń nocy + złoto księżyca.
   Typografia: Cormorant Garamond (jak szeryf logo) + Jost.
   ══════════════════════════════════════════════════════════ */

:root{
  --noc:         #0a0a0b;
  --noc-2:       #111113;
  --grafit:      #19191c;
  --zloto:       #d4b27a;
  --zloto-jasne: #f0dcaf;
  --kosc:        #f4efe6;
  --szept:       rgba(244,239,230,.7);
  --ramka:       rgba(212,178,122,.26);
  --max:         1200px;
  --plynnie:     cubic-bezier(.22,.61,.36,1);
  --szeryf:      "Cormorant Garamond", Georgia, serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth; background:var(--noc)}
body{
  margin:0; background:var(--noc); color:var(--kosc);
  font-family:"Jost",-apple-system,BlinkMacSystemFont,"Helvetica Neue",sans-serif;
  font-weight:300; font-size:17px; line-height:1.7;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{max-width:100%; display:block; height:auto}
a{color:inherit}
h1,h2,h3{font-family:var(--szeryf); font-weight:400; margin:0; line-height:1.1}
p{margin:0 0 1em}

.etykieta{
  font-size:.72rem; letter-spacing:.32em; text-transform:uppercase;
  color:var(--zloto); margin-bottom:1.1rem;
}
.tytul{font-size:clamp(2.1rem,4.2vw,3.4rem); margin-bottom:1.2rem}
.podtytul{color:var(--szept); font-size:1.05rem}

/* Złoty połysk na literach */
.tytul-glowny em, .telefon{
  background:linear-gradient(100deg,var(--zloto) 20%,var(--zloto-jasne) 45%,var(--zloto) 70%);
  background-size:220% 100%;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:polysk 9s linear infinite;
}
@keyframes polysk{to{background-position:-220% 0}}

/* ─── PRZYCISKI ─── */
.przycisk{
  display:inline-flex; align-items:center; justify-content:center; cursor:pointer; border:0;
  padding:.85rem 1.9rem; border-radius:999px; text-decoration:none; font-family:inherit;
  font-size:.78rem; letter-spacing:.2em; text-transform:uppercase; font-weight:400;
  color:var(--noc); background:linear-gradient(120deg,var(--zloto),var(--zloto-jasne));
  transition:box-shadow .5s var(--plynnie), transform .5s var(--plynnie);
}
.przycisk:hover{box-shadow:0 0 34px rgba(212,178,122,.4); transform:translateY(-2px)}
.przycisk:focus-visible{outline:1px solid var(--zloto-jasne); outline-offset:4px}
.przycisk-maly{padding:.6rem 1.3rem; font-size:.7rem}
.przycisk-obrys{background:transparent; color:var(--zloto-jasne); box-shadow:inset 0 0 0 1px var(--ramka)}
.przycisk-obrys:hover{box-shadow:inset 0 0 0 1px var(--zloto), 0 0 30px rgba(212,178,122,.2)}
.przyciski{display:flex; flex-wrap:wrap; gap:.8rem; margin-top:1.8rem}

/* ─── NAGŁÓWEK ─── */
.naglowek{
  position:fixed; inset:0 0 auto 0; z-index:50;
  display:flex; align-items:center; justify-content:space-between; gap:2rem;
  padding:1.2rem clamp(1rem,4vw,3rem);
  transition:background .5s var(--plynnie), padding .5s var(--plynnie);
}
.naglowek.pelny{
  background:rgba(10,10,11,.84); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  padding-block:.7rem; border-bottom:1px solid rgba(212,178,122,.12);
}
.marka img{height:52px; width:auto; transition:height .5s var(--plynnie)}
.naglowek.pelny .marka img{height:42px}
.menu{display:flex; gap:2rem}
.menu a{
  font-size:.74rem; letter-spacing:.22em; text-transform:uppercase; text-decoration:none;
  color:var(--szept); position:relative; padding-block:.4rem; transition:color .35s;
}
.menu a::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:1px;
  background:var(--zloto); transition:right .45s var(--plynnie);
}
.menu a:hover{color:var(--kosc)}
.menu a:hover::after{right:0}

/* ─── FILM PRZEWIJANY ─── */
.film{position:relative; height:1100vh}
.film-scena{position:sticky; top:0; height:100vh; height:100svh; overflow:hidden}
.film-plotno{position:absolute; inset:0; width:100%; height:100%; background:var(--noc)}
/* Welon: ciemna lewa strona pod tekstem. Docelowe wnętrza będą jasne, więc welon jest mocniejszy niż w Drodze Duszy. */
.film-welon{
  position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(90deg, rgba(10,10,11,.95) 0%, rgba(10,10,11,.85) 30%, rgba(10,10,11,.5) 50%, rgba(10,10,11,0) 74%),
    linear-gradient(0deg, rgba(10,10,11,.85) 0%, rgba(10,10,11,0) 28%),
    linear-gradient(180deg, rgba(10,10,11,.6) 0%, rgba(10,10,11,0) 18%);
}

.rozdzial{
  position:absolute; left:clamp(1.2rem,7vw,7rem); top:50%;
  width:min(34rem, calc(100% - 2.4rem));
  opacity:0; visibility:hidden; will-change:opacity, transform, filter;
}
.rozdzial-szeroki{width:min(38rem, calc(100% - 2.4rem))}
.rozdzial-otwarcie{width:min(50rem, calc(100% - 2.4rem))}
.rozdzial p{color:rgba(244,239,230,.84); font-size:1.08rem}
.rozdzial p, .rozdzial li, .rozdzial .tytul, .rozdzial h3{text-shadow:0 1px 18px rgba(10,10,11,.9), 0 0 2px rgba(10,10,11,.6)}
.tytul-glowny{font-size:clamp(2.8rem,5.4vw,5.4rem); line-height:.98; margin-bottom:1.6rem; letter-spacing:-.01em}
.tytul-glowny em{font-style:italic; display:block; padding-left:.5em; margin-top:.1em}
.wstep{font-size:1.18rem !important; max-width:30rem}

.atuty{list-style:none; margin:0; padding:0}
.atuty li{position:relative; padding:0 0 1rem 2.2rem; color:var(--szept); font-size:1.04rem}
.atuty li::before{
  content:""; position:absolute; left:0; top:.28rem; width:1.1rem; height:1.1rem;
  background:url(media/zdjecia/ksiezyc-maly.png) center/contain no-repeat;
}
.atuty b{font-weight:400; color:var(--kosc)}

.motto{font-family:var(--szeryf); font-style:italic; font-size:1.6rem !important; color:var(--zloto-jasne) !important; margin-top:1.4rem}
.dopisek{font-size:.95rem !important; color:var(--szept) !important; padding-top:1rem; border-top:1px solid rgba(212,178,122,.2)}

.znaczki{list-style:none; margin:1.4rem 0 0; padding:0; display:flex; flex-wrap:wrap; gap:.55rem}
.znaczki li{
  padding:.4rem 1rem; border-radius:999px; font-size:.82rem; letter-spacing:.06em;
  color:var(--zloto-jasne); box-shadow:inset 0 0 0 1px var(--ramka); background:rgba(10,10,11,.45);
}

#wynajem .tytul{font-size:clamp(1.9rem,3.4vw,2.8rem)}
.kolumny{display:grid; grid-template-columns:1fr 1fr; gap:1.4rem 2.4rem; margin-top:.6rem}
.kolumny h3{font-size:1.5rem; color:var(--zloto-jasne); margin-bottom:.7rem}
.lista{list-style:none; margin:0; padding:0}
.lista li{padding:.35rem 0 .35rem 1.3rem; position:relative; color:var(--szept); border-bottom:1px solid rgba(212,178,122,.12)}
.lista li::before{content:""; position:absolute; left:0; top:1.05rem; width:.45rem; height:1px; background:var(--zloto)}

.film-postep{
  position:absolute; right:clamp(1rem,3vw,2.6rem); top:50%; translate:0 -50%;
  display:flex; flex-direction:column; gap:1.3rem;
}
.film-postep button{
  all:unset; cursor:pointer; position:relative; width:9px; height:9px; border-radius:50%;
  box-shadow:inset 0 0 0 1px var(--ramka); transition:background .5s, box-shadow .5s;
}
.film-postep button.aktywny{background:var(--zloto); box-shadow:0 0 14px rgba(212,178,122,.7)}
.film-postep button:focus-visible{outline:1px solid var(--zloto); outline-offset:4px}
.film-postep span{
  position:absolute; right:1.4rem; top:50%; translate:0 -50%; white-space:nowrap;
  font-size:.66rem; letter-spacing:.24em; text-transform:uppercase; color:var(--szept);
  opacity:0; transition:opacity .4s; text-shadow:0 0 12px rgba(10,10,11,.9);
}
.film-postep button:hover span, .film-postep button.aktywny span{opacity:1}

.film-wskazowka{
  position:absolute; left:50%; bottom:2rem; translate:-50% 0;
  display:flex; flex-direction:column; align-items:center; gap:.7rem;
  font-size:.64rem; letter-spacing:.34em; text-transform:uppercase; color:var(--szept);
  transition:opacity .6s;
}
.film-wskazowka i{width:1px; height:44px; background:linear-gradient(var(--zloto),transparent); animation:kapie 2.2s var(--plynnie) infinite}
@keyframes kapie{0%{transform:scaleY(0); transform-origin:top} 50%{transform:scaleY(1); transform-origin:top} 51%{transform-origin:bottom} 100%{transform:scaleY(0); transform-origin:bottom}}

.makieta-info{
  position:absolute; left:1rem; bottom:1rem; padding:.45rem .8rem; border-radius:6px;
  font:400 .7rem/1.4 ui-monospace,Menlo,monospace; color:#cfe;
  background:rgba(0,0,0,.55); border:1px dashed rgba(200,255,240,.3);
}
.makieta-ukryta .makieta-info{display:none}

/* ─── SEKCJE ─── */
.sekcja{padding:clamp(5rem,12vw,9rem) clamp(1rem,4vw,3rem); max-width:var(--max); margin:0 auto}
.sekcja-naglowek{text-align:center; max-width:40rem; margin:0 auto clamp(3rem,6vw,4.5rem)}

.odslon{opacity:0; transform:translateY(40px); transition:opacity 1.1s var(--plynnie), transform 1.1s var(--plynnie)}
.odslon.widoczny{opacity:1; transform:none}

/* Współpraca: oś pięciu kroków */
.wspolpraca{max-width:none; background:radial-gradient(ellipse 70% 50% at 50% 0%, rgba(40,34,24,.8), transparent 70%)}
.os{
  list-style:none; margin:0 auto; padding:0; max-width:var(--max); counter-reset:k;
  display:grid; grid-template-columns:repeat(5,1fr); gap:clamp(1rem,2.4vw,2rem); position:relative;
}
.os::before{content:""; position:absolute; left:0; right:0; top:1.55rem; height:1px;
  background:linear-gradient(90deg,transparent,var(--ramka) 10%,var(--ramka) 90%,transparent)}
.os li{counter-increment:k; position:relative; padding-top:4.4rem}
.os li:nth-child(2){transition-delay:.1s}
.os li:nth-child(3){transition-delay:.2s}
.os li:nth-child(4){transition-delay:.3s}
.os li:nth-child(5){transition-delay:.4s}
.os li::before{
  content:counter(k); position:absolute; top:0; left:0; width:3.1rem; height:3.1rem; border-radius:50%;
  display:grid; place-items:center; font-family:var(--szeryf); font-size:1.5rem; color:var(--zloto-jasne);
  background:var(--noc); box-shadow:inset 0 0 0 1px var(--ramka);
}
.os h3{font-size:1.55rem; margin-bottom:.6rem}
.os p{color:var(--szept); font-size:.98rem}

/* O mnie */
.o-mnie{display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1fr); gap:clamp(2.5rem,7vw,6rem); align-items:center}
.portret{margin:0; position:relative; border-radius:18px; overflow:hidden; aspect-ratio:4/5}
.portret img{width:100%; height:100%; object-fit:cover; object-position:55% 30%}
.portret::after{content:""; position:absolute; inset:0; border-radius:inherit;
  box-shadow:inset 0 0 0 1px rgba(212,178,122,.3), inset 0 -120px 120px -60px rgba(10,10,11,.7)}
.o-mnie-tresc > p:not(.etykieta):not(.podtytul){color:var(--szept)}
.o-mnie-tresc .podtytul{font-size:.8rem; letter-spacing:.24em; text-transform:uppercase; color:var(--zloto-jasne); margin-top:-.4rem; margin-bottom:1.8rem}
.sygnatura{margin:2.2rem 0 0; padding:1.4rem 0 0 1.6rem; border-left:1px solid var(--zloto)}
.sygnatura p{font-family:var(--szeryf); font-size:1.45rem; line-height:1.3; margin-bottom:.5rem}
.sygnatura footer{font-family:var(--szeryf); font-style:italic; font-size:1.25rem; color:var(--zloto)}

/* Kontakt */
.kontakt{display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1fr); gap:clamp(2.5rem,7vw,6rem); align-items:start; padding-bottom:clamp(6rem,14vw,10rem)}
.kontakt-ksiezyc{width:64px; margin-bottom:1.8rem; filter:drop-shadow(0 0 18px rgba(212,178,122,.35)); animation:unosi 7s ease-in-out infinite}
@keyframes unosi{50%{translate:0 -10px}}
.kontakt-tresc > p:not(.etykieta){color:var(--szept); font-size:1.1rem}
.telefon{display:inline-block; font-family:var(--szeryf); font-size:clamp(2.4rem,4.6vw,3.4rem); line-height:1.1; text-decoration:none; margin:.6rem 0 .4rem}
.email{display:block; color:var(--zloto-jasne); text-decoration:none; font-size:1.1rem; margin-bottom:.8rem; word-break:break-all}
.email:hover{text-decoration:underline; text-underline-offset:4px}
.obszar{font-size:.78rem !important; letter-spacing:.24em; text-transform:uppercase}

.formularz{
  padding:clamp(1.4rem,3vw,2.4rem); border-radius:18px;
  background:linear-gradient(180deg,rgba(25,25,28,.9),rgba(17,17,19,.95)); box-shadow:inset 0 0 0 1px var(--ramka);
}
.sprawa{border:0; margin:0 0 1.6rem; padding:0; display:flex; flex-wrap:wrap; gap:.5rem}
.sprawa legend{padding:0; margin-bottom:.9rem; font-size:.72rem; letter-spacing:.26em; text-transform:uppercase; color:var(--zloto)}
.sprawa label{cursor:pointer}
.sprawa input{position:absolute; opacity:0; pointer-events:none}
.sprawa span{
  display:inline-block; padding:.45rem 1rem; border-radius:999px; font-size:.86rem;
  box-shadow:inset 0 0 0 1px var(--ramka); color:var(--szept); transition:background .3s, color .3s, box-shadow .3s;
}
.sprawa input:checked + span{background:var(--zloto); color:var(--noc); box-shadow:none}
.sprawa input:focus-visible + span{outline:1px solid var(--zloto-jasne); outline-offset:3px}
.pola{display:grid; grid-template-columns:1fr 1fr; gap:1rem}
.pole{display:flex; flex-direction:column; gap:.4rem}
.pole-szerokie{grid-column:1/-1}
.pole > span{font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--szept)}
.pole small{letter-spacing:.05em; text-transform:none; opacity:.7}
.pole input, .pole textarea{
  font:inherit; color:var(--kosc); background:rgba(10,10,11,.6); border:0; border-radius:10px;
  padding:.8rem 1rem; box-shadow:inset 0 0 0 1px rgba(212,178,122,.18); resize:vertical;
  transition:box-shadow .3s;
}
.pole input:focus, .pole textarea:focus{outline:0; box-shadow:inset 0 0 0 1px var(--zloto)}
.pole.blad input{box-shadow:inset 0 0 0 1px #d98b7a}
.zgoda{display:flex; gap:.7rem; align-items:flex-start; margin:1.3rem 0 1.5rem; font-size:.86rem; color:var(--szept); line-height:1.5; cursor:pointer}
.zgoda input{accent-color:var(--zloto); margin-top:.2rem; width:1rem; height:1rem; flex:none}
.zgoda.blad span{color:#e7a697}
.zgoda a{color:var(--zloto-jasne)}
.pulapka{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.formularz button[disabled]{opacity:.6; cursor:wait}
.formularz-stan{margin:1rem 0 0; min-height:1.5em; font-size:.95rem; color:var(--zloto-jasne)}
.formularz-stan.blad{color:#e7a697}

.stopka{text-align:center; padding:3rem 1rem 2.5rem; font-size:.84rem; color:var(--szept); border-top:1px solid rgba(212,178,122,.12)}
.stopka img{height:54px; width:auto; margin:0 auto 1.4rem}
.stopka a{color:var(--zloto)}
.stopka .drobny{font-size:.74rem; opacity:.75; margin-top:.6rem}

/* ─── TABLET / TELEFON ─── */
@media (max-width:1000px){
  .menu{display:none}
  .os{grid-template-columns:1fr; max-width:30rem; gap:0}
  .os::before{left:1.55rem; right:auto; top:0; bottom:0; width:1px; height:auto;
    background:linear-gradient(180deg,transparent,var(--ramka) 8%,var(--ramka) 92%,transparent)}
  .os li{padding:0 0 2rem 4.6rem}
  .o-mnie, .kontakt{grid-template-columns:1fr}
  .portret{max-width:26rem; margin-inline:auto}
}
@media (max-width:700px){
  body{font-size:16px}
  .film{height:950vh}
  .marka img{height:40px}
  .naglowek.pelny .marka img{height:34px}
  .film-welon{background:
    linear-gradient(0deg, rgba(10,10,11,.97) 0%, rgba(10,10,11,.86) 48%, rgba(10,10,11,.2) 78%, rgba(10,10,11,.5) 100%)}
  .rozdzial{top:auto; bottom:4.5rem; left:1.2rem; width:calc(100% - 3.4rem)}
  .rozdzial p{font-size:1rem}
  .tytul-glowny{font-size:clamp(2.5rem,11vw,3.4rem)}
  .tytul-glowny em{padding-left:0}
  .wstep{font-size:1.05rem !important}
  .atuty li{padding-bottom:.7rem; font-size:.97rem}
  .motto{font-size:1.35rem !important}
  .kolumny{gap:1rem 1.2rem}
  .kolumny h3{font-size:1.2rem}
  .lista li{font-size:.9rem; padding-block:.25rem}
  .lista li::before{top:.85rem}
  #wynajem .tytul{font-size:1.65rem}
  .film-postep{right:.7rem}
  .film-postep span{display:none}
  .film-wskazowka{display:none}              /* na telefonie w tym miejscu stoją przyciski otwarcia */
  .pola{grid-template-columns:1fr}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .odslon{opacity:1; transform:none; transition:none}
  .kontakt-ksiezyc, .film-wskazowka i, .tytul-glowny em, .telefon{animation:none}
}