/* SERVICES — page-specific styles */
/* ---- services archive ---- */
.nav-links a.active{color:#fff;position:relative}
.nav-links a.active::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;
  border-radius:2px;background:var(--grad)}
.hero.services{padding:166px 0 64px}
.hero.services .hero-in{max-width:860px}
.filterbar{position:sticky;top:0;z-index:30;background:rgba(247,248,253,.82);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.filterbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;
  flex-wrap:wrap;padding-top:16px;padding-bottom:16px}
.fchips{display:flex;gap:8px;flex-wrap:wrap}
.fchip{font-family:var(--display);font-weight:500;font-size:13.5px;color:var(--ink-soft);
  border:1px solid var(--line);background:#fff;border-radius:999px;padding:9px 16px;cursor:pointer;
  transition:color .2s,background .2s,border-color .2s,box-shadow .2s,transform .2s}
.fchip:hover{color:var(--ink);transform:translateY(-1px)}
.fchip.active{color:#fff;border-color:transparent;background:var(--grad);box-shadow:0 6px 16px rgba(124,77,225,.3)}
.scount{font-family:var(--mono);font-size:12.5px;color:var(--ink-mute);white-space:nowrap}
.sgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;padding-top:42px}
.scard{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);
  border-radius:18px;padding:24px;position:relative;overflow:hidden;
  transition:transform .3s,box-shadow .3s,border-color .3s}
.scard::before{content:"";position:absolute;inset:0;border-radius:18px;padding:1px;background:var(--grad);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .3s}
.scard:hover{transform:translateY(-5px);box-shadow:0 22px 50px rgba(46,60,120,.13)}
.scard:hover::before{opacity:1}
.scard.hide{display:none!important}
.scard-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:15px}
.scard .ic{width:42px;height:42px;border-radius:12px;background:var(--grad-soft);display:grid;place-items:center}
.scard .ic svg{width:21px;height:21px;stroke:var(--purple);fill:none;stroke-width:1.8}
.scard .cat{font-family:var(--mono);font-size:10px;letter-spacing:1.4px;text-transform:uppercase;
  color:var(--purple);border:1px solid var(--line);border-radius:999px;padding:4px 9px}
.scard h3{font-family:var(--display);font-weight:600;font-size:18px;letter-spacing:-.3px;margin-bottom:7px}
.scard>p{font-size:14px;color:var(--ink-soft);margin-bottom:15px;flex:1}
.scard .tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:18px}
.scard .tags i{font-style:normal;font-size:11px;font-family:var(--mono);color:var(--ink-soft);
  background:var(--paper);border:1px solid var(--line);border-radius:999px;padding:3px 9px}
.scard-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;
  border-top:1px solid var(--line);padding-top:15px}
.scard .price{font-family:var(--display);font-weight:700;font-size:19px;letter-spacing:-.3px;color:var(--ink)}
.scard .price em{font-style:normal;font-size:12px;font-weight:400;color:var(--ink-mute)}
.scard .price.q{font-size:14px;font-weight:600;color:var(--ink-soft)}
.scard .slink{font-family:var(--display);font-weight:600;font-size:13.5px;color:var(--purple);white-space:nowrap}
.scard .slink .arw{display:inline-block;transition:transform .2s}
.scard .slink:hover .arw{transform:translate(3px,-3px)}
/* featured all-in-one banner */
.scard.feat{grid-column:1/-1;display:grid;grid-template-columns:1.4fr .6fr;gap:34px;align-items:center;
  background:linear-gradient(150deg,#fff,#f1effe);border-color:#e4def9}
.scard.feat .ic{width:46px;height:46px}
.scard.feat h3{font-size:23px}
.scard.feat>p,.scard.feat .feat-left>p{max-width:560px}
.scard.feat .feat-right{text-align:right}
.scard.feat .feat-right .price{font-size:30px}
.scard.feat .feat-right .row{display:flex;gap:10px;justify-content:flex-end;margin-top:14px;flex-wrap:wrap}
.scard.feat .feat-right .btn{font-size:13.5px;padding:11px 18px}
@media (max-width:900px){
  .sgrid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:680px){
  .sgrid{grid-template-columns:1fr}
  .scard.feat{grid-template-columns:1fr;gap:22px}
  .scard.feat .feat-right,.scard.feat .feat-right .row{text-align:left;justify-content:flex-start}
  .hero.services{padding:126px 0 56px}
  .filterbar .wrap{padding-top:12px;padding-bottom:12px}
}