/* ════════════════════════════════════════════════════════════
ALPHA DIGITAL SOLUTIONS — SEO AGENCY · STYLESHEET
Premium SEO agency design system. Single CSS file.
════════════════════════════════════════════════════════════ */
/* ──────────────────────────────────────
1. RESET & BASE
──────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
font-size: 16px;
line-height: 1.6;
color: var(--text);
background: var(--bg);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
font-weight: 400;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
a { color: inherit; text-decoration: none; }
input, textarea, select, button { font-family: inherit; font-size: inherit; }
/* ──────────────────────────────────────
2. DESIGN TOKENS
──────────────────────────────────── */
:root {
/* Palette */
--bg: #ffffff;
--bg-soft: #fafafa;
--bg-tint: #f7f6f1;
--bg-dark: #0b1220;
--bg-darker: #060a13;
--text: #0a0e1a;
--text-muted: #5b6472;
--text-light: #8a909c;
--border: #e6e8ec;
--border-soft: #f0f1f3;
--accent: #c9a84c;
--accent-hover: #b8983e;
--accent-soft: #faf6e8;
--success: #16a34a;
--success-soft: #dcfce7;
--warn: #f59e0b;
--error: #dc2626;
--info: #2563eb;
--whatsapp: #25d366;
/* Chart colors */
--chart-1: #c9a84c;
--chart-2: #2563eb;
--chart-3: #16a34a;
--chart-4: #7c3aed;
/* Spacing */
--space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
--space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px;
--space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px;
--space-32: 128px;
/* Container */
--container: 1240px;
--container-narrow: 880px;
/* Type scale */
--text-xs: 12px; --text-sm: 14px; --text-base: 16px; --text-lg: 18px;
--text-xl: 20px; --text-2xl: 24px; --text-3xl: 30px; --text-4xl: 36px;
--text-5xl: 48px; --text-6xl: 60px;
/* Shadows */
--shadow-sm: 0 1px 2px rgba(11, 18, 32, 0.05);
--shadow: 0 1px 3px rgba(11, 18, 32, 0.06), 0 1px 2px rgba(11, 18, 32, 0.04);
--shadow-md: 0 4px 12px rgba(11, 18, 32, 0.06), 0 2px 4px rgba(11, 18, 32, 0.04);
--shadow-lg: 0 12px 32px rgba(11, 18, 32, 0.08), 0 4px 8px rgba(11, 18, 32, 0.04);
--shadow-xl: 0 24px 60px rgba(11, 18, 32, 0.12), 0 8px 16px rgba(11, 18, 32, 0.06);
/* Radius */
--radius-sm: 4px;
--radius: 6px;
--radius-md: 8px;
--radius-lg: 12px;
--radius-xl: 18px;
--radius-full: 9999px;
/* Transitions */
--t-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
--t-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
--t-slow: 500ms cubic-bezier(0.16, 1, 0.3, 1);
/* Mono font for code blocks */
--font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}
/* ──────────────────────────────────────
3. UTILITIES
──────────────────────────────────── */
.container {
width: 100%;
max-width: var(--container);
margin-inline: auto;
padding-inline: 24px;
}
.container-narrow {
width: 100%;
max-width: var(--container-narrow);
margin-inline: auto;
padding-inline: 24px;
}
.section { padding-block: var(--space-24); }
.section-tight { padding-block: var(--space-16); }
.section-soft { background: var(--bg-soft); }
.section-dark { background: var(--bg-dark); color: #ffffff; }
.eyebrow {
display: inline-block;
font-size: var(--text-xs);
font-weight: 600;
letter-spacing: 1.5px;
text-transform: uppercase;
color: var(--accent);
margin-bottom: var(--space-4);
}
/* ──────────────────────────────────────
4. TYPOGRAPHY
──────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
font-weight: 500;
letter-spacing: -0.025em;
color: var(--text);
line-height: 1.12;
}
h1 { font-size: clamp(36px, 5.2vw, 60px); font-weight: 500; }
h2 { font-size: clamp(28px, 3.6vw, 42px); font-weight: 500; }
h3 { font-size: clamp(20px, 2vw, 24px); font-weight: 600; }
h4 { font-size: var(--text-lg); font-weight: 600; }
.section-dark h1, .section-dark h2, .section-dark h3, .section-dark h4 { color: #ffffff; }
p { color: var(--text-muted); line-height: 1.7; }
.lead { font-size: var(--text-lg); color: var(--text-muted); line-height: 1.7; }
.lead, p { font-weight: 400; }
/* Highlighted text — gold underline behind */
h1 .highlight, h2 .highlight {
color: var(--text);
font-weight: 800;
position: relative;
display: inline-block;
}
h1 .highlight::after, h2 .highlight::after {
content: '';
position: absolute;
left: 0;
bottom: 4px;
width: 100%;
height: 9px;
background: var(--accent-soft);
z-index: -1;
transition: background var(--t-base);
}
.section-dark h1 .highlight, .section-dark h2 .highlight { color: #ffffff; }
.section-dark h1 .highlight::after, .section-dark h2 .highlight::after {
background: rgba(201, 168, 76, 0.28);
}
/* ──────────────────────────────────────
5. BUTTONS
──────────────────────────────────── */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 13px 24px;
font-size: var(--text-sm);
font-weight: 600;
letter-spacing: 0.01em;
border-radius: var(--radius);
transition: background var(--t-base), color var(--t-base), border-color var(--t-base), transform var(--t-fast), box-shadow var(--t-base);
white-space: nowrap;
position: relative;
overflow: hidden;
isolation: isolate;
}
.btn-primary { background: var(--text); color: #ffffff; }
.btn-primary:hover { background: #1a2030; transform: translateY(-1px); box-shadow: 0 10px 24px rgba(11, 18, 32, 0.18); }
.btn-accent { background: var(--accent); color: var(--text); }
.btn-accent:hover { background: var(--accent-hover); transform: translateY(-1px); }
.btn-ghost { color: var(--text); border: 1px solid var(--border); background: #ffffff; }
.btn-ghost:hover { border-color: var(--text); }
.section-dark .btn-ghost { color: #ffffff; border-color: rgba(255, 255, 255, 0.22); background: transparent; }
.section-dark .btn-ghost:hover { border-color: #ffffff; background: rgba(255, 255, 255, 0.06); }
.btn-link {
color: var(--text);
padding: 0;
font-weight: 700;
font-size: var(--text-sm);
position: relative;
}
.btn-link::after {
content: '→';
margin-left: 6px;
transition: transform var(--t-base);
display: inline-block;
}
.btn-link:hover { color: var(--accent); }
.btn-link:hover::after { transform: translateX(4px); }
/* Shine sweep */
.btn-primary::after, .btn-accent::after {
content: '';
position: absolute;
top: 0;
left: -120%;
width: 60%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.22), transparent);
transform: skewX(-20deg);
transition: left 0.65s ease;
pointer-events: none;
z-index: 1;
}
.btn-primary:hover::after, .btn-accent:hover::after { left: 130%; }
.btn-back {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: var(--text-sm);
font-weight: 600;
color: var(--accent);
background: none;
border: none;
padding: 0;
margin-bottom: 20px;
cursor: pointer;
transition: color var(--t-base);
}
.btn-back:hover { color: var(--accent-hover); }
/* ──────────────────────────────────────
6. ANNOUNCEMENT BAR
──────────────────────────────────── */
.announce {
background: var(--bg-dark);
color: rgba(255, 255, 255, 0.86);
font-size: var(--text-sm);
padding: 10px 24px;
text-align: center;
position: relative;
}
.announce strong { color: var(--accent); font-weight: 700; }
.announce a {
color: var(--accent);
font-weight: 600;
margin-left: 8px;
text-decoration: underline;
text-underline-offset: 3px;
cursor: pointer;
}
.announce-close {
position: absolute;
right: 20px;
top: 50%;
transform: translateY(-50%);
color: rgba(255, 255, 255, 0.5);
font-size: 18px;
padding: 4px 8px;
}
.announce-close:hover { color: #ffffff; }
/* ──────────────────────────────────────
7. HEADER / NAV
──────────────────────────────────── */
header {
position: sticky;
top: 0;
z-index: 100;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: saturate(180%) blur(10px);
-webkit-backdrop-filter: saturate(180%) blur(10px);
border-bottom: 1px solid var(--border-soft);
transition: background var(--t-base), backdrop-filter var(--t-base), border-color var(--t-base);
}
header.scrolled {
background: rgba(255, 255, 255, 0.72);
backdrop-filter: saturate(180%) blur(18px);
-webkit-backdrop-filter: saturate(180%) blur(18px);
border-bottom-color: rgba(230, 232, 236, 0.6);
}
.nav {
display: flex;
align-items: center;
justify-content: space-between;
height: 72px;
max-width: var(--container);
margin-inline: auto;
padding-inline: 24px;
}
.logo { display: flex; align-items: center; gap: 12px; cursor: pointer; transition: opacity var(--t-base); }
.navbar-logo {
height: 44px;
width: auto;
max-width: 200px;
object-fit: contain;
display: block;
transition: transform var(--t-base), opacity var(--t-base);
}
.logo:hover .navbar-logo { transform: scale(1.04); }
.nav-links {
display: flex;
align-items: center;
gap: 32px;
list-style: none;
}
.nav-links > li { display: flex; align-items: center; }
.nav-links > li > a {
display: inline-flex;
align-items: center;
font-size: var(--text-sm);
font-weight: 500;
color: var(--text-muted);
transition: color var(--t-fast);
padding: 8px 0;
cursor: pointer;
line-height: 1;
position: relative;
}
.nav-links > li > a:hover,
.nav-links > li > a.active {
color: var(--text);
font-weight: 600;
text-decoration: underline;
text-decoration-thickness: 2px;
text-underline-offset: 6px;
text-decoration-color: var(--accent);
}
.nav-cta { display: flex; align-items: center; gap: 12px; }
/* Cross-site switch link in nav (SEO → Web Dev, Web Dev → SEO) */
.switch-site-link {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 13px;
font-weight: 600;
color: var(--text-muted);
padding: 8px 14px;
border-radius: var(--radius-full);
border: 1px solid var(--border);
background: rgba(59, 130, 246, 0.05);
transition: border-color var(--t-base), color var(--t-base), background var(--t-base);
}
.switch-site-link svg { width: 14px; height: 14px; color: #3b82f6; }
.switch-site-link:hover {
border-color: #3b82f6;
color: #2563eb;
background: rgba(59, 130, 246, 0.10);
}
@media (max-width: 540px) {
.switch-site-link span { display: none; }
.switch-site-link { padding: 8px 10px; }
}
.menu-toggle {
display: none;
width: 40px;
height: 40px;
position: relative;
}
.menu-toggle span {
position: absolute;
left: 10px;
width: 20px;
height: 2px;
background: var(--text);
border-radius: 1px;
transition: transform var(--t-base), opacity var(--t-base), top var(--t-base);
}
.menu-toggle span:nth-child(1) { top: 14px; }
.menu-toggle span:nth-child(2) { top: 20px; }
.menu-toggle span:nth-child(3) { top: 26px; }
.menu-toggle.open span:nth-child(1) { top: 20px; transform: rotate(45deg); }
.menu-toggle.open span:nth-child(2) { opacity: 0; }
.menu-toggle.open span:nth-child(3) { top: 20px; transform: rotate(-45deg); }
/* Dropdown — wide (10 services) */
.nav-links li.has-dropdown { position: relative; }
.nav-links li.has-dropdown > a { gap: 5px; }
.nav-links li.has-dropdown > a::after {
content: '';
display: inline-block;
width: 0;
height: 0;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 4px solid currentColor;
transition: transform 0.25s ease;
flex-shrink: 0;
align-self: center;
margin-left: 4px;
}
.nav-links li.has-dropdown:hover > a::after,
.nav-links li.has-dropdown.open > a::after { transform: rotate(180deg); }
.dropdown {
position: absolute;
top: calc(100% + 14px);
left: 50%;
transform: translateX(-50%) translateY(-6px);
background: #ffffff;
border: 1px solid var(--border);
border-radius: var(--radius-md);
box-shadow: 0 24px 60px rgba(11, 18, 32, 0.12), 0 6px 18px rgba(11, 18, 32, 0.06);
padding: 14px;
min-width: 280px;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s linear 0.25s;
z-index: 110;
}
.dropdown::before {
content: '';
position: absolute;
top: -10px;
left: 0;
right: 0;
height: 14px;
}
.nav-links li.has-dropdown:hover .dropdown,
.nav-links li.has-dropdown.open .dropdown {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translateX(-50%) translateY(0);
transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s linear 0s;
}
.dropdown-wide { min-width: 580px; padding: 16px; }
.dropdown-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4px;
}
.dropdown-item {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 12px;
border-radius: var(--radius);
cursor: pointer;
transition: background var(--t-fast);
}
.dropdown-item:hover { background: var(--bg-soft); }
.dropdown-item-icon {
width: 32px;
height: 32px;
border-radius: var(--radius);
background: var(--accent-soft);
color: var(--accent-hover);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: background var(--t-base), color var(--t-base);
}
.dropdown-item-icon svg { width: 16px; height: 16px; }
.dropdown-item:hover .dropdown-item-icon { background: var(--text); color: var(--accent); }
.dropdown-item-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dropdown-item-title { font-size: var(--text-sm); font-weight: 600; color: var(--text); }
.dropdown-item-sub { font-size: 11px; color: var(--text-muted); }
/* ──────────────────────────────────────
8. PAGE SWITCHER
──────────────────────────────────── */
.page { display: none; }
.page.active { display: block; animation: fadeIn 0.35s ease-out; }
@keyframes fadeIn {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
/* ──────────────────────────────────────
9. HERO (SEO)
──────────────────────────────────── */
.hero {
position: relative;
overflow: hidden;
background:
radial-gradient(circle at 80% 10%, rgba(201, 168, 76, 0.10), transparent 60%),
radial-gradient(circle at 10% 90%, rgba(201, 168, 76, 0.05), transparent 55%),
var(--bg);
padding: clamp(56px, 7vw, 96px) 0 clamp(48px, 6vw, 88px);
border-bottom: 1px solid var(--border-soft);
}
.hero #hero-canvas {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
z-index: 0;
pointer-events: auto;
}
/* Instant placeholder while Three.js lazy-loads — a soft golden glow */
.hero::before {
content: '';
position: absolute;
top: 50%;
right: 8%;
width: clamp(280px, 32vw, 460px);
aspect-ratio: 1;
border-radius: 50%;
transform: translateY(-50%);
background:
radial-gradient(circle at 50% 50%, rgba(243, 215, 122, 0.55) 0%, rgba(212, 175, 90, 0.20) 35%, rgba(212, 175, 90, 0.05) 60%, transparent 80%);
filter: blur(8px);
pointer-events: none;
z-index: 0;
animation: orb-pulse 6s ease-in-out infinite;
}
@keyframes orb-pulse {
0%, 100% { opacity: 0.85; transform: translateY(-50%) scale(1); }
50% { opacity: 1; transform: translateY(-50%) scale(1.06); }
}
/* Once the canvas mounts, the placeholder fades to avoid double-glow */
.hero canvas[data-bound="1"] ~ * { /* siblings */ }
.hero:has(canvas[data-bound="1"])::before { opacity: 0.25; }
/* Soft fade from left so the text reads cleanly while the orb sits to the right */
.hero::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(90deg, rgba(255, 255, 255, 0.62) 0%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0) 75%);
z-index: 0;
pointer-events: none;
}
.hero > .container { position: relative; z-index: 1; pointer-events: none; }
.hero > .container * { pointer-events: auto; }
.hero-grid {
display: flex;
align-items: center;
justify-content: center;
min-height: clamp(420px, 64vh, 640px);
text-align: center;
}
.hero-text { max-width: 820px; margin-inline: auto; }
.hero-text h1 { margin-bottom: 24px; margin-inline: auto; }
.hero-text .lead { margin-bottom: 36px; margin-inline: auto; max-width: 680px; }
.hero-cta { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 40px; justify-content: center; }
.hero-trust {
display: grid;
grid-template-columns: repeat(2, auto);
justify-content: center;
align-items: center;
gap: 16px 40px;
padding-top: 28px;
border-top: 1px solid var(--border);
max-width: 760px;
margin-inline: auto;
}
.hero-trust-item {
display: flex;
align-items: center;
gap: 8px;
font-size: var(--text-sm);
font-weight: 500;
color: var(--text-muted);
}
.hero-trust-item svg { flex-shrink: 0; }
.hero-trust-item svg { width: 16px; height: 16px; color: var(--success); }
/* ──────────────────────────────────────
10. METRICS BAR
──────────────────────────────────── */
.metrics-bar {
background: var(--bg-dark);
padding: 48px 0;
color: #ffffff;
position: relative;
overflow: hidden;
}
.metrics-bar::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(circle at 15% 50%, rgba(201, 168, 76, 0.12), transparent 50%),
radial-gradient(circle at 85% 50%, rgba(201, 168, 76, 0.08), transparent 55%);
pointer-events: none;
}
.metrics-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
position: relative;
z-index: 1;
}
.metric {
text-align: center;
padding: 8px 12px;
border-left: 1px solid rgba(255, 255, 255, 0.08);
}
.metric:first-child { border-left: none; }
.metric-num {
font-size: clamp(28px, 3vw, 40px);
font-weight: 700;
letter-spacing: -0.02em;
background: linear-gradient(135deg, #ffffff 0%, var(--accent) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin-bottom: 6px;
font-variant-numeric: tabular-nums;
}
.metric-label {
font-size: var(--text-sm);
color: rgba(255, 255, 255, 0.7);
line-height: 1.4;
}
/* ──────────────────────────────────────
11. TECH MARQUEE
──────────────────────────────────── */
.tech-marquee {
background: var(--bg-soft);
padding: 28px 0;
border-block: 1px solid var(--border-soft);
overflow: hidden;
position: relative;
}
.tech-marquee-label {
text-align: center;
font-size: var(--text-xs);
font-weight: 600;
letter-spacing: 1.5px;
text-transform: uppercase;
color: var(--text-light);
margin-bottom: 18px;
}
.marquee {
overflow: hidden;
position: relative;
-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track {
display: flex;
width: max-content;
animation: marquee-scroll 36s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee-scroll {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
.marquee-item {
display: inline-flex;
align-items: center;
gap: 12px;
padding: 0 36px;
font-size: 20px;
font-weight: 700;
letter-spacing: -0.02em;
white-space: nowrap;
transition: color var(--t-base), transform var(--t-base);
}
.marquee-item .dot {
width: 10px;
height: 10px;
border-radius: 50%;
flex-shrink: 0;
box-shadow: 0 0 0 4px rgba(11, 18, 32, 0.04);
}
.marquee-item:hover { transform: translateY(-2px); }
.marquee-item[data-color="gold"] { color: #c9a84c; }
.marquee-item[data-color="gold"] .dot { background: #c9a84c; }
.marquee-item[data-color="navy"] { color: #0b1220; }
.marquee-item[data-color="navy"] .dot { background: #0b1220; }
.marquee-item[data-color="blue"] { color: #2563eb; }
.marquee-item[data-color="blue"] .dot { background: #2563eb; }
.marquee-item[data-color="green"] { color: #16a34a; }
.marquee-item[data-color="green"] .dot { background: #16a34a; }
.marquee-item[data-color="red"] { color: #dc2626; }
.marquee-item[data-color="red"] .dot { background: #dc2626; }
.marquee-item[data-color="purple"] { color: #7c3aed; }
.marquee-item[data-color="purple"] .dot { background: #7c3aed; }
.marquee-item[data-color="orange"] { color: #ea580c; }
.marquee-item[data-color="orange"] .dot { background: #ea580c; }
/* ──────────────────────────────────────
12. SECTION HEADER
──────────────────────────────────── */
.section-head {
text-align: center;
max-width: 720px;
margin: 0 auto var(--space-16);
}
.section-head.left { text-align: left; margin-inline: 0; }
.section-head h2 { margin-bottom: 16px; }
.section-head p { font-size: var(--text-lg); }
/* ──────────────────────────────────────
13. SERVICES GRID (10 SEO services)
──────────────────────────────────── */
.services-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.services-grid-10 {
grid-template-columns: repeat(5, 1fr);
gap: 18px;
}
/* 4-pillar layout — larger, more strategic-feeling cards */
.services-grid-4 {
grid-template-columns: repeat(2, 1fr);
gap: 24px;
}
/* 5-pillar layout — 3 across the top, 2 centred beneath */
.services-grid-5 {
grid-template-columns: repeat(6, 1fr);
gap: 24px;
}
.services-grid-5 > * { grid-column: span 2; }
.services-grid-5 > *:nth-child(4) { grid-column: 2 / span 2; }
.services-grid-5 > *:nth-child(5) { grid-column: 4 / span 2; }
@media (max-width: 1024px) {
.services-grid-5 { grid-template-columns: repeat(4, 1fr); }
.services-grid-5 > *,
.services-grid-5 > *:nth-child(4) { grid-column: span 2; }
.services-grid-5 > *:nth-child(5) { grid-column: 2 / span 2; }
}
@media (max-width: 768px) {
.services-grid-5 { grid-template-columns: 1fr; }
.services-grid-5 > *,
.services-grid-5 > *:nth-child(4),
.services-grid-5 > *:nth-child(5) { grid-column: auto; }
}
.pillar-card {
padding: 40px 34px 30px;
min-height: 360px;
}
.pillar-card .pillar-num {
font-size: 11px;
font-weight: 700;
letter-spacing: 1.5px;
text-transform: uppercase;
color: var(--tone-text, var(--accent-hover));
margin-bottom: 14px;
display: inline-block;
}
.pillar-card .service-icon {
width: 56px;
height: 56px;
margin-bottom: 22px;
}
.pillar-card .service-icon svg { width: 28px; height: 28px; }
.pillar-card h3 {
font-size: var(--text-2xl);
margin-bottom: 14px;
font-weight: 700;
letter-spacing: -0.015em;
}
.pillar-card > p {
font-size: var(--text-base);
line-height: 1.65;
margin-bottom: 18px;
}
.pillar-card:hover > p { color: rgba(255, 255, 255, 0.92); }
.pillar-tags {
list-style: none;
display: flex;
flex-wrap: wrap;
gap: 6px 8px;
margin: 0 0 18px;
padding: 0;
}
.pillar-tags li {
font-size: 11px;
font-weight: 600;
letter-spacing: 0.02em;
color: var(--tone-text);
background: var(--tone-soft);
border: 1px solid rgba(var(--tone-rgb), 0.18);
padding: 5px 10px;
border-radius: var(--radius-full);
transition: color var(--t-base), background var(--t-base), border-color var(--t-base);
}
.pillar-card:hover .pillar-tags li {
background: rgba(255, 255, 255, 0.10);
border-color: rgba(255, 255, 255, 0.20);
color: rgba(255, 255, 255, 0.95);
}
.pillar-card:hover .pillar-num { color: var(--tone); }
@media (max-width: 768px) {
.services-grid-4 { grid-template-columns: 1fr; }
.pillar-card { padding: 28px 22px 22px; min-height: 0; }
}
.service-card {
background: #ffffff;
border: 1.5px solid var(--border);
border-radius: var(--radius-md);
padding: 32px 28px 26px;
transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.5s ease, border-color 0.4s ease;
display: flex;
flex-direction: column;
position: relative;
overflow: hidden;
isolation: isolate;
cursor: pointer;
}
/* Background image revealed on hover */
.service-card-bg {
position: absolute;
inset: 0;
z-index: 0;
opacity: 0;
transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.service-card-bg::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(11, 18, 32, 0.94) 0%, rgba(11, 18, 32, 0.78) 100%);
}
.service-card-bg img { width: 100%; height: 100%; object-fit: cover; }
.service-card > *:not(.service-card-bg) {
position: relative;
z-index: 1;
transition: color var(--t-base);
}
.service-card:hover .service-card-bg { opacity: 1; }
.service-card:hover {
transform: translateY(-4px);
border-color: var(--accent);
box-shadow:
0 26px 56px rgba(11, 18, 32, 0.14),
0 0 0 2px rgba(201, 168, 76, 0.45),
0 0 40px rgba(201, 168, 76, 0.28);
}
.service-card:hover h3 { color: #ffffff; }
.service-card:hover p { color: rgba(255, 255, 255, 0.85); }
.service-card:hover .service-icon { background: rgba(201, 168, 76, 0.18); color: var(--accent); }
.service-card:hover .service-card-cta { color: var(--accent); gap: 10px; border-top-color: rgba(255, 255, 255, 0.15); }
.service-card:hover .service-card-cta svg { transform: translateX(2px); }
.service-card:hover .service-icon { transform: rotate(-6deg) scale(1.08); }
/* Decorative corner accents */
.service-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 0;
height: 0;
border-top: 2px solid var(--accent);
border-left: 2px solid var(--accent);
opacity: 0;
transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1), width 0.4s cubic-bezier(0.16, 1, 0.3, 1), height 0.4s cubic-bezier(0.16, 1, 0.3, 1);
z-index: 3;
pointer-events: none;
}
.service-card:hover::before { opacity: 1; width: 44px; height: 44px; }
.service-icon {
width: 44px;
height: 44px;
border-radius: var(--radius);
background: var(--accent-soft);
color: var(--accent-hover);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 18px;
transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1), background var(--t-base), color var(--t-base);
}
.service-icon svg { width: 22px; height: 22px; }
.service-card h3 { font-size: var(--text-lg); margin-bottom: 10px; font-weight: 700; line-height: 1.25; }
.service-card p { font-size: var(--text-sm); margin-bottom: 16px; flex: 1; line-height: 1.6; }
.service-card-cta {
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: auto;
padding-top: 14px;
border-top: 1px solid var(--border-soft);
font-size: var(--text-sm);
font-weight: 700;
color: var(--text);
cursor: pointer;
transition: color var(--t-base), gap var(--t-base);
}
.service-card-cta svg { width: 14px; height: 14px; transition: transform var(--t-base); }
/* ──────────────────────────────────────
13.b SERVICE CARD TONE PALETTE
Each card gets a distinct accent colour
──────────────────────────────────── */
.service-card {
--tone: #c9a84c;
--tone-rgb: 201, 168, 76;
--tone-soft: rgba(201, 168, 76, 0.10);
--tone-text: #b8983e;
}
.service-card[data-tone="blue"] { --tone: #2563eb; --tone-rgb: 37, 99, 235; --tone-soft: rgba(37,99,235,0.10); --tone-text: #1e4fc7; }
.service-card[data-tone="violet"] { --tone: #7c3aed; --tone-rgb: 124, 58, 237; --tone-soft: rgba(124,58,237,0.10); --tone-text: #6628d2; }
.service-card[data-tone="pink"] { --tone: #ec4899; --tone-rgb: 236, 72, 153; --tone-soft: rgba(236,72,153,0.10); --tone-text: #d1377d; }
.service-card[data-tone="green"] { --tone: #16a34a; --tone-rgb: 22, 163, 74; --tone-soft: rgba(22,163,74,0.10); --tone-text: #128539; }
.service-card[data-tone="orange"] { --tone: #ea580c; --tone-rgb: 234, 88, 12; --tone-soft: rgba(234,88,12,0.10); --tone-text: #c34908; }
.service-card[data-tone="cyan"] { --tone: #0891b2; --tone-rgb: 8, 145, 178; --tone-soft: rgba(8,145,178,0.10); --tone-text: #047a96; }
.service-card[data-tone="gold"] { --tone: #c9a84c; --tone-rgb: 201, 168, 76; --tone-soft: rgba(201,168,76,0.12); --tone-text: #b8983e; }
.service-card[data-tone="red"] { --tone: #dc2626; --tone-rgb: 220, 38, 38; --tone-soft: rgba(220,38,38,0.10); --tone-text: #b91c1c; }
.service-card[data-tone="amber"] { --tone: #f59e0b; --tone-rgb: 245, 158, 11; --tone-soft: rgba(245,158,11,0.12); --tone-text: #d18306; }
.service-card[data-tone="teal"] { --tone: #0d9488; --tone-rgb: 13, 148, 136; --tone-soft: rgba(13,148,136,0.10); --tone-text: #0a7c72; }
/* Colored top-edge bar that animates in on hover */
.service-card { padding-top: 36px; }
.service-card .service-card-top {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, var(--tone), transparent);
opacity: 0.85;
z-index: 2;
}
.service-card .service-card-top::after {
content: '';
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background: linear-gradient(90deg, var(--tone) 0%, var(--tone) 30%, transparent 100%);
opacity: 0;
transform: scaleX(0.4);
transform-origin: left;
transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.service-card:hover .service-card-top::after { opacity: 1; transform: scaleX(1); }
/* Service icon uses the tone color */
.service-card .service-icon {
background: var(--tone-soft);
color: var(--tone-text);
position: relative;
overflow: hidden;
}
.service-card .service-icon::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(135deg, var(--tone), color-mix(in srgb, var(--tone) 60%, #fff));
opacity: 0;
transition: opacity 0.4s ease;
z-index: -1;
}
.service-card:hover .service-icon { color: #fff; }
.service-card:hover .service-icon::before { opacity: 1; }
/* Corner accent uses tone */
.service-card::before {
border-top-color: var(--tone);
border-left-color: var(--tone);
}
/* Hover glow uses tone */
.service-card:hover {
border-color: var(--tone);
box-shadow:
0 26px 56px rgba(11, 18, 32, 0.14),
0 0 0 2px rgba(var(--tone-rgb), 0.45),
0 0 40px rgba(var(--tone-rgb), 0.30);
}
.service-card:hover h3 { color: #ffffff; }
.service-card:hover p { color: rgba(255, 255, 255, 0.88); }
.service-card:hover .service-card-cta { color: var(--tone); border-top-color: rgba(255, 255, 255, 0.18); }
/* Background image gradient blends with tone */
.service-card-bg::after {
background:
linear-gradient(135deg, rgba(11, 18, 32, 0.96) 0%, rgba(11, 18, 32, 0.82) 100%),
radial-gradient(circle at 80% 10%, rgba(var(--tone-rgb), 0.45), transparent 60%);
}
/* ──────────────────────────────────────
14. WHY GRID
──────────────────────────────────── */
.why-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 22px;
}
.why-card {
background: #ffffff;
border: 1px solid var(--border);
border-radius: var(--radius-md);
padding: 28px 24px 26px;
position: relative;
overflow: hidden;
transition: transform var(--t-base), border-color var(--t-base), box-shadow var(--t-base);
}
.why-card::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 3px;
background: var(--accent);
transform: scaleY(0);
transform-origin: top;
transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.why-card:hover {
transform: translateY(-3px);
border-color: var(--accent);
box-shadow: var(--shadow-md);
}
.why-card:hover::before { transform: scaleY(1); }
.why-icon {
width: 44px;
height: 44px;
border-radius: var(--radius);
background: var(--accent-soft);
color: var(--accent-hover);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 18px;
transition: background var(--t-base), color var(--t-base), transform var(--t-base);
}
.why-icon svg { width: 22px; height: 22px; }
.why-card:hover .why-icon { background: var(--text); color: var(--accent); transform: rotate(-6deg) scale(1.05); }
.why-card h3 { font-size: var(--text-lg); margin-bottom: 10px; font-weight: 700; }
.why-card p { font-size: var(--text-sm); line-height: 1.65; }
/* ──────────────────────────────────────
15. STEPS GRID (5-phase process)
──────────────────────────────────── */
.steps-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 28px;
position: relative;
}
.step {
position: relative;
z-index: 1;
padding: 28px 24px 24px;
background: #ffffff;
border: 1px solid var(--border);
border-radius: var(--radius-md);
transition: transform var(--t-base), border-color var(--t-base), box-shadow var(--t-base);
}
.step::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 3px;
background: var(--accent);
border-radius: var(--radius-md) 0 0 var(--radius-md);
transform: scaleY(0);
transform-origin: top;
transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.step:hover {
transform: translateY(-3px);
border-color: var(--accent);
box-shadow: var(--shadow-md);
}
.step:hover::before { transform: scaleY(1); }
.step:hover h3 { color: var(--accent-hover); }
.step h3 { font-size: var(--text-lg); margin-bottom: 8px; font-weight: 700; transition: color var(--t-base); }
.step p { font-size: var(--text-sm); line-height: 1.6; }
/* Step icon (replaces old dot bullet) */
.step-icon {
width: 44px;
height: 44px;
border-radius: var(--radius);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 16px;
background: var(--accent-soft);
color: var(--accent-hover);
transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), background var(--t-base), color var(--t-base);
}
.step-icon svg { width: 22px; height: 22px; }
.step:hover .step-icon { transform: rotate(-6deg) scale(1.08); }
/* ── Colour tones for steps + why-cards ───── */
.step, .why-card {
--tone: #c9a84c;
--tone-rgb: 201, 168, 76;
--tone-soft: rgba(201, 168, 76, 0.10);
--tone-text: #b8983e;
}
.step[data-tone="blue"], .why-card[data-tone="blue"] { --tone: #2563eb; --tone-rgb: 37, 99, 235; --tone-soft: rgba(37,99,235,0.10); --tone-text: #1e4fc7; }
.step[data-tone="violet"], .why-card[data-tone="violet"] { --tone: #7c3aed; --tone-rgb: 124, 58, 237; --tone-soft: rgba(124,58,237,0.10); --tone-text: #6628d2; }
.step[data-tone="cyan"], .why-card[data-tone="cyan"] { --tone: #0891b2; --tone-rgb: 8, 145, 178; --tone-soft: rgba(8,145,178,0.10); --tone-text: #047a96; }
.step[data-tone="green"], .why-card[data-tone="green"] { --tone: #16a34a; --tone-rgb: 22, 163, 74; --tone-soft: rgba(22,163,74,0.10); --tone-text: #128539; }
.step[data-tone="orange"], .why-card[data-tone="orange"] { --tone: #ea580c; --tone-rgb: 234, 88, 12; --tone-soft: rgba(234,88,12,0.10); --tone-text: #c34908; }
/* Apply tones */
.step .step-icon, .why-card .why-icon {
background: var(--tone-soft);
color: var(--tone-text);
}
.step:hover .step-icon, .why-card:hover .why-icon {
background: var(--tone);
color: #ffffff;
}
.step::before, .why-card::before { background: var(--tone); }
.step:hover, .why-card:hover {
border-color: var(--tone);
box-shadow:
0 16px 36px rgba(11, 18, 32, 0.10),
0 0 0 1.5px rgba(var(--tone-rgb), 0.32),
0 0 24px rgba(var(--tone-rgb), 0.18);
}
.step:hover h3, .why-card:hover h3 { color: var(--tone-text); }
/* ──────────────────────────────────────
16. PROJECTS / CASE STUDIES CAROUSEL
──────────────────────────────────── */
.projects-section { overflow: hidden; }
.projects-viewport {
position: relative;
overflow: hidden;
-webkit-mask-image: linear-gradient(90deg, transparent, #000 2%, #000 98%, transparent);
mask-image: linear-gradient(90deg, transparent, #000 2%, #000 98%, transparent);
padding: 4px;
}
.projects-track {
display: flex;
gap: 20px;
transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
will-change: transform;
}
.project-card {
flex: 0 0 calc((100% - 40px) / 3);
min-width: 0;
background: #ffffff;
border: 1.5px solid var(--border);
border-radius: var(--radius-lg);
overflow: hidden;
position: relative;
transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.5s ease, border-color 0.4s ease;
}
.project-card:hover {
transform: translateY(-4px);
border-color: var(--accent);
box-shadow:
0 26px 56px rgba(11, 18, 32, 0.14),
0 0 0 2px rgba(201, 168, 76, 0.4),
0 0 36px rgba(201, 168, 76, 0.22);
}
.project-image {
aspect-ratio: 16/10;
position: relative;
overflow: hidden;
background: var(--bg-soft);
}
.project-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.project-card:hover .project-image img { transform: scale(1.06); }
.project-overlay {
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(11, 18, 32, 0) 30%, rgba(11, 18, 32, 0.55) 60%, rgba(11, 18, 32, 0.94) 100%);
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: 22px;
opacity: 0;
transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.project-card:hover .project-overlay { opacity: 1; }
.project-overlay-desc {
color: rgba(255, 255, 255, 0.95);
font-size: var(--text-sm);
line-height: 1.55;
transform: translateY(10px);
transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.project-card:hover .project-overlay-desc { transform: translateY(0); }
.project-meta { padding: 18px 22px 22px; }
.project-tag {
display: inline-block;
font-size: 10px;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
color: var(--accent-hover);
margin-bottom: 8px;
}
.project-meta h3 { font-size: var(--text-lg); margin-bottom: 12px; font-weight: 700; line-height: 1.3; }
.project-meta p { font-size: var(--text-sm); color: var(--text-muted); margin: 0; }
/* Case stats inside project cards */
.case-card .case-stats {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin-top: 14px;
padding-top: 14px;
border-top: 1px solid var(--border-soft);
}
.case-stat {
display: flex;
flex-direction: column;
gap: 2px;
}
.cs-num {
font-size: var(--text-lg);
font-weight: 700;
color: var(--accent-hover);
letter-spacing: -0.02em;
font-variant-numeric: tabular-nums;
}
.cs-label {
font-size: 10px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--text-light);
}
.projects-controls {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 36px;
gap: 24px;
}
.projects-dots { display: flex; gap: 8px; }
.projects-dot {
width: 24px;
height: 3px;
background: var(--border);
border-radius: 2px;
transition: background var(--t-base), width var(--t-base);
cursor: pointer;
border: none;
padding: 0;
}
.projects-dot.active { background: var(--accent); width: 44px; }
.projects-arrows { display: flex; gap: 8px; }
.projects-arrow {
width: 42px;
height: 42px;
border-radius: 50%;
background: #ffffff;
border: 1px solid var(--border);
color: var(--text);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background var(--t-base), color var(--t-base), border-color var(--t-base);
}
.projects-arrow:hover { background: var(--text); color: #ffffff; border-color: var(--text); }
.projects-arrow:disabled { opacity: 0.4; cursor: not-allowed; }
.projects-arrow svg { width: 16px; height: 16px; }
/* ──────────────────────────────────────
17. GROWTH STATISTICS SECTION
──────────────────────────────────── */
.growth-stats-section { background: var(--bg-tint); }
.growth-grid {
display: grid;
grid-template-columns: 1fr 1.1fr;
gap: 64px;
align-items: center;
}
.growth-text h2 { margin-bottom: 18px; }
.growth-text p { margin-bottom: 24px; max-width: 480px; }
.growth-bullets {
list-style: none;
display: flex;
flex-direction: column;
gap: 12px;
}
.growth-bullets li {
display: flex;
align-items: center;
gap: 12px;
font-size: var(--text-sm);
color: var(--text);
font-weight: 500;
}
.growth-bullets li svg { width: 18px; height: 18px; color: var(--success); flex-shrink: 0; }
.growth-stats {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
.growth-stat {
background: #ffffff;
border: 1px solid var(--border);
border-radius: var(--radius-md);
padding: 22px 22px 18px;
transition: transform var(--t-base), border-color var(--t-base), box-shadow var(--t-base);
}
.growth-stat:hover {
transform: translateY(-3px);
border-color: var(--accent);
box-shadow: var(--shadow-md);
}
.gs-num {
font-size: clamp(28px, 3vw, 36px);
font-weight: 800;
letter-spacing: -0.025em;
margin-bottom: 4px;
background: linear-gradient(135deg, var(--text) 0%, var(--accent-hover) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
font-variant-numeric: tabular-nums;
}
.gs-label {
font-size: var(--text-xs);
font-weight: 600;
letter-spacing: 1px;
text-transform: uppercase;
color: var(--text-muted);
margin-bottom: 14px;
}
.gs-bar {
height: 6px;
border-radius: 3px;
background: var(--bg-soft);
overflow: hidden;
}
.gs-bar-fill {
height: 100%;
width: var(--w, 60%);
background: linear-gradient(90deg, var(--accent), var(--accent-hover));
border-radius: 3px;
transform: scaleX(0);
transform-origin: left;
animation: bar-grow 1.4s cubic-bezier(0.16, 1, 0.3, 1) 0.3s forwards;
}
@keyframes bar-grow { to { transform: scaleX(1); } }
/* ──────────────────────────────────────
18. TECHNICAL SEO EXPERTISE (dark)
──────────────────────────────────── */
.tech-expertise { position: relative; overflow: hidden; padding-block: clamp(64px, 7vw, 112px); }
.tech-expertise::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(circle at 20% 20%, rgba(201, 168, 76, 0.12), transparent 50%),
radial-gradient(circle at 80% 80%, rgba(201, 168, 76, 0.08), transparent 55%);
pointer-events: none;
}
.tech-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 56px;
align-items: center;
position: relative;
z-index: 1;
}
.tech-text p {
color: rgba(255, 255, 255, 0.7);
margin-bottom: 28px;
}
.tech-capabilities {
display: flex;
flex-direction: column;
gap: 10px;
}
.tech-cap {
display: flex;
align-items: flex-start;
gap: 10px;
font-size: var(--text-sm);
color: rgba(255, 255, 255, 0.85);
line-height: 1.55;
}
.tech-cap-bullet {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--accent);
margin-top: 8px;
flex-shrink: 0;
box-shadow: 0 0 0 4px rgba(201, 168, 76, 0.16);
}
/* Code mock */
.code-mock {
background: var(--bg-darker);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: 0 30px 60px rgba(0, 0, 0, 0.35);
}
.code-mock-head {
display: flex;
align-items: center;
gap: 8px;
padding: 12px 16px;
background: rgba(255, 255, 255, 0.03);
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.code-dot {
width: 11px;
height: 11px;
border-radius: 50%;
}
.code-dot.r { background: #ff5f57; }
.code-dot.y { background: #ffbd2e; }
.code-dot.g { background: #28c840; }
.code-file {
margin-left: 12px;
font-family: var(--font-mono);
font-size: 12px;
color: rgba(255, 255, 255, 0.45);
}
.code-mock pre {
padding: 22px 24px;
font-family: var(--font-mono);
font-size: 13px;
line-height: 1.75;
color: rgba(255, 255, 255, 0.85);
overflow-x: auto;
}
.code-mock .c-key { color: #8ab4f8; }
.code-mock .c-num { color: var(--accent); }
.code-mock .c-str { color: #c6e48b; }
.code-mock .c-ok { color: var(--success); font-weight: 600; }
/* ──────────────────────────────────────
19. SEO TOOLS GRID
──────────────────────────────────── */
.tools-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px;
}
.tool-card {
background: #ffffff;
border: 1px solid var(--border);
border-radius: var(--radius-md);
padding: 24px 22px 22px;
display: flex;
flex-direction: column;
gap: 6px;
transition: transform var(--t-base), border-color var(--t-base), box-shadow var(--t-base);
}
.tool-card:hover {
transform: translateY(-3px);
border-color: var(--accent);
box-shadow: var(--shadow-md);
}
.tool-logo {
width: 48px;
height: 48px;
border-radius: var(--radius-md);
background: var(--bg-soft);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 12px;
font-weight: 800;
font-size: 18px;
color: var(--text);
letter-spacing: -0.02em;
position: relative;
overflow: hidden;
transition: background var(--t-base), color var(--t-base);
}
.tool-logo svg { width: 24px; height: 24px; }
.tool-logo[data-tool="ga"] { background: linear-gradient(135deg, #ffba00, #e8710a); color: #fff; }
.tool-logo[data-tool="gsc"] { background: linear-gradient(135deg, #4285f4, #1a73e8); color: #fff; }
.tool-logo[data-tool="ahrefs"] { background: linear-gradient(135deg, #1769ff, #0f4ec4); color: #fff; }
.tool-logo[data-tool="semrush"] { background: linear-gradient(135deg, #ff642d, #e54610); color: #fff; }
.tool-logo[data-tool="frog"] { background: linear-gradient(135deg, #8ec73e, #67a323); color: #fff; }
.tool-logo[data-tool="psi"] { background: linear-gradient(135deg, #34a853, #137333); color: #fff; }
.tool-logo[data-tool="gtmetrix"] { background: linear-gradient(135deg, #ef4444, #b91c1c); color: #fff; }
.tool-logo[data-tool="looker"] { background: linear-gradient(135deg, #4285f4, #34a853); color: #fff; }
.tool-name { font-size: var(--text-base); font-weight: 700; color: var(--text); }
.tool-desc { font-size: var(--text-xs); color: var(--text-muted); letter-spacing: 0.01em; }
/* ──────────────────────────────────────
20. TESTIMONIALS / REVIEWS
──────────────────────────────────── */
.reviews-marquee {
overflow: hidden;
position: relative;
padding: 8px 4px;
-webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}
.reviews-track {
display: flex;
gap: 24px;
width: max-content;
animation: reviews-scroll 70s linear infinite;
}
.reviews-marquee:hover .reviews-track { animation-play-state: paused; }
@keyframes reviews-scroll {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
.review {
flex: 0 0 420px;
min-width: 0;
background: #ffffff;
border: 1.5px solid var(--border);
border-radius: var(--radius-md);
padding: 28px;
display: flex;
flex-direction: column;
position: relative;
transition: border-color var(--t-base), transform var(--t-base), box-shadow var(--t-base);
}
.review::before {
content: '';
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 2px;
background: var(--accent);
transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.review:hover {
transform: translateY(-4px);
border-color: var(--accent);
box-shadow: 0 20px 50px rgba(11, 18, 32, 0.1), 0 0 0 2px rgba(201, 168, 76, 0.3);
}
.review:hover::before { width: 80%; }
.review-stars { display: flex; gap: 2px; margin-bottom: 14px; }
.review-stars svg { width: 14px; height: 14px; fill: var(--accent); }
.review p {
color: var(--text);
font-size: var(--text-base);
line-height: 1.65;
margin-bottom: 22px;
flex: 1;
font-weight: 400;
}
.review-author {
display: flex;
align-items: center;
gap: 14px;
padding-top: 16px;
border-top: 1px solid var(--border-soft);
}
.review-avatar {
width: 44px;
height: 44px;
border-radius: 50%;
overflow: hidden;
flex-shrink: 0;
background: var(--bg-soft);
box-shadow: 0 0 0 3px rgba(201, 168, 76, 0.15);
}
.review-avatar img { width: 100%; height: 100%; object-fit: cover; }
.review-author-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.review-author-name { font-size: var(--text-sm); font-weight: 700; color: var(--text); }
.review-author-role { font-size: var(--text-xs); color: var(--text-muted); }
.reviews-note {
text-align: center;
font-size: var(--text-sm);
color: var(--text-light);
margin-top: 32px;
}
/* ──────────────────────────────────────
21. LEAD MAGNET
──────────────────────────────────── */
.lead-magnet {
background: var(--bg-dark);
color: #ffffff;
padding: clamp(64px, 7vw, 96px) 0;
position: relative;
overflow: hidden;
}
.lead-magnet::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(circle at 30% 20%, rgba(201, 168, 76, 0.16), transparent 50%),
radial-gradient(circle at 80% 80%, rgba(201, 168, 76, 0.08), transparent 55%);
pointer-events: none;
}
.lm-grid {
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: 60px;
align-items: center;
position: relative;
z-index: 1;
}
.lm-text h2 { color: #ffffff; margin-bottom: 16px; }
.lm-text .lead { color: rgba(255, 255, 255, 0.78); margin-bottom: 28px; }
.lm-perks { display: flex; flex-direction: column; gap: 12px; }
.lm-perk {
display: flex;
align-items: center;
gap: 10px;
font-size: var(--text-sm);
color: rgba(255, 255, 255, 0.86);
}
.lm-perk svg { width: 16px; height: 16px; color: var(--accent); flex-shrink: 0; }
.lm-form {
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: var(--radius-lg);
padding: 32px;
backdrop-filter: blur(8px);
}
.lm-form h3 { color: #ffffff; font-size: var(--text-xl); margin-bottom: 20px; font-weight: 700; }
.lm-form .field { margin-bottom: 12px; }
.lm-form input,
.lm-form select {
width: 100%;
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.14);
border-radius: var(--radius);
padding: 13px 15px;
font-size: var(--text-sm);
color: #ffffff;
outline: none;
transition: border-color var(--t-base), background var(--t-base);
}
.lm-form input::placeholder { color: rgba(255, 255, 255, 0.45); }
.lm-form input:focus,
.lm-form select:focus { border-color: var(--accent); background: rgba(255, 255, 255, 0.08); }
.lm-form select {
-webkit-appearance: none;
appearance: none;
cursor: pointer;
padding-right: 36px;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 12px center;
}
.lm-form select option { background: var(--bg-dark); color: #ffffff; }
.lm-form button {
width: 100%;
background: var(--accent);
color: var(--text);
padding: 14px;
font-weight: 700;
font-size: var(--text-sm);
border-radius: var(--radius);
margin-top: 8px;
transition: background var(--t-base), transform var(--t-base);
}
.lm-form button:hover { background: #ffffff; transform: translateY(-1px); }
.lm-form button:disabled { opacity: 0.7; cursor: wait; }
.lm-note {
text-align: center;
font-size: 11px;
color: rgba(255, 255, 255, 0.42);
margin-top: 12px;
}
/* ──────────────────────────────────────
22. CTA BAND
──────────────────────────────────── */
.cta-band {
background: var(--bg-dark);
color: #ffffff;
padding: 80px 0;
position: relative;
overflow: hidden;
}
.cta-band::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(circle at 20% 50%, rgba(201, 168, 76, 0.08), transparent 50%);
pointer-events: none;
}
.cta-band-inner {
display: flex;
justify-content: space-between;
align-items: center;
gap: 40px;
flex-wrap: wrap;
position: relative;
z-index: 1;
}
.cta-band h2 { color: #ffffff; max-width: 620px; }
.cta-band p { color: rgba(255, 255, 255, 0.72); margin-top: 10px; }
/* ──────────────────────────────────────
23. FAQ
──────────────────────────────────── */
.faq-list { max-width: 800px; margin-inline: auto; }
.faq-item { border-bottom: 1px solid var(--border); }
.faq-question {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
padding: 22px 0;
font-size: var(--text-base);
font-weight: 700;
color: var(--text);
text-align: left;
cursor: pointer;
transition: color var(--t-base);
}
.faq-question:hover { color: var(--accent-hover); }
.faq-question span:first-child { position: relative; display: inline-block; }
.faq-question span:first-child::after {
content: '';
position: absolute;
left: 0;
bottom: -2px;
width: 100%;
height: 1.5px;
background: var(--accent);
transform: scaleX(0);
transform-origin: right;
transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.faq-item:hover .faq-question span:first-child::after,
.faq-item.open .faq-question span:first-child::after {
transform: scaleX(1);
transform-origin: left;
}
.faq-toggle {
width: 24px;
height: 24px;
border-radius: 50%;
background: var(--bg-soft);
border: 1px solid var(--border);
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
color: var(--text-muted);
transition: all var(--t-base);
flex-shrink: 0;
margin-left: 16px;
}
.faq-item.open .faq-toggle {
background: var(--text);
border-color: var(--text);
color: #ffffff;
transform: rotate(45deg);
}
.faq-answer {
max-height: 0;
overflow: hidden;
transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.faq-answer-inner {
padding-bottom: 22px;
font-size: var(--text-sm);
color: var(--text-muted);
line-height: 1.7;
max-width: 700px;
}
.faq-item.open .faq-answer { max-height: 500px; }
/* ──────────────────────────────────────
24. PROCESS PAGE
──────────────────────────────────── */
.process-list { max-width: 880px; margin-inline: auto; position: relative; padding-left: 0; }
.process-row {
padding: 28px 28px;
margin-block: 6px;
border-radius: var(--radius-md);
border: 1px solid var(--border);
border-left: 3px solid var(--border);
background: #ffffff;
transition: background var(--t-base), border-left-color 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color var(--t-base), box-shadow var(--t-base), transform var(--t-base);
position: relative;
}
.process-row:hover {
background: var(--bg-soft);
border-left-color: var(--accent);
border-color: var(--accent);
box-shadow: var(--shadow-md);
transform: translateX(4px);
}
.process-row > div { width: 100%; }
.process-row h3 {
font-size: var(--text-2xl);
margin-bottom: 10px;
font-weight: 700;
transition: color var(--t-base);
}
.process-row:hover h3 { color: var(--accent-hover); }
.process-row p { font-size: var(--text-base); margin-bottom: 16px; max-width: 640px; }
.process-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.process-tag {
font-size: var(--text-xs);
color: var(--text-muted);
background: var(--bg-soft);
padding: 6px 12px;
border-radius: var(--radius-full);
border: 1px solid var(--border);
transition: background var(--t-base), color var(--t-base), border-color var(--t-base);
}
.process-row:hover .process-tag { background: #ffffff; border-color: var(--accent); }
/* Values grid (about / process pages) */
.values-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
/* 4-principle layout — balanced 2x2 (collapses to 1 col on mobile) */
.values-grid-4 { grid-template-columns: repeat(2, 1fr); }
/* About — "who we work with" closing note */
.about-fit-note {
max-width: 720px;
margin: 32px auto 0;
text-align: center;
color: var(--text-muted);
font-size: var(--text-lg);
line-height: 1.7;
}
.value-card {
padding: 32px 28px;
background: #ffffff;
border-radius: var(--radius-md);
border: 1.5px solid var(--border);
position: relative;
overflow: hidden;
transition: transform var(--t-base), border-color var(--t-base), box-shadow var(--t-base);
}
.value-card::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 3px;
background: var(--accent);
transform: scaleY(0);
transform-origin: top;
transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.value-card::after {
content: '';
position: absolute;
top: 0;
right: 0;
width: 80px;
height: 80px;
background: radial-gradient(circle at top right, rgba(201, 168, 76, 0.15), transparent 70%);
opacity: 0;
transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1);
pointer-events: none;
}
.value-card:hover {
transform: translateY(-3px);
border-color: var(--accent);
box-shadow: var(--shadow-md);
}
.value-card:hover::before { transform: scaleY(1); }
.value-card:hover::after { opacity: 1; }
.value-card-icon {
width: 48px;
height: 48px;
border-radius: var(--radius-md);
background: var(--accent-soft);
color: var(--accent-hover);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 20px;
transition: background var(--t-base), color var(--t-base), transform var(--t-base);
}
.value-card-icon svg { width: 24px; height: 24px; }
.value-card:hover .value-card-icon {
background: var(--text);
color: var(--accent);
transform: rotate(-6deg) scale(1.05);
}
.value-card h3 { font-size: var(--text-lg); margin-bottom: 10px; transition: color var(--t-base); }
.value-card:hover h3 { color: var(--accent-hover); }
.value-card p { font-size: var(--text-sm); line-height: 1.65; }
/* ──────────────────────────────────────
25. ABOUT PAGE
──────────────────────────────────── */
.about-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: center;
}
.about-grid img {
width: 100%;
border-radius: var(--radius-lg);
aspect-ratio: 4/5;
object-fit: cover;
transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.about-grid:hover img { transform: scale(1.02); }
.about-stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 32px;
margin-top: 40px;
padding-top: 32px;
border-top: 1px solid var(--border);
}
.about-stat { position: relative; padding-top: 4px; transition: transform var(--t-base); }
.about-stat:hover { transform: translateY(-3px); }
.about-stat .num {
font-size: var(--text-3xl);
font-weight: 800;
letter-spacing: -0.02em;
margin-bottom: 4px;
background: linear-gradient(135deg, var(--text) 0%, var(--accent-hover) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.about-stat .label {
font-size: var(--text-xs);
font-weight: 600;
letter-spacing: 1px;
text-transform: uppercase;
color: var(--text-light);
}
/* ──────────────────────────────────────
26. SERVICES PAGE
──────────────────────────────────── */
.service-block {
display: grid;
grid-template-columns: 1fr 1.2fr;
gap: 60px;
padding: 56px 0;
border-bottom: 1px solid var(--border);
align-items: center;
}
.service-block:last-child { border-bottom: none; }
.service-block:nth-child(even) .sb-text { order: 2; }
.sb-image {
border-radius: var(--radius-lg);
overflow: hidden;
aspect-ratio: 4/3;
position: relative;
transition: transform var(--t-base);
}
.sb-image img { width: 100%; height: 100%; object-fit: cover; }
.sb-image::before {
content: '';
position: absolute;
inset: -8px;
border: 2px solid var(--accent);
border-radius: var(--radius-lg);
opacity: 0;
transition: opacity var(--t-base), inset 0.4s cubic-bezier(0.16, 1, 0.3, 1);
pointer-events: none;
}
.service-block:hover .sb-image::before { opacity: 0.45; inset: -4px; }
.sb-text .eyebrow { color: var(--accent-hover); }
.sb-text h2 { font-size: var(--text-3xl); margin-bottom: 14px; }
.sb-text p { margin-bottom: 16px; }
/* ── Pillar block — tones + premium pillar number label ── */
.pillar-block {
--tone: #c9a84c;
--tone-rgb: 201, 168, 76;
--tone-soft: rgba(201, 168, 76, 0.10);
--tone-text: #b8983e;
}
.pillar-block[data-tone="blue"] { --tone: #2563eb; --tone-rgb: 37, 99, 235; --tone-soft: rgba(37,99,235,0.10); --tone-text: #1e4fc7; }
.pillar-block[data-tone="violet"] { --tone: #7c3aed; --tone-rgb: 124, 58, 237; --tone-soft: rgba(124,58,237,0.10); --tone-text: #6628d2; }
.pillar-block[data-tone="pink"] { --tone: #ec4899; --tone-rgb: 236, 72, 153; --tone-soft: rgba(236,72,153,0.10); --tone-text: #d1377d; }
.pillar-block[data-tone="green"] { --tone: #16a34a; --tone-rgb: 22, 163, 74; --tone-soft: rgba(22,163,74,0.10); --tone-text: #128539; }
.pillar-block .sb-image { aspect-ratio: 4/3; }
.pillar-block .sb-image::before { border-color: var(--tone); }
.pillar-block .sb-text .eyebrow { color: var(--tone-text); }
.pillar-eyebrow {
display: inline-block;
font-size: 10px;
font-weight: 800;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--tone);
background: var(--tone-soft);
padding: 4px 10px;
border-radius: var(--radius-full);
margin-bottom: 14px;
}
/* ── Dual-path component (Pillar 02 differentiator) ── */
.dual-path {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
margin: 20px 0 22px;
}
.dual-path-card {
background: linear-gradient(180deg, #ffffff 0%, var(--tone-soft) 200%);
border: 1.5px solid rgba(var(--tone-rgb), 0.22);
border-radius: var(--radius-md);
padding: 18px 18px 16px;
position: relative;
transition: transform var(--t-base), border-color var(--t-base), box-shadow var(--t-base);
}
.dual-path-card:hover {
transform: translateY(-2px);
border-color: var(--tone);
box-shadow: 0 12px 28px rgba(var(--tone-rgb), 0.18);
}
.dual-path-tag {
display: inline-block;
font-size: 10px;
font-weight: 700;
letter-spacing: 1.5px;
text-transform: uppercase;
color: var(--tone);
background: rgba(var(--tone-rgb), 0.14);
padding: 3px 8px;
border-radius: var(--radius);
margin-bottom: 10px;
}
.dual-path-card h4 {
font-size: var(--text-base);
font-weight: 700;
margin: 0 0 8px;
color: var(--text);
}
.dual-path-card p {
font-size: var(--text-sm);
line-height: 1.55;
margin: 0;
color: var(--text-muted);
}
@media (max-width: 768px) {
.dual-path { grid-template-columns: 1fr; gap: 10px; }
}
/* ── AEO callout (Pillar 03) ── */
.aeo-callout {
background: linear-gradient(135deg, rgba(236, 72, 153, 0.08), rgba(124, 58, 237, 0.06));
border: 1.5px solid rgba(236, 72, 153, 0.20);
border-radius: var(--radius-md);
padding: 16px 18px;
margin: 18px 0;
}
.aeo-callout-head {
display: flex;
align-items: center;
gap: 8px;
font-size: 11px;
font-weight: 700;
letter-spacing: 1.5px;
text-transform: uppercase;
color: #d1377d;
margin-bottom: 8px;
}
.aeo-callout-head svg { width: 14px; height: 14px; }
.aeo-callout p {
font-size: var(--text-sm);
line-height: 1.55;
color: var(--text);
margin: 0;
}
.sb-features {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin-top: 18px;
}
.sb-feature {
display: flex;
align-items: flex-start;
gap: 8px;
font-size: var(--text-sm);
color: var(--text);
}
.sb-feature::before {
content: '';
width: 5px;
height: 5px;
background: var(--accent);
border-radius: 50%;
margin-top: 8px;
flex-shrink: 0;
}
/* ──────────────────────────────────────
27. WORK / CASE STUDIES PAGE
──────────────────────────────────── */
.work-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 28px;
}
.work-card {
background: #ffffff;
border: 1.5px solid var(--border);
border-radius: var(--radius-lg);
overflow: hidden;
transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.5s ease, border-color 0.4s ease;
cursor: pointer;
position: relative;
}
.work-card:hover {
transform: translateY(-4px);
border-color: var(--accent);
box-shadow:
0 26px 56px rgba(11, 18, 32, 0.14),
0 0 0 2px rgba(201, 168, 76, 0.4),
0 0 36px rgba(201, 168, 76, 0.22);
}
.work-image { aspect-ratio: 16/10; overflow: hidden; background: var(--bg-soft); position: relative; }
.work-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.work-card:hover .work-image img { transform: scale(1.05); }
.work-meta { padding: 22px 24px 26px; }
.work-tag {
display: inline-block;
font-size: var(--text-xs);
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--accent);
margin-bottom: 10px;
}
.work-meta h3 { font-size: var(--text-lg); font-weight: 700; margin-bottom: 8px; line-height: 1.3; }
.work-meta p { font-size: var(--text-sm); color: var(--text-muted); line-height: 1.6; }
/* Case detailed cards */
.case-mini-stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
margin-top: 18px;
padding-top: 16px;
border-top: 1px solid var(--border-soft);
}
.mini-stat { display: flex; flex-direction: column; gap: 2px; }
.ms-num {
font-size: var(--text-lg);
font-weight: 800;
color: var(--accent-hover);
letter-spacing: -0.02em;
font-variant-numeric: tabular-nums;
}
.ms-label {
font-size: 10px;
font-weight: 600;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--text-light);
}
/* ──────────────────────────────────────
28. BLOG PAGE
──────────────────────────────────── */
.blog-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 28px;
}
.blog-card {
background: #ffffff;
border: 1.5px solid var(--border);
border-radius: var(--radius-lg);
overflow: hidden;
cursor: pointer;
transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.5s ease, border-color 0.4s ease;
display: flex;
flex-direction: column;
position: relative;
}
.blog-card::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, var(--accent), var(--accent-hover));
transform: scaleX(0);
transform-origin: left;
transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
z-index: 2;
}
.blog-card:hover::after { transform: scaleX(1); }
.blog-card:hover {
transform: translateY(-4px);
border-color: var(--accent);
box-shadow:
0 20px 50px rgba(11, 18, 32, 0.1),
0 0 0 2px rgba(201, 168, 76, 0.35);
}
.blog-image { position: relative; aspect-ratio: 16/10; overflow: hidden; background: var(--bg-soft); }
.blog-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.blog-card:hover .blog-image img { transform: scale(1.05); }
.blog-category {
position: absolute;
top: 14px;
left: 14px;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.8px;
text-transform: uppercase;
background: rgba(255, 255, 255, 0.95);
color: var(--text);
padding: 5px 10px;
border-radius: var(--radius);
backdrop-filter: blur(6px);
}
.blog-content { padding: 24px 26px 26px; display: flex; flex-direction: column; flex: 1; }
.blog-meta {
display: flex;
align-items: center;
gap: 8px;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.5px;
text-transform: uppercase;
color: var(--text-light);
margin-bottom: 12px;
}
.blog-content h3 {
font-size: var(--text-xl);
line-height: 1.3;
margin-bottom: 12px;
font-weight: 700;
transition: color var(--t-base);
}
.blog-card:hover .blog-content h3 { color: var(--accent-hover); }
.blog-content p { font-size: var(--text-sm); line-height: 1.65; margin-bottom: 18px; flex: 1; }
.blog-content .btn-link { margin-top: auto; align-self: flex-start; }
.blog-note {
text-align: center;
margin-top: 56px;
padding: 28px;
background: var(--bg-soft);
border-radius: var(--radius-md);
}
.blog-note p { font-size: var(--text-sm); color: var(--text-muted); }
.blog-note a {
font-weight: 700;
color: var(--text);
cursor: pointer;
border-bottom: 1.5px solid var(--accent);
padding-bottom: 1px;
transition: color var(--t-base);
}
.blog-note a:hover { color: var(--accent-hover); }
.blog-cta-row {
display: flex;
justify-content: center;
margin-top: 48px;
}
/* ═════════════════════════════════════════════════════════
SERVICES DIRECTORY (compact list view)
═════════════════════════════════════════════════════════ */
.services-list {
display: grid;
grid-template-columns: 1fr;
gap: 16px;
max-width: 980px;
margin-inline: auto;
}
.service-list-card {
--tone: var(--accent);
--tone-rgb: 201, 168, 76;
--tone-soft: rgba(201, 168, 76, 0.10);
--tone-text: var(--accent-hover);
display: grid;
grid-template-columns: 72px 1fr auto;
gap: 28px;
align-items: center;
padding: 28px 32px;
background: #ffffff;
border: 1.5px solid var(--border);
border-radius: var(--radius-lg);
cursor: pointer;
position: relative;
overflow: hidden;
transition: transform var(--t-base), border-color var(--t-base), box-shadow var(--t-base);
}
.service-list-card::before {
content: '';
position: absolute;
inset: 0 auto 0 0;
width: 4px;
background: var(--tone);
transform: scaleY(0.4);
transform-origin: center;
transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
.service-list-card:hover {
transform: translateY(-3px);
border-color: var(--tone);
box-shadow:
0 18px 40px rgba(11, 18, 32, 0.10),
0 0 0 1.5px rgba(var(--tone-rgb), 0.30);
}
.service-list-card:hover::before { transform: scaleY(1); }
.service-list-card[data-tone="blue"] { --tone: #2563eb; --tone-rgb: 37, 99, 235; --tone-soft: rgba(37,99,235,0.10); --tone-text: #1e4fc7; }
.service-list-card[data-tone="violet"] { --tone: #7c3aed; --tone-rgb: 124, 58, 237; --tone-soft: rgba(124,58,237,0.10); --tone-text: #6628d2; }
.service-list-card[data-tone="pink"] { --tone: #ec4899; --tone-rgb: 236, 72, 153; --tone-soft: rgba(236,72,153,0.10); --tone-text: #d1377d; }
.service-list-card[data-tone="green"] { --tone: #16a34a; --tone-rgb: 22, 163, 74; --tone-soft: rgba(22,163,74,0.10); --tone-text: #128539; }
.service-list-card[data-tone="cyan"] { --tone: #0891b2; --tone-rgb: 8, 145, 178; --tone-soft: rgba(8,145,178,0.10); --tone-text: #047a96; }
.service-list-card[data-tone="purple"] { --tone: #8b5cf6; --tone-rgb: 139, 92, 246; --tone-soft: rgba(139,92,246,0.10); --tone-text: #7c3aed; }
.slc-icon {
width: 72px;
height: 72px;
border-radius: 14px;
background: var(--tone-soft);
color: var(--tone-text);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), background var(--t-base), color var(--t-base);
}
.slc-icon svg { width: 32px; height: 32px; }
.service-list-card:hover .slc-icon {
background: var(--tone);
color: #ffffff;
transform: rotate(-6deg) scale(1.05);
}
.slc-content { min-width: 0; }
.slc-pillar {
display: inline-block;
font-size: 11px;
font-weight: 700;
letter-spacing: 1.5px;
text-transform: uppercase;
color: var(--tone-text);
margin-bottom: 8px;
}
.slc-content h3 {
font-size: var(--text-xl);
font-weight: 700;
margin-bottom: 8px;
line-height: 1.25;
letter-spacing: -0.015em;
transition: color var(--t-base);
}
.service-list-card:hover .slc-content h3 { color: var(--tone-text); }
.slc-content p {
font-size: var(--text-sm);
line-height: 1.6;
color: var(--text-muted);
margin-bottom: 12px;
}
.slc-tags {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.slc-tags span {
font-size: 11px;
font-weight: 600;
letter-spacing: 0.02em;
color: var(--text-muted);
background: var(--bg-soft);
border: 1px solid var(--border);
padding: 4px 9px;
border-radius: var(--radius-full);
transition: color var(--t-base), background var(--t-base), border-color var(--t-base);
}
.service-list-card:hover .slc-tags span {
color: var(--tone-text);
background: var(--tone-soft);
border-color: rgba(var(--tone-rgb), 0.30);
}
.slc-cta {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 13px;
font-weight: 700;
color: var(--text);
white-space: nowrap;
transition: color var(--t-base), gap var(--t-base);
}
.slc-cta svg { width: 16px; height: 16px; transition: transform var(--t-base); }
.service-list-card:hover .slc-cta { color: var(--tone-text); gap: 12px; }
.service-list-card:hover .slc-cta svg { transform: translateX(3px); }
@media (max-width: 768px) {
.service-list-card {
grid-template-columns: 56px 1fr;
padding: 22px 22px;
gap: 18px;
}
.slc-icon { width: 56px; height: 56px; }
.slc-icon svg { width: 26px; height: 26px; }
.slc-cta {
grid-column: 1 / -1;
margin-top: 4px;
padding-top: 16px;
border-top: 1px solid var(--border-soft);
}
}
/* ═════════════════════════════════════════════════════════
SERVICE DETAIL PAGE
═════════════════════════════════════════════════════════ */
.service-detail-page {
--tone: var(--accent);
--tone-rgb: 201, 168, 76;
--tone-soft: rgba(201, 168, 76, 0.10);
--tone-text: var(--accent-hover);
}
.service-detail-page[data-tone="blue"] { --tone: #2563eb; --tone-rgb: 37, 99, 235; --tone-soft: rgba(37,99,235,0.10); --tone-text: #1e4fc7; }
.service-detail-page[data-tone="violet"] { --tone: #7c3aed; --tone-rgb: 124, 58, 237; --tone-soft: rgba(124,58,237,0.10); --tone-text: #6628d2; }
.service-detail-page[data-tone="pink"] { --tone: #ec4899; --tone-rgb: 236, 72, 153; --tone-soft: rgba(236,72,153,0.10); --tone-text: #d1377d; }
.service-detail-page[data-tone="green"] { --tone: #16a34a; --tone-rgb: 22, 163, 74; --tone-soft: rgba(22,163,74,0.10); --tone-text: #128539; }
.service-detail-page[data-tone="cyan"] { --tone: #0891b2; --tone-rgb: 8, 145, 178; --tone-soft: rgba(8,145,178,0.10); --tone-text: #047a96; }
.service-detail-page[data-tone="purple"] { --tone: #8b5cf6; --tone-rgb: 139, 92, 246; --tone-soft: rgba(139,92,246,0.10); --tone-text: #7c3aed; }
.service-detail-hero .pillar-eyebrow {
display: inline-block;
font-size: 11px;
font-weight: 800;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--tone);
background: var(--tone-soft);
padding: 5px 12px;
border-radius: var(--radius-full);
margin-bottom: 14px;
}
.service-detail-hero .eyebrow {
color: var(--tone-text);
margin-bottom: 8px;
display: block;
}
/* ─── Overview split (image + text) ─── */
.service-overview {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 56px;
align-items: center;
}
.service-overview-image {
border-radius: var(--radius-lg);
overflow: hidden;
aspect-ratio: 4/3;
}
.service-overview-image img {
width: 100%; height: 100%; object-fit: cover;
}
.service-overview-text .eyebrow {
color: var(--tone-text);
margin-bottom: 8px;
}
.service-overview-text h2 {
font-size: clamp(24px, 2.6vw, 32px);
font-weight: 700;
margin-bottom: 16px;
letter-spacing: -0.02em;
}
.service-overview-text p {
font-size: var(--text-base);
line-height: 1.65;
margin-bottom: 14px;
}
.service-overview-text p:last-child { margin-bottom: 0; }
@media (max-width: 880px) {
.service-overview { grid-template-columns: 1fr; gap: 32px; }
.service-overview-image { aspect-ratio: 16/10; }
}
/* ─── What's-included deep feature grid ─── */
.features-deep-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 22px;
}
.feature-deep {
padding: 28px 26px 26px;
background: #ffffff;
border: 1.5px solid var(--border);
border-radius: var(--radius-md);
transition: transform var(--t-base), border-color var(--t-base), box-shadow var(--t-base);
}
.feature-deep:hover {
transform: translateY(-3px);
border-color: var(--tone);
box-shadow:
0 14px 32px rgba(11, 18, 32, 0.08),
0 0 0 1.5px rgba(var(--tone-rgb), 0.25);
}
.feature-deep-icon {
width: 44px;
height: 44px;
border-radius: var(--radius-md);
background: var(--tone-soft);
color: var(--tone-text);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 16px;
transition: background var(--t-base), color var(--t-base), transform var(--t-base);
}
.feature-deep-icon svg { width: 22px; height: 22px; }
.feature-deep:hover .feature-deep-icon {
background: var(--tone);
color: #ffffff;
transform: rotate(-6deg) scale(1.05);
}
.feature-deep h4 {
font-size: var(--text-base);
font-weight: 700;
margin-bottom: 8px;
letter-spacing: -0.015em;
}
.feature-deep p {
font-size: var(--text-sm);
line-height: 1.6;
margin: 0;
}
@media (max-width: 768px) {
.features-deep-grid { grid-template-columns: 1fr; gap: 14px; }
.feature-deep { padding: 22px 20px 20px; }
}
/* ─── Methodology grid ─── */
.methodology-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 22px;
max-width: 1100px;
margin-inline: auto;
}
.methodology-step {
padding: 28px 24px 24px;
background: #ffffff;
border: 1.5px solid var(--border);
border-radius: var(--radius-md);
position: relative;
transition: transform var(--t-base), border-color var(--t-base);
}
.methodology-step:hover {
transform: translateY(-3px);
border-color: var(--tone);
}
.ms-num {
display: inline-block;
font-size: 14px;
font-weight: 800;
letter-spacing: 0.05em;
color: var(--tone);
background: var(--tone-soft);
padding: 4px 10px;
border-radius: var(--radius);
margin-bottom: 14px;
}
.methodology-step h4 {
font-size: var(--text-lg);
font-weight: 700;
margin-bottom: 8px;
letter-spacing: -0.015em;
}
.methodology-step p {
font-size: var(--text-sm);
line-height: 1.55;
margin: 0;
}
@media (max-width: 980px) {
.methodology-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
.methodology-grid { grid-template-columns: 1fr; }
}
/* ─── Deliverables list ─── */
.deliverables-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 14px;
}
.deliverables-list li {
display: flex;
align-items: flex-start;
gap: 14px;
font-size: var(--text-base);
line-height: 1.5;
color: var(--text);
padding: 16px 20px;
background: #ffffff;
border: 1px solid var(--border);
border-radius: var(--radius-md);
border-left: 3px solid var(--tone);
transition: transform var(--t-base), box-shadow var(--t-base);
}
.deliverables-list li:hover {
transform: translateX(4px);
box-shadow: 0 8px 20px rgba(11, 18, 32, 0.06);
}
.deliverables-list li::before {
content: '✓';
color: var(--tone);
font-weight: 800;
font-size: 17px;
flex-shrink: 0;
line-height: 1.2;
}
/* ─────────────────────────────────────────────────────────
BLOG HUB — featured, filter, author info, newsletter
───────────────────────────────────────────────────────── */
.blog-featured-section { padding-block: clamp(40px, 5vw, 64px); }
.blog-featured {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0;
background: #ffffff;
border: 1.5px solid var(--border);
border-radius: var(--radius-lg);
overflow: hidden;
cursor: pointer;
transition: transform var(--t-base), border-color var(--t-base), box-shadow var(--t-base);
}
.blog-featured:hover {
transform: translateY(-4px);
border-color: var(--accent);
box-shadow: 0 24px 56px rgba(11, 18, 32, 0.12), 0 0 0 2px rgba(201, 168, 76, 0.30);
}
.blog-featured-image {
position: relative;
aspect-ratio: 4/3;
overflow: hidden;
background: var(--bg-soft);
}
.blog-featured-image img {
width: 100%; height: 100%; object-fit: cover;
transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.blog-featured:hover .blog-featured-image img { transform: scale(1.04); }
.blog-featured-badge {
position: absolute;
top: 18px;
left: 18px;
background: var(--accent);
color: var(--text);
padding: 6px 12px;
border-radius: var(--radius-full);
font-size: 11px;
font-weight: 800;
letter-spacing: 0.5px;
box-shadow: 0 4px 12px rgba(11, 18, 32, 0.18);
}
.blog-featured-content {
padding: 40px 44px;
display: flex;
flex-direction: column;
justify-content: center;
}
.blog-category-pill {
display: inline-block;
font-size: 11px;
font-weight: 700;
letter-spacing: 1.2px;
text-transform: uppercase;
color: var(--accent-hover);
background: var(--accent-soft);
padding: 5px 12px;
border-radius: var(--radius-full);
margin-bottom: 16px;
align-self: flex-start;
}
.blog-featured-content h2 {
font-size: clamp(22px, 2.4vw, 30px);
line-height: 1.2;
font-weight: 700;
margin-bottom: 14px;
letter-spacing: -0.02em;
}
.blog-featured-content p {
font-size: var(--text-base);
line-height: 1.65;
margin-bottom: 24px;
}
.blog-featured-meta {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 14px;
padding-top: 18px;
border-top: 1px solid var(--border-soft);
margin-bottom: 22px;
}
.blog-author {
display: flex;
align-items: center;
gap: 12px;
}
.blog-author-avatar {
width: 38px;
height: 38px;
border-radius: 50%;
overflow: hidden;
background: var(--bg-soft);
box-shadow: 0 0 0 2px rgba(201, 168, 76, 0.20);
}
.blog-author-avatar img { width: 100%; height: 100%; object-fit: cover; }
.blog-author-info { display: flex; flex-direction: column; }
.blog-author-name { font-size: 13px; font-weight: 700; color: var(--text); }
.blog-author-role { font-size: 11px; color: var(--text-muted); }
.blog-featured-stats {
display: flex;
gap: 16px;
font-size: 12px;
color: var(--text-muted);
}
.blog-featured-cta { align-self: flex-start; }
/* ── Toolbar with filter pills ── */
.blog-toolbar {
display: flex;
justify-content: space-between;
align-items: end;
gap: 24px;
flex-wrap: wrap;
margin-bottom: 36px;
}
.blog-toolbar-title { font-size: clamp(22px, 2.3vw, 30px); font-weight: 700; margin-bottom: 4px; letter-spacing: -0.02em; }
.blog-toolbar-sub { font-size: var(--text-sm); color: var(--text-muted); }
.blog-filter { display: flex; gap: 8px; flex-wrap: wrap; }
.blog-filter-pill {
font-size: 12px;
font-weight: 600;
color: var(--text-muted);
background: transparent;
border: 1.5px solid var(--border);
padding: 7px 14px;
border-radius: var(--radius-full);
cursor: pointer;
transition: all var(--t-base);
}
.blog-filter-pill:hover { border-color: var(--accent); color: var(--text); }
.blog-filter-pill.active {
background: var(--text);
border-color: var(--text);
color: #ffffff;
}
/* ── Card footer with author mini ── */
.blog-card-foot {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: auto;
padding-top: 14px;
border-top: 1px solid var(--border-soft);
gap: 12px;
}
.blog-author-mini {
display: flex;
align-items: center;
gap: 8px;
font-size: 11px;
font-weight: 600;
color: var(--text-muted);
}
.blog-author-mini img {
width: 24px;
height: 24px;
border-radius: 50%;
object-fit: cover;
}
/* ── Newsletter band ── */
.blog-newsletter {
margin-top: 56px;
padding: 36px 40px;
background: linear-gradient(135deg, var(--text) 0%, #1a2030 100%);
border-radius: var(--radius-lg);
display: grid;
grid-template-columns: 1fr auto;
gap: 32px;
align-items: center;
color: #ffffff;
position: relative;
overflow: hidden;
}
.blog-newsletter::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(circle at 100% 50%, rgba(201, 168, 76, 0.20), transparent 50%);
pointer-events: none;
}
.blog-newsletter > * { position: relative; z-index: 1; }
.blog-newsletter h3 {
color: #ffffff;
font-size: var(--text-xl);
font-weight: 700;
margin-bottom: 6px;
}
.blog-newsletter p {
color: rgba(255, 255, 255, 0.7);
font-size: var(--text-sm);
margin: 0;
}
.blog-newsletter-form {
display: flex;
gap: 8px;
min-width: 320px;
}
.blog-newsletter-form input {
flex: 1;
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.14);
border-radius: var(--radius);
padding: 12px 14px;
font-size: var(--text-sm);
color: #ffffff;
outline: none;
transition: border-color var(--t-base), background var(--t-base);
}
.blog-newsletter-form input::placeholder { color: rgba(255, 255, 255, 0.45); }
.blog-newsletter-form input:focus {
border-color: var(--accent);
background: rgba(255, 255, 255, 0.12);
}
.blog-newsletter-form button {
background: var(--accent);
color: var(--text);
white-space: nowrap;
}
.blog-newsletter-form button:hover { background: #ffffff; }
@media (max-width: 980px) {
.blog-featured { grid-template-columns: 1fr; }
.blog-featured-image { aspect-ratio: 16/9; }
.blog-featured-content { padding: 28px 26px; }
.blog-newsletter { grid-template-columns: 1fr; padding: 28px 24px; gap: 16px; }
.blog-newsletter-form { min-width: 0; }
}
@media (max-width: 540px) {
.blog-toolbar { flex-direction: column; align-items: stretch; }
.blog-newsletter-form { flex-direction: column; }
.blog-newsletter-form button { width: 100%; justify-content: center; }
}
/* ──────────────────────────────────────
29. CONTACT PAGE
──────────────────────────────────── */
.contact-grid {
display: grid;
grid-template-columns: 1.3fr 1fr;
gap: 56px;
align-items: start;
}
.contact-form .field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.contact-form .field-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
margin-bottom: 16px;
}
.contact-form label {
font-size: var(--text-xs);
font-weight: 600;
letter-spacing: 0.5px;
text-transform: uppercase;
color: var(--text-muted);
}
.contact-form input,
.contact-form select,
.contact-form textarea {
width: 100%;
background: #ffffff;
border: 1.5px solid var(--border);
border-radius: var(--radius);
padding: 13px 15px;
font-size: var(--text-sm);
color: var(--text);
outline: none;
transition: border-color var(--t-base), box-shadow var(--t-base);
}
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
border-color: var(--accent);
box-shadow: 0 0 0 3px rgba(201, 168, 76, 0.12);
}
.contact-form textarea { resize: vertical; min-height: 140px; }
.contact-form select {
-webkit-appearance: none;
appearance: none;
cursor: pointer;
padding-right: 36px;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 12px center;
}
.contact-form .btn-primary {
width: 100%;
padding: 14px;
margin-top: 8px;
font-size: var(--text-sm);
}
.contact-info {
padding: 36px 32px;
background: linear-gradient(180deg, var(--bg-soft) 0%, #ffffff 100%);
border: 1px solid var(--border);
border-radius: var(--radius-md);
}
.contact-info h3 { margin-bottom: 24px; font-size: var(--text-lg); font-weight: 700; }
.contact-block-rich {
display: flex;
align-items: flex-start;
gap: 14px;
padding-block: 14px;
border-bottom: 1px solid var(--border-soft);
}
.contact-block-rich:last-of-type { border-bottom: 0; padding-bottom: 18px; }
.contact-block-icon {
width: 38px;
height: 38px;
border-radius: var(--radius);
background: var(--accent-soft);
color: var(--accent-hover);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: background var(--t-base), transform var(--t-base);
}
.contact-block-icon svg { width: 18px; height: 18px; }
.contact-block-icon.whatsapp { background: rgba(37, 211, 102, 0.12); color: var(--whatsapp); }
.contact-block-rich:hover .contact-block-icon { transform: scale(1.06); }
.contact-block-content {
display: flex;
flex-direction: column;
gap: 3px;
min-width: 0;
flex: 1;
}
.contact-block-label {
font-size: 11px;
font-weight: 600;
letter-spacing: 1px;
text-transform: uppercase;
color: var(--text-light);
}
.contact-block-value {
font-size: var(--text-sm);
color: var(--text);
font-weight: 600;
word-break: break-word;
transition: color var(--t-base);
}
a.contact-block-value:hover { color: var(--accent-hover); }
.contact-quick-actions {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
margin-top: 20px;
padding-block: 18px;
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
}
.quick-action {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
padding: 12px 8px;
background: #ffffff;
border: 1px solid var(--border);
border-radius: var(--radius);
font-size: 11px;
font-weight: 600;
color: var(--text-muted);
text-align: center;
cursor: pointer;
transition: border-color var(--t-base), color var(--t-base), transform var(--t-base);
}
.quick-action svg { width: 18px; height: 18px; }
.quick-action:hover { border-color: var(--text); color: var(--text); transform: translateY(-2px); }
.quick-action.whatsapp svg { color: var(--whatsapp); }
.quick-action.whatsapp:hover { border-color: var(--whatsapp); color: var(--whatsapp); }
.contact-trust { display: flex; flex-direction: column; gap: 12px; margin-top: 18px; }
.contact-trust-item {
display: flex;
align-items: center;
gap: 10px;
font-size: var(--text-sm);
color: var(--text-muted);
}
.contact-trust-item svg { width: 16px; height: 16px; color: var(--success); }
/* ──────────────────────────────────────
30. FOOTER
──────────────────────────────────── */
footer {
background: var(--bg-dark);
color: rgba(255, 255, 255, 0.7);
padding: 72px 0 24px;
position: relative;
overflow: hidden;
}
footer::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, var(--accent), transparent);
}
.footer-grid {
display: grid;
grid-template-columns: 1.5fr 1fr 1fr 1fr;
gap: 48px;
margin-bottom: 48px;
}
.footer-brand p {
color: rgba(255, 255, 255, 0.55);
font-size: var(--text-sm);
margin-top: 18px;
max-width: 300px;
line-height: 1.65;
}
.footer-brand .logo {
display: inline-flex;
align-items: center;
padding: 9px 14px;
background: #ffffff;
border-radius: var(--radius-md);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(201, 168, 76, 0.18);
transition: transform var(--t-base), box-shadow var(--t-base);
}
.footer-brand .logo:hover {
transform: translateY(-2px);
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(201, 168, 76, 0.35);
}
.footer-logo {
height: 32px;
max-width: 168px;
filter: none;
opacity: 1;
}
/* Footer contact details */
.footer-contact {
list-style: none;
margin-top: 18px;
display: flex;
flex-direction: column;
gap: 11px;
max-width: 320px;
}
.footer-contact li {
display: flex;
align-items: flex-start;
gap: 10px;
color: rgba(255, 255, 255, 0.6);
font-size: var(--text-sm);
line-height: 1.5;
}
.footer-contact svg {
width: 16px;
height: 16px;
flex-shrink: 0;
margin-top: 2px;
color: var(--accent);
}
.footer-contact a {
color: rgba(255, 255, 255, 0.6);
transition: color var(--t-base);
}
.footer-contact a:hover { color: var(--accent); }
.footer-col h4 { color: #ffffff; font-size: var(--text-sm); margin-bottom: 18px; font-weight: 700; }
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.footer-col a,
.footer-col li {
color: rgba(255, 255, 255, 0.55);
font-size: var(--text-sm);
transition: color var(--t-base);
cursor: pointer;
}
.footer-col a:hover,
.footer-col li:hover { color: #ffffff; }
.footer-bottom {
border-top: 1px solid rgba(255, 255, 255, 0.08);
padding-top: 24px;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 12px;
font-size: var(--text-xs);
color: rgba(255, 255, 255, 0.42);
}
/* ──────────────────────────────────────
31. PAGE HEADER (services/process/etc)
──────────────────────────────────── */
.page-header {
padding: clamp(48px, 6vw, 88px) 0 clamp(40px, 5vw, 64px);
border-bottom: 1px solid var(--border);
background: var(--bg-soft);
}
.page-header .eyebrow { color: var(--accent-hover); }
.page-header h1 { font-size: clamp(32px, 4.5vw, 52px); margin-bottom: 16px; max-width: 760px; }
.page-header p { font-size: var(--text-lg); max-width: 680px; }
.page-header.has-canvas {
position: relative;
overflow: hidden;
min-height: 360px;
padding-top: clamp(60px, 7vw, 100px);
padding-bottom: clamp(50px, 6vw, 80px);
background:
radial-gradient(circle at 85% 30%, rgba(201, 168, 76, 0.10), transparent 60%),
radial-gradient(circle at 15% 80%, rgba(201, 168, 76, 0.05), transparent 55%),
var(--bg-soft);
}
.page-header.has-canvas canvas {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
z-index: 0;
pointer-events: auto;
}
/* Instant golden grid placeholder while Three.js lazy-loads for banner pages */
.page-header.has-canvas::before {
content: '';
position: absolute;
inset: 0;
background:
linear-gradient(90deg, transparent 0, transparent 60%, rgba(212, 175, 90, 0.12) 100%),
repeating-linear-gradient(0deg, transparent 0, transparent 38px, rgba(212, 175, 90, 0.08) 38px, rgba(212, 175, 90, 0.08) 39px),
repeating-linear-gradient(90deg, transparent 0, transparent 38px, rgba(212, 175, 90, 0.08) 38px, rgba(212, 175, 90, 0.08) 39px);
pointer-events: none;
z-index: 0;
opacity: 0.7;
-webkit-mask-image: linear-gradient(90deg, transparent 30%, #000 80%);
mask-image: linear-gradient(90deg, transparent 30%, #000 80%);
}
.page-header.has-canvas:has(canvas[data-bound="1"])::before { opacity: 0.25; }
/* Light vignette that fades from left so the headline stays sharp,
while the wave field is clearly visible on the right side of the banner. */
.page-header.has-canvas::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(90deg, rgba(250, 250, 250, 0.55) 0%, rgba(250, 250, 250, 0.05) 45%, rgba(250, 250, 250, 0) 70%);
z-index: 0;
pointer-events: none;
}
.page-header.has-canvas > .container { position: relative; z-index: 1; pointer-events: none; }
.page-header.has-canvas > .container * { pointer-events: auto; }
/* Article-page-header — slightly stronger overlay (article focus) */
.article-page-header.has-canvas { min-height: 260px; }
.article-page-header.has-canvas::after {
background: linear-gradient(90deg, rgba(250, 250, 250, 0.78) 0%, rgba(250, 250, 250, 0.28) 55%, rgba(250, 250, 250, 0.02) 100%);
}
/* Article header */
.article-page-header .eyebrow { display: block; margin-bottom: 12px; }
.article-page-header h1 { font-size: clamp(1.6rem, 3.5vw, 2.6rem); line-height: 1.2; }
.article-meta { margin-top: 16px; font-size: var(--text-sm); color: var(--text-muted); }
.container-article { max-width: 780px; }
.article-hero {
border-radius: var(--radius-lg);
overflow: hidden;
margin-bottom: 48px;
aspect-ratio: 16/8;
background: var(--bg-soft);
}
.article-hero img { width: 100%; height: 100%; object-fit: cover; }
.article-body { font-size: var(--text-base); line-height: 1.75; color: var(--text); }
.article-body p { margin-bottom: 20px; }
.article-body h2 {
font-size: var(--text-2xl);
font-weight: 700;
margin: 40px 0 14px;
color: var(--text);
line-height: 1.25;
}
.article-body ul, .article-body ol { margin: 0 0 20px 24px; }
.article-body li { margin-bottom: 10px; line-height: 1.65; }
.article-body strong { font-weight: 700; }
.project-detail-highlights {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-bottom: 44px;
}
.highlight-chip {
display: flex;
flex-direction: column;
gap: 2px;
background: var(--bg-soft);
border: 1px solid var(--border);
border-radius: var(--radius-md);
padding: 12px 18px;
min-width: 120px;
}
.highlight-chip-label {
font-size: var(--text-xs);
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--text-muted);
}
.highlight-chip-value { font-size: var(--text-sm); font-weight: 700; color: var(--text); }
.article-back-footer { margin-top: 56px; padding-top: 32px; border-top: 1px solid var(--border); }
/* ──────────────────────────────────────
32. WHATSAPP FAB
──────────────────────────────────── */
.whatsapp-fab {
position: fixed;
bottom: 24px;
right: 24px;
width: 56px;
height: 56px;
border-radius: 50%;
background: var(--whatsapp);
display: flex;
align-items: center;
justify-content: center;
color: white;
box-shadow: 0 8px 20px rgba(37, 211, 102, 0.35);
z-index: 90;
transition: transform var(--t-base);
animation: fab-pulse 2.4s ease-in-out infinite;
}
.whatsapp-fab:hover { transform: scale(1.05); }
.whatsapp-fab svg { width: 28px; height: 28px; fill: white; }
@keyframes fab-pulse {
0%, 100% { box-shadow: 0 8px 24px rgba(37, 211, 102, 0.35); }
50% { box-shadow: 0 8px 30px rgba(37, 211, 102, 0.55), 0 0 0 8px rgba(37, 211, 102, 0.08); }
}
/* ──────────────────────────────────────
33. SCROLL PROGRESS
──────────────────────────────────── */
.scroll-progress {
position: fixed;
top: 0;
left: 0;
height: 3px;
width: 100%;
background: linear-gradient(90deg, var(--accent), var(--accent-hover));
transform-origin: left;
transform: scaleX(0);
z-index: 999;
pointer-events: none;
box-shadow: 0 0 12px rgba(201, 168, 76, 0.4);
}
/* ──────────────────────────────────────
34. AUDIT POPUP MODAL
──────────────────────────────────── */
body.modal-open { overflow: hidden; }
.audit-modal {
position: fixed;
inset: 0;
z-index: 10000;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
opacity: 0;
visibility: hidden;
transition: opacity 0.35s ease, visibility 0s linear 0.35s;
}
.audit-modal.open {
opacity: 1;
visibility: visible;
transition: opacity 0.35s ease;
}
.audit-modal-backdrop {
position: absolute;
inset: 0;
background: rgba(11, 18, 32, 0.6);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
.audit-modal-card {
position: relative;
background: #fff;
border-radius: 16px;
max-width: 460px;
width: 100%;
max-height: calc(100vh - 40px);
overflow-y: auto;
padding: 28px 26px 26px;
box-shadow:
0 24px 60px rgba(11, 18, 32, 0.28),
0 0 0 1px rgba(201, 168, 76, 0.12);
transform: translateY(24px) scale(0.97);
opacity: 0;
transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s ease;
}
.audit-modal.open .audit-modal-card { transform: translateY(0) scale(1); opacity: 1; }
.audit-modal-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, transparent, var(--accent), var(--accent-hover), var(--accent), transparent);
border-radius: 16px 16px 0 0;
}
.audit-modal-close {
position: absolute;
top: 10px;
right: 10px;
width: 32px;
height: 32px;
border-radius: 50%;
font-size: 22px;
line-height: 1;
color: var(--text-muted);
background: var(--bg-soft);
transition: all var(--t-base);
display: flex;
align-items: center;
justify-content: center;
z-index: 2;
}
.audit-modal-close:hover { background: var(--text); color: #fff; transform: rotate(90deg); }
.audit-modal-header { text-align: center; margin-bottom: 18px; }
.audit-modal-logo { margin: 0 auto 12px; display: flex; align-items: center; justify-content: center; }
.audit-modal-logo img {
height: 56px;
width: auto;
max-width: 180px;
object-fit: contain;
filter: drop-shadow(0 4px 12px rgba(201, 168, 76, 0.22));
}
.audit-modal-header h2 {
font-size: clamp(1.15rem, 2.8vw, 1.4rem);
font-weight: 800;
line-height: 1.25;
margin-bottom: 8px;
letter-spacing: -0.01em;
}
.audit-modal-header p {
font-size: 13px;
color: var(--text-muted);
line-height: 1.55;
max-width: 360px;
margin: 0 auto;
}
.audit-form { display: flex; flex-direction: column; gap: 10px; }
.audit-field input,
.audit-field select {
width: 100%;
padding: 11px 14px;
border: 1.5px solid var(--border);
border-radius: 8px;
font-size: 14px;
color: var(--text);
background: #fff;
transition: border-color var(--t-base), box-shadow var(--t-base);
}
.audit-field input:focus,
.audit-field select:focus {
outline: none;
border-color: var(--accent);
box-shadow: 0 0 0 3px rgba(201, 168, 76, 0.15);
}
.audit-field input::placeholder { color: var(--text-light); }
.audit-field select {
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='none' stroke='%235b6472' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 14px center;
background-size: 18px;
padding-right: 42px;
}
.audit-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.audit-submit {
margin-top: 4px;
padding: 12px 18px;
background: var(--text);
color: #fff;
border-radius: 8px;
font-weight: 700;
font-size: 14px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
position: relative;
overflow: hidden;
transition: transform var(--t-base), box-shadow var(--t-base);
}
.audit-submit svg { width: 18px; height: 18px; transition: transform var(--t-base); }
.audit-submit:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(11, 18, 32, 0.2); }
.audit-submit:hover svg { transform: translateX(3px); }
.audit-submit::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
transition: left 0.6s ease;
}
.audit-submit:hover::before { left: 100%; }
.audit-footnote {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
font-size: 12px;
color: var(--text-muted);
margin-top: 8px;
}
.audit-footnote svg { width: 14px; height: 14px; color: var(--accent); }
.audit-success { text-align: center; padding: 16px 0 8px; }
.audit-success-icon {
width: 64px;
height: 64px;
margin: 0 auto 16px;
border-radius: 50%;
background: var(--success);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
animation: success-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.audit-success-icon svg { width: 32px; height: 32px; }
.audit-success h3 { font-size: var(--text-xl); margin-bottom: 8px; }
.audit-success p { color: var(--text-muted); font-size: var(--text-sm); }
@keyframes success-pop {
0% { transform: scale(0); }
60% { transform: scale(1.15); }
100% { transform: scale(1); }
}
/* ──────────────────────────────────────
35. SCROLL REVEAL
──────────────────────────────────── */
.reveal {
opacity: 0;
transform: translateY(20px);
transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.in-view { opacity: 1; transform: translateY(0); }
/* ──────────────────────────────────────
36. CUSTOM SCROLLBAR
──────────────────────────────────── */
html { scrollbar-width: thin; scrollbar-color: var(--accent) var(--bg-soft); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg-soft); }
::-webkit-scrollbar-thumb {
background: linear-gradient(180deg, var(--accent), var(--accent-hover));
border-radius: 10px;
border: 2px solid var(--bg-soft);
}
::-webkit-scrollbar-thumb:hover { background: var(--accent-hover); }
/* ──────────────────────────────────────
37. RESPONSIVE
──────────────────────────────────── */
@media (max-width: 1180px) {
.services-grid-10 { grid-template-columns: repeat(4, 1fr); }
.steps-grid { gap: 22px; }
}
@media (max-width: 1024px) {
.services-grid { grid-template-columns: repeat(2, 1fr); }
.services-grid-10 { grid-template-columns: repeat(3, 1fr); }
.why-grid { grid-template-columns: repeat(2, 1fr); }
.steps-grid { grid-template-columns: repeat(3, 1fr); gap: 28px 22px; }
.steps-5 { grid-template-columns: repeat(3, 1fr); }
.tools-grid { grid-template-columns: repeat(3, 1fr); }
.tech-grid { grid-template-columns: 1fr; gap: 40px; }
.growth-grid { grid-template-columns: 1fr; gap: 40px; }
.blog-grid { grid-template-columns: repeat(2, 1fr); gap: 22px; }
.work-grid { grid-template-columns: repeat(2, 1fr); gap: 22px; }
.footer-grid { grid-template-columns: 1.5fr 1fr 1fr; }
.footer-grid > :nth-child(4) { grid-column: 1 / -1; }
.project-card { flex: 0 0 calc((100% - 20px) / 2); }
.review { flex: 0 0 380px; }
.metrics-grid { grid-template-columns: repeat(2, 1fr); gap: 32px; }
.metric:nth-child(odd) { border-left: none; }
.metric:nth-child(3) { border-top: 1px solid rgba(255, 255, 255, 0.08); padding-top: 28px; }
.metric:nth-child(4) { border-top: 1px solid rgba(255, 255, 255, 0.08); padding-top: 28px; }
}
@media (max-width: 980px) {
.nav-links { display: none; }
.menu-toggle { display: block; }
.nav-links.mobile-open {
display: flex;
flex-direction: column;
position: fixed;
top: var(--mobile-nav-top, 64px);
left: 0;
right: 0;
background: #ffffff;
border-bottom: 1px solid var(--border);
padding: 16px 20px 20px;
gap: 0;
box-shadow: 0 12px 32px rgba(11, 18, 32, 0.08);
align-items: stretch;
max-height: calc(100vh - var(--mobile-nav-top, 64px));
overflow-y: auto;
}
.nav-links.mobile-open > li {
padding: 14px 0;
border-bottom: 1px solid var(--border-soft);
display: block;
}
.nav-links.mobile-open > li:last-child { border-bottom: none; }
.nav-links.mobile-open a {
font-size: 15px;
font-weight: 600;
color: var(--text);
display: block;
padding: 4px 0;
}
.nav-links.mobile-open > li > a:hover,
.nav-links.mobile-open > li > a.active {
text-decoration: none;
}
.nav-links.mobile-open .dropdown {
position: static !important;
transform: none !important;
opacity: 1 !important;
visibility: visible !important;
pointer-events: auto !important;
box-shadow: none;
border: none;
padding: 8px 0 0;
margin: 8px 0 0;
min-width: 0;
background: transparent;
border-top: 1px solid var(--border-soft);
}
.nav-links.mobile-open .dropdown::before { display: none; }
.nav-links.mobile-open .dropdown-grid { grid-template-columns: 1fr; }
.nav-links.mobile-open .dropdown-item {
padding: 10px 0;
border-radius: 0;
}
.nav-links.mobile-open .dropdown-item:hover { background: transparent; color: var(--accent-hover); }
.nav-links.mobile-open .dropdown-item-icon { display: none; }
.nav-links.mobile-open li.has-dropdown > a::after {
margin-left: auto;
transition: transform var(--t-base);
}
body.menu-open { overflow: hidden; }
body.menu-open::after {
content: '';
position: fixed;
inset: 0;
background: rgba(11, 18, 32, 0.3);
z-index: 90;
pointer-events: none;
}
}
@media (max-width: 768px) {
.nav { height: 64px; padding-inline: 16px; }
.nav-links.mobile-open { top: 64px; padding: 14px 18px 18px; }
:root { --mobile-nav-top: 64px; }
.nav-cta .btn { padding: 9px 14px; font-size: 13px; }
.nav-cta { gap: 8px; }
.hero { padding: 44px 0 52px; }
.hero-grid { display: block; min-height: 0; }
.hero-text { max-width: 100%; text-align: center; }
.hero-text h1 { font-size: clamp(1.85rem, 7vw, 2.6rem); max-width: 100%; }
.hero-text .lead { max-width: 100%; }
.hero-text .eyebrow { display: inline-block; }
.hero-cta { justify-content: center; flex-direction: column; align-items: stretch; }
.hero-cta .btn { justify-content: center; }
.hero-trust { grid-template-columns: 1fr; justify-items: start; gap: 12px; max-width: 340px; text-align: left; }
/* Mobile hero overlay — radial fade so the orb glows behind centered text */
.hero::after {
background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.85) 60%, rgba(255, 255, 255, 0.95) 100%);
}
.page-header.has-canvas::after {
background: radial-gradient(ellipse at center, rgba(250, 250, 250, 0.55) 0%, rgba(250, 250, 250, 0.88) 70%);
}
.services-grid { grid-template-columns: 1fr; }
.services-grid-10 { grid-template-columns: repeat(2, 1fr); }
.why-grid { grid-template-columns: 1fr; }
.steps-grid, .steps-5 { grid-template-columns: 1fr; gap: 22px; }
.tools-grid { grid-template-columns: repeat(2, 1fr); }
.blog-grid { grid-template-columns: 1fr; gap: 20px; }
.work-grid { grid-template-columns: 1fr; gap: 18px; }
.growth-stats { grid-template-columns: 1fr; }
.lm-grid { grid-template-columns: 1fr; gap: 32px; }
.cta-band-inner { flex-direction: column; align-items: flex-start; }
.cta-band-inner .btn { width: 100%; justify-content: center; }
.about-grid { grid-template-columns: 1fr; gap: 40px; }
.about-stats { grid-template-columns: repeat(3, 1fr); gap: 16px; }
.about-stat .num { font-size: var(--text-2xl); }
.values-grid { grid-template-columns: 1fr; }
.service-block { grid-template-columns: 1fr; gap: 32px; padding: 40px 0; }
.service-block:nth-child(even) .sb-text { order: 0; }
.sb-features { grid-template-columns: 1fr; }
.contact-grid { grid-template-columns: 1fr; gap: 32px; }
.contact-form .field-row { grid-template-columns: 1fr; gap: 0; }
.contact-form .field-row .field { margin-bottom: 14px; }
.process-row { padding: 22px 18px; }
.footer-grid { grid-template-columns: 1fr; gap: 28px; }
.footer-bottom { flex-direction: column; align-items: flex-start; }
.section { padding-block: 56px; }
.section-head { margin-bottom: 40px; }
.announce { font-size: 12px; padding: 8px 36px 8px 16px; line-height: 1.5; }
.lead-magnet, .cta-band { padding: 56px 0; }
.project-card { flex: 0 0 calc(100% - 16px); }
.review { flex: 0 0 min(86vw, 320px); padding: 24px; }
.marquee-item { font-size: 17px; padding: 0 24px; }
.projects-arrows { display: none; }
.metrics-grid { grid-template-columns: 1fr 1fr; gap: 24px; }
.metrics-bar { padding: 36px 0; }
.metric { border-left: none; padding: 4px; }
.metric-num { font-size: 28px; }
.article-hero { margin-bottom: 32px; }
.article-body h2 { font-size: var(--text-xl); margin: 32px 0 12px; }
.page-header.has-canvas { min-height: 300px; padding-top: 56px; padding-bottom: 44px; }
.page-header.has-canvas > .container { text-align: center; }
.page-header.has-canvas h1, .page-header.has-canvas p { margin-left: auto; margin-right: auto; }
.contact-info { padding: 28px 22px; }
.navbar-logo { height: 40px; max-width: 160px; }
.footer-logo { height: 30px; }
input, select, textarea { font-size: 16px !important; }
}
@media (max-width: 540px) {
.audit-modal { padding: 0; align-items: flex-end; }
.audit-modal-card {
padding: 22px 20px 20px;
border-radius: 16px 16px 0 0;
max-height: 88vh;
transform: translateY(100%) scale(1);
}
.audit-modal.open .audit-modal-card { transform: translateY(0) scale(1); }
.audit-modal-logo { margin-bottom: 8px; }
.audit-modal-logo img { height: 44px; max-width: 150px; }
.audit-modal-header { margin-bottom: 14px; }
.audit-modal-header h2 { font-size: 1.15rem; }
.audit-modal-header p { font-size: 12px; }
.audit-field-row { grid-template-columns: 1fr; gap: 10px; }
}
@media (max-width: 480px) {
.nav { height: 60px; padding-inline: 14px; }
.nav-links.mobile-open { top: 60px; padding: 12px 16px 16px; }
:root { --mobile-nav-top: 60px; }
.nav-cta .btn-primary { padding: 8px 12px; font-size: 12px; letter-spacing: 0; }
.menu-toggle { width: 36px; height: 36px; }
.menu-toggle span { width: 18px; left: 9px; }
.navbar-logo { height: 38px; max-width: 140px; }
.container, .container-narrow { padding-inline: 14px; }
.service-card { padding: 24px 20px 20px; }
.services-grid-10 { grid-template-columns: 1fr; }
.tools-grid { grid-template-columns: 1fr 1fr; }
.blog-content h3 { font-size: var(--text-lg); }
.blog-content { padding: 20px 18px 22px; }
.review { flex: 0 0 calc(100vw - 40px); padding: 22px 20px; }
.review p { font-size: var(--text-sm); }
.marquee-track { animation-duration: 24s; }
.reviews-track { animation-duration: 50s; }
.section { padding-block: 44px; }
.lm-grid { gap: 24px; }
.lm-form { padding: 22px; }
footer { padding: 56px 0 20px; }
.footer-col h4 { font-size: 13px; }
.hero-text h1 { font-size: 32px; }
.hero-text .lead { font-size: 15px; }
.case-card .case-stats { grid-template-columns: 1fr 1fr; }
.case-mini-stats { grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.ms-num { font-size: var(--text-base); }
}
@media (max-width: 380px) {
.hero-text h1 { font-size: 28px; }
.navbar-logo { height: 34px; }
.nav-cta .btn { padding: 7px 10px; font-size: 11px; }
}
/* Touch device hover override */
@media (pointer: coarse) {
.service-card:hover,
.work-card:hover,
.blog-card:hover,
.value-card:hover,
.project-card:hover {
transform: none;
box-shadow:
0 16px 36px rgba(11, 18, 32, 0.12),
0 0 0 2px rgba(201, 168, 76, 0.35);
}
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
.reveal { opacity: 1; transform: none; }
.hero #hero-canvas { display: none; }
.scroll-progress { display: none; }
}