/* ---------- podgląd aplikacji (schemat na danych przykładowych) ---------- */
body.itg .itg-home .app-demo{display:grid;grid-template-columns:300px minmax(0,1fr);gap:32px;align-items:center;padding:40px;border-radius:16px;background:var(--band);border:1px solid var(--line);overflow:hidden}
body.itg .itg-home .app-demo .phone{width:280px;justify-self:center;background:#101A1E;border-radius:36px;padding:12px;box-shadow:var(--shadow);position:relative}
body.itg .itg-home .app-demo .phone-top{height:22px;display:grid;place-items:center}
body.itg .itg-home .app-demo .phone-top i{width:70px;height:6px;border-radius:3px;background:#2b3a3f}
body.itg .itg-home .app-demo .screen{background:#F1F3EF;border-radius:26px;padding:20px 18px 22px;display:grid;gap:14px;color:#101A1E;min-height:420px;align-content:start}
body.itg .itg-home .app-demo .scr-h{font:800 20px/1.1 var(--display);margin:0}
body.itg .itg-home .app-demo .scr-sub{font-size:13px;color:#56615D;margin:0;text-align:center}
body.itg .itg-home .app-demo .scan{position:relative;aspect-ratio:1;max-width:170px;width:100%;justify-self:center;background:#fff;border-radius:14px;border:1px solid #D5DAD3;overflow:hidden}
body.itg .itg-home .app-demo .scan .c{position:absolute;width:26px;height:26px;border:3px solid #3A36E0}
body.itg .itg-home .app-demo .scan .c1{left:14px;top:14px;border-right:0;border-bottom:0;border-radius:6px 0 0 0}
body.itg .itg-home .app-demo .scan .c2{right:14px;top:14px;border-left:0;border-bottom:0;border-radius:0 6px 0 0}
body.itg .itg-home .app-demo .scan .c3{left:14px;bottom:14px;border-right:0;border-top:0;border-radius:0 0 0 6px}
body.itg .itg-home .app-demo .scan .c4{right:14px;bottom:14px;border-left:0;border-top:0;border-radius:0 0 6px 0}
body.itg .itg-home .app-demo .scan::before{content:"";position:absolute;inset:38px;background:repeating-linear-gradient(90deg,#101A1E 0 8px,transparent 8px 14px),repeating-linear-gradient(0deg,#101A1E 0 8px,transparent 8px 16px);opacity:.14;border-radius:4px}
body.itg .itg-home .app-demo .scan .beam{position:absolute;left:12px;right:12px;height:3px;border-radius:2px;background:#3A36E0;box-shadow:0 0 12px #3A36E0;animation:app-beam 2.6s ease-in-out infinite}
@keyframes app-beam{0%,100%{top:22%}50%{top:78%}}
body.itg .itg-home .app-demo .dev{display:grid;gap:3px;padding:12px 14px;border-radius:12px;background:#fff;border:1px solid #D5DAD3}
body.itg .itg-home .app-demo .dev b{font:700 15px/1.2 var(--body)}
body.itg .itg-home .app-demo .dev span{font-size:12px;color:#56615D}
body.itg .itg-home .app-demo .dev .pill{justify-self:start;margin-top:6px}
body.itg .itg-home .app-demo .btn-mock{padding:12px;border-radius:10px;background:#3A36E0;color:#fff;text-align:center;font:600 14px/1 var(--body)}
body.itg .itg-home .app-demo .offl{display:flex;align-items:center;gap:8px;margin:0;font:400 11px/1.3 var(--mono);color:#56615D}
body.itg .itg-home .app-demo .offl i{flex:none;width:8px;height:8px;border-radius:50%;background:#E9A04A}
body.itg .itg-home .app-demo .pill{display:inline-block;font:500 11px/1 var(--mono);letter-spacing:.04em;padding:5px 9px;border-radius:999px;font-style:normal;white-space:nowrap}
body.itg .itg-home .app-demo .pill.ok{background:#DDF3E6;color:#1E6B3D}
body.itg .itg-home .app-demo .pill.new{background:#E3E3FB;color:#2A26B8}
body.itg .itg-home .app-demo .pill.prog{background:#FBEBD3;color:#8A5410}
body.itg .itg-home .app-demo .panel-mock{background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);overflow:hidden;min-width:0}
body.itg .itg-home .app-demo .pm-bar{display:flex;align-items:center;gap:6px;padding:11px 16px;border-bottom:1px solid var(--line);font:500 12px/1 var(--mono);color:var(--muted)}
body.itg .itg-home .app-demo .pm-bar i{width:9px;height:9px;border-radius:50%;background:var(--line)}
body.itg .itg-home .app-demo .pm-bar span:first-of-type{margin-left:8px}
body.itg .itg-home .app-demo .tag-demo{margin-left:auto;padding:4px 8px;border-radius:4px;border:1px solid color-mix(in srgb,var(--amber) 45%,transparent);color:var(--amber);font-size:11px;letter-spacing:.06em;text-transform:uppercase}
body.itg .itg-home .app-demo .pm-body{padding:18px;display:grid;gap:16px}
body.itg .itg-home .app-demo .kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
body.itg .itg-home .app-demo .kpis div{display:grid;gap:4px;padding:14px;border-radius:10px;background:var(--ground);border:1px solid var(--line)}
body.itg .itg-home .app-demo .kpis span{font-size:12px;color:var(--muted)}
body.itg .itg-home .app-demo .kpis b{font:800 30px/1 var(--display);color:var(--accent);font-variant-numeric:tabular-nums}
body.itg .itg-home .app-demo .rows{display:grid;border:1px solid var(--line);border-radius:10px;overflow:hidden}
body.itg .itg-home .app-demo .row{display:grid;grid-template-columns:90px minmax(0,1fr) 120px;align-items:center;gap:12px;padding:11px 14px;font-size:14px;border-top:1px solid var(--line)}
body.itg .itg-home .app-demo .row:first-child{border-top:0}
body.itg .itg-home .app-demo .row.head{font:500 11px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);background:var(--ground)}
body.itg .itg-home .app-demo .row span:first-child{font-family:var(--mono);font-size:13px}
@media (max-width:900px){body.itg .itg-home .app-demo{grid-template-columns:1fr;padding:24px 16px}}
@media (max-width:560px){
  body.itg .itg-home .app-demo .row{grid-template-columns:64px minmax(0,1fr) 92px;gap:8px;padding:10px;font-size:13px}
  body.itg .itg-home .app-demo .kpis b{font-size:24px}
  body.itg .itg-home .app-demo .tag-demo{display:none}
}
@media (prefers-reduced-motion:reduce){body.itg .itg-home .app-demo .scan .beam{animation:none;top:50%}}

/* siatka usług na stronie głównej: pięć kafelków */
body.itg .itg-home .itg-uslugi-grid{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}

/* realizacja z aplikacją na stronie głównej */
body.itg .itg-home .real-app{margin-top:32px;display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:32px;align-items:center;padding:32px;background:var(--surface);border:1px solid var(--line);border-radius:12px}
body.itg .itg-home .real-app-copy{display:grid;gap:14px}
body.itg .itg-home .real-app-copy h3{font-size:clamp(24px,3vw,32px);font-weight:700;margin:0}
body.itg .itg-home .real-app-art{width:100%;max-width:260px;justify-self:center;height:auto}
@media (max-width:760px){body.itg .itg-home .real-app{grid-template-columns:1fr;padding:22px}body.itg .itg-home .real-app-art{max-width:200px}}