{"id":43,"date":"2026-08-27T13:15:56","date_gmt":"2026-08-27T11:15:56","guid":{"rendered":"https:\/\/cg-team.com\/?page_id=43"},"modified":"2026-10-01T15:16:44","modified_gmt":"2026-10-01T13:16:44","slug":"ai-lab","status":"publish","type":"page","link":"https:\/\/cg-team.com\/en\/ai-lab\/","title":{"rendered":"AI LAB"},"content":{"rendered":"\n<section class=\"cgs cgs-page\" id=\"cgs\">\n<!-- RESPONSYWNO\u015a\u0106: bez tego tagu telefon renderuje stron\u0119 jak desktop (szer. 980px).\n     W WordPressie motyw ma go ju\u017c w <head> \u2014 tutaj to nieszkodliwy duplikat, potrzebny,\n     gdy plik otwierasz bezpo\u015brednio w przegl\u0105darce \/ na telefonie. -->\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<style>\n\/* ---- Font: Urbanist (400\/500\/600\/700), z systemowym fallbackiem ---- *\/\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Urbanist:wght@400;500;600;700&display=swap');\n\n\/* ======================  RESET (scoped)  ====================== *\/\n.cgs, .cgs *, .cgs *::before, .cgs *::after { box-sizing:border-box; }\n.cgs { all:unset; display:block; }\n.cgs h1, .cgs h2, .cgs h3, .cgs p { margin:0; padding:0; }\n\/* gdy plik jest otwarty samodzielnie (sekcja le\u017cy bezpo\u015brednio w <body>), zdejmij domy\u015blny margines 8px,\n   kt\u00f3ry dawa\u0142 bia\u0142e paski po bokach; w WordPressie ta regu\u0142a nie zadzia\u0142a, bo sekcja jest g\u0142\u0119biej *\/\nbody:has(> .cgs-page){ margin:0; background:#000; }\n.cgs{\n  --bg:#000000;\n  --red:#F0342C;\n  --red-bright:#FF3B30;\n  --cream:#ECE6DC;\n  --white:#FFFFFF;\n  --muted:rgba(255,255,255,.80);\n  --muted-2:rgba(255,255,255,.55);\n  --line:rgba(255,255,255,.28);\n  --maxw:1240px;\n  --gutter:40px;\n  --pad:clamp(22px, 4.6vw, 84px);   \/* margines kraw\u0119dziowy dla menu i stopki (pe\u0142na szeroko\u015b\u0107) *\/\n  --w-head:500;\n  --w-strong:600;\n  position:relative;\n  background:var(--bg);\n  color:var(--white);\n  font-family:'Urbanist', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;\n  font-size:16px; font-weight:400; line-height:1.6;\n  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;\n  overflow-x:hidden;                \/* chowa poziome przepe\u0142nienie od blob\u00f3w *\/\n}\n.cgs p{ margin:0; }\n.cgs a{ color:inherit; text-decoration:none; }\n.cgs img{ display:block; max-width:100%; border:0; }\n.cgs strong{ font-weight:var(--w-strong); color:#fff; }\n.cgs-wrap{ position:relative; width:100%; max-width:var(--maxw); margin:0 auto; padding:0 var(--gutter); }\n\n\/* ======================  T\u0141O (statyczne poblaski wg bloby.svg)  ====================== *\/\n\/* Warstwa na ca\u0142y ekran (fixed) \u2014 nieruchoma, NIE przewija si\u0119 i NIE porusza.\n   Odwzorowanie z bloby.svg: mocny poblask u do\u0142u (\u015brodek-prawo) + mi\u0119kki u g\u00f3ry po lewej.\n   Kolor #ED2727 jak w SVG. Chcesz zwyk\u0142\u0105 czer\u0144? Skasuj <div class=\"cgs-bg\"> w HTML.\n   Przesuni\u0119cie\/si\u0142a: edytuj warto\u015bci \u201eat X% Y%\" oraz alfy rgba() poni\u017cej. *\/\n.cgs-bg{\n  position:fixed; inset:0; z-index:0; pointer-events:none;\n  background:\n    radial-gradient(52% 60% at 37% -8%,  rgba(237,39,39,.38) 0%, rgba(237,39,39,0) 72%),\n    radial-gradient(42% 52% at 69% 103%, rgba(237,39,39,.72) 0%, rgba(237,39,39,.40) 34%, rgba(237,39,39,0) 72%);\n}\n\n\/* ======================  NAV (pe\u0142na szeroko\u015b\u0107)  ====================== *\/\n.cgs-nav{ position:absolute; top:0; left:0; right:0; z-index:40; padding:34px var(--pad) 0; }\n.cgs-nav-inner{ display:flex; align-items:center; justify-content:space-between; width:100%; }\n.cgs-brand{ font-weight:500; font-size:1.05rem; letter-spacing:.01em; }\n.cgs-menu{ display:flex; align-items:center; gap:34px; font-size:.98rem; }\n.cgs-menu a{ color:var(--muted); font-weight:500; transition:color .25s ease; }\n.cgs-menu a:hover{ color:#fff; }\n.cgs-menu .cgs-btn{ color:#fff; }\n.cgs-btn{\n  display:inline-block; background:var(--red); color:#fff; font-weight:500;\n  padding:11px 22px; border-radius:6px; line-height:1;\n  transition:transform .25s ease, box-shadow .25s ease, background .25s ease;\n}\n.cgs-btn:hover{ background:#ff473f; transform:translateY(-1px); box-shadow:0 10px 30px -8px rgba(240,52,44,.6); }\n.cgs-btn-secondary{\n  background:transparent; padding:9px 20px; border-radius:6px; line-height:1;\n  border:1px solid var(--red); color:#fff;\n  display:inline-block; font-weight:500;\n  transition:transform .25s ease, box-shadow .25s ease, background .25s ease, border-color .25s ease;\n}\n.cgs-btn-secondary:hover{ background:rgba(240,52,44,.1); transform:translateY(-1px); border-color:#ff473f; box-shadow:0 10px 30px -8px rgba(240,52,44,.4); }\n\n\/* ======================  HAMBURGER + OVERLAY (mobile)  ====================== *\/\n.cgs-burger{ display:none; position:relative; z-index:41; width:44px; height:44px; padding:10px; background:transparent; border:0; cursor:pointer; }\n.cgs-burger span{ display:block; width:100%; height:2px; background:#fff; border-radius:2px; transition:transform .3s ease, opacity .2s ease; }\n.cgs-burger span + span{ margin-top:6px; }\n.cgs-burger.is-open span:nth-child(1){ transform:translateY(8px) rotate(45deg); }\n.cgs-burger.is-open span:nth-child(2){ opacity:0; }\n.cgs-burger.is-open span:nth-child(3){ transform:translateY(-8px) rotate(-45deg); }\n\n.cgs-overlay{\n  position:fixed; inset:0; z-index:39; background:#000;\n  display:flex; flex-direction:column; padding:120px 32px 32px;\n  opacity:0; visibility:hidden; transition:opacity .3s ease, visibility .3s ease;\n}\n.cgs-overlay.is-open{ opacity:1; visibility:visible; }\n.cgs-overlay-links{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:24px; }\n.cgs-overlay-links a{ color:#fff; font-weight:400; font-size:1.7rem; letter-spacing:.01em; transition:opacity .25s ease; }\n.cgs-overlay-links a:hover{ opacity:.7; }\n.cgs-overlay-actions{ display:flex; flex-direction:column; gap:14px; }\n.cgs-btn-block{ display:block; width:100%; text-align:center; font-size:1.2rem; padding:20px 22px; }\n\n\/* ======================  NAWIGACJA BOCZNA (rail)  ====================== *\/\n\/* Wstrzykiwana automatycznie do ka\u017cdej sekcji, kt\u00f3ra ma atrybut data-rail-label.\n   Widoczna od 1025px w g\u00f3r\u0119 (na tablecie\/mobile znika). *\/\n.cgs-rail{\n  position:absolute; left:calc(var(--gutter) - 8px); top:0; bottom:0; z-index:5;\n  display:flex; flex-direction:column; align-items:center;\n  color:var(--muted-2); font-size:.82rem; letter-spacing:.02em; pointer-events:none;\n}\n.cgs-rail .l{ position:absolute; left:50%; top:16px; bottom:16px; width:1px; background:var(--line); transform:translateX(-50%); z-index:1; }\n.cgs-rail span{ position:relative; top:16px; z-index:2; writing-mode:vertical-rl; transform:rotate(180deg); background:var(--bg); padding:12px 3px; }\n\n\/* ======================  TRE\u015a\u0106 PODSTRONY (kontener sekcji)  ====================== *\/\n.cgs-main{ position:relative; z-index:1; }\n.cgs-main > section{ position:relative; padding:clamp(70px, 11vw, 140px) 0; }\n\/* pierwsza sekcja ust\u0119puje miejsca menu (nag\u0142\u00f3wek strony) *\/\n.cgs-main > section:first-child{ padding-top:clamp(140px, 20vw, 200px); }\n\n\/* pomocnicze style tre\u015bci w duchu marki (opcjonalne, do wykorzystania) *\/\n.cgs-eyebrow{ color:var(--red); font-weight:500; font-size:.95rem; letter-spacing:.02em; margin-bottom:14px; }\n.cgs-h2{ font-weight:var(--w-head); letter-spacing:-.015em; line-height:1.02; font-size:clamp(2.2rem, 5.4vw, 4rem); }\n.cgs-h2 .red{ color:var(--red); }\n.cgs-h2 .cream{ color:var(--cream); }\n.cgs-lead{ color:var(--muted); font-size:1.02rem; line-height:1.75; max-width:60ch; margin-top:20px; }\n\n\/* ======================  NAG\u0141\u00d3WEK PODSTRONY (hero)  ====================== *\/\n\/* Du\u017cy nag\u0142\u00f3wek na g\u00f3rze podstrony. Czerwony poblask pod spodem daje warstwa .cgs-bg. *\/\n.cgs-header{ position:relative; z-index:1; text-align:center; padding:190px 0 120px; overflow:hidden; }\n.cgs-header-inner{ position:relative; z-index:2; max-width:900px; margin:0 auto; padding:0 var(--gutter); }   \/* boczny margines \u2014 tekst nie dotyka kraw\u0119dzi na telefonie *\/\n.cgs-header .cgs-eyebrow{ margin-bottom:22px; }\n\/* subtytu\u0142 hero u\u017cywa teraz stylu .cgs-lead \u2014 wy\u015brodkowany w kolumnie hero *\/\n.cgs-header .cgs-lead{ margin-left:auto; margin-right:auto; }\n.cgs-hero-title{\n  position:relative; z-index:1; margin:0; font-weight:var(--w-head);\n  letter-spacing:-.015em; line-height:.98; font-size:clamp(2.6rem, 7.4vw, 6rem);\n}\n.cgs-hero-title .cream{ color:var(--cream); display:block; }\n.cgs-hero-title .red{ color:var(--red); display:block; }\n.cgs-hero-sub{\n  position:relative; z-index:1; margin-top:36px; color:#fff; font-weight:400;\n  font-size:clamp(16px, 3vw, 24px); letter-spacing:-.01em;\n}\n.cgs-hero-sub a{ color:var(--red); text-decoration:underline; text-underline-offset:5px; text-decoration-thickness:2px; transition:opacity .2s ease; }\n.cgs-hero-sub a:hover{ opacity:.75; }\n.cgs-header .cgs-btn, .cgs-header .cgs-btn-secondary{ margin-top:34px; padding:13px 26px; font-size:1rem; }\n\n\/* mikroanimacja hover jak przy buttonie \u201ekontakt\" w menu (lekkie pod\u015bwietlenie + ruch w g\u00f3r\u0119).\n   .cgs-reveal.cgs-in ustawia\u0142o transform:none i \u201ezjada\u0142o\" ruch \u2014 przywracamy go z wy\u017csz\u0105 swoisto\u015bci\u0105 *\/\n.cgs-btn.cgs-reveal{ transition:opacity .8s ease, transform .25s ease, box-shadow .25s ease, background .25s ease; }\n.cgs-btn.cgs-reveal:hover{ transform:translateY(-1px); background:#ff473f; box-shadow:0 10px 30px -8px rgba(240,52,44,.6); }\n\n\/* ======================  SEKCJA: AI LAB (dwie kolumny, schodkowo \u2014 jak sekcja \u201eo nas\")  ====================== *\/\n.cgs-ailab{ display:grid; grid-template-columns:1fr 1fr; gap:60px; }\n.cgs-ailab p{ color:var(--muted); font-size:1.02rem; line-height:1.75; margin:0; }\n.cgs-ailab .col-a{ max-width:560px; padding-left:96px; }              \/* lewa kolumna, wci\u0119cie omija rail *\/\n.cgs-ailab .col-b{ max-width:600px; margin-top:150px; justify-self:end; } \/* prawa kolumna, przesuni\u0119ta w d\u00f3\u0142 *\/\n\n\/* ======================  SEKCJA: projekty (klikalny kafelek jak karty projekt\u00f3w + CTA)  ====================== *\/\n.cgs-projekty{ display:flex; align-items:center; justify-content:space-between; gap:clamp(30px, 5vw, 64px); flex-wrap:wrap; }\n\/* karta + hover przeniesione 1:1 z pliku referencyjnego (.cgs-card) *\/\n.cgs-card{ position:relative; display:block; width:min(560px, 100%); aspect-ratio:16\/10; border-radius:10px; overflow:hidden; background:#111; isolation:isolate; }\n.cgs-card .bg{ position:absolute; inset:0; background-size:cover; background-position:center; transition:transform .9s cubic-bezier(.16,.84,.34,1); will-change:transform; }\n.cgs-card::after{ content:\"\"; position:absolute; inset:0; background:linear-gradient(to top, rgba(0,0,0,.82) 0%, rgba(0,0,0,.30) 40%, rgba(0,0,0,0) 62%); z-index:1; }\na.cgs-card{ cursor:pointer; }\na.cgs-card:hover .bg{ transform:scale(1.05); }   \/* mikrointerakcja: delikatny zoom t\u0142a *\/\n.cgs-badge{ position:absolute; top:20px; left:22px; z-index:2; display:inline-flex; align-items:center; gap:8px; font-size:.86rem; letter-spacing:.01em; color:#fff; }\n.cgs-badge.muted{ color:rgba(255,255,255,.72); }\n.cgs-badge svg{ width:17px; height:17px; opacity:.95; }\n.cgs-card-txt{ position:absolute; left:22px; bottom:20px; z-index:2; }\n.cgs-card-title{ font-size:clamp(1.6rem,2.6vw,2.15rem); font-weight:600; letter-spacing:-.01em; line-height:1.05; }\n.cgs-card-sub{ margin-top:6px; font-size:.92rem; color:rgba(255,255,255,.82); max-width:34ch; }\n.cgs-projekty .cgs-btn{ padding:13px 26px; font-size:1rem; white-space:nowrap; }\n\n\/* ======================  DEMO WIDEO (lightbox po klikni\u0119ciu kafelka)  ====================== *\/\n\/* Pe\u0142noekranowa warstwa nad wszystkim (tak\u017ce nad menu, kt\u00f3re ma z-index:40) *\/\n.cgs-video{\n  position:fixed; inset:0; z-index:60;\n  display:flex; align-items:center; justify-content:center;\n  padding:96px var(--pad) 40px;               \/* 96px u g\u00f3ry = miejsce na \"x\" *\/\n  background:rgba(0,0,0,.92);\n  opacity:0; visibility:hidden;\n  transition:opacity .3s ease, visibility .3s ease;   \/* to samo pojawianie si\u0119 co menu mobilne *\/\n}\n.cgs-video.is-open{ opacity:1; visibility:visible; }\n.cgs-video-box{\n  position:relative; max-width:min(1100px, 100%);\n  transform:scale(.96); transition:transform .5s cubic-bezier(.16,.84,.34,1);\n}\n.cgs-video.is-open .cgs-video-box{ transform:none; }\n\/* film dopasowuje si\u0119 do ekranu z zachowaniem proporcji (pion i poziom) *\/\n.cgs-video-el{\n  display:block; width:auto; height:auto; max-width:100%;\n  max-height:calc(100vh - 136px); max-height:calc(100svh - 136px);\n  border-radius:10px; background:#000; outline:none;\n  opacity:0; transition:opacity .4s ease;     \/* pokazuje si\u0119, gdy pierwsza klatka jest gotowa *\/\n}\n.cgs-video.is-ready .cgs-video-el{ opacity:1; }\n\/* loader w kolorze marki, widoczny dop\u00f3ki film si\u0119 nie wczyta *\/\n.cgs-video-box::before{\n  content:\"\"; position:absolute; left:50%; top:50%; width:34px; height:34px; margin:-17px 0 0 -17px;\n  border-radius:50%; border:2px solid rgba(255,255,255,.2); border-top-color:var(--red);\n  animation:cgsSpin .8s linear infinite;\n}\n.cgs-video.is-ready .cgs-video-box::before{ display:none; }\n@keyframes cgsSpin{ to{ transform:rotate(360deg); } }\n\n\/* \"x\" \u2014 1:1 jak otwarty hamburger mobilny (.cgs-burger.is-open), w tym samym miejscu co on *\/\n.cgs-vclose{\n  position:absolute; top:34px; right:var(--pad); z-index:2;\n  width:44px; height:44px; padding:10px;\n  background:transparent; border:0; cursor:pointer;\n}\n.cgs-vclose span{ display:block; width:100%; height:2px; background:#fff; border-radius:2px; }\n.cgs-vclose span + span{ margin-top:6px; }\n.cgs-vclose span:nth-child(1){ transform:translateY(8px) rotate(45deg); }\n.cgs-vclose span:nth-child(2){ opacity:0; }\n.cgs-vclose span:nth-child(3){ transform:translateY(-8px) rotate(-45deg); }\n\n\/* ======================  STOPKA (Style CSS)  ====================== *\/\n.cgs-footer{ position:relative; z-index:2; background:#000; padding:70px 0 34px; }\n.cgs-wordmark{\n  display:flex; justify-content:space-between; align-items:baseline; white-space:nowrap;\n  width:100%; padding:0 var(--pad); font-weight:600; line-height:1;\n  font-size:clamp(2.4rem, 12.6vw, 11.5rem);\n}\n.cgs-wordmark > span{ display:inline-block; color:#fff; }\n.cgs-wordmark .cg{ color:var(--red); letter-spacing:-.005em; }\n.cgs-foot-bar{\n  width:100%; padding:0 var(--pad); margin-top:40px;\n  display:flex; justify-content:space-between; align-items:center; flex-wrap:nowrap;\n  gap:clamp(10px, 3vw, 40px);\n  font-size:clamp(.66rem, 1.9vw, .9rem); color:var(--muted-2); white-space:nowrap;\n}\n.cgs-foot-bar a:hover{ color:#fff; }\n.cgs-foot-bar .left{ display:flex; flex-wrap:nowrap; gap:clamp(9px, 2.2vw, 26px); }\n.cgs-foot-bar .right{ display:flex; flex-wrap:nowrap; gap:clamp(9px, 2.2vw, 26px); }\n\n\/* ======================  REVEAL  ====================== *\/\n.cgs-reveal{ opacity:0; transform:translateY(18px); transition:opacity .8s ease, transform .8s cubic-bezier(.16,.84,.34,1); }\n.cgs-reveal.cgs-in{ opacity:1; transform:none; }\n\n\/* ======================  RESPONSIVE  ====================== *\/\n@media (max-width:1024px){\n  .cgs-rail{ display:none; }        \/* pasek boczny znika na tablecie\/mobile *\/\n  .cgs-ailab .col-a{ padding-left:0; }\n  .cgs-ailab .col-b{ margin-top:60px; }\n}\n@media (max-width:820px){\n  .cgs-nav{ padding-top:22px; position:fixed; }  \/* fixed => hamburger dost\u0119pny te\u017c po scrollu *\/\n  .cgs-menu{ display:none; }\n  .cgs-burger{ display:block; }\n  .cgs-main > section:first-child{ padding-top:clamp(120px, 26vw, 160px); }\n  .cgs-header{ padding:130px 0 80px; }\n  .cgs-ailab{ grid-template-columns:1fr; gap:34px; }   \/* na mobile jedna kolumna *\/\n  .cgs-ailab .col-b{ margin-top:0; }\n  .cgs-projekty{ flex-direction:column; align-items:center; }   \/* kafelek nad przyciskiem, przycisk wy\u015brodkowany *\/\n  .cgs-projekty .cgs-card{ width:100%; }\n  .cgs-vclose{ top:22px; }                       \/* ta sama wysoko\u015b\u0107 co hamburger na mobile *\/\n}\n@media (max-width:520px){\n  .cgs{ --gutter:22px; }\n  .cgs-brand{ font-size:.98rem; }\n  .cgs-menu .cgs-btn{ padding:9px 16px; }\n  .cgs-header-inner{ padding:0 32px; }   \/* wi\u0119kszy oddech dla tekstu w hero na telefonie (jak w menu mobilnym) *\/\n}\n\n\/* ======================  DOST\u0118PNO\u015a\u0106 \/ REDUCED MOTION  ====================== *\/\n.cgs a:focus-visible, .cgs .cgs-btn:focus-visible, .cgs .cgs-btn-secondary:focus-visible, .cgs .cgs-burger:focus-visible, .cgs .cgs-vclose:focus-visible{ outline:2px solid #fff; outline-offset:3px; border-radius:6px; }\n@media (prefers-reduced-motion: reduce){\n  .cgs *{ animation:none !important; }\n  .cgs-reveal{ opacity:1; transform:none; transition:none; }\n}\n<\/style>\n\n<!-- ===========================  T\u0141O (opcjonalne)  =========================== -->\n<div class=\"cgs-bg\" aria-hidden=\"true\"><\/div>\n\n<!-- ===========================  NAV  =========================== -->\n<nav class=\"cgs-nav\">\n  <div class=\"cgs-nav-inner\">\n    <a href=\"\/\" class=\"cgs-brand\">CG Team<\/a>\n    <div class=\"cgs-menu\">\n      <!-- podmie\u0144 na swoje adresy podstron -->\n      <a href=\"https:\/\/cg-team.com\/#o-nas\">o nas<\/a>\n      <a href=\"https:\/\/cg-team.com\/#projekty\">projekty<\/a>\n      <a href=\"https:\/\/cg-team.com\/ai-lab\/\" class=\"cgs-btn-secondary\">AI LAB<\/a>\n      <a href=\"https:\/\/cg-team.com\/#kontakt\" class=\"cgs-btn\">kontakt<\/a>\n    <\/div>\n    <button class=\"cgs-burger\" aria-label=\"Menu\" aria-expanded=\"false\" aria-controls=\"cgs-overlay\">\n      <span><\/span><span><\/span><span><\/span>\n    <\/button>\n  <\/div>\n<\/nav>\n\n<!-- pe\u0142noekranowe menu mobilne -->\n<div class=\"cgs-overlay\" id=\"cgs-overlay\">\n  <div class=\"cgs-overlay-links\">\n    <a href=\"https:\/\/cg-team.com\/#o-nas\">o nas<\/a>\n    <a href=\"https:\/\/cg-team.com\/#projekty\">projekty<\/a>\n  <\/div>\n  <div class=\"cgs-overlay-actions\">\n    <a href=\"https:\/\/cg-team.com\/ai-lab\/\" class=\"cgs-btn-secondary cgs-btn-block\">AI LAB<\/a>\n    <a href=\"https:\/\/cg-team.com\/#kontakt\" class=\"cgs-btn cgs-btn-block\">kontakt<\/a>\n  <\/div>\n<\/div>\n\n<!-- ===========================  DEMO WIDEO (lightbox)  ===========================\n     Otwiera si\u0119 po klikni\u0119ciu kafelka z atrybutem data-video. Adres filmu bierze z href kafelka. -->\n<div class=\"cgs-video\" id=\"cgs-video\" role=\"dialog\" aria-modal=\"true\" aria-label=\"Demo\" aria-hidden=\"true\">\n  <button class=\"cgs-vclose\" type=\"button\" aria-label=\"Zamknij\">\n    <span><\/span><span><\/span><span><\/span>\n  <\/button>\n  <div class=\"cgs-video-box\">\n    <video class=\"cgs-video-el\" controls playsinline loop preload=\"none\"><\/video>\n  <\/div>\n<\/div>\n\n<!-- ===========================================================\n     TRE\u015a\u0106 PODSTRONY  \u2014 EDYTUJ TYLKO TEN OBSZAR\n     ------------------------------------------------------------\n     \u2022 Ka\u017cda <section> mo\u017ce dosta\u0107 data-rail-label=\"...\" aby trafi\u0107 na pasek boczny.\n     \u2022 Sekcje bez tego atrybutu istniej\u0105 normalnie, ale nie pojawi\u0105 si\u0119 na pasku.\n     =========================================================== -->\n<main class=\"cgs-main\">\n\n  <!-- ===== NAG\u0141\u00d3WEK PODSTRONY (hero) =====\n       Du\u017cy nag\u0142\u00f3wek na g\u00f3rze. To <header> (nie <section>), wi\u0119c NIE trafia na pasek boczny. -->\n  <header class=\"cgs-header\">\n    <div class=\"cgs-header-inner\">\n      <h1 class=\"cgs-hero-title cgs-reveal\">\n        <span class=\"cream\">AI LAB<\/span>\n    \n      <\/h1>\n      <p class=\"cgs-lead cgs-reveal\">Potrzebujesz dedykowanej aplikacji lub narz\u0119dzia w swojej firmie?  W AI LAB specjalizujemy si\u0119 w narz\u0119dziach opartych na technologii AI,  ale nie tylko! <\/p>\n      <!-- przycisk jak w przyk\u0142adzie \u2014 podmie\u0144 tekst i adres -->\n      <a href=\"https:\/\/cal.com\/cg-team\" class=\"cgs-btn cgs-reveal\" target=\"_blank\" rel=\"noopener\">um\u00f3w si\u0119 na spotkanie<\/a>\n    <\/div>\n  <\/header>\n\n  <!-- ===== SEKCJA 1: AI LAB (opis) ===== -->\n  <section id=\"ai-lab\" data-rail-label=\"AI LAB\">\n    <div class=\"cgs-wrap\">\n      <div class=\"cgs-ailab\">\n        <p class=\"col-a cgs-reveal\">AI LAB to miejsce, w kt\u00f3rym zamieniamy potrzeby biznesowe w dzia\u0142aj\u0105ce produkty cyfrowe. Tworzymy na zam\u00f3wienie dedykowane rozwi\u0105zania \u2014 od narz\u0119dzi i aplikacji internetowych, przez automatyzacje, a\u017c po produkty wykorzystuj\u0105ce sztuczn\u0105 inteligencj\u0119. Dobieramy technologi\u0119 do konkretnego problemu, a nie problem do technologii. Nie zawsze najnowsze i najbardziej zaawansowane rozwi\u0105zanie jest najlepszym wyborem. Dlatego szukamy technologii, kt\u00f3ra pozwoli osi\u0105gn\u0105\u0107 Tw\u00f3j cel w mo\u017cliwie prosty, skuteczny i op\u0142acalny spos\u00f3b.<\/p>\n        <p class=\"col-b cgs-reveal\">Nasz\u0105 wsp\u00f3\u0142prac\u0119 zaczynamy od rozmowy. Chcemy dobrze zrozumie\u0107 Twoje potrzeby, cele i oczekiwania, aby zaproponowa\u0107 rozwi\u0105zanie, kt\u00f3re rzeczywi\u015bcie odpowiada na Tw\u00f3j problem. Po spotkaniu przygotowujemy zakres prac oraz wycen\u0119 projektu.<\/p>\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <!-- ===== SEKCJA 2: projekty (klikalny kafelek + CTA) ===== -->\n  <section id=\"projekty\" data-rail-label=\"projekty\">\n    <div class=\"cgs-wrap\">\n      <div class=\"cgs-projekty\">\n        <!-- KLIKALNY KAFELEK \u2014 otwiera demo wideo w lightboxie (data-video).\n             Adres filmu = href. Bez JavaScriptu link po prostu otworzy film w nowej karcie. -->\n        <a href=\"http:\/\/cg-team.com\/wp-content\/uploads\/2026\/10\/Mobile_Mockup_4K.mp4\" class=\"cgs-card cgs-reveal\" data-video target=\"_blank\" rel=\"noopener\">\n          <div class=\"bg\" style=\"background-image:url(http:\/\/cg-team.com\/wp-content\/uploads\/2026\/10\/01_Mobile0-scaled.jpg)\"><\/div> <!-- [OBRAZEK: Kalendarz wydatk\u00f3w] -->\n          <span class=\"cgs-badge\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><circle cx=\"12\" cy=\"12\" r=\"9\"><\/circle><path d=\"M3 12h18\"><\/path><path d=\"M12 3a14 14 0 0 1 0 18a14 14 0 0 1 0-18Z\"><\/path><\/svg> zobacz demo<\/span>\n          <div class=\"cgs-card-txt\">\n            <div class=\"cgs-card-title\">Kalendarz wydatk\u00f3w<\/div>\n            <div class=\"cgs-card-sub\">pozwala kontrolowa\u0107 bud\u017cet oraz podejmowa\u0107 racjonalne decyzje inwestycyjne<\/div>\n          <\/div>\n        <\/a>\n        <a href=\"https:\/\/cal.com\/cg-team\" class=\"cgs-btn cgs-reveal\" target=\"_blank\" rel=\"noopener\">um\u00f3w si\u0119 na spotkanie<\/a>\n      <\/div>\n    <\/div>\n  <\/section>\n\n<\/main>\n<!-- =====================  KONIEC TRE\u015aCI PODSTRONY  ===================== -->\n\n<!-- ===========================  STOPKA  =========================== -->\n<footer class=\"cgs-footer\">\n  <div class=\"cgs-wordmark\">\n    <span class=\"cg\">CG<\/span>\n    <span>T<\/span><span>E<\/span><span>A<\/span><span>M<\/span>\n  <\/div>\n  <div class=\"cgs-foot-bar\">\n    <div class=\"left\">\n      <span>2026<\/span>\n      <a href=\"https:\/\/cg-team.com\/privacy-policy\/\">privacy policy<\/a>\n      <a href=\"\/polityka-cookies\/\">cookies policy<\/a>\n    <\/div>\n    <div class=\"right\">\n      <a href=\"https:\/\/cg-team.com\/#o-nas\">o nas<\/a>\n      <a href=\"https:\/\/cg-team.com\/#projekty\">projekty<\/a>\n    <\/div>\n  <\/div>\n<\/footer>\n\n<script>\n(function(){\n  var root = document.getElementById('cgs');\n  if(!root) return;\n  var reduce = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n\n  \/* --- hamburger \/ overlay (mobile) --- *\/\n  var burger  = root.querySelector('.cgs-burger');\n  var overlay = root.querySelector('#cgs-overlay');\n  if(burger && overlay){\n    function setMenu(open){\n      burger.classList.toggle('is-open', open);\n      overlay.classList.toggle('is-open', open);\n      burger.setAttribute('aria-expanded', open ? 'true' : 'false');\n      document.body.style.overflow = open ? 'hidden' : '';\n    }\n    burger.addEventListener('click', function(){ setMenu(!overlay.classList.contains('is-open')); });\n    overlay.querySelectorAll('a').forEach(function(a){ a.addEventListener('click', function(){ setMenu(false); }); });\n    document.addEventListener('keydown', function(e){\n      if(e.key === 'Escape' && overlay.classList.contains('is-open')) setMenu(false);\n    });\n  }\n\n  \/* --- DEMO WIDEO: klik w kafelek z [data-video] otwiera film w lightboxie --- *\/\n  var vbox   = root.querySelector('#cgs-video');\n  var vel    = vbox ? vbox.querySelector('video') : null;\n  var vclose = vbox ? vbox.querySelector('.cgs-vclose') : null;\n  if(vbox && vel && vclose){\n    var lastTrigger = null;\n    function openVideo(src, trigger){\n      lastTrigger = trigger || null;\n      if(vel.getAttribute('src') !== src){ vbox.classList.remove('is-ready'); vel.src = src; }  \/\/ film \u0142aduje si\u0119 dopiero przy 1. otwarciu\n      vbox.classList.add('is-open');\n      vbox.setAttribute('aria-hidden', 'false');\n      document.body.style.overflow = 'hidden';                     \/\/ blokada scrolla t\u0142a\n      var p = vel.play(); if(p && p.catch) p.catch(function(){});\n      setTimeout(function(){ vclose.focus({preventScroll:true}); }, 60);   \/\/ po starcie animacji, gdy okno jest ju\u017c widoczne\n    }\n    function closeVideo(){\n      if(!vbox.classList.contains('is-open')) return;\n      vbox.classList.remove('is-open');\n      vbox.setAttribute('aria-hidden', 'true');\n      document.body.style.overflow = '';\n      vel.pause();\n      try{ vel.currentTime = 0; }catch(e){}                         \/\/ przy kolejnym otwarciu film startuje od pocz\u0105tku\n      if(lastTrigger) lastTrigger.focus();\n    }\n    root.querySelectorAll('[data-video]').forEach(function(a){\n      a.addEventListener('click', function(e){\n        if(e.metaKey || e.ctrlKey || e.shiftKey || e.button === 1) return;   \/\/ ctrl\/cmd+klik = zwyk\u0142a nowa karta\n        e.preventDefault();\n        openVideo(a.getAttribute('data-video') || a.getAttribute('href'), a);\n      });\n    });\n    vel.addEventListener('loadeddata', function(){ vbox.classList.add('is-ready'); });\n    vclose.addEventListener('click', closeVideo);\n    vbox.addEventListener('click', function(e){ if(e.target === vbox) closeVideo(); });   \/\/ klik w ciemne t\u0142o zamyka\n    document.addEventListener('keydown', function(e){ if(e.key === 'Escape') closeVideo(); });\n  }\n\n  \/* --- NAWIGACJA BOCZNA: automatyczne generowanie z sekcji [data-rail-label] --- *\/\n  var main = root.querySelector('.cgs-main');\n  if(main){\n    main.querySelectorAll('section[data-rail-label]').forEach(function(sec){\n      if(sec.querySelector(':scope > .cgs-rail')) return;              \/\/ nie dubluj\n      var label = (sec.getAttribute('data-rail-label') || '').trim();\n      if(!label) return;\n      var rail = document.createElement('div'); rail.className = 'cgs-rail';\n      var span = document.createElement('span'); span.textContent = label;\n      var line = document.createElement('i');   line.className = 'l';\n      rail.appendChild(span); rail.appendChild(line);\n      sec.insertBefore(rail, sec.firstChild);                          \/\/ rail musi by\u0107 1. dzieckiem sekcji\n    });\n  }\n\n  \/* --- reveal --- *\/\n  var reveals = root.querySelectorAll('.cgs-reveal');\n  if('IntersectionObserver' in window && !reduce){\n    var io = new IntersectionObserver(function(entries){\n      entries.forEach(function(e){ if(e.isIntersecting){ e.target.classList.add('cgs-in'); io.unobserve(e.target); } });\n    }, {threshold:0.15});\n    reveals.forEach(function(el){ io.observe(el); });\n  } else { reveals.forEach(function(el){ el.classList.add('cgs-in'); }); }\n\n  \/* --- sierotki: dokleja jednoliterowe s\u0142owa (a i o u w z) do nast\u0119pnego wyrazu tward\u0105 spacj\u0105 --- *\/\n  (function(){\n    try{\n      var walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT, null);\n      var re = \/(^|[\\s\\u00A0])([aiouwzAIOUWZ])[ \\t\\n]+\/g;\n      var t, list = [];\n      while(t = walker.nextNode()){ list.push(t); }\n      list.forEach(function(n){\n        var p = n.parentNode; if(!p) return;\n        if(p.nodeName === 'SCRIPT' || p.nodeName === 'STYLE') return;\n        var v = n.nodeValue; if(!v || v.indexOf(' ') === -1) return;\n        var nv = v.replace(re, function(m, pre, letter){ return pre + letter + '\\u00A0'; });\n        if(nv !== v) n.nodeValue = nv;\n      });\n    }catch(e){}\n  })();\n\n  \/* --- pasek boczny: etykiety jad\u0105 po linii wraz ze scrollem; ostatnia doje\u017cd\u017ca do do\u0142u strony --- *\/\n  var rails = Array.prototype.slice.call(root.querySelectorAll('.cgs-rail'));\n  if(rails.length){\n    var railRaf = null;\n    function positionRails(){\n      railRaf = null;\n      var vh = window.innerHeight;\n      var refY = vh * 0.40;\n      var sy = window.scrollY || window.pageYOffset || 0;\n      var maxScroll = Math.max(1, (document.documentElement.scrollHeight - vh));\n      rails.forEach(function(rail, i){\n        var section = rail.parentElement;\n        var label = rail.querySelector('span');\n        var line  = rail.querySelector('.l');\n        if(!section || !label || !line) return;\n        var rect = section.getBoundingClientRect();\n        var docTop = rect.top + sy;\n        var startScroll = docTop - refY;\n        var isLast = (i === rails.length - 1);\n        var range = isLast ? Math.max(1, maxScroll - startScroll) : Math.max(1, rect.height);\n        var p = (sy - startScroll) \/ range;\n        p = p < 0 ? 0 : (p > 1 ? 1 : p);\n        var travel = Math.max(0, line.offsetHeight - label.offsetHeight);\n        label.style.top = (16 + p * travel) + 'px';\n      });\n    }\n    function onScroll(){ if(!railRaf) railRaf = requestAnimationFrame(positionRails); }\n    window.addEventListener('scroll', onScroll, {passive:true});\n    window.addEventListener('resize', onScroll);\n    window.addEventListener('load', positionRails);\n    positionRails();\n  }\n})();\n<\/script>\n<\/section>\n","protected":false},"excerpt":{"rendered":"<p>CG Team o nas projekty AI LAB kontakt o nas projekty AI LAB kontakt AI LAB Potrzebujesz dedykowanej aplikacji lub narz\u0119dzia w swojej firmie? W AI LAB specjalizujemy si\u0119 w narz\u0119dziach opartych na technologii AI, ale nie tylko! um\u00f3w si\u0119 na spotkanie AI LAB to miejsce, w kt\u00f3rym zamieniamy potrzeby biznesowe w dzia\u0142aj\u0105ce produkty cyfrowe. &#8230; <a title=\"AI LAB\" class=\"read-more\" href=\"https:\/\/cg-team.com\/en\/ai-lab\/\" aria-label=\"Read more about AI LAB\">Read more<\/a><\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-43","page","type-page","status-publish"],"_links":{"self":[{"href":"https:\/\/cg-team.com\/en\/wp-json\/wp\/v2\/pages\/43","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cg-team.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/cg-team.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/cg-team.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/cg-team.com\/en\/wp-json\/wp\/v2\/comments?post=43"}],"version-history":[{"count":5,"href":"https:\/\/cg-team.com\/en\/wp-json\/wp\/v2\/pages\/43\/revisions"}],"predecessor-version":[{"id":162,"href":"https:\/\/cg-team.com\/en\/wp-json\/wp\/v2\/pages\/43\/revisions\/162"}],"wp:attachment":[{"href":"https:\/\/cg-team.com\/en\/wp-json\/wp\/v2\/media?parent=43"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}