/* Cybersecurity — page-only ------------------------------------------------ */

:root{
  --sticky-header: 72px;
  --anchor-gap: 8px;
}

/* Page hero image */
.cs-hero{ --hero-bg: url('/assets/img/cybersecurity-hero.png') }

/* Sticky in-page subnav (below the sticky header) */
.subnav{ --subnav-top: var(--sticky-header, 72px); }

/* Layout rhythm + variety */
.section{ padding:56px 0 }
.section + .section{ padding-top:28px }
main > section{ position:relative }
main > section:nth-of-type(even){ background:var(--panel) }

/* Accent line on H2s (all sections except FAQ) */
.section h2{
  display:flex; align-items:center; gap:.55rem;
  font-size:clamp(1.4rem, 1.1rem + 1.2vw, 2rem);
  margin:0 0 .35rem;
}
.section:not(#faq) h2::before{
  content:""; width:6px; height:22px; border-radius:6px;
  background:linear-gradient(180deg, var(--red), var(--orange));
}

/* Protection section spacing */
#protection .band{ margin:10px 0 18px; }
#protection .grid-3{ margin-top:18px; }

/* Cards (no colored left edge) */
.card{
  border:1px solid var(--border);
  border-radius:var(--radius-card);
  box-shadow:0 4px 12px rgba(0,0,0,.04);
  transition:transform .15s ease, box-shadow .2s ease;
  padding:18px;
}
.card:hover{ transform:translateY(-2px); box-shadow:0 10px 24px rgba(0,0,0,.08) }

/* Kill the colored stripe from .card--accent (keep class in HTML if present) */
.card--accent::after{ content:none !important; }

/* H3 emojis already in the HTML */
.card h3{ margin:.1rem 0 .5rem; font-size:1.1rem }
.card h3 .e{ margin-right:.4rem }

/* Tighter checklists on this page */
.checklist li{ margin:.45rem 0 }

/* Anchor offset (header + subnav) */
main [id]{
  scroll-margin-top: calc(var(--sticky-header, 72px) + 50px + var(--anchor-gap, 8px));
}
/* Small-screen polish */
@media (max-width: 900px){
  .subnav .container{ padding:.6rem .8rem }
  .subnav a{ padding:.6rem 1rem; }
}