:root{
  --bg:#070B14;
  --bg2:#0B1224;
  --card:rgba(255,255,255,.06);
  --card2:rgba(255,255,255,.10);
  --stroke:rgba(255,255,255,.12);
  --text:#EAF0FF;
  --muted:rgba(234,240,255,.72);
  --brand:#3BC8FF;
  --brand2:#2B6BFF;
  --ok:#2EE59D;
  --shadow: 0 20px 60px rgba(0,0,0,.35);
  --r: 22px;
  --r2: 28px;
  --max: 1120px;
  --ease: cubic-bezier(.2,.9,.2,1);
  --font-body: "Inter", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji","Segoe UI Emoji";
  --font-display: "Space Grotesk", "Inter", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  --font-ar: "IBM Plex Sans Arabic", "Inter", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  color-scheme: dark;
}

html[data-theme="light"]{
  --bg:#F7FAFF;
  --bg2:#FFFFFF;
  --card:rgba(8,20,48,.04);
  --card2:rgba(8,20,48,.06);
  --stroke:rgba(8,20,48,.10);
  --text:#0B1224;
  --muted:rgba(11,18,36,.70);
  --shadow: 0 16px 40px rgba(12,18,36,.12);
  color-scheme: light;
}

*{box-sizing:border-box}
body{margin:0;font-family: var(--font-body); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; background: radial-gradient(1200px 800px at 60% -10%, rgba(59,200,255,.25), transparent 55%),
radial-gradient(900px 700px at 20% 10%, rgba(43,107,255,.20), transparent 55%),
linear-gradient(180deg, var(--bg), var(--bg2));
color:var(--text);}
a{color:inherit}

.container{width: min(var(--max), calc(100% - 32px)); margin: 0 auto;}

.topbar{border-bottom:1px solid var(--stroke); background: rgba(0,0,0,.12); backdrop-filter: blur(10px);}
html[data-theme="light"] .topbar{background: rgba(255,255,255,.7)}
.topbar__inner{display:flex; align-items:center; justify-content:space-between; padding:10px 0; gap:12px;}
.topbar__left{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.topbar__right{display:flex; align-items:center; gap:8px;}
.toplink{font-size:13px; opacity:.88; text-decoration:none}
.toplink:hover{opacity:1; text-decoration:underline}
.iconlink{width:28px;height:28px;border-radius:999px; display:grid; place-items:center; border:1px solid var(--stroke); text-decoration:none; font-size:12px; opacity:.9}
.iconlink:hover{opacity:1; transform: translateY(-1px)}
.sep{opacity:.55}

.nav{position:sticky; top:0; z-index:60; border-bottom:1px solid var(--stroke);
  background: rgba(0,0,0,.18); backdrop-filter: blur(12px);
}
html[data-theme="light"] .nav{background: rgba(255,255,255,.75)}
.nav__inner{display:flex; align-items:center; gap:14px; padding: 14px 0;}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none}
.brand__logo{width:42px;height:42px; border-radius:14px; box-shadow: 0 10px 24px rgba(0,0,0,.25)}
.brand__name{letter-spacing:.18em; font-weight:800; font-size:14px}
.brand__sub{font-size:12px; opacity:.75; letter-spacing:.12em}

.menu{margin-left:auto; display:flex; align-items:center; gap:16px}
.menu__link{font-size:13px; opacity:.85; text-decoration:none; padding:8px 10px; border-radius:12px; transition: all .2s var(--ease)}
.menu__link:hover{opacity:1; background: var(--card)}

.nav__actions{display:flex; align-items:center; gap:10px}
.chip{border:1px solid var(--stroke); background: transparent; color:inherit; padding:9px 12px; border-radius:999px; cursor:pointer; font-weight:650; font-size:12px; transition: all .2s var(--ease)}
.chip:hover{transform: translateY(-1px); background: var(--card)}

.btn{border:1px solid var(--stroke); background: var(--card); color:inherit; text-decoration:none; padding:10px 14px; border-radius:999px; font-weight:700; font-size:12.5px; display:inline-flex; align-items:center; justify-content:center; gap:8px; transition: all .2s var(--ease)}
.btn:hover{transform: translateY(-1px); background: var(--card2)}
.btn--primary{border-color: transparent; background: linear-gradient(135deg, var(--brand), var(--brand2)); color:white; box-shadow: 0 18px 60px rgba(43,107,255,.25)}
.btn--primary:hover{filter: brightness(1.05)}
.btn--ghost{background: transparent}

.burger{display:none; margin-left:auto; border:1px solid var(--stroke); background: transparent; color:inherit; padding:10px 12px; border-radius:16px; cursor:pointer}

.mobile{border-top:1px solid var(--stroke); background: rgba(0,0,0,.18); backdrop-filter: blur(12px)}
html[data-theme="light"] .mobile{background: rgba(255,255,255,.8)}
.mobile__inner{display:flex; flex-direction:column; gap:10px; padding:14px 0 18px}
.mobile__link{padding:10px 12px; border-radius:14px; border:1px solid var(--stroke); text-decoration:none; background: var(--card)}
.mobile__row{display:flex; gap:10px; flex-wrap:wrap}

.hero{position:relative; overflow:hidden; padding: 54px 0 22px}
.hero__bg{position:absolute; inset:0; pointer-events:none;}
.blob{position:absolute; width:520px; height:520px; border-radius: 999px; filter: blur(70px); opacity:.55}
.blob--a{left: 52%; top:-280px; background: rgba(59,200,255,.45)}
.blob--b{left: 10%; top:-220px; background: rgba(43,107,255,.35)}
.waves{position:absolute; left:0; right:0; bottom:-1px; width:100%; height:220px; opacity:.95}
.wave{fill: rgba(255,255,255,.06)}
html[data-theme="light"] .wave{fill: rgba(11,18,36,.06)}
.wave--2{fill: rgba(255,255,255,.035)}
html[data-theme="light"] .wave--2{fill: rgba(11,18,36,.035)}

.hero__inner{position:relative;}
.badge{display:inline-flex; align-items:center; gap:10px; padding:8px 12px; border-radius:999px; border:1px solid var(--stroke); background: var(--card); font-weight:650; font-size:12px}
.dot{width:9px;height:9px;border-radius:999px;background: var(--ok); box-shadow: 0 0 0 6px rgba(46,229,157,.12)}

.hero__title{margin: 16px 0 0; font-size: clamp(34px, 5vw, 56px); letter-spacing:-.02em; line-height:1.04}
.hero__lead{max-width: 720px; margin: 14px 0 0; font-size: 16px; opacity:.9; color: var(--muted)}
.hero__cta{margin-top: 22px; display:flex; gap:12px; flex-wrap:wrap}

.kpis{margin-top: 28px; display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:12px}
.kpi{border:1px solid var(--stroke); background: var(--card); border-radius: var(--r2); padding: 14px 14px; box-shadow: var(--shadow)}
.kpi__num{font-weight:900; font-size: 24px; letter-spacing:-.02em}
.kpi__label{opacity:.8; font-size:12px; margin-top: 3px}

.section{padding: 64px 0}
.section__head{display:flex; align-items:flex-end; justify-content:space-between; gap:14px; margin-bottom: 18px}
.h2{margin:0; font-size: 26px; letter-spacing:-.01em}
.h3{margin: 0; font-size: 16px}
.p{margin: 10px 0 0; line-height: 1.65}
.muted{color: var(--muted)}

.grid2{display:grid; grid-template-columns: 1.1fr .9fr; gap:14px}
.card{border:1px solid var(--stroke); border-radius: var(--r2); padding: 18px; box-shadow: var(--shadow)}
.card--glass{background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));}
html[data-theme="light"] .card--glass{background: linear-gradient(180deg, rgba(11,18,36,.06), rgba(11,18,36,.03));}
.card--solid{background: var(--card)}

.pillrow{display:flex; gap:8px; flex-wrap:wrap; margin-top: 14px}
.pill{font-size:12px; padding:8px 10px; border-radius:999px; border:1px solid var(--stroke); background: rgba(0,0,0,.10)}
html[data-theme="light"] .pill{background: rgba(255,255,255,.6)}

.minihead{font-weight:800; letter-spacing:.12em; font-size: 12px; opacity:.85}
.list{margin-top: 12px; display:grid; gap:10px}
.list__item{padding:12px 12px; border-radius: 18px; border:1px solid var(--stroke); background: rgba(0,0,0,.10)}
html[data-theme="light"] .list__item{background: rgba(255,255,255,.65)}

.callout{margin-top: 14px; padding: 14px; border-radius: 22px; border:1px solid rgba(59,200,255,.30); background: linear-gradient(135deg, rgba(59,200,255,.14), rgba(43,107,255,.10))}
.callout__title{font-weight:800}
.callout__body{opacity:.9; margin-top: 4px}

.cards{display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap:12px}
.svc{border:1px solid var(--stroke); border-radius: var(--r2); padding: 16px; background: var(--card); transition: transform .22s var(--ease), background .22s var(--ease);}
.svc:hover{transform: translateY(-4px); background: var(--card2)}
.svc__icon{width:44px; height:44px; border-radius: 18px; display:grid; place-items:center; border:1px solid rgba(59,200,255,.28); background: linear-gradient(135deg, rgba(59,200,255,.14), rgba(43,107,255,.12)); margin-bottom: 10px}

.timeline{display:grid; grid-template-columns: repeat(7, minmax(0,1fr)); gap:10px}
.step{border:1px solid var(--stroke); border-radius: 20px; padding: 12px; background: var(--card)}
.step__n{display:inline-grid; place-items:center; width:28px;height:28px; border-radius:12px; font-weight:900; background: rgba(59,200,255,.16); border:1px solid rgba(59,200,255,.28); margin-bottom: 8px}
.step__t{font-weight:750; font-size:12.5px; opacity:.92}

.ports{display:flex; flex-wrap:wrap; gap:8px}
.port{border:1px solid var(--stroke); background: var(--card); color:inherit; padding: 10px 12px; border-radius:999px; cursor:pointer; transition: all .2s var(--ease); font-weight:700; font-size:12.5px}
.port:hover{transform: translateY(-1px); background: var(--card2)}
.port.is-active{border-color: rgba(59,200,255,.45); box-shadow: 0 12px 30px rgba(43,107,255,.18)}

.note{margin-top: 14px; display:flex; align-items:center; gap:10px; padding: 12px 14px; border-radius: 18px; border:1px dashed rgba(59,200,255,.35); background: rgba(59,200,255,.08)}
.note__dot{width:10px;height:10px;border-radius:999px; background: rgba(59,200,255,.9)}

.checks{margin-top: 12px; display:grid; gap:10px}
.check{padding:12px 12px; border-radius: 18px; border:1px solid var(--stroke); background: var(--card)}
.check:before{content:"✓"; margin-inline-end: 10px; color: var(--ok); font-weight:900}

.certs{display:grid; gap:10px}
.cert{display:flex; gap:12px; align-items:flex-start; border:1px solid var(--stroke); border-radius: var(--r2); padding: 14px; background: var(--card)}
.cert__badge{min-width:46px; height:46px; border-radius: 18px; display:grid; place-items:center; font-weight:900;
  background: linear-gradient(135deg, rgba(59,200,255,.14), rgba(43,107,255,.12)); border:1px solid rgba(59,200,255,.28)
}
.cert__title{font-weight:850}
.cert__desc{opacity:.8; font-size: 13px; margin-top: 3px; line-height:1.5}

.rfq{padding: 18px}
.rfq__left{min-width: 0}
.rfq__right{min-width: 0}
.rfq.card{border-radius: 32px}
.form{margin-top: 14px; display:grid; gap:10px}
.field{display:grid; gap:6px}
.field__label{font-size: 12px; opacity:.85; font-weight:750}
.field__input{width:100%; border-radius: 18px; padding: 12px 12px; border:1px solid var(--stroke); background: rgba(0,0,0,.10); color:inherit; outline:none}
html[data-theme="light"] .field__input{background: rgba(255,255,255,.75)}
.field__input:focus{border-color: rgba(59,200,255,.45); box-shadow: 0 0 0 4px rgba(59,200,255,.12)}
.form__row{display:flex; gap:10px; flex-wrap:wrap; margin-top: 6px}

.preview{border:1px solid var(--stroke); border-radius: var(--r2); padding: 14px; background: rgba(0,0,0,.10)}
html[data-theme="light"] .preview{background: rgba(255,255,255,.65)}
.preview__head{font-weight:850}
.preview__box{margin: 10px 0 0; white-space: pre-wrap; min-height: 160px; padding: 12px; border-radius: 18px; border:1px solid var(--stroke); background: var(--card); font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 12px; line-height: 1.55}
.preview__actions{margin-top: 12px; display:flex; gap:10px; flex-wrap:wrap}
.small{font-size:12px}

.contact__lines{margin-top: 14px; display:grid; gap:10px}
.line{display:flex; align-items:center; justify-content:space-between; gap:10px; padding: 12px; border-radius: 18px; border:1px solid var(--stroke); background: rgba(0,0,0,.10)}
html[data-theme="light"] .line{background: rgba(255,255,255,.65)}
.line__k{opacity:.75; font-size: 12px; font-weight:750}
.line__v{text-decoration:none; font-weight:800}
.line__v:hover{text-decoration:underline}

.contact__cta{margin-top: 14px; display:flex; gap:10px; flex-wrap:wrap}
.footerbrand{margin-top: 14px; display:flex; align-items:center; gap:12px}
.footerbrand__logo{width:46px;height:46px;border-radius: 18px; box-shadow: 0 14px 40px rgba(0,0,0,.25)}
.footerbrand__name{font-weight:900}
.footerbrand__tag{opacity:.75; margin-top: 2px}
.legal{margin-top: 16px; display:flex; align-items:center; gap:10px; flex-wrap:wrap; opacity:.75; font-size: 12px}

@media (max-width: 980px){
  .grid2{grid-template-columns: 1fr}
  .cards{grid-template-columns: repeat(2, minmax(0,1fr))}
  .timeline{grid-template-columns: repeat(3, minmax(0,1fr))}
  .menu{display:none}
  .nav__actions{display:none}
  .burger{display:block}
  .kpis{grid-template-columns: 1fr}
}

@media (prefers-reduced-motion: reduce){
  .svc:hover,.btn:hover,.chip:hover,.iconlink:hover{transform:none}
}


/* Typography upgrades */
.hero__title, h1, h2, .h2{font-family: var(--font-display);}
body, .p, .muted, input, textarea, button{font-family: var(--font-body);}
html[dir="rtl"]{--font-body: var(--font-ar); --font-display: var(--font-ar);} 
html[dir="rtl"] .hero__title, html[dir="rtl"] h2, html[dir="rtl"] .h2{letter-spacing:0; line-height:1.2;}
html[dir="rtl"] .badge{letter-spacing:0;}

.menu__link.active{opacity:1; background: var(--card2); box-shadow: inset 0 0 0 1px var(--stroke);}

/* Button sheen */
.btn--primary{position:relative; overflow:hidden;}
.btn--primary::after{content:""; position:absolute; top:0; left:-140%; width:60%; height:100%; background: linear-gradient(120deg, transparent, rgba(255,255,255,.40), transparent); transform: skewX(-18deg);} 
.btn--primary:hover::after{animation: shine .95s var(--ease);} 
@keyframes shine{0%{left:-140%} 100%{left:140%}}

/* Ambient motion */
.blob--a{animation: floatA 11s var(--ease) infinite;}
.blob--b{animation: floatB 14s var(--ease) infinite;}
.waves{animation: drift 9s ease-in-out infinite alternate;}
@keyframes floatA{0%,100%{transform: translate(-8px, 0) scale(1);}50%{transform: translate(10px, 18px) scale(1.03);}}
@keyframes floatB{0%,100%{transform: translate(12px, 0) scale(1);}50%{transform: translate(-10px, 20px) scale(1.04);}}
@keyframes drift{0%{transform: translateX(-10px);}100%{transform: translateX(10px);}}

/* Scroll reveal */
.js .section{opacity:0; transform: translateY(18px); transition: opacity .8s var(--ease), transform .8s var(--ease);} 
.js .section.in{opacity:1; transform:none;}
.js .section .card{opacity:0; transform: translateY(10px); transition: opacity .75s var(--ease), transform .75s var(--ease);}
.js .section.in .card{opacity:1; transform:none;}
.js .section.in .card:nth-child(1){transition-delay: 40ms}
.js .section.in .card:nth-child(2){transition-delay: 80ms}
.js .section.in .card:nth-child(3){transition-delay: 120ms}
.js .section.in .card:nth-child(4){transition-delay: 160ms}
@media (prefers-reduced-motion: reduce){.js .section,.js .section .card{opacity:1; transform:none; transition:none;} .blob--a,.blob--b,.waves{animation:none;}}

/* Floating action button */
.fab{position:fixed; right:18px; bottom:18px; z-index:80; width:54px; height:54px; border-radius:999px; display:flex; align-items:center; justify-content:center; color:white; text-decoration:none; box-shadow: var(--shadow); transition: transform .2s var(--ease), filter .2s var(--ease); border:1px solid rgba(255,255,255,.16); background: linear-gradient(135deg, #25D366, #128C7E);}
.fab:hover{transform: translateY(-2px); filter: brightness(1.03);} 
.fab svg{width:26px;height:26px;}
html[data-theme="light"] .fab{border-color: rgba(11,18,36,.14);}
html[dir="rtl"] .fab{right:auto; left:18px;}


/* --- Services Tabs / Filters --- */
.tabs{display:flex; flex-wrap:wrap; gap:8px; margin: 16px 0 10px}
.tab{border:1px solid var(--stroke); background: var(--card); color:inherit; padding: 10px 12px; border-radius:999px; cursor:pointer; transition: all .2s var(--ease); font-weight:750; font-size:12.5px}
.tab:hover{transform: translateY(-1px); background: var(--card2)}
.tab.is-active{border-color: rgba(59,200,255,.48); box-shadow: 0 12px 30px rgba(43,107,255,.18)}
.tab--accent{border-color: rgba(46,229,157,.35)}
.tab--accent.is-active{border-color: rgba(46,229,157,.55); box-shadow: 0 12px 30px rgba(46,229,157,.16)}
.filterNote{min-height: 18px; margin-bottom: 10px; font-size: 12.5px; color: var(--muted)}
.is-hidden{display:none !important}

/* --- Interactive Egypt Map --- */
.mapCard{margin-top: 10px; padding: 14px}
.mapHead{display:flex; align-items:flex-end; justify-content:space-between; gap:12px; margin-bottom: 10px}
.mapTitle{font-weight:850}
.mapHint{font-size: 12.5px}
.egyptMap{width:100%; height:auto; border-radius: 22px; overflow:hidden; border:1px solid var(--stroke); background: var(--card)}
.mapLand{stroke: rgba(255,255,255,.14); stroke-width: 1.2}
.mapCanal{stroke: rgba(59,200,255,.35); stroke-width: 2; stroke-dasharray: 6 6; fill:none}
.map-port{cursor:pointer}
.map-port:focus{outline:none}
.map-port:focus .mapDot{stroke: rgba(234,240,255,.9); stroke-width: 2}
.mapDot{fill: var(--brand); stroke: rgba(43,107,255,.55); stroke-width: 1.4}
.mapPulse{fill: transparent; stroke: rgba(59,200,255,.28); stroke-width: 2; opacity: .85}
.map-port:hover .mapDot{transform: scale(1.08); transform-box: fill-box; transform-origin:center}
.map-port.is-active .mapDot{fill: var(--ok); stroke: rgba(46,229,157,.70)}
.map-port.is-active .mapPulse{stroke: rgba(46,229,157,.30)}
.mapLabel{font-size: 11px; letter-spacing: .16em; fill: rgba(234,240,255,.55); font-weight: 800}
.mapFooter{display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top: 10px}
.pill{display:inline-flex; align-items:center; gap:8px; padding: 8px 10px; border-radius: 999px; border:1px solid var(--stroke); background: var(--card); font-size: 12px; color: var(--muted)}
.pillLink{display:inline-flex; align-items:center; gap:8px; padding: 8px 10px; border-radius: 999px; border:1px solid rgba(59,200,255,.28); background: linear-gradient(135deg, rgba(59,200,255,.10), rgba(43,107,255,.08)); font-size: 12px; color: var(--text); text-decoration:none}
.pillLink:hover{background: linear-gradient(135deg, rgba(59,200,255,.16), rgba(43,107,255,.10))}
@media (prefers-reduced-motion: no-preference){
  .mapPulse{animation: pulse 2.2s ease-in-out infinite}
  .map-port.is-active .mapPulse{animation-duration: 1.6s}
}
@keyframes pulse{
  0%{opacity:.85; transform: scale(.85); transform-box: fill-box; transform-origin:center}
  70%{opacity:0; transform: scale(1.55); transform-box: fill-box; transform-origin:center}
  100%{opacity:0; transform: scale(1.55)}
}