/* ==========================================================================
GROWNIX DIGITAL — Premium Agency (Light Theme, Yellow + Cream + Navy)
Inspiration: Digital Gravity (digitalgravity.ae) — premium agency feel
========================================================================== */
:root {
/* Pure White + Near-black text + Light Green accent */
--bg: #FFFFFF;
--bg-soft: #FAFAFA;
--bg-warm: #F5F5F5;
--surface: #FFFFFF;
--surface-2: #F0FDF4;
--ink: #111111; /* near-black — primary text */
--ink-2: #4B4B4B;
--ink-3: #8E8E8E;
--line: #E5E5E5;
--line-2: #D4D4D4;
--accent: #4ADE80; /* light green — accent / CTAs */
--accent-2: #22C55E; /* deeper hover green */
--accent-soft: #DCFCE7;
--accent-hover: #16A34A;
--pk-green: #16A34A;
--success: #16A34A;
--max-w: 1320px;
--radius: 16px;
--radius-sm: 10px;
--radius-lg: 28px;
--shadow-sm: 0 2px 12px rgba(0, 0, 0, 0.06);
--shadow: 0 12px 40px -10px rgba(0, 0, 0, 0.12);
--shadow-yellow: 0 14px 40px -8px rgba(74, 222, 128, 0.40);
--shadow-lg: 0 30px 80px -20px rgba(0, 0, 0, 0.20);
--t: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
/* RESET */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
background: var(--bg);
color: var(--ink);
line-height: 1.6;
font-size: 16px;
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; transition: color var(--t); }
a:hover { color: var(--accent-hover); }
button { font: inherit; cursor: pointer; border: 0; background: 0; color: inherit; }
ul, ol { list-style: none; }
::selection { background: var(--accent); color: var(--ink); }
/* CONTAINER */
.container { width: 100%; max-width: var(--max-w); margin: 0 auto; padding: 0 32px; }
/* TYPOGRAPHY — Premium scale */
h1, h2, h3, h4, h5, h6 {
font-family: 'Inter', sans-serif;
font-weight: 800;
line-height: 1.05;
letter-spacing: -0.035em;
color: var(--ink);
}
h1 { font-size: clamp(2.75rem, 6vw, 5.5rem); font-weight: 900; }
h2 { font-size: clamp(2rem, 4.5vw, 3.75rem); font-weight: 800; }
h3 { font-size: clamp(1.4rem, 2.6vw, 2rem); font-weight: 700; }
h4 { font-size: 1.25rem; font-weight: 700; }
.text-accent { color: var(--accent-2); }
.text-pk { color: var(--pk-green); }
.text-muted { color: var(--ink-2); }
.text-center { text-align: center; }
/* BUTTONS — Pill-style, premium */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 10px;
padding: 18px 32px;
font-weight: 700; font-size: 0.95rem;
border-radius: 100px;
transition: all var(--t);
white-space: nowrap; line-height: 1;
cursor: pointer; border: 2px solid transparent;
letter-spacing: -0.01em;
}
.btn-primary {
background: var(--ink);
color: var(--accent);
box-shadow: 0 8px 24px -8px rgba(17, 17, 17, 0.4);
}
.btn-primary:hover {
background: var(--accent);
color: var(--ink);
transform: translateY(-2px);
box-shadow: var(--shadow-yellow);
}
.btn-yellow {
background: var(--accent);
color: var(--ink);
box-shadow: var(--shadow-yellow);
}
.btn-yellow:hover {
background: var(--accent-2);
color: var(--ink);
transform: translateY(-2px);
}
.btn-outline {
background: transparent;
color: var(--ink);
border-color: var(--line-2);
}
.btn-outline:hover {
border-color: var(--ink);
background: var(--ink);
color: var(--accent);
}
.btn-arrow svg {
width: 16px; height: 16px;
transition: transform var(--t);
}
.btn:hover .btn-arrow svg { transform: translateX(4px); }
.btn-lg { padding: 22px 40px; font-size: 1rem; }
/* AREAS WE SERVE — Card grid */
.areas-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 14px;
}
.areas-region-card {
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 22px 22px;
transition: all var(--t);
}
.areas-region-card:hover { border-color: var(--accent); box-shadow: var(--shadow-sm); }
.areas-region-header {
display: flex; align-items: center; justify-content: space-between;
padding-bottom: 14px;
margin-bottom: 14px;
border-bottom: 1px solid var(--line);
}
.region-name {
font-size: 0.95rem;
font-weight: 800;
color: var(--ink);
letter-spacing: -0.01em;
}
.region-count {
font-size: 0.7rem;
font-weight: 700;
color: var(--accent-2);
background: var(--accent-soft);
padding: 4px 10px;
border-radius: 100px;
letter-spacing: 0.04em;
}
.areas-pills {
display: flex; flex-wrap: wrap; gap: 8px;
}
.area-pill {
padding: 7px 14px;
background: var(--bg-soft);
border: 1px solid var(--line);
border-radius: 100px;
font-size: 0.85rem;
font-weight: 600;
color: var(--ink-2);
transition: all var(--t);
cursor: pointer;
}
.area-pill:hover, .area-pill.active {
background: var(--ink);
color: var(--accent);
border-color: var(--ink);
}
.area-pill.active { background: var(--accent); color: var(--ink); border-color: var(--accent); }
/* PAKISTAN STRIP — Top bar (solid green with flag SVG) */
.pk-strip {
background: linear-gradient(90deg, #01411C 0%, #016B30 100%);
color: rgba(255, 255, 255, 0.95);
font-size: 0.88rem;
position: fixed;
top: 0; left: 0; right: 0;
z-index: 1001;
overflow: hidden;
transition: transform var(--t);
border-bottom: 2px solid var(--accent);
}
.pk-strip-inner {
display: flex; align-items: center; justify-content: space-between;
padding: 12px 0;
font-weight: 500;
flex-wrap: wrap;
gap: 14px;
}
.pk-strip-left {
display: inline-flex; align-items: center; gap: 14px;
font-weight: 500;
}
.pk-flag-svg {
width: 36px; height: 24px;
border-radius: 3px;
flex-shrink: 0;
box-shadow: 0 2px 6px rgba(0,0,0,0.4);
border: 1px solid rgba(255,255,255,0.15);
}
.pk-strip-right {
display: inline-flex; align-items: center; gap: 16px;
color: rgba(255, 255, 255, 0.9);
}
.pk-strip-right a {
display: inline-flex; align-items: center; gap: 6px;
color: rgba(255, 255, 255, 0.92);
font-weight: 600;
transition: color var(--t);
}
.pk-strip-right a:hover { color: var(--accent); }
.pk-strip-right a svg { width: 13px; height: 13px; color: var(--accent); }
.pk-strip-divider {
width: 1px; height: 14px;
background: rgba(255, 255, 255, 0.2);
}
/* HEADER */
/* ==========================================================================
PREMIUM HEADER — glass-morphism, animated nav, polished dropdown
========================================================================== */
.header {
position: fixed; top: 48px; left: 0; right: 0; z-index: 1000;
background: rgba(250, 247, 240, 0.82);
backdrop-filter: saturate(180%) blur(20px);
-webkit-backdrop-filter: saturate(180%) blur(20px);
border-bottom: 1px solid rgba(74, 222, 128, 0.10);
transition: top 0.35s cubic-bezier(0.4, 0, 0.2, 1), background 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.header::before {
content: ''; position: absolute; inset: 0; pointer-events: none;
background: linear-gradient(180deg, rgba(74,222,128,0.04) 0%, transparent 100%);
opacity: 0; transition: opacity 0.4s ease;
}
.header.scrolled {
top: 0;
background: rgba(255, 253, 248, 0.94);
border-bottom-color: rgba(17,17,17,0.06);
box-shadow: 0 12px 36px -14px rgba(17,17,17,0.14), 0 2px 8px -2px rgba(17,17,17,0.06);
}
.header.scrolled::before { opacity: 1; }
.header-inner {
display: flex; align-items: center; justify-content: space-between;
padding: 14px 32px;
max-width: var(--max-w);
margin: 0 auto;
gap: 24px;
position: relative;
}
.logo {
display: inline-flex; align-items: center;
text-decoration: none;
line-height: 1;
}
.logo img {
height: 52px; width: auto;
display: block;
transition: transform 0.3s ease, filter 0.3s ease;
}
.logo:hover img { transform: scale(1.04); filter: drop-shadow(0 4px 12px rgba(74,222,128,0.30)); }
.logo-mark, .logo-flag, .logo .dot { display: none; }
/* NAV */
.nav { display: flex; align-items: center; gap: 14px; }
.nav-list { display: flex; align-items: center; gap: 2px; }
.nav-item { position: relative; }
.nav-link {
display: inline-flex; align-items: center; gap: 6px;
padding: 10px 18px;
font-size: 0.94rem; font-weight: 700;
color: var(--ink);
border-radius: 999px;
transition: color 0.25s ease, background 0.3s ease, transform 0.2s ease;
position: relative;
letter-spacing: -0.005em;
overflow: hidden;
}
.nav-link::before {
content: ''; position: absolute; inset: 0;
border-radius: 999px;
background: linear-gradient(135deg, var(--accent) 0%, #86EFAC 100%);
transform: scale(0.8);
opacity: 0;
transition: opacity 0.25s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
z-index: -1;
}
.nav-link > * { position: relative; }
.nav-link:hover, .nav-link:focus-visible {
color: var(--ink);
transform: translateY(-1px);
}
.nav-link:hover::before, .nav-link.active::before {
opacity: 1;
transform: scale(1);
}
.nav-link.active {
color: var(--ink);
box-shadow: 0 8px 18px -6px rgba(74,222,128,0.55);
}
.nav-link svg { width: 11px; height: 11px; transition: transform 0.3s ease; }
.nav-item:hover .nav-link svg { transform: rotate(180deg); }
/* MEGA-MENU DROPDOWN — premium */
.dropdown {
position: absolute; top: 100%; left: 0;
margin-top: 12px;
background: #ffffff;
border: 1px solid rgba(17,17,17,0.06);
border-radius: 18px;
padding: 14px;
min-width: 360px;
opacity: 0; pointer-events: none;
transform: translateY(-12px) scale(0.97);
transform-origin: top center;
transition: opacity 0.25s ease, transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow:
0 32px 64px -16px rgba(17,17,17,0.22),
0 12px 24px -8px rgba(17,17,17,0.10),
0 0 0 1px rgba(74,222,128,0.06);
}
.dropdown::before {
content: ''; position: absolute;
top: -14px; left: 0; right: 0; height: 14px;
}
.has-dropdown:hover .dropdown,
.has-dropdown:focus-within .dropdown { opacity: 1; pointer-events: auto; transform: translateY(0) scale(1); }
.nav-item:hover .dropdown { opacity: 1; pointer-events: auto; transform: translateY(0) scale(1); }
.dropdown a {
display: flex; align-items: center; gap: 14px;
padding: 12px 14px;
border-radius: 12px;
transition: background 0.2s ease, transform 0.2s ease;
position: relative;
}
.dropdown a:hover {
background: linear-gradient(135deg, rgba(74,222,128,0.12) 0%, rgba(74,222,128,0.04) 100%);
}
.dropdown a::after {
content: ''; position: absolute;
right: 14px; top: 50%;
transform: translateY(-50%) translateX(-8px);
width: 14px; height: 14px;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat; background-size: contain; background-position: center;
opacity: 0;
transition: opacity 0.25s ease, transform 0.25s ease;
}
.dropdown a:hover::after { opacity: 1; transform: translateY(-50%) translateX(0); }
.dropdown a .icon {
width: 44px; height: 44px;
flex-shrink: 0;
background: linear-gradient(135deg, rgba(74,222,128,0.15) 0%, rgba(74,222,128,0.04) 100%);
color: var(--ink);
border-radius: 11px;
display: grid; place-items: center;
transition: background 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.dropdown a:hover .icon {
background: linear-gradient(135deg, var(--accent) 0%, #86EFAC 100%);
transform: scale(1.06) rotate(-4deg);
box-shadow: 0 8px 18px -4px rgba(74,222,128,0.55);
}
.dropdown a .icon svg { width: 21px; height: 21px; transition: transform 0.25s ease; }
.dropdown a strong { display: block; color: var(--ink); font-weight: 700; font-size: 0.94rem; margin-bottom: 2px; letter-spacing: -0.01em; }
.dropdown a span { font-size: 0.78rem; color: var(--ink-2); display: block; line-height: 1.4; }
/* HEADER CTA + CONTACT */
.header-cta-row { display: flex; align-items: center; gap: 10px; }
.contact-icon-btn {
width: 42px; height: 42px;
display: grid; place-items: center;
background: rgba(255,255,255,0.55);
border: 1px solid rgba(17,17,17,0.08);
border-radius: 11px;
color: var(--ink);
transition: all 0.25s ease;
backdrop-filter: blur(10px);
}
.contact-icon-btn:hover {
background: var(--accent);
border-color: var(--accent);
color: var(--ink);
transform: translateY(-2px);
box-shadow: 0 10px 22px -6px rgba(74,222,128,0.55);
}
.contact-icon-btn svg { width: 18px; height: 18px; transition: transform 0.25s ease; }
.contact-icon-btn:hover svg { transform: scale(1.1); }
/* Header primary CTA — gradient + shine sweep on hover */
.header .btn-primary {
background: linear-gradient(135deg, var(--ink) 0%, #2D2D2D 100%);
color: var(--accent);
padding: 12px 22px;
border-radius: 11px;
font-weight: 800;
font-size: 0.92rem;
position: relative;
overflow: hidden;
box-shadow: 0 10px 24px -8px rgba(17, 17, 17, 0.45);
transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.3s ease, color 0.25s ease;
border: 0;
}
.header .btn-primary::before {
content: ''; position: absolute;
top: 0; left: -100%;
width: 60%; height: 100%;
background: linear-gradient(90deg, transparent 0%, rgba(74,222,128,0.45) 50%, transparent 100%);
transform: skewX(-22deg);
transition: left 0.7s cubic-bezier(0.25, 1, 0.5, 1);
}
.header .btn-primary:hover {
background: linear-gradient(135deg, var(--accent) 0%, #86EFAC 100%);
color: var(--ink);
transform: translateY(-2px);
box-shadow: 0 16px 30px -8px rgba(74,222,128,0.55);
}
.header .btn-primary:hover::before { left: 130%; }
.header .btn-primary svg { transition: transform 0.25s ease; }
.header .btn-primary:hover svg { transform: translate(2px, -2px); }
.mobile-toggle {
display: none;
width: 48px; height: 48px;
align-items: center; justify-content: center;
background: var(--ink);
color: var(--accent);
border-radius: 12px;
}
.mobile-toggle svg { width: 22px; height: 22px; }
/* HERO — Bold premium */
.hero {
position: relative;
padding: 156px 0 40px;
overflow: hidden;
background:
radial-gradient(ellipse 80% 60% at 50% 0%, rgba(74, 222, 128, 0.25) 0%, transparent 60%),
radial-gradient(ellipse 60% 40% at 100% 100%, rgba(74, 222, 128, 0.12) 0%, transparent 50%),
linear-gradient(180deg, var(--bg-soft) 0%, var(--bg) 100%);
}
.hero::before {
content: ''; position: absolute; inset: 0;
background-image: radial-gradient(circle, rgba(17, 17, 17, 0.04) 1px, transparent 1px);
background-size: 24px 24px;
mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
-webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
pointer-events: none;
}
.hero-inner { position: relative; z-index: 2; max-width: 1100px; margin: 0 auto; text-align: center; }
.hero-eyebrow {
display: inline-flex; align-items: center; gap: 10px;
padding: 8px 18px;
background: var(--surface);
border: 1px solid var(--line);
border-radius: 100px;
font-size: 0.85rem; font-weight: 600;
color: var(--ink-2);
margin-bottom: 20px;
box-shadow: var(--shadow-sm);
}
.hero-eyebrow .pulse {
width: 8px; height: 8px;
background: var(--success);
border-radius: 50%;
position: relative;
}
.hero-eyebrow .pulse::after {
content: ''; position: absolute; inset: -4px;
border: 2px solid var(--success);
border-radius: 50%;
animation: pulse 2s infinite;
}
@keyframes pulse { 0% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(2); } }
.hero h1 {
margin-bottom: 20px;
letter-spacing: -0.045em;
}
.hero h1 .highlight {
position: relative;
white-space: nowrap;
}
.hero h1 .highlight::before {
content: ''; position: absolute;
left: -4%; right: -4%; bottom: 4%;
height: 32%;
background: var(--accent);
z-index: -1;
border-radius: 8px;
transform: rotate(-1deg);
}
.hero p.lead {
font-size: clamp(1rem, 1.4vw, 1.2rem);
color: var(--ink-2);
max-width: 760px;
margin: 0 auto 32px;
line-height: 1.55;
}
.hero-cta { display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; margin-bottom: 32px; }
.hero-rating {
display: inline-flex; align-items: center; gap: 16px;
padding: 14px 24px;
background: var(--surface);
border: 1px solid var(--line);
border-radius: 100px;
box-shadow: var(--shadow-sm);
}
.hero-rating-stars { display: flex; gap: 2px; }
.hero-rating-stars svg { width: 18px; height: 18px; color: var(--accent-2); }
.hero-rating-text { font-weight: 600; color: var(--ink); font-size: 0.92rem; }
.hero-rating-text strong { color: var(--ink); }
.hero-rating-divider { width: 1px; height: 24px; background: var(--line); }
.hero-rating-avatars { display: flex; }
.hero-rating-avatars img,
.hero-rating-avatars .avatar {
width: 32px; height: 32px;
border-radius: 50%;
border: 2px solid var(--surface);
margin-left: -8px;
display: grid; place-items: center;
font-weight: 700; font-size: 0.75rem;
color: var(--ink);
}
.hero-rating-avatars .avatar:first-child { margin-left: 0; background: linear-gradient(135deg, #4ADE80, #22C55E); }
.hero-rating-avatars .avatar:nth-child(2) { background: linear-gradient(135deg, #111111, #1A1A1A); color: var(--accent); }
.hero-rating-avatars .avatar:nth-child(3) { background: linear-gradient(135deg, #00583D, #16A34A); color: white; }
.hero-rating-avatars .avatar:nth-child(4) { background: linear-gradient(135deg, #86EFAC, #4ADE80); }
/* HERO HEADLINE — bold all-caps */
.hero-headline {
font-size: clamp(1.6rem, 3.4vw, 3rem);
font-weight: 700;
text-transform: uppercase;
letter-spacing: -0.015em;
line-height: 1.15;
margin-bottom: 20px;
max-width: 980px;
margin-left: auto;
margin-right: auto;
}
.hero-headline .highlight::before {
height: 22%;
bottom: 6%;
}
/* HERO FORM — Service selector + Get Free Quote button */
.hero-form {
display: flex;
align-items: stretch;
max-width: 680px;
margin: 0 auto 32px;
background: var(--surface);
border: 1.5px solid var(--line);
border-radius: 100px;
padding: 8px;
box-shadow: var(--shadow);
gap: 8px;
transition: all var(--t);
}
.hero-form:focus-within { border-color: var(--accent-2); box-shadow: 0 0 0 6px rgba(74, 222, 128, 0.15), var(--shadow); }
.hero-form-select {
flex: 1;
padding: 0 24px;
background: transparent;
border: 0;
outline: 0;
font-family: inherit;
font-size: 1.05rem;
font-weight: 600;
color: var(--ink);
appearance: none;
cursor: pointer;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%231F2A44'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 16px center;
background-size: 22px;
padding-right: 48px;
}
.hero-form-select option { color: var(--ink); }
.hero-form-btn {
padding: 18px 32px;
font-weight: 800;
letter-spacing: 0.04em;
border-radius: 100px;
white-space: nowrap;
font-size: 0.95rem;
}
/* CERT ROW — Static partner badges */
.cert-row {
display: flex; align-items: center; justify-content: center;
gap: 0;
flex-wrap: wrap;
margin-bottom: 24px;
padding: 20px 28px;
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
}
.cert-item {
display: flex; align-items: center; gap: 12px;
padding: 8px 24px;
}
.cert-logo {
width: 44px; height: 44px;
display: grid; place-items: center;
flex-shrink: 0;
color: var(--accent-2);
}
.cert-logo svg, .cert-logo img { width: 36px; height: 36px; object-fit: contain; }
.cert-text { display: flex; flex-direction: column; line-height: 1.15; text-align: left; }
.cert-text strong { font-size: 0.95rem; font-weight: 700; color: var(--ink); letter-spacing: -0.01em; }
.cert-text span { font-size: 0.78rem; color: var(--ink-3); font-weight: 500; }
.cert-divider {
width: 1px;
align-self: stretch;
background: var(--line);
margin: 4px 0;
}
.hero-footer-text {
max-width: 880px;
margin: 0 auto;
font-size: 0.98rem;
color: var(--ink-2);
line-height: 1.7;
}
.hero-footer-text strong { color: var(--ink); font-weight: 700; }
/* HERO MARQUEE — Logo strip */
.marquee {
position: relative;
margin-top: 80px;
padding: 32px 0;
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
overflow: hidden;
}
.marquee-label {
text-align: center;
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.2em;
color: var(--ink-3);
font-weight: 700;
margin-bottom: 24px;
}
.marquee-track {
display: flex;
align-items: center;
gap: 64px;
animation: scroll 30s linear infinite;
width: max-content;
}
.marquee-item {
display: flex; align-items: center; gap: 10px;
font-size: 1.1rem; font-weight: 700;
color: var(--ink-2);
white-space: nowrap;
}
.marquee-item svg { width: 32px; height: 32px; color: var(--ink); }
@keyframes scroll {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
/* SECTION */
.section {
padding: 48px 0;
position: relative;
}
@media (max-width: 768px) {
.section { padding: 32px 0; }
}
/* ============================================================
PLATFORM MOCKUP SECTION — Ads Manager, GBP, IG, A/B dashboards
============================================================ */
.platform-section {
background: linear-gradient(180deg, #F5F7FB 0%, #FFFFFF 100%);
padding: 28px 0; position: relative; overflow: hidden;
}
.platform-section.dark { background: var(--ink); color: #fff; }
.platform-section::before {
content: ""; position: absolute; top: -120px; right: -120px;
width: 320px; height: 320px;
background: radial-gradient(circle, rgba(74,222,128,0.18) 0%, transparent 70%);
z-index: 0; pointer-events: none;
}
.platform-wrap {
max-width: 1240px; margin: 0 auto; padding: 0 28px;
display: grid; grid-template-columns: 1.35fr 1fr; gap: 38px; align-items: start;
position: relative; z-index: 1;
}
/* Cap portrait screenshots so they do not dominate and create empty space in the text column */
.platform-wrap .real-shot img { max-height: 540px; width: auto; max-width: 100%; margin: 0 auto; display: block; }
.platform-wrap .ps-mockup { display: flex; flex-direction: column; }
.platform-wrap .ps-mockup .real-shot { flex: 1; display: flex; align-items: center; justify-content: center; background: #fff; }
.platform-wrap.flip > :first-child { order: 2; }
.ps-text .tag {
display: inline-block; font-size: 0.7rem; font-weight: 800; color: #166534;
text-transform: uppercase; letter-spacing: 0.12em;
background: rgba(74,222,128,0.20); padding: 6px 12px; border-radius: 4px; margin-bottom: 12px;
}
.platform-section.dark .ps-text .tag { color: var(--accent); background: rgba(74,222,128,0.12); }
.ps-text h3 {
font-size: clamp(1.5rem, 2.8vw, 2.05rem);
font-weight: 900; line-height: 1.15; letter-spacing: -0.02em;
color: var(--ink); margin-bottom: 14px;
}
.platform-section.dark .ps-text h3 { color: #fff; }
.ps-text h3 .yel { color: var(--accent); }
.ps-text p { color: var(--ink-2); line-height: 1.7; font-size: 0.96rem; margin-bottom: 12px; }
.platform-section.dark .ps-text p { color: rgba(255,255,255,0.78); }
.ps-text ul { list-style: none; padding: 0; margin: 8px 0 0; }
.ps-text ul li {
position: relative; padding-left: 22px; margin-bottom: 8px;
font-size: 0.9rem; color: var(--ink); font-weight: 600;
}
.ps-text ul li::before {
content: ""; position: absolute; left: 0; top: 6px;
width: 14px; height: 14px; border-radius: 4px;
background: var(--accent);
box-shadow: inset 0 0 0 2px var(--ink);
}
.platform-section.dark .ps-text ul li { color: rgba(255,255,255,0.92); }
.ps-mockup {
background: #fff; border-radius: 14px;
box-shadow: 0 40px 90px -30px rgba(17,17,17,0.45), 0 14px 32px rgba(17,17,17,0.10);
overflow: hidden; border: 1px solid rgba(0,0,0,0.06);
transform: perspective(1200px) rotateY(-2deg) rotateX(1deg);
transition: transform 0.4s ease;
}
.ps-mockup:hover { transform: perspective(1200px) rotateY(0deg) rotateX(0deg); }
.ps-mockup.no-tilt { transform: none; }
.ps-browser-bar {
background: #ECEEF1; padding: 10px 14px;
display: flex; align-items: center; gap: 7px;
border-bottom: 1px solid #D8DBE0;
}
.ps-dot { width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0; }
.ps-dot.r { background: #FF5F57; }
.ps-dot.y { background: #FEBC2E; }
.ps-dot.g { background: #28C840; }
.ps-url {
flex: 1; background: #fff; border-radius: 6px;
padding: 6px 14px; font-size: 0.72rem; color: #6B7280;
font-weight: 500; margin-left: 12px;
display: flex; align-items: center; gap: 7px;
font-family: 'SF Mono', Menlo, monospace;
white-space: nowrap; overflow: hidden;
}
.ps-url svg { width: 10px; height: 10px; flex-shrink: 0; color: #16A34A; }
/* ============================================================
GSC RESULTS SHOWCASE — real Search Console screenshots
============================================================ */
.gsc-section {
background: linear-gradient(180deg, #0F0F0F 0%, var(--ink) 100%);
color: #fff; padding: 40px 0; position: relative; overflow: hidden;
}
.gsc-section::before {
content: ''; position: absolute; top: -120px; right: -120px;
width: 360px; height: 360px;
background: radial-gradient(circle, rgba(74,222,128,0.18) 0%, transparent 70%);
z-index: 0; pointer-events: none;
}
.gsc-section::after {
content: ''; position: absolute; bottom: -120px; left: -120px;
width: 360px; height: 360px;
background: radial-gradient(circle, rgba(43,58,95,0.50) 0%, transparent 70%);
z-index: 0; pointer-events: none;
}
.gsc-section > .seo-container,
.gsc-section > .container { position: relative; z-index: 1; }
.gsc-head { text-align: center; max-width: 760px; margin: 0 auto 22px; }
.gsc-head .tag {
display: inline-block; font-size: 0.7rem; font-weight: 800; color: var(--accent);
text-transform: uppercase; letter-spacing: 0.12em;
background: rgba(74,222,128,0.12); padding: 6px 14px; border-radius: 999px;
margin-bottom: 14px;
border: 1px solid rgba(74,222,128,0.30);
}
.gsc-head h2 {
font-size: clamp(1.6rem, 3.4vw, 2.4rem);
font-weight: 900; color: #fff; letter-spacing: -0.02em; line-height: 1.15;
margin-bottom: 12px;
}
.gsc-head h2 .yel { color: var(--accent); }
.gsc-head p { color: rgba(255,255,255,0.72); font-size: 0.96rem; line-height: 1.6; }
.gsc-feature, .gsc-card {
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.10);
border-radius: 14px;
overflow: hidden;
box-shadow: 0 30px 70px -20px rgba(0,0,0,0.55);
transition: transform 0.3s ease, border-color 0.3s ease;
}
.gsc-feature:hover, .gsc-card:hover {
border-color: rgba(74,222,128,0.30);
transform: translateY(-3px);
}
.gsc-feature { margin-bottom: 22px; }
.gsc-card-top {
padding: 13px 18px;
display: flex; align-items: center; justify-content: space-between;
border-bottom: 1px solid rgba(255,255,255,0.08);
background: rgba(255,255,255,0.025);
flex-wrap: wrap; gap: 10px;
}
.gsc-card-top .label {
font-size: 0.74rem; font-weight: 800; color: var(--accent);
text-transform: uppercase; letter-spacing: 0.06em;
display: flex; align-items: center; gap: 8px;
}
.gsc-card-top .label svg { width: 14px; height: 14px; }
.gsc-card-top .badge {
font-size: 0.6rem; font-weight: 800; color: rgba(255,255,255,0.65);
background: rgba(255,255,255,0.08); padding: 4px 10px; border-radius: 999px;
text-transform: uppercase; letter-spacing: 0.08em;
display: flex; align-items: center; gap: 6px;
}
.gsc-card-top .badge .d {
width: 6px; height: 6px; border-radius: 50%; background: #22C55E;
box-shadow: 0 0 6px rgba(34,197,94,0.6);
}
.gsc-card .real-shot, .gsc-feature .real-shot {
position: relative; background: #fff; min-height: 0; overflow: hidden;
}
.gsc-card .real-shot { aspect-ratio: 16 / 5; }
.gsc-card .real-shot img, .gsc-feature .real-shot img {
display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center;
}
.gsc-feature .real-shot img { height: auto; object-fit: contain; }
.gsc-card-foot {
padding: 16px 18px;
display: grid; gap: 14px;
grid-template-columns: repeat(3, 1fr);
border-top: 1px solid rgba(255,255,255,0.08);
background: rgba(255,255,255,0.02);
}
.gsc-feature .gsc-card-foot { grid-template-columns: repeat(4, 1fr); }
.gsc-metric { display: flex; flex-direction: column; gap: 3px; }
.gsc-metric strong {
font-size: 1.4rem; font-weight: 900; color: var(--accent);
letter-spacing: -0.02em; line-height: 1;
}
.gsc-metric span {
font-size: 0.6rem; color: rgba(255,255,255,0.6); font-weight: 700;
text-transform: uppercase; letter-spacing: 0.06em; margin-top: 3px;
}
.gsc-grid {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
}
/* 2-column featured grid (for Google Ads page with 2 hero stories) */
.gsc-feature-grid {
display: grid; grid-template-columns: 1fr 1fr; gap: 22px;
margin-bottom: 22px;
}
.gsc-feature-grid .gsc-feature { margin-bottom: 0; }
.gsc-feature-grid .gsc-feature .gsc-card-foot {
grid-template-columns: repeat(2, 1fr); gap: 12px;
}
.gsc-feature-grid .gsc-feature .gsc-metric strong { font-size: 1.25rem; }
.gsc-grid .gsc-card-foot { padding: 12px 14px; gap: 10px; }
.gsc-grid .gsc-metric strong { font-size: 1.15rem; }
.gsc-grid .gsc-metric span { font-size: 0.56rem; }
.gsc-grid .gsc-card-top { padding: 11px 14px; }
.gsc-grid .gsc-card-top .label { font-size: 0.68rem; }
.gsc-grid .gsc-card-top .badge { font-size: 0.56rem; padding: 3px 8px; }
.gsc-priv {
text-align: center; font-size: 0.74rem; color: rgba(255,255,255,0.45);
margin-top: 22px; font-style: italic;
}
/* HOMEPAGE compact horizontal showcase */
.gsc-home {
display: grid; grid-template-columns: 0.85fr 1.3fr; gap: 30px; align-items: center;
background: linear-gradient(135deg, var(--ink) 0%, #0F0F0F 100%);
color: #fff; padding: 28px 32px; border-radius: 16px;
position: relative; overflow: hidden;
box-shadow: 0 40px 90px -30px rgba(0,0,0,0.50);
}
.gsc-home.flip { grid-template-columns: 1.3fr 0.85fr; }
.gsc-home.flip::before { right: auto; left: -100px; top: -100px; }
.gsc-home.flip .gsc-home-shot .gsc-frame { transform: perspective(1200px) rotateY(3deg) rotateX(2deg); }
.gsc-home.flip .gsc-home-shot:hover .gsc-frame { transform: perspective(1200px) rotateY(0deg) rotateX(0deg); }
.gsc-home::before {
content: ''; position: absolute; top: -100px; right: -100px;
width: 340px; height: 340px;
background: radial-gradient(circle, rgba(74,222,128,0.18) 0%, transparent 65%);
z-index: 0; pointer-events: none;
}
.gsc-home-text { position: relative; z-index: 1; }
.gsc-home-text .tag {
display: inline-block; font-size: 0.66rem; font-weight: 800; color: var(--accent);
text-transform: uppercase; letter-spacing: 0.12em;
background: rgba(74,222,128,0.12); padding: 5px 12px; border-radius: 999px;
border: 1px solid rgba(74,222,128,0.30); margin-bottom: 12px;
}
.gsc-home-text h2 {
font-size: clamp(1.5rem, 2.8vw, 2.1rem);
color: #fff; font-weight: 900; letter-spacing: -0.02em; line-height: 1.18;
margin-bottom: 14px;
}
.gsc-home-text h2 .yel { color: var(--accent); }
.gsc-home-text p {
color: rgba(255,255,255,0.78); line-height: 1.65;
font-size: 0.94rem; margin-bottom: 18px;
}
.gsc-home-text p strong { color: var(--accent); font-weight: 800; }
.gsc-home-text .gsc-cta {
display: inline-flex; align-items: center; gap: 8px;
background: var(--accent); color: var(--ink);
padding: 12px 22px; border-radius: 10px;
font-weight: 800; font-size: 0.9rem;
text-decoration: none;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.gsc-home-text .gsc-cta:hover {
transform: translateY(-2px);
box-shadow: 0 14px 30px rgba(74,222,128,0.40);
}
.gsc-home-shot { position: relative; z-index: 1; }
.gsc-home-shot .gsc-frame {
background: #fff; border-radius: 12px; overflow: hidden;
box-shadow: 0 30px 70px -20px rgba(0,0,0,0.60);
transform: perspective(1200px) rotateY(-3deg) rotateX(2deg);
transition: transform 0.4s ease;
}
.gsc-home-shot:hover .gsc-frame {
transform: perspective(1200px) rotateY(0deg) rotateX(0deg);
}
.gsc-home-shot .gsc-frame-top {
background: #ECEEF1; padding: 9px 12px;
display: flex; align-items: center; gap: 7px;
border-bottom: 1px solid #D8DBE0;
}
.gsc-home-shot .gsc-frame-top .d {
width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;
}
.gsc-home-shot .gsc-frame-top .r { background: #FF5F57; }
.gsc-home-shot .gsc-frame-top .y { background: #FEBC2E; }
.gsc-home-shot .gsc-frame-top .g { background: #28C840; }
.gsc-home-shot .gsc-frame-top .url {
flex: 1; background: #fff; border-radius: 5px;
padding: 5px 12px; font-size: 0.66rem; color: #6B7280;
font-family: 'SF Mono', Menlo, monospace; margin-left: 8px;
}
.gsc-home-mini-stats {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
padding-top: 14px;
}
.gsc-home-mini-stats .m {
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.10);
border-radius: 10px; padding: 10px 12px;
display: flex; flex-direction: column; gap: 2px;
}
.gsc-home-mini-stats .m strong {
font-size: 1.05rem; font-weight: 900; color: var(--accent);
letter-spacing: -0.01em; line-height: 1;
}
.gsc-home-mini-stats .m span {
font-size: 0.58rem; color: rgba(255,255,255,0.6); font-weight: 700;
text-transform: uppercase; letter-spacing: 0.06em; margin-top: 3px;
}
@media (max-width: 1100px) {
.gsc-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
.gsc-feature-grid { grid-template-columns: 1fr; gap: 18px; }
}
@media (max-width: 700px) {
.gsc-grid { grid-template-columns: 1fr; gap: 18px; }
.gsc-feature .gsc-card-foot, .gsc-card-foot { grid-template-columns: repeat(2, 1fr); }
.gsc-home { grid-template-columns: 1fr; gap: 26px; padding: 28px 22px; }
.gsc-home-shot .gsc-frame { transform: none; }
.gsc-home-mini-stats { grid-template-columns: repeat(3, 1fr); }
}
/* ============================================================
BLURRED CLIENT-DATA SCREENSHOT — light blur, dashboard stays visible
Numbers/text become fuzzy but the platform UI is clearly recognizable
============================================================ */
.real-shot.blurred { position: relative; overflow: hidden; border-radius: 12px; background: #F0F2F5; }
/* Mask to hide the live-chat widget overlay visible in the Ahrefs source screenshot. */
.shot-mask { position: absolute; z-index: 3; background: #FFFFFF; border: 1px solid rgba(0,0,0,0.06); border-radius: 6px; pointer-events: none; }
.shot-mask-tr { top: 8%; right: 6%; width: 22%; height: 38%; box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
.real-shot.blurred img {
display: block; width: 100%; height: auto;
/* CSS blur removed — sensitive client data is already masked in the source image files.
The privacy-label chip + watermark pattern remain as the privacy signal. */
}
.real-shot.blurred::before {
content: ''; position: absolute; inset: 0;
background: linear-gradient(180deg,
rgba(255,255,255,0) 0%,
rgba(255,255,255,0) 70%,
rgba(17,17,17,0.06) 100%);
z-index: 2; pointer-events: none;
}
.real-shot.blurred .privacy-label {
position: absolute;
bottom: 12px; right: 12px;
z-index: 4;
background: rgba(17,17,17,0.92);
color: #fff;
padding: 7px 12px 7px 10px;
border-radius: 7px;
font-size: 0.62rem; font-weight: 800;
text-transform: uppercase; letter-spacing: 0.08em;
box-shadow: 0 10px 24px rgba(0,0,0,0.30);
display: flex; align-items: center; gap: 7px;
white-space: nowrap;
font-family: 'Inter', sans-serif;
backdrop-filter: blur(10px);
}
.real-shot.blurred .privacy-label svg {
width: 11px; height: 11px; color: var(--accent); flex-shrink: 0;
}
.real-shot.blurred .platform-chip {
position: absolute; top: 12px; left: 12px;
z-index: 4;
background: rgba(17,17,17,0.92);
color: #fff;
padding: 6px 12px; border-radius: 7px;
font-size: 0.62rem; font-weight: 800;
text-transform: uppercase; letter-spacing: 0.08em;
display: flex; align-items: center; gap: 7px;
backdrop-filter: blur(10px);
font-family: 'Inter', sans-serif;
}
.real-shot.blurred .platform-chip .pdot {
width: 6px; height: 6px; border-radius: 50%;
background: #22C55E;
box-shadow: 0 0 8px rgba(34,197,94,0.7);
}
/* ============================================================
TOOLS & REPORTING STACK — grid of platforms we work in
============================================================ */
.toolstack-section {
background: linear-gradient(180deg, #FFFFFF 0%, #F5F5F5 100%);
padding: 36px 0; position: relative; overflow: hidden;
}
.toolstack-section::before {
content: ''; position: absolute; top: -100px; right: -100px;
width: 320px; height: 320px;
background: radial-gradient(circle, rgba(74,222,128,0.18) 0%, transparent 65%);
z-index: 0; pointer-events: none;
}
.toolstack-section .container, .toolstack-section .seo-container,
.toolstack-section .ga-container, .toolstack-section .ma-container { position: relative; z-index: 1; }
.toolstack-head { text-align: center; max-width: 720px; margin: 0 auto 22px; }
.toolstack-head .tag {
display: inline-block; font-size: 0.7rem; font-weight: 800; color: #166534;
text-transform: uppercase; letter-spacing: 0.12em;
background: rgba(74,222,128,0.20); padding: 6px 14px; border-radius: 4px;
margin-bottom: 14px;
}
.toolstack-head h2 {
font-size: clamp(1.6rem, 3.2vw, 2.3rem);
font-weight: 900; color: var(--ink); letter-spacing: -0.02em; line-height: 1.15;
margin-bottom: 12px;
}
.toolstack-head h2 .yel { color: var(--accent); }
.toolstack-head p { color: var(--ink-2); font-size: 0.96rem; line-height: 1.65; }
.toolstack-grid {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
}
.toolstack-card {
background: #fff; border-radius: 14px; overflow: hidden;
border: 1px solid var(--line);
box-shadow: 0 22px 50px -20px rgba(17,17,17,0.25), 0 4px 10px rgba(17,17,17,0.04);
transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
display: flex; flex-direction: column;
}
.toolstack-card:hover {
transform: translateY(-4px);
box-shadow: 0 30px 70px -20px rgba(17,17,17,0.35);
border-color: rgba(74,222,128,0.40);
}
.toolstack-card .tc-top {
padding: 12px 16px;
display: flex; align-items: center; gap: 10px;
border-bottom: 1px solid var(--line);
background: #FAFBFC;
}
.toolstack-card .tc-icon {
width: 34px; height: 34px;
border-radius: 9px;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
color: #fff;
}
.toolstack-card .tc-icon svg { width: 18px; height: 18px; flex-shrink: 0; }
/* Per-tool brand colors */
.tc-icon.ahrefs { background: linear-gradient(135deg, #FF6B35, #E85827); }
.tc-icon.semrush { background: linear-gradient(135deg, #FF642D, #F03C1F); }
.tc-icon.ga { background: linear-gradient(135deg, #F9AB00, #E37400); }
.tc-icon.looker { background: linear-gradient(135deg, #4285F4, #34A853); }
.tc-icon.adlib { background: linear-gradient(135deg, #0866FF, #0046C7); }
.tc-icon.meet { background: linear-gradient(135deg, #00832D, #00691E); }
.toolstack-card .tc-name {
font-size: 0.84rem; font-weight: 800; color: var(--ink); line-height: 1;
}
.toolstack-card .tc-tagline {
font-size: 0.62rem; color: var(--ink-3); font-weight: 700;
text-transform: uppercase; letter-spacing: 0.06em;
margin-top: 3px; line-height: 1;
}
.toolstack-card .tc-shot {
position: relative; flex: 1;
display: flex; align-items: stretch;
}
.toolstack-card .tc-shot .real-shot.blurred {
border-radius: 0;
width: 100%;
display: flex; align-items: center; justify-content: center;
background: #fff;
}
.toolstack-card .tc-shot .real-shot.blurred img {
width: 100%; height: auto;
max-height: 220px;
object-fit: contain;
object-position: center top;
}
.toolstack-card .tc-foot {
padding: 10px 16px;
background: #FAFBFC;
border-top: 1px solid var(--line);
display: flex; align-items: center; justify-content: space-between;
font-size: 0.66rem;
}
.toolstack-card .tc-foot .lbl { color: var(--ink-3); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
.toolstack-card .tc-foot .pill {
background: rgba(34,197,94,0.10); color: #16A34A;
padding: 3px 9px; border-radius: 999px;
font-weight: 800; font-size: 0.6rem;
display: flex; align-items: center; gap: 5px;
}
.toolstack-card .tc-foot .pill::before {
content: ''; width: 5px; height: 5px; border-radius: 50%;
background: #22C55E; box-shadow: 0 0 6px rgba(34,197,94,0.7);
}
/* ============================================================
TRUST BADGES (Google Partner + Meta Business Partner)
============================================================ */
.trust-badges-section {
padding: 22px 0; background: #fff;
}
.trust-badges-section .container { text-align: center; }
.trust-badges-section .tb-eyebrow {
font-size: 0.7rem; font-weight: 800; color: var(--ink-3);
text-transform: uppercase; letter-spacing: 0.18em;
margin-bottom: 18px;
}
.trust-badges {
display: flex; gap: 18px;
align-items: center; justify-content: center;
flex-wrap: wrap;
}
.trust-badge {
display: flex; align-items: center; gap: 14px;
background: #fff;
border: 1px solid var(--line);
border-radius: 14px;
padding: 14px 22px 14px 14px;
box-shadow: 0 14px 30px -10px rgba(17,17,17,0.18);
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.trust-badge:hover {
transform: translateY(-3px);
box-shadow: 0 22px 40px -10px rgba(17,17,17,0.25);
}
.trust-badge .badge-img {
width: 58px; height: 58px;
flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
background: #fff;
border-radius: 10px;
overflow: hidden;
}
.trust-badge .badge-img img,
.trust-badge .badge-img svg {
width: 100%; height: 100%;
object-fit: contain;
display: block;
}
.trust-badge .text {
display: flex; flex-direction: column; gap: 3px;
text-align: left;
}
.trust-badge .text strong {
font-size: 0.94rem; font-weight: 800; color: var(--ink); line-height: 1;
}
.trust-badge .text small {
font-size: 0.7rem; color: var(--ink-3); font-weight: 600;
letter-spacing: 0.02em;
}
@media (max-width: 1100px) {
.toolstack-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
.toolstack-grid { grid-template-columns: 1fr; }
.trust-badge { padding: 12px 16px 12px 12px; }
.trust-badge .text strong { font-size: 0.84rem; }
}
/* ============================================================
META ADS CAMPAIGN-NAME MASK — covers leftmost column on
Meta Ads Manager screenshots so client/campaign names stay private
============================================================ */
.real-shot.ma-shot { position: relative; }
.real-shot.ma-shot .ma-mask {
position: absolute;
left: 4.5%; top: 0; height: 100%; width: 23.5%;
background:
repeating-linear-gradient(
-10deg,
rgba(248,250,253,0.97) 0px,
rgba(248,250,253,0.97) 12px,
rgba(225,231,240,0.97) 12px,
rgba(225,231,240,0.97) 22px
);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
box-shadow: inset 0 0 0 1px rgba(17,17,17,0.08), 0 0 0 0.5px rgba(17,17,17,0.05);
display: flex; align-items: center; justify-content: center;
pointer-events: none;
z-index: 2;
}
.real-shot.ma-shot .ma-mask-label {
background: rgba(17,17,17,0.94);
color: var(--accent);
padding: 8px 14px;
border-radius: 999px;
font-size: 0.62rem; font-weight: 800;
text-transform: uppercase; letter-spacing: 0.10em;
display: flex; align-items: center; gap: 7px;
white-space: nowrap;
box-shadow: 0 10px 24px rgba(0,0,0,0.35);
font-family: 'Inter', sans-serif;
}
.real-shot.ma-shot .ma-mask-label svg {
width: 12px; height: 12px; flex-shrink: 0;
}
/* ============================================================
REAL SCREENSHOT + WATERMARK OVERLAY
============================================================ */
.real-shot {
position: relative; overflow: hidden;
background: #F0F2F5;
min-height: 240px;
}
.real-shot img {
display: block; width: 100%; height: auto;
position: relative; z-index: 1;
}
.real-shot::after {
content: ""; position: absolute; inset: 0;
background-image: url('../assets/watermark-pattern.svg');
background-size: cover; background-repeat: no-repeat;
pointer-events: none; z-index: 3;
}
.real-shot .gx-badge {
position: absolute; bottom: 12px; right: 12px; z-index: 4;
background: rgba(17,17,17,0.92);
color: #fff; padding: 7px 12px;
border-radius: 6px; font-size: 0.66rem; font-weight: 700;
letter-spacing: 0.08em; text-transform: uppercase;
display: flex; align-items: center; gap: 7px;
backdrop-filter: blur(6px);
font-family: 'Inter', sans-serif;
}
.real-shot .gx-badge .gx-dot {
width: 7px; height: 7px; border-radius: 50%;
background: var(--accent); flex-shrink: 0;
}
.real-shot.placeholder {
display: flex; flex-direction: column; align-items: center; justify-content: center;
padding: 60px 30px; text-align: center;
background: repeating-linear-gradient(45deg, #F0F2F5, #F0F2F5 10px, #E8EAED 10px, #E8EAED 20px);
min-height: 380px;
}
.real-shot.placeholder .ph-icon {
width: 56px; height: 56px;
background: var(--accent); border-radius: 14px;
display: flex; align-items: center; justify-content: center;
margin-bottom: 14px;
box-shadow: 0 10px 24px -8px rgba(74,222,128,0.55);
}
.real-shot.placeholder .ph-icon svg { width: 26px; height: 26px; color: var(--ink); }
.real-shot.placeholder .ph-title {
font-size: 0.96rem; font-weight: 800; color: var(--ink); margin-bottom: 6px;
}
.real-shot.placeholder .ph-sub {
font-size: 0.78rem; color: var(--ink-2); line-height: 1.5; max-width: 320px;
font-family: 'SF Mono', Menlo, monospace; background: rgba(255,255,255,0.6);
padding: 6px 12px; border-radius: 6px; margin-top: 4px;
}
/* META ADS MANAGER MOCKUP */
.mk-fb { font-family: 'Segoe UI', system-ui, sans-serif; }
.mk-fb-header { display: flex; align-items: center; padding: 14px 18px; border-bottom: 1px solid #E4E6EB; gap: 12px; }
.mk-fb-logo { width: 30px; height: 30px; border-radius: 8px; background: linear-gradient(135deg, #0866FF, #14B8FF); display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 900; font-size: 0.78rem; }
.mk-fb-header h6 { font-size: 0.94rem; font-weight: 700; color: #1c1e21; margin: 0; }
.mk-fb-header .sub { font-size: 0.72rem; color: #65676B; margin-top: 2px; }
.mk-fb-header .pill { margin-left: auto; background: #E7F3FF; color: #0866FF; padding: 5px 12px; border-radius: 6px; font-size: 0.72rem; font-weight: 700; }
.mk-fb-tabs { display: flex; gap: 0; padding: 0 18px; border-bottom: 1px solid #E4E6EB; background: #F0F2F5; }
.mk-fb-tab { padding: 11px 14px; font-size: 0.78rem; font-weight: 700; color: #65676B; border-bottom: 3px solid transparent; }
.mk-fb-tab.active { color: #0866FF; border-bottom-color: #0866FF; background: #fff; }
.mk-fb-tab .count { background: #E4E6EB; color: #65676B; padding: 1px 7px; border-radius: 10px; font-size: 0.66rem; margin-left: 5px; }
.mk-fb-thead { display: grid; grid-template-columns: 2.2fr 0.9fr 0.9fr 0.9fr 0.9fr 0.9fr; padding: 10px 18px; background: #F7F8FA; border-bottom: 1px solid #E4E6EB; font-size: 0.66rem; font-weight: 800; color: #65676B; text-transform: uppercase; letter-spacing: 0.05em; }
.mk-fb-thead .right { text-align: right; }
.mk-fb-row { display: grid; grid-template-columns: 2.2fr 0.9fr 0.9fr 0.9fr 0.9fr 0.9fr; padding: 12px 18px; border-bottom: 1px solid #F0F2F5; font-size: 0.82rem; align-items: center; }
.mk-fb-row:last-child { border-bottom: 0; }
.mk-fb-row .name { display: flex; align-items: center; gap: 9px; font-weight: 700; color: #050505; font-size: 0.82rem; }
.mk-fb-row .name .dot { width: 8px; height: 8px; border-radius: 50%; background: #31A24C; flex-shrink: 0; }
.mk-fb-row .name .label { display: flex; flex-direction: column; gap: 1px; }
.mk-fb-row .name .label small { font-size: 0.66rem; color: #65676B; font-weight: 500; }
.mk-fb-row .right { text-align: right; font-weight: 600; color: #050505; }
.mk-fb-row .right.up { color: #31A24C; }
.mk-fb-row .right.bold { font-weight: 800; }
.mk-fb-foot { display: grid; grid-template-columns: 2.2fr 0.9fr 0.9fr 0.9fr 0.9fr 0.9fr; padding: 12px 18px; background: #F0F2F5; font-size: 0.82rem; font-weight: 800; color: #050505; border-top: 1px solid #E4E6EB; }
.mk-fb-foot .right { text-align: right; }
/* GOOGLE BUSINESS PROFILE MOCKUP */
.mk-gbp { font-family: system-ui, sans-serif; }
.mk-gbp-head { padding: 14px 18px; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid #E8EAED; }
.mk-gbp-head .g { font-weight: 900; font-size: 1.05rem; }
.mk-gbp-head .g .b { color: #4285F4; } .mk-gbp-head .g .r { color: #EA4335; } .mk-gbp-head .g .y { color: #FBBC04; } .mk-gbp-head .g .gr { color: #34A853; }
.mk-gbp-head h6 { font-size: 0.94rem; font-weight: 600; color: #202124; margin: 0; }
.mk-gbp-head .sub { font-size: 0.72rem; color: #5F6368; }
.mk-gbp-head .pill { margin-left: auto; background: #E6F4EA; color: #137333; padding: 5px 12px; border-radius: 12px; font-size: 0.72rem; font-weight: 600; }
.mk-gbp-biz { padding: 16px 18px; display: flex; gap: 14px; align-items: center; border-bottom: 1px solid #E8EAED; }
.mk-gbp-biz .logo { width: 56px; height: 56px; border-radius: 8px; background: linear-gradient(135deg, var(--ink), #2D2D2D); display: flex; align-items: center; justify-content: center; color: var(--accent); font-weight: 900; font-size: 1.4rem; flex-shrink: 0; }
.mk-gbp-biz .nm { font-size: 1.05rem; font-weight: 700; color: #202124; }
.mk-gbp-biz .stars { display: flex; align-items: center; gap: 6px; margin-top: 4px; }
.mk-gbp-biz .stars .num { font-size: 0.84rem; color: #202124; font-weight: 600; }
.mk-gbp-biz .stars svg { width: 14px; height: 14px; color: #F9AB00; }
.mk-gbp-biz .stars .ct { font-size: 0.78rem; color: #1A73E8; font-weight: 500; }
.mk-gbp-biz .addr { font-size: 0.78rem; color: #5F6368; margin-top: 4px; }
.mk-gbp-insights { padding: 14px 18px; border-bottom: 1px solid #E8EAED; }
.mk-gbp-insights .ttl { font-size: 0.7rem; font-weight: 700; color: #5F6368; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 10px; }
.mk-gbp-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.mk-gbp-stat { background: #F8F9FA; border-radius: 8px; padding: 10px 12px; }
.mk-gbp-stat .v { font-size: 1.15rem; font-weight: 700; color: #202124; line-height: 1; letter-spacing: -0.01em; }
.mk-gbp-stat .l { font-size: 0.66rem; color: #5F6368; font-weight: 500; margin-top: 4px; }
.mk-gbp-stat .delta { font-size: 0.66rem; color: #137333; font-weight: 600; margin-top: 2px; }
.mk-gbp-reviews { padding: 14px 18px 16px; }
.mk-gbp-reviews .ttl { font-size: 0.7rem; font-weight: 700; color: #5F6368; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 10px; display: flex; align-items: center; justify-content: space-between; }
.mk-gbp-reviews .ttl span:last-child { color: #1A73E8; font-weight: 600; letter-spacing: 0; text-transform: none; font-size: 0.74rem; }
.mk-gbp-review { display: flex; gap: 10px; padding: 10px 0; border-bottom: 1px solid #F1F3F4; }
.mk-gbp-review:last-child { border-bottom: 0; padding-bottom: 0; }
.mk-gbp-review .av { width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 0.78rem; }
.mk-gbp-review .av.a1 { background: #4285F4; } .mk-gbp-review .av.a2 { background: #EA4335; } .mk-gbp-review .av.a3 { background: #34A853; }
.mk-gbp-review .body { flex: 1; min-width: 0; }
.mk-gbp-review .body .top { display: flex; align-items: center; gap: 8px; }
.mk-gbp-review .body .top .nm { font-size: 0.8rem; font-weight: 600; color: #202124; }
.mk-gbp-review .body .top .st { display: flex; gap: 1px; }
.mk-gbp-review .body .top .st svg { width: 11px; height: 11px; color: #F9AB00; }
.mk-gbp-review .body .top .dt { font-size: 0.66rem; color: #5F6368; margin-left: auto; }
.mk-gbp-review .body .txt { font-size: 0.78rem; color: #3C4043; line-height: 1.5; margin-top: 3px; }
.mk-gbp-review .body .reply { margin-top: 7px; padding: 6px 10px; background: #F1F3F4; border-radius: 6px; font-size: 0.72rem; color: #3C4043; line-height: 1.4; }
.mk-gbp-review .body .reply b { color: var(--ink); }
/* A/B TEST DASHBOARD MOCKUP */
.mk-ab { font-family: 'Inter', system-ui, sans-serif; }
.mk-ab-head { padding: 16px 20px; display: flex; align-items: center; gap: 14px; border-bottom: 1px solid #E5E7EB; }
.mk-ab-head h6 { font-size: 0.96rem; font-weight: 700; color: #111827; margin: 0; }
.mk-ab-head .sub { font-size: 0.74rem; color: #6B7280; margin-top: 2px; }
.mk-ab-head .winner-badge { margin-left: auto; background: #DCFCE7; color: #166534; padding: 6px 12px; border-radius: 999px; font-size: 0.72rem; font-weight: 700; display: flex; align-items: center; gap: 6px; }
.mk-ab-head .winner-badge svg { width: 12px; height: 12px; }
.mk-ab-stat-strip { display: grid; grid-template-columns: repeat(4, 1fr); padding: 14px 0; border-bottom: 1px solid #E5E7EB; background: #FAFAFA; }
.mk-ab-stat { padding: 0 16px; border-right: 1px solid #E5E7EB; }
.mk-ab-stat:last-child { border-right: 0; }
.mk-ab-stat .l { font-size: 0.66rem; font-weight: 700; color: #6B7280; text-transform: uppercase; letter-spacing: 0.06em; }
.mk-ab-stat .v { font-size: 1.4rem; font-weight: 800; color: #111827; letter-spacing: -0.02em; line-height: 1; margin-top: 6px; }
.mk-ab-stat .delta { font-size: 0.72rem; font-weight: 700; color: #16A34A; margin-top: 4px; }
.mk-ab-variants { padding: 18px 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.mk-ab-var { border: 2px solid #E5E7EB; border-radius: 10px; overflow: hidden; position: relative; }
.mk-ab-var.winner { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(74,222,128,0.15); }
.mk-ab-var .top { padding: 9px 12px; display: flex; align-items: center; justify-content: space-between; background: #F9FAFB; border-bottom: 1px solid #E5E7EB; font-size: 0.74rem; }
.mk-ab-var .top .lbl { font-weight: 800; color: #111827; display: flex; align-items: center; gap: 7px; }
.mk-ab-var .top .lbl .badge { background: #E5E7EB; color: #374151; padding: 1px 7px; border-radius: 4px; font-size: 0.66rem; font-weight: 700; }
.mk-ab-var.winner .top .lbl .badge { background: var(--accent); color: var(--ink); }
.mk-ab-var .top .conv { color: #16A34A; font-weight: 700; }
.mk-ab-var .preview { height: 110px; padding: 12px; background: #fff; display: flex; flex-direction: column; gap: 5px; justify-content: center; }
.mk-ab-var .preview .pl { height: 6px; background: #E5E7EB; border-radius: 3px; }
.mk-ab-var .preview .pl.s1 { width: 60%; } .mk-ab-var .preview .pl.s2 { width: 85%; } .mk-ab-var .preview .pl.s3 { width: 40%; }
.mk-ab-var .preview .pl.t { background: #111827; height: 9px; width: 70%; }
.mk-ab-var .preview .btn { margin-top: 8px; align-self: flex-start; padding: 6px 14px; border-radius: 5px; font-size: 0.7rem; font-weight: 700; }
.mk-ab-var.a .preview .btn { background: #E5E7EB; color: #6B7280; }
.mk-ab-var.b .preview .btn { background: var(--accent); color: var(--ink); }
.mk-ab-var .foot { padding: 9px 12px; background: #F9FAFB; border-top: 1px solid #E5E7EB; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mk-ab-var .foot .it .l { font-size: 0.62rem; color: #6B7280; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.mk-ab-var .foot .it .v { font-size: 0.86rem; color: #111827; font-weight: 800; }
/* INSTAGRAM POST MOCKUP */
.mk-ig { font-family: 'Inter', system-ui, sans-serif; }
.mk-ig-head { padding: 14px 18px; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid #DBDBDB; background: #fff; }
.mk-ig-head .av { width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(135deg, #833AB4, #E1306C, #FD1D1D, #FCB045); padding: 2px; }
.mk-ig-head .av-inner { width: 100%; height: 100%; border-radius: 50%; background: linear-gradient(135deg, var(--accent), #22C55E); display: flex; align-items: center; justify-content: center; color: var(--ink); font-weight: 900; font-size: 0.84rem; box-shadow: inset 0 0 0 2px #fff; }
.mk-ig-head .nm { font-size: 0.84rem; font-weight: 700; color: #262626; }
.mk-ig-head .sub { font-size: 0.7rem; color: #737373; margin-top: 1px; display: flex; align-items: center; gap: 5px; }
.mk-ig-head .badge { background: #EFEFEF; color: #262626; padding: 2px 8px; border-radius: 4px; font-size: 0.62rem; font-weight: 600; }
.mk-ig-post-wrap { padding: 0; }
.mk-ig-post { background: #fff; border-bottom: 1px solid #DBDBDB; padding-bottom: 10px; }
.mk-ig-post:last-child { border-bottom: 0; }
.mk-ig-post-head { display: flex; align-items: center; padding: 10px 14px; gap: 10px; }
.mk-ig-post-head .pa { width: 30px; height: 30px; border-radius: 50%; padding: 1.5px; background: linear-gradient(135deg, #833AB4, #E1306C, #FCB045); }
.mk-ig-post-head .pa-i { width: 100%; height: 100%; border-radius: 50%; background: var(--ink); display: flex; align-items: center; justify-content: center; font-size: 0.7rem; font-weight: 800; color: var(--accent); box-shadow: inset 0 0 0 2px #fff; }
.mk-ig-post-head .pn { font-size: 0.78rem; font-weight: 600; color: #262626; }
.mk-ig-post-head .pl { font-size: 0.66rem; color: #737373; margin-top: 1px; }
.mk-ig-img { height: 240px; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; color: #fff; }
.mk-ig-img.i1 { background: linear-gradient(135deg, #111111 0%, #2D2D2D 100%); }
.mk-ig-img.i1::before { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 160px; height: 160px; border-radius: 50%; background: radial-gradient(circle, rgba(74,222,128,0.85) 0%, transparent 70%); }
.mk-ig-img.i2 { background: linear-gradient(135deg, #4ADE80 0%, #86EFAC 60%, #DC2626 100%); }
.mk-ig-img .ig-lbl { position: relative; z-index: 1; text-align: center; padding: 0 24px; }
.mk-ig-img .ig-lbl .pre { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.85; margin-bottom: 6px; }
.mk-ig-img .ig-lbl .big { font-size: 1.5rem; font-weight: 900; line-height: 1.1; letter-spacing: -0.02em; }
.mk-ig-img .ig-lbl .big.yel { color: var(--accent); }
.mk-ig-img .ig-lbl .sub { font-size: 0.78rem; font-weight: 500; margin-top: 8px; opacity: 0.9; }
.mk-ig-img .ig-corner { position: absolute; top: 12px; right: 12px; background: rgba(0,0,0,0.55); color: #fff; padding: 4px 9px; border-radius: 4px; font-size: 0.64rem; font-weight: 700; }
.mk-ig-actions { padding: 10px 14px 4px; display: flex; gap: 14px; color: #262626; align-items: center; }
.mk-ig-actions .spacer { flex: 1; }
.mk-ig-actions svg { width: 22px; height: 22px; }
.mk-ig-meta { padding: 0 14px; font-size: 0.78rem; color: #262626; }
.mk-ig-meta .likes { font-weight: 700; margin-bottom: 4px; }
.mk-ig-meta .cap { line-height: 1.45; }
.mk-ig-meta .cap b { font-weight: 700; }
.mk-ig-meta .cap .ht { color: #00376B; }
.mk-ig-meta .cmt { color: #737373; margin-top: 4px; font-size: 0.72rem; }
@media (max-width: 900px) {
.platform-wrap { grid-template-columns: 1fr; gap: 26px; }
.platform-wrap.flip > :first-child { order: 0; }
.ps-mockup { transform: none; }
.mk-fb-thead, .mk-fb-row, .mk-fb-foot { grid-template-columns: 1.6fr 0.8fr 0.8fr 0.8fr; }
.mk-fb-thead > :nth-child(4), .mk-fb-thead > :nth-child(5),
.mk-fb-row > :nth-child(4), .mk-fb-row > :nth-child(5),
.mk-fb-foot > :nth-child(4), .mk-fb-foot > :nth-child(5) { display: none; }
.mk-gbp-grid { grid-template-columns: repeat(2, 1fr); }
}
/* ============================================================
"BEHIND THE WORK" team photo section — shared across service pages
============================================================ */
.team-section {
background: #fff;
padding: 36px 0;
position: relative; overflow: hidden;
}
.team-section.dark { background: var(--ink); color: #fff; }
.team-section.warm { background: #F5F5F5; }
.team-wrap {
max-width: 1200px; margin: 0 auto; padding: 0 28px;
display: grid; grid-template-columns: 1.1fr 1fr; gap: 36px; align-items: center;
}
.team-wrap.flip > :first-child { order: 2; }
.team-photo {
position: relative; aspect-ratio: 4/3;
border-radius: 16px; overflow: hidden;
box-shadow: 0 30px 70px -20px rgba(17,17,17,0.30), 0 8px 18px rgba(17,17,17,0.08);
}
.team-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.team-photo .stamp {
position: absolute; left: 18px; top: 18px;
background: var(--accent); color: var(--ink);
padding: 8px 14px; border-radius: 8px;
font-weight: 800; font-size: 0.78rem;
text-transform: uppercase; letter-spacing: 0.08em;
box-shadow: 0 8px 18px -4px rgba(74,222,128,0.55);
}
.team-photo .floating-pill {
position: absolute; right: -18px; bottom: 22px;
background: #fff; color: var(--ink);
padding: 12px 18px; border-radius: 12px;
box-shadow: 0 16px 36px rgba(0,0,0,0.20);
display: flex; align-items: center; gap: 12px;
max-width: 240px;
}
.team-photo .floating-pill .ic {
width: 36px; height: 36px;
background: var(--accent); color: var(--ink);
border-radius: 10px;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.team-photo .floating-pill .ic svg { width: 18px; height: 18px; }
.team-photo .floating-pill strong { display: block; font-size: 0.84rem; font-weight: 800; color: var(--ink); line-height: 1.2; }
.team-photo .floating-pill span { font-size: 0.72rem; color: var(--ink-2); display: block; margin-top: 2px; line-height: 1.3; }
.team-text .tag {
display: inline-block; font-size: 0.7rem; font-weight: 800; color: #166534;
text-transform: uppercase; letter-spacing: 0.12em;
background: rgba(74,222,128,0.20); padding: 6px 12px; border-radius: 4px; margin-bottom: 12px;
}
.team-section.dark .team-text .tag { color: var(--accent); background: rgba(74,222,128,0.12); }
.team-text h3 {
font-size: clamp(1.5rem, 2.8vw, 2.1rem);
font-weight: 900; line-height: 1.15; letter-spacing: -0.02em;
color: var(--ink); margin-bottom: 14px;
}
.team-section.dark .team-text h3 { color: #fff; }
.team-text h3 .yel { color: var(--accent); }
.team-text p { color: var(--ink-2); line-height: 1.7; font-size: 0.98rem; margin-bottom: 14px; }
.team-section.dark .team-text p { color: rgba(255,255,255,0.78); }
.team-text .meta-row {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
padding-top: 18px; margin-top: 6px;
border-top: 1px solid var(--line);
}
.team-section.dark .team-text .meta-row { border-top-color: rgba(255,255,255,0.10); }
.team-text .meta-row .it { display: flex; flex-direction: column; gap: 2px; }
.team-text .meta-row .it strong {
font-size: 1.1rem; font-weight: 900; color: var(--ink); letter-spacing: -0.02em; line-height: 1;
}
.team-section.dark .team-text .meta-row .it strong { color: var(--accent); }
.team-text .meta-row .it span {
font-size: 0.72rem; color: var(--ink-3); font-weight: 700;
text-transform: uppercase; letter-spacing: 0.06em;
}
.team-section.dark .team-text .meta-row .it span { color: rgba(255,255,255,0.55); }
@media (max-width: 900px) {
.team-wrap { grid-template-columns: 1fr; gap: 24px; }
.team-wrap.flip > :first-child { order: 0; }
.team-photo .floating-pill { right: 14px; bottom: 14px; }
}
/* ============================================================
PER-PAGE VISUAL SIGNATURES (decorative corner accents)
Each top-level page gets a unique decorative element so they
don't all feel identical.
============================================================ */
/* Section decorative top accent — yellow rule line variant for variety */
.section.with-rule-top::before {
content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
width: 60px; height: 3px; background: var(--accent); border-radius: 2px;
}
/* Section corner blob accents — soft yellow glow corners */
.section.glow-tr::after {
content: ''; position: absolute; top: -120px; right: -120px;
width: 320px; height: 320px;
background: radial-gradient(circle, rgba(74,222,128,0.16), transparent 65%);
border-radius: 50%; pointer-events: none; z-index: 0;
}
.section.glow-bl::before {
content: ''; position: absolute; bottom: -120px; left: -120px;
width: 320px; height: 320px;
background: radial-gradient(circle, rgba(74,222,128,0.12), transparent 65%);
border-radius: 50%; pointer-events: none; z-index: 0;
}
.section.glow-tr > *, .section.glow-bl > * { position: relative; z-index: 1; }
/* Diagonal stripe band, used as a section divider */
.stripe-band {
background: var(--ink); color: #fff;
padding: 18px 0;
position: relative; overflow: hidden;
}
.stripe-band::before {
content: ''; position: absolute; inset: 0;
background: repeating-linear-gradient(135deg, transparent 0 14px, rgba(74,222,128,0.06) 14px 28px);
}
.stripe-band-inner {
position: relative; z-index: 1;
display: flex; align-items: center; justify-content: center;
gap: 32px; flex-wrap: wrap;
font-size: 0.92rem; font-weight: 700;
text-transform: uppercase; letter-spacing: 0.10em;
}
.stripe-band-inner span { display: inline-flex; align-items: center; gap: 8px; color: rgba(255,255,255,0.85); }
.stripe-band-inner span::before { content: ''; width: 6px; height: 6px; background: var(--accent); border-radius: 50%; }
/* Per-page body class accents (subtle background tint near top of each page) */
body.page-home::before,
body.page-about::before,
body.page-services::before,
body.page-contact::before {
content: ''; position: fixed; pointer-events: none;
top: 0; right: 0; width: 240px; height: 240px;
background: radial-gradient(circle, rgba(74,222,128,0.10), transparent 70%);
z-index: 1;
}
body.page-about::before { right: auto; left: 0; }
body.page-contact::before { top: auto; bottom: 0; }
body.page-services::before { background: radial-gradient(circle, rgba(74,222,128,0.06), transparent 70%); width: 360px; height: 360px; }
.section-soft { background: var(--bg-soft); }
.section-warm { background: var(--bg-warm); }
/* Subtle top accent on every section */
.section::before {
content: '';
position: absolute;
top: 0; left: 50%;
transform: translateX(-50%);
width: 60px; height: 2px;
background: linear-gradient(90deg, transparent 0%, rgba(74, 222, 128, 0.40) 50%, transparent 100%);
border-radius: 2px;
opacity: 0;
transition: opacity 0.4s ease;
}
.section.section-soft::before,
.section.section-warm::before {
opacity: 0.7;
}
/* Subtle divider between sections — only when adjacent sections share the same bg variant */
.section + .section:not(.section-warm):not(.section-soft):not(.section-ink) {
border-top: 1px solid rgba(0, 0, 0, 0.04);
}
/* === Smooth global card transitions === */
.service-card, .industry-card, .testimonial-card, .feature-card,
.tool-card, .stat-card, .toolstack-card, .gsc-card, .gsc-feature,
.svc-card, .areas-region-card, .case-study-card, .why-card, .step-card,
.country-card, .svc-testimonial, .mini-case-card {
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
box-shadow 0.3s ease,
border-color 0.3s ease,
background 0.3s ease;
}
/* Body text rhythm: gentler line-heights */
p { line-height: 1.65; }
.lead { line-height: 1.6; }
/* Better focus rings everywhere */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 3px;
border-radius: 4px;
}
/* === GLOBAL ICON / IMAGE CLIPPING SAFETY NET === */
/* Ensure SVG icons never shrink unexpectedly inside flex containers */
.btn svg, .nav-link svg, .footer ul svg, .footer-social a svg, .footer-contact-item svg,
.contact-icon-btn svg, .dropdown a .icon svg, .tc-icon svg, .gn-flag svg,
.testimonial-avatar svg, .svc-testimonial-avatar svg, .signature-avatar svg, .founder-sig-avatar svg,
.ls-review-card .av svg, .ls-map-pin .pin-shape svg, .ls-map-result .pin svg,
.privacy-label svg, .ma-mask-label svg, .badge-img svg, .badge-img img,
.gx-badge svg, .platform-chip svg, .gnet-stat svg, .gsc-card-top .label svg {
flex-shrink: 0;
}
/* Ensure SVGs render at their full intended size without being squashed */
svg[viewBox] {
max-width: 100%;
height: auto;
}
/* But explicit width/height SVGs should respect those */
svg[width][height] {
height: auto;
}
/* Ensure all ![]()
never gets squashed or oversized by default */
img {
max-width: 100%;
height: auto;
display: block;
}
/* Re-allow images to fill their containers when CSS explicitly sets dims */
.real-shot img, .gsc-frame img, .pk-world-bg, .team-photo img,
.split-image img, .gallery-item img, .hero-visual img, .case-study-image img,
.svc-card-image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* But real screenshots in tool-stack cards should fit fully, not crop */
.toolstack-card .real-shot.blurred img {
object-fit: contain;
object-position: center top;
max-height: 220px;
height: auto;
}
/* GSC results screenshots should always fit fully */
.gsc-card .real-shot img, .gsc-feature .real-shot img {
height: auto;
object-fit: contain;
}
.section-ink {
background: var(--ink);
color: var(--surface);
}
.section-ink h1, .section-ink h2, .section-ink h3, .section-ink h4 { color: var(--surface); }
.section-ink .text-muted { color: rgba(255, 255, 255, 0.7); }
.section-header {
text-align: center;
max-width: 760px;
margin: 0 auto 36px;
position: relative;
}
.section-eyebrow {
display: inline-flex; align-items: center; gap: 8px;
padding: 7px 16px;
background: var(--accent-soft);
border: 1px solid rgba(74, 222, 128, 0.35);
border-radius: 100px;
font-size: 0.7rem; font-weight: 800;
color: var(--accent-hover);
margin-bottom: 16px;
text-transform: uppercase;
letter-spacing: 0.14em;
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.section-eyebrow::before {
content: ''; width: 6px; height: 6px;
background: var(--accent-2);
border-radius: 50%;
box-shadow: 0 0 8px rgba(74, 222, 128, 0.7);
animation: gxEyebrowPulse 2.2s ease-in-out infinite;
}
@keyframes gxEyebrowPulse {
0%, 100% { opacity: 0.7; transform: scale(1); }
50% { opacity: 1; transform: scale(1.25); }
}
.section-header h2 {
font-size: clamp(1.8rem, 3.6vw, 2.6rem);
margin-bottom: 14px;
letter-spacing: -0.025em;
line-height: 1.12;
font-weight: 900;
}
.section-header p {
color: var(--ink-2);
font-size: 1.02rem;
line-height: 1.65;
max-width: 600px;
margin: 0 auto;
}
/* GRID */
.grid { display: grid; gap: 14px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
/* SERVICE CARDS — Premium oversized */
.service-card {
position: relative;
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 28px 24px;
transition: all var(--t);
overflow: hidden;
}
.service-card::before {
content: ''; position: absolute; inset: 0;
background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
opacity: 0;
transition: opacity var(--t);
z-index: 0;
}
.service-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); border-color: transparent; }
.service-card:hover::before { opacity: 1; }
.service-card > * { position: relative; z-index: 1; }
.service-card .num {
font-size: 0.7rem;
font-weight: 700;
color: var(--ink-3);
letter-spacing: 0.12em;
margin-bottom: 8px;
}
.service-card .icon-large {
width: 56px; height: 56px;
background: var(--accent-soft);
border-radius: 14px;
display: grid; place-items: center;
margin-bottom: 16px;
color: var(--ink);
transition: background var(--t);
}
.service-card:hover .icon-large { background: var(--ink); color: var(--accent); }
.service-card .icon-large svg { width: 28px; height: 28px; }
.service-card h3 { font-size: 1.2rem; margin-bottom: 10px; }
.service-card p { color: var(--ink-2); margin-bottom: 14px; line-height: 1.55; font-size: 0.92rem; }
.service-card .features { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.service-card .feat { font-size: 0.85rem; }
.service-card .feat {
display: flex; align-items: center; gap: 10px;
font-size: 0.92rem;
color: var(--ink-2);
font-weight: 500;
}
.service-card .feat::before {
content: ''; width: 18px; height: 18px;
flex-shrink: 0;
background: var(--accent);
border-radius: 50%;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%231F2A44'%3E%3Cpath d='M16.7 5.3a1 1 0 0 1 0 1.4l-8 8a1 1 0 0 1-1.4 0l-4-4a1 1 0 0 1 1.4-1.4L8 12.6l7.3-7.3a1 1 0 0 1 1.4 0z'/%3E%3C/svg%3E");
background-size: 12px;
background-position: center;
background-repeat: no-repeat;
}
.service-card .card-cta {
display: inline-flex; align-items: center; gap: 8px;
font-weight: 700;
color: var(--ink);
font-size: 0.95rem;
}
.service-card .card-cta .arrow {
width: 32px; height: 32px;
background: var(--ink);
color: var(--accent);
border-radius: 50%;
display: grid; place-items: center;
transition: transform var(--t);
}
.service-card:hover .card-cta .arrow { transform: translateX(4px) rotate(-45deg); }
.service-card:hover .card-cta .arrow { background: var(--ink); color: var(--accent); }
.service-card .card-cta svg { width: 14px; height: 14px; }
/* COUNTRY CARDS */
.country-grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 16px;
}
.country-card {
display: flex; flex-direction: column; align-items: center; justify-content: center;
padding: 18px 12px;
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius);
transition: all var(--t);
text-align: center;
}
.country-card:hover {
background: var(--accent);
border-color: var(--accent);
transform: translateY(-4px);
box-shadow: var(--shadow);
}
.country-card .flag-emoji { font-size: 1.85rem; margin-bottom: 8px; }
.country-flag-svg {
width: 64px; height: 32px;
border-radius: 4px;
margin-bottom: 12px;
box-shadow: 0 2px 8px rgba(17, 17, 17, 0.15);
border: 1px solid var(--line);
}
.country-card .country-name { font-weight: 700; font-size: 0.88rem; }
.country-card .country-tag { font-size: 0.7rem; color: var(--ink-3); margin-top: 2px; }
.country-card:hover .country-tag { color: var(--ink); }
/* STATS — Big inline */
.stats-row {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
background: var(--ink);
border-radius: var(--radius);
padding: 40px 32px;
position: relative;
overflow: hidden;
}
.stats-row::before {
content: ''; position: absolute; inset: 0;
background:
radial-gradient(circle at 20% 50%, rgba(74, 222, 128, 0.15) 0%, transparent 50%),
radial-gradient(circle at 80% 50%, rgba(74, 222, 128, 0.08) 0%, transparent 50%);
}
.stat-block { text-align: center; position: relative; }
.stat-block:not(:last-child)::after {
content: ''; position: absolute; right: 0; top: 20%; bottom: 20%;
width: 1px;
background: rgba(74, 222, 128, 0.2);
}
.stat-num {
font-size: clamp(2rem, 4.5vw, 3.4rem);
font-weight: 900;
color: var(--accent);
line-height: 1;
margin-bottom: 8px;
letter-spacing: -0.04em;
}
.stat-label { color: rgba(255, 255, 255, 0.7); font-size: 0.95rem; font-weight: 500; }
/* PROCESS — Sticky-feel cards */
.process-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.process-card {
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 22px 22px;
transition: all var(--t);
position: relative;
overflow: hidden;
}
.process-card:hover { border-color: var(--accent); box-shadow: var(--shadow); transform: translateY(-4px); }
.process-card .step-num {
font-family: 'Inter', sans-serif;
font-size: 3rem;
font-weight: 900;
line-height: 1;
color: var(--accent);
-webkit-text-stroke: 1.5px var(--accent-2);
letter-spacing: -0.05em;
margin-bottom: 10px;
opacity: 0.5;
}
.process-card h3 { font-size: 1.15rem; margin-bottom: 8px; }
.process-card p { color: var(--ink-2); line-height: 1.55; font-size: 0.92rem; }
/* WHY US — Feature cards alt */
.why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.why-card {
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 22px 22px;
transition: all var(--t);
}
.why-card:hover { border-color: var(--accent); transform: translateY(-4px); box-shadow: var(--shadow-sm); }
.why-card .why-icon {
width: 48px; height: 48px;
background: var(--accent);
border: 0;
border-radius: 12px;
display: grid; place-items: center;
color: var(--ink);
margin-bottom: 14px;
transition: all var(--t);
box-shadow: 0 4px 12px rgba(74, 222, 128, 0.3);
}
.why-card:hover .why-icon { background: var(--ink); color: var(--accent); transform: rotate(-6deg); }
.why-card .why-icon svg { width: 22px; height: 22px; stroke-width: 2; }
.why-card h3 { font-size: 1.05rem; margin-bottom: 6px; }
.why-card p { color: var(--ink-2); font-size: 0.88rem; line-height: 1.55; }
/* TESTIMONIALS */
.testimonial-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.testimonial-card {
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 22px 22px;
position: relative;
transition: all var(--t);
}
.testimonial-card:hover { border-color: var(--accent); box-shadow: var(--shadow); transform: translateY(-4px); }
.testimonial-card .quote-mark {
position: absolute; top: 32px; right: 36px;
font-family: serif;
font-size: 5rem;
line-height: 1;
color: var(--accent);
opacity: 0.6;
font-weight: 900;
}
.testimonial-stars { display: flex; gap: 2px; margin-bottom: 20px; }
.testimonial-stars svg { width: 18px; height: 18px; color: var(--accent-2); }
.testimonial-text {
font-size: 0.95rem;
color: var(--ink);
line-height: 1.55;
margin-bottom: 18px;
font-weight: 500;
}
.testimonial-author { display: flex; align-items: center; gap: 14px; padding-top: 24px; border-top: 1px solid var(--line); }
.testimonial-avatar {
width: 52px; height: 52px;
border-radius: 50%;
background: linear-gradient(135deg, var(--accent), var(--accent-2));
color: var(--ink);
display: grid; place-items: center;
font-weight: 800;
font-size: 1.2rem;
flex-shrink: 0;
}
.testimonial-avatar svg,
.svc-testimonial-avatar svg,
.signature-avatar svg,
.founder-sig-avatar svg {
width: 26px; height: 26px;
color: var(--ink);
}
.ls-review-card .av svg { width: 18px; height: 18px; color: #fff; }
.ls-map-pin .pin-shape svg, .ls-map-result .pin svg { width: 11px; height: 11px; color: #fff; }
.ma-story-top .av svg { width: 16px; height: 16px; color: var(--ink); }
.sm-grid-head .av .av-inner svg { width: 16px; height: 16px; color: var(--ink); }
.testimonial-name { font-weight: 700; font-size: 0.98rem; }
.testimonial-meta { font-size: 0.85rem; color: var(--ink-3); }
/* FAQ */
.faq-list { max-width: 880px; margin: 0 auto; display: flex; flex-direction: column; gap: 8px; }
.faq-item {
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius);
overflow: hidden;
transition: all var(--t);
}
.faq-item[open] { border-color: var(--accent); box-shadow: var(--shadow-sm); }
.faq-item summary {
padding: 16px 22px;
font-weight: 700;
font-size: 0.98rem;
cursor: pointer;
display: flex; align-items: center; justify-content: space-between; gap: 16px;
list-style: none;
color: var(--ink);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary .faq-toggle {
width: 36px; height: 36px;
flex-shrink: 0;
background: var(--accent-soft);
border-radius: 50%;
display: grid; place-items: center;
color: var(--ink);
transition: all var(--t);
}
.faq-item[open] summary .faq-toggle { background: var(--ink); color: var(--accent); transform: rotate(45deg); }
.faq-item .faq-toggle svg { width: 14px; height: 14px; }
.faq-answer {
padding: 0 22px 18px;
color: var(--ink-2);
line-height: 1.65;
font-size: 0.92rem;
}
/* CTA SECTION — bold ink card */
.cta-banner {
position: relative;
padding: 72px 48px;
background: var(--ink);
border-radius: var(--radius-lg);
text-align: center;
overflow: hidden;
margin: 0 auto;
max-width: calc(var(--max-w) - 64px);
}
.cta-banner::before {
content: ''; position: absolute; inset: 0;
background:
radial-gradient(circle at 20% 0%, rgba(74, 222, 128, 0.25) 0%, transparent 50%),
radial-gradient(circle at 80% 100%, rgba(74, 222, 128, 0.15) 0%, transparent 50%);
}
.cta-banner > * { position: relative; }
.cta-banner h2 { color: var(--surface); margin-bottom: 20px; }
.cta-banner h2 .highlight::before { background: var(--accent); }
.cta-banner p { color: rgba(255, 255, 255, 0.7); font-size: 1.15rem; max-width: 640px; margin: 0 auto 36px; line-height: 1.6; }
.cta-banner .section-eyebrow { background: rgba(74, 222, 128, 0.15); color: var(--accent); }
.cta-banner .section-eyebrow::before { background: var(--accent); }
/* FOOTER — Redesigned premium */
/* ==========================================================================
PREMIUM FOOTER — gradient ambient glow, animated links, glowing socials
========================================================================== */
.footer {
background: linear-gradient(180deg, #1A1A1A 0%, var(--ink) 45%, #0A0A0A 100%);
color: rgba(255, 255, 255, 0.72);
padding: 56px 0 24px;
position: relative;
overflow: hidden;
}
.footer::before {
content: ''; position: absolute; inset: 0; pointer-events: none;
background:
radial-gradient(ellipse 800px 400px at 18% 0%, rgba(74,222,128,0.10) 0%, transparent 60%),
radial-gradient(ellipse 600px 300px at 82% 100%, rgba(74,222,128,0.06) 0%, transparent 60%);
}
.footer::after {
content: ''; position: absolute; inset: 0; pointer-events: none;
background-image: radial-gradient(rgba(255,255,255,0.04) 1px, transparent 1px);
background-size: 36px 36px;
opacity: 0.6;
mask-image: linear-gradient(180deg, transparent 0%, #000 30%, #000 70%, transparent 100%);
-webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 30%, #000 70%, transparent 100%);
}
.footer .container { position: relative; z-index: 1; }
/* Giant ghosted GROWNIX wordmark in footer background */
.footer-bg-wordmark {
position: absolute;
left: 50%; bottom: -3%;
transform: translateX(-50%);
font-family: 'Inter', Arial, sans-serif;
font-weight: 900;
font-size: clamp(8rem, 22vw, 22rem);
letter-spacing: -0.06em;
line-height: 1;
color: transparent;
-webkit-text-stroke: 1.5px rgba(74,222,128,0.08);
text-stroke: 1.5px rgba(74,222,128,0.08);
pointer-events: none;
user-select: none;
white-space: nowrap;
z-index: 0;
opacity: 0.85;
}
/* Stats banner above CTA strip */
.footer-stats {
display: grid; grid-template-columns: repeat(4, 1fr);
gap: 0;
background: rgba(255,255,255,0.03);
border: 1px solid rgba(74,222,128,0.18);
border-radius: 14px;
padding: 18px 12px;
margin-bottom: 22px;
position: relative;
overflow: hidden;
backdrop-filter: blur(8px);
}
.footer-stats::before {
content: ''; position: absolute; inset: 0; pointer-events: none;
background: linear-gradient(135deg, rgba(74,222,128,0.10) 0%, transparent 50%, rgba(74,222,128,0.06) 100%);
}
.footer-stat {
text-align: center;
padding: 0 14px;
position: relative;
z-index: 1;
}
.footer-stat:not(:last-child)::after {
content: ''; position: absolute;
right: 0; top: 18%; height: 64%;
width: 1px;
background: linear-gradient(180deg, transparent 0%, rgba(74,222,128,0.30) 50%, transparent 100%);
}
.footer-stat .fs-num {
font-size: clamp(1.8rem, 4vw, 2.6rem);
font-weight: 900;
color: var(--accent);
letter-spacing: -0.04em;
line-height: 1;
display: inline-flex; align-items: baseline; justify-content: center;
}
.footer-stat .fs-num span {
font-size: 0.55em;
color: #86EFAC;
margin-left: 2px;
font-weight: 800;
}
.footer-stat .fs-lbl {
font-size: 0.78rem;
color: rgba(255,255,255,0.7);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
margin-top: 8px;
}
/* Newsletter signup row */
.footer-newsletter {
display: grid;
grid-template-columns: 1fr 1.1fr;
gap: 30px; align-items: center;
background: rgba(255,255,255,0.03);
border: 1px solid rgba(74,222,128,0.15);
border-radius: 14px;
padding: 22px 28px;
margin-bottom: 26px;
position: relative;
overflow: hidden;
}
.footer-newsletter::before {
content: ''; position: absolute;
top: -60px; right: -60px;
width: 220px; height: 220px;
background: radial-gradient(circle, rgba(74,222,128,0.18) 0%, transparent 65%);
pointer-events: none;
}
.fn-left { position: relative; z-index: 1; }
.fn-left h4 {
font-size: 1.2rem;
font-weight: 900;
color: #fff;
margin: 0 0 6px;
letter-spacing: -0.02em;
text-transform: none;
}
.fn-left h4::before { display: none; }
.fn-left p {
font-size: 0.88rem;
color: rgba(255,255,255,0.65);
line-height: 1.55;
margin: 0;
max-width: 380px;
}
.fn-form {
display: flex; gap: 10px;
position: relative; z-index: 1;
}
.fn-input-wrap {
flex: 1;
position: relative;
display: flex; align-items: center;
}
.fn-input-wrap svg {
position: absolute;
left: 16px;
width: 17px; height: 17px;
color: rgba(255,255,255,0.5);
pointer-events: none;
}
.fn-form input[type="email"] {
width: 100%;
padding: 14px 16px 14px 44px;
background: rgba(255,255,255,0.06);
border: 1.5px solid rgba(255,255,255,0.12);
border-radius: 11px;
color: #fff;
font-size: 0.94rem;
font-family: inherit;
font-weight: 500;
outline: none;
transition: border-color 0.2s ease, background 0.2s ease;
}
.fn-form input[type="email"]::placeholder { color: rgba(255,255,255,0.4); }
.fn-form input[type="email"]:focus {
border-color: var(--accent);
background: rgba(255,255,255,0.10);
box-shadow: 0 0 0 4px rgba(74,222,128,0.18);
}
.fn-btn {
background: linear-gradient(135deg, var(--accent) 0%, #86EFAC 100%);
color: var(--ink);
padding: 14px 22px;
border-radius: 11px;
font-weight: 800;
font-size: 0.92rem;
display: inline-flex; align-items: center; gap: 8px;
border: 0;
cursor: pointer;
white-space: nowrap;
transition: transform 0.25s ease, box-shadow 0.25s ease;
box-shadow: 0 10px 22px -6px rgba(74,222,128,0.55);
}
.fn-btn:hover {
transform: translateY(-2px);
box-shadow: 0 16px 30px -8px rgba(74,222,128,0.70);
}
.fn-btn svg { width: 14px; height: 14px; transition: transform 0.25s ease; }
.fn-btn:hover svg { transform: translateX(3px); }
@media (max-width: 900px) {
.footer-stats { grid-template-columns: repeat(2, 1fr); gap: 16px 0; padding: 22px 12px; }
.footer-stat:nth-child(2)::after { display: none; }
.footer-stat:not(:last-child)::after { display: block; }
.footer-newsletter { grid-template-columns: 1fr; gap: 22px; padding: 24px; }
.fn-form { flex-direction: column; gap: 10px; }
.fn-btn { width: 100%; justify-content: center; }
.footer-bg-wordmark { font-size: 8rem; bottom: 2%; opacity: 0.6; }
}
/* CTA STRIP — premium yellow with depth */
.footer-cta-strip {
background: linear-gradient(135deg, #4ADE80 0%, #86EFAC 40%, #4ADE80 100%);
padding: 28px 40px;
border-radius: 18px;
display: flex; align-items: center; justify-content: space-between;
flex-wrap: wrap; gap: 20px;
margin-bottom: 40px;
position: relative;
overflow: hidden;
box-shadow:
0 32px 60px -22px rgba(74,222,128,0.45),
0 14px 28px -10px rgba(74,222,128,0.30),
inset 0 1px 0 rgba(255,255,255,0.30);
}
.footer-cta-strip::before {
content: ''; position: absolute;
top: -60%; right: -40px;
width: 360px; height: 360px;
background: radial-gradient(circle, rgba(255,255,255,0.35) 0%, transparent 60%);
pointer-events: none;
}
.footer-cta-strip::after {
content: ''; position: absolute;
bottom: -90px; left: 24px;
width: 220px; height: 220px;
background: radial-gradient(circle, rgba(17,17,17,0.12) 0%, transparent 60%);
pointer-events: none;
}
.footer-cta-strip > * { position: relative; z-index: 1; }
.footer-cta-strip h3 {
color: var(--ink);
font-size: clamp(1.3rem, 2.4vw, 1.85rem);
margin-bottom: 6px;
line-height: 1.15;
letter-spacing: -0.02em;
font-weight: 900;
}
.footer-cta-strip p { color: rgba(17,17,17,0.82); font-size: 0.95rem; font-weight: 600; }
.footer-cta-strip-buttons { display: flex; gap: 12px; flex-wrap: wrap; }
.footer-cta-strip .btn-ink {
background: var(--ink); color: var(--accent);
padding: 14px 26px; border-radius: 100px;
font-weight: 800; font-size: 0.92rem;
display: inline-flex; align-items: center; gap: 9px;
transition: transform 0.25s ease, box-shadow 0.25s ease;
box-shadow: 0 10px 22px -6px rgba(17,17,17,0.40);
}
.footer-cta-strip .btn-ink:hover {
transform: translateY(-3px);
box-shadow: 0 18px 32px -8px rgba(17,17,17,0.55);
}
.footer-cta-strip .btn-ink svg { width: 14px; height: 14px; transition: transform 0.25s ease; }
.footer-cta-strip .btn-ink:hover svg { transform: translateX(3px); }
.footer-cta-strip .btn-outline-ink {
background: rgba(17,17,17,0.06); color: var(--ink);
border: 2px solid var(--ink);
padding: 12px 22px; border-radius: 100px;
font-weight: 800; font-size: 0.92rem;
display: inline-flex; align-items: center; gap: 8px;
transition: all 0.25s ease;
}
.footer-cta-strip .btn-outline-ink:hover {
background: var(--ink); color: var(--accent);
transform: translateY(-3px);
}
/* FOOTER GRID */
.footer-grid {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1.4fr;
gap: 40px;
margin-bottom: 32px;
padding-bottom: 28px;
border-bottom: 1px solid rgba(255,255,255,0.08);
}
.footer .logo img { height: 64px; }
.footer h4 {
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.18em;
color: var(--accent);
margin-bottom: 22px;
font-weight: 800;
display: flex; align-items: center; gap: 10px;
}
.footer h4::before {
content: ''; width: 16px; height: 2px;
background: var(--accent); border-radius: 2px;
box-shadow: 0 0 8px rgba(74,222,128,0.5);
}
.footer-about p {
color: rgba(255,255,255,0.72);
margin: 20px 0; max-width: 360px;
line-height: 1.7; font-size: 0.94rem;
}
/* SOCIAL — premium glowing */
.footer-social { display: flex; gap: 10px; margin-top: 24px; }
.footer-social a {
width: 42px; height: 42px;
display: grid; place-items: center;
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.10);
border-radius: 11px;
color: rgba(255,255,255,0.85);
transition: transform 0.25s ease, border-color 0.25s ease, color 0.25s ease, box-shadow 0.3s ease;
position: relative;
overflow: hidden;
}
.footer-social a::before {
content: ''; position: absolute; inset: 0;
background: linear-gradient(135deg, var(--accent), #86EFAC);
opacity: 0; transition: opacity 0.25s ease;
border-radius: 11px;
}
.footer-social a svg { position: relative; z-index: 1; width: 17px; height: 17px; transition: transform 0.25s ease; }
.footer-social a:hover {
border-color: var(--accent);
color: var(--ink);
transform: translateY(-3px);
box-shadow: 0 14px 26px -8px rgba(74,222,128,0.55);
}
.footer-social a:hover::before { opacity: 1; }
.footer-social a:hover svg { transform: scale(1.08); }
/* LINK LISTS — arrow slides in on hover */
.footer ul { display: flex; flex-direction: column; gap: 12px; list-style: none; padding: 0; }
.footer ul a {
color: rgba(255,255,255,0.72);
font-size: 0.93rem;
display: inline-flex; align-items: center;
transition: color 0.2s ease, padding-left 0.25s ease;
position: relative;
padding-left: 0;
}
.footer ul a::before {
content: '→';
display: inline-block;
opacity: 0;
width: 0;
margin-right: 0;
margin-left: 0;
color: var(--accent);
font-weight: 800;
transition: opacity 0.25s ease, width 0.25s ease, margin 0.25s ease;
}
.footer ul a:hover {
color: var(--accent);
padding-left: 16px;
}
.footer ul a:hover::before {
opacity: 1;
width: 14px;
margin-left: -18px;
margin-right: 4px;
}
/* CONTACT ITEMS — refined */
.footer-contact-item {
display: flex; align-items: flex-start; gap: 12px;
margin-bottom: 14px;
color: rgba(255,255,255,0.78);
font-size: 0.92rem; line-height: 1.55;
transition: color 0.2s ease;
}
.footer-contact-item:hover { color: rgba(255,255,255,0.95); }
.footer-contact-item svg {
width: 16px; height: 16px;
color: var(--accent);
flex-shrink: 0;
padding: 6px;
box-sizing: content-box;
background: rgba(74,222,128,0.10);
border: 1px solid rgba(74,222,128,0.18);
border-radius: 9px;
margin-top: -2px;
transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}
.footer-contact-item:hover svg {
background: rgba(74,222,128,0.18);
border-color: rgba(74,222,128,0.35);
transform: scale(1.05);
}
.footer-contact-item a { color: inherit; transition: color 0.2s ease; }
.footer-contact-item a:hover { color: var(--accent); }
/* BOTTOM ROW */
.footer-bottom {
display: flex; align-items: center; justify-content: space-between;
padding-top: 30px;
border-top: 1px solid rgba(255,255,255,0.08);
flex-wrap: wrap; gap: 16px;
}
.footer-bottom p {
color: rgba(255,255,255,0.5);
font-size: 0.84rem;
display: flex; align-items: center; gap: 8px;
}
.footer-bottom p::after {
content: '';
display: inline-block;
width: 6px; height: 6px;
background: var(--accent);
border-radius: 50%;
box-shadow: 0 0 8px rgba(74,222,128,0.6);
animation: gxFooterPulse 2.4s ease-in-out infinite;
}
@keyframes gxFooterPulse {
0%, 100% { opacity: 0.7; transform: scale(1); }
50% { opacity: 1; transform: scale(1.15); }
}
.footer-bottom-links { display: flex; gap: 28px; flex-wrap: wrap; }
.footer-bottom-links a {
color: rgba(255,255,255,0.5);
font-size: 0.84rem;
transition: color 0.2s ease;
position: relative;
}
.footer-bottom-links a::after {
content: '';
position: absolute; bottom: -3px; left: 0;
width: 0; height: 1px;
background: var(--accent);
transition: width 0.25s ease;
}
.footer-bottom-links a:hover { color: var(--accent); }
.footer-bottom-links a:hover::after { width: 100%; }
/* PK FLAG BADGE */
.pk-badge {
display: inline-flex; align-items: center; gap: 8px;
padding: 8px 16px;
background: rgba(0, 88, 61, 0.1);
border: 1px solid rgba(0, 88, 61, 0.3);
border-radius: 100px;
font-size: 0.85rem; font-weight: 600;
color: var(--pk-green);
}
.pk-badge.on-dark {
background: rgba(255, 255, 255, 0.06);
border-color: rgba(255, 255, 255, 0.15);
color: var(--surface);
}
.pk-badge .flag-emoji { font-size: 1.1rem; }
.pk-badge-flag {
width: 20px; height: 14px;
border-radius: 2px;
flex-shrink: 0;
box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
/* BOTTOM STICKY CTA BAR */
.sticky-bottom-bar {
position: fixed;
bottom: 0; left: 0; right: 0;
z-index: 998;
background: var(--ink);
padding: 10px;
display: grid;
grid-template-columns: 1fr 1.2fr 1fr;
gap: 8px;
box-shadow: 0 -8px 24px rgba(17, 17, 17, 0.15);
}
.sticky-bottom-bar a {
display: flex; align-items: center; justify-content: center; gap: 8px;
padding: 14px 18px;
border-radius: 10px;
font-weight: 700;
font-size: 0.92rem;
white-space: nowrap;
transition: all var(--t);
}
.sticky-bottom-bar a svg { width: 18px; height: 18px; }
.sticky-bottom-bar .sticky-call {
background: var(--surface);
color: var(--ink);
}
.sticky-bottom-bar .sticky-call:hover { background: var(--bg-warm); }
.sticky-bottom-bar .sticky-whatsapp {
background: #25D366;
color: white;
}
.sticky-bottom-bar .sticky-whatsapp:hover { background: #1da851; color: white; }
.sticky-bottom-bar .sticky-quote {
background: var(--accent);
color: var(--ink);
}
.sticky-bottom-bar .sticky-quote:hover { background: var(--accent-2); color: var(--ink); }
/* Reserve buffer space for the fixed sticky-bottom-bar on the FOOTER, not the body.
Previously body { padding-bottom: 76px } created a visible white gap below the footer. */
.footer { padding-bottom: 76px; }
/* WHATSAPP FLOAT */
.whatsapp-float {
position: fixed; bottom: 92px; right: 24px; z-index: 999;
width: 64px; height: 64px;
background: #25D366;
border-radius: 50%;
display: grid; place-items: center;
color: #fff;
box-shadow: 0 12px 32px rgba(37, 211, 102, 0.5);
transition: all var(--t);
}
.whatsapp-float::before {
content: ''; position: absolute; inset: -8px;
border-radius: 50%;
border: 2px solid #25D366;
opacity: 0.5;
animation: pulseRing 2s infinite;
}
@keyframes pulseRing { 0% { transform: scale(0.95); opacity: 0.7; } 100% { transform: scale(1.3); opacity: 0; } }
.whatsapp-float:hover { transform: scale(1.1); color: #fff; }
.whatsapp-float svg { width: 32px; height: 32px; }
/* FORMS */
.form-card {
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
padding: 48px 40px;
box-shadow: var(--shadow);
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.form-group { margin-bottom: 16px; }
.form-label {
display: block;
margin-bottom: 8px;
font-size: 0.88rem; font-weight: 600;
color: var(--ink);
}
.form-control {
width: 100%;
padding: 16px 18px;
background: var(--bg-soft);
border: 1.5px solid var(--line);
border-radius: 12px;
color: var(--ink);
font-family: inherit; font-size: 1rem;
transition: all var(--t);
}
.form-control:focus { outline: 0; border-color: var(--accent-2); background: var(--surface); box-shadow: 0 0 0 4px rgba(74, 222, 128, 0.15); }
.form-control::placeholder { color: var(--ink-3); }
textarea.form-control { resize: vertical; min-height: 140px; }
select.form-control { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%234B5775'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 44px; }
/* SERVICES HERO */
.services-hero {
position: relative;
padding: 130px 0 50px;
background:
radial-gradient(ellipse 60% 50% at 30% 30%, rgba(74, 222, 128, 0.18) 0%, transparent 55%),
radial-gradient(ellipse 50% 40% at 80% 70%, rgba(74, 222, 128, 0.10) 0%, transparent 50%),
linear-gradient(140deg, var(--ink) 0%, #1A1A1A 100%);
color: var(--surface);
overflow: hidden;
}
.services-hero::before {
content: ''; position: absolute; inset: 0;
background-image:
linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
background-size: 60px 60px;
mask-image: radial-gradient(ellipse at center, black 30%, transparent 70%);
-webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 70%);
}
.services-hero > * { position: relative; z-index: 2; }
.services-hero-inner { text-align: center; max-width: 920px; margin: 0 auto; }
.services-hero-eyebrow {
display: inline-flex; align-items: center; gap: 10px;
padding: 8px 18px;
background: rgba(74, 222, 128, 0.12);
border: 1px solid rgba(74, 222, 128, 0.3);
border-radius: 100px;
font-size: 0.78rem; font-weight: 700;
color: var(--accent);
margin-bottom: 24px;
text-transform: uppercase; letter-spacing: 0.12em;
}
.services-hero h1 {
color: var(--surface);
font-size: clamp(2.2rem, 5.5vw, 4.4rem);
line-height: 1.05;
letter-spacing: -0.03em;
margin-bottom: 24px;
font-weight: 800;
}
.services-hero h1 .highlight {
position: relative;
display: inline-block;
white-space: nowrap;
}
.services-hero h1 .highlight::before {
content: ''; position: absolute;
left: -2%; right: -2%; bottom: 4%;
height: 28%;
background: var(--accent);
z-index: -1;
border-radius: 6px;
transform: rotate(-1deg);
}
.services-hero p.lead {
color: rgba(255, 255, 255, 0.78);
font-size: clamp(1rem, 1.5vw, 1.2rem);
line-height: 1.55;
margin-bottom: 0;
max-width: 760px;
margin-left: auto;
margin-right: auto;
}
/* SERVICE GIANT CARDS — 4-3 centered layout (works for 6, 7, 8 cards) */
.services-grid-big {
display: grid;
grid-template-columns: repeat(8, 1fr);
gap: 16px;
}
.services-grid-big > .service-big-card { grid-column: span 2; }
/* If 7 cards: cards 5,6,7 form a centered row of 3 (offset 1 col on each side) */
.services-grid-big > .service-big-card:nth-child(5):nth-last-child(3) { grid-column: 2 / span 2; }
.services-grid-big > .service-big-card:nth-child(6):nth-last-child(2) { grid-column: 4 / span 2; }
.services-grid-big > .service-big-card:nth-child(7):nth-last-child(1) { grid-column: 6 / span 2; }
.service-big-card {
position: relative;
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
padding: 32px 24px 28px;
transition: all var(--t);
display: flex;
flex-direction: column;
overflow: hidden;
isolation: isolate;
}
.service-big-card:hover {
transform: translateY(-8px);
box-shadow: var(--shadow-lg);
border-color: var(--accent);
}
.service-big-card::after {
content: '';
position: absolute;
top: 0; left: 0;
width: 100%; height: 4px;
background: linear-gradient(90deg, var(--accent), var(--accent-2));
transform: scaleX(0);
transform-origin: left;
transition: transform 0.4s ease;
}
.service-big-card:hover::after { transform: scaleX(1); }
.service-big-num {
font-family: 'Inter', sans-serif;
font-size: 3.6rem;
font-weight: 900;
line-height: 1;
background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
letter-spacing: -0.05em;
position: absolute;
top: 20px; right: 22px;
opacity: 0.18;
transition: opacity var(--t);
}
.service-big-card:hover .service-big-num { opacity: 0.32; }
.service-big-icon {
width: 64px; height: 64px;
background: var(--ink);
color: var(--accent);
border-radius: 18px;
display: grid; place-items: center;
margin-bottom: 24px;
transition: all var(--t);
}
.service-big-card:hover .service-big-icon { background: var(--accent); color: var(--ink); transform: rotate(-6deg); }
.service-big-icon svg { width: 30px; height: 30px; }
.service-big-card h3 {
font-size: 1.32rem;
margin-bottom: 10px;
letter-spacing: -0.02em;
line-height: 1.25;
}
.service-big-card .service-tagline {
color: var(--ink-2);
font-size: 0.95rem;
line-height: 1.6;
margin-bottom: 24px;
}
.service-big-features {
display: flex; flex-direction: column;
gap: 10px;
margin-bottom: 28px;
}
.service-big-features li {
display: flex; align-items: flex-start; gap: 10px;
font-size: 0.9rem;
color: var(--ink);
font-weight: 500;
line-height: 1.5;
}
.service-big-features li svg {
width: 18px; height: 18px;
color: var(--accent-2);
flex-shrink: 0;
margin-top: 2px;
}
.service-big-pricing {
margin-top: auto;
padding-top: 24px;
border-top: 1px solid var(--line);
}
.service-big-pricing-label {
font-size: 0.7rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--ink-3);
margin-bottom: 6px;
}
.service-big-pricing-amount {
font-size: 1.5rem;
font-weight: 900;
color: var(--ink);
line-height: 1;
margin-bottom: 4px;
letter-spacing: -0.02em;
}
.service-big-pricing-amount small {
font-size: 0.85rem;
font-weight: 600;
color: var(--ink-3);
letter-spacing: 0;
}
.service-big-pricing-detail {
font-size: 0.82rem;
color: var(--ink-3);
margin-bottom: 18px;
}
.service-big-card .btn {
width: 100%;
justify-content: center;
}
/* PROCESS TIMELINE (services) */
.process-timeline-big {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 14px;
position: relative;
}
.process-timeline-big::before {
content: '';
position: absolute;
top: 36px; left: 6%; right: 6%;
height: 2px;
background: var(--line);
z-index: 0;
}
.process-step-big {
text-align: center;
position: relative;
z-index: 1;
}
.process-step-big-marker {
width: 72px; height: 72px;
background: var(--surface);
border: 2px solid var(--accent);
border-radius: 50%;
display: grid; place-items: center;
margin: 0 auto 20px;
font-weight: 900;
font-size: 1.4rem;
color: var(--ink);
position: relative;
}
.process-step-big-marker::after {
content: '';
position: absolute; inset: -6px;
border: 1px dashed var(--accent);
border-radius: 50%;
opacity: 0.4;
}
.process-step-big h4 {
font-size: 1.05rem;
margin-bottom: 6px;
}
.process-step-big p {
font-size: 0.85rem;
color: var(--ink-2);
line-height: 1.55;
}
/* INVESTMENT TIERS */
.investment-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
}
.invest-card {
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
padding: 36px 32px;
position: relative;
transition: all var(--t);
display: flex;
flex-direction: column;
}
.invest-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.invest-card.featured {
background: var(--ink);
color: var(--surface);
border-color: var(--accent);
border-width: 2px;
transform: scale(1.02);
}
.invest-card.featured:hover { transform: scale(1.02) translateY(-4px); }
.invest-card.featured .invest-tier { color: var(--accent); }
.invest-card.featured h3 { color: var(--surface); }
.invest-card.featured .invest-price { color: var(--accent); }
.invest-card.featured .invest-features li { color: rgba(255,255,255,0.85); }
.invest-card.featured .invest-features li svg { color: var(--accent); }
.invest-card.featured .invest-card-foot { border-top-color: rgba(255,255,255,0.1); }
.invest-badge {
position: absolute;
top: -14px; left: 50%; transform: translateX(-50%);
padding: 6px 16px;
background: var(--accent);
color: var(--ink);
border-radius: 100px;
font-size: 0.7rem;
font-weight: 800;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.invest-tier {
font-size: 0.78rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--accent-2);
margin-bottom: 12px;
}
.invest-card h3 {
font-size: 1.5rem;
margin-bottom: 10px;
}
.invest-card-desc {
font-size: 0.92rem;
color: var(--ink-2);
line-height: 1.55;
margin-bottom: 20px;
}
.invest-card.featured .invest-card-desc { color: rgba(255,255,255,0.7); }
.invest-price {
font-size: 2.4rem;
font-weight: 900;
color: var(--ink);
line-height: 1;
margin-bottom: 4px;
letter-spacing: -0.03em;
}
.invest-price small {
font-size: 0.95rem;
font-weight: 600;
color: var(--ink-3);
letter-spacing: 0;
}
.invest-card.featured .invest-price small { color: rgba(255,255,255,0.6); }
.invest-period {
font-size: 0.85rem;
color: var(--ink-3);
margin-bottom: 24px;
}
.invest-card.featured .invest-period { color: rgba(255,255,255,0.6); }
.invest-features {
display: flex; flex-direction: column;
gap: 12px;
margin-bottom: 28px;
flex: 1;
}
.invest-features li {
display: flex; align-items: flex-start; gap: 10px;
font-size: 0.9rem;
color: var(--ink);
line-height: 1.5;
font-weight: 500;
}
.invest-features li svg {
width: 18px; height: 18px;
color: var(--success);
flex-shrink: 0;
margin-top: 2px;
}
.invest-card-foot { padding-top: 24px; border-top: 1px solid var(--line); margin-top: auto; }
.invest-card .btn { width: 100%; justify-content: center; }
.invest-card.featured .btn-outline { color: var(--accent); border-color: rgba(74,222,128,0.4); }
.invest-card.featured .btn-outline:hover { background: var(--accent); color: var(--ink); border-color: var(--accent); }
/* DELIVERABLES BREAKDOWN — 4-3 centered layout (matches service cards) */
.deliverables-grid {
display: grid;
grid-template-columns: repeat(8, 1fr);
gap: 16px;
}
.deliverables-grid > .deliverable-card { grid-column: span 2; }
/* If 7 cards: cards 5,6,7 form a centered row of 3 */
.deliverables-grid > .deliverable-card:nth-child(5):nth-last-child(3) { grid-column: 2 / span 2; }
.deliverables-grid > .deliverable-card:nth-child(6):nth-last-child(2) { grid-column: 4 / span 2; }
.deliverables-grid > .deliverable-card:nth-child(7):nth-last-child(1) { grid-column: 6 / span 2; }
.deliverable-card {
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 0;
overflow: hidden;
transition: all var(--t);
}
.deliverable-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--accent); }
.deliverable-head {
padding: 26px 26px 22px;
background: var(--ink);
color: var(--surface);
position: relative;
}
.deliverable-head::after {
content: '';
position: absolute; bottom: 0; left: 0; right: 0;
height: 3px;
background: linear-gradient(90deg, var(--accent), var(--accent-2));
}
.deliverable-head h3 { color: var(--surface); font-size: 1.2rem; margin-bottom: 4px; }
.deliverable-head .deliverable-tag {
font-size: 0.7rem;
font-weight: 800;
color: var(--accent);
letter-spacing: 0.12em;
text-transform: uppercase;
}
.deliverable-body { padding: 24px 26px 26px; }
.deliverable-section-label {
font-size: 0.65rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--accent-2);
margin: 14px 0 8px;
display: flex; align-items: center; gap: 8px;
}
.deliverable-section-label:first-child { margin-top: 0; }
.deliverable-section-label::before {
content: '';
width: 16px; height: 2px;
background: var(--accent);
}
.deliverable-body ul { display: flex; flex-direction: column; gap: 8px; }
.deliverable-body li {
display: flex; align-items: flex-start; gap: 8px;
font-size: 0.88rem;
color: var(--ink);
line-height: 1.45;
}
.deliverable-body li svg {
width: 16px; height: 16px;
color: var(--success);
flex-shrink: 0;
margin-top: 2px;
}
/* TOOLS STACK GRID (services version) */
.svc-tools-grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 12px;
}
.svc-tool-card {
background: var(--surface);
border: 1px solid var(--line);
border-radius: 12px;
padding: 22px 16px;
text-align: center;
transition: all var(--t);
}
.svc-tool-card:hover { transform: translateY(-3px); border-color: var(--accent); box-shadow: var(--shadow-sm); }
.svc-tool-icon { width: 48px; height: 48px; margin: 0 auto 12px; display: flex; align-items: center; justify-content: center; }
.svc-tool-icon svg, .svc-tool-icon img { width: 100%; height: 100%; object-fit: contain; }
.svc-tool-name { font-size: 0.78rem; font-weight: 600; color: var(--ink); }
/* INDUSTRIES SERVED (services version) */
.svc-industries-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
}
.svc-industry-card {
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 26px 22px;
text-align: left;
transition: all var(--t);
}
.svc-industry-card:hover {
transform: translateY(-4px);
border-color: var(--accent);
box-shadow: var(--shadow-sm);
}
.svc-industry-icon {
width: 44px; height: 44px;
background: var(--accent-soft);
border-radius: 12px;
display: grid; place-items: center;
margin-bottom: 14px;
color: var(--ink);
transition: all var(--t);
}
.svc-industry-card:hover .svc-industry-icon { background: var(--ink); color: var(--accent); }
.svc-industry-icon svg { width: 22px; height: 22px; stroke-width: 1.8; }
.svc-industry-card h4 { font-size: 1rem; margin-bottom: 4px; }
.svc-industry-card p { font-size: 0.82rem; color: var(--ink-2); line-height: 1.45; }
/* SERVICE TESTIMONIALS */
.svc-testimonials-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
}
.svc-testimonial {
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 28px 26px;
position: relative;
transition: all var(--t);
}
.svc-testimonial:hover {
transform: translateY(-4px);
box-shadow: var(--shadow);
border-color: var(--accent);
}
.svc-testimonial .svc-test-service {
display: inline-block;
padding: 4px 10px;
background: var(--accent);
color: var(--ink);
border-radius: 100px;
font-size: 0.65rem;
font-weight: 800;
letter-spacing: 0.1em;
text-transform: uppercase;
margin-bottom: 16px;
}
.svc-testimonial-text {
font-size: 1rem;
line-height: 1.55;
color: var(--ink);
margin-bottom: 20px;
font-weight: 500;
}
.svc-testimonial-text::before {
content: '"';
display: block;
font-family: Georgia, serif;
font-size: 3rem;
line-height: 0.5;
color: var(--accent);
margin-bottom: 12px;
}
.svc-testimonial-author {
display: flex; align-items: center; gap: 14px;
padding-top: 18px;
border-top: 1px solid var(--line);
}
.svc-testimonial-avatar {
width: 44px; height: 44px;
border-radius: 50%;
background: linear-gradient(135deg, var(--accent), var(--accent-2));
color: var(--ink);
display: grid; place-items: center;
font-weight: 900;
font-size: 1.1rem;
}
.svc-testimonial-name { font-weight: 700; font-size: 0.92rem; }
.svc-testimonial-meta { font-size: 0.78rem; color: var(--ink-3); }
/* WHY GROWNIX 2-COL */
.why-svc-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
}
.why-svc-card {
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 28px 26px;
transition: all var(--t);
position: relative;
overflow: hidden;
}
.why-svc-card:hover {
border-color: var(--accent);
box-shadow: var(--shadow-sm);
transform: translateY(-4px);
}
.why-svc-card::before {
content: '';
position: absolute;
top: 0; left: 0;
width: 3px; height: 100%;
background: var(--accent);
transform: scaleY(0);
transform-origin: top;
transition: transform 0.4s ease;
}
.why-svc-card:hover::before { transform: scaleY(1); }
.why-svc-num {
font-size: 2.6rem;
font-weight: 900;
color: var(--accent-2);
line-height: 1;
margin-bottom: 14px;
letter-spacing: -0.04em;
}
.why-svc-card h4 { font-size: 1.05rem; margin-bottom: 8px; }
.why-svc-card p { color: var(--ink-2); font-size: 0.88rem; line-height: 1.55; }
/* SERVICE STATS BAND */
.service-results-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
}
.service-result-card {
background: var(--ink);
color: var(--surface);
border-radius: var(--radius);
padding: 32px 28px;
position: relative;
overflow: hidden;
}
.service-result-card::before {
content: '';
position: absolute; inset: 0;
background: radial-gradient(ellipse at top right, rgba(74,222,128,0.12) 0%, transparent 50%);
}
.service-result-card > * { position: relative; }
.service-result-tag {
display: inline-block;
font-size: 0.72rem;
font-weight: 800;
letter-spacing: 0.12em;
color: var(--accent);
text-transform: uppercase;
margin-bottom: 12px;
}
.service-result-num {
font-size: 3rem;
font-weight: 900;
color: var(--accent);
line-height: 1;
margin-bottom: 8px;
letter-spacing: -0.03em;
}
.service-result-text {
color: rgba(255, 255, 255, 0.85);
font-size: 0.95rem;
line-height: 1.5;
}
/* CONTACT HERO — Bold dark dramatic */
.contact-hero {
position: relative;
padding: 130px 0 50px;
background:
radial-gradient(ellipse 60% 50% at 20% 20%, rgba(74, 222, 128, 0.22) 0%, transparent 50%),
radial-gradient(ellipse 50% 40% at 80% 80%, rgba(74, 222, 128, 0.12) 0%, transparent 50%),
linear-gradient(135deg, var(--ink) 0%, #1A1A1A 100%);
color: var(--surface);
overflow: hidden;
}
.contact-hero::before {
content: ''; position: absolute; inset: 0;
background-image:
linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
background-size: 60px 60px;
mask-image: radial-gradient(ellipse at center, black 30%, transparent 70%);
-webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 70%);
pointer-events: none;
}
.contact-hero > * { position: relative; z-index: 2; }
.contact-hero-center {
text-align: center;
max-width: 880px;
margin: 0 auto 48px;
}
.contact-hero-online {
display: inline-flex; align-items: center; gap: 10px;
padding: 8px 18px;
background: rgba(34, 197, 94, 0.12);
border: 1px solid rgba(34, 197, 94, 0.3);
border-radius: 100px;
font-size: 0.82rem; font-weight: 700;
color: #22c55e;
margin-bottom: 24px;
text-transform: uppercase; letter-spacing: 0.1em;
}
.contact-hero-online .pulse-dot {
width: 8px; height: 8px;
background: #22c55e;
border-radius: 50%;
position: relative;
}
.contact-hero-online .pulse-dot::after {
content: ''; position: absolute; inset: -4px;
border: 2px solid #22c55e;
border-radius: 50%;
animation: pulse 1.5s infinite;
}
.contact-hero h1 {
color: var(--surface);
font-size: clamp(2rem, 5vw, 4rem);
line-height: 1.05;
margin-bottom: 24px;
letter-spacing: -0.03em;
font-weight: 800;
}
.contact-hero h1 .underlined {
position: relative;
display: inline-block;
white-space: nowrap;
}
.contact-hero h1 .underlined::before {
content: ''; position: absolute;
left: -2%; right: -2%; bottom: 4%;
height: 28%;
background: var(--accent);
z-index: -1;
border-radius: 6px;
transform: rotate(-1.5deg);
}
.contact-hero p.lead {
color: rgba(255, 255, 255, 0.78);
font-size: clamp(1rem, 1.6vw, 1.2rem);
line-height: 1.55;
margin-bottom: 36px;
max-width: 720px;
margin-left: auto;
margin-right: auto;
}
.contact-hero-cta-row {
display: flex; gap: 14px;
justify-content: center;
flex-wrap: wrap;
margin-bottom: 48px;
}
.contact-hero-cta-row .btn-yellow,
.contact-hero-cta-row .btn-whatsapp {
padding: 18px 32px;
font-size: 1rem;
border-radius: 100px;
}
.contact-hero-cta-row .btn-whatsapp {
background: #25D366;
color: #fff;
font-weight: 700;
display: inline-flex; align-items: center; gap: 10px;
border: 0;
box-shadow: 0 8px 24px rgba(37, 211, 102, 0.35);
transition: all var(--t);
}
.contact-hero-cta-row .btn-whatsapp:hover { background: #1da851; transform: translateY(-2px); color: #fff; }
.contact-hero-stats {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: var(--radius);
padding: 28px 0;
max-width: 920px;
margin: 0 auto;
backdrop-filter: blur(10px);
}
.contact-hero-stat {
text-align: center;
position: relative;
padding: 0 16px;
}
.contact-hero-stat:not(:last-child)::after {
content: '';
position: absolute; top: 20%; bottom: 20%; right: 0;
width: 1px;
background: rgba(74, 222, 128, 0.2);
}
.contact-hero-stat .num {
font-size: clamp(1.6rem, 3vw, 2.4rem);
font-weight: 900;
color: var(--accent);
line-height: 1;
margin-bottom: 6px;
letter-spacing: -0.02em;
}
.contact-hero-stat .label {
font-size: 0.78rem;
color: rgba(255,255,255,0.65);
font-weight: 500;
letter-spacing: 0.04em;
}
/* CONTACT FORM SECTION (overlapping hero) — Clean modern */
.contact-form-section-pop {
margin-top: -60px;
padding-bottom: 60px;
position: relative;
z-index: 5;
}
.contact-form-pop {
max-width: 760px;
margin: 0 auto;
background: var(--surface);
border-radius: var(--radius-lg);
box-shadow: 0 30px 80px -20px rgba(17, 17, 17, 0.4);
border: 1px solid var(--line);
overflow: hidden;
position: relative;
}
.contact-form-pop::before {
content: '';
position: absolute; top: 0; left: 0; right: 0;
height: 5px;
background: linear-gradient(90deg, var(--accent) 0%, var(--accent-2) 50%, var(--accent) 100%);
z-index: 1;
}
.contact-form-header {
padding: 36px 44px 24px;
text-align: center;
border-bottom: 1px solid var(--line);
}
.contact-form-header .form-badge {
display: inline-flex; align-items: center; gap: 8px;
padding: 6px 14px;
background: var(--accent-soft);
border-radius: 100px;
font-size: 0.7rem;
font-weight: 800;
color: var(--ink);
text-transform: uppercase;
letter-spacing: 0.12em;
margin-bottom: 14px;
}
.contact-form-header h2 {
font-size: 1.6rem;
line-height: 1.2;
margin-bottom: 8px;
}
.contact-form-header p {
color: var(--ink-2);
font-size: 0.95rem;
}
.contact-form-body {
padding: 32px 44px 36px;
}
.contact-form-body .form-section-label {
font-size: 0.7rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--ink-3);
margin: 8px 0 14px;
display: flex; align-items: center; gap: 10px;
}
.contact-form-body .form-section-label::before {
content: '';
width: 24px; height: 2px;
background: var(--accent);
}
/* Premium form fields */
.contact-form-body .form-group { margin-bottom: 18px; }
.contact-form-body .form-label {
display: block;
font-size: 0.82rem;
font-weight: 700;
color: var(--ink);
margin-bottom: 8px;
letter-spacing: -0.01em;
}
.contact-form-body .form-label .req { color: #DC2626; margin-left: 2px; }
.contact-form-body .form-control {
width: 100%;
padding: 14px 18px;
background: var(--bg-soft);
border: 1.5px solid var(--line);
border-radius: 12px;
color: var(--ink);
font-family: inherit;
font-size: 0.95rem;
transition: all var(--t);
font-weight: 500;
}
.contact-form-body .form-control:hover { border-color: var(--line-2); background: var(--surface); }
.contact-form-body .form-control:focus {
outline: 0;
border-color: var(--accent-2);
background: var(--surface);
box-shadow: 0 0 0 4px rgba(74, 222, 128, 0.12);
}
.contact-form-body .form-control::placeholder { color: var(--ink-3); font-weight: 400; }
.contact-form-body select.form-control {
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%231F2A44'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 14px center;
background-size: 18px;
padding-right: 44px;
cursor: pointer;
}
.contact-form-body textarea.form-control { min-height: 120px; resize: vertical; }
.contact-form-body .form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
margin-bottom: 18px;
}
.contact-form-body .form-submit-row {
display: flex; align-items: center; gap: 16px;
flex-wrap: wrap;
margin-top: 8px;
padding-top: 24px;
border-top: 1px solid var(--line);
}
.contact-form-body .submit-trust {
display: flex; align-items: center; gap: 8px;
flex: 1;
font-size: 0.82rem;
color: var(--ink-2);
}
.contact-form-body .submit-trust svg {
width: 16px; height: 16px;
color: var(--success);
flex-shrink: 0;
}
.contact-form-body .btn-submit {
padding: 16px 32px;
font-weight: 800;
font-size: 0.95rem;
letter-spacing: -0.01em;
background: var(--ink);
color: var(--accent);
border-radius: 100px;
border: 0;
display: inline-flex; align-items: center; gap: 10px;
cursor: pointer;
transition: all var(--t);
box-shadow: 0 8px 20px -6px rgba(17, 17, 17, 0.4);
}
.contact-form-body .btn-submit:hover {
background: var(--accent);
color: var(--ink);
transform: translateY(-2px);
box-shadow: 0 14px 28px -8px rgba(74, 222, 128, 0.5);
}
.contact-form-body .btn-submit svg { width: 16px; height: 16px; transition: transform var(--t); }
.contact-form-body .btn-submit:hover svg { transform: translateX(4px); }
.contact-form-body .form-disclaimer {
font-size: 0.78rem;
color: var(--ink-3);
margin-top: 16px;
text-align: center;
line-height: 1.55;
}
.contact-form-body .form-disclaimer a { color: var(--accent-hover); }
/* CHANNEL CARDS BAR */
.channels-bar {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
}
.channel-card {
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 24px 20px;
display: flex; align-items: center; gap: 16px;
transition: all var(--t);
text-decoration: none;
}
.channel-card:hover {
transform: translateY(-4px);
border-color: var(--accent);
box-shadow: var(--shadow);
}
.channel-card-icon {
width: 48px; height: 48px;
border-radius: 12px;
display: grid; place-items: center;
flex-shrink: 0;
}
.channel-card-icon.whatsapp { background: #25D366; color: #fff; }
.channel-card-icon.email { background: var(--accent); color: var(--ink); }
.channel-card-icon.phone { background: var(--ink); color: var(--accent); }
.channel-card-icon.calendar { background: linear-gradient(135deg, #6366F1, #4F46E5); color: #fff; }
.channel-card-icon svg { width: 22px; height: 22px; }
.channel-card-text { flex: 1; min-width: 0; }
.channel-card-text h4 {
font-size: 0.95rem;
margin-bottom: 2px;
font-weight: 700;
}
.channel-card-text p {
font-size: 0.78rem;
color: var(--ink-3);
line-height: 1.4;
}
/* CONTACT HERO — Split layout with form on right */
.contact-hero-grid-old {
display: grid;
grid-template-columns: 1fr 1.1fr;
gap: 56px;
align-items: stretch;
}
.contact-hero-left {
padding: 16px 0;
}
.contact-hero-eyebrow {
display: inline-flex; align-items: center; gap: 10px;
padding: 8px 16px;
background: var(--surface);
border: 1px solid var(--line);
border-radius: 100px;
font-size: 0.78rem; font-weight: 700;
color: var(--ink-2);
margin-bottom: 20px;
text-transform: uppercase; letter-spacing: 0.12em;
box-shadow: var(--shadow-sm);
}
.contact-hero-eyebrow .pulse {
width: 8px; height: 8px;
background: var(--success);
border-radius: 50%;
position: relative;
}
.contact-hero-eyebrow .pulse::after {
content: ''; position: absolute; inset: -4px;
border: 2px solid var(--success);
border-radius: 50%;
animation: pulse 2s infinite;
}
.contact-hero-left h1 {
font-size: clamp(1.8rem, 3.6vw, 2.8rem);
line-height: 1.15;
margin-bottom: 18px;
font-weight: 700;
letter-spacing: -0.02em;
}
.contact-hero-left p.lead {
color: var(--ink-2);
font-size: 1.02rem;
line-height: 1.6;
margin-bottom: 32px;
}
.contact-perks-list { display: flex; flex-direction: column; gap: 14px; margin-bottom: 32px; }
.contact-perks-list .perk-row {
display: flex; align-items: center; gap: 14px;
}
.contact-perks-list .perk-icon {
width: 38px; height: 38px;
background: var(--accent);
border-radius: 50%;
display: grid; place-items: center;
flex-shrink: 0;
color: var(--ink);
box-shadow: 0 4px 12px rgba(74, 222, 128, 0.3);
}
.contact-perks-list .perk-icon svg { width: 18px; height: 18px; stroke-width: 3; }
.contact-perks-list .perk-text {
font-weight: 600;
color: var(--ink);
font-size: 0.95rem;
}
.contact-perks-list .perk-text small {
display: block;
color: var(--ink-3);
font-weight: 500;
font-size: 0.82rem;
margin-top: 2px;
}
.contact-hero-rating {
display: flex; align-items: center; gap: 14px;
padding: 14px 18px;
background: var(--surface);
border: 1px solid var(--line);
border-radius: 12px;
box-shadow: var(--shadow-sm);
}
.contact-hero-rating .stars { display: flex; gap: 2px; }
.contact-hero-rating .stars svg { width: 16px; height: 16px; color: var(--accent-2); }
.contact-hero-rating-text { font-size: 0.88rem; color: var(--ink-2); }
.contact-hero-rating-text strong { color: var(--ink); font-weight: 800; }
/* CONTACT FORM CARD */
.contact-form-card {
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
padding: 40px 36px;
box-shadow: var(--shadow);
position: relative;
overflow: hidden;
}
.contact-form-card::before {
content: '';
position: absolute; top: 0; left: 0; right: 0;
height: 4px;
background: linear-gradient(90deg, var(--accent) 0%, var(--accent-2) 100%);
}
.contact-form-card h2 {
font-size: 1.35rem;
margin-bottom: 6px;
}
.contact-form-card .form-sub {
color: var(--ink-2);
font-size: 0.92rem;
margin-bottom: 24px;
}
.contact-form-card .form-disclaimer {
font-size: 0.78rem;
color: var(--ink-3);
margin-top: 16px;
text-align: center;
line-height: 1.5;
}
/* CONTACT METHODS */
.contact-methods-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}
.contact-method-card {
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 28px 24px;
text-align: center;
transition: all var(--t);
text-decoration: none;
display: block;
}
.contact-method-card:hover {
transform: translateY(-6px);
border-color: var(--accent);
box-shadow: var(--shadow);
}
.contact-method-icon {
width: 56px; height: 56px;
border-radius: 14px;
display: grid; place-items: center;
margin: 0 auto 16px;
transition: transform var(--t);
}
.contact-method-card:hover .contact-method-icon { transform: rotate(-6deg); }
.contact-method-icon.whatsapp { background: #25D366; color: #fff; }
.contact-method-icon.email { background: var(--accent); color: var(--ink); }
.contact-method-icon.phone { background: var(--ink); color: var(--accent); }
.contact-method-icon.calendar { background: #6366F1; color: #fff; }
.contact-method-icon svg { width: 24px; height: 24px; }
.contact-method-card h3 {
font-size: 1.05rem;
margin-bottom: 4px;
color: var(--ink);
}
.contact-method-card .method-detail {
color: var(--ink-2);
font-size: 0.85rem;
margin-bottom: 12px;
}
.contact-method-card .method-cta {
font-size: 0.82rem;
font-weight: 700;
color: var(--accent-2);
display: inline-flex;
align-items: center;
gap: 4px;
}
.contact-method-card .method-cta svg { width: 12px; height: 12px; transition: transform var(--t); }
.contact-method-card:hover .method-cta svg { transform: translateX(3px); }
/* WHAT HAPPENS NEXT */
.next-steps-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
position: relative;
}
.next-step {
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 32px 28px;
position: relative;
transition: all var(--t);
}
.next-step:hover { border-color: var(--accent); box-shadow: var(--shadow-sm); transform: translateY(-4px); }
.next-step-num {
position: absolute;
top: -16px;
left: 28px;
background: var(--ink);
color: var(--accent);
font-size: 0.78rem;
font-weight: 800;
letter-spacing: 0.1em;
padding: 6px 14px;
border-radius: 100px;
}
.next-step-icon {
width: 48px; height: 48px;
background: var(--accent-soft);
border-radius: 12px;
display: grid; place-items: center;
margin: 12px 0 16px;
color: var(--ink);
}
.next-step-icon svg { width: 24px; height: 24px; }
.next-step h3 {
font-size: 1.15rem;
margin-bottom: 8px;
}
.next-step p {
color: var(--ink-2);
font-size: 0.92rem;
line-height: 1.55;
}
.next-step-time {
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: 14px;
padding-top: 14px;
border-top: 1px solid var(--line);
font-size: 0.78rem;
font-weight: 700;
color: var(--ink-3);
}
.next-step-time svg { width: 14px; height: 14px; color: var(--accent-2); }
/* OFFICE LARGE CARD */
.office-large-card {
background: var(--ink);
border-radius: var(--radius-lg);
padding: 0;
overflow: hidden;
display: grid;
grid-template-columns: 1.2fr 1fr;
}
.office-large-image {
background-size: cover;
background-position: center;
min-height: 400px;
position: relative;
}
.office-large-image::after {
content: '';
position: absolute; inset: 0;
background: linear-gradient(90deg, rgba(17, 17, 17, 0.45), transparent);
}
.office-large-content {
padding: 48px 44px;
color: var(--surface);
display: flex;
flex-direction: column;
justify-content: center;
}
.office-large-content .office-tag {
display: inline-block;
font-size: 0.72rem;
font-weight: 800;
letter-spacing: 0.12em;
color: var(--accent);
text-transform: uppercase;
margin-bottom: 12px;
}
.office-large-content h2 {
color: var(--surface);
font-size: 2rem;
margin-bottom: 16px;
}
.office-large-content p {
color: rgba(255,255,255,0.75);
font-size: 1rem;
line-height: 1.6;
margin-bottom: 28px;
}
.office-info-list { display: flex; flex-direction: column; gap: 14px; margin-bottom: 28px; }
.office-info-item {
display: flex; align-items: flex-start; gap: 14px;
color: rgba(255,255,255,0.85);
}
.office-info-item .info-icon-circle {
width: 36px; height: 36px;
background: rgba(74,222,128,0.12);
border: 1px solid rgba(74,222,128,0.3);
border-radius: 50%;
display: grid; place-items: center;
color: var(--accent);
flex-shrink: 0;
}
.office-info-item .info-icon-circle svg { width: 16px; height: 16px; }
.office-info-item div { display: flex; flex-direction: column; }
.office-info-item .info-label {
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.1em;
color: rgba(255,255,255,0.5);
font-weight: 700;
margin-bottom: 2px;
}
.office-info-item .info-value {
font-size: 0.95rem;
color: var(--surface);
font-weight: 600;
}
.office-info-item .info-value a { color: var(--surface); }
.office-info-item .info-value a:hover { color: var(--accent); }
/* ABOUT HERO — Image background with overlay */
.about-hero {
position: relative;
padding: 180px 0 100px;
overflow: hidden;
background: var(--ink);
}
.about-hero-bg {
position: absolute; inset: 0;
background-size: cover;
background-position: center;
opacity: 0.35;
}
.about-hero::after {
content: ''; position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(17,17,17,0.65) 0%, rgba(17,17,17,0.85) 60%, var(--ink) 100%);
}
.about-hero-inner { position: relative; z-index: 2; max-width: 880px; margin: 0 auto; text-align: center; }
.about-hero-eyebrow {
display: inline-flex; align-items: center; gap: 8px;
padding: 8px 18px;
background: rgba(74, 222, 128, 0.12);
border: 1px solid rgba(74, 222, 128, 0.35);
color: var(--accent);
border-radius: 100px;
font-size: 0.78rem; font-weight: 700;
text-transform: uppercase; letter-spacing: 0.12em;
margin-bottom: 24px;
}
.about-hero h1 {
color: var(--surface);
font-size: clamp(1.6rem, 3.4vw, 2.6rem);
font-weight: 700;
line-height: 1.2;
margin-bottom: 20px;
letter-spacing: -0.02em;
}
.about-hero p.lead {
color: rgba(255,255,255,0.78);
font-size: clamp(1rem, 1.5vw, 1.2rem);
line-height: 1.6;
margin-bottom: 32px;
max-width: 720px;
margin-left: auto;
margin-right: auto;
}
.about-hero-stats {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 32px;
margin-top: 48px;
padding-top: 40px;
border-top: 1px solid rgba(74, 222, 128, 0.2);
}
.about-hero-stat { text-align: center; }
.about-hero-stat .num {
font-size: clamp(1.8rem, 3.5vw, 2.6rem);
font-weight: 900;
color: var(--accent);
line-height: 1;
margin-bottom: 8px;
}
.about-hero-stat .label {
font-size: 0.85rem;
color: rgba(255,255,255,0.7);
font-weight: 500;
}
/* TIMELINE STORY */
.story-timeline {
position: relative;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.story-timeline::before {
content: '';
position: absolute;
top: 36px; left: 8%; right: 8%;
height: 2px;
background: var(--accent);
z-index: 0;
}
.story-step {
position: relative;
z-index: 1;
text-align: left;
}
.story-step-marker {
width: 72px; height: 72px;
background: var(--surface);
border: 2px solid var(--accent);
border-radius: 50%;
display: grid; place-items: center;
margin: 0 auto 24px;
font-weight: 900;
font-size: 1.4rem;
color: var(--ink);
position: relative;
}
.story-step-year {
display: block;
font-size: 0.65rem;
font-weight: 700;
color: var(--accent-2);
text-transform: uppercase;
letter-spacing: 0.12em;
position: absolute;
bottom: -8px;
background: var(--surface);
padding: 2px 8px;
border-radius: 100px;
}
.story-step h3 {
font-size: 1.25rem;
margin-bottom: 12px;
text-align: center;
}
.story-step p {
color: var(--ink-2);
font-size: 0.95rem;
line-height: 1.65;
text-align: center;
}
/* TEAM SHOWCASE */
.team-showcase {
display: grid;
grid-template-columns: 2fr 1fr 1fr;
grid-template-rows: 1fr 1fr;
gap: 16px;
height: 600px;
}
.team-showcase-item {
position: relative;
border-radius: var(--radius);
overflow: hidden;
cursor: pointer;
}
.team-showcase-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.team-showcase-item:hover img { transform: scale(1.06); }
.team-showcase-item.tall { grid-row: span 2; }
.team-showcase-item::after {
content: '';
position: absolute; inset: 0;
background: linear-gradient(180deg, transparent 50%, rgba(17,17,17,0.85) 100%);
}
.team-showcase-content {
position: absolute;
bottom: 0; left: 0; right: 0;
padding: 24px;
z-index: 1;
}
.team-showcase-content h3 {
color: var(--surface);
font-size: 1.2rem;
margin-bottom: 4px;
}
.team-showcase-content p {
color: rgba(255,255,255,0.85);
font-size: 0.85rem;
}
/* DIFFERENCE SPLIT */
.difference-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0;
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
overflow: hidden;
}
.difference-col {
padding: 36px 32px;
}
.difference-col.them {
background: var(--bg-warm);
color: var(--ink-3);
}
.difference-col.us {
background: var(--ink);
color: var(--surface);
position: relative;
}
.difference-col.us::before {
content: '';
position: absolute; top: 0; left: 0; right: 0;
height: 4px;
background: var(--accent);
}
.difference-col h3 {
font-size: 0.85rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.12em;
margin-bottom: 24px;
padding-bottom: 16px;
border-bottom: 1px solid currentColor;
opacity: 0.6;
}
.difference-col.us h3 { color: var(--accent); border-color: rgba(74,222,128,0.25); opacity: 1; }
.difference-col ul { display: flex; flex-direction: column; gap: 16px; }
.difference-col li {
display: flex; align-items: flex-start; gap: 12px;
font-size: 0.95rem;
line-height: 1.55;
}
.difference-col li svg { flex-shrink: 0; width: 20px; height: 20px; margin-top: 2px; }
.difference-col.them li svg { color: #DC2626; }
.difference-col.us li svg { color: var(--accent); }
/* FOUNDER PROMISE */
.founder-promise {
background: linear-gradient(135deg, var(--bg-warm) 0%, var(--accent-soft) 100%);
border: 2px solid var(--accent);
border-radius: var(--radius-lg);
padding: 56px;
display: grid;
grid-template-columns: 1.4fr 1fr;
gap: 56px;
align-items: center;
position: relative;
overflow: hidden;
}
.founder-promise::before {
content: '"';
position: absolute;
top: 16px; left: 32px;
font-family: Georgia, serif;
font-size: 8rem;
line-height: 1;
color: var(--accent);
opacity: 0.4;
}
.founder-promise-content { position: relative; }
.founder-promise-content blockquote {
font-size: 1.35rem;
line-height: 1.55;
font-style: italic;
color: var(--ink);
margin-bottom: 24px;
font-weight: 500;
}
.founder-promise-photo {
position: relative;
border-radius: var(--radius);
overflow: hidden;
aspect-ratio: 4/5;
box-shadow: var(--shadow);
}
.founder-promise-photo img { width: 100%; height: 100%; object-fit: cover; }
.founder-promise-photo .photo-tag {
position: absolute;
bottom: 18px; left: 18px;
background: var(--surface);
padding: 10px 16px;
border-radius: 10px;
font-size: 0.85rem;
font-weight: 700;
}
/* CULTURE STRIP */
.culture-strip {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}
.culture-card {
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 28px 24px;
text-align: left;
transition: all var(--t);
}
.culture-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow);
border-color: var(--accent);
}
.culture-card .culture-num {
font-size: 2.4rem;
font-weight: 900;
color: var(--accent-2);
line-height: 1;
margin-bottom: 12px;
display: block;
}
.culture-card h4 {
font-size: 1rem;
margin-bottom: 6px;
}
.culture-card p {
color: var(--ink-2);
font-size: 0.85rem;
line-height: 1.55;
}
/* PAGE HEADER, matches hero gradient on homepage */
.page-header {
padding: 160px 0 60px;
position: relative;
overflow: hidden;
background:
radial-gradient(ellipse 80% 60% at 50% 0%, rgba(74, 222, 128, 0.25) 0%, transparent 60%),
radial-gradient(ellipse 60% 40% at 100% 100%, rgba(74, 222, 128, 0.12) 0%, transparent 50%),
linear-gradient(180deg, var(--bg-soft) 0%, var(--bg) 100%);
text-align: center;
border-bottom: 1px solid var(--line);
}
.page-header::before {
content: ''; position: absolute; inset: 0;
background-image: radial-gradient(circle, rgba(17, 17, 17, 0.04) 1px, transparent 1px);
background-size: 24px 24px;
mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
-webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
pointer-events: none;
}
.page-header > * { position: relative; }
.page-header h1 { margin-bottom: 20px; }
.page-header p { color: var(--ink-2); font-size: 1.2rem; max-width: 760px; margin: 0 auto; line-height: 1.6; }
/* LEGAL PAGES */
.legal-content { max-width: 880px; margin: 0 auto; padding: 80px 0 120px; }
.legal-content h2 { margin: 48px 0 18px; font-size: 1.6rem; color: var(--ink); }
.legal-content h3 { margin: 28px 0 14px; font-size: 1.2rem; color: var(--ink); }
.legal-content p, .legal-content li { color: var(--ink-2); margin-bottom: 14px; line-height: 1.78; }
.legal-content ul { padding-left: 28px; list-style: disc; margin-bottom: 18px; }
.legal-content a { color: var(--accent-hover); text-decoration: underline; }
/* THANK YOU */
.thank-you-wrap {
min-height: 100vh;
display: grid; place-items: center;
text-align: center;
padding: 140px 24px 80px;
}
.thank-you-icon {
width: 120px; height: 120px;
border-radius: 50%;
background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
color: var(--ink);
display: grid; place-items: center;
margin: 0 auto 36px;
box-shadow: var(--shadow-yellow);
}
.thank-you-icon svg { width: 56px; height: 56px; }
/* CHECK LIST */
.check-list { display: flex; flex-direction: column; gap: 14px; }
.check-list li {
display: flex; align-items: flex-start; gap: 12px;
color: var(--ink-2);
line-height: 1.65;
}
.check-list li::before {
content: ''; width: 24px; height: 24px;
flex-shrink: 0;
background: var(--accent);
border-radius: 50%;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%231F2A44'%3E%3Cpath d='M16.7 5.3a1 1 0 0 1 0 1.4l-8 8a1 1 0 0 1-1.4 0l-4-4a1 1 0 0 1 1.4-1.4L8 12.6l7.3-7.3a1 1 0 0 1 1.4 0z'/%3E%3C/svg%3E");
background-size: 14px;
background-position: center;
background-repeat: no-repeat;
margin-top: 2px;
}
/* HERO VISUAL — Dashboard mockup */
.hero-visual {
position: relative;
margin: 40px auto 0;
max-width: 1080px;
padding: 0 16px;
}
.hero-visual-card {
position: relative;
background: linear-gradient(135deg, var(--ink) 0%, #1A1A1A 100%);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
padding: 14px;
box-shadow: var(--shadow-lg);
overflow: hidden;
}
.hero-visual-card img { background: var(--bg-warm); min-height: 300px; }
/* Hero Photo Card — Real team photo */
.hero-photo-card {
position: relative;
border-radius: var(--radius-lg);
/* overflow: visible lets the floating stat cards extend outside the image bounds */
overflow: visible;
box-shadow: var(--shadow-lg);
background: var(--ink);
}
.hero-photo-card img {
width: 100%; height: auto;
display: block;
border-radius: var(--radius-lg);
border: 1px solid var(--line);
aspect-ratio: 16/10;
object-fit: cover;
}
.hero-photo-floats { position: absolute; inset: 0; pointer-events: none; }
/* HERO DASHBOARD MOCKUP */
.hero-dashboard { position: relative; }
.dashboard-window {
background: var(--surface);
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow-lg);
border: 1px solid var(--line);
}
.dashboard-bar {
display: flex; align-items: center; justify-content: space-between;
padding: 12px 16px;
background: var(--bg-soft);
border-bottom: 1px solid var(--line);
}
.dashboard-dots { display: flex; gap: 6px; }
.dashboard-dots span {
width: 12px; height: 12px;
border-radius: 50%;
display: inline-block;
}
.dashboard-dots span:nth-child(1) { background: #FF5F57; }
.dashboard-dots span:nth-child(2) { background: #FEBC2E; }
.dashboard-dots span:nth-child(3) { background: #28C840; }
.dashboard-url {
background: var(--surface);
border: 1px solid var(--line);
border-radius: 6px;
padding: 5px 14px;
font-size: 0.75rem;
font-weight: 500;
color: var(--ink-3);
font-family: 'Inter', monospace;
}
.dashboard-body {
display: grid;
grid-template-columns: 80px 1fr;
background: var(--bg-soft);
}
.dashboard-sidebar {
background: var(--ink);
padding: 24px 20px;
display: flex; flex-direction: column;
gap: 8px; align-items: center;
}
.sidebar-logo {
width: 40px; height: 40px;
background: var(--accent);
color: var(--ink);
border-radius: 10px;
display: grid; place-items: center;
font-weight: 900; font-size: 1.2rem;
margin-bottom: 16px;
}
.sidebar-item {
width: 40px; height: 40px;
border-radius: 10px;
display: grid; place-items: center;
color: rgba(255, 255, 255, 0.5);
cursor: pointer;
transition: all var(--t);
}
.sidebar-item.active { background: rgba(74, 222, 128, 0.15); color: var(--accent); }
.sidebar-item svg { width: 20px; height: 20px; }
.dashboard-main { padding: 28px 32px; }
.dashboard-header {
display: flex; align-items: center; justify-content: space-between;
margin-bottom: 24px;
}
.dashboard-title { font-size: 1.15rem; font-weight: 700; color: var(--ink); }
.dashboard-subtitle { font-size: 0.78rem; color: var(--ink-3); margin-top: 4px; }
.dashboard-badge {
background: rgba(22, 163, 74, 0.1);
color: var(--success);
padding: 6px 12px;
border-radius: 100px;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.05em;
}
.dashboard-kpis {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
margin-bottom: 24px;
}
.kpi-tile {
background: var(--surface);
border: 1px solid var(--line);
border-radius: 12px;
padding: 16px;
}
.kpi-label { font-size: 0.7rem; color: var(--ink-3); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 6px; }
.kpi-value { font-size: 1.5rem; font-weight: 800; color: var(--ink); line-height: 1; margin-bottom: 6px; }
.kpi-trend { font-size: 0.78rem; font-weight: 700; }
.kpi-trend.up { color: var(--success); }
.dashboard-chart {
background: var(--surface);
border: 1px solid var(--line);
border-radius: 12px;
padding: 20px;
}
.chart-header {
display: flex; align-items: center; justify-content: space-between;
margin-bottom: 20px;
}
.chart-title { font-size: 0.95rem; font-weight: 700; color: var(--ink); }
.chart-legend { display: flex; align-items: center; gap: 12px; font-size: 0.72rem; color: var(--ink-2); font-weight: 500; }
.legend-dot {
display: inline-block;
width: 10px; height: 10px;
border-radius: 3px;
margin-right: 4px;
vertical-align: middle;
}
.chart-bars {
display: flex; align-items: flex-end; justify-content: space-between;
gap: 12px;
height: 100px;
margin-bottom: 8px;
}
.chart-bar-group {
flex: 1;
display: flex; align-items: flex-end;
gap: 3px;
height: 100%;
}
.chart-bar {
flex: 1;
background: var(--accent-2);
border-radius: 4px 4px 0 0;
transition: height 0.6s ease;
}
.chart-bar.bar-back { background: rgba(74, 222, 128, 0.3); }
.chart-axis {
display: flex; justify-content: space-between;
font-size: 0.7rem;
color: var(--ink-3);
font-weight: 500;
}
.hero-visual-card img {
width: 100%;
height: auto;
border-radius: var(--radius);
display: block;
}
.hero-visual-floats { position: absolute; inset: 0; pointer-events: none; }
.float-card {
position: absolute;
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 14px 18px;
box-shadow: var(--shadow);
display: flex; align-items: center; gap: 12px;
font-size: 0.88rem;
font-weight: 600;
}
.float-card .float-icon {
width: 38px; height: 38px;
border-radius: 10px;
display: grid; place-items: center;
flex-shrink: 0;
}
.float-card-1 { top: 14%; left: -3%; animation: floatY 4s ease-in-out infinite; }
.float-card-2 { bottom: 12%; right: -4%; animation: floatY 5s ease-in-out infinite reverse; }
.float-card-3 { top: 42%; right: -6%; animation: floatY 6s ease-in-out infinite; animation-delay: -2s; }
@keyframes floatY {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}
.float-card .float-icon.green { background: rgba(22, 163, 74, 0.12); color: var(--success); }
.float-card .float-icon.yellow { background: var(--accent-soft); color: var(--ink); }
.float-card .float-icon.blue { background: rgba(59, 130, 246, 0.12); color: #3B82F6; }
.float-card svg { width: 20px; height: 20px; }
.float-card .float-text strong { display: block; font-size: 1.05rem; color: var(--ink); }
.float-card .float-text span { font-size: 0.78rem; color: var(--ink-3); font-weight: 500; }
/* ABOUT PREVIEW SPLIT */
.split-section {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 80px;
align-items: center;
}
.split-image {
position: relative;
border-radius: var(--radius-lg);
overflow: hidden;
aspect-ratio: 1 / 1.05;
background: linear-gradient(135deg, var(--ink) 0%, #1A1A1A 100%);
}
.split-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.split-image .split-badge {
position: absolute;
bottom: 24px; left: 24px;
background: var(--surface);
border-radius: var(--radius);
padding: 16px 22px;
box-shadow: var(--shadow);
display: flex; align-items: center; gap: 14px;
}
.split-image .split-badge .num { font-size: 2rem; font-weight: 900; color: var(--accent-2); line-height: 1; }
.split-image .split-badge .label { font-size: 0.85rem; color: var(--ink-2); font-weight: 500; line-height: 1.3; }
.split-content h2 { margin-bottom: 24px; }
.split-content p { color: var(--ink-2); font-size: 1.05rem; line-height: 1.75; margin-bottom: 16px; }
.split-content .signature {
display: flex; align-items: center; gap: 16px;
padding-top: 28px;
margin-top: 32px;
border-top: 1px solid var(--line);
}
.split-content .signature-avatar {
width: 56px; height: 56px;
border-radius: 50%;
background: linear-gradient(135deg, var(--accent), var(--accent-2));
color: var(--ink);
display: grid; place-items: center;
font-weight: 800;
font-size: 1.4rem;
}
.split-content .signature-name { font-weight: 700; }
.split-content .signature-role { font-size: 0.88rem; color: var(--ink-3); }
/* ABOUT VISUAL — Stat card stack (no external image dependency) */
.about-visual {
background:
radial-gradient(circle at 0% 0%, rgba(74, 222, 128, 0.18) 0%, transparent 50%),
radial-gradient(circle at 100% 100%, rgba(0, 88, 61, 0.12) 0%, transparent 50%),
linear-gradient(135deg, var(--ink) 0%, #1A1A1A 100%);
display: grid;
place-items: center;
padding: 32px;
}
.about-card-stack {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
width: 100%;
max-width: 420px;
}
.about-stat-card {
background: var(--surface);
border-radius: var(--radius);
padding: 20px;
display: flex; align-items: center; gap: 14px;
box-shadow: var(--shadow);
animation: floatY 5s ease-in-out infinite;
}
.about-stat-card.stat-1 { transform: rotate(-3deg); animation-delay: 0s; }
.about-stat-card.stat-2 { transform: rotate(3deg); animation-delay: -1.5s; }
.about-stat-card.stat-3 { transform: rotate(2deg); animation-delay: -3s; }
.about-stat-card.stat-4 { transform: rotate(-2deg); animation-delay: -2s; }
.about-stat-icon {
width: 48px; height: 48px;
border-radius: 12px;
display: grid; place-items: center;
flex-shrink: 0;
}
.about-stat-icon svg { width: 22px; height: 22px; }
.about-stat-num { font-size: 1.4rem; font-weight: 900; color: var(--ink); line-height: 1; margin-bottom: 4px; }
.about-stat-label { font-size: 0.78rem; color: var(--ink-3); font-weight: 500; }
/* FEATURED CASE STUDY */
.case-study-card {
background: var(--ink);
border-radius: var(--radius-lg);
padding: 48px;
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: 60px;
align-items: center;
position: relative;
overflow: hidden;
}
.case-study-card::before {
content: ''; position: absolute; inset: 0;
background:
radial-gradient(circle at 0% 100%, rgba(74, 222, 128, 0.2) 0%, transparent 50%),
radial-gradient(circle at 100% 0%, rgba(74, 222, 128, 0.1) 0%, transparent 50%);
}
.case-study-card > * { position: relative; z-index: 1; }
.case-study-content .badge {
display: inline-flex; align-items: center; gap: 8px;
padding: 7px 14px;
background: rgba(74, 222, 128, 0.15);
border: 1px solid rgba(74, 222, 128, 0.3);
border-radius: 100px;
font-size: 0.8rem; font-weight: 600;
color: var(--accent);
margin-bottom: 20px;
text-transform: uppercase; letter-spacing: 0.1em;
}
.case-study-content h2 { color: var(--surface); margin-bottom: 20px; font-size: clamp(1.75rem, 3vw, 2.5rem); }
.case-study-content p { color: rgba(255, 255, 255, 0.75); margin-bottom: 32px; line-height: 1.75; }
.case-study-metrics {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
padding: 28px 0;
margin-bottom: 32px;
border-top: 1px solid rgba(255, 255, 255, 0.12);
border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.case-metric { text-align: left; }
.case-metric .num { font-size: 2.2rem; font-weight: 900; color: var(--accent); line-height: 1; margin-bottom: 6px; }
.case-metric .label { font-size: 0.82rem; color: rgba(255, 255, 255, 0.65); }
.case-study-image {
border-radius: var(--radius);
overflow: hidden;
aspect-ratio: 4 / 5;
background: rgba(255, 255, 255, 0.05);
}
.case-study-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* MINI CASE STUDIES GRID */
.mini-cases-header {
display: flex; align-items: center; justify-content: space-between;
margin: 56px 0 24px;
padding-top: 40px;
border-top: 1px solid var(--line);
flex-wrap: wrap; gap: 16px;
}
.mini-cases-header h3 {
font-size: 1.5rem;
margin: 0;
}
.mini-cases-header p {
color: var(--ink-2);
font-size: 0.95rem;
margin: 4px 0 0;
}
.mini-cases-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
}
.mini-case {
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 22px 22px;
transition: all var(--t);
display: flex;
flex-direction: column;
position: relative;
overflow: hidden;
}
.mini-case:hover {
transform: translateY(-4px);
box-shadow: var(--shadow);
border-color: var(--accent);
}
.mini-case:hover::before { transform: scaleX(1); }
.mini-case::before {
content: '';
position: absolute; top: 0; left: 0; right: 0;
height: 3px;
background: var(--accent);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.4s ease;
}
.mini-case-tag-row {
display: flex; align-items: center; justify-content: space-between;
gap: 8px;
margin-bottom: 14px;
}
.mini-case-tag {
font-size: 0.65rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--ink-2);
padding: 4px 10px;
background: var(--bg-warm);
border-radius: 100px;
}
.mini-case-flag {
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--ink);
color: var(--accent);
font-size: 0.65rem;
font-weight: 800;
letter-spacing: 0.06em;
padding: 4px 9px;
border-radius: 4px;
min-width: 28px;
text-align: center;
}
.mini-case-metric {
font-size: 2.2rem;
font-weight: 900;
color: var(--accent-2);
line-height: 1;
margin-bottom: 6px;
letter-spacing: -0.02em;
}
.mini-case-metric-label {
font-size: 0.75rem;
font-weight: 600;
color: var(--ink-3);
margin-bottom: 14px;
}
.mini-case h4 {
font-size: 0.98rem;
margin-bottom: 8px;
line-height: 1.3;
color: var(--ink);
}
.mini-case p {
font-size: 0.85rem;
color: var(--ink-2);
line-height: 1.5;
flex: 1;
margin-bottom: 14px;
}
.mini-case-footer {
display: flex; align-items: center; justify-content: space-between;
padding-top: 12px;
border-top: 1px solid var(--line);
font-size: 0.8rem;
}
.mini-case-service {
font-weight: 700;
color: var(--ink);
}
.mini-case-duration {
color: var(--ink-3);
}
/* INDUSTRIES — Image-backed cards */
.industries-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
}
.industry-card {
position: relative;
border-radius: var(--radius);
overflow: hidden;
cursor: pointer;
transition: all var(--t);
background: var(--ink);
border: 1px solid var(--line);
display: flex;
flex-direction: column;
min-height: 280px;
isolation: isolate;
}
.industry-card-bg {
position: absolute; inset: 0;
background-size: cover;
background-position: center;
z-index: 0;
transition: transform 0.6s ease;
}
.industry-card::after {
content: '';
position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(17,17,17,0.3) 0%, rgba(17,17,17,0.85) 60%, rgba(17,17,17,0.96) 100%);
z-index: 1;
}
.industry-card:hover .industry-card-bg { transform: scale(1.06); }
.industry-card > * { position: relative; z-index: 2; }
.industry-card { padding: 22px 22px; color: var(--surface); }
.industry-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); border-color: var(--accent); }
.industry-card .industry-emoji {
font-size: 2.2rem;
line-height: 1;
margin-bottom: 12px;
display: flex; align-items: center; gap: 10px;
}
.industry-card .industry-emoji-bg {
width: 48px; height: 48px;
border-radius: 12px;
display: grid; place-items: center;
font-size: 1.5rem;
flex-shrink: 0;
}
.industry-card .industry-emoji-bg {
background: var(--accent);
color: var(--ink);
border: 0;
width: 44px; height: 44px;
border-radius: 10px;
font-size: 1.4rem;
flex-shrink: 0;
}
.industry-card .industry-emoji-bg svg { width: 22px; height: 22px; }
.industry-card .industry-emoji {
margin-bottom: auto;
display: flex; justify-content: flex-start;
}
.industry-card .industry-card-tag {
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--accent);
margin-top: 18px;
margin-bottom: 6px;
}
.industry-card h3 { font-size: 1.15rem; margin-bottom: 8px; color: var(--surface); }
.industry-card p { color: rgba(255, 255, 255, 0.78); font-size: 0.88rem; line-height: 1.5; }
.industry-card .industry-card-link {
display: inline-flex; align-items: center; gap: 6px;
margin-top: 14px;
font-weight: 700; font-size: 0.82rem;
color: var(--accent);
border-top: 1px solid rgba(255,255,255,0.12);
padding-top: 10px;
}
.industry-card .industry-card-link svg { width: 14px; height: 14px; transition: transform var(--t); }
.industry-card:hover .industry-card-link { color: var(--accent-2); }
.industry-card:hover .industry-card-link svg { transform: translateX(4px); }
/* TOOLS WE USE */
.tools-grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 10px;
}
.tool-card {
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 18px 12px;
text-align: center;
transition: all var(--t);
display: flex; flex-direction: column; align-items: center; gap: 8px;
min-height: 96px;
justify-content: center;
}
.tool-card:hover { border-color: var(--accent); transform: translateY(-4px); box-shadow: var(--shadow); }
.tool-card .tool-icon {
width: 44px; height: 44px;
display: grid; place-items: center;
}
.tool-card .tool-icon svg, .tool-card .tool-icon img { width: 100%; height: 100%; object-fit: contain; }
.tool-card .tool-name { font-size: 0.78rem; font-weight: 600; color: var(--ink-2); }
/* COMPARISON TABLE */
.compare-card {
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow);
}
.compare-row {
display: grid;
grid-template-columns: 1.5fr 1fr 1fr;
border-bottom: 1px solid var(--line);
}
.compare-row:last-child { border-bottom: 0; }
.compare-row > div {
padding: 22px 28px;
display: flex; align-items: center; gap: 12px;
font-size: 0.95rem;
}
.compare-row > div:not(:last-child) { border-right: 1px solid var(--line); }
.compare-head {
background: var(--bg-warm);
font-weight: 700;
font-size: 1rem !important;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.compare-head .compare-them { color: var(--ink-3); }
.compare-head .compare-us { color: var(--ink); position: relative; }
.compare-head .compare-us::before {
content: '';
position: absolute; left: 0; top: 0; bottom: 0;
width: 4px;
background: var(--accent);
}
.compare-feature { color: var(--ink); font-weight: 600; }
.compare-cell.yes { color: var(--success); font-weight: 600; }
.compare-cell.no { color: #DC2626; font-weight: 500; }
.compare-cell svg { width: 22px; height: 22px; flex-shrink: 0; }
.compare-cell.yes svg { color: var(--success); }
.compare-cell.no svg { color: #DC2626; }
/* INSIGHTS / BLOG */
.blog-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.blog-card {
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius);
overflow: hidden;
transition: all var(--t);
display: flex;
flex-direction: column;
}
.blog-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--accent); }
.blog-card-image {
aspect-ratio: 16 / 10;
overflow: hidden;
background: linear-gradient(135deg, var(--ink) 0%, #1A1A1A 100%);
}
.blog-card-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.blog-card:hover .blog-card-image img { transform: scale(1.06); }
.blog-card-body { padding: 28px; flex: 1; display: flex; flex-direction: column; }
.blog-card-meta {
display: flex; align-items: center; gap: 12px;
font-size: 0.78rem;
color: var(--ink-3);
margin-bottom: 14px;
font-weight: 600;
text-transform: uppercase; letter-spacing: 0.08em;
}
.blog-card-tag {
padding: 4px 10px;
background: var(--accent-soft);
color: var(--ink);
border-radius: 100px;
font-size: 0.72rem;
letter-spacing: 0.05em;
}
.blog-card h3 { font-size: 1.2rem; margin-bottom: 12px; line-height: 1.3; }
.blog-card p { color: var(--ink-2); font-size: 0.93rem; line-height: 1.6; margin-bottom: 20px; flex: 1; }
.blog-card .blog-link {
display: inline-flex; align-items: center; gap: 8px;
color: var(--ink);
font-weight: 700;
font-size: 0.92rem;
}
.blog-card .blog-link svg { width: 14px; height: 14px; transition: transform var(--t); }
.blog-card:hover .blog-link svg { transform: translateX(4px); }
/* CLIENT LOGOS GRID */
.clients-strip {
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
padding: 60px 40px;
}
.clients-grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 0;
align-items: center;
}
.client-logo {
display: flex; align-items: center; justify-content: center;
padding: 28px 16px;
font-size: 1.15rem; font-weight: 800;
color: var(--ink-3);
letter-spacing: -0.02em;
border-right: 1px solid var(--line);
border-bottom: 1px solid var(--line);
text-align: center;
transition: color var(--t);
min-height: 90px;
}
.client-logo:hover { color: var(--ink); }
.client-logo:nth-child(6n) { border-right: 0; }
.client-logo:nth-last-child(-n+6) { border-bottom: 0; }
.client-logo svg { width: 32px; height: 32px; }
/* PAKISTAN MAP SECTION */
.pk-map-card {
background: var(--ink);
border-radius: var(--radius-lg);
padding: 56px 48px;
position: relative;
overflow: hidden;
}
.pk-map-card::before {
content: ''; position: absolute; inset: 0;
background:
radial-gradient(ellipse at 30% 50%, rgba(74, 222, 128, 0.18) 0%, transparent 50%),
radial-gradient(ellipse at 80% 30%, rgba(0, 88, 61, 0.25) 0%, transparent 50%);
}
.pk-map-card > * { position: relative; z-index: 1; }
.pk-map-grid {
display: grid;
grid-template-columns: 1fr 1.4fr;
gap: 60px;
align-items: center;
}
.pk-map-content h2 { color: var(--surface); font-size: clamp(1.75rem, 3vw, 2.5rem); margin-bottom: 20px; }
.pk-map-content p { color: rgba(255, 255, 255, 0.75); margin-bottom: 24px; line-height: 1.7; font-size: 1.05rem; }
.pk-map-list { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.pk-map-pill {
display: inline-flex; align-items: center; gap: 8px;
padding: 10px 18px;
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 100px;
font-size: 0.88rem; font-weight: 600;
color: var(--surface);
}
.pk-map-pill .flag-emoji { font-size: 1.1rem; }
.pk-map-visual {
position: relative;
aspect-ratio: 2/1;
background: linear-gradient(135deg, rgba(255,255,255,0.03) 0%, rgba(0,88,61,0.08) 100%);
border-radius: var(--radius);
border: 1px solid rgba(255, 255, 255, 0.1);
overflow: hidden;
}
.pk-world-bg {
position: absolute;
inset: 0;
width: 100%; height: 100%;
object-fit: contain;
object-position: center;
pointer-events: none;
}
/* ============================================================
GLOBE NETWORK — premium animated global reach visual
============================================================ */
.gnet {
position: relative; width: 100%;
aspect-ratio: 16/11;
background:
radial-gradient(ellipse at 50% 50%, rgba(74,222,128,0.12) 0%, transparent 55%),
radial-gradient(ellipse at 0% 0%, rgba(43,58,95,0.50) 0%, transparent 50%),
radial-gradient(ellipse at 100% 100%, rgba(43,58,95,0.50) 0%, transparent 50%),
#0F0F0F;
border-radius: 18px;
overflow: hidden;
box-shadow: 0 40px 100px -30px rgba(0,0,0,0.65), inset 0 0 0 1px rgba(255,255,255,0.06);
}
.gnet-particles {
position: absolute; inset: 0;
background-image:
radial-gradient(rgba(255,255,255,0.18) 1px, transparent 1.5px),
radial-gradient(rgba(74,222,128,0.25) 1px, transparent 1.5px);
background-size: 38px 38px, 100px 100px;
background-position: 0 0, 19px 19px;
opacity: 0.65;
pointer-events: none;
}
.gnet-beams {
position: absolute; inset: 0;
width: 100%; height: 100%;
pointer-events: none; z-index: 2;
}
.gnet-beams line {
stroke: rgba(74,222,128,0.45);
stroke-width: 1; stroke-dasharray: 5 7;
animation: gnBeamFlow 4s linear infinite;
}
.gnet-beams line:nth-child(2) { animation-delay: 0.6s; }
.gnet-beams line:nth-child(3) { animation-delay: 1.2s; }
.gnet-beams line:nth-child(4) { animation-delay: 1.8s; }
.gnet-beams line:nth-child(5) { animation-delay: 2.4s; }
.gnet-beams line:nth-child(6) { animation-delay: 3.0s; }
@keyframes gnBeamFlow { to { stroke-dashoffset: -24; } }
.gnet-center {
position: absolute; top: 50%; left: 50%;
transform: translate(-50%, -50%);
z-index: 4;
display: flex; flex-direction: column;
align-items: center; gap: 0;
}
.gnet-globe {
width: 260px; height: 260px; position: relative;
filter: drop-shadow(0 0 32px rgba(74,222,128,0.25));
}
.gnet-globe::before {
content: ''; position: absolute; inset: -22px;
border-radius: 50%;
background: radial-gradient(circle, rgba(74,222,128,0.22) 0%, transparent 60%);
z-index: -1;
animation: gnGlowPulse 3.4s ease-in-out infinite;
}
@keyframes gnGlowPulse {
0%, 100% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.10); opacity: 0.75; }
}
.gnet-globe svg {
width: 100%; height: 100%;
animation: gnGlobeSpin 60s linear infinite;
transform-origin: center;
}
@keyframes gnGlobeSpin { to { transform: rotate(360deg); } }
.gnet-hq {
position: relative; z-index: 5;
margin-top: -38px;
background: var(--accent); color: var(--ink);
padding: 9px 14px 9px 10px; border-radius: 10px;
display: flex; align-items: center; gap: 10px;
box-shadow: 0 14px 36px rgba(74,222,128,0.45), 0 0 0 4px rgba(15,23,41,0.6);
white-space: nowrap;
}
.gnet-hq .gn-city { font-size: 0.88rem; font-weight: 900; letter-spacing: -0.01em; line-height: 1; }
.gnet-hq .gn-role { font-size: 0.62rem; font-weight: 800; opacity: 0.65; text-transform: uppercase; letter-spacing: 0.10em; margin-top: 3px; }
.gn-flag {
width: 22px; height: 15px; border-radius: 3px; overflow: hidden; flex-shrink: 0;
display: block; box-shadow: 0 0 0 1px rgba(0,0,0,0.30);
}
.gn-flag svg { display: block; width: 100%; height: 100%; }
.gnet-card {
position: absolute; z-index: 3;
background: rgba(20,29,52,0.88);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(255,255,255,0.10);
border-radius: 9px;
padding: 6px 10px 6px 8px;
display: flex; align-items: center; gap: 7px;
box-shadow: 0 20px 36px -12px rgba(0,0,0,0.60);
color: #fff; white-space: nowrap;
max-width: 160px;
animation: gnCardFloat 6s ease-in-out infinite;
}
.gnet-card .gn-city { font-size: 0.76rem; font-weight: 800; line-height: 1; color: #fff; }
.gnet-card .gn-country { font-size: 0.56rem; color: rgba(255,255,255,0.58); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; margin-top: 3px; }
.gnet-card .gn-live {
width: 6px; height: 6px; border-radius: 50%; background: #22C55E;
flex-shrink: 0; margin-left: 3px;
box-shadow: 0 0 0 2px rgba(34,197,94,0.30);
animation: gnLivePulse 1.8s ease-in-out infinite;
}
@keyframes gnLivePulse {
0%, 100% { box-shadow: 0 0 0 2px rgba(34,197,94,0.30); }
50% { box-shadow: 0 0 0 6px rgba(34,197,94,0.10); }
}
@keyframes gnCardFloat {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-7px); }
}
.gnet-card.d0 { animation-delay: 0s; }
.gnet-card.d1 { animation-delay: 0.4s; }
.gnet-card.d2 { animation-delay: 0.8s; }
.gnet-card.d3 { animation-delay: 1.2s; }
.gnet-card.d4 { animation-delay: 1.6s; }
.gnet-card.d5 { animation-delay: 2.0s; }
.gnet-card.d6 { animation-delay: 2.4s; }
.gnet-card.d7 { animation-delay: 2.8s; }
.gnet-card.d8 { animation-delay: 3.2s; }
.gnet-card.d9 { animation-delay: 3.6s; }
/* 10 card positions around the centred globe */
.gnet-card.c1 { top: 6%; left: 3%; }
.gnet-card.c2 { top: 6%; right: 3%; }
.gnet-card.c3 { top: 50%; left: 1%; transform: translateY(-50%); }
.gnet-card.c4 { top: 50%; right: 1%; transform: translateY(-50%); }
.gnet-card.c5 { bottom: 6%; left: 3%; }
.gnet-card.c6 { bottom: 6%; right: 3%; }
.gnet-card.c7 { top: 25%; left: 8%; }
.gnet-card.c8 { top: 25%; right: 8%; }
.gnet-card.c9 { bottom: 25%; left: 8%; }
.gnet-card.c10 { bottom: 25%; right: 8%; }
.gnet-card.c3, .gnet-card.c4 { animation-name: gnCardFloatSide; }
@keyframes gnCardFloatSide {
0%, 100% { transform: translateY(-50%); }
50% { transform: translateY(calc(-50% - 7px)); }
}
/* Corner stat pills */
.gnet-stat {
position: absolute; z-index: 4;
background: rgba(74,222,128,0.10);
border: 1px solid rgba(74,222,128,0.30);
border-radius: 10px;
padding: 9px 14px;
color: #fff;
display: flex; align-items: baseline; gap: 8px;
backdrop-filter: blur(8px);
}
.gnet-stat .gn-num { font-size: 1.2rem; font-weight: 900; color: var(--accent); letter-spacing: -0.02em; line-height: 1; }
.gnet-stat .gn-lbl { font-size: 0.66rem; color: rgba(255,255,255,0.65); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; }
/* Redundant with top strip text "Trusted in 12+ countries" and the section heading. Hidden to avoid overlap with Lahore HQ chip. */
.gnet-stat-tl { display: none; }
.gnet-stat-br { display: none; }
@media (max-width: 900px) {
.gnet { aspect-ratio: 1/1.15; }
.gnet-globe { width: 180px; height: 180px; }
.gnet-card { padding: 6px 10px; gap: 7px; }
.gnet-card .gn-city { font-size: 0.72rem; }
.gnet-card .gn-country { display: none; }
.gn-flag { width: 22px; height: 14px; }
.gnet-card.c1 { top: 4%; left: 2%; }
.gnet-card.c2 { top: 4%; right: 2%; }
.gnet-card.c3 { top: 50%; left: 1%; }
.gnet-card.c4 { top: 50%; right: 1%; }
.gnet-card.c5 { bottom: 4%; left: 2%; }
.gnet-card.c6 { bottom: 4%; right: 2%; }
.gnet-card.c7 { top: 22%; left: 6%; }
.gnet-card.c8 { top: 22%; right: 6%; }
.gnet-card.c9 { bottom: 22%; left: 6%; }
.gnet-card.c10 { bottom: 22%; right: 6%; }
.gnet-stat-tl { display: none; }
.gnet-stat .gn-num { font-size: 1rem; }
.gnet-stat .gn-lbl { font-size: 0.6rem; }
}
@media (max-width: 560px) {
/* On very small phones, hide the 4 inner-ring cards — 6 corner ones still tell the story */
.gnet-card.c7, .gnet-card.c8, .gnet-card.c9, .gnet-card.c10 { display: none; }
.gnet-beams line:nth-child(n+7) { display: none; }
}
.pk-map-svg {
position: absolute;
inset: 0;
width: 100%; height: 100%;
z-index: 2;
}
.pk-map-svg { width: 100%; height: 100%; display: block; }
.pk-map-pin {
position: absolute;
width: 14px; height: 14px;
background: var(--accent);
border-radius: 50%;
box-shadow: 0 0 0 4px rgba(74, 222, 128, 0.25);
animation: pinPulse 2s infinite;
z-index: 3;
}
.pk-map-pin.pk-home {
background: var(--accent);
width: 18px; height: 18px;
box-shadow: 0 0 0 6px rgba(74, 222, 128, 0.3);
}
.pk-map-pin .pin-label {
position: absolute;
top: -34px; left: 50%; transform: translateX(-50%);
background: var(--surface);
color: var(--ink);
padding: 5px 12px;
border-radius: 6px;
font-size: 0.72rem;
font-weight: 700;
white-space: nowrap;
box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}
.pk-map-pin.pk-home .pin-label {
background: var(--accent);
color: var(--ink);
}
.pk-map-pin .pin-label::after {
content: ''; position: absolute;
bottom: -4px; left: 50%; transform: translateX(-50%) rotate(45deg);
width: 8px; height: 8px;
background: var(--surface);
}
.pk-map-pin.pk-home .pin-label::after { background: var(--accent); }
@keyframes pinPulse {
0%, 100% { box-shadow: 0 0 0 4px rgba(74, 222, 128, 0.25); }
50% { box-shadow: 0 0 0 12px rgba(74, 222, 128, 0); }
}
/* FOUNDER LETTER */
.founder-letter {
max-width: 920px;
margin: 0 auto;
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
padding: 48px;
position: relative;
box-shadow: var(--shadow);
}
.founder-letter::before {
content: '"';
position: absolute; top: 24px; left: 40px;
font-family: serif;
font-size: 8rem;
line-height: 1;
color: var(--accent);
opacity: 0.3;
font-weight: 900;
}
.founder-urdu {
font-size: 1.5rem;
color: var(--accent-2);
margin-bottom: 16px;
font-weight: 600;
direction: rtl;
text-align: right;
}
.founder-letter h2 { font-size: 1.75rem; margin-bottom: 32px; line-height: 1.3; }
.founder-letter p { color: var(--ink-2); font-size: 1.05rem; line-height: 1.85; margin-bottom: 18px; }
.founder-signature {
display: flex; align-items: center; gap: 20px;
margin-top: 36px;
padding-top: 32px;
border-top: 1px solid var(--line);
}
.founder-sig-avatar {
width: 72px; height: 72px;
border-radius: 50%;
background: linear-gradient(135deg, var(--accent), var(--accent-2));
display: grid; place-items: center;
font-weight: 900;
font-size: 1.8rem;
color: var(--ink);
}
.founder-sig-name { font-weight: 800; font-size: 1.15rem; }
.founder-sig-role { color: var(--ink-3); font-size: 0.92rem; }
/* OFFICE GALLERY */
.gallery-grid {
display: grid;
grid-template-columns: 2fr 1fr 1fr;
grid-template-rows: 1fr 1fr;
gap: 16px;
height: 540px;
}
.gallery-item {
position: relative;
border-radius: var(--radius);
overflow: hidden;
background: linear-gradient(135deg, var(--ink) 0%, #1A1A1A 100%);
}
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.gallery-item:hover img { transform: scale(1.05); }
.gallery-item.featured { grid-row: span 2; }
.gallery-item .gallery-tag {
position: absolute;
bottom: 16px; left: 16px;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(8px);
padding: 8px 14px;
border-radius: 100px;
font-size: 0.78rem;
font-weight: 700;
color: var(--ink);
display: flex; align-items: center; gap: 6px;
}
/* CURRENCIES — Clean horizontal strip */
.currencies-grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 0;
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius);
overflow: hidden;
}
.currency-card {
position: relative;
padding: 28px 18px;
text-align: center;
border-right: 1px solid var(--line);
transition: all var(--t);
}
.currency-card:last-child { border-right: 0; }
.currency-card:hover { background: var(--bg-warm); }
.currency-card.primary {
background: var(--ink);
color: var(--surface);
}
.currency-card.primary .currency-code { color: var(--accent); }
.currency-card.primary .currency-name { color: rgba(255,255,255,0.7); }
.currency-card.primary:hover { background: var(--ink); }
.currency-symbol-bg {
width: 52px; height: 52px;
border-radius: 12px;
margin: 0 auto 12px;
display: grid; place-items: center;
font-weight: 900;
background: var(--bg-warm);
border: 1px solid var(--line);
color: var(--ink);
position: relative;
transition: all var(--t);
}
.currency-card:hover .currency-symbol-bg { background: var(--accent); border-color: var(--accent); }
.currency-card.primary .currency-symbol-bg { background: var(--accent); border-color: var(--accent); color: var(--ink); }
.currency-symbol { font-size: 1.5rem; font-weight: 900; line-height: 1; }
.currency-symbol-bg.aed .currency-symbol { font-size: 1rem; }
.currency-flag-overlay { display: none; }
.currency-card .currency-code {
font-weight: 800;
font-size: 1rem;
color: var(--ink);
letter-spacing: 0.05em;
}
.currency-card .currency-name { font-size: 0.72rem; color: var(--ink-3); margin-top: 2px; }
/* AWARDS */
.awards-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
}
.award-card {
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 32px 24px;
text-align: center;
transition: all var(--t);
}
.award-card:hover { border-color: var(--accent); transform: translateY(-4px); box-shadow: var(--shadow); }
.award-icon {
width: 80px; height: 80px;
margin: 0 auto 20px;
background: var(--accent-soft);
border-radius: 50%;
display: grid; place-items: center;
color: var(--accent-2);
border: 3px solid var(--accent);
}
.award-icon svg { width: 38px; height: 38px; }
.award-year { font-size: 0.78rem; color: var(--ink-3); font-weight: 700; letter-spacing: 0.1em; margin-bottom: 8px; }
.award-name { font-weight: 800; color: var(--ink); margin-bottom: 6px; font-size: 1.05rem; }
.award-org { font-size: 0.88rem; color: var(--ink-2); }
/* WHY PAKISTAN */
.why-pk {
background: linear-gradient(135deg, var(--bg-warm) 0%, var(--accent-soft) 100%);
border-radius: var(--radius-lg);
padding: 48px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: center;
border: 2px solid rgba(74, 222, 128, 0.4);
}
.why-pk-left h2 { font-size: clamp(1.75rem, 3vw, 2.5rem); margin-bottom: 24px; }
.why-pk-left p { color: var(--ink-2); font-size: 1.05rem; line-height: 1.7; margin-bottom: 16px; }
.why-pk-stats {
display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px;
}
.why-pk-stat {
background: var(--surface);
border-radius: var(--radius);
padding: 24px;
border: 1px solid rgba(0, 0, 0, 0.05);
}
.why-pk-stat .num { font-size: 2.25rem; font-weight: 900; color: var(--accent-2); line-height: 1; margin-bottom: 8px; }
.why-pk-stat .label { font-size: 0.9rem; color: var(--ink-2); font-weight: 500; line-height: 1.4; }
/* DIASPORA STORY */
.diaspora-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
}
.diaspora-card {
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 22px 22px;
display: flex;
gap: 16px;
align-items: flex-start;
transition: all var(--t);
}
.diaspora-card:hover { border-color: var(--accent); transform: translateY(-4px); box-shadow: var(--shadow); }
.diaspora-photo {
width: 72px; height: 72px;
border-radius: 50%;
flex-shrink: 0;
background: linear-gradient(135deg, var(--accent), var(--accent-2));
color: var(--ink);
display: grid; place-items: center;
font-weight: 900;
font-size: 2.5rem;
border: 3px solid var(--accent-soft);
font-size: 1.8rem !important;
}
.diaspora-content { flex: 1; }
.diaspora-meta {
display: flex; align-items: center; gap: 10px;
font-size: 0.78rem;
color: var(--ink-3);
margin-bottom: 8px;
}
.diaspora-meta .flag-emoji { font-size: 1.1rem; }
.diaspora-card h3 { font-size: 1rem; margin-bottom: 8px; line-height: 1.3; }
.diaspora-card p { color: var(--ink-2); font-size: 0.88rem; line-height: 1.55; margin-bottom: 12px; }
.diaspora-result {
display: inline-flex; align-items: center; gap: 8px;
padding: 8px 14px;
background: rgba(22, 163, 74, 0.1);
border: 1px solid rgba(22, 163, 74, 0.3);
border-radius: 100px;
font-size: 0.85rem;
font-weight: 700;
color: var(--success);
}
/* FEATURED IN */
.featured-in {
text-align: center;
padding: 32px 0;
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
.featured-in-label {
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.2em;
color: var(--ink-3);
font-weight: 700;
margin-bottom: 18px;
}
.featured-in-logos {
display: flex; align-items: center; justify-content: center;
gap: 60px; flex-wrap: wrap;
}
.featured-in-logo {
font-family: 'Georgia', serif;
font-size: 1.5rem; font-weight: 700;
color: var(--ink-3);
font-style: italic;
letter-spacing: -0.02em;
transition: color var(--t);
white-space: nowrap;
}
.featured-in-logo:hover { color: var(--ink); }
.featured-in-logo.bold { font-family: 'Inter', sans-serif; font-style: normal; font-weight: 900; letter-spacing: -0.04em; }
/* PORTFOLIO SHOWCASE */
.portfolio-filters {
display: flex; align-items: center; justify-content: center;
gap: 8px; flex-wrap: wrap;
margin-bottom: 40px;
}
.portfolio-filter {
padding: 12px 24px;
background: var(--surface);
border: 1.5px solid var(--line);
border-radius: 100px;
font-size: 0.9rem; font-weight: 600;
color: var(--ink-2);
cursor: pointer;
transition: all var(--t);
}
.portfolio-filter:hover { border-color: var(--ink); color: var(--ink); }
.portfolio-filter.active { background: var(--ink); border-color: var(--ink); color: var(--accent); }
.portfolio-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.portfolio-item {
position: relative;
aspect-ratio: 4/3;
border-radius: var(--radius);
overflow: hidden;
cursor: pointer;
background: linear-gradient(135deg, var(--ink) 0%, #1A1A1A 100%);
border: 1px solid var(--line);
transition: all var(--t);
}
.portfolio-item:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.portfolio-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.portfolio-item:hover img { transform: scale(1.06); }
.portfolio-overlay {
position: absolute; inset: 0;
background: linear-gradient(180deg, transparent 50%, rgba(17, 17, 17, 0.92) 100%);
display: flex; flex-direction: column; justify-content: flex-end;
padding: 24px;
opacity: 0;
transition: opacity var(--t);
}
.portfolio-item:hover .portfolio-overlay { opacity: 1; }
.portfolio-overlay-tag {
display: inline-block; align-self: flex-start;
padding: 4px 12px;
background: var(--accent);
color: var(--ink);
border-radius: 100px;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
margin-bottom: 10px;
}
.portfolio-overlay h4 {
color: var(--surface);
font-size: 1.15rem;
margin-bottom: 4px;
}
.portfolio-overlay p { color: rgba(255, 255, 255, 0.8); font-size: 0.85rem; }
/* WHEN YOU GROW SECTION */
.grow-section {
background:
radial-gradient(ellipse at 0% 0%, rgba(74, 222, 128, 0.15) 0%, transparent 50%),
radial-gradient(ellipse at 100% 100%, rgba(0, 88, 61, 0.1) 0%, transparent 50%),
var(--bg-warm);
border-radius: var(--radius-lg);
padding: 56px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 56px;
align-items: center;
}
.grow-image {
position: relative;
aspect-ratio: 1;
border-radius: var(--radius-lg);
overflow: hidden;
background: var(--surface);
}
.grow-image img { width: 100%; height: 100%; object-fit: cover; }
.grow-image-badge {
position: absolute;
bottom: 20px; right: 20px;
background: var(--accent);
color: var(--ink);
padding: 14px 22px;
border-radius: 100px;
font-weight: 800;
font-size: 0.95rem;
display: flex; align-items: center; gap: 10px;
box-shadow: var(--shadow);
}
.grow-image-badge svg { width: 20px; height: 20px; }
.grow-content h2 { font-size: clamp(2rem, 4vw, 3rem); margin-bottom: 24px; line-height: 1.05; }
.grow-content blockquote {
font-size: 1.15rem;
color: var(--ink-2);
line-height: 1.7;
margin-bottom: 32px;
font-style: italic;
border-left: 4px solid var(--accent);
padding-left: 24px;
}
.grow-meta {
display: flex; align-items: center; gap: 16px;
margin-bottom: 32px;
padding-top: 24px;
border-top: 1px solid rgba(17, 17, 17, 0.1);
}
.grow-meta-avatar {
width: 64px; height: 64px;
border-radius: 50%;
background: linear-gradient(135deg, var(--accent), var(--accent-2));
color: var(--ink);
display: grid; place-items: center;
font-weight: 900;
font-size: 1.6rem;
}
.grow-meta-name { font-weight: 800; font-size: 1.05rem; }
.grow-meta-role { font-size: 0.88rem; color: var(--ink-3); }
/* OFFICES — Redesigned */
.offices-redesigned {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
}
.offices-redesigned.single-office {
grid-template-columns: minmax(0, 720px);
justify-content: center;
}
.offices-redesigned.single-office .office-new {
display: grid;
grid-template-columns: 1fr 1.1fr;
}
.offices-redesigned.single-office .office-new-image {
min-height: 260px;
}
@media (max-width: 768px) {
.offices-redesigned.single-office .office-new { grid-template-columns: 1fr; }
}
.office-new {
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius);
overflow: hidden;
transition: all var(--t);
}
.office-new:hover { border-color: var(--accent); box-shadow: var(--shadow); transform: translateY(-4px); }
.office-new.primary { border-color: var(--accent); border-width: 2px; }
.office-new-image {
position: relative;
aspect-ratio: 16/9;
background-size: cover;
background-position: center;
}
.office-new-image::after {
content: ''; position: absolute; inset: 0;
background: linear-gradient(180deg, transparent 60%, rgba(17,17,17,0.7) 100%);
}
.office-new-tag {
position: absolute; top: 12px; left: 12px;
background: var(--accent);
color: var(--ink);
padding: 5px 12px;
border-radius: 100px;
font-size: 0.72rem;
font-weight: 800;
letter-spacing: 0.05em;
text-transform: uppercase;
z-index: 1;
}
.office-new-body { padding: 22px 22px; }
.office-new-tag-secondary {
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--accent-2);
font-weight: 800;
margin-bottom: 6px;
}
.office-new h3 { font-size: 1.15rem; margin-bottom: 14px; }
.office-new-meta { display: flex; flex-direction: column; gap: 8px; }
.office-new-meta .meta-row {
display: flex; align-items: center; gap: 10px;
font-size: 0.85rem;
color: var(--ink-2);
}
.office-new-meta .meta-icon {
width: 28px; height: 28px;
background: var(--bg-warm);
border-radius: 50%;
display: grid; place-items: center;
flex-shrink: 0;
color: var(--ink);
}
.office-new-meta .meta-icon svg { width: 13px; height: 13px; }
.office-new-meta a { color: var(--ink-2); }
.office-new-meta a:hover { color: var(--accent-hover); }
/* OLD OFFICES — Keep for backward compat (will be unused) */
.offices-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
}
.office-card {
position: relative;
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
overflow: hidden;
transition: all var(--t);
}
.office-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--accent); }
.office-card.primary {
background: linear-gradient(135deg, var(--ink) 0%, #1A1A1A 100%);
color: var(--surface);
}
.office-card.primary::before {
content: '';
position: absolute; inset: 0;
background: radial-gradient(circle at 100% 0%, rgba(74, 222, 128, 0.2) 0%, transparent 60%);
}
.office-card.primary > * { position: relative; }
.office-image {
height: 160px;
background-size: cover;
background-position: center;
position: relative;
}
.office-image::after {
content: ''; position: absolute; inset: 0;
background: linear-gradient(180deg, transparent 50%, rgba(17, 17, 17, 0.4) 100%);
}
.office-flag {
position: absolute;
top: 16px; left: 16px;
background: var(--surface);
padding: 6px 14px;
border-radius: 100px;
font-size: 0.85rem;
font-weight: 700;
color: var(--ink);
display: flex; align-items: center; gap: 8px;
box-shadow: var(--shadow-sm);
}
.office-body { padding: 22px 26px; }
.office-card.primary .office-body h3 { color: var(--surface); }
.office-card.primary .office-meta { color: rgba(255, 255, 255, 0.7); }
.office-card-text { padding: 28px 28px; }
.office-flag-row { margin-bottom: 16px; }
.office-flag-text {
display: inline-flex; align-items: center; gap: 8px;
padding: 6px 14px;
background: var(--accent-soft);
border: 1px solid rgba(74, 222, 128, 0.3);
border-radius: 100px;
font-size: 0.78rem;
font-weight: 700;
color: var(--ink);
}
.office-card.primary .office-flag-text { background: rgba(74, 222, 128, 0.15); color: var(--accent); border-color: rgba(74, 222, 128, 0.3); }
.office-card .office-tag {
display: inline-block;
font-size: 0.72rem;
text-transform: uppercase;
letter-spacing: 0.1em;
font-weight: 700;
color: var(--accent-2);
margin-bottom: 8px;
}
.office-card.primary .office-tag { color: var(--accent); }
.office-card h3 { margin-bottom: 12px; font-size: 1.4rem; }
.office-meta {
display: flex; flex-direction: column;
gap: 8px;
font-size: 0.9rem;
color: var(--ink-2);
}
.office-meta div { display: flex; align-items: center; gap: 10px; }
.office-meta svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--accent-2); }
.office-card.primary .office-meta svg { color: var(--accent); }
/* INLINE CONTACT FORM — Premium redesigned */
.contact-form-section {
background: var(--surface);
border-radius: var(--radius-lg);
padding: 0;
overflow: hidden;
display: grid;
grid-template-columns: 1fr 1.3fr;
position: relative;
border: 1px solid var(--line);
box-shadow: var(--shadow);
}
.contact-form-left {
padding: 48px 44px;
position: relative;
background: var(--bg-warm);
border-right: 1px solid var(--line);
}
.contact-form-left::before {
content: '';
position: absolute; top: 0; left: 0; width: 4px; bottom: 0;
background: var(--accent);
}
.contact-form-left > * { position: relative; }
.contact-form-left .contact-eyebrow {
display: inline-flex; align-items: center; gap: 8px;
padding: 6px 14px;
background: var(--accent);
color: var(--ink);
border-radius: 100px;
font-size: 0.7rem; font-weight: 800;
text-transform: uppercase; letter-spacing: 0.12em;
margin-bottom: 16px;
}
.contact-form-left h2 { color: var(--ink); margin-bottom: 14px; font-size: clamp(1.6rem, 2.8vw, 2.2rem); line-height: 1.15; }
.contact-form-left p { color: var(--ink-2); margin-bottom: 28px; line-height: 1.6; font-size: 0.98rem; }
.contact-stats-row {
display: grid; grid-template-columns: repeat(2, 1fr);
gap: 12px;
margin-bottom: 28px;
padding-bottom: 28px;
border-bottom: 1px solid var(--line);
}
.contact-stat-tile {
background: var(--surface);
border-radius: var(--radius-sm);
padding: 16px;
border: 1px solid var(--line);
}
.contact-stat-tile .num {
font-size: 1.5rem; font-weight: 900;
color: var(--ink);
line-height: 1; margin-bottom: 4px;
}
.contact-stat-tile .label {
font-size: 0.75rem; color: var(--ink-2);
font-weight: 500;
}
.contact-perks { display: flex; flex-direction: column; gap: 12px; }
.contact-perk {
display: flex; align-items: center; gap: 12px;
color: var(--ink);
font-size: 0.92rem;
font-weight: 500;
}
.contact-perk-icon {
width: 22px; height: 22px;
background: var(--accent);
border: 0;
border-radius: 50%;
display: grid; place-items: center;
flex-shrink: 0;
color: var(--ink);
}
.contact-perk-icon svg { width: 12px; height: 12px; stroke-width: 3; }
.contact-form-right {
padding: 48px 44px;
background: var(--surface);
}
.contact-form-right h3 {
margin-bottom: 4px;
font-size: 1.4rem;
}
.contact-form-right .form-sub {
color: var(--ink-2);
font-size: 0.92rem;
margin-bottom: 24px;
}
/* INLINE CTA STRIP */
.inline-cta {
background: var(--accent);
border-radius: var(--radius-lg);
padding: 32px 48px;
display: flex;
align-items: center; justify-content: space-between;
gap: 32px;
flex-wrap: wrap;
position: relative;
overflow: hidden;
}
.inline-cta::before {
content: ''; position: absolute; inset: 0;
background:
radial-gradient(circle at 100% 50%, rgba(255, 255, 255, 0.2) 0%, transparent 50%);
}
.inline-cta > * { position: relative; }
.inline-cta-text { flex: 1; min-width: 280px; }
.inline-cta-text h3 { color: var(--ink); font-size: 1.5rem; margin-bottom: 6px; line-height: 1.2; }
.inline-cta-text p { color: rgba(17, 17, 17, 0.8); font-size: 0.95rem; }
.inline-cta .btn-ink {
background: var(--ink);
color: var(--accent);
padding: 16px 28px;
border-radius: 100px;
font-weight: 700;
font-size: 0.95rem;
display: inline-flex; align-items: center; gap: 8px;
transition: all var(--t);
}
.inline-cta .btn-ink:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.inline-cta .btn-ink svg { width: 16px; height: 16px; }
/* SECTION CTA INLINE — small CTA buttons inside sections */
.section-cta-inline {
text-align: center;
margin-top: 48px;
}
/* PHILOSOPHY/VALUE STRIP */
.value-strip {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0;
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
overflow: hidden;
}
.value-cell {
padding: 36px 32px;
border-right: 1px solid var(--line);
border-bottom: 1px solid var(--line);
transition: background var(--t);
}
.value-cell:hover { background: var(--bg-warm); }
.value-cell:nth-child(3n) { border-right: 0; }
.value-cell:nth-last-child(-n+3) { border-bottom: 0; }
.value-cell .value-icon {
width: 48px; height: 48px;
background: var(--accent-soft);
border-radius: 12px;
display: grid; place-items: center;
margin-bottom: 16px;
color: var(--ink);
}
.value-cell .value-icon svg { width: 24px; height: 24px; }
.value-cell h4 { font-size: 1.1rem; margin-bottom: 8px; }
.value-cell p { color: var(--ink-2); font-size: 0.92rem; line-height: 1.6; }
/* RESPONSIVE */
@media (max-width: 1100px) {
.grid-4 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(2, 1fr); }
.country-grid { grid-template-columns: repeat(3, 1fr); }
.stats-row { grid-template-columns: repeat(2, 1fr); gap: 32px 0; padding: 48px 24px; }
.stat-block:nth-child(2)::after { display: none; }
.process-grid, .why-grid, .testimonial-grid { grid-template-columns: 1fr 1fr; }
.footer-grid { grid-template-columns: 1fr 1fr; }
.split-section { grid-template-columns: 1fr; gap: 48px; }
.case-study-card { grid-template-columns: 1fr; padding: 40px; gap: 40px; }
.industries-grid { grid-template-columns: repeat(2, 1fr); }
.tools-grid { grid-template-columns: repeat(4, 1fr); }
.blog-grid { grid-template-columns: repeat(2, 1fr); }
.clients-grid { grid-template-columns: repeat(3, 1fr); }
.client-logo { border-right: 1px solid var(--line) !important; border-bottom: 1px solid var(--line) !important; }
.client-logo:nth-child(3n) { border-right: 0 !important; }
.float-card-1, .float-card-2, .float-card-3 { display: none; }
.grow-section { grid-template-columns: 1fr; padding: 48px 32px; gap: 40px; }
.offices-grid { grid-template-columns: 1fr; }
.contact-form-section { grid-template-columns: 1fr; }
.contact-form-left, .contact-form-right { padding: 48px 32px; }
.portfolio-grid { grid-template-columns: 1fr 1fr; }
.value-strip { grid-template-columns: 1fr 1fr; }
.value-cell:nth-child(3n) { border-right: 1px solid var(--line); }
.value-cell:nth-child(2n) { border-right: 0; }
.featured-in-logos { gap: 24px; }
.featured-in-logo { font-size: 1.1rem; }
.mini-cases-grid { grid-template-columns: repeat(2, 1fr); }
.pk-map-grid { grid-template-columns: 1fr; gap: 40px; }
.pk-map-card { padding: 40px 28px; }
.gallery-grid { grid-template-columns: 1fr 1fr; height: auto; grid-template-rows: auto; }
.gallery-item.featured { grid-column: span 2; height: 280px; }
.gallery-item { height: 200px; }
.currencies-grid { grid-template-columns: repeat(4, 1fr); }
.awards-grid { grid-template-columns: repeat(2, 1fr); }
.why-pk { grid-template-columns: 1fr; padding: 40px 28px; gap: 32px; }
.diaspora-grid { grid-template-columns: 1fr; }
.founder-letter { padding: 40px 28px; }
.nav-list { display: none; }
.mobile-toggle { display: inline-flex; }
.nav-list.open {
display: flex; flex-direction: column;
position: absolute; top: 100%; left: 16px; right: 16px;
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 12px;
gap: 4px;
box-shadow: var(--shadow-lg);
max-height: calc(100vh - 220px);
overflow-y: auto;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
z-index: 1100;
}
.nav-list.open .nav-item { width: 100%; flex-shrink: 0; }
.nav-list.open .nav-link { width: 100%; padding: 14px 18px; }
.dropdown {
position: static; opacity: 1; pointer-events: auto; transform: none;
background: var(--bg-warm); border: 0; box-shadow: none;
margin-top: 8px;
padding: 8px;
min-width: auto;
display: none;
}
.nav-item.open .dropdown { display: block; }
.header-cta-row .contact-icon-btn { display: none; }
}
@media (max-width: 900px) {
.cert-row { padding: 20px; gap: 12px; }
.cert-item { padding: 6px 12px; }
.cert-divider { display: none; }
.cert-logo { width: 36px; height: 36px; }
.cert-logo svg, .cert-logo img { width: 28px; height: 28px; }
.cert-text strong { font-size: 0.85rem; }
.cert-text span { font-size: 0.7rem; }
}
/* TABLET ≤900px */
@media (max-width: 900px) {
.deliverables-grid { grid-template-columns: 1fr; gap: 14px; }
.deliverables-grid > .deliverable-card,
.deliverables-grid > .deliverable-card:nth-child(5):nth-last-child(3),
.deliverables-grid > .deliverable-card:nth-child(6):nth-last-child(2),
.deliverables-grid > .deliverable-card:nth-child(7):nth-last-child(1) { grid-column: auto; }
.svc-tools-grid { grid-template-columns: repeat(4, 1fr); gap: 10px; }
.svc-industries-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
.svc-testimonials-grid { grid-template-columns: 1fr; gap: 14px; }
.why-svc-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
.services-hero { padding: 110px 0 60px; }
.services-grid-big { grid-template-columns: 1fr; gap: 14px; }
.services-grid-big > .service-big-card,
.services-grid-big > .service-big-card:nth-child(5):nth-last-child(3),
.services-grid-big > .service-big-card:nth-child(6):nth-last-child(2),
.services-grid-big > .service-big-card:nth-child(7):nth-last-child(1) { grid-column: auto; }
.process-timeline-big { grid-template-columns: repeat(2, 1fr); gap: 28px; }
.process-timeline-big::before { display: none; }
.investment-grid { grid-template-columns: 1fr; gap: 14px; max-width: 480px; margin: 0 auto; }
.invest-card.featured { transform: none; }
.invest-card.featured:hover { transform: translateY(-4px); }
.service-results-grid { grid-template-columns: 1fr; }
.contact-hero-grid { grid-template-columns: 1fr; gap: 36px; }
.contact-form-pop { max-width: 720px; }
.contact-form-header { padding: 28px 32px 20px; }
.contact-form-body { padding: 28px 32px 32px; }
.channels-bar { grid-template-columns: 1fr 1fr; }
.contact-hero-stats { grid-template-columns: repeat(2, 1fr); padding: 22px 0; gap: 24px 0; }
.contact-hero-stat:nth-child(2)::after { display: none; }
.contact-methods-grid { grid-template-columns: repeat(2, 1fr); }
.next-steps-grid { grid-template-columns: 1fr; }
.office-large-card { grid-template-columns: 1fr; }
.office-large-image { min-height: 260px; }
.office-large-content { padding: 36px 28px; }
.about-hero { padding: 140px 0 70px; }
.about-hero-stats { grid-template-columns: repeat(2, 1fr); gap: 24px; }
.story-timeline { grid-template-columns: 1fr; gap: 32px; }
.story-timeline::before { display: none; }
.team-showcase { grid-template-columns: 1fr 1fr; grid-template-rows: auto; height: auto; }
.team-showcase-item { aspect-ratio: 4/3; }
.team-showcase-item.tall { grid-row: span 1; aspect-ratio: 4/3; }
.difference-grid { grid-template-columns: 1fr; }
.founder-promise { grid-template-columns: 1fr; padding: 36px 28px; gap: 32px; }
.founder-promise-photo { aspect-ratio: 16/9; }
.culture-strip { grid-template-columns: 1fr 1fr; }
.industries-grid { grid-template-columns: repeat(2, 1fr); }
.tools-grid { grid-template-columns: repeat(4, 1fr); }
.why-grid { grid-template-columns: repeat(2, 1fr); }
.testimonial-grid { grid-template-columns: 1fr 1fr; }
.currencies-grid { grid-template-columns: repeat(4, 1fr); }
.awards-grid { grid-template-columns: repeat(2, 1fr); }
.offices-redesigned { grid-template-columns: 1fr; }
.country-grid { grid-template-columns: repeat(3, 1fr); }
.areas-grid { grid-template-columns: 1fr; }
.mini-cases-grid { grid-template-columns: repeat(2, 1fr); }
.blog-grid { grid-template-columns: 1fr; }
.gallery-grid { grid-template-columns: 1fr 1fr; height: auto; grid-template-rows: auto; }
.gallery-item { height: 200px; }
.gallery-item.featured { grid-column: span 2; height: 280px; }
.diaspora-grid { grid-template-columns: 1fr; }
.grow-section { grid-template-columns: 1fr; padding: 40px 28px; gap: 32px; }
.why-pk { grid-template-columns: 1fr; padding: 36px 28px; }
.pk-map-grid { grid-template-columns: 1fr; gap: 32px; }
.pk-map-card { padding: 36px 28px; }
.case-study-card { grid-template-columns: 1fr; padding: 32px; gap: 32px; }
.contact-form-section { grid-template-columns: 1fr; }
.contact-form-left, .contact-form-right { padding: 36px 32px; }
.footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}
/* MOBILE ≤720px */
@media (max-width: 720px) {
.container { padding: 0 16px; }
/* Top strip + header */
.pk-strip { font-size: 0.7rem; padding: 0 4px; }
.pk-strip-inner { padding: 7px 0; gap: 8px; flex-wrap: nowrap; }
.pk-strip-left span { display: none; }
.pk-strip-left { gap: 8px; }
.pk-strip-right { gap: 8px; font-size: 0.68rem; }
.pk-strip-right a:first-child span,
.pk-strip-right a:last-child span { display: none; }
.pk-strip-divider { display: none; }
.pk-flag-svg { width: 28px; height: 19px; }
.header { top: 32px; }
.header-inner { padding: 12px 16px; gap: 10px; }
.logo img { height: 40px; }
.footer .logo img { height: 52px; }
.header .btn-primary {
padding: 10px 14px; font-size: 0.78rem;
}
.header-cta-text-full { display: none; }
.contact-icon-btn { display: none; }
/* Hero */
.hero { padding: 120px 0 50px; }
.hero-eyebrow { font-size: 0.72rem; padding: 6px 12px; gap: 6px; }
.hero-headline { font-size: 1.4rem; line-height: 1.2; margin-bottom: 16px; }
.hero p.lead { font-size: 0.95rem; margin-bottom: 24px; padding: 0 4px; }
.hero-cta { flex-direction: column; gap: 10px; margin-bottom: 24px; }
.hero-cta .btn { width: 100%; }
.hero-form { flex-direction: column; border-radius: var(--radius); padding: 10px; gap: 8px; }
.hero-form-select { padding: 14px 18px; padding-right: 44px; border-radius: var(--radius-sm); background-color: var(--bg-soft); font-size: 0.92rem; }
.hero-form-btn { width: 100%; padding: 16px; }
.cert-row { padding: 14px 12px; gap: 6px; flex-direction: row; flex-wrap: wrap; justify-content: center; }
.cert-item { padding: 4px 8px; gap: 6px; }
.cert-divider { display: none; }
.cert-logo { width: 28px; height: 28px; }
.cert-logo svg, .cert-logo img { width: 22px; height: 22px; }
.cert-text strong { font-size: 0.78rem; }
.cert-text span { font-size: 0.65rem; }
.hero-footer-text { font-size: 0.88rem; padding: 0 8px; }
.hero-visual { margin-top: 28px; padding: 0 8px; }
.hero-photo-card img { aspect-ratio: 4/3; }
.float-card-1, .float-card-2, .float-card-3 { display: none; }
/* Sections */
.section { padding: 48px 0; }
.section-header { margin-bottom: 28px; padding: 0 4px; }
.section-header h2 { font-size: 1.6rem; line-height: 1.2; }
.section-header p { font-size: 0.92rem; }
/* Country pills */
.country-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
.country-card { padding: 14px 10px; }
.country-flag-svg { width: 48px; height: 24px; margin-bottom: 8px; }
.country-card .country-name { font-size: 0.82rem; }
.country-card .country-tag { font-size: 0.65rem; }
/* PK map */
.pk-map-card { padding: 24px 18px; border-radius: var(--radius); }
.pk-map-content h2 { font-size: 1.6rem; }
.pk-map-content p { font-size: 0.92rem; }
.pk-map-pill { padding: 7px 12px; font-size: 0.78rem; }
.pk-map-pin .pin-label { font-size: 0.6rem; padding: 3px 7px; top: -24px; }
.pk-map-pin { width: 9px; height: 9px; }
/* About preview */
.split-section { grid-template-columns: 1fr; gap: 32px; }
.split-image { max-height: 360px; }
.split-content h2 { font-size: 1.6rem; }
.split-content p { font-size: 0.95rem; }
/* Services */
.grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
.service-card { padding: 24px 20px; }
.service-card .icon-large { width: 48px; height: 48px; }
.service-card .icon-large svg { width: 24px; height: 24px; }
.service-card h3 { font-size: 1.1rem; }
/* Case study */
.case-study-card { padding: 24px 20px; }
.case-study-content h2 { font-size: 1.3rem; }
.case-study-metrics { grid-template-columns: 1fr; gap: 12px; padding: 18px 0; }
/* Mini cases */
.mini-cases-grid { grid-template-columns: 1fr; gap: 10px; }
.mini-cases-header { margin: 32px 0 18px; padding-top: 28px; flex-direction: column; align-items: flex-start; }
.mini-cases-header h3 { font-size: 1.2rem; }
.mini-case-metric { font-size: 1.8rem; }
/* Stats */
.stats-row { grid-template-columns: repeat(2, 1fr); padding: 28px 16px; gap: 24px 0; }
.stat-block:nth-child(2)::after, .stat-block:nth-child(odd)::after { display: none; }
.stat-num { font-size: 2.2rem; }
.stat-label { font-size: 0.82rem; }
/* Industries */
.industries-grid { grid-template-columns: 1fr; gap: 10px; }
.industry-card { min-height: 200px; padding: 18px 18px; }
.industry-card h3 { font-size: 1rem; }
.industry-card p { font-size: 0.82rem; }
/* Process */
.process-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
.process-card { padding: 18px 16px; }
.process-card .step-num { font-size: 2.2rem; margin-bottom: 6px; }
.process-card h3 { font-size: 1rem; }
.process-card p { font-size: 0.85rem; }
/* Why hire Pakistan */
.why-pk { padding: 28px 20px; gap: 24px; }
.why-pk-stats { grid-template-columns: 1fr 1fr; gap: 10px; }
.why-pk-stat { padding: 16px; }
.why-pk-stat .num { font-size: 1.6rem; }
/* Tools */
.tools-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
.tool-card { padding: 14px 8px; min-height: 80px; }
.tool-card .tool-name { font-size: 0.7rem; }
/* Why us */
.why-grid { grid-template-columns: 1fr; gap: 10px; }
.why-card { padding: 18px 18px; }
.why-card h3 { font-size: 1rem; }
.why-card p { font-size: 0.85rem; }
/* Comparison table */
.compare-row { grid-template-columns: 1fr; }
.compare-row > div { border-right: 0 !important; padding: 14px 18px; font-size: 0.88rem; }
.compare-row > div:not(:last-child) { border-bottom: 1px solid var(--line); }
.compare-head { font-size: 0.85rem !important; }
/* Inline CTA */
.inline-cta { padding: 22px 24px; flex-direction: column; align-items: flex-start; }
.inline-cta-text h3 { font-size: 1.1rem; }
.inline-cta-text p { font-size: 0.85rem; }
.inline-cta .btn-ink { width: 100%; justify-content: center; }
/* Testimonials */
.testimonial-grid { grid-template-columns: 1fr; gap: 10px; }
.testimonial-card { padding: 20px 18px; }
.testimonial-text { font-size: 0.9rem; }
/* Currencies */
.currencies-grid { grid-template-columns: repeat(3, 1fr); }
.currency-card { padding: 18px 10px; border-right: 1px solid var(--line); }
.currency-card:nth-child(3n) { border-right: 0; }
.currency-card:nth-last-child(-n+3) { border-bottom: 0; }
.currency-card { border-bottom: 1px solid var(--line); }
.currency-symbol-bg { width: 40px; height: 40px; margin-bottom: 8px; }
.currency-symbol { font-size: 1.2rem; }
.currency-card .currency-code { font-size: 0.85rem; }
.currency-card .currency-name { font-size: 0.6rem; }
/* Areas We Serve */
.areas-grid { grid-template-columns: 1fr; gap: 10px; }
.areas-region-card { padding: 16px 16px; }
.region-name { font-size: 0.88rem; }
.region-count { font-size: 0.65rem; }
.area-pill { padding: 5px 11px; font-size: 0.78rem; }
/* Awards */
.awards-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
.award-card { padding: 20px 14px; }
.award-icon { width: 56px; height: 56px; margin-bottom: 14px; }
.award-icon svg { width: 26px; height: 26px; }
/* When you grow / founder */
.grow-section { padding: 28px 20px; gap: 24px; }
.grow-content h2 { font-size: 1.6rem; }
.grow-content blockquote { font-size: 0.95rem; padding-left: 16px; }
/* Office cards */
.offices-redesigned { grid-template-columns: 1fr; }
.office-new-image { aspect-ratio: 16/9; height: auto; }
.office-new-body { padding: 18px 18px; }
/* Contact form */
.contact-form-section { grid-template-columns: 1fr; }
.contact-form-left, .contact-form-right { padding: 28px 22px; }
.contact-form-left h2 { font-size: 1.5rem; }
.contact-stats-row { grid-template-columns: 1fr 1fr; gap: 8px; }
.contact-stat-tile { padding: 12px; }
.contact-stat-tile .num { font-size: 1.2rem; }
.form-row { grid-template-columns: 1fr; gap: 12px; margin-bottom: 12px; }
/* FAQ */
.faq-item summary { padding: 14px 16px; font-size: 0.92rem; gap: 12px; }
.faq-item summary .faq-toggle { width: 28px; height: 28px; }
.faq-answer { padding: 0 16px 14px; font-size: 0.85rem; }
/* CTA banner */
.cta-banner { padding: 36px 24px; border-radius: var(--radius); }
.cta-banner h2 { font-size: 1.6rem; }
.cta-banner p { font-size: 0.95rem; }
/* Footer */
.footer { padding: 56px 0 24px; }
.footer-cta-strip { padding: 24px 22px; flex-direction: column; align-items: flex-start; gap: 16px; margin-bottom: 36px; }
.footer-cta-strip h3 { font-size: 1.15rem; }
.footer-cta-strip-buttons { width: 100%; }
.footer-cta-strip-buttons a { flex: 1; justify-content: center; }
.footer-grid { grid-template-columns: 1fr; gap: 28px; padding-bottom: 28px; margin-bottom: 28px; }
.footer-bottom { flex-direction: column; text-align: center; gap: 12px; }
.footer-bottom-links { gap: 16px; }
/* Sticky bottom bar */
.sticky-bottom-bar { padding: 8px; gap: 6px; }
.sticky-bottom-bar a { padding: 11px 8px; font-size: 0.78rem; gap: 6px; }
.sticky-bottom-bar a svg { width: 14px; height: 14px; }
.footer { padding-bottom: 64px; }
/* WhatsApp float */
.whatsapp-float { width: 50px; height: 50px; bottom: 76px; right: 14px; }
.whatsapp-float svg { width: 24px; height: 24px; }
/* Mega menu / mobile nav adjustments handled in 1100px breakpoint already */
.svc-tools-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
.svc-tool-card { padding: 16px 10px; }
.svc-industries-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
.svc-industry-card { padding: 18px 18px; }
.why-svc-grid { grid-template-columns: 1fr; gap: 10px; }
.why-svc-card { padding: 22px 22px; }
.deliverable-head { padding: 22px 22px 18px; }
.deliverable-body { padding: 22px 22px; }
/* Services page mobile */
.services-hero { padding: 100px 0 50px; }
.services-hero h1 { font-size: 1.8rem; }
.services-hero p.lead { font-size: 0.92rem; }
.service-big-card { padding: 28px 24px; }
.service-big-num { font-size: 3.5rem; top: 18px; right: 22px; }
.service-big-icon { width: 52px; height: 52px; }
.service-big-card h3 { font-size: 1.3rem; }
.process-timeline-big { grid-template-columns: 1fr; gap: 28px; }
.process-step-big-marker { width: 60px; height: 60px; font-size: 1.2rem; margin-bottom: 14px; }
.invest-card { padding: 28px 24px; }
.invest-price { font-size: 2rem; }
.service-result-card { padding: 24px 22px; }
.service-result-num { font-size: 2.4rem; }
/* Contact page mobile */
.contact-hero { padding: 110px 0 80px; }
.contact-hero h1 { font-size: 1.6rem; }
.contact-hero p.lead { font-size: 0.92rem; margin-bottom: 24px; }
.contact-hero-cta-row .btn-yellow,
.contact-hero-cta-row .btn-whatsapp { width: 100%; justify-content: center; }
.contact-hero-stats { grid-template-columns: 1fr 1fr; padding: 18px 0; }
.contact-hero-stat .num { font-size: 1.4rem; }
.contact-form-header { padding: 24px 22px 18px; }
.contact-form-header h2 { font-size: 1.3rem; }
.contact-form-body { padding: 22px 22px 28px; }
.contact-form-body .form-row { grid-template-columns: 1fr; gap: 12px; }
.contact-form-body .btn-submit { width: 100%; justify-content: center; }
.contact-form-body .form-submit-row { flex-direction: column; align-items: stretch; }
.channels-bar { grid-template-columns: 1fr; }
.channel-card { padding: 18px 16px; }
.contact-form-card { padding: 28px 22px; }
.contact-methods-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
.contact-method-card { padding: 22px 18px; }
.contact-method-icon { width: 44px; height: 44px; margin-bottom: 12px; }
.next-step { padding: 28px 22px; }
.office-large-content { padding: 28px 22px; }
.office-large-content h2 { font-size: 1.4rem; }
/* About page mobile */
.about-hero { padding: 110px 0 50px; }
.about-hero h1 { font-size: 1.6rem; }
.about-hero p.lead { font-size: 0.95rem; }
.about-hero-stats { grid-template-columns: 1fr 1fr; gap: 16px; padding-top: 28px; margin-top: 32px; }
.about-hero-stat .num { font-size: 1.6rem; }
.story-step h3 { font-size: 1.1rem; }
.team-showcase { grid-template-columns: 1fr; gap: 12px; }
.team-showcase-content { padding: 18px; }
.difference-col { padding: 24px 22px; }
.founder-promise { padding: 28px 22px; gap: 24px; }
.founder-promise-content blockquote { font-size: 1.05rem; }
.culture-strip { grid-template-columns: 1fr; }
}
/* SMALL PHONE ≤480px */
@media (max-width: 480px) {
.hero-headline { font-size: 1.2rem; }
.section-header h2 { font-size: 1.4rem; }
.currencies-grid { grid-template-columns: repeat(2, 1fr); }
.currency-card:nth-child(3n) { border-right: 1px solid var(--line); }
.currency-card:nth-child(2n) { border-right: 0; }
.tools-grid { grid-template-columns: repeat(2, 1fr); }
.process-grid { grid-template-columns: 1fr; }
.stats-row { grid-template-columns: 1fr 1fr; gap: 16px 0; }
.footer-cta-strip-buttons { flex-direction: column; }
.footer-cta-strip-buttons a { width: 100%; }
}
/* ANIMATIONS */
@keyframes fadeUp {
from { opacity: 0; transform: translateY(24px); }
to { opacity: 1; transform: translateY(0); }
}
.reveal { opacity: 0; animation: fadeUp 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards; }
.reveal-1 { animation-delay: 0.1s; }
.reveal-2 { animation-delay: 0.2s; }
.reveal-3 { animation-delay: 0.3s; }
.reveal-4 { animation-delay: 0.4s; }
/* UTILITIES */
.mt-0 { margin-top: 0; } .mt-2 { margin-top: 16px; } .mt-3 { margin-top: 24px; } .mt-4 { margin-top: 32px; } .mt-6 { margin-top: 48px; }
.mb-0 { margin-bottom: 0; } .mb-2 { margin-bottom: 16px; } .mb-3 { margin-bottom: 24px; } .mb-4 { margin-bottom: 32px; }
.flex { display: flex; }
.gap-2 { gap: 8px; } .gap-3 { gap: 12px; } .gap-4 { gap: 16px; }
.items-center { align-items: center; } .justify-center { justify-content: center; } .flex-wrap { flex-wrap: wrap; }
/* === Universal hero-clearance fix — every first-section variant clears the fixed header (pk-strip 48 + header ~81 = 129px). 156px gives breathing room. === */
.hero, .about-hero, .article-hero, .blog-hero, .contact-hero,
.cr-hero, .ga-hero, .ind-page-hero, .legal-hero, .loc-hero,
.ls-hero, .ma-hero, .seo-hero, .services-hero, .sm-hero,
.ty-hero, .wd-hero {
padding-top: 156px;
}
@media (max-width: 768px) {
.hero, .about-hero, .article-hero, .blog-hero, .contact-hero,
.cr-hero, .ga-hero, .ind-page-hero, .legal-hero, .loc-hero,
.ls-hero, .ma-hero, .seo-hero, .services-hero, .sm-hero,
.ty-hero, .wd-hero {
padding-top: 128px;
}
}
/* === Masking-label overlays removed site-wide per user direction (2026-06-13) ===
Hides: "Grownix Digital · grownixdigital.com" corner badge, "Brand names masked" /
"Masked" / "Anonymised" privacy chips on screenshot mockups.
KEEPS: the diagonal "GROWNIX DIGITAL" watermark pattern (.real-shot::after) - user
wants the watermark to stay as anti-screenshot-theft protection.
Section eyebrows like "Anonymised Plumbing Case Study" are intentionally kept too
(section labels, not screenshot overlays). === */
.real-shot .gx-badge { display: none !important; }
.real-shot.blurred .privacy-label,
.ma-mask-label { display: none !important; }
.gsc-card-top .badge,
.gsc-feature-top .badge { display: none !important; }
/* === PHASE A CRO: Empty Space Fix (2026-06-13) ===
Two-column "alt rows" had align-items: center, which centered the shorter
column against the taller column, leaving visible whitespace above/below
the text. Switching to align-items: start so text begins at the top of the
row. This is page-agnostic and matches the platform-wrap fix already shipped.
=== */
.ga-why-alt-row, .seo-why-alt-row, .ma-why-alt-row, .cr-why-alt-row,
.wd-why-alt-row, .ls-why-alt-row, .sm-why-alt-row,
.ga-why-alt-row.flip, .seo-why-alt-row.flip,
.seo-solution, .ls-gbp-wrap, .ls-reviews-wrap, .ma-venn, .cr-heat-wrap {
align-items: start !important;
}
/* Add some breathing room when text column ends before the visual */
.ga-why-alt-text, .seo-why-alt-text, .ma-why-alt-text, .cr-why-alt-text,
.wd-why-alt-text, .ls-why-alt-text {
padding-top: 6px;
}
/* === PHASE C CRO: Universal Trust Strip (cro-trust) ===
Drop this on any page that needs
above-the-fold trust signals near the hero. Works with any inner container.
=== */
.cro-trust { background: #FAFAFA; padding: 18px 0; border-bottom: 1px solid var(--line); }
.cro-trust-inner { max-width: 1240px; margin: 0 auto; padding: 0 24px; display: grid; grid-template-columns: auto 1fr; gap: 28px; align-items: center; }
.cro-trust-label { padding-right: 24px; border-right: 1px solid var(--line); font-size: 0.74rem; color: var(--ink-2); line-height: 1.45; }
.cro-trust-label strong { color: var(--ink); display: block; font-size: 0.84rem; font-weight: 800; margin-bottom: 2px; }
.cro-trust-pills { display: flex; gap: 10px; flex-wrap: wrap; }
.cro-trust-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 0.74rem; font-weight: 700; color: var(--ink); background: #fff; border: 1px solid var(--line); padding: 7px 12px; border-radius: 999px; white-space: nowrap; }
.cro-trust-pill svg { width: 13px; height: 13px; color: var(--accent-hover); flex-shrink: 0; }
@media (max-width: 820px) {
.cro-trust-inner { grid-template-columns: 1fr; gap: 12px; }
.cro-trust-label { padding-right: 0; padding-bottom: 12px; border-right: 0; border-bottom: 1px solid var(--line); }
}
/* ====================================================================
MOBILE-FIRST RESPONSIVENESS PASS (2026-06-13)
Comprehensive fixes for: compact header, scaled section padding,
responsive typography, fixed-column grids that broke on small screens.
==================================================================== */
@media (max-width: 768px) {
/* ---- HEADER: compact pk-strip + header so they stop eating 15-20% of phone screen ---- */
.pk-strip { font-size: 0.66rem; padding: 6px 0; }
.pk-strip-inner { gap: 8px; flex-wrap: wrap; }
.pk-strip-left span:not(.pk-strip-left) { display: none; } /* hide "Made in Lahore" text on phones, keep flag */
.pk-strip-right a span { display: none; } /* hide phone/email text, keep icons */
.pk-strip-divider { display: none; }
.header-inner { padding: 8px 14px; gap: 6px; }
.logo .logo-icon, .logo img { height: 38px !important; }
.nav-list { gap: 0; }
.header-cta-row { gap: 6px; }
/* ---- SECTIONS: halve oversized desktop padding so phones see 2x more content per scroll ---- */
.gwd-sec, .gwd-cta-sec,
section.ga-sec, section.seo-sec, section.ls-sec, section.ma-sec, section.cr-sec, section.sm-sec, section.wd-sec,
section.cr-sec.alt, section.sm-sec.alt, section.ma-sec.alt, section.seo-sec.alt, section.ga-sec.alt, section.ls-sec.alt, section.wd-sec.alt,
.industries-pills-section, .platform-section, .gsc-section, .toolstack-section, .sm-stats,
.cr-stats, .ga-stats, .seo-counter, .ma-counter, .ls-stats {
padding-top: 48px !important;
padding-bottom: 48px !important;
}
.gwd-sec-tight { padding: 36px 0 !important; }
/* ---- TYPOGRAPHY: cap oversized headlines that don't already use clamp() ---- */
h1, .hero h1, .ga-hero h1, .seo-hero h1, .ls-hero h1, .ma-hero h1, .cr-hero h1, .sm-hero h1, .wd-hero h1,
.about-hero h1, .contact-hero h1, .blog-hero h1, .article-hero h1, .services-hero h1, .ind-page-hero h1 {
font-size: clamp(1.8rem, 7vw, 2.4rem) !important;
line-height: 1.1 !important;
letter-spacing: -0.02em !important;
}
h2, .gwd-head h2, .seo-head h2, .ga-head h2, .ls-head h2, .ma-head h2, .cr-head h2, .sm-head h2, .wd-head h2,
.section-header h2 {
font-size: clamp(1.5rem, 5.5vw, 2rem) !important;
line-height: 1.15 !important;
}
h3, .gwd-head h3 { font-size: clamp(1.2rem, 4.5vw, 1.5rem) !important; }
.lead, p.lead, .hero-lead, .gwd-hero-lead, .sub-lead { font-size: 0.96rem !important; line-height: 1.55 !important; }
/* ---- HERO CTAs: full-width stacked buttons (tap targets larger than 44px) ---- */
.hero-ctas, .gwd-hero-ctas, .hero-cta-row,
.seo-hero-cta-row, .ga-hero-cta-row, .ls-hero-cta-row, .ma-hero-cta-row,
.cr-hero-ctas, .sm-hero-cta-row, .wd-hero-ctas, .contact-hero-cta-row {
flex-direction: column !important;
align-items: stretch !important;
gap: 10px !important;
}
.hero-ctas a, .gwd-hero-ctas a, .hero-cta-row a,
.seo-hero-cta-row a, .ga-hero-cta-row a, .ls-hero-cta-row a, .ma-hero-cta-row a,
.cr-hero-ctas a, .sm-hero-cta-row a, .wd-hero-ctas a {
justify-content: center;
min-height: 50px;
}
/* ---- TRUST STRIP (cro-trust): stack properly on mobile ---- */
.cro-trust { padding: 14px 0; }
.cro-trust-inner { grid-template-columns: 1fr; gap: 10px; padding: 0 16px; }
.cro-trust-label { padding-right: 0; padding-bottom: 8px; border-right: 0; border-bottom: 1px solid var(--line); text-align: center; }
.cro-trust-pills { justify-content: center; gap: 6px; }
.cro-trust-pill { font-size: 0.68rem; padding: 5px 10px; }
/* ---- SOCIAL MEDIA mockups: simplify 7-col calendar + 4-col gallery to keep cells readable ---- */
.sm-mini-cal { grid-template-columns: repeat(7, 1fr) !important; gap: 2px; }
.sm-mini-cal-day { font-size: 0.5rem; padding: 2px; }
.sm-gallery { grid-template-columns: repeat(3, 1fr) !important; }
.sm-cal-full .sm-cal-cell { font-size: 0.55rem; min-height: 38px; padding: 3px 3px 2px; }
.sm-cal-full .sm-cal-cell .post { font-size: 0.5rem; padding: 1px 3px; }
.sm-cal-full .sm-cal-cell.head { font-size: 0.6rem; padding: 4px 2px; }
.sm-stats { grid-template-columns: 1fr 1fr 1fr; }
.sm-stats .sm-stat .v { font-size: 0.78rem; }
/* ---- INDUSTRIES PILLS GRID: fix overflow on tiny screens ---- */
.igv2-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 6px; }
.igv2-card { padding: 8px 10px 8px 8px; min-height: 56px; }
.igv2-thumb { width: 36px; height: 36px; font-size: 1.1rem; }
.igv2-name { font-size: 0.74rem; }
/* ---- 152+ INDUSTRIES section header on phones ---- */
.industries-pills-section .section-header { padding: 0 16px; }
.industries-pills-section .section-header p { font-size: 0.86rem; }
/* ---- PLATFORM SECTION mockups (Instagram phone etc.): no perspective tilt on mobile (causes overflow) ---- */
.ps-mockup { transform: none !important; box-shadow: 0 20px 40px -16px rgba(17,17,17,0.25); }
.platform-wrap { gap: 22px; padding: 0 16px !important; }
.platform-wrap .real-shot img { max-height: 380px !important; }
/* ---- FORMS: bigger touch targets, full-width inputs ---- */
input[type="text"], input[type="email"], input[type="tel"], input[type="url"],
textarea, select, .form-control, .gwd-fg input, .gwd-fg textarea {
font-size: 16px !important; /* prevents iOS zoom-on-focus */
padding: 12px 14px;
}
.form-submit-row, .submit-row { flex-direction: column !important; gap: 12px; align-items: stretch; }
.btn-submit, button[type="submit"] { min-height: 50px; width: 100%; justify-content: center; }
/* ---- SERVICE/CONTENT CARDS: tighten padding for small screens ---- */
.gwd-problem-card { padding: 22px 18px !important; gap: 12px !important; }
.gwd-deliv-card, .gwd-stack-card, .gwd-case-tile { padding: 22px 18px !important; }
.sm-alt-row { padding: 16px 18px; }
.sm-alt-mock { min-height: 220px; }
/* ---- FOOTER: 1-col stack with reduced padding ---- */
.footer { padding: 48px 0 100px; } /* keep bottom buffer for sticky bar */
.footer-grid { gap: 28px; }
/* ---- STICKY BOTTOM BAR: ensure no overlap with footer last item ---- */
.sticky-bottom-bar { padding: 8px 10px; gap: 6px; }
.sticky-bottom-bar a { font-size: 0.82rem; padding: 9px 10px; min-height: 44px; }
}
/* ---- EXTRA SMALL PHONES (320-380px): tighten further ---- */
@media (max-width: 420px) {
h1, .hero h1 { font-size: clamp(1.6rem, 7.5vw, 2rem) !important; }
h2 { font-size: clamp(1.4rem, 5.5vw, 1.7rem) !important; }
.container, .seo-container, .ga-container, .ls-container, .ma-container, .cr-container, .sm-container, .wd-container {
padding-left: 14px !important; padding-right: 14px !important;
}
.pk-strip-left .pk-flag-svg { width: 18px; height: 12px; }
.header-inner { padding: 6px 10px; }
.logo .logo-icon, .logo img { height: 32px !important; }
.sm-stats { grid-template-columns: 1fr 1fr; }
.sm-stats .sm-stat:nth-child(3) { grid-column: span 2; }
.igv2-grid { grid-template-columns: 1fr !important; }
}
/* ====================================================================
MOBILE FIX PASS 2 (2026-06-13) — targets specific elements that
caused horizontal cramping despite the first pass.
==================================================================== */
@media (max-width: 768px) {
/* ---- Reset min-width columns that exceed 320px viewport ---- */
.cr-cta-right, .ga-final-right, .ma-cta-right, .seo-final-right,
.inline-cta-text, .cta-button-group, .final-right {
min-width: 0 !important;
width: 100% !important;
}
/* ---- Force ALL grid layouts in CTA boxes to single column ---- */
.cr-cta-inner, .ga-final-inner, .ma-cta-inner, .seo-final-inner,
.wd-final-inner, .ls-final-inner, .sm-final-inner,
.ga-final-grid, .seo-final-grid {
grid-template-columns: 1fr !important;
text-align: center !important;
}
.cr-cta-right, .ga-final-right, .ma-cta-right, .seo-final-right {
align-items: stretch !important;
}
/* ---- Hero form grids: stack multi-column form rows ---- */
.form-row, .form-row.t2, .form-row.t3, .form-row.t4,
.ga-form-row, .ga-form-row.t2, .seo-form-row, .seo-form-row.t2,
.ma-form-row, .wd-form-row, .ls-form-row, .cr-form-row,
.sm-form-row {
grid-template-columns: 1fr !important;
gap: 12px !important;
}
/* ---- Hero forms: make the form card full width ---- */
.ga-form, .seo-form, .wd-form, .ls-form, .ma-form, .cr-form, .sm-form {
width: 100% !important;
min-width: 0 !important;
}
/* ---- Stats grids: keep them tight (2 col on phone, 1 col on tiny) ---- */
.gwd-hero-stats, .cr-hero-stats, .ga-hero-stats, .seo-hero-stats,
.ma-hero-stats, .wd-hero-stats, .ls-hero-stats, .sm-hero-stats {
grid-template-columns: repeat(2, 1fr) !important;
gap: 10px !important;
}
/* ---- Container padding: tighter on phones ---- */
.container, .seo-container, .ga-container, .ls-container,
.ma-container, .cr-container, .sm-container, .wd-container, .gwd-container,
.footer .container, .pk-strip .container {
padding-left: 18px !important;
padding-right: 18px !important;
}
/* ---- Image safety: never overflow container ---- */
img, svg, video, iframe { max-width: 100%; height: auto; }
/* ---- Dropdown menus: don't blow out the layout in mobile menu ---- */
.dropdown { min-width: 100% !important; }
.dropdown > div { grid-template-columns: 1fr !important; }
/* ---- Footer: simple stacked layout ---- */
.footer-grid { grid-template-columns: 1fr !important; gap: 28px !important; }
.footer-grid > div { text-align: center; }
.footer h4 { justify-content: center !important; }
.footer ul a { justify-content: center !important; }
.footer-about p { margin-left: auto !important; margin-right: auto !important; }
.footer-about .pk-badge { margin-left: auto; margin-right: auto; }
.footer-bottom { flex-direction: column; gap: 14px; text-align: center; }
.footer-bottom-links { justify-content: center; flex-wrap: wrap; }
.footer-social { justify-content: center; }
.footer-contact-item { justify-content: center; flex-wrap: wrap; }
.footer-newsletter, .footer-newsletter form { align-items: center; justify-content: center; }
/* ---- Tables and wide content: always horizontally scrollable rather than break layout ---- */
table, .table-wrap, .seo-compare-wrap, .gwd-compare-wrap, .pricing-wrap {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
/* ---- Card rows that use 1fr 1fr 1fr at desktop: collapse to 1fr ---- */
.gwd-deliv-grid, .gwd-stack-grid, .gwd-problem-list,
.case-grid, .ga-case-grid, .seo-svc-grid,
.toolstack-grid, .toolstack-grid[style] {
grid-template-columns: 1fr !important;
gap: 14px !important;
}
/* ---- Process steps with horizontal connector line: stack ---- */
.gwd-process, .seo-proc-grid, .ga-process-grid,
.ls-flow, .ma-flow, .cr-process, .sm-process, .wd-process {
grid-template-columns: 1fr !important;
}
.gwd-process::before, .seo-proc-grid::before, .ga-process-grid::before { display: none !important; }
/* ---- Final hero clearance recheck (header + pk-strip ~100px on mobile) ---- */
.hero, .about-hero, .article-hero, .blog-hero, .contact-hero,
.cr-hero, .ga-hero, .ind-page-hero, .legal-hero, .loc-hero,
.ls-hero, .ma-hero, .seo-hero, .services-hero, .sm-hero,
.ty-hero, .wd-hero {
padding-top: 104px !important;
}
}
@media (max-width: 420px) {
/* Even tighter on small phones */
.gwd-hero-stats, .cr-hero-stats, .ga-hero-stats, .seo-hero-stats,
.ma-hero-stats, .wd-hero-stats, .ls-hero-stats, .sm-hero-stats {
grid-template-columns: 1fr 1fr !important;
}
.container, .seo-container, .ga-container, .ls-container,
.ma-container, .cr-container, .sm-container, .wd-container {
padding-left: 14px !important;
padding-right: 14px !important;
}
/* Form labels above inputs (not inline) for usability */
.form-label, .ga-form label, .seo-form label, .wd-form label {
font-size: 0.78rem !important;
margin-bottom: 4px;
}
}
/* === MOBILE FIX 3 (2026-06-13) — gsc cards aspect-ratio empty space ===
The .gsc-card .real-shot has aspect-ratio 16/5 to align cards horizontally
on desktop. On mobile (cards stack vertically) this creates a stretched
empty box below the image. Let the container size to the image naturally.
=== */
@media (max-width: 768px) {
.gsc-card .real-shot, .gsc-feature .real-shot {
aspect-ratio: auto !important;
height: auto !important;
}
.gsc-card .real-shot img, .gsc-feature .real-shot img {
height: auto !important;
object-fit: contain !important;
width: 100% !important;
}
/* Force gsc grid to single column on mobile so cards don't squish */
.gsc-grid { grid-template-columns: 1fr !important; gap: 16px !important; }
.gsc-card { min-width: 0 !important; }
/* Remove diagonal GROWNIX DIGITAL watermark pattern on mobile too — the empty container
made it dominant; once container is right-sized the pattern only shows on the image.
Actually keep watermark on the image area only, just constrain it. */
.real-shot::after { background-size: 200px 200px !important; }
}
/* === MOBILE FIX 4 (2026-06-13) — REAL ROOT CAUSE for empty space below screenshots ===
.real-shot has min-height: 240px globally so screenshots have a sensible floor on desktop.
On mobile (narrow viewport), images render much shorter than 240px due to aspect ratio,
leaving 100+px of empty container filled by the watermark ::after overlay.
Force min-height to 0 on mobile so the container sizes to the image height naturally.
=== */
@media (max-width: 768px) {
.real-shot { min-height: 0 !important; }
/* Also: kill the watermark::after on mobile — when image is small, the diagonal
watermark pattern dominates and looks ugly. Keep only the image. */
.real-shot::after { display: none !important; }
}
/* ====================================================================
HOMEPAGE MOBILE OPTIMIZATION (2026-06-13)
Section-by-section targeted fixes for index.html.
==================================================================== */
@media (max-width: 768px) {
/* ---- HERO ---- */
.hero { padding: 96px 0 32px !important; }
.hero-inner { padding: 0 4px; }
.hero-eyebrow { font-size: 0.72rem; padding: 6px 14px; gap: 8px; line-height: 1.3; margin-bottom: 14px; }
.hero-eyebrow .pulse { width: 6px; height: 6px; flex-shrink: 0; }
.hero-headline { font-size: clamp(1.4rem, 6.5vw, 1.9rem) !important; letter-spacing: -0.01em !important; line-height: 1.18 !important; margin-bottom: 14px; }
.hero-headline br { display: none; }
.hero h1 .highlight { white-space: normal !important; }
.hero p.lead { font-size: 0.95rem !important; max-width: 100%; margin-bottom: 22px; }
.hero-form { flex-direction: column !important; border-radius: 14px !important; padding: 10px !important; max-width: 100%; gap: 8px; margin-bottom: 22px; }
.hero-form-select { padding: 14px 18px !important; font-size: 0.95rem !important; padding-right: 40px !important; background-position: right 12px center !important; background-size: 18px !important; border-radius: 10px; background-color: #FAFAFA; min-height: 48px; }
.hero-form-btn { padding: 14px 22px !important; font-size: 0.86rem !important; width: 100%; justify-content: center; min-height: 48px; }
.cert-row { padding: 14px 12px !important; border-radius: 14px !important; display: grid !important; grid-template-columns: 1fr 1fr; gap: 10px 8px; margin-bottom: 18px; }
.cert-divider { display: none !important; }
.cert-item { padding: 6px 4px !important; gap: 8px; }
.cert-logo { width: 32px !important; height: 32px !important; }
.cert-logo svg, .cert-logo img { width: 24px !important; height: 24px !important; }
.cert-text strong { font-size: 0.78rem; }
.cert-text span { font-size: 0.66rem; }
.hero-footer-text { font-size: 0.86rem; line-height: 1.55; padding: 0 4px; }
.hero-visual { margin-top: 30px; padding: 0 4px; }
.hero-photo-card { border-radius: 14px; }
.hero-photo-floats { display: none !important; }
/* ---- COUNTRIES ---- */
.country-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 8px !important; }
.country-card { padding: 12px 6px !important; min-height: 100px; }
.country-card .flag-emoji, .country-card svg { font-size: 1.4rem !important; }
.country-card .country-name { font-size: 0.72rem !important; line-height: 1.2; }
.country-card .country-tag { font-size: 0.6rem !important; }
/* ---- PAKISTAN-TO-WORLD MAP ---- */
.pk-map-grid { grid-template-columns: 1fr !important; gap: 24px; }
.pk-map-card { padding: 18px !important; border-radius: 14px; }
.pk-map-content h2 { font-size: clamp(1.4rem, 5.5vw, 1.7rem) !important; line-height: 1.2; }
.pk-map-list { gap: 8px; }
.pk-map-pill { font-size: 0.74rem !important; padding: 6px 12px !important; }
/* ---- GSC-HOME (Search Console + Google Ads + Meta Ads proof) ---- */
.gsc-home, .gsc-home.flip { grid-template-columns: 1fr !important; gap: 22px !important; padding: 22px 18px !important; }
.gsc-home .gsc-frame { transform: none !important; }
.gsc-home-text h2 { font-size: clamp(1.3rem, 5.5vw, 1.6rem); line-height: 1.2; margin-bottom: 10px; }
.gsc-home-text p { font-size: 0.86rem; line-height: 1.55; }
.gsc-home-mini-stats { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 8px; }
.gsc-home-mini-stats .m { padding: 8px 4px; text-align: center; }
.gsc-home-mini-stats .m strong { font-size: 1rem; }
.gsc-home-mini-stats .m span { font-size: 0.64rem; }
/* ---- TRUST BADGES ---- */
.trust-badges-section .badge-row { grid-template-columns: 1fr 1fr !important; gap: 12px; }
.badge-img { padding: 14px !important; }
.badge-img img { max-height: 38px; }
/* ---- TOOLSTACK ---- */
.toolstack-grid { grid-template-columns: 1fr !important; gap: 16px; }
.toolstack-card { padding: 16px !important; }
/* ---- STATS BANNER ---- */
.cta-banner { padding: 36px 20px !important; }
.cta-banner h2 { font-size: clamp(1.4rem, 5vw, 1.8rem) !important; }
.cta-banner p { font-size: 0.92rem !important; max-width: 100%; }
.fs-num { font-size: 1.5rem !important; }
.fs-lbl { font-size: 0.66rem !important; }
/* ---- INSIDE OUR OFFICE ---- */
.offices-redesigned { grid-template-columns: 1fr !important; gap: 14px; }
.office-new { padding: 16px !important; }
.office-new-image { max-height: 200px; }
.office-new-meta { font-size: 0.74rem; }
/* ---- FAQ ---- */
.faq-item { padding: 14px 18px !important; }
.faq-item h3, .faq-item summary { font-size: 0.92rem !important; line-height: 1.35; }
.faq-answer { font-size: 0.86rem !important; line-height: 1.55; }
/* ---- COMPARISON ---- */
.compare-card { padding: 14px !important; }
.compare-head { grid-template-columns: 1fr 1fr 1fr !important; gap: 4px; padding: 8px 4px !important; }
.compare-head > div { padding: 6px 4px !important; font-size: 0.66rem !important; }
.compare-row { grid-template-columns: 1fr 1fr 1fr !important; padding: 6px 4px !important; }
.compare-row .compare-feature { font-size: 0.72rem !important; padding: 8px 4px !important; }
.compare-cell { font-size: 0.7rem !important; padding: 8px 4px !important; }
/* ---- INLINE CTA ---- */
.inline-cta { padding: 24px 18px !important; flex-direction: column !important; gap: 16px; text-align: center; }
.inline-cta-text { min-width: 0 !important; width: 100% !important; }
.inline-cta-text h3 { font-size: 1.2rem !important; }
.inline-cta-text p { font-size: 0.88rem !important; }
/* ---- FOUNDER LETTER ---- */
.founder-letter { padding: 24px 20px !important; border-radius: 14px; }
.founder-letter h2 { font-size: 1.4rem !important; }
.founder-letter p { font-size: 0.92rem !important; line-height: 1.7; }
.founder-signature { gap: 12px; flex-wrap: wrap; }
.founder-sig-avatar { width: 44px; height: 44px; }
.founder-urdu { font-size: 0.92rem; }
/* ---- CURRENCIES ---- */
.currencies-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px; }
.currency-card { padding: 14px 10px !important; }
.currency-symbol-bg { font-size: 1.5rem !important; padding: 8px 12px; }
.currency-name { font-size: 0.78rem !important; }
.currency-code { font-size: 0.66rem !important; }
/* ---- AWARDS ---- */
.awards-grid { grid-template-columns: 1fr 1fr !important; gap: 10px; }
.award-card { padding: 14px 10px !important; }
.award-icon { width: 36px; height: 36px; }
.award-name { font-size: 0.78rem !important; line-height: 1.25; }
.award-org { font-size: 0.66rem !important; }
.award-year { font-size: 0.64rem !important; }
/* ---- AREAS WE SERVE ---- */
.areas-grid { grid-template-columns: 1fr !important; gap: 16px; }
.areas-region-card { padding: 18px 16px !important; border-radius: 14px; }
.areas-region-header h3 { font-size: 1.05rem !important; }
.areas-pills { gap: 6px !important; }
.area-pill { font-size: 0.7rem !important; padding: 5px 10px !important; }
/* ---- CONTACT FORM (inline on homepage) ---- */
.contact-form-section { padding: 28px 18px !important; border-radius: 14px; }
.contact-form-section-pop { grid-template-columns: 1fr !important; gap: 18px; }
.contact-form-left, .contact-form-right { padding: 0 !important; }
.contact-form-left h2 { font-size: 1.3rem !important; }
.contact-eyebrow { font-size: 0.72rem !important; }
.contact-perks { grid-template-columns: 1fr !important; gap: 8px; }
.contact-perk { padding: 10px 12px !important; font-size: 0.84rem; }
.contact-stats-row { grid-template-columns: 1fr 1fr !important; gap: 10px; }
.contact-stat-tile .num { font-size: 1.4rem !important; }
.contact-stat-tile .lbl { font-size: 0.7rem !important; }
.cta-banner h2 .highlight { white-space: normal !important; }
}
@media (max-width: 420px) {
.hero-headline { font-size: 1.4rem !important; }
.cert-row { grid-template-columns: 1fr !important; }
.country-grid { grid-template-columns: repeat(2, 1fr) !important; }
.gsc-home-mini-stats { grid-template-columns: 1fr 1fr !important; }
.gsc-home-mini-stats .m:last-child { grid-column: span 2; }
.compare-head > div, .compare-cell, .compare-feature { font-size: 0.62rem !important; padding: 6px 2px !important; }
.awards-grid, .currencies-grid { grid-template-columns: 1fr !important; }
}
/* ====================================================================
MOBILE IMAGE/TEXT ALIGNMENT FIX (2026-06-13)
Targets the common "image stuck on one side" pattern that shows up
across multiple pages when 2-col image+text layouts stack on mobile.
Root causes addressed:
1) Image containers locked to portrait aspect-ratio (4/5, 1/1.05) become
ugly tall narrow strips on mobile. Forced to natural sizing.
2) Stacked grids that should be centered remain left-aligned visually.
3) Decorative ::before/::after circles positioned off-screen.
==================================================================== */
@media (max-width: 768px) {
/* Reset all portrait/odd aspect-ratios on mobile so images size to natural height */
.case-study-image,
.gnet,
.split-image,
.hero-photo-card,
.gallery-item,
.founder-promise-photo,
.team-showcase-item,
.office-new-image,
.platform-section .real-shot,
.seo-solution-img,
.real-shot {
aspect-ratio: auto !important;
height: auto !important;
min-height: 0 !important;
}
/* Images inside these containers: center within the row, natural width */
.case-study-image img,
.split-image img,
.gallery-item img,
.hero-visual img,
.hero-photo-card img,
.office-new-image img,
.founder-promise-photo img,
.team-showcase-item img,
.real-shot img {
width: 100% !important;
height: auto !important;
max-height: 360px !important;
object-fit: cover !important;
object-position: center top !important;
display: block;
margin: 0 auto !important;
}
/* All 2-col image+text layouts: stack with centered children */
.case-study-card,
.split-section,
.gsc-home,
.gsc-home.flip,
.platform-wrap,
.seo-solution,
.ls-gbp-wrap,
.ls-reviews-wrap,
.cr-heat-wrap,
.ma-venn,
.ga-why-alt-row,
.seo-why-alt-row,
.ma-why-alt-row,
.cr-why-alt-row,
.wd-why-alt-row,
.ls-why-alt-row,
.sm-why-alt-row,
.pk-map-grid {
grid-template-columns: 1fr !important;
text-align: left;
justify-items: stretch;
}
/* Flip rows: reset order on mobile so image still comes after text (consistent reading flow) */
.ga-why-alt-row.flip .ga-why-alt-vis,
.seo-why-alt-row.flip .seo-why-alt-img,
.ma-why-alt-row.flip .ma-why-alt-img,
.cr-why-alt-row.flip .cr-why-alt-vis,
.wd-why-alt-row.flip .wd-why-alt-vis,
.ls-why-alt-row.flip,
.sm-why-alt-row.flip {
direction: ltr !important;
}
/* Decorative blob ::before/::after circles that were positioned off-screen — reduce so they don't push layout */
.hero::before,
.gsc-home::before,
.ga-final::before, .ga-final::after,
.seo-final::before, .seo-final::after,
.ma-final::before, .ma-final::after,
.cr-final::before, .cr-final::after {
display: none !important;
}
/* Container fluid width: NEVER let a container go narrower than its inner content */
.container, .seo-container, .ga-container, .ls-container,
.ma-container, .cr-container, .sm-container, .wd-container, .gwd-container,
.pk-strip .container, .footer .container {
width: 100% !important;
max-width: 100% !important;
}
/* Stop hover-tilt transforms on mobile (they cause horizontal overflow + look weird at small sizes) */
.ps-mockup,
.gsc-home .gsc-frame,
.gsc-home.flip .gsc-home-shot .gsc-frame,
.case-study-card:hover,
.ps-mockup:hover { transform: none !important; }
}
/* ====================================================================
HOMEPAGE MOBILE TEXT CENTERING (2026-06-13)
Scoped to body.page-home only — does not affect any other page.
When 2-col image+text grids stack, text content centers cleanly.
==================================================================== */
@media (max-width: 768px) {
/* HERO — center every block in the text column */
.page-home .hero .hero-content,
.page-home .hero-eyebrow,
.page-home .hero-headline,
.page-home .hero .lead,
.page-home .hero-footer-text,
.page-home .cert-row {
text-align: center !important;
justify-content: center !important;
align-items: center !important;
margin-left: auto !important;
margin-right: auto !important;
}
.page-home .hero-form { margin-left: auto !important; margin-right: auto !important; }
.page-home .cert-row { flex-wrap: wrap; gap: 12px 16px; }
/* PAKISTAN MAP — center heading copy + CTA */
.page-home .pk-map-content {
text-align: center !important;
align-items: center !important;
}
.page-home .pk-map-content > * { margin-left: auto !important; margin-right: auto !important; }
/* ABOUT (split-section) — center the About copy when stacked */
.page-home .split-content {
text-align: center !important;
align-items: center !important;
}
.page-home .split-content > *,
.page-home .split-content .signature-block { margin-left: auto !important; margin-right: auto !important; }
/* CASE STUDY — center metrics + headline */
.page-home .case-study-content {
text-align: center !important;
align-items: center !important;
}
.page-home .case-study-metrics { justify-content: center !important; }
/* GSC HOME (search console / google ads / meta ads proofs) — center text columns */
.page-home .gsc-home-text {
text-align: center !important;
align-items: center !important;
}
.page-home .gsc-home-mini-stats { justify-content: center !important; }
.page-home .gsc-home-text > * { margin-left: auto !important; margin-right: auto !important; }
/* SECTION HEADERS — homepage-wide, center the eyebrow/title/subtitle */
.page-home .section-header,
.page-home .toolstack-head {
text-align: center !important;
align-items: center !important;
}
.page-home .section-header > *,
.page-home .toolstack-head > * { margin-left: auto !important; margin-right: auto !important; }
/* FOUNDER LETTER — center body text & signature */
.page-home .founder-letter,
.page-home .founder-letter-body,
.page-home .founder-letter-content,
.page-home .founder-sig-block {
text-align: center !important;
align-items: center !important;
}
/* INLINE CTA / INLINE CONTACT */
.page-home .inline-cta,
.page-home .inline-cta-content,
.page-home .inline-contact,
.page-home .inline-contact-content {
text-align: center !important;
align-items: center !important;
}
/* STATS — already grid, ensure label text centers */
.page-home .stats-row,
.page-home .stat-block {
text-align: center !important;
justify-items: center !important;
}
/* COUNTRY GRID — center every card's inner copy */
.page-home .country-card {
text-align: center !important;
align-items: center !important;
}
/* SERVICES grid cards — natural left-align inside cards (kept), but center
the card itself within the row so it doesn't drift left */
.page-home .grid-3 .service-card { margin-left: auto !important; margin-right: auto !important; }
/* WHY HIRE PAKISTAN / WHY US / COMPARISON — center any text-only column */
.page-home .pk-why-content,
.page-home .why-us-content,
.page-home .comparison-content,
.page-home .why-us-card,
.page-home .pk-why-card {
text-align: center !important;
align-items: center !important;
}
/* CTA banner */
.page-home .cta-banner,
.page-home .cta-content {
text-align: center !important;
align-items: center !important;
}
.page-home .cta-banner .btn-group,
.page-home .cta-actions { justify-content: center !important; }
/* INDUSTRIES section header on homepage */
.page-home .industries-pills-head { text-align: center !important; }
}
/* ====================================================================
MOBILE FIXES PASS 3 (2026-06-13) — addresses user-screenshot issues
#1 Hero CTA clipped by sticky header on mobile
#3 Bottom sticky bar covering content
#4 WhatsApp button SVG ballooning to full width
==================================================================== */
/* #4 — Constrain ALL SVGs inside footer CTA strip buttons.
The btn-outline-ink svg had no width/height attr; on mobile when the
button became width:100% the svg expanded with it. Lock to 16x16. */
.footer-cta-strip .btn-outline-ink svg,
.footer-cta-strip .btn-ink svg {
width: 16px !important;
height: 16px !important;
flex-shrink: 0;
}
/* #3 — Reserve room at the bottom of every scrollable page so the
fixed sticky-bottom-bar (~76px tall on mobile) never covers content.
Apply on body so it works for any page, not just the homepage. */
@media (max-width: 768px) {
body { padding-bottom: 84px !important; }
html { scroll-padding-bottom: 96px; }
/* The earlier footer-padding rule duplicated this — neutralize it so
we don't double-pad and create a gap below the footer. */
.footer { padding-bottom: 32px !important; }
}
/* #1 — Hero CTA clipping. Hero already has top padding for the sticky
header, but on small screens the button below the header was being
visually clipped. Increase the hero top padding so the FORM/BUTTON
row sits fully below the header. */
@media (max-width: 768px) {
.page-home .hero,
.hero {
padding-top: 140px !important;
}
/* Hero form button (Get A Free Quote) — ensure full button visible */
.page-home .hero-form,
.hero-form {
margin-top: 12px;
}
.page-home .hero-form button,
.hero-form button,
.hero-form .btn-primary {
line-height: 1.2 !important;
padding-top: 16px !important;
padding-bottom: 16px !important;
}
}
/* ====================================================================
UNIVERSAL MOBILE CENTERING (2026-06-13)
Applies the about-page's clean centered mobile layout to every page.
Same centering logic as the .page-home rule, now scope-free.
==================================================================== */
@media (max-width: 768px) {
/* All hero variants: center eyebrow / headline / lead / CTAs */
.hero,
.about-hero,
.services-hero,
.industries-hero,
.locations-hero,
.blog-hero,
.article-hero,
.contact-hero,
.legal-hero,
.seo-hero,
.ga-hero,
.ma-hero,
.cr-hero,
.wd-hero,
.ls-hero,
.sm-hero {
text-align: center !important;
}
.hero .hero-content,
.about-hero-inner,
.services-hero-content,
.industries-hero-content,
.locations-hero-content,
.blog-hero-content,
.article-hero-content,
.contact-hero-content,
.legal-hero-content {
text-align: center !important;
align-items: center !important;
}
.about-hero-stats,
.hero-stats,
.industries-hero-stats,
.locations-hero-stats { justify-content: center !important; }
/* Section headers (eyebrow + h2 + subtitle) — center everywhere */
.section-header,
.toolstack-head,
.industries-pills-head,
.blog-section-head,
.locations-section-head,
.industries-section-head,
.seo-section-head,
.ga-section-head,
.ma-section-head,
.cr-section-head,
.wd-section-head,
.ls-section-head,
.sm-section-head {
text-align: center !important;
align-items: center !important;
}
.section-header > *,
.toolstack-head > *,
.industries-pills-head > * { margin-left: auto !important; margin-right: auto !important; }
/* Cards with text inside — center inner copy */
.culture-card,
.difference-item,
.difference-card,
.country-card,
.why-us-card,
.pk-why-card,
.toolstack-card,
.stat-block,
.service-card,
.stage-card,
.ga-why-card,
.seo-why-card,
.ma-why-card,
.cr-why-card,
.wd-why-card,
.ls-why-card,
.sm-why-card,
.pk-why-alt-card,
.industries-pill-card,
.blog-card,
.location-card,
.industry-card,
.process-step,
.award-item,
.currency-item,
.area-item {
text-align: center !important;
align-items: center !important;
}
/* Card icons stay centered too */
.culture-card .icon,
.difference-card .icon,
.service-card .icon,
.why-us-card .icon,
.pk-why-card .icon,
.toolstack-card .icon,
.stage-card .icon { margin-left: auto !important; margin-right: auto !important; }
/* Founder/team blocks */
.founder-promise-content,
.founder-letter,
.founder-letter-body,
.founder-letter-content,
.founder-sig-block,
.founder-quote,
.team-showcase-content,
.team-member-card,
.author-bio,
.signature-block {
text-align: center !important;
align-items: center !important;
}
.founder-promise-content > *,
.signature-block > * { margin-left: auto !important; margin-right: auto !important; }
/* Split / 2-column copy blocks */
.split-content,
.pk-map-content,
.case-study-content,
.gsc-home-text,
.platform-section-text,
.seo-solution-text,
.ls-gbp-text,
.ls-reviews-text,
.cr-heat-text,
.ma-venn-text,
.ga-why-alt-text,
.seo-why-alt-text,
.ma-why-alt-text,
.cr-why-alt-text,
.wd-why-alt-text,
.ls-why-alt-text,
.sm-why-alt-text {
text-align: center !important;
align-items: center !important;
}
.split-content > *,
.pk-map-content > *,
.case-study-content > *,
.gsc-home-text > * { margin-left: auto !important; margin-right: auto !important; }
/* Metric rows / stat rows / mini-stats — center horizontally */
.case-study-metrics,
.gsc-home-mini-stats,
.stats-row,
.about-hero-stats,
.hero-stats { justify-content: center !important; }
/* CTA banners site-wide */
.cta-banner,
.cta-content,
.footer-cta-strip,
.inline-cta,
.inline-cta-content,
.inline-contact,
.inline-contact-content,
.final-cta,
.ga-final,
.seo-final,
.ma-final,
.cr-final,
.wd-final,
.ls-final,
.sm-final {
text-align: center !important;
align-items: center !important;
}
.cta-banner .btn-group,
.cta-actions,
.footer-cta-strip-buttons,
.inline-cta .btn-group,
.final-cta-buttons { justify-content: center !important; }
/* FAQ sections — center the header, keep questions left-aligned for readability */
.faq-section .section-header,
.faq-head { text-align: center !important; }
/* Areas / locations / currencies / awards strip headers */
.areas-section .section-header,
.currencies-section .section-header,
.awards-section .section-header { text-align: center !important; }
/* Article hero / blog post layouts */
.article-meta { justify-content: center !important; }
.article-tags { justify-content: center !important; }
}
/* ====================================================================
HOMEPAGE REAL FIXES (2026-06-13) — from screenshot audit
These address actual visible problems, not blanket centering.
==================================================================== */
@media (max-width: 768px) {
/* #2 — RESTORE THE MAP ON MOBILE.
Earlier `aspect-ratio: auto !important; min-height: 0 !important`
collapsed .gnet to zero height. Its city cards are absolutely
positioned so they disappeared. Force a real aspect-ratio back. */
.gnet {
aspect-ratio: 1 / 1.15 !important;
min-height: 380px !important;
height: auto !important;
}
/* The map wrapper grid (.pk-map-grid) gets a real gap so map sits
visibly below the country pills, not crammed against them. */
.pk-map-grid { gap: 32px !important; }
/* #3 — EMPTY GAP between Search Console / Google Ads / Meta Ads
proof sections. The .gsc-home blocks each live in a separate
with default padding, doubling vertical whitespace. */
.gsc-home + .gsc-home,
.section:has(> .container > .gsc-home) { padding-top: 24px !important; }
.section:has(> .container > .gsc-home) + .section:has(> .container > .gsc-home) {
padding-top: 0 !important;
margin-top: -32px !important;
}
.gsc-home { margin-bottom: 0 !important; }
/* #4 — TRUST BADGES (hero .cert-row).
Currently rendering as vertical list with logo+text per row =
looks like a checklist. Rebuild as 2-column grid with stronger
visual presence. Hide dividers, give cards a card-like look. */
.cert-row {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 10px !important;
padding: 12px !important;
background: var(--surface);
border: 1px solid var(--line);
border-radius: 16px;
box-shadow: 0 6px 18px rgba(17,17,17,0.05);
}
.cert-divider { display: none !important; }
.cert-item {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
text-align: center !important;
gap: 8px !important;
padding: 14px 8px !important;
background: var(--bg-warm);
border-radius: 12px;
min-height: 96px;
}
/* The "5-Star" row (index 1) spans full width to lead the grid */
.cert-row .cert-item:first-child {
grid-column: 1 / -1;
flex-direction: row !important;
background: linear-gradient(135deg, rgba(74,222,128,0.10), rgba(34,197,94,0.04));
border: 1px solid rgba(74,222,128,0.30);
}
.cert-item .cert-logo,
.cert-item .cert-logo img,
.cert-item .cert-logo svg {
width: 32px !important;
height: 32px !important;
}
.cert-item .cert-text strong {
font-size: 0.95rem !important;
font-weight: 800;
color: var(--ink);
line-height: 1.1;
}
.cert-item .cert-text span {
font-size: 0.72rem !important;
color: var(--ink-2);
line-height: 1.2;
}
/* #5 — CASE STUDY METRICS (3 -> 10+, 2.6×, -28%).
Currently dark card with left-aligned numbers + labels.
Center the whole thing for impact. */
.case-study-metrics,
.case-metric {
text-align: center !important;
align-items: center !important;
}
.case-metric { padding: 14px 0 !important; }
.case-metric .num {
font-size: 2rem !important;
text-align: center !important;
display: block !important;
}
.case-metric .label {
text-align: center !important;
display: block !important;
margin-top: 4px;
}
/* #6 — CURRENCIES: 2-column grid on mobile, NOT vertical phonebook */
.currencies-grid {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 10px !important;
}
.currency-card {
padding: 18px 12px !important;
text-align: center !important;
background: var(--surface);
border: 1px solid var(--line);
border-radius: 14px;
}
.currency-card .currency-symbol-bg {
margin: 0 auto 10px auto !important;
width: 44px !important;
height: 44px !important;
}
.currency-card .currency-symbol { font-size: 1.1rem !important; }
.currency-card .currency-code { font-size: 0.88rem !important; font-weight: 800; }
.currency-card .currency-name { font-size: 0.7rem !important; }
/* #7 — CONTACT FORM green vertical accent line. Looks aggressive on
mobile next to the centered cards above/below it. Hide it. */
.contact-form-left::before { display: none !important; }
.contact-form-left { border-right: none !important; }
/* #8 — INDUSTRIES PILLS arrow inconsistency.
Only `.igv2-linked` cards have arrows so layout looks broken with
some rows having → and others not. Hide all arrows on mobile so
the grid reads as a uniform pill grid. */
.igv2-arrow { display: none !important; }
/* Also reset any persistent focus/active state on mobile so a tapped
card doesn't keep a green border highlight afterward. */
.igv2-card { outline: none !important; }
.igv2-card:focus { outline: none !important; box-shadow: none !important; }
}
/* ====================================================================
SERVICES PAGES MOBILE QUALITY PASS (2026-06-13)
Mirrors the homepage real-fixes approach for all 7 service pages.
Targets the SAME kinds of problems: bare-looking stat lists, naked
hero CTAs, ugly stacked grids that should look like card sets.
Needs !important to beat per-page inline