/* =====================================================
   My-NatureCode — style strony
   Menu u góry, nowoczesny układ, animacje, duże grafiki.
   Paleta: podstawowe kolory natury.
   ===================================================== */

:root {
  --paper:        #f7f1e3;   /* główne jasne tło */
  --sand:         #efe4cb;   /* cieplejszy wariant */
  --cream:        #fffdf6;   /* karty */
  --forest:       #13241a;   /* sekcje ciemne */
  --forest-2:     #1f3a29;
  --ink:          #221c12;   /* tekst */

  --leaf:         #4f9a3f;
  --leaf-deep:    #317a36;
  --leaf-bright:  #8fd06a;
  --sky:          #3d86ad;
  --sky-bright:   #7cc0e0;
  --sun:          #ebb02f;
  --berry:        #bf4c3e;
  --earth:        #6f5440;

  --line:         rgba(34,28,18,.14);
  --header-h:     86px;
  --maxw:         1240px;

  --serif: 'Fraunces', Georgia, serif;
  --sans:  'Plus Jakarta Sans', system-ui, -apple-system, Segoe UI, sans-serif;

  --shadow-soft: 0 30px 60px -30px rgba(20,36,26,.45);
  --shadow-card: 0 24px 50px -28px rgba(20,36,26,.5);
  --ease: cubic-bezier(.2,.7,.2,1);
}

/* ---------- Reset / baza ---------- */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }

html { -webkit-text-size-adjust:100%; overflow-x:hidden; }
html.js { scroll-behavior:smooth; }

body {
  font-family:var(--sans);
  font-size:18px;
  line-height:1.7;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  overflow-wrap:break-word;
}

img { max-width:100%; display:block; }
a   { color:inherit; text-decoration:none; }
ul  { list-style:none; }

h1,h2,h3,h4 {
  font-family:var(--serif);
  font-weight:600;
  line-height:1.08;
  letter-spacing:-.018em;
  overflow-wrap:break-word;
}

:focus-visible { outline:3px solid var(--sky); outline-offset:3px; border-radius:6px; }

.container { width:100%; max-width:var(--maxw); margin:0 auto; padding:0 30px; }

section[id] { scroll-margin-top:calc(var(--header-h) + 12px); }

/* ---------- Pasek postępu ---------- */
.scroll-progress {
  position:fixed; top:0; left:0;
  height:3px; width:0;
  background:linear-gradient(90deg,var(--leaf),var(--sun));
  z-index:90;
  transition:width .1s linear;
}

/* =====================================================
   NAGŁÓWEK
   ===================================================== */
.site-header {
  position:fixed; top:0; left:0; right:0;
  z-index:70;
  transition:background .35s var(--ease), box-shadow .35s var(--ease);
}
.site-header.scrolled {
  background:rgba(247,241,227,.97);
  box-shadow:0 10px 40px -22px rgba(20,36,26,.5);
}
.header-inner {
  height:var(--header-h);
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}

.logo { display:flex; align-items:center; gap:13px; position:relative; z-index:75; }
/* znak jest poziomy (owal ok. 3:2), więc kafelek też — przy kwadracie
   logo skurczyłoby się do wysokości połowy pola i zrobiło nieczytelne */
.logo-mark {
  width:80px; height:54px; flex:none;
  display:grid; place-items:center;
  transition:transform .4s var(--ease);
}
.logo:hover .logo-mark { transform:rotate(-6deg) scale(1.07); }
.logo-mark img { width:100%; height:100%; object-fit:contain; display:block; }
.logo-text { font-family:var(--serif); font-weight:600; font-size:1.55rem; color:var(--ink); }
.logo-text em { font-style:normal; color:var(--leaf-deep); }
.logo--light .logo-text { color:var(--cream); }
.logo--light .logo-text em { color:var(--leaf-bright); }
/* w stopce (ciemne tło) logo dostaje jasną podkładkę — inaczej ciemna
   typografia w środku znaku ginie na zieleni */
.logo--light .logo-mark {
  background:rgba(255,253,246,.93);
  border-radius:16px;
  padding:3px;
  box-shadow:0 12px 26px -14px rgba(0,0,0,.75);
}

.main-nav { display:flex; align-items:center; gap:18px; }
.nav-list { display:flex; gap:6px; }
.nav-list a {
  position:relative;
  display:block; padding:9px 16px;
  font-weight:500; font-size:1rem; color:var(--ink);
  border-radius:999px;
  transition:color .2s, background .2s;
}
.nav-list a::after {
  content:""; position:absolute; left:16px; right:16px; bottom:4px;
  height:2px; background:var(--leaf); border-radius:2px;
  transform:scaleX(0); transform-origin:left;
  transition:transform .3s var(--ease);
}
.nav-list a:hover { color:var(--leaf-deep); }
.nav-list a:hover::after,
.nav-list a.active::after { transform:scaleX(1); }
.nav-list a.active { color:var(--leaf-deep); }

/* przełącznik języka jest częścią .main-nav */

.lang-switch { display:inline-flex; gap:3px; padding:4px; background:rgba(34,28,18,.07); border-radius:999px; }
.lang-switch button {
  font-family:var(--sans); font-size:.82rem; font-weight:600; letter-spacing:.03em;
  padding:7px 12px; border:0; border-radius:999px; cursor:pointer;
  background:transparent; color:rgba(34,28,18,.6);
  transition:background .2s, color .2s;
}
.lang-switch button:hover { color:var(--ink); }
.lang-switch button.active { background:var(--leaf); color:#fff; }

.nav-toggle {
  display:none;
  position:relative; z-index:75;
  width:48px; height:48px;
  flex-direction:column; justify-content:center; gap:6px;
  padding:13px; border:0; background:transparent; cursor:pointer;
}
.nav-toggle span {
  height:2.5px; border-radius:3px; background:var(--ink);
  transition:transform .3s var(--ease), opacity .2s;
}

/* =====================================================
   PRZYCISKI
   ===================================================== */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--sans); font-weight:600;
  border-radius:999px; border:2px solid transparent; cursor:pointer;
  transition:transform .18s var(--ease), background .25s, color .25s, box-shadow .25s;
}
.btn:hover  { transform:translateY(-3px); }
.btn:active { transform:translateY(-1px); }
.btn-sm { padding:11px 22px; font-size:.95rem; }
.btn-lg { padding:18px 36px; font-size:1.08rem; }
.btn:not(.btn-sm):not(.btn-lg) { padding:15px 30px; font-size:1rem; }

.btn-primary {
  background:var(--leaf-deep); color:#fff;
  box-shadow:0 18px 32px -16px rgba(49,122,54,.9);
}
.btn-primary:hover { background:var(--forest); box-shadow:0 22px 38px -16px rgba(19,36,26,.7); }
.btn-ghost { border-color:var(--ink); color:var(--ink); background:transparent; }
.btn-ghost:hover { background:var(--ink); color:var(--paper); }

/* =====================================================
   HERO
   ===================================================== */
.hero {
  position:relative; overflow:hidden;
  padding-top:clamp(140px,19vh,210px);
  padding-bottom:clamp(70px,10vw,120px);
  background:var(--paper);
}
.hero-bg { position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.blob { position:absolute; border-radius:50%; filter:blur(70px); }
.blob-1 { width:46vw; height:46vw; left:-10vw; top:-8vw;  background:rgba(79,154,63,.5);  animation:blobDrift 22s var(--ease) infinite; }
.blob-2 { width:40vw; height:40vw; right:-8vw; top:8vw;   background:rgba(61,134,173,.42); animation:blobDrift 27s var(--ease) infinite reverse; }
.blob-3 { width:34vw; height:34vw; right:14vw; bottom:-14vw; background:rgba(235,176,47,.4); animation:blobDrift 31s var(--ease) infinite; }

.float-leaf { position:absolute; fill:var(--leaf); pointer-events:none; }
.fl-hero-1 { width:140px; top:16%; left:6%;  opacity:.16; animation:floaty 9s ease-in-out infinite; }
.fl-hero-2 { width:96px;  bottom:14%; left:42%; opacity:.13; animation:floaty 11s ease-in-out infinite reverse; }

.hero-grid {
  position:relative; z-index:1;
  display:grid; gap:clamp(40px,5vw,72px);
  grid-template-columns:1fr;
  align-items:center;
}

.eyebrow {
  display:inline-flex; align-items:center; gap:10px;
  font-size:.84rem; font-weight:600; letter-spacing:.13em; text-transform:uppercase;
  color:var(--leaf-deep);
  background:rgba(79,154,63,.14);
  padding:9px 18px; border-radius:999px;
}
.eyebrow-dot {
  width:9px; height:9px; border-radius:50%; background:var(--leaf);
  animation:pulse 2.4s ease-in-out infinite;
}
.eyebrow-num {
  display:inline-grid; place-items:center;
  width:30px; height:30px; border-radius:50%;
  background:var(--leaf); color:#fff;
  font-family:var(--serif); font-size:.85rem; font-weight:700;
}

.hero-title {
  margin:26px 0 22px;
  font-size:clamp(2.6rem,8vw,6.4rem);
  font-weight:600; letter-spacing:-.028em; line-height:1.04;
  overflow-wrap:break-word;
}
.title-accent {
  color:var(--leaf-deep);
  background-image:linear-gradient(transparent 56%, rgba(235,176,47,.5) 56%, rgba(235,176,47,.5) 90%, transparent 90%);
  -webkit-box-decoration-break:clone;
  box-decoration-break:clone;
}
.hero-lead {
  font-size:clamp(1.12rem,1.55vw,1.4rem);
  max-width:30ch; color:rgba(34,28,18,.78);
}
.hero-actions { display:flex; flex-wrap:wrap; gap:16px; margin-top:34px; }

.hero-meta {
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  margin-top:30px;
  font-size:.96rem; color:rgba(34,28,18,.65);
}
.hero-loc { display:inline-flex; align-items:center; gap:7px; font-weight:600; color:var(--ink); }
.hero-loc svg { width:19px; height:19px; fill:var(--leaf-deep); }
.hero-dot { width:5px; height:5px; border-radius:50%; background:var(--leaf); }

/* Hero — grafika */
.hero-visual {
  position:relative;
  aspect-ratio:1/1;
  max-width:520px; width:100%; margin:0 auto;
}
.hero-ring {
  position:absolute; inset:2%;
  border:2px dashed rgba(79,154,63,.42);
  border-radius:50%;
  animation:spin 46s linear infinite;
}
.orb {
  position:absolute; inset:5%;
  display:grid; place-items:center;
  background:radial-gradient(circle at 50% 47%,
              rgba(255,255,255,.96) 0%,
              rgba(226,243,241,.72) 40%,
              rgba(226,243,241,0) 70%);
  border-radius:50%;
}
.orb-logo {
  width:100%; height:100%; object-fit:contain;
  filter:drop-shadow(0 30px 46px rgba(16,58,68,.34));
  animation:floaty 9s ease-in-out infinite;
}
.mini-blob { position:absolute; border-radius:50%; }
.mb-1 { width:74px;  height:74px; background:var(--sun);   top:2%;  right:14%; animation:floaty 7s ease-in-out infinite; box-shadow:0 16px 30px -12px rgba(235,176,47,.8); }
.mb-2 { width:54px;  height:54px; background:var(--berry); bottom:8%; left:2%;  animation:floaty 9s ease-in-out infinite reverse; box-shadow:0 16px 30px -12px rgba(191,76,62,.7); }
.mb-3 { width:40px;  height:40px; background:var(--sky-bright); top:46%; right:-2%; animation:floaty 6s ease-in-out infinite; }
.fl-vis-1 { width:90px; bottom:2%; right:24%; fill:var(--leaf-bright); opacity:.7; animation:floaty 8s ease-in-out infinite; }

.hero-card {
  position:absolute; z-index:2;
  display:flex; align-items:center; gap:12px;
  padding:14px 18px;
  background:rgba(255,253,246,.92);
  backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.7);
  border-radius:18px;
  box-shadow:var(--shadow-card);
  font-weight:600; font-size:.98rem;
}
.hero-card-1 { top:6%; left:-7%;  animation:floaty 7.5s ease-in-out infinite; }
.hero-card-2 { bottom:5%; right:-6%; animation:floaty 9.5s ease-in-out infinite reverse; }
.hc-icon {
  width:40px; height:40px; flex:none;
  display:grid; place-items:center; border-radius:11px;
  background:var(--leaf);
}
.hc-icon svg { width:22px; height:22px; fill:#fff; }
.hc-icon--sun { background:var(--sun); }

.scroll-cue {
  position:absolute; left:50%; bottom:26px; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:10px;
  font-size:.78rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(34,28,18,.55);
}
.scroll-track {
  width:24px; height:40px; border:2px solid rgba(34,28,18,.3); border-radius:999px;
  display:flex; justify-content:center; padding-top:7px;
}
.scroll-dot { width:5px; height:8px; border-radius:3px; background:var(--leaf-deep); animation:cueDot 1.7s ease-in-out infinite; }

/* =====================================================
   PASEK PRZEWIJANY
   ===================================================== */
.marquee {
  background:var(--forest);
  overflow:hidden;
  padding:24px 0;
  border-top:1px solid rgba(143,208,106,.16);
  border-bottom:1px solid rgba(143,208,106,.16);
}
.marquee-track { display:flex; width:max-content; animation:marquee 34s linear infinite; }
.marquee:hover .marquee-track { animation-play-state:paused; }
.marquee-group {
  flex:0 0 auto;
  display:flex; align-items:center;
  font-family:var(--serif); font-weight:500;
  font-size:clamp(1.7rem,3.6vw,3rem);
  color:var(--cream); white-space:nowrap;
}
.marquee-group i {
  font-style:normal; color:var(--leaf-bright);
  margin:0 .5em; font-size:.7em;
}

/* =====================================================
   SEKCJE — wspólne
   ===================================================== */
.section { position:relative; padding:clamp(82px,11vw,150px) 0; }

.section-head {
  max-width:720px; margin:0 auto clamp(50px,6vw,82px);
  text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:18px;
}
.section-title { font-size:clamp(2.3rem,5vw,4rem); font-weight:600; }
.section-intro { font-size:1.16rem; color:rgba(34,28,18,.72); max-width:56ch; }

.eyebrow--light { color:var(--leaf-bright); background:rgba(143,208,106,.16); }
.section-title--light { color:var(--cream); }
.section-intro--light { color:rgba(255,253,246,.8); }

/* =====================================================
   01 · O MNIE
   ===================================================== */
.about { background:var(--paper); overflow:hidden; }
.about-grid {
  display:grid; gap:clamp(46px,6vw,90px);
  grid-template-columns:1fr;
  align-items:center;
}
.about-visual { position:relative; max-width:480px; margin:0 auto; width:100%; }
.about-ring {
  position:absolute; width:130px; height:130px; right:-6%; top:-7%;
  border:2px dashed var(--sun); border-radius:50%;
  animation:spin 38s linear infinite;
}
.about-photo {
  position:relative;
  border-radius:34px; overflow:hidden;
  box-shadow:var(--shadow-soft);
}
/* zdjęcie ma dorysowaną ramkę z roślin i wody — pokazujemy je w całości,
   bez kadrowania, więc wysokość liczy się z proporcji pliku */
.about-photo img { width:100%; height:auto; }
.about-badge {
  position:absolute; z-index:2; left:-8%; bottom:11%;
  display:flex; align-items:center; gap:10px;
  padding:13px 19px; border-radius:16px;
  background:var(--cream);
  box-shadow:var(--shadow-card);
  font-weight:600; font-size:.96rem;
  animation:floaty 8s ease-in-out infinite;
}
.about-badge svg { width:24px; height:24px; fill:var(--leaf); }
.fl-about { width:80px; top:-5%; left:-9%; fill:var(--leaf-bright); opacity:.85; animation:floaty 7s ease-in-out infinite; }

.about-copy .eyebrow { margin-bottom:18px; }
.about-copy .section-title { margin-bottom:24px; }
.about-text p { margin-bottom:16px; font-size:1.08rem; color:rgba(34,28,18,.82); }
.signature {
  font-family:var(--serif); font-style:italic; font-weight:500;
  font-size:1.32rem; color:var(--leaf-deep);
  margin-top:6px;
}
.values { display:flex; flex-wrap:wrap; gap:12px; margin-top:30px; }
.values li {
  display:flex; align-items:center; gap:10px;
  padding:11px 20px; border-radius:999px;
  font-size:.98rem; font-weight:600;
  background:var(--cream); border:1px solid var(--line);
}
.values li::before { content:""; width:10px; height:10px; border-radius:50%; background:var(--leaf); }
.values li:nth-child(2)::before { background:var(--sky); }
.values li:nth-child(3)::before { background:var(--sun); }
.values li:nth-child(4)::before { background:var(--berry); }

/* =====================================================
   02 · CZYM SIĘ ZAJMUJĘ
   ===================================================== */
.services { background:var(--sand); }
.cards { display:grid; grid-template-columns:repeat(2,1fr); gap:26px; }
.card {
  position:relative; overflow:hidden;
  background:var(--cream);
  border:1px solid var(--line);
  border-radius:30px;
  padding:42px 38px;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.card::before {
  content:""; position:absolute; right:-40px; top:-40px;
  width:170px; height:170px; border-radius:50%;
  background:var(--leaf); opacity:.08;
  transition:transform .5s var(--ease);
}
.card:hover { transform:translateY(-12px); box-shadow:0 36px 60px -30px rgba(79,154,63,.6); }
.card:hover::before { transform:scale(1.5); }
.card-icon {
  position:relative; z-index:1;
  width:84px; height:84px;
  display:grid; place-items:center;
  background:var(--leaf); border-radius:24px;
  margin-bottom:26px;
  box-shadow:0 20px 34px -16px rgba(79,154,63,.85);
  transition:transform .4s var(--ease);
}
.card:hover .card-icon { transform:rotate(-9deg) scale(1.07); }
.card-icon svg { width:42px; height:42px; fill:#fff; }
.card h3 { position:relative; z-index:1; font-size:1.62rem; margin-bottom:12px; }
.card p  { position:relative; z-index:1; font-size:1.05rem; color:rgba(34,28,18,.74); }
.card-no {
  position:absolute; right:30px; bottom:18px;
  font-family:var(--serif); font-weight:700; font-size:4.6rem;
  color:rgba(34,28,18,.06); line-height:1;
}

.card--green .card-icon { background:var(--leaf); }
.card--green::before { background:var(--leaf); }
.card--sky   .card-icon { background:var(--sky); }
.card--sky::before { background:var(--sky); }
.card--sky:hover { box-shadow:0 36px 60px -30px rgba(61,134,173,.6); }
.card--sun   .card-icon { background:var(--sun); }
.card--sun::before { background:var(--sun); }
.card--sun:hover { box-shadow:0 36px 60px -30px rgba(235,176,47,.6); }
.card--berry .card-icon { background:var(--berry); }
.card--berry::before { background:var(--berry); }
.card--berry:hover { box-shadow:0 36px 60px -30px rgba(191,76,62,.55); }

/* =====================================================
   03 · PROJEKTY
   ===================================================== */
.projects { background:var(--forest); color:var(--cream); overflow:hidden; }
.projects-bg { position:absolute; inset:0; z-index:0; pointer-events:none; }
.blob-p1 { width:38vw; height:38vw; left:-10vw; top:-8vw; background:rgba(79,154,63,.3); filter:blur(80px); }
.blob-p2 { width:34vw; height:34vw; right:-10vw; bottom:-12vw; background:rgba(61,134,173,.28); filter:blur(80px); }
.fl-proj { width:150px; top:14%; right:8%; fill:var(--leaf-bright); opacity:.1; animation:floaty 10s ease-in-out infinite; }
.projects .container { position:relative; z-index:1; }

.link-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
.link-card {
  position:relative; overflow:hidden;
  display:flex; align-items:center; gap:22px;
  padding:30px 32px;
  background:rgba(255,253,246,.055);
  border:1px solid rgba(255,253,246,.14);
  border-radius:24px;
  transition:transform .35s var(--ease), background .3s, border-color .3s;
}
.link-card:hover { transform:translateY(-7px); }
.link-icon {
  width:66px; height:66px; flex:none;
  display:grid; place-items:center;
  border-radius:18px; background:rgba(255,253,246,.1);
  transition:background .3s;
}
.link-icon svg { width:32px; height:32px; fill:var(--cream); transition:fill .3s; }
.link-body { flex:1; display:flex; flex-direction:column; gap:3px; }
.link-body strong { font-family:var(--serif); font-size:1.5rem; font-weight:600; }
.link-body span   { font-size:1rem; color:rgba(255,253,246,.7); transition:color .3s; }
.link-arrow { font-size:2rem; color:rgba(255,253,246,.6); transition:transform .3s var(--ease), color .3s; }
.link-card:hover .link-arrow { transform:translateX(8px); color:var(--cream); }
.link-card:hover .link-icon { background:rgba(255,255,255,.22); }

.link-card--tiktok:hover   { background:var(--berry); border-color:var(--berry); }
.link-card--whatsapp:hover { background:var(--leaf);  border-color:var(--leaf); }
.link-card--project:hover  { background:var(--sky);   border-color:var(--sky); }
.link-card--mail:hover     { background:var(--sun);   border-color:var(--sun); }
.link-card--mail:hover .link-body strong,
.link-card--mail:hover .link-body span,
.link-card--mail:hover .link-arrow { color:var(--ink); }
.link-card--mail:hover .link-icon svg { fill:var(--ink); }
.link-card--instagram:hover { background:var(--berry); border-color:var(--berry); }
.link-card--facebook:hover  { background:var(--sky);   border-color:var(--sky); }
.link-card--youtube:hover   { background:var(--earth); border-color:var(--earth); }
.link-card--telegram:hover  { background:var(--leaf);  border-color:var(--leaf); }

/* =====================================================
   04 · KONTAKT
   ===================================================== */
.contact { background:var(--paper); }
.contact-grid {
  display:grid; gap:36px;
  grid-template-columns:1fr;
}
.contact-form { display:flex; flex-direction:column; gap:20px; }
.field { display:flex; flex-direction:column; gap:9px; }
.field label {
  font-size:.86rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--leaf-deep);
}
.field input, .field textarea {
  font-family:var(--sans); font-size:1.05rem; color:var(--ink);
  background:var(--cream);
  border:2px solid var(--line); border-radius:16px;
  padding:16px 18px;
  transition:border-color .2s, box-shadow .2s;
}
.field textarea { resize:vertical; min-height:140px; }
.field input:focus, .field textarea:focus {
  outline:none; border-color:var(--leaf);
  box-shadow:0 0 0 5px rgba(79,154,63,.15);
}
.hp-field { position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }
.contact-form .btn { align-self:flex-start; }
.form-status { min-height:1.4em; font-size:1rem; font-weight:600; }
.form-status.ok    { color:var(--leaf-deep); }
.form-status.error { color:var(--berry); }

.contact-side {
  background:var(--cream);
  border:1px solid var(--line);
  border-radius:30px;
  padding:clamp(28px,4vw,42px);
}
/* Portret w karcie kontaktowej — to samo zdjęcie co w sekcji „O mnie".
   Kadr 4:3, a na wąskich ekranach spłaszczony do 3:2, żeby zdjęcie nie
   spychało danych kontaktowych poza ekran. */
.contact-photo {
  position:relative;
  margin:0 0 26px;
  border-radius:22px; overflow:hidden;
  box-shadow:var(--shadow-card);
}
.contact-photo img {
  display:block; width:100%;
  /* height:auto jest konieczne — bez niego atrybut height="680" z HTML
     wygrywa z aspect-ratio (podpowiedź prezentacyjna przegrywa tylko
     z jawnie ustawioną wysokością) */
  height:auto;
  aspect-ratio:4/3; object-fit:cover; object-position:50% 35%;
}
.contact-photo figcaption {
  position:absolute; left:14px; bottom:14px;
  padding:9px 15px; border-radius:13px;
  background:rgba(255,253,246,.93);
  backdrop-filter:blur(6px);
  font-family:var(--serif); font-weight:600; font-size:.98rem;
  color:var(--ink);
}
.contact-side h3 { font-size:1.7rem; margin-bottom:10px; }
.contact-side > p { color:rgba(34,28,18,.72); margin-bottom:24px; }
.direct-list { display:flex; flex-direction:column; gap:12px; margin-bottom:26px; }
.direct-list a {
  display:flex; align-items:center; gap:16px;
  padding:16px 18px; border-radius:16px;
  background:var(--paper); border:1px solid var(--line);
  transition:transform .18s var(--ease), border-color .2s, background .2s;
}
.direct-list a:hover { transform:translateX(6px); border-color:var(--leaf); }
.direct-list svg { width:24px; height:24px; flex:none; fill:var(--leaf-deep); }
.direct-list span { display:flex; flex-direction:column; line-height:1.4; }
.direct-list strong { font-size:1.02rem; }
.direct-list em { font-style:normal; font-size:.94rem; color:rgba(34,28,18,.62); }

.addr-card {
  display:flex; gap:16px;
  padding:24px; border-radius:20px;
  background:var(--forest); color:var(--cream);
}
.addr-pin svg { width:30px; height:30px; fill:var(--sun); }
.addr-card h4 { font-size:1.16rem; margin-bottom:6px; color:var(--leaf-bright); }
.addr-card address { font-style:normal; line-height:1.65; color:rgba(255,253,246,.85); }
.addr-card address strong { color:var(--cream); }

/* =====================================================
   STOPKA
   ===================================================== */
.site-footer { background:var(--forest); color:var(--cream); }
.footer-grid {
  display:flex; flex-wrap:wrap; gap:40px; justify-content:space-between;
  padding-top:64px; padding-bottom:46px;
}
.footer-brand { max-width:360px; }
.footer-brand .logo { margin-bottom:16px; }
.footer-brand p { color:rgba(255,253,246,.74); margin-bottom:12px; }
.footer-addr { font-style:normal; font-size:.95rem; color:rgba(255,253,246,.58); }
.footer-nav { display:flex; flex-direction:column; gap:13px; }
.footer-nav a { color:rgba(255,253,246,.8); font-weight:500; transition:color .2s, padding-left .2s; }
.footer-nav a:hover { color:var(--leaf-bright); padding-left:6px; }

.footer-bar { border-top:1px solid rgba(255,253,246,.12); }
.footer-bar-inner {
  display:flex; flex-wrap:wrap; gap:10px; justify-content:space-between;
  padding-top:22px; padding-bottom:22px;
  font-size:.9rem; color:rgba(255,253,246,.6);
}
.footer-bar-inner a { color:var(--leaf-bright); }
.footer-legal { display:flex; gap:18px; flex-wrap:wrap; }
.footer-legal a { color:rgba(255,253,246,.66); }
.footer-legal a:hover { color:var(--leaf-bright); }

/* =====================================================
   STRONY PRAWNE (Impressum, polityka prywatności)
   ===================================================== */
[hidden] { display:none !important; }

.legal {
  padding-top:calc(var(--header-h) + 56px);
  padding-bottom:clamp(60px,9vw,110px);
  background:var(--paper);
  min-height:74vh;
}
.legal .container { max-width:840px; }
.legal-back {
  display:inline-flex; align-items:center; gap:6px;
  font-weight:600; color:var(--leaf-deep);
  margin-bottom:26px;
}
.legal-back:hover { color:var(--forest); }
.legal h1 { font-size:clamp(2.1rem,5vw,3.3rem); margin-bottom:8px; }
.legal-updated { color:rgba(34,28,18,.6); font-size:.96rem; margin-bottom:30px; }
.legal h2 { font-size:1.4rem; margin:36px 0 12px; }
.legal p { color:rgba(34,28,18,.84); margin-bottom:12px; }
.legal a { color:var(--leaf-deep); text-decoration:underline; overflow-wrap:anywhere; }
.legal a:hover { color:var(--forest); }
.legal address {
  font-style:normal; line-height:1.75;
  background:var(--cream); border:1px solid var(--line);
  border-radius:14px; padding:18px 20px; margin:8px 0 14px;
}

/* ---------- Przycisk „do góry" ---------- */
.to-top {
  position:fixed; right:26px; bottom:26px; z-index:65;
  width:54px; height:54px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--leaf-deep); color:#fff; border:0; cursor:pointer;
  box-shadow:0 18px 34px -14px rgba(19,36,26,.8);
  opacity:0; visibility:hidden; transform:translateY(20px);
  transition:opacity .3s, visibility .3s, transform .3s var(--ease), background .2s;
}
.to-top svg { width:24px; height:24px; fill:#fff; }
.to-top.show { opacity:1; visibility:visible; transform:none; }
.to-top:hover { background:var(--leaf); transform:translateY(-4px); }

/* =====================================================
   ANIMACJE
   ===================================================== */
@keyframes blobDrift {
  0%,100% { transform:translate(0,0) scale(1); }
  33%     { transform:translate(6%,4%) scale(1.12); }
  66%     { transform:translate(-5%,6%) scale(.92); }
}
@keyframes floaty {
  0%,100% { transform:translateY(0); }
  50%     { transform:translateY(-18px); }
}
@keyframes spin { to { transform:rotate(360deg); } }
@keyframes morph {
  0%,100% { border-radius:46% 54% 57% 43% / 47% 44% 56% 53%; }
  50%     { border-radius:58% 42% 38% 62% / 60% 55% 45% 40%; }
}
@keyframes marquee { to { transform:translateX(-50%); } }
@keyframes pulse {
  0%,100% { transform:scale(1);  opacity:1; }
  50%     { transform:scale(.55); opacity:.4; }
}
@keyframes cueDot {
  0%   { transform:translateY(0);    opacity:0; }
  35%  { opacity:1; }
  70%  { transform:translateY(11px); opacity:0; }
  100% { opacity:0; }
}

/* Pojawianie się przy przewijaniu */
html.js [data-reveal] {
  opacity:0; transform:translateY(44px);
  transition:opacity .85s var(--ease), transform .85s var(--ease);
  transition-delay:calc(var(--i,0) * .09s);
}
html.js [data-reveal].in { opacity:1; transform:none; }

html.js .values li {
  opacity:0; transform:translateY(16px);
  transition:opacity .55s var(--ease), transform .55s var(--ease);
  transition-delay:calc(var(--i,0) * .1s);
}
html.js .values.in li { opacity:1; transform:none; }

@media (prefers-reduced-motion:reduce) {
  html.js { scroll-behavior:auto; }
  html.js [data-reveal], html.js .values li { opacity:1; transform:none; transition:none; }
  .blob, .float-leaf, .hero-ring, .orb, .orb-logo, .mini-blob, .about-ring,
  .about-badge, .hero-card, .marquee-track, .eyebrow-dot, .scroll-dot { animation:none !important; }
  .btn:hover, .card:hover, .link-card:hover, .direct-list a:hover { transform:none; }
}

/* =====================================================
   RWD
   ===================================================== */
@media (min-width:721px) {
  .hero-grid { grid-template-columns:1.05fr .95fr; }
  .about-grid { grid-template-columns:.92fr 1.08fr; }
  .contact-grid { grid-template-columns:1.05fr .95fr; }
}

/* =====================================================
   MENU HAMBURGER — na wszystkich szerokosciach, takze na desktopie.
   Pozioma lista linkow lamala sie w naglowku na dwie linie, wiec caly
   uklad nawigacji zastepuje pelnoekranowe menu otwierane hamburgerem.
   ===================================================== */
.nav-toggle { display:flex; }
.main-nav {
  position:fixed; inset:0; z-index:65;
  flex-direction:column; justify-content:center; gap:16px;
  background:var(--forest);
  padding:96px 24px 40px;
  overflow-y:auto;
  transform:translateY(-100%);
  visibility:hidden;
  transition:transform .45s var(--ease), visibility .45s;
}
.main-nav.open { transform:translateY(0); visibility:visible; }
.nav-list { flex-direction:column; gap:4px; width:100%; max-width:420px; }
.nav-list a {
  font-family:var(--serif); font-size:clamp(1.45rem,4vw,2.1rem); font-weight:600;
  color:var(--cream); text-align:center; padding:11px;
}
.nav-list a::after { display:none; }
.nav-list a:hover, .nav-list a.active { color:var(--leaf-bright); }
.nav-cta { margin-top:8px; }
.main-nav .lang-switch { margin-top:6px; background:rgba(255,253,246,.12); }
.main-nav .lang-switch button { color:rgba(255,253,246,.78); }
.main-nav .lang-switch button:hover { color:#fff; }
.main-nav .lang-switch button.active { background:var(--leaf-bright); color:var(--forest); }

/* Hamburger jako czytelny przycisk (na desktopie stoi sam w naglowku) */
.nav-toggle {
  width:52px; height:52px; padding:14px;
  border:1px solid var(--line); border-radius:15px;
  background:rgba(255,253,246,.6); backdrop-filter:blur(6px);
  transition:border-color .2s var(--ease), background .2s var(--ease), transform .2s var(--ease);
}
.nav-toggle:hover { border-color:var(--leaf); transform:translateY(-2px); }
.nav-toggle.open span:nth-child(1) { transform:translateY(8.5px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity:0; }
.nav-toggle.open span:nth-child(3) { transform:translateY(-8.5px) rotate(-45deg); }
html.menu-open .site-header { background:transparent; box-shadow:none; }
html.menu-open .logo-text { color:var(--cream); }
html.menu-open .logo-text em { color:var(--leaf-bright); }
html.menu-open .nav-toggle { background:transparent; border-color:rgba(255,253,246,.35); }
html.menu-open .nav-toggle span { background:var(--cream); }
html.menu-open, html.menu-open body { overflow:hidden; }

@media (max-width:720px) {
  body { font-size:17px; }
  :root { --header-h:72px; }
  .container { padding:0 22px; }
  .logo-text { font-size:1.3rem; }
  .logo-mark { width:66px; height:44px; }
  .logo { gap:10px; }
  .cards, .link-grid { grid-template-columns:1fr; }
  .hero-visual { max-width:380px; }
  .scroll-cue { display:none; }
  .hero-card-1 { left:0; }
  .hero-card-2 { right:0; }
  .about-badge { left:-2%; }
  .contact-photo img { aspect-ratio:3/2; }
  .card { padding:34px 28px; }
  .link-card { padding:24px 22px; gap:18px; }
  .footer-grid { gap:32px; }
}

@media (max-width:460px) {
  .hero-actions { gap:12px; }
  .hero-actions .btn { flex:1 1 100%; }
  .btn-lg { padding:16px 28px; font-size:1.02rem; }
  .link-icon { width:56px; height:56px; }
  .link-icon svg { width:28px; height:28px; }
  .link-body strong { font-size:1.32rem; }
  .link-arrow { font-size:1.7rem; }
  .card-icon { width:72px; height:72px; }
  .card-icon svg { width:36px; height:36px; }
}

@media (max-width:400px) {
  .container { padding:0 16px; }
  .logo-text { font-size:1.12rem; }
  .hero-card { padding:11px 13px; font-size:.85rem; }
  .hc-icon { width:32px; height:32px; }
  .hc-icon svg { width:18px; height:18px; }
  .lang-switch button { padding:7px 10px; }
}