/* ==========================================================================
OXDIGITAL MASTER HOMEPAGE DESIGN SYSTEM (PIXEL-PERFECT RICH GLOW & SHADOWS)
Matching Reference Design Image 100%
========================================================================== */
:root {
--bg-primary: #030612;
--bg-secondary: #060b1d;
--surface-glass: rgba(8, 16, 36, 0.82);
--surface-glass-hover: rgba(12, 24, 52, 0.95);
--cyan-accent: #00d2ff;
--cyan-glow: #00e5ff;
--teal-accent: #36b3a8;
--blue-accent: #0066ff;
--blue-gradient: linear-gradient(135deg, #00d2ff 0%, #0052d4 100%);
--text-primary: #ffffff;
--text-secondary: #94a3b8;
--text-muted: #8190a6;
--border-glass: rgba(0, 210, 255, 0.22);
--border-glass-hover: rgba(0, 210, 255, 0.6);
--glow-cyan: rgba(0, 210, 255, 0.35);
--glow-cyan-strong: rgba(0, 210, 255, 0.65);
--box-shadow-card: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 20px rgba(0, 210, 255, 0.15);
--box-shadow-hover: 0 15px 40px rgba(0, 210, 255, 0.25), 0 0 30px rgba(0, 210, 255, 0.3);
--radius-sm: 8px;
--radius-md: 14px;
--radius-lg: 20px;
--radius-full: 9999px;
--font-heading: 'Outfit', 'Plus Jakarta Sans', sans-serif;
--font-body: 'Plus Jakarta Sans', sans-serif;
--container-max: 1320px;
--header-height: 84px;
--transition-smooth: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
background-color: var(--bg-primary);
color: var(--text-primary);
font-family: var(--font-body);
-webkit-font-smoothing: antialiased;
}
body {
overflow-x: hidden;
background-color: var(--bg-primary);
color: var(--text-primary);
line-height: 1.6;
}
/* Pointer Cursor */
.custom-cursor {
position: fixed;
width: 8px;
height: 8px;
background-color: var(--cyan-accent);
border-radius: 50%;
pointer-events: none;
z-index: 99999;
transform: translate(-50%, -50%);
box-shadow: 0 0 14px var(--cyan-glow);
}
.custom-cursor-follower {
position: fixed;
width: 36px;
height: 36px;
border: 1px solid rgba(0, 210, 255, 0.6);
border-radius: 50%;
pointer-events: none;
z-index: 99998;
transform: translate(-50%, -50%);
transition: transform 0.15s ease-out, width 0.2s, height 0.2s;
box-shadow: 0 0 16px rgba(0, 210, 255, 0.2);
}
.ox-container {
max-width: var(--container-max);
margin: 0 auto;
padding: 0 24px;
}
/* Typography & Glow Pills */
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-heading);
color: var(--text-primary);
font-weight: 700;
}
.ox-gradient-text {
background: linear-gradient(135deg, #00d2ff 0%, #0072ff 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-shadow: 0 0 30px rgba(0, 210, 255, 0.4);
}
.ox-pill {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 18px;
background: rgba(0, 210, 255, 0.08);
border: 1px solid rgba(0, 210, 255, 0.3);
border-radius: var(--radius-full);
color: var(--cyan-accent);
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 1.5px;
text-transform: uppercase;
margin-bottom: 20px;
box-shadow: 0 0 16px rgba(0, 210, 255, 0.15);
}
.ox-section-title {
font-size: 2.2rem;
font-weight: 800;
line-height: 1.2;
margin-bottom: 16px;
text-transform: uppercase;
letter-spacing: -0.5px;
}
/* Buttons */
.ox-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 10px 22px;
height: 42px;
border-radius: var(--radius-full);
font-family: var(--font-heading);
font-weight: 700;
font-size: 0.825rem;
letter-spacing: 0.5px;
text-decoration: none;
transition: var(--transition-smooth);
cursor: pointer;
border: none;
outline: none;
line-height: 1;
white-space: nowrap;
}
.ox-btn-primary {
background: linear-gradient(135deg, #00d2ff 0%, #0052d4 100%);
color: #ffffff;
box-shadow: 0 0 28px rgba(0, 210, 255, 0.5);
}
.ox-btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 0 40px rgba(0, 210, 255, 0.8);
}
.ox-btn-outline {
background: rgba(8, 16, 36, 0.75);
color: #ffffff;
border: 1px solid rgba(255, 255, 255, 0.2);
backdrop-filter: blur(12px);
}
/* Custom SVG Icon Utilities */
.ox-icon-img {
width: 28px;
height: 28px;
object-fit: contain;
display: inline-block;
vertical-align: middle;
filter: drop-shadow(0 0 8px rgba(0, 210, 255, 0.5));
}
.ox-node-icon {
width: 42px;
height: 42px;
border-radius: 12px;
}
.ox-node-icon .ox-icon-img {
width: 26px;
height: 26px;
}
.ox-card-icon-halo {
width: 64px;
height: 64px;
}
.ox-card-icon-halo .ox-icon-img {
width: 38px;
height: 38px;
}
.ox-step-circle {
width: 72px;
height: 72px;
}
.ox-step-circle .ox-icon-img {
width: 38px;
height: 38px;
}
.ox-partner-icon-img {
height: 38px;
width: auto;
object-fit: contain;
filter: drop-shadow(0 0 10px rgba(0, 210, 255, 0.3));
}
/* Header */
.ox-header {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: var(--header-height);
z-index: 1000;
transition: var(--transition-smooth);
background: rgba(1, 3, 10, 0.88);
backdrop-filter: blur(24px);
border-bottom: 1px solid transparent;
background-clip: padding-box;
box-shadow: 0 1px 0 0 rgba(0, 210, 255, 0.18);
}
.ox-header.scrolled {
background: rgba(3, 6, 18, 0.96);
border-bottom-color: rgba(0, 210, 255, 0.3);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7);
}
.ox-header-inner {
display: flex;
align-items: center;
justify-content: space-between;
height: 100%;
}
.ox-logo-img {
height: 38px;
max-height: 38px;
width: auto;
object-fit: contain;
border-radius: 6px;
transition: var(--transition-smooth);
filter: drop-shadow(0 0 8px rgba(0, 210, 255, 0.3));
}
.ox-logo-img:hover {
filter: drop-shadow(0 0 16px rgba(0, 210, 255, 0.7));
transform: scale(1.03);
}
.ox-header .ox-btn {
padding: 8px 18px;
height: 38px;
font-size: 0.775rem;
letter-spacing: 0.5px;
box-shadow: 0 0 16px rgba(0, 210, 255, 0.4);
}
.ox-nav-list {
display: flex;
align-items: center;
gap: 32px;
list-style: none;
}
.ox-nav-link {
position: relative;
color: var(--text-secondary);
text-decoration: none;
font-size: 0.925rem;
font-weight: 500;
transition: var(--transition-smooth);
padding-bottom: 4px;
}
.ox-nav-link::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 1.5px;
background: linear-gradient(90deg, #00d2ff, #0052d4);
border-radius: 2px;
transition: width 0.3s ease;
box-shadow: 0 0 8px rgba(0, 210, 255, 0.6);
}
.ox-nav-link:hover::after, .ox-nav-link.active::after { width: 100%; }
.ox-nav-link:hover, .ox-nav-link.active {
color: #ffffff;
text-shadow: 0 0 12px var(--cyan-accent);
}
.ox-mobile-toggle { display:none; width:40px; height:40px; padding:9px; border:1px solid rgba(0,210,255,.35); border-radius:8px; background:rgba(0,210,255,.06); cursor:pointer; }
.ox-mobile-toggle span { display:block; width:100%; height:2px; margin:4px 0; border-radius:2px; background:#fff; transition:transform .25s ease,opacity .25s ease; }
.ox-mobile-toggle.open span:nth-child(1) { transform:translateY(6px) rotate(45deg); }
.ox-mobile-toggle.open span:nth-child(2) { opacity:0; }
.ox-mobile-toggle.open span:nth-child(3) { transform:translateY(-6px) rotate(-45deg); }
@media (max-width:900px) {
.ox-header-actions > .ox-btn { display:none; }
.ox-mobile-toggle { display:block; }
.ox-nav { position:absolute; top:var(--header-height); left:0; right:0; display:none; padding:18px 20px 24px; background:rgba(2,7,18,.98); border-bottom:1px solid rgba(0,210,255,.28); box-shadow:0 18px 35px rgba(0,0,0,.55); }
.ox-nav.active { display:block; }
.ox-nav-list { flex-direction:column; align-items:stretch; gap:0; }
.ox-nav-link { display:block; padding:13px 6px; }
}
/* Hero Section */
.ox-hero-section {
position: relative;
min-height: calc(100vh - 75px);
padding-top: calc(var(--header-height) + 15px);
padding-bottom: 25px;
display: flex;
align-items: center;
overflow: hidden;
background: radial-gradient(circle at 68% 35%, rgba(0, 210, 255, 0.09) 0%, rgba(1, 3, 10, 1) 65%);
box-sizing: border-box;
}
/* ── Tech Scanline Grid Overlay ─────────────────────────────────────────── */
.ox-hero-scanlines {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 0;
background-image:
linear-gradient(rgba(0,210,255,0.025) 1px, transparent 1px),
linear-gradient(90deg, rgba(0,210,255,0.025) 1px, transparent 1px);
background-size: 60px 60px;
animation: scanlineShift 20s linear infinite;
}
@keyframes scanlineShift {
0% { background-position: 0 0, 0 0; }
100% { background-position: 60px 60px, 60px 60px; }
}
/* ── SVG Data-Flow Lines ────────────────────────────────────────────────── */
.ox-dataflow-svg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 1;
}
.ox-df-path {
stroke: rgba(0, 210, 255, 0.25);
stroke-width: 1.5;
stroke-dasharray: 6 10;
animation: dashFlow 2s linear infinite;
}
@keyframes dashFlow {
to { stroke-dashoffset: -32; }
}
.ox-df-dot {
fill: #00eaff;
filter: drop-shadow(0 0 6px #00eaff) drop-shadow(0 0 12px #0066ff);
}
.ox-df-dot-sm {
fill: rgba(0, 210, 255, 0.6);
}
/* ── Staggered Reveal Animation ─────────────────────────────────────────── */
.ox-reveal {
opacity: 0;
transform: translateY(24px);
animation: revealUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
animation-delay: var(--delay, 0s);
}
/* Above-the-fold copy must be paintable immediately. Delaying opacity on the
hero makes the heading/logo become a late LCP candidate on slow mobiles. */
.ox-hero-content .ox-reveal {
opacity: 1;
transform: none;
animation: none;
}
@keyframes revealUp {
to { opacity: 1; transform: translateY(0); }
}
/* ── Animated Background Glow Orbs ─────────────────────────────────────── */
.ox-hero-orb {
position: absolute;
border-radius: 50%;
filter: blur(80px);
pointer-events: none;
animation: orbPulse 8s ease-in-out infinite alternate;
}
.ox-hero-orb-1 {
width: 500px; height: 500px;
background: rgba(0, 210, 255, 0.07);
top: -100px; left: -80px;
animation-delay: 0s;
}
.ox-hero-orb-2 {
width: 400px; height: 400px;
background: rgba(0, 82, 212, 0.09);
bottom: -80px; right: 30%;
animation-delay: 3s;
}
.ox-hero-orb-3 {
width: 300px; height: 300px;
background: rgba(123, 47, 255, 0.06);
top: 40%; right: 10%;
animation-delay: 5s;
}
@keyframes orbPulse {
0% { opacity: 0.6; transform: scale(1); }
100% { opacity: 1; transform: scale(1.15); }
}
/* ── Shimmer "ALL CONNECTED." Text ─────────────────────────────────────── */
.ox-hero-shimmer-text {
display: inline-block;
background: linear-gradient(
100deg,
#00d2ff 0%,
#ffffff 35%,
#00d2ff 50%,
#0052d4 65%,
#00d2ff 100%
);
background-size: 250% auto;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
animation: shimmerMove 3s linear infinite;
}
@keyframes shimmerMove {
0% { background-position: 0% center; }
100% { background-position: 250% center; }
}
/* ── Floating Neon Stat Badges ──────────────────────────────────────────── */
.ox-stat-badge {
position: absolute;
padding: 12px 18px;
background: rgba(5, 12, 30, 0.85);
border: 1px solid rgba(0, 210, 255, 0.35);
border-radius: 14px;
backdrop-filter: blur(16px);
box-shadow: 0 0 24px rgba(0, 210, 255, 0.18), inset 0 1px 0 rgba(255,255,255,0.06);
z-index: 10;
text-align: center;
min-width: 110px;
animation: floatBadge 5s ease-in-out infinite alternate;
}
.ox-stat-badge-1 { top: 18%; left: 6%; animation-delay: 0s; }
.ox-stat-badge-2 { top: 18%; right: 4%; animation-delay: 1.8s; }
.ox-stat-badge-3 { bottom: 22%; left: 50%; transform: translateX(-50%); animation-delay: 3.5s; }
.ox-stat-num {
font-size: 1.5rem;
font-weight: 800;
font-family: var(--font-heading);
background: linear-gradient(135deg, #00d2ff, #0072ff);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
line-height: 1;
margin-bottom: 4px;
}
.ox-stat-label {
font-size: 0.72rem;
color: var(--text-muted);
font-weight: 600;
letter-spacing: 0.5px;
text-transform: uppercase;
}
@keyframes floatBadge {
0% { transform: translateY(0px); }
100% { transform: translateY(-10px); }
}
/* Override translateX on badge-3 float */
.ox-stat-badge-3 {
animation: floatBadgeCenter 5s ease-in-out infinite alternate;
animation-delay: 3.5s;
}
@keyframes floatBadgeCenter {
0% { transform: translateX(-50%) translateY(0px); }
100% { transform: translateX(-50%) translateY(-10px); }
}
/* Hero uses full-width layout — no container constraint */
.ox-hero-section > .ox-container {
width: 100%;
max-width: 100%;
padding: 0;
}
.ox-hero-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0;
align-items: center;
width: 100%;
}
/* Left text column gets padding */
.ox-hero-grid > :first-child {
padding-left: 60px;
padding-right: 30px;
}
.ox-hero-h1 {
font-size: clamp(2.2rem, 3.8vw, 3.2rem);
font-weight: 800;
line-height: 1.08;
letter-spacing: -1px;
margin-bottom: 12px;
text-transform: uppercase;
}
/* Each headline word styled differently */
.ox-hero-h1 .ox-word-1 {
color: #ffffff;
text-shadow: 0 0 40px rgba(255,255,255,0.15);
}
.ox-hero-h1 .ox-word-2 {
background: linear-gradient(135deg, #e0f7ff 0%, #7dd8ff 60%, #00b4d8 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-shadow: none;
filter: drop-shadow(0 0 20px rgba(0, 180, 216, 0.35));
}
.ox-hero-h1 .ox-word-3 {
background: linear-gradient(135deg, #00eaff 0%, #0066ff 50%, #7b2fff 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-shadow: none;
filter: drop-shadow(0 0 24px rgba(0, 234, 255, 0.5));
}
.ox-hero-desc {
font-size: 1.05rem;
color: var(--text-secondary);
margin-bottom: 32px;
max-width: 520px;
line-height: 1.6;
}
.ox-hero-actions {
display: flex;
align-items: center;
gap: 16px;
margin-bottom: 40px;
}
.ox-hero-trust {
display: flex;
align-items: center;
gap: 16px;
padding-top: 20px;
border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.ox-avatar-group { display: flex; align-items: center; }
.ox-avatar {
width: 38px;
height: 38px;
border-radius: 50%;
border: 2px solid var(--bg-primary);
object-fit: cover;
margin-left: -10px;
}
.ox-avatar:first-child { margin-left: 0; }
.ox-rating-stars { color: #3b82f6; font-size: 0.9rem; display: flex; gap: 2px; }
.ox-rating-text { font-size: 0.85rem; color: var(--text-secondary); font-weight: 600; }
/* 3D Stage & Floating Nodes matching Reference Image */
.ox-hero-3d-stage {
position: relative;
width: 100%;
height: 100%;
min-height: 440px;
display: flex;
align-items: center;
justify-content: center;
overflow: visible;
}
.ox-hero-logo-video {
display: none;
}
.ox-hero-globe-video {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 103%;
height: 103%;
object-fit: contain;
border-radius: 0;
pointer-events: none;
mix-blend-mode: screen;
}
#hero3dCanvas {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.ox-hero-pedestal-bg {
position: absolute;
width: 380px;
height: 380px;
border-radius: 50%;
background: radial-gradient(circle, rgba(0, 234, 255, 0.10) 0%, rgba(0, 102, 255, 0.06) 50%, transparent 75%);
border: 1px solid rgba(0, 234, 255, 0.35);
box-shadow:
inset 0 0 60px rgba(0, 234, 255, 0.15),
0 0 80px rgba(0, 102, 255, 0.25),
0 0 140px rgba(123, 47, 255, 0.12);
pointer-events: none;
}
.ox-service-node {
position: absolute;
padding: 10px 16px;
background: rgba(8, 16, 36, 0.92);
border: 1px solid var(--border-glass);
border-radius: var(--radius-md);
backdrop-filter: blur(14px);
box-shadow: var(--box-shadow-card);
display: flex;
align-items: center;
gap: 12px;
z-index: 10;
transition: var(--transition-smooth);
animation: floatNode 6s ease-in-out infinite alternate;
}
.ox-service-node:hover {
border-color: var(--cyan-accent);
box-shadow: var(--box-shadow-hover);
transform: scale(1.05);
}
.ox-node-icon {
width: 36px;
height: 36px;
background: rgba(0, 210, 255, 0.12);
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
color: var(--cyan-accent);
flex-shrink: 0;
box-shadow: 0 0 12px rgba(0, 210, 255, 0.2);
}
.ox-node-title { font-size: 0.85rem; font-weight: 700; color: #ffffff; }
.ox-node-sub { font-size: 0.725rem; color: var(--text-muted); }
/*
* 6 Service Node Orbital Layout
* Stage height: 580px
* Layout:
* Top center -> Google Ads
* Left upper -> Social Media Marketing (aligned with top-right: Website Dev)
* Left lower -> Local SEO (aligned with bottom-right: Branding)
* Bottom center -> Lead Generation
*
* Vertical positions (% of 580px stage):
* Top = 2% (~12px from top)
* Upper = 22% (~128px)
* Lower = 62% (~360px)
* Bottom = 88% (~510px)
*
* Horizontal: left/right side cards start just outside globe (left:-2%, right:-2%)
* Center cards use left:50% + translateX(-50%)
*/
/* Top Center */
.node-google-ads {
top: 2%;
left: 50%;
transform: translateX(-50%);
animation: floatNodeCenter 6s ease-in-out infinite alternate;
animation-delay: 0s;
}
/* Left Upper */
.node-social-media {
top: 22%;
left: -2%;
animation: floatNode 6s ease-in-out infinite alternate;
animation-delay: 1s;
}
/* Right Upper */
.node-web-dev {
top: 22%;
right: -2%;
animation: floatNode 6s ease-in-out infinite alternate;
animation-delay: 2s;
}
/* Left Lower */
.node-local-seo {
top: 62%;
left: -2%;
animation: floatNode 6s ease-in-out infinite alternate;
animation-delay: 1.5s;
}
/* Right Lower */
.node-branding {
top: 62%;
right: -2%;
animation: floatNode 6s ease-in-out infinite alternate;
animation-delay: 0.5s;
}
/* Bottom Center */
.node-lead-gen {
bottom: 2%;
left: 50%;
transform: translateX(-50%);
animation: floatNodeCenter 6s ease-in-out infinite alternate;
animation-delay: 2.5s;
}
/* Standard float animation for side cards */
@keyframes floatNode {
0% { transform: translateY(0px); }
100% { transform: translateY(-10px); }
}
/* Float animation for centered cards: preserves translateX(-50%) */
@keyframes floatNodeCenter {
0% { transform: translateX(-50%) translateY(0px); }
100% { transform: translateX(-50%) translateY(-10px); }
}
/* ═══════════════════════════════════════════════════════
SCROLLING MARQUEE STRIP
═══════════════════════════════════════════════════════ */
.ox-marquee-strip {
width: 100%;
overflow: hidden;
background: rgba(0,210,255,0.04);
border-top: 1px solid rgba(0,210,255,0.15);
border-bottom: 1px solid rgba(0,210,255,0.15);
padding: 14px 0;
position: relative;
z-index: 10;
}
.ox-marquee-strip::before,
.ox-marquee-strip::after {
content: '';
position: absolute;
top: 0; bottom: 0;
width: 120px;
z-index: 2;
pointer-events: none;
}
.ox-marquee-strip::before {
left: 0;
background: linear-gradient(90deg, var(--bg-primary), transparent);
}
.ox-marquee-strip::after {
right: 0;
background: linear-gradient(-90deg, var(--bg-primary), transparent);
}
.ox-marquee-track {
display: flex;
align-items: center;
gap: 32px;
white-space: nowrap;
animation: marqueeScroll 28s linear infinite;
width: max-content;
}
.ox-marquee-track span {
font-size: 0.8rem;
font-weight: 800;
letter-spacing: 3px;
color: rgba(0,210,255,0.7);
font-family: var(--font-heading);
text-transform: uppercase;
}
.ox-mq-dot {
color: rgba(0,210,255,0.35) !important;
font-size: 0.6rem !important;
letter-spacing: 0 !important;
}
@keyframes marqueeScroll {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
/* ═══════════════════════════════════════════════════════
GIANT STATS BAND
═══════════════════════════════════════════════════════ */
.ox-stats-band {
width: 100%;
background: linear-gradient(135deg, rgba(0,8,24,1) 0%, rgba(0,30,80,0.6) 50%, rgba(0,8,24,1) 100%);
border-top: 1px solid rgba(0,210,255,0.2);
border-bottom: 1px solid rgba(0,210,255,0.2);
padding: 56px 0;
position: relative;
overflow: hidden;
}
.ox-stats-band::before {
content: '';
position: absolute;
inset: 0;
background-image: linear-gradient(rgba(0,210,255,0.025) 1px, transparent 1px),
linear-gradient(90deg, rgba(0,210,255,0.025) 1px, transparent 1px);
background-size: 40px 40px;
pointer-events: none;
}
.ox-stats-band-inner {
max-width: 1320px;
margin: 0 auto;
padding: 0 24px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 0;
position: relative;
z-index: 1;
}
.ox-stats-band-item {
flex: 1;
text-align: center;
padding: 0 20px;
}
.ox-sb-num {
font-size: clamp(2.8rem, 5vw, 4.5rem);
font-weight: 900;
font-family: var(--font-heading);
background: linear-gradient(135deg, #00eaff 0%, #ffffff 50%, #00d2ff 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
line-height: 1;
margin-bottom: 10px;
filter: drop-shadow(0 0 20px rgba(0,210,255,0.5));
}
.ox-sb-label {
font-size: 0.78rem;
font-weight: 700;
color: rgba(255,255,255,0.72);
text-transform: uppercase;
letter-spacing: 2px;
line-height: 1.5;
}
.ox-stats-band-divider {
width: 1px;
height: 80px;
background: linear-gradient(180deg, transparent, rgba(0,210,255,0.3), transparent);
flex-shrink: 0;
}
/* ═══════════════════════════════════════════════════════
GIANT SECTION HEADINGS
═══════════════════════════════════════════════════════ */
.ox-services-heading {
text-align: center;
margin-bottom: 56px;
}
.ox-giant-heading {
font-size: clamp(2.4rem, 5vw, 4rem);
font-weight: 900;
line-height: 1.1;
letter-spacing: -2px;
text-transform: uppercase;
color: #ffffff;
margin-top: 16px;
}
.ox-gh-accent {
background: linear-gradient(135deg, #00eaff 0%, #0066ff 50%, #7b2fff 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
filter: drop-shadow(0 0 24px rgba(0,210,255,0.4));
}
/* ═══════════════════════════════════════════════════════
PER-CARD DYNAMIC ACCENT COLOR via CSS custom property
═══════════════════════════════════════════════════════ */
.ox-service-card-sm[data-accent] {
--card-accent: #00d2ff;
}
.ox-service-card-sm[data-accent]:hover {
border-color: color-mix(in srgb, var(--card-accent) 60%, transparent);
box-shadow: 0 20px 50px rgba(0,0,0,0.4),
0 0 30px color-mix(in srgb, var(--card-accent) 20%, transparent);
}
.ox-service-card-sm[data-accent]:hover .ox-card-icon-halo {
border-color: color-mix(in srgb, var(--card-accent) 70%, transparent);
box-shadow: 0 0 28px color-mix(in srgb, var(--card-accent) 45%, transparent);
}
.ox-service-card-sm[data-accent]:hover .ox-card-link {
color: var(--card-accent);
text-shadow: 0 0 12px var(--card-accent);
}
/* ═══════════════════════════════════════════════════════
SERVICES SECTION — Premium glassmorphism cards
═══════════════════════════════════════════════════════ */
.ox-services-section {
padding: 100px 0;
background: var(--bg-secondary);
position: relative;
}
.ox-services-section::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(0,210,255,0.5), transparent);
}
.ox-services-6col-grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 16px;
}
.ox-service-card-sm {
background: rgba(8, 14, 32, 0.7);
border: 1px solid rgba(0, 210, 255, 0.12);
border-radius: 16px;
padding: 28px 16px;
transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
display: flex;
flex-direction: column;
text-align: center;
align-items: center;
position: relative;
overflow: hidden;
backdrop-filter: blur(12px);
}
.ox-service-card-sm::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(0,210,255,0.06) 0%, transparent 60%);
opacity: 0;
transition: opacity 0.4s ease;
border-radius: 16px;
}
.ox-service-card-sm::after {
content: '';
position: absolute;
bottom: 0; left: 0; right: 0;
height: 2px;
background: linear-gradient(90deg, #00d2ff, #0052d4, #7b2fff);
transform: scaleX(0);
transition: transform 0.4s ease;
transform-origin: left;
}
.ox-service-card-sm:hover {
border-color: rgba(0, 210, 255, 0.4);
transform: translateY(-8px);
box-shadow: 0 20px 50px rgba(0,0,0,0.4), 0 0 30px rgba(0,210,255,0.12);
}
.ox-service-card-sm:hover::before { opacity: 1; }
.ox-service-card-sm:hover::after { transform: scaleX(1); }
.ox-card-icon-halo {
width: 60px;
height: 60px;
border-radius: 50%;
background: radial-gradient(circle, rgba(0,210,255,0.15) 0%, rgba(0,82,212,0.08) 100%);
border: 1px solid rgba(0, 210, 255, 0.3);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 18px;
box-shadow: 0 0 24px rgba(0,210,255,0.2), inset 0 0 12px rgba(0,210,255,0.08);
transition: all 0.4s ease;
}
.ox-service-card-sm:hover .ox-card-icon-halo {
box-shadow: 0 0 36px rgba(0,210,255,0.45), inset 0 0 20px rgba(0,210,255,0.15);
border-color: rgba(0,210,255,0.6);
}
.ox-service-card-title-sm {
font-size: 0.95rem;
font-weight: 700;
margin-bottom: 10px;
color: #fff;
}
.ox-service-card-desc-sm {
font-size: 0.8rem;
color: var(--text-secondary);
margin-bottom: 18px;
line-height: 1.55;
flex-grow: 1;
}
.ox-card-link {
display: inline-flex;
align-items: center;
gap: 6px;
color: var(--cyan-accent);
font-size: 0.78rem;
font-weight: 700;
text-decoration: none;
letter-spacing: 0.5px;
text-transform: uppercase;
transition: all 0.3s ease;
}
.ox-card-link:hover {
text-shadow: 0 0 12px var(--cyan-accent);
gap: 10px;
}
/* ═══════════════════════════════════════════════════════
WHY CHOOSE SECTION — Premium stats & check items
═══════════════════════════════════════════════════════ */
.ox-why-section {
padding: 100px 0;
background: var(--bg-primary);
position: relative;
}
.ox-why-section::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(0,210,255,0.4), transparent);
}
.ox-why-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: center;
}
.ox-check-list {
list-style: none;
display: flex;
flex-direction: column;
gap: 14px;
margin-top: 24px;
}
.ox-check-item {
display: flex;
align-items: center;
gap: 14px;
font-size: 0.95rem;
font-weight: 600;
padding: 10px 14px;
background: rgba(0,210,255,0.04);
border: 1px solid rgba(0,210,255,0.1);
border-radius: 10px;
transition: all 0.3s ease;
}
.ox-check-item:hover {
background: rgba(0,210,255,0.09);
border-color: rgba(0,210,255,0.3);
transform: translateX(6px);
}
/* ── Why section restructured layout ──────────────── */
.ox-why-left {
display: flex;
flex-direction: column;
}
.ox-why-grid { align-items: stretch; }
.ox-why-reasons {
display: flex;
flex-direction: column;
gap: 12px;
flex: 1;
}
.ox-reason-item {
display: flex;
align-items: flex-start;
gap: 18px;
padding: 14px 18px;
background: rgba(0,210,255,0.03);
border: 1px solid rgba(0,210,255,0.08);
border-radius: 12px;
transition: all 0.35s ease;
}
.ox-reason-item:hover {
background: rgba(0,210,255,0.07);
border-color: rgba(0,210,255,0.25);
transform: translateX(6px);
box-shadow: -4px 0 0 0 rgba(0,210,255,0.5);
}
.ox-reason-num {
font-size: 1.6rem;
font-weight: 900;
font-family: var(--font-heading);
background: linear-gradient(135deg, #00eaff, #0052d4);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
line-height: 1;
flex-shrink: 0;
min-width: 38px;
}
.ox-reason-title {
font-size: 0.95rem;
font-weight: 700;
color: #ffffff;
margin-bottom: 3px;
}
.ox-reason-desc {
font-size: 0.8rem;
color: var(--text-secondary);
line-height: 1.5;
}
/* Full-width stats strip at bottom of why section */
.ox-why-stats-strip {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 48px;
padding: 32px 40px;
background: rgba(0,210,255,0.04);
border: 1px solid rgba(0,210,255,0.12);
border-radius: 20px;
position: relative;
overflow: hidden;
}
.ox-why-stats-strip::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 2px;
background: linear-gradient(90deg, #00d2ff, #0052d4, #7b2fff);
}
.ox-why-stat {
flex: 1;
text-align: center;
padding: 0 16px;
}
.ox-wstat-icon {
width: 32px !important;
height: 32px !important;
margin-bottom: 10px;
opacity: 0.7;
}
.ox-why-stat-sep {
width: 1px;
height: 60px;
background: linear-gradient(180deg, transparent, rgba(0,210,255,0.25), transparent);
flex-shrink: 0;
}
.ox-stats-grid-2x2 {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
margin-top: 32px;
}
.ox-stat-box {
background: rgba(8,14,32,0.8);
border: 1px solid rgba(0,210,255,0.15);
padding: 20px;
border-radius: 14px;
position: relative;
overflow: hidden;
transition: all 0.3s ease;
}
.ox-stat-box::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 2px;
background: linear-gradient(90deg, #00d2ff, #0052d4);
opacity: 0.6;
}
.ox-stat-box:hover {
border-color: rgba(0,210,255,0.35);
box-shadow: 0 8px 32px rgba(0,210,255,0.1);
transform: translateY(-3px);
}
.ox-stat-number {
font-size: 2rem;
font-weight: 800;
background: linear-gradient(135deg, #00eaff, #0072ff);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
font-family: var(--font-heading);
line-height: 1;
margin-bottom: 4px;
}
.ox-stat-label { font-size: 0.8rem; color: var(--text-secondary); margin-top: 4px; }
/* Chart card */
.ox-chart-card {
background: rgba(8,14,32,0.85);
border: 1px solid rgba(0,210,255,0.2);
border-radius: 20px;
padding: 32px;
position: relative;
box-shadow: 0 0 60px rgba(0,82,212,0.15), 0 20px 40px rgba(0,0,0,0.4);
}
.ox-chart-trend-overlay {
position: absolute;
top: 70px; left: 40px; right: 40px; bottom: 60px;
pointer-events: none;
z-index: 5;
}
.ox-trend-line-svg {
width: 100%; height: 100%;
filter: drop-shadow(0 0 10px #00d2ff);
}
.ox-chart-bars {
display: flex;
align-items: flex-end;
justify-content: space-between;
height: 200px;
gap: 6px;
padding-top: 20px;
border-bottom: 1px solid rgba(255,255,255,0.08);
position: relative;
z-index: 2;
}
.ox-bar-wrapper {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
height: 100%;
justify-content: flex-end;
}
.ox-bar {
width: 100%;
max-width: 22px;
background: linear-gradient(180deg, #00eaff 0%, rgba(0,82,212,0.35) 100%);
border-radius: 4px 4px 0 0;
transition: height 1s ease-out;
cursor: pointer;
box-shadow: 0 0 12px rgba(0,210,255,0.25);
}
.ox-bar:hover {
background: linear-gradient(180deg, #ffffff 0%, #00d2ff 100%);
box-shadow: 0 0 20px var(--cyan-accent);
}
.ox-bar-month { font-size: 0.68rem; color: var(--text-muted); margin-top: 8px; }
/* ═══════════════════════════════════════════════════════
PROCESS SECTION — Premium stepped timeline
═══════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════
PROCESS SECTION — Horizontal Expanding Accordion
═══════════════════════════════════════════════════════ */
.ox-process-section {
padding: 100px 0 60px;
background: var(--bg-secondary);
position: relative;
overflow: hidden;
}
.ox-process-header {
text-align: center;
margin-bottom: 24px;
}
.ox-accordion-wrap {
display: flex;
width: 100%;
height: 340px;
gap: 8px;
padding: 0 40px;
}
.ox-acc-panel {
flex: 1;
position: relative;
background: rgba(5,10,25,0.85);
border: 1px solid rgba(255,255,255,0.06);
border-radius: 20px;
overflow: hidden;
transition: flex 0.6s cubic-bezier(0.22,1,0.36,1),
background 0.4s ease, border-color 0.4s ease;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
}
.ox-acc-panel:hover {
flex: 4;
background: rgba(10,15,35,0.9);
border-color: color-mix(in srgb, var(--acc-color) 40%, transparent);
}
.ox-acc-panel::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(var(--acc-deg), color-mix(in srgb, var(--acc-color) 15%, transparent), transparent 70%);
opacity: 0;
transition: opacity 0.6s ease;
}
.ox-acc-panel:hover::before {
opacity: 1;
}
.ox-acc-num {
position: absolute;
top: 20px;
left: 20px;
font-size: 2rem;
font-weight: 900;
font-family: var(--font-heading);
color: var(--acc-color);
opacity: 0.3;
transition: opacity 0.6s ease, transform 0.6s ease;
}
.ox-acc-panel:hover .ox-acc-num {
opacity: 0.8;
transform: scale(1.2) translate(4px, 4px);
}
.ox-acc-icon {
display: flex;
align-items: center;
justify-content: center;
position: absolute;
/* default: centered in narrow panel */
top: 50%; left: 50%;
transform: translate(-50%, -50%);
transition: all 0.55s cubic-bezier(0.22,1,0.36,1);
opacity: 1;
}
.ox-acc-icon img {
width: 40px !important;
height: 40px !important;
filter: drop-shadow(0 0 6px var(--acc-color));
transition: width 0.55s cubic-bezier(0.22,1,0.36,1),
height 0.55s cubic-bezier(0.22,1,0.36,1),
filter 0.4s ease;
}
/* On expand: icon moves BELOW number, large, no circle */
.ox-acc-panel:hover .ox-acc-icon {
top: 78px;
left: 28px;
transform: translate(0, 0);
opacity: 1;
}
.ox-acc-panel:hover .ox-acc-icon img {
width: 96px !important;
height: 96px !important;
filter: drop-shadow(0 0 16px var(--acc-color)) drop-shadow(0 0 32px color-mix(in srgb, var(--acc-color) 50%, transparent));
}
.ox-acc-content {
position: absolute;
left: 28px;
right: 20px;
bottom: 20px;
top: 186px; /* num(~44px) + gap(14px) + icon(96px) + gap(12px) */
opacity: 0;
transform: translateY(20px);
transition: all 0.5s cubic-bezier(0.22,1,0.36,1) 0.1s;
pointer-events: none;
}
.ox-acc-panel:hover .ox-acc-content {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
.ox-acc-title {
font-size: 1.4rem;
font-weight: 800;
font-family: var(--font-heading);
color: #fff;
margin-bottom: 8px;
}
.ox-acc-desc {
font-size: 0.85rem;
color: var(--text-secondary);
line-height: 1.55;
max-width: 90%;
}
.ox-acc-label {
position: absolute;
bottom: 28px;
font-size: 0.85rem;
font-weight: 800;
font-family: var(--font-heading);
color: #fff;
transform: rotate(-90deg) translateX(50%);
transform-origin: center;
opacity: 1;
transition: opacity 0.4s ease;
white-space: nowrap;
letter-spacing: 2px;
}
.ox-acc-panel:hover .ox-acc-label {
opacity: 0;
}
/* Keyword tag pills */
.ox-acc-tags {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 10px;
}
.ox-acc-tags span {
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.5px;
color: var(--acc-color);
background: color-mix(in srgb, var(--acc-color) 10%, transparent);
border: 1px solid color-mix(in srgb, var(--acc-color) 25%, transparent);
border-radius: 20px;
padding: 3px 10px;
white-space: nowrap;
}
/* ═══════════════════════════════════════════════════════
CASE STUDIES — Premium gradient border cards
═══════════════════════════════════════════════════════ */
.ox-cases-section {
padding: 100px 0;
background: var(--bg-primary);
position: relative;
}
.ox-cases-section::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(0,210,255,0.4), transparent);
}
.ox-cases-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.ox-case-card {
background: rgba(8,14,32,0.8);
border-radius: 20px;
padding: 32px;
display: flex;
flex-direction: column;
justify-content: space-between;
transition: all 0.4s cubic-bezier(0.22,1,0.36,1);
position: relative;
overflow: hidden;
border: 1px solid rgba(0,210,255,0.12);
}
.ox-case-card::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(0,210,255,0.05) 0%, rgba(123,47,255,0.05) 100%);
opacity: 0;
transition: opacity 0.4s ease;
}
.ox-case-card::after {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
background: linear-gradient(90deg, #00d2ff, #0052d4, #7b2fff);
border-radius: 20px 20px 0 0;
}
.ox-case-card:hover {
transform: translateY(-10px);
border-color: rgba(0,210,255,0.35);
box-shadow: 0 30px 60px rgba(0,0,0,0.4), 0 0 40px rgba(0,210,255,0.1);
}
.ox-case-card:hover::before { opacity: 1; }
.ox-case-brand {
font-size: 1.35rem;
font-weight: 800;
letter-spacing: 2px;
background: linear-gradient(135deg, #ffffff, #a0d8ff);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.ox-case-category { font-size: 0.7rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 12px; }
.ox-case-metric {
font-size: 2.6rem;
font-weight: 900;
font-family: var(--font-heading);
background: linear-gradient(135deg, #00eaff 0%, #0066ff 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
filter: drop-shadow(0 0 16px rgba(0,210,255,0.4));
margin-top: 8px;
}
/* ═══════════════════════════════════════════════════════
TESTIMONIALS — Premium quote cards with star ratings
═══════════════════════════════════════════════════════ */
.ox-testimonials-section {
padding: 100px 0;
background: var(--bg-secondary);
position: relative;
}
.ox-testimonials-section::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(0,210,255,0.4), transparent);
}
.ox-testimonials-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.ox-testimonial-card {
background: rgba(8,14,32,0.8);
border: 1px solid rgba(0,210,255,0.12);
border-radius: 20px;
padding: 32px;
font-size: 0.92rem;
color: var(--text-secondary);
line-height: 1.7;
transition: all 0.4s ease;
position: relative;
overflow: hidden;
}
.ox-testimonial-card::before {
content: '\201C';
position: absolute;
top: 16px; left: 24px;
font-size: 5rem;
font-family: Georgia, serif;
background: linear-gradient(135deg, #00d2ff, #0052d4);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
line-height: 1;
opacity: 0.4;
pointer-events: none;
}
.ox-testimonial-card::after {
content: '';
position: absolute;
bottom: 0; left: 0; right: 0;
height: 2px;
background: linear-gradient(90deg, #00d2ff, #7b2fff);
transform: scaleX(0);
transition: transform 0.4s ease;
transform-origin: left;
}
.ox-testimonial-card:hover {
border-color: rgba(0,210,255,0.3);
transform: translateY(-6px);
box-shadow: 0 20px 50px rgba(0,0,0,0.3), 0 0 30px rgba(0,210,255,0.08);
}
.ox-testimonial-card:hover::after { transform: scaleX(1); }
/* Star rating row inside each testimonial */
.ox-testimonial-stars {
display: flex;
gap: 3px;
margin-bottom: 16px;
color: #fbbf24;
font-size: 0.85rem;
letter-spacing: 2px;
}
.ox-testimonial-author { display: flex; align-items: center; gap: 14px; margin-top: 24px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,0.06); }
.ox-author-avatar {
width: 46px;
height: 46px;
border-radius: 50%;
object-fit: cover;
border: 2px solid rgba(0,210,255,0.3);
box-shadow: 0 0 14px rgba(0,210,255,0.2);
}
.ox-author-name { font-weight: 700; color: #ffffff; font-size: 0.9rem; }
.ox-author-role { font-size: 0.75rem; color: var(--text-muted); }
/* Partners bar */
.ox-partners-bar {
display: flex;
align-items: center;
justify-content: space-around;
padding: 36px 0;
border-top: 1px solid rgba(255,255,255,0.07);
margin-top: 60px;
flex-wrap: wrap;
gap: 24px;
}
.ox-partner-badge {
font-family: var(--font-heading);
font-weight: 700;
font-size: 1.05rem;
color: var(--text-secondary);
display: flex;
align-items: center;
gap: 8px;
opacity: 0.65;
transition: opacity 0.3s ease;
filter: grayscale(30%);
}
.ox-partner-badge:hover { opacity: 1; filter: none; }
/* Keep the closing partner row compact; no content follows it inside the
testimonials section, so a large reserved tail only looks unfinished. */
.ox-testimonials-section {
padding-bottom: 34px !important;
}
.ox-testimonials-section .ox-partners-bar {
margin-top: 40px !important;
padding: 26px 0 6px !important;
min-height: 0;
}
/* ═══════════════════════════════════════════════════════
CTA SECTION — Premium animated banner
═══════════════════════════════════════════════════════ */
.ox-cta-section {
padding: 60px 0;
background: var(--bg-primary);
position: relative;
}
.ox-cta-section::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(0,210,255,0.5), transparent);
}
.ox-cta-card {
background: linear-gradient(135deg, rgba(5,10,25,0.97) 0%, rgba(0,40,110,0.5) 60%, rgba(5,10,25,0.97) 100%);
border: 1px solid rgba(0,210,255,0.25);
border-radius: 24px;
padding: 60px 52px;
display: flex;
align-items: center;
justify-content: space-between;
position: relative;
overflow: hidden;
box-shadow: 0 0 80px rgba(0,82,212,0.2), 0 40px 80px rgba(0,0,0,0.5);
}
/* Animated glow orbs inside CTA */
.ox-cta-card::before {
content: '';
position: absolute;
width: 400px; height: 400px;
border-radius: 50%;
background: radial-gradient(circle, rgba(0,210,255,0.12) 0%, transparent 70%);
top: -100px; right: -80px;
pointer-events: none;
animation: orbPulse 6s ease-in-out infinite alternate;
}
.ox-cta-card::after {
content: '';
position: absolute;
width: 300px; height: 300px;
border-radius: 50%;
background: radial-gradient(circle, rgba(123,47,255,0.1) 0%, transparent 70%);
bottom: -80px; left: -60px;
pointer-events: none;
animation: orbPulse 8s ease-in-out infinite alternate-reverse;
}
.ox-cta-skyline-bg {
position: absolute;
bottom: 0; left: 0; right: 0;
height: 80px;
background: url('data:image/svg+xml;utf8,') repeat-x;
pointer-events: none;
}
.ox-cta-title {
font-size: 2.2rem;
font-weight: 800;
margin-bottom: 8px;
background: linear-gradient(135deg, #ffffff 0%, #a0d8ff 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
/* ═══════════════════════════════════════════════════════
FOOTER — Premium dark with gradient top border
═══════════════════════════════════════════════════════ */
.ox-footer {
background: #010308;
padding-top: 70px;
padding-bottom: 30px;
position: relative;
}
.ox-footer::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 1px;
background: linear-gradient(90deg, transparent 0%, #00d2ff 30%, #0052d4 60%, #7b2fff 80%, transparent 100%);
opacity: 0.7;
}
.ox-footer-grid {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr 1.5fr;
gap: 32px;
margin-bottom: 48px;
}
.ox-footer-logo-img { height: 38px; margin-bottom: 16px; }
.ox-footer-desc { color: var(--text-muted); font-size: 0.85rem; margin-bottom: 20px; line-height: 1.7; }
.ox-social-links { display: flex; gap: 10px; }
.ox-social-icon {
width: 36px; height: 36px;
border-radius: 50%;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.1);
display: flex;
align-items: center;
justify-content: center;
color: var(--text-secondary);
transition: all 0.3s ease;
}
.ox-social-icon:hover {
background: rgba(0,210,255,0.15);
border-color: var(--cyan-accent);
box-shadow: 0 0 16px rgba(0,210,255,0.3);
color: var(--cyan-accent);
transform: translateY(-3px);
}
.ox-social-icon svg { width: 14px; height: 14px; }
.ox-footer-heading {
font-size: 0.78rem;
font-weight: 800;
letter-spacing: 2px;
color: #ffffff;
margin-bottom: 18px;
text-transform: uppercase;
}
.ox-footer-links { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.ox-footer-links a {
position: relative;
color: var(--text-muted);
text-decoration: none;
font-size: 0.85rem;
transition: all 0.3s ease;
padding-left: 0;
}
.ox-footer-links a::before {
content: '→';
color: var(--cyan-accent);
opacity: 0;
margin-right: 6px;
transition: all 0.3s ease;
transform: translateX(-8px);
display: inline-block;
}
.ox-footer-links a:hover { color: var(--cyan-accent); }
.ox-footer-links a:hover::before { opacity: 1; transform: translateX(0); }
.ox-footer-contact { display: flex; flex-direction: column; gap: 12px; font-size: 0.85rem; color: var(--text-muted); }
.ox-contact-item { display: flex; align-items: flex-start; gap: 10px; }
.ox-contact-icon { width: 16px; height: 16px; color: var(--cyan-accent); flex-shrink: 0; margin-top: 2px; }
.ox-contact-item a { color: var(--text-muted); text-decoration: none; transition: color 0.3s ease; }
.ox-contact-item a:hover { color: var(--cyan-accent); }
.ox-footer-bottom {
display: flex;
align-items: center;
justify-content: space-between;
padding-top: 24px;
border-top: 1px solid rgba(255,255,255,0.05);
font-size: 0.8rem;
color: var(--text-muted);
}
/* ═══════════════════════════════════════════════════════
SCROLL REVEAL — All sections fade up on scroll
═══════════════════════════════════════════════════════ */
.ox-scroll-reveal {
opacity: 0;
transform: translateY(32px);
transition: opacity 0.7s cubic-bezier(0.22,1,0.36,1), transform 0.7s cubic-bezier(0.22,1,0.36,1);
}
.ox-scroll-reveal.ox-visible {
opacity: 1;
transform: translateY(0);
}
.ox-scroll-reveal.ox-delay-1 { transition-delay: 0.1s; }
.ox-scroll-reveal.ox-delay-2 { transition-delay: 0.2s; }
.ox-scroll-reveal.ox-delay-3 { transition-delay: 0.3s; }
.ox-scroll-reveal.ox-delay-4 { transition-delay: 0.4s; }
.ox-scroll-reveal.ox-delay-5 { transition-delay: 0.5s; }
.ox-scroll-reveal.ox-delay-6 { transition-delay: 0.6s; }
/* ═══════════════════════════════════════════════════════
RESPONSIVE
═══════════════════════════════════════════════════════ */
@media (max-width: 1200px) {
.ox-services-6col-grid { grid-template-columns: repeat(3, 1fr); }
.ox-process-timeline { grid-template-columns: repeat(3, 1fr); gap: 24px; }
.ox-process-timeline::before { display: none; }
}
@media (max-width: 900px) {
.ox-hero-grid, .ox-why-grid { grid-template-columns: 1fr; }
.ox-services-6col-grid, .ox-cases-grid, .ox-testimonials-grid { grid-template-columns: repeat(2, 1fr); }
.ox-footer-grid { grid-template-columns: repeat(2, 1fr); }
.ox-cta-card { flex-direction: column; gap: 32px; text-align: center; }
}
@media (max-width: 600px) {
.ox-services-6col-grid, .ox-cases-grid, .ox-testimonials-grid, .ox-process-timeline, .ox-footer-grid { grid-template-columns: 1fr; }
.ox-hero-h1 { font-size: 2.2rem; }
.ox-cta-title { font-size: 1.6rem; }
}
.ox-services-6col-grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 16px;
}
.ox-service-card-sm {
background: var(--surface-glass);
border: 1px solid var(--border-glass);
border-radius: var(--radius-md);
padding: 24px 16px;
transition: var(--transition-smooth);
display: flex;
flex-direction: column;
text-align: center;
align-items: center;
box-shadow: var(--box-shadow-card);
}
.ox-service-card-sm:hover {
background: var(--surface-glass-hover);
border-color: var(--border-glass-hover);
transform: translateY(-6px);
box-shadow: var(--box-shadow-hover);
}
.ox-card-icon-halo {
width: 52px;
height: 52px;
border-radius: 50%;
background: rgba(0, 210, 255, 0.1);
border: 1px solid rgba(0, 210, 255, 0.3);
display: flex;
align-items: center;
justify-content: center;
color: var(--cyan-accent);
margin-bottom: 16px;
box-shadow: 0 0 20px rgba(0, 210, 255, 0.25);
}
.ox-service-card-title-sm { font-size: 0.95rem; font-weight: 700; margin-bottom: 10px; }
.ox-service-card-desc-sm { font-size: 0.8rem; color: var(--text-secondary); margin-bottom: 18px; line-height: 1.5; flex-grow: 1; }
.ox-card-link {
display: inline-flex;
align-items: center;
gap: 6px;
color: var(--cyan-accent);
font-size: 0.8rem;
font-weight: 700;
text-decoration: none;
letter-spacing: 0.5px;
text-transform: uppercase;
}
.ox-card-link:hover { text-shadow: 0 0 12px var(--cyan-accent); }
/* Why Choose & Upward Trend Bar Chart matching Reference Image */
.ox-why-section {
padding: 90px 0;
background: var(--bg-primary);
}
.ox-why-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 40px;
align-items: center;
}
.ox-check-list {
list-style: none;
display: flex;
flex-direction: column;
gap: 14px;
margin-top: 24px;
}
.ox-check-item {
display: flex;
align-items: center;
gap: 12px;
font-size: 0.95rem;
font-weight: 600;
}
.ox-check-icon {
width: 22px;
height: 22px;
border-radius: 50%;
border: 1px solid var(--cyan-accent);
color: var(--cyan-accent);
display: flex;
align-items: center;
justify-content: center;
font-size: 0.75rem;
box-shadow: 0 0 10px rgba(0, 210, 255, 0.3);
}
.ox-stats-grid-2x2 {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
margin-top: 32px;
}
.ox-stat-box {
background: var(--surface-glass);
border: 1px solid var(--border-glass);
padding: 16px 20px;
border-radius: var(--radius-sm);
box-shadow: var(--box-shadow-card);
}
.ox-stat-number {
font-size: 1.8rem;
font-weight: 800;
color: var(--cyan-accent);
font-family: var(--font-heading);
text-shadow: 0 0 14px rgba(0, 210, 255, 0.4);
}
.ox-stat-label { font-size: 0.8rem; color: var(--text-secondary); }
/* Interactive ROI Growth Chart matching Reference Image */
.ox-chart-card {
background: var(--surface-glass);
border: 1px solid var(--border-glass-hover);
border-radius: var(--radius-md);
padding: 32px;
position: relative;
box-shadow: var(--box-shadow-hover);
}
.ox-chart-trend-overlay {
position: absolute;
top: 70px;
left: 40px;
right: 40px;
bottom: 60px;
pointer-events: none;
z-index: 5;
}
.ox-trend-line-svg {
width: 100%;
height: 100%;
filter: drop-shadow(0 0 8px #00d2ff);
}
.ox-chart-bars {
display: flex;
align-items: flex-end;
justify-content: space-between;
height: 200px;
gap: 6px;
padding-top: 20px;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
position: relative;
z-index: 2;
}
.ox-bar-wrapper {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
height: 100%;
justify-content: flex-end;
}
.ox-bar {
width: 100%;
max-width: 22px;
background: linear-gradient(180deg, var(--cyan-accent) 0%, rgba(0, 82, 212, 0.4) 100%);
border-radius: 4px 4px 0 0;
transition: height 0.8s ease-out;
cursor: pointer;
box-shadow: 0 0 10px rgba(0, 210, 255, 0.2);
}
.ox-bar:hover {
background: linear-gradient(180deg, #ffffff 0%, var(--cyan-accent) 100%);
box-shadow: 0 0 18px var(--cyan-accent);
}
.ox-bar-month { font-size: 0.7rem; color: var(--text-muted); margin-top: 8px; }
/* Process Timeline matching Reference Image */
.ox-process-section {
padding: 90px 0;
background: var(--bg-secondary);
}
.ox-process-timeline {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 12px;
position: relative;
margin-top: 40px;
}
.ox-process-timeline::before {
content: '';
position: absolute;
top: 32px;
left: 40px;
right: 40px;
height: 2px;
background: repeating-linear-gradient(90deg, var(--cyan-accent) 0 6px, transparent 6px 12px);
z-index: 1;
box-shadow: 0 0 10px var(--cyan-accent);
}
.ox-process-step { position: relative; z-index: 2; text-align: center; }
.ox-step-circle {
width: 64px;
height: 64px;
border-radius: 50%;
background: var(--bg-primary);
border: 2px solid var(--cyan-accent);
box-shadow: 0 0 20px var(--glow-cyan);
margin: 0 auto 16px;
display: flex;
align-items: center;
justify-content: center;
color: var(--cyan-accent);
transition: var(--transition-smooth);
}
.ox-process-step:hover .ox-step-circle {
background: var(--cyan-accent);
color: var(--bg-primary);
box-shadow: 0 0 30px var(--cyan-accent);
transform: scale(1.1);
}
.ox-step-num { font-size: 0.75rem; font-weight: 800; color: var(--cyan-accent); margin-bottom: 4px; }
.ox-step-title { font-size: 0.9rem; font-weight: 700; margin-bottom: 6px; }
.ox-step-desc { font-size: 0.75rem; color: var(--text-secondary); }
/* Featured Success Stories matching Reference Image */
.ox-cases-section {
padding: 90px 0;
background: var(--bg-primary);
}
.ox-cases-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.ox-case-card {
background: var(--surface-glass);
border: 1px solid var(--border-glass);
border-radius: var(--radius-md);
padding: 28px;
display: flex;
flex-direction: column;
justify-content: space-between;
transition: var(--transition-smooth);
box-shadow: var(--box-shadow-card);
}
.ox-case-card:hover {
border-color: var(--cyan-accent);
transform: translateY(-6px);
box-shadow: var(--box-shadow-hover);
}
.ox-case-brand { font-size: 1.3rem; font-weight: 800; letter-spacing: 1px; }
.ox-case-category { font-size: 0.7rem; color: var(--text-muted); text-transform: uppercase; margin-bottom: 12px; }
.ox-case-metric { font-size: 2rem; font-weight: 800; color: var(--cyan-accent); text-shadow: 0 0 16px rgba(0, 210, 255, 0.4); }
/* Testimonials & Partner Badges */
.ox-testimonials-section {
padding: 90px 0;
background: var(--bg-secondary);
}
.ox-testimonials-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.ox-testimonial-card {
background: var(--surface-glass);
border: 1px solid var(--border-glass);
border-radius: var(--radius-md);
padding: 28px;
font-size: 0.9rem;
color: var(--text-secondary);
line-height: 1.6;
box-shadow: var(--box-shadow-card);
}
.ox-testimonial-author { display: flex; align-items: center; gap: 12px; margin-top: 20px; }
.ox-author-avatar { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; }
.ox-author-name { font-weight: 700; color: #ffffff; font-size: 0.9rem; }
.ox-author-role { font-size: 0.75rem; color: var(--text-muted); }
.ox-partners-bar {
display: flex;
align-items: center;
justify-content: space-around;
padding: 36px 0;
border-top: 1px solid rgba(255, 255, 255, 0.08);
margin-top: 50px;
flex-wrap: wrap;
gap: 24px;
opacity: 0.9;
}
.ox-partner-badge {
font-family: var(--font-heading);
font-weight: 700;
font-size: 1.05rem;
color: var(--text-secondary);
display: flex;
align-items: center;
gap: 8px;
}
/* CTA Banner & Footer matching Reference Image */
.ox-cta-section {
padding: 50px 0;
background: var(--bg-primary);
}
.ox-cta-card {
background: linear-gradient(135deg, rgba(8, 16, 36, 0.95) 0%, rgba(0, 82, 212, 0.3) 100%);
border: 1px solid var(--border-glass-hover);
border-radius: var(--radius-lg);
padding: 50px 40px;
display: flex;
align-items: center;
justify-content: space-between;
position: relative;
overflow: hidden;
box-shadow: 0 0 50px rgba(0, 210, 255, 0.25);
}
.ox-cta-skyline-bg {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 80px;
background: url('data:image/svg+xml;utf8,') repeat-x;
pointer-events: none;
}
.ox-cta-title { font-size: 2rem; font-weight: 800; margin-bottom: 6px; }
.ox-footer {
background: #02040b;
padding-top: 70px;
padding-bottom: 30px;
border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.ox-footer-grid {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr 1.5fr;
gap: 32px;
margin-bottom: 48px;
}
.ox-footer-logo-img { height: 38px; margin-bottom: 16px; }
.ox-footer-desc { color: var(--text-muted); font-size: 0.85rem; margin-bottom: 20px; }
.ox-social-links { display: flex; gap: 10px; }
.ox-social-icon {
width: 34px;
height: 34px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
display: flex;
align-items: center;
justify-content: center;
color: var(--text-secondary);
transition: var(--transition-smooth);
}
.ox-social-icon:hover {
background: var(--cyan-accent);
color: var(--bg-primary);
box-shadow: 0 0 16px var(--cyan-accent);
}
.ox-social-icon svg { width: 14px; height: 14px; }
.ox-footer-heading { font-size: 0.8rem; font-weight: 800; letter-spacing: 1px; color: #ffffff; margin-bottom: 16px; }
.ox-footer-links { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.ox-footer-links a { color: var(--text-muted); text-decoration: none; font-size: 0.85rem; transition: var(--transition-smooth); }
.ox-footer-links a:hover { color: var(--cyan-accent); }
.ox-footer-contact { display: flex; flex-direction: column; gap: 12px; font-size: 0.85rem; color: var(--text-muted); }
.ox-contact-item { display: flex; align-items: flex-start; gap: 10px; }
.ox-contact-icon { width: 16px; height: 16px; color: var(--cyan-accent); flex-shrink: 0; margin-top: 2px; }
.ox-contact-item a { color: var(--text-muted); text-decoration: none; }
.ox-footer-bottom { display: flex; align-items: center; justify-content: space-between; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, 0.05); font-size: 0.8rem; color: var(--text-muted); }
@media (max-width: 1200px) {
.ox-services-6col-grid { grid-template-columns: repeat(3, 1fr); }
.ox-process-timeline { grid-template-columns: repeat(3, 1fr); gap: 24px; }
.ox-process-timeline::before { display: none; }
}
@media (max-width: 900px) {
.ox-hero-grid, .ox-why-grid { grid-template-columns: 1fr; }
.ox-services-6col-grid, .ox-cases-grid, .ox-testimonials-grid { grid-template-columns: repeat(2, 1fr); }
.ox-footer-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
.ox-services-6col-grid, .ox-cases-grid, .ox-testimonials-grid, .ox-process-timeline, .ox-footer-grid { grid-template-columns: 1fr; }
.ox-hero-h1 { font-size: 2.2rem; }
}
/* Accessible services dropdown: parent remains a normal page link. */
.ox-nav-has-submenu { position:relative; }
.ox-nav-service-top { display:flex; align-items:center; gap:5px; }
.ox-submenu-toggle { border:0; background:transparent; color:#49dfff; cursor:pointer; padding:8px; font-size:20px; line-height:1; }
.ox-submenu-toggle span { display:block; transition:transform .2s; }
.ox-nav-has-submenu.submenu-open .ox-submenu-toggle span { transform:rotate(180deg); }
.ox-services-submenu { list-style:none; position:absolute; top:calc(100% + 12px); left:-18px; min-width:260px; padding:10px; margin:0; z-index:1000; background:#061225; border:1px solid rgba(0,210,255,.4); border-radius:12px; box-shadow:0 16px 40px rgba(0,0,0,.65); opacity:0; visibility:hidden; transform:translateY(8px); transition:opacity .2s,transform .2s,visibility .2s; }
.ox-services-submenu a { display:block; padding:10px 12px; border-radius:7px; color:#d8e7f6; text-decoration:none; font-size:13px; line-height:1.4; }
.ox-services-submenu a:hover,.ox-services-submenu a:focus-visible,.ox-services-submenu a[aria-current="page"] { color:#00d2ff; background:rgba(0,210,255,.10); }
@media(min-width:901px) {
.ox-nav-has-submenu:hover .ox-services-submenu,.ox-nav-has-submenu:focus-within .ox-services-submenu,.ox-nav-has-submenu.submenu-open .ox-services-submenu { opacity:1;visibility:visible;transform:translateY(0); }
}
@media(max-width:900px) {
.ox-nav-service-top { justify-content:space-between; }
.ox-nav-service-top .ox-nav-link { flex:1; }
.ox-submenu-toggle { min-width:44px; min-height:44px; }
.ox-services-submenu { display:none; position:static; opacity:1; visibility:visible; transform:none; min-width:0; box-shadow:none; margin:0 0 10px 12px; padding:5px; border-radius:8px; }
.ox-nav-has-submenu.submenu-open .ox-services-submenu { display:block; }
.ox-nav.active { max-height:calc(100vh - var(--header-height)); overflow-y:auto; }
}
/* Services navigation alignment refinement */
@media (min-width:901px) {
.ox-nav-has-submenu .ox-nav-service-top { display:inline-flex; align-items:center; justify-content:flex-start; gap:2px; white-space:nowrap; }
.ox-nav-has-submenu .ox-nav-link { display:inline-flex; align-items:center; padding-bottom:4px; line-height:1.35; }
.ox-nav-has-submenu .ox-submenu-toggle { display:inline-flex; align-items:center; justify-content:center; flex:0 0 20px; width:20px; height:24px; padding:0; margin:0; font-size:16px; line-height:1; vertical-align:middle; }
.ox-nav-has-submenu .ox-submenu-toggle span { transform:translateY(-1px); }
.ox-nav-has-submenu.submenu-open .ox-submenu-toggle span { transform:translateY(-1px) rotate(180deg); }
}
/* Final desktop services caret: link-owned caret, no separate button spacing. */
@media (min-width:901px) {
.ox-nav-has-submenu .ox-nav-service-top { display:inline-flex !important; align-items:center !important; gap:0 !important; width:auto !important; }
.ox-nav-has-submenu .ox-nav-service-top > .ox-nav-link { display:inline-flex !important; align-items:center !important; gap:5px !important; padding:13px 0 !important; line-height:1.4 !important; }
.ox-nav-has-submenu .ox-nav-service-top > .ox-nav-link::before { content:none !important; }
.ox-nav-has-submenu .ox-nav-service-top > .ox-nav-link::after { content:'⌄' !important; position:static !important; display:inline-block !important; width:auto !important; height:auto !important; background:none !important; border:0 !important; transform:translateY(-2px) !important; font-size:16px !important; line-height:1 !important; color:#00d2ff !important; text-shadow:none !important; transition:transform .2s !important; }
.ox-nav-has-submenu:hover .ox-nav-service-top > .ox-nav-link::after, .ox-nav-has-submenu.submenu-open .ox-nav-service-top > .ox-nav-link::after { transform:translateY(-2px) rotate(180deg) !important; }
.ox-nav-has-submenu .ox-nav-service-top > .ox-submenu-toggle { display:none !important; }
}
/* 2026-10-22: Homepage mobile hero — true single-column layout, no clipped content */
@media (max-width: 767px) {
.ox-hero-section {
min-height: 0;
height: auto;
display: block;
padding: calc(var(--header-height, 76px) + 22px) 0 36px;
overflow: hidden;
}
.ox-hero-section > .ox-container {
width: 100%;
max-width: 100%;
padding: 0 20px;
box-sizing: border-box;
}
.ox-hero-grid {
display: flex;
flex-direction: column;
width: 100%;
min-width: 0;
gap: 12px;
}
.ox-hero-grid > :first-child,
.ox-hero-content {
width: 100%;
min-width: 0;
padding: 0;
box-sizing: border-box;
}
.ox-hero-content .ox-pill {
font-size: 10px;
letter-spacing: 1.4px;
max-width: 100%;
white-space: normal;
padding: 10px 14px;
}
.ox-hero-h1 {
font-size: clamp(32px, 9.4vw, 46px);
line-height: 1.13;
letter-spacing: -1.2px;
margin: 22px 0 18px;
overflow-wrap: anywhere;
}
.ox-hero-h1 span { max-width: 100%; }
.ox-hero-desc {
width: 100%;
max-width: 100%;
font-size: 15px;
line-height: 1.65;
margin: 0 0 24px;
overflow-wrap: break-word;
}
.ox-hero-actions {
display: flex;
flex-direction: column;
align-items: stretch;
width: 100%;
gap: 12px;
margin: 0 0 24px;
}
.ox-hero-actions .ox-btn {
width: 100%;
max-width: 100%;
min-width: 0;
min-height: 50px;
box-sizing: border-box;
padding: 13px 14px;
justify-content: center;
text-align: center;
font-size: 12px;
letter-spacing: .25px;
white-space: normal;
}
.ox-hero-trust {
width: 100%;
flex-wrap: wrap;
gap: 10px;
margin: 0;
padding: 16px 0 0;
}
.ox-hero-trust .ox-avatar-group { display: none; }
.ox-hero-trust .ox-rating-text { font-size: 12px; line-height: 1.5; }
.ox-hero-3d-stage {
position: relative;
width: 100%;
min-width: 0;
height: auto;
min-height: 0;
aspect-ratio: 1 / .87;
margin: 0 auto;
overflow: hidden;
}
.ox-hero-globe-video {
display: block;
width: 110%;
height: 110%;
z-index: 1;
}
.ox-hero-3d-stage::before {
content: "";
position: absolute;
inset: 10% 4%;
border-radius: 50%;
background:
radial-gradient(circle at 50% 50%, rgba(0, 102, 255, .22), transparent 42%),
radial-gradient(circle at 55% 48%, rgba(0, 229, 255, .12), transparent 62%);
z-index: 0;
filter: blur(10px);
pointer-events: none;
}
.ox-stat-badge {
padding: 8px 11px;
min-width: 0;
max-width: 43%;
border-radius: 12px;
animation: none;
}
.ox-stat-badge .ox-stat-num { font-size: clamp(17px, 5vw, 24px); }
.ox-stat-badge .ox-stat-label { font-size: 9px; line-height: 1.25; }
.ox-stat-badge-1 { top: 12%; left: 0; right: auto; }
.ox-stat-badge-2 { top: 12%; right: 0; left: auto; }
.ox-stat-badge-3 { bottom: 6%; left: 50%; right: auto; transform: translateX(-50%); }
.ox-dataflow-svg { display: none; }
}
@media (max-width: 360px) {
.ox-hero-section > .ox-container { padding: 0 16px; }
.ox-hero-h1 { font-size: 30px; }
}
/* 2026-10-24: Mobile layout hardening — homepage and shared page chrome */
@media (max-width: 767px) {
/* Skip layout/paint work for sections far below the first viewport. This is
mobile-only, so the desktop rendering path and score remain unchanged. */
.ox-services-section,
.ox-stats-band,
.ox-why-section,
.ox-process-section,
.ox-cases-section,
.ox-testimonials-section,
.ox-footer-cta,
.ox-footer {
content-visibility: auto;
contain-intrinsic-size: auto 760px;
}
html, body { width: 100%; max-width: 100%; overflow-x: clip; }
.ox-testimonials-section { padding-bottom: 24px !important; }
.ox-testimonials-section .ox-partners-bar {
margin-top: 30px !important;
padding: 22px 0 4px !important;
}
.ox-container { width: 100%; max-width: 100%; padding-left: 20px; padding-right: 20px; box-sizing: border-box; }
img, video, canvas { max-width: 100%; }
.ox-section-title, .ox-giant-heading { overflow-wrap: anywhere; }
/* Large brand counters become a readable 2-column dashboard. */
.ox-stats-band { padding: 18px 0; }
.ox-stats-band-inner {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
width: 100%;
padding: 0 16px;
gap: 0;
}
.ox-stats-band-item { min-width: 0; padding: 22px 8px; }
.ox-stats-band-item:nth-of-type(-n+2) { border-bottom: 1px solid rgba(0,210,255,.12); }
.ox-stats-band-divider { display: none; }
.ox-sb-num { font-size: clamp(2.15rem, 11vw, 3rem); margin-bottom: 8px; }
.ox-sb-label { font-size: .68rem; letter-spacing: 1.25px; }
/* Why Choose — prevent the four KPIs from running off-screen. */
body .ox-home-why { padding: 68px 0; overflow: hidden; }
body .ox-home-why .ox-why-grid { display: grid; grid-template-columns: minmax(0,1fr); gap: 30px; }
body .ox-home-why .ox-why-left,
body .ox-home-why .ox-chart-card { min-width: 0; width: 100%; }
body .ox-home-why .ox-chart-card { padding: 20px 14px; }
body .ox-home-why .ox-chart-bars { height: 170px; gap: 4px; }
body .ox-home-why .ox-reason-item { padding: 14px; gap: 12px; }
body .ox-home-why .ox-why-stats-strip {
display: grid;
grid-template-columns: repeat(2, minmax(0,1fr));
width: 100%;
margin-top: 30px;
padding: 12px;
overflow: hidden;
}
body .ox-home-why .ox-why-stat { min-width: 0; padding: 18px 6px; }
body .ox-home-why .ox-why-stat:nth-of-type(-n+2) { border-bottom: 1px solid rgba(0,210,255,.12); }
body .ox-home-why .ox-why-stat-sep { display: none; }
body .ox-home-why .ox-stat-number { font-size: clamp(1.65rem, 8vw, 2.25rem); }
body .ox-home-why .ox-stat-label { font-size: .66rem; letter-spacing: .55px; overflow-wrap: anywhere; }
/* Process accordion becomes six complete cards instead of squeezed slivers. */
.ox-process-section { padding: 68px 0; overflow: hidden; }
.ox-process-header { margin-bottom: 24px; }
.ox-process-header .ox-giant-heading { margin: 14px 0 28px !important; font-size: clamp(2rem, 10vw, 3.2rem); line-height: 1.04; }
.ox-accordion-wrap {
display: grid;
grid-template-columns: minmax(0,1fr);
width: 100%;
height: auto;
gap: 14px;
padding: 0;
}
.ox-acc-panel,
.ox-acc-panel:hover {
display: grid;
grid-template-columns: 56px minmax(0,1fr);
align-items: center;
min-height: 150px;
width: 100%;
padding: 24px 18px;
flex: none;
cursor: default;
border-color: color-mix(in srgb, var(--acc-color) 28%, transparent);
background: linear-gradient(115deg, color-mix(in srgb, var(--acc-color) 8%, transparent), rgba(5,10,25,.92) 58%);
}
.ox-acc-panel::before { opacity: .5; }
.ox-acc-num { top: 12px; left: 14px; font-size: 1.35rem; opacity: .62; }
.ox-acc-panel:hover .ox-acc-num { transform: none; opacity: .62; }
.ox-acc-icon,
.ox-acc-panel:hover .ox-acc-icon {
position: relative;
top: auto;
left: auto;
transform: none;
grid-column: 1;
grid-row: 1;
width: 48px;
margin-top: 16px;
}
.ox-acc-icon img,
.ox-acc-panel:hover .ox-acc-icon img { width: 46px !important; height: 46px !important; filter: none; }
.ox-acc-content,
.ox-acc-panel:hover .ox-acc-content {
position: static;
grid-column: 2;
grid-row: 1;
min-width: 0;
opacity: 1;
transform: none;
pointer-events: auto;
padding-left: 12px;
}
.ox-acc-title { font-size: 1.12rem; margin-bottom: 6px; }
.ox-acc-desc { max-width: 100%; font-size: .78rem; }
.ox-acc-label { display: none; }
.ox-acc-tags { margin-top: 8px; }
.ox-acc-tags span { white-space: normal; }
/* Success stories heading and cards stay inside the viewport. */
.ox-cases-section { padding: 68px 0; overflow: hidden; }
.ox-cases-heading-row {
display: flex !important;
flex-direction: column;
align-items: flex-start !important;
gap: 18px;
margin-bottom: 28px !important;
}
.ox-cases-heading-row > * { min-width: 0; max-width: 100%; }
.ox-cases-heading-row .ox-pill { white-space: normal; }
.ox-cases-heading-row a { align-self: flex-start; overflow-wrap: anywhere; }
.ox-cases-grid { grid-template-columns: minmax(0,1fr); gap: 16px; }
.ox-case-card { min-width: 0; padding: 26px 22px; }
.ox-footer-bottom { flex-direction: column; align-items: flex-start; gap: 10px; }
}
@media (max-width: 380px) {
.ox-container { padding-left: 16px; padding-right: 16px; }
.ox-acc-panel, .ox-acc-panel:hover { grid-template-columns: 46px minmax(0,1fr); padding: 22px 14px; }
.ox-acc-content, .ox-acc-panel:hover .ox-acc-content { padding-left: 8px; }
}
/* Cross-page mobile safety net for legacy page-local layouts. */
@media (max-width: 767px) {
body .ox-header,
body .ox-header-inner { width: 100vw !important; max-width: 100vw !important; }
/* About */
body .ab-mv-row { width: 100%; min-width: 0; grid-template-columns: minmax(0,1fr) !important; }
body .ab-mv-copy,
body .ab-globe-wrap,
body .ab-mv-h2,
body .ab-mv-p { width: 100%; max-width: 100%; min-width: 0; }
body .ab-globe-visual { width: 100% !important; max-width: 390px !important; }
body .ab-stats { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); width: 100%; overflow: hidden; }
body .ab-stat { min-width: 0; padding: 24px 8px; }
body .ab-stat + .ab-stat::before { display: none; }
body .ab-stat:nth-child(-n+2) { border-bottom: 1px solid rgba(255,255,255,.07); }
/* Free tools */
body .ft-layout { display: grid; grid-template-columns: minmax(0,1fr) !important; width: 100%; min-width: 0; }
body .ft-sidebar,
body .ft-workspace,
body .ft-panel,
body .ft-panel-heading,
body .ft-aside-note,
body .ft-note { width: 100%; max-width: 100%; min-width: 0; }
body .ft-tabs { width: 100%; max-width: 100%; min-width: 0; }
body .ft-panel { padding: 22px 16px; }
body .ft-panel h2 { font-size: clamp(1.55rem,8vw,2.15rem); overflow-wrap: anywhere; }
/* Google Ads */
body .gad-why-layout-row { flex-direction: column; align-items: stretch; width: 100%; }
body .gad-why-left-text { width: 100%; }
body .gad-why-right-grid { width: 100%; min-width: 0; grid-template-columns: minmax(0,1fr) !important; }
/* Google Maps / Local SEO */
body .gmap-hero-container { width: 100%; max-width: 100%; min-width: 0; padding-left: 20px; padding-right: 20px; }
body .gmap-hero-container > *,
body .gmap-hero-h1,
body .gmap-hero-desc { width: 100%; max-width: 100%; min-width: 0; }
body .gmap-hero-h1 { font-size: clamp(2rem,10vw,2.8rem); overflow-wrap: anywhere; }
body .gmap-hero-actions { align-items: stretch; }
body .gmap-hero-actions > * { max-width: 100%; }
body .gmap-hero-badges { flex-wrap: wrap; gap: 14px; }
/* Main Services */
body .sv-hero-grid,
body .sv-hero-grid > *,
body .sv-stage,
body .sv-ox-box,
body .sv-hero-h1,
body .sv-hero-p { width: 100%; max-width: 100%; min-width: 0; }
body .sv-stage { height: min(92vw,360px); }
body .sv-ox-box { height: auto; aspect-ratio: 1; }
body .sv-ring-1 { width: 70vw; height: 70vw; max-width: 300px; max-height: 300px; }
body .sv-ring-2 { width: 84vw; height: 84vw; max-width: 350px; max-height: 350px; }
body .sv-ring-3 { width: 96vw; height: 96vw; max-width: 400px; max-height: 400px; }
body .sv-hero-h1 { font-size: clamp(2rem,10vw,2.8rem); overflow-wrap: anywhere; }
/* Lead generation: keep oversized decorative planes from defining page width. */
body .lg-page { position: relative; width: 100%; max-width: 100vw; overflow: hidden !important; }
body .lg-wrap,
body .lg-wrap-wide { width: 100%; max-width: 100%; min-width: 0; padding-left: 20px; padding-right: 20px; }
body .lg-hero-grid,
body .lg-funnel-col,
body .lg-funnel-canvas-wrap { width: 100%; max-width: 100%; min-width: 0; }
body #lgFunnelCanvas { width: 100% !important; height: auto !important; }
/* Website development */
body .lux-hero-grid { width: 100%; max-width: 100%; min-width: 0; padding-left: 20px; padding-right: 20px; box-sizing: border-box; }
body .lux-hero-grid > *,
body .lux-hero-h1,
body .lux-hero-p { min-width: 0; max-width: 100%; }
/* Mobile vertical rhythm: remove desktop-sized dead zones between sections. */
body .gad-hero { min-height: 0; padding: calc(var(--header-height) + 26px) 0 48px; }
body .gad-hero-stage { min-height: 350px; }
body .gad-trust-bar { padding: 22px 0; }
body .gad-services-section,
body .gad-why-section,
body .gad-results-section,
body .gad-process-section,
body .gad-testi-section,
body .gad-faq-section,
body .gad-cta-section { padding: 58px 0 !important; }
body .gad-services-layout { gap: 34px; }
body .gad-results-grid,
body .gad-testi-grid { margin-top: 30px; }
body .gad-proc-flow-container { margin-top: 34px; padding: 0; }
body .gad-proc-wavy-path,
body .gad-proc-nav-arrow { display: none; }
body .gad-proc-grid { gap: 30px; }
body .gad-proc-node { padding: 0 12px; }
body .lj2-section { padding: 58px 0; }
body .gad-cta-card { padding: 28px 20px; gap: 24px; }
body .gad-cta-card > div:last-child { width: 100%; align-items: stretch !important; }
body .gad-cta-card .gad-btn-primary { justify-content: center; text-align: center; }
body .gmap-hero-section { min-height: 0; padding: calc(var(--header-height) + 26px) 0 54px; }
body .gmap-heatmap-section,
body .gmap-3pack-section,
body .gmap-deck-section,
body .gmap-ba-section,
body .gmap-route-section,
body .gmap-reviews-section,
body .gmap-jaipur-section,
body .gmap-process-section,
body .gmap-faq-section { padding: 64px 0; }
body .gmap-cta-section { padding: 70px 0; }
body .lux-hero { min-height: 0; padding: calc(var(--header-height) + 26px) 0 52px; }
body .lux-pillars-sec,
body .lux-services-sec,
body .lux-sim-sec,
body .lux-audit-sec,
body .lux-faq-sec { padding: 64px 0; }
body .lux-portfolio-sec { padding: 64px 0; }
body .lux-final-cta { padding: 64px 20px; }
body .lg-hero { min-height: 0; padding: calc(var(--header-height) + 26px) 0 48px; }
body .lg-sec-flow,
body .lg-sec-matrix,
body .lg-sec-stats,
body .lg-sec-case { padding-top: 62px; padding-bottom: 62px; }
body .sv-hero { min-height: 0; padding: calc(var(--header-height) + 26px) 0 52px; }
body .sv-why-section,
body .sv-process-section { padding: 64px 0; }
body .sv-intro { padding: 64px 0 42px; }
body .sv-cards-section { padding-top: 16px; padding-bottom: 64px; }
body .sv-cta-section { padding: 58px 0; }
body .ab-hero { min-height: 0; padding: calc(var(--header-height) + 26px) 0 44px; }
body .ab-dna { padding-top: 64px; padding-bottom: 64px; }
body .ab-mv { padding-top: 62px; }
body .ab-diff { padding-top: 64px; padding-bottom: 64px; }
}