/* =========================================================
   WATCHOPS24 — SAUDI NATIONAL DAY 96 / PHASE 1
   Header celebration bar only. Existing website untouched.
   ========================================================= */
:root{--nd96-bar-h:38px}

.nd96-bar{
  position:fixed;
  z-index:130;
  top:0;
  left:0;
  right:0;
  height:var(--nd96-bar-h);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  border-bottom:1px solid rgba(108,229,166,.18);
  background:
    radial-gradient(circle at 16% 50%,rgba(90,255,174,.12),transparent 24%),
    radial-gradient(circle at 84% 50%,rgba(45,198,128,.10),transparent 24%),
    linear-gradient(90deg,#043421 0%,#075f38 48%,#043421 100%);
  box-shadow:0 8px 28px rgba(0,0,0,.18);
  color:#f5fff9;
  font-family:inherit;
}
.nd96-bar::before,.nd96-bar::after{
  content:"";
  position:absolute;
  top:50%;
  width:180px;
  height:1px;
  opacity:.55;
  background:linear-gradient(90deg,transparent,rgba(181,255,215,.62),transparent);
}
.nd96-bar::before{left:clamp(10px,6vw,100px)}
.nd96-bar::after{right:clamp(10px,6vw,100px)}
.nd96-inner{
  position:relative;
  z-index:1;
  width:min(100% - 32px,1100px);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  white-space:nowrap;
  text-align:center;
}
.nd96-mark{
  width:25px;
  height:25px;
  flex:0 0 25px;
  display:grid;
  place-items:center;
  border:1px solid rgba(194,255,220,.36);
  border-radius:50%;
  background:rgba(255,255,255,.06);
  box-shadow:inset 0 1px rgba(255,255,255,.08),0 0 18px rgba(40,220,138,.12);
  color:#d8ffe8;
  font-size:10px;
  font-weight:800;
  letter-spacing:-.02em;
}
.nd96-copy{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  min-width:0;
  font-size:12.5px;
  line-height:1;
  font-weight:600;
}
.nd96-title{color:#fff;font-weight:700}
.nd96-sep{width:3px;height:3px;border-radius:50%;background:#7ee8ad;box-shadow:0 0 8px rgba(126,232,173,.5)}
.nd96-slogan{color:#bdeccd;font-weight:500}

/* Move the existing fixed header down without changing its design. */
.site-header{top:var(--nd96-bar-h) !important}
body{padding-top:var(--nd96-bar-h) !important}

/* Existing mobile navigation is position:fixed, so keep it below both bars. */
@media(max-width:980px){
  .site-header .nav{top:calc(var(--w24-header-h) + var(--nd96-bar-h)) !important}
  .site-header.scrolled .nav{top:calc(72px + var(--nd96-bar-h)) !important}
}

@media(max-width:700px){
  :root{--nd96-bar-h:42px}
  .nd96-inner{width:min(100% - 18px,680px);gap:8px}
  .nd96-mark{width:23px;height:23px;flex-basis:23px;font-size:9px}
  .nd96-copy{font-size:11px;gap:7px}
  .nd96-bar::before,.nd96-bar::after{display:none}
  .site-header .nav,.site-header.scrolled .nav{top:calc(72px + var(--nd96-bar-h)) !important}
}
@media(max-width:460px){
  .nd96-slogan{display:none}
  .nd96-sep{display:none}
  .nd96-copy{font-size:11.5px}
}

/* =========================================================
   WatchOps24 — Saudi National Day 96 / Phase 2
   Header text glow + homepage Hero celebration layer only.
   Existing hero layout/content/assets remain untouched.
   ========================================================= */

/* Premium glow on the National Day copy only — bar background unchanged. */
.nd96-title{
  text-shadow:0 0 7px rgba(229,255,239,.38),0 0 15px rgba(92,241,157,.24);
}
.nd96-slogan{
  text-shadow:0 0 8px rgba(113,239,168,.18);
}
.nd96-mark{
  box-shadow:inset 0 1px rgba(255,255,255,.08),0 0 13px rgba(73,235,145,.20),0 0 25px rgba(40,220,138,.08);
}

/* Homepage hero: restrained Saudi-green cinematic wash on the text side. */
body.nd96-home .hero{isolation:isolate}
body.nd96-home .hero::before{
  content:"";
  position:absolute;
  z-index:1;
  pointer-events:none;
  inset:0;
  background:
    radial-gradient(ellipse 48% 72% at 12% 78%,rgba(16,155,86,.17) 0%,rgba(11,116,68,.09) 34%,transparent 69%),
    linear-gradient(90deg,rgba(8,109,62,.07) 0%,transparent 42%);
  mix-blend-mode:screen;
  opacity:.92;
  animation:nd96HeroArrival 1.8s ease-out both;
}
html[dir="ltr"] body.nd96-home .hero::before{
  background:
    radial-gradient(ellipse 48% 72% at 88% 78%,rgba(16,155,86,.17) 0%,rgba(11,116,68,.09) 34%,transparent 69%),
    linear-gradient(-90deg,rgba(8,109,62,.07) 0%,transparent 42%);
}

/* Very subtle geometric texture behind the message area. */
body.nd96-home .hero::after{
  content:"";
  position:absolute;
  z-index:1;
  pointer-events:none;
  left:0;
  bottom:6%;
  width:43%;
  height:68%;
  opacity:.045;
  background-image:
    linear-gradient(30deg,rgba(186,255,216,.9) 12%,transparent 12.5%,transparent 87%,rgba(186,255,216,.9) 87.5%),
    linear-gradient(150deg,rgba(186,255,216,.9) 12%,transparent 12.5%,transparent 87%,rgba(186,255,216,.9) 87.5%);
  background-size:42px 72px;
  -webkit-mask-image:linear-gradient(90deg,#000,rgba(0,0,0,.45),transparent);
  mask-image:linear-gradient(90deg,#000,rgba(0,0,0,.45),transparent);
}
html[dir="ltr"] body.nd96-home .hero::after{
  left:auto;
  right:0;
  -webkit-mask-image:linear-gradient(-90deg,#000,rgba(0,0,0,.45),transparent);
  mask-image:linear-gradient(-90deg,#000,rgba(0,0,0,.45),transparent);
}

/* Keep all original hero content above the temporary celebration layer. */
body.nd96-home .hero > :not(.hero-bg):not(.hero-grid):not(.hero-orb){position:relative;z-index:2}

/* National Day kicker replaces only the tiny live-monitoring kicker on home. */
body.nd96-home .hero-live-kicker.nd96-hero-kicker{
  color:#dfffee;
  text-shadow:0 0 9px rgba(91,238,156,.22);
}
body.nd96-home .hero-live-kicker.nd96-hero-kicker i{
  background:#43df8b;
  box-shadow:0 0 0 4px rgba(67,223,139,.08),0 0 12px rgba(67,223,139,.52);
}

/* Small, quiet identity signature — not a replacement for the official logo. */
.nd96-hero-signature{
  position:absolute;
  z-index:4;
  left:clamp(28px,5vw,84px);
  bottom:clamp(42px,6vh,76px);
  display:flex;
  align-items:center;
  gap:9px;
  color:rgba(222,255,235,.72);
  font-size:10px;
  font-weight:600;
  letter-spacing:.01em;
  pointer-events:none;
  text-shadow:0 0 10px rgba(61,224,134,.18);
}
html[dir="ltr"] .nd96-hero-signature{left:auto;right:clamp(28px,5vw,84px)}
.nd96-hero-signature b{
  display:grid;
  place-items:center;
  width:27px;
  height:27px;
  border:1px solid rgba(144,246,188,.28);
  border-radius:50%;
  background:rgba(6,89,51,.18);
  color:#caffdf;
  font-size:10px;
  box-shadow:0 0 16px rgba(54,218,128,.10);
}

@keyframes nd96HeroArrival{
  from{opacity:0;filter:blur(7px)}
  to{opacity:.92;filter:blur(0)}
}
@media(prefers-reduced-motion:reduce){body.nd96-home .hero::before{animation:none}}
@media(max-width:980px){
  body.nd96-home .hero::after{width:70%;opacity:.035}
  .nd96-hero-signature{display:none}
}

/* =========================================================
   Phase 2.1 — Make the National Day hero treatment visible.
   Visual layer only: no hero layout/content changes.
   ========================================================= */
body.nd96-home .hero::before{
  background:
    radial-gradient(ellipse 62% 88% at 8% 70%,rgba(0,190,92,.46) 0%,rgba(0,145,76,.30) 25%,rgba(0,103,66,.16) 48%,rgba(0,184,132,.08) 62%,transparent 76%),
    linear-gradient(90deg,rgba(0,124,69,.24) 0%,rgba(0,151,92,.12) 24%,rgba(0,191,161,.06) 39%,transparent 56%);
  mix-blend-mode:screen;
  opacity:1;
  filter:saturate(1.22);
}
html[dir="ltr"] body.nd96-home .hero::before{
  background:
    radial-gradient(ellipse 62% 88% at 92% 70%,rgba(0,190,92,.46) 0%,rgba(0,145,76,.30) 25%,rgba(0,103,66,.16) 48%,rgba(0,184,132,.08) 62%,transparent 76%),
    linear-gradient(-90deg,rgba(0,124,69,.24) 0%,rgba(0,151,92,.12) 24%,rgba(0,191,161,.06) 39%,transparent 56%);
}
body.nd96-home .hero::after{
  opacity:.10;
  background-size:40px 69px;
  filter:drop-shadow(0 0 8px rgba(80,255,160,.16));
}
body.nd96-home .hero-live-kicker.nd96-hero-kicker{
  color:#ecfff4;
  text-shadow:0 0 7px rgba(255,255,255,.28),0 0 16px rgba(49,238,132,.55),0 0 30px rgba(25,203,112,.24);
}
.nd96-hero-signature{
  color:rgba(231,255,240,.90);
  text-shadow:0 0 9px rgba(255,255,255,.16),0 0 18px rgba(47,224,126,.42);
}
@media(max-width:980px){
  body.nd96-home .hero::before{
    background:
      radial-gradient(ellipse 78% 78% at 4% 68%,rgba(0,190,92,.38) 0%,rgba(0,137,73,.22) 36%,rgba(0,180,135,.08) 58%,transparent 76%),
      linear-gradient(90deg,rgba(0,124,69,.18),transparent 62%);
  }
  html[dir="ltr"] body.nd96-home .hero::before{
    background:
      radial-gradient(ellipse 78% 78% at 96% 68%,rgba(0,190,92,.38) 0%,rgba(0,137,73,.22) 36%,rgba(0,180,135,.08) 58%,transparent 76%),
      linear-gradient(-90deg,rgba(0,124,69,.18),transparent 62%);
  }
  body.nd96-home .hero::after{opacity:.075}
}


/* =========================================================
   Phase 2.2 — Unified National Day hero identity
   Apply the same Saudi-green cinematic glow + geometric pattern
   to every public marketing-page hero, without changing layout.
   ========================================================= */
.nd96-page-hero{
  position:relative;
  isolation:isolate;
  overflow:hidden;
}
.nd96-page-glow,
.nd96-page-pattern{
  position:absolute;
  pointer-events:none;
  inset:0;
}
.nd96-page-glow{
  z-index:1;
  background:
    radial-gradient(ellipse 62% 88% at 8% 70%,rgba(0,190,92,.46) 0%,rgba(0,145,76,.30) 25%,rgba(0,103,66,.16) 48%,rgba(0,184,132,.08) 62%,transparent 76%),
    linear-gradient(90deg,rgba(0,124,69,.24) 0%,rgba(0,151,92,.12) 24%,rgba(0,191,161,.06) 39%,transparent 56%);
  mix-blend-mode:screen;
  filter:saturate(1.22);
  animation:nd96HeroArrival 1.8s ease-out both;
}
html[dir="ltr"] .nd96-page-glow{
  background:
    radial-gradient(ellipse 62% 88% at 92% 70%,rgba(0,190,92,.46) 0%,rgba(0,145,76,.30) 25%,rgba(0,103,66,.16) 48%,rgba(0,184,132,.08) 62%,transparent 76%),
    linear-gradient(-90deg,rgba(0,124,69,.24) 0%,rgba(0,151,92,.12) 24%,rgba(0,191,161,.06) 39%,transparent 56%);
}
.nd96-page-pattern{
  z-index:1;
  width:43%;
  height:72%;
  top:auto;
  right:auto;
  left:0;
  bottom:4%;
  opacity:.10;
  background-image:
    linear-gradient(30deg,rgba(186,255,216,.9) 12%,transparent 12.5%,transparent 87%,rgba(186,255,216,.9) 87.5%),
    linear-gradient(150deg,rgba(186,255,216,.9) 12%,transparent 12.5%,transparent 87%,rgba(186,255,216,.9) 87.5%);
  background-size:40px 69px;
  filter:drop-shadow(0 0 8px rgba(80,255,160,.16));
  -webkit-mask-image:linear-gradient(90deg,#000,rgba(0,0,0,.45),transparent);
  mask-image:linear-gradient(90deg,#000,rgba(0,0,0,.45),transparent);
}
html[dir="ltr"] .nd96-page-pattern{
  left:auto;
  right:0;
  -webkit-mask-image:linear-gradient(-90deg,#000,rgba(0,0,0,.45),transparent);
  mask-image:linear-gradient(-90deg,#000,rgba(0,0,0,.45),transparent);
}

/* Homepage already has its own Phase 2 pseudo-elements; avoid doubling them. */
body.nd96-home .hero > .nd96-page-glow,
body.nd96-home .hero > .nd96-page-pattern{display:none}

@media(max-width:980px){
  .nd96-page-glow{
    background:
      radial-gradient(ellipse 78% 78% at 4% 68%,rgba(0,190,92,.38) 0%,rgba(0,137,73,.22) 36%,rgba(0,180,135,.08) 58%,transparent 76%),
      linear-gradient(90deg,rgba(0,124,69,.18),transparent 62%);
  }
  html[dir="ltr"] .nd96-page-glow{
    background:
      radial-gradient(ellipse 78% 78% at 96% 68%,rgba(0,190,92,.38) 0%,rgba(0,137,73,.22) 36%,rgba(0,180,135,.08) 58%,transparent 76%),
      linear-gradient(-90deg,rgba(0,124,69,.18),transparent 62%);
  }
  .nd96-page-pattern{width:70%;opacity:.075}
}
@media(prefers-reduced-motion:reduce){.nd96-page-glow{animation:none}}


/* =========================================================
   Phase 3 — National Day welcome popup
   One appearance per browser session. No existing layout changed.
   ========================================================= */
.nd96-popup{
  position:fixed;
  inset:0;
  z-index:99999;
  display:grid;
  place-items:center;
  padding:24px;
  background:rgba(0,8,18,.62);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  opacity:0;
  visibility:hidden;
  transition:opacity .28s ease,visibility .28s ease;
}
.nd96-popup.is-open{opacity:1;visibility:visible}
.nd96-popup-card{
  position:relative;
  width:min(520px,100%);
  padding:38px 36px 32px;
  overflow:hidden;
  text-align:center;
  border:1px solid rgba(91,255,166,.28);
  border-radius:24px;
  background:
    radial-gradient(circle at 50% -10%,rgba(0,183,94,.24),transparent 45%),
    linear-gradient(155deg,rgba(7,38,43,.96),rgba(3,18,35,.97) 58%,rgba(3,25,31,.97));
  box-shadow:0 28px 90px rgba(0,0,0,.5),0 0 46px rgba(0,177,93,.13),inset 0 1px rgba(255,255,255,.05);
  transform:translateY(14px) scale(.985);
  transition:transform .32s ease;
}
.nd96-popup.is-open .nd96-popup-card{transform:none}
.nd96-popup-card::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.055;
  background-image:
    linear-gradient(30deg,rgba(190,255,219,.9) 12%,transparent 12.5%,transparent 87%,rgba(190,255,219,.9) 87.5%),
    linear-gradient(150deg,rgba(190,255,219,.9) 12%,transparent 12.5%,transparent 87%,rgba(190,255,219,.9) 87.5%);
  background-size:34px 59px;
}
.nd96-popup-close{
  position:absolute;
  top:15px;
  inset-inline-end:15px;
  z-index:2;
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.13);
  border-radius:50%;
  color:#dff7ea;
  background:rgba(255,255,255,.045);
  font:400 23px/1 Arial,sans-serif;
  cursor:pointer;
  transition:background .2s ease,border-color .2s ease,transform .2s ease;
}
.nd96-popup-close:hover{background:rgba(0,174,91,.16);border-color:rgba(91,255,166,.34);transform:rotate(4deg)}
.nd96-popup-emblem{
  position:relative;
  width:68px;
  height:68px;
  margin:0 auto 16px;
  display:grid;
  place-items:center;
  border:1px solid rgba(99,255,171,.34);
  border-radius:50%;
  color:#f0fff6;
  background:rgba(0,144,75,.15);
  box-shadow:0 0 28px rgba(24,224,124,.16),inset 0 0 22px rgba(24,224,124,.08);
  font-size:21px;
  font-weight:800;
}
.nd96-popup-kicker{
  position:relative;
  margin:0 0 8px;
  color:#76f6ad;
  font-size:13px;
  font-weight:700;
  letter-spacing:.01em;
  text-shadow:0 0 15px rgba(49,238,132,.3);
}
.nd96-popup-title{
  position:relative;
  margin:0 0 12px;
  color:#fff;
  font-size:clamp(28px,4vw,38px);
  line-height:1.25;
  font-weight:800;
  text-shadow:0 0 22px rgba(72,238,145,.16);
}
.nd96-popup-message{
  position:relative;
  max-width:410px;
  margin:0 auto 24px;
  color:#c7d9d2;
  font-size:15px;
  line-height:1.9;
}
.nd96-popup-button{
  position:relative;
  min-height:48px;
  padding:0 24px;
  border:1px solid rgba(96,255,169,.28);
  border-radius:13px;
  color:#f2fff7;
  background:linear-gradient(135deg,#087b49,#0a9c5b);
  box-shadow:0 12px 28px rgba(0,123,73,.24),inset 0 1px rgba(255,255,255,.12);
  font:700 14px/1 inherit;
  cursor:pointer;
  transition:transform .2s ease,filter .2s ease,box-shadow .2s ease;
}
.nd96-popup-button:hover{transform:translateY(-2px);filter:brightness(1.07);box-shadow:0 15px 34px rgba(0,151,86,.28)}
@media(max-width:560px){
  .nd96-popup{padding:16px}
  .nd96-popup-card{padding:34px 22px 26px;border-radius:20px}
  .nd96-popup-message{font-size:14px;line-height:1.8}
}
@media(prefers-reduced-motion:reduce){
  .nd96-popup,.nd96-popup-card{transition:none}
}


/* =========================================================
   Phase 4 — National Day footer signature
   A restrained Saudi-green celebration line above the existing
   footer copyright. Existing footer structure/design is untouched.
   ========================================================= */
.nd96-footer-note{
  position:relative;
  z-index:2;
  width:min(1180px,calc(100% - 40px));
  margin:0 auto 14px;
  padding:12px 18px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  border-top:1px solid rgba(74,239,147,.16);
  border-bottom:1px solid rgba(74,239,147,.10);
  color:#dff8e9;
  background:
    radial-gradient(circle at 50% 50%,rgba(0,167,88,.10),transparent 58%),
    linear-gradient(90deg,transparent,rgba(0,126,70,.07),transparent);
  font-size:13px;
  line-height:1.6;
  text-align:center;
  text-shadow:0 0 14px rgba(55,235,137,.18);
}
.nd96-footer-note::before{
  content:"96";
  flex:0 0 auto;
  width:30px;
  height:30px;
  display:grid;
  place-items:center;
  border:1px solid rgba(92,255,164,.30);
  border-radius:50%;
  color:#effff5;
  background:rgba(0,141,76,.12);
  box-shadow:0 0 18px rgba(38,221,124,.12);
  font-size:10px;
  font-weight:800;
}
.nd96-footer-note strong{
  color:#71f3a9;
  font-weight:700;
}
@media(max-width:600px){
  .nd96-footer-note{
    width:calc(100% - 28px);
    padding:11px 12px;
    gap:8px;
    font-size:11.5px;
  }
  .nd96-footer-note::before{
    width:27px;
    height:27px;
  }
}

/* =========================================================
   ND96 v22 — top banner removed: restore header to page top.
   ========================================================= */
html body{padding-top:0 !important;}
html body .site-header{top:0 !important;}
@media(max-width:900px){
  html body .site-header .nav,
  html body .site-header.scrolled .nav{top:72px !important;}
}