/* ==========================================================================
   ABORNTECH — service-detail.css
   Shared by all 9 service pages (hospital-management, school-management,
   custom-erp, custom-saas, website, webapp, mobile-app, seo, content).
   ========================================================================== */

/* ---- Feature grid ---- */
.feat-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:1.4rem;}
.feat-card .icon-lg{color:var(--accent); margin-bottom:1rem;}
.feat-card h3{font-size:1rem; margin-bottom:.5rem;}
.feat-card p{font-size:.87rem; color:var(--text-muted); line-height:1.65;}
@media (max-width:900px){.feat-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:560px){.feat-grid{grid-template-columns:1fr;}}

/* ---- Modules checklist (HMS / SMS) ---- */
.modules-section{background:var(--surface);}
.modules-grid{display:grid; grid-template-columns:repeat(4, 1fr); gap:.9rem;}
.mod-item{
  display:flex; align-items:center; gap:.7rem;
  background:var(--bg); border:1px solid var(--border); border-radius:var(--r-sm);
  padding:1rem 1.2rem; font-size:.88rem; font-weight:500;
}
.mod-item .icon{width:1.05rem; height:1.05rem; color:var(--accent); flex-shrink:0;}
@media (max-width:900px){.modules-grid{grid-template-columns:repeat(2, 1fr);}}
@media (max-width:560px){.modules-grid{grid-template-columns:1fr;}}

/* ---- Numbered steps (process) ---- */
.steps-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:1.4rem;}
.step-card{position:relative; padding-top:2.5rem;}
.step-card .step-num{
  position:absolute; top:1.4rem; right:1.6rem;
  font-family:var(--font-display); font-weight:600; font-size:2.2rem; color:var(--ink-100);
}
.step-card .icon-lg{color:var(--accent); margin-bottom:1rem;}
.step-card h3{font-size:1rem; margin-bottom:.5rem;}
.step-card p{font-size:.87rem; color:var(--text-muted); line-height:1.6;}
@media (max-width:900px){.steps-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:560px){.steps-grid{grid-template-columns:1fr;}}

/* ---- Tiers (HMS / SMS quote-based plans) ---- */
.tiers-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:1.4rem;}
.tier-card{display:flex; flex-direction:column;}
.tier-card.is-featured{background:var(--ink-950); color:#fff; border-color:var(--ink-950);}
.tier-card .badge{margin-bottom:1rem; align-self:flex-start;}
.tier-name{font-family:var(--font-display); font-weight:600; font-size:1.3rem; margin-bottom:.6rem;}
.tier-note{font-size:.86rem; color:var(--text-muted); line-height:1.6; margin-bottom:1.6rem;}
.tier-card.is-featured .tier-note{color:rgba(255,255,255,.65);}
.tier-features{margin-bottom:1.8rem; flex-grow:1;}
.tier-features li{
  font-size:.87rem; padding-block:.55rem; border-bottom:1px solid var(--border);
  display:flex; gap:.6rem; align-items:flex-start;
}
.tier-card.is-featured .tier-features li{border-color:rgba(255,255,255,.12); color:rgba(255,255,255,.85);}
.tier-features li .icon{width:1rem; height:1rem; color:var(--accent); flex-shrink:0; margin-top:.15rem;}
.tier-card.is-featured .tier-features li .icon{color:var(--bronze);}
@media (max-width:900px){.tiers-grid{grid-template-columns:1fr;}}

/* ---- Industry tags ---- */
.industry-tags{display:flex; flex-wrap:wrap; gap:.7rem;}
.industry-tags a{
  display:inline-flex; align-items:center; padding:.55rem 1.1rem; border-radius:var(--r-pill);
  background:var(--surface); border:1px solid var(--border); font-size:.85rem; font-weight:500;
  transition:border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.industry-tags a:hover{border-color:var(--accent); color:var(--accent);}

/* ---- FAQ (native <details>/<summary>) ---- */
.faq-list{max-width:760px; margin-inline:auto;}
.faq-item{border-bottom:1px solid var(--border); padding-block:.4rem;}
.faq-item summary{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1.2rem 0; font-weight:600; font-size:1rem; cursor:pointer; list-style:none;
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary .icon{color:var(--accent); transition:transform var(--dur-fast) var(--ease); flex-shrink:0;}
.faq-item[open] summary .icon{transform:rotate(180deg);}
.faq-item p{font-size:.92rem; color:var(--text-muted); line-height:1.75; padding-bottom:1.3rem; max-width:65ch;}