/* ---- Self-hosted Area Normal (full weight range: Thin → Black) ----
   WOFF2 only: the .otf originals are ~2.4x larger and every engine that
   can run this page has supported WOFF2 since 2016. Regenerate with
   `npm run build:fonts` after replacing an .otf. */
@font-face { font-family: "Area Normal"; font-weight: 100; font-style: normal; font-display: swap; src: url("fonts/AreaNormal-Thin.woff2") format("woff2"); }
@font-face { font-family: "Area Normal"; font-weight: 400; font-style: normal; font-display: swap; src: url("fonts/AreaNormal-Regular.woff2") format("woff2"); }
@font-face { font-family: "Area Normal"; font-weight: 500; font-style: normal; font-display: swap; src: url("fonts/AreaNormal-Regular.woff2") format("woff2"); }
@font-face { font-family: "Area Normal"; font-weight: 600; font-style: normal; font-display: swap; src: url("fonts/AreaNormal-SemiBold.woff2") format("woff2"); }
@font-face { font-family: "Area Normal"; font-weight: 700; font-style: normal; font-display: swap; src: url("fonts/AreaNormal-Bold.woff2") format("woff2"); }
@font-face { font-family: "Area Normal"; font-weight: 800; font-style: normal; font-display: swap; src: url("fonts/AreaNormal-ExtraBold.woff2") format("woff2"); }
@font-face { font-family: "Area Normal"; font-weight: 900; font-style: normal; font-display: swap; src: url("fonts/AreaNormal-Black.woff2") format("woff2"); }

/* ============================================================
   G – Clearance — 1:1 recreation of Figma node 446-36
   ("Desktop - 12", file yLTMiw5HP7MtcRyVh0i224)

   Built on the exact 1920 × 6061 canvas using the design's
   absolute coordinates, then uniformly scaled to the viewport
   width so proportions stay pixel-identical at every size.
   ============================================================ */

:root {
  --ink:    #1f1f1f;
  --cream:  #eae8e6;
  --mint:   #dce5dc;
  --green:  #65b924;
  --lime:   #96c80c;
  --forest: #119f51;

  /* gradient angles taken verbatim from the Figma fills */
  --grad-card: linear-gradient(259.1013deg, #96c80c 0.21238%, #119f51 101.2%);
  --grad-oz:   linear-gradient(237.0233deg, #96c80c 0.21238%, #119f51 101.2%);
  --grad-opr:  linear-gradient(100.0867deg, #96c80c 2.0984%,  #119f51 91.44%);
  --grad-spr:  linear-gradient(98.8941deg,  #96c80c 2.0984%,  #119f51 91.44%);
  --grad-pill: linear-gradient(109.8944deg, #96c80c 2.0984%,  #119f51 91.44%);
  --grad-btn:  linear-gradient(120deg, #96c80c 2%, #119f51 92%);

  --font: "Area Normal", "Hanken Grotesk", system-ui, sans-serif;
  --s: 1;                    /* canvas scale factor, set by JS */
  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-soft: cubic-bezier(.16, .84, .44, 1);
}

/* registered so the before/after split can be tweened by CSS */
@property --p { syntax: "<percentage>"; inherits: true; initial-value: 50%; }

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }
html.js { scroll-behavior: auto; }   /* main.js eases anchor jumps itself */

body {
  background: #fff;
  font-family: var(--font);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; background: none; border: 0; cursor: pointer; color: inherit; }

/* ============================================================
   SCALED CANVAS
   ============================================================ */
.scroll-spacer { width: 100%; height: 0; pointer-events: none; }

.wrap { width: 100%; overflow: hidden; }
/* smooth-scroll mode: the wrap is pinned and the stage is translated */
html.smooth .wrap { position: fixed; inset: 0; height: 100vh; }

.stage {
  position: relative;
  width: 1920px;
  height: 6061px;
  transform: scale(var(--s));
  transform-origin: top left;
  backface-visibility: hidden;
  /* page fill: white base + the soft vertical banding from the design */
  background:
    linear-gradient(180deg,
      rgba(220, 229, 220, .6) 0%,
      rgba(241, 246, 241, .48) 23%,
      rgba(220, 229, 220, .6) 43.81%,
      rgba(241, 246, 241, .48) 61.538%,
      rgba(220, 229, 220, .6) 79.327%,
      rgba(241, 246, 241, .48) 100%),
    #fff;
}

/* ---- primitives ---- */
.abs { position: absolute; }
img.abs, svg.abs, .abs > img { display: block; }
.frame { position: absolute; left: 0; width: 1920px; }

/* stacking, exactly as layered in Figma */
#poznaj      { z-index: 1; }
.serpentyna  { z-index: 2; }
#hub, #firma, #uslugi, #mieszkania { z-index: 3; }
#footer      { z-index: 4; }

/* the two big decorative curves */
.serpentyna  { left: -2790.3px; top: 365.5px; width: 5144.38px; height: 3225.01px; pointer-events: none; overflow: visible; will-change: transform; }
.serpentyna3 { left: -688.9px;  top: -183.7px; width: 3299.16px; height: 2657.42px; pointer-events: none; overflow: visible; z-index: 2; }

/* soft white bloom behind the hero and the "poznaj nas" portrait */
.glow { width: 2872px; height: 2972px; pointer-events: none; z-index: 0; }
.glow--hub    { left: -1143px; top: -1019px; }
.glow--poznaj { left: -1470px; top: -691px; }

/* ------------------------------------------------------------
   LIQUID GLASS
   The two rounded panels carry Figma's Glass material. Figma's
   codegen exports them as `rgba(0,0,0,0)` and drops the material
   entirely, so this is rebuilt from the design's own parameters:

     Light  -45° @ 80%   → highlight bottom-right, shadow top-left
     Depth  27           → 27px bevel falloff on the shadow side
     Frost  65           → 27px backdrop blur (σ solved from the render)
     Refraction 65 / Dispersion 62 / Splay 54

   Measured off the Figma render: the serpentyna's edge goes from a
   4px transition outside the panel to a 60px ramp inside. Solving
   the Gaussian against that profile gives σ = 27.2 (predicts 236
   and 137 where the render reads 237 and 137). The rim is a 1px
   specular line, −9/255 along the top-left and +5/255 bottom-right.

   Refraction/dispersion displace the backdrop too, but only within
   the rim, where the frost already dominates — so the bevel below
   stands in for them rather than an SVG displacement map (which
   would be Chrome-only via `backdrop-filter: url()`).
   ------------------------------------------------------------ */
.panel {
  border-radius: 112px;
  -webkit-backdrop-filter: blur(27px);
  backdrop-filter: blur(27px);
  box-shadow:
    inset 0 0 0 1.2px rgba(255, 255, 255, .55),          /* specular rim   */
    inset -9px -11px 18px -7px rgba(255, 255, 255, .58), /* lit edge       */
    inset 11px 13px 30px -7px rgba(31, 31, 31, .06);     /* shadow edge    */
}

/* older engines: no frost, but keep the bevel so the panel still reads */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .panel { box-shadow: inset 0 0 46px rgba(31, 31, 31, .035); }
}

/* green eyebrow label: dot at the anchor point, caption 30px to its right */
.label .dot { position: absolute; left: 0; top: 0; width: 19px; height: 19px; border-radius: 50%; background: var(--green); }
.label .txt { position: absolute; left: 30px; top: -2px; font-weight: 800; font-size: 21px; line-height: 1.2; color: var(--green); text-transform: uppercase; white-space: nowrap; }

/* ============================================================
   HERO / HUB — Figma frame "hub"  (0, 0, 1920 × 1116)
   ============================================================ */
#hub { top: 0; height: 1116px; }

.logo { left: 82.89px; top: 31.64px; width: 420px; height: 149.5px; display: block; }
.logo img, .logo span { position: absolute; }
.logo-g  { left: 0;        top: .36px;  width: 172.211px; height: 148.535px; }
.logo-c  { left: 190.11px; top: .36px;  width: 146px;     height: 149px; }
.logo-tm { left: 359.03px; top: 0;      width: 46.405px;  height: 23.209px; }
.logo-t  { left: 356.11px; top: 7.36px; }
.logo-m  { left: 380.11px; top: 7.36px; }
.logo-t, .logo-m { width: 18.486px; text-align: right; font-weight: 700; font-size: 10.702px; line-height: 1.27; color: var(--cream); text-transform: uppercase; }

.hero-num-pill { left: 1296px; top: 32px; width: 206.891px; height: 52.737px; border: 2px solid var(--ink); border-radius: 70.316px; }
.hero-num-pill span { position: absolute; left: 21px; top: 15px; width: 155px; text-align: right; font-weight: 800; font-size: 20.283px; line-height: normal; color: var(--ink); }

.hero-cta { left: 1572.11px; top: 33.35px; width: 267.741px; height: 78.43px; }
.hero-cta-ramka { position: absolute; left: -.99px; top: -1px; width: 269.741px; height: 80.429px; }
.hero-cta-txt { position: absolute; left: 68.97px; top: 13.52px; width: 178.494px; text-align: right; color: var(--ink); }
.hero-cta-txt .l1 { display: block; font-weight: 800; font-size: 20.283px; line-height: normal; margin-bottom: 10.818px; }
.hero-cta-txt .l2 { display: block; font-weight: 500; font-size: 16.227px; line-height: normal; white-space: nowrap; }

.hero-shot { left: 30.5px; top: 408px; width: 1859px; height: 587px; border-radius: 40px; overflow: hidden; }
.hero-shot img { position: absolute; left: .03%; top: -27.75%; width: 100%; height: 176.76%; object-fit: cover; }

.scroll-down { left: 1805px; top: 900px; width: 69px; height: 69px; }
.scroll-down img { width: 100%; height: 100%; }

/* ============================================================
   PRZEDSTAWIENIE FIRMY  (73, 1210, 1770 × 1075)
   ============================================================ */
#firma { left: 73px; top: 1210px; width: 1770px; height: 1075px; }

.firma-l1 { left: 80px; top: 94px; }
.firma-l2 { left: 80px; top: 508px; }

.ozdobnik { left: 993px; top: 309px; width: 355px; height: 87px; border-radius: 17px; background: var(--grad-oz); transform-origin: left center; }

.firma-lead { left: 76px; top: 159px; width: 1286px; font-weight: 600; font-size: 64px; line-height: 1.2; color: var(--ink); }
.firma-lead b  { font-weight: 900; }
.firma-lead .hl { color: #fff; }

.stat { position: absolute; top: 581px; width: 488px; height: 403px; border: 2px solid #edeee7; border-radius: 20px; background: var(--grad-card); overflow: hidden; }
.stat--1 { left: 76px; }
.stat--2 { left: 580px; }
.stat--3 { left: 1085px; }

.stat-face { position: absolute; inset: 0; }
.stat .num { position: absolute; font-weight: 900; font-size: 128px; line-height: 1.2; text-transform: uppercase; color: var(--mint); font-variant-numeric: tabular-nums; }
.stat .lbl { position: absolute; font-weight: 100; font-size: 36px; line-height: 1.2; text-transform: uppercase; color: var(--mint); }
.stat .open { position: absolute; width: 99px; height: 65px; padding: 0; z-index: 3; }
.stat .open img { width: 100%; height: 100%; display: block; }

.stat--1 .num { left: 29px; top: 19.2px;  width: 429px; }
.stat--1 .lbl { left: 29px; top: 167px;   width: 429px; }
.stat--1 .open{ left: 29px; top: 309.86px; }
.stat--2 .num { left: 29px; top: 15.2px;  width: 407px; }
.stat--2 .lbl { left: 27px; top: 166.8px; width: 341px; }
.stat--2 .open{ left: 29px; top: 309.86px; }
.stat--3 .num { left: 32px; top: 13.2px;  width: 301px; color: var(--cream); }
.stat--3 .lbl { left: 42px; top: 166.8px; width: 428px; color: var(--cream); }
.stat--3 .open{ left: 42px; top: 309.86px; }

/* the arrow doubles as a "tell me more" toggle */
.stat-more { position: absolute; inset: 0; padding: 44px 32px 130px; opacity: 0; pointer-events: none; }
.stat-more p { font-weight: 500; font-size: 27px; line-height: 1.32; color: var(--cream); }
.stat .sheen { position: absolute; inset: -40%; pointer-events: none; background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.34) 50%, transparent 62%); transform: translateX(-120%); }

/* ============================================================
   USŁUGI  (0, 2483, 1920 × 995)
   ============================================================ */
#uslugi { top: 2483px; height: 995px; }

.uslugi-l     { left: 159px; top: 223px; }
.uslugi-title { left: 155px; top: 301px; font-weight: 600; font-size: 64px; line-height: 1.2; color: var(--ink); white-space: nowrap; }
/* 496 rather than the design's 495: the longest line measures 495.1px, so a
   single pixel keeps the browser's line breaks identical to the Figma render */
.uslugi-body  { left: 159px; top: 419px; width: 496px; font-weight: 600; font-size: 24px; line-height: 1.2; color: #000; }

.tile { position: absolute; border-radius: 12.215px; overflow: hidden; }
.tile .photo { width: 100%; height: 100%; object-fit: cover; display: block; }
.tile .tile-art { position: absolute; inset: 0; width: 100%; height: 100%; }

.tile--01        { left: 900.92px;  top: 224.22px; width: 279.734px; height: 249.195px; }
.tile--odnowimy  { left: 1192.87px; top: 224.22px; width: 279.734px; height: 338.368px; }
.tile--03        { left: 1487.27px; top: 223px;    width: 279.734px; height: 203px; }
.tile--oproznimy { left: 900.92px;  top: 485.63px; width: 279.734px; height: 338.368px; background: var(--grad-opr); }
.tile--02        { left: 1192.87px; top: 574.8px;  width: 279.734px; height: 249.195px; }
.tile--sprzedamy { left: 1487px;    top: 439px;    width: 280px;     height: 385px;     background: var(--grad-spr); }

.tile--02 .photo { position: absolute; left: .14%; top: -3.89%; width: 100%; height: 168.14%; }

.tile .badge { position: absolute; left: 9.78px; top: 9.78px; width: 52.526px; height: 52.526px; }
.tile .badge img { width: 100%; height: 100%; display: block; }
.tile .badge i { position: absolute; left: 10.8px; top: 12.2px; width: 41.533px; font-style: normal; font-weight: 900; font-size: 24.431px; line-height: 1.2; color: var(--cream); }

.tile .tlabel { position: absolute; font-weight: 900; font-size: 24.431px; line-height: 1.2; color: var(--cream); text-transform: uppercase; white-space: nowrap; }
.tile--odnowimy  .tlabel { left: 20.77px; top: 288.29px; }
.tile--oproznimy .tlabel { left: 20.77px; top: 288.28px; }
.tile--sprzedamy .tlabel { left: 21.03px; top: 334.92px; }

/* diagonal light sweep baked into the "opróżnimy" tile */
.tile--oproznimy .sweep { position: absolute; left: -84.29px; top: 129.76px; width: 325.48px; height: 325.48px; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.tile--oproznimy .sweep::before { content: ""; width: 294.591px; height: 165.707px; border-radius: 54.97px; background: linear-gradient(90deg, rgba(255,255,255,0) 0%, #19a24c 100%); transform: rotate(45deg); }

.tile .tile-ic { position: absolute; }
.ic-truck { left: 21.99px; top: 17.79px; width: 90.394px; height: 62.168px; }
.ic-handshake { left: 21px; top: 14px; width: 70px; height: 70px; }
.ic-handshake img { position: absolute; left: 0; top: 18.75%; width: 100%; height: 68.75%; }

.tile--sprzedamy .ring { position: absolute; }
.ring--sm { left: 166.4px;  top: 276.28px; width: 139.256px; height: 139.256px; }
.ring--lg { left: 140.74px; top: 250.63px; width: 189.339px; height: 189.339px; }

/* ============================================================
   MIESZKANIA / REALIZACJE  (75, 3478, 1770 × 755)
   ============================================================ */
#mieszkania { left: 75px; top: 3478px; width: 1770px; height: 755px; }
.miesz-l { left: 76px; top: 65px; }

.ba { position: absolute; top: 144px; height: 421px; border: 3.66px solid var(--green); border-radius: 18.308px; overflow: hidden; user-select: none; touch-action: pan-y; }
.ba--1 { left: 74px;      width: 530px; }
.ba--2 { left: 619px;     width: 528px; }
.ba--3 { left: 1159.82px; width: 528.179px; }

.ba { --p: 50%; }
.ba img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
/* the "before" frame is full-size and clipped, so neither photo ever squashes */
.ba .before { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--p)) 0 0); }
.ba .line { position: absolute; top: 0; bottom: 0; left: var(--p); width: 3.66px; margin-left: -1.83px; background: var(--green); }
.ba .handle {
  position: absolute; top: 50%; left: var(--p); width: 67.739px; height: 40.277px;
  margin: -20.14px 0 0 -33.87px;
  border: 3.66px solid var(--green); border-radius: 39.362px;
  background: var(--grad-pill); cursor: ew-resize;
  box-shadow: 0 6px 18px rgba(17, 159, 81, .28);
}
.ba .handle img { position: absolute; top: 12.82px; width: 21.054px; height: 14.646px; }
.ba .handle img:first-child { left: 14.65px; transform: scaleX(-1); }
.ba .handle img:last-child  { left: 32.04px; }
.ba .range { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; margin: 0; cursor: ew-resize; }
.ba .range:focus-visible { outline: 3px solid #fff; outline-offset: -6px; }

.flat-title { top: 601px; width: 308px; font-weight: 600; font-size: 36px; line-height: normal; text-transform: uppercase; color: var(--ink); }
.flat-title--1 { left: 76px; }
.flat-title--2 { left: 619px; }
.flat-title--3 { left: 1162px; }

/* ============================================================
   POZNAJ NAS  (0, 4293, 1920 × 1589)
   ============================================================ */
#poznaj { top: 4293px; height: 1589px; }

.poznaj-img { left: 1054px; top: 477px; width: 713px; height: 635px; border-radius: 45px; overflow: hidden; z-index: 1; }
.poznaj-img img { width: 100%; height: 100%; object-fit: contain; }

.poznaj-l     { left: 154.5px; top: 477px; z-index: 3; }
.poznaj-title { left: 151.5px; top: 547px; width: 933px; font-weight: 600; font-size: 64px; line-height: 1.2; color: var(--ink); z-index: 3; }
.poznaj-title .green { color: var(--green); }
.poznaj-body  { left: 154.5px; top: 829.16px; width: 495px; font-weight: 600; font-size: 24px; line-height: 1.2; color: var(--ink); z-index: 3; }
.poznaj-body p + p { margin-top: 28.8px; }

.poznaj-btn { left: 155px; top: 1073px; width: 268px; height: 63px; border: 2px solid var(--ink); border-radius: 40px; z-index: 3; }
.poznaj-btn span { position: absolute; inset: 0; display: grid; place-items: center; font-weight: 800; font-size: 24px; line-height: normal; text-transform: uppercase; color: var(--ink); }

/* ============================================================
   FOOTER  (0, 5639, 1920 × 422)
   ============================================================ */
#footer { top: 5639px; height: 422px; background: var(--ink); }

.foot-cta { left: 81.73px; top: 40px; width: 910.452px; font-weight: 900; font-size: 43.458px; line-height: 1.2; color: var(--cream); }
.foot-cta .lime { color: var(--lime); }

.foot-line  { left: 83px; top: 344px; width: 1757px; height: 1.086px; background: #d9d9d9; border: 0; }
.foot-left  { left: 83px; top: 371.13px; width: 290.084px; font-weight: 500; font-size: 13.037px; line-height: normal; color: var(--cream); }
.foot-right { left: 1553px; top: 371.13px; width: 290.084px; text-align: right; font-weight: 500; font-size: 13.037px; line-height: normal; color: var(--cream); }
.foot-right a { text-decoration: underline; }

.foot-znumer { left: 1599px; top: 43.52px; width: 244px; height: 53px; border: 2px solid var(--cream); border-radius: 38px; }
.foot-znumer .ic  { position: absolute; left: 13px; top: 15px; width: 21.636px; height: 21.636px; }
.foot-znumer .txt { position: absolute; left: 43px; top: 15px; width: 178.494px; text-align: right; font-weight: 800; font-size: 20.283px; line-height: normal; color: var(--cream); }

/* ============================================================
   MOTION
   ============================================================ */

/* --- word-level masked reveals (built by main.js) --- */
.w  { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .14em; margin-bottom: -.14em; }
.wi { display: inline-block; will-change: transform; }
html.js .wi { transform: translate3d(0, 115%, 0) rotate(3deg); opacity: .001; }
html.js .in .wi {
  transform: none; opacity: 1;
  transition: transform .95s var(--ease), opacity .5s linear;
  transition-delay: var(--d, 0s);
}

/* body copy is never word-split — sub-pixel rounding on 30+ inline-blocks
   would shift the line breaks away from the design */
html.js .soft-in { opacity: 0; transform: translate3d(0, 26px, 0); }
html.js .soft-in.in { opacity: 1; transform: none; transition: opacity .9s var(--ease) .1s, transform 1s var(--ease) .1s; }

/* --- generic block reveals --- */
html.js .hero-num-pill,
html.js .hero-cta,
html.js .logo,
html.js .scroll-down,
html.js .poznaj-btn,
html.js .foot-znumer { opacity: 0; transform: translate3d(0, 18px, 0); }
html.js .in.hero-num-pill,
html.js .in.hero-cta,
html.js .in.logo,
html.js .in.scroll-down,
html.js .in.poznaj-btn,
html.js .in.foot-znumer {
  opacity: 1; transform: none;
  transition: opacity .8s var(--ease) var(--d, 0s), transform .9s var(--ease) var(--d, 0s);
}

/* hero photo: unmasks from the centre while the picture settles back to 1:1 */
html.js .hero-shot { clip-path: inset(0 50% 0 50% round 40px); }
html.js .hero-shot img { transform: scale(1.16); }
html.js .hero-shot.in { clip-path: inset(0 0 0 0 round 40px); transition: clip-path 1.5s var(--ease) .15s; }
html.js .hero-shot.in img { transform: scale(1); transition: transform 1.9s var(--ease) .15s; }

/* the green pill behind "nasz koszt!" wipes in from the left */
html.js .ozdobnik { transform: scaleX(0); }
html.js .ozdobnik.in { transform: none; transition: transform 1s var(--ease) .35s; }

/* stat cards rise + settle */
html.js .stat { opacity: 0; transform: translate3d(0, 60px, 0) scale(.965); }
html.js .stat.in { opacity: 1; transform: none; transition: opacity .8s var(--ease) var(--d, 0s), transform 1.05s var(--ease) var(--d, 0s); }
/* once the entrance has landed, hand `transform` over to the pointer tilt */
html.js .stat.settled { transition: transform .45s var(--ease); }
html.js .reveal-tile.settled { transition: clip-path 1.15s var(--ease), transform .45s var(--ease); }
.stat .num, .stat .lbl, .stat .open { transition: opacity .45s ease, transform .45s var(--ease); }
.stat.is-open .stat-face { opacity: 0; transform: translate3d(0, -14px, 0); }
.stat-face { transition: opacity .45s ease, transform .45s var(--ease); }
.stat-more { transform: translate3d(0, 14px, 0); transition: opacity .45s ease, transform .45s var(--ease); }
.stat.is-open .stat-more { opacity: 1; transform: none; pointer-events: auto; }
.stat .open img { transition: transform .55s var(--ease); }
.stat.is-open .open img { transform: rotate(180deg); }
.stat .open:hover img { transform: translateX(6px); }
.stat.is-open .open:hover img { transform: rotate(180deg) translateX(6px); }
.stat:hover .sheen { animation: sheen 1.15s var(--ease-soft); }
@keyframes sheen { to { transform: translateX(120%); } }

/* bento tiles: clip open, artwork drifts back to rest */
html.js .reveal-tile { clip-path: inset(0 0 100% 0 round 12.215px); }
html.js .reveal-tile .photo, html.js .reveal-tile .tile-art { transform: scale(1.14); }
html.js .reveal-tile.in { clip-path: inset(0 0 0 0 round 12.215px); transition: clip-path 1.15s var(--ease) var(--d, 0s); }
html.js .reveal-tile.in .photo, html.js .reveal-tile.in .tile-art { transform: none; transition: transform 1.4s var(--ease) var(--d, 0s); }

.tile .photo, .tile .tile-art { transition: transform .9s var(--ease); }
.tile:hover .photo, .tile:hover .tile-art { transform: scale(1.07); }
.tile .tile-ic { transition: transform .7s var(--ease); }
.tile:hover .tile-ic { transform: translateY(-5px) rotate(-4deg); }
.tile .ring { transition: transform 1.1s var(--ease), opacity .6s ease; }
.tile--sprzedamy:hover .ring--sm { transform: scale(1.16); }
.tile--sprzedamy:hover .ring--lg { transform: scale(1.1); }
.tile--oproznimy .sweep { transition: transform 1.1s var(--ease); }
.tile--oproznimy:hover .sweep { transform: translate(26px, -26px); }

/* before / after cards */
html.js .ba { opacity: 0; transform: translate3d(0, 54px, 0); }
html.js .ba.in { opacity: 1; transform: none; transition: opacity .8s var(--ease) var(--d, 0s), transform 1s var(--ease) var(--d, 0s), --p .12s linear; }
.ba { transition: --p .12s linear; }
.ba.is-dragging, html.js .ba.in.is-dragging { transition: none; }
.ba .handle { transition: transform .3s var(--ease), box-shadow .3s ease; }
.ba:hover .handle { transform: scale(1.1); box-shadow: 0 10px 26px rgba(17, 159, 81, .4); }
.ba.is-dragging .handle { transform: scale(1.18); }
.ba::after { content: ""; position: absolute; inset: 0; border-radius: 14.6px; box-shadow: 0 0 0 0 rgba(101, 185, 36, 0); transition: box-shadow .45s ease; pointer-events: none; }
.ba:hover::after { box-shadow: 0 0 0 6px rgba(101, 185, 36, .14); }

/* poznaj-nas portrait */
html.js .poznaj-img { clip-path: inset(0 0 100% 0 round 45px); }
html.js .poznaj-img img { transform: scale(1.12); }
html.js .poznaj-img.in { clip-path: inset(0 0 0 0 round 45px); transition: clip-path 1.25s var(--ease); }
html.js .poznaj-img.in img { transform: none; transition: transform 1.6s var(--ease); }

/* the decorative curves draw themselves as you scroll past */
html.js .serp-path { stroke-dasharray: var(--len) var(--len); stroke-dashoffset: var(--len); }

/* hover physics */
.magnetic { will-change: transform; }
.hero-num-pill, .hero-cta, .poznaj-btn, .foot-znumer, .scroll-down { transition: box-shadow .35s ease, background-color .35s ease; }
.hero-num-pill:hover, .foot-znumer:hover { box-shadow: 0 14px 30px -16px rgba(0, 0, 0, .45); }
.poznaj-btn span { transition: color .35s ease; }
.poznaj-btn::before { content: ""; position: absolute; inset: -2px; border-radius: 40px; background: var(--grad-btn); opacity: 0; transition: opacity .35s ease; }
.poznaj-btn:hover::before { opacity: 1; }
.poznaj-btn:hover span { color: #fff; }
.foot-znumer:hover { background: rgba(255, 255, 255, .08); }
.hero-cta-ramka { transition: filter .35s ease; }
.hero-cta:hover .hero-cta-ramka { filter: drop-shadow(0 12px 22px rgba(0, 0, 0, .25)); }
.scroll-down img { transition: transform .5s var(--ease); }
.scroll-down:hover img { transform: translateY(4px); }
.logo img { transition: transform .6s var(--ease); }
.logo:hover .logo-g { transform: translateX(-4px); }
.logo:hover .logo-c { transform: translateX(4px) rotate(6deg); }

/* the arrow keeps nudging until you notice it */
html.js .scroll-down.in { animation: bob 2.6s var(--ease-soft) 1.2s infinite; }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(11px); } }

/* ============================================================
   TRAILING CURSOR (pointer-fine only, purely decorative)
   ============================================================ */
.cursor { position: fixed; left: 0; top: 0; z-index: 90; pointer-events: none; opacity: 0; transition: opacity .3s ease; }
.cursor.on { opacity: 1; }
.cursor-dot, .cursor-ring { position: absolute; border-radius: 50%; transform: translate(-50%, -50%); }
.cursor-dot  { width: 6px; height: 6px; background: var(--green); }
.cursor-ring { width: 34px; height: 34px; border: 1.5px solid rgba(101, 185, 36, .55); transition: width .3s var(--ease), height .3s var(--ease), background-color .3s ease, border-color .3s ease; }
.cursor.hot .cursor-ring { width: 62px; height: 62px; background: rgba(101, 185, 36, .12); border-color: rgba(101, 185, 36, .8); }
@media (hover: none), (pointer: coarse) { .cursor { display: none; } }

/* ============================================================
   LEAD / CALLBACK MODAL  (outside the scaled stage → real size)
   ============================================================ */
.lead-modal { position: fixed; inset: 0; z-index: 100; display: none; align-items: center; justify-content: center; padding: 24px; }
.lead-modal.is-open { display: flex; }
.lead-modal__overlay { position: absolute; inset: 0; background: rgba(20, 22, 18, .55); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); animation: leadFade .25s ease; }
.lead-modal__card {
  position: relative; z-index: 1; width: 100%; max-width: 468px;
  background: #fff; border: 2px solid var(--ink); border-radius: 28px;
  padding: 40px 40px 32px; box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .55);
  animation: leadPop .38s var(--ease);
}
@keyframes leadFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes leadPop { from { opacity: 0; transform: translateY(26px) scale(.96); } to { opacity: 1; transform: none; } }

.lead-modal__close { position: absolute; top: 18px; right: 20px; width: 40px; height: 40px; border-radius: 50%; font-size: 30px; line-height: 1; transition: background-color .2s ease, transform .3s var(--ease); }
.lead-modal__close:hover { background: rgba(0, 0, 0, .07); transform: rotate(90deg); }

.lead-modal__eyebrow { display: inline-flex; align-items: center; gap: 12px; font-weight: 800; font-size: 15px; letter-spacing: .02em; text-transform: uppercase; color: var(--green); }
.lead-modal__eyebrow .dot { width: 12px; height: 12px; flex: none; border-radius: 50%; background: var(--green); }
.lead-modal__title { margin-top: 14px; font-weight: 800; font-size: 34px; line-height: 1.08; text-transform: uppercase; color: var(--ink); }
.lead-modal__sub { margin-top: 12px; font-weight: 500; font-size: 16px; line-height: 1.45; color: #4a4a46; }

.lead-form { margin-top: 24px; }
.lead-field { display: block; margin-bottom: 16px; }
.lead-field__label { display: block; margin-bottom: 7px; font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: .03em; color: var(--ink); }
.lead-field__label em { font-weight: 500; text-transform: none; color: #8a8a84; font-style: normal; }
.lead-field__input { width: 100%; height: 56px; padding: 0 18px; font-family: inherit; font-size: 17px; color: var(--ink); background: #fff; border: 2px solid #d7d5d1; border-radius: 14px; transition: border-color .2s ease, box-shadow .2s ease; }
.lead-field__input::placeholder { color: #b3b1ac; }
.lead-field__input:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 4px rgba(101, 185, 36, .15); }

.lead-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.lead-submit { width: 100%; height: 60px; margin-top: 6px; font-weight: 800; font-size: 18px; text-transform: uppercase; color: #fff; background: var(--grad-btn); border-radius: 40px; transition: transform .25s var(--ease), box-shadow .25s ease, filter .2s ease; }
.lead-submit:hover { transform: translateY(-2px); box-shadow: 0 16px 30px -14px rgba(17, 159, 81, .65); }
.lead-submit:disabled { filter: grayscale(.4) brightness(.9); cursor: default; transform: none; box-shadow: none; }

.lead-status { min-height: 20px; margin-top: 14px; font-weight: 600; font-size: 15px; color: #4a4a46; }
.lead-status.is-ok  { color: #119f51; }
.lead-status.is-err { color: #c0392b; }
.lead-consent { margin-top: 10px; font-size: 12px; line-height: 1.4; color: #9a988f; }

@media (max-width: 520px) {
  .lead-modal__card { padding: 32px 24px 26px; border-radius: 22px; }
  .lead-modal__title { font-size: 27px; }
}

/* ============================================================
   REDUCED MOTION — everything lands in its final state
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.js .wi,
  html.js .hero-num-pill, html.js .hero-cta, html.js .logo, html.js .scroll-down,
  html.js .poznaj-btn, html.js .foot-znumer,
  html.js .stat, html.js .ba, html.js .ozdobnik,
  html.js .reveal-tile, html.js .reveal-tile > *,
  html.js .hero-shot img, html.js .poznaj-img img {
    opacity: 1 !important; transform: none !important; transition: none !important;
  }
  html.js .hero-shot, html.js .poznaj-img, html.js .reveal-tile { clip-path: none !important; }
  html.js .serp-path { stroke-dasharray: none !important; stroke-dashoffset: 0 !important; }
  html.js .scroll-down.in { animation: none; }
  .cursor { display: none; }
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}