/* Pagina /chiptuning/ (serviciile), 16 oct 2026, src/lib/tpl-servicii.ts: pe scheletul fisei (motorizare-v3.css) si al
   hub-urilor (hub-v3.css). Aici: butoanele de orientare, randurile de servicii cu icoane, tabelul comparativ, cei 4 pasi,
   blocul spre configurator si textul paginii. Animatiile (desenarea icoanelor, bara de castig, linia pasilor) sunt CSS
   peste continut deja prezent; public/js/servicii.js doar adauga clase (.sva-draw, .on). Cu reduce-motion totul e static. */
.sva-h2{margin:0 0 10px;font-size:17px;font-weight:800;letter-spacing:-.01em}
.sva-want{padding:4px 0 0}
.sva-wgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.sva-w{display:grid;grid-template-columns:44px minmax(0,1fr);grid-template-rows:auto auto;gap:0 12px;align-items:center;padding:14px 16px;border:1px solid var(--line);border-radius:var(--r-3);background:var(--panel);color:var(--ink);text-decoration:none;transition:border-color .15s,transform .15s}
.sva-w:hover{border-color:var(--red);transform:translateY(-1px)} .sva-w:focus-visible{outline:2px solid var(--red);outline-offset:2px}
.sva-wi{grid-row:1/span 2;width:44px;height:44px;color:var(--red-ink);overflow:visible} .sva-w b{font-size:15px;font-weight:800} .sva-w small{font-size:12px;color:var(--muted)}
.sva-list,.sva-cmp,.sva-proc{margin-top:26px;padding-top:22px;border-top:1px solid var(--line)}
.sva-rows{display:grid;font-variant-numeric:tabular-nums}
.sva-hd,.sva-r{display:grid;grid-template-columns:40px minmax(0,1fr) 100px 190px 150px;gap:4px 14px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line);color:var(--ink);text-decoration:none}
.sva-hd{padding:4px 0;font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--soft)} .sva-hd span:first-child{grid-column:1/span 2} .sva-hd span:nth-child(3){text-align:right}
.sva-r{transition:background .25s,box-shadow .25s;border-radius:6px;margin:0 -8px;padding-left:8px;padding-right:8px;scroll-margin-top:90px}
.sva-r:hover .sva-rn b{color:var(--red-ink)} .sva-r.on,.sva-r:target{background:var(--tint);box-shadow:inset 3px 0 0 var(--red)}
.sva-ri{width:34px;height:34px;color:var(--red-ink);overflow:visible} .sva-rn b{display:block;font-size:14.5px;font-weight:800} .sva-rn small{display:block;font-size:12.5px;color:var(--muted);line-height:1.4;max-width:60ch}
.sva-rc{font-size:12.5px;color:var(--muted);white-space:nowrap}
.sva-rp{text-align:right} .sva-rp b{font-size:16px;font-weight:900;white-space:nowrap} .sva-rp small{display:block;font-size:11px;color:var(--soft);white-space:normal}
.sva-ra{font-size:12.5px;font-weight:800;color:var(--red-ink);white-space:nowrap;text-align:right}
/* bara de castig (Stage 1): serie vs Stage 1, se umple cand intra in ecran */
.sva-gain{display:grid;grid-template-columns:52px minmax(0,1fr);gap:4px 8px;align-items:center;margin-top:8px;max-width:420px;font-size:11px;color:var(--soft)}
.sva-gl.on{color:var(--red-ink);font-weight:800} .sva-gb{display:block;height:8px;border-radius:4px;background:var(--line);overflow:hidden} .sva-gb b{display:block;height:100%;width:0;border-radius:4px;background:var(--line-2);transition:width 1.1s cubic-bezier(.2,.7,.2,1)} .sva-gb.on b{background:var(--red)}
.sva-gain.on .sva-gb b,.sva-nojs .sva-gb b{width:var(--w)} .sva-gain em{grid-column:1/-1;font-style:normal;font-size:11.5px;color:var(--muted)}
/* tabelul comparativ */
.sva-tw{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-top:12px}
.sva-t{width:100%;border-collapse:collapse;font-size:13px;min-width:720px} .sva-t th,.sva-t td{padding:9px 10px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.sva-t thead th{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--soft);border-bottom:2px solid var(--line-2)} .sva-t thead th:nth-child(2){color:var(--red-ink)}
.sva-t tbody th{font-weight:700;color:var(--muted);width:150px} .sva-t td{color:var(--ink)} .sva-t td b{font-weight:900}
.sva-y,.sva-n,.sva-a{width:16px;height:16px;vertical-align:-3px;margin-right:4px} .sva-y{color:#22c55e} .sva-n{color:var(--soft)} .sva-a{color:var(--red-ink)}
.sva-t .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
/* cei 4 pasi cu linia intre ei */
.sva-steps{position:relative;list-style:none;margin:14px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.sva-steps li{position:relative;display:grid;gap:4px;align-content:start;padding-top:6px} .sva-steps b{font-size:14.5px;font-weight:800} .sva-steps small{font-size:12.5px;color:var(--muted);line-height:1.45}
.sva-si{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:var(--panel);border:2px solid var(--line-2);color:var(--red-ink);margin-bottom:6px;position:relative;z-index:1;transition:border-color .4s,background .4s}
.sva-sic{width:26px;height:26px} .sva-steps li.on .sva-si{border-color:var(--red);background:var(--tint)}
.sva-line{position:absolute;left:26px;right:calc(25% - 26px);top:32px;height:2px;background:var(--line);z-index:0} .sva-line::after{content:"";position:absolute;inset:0;background:var(--red);transform-origin:left;transform:scaleX(0);transition:transform 1.4s cubic-bezier(.2,.7,.2,1)} .sva-proc.on .sva-line::after{transform:scaleX(1)}
/* desenarea icoanelor (cele cu pathLength="1"): butoanele la incarcare, pasii la scroll */
.sva-wi *,.sva-sic *{stroke-dasharray:1;stroke-dashoffset:0}
.sva-draw .sva-wi *{animation:sva-draw 1s ease-out both} .sva-draw .sva-w:nth-child(2) .sva-wi *{animation-delay:.15s} .sva-draw .sva-w:nth-child(3) .sva-wi *{animation-delay:.3s}
.sva-proc.on .sva-sic *{animation:sva-draw .8s ease-out both} .sva-proc.on li:nth-child(3) .sva-sic *{animation-delay:.3s} .sva-proc.on li:nth-child(4) .sva-sic *{animation-delay:.6s} .sva-proc.on li:nth-child(5) .sva-sic *{animation-delay:.9s}
@keyframes sva-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){.sva-wi *,.sva-sic *{animation:none!important} .sva-gb b,.sva-line::after,.sva-r,.sva-w,.sva-si{transition:none!important} .sva-gain .sva-gb b{width:var(--w)} .sva-line::after{transform:none}}
/* restul paginii */
.sv3-cfg{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px 24px;align-items:center}
.sv3-gl a{grid-template-columns:30px minmax(0,1fr) auto} .sv3-gl .nm small{white-space:normal;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.sv3-art p{color:var(--muted);font-size:14px;line-height:1.6;max-width:74ch;margin:10px 0 0} .sv3-art p a{color:var(--red-ink);font-weight:700;text-decoration:none}
.sv3-art h2+p{margin-top:8px} .sv3-art h3{margin:16px 0 2px;font-size:15px;font-weight:800} .sv3-art ul{margin:8px 0 0;padding-left:18px;color:var(--muted);font-size:14px;line-height:1.6} .sv3-art li{margin-top:4px}
@media (max-width:1024px){.sva-hd,.sva-r{grid-template-columns:36px minmax(0,1fr) 90px 160px 120px}}
@media (max-width:899px){
  .sva-wgrid{grid-template-columns:1fr} .sva-w{padding:12px 14px}
  .sva-hd{display:none} .sva-r{grid-template-columns:36px minmax(0,1fr) auto;grid-template-rows:auto auto} .sva-ri{grid-row:1/span 2;align-self:start;margin-top:2px} .sva-rn{grid-column:2/span 2} .sva-rc{grid-column:2;grid-row:2;align-self:center} .sva-rp{grid-column:3;grid-row:2} .sva-ra{display:none}
  .sva-steps{grid-template-columns:1fr 1fr;gap:18px 14px} .sva-line{display:none}
  .sv3-cfg{grid-template-columns:1fr} .sv3-cfg .ds-btn{justify-self:start}
}
@media (max-width:480px){.sva-steps{grid-template-columns:1fr} .sva-steps li{grid-template-columns:52px minmax(0,1fr);gap:2px 12px} .sva-steps .sva-si{grid-row:1/span 2;margin:0}}