.elementor-835 .elementor-element.elementor-element-421195e{--display:flex;}/* Start custom CSS */<!DOCTYPE html>
<!-- saved from url=(0082)https://ecommercemedia.pl/wp-content/uploads/2026/05/case-study-_wordpress_-1.html -->
<html lang="pl"><script type="text/javascript" src="chrome-extension://nomnoimacbncclfbnfaingniikblfbji/build/scripts/installDetector.js"></script><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><script>window.__resources = {};</script>

<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Case Study — Marka premium · Branża fashion</title>
<link rel="preconnect" href="https://fonts.googleapis.com/">
<link rel="preconnect" href="https://fonts.gstatic.com/">
<style>/* cyrillic-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("blob:https://ecommercemedia.pl/bc40f8cb-d367-4b58-818d-482f1e25cce3") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("blob:https://ecommercemedia.pl/2ef9fd6a-70f0-4397-b3eb-e65ee480fc33") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("blob:https://ecommercemedia.pl/7e0536e6-a010-4b63-a6a3-03aff7929fcd") format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("blob:https://ecommercemedia.pl/820bd2a7-d463-481c-ac43-93e3d2822f97") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("blob:https://ecommercemedia.pl/6d9c7d94-73b2-4272-9193-e5c013fa678e") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("blob:https://ecommercemedia.pl/c811f1cd-f610-40e0-af39-115a9df5df43") 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;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("blob:https://ecommercemedia.pl/25815da8-bd21-41ba-be32-9727dd085aa3") 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;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("blob:https://ecommercemedia.pl/bc40f8cb-d367-4b58-818d-482f1e25cce3") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("blob:https://ecommercemedia.pl/2ef9fd6a-70f0-4397-b3eb-e65ee480fc33") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("blob:https://ecommercemedia.pl/7e0536e6-a010-4b63-a6a3-03aff7929fcd") format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("blob:https://ecommercemedia.pl/820bd2a7-d463-481c-ac43-93e3d2822f97") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("blob:https://ecommercemedia.pl/6d9c7d94-73b2-4272-9193-e5c013fa678e") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("blob:https://ecommercemedia.pl/c811f1cd-f610-40e0-af39-115a9df5df43") 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;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("blob:https://ecommercemedia.pl/25815da8-bd21-41ba-be32-9727dd085aa3") 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;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("blob:https://ecommercemedia.pl/bc40f8cb-d367-4b58-818d-482f1e25cce3") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("blob:https://ecommercemedia.pl/2ef9fd6a-70f0-4397-b3eb-e65ee480fc33") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("blob:https://ecommercemedia.pl/7e0536e6-a010-4b63-a6a3-03aff7929fcd") format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("blob:https://ecommercemedia.pl/820bd2a7-d463-481c-ac43-93e3d2822f97") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("blob:https://ecommercemedia.pl/6d9c7d94-73b2-4272-9193-e5c013fa678e") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("blob:https://ecommercemedia.pl/c811f1cd-f610-40e0-af39-115a9df5df43") 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;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("blob:https://ecommercemedia.pl/25815da8-bd21-41ba-be32-9727dd085aa3") 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;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("blob:https://ecommercemedia.pl/bc40f8cb-d367-4b58-818d-482f1e25cce3") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("blob:https://ecommercemedia.pl/2ef9fd6a-70f0-4397-b3eb-e65ee480fc33") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("blob:https://ecommercemedia.pl/7e0536e6-a010-4b63-a6a3-03aff7929fcd") format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("blob:https://ecommercemedia.pl/820bd2a7-d463-481c-ac43-93e3d2822f97") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("blob:https://ecommercemedia.pl/6d9c7d94-73b2-4272-9193-e5c013fa678e") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("blob:https://ecommercemedia.pl/c811f1cd-f610-40e0-af39-115a9df5df43") 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;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("blob:https://ecommercemedia.pl/25815da8-bd21-41ba-be32-9727dd085aa3") 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;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("blob:https://ecommercemedia.pl/bc40f8cb-d367-4b58-818d-482f1e25cce3") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("blob:https://ecommercemedia.pl/2ef9fd6a-70f0-4397-b3eb-e65ee480fc33") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("blob:https://ecommercemedia.pl/7e0536e6-a010-4b63-a6a3-03aff7929fcd") format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("blob:https://ecommercemedia.pl/820bd2a7-d463-481c-ac43-93e3d2822f97") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("blob:https://ecommercemedia.pl/6d9c7d94-73b2-4272-9193-e5c013fa678e") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("blob:https://ecommercemedia.pl/c811f1cd-f610-40e0-af39-115a9df5df43") 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;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("blob:https://ecommercemedia.pl/25815da8-bd21-41ba-be32-9727dd085aa3") 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;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("blob:https://ecommercemedia.pl/bc40f8cb-d367-4b58-818d-482f1e25cce3") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("blob:https://ecommercemedia.pl/2ef9fd6a-70f0-4397-b3eb-e65ee480fc33") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("blob:https://ecommercemedia.pl/7e0536e6-a010-4b63-a6a3-03aff7929fcd") format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("blob:https://ecommercemedia.pl/820bd2a7-d463-481c-ac43-93e3d2822f97") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("blob:https://ecommercemedia.pl/6d9c7d94-73b2-4272-9193-e5c013fa678e") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("blob:https://ecommercemedia.pl/c811f1cd-f610-40e0-af39-115a9df5df43") 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;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("blob:https://ecommercemedia.pl/25815da8-bd21-41ba-be32-9727dd085aa3") 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;
}
</style>
<style>/* ──────────────────────────────────────────────────────────────
   TOKENS
   ────────────────────────────────────────────────────────────── */
:root {
  --c-bg:        #ffffff;
  --c-bg-soft:   #f7f8fa;
  --c-bg-warm:   #fafaf9;
  --c-ink:       #000000;
  --c-ink-2:     #4c4c4c;
  --c-ink-3:     #8a8d93;
  --c-line:      #ececef;
  --c-line-2:    #f1f1f3;
  --c-accent:    #3873f8;
  --c-accent-2:  #2c5fd4;
  --c-up:        #16a34a;

  --r-sm:  10px;
  --r-md:  14px;
  --r-lg:  20px;
  --r-xl:  28px;

  --sh-1: 0 1px 2px rgba(16,24,40,.04), 0 1px 1px rgba(16,24,40,.03);
  --sh-2: 0 6px 16px -6px rgba(16,24,40,.08), 0 2px 4px -2px rgba(16,24,40,.04);
  --sh-3: 0 24px 60px -28px rgba(16,24,40,.18), 0 8px 24px -12px rgba(16,24,40,.08);
  --sh-blue: 0 18px 40px -18px rgba(56,115,248,.35);

  --ease: cubic-bezier(.2,.7,.2,1);
  --container: 1240px;
}

/* ──────────────────────────────────────────────────────────────
   BASE
   ────────────────────────────────────────────────────────────── */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
  font-feature-settings: 'cv11', 'ss01', 'ss03';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: var(--c-bg);
  color: var(--c-ink);
  font-size: 16px;
  line-height: 1.55;
  letter-spacing: -0.005em;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
.container { max-width: var(--container); margin: 0 auto; padding: 0 28px; }
.accent { color: var(--c-accent); }
.dot-sep { color: var(--c-line); padding: 0 2px; }

/* Reveal-on-scroll */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .9s var(--ease) var(--delay,0s), transform .9s var(--ease) var(--delay,0s); }
.reveal.is-in { opacity: 1; transform: none; }

/* ──────────────────────────────────────────────────────────────
   NAV
   ────────────────────────────────────────────────────────────── */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.78);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid rgba(0,0,0,.04);
}
.nav__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 14px 28px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px;
}
.nav__brand { display: flex; align-items: center; gap: 10px; font-weight: 500; }
.nav__dot { width: 9px; height: 9px; border-radius: 999px; background: var(--c-accent); box-shadow: 0 0 0 4px rgba(56,115,248,.12); }
.nav__name { font-size: 14px; letter-spacing: -.01em; color: var(--c-ink-2); }
.nav__name-strong { color: var(--c-ink); font-weight: 600; }
.nav__links { display: flex; gap: 28px; }
.nav__links a { font-size: 14px; color: var(--c-ink-2); transition: color .25s; }
.nav__links a:hover { color: var(--c-ink); }
.nav__cta {
  font-size: 13.5px; font-weight: 500; color: var(--c-ink);
  padding: 10px 16px; border: 1px solid var(--c-line);
  border-radius: 999px; background: #fff;
  transition: all .25s var(--ease);
}
.nav__cta:hover { border-color: var(--c-ink); transform: translateY(-1px); }

/* ──────────────────────────────────────────────────────────────
   HERO
   ────────────────────────────────────────────────────────────── */
.hero {
  position: relative;
  padding: 72px 0 104px;
  overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(900px 500px at 85% -10%, rgba(56,115,248,.06), transparent 60%),
    radial-gradient(600px 400px at -5% 30%, rgba(56,115,248,.04), transparent 60%);
  pointer-events: none;
  z-index: -1;
}
.hero__grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 64px;
  align-items: center;
}

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 12px;
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: 999px;
  font-size: 12.5px; color: var(--c-ink-2);
  letter-spacing: .01em;
  box-shadow: var(--sh-1);
}
.eyebrow__dot { width: 6px; height: 6px; border-radius: 999px; background: var(--c-accent); box-shadow: 0 0 0 4px rgba(56,115,248,.16); }

.hero__headline {
  margin: 28px 0 22px;
  font-size: clamp(40px, 5vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.035em;
  font-weight: 600;
  color: var(--c-ink);
  display: flex; flex-direction: column; gap: 4px;
}
.hero__amount {
  display: block;
  font-size: clamp(46px, 6.2vw, 68px);
  letter-spacing: -0.045em;
  font-weight: 700;
}
.hero__line2 { font-weight: 500; color: var(--c-ink-2); font-size: clamp(28px, 3.3vw, 38px); letter-spacing: -.025em; }
.hero__line3 { font-weight: 500; color: var(--c-ink-2); font-size: clamp(28px, 3.3vw, 38px); letter-spacing: -.025em; }

.hero__desc {
  max-width: 540px;
  margin: 6px 0 36px;
  color: var(--c-ink-2);
  font-size: 17px;
  line-height: 1.65;
}

.kpi-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  max-width: 560px;
}
.kpi {
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  padding: 20px 22px;
  box-shadow: var(--sh-1);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.kpi:hover { transform: translateY(-2px); box-shadow: var(--sh-2); border-color: #dfe2e8; }
.kpi__value {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
}
.kpi__unit { font-weight: 600; color: var(--c-ink); opacity: .55; margin-left: 2px; font-size: .8em; }
.kpi__label { margin-top: 6px; color: var(--c-ink-2); font-size: 13px; }
.kpi--accent {
  background: linear-gradient(180deg, #0b1220 0%, #000 100%);
  color: #fff; border-color: #000;
  box-shadow: var(--sh-blue);
}
.kpi--accent .kpi__value { color: #fff; }
.kpi--accent .kpi__unit { color: var(--c-accent); opacity: 1; }
.kpi--accent .kpi__label { color: rgba(255,255,255,.7); }

.hero__meta {
  margin-top: 28px;
  display: flex; gap: 14px; flex-wrap: wrap;
  font-size: 12.5px; color: var(--c-ink-3);
}

/* Dashboard mockup */
.hero__right { position: relative; }
.mock {
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-3);
  overflow: hidden;
  position: relative;
  transform-style: preserve-3d;
  transition: transform .6s var(--ease);
}
.mock:hover { transform: translateY(-3px); }
.mock__chrome {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--c-line-2);
  background: linear-gradient(180deg, #fbfbfd, #f6f7fa);
}
.mock__light { width: 10px; height: 10px; border-radius: 999px; background: #e2e3e7; }
.mock__light:nth-child(1) { background: #ff5f57; }
.mock__light:nth-child(2) { background: #febc2e; }
.mock__light:nth-child(3) { background: #28c840; }
.mock__url {
  margin-left: 12px; font-size: 11.5px; color: var(--c-ink-3);
  background: #fff; border: 1px solid var(--c-line-2);
  border-radius: 999px; padding: 4px 12px;
}
.mock__body { padding: 22px; }
.mock__head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 18px; }
.mock__tag { font-size: 11.5px; color: var(--c-ink-3); margin-bottom: 4px; }
.mock__title { font-size: 16px; font-weight: 600; letter-spacing: -.01em; }
.mock__pill {
  font-size: 11.5px; padding: 5px 10px; border-radius: 999px;
  background: rgba(22,163,74,.08); color: var(--c-up);
  border: 1px solid rgba(22,163,74,.18);
}
.mock__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 18px; }
.mock__stat { background: #fafbfc; border: 1px solid var(--c-line-2); border-radius: var(--r-md); padding: 14px; }
.mock__stat-lbl { font-size: 11px; color: var(--c-ink-3); }
.mock__stat-val { font-size: 20px; font-weight: 700; letter-spacing: -.02em; margin-top: 2px; }
.mock__x { font-weight: 500; opacity: .55; margin-left: 1px; font-size: .75em; }
.mock__delta { font-size: 11px; margin-top: 4px; }
.mock__delta.up { color: var(--c-up); }
.mock__chart { border: 1px solid var(--c-line-2); border-radius: var(--r-md); padding: 8px 8px 4px; margin-bottom: 14px; background: #fff; }
.mock__chart svg { width: 100%; height: 180px; display: block; }
.mock__grid line { stroke: #f1f2f5; stroke-dasharray: 2 4; }
.mock__line { stroke-dasharray: 1400; stroke-dashoffset: 1400; animation: drawLine 2.4s var(--ease) .6s forwards; }
@keyframes drawLine { to { stroke-dashoffset: 0; } }
.mock__rows { border: 1px solid var(--c-line-2); border-radius: var(--r-md); overflow: hidden; }
.mock__row {
  display: grid; grid-template-columns: 1.8fr .8fr .6fr .6fr;
  gap: 8px; padding: 10px 14px; font-size: 12px;
  border-bottom: 1px solid var(--c-line-2);
  align-items: center;
}
.mock__row:last-child { border-bottom: 0; }
.mock__row--head { background: #fafbfc; color: var(--c-ink-3); font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; }
.mock__row .up { color: var(--c-up); font-weight: 600; }

.mock__floater {
  position: absolute; right: -24px; bottom: -28px;
  background: #000; color: #fff;
  padding: 18px 22px; border-radius: var(--r-lg);
  box-shadow: var(--sh-3);
  border: 1px solid #111;
}
.mock__floater-lbl { font-size: 11px; color: rgba(255,255,255,.55); letter-spacing: .05em; text-transform: uppercase; }
.mock__floater-val { font-size: 26px; font-weight: 700; margin-top: 4px; display: flex; align-items: baseline; gap: 8px; letter-spacing: -.02em; }
.mock__floater-val span { color: var(--c-accent); font-weight: 600; }
.mock__floater-val em { font-style: normal; font-size: 11px; color: rgba(255,255,255,.55); letter-spacing: .06em; margin-left: 4px; }

/* Scroll hint */
.hero__scroll {
  margin-top: 72px;
  display: flex; align-items: center; gap: 12px;
  font-size: 11.5px; color: var(--c-ink-3); letter-spacing: .08em; text-transform: uppercase;
  max-width: var(--container); padding: 0 28px;
  margin-left: auto; margin-right: auto;
}
.hero__scroll-line { flex: 1; height: 1px; background: var(--c-line); position: relative; overflow: hidden; }
.hero__scroll-line::after {
  content: ''; position: absolute; left: -30%; top: 0; height: 100%; width: 30%;
  background: linear-gradient(90deg, transparent, var(--c-accent), transparent);
  animation: scrollLine 2.6s var(--ease) infinite;
}
@keyframes scrollLine { to { left: 100%; } }

/* ──────────────────────────────────────────────────────────────
   SECTIONS (shared)
   ────────────────────────────────────────────────────────────── */
.section { padding: 120px 0; position: relative; }
.section__head { max-width: 760px; margin-bottom: 56px; }
.section__num {
  font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--c-accent); font-weight: 500;
  margin-bottom: 18px;
}
.section__title {
  font-size: clamp(32px, 3.6vw, 44px);
  line-height: 1.1;
  letter-spacing: -0.03em;
  font-weight: 600;
  margin: 0 0 18px;
  text-wrap: balance;
}
.section__intro {
  font-size: 17px;
  color: var(--c-ink-2);
  line-height: 1.7;
  max-width: 660px;
  margin: 8px 0 0;
}
.section__intro strong { color: var(--c-ink); font-weight: 600; }

/* ──────────────────────────────────────────────────────────────
   SECTION 2 · CHALLENGE
   ────────────────────────────────────────────────────────────── */
.section--challenge { background: var(--c-bg-soft); }
.challenge__grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 40px;
  align-items: start;
}
.card {
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--r-xl);
  padding: 36px;
  box-shadow: var(--sh-1);
}
.card__label {
  font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--c-ink-3); margin-bottom: 18px;
}
.card--brand p { margin: 0 0 14px; color: var(--c-ink-2); font-size: 16px; line-height: 1.7; }
.card--brand p:last-of-type { margin-bottom: 32px; }

.badge {
  margin-top: 4px;
  background: linear-gradient(180deg, #f6f9ff, #eef3ff);
  border: 1px solid rgba(56,115,248,.18);
  border-radius: var(--r-lg);
  padding: 18px 20px;
}
.badge__top { font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--c-accent); font-weight: 500; }
.badge__val { font-size: 22px; font-weight: 700; letter-spacing: -.02em; margin-top: 4px; color: var(--c-ink); }
.badge__bar {
  height: 6px; background: rgba(56,115,248,.14); border-radius: 999px; overflow: hidden;
  margin: 12px 0 8px;
}
.badge__bar span {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--c-accent), #6e9bff);
  border-radius: 999px;
  transition: width 1.4s var(--ease) .3s;
}
.badge.is-in .badge__bar span { width: 42%; }
.badge__foot { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--c-ink-3); }
.badge__target { color: var(--c-accent); font-weight: 500; }

.challenge__problems .card__label { padding-left: 4px; }
.problems { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; }
.problem {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 18px;
  padding: 22px 4px;
  border-top: 1px solid var(--c-line);
  align-items: start;
  transition: padding-left .3s var(--ease);
}
.problem:hover { padding-left: 12px; }
.problem:last-child { border-bottom: 1px solid var(--c-line); }
.problem__idx {
  font-size: 12px;
  font-feature-settings: 'tnum';
  color: var(--c-ink-3);
  letter-spacing: .04em;
  font-weight: 500;
  padding-top: 3px;
}
.problem h3 { font-size: 18px; font-weight: 600; margin: 0 0 6px; letter-spacing: -.015em; }
.problem p { margin: 0; color: var(--c-ink-2); font-size: 15px; line-height: 1.6; }

/* ──────────────────────────────────────────────────────────────
   SECTION 3 · STRATEGY
   ────────────────────────────────────────────────────────────── */
.section--strategy { background: #fff; }
.blocks {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 100px;
}
.block {
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--r-xl);
  padding: 32px;
  transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s var(--ease);
}
.block:hover { transform: translateY(-4px); box-shadow: var(--sh-2); border-color: #dfe2e8; }
.block__head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.block__num {
  width: 42px; height: 42px; border-radius: 12px;
  display: grid; place-items: center;
  font-size: 14px; font-weight: 600;
  background: rgba(56,115,248,.08);
  color: var(--c-accent);
  font-feature-settings: 'tnum';
}
.block h3 { margin: 0; font-size: 19px; font-weight: 600; letter-spacing: -.015em; }
.block p { color: var(--c-ink-2); font-size: 15px; line-height: 1.65; margin: 0 0 18px; }
.block__list { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--c-line-2); }
.block__list li {
  font-size: 14px; color: var(--c-ink-2);
  padding: 12px 0; border-bottom: 1px solid var(--c-line-2);
  display: flex; align-items: center; gap: 12px;
}
.block__list li::before {
  content: ''; width: 5px; height: 5px; border-radius: 999px;
  background: var(--c-accent);
  flex: none;
}
.block__list li:last-child { border-bottom: 0; }

/* Gallery */
.gallery {}
.gallery__head { margin-bottom: 36px; max-width: 720px; }
.gallery__title { font-size: clamp(24px, 2.6vw, 32px); font-weight: 600; letter-spacing: -.025em; margin: 4px 0 0; line-height: 1.15; text-wrap: balance; }
.gallery__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.creative {
  margin: 0;
  display: flex; flex-direction: column;
  transition: transform .5s var(--ease);
}
.creative:hover { transform: translateY(-4px); }
.creative__frame {
  background: var(--c-bg-soft);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  overflow: hidden;
  aspect-ratio: 1/1;
  position: relative;
}
.creative__frame img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.2s var(--ease), filter .4s var(--ease);
}
.creative:hover .creative__frame img { transform: scale(1.04); }
.creative__frame::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 60%, rgba(0,0,0,.04));
  pointer-events: none;
}
.creative figcaption {
  display: flex; justify-content: space-between; gap: 14px;
  padding: 14px 4px 0;
  font-size: 12.5px;
  color: var(--c-ink-3);
}
.creative__hook { color: var(--c-ink-2); }

/* ──────────────────────────────────────────────────────────────
   SECTION 4 · RESULTS
   ────────────────────────────────────────────────────────────── */
.section--results { background: var(--c-bg-soft); padding-bottom: 80px; }

.screenshot {
  margin: 60px 0 60px;
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-3);
  overflow: hidden;
}
.screenshot__chrome {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--c-line-2);
  background: linear-gradient(180deg, #fbfbfd, #f6f7fa);
}
.screenshot__zoom {
  margin-left: auto;
  background: #fff; border: 1px solid var(--c-line);
  border-radius: 8px; padding: 6px;
  color: var(--c-ink-2); cursor: pointer;
  display: grid; place-items: center;
  transition: all .25s var(--ease);
}
.screenshot__zoom:hover { color: var(--c-accent); border-color: var(--c-accent); transform: translateY(-1px); }
.screenshot__body {
  padding: 0;
  background: #fff;
  overflow: hidden;
}
.screenshot__body img {
  width: 100%; height: auto; display: block;
  transition: filter .35s var(--ease);
}
.screenshot__cap {
  padding: 14px 22px;
  font-size: 12.5px;
  color: var(--c-ink-3);
  border-top: 1px solid var(--c-line-2);
  background: #fff;
}

.results-kpis {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
  margin-bottom: 64px;
}
.rkpi {
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  padding: 26px 24px;
  box-shadow: var(--sh-1);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.rkpi:hover { transform: translateY(-3px); box-shadow: var(--sh-2); border-color: #dfe2e8; }
.rkpi__lbl { font-size: 12px; color: var(--c-ink-3); letter-spacing: .04em; }
.rkpi__val {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -.03em;
  margin: 10px 0 6px;
  line-height: 1.05;
  display: flex; align-items: baseline; gap: 2px;
  font-feature-settings: 'tnum';
}
.rkpi__unit { font-size: .65em; color: var(--c-ink-2); font-weight: 500; opacity: .6; }
.rkpi__sub { font-size: 12px; color: var(--c-ink-2); }
.rkpi--hero {
  background: linear-gradient(180deg, #0b1220 0%, #000 100%);
  color: #fff;
  border-color: #000;
  box-shadow: var(--sh-blue);
}
.rkpi--hero .rkpi__lbl { color: rgba(255,255,255,.6); }
.rkpi--hero .rkpi__val { color: #fff; }
.rkpi--hero .rkpi__unit { color: var(--c-accent); opacity: 1; }
.rkpi--hero .rkpi__sub { color: rgba(255,255,255,.6); }

.closing {
  max-width: 760px;
  margin: 0 auto 80px;
  text-align: center;
}
.closing p {
  font-size: 18px;
  color: var(--c-ink-2);
  line-height: 1.7;
  text-wrap: pretty;
}

/* CTA */
.cta { margin-top: 24px; }
.cta__inner {
  display: grid;
  grid-template-columns: 1.4fr auto;
  gap: 32px;
  align-items: center;
  background: linear-gradient(135deg, #0b1220 0%, #050505 100%);
  color: #fff;
  border-radius: var(--r-xl);
  padding: 48px 52px;
  position: relative;
  overflow: hidden;
}
.cta__inner::before {
  content: '';
  position: absolute; right: -100px; top: -100px;
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(56,115,248,.35), transparent 70%);
  pointer-events: none;
}
.cta__eyebrow {
  font-size: 12px; color: var(--c-accent); letter-spacing: .14em; text-transform: uppercase; font-weight: 500;
}
.cta__title { font-size: clamp(24px, 2.4vw, 30px); font-weight: 600; margin: 10px 0 8px; letter-spacing: -.02em; text-wrap: balance; }
.cta__desc { color: rgba(255,255,255,.65); margin: 0; max-width: 520px; }
.cta__btn {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--c-accent); color: #fff;
  padding: 16px 24px;
  border-radius: 999px;
  font-weight: 500; font-size: 15px;
  box-shadow: 0 12px 24px -8px rgba(56,115,248,.55);
  transition: all .35s var(--ease);
}
.cta__btn span { transition: transform .35s var(--ease); }
.cta__btn:hover { background: var(--c-accent-2); transform: translateY(-2px); box-shadow: 0 18px 32px -8px rgba(56,115,248,.65); }
.cta__btn:hover span { transform: translateX(4px); }

/* ──────────────────────────────────────────────────────────────
   FOOTER
   ────────────────────────────────────────────────────────────── */
.footer {
  padding: 32px 0;
  border-top: 1px solid var(--c-line);
  background: #fff;
}
.footer__inner {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 12.5px; color: var(--c-ink-3);
}

/* ──────────────────────────────────────────────────────────────
   LIGHTBOX
   ────────────────────────────────────────────────────────────── */
.lightbox {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(0,0,0,.92);
  display: none; align-items: center; justify-content: center;
  padding: 5vh 4vw;
  opacity: 0; transition: opacity .35s var(--ease);
}
.lightbox.is-open { display: flex; opacity: 1; }
.lightbox img { max-width: 100%; max-height: 90vh; border-radius: 8px; box-shadow: 0 24px 60px rgba(0,0,0,.6); }
.lightbox__close {
  position: absolute; top: 24px; right: 24px;
  width: 40px; height: 40px;
  border-radius: 999px; border: 1px solid rgba(255,255,255,.2);
  background: rgba(255,255,255,.06); color: #fff;
  cursor: pointer; font-size: 16px;
  display: grid; place-items: center;
  transition: all .25s;
}
.lightbox__close:hover { background: rgba(255,255,255,.12); }

/* ──────────────────────────────────────────────────────────────
   RESPONSIVE
   ────────────────────────────────────────────────────────────── */
@media (max-width: 1080px) {
  .hero__grid { grid-template-columns: 1fr; gap: 48px; }
  .mock__floater { right: 16px; bottom: -20px; }
  .blocks { grid-template-columns: 1fr; }
  .results-kpis { grid-template-columns: repeat(2, 1fr); }
  .challenge__grid { grid-template-columns: 1fr; gap: 24px; }
  .gallery__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .container { padding: 0 20px; }
  .nav__links { display: none; }
  .nav__inner { padding: 12px 20px; }
  .hero { padding: 48px 0 80px; }
  .section { padding: 80px 0; }
  .section__head { margin-bottom: 36px; }
  .kpi-row { grid-template-columns: 1fr 1fr; gap: 10px; }
  .kpi { padding: 16px 18px; }
  .kpi__value { font-size: 24px; }
  .mock__body { padding: 16px; }
  .mock__stats { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .mock__stat { padding: 10px; }
  .mock__stat-val { font-size: 16px; }
  .mock__row { grid-template-columns: 1.4fr .7fr .5fr .5fr; padding: 9px 10px; font-size: 11px; }
  .mock__floater { right: 12px; bottom: -16px; padding: 14px 16px; }
  .mock__floater-val { font-size: 20px; }
  .card { padding: 24px; }
  .block { padding: 24px; }
  .results-kpis { grid-template-columns: 1fr 1fr; }
  .rkpi__val { font-size: 22px; }
  .gallery__grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .cta__inner { grid-template-columns: 1fr; padding: 32px; }
  .footer__inner { flex-direction: column; gap: 8px; text-align: center; }
  .hero__headline { font-size: 36px; }
  .hero__amount { font-size: 44px; }
  .hero__line2, .hero__line3 { font-size: 24px; }
}
</style>
<style>
    .loom-rating-popup-overlay {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.6);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 999999;
      backdrop-filter: blur(4px);
      animation: loomFadeIn 0.3s ease;
    }

    @keyframes loomFadeIn {
      from { opacity: 0; }
      to { opacity: 1; }
    }

    @keyframes loomSlideUp {
      from { transform: translateY(20px); opacity: 0; }
      to { transform: translateY(0); opacity: 1; }
    }

    .loom-rating-popup {
      background: white;
      border-radius: 16px;
      padding: 32px;
      max-width: 420px;
      width: 90%;
      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
      text-align: center;
      animation: loomSlideUp 0.4s ease;
      position: relative;
    }

    .loom-rating-popup-close {
      position: absolute;
      top: 12px;
      right: 12px;
      background: transparent;
      border: none;
      font-size: 24px;
      color: #999;
      cursor: pointer;
      padding: 4px 8px;
      line-height: 1;
      transition: color 0.2s;
    }

    .loom-rating-popup-close:hover {
      color: #333;
    }

    .loom-rating-popup-icon {
      width: 64px;
      height: 64px;
      background: linear-gradient(135deg, #625DF5 0%, #7c77ff 100%);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 20px;
      font-size: 32px;
    }

    .loom-rating-popup h2 {
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      font-size: 24px;
      font-weight: 600;
      color: #1a1a1a;
      margin: 0 0 12px 0;
    }

    .loom-rating-popup p {
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      font-size: 15px;
      color: #666;
      margin: 0 0 28px 0;
      line-height: 1.5;
    }

    .loom-rating-popup-buttons {
      display: flex;
      gap: 12px;
      flex-direction: column;
    }

    .loom-rating-popup-button {
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      padding: 14px 28px;
      border-radius: 8px;
      font-size: 15px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.2s;
      border: none;
      text-decoration: none;
      display: inline-block;
    }

    .loom-rating-popup-button-primary {
      background: linear-gradient(135deg, #625DF5 0%, #7c77ff 100%);
      color: white;
      box-shadow: 0 4px 12px rgba(98, 93, 245, 0.3);
    }

    .loom-rating-popup-button-primary:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 16px rgba(98, 93, 245, 0.4);
    }

    .loom-rating-popup-button-secondary {
      background: transparent;
      color: #666;
      border: 1px solid #ddd;
    }

    .loom-rating-popup-button-secondary:hover {
      background: #f5f5f5;
      border-color: #ccc;
    }

    .loom-download-button {
      position: absolute;
      right: 16px;
      top: 16px;
      background: #625DF5;
      color: white;
      padding: 5px;
      border: none;
      cursor: pointer;
      z-index: 50;
      font-size: 14px;
      border-radius: 50%;
      width: 36px;
      height: 36px;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 10px 0px;
    }

    .loader{
      display: none;
      font-size: 10px;
      width: 1em;
      height: 1em;
      border-radius: 50%;
      position: relative;
      text-indent: -9999em;
      animation: mulShdSpin 1.1s infinite ease;
      transform: translateZ(0);
      transform: scale(0.35);
    }
    @keyframes mulShdSpin {
      0%,
      100% {
        box-shadow: 0em -2.6em 0em 0em #ffffff, 1.8em -1.8em 0 0em rgba(255,255,255, 0.2), 2.5em 0em 0 0em rgba(255,255,255, 0.2), 1.75em 1.75em 0 0em rgba(255,255,255, 0.2), 0em 2.5em 0 0em rgba(255,255,255, 0.2), -1.8em 1.8em 0 0em rgba(255,255,255, 0.2), -2.6em 0em 0 0em rgba(255,255,255, 0.5), -1.8em -1.8em 0 0em rgba(255,255,255, 0.7);
      }
      12.5% {
        box-shadow: 0em -2.6em 0em 0em rgba(255,255,255, 0.7), 1.8em -1.8em 0 0em #ffffff, 2.5em 0em 0 0em rgba(255,255,255, 0.2), 1.75em 1.75em 0 0em rgba(255,255,255, 0.2), 0em 2.5em 0 0em rgba(255,255,255, 0.2), -1.8em 1.8em 0 0em rgba(255,255,255, 0.2), -2.6em 0em 0 0em rgba(255,255,255, 0.2), -1.8em -1.8em 0 0em rgba(255,255,255, 0.5);
      }
      25% {
        box-shadow: 0em -2.6em 0em 0em rgba(255,255,255, 0.5), 1.8em -1.8em 0 0em rgba(255,255,255, 0.7), 2.5em 0em 0 0em #ffffff, 1.75em 1.75em 0 0em rgba(255,255,255, 0.2), 0em 2.5em 0 0em rgba(255,255,255, 0.2), -1.8em 1.8em 0 0em rgba(255,255,255, 0.2), -2.6em 0em 0 0em rgba(255,255,255, 0.2), -1.8em -1.8em 0 0em rgba(255,255,255, 0.2);
      }
      37.5% {
        box-shadow: 0em -2.6em 0em 0em rgba(255,255,255, 0.2), 1.8em -1.8em 0 0em rgba(255,255,255, 0.5), 2.5em 0em 0 0em rgba(255,255,255, 0.7), 1.75em 1.75em 0 0em #ffffff, 0em 2.5em 0 0em rgba(255,255,255, 0.2), -1.8em 1.8em 0 0em rgba(255,255,255, 0.2), -2.6em 0em 0 0em rgba(255,255,255, 0.2), -1.8em -1.8em 0 0em rgba(255,255,255, 0.2);
      }
      50% {
        box-shadow: 0em -2.6em 0em 0em rgba(255,255,255, 0.2), 1.8em -1.8em 0 0em rgba(255,255,255, 0.2), 2.5em 0em 0 0em rgba(255,255,255, 0.5), 1.75em 1.75em 0 0em rgba(255,255,255, 0.7), 0em 2.5em 0 0em #ffffff, -1.8em 1.8em 0 0em rgba(255,255,255, 0.2), -2.6em 0em 0 0em rgba(255,255,255, 0.2), -1.8em -1.8em 0 0em rgba(255,255,255, 0.2);
      }
      62.5% {
        box-shadow: 0em -2.6em 0em 0em rgba(255,255,255, 0.2), 1.8em -1.8em 0 0em rgba(255,255,255, 0.2), 2.5em 0em 0 0em rgba(255,255,255, 0.2), 1.75em 1.75em 0 0em rgba(255,255,255, 0.5), 0em 2.5em 0 0em rgba(255,255,255, 0.7), -1.8em 1.8em 0 0em #ffffff, -2.6em 0em 0 0em rgba(255,255,255, 0.2), -1.8em -1.8em 0 0em rgba(255,255,255, 0.2);
      }
      75% {
        box-shadow: 0em -2.6em 0em 0em rgba(255,255,255, 0.2), 1.8em -1.8em 0 0em rgba(255,255,255, 0.2), 2.5em 0em 0 0em rgba(255,255,255, 0.2), 1.75em 1.75em 0 0em rgba(255,255,255, 0.2), 0em 2.5em 0 0em rgba(255,255,255, 0.5), -1.8em 1.8em 0 0em rgba(255,255,255, 0.7), -2.6em 0em 0 0em #ffffff, -1.8em -1.8em 0 0em rgba(255,255,255, 0.2);
      }
      87.5% {
        box-shadow: 0em -2.6em 0em 0em rgba(255,255,255, 0.2), 1.8em -1.8em 0 0em rgba(255,255,255, 0.2), 2.5em 0em 0 0em rgba(255,255,255, 0.2), 1.75em 1.75em 0 0em rgba(255,255,255, 0.2), 0em 2.5em 0 0em rgba(255,255,255, 0.2), -1.8em 1.8em 0 0em rgba(255,255,255, 0.5), -2.6em 0em 0 0em rgba(255,255,255, 0.7), -1.8em -1.8em 0 0em #ffffff;
      }
    }

    .loom-download-button.is-loading {
      cursor: not-allowed;
    }

    .loom-download-button.is-loading .loader{
      display: block;
    }

    .loom-download-button.is-loading img{
      display: none;
    }
    .loom-download-button:hover {
      box-shadow: rgba(0, 0, 0, 0.3) 0px 4px 10px 0px;
    }

    .loom-download-button.pending {
      background: #625DF5; /* Orange for pending state */
      cursor: not-allowed;
      opacity: 0.75;
    }

    .loom-download-button-dropdown {
      position: absolute;
      right: 16px;
      top: 56px; /* Adjusted to position below the button */
      background: white;
      color: black;
      border: 1px solid #ccc;
      border-radius: 4px;
      box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 10px 0px;
      display: none; /* Hidden by default */
      flex-direction: column;
      z-index: 9999;
    }

    .loom-download-button-dropdown.visible {
      display: flex;
    }

    .option-resolution {
      padding: 6px 16px;
      cursor: pointer;
      font-size: 12px;
      background: white;
      font-family: sans-serif;
      font-weight: 500;
    }
    .option-resolution:hover {
      background: #f0f0f0;
    }
  </style></head>
<body style="">

<main id="top">

<!-- ────────────────────────────────────────────────────────────────
     SECTION 1 · HERO
     ──────────────────────────────────────────────────────────────── -->
<section class="hero" data-screen-label="01 Hero">
  <div class="container hero__grid">

    <div class="hero__left">
      <div class="eyebrow reveal is-in">
        <span class="eyebrow__dot"></span>
        <span>Case study · Branża fashion · 6 miesięcy</span>
      </div>

      <h1 class="hero__headline reveal is-in" style="--delay:.05s">
        <span class="hero__amount"><span class="count" data-to="431889" data-suffix=" zł">431 889 zł</span></span>
        <span class="hero__line2">sprzedaży przy <span class="accent">ROAS&nbsp;6.12</span></span>
        <span class="hero__line3">w ciągu 6 miesięcy.</span>
      </h1>

      <p class="hero__desc reveal is-in" style="--delay:.15s">
        Kompletny system skalowania sprzedaży dla polskiej marki premium produkującej torebki we Włoszech.
        Przebudowa strategii, nowy system contentowy i codzienna optymalizacja kampanii — stabilny, rentowny wzrost.
      </p>

      <div class="kpi-row reveal is-in" style="--delay:.25s">
        <article class="kpi">
          <div class="kpi__value"><span class="count" data-to="431889" data-suffix=" zł" data-decimals="0">431 889 zł</span></div>
          <div class="kpi__label">Łączna wartość sprzedaży</div>
        </article>
        <article class="kpi">
          <div class="kpi__value"><span class="count" data-to="70551" data-suffix=" zł" data-decimals="0">70 551 zł</span></div>
          <div class="kpi__label">Łączny budżet reklamowy</div>
        </article>
        <article class="kpi">
          <div class="kpi__value"><span class="count" data-to="1245">1 245</span></div>
          <div class="kpi__label">Liczba zakupów</div>
        </article>
        <article class="kpi kpi--accent">
          <div class="kpi__value"><span class="count" data-to="6.12" data-decimals="2">6,12</span><span class="kpi__unit">×</span></div>
          <div class="kpi__label">Średni zwrot z reklamy (ROAS)</div>
        </article>
      </div>

      <div class="hero__meta reveal is-in" style="--delay:.35s">
        <span>Branża · Fashion / Handbags</span>
        <span class="dot-sep">·</span>
        <span>Kanał · Meta Ads</span>
        <span class="dot-sep">·</span>
        <span>Okres · 6 miesięcy</span>
      </div>
    </div>

    <!-- ── DASHBOARD MOCKUP ── -->
    <aside class="hero__right reveal is-in" style="--delay:.2s">
      <div class="mock">
        <div class="mock__chrome">
          <span class="mock__light"></span>
          <span class="mock__light"></span>
          <span class="mock__light"></span>
          <span class="mock__url">business.meta.com / ads-manager / przegląd</span>
        </div>

        <div class="mock__body">
          <div class="mock__head">
            <div>
              <div class="mock__tag">Wyniki kampanii · ostatnie 6 miesięcy</div>
              <div class="mock__title">Przegląd wydajności</div>
            </div>
            <div class="mock__pill">● Aktywne</div>
          </div>

          <div class="mock__stats">
            <div class="mock__stat">
              <div class="mock__stat-lbl">Wartość konwersji</div>
              <div class="mock__stat-val">431 889,80 zł</div>
              <div class="mock__delta up">▲ +312%</div>
            </div>
            <div class="mock__stat">
              <div class="mock__stat-lbl">ROAS</div>
              <div class="mock__stat-val">6,12<span class="mock__x">×</span></div>
              <div class="mock__delta up">▲ +118%</div>
            </div>
            <div class="mock__stat">
              <div class="mock__stat-lbl">Zakupy</div>
              <div class="mock__stat-val">1 245</div>
              <div class="mock__delta up">▲ +204%</div>
            </div>
          </div>

          <div class="mock__chart">
            <svg viewBox="0 0 600 220" preserveAspectRatio="none" aria-hidden="true">
              <defs>
                <lineargradient id="g1" x1="0" x2="0" y1="0" y2="1">
                  <stop offset="0%" stop-color="#3873F8" stop-opacity=".22"></stop>
                  <stop offset="100%" stop-color="#3873F8" stop-opacity="0"></stop>
                </lineargradient>
              </defs>
              <g class="mock__grid">
                <line x1="0" x2="600" y1="40" y2="40"></line>
                <line x1="0" x2="600" y1="90" y2="90"></line>
                <line x1="0" x2="600" y1="140" y2="140"></line>
                <line x1="0" x2="600" y1="190" y2="190"></line>
              </g>
              <path class="mock__area" d="M0,180 L50,170 100,160 150,140 200,150 250,120 300,110 350,90 400,70 450,55 500,45 550,32 600,22 L600,220 L0,220 Z" fill="url(#g1)"></path>
              <path class="mock__line" d="M0,180 L50,170 100,160 150,140 200,150 250,120 300,110 350,90 400,70 450,55 500,45 550,32 600,22" fill="none" stroke="#3873F8" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path>
              <g class="mock__dots">
                <circle cx="600" cy="22" r="4" fill="#3873F8"></circle>
                <circle cx="600" cy="22" r="9" fill="#3873F8" opacity=".18"></circle>
              </g>
              <g class="mock__xlbl" font-family="Inter" font-size="10" fill="#9aa0a6">
                <text x="6" y="212">Miesiąc 1</text>
                <text x="180" y="212">Miesiąc 2</text>
                <text x="320" y="212">Miesiąc 3</text>
                <text x="450" y="212">Miesiąc 5</text>
                <text x="555" y="212">M 6</text>
              </g>
            </svg>
          </div>

          <div class="mock__rows">
            <div class="mock__row mock__row--head">
              <span>Kampania</span><span>Wydatek</span><span>Zakupy</span><span>ROAS</span>
            </div>
            <div class="mock__row">
              <span>Katalog Ads · ABO</span><span>40 328 zł</span><span>783</span><span class="up">6,63×</span>
            </div>
            <div class="mock__row">
              <span>Prospecting · Video · CBO</span><span>18 213 zł</span><span>252</span><span class="up">5,17×</span>
            </div>
            <div class="mock__row">
              <span>Retargeting · Dynamic</span><span>7 036 zł</span><span>124</span><span class="up">6,26×</span>
            </div>
            <div class="mock__row">
              <span>Black Week · 2025</span><span>1 365 zł</span><span>22</span><span class="up">5,67×</span>
            </div>
          </div>
        </div>
      </div>

      <div class="mock__floater">
        <div class="mock__floater-lbl">Łącznie · 30 kampanii</div>
        <div class="mock__floater-val">6,12<span>×</span> <em>ROAS</em></div>
      </div>
    </aside>

  </div>

  <div class="hero__scroll reveal is-in" style="--delay:.5s">
    <span>Czytaj dalej</span>
    <span class="hero__scroll-line"></span>
  </div>
</section>


<!-- ────────────────────────────────────────────────────────────────
     SECTION 2 · O MARCE / WYZWANIE
     ──────────────────────────────────────────────────────────────── -->
<section class="section section--challenge" id="challenge" data-screen-label="02 Wyzwanie">
  <div class="container">

    <header class="section__head reveal is-in">
      <div class="section__num">02 — Wyzwanie</div>
      <h2 class="section__title">
        Marka premium z potencjałem,<br>
        którego reklamy <span class="accent">nie wykorzystywały.</span>
      </h2>
    </header>

    <div class="challenge__grid">

      <article class="challenge__brand reveal is-in">
        <div class="card card--brand">
          <div class="card__label">O marce</div>
          <p>
            Do współpracy zgłosiła się polska marka premium produkująca torebki we Włoszech.
            Produkty wyróżniały się wysoką jakością wykonania, estetyką oraz dopracowanym brandingiem —
            jednak działania reklamowe nie przekładały się na skalowalną sprzedaż.
          </p>
          <p>
            Pomimo aktywnych kampanii marka nie posiadała spójnego systemu performance marketingowego
            nastawionego na realny wzrost przychodów.
          </p>

          <div class="badge is-in">
            <div class="badge__top">Start współpracy</div>
            <div class="badge__val">ROAS ~250–300%</div>
            <div class="badge__bar"><span style="width:42%"></span></div>
            <div class="badge__foot">
              <span>Punkt startowy</span>
              <span class="badge__target">Cel · 600%+</span>
            </div>
          </div>
        </div>
      </article>

      <article class="challenge__problems reveal is-in" style="--delay:.1s">
        <div class="card__label">Główne problemy</div>

        <ul class="problems">
          <li class="problem">
            <div class="problem__idx">01</div>
            <div>
              <h3>Niski ROAS</h3>
              <p>Dotychczasowe kampanie generowały zbyt niski zwrot z reklamy, aby umożliwić długoterminowe skalowanie.</p>
            </div>
          </li>
          <li class="problem">
            <div class="problem__idx">02</div>
            <div>
              <h3>Brak struktury sprzedażowej</h3>
              <p>Konto reklamowe nie było zbudowane pod realny performance i analizę danych.</p>
            </div>
          </li>
          <li class="problem">
            <div class="problem__idx">03</div>
            <div>
              <h3>Zbyt mała liczba zakupów</h3>
              <p>Ruch nie przekładał się na odpowiednią ilość konwersji.</p>
            </div>
          </li>
          <li class="problem">
            <div class="problem__idx">04</div>
            <div>
              <h3>Brak systemowego contentu</h3>
              <p>Kreacje reklamowe były publikowane nieregularnie i bez spójnej strategii testowania.</p>
            </div>
          </li>
          <li class="problem">
            <div class="problem__idx">05</div>
            <div>
              <h3>Kampanie skupione na aktywności, nie sprzedaży</h3>
              <p>Brakowało jasnego celu zakupowego i skalowania skutecznych zestawów reklam.</p>
            </div>
          </li>
        </ul>
      </article>

    </div>
  </div>
</section>


<!-- ────────────────────────────────────────────────────────────────
     SECTION 3 · STRATEGIA
     ──────────────────────────────────────────────────────────────── -->
<section class="section section--strategy" id="strategy" data-screen-label="03 Strategia">
  <div class="container">

    <header class="section__head reveal is-in">
      <div class="section__num">03 — Strategia</div>
      <h2 class="section__title">
        Content jako fundament<br>
        <span class="accent">skalowania sprzedaży.</span>
      </h2>
      <p class="section__intro">
        W dzisiejszym performance marketingu największą przewagę tworzy nie sama reklama, lecz content, który widzi użytkownik.
        Cały system został oparty na regularnym tworzeniu i testowaniu materiałów reklamowych —
        z celem nie tylko budowy świadomości marki, ale przede wszystkim generowania rentownej sprzedaży.
      </p>
    </header>

    <div class="blocks">

      <article class="block reveal is-in">
        <div class="block__head">
          <div class="block__num">01</div>
          <h3>Struktura konta reklamowego</h3>
        </div>
        <p>
          Przebudowaliśmy konto reklamowe w oparciu o pełny lejek sprzedażowy.
          Wdrożona została nowa struktura kampanii pozwalająca skuteczniej zarządzać budżetem
          i szybciej skalować rentowne działania.
        </p>
        <ul class="block__list">
          <li>Kampanie prospectingowe</li>
          <li>Retargeting</li>
          <li>Kampanie katalogowe</li>
          <li>Optymalizacja pod zakup</li>
        </ul>
      </article>

      <article class="block reveal is-in" style="--delay:.1s">
        <div class="block__head">
          <div class="block__num">02</div>
          <h3>System contentowy</h3>
        </div>
        <p>
          Kluczowy element wzrostu — nowy, regularny system tworzenia kreacji reklamowych.
          Stałe testowanie i iteracja pozwalały utrzymywać wysoką efektywność kampanii.
        </p>
        <ul class="block__list">
          <li>Nowe hooki sprzedażowe</li>
          <li>Formaty video</li>
          <li>Kreacje statyczne</li>
          <li>Komunikacja premium</li>
          <li>Różne kąty sprzedażowe</li>
        </ul>
      </article>

      <article class="block reveal is-in" style="--delay:.2s">
        <div class="block__head">
          <div class="block__num">03</div>
          <h3>Skalowanie kampanii</h3>
        </div>
        <p>
          Codzienna analiza danych i optymalizacja wyników.
          Efektem był stabilny system generujący przewidywalną sprzedaż.
        </p>
        <ul class="block__list">
          <li>Skalowanie budżetów skutecznych kampanii</li>
          <li>Eliminacja nierentownych zestawów</li>
          <li>Skalowanie zwycięskich kreacji</li>
          <li>Poprawa kosztu zakupu</li>
        </ul>
      </article>

    </div>

    <!-- ── CREATIVE GALLERY ── -->
    <div class="gallery">
      <div class="gallery__head reveal is-in">
        <div class="section__num">Galeria kreacji</div>
        <h3 class="gallery__title">Wybrane formaty kreacji <span class="accent">testowanych w kampaniach.</span></h3>
      </div>

      <div class="gallery__grid">
        <figure class="creative reveal is-in" style="--delay:.05s">
          <div class="creative__frame">
            <img loading="lazy" src="blob:https://ecommercemedia.pl/c6961a5a-df35-4f0d-86cf-73ba4debc555" alt="Kreacja — Elegancja, która idzie z Tobą">
          </div>
          <figcaption>
            <span class="creative__type">Static · 1:1</span>
            <span class="creative__hook">Editorial · Premium hook</span>
          </figcaption>
        </figure>

        <figure class="creative reveal is-in" style="--delay:.1s">
          <div class="creative__frame">
            <img loading="lazy" src="blob:https://ecommercemedia.pl/060be42a-9457-4e6d-a127-491011b6ad74" alt="Kreacja — Włoska elegancja, stworzona dla Ciebie">
          </div>
          <figcaption>
            <span class="creative__type">Static · 1:1</span>
            <span class="creative__hook">Brand story · Lifestyle</span>
          </figcaption>
        </figure>

        <figure class="creative reveal is-in" style="--delay:.15s">
          <div class="creative__frame">
            <img loading="lazy" src="blob:https://ecommercemedia.pl/88e6baec-0463-41cd-9ce8-3af87d0d3558" alt="Kreacja — Tworzone we Włoszech">
          </div>
          <figcaption>
            <span class="creative__type">Static · 1:1</span>
            <span class="creative__hook">Craft · Behind the scenes</span>
          </figcaption>
        </figure>

        <figure class="creative reveal is-in" style="--delay:.2s">
          <div class="creative__frame">
            <img loading="lazy" src="blob:https://ecommercemedia.pl/6c787603-af9e-4e1e-b290-1eef19589435" alt="Kreacja — Codzienność w najlepszym wydaniu">
          </div>
          <figcaption>
            <span class="creative__type">Static · 1:1</span>
            <span class="creative__hook">CTA · Odkryj kolekcję</span>
          </figcaption>
        </figure>

        <figure class="creative reveal is-in" style="--delay:.25s">
          <div class="creative__frame">
            <img loading="lazy" src="blob:https://ecommercemedia.pl/28af3029-5234-40b3-8583-81593e23762b" alt="Kreacja — Stworzone we Włoszech, wybrane przez Ciebie">
          </div>
          <figcaption>
            <span class="creative__type">Static · 1:1</span>
            <span class="creative__hook">Made in Italy · Hook</span>
          </figcaption>
        </figure>

        <figure class="creative reveal is-in" style="--delay:.3s">
          <div class="creative__frame">
            <img loading="lazy" src="blob:https://ecommercemedia.pl/35d0e848-226f-474b-805a-d1fc9e27766a" alt="Kreacja — Piękno w każdym detalu">
          </div>
          <figcaption>
            <span class="creative__type">Static · 1:1</span>
            <span class="creative__hook">Detail · USP layout</span>
          </figcaption>
        </figure>
      </div>
    </div>

  </div>
</section>


<!-- ────────────────────────────────────────────────────────────────
     SECTION 4 · WYNIKI
     ──────────────────────────────────────────────────────────────── -->
<section class="section section--results" id="results" data-screen-label="04 Wyniki">
  <div class="container">

    <header class="section__head reveal is-in">
      <div class="section__num">04 — Wyniki</div>
      <h2 class="section__title">
        Wyniki po <span class="accent">6 miesiącach</span> współpracy.
      </h2>
      <p class="section__intro">
        Dzięki przebudowie struktury reklamowej oraz wdrożeniu systemowego content marketingu marka osiągnęła
        stabilny i skalowalny wzrost sprzedaży. W ciągu 6 miesięcy udało się wygenerować ponad
        <strong>431 tys. zł</strong> wartości sprzedaży przy zachowaniu bardzo wysokiej rentowności działań reklamowych.
      </p>
    </header>

    <!-- Screenshot frame -->
    <figure class="screenshot reveal is-in" id="screenshot">
      <div class="screenshot__chrome">
        <span class="mock__light"></span>
        <span class="mock__light"></span>
        <span class="mock__light"></span>
        <span class="mock__url">Meta Ads Manager · Łącznie 30 kampanii · ostatnie 6 miesięcy</span>
        <button class="screenshot__zoom" id="zoomBtn" aria-label="Powiększ">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 3h6v6"></path><path d="M9 21H3v-6"></path><path d="M21 3l-7 7"></path><path d="M3 21l7-7"></path></svg>
        </button>
      </div>
      <div class="screenshot__body">
        <img src="blob:https://ecommercemedia.pl/69120e1e-8a5e-406a-aa9f-eef2d2d3264f" alt="Meta Ads Manager — łącznie 30 kampanii, 6 miesięcy">
      </div>
      <figcaption class="screenshot__cap">
        Źródło · Meta Ads Manager. Dane łączne z 30 kampanii prowadzonych w okresie 6 miesięcy.
      </figcaption>
    </figure>

    <!-- Final KPI Grid (5 cards) -->
    <div class="results-kpis">
      <article class="rkpi reveal is-in">
        <div class="rkpi__lbl">Łączna wartość sprzedaży</div>
        <div class="rkpi__val"><span class="count" data-to="431889.80" data-decimals="2" data-suffix=" zł">431 889,80 zł</span></div>
        <div class="rkpi__sub">→ +312% vs. start</div>
      </article>

      <article class="rkpi reveal is-in" style="--delay:.05s">
        <div class="rkpi__lbl">Łączna wydana kwota</div>
        <div class="rkpi__val"><span class="count" data-to="70551.01" data-decimals="2" data-suffix=" zł">70 551,01 zł</span></div>
        <div class="rkpi__sub">→ budżet 6&nbsp;mies.</div>
      </article>

      <article class="rkpi reveal is-in" style="--delay:.1s">
        <div class="rkpi__lbl">Łączna liczba zakupów</div>
        <div class="rkpi__val"><span class="count" data-to="1245">1 245</span></div>
        <div class="rkpi__sub">→ +204% vs. start</div>
      </article>

      <article class="rkpi rkpi--hero reveal is-in" style="--delay:.15s">
        <div class="rkpi__lbl">Średni ROAS</div>
        <div class="rkpi__val"><span class="count" data-to="6.12" data-decimals="2">6,12</span><span class="rkpi__unit">×</span></div>
        <div class="rkpi__sub">→ z ~2,5–3,0× na 6,12×</div>
      </article>

      <article class="rkpi reveal is-in" style="--delay:.2s">
        <div class="rkpi__lbl">Średni koszt zakupu</div>
        <div class="rkpi__val">~<span class="count" data-to="56.67" data-decimals="2" data-suffix=" zł">56,67 zł</span></div>
        <div class="rkpi__sub">→ stabilny CPA</div>
      </article>
    </div>

    <!-- Closing -->
    <div class="closing reveal is-in">
      <p>
        Efekty zostały osiągnięte w ciągu 6 miesięcy współpracy przy regularnej optymalizacji kampanii
        oraz systematycznym tworzeniu nowych materiałów reklamowych. Kluczowym elementem wzrostu okazało się
        połączenie skutecznego performance marketingu z odpowiednio zaprojektowanym contentem sprzedażowym.
      </p>
    </div>

  </div>
</section>

</main>

<!-- Lightbox -->
<div class="lightbox" id="lightbox" aria-hidden="true">
  <button class="lightbox__close" id="lightboxClose" aria-label="Zamknij">✕</button>
  <img id="lightboxImg" alt="Meta Ads Manager — łącznie 30 kampanii, 6 miesięcy" src="blob:https://ecommercemedia.pl/69120e1e-8a5e-406a-aa9f-eef2d2d3264f">
</div>

<script src="blob:https://ecommercemedia.pl/caeff309-2649-4338-8c37-20f66d5ddd98"></script>

<!-- WordPress: post height to parent for auto-resizing iframe embed -->
<script>
(function () {
  if (window.parent === window) return;
  var send = function () {
    var h = Math.max(
      document.documentElement.scrollHeight,
      document.body ? document.body.scrollHeight : 0
    );
    try { window.parent.postMessage({ type: 'cs-height', height: h }, '*'); } catch (e) {}
  };
  window.addEventListener('load', send);
  window.addEventListener('resize', send);
  if (window.ResizeObserver) {
    var ro = new ResizeObserver(send);
    document.addEventListener('DOMContentLoaded', function () { ro.observe(document.body); });
  }
  // Send a few times after load to catch font + image reflow
  [200, 600, 1200, 2400].forEach(function (d) { setTimeout(send, d); });
})();
</script>





</body></html>/* End custom CSS */