/* ================================================================
   Cloud Penetration Testing — page-specific styles
   Devoteam Cyber Trust / Integrity.pt
   ================================================================ */

:root {
  --cpt-red: #f8485e;
  --cpt-ink: #3c3c3a;
  --cpt-ink-2: #1a1817;
  --cpt-mint: #d7ebe7;
  --cpt-surface: #f8f9fa;
  --cpt-border: #e4e4e2;
  --cpt-line: #ececea;
  --cpt-fw-regular: 400;
  --cpt-fw-medium: 500;
  --cpt-fw-bold: 700;
  --cpt-ease: cubic-bezier(.25, .46, .45, .94);
}

/* ── Breadcrumb ─────────────────────────────────────────── */
.cpt-breadcrumb {
  color: #3c3c3a;
  padding-top: 50px;
  font-weight: 700;
  text-align: left;
  font-size: 13px;
}
.cpt-breadcrumb a { color: #3c3c3a; }
.cpt-breadcrumb a:hover { color: var(--cpt-red); }

/* ── Hero ──────────────────────────────────────────────── */
.cpt-hero {
  position: relative;
  min-height: 480px;
  background-size: cover;
  background-position: center;
  color: #fff;
  display: flex;
  align-items: center;
}
.cpt-hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(20,18,18,.85) 0%, rgba(35,31,32,.65) 55%, rgba(248,72,94,.4) 100%);
}
.cpt-hero__content {
  position: relative;
  z-index: 1;
  padding: 110px 370px 80px;
  width: 100%;
}
.cpt-hero__crumb {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: rgba(255,255,255,.75);
  margin: 0 0 22px;
}
.cpt-hero__crumb a { color: rgba(255,255,255,.75); }
.cpt-hero__crumb a:hover { color: #fff; }
.cpt-hero__crumb .sep { margin: 0 8px; opacity: .5; }
.cpt-hero__title {
  font-size: 58px;
  line-height: 1.05;
  font-weight: 700;
  margin: 0 0 18px;
  max-width: 860px;
  color: #fff;
}
.cpt-hero__title .red { color: var(--cpt-red); }
.cpt-hero__tagline {
  font-size: 20px;
  line-height: 1.45;
  max-width: 680px;
  margin: 0 0 34px;
  color: rgba(255,255,255,.9);
  font-weight: 400;
}
.cpt-hero__tagline strong { font-weight: 700; color: #fff; }
.cpt-hero__actions { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }

/* Provider strip */
.cpt-hero__strip {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,.45);
  border-top: 1px solid rgba(255,255,255,.12);
  padding: 15px 0;
  z-index: 1;
}
.cpt-hero__strip-inner {
  display: flex;
  align-items: center;
  gap: 32px;
  flex-wrap: wrap;
  font-size: 12px;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.cpt-hero__strip .label { font-weight: 700; color: rgba(255,255,255,.55); }
.cpt-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 700;
  color: #fff;
}
.cpt-chip .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cpt-red);
  flex-shrink: 0;
}

/* ── Section shared ────────────────────────────────────── */
.cpt-section { padding: 80px 0; }
.cpt-section--alt { background: var(--cpt-surface); }
.cpt-section--ink { background: var(--cpt-ink-2); color: #fff; }
.cpt-section--mint { background: var(--cpt-mint); }

.cpt-eyebrow {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .17em;
  color: var(--cpt-red);
  margin: 0 0 12px;
}
.cpt-eyebrow--light { color: var(--cpt-red); }
.cpt-hr {
  width: 110px;
  height: 1px;
  background: var(--cpt-ink);
  border: 0;
  margin: 18px 0 24px;
}
.cpt-hr--light { background: rgba(255,255,255,.4); }
.cpt-h2 {
  font-size: 34px;
  line-height: 1.2;
  font-weight: 400;
  color: var(--cpt-ink-2);
  margin: 0;
}
.cpt-h2 strong { font-weight: 700; }
.cpt-lead {
  font-size: 17px;
  line-height: 1.65;
  color: var(--cpt-ink);
  max-width: 720px;
}

/* ── Intro split ───────────────────────────────────────── */
.cpt-intro { padding: 80px 0 60px; }
.cpt-intro__grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 70px;
  align-items: start;
}
.cpt-intro__copy p { font-size: 16px; line-height: 1.7; color: var(--cpt-ink); margin: 0 0 16px; }
.cpt-intro__copy p strong { color: var(--cpt-ink-2); font-weight: 700; }
.cpt-intro__quote {
  border-left: 3px solid var(--cpt-red);
  padding: 4px 0 4px 20px;
  margin: 24px 0 0;
  font-size: 15px;
  color: var(--cpt-ink-2);
  font-weight: 500;
  line-height: 1.55;
}

/* Stats card */
.cpt-stats-card {
  background: #fff;
  border-radius: 3px;
  box-shadow: 0 4px 20px rgba(0,0,0,.08);
  padding: 32px;
  border-top: 4px solid var(--cpt-red);
}
.cpt-stats-card__head { font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--cpt-red); margin: 0 0 4px; }
.cpt-stats-card__title { font-size: 20px; font-weight: 700; color: var(--cpt-ink-2); margin: 0 0 22px; line-height: 1.3; }
.cpt-stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 24px; }
.cpt-stat__n { font-size: 38px; font-weight: 700; color: var(--cpt-ink-2); line-height: 1; margin: 0 0 6px; letter-spacing: -.02em; }
.cpt-stat__l { font-size: 12px; line-height: 1.5; color: var(--cpt-ink); margin: 0; }

/* ── Risk chips grid ───────────────────────────────────── */
.cpt-risks-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 70px;
  align-items: start;
}
.cpt-risks-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 8px; }
.cpt-risk {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid var(--cpt-border);
  border-radius: 3px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--cpt-ink-2);
  transition: border-color .22s var(--cpt-ease), transform .22s var(--cpt-ease), box-shadow .22s var(--cpt-ease);
}
.cpt-risk:hover { border-color: var(--cpt-red); transform: translateY(-2px); box-shadow: 0 4px 10px rgba(0,0,0,.06); }
.cpt-risk__num { font-size: 11px; font-weight: 700; color: var(--cpt-red); min-width: 20px; padding-top: 1px; letter-spacing: .04em; }
.cpt-risk__label { font-weight: 500; }

.cpt-risks-note {
  margin-top: 26px;
  padding: 20px;
  background: var(--cpt-mint);
  border-radius: 3px;
  font-size: 14px;
  color: var(--cpt-ink-2);
  line-height: 1.6;
}
.cpt-risks-note strong { font-weight: 700; }

.cpt-risks-label { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--cpt-ink-2); margin: 0 0 14px; }

/* ── Frameworks (dark) ─────────────────────────────────── */
.cpt-fw-section { background: var(--cpt-ink-2); padding: 80px 0; color: #fff; }
.cpt-fw-section .cpt-h2 { color: #fff; }
.cpt-fw-lead { font-size: 15px; color: rgba(255,255,255,.75); max-width: 700px; margin: 16px 0 34px; line-height: 1.7; }
.cpt-fw-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.cpt-fw-card {
  border: 1px solid rgba(255,255,255,.15);
  padding: 20px;
  border-radius: 3px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  transition: border-color .22s var(--cpt-ease), background .22s var(--cpt-ease);
}
.cpt-fw-card:hover { border-color: var(--cpt-red); background: rgba(248,72,94,.07); }
.cpt-fw-card .tag { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--cpt-red); font-weight: 700; }
.cpt-fw-card .name { font-size: 14px; font-weight: 700; color: #fff; line-height: 1.3; }
.cpt-fw-card .desc { font-size: 12px; color: rgba(255,255,255,.62); line-height: 1.5; margin: 0; }

.cpt-compliance {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,.1);
}
.cpt-compliance .label { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.5); font-weight: 700; margin-right: 6px; }
.cpt-pill {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border-radius: 100px;
  border: 1px solid rgba(255,255,255,.3);
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  letter-spacing: .04em;
}

/* ── Domain cards ──────────────────────────────────────── */
.cpt-domains-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 44px; }
.cpt-domain {
  background: #fff;
  border-radius: 3px;
  border: 1px solid var(--cpt-border);
  padding: 28px 24px;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: transform .22s var(--cpt-ease), box-shadow .22s var(--cpt-ease), border-color .22s var(--cpt-ease);
  overflow: hidden;
}
.cpt-domain:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0,0,0,.07); border-color: transparent; }
.cpt-domain::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--cpt-red);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .3s var(--cpt-ease);
}
.cpt-domain:hover::before { transform: scaleY(1); }
.cpt-domain__head { display: flex; align-items: baseline; gap: 12px; }
.cpt-domain__num { font-size: 12px; font-weight: 700; color: var(--cpt-red); letter-spacing: .12em; }
.cpt-domain__title { font-size: 18px; font-weight: 700; color: var(--cpt-ink-2); margin: 0; line-height: 1.25; }
.cpt-domain__lead { font-size: 13px; color: var(--cpt-ink); margin: 0; line-height: 1.55; }
.cpt-domain ul { list-style: none; padding: 0; margin: 4px 0 0; }
.cpt-domain ul li {
  position: relative;
  padding-left: 16px;
  font-size: 13px;
  color: var(--cpt-ink);
  margin: 0 0 7px;
  line-height: 1.45;
}
.cpt-domain ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 6px;
  height: 6px;
  background: var(--cpt-red);
  border-radius: 50%;
}

/* ── Testing approaches ────────────────────────────────── */
.cpt-approaches-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-left: 1px solid var(--cpt-border);
  margin-top: 44px;
}
.cpt-approach {
  border-right: 1px solid var(--cpt-border);
  border-top: 1px solid var(--cpt-border);
  border-bottom: 1px solid var(--cpt-border);
  padding: 32px 24px;
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: background .25s var(--cpt-ease);
}
.cpt-approach:hover { background: var(--cpt-surface); }
.cpt-approach__tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cpt-red);
}
.cpt-sq { width: 10px; height: 10px; border-radius: 1px; display: inline-block; }
.cpt-sq--filled { background: var(--cpt-red); }
.cpt-sq--outline { background: transparent; border: 1.5px solid var(--cpt-red); }
.cpt-sq--half { background: linear-gradient(90deg, var(--cpt-red) 50%, transparent 50%); border: 1.5px solid var(--cpt-red); }
.cpt-sq--diag { background: repeating-linear-gradient(45deg, var(--cpt-red) 0 2px, transparent 2px 4px); border: 1.5px solid var(--cpt-red); }
.cpt-approach__name { font-size: 22px; font-weight: 700; color: var(--cpt-ink-2); margin: 0; line-height: 1.2; }
.cpt-approach__body { font-size: 13px; color: var(--cpt-ink); margin: 0; line-height: 1.55; }

/* ── Deliverables + Benefits ───────────────────────────── */
.cpt-deliver-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; }
.cpt-deliver-col h3 {
  font-size: 24px;
  font-weight: 400;
  color: var(--cpt-ink-2);
  margin: 0 0 4px;
  line-height: 1.25;
}
.cpt-deliver-col h3 strong { font-weight: 700; }
.cpt-deliver-list { list-style: none; padding: 0; margin: 22px 0 0; }
.cpt-deliver-list li {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  padding: 13px 0;
  border-bottom: 1px solid var(--cpt-line);
  font-size: 14px;
  color: var(--cpt-ink-2);
}
.cpt-deliver-list li:last-child { border-bottom: none; }
.cpt-deliver-list .ic {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(248,72,94,.1);
  color: var(--cpt-red);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  margin-top: -1px;
}
.cpt-deliver-list .ic--mint { background: var(--cpt-mint); color: var(--cpt-ink-2); }
.cpt-deliver-list .item-text { flex: 1; }
.cpt-deliver-list .item-text strong { display: block; font-weight: 700; color: var(--cpt-ink-2); margin: 0 0 2px; }
.cpt-deliver-list .item-text span { font-size: 12px; color: var(--cpt-ink); }
.cpt-badge {
  font-size: 10px;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--cpt-red);
  font-weight: 700;
  border: 1px solid var(--cpt-red);
  border-radius: 100px;
  padding: 3px 9px;
  align-self: center;
  flex-shrink: 0;
}

/* ── Closing CTA (mint) ────────────────────────────────── */
.cpt-close { background: #d7ebe7; padding: 80px 0; }
.cpt-close h2 { font-size: 38px; line-height: 1.15; color: #1a1817; font-weight: 400; margin: 0; }
.cpt-close h2 strong { font-weight: 700; }
.cpt-close p { font-size: 15px; line-height: 1.7; color: var(--cpt-ink); margin: 16px 0 0; }
.cpt-close__actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 26px; }

.cpt-close-card {
  background: #fff;
  border-radius: 3px;
  padding: 34px;
  box-shadow: 0 6px 24px rgba(0,0,0,.08);
  border-top: 4px solid var(--cpt-red);
}
.cpt-close-card h4 { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--cpt-red); margin: 0 0 10px; }
.cpt-close-card p { margin: 0 0 18px; font-size: 14px; color: var(--cpt-ink); line-height: 1.6; }
.cpt-close-card ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 11px; }
.cpt-close-card li { font-size: 13px; color: var(--cpt-ink-2); display: flex; gap: 10px; align-items: flex-start; }
.cpt-close-card li::before { content: "→"; color: var(--cpt-red); font-weight: 700; flex-shrink: 0; }

/* ── Responsive ────────────────────────────────────────── */

/* Bring in the horizontal padding before Bootstrap's container narrows */
@media (max-width: 1300px) {
  .cpt-hero__content { padding-left: 20px; padding-right: 20px; }
}

@media (max-width: 1024px) {
  .cpt-hero__title { font-size: 44px; }
  .cpt-hero__content { padding-top: 70px; padding-left: 20px; padding-right: 20px; padding-bottom: 50px; }
  .cpt-intro__grid { grid-template-columns: 1fr; gap: 40px; }
  .cpt-fw-grid { grid-template-columns: repeat(2, 1fr); }
  .cpt-domains-grid { grid-template-columns: 1fr 1fr; }
  .cpt-approaches-grid { grid-template-columns: 1fr 1fr; }
  .cpt-risks-layout { grid-template-columns: 1fr; gap: 40px; }
  .cpt-deliver-grid { grid-template-columns: 1fr; gap: 44px; }
  .cpt-h2 { font-size: 28px; }
}

@media (max-width: 767px) {
  .cpt-hero { min-height: 360px; }
  .cpt-hero__title { font-size: 34px; }
  .cpt-hero__tagline { font-size: 16px; }
  .cpt-hero__content { padding-top: 50px; padding-bottom: 36px; }
  .cpt-hero__strip-inner { gap: 12px; font-size: 11px; }
  .cpt-hero__strip .label { display: none; }
  .cpt-domains-grid { grid-template-columns: 1fr; }
  .cpt-approaches-grid { grid-template-columns: 1fr 1fr; }
  .cpt-fw-grid { grid-template-columns: 1fr 1fr; }
  .cpt-risks-grid { grid-template-columns: 1fr; }
  .cpt-section { padding: 56px 0; }
  .cpt-close { padding: 56px 0; }
  .cpt-close h2 { font-size: 28px; }
  .cpt-h2 { font-size: 24px; }
  .cpt-stats-grid { grid-template-columns: 1fr 1fr; gap: 16px; }
  .cpt-close-card { padding: 24px; }
}

@media (max-width: 480px) {
  .cpt-hero { min-height: 300px; }
  .cpt-hero__title { font-size: 28px; }
  .cpt-hero__content { padding-top: 40px; padding-bottom: 28px; }
  .cpt-approaches-grid { grid-template-columns: 1fr; }
  .cpt-fw-grid { grid-template-columns: 1fr; }
  .cpt-close h2 { font-size: 24px; }
  .cpt-stats-grid { grid-template-columns: 1fr; }
}