Bespoke Web Design &High-Performance Systems

We engineer lightweight, secure, and search-optimized web infrastructures for businesses that value absolute speed, technical compliance, and conversion efficiency.

Schedule a Consultation

Get a Quote

/* ============================================================================
PREMIUM LOGO ROW & MOBILE CAROUSEL
============================================================================ */

.wg-logo-row {
display: flex;
align-items: center;
gap: 3rem;
padding: 2rem 1rem 2.5rem 1rem; /* Added bottom padding to space out the separator */
margin-bottom: 2rem;

/* THE PREMIUM BOTTOM SEPARATOR */
/* Using rgba at 8% opacity creates a seamless, glass-like line that adapts to your dark background perfectly */
border-bottom: 1px solid rgba(255, 255, 255, 0.08);

/* Carousel Magic */
flex-wrap: nowrap;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scroll-snap-type: x mandatory;
scrollbar-width: none;
}

.wg-logo-row::-webkit-scrollbar {
display: none;
}

.wg-logo-item {
font-family: 'Impact', 'Arial Black', sans-serif;
font-size: 1.25rem;
font-weight: 300;

/* NON-HOVER STATE: Muted, elegant slate-blue */
color: #8fa0b5;
opacity: 0.65; /* Makes it sit quietly in the background */

text-transform: uppercase;
letter-spacing: 0.05em;
text-decoration: none !important;

/* Premium smooth transition */
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

/* Carousel Item Magic */
flex-shrink: 0;
white-space: nowrap;
scroll-snap-align: center;
}

/* HOVER STATE: Crisp, noticeable, and elevated */
.wg-logo-item:hover {
color: #ffffff; /* Snaps to crisp white */
opacity: 1; /* Brings to full focus */
transform: translateY(-2px); /* Premium subtle upward lift */
text-shadow: 0 4px 15px rgba(255, 255, 255, 0.15); /* Very soft glowing effect */
}

/* ============================================================================
DESKTOP BEHAVIOR (Fall back to standard grid)
============================================================================ */
@media (min-width: 768px) {
.wg-logo-row {
flex-wrap: wrap;
justify-content: center;
overflow-x: visible;
padding: 2.5rem 0 3rem 0; /* More breathing room on desktop */
scroll-snap-type: none;
}

.wg-logo-item {
scroll-snap-align: none;
}
}

Garo Gift Shop
Meraki Electronics
ArchiGrow
Mwendwa Mungatia
Ascentric Group
Artmall
Vinaywa

/* ============================================================================
3. THE GRID LAYOUTS (Core Services & Cards)
============================================================================ */
.wg-section-title {
font-size: 2.95rem;
font-weight: 800;
color: #ffffff;
letter-spacing: -0.02em;
margin-bottom: 1rem;
text-align: center;
}

.wg-section-desc {
font-size: 1.125rem;
color: #94a3b8;
text-align: center;
max-width: 36rem;
margin: 0 auto 1rem auto;
line-height: 1.625;
}

.wg-grid-container {
display: grid;
grid-template-columns: 1fr;
gap: 1.5rem;
margin-bottom: 1rem;
}

@media (min-width: 768px) {
.wg-grid-container {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}

@media (min-width: 1024px) {
.wg-grid-container {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}

.wg-card {
background-color: #0b192c;
border: 1px solid #1e293b;
border-radius: 1rem;
padding: 2.5rem 2rem;
transition: transform 0.2s, border-color 0.2s;
height: 100%;
display: flex;
flex-col: column;
flex-direction: column;
}

.wg-card:hover {
transform: translateY(-4px);
border-color: #1a56db;
}

.wg-card-icon {
width: 3.5rem;
height: 3.5rem;
background-color: #0f213a;
color: #3a8ebf;
border-radius: 0.75rem;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 1.5rem;
border: 1px solid rgba(58, 142, 191, 0.15);
}

.wg-card-icon svg {
width: 1.75rem;
height: 1.75rem;
}

.wg-card-title {
font-size: 1.25rem;
font-weight: 700;
color: #ffffff;
margin-bottom: 0.75rem;
}

.wg-card-text {
font-size: 0.875rem;
line-height: 1.625;
color: #94a3b8;
margin: 0;
}

Core Expertise

We design and build digital assets engineered for maximum rendering speed and Google PageSpeed index stability.

Bespoke Web Engineering

Custom hand-written static architectures and lightweight layouts designed for speed, security, and long-term durability.

High-Performance E-Commerce

WooCommerce setups structured with mobile-optimized checkout pages, indexing logic, and clean transaction structures.

WASM & Client-Side Logic

Bespoke WebAssembly tools (like our AVIF and Background Remover pipelines) that execute instantly in-browser.

Redesign & Redirection

Clean migration of clunky legacy sites. We optimize layouts and preserve URL mappings to maintain search indexing.

Core Web Vitals SEO Setup

Resolving Largest Contentful Paint (LCP) bottlenecks, Cumulative Layout Shifts (CLS), and structural indexing issues.

Plugin & API Engineering

Replacing bloated third-party plugins with custom, lightweight code designed to prevent database latency.

/* ============================================================================
4. THE WEBGARO ADVANTAGE (3-Pillar Hybrid Layout)
============================================================================ */
.wg-adv-header {
text-align: center;
max-width: 700px;
margin: 0 auto 3.5rem auto;
}

.wg-adv-header strong {
color: #3a8ebf; /* Highlighting your dual-nature in the text */
font-weight: 600;
}

.wg-adv-grid {
display: grid;
grid-template-columns: 1fr;
gap: 2rem;
}

@media (min-width: 1024px) {
.wg-adv-grid {
grid-template-columns: repeat(3, 1fr);
}
}

/* Base Card Styling */
.wg-adv-card {
background-color: #0b192c;
border: 1px solid #1e293b;
border-radius: 1.25rem;
padding: 2.5rem 2rem;
position: relative;
overflow: hidden;
transition: transform 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}

/* The Animated Glowing Top Border */
.wg-adv-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 3px;
background: linear-gradient(90deg, transparent, #3a8ebf, transparent);
opacity: 0;
transition: opacity 0.4s ease;
}

.wg-adv-card:hover {
transform: translateY(-8px);
border-color: rgba(58, 142, 191, 0.4);
box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.5);
}

.wg-adv-card:hover::before {
opacity: 1;
}

/* Make the "Tooling" Card stand out slightly to emphasize your Dev nature */
.wg-adv-card-featured {
background: linear-gradient(160deg, #0d213b 0%, #0b192c 100%);
border-color: rgba(58, 142, 191, 0.2);
}

.wg-adv-card-featured::before {
opacity: 0.5; /* Always slightly glowing */
background: linear-gradient(90deg, transparent, #1a56db, transparent);
}

/* Icon & Typography Styling */
.wg-adv-icon-wrapper {
width: 3.5rem;
height: 3.5rem;
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.05);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 1.5rem;
transition: background 0.4s ease, transform 0.4s ease;
}

.wg-adv-card:hover .wg-adv-icon-wrapper {
background: rgba(58, 142, 191, 0.1);
transform: scale(1.05);
}

.featured-icon {
background: rgba(26, 86, 219, 0.1);
border-color: rgba(26, 86, 219, 0.2);
}

.wg-adv-icon {
width: 1.75rem;
height: 1.75rem;
color: #3a8ebf;
}

.featured-icon .wg-adv-icon {
color: #1a56db; /* Slightly different blue for the center icon */
}

.wg-adv-title {
font-size: 1.35rem;
font-weight: 700;
color: #ffffff;
margin: 0 0 1rem 0;
}

.wg-adv-text {
font-size: 0.95rem;
line-height: 1.6;
color: #94a3b8;
margin: 0;
}

The WebGaro Advantage

We operate at the intersection of a premium design agency and a software lab. We don't just assemble websites; we engineer proprietary digital platforms.

Bespoke UI/UX Design
No generic templates or drag-and-drop builders. We craft pixel-perfect, content-driven interfaces tailored specifically to your brand's commercial goals and human search behaviors.

Proprietary Tooling
As tool developers, we write our own bespoke plugins and scripts. This completely eliminates third-party bloat, prevents security risks, and gives you absolute control over your tech stack.

Native Performance
Because we control both the front-end layout and the back-end architecture, we achieve sub-millisecond execution, flawless Core Web Vitals, and extreme mobile rendering speeds.

/* ============================================================================
6. BENTO BOX ENGINEERING PROCESS (Replaces old timeline)
============================================================================ */
.wg-process-grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 1.5rem;
width: 100%;
margin-top: 2rem;
}

/* Bento Desktop Layout: 3 on top, 2 on bottom */
.wg-process-card:nth-child(1),
.wg-process-card:nth-child(2),
.wg-process-card:nth-child(3) {
grid-column: span 2;
}

.wg-process-card:nth-child(4),
.wg-process-card:nth-child(5) {
grid-column: span 3;
}

/* Base Card Styling - Matching the existing WebGaro Split Blocks */
.wg-process-card {
position: relative;
background-color: #0b192c;
border: 1px solid #1e293b;
border-radius: 1.25rem;
overflow: hidden;
cursor: crosshair;
transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
display: flex;
flex-direction: column;
}

.wg-card-content {
padding: 2.5rem 2rem;
position: relative;
z-index: 2;
height: 100%;
}

.wg-step-badge {
display: inline-block;
font-size: 0.8rem;
text-transform: uppercase;
letter-spacing: 1px;
color: #3a8ebf;
background: rgba(58, 142, 191, 0.1);
padding: 0.4rem 0.8rem;
border-radius: 50px;
margin-bottom: 1.25rem;
font-weight: 700;
border: 1px solid rgba(58, 142, 191, 0.25);
}

.wg-step-title {
font-size: 1.25rem;
font-weight: 700;
margin: 0 0 0.75rem 0;
color: #ffffff;
}

.wg-step-desc {
color: #94a3b8;
line-height: 1.625;
font-size: 0.95rem;
margin: 0;
}

/* Giant background number watermark */
.wg-step-watermark {
position: absolute;
bottom: -15px;
right: 15px;
font-size: 8rem;
font-weight: 800;
line-height: 1;
color: rgba(255, 255, 255, 0.03);
z-index: -1;
user-select: none;
transition: color 0.4s ease, transform 0.4s ease;
}

/* --- INTERACTIVE EFFECTS --- */
.wg-process-card::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
/* Subtle spotlight effect using mouse coordinates */
background: radial-gradient(
800px circle at var(--mouse-x) var(--mouse-y),
rgba(255, 255, 255, 0.05),
transparent 40%
);
opacity: 0;
transition: opacity 0.3s ease;
pointer-events: none;
z-index: 1;
}

.wg-process-card:hover::before {
opacity: 1;
}

.wg-process-card:hover {
transform: translateY(-5px);
border-color: #1a56db;
box-shadow: 0 15px 35px -15px rgba(26, 86, 219, 0.3);
}

.wg-process-card:hover .wg-step-watermark {
color: rgba(58, 142, 191, 0.08);
transform: scale(1.05) rotate(-5deg);
}

/* Sibling Dimming (Focus state) */
.wg-process-grid:hover .wg-process-card:not(:hover) {
opacity: 0.5;
transform: scale(0.98);
}

/* --- Responsive Rules --- */
@media (max-width: 1024px) {
/* Tablet: Make all cards span 3 columns (2 per row) */
.wg-process-card:nth-child(1),
.wg-process-card:nth-child(2),
.wg-process-card:nth-child(3),
.wg-process-card:nth-child(4),
.wg-process-card:nth-child(5) {
grid-column: span 3;
}
/* Center the 5th card on its own row */
.wg-process-card:nth-child(5) {
grid-column: 2 / 5;
}
}

@media (max-width: 768px) {
/* Mobile: Single column */
.wg-process-grid {
display: flex;
flex-direction: column;
}
.wg-process-card {
width: 100%;
}
}

document.addEventListener("DOMContentLoaded", () = {
// Select all the newly added bento process cards
const processCards = document.querySelectorAll('.wg-process-card');

processCards.forEach(card = {
// Spotlight tracking effect
card.addEventListener('mousemove', (e) = {
const rect = card.getBoundingClientRect();
// Calculate mouse position relative to the element
const x = e.clientX - rect.left;
const y = e.clientY - rect.top;

// Pass properties to CSS
card.style.setProperty('--mouse-x', `${x}px`);
card.style.setProperty('--mouse-y', `${y}px`);
});
});
});

Our Engineering Process

A structured, milestone-driven workflow ensuring every asset meets technical standards.

Phase 01
Discovery & Strategy
We audit your target market, technical bottlenecks, and commercial goals before writing a single line of code.
1

Phase 02
Design & UX Layout
We draft clean, responsive, and content-focused interfaces designed for fluid mobile interaction.
2

Phase 03
Development & Optimization
Our team builds lightweight setups using performant, semantic markup to eliminate redundant scripts.
3

Phase 04
Core Web Vitals Auditing
We run native lighthouse tests, optimize payloads, adjust image properties, and check rendering pathways.
4

Phase 05
Deploy & Ongoing Care
We launch your high-speed asset safely, manage URL migrations, configure XML sitemaps, and monitor server uptime.
5

Latest Posts

Frequently Asked Questions

.stk-fcbfe65 {margin-bottom:90px !important;}.stk-fcbfe65-column{--stk-columns-spacing:0px !important;--stk-column-gap:25px !important;}

.stk-d7d93aa {margin-bottom:0px !important;}
.stk-6bdc280 {overflow:hidden !important;}.stk-6bdc280-container{background-color:#0a192c !important;border-top-left-radius:7px !important;border-top-right-radius:7px !important;border-bottom-right-radius:7px !important;border-bottom-left-radius:7px !important;overflow:hidden !important;border-style:solid !important;border-color:var(--theme-palette-color-4, #0a214d) !important;border-top-width:1px !important;border-right-width:1px !important;border-bottom-width:1px !important;border-left-width:1px !important;}.stk-6bdc280-container:before{background-color:#0a192c !important;}

.stk-85b3004 .stk-block-heading__text{font-size:17px !important;color:var(--theme-palette-color-7, #FBFBFC) !important;}@media screen and (max-width: 1023px){.stk-85b3004 .stk-block-heading__text{font-size:17px !important;}}What makes WebGaro top website design company in Kenya?

Question

Bespoke Web Design &High-Performance Systems

We engineer lightweight, secure, and search-optimized web infrastructures for businesses that value absolute speed, technical compliance, and conversion efficiency.

Schedule a Consultation

Get a Quote

/* ============================================================================
   PREMIUM LOGO ROW & MOBILE CAROUSEL
   ============================================================================ */

.wg-logo-row {
    display: flex;
    align-items: center;
    gap: 3rem;
    padding: 2rem 1rem 2.5rem 1rem; /* Added bottom padding to space out the separator */
    margin-bottom: 2rem;
    
    /* THE PREMIUM BOTTOM SEPARATOR */
    /* Using rgba at 8% opacity creates a seamless, glass-like line that adapts to your dark background perfectly */
    border-bottom: 1px solid rgba(255, 255, 255, 0.08); 
    
    /* Carousel Magic */
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}

.wg-logo-row::-webkit-scrollbar {
    display: none;
}

.wg-logo-item {
    font-family: 'Impact', 'Arial Black', sans-serif;
    font-size: 1.25rem;
    font-weight: 300;
    
    /* NON-HOVER STATE: Muted, elegant slate-blue */
    color: #8fa0b5; 
    opacity: 0.65; /* Makes it sit quietly in the background */
    
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-decoration: none !important;
    
    /* Premium smooth transition */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    
    /* Carousel Item Magic */
    flex-shrink: 0;
    white-space: nowrap;
    scroll-snap-align: center;
}

/* HOVER STATE: Crisp, noticeable, and elevated */
.wg-logo-item:hover {
    color: #ffffff; /* Snaps to crisp white */
    opacity: 1; /* Brings to full focus */
    transform: translateY(-2px); /* Premium subtle upward lift */
    text-shadow: 0 4px 15px rgba(255, 255, 255, 0.15); /* Very soft glowing effect */
}

/* ============================================================================
   DESKTOP BEHAVIOR (Fall back to standard grid)
   ============================================================================ */
@media (min-width: 768px) {
    .wg-logo-row {
        flex-wrap: wrap; 
        justify-content: center; 
        overflow-x: visible; 
        padding: 2.5rem 0 3rem 0; /* More breathing room on desktop */
        scroll-snap-type: none; 
    }
    
    .wg-logo-item {
        scroll-snap-align: none;
    }
}

Garo Gift Shop
            Meraki Electronics
            ArchiGrow
            Mwendwa Mungatia
            Ascentric Group
            Artmall
            Vinaywa

/* ============================================================================
   3. THE GRID LAYOUTS (Core Services & Cards)
   ============================================================================ */
.wg-section-title {
    font-size: 2.95rem;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: -0.02em;
    margin-bottom: 1rem;
    text-align: center;
}

.wg-section-desc {
    font-size: 1.125rem;
    color: #94a3b8;
    text-align: center;
    max-width: 36rem;
    margin: 0 auto 1rem auto;
    line-height: 1.625;
}

.wg-grid-container {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin-bottom: 1rem;
}

@media (min-width: 768px) {
    .wg-grid-container {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .wg-grid-container {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.wg-card {
    background-color: #0b192c;
    border: 1px solid #1e293b;
    border-radius: 1rem;
    padding: 2.5rem 2rem;
    transition: transform 0.2s, border-color 0.2s;
    height: 100%;
    display: flex;
    flex-col: column;
    flex-direction: column;
}

.wg-card:hover {
    transform: translateY(-4px);
    border-color: #1a56db;
}

.wg-card-icon {
    width: 3.5rem;
    height: 3.5rem;
    background-color: #0f213a;
    color: #3a8ebf;
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    border: 1px solid rgba(58, 142, 191, 0.15);
}

.wg-card-icon svg {
    width: 1.75rem;
    height: 1.75rem;
}

.wg-card-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 0.75rem;
}

.wg-card-text {
    font-size: 0.875rem;
    line-height: 1.625;
    color: #94a3b8;
    margin: 0;
}

Core Expertise
            
                We design and build digital assets engineered for maximum rendering speed and Google PageSpeed index stability.

Bespoke Web Engineering
                    
                        Custom hand-written static architectures and lightweight layouts designed for speed, security, and long-term durability.

High-Performance E-Commerce
                    
                        WooCommerce setups structured with mobile-optimized checkout pages, indexing logic, and clean transaction structures.

WASM & Client-Side Logic
                    
                        Bespoke WebAssembly tools (like our AVIF and Background Remover pipelines) that execute instantly in-browser.

Redesign & Redirection
                    
                        Clean migration of clunky legacy sites. We optimize layouts and preserve URL mappings to maintain search indexing.

Core Web Vitals SEO Setup
                    
                        Resolving Largest Contentful Paint (LCP) bottlenecks, Cumulative Layout Shifts (CLS), and structural indexing issues.

Plugin & API Engineering
                    
                        Replacing bloated third-party plugins with custom, lightweight code designed to prevent database latency.

/* ============================================================================
   4. THE WEBGARO ADVANTAGE (3-Pillar Hybrid Layout)
   ============================================================================ */
.wg-adv-header {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 3.5rem auto;
}

.wg-adv-header strong {
    color: #3a8ebf; /* Highlighting your dual-nature in the text */
    font-weight: 600;
}

.wg-adv-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

@media (min-width: 1024px) {
    .wg-adv-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Base Card Styling */
.wg-adv-card {
    background-color: #0b192c;
    border: 1px solid #1e293b;
    border-radius: 1.25rem;
    padding: 2.5rem 2rem;
    position: relative;
    overflow: hidden;
    transition: transform 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}

/* The Animated Glowing Top Border */
.wg-adv-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, transparent, #3a8ebf, transparent);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.wg-adv-card:hover {
    transform: translateY(-8px);
    border-color: rgba(58, 142, 191, 0.4);
    box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.5);
}

.wg-adv-card:hover::before {
    opacity: 1;
}

/* Make the "Tooling" Card stand out slightly to emphasize your Dev nature */
.wg-adv-card-featured {
    background: linear-gradient(160deg, #0d213b 0%, #0b192c 100%);
    border-color: rgba(58, 142, 191, 0.2);
}

.wg-adv-card-featured::before {
    opacity: 0.5; /* Always slightly glowing */
    background: linear-gradient(90deg, transparent, #1a56db, transparent);
}

/* Icon & Typography Styling */
.wg-adv-icon-wrapper {
    width: 3.5rem;
    height: 3.5rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    transition: background 0.4s ease, transform 0.4s ease;
}

.wg-adv-card:hover .wg-adv-icon-wrapper {
    background: rgba(58, 142, 191, 0.1);
    transform: scale(1.05);
}

.featured-icon {
    background: rgba(26, 86, 219, 0.1);
    border-color: rgba(26, 86, 219, 0.2);
}

.wg-adv-icon {
    width: 1.75rem;
    height: 1.75rem;
    color: #3a8ebf;
}

.featured-icon .wg-adv-icon {
    color: #1a56db; /* Slightly different blue for the center icon */
}

.wg-adv-title {
    font-size: 1.35rem;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 1rem 0;
}

.wg-adv-text {
    font-size: 0.95rem;
    line-height: 1.6;
    color: #94a3b8;
    margin: 0;
}

The WebGaro Advantage
            
                We operate at the intersection of a premium design agency and a software lab. We don't just assemble websites; we engineer proprietary digital platforms.

Bespoke UI/UX Design
                No generic templates or drag-and-drop builders. We craft pixel-perfect, content-driven interfaces tailored specifically to your brand's commercial goals and human search behaviors.

Proprietary Tooling
                As tool developers, we write our own bespoke plugins and scripts. This completely eliminates third-party bloat, prevents security risks, and gives you absolute control over your tech stack.

Native Performance
                Because we control both the front-end layout and the back-end architecture, we achieve sub-millisecond execution, flawless Core Web Vitals, and extreme mobile rendering speeds.

/* ============================================================================
   6. BENTO BOX ENGINEERING PROCESS (Replaces old timeline)
   ============================================================================ */
.wg-process-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1.5rem;
    width: 100%;
    margin-top: 2rem;
}

/* Bento Desktop Layout: 3 on top, 2 on bottom */
.wg-process-card:nth-child(1),
.wg-process-card:nth-child(2),
.wg-process-card:nth-child(3) {
    grid-column: span 2;
}

.wg-process-card:nth-child(4),
.wg-process-card:nth-child(5) {
    grid-column: span 3;
}

/* Base Card Styling - Matching the existing WebGaro Split Blocks */
.wg-process-card {
    position: relative;
    background-color: #0b192c;
    border: 1px solid #1e293b;
    border-radius: 1.25rem;
    overflow: hidden;
    cursor: crosshair;
    transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
    display: flex;
    flex-direction: column;
}

.wg-card-content {
    padding: 2.5rem 2rem;
    position: relative;
    z-index: 2;
    height: 100%;
}

.wg-step-badge {
    display: inline-block;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #3a8ebf;
    background: rgba(58, 142, 191, 0.1);
    padding: 0.4rem 0.8rem;
    border-radius: 50px;
    margin-bottom: 1.25rem;
    font-weight: 700;
    border: 1px solid rgba(58, 142, 191, 0.25);
}

.wg-step-title {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0 0 0.75rem 0;
    color: #ffffff;
}

.wg-step-desc {
    color: #94a3b8;
    line-height: 1.625;
    font-size: 0.95rem;
    margin: 0;
}

/* Giant background number watermark */
.wg-step-watermark {
    position: absolute;
    bottom: -15px;
    right: 15px;
    font-size: 8rem;
    font-weight: 800;
    line-height: 1;
    color: rgba(255, 255, 255, 0.03);
    z-index: -1;
    user-select: none;
    transition: color 0.4s ease, transform 0.4s ease;
}

/* --- INTERACTIVE EFFECTS --- */
.wg-process-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Subtle spotlight effect using mouse coordinates */
    background: radial-gradient(
        800px circle at var(--mouse-x) var(--mouse-y), 
        rgba(255, 255, 255, 0.05), 
        transparent 40%
    );
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    z-index: 1;
}

.wg-process-card:hover::before {
    opacity: 1;
}

.wg-process-card:hover {
    transform: translateY(-5px);
    border-color: #1a56db;
    box-shadow: 0 15px 35px -15px rgba(26, 86, 219, 0.3);
}

.wg-process-card:hover .wg-step-watermark {
    color: rgba(58, 142, 191, 0.08);
    transform: scale(1.05) rotate(-5deg);
}

/* Sibling Dimming (Focus state) */
.wg-process-grid:hover .wg-process-card:not(:hover) {
    opacity: 0.5;
    transform: scale(0.98);
}

/* --- Responsive Rules --- */
@media (max-width: 1024px) {
    /* Tablet: Make all cards span 3 columns (2 per row) */
    .wg-process-card:nth-child(1),
    .wg-process-card:nth-child(2),
    .wg-process-card:nth-child(3),
    .wg-process-card:nth-child(4),
    .wg-process-card:nth-child(5) {
        grid-column: span 3;
    }
    /* Center the 5th card on its own row */
    .wg-process-card:nth-child(5) {
        grid-column: 2 / 5; 
    }
}

@media (max-width: 768px) {
    /* Mobile: Single column */
    .wg-process-grid {
        display: flex;
        flex-direction: column;
    }
    .wg-process-card {
        width: 100%;
    }
}

document.addEventListener("DOMContentLoaded", () => {
    // Select all the newly added bento process cards
    const processCards = document.querySelectorAll('.wg-process-card');

processCards.forEach(card => {
        // Spotlight tracking effect
        card.addEventListener('mousemove', (e) => {
            const rect = card.getBoundingClientRect();
            // Calculate mouse position relative to the element
            const x = e.clientX - rect.left; 
            const y = e.clientY - rect.top;  
            
            // Pass properties to CSS
            card.style.setProperty('--mouse-x', `${x}px`);
            card.style.setProperty('--mouse-y', `${y}px`);
        });
    });
});

Our Engineering Process
        
            A structured, milestone-driven workflow ensuring every asset meets technical standards.

Phase 01
                    Discovery & Strategy
                    We audit your target market, technical bottlenecks, and commercial goals before writing a single line of code.
                    1

Phase 02
                    Design & UX Layout
                    We draft clean, responsive, and content-focused interfaces designed for fluid mobile interaction.
                    2

Phase 03
                    Development & Optimization
                    Our team builds lightweight setups using performant, semantic markup to eliminate redundant scripts.
                    3

Phase 04
                    Core Web Vitals Auditing
                    We run native lighthouse tests, optimize payloads, adjust image properties, and check rendering pathways.
                    4

Phase 05
                    Deploy & Ongoing Care
                    We launch your high-speed asset safely, manage URL migrations, configure XML sitemaps, and monitor server uptime.
                    5

Bespoke Web Design &
High-Performance Systems

Core Expertise

Bespoke Web Engineering

High-Performance E-Commerce

WASM & Client-Side Logic

Redesign & Redirection

Core Web Vitals SEO Setup

Plugin & API Engineering

The WebGaro Advantage

Bespoke UI/UX Design

Proprietary Tooling

Native Performance

Our Engineering Process

Discovery & Strategy

Design & UX Layout

Development & Optimization

Core Web Vitals Auditing

Deploy & Ongoing Care

Latest Posts

How to Optimize Headless CMS for Core Web Vitals

Local SEO Strategies for Startups

Production-Ready Programmatic SEO Site Architecture Templates for SaaS

Frequently Asked Questions

What makes WebGaro top website design company in Kenya?

Do you offer website design in Kenya?

How much does website design cost in Kenya?

Do you build SEO-friendly websites?

What type of websites do you design?

Can you redesign or improve an existing website?

Do you work with clients outside Kenya?

How long does it take to design a website?

Ready to Engineer Your High-Speed Website?

Pages

Tools

Quick Links