/* ========= Services – Premium UI Layer ========= */

/* Palette (tweak to your brand later) */
:root{
  --bg: #0b0f14;
  --card: #0f1621;
  --ink: #e9eef6;
  --muted: #9fb2c8;
  --brand: #5cc8ff;         /* primary */
  --brand-2: #7effc5;       /* accent */
  --pill: rgba(92,200,255,.12);
  --ok: #1cd98a;
  --shadow: 0 10px 30px rgba(0,0,0,.3);
}

/* page background (optional if you already have one) */
body{ background: radial-gradient(1200px 600px at 10% -10%, #122030 0%, #0b0f14 60%) fixed; color: var(--ink); }
.section .lead{ color: var(--muted); }

/* filter pills */
.filters{ display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1rem; }
.filters .pill{
  border:1px solid rgba(255,255,255,.1);
  background: var(--pill);
  color: var(--ink);
  padding:.5rem .8rem; border-radius: 999px; cursor:pointer;
  transition: transform .15s ease, background-color .2s ease, border-color .2s ease;
}
.filters .pill:hover{ transform: translateY(-1px); border-color: rgba(255,255,255,.25); }
.filters .pill.active{ background: linear-gradient(90deg,var(--brand),var(--brand-2)); color:#041118; border-color: transparent; }

/* card grid */
.cards-grid{ display:grid; gap:1rem; grid-template-columns: repeat(auto-fill,minmax(320px,1fr)); }

/* service card */
.card.svc{
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.08);
  border-radius: 18px; padding:1rem 1rem 0.75rem;
  box-shadow: var(--shadow);
  transition: transform .18s ease, box-shadow .18s ease, border-color .2s ease;
}
.card.svc:hover{ transform: translateY(-3px); border-color: rgba(92,200,255,.4); box-shadow: 0 16px 40px rgba(33,132,199,.25); }

.card.svc h3{ margin: .2rem 0 .4rem; font-size:1.1rem; letter-spacing:.2px; }
.card.svc .tagline{ color: var(--muted); margin:.2rem 0 .8rem; }
.svc-meta .badge{
  display:inline-block; font-size:.75rem; letter-spacing:.3px;
  padding:.25rem .5rem; border-radius:999px; color:#041118;
  background: linear-gradient(90deg,var(--brand),var(--brand-2));
}

/* accordion */
.acc{ border-top:1px solid rgba(255,255,255,.08); }
.acc-head{
  width:100%; text-align:left; background:none; color:var(--ink);
  font-weight:600; padding:.8rem .2rem; cursor:pointer; display:flex; align-items:center; gap:.5rem;
  position:relative; transition: color .15s ease;
}
.acc-head:hover{ color: #eaf6ff; }
.acc-head::before{
  content:""; width: 10px; height:10px; border-right:2px solid var(--brand); border-bottom:2px solid var(--brand);
  transform: rotate(-45deg); transition: transform .2s ease, border-color .2s ease; margin-right:.2rem;
}
.acc-head.open::before{ transform: rotate(45deg); border-color: var(--brand-2); }

.acc-body{
  overflow:hidden; max-height:0; transition: max-height .28s ease;
  color: var(--muted);
}
.acc-body.open{ max-height: 600px; /* enough for content; adjust if needed */ }

ul.tick{ margin:.4rem 0 .8rem; padding-left:1.1rem; }
ul.tick li{ margin:.25rem 0; list-style:none; position:relative; }
ul.tick li::before{
  content:""; position:absolute; left:-1.1rem; top:.5rem; width:.45rem; height:.45rem;
  border-radius:50%; background: var(--brand-2);
  box-shadow: 0 0 0 4px rgba(126,255,197,.12);
}

/* CTA row */
.card.svc .cta-row{ display:flex; gap:.6rem; padding: .8rem 0 1rem; }
.card.svc .btn.primary{
  background: linear-gradient(90deg,var(--brand),var(--brand-2)); border:none; color:#041118;
}
.card.svc .btn.primary:hover{ filter: brightness(1.05); transform: translateY(-1px); }

/* ensure #catalog anchor reveal below sticky header */
#catalog{ scroll-margin-top: 96px; }