:root{
  --purple:#26004b;
  --purple2:#10001f;
  --green:#7cff00;
  --line:#8b2cff;
  --white:#ffffff;
}
*{box-sizing:border-box}
body{
  margin:0;
  font-family:Arial, Helvetica, sans-serif;
  background: radial-gradient(circle at 50% 0%, #33006d, #08000f 70%);
  color:white;
}
body:before{
  content:"";
  position:fixed;inset:0;
  background:
    linear-gradient(90deg, rgba(124,255,0,.05) 1px, transparent 1px),
    linear-gradient(rgba(139,44,255,.05) 1px, transparent 1px);
  background-size:55px 55px;
  pointer-events:none;
}
.topbar{
  height:112px;
  padding:8px 36px;
  display:flex;
  align-items:center;
  gap:32px;
  background:rgba(8,0,20,.96);
  border-bottom:1px solid rgba(139,44,255,.45);
  position:relative;
  z-index:2;
}
.brand{width:430px;flex-shrink:0}
.brand img{
  height:100px;
  width:auto;
  max-width:430px;
  object-fit:contain;
  display:block;
  filter:drop-shadow(0 0 12px rgba(139,44,255,.7));
}
nav{display:flex;gap:24px;align-items:center;flex:1;justify-content:center}
nav a{color:white;text-decoration:none;font-weight:700;font-size:14px;white-space:nowrap}
nav a.active{color:var(--green);border-bottom:3px solid var(--green);padding-bottom:8px}
.social{font-weight:800;font-size:22px;white-space:nowrap}
.phone{
  text-decoration:none;color:white;font-weight:800;font-size:20px;
  border:1px solid var(--line);border-radius:10px;padding:12px 22px;
  background:linear-gradient(180deg,#6413ad,#2a004f);
  box-shadow:0 0 18px rgba(139,44,255,.65);
  white-space:nowrap;
}
.hero{
  min-height:405px;
  display:grid;
  grid-template-columns: 38% 62%;
  position:relative;
  overflow:hidden;
  border-bottom:1px solid rgba(139,44,255,.35);
}
.hero-copy{
  padding:42px 60px;
  background:linear-gradient(90deg, rgba(9,0,22,.98) 0%, rgba(18,0,45,.93) 72%, rgba(18,0,45,.1));
  z-index:1;
}
.hero h1{font-size:38px;line-height:1.12;margin:0 0 20px;font-weight:900}
.hero h1 span{color:var(--green)}
.hero p{font-size:17px;line-height:1.55;max-width:560px}
.actions{display:flex;gap:24px;margin-top:26px}
.btn{
  color:white;text-decoration:none;font-weight:800;border-radius:12px;
  padding:16px 22px;border:1px solid var(--line);
}
.primary{background:linear-gradient(180deg,#7b1bd8,#3b006b);box-shadow:0 0 24px rgba(139,44,255,.65)}
.secondary{background:rgba(40,0,80,.55)}
.hero-collage{
  position:relative;
  display:grid;
  grid-template-columns: repeat(4,1fr);
  gap:0;
  transform:skewX(-10deg);
  margin-right:-90px;
}
.hero-img{
  background-size:cover;background-position:center;
  min-height:405px;
  border-left:2px solid var(--green);
  filter:contrast(1.08) saturate(1.1);
}
.stats{
  width:92%;
  margin: -10px auto 16px;
  display:grid;
  grid-template-columns:repeat(5,1fr);
  border:1px solid var(--line);
  border-radius:12px;
  background:linear-gradient(180deg,rgba(51,0,96,.95),rgba(15,0,32,.95));
  box-shadow:0 0 25px rgba(139,44,255,.45);
  position:relative;
  z-index:2;
}
.stats div{padding:20px 24px;border-right:1px solid rgba(255,255,255,.18);display:grid;grid-template-columns:65px 1fr;column-gap:12px}
.stats div:last-child{border-right:0}
.stats strong{font-size:52px;filter:drop-shadow(0 0 12px #b56cff);grid-row:span 2}
.stats h3{font-size:17px;margin:0 0 8px}
.stats p{font-size:13px;margin:0;color:#eee}
.content-grid{
  width:92%;
  margin:0 auto 22px;
  display:grid;
  grid-template-columns:1fr 300px;
  gap:24px;
}
h2{text-align:center;margin:8px 0 12px;font-size:22px}
h2 span{display:inline-block;width:75px;height:2px;background:var(--green);vertical-align:middle;margin:0 15px}
.services{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:14px;
}
article{
  border:1px solid var(--line);
  border-radius:9px;
  overflow:hidden;
  background:linear-gradient(180deg,#350063,#120027);
  min-height:230px;
  position:relative;
  box-shadow:0 0 13px rgba(139,44,255,.28);
}
article img{width:100%;height:118px;object-fit:cover;display:block}
article i{
  position:absolute;top:96px;left:18px;
  width:45px;height:45px;border-radius:50%;
  border:2px solid var(--green);
  background:#140025;
  display:flex;align-items:center;justify-content:center;
  font-style:normal;font-size:20px;color:var(--green);
}
article h3{font-size:15px;text-align:center;margin:24px 10px 8px}
article p{font-size:12px;text-align:center;line-height:1.35;margin:0 12px 14px;color:#eee}
.projects{display:grid;grid-template-columns:repeat(6,1fr);gap:9px}
.projects img{width:100%;height:93px;object-fit:cover;border-radius:8px;border:1px solid var(--line)}
.more{
  display:block;width:max-content;margin:-7px auto 0;
  color:var(--green);text-decoration:none;font-weight:900;
  border:1px solid var(--green);border-radius:15px;padding:8px 25px;
  background:#230044;
}
aside{display:flex;flex-direction:column;gap:14px}
.coverage,.contact{
  border:1px solid var(--line);
  border-radius:10px;
  background:linear-gradient(180deg,#3a006e,#100020);
  padding:18px 24px;
  min-height:170px;
}
.coverage h3,.contact h3{margin:0 0 14px;text-align:center}
.contact h3{color:var(--green);font-size:22px;text-align:left}
.map{text-align:center;font-size:55px;filter:drop-shadow(0 0 14px #8b2cff)}
.coverage p,.contact p{font-size:14px;margin:10px 0}
footer{
  min-height:90px;
  display:grid;
  grid-template-columns:300px 1fr 1fr 1.4fr 1fr;
  gap:20px;align-items:center;
  padding:13px 42px;
  background:rgba(15,0,35,.95);
  border-top:1px solid rgba(139,44,255,.45);
  font-weight:700;
}
footer img{height:70px;max-width:290px;object-fit:contain}
.whatsapp{
  position:fixed;right:28px;bottom:24px;
  width:66px;height:66px;border-radius:50%;
  background:#22c55e;color:white;text-decoration:none;
  display:flex;align-items:center;justify-content:center;
  font-size:34px;border:6px solid white;z-index:5;
  box-shadow:0 0 25px rgba(0,0,0,.5);
}

@media(max-width:1250px){
  .brand{width:300px}
  .brand img{height:82px;max-width:300px}
  .topbar{height:auto;gap:14px}
  nav{gap:14px}
  .phone{font-size:16px;padding:10px 14px}
}
@media(max-width:1000px){
  .topbar{height:auto;flex-wrap:wrap;padding:14px}
  .brand{width:100%}
  .brand img{height:95px;margin:auto}
  nav{order:3;width:100%;flex-wrap:wrap;gap:14px}
  .hero{grid-template-columns:1fr}
  .hero-collage{display:none}
  .stats{grid-template-columns:1fr}
  .stats div{border-right:0;border-bottom:1px solid rgba(255,255,255,.16)}
  .content-grid{grid-template-columns:1fr}
  .services{grid-template-columns:repeat(2,1fr)}
  .projects{grid-template-columns:repeat(2,1fr)}
  footer{grid-template-columns:1fr;text-align:center}
}