:root {
  --lime:#d7ff00;
  --blue:#00a8ff;
  --orange:#ff7a00;
  --dark:#030713;
  --dark2:#071126;
  --white:#ffffff;
  --text:#d6e4f5;
  --muted:#9fb2c8;
}

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

html,
body {
  width:100%;
  overflow-x:hidden;
}

body {
  font-family:"Poppins", Arial, sans-serif;
  background:var(--dark);
  color:var(--white);
}

a {
  text-decoration:none;
  color:inherit;
}

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

.container {
  width:min(1380px,92%);
  margin:auto;
}

/* HEADER */

.site-header {
  position:fixed;
  top:0;
  left:0;
  width:100%;
  z-index:1000;
  background:rgba(3,7,19,.92);
  backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(0,168,255,.25);
}

.nav {
  height:105px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
}

.brand img {
  height:76px;
  width:auto;
  object-fit:contain;
  filter:drop-shadow(0 0 16px rgba(215,255,0,.35));
}

.menu {
  display:flex;
  align-items:center;
  gap:30px;
  font-size:14px;
  font-weight:900;
  text-transform:uppercase;
}

.menu a {
  transition:.25s;
}

.menu a:hover,
.menu a.active {
  color:var(--lime);
}

.call-pill {
  background:var(--lime);
  color:#06111f !important;
  padding:16px 24px;
  border-radius:999px;
  box-shadow:0 0 24px rgba(215,255,0,.55);
}

.menu-btn {
  display:none;
  background:none;
  border:none;
  color:#fff;
  font-size:34px;
  cursor:pointer;
}

/* HERO */

.hero {
  min-height:100vh;
  padding-top:130px;
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 72% 44%, rgba(0,168,255,.22), transparent 28%),
    radial-gradient(circle at 92% 82%, rgba(255,122,0,.14), transparent 28%),
    linear-gradient(135deg,#02040b,#071126 58%,#02040b);
}

.hero::before {
  content:"";
  position:absolute;
  inset:0;
  background-image:
    radial-gradient(circle, rgba(0,168,255,.7) 1px, transparent 2px),
    radial-gradient(circle, rgba(215,255,0,.45) 1px, transparent 2px);
  background-size:95px 95px,150px 150px;
  opacity:.23;
  animation:particles 24s linear infinite;
}

.hero::after {
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(120deg, transparent 0 48%, rgba(0,168,255,.1) 49%, transparent 50%),
    linear-gradient(35deg, transparent 0 48%, rgba(0,168,255,.08) 49%, transparent 50%);
  background-size:190px 190px;
  opacity:.22;
  animation:meshMove 30s linear infinite;
}

.hero-grid {
  position:relative;
  z-index:2;
  min-height:calc(100vh - 130px);
  display:grid;
  grid-template-columns:46% 54%;
  align-items:center;
  gap:40px;
}

.hero-copy {
  position:relative;
  z-index:3;
}

.kicker {
  color:var(--lime);
  text-transform:uppercase;
  font-weight:900;
  letter-spacing:4px;
  margin-bottom:20px;
}

.hero h1 {
  font-size:clamp(42px,6vw,88px);
  line-height:.96;
  text-transform:uppercase;
  font-weight:950;
  text-shadow:0 0 22px rgba(0,168,255,.35);
}

.lime {
  color:var(--lime);
}

.blue {
  color:var(--blue);
}

.neon-line {
  width:440px;
  max-width:100%;
  height:4px;
  margin:28px 0;
  background:linear-gradient(90deg,var(--lime),var(--blue));
  box-shadow:0 0 18px var(--blue);
}

.hero p {
  color:var(--text);
  max-width:620px;
  font-size:19px;
  line-height:1.7;
}

.hero-actions {
  display:flex;
  flex-wrap:wrap;
  gap:16px;
  margin-top:35px;
}

.btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:16px 25px;
  border-radius:12px;
  min-height:54px;
  text-transform:uppercase;
  font-weight:900;
  transition:.25s;
  border:2px solid transparent;
  text-align:center;
}

.btn:hover {
  transform:translateY(-4px);
}

.btn.primary {
  background:var(--lime);
  color:#06111f;
  box-shadow:0 0 26px rgba(215,255,0,.5);
}

.btn.outline {
  border-color:var(--blue);
  color:#fff;
  box-shadow:inset 0 0 18px rgba(0,168,255,.28),0 0 18px rgba(0,168,255,.26);
}

/* HERO VISUAL */

.hero-visual {
  position:relative;
  min-height:640px;
}

.centre-logo {
  position:absolute;
  width:300px;
  height:300px;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%) rotate(-4deg);
  background:#111;
  border:14px solid var(--lime);
  border-radius:56px;
  display:grid;
  place-items:center;
  z-index:5;
  box-shadow:
    0 0 28px var(--lime),
    0 0 65px rgba(0,168,255,.55),
    20px 24px 0 rgba(0,0,0,.42);
  animation:floatLogo 5s ease-in-out infinite;
}

.centre-logo img {
  width:86%;
  height:auto;
  object-fit:contain;
}

.orbit-ring {
  position:absolute;
  left:50%;
  top:50%;
  border-radius:50%;
  border:3px solid transparent;
  transform:translate(-50%,-50%);
  pointer-events:none;
}

.ring-one {
  width:390px;
  height:390px;
  border-top-color:var(--blue);
  border-right-color:var(--blue);
  filter:drop-shadow(0 0 14px var(--blue));
  animation:spin 10s linear infinite;
}

.ring-two {
  width:470px;
  height:470px;
  border-left-color:var(--lime);
  border-bottom-color:var(--lime);
  filter:drop-shadow(0 0 16px var(--lime));
  animation:spinReverse 15s linear infinite;
}

.ring-three {
  width:545px;
  height:545px;
  border-top-color:var(--blue);
  border-bottom-color:var(--lime);
  opacity:.45;
  animation:spin 24s linear infinite;
}

.orbit-icon {
  position:absolute;
  width:120px;
  text-align:center;
  z-index:8;
  animation:floatIcon 4.6s ease-in-out infinite;
}

.orbit-icon div {
  width:92px;
  height:92px;
  margin:auto;
  border-radius:50%;
  border:2px solid currentColor;
  display:grid;
  place-items:center;
  font-size:38px;
  background:rgba(0,0,0,.38);
  box-shadow:0 0 24px currentColor;
  backdrop-filter:blur(6px);
}

.orbit-icon span {
  display:block;
  margin-top:10px;
  font-size:12px;
  line-height:1.2;
  text-transform:uppercase;
  font-weight:900;
  color:#fff;
}

.orbit-icon img {
  width:68px;
  height:68px;
  object-fit:contain;
}

.voip {
  left:18%;
  top:7%;
  color:var(--blue);
}

.wifi {
  left:2%;
  top:37%;
  color:var(--blue);
  animation-delay:.7s;
}

.office {
  left:12%;
  bottom:13%;
  color:var(--lime);
  animation-delay:1.2s;
}

.cctv {
  right:5%;
  top:12%;
  color:var(--lime);
  animation-delay:.5s;
}

.cctv img {
  filter:
    drop-shadow(0 0 7px #ffffff)
    drop-shadow(0 0 16px var(--lime));
}

.bio {
  right:0;
  top:43%;
  color:var(--blue);
  animation-delay:1.1s;
}

.telecom {
  right:9%;
  bottom:17%;
  color:var(--orange);
  animation-delay:1.6s;
}

/* ABOUT / INNER HERO */

.about-hero {
  min-height:76vh;
}

.about-grid-main {
  grid-template-columns:52% 48%;
  min-height:calc(76vh - 130px);
}

.about-logo-panel {
  display:grid;
  place-items:center;
  padding:40px;
  border-radius:34px;
  background:rgba(255,255,255,.035);
  border:1px solid rgba(0,168,255,.22);
  box-shadow:0 0 40px rgba(0,168,255,.15);
}

.about-logo-panel img {
  width:min(620px,100%);
  filter:
    drop-shadow(0 0 18px rgba(215,255,0,.32))
    drop-shadow(0 0 24px rgba(0,168,255,.25));
}

/* SECTIONS */

.services-section,
.why-section {
  padding:110px 0;
  background:
    radial-gradient(circle at top left, rgba(0,168,255,.13), transparent 34%),
    linear-gradient(180deg,var(--dark),var(--dark2));
}

.why-section {
  background:#030713;
}

.section-title {
  text-align:center;
  max-width:820px;
  margin:0 auto 55px;
}

.section-title h2 {
  font-size:clamp(34px,5vw,58px);
  text-transform:uppercase;
  margin-bottom:18px;
}

.section-title h2 span {
  color:var(--lime);
}

.section-title p {
  color:var(--text);
  font-size:18px;
  line-height:1.7;
}

.services-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:22px;
}

.service-card {
  min-height:250px;
  padding:30px 24px;
  border-radius:22px;
  background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.025));
  border:1px solid rgba(0,168,255,.28);
  transition:.28s;
  overflow:hidden;
}

.service-card:hover {
  transform:translateY(-8px);
  border-color:var(--lime);
  box-shadow:0 0 34px rgba(0,168,255,.35);
}

.service-icon {
  font-size:44px;
  margin-bottom:18px;
  color:var(--orange);
  text-shadow:0 0 16px var(--orange);
}

.service-icon.image-icon img {
  width:70px;
  height:70px;
  object-fit:contain;
  filter:
    drop-shadow(0 0 7px #ffffff)
    drop-shadow(0 0 16px var(--lime));
}

.service-card h3 {
  font-size:20px;
  text-transform:uppercase;
  margin-bottom:12px;
}

.service-card p {
  color:var(--text);
  line-height:1.6;
}

.why-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:26px;
}

.why-card {
  padding:35px;
  border-radius:24px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 0 24px rgba(0,168,255,.12);
}

.why-card h3 {
  color:var(--lime);
  font-size:24px;
  margin-bottom:14px;
}

.why-card p,
.why-card li {
  color:var(--text);
  line-height:1.7;
}

.cta-section {
  text-align:center;
  padding:95px 0;
  background:
    radial-gradient(circle at center, rgba(215,255,0,.12), transparent 34%),
    #02040b;
}

.cta-section h2 {
  font-size:clamp(34px,5vw,56px);
  text-transform:uppercase;
  margin-bottom:18px;
}

.cta-section p {
  color:var(--text);
  font-size:18px;
  margin-bottom:30px;
}

/* CONTACT */

.contact-form {
  display:grid;
  gap:20px;
  max-width:900px;
  margin:auto;
}

.contact-form input,
.contact-form textarea,
.contact-select {
  width:100%;
  padding:18px 20px;
  border-radius:14px;
  border:1px solid rgba(0,168,255,.3);
  background:rgba(255,255,255,.05);
  color:#fff;
  font-size:16px;
  font-family:"Poppins",sans-serif;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
  color:#9fb2c8;
}

.contact-form input:focus,
.contact-form textarea:focus,
.contact-select:focus {
  outline:none;
  border-color:var(--lime);
  box-shadow:0 0 15px rgba(215,255,0,.25);
}

.contact-select option {
  background:#071126;
  color:#fff;
}

/* SUPPORT TICKET CARD */

.support-ticket-card {
  grid-column:1/-1;
  max-width:700px;
  margin:20px auto 0;
  text-align:center;
  padding:50px;
}

.support-ticket-card .service-icon {
  font-size:60px;
  margin-bottom:20px;
}

.support-ticket-card h3 {
  font-size:32px;
  margin-bottom:20px;
}

.support-ticket-card p {
  font-size:20px;
  line-height:1.8;
}

.support-ticket-card .btn {
  font-size:18px;
  padding:18px 40px;
}

/* FOOTER */

.footer {
  background:#00040c;
  border-top:1px solid rgba(0,168,255,.32);
  padding:55px 0 25px;
}

.footer-grid {
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr;
  gap:35px;
}

.footer-logo {
  max-width:300px;
  margin-bottom:18px;
}

.footer h4 {
  color:var(--lime);
  text-transform:uppercase;
  margin-bottom:14px;
}

.footer p,
.footer a {
  display:block;
  color:var(--muted);
  line-height:1.8;
  margin-bottom:8px;
}

.footer a:hover {
  color:var(--blue);
}

.footer-bottom {
  border-top:1px solid rgba(255,255,255,.08);
  margin-top:35px;
  padding-top:22px;
  color:var(--muted);
  text-align:center;
}

/* WHATSAPP */

.whatsapp {
  position:fixed;
  right:22px;
  bottom:22px;
  z-index:999;
  width:62px;
  height:62px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#25d366;
  color:#fff;
  font-size:30px;
  box-shadow:0 0 25px rgba(37,211,102,.55);
  transition:.25s;
}

.whatsapp:hover {
  transform:translateY(-5px) scale(1.05);
}

/* ANIMATIONS */

@keyframes spin {
  from {
    transform:translate(-50%,-50%) rotate(0deg);
  }

  to {
    transform:translate(-50%,-50%) rotate(360deg);
  }
}

@keyframes spinReverse {
  from {
    transform:translate(-50%,-50%) rotate(0deg);
  }

  to {
    transform:translate(-50%,-50%) rotate(-360deg);
  }
}

@keyframes floatLogo {
  0%,100% {
    transform:translate(-50%,-50%) rotate(-4deg) translateY(0);
  }

  50% {
    transform:translate(-50%,-50%) rotate(2deg) translateY(-18px);
  }
}

@keyframes floatIcon {
  0%,100% {
    transform:translateY(0);
  }

  50% {
    transform:translateY(-14px);
  }
}

@keyframes particles {
  from {
    background-position:0 0,0 0;
  }

  to {
    background-position:180px 180px,-220px 160px;
  }
}

@keyframes meshMove {
  from {
    background-position:0 0;
  }

  to {
    background-position:360px 360px;
  }
}

/* TABLET */

@media(max-width:1100px) {
  .hero-grid,
  .about-grid-main {
    grid-template-columns:1fr;
    padding:60px 0;
  }

  .hero-visual {
    min-height:600px;
  }

  .services-grid {
    grid-template-columns:repeat(2,1fr);
  }

  .why-grid,
  .footer-grid {
    grid-template-columns:1fr;
  }
}

/* MOBILE */

@media(max-width:760px) {
  .container {
    width:100%;
    max-width:100%;
    padding-left:18px;
    padding-right:18px;
  }

  .nav {
    height:82px;
  }

  .brand img {
    height:48px;
    max-width:260px;
  }

  .menu-btn {
    display:block;
  }

  .menu {
    position:fixed;
    top:82px;
    left:0;
    width:100%;
    display:none;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    background:rgba(3,7,19,.98);
    padding:18px 6%;
    border-bottom:1px solid rgba(0,168,255,.25);
  }

  .menu.open {
    display:flex;
  }

  .menu a {
    padding:15px 0;
    border-bottom:1px solid rgba(255,255,255,.08);
  }

  .call-pill {
    text-align:center;
    margin-top:12px;
  }

  .hero {
    min-height:auto;
    padding-top:100px;
    padding-bottom:50px;
  }

  .about-hero {
    min-height:auto;
  }

  .hero-grid,
  .about-grid-main {
    display:block;
    min-height:auto;
    padding:0;
  }

  .hero-copy {
    width:100%;
    max-width:100%;
  }

  .kicker {
    font-size:12px;
    letter-spacing:4px;
    line-height:1.4;
    margin-bottom:16px;
  }

  .hero h1 {
    font-size:36px;
    line-height:1.08;
  }

  .hero p {
    font-size:16px;
    line-height:1.7;
    max-width:100%;
  }

  .neon-line {
    width:100%;
    margin:22px 0;
  }

  .hero-actions {
    display:flex;
    flex-direction:column;
    gap:12px;
    width:100%;
    margin-top:28px;
  }

  .btn {
    width:100%;
    min-height:54px;
    font-size:14px;
    padding:14px 16px;
  }

  .hero-visual {
    display:none;
  }

  .about-logo-panel {
    margin-top:35px;
    padding:24px;
  }

  .services-section,
  .why-section {
    padding:75px 0;
  }

  .section-title {
    margin-bottom:38px;
  }

  .section-title h2 {
    font-size:32px;
  }

  .section-title p {
    font-size:16px;
  }

  .services-grid,
  .why-grid {
    grid-template-columns:1fr;
  }

  .service-card,
  .why-card {
    padding:26px 22px;
  }

  .support-ticket-card {
    max-width:100%;
    padding:30px 20px;
  }

  .support-ticket-card .service-icon {
    font-size:46px;
  }

  .support-ticket-card h3 {
    font-size:24px;
  }

  .support-ticket-card p {
    font-size:16px;
  }

  .support-ticket-card .btn {
    width:100%;
    min-width:0;
    font-size:14px;
  }

  .contact-form input,
  .contact-form textarea,
  .contact-select {
    font-size:15px;
    padding:16px;
  }

  .cta-section {
    padding:75px 0;
  }

  .cta-section h2 {
    font-size:32px;
  }

  .footer {
    padding:45px 0 22px;
  }

  .footer-logo {
    max-width:260px;
  }

  .whatsapp {
    width:54px;
    height:54px;
    right:14px;
    bottom:14px;
    font-size:24px;
  }
}

@media(max-width:480px) {
  .hero h1 {
    font-size:34px;
  }

  .hero p {
    font-size:15px;
  }

  .kicker {
    font-size:11px;
    letter-spacing:3px;
  }

  .brand img {
    height:44px;
    max-width:230px;
  }
}
/* THANK YOU PAGE */

.thank-you-card{
    max-width:850px;
    margin:0 auto;
    text-align:center;
    padding:60px;
    border-radius:30px;
    background:rgba(255,255,255,.05);
    border:1px solid rgba(0,168,255,.25);
    box-shadow:0 0 40px rgba(0,168,255,.18);
}

.success-icon{
    width:120px;
    height:120px;
    margin:0 auto 30px;
    border-radius:50%;
    background:#d7ff00;
    color:#06111f;
    font-size:60px;
    font-weight:900;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 0 30px rgba(215,255,0,.5);
}

.thank-you-card h1{
    font-size:clamp(40px,5vw,72px);
    margin-bottom:20px;
    text-transform:uppercase;
}

.thank-you-card p{
    font-size:20px;
    color:#d6e4f5;
    line-height:1.8;
    margin-bottom:15px;
}

@media(max-width:760px){

    .thank-you-card{
        padding:35px 25px;
    }

    .success-icon{
        width:90px;
        height:90px;
        font-size:42px;
    }

    .thank-you-card p{
        font-size:16px;
    }
}
/* SUBTLE MOVING FIBRE PARTICLES */

.fiber-particles {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}

.fiber-particles span {
  position: absolute;
  width: 260px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(0,168,255,.75),
    rgba(215,255,0,.45),
    transparent
  );
  filter: blur(.3px) drop-shadow(0 0 8px rgba(0,168,255,.65));
  opacity: .28;
  animation: fiberMove 9s linear infinite;
}

.fiber-particles span:nth-child(1) {
  top: 18%;
  left: -280px;
  animation-delay: 0s;
}

.fiber-particles span:nth-child(2) {
  top: 34%;
  left: -320px;
  width: 340px;
  animation-delay: 2s;
  background: linear-gradient(90deg, transparent, rgba(255,122,0,.6), transparent);
}

.fiber-particles span:nth-child(3) {
  top: 58%;
  left: -260px;
  width: 300px;
  animation-delay: 4s;
}

.fiber-particles span:nth-child(4) {
  top: 74%;
  left: -360px;
  width: 420px;
  animation-delay: 1s;
  background: linear-gradient(90deg, transparent, rgba(0,168,255,.65), transparent);
}

.fiber-particles span:nth-child(5) {
  top: 26%;
  right: -320px;
  width: 300px;
  animation-name: fiberMoveReverse;
  animation-delay: 3s;
  background: linear-gradient(90deg, transparent, rgba(215,255,0,.55), transparent);
}

.fiber-particles span:nth-child(6) {
  top: 66%;
  right: -380px;
  width: 380px;
  animation-name: fiberMoveReverse;
  animation-delay: 5s;
  background: linear-gradient(90deg, transparent, rgba(255,122,0,.5), transparent);
}

@keyframes fiberMove {
  from {
    transform: translateX(0) rotate(12deg);
  }

  to {
    transform: translateX(calc(100vw + 620px)) rotate(12deg);
  }
}

@keyframes fiberMoveReverse {
  from {
    transform: translateX(0) rotate(-12deg);
  }

  to {
    transform: translateX(calc(-100vw - 620px)) rotate(-12deg);
  }
}

@media(max-width:760px) {
  .fiber-particles span {
    opacity: .14;
    width: 180px;
  }
}