/* Ciepły Dom OZE: calm, morning-meadow light.
   Layout: one full-bleed sunrise in layers; monumental type on the sky; benefits on a frosted strip over the grass. */
:root {
  --mist: #EEF1EC;       /* canvas: cool green-grey morning paper */
  --paper: #F7F8F4;      /* light cards */
  --moss: #1E2A23;       /* ink, dark buttons, rules */
  --moss-soft: #4A574E;  /* secondary text */
  --line: #D3DAD0;       /* hairlines */
  --haze: #C8D3C6;       /* muted surface behind imagery */
  --sky: #E2EBEE;        /* pale-sky band */
  --dawn: #F6EDCB;       /* daylight band */
  --clay: #F0D9C6;       /* warm band, used once */
  --sun: #E9B44C;        /* only for light itself: glows and the logo sun */

  --f-sans: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: "Geist Mono", ui-monospace, Menlo, monospace;
  --gutter: clamp(16px, 3.2vw, 44px);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--mist); color: var(--moss); font: 400 1rem/1.55 var(--f-sans); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
a { color: inherit; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 16px; z-index: 60; background: var(--moss); color: var(--paper); padding: 10px 14px; border-radius: 10px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--moss); outline-offset: 3px; }

/* ------------------------------------------------------------------ Buttons: 20px radius, arrow in a right-hand pocket */
.pill {
  position: relative; display: inline-flex; align-items: center; height: 46px; padding: 0 56px 0 20px;
  border-radius: 20px; border: 1px solid transparent; text-decoration: none; white-space: nowrap;
  font: 500 0.9375rem/1 var(--f-sans);
  transition: background-color 250ms ease, color 250ms ease, border-color 250ms ease, transform 300ms var(--ease);
}
.pill:active { transform: scale(0.98); }
.pill::after {
  content: ""; position: absolute; right: 22px; top: 50%; width: 9px; height: 9px; margin-top: -5px;
  border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; transform: rotate(45deg);
  transition: transform 350ms var(--ease);
}
.pill:hover::after { transform: translateX(3px) rotate(45deg); }
.pill-lg { height: 54px; padding-left: 24px; font-size: 1rem; }
.pill-ink { background: var(--moss); color: var(--paper); }
.pill-ink:hover { background: #2B3A31; }
.pill-glass { background: rgba(247, 248, 244, 0.55); border-color: rgba(30, 42, 35, 0.18); color: var(--moss); backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3); }
.pill-glass:hover { background: rgba(247, 248, 244, 0.8); }
.pill-arrow { display: none; }

/* ------------------------------------------------------------------ Nav: transparent over the sky, a mist capsule after scroll */
.nav {
  position: fixed; z-index: 40; left: 0; right: 0; top: 0;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 16px var(--gutter); border: 1px solid transparent;
  transition: left 500ms var(--ease), right 500ms var(--ease), top 500ms var(--ease), padding 500ms var(--ease), border-radius 500ms var(--ease), background-color 400ms ease, border-color 400ms ease;
}
.nav.is-stuck {
  top: 10px; left: var(--gutter); right: var(--gutter); padding: 7px 7px 7px 20px; border-radius: 20px;
  background: rgba(238, 241, 236, 0.82); border-color: rgba(30, 42, 35, 0.1);
  backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4);
}
.logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font: 600 1.125rem/1 var(--f-sans); letter-spacing: -0.02em; }
.logo svg { width: 28px; height: 28px; overflow: visible; }
.logo circle { fill: var(--sun); }
.logo path { stroke: var(--moss); stroke-width: 2.4; stroke-linecap: round; }
.nav nav { display: flex; gap: 28px; font-weight: 500; font-size: 0.9375rem; }
.nav nav a { text-decoration: none; position: relative; }
.nav nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -5px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform 300ms var(--ease); }
.nav nav a:hover::after { transform: scaleX(1); }
@media (max-width: 960px) { .nav nav { display: none; } }

/* ------------------------------------------------------------------ Hero */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: max(760px, 100svh);
  display: grid; grid-template-rows: 1fr auto; gap: 32px;
  padding: 0 var(--gutter) var(--gutter);
  --px: 0; --py: 0; /* pointer, -1..1, set by JS through a spring */
  --t: 0;           /* fog, 0..1, set by JS from the scroll position */
}
.hero-stage { position: fixed; inset: 0; z-index: -1; overflow: hidden; background: #9FB08F; }
.hero-stage.is-gone { visibility: hidden; }
.layer { position: absolute; inset: -3%; pointer-events: none; }
.layer img, .layer picture { width: 100%; height: 100%; }
.layer img { object-fit: cover; object-position: 50% 50%; }

/* The plate moves least; the grass in front moves most. */
.layer-plate { transform: translate3d(calc(var(--px) * -6px), calc(var(--py) * -4px), 0); }
.layer-fg { transform: translate3d(calc(var(--px) * 16px), calc(var(--py) * 10px), 0); }

/* Sun glow: a soft light that brightens as the morning goes on (scroll). */
.layer-sun {
  inset: 0;
  background: radial-gradient(ellipse 60% 55% at 22% 8%, rgba(255, 246, 214, 0.7) 0, rgba(255, 236, 190, 0.25) 40%, rgba(255, 236, 190, 0) 75%);
  mix-blend-mode: screen; opacity: 0.55;
}
/* Morning haze over the upper part, so the headline reads calmly on a busy meadow. */
.layer-haze { inset: 0; background: linear-gradient(180deg, rgba(240, 243, 236, 0.8) 0%, rgba(240, 243, 236, 0.64) 38%, rgba(240, 243, 236, 0.42) 62%, rgba(240, 243, 236, 0) 84%); }
/* Mist: two wide, blurred bands along the horizon, drifting at different speeds. */
.layer-mist { inset: 0; }
.layer-mist span {
  position: absolute; left: -20%; right: -20%; height: 16%; top: 66%;
  background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(255, 246, 228, 0.55), rgba(255, 246, 228, 0) 70%);
  filter: blur(18px); mix-blend-mode: screen;
}
.layer-mist span + span { top: 72%; height: 12%; opacity: 0.7; }
.layer-pollen { inset: 0; width: 100%; height: 100%; }
/* A little air at the bottom so the frosted strip reads on darker grass. */
.layer-shade { inset: 0; background: linear-gradient(180deg, rgba(20, 28, 23, 0) 62%, rgba(20, 28, 23, 0.32) 100%); opacity: calc(1 - var(--t) * 1.4); }
/* Fog: the exact colours of the next section, so the hero dissolves into it with no edge. */
.layer-fog { inset: 0; background: linear-gradient(180deg, #E4ECEE 0%, var(--sky) 55%, #E6EDE9 100%); opacity: calc(var(--t) * var(--t) * (3 - 2 * var(--t))); }

.hero-copy { padding-top: clamp(112px, 16vh, 168px); max-width: 980px; }
.hero-title { margin: 0; font-family: var(--f-sans); font-weight: 500; color: var(--moss); }
.hero-title .line { display: block; overflow: hidden; padding-bottom: 0.05em; }
.hero-title .rise { display: inline-block; }
.hero-title { font-size: clamp(4.5rem, 11.5vw, 11.5rem); line-height: 0.88; letter-spacing: -0.055em; margin-left: -0.04em; }
.hero-lead { margin: 28px 0 0; max-width: 36ch; font-size: clamp(1.0625rem, 1.25vw, 1.25rem); line-height: 1.45; color: var(--moss); font-weight: 500; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }

/* Benefits strip: one frosted panel, four columns split by hairlines. */
.benefits {
  list-style: none; margin: 0; padding: 0; align-self: end;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  border-radius: 10px; overflow: hidden;
  background: rgba(238, 241, 236, 0.74); border: 1px solid rgba(255, 255, 255, 0.45);
  backdrop-filter: blur(20px) saturate(1.35); -webkit-backdrop-filter: blur(20px) saturate(1.35);
}
.benefits li { padding: 20px 22px 22px; min-width: 0; }
.benefits li + li { border-left: 1px solid rgba(30, 42, 35, 0.12); }
.b-num { margin: 0; display: flex; align-items: baseline; gap: 6px; font: 500 clamp(1.875rem, 3vw, 2.875rem)/1 var(--f-mono); letter-spacing: -0.06em; white-space: nowrap; }
.b-num small { font: 500 0.875rem/1 var(--f-sans); letter-spacing: 0; color: var(--moss-soft); }
.b-label { margin: 10px 0 0; font-size: 0.875rem; line-height: 1.4; color: var(--moss-soft); max-width: 30ch; }
.b-src { margin-left: 4px; font: 500 0.6875rem/1 var(--f-mono); color: var(--moss); text-decoration: none; vertical-align: super; }
.b-src:hover { text-decoration: underline; }
@media (prefers-reduced-transparency: reduce) { .benefits, .pill-glass, .nav.is-stuck { background: var(--mist); backdrop-filter: none; -webkit-backdrop-filter: none; } }

@media (max-width: 960px) {
  .benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .benefits li:nth-child(3) { border-left: 0; }
  .benefits li:nth-child(n+3) { border-top: 1px solid rgba(30, 42, 35, 0.12); }
}
@media (max-width: 760px) {
  .hero { min-height: max(680px, 100svh); }
  .hero-title { font-size: 21vw; }
  .layer img { object-position: 50% 30%; }
  .layer-sun { background: radial-gradient(ellipse 90% 40% at 40% 4%, rgba(255, 246, 214, 0.75) 0, rgba(255, 236, 190, 0) 70%); }
  .benefits li { padding: 16px; }
  .b-label { font-size: 0.8125rem; }
}

/* ------------------------------------------------------------------ Motion
   Arrive once (the photo settles, the words rise), then only nature moves: mist, pollen, light. */
@media (prefers-reduced-motion: no-preference) {
  .js .hero-title .rise { transform: translateY(105%); }
  .js .hero-ctas, .js .nav { opacity: 0; }
  /* The lead is the LCP element on phones: it stays painted and only rises a little. */
  .js .hero-lead { transform: translateY(14px); }
  .js .benefits li { opacity: 0; transform: translateY(16px); }
  .js .layer-plate img { animation: settle 2600ms var(--ease) both; }

  .is-ready .hero-title .rise { transform: none; transition: transform 1200ms var(--ease); }
  .is-ready .hero-title .line + .line .rise { transition-delay: 110ms; }
  .is-ready .hero-lead { transform: none; transition: transform 1100ms var(--ease) 350ms; }
  .is-ready .hero-ctas { opacity: 1; transition: opacity 900ms ease 600ms; }
  .is-ready .nav { opacity: 1; transition: opacity 800ms ease 200ms; }
  .is-ready .benefits li { opacity: 1; transform: none; transition: opacity 800ms ease, transform 1100ms var(--ease); transition-delay: calc(700ms + var(--i) * 90ms); }

  .layer-mist span { animation: mist 46s ease-in-out infinite alternate; }
  .layer-mist span + span { animation-duration: 63s; animation-direction: alternate-reverse; }

}
@keyframes settle { from { transform: scale(1.12); } to { transform: none; } }
@keyframes mist { from { transform: translateX(-7%); } to { transform: translateX(7%); } }

/* ------------------------------------------------------------------ Phone menu */
.logo span { white-space: nowrap; }
.nav-actions { display: flex; align-items: center; gap: 8px; }
.menu-btn { display: none; position: relative; width: 44px; height: 44px; border: 0; border-radius: 14px; background: rgba(247, 248, 244, 0.6); cursor: pointer; flex: none; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.menu-btn span { position: absolute; left: 13px; right: 13px; height: 1.5px; background: var(--moss); transition: transform 350ms var(--ease), top 350ms var(--ease); }
.menu-btn span:first-child { top: 18px; }
.menu-btn span:last-child { top: 25px; }
.menu-btn[aria-expanded="true"] span:first-child { top: 21.5px; transform: rotate(45deg); }
.menu-btn[aria-expanded="true"] span:last-child { top: 21.5px; transform: rotate(-45deg); }
.menu {
  position: fixed; z-index: 39; left: 10px; right: 10px; top: 74px; padding: 8px 22px 14px; border-radius: 20px;
  background: rgba(238, 241, 236, 0.94); border: 1px solid rgba(30, 42, 35, 0.1);
  backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4);
  opacity: 0; transform: translateY(-10px); transition: opacity 250ms ease, transform 450ms var(--ease);
}
.menu.is-open { opacity: 1; transform: none; }
.menu nav { display: grid; }
.menu nav a { padding: 14px 2px; border-bottom: 1px solid rgba(30, 42, 35, 0.1); text-decoration: none; font: 500 1.5rem/1.1 var(--f-sans); letter-spacing: -0.03em; }
.menu nav a:last-child { border-bottom: 0; }
@media (max-width: 960px) {
  .menu-btn { display: block; }
  .nav.is-open { top: 8px; left: 10px; right: 10px; padding: 6px 6px 6px 16px; border-radius: 20px; background: rgba(238, 241, 236, 0.94); border-color: rgba(30, 42, 35, 0.1); }
  .nav.is-stuck { left: 10px; right: 10px; top: 8px; padding-left: 16px; }
}
.menu-cta { display: none; }
@media (max-width: 520px) { .nav .pill { display: none; } .menu-cta { display: flex; margin-top: 12px; width: 100%; } }
@media (min-width: 961px) { .menu { display: none; } }
@media (prefers-reduced-motion: reduce) { .menu { transition: opacity 150ms linear; transform: none; } }

/* ------------------------------------------------------------------ How it works
   Pale-sky band. Steps scroll on the left; the 3D stage is sticky on the right. */
.h2 { margin: 0; font: 500 clamp(2.5rem, 5vw, 4.75rem)/1 var(--f-sans); letter-spacing: -0.045em; text-wrap: balance; }
.how { position: relative; padding: clamp(80px, 10vw, 140px) var(--gutter) 0; background: linear-gradient(180deg, var(--mist) 0%, var(--sky) 30%, var(--sky) 100%); }
.how-head { max-width: 900px; }
.how-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 4vw, 64px); }
.steps { list-style: none; margin: 0; padding: 0; }
.step { min-height: 92svh; display: flex; flex-direction: column; justify-content: center; max-width: 30rem; opacity: 0.32; transition: opacity 600ms ease; }
.step.is-active { opacity: 1; }
.step-tag { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 0.875rem; font-weight: 500; color: var(--moss-soft); }
.step-tag span { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 1px solid rgba(30, 42, 35, 0.25); font: 500 0.75rem/1 var(--f-mono); }
.step.is-active .step-tag span { background: var(--moss); border-color: var(--moss); color: var(--paper); }
.step h3 { margin: 18px 0 0; font: 500 clamp(1.75rem, 2.6vw, 2.5rem)/1.08 var(--f-sans); letter-spacing: -0.035em; text-wrap: balance; }
.step-body { margin: 16px 0 0; font-size: 1.0625rem; line-height: 1.55; color: var(--moss-soft); }
.step-num { margin: 28px 0 0; display: flex; align-items: baseline; gap: 12px; padding-top: 18px; border-top: 1px solid rgba(30, 42, 35, 0.14); }
.step-num b { font: 500 clamp(2.75rem, 4.4vw, 4rem)/0.9 var(--f-mono); letter-spacing: -0.07em; }
.step-num span { font-size: 0.875rem; color: var(--moss-soft); }

.how-stage { position: sticky; top: 0; height: 100svh; display: flex; align-items: center; }
.how-canvas { position: relative; width: 100%; height: min(78svh, 760px); border-radius: 10px; overflow: hidden; background: #2A332E; }
.how-canvas canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.how-fallback { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Photo stage: each shot is placed with a transform from its natural size; the canvas draws light on top. */
.how-shot { position: absolute; left: 0; top: 0; max-width: none; transform-origin: 0 0; will-change: transform, opacity; user-select: none; -webkit-user-drag: none; pointer-events: none; }
.how-fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.how-progress { position: absolute; right: 18px; top: 50%; transform: translateY(-50%); display: grid; gap: 8px; }
.how-progress span { width: 4px; height: 22px; border-radius: 2px; background: rgba(30, 42, 35, 0.16); transition: background-color 400ms ease, height 500ms var(--ease); }
.how-progress span.is-on { background: var(--moss); height: 34px; }

@media (max-width: 900px) {
  .how-grid { grid-template-columns: minmax(0, 1fr); }
  .how-stage { order: -1; top: 64px; height: auto; padding: 8px 0; z-index: 2; background: var(--sky); }
  .how-canvas { height: 44svh; }
  .how-progress { right: 10px; }
  .step { min-height: 100svh; justify-content: flex-end; padding-bottom: 10svh; }
}

/* ------------------------------------------------------------------ Hero to "Jak to działa": the fog rolls in
   As the hero scrolls away the photo blurs, lightens and loses colour, the grass rises past the camera,
   and the fog layer (in the next section's colours) covers it. The next section starts transparent. */
.layer-plate picture { transform: scale(calc(1 + var(--t) * 0.08)); filter: blur(calc(var(--t) * 16px)) brightness(calc(1 + var(--t) * 0.22)) saturate(calc(1 - var(--t) * 0.5)); }
.layer-fg picture { transform: translateY(calc(var(--t) * -22%)) scale(calc(1 + var(--t) * 0.12)); filter: blur(calc(var(--t) * 6px)); opacity: calc(1 - var(--t) * 1.3); }
.layer-sun { opacity: calc(0.55 + var(--t) * 0.35); }
.layer-pollen { opacity: calc(1 - var(--t) * 0.6); }
.hero-copy { transform: translateY(calc(var(--t) * -70px)); opacity: calc(1 - var(--t) * 2.2); }
.how { background: linear-gradient(180deg, rgba(226, 235, 238, 0) 0, rgba(226, 235, 238, 0) 18svh, var(--sky) 70svh, var(--sky) 100%); padding-top: clamp(120px, 16vw, 220px); }
@media (prefers-reduced-motion: reduce) {
  /* Keep only the cross-fade into fog; no blur, scale or movement. */
  .layer-plate picture, .layer-fg picture, .hero-copy { transform: none; filter: none; }
}

/* ------------------------------------------------------------------ Kalkulator
   Left: three calm questions. Right: one paper card with the answer; the sun glow grows with the saving. */
.calc { position: relative; padding: clamp(96px, 12vw, 180px) var(--gutter) clamp(96px, 12vw, 160px); background: linear-gradient(180deg, var(--sky) 0%, var(--mist) 40%); }
.calc-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 6vw, 112px); align-items: start; max-width: 1360px; }
.calc-lead { margin: 20px 0 0; max-width: 34ch; font-size: 1.0625rem; color: var(--moss-soft); }
.calc-fields { margin-top: clamp(36px, 4vw, 56px); display: grid; gap: 30px; }

.field { margin: 0; padding: 0; border: 0; min-width: 0; }
.field legend, .field-head label { padding: 0; font-size: 0.9375rem; font-weight: 500; }
.field legend { margin-bottom: 12px; }
.field-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 14px; }
.field-head output { font: 500 1.375rem/1 var(--f-mono); letter-spacing: -0.04em; }

/* Range: hairline track that fills in moss, a paper thumb with a soft shadow. */
.range { --p: 37.5%; -webkit-appearance: none; appearance: none; width: 100%; height: 28px; margin: 0; background: transparent; cursor: pointer; touch-action: pan-y; }
.range::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--moss) var(--p), rgba(30, 42, 35, 0.14) var(--p)); }
.range::-moz-range-track { height: 4px; border-radius: 2px; background: rgba(30, 42, 35, 0.14); }
.range::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--moss); }
.range::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 28px; margin-top: -12px; border-radius: 50%; background: var(--paper); border: 1px solid rgba(30, 42, 35, 0.18); box-shadow: 0 2px 8px rgba(30, 42, 35, 0.16); transition: transform 200ms var(--ease); }
.range::-moz-range-thumb { width: 28px; height: 28px; border-radius: 50%; background: var(--paper); border: 1px solid rgba(30, 42, 35, 0.18); box-shadow: 0 2px 8px rgba(30, 42, 35, 0.16); }
.range:active::-webkit-slider-thumb { transform: scale(1.1); }
.range:focus-visible { outline: none; }
.range:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--moss); outline-offset: 3px; }
.range:focus-visible::-moz-range-thumb { outline: 2px solid var(--moss); outline-offset: 3px; }

/* Segmented control: real radios, a moss chip marks the choice. */
.seg { display: flex; padding: 4px; gap: 4px; border-radius: 16px; background: rgba(30, 42, 35, 0.06); }
.seg label { flex: 1; position: relative; min-width: 0; }
.seg input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.seg span { display: grid; place-items: center; height: 42px; padding: 0 8px; border-radius: 12px; font-size: 0.9375rem; font-weight: 500; color: var(--moss-soft); transition: background-color 250ms ease, color 250ms ease, transform 200ms var(--ease); white-space: nowrap; }
.seg label:hover span { color: var(--moss); }
.seg input:active + span { transform: scale(0.97); }
.seg input:checked + span { background: var(--moss); color: var(--paper); }
.seg input:focus-visible + span { outline: 2px solid var(--moss); outline-offset: 2px; }

/* Switch */
.switch { display: flex; align-items: center; gap: 14px; cursor: pointer; font-size: 0.9375rem; font-weight: 500; position: relative; }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch-track { position: relative; flex: none; width: 50px; height: 30px; border-radius: 15px; background: rgba(30, 42, 35, 0.16); transition: background-color 250ms ease; }
.switch-track::after { content: ""; position: absolute; left: 3px; top: 3px; width: 24px; height: 24px; border-radius: 50%; background: var(--paper); box-shadow: 0 1px 4px rgba(30, 42, 35, 0.2); transition: transform 350ms var(--ease); }
.switch input:checked + .switch-track { background: var(--moss); }
.switch input:checked + .switch-track::after { transform: translateX(20px); }
.switch input:focus-visible + .switch-track { outline: 2px solid var(--moss); outline-offset: 3px; }

/* Result card */
.calc-result { position: relative; overflow: hidden; padding: clamp(28px, 3.4vw, 48px); border-radius: 10px; background: var(--paper); border: 1px solid var(--line); isolation: isolate; }
.calc-glow { position: absolute; z-index: -1; right: -18%; top: -38%; width: 80%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(246, 237, 203, 1) 0%, rgba(246, 237, 203, 0.6) 40%, rgba(246, 237, 203, 0) 70%); transform: scale(calc(0.6 + var(--g, 0) * 0.7)); opacity: calc(0.35 + var(--g, 0) * 0.65); }
.r-kicker { margin: 0; font-size: 0.9375rem; font-weight: 500; color: var(--moss-soft); }
.r-big { margin: 10px 0 0; display: flex; align-items: baseline; gap: 10px; font: 500 clamp(3.5rem, 7vw, 6.25rem)/0.9 var(--f-mono); letter-spacing: -0.075em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.r-big small { font: 500 1.25rem/1 var(--f-sans); letter-spacing: 0; color: var(--moss-soft); }

.r-bars { margin-top: clamp(28px, 3vw, 40px); display: grid; gap: 18px; }
.r-bar-head { display: flex; justify-content: space-between; gap: 16px; font-size: 0.9375rem; color: var(--moss-soft); margin-bottom: 8px; }
.r-bar-head b { font: 500 0.9375rem/1.5 var(--f-mono); color: var(--moss); font-variant-numeric: tabular-nums; white-space: nowrap; }
.r-track { height: 10px; border-radius: 5px; background: rgba(30, 42, 35, 0.07); overflow: hidden; }
.r-track i { display: block; height: 100%; border-radius: 5px; background: rgba(30, 42, 35, 0.32); transform-origin: left; transform: scaleX(var(--w, 0)); }
.js .r-track i { transform: scaleX(0); } /* without JS the default answer stays printed in the HTML */
.is-new .r-track i { background: var(--moss); }

.r-facts { margin: 28px 0 0; display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); }
.r-facts div { padding: 16px 0 0; }
.r-facts div + div { padding-left: 20px; border-left: 1px solid var(--line); margin-left: 0; }
.r-facts div:first-child { padding-right: 20px; }
.r-facts dt { font-size: 0.8125rem; color: var(--moss-soft); }
.r-facts dd { margin: 6px 0 0; font: 500 1.625rem/1 var(--f-mono); letter-spacing: -0.05em; font-variant-numeric: tabular-nums; }

.r-how { margin-top: 24px; border-top: 1px solid var(--line); padding-top: 14px; font-size: 0.875rem; color: var(--moss-soft); }
.r-how summary { cursor: pointer; font-weight: 500; color: var(--moss); list-style: none; display: inline-flex; align-items: center; gap: 8px; }
.r-how summary::-webkit-details-marker { display: none; }
.r-how summary::after { content: ""; width: 7px; height: 7px; margin-top: -3px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); transition: transform 300ms var(--ease); }
.r-how[open] summary::after { transform: translateY(3px) rotate(-135deg); }
.r-how ul { margin: 12px 0 0; padding-left: 18px; display: grid; gap: 6px; line-height: 1.45; }
.r-cta { margin-top: 28px; }

@media (max-width: 900px) {
  .calc-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 420px) {
  .seg span { font-size: 0.875rem; padding: 0 4px; }
  .r-cta { width: 100%; }
}

/* ------------------------------------------------------------------ Dotacje
   The daylight band: mist warms into dawn. Three editorial rows divided by hairlines, no cards. */
.grants { padding: clamp(96px, 12vw, 170px) var(--gutter) clamp(96px, 12vw, 160px); background: linear-gradient(180deg, var(--mist) 0%, color-mix(in oklab, var(--dawn) 62%, var(--mist)) 60%, color-mix(in oklab, var(--dawn) 62%, var(--mist)) 100%); }
.grants-head { max-width: 1000px; }
.eyebrow { margin: 0 0 18px; font: 500 0.8125rem/1 var(--f-mono); letter-spacing: 0.02em; color: var(--moss-soft); }
.grant-list { list-style: none; margin: clamp(48px, 6vw, 88px) 0 0; padding: 0; border-top: 1px solid rgba(30, 42, 35, 0.16); }
.grant { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 5fr) minmax(0, 3fr); gap: clamp(20px, 3vw, 48px); align-items: start; padding: clamp(28px, 3vw, 40px) 0; border-bottom: 1px solid rgba(30, 42, 35, 0.16); }
.g-num { margin: 0; display: flex; align-items: baseline; gap: 8px; font: 500 clamp(2.75rem, 5.4vw, 5rem)/0.9 var(--f-mono); letter-spacing: -0.07em; white-space: nowrap; }
.g-num small { font: 500 1rem/1 var(--f-sans); letter-spacing: 0; color: var(--moss-soft); }
.g-body h3 { margin: 4px 0 0; font: 500 clamp(1.375rem, 1.9vw, 1.75rem)/1.15 var(--f-sans); letter-spacing: -0.03em; }
.g-body p { margin: 12px 0 0; max-width: 46ch; font-size: 1rem; line-height: 1.55; color: var(--moss-soft); }
.g-tags { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.g-tags li { padding: 7px 12px; border-radius: 12px; border: 1px solid rgba(30, 42, 35, 0.16); font-size: 0.8125rem; font-weight: 500; white-space: nowrap; }
.grants-foot { margin-top: clamp(36px, 4vw, 56px); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 40px; }
.grants-foot p { margin: 0; max-width: 44ch; font-size: clamp(1.125rem, 1.5vw, 1.375rem); line-height: 1.4; font-weight: 500; letter-spacing: -0.015em; }

@media (max-width: 1000px) {
  .grant { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .g-tags { justify-content: flex-start; margin-top: 4px; }
}

/* Rows settle in one after another as the list arrives. */
@media (prefers-reduced-motion: no-preference) {
  .js .grant { opacity: 0; transform: translateY(24px); transition: opacity 900ms var(--ease), transform 1100ms var(--ease); transition-delay: calc(var(--i) * 120ms); }
  .js .grant-list.is-in .grant { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------------ Proces
   Still on the daylight band. One hairline runs under four steps; a sun-coloured line fills it with scroll. */
.process { --band: color-mix(in oklab, var(--dawn) 62%, var(--mist)); padding: clamp(40px, 6vw, 80px) var(--gutter) clamp(96px, 12vw, 160px); background: linear-gradient(180deg, var(--band) 0%, var(--mist) 100%); }
.process-head { max-width: 900px; }
.process-track { position: relative; height: 2px; margin-top: clamp(48px, 6vw, 88px); background: rgba(30, 42, 35, 0.14); border-radius: 1px; }
.process-track i { position: absolute; inset: 0; background: var(--moss); border-radius: 1px; transform-origin: left; transform: scaleX(var(--pp, 0)); }
.process-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(20px, 3vw, 48px); }
.process-list li { position: relative; padding-top: 34px; }
.p-dot { position: absolute; top: -7px; left: 0; width: 12px; height: 12px; border-radius: 50%; background: var(--mist); border: 1.5px solid rgba(30, 42, 35, 0.3); transition: background-color 400ms ease, border-color 400ms ease, box-shadow 600ms var(--ease); }
.process-list li.is-on .p-dot { background: var(--sun); border-color: var(--sun); box-shadow: 0 0 0 6px rgba(233, 180, 76, 0.18); }
.p-when { margin: 0; font: 500 0.8125rem/1 var(--f-mono); color: var(--moss-soft); }
.process-list h3 { margin: 12px 0 0; font: 500 clamp(1.25rem, 1.6vw, 1.5rem)/1.2 var(--f-sans); letter-spacing: -0.03em; }
.process-list li > p:last-child { margin: 10px 0 0; font-size: 0.9375rem; line-height: 1.55; color: var(--moss-soft); max-width: 32ch; }

@media (max-width: 900px) {
  .process-track { display: none; }
  .process-list { grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: 40px; border-left: 2px solid rgba(30, 42, 35, 0.14); }
  .process-list li { padding: 0 0 36px 28px; }
  .process-list li:last-child { padding-bottom: 0; }
  .p-dot { top: 0; left: -7px; }
}

/* ------------------------------------------------------------------ Kontakt */
.contact { padding: clamp(96px, 12vw, 160px) var(--gutter); background: var(--mist); }
.contact-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 6vw, 112px); align-items: start; max-width: 1360px; }
.contact-lead { margin: 20px 0 0; max-width: 36ch; font-size: 1.0625rem; color: var(--moss-soft); }
.contact-facts { margin: clamp(32px, 4vw, 48px) 0 0; border-top: 1px solid var(--line); }
.contact-facts div { display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.contact-facts dt { color: var(--moss-soft); font-size: 0.9375rem; }
.contact-facts dd { margin: 0; font-weight: 500; text-align: right; }
.contact-facts a { text-decoration: none; font: 500 1.125rem/1.3 var(--f-mono); letter-spacing: -0.03em; }
.contact-facts a:hover { text-decoration: underline; }

.contact-form { position: relative; display: grid; gap: 22px; padding: clamp(24px, 3.4vw, 44px); border-radius: 10px; background: var(--paper); border: 1px solid var(--line); }
.c-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.c-field { margin: 0; padding: 0; border: 0; min-width: 0; display: grid; gap: 8px; }
.c-field label, .c-field legend { padding: 0; font-size: 0.9375rem; font-weight: 500; }
.c-field legend { margin-bottom: 10px; }
.c-opt { font-weight: 400; color: var(--moss-soft); }
.c-field input, .c-field textarea {
  width: 100%; min-width: 0; padding: 13px 14px; border-radius: 12px; border: 1px solid rgba(30, 42, 35, 0.18); background: var(--mist);
  font: 400 1rem/1.4 var(--f-sans); color: var(--moss); transition: border-color 200ms ease, background-color 200ms ease, box-shadow 200ms ease;
}
.c-field textarea { resize: vertical; min-height: 92px; }
.c-field input::placeholder, .c-field textarea::placeholder { color: rgba(74, 87, 78, 0.6); }
.c-field input:hover, .c-field textarea:hover { border-color: rgba(30, 42, 35, 0.32); }
.c-field input:focus, .c-field textarea:focus { outline: none; background: #fff; border-color: var(--moss); box-shadow: 0 0 0 3px rgba(30, 42, 35, 0.1); }
.c-field input[aria-invalid="true"] { border-color: #A04A2E; }
.c-err { margin: 0; font-size: 0.8125rem; color: #A04A2E; }
.c-err[hidden] { display: none; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips label { position: relative; }
.chips input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.chips span { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border-radius: 14px; border: 1px solid rgba(30, 42, 35, 0.18); font-size: 0.9375rem; font-weight: 500; transition: background-color 250ms ease, color 250ms ease, border-color 250ms ease, transform 200ms var(--ease); }
.chips input:active + span { transform: scale(0.97); }
.chips input:checked + span { background: var(--moss); border-color: var(--moss); color: var(--paper); }
.chips input:focus-visible + span { outline: 2px solid var(--moss); outline-offset: 2px; }

.c-attach { display: flex; gap: 12px; align-items: flex-start; margin: 0; padding: 14px 16px; border-radius: 12px; background: color-mix(in oklab, var(--dawn) 70%, var(--paper)); font-size: 0.875rem; line-height: 1.45; }
.c-attach[hidden] { display: none; }
.c-attach b { font-weight: 600; }
.c-attach-dot { flex: none; width: 10px; height: 10px; margin-top: 5px; border-radius: 50%; background: var(--sun); }

.c-consent { display: flex; gap: 12px; align-items: flex-start; font-size: 0.875rem; line-height: 1.45; color: var(--moss-soft); cursor: pointer; position: relative; }
.c-consent input { position: absolute; opacity: 0; width: 22px; height: 22px; margin: 0; }
.c-box { flex: none; position: relative; width: 22px; height: 22px; border-radius: 7px; border: 1.5px solid rgba(30, 42, 35, 0.3); background: var(--paper); transition: background-color 200ms ease, border-color 200ms ease; }
.c-box::after { content: ""; position: absolute; left: 6.5px; top: 2.5px; width: 5px; height: 10px; border: solid var(--paper); border-width: 0 2px 2px 0; transform: rotate(45deg) scale(0.6); opacity: 0; transition: opacity 150ms ease, transform 300ms var(--ease); }
.c-consent input:checked + .c-box { background: var(--moss); border-color: var(--moss); }
.c-consent input:checked + .c-box::after { opacity: 1; transform: rotate(45deg); }
.c-consent input:focus-visible + .c-box { outline: 2px solid var(--moss); outline-offset: 3px; }
.c-consent input[aria-invalid="true"] + .c-box { border-color: #A04A2E; }
.c-submit { justify-self: start; border: 0; cursor: pointer; }

.c-done { position: absolute; inset: 0; z-index: 2; display: grid; align-content: center; gap: 10px; padding: clamp(24px, 4vw, 56px); border-radius: 10px; background: var(--paper); outline: none; }
.c-done[hidden] { display: none; }
.c-done p { margin: 0; max-width: 36ch; color: var(--moss-soft); }
.c-done-title { font: 500 clamp(1.75rem, 3vw, 2.5rem)/1.1 var(--f-sans); letter-spacing: -0.035em; color: var(--moss) !important; }
@media (prefers-reduced-motion: no-preference) { .c-done:not([hidden]) { animation: done-in 600ms var(--ease); } }
@keyframes done-in { from { opacity: 0; transform: scale(0.98); } }

@media (max-width: 900px) { .contact-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 520px) { .c-row { grid-template-columns: minmax(0, 1fr); } .c-submit { width: 100%; } }

/* ------------------------------------------------------------------ Źródła */
.sources { padding: clamp(72px, 9vw, 128px) var(--gutter) clamp(72px, 9vw, 120px); background: var(--mist); border-top: 1px solid var(--line); }
.sources-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 112px); max-width: 1360px; }
.sources-title { margin: 0; font: 500 clamp(1.75rem, 2.8vw, 2.5rem)/1.05 var(--f-sans); letter-spacing: -0.04em; }
.sources-lead { margin: 16px 0 0; max-width: 34ch; font-size: 0.9375rem; color: var(--moss-soft); }
.source-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.source-list li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; padding: 16px 12px 16px 0; border-bottom: 1px solid var(--line); border-radius: 8px; scroll-margin-top: 120px; transition: background-color 600ms ease; }
.source-list li:target { background: color-mix(in oklab, var(--dawn) 70%, var(--mist)); }
.s-n { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 1px solid rgba(30, 42, 35, 0.25); font: 500 0.75rem/1 var(--f-mono); }
.source-list li:target .s-n { background: var(--moss); border-color: var(--moss); color: var(--paper); }
.source-list p { margin: 3px 0 6px; font-size: 0.9375rem; line-height: 1.45; }
.source-list a { display: inline-block; margin-right: 14px; font: 400 0.8125rem/1.6 var(--f-mono); color: var(--moss-soft); text-underline-offset: 3px; }
.source-list a:hover { color: var(--moss); }
.source-list a::after { content: " ↗"; }
.sources-note { margin: 36px 0 0; max-width: 72ch; font-size: 0.8125rem; line-height: 1.5; color: var(--moss-soft); }
@media (max-width: 900px) { .sources-grid { grid-template-columns: minmax(0, 1fr); } }

/* ------------------------------------------------------------------ Stopka: dusk */
.footer { padding: clamp(80px, 10vw, 140px) var(--gutter) 28px; background: radial-gradient(120% 80% at 85% 0%, #2F3A2F 0%, var(--moss) 55%, #161E19 100%); color: var(--mist); }
.footer a { color: inherit; }
.footer-top { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 32px; padding-bottom: clamp(56px, 7vw, 96px); border-bottom: 1px solid rgba(238, 241, 236, 0.14); }
.footer-claim { margin: 0; font: 500 clamp(3.5rem, 9vw, 8.5rem)/0.88 var(--f-sans); letter-spacing: -0.055em; }
.pill-sun { background: var(--sun); color: var(--moss); }
.pill-sun:hover { background: #F0C266; }
.footer-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 5fr) minmax(0, 3fr); gap: 32px; padding: 40px 0; }
.footer .logo path { stroke: var(--mist); }
.footer-nav { display: grid; grid-template-columns: repeat(2, max-content); gap: 10px 40px; font-size: 0.9375rem; }
.footer-nav a, .footer-base a { text-decoration: none; opacity: 0.8; transition: opacity 200ms ease; }
.footer-nav a:hover, .footer-base a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 3px; }
.footer-contact { margin: 0; font-size: 0.9375rem; line-height: 1.7; color: rgba(238, 241, 236, 0.75); }
.footer-contact a { font: 500 1.125rem/1.6 var(--f-mono); letter-spacing: -0.03em; color: var(--mist); text-decoration: none; }
.footer-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 32px; padding-top: 24px; border-top: 1px solid rgba(238, 241, 236, 0.14); font-size: 0.8125rem; color: rgba(238, 241, 236, 0.6); }
.footer-base p { margin: 0; }
@media (max-width: 900px) { .footer-grid { grid-template-columns: minmax(0, 1fr); } }
.footer :focus-visible { outline-color: var(--sun); }
.footer .pill-sun { color: var(--moss); }
.footer-grid { align-items: start; } .footer-grid .logo { margin-top: -4px; }

/* Without JavaScript nothing fades the fixed photo away, so it scrolls with the hero instead,
   and every step reads at full strength. */
html:not(.js) .hero { position: relative; }
html:not(.js) .hero-stage { position: absolute; }
html:not(.js) .step { opacity: 1; }
html:not(.js) .how { background: var(--sky); }