<section class="hero-verniq">

<style>

body{
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
}

.hero-verniq{
background:#F7F8F8;
padding:75px 0;
position:relative;
overflow:hidden;
font-family:inherit;
}

/* layout */

.hero-inner{
max-width:1200px;
margin:auto;
display:flex;
align-items:center;
justify-content:space-between;
gap:60px;
}

/* text area */

.hero-text-area{
max-width:650px;
}

.hero-title{
font-size:36px;
font-weight:700;
color:#115773;
margin-bottom:18px;
line-height:1.2;
}

.hero-sub{
font-size:18px;
color:#4c5b60;
margin-bottom:30px;
text-align:justify;
}

.hero-btn{
background:#115773;
color:white;
padding:14px 32px;
border-radius:8px;
text-decoration:none;
display:inline-block;
font-weight:600;
}

/* visual area */

.hero-visual{
position:relative;
width:420px;
height:380px;
display:flex;
align-items:center;
justify-content:center;
}

/* orbit */

.hero-orbit{
width:340px;
height:340px;
border-radius:50%;
border:2px dashed rgba(17,87,115,0.25);
position:absolute;
animation:spin 30s linear infinite;
}

/* robot */

.bot-wrapper{
position:relative;
display:flex;
align-items:center;
justify-content:center;
}

.hero-character{
width:230px;
z-index:2;
transition:transform 0.2s ease;
}

/* robot vibration */

.bot-active{
animation:botVibrate 0.25s linear infinite;
}

@keyframes botVibrate{
0%{transform:translate(0px,0px)}
25%{transform:translate(2px,-2px)}
50%{transform:translate(-2px,2px)}
75%{transform:translate(2px,2px)}
100%{transform:translate(-2px,-2px)}
}

/* robot eyes */

.bot-eyes{
position:absolute;
top:38%;
display:flex;
gap:30px;
}

.eye{
width:8px;
height:8px;
background:#0b2f3d;
border-radius:50%;
transition:transform 0.1s;
}

/* orbit words */

.orbit-word{
position:absolute;
background:white;
padding:8px 14px;
border-radius:20px;
font-size:13px;
color:#115773;
box-shadow:0 6px 16px rgba(0,0,0,0.08);
font-weight:600;
transition:all 0.2s ease;
}

.orbit-active{
background:#115773;
color:white;
transform:scale(1.1);
}

.word1{top:-15px;left:140px;}
.word2{bottom:-15px;left:140px;}
.word3{left:-25px;top:150px;}
.word4{right:-25px;top:150px;}
.word5{top:60px;right:-10px;}
.word6{bottom:60px;left:-10px;}

@keyframes spin{
from{transform:rotate(0deg)}
to{transform:rotate(360deg)}
}

/* cursor glow */

.cursor-glow{
position:absolute;
width:200px;
height:200px;
background:radial-gradient(circle,rgba(17,87,115,0.15) 0%,transparent 70%);
pointer-events:none;
transform:translate(-50%,-50%);
}

/* mobile */

@media(max-width:900px){

.hero-inner{
flex-direction:column;
text-align:center;
}

.hero-title{
font-size:30px;
}

.hero-visual{
width:300px;
height:300px;
}

.hero-character{
width:180px;
}

}

</style>


<div class="hero-inner">

<div class="hero-text-area">

<h1 class="hero-title">
Technology-Driven Solutions for Business Compliance
</h1>

<p class="hero-sub">
Verniq Global provides digital platforms and professional solutions that help businesses prepare documentation, manage compliance requirements, and participate effectively in government procurement and tender opportunities through streamlined and technology-driven workflows.
</p>

<a href="/contactus" class="hero-btn">Get Started</a>

</div>


<div class="hero-visual">

<div class="hero-orbit"></div>

<div class="bot-wrapper">

<img src="https://cdn-icons-png.flaticon.com/512/4712/4712035.png" class="hero-character" id="heroBot" loading="lazy" alt="GeM Consutancy">

<div class="bot-eyes">
<div class="eye" id="eye1"></div>
<div class="eye" id="eye2"></div>
</div>

</div>

<div class="orbit-word word1">Automation</div>
<div class="orbit-word word2">Compliance</div>
<div class="orbit-word word3">Documentation</div>
<div class="orbit-word word4">Procurement</div>
<div class="orbit-word word5">Platforms</div>
<div class="orbit-word word6">Efficiency</div>

</div>

</div>


<script>

/* disable right click */

document.addEventListener("contextmenu", function(e){
e.preventDefault();
});

/* disable copy */

document.addEventListener("copy", function(e){
e.preventDefault();
});

/* disable CTRL shortcuts */

document.addEventListener("keydown", function(e){

if(e.ctrlKey &amp;amp;amp;amp;&amp;amp;amp;amp; (e.key === "c" || e.key === "u" || e.key === "s" || e.key === "a")){
e.preventDefault();
}

});

const bot = document.getElementById("heroBot");
const eye1 = document.getElementById("eye1");
const eye2 = document.getElementById("eye2");
const orbitWords = document.querySelectorAll(".orbit-word");

/* glow element */

const glow = document.createElement("div");
glow.classList.add("cursor-glow");
document.querySelector(".hero-verniq").appendChild(glow);

document.addEventListener("mousemove", function(e){

/* parallax robot */

let x = (window.innerWidth/2 - e.pageX)/40;
let y = (window.innerHeight/2 - e.pageY)/40;

bot.style.transform = `translate(${x}px, ${y}px)`;

/* eyes follow cursor */

let eyeX = (e.clientX - window.innerWidth/2)/120;
let eyeY = (e.clientY - window.innerHeight/2)/120;

eye1.style.transform = `translate(${eyeX}px,${eyeY}px)`;
eye2.style.transform = `translate(${eyeX}px,${eyeY}px)`;

/* glow movement */

glow.style.left = e.pageX+"px";
glow.style.top = e.pageY+"px";

/* robot vibration when near */

const rect = bot.getBoundingClientRect();
const botX = rect.left + rect.width/2;
const botY = rect.top + rect.height/2;

const distance = Math.hypot(e.clientX - botX, e.clientY - botY);

if(distance &amp;amp;amp;lt; 120){
bot.classList.add("bot-active");
}else{
bot.classList.remove("bot-active");
}

/* orbit word highlight */

orbitWords.forEach(word=&amp;amp;amp;gt;{

const rect = word.getBoundingClientRect();

const dist = Math.hypot(
e.clientX - (rect.left + rect.width/2),
e.clientY - (rect.top + rect.height/2)
);

if(dist &amp;amp;amp;lt; 120){
word.classList.add("orbit-active");
}else{
word.classList.remove("orbit-active");
}

});

});

</script>

</section>