/* Strona "O produkcie" — styl jasnej prezentacji, scoped pod .op */
.op{
  --op-bg:#FFFFFF; --op-bg2:#F5F6F7; --op-panel:#FFFFFF; --op-line:#E4E7EA; --op-line2:#ECEEF0;
  --op-ink:#211F1D; --op-mut:#5C636A; --op-dim:#8B9299;
  --op-orange:#D54900; --op-orange2:#C24400;
  --op-asap:#D50000; --op-speed:#D54900; --op-standard:#C88A00; --op-standard-bar:#E3A900; --op-eko:#178048;
  --op-mono:ui-monospace,"SF Mono","Cascadia Code",Consolas,monospace;
  color:var(--op-ink);
}
.op *{box-sizing:border-box}
.op-sec{padding:42px 0;border-top:1px solid var(--op-line2)}
.op-sec.alt{background:var(--op-bg2)}
.op .wrap{max-width:1120px;margin:0 auto;padding:0 24px}
.op .eyebrow{font-family:var(--op-mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--op-orange2);font-weight:700;display:inline-block;margin-bottom:14px}
.op h2{font-size:clamp(27px,4.4vw,40px);font-weight:800;letter-spacing:-.02em;margin:0 0 4px;line-height:1.08}
.op .lead{color:var(--op-mut);font-size:18px;max-width:64ch;margin-top:10px}
.op .mut{color:var(--op-mut)}

/* HERO / intro */
.op-hero{position:relative;overflow:hidden;padding:44px 0 34px;border-top:0;
  background:radial-gradient(900px 460px at 82% -10%,rgba(213,73,0,.09),transparent 56%),#FFFFFF}
.op-hero h1{font-size:clamp(32px,5vw,52px);font-weight:900;letter-spacing:-.03em;line-height:1.05;max-width:18ch}
.op-hero h1 .hl{color:var(--op-orange)}
.op-live{display:inline-flex;align-items:center;gap:8px;font-family:var(--op-mono);font-size:12px;
  letter-spacing:.08em;text-transform:uppercase;color:#17784a;border:1px solid #bfe6cf;
  background:rgba(31,167,92,.08);padding:5px 12px;border-radius:999px;margin-bottom:18px}
.op-live b{width:7px;height:7px;border-radius:50%;background:#1fa75c}
.op-hstats{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.op-hstat{background:var(--op-panel);border:1px solid var(--op-line);border-radius:12px;padding:14px 18px;min-width:150px;box-shadow:0 6px 16px rgba(20,20,20,.04)}
.op-hstat .n{font-family:var(--op-mono);font-size:22px;font-weight:700}
.op-hstat .l{font-size:12px;color:var(--op-mut);margin-top:2px}

/* screenshot frame */
.op-shot{margin-top:20px}
.op-mock{background:#fff;border:1px solid var(--op-line);border-radius:14px;overflow:hidden;box-shadow:0 22px 50px rgba(20,20,20,.11)}
.op-mock .bar{display:flex;align-items:center;gap:7px;padding:10px 14px;background:#F1F3F5;border-bottom:1px solid var(--op-line)}
.op-mock .bar i{width:10px;height:10px;border-radius:50%;background:#cfd4d9}
.op-mock .bar .u{margin-left:10px;font-family:var(--op-mono);font-size:12px;color:var(--op-dim)}
.op-mock .v{background:#fff;overflow:hidden}
.op-mock .v img{width:100%;display:block}
.op-mock .v.clip{max-height:560px}.op-mock .v.clip img{object-fit:cover;object-position:top}
.op-cap{font-size:12.5px;color:var(--op-dim);margin-top:10px;text-align:center;font-family:var(--op-mono)}
.op-plain{border:1px solid var(--op-line);border-radius:14px;overflow:hidden;background:#fff;box-shadow:0 16px 40px rgba(20,20,20,.08)}
.op-plain img{width:100%;display:block}

.op-two{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:center;margin-top:22px}

/* steps */
.op-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:26px}
.op-step{background:var(--op-panel);border:1px solid var(--op-line);border-radius:13px;padding:20px;box-shadow:0 6px 16px rgba(20,20,20,.04)}
.op-step .no{font-family:var(--op-mono);font-size:13px;color:var(--op-orange2)}
.op-step h4{font-size:16px;margin:9px 0 6px}
.op-step p{color:var(--op-mut);font-size:13.5px;margin:0}

/* benefits */
.op-bens{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:26px}
.op-ben{display:flex;gap:13px;background:var(--op-panel);border:1px solid var(--op-line);border-radius:12px;padding:16px 18px;box-shadow:0 5px 14px rgba(20,20,20,.03)}
.op-ben .bi{width:32px;height:32px;flex:none;border-radius:8px;display:grid;place-items:center;background:rgba(213,73,0,.09);border:1px solid rgba(213,73,0,.22);color:var(--op-orange)}
.op-ben .bi svg{width:16px;height:16px}
.op-ben h4{font-size:15px;margin:0 0 2px}
.op-ben p{color:var(--op-mut);font-size:13px;margin:0;line-height:1.5}

/* tiers */
.op-tiers{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:26px}
.op-tier{border:1px solid var(--op-line);border-radius:14px;padding:20px;background:var(--op-panel);position:relative;overflow:hidden;box-shadow:0 8px 20px rgba(20,20,20,.05)}
.op-tier::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--tc)}
.op-tier .tn{font-family:var(--op-mono);font-weight:700;font-size:18px;color:var(--tt)}
.op-tier .td{color:var(--op-mut);font-size:12.5px;margin:6px 0 13px}
.op-tier .tp{font-size:14.5px;font-weight:600}
.op-tier .tp .x{font-family:var(--op-mono);color:var(--tt)}

/* chips + checks */
.op-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.op-chip{font-family:var(--op-mono);font-size:12px;color:var(--op-mut);border:1px solid var(--op-line);background:var(--op-bg2);padding:6px 11px;border-radius:8px}
.op-chip b{color:var(--op-ink)}
.op ul.checks{list-style:none;padding:0;margin:16px 0 0;display:grid;gap:9px}
.op ul.checks li{position:relative;padding-left:28px;color:var(--op-mut);font-size:14.5px}
.op ul.checks li::before{content:"";position:absolute;left:0;top:5px;width:16px;height:16px;border-radius:5px;background:rgba(31,167,92,.13);border:1px solid #8fd3ab}
.op ul.checks li::after{content:"";position:absolute;left:5px;top:8px;width:5px;height:8px;border:solid #1fa75c;border-width:0 2px 2px 0;transform:rotate(45deg)}
.op ul.checks li b{color:var(--op-ink)}

/* value */
.op-valbox{background:linear-gradient(180deg,#fff,var(--op-bg2));border:1px solid var(--op-line);border-radius:20px;padding:40px;box-shadow:0 16px 40px rgba(20,20,20,.06)}
.op-cta{display:inline-flex;align-items:center;gap:10px;margin-top:22px;background:var(--op-orange);color:#fff;text-decoration:none;font-weight:700;padding:14px 28px;border-radius:12px;font-size:16px;box-shadow:0 10px 24px rgba(213,73,0,.25)}

@media(max-width:900px){
  .op-steps,.op-bens,.op-tiers,.op-two{grid-template-columns:1fr}
  .op-steps{grid-template-columns:1fr 1fr}
}