:root{
  --bg:#fbfdff;
  --card:#ffffff;
  --muted:#6b7280;
  --accent:#0b74de;
  --accent-2:#0a9a77;
  --glass: rgba(255,255,255,0.65);
  --radius:12px;
  --max-width:1200px;
  --shadow: 0 8px 24px rgba(12,20,30,0.07);
  --mono: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}
*{box-sizing:border-box}
body{
  margin:0;
  font-family:var(--mono);
  background: linear-gradient(180deg,#f4f8ff 0%, #ffffff 100%);
  color:#111827;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:var(--max-width);margin:0 auto;padding:1rem}
.hero{
  background: linear-gradient(90deg, rgba(11,116,222,0.07), rgba(10,154,119,0.04));
  padding:36px 0 22px;
  border-bottom: 1px solid rgba(15,23,42,0.04);
}
.hero .wrap{display:block}
.hero h1{
  margin:0 0 6px; font-size:32px; color:var(--accent);
}
.hero .sub{margin:0 0 18px; color:var(--muted)}
.controls{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
#serviceSearch{
  flex:1 1 360px;
  min-width:220px;
  padding:12px 16px;
  border-radius:10px;
  border:1px solid rgba(15,23,42,0.06);
  background:rgba(255,255,255,0.9);
  font-size:15px;
  box-shadow: 0 2px 8px rgba(12,20,30,0.04);
}
.filters{display:flex;gap:8px;flex-wrap:wrap}
.chip{
  background:var(--card);
  border:1px solid rgba(15,23,42,0.05);
  padding:8px 12px;
  border-radius:999px;
  font-size:13px;
  cursor:pointer;
  color:var(--muted);
  transition:all .18s ease;
  box-shadow: 0 4px 12px rgba(12,20,30,0.03);
}
.chip:hover{transform:translateY(-4px); color:var(--accent)}
.chip.active{background:linear-gradient(90deg,var(--accent),var(--accent-2)); color:#fff; border:0}

.services-grid-wrapper{padding:28px 0 60px}
.services-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:18px;
}
.card{
  background:var(--card);
  border-radius:var(--radius);
  padding:16px;
  box-shadow:var(--shadow);
  display:flex;
  gap:12px;
  align-items:flex-start;
  min-height:92px;
  transition:transform .18s ease, box-shadow .18s ease;
  border: 1px solid rgba(11,116,222,0.03);
}
.card:hover{transform:translateY(-8px); box-shadow:0 24px 40px rgba(12,20,30,0.09)}
.card .icon{
  width:64px;height:64px;border-radius:10px;flex:0 0 64px;
  display:grid;place-items:center;
  background: linear-gradient(135deg, rgba(11,116,222,0.08), rgba(10,154,119,0.06));
  color:var(--accent);
  font-weight:700;
  border:1px solid rgba(11,116,222,0.06);
}
.card h3{margin:0;font-size:15px}
.card p{margin:6px 0 0;color:var(--muted);font-size:13px}
.card .actions{margin-left:auto;display:flex;gap:8px;align-items:center}
.btn{
  padding:8px 10px;border-radius:8px;border:0;cursor:pointer;font-size:13px;
  background:rgba(11,116,222,0.12); color:var(--accent);
}
.btn.alt{background:rgba(10,154,119,0.08); color:var(--accent-2)}
.copy-note{font-size:12px;color:var(--muted);margin-top:10px}

/* responsive */
@media (max-width:1100px){
  .services-grid{grid-template-columns: repeat(3, 1fr)}
}
@media (max-width:820px){
  .services-grid{grid-template-columns:repeat(2,1fr)}
  .hero h1{font-size:28px}
}
@media (max-width:520px){
  .services-grid{grid-template-columns:1fr}
  #serviceSearch{flex-basis:100%}
}

/* highlight matching text */
.highlight{background:linear-gradient(90deg,#fff59d,#fff); padding:0 3px; border-radius:3px}
.help{margin-top:20px;color:var(--muted); text-align:center}