/* um-pcopt-1.css: reguly wlasne strony optymalizacji PC.
   Rdzen wspolny siedzi w um-core-1.css. */
:root{
  --content:min(94vw, 1560px);
  --gut:clamp(1.15rem,3.4vw,4.5rem);
}
@media(min-width:1700px){:root{--content:min(92vw,2050px)}}
@media(min-width:2100px){:root{--content:min(90vw,2400px)}}
@media(min-width:2800px){:root{--content:min(86vw,2950px)}}
[data-mid] .plan,[data-mid] .card,[data-mid] .step,[data-mid] .eng__i,
[data-mid] .safe__i,[data-mid] .ev3__c,[data-mid] .why__i,
[data-mid] .cs__c,[data-mid] details{text-align:left}
.top{text-align:center}
.top .crumb{justify-content:center}
.top .tag{margin-inline:auto}
.top h1,.top__lead{margin-inline:auto}
.top__proof{justify-content:center}
.top .plan{text-align:left}
.top{position:relative;padding:clamp(6.6rem,11vw,8.4rem) 0 clamp(2.4rem,4vw,3.4rem);overflow:hidden}
.top::before{content:"";position:absolute;inset:-34% -10% 0;pointer-events:none;
  background:radial-gradient(56% 60% at 50% 10%,color-mix(in srgb,var(--acc) 24%,transparent),transparent 70%);
  -webkit-mask-image:linear-gradient(180deg,#000 0,#000 56%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 0,#000 56%,transparent 100%)}
.top>*{position:relative}
.crumb{display:flex;gap:.5rem;align-items:center;font-family:var(--mono);font-size:.73rem;
  color:var(--ink3);margin-bottom:1.1rem;flex-wrap:wrap}
.crumb a{color:var(--ink3);transition:color .3s}
.crumb a:hover{color:var(--acc2-lite)}
.crumb i{font-style:normal;opacity:.5}
.top h1{font-size:clamp(2rem,1.4rem + 2.6vw,3.4rem);max-width:20ch;margin-top:.9rem}
.top__lead{margin-top:1rem;max-width:60ch;font-size:clamp(.98rem,.94rem + .28vw,1.14rem);
  color:var(--ink1);line-height:1.55}
.top__proof{display:flex;flex-wrap:wrap;gap:.45rem 1.4rem;margin-top:1.1rem;font-size:.83rem;color:var(--ink2)}
.top__proof i{font-style:normal;display:inline-flex;align-items:center;gap:.4rem}
.top__proof svg{width:14px;height:14px;color:var(--acc2-lite);flex:none}
.tbar{display:flex;flex-wrap:wrap;justify-content:center;gap:.55rem;margin-top:2.4rem}
.tbar span{font-family:var(--mono);font-size:.72rem;color:var(--ink2);
  border:1px solid var(--line);border-radius:99px;padding:.42rem .85rem;background:var(--glass)}
.fig{margin-top:1.4rem;border:1px solid var(--line);border-radius:20px;overflow:hidden;
  background:color-mix(in srgb,#10141B 88%,var(--acc));
  transition:border-color .5s var(--ez)}
.fig:hover{border-color:color-mix(in srgb,var(--acc) 34%,transparent)}
.fig img{display:block;width:100%;height:auto}
.fig{background:transparent;border:0}
.why{display:grid;gap:.9rem;margin-top:2.2rem;grid-template-columns:1fr}
@media(min-width:700px){.why{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1060px){.why{grid-template-columns:repeat(3,1fr)}}
.why__i{padding:1.5rem;border-radius:20px;border:2px solid var(--line);background:var(--glass);
  display:flex;flex-direction:column;gap:.6rem;
  transition:border-color .5s var(--ez),transform .5s var(--ez)}
.why__i:hover{border-color:color-mix(in srgb,var(--acc) 36%,transparent);transform:translateY(-3px)}
.why__i svg{width:22px;height:22px;color:var(--acc2-lite)}
.why__i b{font-family:var(--f-head);font-size:1rem;color:var(--ink)}
.why__i p{font-size:.86rem;color:var(--ink2);line-height:1.58}
.ev3{display:grid;gap:1.1rem;grid-template-columns:1fr;margin-top:2.4rem}
@media(min-width:980px){.ev3{grid-template-columns:repeat(3,1fr)}}
.ev3__c{border:2px solid var(--line);border-radius:24px;padding:1.8rem 1.6rem;
  background:var(--glass);display:flex;flex-direction:column;gap:.6rem;
  transition:border-color .5s var(--ez),transform .5s var(--ez)}
.ev3__c:hover{border-color:color-mix(in srgb,var(--acc) 34%,transparent);transform:translateY(-3px)}
.ev3__n{font-family:var(--mono);font-size:clamp(1.8rem,1.3rem + 1.6vw,2.5rem);font-weight:700;
  letter-spacing:-.04em;color:var(--data-lite);line-height:1}
.ev3__n span{font-size:.4em;color:var(--ink3);margin-left:.3em;font-weight:600;letter-spacing:0}
.ev3__t{font-family:var(--f-head);font-size:1rem;font-weight:700;color:var(--ink)}
.ev3__d{font-size:.85rem;color:var(--ink2);line-height:1.55}
.ev3__s{margin-top:auto;padding-top:.5rem;font-family:var(--mono);font-size:.69rem;color:var(--ink3)}
.res{display:grid;gap:.9rem;margin-top:2.2rem;grid-template-columns:1fr}
@media(min-width:700px){.res{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1100px){.res{grid-template-columns:repeat(3,1fr)}}
.res figure{border:2px solid var(--line);border-radius:20px;overflow:hidden;background:#0d0b16;
  aspect-ratio:16/10;transition:border-color .5s var(--ez),transform .5s var(--ez)}
.res figure:hover{border-color:color-mix(in srgb,var(--acc) 38%,transparent);transform:translateY(-3px)}
.res img{display:block;width:100%;height:100%;object-fit:cover;object-position:center top}
.steps{counter-reset:st;display:grid;gap:.9rem;margin-top:2.4rem}
@media(min-width:900px){.steps{grid-template-columns:repeat(2,1fr)}}
.step{counter-increment:st;position:relative;padding:1.6rem 1.6rem 1.6rem 4.4rem;
  border-radius:20px;border:2px solid var(--line);background:var(--glass);
  transition:border-color .5s var(--ez),transform .5s var(--ez)}
.step:hover{border-color:color-mix(in srgb,var(--acc) 34%,transparent);transform:translateY(-3px)}
.step::before{content:counter(st,decimal-leading-zero);position:absolute;left:1.4rem;top:1.5rem;
  font-family:var(--mono);font-size:1.4rem;font-weight:700;
  color:color-mix(in srgb,var(--acc) 60%,transparent);letter-spacing:-.04em}
.step h4{font-size:1rem;margin-bottom:.45rem}
.step p{font-size:.86rem;color:var(--ink2);line-height:1.58}
.step .tagm{display:inline-block;margin-top:.6rem;font-family:var(--mono);font-size:.67rem;
  color:var(--acc2-lite);border:1px solid var(--line);border-radius:99px;padding:.18rem .58rem}
.cs{display:grid;gap:0;border:1px solid var(--line);border-radius:26px;overflow:hidden;margin-top:2.2rem}
@media(min-width:920px){.cs{grid-template-columns:1fr 1fr}}
.cs__c{padding:clamp(1.6rem,3.2vw,2.4rem)}
.cs__c:first-child{background:color-mix(in srgb,#E7F6FF 3%,transparent)}
.cs__c:last-child{background:color-mix(in srgb,var(--acc) 11%,transparent)}
@media(min-width:920px){.cs__c:first-child{border-right:1px solid var(--line)}}
@media(max-width:919px){.cs__c:first-child{border-bottom:1px solid var(--line)}}
.cs__lbl{font-family:var(--mono);font-size:.69rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink3);margin-bottom:.9rem}
.cs__c:last-child .cs__lbl{color:var(--acc-lite)}
.cs__spec{display:grid;gap:.5rem;margin-bottom:1.2rem}
.cs__spec div{display:flex;justify-content:space-between;gap:1rem;font-size:.85rem;
  padding-bottom:.45rem;border-bottom:1px solid var(--line)}
.cs__spec span{color:var(--ink3)}
.cs__spec b{font-family:var(--mono);color:var(--ink1);text-align:right}
.cs__price{font-family:var(--mono);font-size:1.5rem;font-weight:700;color:var(--ink);letter-spacing:-.03em}
.cs__price em{font-style:normal;font-size:.48em;color:var(--ink3);margin-left:.4em}
.eng{display:grid;gap:.85rem;margin-top:2.2rem}
@media(min-width:820px){.eng{grid-template-columns:repeat(2,1fr)}}
.eng__i{padding:1.4rem;border-radius:18px;border:2px solid var(--line);background:var(--glass);
  transition:border-color .5s var(--ez),transform .5s var(--ez)}
.eng__i:hover{border-color:color-mix(in srgb,var(--acc) 34%,transparent);transform:translateY(-3px)}
.eng__h{display:flex;align-items:center;gap:.65rem;margin-bottom:.5rem;flex-wrap:wrap}
.eng__h b{font-family:var(--f-head);font-size:.98rem;color:var(--ink)}
.eng__h em{font-style:normal;font-family:var(--mono);font-size:.65rem;color:var(--ink3);
  border:1px solid var(--line);border-radius:99px;padding:.15rem .5rem}
.eng__i p{font-size:.85rem;color:var(--ink2);line-height:1.55}
.eng__i a{display:inline-flex;align-items:center;gap:.35rem;margin-top:.6rem;
  font-size:.79rem;font-weight:600;color:var(--acc2-lite)}
.eng__i a svg{width:12px;height:12px;transition:transform .3s var(--ez)}
.eng__i a:hover svg{transform:translateX(3px)}
.safe{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
  border-radius:22px;overflow:hidden;margin-top:2.2rem;grid-template-columns:1fr}
@media(min-width:760px){.safe{grid-template-columns:repeat(2,1fr)}}
.safe__i{background:color-mix(in srgb,var(--bg) 62%,transparent);padding:1.4rem 1.5rem;
  display:flex;gap:.85rem;align-items:flex-start;transition:background .5s var(--ez)}
.safe__i:hover{background:color-mix(in srgb,var(--acc2) 7%,transparent)}
.safe__i svg{width:18px;height:18px;flex:none;color:var(--data-lite);margin-top:.15rem}
.safe__i b{display:block;font-size:.9rem;color:var(--ink);margin-bottom:.25rem}
.safe__i span{font-size:.83rem;color:var(--ink2);line-height:1.55}

/* Wezsza kolumna tresci: przy 1560 px wiersze robily sie za dlugie i
   strona czytala sie gorzej niz projekt. */
:root{--content:min(92vw,1300px)}