
.service-detail-main {
  padding: 34px 0 80px;
}
.breadcrumb {
  display:flex; gap:8px; flex-wrap:wrap; align-items:center; color:rgba(255,255,255,.62); font-size:.94rem; margin-bottom:22px;
}
.breadcrumb a { color:rgba(255,255,255,.82); }
.detail-hero {
  display:grid; grid-template-columns:minmax(320px, 1.05fr) minmax(300px, .95fr); gap:28px; align-items:stretch; margin-bottom:32px;
}
.detail-visual,
.detail-summary,
.detail-block,
.related-services,
.database-note {
  background: rgba(9,24,45,.76);
  border:1px solid rgba(255,255,255,.08);
  border-radius: 28px;
  box-shadow: 0 22px 50px rgba(0,0,0,.18);
}
.detail-visual { overflow:hidden; }
.detail-visual img { width:100%; height:100%; display:block; object-fit:cover; min-height:320px; }
.detail-summary { padding:30px; }
.detail-tag { display:inline-flex; padding:8px 14px; border-radius:999px; background:rgba(255,181,58,.12); color:#ffd36a; font-weight:800; letter-spacing:.08em; text-transform:uppercase; font-size:.75rem; margin-bottom:16px; }
.detail-summary h1 { margin:0 0 14px; font-size: clamp(2rem, 4vw, 3.3rem); line-height:1.08; }
.detail-summary .lead { font-size:1.05rem; color:rgba(255,255,255,.82); }
.detail-meta { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:14px; margin-top:24px; }
.detail-meta .pill { padding:14px 16px; border-radius:16px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); color:rgba(255,255,255,.84); font-size:.94rem; }
.detail-grid { display:grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap:22px; }
.detail-block { padding:26px; }
.detail-block h2 { margin:0 0 16px; font-size:1.35rem; }
.detail-block p { color:rgba(255,255,255,.78); }
.detail-list { margin:0; padding-left:18px; display:grid; gap:12px; color:rgba(255,255,255,.84); }
.detail-list li::marker { color:#ffd36a; }
.related-services, .database-note { padding:26px; margin-top:24px; }
.related-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin-top:16px; }
.related-item { display:block; padding:16px; border-radius:16px; border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.03); color:rgba(255,255,255,.88); text-decoration:none; min-height:110px; }
.related-item strong { display:block; margin-bottom:8px; }
.database-note code { color:#ffd36a; background:rgba(255,255,255,.04); padding:2px 6px; border-radius:6px; }
.back-cta { display:flex; gap:12px; flex-wrap:wrap; margin-top:26px; }
@media (max-width: 1080px) { .related-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width: 880px) {
  .detail-hero, .detail-grid { grid-template-columns:1fr; }
  .detail-meta { grid-template-columns:1fr; }
}
@media (max-width: 540px) {
  .detail-summary, .detail-block, .related-services, .database-note { padding:20px; border-radius:22px; }
  .related-grid { grid-template-columns:1fr; }
}
