/* ==========================================================================
   SELF-HOSTED FONTS: Outfit & Inter
   Zero external calls to Google Fonts (fonts.googleapis.com / fonts.gstatic.com)
   Full Polish diacritics support (Latin + Latin-Ext)
   ========================================================================== */

/* --- Outfit: 400 (Normal / Body) --- */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/outfit-latin-ext-400-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/outfit-latin-400-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* --- Outfit: 500 (Medium / Nav & Buttons) --- */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/outfit-latin-ext-500-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/outfit-latin-500-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* --- Outfit: 600 (SemiBold / Headings & UI) --- */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/outfit-latin-ext-600-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/outfit-latin-600-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* --- Outfit: 700 (Bold / Display) --- */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/outfit-latin-ext-700-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/outfit-latin-700-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* --- Inter: 400 (Normal) --- */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/inter-latin-ext-400-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/inter-latin-400-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* --- Inter: 500 (Medium) --- */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/inter-latin-ext-500-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/inter-latin-500-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* --- Inter: 600 (SemiBold) --- */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/inter-latin-ext-600-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/inter-latin-600-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* --- Inter: 700 (Bold) --- */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/inter-latin-ext-700-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/inter-latin-700-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* --- Inter: 800 (ExtraBold / Background Display) --- */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/fonts/inter-latin-ext-800-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/fonts/inter-latin-800-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root{
  --orange:#ff6400;
  --ink:#09090b;
  --muted:#747b88;
  --muted2:#9aa1ad;
  --line:#d7dbe1;
  --paper:#fff;
  --radius:12px;
  --max:1280px;

  /* Typografia: Font Families */
  --font-display:"Outfit",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  --font-heading:"Outfit",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  --font-body:"Outfit",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;

    /* Typografia: Desktop Token Scale */
    --type-display:clamp(66px,6.05vw,92px);
    --type-display-lh:0.98;
    --type-display-ls:-0.050em;
    --type-display-weight:750;

    --type-project-h1:clamp(64px,6vw,80px);
    --type-project-h1-lh:1.02;
    --type-project-h1-ls:-0.035em;
    --type-project-h1-weight:600;

    --type-h1:clamp(60px,5.4vw,72px);
    --type-h1-lh:1.04;
    --type-h1-ls:-0.035em;
    --type-h1-weight:600;

    --type-h2:clamp(44px,4.2vw,56px);
    --type-h2-lh:1.04;
    --type-h2-ls:-0.02em;
    --type-h2-weight:600;

    --type-h2-large:clamp(44px,5vw,68px);
    --type-h2-large-lh:1.04;
    --type-h2-large-ls:-0.025em;
    --type-h2-large-weight:600;

    --type-h2-secondary:clamp(38px,3.5vw,46px);
    --type-h2-secondary-lh:1.08;
    --type-h2-secondary-ls:-0.015em;
    --type-h2-secondary-weight:600;

    --type-h3:clamp(26px,2.5vw,28px);
    --type-h3-lh:1.15;
    --type-h3-ls:-0.015em;
    --type-h3-weight:600;

    --type-lead:clamp(18px,1.4vw,20px);
    --type-lead-lh:1.55;

    --type-body:16px;
    --type-body-lh:1.62;

    --type-small:14px;
    --type-small-lh:1.6;

    --type-label:13px;
    --type-label-lh:1.4;
    --type-label-ls:0.1em;
    --type-label-weight:600;
  }
  @media(max-width:900px){
    :root{
      --type-display:clamp(46px,12vw,66px);
      --type-project-h1:clamp(44px,11vw,52px);
      --type-h1:clamp(40px,10vw,48px);
      --type-h2:clamp(38px,9vw,44px);
      --type-h2-large:clamp(42px,10vw,44px);
      --type-h2-secondary:clamp(30px,7vw,34px);
      --type-h3:clamp(24px,6vw,26px);
      --type-lead:18px;
      --type-body:16px;
      --type-small:13px;
      --type-label:12px;
    }
  }
  @media(max-width:480px){
    :root{
      --type-display:clamp(34px,9.5vw,44px);
      --type-project-h1:clamp(30px,8.5vw,40px);
      --type-h1:clamp(30px,8vw,38px);
      --type-h2:clamp(26px,7vw,32px);
      --type-h2-large:clamp(28px,7.5vw,34px);
      --type-h2-secondary:clamp(24px,6vw,28px);
    }
  }
  @media(max-width:600px){
    .home-page .hero h1,
    body.home-page .hero h1{
      font-size:clamp(38px,11.4vw,50px);
      line-height:1.05;
    }
  }
  .section-index{color:var(--orange)}
  *{box-sizing:border-box}
  figure{margin:0}
  html,body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font-body);-webkit-font-smoothing:antialiased}
  body{overflow-x:hidden}
  .wrap{width:min(var(--max),calc(100% - 96px));margin:0 auto}
  header{height:104px;display:grid;grid-template-columns:190px 1fr auto;align-items:center;gap:28px}
  .home-logo{display:inline-flex;align-items:center;position:relative;width:142px;height:47px;flex-shrink:0}
  .logo{display:block;width:142px;height:47px;object-fit:contain}
  .logo-video{display:block;width:142px;height:47px;object-fit:contain;mix-blend-mode:multiply;pointer-events:none;-webkit-user-select:none;user-select:none;background:transparent}
  .logo-video::-webkit-media-controls,.logo-video::-webkit-media-controls-enclosure,.logo-video::-webkit-media-controls-panel,.logo-video::-webkit-media-controls-play-button,.logo-video::-webkit-media-controls-start-playback-button,.logo-video::-webkit-media-controls-overlay-play-button,.logo-video::-webkit-media-controls-overlay-enclosure{display:none!important;opacity:0!important;pointer-events:none!important;-webkit-appearance:none!important;visibility:hidden!important}
  .logo--static-fallback{display:none}
  @media(max-width:1150px){
    .home-logo,.home-logo .logo,.home-logo .logo-video{width:130px;height:43px}
  }
  @media(max-width:820px){
    .home-logo,.home-logo .logo,.home-logo .logo-video{width:118px;height:39px}
  }
  @media(prefers-reduced-motion:reduce){
    .logo-video{display:none!important}
    .logo--static-fallback{display:block!important}
  }
  nav{display:flex;justify-content:center;gap:28px;align-items:center;font-size:17px;font-weight:500;white-space:nowrap}
  nav a{color:var(--ink);text-decoration:none;position:relative;padding:14px 6px;font-size:17px;font-weight:500;min-height:44px;display:inline-flex;align-items:center;perspective:600px;transform-style:preserve-3d;outline:none}
  nav a:focus-visible{outline:2px solid var(--orange);outline-offset:2px;border-radius:4px}
  .nav-flip{position:relative;display:inline-flex;align-items:center;justify-content:center;transform-style:preserve-3d}
  .nav-flip-front{display:inline-block;transform-origin:center bottom;transform:rotateX(0deg);opacity:1;color:var(--ink);transition:transform .38s cubic-bezier(.2,.8,.2,1),opacity .32s ease,color .28s ease;will-change:transform,opacity}
  .nav-flip-back{position:absolute;inset:0;display:inline-flex;align-items:center;justify-content:center;transform-origin:center top;transform:rotateX(90deg);opacity:0;color:var(--orange);transition:transform .38s cubic-bezier(.2,.8,.2,1),opacity .32s ease;pointer-events:none;user-select:none;white-space:nowrap;will-change:transform,opacity}
  nav a:hover .nav-flip-front,nav a:focus-visible .nav-flip-front{transform:rotateX(-90deg);opacity:0}
  nav a:hover .nav-flip-back,nav a:focus-visible .nav-flip-back{transform:rotateX(0deg);opacity:1}
  nav a.active .nav-flip-front{color:#6c7078}
  nav a.active:after{content:"";position:absolute;height:2px;width:28px;left:50%;bottom:4px;transform:translateX(-50%);background:#9aa0aa;border-radius:2px;transition:background .3s ease}
  nav a.active:hover:after,nav a.active:focus-visible:after{background:var(--orange)}
  @media(min-width:1025px){
    nav a.nav-contact{display:none!important}
  }
  .tools{display:flex;align-items:center;gap:20px;font-size:13px;font-weight:600;white-space:nowrap}
  .tools .sep{width:1px;height:30px;background:#cfd3d8}
  .quote{height:52px;padding:0 24px;border:0;border-radius:8px;background:#0b0b0d;color:#fff;font:600 14px/1 var(--font-body);display:inline-flex;align-items:center;gap:18px;text-decoration:none;transition:background .2s ease}
  .quote:hover,.quote:focus-visible{background:#1a1a1f}
  .quote:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
  .hero{position:relative;min-height:784px;padding-top:72px;isolation:isolate}
  .hero::after{display:none}
  /* Subtle 2–3-column echo in the outer left margin, using the same relief.
     Keep the original lighting direction; do not mirror the image. */
  .hero::before{
    content:"";
    position:absolute;
    z-index:0;
    top:0;
    bottom:0;
    left:calc(50% - 50vw);
    width:clamp(0px,calc((100vw - 1280px) / 2 - 56px),280px);
    pointer-events:none;
    opacity:0;
    animation:heroEchoFadeIn 5.2s cubic-bezier(0.16, 1, 0.3, 1) 0.4s forwards;
    background-image:url("assets/cubes-bg.png");
    background-repeat:no-repeat;
    background-position:right bottom;
    background-size:auto calc(100% + 104px);
    -webkit-mask-image:linear-gradient(to right,#000 0%,#000 18%,rgba(0,0,0,.65) 48%,transparent 100%),linear-gradient(to bottom,transparent,#000 8%,#000 88%,transparent);
    mask-image:linear-gradient(to right,#000 0%,#000 18%,rgba(0,0,0,.65) 48%,transparent 100%),linear-gradient(to bottom,transparent,#000 8%,#000 88%,transparent);
    -webkit-mask-composite:source-in;
    mask-composite:intersect;
  }
  @media(max-width:1392px){.hero::before{display:none}}
  /* Background extracted from the approved hero reference. Keep its aspect ratio. */
  .cube-field{
    position:absolute;
    z-index:0;
    top:0;
    bottom:0;
    left:50%;
    width:100vw;
    transform:translateX(-50%);
    pointer-events:none;
    opacity:0;
    animation:heroCubesFadeIn 5.2s cubic-bezier(0.16, 1, 0.3, 1) 0.4s forwards;
    background-image:url("assets/cubes-bg.png");
    background-repeat:no-repeat;
    background-position:right bottom;
    background-size:auto calc(100% + 104px);
    -webkit-mask-image:linear-gradient(to right,transparent,#000 4%,#000 calc(100% - 28px),transparent),linear-gradient(to bottom,transparent,#000 8%,#000 88%,transparent);
    mask-image:linear-gradient(to right,transparent,#000 4%,#000 calc(100% - 28px),transparent),linear-gradient(to bottom,transparent,#000 8%,#000 88%,transparent);
    -webkit-mask-composite:source-in;
    mask-composite:intersect;
  }
  /* When video is active: clip cube-field so it doesn't bleed under the video.
     The video wrapper occupies clamp(300px,45vw,620px) from the right viewport edge.
     We retract the cube-field mask so it fades out before reaching the video area. */
  .has-hero-video .cube-field{
    -webkit-mask-image:linear-gradient(to right,transparent,#000 4%,#000 calc(100% - clamp(300px,45vw,620px) - 16px),transparent),linear-gradient(to bottom,transparent,#000 8%,#000 88%,transparent);
    mask-image:linear-gradient(to right,transparent,#000 4%,#000 calc(100% - clamp(300px,45vw,620px) - 16px),transparent),linear-gradient(to bottom,transparent,#000 8%,#000 88%,transparent);
  }
  /* ── Animated cubes video – right side decoration ── */
  .hero-cubes-video{
    position:absolute;
    z-index:0;
    top:0;
    bottom:0;
    right:calc(50% - 50vw);
    width:clamp(300px, 45vw, 620px);
    pointer-events:none;
    overflow:hidden;
    opacity:0;
    animation:heroCubesFadeIn 5.2s cubic-bezier(0.16, 1, 0.3, 1) 0.4s forwards;
    -webkit-mask-image:linear-gradient(to left,rgba(0,0,0,0) 0%,rgba(0,0,0,.08) 6%,rgba(0,0,0,.8) 22%,#000 40%),
                       linear-gradient(to bottom,transparent,#000 8%,#000 88%,transparent);
    mask-image:linear-gradient(to left,rgba(0,0,0,0) 0%,rgba(0,0,0,.08) 6%,rgba(0,0,0,.8) 22%,#000 40%),
               linear-gradient(to bottom,transparent,#000 8%,#000 88%,transparent);
    -webkit-mask-composite:source-in;
    mask-composite:intersect;
  }
  @keyframes heroEchoFadeIn{
    from{opacity:0}
    to{opacity:.48}
  }
  @keyframes heroCubesFadeIn{
    from{opacity:0}
    to{opacity:1}
  }
  .hero-cubes-vid{
    position:absolute;
    top:0;
    right:0;
    height:100%;
    width:auto;
    max-width:none;
    display:block;
    object-fit:cover;
    object-position:right center;
  }
  /* Hide video wrap on narrow desktops where it would overlap text */
  @media(max-width:1199px){.hero-cubes-video{display:none}}
  /* prefers-reduced-motion: hide video, show only static cubes */
  @media(prefers-reduced-motion:reduce){
    .hero::before{opacity:.48;animation:none}
    .cube-field{opacity:1;animation:none}
    .hero-cubes-video{display:none;animation:none}
  }
  /* Pause button – accessible 44x44px touch target with discreet 14px icon */
  .hero-cubes-pause{
    position:absolute;
    z-index:10;
    bottom:150px;
    right:32px;
    width:44px;
    height:44px;
    padding:0;
    margin:0;
    border:none;
    border-radius:6px;
    background:transparent;
    color:rgba(15,15,16,.42);
    cursor:pointer;
    display:grid;
    place-items:center;
    transition:color .2s ease;
  }
  .hero-cubes-pause:hover{color:rgba(15,15,16,.85)}
  .hero-cubes-pause:focus-visible{outline:2px solid var(--orange,#ff6400);outline-offset:2px}
  @media(max-width:1199px){.hero-cubes-pause{display:none!important}}
  @media(prefers-reduced-motion:reduce){.hero-cubes-pause{display:none!important}}
  .hero > :not(.cube-field):not(.hero-cubes-video):not(.hero-cubes-pause){position:relative;z-index:1}

  .eyebrow{font-size:var(--type-label);color:#858d9a;letter-spacing:var(--type-label-ls);margin-bottom:58px;display:flex;gap:12px;align-items:center}
  .eyebrow .dot{font-size:10px;color:#7e8794}
  .hero-grid{display:grid;grid-template-columns:minmax(0,930px) 220px;justify-content:space-between;gap:48px}
  h1{font-family:var(--font-display);font-weight:var(--type-display-weight);letter-spacing:var(--type-display-ls);line-height:var(--type-display-lh);font-size:var(--type-display);margin:0;max-width:960px}
  .hero-line-wrap{display:block;position:relative}
  .hero-line{position:relative;display:inline-block;vertical-align:top;max-width:100%}
  .hero-line-inner{display:inline-block;white-space:nowrap;position:relative;z-index:1;max-width:100%}
  .hero-wipe-brand,.hero-wipe-fg{position:absolute;top:-0.06em;bottom:-0.10em;left:-0.08em;right:-0.08em;pointer-events:none;transform-origin:left;transform:scaleX(0);will-change:transform}
  .hero-wipe-brand{background:var(--orange);z-index:3}
  .hero-wipe-fg{background:#0F0F10;z-index:4}
  @media(prefers-reduced-motion:reduce){
    .hero-line-inner{opacity:1!important}
    .hero-wipe-brand,.hero-wipe-fg{display:none!important}
  }
  .uword{position:relative;display:inline-block;color:var(--orange)}
  .uword-mob{position:relative;display:inline-block}
  html:not([lang="en"]) .uword::after{display:none!important}
  html:not([lang="en"]) .uword-mob::after{display:none!important}
  html[lang="en"] .uword::after{content:"";position:absolute;left:0;bottom:-3px;width:calc(100% - 4px);height:6px;background:var(--orange)}
  .terminal{display:inline-block;width:.17em;height:.17em;background:var(--orange);margin-left:.08em;vertical-align:baseline}
  .lead{margin:38px 0 0;color:#6f7886;font-size:var(--type-lead);line-height:var(--type-lead-lh);max-width:690px;font-weight:400}
  .actions{display:flex;gap:18px;margin-top:32px}
  .btn{height:56px;padding:0 30px;border-radius:8px;font-size:var(--type-body);font-weight:500;display:inline-flex;align-items:center;gap:30px;text-decoration:none}
  .btn.dark{background:#0b0b0d;color:#fff}
  .btn.light{color:#111;border:1px solid #d4d8de;background:rgba(255,255,255,.78)}
  .meta01{padding-top:4px;color:#6f7888;font-size:var(--type-label);letter-spacing:.22em;text-transform:uppercase;line-height:1.72}
  .meta01-top{display:flex;align-items:center;gap:26px;margin-bottom:18px;color:#9299a4;letter-spacing:0}
  .meta01-top::before{content:"";width:42px;height:2px;background:var(--orange)}
  .hero > .hero-bottom{position:absolute;left:0;right:0;bottom:-40px;display:grid;grid-template-columns:1fr 1fr 1fr;align-items:center;color:#78818f;font-size:11px;letter-spacing:.19em;text-transform:uppercase;font-weight:600}
  .mini{display:flex;align-items:flex-start;gap:18px;line-height:1.55}
  .mini::before{content:"";width:28px;height:1px;background:#959daa;margin-top:8px;flex:0 0 auto}
  .hero-bottom .center{text-align:center;display:flex;flex-direction:column;align-items:center;gap:8px}
  .mouse{width:22px;height:34px;border:1.5px solid #333;border-radius:12px;position:relative}
  .mouse::after{content:"";width:3px;height:3px;border-radius:50%;background:#222;position:absolute;left:50%;top:8px;transform:translateX(-50%)}
  .arrowdown{font-size:18px;letter-spacing:0;color:#718091}
  .hero-bottom .right{justify-self:end}

  @media(prefers-reduced-motion:reduce){
    .media,.media img,.arr{transition:none!important}
    .work:hover .media,.work:hover .media img,.work:hover .arr{transform:none!important}
  }
  @media(max-width:900px){
    .wrap{width:calc(100% - 40px)} header{height:84px;grid-template-columns:1fr auto}.logo{width:118px}nav{display:none}.hero{min-height:auto;padding:32px 0 60px}.eyebrow{margin-bottom:34px}.lead{margin:28px 0 0}.hero-grid{grid-template-columns:1fr}.meta01{display:none}.cube-field{display:none}.hero > .hero-bottom{display:none}.portfolio{padding-top:72px}.portfolio-head{grid-template-columns:1fr;gap:24px;margin-bottom:56px}.stage{height:auto;display:grid;grid-template-columns:1fr;gap:64px}.work{position:static!important;width:100%!important}.media{height:auto!important;aspect-ratio:1.35/1}
    html:not([lang="en"]) .uword-mob::after{bottom:-3px;width:calc(100% - 10px)}
    html[lang="en"] .uword::after{bottom:-3px}
  }

/* Subtle section scroll reveal & Footer fluid entrance (Solox-style) */
.site-footer {
  overflow-x: clip;
}

@media (prefers-reduced-motion: no-preference) {
  html.js-reveal-enabled .reveal-section {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 500ms ease-out, transform 500ms cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
  }
  html.js-reveal-enabled .reveal-section.is-revealed {
    opacity: 1;
    transform: translateY(0);
    will-change: auto;
  }

  /* Stan początkowy elementów stopki (aktywowany tylko gdy JS potwierdzi gotowość) */
  html.js-reveal-enabled .site-footer.footer-reveal-ready:not(.is-revealed) .footer-brand {
    opacity: 0;
    transform: translate3d(-36px, 0, 0);
  }
  html.js-reveal-enabled .site-footer.footer-reveal-ready:not(.is-revealed) .footer-contact {
    opacity: 0;
    transform: translate3d(36px, 0, 0);
  }
  html.js-reveal-enabled .site-footer.footer-reveal-ready:not(.is-revealed) .footer-nav {
    opacity: 0;
    transform: translate3d(0, 24px, 0);
  }
  html.js-reveal-enabled .site-footer.footer-reveal-ready:not(.is-revealed) .footer-nav a {
    opacity: 0;
    transform: translate3d(0, 16px, 0);
  }
  html.js-reveal-enabled .site-footer.footer-reveal-ready:not(.is-revealed) .footer-contact .social-links a {
    opacity: 0;
    transform: translate3d(16px, 0, 0);
  }
  html.js-reveal-enabled .site-footer.footer-reveal-ready:not(.is-revealed) .footer-bottom {
    opacity: 0;
    transform: translate3d(0, 16px, 0);
  }

  /* Definicje przejść (smooth cubic-bezier) */
  html.js-reveal-enabled .site-footer.footer-reveal-ready .footer-brand,
  html.js-reveal-enabled .site-footer.footer-reveal-ready .footer-contact,
  html.js-reveal-enabled .site-footer.footer-reveal-ready .footer-nav,
  html.js-reveal-enabled .site-footer.footer-reveal-ready .footer-nav a,
  html.js-reveal-enabled .site-footer.footer-reveal-ready .footer-contact .social-links a,
  html.js-reveal-enabled .site-footer.footer-reveal-ready .footer-bottom {
    transition: opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
  }

  /* Stan po ujawnieniu (.is-revealed) z kaskadowymi opóźnieniami (stagger) */
  html.js-reveal-enabled .site-footer.is-revealed .footer-brand {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition-delay: 0.04s;
  }
  html.js-reveal-enabled .site-footer.is-revealed .footer-contact {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition-delay: 0.10s;
  }

  /* Środkowe kolumny nawigacji */
  html.js-reveal-enabled .site-footer.is-revealed .footer-nav:nth-of-type(1) {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition-delay: 0.12s;
  }
  html.js-reveal-enabled .site-footer.is-revealed .footer-nav:nth-of-type(2) {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition-delay: 0.18s;
  }

  /* Kaskada linków w kolumnie 1 */
  html.js-reveal-enabled .site-footer.is-revealed .footer-nav:nth-of-type(1) a:nth-of-type(1) { transition-delay: 0.16s; }
  html.js-reveal-enabled .site-footer.is-revealed .footer-nav:nth-of-type(1) a:nth-of-type(2) { transition-delay: 0.20s; }
  html.js-reveal-enabled .site-footer.is-revealed .footer-nav:nth-of-type(1) a:nth-of-type(3) { transition-delay: 0.24s; }
  html.js-reveal-enabled .site-footer.is-revealed .footer-nav:nth-of-type(1) a:nth-of-type(4) { transition-delay: 0.28s; }
  html.js-reveal-enabled .site-footer.is-revealed .footer-nav:nth-of-type(1) a:nth-of-type(5) { transition-delay: 0.32s; }
  html.js-reveal-enabled .site-footer.is-revealed .footer-nav:nth-of-type(1) a:nth-of-type(6) { transition-delay: 0.36s; }

  /* Kaskada linków w kolumnie 2 */
  html.js-reveal-enabled .site-footer.is-revealed .footer-nav:nth-of-type(2) a:nth-of-type(1) { transition-delay: 0.22s; }
  html.js-reveal-enabled .site-footer.is-revealed .footer-nav:nth-of-type(2) a:nth-of-type(2) { transition-delay: 0.26s; }
  html.js-reveal-enabled .site-footer.is-revealed .footer-nav:nth-of-type(2) a:nth-of-type(3) { transition-delay: 0.30s; }
  html.js-reveal-enabled .site-footer.is-revealed .footer-nav:nth-of-type(2) a:nth-of-type(4) { transition-delay: 0.34s; }

  /* Kaskada social media */
  html.js-reveal-enabled .site-footer.is-revealed .social-links a:nth-child(1) { transition-delay: 0.22s; }
  html.js-reveal-enabled .site-footer.is-revealed .social-links a:nth-child(2) { transition-delay: 0.28s; }
  html.js-reveal-enabled .site-footer.is-revealed .social-links a:nth-child(3) { transition-delay: 0.34s; }

  html.js-reveal-enabled .site-footer.is-revealed .footer-nav a,
  html.js-reveal-enabled .site-footer.is-revealed .social-links a {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }

  /* Dolna belka */
  html.js-reveal-enabled .site-footer.is-revealed .footer-bottom {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition-delay: 0.40s;
  }

  /* Responsywność dla urządzeń mobilnych - wejście z dołu zamiast z boków */
  @media (max-width: 640px) {
    html.js-reveal-enabled .site-footer.footer-reveal-ready:not(.is-revealed) .footer-brand,
    html.js-reveal-enabled .site-footer.footer-reveal-ready:not(.is-revealed) .footer-contact {
      transform: translate3d(0, 24px, 0);
    }
  }
}

/* Motion Pass 01: Line Mask & Button Microinteractions */
.gf-line-mask{overflow:hidden;display:block!important;padding-bottom:0.22em;margin-bottom:-0.22em}
.gf-line-mask.is-revealed{overflow:visible!important}
.gf-line-inner{display:block!important;will-change:transform,opacity}
.btn:not(.f3-link) span,.cta-button:not(.f3-link) span,.text-link:not(.f3-link) span,.package-link:not(.f3-link) span,.project-ext-link:not(.f3-link) span,.arr-link:not(.f3-link) span{display:inline-block;transition:transform .32s cubic-bezier(.22,1,.36,1)}
.btn:not(.f3-link):hover span,.cta-button:not(.f3-link):hover span,.text-link:not(.f3-link):hover span,.package-link:not(.f3-link):hover span,.project-ext-link:not(.f3-link):hover span,.arr-link:not(.f3-link):hover span{transform:translateX(4px)}
.portfolio .work:hover .arr-link:not(.f3-link) span{transform:translateX(4px)}

/* Lenis smooth scroll minimal core */
html.lenis,html.lenis body{height:auto}
.lenis:not(.lenis-autoToggle).lenis-stopped{overflow:clip}
.lenis [data-lenis-prevent],.lenis [data-lenis-prevent-wheel],.lenis [data-lenis-prevent-touch]{overscroll-behavior:contain}
.lenis.lenis-smooth iframe{pointer-events:none}

/* Subtle desktop parallax for mockup cards (Hiker p4 only) */
@media (hover: hover) and (pointer: fine) {
  .portfolio .p4 .project-image[data-parallax="photo"] {
    transform: scale(1.05);
    will-change: transform;
  }
}
@media (prefers-reduced-motion: reduce) {
  .portfolio .p4 .project-image[data-parallax="photo"] {
    transform: none !important;
  }
}

/* Spector-style dual sliding arrow microinteraction */
.quote > span:not(.cta-arrow-box),
.btn.dark > span:not(.cta-arrow-box),
.cta-button > span:not(.cta-arrow-box),
.packages-brief-callout-btn > span:not(.cta-arrow-box) {
  display: inline-block;
  transform: none !important;
  transition: none !important;
}
.cta-arrow-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  overflow: hidden;
  position: relative;
  flex-shrink: 0;
  vertical-align: middle;
}
.cta-arrow-inner {
  display: inline-flex;
  position: relative;
  width: 18px;
  height: 18px;
}
.cta-arrow-primary,
.cta-arrow-secondary {
  position: absolute;
  top: 1px;
  left: 1px;
  width: 16px;
  height: 16px;
  transition: transform 0.48s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}
.cta-arrow-primary {
  transform: translateX(0);
}
.cta-arrow-secondary {
  transform: translateX(-150%);
}
.quote:hover .cta-arrow-primary,
.quote:focus-visible .cta-arrow-primary,
.btn.dark:hover .cta-arrow-primary,
.btn.dark:focus-visible .cta-arrow-primary,
.cta-button:hover .cta-arrow-primary,
.cta-button:focus-visible .cta-arrow-primary,
.packages-brief-callout-btn:hover .cta-arrow-primary,
.packages-brief-callout-btn:focus-visible .cta-arrow-primary {
  transform: translateX(150%);
}
.quote:hover .cta-arrow-secondary,
.quote:focus-visible .cta-arrow-secondary,
.btn.dark:hover .cta-arrow-secondary,
.btn.dark:focus-visible .cta-arrow-secondary,
.cta-button:hover .cta-arrow-secondary,
.cta-button:focus-visible .cta-arrow-secondary,
.packages-brief-callout-btn:hover .cta-arrow-secondary,
.packages-brief-callout-btn:focus-visible .cta-arrow-secondary {
  transform: translateX(0);
}
@media (prefers-reduced-motion: reduce) {
  .cta-arrow-primary,
  .cta-arrow-secondary {
    transition: none !important;
  }
  .cta-arrow-secondary {
    display: none !important;
  }
}

/* Hero entrance masks */
.hero-mask-wrap {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
}
.hero-mask-inner {
  display: inline-block;
  will-change: transform, opacity;
}
.meta01-top {
  transform-origin: left;
  will-change: transform;
}
.meta01-list {
  display: flex;
  flex-direction: column;
}
.meta01-item {
  display: block;
}
.meta01-mask {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
}
.meta01-inner {
  display: inline-block;
  will-change: transform, opacity;
}

/* ==========================================================================
   FUTURE THREE HOVER EFFECT (homepage i podstrony)
   Reguły scoped do .f3-link i jego dzieci – nie dotykają innych linków.
   ========================================================================== */

/* 1. Kontener linku */
.f3-link {
  display: inline-flex;
  align-items: center;
  position: relative;
  text-decoration: none !important;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;   /* nie kurczy się w kontenerze flex */
}

.f3-link[hidden],
.f3-link[style*="display: none"],
.f3-link[style*="display:none"] {
  display: none !important;
}

/* 2. Maska pionowa – ukrywa shadow, padding chroni ostatni znak i grot */
.f3-clip {
  display: inline-flex;
  align-items: baseline;
  height: 1.35em;
  line-height: 1.35;
  overflow: hidden;
  vertical-align: baseline;
  white-space: nowrap;
  padding-right: 0.2em;
}

/* 3. Wyrazy i spacje */
.f3-word {
  display: inline-flex;
  white-space: nowrap;
}

.f3-space {
  display: inline-block;
  white-space: pre;
  width: 0.28em;
}

/* 4. Litery */
.f3-char {
  display: inline-block;
  text-shadow: 0 1.35em var(--f3-shadow, #ff6400);
  transform: translateY(0);
  will-change: transform;
  transition: transform 0.48s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: calc(min(0.32s, var(--char, 0) * 0.021s));
  color: inherit;
}

/* 5. Strzałka – nie może być ściskana przez flex ani obcięta */
.f3-arrow {
  display: inline-block;
  flex-shrink: 0;
  margin-left: 0.35em;
  text-shadow: 0 1.35em var(--f3-arrow-shadow, var(--f3-shadow, #ff6400));
  transform: translateY(0);
  will-change: transform;
  transition: transform 0.48s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: calc(min(0.32s, var(--char, 0) * 0.021s));
  color: inherit;
}

/* 6. Ruch pionowy przy :hover i :focus-visible */
.f3-link:hover .f3-char,
.f3-link:focus-visible .f3-char {
  transform: translateY(-1.35em);
}

.f3-link:hover .f3-arrow,
.f3-link:focus-visible .f3-arrow {
  transform: translateY(-1.35em);
}

/* 7. Kolorystyka – ciemne linki na jasnym tle → pomarańczowy */
a.f3-link {
  color: #0f0f10;
  --f3-shadow: var(--orange, #ff6400);
  --f3-arrow-shadow: var(--orange, #ff6400);
}

/* Aktywny link menu: pomarańczowy → ciemny */
#main-nav a.active.f3-link {
  color: var(--orange, #ff6400);
  --f3-shadow: #0f0f10;
  --f3-arrow-shadow: #0f0f10;
}

/* Pomarańczowe linki (collab-card-action, project-ext-action, project-ext-link) → ciemny */
.f3-link--orange,
.collab-card-action.f3-link,
.project-ext-action a.f3-link,
.project-ext-link.f3-link {
  color: var(--orange, #ff6400) !important;
  --f3-shadow: #09090b !important;
  --f3-arrow-shadow: #09090b !important;
}

/* Stopka – jasny tekst na ciemnym tle */
.site-footer a.f3-link {
  color: #aaaab1;
  --f3-shadow: #ff7a29;
  --f3-arrow-shadow: #ff7a29;
}

/* Czarne CTA (.quote, .btn.dark, .cta-button, .packages-brief-callout-btn, .btn-primary) – biały tekst → pomarańczowy */
.quote.f3-link,
.btn.dark.f3-link,
.cta-button.f3-link,
.packages-brief-callout-btn.f3-link,
.btn-primary.f3-link {
  background-color: #09090b !important;
  color: #ffffff !important;
  --f3-shadow: var(--orange, #ff6400) !important;
  --f3-arrow-shadow: var(--orange, #ff6400) !important;
}

/* Jasne CTA (.btn-secondary) – ciemny tekst → pomarańczowy */
.btn-secondary.f3-link {
  background-color: #ffffff !important;
  color: #09090b !important;
  --f3-shadow: var(--orange, #ff6400) !important;
  --f3-arrow-shadow: var(--orange, #ff6400) !important;
}
.btn-secondary.f3-link:hover,
.btn-secondary.f3-link:focus-visible {
  background-color: #f4f4f5 !important;
  border-color: #09090b !important;
}
.btn-primary.f3-link:hover,
.btn-primary.f3-link:focus-visible {
  background-color: #1a1a1f !important;
}
.f3-arrow--left {
  margin-left: 0 !important;
  margin-right: 0.35em !important;
}

/* Linki pakietów – pomarańczowy → ciemny */
.package-link.f3-link {
  color: var(--orange, #ff6400) !important;
  --f3-shadow: #0f0f10 !important;
  --f3-arrow-shadow: #0f0f10 !important;
  border-bottom: none !important;
  text-decoration: none !important;
}

/* Czarna karta pakietu (package-featured) – pomarańczowy prostokąt, biały tekst */
.package-featured .package-link.f3-link {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
  min-height: 52px;
  padding: 15px 24px !important;
  margin-top: 24px !important;
  border-top: none !important;
  border-radius: 8px !important;
  background-color: var(--orange, #ff6400) !important;
  color: #ffffff !important;
  --f3-shadow: #ffffff !important;
  --f3-arrow-shadow: #ffffff !important;
  box-sizing: border-box !important;
  transition: background-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease !important;
}
.package-featured .package-link.f3-link:hover,
.package-featured .package-link.f3-link:focus-visible {
  background-color: #ea580c !important;
  color: #ffffff !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(255, 100, 0, 0.35);
}
.package-featured .package-link.f3-link .f3-clip {
  display: inline-flex;
  justify-content: center;
  align-items: baseline;
}

/* Pomarańczowy przycisk panelu modernizacji – litery zmieniają się na ciemne na hover */
.modernizacja-panel .btn.f3-link {
  background-color: var(--orange, #ff6400) !important;
  color: #ffffff !important;
  --f3-shadow: #09090b !important;
  --f3-arrow-shadow: #09090b !important;
}

/* Blog: wyróżniony link "Czytaj artykuł" */
.blog-featured-link.f3-link {
  color: var(--orange, #ff6400) !important;
  --f3-shadow: #09090b !important;
  --f3-arrow-shadow: #09090b !important;
  border-bottom: none !important;
}

/* Ukrycie .cta-arrow-box gdy F3 aktywny */
.quote.f3-link .cta-arrow-box,
.btn.dark.f3-link .cta-arrow-box,
.cta-button.f3-link .cta-arrow-box,
.packages-brief-callout-btn.f3-link .cta-arrow-box {
  display: none !important;
}

/* Ukrycie nav-flip gdy F3 aktywny */
.f3-link .nav-flip {
  display: none !important;
}

/* Wyłączenie 3D-flip na homepage (zastąpiony falą liter) */
body.home-page header nav .nav-flip {
  perspective: none !important;
  transform-style: flat !important;
}
body.home-page header nav .nav-flip-front,
body.home-page header nav .nav-flip-back {
  display: none !important;
}

/* Usunięcie dekoracji wyłącznie na elementach z F3 */
.collab-card-action.f3-link,
.process-ownership a.f3-link,
.portfolio .all.f3-link,
.project-ext-action a.f3-link,
.project-ext-link.f3-link,
.text-link.f3-link,
.blog-card-link.f3-link {
  border-bottom: none !important;
}

/* Focus-visible */
a.f3-link:focus-visible,
.quote.f3-link:focus-visible,
.btn.dark.f3-link:focus-visible,
.cta-button.f3-link:focus-visible,
.packages-brief-callout-btn.f3-link:focus-visible,
.btn-primary.f3-link:focus-visible,
.btn-secondary.f3-link:focus-visible {
  outline: 2px solid var(--orange, #ff6400) !important;
  outline-offset: 3px !important;
  border-radius: 8px;
}

/* prefers-reduced-motion: zmiana koloru zamiast przesunięcia */
@media (prefers-reduced-motion: reduce) {
  .f3-char,
  .f3-arrow {
    transition: color 0.2s ease !important;
    transform: none !important;
    text-shadow: none !important;
  }
  .f3-link:hover .f3-char,
  .f3-link:focus-visible .f3-char {
    color: var(--f3-shadow, #ff6400) !important;
  }
  .f3-link:hover .f3-arrow,
  .f3-link:focus-visible .f3-arrow {
    color: var(--f3-arrow-shadow, #ff6400) !important;
  }
}

@media (max-width: 900px) {
  .nav-flip-back {
    display: none !important;
  }
}