:root{--brand:#d00000;--ink:#111;--muted:#6c757d}
.opex-cs{color:var(--ink);font-family:Montserrat,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}
.opex-cs .hero{position:relative;overflow:hidden;border-radius:16px;background:#0b0f19;color:#fff;padding:70px 24px;text-align:center;margin:24px 0}
.opex-cs .hero::after{content:"";position:absolute;inset:-10%;background:radial-gradient(80% 60% at 50% 0%,rgba(208,0,0,.35),transparent 60%),radial-gradient(60% 50% at 90% 20%,rgba(255,255,255,.12),transparent 60%);pointer-events:none}
.opex-cs .hero h1{font-weight:800;font-size:2.2rem;margin-bottom:10px}
.opex-cs .hero p{color:#e9e9ef;margin:0 auto;max-width:760px}
.opex-cs .meta-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:24px 0 8px;flex-wrap:wrap}
.opex-cs .meta-bar .hint{color:var(--muted);font-size:.95rem}
.opex-cs .btn{padding:8px 14px;border-radius:999px;background:transparent;border:1px solid #2a2f3a;color:#2a2f3a}
.opex-cs .btn:hover{background:#151a27;color:#fff;border-color:#151a27}
.opex-cs .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media(max-width:991px){.opex-cs .cards{grid-template-columns:repeat(2,1fr)}}
@media(max-width:575px){.opex-cs .cards{grid-template-columns:1fr}}
.opex-cs .cardx{background:#fff;border:1px solid #ececf0;border-radius:0;overflow:hidden;box-shadow:0 8px 24px rgba(0,0,0,.10);transition:transform .25s ease,box-shadow .25s ease;position:relative;isolation:isolate}
.opex-cs .cardx::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.5);opacity:0;transition:opacity .3s ease;z-index:1}
.opex-cs .cardx:hover{transform:translateY(-6px);box-shadow:0 14px 28px rgba(0,0,0,.1)}
.opex-cs .thumb{position:relative;padding-top:62%;overflow:hidden;background:#efeff3}
.opex-cs .thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.opex-cs .cardx:hover .thumb img{transform:scale(1.06)}
.opex-cs .badge-cat{position:absolute;left:12px;top:12px;background:#fff;color:var(--ink);font-weight:700;font-size:.75rem;padding:6px 10px;border-radius:999px;border:1px solid #ececf0;z-index:2}
.opex-cs .body{padding:16px 16px 18px;position:relative;z-index:2}
.opex-cs .title{font-weight:700;font-size:1.05rem;margin:2px 0 6px;color:var(--ink);text-decoration:none;display:block}
.opex-cs .excerpt{color:#4b4f56;font-size:.95rem;margin-bottom:10px}
.opex-cs .meta{display:flex;gap:12px;color:var(--muted);font-size:.85rem}
.opex-cs .meta .dot::before{content:"•";margin:0 6px;color:#c5c7ce}
.opex-cs .cardx:hover::after{opacity:1}
.opex-cs .cardx:hover .title,.opex-cs .cardx:hover .excerpt,.opex-cs .cardx:hover .meta{color:#fff}
.opex-cs .cta{background:#0b0f19;color:#fff;border-radius:16px;padding:40px 24px;text-align:center;margin:60px 0 24px}
.opex-cs .btn-brand{background:var(--brand);color:#fff;border:none;padding:12px 20px;border-radius:10px}
.opex-cs .btn-brand:hover{background:#a40000;color:#fff}

/* Pagination (shared with services) */
.opex-pagination{display:flex;justify-content:center;align-items:center;gap:8px;margin:24px 0 64px;padding:0 12px}
.opex-pagination .first-page,.opex-pagination .last-page{display:inline-block;padding:10px 14px;border:1px solid #e5e7eb;border-radius:10px;color:#333;text-decoration:none}
.opex-pagination .first-page:hover,.opex-pagination .last-page:hover{border-color:#111}
.opex-pagination ul{display:flex;gap:8px;list-style:none;margin:0;padding:0}
.opex-pagination li{list-style:none}
.opex-pagination a,.opex-pagination span{display:inline-block;padding:10px 14px;border:1px solid #e5e7eb;border-radius:10px;color:#333;text-decoration:none}
.opex-pagination .current{background:#111;color:#fff;border-color:#111}
.opex-pagination a:hover{border-color:#111}
@media (max-width:480px){
  .opex-pagination{gap:6px}
  .opex-pagination a,.opex-pagination span,.opex-pagination .first-page,.opex-pagination .last-page{padding:8px 10px;border-radius:8px}
}


/* Make entire card clickable for shortcodes */
.opex-cs .cardx .card-link{position:absolute;inset:0;z-index:3;text-indent:-9999px;background:transparent}

/* Style variants for shortcodes grid */
.opex-cs .cards.style-1 .cardx{box-shadow:0 8px 24px rgba(0,0,0,.10);border-color:#ececf0}
.opex-cs .cards.style-1 .cardx:hover{box-shadow:0 14px 28px rgba(0,0,0,.12)}

.opex-cs .cards.style-2 .cardx{box-shadow:none;border-color:#e5e7eb}
.opex-cs .cards.style-2 .cardx:hover{transform:translateY(-2px);border-color:#111;box-shadow:0 6px 16px rgba(0,0,0,.08)}
.opex-cs .cards.style-2 .cardx::after{display:none}

.opex-cs .cards.style-3 .cardx{border-color:transparent;box-shadow:0 10px 26px rgba(16,16,20,.2)}
.opex-cs .cards.style-3 .thumb::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 40%, rgba(0,0,0,.55) 100%);z-index:1}
.opex-cs .cards.style-3 .body{position:absolute;left:0;right:0;bottom:0;z-index:2;background:transparent}
.opex-cs .cards.style-3 .title,.opex-cs .cards.style-3 .excerpt,.opex-cs .cards.style-3 .meta{color:#fff}
.opex-cs .cards.style-3 .cardx:hover::after{opacity:0}