/* MKM Labs FE — szablon strony usługi (S2). Klasy svc-* opisane w SERVICE-TEMPLATE.md. */
.svc-page{position:relative;background:#0a0c10;color:#fff;font-family:'DM Sans',sans-serif;-webkit-font-smoothing:antialiased;overflow-x:clip}
.svc-page *,.svc-page *::before,.svc-page *::after{box-sizing:border-box}
.svc-page h1,.svc-page h2,.svc-page h3,.svc-page p{margin:0}
.svc-page a{text-decoration:none}

/* layout */
.svc-section{padding:0 clamp(18px,4vw,56px) clamp(80px,10vw,140px)}
.svc-wrap{max-width:1400px;margin:0 auto}
.svc-stack{display:flex;flex-direction:column;gap:clamp(32px,4vw,56px)}
.svc-head{display:flex;flex-direction:column;gap:18px}
.svc-head--narrow{max-width:900px}
.svc-head--gap{margin-bottom:clamp(36px,5vw,64px)}

/* type */
.svc-eyebrow{color:#6699ff;font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.svc-h1{font-size:clamp(46px,7.4vw,124px);font-weight:600;line-height:.92;letter-spacing:-0.055em;text-wrap:balance}
.svc-h2{font-size:clamp(38px,5.6vw,92px);font-weight:600;line-height:.98;letter-spacing:-0.045em;text-wrap:balance}
.svc-h2--md{font-size:clamp(36px,4.6vw,76px)}
.svc-h2--faq{font-size:clamp(38px,5vw,80px)}
.svc-lede{max-width:640px;color:#c3c8d3;font-size:clamp(17px,1.5vw,21px);line-height:1.55;text-wrap:pretty}
.svc-hl{color:#99baff}

/* buttons */
.svc-actions{display:flex;flex-wrap:wrap;gap:10px}
.svc-btn{display:inline-flex;align-items:center;height:56px;border-radius:999px;font-size:16px;-webkit-tap-highlight-color:transparent;transition:background-color 150ms ease,transform 140ms cubic-bezier(0.23,1,0.32,1)}
.svc-btn:active{transform:scale(0.96)}
.svc-btn--primary{gap:12px;padding:0 10px 0 24px;background:#fff;color:#050914;font-weight:700}
.svc-btn--primary:hover,.svc-btn--primary:focus-visible{color:#050914}
.svc-btn__icon{width:38px;height:38px;border-radius:50%;background:#0057FF;display:flex;align-items:center;justify-content:center;flex:none}
.svc-btn--ghost{padding:0 24px;border:1px solid rgba(255,255,255,.16);color:#fff;font-weight:600}
.svc-btn--ghost:hover{background:rgba(255,255,255,.06);color:#fff}
.svc-btn:focus-visible,.svc-pill:focus-visible,.svc-faq__q:focus-visible{outline:2px solid #99baff;outline-offset:3px}

/* hero */
.svc-hero{position:relative;overflow:hidden;padding:clamp(140px,16vw,210px) clamp(18px,4vw,56px) clamp(56px,7vw,100px)}
.svc-hero__glow{position:absolute;inset:0;background:radial-gradient(ellipse 55% 60% at 78% 0%,rgba(0,87,255,.30),transparent 70%);pointer-events:none}
.svc-hero__grid{position:absolute;inset:0;pointer-events:none;background:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:80px 80px;-webkit-mask-image:radial-gradient(ellipse 70% 70% at 50% 0%,#000,transparent);mask-image:radial-gradient(ellipse 70% 70% at 50% 0%,#000,transparent)}
.svc-hero__inner{position:relative;max-width:1400px;margin:0 auto;display:flex;flex-wrap:wrap;gap:clamp(32px,5vw,72px);align-items:flex-end}
.svc-hero__main{flex:1.4 1 560px;min-width:0;display:flex;flex-direction:column;gap:28px}
.svc-crumbs{display:flex;flex-wrap:wrap;gap:8px;font-size:13px;color:#8a92a3}
.svc-crumbs a{color:#aeb4c2}
.svc-crumbs a:hover{color:#fff}
.svc-crumbs [aria-current]{color:#fff}
.svc-hero__facts{flex:1 1 340px;min-width:0;display:flex;flex-direction:column;gap:10px}
.svc-fact{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:20px 24px;border-radius:22px;background:rgba(18,22,31,.8);border:1px solid rgba(255,255,255,.08);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.svc-fact__l{color:#aeb4c2;font-size:14px}
.svc-fact__v{font-size:clamp(22px,2vw,30px);font-weight:600;letter-spacing:-0.03em;text-align:right}

/* intro */
.svc-intro__inner{max-width:1100px;margin:0 auto}
.svc-intro__text{font-size:clamp(22px,2.4vw,36px);line-height:1.35;letter-spacing:-0.02em;color:#e5e8ee;text-wrap:pretty}

/* pricing */
.svc-pricing__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr));gap:14px}
.svc-price{display:flex;flex-direction:column;gap:22px;padding:clamp(28px,3.4vw,48px);border-radius:32px;background:#12161f;border:1px solid rgba(255,255,255,.07)}
.svc-price__label{font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#6699ff}
.svc-price__value{font-size:clamp(48px,6vw,96px);font-weight:600;letter-spacing:-0.05em;line-height:.9;font-variant-numeric:tabular-nums}
.svc-price__unit{font-size:.4em;color:#aeb4c2;letter-spacing:-0.02em}
.svc-price__desc{color:#c3c8d3;font-size:17px;line-height:1.6}
.svc-price--accent{background:linear-gradient(160deg,#002bb5,#0057FF);border-color:rgba(153,186,255,.3)}
.svc-price--accent .svc-price__label,.svc-price--accent .svc-price__unit{color:#e6eeff}
.svc-price--accent .svc-price__desc{color:#fff}
.svc-note{color:#aeb4c2;font-size:15px;max-width:760px;line-height:1.6}

/* effects */
.svc-effects__inner{display:flex;flex-wrap:wrap;gap:clamp(32px,5vw,80px)}
.svc-effects__head{flex:1 1 360px;min-width:0;display:flex;flex-direction:column;gap:18px}
.svc-effects__lede{color:#c3c8d3;font-size:17px;line-height:1.6;max-width:460px}
.svc-effects__grid{flex:1.4 1 520px;min-width:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:12px}
.svc-gain{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:28px;padding:28px;border-radius:26px;background:#12161f;border:1px solid rgba(255,255,255,.07)}
.svc-spot-glow{position:absolute;inset:0;opacity:0;transition:opacity 300ms ease;pointer-events:none}
.svc-gain__n{position:relative;font-size:14px;font-weight:600;color:#6699ff;font-variant-numeric:tabular-nums}
.svc-gain__t{position:relative;font-size:22px;font-weight:600;line-height:1.2;letter-spacing:-0.02em}

/* steps */
.svc-steps__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:14px}
.svc-step{display:flex;flex-direction:column;gap:12px;padding:clamp(26px,3vw,36px);border-radius:28px;background:#12161f;border:1px solid rgba(255,255,255,.07)}
.svc-step__n{font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#6699ff}
.svc-step__t{font-size:clamp(24px,2.2vw,32px);font-weight:600;letter-spacing:-0.03em;line-height:1.1}
.svc-step__d{font-size:16px;color:#c3c8d3;line-height:1.6;text-wrap:pretty}

/* principles */
.svc-principles__list{display:flex;flex-direction:column;border-top:1px solid rgba(255,255,255,.08)}
.svc-rule{display:grid;grid-template-columns:minmax(56px,120px) minmax(0,1fr) minmax(0,1.2fr);gap:clamp(16px,3vw,48px);padding:clamp(24px,3vw,40px) 0;border-bottom:1px solid rgba(255,255,255,.08);align-items:baseline}
.svc-rule__n{font-size:clamp(28px,3vw,48px);font-weight:600;color:#33363d;letter-spacing:-0.04em;font-variant-numeric:tabular-nums}
.svc-rule__t{font-size:clamp(20px,2vw,30px);font-weight:600;letter-spacing:-0.025em;line-height:1.15}
.svc-rule__d{color:#c3c8d3;font-size:16px;line-height:1.6;text-wrap:pretty}
@media (max-width:640px){
  .svc-rule{grid-template-columns:minmax(44px,56px) minmax(0,1fr);row-gap:10px}
  .svc-rule__d{grid-column:2}
}

/* faq */
.svc-faq__inner{display:flex;flex-wrap:wrap;gap:clamp(32px,5vw,80px);align-items:flex-start}
.svc-faq__aside{flex:1 1 320px;min-width:0;display:flex;flex-direction:column;gap:20px;position:sticky;top:100px}
.svc-faq__lede{color:#c3c8d3;font-size:17px;line-height:1.6;max-width:420px}
.svc-faq__list{flex:1.6 1 520px;min-width:0;display:flex;flex-direction:column;gap:10px}
.svc-faq__item{border-radius:22px;background:#12161f;border:1px solid rgba(255,255,255,.07);transition:background-color 250ms ease}
.svc-faq__q{width:100%;display:flex;align-items:center;gap:18px;min-height:76px;padding:18px 18px 18px 24px;border:0;background:transparent;cursor:pointer;text-align:left;font:inherit;color:inherit;-webkit-tap-highlight-color:transparent;border-radius:22px}
.svc-faq__num{flex:none;width:28px;color:#6699ff;font-size:13px;font-weight:700;font-variant-numeric:tabular-nums}
.svc-faq__text{flex:1;color:#fff;font-size:clamp(16px,1.3vw,19px);font-weight:600;line-height:1.3}
.svc-faq__plus{flex:none;width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;transition:background-color 250ms ease}
.svc-faq__plus svg{transition:transform 420ms cubic-bezier(0.32,0.72,0,1)}
.svc-faq__a{display:grid;grid-template-rows:1fr;transition:grid-template-rows 420ms cubic-bezier(0.32,0.72,0,1)}
.svc-faq__a-inner{overflow:hidden;min-height:0}
.svc-faq__a p{color:#c3c8d3;font-size:16px;line-height:1.7;padding:0 clamp(18px,5vw,72px) 24px clamp(24px,5.5vw,70px);transition:opacity 300ms ease}
.svc-faq--js .svc-faq__item:not(.is-open) .svc-faq__a{grid-template-rows:0fr}
.svc-faq--js .svc-faq__item:not(.is-open) .svc-faq__a p{opacity:0}
.svc-faq__item.is-open{background:#161b26}
.svc-faq__item.is-open .svc-faq__plus{background:#0057FF}
.svc-faq__item.is-open .svc-faq__plus svg{transform:rotate(45deg)}
@media (max-width:900px){.svc-faq__aside{position:static}}

/* related */
.svc-related{padding-bottom:clamp(60px,8vw,100px)}
.svc-related__inner{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.svc-related__label{color:#aeb4c2;font-size:14px;margin-right:8px}
.svc-pill{display:inline-flex;align-items:center;height:40px;padding:0 16px;border-radius:999px;background:#12161f;border:1px solid rgba(255,255,255,.08);color:#e5e8ee;font-size:14px;font-weight:600;-webkit-tap-highlight-color:transparent;transition:background-color 150ms ease,transform 140ms cubic-bezier(0.23,1,0.32,1)}
.svc-pill:hover{background:rgba(0,87,255,.22);color:#fff}
.svc-pill:active{transform:scale(0.96)}

@media (prefers-reduced-motion:reduce){
  .svc-btn,.svc-pill,.svc-faq__a,.svc-faq__a p,.svc-faq__plus svg,.svc-faq__item,.svc-spot-glow{transition:none}
  .svc-btn:active,.svc-pill:active{transform:none}
}

/* QA-A (addytywnie): linki w ledach/akapitach dodatków svcx-* i odstęp akapitu pod siatką kroków */
.svc-page .svcx-lede a,.svc-page .svcx-split__p a{color:#99baff;text-decoration:underline;text-decoration-color:rgba(153,186,255,.35);text-underline-offset:3px;transition:color 150ms ease}
.svc-page .svcx-lede a:hover,.svc-page .svcx-split__p a:hover{color:#fff}
.svc-page .svcx-lede--after{margin-top:clamp(24px,3vw,36px)}