/* ==========================================================================
   Cyber Shields:Design System (per Rebuild Spec §4)
   Bold & modern dark tech. Strict brand colors. No hacker clichés.
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root {
  /* Primary brand */
  --color-navy:        #000046;
  --color-green:       #30664A;
  --color-red:         #FF0000;

  /* Surfaces */
  --color-bg-primary:  #000028;
  --color-bg-secondary:#000046;
  --color-bg-card:     #050540;
  --color-bg-elevated: #0a0a5c;

  /* Text */
  --color-text:        #FFFFFF;
  --color-text-sub:    #B0B8CC;
  --color-text-muted:  #6B7A99;

  /* Accents */
  --color-green-light: #3d7d5a;
  --color-red-soft:    #cc0000;

  /* Blue (third shield: Defensive):standardized */
  --color-blue:        #4d6dff;  /* canonical blue accent on dark */
  --color-blue-light:  #8ea1ff;  /* labels / icons on dark */
  --color-blue-dark:   #1a3a8a;  /* blue on light backgrounds */
  --color-blue-tint:   rgba(77,109,255,0.15);

  /* Borders */
  --color-border:        #1a1a6e;
  --color-border-bright: #3333aa;

  /* Status (semantic):softer red kept separate from brand red */
  --color-success:    #30664A;
  --color-warning:    #FFB800;
  --color-error:      #FF0000;  /* brand / offensive accent */
  --color-form-error: #DC2626;  /* form validation, calmer than pure red */

  /* Type */
  --ff-heading: 'Poppins', 'Inter', system-ui, sans-serif;
  --ff-body:    'Inter', 'Poppins', system-ui, sans-serif;
  --ff-ar-head: 'Noto Kufi Arabic', 'Tajawal', sans-serif;
  --ff-ar-body: 'Noto Naskh Arabic', 'Tajawal', sans-serif;

  /* Sizing */
  --container: 1200px;
  --radius: 6px;
  --radius-lg: 12px;

  /* Spacing scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* Motion */
  --t-fast: 150ms ease;
  --t: 250ms ease;
}

/* ---------- 2. Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--color-bg-primary);
  color: var(--color-text);
  font-family: var(--ff-body);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; transition: color var(--t-fast); }
button { font: inherit; cursor: pointer; }
ul { margin: 0; padding: 0; list-style: none; }

/* ---------- 3. Typography ---------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--ff-heading);
  color: var(--color-text);
  margin: 0 0 0.5em;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
h1 { font-size: clamp(34px, 5vw, 56px); font-weight: 700; }
h2 { font-size: clamp(28px, 3.5vw, 40px); font-weight: 600; }
h3 { font-size: clamp(22px, 2.5vw, 28px); font-weight: 600; }
h4 { font-size: 22px; font-weight: 500; }
p  { margin: 0 0 1em; color: var(--color-text-sub); }
small { font-size: 14px; }
.caption { font-size: 12px; color: var(--color-text-muted); }

.eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-green);
  margin-bottom: 1rem;
}

[dir="rtl"] body, [dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4 {
  font-family: var(--ff-ar-body);
}
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4 {
  font-family: var(--ff-ar-head);
  letter-spacing: 0;
}

/* ---------- 4. Layout ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}
section { padding: 80px 0; }
@media (max-width: 768px) { section { padding: 48px 0; } }

.section-alt { background: var(--color-bg-secondary); }

/* ---------- 5. Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 28px;
  font-family: var(--ff-heading);
  font-weight: 600;
  font-size: 15px;
  border-radius: var(--radius);
  border: 2px solid transparent;
  transition: transform var(--t-fast), background var(--t), border-color var(--t), color var(--t), box-shadow var(--t);
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary {
  background: var(--color-green);
  color: var(--color-text);
  box-shadow: 0 0 24px rgba(48, 102, 74, 0.25);
}
.btn-primary:hover { background: var(--color-green-light); box-shadow: 0 0 36px rgba(48, 102, 74, 0.45); }
.btn-secondary {
  background: transparent;
  color: var(--color-text);
  border-color: var(--color-green);
}
.btn-secondary:hover { background: rgba(48, 102, 74, 0.12); }
.btn-danger {
  background: var(--color-red);
  color: var(--color-text);
}
.btn-danger:hover { background: var(--color-red-soft); }
.btn-lg { padding: 18px 36px; font-size: 16px; }

/* ---------- 6. Header / Nav ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(0, 0, 40, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--color-border);
}
.nav-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--ff-heading);
  font-weight: 700;
  font-size: 18px;
  color: var(--color-text);
}
.brand-mark { width: 36px; height: 36px; }
.brand-text small { display: block; font-size: 10px; font-weight: 500; color: var(--color-text-muted); letter-spacing: 0.1em; text-transform: uppercase; }

.nav-links { display: flex; gap: 4px; align-items: center; }
.nav-links a {
  padding: 10px 14px;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-sub);
  border-radius: var(--radius);
}
.nav-links a:hover, .nav-links a.active { color: var(--color-text); background: rgba(255,255,255,0.04); }

.nav-cta { display: flex; align-items: center; gap: 12px; }
.lang-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-sub);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: transparent;
}
.lang-toggle:hover { color: var(--color-text); border-color: var(--color-border-bright); }

.nav-toggle {
  display: none;
  background: transparent;
  border: 0;
  color: var(--color-text);
  padding: 8px;
}

@media (max-width: 1024px) {
  .nav-links { display: none; position: absolute; top: 72px; left: 0; right: 0; background: var(--color-bg-secondary); flex-direction: column; padding: 16px; gap: 4px; border-bottom: 1px solid var(--color-border); }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 14px 16px; }
  .nav-toggle { display: inline-flex; }
}

/* ---------- 7. Hero ---------- */
.hero {
  position: relative;
  padding: 120px 0 80px;
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(48,102,74,0.18), transparent 60%),
    radial-gradient(800px 500px at 10% 110%, rgba(0,0,70,0.6), transparent 60%),
    var(--color-bg-primary);
  overflow: hidden;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 60px;
  align-items: center;
}
.hero h1 { margin-bottom: 24px; }
.hero .lead {
  font-size: clamp(16px, 1.6vw, 19px);
  color: var(--color-text-sub);
  margin-bottom: 36px;
  max-width: 56ch;
}
.hero-ctas { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 40px; }
.hero-trust { display: flex; gap: 28px; flex-wrap: wrap; align-items: center; padding-top: 24px; border-top: 1px solid var(--color-border); }
.trust-badge {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-sub);
  letter-spacing: 0.05em;
}
.trust-badge .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-green); box-shadow: 0 0 10px var(--color-green); }

.hero-visual { display: flex; justify-content: center; align-items: center; position: relative; }
.shield-stack { width: 100%; max-width: 460px; aspect-ratio: 1; animation: float 6s ease-in-out infinite; position: relative; }
.hero-logo-wrap {
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
/* Bright disc backdrop:separates the navy half of the shield from the page bg */
.hero-logo-wrap::before {
  content: "";
  position: absolute;
  inset: -4%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%,
      rgba(255,255,255,0.96) 0%,
      rgba(244,247,252,0.92) 40%,
      rgba(244,247,252,0) 72%);
  z-index: 0;
  filter: blur(2px);
}
/* Outer brand ring:picks up the red+green+blue identity */
.hero-logo-wrap::after {
  content: "";
  position: absolute;
  inset: -10%;
  border-radius: 50%;
  background:
    conic-gradient(from 90deg,
      rgba(255,0,0,0.18) 0%,
      rgba(48,102,74,0.20) 33%,
      rgba(59,92,255,0.20) 66%,
      rgba(255,0,0,0.18) 100%);
  filter: blur(28px);
  z-index: -1;
}
.hero-logo {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 100%;
  height: auto;
  filter: drop-shadow(0 16px 40px rgba(0,0,0,0.55));
}
.brand-mark { width: 40px; height: 40px; object-fit: contain; }
@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }

@media (max-width: 900px) {
  .hero { padding: 80px 0 60px; }
  .hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .hero-visual { order: -1; max-width: 320px; margin: 0 auto; }
}

/* ---------- 8. Cards / Grids ---------- */
.section-head { text-align: center; margin-bottom: 56px; max-width: 720px; margin-left: auto; margin-right: auto; }
.section-head p { font-size: 17px; }

.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.grid-feature { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 1024px) { .grid-3, .grid-feature { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .grid-3, .grid-2, .grid-feature { grid-template-columns: 1fr; } }

.card {
  position: relative;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 32px;
  transition: transform var(--t), border-color var(--t), box-shadow var(--t), background var(--t);
}
.card:hover { transform: translateY(-4px); border-color: var(--color-border-bright); background: var(--color-bg-elevated); }
.card h3 { margin-bottom: 12px; }
.card p { margin-bottom: 20px; color: var(--color-text-sub); }

/* Shield-color accents (per spec §4 rule 4) */
.card-shield { position: relative; padding-top: 36px; }
.card-shield::before { content: ""; position: absolute; top: 0; left: 24px; right: 24px; height: 4px; border-radius: 0 0 4px 4px; }
.shield-green::before { background: var(--color-green); box-shadow: 0 0 18px rgba(48,102,74,0.6); }
.shield-red::before   { background: var(--color-red); box-shadow: 0 0 18px rgba(255,0,0,0.45); }
.shield-blue::before  { background: var(--color-blue); box-shadow: 0 0 18px rgba(77,109,255,0.5); }

.card-shield .shield-label {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 999px;
  margin-bottom: 12px;
}
.shield-green .shield-label { color: var(--color-green); background: rgba(48,102,74,0.15); }
.shield-red   .shield-label { color: var(--color-red);   background: rgba(255,0,0,0.10); }
.shield-blue  .shield-label { color: var(--color-blue-light); background: var(--color-blue-tint); }

.card-icon {
  width: 48px; height: 48px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 10px;
  background: rgba(48,102,74,0.12);
  color: var(--color-green);
  margin-bottom: 20px;
}
.shield-red  .card-icon { background: rgba(255,0,0,0.10); color: var(--color-red); }
.shield-blue .card-icon { background: var(--color-blue-tint); color: var(--color-blue-light); }

.card .card-list { margin: 0 0 24px; padding: 0; }
.card .card-list li {
  padding: 8px 0 8px 22px;
  position: relative;
  color: var(--color-text-sub);
  font-size: 14px;
  border-bottom: 1px solid rgba(26,26,110,0.4);
}
.card .card-list li:last-child { border-bottom: 0; }
.card .card-list li::before {
  content: "";
  position: absolute; left: 0; top: 14px;
  width: 12px; height: 12px;
  border-left: 2px solid var(--color-green);
  border-bottom: 2px solid var(--color-green);
  transform: rotate(-45deg) translateY(-4px);
}
.shield-red .card-list li::before { border-color: var(--color-red); }
.shield-blue .card-list li::before { border-color: var(--color-blue-light); }

.card-link {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--color-text); font-weight: 600; font-size: 14px;
  border-bottom: 1px solid transparent;
}
.card-link:hover { border-bottom-color: var(--color-green); }
.card-link::after { content: "→"; transition: transform var(--t-fast); }
.card-link:hover::after { transform: translateX(4px); }
[dir="rtl"] .card-link::after { content: "←"; }
[dir="rtl"] .card-link:hover::after { transform: translateX(-4px); }

/* ---------- 9. Trust / Cert wall ---------- */
.cert-row {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
}
.cert-card {
  flex: 1 1 240px;
  max-width: 280px;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 24px;
  text-align: center;
}
.cert-card .cert-seal {
  width: 56px; height: 56px;
  margin: 0 auto 14px;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--color-green);
  border-radius: 50%;
  color: var(--color-green);
}
.cert-card h4 { font-size: 16px; margin-bottom: 6px; }
.cert-card p { font-size: 13px; color: var(--color-text-muted); margin: 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

/* ---------- 10. CTA banner ---------- */
.cta-banner {
  background: linear-gradient(135deg, var(--color-green) 0%, #1e4a35 100%);
  border-radius: var(--radius-lg);
  padding: 64px 48px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta-banner::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at 20% 20%, rgba(255,255,255,0.08), transparent 50%);
  pointer-events: none;
}
.cta-banner h2 { margin-bottom: 12px; }
.cta-banner p { color: rgba(255,255,255,0.85); margin-bottom: 28px; max-width: 60ch; margin-left: auto; margin-right: auto; }

/* ---------- 11. Footer ---------- */
.site-footer {
  background: #000018;
  border-top: 1px solid var(--color-border);
  padding: 64px 0 24px;
  color: var(--color-text-sub);
  font-size: 14px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 40px;
  margin-bottom: 48px;
}
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .footer-grid { grid-template-columns: 1fr; } }

.footer-col h4 { font-size: 14px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--color-text); margin-bottom: 16px; }
.footer-col a { display: block; padding: 6px 0; color: var(--color-text-sub); }
.footer-col a:hover { color: var(--color-text); }
.footer-col .tagline { margin-top: 12px; max-width: 28ch; color: var(--color-text-muted); }
.footer-social { display: flex; gap: 12px; margin-top: 16px; }
.footer-social a {
  width: 38px; height: 38px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  color: var(--color-text-sub);
}
.footer-social a:hover { border-color: var(--color-green); color: var(--color-green); }

.contact-line { display: flex; gap: 10px; align-items: flex-start; padding: 4px 0; }
.contact-line svg { flex-shrink: 0; margin-top: 4px; color: var(--color-green); }

.footer-bottom {
  border-top: 1px solid var(--color-border);
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 12px;
  color: var(--color-text-muted);
}
.footer-bottom a { color: var(--color-text-muted); }
.footer-bottom a:hover { color: var(--color-text-sub); }
.footer-licenses { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

/* ---------- 12. WhatsApp + Chat widgets (floating) ---------- */
.fab-wa {
  position: fixed; bottom: 24px; right: 24px;
  width: 56px; height: 56px;
  background: #25D366;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: white;
  box-shadow: 0 8px 24px rgba(37, 211, 102, 0.4);
  z-index: 200;
  transition: transform var(--t);
}
.fab-wa:hover { transform: scale(1.08); }
[dir="rtl"] .fab-wa { right: auto; left: 24px; }

/* ---------- 13. Utilities ---------- */
.text-center { text-align: center; }
.muted { color: var(--color-text-muted); }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.flex { display: flex; }
.gap-2 { gap: 8px; } .gap-3 { gap: 12px; } .gap-4 { gap: 16px; }

/* Reading progress bar (blog) */
.reading-progress { position: fixed; top: 0; left: 0; height: 3px; background: var(--color-green); z-index: 300; width: 0; transition: width 80ms linear; }

/* Breadcrumb */
.breadcrumb {
  padding: 16px 0;
  font-size: 13px;
  color: var(--color-text-muted);
  border-bottom: 1px solid var(--color-border);
}
.breadcrumb a { color: var(--color-text-muted); }
.breadcrumb a:hover { color: var(--color-text-sub); }
.breadcrumb .sep { margin: 0 8px; opacity: 0.5; }

/* ==========================================================
   14. Hero:Variant E (Saturated Brand Splash)
   Used on the Home page hero only. Bolder, more identity-led.
   Extra-wide logo glow per user request.
   ========================================================== */
.hero.hero-e {
  background:
    radial-gradient(900px 500px at 0% 0%, rgba(255,0,0,0.22), transparent 60%),
    radial-gradient(900px 500px at 100% 100%, rgba(59,92,255,0.22), transparent 60%),
    radial-gradient(900px 400px at 50% 100%, rgba(48,102,74,0.20), transparent 60%),
    linear-gradient(135deg, #000028 0%, #000046 50%, #1a0033 100%);
  position: relative;
  overflow: hidden;
  padding: 140px 0 100px;
}
.hero.hero-e::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(circle at 12% 18%, rgba(255,0,0,0.12), transparent 35%),
    radial-gradient(circle at 88% 82%, rgba(59,92,255,0.12), transparent 35%);
}
.hero.hero-e > .container { position: relative; z-index: 1; }
.hero.hero-e h1 {
  font-weight: 800;
  font-size: clamp(38px, 5.5vw, 64px);
  line-height: 1.05;
  letter-spacing: -0.015em;
}
.hero.hero-e .lead { font-size: clamp(17px, 1.6vw, 19px); color: #d0d6e6; }
.hero.hero-e .eyebrow { color: #FFFFFF; opacity: 0.75; }

/* Pill-shaped buttons feel right on saturated background */
.hero.hero-e .btn { border-radius: 999px; font-weight: 700; }
.hero.hero-e .btn-primary {
  background: #FFFFFF;
  color: #000046;
  box-shadow: 0 12px 32px rgba(0,0,0,0.35);
}
.hero.hero-e .btn-primary:hover { background: rgba(255,255,255,0.92); }
.hero.hero-e .btn-secondary {
  background: rgba(255,255,255,0.08);
  color: #FFFFFF;
  border-color: rgba(255,255,255,0.35);
}
.hero.hero-e .btn-secondary:hover { background: rgba(255,255,255,0.14); border-color: rgba(255,255,255,0.6); }

/* User requested: a little extra glow margin around the logo */
.hero.hero-e .shield-stack { max-width: 480px; }
.hero.hero-e .hero-logo-wrap::before {
  inset: -14%;                              /* wider bright disc */
  background:
    radial-gradient(circle at 50% 50%,
      rgba(255,255,255,0.96) 0%,
      rgba(244,247,252,0.86) 38%,
      rgba(244,247,252,0.20) 60%,
      rgba(244,247,252,0) 76%);
}
.hero.hero-e .hero-logo-wrap::after {
  inset: -28%;                              /* wider conic brand ring */
  filter: blur(48px);
  opacity: 0.95;
}
.hero.hero-e .hero-logo {
  filter: drop-shadow(0 22px 48px rgba(0,0,0,0.6))
          drop-shadow(0 0 18px rgba(255,255,255,0.18));
}

/* Trust badges on saturated hero:subtle border instead of harsh contrast */
.hero.hero-e .hero-trust { border-top-color: rgba(255,255,255,0.18); }
.hero.hero-e .trust-badge { color: rgba(255,255,255,0.85); }


/* ==========================================================
   15. Light Theme Wrapper (Variant D:Interior reading)
   Wrap any block in <div class="theme-light"> and all
   children flip to cream/white with dark text.
   ========================================================== */
.theme-paper {
  background: #fafaf7;
  color: #2a2a3e;
}
.theme-paper section { padding: 80px 0; }
@media (max-width: 768px) { .theme-paper section { padding: 56px 0; } }

/* Alternation on light pages:pure white instead of darker navy */
.theme-paper .section-alt { background: #ffffff; }

/* Section background utilities (subtle variation across light interior).
   Pair any with .theme-paper to override section background. */
.theme-paper .bg-white     { background: #ffffff; }
.theme-paper .bg-cream     { background: #fafaf7; }
.theme-paper .bg-sand      { background: #f5efe2; }  /* warm beige:premium */
.theme-paper .bg-slate     { background: #f4f6f9; }  /* cool slate:official */
.theme-paper .bg-navy-tint { background: #f1f3f9; }  /* subtle navy hint */
.theme-paper .bg-mint      { background: #eef4ee; }  /* subtle green hint */

/* Sand surfaces get a slightly warmer card border */
.theme-paper .bg-sand .card { border-color: #e6dcc4; box-shadow: 0 4px 18px rgba(60, 40, 0, 0.06); }
.theme-paper .bg-sand .card:hover { border-color: #d4c69d; box-shadow: 0 12px 32px rgba(60, 40, 0, 0.10); }
/* Slate surfaces get a slightly cooler card border */
.theme-paper .bg-slate .card { border-color: #dbe1ec; box-shadow: 0 4px 18px rgba(0, 0, 70, 0.06); }
.theme-paper .bg-slate .cert-card { border-color: #dbe1ec; }
/* Navy-tint surfaces:blog/insights vibe */
.theme-paper .bg-navy-tint .card { border-color: #d6dcec; }

.theme-paper h1, .theme-paper h2, .theme-paper h3, .theme-paper h4, .theme-paper h5, .theme-paper h6 {
  color: #000046;
}
.theme-paper p { color: #4a4a5e; }
.theme-paper .muted, .theme-paper .caption { color: #6a6a7e; }
.theme-paper .section-head p { color: #4a4a5e; }
.theme-paper .eyebrow { color: #30664A; }

/* Cards on light background:white surface with a soft brand shadow */
.theme-paper .card {
  background: #ffffff;
  border: 1px solid #ebe7d8;
  box-shadow: 0 4px 18px rgba(0, 0, 70, 0.06);
}
.theme-paper .card:hover {
  background: #ffffff;
  border-color: #d8d2c0;
  box-shadow: 0 12px 32px rgba(0, 0, 70, 0.12);
}
.theme-paper .card p { color: #4a4a5e; }
.theme-paper .card h3 { color: #000046; }

/* Slightly darker brand colors for text/accents on light */
.theme-paper .shield-red::before { background: #c41e1e; box-shadow: 0 0 14px rgba(196,30,30,0.30); }
.theme-paper .shield-blue::before { background: var(--color-blue-dark); box-shadow: 0 0 14px rgba(26,58,138,0.30); }
.theme-paper .shield-green::before { box-shadow: 0 0 14px rgba(48,102,74,0.30); }

.theme-paper .shield-red  .shield-label { color: #c41e1e; background: rgba(196,30,30,0.10); }
.theme-paper .shield-blue .shield-label { color: var(--color-blue-dark); background: rgba(26,58,138,0.10); }
.theme-paper .shield-green .shield-label { color: #30664A; background: rgba(48,102,74,0.10); }

.theme-paper .shield-red  .card-icon { background: rgba(196,30,30,0.10); color: #c41e1e; }
.theme-paper .shield-blue .card-icon { background: rgba(26,58,138,0.10); color: var(--color-blue-dark); }
.theme-paper .card-icon { background: rgba(48,102,74,0.10); color: #30664A; }

.theme-paper .card .card-list li {
  color: #4a4a5e;
  border-bottom-color: rgba(0, 0, 70, 0.08);
}
.theme-paper .card-link { color: #000046; }
.theme-paper .card-link:hover { border-bottom-color: #30664A; }

/* Buttons on light background */
.theme-paper .btn-primary {
  background: #000046;
  color: #ffffff;
  box-shadow: 0 4px 16px rgba(0, 0, 70, 0.22);
}
.theme-paper .btn-primary:hover { background: #1a1a6e; box-shadow: 0 8px 24px rgba(0,0,70,0.3); }
.theme-paper .btn-secondary {
  background: transparent;
  color: #000046;
  border-color: #000046;
}
.theme-paper .btn-secondary:hover { background: rgba(0, 0, 70, 0.05); }

/* Cert/trust wall */
.theme-paper .cert-card {
  background: #ffffff;
  border-color: #ebe7d8;
  box-shadow: 0 4px 12px rgba(0, 0, 70, 0.06);
}
.theme-paper .cert-card h4 { color: #000046; }
.theme-paper .cert-card p { color: #6a6a7e; }
.theme-paper .cert-seal { border-color: #30664A; color: #30664A; }

/* CTA banner on light pages:keep saturated green, looks great */
.theme-paper .cta-banner { color: #ffffff; }
.theme-paper .cta-banner h2 { color: #ffffff; }
.theme-paper .cta-banner p { color: rgba(255,255,255,0.9); }

/* Forms on light background (Contact, Get Quote) */
.theme-paper .form-wrap,
.theme-paper .form-section,
.theme-paper .promise-card,
.theme-paper .calendly-block {
  background: #ffffff;
  border: 1px solid #ebe7d8;
  box-shadow: 0 4px 18px rgba(0, 0, 70, 0.06);
}
.theme-paper .calendly-block { border-style: dashed; border-color: #c8c0a8; box-shadow: none; background: #fbf8ee; }
.theme-paper .field label { color: #4a4a5e; }
.theme-paper .field input,
.theme-paper .field select,
.theme-paper .field textarea {
  background: #ffffff;
  border-color: #d8d2c0;
  color: #1a1a2e;
}
.theme-paper .field input:focus,
.theme-paper .field select:focus,
.theme-paper .field textarea:focus {
  border-color: #30664A;
  box-shadow: 0 0 0 3px rgba(48, 102, 74, 0.18);
}
.theme-paper .step-num { background: rgba(48,102,74,0.15); color: #30664A; }
.theme-paper .form-section > p { color: #4a4a5e; }
.theme-paper .contact-method { border-bottom-color: #ebe7d8; }
.theme-paper .contact-method h4 { color: #000046; }
.theme-paper .contact-method p,
.theme-paper .contact-method a { color: #4a4a5e; }
.theme-paper .contact-method a:hover { color: #000046; }
.theme-paper .contact-method .ic { background: rgba(48,102,74,0.10); color: #30664A; }
.theme-paper .check {
  background: #ffffff;
  border-color: #d8d2c0;
  color: #4a4a5e;
}
.theme-paper .check:hover { border-color: #30664A; color: #1a1a2e; }
.theme-paper .promise-card h4 { color: #30664A; }
.theme-paper .promise-card ul li { color: #4a4a5e; border-bottom-color: #ebe7d8; }

/* Tables on light pages (About credentials table) */
.theme-paper table { background: #ffffff; }
.theme-paper table thead tr { background: #f6f3ec; }
.theme-paper table th { color: #000046; }
.theme-paper table td { color: #2a2a3e; border-top-color: #ebe7d8 !important; }

/* Vision/Mission/Values dual-language Arabic text */
.theme-paper [lang="ar"] { color: #4a4a5e; }

/* Hero inside theme-light (About/Contact/Get Quote use dark hero,
   but the hero is OUTSIDE theme-light, so this is mostly a safety net). */
.theme-paper .hero { background: #fafaf7; }
.theme-paper .hero h1 { color: #000046; }
.theme-paper .hero .lead { color: #4a4a5e; }
.theme-paper .hero .eyebrow { color: #30664A; }

/* ==========================================================
   16. Utility classes (constrained, token-based)
   Replaces ad-hoc inline style attributes across pages.
   ========================================================== */
.mt-0 { margin-top: 0; }       .mb-0 { margin-bottom: 0; }
.mt-1 { margin-top: var(--space-1); }  .mb-1 { margin-bottom: var(--space-1); }
.mt-2 { margin-top: var(--space-2); }  .mb-2 { margin-bottom: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }  .mb-3 { margin-bottom: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }  .mb-4 { margin-bottom: var(--space-4); }
.mt-5 { margin-top: var(--space-5); }  .mb-5 { margin-bottom: var(--space-5); }
.mt-6 { margin-top: var(--space-6); }  .mb-6 { margin-bottom: var(--space-6); }
.mt-7 { margin-top: var(--space-7); }  .mb-7 { margin-bottom: var(--space-7); }
.mt-8 { margin-top: var(--space-8); }  .mb-8 { margin-bottom: var(--space-8); }

.flex { display: flex; }
.flex-wrap { flex-wrap: wrap; }
.justify-center { justify-content: center; }
.items-center { align-items: center; }
.gap-2 { gap: var(--space-2); } .gap-3 { gap: var(--space-3); } .gap-4 { gap: var(--space-4); }
.mx-auto { margin-left: auto; margin-right: auto; }
.text-center { text-align: center; }
.muted { color: var(--color-text-muted); }
.max-w-prose { max-width: 65ch; }
.max-w-md { max-width: 720px; }
.max-w-lg { max-width: 820px; }

.section-tight { padding-top: 56px; padding-bottom: 56px; }
.section-loose { padding-top: 96px; padding-bottom: 96px; }

/* ==========================================================
   17. Unified interior hero (.hero-page)
   Replaces ad-hoc inline padding on About, Contact, Get Quote.
   ========================================================== */
.hero.hero-page { padding: 104px 0 60px; }
.hero.hero-page .container > div { max-width: 820px; }
@media (max-width: 768px) { .hero.hero-page { padding: 72px 0 44px; } }

/* ==========================================================
   18. Scroll-reveal animations + micro-interactions
   Gated on .js so no-JS users and crawlers see all content.
   ========================================================== */

/* Reveal-on-scroll: single elements */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
.js [data-reveal].is-visible { opacity: 1; transform: none; }

/* Variant: fade only (no rise) */
.js [data-reveal="fade"] { transform: none; }

/* Reveal-on-scroll: staggered group children */
.js [data-reveal-group] > * {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: opacity, transform;
}
.js [data-reveal-group] > *.is-visible { opacity: 1; transform: none; }

/* Animated stat / counter numbers */
.stat-num {
  font-family: var(--ff-heading);
  font-weight: 700;
  font-size: clamp(32px, 4vw, 44px);
  line-height: 1;
  color: var(--color-green);
}
.theme-paper .stat-num { color: var(--color-navy); }
.stat-label { font-size: 14px; color: var(--color-text-muted); margin-top: 6px; }
.theme-paper .stat-label { color: #6a6a7e; }

/* Hero entrance (home flagship): staggered rise, CSS only, no JS gate */
.hero-e .eyebrow,
.hero-e h1,
.hero-e .lead,
.hero-e .hero-ctas,
.hero-e .hero-trust { animation: heroIn 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) both; }
.hero-e .eyebrow    { animation-delay: 0.05s; }
.hero-e h1          { animation-delay: 0.14s; }
.hero-e .lead       { animation-delay: 0.24s; }
.hero-e .hero-ctas  { animation-delay: 0.34s; }
.hero-e .hero-trust { animation-delay: 0.44s; }
@keyframes heroIn {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}

/* Nav scroll state: deepen header once scrolled */
.site-header.scrolled {
  background: rgba(0, 0, 30, 0.94);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
}

/* Card hover already exists; add a smooth lift to cert cards too */
.cert-card { transition: transform var(--t), border-color var(--t), box-shadow var(--t); }
.cert-card:hover { transform: translateY(-4px); border-color: var(--color-border-bright); }
.theme-paper .cert-card:hover { box-shadow: 0 12px 32px rgba(0,0,70,0.12); }

/* ==========================================================
   19. Focus-visible accessibility + reduced-motion
   ========================================================== */
:focus-visible {
  outline: 2px solid var(--color-green);
  outline-offset: 2px;
  border-radius: 3px;
}
.hero-e .btn:focus-visible,
.cta-banner .btn:focus-visible { outline-color: #ffffff; outline-offset: 3px; }
.theme-paper :focus-visible { outline-color: var(--color-green); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================
   20. Contextual button + tag helpers
   ========================================================== */
.btn-sm { padding: 10px 18px; font-size: 14px; }

/* CTA banner sits on saturated green: invert the buttons to white */
.cta-banner .btn-primary {
  background: #ffffff;
  color: var(--color-green);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}
.cta-banner .btn-primary:hover { background: rgba(255, 255, 255, 0.92); }
.cta-banner .btn-secondary {
  background: transparent;
  border-color: #ffffff;
  color: #ffffff;
}
.cta-banner .btn-secondary:hover { background: rgba(255, 255, 255, 0.12); }

/* Category tags (blog cards, insight cards) */
.tag-green { color: var(--color-green); background: rgba(48, 102, 74, 0.15); }
.tag-blue  { color: var(--color-blue-light); background: var(--color-blue-tint); }
.tag-red   { color: var(--color-red); background: rgba(255, 0, 0, 0.10); }
.theme-paper .tag-green { color: #30664A; background: rgba(48, 102, 74, 0.12); }
.theme-paper .tag-blue  { color: var(--color-blue-dark); background: rgba(26, 58, 138, 0.10); }
.theme-paper .tag-red   { color: #c41e1e; background: rgba(196, 30, 30, 0.10); }

/* ==========================================================
   21. Page components: credentials table, leadership, phases
   ========================================================== */

/* Credentials table (About) */
.credentials-table {
  width: 100%;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.credentials-table table { width: 100%; border-collapse: collapse; }
.credentials-table th {
  text-align: left;
  padding: 16px 24px;
  font-family: var(--ff-heading);
  font-weight: 600;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.credentials-table td { padding: 18px 24px; }
.credentials-table .ref { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

.theme-paper .credentials-table {
  border-color: #e6dcc4;
  background: #ffffff;
  box-shadow: 0 4px 18px rgba(0, 0, 70, 0.06);
}
.theme-paper .credentials-table thead tr { background: #f6f3ec; }
.theme-paper .credentials-table th { color: #000046; }
.theme-paper .credentials-table tbody tr { border-top: 1px solid #ebe7d8; }
.theme-paper .credentials-table td { color: #2a2a3e; }
.theme-paper .credentials-table td.cell-muted { color: #6a6a7e; }
.theme-paper .credentials-table .ref { color: #000046; }

/* Leadership card (About) */
.leadership-card {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 32px;
  align-items: center;
}
@media (max-width: 560px) {
  .leadership-card { grid-template-columns: 1fr; text-align: center; justify-items: center; }
}
.team-avatar {
  width: 140px; height: 140px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-green) 0%, var(--color-navy) 100%);
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--color-border-bright);
}
.team-avatar span { font-family: var(--ff-heading); font-size: 42px; font-weight: 700; color: #ffffff; }
.team-role { color: var(--color-green); font-weight: 600; }
.theme-paper .team-role { color: #30664A; }

/* Phase tag (methodology) and bilingual note */
.phase-tag { color: var(--color-green); font-weight: 700; letter-spacing: 0.1em; }
.theme-paper .phase-tag { color: #30664A; }
.ar-note { font-family: var(--ff-ar-body); margin-top: 16px; }

/* ==========================================================
   22. Forms, contact methods, Calendly (Contact + Get Quote)
   Base (dark) styles. Light overrides live in section 15.
   ========================================================== */
.contact-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 48px; align-items: start; }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; gap: 32px; } }

.contact-method {
  display: flex; gap: 16px; align-items: flex-start;
  padding: 18px 0;
  border-bottom: 1px solid var(--color-border);
}
.contact-method:last-child { border-bottom: 0; }
.contact-method .ic {
  width: 44px; height: 44px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(48, 102, 74, 0.12); color: var(--color-green);
  border-radius: 10px;
}
.contact-method .ic-wa { background: rgba(37, 211, 102, 0.12); color: #25D366; }
.contact-method h4 { margin: 0 0 4px; font-size: 15px; }
.contact-method p, .contact-method a { margin: 0; color: var(--color-text-sub); font-size: 15px; }
.contact-method a:hover { color: var(--color-text); }

.form-wrap {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 36px;
}
.form-wrap h3 { margin-bottom: 8px; }
.form-wrap > p { margin-bottom: 28px; }
.form-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; margin-bottom: 16px; }
@media (max-width: 540px) { .form-row { grid-template-columns: 1fr; } }
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.field label { font-size: 13px; font-weight: 600; color: var(--color-text-sub); }
.field label .req { color: var(--color-form-error); }
.field label .opt { color: var(--color-text-muted); font-weight: 400; }
.field input, .field select, .field textarea {
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  padding: 12px 14px;
  border-radius: var(--radius);
  font-family: inherit;
  font-size: 15px;
  transition: border-color var(--t), box-shadow var(--t);
  width: 100%;
  min-width: 0;
  max-width: 100%;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--color-green);
  box-shadow: 0 0 0 3px rgba(48, 102, 74, 0.18);
}
.field textarea { min-height: 130px; resize: vertical; }

/* Honeypot: hidden from humans, bots fill it. Clipped in place, not pushed
   off-screen: a far negative offset widens right-to-left pages. */
.hp-field { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Security assurance note */
.secure-note {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 14px;
  background: rgba(48, 102, 74, 0.08);
  border: 1px solid rgba(48, 102, 74, 0.3);
  border-radius: 8px;
  margin-bottom: 18px;
  font-size: 13px;
  color: var(--color-text-sub);
}
.secure-note svg { flex-shrink: 0; margin-top: 2px; }
.secure-note strong { color: var(--color-text); }
.theme-paper .secure-note { color: #4a4a5e; }
.theme-paper .secure-note strong { color: #000046; }

.calendly-block {
  background: var(--color-bg-card);
  border: 1px dashed var(--color-border-bright);
  border-radius: var(--radius-lg);
  padding: 24px;
  text-align: center;
  margin-top: 24px;
}
.calendly-block svg { width: 32px; height: 32px; color: var(--color-green); margin-bottom: 8px; }
.calendly-block strong { display: block; font-size: 16px; color: var(--color-text); margin-bottom: 6px; }
.calendly-block .caption { color: var(--color-text-muted); margin-bottom: 14px; }

/* Form helpers */
.btn-block { width: 100%; }
.link-quiet { color: var(--color-text-sub); text-decoration: underline; }
.theme-paper .link-quiet { color: #6a6a7e; }
.link-wa { color: #25D366; font-weight: 600; }

/* Tighten a section that follows a hero, even inside theme-light */
.theme-paper .section-tight { padding-top: 40px; padding-bottom: 56px; }

/* ==========================================================
   23. Quote form (Get Quote): grid, promise cards, steps, checks
   Light overrides for shared classes live in section 15.
   ========================================================== */
.quote-grid { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 48px; align-items: start; }
@media (max-width: 900px) { .quote-grid { grid-template-columns: 1fr; gap: 32px; } }

.sticky-side { position: sticky; top: 96px; }
.promise-card {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 24px;
  margin-bottom: 20px;
}
.promise-card h4 { font-size: 14px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-green); margin-bottom: 12px; }
.promise-card ul li {
  padding: 8px 0 8px 24px;
  position: relative;
  font-size: 14px;
  color: var(--color-text-sub);
  border-bottom: 1px solid rgba(26, 26, 110, 0.4);
}
.promise-card ul li:last-child { border-bottom: 0; }
.promise-card ul li::before { content: "\2713"; position: absolute; left: 0; top: 8px; color: var(--color-green); font-weight: 700; }
.promise-list-plain li { padding-left: 0; }
.promise-list-plain li::before { content: none; }

.form-section {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 36px;
  margin-bottom: 24px;
}
.form-section h3 { font-size: 18px; margin-bottom: 4px; }
.form-section > p { margin-bottom: 24px; font-size: 14px; }
.step-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  background: rgba(48, 102, 74, 0.18); color: var(--color-green);
  border-radius: 50%; font-weight: 700; font-size: 13px;
  margin-right: 10px;
}
.optional { font-size: 12px; font-weight: 500; color: var(--color-text-muted); letter-spacing: 0.08em; text-transform: uppercase; margin-left: 8px; }

.check-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (max-width: 540px) { .check-grid { grid-template-columns: 1fr; } }
.check {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 14px;
  color: var(--color-text-sub);
  transition: border-color var(--t), background var(--t), color var(--t);
}
.check:hover { border-color: var(--color-border-bright); color: var(--color-text); }
.check input { width: 18px; height: 18px; accent-color: var(--color-green); flex-shrink: 0; margin-top: 2px; }
.check input:checked + span { color: var(--color-text); }

.info-note {
  background: rgba(48, 102, 74, 0.10);
  border-left: 3px solid var(--color-green);
  padding: 12px 14px;
  border-radius: 0 6px 6px 0;
  color: var(--color-text-sub);
  margin-bottom: 16px;
}
.info-note strong { color: var(--color-text); }
.theme-paper .info-note { color: #4a4a5e; }
.theme-paper .info-note strong { color: #000046; }
.link-strong { color: var(--color-text); font-weight: 500; }
.theme-paper .link-strong { color: #000046; }

/* ==========================================================
   24. Refined form inputs + validation states (override)
   ========================================================== */

/* Base (dark surfaces) */
.field input, .field select, .field textarea {
  background-color: #07073a;
  border: 1.5px solid #23236b;
  color: var(--color-text);
  border-radius: 8px;
  padding: 14px 16px;
  font-size: 15px;
  transition: border-color var(--t), box-shadow var(--t), background var(--t);
}
.field input::placeholder, .field textarea::placeholder { color: #6b7299; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: #34348a; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--color-green);
  box-shadow: 0 0 0 4px rgba(48, 102, 74, 0.22);
  background-color: #0a0a48;
}

/* Light surfaces (Contact and Get Quote forms live inside .theme-paper) */
.theme-paper .field input,
.theme-paper .field select,
.theme-paper .field textarea {
  background-color: #f4f6fa;      /* soft cool fill, not pure white */
  border: 1.5px solid #e3e7ef;
  color: #1a1a2e;
}
.theme-paper .field input::placeholder,
.theme-paper .field textarea::placeholder { color: #9aa1b2; }
.theme-paper .field input:hover,
.theme-paper .field select:hover,
.theme-paper .field textarea:hover { border-color: #c7cedd; background-color: #ffffff; }
.theme-paper .field input:focus,
.theme-paper .field select:focus,
.theme-paper .field textarea:focus {
  background-color: #ffffff;
  border-color: var(--color-green);
  box-shadow: 0 0 0 4px rgba(48, 102, 74, 0.15);
}

/* Custom select chevron (replaces the default OS arrow) */
.field select {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  padding-right: 42px;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238ea1ff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 16px;
}
.theme-paper .field select {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236a6a7e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 16px;
}
.theme-paper .field select:hover, .theme-paper .field select:focus { background-color: #ffffff; }
/* RTL: place the chevron on the left and pad accordingly */
[dir="rtl"] .field select {
  background-position: left 14px center;
  padding-right: 16px;
  padding-left: 42px;
}

/* Validation states (driven by main.js via aria-invalid) */
.field input[aria-invalid="true"],
.field select[aria-invalid="true"],
.field textarea[aria-invalid="true"] {
  border-color: var(--color-form-error);
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.16);
}
.field-error {
  display: block;
  color: var(--color-form-error);
  font-size: 12.5px;
  font-weight: 500;
  margin-top: 4px;
}
.theme-paper .field-error { color: #c1271f; }

/* Form-level success / error banner */
.form-banner {
  padding: 16px 18px;
  border-radius: 10px;
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 20px;
}
.form-banner.is-success {
  background: rgba(48, 102, 74, 0.22);
  border: 1px solid rgba(74, 160, 112, 0.7);
  border-inline-start: 5px solid #4aa070;
  box-shadow: 0 0 0 4px rgba(48, 102, 74, 0.15);
  color: var(--color-text);
  padding: 20px 22px;
  font-size: 15px;
}
/* Success: title with a tick, then the numbered next steps */
.form-banner__title { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; font-size: 18px; font-weight: 700; }
.form-banner__title::before {
  content: ""; flex: none; width: 28px; height: 28px; border-radius: 50%;
  background: #2f8a5a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 16px no-repeat;
}
.form-banner__steps { margin: 0; padding-inline-start: 22px; display: grid; gap: 6px; }
.form-banner__steps li:only-child { list-style: none; margin-inline-start: -22px; }
.form-banner__action { margin-top: 16px; }
.theme-paper .form-banner.is-success { color: #1a3a2a; }
.form-banner.is-error { background: rgba(220, 38, 38, 0.10); border: 1px solid rgba(220, 38, 38, 0.45); color: var(--color-text); }
.theme-paper .form-banner.is-error { color: #7a1c16; }

/* ==========================================================
   27. RTL (Arabic) adjustments
   Applied on pages with <html dir="rtl">. Flips directional
   paddings, list markers, borders, and neutralizes Latin
   letter-spacing that would break connected Arabic script.
   ========================================================== */
/* Neutralize letter-spacing / uppercase spacing on Arabic labels */
[dir="rtl"] .eyebrow,
[dir="rtl"] .shield-label,
[dir="rtl"] .shield-badge,
[dir="rtl"] .optional,
[dir="rtl"] .phase-tag,
[dir="rtl"] .footer-col h4,
[dir="rtl"] .footer-licenses,
[dir="rtl"] .cat-chip,
[dir="rtl"] .trust-badge,
[dir="rtl"] .credentials-table th { letter-spacing: normal; }

/* Card bullet list */
[dir="rtl"] .card .card-list li { padding-left: 0; padding-right: 22px; }
[dir="rtl"] .card .card-list li::before { left: auto; right: 0; }

/* Check list (who-needs, deliverables) */
[dir="rtl"] .check-list li { padding-left: 0; padding-right: 32px; }
[dir="rtl"] .check-list li::before { left: auto; right: 0; }

/* Numbered list (methodology) */
[dir="rtl"] .num-list li { padding-left: 0; padding-right: 48px; }
[dir="rtl"] .num-list li::before { left: auto; right: 0; }

/* Promise card list (get quote) */
[dir="rtl"] .promise-card ul li { padding: 8px 24px 8px 0; }
[dir="rtl"] .promise-card ul li::before { left: auto; right: 0; }

/* Article prose lists + blockquote */
[dir="rtl"] .article-body ul,
[dir="rtl"] .article-body ol { padding-left: 0; padding-right: 22px; }
[dir="rtl"] .article-body blockquote { border-left: 0; border-right: 4px solid var(--color-green); }

/* Left-border accent notes */
[dir="rtl"] .info-note { border-left: 0; border-right: 3px solid var(--color-green); border-radius: 6px 0 0 6px; }

/* Inline spacing helpers */
[dir="rtl"] .step-num { margin-right: 0; margin-left: 10px; }
[dir="rtl"] .optional { margin-left: 0; margin-right: 8px; }

/* Contact-method icon already flows via flex; nothing needed */

/* ==========================================================
   25. Service detail pages (breadcrumb, badge, lists, FAQ, pricing)
   ========================================================== */

/* Breadcrumb sits on the dark hero area */
.breadcrumb .container { display: flex; flex-wrap: wrap; align-items: center; }
.theme-paper .breadcrumb { color: #6a6a7e; border-bottom-color: #ebe7d8; }
.theme-paper .breadcrumb a { color: #6a6a7e; }
.theme-paper .breadcrumb a:hover { color: #000046; }

/* Shield badge on the (dark) service hero */
.shield-badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px; border-radius: 999px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  margin-bottom: 18px;
}
.shield-badge .dot { width: 8px; height: 8px; border-radius: 50%; }
.shield-badge.is-green { color: #6fc89a; background: rgba(48, 102, 74, 0.28); }
.shield-badge.is-green .dot { background: #6fc89a; }
.shield-badge.is-red { color: #ff7a7a; background: rgba(255, 0, 0, 0.18); }
.shield-badge.is-red .dot { background: #ff7a7a; }
.shield-badge.is-blue { color: var(--color-blue-light); background: rgba(77, 109, 255, 0.22); }
.shield-badge.is-blue .dot { background: var(--color-blue-light); }

/* Centered single-column content blocks for service articles */
.svc-block { max-width: 820px; margin-left: auto; margin-right: auto; }
.svc-block + .svc-block { margin-top: 52px; }
.svc-block h2 { font-size: clamp(24px, 2.6vw, 32px); margin-bottom: 16px; }
.svc-block h3 { font-size: 20px; margin: 24px 0 10px; }
.svc-block p { font-size: 16px; }

/* Checkmark list (who needs this, deliverables) */
.check-list li {
  position: relative;
  padding: 11px 0 11px 32px;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text-sub);
}
.check-list li:last-child { border-bottom: 0; }
.check-list li::before {
  content: "\2713";
  position: absolute; left: 0; top: 11px;
  color: var(--color-green); font-weight: 700;
}
.theme-paper .check-list li { color: #4a4a5e; border-bottom-color: #ebe7d8; }

/* Numbered list (methodology / deliverables) */
.num-list { counter-reset: nlist; }
.num-list li {
  position: relative;
  padding: 12px 0 12px 48px;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text-sub);
  min-height: 40px;
}
.num-list li:last-child { border-bottom: 0; }
.num-list li::before {
  counter-increment: nlist;
  content: counter(nlist);
  position: absolute; left: 0; top: 9px;
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(48, 102, 74, 0.18); color: var(--color-green);
  border-radius: 50%; font-weight: 700; font-size: 13px; font-family: var(--ff-heading);
}
.num-list li strong { color: var(--color-text); }
.theme-paper .num-list li { color: #4a4a5e; border-bottom-color: #ebe7d8; }
.theme-paper .num-list li strong { color: #000046; }

/* Standards reference list (monospace tags) */
.standards-list { display: flex; flex-wrap: wrap; gap: 10px; }
.standards-list li {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  padding: 8px 14px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  color: var(--color-text-sub);
}
.theme-paper .standards-list li { border-color: #e0e4ee; color: #3a4254; background: #fff; }

/* Timeline + pricing callout */
.pricing-callout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  padding: 28px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-bg-card);
}
@media (max-width: 540px) { .pricing-callout { grid-template-columns: 1fr; gap: 16px; } }
.pricing-callout .label { font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-text-muted); margin-bottom: 6px; }
.pricing-callout .value { font-size: 20px; font-weight: 700; font-family: var(--ff-heading); color: var(--color-text); }
.pricing-callout .note { grid-column: 1 / -1; font-size: 13px; color: var(--color-text-muted); margin: 0; }
.theme-paper .pricing-callout { background: #ffffff; border-color: #e6dcc4; box-shadow: 0 4px 18px rgba(0,0,70,0.06); }
.theme-paper .pricing-callout .value { color: #000046; }
.theme-paper .pricing-callout .label, .theme-paper .pricing-callout .note { color: #6a6a7e; }

/* FAQ accordion (native details/summary) */
.faq-item { border-bottom: 1px solid var(--color-border); }
.theme-paper .faq-item { border-bottom-color: #ebe7d8; }
.faq-item summary {
  cursor: pointer;
  padding: 18px 0;
  font-family: var(--ff-heading);
  font-weight: 600;
  font-size: 17px;
  color: var(--color-text);
  list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
}
.theme-paper .faq-item summary { color: #000046; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  font-size: 22px; font-weight: 400; line-height: 1;
  color: var(--color-green);
  transition: transform var(--t);
  flex-shrink: 0;
}
.faq-item[open] summary::after { content: "\00d7"; }
.faq-item p { padding: 0 0 18px; margin: 0; color: var(--color-text-sub); }
.theme-paper .faq-item p { color: #4a4a5e; }

/* CTA box at the foot of a service page */
.svc-cta {
  text-align: center;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 40px;
  background: var(--color-bg-card);
}
.theme-paper .svc-cta { background: #ffffff; border-color: #e6dcc4; box-shadow: 0 4px 18px rgba(0,0,70,0.06); }

/* ==========================================================
   26. Blog, articles, case studies, legal
   ========================================================== */

/* Category filter chips (visual on the static prototype) */
.cat-bar { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 40px; }
.cat-chip {
  padding: 8px 16px; border-radius: 999px;
  border: 1px solid var(--color-border);
  font-size: 13px; font-weight: 600; color: var(--color-text-sub);
}
.cat-chip:hover, .cat-chip.active { color: var(--color-text); border-color: var(--color-green); background: rgba(48,102,74,0.10); }
.theme-paper .cat-chip { border-color: #e0e4ee; color: #4a4a5e; }
.theme-paper .cat-chip:hover, .theme-paper .cat-chip.active { color: #000046; border-color: #30664A; background: rgba(48,102,74,0.08); }

/* Post grid + cards */
.post-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; }
@media (max-width: 760px) { .post-grid { grid-template-columns: 1fr; } }
.post-card { display: flex; flex-direction: column; overflow: hidden; padding: 0; }
.post-cover {
  height: 180px;
  display: flex; align-items: flex-end;
  padding: 16px;
  background: linear-gradient(135deg, #000028, #000046);
}
.post-cover.cat-grc   { background: linear-gradient(135deg, #0a2a1c 0%, #30664A 100%); }
.post-cover.cat-iso   { background: linear-gradient(135deg, #12233f 0%, #2f5d7a 100%); }
.post-cover.cat-pdpl  { background: linear-gradient(135deg, #0a1840 0%, var(--color-blue-dark) 100%); }
.post-cover.cat-pentest { background: linear-gradient(135deg, #3a0a0a 0%, #c41e1e 100%); }
.post-cover .shield-label { background: rgba(255,255,255,0.16); color: #fff; }
.post-card .post-body { padding: 24px; display: flex; flex-direction: column; flex: 1; }
.post-card h3 { margin-bottom: 10px; font-size: 20px; }
.post-meta { font-size: 12.5px; color: var(--color-text-muted); margin: 4px 0 16px; }
.theme-paper .post-meta { color: #6a6a7e; }
.post-card .card-link { margin-top: auto; }
.post-card.featured { grid-column: 1 / -1; }
@media (min-width: 761px) {
  .post-card.featured { display: grid; grid-template-columns: 1.1fr 1fr; }
  .post-card.featured .post-cover { height: 100%; min-height: 260px; }
}

/* Article (blog post + legal) */
.article { max-width: 760px; margin: 0 auto; }
.article-header { max-width: 760px; margin: 0 auto 28px; }
.article-cover {
  max-width: 980px; margin: 0 auto 40px;
  height: 280px; border-radius: var(--radius-lg);
  background: linear-gradient(135deg, #000028, #000046);
}
.article-cover.cat-grc { background: linear-gradient(135deg, #0a2a1c 0%, #30664A 100%); }
.article-cover.cat-iso { background: linear-gradient(135deg, #12233f 0%, #2f5d7a 100%); }
.article-cover.cat-pdpl { background: linear-gradient(135deg, #0a1840 0%, var(--color-blue-dark) 100%); }
.article-body { font-size: 17px; line-height: 1.8; }
.article-body h2 { font-size: clamp(24px, 2.6vw, 30px); margin: 40px 0 14px; }
.article-body h3 { font-size: 21px; margin: 28px 0 10px; }
.article-body p { margin: 0 0 18px; }
.article-body ul, .article-body ol { margin: 0 0 18px; padding-left: 22px; }
.article-body ul li, .article-body ol li { margin-bottom: 8px; color: var(--color-text-sub); list-style: disc; }
.article-body ol li { list-style: decimal; }
.theme-paper .article-body ul li, .theme-paper .article-body ol li { color: #4a4a5e; }
.article-body blockquote {
  margin: 24px 0; padding: 14px 20px;
  border-left: 4px solid var(--color-green);
  background: rgba(48,102,74,0.08);
  font-style: italic; color: var(--color-text-sub);
}
.theme-paper .article-body blockquote { color: #4a4a5e; }
.article-body strong { color: var(--color-text); }
.theme-paper .article-body strong { color: #000046; }

/* Author bio + share */
.author-bio { display: flex; gap: 18px; align-items: center; margin-top: 48px; }
.author-bio .team-avatar { width: 64px; height: 64px; flex-shrink: 0; }
.author-bio .team-avatar span { font-size: 24px; }
.author-bio h4 { margin: 0 0 2px; }
.author-bio p { margin: 0; font-size: 14px; }
.share { display: flex; gap: 10px; align-items: center; margin-top: 28px; }
.share span { font-size: 13px; color: var(--color-text-muted); }
.share a {
  width: 36px; height: 36px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--color-border); color: var(--color-text-sub);
}
.share a:hover { border-color: var(--color-green); color: var(--color-green); }
.theme-paper .share a { border-color: #e0e4ee; color: #6a6a7e; }

/* Case studies placeholders */
.case-card { position: relative; opacity: 0.9; }
.case-card .case-badge {
  display: inline-block; font-size: 11px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 999px;
  background: rgba(255,184,0,0.14); color: #b88600;
  margin-bottom: 14px;
}
.case-icon {
  width: 52px; height: 52px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(48,102,74,0.1); color: var(--color-green);
  margin-bottom: 16px;
}
.theme-paper .case-card { border-style: dashed; }

/* ==========================================================
   28. Elevation pass: guardline, ops-mono layer, hero atmosphere
   Design doctrine: the three shields (red/green/blue) and the
   firm's regulatory credentials ARE the identity. This section
   turns both into visible, systemic design language.
   All additions are override-only; nothing above is modified.
   ========================================================== */

:root {
  /* "Ops" utility face for credentials, IDs and classification labels */
  --ff-mono: ui-monospace, 'Cascadia Mono', 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
  /* The tri-shield guardline: offensive red, GRC green, defensive blue */
  --guardline: linear-gradient(90deg,
      transparent 0%,
      rgba(255, 0, 0, 0.55) 18%,
      rgba(48, 102, 74, 0.85) 50%,
      rgba(77, 109, 255, 0.55) 82%,
      transparent 100%);
}

/* --- Signature 1: the guardline under the sticky header (every page) --- */
.site-header::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: var(--guardline);
  pointer-events: none;
}
[dir="rtl"] .site-header::after {
  background: linear-gradient(270deg,
      transparent 0%,
      rgba(255, 0, 0, 0.55) 18%,
      rgba(48, 102, 74, 0.85) 50%,
      rgba(77, 109, 255, 0.55) 82%,
      transparent 100%);
}

/* Guardline echo under one key word in the home headline */
.tri-underline {
  background: linear-gradient(90deg,
      rgba(255, 0, 0, 0.85),
      rgba(48, 102, 74, 1) 50%,
      rgba(77, 109, 255, 0.9));
  background-repeat: no-repeat;
  background-size: 100% 5px;
  background-position: 0 96%;
  padding-bottom: 4px;
}

/* --- Signature 2: the ops-mono credential layer --- */
.eyebrow,
.trust-badge,
.shield-label,
.shield-badge,
.stat-num,
.post-meta,
.case-badge {
  font-family: var(--ff-mono);
}
.eyebrow { font-weight: 700; letter-spacing: 0.16em; }
/* Classification tick before section eyebrows: a short redaction-style rule */
.eyebrow::before {
  content: "";
  display: inline-block;
  width: 18px; height: 2px;
  background: currentColor;
  vertical-align: middle;
  margin-inline-end: 10px;
  opacity: 0.7;
}
/* Arabic labels stay in Kufi: connected script, no mono tradition */
[dir="rtl"] .eyebrow,
[dir="rtl"] .trust-badge,
[dir="rtl"] .shield-label,
[dir="rtl"] .shield-badge,
[dir="rtl"] .post-meta,
[dir="rtl"] .case-badge { font-family: var(--ff-ar-head); font-weight: 600; }

/* --- Atmosphere: faint defense grid on all dark heroes --- */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(0deg,   rgba(255,255,255,0.030) 0 1px, transparent 1px 56px),
    repeating-linear-gradient(90deg,  rgba(255,255,255,0.030) 0 1px, transparent 1px 56px);
  -webkit-mask-image: radial-gradient(120% 90% at 50% 0%, black 30%, transparent 78%);
  mask-image: radial-gradient(120% 90% at 50% 0%, black 30%, transparent 78%);
}
.hero > .container { position: relative; z-index: 1; }
/* Light-theme safety net heroes get no grid */
.theme-paper .hero::before { content: none; }

/* --- Atmosphere: perimeter sweep around the home logo --- */
/* A slow luminous watch-sweep: continuous monitoring, not Hollywood radar. */
.hero-e .hero-visual::before {
  content: "";
  position: absolute;
  inset: -22%;
  border-radius: 50%;
  background: conic-gradient(from 0deg,
      transparent 0deg,
      rgba(142, 161, 255, 0.05) 22deg,
      rgba(255, 255, 255, 0.09) 40deg,
      transparent 72deg);
  -webkit-mask-image: radial-gradient(circle, transparent 34%, black 46%, black 62%, transparent 74%);
  mask-image: radial-gradient(circle, transparent 34%, black 46%, black 62%, transparent 74%);
  animation: sweep 16s linear infinite;
  pointer-events: none;
}
@keyframes sweep { to { transform: rotate(360deg); } }
@media (max-width: 900px) { .hero-e .hero-visual::before { content: none; } }

/* --- Craft floor: cards, buttons, micro-interactions --- */

/* Shield-colored glow on hover: each card answers in its own discipline */
.shield-red:hover    { box-shadow: 0 14px 40px rgba(255, 0, 0, 0.10); }
.shield-green:hover  { box-shadow: 0 14px 40px rgba(48, 102, 74, 0.16); }
.shield-blue:hover   { box-shadow: 0 14px 40px rgba(77, 109, 255, 0.12); }
.theme-paper .shield-red:hover   { box-shadow: 0 14px 36px rgba(196, 30, 30, 0.14); border-color: rgba(196,30,30,0.35); }
.theme-paper .shield-green:hover { box-shadow: 0 14px 36px rgba(48, 102, 74, 0.16); border-color: rgba(48,102,74,0.40); }
.theme-paper .shield-blue:hover  { box-shadow: 0 14px 36px rgba(26, 58, 138, 0.14); border-color: rgba(26,58,138,0.35); }

/* Button press state: physical confirmation */
.btn:active { transform: translateY(0) scale(0.985); }

/* Card link warms toward action green */
.card-link:hover { color: var(--color-green-light); }
.theme-paper .card-link:hover { color: #30664A; }

/* FAQ summaries acknowledge the pointer */
.faq-item summary { transition: color var(--t-fast); }
.faq-item summary:hover { color: var(--color-green-light); }
.theme-paper .faq-item summary:hover { color: #30664A; }

/* Standards chips lift slightly: they are handles, not decoration */
.standards-list li { transition: border-color var(--t-fast), transform var(--t-fast); }
.standards-list li:hover { border-color: var(--color-green); transform: translateY(-1px); }

/* Modern text wrapping: no orphan words in display type */
h1, h2, h3, .section-head h2 { text-wrap: balance; }
.section-head p, .hero .lead { text-wrap: pretty; }

/* Branded selection + quiet scrollbar */
::selection { background: #30664A; color: #ffffff; }
html { scrollbar-color: #1a1a6e #000018; }

/* Cert seals: dual ring, license-stamp weight */
.cert-card .cert-seal { box-shadow: 0 0 0 4px rgba(48, 102, 74, 0.12); }

/* ==========================================================
   29. Cinematic pass: orchestrated load, seams, ambient depth, ledger
   One choreographed sequence on load ("perimeter lock"), the guardline
   reused as a scroll seam between hero and interior on every page,
   doctrine-colored card reveals, and ambient particle depth on the home
   hero. All motion is CSS or the existing IntersectionObserver; every
   effect is neutralised by prefers-reduced-motion (section 19).
   ========================================================== */

/* --- Load sequence step 1: the guardline draws across the header --- */
.js .site-header::after {
  transform: scaleX(0);
  transform-origin: left center;
  animation: guardDraw 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) 0.1s forwards;
}
[dir="rtl"] .js .site-header::after { transform-origin: right center; }
@keyframes guardDraw { to { transform: scaleX(1); } }

/* --- Step 2: the logo powers on --- */
.js .hero-e .hero-visual {
  animation: powerOn 1.1s cubic-bezier(0.22, 0.61, 0.36, 1) 0.45s both;
}
@keyframes powerOn {
  from { opacity: 0; transform: scale(0.94); filter: brightness(0.55) saturate(0.6); }
  to   { opacity: 1; transform: none;        filter: none; }
}

/* --- Step 3: hero copy rises after the draw (re-times section 18) --- */
.js .hero-e .eyebrow    { animation-delay: 0.62s; }
.js .hero-e h1          { animation-delay: 0.74s; }
.js .hero-e .lead       { animation-delay: 0.88s; }
.js .hero-e .hero-ctas  { animation-delay: 1.02s; }
.js .hero-e .hero-trust { animation-delay: 1.16s; }
/* The headline underline draws last, once the word is on screen */
.js .tri-underline { background-size: 0% 5px; animation: triDraw 0.7s ease-out 1.5s forwards; }
@keyframes triDraw { to { background-size: 100% 5px; } }
[dir="rtl"] .tri-underline { background-position: 100% 96%; }

/* --- Interior pages: the eyebrow and h1 get a lighter entrance --- */
.js .hero-page .eyebrow, .js .hero-page .shield-badge, .js .hero-page .breadcrumb,
.js .hero-page h1, .js .hero-page .lead, .js .hero-page .hero-ctas {
  animation: heroIn 0.6s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
.js .hero-page .breadcrumb    { animation-delay: 0.35s; }
.js .hero-page .eyebrow,
.js .hero-page .shield-badge  { animation-delay: 0.45s; }
.js .hero-page h1             { animation-delay: 0.55s; }
.js .hero-page .lead          { animation-delay: 0.68s; }
.js .hero-page .hero-ctas     { animation-delay: 0.80s; }

/* --- Seam: guardline draws in where the dark hero meets the light interior --- */
[data-seam] { position: relative; }
[data-seam]::before {
  content: "";
  position: absolute; top: -1px; left: 0; right: 0; height: 3px;
  background: var(--guardline);
  z-index: 2;
}
.js [data-seam]::before {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1.3s cubic-bezier(0.22, 0.61, 0.36, 1) 0.15s;
}
[dir="rtl"] .js [data-seam]::before { transform-origin: right center; }
.js [data-seam].is-visible::before { transform: scaleX(1); }

/* --- Doctrine-colored reveals: shield bars draw in their own color --- */
.js [data-reveal-group] > .card-shield::before {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) 0.35s;
}
[dir="rtl"] .js [data-reveal-group] > .card-shield::before { transform-origin: right center; }
.js [data-reveal-group] > .card-shield.is-visible::before { transform: scaleX(1); }

/* --- Ambient depth: particle canvas behind the home hero --- */
.hero-ambient {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  opacity: 0.6;
  z-index: 0;
}
.hero-e > .container { position: relative; z-index: 1; }
/* Parallax layers move via transform from main.js (desktop, motion allowed) */
.hero-e .hero-visual, .hero-ambient { will-change: transform; }

/* --- Registry ledger: real counts, set as a classification strip --- */
.ledger {
  background: #000018;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  padding: 22px 0;
}
.ledger .container {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 12px 0;
}
.ledger-item {
  display: flex; align-items: baseline; gap: 10px;
  padding: 6px 28px;
  border-inline-end: 1px solid var(--color-border);
  font-family: var(--ff-mono);
}
.ledger-item:last-child { border-inline-end: 0; }
.ledger-num {
  font-size: 26px; font-weight: 700; line-height: 1;
  color: #ffffff;
  min-width: 1.4ch; text-align: end;
}
.ledger-label {
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--color-text-muted);
}
.ledger-item.is-red   .ledger-num { color: #ff7a7a; }
.ledger-item.is-green .ledger-num { color: #6fc89a; }
.ledger-item.is-blue  .ledger-num { color: var(--color-blue-light); }
[dir="rtl"] .ledger-label { letter-spacing: normal; font-family: var(--ff-ar-head); }
[dir="rtl"] .ledger-num { font-family: var(--ff-mono); }
@media (max-width: 640px) {
  .ledger .container { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 0; }
  .ledger-item { border-inline-end: 0; justify-content: center; padding: 6px 12px; }
  .ledger-num { font-size: 22px; }
}

/* --- Section depth: interior sections get a faint top highlight line --- */
.theme-paper section { position: relative; }
.theme-paper section + section::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0,0,70,0.08) 30%, rgba(0,0,70,0.08) 70%, transparent);
}

/* --- Reduced motion: every step above becomes static --- */
@media (prefers-reduced-motion: reduce) {
  .js .site-header::after, .js [data-seam]::before,
  .js [data-reveal-group] > .card-shield::before { transform: none; }
  .js .tri-underline { background-size: 100% 5px; }
  .hero-ambient { display: none; }
}

/* ==========================================================
   30. Imagery: blog covers, discipline art on service heroes
   Illustrations are brand-locked SVG (assets/img/blog-*.svg,
   cat-*.svg): resolution independent, a few KB, language neutral.
   Drop-in raster upgrades keep the same filenames with .webp.
   ========================================================== */
.post-cover, .article-cover { position: relative; overflow: hidden; }
.cover-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.post-cover > .shield-label { position: relative; z-index: 1; }
.post-card:hover .cover-img { transform: scale(1.04); }

/* Service hero art: sits behind the copy at the inline end, faded in,
   masked toward the text so headlines stay perfectly legible. */
.hero.hero-page { overflow: hidden; }
.hero-art {
  position: absolute; top: 0; inset-inline-end: 0;
  height: 100%; width: 48%;
  object-fit: cover;
  opacity: 0.55;
  pointer-events: none;
  z-index: 0;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 45%);
  mask-image: linear-gradient(to right, transparent 0%, #000 45%);
}
[dir="rtl"] .hero-art {
  -webkit-mask-image: linear-gradient(to left, transparent 0%, #000 45%);
  mask-image: linear-gradient(to left, transparent 0%, #000 45%);
}
.hero.hero-page > .container { position: relative; z-index: 1; }
.js .hero-art { animation: artIn 1.4s cubic-bezier(0.22, 0.61, 0.36, 1) 0.2s both; }
@keyframes artIn { from { opacity: 0; transform: scale(1.04); } to { opacity: 0.55; transform: none; } }
@media (max-width: 900px) {
  .hero-art {
    width: 100%; opacity: 0.22;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 60%);
    mask-image: linear-gradient(to bottom, transparent 0%, #000 60%);
  }
  .js .hero-art { animation: none; }
}
@media (prefers-reduced-motion: reduce) { .js .hero-art { animation: none; } }

/* ==========================================================
   31. Page engine helpers
   Shield badge on a light surface (section heads on index pages).
   Replaces the inline style attributes the hand-built pages used.
   ========================================================== */
.shield-badge.on-light.is-green { color: #30664A; background: rgba(48, 102, 74, 0.12); }
.shield-badge.on-light.is-green .dot { background: #30664A; }
.shield-badge.on-light.is-red   { color: #c41e1e; background: rgba(196, 30, 30, 0.10); }
.shield-badge.on-light.is-red .dot { background: #c41e1e; }
.shield-badge.on-light.is-blue  { color: var(--color-blue-dark); background: rgba(26, 58, 138, 0.10); }
.shield-badge.on-light.is-blue .dot { background: var(--color-blue-dark); }


/* ==========================================================
   32. Blog engine
   Category pill anywhere (not only inside cards), article meta in the
   dark header, topic tags, in-article images, author box, and the
   category filter (buttons, progressively enhanced by main.js).
   ========================================================== */
.shield-label[class*="tag-"] {
  display: inline-flex; align-items: center;
  font-size: 11px; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 999px;
}
[dir="rtl"] .shield-label[class*="tag-"] { letter-spacing: normal; }
.hero .shield-label[class*="tag-"] { margin-bottom: 16px; }
.hero .post-meta { color: #b9c0d6; margin-top: -8px; }

.post-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 32px 0 0; }
.post-tags li {
  font-family: var(--ff-mono); font-size: 12px;
  padding: 5px 12px; border-radius: 999px;
  border: 1px solid #e0e4ee; color: #3a4254; background: #fff;
}
[dir="rtl"] .post-tags li { font-family: var(--ff-ar-head); }

.article-body img { border-radius: var(--radius-lg); margin: 8px 0 20px; width: 100%; height: auto; }
.article-body figure { margin: 24px 0; }

.author-bio strong { display: block; font-family: var(--ff-heading); font-size: 17px; color: #000046; }
.author-bio > div:not(.team-avatar) > span { display: block; font-size: 13px; color: #30664A; font-weight: 600; margin: 2px 0 6px; }

button.cat-chip { background: transparent; font-family: inherit; cursor: pointer; line-height: 1.4; }
.theme-paper button.cat-chip { background: #ffffff; }
.theme-paper button.cat-chip.active { background: rgba(48, 102, 74, 0.08); }
.post-grid > [hidden] { display: none !important; }
.post-empty { margin-top: 24px; }
/* Article header joins the interior-page entrance sequence (section 29) */
.js .hero-page .shield-label[class*="tag-"],
.js .hero-page .post-meta { animation: heroIn 0.6s cubic-bezier(0.22, 0.61, 0.36, 1) both; }
.js .hero-page .shield-label[class*="tag-"] { animation-delay: 0.45s; }
.js .hero-page .post-meta { animation-delay: 0.80s; }

/* ==========================================================
   33. Images from the admin panel
   Image sections on service pages, author photos, in-article
   pictures. Width and height come from the image itself, so CSS
   only sets the display size.
   ========================================================== */
.svc-figure { max-width: 820px; margin: 0 auto; }
.svc-figure--wide { max-width: none; }
.svc-figure img {
  display: block; width: 100%; height: auto;
  border-radius: var(--radius-lg);
  box-shadow: 0 12px 36px rgba(0, 0, 70, 0.12);
}
.svc-figure figcaption { margin-top: 12px; font-size: 14px; color: #6a6a7e; text-align: center; }
.team-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }

/* ==========================================================
   34. Cookie consent bar (assets/js/analytics.js)
   Shown only when Google tools are switched on in the panel.
   ========================================================== */
.consent-bar {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 1000;
  max-width: 760px; margin: 0 auto; padding: 16px 20px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px;
  background: var(--color-bg-card); color: var(--color-text);
  border: 1px solid var(--color-border-bright); border-radius: var(--radius-lg);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.45);
}
.consent-bar p { flex: 1 1 320px; margin: 0; font-size: 14px; line-height: 1.6; color: var(--color-text-sub); }
.consent-bar a { color: var(--color-text); text-decoration: underline; }
.consent-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
/* Customise: one row per category; "Necessary" is shown ticked and locked */
.consent-panel { flex: 1 1 100%; display: grid; gap: 10px; }
.consent-option { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; cursor: pointer; }
.consent-option input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--color-green); flex: none; }
.consent-option input:disabled { cursor: not-allowed; }
.consent-option strong { display: block; color: var(--color-text); }
.consent-note { display: block; color: var(--color-text-sub); font-size: 13px; }
.consent-custom { font-size: 14px; margin-inline-end: auto; }
/* Privacy policy: cookie inventory table */
.cookie-table-wrap { overflow-x: auto; margin: 16px 0 20px; }
.cookie-table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 620px; }
.cookie-table th, .cookie-table td { padding: 10px 12px; border: 1px solid var(--color-border); text-align: start; vertical-align: top; }
.cookie-table th { background: rgba(255, 255, 255, 0.04); font-weight: 700; }
.cookie-table code { font-size: 12.5px; white-space: nowrap; }
.consent-open {
  background: none; border: 0; padding: 0; font: inherit; color: inherit;
  text-decoration: underline; cursor: pointer;
}
@media (max-width: 560px) {
  .consent-bar { left: 12px; right: 12px; bottom: 12px; padding: 14px 16px; }
  .consent-actions { width: 100%; }
  .consent-actions .btn { flex: 1; }
}

/* ==========================================================
   35. Design v2: one continuous navy canvas, cinematic layer
   Every page sits on the same brand navy. Sections are
   transparent over a fixed backdrop, separated by thin lines
   in the three shield colours. Each service page takes the
   colour of its shield (green governance, red offensive,
   blue defensive and IT) for glows, ticks and highlights.
   Brand tokens are unchanged; only tints are added.
   ========================================================== */
:root {
  --accent-rgb: 79, 154, 114;          /* green tint (governance), default */
  --green-rgb: 79, 154, 114;
  --red-rgb: 255, 77, 77;
  --blue-rgb: 110, 140, 255;
  --glass: rgba(6, 6, 64, 0.46);
  --glass-hover: rgba(10, 10, 92, 0.62);
  --glass-border: rgba(130, 150, 255, 0.14);
  --ff-mono: ui-monospace, "SFMono-Regular", "Cascadia Code", Consolas, "Liberation Mono", monospace;
}
body:has(.hero .shield-badge.is-red)  { --accent-rgb: var(--red-rgb); }
body:has(.hero .shield-badge.is-blue) { --accent-rgb: var(--blue-rgb); }

/* --- the canvas --- */
html { background: #000028; }
body { background: transparent; position: relative; }
body::before {
  content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(1100px 700px at 88% -12%, rgba(0, 0, 110, 0.55), transparent 62%),
    radial-gradient(900px 640px at -12% 28%, rgba(var(--accent-rgb), 0.10), transparent 62%),
    radial-gradient(1000px 760px at 112% 78%, rgba(var(--blue-rgb), 0.09), transparent 62%),
    radial-gradient(800px 600px at 30% 115%, rgba(var(--red-rgb), 0.06), transparent 60%),
    linear-gradient(180deg, #000028 0%, #000036 48%, #000028 100%);
}
body::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(rgba(130, 150, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(130, 150, 255, 0.045) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 30%, #000 0%, transparent 75%);
          mask-image: radial-gradient(ellipse at 50% 30%, #000 0%, transparent 75%);
}

/* sections are windows onto the canvas */
.theme-light,
.section-alt,
.bg-white, .bg-cream, .bg-sand, .bg-slate, .bg-navy-tint, .bg-mint { background: transparent; }
.theme-light { color: var(--color-text); }

/* thin tri-colour line between sections */
.theme-light section, body > section { position: relative; }
.theme-light section + section::before,
body > section:not(.hero) + section:not(.hero)::before {
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: min(1100px, 88%); height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent,
    rgba(var(--green-rgb), 0.45) 22%, rgba(var(--red-rgb), 0.45) 50%, rgba(var(--blue-rgb), 0.45) 78%, transparent);
  opacity: 0.55;
}

/* --- type on the canvas --- */
.theme-light h2, .theme-light h3 { color: #ffffff; }
.svc-block p, .article-body p, .section-head p { color: #c2c9dc; }
.svc-block h2, .section-head h2, .article-body h2 { letter-spacing: -0.01em; }

/* eyebrow as a glowing pill */
.hero .eyebrow, .section-head .eyebrow, .svc-block .eyebrow {
  font-family: var(--ff-mono); font-size: 11.5px; letter-spacing: 0.16em;
  color: rgb(var(--accent-rgb));
  border: 1px solid rgba(var(--accent-rgb), 0.45);
  background: rgba(var(--accent-rgb), 0.08);
  border-radius: 999px; padding: 6px 14px;
  box-shadow: 0 0 24px rgba(var(--accent-rgb), 0.16), inset 0 0 12px rgba(var(--accent-rgb), 0.08);
}
[dir="rtl"] .hero .eyebrow, [dir="rtl"] .section-head .eyebrow, [dir="rtl"] .svc-block .eyebrow {
  font-family: var(--ff-ar-head); letter-spacing: 0; font-size: 13px;
}

/* glowing word (added to the hero title by main.js) */
.glow {
  background: linear-gradient(92deg, #ffffff 0%, rgb(var(--accent-rgb)) 55%, rgb(var(--blue-rgb)) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  filter: drop-shadow(0 0 22px rgba(var(--accent-rgb), 0.35));
}

/* --- glass cards with shield colour and cursor spotlight --- */
.card { position: relative; background: var(--glass); border: 1px solid var(--glass-border);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.card.shield-green { --card-rgb: var(--green-rgb); }
.card.shield-red   { --card-rgb: var(--red-rgb); }
.card.shield-blue  { --card-rgb: var(--blue-rgb); }
.card:hover {
  background: var(--glass-hover);
  border-color: rgba(var(--card-rgb, var(--accent-rgb)), 0.55);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.45), 0 0 42px rgba(var(--card-rgb, var(--accent-rgb)), 0.14);
}
.card::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  opacity: 0; transition: opacity 0.35s ease;
  background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 0%), rgba(var(--card-rgb, var(--accent-rgb)), 0.16), transparent 62%);
}
.card:hover::after { opacity: 1; }
.card > * { position: relative; z-index: 1; }
.card-mod {
  display: block; margin-bottom: 12px;
  font-family: var(--ff-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(var(--card-rgb, var(--accent-rgb)), 0.9);
}
[dir="rtl"] .card-mod { direction: ltr; text-align: right; }

/* --- lists, questions, steps in the page colour --- */
.check-list li::before { color: rgb(var(--accent-rgb)); text-shadow: 0 0 10px rgba(var(--accent-rgb), 0.5); }
.check-list li, .num-list li { border-bottom-color: rgba(130, 150, 255, 0.10); }
.num-list li::before { color: rgb(var(--accent-rgb)); border-color: rgba(var(--accent-rgb), 0.45); }
.standards-list li { border-color: rgba(var(--accent-rgb), 0.35); background: rgba(var(--accent-rgb), 0.06); }
.faq-item { border-bottom-color: rgba(130, 150, 255, 0.12); }
.faq-item summary::after { color: rgb(var(--accent-rgb)); }
.faq-item[open] summary { color: #ffffff; }
.svc-cta { background: var(--glass); border: 1px solid rgba(var(--accent-rgb), 0.35);
  box-shadow: 0 0 60px rgba(var(--accent-rgb), 0.10) inset; }

/* --- reading comfort on dark --- */
.article-body { font-size: 18px; }
.article-body p, .article-body li { color: #c9d0e3; }
[dir="rtl"] .article-body { font-size: 19px; line-height: 1.95; }
.article-body blockquote { border-inline-start-color: rgb(var(--accent-rgb)); background: rgba(var(--accent-rgb), 0.06); }
.article-body a { color: #ffffff; text-decoration: underline; text-decoration-color: rgba(var(--accent-rgb), 0.7); text-underline-offset: 3px; }

/* --- forms and tables on glass --- */
.form-wrap, .form-section, .promise-card, .calendly-block {
  background: var(--glass); border: 1px solid var(--glass-border);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.calendly-block { border-style: dashed; }
table { background: var(--glass); }
table thead tr { background: rgba(130, 150, 255, 0.08); }

/* --- ticker strip (built from Menus and footer > Ticker) --- */
.ticker {
  position: relative; overflow: hidden;
  border-top: 1px solid var(--glass-border); border-bottom: 1px solid var(--glass-border);
  background: rgba(0, 0, 40, 0.55);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.ticker-track {
  display: flex; width: max-content; gap: 44px; padding: 13px 0;
  animation: cs-ticker 48s linear infinite;
}
.ticker:hover .ticker-track { animation-play-state: paused; }
.ticker-item {
  display: inline-flex; align-items: center; gap: 12px; white-space: nowrap;
  font-family: var(--ff-mono); font-size: 12.5px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--color-text-sub);
}
[dir="rtl"] .ticker-item { font-family: var(--ff-ar-head); letter-spacing: 0; font-size: 14px; }
.ticker-item::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: rgb(var(--green-rgb)); box-shadow: 0 0 10px rgba(var(--green-rgb), 0.8);
}
.ticker-item:nth-child(3n+2)::before { background: rgb(var(--red-rgb)); box-shadow: 0 0 10px rgba(var(--red-rgb), 0.8); }
.ticker-item:nth-child(3n)::before   { background: rgb(var(--blue-rgb)); box-shadow: 0 0 10px rgba(var(--blue-rgb), 0.8); }
@keyframes cs-ticker { to { transform: translateX(-50%); } }
[dir="rtl"] .ticker-track { animation-name: cs-ticker-rtl; }
@keyframes cs-ticker-rtl { to { transform: translateX(50%); } }

/* --- scroll motion: softer, deeper reveals --- */
.js [data-reveal] { filter: blur(6px); transition-property: opacity, transform, filter; }
.js [data-reveal].is-visible { filter: none; }
.hero-art { will-change: transform; }

@media (prefers-reduced-motion: reduce) {
  .ticker-track { animation: none; }
  .js [data-reveal] { filter: none; }
  .card::after { display: none; }
}
@media (max-width: 768px) {
  body::after { background-size: 44px 44px; }
  .card { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(8, 8, 70, 0.72); }
}

/* --- v2 fixes: numbered steps (one number, both directions) --- */
.num-list { list-style: none; padding: 0; margin: 0; }
.num-list li { padding-left: 0; padding-inline-start: 48px; }
.num-list li::before { left: auto; inset-inline-start: 0; background: rgba(var(--accent-rgb), 0.16);
  box-shadow: 0 0 14px rgba(var(--accent-rgb), 0.25); }
.check-list li { padding-left: 0; padding-inline-start: 32px; }
.check-list li::before { left: auto; inset-inline-start: 0; }

/* shield badges made for light pages, now on the navy canvas */
.shield-badge.on-light.is-green { color: rgb(var(--green-rgb)); background: rgba(var(--green-rgb), 0.12); box-shadow: 0 0 22px rgba(var(--green-rgb), 0.18); }
.shield-badge.on-light.is-green .dot { background: rgb(var(--green-rgb)); }
.shield-badge.on-light.is-red   { color: rgb(var(--red-rgb)); background: rgba(var(--red-rgb), 0.12); box-shadow: 0 0 22px rgba(var(--red-rgb), 0.18); }
.shield-badge.on-light.is-red .dot { background: rgb(var(--red-rgb)); }
.shield-badge.on-light.is-blue  { color: rgb(var(--blue-rgb)); background: rgba(var(--blue-rgb), 0.12); box-shadow: 0 0 22px rgba(var(--blue-rgb), 0.18); }
.shield-badge.on-light.is-blue .dot { background: rgb(var(--blue-rgb)); }

/* footer settles into the canvas instead of a separate slab */
.site-footer { background: linear-gradient(180deg, rgba(0, 0, 30, 0) 0%, rgba(0, 0, 20, 0.85) 38%, #000014 100%);
  border-top: 1px solid var(--glass-border); }

/* --- Home opening scene (assets/js/hero-scene.js) --- */
.hero-e.has-scene .hero-ambient { opacity: 1; }
/* the logo powers on as the light lines reach it */
.js .hero-e.has-scene .hero-visual { animation-delay: 2.3s; animation-duration: 1.4s; }
@media (prefers-reduced-motion: reduce), (max-width: 699px) {
  .js .hero-e.has-scene .hero-visual { animation-delay: 0.3s; }
}
@media (prefers-reduced-motion: reduce) { .hero-e.has-scene .hero-ambient { display: block; } }

/* --- Small phones: keep the header on one line --- */
@media (max-width: 420px) {
  .brand { gap: 8px; font-size: 15px; white-space: nowrap; }
  .brand-mark { width: 30px; height: 30px; }
  .nav-cta { gap: 8px; }
  .nav-cta .lang-toggle { padding: 6px 9px; }
  .nav-cta .btn-sm { padding: 9px 12px; font-size: 13px; }
}

/* --- Home logo reveal film (hero-scene.js), blended into the scene --- */
.hero-reveal {
  position: absolute; left: 50%; top: 50%; z-index: 2;
  width: 150%; aspect-ratio: 16 / 9; transform: translate(-50%, -52%);
  object-fit: cover; pointer-events: none; opacity: 0;
  mix-blend-mode: screen;                         /* the film's navy melts into the page */
  -webkit-mask-image: radial-gradient(ellipse 34% 52% at 50% 50%, #000 55%, transparent 100%);
          mask-image: radial-gradient(ellipse 34% 52% at 50% 50%, #000 55%, transparent 100%);
  transition: opacity 0.6s ease;
}
.hero-e.has-reveal .hero-reveal { opacity: 1; }   /* dark frames are invisible under screen blending, and a visible element keeps autoplay alive */
/* when the film ends, it swells and fades while the colour logo grows out of it */
.hero-e.has-reveal.revealed .hero-reveal {
  opacity: 0; transform: translate(-50%, -52%) scale(1.12);
  transition: opacity 1.2s ease, transform 1.6s cubic-bezier(0.16, 1, 0.3, 1);
}
/* while the light draws the shield, the colour logo waits; then it takes over */
.js .hero-e.has-reveal .hero-visual { animation-delay: 0.2s; }
.hero-e.has-reveal .hero-logo-wrap { opacity: 0; transition: opacity 0.5s ease; }
.hero-e.has-reveal.revealed .hero-logo-wrap { opacity: 1; }
/* the colour logo starts at the size of the white logo in the film's last
   frame, bright and soft, then grows to full size and settles */
.hero.hero-e.has-reveal .hero-logo {
  transform: scale(0.24);
  filter: brightness(2.4) blur(4px) drop-shadow(0 0 0 rgba(0, 0, 0, 0)) drop-shadow(0 0 34px rgba(255, 255, 255, 0.9));
}
.hero.hero-e.has-reveal.revealed .hero-logo {
  transform: none;
  filter: brightness(1) blur(0) drop-shadow(0 22px 48px rgba(0, 0, 0, 0.6)) drop-shadow(0 0 18px rgba(255, 255, 255, 0.18));
  transition: transform 1.6s cubic-bezier(0.16, 1, 0.3, 1), filter 1.4s ease;
}
.hero-e.has-reveal .hero-logo-wrap::before { transform: scale(0.3); }
.hero-e.has-reveal.revealed .hero-logo-wrap::before { transform: none; transition: transform 1.7s cubic-bezier(0.16, 1, 0.3, 1); }

/* ==========================================================
   37. Article reading tools: progress bar, contents list,
       section links, copy link, back link
   ========================================================== */
.reading-progress {
  width: 100%; height: 3px; transition: none;
  transform: scaleX(0); transform-origin: left center;
  background: linear-gradient(90deg, #30664A, #4d6dff 55%, #FF0000);
  box-shadow: 0 0 12px rgba(77, 109, 255, 0.55);
}
[dir="rtl"] .reading-progress {
  left: auto; right: 0; transform-origin: right center;
  background: linear-gradient(270deg, #30664A, #4d6dff 55%, #FF0000);
}

.article-aside { max-width: 760px; margin: 0 auto 24px; }
.back-link {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 18px; margin-bottom: 18px; border-radius: 999px;
  border: 1px solid var(--color-border); color: var(--color-text-sub);
  font-size: 14px; text-decoration: none; transition: border-color 0.2s, color 0.2s;
}
.back-link:hover, .back-link:focus-visible { color: var(--color-text); border-color: var(--color-green); }

.toc {
  border: 1px solid var(--color-border); border-radius: 14px;
  background: rgba(255, 255, 255, 0.03); padding: 14px 18px;
}
.toc summary {
  cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between;
  font-size: 15px; font-weight: 600; color: var(--color-text);
}
.toc summary::-webkit-details-marker { display: none; }
.toc summary::after {
  content: ''; width: 8px; height: 8px; margin-inline-start: 12px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg); transition: transform 0.2s;
}
.toc[open] summary::after { transform: rotate(-135deg); }
.toc ol { margin: 12px 0 0; padding: 0; counter-reset: toc; }
.toc li { list-style: none; counter-increment: toc; margin: 0; }
.toc a {
  display: block; padding-block: 7px; padding-inline: 14px 0;
  border-inline-start: 2px solid transparent;
  color: var(--color-text-sub); font-size: 14px; line-height: 1.5; text-decoration: none;
  transition: color 0.2s, border-color 0.2s;
}
.toc a::before { content: counter(toc) '. '; color: var(--color-text-muted); }
.toc a:hover { color: var(--color-text); }
.toc a.is-active { color: var(--color-text); border-inline-start-color: rgb(var(--accent-rgb, 48, 102, 74)); }

@media (min-width: 1200px) {
  .article-layout {
    display: grid; grid-template-columns: 250px minmax(0, 760px);
    gap: 64px; justify-content: center; align-items: start;
  }
  .article-layout .article { margin: 0; max-width: none; }
  .article-aside {
    position: sticky; top: 104px; margin: 0;
    max-height: calc(100vh - 128px); overflow-y: auto;
  }
  .toc { border: 0; background: none; padding: 0; }
  .toc summary { pointer-events: none; margin-bottom: 4px; }
  .toc summary::after { display: none; }
  .toc ol { border-inline-start: 1px solid var(--color-border); }
  .toc a { margin-inline-start: -1px; }
}

.article-body h2, .article-body h3 { scroll-margin-top: 100px; }
.h-anchor {
  margin-inline-start: 8px; color: var(--color-text-muted); font-weight: 400;
  text-decoration: none; opacity: 0; transition: opacity 0.2s, color 0.2s;
}
.article-body h2:hover .h-anchor, .article-body h3:hover .h-anchor, .h-anchor:focus-visible { opacity: 1; }
.h-anchor:hover { color: var(--color-text); }
@media (hover: none) { .h-anchor { opacity: 0.4; } }

.share { flex-wrap: wrap; }
.share-copy {
  width: 36px; height: 36px; border-radius: 50%; padding: 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--color-border); color: var(--color-text-sub);
  transition: border-color 0.2s, color 0.2s;
}
.share-copy:hover, .share-copy.copied { border-color: var(--color-green); color: #6fc89a; }
.share .share-status { color: #6fc89a; }
.post-updated { white-space: nowrap; }

/* ==========================================================
   38. Official sources, related services and related articles
       (links to regulators and standards bodies, internal links
       between services and articles)
   ========================================================== */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.sources-intro { color: var(--color-text-muted); font-size: 14.5px; margin-bottom: 18px; }
.source-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.source-list .source-item {
  list-style: none; margin: 0; padding: 14px 18px;
  border: 1px solid var(--color-border); border-radius: 14px;
  background: rgba(255, 255, 255, 0.03);
  border-inline-start: 3px solid rgb(var(--accent-rgb, 48, 102, 74));
  display: grid; gap: 4px;
}
.article-body .source-list .source-item { color: var(--color-text-sub); }
.source-pub {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text-muted);
}
[dir="rtl"] .source-pub { font-family: var(--ff-ar-head); letter-spacing: 0; text-transform: none; font-size: 12.5px; }
.source-name { color: var(--color-text); font-weight: 600; text-decoration: none; line-height: 1.5; }
.source-name:hover, .source-name:focus-visible { text-decoration: underline; text-underline-offset: 3px; }
.source-ed {
  display: inline-block; margin-inline-start: 6px; padding: 1px 8px; border-radius: 999px;
  font: 500 12px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace;
  background: rgba(var(--accent-rgb, 48, 102, 74), 0.18); color: var(--color-text-sub);
  unicode-bidi: isolate; direction: ltr;
}
.source-files { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.source-file {
  font-size: 13px; padding: 3px 10px; border-radius: 999px; text-decoration: none;
  border: 1px solid var(--color-border); color: var(--color-text-sub);
}
.source-file:hover, .source-file:focus-visible { border-color: var(--color-green); color: var(--color-text); }
.source-list .ext { display: inline-block; vertical-align: -1px; opacity: 0.7; }
[dir="rtl"] .source-list .ext { transform: scaleX(-1); }

.post-services {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin: 32px 0 0; padding: 16px 18px; border-radius: 14px;
  border: 1px solid var(--color-border); background: rgba(255, 255, 255, 0.03);
}
.post-services-label { font-size: 13px; color: var(--color-text-muted); margin-inline-end: 4px; }
.post-service {
  font-size: 14px; padding: 6px 14px; border-radius: 999px; text-decoration: none;
  color: var(--color-text); border: 1px solid var(--color-border); transition: border-color 0.2s, background 0.2s;
}
.post-service.is-green:hover { border-color: #30664A; background: rgba(48, 102, 74, 0.15); }
.post-service.is-red:hover { border-color: #FF0000; background: rgba(255, 0, 0, 0.1); }
.post-service.is-blue:hover { border-color: #4d6dff; background: rgba(77, 109, 255, 0.12); }
/* one or two related articles sit centred rather than leaving empty columns */
@media (min-width: 900px) {
  .insights-grid.n-1 { grid-template-columns: minmax(0, 380px); justify-content: center; }
  .insights-grid.n-2 { grid-template-columns: repeat(2, minmax(0, 380px)); justify-content: center; }
}
/* version codes such as CCC-2:2024 stay on one line and read left to right inside Arabic text */
.code-nowrap { white-space: nowrap; unicode-bidi: isolate; direction: ltr; }

/* ==========================================================
   40. Website assistant (chat widget, assets/js/chat.js)
   Desktop: tall panel in the corner, optional wide reading mode.
   Phones: full-screen sheet. The launcher and WhatsApp button step
   aside while the assistant is open.
   ========================================================== */
.cs-chat-launch {
  position: fixed; bottom: 92px; right: 24px; z-index: 210;
  width: 60px; height: 60px; border-radius: 50%; cursor: pointer; padding: 0;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 30% 25%, #5b78ff 0%, #1b2a9e 45%, #000046 100%);
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: 0 12px 30px rgba(77, 109, 255, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  transition: transform 0.2s, box-shadow 0.2s;
}
.cs-chat-launch::after {
  content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid rgba(91, 120, 255, 0.55);
  animation: cs-ring 2.4s ease-out 1.2s 3; opacity: 0; pointer-events: none;
}
@keyframes cs-ring { 0% { transform: scale(0.9); opacity: 0.9; } 100% { transform: scale(1.35); opacity: 0; } }
.cs-chat-launch:hover { transform: translateY(-2px) scale(1.04); box-shadow: 0 16px 36px rgba(77, 109, 255, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.25); }
.cs-chat-launch:focus-visible { outline: 3px solid #8ea1ff; outline-offset: 3px; }
.cs-chat-launch-logo { width: 28px; height: 28px; color: #fff; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.35)); }
.cs-chat-launch-badge {
  position: absolute; top: -3px; right: -3px; padding: 2px 6px; border-radius: 999px;
  font: 700 10px/1.3 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 0.06em; color: #fff;
  background: #30664A; border: 2px solid #000046;
}
[dir="rtl"] .cs-chat-launch { right: auto; left: 24px; }
[dir="rtl"] .cs-chat-launch-badge { right: auto; left: -3px; }
html.cs-chat-open .cs-chat-launch, html.cs-chat-open .fab-wa, html.cs-chat-open .cs-chat-teaser { display: none; }

/* first-visit teaser beside the launcher */
.cs-chat-teaser {
  position: fixed; bottom: 98px; right: 96px; z-index: 210; max-width: 270px;
  display: flex; align-items: flex-start; gap: 4px; padding: 12px 8px 12px 14px; border-radius: 16px 16px 4px 16px;
  background: #fff; color: #000046; box-shadow: 0 14px 34px rgba(0, 0, 30, 0.35);
  opacity: 0; transform: translateY(8px); transition: opacity 0.3s, transform 0.3s;
}
.cs-chat-teaser.is-in { opacity: 1; transform: none; }
.cs-chat-teaser[hidden] { display: none; }
.cs-chat-teaser-text { font: inherit; font-size: 14px; font-weight: 600; line-height: 1.5; text-align: start; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.cs-chat-teaser-x { flex: none; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 8px; background: none; color: #5a5f7a; cursor: pointer; }
.cs-chat-teaser-x:hover, .cs-chat-teaser-x:focus-visible { background: #eef0f7; color: #000046; }
[dir="rtl"] .cs-chat-teaser { right: auto; left: 96px; border-radius: 16px 16px 16px 4px; padding: 12px 14px 12px 8px; }

/* panel */
.cs-chat {
  position: fixed; bottom: 24px; right: 24px; z-index: 220;
  width: min(420px, calc(100vw - 32px)); height: min(700px, calc(100dvh - 48px));
  display: flex; flex-direction: column; overflow: hidden; border-radius: 22px;
  background: linear-gradient(180deg, #0a0c4e, #030330); /* opaque: the page never shows through */
  border: 1px solid rgba(142, 161, 255, 0.26); color: var(--color-text);
  box-shadow: 0 30px 80px rgba(0, 0, 20, 0.65), 0 0 0 1px rgba(255, 255, 255, 0.03) inset;
  opacity: 0; transform: translateY(14px) scale(0.98); transform-origin: bottom right;
  transition: opacity 0.22s ease, transform 0.22s ease, width 0.25s ease, height 0.25s ease;
}
.cs-chat.is-in { opacity: 1; transform: none; }
.cs-chat[hidden] { display: none; }
.cs-chat:focus { outline: none; }
.cs-chat::before { /* the brand guardline */
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; z-index: 1;
  background: linear-gradient(90deg, #FF0000, #30664A 50%, #4d6dff);
}
.cs-chat.is-wide { width: min(860px, calc(100vw - 48px)); height: calc(100dvh - 48px); }
[dir="rtl"] .cs-chat { right: auto; left: 24px; transform-origin: bottom left; }
[dir="rtl"] .cs-chat::before { background: linear-gradient(270deg, #FF0000, #30664A 50%, #4d6dff); }

.cs-chat-head {
  display: flex; align-items: center; gap: 12px; padding: 16px 12px 14px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(120deg, rgba(48, 102, 74, 0.28), rgba(77, 109, 255, 0.18) 70%, transparent);
}
[dir="rtl"] .cs-chat-head { padding: 16px 16px 14px 12px; }
.cs-chat-avatar {
  position: relative; flex: none; width: 42px; height: 42px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.14);
}
.cs-chat-avatar img { width: 28px; height: 28px; object-fit: contain; }
.cs-chat-online {
  position: absolute; bottom: -2px; right: -2px; width: 12px; height: 12px; border-radius: 50%;
  background: #22c55e; border: 2px solid #0a0c4e;
}
[dir="rtl"] .cs-chat-online { right: auto; left: -2px; }
.cs-chat-titles { flex: 1; min-width: 0; }
.cs-chat-titles strong { display: block; font-size: 15.5px; line-height: 1.3; color: #fff; }
.cs-chat-titles span { display: block; font-size: 12px; color: var(--color-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-chat-tools { display: flex; gap: 2px; }
.cs-chat-tool {
  width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: 10px; background: none; color: var(--color-text-sub); cursor: pointer;
}
.cs-chat-tool:hover, .cs-chat-tool:focus-visible { color: #fff; background: rgba(255, 255, 255, 0.09); }
.cs-chat-tool:focus-visible { outline: 2px solid #8ea1ff; outline-offset: 1px; }

.cs-chat-log {
  flex: 1; overflow-y: auto; padding: 18px 16px 8px; display: flex; flex-direction: column; gap: 16px;
  overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(142, 161, 255, 0.35) transparent;
}
.cs-chat-log:focus-visible { outline: 2px solid rgba(142, 161, 255, 0.5); outline-offset: -2px; }
.cs-chat.is-wide .cs-chat-log { padding-inline: max(16px, calc((100% - 720px) / 2)); }

.cs-turn { display: flex; gap: 10px; align-items: flex-start; }
.cs-turn-user { justify-content: flex-end; }
.cs-mini {
  flex: none; width: 28px; height: 28px; margin-top: 2px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.12);
}
.cs-mini img { width: 18px; height: 18px; object-fit: contain; }
.cs-col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }

.cs-msg { padding: 11px 14px; font-size: 14.5px; line-height: 1.7; overflow-wrap: anywhere; }
.cs-msg p { margin: 0 0 8px; } .cs-msg p:last-child { margin-bottom: 0; }
.cs-msg ul, .cs-msg ol { margin: 4px 0 8px; padding-inline-start: 20px; }
.cs-msg li { margin-bottom: 4px; }
.cs-msg li::marker { color: #8ea1ff; }
.cs-msg strong { color: #fff; }
.cs-msg a { color: #a9b8ff; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(169, 184, 255, 0.45); }
.cs-msg a:hover { text-decoration-color: currentColor; }
.cs-bot {
  max-width: 100%; border-radius: 4px 16px 16px 16px;
  background: rgba(255, 255, 255, 0.055); border: 1px solid rgba(255, 255, 255, 0.08);
}
[dir="rtl"] .cs-bot { border-radius: 16px 4px 16px 16px; }
.cs-user {
  max-width: 85%; border-radius: 16px 16px 4px 16px; color: #fff; white-space: pre-wrap;
  background: linear-gradient(135deg, #3a7a58, #30664A); box-shadow: 0 6px 18px rgba(48, 102, 74, 0.3);
}
[dir="rtl"] .cs-user { border-radius: 16px 16px 16px 4px; }

/* typing */
.cs-msg.is-typing { padding: 14px 16px; }
.cs-dots { display: inline-flex; gap: 5px; }
.cs-dots i { width: 7px; height: 7px; border-radius: 50%; background: #8ea1ff; animation: cs-bounce 1.1s infinite ease-in-out; }
.cs-dots i:nth-child(2) { animation-delay: 0.15s; }
.cs-dots i:nth-child(3) { animation-delay: 0.3s; }
@keyframes cs-bounce { 0%, 80%, 100% { transform: translateY(0); opacity: 0.45; } 40% { transform: translateY(-5px); opacity: 1; } }

/* suggested questions */
.cs-starters { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.cs-related-label {
  font: 600 11px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--color-text-muted);
}
[lang="ar"] .cs-related-label { font-family: 'Noto Kufi Arabic', sans-serif; letter-spacing: 0; text-transform: none; font-size: 12px; }
.cs-starter {
  font: inherit; font-size: 14px; line-height: 1.5; text-align: start; cursor: pointer; width: 100%;
  padding: 11px 14px; border-radius: 12px; color: var(--color-text);
  background: rgba(77, 109, 255, 0.1); border: 1px solid rgba(142, 161, 255, 0.24);
  transition: background 0.15s, border-color 0.15s, transform 0.15s;
}
.cs-starter:hover, .cs-starter:focus-visible { background: rgba(77, 109, 255, 0.2); border-color: rgba(142, 161, 255, 0.5); transform: translateX(2px); }
[dir="rtl"] .cs-starter:hover, [dir="rtl"] .cs-starter:focus-visible { transform: translateX(-2px); }
.cs-starter:focus-visible { outline: 2px solid #8ea1ff; outline-offset: 1px; }

/* related pages and actions under an answer */
.cs-related-wrap { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.cs-related { display: flex; flex-wrap: wrap; gap: 6px; }
.cs-chip-link {
  display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 6px 11px; border-radius: 999px;
  font-size: 12.5px; line-height: 1.35; color: #dfe5ff; text-decoration: none;
  background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(142, 161, 255, 0.28);
}
.cs-chip-link span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-chip-link svg { flex: none; color: #8ea1ff; }
.cs-chip-link:hover, .cs-chip-link:focus-visible { background: rgba(77, 109, 255, 0.18); color: #fff; }
.cs-chat-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.cs-cta {
  display: inline-flex; align-items: center; padding: 8px 14px; border-radius: 10px;
  font-size: 13.5px; font-weight: 600; text-decoration: none; transition: transform 0.15s, background 0.15s;
}
.cs-cta-quote { background: #fff; color: #000046; }
.cs-cta-quote:hover { background: #e7eaff; }
.cs-cta-wa { background: rgba(37, 211, 102, 0.14); color: #b8f5cf; border: 1px solid rgba(37, 211, 102, 0.4); }
.cs-cta-wa:hover { background: rgba(37, 211, 102, 0.24); color: #fff; }
.cs-cta:focus-visible { outline: 2px solid #8ea1ff; outline-offset: 2px; }

.cs-msg-tools { display: flex; align-items: center; gap: 2px; margin-top: -2px; }
.cs-msg-tool {
  width: 30px; height: 30px; display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: 8px; background: none; color: var(--color-text-muted); cursor: pointer;
}
.cs-msg-tool svg { width: 16px; height: 16px; }
.cs-msg-tool:hover:not(:disabled), .cs-msg-tool:focus-visible { color: #fff; background: rgba(255, 255, 255, 0.08); }
.cs-msg-tool:disabled { cursor: default; opacity: 0.45; }
.cs-msg-tool.is-done { color: #7ee2a8; opacity: 1; }
.cs-msg-thanks { font-size: 12px; color: var(--color-text-muted); margin-inline-start: 6px; }

/* composer */
.cs-chat-form { position: relative; padding: 10px 14px 6px; border-top: 1px solid rgba(255, 255, 255, 0.07); }
.cs-chat.is-wide .cs-chat-form, .cs-chat.is-wide .cs-chat-note { padding-inline: max(14px, calc((100% - 720px) / 2)); }
.cs-chat-field {
  display: flex; align-items: flex-end; gap: 8px; padding: 6px 6px 6px 14px; border-radius: 16px;
  background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.14); transition: border-color 0.15s, box-shadow 0.15s;
}
[dir="rtl"] .cs-chat-field { padding: 6px 14px 6px 6px; }
.cs-chat-field:focus-within { border-color: #4d6dff; box-shadow: 0 0 0 3px rgba(77, 109, 255, 0.28); }
.cs-chat-field textarea {
  flex: 1; resize: none; font: inherit; font-size: 15px; line-height: 1.5; min-height: 24px; max-height: 132px;
  padding: 7px 0; border: 0; background: none; color: var(--color-text); outline: none;
}
.cs-chat-field textarea::placeholder { color: var(--color-text-muted); }
.cs-chat-send {
  flex: none; width: 40px; height: 40px; border-radius: 12px; border: 0; cursor: pointer; color: #fff;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #3a7a58, #30664A); transition: transform 0.15s, opacity 0.15s;
}
.cs-chat-send:hover:not(:disabled) { transform: translateY(-1px); }
.cs-chat-send:focus-visible { outline: 2px solid #8ea1ff; outline-offset: 2px; }
.cs-chat-send:disabled { opacity: 0.45; cursor: default; }
[dir="rtl"] .cs-chat-send svg { transform: scaleX(-1); }
.cs-chat-count { display: block; padding: 4px 4px 0; font-size: 11.5px; color: var(--color-text-muted); text-align: end; }
.cs-chat-count[hidden] { display: none; }
.cs-chat-hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); opacity: 0; }
.cs-chat-note { margin: 0; padding: 4px 16px 12px; font-size: 11.5px; line-height: 1.5; color: var(--color-text-muted); }
.cs-chat-note a { color: var(--color-text-sub); }

/* phones: full-screen sheet */
@media (max-width: 640px) {
  .cs-chat, [dir="rtl"] .cs-chat, .cs-chat.is-wide {
    inset: 0; width: 100%; height: 100%; height: 100dvh; border-radius: 0; border: 0;
    padding-bottom: env(safe-area-inset-bottom); transform-origin: bottom center;
  }
  .cs-chat-head { padding-top: max(16px, env(safe-area-inset-top)); }
  .cs-chat-size { display: none; }
  html.cs-chat-open, html.cs-chat-open body { overflow: hidden; }
  .cs-chat-teaser, [dir="rtl"] .cs-chat-teaser { right: 16px; left: 16px; max-width: none; bottom: 162px; }
  .cs-chat-field textarea { font-size: 16px; } /* no zoom-on-focus in iOS */
}
@media (prefers-reduced-motion: reduce) {
  .cs-chat, .cs-chat-teaser, .cs-chat-launch, .cs-starter { transition: none; }
  .cs-chat-launch::after, .cs-dots i { animation: none; }
}
   39. Saudi Cybersecurity Regulations Library
   ========================================================== */
.lib [hidden], .lib-helper-wrap[hidden], .lib-helper [hidden], [data-lib-jump][hidden] { display: none !important; }
.lib-checked { font-size: 13px; color: var(--color-text-muted); }
.lib-tools {
  position: sticky; top: 72px; z-index: 5; padding: 14px 0 10px; margin-bottom: 18px;
  background: linear-gradient(rgba(0, 0, 40, 0.96) 75%, transparent);
}
.lib-search input {
  width: 100%; padding: 14px 18px; border-radius: 14px; font: inherit; font-size: 16px;
  color: var(--color-text); background: rgba(255, 255, 255, 0.05); border: 1px solid var(--color-border);
}
.lib-search input:focus { outline: none; border-color: var(--color-green); box-shadow: 0 0 0 3px rgba(48, 102, 74, 0.35); }
.lib-tools .cat-bar { justify-content: flex-start; margin: 12px 0 6px; }
.lib-status { font-size: 13px; color: var(--color-text-muted); margin: 0; }
.lib-group { margin-top: 44px; }
.lib-group h2 { font-size: clamp(22px, 2.4vw, 28px); display: flex; align-items: center; gap: 10px; }
.lib-count {
  font: 600 12px/1 ui-monospace, SFMono-Regular, Menlo, monospace; padding: 5px 9px; border-radius: 999px;
  background: rgba(var(--accent-rgb, 48, 102, 74), 0.2); color: var(--color-text-sub);
}
.lib-group-intro { color: var(--color-text-muted); max-width: 760px; margin-bottom: 18px; }
.lib-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 860px) { .lib-grid { grid-template-columns: 1fr; } }
.lib-card {
  display: grid; align-content: start; gap: 8px; padding: 18px 20px; border-radius: 16px;
  border: 1px solid var(--color-border); background: rgba(255, 255, 255, 0.03);
  border-inline-start: 3px solid rgb(var(--accent-rgb, 48, 102, 74));
  scroll-margin-top: 170px; transition: box-shadow 0.4s, border-color 0.4s;
}
.lib-card[data-group="nca"] { border-inline-start-color: #30664A; }
.lib-card[data-group="saudi"] { border-inline-start-color: #6fc89a; }
.lib-card[data-group="iso"] { border-inline-start-color: #4d6dff; }
.lib-card[data-group="global"] { border-inline-start-color: #8ea1ff; }
.lib-card h3 { font-size: 17.5px; margin: 0; line-height: 1.45; }
.lib-card p { margin: 0; font-size: 14.5px; color: var(--color-text-sub); }
.lib-links, .lib-ours-row { display: flex; flex-wrap: wrap; gap: 8px; }
.lib-link {
  font-size: 13px; padding: 4px 11px; border-radius: 999px; text-decoration: none;
  border: 1px solid var(--color-border); color: var(--color-text-sub);
}
.lib-link:hover, .lib-link:focus-visible { border-color: var(--color-green); color: var(--color-text); }
.lib-link .ext { vertical-align: -1px; opacity: 0.7; }
[dir="rtl"] .lib-link .ext { transform: scaleX(-1); }
.lib-ours { font-size: 13.5px; color: #6fc89a; text-decoration: none; font-weight: 600; }
.lib-ours.is-article { color: #8ea1ff; font-weight: 500; }
.lib-ours:hover, .lib-ours:focus-visible { text-decoration: underline; text-underline-offset: 3px; }
.lib-card.is-flash { animation: lib-flash 1.8s ease; }
@keyframes lib-flash { 0%, 40% { box-shadow: 0 0 0 3px rgba(111, 200, 154, 0.7); } 100% { box-shadow: none; } }
@media (prefers-reduced-motion: reduce) { .lib-card.is-flash { animation: none; outline: 2px solid #6fc89a; } }

.lib-form fieldset { border: 0; padding: 0; margin: 22px 0 0; }
.lib-form legend { font-weight: 600; color: var(--color-text); margin-bottom: 10px; }
.lib-checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; }
@media (max-width: 700px) { .lib-checks { grid-template-columns: 1fr; } }
.lib-opt {
  display: flex; gap: 10px; align-items: flex-start; padding: 10px 14px; margin-bottom: 8px; border-radius: 12px; cursor: pointer;
  border: 1px solid var(--color-border); background: rgba(255, 255, 255, 0.03); color: var(--color-text-sub); font-size: 15px;
}
.lib-checks .lib-opt { margin-bottom: 0; }
.lib-opt input { margin-top: 4px; accent-color: #30664A; flex: none; }
.lib-opt:has(input:checked) { border-color: #30664A; background: rgba(48, 102, 74, 0.14); color: var(--color-text); }
.lib-result { margin-top: 28px; padding: 22px; border-radius: 16px; border: 1px solid var(--color-border); background: rgba(255, 255, 255, 0.04); scroll-margin-top: 100px; }
.lib-result h3 { font-size: 18px; margin: 0 0 10px; }
.lib-result ul { list-style: none; padding: 0; margin: 0 0 20px; display: grid; gap: 8px; }
.lib-result li { list-style: none; display: grid; gap: 2px; padding: 10px 14px; border-radius: 12px; background: rgba(255, 255, 255, 0.03); }
.lib-result li a { font-weight: 600; color: var(--color-text); }
.lib-result li span { font-size: 14px; color: var(--color-text-sub); }
.lib-note { font-size: 13.5px; color: var(--color-text-muted); }
.lib-link, .source-file { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }

/* Turnstile bot check on the forms (Cloudflare host only) */
.cs-turnstile { margin: 8px 0 16px; min-height: 65px; }

/* ==========================================================
   41. Header drop-down panels (mega menu, _build/mega.js)
   Desktop: a full-width panel under the header, opened on hover (with
   delays), click or keyboard. Phones and tablets: an accordion inside the
   menu. Columns follow the shield colours.
   ========================================================== */
.nav-item { display: flex; align-items: center; }
.nav-caret {
  display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 32px; margin-inline-start: -8px;
  border: 0; border-radius: var(--radius); background: none; color: var(--color-text-muted); cursor: pointer; transition: color var(--t), transform var(--t);
}
.nav-caret:hover, .nav-item.is-open .nav-caret { color: var(--color-text); }
.nav-caret:focus-visible { outline: 2px solid var(--color-blue-light); outline-offset: 1px; }
.nav-caret svg { transition: transform var(--t); }
.nav-item.is-open .nav-caret svg { transform: rotate(180deg); }
.nav-item.is-open > .nav-top { color: var(--color-text); background: rgba(255, 255, 255, 0.04); }

.mega { display: none; }
.mega-inner { display: grid; grid-template-columns: 1fr 280px; gap: 32px; }
.mega-cols { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 28px; }
.mega-col.is-wide { grid-column: span 2; }
.mega-col.is-wide .mega-list { display: grid; grid-template-columns: 1fr 1fr; column-gap: 20px; }
.mega-head {
  display: flex; align-items: center; gap: 8px; margin: 0 0 10px; padding-bottom: 10px; border-bottom: 1px solid var(--color-border);
  font: 600 11.5px/1.4 var(--ff-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-text-sub);
}
[lang="ar"] .mega-head { font-family: var(--ff-ar-head); letter-spacing: 0; text-transform: none; font-size: 13px; }
.mega-head::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--color-blue); flex: none; }
.mega-col.is-green .mega-head::before { background: #4caf7d; box-shadow: 0 0 10px rgba(76, 175, 125, 0.6); }
.mega-col.is-red .mega-head::before { background: #ff4d4d; box-shadow: 0 0 10px rgba(255, 77, 77, 0.55); }
.mega-col.is-blue .mega-head::before { background: var(--color-blue); box-shadow: 0 0 10px rgba(77, 109, 255, 0.6); }
.mega-list { list-style: none; margin: 0; padding: 0; }
.nav-links .mega-list a {
  display: block; padding: 8px 10px; margin: 0 -10px; border-radius: 8px; font-size: 14px; color: var(--color-text);
  transition: background 0.15s;
}
.nav-links .mega-list a:hover, .nav-links .mega-list a:focus-visible { background: rgba(255, 255, 255, 0.06); }
.nav-links .mega-list a:focus-visible { outline: 2px solid var(--color-blue-light); outline-offset: -2px; }
.mega-name { display: block; font-weight: 600; line-height: 1.35; }
.mega-text { display: block; margin-top: 2px; font-size: 12.5px; font-weight: 400; line-height: 1.45; color: var(--color-text-muted); }
.mega-list a:hover .mega-text { color: var(--color-text-sub); }
.mega-list .is-sub a { padding-inline-start: 24px; position: relative; }
.mega-list .is-sub a::before { content: ''; position: absolute; inset-inline-start: 11px; top: 14px; width: 6px; height: 1px; background: var(--color-border-bright); }
.mega-list .is-sub .mega-name { font-weight: 500; font-size: 13.5px; }
.mega-col.is-green .mega-list a:hover .mega-name { color: #8fe0b4; }
.mega-col.is-red .mega-list a:hover .mega-name { color: #ff9b9b; }
.mega-col.is-blue .mega-list a:hover .mega-name { color: var(--color-blue-light); }
.nav-links .mega-more {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; padding: 6px 0; font-size: 13px; font-weight: 600; color: var(--color-blue-light);
}
.nav-links .mega-more:hover { color: #fff; background: none; }
.mega-arrow { transition: transform 0.15s; }
.mega-more:hover .mega-arrow { transform: translateX(3px); }
[dir="rtl"] .mega-arrow { transform: scaleX(-1); }
[dir="rtl"] .mega-more:hover .mega-arrow { transform: scaleX(-1) translateX(3px); }

.mega-side { display: flex; flex-direction: column; gap: 14px; }
.nav-links .mega-feature {
  display: block; padding: 16px; border-radius: var(--radius-lg); color: var(--color-text);
  background: linear-gradient(135deg, rgba(48, 102, 74, 0.28), rgba(77, 109, 255, 0.16)); border: 1px solid rgba(142, 161, 255, 0.22);
}
.nav-links .mega-feature:hover { border-color: rgba(142, 161, 255, 0.5); background: linear-gradient(135deg, rgba(48, 102, 74, 0.36), rgba(77, 109, 255, 0.24)); }
.mega-kicker { display: block; font: 600 11px/1.4 var(--ff-mono); letter-spacing: 0.12em; text-transform: uppercase; color: #8fe0b4; margin-bottom: 6px; }
[lang="ar"] .mega-kicker { font-family: var(--ff-ar-head); letter-spacing: 0; text-transform: none; font-size: 12px; }
.mega-feature-title { display: block; font-weight: 700; font-size: 15px; line-height: 1.4; }
.mega-cta { padding: 16px; border-radius: var(--radius-lg); background: rgba(255, 255, 255, 0.04); border: 1px solid var(--color-border); }
.mega-cta-title { margin: 0 0 4px; font-weight: 700; font-size: 15px; color: var(--color-text); }
.mega-cta p:not(.mega-cta-title) { margin: 0 0 12px; font-size: 13px; line-height: 1.55; color: var(--color-text-sub); }
.nav-links .mega-cta .btn { display: inline-flex; padding: 9px 16px; color: #fff; }

@media (min-width: 1025px) {
  .mega {
    position: absolute; top: 100%; left: 0; right: 0; z-index: 90;
    background: linear-gradient(180deg, #06064a, #030336); border-bottom: 1px solid var(--color-border-bright);
    box-shadow: 0 30px 60px rgba(0, 0, 20, 0.55);
  }
  .mega::before { /* the brand guardline along the top edge */
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, var(--color-red), var(--color-green) 50%, var(--color-blue)); opacity: 0.8;
  }
  [dir="rtl"] .mega::before { background: linear-gradient(270deg, var(--color-red), var(--color-green) 50%, var(--color-blue)); }
  .mega-inner { max-width: var(--container); margin: 0 auto; padding: 28px 24px 32px; }
  .nav-item.is-open > .mega { display: block; animation: mega-in 0.18s ease-out; }
  .mega-blog .mega-cols, .mega-about .mega-cols, .mega-it .mega-cols { max-width: 760px; }
  .mega-about .mega-inner { grid-template-columns: minmax(0, 480px) 280px; justify-content: start; }
}
@keyframes mega-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

@media (max-width: 1024px) {
  .nav-links { max-height: calc(100dvh - 72px); overflow-y: auto; overscroll-behavior: contain; }
  .nav-item { flex-wrap: wrap; }
  .nav-item > .nav-top { flex: 1; }
  .nav-caret { width: 48px; height: 48px; margin: 0; }
  .nav-item.is-open > .mega { display: block; flex-basis: 100%; }
  .mega-inner, .mega-cols { display: block; }
  .mega-inner { padding: 4px 8px 12px 16px; border-inline-start: 2px solid var(--color-border-bright); margin-inline-start: 16px; }
  [dir="rtl"] .mega-inner { padding: 4px 16px 12px 8px; }
  .mega-col { margin-bottom: 14px; }
  .mega-col.is-wide .mega-list { display: block; }
  .mega-head { margin-bottom: 4px; padding-bottom: 6px; }
  .mega-text { display: none; }
  .nav-links .mega-list a { padding: 10px; margin: 0; }
  .mega-side { gap: 10px; }
  .mega-feature .mega-text { display: block; }
}
@media (prefers-reduced-motion: reduce) {
  .nav-item.is-open > .mega { animation: none; }
  .nav-caret svg, .mega-arrow { transition: none; }
}
/* phones and tablets: full-width menu rows aligned with the reading
   direction, and a menu button that never shrinks */
@media (max-width: 1024px) {
  .nav-links { align-items: stretch; }
  .nav-links > a, .nav-links .nav-top { text-align: start; }
  .nav-toggle { flex: none; min-width: 44px; min-height: 44px; justify-content: center; align-items: center; }
  .nav-toggle svg { flex: none; width: 24px; height: 24px; }
}
@media (max-width: 480px) {
  .nav-cta { gap: 8px; }
  .lang-toggle { padding: 7px 9px; }
  .lang-toggle svg { display: none; }
  .brand-text small { display: none; }
}
@media (max-width: 480px) {
  .brand { gap: 8px; font-size: 15px; min-width: 0; }
  .brand-mark { width: 30px; height: 30px; }
}
@media (max-width: 420px) {
  .nav-wrap { gap: 10px; }
  .brand-text { display: none; } /* the shield alone; the link keeps its label */
  .brand-mark { width: 34px; height: 34px; }
  .nav-cta .btn-sm { padding: 8px 12px; font-size: 13px; }
}