/* =========================================================
   NASDAN — Cybersecurity page
   Dominant visual metaphor: Protection Layers
   (Identity → Applications → Infrastructure → Data → Monitoring)
   Expressed as concentric rings, not a linear pipeline.
   Extends tokens.css / main.css. Section-specific styles only.
   ========================================================= */

/* =========================================================
   1. HERO — concentric protection rings
   ========================================================= */
/* Hero background matches the Contact page's treatment exactly: same navy
   gradient, same soft dot pattern (not the previous radial spotlight
   texture), same amber glow stripe -- see .contact-hero / .contact-hero::before
   / .contact-hero-stripe in contact.css (also ported this way to
   .hwb-hero, .cli-hero and .dvo-hero on the other service pages). */
.cyb-hero {
  position: relative;
  padding-block: var(--sp-9) var(--sp-8);
  background: linear-gradient(150deg, var(--nasdan-navy) 0%, var(--nasdan-navy-700) 100%);
  overflow: hidden;
}
.cyb-hero::before {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.16) 1px, transparent 1px);
  background-size: 26px 26px;
  -webkit-mask-image: linear-gradient(150deg, rgba(0,0,0,0.9) 0%, transparent 60%);
  mask-image: linear-gradient(150deg, rgba(0,0,0,0.9) 0%, transparent 60%);
  pointer-events: none;
}
.cyb-hero-stripe {
  position: absolute; top: -10%; right: -8%; width: 46%; aspect-ratio: 1/1;
  background: radial-gradient(circle, rgba(255,193,7,0.28) 0%, rgba(255,193,7,0) 70%);
  filter: blur(6px);
}
.cyb-hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 0.9fr; gap: var(--sp-8); align-items: center; }
.cyb-hero-eyebrow { display: inline-flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-3); color: var(--nasdan-amber); }
.cyb-hero-eyebrow .eyebrow-mark { background: var(--nasdan-amber); }
.cyb-hero-headline {
  font-size: var(--fs-h1); font-weight: var(--fw-light); letter-spacing: var(--ls-tight);
  line-height: var(--lh-tight); color: var(--white); margin-bottom: var(--sp-4); max-width: 16ch;
}
.cyb-hero-lead { font-size: var(--fs-body); max-width: 48ch; margin-bottom: var(--sp-6); color: var(--paper-300); }
.cyb-hero-actions { display: flex; gap: var(--sp-3); flex-wrap: wrap; }
.cyb-hero-actions .btn-ghost-nasdan { color: var(--white); border-color: rgba(255,255,255,0.32); }
.cyb-hero-actions .btn-ghost-nasdan:hover { background: rgba(255,255,255,0.08); border-color: var(--white); }

/* --- concentric rings --- */
.cyb-layers-visual { position: relative; width: 100%; aspect-ratio: 1/1; max-width: 380px; margin-inline: auto; display: flex; align-items: center; justify-content: center; }
.cyb-ring {
  position: absolute; border-radius: 50%; border: 1px solid rgba(255,255,255,0.16);
  display: flex; align-items: flex-start; justify-content: center; padding-top: 14px;
}
.cyb-ring-5 { width: 100%; height: 100%; border-color: rgba(255,255,255,0.12); }
.cyb-ring-4 { width: 80%; height: 80%; border-color: rgba(255,255,255,0.16); }
.cyb-ring-3 { width: 60%; height: 60%; border-color: rgba(255,255,255,0.22); }
.cyb-ring-2 { width: 40%; height: 40%; border-color: rgba(255,193,7,0.35); }
.cyb-ring-1 {
  width: 20%; height: 20%; border-color: rgba(255,193,7,0.6);
  background: radial-gradient(circle, rgba(255,193,7,0.22) 0%, rgba(255,193,7,0.02) 100%);
  align-items: center; padding-top: 0;
  box-shadow: 0 0 30px rgba(255,193,7,0.2);
}
.cyb-ring-label { font-size: 0.6875rem; font-weight: var(--fw-medium); color: var(--paper-300); letter-spacing: var(--ls-wide); white-space: nowrap; }
.cyb-ring-1 .cyb-ring-label { color: var(--white); font-weight: var(--fw-semibold); font-size: 0.625rem; }

/* =========================================================
   2. PROOF BAND
   ========================================================= */
.cyb-proof { padding-block: var(--sp-7); background: var(--cloud); border-bottom: 1px solid var(--ink-100); }
.cyb-proof-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-6); }
.cyb-proof-item { display: flex; flex-direction: column; gap: 0.35rem; border-left: 1px solid var(--ink-200); padding-left: var(--sp-4); }
.cyb-proof-item:first-child { border-left: none; padding-left: 0; }
.cyb-proof-item strong { font-size: 1.0625rem; font-weight: var(--fw-medium); color: var(--nasdan-navy); }
.cyb-proof-item span { font-size: 0.8438rem; color: var(--ink-500); }

/* =========================================================
   3. WHAT WE BUILD — bordered numbered grid
   ========================================================= */
.cyb-build { padding-block: var(--section-pad-y); }
.cyb-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); margin-top: var(--sp-7);
  border-top: 1px solid var(--ink-200); border-left: 1px solid var(--ink-200);
}
.cyb-grid-item { padding: var(--sp-6); border-right: 1px solid var(--ink-200); border-bottom: 1px solid var(--ink-200); transition: background-color var(--dur-base) var(--ease-out); }
.cyb-grid-item:hover { background: var(--cloud); }
.cyb-grid-num { display: block; font-size: 0.75rem; font-weight: var(--fw-semibold); color: var(--ink-400); letter-spacing: var(--ls-wide); margin-bottom: var(--sp-3); }
.cyb-grid-item h3 { font-size: 1.0625rem; font-weight: var(--fw-medium); color: var(--ink-900); margin-bottom: var(--sp-2); }
.cyb-grid-item p { color: var(--ink-500); font-size: 0.9375rem; }

/* --- shared inline CTA, reused across sections for conversion touchpoints --- */
.cyb-inline-cta {
  margin-top: var(--sp-7); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--sp-3);
  border: 1px solid var(--ink-200); border-radius: var(--radius-md); padding: var(--sp-5) var(--sp-6);
}
.cyb-inline-cta span:first-child { font-size: 0.9375rem; color: var(--ink-700); font-weight: var(--fw-medium); }
.cyb-inline-cta--dark { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.14); }
.cyb-inline-cta--dark span:first-child { color: var(--white); }

/* =========================================================
   3b. HOW WE TEST — penetration testing, terminal-log visual
   ========================================================= */
.cyb-testing { padding-block: var(--section-pad-y); background: var(--cloud); }
.cyb-testing-grid { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: var(--sp-8); align-items: center; }
.cyb-testing-copy .text-lead { margin-bottom: var(--sp-6); }

.cyb-test-steps { display: flex; flex-wrap: wrap; gap: var(--sp-2); list-style: none; padding: 0; margin: 0 0 var(--sp-7); }
.cyb-test-steps li {
  display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.8438rem; font-weight: var(--fw-medium);
  color: var(--ink-700); background: var(--white); border: 1px solid var(--ink-200); border-radius: 999px; padding: 0.45rem 0.9rem 0.45rem 0.6rem;
}
.cyb-test-steps li span {
  display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%;
  background: var(--nasdan-navy); color: var(--nasdan-amber); font-size: 0.6875rem; font-weight: var(--fw-semibold);
}

.cyb-testing .cyb-inline-cta { margin-top: 0; background: var(--white); }

.cyb-terminal {
  background: #0d1220; border-radius: var(--radius-lg); border: 1px solid rgba(255,255,255,0.08);
  overflow: hidden; box-shadow: 0 30px 60px -30px rgba(11,22,63,0.4);
}
.cyb-terminal-head { display: flex; align-items: center; gap: 7px; padding: var(--sp-3) var(--sp-4); background: #131a2c; border-bottom: 1px solid rgba(255,255,255,0.06); }
.cyb-terminal-dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,0.16); }
.cyb-terminal-dot:first-child { background: #ff5f56; }
.cyb-terminal-dot:nth-child(2) { background: #ffbd2e; }
.cyb-terminal-dot:nth-child(3) { background: #27c93f; }
.cyb-terminal-title { margin-left: var(--sp-2); font-size: 0.75rem; color: rgba(255,255,255,0.4); font-family: 'SFMono-Regular', Consolas, monospace; }
.cyb-terminal-body { padding: var(--sp-5); display: flex; flex-direction: column; gap: 0.7rem; font-family: 'SFMono-Regular', Consolas, monospace; font-size: 0.8125rem; }
.cyb-term-line { color: rgba(255,255,255,0.82); line-height: var(--lh-relaxed); }
.cyb-term-line--muted { color: rgba(255,255,255,0.38); padding-left: 1.2rem; }
.cyb-term-prompt { color: var(--nasdan-amber); margin-right: 0.6rem; }
.cyb-term-tag { display: inline-block; font-size: 0.6875rem; font-weight: var(--fw-semibold); letter-spacing: var(--ls-wide); border-radius: 4px; padding: 0.15rem 0.5rem; margin-right: 0.6rem; }
.cyb-term-tag--warn { background: rgba(255,193,7,0.16); color: var(--nasdan-amber); }
.cyb-term-tag--crit { background: rgba(255,90,90,0.16); color: #ff7a7a; }
.cyb-term-tag--ok { background: rgba(39,201,63,0.16); color: #4ade80; }
.cyb-term-cursor { display: inline-block; width: 7px; height: 15px; background: var(--nasdan-amber); animation: cybCursorBlink 1s step-end infinite; vertical-align: middle; }
@keyframes cybCursorBlink { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }

/* =========================================================
   4. INCIDENT RESPONSE TIMELINE — navy section
   ========================================================= */
.cyb-response { padding-block: var(--section-pad-y); background: var(--nasdan-navy); }
.cyb-timeline { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--sp-5); margin-top: var(--sp-8); position: relative; }
.cyb-timeline::before { content: ""; position: absolute; top: 6px; left: 4%; right: 4%; height: 1px; background: rgba(255,255,255,0.16); }
.cyb-timeline-item { position: relative; padding-top: var(--sp-6); }
.cyb-timeline-time { position: absolute; top: -22px; left: 0; font-size: 0.6875rem; font-weight: var(--fw-semibold); color: var(--nasdan-amber); letter-spacing: var(--ls-wide); }
.cyb-timeline-dot { position: absolute; top: 0; left: 0; width: 12px; height: 12px; border-radius: 50%; background: var(--nasdan-navy); border: 2px solid var(--nasdan-amber); z-index: 1; }
.cyb-timeline-item--final .cyb-timeline-dot { background: var(--nasdan-amber); }
.cyb-timeline-copy h3 { font-size: 0.9375rem; font-weight: var(--fw-medium); color: var(--white); margin-bottom: 0.4rem; }
.cyb-timeline-copy p { font-size: 0.8438rem; color: var(--paper-300); line-height: var(--lh-relaxed); }

/* =========================================================
   4b. COMPLIANCE & STANDARDS — badge grid
   ========================================================= */
.cyb-compliance { padding-block: var(--section-pad-y); }
.cyb-compliance-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); margin-top: var(--sp-7); }
.cyb-compliance-badge {
  display: flex; align-items: flex-start; gap: var(--sp-4); border: 1px solid var(--ink-200); border-radius: var(--radius-md);
  padding: var(--sp-5); transition: border-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.cyb-compliance-badge:hover { border-color: var(--nasdan-amber); transform: translateY(-3px); }
.cyb-compliance-icon {
  flex: none; display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: var(--radius-sm);
  background: var(--nasdan-amber); color: var(--nasdan-navy);
}
.cyb-compliance-icon svg { width: 21px; height: 21px; }
.cyb-compliance-badge strong { display: block; font-size: 0.9375rem; font-weight: var(--fw-medium); color: var(--ink-900); margin-bottom: 0.25rem; }
.cyb-compliance-badge span { font-size: 0.8438rem; color: var(--ink-500); }

/* =========================================================
   4c. ENGAGEMENT MODELS — on-demand vs managed
   ========================================================= */
.cyb-engage { padding-block: var(--section-pad-y); background: var(--cloud); }
.cyb-engage-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-6); margin-top: var(--sp-7); }
.cyb-engage-card {
  background: var(--white); border: 1px solid var(--ink-200); border-radius: var(--radius-lg); padding: var(--sp-7);
  display: flex; flex-direction: column; gap: var(--sp-3);
  transition: border-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.cyb-engage-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.cyb-engage-card--featured { border-color: var(--nasdan-navy); box-shadow: var(--shadow-sm); }
.cyb-engage-tag {
  align-self: flex-start; font-size: 0.75rem; font-weight: var(--fw-semibold); letter-spacing: var(--ls-wider);
  text-transform: uppercase; color: var(--nasdan-navy); background: var(--nasdan-amber); border-radius: 999px; padding: 0.3rem 0.8rem;
}
.cyb-engage-card--featured .cyb-engage-tag { color: var(--white); background: var(--nasdan-navy); }
.cyb-engage-card h3 { font-size: 1.3125rem; font-weight: var(--fw-light); letter-spacing: var(--ls-tight); color: var(--ink-900); }
.cyb-engage-card > p { color: var(--ink-500); }
.cyb-engage-card ul { display: flex; flex-direction: column; gap: 0.6rem; list-style: none; padding: 0; margin: var(--sp-1) 0 var(--sp-3); }
.cyb-engage-card li { position: relative; padding-left: 1.4rem; font-size: 0.9125rem; color: var(--ink-700); }
.cyb-engage-card li::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 8px; height: 8px; border-radius: 2px; background: var(--nasdan-amber); }
.cyb-engage-card .btn-link-nasdan { margin-top: auto; align-self: flex-start; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1199.98px) {
  .cyb-hero-grid { grid-template-columns: 1fr; gap: var(--sp-7); }
  .cyb-layers-visual { order: -1; max-width: 300px; }
  .cyb-proof-row { grid-template-columns: repeat(2, 1fr); row-gap: var(--sp-5); }
  .cyb-proof-item:nth-child(3) { border-left: none; padding-left: 0; }
  .cyb-grid { grid-template-columns: 1fr 1fr; }
  .cyb-timeline { grid-template-columns: 1fr 1fr; row-gap: var(--sp-7); }
  .cyb-timeline::before { display: none; }

  .cyb-testing-grid { grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); }
  .cyb-compliance-grid { grid-template-columns: 1fr 1fr; }
  .cyb-engage-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 767.98px) {
  .cyb-hero { padding-block: var(--sp-8) var(--sp-6); }
  .cyb-hero-headline { max-width: 100%; font-size: clamp(1.75rem, 1.5rem + 2.2vw, 2.25rem); }
  .cyb-hero-actions { flex-direction: column; align-items: stretch; }

  .cyb-proof-row { grid-template-columns: 1fr; }
  .cyb-proof-item { border-left: none; border-top: 1px solid var(--ink-200); padding-left: 0; padding-top: var(--sp-4); }
  .cyb-proof-item:first-child { border-top: none; padding-top: 0; }

  .cyb-grid { grid-template-columns: 1fr; }

  .cyb-timeline {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    margin-top: var(--sp-7);
  }
  .cyb-timeline-item {
    display: grid;
    grid-template-columns: 24px 1fr;
    column-gap: var(--sp-4);
    align-items: start;
    padding-top: 0;
    padding-bottom: var(--sp-7);
  }
  .cyb-timeline-item:last-child { padding-bottom: 0; }
  .cyb-timeline-item::before {
    content: "";
    position: absolute;
    left: 11px;
    top: 28px;
    bottom: 0;
    width: 1px;
    background: rgba(255,255,255,0.16);
  }
  .cyb-timeline-item:last-child::before { display: none; }
  .cyb-timeline-time {
    position: static;
    grid-column: 2;
    grid-row: 1;
    margin-bottom: 0.35rem;
  }
  .cyb-timeline-dot {
    position: static;
    grid-column: 1;
    grid-row: 1 / 3;
    margin-top: 4px;
  }
  .cyb-timeline-copy { grid-column: 2; grid-row: 2; }

  .cyb-inline-cta { flex-direction: column; align-items: flex-start; }

  .cyb-compliance-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
  .cyb-compliance-badge {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--sp-3);
    padding: var(--sp-4);
  }
  .cyb-compliance-badge > div { display: flex; flex-direction: column; align-items: center; }

  .cyb-terminal-body { font-size: 0.75rem; }
}