/* ============================================================
   Kronisys — services page (v4)
   Page-specific rules only; components live in global.css
   ============================================================ */

/* hero image — multi-format so the owner's exports just show */
.hero{--hero-img:url("../assets/heroes/hero-services.webp"),url("../assets/heroes/hero-services.jpg"),url("../assets/heroes/hero-services.png")}

/* ===== hero — document cover: lede left, table-of-contents right ===== */
.hero .wrap{display:grid;grid-template-columns:minmax(0,1fr) clamp(280px,29vw,336px);gap:clamp(40px,6vw,88px);align-items:end}
.cover-toc{opacity:0;animation:fadeUp .9s var(--ease) .5s forwards}
.cover-toc a{display:grid;grid-template-columns:30px 1fr 14px;align-items:center;gap:12px;padding:12.5px 2px;font-size:14px;font-weight:500;letter-spacing:-.1px;color:rgba(255,255,255,.62);transition:color .3s var(--ease)}
.cover-toc a+a{border-top:1px solid rgba(255,255,255,.12)}
.toc-num{font-family:var(--f);font-size:12px;font-weight:600;letter-spacing:.3px;color:rgba(255,255,255,.38);transition:color .3s var(--ease)}
.toc-name{transition:transform .3s var(--ease)}
.cover-toc svg{width:14px;height:14px;color:rgba(255,255,255,.28);transition:color .3s var(--ease),transform .3s var(--ease)}
.cover-toc a:hover{color:var(--c2)}
.cover-toc a:hover .toc-num{color:var(--c)}
.cover-toc a:hover svg{color:var(--c2);transform:translateX(3px)}

/* ===== services index — anchored rows, two-column check grid ===== */
.idx-row{grid-template-columns:64px 1.05fr 1.5fr}
.idx>li{scroll-margin-top:120px}
.svc-checks{list-style:none;margin-top:16px;display:grid;grid-template-columns:1fr 1fr;gap:9px 22px}
.svc-checks li{display:flex;align-items:flex-start;gap:9px;font-size:13px;line-height:1.5;letter-spacing:-.05px;color:var(--ltt2)}
.svc-checks svg{width:14px;height:14px;flex:none;margin-top:2px;color:var(--cd);transition:color .3s var(--ease)}
.idx-row:hover .svc-checks svg{color:var(--c)}

/* ===== process — sticky intro beside the scroll-drawn timeline ===== */
.tl-tags{margin-top:14px;font-family:var(--f);font-size:13px;font-weight:500;line-height:2;letter-spacing:.1px;color:var(--w3)}
.tl-tags span+span::before{content:'/';margin:0 9px;color:rgba(0,151,237,.5)}
.tl-step::before{transition:box-shadow .35s var(--ease)}
.tl-step:hover::before{box-shadow:0 0 0 5px rgba(0,151,237,.28)}
@media(min-width:960px){
  .proc-hd{position:sticky;top:110px;margin-bottom:0}
}

/* ===== capabilities — square-marked labels | middot-run values ===== */
.caps .cap{display:grid;grid-template-columns:200px 1fr;gap:14px clamp(28px,4.5vw,60px);align-items:start;padding:26px 0;border-bottom:1px solid var(--ltb)}
.caps .cap:first-child{border-top:1px solid var(--ltb)}
.cap-head h3{position:relative;padding-left:20px;font-size:clamp(16px,1.8vw,19px);font-weight:700;letter-spacing:-.4px;line-height:1.2}
.cap-head h3::before{content:'';position:absolute;left:0;top:.52em;width:8px;height:8px;background:var(--c);transform:translateY(-50%);transition:transform .45s var(--ease)}
.cap:hover .cap-head h3::before{transform:translateY(-50%) rotate(45deg)}
.cap-head p{margin-top:10px;font-size:13px;line-height:1.65;color:var(--ltt2);letter-spacing:-.05px}
.cap-list{margin-top:4px;font-size:14px;line-height:1.9;letter-spacing:-.1px;color:var(--ltt2)}
.cap-list span+span::before{content:'\00B7';margin:0 11px;color:var(--ltt3)}

/* ===== cta — soft radial glow behind the heading ===== */
.cta .wrap{background:radial-gradient(620px 380px at 50% 40%,rgba(0,151,237,.12),transparent 70%)}

/* ===== responsive ===== */
@media(max-width:960px){
  .hero .wrap{grid-template-columns:1fr}
  .cover-toc{display:none}
  .idx-row{grid-template-columns:44px 1fr}
}
@media(max-width:768px){
  .idx-row{grid-template-columns:36px 1fr}
  .svc-checks{grid-template-columns:1fr;gap:8px}
  .caps .cap{grid-template-columns:1fr;gap:12px;padding:22px 0}
  .cap-list{margin-top:0}
}
@media(prefers-reduced-motion:reduce){
  .cover-toc{opacity:1;animation:none}
}