/* Warsztaty z Nieruchomości — wspólny arkusz stylów.
   Paleta i typografia wg IDENTYFIKACJA-NIERUCHOMOSCI.md (granat + złoto, Gloock). */

@font-face{
  font-family:"Gloock";
  src:url("fonty/Gloock-Regular.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap;
}

:root{
  --granat:#0F1C33;
  --granat-2:#16202F;
  --granat-3:#1B2942;
  --zloto:#C9A227;
  --zloto-tekst:#8A6D10;
  --zloto-jasne:#E3C766;
  --szary:#5C6B80;
  --szary-jasny:#8B99AC;
  --bg:#FFFFFF;
  --bg-alt:#F5F7FA;
  --linia:#E2E7EE;
  --radius:14px;
  --maxw:1120px;
  --serif:"Gloock","Didot","Bodoni 72",Georgia,"Times New Roman",serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
}

*{box-sizing:border-box}
html{font-size:18px;scroll-behavior:smooth}
body{
  margin:0;overflow-x:hidden;background:var(--bg);color:var(--granat-2);
  font-family:var(--sans);font-size:1.02rem;line-height:1.65;-webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,p,li,a,span,td,th,label,legend{overflow-wrap:break-word}
h1,h2,h3{font-family:var(--serif);font-weight:400;line-height:1.16;letter-spacing:-.01em;margin:0 0 .5em}
h1{font-size:clamp(2.1rem,5.2vw,3.5rem)}
h2{font-size:clamp(1.7rem,3.8vw,2.5rem)}
h3{font-size:1.3rem}
p{margin:0 0 1em}
a{color:var(--zloto-tekst)}
ul{margin:0 0 1em;padding-left:1.2em}
li{margin-bottom:.4em}
img{max-width:100%;display:block}
:focus-visible{outline:3px solid var(--zloto);outline-offset:3px;border-radius:4px}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px}
@media(min-width:640px){.wrap{padding:0 28px}}
section{padding:72px 0;scroll-margin-top:80px}
@media(max-width:640px){section{padding:52px 0}}

.eyebrow{
  display:block;font:600 .78rem/1 var(--mono);letter-spacing:.14em;
  text-transform:uppercase;color:var(--zloto-tekst);margin-bottom:16px;
}
.ciemno .eyebrow{color:var(--zloto)}
.lead{font-size:1.16rem;color:var(--szary);max-width:60ch}
.ciemno{background:var(--granat);color:#E7ECF4}
.ciemno h2,.ciemno h3{color:#fff}
.ciemno p{color:#B4C0D2}
.jasno-alt{background:var(--bg-alt);border-top:1px solid var(--linia);border-bottom:1px solid var(--linia)}

/* ---------- pasek górny ---------- */
.pasek{position:sticky;top:0;z-index:60;background:rgba(15,28,51,.97);backdrop-filter:saturate(180%) blur(10px);
  border-bottom:1px solid rgba(255,255,255,.1)}
.pasek .wrap{display:flex;align-items:center;gap:18px;height:64px}
.marka{display:flex;flex-direction:column;text-decoration:none;margin-right:auto;line-height:1.1}
.marka b{font-family:var(--serif);font-weight:400;color:#fff;font-size:1.12rem;letter-spacing:.005em}
.marka span{font:600 .66rem/1.4 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--zloto)}
.pasek-nav{display:none;gap:24px;font-size:.95rem}
.pasek-nav a{color:#B4C0D2;text-decoration:none}
.pasek-nav a:hover{color:var(--zloto)}
@media(min-width:860px){.pasek-nav{display:flex}}

/* ---------- przyciski ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:50px;padding:13px 26px;border-radius:var(--radius);
  background:var(--zloto);color:var(--granat);font-weight:700;font-size:1rem;
  text-decoration:none;border:0;cursor:pointer;transition:background .15s ease;
}
.btn:hover{background:var(--zloto-jasne)}
.btn-obrys{background:transparent;border:1.5px solid var(--zloto);color:var(--zloto)}
.btn-obrys:hover{background:rgba(201,162,39,.14)}
.jasno .btn-obrys,.produkt .btn-obrys{border-color:var(--zloto-tekst);color:var(--zloto-tekst)}
.produkt-glowny .btn-obrys{border-color:var(--zloto);color:var(--zloto)}
.produkt-glowny .btn-obrys:hover{background:rgba(201,162,39,.16)}
.jasno .btn-obrys:hover,.produkt .btn-obrys:hover{background:rgba(138,109,16,.08)}
.btn-maly{min-height:44px;padding:10px 20px;font-size:.95rem}

/* ---------- hero ---------- */
.hero{
  background:
    radial-gradient(1100px 460px at 78% -8%, rgba(201,162,39,.2), transparent 62%),
    linear-gradient(178deg, #12203A 0%, var(--granat) 58%, #0B1526 100%);
  color:#E7ECF4;padding:84px 0 76px;position:relative;
}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;
  background:linear-gradient(90deg,transparent,var(--zloto) 22%,var(--zloto) 78%,transparent)}
.hero h1{color:#fff;max-width:16ch}
.hero .lead{color:#C2CDDD;font-size:1.22rem;max-width:56ch;margin-bottom:2em}
.hero-akcje{display:flex;flex-wrap:wrap;gap:14px}
.hero-fakty{
  display:flex;flex-wrap:wrap;gap:12px 34px;margin-top:44px;padding-top:26px;
  border-top:1px solid rgba(255,255,255,.14);
}
.hero-fakt b{display:block;font-family:var(--serif);font-size:1.7rem;color:var(--zloto);line-height:1.1}
.hero-fakt span{font-size:.9rem;color:#9FADC2}

/* ---------- karty produktów ---------- */
.produkty{display:grid;gap:22px}
@media(min-width:900px){.produkty{grid-template-columns:1fr 1fr}.produkt-glowny{grid-column:1 / -1}}

.produkt{
  display:flex;flex-direction:column;background:var(--bg);
  border:1px solid var(--linia);border-radius:20px;padding:28px;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.produkt:hover{border-color:var(--zloto-jasne);box-shadow:0 10px 34px rgba(15,28,51,.09)}
@media(min-width:640px){.produkt{padding:34px}}

.produkt-glowa{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.produkt-nr{
  font:400 1.05rem/1 var(--serif);color:var(--zloto-tekst);
  border:1.5px solid var(--zloto);border-radius:50%;
  width:42px;height:42px;display:flex;align-items:center;justify-content:center;flex:0 0 auto;
}
.produkt-typ{font:600 .72rem/1.3 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--szary)}
.produkt h3{margin-bottom:10px;font-size:1.5rem}
.produkt-lead{color:var(--szary);margin-bottom:20px}

.produkt-fakty{list-style:none;margin:0 0 24px;padding:0;display:grid;gap:10px}
.produkt-fakty li{position:relative;padding-left:19px;margin:0;font-size:.98rem;line-height:1.5}
.produkt-fakty li::before{
  content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;border-radius:50%;
  background:var(--zloto);
}
.produkt-stopka{
  margin-top:auto;padding-top:22px;border-top:1px solid var(--linia);
  display:flex;flex-wrap:wrap;align-items:center;gap:16px;
}
.produkt-cena{margin-right:auto;line-height:1.25}
.produkt-cena b{display:block;font-family:var(--serif);font-size:1.5rem;color:var(--granat-2)}
.produkt-cena span{font-size:.88rem;color:var(--szary)}
.produkt-cena.slowna b{font-size:1.18rem;letter-spacing:.005em}

/* karta ciemna — produkt główny */
.produkt-glowny{
  background:linear-gradient(160deg,#182A47 0%,var(--granat) 70%);
  border-color:rgba(201,162,39,.42);color:#E7ECF4;
}
.produkt-glowny:hover{border-color:var(--zloto)}
.produkt-glowny h3{color:#fff;font-size:1.85rem}
.produkt-glowny .produkt-lead{color:#B4C0D2}
.produkt-glowny .produkt-typ{color:var(--zloto-jasne)}
.produkt-glowny .produkt-nr{color:var(--zloto)}
.produkt-glowny .produkt-fakty li{color:#D3DBE7}
.produkt-glowny .produkt-stopka{border-top-color:rgba(255,255,255,.16)}
.produkt-glowny .produkt-cena b{color:#fff}
.produkt-glowny .produkt-cena span{color:#9FADC2}
@media(min-width:900px){
  .produkt-glowny .produkt-fakty{grid-template-columns:1fr 1fr;gap:10px 30px}
}

/* karta wyróżniona jasno — ankieta */
.produkt-zaproszenie{background:#FFFCF2;border-color:var(--zloto)}
@media(min-width:900px){
  .produkt-szeroki{grid-column:1 / -1}
  .produkt-szeroki .produkt-fakty{grid-template-columns:1fr 1fr;gap:10px 30px}
}
.znacznik{
  display:inline-block;padding:4px 11px;border-radius:20px;
  background:var(--zloto);color:var(--granat);
  font:700 .72rem/1.5 var(--mono);letter-spacing:.09em;text-transform:uppercase;
}

/* ---------- ścieżki ---------- */
.sciezki{display:grid;gap:20px;margin-top:38px}
@media(min-width:820px){.sciezki{grid-template-columns:repeat(3,1fr)}}
.sciezka{border-left:3px solid var(--zloto);padding:4px 0 4px 22px}
.sciezka h3{font-size:1.14rem;margin-bottom:8px}
.sciezka p{color:var(--szary);font-size:.98rem;margin-bottom:12px}
.sciezka a{font-weight:700;text-decoration:none;border-bottom:1.5px solid var(--zloto-jasne)}
.sciezka a:hover{border-bottom-color:var(--zloto-tekst)}

/* ---------- o nas ---------- */
.onas{display:grid;gap:36px;align-items:start}
@media(min-width:880px){.onas{grid-template-columns:280px 1fr;gap:52px}}
.portret{
  width:230px;height:230px;border-radius:50%;object-fit:cover;object-position:50% 18%;
  background:#F0E4C8;border:3px solid var(--zloto);margin:0 auto;
}
.portret-podpis{text-align:center;margin-top:16px}
.portret-podpis b{display:block;font-family:var(--serif);font-size:1.2rem}
.portret-podpis span{font-size:.9rem;color:var(--szary-jasny)}
.dorobek{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:12px}
.dorobek li{position:relative;padding-left:26px;margin:0}
.dorobek li::before{content:"—";position:absolute;left:0;color:var(--zloto);font-weight:700}
.liczby{display:grid;gap:20px;margin-top:30px}
@media(min-width:560px){.liczby{grid-template-columns:repeat(3,1fr)}}
.liczba b{display:block;font-family:var(--serif);font-size:2rem;color:var(--zloto)}
.liczba span{font-size:.92rem;color:#9FADC2}

/* ---------- pasek CTA ---------- */
.cta-pasek{text-align:center}
.cta-pasek h2{margin-bottom:14px}
.cta-pasek .lead{margin:0 auto 30px}
.cta-akcje{display:flex;flex-wrap:wrap;gap:14px;justify-content:center}

/* ---------- kontakt ---------- */
.kontakt-siatka{display:grid;gap:22px;margin-top:36px}
@media(min-width:760px){.kontakt-siatka{grid-template-columns:1fr 1fr}}
.kontakt-karta{border:1px solid var(--linia);border-radius:18px;padding:28px;background:var(--bg)}
.kontakt-karta h3{font-size:1.2rem;margin-bottom:6px}
.kontakt-karta p{color:var(--szary);font-size:.97rem;margin-bottom:14px}
.kontakt-dane{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.kontakt-dane li{margin:0;display:flex;flex-direction:column;gap:2px}
.kontakt-dane .etykieta{font:600 .7rem/1.4 var(--mono);letter-spacing:.11em;text-transform:uppercase;color:var(--szary-jasny)}
.kontakt-dane .wartosc{font-size:1.08rem;font-weight:650}
.kontakt-dane a{text-decoration:none;border-bottom:1.5px solid var(--zloto-jasne)}
.kontakt-dane a:hover{border-bottom-color:var(--zloto-tekst)}

/* ---------- formularz ---------- */
.form-blok{max-width:640px}
.pole{margin:0 0 18px}
.pole label{display:block;font-weight:650;margin:0 0 6px}
.pole input,.pole textarea,.pole select{
  width:100%;font:inherit;color:var(--granat-2);background:var(--bg);
  border:1px solid #CBD4E0;border-radius:12px;padding:12px 14px;min-height:48px;
}
.pole textarea{resize:vertical;line-height:1.55}
.pole .podpowiedz{font-size:.88rem;color:var(--szary);font-weight:400;display:block;margin-top:4px}
.pole input.zle,.pole textarea.zle{border-color:#B4232A;background:#FDF1F1}
.blad{display:none;color:#B4232A;font-size:.92rem;font-weight:600;margin:6px 0 0}
.blad.wid{display:block}
.zgoda{display:flex;gap:12px;align-items:flex-start;padding:15px 16px;border:1px solid #CBD4E0;
  border-radius:12px;background:var(--bg-alt);line-height:1.5;font-size:.96rem}
.zgoda input{width:20px;height:20px;margin:3px 0 0;flex:0 0 auto;accent-color:var(--zloto-tekst)}
.zgoda:focus-within{outline:3px solid var(--zloto);outline-offset:2px}
.klauzula{font-size:.88rem;color:var(--szary);border-left:3px solid var(--linia);padding-left:16px;margin:22px 0 0}
.pulapka{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
#bledy{display:none;border:1px solid #E9B7B7;background:#FDF1F1;border-radius:12px;padding:15px 20px;margin:0 0 22px;color:#7D1A20}
#bledy.wid{display:block}
#bledy b{display:block;margin-bottom:4px;color:#B4232A}
#bledy ul{margin:0;padding-left:1.2em}

/* ---------- stopka ---------- */
.stopka{background:var(--granat);color:#93A1B6;padding:52px 0 40px;font-size:.95rem}
.stopka a{color:#C2CDDD;text-decoration:none}
.stopka a:hover{color:var(--zloto)}
.stopka-siatka{display:grid;gap:30px;margin-bottom:34px}
@media(min-width:760px){.stopka-siatka{grid-template-columns:1.4fr 1fr 1fr}}
.stopka h4{font-family:var(--serif);font-weight:400;color:#fff;font-size:1.1rem;margin:0 0 12px}
.stopka ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.stopka li{margin:0}
.stopka-dol{border-top:1px solid rgba(255,255,255,.12);padding-top:22px;font-size:.9rem;color:#7C8AA0}

@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}