/* ==========================================================
   Sub-page template
   The hydrated shell (.sub-hero / .sub-features / .feat-card) and the inline
   about-content pages share these components in two visual contexts:
   - Dark, glassy treatment via the `subpage-dark` body class (service detail
     pages get it in site.js; the About content pages set it in markup).
   - The lighter base treatment below, used by case-study and contact pages.
   ========================================================== */

/* ---- Dark top nav (used only on sub-pages) ---- */
.site-nav.sub{
  background:#001a28;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.site-nav.sub .logo img{ filter: brightness(0) invert(1) }
.site-nav.sub ul a{ color:#E6F3FE }
.site-nav.sub ul a:hover{ background:rgba(255,255,255,.06); color:#9cfac7 }
.site-nav.sub ul a.active{ color:#008afc }
.site-nav.sub .cta{
  background:#008afc; color:#fff !important;
}
.site-nav.sub .burger{ border-color:rgba(255,255,255,.2) }
.site-nav.sub .burger svg{ color:#fff }

/* ---- Sub hero (base / light context) ---- */
.sub-hero{
  padding:60px 0 40px;
  position:relative;
  overflow:hidden;
  background:linear-gradient(180deg, rgba(230,243,254,.82) 0%, rgba(246,249,252,.94) 74%, rgba(246,249,252,0) 100%);
}
.sub-hero::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(78% 112% at 50% 0%, rgba(0,138,252,.04) 0%, transparent 62%),
    var(--hero-network-light) center top / 720px 480px repeat;
  opacity:.44;
  mask-image:linear-gradient(180deg, rgba(0,0,0,.96) 0%, rgba(0,0,0,.72) 68%, transparent 100%);
  -webkit-mask-image:linear-gradient(180deg, rgba(0,0,0,.96) 0%, rgba(0,0,0,.72) 68%, transparent 100%);
}
.sub-hero .container{
  position:relative;
  z-index:1;
}
.sub-hero .crumbs{
  font-family:var(--mono); font-size:12px; letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:18px;
}
.sub-hero .crumbs a{ color:var(--body); text-decoration:none }
.sub-hero .crumbs a:hover{ color:var(--vivid-azure) }
.sub-hero .crumbs span{ margin:0 8px; opacity:.5 }
.sub-hero h1{
  font-size:clamp(38px, 4.6vw, 60px);
  color:var(--darker-azure);
  margin:0 0 16px;
  max-width:18ch;
}
.sub-hero .lede{
  font-size:clamp(16px, 1.2vw, 18px); color:var(--body);
  max-width:60ch; margin:0 0 28px;
}
.sub-hero .ctas{ display:flex; gap:12px; flex-wrap:wrap }

/* ---- Feature section (base / light context) ---- */
.sub-features{
  padding:40px 0 60px;
}
.sub-features .label{
  font-family:var(--display); font-weight:600;
  color:var(--darker-azure); font-size:17px;
  margin:0 0 20px;
}
.sub-features .grid{
  display:grid; grid-template-columns:repeat(2, 1fr); gap:24px;
}
@media (max-width:760px){ .sub-features .grid{ grid-template-columns:1fr } }

.feat-card{
  background:rgba(120,194,255,.18);
  border:1px solid rgba(255,255,255,.42);
  border-radius:14px;
  padding:26px 26px 22px;
  backdrop-filter:blur(18px) saturate(145%);
  -webkit-backdrop-filter:blur(18px) saturate(145%);
  box-shadow:0 1px 0 rgba(255,255,255,.28) inset, 0 18px 36px -20px rgba(0,42,64,.22);
  transition: transform .22s, box-shadow .22s, border-color .22s, background .22s;
  position:relative;
  overflow:hidden;
  color:var(--darker-azure);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  .feat-card{ background:#fff; border-color:var(--line); }
}
.feat-card > *{ position:relative; z-index:1 }
.feat-card::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(180deg, rgba(255,255,255,.18) 0%, rgba(255,255,255,.05) 42%, rgba(255,255,255,0) 100%),
    radial-gradient(80% 55% at 0% 0%, rgba(120,194,255,.16), transparent 70%);
}
.feat-card:hover{
  transform:translateY(-3px);
  border-color:var(--vivid-azure);
  background:rgba(120,194,255,.24);
  box-shadow:0 1px 0 rgba(255,255,255,.32) inset, 0 24px 44px -20px rgba(0,42,64,.28);
}
.feat-card .head{
  display:flex; align-items:center; gap:12px;
  margin-bottom:12px;
}
.feat-card .ic{
  width:48px; height:48px; border-radius:12px;
  background:rgba(0,42,64,.08);
  color:var(--darker-azure);
  border:1px solid rgba(0,42,64,.14);
  display:inline-flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.feat-card h3{
  font-size:19px; color:var(--darker-azure); margin:0;
  letter-spacing:-0.01em;
}
.feat-card p{
  color:var(--body); font-size:14.5px; margin:0;
  line-height:1.6;
}

/* ---- Bottom dark CTA strip (hidden by default; opted-in per page) ---- */
.sub-cta{
  display:none;
  background:
    linear-gradient(100deg, rgba(0,26,40,.9) 0%, rgba(0,42,64,.85) 50%, rgba(0,79,122,.75) 100%),
    url("../public/DBWebBackgrounds/bg-dark.png") center center / cover no-repeat,
    #002a40;
  color:#fff;
  padding:44px 0;
  text-align:center;
  margin-top:60px;
}
.sub-cta p{
  max-width:60ch; margin:0 auto 20px;
  font-size:17px; line-height:1.55; color:#E6F3FE;
}
.sub-cta .btn{
  background:rgba(0,0,0,.35);
  color:#fff;
  border:1px solid rgba(255,255,255,.2);
  backdrop-filter:blur(6px);
}
.sub-cta .btn:hover{ background:rgba(0,138,252,.3); border-color:#9cfac7 }

.sub-page-wrap{ position:relative }
.sub-page-wrap > *{ position:relative; z-index:1 }

/* ---- Assessments & Pentesting: bespoke hero + opted-in CTA card ---- */
body[data-page="assessments-pentesting"] .sub-hero h1{ max-width:none; white-space:nowrap; }
@media (max-width:760px){
  body[data-page="assessments-pentesting"] .sub-hero h1{ white-space:normal; }
}
body[data-page="assessments-pentesting"] .sub-hero .btn.dark{ display:inline-flex; align-items:center; gap:8px; transition:background .2s, transform .18s, border-color .18s; }
body[data-page="assessments-pentesting"] .sub-hero .btn.dark .btn-arrow{ flex-shrink:0; transition:transform .18s; }
body[data-page="assessments-pentesting"] .sub-hero .btn.dark:hover{ transform:translateY(-1px); border-color:#008afc; }
body[data-page="assessments-pentesting"] .sub-hero .btn.dark:hover .btn-arrow{ animation:cyber-arrow-bounce-right .62s cubic-bezier(.2,.88,.3,1); }
body[data-page="assessments-pentesting"] .sub-cta{ display:block; background:none; padding:0 0 60px; }
body[data-page="assessments-pentesting"] .sub-cta .sub-cta-card{
  background:
    linear-gradient(100deg, rgba(0,52,80,.58) 0%, rgba(0,72,110,.5) 50%, rgba(0,104,160,.42) 100%),
    rgba(0,64,95,.32);
  backdrop-filter:blur(12px) saturate(135%);
  -webkit-backdrop-filter:blur(12px) saturate(135%);
  border:1px solid rgba(255,255,255,.14);
  border-radius:18px;
  padding:48px 40px;
  box-shadow:0 28px 60px -30px rgba(0,42,64,.45);
  transition:transform .22s, box-shadow .22s, border-color .22s;
  position:relative;
  overflow:hidden;
}
body[data-page="assessments-pentesting"] .sub-cta .sub-cta-card:hover{
  transform:translateY(-4px);
  border-color:rgba(0,138,252,.45);
  box-shadow:0 1px 0 rgba(255,255,255,.12) inset, 0 34px 70px -30px rgba(0,42,64,.5);
}
body[data-page="assessments-pentesting"] .sub-cta h2{ color:#fff; margin:0 0 12px; font-size:clamp(26px,3vw,34px); }
body[data-page="assessments-pentesting"] .sub-cta .btn{
  background:var(--darker-azure); color:#fff;
  border:1px solid transparent;
  backdrop-filter:none; -webkit-backdrop-filter:none;
  transition:background .2s, transform .18s, border-color .18s;
}
body[data-page="assessments-pentesting"] .sub-cta .btn:hover{
  background:var(--dark-azure); transform:translateY(-1px);
  border-color:#008afc; text-decoration:none;
}

/* ---- Per-page background image (service detail + About content pages) ---- */
body[data-page-bg="bg-waves-6-gradient"]{
  background:
    url("../public/DBWebBackgrounds/bg-waves-6-gradient.png") top center / cover no-repeat fixed,
    #001a28;
}

/* ---- Legacy child-page footer image (excluded pages) ---- */
.site-footer::before{
  background: url("../public/DBWebBackgrounds/bg-dark.png") center center / cover no-repeat;
  filter: blur(20px);
  transform: scale(1.1);
  opacity: 0.8;
}

/* ==========================================================
   Dark sub-page context (body.subpage-dark)
   Deep, atmospheric background; light type; frosted-glass cards;
   translucent-green primary CTA. Matches the homepage system.
   Declared after the per-page-bg rule so its dark background wins.
   ========================================================== */
body.subpage-dark{
  background:
    url("../public/DBWebBackgrounds/bg-dark.png") top center / cover no-repeat fixed,
    #001a28;
}

/* Hero sits directly on the dark page background */
.subpage-dark .sub-hero{ background:transparent; }
.subpage-dark .sub-hero::before{ display:none; }
.subpage-dark .sub-hero h1{ color:#fff; }
.subpage-dark .sub-hero .lede{ color:#AFCBDE; }
.subpage-dark .sub-hero .crumbs{ color:rgba(230,243,254,.55); }
.subpage-dark .sub-hero .crumbs a{ color:#E6F3FE; }
.subpage-dark .sub-hero .crumbs a:hover{ color:#9cfac7; }
.subpage-dark .sub-features .label{ color:#E6F3FE; }

/* Primary CTA -> translucent green on dark (assessments keeps its own CTA) */
.subpage-dark:not([data-page="assessments-pentesting"]) .sub-hero .ctas .btn{
  background:rgba(156,250,199,.18);
  color:#9cfac7;
  border:0.5px solid transparent;
  box-shadow:none;
}
.subpage-dark:not([data-page="assessments-pentesting"]) .sub-hero .ctas .btn:hover{
  background:rgba(156,250,199,.28);
  border-color:#9cfac7;
  text-decoration:none;
}

/* Feature cards -> dark frosted-glass panels */
.subpage-dark .feat-card{
  background:var(--glass-fill-panel);
  border:1px solid var(--glass-border-panel);
  box-shadow:var(--glass-shadow-panel);
  backdrop-filter:blur(var(--glass-blur-md)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter:blur(var(--glass-blur-md)) saturate(var(--glass-saturate));
  color:#E6F3FE;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  .subpage-dark .feat-card{ background:#062236; border-color:rgba(255,255,255,.14); }
}
.subpage-dark .feat-card::before{
  background:
    linear-gradient(180deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,0) 46%),
    radial-gradient(80% 70% at 50% 0%, rgba(0,138,252,.12), transparent 72%);
}
.subpage-dark .feat-card .ic{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  color:#9cfac7;
}
.subpage-dark .feat-card h3{ color:#fff; }
.subpage-dark .feat-card p{ color:#AFCBDE; }
.subpage-dark .feat-card:hover{
  transform:translateY(-3px);
  border-color:rgba(0,138,252,.3);
  background:var(--glass-fill-strong);
  box-shadow:var(--glass-shadow-strong);
}

/* Footer glow tuned for the dark pages */
.subpage-dark .site-footer::before{
  background:
    linear-gradient(0deg, rgba(0,138,252,.18), rgba(0,138,252,.18)),
    radial-gradient(55% 80% at 0% 0%, rgba(156,250,199,.08), transparent 60%),
    radial-gradient(48% 68% at 100% 0%, rgba(0,138,252,.18), transparent 60%);
  filter:none;
  transform:none;
  opacity:1;
}

/* ---- Mobile spacing + full-width tappable CTA ---- */
@media (max-width:560px){
  .sub-hero{ padding:44px 0 28px; }
  .sub-features{ padding:28px 0 48px; }
  .subpage-dark .sub-hero .ctas{ flex-direction:column; align-items:stretch; }
  .subpage-dark .sub-hero .ctas .btn{ width:100%; justify-content:center; }
}
@media (max-width:480px){
  .subpage-dark .feat-card{ padding:20px 20px 18px; }
}