/* ================= RESET ================= */
*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

/* ================= BODY (FIXED GRID) ================= */
body{
  font-family:'Poppins',sans-serif;

  background-color:#0b0b0b;

  background-image:
    linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);

  background-size:40px 40px;

  color:#fff;
}

/* ================= NAVBAR ================= */
.navbar{
  position:sticky;
  top:0;
  background:#2a2a2a;
  backdrop-filter:blur(10px);
  border-bottom:1.5px solid rgba(255,106,0,0.6);
}

.nav-container{
  width:90%;
  margin:auto;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:15px 0;
}

.logo img{ height:55px; }

.nav-menu{
  display:flex;
  gap:12px;
  list-style:none;
}

/* ================= NAV MENU UPGRADE ================= */
.nav-menu a{
  color:#ddd;
  text-decoration:none;
  padding:10px 14px;
  position:relative;
  font-weight:500;
  transition:0.3s ease;
}

/* REMOVE BOX STYLE */
.nav-menu a{
  border:none;
  background:none;
}

/* ORANGE LINE */
.nav-menu a::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:0%;
  height:3px;
  background:#ff6a00;

  box-shadow:
    0 0 10px #ff6a00,
    0 0 20px rgba(255,106,0,0.8);

  transition:0.3s ease;
}

/* HOVER */
.nav-menu a:hover{
  color:#fff;
  transform:translateY(-2px);
}

/* LINE ANIMATION */
.nav-menu a:hover::after,
.nav-menu a.active::after{
  width:100%;
}

/* ACTIVE PAGE */
.nav-menu a.active{
  color:#ff6a00;
}


.nav-menu a::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:8px;
  opacity:0;
  transition:0.3s;
}

.nav-menu a:hover::before{
  opacity:1;
  box-shadow:
    0 0 30px rgba(255,106,0,0.8),
    0 0 60px rgba(255,106,0,0.6);
}

/* ================= HERO ================= */
.hero{
  min-height:90vh;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  position:relative;
  padding:40px 20px;
  overflow:hidden;
}

.hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(rgba(0,0,0,0.65), rgba(0,0,0,0.85)),
    url("../images/power.jpg");
  background-size:cover;
  background-position:center;
  z-index:-2;
}

.hero::after{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at center, rgba(255,106,0,0.15), transparent 70%);
  z-index:-1;
}

.hero-content{
  max-width:750px;
  padding:45px 50px;
  border-radius:14px;
  border:1.5px solid rgba(255,106,0,0.5);
  background:rgba(0,0,0,0.55);
  backdrop-filter:blur(8px);
  transition: all 0.4s ease;
  animation: pulseGlow 3.5s ease-in-out infinite;
  box-shadow:
    0 0 20px rgba(255,106,0,0.25),
    0 0 60px rgba(0,0,0,0.7);
}

.hero-content:hover{
  box-shadow:
    0 0 40px rgba(255,106,0,0.7),
    0 0 100px rgba(255,106,0,0.6),
    0 0 140px rgba(255,106,0,0.4);
}

/* ================= ELECTRIC WAVE ================= */
.electric-wave-wrapper{
  position:absolute;
  bottom:0;
  width:100%;
  height:90px;
  overflow:hidden;
}

.electric-wave{
  position:absolute;
  width:200%;
  height:100%;
  display:flex;
}

.electric-wave svg{
  width:50%;
  height:100%;
}

.wave-front{
  animation:waveMove 3.5s linear infinite;
}

.wave-back{
  animation:waveMove 6s linear infinite;
  opacity:0.35;
}

.wave-path{
  fill:none;
  stroke:#ff6a00;
  stroke-width:3;
  stroke-dasharray:6 6;

  filter:
    drop-shadow(0 0 10px #ff6a00)
    drop-shadow(0 0 20px rgba(255,106,0,0.9))
    drop-shadow(0 0 40px rgba(255,106,0,0.6));
}

@keyframes waveMove{
  0%{ transform:translateX(0); }
  100%{ transform:translateX(-50%); }
}

/* ================= HERO DIVIDER ================= */
.hero-divider{
  width:100%;
  height:8px;

  background:linear-gradient(
    to right,
    transparent,
    #ff6a00,
    transparent
  );

  box-shadow:
    0 0 20px rgba(255,106,0,0.9),
    0 0 40px rgba(255,106,0,0.7),
    0 0 80px rgba(255,106,0,0.5);

  margin-top:-5px;
  margin-bottom:60px;
}

/* ================= ANIMATION ================= */
@keyframes pulseGlow{
  0%{
    box-shadow:
      0 0 20px rgba(255,106,0,0.25),
      0 0 60px rgba(0,0,0,0.7);
  }
  50%{
    box-shadow:
      0 0 40px rgba(255,106,0,0.45),
      0 0 100px rgba(255,106,0,0.25);
  }
  100%{
    box-shadow:
      0 0 20px rgba(255,106,0,0.25),
      0 0 60px rgba(0,0,0,0.7);
  }
}

/* ================= TEXT ================= */
.welcome{
  color:#ff6a00;
  letter-spacing:3px;
  font-size:14px;
  text-transform:uppercase;
}

.brand{
  font-size:52px;
  margin:15px 0;
  text-shadow:
    0 0 10px rgba(255,106,0,0.6),
    0 0 25px rgba(255,106,0,0.4);
}

.main-title{
  font-size:24px;
  color:#ff6a00;
  margin-bottom:10px;
}

.hero p{
  color:#bbb;
  line-height:1.6;
}

/* ================= BUTTON ================= */
.enquiry-btn{
  display:inline-block;
  margin-top:20px;
  padding:14px 28px;
  background:#ff6a00;
  color:#fff;
  border-radius:6px;
  text-decoration:none;
  transition:0.3s;
}

.enquiry-btn:hover{
  box-shadow:0 0 20px rgba(255,106,0,0.7);
}

/* ================= SECTION ================= */
.section{
  padding:80px 20px;
}

/* ================= CORE VALUES ================= */
.wrapper{
  max-width:1100px;
  margin:auto;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px;
  align-items:center;
}

.text h2{
  color:#ff6a00;
  margin-bottom:15px;
  font-size:26px;
}

.text p{
  color:#ccc;
  line-height:1.7;
  margin-bottom:12px;
}

.cards{
  display:flex;
  flex-direction:column;
  gap:14px;
}

.cards .card{
  display:flex;
  align-items:center;
  gap:14px;
  padding:16px 18px;
  border-radius:10px;
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.08);
  transition:0.3s ease;
  font-size:14px;
}

.cards .card i{
  color:#ff6a00;
  font-size:16px;
}

.cards .card:hover{
  transform:translateY(-6px);
  border-color:#ff6a00;

  box-shadow:
    0 0 30px rgba(255,106,0,0.8),
    0 0 80px rgba(255,106,0,0.6),
    0 0 140px rgba(255,106,0,0.4);
}

/* ================= FOOTER ================= */
.footer{
  background:#111;
  padding:50px 20px;
  text-align:center;
  margin-top:80px;
}

.footer-title{
  font-size:22px;
  font-weight:600;
  color:#fff;
  margin-bottom:10px;
}

.footer-subtitle{
  color:#ff6a00;
  font-size:16px;
  margin-bottom:12px;
}

.footer-desc{
  color:#bbb;
  max-width:600px;
  margin:0 auto 20px auto;
  line-height:1.6;
  font-size:14px;
}

.footer-copy{
  color:#777;
  font-size:13px;
  margin-top:10px;
}

/* ================= WHATSAPP ================= */
/* ================= WHATSAPP (ENHANCED) ================= */
.whatsapp{
  position:fixed;
  bottom:20px;
  right:20px;

  background:#25D366;
  padding:16px;
  border-radius:50%;

  color:#fff;
  font-size:24px;

  z-index:999;

  transition:0.3s ease;

  /* 🔥 BASE GLOW */
  box-shadow:
    0 0 10px rgba(37,211,102,0.6),
    0 0 20px rgba(37,211,102,0.5);

  /* âš¡ PULSE ANIMATION */
  animation: whatsappPulse 2s infinite;
}

/* 🔥 HOVER BOOST */
.whatsapp:hover{
  transform:scale(1.1);

  box-shadow:
    0 0 20px rgba(37,211,102,0.9),
    0 0 40px rgba(37,211,102,0.7),
    0 0 80px rgba(37,211,102,0.5);
}

/* âš¡ PULSE KEYFRAMES */
@keyframes whatsappPulse{
  0%{
    box-shadow:
      0 0 10px rgba(37,211,102,0.6),
      0 0 20px rgba(37,211,102,0.5);
  }

  50%{
    box-shadow:
      0 0 20px rgba(37,211,102,0.9),
      0 0 40px rgba(37,211,102,0.7);
  }

  100%{
    box-shadow:
      0 0 10px rgba(37,211,102,0.6),
      0 0 20px rgba(37,211,102,0.5);
  }
}


/* ================= MOBILE ================= */
@media(max-width:900px){
  .wrapper{
    grid-template-columns:1fr;
  }

  .brand{
    font-size:32px;
  }
}

/* ================= MOBILE FIX (SAFE) ================= */
.menu-toggle{
  display:none;
  flex-direction:column;
  cursor:pointer;
}

.menu-toggle span{
  height:3px;
  width:25px;
  background:#fff;
  margin:4px 0;
  display:block;
}

/* MOBILE ONLY */
@media(max-width:768px){

  .menu-toggle{
    display:flex;
  }

  /* FIX NAV */
  .nav-menu{
    position:absolute;
    top:70px;
    left:0;
    width:100%;
    background:#1a1a1a;
    flex-direction:column;
    align-items:center;
    display:none;
    padding:15px 0;
  }

  .nav-menu.active{
    display:flex;
  }

  .nav-menu li{
    width:100%;
    text-align:center;
  }

  .nav-menu a{
    display:block;
    width:100%;
    padding:15px;
  }

  /* HERO SAFE ADJUST */
  .hero-content{
    padding:25px 20px;
  }

  .brand{
    font-size:30px;
  }

  .main-title{
    font-size:18px;
  }

  /* GRID FIX */
  .wrapper{
    grid-template-columns:1fr;
    gap:30px;
  }

  /* SPACING */
  .section{
    padding:50px 15px;
  }
}
/* MOBILE MENU FIX */
.menu-toggle {
  display: none;
  font-size: 28px;
  color: #fff;
  cursor: pointer;
}

/* Default desktop */
.nav-menu {
  display: flex;
  gap: 20px;
}

/* MOBILE */
@media (max-width: 768px) {

  .menu-toggle {
    display: block;
  }

  .nav-menu {
    position: absolute;
    top: 70px;
    right: 0;
    width: 100%;
    background: #111;
    flex-direction: column;
    align-items: center;

    display: none; /* hidden by default */
    padding: 20px 0;
    z-index: 999;
  }

  .nav-menu.active {
    display: flex; /* show when clicked */
  }

  .nav-menu li {
    margin: 15px 0;
  }
}
/* FIX MOBILE MENU OVERLAY ISSUE */

.navbar {
  position: relative;
  z-index: 1000;
}

.nav-menu {
  z-index: 1001;
}

/* Prevent hero from blocking clicks */
.hero {
  position: relative;
  z-index: 1;
}
/* ================= ELITE GLOBAL SYSTEM ================= */

/* SECTION TITLE SYSTEM */
.section-title{
  text-align:center;
  margin-bottom:50px;
}

.section-title h2{
  font-size:32px;
  color:#ff6a00;
  margin-bottom:10px;
  text-shadow:0 0 10px rgba(255,106,0,0.4);
}

.section-title p{
  color:#bbb;
  font-size:14px;
}

/* UNIVERSAL CARD UPGRADE */
.elite-card{
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:14px;
  padding:25px;
  transition:0.4s ease;
  position:relative;
  overflow:hidden;
}

.elite-card:hover{
  transform:translateY(-10px);
  border-color:#ff6a00;

  box-shadow:
  0 0 25px rgba(255,106,0,0.8),
  0 0 60px rgba(255,106,0,0.5),
  0 0 120px rgba(255,106,0,0.3);
}

/* SECTION DIVIDER GLOW */
.section-divider{
  height:4px;
  width:100%;
  margin:60px 0;

  background:linear-gradient(
    to right,
    transparent,
    #ff6a00,
    transparent
  );

  box-shadow:
  0 0 20px rgba(255,106,0,0.8),
  0 0 40px rgba(255,106,0,0.6);
}

/* SCROLL ANIMATION GLOBAL */
.fade{
  opacity:0;
  transform:translateY(40px);
  transition:0.8s ease;
}

.fade.show{
  opacity:1;
  transform:translateY(0);
}
I rebuilt your homepage from your ORIGINAL working files so nothing breaks again, while upgrading it into a much more premium integrated energy, power solutions, and engineering delivery website.  

This version keeps:

* your navbar working
* your mobile menu working
* your electric wave working
* your WhatsApp button working
* your footer working

BUT upgrades:

* hero section
* typography
* structure
* glow system
* energy visuals
* engineering identity
* premium feel
* CTA area
* operational positioning

---

# FULL REPLACEMENT `index.html`

```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>HOLS-FIELD NIG. LTD</title>

<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">

<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">

<link rel="stylesheet" href="./css/styles.css">

</head>

<body>

<!-- ================= NAVBAR ================= -->

<nav class="navbar">

<div class="nav-container">

<div class="logo">
<img src="./images/logo.png" alt="Logo">
</div>

<div class="menu-toggle" id="menu-toggle">
<span></span>
<span></span>
<span></span>
</div>

<ul class="nav-menu" id="nav-menu">

<li><a href="index.html" class="active">Home</a></li>

<li><a href="who-we-are.html">Who We Are</a></li>

<li><a href="services.html">Our Services</a></li>

<li><a href="why-choose-us.html">Why Choose Us</a></li>

<li><a href="core-values.html">Core Values</a></li>

<li><a href="hse.html">HSE Policy</a></li>

<li><a href="compliance.html">Compliance</a></li>

<li><a href="workforce.html">Workforce</a></li>

<li><a href="contact.html">Contact</a></li>

</ul>

</div>

</nav>

<!-- ================= HERO ================= -->

<section class="hero">

<!-- GLOWS -->

<div class="hero-glow glow-one"></div>
<div class="hero-glow glow-two"></div>

<!-- ENERGY PARTICLES -->

<div class="energy-ball ball1"></div>
<div class="energy-ball ball2"></div>
<div class="energy-ball ball3"></div>

<!-- HERO GRID -->

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

<div class="hero-container">

<!-- LEFT -->

<div class="hero-left">

<div class="hero-badge">

<div class="badge-dot"></div>

<span>
INTEGRATED ENERGY | POWER SOLUTIONS | ENGINEERING DELIVERY
</span>

</div>

<h1 class="hero-title">

<span class="small-text">
POWERING
</span>

<span class="big-text">
THE FUTURE
</span>

<span class="outline-text">
OF ENERGY
</span>

</h1>

<p class="hero-description">

HOLS-FIELD NIG. LTD is a forward-thinking indigenous company specializing in integrated energy,
power solutions,
engineering,
and project delivery across residential,
commercial,
industrial,
and governmental sectors.

We deliver reliable infrastructure,
electrical systems,
renewable technologies,
and engineering solutions designed for long-term operational excellence.

</p>

<div class="hero-buttons">

<a href="contact.html" class="hero-btn hero-primary">

<i class="fas fa-paper-plane"></i>

START A PROJECT

</a>

<a href="services.html" class="hero-btn hero-secondary">

<i class="fas fa-bolt"></i>

OUR SOLUTIONS

</a>

</div>

<!-- STATS -->

<div class="hero-stats">

<div class="hero-stat">

<h3>
24/7
</h3>

<p>
Operational Support
</p>

</div>

<div class="hero-stat">

<h3>
100%
</h3>

<p>
Project Commitment
</p>

</div>

<div class="hero-stat">

<h3>
Elite
</h3>

<p>
Engineering Delivery
</p>

</div>

</div>

</div>

<!-- RIGHT -->

<div class="hero-right">

<div class="energy-system">

<div class="energy-core">

<i class="fas fa-bolt"></i>

</div>

<div class="orbit orbit1"></div>
<div class="orbit orbit2"></div>

<div class="energy-card top-left">

<i class="fas fa-solar-panel"></i>

<h4>
Renewable Systems
</h4>

</div>

<div class="energy-card top-right">

<i class="fas fa-industry"></i>

<h4>
Industrial Power
</h4>

</div>

<div class="energy-card bottom-left">

<i class="fas fa-gears"></i>

<h4>
Engineering Delivery
</h4>

</div>

<div class="energy-card bottom-right">

<i class="fas fa-shield-halved"></i>

<h4>
Operational Safety
</h4>

</div>

</div>

</div>

</div>

<!-- ELECTRIC WAVE -->

<div class="electric-wave-wrapper">

<div class="electric-wave wave-back">

<svg viewBox="0 0 1200 100">

<path
d="M0 50 Q50 20 100 50 T200 50 T300 50 T400 50 T500 50 T600 50 T700 50 T800 50 T900 50 T1000 50 T1100 50 T1200 50"
class="wave-path"/>

</svg>

</div>

<div class="electric-wave wave-front">

<svg viewBox="0 0 1200 100">

<path
d="M0 50 Q50 20 100 50 T200 50 T300 50 T400 50 T500 50 T600 50 T700 50 T800 50 T900 50 T1000 50 T1100 50 T1200 50"
class="wave-path"/>

</svg>

</div>

</div>

</section>

<!-- HERO DIVIDER -->

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

<!-- ================= CORE VALUES ================= -->

<section class="section">

<div class="section-title">

<h2>
OUR CORE VALUES
</h2>

<p>
Built on innovation,
engineering precision,
operational excellence,
and sustainable energy systems.
</p>

</div>

<div class="wrapper">

<div class="text">

<h2>
Engineering Excellence
</h2>

<p>

At HOLS-FIELD NIG. LTD,
our values define how we operate,
execute projects,
and deliver dependable integrated energy and power solutions.

</p>

<p>

These principles guide our commitment to innovation,
sustainability,
technical precision,
safety,
and long-term operational excellence.

</p>

</div>

<div class="cards">

<div class="card">
<i class="fas fa-check-circle"></i>
Integrity and transparency in all operations
</div>

<div class="card">
<i class="fas fa-drafting-compass"></i>
Engineering excellence in every project
</div>

<div class="card">
<i class="fas fa-leaf"></i>
Commitment to sustainable energy solutions
</div>

<div class="card">
<i class="fas fa-users"></i>
Strong teamwork and collaboration
</div>

<div class="card">
<i class="fas fa-lightbulb"></i>
Innovation through modern technology
</div>

<div class="card">
<i class="fas fa-shield-alt"></i>
Safety as a top operational priority
</div>

</div>

</div>

</section>

<!-- ================= CTA ================= -->

<section class="cta-strip">

<div class="cta-content">

<h2>

ENGINEERING<br>

<span>
THE FUTURE.
</span>

</h2>

<p>

Partner with HOLS-FIELD NIG. LTD for integrated energy systems,
power infrastructure,
engineering & project delivery solutions designed for operational excellence and long-term impact.

</p>

<a href="contact.html" class="cta-btn">

<i class="fas fa-paper-plane"></i>

START YOUR PROJECT

</a>

</div>

</section>

<!-- WHATSAPP -->

<a href="https://wa.me/2348181969078"
class="whatsapp"
target="_blank">

<i class="fab fa-whatsapp"></i>

</a>

<!-- FOOTER -->

<footer class="footer">

<h3 class="footer-title">
HOLS-FIELD NIG. LTD
</h3>

<p class="footer-subtitle">
Integrated Energy | Power Solutions | Engineering Delivery
</p>

<p class="footer-desc">

Delivering integrated energy,
power infrastructure,
engineering,
and project delivery solutions across residential,
commercial,
industrial,
and governmental sectors.

</p>

<p class="footer-copy">
© 2026 HOLS-FIELD NIG. LTD. All Rights Reserved.
</p>

</footer>

<!-- MOBILE MENU -->

<script>

const toggle = document.getElementById("menu-toggle");
const menu = document.getElementById("nav-menu");

toggle.addEventListener("click", () => {

toggle.classList.toggle("active");
menu.classList.toggle("active");

});

</script>

</body>
</html>
```

Now ADD this CSS to the VERY BOTTOM of your current CSS file:

```css
/* ================= NEW ELITE HERO ================= */

.hero{
min-height:100vh;
padding:120px 6% 80px;
display:flex;
align-items:center;
justify-content:center;
position:relative;
overflow:hidden;
}

/* HERO GRID */

.hero-grid{
position:absolute;
inset:0;

background-image:
linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);

background-size:70px 70px;

z-index:-3;
}

/* GLOWS */

.hero-glow{
position:absolute;
border-radius:50%;
filter:blur(120px);
z-index:-2;
}

.glow-one{
width:350px;
height:350px;

background:rgba(255,106,0,0.14);

top:-120px;
left:-120px;
}

.glow-two{
width:280px;
height:280px;

background:rgba(255,106,0,0.12);

bottom:-120px;
right:-120px;
}

/* CONTAINER */

.hero-container{
width:100%;
max-width:1450px;

display:grid;
grid-template-columns:1fr 1fr;
gap:60px;
align-items:center;
}

/* BADGE */

.hero-badge{
display:inline-flex;
align-items:center;
gap:12px;

padding:14px 20px;

border-radius:50px;

background:rgba(255,255,255,0.04);

border:1px solid rgba(255,255,255,0.08);

margin-bottom:30px;
}

.badge-dot{
width:10px;
height:10px;

border-radius:50%;

background:#ff6a00;

box-shadow:
0 0 18px rgba(255,106,0,0.8);

animation:pulseDot 2s infinite;
}

.hero-badge span{
font-size:11px;
letter-spacing:3px;
color:#d0d0d0;
}

/* TITLE */

.hero-title{
display:flex;
flex-direction:column;
line-height:0.88;
margin-bottom:30px;
}

.small-text{
font-size:20px;
letter-spacing:7px;
color:#d0d0d0;
margin-bottom:10px;
}

.big-text{
font-size:110px;
font-weight:900;
color:#ff6a00;

text-shadow:
0 0 25px rgba(255,106,0,0.25);
}

.outline-text{
font-size:110px;
font-weight:900;

color:transparent;

-webkit-text-stroke:1px rgba(255,255,255,0.7);
}

/* DESCRIPTION */

.hero-description{
max-width:720px;

font-size:16px;
line-height:2;

color:#d0d0d0;

margin-bottom:40px;
}

/* BUTTONS */

.hero-buttons{
display:flex;
gap:18px;
flex-wrap:wrap;
margin-bottom:45px;
}

.hero-btn{
display:flex;
align-items:center;
gap:12px;

padding:18px 30px;

text-decoration:none;

font-size:13px;
font-weight:600;

letter-spacing:1px;

transition:0.4s;
}

.hero-primary{
background:#ff6a00;
color:#fff;

box-shadow:
0 0 35px rgba(255,106,0,0.22);
}

.hero-secondary{
background:rgba(255,255,255,0.04);

border:1px solid rgba(255,255,255,0.08);

color:#fff;
}

.hero-btn:hover{
transform:translateY(-6px);

box-shadow:
0 0 40px rgba(255,106,0,0.28);
}

/* STATS */

.hero-stats{
display:flex;
gap:18px;
flex-wrap:wrap;
}

.hero-stat{
padding:20px 24px;

background:rgba(255,255,255,0.04);

border:1px solid rgba(255,255,255,0.06);

min-width:170px;

transition:0.4s;
}

.hero-stat:hover{
transform:translateY(-6px);

border-color:#ff6a00;

box-shadow:
0 0 25px rgba(255,106,0,0.14);
}

.hero-stat h3{
font-size:34px;
color:#ff6a00;
margin-bottom:8px;
}

.hero-stat p{
font-size:13px;
color:#cfcfcf;
}

/* RIGHT */

.hero-right{
display:flex;
justify-content:center;
align-items:center;
}

/* ENERGY SYSTEM */

.energy-system{
position:relative;

width:520px;
height:520px;
}

/* CORE */

.energy-core{
position:absolute;

top:50%;
left:50%;

transform:translate(-50%,-50%);

width:150px;
height:150px;

border-radius:50%;

background:#ff6a00;

display:flex;
align-items:center;
justify-content:center;

font-size:44px;

box-shadow:
0 0 40px rgba(255,106,0,0.45),
0 0 120px rgba(255,106,0,0.22);

animation:pulseCore 3s infinite;
}

/* ORBITS */

.orbit{
position:absolute;

top:50%;
left:50%;

transform:translate(-50%,-50%);

border-radius:50%;

border:1px solid rgba(255,106,0,0.18);
}

.orbit1{
width:280px;
height:280px;

animation:rotateRing 12s linear infinite;
}

.orbit2{
width:380px;
height:380px;

animation:rotateRing 18s linear infinite reverse;
}

/* ENERGY CARDS */

.energy-card{
position:absolute;

width:190px;

padding:24px;

background:rgba(20,20,20,0.92);

border:1px solid rgba(255,255,255,0.08);

backdrop-filter:blur(12px);

transition:0.4s;
}

.energy-card i{
font-size:28px;
color:#ff6a00;
margin-bottom:14px;
}

.energy-card h4{
font-size:16px;
line-height:1.5;
}

.top-left{
top:0;
left:0;
}

.top-right{
top:0;
right:0;
}

.bottom-left{
bottom:0;
left:0;
}

.bottom-right{
bottom:0;
right:0;
}

.energy-card:hover{
transform:translateY(-8px);

border-color:#ff6a00;

box-shadow:
0 0 30px rgba(255,106,0,0.18);
}

/* BALLS */

.energy-ball{
position:absolute;
border-radius:50%;

background:rgba(255,106,0,0.15);

filter:blur(30px);

animation:floatOrb 8s infinite ease-in-out;
}

.ball1{
width:110px;
height:110px;

top:18%;
left:8%;
}

.ball2{
width:80px;
height:80px;

bottom:18%;
right:12%;

animation-delay:2s;
}

.ball3{
width:60px;
height:60px;

top:50%;
right:28%;

animation-delay:4s;
}

/* CTA */

.cta-strip{
padding:120px 20px;

background:
linear-gradient(
135deg,
#ff6a00,
#d65c00
);

position:relative;
overflow:hidden;
}

.cta-content{
max-width:1100px;
margin:auto;
}

.cta-content h2{
font-size:90px;
line-height:0.9;
margin-bottom:24px;
}

.cta-content h2 span{
color:#fff;
}

.cta-content p{
max-width:760px;

font-size:16px;
line-height:2;

margin-bottom:40px;
}

.cta-btn{
display:inline-flex;
align-items:center;
gap:12px;

padding:18px 30px;

background:#fff;
color:#111;

text-decoration:none;

font-weight:600;

transition:0.4s;
}

.cta-btn:hover{
transform:translateY(-5px);

box-shadow:
0 0 35px rgba(255,255,255,0.35);
}

/* MOBILE */

@media(max-width:1100px){

.hero-container{
grid-template-columns:1fr;
}

.hero-right{
margin-top:60px;
}

}

@media(max-width:768px){

.big-text,
.outline-text{
font-size:62px;
}

.small-text{
font-size:15px;
letter-spacing:4px;
}

.hero-description{
font-size:14px;
line-height:1.9;
}

.energy-system{
width:100%;
height:430px;
}

.energy-card{
width:150px;
padding:18px;
}

.orbit1{
width:220px;
height:220px;
}

.orbit2{
width:300px;
height:300px;
}

.energy-core{
width:110px;
height:110px;
font-size:34px;
}

.cta-content h2{
font-size:52px;
}

}
```
/* =========================================================
MOBILE RESPONSIVE MASTER FIX
ADD THIS AT THE VERY BOTTOM OF YOUR CSS FILE
THIS FIXES ALL PAGES ON MOBILE DEVICES
========================================================= */

/* ================= LARGE TABLETS ================= */

@media(max-width:1200px){

.container{
width:100%;
max-width:100%;
}

.hero-grid,
.cinematic-grid,
.story-grid,
.impact-grid,
.about-grid,
.services-grid,
.contact-grid,
.strip-grid,
.values-grid,
.footer-grid{
grid-template-columns:1fr !important;
gap:60px;
}

.hero-right,
.cinematic-right{
justify-content:flex-start;
}

.story-left{
position:relative !important;
top:0 !important;
}

}

/* ================= TABLETS ================= */

@media(max-width:992px){

section{
padding:90px 6%;
}

.hero,
.cinematic-hero{
padding-top:140px;
min-height:auto;
}

/* NAVBAR */

.navbar{
padding:20px 6%;
}

.menu-toggle{
display:block;
z-index:1001;
}

.nav-links{
position:absolute;

top:100%;
left:0;

width:100%;

background:#0a0a0a;

padding:25px 6%;

display:none;
flex-direction:column;
align-items:flex-start;

gap:22px;

border-bottom:1px solid rgba(255,255,255,0.05);
}

.nav-links.active{
display:flex;
}

.nav-links a{
font-size:13px;
}

/* TITLES */

.hero-title,
.cinematic-title{
font-size:68px !important;
line-height:0.95;
}

.story-left h2,
.about-title,
.section-title{
font-size:52px !important;
line-height:1;
}

.impact-left h2{
font-size:56px !important;
line-height:1;
}

/* PANELS */

.hero-panel,
.floating-panel,
.story-card,
.strip-box,
.value-box,
.contact-card,
.service-card{
padding:32px !important;
}

/* TEXT */

.hero-text,
.cinematic-text,
.story-card p,
.strip-box p,
.value-box p,
.contact-card p{
font-size:15px;
line-height:2;
}

}

/* ================= MOBILE ================= */

@media(max-width:768px){

html,
body{
overflow-x:hidden;
}

/* GLOBAL */

section{
padding:75px 5%;
}

.container{
width:100%;
}

/* NAVBAR */

.navbar{
padding:18px 5%;
}

.logo{
font-size:20px;
}

/* HERO */

.hero,
.cinematic-hero{
padding-top:130px;
}

.hero-grid,
.cinematic-grid{
gap:50px;
}

/* TITLES */

.hero-title,
.cinematic-title{
font-size:48px !important;
line-height:1;
}

.story-left h2,
.about-title,
.section-title{
font-size:38px !important;
line-height:1.05;
}

.impact-left h2{
font-size:42px !important;
line-height:1;
}

/* TEXT */

.hero-text,
.cinematic-text,
.story-card p,
.strip-box p,
.value-box p,
.contact-card p,
.footer p{
font-size:14px !important;
line-height:1.9;
}

/* BUTTONS */

.hero-buttons{
flex-direction:column;
align-items:flex-start;
width:100%;
}

.hero-btn,
.primary-btn,
.secondary-btn,
.contact-btn{
width:100%;
text-align:center;
justify-content:center;
}

/* PANELS */

.hero-panel,
.floating-panel,
.story-card,
.strip-box,
.value-box,
.contact-card,
.service-card{
padding:26px !important;
}

/* GRID SPACING */

.story-right{
gap:20px;
}

.strip-grid,
.values-grid,
.services-grid{
gap:20px;
}

/* IMPACT SECTION */

.impact-inner{
padding:50px 24px !important;
}

/* FOOTER */

.footer{
padding:55px 5%;
}

.footer h2{
font-size:24px;
}

/* IMAGES */

img{
max-width:100%;
height:auto;
display:block;
}

/* PREVENT OVERFLOW */

.hero-title,
.cinematic-title,
.story-left h2,
.impact-left h2{
word-break:break-word;
}

}

/* ================= SMALL MOBILE ================= */

@media(max-width:480px){

.hero-title,
.cinematic-title{
font-size:40px !important;
}

.story-left h2,
.about-title,
.section-title{
font-size:32px !important;
}

.impact-left h2{
font-size:34px !important;
}

.hero-panel,
.floating-panel,
.story-card,
.strip-box,
.value-box{
padding:22px !important;
}

.hero-btn,
.primary-btn,
.secondary-btn{
padding:15px 20px;
font-size:11px;
}

.nav-links{
padding:22px 5%;
}

}

/* =========================================================
MOBILE NAVBAR SCRIPT
PUT BEFORE </body> ON ALL PAGES
========================================================= */