:root{
  --bg:#F5F2EC;--bg2:#EDE9E1;--ink:#15130F;--muted:rgba(21,19,15,.62);--faint:rgba(21,19,15,.34);
  --line:rgba(21,19,15,.13);--amber:#C97A2B;--cyan:#2E8B90;--maxw:1080px;--ease:cubic-bezier(.22,1,.36,1);
  --mx:50%;--my:38%;--r:0px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:Inter,system-ui,sans-serif;font-weight:300;line-height:1.7;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img,video{display:block;max-width:100%}
::selection{background:var(--amber);color:#100b04}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(20px,5vw,40px)}
h1,h2{font-family:"Clash Display",sans-serif;font-weight:700;letter-spacing:-.02em;line-height:1.04}
.serif{font-family:"Instrument Serif",serif;font-style:italic;font-weight:400}
.amber{color:var(--amber)}
.cyan{color:var(--cyan)}
.eyebrow{font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--amber);font-weight:500}

/* reveal on scroll */
.rev{opacity:0;transform:translateY(16px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.rev.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.rev{opacity:1;transform:none;transition:none}html{scroll-behavior:auto}}

/* nav (spójny z reelm.pl - pełnoszerokościowy, przezroczysty, tło dopiero po scrollu) */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;justify-content:space-between;
  padding:22px clamp(20px,4vw,48px);transition:background .4s,backdrop-filter .4s,padding .4s}
.nav.scrolled{background:rgba(245,242,236,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);padding-top:14px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.nav .brand{font-family:"Clash Display";font-weight:700;font-size:19px;letter-spacing:.02em;display:inline-flex}
.nav .links{display:flex;align-items:center;gap:28px;font-size:12.5px;letter-spacing:.06em;color:var(--muted)}
.nav .links a:hover{color:var(--ink)}

/* logo - wiekszy, organiczny (miekki przelot blasku + oddychajacy amber) */
.logo-organic{width:clamp(88px,10vw,132px);height:auto;display:block}
.logo-L{animation:logoBreathe 4.5s ease-in-out infinite}
@keyframes logoBreathe{0%,100%{filter:drop-shadow(0 0 2px rgba(201,122,43,.22))}50%{filter:drop-shadow(0 0 9px rgba(201,122,43,.6))}}
@media(prefers-reduced-motion:reduce){
  .logo-L{animation:none;filter:none}
}

.btn{position:relative;display:inline-flex;align-items:center;gap:9px;font:inherit;font-weight:500;font-size:14px;letter-spacing:.01em;
  color:var(--ink);border:1px solid var(--line);background:rgba(233,162,59,.06);padding:13px 24px;border-radius:40px;cursor:pointer;overflow:hidden;
  transition:color .35s var(--ease),background .35s var(--ease)}
.btn::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;border:1.5px solid var(--amber);
  clip-path:inset(0 100% 0 0);transition:clip-path .55s var(--ease)}
.btn:hover::after{clip-path:inset(0 0 0 0)}
.btn:hover{color:var(--amber);background:rgba(233,162,59,.12)}
.btn.solid{background:var(--amber);color:#100b04;border-color:var(--amber)}
.btn.solid:hover{background:#f0ad52;color:#100b04}
.btn.solid::after{display:none}

/* hero reveal */
.hero{position:relative;height:100svh;min-height:640px;overflow:hidden;background:var(--bg)}
.hero .layer{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 18%}
.hero .base{filter:saturate(.7) brightness(1.04) contrast(.96)}
.hero .reveal{
  -webkit-mask-image:radial-gradient(circle var(--r) at var(--mx) var(--my), #000 55%, transparent 100%);
  mask-image:radial-gradient(circle var(--r) at var(--mx) var(--my), #000 55%, transparent 100%);
  transition:opacity .35s var(--ease);opacity:0;
}
.hero.active .reveal{opacity:1}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(21,19,15,.1) 0%,transparent 30%,rgba(245,242,236,.4) 62%,var(--bg) 100%);pointer-events:none}
.hero .hint{position:absolute;left:50%;bottom:34px;transform:translateX(-50%);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:10px;pointer-events:none;opacity:0;transition:opacity .6s var(--ease)}
.hero .hint.show{opacity:1}
.hero .hint .dot{width:5px;height:5px;border-radius:50%;background:var(--cyan);box-shadow:0 0 8px var(--cyan);animation:pulse 1.8s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.4}50%{opacity:1}}
.hero .copy{position:absolute;left:clamp(20px,5vw,40px);bottom:clamp(70px,10vh,110px);right:clamp(20px,5vw,40px);z-index:2;pointer-events:none}
.hero .copy .tag{display:inline-flex;gap:10px;align-items:center;margin-bottom:18px}
.hero .copy .tag .d{width:6px;height:6px;border-radius:50%;background:var(--amber);box-shadow:0 0 10px var(--amber)}
.hero h1{font-size:clamp(36px,7vw,80px);text-wrap:balance;max-width:16ch}
@media(prefers-reduced-motion:reduce){.hero .reveal{display:none}.hero .hint{display:none}}

/* sekcje */
.sec{padding:clamp(60px,9vw,100px) 0;border-top:1px solid var(--line)}
.sec.first{border-top:0}
.sgrid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(30px,5vw,64px);align-items:start}
@media(max-width:820px){.sgrid{grid-template-columns:1fr;gap:30px}}
.about h2{font-size:clamp(28px,4vw,44px);margin-bottom:22px;text-wrap:balance}
.about p{color:var(--muted);font-size:clamp(15.5px,1.6vw,17.5px);margin-bottom:16px;max-width:60ch}
.about p:first-of-type{color:var(--ink)}
.about .short{font-size:clamp(18px,2vw,20px)}

.pillars{display:grid;gap:16px}
.pil{border:1px solid var(--line);border-radius:16px;padding:22px 24px;background:linear-gradient(160deg,rgba(255,255,255,.02),transparent)}
.pil h3{font-family:"Clash Display";font-weight:600;font-size:16px;color:var(--amber);margin-bottom:6px}
.pil p{color:var(--muted);font-size:14px}

/* linki/CTA */
.linkrow{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.linkrow a{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);border:1px solid var(--line);border-radius:100px;padding:10px 18px}
.linkrow a:hover{color:var(--ink);border-color:var(--amber)}

.cend{text-align:center;padding:0}
.cend h2{font-size:clamp(30px,4.6vw,54px);text-wrap:balance;max-width:18ch;margin:0 auto 16px}
.cend p{color:var(--muted);max-width:48ch;margin:0 auto 30px}
.cend .cta-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

footer{border-top:1px solid var(--line);padding:30px 0;color:var(--faint);font-size:13px}
footer .row{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:center}