{"id":39208,"date":"2026-05-05T16:36:25","date_gmt":"2026-05-05T14:36:25","guid":{"rendered":"https:\/\/www.collaborativeperks.com\/new-products\/"},"modified":"2026-05-06T11:39:52","modified_gmt":"2026-05-06T09:39:52","slug":"new-products","status":"publish","type":"page","link":"https:\/\/www.collaborativeperks.com\/pl\/new-products\/","title":{"rendered":"Nowe produkty"},"content":{"rendered":"\n<style>\n\n  \/* Hublo palette - V2: organic, illustrative, blocked color sections *\/\n  :root {\n    --navy: #0a1254;\n    --navy-dark: #090f1d;\n    --mint: #36d1a2;\n    --mint-deep: #2bb88a;\n    --mint-soft: #e8faf3;\n    --peach: #ffce86;\n    --peach-soft: #fff8ed;\n    --coral: #ff6b6b;\n    --coral-soft: #ffe8e8;\n    --sky: #86d3ff;\n    --sky-soft: #e8f5ff;\n    --violet: #655cfe;\n    --violet-soft: #f0eeff;\n    --bg-soft: #f4f8ff;\n    --gray-line: #e5e7eb;\n    --gray-text: #6c7c8c;\n    --gray-deep: #414954;\n    --white: #ffffff;\n  }\n\n  \/* ====== HERO with mint background ====== *\/\n  .hero {\n    background: var(--mint-soft);\n    padding: 80px 24px 100px;\n    position: relative;\n    overflow: hidden;\n  }\n  .hero .blob-1 {\n    position: absolute;\n    top: -50px; right: -100px;\n    width: 600px; height: 600px;\n  }\n  .hero .blob-2 {\n    position: absolute;\n    bottom: -200px; left: -100px;\n    width: 400px; height: 400px;\n  }\n  .hero-inner {\n    max-width: 1280px;\n    margin: 0 auto;\n    display: grid;\n    grid-template-columns: 1.1fr 1fr;\n    gap: 60px;\n    align-items: center;\n    position: relative;\n    z-index: 1;\n  }\n  .hero-tag {\n    display: inline-flex;\n    align-items: center;\n    gap: 10px;\n    background: var(--white);\n    padding: 8px 18px 8px 8px;\n    border-radius: 999px;\n    font-size: 13px;\n    font-weight: 600;\n    color: var(--navy);\n    box-shadow: 0 2px 8px rgba(10, 18, 84, 0.06);\n    margin-bottom: 28px;\n  }\n  .hero-tag .pill {\n    background: var(--coral);\n    color: var(--white);\n    padding: 4px 12px;\n    border-radius: 999px;\n    font-size: 11px;\n    text-transform: uppercase;\n    letter-spacing: 0.05em;\n    font-weight: 700;\n  }\n  .hero h1 {\n    font-size: clamp(40px, 6vw, 76px);\n    margin-bottom: 28px;\n    color: var(--navy);\n    font-weight: 600;\n  }\n  .hero h1 .underline {\n    position: relative;\n    display: inline-block;\n    color: var(--navy);\n  }\n  .hero h1 .underline::after {\n    content: '';\n    position: absolute;\n    bottom: -4px;\n    left: -4px;\n    right: -4px;\n    height: 12px;\n    background: var(--peach);\n    z-index: -1;\n    border-radius: 4px;\n    transform: rotate(-1deg);\n  }\n  .hero-lede {\n    font-size: 18px;\n    color: var(--gray-deep);\n    margin-bottom: 36px;\n    max-width: 540px;\n    line-height: 1.7;\n  }\n  .hero-actions {\n    display: flex;\n    gap: 12px;\n    flex-wrap: wrap;\n  }\n  .hero-meta {\n    margin-top: 56px;\n    display: flex;\n    gap: 48px;\n    flex-wrap: wrap;\n  }\n  .hero-meta .stat strong {\n    display: block;\n    font-family: 'DM Sans', sans-serif;\n    font-size: 38px;\n    font-weight: 800;\n    color: var(--navy);\n    line-height: 1;\n  }\n  .hero-meta .stat strong .accent { color: var(--mint-deep); }\n  .hero-meta .stat span {\n    font-size: 13px;\n    color: var(--gray-text);\n    font-weight: 500;\n    margin-top: 6px;\n    display: block;\n  }\n\n  \/* Hero illustration - product mosaic *\/\n  .hero-illu {\n    position: relative;\n    height: 700px;\n  }\n  .ill-block {\n    position: absolute;\n    border-radius: 20px;\n    box-shadow: 0 12px 40px rgba(10, 18, 84, 0.12);\n    transition: transform 0.4s ease;\n  }\n  .ill-block:hover { transform: translateY(-6px) rotate(0); }\n\n  .ill-park {\n    top: 0; left: 0;\n    width: 290px;\n    background: var(--white);\n    padding: 0;\n    transform: rotate(-3deg);\n  }\n  .ill-park .ic-large {\n    width: 56px; height: 56px;\n    border-radius: 14px;\n    background: var(--mint);\n    display: flex; align-items: center; justify-content: center;\n    font-size: 26px;\n    margin-bottom: 14px;\n  }\n  .ill-park h4 {\n    font-size: 18px;\n    margin-bottom: 6px;\n  }\n  .ill-park p {\n    font-size: 13px;\n    color: var(--gray-text);\n    line-height: 1.5;\n  }\n\n  .ill-dei {\n    top: 80px; right: 0;\n    width: 290px;\n    background: var(--peach);\n    padding: 0;\n    transform: rotate(2deg);\n    z-index: 3;\n  }\n  .ill-dei .ic-large {\n    width: 56px; height: 56px;\n    border-radius: 14px;\n    background: var(--white);\n    display: flex; align-items: center; justify-content: center;\n    font-size: 26px;\n    margin-bottom: 14px;\n  }\n  .ill-dei h4 { font-size: 18px; margin-bottom: 6px; color: var(--navy); }\n  .ill-dei p { font-size: 13px; color: var(--navy); opacity: 0.8; line-height: 1.5; }\n  .ill-dei .mini-events {\n    margin-top: 14px;\n    display: flex;\n    flex-direction: column;\n    gap: 6px;\n  }\n  .ill-dei .mini-event {\n    background: rgba(255,255,255,0.6);\n    padding: 6px 10px;\n    border-radius: 8px;\n    font-size: 11px;\n    color: var(--navy);\n    display: flex;\n    justify-content: space-between;\n    font-weight: 600;\n  }\n\n  .ill-reuse {\n    bottom: 0; left: 50px;\n    width: 310px;\n    background: var(--violet);\n    color: var(--white);\n    padding: 0;\n    transform: rotate(-2deg);\n  }\n  .ill-reuse .ic-large {\n    width: 56px; height: 56px;\n    border-radius: 14px;\n    background: rgba(255,255,255,0.15);\n    display: flex; align-items: center; justify-content: center;\n    font-size: 26px;\n    margin-bottom: 14px;\n  }\n  .ill-reuse h4 { font-size: 18px; margin-bottom: 6px; color: white; }\n  .ill-reuse p { font-size: 13px; opacity: 0.9; line-height: 1.5; }\n  .ill-reuse .stat-mini {\n    background: rgba(255,255,255,0.15);\n    padding: 8px 12px;\n    border-radius: 10px;\n    margin-top: 10px;\n    font-size: 12px;\n    display: flex;\n    justify-content: space-between;\n  }\n  .ill-reuse .stat-mini strong { font-family: 'DM Sans', sans-serif; }\n\n  \/* Sticker *\/\n  .sticker {\n    position: absolute;\n    background: var(--coral);\n    color: var(--white);\n    width: 90px; height: 90px;\n    border-radius: 50%;\n    display: flex; align-items: center; justify-content: center;\n    text-align: center;\n    font-family: 'DM Sans', sans-serif;\n    font-weight: 800;\n    font-size: 12px;\n    line-height: 1.2;\n    transform: rotate(15deg);\n    top: 230px;\n    right: 10px;\n    z-index: 4;\n    animation: stickerSpin 8s linear infinite;\n  }\n  @keyframes stickerSpin {\n    from { transform: rotate(15deg); }\n    to { transform: rotate(375deg); }\n  }\n  .sticker-inner {\n    animation: stickerSpinReverse 8s linear infinite;\n  }\n  @keyframes stickerSpinReverse {\n    from { transform: rotate(-15deg); }\n    to { transform: rotate(-375deg); }\n  }\n\n  \/* ====== INTRO ====== *\/\n  .intro {\n    padding: 120px 24px 80px;\n    text-align: center;\n  }\n  .intro-inner { max-width: 760px; margin: 0 auto; }\n  .section-tag {\n    display: inline-flex;\n    align-items: center;\n    gap: 8px;\n    background: var(--violet-soft);\n    color: var(--violet);\n    padding: 8px 18px;\n    border-radius: 999px;\n    font-size: 12px;\n    font-weight: 700;\n    text-transform: uppercase;\n    letter-spacing: 0.1em;\n    margin-bottom: 24px;\n  }\n  .section-tag::before {\n    content: '';\n    width: 6px; height: 6px;\n    background: var(--violet);\n    border-radius: 50%;\n  }\n  .intro h2 {\n    font-size: clamp(36px, 5vw, 56px);\n    margin-bottom: 24px;\n  }\n  .intro h2 .accent { color: var(--mint-deep); }\n  .intro p {\n    font-size: 18px;\n    color: var(--gray-text);\n    line-height: 1.8;\n  }\n\n  \/* ====== MODULES (alternating colored sections) ====== *\/\n  .module {\n    padding: 100px 24px;\n    position: relative;\n    overflow: hidden;\n  }\n  .module-1 { background: var(--mint-soft); }\n  .module-2 { background: var(--peach-soft); }\n  .module-3 { background: var(--violet-soft); }\n\n  .module-inner {\n    max-width: 1280px;\n    margin: 0 auto;\n    display: grid;\n    grid-template-columns: 1fr 1fr;\n    gap: 80px;\n    align-items: center;\n    position: relative;\n    z-index: 2;\n  }\n  .module:nth-of-type(even) .module-content { order: 2; }\n\n  .module-eyebrow {\n    display: inline-flex;\n    align-items: center;\n    gap: 12px;\n    margin-bottom: 24px;\n    background: var(--white);\n    padding: 8px 16px 8px 8px;\n    border-radius: 999px;\n    box-shadow: 0 2px 8px rgba(10, 18, 84, 0.05);\n  }\n  .module-eyebrow .num {\n    width: 32px; height: 32px;\n    border-radius: 50%;\n    background: var(--mint);\n    color: var(--navy);\n    display: flex; align-items: center; justify-content: center;\n    font-family: 'DM Sans', sans-serif;\n    font-weight: 800;\n    font-size: 14px;\n  }\n  .module-2 .module-eyebrow .num { background: var(--peach); }\n  .module-3 .module-eyebrow .num { background: var(--violet); color: var(--white); }\n  .module-eyebrow .cat {\n    font-size: 12px;\n    font-weight: 700;\n    color: var(--navy);\n    text-transform: uppercase;\n    letter-spacing: 0.12em;\n  }\n\n  .module h3 {\n    font-size: clamp(40px, 5vw, 60px);\n    margin-bottom: 18px;\n  }\n  .module h3 .plus { color: var(--mint-deep); }\n  .module-2 h3 .plus { color: #d97706; }\n  .module-3 h3 .plus { color: var(--violet); }\n\n  .module-tagline {\n    font-size: 21px;\n    color: var(--navy);\n    font-weight: 600;\n    margin-bottom: 24px;\n    line-height: 1.3;\n  }\n  .module-desc {\n    color: var(--gray-deep);\n    font-size: 16px;\n    margin-bottom: 32px;\n    line-height: 1.7;\n  }\n  .module-features {\n    list-style: none;\n    margin-bottom: 36px;\n  }\n  .module-features li {\n    padding: 12px 0;\n    display: flex;\n    align-items: flex-start;\n    gap: 14px;\n    font-size: 15px;\n    color: var(--gray-deep);\n  }\n  .module-features li::before {\n    content: '';\n    width: 24px; height: 24px;\n    flex-shrink: 0;\n    border-radius: 8px;\n    background: var(--white);\n    background-image: url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2336d1a2' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C\/polyline%3E%3C\/svg%3E\");\n    background-position: center;\n    background-repeat: no-repeat;\n  }\n\n  \/* ====== Module Visual ====== *\/\n  .module-visual {\n    position: relative;\n  }\n  .visual-mock {\n    background: var(--white);\n    border-radius: 24px;\n    padding: 28px;\n    box-shadow: 0 20px 60px rgba(10, 18, 84, 0.1);\n    position: relative;\n    z-index: 2;\n  }\n  .visual-deco {\n    position: absolute;\n    width: 90px; height: 90px;\n    border-radius: 50%;\n    z-index: 0;\n  }\n  .visual-deco.vd1 { top: -30px; left: -30px; }\n  .visual-deco.vd2 { bottom: -20px; right: -20px; width: 70px; height: 70px; }\n  .module-1 .visual-deco.vd1 { background: var(--peach); }\n  .module-1 .visual-deco.vd2 { background: var(--mint); }\n  .module-2 .visual-deco.vd1 { background: var(--coral); }\n  .module-2 .visual-deco.vd2 { background: var(--violet); }\n  .module-3 .visual-deco.vd1 { background: var(--mint); }\n  .module-3 .visual-deco.vd2 { background: var(--peach); }\n\n  .visual-header {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding-bottom: 16px;\n    margin-bottom: 18px;\n    border-bottom: 1px solid var(--gray-line);\n  }\n  .vh-title {\n    font-family: 'DM Sans', sans-serif;\n    font-size: 14px;\n    font-weight: 700;\n    color: var(--navy);\n  }\n  .vh-sub { font-size: 11px; color: var(--gray-text); margin-top: 2px; }\n  .vh-status {\n    font-size: 11px;\n    color: var(--mint-deep);\n    background: var(--mint-soft);\n    padding: 5px 10px;\n    border-radius: 999px;\n    font-weight: 700;\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n  }\n  .vh-status::before {\n    content: '';\n    width: 6px; height: 6px;\n    border-radius: 50%;\n    background: var(--mint);\n  }\n\n  \/* Park visual *\/\n  .park-grid {\n    display: grid;\n    grid-template-columns: repeat(8, 1fr);\n    gap: 5px;\n    margin-bottom: 18px;\n  }\n  .park-spot {\n    aspect-ratio: 1 \/ 1.4;\n    border-radius: 5px;\n    background: var(--bg-soft);\n    display: flex;\n    align-items: flex-end;\n    justify-content: center;\n    padding: 3px;\n    font-size: 8px;\n    font-weight: 600;\n    color: var(--gray-text);\n  }\n  .park-spot.free {\n    background: var(--mint-soft);\n    color: var(--mint-deep);\n    border: 1.5px solid var(--mint);\n  }\n  .park-spot.your {\n    background: var(--peach);\n    color: var(--navy);\n  }\n  .park-legend {\n    display: flex;\n    gap: 16px;\n    font-size: 11px;\n    color: var(--gray-text);\n    padding-top: 12px;\n    border-top: 1px solid var(--gray-line);\n    font-weight: 500;\n  }\n  .park-legend span { display: inline-flex; align-items: center; gap: 6px; }\n  .park-legend .sw { width: 10px; height: 10px; border-radius: 2px; }\n  .park-legend .sw.taken { background: var(--bg-soft); }\n  .park-legend .sw.free-sw { background: var(--mint-soft); border: 1.5px solid var(--mint); }\n  .park-legend .sw.your-sw { background: var(--peach); }\n\n  \/* DEI visual *\/\n  .dei-events { display: flex; flex-direction: column; gap: 10px; }\n  .dei-card {\n    background: var(--bg-soft);\n    border-radius: 14px;\n    padding: 14px;\n    display: flex;\n    align-items: center;\n    gap: 14px;\n  }\n  .dei-card .date-badge {\n    flex-shrink: 0;\n    width: 52px; height: 52px;\n    border-radius: 12px;\n    background: var(--peach);\n    color: var(--navy);\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    font-family: 'DM Sans', sans-serif;\n  }\n  .dei-card.alt .date-badge { background: var(--mint); }\n  .dei-card.alt2 .date-badge { background: var(--violet); color: white; }\n  .dei-card.alt3 .date-badge { background: var(--coral); color: white; }\n  .dei-card .date-badge .d { font-size: 18px; font-weight: 800; line-height: 1; }\n  .dei-card .date-badge .m { font-size: 9px; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; margin-top: 2px; }\n  .dei-card .info { flex: 1; min-width: 0; }\n  .dei-card .info .title { font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 700; color: var(--navy); margin-bottom: 3px; }\n  .dei-card .info .meta { font-size: 11px; color: var(--gray-text); }\n  .dei-card .pill { font-size: 10px; color: var(--mint-deep); background: var(--mint-soft); padding: 4px 10px; border-radius: 999px; font-weight: 700; flex-shrink: 0; }\n\n  \/* Reuse visual *\/\n  .reuse-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }\n  .reuse-stat { background: var(--bg-soft); border-radius: 12px; padding: 14px; }\n  .reuse-stat .v { font-family: 'DM Sans', sans-serif; font-size: 22px; font-weight: 800; color: var(--navy); line-height: 1; }\n  .reuse-stat .l { font-size: 11px; color: var(--gray-text); margin-top: 4px; font-weight: 500; }\n  .reuse-stat .delta { font-size: 10px; color: var(--mint-deep); font-weight: 700; margin-top: 4px; }\n  .reuse-list { display: flex; flex-direction: column; gap: 8px; }\n  .reuse-item {\n    background: var(--bg-soft);\n    border-radius: 12px;\n    padding: 12px;\n    display: flex;\n    align-items: center;\n    gap: 12px;\n  }\n  .reuse-item .ic {\n    width: 38px; height: 38px;\n    border-radius: 10px;\n    background: var(--violet);\n    color: var(--white);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font-size: 18px;\n    flex-shrink: 0;\n  }\n  .reuse-item:nth-child(2) .ic { background: var(--mint); color: var(--navy); }\n  .reuse-item:nth-child(3) .ic { background: var(--peach); color: var(--navy); }\n  .reuse-item .info { flex: 1; min-width: 0; }\n  .reuse-item .name { font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 700; color: var(--navy); margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n  .reuse-item .meta { font-size: 11px; color: var(--gray-text); }\n  .reuse-item .price { text-align: right; flex-shrink: 0; }\n  .reuse-item .price .new { font-family: 'DM Sans', sans-serif; color: var(--navy); font-weight: 800; font-size: 13px; display: block; }\n  .reuse-item .price .old { color: var(--gray-text); font-size: 10px; text-decoration: line-through; }\n\n  \/* ====== STATS BAND ====== *\/\n  .stats-band {\n    background: var(--navy);\n    color: var(--white);\n    padding: 80px 24px;\n    position: relative;\n    overflow: hidden;\n  }\n  .stats-band::before {\n    content: '';\n    position: absolute;\n    top: -100px; right: 5%;\n    width: 300px; height: 300px;\n    background: var(--mint);\n    border-radius: 50%;\n    opacity: 0.15;\n  }\n  .stats-band::after {\n    content: '';\n    position: absolute;\n    bottom: -100px; left: 5%;\n    width: 250px; height: 250px;\n    background: var(--peach);\n    border-radius: 50%;\n    opacity: 0.15;\n  }\n  .stats-inner {\n    max-width: 1280px;\n    margin: 0 auto;\n    text-align: center;\n    position: relative;\n    z-index: 1;\n  }\n  .stats-inner h2 {\n    color: var(--white);\n    font-size: clamp(28px, 4vw, 42px);\n    margin-bottom: 60px;\n  }\n  .stats-inner h2 .accent { color: var(--mint); }\n  .stats-grid {\n    display: grid;\n    grid-template-columns: repeat(4, 1fr);\n    gap: 32px;\n  }\n  .stat-card {\n    background: rgba(255,255,255,0.05);\n    border: 1px solid rgba(255,255,255,0.1);\n    padding: 36px 24px;\n    border-radius: 20px;\n    text-align: center;\n  }\n  .stat-card .v {\n    font-family: 'DM Sans', sans-serif;\n    font-size: 56px;\n    font-weight: 800;\n    color: var(--mint);\n    line-height: 1;\n    margin-bottom: 12px;\n  }\n  .stat-card:nth-child(2) .v { color: var(--peach); }\n  .stat-card:nth-child(3) .v { color: var(--sky); }\n  .stat-card:nth-child(4) .v { color: var(--coral); }\n  .stat-card .l {\n    font-size: 14px;\n    color: rgba(255,255,255,0.75);\n    line-height: 1.5;\n  }\n\n  \/* ====== CTA ====== *\/\n  .cta {\n    padding: 120px 24px;\n    background: var(--mint);\n    text-align: center;\n    position: relative;\n    overflow: hidden;\n  }\n  .cta::before {\n    content: '';\n    position: absolute;\n    top: -100px; right: -100px;\n    width: 400px; height: 400px;\n    background: var(--peach);\n    border-radius: 50%;\n    opacity: 0.6;\n  }\n  .cta::after {\n    content: '';\n    position: absolute;\n    bottom: -150px; left: -100px;\n    width: 350px; height: 350px;\n    background: var(--white);\n    border-radius: 50%;\n    opacity: 0.2;\n  }\n  .cta-inner {\n    max-width: 720px;\n    margin: 0 auto;\n    position: relative;\n    z-index: 1;\n  }\n  .cta h2 {\n    font-size: clamp(36px, 5vw, 56px);\n    color: var(--navy);\n    margin-bottom: 20px;\n  }\n  .cta p {\n    font-size: 18px;\n    color: var(--navy);\n    opacity: 0.85;\n    margin-bottom: 40px;\n    line-height: 1.7;\n  }\n  .cta-actions {\n    display: flex;\n    gap: 12px;\n    justify-content: center;\n    flex-wrap: wrap;\n  }\n\n  \/* ====== RESPONSIVE ====== *\/\n  @media (max-width: 900px) {\n    .nav-menu { display: none; }\n    .hero-inner { grid-template-columns: 1fr; }\n    .hero-illu { height: 500px; }\n    .module-inner { grid-template-columns: 1fr; gap: 40px; }\n    .module:nth-of-type(even) .module-content { order: 0; }\n    .stats-grid { grid-template-columns: 1fr 1fr; }\n    .footer-inner { grid-template-columns: 1fr 1fr; }\n  }\n  @media (max-width: 500px) {\n    .stats-grid { grid-template-columns: 1fr; }\n    .footer-inner { grid-template-columns: 1fr; }\n  }\n\n\n  \/* ====== ILLUSTRATION CARDS ====== *\/\n  .module-illu-svg {\n    width: 100%;\n    height: auto;\n    display: block;\n    margin-bottom: 16px;\n    border-radius: 12px;\n  }\n\n  .ill-block.with-illu {\n    overflow: hidden;\n    padding: 0;\n  }\n  .ill-block.with-illu .illu-area {\n    width: 100%;\n    aspect-ratio: 5 \/ 3;\n    overflow: hidden;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  }\n  .ill-block.with-illu .illu-area svg {\n    width: 100%;\n    height: 100%;\n    display: block;\n  }\n  .ill-block.with-illu .illu-content {\n    padding: 18px 22px 22px;\n  }\n  .ill-block.with-illu .illu-tag {\n    display: inline-block;\n    font-family: 'DM Sans', sans-serif;\n    font-size: 10px;\n    font-weight: 700;\n    letter-spacing: 0.12em;\n    text-transform: uppercase;\n    margin-bottom: 6px;\n    color: #36d1a2;\n    padding: 4px 10px;\n    border-radius: 999px;\n    background: rgba(54, 209, 162, 0.12);\n  }\n  .ill-block.ill-dei.with-illu .illu-tag { color: #b45309; background: rgba(255,255,255,0.5); }\n  .ill-block.ill-reuse.with-illu .illu-tag { color: #ffce86; background: rgba(255,255,255,0.1); }\n\n  .ill-dei.with-illu h4 { color: var(--navy); }\n  .ill-dei.with-illu p { color: var(--navy); opacity: 0.8; }\n  .ill-reuse.with-illu h4 { color: white; }\n  .ill-reuse.with-illu p { color: rgba(255,255,255,0.9); }\n\n  .module-section-illu {\n    width: 100%;\n    height: 220px;\n    background: var(--white);\n    border-radius: 16px;\n    overflow: hidden;\n    margin-bottom: 18px;\n    box-shadow: 0 4px 20px rgba(10, 18, 84, 0.06);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  }\n  .module-section-illu svg {\n    width: 100%;\n    height: 100%;\n  }\n\n  \/* Override original card heights for new illustrated layout *\/\n  .ill-block.with-illu.ill-park { height: auto !important; }\n  .ill-block.with-illu.ill-dei { height: auto !important; }\n  .ill-block.with-illu.ill-reuse { height: auto !important; }\n\n\n\n  \/* ====== REAL LOGO STYLING ====== *\/\n  .logo {\n    \/* override gap\/font when logo-img present *\/\n    padding: 4px 0;\n  }\n  .logo-img {\n    height: 44px;\n    width: auto;\n    display: block;\n  }\n  .footer-logo-img {\n    height: 56px;\n    width: auto;\n    display: block;\n    margin-bottom: 16px;\n  }\n\n\n  \/* Vehicle type badges on parking spots *\/\n  .park-spot { position: relative; }\n  .vehicle-badge {\n    position: absolute;\n    top: 4px; right: 4px;\n    width: 14px; height: 14px;\n    border-radius: 50%;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    z-index: 2;\n    box-shadow: 0 1px 3px rgba(0,0,0,0.15);\n  }\n  .vehicle-badge svg {\n    width: 9px; height: 9px;\n    display: block;\n  }\n  .vehicle-badge.electric { background: #2bb88a; }\n  .vehicle-badge.electric svg { color: #ffffff; }\n  .vehicle-badge.moto { background: #86d3ff; }\n  .vehicle-badge.moto svg { color: #0a1254; }\n  .vehicle-badge.pmr { background: #0a1254; }\n  .vehicle-badge.pmr svg { color: #ffffff; }\n  .vehicle-badge.bike { background: #ffce86; }\n  .vehicle-badge.bike svg { color: #0a1254; }\n\n  \/* Extended legend with vehicle types *\/\n  .park-legend.with-vehicles {\n    flex-wrap: wrap;\n    row-gap: 8px;\n  }\n  .park-legend.with-vehicles .vehicle-legend {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n  }\n  .park-legend.with-vehicles .vehicle-mark {\n    width: 14px; height: 14px;\n    border-radius: 50%;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n  }\n  .park-legend.with-vehicles .vehicle-mark svg {\n    width: 9px; height: 9px;\n  }\n\n\n  \/* ==== DEMO BUTTON STYLE ==== *\/\n  .btn-demo {\n    background: var(--mint);\n    color: var(--navy);\n    box-shadow: 0 4px 16px rgba(54, 209, 162, 0.45);\n    position: relative;\n    overflow: hidden;\n  }\n  .btn-demo:hover {\n    background: var(--mint-deep);\n    color: var(--white);\n    transform: translateY(-2px);\n    box-shadow: 0 8px 24px rgba(54, 209, 162, 0.55);\n  }\n  .btn-demo::before {\n    content: '';\n    position: absolute;\n    top: 0; left: -100%;\n    width: 100%; height: 100%;\n    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);\n    transition: left 0.6s ease;\n  }\n  .btn-demo:hover::before { left: 100%; }\n\n\n<\/style>\n\n\n\n<section class=\"hero\">\n  <svg class=\"blob-svg blob-1\" viewBox=\"0 0 600 600\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n    <path fill=\"#36d1a2\" fill-opacity=\"0.2\" d=\"M442.5,318.5Q420,387,360,425Q300,463,232,432Q164,401,123.5,335.5Q83,270,121,201.5Q159,133,225,109.5Q291,86,355.5,116Q420,146,447,208Q474,270,442.5,318.5Z\"\/>\n  <\/svg>\n  <svg class=\"blob-svg blob-2\" viewBox=\"0 0 400 400\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n    <path fill=\"#ffce86\" fill-opacity=\"0.4\" d=\"M309.5,239Q288,308,219,329.5Q150,351,99,295.5Q48,240,87,178Q126,116,196,86.5Q266,57,303.5,118.5Q341,180,309.5,239Z\"\/>\n  <\/svg>\n\n  <div class=\"hero-inner\">\n    <div>\n      <div class=\"hero-tag\">\n        <span class=\"pill\">Nowo\u015b\u0107<\/span>\n        3 nowe modu\u0142y \u00b7 wiosna 2026\n      <\/div>\n      <h1>\n        Trzy nowe oprogramowania, aby <span class=\"underline\">wzbogaci\u0107<\/span> sw\u00f3j portal pracowniczy.\n      <\/h1>\n      <p class=\"hero-lede\">\n        Rezerwacja parkingu, platforma po\u015bwi\u0119cona r\u00f3\u017cnorodno\u015bci i inkluzji, wewn\u0119trzny rynek przemys\u0142owy. Trzy rozwi\u0105zania zintegrowane z platform\u0105 Collaborative Perks, zaprojektowane dla du\u017cych grup.\n      <\/p>\n      <div class=\"hero-actions\">\n        <a href=\"https:\/\/www.collaborativeperks.com\/demo\/\" class=\"btn btn-large\">Um\u00f3w demo \u2192<\/a>\n        <a href=\"#park\" class=\"btn btn-outline btn-large\">Odkryj modu\u0142y<\/a>\n      <\/div>\n      <div class=\"hero-meta\">\n        <div class=\"stat\">\n          <strong><span class=\"accent\">+50<\/span><\/strong>\n          <span>Klienci Global 2000<\/span>\n        <\/div>\n        <div class=\"stat\">\n          <strong>2,5M<\/strong>\n          <span>Pracownicy<\/span>\n        <\/div>\n        <div class=\"stat\">\n          <strong>16<\/strong>\n          <span>Dost\u0119pne j\u0119zyki<\/span>\n        <\/div>\n      <\/div>\n    <\/div>\n\n    <div class=\"hero-illu\">\n      <div class=\"ill-block ill-park with-illu\">\n        <div class=\"illu-area\" style=\"background: #f4f8ff;\">\n          <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 400 320\" fill=\"none\">\n  <style>\n    @keyframes carDrive {\n      0% { transform: translateX(-180px); opacity: 0; }\n      15% { opacity: 1; }\n      35% { transform: translateX(0); opacity: 1; }\n      85% { transform: translateX(0); opacity: 1; }\n      100% { transform: translateX(-180px); opacity: 0; }\n    }\n    @keyframes pulseRing {\n      0%, 100% { opacity: 0.3; transform: scale(1); }\n      50% { opacity: 0.6; transform: scale(1.05); }\n    }\n    @keyframes blink {\n      0%, 50%, 100% { opacity: 1; }\n      25%, 75% { opacity: 0.3; }\n    }\n    @keyframes fadeIn {\n      0% { opacity: 0; }\n      100% { opacity: 1; }\n    }\n    @keyframes spotFill {\n      0%, 25% { fill-opacity: 0.2; }\n      50%, 100% { fill-opacity: 1; }\n    }\n    @keyframes phoneScan {\n      0% { transform: translateY(-2px); }\n      50% { transform: translateY(2px); }\n      100% { transform: translateY(-2px); }\n    }\n    @keyframes checkPop {\n      0%, 50% { transform: scale(0); opacity: 0; }\n      65% { transform: scale(1.2); opacity: 1; }\n      75%, 90% { transform: scale(1); opacity: 1; }\n      100% { transform: scale(0); opacity: 0; }\n    }\n    @keyframes labelSlide {\n      0%, 35% { transform: translateY(-8px); opacity: 0; }\n      50%, 90% { transform: translateY(0); opacity: 1; }\n      100% { transform: translateY(-8px); opacity: 0; }\n    }\n\n    .park-car {\n      animation: carDrive 6s ease-in-out infinite;\n      transform-origin: center;\n    }\n    .park-spot-pulse {\n      animation: pulseRing 2.5s ease-in-out infinite;\n      transform-origin: 190px 169px;\n    }\n    .park-mobile-screen {\n      animation: phoneScan 2s ease-in-out infinite;\n      transform-origin: 39px 70px;\n    }\n    .park-mobile-led {\n      animation: blink 1.4s ease-in-out infinite;\n    }\n    .park-confirm-check {\n      animation: checkPop 6s ease-in-out infinite;\n      transform-origin: 140px 50px;\n    }\n    .park-spot-fill {\n      animation: spotFill 6s ease-in-out infinite;\n    }\n    .park-reserved-label {\n      animation: labelSlide 6s ease-in-out infinite;\n      transform-origin: 190px 116px;\n    }\n  \n\n  \/* ====== REAL LOGO STYLING ====== *\/\n  .logo {\n    \/* override gap\/font when logo-img present *\/\n    padding: 4px 0;\n  }\n  .logo-img {\n    height: 44px;\n    width: auto;\n    display: block;\n  }\n  .footer-logo-img {\n    height: 56px;\n    width: auto;\n    display: block;\n    margin-bottom: 16px;\n  }\n\n\n  \/* Vehicle type badges on parking spots *\/\n  .park-spot { position: relative; }\n  .vehicle-badge {\n    position: absolute;\n    top: 4px; right: 4px;\n    width: 14px; height: 14px;\n    border-radius: 50%;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    z-index: 2;\n    box-shadow: 0 1px 3px rgba(0,0,0,0.15);\n  }\n  .vehicle-badge svg {\n    width: 9px; height: 9px;\n    display: block;\n  }\n  .vehicle-badge.electric { background: #2bb88a; }\n  .vehicle-badge.electric svg { color: #ffffff; }\n  .vehicle-badge.moto { background: #86d3ff; }\n  .vehicle-badge.moto svg { color: #0a1254; }\n  .vehicle-badge.pmr { background: #0a1254; }\n  .vehicle-badge.pmr svg { color: #ffffff; }\n  .vehicle-badge.bike { background: #ffce86; }\n  .vehicle-badge.bike svg { color: #0a1254; }\n\n  \/* Extended legend with vehicle types *\/\n  .park-legend.with-vehicles {\n    flex-wrap: wrap;\n    row-gap: 8px;\n  }\n  .park-legend.with-vehicles .vehicle-legend {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n  }\n  .park-legend.with-vehicles .vehicle-mark {\n    width: 14px; height: 14px;\n    border-radius: 50%;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n  }\n  .park-legend.with-vehicles .vehicle-mark svg {\n    width: 9px; height: 9px;\n  }\n\n<\/style>\n\n  <!-- Background blob -->\n  <ellipse cx=\"200\" cy=\"280\" rx=\"160\" ry=\"14\" fill=\"#0a1254\" opacity=\"0.06\"\/>\n\n  <!-- Parking lot floor -->\n  <rect x=\"40\" y=\"80\" width=\"320\" height=\"180\" rx=\"12\" fill=\"#f4f8ff\"\/>\n  <rect x=\"40\" y=\"80\" width=\"320\" height=\"180\" rx=\"12\" stroke=\"#e5e7eb\" stroke-width=\"1.5\"\/>\n\n  <!-- Parking lines -->\n  <line x1=\"100\" y1=\"100\" x2=\"100\" y2=\"240\" stroke=\"#cdd6e0\" stroke-width=\"2\" stroke-dasharray=\"4 4\"\/>\n  <line x1=\"160\" y1=\"100\" x2=\"160\" y2=\"240\" stroke=\"#cdd6e0\" stroke-width=\"2\" stroke-dasharray=\"4 4\"\/>\n  <line x1=\"220\" y1=\"100\" x2=\"220\" y2=\"240\" stroke=\"#cdd6e0\" stroke-width=\"2\" stroke-dasharray=\"4 4\"\/>\n  <line x1=\"280\" y1=\"100\" x2=\"280\" y2=\"240\" stroke=\"#cdd6e0\" stroke-width=\"2\" stroke-dasharray=\"4 4\"\/>\n\n  <!-- Reserved spot with pulse -->\n  <g class=\"park-spot-pulse\">\n    <rect x=\"162\" y=\"100\" width=\"56\" height=\"138\" rx=\"6\" fill=\"#36d1a2\" fill-opacity=\"0.18\"\/>\n    <rect x=\"162\" y=\"100\" width=\"56\" height=\"138\" rx=\"6\" stroke=\"#36d1a2\" stroke-width=\"2.5\"\/>\n  <\/g>\n\n  <!-- Reserved label (slides down) -->\n  <g class=\"park-reserved-label\">\n    <rect x=\"170\" y=\"108\" width=\"40\" height=\"16\" rx=\"8\" fill=\"#36d1a2\"\/>\n    <text x=\"190\" y=\"119\" font-family=\"DM Sans, sans-serif\" font-size=\"9\" font-weight=\"700\" fill=\"#0a1254\" text-anchor=\"middle\">ZAREZERWOWANE<\/text>\n  <\/g>\n  <!-- EV charging indicator on reserved spot -->\n  <g transform=\"translate(168, 222)\">\n    <rect x=\"0\" y=\"0\" width=\"44\" height=\"11\" rx=\"5.5\" fill=\"#2bb88a\"\/>\n    <circle cx=\"6\" cy=\"5.5\" r=\"2.5\" fill=\"#ffffff\"\/>\n    <path d=\"M 6 4 L 4.5 6 L 6.5 6 L 5 8\" stroke=\"#2bb88a\" stroke-width=\"0.8\" stroke-linecap=\"round\" fill=\"none\"\/>\n    <text x=\"11\" y=\"8\" font-family=\"DM Sans, sans-serif\" font-size=\"6\" font-weight=\"700\" fill=\"#ffffff\">\u0141ADOWARKA<\/text>\n  <\/g>\n\n  <!-- Car (animated drive in) -->\n  <g class=\"park-car\">\n    <rect x=\"166\" y=\"135\" width=\"48\" height=\"84\" rx=\"10\" fill=\"#0a1254\"\/>\n    <rect x=\"171\" y=\"142\" width=\"38\" height=\"22\" rx=\"4\" fill=\"#86d3ff\" opacity=\"0.7\"\/>\n    <rect x=\"171\" y=\"190\" width=\"38\" height=\"20\" rx=\"4\" fill=\"#86d3ff\" opacity=\"0.5\"\/>\n    <rect x=\"160\" y=\"150\" width=\"6\" height=\"14\" rx=\"2\" fill=\"#131415\"\/>\n    <rect x=\"214\" y=\"150\" width=\"6\" height=\"14\" rx=\"2\" fill=\"#131415\"\/>\n    <rect x=\"160\" y=\"195\" width=\"6\" height=\"14\" rx=\"2\" fill=\"#131415\"\/>\n    <rect x=\"214\" y=\"195\" width=\"6\" height=\"14\" rx=\"2\" fill=\"#131415\"\/>\n    <circle cx=\"190\" cy=\"175\" r=\"2\" fill=\"#ffce86\"\/>\n  <\/g>\n\n  <!-- Empty spots -->\n  <text x=\"130\" y=\"170\" font-family=\"DM Sans, sans-serif\" font-size=\"11\" font-weight=\"600\" fill=\"#9ca3af\" text-anchor=\"middle\">Wolne<\/text>\n  <text x=\"250\" y=\"170\" font-family=\"DM Sans, sans-serif\" font-size=\"11\" font-weight=\"600\" fill=\"#9ca3af\" text-anchor=\"middle\">Wolne<\/text>\n\n  <!-- Occupied spot -->\n  <rect x=\"288\" y=\"135\" width=\"40\" height=\"84\" rx=\"8\" fill=\"#cdd6e0\" opacity=\"0.5\"\/>\n  <text x=\"308\" y=\"180\" font-family=\"DM Sans, sans-serif\" font-size=\"11\" font-weight=\"600\" fill=\"#6c7c8c\" text-anchor=\"middle\">Zaj\u0119te<\/text>\n\n  <!-- Mobile phone -->\n  <g transform=\"translate(40, 110)\">\n    <rect x=\"2\" y=\"4\" width=\"78\" height=\"140\" rx=\"14\" fill=\"#0a1254\" opacity=\"0.15\"\/>\n    <rect x=\"0\" y=\"0\" width=\"78\" height=\"140\" rx=\"14\" fill=\"#ffffff\" stroke=\"#0a1254\" stroke-width=\"2\"\/>\n    <rect x=\"6\" y=\"14\" width=\"66\" height=\"112\" rx=\"6\" fill=\"#f4f8ff\"\/>\n    <rect x=\"32\" y=\"4\" width=\"14\" height=\"4\" rx=\"2\" fill=\"#0a1254\"\/>\n\n    <!-- App header -->\n    <rect x=\"10\" y=\"20\" width=\"58\" height=\"14\" rx=\"3\" fill=\"#0a1254\"\/>\n    <text x=\"39\" y=\"30\" font-family=\"DM Sans, sans-serif\" font-size=\"7\" font-weight=\"700\" fill=\"#ffffff\" text-anchor=\"middle\">Park+<\/text>\n\n    <!-- Date -->\n    <rect x=\"10\" y=\"40\" width=\"58\" height=\"14\" rx=\"3\" fill=\"#36d1a2\"\/>\n    <text x=\"39\" y=\"50\" font-family=\"DM Sans, sans-serif\" font-size=\"6\" font-weight=\"700\" fill=\"#0a1254\" text-anchor=\"middle\">WT 12 MAJ<\/text>\n\n    <!-- Mini parking grid (animated fill) -->\n    <g transform=\"translate(12, 60)\">\n      <rect x=\"0\" y=\"0\" width=\"11\" height=\"14\" rx=\"1.5\" fill=\"#cdd6e0\"\/>\n      <rect x=\"13\" y=\"0\" width=\"11\" height=\"14\" rx=\"1.5\" fill=\"#36d1a2\" class=\"park-spot-fill\" style=\"animation-delay: 0s\"\/>\n      <rect x=\"26\" y=\"0\" width=\"11\" height=\"14\" rx=\"1.5\" fill=\"#cdd6e0\"\/>\n      <rect x=\"39\" y=\"0\" width=\"11\" height=\"14\" rx=\"1.5\" fill=\"#cdd6e0\"\/>\n      <rect x=\"52\" y=\"0\" width=\"11\" height=\"14\" rx=\"1.5\" fill=\"#36d1a2\" class=\"park-spot-fill\" style=\"animation-delay: 0.3s\"\/>\n\n      <rect x=\"0\" y=\"16\" width=\"11\" height=\"14\" rx=\"1.5\" fill=\"#cdd6e0\"\/>\n      <rect x=\"13\" y=\"16\" width=\"11\" height=\"14\" rx=\"1.5\" fill=\"#ffce86\" stroke=\"#0a1254\" stroke-width=\"1\"\/>\n      <rect x=\"26\" y=\"16\" width=\"11\" height=\"14\" rx=\"1.5\" fill=\"#cdd6e0\"\/>\n      <rect x=\"39\" y=\"16\" width=\"11\" height=\"14\" rx=\"1.5\" fill=\"#36d1a2\" class=\"park-spot-fill\" style=\"animation-delay: 0.6s\"\/>\n      <rect x=\"52\" y=\"16\" width=\"11\" height=\"14\" rx=\"1.5\" fill=\"#cdd6e0\"\/>\n\n      <rect x=\"0\" y=\"32\" width=\"11\" height=\"14\" rx=\"1.5\" fill=\"#36d1a2\" class=\"park-spot-fill\" style=\"animation-delay: 0.9s\"\/>\n      <rect x=\"13\" y=\"32\" width=\"11\" height=\"14\" rx=\"1.5\" fill=\"#cdd6e0\"\/>\n      <rect x=\"26\" y=\"32\" width=\"11\" height=\"14\" rx=\"1.5\" fill=\"#cdd6e0\"\/>\n      <rect x=\"39\" y=\"32\" width=\"11\" height=\"14\" rx=\"1.5\" fill=\"#cdd6e0\"\/>\n      <rect x=\"52\" y=\"32\" width=\"11\" height=\"14\" rx=\"1.5\" fill=\"#36d1a2\" class=\"park-spot-fill\" style=\"animation-delay: 1.2s\"\/>\n      <!-- Vehicle type markers on mini parking grid -->\n      <rect x=\"21\" y=\"1\" width=\"3\" height=\"3\" rx=\"0.5\" fill=\"#2bb88a\" stroke=\"#ffffff\" stroke-width=\"0.4\"\/>\n      <rect x=\"60\" y=\"1\" width=\"3\" height=\"3\" rx=\"0.5\" fill=\"#86d3ff\" stroke=\"#ffffff\" stroke-width=\"0.4\"\/>\n      <rect x=\"47\" y=\"17\" width=\"3\" height=\"3\" rx=\"0.5\" fill=\"#ffce86\" stroke=\"#ffffff\" stroke-width=\"0.4\"\/>\n      <rect x=\"8\" y=\"33\" width=\"3\" height=\"3\" rx=\"0.5\" fill=\"#0a1254\" stroke=\"#ffffff\" stroke-width=\"0.4\"\/>\n    <\/g>\n\n    <!-- Confirm button with LED dot -->\n    <rect x=\"10\" y=\"112\" width=\"58\" height=\"10\" rx=\"5\" fill=\"#0a1254\"\/>\n    <text x=\"39\" y=\"119\" font-family=\"DM Sans, sans-serif\" font-size=\"6\" font-weight=\"700\" fill=\"#ffffff\" text-anchor=\"middle\">REZERWUJ B2<\/text>\n    <circle cx=\"14\" cy=\"117\" r=\"1.2\" fill=\"#36d1a2\" class=\"park-mobile-led\"\/>\n  <\/g>\n\n  <!-- Decorative dots -->\n  <circle cx=\"370\" cy=\"60\" r=\"4\" fill=\"#ffce86\"\/>\n  <circle cx=\"350\" cy=\"50\" r=\"2\" fill=\"#36d1a2\"\/>\n  <circle cx=\"60\" cy=\"70\" r=\"3\" fill=\"#36d1a2\" opacity=\"0.5\"\/>\n\n  <!-- Check mark badge (pop in) -->\n  <g class=\"park-confirm-check\" transform=\"translate(140, 50)\">\n    <circle cx=\"0\" cy=\"0\" r=\"18\" fill=\"#36d1a2\"\/>\n    <path d=\"M -7 0 L -2 5 L 7 -5\" stroke=\"#0a1254\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\" fill=\"none\"\/>\n  <\/g>\n<\/svg>\n\n        <\/div>\n        <div class=\"illu-content\">\n          <div class=\"illu-tag\">Modu\u0142 1 \u00b7 Mobilno\u015b\u0107<\/div>\n          <h4>Park+<\/h4>\n          <p>Zarezerwuj miejsce parkingowe przed wyjazdem do biura.<\/p>\n        <\/div>\n      <\/div>\n      <div class=\"ill-block ill-dei with-illu\">\n        <div class=\"illu-area\" style=\"background: #fff8ed;\">\n          <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 400 320\" fill=\"none\">\n  <style>\n    @keyframes popIn {\n      0%, 5% { transform: scale(0); opacity: 0; }\n      15% { transform: scale(1.1); opacity: 1; }\n      20% { transform: scale(0.95); }\n      25%, 90% { transform: scale(1); opacity: 1; }\n      100% { transform: scale(0); opacity: 0; }\n    }\n    @keyframes slideInRight {\n      0%, 30% { transform: translateX(-30px); opacity: 0; }\n      40%, 90% { transform: translateX(0); opacity: 1; }\n      100% { transform: translateX(-30px); opacity: 0; }\n    }\n    @keyframes heartBeat {\n      0%, 100% { transform: scale(1); }\n      15% { transform: scale(1.2); }\n      30% { transform: scale(1); }\n      45% { transform: scale(1.15); }\n      60% { transform: scale(1); }\n    }\n    @keyframes connectPulse {\n      0%, 100% { opacity: 0.2; }\n      50% { opacity: 0.7; }\n    }\n    @keyframes drawLoop {\n      0%, 100% { opacity: 0; }\n      30%, 70% { opacity: 1; }\n    }\n\n    .person-1 { animation: popIn 6s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }\n    .person-2 { animation: popIn 6s ease-in-out infinite 0.2s; transform-origin: center; transform-box: fill-box; }\n    .person-3 { animation: popIn 6s ease-in-out infinite 0.4s; transform-origin: center; transform-box: fill-box; }\n    .person-4 { animation: popIn 6s ease-in-out infinite 0.6s; transform-origin: center; transform-box: fill-box; }\n    .person-5 { animation: popIn 6s ease-in-out infinite 0.8s; transform-origin: center; transform-box: fill-box; }\n\n    .event-1 { animation: slideInRight 6s ease-in-out infinite 0.4s; }\n    .event-2 { animation: slideInRight 6s ease-in-out infinite 0.7s; }\n    .event-3 { animation: slideInRight 6s ease-in-out infinite 1.0s; }\n\n    .heart-badge { animation: heartBeat 2.5s ease-in-out infinite; transform-origin: 285px 70px; }\n\n    .connect-dot-1 { animation: connectPulse 2s ease-in-out infinite 1.0s; }\n    .connect-dot-2 { animation: connectPulse 2s ease-in-out infinite 1.3s; }\n    .connect-dot-3 { animation: connectPulse 2s ease-in-out infinite 1.6s; }\n\n    .deco-1 { animation: drawLoop 3s ease-in-out infinite; }\n    .deco-2 { animation: drawLoop 3s ease-in-out infinite 0.8s; }\n    .deco-3 { animation: drawLoop 3s ease-in-out infinite 1.6s; }\n  \n\n  \/* ====== REAL LOGO STYLING ====== *\/\n  .logo {\n    \/* override gap\/font when logo-img present *\/\n    padding: 4px 0;\n  }\n  .logo-img {\n    height: 44px;\n    width: auto;\n    display: block;\n  }\n  .footer-logo-img {\n    height: 56px;\n    width: auto;\n    display: block;\n    margin-bottom: 16px;\n  }\n\n\n  \/* Vehicle type badges on parking spots *\/\n  .park-spot { position: relative; }\n  .vehicle-badge {\n    position: absolute;\n    top: 4px; right: 4px;\n    width: 14px; height: 14px;\n    border-radius: 50%;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    z-index: 2;\n    box-shadow: 0 1px 3px rgba(0,0,0,0.15);\n  }\n  .vehicle-badge svg {\n    width: 9px; height: 9px;\n    display: block;\n  }\n  .vehicle-badge.electric { background: #2bb88a; }\n  .vehicle-badge.electric svg { color: #ffffff; }\n  .vehicle-badge.moto { background: #86d3ff; }\n  .vehicle-badge.moto svg { color: #0a1254; }\n  .vehicle-badge.pmr { background: #0a1254; }\n  .vehicle-badge.pmr svg { color: #ffffff; }\n  .vehicle-badge.bike { background: #ffce86; }\n  .vehicle-badge.bike svg { color: #0a1254; }\n\n  \/* Extended legend with vehicle types *\/\n  .park-legend.with-vehicles {\n    flex-wrap: wrap;\n    row-gap: 8px;\n  }\n  .park-legend.with-vehicles .vehicle-legend {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n  }\n  .park-legend.with-vehicles .vehicle-mark {\n    width: 14px; height: 14px;\n    border-radius: 50%;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n  }\n  .park-legend.with-vehicles .vehicle-mark svg {\n    width: 9px; height: 9px;\n  }\n\n<\/style>\n\n  <!-- Background blob -->\n  <ellipse cx=\"200\" cy=\"280\" rx=\"160\" ry=\"14\" fill=\"#0a1254\" opacity=\"0.06\"\/>\n\n  <!-- Background circle -->\n  <circle cx=\"200\" cy=\"160\" r=\"120\" fill=\"#fff8ed\" opacity=\"0.6\"\/>\n\n  <!-- Calendar\/event card (left) -->\n  <g transform=\"translate(40, 80)\">\n    <rect x=\"3\" y=\"5\" width=\"140\" height=\"160\" rx=\"12\" fill=\"#0a1254\" opacity=\"0.12\"\/>\n    <rect x=\"0\" y=\"0\" width=\"140\" height=\"160\" rx=\"12\" fill=\"#ffffff\" stroke=\"#e5e7eb\" stroke-width=\"1.5\"\/>\n\n    <!-- Card header -->\n    <rect x=\"0\" y=\"0\" width=\"140\" height=\"32\" rx=\"12\" fill=\"#0a1254\"\/>\n    <rect x=\"0\" y=\"20\" width=\"140\" height=\"12\" fill=\"#0a1254\"\/>\n    <text x=\"70\" y=\"20\" font-family=\"DM Sans, sans-serif\" font-size=\"11\" font-weight=\"700\" fill=\"#ffffff\" text-anchor=\"middle\">Wydarzenia D&amp;I<\/text>\n\n    <!-- Event 1 -->\n    <g class=\"event-1\" transform=\"translate(8, 42)\">\n      <rect x=\"0\" y=\"0\" width=\"124\" height=\"32\" rx=\"6\" fill=\"#fff8ed\"\/>\n      <rect x=\"6\" y=\"6\" width=\"22\" height=\"22\" rx=\"4\" fill=\"#ffce86\"\/>\n      <text x=\"17\" y=\"16\" font-family=\"DM Sans, sans-serif\" font-size=\"9\" font-weight=\"800\" fill=\"#0a1254\" text-anchor=\"middle\">14<\/text>\n      <text x=\"17\" y=\"24\" font-family=\"DM Sans, sans-serif\" font-size=\"6\" font-weight=\"700\" fill=\"#0a1254\" text-anchor=\"middle\">MAJ<\/text>\n      <text x=\"34\" y=\"14\" font-family=\"DM Sans, sans-serif\" font-size=\"8\" font-weight=\"700\" fill=\"#0a1254\">Kobiety i przyw\u00f3dztwo<\/text>\n      <text x=\"34\" y=\"24\" font-family=\"Inter, sans-serif\" font-size=\"7\" fill=\"#6c7c8c\">12:30 \u00b7 142 zapisanych<\/text>\n    <\/g>\n\n    <!-- Event 2 -->\n    <g class=\"event-2\" transform=\"translate(8, 80)\">\n      <rect x=\"0\" y=\"0\" width=\"124\" height=\"32\" rx=\"6\" fill=\"#e8faf3\"\/>\n      <rect x=\"6\" y=\"6\" width=\"22\" height=\"22\" rx=\"4\" fill=\"#36d1a2\"\/>\n      <text x=\"17\" y=\"16\" font-family=\"DM Sans, sans-serif\" font-size=\"9\" font-weight=\"800\" fill=\"#0a1254\" text-anchor=\"middle\">22<\/text>\n      <text x=\"17\" y=\"24\" font-family=\"DM Sans, sans-serif\" font-size=\"6\" font-weight=\"700\" fill=\"#0a1254\" text-anchor=\"middle\">MAJ<\/text>\n      <text x=\"34\" y=\"14\" font-family=\"DM Sans, sans-serif\" font-size=\"8\" font-weight=\"700\" fill=\"#0a1254\">R\u00f3\u017cnorodno\u015b\u0107 kulturowa<\/text>\n      <text x=\"34\" y=\"24\" font-family=\"Inter, sans-serif\" font-size=\"7\" fill=\"#6c7c8c\">8 warsztat\u00f3w \u00b7 Wszystkie biura<\/text>\n    <\/g>\n\n    <!-- Event 3 -->\n    <g class=\"event-3\" transform=\"translate(8, 118)\">\n      <rect x=\"0\" y=\"0\" width=\"124\" height=\"32\" rx=\"6\" fill=\"#f0eeff\"\/>\n      <rect x=\"6\" y=\"6\" width=\"22\" height=\"22\" rx=\"4\" fill=\"#655cfe\"\/>\n      <text x=\"17\" y=\"16\" font-family=\"DM Sans, sans-serif\" font-size=\"9\" font-weight=\"800\" fill=\"#ffffff\" text-anchor=\"middle\">03<\/text>\n      <text x=\"17\" y=\"24\" font-family=\"DM Sans, sans-serif\" font-size=\"6\" font-weight=\"700\" fill=\"#ffffff\" text-anchor=\"middle\">CZE<\/text>\n      <text x=\"34\" y=\"14\" font-family=\"DM Sans, sans-serif\" font-size=\"8\" font-weight=\"700\" fill=\"#0a1254\">Neuror\u00f3\u017cnorodno\u015b\u0107<\/text>\n      <text x=\"34\" y=\"24\" font-family=\"Inter, sans-serif\" font-size=\"7\" fill=\"#6c7c8c\">Okr\u0105g\u0142y st\u00f3\u0142 \u00b7 89 zapisanych<\/text>\n    <\/g>\n  <\/g>\n\n  <!-- Group of people -->\n  <g transform=\"translate(220, 100)\">\n    <!-- Person 1 -->\n    <g class=\"person-1\" transform=\"translate(0, 30)\">\n      <circle cx=\"20\" cy=\"20\" r=\"20\" fill=\"#36d1a2\"\/>\n      <circle cx=\"20\" cy=\"14\" r=\"7\" fill=\"#fff8ed\"\/>\n      <path d=\"M 7 28 Q 7 20 20 20 Q 33 20 33 28 L 33 40 L 7 40 Z\" fill=\"#fff8ed\"\/>\n      <rect x=\"0\" y=\"40\" width=\"40\" height=\"20\" rx=\"4\" fill=\"#0a1254\"\/>\n    <\/g>\n\n    <!-- Person 2 -->\n    <g class=\"person-2\" transform=\"translate(46, 0)\">\n      <circle cx=\"20\" cy=\"20\" r=\"20\" fill=\"#ffce86\"\/>\n      <circle cx=\"20\" cy=\"14\" r=\"7\" fill=\"#5d4037\"\/>\n      <path d=\"M 7 28 Q 7 20 20 20 Q 33 20 33 28 L 33 40 L 7 40 Z\" fill=\"#5d4037\"\/>\n      <rect x=\"0\" y=\"40\" width=\"40\" height=\"20\" rx=\"4\" fill=\"#0a1254\"\/>\n    <\/g>\n\n    <!-- Person 3 -->\n    <g class=\"person-3\" transform=\"translate(92, 30)\">\n      <circle cx=\"20\" cy=\"20\" r=\"20\" fill=\"#655cfe\"\/>\n      <circle cx=\"20\" cy=\"14\" r=\"7\" fill=\"#ffe4c4\"\/>\n      <path d=\"M 7 28 Q 7 20 20 20 Q 33 20 33 28 L 33 40 L 7 40 Z\" fill=\"#ffe4c4\"\/>\n      <rect x=\"0\" y=\"40\" width=\"40\" height=\"20\" rx=\"4\" fill=\"#0a1254\"\/>\n      <path d=\"M 8 12 Q 8 4 20 4 Q 32 4 32 12 Q 32 18 20 18 Q 8 18 8 12 Z\" fill=\"#655cfe\" opacity=\"0.85\"\/>\n    <\/g>\n\n    <!-- Person 4 -->\n    <g class=\"person-4\" transform=\"translate(23, 70)\">\n      <circle cx=\"20\" cy=\"20\" r=\"20\" fill=\"#ff6b6b\"\/>\n      <circle cx=\"20\" cy=\"14\" r=\"7\" fill=\"#ffe4c4\"\/>\n      <path d=\"M 7 28 Q 7 20 20 20 Q 33 20 33 28 L 33 40 L 7 40 Z\" fill=\"#ffe4c4\"\/>\n      <rect x=\"0\" y=\"40\" width=\"40\" height=\"20\" rx=\"4\" fill=\"#0a1254\"\/>\n    <\/g>\n\n    <!-- Person 5 -->\n    <g class=\"person-5\" transform=\"translate(69, 70)\">\n      <circle cx=\"20\" cy=\"20\" r=\"20\" fill=\"#86d3ff\"\/>\n      <circle cx=\"20\" cy=\"14\" r=\"7\" fill=\"#8d6e63\"\/>\n      <path d=\"M 7 28 Q 7 20 20 20 Q 33 20 33 28 L 33 40 L 7 40 Z\" fill=\"#8d6e63\"\/>\n      <rect x=\"0\" y=\"40\" width=\"40\" height=\"20\" rx=\"4\" fill=\"#0a1254\"\/>\n    <\/g>\n  <\/g>\n\n  <!-- Connection dots -->\n  <circle class=\"connect-dot-1\" cx=\"190\" cy=\"120\" r=\"2\" fill=\"#36d1a2\"\/>\n  <circle class=\"connect-dot-2\" cx=\"200\" cy=\"135\" r=\"2\" fill=\"#36d1a2\"\/>\n  <circle class=\"connect-dot-3\" cx=\"210\" cy=\"145\" r=\"2\" fill=\"#36d1a2\"\/>\n\n  <!-- Heart badge (pulsing) -->\n  <g class=\"heart-badge\" transform=\"translate(285, 70)\">\n    <circle cx=\"0\" cy=\"0\" r=\"18\" fill=\"#ff6b6b\"\/>\n    <path d=\"M 0 5 C -8 -2, -8 -8, -3 -8 C -1 -8, 0 -6, 0 -5 C 0 -6, 1 -8, 3 -8 C 8 -8, 8 -2, 0 5 Z\" fill=\"#ffffff\"\/>\n  <\/g>\n\n  <!-- Decorative dots -->\n  <circle class=\"deco-1\" cx=\"370\" cy=\"60\" r=\"4\" fill=\"#36d1a2\"\/>\n  <circle class=\"deco-2\" cx=\"350\" cy=\"200\" r=\"3\" fill=\"#ffce86\"\/>\n  <circle class=\"deco-3\" cx=\"190\" cy=\"80\" r=\"2\" fill=\"#655cfe\"\/>\n<\/svg>\n\n        <\/div>\n        <div class=\"illu-content\">\n          <div class=\"illu-tag\">Modu\u0142 2 \u00b7 Zaanga\u017cowanie<\/div>\n          <h4>Inclusive+<\/h4>\n          <p>Zarz\u0105dzaj strategi\u0105 D&amp;I na du\u017c\u0105 skal\u0119.<\/p>\n        <\/div>\n      <\/div>\n      <div class=\"ill-block ill-reuse with-illu\">\n        <div class=\"illu-area\" style=\"background: #f0eeff;\">\n          <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 400 320\" fill=\"none\">\n  <style>\n    @keyframes equipMove {\n      0% { transform: translateX(-100px); opacity: 0; }\n      15% { opacity: 1; transform: translateX(-100px); }\n      40% { transform: translateX(0); }\n      60% { transform: translateX(0); }\n      80% { transform: translateX(110px); opacity: 1; }\n      100% { transform: translateX(110px); opacity: 0; }\n    }\n    @keyframes drawArrow {\n      0% { stroke-dashoffset: 240; }\n      40% { stroke-dashoffset: 0; }\n      80% { stroke-dashoffset: 0; }\n      100% { stroke-dashoffset: 240; }\n    }\n    @keyframes arrowHeadAppear {\n      0%, 35% { opacity: 0; }\n      45%, 75% { opacity: 0.6; }\n      100% { opacity: 0; }\n    }\n    @keyframes priceFlash {\n      0%, 100% { transform: scale(1); }\n      50% { transform: scale(1.1); }\n    }\n    @keyframes savingsTick {\n      0%, 100% { transform: translateY(0); }\n      50% { transform: translateY(-2px); }\n    }\n    @keyframes leafBob {\n      0%, 100% { transform: translateY(0) rotate(0); }\n      50% { transform: translateY(-4px) rotate(-5deg); }\n    }\n    @keyframes blinkLight {\n      0%, 100% { opacity: 0.3; }\n      50% { opacity: 1; }\n    }\n    @keyframes tagBounce {\n      0%, 100% { transform: scale(1) rotate(0); }\n      50% { transform: scale(1.05) rotate(-2deg); }\n    }\n    @keyframes pulseRing2 {\n      0% { r: 14; opacity: 0.6; }\n      100% { r: 28; opacity: 0; }\n    }\n\n    .equipment-moving {\n      animation: equipMove 5s ease-in-out infinite;\n      transform-origin: center;\n    }\n    .arrow-trace {\n      stroke-dasharray: 240;\n      animation: drawArrow 5s ease-in-out infinite;\n    }\n    .arrow-head {\n      animation: arrowHeadAppear 5s ease-in-out infinite;\n    }\n    .savings-bubble {\n      animation: savingsTick 2s ease-in-out infinite;\n      transform-origin: 200px 50px;\n    }\n    .price-tag {\n      animation: priceFlash 2s ease-in-out infinite;\n      transform-origin: 215px 130px;\n    }\n    .leaf-icon {\n      animation: leafBob 3s ease-in-out infinite;\n      transform-origin: 50px 60px;\n    }\n    .building-light-1 { animation: blinkLight 2s ease-in-out infinite 0.3s; }\n    .building-light-2 { animation: blinkLight 2s ease-in-out infinite 0.7s; }\n    .building-light-3 { animation: blinkLight 2s ease-in-out infinite 1.1s; }\n    .building-light-4 { animation: blinkLight 2s ease-in-out infinite 1.5s; }\n    .vend-tag { animation: tagBounce 2.5s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }\n    .achat-tag { animation: tagBounce 2.5s ease-in-out infinite 1.2s; transform-origin: center; transform-box: fill-box; }\n  \n\n  \/* ====== REAL LOGO STYLING ====== *\/\n  .logo {\n    \/* override gap\/font when logo-img present *\/\n    padding: 4px 0;\n  }\n  .logo-img {\n    height: 44px;\n    width: auto;\n    display: block;\n  }\n  .footer-logo-img {\n    height: 56px;\n    width: auto;\n    display: block;\n    margin-bottom: 16px;\n  }\n\n\n  \/* Vehicle type badges on parking spots *\/\n  .park-spot { position: relative; }\n  .vehicle-badge {\n    position: absolute;\n    top: 4px; right: 4px;\n    width: 14px; height: 14px;\n    border-radius: 50%;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    z-index: 2;\n    box-shadow: 0 1px 3px rgba(0,0,0,0.15);\n  }\n  .vehicle-badge svg {\n    width: 9px; height: 9px;\n    display: block;\n  }\n  .vehicle-badge.electric { background: #2bb88a; }\n  .vehicle-badge.electric svg { color: #ffffff; }\n  .vehicle-badge.moto { background: #86d3ff; }\n  .vehicle-badge.moto svg { color: #0a1254; }\n  .vehicle-badge.pmr { background: #0a1254; }\n  .vehicle-badge.pmr svg { color: #ffffff; }\n  .vehicle-badge.bike { background: #ffce86; }\n  .vehicle-badge.bike svg { color: #0a1254; }\n\n  \/* Extended legend with vehicle types *\/\n  .park-legend.with-vehicles {\n    flex-wrap: wrap;\n    row-gap: 8px;\n  }\n  .park-legend.with-vehicles .vehicle-legend {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n  }\n  .park-legend.with-vehicles .vehicle-mark {\n    width: 14px; height: 14px;\n    border-radius: 50%;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n  }\n  .park-legend.with-vehicles .vehicle-mark svg {\n    width: 9px; height: 9px;\n  }\n\n<\/style>\n\n  <!-- Background blob -->\n  <ellipse cx=\"200\" cy=\"280\" rx=\"160\" ry=\"14\" fill=\"#0a1254\" opacity=\"0.06\"\/>\n\n  <!-- Background circle -->\n  <circle cx=\"200\" cy=\"160\" r=\"120\" fill=\"#f0eeff\" opacity=\"0.5\"\/>\n\n  <!-- Building 1 (left) - Selling -->\n  <g transform=\"translate(40, 130)\">\n    <rect x=\"0\" y=\"20\" width=\"80\" height=\"100\" rx=\"4\" fill=\"#ffffff\" stroke=\"#0a1254\" stroke-width=\"2\"\/>\n    <rect x=\"-4\" y=\"14\" width=\"88\" height=\"10\" rx=\"2\" fill=\"#0a1254\"\/>\n\n    <!-- Animated windows -->\n    <rect class=\"building-light-1\" x=\"10\" y=\"32\" width=\"14\" height=\"14\" rx=\"2\" fill=\"#86d3ff\"\/>\n    <rect x=\"33\" y=\"32\" width=\"14\" height=\"14\" rx=\"2\" fill=\"#86d3ff\"\/>\n    <rect class=\"building-light-2\" x=\"56\" y=\"32\" width=\"14\" height=\"14\" rx=\"2\" fill=\"#86d3ff\"\/>\n    <rect x=\"10\" y=\"54\" width=\"14\" height=\"14\" rx=\"2\" fill=\"#86d3ff\"\/>\n    <rect class=\"building-light-3\" x=\"33\" y=\"54\" width=\"14\" height=\"14\" rx=\"2\" fill=\"#86d3ff\"\/>\n    <rect x=\"56\" y=\"54\" width=\"14\" height=\"14\" rx=\"2\" fill=\"#86d3ff\"\/>\n\n    <rect x=\"33\" y=\"86\" width=\"14\" height=\"34\" rx=\"2\" fill=\"#0a1254\"\/>\n    <rect x=\"6\" y=\"0\" width=\"68\" height=\"14\" rx=\"3\" fill=\"#36d1a2\"\/>\n    <text x=\"40\" y=\"10\" font-family=\"DM Sans, sans-serif\" font-size=\"8\" font-weight=\"700\" fill=\"#0a1254\" text-anchor=\"middle\">SP\u00d3\u0141KA A<\/text>\n\n    <!-- Vend tag -->\n    <g class=\"vend-tag\" transform=\"translate(70, 76)\">\n      <rect x=\"0\" y=\"0\" width=\"34\" height=\"14\" rx=\"7\" fill=\"#ff6b6b\"\/>\n      <text x=\"17\" y=\"10\" font-family=\"DM Sans, sans-serif\" font-size=\"7\" font-weight=\"700\" fill=\"#ffffff\" text-anchor=\"middle\">SPRZEDAJE<\/text>\n    <\/g>\n  <\/g>\n\n  <!-- Building 2 (right) - Buying -->\n  <g transform=\"translate(280, 130)\">\n    <rect x=\"0\" y=\"20\" width=\"80\" height=\"100\" rx=\"4\" fill=\"#ffffff\" stroke=\"#0a1254\" stroke-width=\"2\"\/>\n    <rect x=\"-4\" y=\"14\" width=\"88\" height=\"10\" rx=\"2\" fill=\"#0a1254\"\/>\n\n    <!-- Animated windows -->\n    <rect x=\"10\" y=\"32\" width=\"14\" height=\"14\" rx=\"2\" fill=\"#86d3ff\"\/>\n    <rect class=\"building-light-4\" x=\"33\" y=\"32\" width=\"14\" height=\"14\" rx=\"2\" fill=\"#86d3ff\"\/>\n    <rect x=\"56\" y=\"32\" width=\"14\" height=\"14\" rx=\"2\" fill=\"#86d3ff\"\/>\n    <rect class=\"building-light-1\" x=\"10\" y=\"54\" width=\"14\" height=\"14\" rx=\"2\" fill=\"#86d3ff\"\/>\n    <rect x=\"33\" y=\"54\" width=\"14\" height=\"14\" rx=\"2\" fill=\"#86d3ff\"\/>\n    <rect class=\"building-light-2\" x=\"56\" y=\"54\" width=\"14\" height=\"14\" rx=\"2\" fill=\"#86d3ff\"\/>\n\n    <rect x=\"33\" y=\"86\" width=\"14\" height=\"34\" rx=\"2\" fill=\"#0a1254\"\/>\n    <rect x=\"6\" y=\"0\" width=\"68\" height=\"14\" rx=\"3\" fill=\"#655cfe\"\/>\n    <text x=\"40\" y=\"10\" font-family=\"DM Sans, sans-serif\" font-size=\"8\" font-weight=\"700\" fill=\"#ffffff\" text-anchor=\"middle\">SP\u00d3\u0141KA B<\/text>\n\n    <!-- Achat tag -->\n    <g class=\"achat-tag\" transform=\"translate(-26, 76)\">\n      <rect x=\"0\" y=\"0\" width=\"34\" height=\"14\" rx=\"7\" fill=\"#36d1a2\"\/>\n      <text x=\"17\" y=\"10\" font-family=\"DM Sans, sans-serif\" font-size=\"7\" font-weight=\"700\" fill=\"#0a1254\" text-anchor=\"middle\">KUPUJE<\/text>\n    <\/g>\n  <\/g>\n\n  <!-- Equipment moving between buildings -->\n  <g class=\"equipment-moving\" transform=\"translate(150, 160)\">\n    <!-- Pallet -->\n    <rect x=\"-2\" y=\"60\" width=\"104\" height=\"10\" rx=\"1\" fill=\"#0a1254\" opacity=\"0.4\"\/>\n    <rect x=\"0\" y=\"58\" width=\"100\" height=\"6\" rx=\"1\" fill=\"#8d6e63\"\/>\n    <rect x=\"0\" y=\"64\" width=\"100\" height=\"6\" rx=\"1\" fill=\"#8d6e63\"\/>\n\n    <!-- Equipment box -->\n    <rect x=\"10\" y=\"0\" width=\"80\" height=\"60\" rx=\"6\" fill=\"#ffce86\" stroke=\"#0a1254\" stroke-width=\"2\"\/>\n    <rect x=\"20\" y=\"10\" width=\"60\" height=\"20\" rx=\"3\" fill=\"#0a1254\"\/>\n    <circle cx=\"30\" cy=\"20\" r=\"4\" fill=\"#36d1a2\"\/>\n    <circle cx=\"44\" cy=\"20\" r=\"4\" fill=\"#ff6b6b\"\/>\n    <circle cx=\"58\" cy=\"20\" r=\"4\" fill=\"#ffce86\"\/>\n    <rect x=\"20\" y=\"36\" width=\"35\" height=\"6\" rx=\"2\" fill=\"#0a1254\" opacity=\"0.7\"\/>\n    <rect x=\"20\" y=\"46\" width=\"50\" height=\"6\" rx=\"2\" fill=\"#0a1254\" opacity=\"0.5\"\/>\n\n    <!-- Price tag (pulsing) -->\n    <g class=\"price-tag\" transform=\"translate(50, -22)\">\n      <path d=\"M 0 0 L 30 0 L 38 8 L 30 16 L 0 16 Z\" fill=\"#36d1a2\"\/>\n      <text x=\"15\" y=\"11\" font-family=\"DM Sans, sans-serif\" font-size=\"8\" font-weight=\"800\" fill=\"#0a1254\" text-anchor=\"middle\">-66%<\/text>\n      <circle cx=\"4\" cy=\"8\" r=\"2\" fill=\"#0a1254\"\/>\n    <\/g>\n  <\/g>\n\n  <!-- Circular arrow (animated trace) -->\n  <g transform=\"translate(200, 160)\">\n    <path class=\"arrow-trace\"\n          d=\"M -100 0 Q -100 -80 0 -80 Q 100 -80 100 0\"\n          stroke=\"#0a1254\"\n          stroke-width=\"2.5\"\n          stroke-linecap=\"round\"\n          fill=\"none\"\n          opacity=\"0.5\"\/>\n    <path class=\"arrow-head\" d=\"M 95 -8 L 105 0 L 95 8\" stroke=\"#0a1254\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" fill=\"none\"\/>\n  <\/g>\n\n  <!-- Savings indicator (bouncing) -->\n  <g class=\"savings-bubble\" transform=\"translate(200, 50)\">\n    <rect x=\"-50\" y=\"-16\" width=\"100\" height=\"32\" rx=\"16\" fill=\"#0a1254\"\/>\n    <text x=\"-30\" y=\"5\" font-family=\"DM Sans, sans-serif\" font-size=\"14\" font-weight=\"800\" fill=\"#36d1a2\" text-anchor=\"middle\">\u20ac<\/text>\n    <text x=\"10\" y=\"-2\" font-family=\"DM Sans, sans-serif\" font-size=\"9\" font-weight=\"700\" fill=\"#ffffff\" text-anchor=\"middle\">Oszcz\u0119dno\u015bci<\/text>\n    <text x=\"10\" y=\"9\" font-family=\"DM Sans, sans-serif\" font-size=\"9\" font-weight=\"700\" fill=\"#36d1a2\" text-anchor=\"middle\">1,2 M\u20ac<\/text>\n  <\/g>\n\n  <!-- CO2 leaf icon (bobbing) -->\n  <g class=\"leaf-icon\" transform=\"translate(50, 60)\">\n    <circle cx=\"0\" cy=\"0\" r=\"18\" fill=\"#36d1a2\"\/>\n    <path d=\"M -7 -5 Q -7 -10 -2 -10 Q 5 -10 5 -5 Q 10 -5 10 0 Q 10 8 0 8 Q -10 8 -10 0 Q -10 -5 -7 -5 Z\" fill=\"#0a1254\" opacity=\"0.85\"\/>\n    <path d=\"M -2 -2 L 6 -8\" stroke=\"#36d1a2\" stroke-width=\"1.5\" stroke-linecap=\"round\"\/>\n  <\/g>\n\n  <!-- Decorative dots -->\n  <circle cx=\"370\" cy=\"60\" r=\"4\" fill=\"#ffce86\"\/>\n  <circle cx=\"30\" cy=\"200\" r=\"3\" fill=\"#36d1a2\"\/>\n  <circle cx=\"380\" cy=\"240\" r=\"3\" fill=\"#655cfe\"\/>\n<\/svg>\n\n        <\/div>\n        <div class=\"illu-content\">\n          <div class=\"illu-tag\">Modu\u0142 3 \u00b7 Gospodarka cyrkularna<\/div>\n          <h4>Reuse+<\/h4>\n          <p>Wewn\u0119trzny rynek przemys\u0142owy mi\u0119dzy sp\u00f3\u0142kami zale\u017cnymi.<\/p>\n        <\/div>\n      <\/div>\n      <div class=\"sticker\">\n        <div class=\"sticker-inner\">\n          NOWE<br>2026\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/section>\n\n\n\n<section class=\"intro\">\n  <div class=\"intro-inner\">\n    <div class=\"section-tag\">Nowo\u015bci 2026<\/div>\n    <h2>Jedna platforma. Teraz <span class=\"accent\">15 modu\u0142\u00f3w<\/span>.<\/h2>\n    <p>\n      Od 2011 roku Collaborative Perks wspiera dzia\u0142y HR du\u017cych mi\u0119dzynarodowych grup. W 2026 roku rozszerzamy nasz katalog o trzy nowe modu\u0142y zaprojektowane w odpowiedzi na potrzeby wyra\u017cone przez naszych klient\u00f3w: mobilno\u015b\u0107 w biurze, zaanga\u017cowanie D&amp;I i gospodark\u0119 cyrkularn\u0105.\n    <\/p>\n  <\/div>\n<\/section>\n\n\n\n<section class=\"module module-1\" id=\"park\">\n  <div class=\"module-inner\">\n    <div class=\"module-content\">\n      <div class=\"module-eyebrow\">\n        <span class=\"num\">1<\/span>\n        <span class=\"cat\">Modu\u0142 Mobilno\u015b\u0107<\/span>\n      <\/div>\n      <h3>Park<span class=\"plus\">+<\/span><\/h3>\n      <p class=\"module-tagline\">Miejsce parkingowe zarezerwowane z wyprzedzeniem.<\/p>\n      <p class=\"module-desc\">\n        Wraz z powrotem do biura i polityk\u0105 pracy hybrydowej parking firmowy sta\u0142 si\u0119 rzadkim zasobem. Park+ pozwala pracownikom zarezerwowa\u0107 miejsce parkingowe z wyprzedzeniem, w ci\u0105gu kilku sekund, z komputera lub telefonu.\n      <\/p>\n      <ul class=\"module-features\">\n        <li>Rezerwacja w czasie rzeczywistym wed\u0142ug dost\u0119pno\u015bci, strefy i typu pojazdu<\/li>\n        <li>Konfigurowalne regu\u0142y przydzia\u0142u (priorytety, limity, miejsca dla niepe\u0142nosprawnych)<\/li>\n        <li>Integracja z systemami HRIS i kalendarzami Outlook \/ Google Calendar<\/li>\n        <li>Dashboard zaj\u0119to\u015bci i miesi\u0119czne raporty u\u017cytkowania<\/li>\n        <li>Kompatybilny z pojazdami elektrycznymi, motocyklami i miejscami dla niepe\u0142nosprawnych<\/li>\n      <\/ul>\n      <a href=\"https:\/\/parking.collaborativeperks.com\/pl\/index.html\" class=\"btn\" target=\"_blank\" rel=\"noopener\">Odkryj Park+ \u2192<\/a>\n      <a href=\"https:\/\/parking.collaborativeperks.com\/pl\/index.html\" class=\"btn btn-demo\" target=\"_blank\" rel=\"noopener\" style=\"margin-top: 8px;\">\ud83d\ude80 Wypr\u00f3buj demo online<\/a>\n    <\/div>\n\n    <div class=\"module-visual\">\n      <div class=\"visual-deco vd1\"><\/div>\n      <div class=\"visual-deco vd2\"><\/div>\n      <div class=\"module-section-illu\">\n        <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 400 320\" fill=\"none\">\n  <style>\n    @keyframes carDrive {\n      0% { transform: translateX(-180px); opacity: 0; }\n      15% { opacity: 1; }\n      35% { transform: translateX(0); opacity: 1; }\n      85% { transform: translateX(0); opacity: 1; }\n      100% { transform: translateX(-180px); opacity: 0; }\n    }\n    @keyframes pulseRing {\n      0%, 100% { opacity: 0.3; transform: scale(1); }\n      50% { opacity: 0.6; transform: scale(1.05); }\n    }\n    @keyframes blink {\n      0%, 50%, 100% { opacity: 1; }\n      25%, 75% { opacity: 0.3; }\n    }\n    @keyframes fadeIn {\n      0% { opacity: 0; }\n      100% { opacity: 1; }\n    }\n    @keyframes spotFill {\n      0%, 25% { fill-opacity: 0.2; }\n      50%, 100% { fill-opacity: 1; }\n    }\n    @keyframes phoneScan {\n      0% { transform: translateY(-2px); }\n      50% { transform: translateY(2px); }\n      100% { transform: translateY(-2px); }\n    }\n    @keyframes checkPop {\n      0%, 50% { transform: scale(0); opacity: 0; }\n      65% { transform: scale(1.2); opacity: 1; }\n      75%, 90% { transform: scale(1); opacity: 1; }\n      100% { transform: scale(0); opacity: 0; }\n    }\n    @keyframes labelSlide {\n      0%, 35% { transform: translateY(-8px); opacity: 0; }\n      50%, 90% { transform: translateY(0); opacity: 1; }\n      100% { transform: translateY(-8px); opacity: 0; }\n    }\n\n    .park-car {\n      animation: carDrive 6s ease-in-out infinite;\n      transform-origin: center;\n    }\n    .park-spot-pulse {\n      animation: pulseRing 2.5s ease-in-out infinite;\n      transform-origin: 190px 169px;\n    }\n    .park-mobile-screen {\n      animation: phoneScan 2s ease-in-out infinite;\n      transform-origin: 39px 70px;\n    }\n    .park-mobile-led {\n      animation: blink 1.4s ease-in-out infinite;\n    }\n    .park-confirm-check {\n      animation: checkPop 6s ease-in-out infinite;\n      transform-origin: 140px 50px;\n    }\n    .park-spot-fill {\n      animation: spotFill 6s ease-in-out infinite;\n    }\n    .park-reserved-label {\n      animation: labelSlide 6s ease-in-out infinite;\n      transform-origin: 190px 116px;\n    }\n  \n\n  \/* ====== REAL LOGO STYLING ====== *\/\n  .logo {\n    \/* override gap\/font when logo-img present *\/\n    padding: 4px 0;\n  }\n  .logo-img {\n    height: 44px;\n    width: auto;\n    display: block;\n  }\n  .footer-logo-img {\n    height: 56px;\n    width: auto;\n    display: block;\n    margin-bottom: 16px;\n  }\n\n\n  \/* Vehicle type badges on parking spots *\/\n  .park-spot { position: relative; }\n  .vehicle-badge {\n    position: absolute;\n    top: 4px; right: 4px;\n    width: 14px; height: 14px;\n    border-radius: 50%;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    z-index: 2;\n    box-shadow: 0 1px 3px rgba(0,0,0,0.15);\n  }\n  .vehicle-badge svg {\n    width: 9px; height: 9px;\n    display: block;\n  }\n  .vehicle-badge.electric { background: #2bb88a; }\n  .vehicle-badge.electric svg { color: #ffffff; }\n  .vehicle-badge.moto { background: #86d3ff; }\n  .vehicle-badge.moto svg { color: #0a1254; }\n  .vehicle-badge.pmr { background: #0a1254; }\n  .vehicle-badge.pmr svg { color: #ffffff; }\n  .vehicle-badge.bike { background: #ffce86; }\n  .vehicle-badge.bike svg { color: #0a1254; }\n\n  \/* Extended legend with vehicle types *\/\n  .park-legend.with-vehicles {\n    flex-wrap: wrap;\n    row-gap: 8px;\n  }\n  .park-legend.with-vehicles .vehicle-legend {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n  }\n  .park-legend.with-vehicles .vehicle-mark {\n    width: 14px; height: 14px;\n    border-radius: 50%;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n  }\n  .park-legend.with-vehicles .vehicle-mark svg {\n    width: 9px; height: 9px;\n  }\n\n<\/style>\n\n  <!-- Background blob -->\n  <ellipse cx=\"200\" cy=\"280\" rx=\"160\" ry=\"14\" fill=\"#0a1254\" opacity=\"0.06\"\/>\n\n  <!-- Parking lot floor -->\n  <rect x=\"40\" y=\"80\" width=\"320\" height=\"180\" rx=\"12\" fill=\"#f4f8ff\"\/>\n  <rect x=\"40\" y=\"80\" width=\"320\" height=\"180\" rx=\"12\" stroke=\"#e5e7eb\" stroke-width=\"1.5\"\/>\n\n  <!-- Parking lines -->\n  <line x1=\"100\" y1=\"100\" x2=\"100\" y2=\"240\" stroke=\"#cdd6e0\" stroke-width=\"2\" stroke-dasharray=\"4 4\"\/>\n  <line x1=\"160\" y1=\"100\" x2=\"160\" y2=\"240\" stroke=\"#cdd6e0\" stroke-width=\"2\" stroke-dasharray=\"4 4\"\/>\n  <line x1=\"220\" y1=\"100\" x2=\"220\" y2=\"240\" stroke=\"#cdd6e0\" stroke-width=\"2\" stroke-dasharray=\"4 4\"\/>\n  <line x1=\"280\" y1=\"100\" x2=\"280\" y2=\"240\" stroke=\"#cdd6e0\" stroke-width=\"2\" stroke-dasharray=\"4 4\"\/>\n\n  <!-- Reserved spot with pulse -->\n  <g class=\"park-spot-pulse\">\n    <rect x=\"162\" y=\"100\" width=\"56\" height=\"138\" rx=\"6\" fill=\"#36d1a2\" fill-opacity=\"0.18\"\/>\n    <rect x=\"162\" y=\"100\" width=\"56\" height=\"138\" rx=\"6\" stroke=\"#36d1a2\" stroke-width=\"2.5\"\/>\n  <\/g>\n\n  <!-- Reserved label (slides down) -->\n  <g class=\"park-reserved-label\">\n    <rect x=\"170\" y=\"108\" width=\"40\" height=\"16\" rx=\"8\" fill=\"#36d1a2\"\/>\n    <text x=\"190\" y=\"119\" font-family=\"DM Sans, sans-serif\" font-size=\"9\" font-weight=\"700\" fill=\"#0a1254\" text-anchor=\"middle\">ZAREZERWOWANE<\/text>\n  <\/g>\n  <!-- EV charging indicator on reserved spot -->\n  <g transform=\"translate(168, 222)\">\n    <rect x=\"0\" y=\"0\" width=\"44\" height=\"11\" rx=\"5.5\" fill=\"#2bb88a\"\/>\n    <circle cx=\"6\" cy=\"5.5\" r=\"2.5\" fill=\"#ffffff\"\/>\n    <path d=\"M 6 4 L 4.5 6 L 6.5 6 L 5 8\" stroke=\"#2bb88a\" stroke-width=\"0.8\" stroke-linecap=\"round\" fill=\"none\"\/>\n    <text x=\"11\" y=\"8\" font-family=\"DM Sans, sans-serif\" font-size=\"6\" font-weight=\"700\" fill=\"#ffffff\">\u0141ADOWARKA<\/text>\n  <\/g>\n\n  <!-- Car (animated drive in) -->\n  <g class=\"park-car\">\n    <rect x=\"166\" y=\"135\" width=\"48\" height=\"84\" rx=\"10\" fill=\"#0a1254\"\/>\n    <rect x=\"171\" y=\"142\" width=\"38\" height=\"22\" rx=\"4\" fill=\"#86d3ff\" opacity=\"0.7\"\/>\n    <rect x=\"171\" y=\"190\" width=\"38\" height=\"20\" rx=\"4\" fill=\"#86d3ff\" opacity=\"0.5\"\/>\n    <rect x=\"160\" y=\"150\" width=\"6\" height=\"14\" rx=\"2\" fill=\"#131415\"\/>\n    <rect x=\"214\" y=\"150\" width=\"6\" height=\"14\" rx=\"2\" fill=\"#131415\"\/>\n    <rect x=\"160\" y=\"195\" width=\"6\" height=\"14\" rx=\"2\" fill=\"#131415\"\/>\n    <rect x=\"214\" y=\"195\" width=\"6\" height=\"14\" rx=\"2\" fill=\"#131415\"\/>\n    <circle cx=\"190\" cy=\"175\" r=\"2\" fill=\"#ffce86\"\/>\n  <\/g>\n\n  <!-- Empty spots -->\n  <text x=\"130\" y=\"170\" font-family=\"DM Sans, sans-serif\" font-size=\"11\" font-weight=\"600\" fill=\"#9ca3af\" text-anchor=\"middle\">Wolne<\/text>\n  <text x=\"250\" y=\"170\" font-family=\"DM Sans, sans-serif\" font-size=\"11\" font-weight=\"600\" fill=\"#9ca3af\" text-anchor=\"middle\">Wolne<\/text>\n\n  <!-- Occupied spot -->\n  <rect x=\"288\" y=\"135\" width=\"40\" height=\"84\" rx=\"8\" fill=\"#cdd6e0\" opacity=\"0.5\"\/>\n  <text x=\"308\" y=\"180\" font-family=\"DM Sans, sans-serif\" font-size=\"11\" font-weight=\"600\" fill=\"#6c7c8c\" text-anchor=\"middle\">Zaj\u0119te<\/text>\n\n  <!-- Mobile phone -->\n  <g transform=\"translate(40, 110)\">\n    <rect x=\"2\" y=\"4\" width=\"78\" height=\"140\" rx=\"14\" fill=\"#0a1254\" opacity=\"0.15\"\/>\n    <rect x=\"0\" y=\"0\" width=\"78\" height=\"140\" rx=\"14\" fill=\"#ffffff\" stroke=\"#0a1254\" stroke-width=\"2\"\/>\n    <rect x=\"6\" y=\"14\" width=\"66\" height=\"112\" rx=\"6\" fill=\"#f4f8ff\"\/>\n    <rect x=\"32\" y=\"4\" width=\"14\" height=\"4\" rx=\"2\" fill=\"#0a1254\"\/>\n\n    <!-- App header -->\n    <rect x=\"10\" y=\"20\" width=\"58\" height=\"14\" rx=\"3\" fill=\"#0a1254\"\/>\n    <text x=\"39\" y=\"30\" font-family=\"DM Sans, sans-serif\" font-size=\"7\" font-weight=\"700\" fill=\"#ffffff\" text-anchor=\"middle\">Park+<\/text>\n\n    <!-- Date -->\n    <rect x=\"10\" y=\"40\" width=\"58\" height=\"14\" rx=\"3\" fill=\"#36d1a2\"\/>\n    <text x=\"39\" y=\"50\" font-family=\"DM Sans, sans-serif\" font-size=\"6\" font-weight=\"700\" fill=\"#0a1254\" text-anchor=\"middle\">WT 12 MAJ<\/text>\n\n    <!-- Mini parking grid (animated fill) -->\n    <g transform=\"translate(12, 60)\">\n      <rect x=\"0\" y=\"0\" width=\"11\" height=\"14\" rx=\"1.5\" fill=\"#cdd6e0\"\/>\n      <rect x=\"13\" y=\"0\" width=\"11\" height=\"14\" rx=\"1.5\" fill=\"#36d1a2\" class=\"park-spot-fill\" style=\"animation-delay: 0s\"\/>\n      <rect x=\"26\" y=\"0\" width=\"11\" height=\"14\" rx=\"1.5\" fill=\"#cdd6e0\"\/>\n      <rect x=\"39\" y=\"0\" width=\"11\" height=\"14\" rx=\"1.5\" fill=\"#cdd6e0\"\/>\n      <rect x=\"52\" y=\"0\" width=\"11\" height=\"14\" rx=\"1.5\" fill=\"#36d1a2\" class=\"park-spot-fill\" style=\"animation-delay: 0.3s\"\/>\n\n      <rect x=\"0\" y=\"16\" width=\"11\" height=\"14\" rx=\"1.5\" fill=\"#cdd6e0\"\/>\n      <rect x=\"13\" y=\"16\" width=\"11\" height=\"14\" rx=\"1.5\" fill=\"#ffce86\" stroke=\"#0a1254\" stroke-width=\"1\"\/>\n      <rect x=\"26\" y=\"16\" width=\"11\" height=\"14\" rx=\"1.5\" fill=\"#cdd6e0\"\/>\n      <rect x=\"39\" y=\"16\" width=\"11\" height=\"14\" rx=\"1.5\" fill=\"#36d1a2\" class=\"park-spot-fill\" style=\"animation-delay: 0.6s\"\/>\n      <rect x=\"52\" y=\"16\" width=\"11\" height=\"14\" rx=\"1.5\" fill=\"#cdd6e0\"\/>\n\n      <rect x=\"0\" y=\"32\" width=\"11\" height=\"14\" rx=\"1.5\" fill=\"#36d1a2\" class=\"park-spot-fill\" style=\"animation-delay: 0.9s\"\/>\n      <rect x=\"13\" y=\"32\" width=\"11\" height=\"14\" rx=\"1.5\" fill=\"#cdd6e0\"\/>\n      <rect x=\"26\" y=\"32\" width=\"11\" height=\"14\" rx=\"1.5\" fill=\"#cdd6e0\"\/>\n      <rect x=\"39\" y=\"32\" width=\"11\" height=\"14\" rx=\"1.5\" fill=\"#cdd6e0\"\/>\n      <rect x=\"52\" y=\"32\" width=\"11\" height=\"14\" rx=\"1.5\" fill=\"#36d1a2\" class=\"park-spot-fill\" style=\"animation-delay: 1.2s\"\/>\n      <!-- Vehicle type markers on mini parking grid -->\n      <rect x=\"21\" y=\"1\" width=\"3\" height=\"3\" rx=\"0.5\" fill=\"#2bb88a\" stroke=\"#ffffff\" stroke-width=\"0.4\"\/>\n      <rect x=\"60\" y=\"1\" width=\"3\" height=\"3\" rx=\"0.5\" fill=\"#86d3ff\" stroke=\"#ffffff\" stroke-width=\"0.4\"\/>\n      <rect x=\"47\" y=\"17\" width=\"3\" height=\"3\" rx=\"0.5\" fill=\"#ffce86\" stroke=\"#ffffff\" stroke-width=\"0.4\"\/>\n      <rect x=\"8\" y=\"33\" width=\"3\" height=\"3\" rx=\"0.5\" fill=\"#0a1254\" stroke=\"#ffffff\" stroke-width=\"0.4\"\/>\n    <\/g>\n\n    <!-- Confirm button with LED dot -->\n    <rect x=\"10\" y=\"112\" width=\"58\" height=\"10\" rx=\"5\" fill=\"#0a1254\"\/>\n    <text x=\"39\" y=\"119\" font-family=\"DM Sans, sans-serif\" font-size=\"6\" font-weight=\"700\" fill=\"#ffffff\" text-anchor=\"middle\">REZERWUJ B2<\/text>\n    <circle cx=\"14\" cy=\"117\" r=\"1.2\" fill=\"#36d1a2\" class=\"park-mobile-led\"\/>\n  <\/g>\n\n  <!-- Decorative dots -->\n  <circle cx=\"370\" cy=\"60\" r=\"4\" fill=\"#ffce86\"\/>\n  <circle cx=\"350\" cy=\"50\" r=\"2\" fill=\"#36d1a2\"\/>\n  <circle cx=\"60\" cy=\"70\" r=\"3\" fill=\"#36d1a2\" opacity=\"0.5\"\/>\n\n  <!-- Check mark badge (pop in) -->\n  <g class=\"park-confirm-check\" transform=\"translate(140, 50)\">\n    <circle cx=\"0\" cy=\"0\" r=\"18\" fill=\"#36d1a2\"\/>\n    <path d=\"M -7 0 L -2 5 L 7 -5\" stroke=\"#0a1254\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\" fill=\"none\"\/>\n  <\/g>\n<\/svg>\n\n      <\/div>\n      <div class=\"visual-mock\">\n        <div class=\"visual-header\">\n          <div>\n            <div class=\"vh-title\">Poziom -1 \u00b7 Skrzyd\u0142o wschodnie<\/div>\n            <div class=\"vh-sub\">Wtorek, 12 maja \u00b7 09:00 \u2014 18:00<\/div>\n          <\/div>\n          <div class=\"vh-status\">14 wolnych<\/div>\n        <\/div>\n        <div class=\"park-grid\">\n          <div class=\"park-spot\">A1<\/div><div class=\"park-spot free\"><span class=\"vehicle-badge electric\" title=\"Borne de recharge \u00e9lectrique\"><svg viewBox=\"0 0 24 24\" fill=\"currentColor\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M13 2L4 14h7l-2 8 9-12h-7l2-8z\"\/><\/svg><\/span>A2<\/div><div class=\"park-spot\">A3<\/div><div class=\"park-spot\">A4<\/div>\n          <div class=\"park-spot free\"><span class=\"vehicle-badge electric\" title=\"Borne de recharge \u00e9lectrique\"><svg viewBox=\"0 0 24 24\" fill=\"currentColor\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M13 2L4 14h7l-2 8 9-12h-7l2-8z\"\/><\/svg><\/span>A5<\/div><div class=\"park-spot\">A6<\/div><div class=\"park-spot\">A7<\/div><div class=\"park-spot free\"><span class=\"vehicle-badge moto\" title=\"Place moto \/ 2 roues\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><circle cx=\"6\" cy=\"17\" r=\"3\"\/><circle cx=\"18\" cy=\"17\" r=\"3\"\/><path d=\"M6 17h8l4-7h3\"\/><path d=\"M9 10h5\"\/><\/svg><\/span>A8<\/div>\n          <div class=\"park-spot\">B1<\/div><div class=\"park-spot your\">B2<\/div><div class=\"park-spot\">B3<\/div><div class=\"park-spot free\"><span class=\"vehicle-badge pmr\" title=\"Place PMR\"><svg viewBox=\"0 0 24 24\" fill=\"currentColor\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><circle cx=\"12\" cy=\"4\" r=\"2\"\/><path d=\"M10 7v6h4l3 7h2l-3.5-8H12V7h-2z\"\/><circle cx=\"11\" cy=\"17\" r=\"4\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\/><\/svg><\/span>B4<\/div>\n          <div class=\"park-spot\">B5<\/div><div class=\"park-spot\">B6<\/div><div class=\"park-spot free\"><span class=\"vehicle-badge bike\" title=\"Place v\u00e9lo\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><circle cx=\"6\" cy=\"17\" r=\"4\"\/><circle cx=\"18\" cy=\"17\" r=\"4\"\/><path d=\"M6 17l4-9h4l4 9\"\/><path d=\"M10 8l-2-3h-2\"\/><\/svg><\/span>B7<\/div><div class=\"park-spot\">B8<\/div>\n          <div class=\"park-spot free\">C1<\/div><div class=\"park-spot\">C2<\/div><div class=\"park-spot\">C3<\/div><div class=\"park-spot free\">C4<\/div>\n          <div class=\"park-spot\">C5<\/div><div class=\"park-spot free\">C6<\/div><div class=\"park-spot\">C7<\/div><div class=\"park-spot\">C8<\/div>\n        <\/div>\n        <div class=\"park-legend with-vehicles\">\n          <span><span class=\"sw taken\"><\/span>Zaj\u0119te<\/span>\n          <span><span class=\"sw free-sw\"><\/span>Dost\u0119pne<\/span>\n          <span><span class=\"sw your-sw\"><\/span>Twoje miejsce<\/span>\n          <span class=\"vehicle-legend\"><span class=\"vehicle-mark electric\" style=\"background: #2bb88a; color: #fff;\"><svg viewBox=\"0 0 24 24\" fill=\"currentColor\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M13 2L4 14h7l-2 8 9-12h-7l2-8z\"\/><\/svg><\/span>Elektryczny<\/span>\n          <span class=\"vehicle-legend\"><span class=\"vehicle-mark moto\" style=\"background: #86d3ff; color: #0a1254;\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><circle cx=\"6\" cy=\"17\" r=\"3\"\/><circle cx=\"18\" cy=\"17\" r=\"3\"\/><path d=\"M6 17h8l4-7h3\"\/><path d=\"M9 10h5\"\/><\/svg><\/span>Motocykl<\/span>\n          <span class=\"vehicle-legend\"><span class=\"vehicle-mark pmr\" style=\"background: #0a1254; color: #fff;\"><svg viewBox=\"0 0 24 24\" fill=\"currentColor\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><circle cx=\"12\" cy=\"4\" r=\"2\"\/><path d=\"M10 7v6h4l3 7h2l-3.5-8H12V7h-2z\"\/><circle cx=\"11\" cy=\"17\" r=\"4\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\/><\/svg><\/span>Niepe\u0142nosprawni<\/span>\n          <span class=\"vehicle-legend\"><span class=\"vehicle-mark bike\" style=\"background: #ffce86; color: #0a1254;\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><circle cx=\"6\" cy=\"17\" r=\"4\"\/><circle cx=\"18\" cy=\"17\" r=\"4\"\/><path d=\"M6 17l4-9h4l4 9\"\/><path d=\"M10 8l-2-3h-2\"\/><\/svg><\/span>Rower<\/span>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/section>\n\n\n\n<section class=\"module module-2\">\n  <div class=\"module-inner\">\n    <div class=\"module-content\">\n      <div class=\"module-eyebrow\">\n        <span class=\"num\">2<\/span>\n        <span class=\"cat\">Modu\u0142 Zaanga\u017cowanie<\/span>\n      <\/div>\n      <h3>Inclusive<span class=\"plus\">+<\/span><\/h3>\n      <p class=\"module-tagline\">Zarz\u0105dzaj strategi\u0105 D&amp;I na du\u017c\u0105 skal\u0119.<\/p>\n      <p class=\"module-desc\">\n        Inclusive+ daje zespo\u0142om Diversity &amp; Inclusion dedykowan\u0105 przestrze\u0144 do integrowania spo\u0142eczno\u015bci, organizowania wydarze\u0144, dzielenia si\u0119 tre\u015bciami edukacyjnymi i mierzenia rzeczywistego zaanga\u017cowania pracownik\u00f3w w ich inicjatywy.\n      <\/p>\n      <ul class=\"module-features\">\n        <li>Tworzenie i zarz\u0105dzanie wydarzeniami D&amp;I z rejestracjami i raportowaniem<\/li>\n        <li>Scentralizowana biblioteka dokument\u00f3w \u2014 artyku\u0142y, wideo, podcasty, szkolenia<\/li>\n        <li>Spo\u0142eczno\u015bci tematyczne: kobiety, LGBTQ+, rodzicielstwo, neuror\u00f3\u017cnorodno\u015b\u0107\u2026<\/li>\n        <li>Anonimowe ankiety i barometry inkluzji<\/li>\n        <li>Eksportowalne wska\u017aniki ESG do raport\u00f3w CSRD<\/li>\n      <\/ul>\n      <a href=\"https:\/\/dei.collaborativeperks.com\/en\/index.html\" class=\"btn\">Odkryj Inclusive+ \u2192<\/a>\n    <\/div>\n\n    <div class=\"module-visual\">\n      <div class=\"visual-deco vd1\"><\/div>\n      <div class=\"visual-deco vd2\"><\/div>\n      <div class=\"module-section-illu\">\n        <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 400 320\" fill=\"none\">\n  <style>\n    @keyframes popIn {\n      0%, 5% { transform: scale(0); opacity: 0; }\n      15% { transform: scale(1.1); opacity: 1; }\n      20% { transform: scale(0.95); }\n      25%, 90% { transform: scale(1); opacity: 1; }\n      100% { transform: scale(0); opacity: 0; }\n    }\n    @keyframes slideInRight {\n      0%, 30% { transform: translateX(-30px); opacity: 0; }\n      40%, 90% { transform: translateX(0); opacity: 1; }\n      100% { transform: translateX(-30px); opacity: 0; }\n    }\n    @keyframes heartBeat {\n      0%, 100% { transform: scale(1); }\n      15% { transform: scale(1.2); }\n      30% { transform: scale(1); }\n      45% { transform: scale(1.15); }\n      60% { transform: scale(1); }\n    }\n    @keyframes connectPulse {\n      0%, 100% { opacity: 0.2; }\n      50% { opacity: 0.7; }\n    }\n    @keyframes drawLoop {\n      0%, 100% { opacity: 0; }\n      30%, 70% { opacity: 1; }\n    }\n\n    .person-1 { animation: popIn 6s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }\n    .person-2 { animation: popIn 6s ease-in-out infinite 0.2s; transform-origin: center; transform-box: fill-box; }\n    .person-3 { animation: popIn 6s ease-in-out infinite 0.4s; transform-origin: center; transform-box: fill-box; }\n    .person-4 { animation: popIn 6s ease-in-out infinite 0.6s; transform-origin: center; transform-box: fill-box; }\n    .person-5 { animation: popIn 6s ease-in-out infinite 0.8s; transform-origin: center; transform-box: fill-box; }\n\n    .event-1 { animation: slideInRight 6s ease-in-out infinite 0.4s; }\n    .event-2 { animation: slideInRight 6s ease-in-out infinite 0.7s; }\n    .event-3 { animation: slideInRight 6s ease-in-out infinite 1.0s; }\n\n    .heart-badge { animation: heartBeat 2.5s ease-in-out infinite; transform-origin: 285px 70px; }\n\n    .connect-dot-1 { animation: connectPulse 2s ease-in-out infinite 1.0s; }\n    .connect-dot-2 { animation: connectPulse 2s ease-in-out infinite 1.3s; }\n    .connect-dot-3 { animation: connectPulse 2s ease-in-out infinite 1.6s; }\n\n    .deco-1 { animation: drawLoop 3s ease-in-out infinite; }\n    .deco-2 { animation: drawLoop 3s ease-in-out infinite 0.8s; }\n    .deco-3 { animation: drawLoop 3s ease-in-out infinite 1.6s; }\n  \n\n  \/* ====== REAL LOGO STYLING ====== *\/\n  .logo {\n    \/* override gap\/font when logo-img present *\/\n    padding: 4px 0;\n  }\n  .logo-img {\n    height: 44px;\n    width: auto;\n    display: block;\n  }\n  .footer-logo-img {\n    height: 56px;\n    width: auto;\n    display: block;\n    margin-bottom: 16px;\n  }\n\n\n  \/* Vehicle type badges on parking spots *\/\n  .park-spot { position: relative; }\n  .vehicle-badge {\n    position: absolute;\n    top: 4px; right: 4px;\n    width: 14px; height: 14px;\n    border-radius: 50%;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    z-index: 2;\n    box-shadow: 0 1px 3px rgba(0,0,0,0.15);\n  }\n  .vehicle-badge svg {\n    width: 9px; height: 9px;\n    display: block;\n  }\n  .vehicle-badge.electric { background: #2bb88a; }\n  .vehicle-badge.electric svg { color: #ffffff; }\n  .vehicle-badge.moto { background: #86d3ff; }\n  .vehicle-badge.moto svg { color: #0a1254; }\n  .vehicle-badge.pmr { background: #0a1254; }\n  .vehicle-badge.pmr svg { color: #ffffff; }\n  .vehicle-badge.bike { background: #ffce86; }\n  .vehicle-badge.bike svg { color: #0a1254; }\n\n  \/* Extended legend with vehicle types *\/\n  .park-legend.with-vehicles {\n    flex-wrap: wrap;\n    row-gap: 8px;\n  }\n  .park-legend.with-vehicles .vehicle-legend {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n  }\n  .park-legend.with-vehicles .vehicle-mark {\n    width: 14px; height: 14px;\n    border-radius: 50%;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n  }\n  .park-legend.with-vehicles .vehicle-mark svg {\n    width: 9px; height: 9px;\n  }\n\n<\/style>\n\n  <!-- Background blob -->\n  <ellipse cx=\"200\" cy=\"280\" rx=\"160\" ry=\"14\" fill=\"#0a1254\" opacity=\"0.06\"\/>\n\n  <!-- Background circle -->\n  <circle cx=\"200\" cy=\"160\" r=\"120\" fill=\"#fff8ed\" opacity=\"0.6\"\/>\n\n  <!-- Calendar\/event card (left) -->\n  <g transform=\"translate(40, 80)\">\n    <rect x=\"3\" y=\"5\" width=\"140\" height=\"160\" rx=\"12\" fill=\"#0a1254\" opacity=\"0.12\"\/>\n    <rect x=\"0\" y=\"0\" width=\"140\" height=\"160\" rx=\"12\" fill=\"#ffffff\" stroke=\"#e5e7eb\" stroke-width=\"1.5\"\/>\n\n    <!-- Card header -->\n    <rect x=\"0\" y=\"0\" width=\"140\" height=\"32\" rx=\"12\" fill=\"#0a1254\"\/>\n    <rect x=\"0\" y=\"20\" width=\"140\" height=\"12\" fill=\"#0a1254\"\/>\n    <text x=\"70\" y=\"20\" font-family=\"DM Sans, sans-serif\" font-size=\"11\" font-weight=\"700\" fill=\"#ffffff\" text-anchor=\"middle\">Wydarzenia D&amp;I<\/text>\n\n    <!-- Event 1 -->\n    <g class=\"event-1\" transform=\"translate(8, 42)\">\n      <rect x=\"0\" y=\"0\" width=\"124\" height=\"32\" rx=\"6\" fill=\"#fff8ed\"\/>\n      <rect x=\"6\" y=\"6\" width=\"22\" height=\"22\" rx=\"4\" fill=\"#ffce86\"\/>\n      <text x=\"17\" y=\"16\" font-family=\"DM Sans, sans-serif\" font-size=\"9\" font-weight=\"800\" fill=\"#0a1254\" text-anchor=\"middle\">14<\/text>\n      <text x=\"17\" y=\"24\" font-family=\"DM Sans, sans-serif\" font-size=\"6\" font-weight=\"700\" fill=\"#0a1254\" text-anchor=\"middle\">MAJ<\/text>\n      <text x=\"34\" y=\"14\" font-family=\"DM Sans, sans-serif\" font-size=\"8\" font-weight=\"700\" fill=\"#0a1254\">Kobiety i przyw\u00f3dztwo<\/text>\n      <text x=\"34\" y=\"24\" font-family=\"Inter, sans-serif\" font-size=\"7\" fill=\"#6c7c8c\">12:30 \u00b7 142 zapisanych<\/text>\n    <\/g>\n\n    <!-- Event 2 -->\n    <g class=\"event-2\" transform=\"translate(8, 80)\">\n      <rect x=\"0\" y=\"0\" width=\"124\" height=\"32\" rx=\"6\" fill=\"#e8faf3\"\/>\n      <rect x=\"6\" y=\"6\" width=\"22\" height=\"22\" rx=\"4\" fill=\"#36d1a2\"\/>\n      <text x=\"17\" y=\"16\" font-family=\"DM Sans, sans-serif\" font-size=\"9\" font-weight=\"800\" fill=\"#0a1254\" text-anchor=\"middle\">22<\/text>\n      <text x=\"17\" y=\"24\" font-family=\"DM Sans, sans-serif\" font-size=\"6\" font-weight=\"700\" fill=\"#0a1254\" text-anchor=\"middle\">MAJ<\/text>\n      <text x=\"34\" y=\"14\" font-family=\"DM Sans, sans-serif\" font-size=\"8\" font-weight=\"700\" fill=\"#0a1254\">R\u00f3\u017cnorodno\u015b\u0107 kulturowa<\/text>\n      <text x=\"34\" y=\"24\" font-family=\"Inter, sans-serif\" font-size=\"7\" fill=\"#6c7c8c\">8 warsztat\u00f3w \u00b7 Wszystkie biura<\/text>\n    <\/g>\n\n    <!-- Event 3 -->\n    <g class=\"event-3\" transform=\"translate(8, 118)\">\n      <rect x=\"0\" y=\"0\" width=\"124\" height=\"32\" rx=\"6\" fill=\"#f0eeff\"\/>\n      <rect x=\"6\" y=\"6\" width=\"22\" height=\"22\" rx=\"4\" fill=\"#655cfe\"\/>\n      <text x=\"17\" y=\"16\" font-family=\"DM Sans, sans-serif\" font-size=\"9\" font-weight=\"800\" fill=\"#ffffff\" text-anchor=\"middle\">03<\/text>\n      <text x=\"17\" y=\"24\" font-family=\"DM Sans, sans-serif\" font-size=\"6\" font-weight=\"700\" fill=\"#ffffff\" text-anchor=\"middle\">CZE<\/text>\n      <text x=\"34\" y=\"14\" font-family=\"DM Sans, sans-serif\" font-size=\"8\" font-weight=\"700\" fill=\"#0a1254\">Neuror\u00f3\u017cnorodno\u015b\u0107<\/text>\n      <text x=\"34\" y=\"24\" font-family=\"Inter, sans-serif\" font-size=\"7\" fill=\"#6c7c8c\">Okr\u0105g\u0142y st\u00f3\u0142 \u00b7 89 zapisanych<\/text>\n    <\/g>\n  <\/g>\n\n  <!-- Group of people -->\n  <g transform=\"translate(220, 100)\">\n    <!-- Person 1 -->\n    <g class=\"person-1\" transform=\"translate(0, 30)\">\n      <circle cx=\"20\" cy=\"20\" r=\"20\" fill=\"#36d1a2\"\/>\n      <circle cx=\"20\" cy=\"14\" r=\"7\" fill=\"#fff8ed\"\/>\n      <path d=\"M 7 28 Q 7 20 20 20 Q 33 20 33 28 L 33 40 L 7 40 Z\" fill=\"#fff8ed\"\/>\n      <rect x=\"0\" y=\"40\" width=\"40\" height=\"20\" rx=\"4\" fill=\"#0a1254\"\/>\n    <\/g>\n\n    <!-- Person 2 -->\n    <g class=\"person-2\" transform=\"translate(46, 0)\">\n      <circle cx=\"20\" cy=\"20\" r=\"20\" fill=\"#ffce86\"\/>\n      <circle cx=\"20\" cy=\"14\" r=\"7\" fill=\"#5d4037\"\/>\n      <path d=\"M 7 28 Q 7 20 20 20 Q 33 20 33 28 L 33 40 L 7 40 Z\" fill=\"#5d4037\"\/>\n      <rect x=\"0\" y=\"40\" width=\"40\" height=\"20\" rx=\"4\" fill=\"#0a1254\"\/>\n    <\/g>\n\n    <!-- Person 3 -->\n    <g class=\"person-3\" transform=\"translate(92, 30)\">\n      <circle cx=\"20\" cy=\"20\" r=\"20\" fill=\"#655cfe\"\/>\n      <circle cx=\"20\" cy=\"14\" r=\"7\" fill=\"#ffe4c4\"\/>\n      <path d=\"M 7 28 Q 7 20 20 20 Q 33 20 33 28 L 33 40 L 7 40 Z\" fill=\"#ffe4c4\"\/>\n      <rect x=\"0\" y=\"40\" width=\"40\" height=\"20\" rx=\"4\" fill=\"#0a1254\"\/>\n      <path d=\"M 8 12 Q 8 4 20 4 Q 32 4 32 12 Q 32 18 20 18 Q 8 18 8 12 Z\" fill=\"#655cfe\" opacity=\"0.85\"\/>\n    <\/g>\n\n    <!-- Person 4 -->\n    <g class=\"person-4\" transform=\"translate(23, 70)\">\n      <circle cx=\"20\" cy=\"20\" r=\"20\" fill=\"#ff6b6b\"\/>\n      <circle cx=\"20\" cy=\"14\" r=\"7\" fill=\"#ffe4c4\"\/>\n      <path d=\"M 7 28 Q 7 20 20 20 Q 33 20 33 28 L 33 40 L 7 40 Z\" fill=\"#ffe4c4\"\/>\n      <rect x=\"0\" y=\"40\" width=\"40\" height=\"20\" rx=\"4\" fill=\"#0a1254\"\/>\n    <\/g>\n\n    <!-- Person 5 -->\n    <g class=\"person-5\" transform=\"translate(69, 70)\">\n      <circle cx=\"20\" cy=\"20\" r=\"20\" fill=\"#86d3ff\"\/>\n      <circle cx=\"20\" cy=\"14\" r=\"7\" fill=\"#8d6e63\"\/>\n      <path d=\"M 7 28 Q 7 20 20 20 Q 33 20 33 28 L 33 40 L 7 40 Z\" fill=\"#8d6e63\"\/>\n      <rect x=\"0\" y=\"40\" width=\"40\" height=\"20\" rx=\"4\" fill=\"#0a1254\"\/>\n    <\/g>\n  <\/g>\n\n  <!-- Connection dots -->\n  <circle class=\"connect-dot-1\" cx=\"190\" cy=\"120\" r=\"2\" fill=\"#36d1a2\"\/>\n  <circle class=\"connect-dot-2\" cx=\"200\" cy=\"135\" r=\"2\" fill=\"#36d1a2\"\/>\n  <circle class=\"connect-dot-3\" cx=\"210\" cy=\"145\" r=\"2\" fill=\"#36d1a2\"\/>\n\n  <!-- Heart badge (pulsing) -->\n  <g class=\"heart-badge\" transform=\"translate(285, 70)\">\n    <circle cx=\"0\" cy=\"0\" r=\"18\" fill=\"#ff6b6b\"\/>\n    <path d=\"M 0 5 C -8 -2, -8 -8, -3 -8 C -1 -8, 0 -6, 0 -5 C 0 -6, 1 -8, 3 -8 C 8 -8, 8 -2, 0 5 Z\" fill=\"#ffffff\"\/>\n  <\/g>\n\n  <!-- Decorative dots -->\n  <circle class=\"deco-1\" cx=\"370\" cy=\"60\" r=\"4\" fill=\"#36d1a2\"\/>\n  <circle class=\"deco-2\" cx=\"350\" cy=\"200\" r=\"3\" fill=\"#ffce86\"\/>\n  <circle class=\"deco-3\" cx=\"190\" cy=\"80\" r=\"2\" fill=\"#655cfe\"\/>\n<\/svg>\n\n      <\/div>\n      <div class=\"visual-mock\">\n        <div class=\"visual-header\">\n          <div>\n            <div class=\"vh-title\">Nadchodz\u0105ce wydarzenia D&amp;I<\/div>\n            <div class=\"vh-sub\">Maj i czerwiec 2026<\/div>\n          <\/div>\n          <div class=\"vh-status\">12 w tym miesi\u0105cu<\/div>\n        <\/div>\n        <div class=\"dei-events\">\n          <div class=\"dei-card\">\n            <div class=\"date-badge\"><span class=\"d\">14<\/span><span class=\"m\">Mai<\/span><\/div>\n            <div class=\"info\">\n              <div class=\"title\">Kobiety i przyw\u00f3dztwo \u2014 Konferencja<\/div>\n              <div class=\"meta\">12:30 \u00b7 Audytorium \u00b7 142 zapisanych<\/div>\n            <\/div>\n            <span class=\"pill\">142<\/span>\n          <\/div>\n          <div class=\"dei-card alt\">\n            <div class=\"date-badge\"><span class=\"d\">22<\/span><span class=\"m\">Mai<\/span><\/div>\n            <div class=\"info\">\n              <div class=\"title\">Miesi\u0105c r\u00f3\u017cnorodno\u015bci kulturowej<\/div>\n              <div class=\"meta\">8 warsztat\u00f3w \u00b7 Wszystkie biura<\/div>\n            <\/div>\n            <span class=\"pill\">8<\/span>\n          <\/div>\n          <div class=\"dei-card alt2\">\n            <div class=\"date-badge\"><span class=\"d\">03<\/span><span class=\"m\">Juin<\/span><\/div>\n            <div class=\"info\">\n              <div class=\"title\">Neuror\u00f3\u017cnorodno\u015b\u0107 \u2014 Okr\u0105g\u0142y st\u00f3\u0142<\/div>\n              <div class=\"meta\">18:00 \u00b7 Online \u00b7 89 zapisanych<\/div>\n            <\/div>\n            <span class=\"pill\">89<\/span>\n          <\/div>\n          <div class=\"dei-card alt3\">\n            <div class=\"date-badge\"><span class=\"d\">17<\/span><span class=\"m\">Juin<\/span><\/div>\n            <div class=\"info\">\n              <div class=\"title\">Pride Month \u2014 Allyship<\/div>\n              <div class=\"meta\">17:00 \u00b7 Online \u00b7 214 zapisanych<\/div>\n            <\/div>\n            <span class=\"pill\">214<\/span>\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/section>\n\n\n\n<section class=\"module module-3\">\n  <div class=\"module-inner\">\n    <div class=\"module-content\">\n      <div class=\"module-eyebrow\">\n        <span class=\"num\">3<\/span>\n        <span class=\"cat\">Modu\u0142 Gospodarka cyrkularna<\/span>\n      <\/div>\n      <h3>Reuse<span class=\"plus\">+<\/span><\/h3>\n      <p class=\"module-tagline\">Gospodarka cyrkularna mi\u0119dzy sp\u00f3\u0142kami zale\u017cnymi tej samej grupy.<\/p>\n      <p class=\"module-desc\">\n        Reuse+ to wewn\u0119trzny rynek umo\u017cliwiaj\u0105cy r\u00f3\u017cnym jednostkom tej samej grupy odsprzedawanie, wymian\u0119 lub przekazywanie nieu\u017cywanego lub niewykorzystanego sprz\u0119tu zawodowego. Podej\u015bcie oparte na gospodarce cyrkularnej, kt\u00f3re redukuje wydatki i wykorzystuje u\u015bpione aktywa.\n      <\/p>\n      <ul class=\"module-features\">\n        <li>Wykaz sprz\u0119tu przemys\u0142owego, IT, mebli, maszyn, pojazd\u00f3w<\/li>\n        <li>Bezpieczne transakcje mi\u0119dzy sp\u00f3\u0142kami z zatwierdzeniem hierarchicznym<\/li>\n        <li>Automatyczna wycena warto\u015bci rezydualnej<\/li>\n        <li>Raportowanie osi\u0105gni\u0119tych oszcz\u0119dno\u015bci i unikni\u0119cia emisji CO\u2082<\/li>\n        <li>Pe\u0142na \u015bcie\u017cka audytu zgodno\u015bci ksi\u0119gowej i podatkowej<\/li>\n      <\/ul>\n      <a href=\"https:\/\/market.collaborativeperks.com\/pl\/index.html\" class=\"btn\" target=\"_blank\" rel=\"noopener\">Odkryj Reuse+ \u2192<\/a>\n      <a href=\"https:\/\/market.collaborativeperks.com\/pl\/index.html\" class=\"btn btn-demo\" target=\"_blank\" rel=\"noopener\" style=\"margin-top: 8px;\">\ud83d\ude80 Wypr\u00f3buj demo online<\/a>\n    <\/div>\n\n    <div class=\"module-visual\">\n      <div class=\"visual-deco vd1\"><\/div>\n      <div class=\"visual-deco vd2\"><\/div>\n      <div class=\"module-section-illu\">\n        <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 400 320\" fill=\"none\">\n  <style>\n    @keyframes equipMove {\n      0% { transform: translateX(-100px); opacity: 0; }\n      15% { opacity: 1; transform: translateX(-100px); }\n      40% { transform: translateX(0); }\n      60% { transform: translateX(0); }\n      80% { transform: translateX(110px); opacity: 1; }\n      100% { transform: translateX(110px); opacity: 0; }\n    }\n    @keyframes drawArrow {\n      0% { stroke-dashoffset: 240; }\n      40% { stroke-dashoffset: 0; }\n      80% { stroke-dashoffset: 0; }\n      100% { stroke-dashoffset: 240; }\n    }\n    @keyframes arrowHeadAppear {\n      0%, 35% { opacity: 0; }\n      45%, 75% { opacity: 0.6; }\n      100% { opacity: 0; }\n    }\n    @keyframes priceFlash {\n      0%, 100% { transform: scale(1); }\n      50% { transform: scale(1.1); }\n    }\n    @keyframes savingsTick {\n      0%, 100% { transform: translateY(0); }\n      50% { transform: translateY(-2px); }\n    }\n    @keyframes leafBob {\n      0%, 100% { transform: translateY(0) rotate(0); }\n      50% { transform: translateY(-4px) rotate(-5deg); }\n    }\n    @keyframes blinkLight {\n      0%, 100% { opacity: 0.3; }\n      50% { opacity: 1; }\n    }\n    @keyframes tagBounce {\n      0%, 100% { transform: scale(1) rotate(0); }\n      50% { transform: scale(1.05) rotate(-2deg); }\n    }\n    @keyframes pulseRing2 {\n      0% { r: 14; opacity: 0.6; }\n      100% { r: 28; opacity: 0; }\n    }\n\n    .equipment-moving {\n      animation: equipMove 5s ease-in-out infinite;\n      transform-origin: center;\n    }\n    .arrow-trace {\n      stroke-dasharray: 240;\n      animation: drawArrow 5s ease-in-out infinite;\n    }\n    .arrow-head {\n      animation: arrowHeadAppear 5s ease-in-out infinite;\n    }\n    .savings-bubble {\n      animation: savingsTick 2s ease-in-out infinite;\n      transform-origin: 200px 50px;\n    }\n    .price-tag {\n      animation: priceFlash 2s ease-in-out infinite;\n      transform-origin: 215px 130px;\n    }\n    .leaf-icon {\n      animation: leafBob 3s ease-in-out infinite;\n      transform-origin: 50px 60px;\n    }\n    .building-light-1 { animation: blinkLight 2s ease-in-out infinite 0.3s; }\n    .building-light-2 { animation: blinkLight 2s ease-in-out infinite 0.7s; }\n    .building-light-3 { animation: blinkLight 2s ease-in-out infinite 1.1s; }\n    .building-light-4 { animation: blinkLight 2s ease-in-out infinite 1.5s; }\n    .vend-tag { animation: tagBounce 2.5s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }\n    .achat-tag { animation: tagBounce 2.5s ease-in-out infinite 1.2s; transform-origin: center; transform-box: fill-box; }\n  \n\n  \/* ====== REAL LOGO STYLING ====== *\/\n  .logo {\n    \/* override gap\/font when logo-img present *\/\n    padding: 4px 0;\n  }\n  .logo-img {\n    height: 44px;\n    width: auto;\n    display: block;\n  }\n  .footer-logo-img {\n    height: 56px;\n    width: auto;\n    display: block;\n    margin-bottom: 16px;\n  }\n\n\n  \/* Vehicle type badges on parking spots *\/\n  .park-spot { position: relative; }\n  .vehicle-badge {\n    position: absolute;\n    top: 4px; right: 4px;\n    width: 14px; height: 14px;\n    border-radius: 50%;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    z-index: 2;\n    box-shadow: 0 1px 3px rgba(0,0,0,0.15);\n  }\n  .vehicle-badge svg {\n    width: 9px; height: 9px;\n    display: block;\n  }\n  .vehicle-badge.electric { background: #2bb88a; }\n  .vehicle-badge.electric svg { color: #ffffff; }\n  .vehicle-badge.moto { background: #86d3ff; }\n  .vehicle-badge.moto svg { color: #0a1254; }\n  .vehicle-badge.pmr { background: #0a1254; }\n  .vehicle-badge.pmr svg { color: #ffffff; }\n  .vehicle-badge.bike { background: #ffce86; }\n  .vehicle-badge.bike svg { color: #0a1254; }\n\n  \/* Extended legend with vehicle types *\/\n  .park-legend.with-vehicles {\n    flex-wrap: wrap;\n    row-gap: 8px;\n  }\n  .park-legend.with-vehicles .vehicle-legend {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n  }\n  .park-legend.with-vehicles .vehicle-mark {\n    width: 14px; height: 14px;\n    border-radius: 50%;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n  }\n  .park-legend.with-vehicles .vehicle-mark svg {\n    width: 9px; height: 9px;\n  }\n\n<\/style>\n\n  <!-- Background blob -->\n  <ellipse cx=\"200\" cy=\"280\" rx=\"160\" ry=\"14\" fill=\"#0a1254\" opacity=\"0.06\"\/>\n\n  <!-- Background circle -->\n  <circle cx=\"200\" cy=\"160\" r=\"120\" fill=\"#f0eeff\" opacity=\"0.5\"\/>\n\n  <!-- Building 1 (left) - Selling -->\n  <g transform=\"translate(40, 130)\">\n    <rect x=\"0\" y=\"20\" width=\"80\" height=\"100\" rx=\"4\" fill=\"#ffffff\" stroke=\"#0a1254\" stroke-width=\"2\"\/>\n    <rect x=\"-4\" y=\"14\" width=\"88\" height=\"10\" rx=\"2\" fill=\"#0a1254\"\/>\n\n    <!-- Animated windows -->\n    <rect class=\"building-light-1\" x=\"10\" y=\"32\" width=\"14\" height=\"14\" rx=\"2\" fill=\"#86d3ff\"\/>\n    <rect x=\"33\" y=\"32\" width=\"14\" height=\"14\" rx=\"2\" fill=\"#86d3ff\"\/>\n    <rect class=\"building-light-2\" x=\"56\" y=\"32\" width=\"14\" height=\"14\" rx=\"2\" fill=\"#86d3ff\"\/>\n    <rect x=\"10\" y=\"54\" width=\"14\" height=\"14\" rx=\"2\" fill=\"#86d3ff\"\/>\n    <rect class=\"building-light-3\" x=\"33\" y=\"54\" width=\"14\" height=\"14\" rx=\"2\" fill=\"#86d3ff\"\/>\n    <rect x=\"56\" y=\"54\" width=\"14\" height=\"14\" rx=\"2\" fill=\"#86d3ff\"\/>\n\n    <rect x=\"33\" y=\"86\" width=\"14\" height=\"34\" rx=\"2\" fill=\"#0a1254\"\/>\n    <rect x=\"6\" y=\"0\" width=\"68\" height=\"14\" rx=\"3\" fill=\"#36d1a2\"\/>\n    <text x=\"40\" y=\"10\" font-family=\"DM Sans, sans-serif\" font-size=\"8\" font-weight=\"700\" fill=\"#0a1254\" text-anchor=\"middle\">SP\u00d3\u0141KA A<\/text>\n\n    <!-- Vend tag -->\n    <g class=\"vend-tag\" transform=\"translate(70, 76)\">\n      <rect x=\"0\" y=\"0\" width=\"34\" height=\"14\" rx=\"7\" fill=\"#ff6b6b\"\/>\n      <text x=\"17\" y=\"10\" font-family=\"DM Sans, sans-serif\" font-size=\"7\" font-weight=\"700\" fill=\"#ffffff\" text-anchor=\"middle\">SPRZEDAJE<\/text>\n    <\/g>\n  <\/g>\n\n  <!-- Building 2 (right) - Buying -->\n  <g transform=\"translate(280, 130)\">\n    <rect x=\"0\" y=\"20\" width=\"80\" height=\"100\" rx=\"4\" fill=\"#ffffff\" stroke=\"#0a1254\" stroke-width=\"2\"\/>\n    <rect x=\"-4\" y=\"14\" width=\"88\" height=\"10\" rx=\"2\" fill=\"#0a1254\"\/>\n\n    <!-- Animated windows -->\n    <rect x=\"10\" y=\"32\" width=\"14\" height=\"14\" rx=\"2\" fill=\"#86d3ff\"\/>\n    <rect class=\"building-light-4\" x=\"33\" y=\"32\" width=\"14\" height=\"14\" rx=\"2\" fill=\"#86d3ff\"\/>\n    <rect x=\"56\" y=\"32\" width=\"14\" height=\"14\" rx=\"2\" fill=\"#86d3ff\"\/>\n    <rect class=\"building-light-1\" x=\"10\" y=\"54\" width=\"14\" height=\"14\" rx=\"2\" fill=\"#86d3ff\"\/>\n    <rect x=\"33\" y=\"54\" width=\"14\" height=\"14\" rx=\"2\" fill=\"#86d3ff\"\/>\n    <rect class=\"building-light-2\" x=\"56\" y=\"54\" width=\"14\" height=\"14\" rx=\"2\" fill=\"#86d3ff\"\/>\n\n    <rect x=\"33\" y=\"86\" width=\"14\" height=\"34\" rx=\"2\" fill=\"#0a1254\"\/>\n    <rect x=\"6\" y=\"0\" width=\"68\" height=\"14\" rx=\"3\" fill=\"#655cfe\"\/>\n    <text x=\"40\" y=\"10\" font-family=\"DM Sans, sans-serif\" font-size=\"8\" font-weight=\"700\" fill=\"#ffffff\" text-anchor=\"middle\">SP\u00d3\u0141KA B<\/text>\n\n    <!-- Achat tag -->\n    <g class=\"achat-tag\" transform=\"translate(-26, 76)\">\n      <rect x=\"0\" y=\"0\" width=\"34\" height=\"14\" rx=\"7\" fill=\"#36d1a2\"\/>\n      <text x=\"17\" y=\"10\" font-family=\"DM Sans, sans-serif\" font-size=\"7\" font-weight=\"700\" fill=\"#0a1254\" text-anchor=\"middle\">KUPUJE<\/text>\n    <\/g>\n  <\/g>\n\n  <!-- Equipment moving between buildings -->\n  <g class=\"equipment-moving\" transform=\"translate(150, 160)\">\n    <!-- Pallet -->\n    <rect x=\"-2\" y=\"60\" width=\"104\" height=\"10\" rx=\"1\" fill=\"#0a1254\" opacity=\"0.4\"\/>\n    <rect x=\"0\" y=\"58\" width=\"100\" height=\"6\" rx=\"1\" fill=\"#8d6e63\"\/>\n    <rect x=\"0\" y=\"64\" width=\"100\" height=\"6\" rx=\"1\" fill=\"#8d6e63\"\/>\n\n    <!-- Equipment box -->\n    <rect x=\"10\" y=\"0\" width=\"80\" height=\"60\" rx=\"6\" fill=\"#ffce86\" stroke=\"#0a1254\" stroke-width=\"2\"\/>\n    <rect x=\"20\" y=\"10\" width=\"60\" height=\"20\" rx=\"3\" fill=\"#0a1254\"\/>\n    <circle cx=\"30\" cy=\"20\" r=\"4\" fill=\"#36d1a2\"\/>\n    <circle cx=\"44\" cy=\"20\" r=\"4\" fill=\"#ff6b6b\"\/>\n    <circle cx=\"58\" cy=\"20\" r=\"4\" fill=\"#ffce86\"\/>\n    <rect x=\"20\" y=\"36\" width=\"35\" height=\"6\" rx=\"2\" fill=\"#0a1254\" opacity=\"0.7\"\/>\n    <rect x=\"20\" y=\"46\" width=\"50\" height=\"6\" rx=\"2\" fill=\"#0a1254\" opacity=\"0.5\"\/>\n\n    <!-- Price tag (pulsing) -->\n    <g class=\"price-tag\" transform=\"translate(50, -22)\">\n      <path d=\"M 0 0 L 30 0 L 38 8 L 30 16 L 0 16 Z\" fill=\"#36d1a2\"\/>\n      <text x=\"15\" y=\"11\" font-family=\"DM Sans, sans-serif\" font-size=\"8\" font-weight=\"800\" fill=\"#0a1254\" text-anchor=\"middle\">-66%<\/text>\n      <circle cx=\"4\" cy=\"8\" r=\"2\" fill=\"#0a1254\"\/>\n    <\/g>\n  <\/g>\n\n  <!-- Circular arrow (animated trace) -->\n  <g transform=\"translate(200, 160)\">\n    <path class=\"arrow-trace\"\n          d=\"M -100 0 Q -100 -80 0 -80 Q 100 -80 100 0\"\n          stroke=\"#0a1254\"\n          stroke-width=\"2.5\"\n          stroke-linecap=\"round\"\n          fill=\"none\"\n          opacity=\"0.5\"\/>\n    <path class=\"arrow-head\" d=\"M 95 -8 L 105 0 L 95 8\" stroke=\"#0a1254\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" fill=\"none\"\/>\n  <\/g>\n\n  <!-- Savings indicator (bouncing) -->\n  <g class=\"savings-bubble\" transform=\"translate(200, 50)\">\n    <rect x=\"-50\" y=\"-16\" width=\"100\" height=\"32\" rx=\"16\" fill=\"#0a1254\"\/>\n    <text x=\"-30\" y=\"5\" font-family=\"DM Sans, sans-serif\" font-size=\"14\" font-weight=\"800\" fill=\"#36d1a2\" text-anchor=\"middle\">\u20ac<\/text>\n    <text x=\"10\" y=\"-2\" font-family=\"DM Sans, sans-serif\" font-size=\"9\" font-weight=\"700\" fill=\"#ffffff\" text-anchor=\"middle\">Oszcz\u0119dno\u015bci<\/text>\n    <text x=\"10\" y=\"9\" font-family=\"DM Sans, sans-serif\" font-size=\"9\" font-weight=\"700\" fill=\"#36d1a2\" text-anchor=\"middle\">1,2 M\u20ac<\/text>\n  <\/g>\n\n  <!-- CO2 leaf icon (bobbing) -->\n  <g class=\"leaf-icon\" transform=\"translate(50, 60)\">\n    <circle cx=\"0\" cy=\"0\" r=\"18\" fill=\"#36d1a2\"\/>\n    <path d=\"M -7 -5 Q -7 -10 -2 -10 Q 5 -10 5 -5 Q 10 -5 10 0 Q 10 8 0 8 Q -10 8 -10 0 Q -10 -5 -7 -5 Z\" fill=\"#0a1254\" opacity=\"0.85\"\/>\n    <path d=\"M -2 -2 L 6 -8\" stroke=\"#36d1a2\" stroke-width=\"1.5\" stroke-linecap=\"round\"\/>\n  <\/g>\n\n  <!-- Decorative dots -->\n  <circle cx=\"370\" cy=\"60\" r=\"4\" fill=\"#ffce86\"\/>\n  <circle cx=\"30\" cy=\"200\" r=\"3\" fill=\"#36d1a2\"\/>\n  <circle cx=\"380\" cy=\"240\" r=\"3\" fill=\"#655cfe\"\/>\n<\/svg>\n\n      <\/div>\n      <div class=\"visual-mock\">\n        <div class=\"visual-header\">\n          <div>\n            <div class=\"vh-title\">Wewn\u0119trzny rynek<\/div>\n            <div class=\"vh-sub\">Kwiecie\u0144 2026 \u00b7 14 aktywnych jednostek<\/div>\n          <\/div>\n          <div class=\"vh-status\">312 produkt\u00f3w<\/div>\n        <\/div>\n        <div class=\"reuse-stats\">\n          <div class=\"reuse-stat\">\n            <div class=\"v\">1,2 M\u20ac<\/div>\n            <div class=\"l\">Osi\u0105gni\u0119te oszcz\u0119dno\u015bci<\/div>\n            <div class=\"delta\">\u2191 +18%<\/div>\n          <\/div>\n          <div class=\"reuse-stat\">\n            <div class=\"v\">84 t<\/div>\n            <div class=\"l\">Unikni\u0119te CO\u2082<\/div>\n            <div class=\"delta\">\u2191 vs zakup nowego<\/div>\n          <\/div>\n        <\/div>\n        <div class=\"reuse-list\">\n          <div class=\"reuse-item\">\n            <div class=\"ic\">\ud83d\udda8\ufe0f<\/div>\n            <div class=\"info\">\n              <div class=\"name\">Drukarka 3D Stratasys<\/div>\n              <div class=\"meta\">Sp\u00f3\u0142ka Niemcy<\/div>\n            <\/div>\n            <div class=\"price\">\n              <span class=\"new\">6 200 \u20ac<\/span>\n              <span class=\"old\">18 400 \u20ac<\/span>\n            <\/div>\n          <\/div>\n          <div class=\"reuse-item\">\n            <div class=\"ic\">\ud83d\ude9c<\/div>\n            <div class=\"info\">\n              <div class=\"name\">W\u00f3zek wid\u0142owy 2,5T<\/div>\n              <div class=\"meta\">Logistyka Lyon<\/div>\n            <\/div>\n            <div class=\"price\">\n              <span class=\"new\">14 500 \u20ac<\/span>\n              <span class=\"old\">32 000 \u20ac<\/span>\n            <\/div>\n          <\/div>\n          <div class=\"reuse-item\">\n            <div class=\"ic\">\ud83e\ude91<\/div>\n            <div class=\"info\">\n              <div class=\"name\">Meble (zestaw 40 stanowisk)<\/div>\n              <div class=\"meta\">Siedziba Madryt<\/div>\n            <\/div>\n            <div class=\"price\">\n              <span class=\"new\">4 800 \u20ac<\/span>\n              <span class=\"old\">22 000 \u20ac<\/span>\n            <\/div>\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/section>\n\n\n\n<section class=\"stats-band\">\n  <div class=\"stats-inner\">\n    <h2>Platforma <span class=\"accent\">u\u017cywana ka\u017cdego dnia<\/span> przez 2,5 miliona pracownik\u00f3w.<\/h2>\n    <div class=\"stats-grid\">\n      <div class=\"stat-card\">\n        <div class=\"v\">+50<\/div>\n        <div class=\"l\">Klienci Global 2000<\/div>\n      <\/div>\n      <div class=\"stat-card\">\n        <div class=\"v\">2,5M<\/div>\n        <div class=\"l\">Wyposa\u017conych pracownik\u00f3w<\/div>\n      <\/div>\n      <div class=\"stat-card\">\n        <div class=\"v\">16<\/div>\n        <div class=\"l\">Dost\u0119pne j\u0119zyki<\/div>\n      <\/div>\n      <div class=\"stat-card\">\n        <div class=\"v\">15<\/div>\n        <div class=\"l\">Modu\u0142y do wyboru<\/div>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/section>\n\n\n\n<section class=\"cta\">\n  <div class=\"cta-inner\">\n    <h2>Gotowi, by wzbogaci\u0107 sw\u00f3j portal pracowniczy?<\/h2>\n    <p>Zarezerwuj 30 minut z naszym zespo\u0142em, aby zobaczy\u0107, jak Park+, Inclusive+ i Reuse+ mog\u0105 zintegrowa\u0107 si\u0119 z istniej\u0105c\u0105 platform\u0105 Collaborative Perks.<\/p>\n    <div class=\"cta-actions\">\n      <a href=\"https:\/\/www.collaborativeperks.com\/pl\/demo\/\" class=\"btn btn-large\">Um\u00f3w demo \u2192<\/a>\n    <\/div>\n  <\/div>\n<\/section>\n","protected":false},"excerpt":{"rendered":"<p>Nowo\u015b\u0107 3 nowe modu\u0142y \u00b7 wiosna 2026 Trzy nowe oprogramowania, aby wzbogaci\u0107 sw\u00f3j portal pracowniczy. Rezerwacja parkingu, platforma po\u015bwi\u0119cona r\u00f3\u017cnorodno\u015bci i inkluzji, wewn\u0119trzny rynek przemys\u0142owy. Trzy rozwi\u0105zania zintegrowane z platform\u0105 Collaborative Perks, zaprojektowane dla du\u017cych grup. Um\u00f3w demo \u2192 Odkryj modu\u0142y +50 Klienci Global 2000 2,5M Pracownicy 16 Dost\u0119pne j\u0119zyki ZAREZERWOWANE \u0141ADOWARKA Wolne Wolne Zaj\u0119te&#8230;<\/p>\n","protected":false},"author":7,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-39208","page","type-page","status-publish","hentry","no-post-thumbnail"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.5 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Nowe produkty - Collaborative Perks<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.collaborativeperks.com\/pl\/new-products\/\" \/>\n<meta property=\"og:locale\" content=\"pl_PL\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Nowe produkty - Collaborative Perks\" \/>\n<meta property=\"og:description\" content=\"Nowo\u015b\u0107 3 nowe modu\u0142y \u00b7 wiosna 2026 Trzy nowe oprogramowania, aby wzbogaci\u0107 sw\u00f3j portal pracowniczy. Rezerwacja parkingu, platforma po\u015bwi\u0119cona r\u00f3\u017cnorodno\u015bci i inkluzji, wewn\u0119trzny rynek przemys\u0142owy. Trzy rozwi\u0105zania zintegrowane z platform\u0105 Collaborative Perks, zaprojektowane dla du\u017cych grup. Um\u00f3w demo \u2192 Odkryj modu\u0142y +50 Klienci Global 2000 2,5M Pracownicy 16 Dost\u0119pne j\u0119zyki ZAREZERWOWANE \u0141ADOWARKA Wolne Wolne Zaj\u0119te...\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.collaborativeperks.com\/pl\/new-products\/\" \/>\n<meta property=\"og:site_name\" content=\"Collaborative Perks\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/facebook.com\/collabperks\" \/>\n<meta property=\"article:modified_time\" content=\"2026-05-06T09:39:52+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:site\" content=\"@CollabPerks\" \/>\n<meta name=\"twitter:label1\" content=\"Szacowany czas czytania\" \/>\n\t<meta name=\"twitter:data1\" content=\"4 minuty\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.collaborativeperks.com\\\/pl\\\/new-products\\\/\",\"url\":\"https:\\\/\\\/www.collaborativeperks.com\\\/pl\\\/new-products\\\/\",\"name\":\"Nowe produkty - Collaborative Perks\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.collaborativeperks.com\\\/#website\"},\"datePublished\":\"2026-05-05T14:36:25+00:00\",\"dateModified\":\"2026-05-06T09:39:52+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.collaborativeperks.com\\\/pl\\\/new-products\\\/#breadcrumb\"},\"inLanguage\":\"pl-PL\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.collaborativeperks.com\\\/pl\\\/new-products\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.collaborativeperks.com\\\/pl\\\/new-products\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.collaborativeperks.com\\\/es\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Nowe produkty\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.collaborativeperks.com\\\/#website\",\"url\":\"https:\\\/\\\/www.collaborativeperks.com\\\/\",\"name\":\"Collaborative Perks\",\"description\":\"Innovative employee benefits\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.collaborativeperks.com\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.collaborativeperks.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pl-PL\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.collaborativeperks.com\\\/#organization\",\"name\":\"Collaborative Perks\",\"url\":\"https:\\\/\\\/www.collaborativeperks.com\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pl-PL\",\"@id\":\"https:\\\/\\\/www.collaborativeperks.com\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"\",\"contentUrl\":\"\",\"caption\":\"Collaborative Perks\"},\"image\":{\"@id\":\"https:\\\/\\\/www.collaborativeperks.com\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/facebook.com\\\/collabperks\",\"https:\\\/\\\/x.com\\\/CollabPerks\",\"https:\\\/\\\/www.instagram.com\\\/collaborativeperks\\\/\",\"https:\\\/\\\/www.linkedin.com\\\/company\\\/collaborativeperks\\\/\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Nowe produkty - Collaborative Perks","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.collaborativeperks.com\/pl\/new-products\/","og_locale":"pl_PL","og_type":"article","og_title":"Nowe produkty - Collaborative Perks","og_description":"Nowo\u015b\u0107 3 nowe modu\u0142y \u00b7 wiosna 2026 Trzy nowe oprogramowania, aby wzbogaci\u0107 sw\u00f3j portal pracowniczy. Rezerwacja parkingu, platforma po\u015bwi\u0119cona r\u00f3\u017cnorodno\u015bci i inkluzji, wewn\u0119trzny rynek przemys\u0142owy. Trzy rozwi\u0105zania zintegrowane z platform\u0105 Collaborative Perks, zaprojektowane dla du\u017cych grup. Um\u00f3w demo \u2192 Odkryj modu\u0142y +50 Klienci Global 2000 2,5M Pracownicy 16 Dost\u0119pne j\u0119zyki ZAREZERWOWANE \u0141ADOWARKA Wolne Wolne Zaj\u0119te...","og_url":"https:\/\/www.collaborativeperks.com\/pl\/new-products\/","og_site_name":"Collaborative Perks","article_publisher":"https:\/\/facebook.com\/collabperks","article_modified_time":"2026-05-06T09:39:52+00:00","twitter_card":"summary_large_image","twitter_site":"@CollabPerks","twitter_misc":{"Szacowany czas czytania":"4 minuty"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.collaborativeperks.com\/pl\/new-products\/","url":"https:\/\/www.collaborativeperks.com\/pl\/new-products\/","name":"Nowe produkty - Collaborative Perks","isPartOf":{"@id":"https:\/\/www.collaborativeperks.com\/#website"},"datePublished":"2026-05-05T14:36:25+00:00","dateModified":"2026-05-06T09:39:52+00:00","breadcrumb":{"@id":"https:\/\/www.collaborativeperks.com\/pl\/new-products\/#breadcrumb"},"inLanguage":"pl-PL","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.collaborativeperks.com\/pl\/new-products\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.collaborativeperks.com\/pl\/new-products\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.collaborativeperks.com\/es\/"},{"@type":"ListItem","position":2,"name":"Nowe produkty"}]},{"@type":"WebSite","@id":"https:\/\/www.collaborativeperks.com\/#website","url":"https:\/\/www.collaborativeperks.com\/","name":"Collaborative Perks","description":"Innovative employee benefits","publisher":{"@id":"https:\/\/www.collaborativeperks.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.collaborativeperks.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pl-PL"},{"@type":"Organization","@id":"https:\/\/www.collaborativeperks.com\/#organization","name":"Collaborative Perks","url":"https:\/\/www.collaborativeperks.com\/","logo":{"@type":"ImageObject","inLanguage":"pl-PL","@id":"https:\/\/www.collaborativeperks.com\/#\/schema\/logo\/image\/","url":"","contentUrl":"","caption":"Collaborative Perks"},"image":{"@id":"https:\/\/www.collaborativeperks.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/facebook.com\/collabperks","https:\/\/x.com\/CollabPerks","https:\/\/www.instagram.com\/collaborativeperks\/","https:\/\/www.linkedin.com\/company\/collaborativeperks\/"]}]}},"_links":{"self":[{"href":"https:\/\/www.collaborativeperks.com\/pl\/wp-json\/wp\/v2\/pages\/39208","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.collaborativeperks.com\/pl\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.collaborativeperks.com\/pl\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.collaborativeperks.com\/pl\/wp-json\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/www.collaborativeperks.com\/pl\/wp-json\/wp\/v2\/comments?post=39208"}],"version-history":[{"count":1,"href":"https:\/\/www.collaborativeperks.com\/pl\/wp-json\/wp\/v2\/pages\/39208\/revisions"}],"predecessor-version":[{"id":39221,"href":"https:\/\/www.collaborativeperks.com\/pl\/wp-json\/wp\/v2\/pages\/39208\/revisions\/39221"}],"wp:attachment":[{"href":"https:\/\/www.collaborativeperks.com\/pl\/wp-json\/wp\/v2\/media?parent=39208"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}