/* ============================================================
   SH Security — styles.css
   Consolidated & normalised. All page-level <style> blocks
   have been absorbed here. Delete inline <style> tags from:
     • base.html (avatar, navbar-elevated, brand-gradient,
                  dark dropdown rules)
     • blog/index.html
     • blog/post.html
     • case_studies.html
     • cyber_safeguarding.html
     • blog_post.html (markdown-body)
     • nda_private_client.html (print)
   ============================================================ */


/* ============================================================
   1. DESIGN TOKENS
   ============================================================ */

:root {
  /* Brand palette */
  --brand:        #0d6efd;
  --brand-2:      #6f42c1;
  --brand-3:      #20c997;

  /* Banner gradient (light) */
  --brand-from:   #0b5bd3;
  --brand-to:     #7b5ae0;
  --brand-ink:    #0b1020;

  /* Surfaces & text */
  --ink:          #1a1f36;
  --muted:        #6b7280;
  --bg:           #f7f9fc;
  --card:         #ffffff;
  --border:       rgba(0, 0, 0, .10);
  --text:         #1a1f36;

  /* Navbar */
  --nav-bg:       #ffffff;
}

[data-theme="dark"] {
  --bg:           #0b1220;
  --text:         #e8eefc;
  --muted:        #b6c2e2;
  --card:         #0f1b33;
  --border:       #1f2b4a;
  --nav-bg:       rgba(12, 18, 32, .84);
  --ink:          #e8eefc;

  /* Brand shifts for dark surfaces */
  --brand:        #7fb3ff;
  --brand-2:      #a78bfa;
  --brand-3:      #5eead4;

  /* Banner gradient (dark) */
  --brand-from:   #1b2745;
  --brand-to:     #6a4bdb;
}


/* ============================================================
   2. BASE
   ============================================================ */

html, body {
  color: var(--ink);
}

body {
  background: var(--bg);
  color: var(--text);
  font-family:
    "CodecPro", "Poppins", -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, Helvetica, Arial,
    "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
}

/* Optional CodecPro @font-face — uncomment once files are added
@font-face { font-family:'CodecPro'; src:url('/static/fonts/CodecPro-Regular.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'CodecPro'; src:url('/static/fonts/CodecPro-Medium.woff2')  format('woff2'); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:'CodecPro'; src:url('/static/fonts/CodecPro-Bold.woff2')    format('woff2'); font-weight:700; font-style:normal; font-display:swap; }
*/

/* Typography scale */
h1, h2, h3, .display-5 { letter-spacing: .2px; }
h1, .display-5 {
  font-weight: 700;
  font-size: clamp(1.6rem, 3.5vw + .6rem, 2.75rem);
  line-height: 1.2;
}
.hero-title {
  font-weight: 800;
  line-height: 1.05;
  font-size: clamp(2.2rem, 3vw + 1.2rem, 3.5rem);
}
.lead          { font-size: clamp(1rem, 1.2vw + .6rem, 1.25rem); }
.hero-lede     { font-size: clamp(1.05rem, .6vw + .9rem, 1.25rem); }

/* Links */
a { color: var(--brand); }
a:hover { opacity: .9; }

/* Dividers */
hr { color: var(--border); opacity: 1; }

/* Muted text */
.text-muted, footer .text-muted { color: var(--muted) !important; }
[data-theme="dark"] .text-body { color: var(--text) !important; }
[data-theme="dark"] .text-body-secondary,
[data-theme="dark"] .form-text   { color: var(--muted) !important; }

/* Accessible focus ring */
:focus-visible {
  outline: 3px solid rgba(59, 130, 246, .65);
  outline-offset: 2px;
}


/* ============================================================
   3. LAYOUT
   ============================================================ */

/* --- Hero section --- */
.hero {
  background:
    radial-gradient(1200px 600px at 10% 10%, rgba(32, 201, 151, .12), transparent 60%),
    radial-gradient(900px  500px at 90% 20%, rgba(13, 110, 253, .12), transparent 60%),
    linear-gradient(180deg, #ffffff, var(--bg));
}
[data-theme="dark"] .hero {
  background:
    radial-gradient(1200px 600px at 10% 10%, rgba(32, 201, 151, .10), transparent 60%),
    radial-gradient(900px  500px at 90% 20%, rgba(13, 110, 253, .10), transparent 60%),
    linear-gradient(180deg, rgba(0, 0, 0, .06), transparent 40%),
    var(--bg);
}
.hero h1, .hero .lead { color: var(--text); }

/* Right-hand info box inside hero */
[data-theme="dark"] .hero .bg-white,
[data-theme="dark"] .hero .p-4.bg-white {
  background-color: var(--card) !important;
  border: 1px solid var(--border);
  box-shadow: 0 12px 40px rgba(0, 0, 0, .28);
}

/* Hero headline shadow (light only) */
.hero h1 { font-weight: 800; text-shadow: 0 1px 0 rgba(255, 255, 255, .6); }

/* --- Section accent --- */
.section-accent {
  background: linear-gradient(180deg, #ffffff, #f0f5ff);
  border-top: 1px solid #eef2ff;
  border-bottom: 1px solid #eef2ff;
  padding-top: 3rem;
  padding-bottom: 3rem;
}
[data-theme="dark"] .section-accent {
  background: linear-gradient(180deg, rgba(255, 255, 255, .02), rgba(255, 255, 255, .01));
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

/* --- Brand gradient top band --- */
.brand-gradient {
  background:
    radial-gradient(1000px 320px at 18% -30%, color-mix(in oklab, var(--brand-from) 16%, transparent), transparent 70%),
    linear-gradient(135deg, var(--brand-from), var(--brand-to));
  border-bottom: 1px solid color-mix(in oklab, var(--brand-to) 25%, transparent);
  color: #fff;
}
.brand-gradient .btn-light {
  background: #fff;
  border-color: #fff;
  color: var(--brand-ink);
}
.brand-gradient .btn-outline-light {
  color: #fff;
  border-color: rgba(255, 255, 255, .7);
}
.brand-gradient .btn-outline-light:hover {
  background: rgba(255, 255, 255, .1);
  border-color: #fff;
}

/* Subtle variant for hero-area gradients on other pages */
.brand-gradient.thin {
  background: radial-gradient(
    1200px 400px at 20% -20%,
    color-mix(in oklab, var(--bs-primary, var(--brand)) 16%, transparent) 0%,
    transparent 60%
  );
}

/* --- Footer --- */
footer {
  background: #0b1020;
  color: #a3aed0;
  border-top: none;
}
footer a { color: #d0d6f6; text-decoration: none; }
footer a:hover { text-decoration: underline; }

[data-theme="dark"] footer {
  background: transparent;
  color: var(--muted);
  border-top: 1px solid var(--border);
}
[data-theme="dark"] footer a { color: var(--brand); }


/* ============================================================
   4. COMPONENTS
   ============================================================ */

/* --- Cards --- */
.card {
  border: 1px solid #e7ebf3;
  box-shadow: 0 10px 30px rgba(2, 6, 23, .06);
  border-radius: 1rem;
}
.card:hover {
  transform: translateY(-2px);
  transition: .2s ease;
  box-shadow: 0 14px 36px rgba(2, 6, 23, .12);
}
[data-theme="dark"] .card {
  background: var(--card);
  border-color: var(--border);
  box-shadow: 0 10px 24px rgba(3, 8, 20, .45);
}
[data-theme="dark"] .card a           { color: var(--brand); }
[data-theme="dark"] .card .text-muted { color: var(--muted) !important; }

/* Card text in dark */
.card .card-title, .card h3, .card h4,
.card p, .card li, .card a { color: var(--text); }
.card a.btn-link              { color: var(--brand); }
.card a.btn-link:hover        { opacity: .9; }

/* Glass card variant */
.card--glass {
  background: color-mix(in oklab, var(--bs-body-bg, #fff) 92%, transparent);
  border: 1px solid color-mix(in oklab, var(--bs-body-color, #0b1220) 12%, transparent);
  backdrop-filter: blur(6px);
}

/* --- Buttons --- */
.btn {
  border-radius: .8rem;
  transition: transform .15s ease, box-shadow .2s ease;
  white-space: nowrap;
}
.btn-primary {
  box-shadow: 0 6px 16px rgba(13, 110, 253, .25);
}
.btn-primary:hover { transform: translateY(-1px); }
.btn-primary:active,
.btn-outline-primary:active { transform: translateY(0); }

[data-theme="dark"] .btn-primary         { background-color: var(--brand); border-color: var(--brand); }
[data-theme="dark"] .btn-outline-primary { color: var(--brand); border-color: var(--brand); }
[data-theme="dark"] .btn-outline-primary:hover {
  background-color: var(--brand);
  color: #0b1020;
}

/* --- CTA block --- */
.cta {
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  color: white;
  border-radius: 1rem;
  box-shadow: 0 18px 48px rgba(13, 110, 253, .25);
}
[data-theme="dark"] .cta {
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  color: #0b1020;
}
[data-theme="dark"] .cta .btn          { background: #ffffff; border-color: #ffffff; color: #0b1020; }
[data-theme="dark"] .cta .btn:hover    { filter: brightness(.95); }

/* --- Badges --- */
.badge-accent {
  background: rgba(13, 110, 253, .1);
  color: #0b5ed7;
  border: 1px solid rgba(13, 110, 253, .2);
}
[data-theme="dark"] .badge-accent {
  background: rgba(127, 179, 255, .16);
  color: var(--brand);
  border: 1px solid rgba(127, 179, 255, .28);
}

/* Money/info badge (portal top-ups) */
[data-theme="dark"] .card .badge.bg-info-subtle.text-info.border {
  background:    rgba(56, 189, 248, .18) !important;
  color:         #cfefff !important;
  border-color:  rgba(56, 189, 248, .55) !important;
  font-weight: 600;
}
:root:not([data-theme="dark"]) .card .badge.bg-info-subtle.text-info.border {
  background:    rgba(13, 110, 253, .10) !important;
  color:         #0d6efd !important;
  border-color:  rgba(13, 110, 253, .35) !important;
}

/* --- Avatar chip --- */
.avatar {
  inline-size: 1.75rem;
  block-size:  1.75rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: .9rem;
  background: color-mix(in oklab, var(--brand) 35%, #6b7280);
  color: #fff;
}
.avatar-sm { inline-size: 1.5rem; block-size: 1.5rem; font-size: .85rem; }

/* --- Hero chips --- */
.hero-chip {
  border-radius: 999px;
  border: 1px solid var(--border);
  padding: .45rem .8rem;
  font-size: .875rem;
  font-weight: 600;
  background: color-mix(in oklab, var(--card) 88%, transparent);
  color: var(--text);
}
.hero-chip--bright {
  background:    color-mix(in oklab, var(--brand) 14%, var(--card));
  border-color:  color-mix(in oklab, var(--brand) 40%, var(--border));
}

/* --- Surface utility --- */
.surface {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 1rem;
}

/* --- Media frame --- */
.media-frame {
  position: relative;
  overflow: hidden;
  border-radius: 1rem;
  border: 1px solid var(--border);
  box-shadow: 0 16px 40px rgba(2, 6, 23, .28);
  background: linear-gradient(180deg, rgba(255, 255, 255, .02), rgba(255, 255, 255, 0));
}
.media-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, .15));
  pointer-events: none;
}
[data-theme="dark"] .media-frame { border-color: transparent; }

/* --- Tight / comfy list helpers --- */
.list-tight li  { margin-bottom: .35rem; }
.list-comfy li  { margin-bottom: .4rem; }
.list-comfy li  { margin-bottom: .4rem; }

/* --- Prose (blog articles) --- */
.prose { font-size: 1.05rem; line-height: 1.75; color: var(--text, var(--bs-body-color)); }
.prose :where(h1, h2, h3) { margin-top: 1.3rem; margin-bottom: .6rem; letter-spacing: .2px; }
.prose h2 {
  border-bottom: 1px solid var(--border, rgba(0, 0, 0, .12));
  padding-bottom: .35rem;
}
[data-theme="dark"] .prose h2 { border-bottom-color: var(--border, #1f2b4a); }
.prose a { color: var(--brand, var(--bs-primary)); text-decoration: underline; }
.prose p, .prose li { line-height: 1.7; }
.prose img {
  display: block;
  max-width: 100%;
  height: auto;
  max-height: min(65vh, 820px);
  object-fit: contain;
  border-radius: .75rem;
  margin: 1rem auto;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .22);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.prose img:hover {
  transform: scale(1.015);
  box-shadow: 0 16px 40px rgba(0, 0, 0, .28);
  filter: saturate(1.03) brightness(1.02);
}
@media (prefers-reduced-motion: reduce) {
  .prose img            { transition: none; }
  .prose img:hover      { transform: none; }
}
[data-theme="dark"] .prose img {
  box-shadow: 0 16px 40px rgba(0, 0, 0, .55);
  background: #0a0f1f;
  border: 1px solid #0f1b33;
}
.prose blockquote {
  margin: 1rem 0;
  padding: .9rem 1rem;
  border-radius: .6rem;
  border-left: 4px solid color-mix(in oklab, var(--brand, #7fb3ff) 70%, #fff);
  background: color-mix(in oklab, var(--card, #0f1b33) 90%, transparent);
}
.prose :not(pre) > code {
  background: color-mix(in oklab, var(--card, #0f1b33) 88%, transparent);
  border: 1px solid var(--border, #1f2b4a);
  padding: .15rem .35rem;
  border-radius: .35rem;
  font-size: .95em;
}
.prose pre {
  position: relative;
  background: var(--card, #0f1b33);
  border: 1px solid var(--border, rgba(255, 255, 255, .12));
  padding: 2.25rem 1rem 1rem;     /* top space for header bar */
  border-radius: .75rem;
  overflow: auto;
  color: var(--text, #e8eefc);
  font-family:
    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
    "Liberation Mono", "Courier New", monospace;
  font-size: .95rem;
  line-height: 1.6;
}
:root:not([data-theme="dark"]) .prose pre {
  background: #0f172a0f;
  border-color: rgba(0, 0, 0, .08);
  color: inherit;
}

/* Code header + copy button */
.codeblock-head {
  position: absolute;
  inset: .5rem .5rem auto .5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  padding: .25rem .5rem;
  border-radius: .5rem;
  background: color-mix(in oklab, var(--card, #0f1b33) 80%, transparent);
  border: 1px solid var(--border, rgba(255, 255, 255, .12));
}
.codeblock-lang {
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .02em;
  opacity: .9;
  padding: .1rem .45rem;
  border-radius: .35rem;
  background: color-mix(in oklab, var(--brand, #7fb3ff) 14%, var(--card, #0f1b33));
  border: 1px solid color-mix(in oklab, var(--brand, #7fb3ff) 40%, var(--border, #1f2b4a));
}
.code-copy-btn {
  font-size: .75rem;
  line-height: 1;
  padding: .25rem .5rem;
  border-radius: .35rem;
  cursor: pointer;
  background: transparent;
  color: var(--text, var(--bs-body-color));
  border: 1px solid var(--border, rgba(255, 255, 255, .2));
}
.code-copy-btn:hover       { background: rgba(255, 255, 255, .06); }
.code-copy-btn.is-success  { border-color: transparent; background: rgba(50, 200, 120, .25); }
.code-copy-btn.is-error    { border-color: transparent; background: rgba(220, 80, 80, .25); }

/* Markdown-body (blog_post.html rendered markdown) */
.markdown-body h1, .markdown-body h2, .markdown-body h3 { margin-top: 1.25rem; }
.markdown-body pre  { padding: .75rem; border-radius: .5rem; background: var(--bs-tertiary-bg); overflow: auto; }
.markdown-body code { padding: .1rem .3rem; border-radius: .25rem; background: var(--bs-tertiary-bg); }
.markdown-body img  { max-width: 100%; height: auto; }
.markdown-body table { width: 100%; }
.markdown-body th, .markdown-body td { padding: .5rem; border-top: 1px solid var(--bs-border-color); }


/* ============================================================
   5. NAVIGATION
   ============================================================ */

.navbar-brand span { letter-spacing: .2px; }
.navbar-brand img  { width: clamp(44px, 4.2vw, 64px); height: auto; }
.navbar-brand      { margin-right: .5rem; }

.navbar-elevated {
  backdrop-filter: saturate(180%) blur(6px);
  box-shadow: 0 6px 24px rgba(16, 24, 40, .06);
  transition: box-shadow .25s ease, background-color .2s ease;
}
.navbar-elevated.is-stuck {
  box-shadow: 0 10px 20px rgba(0, 0, 0, .18);
  background-color: color-mix(in oklab, var(--bs-body-bg, #fff) 92%, transparent);
}

/* Allow nav links to wrap on tight viewports */
.navbar .navbar-collapse  { flex-wrap: wrap; }
.navbar .nav-link         { padding-top: .6rem; padding-bottom: .6rem; }
.navbar .navbar-collapse > * { margin-top: .25rem; }

/* Dark mode nav */
[data-theme="dark"] .navbar {
  background: var(--nav-bg) !important;
  border-bottom: 1px solid var(--border) !important;
}
[data-theme="dark"] .navbar .nav-link         { color: var(--text) !important; opacity: .85; }
[data-theme="dark"] .navbar .nav-link:hover   { opacity: 1; }
[data-theme="dark"] .navbar .navbar-brand,
[data-theme="dark"] .navbar .navbar-brand span,
[data-theme="dark"] .navbar .nav-link         { color: var(--text) !important; }
[data-theme="dark"] .navbar .nav-link:hover,
[data-theme="dark"] .navbar .navbar-brand:hover { color: #fff !important; }

/* Toggler icon (dark) */
[data-theme="dark"] .navbar { --bs-navbar-toggler-icon-bg: none; }
[data-theme="dark"] .navbar .navbar-toggler { border-color: var(--border); }
[data-theme="dark"] .navbar .navbar-toggler-icon {
  background-image:
    linear-gradient(var(--text), var(--text)),
    linear-gradient(var(--text), var(--text)),
    linear-gradient(var(--text), var(--text));
  background-position: center;
  background-size: 100% 2px, 100% 2px, 100% 2px;
  background-repeat: no-repeat;
  padding: 0;
}

/* Dropdowns */
[data-theme="dark"] .dropdown-menu    { background: var(--card); border-color: var(--border); }
[data-theme="dark"] .dropdown-item   { color: var(--text); }
[data-theme="dark"] .dropdown-item:hover {
  background: color-mix(in oklab, var(--card) 80%, var(--brand) 20%);
}
[data-theme="dark"] .dropdown-divider { border-top-color: var(--border); }


/* ============================================================
   6. DARK MODE — GLOBAL SURFACE OVERRIDES
   ============================================================ */

[data-theme="dark"] .bg-white,
[data-theme="dark"] .bg-light,
[data-theme="dark"] .bg-body,
[data-theme="dark"] .bg-body-tertiary {
  background-color: var(--card) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}
[data-theme="dark"] .border-bottom { border-bottom: 1px solid var(--border) !important; }

/* Forms */
.form-control, .form-select, textarea {
  background: #0f1b33;
  color: var(--text);
  border-color: var(--border);
}
.form-control:focus, .form-select:focus, textarea:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 .2rem rgba(127, 179, 255, .25);
}

/* Form labels & placeholders (dark) */
[data-theme="dark"] .form-label             { color: var(--text) !important; }
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select,
[data-theme="dark"] textarea                { color: var(--text) !important; background: var(--card) !important; border-color: var(--border) !important; }
[data-theme="dark"] .form-control::placeholder,
[data-theme="dark"] textarea::placeholder   { color: var(--muted) !important; }

/* Accordion / list groups */
[data-theme="dark"] .accordion-item,
[data-theme="dark"] .list-group-item {
  background-color: var(--card);
  color: var(--text);
  border-color: var(--border);
}

/* Tables (generic) */
[data-theme="dark"] .table th,
[data-theme="dark"] .table td {
  color: var(--text) !important;
  border-color: var(--border) !important;
}

/* Account page hardening */
[data-theme="dark"] .card.bg-body,
[data-theme="dark"] .card.bg-body .card-header,
[data-theme="dark"] .card.bg-body .card-footer   { color: var(--text) !important; }
[data-theme="dark"] .card.bg-body :is(h1,h2,h3,h4,h5,strong,dt,label,th) { color: var(--text) !important; }
[data-theme="dark"] .card.bg-body :is(p,dd,td,li,small,.form-text)        { color: rgba(232,238,252,.88) !important; }
[data-theme="dark"] .card.bg-body hr { color: var(--border) !important; opacity: 1; }


/* ============================================================
   7. IR FLOW COMPONENT
   ============================================================ */

.ir-flow {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1rem;
  position: relative;
}
.ir-step {
  position: relative;
  padding: 1rem;
  border-radius: 1rem;
  border: 1px solid var(--border, #e7ebf3);
  background: var(--card, #fff);
  transition: transform .15s ease, box-shadow .2s ease;
}
.ir-step:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 36px rgba(2, 6, 23, .12);
}
.ir-dot {
  --g1: var(--brand, #0d6efd);
  --g2: var(--brand-2, #6f42c1);
  inline-size: 40px;
  block-size:  40px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-weight: 700;
  color: #fff;
  margin-bottom: .5rem;
  background: linear-gradient(135deg, var(--g1), var(--g2));
  box-shadow: 0 8px 22px rgba(13, 110, 253, .25);
}

/* Connector arrows (desktop only) */
@media (min-width: 992px) {
  .ir-step::after {
    content: "";
    position: absolute;
    top: 20px;
    right: -18px;
    width: 36px;
    height: 2px;
    background: color-mix(in oklab, currentColor 35%, transparent);
    opacity: .35;
  }
  .ir-step:last-child::after { display: none; }
}
[data-theme="dark"] .ir-step {
  background: var(--card, #0f1b33);
  border-color: var(--border, #1f2b4a);
  box-shadow: 0 10px 24px rgba(3, 8, 20, .45);
}


/* ============================================================
   8. PORTAL TABLE
   ============================================================ */

/* Reset Bootstrap table bg so rows inherit the card surface */
.portal-table.table > :not(caption) > * > * { background-color: transparent !important; }

.portal-table {
  --bs-table-bg:             transparent;
  --bs-table-color:          var(--bs-body-color);
  --bs-table-border-color:   rgba(0, 0, 0, .08);
  --bs-table-striped-bg:     rgba(0, 0, 0, .025);
  --bs-table-hover-bg:       rgba(0, 0, 0, .04);
  --bs-table-hover-color:    var(--bs-body-color);
  color: var(--bs-body-color);
  background: transparent;
}

/* Header */
.portal-table thead tr { background: var(--card); }
.portal-table thead th {
  color: var(--text);
  font-weight: 600;
  padding-top: .6rem;
  padding-bottom: .6rem;
  border-bottom: 1px solid var(--border) !important;
}

/* Body */
.portal-table tbody tr   { border-top: 1px solid var(--border); }
.portal-table tbody tr:hover { background: rgba(255, 255, 255, .03); }
.portal-table td         { color: var(--text); }
.portal-table td.fw-semibold { color: var(--text); }
.portal-table .border-bottom { border-color: var(--border) !important; }

/* Category badge */
[data-theme="dark"] .portal-table .badge {
  background: rgba(148, 163, 184, .18);
  color: #dbe3f5;
  border: 1px solid rgba(148, 163, 184, .45);
}

/* Dark-mode specific overrides */
[data-theme="dark"] .portal-table {
  --bs-table-border-color:  rgba(255, 255, 255, .12);
  --bs-table-striped-bg:    rgba(255, 255, 255, .05);
  --bs-table-hover-bg:      rgba(255, 255, 255, .07);
}
[data-theme="dark"] .portal-table thead tr { background: var(--card) !important; }
[data-theme="dark"] .portal-table thead th {
  color: var(--text) !important;
  border-bottom-color: var(--border) !important;
}
[data-theme="dark"] .portal-table tbody tr:nth-child(odd) { background: rgba(255, 255, 255, .03); }
[data-theme="dark"] .portal-table tbody tr:hover           { background: rgba(255, 255, 255, .07); }
[data-theme="dark"] .portal-table tbody td { color: var(--bs-body-color) !important; border-color: rgba(255, 255, 255, .10) !important; }
[data-theme="dark"] .portal-table .border-bottom { border-color: rgba(255, 255, 255, .12) !important; }


/* ============================================================
   9. BLOG
   ============================================================ */

/* --- Blog hero band (index page) --- */
.blog-hero.band {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(1200px 500px at 12% -20%, color-mix(in oklab, var(--brand-from, #1b2745) 22%, transparent), transparent 65%),
    radial-gradient(900px  420px at 88% -18%, color-mix(in oklab, var(--brand-to,   #6a4bdb) 18%, transparent), transparent 70%),
    linear-gradient(180deg, rgba(255, 255, 255, .04), transparent);
  border-bottom: 1px solid color-mix(in oklab, var(--bs-body-color) 12%, transparent);
}
:root:not([data-theme="dark"]) .blog-hero.band {
  background:
    radial-gradient(1200px 500px at 12% -20%, color-mix(in oklab, var(--brand-from, #0b5bd3) 14%, transparent), transparent 65%),
    radial-gradient(900px  420px at 88% -18%, color-mix(in oklab, var(--brand-to,   #7b5ae0) 12%, transparent), transparent 70%),
    linear-gradient(180deg, rgba(0, 0, 0, .02), rgba(0, 0, 0, .06));
}

/* --- Blog post hero --- */
.blog-hero--post {
  position: relative;
  background:
    radial-gradient(80rem 30rem at 30% -10%, rgba(127, 179, 255, .12), transparent 60%),
    radial-gradient(60rem 26rem at 85%  -8%, rgba(167, 139, 250, .10), transparent 60%),
    linear-gradient(180deg, rgba(255, 255, 255, .03), transparent 40%),
    var(--bg, #0b1220);
  border-bottom: 1px solid var(--border, #1f2b4a);
}
:root:not([data-theme="dark"]) .blog-hero--post {
  background:
    radial-gradient(80rem 30rem at 30% -10%, rgba(13,  110, 253, .06), transparent 60%),
    radial-gradient(60rem 26rem at 85%  -8%, rgba(111,  66, 193, .06), transparent 60%),
    linear-gradient(180deg, #fff, var(--bg, #f7f9fc));
  border-bottom: 1px solid color-mix(in oklab, var(--bs-body-color) 10%, transparent);
}

/* --- Blog search controls --- */
.blog-scope .search-icon {
  position: absolute;
  left: .9rem;
  top: 50%;
  transform: translateY(-50%);
  opacity: .75;
  pointer-events: none;
}
.blog-scope .form-control.ps-5 { padding-left: 2.4rem !important; }
.blog-scope .form-control,
.blog-scope .form-select {
  background:   var(--card, #0f1b33);
  color:        var(--text, #e8eefc);
  border-color: var(--border, #1f2b4a);
}
:root:not([data-theme="dark"]) .blog-scope .form-control,
:root:not([data-theme="dark"]) .blog-scope .form-select {
  background: #fff;
  color: #0b1020;
  border-color: #e7ebf3;
}

/* --- Blog post grid --- */
.post-grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.post-card .card { transition: transform .12s ease, box-shadow .2s ease; }
.post-card:hover .card {
  transform: translateY(-2px);
  box-shadow: 0 16px 36px rgba(0, 0, 0, .35);
}
:root:not([data-theme="dark"]) .post-card:hover .card {
  box-shadow: 0 16px 36px rgba(2, 6, 23, .14);
}

.thumb {
  display: block;
  background-size: cover;
  background-position: center;
  border-top-left-radius:  1rem;
  border-top-right-radius: 1rem;
}
/* ratio-21x9 utility (used in blog + media frames) */
.ratio-21x9 { aspect-ratio: 21/9; }

/* --- Blog chips & tags --- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  border-radius: 999px;
  padding: .38rem .7rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  border: 1px solid var(--border, #1f2b4a);
  color: var(--text, #e8eefc);
  background: color-mix(in oklab, var(--card, #0f1b33) 88%, var(--brand, #7fb3ff) 12%);
}
.chip .dot {
  inline-size: .5rem;
  block-size:  .5rem;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--brand, #7fb3ff), var(--brand-2, #a78bfa));
  box-shadow: 0 0 0 3px rgba(127, 179, 255, .12) inset;
}
.chip--tag  { text-decoration: none; }
.chip--mini {
  font-weight: 600;
  padding: .2rem .55rem;
  border-radius: 999px;
  font-size: .82rem;
  background: color-mix(in oklab, var(--card, #0f1b33) 92%, var(--brand, #7fb3ff) 8%);
}
:root:not([data-theme="dark"]) .chip,
:root:not([data-theme="dark"]) .chip--mini {
  color: #0b1020;
  background: color-mix(in oklab, #fff 92%, var(--brand, #0d6efd) 8%);
  border-color: #e7ebf3;
}

/* --- Tag chips (post.html) --- */
.tag-chip {
  --chip-bg:     color-mix(in oklab, var(--card, #0f1b33) 86%, transparent);
  --chip-border: var(--border, #1f2b4a);
  display: inline-block;
  padding: .35rem .7rem;
  border-radius: 999px;
  background: var(--chip-bg);
  border: 1px solid var(--chip-border);
  font-weight: 600;
  color: inherit;
  text-decoration: none;
  line-height: 1;
}
.tag-chip:hover { filter: brightness(1.06); text-decoration: none; }

/* --- Blog pagination --- */
.blog-scope .pagination .page-link {
  background:   var(--card, #0f1b33);
  color:        var(--text, #e8eefc);
  border-color: var(--border, #1f2b4a);
}
:root:not([data-theme="dark"]) .blog-scope .pagination .page-link {
  background: #fff;
  color: #0b1020;
  border-color: #e7ebf3;
}

/* --- Table of contents (post.html) --- */
.toc {
  border: 1px solid var(--border, rgba(0, 0, 0, .12));
  background: color-mix(in oklab, var(--bs-body-bg, #fff) 94%, transparent);
  color: var(--text, var(--bs-body-color));
  border-radius: 1rem;
  padding: 1rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .12);
  max-height: calc(100vh - 120px);
  overflow: auto;
}
[data-theme="dark"] .toc {
  background:   var(--card, #0f1b33);
  border-color: var(--border, #1f2b4a);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .45);
}
.toc__list a {
  display: block;
  padding: .35rem .25rem;
  color: inherit;
  text-decoration: none;
  opacity: .9;
}
.toc__list a:hover    { opacity: 1; text-decoration: underline; }
.toc__list .toc-depth-3 { padding-left: .75rem; font-size: .95em; opacity: .9; }
.toc__list .is-hidden { display: none; }
.toc__list .is-active { font-weight: 700; text-decoration: underline; }


/* ============================================================
   10. CASE STUDIES PAGE
   ============================================================ */

.case-hero .lead { max-width: 70ch; }
.case-intro {
  display: flex;
  align-items: center;
  gap: .6rem;
  color: rgba(255, 255, 255, .72);
}
.case-intro__dot {
  width: .55rem;
  height: .55rem;
  border-radius: 999px;
  background: rgba(110, 168, 254, .90);
  box-shadow: 0 0 0 4px rgba(110, 168, 254, .15);
  flex: 0 0 auto;
}

/* Card */
.case-card {
  position: relative;
  overflow: hidden;
  border-radius: 1.35rem;
  border: 1px solid rgba(255, 255, 255, .10);
  background:
    radial-gradient(1200px 520px at 20% 0%, rgba(110, 168, 254, .10), rgba(0, 0, 0, 0)),
    rgba(255, 255, 255, .03);
  box-shadow: 0 14px 45px rgba(0, 0, 0, .30);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.case-card:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 255, 255, .18);
  box-shadow: 0 22px 70px rgba(0, 0, 0, .42);
}
.case-card::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, rgba(110, 168, 254, .85), rgba(163, 112, 247, .65));
  opacity: .85;
}
.case-card::after {
  content: "";
  position: absolute;
  inset: -40% -30%;
  background: radial-gradient(circle, rgba(255, 255, 255, .10), rgba(255, 255, 255, 0) 55%);
  transform: rotate(12deg);
  opacity: .18;
  pointer-events: none;
}

/* Typography inside cards */
.case-card h2 {
  font-size: 1.4rem;
  letter-spacing: -.015em;
  color: rgba(255, 255, 255, .96);
  margin-bottom: .5rem;
}
.case-card p {
  color: rgba(255, 255, 255, .72);
  line-height: 1.6;
  max-width: 65ch;
  margin-bottom: 1.25rem;
}

/* Tag row */
.case-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
}
.case-tags { display: flex; gap: .5rem; flex-wrap: wrap; }

/* Badges */
.case-badge {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .38rem .7rem;
  border-radius: 999px;
  font-size: .82rem;
  font-weight: 650;
  letter-spacing: .01em;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .14);
  color: rgba(255, 255, 255, .88);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  user-select: none;
}
.case-badge::before {
  content: "";
  width: .45rem; height: .45rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, .35);
  flex: 0 0 auto;
}
.case-badge--retail::before       { background: rgba(110, 168, 254, .92); }
.case-badge--webshell::before     { background: rgba(163, 112, 247, .92); }
.case-badge--manufacturing::before{ background: rgba(34, 197, 94,  .92); }
.case-badge--malware::before      { background: rgba(239, 68,  68,  .92); }

/* View link */
.case-link {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  color: rgba(255, 255, 255, .78);
  text-decoration: none;
  font-weight: 600;
  padding: .35rem .55rem;
  border-radius: .75rem;
  border: 1px solid rgba(255, 255, 255, .10);
  background: rgba(255, 255, 255, .04);
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
  white-space: nowrap;
}
.case-link:hover {
  background: rgba(255, 255, 255, .07);
  border-color: rgba(255, 255, 255, .16);
  transform: translateY(-1px);
}

/* Bullet list */
.case-list { margin: 0; padding: 0; list-style: none; display: grid; gap: .6rem; }
.case-item { display: flex; gap: .6rem; align-items: flex-start; }
.case-dot {
  width: .45rem; height: .45rem;
  margin-top: .55rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, .28);
  flex: 0 0 auto;
}

/* Result chips */
.case-results {
  margin-top: 1.4rem;
  display: flex;
  flex-wrap: wrap;
  gap: .6rem .8rem;
  color: rgba(255, 255, 255, .72);
  font-size: .86rem;
}
.case-chip {
  padding: .28rem .6rem;
  border: 1px solid rgba(255, 255, 255, .10);
  background: rgba(255, 255, 255, .04);
  border-radius: 999px;
}

/* Case studies mobile */
@media (max-width: 420px) {
  .case-card h2     { font-size: 1.22rem; }
  .case-top         { align-items: flex-start; flex-direction: column; }
  .case-link        { width: fit-content; }
}


/* ============================================================
   11. CYBER SAFEGUARDING PAGE
   ============================================================ */

.svc-hero {
  background:
    radial-gradient(80rem 30rem at 30% -10%, rgba(127, 179, 255, .12), transparent 60%),
    radial-gradient(60rem 26rem at 85%  -8%, rgba(167, 139, 250, .10), transparent 60%),
    linear-gradient(180deg, rgba(255, 255, 255, .03), transparent 40%),
    var(--bg, #0b1220);
  color: var(--text, var(--bs-body-color));
  border-bottom: 1px solid var(--border, #1f2b4a);
}
:root:not([data-theme="dark"]) .svc-hero {
  background:
    radial-gradient(80rem 30rem at 30% -10%, rgba(13,  110, 253, .06), transparent 60%),
    radial-gradient(60rem 26rem at 85%  -8%, rgba(111,  66, 193, .06), transparent 60%),
    linear-gradient(180deg, #fff, var(--bg, #f7f9fc));
  border-bottom: 1px solid color-mix(in oklab, var(--bs-body-color) 10%, transparent);
}

.svc-card {
  background: var(--card, var(--bs-body-bg));
  border: 1px solid var(--border, rgba(0, 0, 0, .12));
}

.svc-icon {
  inline-size: 2rem;
  block-size:  2rem;
  min-width: 2rem;
  display: grid;
  place-items: center;
  background: color-mix(in oklab, var(--brand, #0d6efd) 15%, var(--card, #0f1b33));
  border: 1px solid color-mix(in oklab, var(--brand, #0d6efd) 40%, var(--border, #1f2b4a));
  color: var(--text, var(--bs-body-color));
  font-weight: 700;
}

/* Timeline */
.timeline { counter-reset: step; }
.timeline li { position: relative; padding-left: 2.25rem; }
.timeline-dot {
  position: absolute;
  left: 0;
  top: .25rem;
  inline-size: 1rem;
  block-size:  1rem;
  border-radius: 50%;
  background: color-mix(in oklab, var(--brand, #0d6efd) 25%, var(--card, #0f1b33));
  border: 1px solid var(--border, #1f2b4a);
}

/* Retainer hero text */
.retainer-hero, .retainer-hero p, .retainer-hero li { color: var(--text); }
.retainer-hero .text-muted,
.retainer-hero .text-body-secondary { color: var(--muted) !important; }
.retainer-hero li strong { color: var(--text); }


/* ============================================================
   12. SEASONAL BANNER
   ============================================================ */

.seasonal-banner {
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  background: linear-gradient(
    90deg,
    rgba(34, 197, 94,  .10),
    rgba(255, 255, 255, .04),
    rgba(239, 68,  68,  .10)
  );
}
[data-theme="light"] .seasonal-banner { border-bottom-color: rgba(0, 0, 0, .08); }


/* ============================================================
   13. PRINT
   ============================================================ */

@media print {
  body      { background: #fff; }
  #nda-doc  { box-shadow: none !important; border: 1px solid #ddd; }
}


/* ============================================================
   14. RESPONSIVE
   ============================================================ */

/* Mobile navbar */
@media (max-width: 991.98px) {
  .navbar .d-flex.ms-lg-3 {
    width: 100%;
    margin-top: .5rem;
    gap: .5rem;
    flex-direction: column;
    align-items: stretch;
  }
  .navbar .d-flex.ms-lg-3 .btn { width: 100%; }
  .navbar .navbar-collapse > * { margin-top: .25rem; }
  .ir-flow     { grid-template-columns: 1fr; }
  .hero .surface { margin-top: 1rem; }
}

/* Desktop nav: slightly tighter spacing */
@media (min-width: 992px) {
  .navbar .nav-link         { padding-inline: .6rem; }
  .navbar .navbar-collapse > * { margin-top: 0; }
}

/* Tablet+ navbar row spacing */
@media (min-width: 768px) {
  .navbar .navbar-collapse > * { margin-top: 0; }
}

/* Small screen card & section tweaks */
@media (max-width: 575.98px) {
  .card           { border-radius: .9rem; }
  .card .h5       { margin-bottom: .5rem; }
  .section-accent { padding-top: 2rem; padding-bottom: 2rem; }
  .cta            { border-radius: 1rem; padding: 1rem !important; }
  a.btn-link      { font-weight: 600; }
}