/* Page: Breached credentials monitoring */
.pg-bcm { --bcm-img: url("/wp-content/themes/dexpose/assets/img/p/darkweb-breaches-monitoring/"); --bcm-line: rgba(219, 215, 219, 0.51); --bcm-muted: rgba(219, 215, 219, 0.46); }
.pg-bcm h2 { letter-spacing: 0; }
.pg-bcm p { color: rgba(219, 215, 219, 0.82); }

/* ---- 4. Dashboard features ---- */
.pg-bcm .bcm-features { padding: 90px 0 0; }
.pg-bcm .bcm-features__head { max-width: 760px; margin-bottom: 60px; }
.pg-bcm .bcm-features__head h2 { font-size: 36px; margin: 0 0 0.8em; }
.pg-bcm .bcm-features__sub { color: var(--bcm-muted); }
.pg-bcm .bcm-features__head p { margin: 0; font-size: 15.5px; line-height: 1.85; }
.pg-bcm .bcm-features__grid { gap: 48px; }
.pg-bcm .bcm-feat { display: flex; gap: 20px; align-items: flex-start; }
.pg-bcm .bcm-feat__icon { flex: none; width: 60px; height: 60px; border-radius: 20%; border: 1px solid rgba(219, 215, 219, 0.35); display: grid; place-items: center; color: #fff; font-size: 1.6rem; transition: transform 0.3s ease; }
.pg-bcm .bcm-feat:hover .bcm-feat__icon { transform: scale(1.06); }
.pg-bcm .bcm-feat h3 { font-size: 20px; margin: 4px 0 0.55em; }
.pg-bcm .bcm-feat p { margin: 0; line-height: 1.85; }

/* ---- 5. Benefit boxes (940px), background-image cards ---- */
.pg-bcm .bcm-benefits { padding: 60px 0 40px; }
.pg-bcm .bcm-benefits__in { max-width: 940px; }
.pg-bcm .bcm-benefits__intro, .pg-bcm .bcm-benefits__outro { text-align: center; margin: 0; line-height: 1.85; }
.pg-bcm .bcm-benefits__intro { margin-bottom: 48px; }
.pg-bcm .bcm-benefits__outro { margin-top: 40px; }
.pg-bcm .bcm-boxes { gap: 48px; align-items: stretch; }
.pg-bcm .bcm-box {
  min-height: 300px; border-radius: 15px; border: 1px solid var(--bcm-line); padding: 20px;
  display: flex; flex-direction: column; justify-content: flex-end; text-align: center;
  background-repeat: no-repeat; background-position: 50%; background-size: cover; overflow: hidden;
}
.pg-bcm .bcm-box--box1 { background-image: url("/wp-content/themes/dexpose/assets/img/p/darkweb-breaches-monitoring/box-bg-1.png"); }
.pg-bcm .bcm-box--bg1 { background-image: url("/wp-content/themes/dexpose/assets/img/p/darkweb-breaches-monitoring/bg-1.png"); }
.pg-bcm .bcm-box--heads { background-image: url("/wp-content/themes/dexpose/assets/img/p/darkweb-breaches-monitoring/dot-bg-1.png"); }
.pg-bcm .bcm-box--dot { background-image: url("/wp-content/themes/dexpose/assets/img/p/darkweb-breaches-monitoring/Heads-bg.png"); }
.pg-bcm .bcm-box h3 { font-size: 28px; margin: 0 0 0.5em; }
.pg-bcm .bcm-box p { margin: 0; line-height: 1.85; }
.pg-bcm .bcm-box__art { display: flex; justify-content: center; align-items: center; margin-bottom: 36px; }
.pg-bcm .bcm-box__art img { transition: transform 0.3s ease; }
.pg-bcm .bcm-box--1:hover .bcm-box__art img { transform: scale(1.2); }
.pg-bcm .bcm-box__art--pills { flex-direction: column; gap: 10px; }
.pg-bcm .bcm-box__art--pills img { width: 200px; }
.pg-bcm .bcm-box__art--circles { gap: 0; margin-bottom: 20px; }
.pg-bcm .bcm-box__art--circles img { width: 70px; }
.pg-bcm .bcm-box--3:hover .bcm-risk { transform: translateX(10px); }
.pg-bcm .bcm-box--3:hover .bcm-mitigate { transform: translateX(-10px); }

/* ---- 6. Closing CTA band ---- */
.pg-bcm .bcm-cta { padding: 40px 0 0; }
.pg-bcm .bcm-cta__band {
  border-radius: 10px; border: 5px solid rgb(25, 53, 110); padding: 70px 30px 62px;
  background: linear-gradient(180deg, rgba(15, 0, 154, 0.3) 0%, rgba(0, 90, 128, 0.32) 100%);
}
.pg-bcm .bcm-cta__band h2 { font-size: 40px; margin: 0 0 0.3em; }
.pg-bcm .bcm-cta__sub { font-size: 1.8rem; line-height: 1.6; color: rgba(219, 215, 219, 0.6); margin: 0 auto 0.6em; max-width: none; text-align: center; }
.pg-bcm .bcm-cta__band .cluster { margin-top: 1.2rem; }
.pg-bcm .bcm-btn { min-height: 0; padding: 0.8em 1.8em; font-size: 14px; font-family: var(--font); font-weight: 400; border: 2px solid rgba(219, 215, 219, 0.58); border-radius: 15px; color: #fff; background: transparent; transition: background 0.3s ease; }
.pg-bcm .bcm-btn:hover { background: rgba(219, 215, 219, 0.42); color: #fff; transform: none; }

/* ---- Responsive ---- */
@media (max-width: 1280px) {
}
@media (max-width: 1024px) {
}
@media (max-width: 760px) {
  .pg-bcm .bcm-features { padding-top: 80px; }
  .pg-bcm .bcm-features__head h2 { font-size: 32px; }
  .pg-bcm .bcm-features__grid { gap: 40px; }
  .pg-bcm .bcm-benefits { padding-top: 40px; }
  .pg-bcm .bcm-boxes { gap: 44px; }
  .pg-bcm .bcm-benefits__outro { margin-top: 40px; }
  .pg-bcm .bcm-cta__band { padding: 36px 20px 40px; }
  .pg-bcm .bcm-cta__band h2 { font-size: 30px; }
  .pg-bcm .bcm-cta__sub { font-size: 36px; line-height: 1.05; }
}
@media (max-width: 480px) {
}
@media (prefers-reduced-motion: reduce) {
}


/* ---- Hero: left-aligned light headline, lead + actions on the right, pinned; dashboard slides over it ---- */
.pg-bcm .bcm-top { position: relative; overflow: hidden; padding: 96px 0 320px; max-height: calc(100vh - var(--header-h)); box-sizing: border-box; background: var(--bg); }
.pg-bcm .bcm-top::before { content: ""; position: absolute; left: -10%; top: -30%; width: 70%; height: 120%; background: radial-gradient(closest-side, rgba(40, 113, 228, 0.26), rgba(40, 113, 228, 0) 70%); pointer-events: none; }
.pg-bcm .bcm-top__in { position: relative; display: grid; grid-template-columns: 1.25fr 0.75fr; gap: clamp(32px, 6vw, 96px); align-items: end; }
.pg-bcm .bcm-top__kicker { margin: 0 0 22px; font-size: 15px; color: rgba(219, 215, 219, 0.62); }
.pg-bcm .bcm-top__title { margin: 0; font-size: clamp(44px, 6.6vw, 92px); font-weight: 300; line-height: 0.98; letter-spacing: -0.035em; color: #fff; }
.pg-bcm .bcm-top__title b { font-weight: 300; color: rgba(255, 255, 255, 0.55); }
.pg-bcm .bcm-top__lead { margin: 0 0 28px; font-size: 16px; line-height: 1.8; color: rgba(219, 215, 219, 0.82); }
.pg-bcm .bcm-top__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.pg-bcm .bcm-top__actions .btn--ghost { border-color: rgba(219, 215, 219, 0.35); }
.pg-bcm .bcm-top__shot-m { display: none; }
.pg-bcm .bcm-top.hero--pin { position: sticky; top: 0; z-index: 0; }

/* ---- Stage: the dashboard rides over the hero on scroll ---- */
.pg-bcm .bcm-stage-wrap { position: relative; overflow: clip; overflow-clip-margin: 300px; background: var(--bg); padding-bottom: 8px; }
.pg-bcm .bcm-stage-wrap::before { content: ""; position: absolute; left: 0; right: 0; top: -120px; height: 760px; background: radial-gradient(closest-side, rgba(40, 113, 228, 0.2), rgba(40, 113, 228, 0) 70%); pointer-events: none; }
.pg-bcm .bcm-stage { position: relative; margin: -270px auto 0; width: 1200px; max-width: 100%; border-radius: 12px; border: 1px solid rgba(219, 215, 219, 0.24); overflow: hidden; background: #050c30; box-shadow: 0 70px 140px rgba(0, 0, 0, 0.62); transform: perspective(2200px) rotateX(3deg); transform-origin: 50% 0; }
.pg-bcm .bcm-stage img { width: 100%; display: block; }
.pg-bcm .bcm-stage figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 10px 16px; font-size: 12px; color: rgba(219, 215, 219, 0.6); background: linear-gradient(180deg, rgba(5, 12, 48, 0) 0%, rgba(5, 12, 48, 0.9) 60%); }

/* ---- Intro copy (same as dark web page) ---- */
.pg-bcm .bcm-intro { position: relative; padding: 110px 0 40px; }
.pg-bcm .bcm-intro__in { max-width: 1100px; }
.pg-bcm .bcm-understand { max-width: none; margin: 0; }
.pg-bcm .bcm-understand h2 { font-size: 30px; margin-bottom: 0.75em; }
.pg-bcm .bcm-understand__p { font-size: 25px; line-height: 1.2; margin: 0; color: rgba(219, 215, 219, 0.72); }
.pg-bcm .bcm-why { margin-top: 96px; gap: 48px; align-items: start; }
.pg-bcm .bcm-why__h { font-size: 34px; line-height: 1.4; margin: 0; }
.pg-bcm .bcm-why__p { margin: 0; line-height: 1.85; }

/* ---- Pipeline: vertical rail, three stages, each pairing copy with a real dashboard crop ---- */
.pg-bcm .bcm-pipe { padding: 80px 0 40px; }
.pg-bcm .bcm-pipe__head { max-width: 640px; margin-bottom: 56px; }
.pg-bcm .bcm-pipe__head h2 { font-size: 34px; margin: 0 0 0.5em; }
.pg-bcm .bcm-pipe__head p { margin: 0; line-height: 1.85; }
.pg-bcm .bcm-rail { position: relative; padding-left: 56px; }
.pg-bcm .bcm-rail::before { content: ""; position: absolute; left: 11px; top: 12px; bottom: 12px; width: 1px; background: rgba(219, 215, 219, 0.22); }
.pg-bcm .bcm-rail::after { content: ""; position: absolute; left: 11px; top: 12px; width: 1px; height: 140px; background: linear-gradient(180deg, rgba(47, 123, 255, 0) 0%, #2f7bff 50%, rgba(47, 123, 255, 0) 100%); animation: bcm-rail-run 6s linear infinite; }
@keyframes bcm-rail-run { from { transform: translateY(-140px); } to { transform: translateY(calc(var(--rail-h, 1400px))); } }
.pg-bcm .bcm-step { position: relative; display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(32px, 5vw, 80px); align-items: center; padding: 48px 0; border-top: 1px solid rgba(219, 215, 219, 0.14); }
.pg-bcm .bcm-step:first-child { border-top: 0; padding-top: 12px; }
.pg-bcm .bcm-step::before { content: ""; position: absolute; left: -50px; top: 50%; width: 11px; height: 11px; border-radius: 50%; border: 1px solid rgba(219, 215, 219, 0.5); background: var(--bg); transform: translateY(-50%); box-shadow: 0 0 0 4px var(--bg); }
.pg-bcm .bcm-step:nth-child(2)::before { background: #2f7bff; border-color: #2f7bff; box-shadow: 0 0 0 4px var(--bg), 0 0 14px rgba(47, 123, 255, 0.7); }
.pg-bcm .bcm-step__n { display: block; font-size: 13px; color: rgba(219, 215, 219, 0.55); margin-bottom: 14px; }
.pg-bcm .bcm-step h3 { font-size: 30px; font-weight: 600; margin: 0 0 0.5em; letter-spacing: -0.02em; }
.pg-bcm .bcm-step p { margin: 0; line-height: 1.85; }
.pg-bcm .bcm-step__list { list-style: none; margin: 20px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 20px; }
.pg-bcm .bcm-step__list li { font-size: 14.5px; color: rgba(219, 215, 219, 0.82); padding-left: 14px; position: relative; }
.pg-bcm .bcm-step__list li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 5px; height: 5px; border-radius: 50%; background: #2f7bff; }
.pg-bcm .bcm-shot { margin: 0; border-radius: 12px; border: 1px solid rgba(219, 215, 219, 0.22); overflow: hidden; background: #0f1218; box-shadow: 0 30px 70px rgba(0, 0, 0, 0.45); }
.pg-bcm .bcm-shot img { width: 100%; display: block; }
.pg-bcm .bcm-shot--stack { background: transparent; border: 0; box-shadow: none; display: grid; gap: 12px; }
.pg-bcm .bcm-shot--stack > span { display: block; border-radius: 10px; border: 1px solid rgba(219, 215, 219, 0.22); overflow: hidden; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4); }
.pg-bcm .bcm-shot--stack img { width: 100%; display: block; }

/* FAQ + CTA */
.pg-bcm .bcm-faq { padding: 60px 0 0; }
.pg-bcm .bcm-faq__in { max-width: 940px; }
.pg-bcm .bcm-faq h2 { font-size: 36px; text-align: center; margin: 0 0 36px; }
.pg-bcm .bcm-cta { padding-top: 60px; }

@media (max-width: 1024px) {
  .pg-bcm .bcm-top { padding: 72px 0 240px; }
  .pg-bcm .bcm-top__in { grid-template-columns: 1fr; align-items: start; }
  .pg-bcm .bcm-stage { margin-top: -200px; transform: none; }
  .pg-bcm .bcm-step { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .pg-bcm .bcm-top { padding: 40px 0 32px; max-height: none; }
  .pg-bcm .bcm-top.hero--pin { position: relative; }
  .pg-bcm .bcm-top__title { font-size: 44px; }
  .pg-bcm .bcm-top__shot-m { display: block; margin: 28px 0 0; border-radius: 10px; overflow: hidden; border: 1px solid rgba(219, 215, 219, 0.24); }
  .pg-bcm .bcm-top__shot-m img { width: 100%; display: block; }
  .pg-bcm .bcm-stage-wrap { display: none; }
  .pg-bcm .bcm-intro { padding-top: 40px; }
  .pg-bcm .bcm-understand h2 { font-size: 30px; line-height: 1.35; }
  .pg-bcm .bcm-why { margin-top: 50px; gap: 40px; }
  .pg-bcm .bcm-why__h { font-size: 30px; }
  .pg-bcm .bcm-rail { padding-left: 32px; }
  .pg-bcm .bcm-step::before { left: -26px; top: 60px; }
  .pg-bcm .bcm-step h3 { font-size: 26px; }
  .pg-bcm .bcm-step__list { grid-template-columns: 1fr; }
  .pg-bcm .bcm-faq h2 { font-size: 30px; }
}
@media (prefers-reduced-motion: reduce) { .pg-bcm .bcm-rail::after { animation: none; display: none; } }