/* ============ SERVICE PAGE (usługa) ============ */
.svc-hero-frame{
  position:relative;border-radius:20px 20px 0 0;overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.13),rgba(255,255,255,.05));
  backdrop-filter:blur(30px) saturate(160%);-webkit-backdrop-filter:blur(30px) saturate(160%);
  border:1px solid rgba(255,255,255,.16);border-bottom:none;box-shadow:0 30px 60px rgba(0,0,0,.6);
  margin:0 -4px 10px;text-align:left;
}
.svc-hero-topbar{display:flex;align-items:center;gap:7px;height:34px;padding:0 16px;border-bottom:1px solid rgba(255,255,255,.09)}
.svc-hero-topbar span{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.18)}
.svc-hero-topbar-line{flex:1;margin-left:10px;max-width:220px;height:9px;border-radius:5px;background:rgba(255,255,255,.1)}
.svc-mock{
  position:relative;padding:26px 24px 30px;display:flex;flex-direction:column;gap:14px;
  overflow:hidden;text-align:left;
}
.svc-mock::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.07),transparent);
  width:40%;animation:nmSweep 6s ease-in-out infinite;
}
.svc-mock-row{display:flex;align-items:center;justify-content:space-between}
.svc-mock-cta{display:flex;gap:8px;align-items:center}
.svc-mock-body{display:flex;gap:16px;align-items:center;margin-top:6px}
.svc-mock-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:6px}
.svc-mock-tile{height:60px;border-radius:10px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.17)}
.svc-mock-preview{width:130px;height:120px;border-radius:12px;background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.18);flex:none}

/* Hero support devices (Wsparcie IT) */
.hero-devices{position:relative;display:flex;align-items:flex-end;justify-content:center;gap:10px;padding:20px 8px 30px}
.hero-device{display:flex;flex-direction:column;align-items:center;position:relative}
.hero-device-badge{
  position:absolute;top:-6px;right:-6px;width:14px;height:14px;border-radius:50%;
  border:3px solid #0d0d10;box-sizing:border-box;background:#1c8d5f;
  animation:nmFix 6.5s ease-in-out infinite;z-index:1;
}
.hero-device-content{height:100%;overflow:hidden;border-radius:inherit;box-sizing:border-box}
.hero-device--laptop{padding-top:6px;animation:nmShake 6.5s linear .15s infinite}
.hero-device--laptop .hero-device-screen{
  position:relative;width:150px;height:96px;border-radius:11px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.16);
}
.hero-device--laptop .hero-device-content{
  padding:14px 14px 0;display:flex;flex-direction:column;gap:8px;align-items:flex-start;
}
.hero-device--laptop .hero-device-badge{animation-delay:.15s}
.hero-device-hinge{width:16px;height:16px;background:rgba(255,255,255,.09)}
.hero-device-base{width:64px;height:6px;border-radius:3px;background:rgba(255,255,255,.14)}
.hero-device--monitor{padding-bottom:12px;animation:nmShake 6.5s linear .6s infinite}
.hero-device--monitor .hero-device-screen{
  position:relative;width:114px;height:78px;border-radius:9px 9px 0 0;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.16);border-bottom:none;
}
.hero-device--monitor .hero-device-content{
  padding:12px 12px 0;display:flex;flex-direction:column;gap:7px;align-items:flex-start;
}
.hero-device--monitor .hero-device-badge{animation-delay:.6s}
.hero-device-stand{width:110px;height:8px;border-radius:0 0 7px 7px;background:rgba(255,255,255,.14)}
.hero-device--phone{display:none}
.hero-device--phone .hero-device-screen{
  position:relative;width:46px;height:116px;border-radius:13px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.16);
}
.hero-device--phone .hero-device-content{
  padding:12px 8px 0;display:flex;flex-direction:column;gap:6px;align-items:center;
}
.hero-device--phone .hero-device-badge{animation-delay:1.05s}

/* Hourly rate card (Wsparcie IT pricing) */
.rate-card{background:var(--panel);border:1px solid var(--border);border-radius:18px;padding:32px 24px;margin-top:24px;display:flex;flex-direction:column;gap:26px}
.rate-info .eyebrow{margin-bottom:16px}
.rate-price{display:flex;align-items:baseline;gap:8px}
.rate-price .amount{font:700 38px/1 var(--font-sans);letter-spacing:-.03em;color:var(--text)}
.rate-price .unit{font:400 15px/1 var(--font-sans);color:var(--text-mute)}
.rate-desc{margin-top:12px;font:400 14.5px/1.45 var(--font-sans);color:var(--text-mute)}
.rate-cta{margin-top:22px}
.rate-features{
  display:grid;grid-template-columns:1fr 1fr;gap:12px 20px;
  font:400 14px/1.45 var(--font-sans);color:var(--text-dim);
  padding-top:24px;border-top:1px solid rgba(255,255,255,.1);
}

.svc-process{padding:56px 20px;background:#000}
.svc-process-inner{max-width:1080px;margin:0 auto}
.svc-process .eyebrow{margin-bottom:18px}
.svc-process h2{margin:0 0 12px;font:700 30px/1.15 var(--font-sans);letter-spacing:-.025em}
.svc-process .lead{margin:0 0 36px;max-width:560px;font:400 16px/1.55 var(--font-sans);color:var(--text-mute)}
.process-dots{display:none}
.process-steps{display:flex;flex-direction:column;gap:1px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.14);border-radius:14px;overflow:hidden;margin-top:0}
.process-step{background:#000;padding:22px 20px}
.process-step .step-label{font:500 12.5px/1 var(--font-mono);color:var(--accent-bright);margin-bottom:10px;white-space:nowrap}
.process-step p{margin:0;font:400 14.5px/1.55 var(--font-sans);color:var(--text-mute)}

/* Pricing tiers */
.svc-pricing{padding:56px 20px 0;background:#000}
.svc-pricing-inner{max-width:1080px;margin:0 auto}
.svc-pricing .eyebrow{margin-bottom:18px}
.svc-pricing h2{margin:0 0 12px;font:700 30px/1.15 var(--font-sans);letter-spacing:-.025em}
.svc-pricing .lead{margin:0;max-width:560px;font:400 16px/1.55 var(--font-sans);color:var(--text-mute)}
.tier-grid{display:flex;flex-direction:column;gap:10px;padding:24px 0 0}
.tier-card{
  background:var(--panel);border:1px solid var(--border);border-radius:18px;
  padding:26px 22px 28px;display:flex;flex-direction:column;position:relative;
}
.tier-card--featured{border-color:rgba(95,214,160,.42)}
.tier-badge{
  position:absolute;top:-1px;right:20px;padding:6px 11px;border-radius:0 0 7px 7px;
  background:var(--accent);font:600 10.5px/1 var(--font-mono);letter-spacing:.08em;color:#fff;white-space:nowrap;
}
.tier-name{font:400 11px/1 var(--font-mono);letter-spacing:.12em;margin-bottom:16px;color:var(--text-faint);white-space:nowrap}
.tier-card--featured .tier-name{color:var(--accent-bright)}
.tier-price{font:700 28px/1 var(--font-sans);letter-spacing:-.03em;white-space:nowrap}
.tier-meta{margin-top:10px;font:400 13.5px/1.4 var(--font-sans);color:var(--text-mute)}
.tier-features{
  flex:1;margin-top:22px;padding-top:18px;border-top:1px solid rgba(255,255,255,.1);
  display:flex;flex-direction:column;gap:14px;
}
.tier-features p{margin:0}
.tier-lead{font:500 14.5px/1.5 var(--font-sans);color:var(--text)}
.tier-list-label{font:400 11px/1 var(--font-mono);letter-spacing:.1em;color:var(--text-faint)}
.tier-list{
  list-style:none;margin:2px 0 0;padding:0;
  display:flex;flex-direction:column;gap:9px;
  font:400 14px/1.4 var(--font-sans);color:var(--text-dim);
}
.tier-list li{padding-left:16px;position:relative}
.tier-list li::before{
  content:"";position:absolute;left:0;top:8px;
  width:4px;height:4px;border-radius:50%;background:var(--accent-bright);
}
.tier-cta{
  margin-top:24px;height:44px;border-radius:8px;display:flex;align-items:center;justify-content:center;
  font:500 14px/1 var(--font-sans);color:var(--text);border:1px solid rgba(255,255,255,.24);
  text-decoration:none;
}
.tier-cta:hover{border-color:rgba(255,255,255,.5)}
.tier-cta--solid{background:var(--accent);border:none;font-weight:600}
.tier-cta--solid:hover{border:none;opacity:.92}

.care-banner{
  margin-top:10px;background:var(--panel);border:1px solid var(--border);border-radius:18px;
  padding:26px 24px;display:flex;flex-direction:column;gap:18px;
}
.care-mark{height:26px;width:auto;color:var(--text);flex:none}
.care-title{font:600 18px/1.3 var(--font-sans)}
.care-price{margin-top:6px;font:400 13.5px/1.4 var(--font-sans);color:var(--accent-bright)}
.care-desc{font:400 14px/1.5 var(--font-sans);color:var(--text-mute)}

.svc-next{padding:64px 20px 0;background:#000}
.svc-next-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:20px}
.svc-next-head h2{margin:0;font:700 28px/1.15 var(--font-sans);letter-spacing:-.025em}
.svc-next-head a{font:500 14px/1 var(--font-sans);color:var(--accent-bright)}
.svc-next-head a:hover{color:#fff}

.svc-faq{padding:56px 20px 0;background:#000}
.svc-faq-inner{max-width:900px;margin:0 auto}
.svc-faq h2{margin:0 0 28px;font:700 28px/1.15 var(--font-sans);letter-spacing:-.025em}
.faq-list{border-top:1px solid rgba(255,255,255,.12)}
.faq-item{padding:24px 0;border-bottom:1px solid rgba(255,255,255,.12)}
.faq-item h4{margin:0 0 10px;font:600 16.5px/1.35 var(--font-sans)}
.faq-item p{margin:0;font:400 15px/1.6 var(--font-sans);color:var(--text-mute)}

/* Two-card pricing variant (systemy) */
.tier-grid.tier-grid--pair{grid-template-columns:1fr}

/* Card grid (do czego / zakres) */
.svc-cards{padding:56px 20px 0;background:#000}
.svc-cards-inner{max-width:1080px;margin:0 auto}
.svc-cards .eyebrow{margin-bottom:18px}
.svc-cards h2{margin:0 0 12px;font:700 30px/1.15 var(--font-sans);letter-spacing:-.025em}
.svc-cards .lead{margin:0 0 28px;max-width:600px;font:400 16px/1.55 var(--font-sans);color:var(--text-mute);text-wrap:pretty}
.svc-card-grid{display:flex;flex-direction:column;gap:10px}
.svc-card{background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:24px 22px}
.svc-card h3{margin:0;font:600 18px/1.3 var(--font-sans);color:var(--text)}
.svc-card p{margin:10px 0 0;font:400 15px/1.55 var(--font-sans);color:var(--text-mute);text-wrap:pretty}

/* App hero - floating phone mockups (aplikacje) */
.app-hero{position:relative;display:flex;align-items:flex-end;justify-content:center;padding:16px 4px 0}
.app-hero .hero-glow{width:320px;height:200px}
.app-phone{position:relative;width:210px;border-radius:30px 30px 0 0;background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.04));border:1px solid rgba(255,255,255,.16);border-bottom:none;padding:12px 12px 0;box-shadow:0 30px 70px rgba(0,0,0,.6);animation:nmFloat 8s ease-in-out infinite}
.app-phone-screen{height:100%;border-radius:20px 20px 0 0;background:#0b0b0d;border:1px solid rgba(255,255,255,.1);border-bottom:none;padding:16px 14px 0;text-align:left;overflow:hidden}
.app-phone-hero{height:62px;border-radius:12px;background:linear-gradient(135deg,#0e6b47,#1c8d5f);margin-bottom:12px;padding:12px;display:flex;flex-direction:column;justify-content:space-between}
.app-phone-list{display:flex;flex-direction:column;gap:9px}
.app-phone-row{height:34px;border-radius:9px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.08);display:flex;align-items:center;gap:9px;padding:0 10px}
.app-phone--side{display:none}

/* System hero - sidebar + table mockup (systemy) */
.sys-mock{position:relative;display:flex;min-height:280px;overflow:hidden}
.sys-mock::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent,rgba(255,255,255,.07),transparent);width:40%;animation:nmSweep 6s ease-in-out infinite}
.sys-sidebar{display:none}
.sys-main{flex:1;padding:18px 16px 20px;display:flex;flex-direction:column;gap:12px}
.sys-tiles{display:flex;gap:8px}
.sys-tile{flex:1;height:60px;border-radius:10px;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.12);padding:10px;display:flex;flex-direction:column;justify-content:space-between}
.sys-tile-label{width:44%;height:6px;border-radius:4px;background:rgba(255,255,255,.28)}
.sys-tile-value{width:52%;height:13px;border-radius:5px;background:rgba(255,255,255,.55)}
.sys-tile--accent .sys-tile-value{background:var(--accent-bright)}
.sys-table{border-radius:10px;border:1px solid rgba(255,255,255,.12);overflow:hidden}
.sys-table-head{display:flex;gap:12px;padding:11px 14px;background:rgba(255,255,255,.07);border-bottom:1px solid rgba(255,255,255,.1)}
.sys-table-head span{height:6px;border-radius:4px;background:rgba(255,255,255,.3);flex:1}
.sys-table-row{display:flex;align-items:center;gap:12px;padding:11px 14px;border-bottom:1px solid rgba(255,255,255,.07)}
.sys-table-row:last-child{border-bottom:none}
.sys-table-row span{height:6px;border-radius:4px;background:rgba(255,255,255,.18);flex:1}
.sys-badge{margin-left:auto;width:48px;height:16px;border-radius:6px;background:rgba(28,141,95,.45);border:1px solid rgba(95,214,160,.4);flex:none}
.sys-badge--off{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.12)}

/* Animated step-through mockups (inline-styled per step in aplikacje/systemy/strony-internetowe) */
@keyframes nmSeg1{0%{left:0%;opacity:0}10%{opacity:1}90%{opacity:1}100%{left:25%;opacity:0}}
@keyframes nmSeg2{0%{left:25%;opacity:0}10%{opacity:1}90%{opacity:1}100%{left:50%;opacity:0}}
@keyframes nmSeg3{0%{left:50%;opacity:0}10%{opacity:1}90%{opacity:1}100%{left:75%;opacity:0}}
@keyframes nmSeg4{0%{left:75%;opacity:0}10%{opacity:1}90%{opacity:1}100%{left:100%;opacity:0}}
@keyframes nmLight{0%{transform:scale(1);background:transparent;border-color:rgba(255,255,255,.3)}45%{transform:scale(1.75);background:#5fd6a0;border-color:#5fd6a0}100%{transform:scale(1.2);background:#1c8d5f;border-color:#1c8d5f}}
@keyframes nmStepIn{0%{opacity:.25}100%{opacity:1}}
@keyframes nmFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes nmBar{0%,100%{transform:scaleY(.3)}50%{transform:scaleY(1)}}

/* ================================================================
   DESKTOP - min-width 768px
   ================================================================ */
@media (min-width:768px){
  .svc-hero-frame{max-width:1000px;margin:0 auto 10px}
  .svc-hero-topbar{height:38px;padding:0 18px}
  .svc-mock{padding:34px 40px 40px;gap:16px}
  .svc-mock-tile{height:80px}
  .svc-mock-preview{width:260px;height:170px}

  .hero-devices{gap:64px;padding:0 40px}
  .hero-device-badge{width:20px;height:20px;border-width:4px}
  .hero-device--laptop{padding-top:0;padding-bottom:52px}
  .hero-device--laptop .hero-device-screen{width:246px;height:158px;border-radius:14px}
  .hero-device--laptop .hero-device-content{padding:20px 20px 0;gap:11px}
  .hero-device-hinge{width:24px;height:24px}
  .hero-device-base{width:104px;height:9px}
  .hero-device--monitor{padding-bottom:44px}
  .hero-device--monitor .hero-device-screen{width:204px;height:128px;border-radius:12px 12px 0 0}
  .hero-device--monitor .hero-device-content{padding:17px 17px 0;gap:10px}
  .hero-device-stand{width:260px;height:12px}
  .hero-device--phone{
    display:flex;margin-bottom:44px;
    animation:nmShake 6.5s linear 1.05s infinite;
  }
  .hero-device--phone .hero-device-screen{width:92px;height:172px;border-radius:18px}
  .hero-device--phone .hero-device-content{padding:18px 13px 0;gap:9px}

  .rate-card{
    padding:44px 44px 46px;margin-top:34px;display:grid;
    grid-template-columns:1fr 1.15fr;gap:56px;align-items:center;
  }
  .rate-features{
    border-top:none;border-left:1px solid rgba(255,255,255,.1);
    padding-top:0;padding-left:52px;
  }

  .svc-process{padding:112px 40px}
  .svc-process h2{font-size:40px}
  .process-dots{
    display:grid;grid-template-columns:repeat(5,1fr);gap:26px;align-items:center;
    position:relative;margin-bottom:26px;
  }
  .process-track-line{
    position:absolute;top:50%;left:7px;right:calc(20% - 27.8px);
    height:1px;background:rgba(255,255,255,.16);transform:translateY(-50%);
  }
  .process-dot-row{position:relative;display:flex;justify-content:flex-start}
  .process-dot{width:14px;height:14px;border-radius:50%;background:transparent;border:1px solid rgba(255,255,255,.3);position:relative;z-index:1}
  .process-travel{
    position:absolute;top:50%;width:5px;height:5px;margin-top:-2.5px;margin-left:-2.5px;
    border-radius:50%;background:var(--accent-bright);opacity:0;
  }
  .process-steps{
    display:grid;grid-template-columns:repeat(5,1fr);gap:26px;
    background:none;border:none;border-radius:0;overflow:visible;
  }
  .process-step{background:none;padding:0}

  .svc-pricing{padding:112px 40px 0}
  .svc-pricing h2{font-size:40px}
  .tier-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding:34px 0 0;align-items:stretch}
  .care-banner{flex-direction:row;align-items:center;gap:36px;padding:30px 32px}
  .care-mark{height:30px}
  .care-title{font-size:20px}

  .svc-next{padding:112px 40px 0;max-width:1280px;margin:0 auto}
  .svc-next-head h2{font-size:40px}

  .svc-faq{padding:112px 40px 0}
  .svc-faq h2{font-size:40px}
  .faq-item{display:grid;grid-template-columns:1fr 1.4fr;gap:40px;padding:26px 0}

  .tier-grid.tier-grid--pair{grid-template-columns:repeat(2,1fr)}

  .svc-cards{padding:112px 40px 0}
  .svc-cards h2{font-size:40px}
  .svc-cards .lead{font-size:18px;margin-bottom:48px}
  .svc-card-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
  .svc-card{padding:28px 30px}
  .svc-card h3{font-size:19px}

  .app-hero{max-width:1000px;margin:0 auto;align-items:flex-end;gap:34px;padding:24px 0 0}
  .app-hero .hero-glow{width:640px;height:280px}
  .app-phone{width:280px;height:300px;border-radius:38px 38px 0 0;background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.05));border-color:rgba(255,255,255,.18);padding:14px 14px 0;animation-delay:.4s}
  .app-phone-screen{border-radius:26px 26px 0 0;padding:18px 16px 0}
  .app-phone--side{display:block;width:236px;height:250px;border-radius:32px 32px 0 0;padding:12px 12px 0;animation-delay:0s}
  .app-phone--side .app-phone-screen{border-radius:22px 22px 0 0;padding:16px 14px 0}
  .app-phone--side:last-child{animation-delay:.8s}

  .sys-sidebar{display:flex;flex-direction:column;gap:9px;width:180px;flex:none;border-right:1px solid rgba(255,255,255,.09);padding:22px 16px}
  .sys-nav-item{height:30px;border-radius:8px;background:rgba(255,255,255,.06)}
  .sys-nav-item--active{background:rgba(28,141,95,.35);border:1px solid rgba(95,214,160,.3)}
  .sys-main{padding:22px 24px}
}