/* ========================================================
   InfoSecPanda — Services Page Styles
   ======================================================== */

/* --- Service Cards --- */
.svc-list { display:flex; flex-direction:column; gap:12px; }
.svc-card {
  display:grid; grid-template-columns:52px 1fr auto;
  gap:20px; align-items:start; padding:32px 28px;
  position:relative;
}
/* Accent line removed per feedback */

.svc-icon {
  width:52px; height:52px; border-radius:14px;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.svc-icon svg {
  width:22px; height:22px; fill:none; stroke-width:1.5;
  stroke-linecap:round; stroke-linejoin:round;
}
.svc-card:nth-child(1) .svc-icon { background:var(--teal-dim); border:1px solid rgba(45,212,191,.15); }
.svc-card:nth-child(1) .svc-icon svg { stroke:var(--teal); filter:drop-shadow(0 0 6px rgba(45,212,191,.3)); }
.svc-card:nth-child(2) .svc-icon { background:var(--amber-dim); border:1px solid var(--amber-border); }
.svc-card:nth-child(2) .svc-icon svg { stroke:var(--amber); filter:drop-shadow(0 0 6px rgba(240,160,48,.3)); }
.svc-card:nth-child(3) .svc-icon { background:var(--violet-dim); border:1px solid var(--violet-border); }
.svc-card:nth-child(3) .svc-icon svg { stroke:var(--violet); filter:drop-shadow(0 0 6px rgba(167,139,250,.3)); }
.svc-card:nth-child(4) .svc-icon { background:var(--red-dim); border:1px solid var(--red-border); }
.svc-card:nth-child(4) .svc-icon svg { stroke:var(--red); filter:drop-shadow(0 0 6px rgba(239,68,68,.3)); }

.svc-body { min-width:0; }
.svc-title { font-size:1.1rem; font-weight:600; margin-bottom:3px; }
.svc-tag {
  font-family:var(--font-mono); font-size:.75rem; color:var(--text-dim);
  letter-spacing:.04em; display:block; margin-bottom:10px;
}
.svc-desc { font-size:.9rem; color:var(--text-secondary); line-height:1.65; margin-bottom:14px; }
.svc-pills { display:flex; flex-wrap:wrap; gap:6px; }
.svc-pill {
  font-family:var(--font-mono); font-size:.75rem;
  color:var(--text-secondary); background:rgba(10,16,24,.5);
  border:1px solid var(--border); padding:4px 10px; border-radius:6px;
}
.svc-action { flex-shrink:0; padding-top:2px; }

/* --- Process --- */
.process-section { padding:80px 0; }
.process-grid { display:grid; grid-template-columns:1fr 1fr; gap:32px; align-items:start; }
.steps-list { display:flex; flex-direction:column; gap:14px; }
.step-item { display:flex; gap:14px; align-items:flex-start; }
.step-num {
  width:32px; height:32px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-mono); font-size:.78rem; font-weight:600;
  color:var(--teal); background:var(--teal-dim);
  border:1px solid rgba(45,212,191,.15);
}
.step-item p {
  font-size:.9rem; color:var(--text-secondary); line-height:1.65; padding-top:5px;
}
.process-cta {
  padding:28px; display:flex; flex-direction:column; gap:18px;
}
.process-cta h4 { font-size:.95rem; font-weight:600; margin-bottom:4px; }
.process-cta p { font-size:.88rem; color:var(--text-secondary); line-height:1.6; }

/* --- FAQ --- */
.faq-section { padding:80px 0; }
.faq-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
.faq-item { padding:28px; }
.faq-item h4 { font-weight:600; font-size:.95rem; margin-bottom:8px; }
.faq-item p { color:var(--text-secondary); font-size:.88rem; line-height:1.65; }

/* --- Contact --- */
.contact-section { padding:80px 0; }
.contact-box { max-width:640px; margin:0 auto; }
.contact-box .future-card { padding:32px; }

/* --- RESPONSIVE --- */
@media (max-width:900px) {
  .svc-card { grid-template-columns:1fr; gap:14px; }
  .svc-icon { display:none; }
  .svc-action { justify-self:stretch; }
  .svc-action .btn { width:100%; justify-content:center; }
  .process-grid { grid-template-columns:1fr; }
  .faq-grid { grid-template-columns:1fr; }
}
@media (max-width:768px) {
  .page-hero { padding:80px 0 40px; }
  .svc-card { padding:24px 20px; }
  .svc-title { font-size:1.05rem; }
  .svc-desc { font-size:.9rem; }
  .process-cta { padding:24px 20px; }
  .faq-item { padding:24px 20px; }
  .faq-item h4 { font-size:.92rem; }
}
@media (max-width:480px) {
  .svc-pills { gap:4px; }
  .svc-pill { font-size:.68rem; padding:3px 8px; }
}