.service-quicknav{
  display:flex; flex-wrap:wrap; gap:10px; margin-bottom:var(--sp-5);
  padding-bottom:var(--sp-3); border-bottom:1px solid var(--border);
}
.service-quicknav a{
  font-size:13px; font-weight:600; color:var(--text-secondary);
  background:var(--surface); border:1px solid var(--border);
  padding:8px 14px; border-radius:999px; transition:all 0.25s var(--ease);
}
.service-quicknav a:hover{color:#fff; background:var(--violet); border-color:var(--violet);}

/* ---------- Premium service card blocks ---------- */
.service-block{
  position:relative;
  display:grid; grid-template-columns:minmax(0, 0.9fr) minmax(0, 1.1fr); gap:48px; align-items:center;
  padding:44px 44px 44px 52px; margin-bottom:36px; border-radius:var(--radius-lg);
  background:var(--card-bg); border:1px solid var(--border);
  box-shadow:var(--shadow-sm);
  scroll-margin-top:110px; overflow:hidden;
  transition:transform 0.35s var(--ease), box-shadow 0.35s var(--ease), border-color 0.35s var(--ease);
}
.service-block:last-child{margin-bottom:0;}
.service-block::after{
  content:''; position:absolute; left:0; top:0; bottom:0; width:6px;
  background:linear-gradient(180deg, var(--violet), var(--cyan));
}
.service-block:nth-child(4n+2)::after{background:linear-gradient(180deg, var(--cyan), var(--gold));}
.service-block:nth-child(4n+3)::after{background:linear-gradient(180deg, var(--gold), var(--mint));}
.service-block:nth-child(4n+4)::after{background:linear-gradient(180deg, var(--mint), var(--violet));}
.service-block::before{
  content:''; position:absolute; inset:0; padding:1.5px; border-radius:var(--radius-lg);
  background:linear-gradient(135deg, var(--cyan), var(--violet));
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  opacity:0.22; transition:opacity 0.35s var(--ease); pointer-events:none;
}
.service-block:hover{transform:translateY(-6px); box-shadow:var(--shadow-md); border-color:transparent;}
.service-block:hover::before{opacity:1;}
.service-block.reverse{grid-template-columns:minmax(0, 1.1fr) minmax(0, 0.9fr);}
.service-block.reverse .service-visual-wrap{order:2;}

.service-list{display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:12px;}
.service-list-item{
  display:flex; align-items:center; gap:10px; font-size:14.5px; font-weight:500;
  background:var(--surface); border:1px solid var(--border); padding:12px 14px; border-radius:10px;
  transition:transform 0.25s var(--ease), border-color 0.25s var(--ease);
}
.service-block:hover .service-list-item{border-color:rgba(0,217,200,0.3);}
.service-list-item i{color:var(--mint); font-size:14px;}

.service-visual-wrap{position:relative;}
.service-visual{border-radius:var(--radius-md); overflow:hidden; box-shadow:var(--shadow-sm); aspect-ratio:3/2;}
.service-visual picture, .service-visual img{width:100%; height:100%; display:block;}
.service-visual img{object-fit:cover;}
.service-big-icon{
  position:absolute; bottom:-18px; left:-18px; width:64px; height:64px; border-radius:18px;
  display:flex; align-items:center; justify-content:center; font-size:26px; color:#fff;
  background:linear-gradient(135deg, var(--violet), var(--cyan));
  box-shadow:0 12px 28px rgba(139,92,246,0.35); border:4px solid var(--card-bg);
  transition:transform 0.35s var(--ease);
}
.service-block:hover .service-big-icon{transform:scale(1.1) rotate(-4deg);}

.service-learn-more{
  display:inline-flex; align-items:center; gap:8px; margin-top:26px;
  font-weight:700; font-size:15px; color:#fff; background:var(--violet);
  padding:14px 26px; border-radius:12px; box-shadow:0 6px 20px rgba(109,40,217,0.28);
  transition:transform 0.3s var(--ease), box-shadow 0.3s var(--ease), background 0.3s var(--ease), gap 0.3s var(--ease);
}
.service-learn-more i{transition:transform 0.3s var(--ease);}
.service-learn-more:hover{transform:translateY(-3px); box-shadow:0 12px 30px rgba(109,40,217,0.4); gap:12px; background:var(--violet-ink);}
.service-learn-more:hover i{transform:translateX(4px);}

/* ---------- Colored hero background for services page ---------- */
.page-header-gradient{
  background:var(--grad-hero); border-bottom:none; color:#fff;
  padding:196px 0 76px; position:relative; overflow:hidden;
}
.page-header-gradient::before{background:radial-gradient(620px 380px at 90% 0%, rgba(0,217,200,0.26), transparent 60%), radial-gradient(480px 340px at 10% 100%, rgba(139,92,246,0.26), transparent 60%);}
.page-header-gradient h1{color:#fff; font-size:clamp(32px,4.6vw,50px);}
.page-header-gradient p{color:rgba(255,255,255,0.82); font-size:17px;}

.services-hero{padding-bottom:88px;}
.services-hero .hero-bg{position:absolute; inset:0; z-index:0;}
.services-hero .mesh-blob{position:absolute; border-radius:50%; filter:blur(60px); opacity:0.5; animation:float 10s ease-in-out infinite;}
.services-hero .blob-1{width:360px; height:360px; background:radial-gradient(circle, var(--cyan), transparent 70%); top:-8%; left:-4%;}
.services-hero .blob-2{width:340px; height:340px; background:radial-gradient(circle, var(--gold), transparent 70%); bottom:-15%; right:5%; animation-delay:2s;}
.services-hero-grid{position:relative; z-index:2; display:grid; grid-template-columns:minmax(0, 1.1fr) minmax(0, 0.9fr); gap:48px; align-items:center;}
.services-hero-actions{display:flex; gap:16px; flex-wrap:wrap; margin-top:30px;}
.services-hero-btn-outline{background:rgba(255,255,255,0.08); color:#fff; border-color:rgba(255,255,255,0.3); backdrop-filter:blur(6px);}
.services-hero-btn-outline:hover{background:rgba(255,255,255,0.16); border-color:rgba(255,255,255,0.5);}
.services-hero-visual{position:relative; border-radius:24px; overflow:hidden; box-shadow:0 24px 60px rgba(0,0,0,0.35);}
.services-hero-visual img{position:relative; z-index:1; display:block; width:100%; height:auto;}
.services-hero-visual .hero-visual-glow{inset:-30px;}

@media (max-width:1024px){
  .services-hero-grid{grid-template-columns:minmax(0, 1fr);}
  .services-hero-visual{order:-1; max-width:420px; margin:0 auto;}
  .service-block, .service-block.reverse{grid-template-columns:minmax(0, 1fr); padding:32px 32px 32px 40px;}
  .service-block.reverse .service-visual-wrap{order:0;}
}
@media (max-width:600px){
  .service-list{grid-template-columns:minmax(0, 1fr);}
  .service-block{padding:24px 24px 24px 32px;}
}