/* Header: floating dock with Solutions / Use cases mega panels (desktop) and a drawer menu (≤1080px). Markup is identical on every page; smart-nav.js drives the panels. */
:root{--nav-bg:#132a20;--nav-panel:#11251cfa;--nav-line:#a1b89a38;--nav-gold:#d9bd84;--nav-text:#efe5c9;--nav-muted:#a8b6a4;--nav-hover:#ffffff0d}
body>div.wrap:first-child{position:sticky;top:14px;z-index:80;max-width:1180px;width:calc(100% - 48px);margin:0 auto 14px;padding:0 24px!important;background:linear-gradient(115deg,#172e25f7,#101f19f7)!important;border:1px solid var(--nav-line)!important;border-radius:18px;box-shadow:0 10px 30px #0002;backdrop-filter:blur(20px);transition:box-shadow .25s}
body.nav-scrolled>div.wrap:first-child{box-shadow:0 14px 40px #0004}
html{scroll-padding-top:110px}
header{position:relative;height:72px;gap:28px;border:0}
header>.brand{font-size:14px;letter-spacing:1px;white-space:nowrap;gap:12px;flex-shrink:0}
header .brand-symbol{width:30px;height:30px}
header nav{flex:1;display:flex;align-items:center;gap:2px;font-size:13px;color:var(--nav-text)}
header nav>.nav-top,header .nav-trigger{position:relative;display:inline-flex;align-items:center;gap:6px;padding:10px 13px;border-radius:9px;color:var(--nav-text);font:inherit;font-size:13px;background:none;border:0;cursor:pointer;transition:background .2s,color .2s;text-decoration:none!important}
header nav>.nav-top:hover,header .nav-trigger:hover,header .nav-item.open>.nav-trigger{background:var(--nav-hover);color:#fff}
header nav>.nav-top[aria-current=page],header .nav-trigger.is-current{color:var(--nav-gold)}
header nav>.nav-top[aria-current=page]:after,header .nav-trigger.is-current:after{content:'';position:absolute;left:13px;right:13px;bottom:4px;height:1.5px;border-radius:2px;background:var(--nav-gold)}
.nav-chev{width:12px;height:12px;opacity:.75;transition:transform .2s}
.nav-item.open .nav-chev{transform:rotate(180deg)}
header nav .lang{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;padding:0;margin-inline-start:auto;border:1px solid #d0b88355;border-radius:50%;background:#ffffff08;color:#f0e2bd;transition:background .2s,border-color .2s}
header nav .lang span{display:none}
header nav .lang svg{width:16px;height:16px}
header nav .lang:hover{background:#d0b8831f;border-color:#d0b883aa;text-decoration:none}
header nav .btn{display:inline-flex;align-items:center;gap:12px;margin-inline-start:10px;padding:10px 14px 10px 18px;font-size:12px;font-weight:600;color:#13241b;border:0;border-radius:10px;background:#d5b97f;box-shadow:0 6px 18px #c9a36126;white-space:nowrap}
html[dir=rtl] header nav .btn{padding:10px 18px 10px 14px}
header nav .btn:hover{background:#e0c793}
header nav .btn span{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#203629;color:#f4e6bf;font-size:11px}
header a:focus-visible,header button:focus-visible{outline:2px solid #e2c68b;outline-offset:3px}

/* Mega panels */
.nav-panel{display:none}
@media(min-width:1081px){
  .nav-panel{position:absolute;top:calc(100% + 10px);left:-24px;right:-24px;grid-template-columns:minmax(0,1fr) 270px;cursor:default;background:#11251c;border:1px solid var(--nav-line);border-radius:18px;box-shadow:0 28px 60px #0006}
  .nav-panel:before{content:'';position:absolute;left:0;right:0;bottom:100%;height:12px}
  .nav-item.open>.nav-panel,html:not(.nav-js) .nav-item:hover>.nav-panel{display:grid;animation:nav-panel-in .18s ease-out}
  .nav-panel-list{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:18px}
  #nav-cases .nav-panel-list{grid-template-columns:1fr}
  .nav-panel-aside{margin:18px;margin-inline-start:0;padding:22px;border-radius:14px;background:linear-gradient(150deg,#21402f,#152a20);border:1px solid #d9bd8433}
}
@keyframes nav-panel-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.nav-link-card{display:flex;align-items:flex-start;gap:14px;padding:13px 14px;border-radius:12px;color:var(--nav-text);text-decoration:none!important;transition:background .2s}
.nav-link-card:hover,.nav-link-card[aria-current=page]{background:#ffffff0b}
.nav-ico{flex-shrink:0;display:grid;place-items:center;width:40px;height:40px;border-radius:11px;background:#d9bd8414;border:1px solid #d9bd8433;color:var(--nav-gold)}
.nav-ico svg{width:21px;height:21px}
.nav-link-card:hover .nav-ico{background:#d9bd8426}
.nav-txt{display:grid;gap:4px;min-width:0}
.nav-txt strong{font-size:13.5px;font-weight:600;color:#f6efdc}
.nav-txt small{font-size:12px;line-height:1.45;color:var(--nav-muted)}
.nav-link-card[aria-current=page] strong{color:var(--nav-gold)}
.nav-eyebrow{margin:0 0 10px;font-size:10.5px;letter-spacing:1.6px;text-transform:uppercase;color:var(--nav-gold)}
html[lang=ar] .nav-eyebrow{letter-spacing:0;font-size:12px}
.nav-panel-aside p{margin:0 0 16px;font-size:13px;line-height:1.6;color:#dfe5d6}
.nav-more{display:inline-flex;gap:8px;font-size:12.5px;font-weight:600;color:var(--nav-gold);text-decoration:none!important}
.nav-more:hover span{transform:translateX(3px)}
html[dir=rtl] .nav-more:hover span{transform:translateX(-3px)}
.nav-more span{transition:transform .2s}

/* Menu button + phone language globe */
header>.menu{display:none;place-items:center;width:42px;height:42px;padding:0;border:1px solid #8da37a60;border-radius:11px;background:#253e30;cursor:pointer}
.menu-icon,.menu-icon:before,.menu-icon:after{display:block;width:18px;height:1.5px;border-radius:2px;background:#e7d6aa;transition:transform .25s,opacity .2s}
.menu-icon{position:relative}
.menu-icon:before,.menu-icon:after{content:'';position:absolute;left:0}
.menu-icon:before{top:-6px}.menu-icon:after{top:6px}
header>.menu[aria-expanded=true] .menu-icon{background:transparent}
header>.menu[aria-expanded=true] .menu-icon:before{transform:translateY(6px) rotate(45deg)}
header>.menu[aria-expanded=true] .menu-icon:after{transform:translateY(-6px) rotate(-45deg)}
.lang-quick{display:none}

/* Drawer (tablets and phones) */
@media(max-width:1080px){
  header{height:66px;gap:10px}
  header>.menu{display:grid;margin-inline-start:0}
  header>.lang-quick{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;width:42px;height:42px;padding:0;margin-inline-start:auto;border:1px solid #d0b88355;border-radius:50%;background:#ffffff08;color:#e9d8b1}
  header>.lang-quick span{display:none}header>.lang-quick svg{flex-shrink:0;width:22px;height:22px}
  header nav{display:none;position:absolute;top:calc(100% + 10px);left:-24px;right:-24px;max-height:calc(100dvh - 110px);overflow-y:auto;overscroll-behavior:contain;flex-direction:column;align-items:stretch;gap:2px;padding:12px;background:var(--nav-panel);border:1px solid var(--nav-line);border-radius:18px;box-shadow:0 28px 60px #0006;backdrop-filter:blur(24px)}
  header nav.open{display:flex;animation:nav-panel-in .18s ease-out}
  header nav>.nav-top,header .nav-trigger{width:100%;justify-content:space-between;padding:15px 14px;font-size:15px;border-radius:12px}
  header nav>.nav-top[aria-current=page]:after,header .nav-trigger.is-current:after{display:none}
  header nav>.nav-top[aria-current=page],header .nav-trigger.is-current{background:#ffffff08}
  .nav-item.open>.nav-panel{display:block;padding:2px 4px 10px}
  .nav-panel-list{display:grid;gap:2px}
  .nav-link-card{padding:11px 10px}
  .nav-ico{width:36px;height:36px}
  .nav-panel-aside{margin:6px 10px 4px;padding:14px 16px;border-radius:12px;background:#ffffff08;border:1px solid #d9bd8426}
  .nav-panel-aside p{margin-bottom:10px}
  header nav .lang{display:none}
  header nav .btn{justify-content:center;margin:10px 0 2px;padding:15px 18px;font-size:14px}
  body.nav-open{overflow:hidden}
}
@media(max-width:720px){
  body>div.wrap:first-child{top:10px;width:calc(100% - 24px);padding:0 15px!important;border-radius:16px}
  header{height:62px}
  header>.brand{font-size:13px;max-width:60%}
  header .brand-symbol{width:26px;height:26px}
  header nav{left:-15px;right:-15px;max-height:calc(100dvh - 92px)}
}
@media(prefers-reduced-motion:reduce){header nav,.nav-panel,.nav-chev,.menu-icon,.menu-icon:before,.menu-icon:after,.nav-more span{animation:none!important;transition:none!important}}

/* Join the floating header and hero without a light strip. */
body.home-page{background-image:linear-gradient(#090d0b,#090d0b);background-size:100% 140px;background-repeat:no-repeat}body.home-page>div.wrap:first-child{margin-bottom:0}body.home-page .cinema-inner{padding-top:82px}@media(min-width:1600px){body.home-page .cinema-inner{padding-top:92px}}@media(max-width:720px){body.home-page .cinema-inner{padding-top:34px}}@media(min-width:721px){body.home-page .cinema .actions{margin-top:72px}}@media(min-width:1600px){body.home-page .cinema .actions{margin-top:84px}}
.scroll-progress{display:none!important}
/* Brand mark (Netiliume): the connected "N" SVG replaces the old rotated squares. */
.brand-symbol{transform:none!important;display:inline-flex!important}
.brand-symbol svg{display:block;width:100%;height:100%}
.brand-symbol i{display:none}

/* Solutions / Use cases panels: list | preview of the hovered item | aside (preview built by smart-nav.js; without JS the panels keep their plain list) */
.nav-panel-preview{display:none}
@media(min-width:1081px){
  .nav-panel.has-preview{grid-template-columns:300px minmax(0,1fr) 270px}
  .nav-panel.has-preview .nav-panel-list,#nav-cases.has-preview .nav-panel-list{grid-template-columns:1fr;align-content:start;gap:2px;padding:14px;border-inline-end:1px solid var(--nav-line)}
  .nav-panel.has-preview .nav-link-card{align-items:center;padding:10px 12px}
  .nav-panel.has-preview .nav-link-card small{display:none}
  .nav-panel.has-preview .nav-link-card .nav-ico{width:36px;height:36px}
  .nav-panel .nav-link-card.is-active{background:#ffffff0d}
  .nav-panel .nav-link-card.is-active strong{color:var(--nav-gold)}
  .nav-panel .nav-link-card.is-active .nav-ico{background:#d9bd8426;border-color:#d9bd8466}
  .nav-panel-preview{display:flex;flex-direction:column;gap:12px;min-width:0;padding:22px 26px;color:var(--nav-text);text-decoration:none!important;cursor:pointer}
  .nav-preview-head{display:flex;align-items:center;justify-content:space-between}
  .nav-preview-ico{width:46px;height:46px;border-radius:13px}
  .nav-preview-ico svg{width:24px;height:24px}
  .nav-preview-count{font-size:11px;letter-spacing:1.4px;color:var(--nav-muted)}
  .nav-preview-title{font-size:18px;font-weight:600;line-height:1.35;color:#f6efdc}
  .nav-panel-preview:hover .nav-preview-title{color:var(--nav-gold)}
  .nav-preview-body{display:flex;flex-direction:column;gap:12px}
  .nav-preview-lead{margin:0;font-size:13.5px;line-height:1.65;color:#dfe5d6}
  .nav-preview-muted{font-size:12.5px;color:var(--nav-muted)}
  .nav-preview-chips{display:flex;flex-wrap:wrap;gap:6px;margin:2px 0 0;padding:0;list-style:none}
  .nav-preview-chips li{padding:5px 10px;font-size:11.5px;line-height:1.3;border-radius:999px;border:1px solid #d9bd8433;background:#d9bd840f;color:#efe5c9}
  .nav-preview-img{display:block;width:100%;height:120px;object-fit:cover;border-radius:12px;border:1px solid var(--nav-line)}
  .nav-preview-outcome{display:block;padding-top:10px;border-top:1px solid var(--nav-line)}
  .nav-preview-outcome .nav-eyebrow{margin-bottom:6px}
  .nav-panel-preview.is-swapping>*{animation:nav-preview-in .22s ease-out}
}
@keyframes nav-preview-in{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.nav-panel-preview.is-swapping>*{animation:none}}