/* ===========================================================
   /oferta — oferta „Wdrożenie AI pod klucz" jako strona WWW.
   Odwzorowanie PDF-a z modułu Materiały (oferta-redai-wdrozenie-ai-pod-klucz.pdf):
   okładka → treść oferty → centrum AI → porównanie → tylna okładka.
   Dokładany do site.css, nie zamiast. Klasy z przedrostkiem of-.
=========================================================== */

/* --- okładka (czerwona) --- */
.of-cover{background:var(--red);color:#fff;position:relative;overflow:hidden;padding:96px 0 40px;border-bottom:0}
.of-cover .container,.of-back .container{position:relative}
.of-px{position:absolute;width:180px;height:180px;background:#fff;opacity:.08;border-radius:14px;pointer-events:none}
.of-px--tr{top:-50px;right:-50px}
.of-px--bl{bottom:-60px;left:-60px}
.of-px--red{background:#ff6b6b;opacity:.16}
.of-cover__tag{font-size:.8rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase;opacity:.92}
.of-cover__rule{width:62px;height:5px;background:#fff;border-radius:3px;margin:16px 0 22px;opacity:.9}
.of-cover__title{color:#fff;font-size:clamp(2.4rem,6vw,4.2rem);line-height:1.03;font-weight:800;letter-spacing:-.03em;margin:0;max-width:14ch}
.of-cover__foot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:120px;font-size:.85rem;font-weight:600;opacity:.92}

/* --- kartki dokumentu --- */
.of-doc{padding:56px 0;border-bottom:1px solid var(--line);background:#fff}
.of-doc--soft{background:var(--bg)}
.of-doc .container{max-width:960px}
.of-head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-bottom:12px;border-bottom:1px solid var(--line);margin-bottom:20px}
.of-head img{height:22px;width:auto}
.of-head .of-meta{text-align:right;font-size:.8rem;color:var(--muted);line-height:1.5}
.of-dot{width:9px;height:9px;border-radius:2px;background:var(--red);display:inline-block;flex:0 0 auto}
.of-kicker{display:inline-flex;align-items:center;gap:9px;margin:8px 0 0;font-size:.78rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--red)}
.of-lead{font-size:1.1rem;line-height:1.55;color:var(--graphite);margin:10px 0 0}
.of-highlight{margin-top:18px;background:#fdeaea;border:1px solid #f6cccc;border-left:5px solid var(--red);border-radius:12px;padding:14px 20px;font-weight:600;line-height:1.5}
.of-s{font-size:1.35rem;font-weight:800;letter-spacing:-.01em;margin:36px 0 14px;display:flex;align-items:center;gap:10px}
.of-steps{list-style:none;margin:0;padding:0;counter-reset:s;display:grid;gap:12px}
.of-steps li{display:flex;gap:14px;align-items:flex-start;line-height:1.5;color:var(--graphite)}
.of-steps li::before{counter-increment:s;content:counter(s);flex:0 0 auto;width:28px;height:28px;border-radius:50%;background:var(--red);color:#fff;font-size:.85rem;font-weight:800;display:flex;align-items:center;justify-content:center;margin-top:1px}
.of-checks{list-style:none;margin:0;padding:0;display:grid;gap:12px 28px;grid-template-columns:repeat(2,minmax(0,1fr))}
.of-checks li{display:flex;gap:12px;align-items:flex-start;line-height:1.5;color:var(--graphite)}
.of-checks .ic{flex:0 0 auto;width:24px;height:24px;border-radius:7px;background:#fdeaea;color:var(--red);display:flex;align-items:center;justify-content:center;margin-top:2px}
.of-checks .ic svg{width:14px;height:14px}
.of-price{margin-top:28px;display:flex;align-items:center;gap:24px;flex-wrap:wrap;background:#fdeaea;border:1px solid #f6cccc;border-left:5px solid var(--red);border-radius:12px;padding:18px 26px}
.of-price__num{font-size:clamp(1.8rem,4vw,2.4rem);font-weight:900;color:var(--red);letter-spacing:-.02em;white-space:nowrap}
.of-price__note{line-height:1.5;color:var(--graphite)}
.of-aside{background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:16px 22px;line-height:1.55;color:var(--graphite)}
.of-doc--soft .of-aside{background:#fff}

/* --- centrum AI (zrzuty) --- */
.of-title{font-size:clamp(1.9rem,4vw,2.6rem);margin:8px 0 8px}
.of-sub{color:var(--muted);font-size:1.05rem;margin:0 0 20px;line-height:1.5}
.of-pills{display:flex;flex-wrap:wrap;gap:12px}
.of-pill{display:inline-flex;align-items:center;gap:10px;background:#fdeaea;border:1px solid #f6cccc;border-radius:999px;padding:9px 18px;font-weight:700;font-size:.9rem}
.of-pill::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--red)}
.of-shot{margin:0;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:#fff;box-shadow:var(--shadow);position:relative}
.of-shot img{width:100%;height:auto;display:block}
.of-badge{position:absolute;top:18px;left:18px;background:var(--red);color:#fff;font-size:.75rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;padding:8px 14px;border-radius:999px;box-shadow:var(--shadow)}
.of-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px;align-items:center}
.of-big{font-size:1.25rem;font-weight:700;margin:0 0 12px}
.of-bullets{margin:0;padding-left:1.1em;line-height:1.7;color:var(--graphite)}
.of-dark{margin-top:36px;background:var(--ink);color:#fff;border-radius:12px;padding:20px 26px;font-weight:600;line-height:1.5;text-align:center}

/* --- porównanie: ChatGPT / Copilot / redAi --- */
.of-compare{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;align-items:stretch;margin-top:20px}
.of-col{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:26px 24px;display:flex;flex-direction:column;position:relative}
.of-col h3{text-align:center;font-size:1.3rem;margin:0}
.of-col__sub{text-align:center;color:var(--muted);font-size:.85rem;margin:6px 0 18px}
.of-col dl{margin:0;display:grid;gap:14px;flex:1;align-content:start}
.of-col dt{font-weight:700;font-size:.9rem;display:flex;align-items:center;gap:8px}
.of-col dt::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--red);flex:0 0 auto}
.of-col dd{margin:3px 0 0 16px;color:var(--muted);font-size:.9rem;line-height:1.45}
.of-col__foot{margin-top:20px;background:var(--bg);border-radius:10px;padding:14px;text-align:center;font-weight:700;font-size:.9rem;line-height:1.4}
.of-col--us{border:2px solid var(--red);background:#fff7f7}
.of-col--us h3{color:var(--red)}
.of-col--us dd{color:var(--graphite)}
.of-col__tag{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--red);color:#fff;font-size:.7rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;padding:6px 14px;border-radius:999px;white-space:nowrap}
.of-col--us .of-col__foot{background:var(--red);color:#fff}
.of-footnote{margin:24px 0 0;font-size:.8rem;color:var(--muted);text-align:center;line-height:1.5}

/* --- tylna okładka (ciemna) --- */
.of-back{background:var(--ink);color:#fff;position:relative;overflow:hidden;padding:96px 0 48px}
.of-back__kicker{font-size:.8rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:#ff8585}
.of-back h2{color:#fff;font-size:clamp(2rem,5vw,3rem);line-height:1.08;font-weight:800;letter-spacing:-.025em;margin:14px 0 0;max-width:18ch}
.of-back__sub{font-size:1.1rem;line-height:1.55;opacity:.86;margin:16px 0 0;max-width:60ch}
.of-back__person{margin-top:28px;font-size:1.1rem;font-weight:800}
.of-back__rows{display:flex;flex-wrap:wrap;gap:12px 26px;margin-top:14px}
.of-back__rows a{display:inline-flex;align-items:center;gap:9px;font-weight:600;color:#fff;text-decoration:none}
.of-back__rows a:hover{color:#ff8585}
.of-back__rows svg{width:18px;height:18px;color:#ff8585}
.of-back__foot{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-top:120px}
.of-back__foot img{height:26px;width:auto;filter:brightness(0) invert(1)}
.of-back__foot span{font-size:.8rem;opacity:.7}
.of-back__legal{font-size:.75rem;opacity:.55;margin-top:10px;line-height:1.5}

@media (max-width:820px){
  .of-checks,.of-split,.of-compare{grid-template-columns:minmax(0,1fr)}
  .of-cover__foot,.of-back__foot{margin-top:64px}
  .of-head{flex-direction:column;align-items:flex-start}
  .of-head .of-meta{text-align:left}
}

/* --- pokaz panelu ekran po ekranie (od 07.09.2026) --- */
.of-shotlead{margin-top:30px}
.of-shotlead .of-shot{overflow:visible}
.of-shotlead picture{display:block;overflow:hidden;border-radius:var(--r-lg) var(--r-lg) 0 0}
.of-shotlead figcaption{border-radius:0 0 var(--r-lg) var(--r-lg)}
.of-shotlead .of-badge{top:-15px;left:18px}
.of-shotlink{margin:10px 0 0;font-size:.95rem;font-weight:600}
.of-shotlink a{color:var(--red)}
.of-bridge{margin:22px 0 0;font-size:1.05rem;font-weight:600;color:var(--graphite);line-height:1.5}
.of-note{margin:14px 0 0;font-size:.85rem;color:var(--muted);line-height:1.5}
.of-block{margin-top:44px}
.of-block .of-s{margin:8px 0 12px}
.of-block p{margin:0 0 12px;line-height:1.55;color:var(--graphite)}
.of-block .of-bullets{margin-bottom:16px}
.of-block .of-big{margin:0 0 10px}
.of-block .of-aside p:last-child,.of-block .of-aside .of-bullets{margin-bottom:0}
.of-tag{display:inline-flex;align-items:center;gap:8px;font-size:.7rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;padding:6px 12px;border-radius:999px;line-height:1.2}
.of-tag::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.of-tag--a{background:#fdeaea;color:var(--red);border:1px solid #f6cccc}
.of-tag--b{background:var(--bg);color:var(--graphite);border:1px solid var(--line)}
.of-shot figcaption{padding:10px 16px;font-size:.85rem;color:var(--muted);line-height:1.45;border-top:1px solid var(--line);background:var(--bg)}
.of-split--top{align-items:start}
.of-split--top .of-shot{margin-top:4px}
.of-split .of-bullets{margin-bottom:0}
.of-split .of-bullets+p{margin-top:12px}
.of-bullets--2{columns:2;column-gap:32px}
.of-bullets--2 li{break-inside:avoid}
.of-two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;align-items:start;margin-top:6px}
.of-apps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;margin-top:6px}
.of-apps figure{margin:0}
.of-apps img{width:100%;height:auto;display:block;border-radius:18px;border:1px solid var(--line);box-shadow:var(--shadow);background:#fff}
.of-apps figcaption{font-size:.8rem;text-align:center;color:var(--muted);margin-top:8px;line-height:1.35}
.of-close{margin-top:40px;font-weight:600}
.of-cta{margin:12px 0 0;line-height:1.55;color:var(--graphite)}
.of-cta a{color:var(--red);font-weight:700}
.of-aside a{color:var(--red);font-weight:700}

@media (max-width:820px){
  .of-split--rev .of-shot{order:2}
  .of-two{grid-template-columns:minmax(0,1fr)}
  .of-bullets--2{columns:1}
  .of-apps{display:flex;overflow-x:auto;gap:12px;padding-bottom:8px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
  .of-apps figure{flex:0 0 58%;scroll-snap-align:start}
  .of-block{margin-top:36px}
  .of-badge{font-size:.68rem;padding:7px 12px;letter-spacing:.1em}
  .of-shotlead .of-badge{top:-13px;left:14px}
}