/* =========================================================================
   Stránka Služby – IT integrace, ceník, technická podpora, pomoc na místě i online, školení
   ========================================================================= */
/* co technici zajistí */
.sl-do{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.sl-d{display:flex;flex-direction:column;gap:10px;padding:22px;border-radius:20px;background:var(--card);border:1px solid var(--line)}
.sl-d .ic{width:46px;height:46px;border-radius:14px;background:var(--teal);color:#fff;display:grid;place-items:center}
.sl-d .ic svg{width:24px;height:24px}
html.night .sl-d .ic{background:var(--green2)}
.sl-d b{color:var(--ink);font-size:16px;line-height:1.35}
.sl-d span{font-size:13.5px;color:var(--muted);line-height:1.5}

/* ceník */
.sl-pr{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;align-items:stretch}
.sl-pc{display:flex;flex-direction:column;gap:6px;padding:26px;border-radius:22px;background:var(--card);border:2px solid var(--line);transition:border-color .2s,transform .2s,box-shadow .2s}
.sl-pc:hover{border-color:var(--green);transform:translateY(-3px);box-shadow:var(--shadow)}
.sl-pc .pk-l{font-weight:700;color:var(--green2);font-size:13px;text-transform:uppercase;letter-spacing:.06em}
.sl-pc h3{font-size:17px;line-height:1.35;margin:4px 0 8px}
.sl-pc b.big{font-family:Quicksand,sans-serif;font-size:36px;line-height:1.1;color:var(--ink)}
.sl-pc small{font-size:13px;color:var(--muted)}
.sl-pc .btn{margin-top:auto;align-self:flex-start;min-height:42px;padding:0 18px;font-size:14px}
.sl-pc .sp{flex:1;min-height:16px}
.sl-pc.hi{border-color:var(--green);background:var(--mint)}
html.night .sl-pc.hi{background:rgba(50,187,0,.08)}
.sl-km{margin-top:16px;padding:14px 18px;border-radius:14px;background:var(--card);border:1px dashed var(--line);font-size:14.5px;color:var(--muted)}
.sl-km b{color:var(--ink)}

/* s čím pomůže technická podpora */
.sl-help{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.sl-help li{display:flex;align-items:center;gap:12px;padding:16px 18px;border-radius:16px;background:var(--card);border:1px solid var(--line);color:var(--ink);font-weight:600;font-size:15px}
.sl-help li:before{content:"✓";width:28px;height:28px;flex-shrink:0;border-radius:50%;background:var(--mint);color:var(--green2);display:grid;place-items:center;font-weight:700}
html.night .sl-help li:before{background:rgba(50,187,0,.14);color:var(--green3)}
.sl-help li small{display:block;font-weight:500;font-size:13px;color:var(--muted)}
ul.sl-help{list-style:none;margin:0;padding:0}

/* jak pomůžeme: na místě, online OK Soft, online Starlit */
.sl-how{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.sl-h{display:flex;flex-direction:column;gap:12px;padding:28px;border-radius:24px;background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow)}
.sl-h .tag{align-self:flex-start}
.sl-h h3{font-size:22px}
.sl-h p{margin:0;color:var(--muted);line-height:1.6}
.sl-h ul{list-style:none;margin:4px 0 0;padding:0;display:grid;gap:6px;font-size:14.5px}
.sl-h ul a{color:var(--ink);font-weight:700;text-decoration:none}
.sl-h ul a:hover{color:var(--green2)}
.sl-h ul span{color:var(--muted)}
.sl-h .btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:auto;padding-top:8px}
.sl-h .btn{min-height:44px;padding:0 18px;font-size:14px}

/* školení */
.sl-learn{display:grid;grid-template-columns:1.2fr 1fr;gap:40px;align-items:center;padding:40px;border-radius:28px;background:var(--teal);color:#fff}
.sl-learn .kick{color:var(--lime)}
.sl-learn h2{color:#fff}
.sl-learn .lead{color:rgba(255,255,255,.82)}
.sl-learn ol{list-style:none;margin:0;padding:0;display:grid;gap:10px;counter-reset:sl}
.sl-learn li{display:flex;gap:14px;align-items:center;padding:16px 18px;border-radius:16px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);font-weight:600;counter-increment:sl}
.sl-learn li:before{content:counter(sl);width:32px;height:32px;flex-shrink:0;border-radius:50%;background:var(--green);display:grid;place-items:center;font-family:Quicksand,sans-serif}
html.night .sl-learn{background:var(--card);border:1px solid var(--line)}

/* čtyři cesty kontaktu */
.sl-ways{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:24px}
.sl-w{display:flex;flex-direction:column;gap:2px;padding:16px 18px;border-radius:16px;background:var(--card);border:1px solid var(--line);text-decoration:none;transition:border-color .2s}
a.sl-w:hover{border-color:var(--green)}
.sl-w small{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--green2)}
.sl-w b{color:var(--ink);font-size:15px}
.sl-w span{font-size:13px;color:var(--muted)}

@media (max-width:1100px){.sl-do,.sl-pr{grid-template-columns:repeat(2,minmax(0,1fr))}.sl-help{grid-template-columns:repeat(2,minmax(0,1fr))}.sl-how{grid-template-columns:1fr}}
@media (max-width:900px){.sl-learn{grid-template-columns:1fr;padding:28px}}
@media (max-width:640px){.sl-do,.sl-pr,.sl-help,.sl-ways{grid-template-columns:1fr}}

/* úvod: Všechno spolu komunikuje (js/sluzby.js) */
#heroSL .sl-cab{fill:none;stroke:var(--iso-edge);stroke-opacity:.35;stroke-width:3;stroke-linejoin:round}
#heroSL .sl-pk{fill:none;stroke:var(--green);stroke-width:4.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:.1 34;animation:slPk 2.6s linear infinite;filter:drop-shadow(0 0 3px rgba(50,187,0,.8))}
#heroSL .sl-rack{fill:#103847;stroke:var(--iso-edge);stroke-width:1}
#heroSL .sl-vent{stroke:#2f5563;stroke-width:1.6}
#heroSL .sl-led{fill:var(--green);stroke:none;animation:slLed 2.4s steps(2) infinite}
#heroSL .sl-led.y{fill:#ffed36}
#heroSL .sl-ant{stroke:var(--iso-edge);stroke-width:2.2;stroke-linecap:round}
#heroSL .sl-sig{fill:none;stroke:#0088ca;stroke-width:1.6;transform-box:fill-box;transform-origin:center;animation:slSig 2.4s ease-out infinite}
#heroSL .sl-sig.s2{animation-delay:-1.2s}
#heroSL .sl-van.l{fill:#f4f8f9}#heroSL .sl-van.r{fill:#d3e0e6}#heroSL .sl-van.t{fill:#ffffff}
#heroSL .sl-win{fill:#2f5563}
#heroSL .sl-stripe{fill:var(--green);stroke:none}
#heroSL .sl-vtx{fill:#0f475e;font:800 19px Montserrat,sans-serif;letter-spacing:.5px}
#heroSL .sl-whl{fill:#1d3743;stroke:#9fb4c2;stroke-width:1.2}
#heroSL .sl-bea{fill:#ffed36;stroke:var(--iso-edge);stroke-width:.8;animation:slBea 1.2s steps(2) infinite}
html.night #heroSL .sl-van.l{fill:#c9d6dc}html.night #heroSL .sl-van.r{fill:#9fb4c2}html.night #heroSL .sl-van.t{fill:#e4f0f3}
html.night #heroSL .sl-cab{stroke:#2f5563;stroke-opacity:.8}
@keyframes slPk{to{stroke-dashoffset:-68}}
@keyframes slLed{0%{opacity:1}50%{opacity:.25}}
@keyframes slSig{0%{transform:scale(.6);opacity:.9}100%{transform:scale(3.4);opacity:0}}
@keyframes slBea{0%{filter:drop-shadow(0 0 6px #ffed36)}50%{filter:none;opacity:.6}}
@media (prefers-reduced-motion:reduce){#heroSL .sl-pk,#heroSL .sl-led,#heroSL .sl-sig,#heroSL .sl-bea{animation:none}}