/* =========================================================
   SERVICE (service.css) — χρησιμοποιεί και τα tr-* του training.css
   ========================================================= */
.sv-hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.sv-cover{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.sv-zone{padding:clamp(28px,3vw,40px);border-radius:28px;border:1px solid var(--line);background:#fff;transition:border-color .3s, box-shadow .3s, transform .3s var(--ease)}
.sv-zone:hover{border-color:var(--sky);box-shadow:0 24px 48px -32px rgba(0,18,37,.35);transform:translateY(-3px)}
.sv-zone-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px}
.sv-zone-top .tr-ico{margin:0}
.sv-tag{padding:6px 12px;border-radius:99px;background:var(--sky-wash);color:var(--navy);font-weight:800;font-size:.74rem;letter-spacing:.08em;text-transform:uppercase}
.sv-tag--sand{background:var(--sand-wash);color:var(--gold-ink)}
.sv-zone h3{font-size:1.3rem;letter-spacing:-.02em;margin-bottom:8px}
.sv-zone > p{color:var(--muted);line-height:1.65}
.sv-zone strong{color:var(--abyss)}
.sv-regions{list-style:none;margin:24px 0 0;padding:20px 0 0;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:10px}
.sv-regions li{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:99px;background:var(--tint);border:1px solid var(--line);font-weight:800;color:var(--abyss);font-size:1.02rem}
.sv-regions .i{width:18px;height:18px;color:var(--gold)}
.sv-small{display:flex;gap:10px;align-items:center;margin-top:24px;color:var(--muted);font-size:.92rem}
.sv-small .i{flex:none;width:18px;height:18px;color:var(--gold-ink)}

@media (max-width:480px){.sv-hero-cta .btn{flex:1 1 100%}}

/* Τι καλύπτουμε: γρανάζια + πλακίδια */
.sv-what{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(32px,6vw,88px);align-items:center}
.sv-gears{display:block;width:100%;max-width:420px;margin-top:28px}
.sv-gears .g-dia{fill:none;stroke:rgba(213,151,9,.3);stroke-width:2;stroke-dasharray:6 8}
.sv-gears .g path{stroke-linejoin:round;stroke-width:3}
.sv-gears .g1 path{fill:var(--navy);stroke:var(--navy)}
.sv-gears .g2 path{fill:var(--gold);stroke:var(--gold)}
.sv-gears .g3 path{fill:var(--sky);stroke:var(--sky)}
.sv-gears .g-in{fill:rgba(255,255,255,.12)}
.sv-gears .g2 .g-in{fill:rgba(255,255,255,.22)}
.sv-gears .g-sp line{stroke:rgba(255,255,255,.28);stroke-width:5;stroke-linecap:round}
.sv-gears .g-hub{fill:var(--tint);stroke:rgba(255,255,255,.6);stroke-width:3}
.sv-gears .g1{animation:gSpin 24s linear infinite}
.sv-gears .g2{animation:gSpin 15s linear infinite reverse}
.sv-gears .g3{animation:gSpin 11.3s linear infinite reverse}
@keyframes gSpin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.sv-gears .g{animation:none}}
.sv-tiles{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:16px}
.sv-tile{padding:26px;border-radius:24px;background:#fff;border:1px solid var(--line);transition:transform .3s var(--ease), box-shadow .3s, border-color .3s}
.sv-tile:hover{transform:translateY(-3px);border-color:var(--sky);box-shadow:0 20px 40px -28px rgba(0,18,37,.35)}
.sv-ti{display:grid;place-items:center;width:46px;height:46px;border-radius:14px;background:var(--abyss);color:var(--gold-400);margin-bottom:18px}
.sv-ti .i{width:22px;height:22px}
.sv-tile h3{font-size:1.08rem;letter-spacing:-.01em;margin-bottom:6px}
.sv-tile p{color:var(--muted);font-size:.95rem;line-height:1.55}

/* Πώς λειτουργεί: λίστα με μεγάλους αριθμούς */
.sv-how{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(32px,6vw,88px);align-items:start}
.sv-how-head{position:sticky;top:120px}
.sv-how-head .btn{margin-top:28px}
.sv-flow{list-style:none;margin:0;padding:0}
.sv-flow li{display:grid;grid-template-columns:auto 1fr auto;gap:28px;align-items:center;padding:30px 0;border-bottom:1px solid var(--line)}
.sv-flow li:first-child{border-top:1px solid var(--line)}
.sv-big{font-size:clamp(2.6rem,1.6rem + 2.6vw,4rem);font-weight:800;letter-spacing:-.05em;line-height:1;color:transparent;-webkit-text-stroke:1.5px var(--sky);transition:color .35s,-webkit-text-stroke-color .35s}
.sv-flow li:hover .sv-big{color:var(--gold);-webkit-text-stroke-color:var(--gold)}
.sv-flow h3{font-size:1.2rem;letter-spacing:-.02em;margin-bottom:6px}
.sv-flow p{color:var(--muted);line-height:1.6}
.sv-fi{width:22px;height:22px;color:var(--gold-ink)}

@media (max-width:860px){
  .sv-cover,.sv-what,.sv-how{grid-template-columns:1fr}
  .sv-gears{max-width:300px;margin-inline:auto}
  .sv-how-head{position:static}
}
@media (max-width:560px){
  .sv-tiles{grid-template-columns:1fr}
  .sv-flow li{grid-template-columns:auto 1fr;gap:18px}
  .sv-fi{display:none}
}