:root{

  --orange:#ff7a00;
  --orange2:#ff941f;

  --blue:#062b57;
  --blue2:#0a3d73;
  --dark:#041f3e;

  --text:#082b52;
  --muted:#64748b;

  --white:#ffffff;
  --light:#f5f8fc;

  --border:#e4ebf3;

  --shadow:0 14px 40px rgba(6,43,87,.10);

  --radius:20px;

}


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


html{
  scroll-behavior:smooth;
  scroll-padding-top:85px;
}


body{

  font-family:
    Inter,
    Arial,
    Helvetica,
    sans-serif;

  color:var(--text);

  background:#fff;

  line-height:1.55;

  overflow-x:hidden;

}


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


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


button{
  font-family:inherit;
}


.container{

  width:min(1180px,92%);

  margin:auto;

}


/* ================= HEADER ================= */

.site-header{

  position:sticky;

  top:0;

  z-index:1000;

  background:rgba(255,255,255,.97);

  backdrop-filter:blur(14px);

  border-bottom:1px solid #e9eef5;

}


.nav-wrap{

  min-height:82px;

  display:flex;

  align-items:center;

  gap:28px;

}


.brand{

  display:flex;

  align-items:center;

  flex-shrink:0;

}


.brand img{

  width:110px;

  height:58px;

  object-fit:contain;

}


.nav{

  display:flex;

  align-items:center;

  gap:30px;

  margin-left:auto;

}


.nav a{

  font-weight:800;

  font-size:15px;

  padding:30px 0;

  position:relative;

  transition:.2s ease;

}


.nav a:hover,
.nav a.active{

  color:var(--orange);

}


.nav a.active:after{

  content:"";

  position:absolute;

  bottom:18px;

  left:0;

  width:100%;

  height:3px;

  border-radius:10px;

  background:var(--orange);

}


.top-wa{

  background:var(--orange);

  color:#fff;

  padding:13px 20px;

  border-radius:999px;

  font-weight:900;

  white-space:nowrap;

  transition:.25s ease;

}


.top-wa:hover{

  transform:translateY(-2px);

  box-shadow:
    0 12px 28px rgba(255,122,0,.28);

}


.menu-toggle{

  display:none;

  border:0;

  background:transparent;

  width:44px;

  height:44px;

  cursor:pointer;

  padding:8px;

}


.menu-toggle span{

  display:block;

  height:3px;

  width:26px;

  background:var(--blue);

  margin:5px auto;

  border-radius:10px;

  transition:.25s ease;

}


/* ================= HERO ================= */

.hero{

  background:
    radial-gradient(
      circle at 75% 40%,
      rgba(255,122,0,.14),
      transparent 32%
    ),
    linear-gradient(
      120deg,
      #061f3f 0%,
      #082f5f 58%,
      #061f3f 100%
    );

  color:#fff;

  overflow:hidden;

}


.hero-grid{

  min-height:500px;

  display:grid;

  grid-template-columns:1.05fr .95fr;

  align-items:center;

  gap:30px;

}


.hero-copy{

  padding:45px 0;

}


.eyebrow{

  font-size:13px;

  letter-spacing:2px;

  font-weight:900;

  color:var(--orange);

  margin-bottom:10px;

}


.eyebrow.dark{

  color:var(--blue);

}


.hero h1{

  font-size:
    clamp(40px,5vw,67px);

  line-height:1.01;

  letter-spacing:-2px;

  margin-bottom:20px;

}


.hero h1 span{

  display:block;

  color:var(--orange);

}


.hero h2{

  font-size:22px;

  margin-bottom:14px;

}


.hero-description{

  max-width:650px;

  color:#d4e3f3;

  font-size:16px;

}


.hero-products{

  display:flex;

  flex-wrap:wrap;

  gap:7px;

  align-items:center;

  color:#fff;

  margin-top:18px;

  font-weight:700;

  font-size:14px;

}


.hero-products b{

  color:var(--orange);

}


.hero-actions{

  display:flex;

  gap:13px;

  flex-wrap:wrap;

  margin-top:27px;

}


.btn{

  display:inline-flex;

  align-items:center;

  justify-content:center;

  gap:9px;

  min-height:49px;

  padding:13px 22px;

  border-radius:999px;

  font-weight:900;

  border:2px solid transparent;

  transition:.25s ease;

  cursor:pointer;

}


.btn-orange{

  background:var(--orange);

  color:#fff;

}


.btn-orange:hover{

  transform:translateY(-2px);

  box-shadow:
    0 14px 30px rgba(255,122,0,.30);

}


.btn-outline{

  color:#fff;

  border-color:#fff;

}


.btn-outline:hover{

  background:#fff;

  color:var(--blue);

}


.hero-visual{

  min-height:460px;

  position:relative;

  display:flex;

  justify-content:center;

  align-items:center;

}


.hero-glow{

  position:absolute;

  width:360px;

  height:360px;

  border-radius:50%;

  background:rgba(255,122,0,.13);

  filter:blur(30px);

}


.hero-product-image{

  position:relative;

  z-index:3;

  width:min(480px,100%);

  max-height:410px;

  object-fit:contain;

  filter:
    drop-shadow(
      0 25px 35px rgba(0,0,0,.38)
    );

  animation:
    productFloat 5s ease-in-out infinite;

}


@keyframes productFloat{

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

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

}


.product-orbit{

  position:absolute;

  border:1px solid rgba(255,255,255,.10);

  border-radius:50%;

}


.orbit-one{

  width:420px;
  height:420px;

}


.orbit-two{

  width:300px;
  height:300px;

}


.mini-card{

  position:absolute;

  right:3%;

  top:17%;

  z-index:5;

  display:flex;

  flex-direction:column;

  line-height:1.05;

  transform:rotate(-5deg);

  font-family:Georgia,serif;

  font-style:italic;

}


.mini-card strong{

  font-size:22px;

  font-weight:500;

}


.mini-card span{

  color:var(--orange);

  font-size:20px;

}


/* ================= STATS ================= */

.stats{

  display:grid;

  grid-template-columns:
    repeat(4,1fr);

  border-top:
    1px solid rgba(255,255,255,.15);

}


.stat-item{

  min-height:90px;

  display:flex;

  align-items:center;

  justify-content:center;

  flex-direction:column;

  text-align:center;

  padding:10px;

  border-right:
    1px solid rgba(255,255,255,.15);

}


.stat-item:last-child{

  border-right:0;

}


.stat-item strong{

  color:var(--orange);

  font-size:23px;

  line-height:1.1;

}


.stat-item span{

  color:#e0ebf8;

  font-size:12px;

  font-weight:700;

}


/* ================= QUICK ================= */

.quick-section{

  background:#f7faff;

  border-bottom:1px solid var(--border);

}


.quick-grid{

  display:grid;

  grid-template-columns:
    repeat(4,1fr);

  gap:15px;

  padding:25px 0;

}


.quick-card{

  background:#fff;

  border:1px solid var(--border);

  border-radius:16px;

  padding:17px;

  display:flex;

  align-items:center;

  gap:12px;

  box-shadow:0 7px 22px rgba(6,43,87,.05);

}


.quick-icon{

  width:43px;

  height:43px;

  flex-shrink:0;

  display:grid;

  place-items:center;

  border-radius:50%;

  background:#fff1e5;

  color:var(--orange);

  font-size:20px;

}


.quick-card strong{

  display:block;

  font-size:14px;

}


.quick-card span{

  display:block;

  color:var(--muted);

  font-size:11px;

}


/* ================= GENERAL SECTIONS ================= */

.section{

  padding:78px 0;

}


.section-heading{

  display:flex;

  align-items:flex-end;

  justify-content:space-between;

  gap:25px;

  margin-bottom:30px;

}


.section-heading h2,
.network-copy h2,
.center-heading h2,
.electrical-heading h2{

  font-size:40px;

  line-height:1.06;

  letter-spacing:-1px;

}


.section-heading h2 span,
.network-copy h2 span,
.center-heading h2 span,
.electrical-heading h2 span{

  color:var(--orange);

}


.quality-note{

  color:var(--muted);

  font-size:13px;

  font-weight:800;

  white-space:nowrap;

}


/* ================= PRODUCTS ================= */

.products-section{

  background:#fff;

}


.product-grid{

  display:grid;

  grid-template-columns:
    repeat(3,1fr);

  gap:20px;

}


.product-card{

  background:#fff;

  border:1px solid var(--border);

  border-radius:var(--radius);

  overflow:hidden;

  box-shadow:var(--shadow);

  transition:.28s ease;

}


.product-card:hover{

  transform:translateY(-6px);

  box-shadow:
    0 20px 45px rgba(6,43,87,.14);

}


.product-image{

  height:235px;

  background:
    linear-gradient(
      135deg,
      #f1f5fa,
      #ffffff
    );

  display:flex;

  align-items:center;

  justify-content:center;

  overflow:hidden;

}


.product-image img{

  width:100%;

  height:100%;

  object-fit:contain;

  transition:.35s ease;

}


.product-card:hover
.product-image img{

  transform:scale(1.04);

}


.product-content{

  padding:18px 18px 20px;

  position:relative;

}


.product-number{

  position:absolute;

  right:18px;

  top:17px;

  color:#b9c6d5;

  font-size:12px;

  font-weight:900;

}


.product-card h3{

  font-size:19px;

  margin-bottom:6px;

}


.product-card p{

  color:var(--muted);

  font-size:13px;

}


.more-card{

  display:flex;

  flex-direction:column;

  justify-content:center;

}


.more-card .product-content{

  padding-top:5px;

}


.more-icon{

  width:76px;

  height:76px;

  margin:35px 18px 0;

  display:grid;

  place-items:center;

  border-radius:50%;

  background:var(--blue);

  color:var(--orange);

  font-size:23px;

  font-weight:900;

}


/* ================= ELECTRICAL ================= */

.electrical-section{

  margin-top:55px;

  padding:35px;

  border-radius:24px;

  background:#f6f9fd;

  border:1px solid var(--border);

  display:grid;

  grid-template-columns:.9fr 1.1fr;

  gap:35px;

  align-items:center;

}


.electrical-heading h2{

  font-size:31px;

  margin-bottom:12px;

}


.electrical-heading>p:last-child{

  color:var(--muted);

  font-size:14px;

}


.electrical-tags{

  display:flex;

  flex-wrap:wrap;

  gap:10px;

}


.electrical-tags span{

  padding:11px 15px;

  background:#fff;

  border:1px solid #dfe7f0;

  border-radius:999px;

  font-size:13px;

  font-weight:800;

  color:var(--blue);

}


/* ================= WHY ================= */

.why-section{

  background:
    linear-gradient(
      120deg,
      #062b57,
      #082f5f
    );

  color:#fff;

}


.why-title{

  margin-bottom:35px;

}


.why-title h2{

  font-size:42px;

  line-height:1.05;

}


.why-title h2 span{

  color:var(--orange);

}


.why-intro{

  max-width:650px;

  color:#cbd9e9;

  margin-top:15px;

}


.why-grid{

  display:grid;

  grid-template-columns:
    repeat(4,1fr);

  gap:20px;

}


.why-item{

  padding:7px 20px 18px;

  border-left:
    1px solid rgba(255,255,255,.20);

}


.icon{

  width:50px;

  height:50px;

  display:grid;

  place-items:center;

  border-radius:50%;

  background:var(--orange);

  color:var(--blue);

  font-size:21px;

  margin-bottom:14px;

}


.why-item h3{

  font-size:17px;

  margin-bottom:8px;

}


.why-item p{

  color:#c7d6e7;

  font-size:13px;

}


/* ================= INDUSTRIES ================= */

.industries-section{

  background:#f7faff;

}


.center-heading{

  text-align:center;

  max-width:700px;

  margin:0 auto 35px;

}


.center-heading h2{

  margin-bottom:12px;

}


.center-heading>p:last-child{

  color:var(--muted);

  font-size:14px;

}


.industries-grid{

  display:grid;

  grid-template-columns:
    repeat(3,1fr);

  gap:18px;

}


.industry-card{

  background:#fff;

  padding:25px;

  border-radius:18px;

  border:1px solid var(--border);

  box-shadow:0 8px 25px rgba(6,43,87,.05);

  transition:.25s ease;

}


.industry-card:hover{

  transform:translateY(-5px);

}


.industry-icon{

  font-size:30px;

  margin-bottom:12px;

}


.industry-card h3{

  font-size:18px;

  margin-bottom:5px;

}


.industry-card p{

  color:var(--muted);

  font-size:13px;

}


/* ================= NETWORK ================= */

.network-section{

  background:#fff;

}


.network-grid{

  display:grid;

  grid-template-columns:
    1.05fr .95fr;

  gap:55px;

  align-items:center;

}


.network-description{

  color:var(--muted);

  margin:15px 0 22px;

}


.locations{

  display:flex;

  flex-wrap:wrap;

  gap:9px;

  margin-bottom:23px;

}


.location{

  background:#f2f6fa;

  border:1px solid #e2eaf2;

  padding:9px 14px;

  border-radius:999px;

  font-size:13px;

  font-weight:800;

}


.location span{

  color:var(--orange);

}


.main-office{

  display:flex;

  gap:13px;

  padding:17px;

  margin-bottom:23px;

  border-radius:15px;

  background:#f6f9fc;

  border:1px solid var(--border);

}


.office-icon{

  font-size:23px;

}


.main-office strong{

  display:block;

  margin-bottom:3px;

}


.main-office p{

  color:var(--muted);

  font-size:13px;

}


.network-image{

  min-height:360px;

  position:relative;

  padding:30px;

  border-radius:28px;

  background:
    linear-gradient(
      135deg,
      #eaf2fb,
      #ffffff
    );

  display:flex;

  align-items:center;

  justify-content:center;

  overflow:hidden;

}


.network-image img{

  width:100%;

  height:300px;

  object-fit:contain;

  border-radius:18px;

}


.network-badge{

  position:absolute;

  top:22px;

  right:22px;

  z-index:3;

  background:var(--blue);

  color:#fff;

  padding:12px 15px;

  border-radius:12px;

  display:flex;

  flex-direction:column;

  line-height:1.1;

}


.network-badge strong{

  color:var(--orange);

}


.network-badge span{

  font-size:10px;

}


/* ================= DELIVERY ================= */

.delivery-section{

  background:
    linear-gradient(
      120deg,
      var(--orange),
      #ff8d1a
    );

  color:#fff;

  padding:48px 0;

}


.delivery-grid{

  display:grid;

  grid-template-columns:
    1.3fr .7fr;

  gap:30px;

  align-items:center;

}


.delivery-section .eyebrow{

  color:#fff;

}


.delivery-section h2{

  font-size:34px;

  line-height:1.05;

  margin-bottom:10px;

}


.delivery-section h2 span{

  color:var(--blue);

}


.delivery-section p:not(.eyebrow){

  max-width:650px;

  font-size:14px;

}


.delivery-stats{

  display:grid;

  grid-template-columns:1fr 1fr;

  gap:12px;

}


.delivery-stats div{

  background:rgba(255,255,255,.16);

  border:1px solid rgba(255,255,255,.28);

  padding:20px;

  border-radius:17px;

}


.delivery-stats strong{

  display:block;

  font-size:24px;

}


.delivery-stats span{

  font-size:11px;

}


/* ================= SUPPORT ================= */

.support{

  background:
    linear-gradient(
      110deg,
      var(--orange) 0%,
      var(--orange) 53%,
      var(--blue) 53%,
      var(--blue) 100%
    );

  color:#fff;

  padding:50px 0;

}


.support-grid{

  display:grid;

  grid-template-columns:
    1.25fr .85fr .7fr 1fr;

  gap:25px;

  align-items:center;

}


.support h2{

  font-size:35px;

  line-height:1.05;

}


.support h2 span{

  color:var(--blue);

}


.support-intro>p:last-child{

  max-width:420px;

  margin-top:12px;

}


.support-contact{

  display:flex;

  flex-direction:column;

  gap:4px;

}


.support-contact h3,
.email-social h3{

  font-size:14px;

  margin-bottom:5px;

}


.support-contact a{

  font-size:19px;

  font-weight:900;

}


.support-actions{

  display:flex;

  flex-direction:column;

  gap:10px;

}


.btn-white{

  background:#fff;

  color:#087c46;

}


.btn-dark{

  background:var(--blue);

  color:#fff;

}


.email-social{

  padding-left:18px;

}


.email-social a{

  font-size:13px;

  font-weight:800;

  word-break:break-word;

}


.email-social p{

  font-size:12px;

  line-height:1.5;

}


/* ================= FOOTER ================= */

.footer{

  background:#041f3e;

  color:#d7e4f3;

  padding:25px 0;

}


.footer-grid{

  display:grid;

  grid-template-columns:
    1.2fr 1fr 1fr 1fr;

  gap:18px;

  align-items:center;

  font-size:12px;

}


.footer-brand{

  display:flex;

  align-items:center;

  gap:10px;

  color:var(--orange);

}


.footer-brand img{

  width:43px;

  height:38px;

  object-fit:contain;

  background:#fff;

  border-radius:8px;

}


/* ================= FLOATING WHATSAPP ================= */

.floating-wa{

  position:fixed;

  right:20px;

  bottom:20px;

  z-index:900;

  width:58px;

  height:58px;

  border-radius:50%;

  background:#20c767;

  color:#fff;

  display:grid;

  place-items:center;

  font-size:28px;

  box-shadow:
    0 10px 30px rgba(0,0,0,.25);

  transition:.25s ease;

}


.floating-wa:hover{

  transform:scale(1.08);

}


/* ================= BACK TOP ================= */

.back-top{

  position:fixed;

  right:20px;

  bottom:90px;

  z-index:899;

  width:42px;

  height:42px;

  border:0;

  border-radius:50%;

  background:var(--blue);

  color:#fff;

  font-size:20px;

  cursor:pointer;

  opacity:0;

  visibility:hidden;

  transition:.25s ease;

}


.back-top.show{

  opacity:1;

  visibility:visible;

}


/* ================= ANIMATION ================= */

.reveal{

  opacity:0;

  transform:translateY(20px);

  transition:
    opacity .6s ease,
    transform .6s ease;

}


.reveal.visible{

  opacity:1;

  transform:translateY(0);

}


/* ================= TABLET ================= */

@media(max-width:1050px){

  .nav{

    gap:20px;

  }


  .quick-grid{

    grid-template-columns:
      repeat(2,1fr);

  }


  .product-grid{

    grid-template-columns:
      repeat(2,1fr);

  }


  .why-grid{

    grid-template-columns:
      repeat(2,1fr);

  }


  .support-grid{

    grid-template-columns:
      1fr 1fr;

  }


  .email-social{

    padding-left:0;

  }


  .footer-grid{

    grid-template-columns:
      repeat(2,1fr);

  }

}


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

@media(max-width:800px){

  .container{

    width:91%;

  }


  .nav-wrap{

    min-height:70px;

  }


  .brand img{

    width:100px;

    height:52px;

  }


  .top-wa{

    display:none;

  }


  .menu-toggle{

    display:block;

    margin-left:auto;

  }


  .nav{

    position:absolute;

    top:70px;

    left:0;

    right:0;

    display:none;

    flex-direction:column;

    align-items:stretch;

    gap:0;

    margin:0;

    padding:12px 5% 18px;

    background:#fff;

    box-shadow:
      0 14px 30px rgba(0,0,0,.10);

  }


  .nav.open{

    display:flex;

  }


  .nav a{

    padding:14px 0;

    border-bottom:1px solid #edf1f5;

  }


  .nav a:last-child{

    border-bottom:0;

  }


  .nav a.active:after{

    display:none;

  }


  .hero-grid{

    grid-template-columns:1fr;

    min-height:auto;

    gap:0;

  }


  .hero-copy{

    padding:42px 0 10px;

  }


  .hero h1{

    font-size:
      clamp(37px,11vw,52px);

    letter-spacing:-1.4px;

  }


  .hero h2{

    font-size:19px;

  }


  .hero-description{

    font-size:14px;

  }


  .hero-products{

    font-size:12px;

  }


  .hero-actions{

    margin-top:22px;

  }


  .btn{

    min-height:47px;

    padding:12px 18px;

  }


  .hero-visual{

    min-height:330px;

  }


  .hero-product-image{

    max-height:300px;

    width:90%;

  }


  .hero-glow{

    width:270px;

    height:270px;

  }


  .orbit-one{

    width:320px;

    height:320px;

  }


  .orbit-two{

    width:230px;

    height:230px;

  }


  .mini-card{

    right:4%;

    top:11%;

  }


  .mini-card strong{

    font-size:17px;

  }


  .mini-card span{

    font-size:16px;

  }


  .stats{

    grid-template-columns:
      repeat(2,1fr);

  }


  .stat-item{

    min-height:78px;

    border-right:
      1px solid rgba(255,255,255,.15);

    border-bottom:
      1px solid rgba(255,255,255,.15);

  }


  .stat-item:nth-child(2n){

    border-right:0;

  }


  .stat-item:nth-child(3),
  .stat-item:nth-child(4){

    border-bottom:0;

  }


  .stat-item strong{

    font-size:19px;

  }


  .section{

    padding:58px 0;

  }


  .section-heading{

    align-items:flex-start;

    flex-direction:column;

    gap:12px;

  }


  .section-heading h2,
  .network-copy h2,
  .center-heading h2{

    font-size:34px;

  }


  .quality-note{

    white-space:normal;

  }


  .quick-grid{

    grid-template-columns:1fr;

    padding:18px 0;

  }


  .product-grid{

    grid-template-columns:1fr;

  }


  .product-image{

    height:240px;

  }


  .electrical-section{

    grid-template-columns:1fr;

    padding:25px;

    gap:20px;

  }


  .electrical-heading h2{

    font-size:28px;

  }


  .why-title h2{

    font-size:35px;

  }


  .why-grid{

    grid-template-columns:1fr;

    gap:0;

  }


  .why-item{

    border-left:0;

    border-top:
      1px solid rgba(255,255,255,.18);

    padding:22px 0;

  }


  .why-item:first-child{
    border-top:0;
  }

  .industries-grid{
    grid-template-columns:1fr;
  }

  .network-grid{
    grid-template-columns:1fr;
    gap:30px;
  }

  .network-image{
    min-height:280px;
    padding:20px;
  }

  .network-image img{
    height:240px;
  }

  .delivery-grid{
    grid-template-columns:1fr;
    gap:24px;
  }

  .delivery-section h2{
    font-size:29px;
  }

  .support{
    background:linear-gradient(180deg,var(--orange) 0%,var(--orange) 50%,var(--blue) 50%,var(--blue) 100%);
  }

  .support-grid{
    grid-template-columns:1fr;
    gap:24px;
  }

  .support h2{
    font-size:30px;
  }

  .support-actions{
    max-width:320px;
  }

  .email-social{
    padding-left:0;
  }

  .footer-grid{
    grid-template-columns:1fr;
    gap:14px;
    text-align:center;
  }

  .footer-brand{
    justify-content:center;
  }

  .floating-wa{
    right:15px;
    bottom:15px;
    width:54px;
    height:54px;
  }

  .back-top{
    right:21px;
    bottom:80px;
  }
}

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

  .hero-actions{
    flex-direction:column;
    align-items:stretch;
  }

  .hero-actions .btn{
    width:100%;
  }

  .delivery-stats{
    grid-template-columns:1fr;
  }

  .electrical-tags span{
    font-size:12px;
    padding:9px 12px;
  }
}

@media(prefers-reduced-motion:reduce){
  html{
    scroll-behavior:auto;
  }

  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}