/* Shared chrome: tokens, type, buttons, nav, footer. Homepage still uses landing.css. */
/* ==========================================================================
   Nova Design System — Colors & Type
   Dark-mode brand, lime-on-black. BDO Grotesk display, BDO Grotesk body.
   ========================================================================== */

/* ---------- Fonts (Google Fonts — matches Figma exactly) ---------- */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@400;500;600;700&display=swap');
@font-face{font-family:'BDO Grotesk';src:url('../fonts/BDOGrotesk-Light.ttf') format('truetype');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'BDO Grotesk';src:url('../fonts/BDOGrotesk-Regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'BDO Grotesk';src:url('../fonts/BDOGrotesk-Medium.ttf') format('truetype');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'BDO Grotesk';src:url('../fonts/BDOGrotesk-DemiBold.ttf') format('truetype');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'BDO Grotesk';src:url('../fonts/BDOGrotesk-Bold.ttf') format('truetype');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'BDO Grotesk';src:url('../fonts/BDOGrotesk-ExtraBold.ttf') format('truetype');font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:'BDO Grotesk';src:url('../fonts/BDOGrotesk-Black.ttf') format('truetype');font-weight:900;font-style:normal;font-display:swap}

:root {
  /* ==============================
     COLORS — Brand
     ============================== */
  --nova-lime:       #B1EB1B;   /* Primary brand — CTAs, accents, hero motif */
  --nova-lime-alt:   #BEEA4D;   /* Secondary lime — subheadings / highlights on dark */
  --nova-lime-deep:  #8FBF16;   /* Deep lime — alternate fill on tile */
  --nova-lime-soft:  #BEEA4D;   /* Soft lime — links, chip borders */
  --nova-lime-ink:   #003C31;   /* Text color used ON top of lime fills */
  --nova-lime-ink-2: #003C31;   /* Alt ink on lime (lighter) */

  /* ==============================
     COLORS — Neutrals (dark)
     ============================== */
  --nova-brand:      #003C31;
  --nova-black:      #0B241E;
  --nova-ink-0:      #0B241E;   /* Top nav / deepest surface */
  --nova-ink-1:      #143C30;   /* Body on white */
  --nova-ink-2:      #143C30;   /* Section band */
  --nova-ink-3:      #1A5648;   /* Card dark */
  --nova-ink-4:      #1A5648;   /* Raised card / browser chrome bg */
  --nova-ink-5:      #337065;   /* Browser chrome */
  --nova-ink-6:      #337065;   /* Content placeholder */
  --nova-gray-700:   #4D8A81;   /* Border on dark */
  --nova-gray-500:   #8A8987;   /* Muted text on dark / body meta */
  --nova-gray-400:   #C7C6C4;   /* Lower-contrast body */
  --nova-gray-300:   #C7C6C4;   /* Social icons */
  --nova-gray-200:   #E4E3E1;   /* Step numerals */

  /* ==============================
     COLORS — Neutrals (light)
     ============================== */
  --nova-paper:      #F1F0EE;   /* Alternating light band */
  --nova-paper-2:    #EAF4F5;
  --nova-paper-3:    #EAF4F5;
  --nova-line:       #E4E3E1;   /* Light border */
  --nova-white:      #FFFFFF;

  /* ==============================
     SEMANTIC — role tokens
     ============================== */
  /* Backgrounds */
  --bg-canvas:        var(--nova-black);
  --bg-dark-band:     var(--nova-black);
  --bg-light-band:    var(--nova-paper);
  --bg-card-dark:     var(--nova-ink-4);
  --bg-card-light:    var(--nova-white);
  --bg-nav:           rgba(0,60,49,0.6);     /* blurred top nav */
  --bg-accent:        var(--nova-lime);
  --bg-accent-deep:   var(--nova-lime-deep);

  /* Foregrounds */
  --fg-on-dark:       #FFFFFF;
  --fg-on-dark-muted: var(--nova-gray-500);
  --fg-on-dark-dim:   var(--nova-gray-400);
  --fg-on-light:      var(--nova-ink-1);
  --fg-on-light-muted:var(--nova-gray-500);
  --fg-on-accent:     var(--nova-lime-ink);
  --fg-accent:        var(--nova-lime-alt);       /* lime text on dark */
  --fg-link:          var(--nova-lime-soft);

  /* Borders */
  --border-dark:      rgba(255,255,255,0.05);
  --border-dark-2:    rgba(0,60,49,0.15);
  --border-light:     rgba(0,60,49,0.1);
  --border-accent:    var(--nova-lime-alt);

  /* Shadows */
  --shadow-card:      0 9px 11px -7px rgba(0,60,49,0.1),
                      0 22px 28px -6px rgba(0,60,49,0.1);
  --shadow-card-dark: 0 28px 55px -13px rgba(0,60,49,0.25);
  --shadow-glow-lime: 0 9px 11px -7px rgba(190,234,77,0.2),
                      0 22px 28px -6px rgba(190,234,77,0.2);

  /* ==============================
     TYPOGRAPHY — font families
     ============================== */
  --font-display: 'BDO Grotesk', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-body:    'BDO Grotesk', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-arabic:  'IBM Plex Sans Arabic', 'BDO Grotesk', sans-serif;
  --font-mono:    'BDO Grotesk', Helvetica, Arial, sans-serif;

  /* ==============================
     TYPOGRAPHY — size scale (px)
     ============================== */
  --fs-eyebrow:   12px;   /* tracked, uppercase */
  --fs-micro:     10px;
  --fs-xs:        12px;
  --fs-sm:        14px;
  --fs-base:      16px;
  --fs-md:        18px;
  --fs-lg:        20px;
  --fs-xl:        24px;
  --fs-2xl:       30px;
  --fs-3xl:       36px;
  --fs-display:   48px;
  --fs-hero:      56px;   /* Big section headers — BDO Grotesk Bold */
  --fs-monolith:  120px;  /* Watermark / brand word */

  /* ==============================
     SPACING (8px base)
     ============================== */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  20px;
  --s-6:  24px;
  --s-8:  32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;
  --s-20: 80px;
  --s-24: 96px;
  --s-32: 128px;
  --s-50: 200px;   /* full section vertical rhythm */

  /* ==============================
     RADII — Nova is NOT rounded. Hard edges.
     Only chip/pill elements and avatars use radius.
     ============================== */
  --r-none: 0;
  --r-xs:   2px;
  --r-sm:   8px;     /* search pill in browser chrome */
  --r-pill: 999px;

  /* ==============================
     LAYOUT
     ============================== */
  --page-max:     1920px;
  --content-max:  1280px;
  --section-pad-x: 320px;   /* 1920 design: 320px side gutters */
}

/* ==========================================================================
   SEMANTIC TYPE CLASSES
   ========================================================================== */

.nova-eyebrow {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-eyebrow);
  line-height: 16px;
  letter-spacing: 0.2em;
  color: var(--fg-accent);
  text-transform: none; /* Figma uses title case, tracked */
}

.nova-h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-hero);   /* 56 */
  line-height: 60px;
  letter-spacing: -0.024em;
  color: inherit;
  margin: 0;
}

.nova-h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-3xl);    /* 36 */
  line-height: 40px;
  letter-spacing: -0.01em;
  margin: 0;
}

.nova-h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-xl);     /* 24 */
  line-height: 32px;
  margin: 0;
}

.nova-h4 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-lg);     /* 20 */
  line-height: 28px;
  margin: 0;
}

.nova-body-lg {
  font-family: var(--font-body);
  font-size: var(--fs-lg);     /* 20 */
  line-height: 29px;
  color: var(--fg-on-light-muted);
  margin: 0;
}

.nova-body {
  font-family: var(--font-body);
  font-size: var(--fs-md);     /* 18 */
  line-height: 28px;
  color: var(--fg-on-light-muted);
  margin: 0;
}

.nova-body-sm {
  font-family: var(--font-body);
  font-size: var(--fs-base);   /* 16 */
  line-height: 24px;
  color: var(--fg-on-light-muted);
  margin: 0;
}

.nova-meta {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  line-height: 20px;
  color: var(--fg-on-dark-muted);
}

.nova-mono {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: -0.05em;
}

.nova-watermark {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 385px;
  line-height: 1;
  letter-spacing: -0.05em;
  color: var(--nova-lime);
  opacity: 0.07;
}

/* ==========================================================================
   CORE PRIMITIVES (reused across kits & slides)
   ========================================================================== */

.nova-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 17px 32px;
  background: var(--nova-lime);
  color: var(--nova-lime-ink);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-md);
  line-height: 28px;
  letter-spacing: -0.05em;
  border: 0;
  border-radius: 0;                 /* SQUARE */
  cursor: pointer;
  text-decoration: none;
  transition: background 160ms ease, transform 120ms ease;
}
.nova-btn-primary:hover { background: var(--nova-lime-deep); }
.nova-btn-primary:active { transform: translateY(1px); }

.nova-btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 32px;
  background: transparent;
  color: var(--fg-on-dark);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-md);
  line-height: 28px;
  letter-spacing: -0.05em;
  border: 1px solid var(--nova-gray-500);
  border-radius: 0;
  cursor: pointer;
  text-decoration: none;
  transition: border-color 160ms ease, color 160ms ease;
}
.nova-btn-ghost:hover { border-color: var(--nova-lime); color: var(--nova-lime); }

.nova-btn-dark {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 16px 24px;
  background: var(--nova-black);
  color: var(--nova-white);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-base);
  border: 0; border-radius: 0;
  cursor: pointer; text-decoration: none;
}

.nova-nav-chip {
  display: inline-flex;
  align-items: center;
  padding: 0 0 4px 0;
  border: 1px solid var(--nova-lime-alt);
  color: var(--nova-lime-alt);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-sm);
  line-height: 20px;
  letter-spacing: -0.025em;
  background: transparent;
  text-decoration: none;
}

.nova-link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-base);
  line-height: 24px;
  color: currentColor;
  text-decoration: none;
}
.nova-link-arrow::after {
  content: "";
  width: 16px; height: 16px;
  background: currentColor;
  -webkit-mask: url("icon-arrow.svg") center/contain no-repeat;
          mask: url("icon-arrow.svg") center/contain no-repeat;
}


/* ===== NEXT STYLE BLOCK ===== */


  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  body{background:var(--nova-black);}
  img{display:block;max-width:100%;}
  a{color:inherit;text-decoration:none;}
  button{font-family:inherit;cursor:pointer;border:0;background:none;}
  ::selection{background:var(--nova-lime);color:var(--nova-lime-ink);}

  /* ---- stage / device frame ---- */
  .stage{min-height:100vh;background:var(--nova-black);}
  .stage[data-device="mobile"]{display:flex;justify-content:center;align-items:flex-start;
    padding:28px 16px;background:radial-gradient(120% 80% at 50% 0%,#143C30 0%,#0B241E 60%);min-height:100vh;}
  .site{width:100%;background:var(--nova-black);color:#FFFFFF;font-family:var(--font-body);--font-display:'BDO Grotesk','IBM Plex Sans Arabic',-apple-system,BlinkMacSystemFont,sans-serif;
    container-type:inline-size;position:relative;overflow-x:clip;}
  .stage[data-device="mobile"] .site{width:402px;max-width:100%;height:calc(100vh - 56px);
    overflow-y:auto;overflow-x:hidden;border:11px solid #1A5648;border-radius:46px;
    box-shadow:0 50px 90px -30px rgba(0,17,14,0.55),0 0 0 1px rgba(0,17,14,0.04);scrollbar-width:none;}
  .stage[data-device="mobile"] .site::-webkit-scrollbar{display:none;}
  .site[dir="rtl"]{font-family:'IBM Plex Sans Arabic',var(--font-body)!important;}
  .site[dir="rtl"] h1,.site[dir="rtl"] h2,.site[dir="rtl"] h3,.site[dir="rtl"] h4,
  .site[dir="rtl"] .dsp{font-family:'IBM Plex Sans Arabic',var(--font-display);font-weight:800!important}

  /* ---- floating controls ---- */
  .controls{position:fixed;z-index:200;bottom:22px;right:22px;display:flex;gap:10px;align-items:center;
    background:rgba(0,60,49,0.86);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
    border:1px solid rgba(255,255,255,.09);padding:8px;}
  .ctl-group{display:flex;gap:2px;}
  .ctl{padding:8px 13px;font-family:var(--font-display);font-weight:700;font-size:12px;letter-spacing:.04em;
    color:rgba(255,255,255,.55);background:rgba(255,255,255,.04);transition:all .15s ease;white-space:nowrap;}
  .ctl:hover{color:#FFFFFF;}
  .ctl[data-on="true"]{background:var(--nova-lime);color:var(--nova-lime-ink);}
  .ctl-label{font-family:var(--font-body);font-size:10px;letter-spacing:.18em;color:#8A8987;padding:0 4px;text-transform:uppercase;}

  /* ---- buttons ---- */
  .btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-family:var(--font-display);
    font-weight:700;font-size:16px;letter-spacing:-0.02em;padding:15px 26px;border-radius:0;transition:all .16s ease;cursor:pointer;}
  .btn-primary{background:var(--nova-lime);color:#003C31;}
  .btn-primary:hover{background:var(--nova-lime-deep);}
  .btn-primary:active{transform:translateY(1px);}
  .btn-ghost{background:transparent;color:#FFFFFF;border:1px solid var(--nova-gray-500);}
  .btn-ghost:hover{border-color:var(--nova-lime);color:var(--nova-lime);}
  .btn-sm{padding:11px 18px;font-size:13px;}

  .arrow{display:inline-block;width:15px;height:15px;background:currentColor;
    -webkit-mask:url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cpath%20d%3D%22M%2012.175%209%20L%200%209%20L%200%207%20L%2012.175%207%20L%206.575%201.4%20L%208%200%20L%2016%208%20L%208%2016%20L%206.575%2014.6%20L%2012.175%209%20Z%22%20fill%3D%22currentColor%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E') center/contain no-repeat;mask:url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cpath%20d%3D%22M%2012.175%209%20L%200%209%20L%200%207%20L%2012.175%207%20L%206.575%201.4%20L%208%200%20L%2016%208%20L%208%2016%20L%206.575%2014.6%20L%2012.175%209%20Z%22%20fill%3D%22currentColor%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E') center/contain no-repeat;}
  .site[dir="rtl"] .arrow{transform:scaleX(-1);}
  .linkarrow{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-display);font-weight:700;font-size:15px;color:inherit;transition:gap .16s ease;}
  .linkarrow:hover{gap:13px;}

  /* ---- nav ---- */
  .nav{position:sticky;top:0;z-index:10050;height:74px;display:flex;align-items:center;gap:8px;
    padding:0 56px;background:rgba(0,60,49,0.62);backdrop-filter:blur(26px);-webkit-backdrop-filter:blur(26px);
    border-bottom:1px solid rgba(255,255,255,.05);}
  .nav-logo{height:48px;margin-inline-end:26px;}
  .nav-items{display:flex;align-items:center;gap:2px;}
  .nav-item{position:relative;}
.nav-trigger{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-display);font-weight:700;font-size:14.5px;
    letter-spacing:-0.02em;color:rgba(255,255,255,.72);padding:10px 16px;transition:color .15s ease;}
.nav-link{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-display);font-weight:700;font-size:14.5px;
    letter-spacing:-0.02em;color:rgba(255,255,255,.72);padding:10px 16px;text-decoration:none;transition:color .15s ease,background .15s ease;}
.nav-trigger:hover,.nav-item[data-open="true"] .nav-trigger,.nav-link:hover:not(.is-featured){color:#FFFFFF;}
.nav-link.is-featured{border-radius:999px;padding:8px 14px;box-shadow:0 0 0 1px rgba(177,235,27,.35);}
.nav-link.is-featured:hover{filter:brightness(1.06);}
.nav-new{display:inline-flex;align-items:center;justify-content:center;padding:2px 7px;border-radius:999px;background:#003C31;color:#B1EB1B;font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;line-height:1.4;animation:navNewPulse 1.6s ease-in-out infinite;}
.nav-link.is-featured .nav-new{background:#003C31;color:#B1EB1B;}
@keyframes navNewPulse{0%,100%{transform:scale(1);box-shadow:0 0 0 0 rgba(177,235,27,.55);}50%{transform:scale(1.08);box-shadow:0 0 0 6px rgba(177,235,27,0);}}
@media (prefers-reduced-motion: reduce){.nav-new{animation:none;}}
  .nav-trigger .chev{width:8px;height:8px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;
    transform:rotate(45deg);margin-top:-3px;transition:transform .2s ease;}
  .nav-item[data-open="true"] .nav-trigger .chev{transform:rotate(225deg);margin-top:2px;}
  .nav-right{display:flex;align-items:center;gap:8px;margin-inline-start:auto;}
  .nav-lang{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-display);font-weight:700;font-size:13px;
    color:rgba(255,255,255,.72);border:1px solid rgba(255,255,255,.16);padding:9px 13px;transition:all .15s ease;}
  .nav-lang:hover{border-color:var(--nova-lime);color:var(--nova-lime);}
  .nav-lang .globe{width:14px;height:14px;border-radius:50%;border:1.4px solid currentColor;position:relative;}
  .nav-lang .globe::before{content:"";position:absolute;inset:1.6px 5px;border-inline:1.4px solid currentColor;border-radius:50%;}

  /* mega menu */
  .mega{position:absolute;top:calc(100% + 1px);inset-inline-start:0;width:min(620px,86vw);
    background:var(--nova-ink-1);border:1px solid rgba(255,255,255,.08);box-shadow:0 40px 80px -24px rgba(0,17,14,0.55);
    padding:14px;display:none;z-index:130;}
  .nav-item[data-open="true"] .mega,
  .nav-item:hover > .mega,
  .nav-item:focus-within > .mega{display:block;animation:megaIn .18s ease;}
  @keyframes megaIn{from{opacity:0;transform:translateY(-6px);}to{opacity:1;transform:none;}}
  .mega-row>span:last-child{display:flex!important;flex-direction:column!important;min-width:0;}.mega-row .mega-name{display:block!important;}.mega-row .mega-for{display:block!important;}
  .mega-row{display:flex;gap:14px;align-items:flex-start;padding:15px 16px;transition:background .15s ease;}
  .mega-row:hover{background:rgba(255,255,255,.04);}
  .mega-ic{width:42px;height:42px;flex:none;background:var(--nova-ink-4);border:1px solid rgba(255,255,255,.07);
    display:flex;align-items:center;justify-content:center;color:var(--nova-lime);}
  .mega-ic svg{width:20px;height:20px;}
  .mega-name{font-family:var(--font-display);font-weight:700;font-size:15.5px;color:#FFFFFF;margin:0 0 3px;display:flex;gap:8px;align-items:baseline;}
  .mega-name .ar{font-family:'IBM Plex Sans Arabic';font-size:14px;color:var(--nova-lime-alt);font-weight:700;}
  .mega-one{font-family:var(--font-body);font-size:13px;color:var(--nova-lime-alt);margin:0 0 3px;}
  .mega-for{font-family:var(--font-body);font-size:12.5px;line-height:18px;color:var(--nova-gray-500);margin:0;}
  .mega-grid2{display:grid;grid-template-columns:1fr 1fr;gap:2px;}
  .mega-foot{margin-top:6px;padding:14px 16px 6px;border-top:1px solid rgba(255,255,255,.07);}
  .mega-foot a{color:var(--nova-lime);font-family:var(--font-display);font-weight:700;font-size:14px;display:inline-flex;gap:8px;align-items:center;}
  .mega-lead{font-family:var(--font-body);font-size:12px;letter-spacing:.04em;color:var(--nova-gray-500);padding:6px 16px 12px;}

  /* mobile nav */
  .hamb{display:none;flex-direction:column;gap:5px;padding:10px;margin-inline-start:auto;}
  .hamb span{width:22px;height:2px;background:#fff;display:block;transition:.2s;}
  .mnav{display:none;}
  .mdrawer{position:absolute;inset:0;height:100%;min-height:100%;background:var(--nova-ink-1);z-index:200;
    flex-direction:column;padding:24px;overflow-y:auto;display:none;}
  .mdrawer-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;}
  .mdrawer-head .x{width:36px;height:36px;border:1px solid rgba(255,255,255,.15);display:flex;align-items:center;justify-content:center;color:#FFFFFF;font-size:24px;line-height:1;}
  .mdrawer-grp{border-top:1px solid rgba(255,255,255,.08);padding:16px 0;}
  .mdrawer-grp .gt{font-family:var(--font-body);font-weight:700;font-size:11px;letter-spacing:.18em;color:var(--nova-gray-500);margin-bottom:10px;text-transform:uppercase;}
  .site[dir="rtl"] .mdrawer-grp .gt{letter-spacing:.06em;}
  .mdrawer-grp a{display:block;font-family:var(--font-display);font-weight:700;font-size:18px;color:#FFFFFF;padding:9px 0;}
  .site[dir="rtl"] .mdrawer-grp a{font-family:'IBM Plex Sans Arabic';font-weight:800;}
  .mdrawer-grp a span{display:block;font-family:var(--font-body);font-weight:400;font-size:12.5px;color:var(--nova-gray-500);margin-top:2px;}
  .mdrawer-grp a.is-featured{display:inline-flex;align-items:center;gap:8px;width:fit-content;border-radius:999px;padding:8px 14px;margin:6px 0;}
  .mdrawer-grp a .nav-new{display:inline-flex;margin:0;margin-inline-start:8px;color:#B1EB1B;font-family:var(--font-display);font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;}
  .mdrawer-foot{margin-top:22px;display:flex;flex-direction:column;gap:11px;}

  /* ===== MOTION SYSTEM (scroll fade reveal) ===== */
  [data-reveal]{opacity:0;transform:translateY(46px);transition:opacity .85s cubic-bezier(.16,.8,.3,1),transform .85s cubic-bezier(.16,.8,.3,1);}
  [data-reveal].in{opacity:1;transform:none;}
  .reveal-stagger > *{opacity:0;transform:translateY(42px);transition:opacity .8s cubic-bezier(.16,.8,.3,1),transform .8s cubic-bezier(.16,.8,.3,1);}
  .reveal-stagger.in > *{opacity:1;transform:none;}
  .reveal-stagger.in > *:nth-child(1){transition-delay:.04s}
  .reveal-stagger.in > *:nth-child(2){transition-delay:.11s}
  .reveal-stagger.in > *:nth-child(3){transition-delay:.18s}
  .reveal-stagger.in > *:nth-child(4){transition-delay:.25s}
  .reveal-stagger.in > *:nth-child(5){transition-delay:.32s}
  .reveal-stagger.in > *:nth-child(6){transition-delay:.39s}
  .reveal-stagger.in > *:nth-child(7){transition-delay:.46s}
  .reveal-stagger.in > *:nth-child(8){transition-delay:.53s}
  @media (prefers-reduced-motion: reduce){
    [data-reveal],[data-reveal].in,.reveal-stagger>*,.reveal-stagger.in>*{opacity:1!important;transform:none!important;transition:none!important;}
  }

  /* ---- layout helpers ---- */
  .wrap{max-width:1240px;margin:0 auto;padding:0 56px;}
  .sec{padding:128px 0;}
  .band-dark{background:var(--nova-black);color:#FFFFFF;}
  .band-ink{background:var(--nova-ink-1);color:#FFFFFF;}
  .band-light{background:var(--nova-paper);color:var(--nova-ink-1);}
  .eyebrow{font-family:var(--font-body);font-weight:700;font-size:12px;letter-spacing:.22em;color:var(--nova-lime-alt);margin:0 0 18px;text-transform:uppercase;}
  .site[dir="rtl"] .eyebrow{letter-spacing:.12em;}
  .h-sec{font-family:'BDO Grotesk',sans-serif;font-weight:600;font-size:48px;line-height:1.04;letter-spacing:-0.025em;margin:0;text-transform:uppercase;}
  .site[dir="rtl"] .h-sec{font-family:'IBM Plex Sans Arabic';font-weight:800;letter-spacing:0;line-height:1.18;}
  .sub-sec{font-family:var(--font-body);font-size:19px;line-height:1.5;color:var(--nova-gray-400);margin:18px 0 0;max-width:560px;}
  .band-light .sub-sec{color:var(--nova-gray-500);}

  /* ---- FOOTER ---- */
  .footer{background:var(--nova-black);padding:110px 0 36px;position:relative;overflow:hidden;border-top:1px solid rgba(255,255,255,.06);}
  .footer-top{display:grid;grid-template-columns:1.5fr repeat(6,1fr);gap:28px;position:relative;z-index:2;}
  .footer-brand .logo{height:30px;margin-bottom:18px;}
  .footer-brand p{font-family:var(--font-body);font-size:14px;line-height:1.55;color:var(--nova-gray-500);margin:0 0 22px;max-width:240px;}
  .footer-soc{display:flex;gap:12px;}
  .footer-soc a{width:36px;height:36px;border:1px solid rgba(255,255,255,.12);display:flex;align-items:center;justify-content:center;transition:.15s;}
  .footer-soc a:hover{border-color:var(--nova-lime);}
  .footer-soc i{width:17px;height:17px;background:var(--nova-gray-300);}
  .footer-soc a:hover i{background:var(--nova-lime);}
  .footer-col h4{font-family:var(--font-display);font-weight:700;font-size:13px;color:#FFFFFF;margin:0 0 16px;letter-spacing:.02em;}
  .footer-col ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:11px;}
  .footer-col a,.footer-col li{font-family:var(--font-body);font-size:13.5px;color:var(--nova-gray-500);line-height:1.5;}
  .footer-col a:hover{color:var(--nova-lime);}
  .footer-contact .addr{font-family:var(--font-body);font-size:13px;line-height:1.6;color:var(--nova-gray-500);}
  .footer-bottom{display:flex;justify-content:space-between;align-items:center;margin-top:64px;padding-top:24px;
    border-top:1px solid rgba(255,255,255,.06);font-family:var(--font-body);font-size:13px;color:var(--nova-gray-500);position:relative;z-index:2;}
  .watermark{position:absolute;inset-inline:0;bottom:-72px;text-align:center;font-family:var(--font-display);font-weight:800;
    font-size:300px;line-height:1;letter-spacing:-0.05em;color:var(--nova-lime);opacity:.06;pointer-events:none;white-space:nowrap;}
  /* ===== NOVA SUITE, mega-menu product cards ===== */
  .suite-mega{width:min(760px,90vw);}
  .suite-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}
  .suite-card{display:flex;flex-direction:column;gap:0;border:1px solid rgba(255,255,255,.08);background:var(--nova-ink-3);
    transition:border-color .15s ease,background .15s ease;}
  .suite-card:hover{border-color:rgba(190,234,77,0.4);background:rgba(190,234,77,0.04);}
  .suite-card .sc-vis{height:84px;background:var(--nova-ink-1);border-bottom:1px solid rgba(255,255,255,.06);position:relative;overflow:hidden;
    display:flex;align-items:center;justify-content:center;}
  .suite-card .sc-vis .ic{width:30px;height:30px;color:var(--nova-lime);}
  .suite-card .sc-seq{position:absolute;top:8px;inset-inline-start:10px;font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;color:var(--nova-gray-500);}
  .suite-card .sc-body{display:flex!important;flex-direction:column!important;background: var(--nova-ink-3);min-height: 110px;}.suite-card .sc-name{display:flex!important;}.suite-card .sc-tag{display:block!important;}
  .suite-card .sc-body{padding:13px 14px 15px;}
  .suite-card .sc-name{font-family:var(--font-display);font-weight:700;font-size:14.5px;color:#FFFFFF;margin:0 0 4px;display:flex;gap:7px;align-items:baseline;}
  .suite-card .sc-name .ar{font-family:'IBM Plex Sans Arabic';font-size:12.5px;color:var(--nova-lime-alt);font-weight:700;}
  .suite-card .sc-tag{font-family:var(--font-body);font-size:12px;line-height:1.45;color:var(--nova-gray-400);margin:0;}
.suite-foot{display:flex;align-items:center;justify-content:flex-end;gap:14px;margin-top:12px;padding:14px 6px 4px;border-top:1px solid rgba(255,255,255,.07);}
.suite-foot a.lk{color:var(--nova-lime);font-family:var(--font-display);font-weight:700;font-size:13.5px;display:inline-flex;gap:8px;align-items:center;}
.suite-foot .demo{background:var(--nova-lime);color:#003C31;font-family:var(--font-display);font-weight:700;font-size:13px;padding:9px 16px;text-decoration:none;display:inline-flex;align-items:center;}
  .suite-foot .demo:hover{background:var(--nova-lime-deep);}
@container (max-width:900px){
  .wrap{padding:0 28px;}
  .nav{padding:0 22px;}
  .nav-items{display:none;}
  .nav-right .nav-lang{display:inline-flex;}
  .hamb{display:flex;}
  .mdrawer[data-open="true"]{display:flex;}
  .footer-top{grid-template-columns:1fr 1fr;gap:30px;}
  .footer-brand{grid-column:1/-1;}
  .watermark{font-size:150px;bottom:-30px;}
}
@container (max-width:560px){
  .wrap{padding:0 20px;}
  .footer-top{grid-template-columns:1fr 1fr;}
}
/* Editable navigation item media. */
.nav .nav-menu-visual { display: inline-flex; width: 100%; height: 100%; align-items: center; justify-content: center; }
.nav .nav-menu-visual img,
.nav .nav-menu-visual svg { display: block; width: 100%; height: 100%; object-fit: contain; }
.nav .mega-ic .nav-menu-visual { width: 24px; height: 24px; }
.nav .sc-vis > .nav-menu-visual { width: 52px; height: 52px; }

html[dir="rtl"] .footer-col a, 
html[dir="rtl"] .footer-col li,
html[dir="rtl"] .footer-bottom,
html[dir="rtl"] .footer-contact .addr{
  font-family: IBM Plex Sans Arabic!important;
}
/* Nova 2026 image-backed mega menus from current index.html */
.nav .suite-card .sc-vis.sc-photo{height:123px;overflow:hidden}
.nav .sc-photo > .sc-im,
.nav .sc-photo > .nav-menu-visual.is-image{position:absolute;inset:0;width:100%;height:100%}
.nav .sc-photo > .nav-menu-visual.is-svg{position:relative;inset:auto;width:30px;height:30px}
.nav .sc-photo > .sc-im,
.nav .sc-photo > .nav-menu-visual.is-image img,
.nav .sc-im{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center center;padding:0;background:#0B0C0C;transition:transform .25s ease}
.nav .suite-mega:not(.meth-mega):not(.res-mega) .suite-card:nth-child(1) .sc-im{object-position:50% 42%}
.nav .suite-mega:not(.meth-mega):not(.res-mega) .suite-card:nth-child(2) .sc-im{object-position:40% 24%}
.nav .suite-mega:not(.meth-mega):not(.res-mega) .suite-card:nth-child(3) .sc-im{object-position:56% 50%}
.nav .meth-mega .suite-card:nth-child(1) .sc-im{object-position:62% 30%}
.nav .suite-card:hover .sc-im{transform:scale(1.05)}
.nav .sc-photo .sc-seq{z-index:1;background:rgba(0,60,49,0.68);padding:3px 7px;color:#FFFFFF}
.nav .sc-photo[data-logo="true"] .sc-im{object-fit:contain;padding:26px;box-sizing:border-box;background:var(--nova-ink-1)}
.nav .meth-mega,
.nav .res-mega{width:min(1080px,94vw);position:absolute;top:calc(100% + 1px);inset-inline-start:0;inset-inline-end:auto;left:auto;right:auto;}
html[dir="rtl"] .nav .meth-mega,
html[dir="rtl"] .nav .res-mega{
  left: auto;transform: none;
}
.nav .meth-cards{grid-template-columns:repeat(4,1fr)}
.nav .res-mega{width:min(840px,94vw);inset-inline-start:auto;inset-inline-end:0;}
.nav .res-mega .suite-cards{grid-template-columns:repeat(3,1fr)}
@media(max-width:1100px){.nav .meth-cards{grid-template-columns:repeat(2,1fr)}}
.nav{background:rgba(11,36,30,.78)!important;border-bottom-color:rgba(255,255,255,.1)!important;}
.mega,.res-mega,.meth-mega{background-color:var(--nova-ink-1)!important;border-color:rgba(255,255,255,.1)!important;}
.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;z-index:100000;padding:10px 16px;background:#B1EB1B;color:#003C31;font-weight:700}
.skip-link:focus{left:16px;top:16px;width:auto;height:auto;overflow:visible}
.nav .nav-item[data-open="true"] > .mega,
.nav .nav-item:hover > .mega,
.nav .nav-item:focus-within > .mega{display:block!important;}