Here is a beautiful, ready-to-use "Under Maintenance" HTML/CSS page for WebfocuzGh.
```html

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

body {
font-family: 'Inter', sans-serif;
background: linear-gradient(145deg, #f9faff 0%, #eff2fc 100%);
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
position: relative;
overflow-x: hidden;
padding: 1.5rem;
}

/* animated background blobs */
.blob {
position: fixed;
border-radius: 50%;
filter: blur(70px);
z-index: 0;
opacity: 0.5;
animation: floatBlob 18s infinite alternate ease-in-out;
}

.blob-1 {
width: 45vw;
height: 45vw;
background: radial-gradient(circle, #3b82f6, #a855f7);
top: -10%;
left: -10%;
animation-duration: 22s;
}

.blob-2 {
width: 55vw;
height: 55vw;
background: radial-gradient(circle, #f97316, #ec489a);
bottom: -15%;
right: -10%;
animation-duration: 25s;
animation-delay: -3s;
}

.blob-3 {
width: 30vw;
height: 30vw;
background: radial-gradient(circle, #10b981, #06b6d4);
top: 40%;
left: 60%;
animation-duration: 19s;
animation-delay: -7s;
}

@keyframes floatBlob {
0% {
transform: translate(0, 0) scale(1);
}
100% {
transform: translate(6%, 8%) scale(1.08);
}
}

/* main card container */
.maintenance-card {
position: relative;
z-index: 10;
max-width: 800px;
width: 100%;
background: rgba(255, 255, 255, 0.94);
backdrop-filter: blur(12px);
border-radius: 3.5rem;
box-shadow: 0 35px 68px rgba(0, 0, 0, 0.12), 0 8px 18px rgba(0, 0, 0, 0.05);
padding: 2rem 2rem 2.8rem;
transition: all 0.3s ease;
border: 1px solid rgba(255, 255, 255, 0.6);
text-align: center;
}

@media (max-width: 550px) {
.maintenance-card {
padding: 1.5rem 1.5rem 2rem;
border-radius: 2rem;
}
}

/* icon / gear animation */
.icon-wrapper {
margin-bottom: 1.2rem;
display: inline-flex;
background: linear-gradient(135deg, #1e293b, #0f172a);
padding: 0.8rem 1.4rem;
border-radius: 100px;
box-shadow: 0 12px 22px -8px rgba(0, 0, 0, 0.2);
}

.gear-icon {
font-size: 3.2rem;
color: #facc15;
animation: spinSlow 8s infinite linear;
filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
}

@keyframes spinSlow {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}

/* company branding */
.company-badge {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 12px;
background: rgba(15, 23, 42, 0.1);
backdrop-filter: blur(4px);
padding: 0.5rem 1.4rem;
border-radius: 60px;
margin-bottom: 1.6rem;
border: 1px solid rgba(255,255,240,0.5);
}

.company-badge i {
font-size: 1.6rem;
color: #2563eb;
}

.company-name {
font-weight: 800;
font-size: 1.8rem;
letter-spacing: -0.3px;
background: linear-gradient(120deg, #0f2b3d, #1e3a8a);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}

.domain {
font-size: 1rem;
font-weight: 500;
color: #334155;
background: #eef2ff;
padding: 0.2rem 0.7rem;
border-radius: 40px;
}

h1 {
font-size: 3rem;
font-weight: 800;
background: linear-gradient(130deg, #0f172a, #2d3a6e);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
margin: 0.5rem 0 0.75rem;
letter-spacing: -0.02em;
}

@media (max-width: 500px) {
h1 { font-size: 2.2rem; }
.company-name { font-size: 1.5rem; }
}

.subhead {
font-size: 1.2rem;
color: #2c3e66;
font-weight: 500;
margin-bottom: 1rem;
border-left: 3px solid #f59e0b;
border-right: 3px solid #f59e0b;
display: inline-block;
padding: 0 1rem;
background: rgba(245, 158, 11, 0.08);
border-radius: 40px;
}

.description {
color: #334155;
font-size: 1rem;
line-height: 1.5;
margin: 1.2rem 0 1.6rem;
max-width: 520px;
margin-left: auto;
margin-right: auto;
}

/* progress bar simulation */
.progress-container {
background: rgba(0, 0, 0, 0.08);
border-radius: 60px;
height: 8px;
width: 80%;
margin: 1.8rem auto 1.2rem;
overflow: hidden;
box-shadow: inset 0 1px 2px rgba(0,0,0,0.05);
}

.progress-fill {
width: 68%;
height: 100%;
background: linear-gradient(90deg, #2563eb, #7c3aed, #f97316);
border-radius: 60px;
animation: progressPulse 2.2s ease-in-out infinite alternate;
}

@keyframes progressPulse {
0% { width: 62%; opacity: 0.9; }
100% { width: 74%; opacity: 1; }
}

/* contact and social row */
.contact-row {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 1.8rem;
margin: 2rem 0 1.5rem;
}

.contact-item {
display: flex;
align-items: center;
gap: 0.6rem;
background: #ffffffcc;
backdrop-filter: blur(8px);
padding: 0.6rem 1.3rem;
border-radius: 60px;
transition: all 0.2s;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02);
border: 1px solid #ffffff;
font-weight: 500;
}

.contact-item i {
font-size: 1.3rem;
color: #2563eb;
}

.contact-item a, .contact-item span {
text-decoration: none;
color: #1e293b;
font-weight: 600;
font-size: 1rem;
}

.contact-item a:hover {
color: #f97316;
transition: 0.2s;
}

/* notify form */
.notify-section {
margin-top: 1rem;
margin-bottom: 1.2rem;
}

.notify-title {
font-weight: 600;
color: #0f172a;
margin-bottom: 0.75rem;
font-size: 0.9rem;
text-transform: uppercase;
letter-spacing: 1px;
}

.form-group {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.7rem;
}

.email-input {
flex: 1;
min-width: 200px;
padding: 0.9rem 1.2rem;
border: 1px solid #cbd5e1;
border-radius: 50px;
font-family: 'Inter', sans-serif;
font-size: 0.95rem;
background: white;
transition: 0.2s;
outline: none;
box-shadow: 0 2px 6px rgba(0,0,0,0.02);
}

.email-input:focus {
border-color: #f97316;
box-shadow: 0 0 0 3px rgba(249,115,22,0.2);
}

.notify-btn {
background: #0f172a;
border: none;
padding: 0 1.8rem;
border-radius: 50px;
font-weight: 600;
color: white;
font-family: 'Inter', sans-serif;
cursor: pointer;
transition: 0.2s;
display: flex;
align-items: center;
gap: 8px;
font-size: 0.95rem;
box-shadow: 0 5px 12px rgba(0,0,0,0.1);
}

.notify-btn i {
font-size: 0.9rem;
}

.notify-btn:hover {
background: #f97316;
transform: scale(0.97);
box-shadow: 0 8px 18px rgba(249,115,22,0.3);
}

.success-message {
font-size: 0.85rem;
margin-top: 10px;
color: #10b981;
font-weight: 500;
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
}

/* footer socials */
.social-links {
display: flex;
justify-content: center;
gap: 1.8rem;
margin-top: 2rem;
border-top: 1px solid rgba(0,0,0,0.08);
padding-top: 1.8rem;
}

.social-links a {
color: #334155;
font-size: 1.3rem;
transition: 0.2s;
background: #eef2ff;
width: 40px;
height: 40px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 40px;
text-decoration: none;
}

.social-links a:hover {
color: #f97316;
background: #ffffff;
transform: translateY(-3px);
box-shadow: 0 8px 16px rgba(0,0,0,0.05);
}

.footer-note {
font-size: 0.75rem;
color: #5b6e8c;
margin-top: 1.5rem;
letter-spacing: 0.3px;
}

/* decorative elements */
.glow {
position: absolute;
width: 180px;
height: 180px;
background: radial-gradient(circle, rgba(37,99,235,0.2), transparent);
border-radius: 50%;
filter: blur(50px);
z-index: 1;
}

/* responsive touches */
@media (max-width: 600px) {
.contact-item {
padding: 0.4rem 1rem;
}
.contact-item i {
font-size: 1rem;
}
}

 

(function() {
const notifyBtn = document.getElementById('notifyBtn');
const emailInput = document.getElementById('notifyEmail');
const feedbackDiv = document.getElementById('formFeedback');

// simple email validation
function isValidEmail(email) {
const re = /^[^s@]+@([^s@]+.)+[^s@]+$/;
return re.test(email);
}

function showMessage(msg, isError = false) {
feedbackDiv.innerHTML = '';
const messageDiv = document.createElement('div');
messageDiv.className = 'success-message';
if (isError) {
messageDiv.style.color = '#e11d48';
messageDiv.innerHTML = ` ${msg}`;
} else {
messageDiv.innerHTML = ` ${msg}`;
}
feedbackDiv.appendChild(messageDiv);
// auto-clear after 5 seconds
setTimeout(() => {
if (feedbackDiv.firstChild === messageDiv) {
messageDiv.style.opacity = '0';
setTimeout(() => {
if (feedbackDiv.firstChild === messageDiv) feedbackDiv.innerHTML = '';
}, 300);
}
}, 5000);
}

function handleNotify() {
const email = emailInput.value.trim();
if (!email) {
showMessage('Please enter your email address.', true);
return;
}
if (!isValidEmail(email)) {
showMessage('Please enter a valid email (e.g., name@domain.com).', true);
return;
}

// Simulate API request or store locally (demo purposes)
// In a real world, you'd send this to your backend.
// For now, just display a beautiful success message.
console.log(`[WebfocuzGh] Notify signup: ${email}`);

// Success simulation
showMessage(`Thanks! We'll alert ${email} when we're back online.`);
emailInput.value = '';

// optional: store in localStorage to remember signup attempt? just for user experience
try {
let subscribers = JSON.parse(localStorage.getItem('wf_notify_pre') || '[]');
if (!subscribers.includes(email)) {
subscribers.push(email);
localStorage.setItem('wf_notify_pre', JSON.stringify(subscribers));
}
} catch(e) { /* silent */ }
}

notifyBtn.addEventListener('click', handleNotify);
emailInput.addEventListener('keypress', (e) => {
if (e.key === 'Enter') {
e.preventDefault();
handleNotify();
}
});

// small extra: prefill for demo? not needed but nice
// optional tooltip hover effect on contact items
const contactItems = document.querySelectorAll('.contact-item');
contactItems.forEach(item => {
item.addEventListener('mouseenter', () => {
item.style.transform = 'translateY(-2px)';
item.style.transition = '0.2s';
});
item.addEventListener('mouseleave', () => {
item.style.transform = 'translateY(0px)';
});
});
})();

```