/* =========================================
VCOSH Redesign - Design System
========================================= */
html { scroll-behavior: smooth; }
/* Note: do NOT add overflow-x: hidden to or . In Chromium,
any non-visible overflow on a sticky-positioned element's ancestor (body
counts) makes that ancestor the scroll container, which breaks
`position: sticky` for the pinned scrollytelling sections. Firefox is
permissive and ignores this; Chromium is strict.
Source-of-overflow elements (.vc-partner-marquee, .vc-how-section) clip
their own overflow at the immediate parent instead. */
.vc-snap-scroll { position: relative; }
/* `isolation: isolate` was here to give each slot its own stacking context.
Removed because in mobile Chromium it creates a compositor layer boundary
that interferes with `position: sticky` pinning of pin-section descendants
— Firefox doesn't have this issue. Sections that need their own stacking
context (CTA, etc.) declare it themselves. */
.vc-snap-slot { position: relative; width: 100%; }
.vc-snap-slot-auto { min-height: 0; overflow: visible; }
/* ===== Scroll reveal: elements fade + lift in when entering viewport ===== */
.vc-eyebrow:not(.is-revealed),
.vc-h2:not(.is-revealed),
.vc-section-lead:not(.is-revealed),
.vc-how-subtitle:not(.is-revealed),
.vc-trio-card:not(.is-revealed),
.vc-challenge-card:not(.is-revealed),
.vc-stat-card:not(.is-revealed),
.vc-feature-card:not(.is-revealed),
.vc-why-card:not(.is-revealed),
.vc-cred-card:not(.is-revealed),
.vc-lang-card:not(.is-revealed),
.vc-cta-wrap:not(.is-revealed),
.vc-app-content:not(.is-revealed),
.vc-app-phones:not(.is-revealed),
.vc-what-dashboard:not(.is-revealed),
.vc-partner-stats:not(.is-revealed),
.vc-hero-grid-layout:not(.is-revealed),
.vc-hero-mini-stats:not(.is-revealed) {
opacity: 0;
transform: translateY(28px);
}
.vc-eyebrow, .vc-h2, .vc-section-lead, .vc-how-subtitle,
.vc-trio-card, .vc-challenge-card, .vc-stat-card,
.vc-feature-card, .vc-why-card, .vc-cred-card, .vc-lang-card,
.vc-cta-wrap, .vc-app-content, .vc-app-phones,
.vc-what-dashboard, .vc-partner-stats,
.vc-hero-grid-layout, .vc-hero-mini-stats {
transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
transition-delay: calc(var(--reveal-i, 0) * 0.08s);
}
/* Section heading sequence — eyebrow first, then headline, then lead */
.vc-section-head .vc-h2 { transition-delay: 0.08s; }
.vc-section-head .vc-section-lead { transition-delay: 0.16s; }
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
.vc-eyebrow, .vc-h2, .vc-section-lead, .vc-how-subtitle,
.vc-trio-card, .vc-challenge-card, .vc-stat-card,
.vc-feature-card, .vc-why-card, .vc-cred-card, .vc-lang-card,
.vc-cta-wrap, .vc-app-content, .vc-app-phones,
.vc-what-dashboard, .vc-partner-stats,
.vc-hero-grid-layout, .vc-hero-mini-stats {
opacity: 1 !important;
transform: none !important;
transition: none !important;
}
}
:root {
/* Brand: refined palette anchored on NIOSH teal,
with Saudi sand/gold accent + proven warm cream surface */
--vc-teal-900: #06403B;
--vc-teal-800: #0B5D55;
--vc-teal-700: #0F766E; /* primary */
--vc-teal-600: #138F84;
--vc-teal-500: #2BAFA3;
--vc-teal-100: #D9EBE8;
--vc-teal-50: #ECF5F3;
--vc-gold-700: #8A6D2A;
--vc-gold-600: #B58B3A;
--vc-gold-500: #C8A24A; /* accent */
--vc-gold-400: #E0B85B;
--vc-gold-200: #F0DDA8;
--vc-gold-100: #FAF1D9;
/* Neutrals - warm */
--vc-bg: #FAF8F3;
--vc-bg-alt: #F4F1EC;
--vc-bg-card: #FFFFFF;
--vc-bg-deep: #06403B;
--vc-line: #E8E2D6;
--vc-line-soft: #F0EDE5;
--vc-ink-900: #0F1814;
--vc-ink-800: #1B2A26;
--vc-ink-700: #324440;
--vc-ink-500: #6B7066;
--vc-ink-400: #9CA39A;
--vc-ink-300: #C8CCC4;
/* Status */
--vc-good: #0B7B43;
--vc-warn: #C24C36;
/* Type */
--vc-font-en: 'Inter', system-ui, -apple-system, sans-serif;
--vc-font-ar: 'IBM Plex Sans Arabic', 'Inter', system-ui, sans-serif;
--vc-font-display: 'Inter', system-ui, sans-serif;
/* Layout */
--vc-max: 1280px;
--vc-radius: 16px;
--vc-radius-sm: 10px;
--vc-radius-lg: 24px;
/* Motion */
--vc-ease: cubic-bezier(0.32, 0.72, 0.24, 1);
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
font-family: var(--vc-font-en);
color: var(--vc-ink-800);
background: var(--vc-bg);
-webkit-font-smoothing: antialiased;
font-feature-settings: 'ss01' on;
}
[dir="rtl"] body, body[dir="rtl"] { font-family: var(--vc-font-ar); }
[dir="rtl"] { font-family: var(--vc-font-ar); }
[dir="ltr"] { font-family: var(--vc-font-en); }
a { text-decoration: none; color: inherit; }
button { border: none; background: none; cursor: pointer; font: inherit; color: inherit; }
img { max-width: 100%; display: block; }
/* =========================================
Layout primitives
========================================= */
.vc-container {
max-width: var(--vc-max);
margin: 0 auto;
padding: 0 32px;
position: relative;
}
.vc-section {
padding: 120px 0;
position: relative;
overflow: hidden;
}
.vc-section-tight { padding: 80px 0; }
.vc-section-light { background: var(--vc-bg); }
.vc-section-cream { background: var(--vc-bg-alt); }
.vc-section-dark {
background: var(--vc-bg-deep);
color: #fff;
background-image:
radial-gradient(circle at 20% 20%, rgba(43,175,163,0.15), transparent 50%),
radial-gradient(circle at 80% 80%, rgba(200,162,74,0.10), transparent 50%);
}
.vc-section-dark .vc-h2 { color: #fff; }
.vc-section-dark .vc-section-lead { color: rgba(255,255,255,0.78); }
/* =========================================
Type
========================================= */
.vc-h2 {
font-size: clamp(32px, 4.5vw, 56px);
font-weight: 700;
line-height: 1.05;
letter-spacing: -0.02em;
color: var(--vc-ink-900);
margin: 16px 0 16px;
text-wrap: balance;
}
[dir="rtl"] .vc-h2 { line-height: 1.25; letter-spacing: 0; }
.vc-h3 {
font-size: 20px;
font-weight: 600;
line-height: 1.3;
color: var(--vc-ink-900);
margin: 0 0 8px;
letter-spacing: -0.01em;
}
[dir="rtl"] .vc-h3 { line-height: 1.4; letter-spacing: 0; }
.vc-section-head {
max-width: 720px;
margin: 0 auto 64px;
text-align: center;
}
.vc-section-head-narrow { max-width: 760px; }
.vc-section-head-light .vc-h2 { color: #fff; }
.vc-section-lead {
font-size: 18px;
line-height: 1.6;
color: var(--vc-ink-500);
margin: 0;
text-wrap: pretty;
}
.vc-section-dark .vc-section-lead { color: rgba(255,255,255,0.72); }
.vc-eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--vc-teal-700);
padding: 6px 14px;
background: var(--vc-teal-50);
border-radius: 99px;
border: 1px solid var(--vc-teal-100);
white-space: nowrap;
max-width: 90vw;
overflow: hidden;
text-overflow: ellipsis;
}
[dir="rtl"] .vc-eyebrow { letter-spacing: 0.04em; }
.vc-eyebrow-light {
color: var(--vc-gold-400);
background: rgba(232, 210, 158, 0.1);
border-color: rgba(232, 210, 158, 0.25);
}
.vc-eyebrow-dot {
width: 6px; height: 6px; border-radius: 50%;
background: currentColor;
display: inline-block;
}
/* =========================================
Buttons
========================================= */
.vc-btn-primary, .vc-btn-ghost {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 14px 22px;
border-radius: 99px;
font-weight: 600;
font-size: 15px;
transition: all 0.25s var(--vc-ease);
white-space: nowrap;
}
.vc-btn-sm { padding: 10px 18px; font-size: 14px; }
.vc-btn-lg { padding: 16px 28px; font-size: 16px; }
.vc-btn-primary {
background: var(--vc-ink-900);
color: #fff;
}
.vc-btn-primary:hover {
background: var(--vc-teal-700);
transform: translateY(-1px);
box-shadow: 0 12px 24px -8px rgba(15,118,110,0.5);
}
.vc-btn-primary .arr { transition: transform 0.25s var(--vc-ease); display: inline-block; }
.vc-btn-primary:hover .arr { transform: translateX(-3px); }
[dir="ltr"] .vc-btn-primary:hover .arr { transform: translateX(3px); }
.vc-btn-ghost {
background: transparent;
color: var(--vc-ink-800);
border: 1.5px solid var(--vc-line);
}
.vc-btn-ghost:hover {
border-color: var(--vc-ink-900);
background: rgba(0,0,0,0.02);
}
.vc-section-dark .vc-btn-ghost {
color: #fff;
border-color: rgba(255,255,255,0.25);
}
.vc-section-dark .vc-btn-ghost:hover {
border-color: rgba(255,255,255,0.6);
background: rgba(255,255,255,0.05);
}
.vc-play-icon {
display: inline-grid;
place-items: center;
width: 22px; height: 22px;
border-radius: 50%;
background: var(--vc-teal-700);
color: #fff;
font-size: 9px;
padding-left: 1px;
}
[dir="rtl"] .vc-play-icon { transform: scaleX(-1); }
/* =========================================
NAV
========================================= */
.vc-nav {
position: fixed;
top: 0; left: 0; right: 0;
z-index: 100;
padding: 16px 0;
transition: all 0.3s var(--vc-ease);
}
.vc-nav.scrolled {
background: rgba(250, 248, 243, 0.85);
backdrop-filter: saturate(140%) blur(14px);
-webkit-backdrop-filter: saturate(140%) blur(14px);
border-bottom: 1px solid var(--vc-line-soft);
padding: 12px 0;
}
.vc-nav-inner {
max-width: var(--vc-max);
margin: 0 auto;
padding: 0 32px;
display: flex;
align-items: center;
gap: 32px;
}
.vc-nav-brand { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
/* Real VCOSH logo lockup (shield + wordmark, AR or EN) */
.vc-brand-logo {
display: block;
height: 52px;
width: auto;
max-width: 260px;
object-fit: contain;
transition: filter 0.3s var(--vc-ease), height 0.3s var(--vc-ease);
}
.vc-nav.scrolled .vc-brand-logo { height: 44px; }
.vc-footer .vc-brand-logo { height: 56px; max-width: 280px; }
/* White-filtered version when the logo sits on a dark background
(nav floating over the hero video, and the dark footer). */
.vc-nav:not(.scrolled) .vc-brand-logo,
.vc-footer .vc-brand-logo {
filter: brightness(0) invert(1);
}
.vc-logo-mark {
width: 40px; height: 40px;
border-radius: 11px;
background: linear-gradient(135deg, var(--vc-teal-700), var(--vc-teal-800));
display: grid;
place-items: center;
position: relative;
}
.vc-logo-mark::after {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
background: linear-gradient(135deg, transparent 60%, rgba(232,210,158,0.4));
}
.vc-logo-mark span {
color: #fff;
font-weight: 800;
font-size: 18px;
position: relative;
z-index: 1;
letter-spacing: -0.02em;
}
.vc-logo-text { line-height: 1; }
.vc-logo-title { font-weight: 800; font-size: 17px; letter-spacing: -0.02em; color: var(--vc-ink-900); }
.vc-logo-sub { font-size: 9px; color: var(--vc-ink-500); margin-top: 3px; letter-spacing: 0.18em; text-transform: uppercase; }
.vc-nav-links {
list-style: none;
display: flex;
gap: 28px;
margin: 0; padding: 0;
flex: 1;
justify-content: center;
}
.vc-nav-links a {
font-size: 14px;
font-weight: 500;
color: var(--vc-ink-700);
position: relative;
padding: 4px 0;
transition: color 0.2s;
}
.vc-nav-links a::after {
content: '';
position: absolute;
left: 50%; bottom: -2px;
transform: translateX(-50%);
width: 0; height: 2px;
background: var(--vc-teal-700);
transition: width 0.25s var(--vc-ease);
}
.vc-nav-links a:hover { color: var(--vc-ink-900); }
.vc-nav-links a:hover::after { width: 100%; }
.vc-nav-cta { display: flex; gap: 12px; align-items: center; }
.vc-lang-btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 14px;
border-radius: 99px;
border: 1px solid var(--vc-line);
font-size: 13px;
font-weight: 500;
color: var(--vc-ink-700);
transition: all 0.2s;
}
.vc-lang-btn:hover {
border-color: var(--vc-ink-900);
background: rgba(0,0,0,0.02);
}
.vc-globe { font-size: 14px; }
.vc-burger {
display: none;
flex-direction: column;
gap: 4px;
padding: 8px;
}
.vc-burger span {
width: 22px; height: 2px; background: var(--vc-ink-800);
border-radius: 1px;
}
.vc-mobile-menu {
display: none;
flex-direction: column;
gap: 8px;
padding: 16px 32px;
background: #fff;
border-top: 1px solid var(--vc-line-soft);
}
.vc-mobile-menu a {
padding: 10px 0;
font-size: 15px;
font-weight: 500;
}
/* =========================================
HERO
========================================= */
.vc-hero {
min-height: 100vh;
padding: 88px 0 32px;
position: relative;
overflow: hidden;
background: var(--vc-bg);
isolation: isolate;
display: flex;
align-items: center;
}
.vc-hero-bg {
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
}
.vc-hero-grid {
position: absolute;
inset: 0;
background-image:
linear-gradient(var(--vc-line-soft) 1px, transparent 1px),
linear-gradient(90deg, var(--vc-line-soft) 1px, transparent 1px);
background-size: 64px 64px;
mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, #000 30%, transparent 70%);
-webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, #000 30%, transparent 70%);
opacity: 0.5;
}
.vc-hero-blob {
position: absolute;
border-radius: 50%;
filter: blur(80px);
opacity: 0.5;
}
.vc-hero-blob-1 { width: 500px; height: 500px; background: var(--vc-teal-100); top: -100px; right: -100px; }
.vc-hero-blob-2 { width: 400px; height: 400px; background: var(--vc-gold-100); bottom: -50px; left: -50px; }
[dir="rtl"] .vc-hero-blob-1 { right: auto; left: -100px; }
[dir="rtl"] .vc-hero-blob-2 { left: auto; right: -50px; }
.vc-hero-grid-layout {
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: 40px;
align-items: center;
width: 100%;
}
.vc-hero-content { max-width: 600px; }
.vc-hero-title {
font-size: clamp(28px, 3.6vw, 52px);
font-weight: 800;
line-height: 1.05;
letter-spacing: -0.025em;
color: var(--vc-ink-900);
margin: 14px 0 14px;
text-wrap: balance;
}
[dir="rtl"] .vc-hero-title {
line-height: 1.18;
letter-spacing: 0;
font-weight: 700;
}
.vc-hero-accent {
background: linear-gradient(135deg, var(--vc-teal-700) 0%, var(--vc-teal-800) 50%, var(--vc-gold-600) 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
display: inline-block;
}
.vc-hero-subtitle {
font-size: 15px;
line-height: 1.55;
color: var(--vc-ink-500);
margin: 0 0 18px;
text-wrap: pretty;
max-width: 540px;
}
.vc-hero-cta {
display: flex;
gap: 10px;
flex-wrap: wrap;
margin-bottom: 22px;
}
.vc-hero-badges {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 18px;
}
.vc-badge {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 12px;
font-weight: 500;
color: var(--vc-ink-700);
padding: 6px 12px;
background: rgba(255,255,255,0.6);
border: 1px solid var(--vc-line);
border-radius: 99px;
}
.vc-badge-dot {
width: 6px; height: 6px;
border-radius: 50%;
background: var(--vc-good);
box-shadow: 0 0 0 2px rgba(11,123,67,0.18);
}
.vc-hero-stores { display: flex; gap: 10px; flex-wrap: wrap; }
.vc-store {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 10px 18px;
background: var(--vc-ink-900);
color: #fff;
border-radius: 12px;
font-size: 13px;
transition: transform 0.2s;
}
.vc-store:hover { transform: translateY(-2px); }
.vc-store-icon {
display: inline-block;
width: 22px; height: 22px;
background: #fff;
-webkit-mask: url("data:image/svg+xml;utf8,") no-repeat center / contain;
mask: url("data:image/svg+xml;utf8,") no-repeat center / contain;
}
.vc-store-icon-google {
-webkit-mask: url("data:image/svg+xml;utf8,") no-repeat center / contain;
mask: url("data:image/svg+xml;utf8,") no-repeat center / contain;
}
.vc-store-tiny { font-size: 9px; opacity: 0.7; line-height: 1; }
.vc-store-name { font-size: 14px; font-weight: 700; line-height: 1; margin-top: 3px; }
.vc-hero-visual {
position: relative;
display: grid;
place-items: center;
min-height: 420px;
}
.vc-hero-phone-stack {
position: relative;
display: grid;
place-items: center;
}
.vc-hero-phone {
filter: drop-shadow(0 30px 60px rgba(11,93,85,0.18));
transition: transform 0.4s var(--vc-ease);
}
.vc-hero-phone-back {
position: absolute;
transform: translate(70px, 30px) rotate(6deg);
opacity: 0.95;
z-index: 1;
}
[dir="rtl"] .vc-hero-phone-back { transform: translate(-70px, 30px) rotate(-6deg); }
.vc-hero-phone-front { position: relative; z-index: 2; }
.vc-hero-floating {
position: absolute;
background: #fff;
border: 1px solid var(--vc-line-soft);
border-radius: var(--vc-radius);
padding: 12px 18px;
display: flex;
align-items: center;
gap: 12px;
box-shadow: 0 14px 40px -10px rgba(11,93,85,0.18);
z-index: 3;
animation: vcFloat 6s var(--vc-ease) infinite;
}
.vc-float-card-1 {
top: 12%;
left: -10%;
animation-delay: 0s;
}
.vc-float-card-2 {
bottom: 14%;
right: -8%;
animation-delay: 1.5s;
}
[dir="rtl"] .vc-float-card-1 { left: auto; right: -10%; }
[dir="rtl"] .vc-float-card-2 { right: auto; left: -8%; }
@keyframes vcFloat {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-8px); }
}
.vc-float-icon {
width: 36px; height: 36px;
border-radius: 10px;
background: var(--vc-teal-50);
display: grid;
place-items: center;
font-size: 18px;
}
.vc-float-tiny { font-size: 10px; color: var(--vc-ink-500); line-height: 1; margin-bottom: 4px; }
.vc-float-big { font-size: 22px; font-weight: 800; color: var(--vc-ink-900); letter-spacing: -0.02em; line-height: 1; }
.vc-scroll-cue {
position: absolute;
bottom: 16px;
left: 50%;
transform: translateX(-50%);
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
font-size: 10px;
color: var(--vc-ink-500);
letter-spacing: 0.2em;
text-transform: uppercase;
}
.vc-scroll-line {
width: 1px; height: 28px;
background: linear-gradient(to bottom, transparent, var(--vc-ink-400));
position: relative;
overflow: hidden;
}
.vc-scroll-line::after {
content: '';
position: absolute;
width: 100%;
height: 12px;
background: var(--vc-teal-700);
animation: vcScrollDot 2s linear infinite;
}
@keyframes vcScrollDot {
0% { top: -12px; opacity: 0; }
30% { opacity: 1; }
100% { top: 40px; opacity: 0; }
}
/* =========================================
What Is - dashboard preview
========================================= */
.vc-what-dashboard {
position: relative;
max-width: 1080px;
margin: 64px auto 80px;
}
.vc-what-pin {
position: absolute;
background: #fff;
border: 1px solid var(--vc-line-soft);
border-radius: 99px;
padding: 8px 14px;
display: flex;
align-items: center;
gap: 8px;
font-size: 12px;
font-weight: 500;
color: var(--vc-ink-700);
box-shadow: 0 10px 24px -8px rgba(11,93,85,0.15);
}
.vc-what-pin-1 { top: -16px; left: 8%; }
.vc-what-pin-2 { bottom: -16px; right: 6%; }
[dir="rtl"] .vc-what-pin-1 { left: auto; right: 8%; }
[dir="rtl"] .vc-what-pin-2 { right: auto; left: 6%; }
.vc-pin-dot {
width: 8px; height: 8px;
border-radius: 50%;
background: var(--vc-good);
box-shadow: 0 0 0 3px rgba(11,123,67,0.16);
animation: vcPulse 2s ease-in-out infinite;
}
.vc-pin-dot-gold { background: var(--vc-gold-500); box-shadow: 0 0 0 3px rgba(200,162,74,0.2); }
@keyframes vcPulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.7; transform: scale(0.92); }
}
.vc-what-trio {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.vc-trio-card {
background: var(--vc-bg-card);
border: 1px solid var(--vc-line-soft);
border-radius: var(--vc-radius-lg);
padding: 32px;
position: relative;
transition: all 0.3s var(--vc-ease);
}
.vc-trio-card:hover {
border-color: var(--vc-teal-100);
transform: translateY(-2px);
box-shadow: 0 20px 40px -20px rgba(11,93,85,0.15);
}
.vc-trio-tag {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 12px;
font-weight: 600;
color: var(--vc-teal-700);
padding: 6px 12px;
background: var(--vc-teal-50);
border-radius: 99px;
margin-bottom: 16px;
}
.vc-trio-card p {
color: var(--vc-ink-500);
font-size: 15px;
line-height: 1.6;
margin: 0 0 20px;
}
.vc-trio-chart {
border-top: 1px dashed var(--vc-line);
padding-top: 16px;
}
.vc-trio-flags {
display: flex;
flex-wrap: wrap;
gap: 8px;
border-top: 1px dashed var(--vc-line);
padding-top: 16px;
font-size: 22px;
line-height: 1;
}
.vc-trio-stamp {
border-top: 1px dashed var(--vc-line);
padding-top: 16px;
display: flex;
justify-content: center;
}
.vc-stamp {
display: inline-grid;
place-items: center;
width: 84px; height: 84px;
border-radius: 50%;
border: 2px dashed var(--vc-gold-500);
color: var(--vc-gold-700);
text-align: center;
}
.vc-stamp-num { font-weight: 800; font-size: 22px; letter-spacing: -0.02em; line-height: 1; }
.vc-stamp-label { font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase; margin-top: 3px; }
/* =========================================
CHALLENGES
========================================= */
.vc-challenges-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
.vc-challenge-card {
background: var(--vc-bg-card);
border: 1px solid var(--vc-line-soft);
border-radius: var(--vc-radius-lg);
padding: 36px 32px 32px;
position: relative;
overflow: hidden;
transition: all 0.3s var(--vc-ease);
}
.vc-challenge-card:hover {
transform: translateY(-2px);
border-color: var(--vc-line);
}
.vc-challenge-num {
font-family: var(--vc-font-display);
font-size: 56px;
font-weight: 800;
letter-spacing: -0.04em;
color: var(--vc-ink-300);
line-height: 1;
margin-bottom: 24px;
}
.vc-challenge-card p {
color: var(--vc-ink-500);
font-size: 15px;
line-height: 1.6;
margin: 0;
}
.vc-challenge-line {
position: absolute;
bottom: 0; left: 0; right: 0;
height: 3px;
background: linear-gradient(90deg, var(--vc-teal-700), var(--vc-gold-500));
transform: scaleX(0);
transform-origin: left;
transition: transform 0.4s var(--vc-ease);
}
[dir="rtl"] .vc-challenge-line { transform-origin: right; }
.vc-challenge-card:hover .vc-challenge-line { transform: scaleX(1); }
/* =========================================
STATS
========================================= */
.vc-stats-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
}
.vc-stat-card {
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.08);
border-radius: var(--vc-radius-lg);
padding: 32px 28px;
position: relative;
overflow: hidden;
transition: all 0.3s var(--vc-ease);
}
.vc-stat-card:hover {
background: rgba(255,255,255,0.06);
border-color: rgba(255,255,255,0.12);
transform: translateY(-2px);
}
.vc-stat-tone-bar {
position: absolute;
top: 0; left: 0;
height: 3px;
width: 40px;
border-radius: 0 0 3px 0;
}
.vc-stat-warn .vc-stat-tone-bar { background: var(--vc-warn); }
.vc-stat-good .vc-stat-tone-bar { background: var(--vc-good); }
.vc-stat-value { margin-bottom: 16px; }
.vc-stat-num {
font-family: var(--vc-font-display);
font-size: clamp(48px, 5.5vw, 72px);
font-weight: 800;
letter-spacing: -0.04em;
line-height: 1;
color: #fff;
display: inline-flex;
align-items: baseline;
}
.vc-stat-suffix {
font-size: 0.5em;
margin-left: 4px;
opacity: 0.7;
font-weight: 600;
}
[dir="rtl"] .vc-stat-suffix { margin-left: 0; margin-right: 4px; }
.vc-stat-label {
font-size: 14px;
line-height: 1.5;
color: rgba(255,255,255,0.78);
margin: 0 0 20px;
min-height: 60px;
}
[dir="rtl"] .vc-stat-label { font-size: 15px; line-height: 1.6; }
.vc-stat-source {
font-size: 11px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--vc-gold-400);
display: flex;
align-items: center;
gap: 8px;
padding-top: 16px;
border-top: 1px solid rgba(255,255,255,0.1);
}
[dir="rtl"] .vc-stat-source { letter-spacing: 0.04em; }
.vc-source-bar { width: 16px; height: 1px; background: var(--vc-gold-400); }
/* =========================================
HOW IT WORKS — scrollytelling
========================================= */
.vc-how-section {
position: relative;
/* Tall outer wrapper drives scroll progress while inner pins */
/* 3 steps × ~100vh of scroll each */
height: 300vh;
background: var(--vc-ink-900);
color: #fff;
/* contain:paint clips the decorative ::before/::after radial glows that
extend past the section's bounds (preventing horizontal page overflow)
WITHOUT creating a scroll container — so descendant position:sticky
still pins to the viewport. */
contain: paint;
}
.vc-how-sticky {
position: sticky;
top: 0;
height: 100vh; /* fallback */
height: 100svh; /* stable across mobile address-bar resize */
overflow: hidden;
display: flex;
align-items: center;
}
.vc-how-stage {
width: 100%;
position: relative;
z-index: 2;
padding: clamp(40px, 6vh, 72px) 0;
}
.vc-how-bg {
position: absolute;
inset: 0;
pointer-events: none;
opacity: 0.4;
}
.vc-how-grid-pattern {
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
background-size: 64px 64px;
mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 30%, transparent 80%);
-webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 30%, transparent 80%);
}
.vc-how-section::before {
content: "";
position: absolute;
width: 600px; height: 600px;
border-radius: 50%;
background: radial-gradient(circle, rgba(15,118,110,0.35), transparent 60%);
top: -200px; right: -200px;
pointer-events: none;
filter: blur(40px);
}
.vc-how-section::after {
content: "";
position: absolute;
width: 500px; height: 500px;
border-radius: 50%;
background: radial-gradient(circle, rgba(200,162,74,0.18), transparent 60%);
bottom: -150px; left: -150px;
pointer-events: none;
filter: blur(50px);
}
.vc-how-head {
display: grid;
grid-template-columns: 1.4fr 1fr;
gap: 32px;
align-items: end;
margin-bottom: clamp(20px, 3vh, 36px);
position: relative;
z-index: 2;
}
.vc-how-title {
font-family: var(--vc-font-display);
font-size: clamp(28px, 3.6vw, 48px);
font-weight: 800;
letter-spacing: -0.025em;
line-height: 1.05;
color: #fff;
margin: 10px 0 12px;
text-wrap: balance;
}
[dir="rtl"] .vc-how-title { line-height: 1.2; }
.vc-how-subtitle {
font-size: clamp(15px, 1.4vw, 18px);
line-height: 1.6;
color: rgba(255,255,255,0.65);
margin: 0;
max-width: 520px;
}
.vc-how-progress {
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 18px;
padding: 20px 22px;
backdrop-filter: blur(8px);
}
.vc-how-progress-track {
height: 4px;
background: rgba(255,255,255,0.08);
border-radius: 99px;
overflow: hidden;
margin-bottom: 14px;
}
.vc-how-progress-fill {
height: 100%;
background: linear-gradient(90deg, var(--vc-teal-500), var(--vc-gold-500));
border-radius: 99px;
transition: width 0.5s var(--vc-ease);
}
[dir="rtl"] .vc-how-progress-fill {
background: linear-gradient(270deg, var(--vc-teal-500), var(--vc-gold-500));
}
.vc-how-progress-meta {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 12px;
letter-spacing: 0.08em;
text-transform: uppercase;
}
[dir="rtl"] .vc-how-progress-meta { letter-spacing: 0.04em; text-transform: none; }
.vc-how-progress-label { color: rgba(255,255,255,0.5); }
.vc-how-progress-label strong { color: var(--vc-gold-400); font-weight: 700; margin: 0 4px; }
.vc-how-progress-time {
color: var(--vc-gold-400);
font-weight: 600;
font-family: var(--vc-font-display);
letter-spacing: 0.04em;
}
/* Stage grid: rail + stacked panels (one visible at a time) */
.vc-how-stage-grid {
display: grid;
grid-template-columns: 160px 1fr;
gap: 0;
position: relative;
z-index: 2;
}
[dir="rtl"] .vc-how-stage-grid { grid-template-columns: 160px 1fr; }
.vc-how-rail {
position: relative;
/* Rail spans the height of the stack */
min-height: 360px;
padding: 12px 0;
}
.vc-how-rail::before {
content: "";
position: absolute;
top: 24px; bottom: 24px;
left: 50%;
width: 1px;
background: rgba(255,255,255,0.08);
transform: translateX(-50%);
}
.vc-how-rail-fill {
position: absolute;
top: 24px;
left: 50%;
width: 2px;
background: linear-gradient(to bottom, var(--vc-teal-500), var(--vc-gold-500));
transform: translateX(-50%);
transition: height 0.6s var(--vc-ease);
border-radius: 99px;
box-shadow: 0 0 20px rgba(43,175,163,0.5);
}
.vc-how-rail-node {
position: absolute;
left: 50%;
transform: translate(-50%, -50%);
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
width: 100%;
text-align: center;
pointer-events: none;
}
.vc-how-rail-dot {
width: 14px; height: 14px;
border-radius: 50%;
background: var(--vc-ink-900);
border: 2px solid rgba(255,255,255,0.2);
position: relative;
z-index: 2;
transition: all 0.3s var(--vc-ease);
}
.vc-how-rail-node.reached .vc-how-rail-dot {
border-color: var(--vc-teal-500);
background: var(--vc-teal-500);
}
.vc-how-rail-node.active .vc-how-rail-dot {
border-color: var(--vc-gold-400);
background: var(--vc-gold-500);
box-shadow: 0 0 0 6px rgba(200,162,74,0.18), 0 0 20px rgba(200,162,74,0.5);
transform: scale(1.15);
}
.vc-how-rail-label {
font-size: 10px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(255,255,255,0.4);
font-weight: 600;
white-space: nowrap;
transition: color 0.3s var(--vc-ease);
}
[dir="rtl"] .vc-how-rail-label { letter-spacing: 0.04em; text-transform: none; }
.vc-how-rail-node.active .vc-how-rail-label { color: var(--vc-gold-400); }
/* Panel stack: panels overlay one another; only active is visible */
.vc-how-stack {
position: relative;
min-height: clamp(360px, 56vh, 520px);
padding: 12px 0;
}
.vc-how-panel {
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(15,118,110,0.18), rgba(11,93,85,0.06));
border: 1px solid rgba(200,162,74,0.28);
border-radius: var(--vc-radius-lg);
padding: clamp(24px, 3vw, 40px);
box-shadow:
0 0 0 1px rgba(200,162,74,0.12) inset,
0 24px 48px -16px rgba(0,0,0,0.6),
0 0 60px -20px rgba(15,118,110,0.4);
transition: opacity 0.55s var(--vc-ease), transform 0.55s var(--vc-ease);
will-change: opacity, transform;
overflow: hidden;
}
.vc-how-panel::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(15,118,110,0.08), transparent 50%);
pointer-events: none;
}
.vc-how-panel-active {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
z-index: 3;
}
.vc-how-panel-past {
opacity: 0;
transform: translateY(-24px);
pointer-events: none;
z-index: 1;
}
.vc-how-panel-future {
opacity: 0;
transform: translateY(24px);
pointer-events: none;
z-index: 1;
}
.vc-how-panel-grid {
position: relative;
display: grid;
grid-template-columns: 140px 1fr 200px;
gap: clamp(20px, 3vw, 36px);
align-items: start;
height: 100%;
}
.vc-how-card-meta {
position: relative;
}
.vc-how-card-num {
font-family: var(--vc-font-display);
font-size: clamp(48px, 5.2vw, 72px);
font-weight: 800;
letter-spacing: -0.04em;
line-height: 1;
background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(255,255,255,0.4));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
margin-bottom: 14px;
transition: all 0.4s var(--vc-ease);
}
.vc-how-panel-active .vc-how-card-num {
background: linear-gradient(180deg, var(--vc-gold-200), var(--vc-gold-500));
-webkit-background-clip: text;
background-clip: text;
}
.vc-how-card-phase {
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(255,255,255,0.5);
font-weight: 600;
margin-bottom: 4px;
}
[dir="rtl"] .vc-how-card-phase { letter-spacing: 0.04em; text-transform: none; }
.vc-how-panel-active .vc-how-card-phase { color: var(--vc-teal-500); }
.vc-how-card-when {
font-size: 13px;
color: rgba(255,255,255,0.7);
font-weight: 500;
font-family: var(--vc-font-display);
}
.vc-how-card-content {
min-width: 0;
}
.vc-how-card-title {
font-family: var(--vc-font-display);
font-size: clamp(20px, 2.2vw, 28px);
font-weight: 700;
letter-spacing: -0.01em;
color: #fff;
margin: 0 0 12px;
line-height: 1.2;
}
.vc-how-card-body {
font-size: 15px;
line-height: 1.65;
color: rgba(255,255,255,0.7);
margin: 0 0 18px;
text-wrap: pretty;
}
.vc-how-card-actions {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.vc-how-action-chip {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 12px;
font-weight: 500;
color: rgba(255,255,255,0.7);
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.08);
padding: 6px 12px;
border-radius: 99px;
transition: all 0.3s var(--vc-ease);
}
.vc-how-action-chip svg { color: rgba(255,255,255,0.4); flex-shrink: 0; }
.vc-how-panel-active .vc-how-action-chip {
background: rgba(43,175,163,0.12);
border-color: rgba(43,175,163,0.3);
color: rgba(255,255,255,0.95);
}
.vc-how-panel-active .vc-how-action-chip svg { color: var(--vc-teal-500); }
.vc-how-card-metrics {
display: flex;
flex-direction: column;
gap: 12px;
padding-inline-start: clamp(16px, 2vw, 24px);
border-inline-start: 1px solid rgba(255,255,255,0.08);
}
.vc-how-metric {
display: flex;
flex-direction: column;
gap: 4px;
}
.vc-how-metric-v {
font-family: var(--vc-font-display);
font-size: clamp(22px, 2.4vw, 30px);
font-weight: 800;
letter-spacing: -0.03em;
line-height: 1;
background: linear-gradient(135deg, var(--vc-teal-500), var(--vc-gold-400));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.vc-how-metric-l {
font-size: 11px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: rgba(255,255,255,0.5);
font-weight: 500;
line-height: 1.3;
}
[dir="rtl"] .vc-how-metric-l { letter-spacing: 0.04em; text-transform: none; }
/* Mobile dot indicator (hidden on desktop) */
.vc-how-dots {
display: none;
justify-content: center;
align-items: center;
gap: 8px;
margin-top: 20px;
position: relative;
z-index: 3;
}
.vc-how-dot {
width: 6px; height: 6px; border-radius: 50%;
background: rgba(255,255,255,0.18);
transition: all 0.3s var(--vc-ease);
}
.vc-how-dot.past { background: var(--vc-teal-500); opacity: 0.6; }
.vc-how-dot.active {
background: var(--vc-gold-500);
width: 22px; border-radius: 99px;
box-shadow: 0 0 12px rgba(200,162,74,0.5);
}
@media (max-width: 1024px) {
.vc-how-head { grid-template-columns: 1fr; gap: 20px; margin-bottom: 18px; }
.vc-how-panel-grid { grid-template-columns: 100px 1fr; grid-template-rows: auto auto; }
.vc-how-card-num { font-size: 48px; }
.vc-how-card-metrics {
grid-column: 1 / -1;
flex-direction: row;
gap: 24px;
padding-inline-start: 0;
border-inline-start: 0;
padding-top: 16px;
margin-top: 4px;
border-top: 1px solid rgba(255,255,255,0.08);
}
}
@media (max-width: 720px) {
/* Shorter scroll distance on mobile so it doesn't feel endless */
.vc-how-section { height: 240vh; }
.vc-how-stage { padding: 24px 0; }
.vc-how-stage-grid { grid-template-columns: 1fr; }
[dir="rtl"] .vc-how-stage-grid { grid-template-columns: 1fr; }
.vc-how-rail { display: none; }
.vc-how-stack { min-height: clamp(380px, 62vh, 540px); }
.vc-how-panel { padding: 20px; border-radius: 18px; }
.vc-how-panel-grid { grid-template-columns: 1fr; gap: 14px; }
.vc-how-head-right { display: none; } /* Progress bar replaced by dots on mobile */
.vc-how-card-num { font-size: 36px; margin-bottom: 6px; }
.vc-how-card-title { font-size: 20px; }
.vc-how-card-body { font-size: 14px; line-height: 1.55; margin-bottom: 14px; }
.vc-how-action-chip { font-size: 11px; padding: 5px 10px; }
.vc-how-card-metrics { flex-direction: row; gap: 20px; padding-top: 14px; }
.vc-how-metric-v { font-size: 22px; }
.vc-how-dots { display: flex; }
}
/* =========================================
FEATURES
========================================= */
.vc-tabs-wrap { display: flex; justify-content: center; margin-bottom: 40px; }
.vc-tabs {
display: inline-flex;
padding: 6px;
background: var(--vc-bg-card);
border: 1px solid var(--vc-line-soft);
border-radius: 99px;
gap: 4px;
}
.vc-tab {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 20px;
border-radius: 99px;
font-size: 14px;
font-weight: 600;
color: var(--vc-ink-500);
transition: all 0.25s var(--vc-ease);
}
.vc-tab.active {
background: var(--vc-ink-900);
color: #fff;
}
.vc-tab-count {
font-size: 11px;
padding: 2px 7px;
border-radius: 99px;
background: var(--vc-bg-alt);
color: var(--vc-ink-500);
font-weight: 700;
}
.vc-tab.active .vc-tab-count {
background: var(--vc-gold-500);
color: var(--vc-ink-900);
}
.vc-features-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
.vc-feature-card {
background: var(--vc-bg-card);
border: 1px solid var(--vc-line-soft);
border-radius: var(--vc-radius-lg);
padding: 28px;
position: relative;
transition: all 0.3s var(--vc-ease);
overflow: hidden;
}
.vc-feature-card:hover {
border-color: var(--vc-teal-100);
transform: translateY(-2px);
box-shadow: 0 20px 40px -20px rgba(11,93,85,0.12);
}
.vc-feature-card-feature {
grid-column: span 2;
grid-row: span 1;
background: linear-gradient(135deg, var(--vc-teal-700), var(--vc-teal-800));
color: #fff;
border-color: var(--vc-teal-700);
display: grid;
grid-template-columns: 1fr auto;
gap: 24px;
padding: 36px;
}
.vc-feature-card-feature .vc-h3 { color: #fff; font-size: 24px; }
.vc-feature-card-feature p { color: rgba(255,255,255,0.85); }
.vc-feature-card-feature .vc-feature-tag { background: rgba(255,255,255,0.12); color: var(--vc-gold-400); }
.vc-feature-card-feature .vc-feature-icon { font-size: 32px; }
.vc-feature-tag {
display: inline-flex;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--vc-teal-700);
background: var(--vc-teal-50);
padding: 4px 10px;
border-radius: 99px;
margin-bottom: 12px;
}
[dir="rtl"] .vc-feature-tag { letter-spacing: 0.04em; }
.vc-feature-icon {
font-size: 28px;
margin-bottom: 12px;
width: 52px; height: 52px;
display: grid;
place-items: center;
background: var(--vc-bg-alt);
border-radius: 14px;
}
.vc-feature-card-feature .vc-feature-icon { background: rgba(255,255,255,0.12); }
.vc-feature-card p {
color: var(--vc-ink-500);
font-size: 14px;
line-height: 1.6;
margin: 0;
}
.vc-feature-preview {
align-self: center;
display: grid;
place-items: center;
}
/* =========================================
LANGUAGES
========================================= */
.vc-langs-orbit {
position: relative;
max-width: 1080px;
margin: 0 auto;
display: grid;
grid-template-columns: 280px 1fr;
gap: 64px;
align-items: center;
}
.vc-langs-center {
background: linear-gradient(135deg, var(--vc-teal-700), var(--vc-teal-800));
color: #fff;
border-radius: 32px;
padding: 48px 32px;
text-align: center;
position: relative;
overflow: hidden;
aspect-ratio: 1 / 1;
display: grid;
place-content: center;
}
.vc-langs-center::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(circle at 30% 30%, rgba(232,210,158,0.2), transparent 60%);
}
.vc-langs-globe { font-size: 48px; margin-bottom: 12px; position: relative; }
.vc-langs-num {
font-size: 96px;
font-weight: 800;
letter-spacing: -0.05em;
line-height: 1;
position: relative;
}
.vc-langs-cap {
font-size: 12px;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--vc-gold-400);
margin-top: 8px;
position: relative;
}
[dir="rtl"] .vc-langs-cap { letter-spacing: 0.06em; }
.vc-langs-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
}
.vc-lang-card {
background: var(--vc-bg-card);
border: 1px solid var(--vc-line-soft);
border-radius: var(--vc-radius);
padding: 20px;
display: flex;
align-items: center;
gap: 14px;
transition: all 0.3s var(--vc-ease);
}
.vc-lang-card:hover {
border-color: var(--vc-teal-100);
background: var(--vc-teal-50);
transform: translateY(-2px);
}
.vc-lang-flag { font-size: 28px; }
.vc-lang-name { font-weight: 600; font-size: 14px; color: var(--vc-ink-900); line-height: 1.2; }
.vc-lang-native { font-size: 12px; color: var(--vc-ink-500); margin-top: 2px; line-height: 1.2; }
/* =========================================
WHY
========================================= */
.vc-why-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 1fr;
gap: 16px;
}
.vc-why-card {
background: var(--vc-bg-card);
border: 1px solid var(--vc-line-soft);
border-radius: var(--vc-radius-lg);
padding: 32px;
position: relative;
transition: all 0.3s var(--vc-ease);
display: flex;
flex-direction: column;
gap: 16px;
}
.vc-why-card:hover {
border-color: var(--vc-teal-100);
transform: translateY(-2px);
box-shadow: 0 20px 40px -20px rgba(11,93,85,0.12);
}
.vc-why-card-feature {
grid-column: span 2;
background: var(--vc-ink-900);
color: #fff;
border-color: var(--vc-ink-900);
}
.vc-why-card-feature .vc-h3 { color: #fff; font-size: 24px; }
.vc-why-card-feature p { color: rgba(255,255,255,0.78); }
.vc-why-icon {
font-size: 28px;
width: 56px; height: 56px;
display: grid;
place-items: center;
background: var(--vc-bg-alt);
border-radius: 14px;
}
.vc-why-card-feature .vc-why-icon { background: rgba(255,255,255,0.08); }
.vc-why-card p {
color: var(--vc-ink-500);
font-size: 14px;
line-height: 1.6;
margin: 0;
flex: 1;
}
.vc-why-num {
position: absolute;
top: 24px;
right: 28px;
font-family: var(--vc-font-display);
font-size: 14px;
font-weight: 700;
letter-spacing: 0.08em;
color: var(--vc-ink-300);
}
[dir="rtl"] .vc-why-num { right: auto; left: 28px; }
.vc-why-card-feature .vc-why-num { color: rgba(255,255,255,0.4); }
/* =========================================
PARTNERS
========================================= */
.vc-partner-cats {
display: flex;
justify-content: center;
gap: 8px;
flex-wrap: wrap;
margin-bottom: 40px;
}
.vc-partner-cat {
padding: 8px 18px;
background: var(--vc-bg-card);
border: 1px solid var(--vc-line-soft);
border-radius: 99px;
font-size: 13px;
font-weight: 500;
color: var(--vc-ink-700);
}
.vc-partner-marquee {
position: relative;
overflow: hidden;
margin-bottom: 64px;
-webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.vc-partner-track {
display: flex;
gap: 16px;
animation: vcMarquee 40s linear infinite;
width: max-content;
}
@keyframes vcMarquee {
to { transform: translateX(-50%); }
}
[dir="rtl"] .vc-partner-track { animation-direction: reverse; }
.vc-partner-logo {
flex-shrink: 0;
display: inline-flex;
align-items: center;
gap: 10px;
padding: 14px 20px;
background: var(--vc-bg-card);
border: 1px solid var(--vc-line-soft);
border-radius: 14px;
font-size: 14px;
font-weight: 600;
color: var(--vc-ink-700);
white-space: nowrap;
}
.vc-partner-letter {
width: 28px; height: 28px;
border-radius: 8px;
background: linear-gradient(135deg, var(--vc-teal-700), var(--vc-teal-800));
color: #fff;
display: grid;
place-items: center;
font-weight: 700;
font-size: 13px;
}
.vc-partner-stats {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
padding: 32px;
background: var(--vc-bg-card);
border: 1px solid var(--vc-line-soft);
border-radius: var(--vc-radius-lg);
}
.vc-pstat-n {
font-family: var(--vc-font-display);
font-size: 36px;
font-weight: 800;
letter-spacing: -0.03em;
color: var(--vc-ink-900);
line-height: 1;
}
.vc-pstat-l {
font-size: 12px;
color: var(--vc-ink-500);
margin-top: 6px;
letter-spacing: 0.08em;
text-transform: uppercase;
}
[dir="rtl"] .vc-pstat-l { letter-spacing: 0.04em; }
/* =========================================
CREDENTIALS
========================================= */
.vc-cred-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
.vc-cred-card {
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.08);
border-radius: var(--vc-radius-lg);
padding: 32px;
position: relative;
overflow: hidden;
}
.vc-cred-tag {
display: inline-block;
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
font-weight: 700;
color: var(--vc-gold-400);
padding: 4px 10px;
background: rgba(232,210,158,0.1);
border: 1px solid rgba(232,210,158,0.2);
border-radius: 99px;
margin-bottom: 16px;
}
[dir="rtl"] .vc-cred-tag { letter-spacing: 0.06em; }
.vc-cred-card .vc-h3 { color: #fff; }
.vc-cred-card p {
color: rgba(255,255,255,0.72);
font-size: 14px;
line-height: 1.6;
margin: 0 0 24px;
}
.vc-cred-seal {
position: absolute;
bottom: 20px;
right: 20px;
opacity: 0.5;
}
[dir="rtl"] .vc-cred-seal { right: auto; left: 20px; }
/* =========================================
CTA
========================================= */
/* ==== CTA — final-conversion section (light, on-brand) ==== */
/* Sandwiched between two dark sections (Credentials + Footer), so the CTA
itself is a LIGHT moment. The conversion still pops via a prominent white
card with brand-tinted decorations, contrasting cleanly with the dark
sections on either side. */
.vc-section-cta {
padding: clamp(80px, 12vh, 140px) 0;
background: var(--vc-bg);
position: relative;
overflow: hidden;
isolation: isolate;
}
/* Subtle teal pattern in the section bg */
.vc-cta-grid {
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(15, 118, 110, 0.06) 1px, transparent 1px),
linear-gradient(90deg, rgba(15, 118, 110, 0.06) 1px, transparent 1px);
background-size: 64px 64px;
mask-image: radial-gradient(ellipse 90% 80% at 50% 50%, #000 20%, transparent 75%);
-webkit-mask-image: radial-gradient(ellipse 90% 80% at 50% 50%, #000 20%, transparent 75%);
pointer-events: none;
z-index: 0;
}
/* Soft glow orbs — same teal/gold story as the rest of the site, on cream */
.vc-cta-orb {
position: absolute;
width: 520px; height: 520px;
border-radius: 50%;
filter: blur(80px);
pointer-events: none;
z-index: 0;
}
.vc-cta-orb-a {
top: -200px;
right: -140px;
background: radial-gradient(circle, rgba(15, 118, 110, 0.22), transparent 65%);
}
.vc-cta-orb-b {
bottom: -200px;
left: -160px;
background: radial-gradient(circle, rgba(217, 162, 62, 0.18), transparent 65%);
}
.vc-section-cta .vc-container { position: relative; z-index: 1; }
/* The CTA is a prominent rounded card on the cream — matches the rest of
the site's "white card on cream" pattern. */
.vc-cta-wrap {
max-width: 980px;
margin: 0 auto;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
gap: clamp(20px, 3vh, 28px);
background: #FFFFFF;
border: 1px solid rgba(15, 118, 110, 0.10);
border-radius: 28px;
padding: clamp(40px, 6vh, 80px) clamp(24px, 4vw, 64px);
box-shadow:
0 24px 60px rgba(11, 93, 85, 0.10),
0 6px 16px rgba(11, 93, 85, 0.06);
position: relative;
overflow: hidden;
}
/* Decorative inner edge highlights at the corners of the card */
.vc-cta-wrap::before {
content: '';
position: absolute;
top: -120px;
right: -100px;
width: 320px;
height: 320px;
border-radius: 50%;
background: radial-gradient(circle, rgba(127, 230, 212, 0.20), transparent 65%);
pointer-events: none;
filter: blur(20px);
}
[dir="rtl"] .vc-cta-wrap::before { right: auto; left: -100px; }
.vc-cta-wrap::after {
content: '';
position: absolute;
bottom: -140px;
left: -120px;
width: 360px;
height: 360px;
border-radius: 50%;
background: radial-gradient(circle, rgba(217, 162, 62, 0.14), transparent 65%);
pointer-events: none;
filter: blur(20px);
}
[dir="rtl"] .vc-cta-wrap::after { left: auto; right: -120px; }
.vc-cta-wrap > * { position: relative; z-index: 1; }
.vc-cta-eyebrow {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 7px 14px;
border: 1px solid rgba(15, 118, 110, 0.18);
background: rgba(15, 118, 110, 0.07);
border-radius: 999px;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: #0B5D55;
}
[dir="rtl"] .vc-cta-eyebrow { letter-spacing: 0.02em; text-transform: none; }
.vc-cta-eyebrow-dot {
width: 6px; height: 6px;
border-radius: 50%;
background: linear-gradient(135deg, #3FBFAE, #0F766E);
box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.12);
}
/* Heading — dark ink, big */
.vc-section-cta .vc-cta-title.vc-h2 {
color: #0B2520;
font-size: clamp(34px, 4.6vw, 56px);
font-weight: 800;
line-height: 1.1;
letter-spacing: -0.02em;
margin: 0;
max-width: 16ch;
text-wrap: balance;
}
[dir="rtl"] .vc-section-cta .vc-cta-title.vc-h2 {
letter-spacing: 0;
line-height: 1.25;
}
.vc-cta-body {
color: rgba(11, 37, 32, 0.72);
font-size: clamp(15px, 1.1vw, 17px);
line-height: 1.6;
margin: 0;
max-width: 60ch;
}
.vc-cta-actions { margin-top: 6px; }
/* Primary CTA — solid teal, mirrors the rest of the site's primary buttons */
.vc-btn-cta-primary {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 18px 36px;
border-radius: 999px;
background: linear-gradient(135deg, #0B5D55 0%, #0F766E 60%, #14B8A6 100%);
color: #FFFFFF;
font-size: 16px;
font-weight: 700;
letter-spacing: -0.01em;
text-decoration: none;
border: 1px solid rgba(11, 93, 85, 0.20);
box-shadow:
0 14px 32px rgba(11, 93, 85, 0.28),
0 4px 8px rgba(11, 93, 85, 0.16),
inset 0 1px 0 rgba(255, 255, 255, 0.18);
transition: transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s ease, background .3s ease;
}
.vc-btn-cta-primary:hover {
transform: translateY(-2px);
box-shadow:
0 20px 42px rgba(11, 93, 85, 0.36),
0 6px 12px rgba(11, 93, 85, 0.20),
inset 0 1px 0 rgba(255, 255, 255, 0.24);
}
.vc-btn-cta-primary .arr {
display: inline-block;
transition: transform .3s ease;
}
.vc-btn-cta-primary:hover .arr { transform: translateX(-3px); }
[dir="ltr"] .vc-btn-cta-primary:hover .arr { transform: translateX(3px); }
/* Trust strip — muted teal on cream */
.vc-cta-trust {
display: inline-flex;
flex-wrap: wrap;
justify-content: center;
gap: 14px;
margin-top: clamp(8px, 1.5vh, 16px);
padding-top: clamp(12px, 2vh, 20px);
border-top: 1px solid rgba(15, 118, 110, 0.10);
width: 100%;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.10em;
color: rgba(11, 37, 32, 0.55);
text-transform: uppercase;
}
[dir="rtl"] .vc-cta-trust { text-transform: none; letter-spacing: 0.02em; }
.vc-cta-trust-dot {
color: rgba(15, 118, 110, 0.30);
letter-spacing: 0;
}
/* Mobile: shrink card padding + button */
@media (max-width: 767px) {
.vc-section-cta { padding: 64px 0; }
.vc-cta-orb { width: 320px; height: 320px; filter: blur(60px); }
.vc-cta-orb-a { top: -120px; right: -80px; }
.vc-cta-orb-b { bottom: -140px; left: -100px; }
.vc-cta-grid { background-size: 40px 40px; }
.vc-cta-wrap {
border-radius: 22px;
padding: 36px 20px 28px;
}
.vc-btn-cta-primary { padding: 14px 26px; font-size: 15px; }
.vc-cta-trust { font-size: 10px; gap: 10px; }
}
/* =========================================
FOOTER
========================================= */
.vc-footer {
background: var(--vc-bg-deep);
color: #fff;
padding: 80px 0 32px;
position: relative;
}
.vc-footer-top {
display: grid;
grid-template-columns: 1.5fr 1fr 1fr 1fr;
gap: 48px;
padding-bottom: 48px;
border-bottom: 1px solid rgba(255,255,255,0.08);
}
.vc-footer-brand .vc-logo-title { color: #fff; }
.vc-footer-brand .vc-logo-sub { color: var(--vc-gold-400); }
.vc-footer-tag {
margin: 16px 0 20px;
font-size: 14px;
color: rgba(255,255,255,0.6);
line-height: 1.5;
max-width: 320px;
}
.vc-footer-org-logos {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.vc-orgbox {
padding: 6px 12px;
border: 1px solid rgba(255,255,255,0.18);
border-radius: 8px;
font-size: 11px;
letter-spacing: 0.16em;
font-weight: 600;
color: rgba(255,255,255,0.7);
}
.vc-footer-col-title {
font-size: 12px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--vc-gold-400);
margin-bottom: 16px;
font-weight: 600;
}
[dir="rtl"] .vc-footer-col-title { letter-spacing: 0.04em; }
.vc-footer-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.vc-footer-col a {
font-size: 14px;
color: rgba(255,255,255,0.7);
transition: color 0.2s;
}
.vc-footer-col a:hover { color: #fff; }
.vc-footer-bottom {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 32px;
font-size: 12px;
color: rgba(255,255,255,0.5);
}
/* =========================================
Layout primitives - natural flow
========================================= */
.vc-fit {
padding: clamp(64px, 9vw, 112px) 0;
position: relative;
}
.vc-hero.vc-fit {
min-height: 100vh;
padding: clamp(96px, 12vw, 128px) 0 clamp(48px, 6vw, 80px);
display: flex;
align-items: center;
}
.vc-fit-inner {
width: 100%;
max-width: var(--vc-max);
margin: 0 auto;
padding: 0 clamp(20px, 4vw, 40px);
}
.vc-fit .vc-section-head { margin: 0 auto clamp(16px, 2.2vh, 28px); }
.vc-stats-sticky .vc-section-head,
.vc-features-sticky .vc-section-head,
.vc-app-sticky .vc-section-head { margin-bottom: 0; }
.vc-fit .vc-h2 { font-size: clamp(28px, 3.6vw, 48px); margin: 12px 0 14px; line-height: 1.1; }
[dir="rtl"] .vc-fit .vc-h2 { line-height: 1.25; }
.vc-fit .vc-section-lead { font-size: clamp(14px, 1.4vw, 17px); line-height: 1.6; }
/* Hero centered layout */
.vc-hero-center {
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
max-width: 920px;
margin: 0 auto;
padding: 0 clamp(20px, 4vw, 40px);
width: 100%;
}
.vc-hero-center .vc-hero-title {
font-size: clamp(36px, 5.6vw, 72px);
margin: 18px 0 16px;
text-align: center;
line-height: 1.05;
}
[dir="rtl"] .vc-hero-center .vc-hero-title { line-height: 1.2; }
.vc-hero-center .vc-hero-subtitle {
text-align: center;
max-width: 640px;
margin: 0 auto 28px;
font-size: clamp(15px, 1.5vw, 18px);
}
.vc-hero-center .vc-hero-cta {
justify-content: center;
margin-bottom: 32px;
flex-wrap: wrap;
}
.vc-hero-mini-stats {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: clamp(16px, 2.5vw, 32px);
padding: clamp(20px, 2.5vw, 28px) clamp(24px, 3vw, 40px);
background: rgba(255,255,255,0.7);
border: 1px solid var(--vc-line-soft);
border-radius: var(--vc-radius-lg);
backdrop-filter: blur(8px);
width: 100%;
max-width: 720px;
}
.vc-hms-n {
font-family: var(--vc-font-display);
font-size: clamp(22px, 2.4vw, 30px);
font-weight: 800;
letter-spacing: -0.03em;
color: var(--vc-ink-900);
line-height: 1;
}
.vc-hms-l {
font-size: 11px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--vc-ink-500);
margin-top: 6px;
font-weight: 600;
}
[dir="rtl"] .vc-hms-l { letter-spacing: 0.04em; }
/* App download section */
.vc-app-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(40px, 5vw, 80px);
align-items: center;
}
.vc-app-content { max-width: 540px; }
.vc-app-content .vc-eyebrow { margin-bottom: 14px; }
.vc-app-content .vc-h2 { text-align: start; font-size: clamp(28px, 3.6vw, 44px); }
.vc-app-content .vc-section-lead { text-align: start; margin: 0 0 24px; font-size: 16px; }
.vc-app-content .vc-hero-stores { margin-bottom: 24px; }
.vc-app-features {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.vc-app-features > div {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 14px;
background: var(--vc-bg-card);
border: 1px solid var(--vc-line-soft);
border-radius: 12px;
font-size: 13.5px;
font-weight: 500;
color: var(--vc-ink-800);
}
.vc-app-features span { font-size: 18px; }
.vc-app-phones {
position: relative;
display: grid;
place-items: center;
min-height: 460px;
width: 100%;
}
.vc-app-phone { position: absolute; filter: drop-shadow(0 24px 48px rgba(11,93,85,0.22)); transition: transform 0.4s var(--vc-ease); }
.vc-app-phone-front { z-index: 3; }
.vc-app-phone-back { z-index: 2; transform: translate(-110px, 18px) rotate(-9deg); }
[dir="rtl"] .vc-app-phone-back { transform: translate(110px, 18px) rotate(9deg); }
/* Dashboard section */
.vc-fit .vc-what-dashboard { margin: 24px auto 0; max-width: 1080px; }
/* Compact card sizes */
.vc-fit .vc-trio-card { padding: clamp(20px, 2.5vw, 32px); }
.vc-fit .vc-trio-card p { font-size: 14px; line-height: 1.6; margin: 0 0 16px; }
.vc-fit .vc-challenge-card { padding: clamp(28px, 3.2vw, 36px); }
.vc-fit .vc-challenge-card p { font-size: 14px; line-height: 1.6; }
.vc-fit .vc-stat-card { padding: clamp(16px, 2.2vh, 24px) clamp(20px, 2.4vw, 28px); }
.vc-fit .vc-feature-card { padding: clamp(22px, 2.4vw, 28px); }
.vc-fit .vc-feature-card p { font-size: 14px; line-height: 1.6; }
.vc-fit .vc-why-card { padding: clamp(22px, 2.5vw, 32px); gap: 14px; }
.vc-fit .vc-why-card p { font-size: 14px; line-height: 1.6; }
.vc-fit .vc-cred-card { padding: clamp(22px, 2.5vw, 32px); }
.vc-fit .vc-cred-card p { font-size: 14px; line-height: 1.6; }
.vc-fit .vc-h3 { font-size: 19px; margin: 0 0 8px; }
.vc-fit .vc-features-grid-4 { grid-template-columns: repeat(4, 1fr); }
.vc-fit .vc-why-grid-4 { grid-template-columns: repeat(4, 1fr); }
/* =========================================
RESPONSIVE
========================================= */
@media (max-width: 1024px) {
.vc-hero-grid-layout { grid-template-columns: 1fr; gap: 32px; }
.vc-how-grid { grid-template-columns: 1fr; gap: 40px; }
.vc-fit .vc-how-visual { order: -1; max-width: 280px; margin: 0 auto; }
.vc-cta-wrap { grid-template-columns: 1fr; gap: 40px; padding: 48px; text-align: center; }
.vc-cta-wrap .vc-hero-cta { justify-content: center; }
.vc-langs-orbit { grid-template-columns: 1fr; gap: 32px; max-width: 720px; }
.vc-langs-center { aspect-ratio: auto; padding: 32px; min-height: 200px; }
.vc-langs-num { font-size: 64px; }
.vc-fit .vc-features-grid-4 { grid-template-columns: repeat(2, 1fr); }
.vc-fit .vc-why-grid-4 { grid-template-columns: repeat(2, 1fr); }
.vc-features-grid, .vc-why-grid { grid-template-columns: repeat(2, 1fr); }
.vc-feature-card-feature, .vc-why-card-feature { grid-column: span 2; }
.vc-stats-grid, .vc-cred-grid, .vc-challenges-grid, .vc-partner-stats { grid-template-columns: repeat(2, 1fr); }
.vc-what-trio { grid-template-columns: 1fr; }
.vc-footer-top { grid-template-columns: 1fr 1fr; }
/* Keep app grid as 2 columns at tablet — collapsing below 1024 broke the 100vh fit */
.vc-app-pin .vc-app-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
.vc-app-pin .vc-app-content { max-width: none; }
}
@media (max-width: 760px) {
.vc-app-pin .vc-app-grid { grid-template-columns: 1fr; gap: 32px; }
.vc-app-pin .vc-app-content { max-width: none; text-align: center; margin: 0 auto; }
.vc-app-pin .vc-app-content .vc-h2,
.vc-app-pin .vc-app-content .vc-section-lead { text-align: center; }
.vc-app-pin .vc-app-content .vc-hero-stores { justify-content: center; }
.vc-app-pin .vc-app-phones { min-height: 320px; order: -1; }
}
@media (max-width: 720px) {
.vc-fit { padding: 64px 0; }
.vc-hero.vc-fit { padding: 100px 0 56px; min-height: auto; }
.vc-fit-inner { padding: 0 20px; }
.vc-section { padding: 64px 0; }
.vc-container { padding: 0 20px; }
.vc-nav-inner { padding: 0 20px; gap: 16px; }
.vc-nav-links, .vc-nav-cta .vc-lang-btn, .vc-nav-cta .vc-btn-primary { display: none; }
.vc-burger { display: flex; }
.vc-mobile-menu { display: flex; }
.vc-hero-center .vc-hero-title { font-size: clamp(30px, 9vw, 44px); }
.vc-hero-center .vc-hero-subtitle { font-size: 15px; margin-bottom: 24px; }
.vc-hero-center .vc-hero-cta { flex-direction: column; width: 100%; gap: 10px; margin-bottom: 28px; }
.vc-hero-center .vc-hero-cta a { width: 100%; justify-content: center; }
.vc-hero-mini-stats { grid-template-columns: repeat(2, 1fr); padding: 20px; gap: 16px; }
.vc-hms-n { font-size: 24px; }
.vc-fit .vc-h2 { font-size: clamp(24px, 7vw, 32px); }
.vc-fit .vc-section-lead { font-size: 14px; }
.vc-fit .vc-section-head { margin-bottom: 28px; }
.vc-app-phones { min-height: 360px; }
.vc-app-phone-back { display: none; }
.vc-app-features { grid-template-columns: 1fr; }
.vc-hero-stores { flex-direction: column; width: 100%; }
.vc-app-content .vc-hero-stores .vc-store { width: 100%; justify-content: center; }
.vc-fit .vc-features-grid,
.vc-fit .vc-why-grid,
.vc-fit .vc-stats-grid,
.vc-fit .vc-cred-grid,
.vc-fit .vc-challenges-grid,
.vc-fit .vc-features-grid-4,
.vc-fit .vc-why-grid-4 { grid-template-columns: 1fr; }
.vc-fit .vc-feature-card-feature, .vc-fit .vc-why-card-feature { grid-column: span 1; grid-template-columns: 1fr; }
.vc-fit .vc-partner-stats { grid-template-columns: repeat(2, 1fr); }
.vc-fit .vc-langs-grid { grid-template-columns: 1fr 1fr; }
.vc-fit .vc-langs-num { font-size: 56px; }
.vc-cta-wrap { padding: 32px 24px; }
.vc-cta-wrap .vc-hero-cta { flex-direction: column; }
.vc-cta-wrap .vc-hero-cta a { width: 100%; justify-content: center; }
.vc-footer { padding: 56px 0 24px; }
.vc-footer-top { grid-template-columns: 1fr; gap: 28px; padding-bottom: 32px; }
.vc-footer-bottom { flex-direction: column; gap: 12px; text-align: center; }
.vc-tabs { width: 100%; max-width: 100%; overflow-x: auto; flex-wrap: nowrap; left: auto; transform: none; justify-content: flex-start; -webkit-overflow-scrolling: touch; padding: 4px; }
.vc-tab { flex-shrink: 0; padding: 8px 14px; font-size: 13px; }
.vc-stat-num { font-size: 44px !important; }
.vc-fit .vc-cred-card,
.vc-fit .vc-feature-card,
.vc-fit .vc-why-card,
.vc-fit .vc-trio-card,
.vc-fit .vc-challenge-card,
.vc-fit .vc-stat-card { padding: 22px; }
.vc-fit .vc-how-step { grid-template-columns: auto 1fr; gap: 14px; padding: 18px; }
.vc-fit .vc-how-step-arrow { display: none; }
.vc-eyebrow { font-size: 11px; padding: 5px 12px; }
.vc-what-dashboard { transform: scale(0.85); transform-origin: top center; }
}
/* Eyebrow can wrap when needed in narrow */
.vc-eyebrow { white-space: normal; }
/* ===================================================
Scroll-reveal overrides — appended last so they win
================================================= */
.vc-eyebrow, .vc-h2, .vc-section-lead, .vc-how-subtitle,
.vc-trio-card, .vc-challenge-card, .vc-stat-card,
.vc-feature-card, .vc-why-card, .vc-cred-card, .vc-lang-card,
.vc-cta-wrap, .vc-app-content, .vc-app-phones,
.vc-what-dashboard, .vc-partner-stats,
.vc-hero-grid-layout, .vc-hero-mini-stats {
transition: opacity 0.75s cubic-bezier(0.22, 1, 0.36, 1),
transform 0.75s cubic-bezier(0.22, 1, 0.36, 1),
background-color 0.3s ease,
border-color 0.3s ease,
box-shadow 0.3s ease !important;
transition-delay: calc(var(--reveal-i, 0) * 0.07s) !important;
}
.is-revealed {
opacity: 1 !important;
transform: none !important;
}
/* Re-enable hover transform on revealed cards (now that opacity reveal is done) */
.vc-trio-card.is-revealed:hover,
.vc-challenge-card.is-revealed:hover,
.vc-stat-card.is-revealed:hover,
.vc-feature-card.is-revealed:hover,
.vc-why-card.is-revealed:hover,
.vc-cred-card.is-revealed:hover,
.vc-lang-card.is-revealed:hover {
transition: transform 0.3s ease, background-color 0.3s ease,
border-color 0.3s ease, box-shadow 0.3s ease !important;
}
/* =========================================
PINNED SCROLLYTELLING — Stats, Features, App
Common pattern: tall outer + sticky inner = 100vh.
Inner section uses .vc-section so existing chrome (bg, container)
reuses, but height is forced to 100vh + flex-center for stage feel.
========================================= */
.vc-stats-pin,
.vc-features-pin,
.vc-app-pin {
position: relative;
height: 240vh; /* 1.4vh of scroll past the pin */
}
/* Features has 8 steps — needs more scroll runway */
.vc-features-pin { height: 480vh; }
.vc-stats-sticky,
.vc-features-sticky,
.vc-app-sticky {
position: sticky;
top: 0;
height: 100vh; /* fallback */
height: 100svh; /* stable across mobile address-bar resize */
min-height: 0 !important; /* override .vc-section min-height */
display: flex;
align-items: stretch;
overflow: hidden;
padding: 0 !important; /* container handles padding */
}
.vc-stats-sticky .vc-container,
.vc-features-sticky .vc-container,
.vc-app-sticky .vc-container {
display: flex;
flex-direction: column;
}
.vc-stats-sticky .vc-fit-inner,
.vc-features-sticky .vc-fit-inner,
.vc-app-sticky .vc-fit-inner {
width: 100%;
padding: clamp(20px, 3.5vh, 40px) 0;
display: flex;
flex-direction: column;
justify-content: center;
flex: 1 1 auto;
min-height: 0;
gap: clamp(14px, 2.2vh, 28px);
}
/* Stats pinned — top progress bar drives the eye */
.vc-stats-progress {
margin-top: 10px;
height: 3px;
background: rgba(255,255,255,0.08);
border-radius: 999px;
overflow: hidden;
max-width: 480px;
margin-left: auto;
margin-right: auto;
}
[dir="rtl"] .vc-stats-progress { margin-left: auto; margin-right: auto; }
.vc-stats-progress-fill {
height: 100%;
background: linear-gradient(90deg, var(--vc-teal-500), var(--vc-gold-500));
transition: width 0.05s linear;
border-radius: 999px;
}
[dir="rtl"] .vc-stats-progress-fill { transform: scaleX(-1); transform-origin: left center; }
/* Override the IO-driven reveal for cards inside pinned scrub sections —
the React-driven inline style is the source of truth. */
.vc-stat-scrub,
.vc-features-scrub .vc-feature-card {
opacity: 1; /* base — overridden by inline style each frame */
transform: none;
transition: none !important;
}
.vc-stats-pin .vc-stat-card:not(.is-revealed),
.vc-features-pin .vc-feature-card:not(.is-revealed),
.vc-app-pin .vc-app-content:not(.is-revealed),
.vc-app-pin .vc-app-phones:not(.is-revealed) {
opacity: 1; /* don't double-hide; scrub handles opacity */
transform: none;
}
/* Features tab progress underline */
.vc-tabs-scrub { position: relative; }
.vc-tab { position: relative; overflow: hidden; }
.vc-tab-progress {
position: absolute;
left: 0;
bottom: 0;
height: 2px;
background: var(--vc-teal-700);
transition: width 0.05s linear;
}
[dir="rtl"] .vc-tab-progress { left: auto; right: 0; }
/* App pin — phones perspective stage */
.vc-app-pin .vc-app-phones {
perspective: 1400px;
transform-style: preserve-3d;
}
.vc-app-pin .vc-app-phone {
will-change: transform, opacity;
}
/* When pinning is active (wide + tall viewport), React drives transforms — disable transitions */
@media (min-width: 1025px) and (min-height: 761px) {
.vc-app-pin .vc-app-phone {
transition: none !important;
}
}
.vc-app-stores-scrub .vc-store {
transition: none !important;
will-change: transform, opacity;
}
/* =========================================
ENTRANCE EFFECTS — per-section variations
Driven by the existing .is-revealed observer.
Each section overrides the default fade-up with a unique reveal.
========================================= */
/* WHAT IS — cascade slide-up with stagger and slight scale */
.vc-what-trio .vc-trio-card:not(.is-revealed) {
opacity: 0;
transform: translateY(60px) scale(0.94);
}
.vc-what-trio .vc-trio-card {
transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
transition-delay: calc(var(--reveal-i, 0) * 0.16s) !important;
}
.vc-what-trio .vc-trio-card.is-revealed {
opacity: 1;
transform: translateY(0) scale(1);
}
/* LANGUAGES — orbit-in: cards spiral toward globe center */
.vc-langs-grid .vc-lang-card:not(.is-revealed) {
opacity: 0;
/* Each card starts further from center, rotated. Use --reveal-i */
transform: translate(
calc(cos(var(--reveal-i, 0) * 40deg) * 200px),
calc(sin(var(--reveal-i, 0) * 40deg) * 140px)
)
rotate(calc(var(--reveal-i, 0) * 20deg))
scale(0.5);
}
.vc-langs-grid .vc-lang-card {
transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
transition-delay: calc(var(--reveal-i, 0) * 0.07s) !important;
}
.vc-langs-grid .vc-lang-card.is-revealed {
opacity: 1;
transform: translate(0, 0) rotate(0deg) scale(1);
}
/* WHY — flip-up with depth: cards rotate from below */
.vc-why-grid .vc-why-card:not(.is-revealed) {
opacity: 0;
transform: perspective(900px) rotateX(-35deg) translateY(50px);
transform-origin: center bottom;
}
.vc-why-grid .vc-why-card {
transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
transition-delay: calc(var(--reveal-i, 0) * 0.12s) !important;
transform-origin: center bottom;
}
.vc-why-grid .vc-why-card.is-revealed {
opacity: 1;
transform: perspective(900px) rotateX(0deg) translateY(0);
}
/* PARTNERS — matrix wave: stat tiles tile in diagonally */
.vc-partner-stats > div:not(.is-revealed) {
opacity: 0;
transform: translateY(28px) scale(0.9);
}
.vc-partner-stats > div {
transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.vc-partner-stats.is-revealed > div:nth-child(1) { transition-delay: 0s; }
.vc-partner-stats.is-revealed > div:nth-child(2) { transition-delay: 0.12s; }
.vc-partner-stats.is-revealed > div:nth-child(3) { transition-delay: 0.24s; }
.vc-partner-stats.is-revealed > div:nth-child(4) { transition-delay: 0.36s; }
.vc-partner-stats.is-revealed > div {
opacity: 1;
transform: translateY(0) scale(1);
}
/* CREDENTIALS — scale + rotate-in */
.vc-cred-grid .vc-cred-card:not(.is-revealed) {
opacity: 0;
transform: scale(0.78) rotate(-4deg);
}
.vc-cred-grid .vc-cred-card {
transition: opacity 0.7s cubic-bezier(0.34, 1.56, 0.64, 1),
transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
transition-delay: calc(var(--reveal-i, 0) * 0.1s) !important;
}
.vc-cred-grid .vc-cred-card.is-revealed {
opacity: 1;
transform: scale(1) rotate(0deg);
}
/* CHALLENGES — diagonal slide */
.vc-challenges-grid .vc-challenge-card:not(.is-revealed) {
opacity: 0;
transform: translate(-40px, 30px);
}
[dir="rtl"] .vc-challenges-grid .vc-challenge-card:not(.is-revealed) {
transform: translate(40px, 30px);
}
.vc-challenges-grid .vc-challenge-card {
transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
transition-delay: calc(var(--reveal-i, 0) * 0.11s) !important;
}
.vc-challenges-grid .vc-challenge-card.is-revealed {
opacity: 1;
transform: translate(0, 0);
}
/* CTA — letter-by-letter blur-in handled in JS; provide base styles */
.vc-cta-letter {
display: inline-block;
opacity: 0;
filter: blur(12px);
transform: translateY(8px);
transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
filter 0.6s cubic-bezier(0.22, 1, 0.36, 1),
transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.vc-cta-letter.in {
opacity: 1;
filter: blur(0);
transform: translateY(0);
}
/* Mobile: shorter scroll distance for pinned sections */
@media (max-width: 720px) {
.vc-stats-pin,
.vc-features-pin,
.vc-app-pin { height: 200vh; }
}
@media (prefers-reduced-motion: reduce) {
.vc-what-trio .vc-trio-card,
.vc-langs-grid .vc-lang-card,
.vc-why-grid .vc-why-card,
.vc-partner-stats > div,
.vc-cred-grid .vc-cred-card,
.vc-challenges-grid .vc-challenge-card {
opacity: 1 !important;
transform: none !important;
transition: none !important;
}
.vc-stats-pin,
.vc-features-pin,
.vc-app-pin { height: auto; }
.vc-stats-sticky,
.vc-features-sticky,
.vc-app-sticky { position: relative; height: auto; min-height: 100vh !important; }
}
/* === Shrink content inside pinned sticky sections so it fits 100vh === */
.vc-app-pin .vc-app-content .vc-h2 { font-size: clamp(24px, 3.2vw, 38px); }
.vc-app-pin .vc-app-content .vc-section-lead { font-size: 15px; margin-bottom: 16px; }
.vc-app-pin .vc-app-content .vc-hero-stores { margin-bottom: 16px; }
.vc-app-pin .vc-app-content .vc-eyebrow { margin-bottom: 8px; }
.vc-app-pin .vc-app-features { gap: 8px; }
.vc-app-pin .vc-app-features li { padding: 8px 12px; font-size: 13px; }
.vc-app-pin .vc-app-grid { gap: clamp(28px, 4vw, 56px); }
.vc-features-pin .vc-feature-card { padding: clamp(14px, 1.8vh, 22px) clamp(16px, 1.8vw, 22px); }
.vc-features-pin .vc-feature-card p { font-size: 13.5px; line-height: 1.55; margin: 0; }
.vc-features-pin .vc-features-grid { gap: 12px; }
.vc-features-pin .vc-features-tabs { margin-bottom: 16px; }
/* App-pin phones — keep within 100vh */
.vc-app-pin .vc-app-phones {
min-height: 0;
height: clamp(240px, 38vh, 340px);
display: grid;
place-items: center;
position: relative;
overflow: visible;
}
/* Floating orbit icons around the phones */
.vc-orbit-icon {
position: absolute;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 14px;
background: #fff;
border: 1px solid var(--vc-line-soft, rgba(11,93,85,0.12));
border-radius: 999px;
box-shadow: 0 12px 28px rgba(11,93,85,0.16), 0 2px 6px rgba(11,93,85,0.08);
font-size: 13px;
font-weight: 600;
color: var(--vc-ink-800, #15302e);
white-space: nowrap;
z-index: 10;
pointer-events: none;
will-change: transform;
}
.vc-orbit-emoji {
font-size: 18px;
line-height: 1;
}
.vc-orbit-label { line-height: 1; }
/* Position the four orbit icons around the phone stack */
.vc-orbit-1 { top: 8%; left: -8%; }
.vc-orbit-2 { top: 18%; right: -10%; }
.vc-orbit-3 { bottom: 14%; left: -4%; }
.vc-orbit-4 { bottom: 6%; right: -6%; }
/* RTL — mirror the horizontal positions */
[dir="rtl"] .vc-orbit-1 { left: auto; right: -8%; }
[dir="rtl"] .vc-orbit-2 { right: auto; left: -10%; }
[dir="rtl"] .vc-orbit-3 { left: auto; right: -4%; }
[dir="rtl"] .vc-orbit-4 { right: auto; left: -6%; }
/* Each orbit icon bounces with a unique rhythm so they feel organic */
@keyframes vc-orbit-bob-a {
0%, 100% { transform: translate3d(0, 0, 0) rotate(-3deg); }
50% { transform: translate3d(0, -14px, 0) rotate(-3deg); }
}
@keyframes vc-orbit-bob-b {
0%, 100% { transform: translate3d(0, 0, 0) rotate(2deg); }
50% { transform: translate3d(0, -10px, 0) rotate(2deg); }
}
@keyframes vc-orbit-bob-c {
0%, 100% { transform: translate3d(0, 0, 0) rotate(4deg); }
50% { transform: translate3d(0, -16px, 0) rotate(4deg); }
}
@keyframes vc-orbit-bob-d {
0%, 100% { transform: translate3d(0, 0, 0) rotate(-2deg); }
50% { transform: translate3d(0, -12px, 0) rotate(-2deg); }
}
.vc-orbit-1 { animation: vc-orbit-bob-a 3.6s ease-in-out infinite; }
.vc-orbit-2 { animation: vc-orbit-bob-b 4.2s ease-in-out infinite 0.3s; }
.vc-orbit-3 { animation: vc-orbit-bob-c 3.9s ease-in-out infinite 0.6s; }
.vc-orbit-4 { animation: vc-orbit-bob-d 4.5s ease-in-out infinite 0.9s; }
/* Reveal — fade in with the phones */
.vc-orbit-icon { opacity: 0; transition: opacity 0.6s ease 0.3s; }
.vc-app-phones.is-revealed .vc-orbit-icon,
[data-pin-active="0"] .vc-orbit-icon {
opacity: 1;
}
/* Pin-active fallback — when sticky pin disabled, show immediately */
@media (max-height: 760px), (max-width: 1024px) {
.vc-orbit-icon { opacity: 1; }
}
@media (max-width: 720px) {
.vc-orbit-icon { padding: 6px 10px; font-size: 11px; gap: 6px; }
.vc-orbit-emoji { font-size: 14px; }
.vc-orbit-1 { top: 4%; left: 0; }
.vc-orbit-2 { top: 14%; right: 0; }
.vc-orbit-3 { bottom: 18%; left: 0; }
.vc-orbit-4 { bottom: 4%; right: 0; }
[dir="rtl"] .vc-orbit-1 { left: auto; right: 0; }
[dir="rtl"] .vc-orbit-2 { right: auto; left: 0; }
[dir="rtl"] .vc-orbit-3 { left: auto; right: 0; }
[dir="rtl"] .vc-orbit-4 { right: auto; left: 0; }
}
.vc-app-pin .vc-app-grid {
align-items: center;
gap: clamp(32px, 5vw, 64px);
padding: clamp(20px, 4vh, 40px) clamp(24px, 4vw, 56px);
}
/* Phone bounce animation — gentle continuous float */
@keyframes vc-phone-bob-front {
0%, 100% { transform: translate3d(0, 0, 0) rotate(-3deg); }
50% { transform: translate3d(0, -10px, 0) rotate(-3deg); }
}
@keyframes vc-phone-bob-back {
0%, 100% { transform: translate3d(-70px, 18px, 0) rotate(-9deg); }
50% { transform: translate3d(-70px, 4px, 0) rotate(-9deg); }
}
@keyframes vc-phone-bob-back-rtl {
0%, 100% { transform: translate3d(70px, 18px, 0) rotate(9deg); }
50% { transform: translate3d(70px, 4px, 0) rotate(9deg); }
}
/* Bounce only when sticky pinning is disabled (short viewports) so it doesn't fight scrub */
@media (max-height: 760px), (max-width: 1024px) {
.vc-app-pin .vc-app-phone-front {
animation: vc-phone-bob-front 4s ease-in-out infinite;
}
.vc-app-pin .vc-app-phone-back {
animation: vc-phone-bob-back 4.6s ease-in-out infinite 0.4s;
}
[dir="rtl"] .vc-app-pin .vc-app-phone-back {
animation-name: vc-phone-bob-back-rtl;
}
}
/* Short viewports (≤760px tall) — extra tightening so app section fits one screen */
@media (max-height: 760px) {
.vc-app-pin .vc-app-content .vc-h2 { font-size: clamp(22px, 2.6vw, 30px); margin: 8px 0 10px; }
.vc-app-pin .vc-app-content .vc-section-lead { font-size: 13px; margin-bottom: 12px; }
.vc-app-pin .vc-app-content .vc-hero-stores { margin-bottom: 12px; }
.vc-app-pin .vc-app-content .vc-eyebrow { margin-bottom: 6px; font-size: 11px; }
.vc-app-pin .vc-app-features { gap: 6px; }
.vc-app-pin .vc-app-features > div { padding: 6px 10px; font-size: 12px; }
.vc-app-pin .vc-app-features span { font-size: 14px; }
.vc-app-pin .vc-app-phones { height: clamp(220px, 36vh, 300px); }
.vc-app-pin .vc-store { padding: 8px 14px; }
}
/* (Removed: `@media (max-height: 720px)` short-viewport fallback that
force-disabled pinning on Stats / Features / App.
Reason: the 720px threshold matched almost every phone in portrait
(iPhone 14 ≈ 844 with bar visible ≈ ~700, iPhone SE = 667), so the
fallback fired on the very devices that need pinning most. The sticky
inners already use `height: 100svh` which adapts to the visible
viewport, so a separate short-vh fallback is unnecessary. HowItWorks
was unaffected because it has its own `.vc-how-sticky` class — that's
why "From launch to measurable results" was the only one pinning on
mobile.) */
/* =========================================
FEATURES — scrollytelling stage (rail + phone + detail)
========================================= */
.vc-feat-stage {
display: grid;
grid-template-columns: 280px 1fr 280px;
gap: clamp(20px, 3vw, 48px);
align-items: center;
flex: 1 1 auto;
min-height: 0;
width: 100%;
}
/* Left rail — numbered list of all 8 features */
.vc-feat-rail {
display: flex;
flex-direction: column;
gap: 4px;
max-height: 60vh;
overflow: hidden;
position: relative;
}
.vc-feat-rail-item {
display: grid;
grid-template-columns: 36px 1fr;
gap: 12px;
align-items: center;
padding: 8px 12px;
border-radius: 10px;
border: none;
border-bottom: 1px solid rgba(11,93,85,0.06);
background: transparent;
text-align: inherit;
font: inherit;
color: inherit;
width: 100%;
transition: all 0.4s var(--vc-ease);
cursor: pointer;
position: relative;
}
.vc-feat-rail-item:hover:not(.active) {
background: rgba(11,93,85,0.04);
}
.vc-feat-rail-item:hover:not(.active) .vc-feat-rail-num { color: rgba(11,93,85,0.6); }
.vc-feat-rail-item:hover:not(.active) .vc-feat-rail-label { color: rgba(27,42,38,0.85); }
.vc-feat-rail-item:focus-visible {
outline: 2px solid var(--vc-teal-700, #0F766E);
outline-offset: 2px;
}
.vc-feat-rail-item:last-child { border-bottom: none; }
.vc-feat-rail-num {
font-family: var(--vc-font-display, 'Inter', system-ui);
font-size: 13px;
font-weight: 700;
font-variant-numeric: tabular-nums;
color: rgba(11,93,85,0.35);
letter-spacing: 0.06em;
transition: color 0.3s var(--vc-ease);
}
.vc-feat-rail-label {
font-size: 14px;
font-weight: 500;
color: rgba(27,42,38,0.5);
line-height: 1.35;
transition: color 0.3s var(--vc-ease);
}
.vc-feat-rail-item.past .vc-feat-rail-num { color: rgba(11,93,85,0.55); }
.vc-feat-rail-item.past .vc-feat-rail-label { color: rgba(27,42,38,0.7); }
.vc-feat-rail-item.active {
background: linear-gradient(135deg, rgba(15,118,110,0.06), rgba(15,118,110,0.02));
border-color: transparent;
}
.vc-feat-rail-item.active .vc-feat-rail-num {
color: var(--vc-teal-700, #0F766E);
font-size: 16px;
}
.vc-feat-rail-item.active .vc-feat-rail-label {
color: var(--vc-ink-900, #1B2A26);
font-weight: 600;
font-size: 14.5px;
}
/* Per-item progress underline only on active row */
.vc-feat-rail-bar {
grid-column: 2 / 3;
height: 2px;
background: rgba(11,93,85,0.08);
border-radius: 1px;
margin-top: 6px;
overflow: hidden;
align-self: end;
}
.vc-feat-rail-bar-fill {
height: 100%;
background: linear-gradient(90deg, var(--vc-teal-700, #0F766E), var(--vc-gold-500, #C8A24A));
border-radius: 1px;
transition: width 0.1s linear;
}
/* Center phone column */
.vc-feat-phone-col {
display: grid;
place-items: center;
position: relative;
}
.vc-feat-phone {
animation: vc-feat-phone-fade 0.5s var(--vc-ease) both;
position: relative;
}
.vc-feat-phone::before {
content: '';
position: absolute;
inset: -10% -8%;
background: radial-gradient(60% 60% at 50% 50%, rgba(15,118,110,0.12), transparent 70%);
z-index: -1;
pointer-events: none;
}
@keyframes vc-feat-phone-fade {
from { opacity: 0; transform: translateY(12px) scale(0.97); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
/* Detail card (now in center) */
.vc-feat-detail {
animation: vc-feat-detail-fade 0.5s var(--vc-ease) both;
display: flex;
flex-direction: column;
gap: 12px;
max-width: 480px;
justify-self: center;
width: 100%;
}
@keyframes vc-feat-detail-fade {
from { opacity: 0; transform: translateY(16px); }
to { opacity: 1; transform: translateY(0); }
}
.vc-feat-detail-icon {
width: 52px;
height: 52px;
border-radius: 14px;
background: linear-gradient(135deg, rgba(15,118,110,0.12), rgba(200,162,74,0.10));
display: grid;
place-items: center;
font-size: 24px;
border: 1px solid rgba(11,93,85,0.10);
margin-bottom: 4px;
}
.vc-feat-detail-tag {
display: inline-block;
align-self: flex-start;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.12em;
color: var(--vc-teal-700, #0F766E);
text-transform: uppercase;
background: rgba(15,118,110,0.08);
padding: 5px 10px;
border-radius: 999px;
}
[dir="rtl"] .vc-feat-detail-tag { letter-spacing: 0.04em; }
.vc-feat-detail-title {
font-size: clamp(24px, 2.6vw, 34px);
font-weight: 700;
color: var(--vc-ink-900, #1B2A26);
line-height: 1.15;
margin: 4px 0 0;
}
.vc-feat-detail-body {
font-size: 15px;
line-height: 1.65;
color: rgba(27,42,38,0.75);
margin: 0;
max-width: 460px;
}
.vc-feat-progress {
margin-top: 14px;
display: flex;
flex-direction: column;
gap: 8px;
max-width: 280px;
}
.vc-feat-progress-text {
font-size: 12px;
font-weight: 600;
font-variant-numeric: tabular-nums;
color: rgba(11,93,85,0.55);
letter-spacing: 0.04em;
}
.vc-feat-progress-track {
height: 3px;
background: rgba(11,93,85,0.08);
border-radius: 2px;
overflow: hidden;
}
.vc-feat-progress-fill {
height: 100%;
background: linear-gradient(90deg, var(--vc-teal-700, #0F766E), var(--vc-gold-500, #C8A24A));
border-radius: 2px;
transition: width 0.1s linear;
}
/* Tablet — narrower rail and phone */
@media (max-width: 1100px) {
.vc-feat-stage {
grid-template-columns: 200px 1fr 200px;
gap: 24px;
}
.vc-feat-detail { max-width: 380px; }
.vc-feat-phone-col { transform: scale(0.85); transform-origin: center; }
}
/* Smaller laptops — phone moves below detail (rail | detail+phone stacked) */
@media (max-width: 900px) {
.vc-feat-stage {
grid-template-columns: 200px 1fr;
gap: 20px;
align-items: start;
}
.vc-feat-detail {
grid-column: 2;
grid-row: 1;
max-width: 100%;
}
.vc-feat-phone-col {
grid-column: 2;
grid-row: 2;
margin-top: 8px;
transform: scale(0.85);
transform-origin: top center;
height: 240px;
}
.vc-feat-rail {
grid-row: 1 / 3;
max-height: 80vh;
}
}
/* Mobile — full stack: rail (horizontal) → detail → phone */
@media (max-width: 720px) {
.vc-feat-stage {
grid-template-columns: 1fr;
gap: 16px;
align-items: stretch;
}
.vc-feat-rail {
grid-row: auto;
grid-column: auto;
flex-direction: row;
overflow-x: auto;
max-height: none;
padding-bottom: 8px;
gap: 8px;
-webkit-overflow-scrolling: touch;
}
.vc-feat-rail-item {
grid-template-columns: 28px 1fr;
flex: 0 0 auto;
min-width: 180px;
border-bottom: none;
border: 1px solid rgba(11,93,85,0.08);
padding: 8px 10px;
}
.vc-feat-rail-bar { display: none; }
.vc-feat-detail {
grid-column: auto;
grid-row: auto;
}
.vc-feat-phone-col {
grid-column: auto;
grid-row: auto;
transform: scale(0.75);
height: 220px;
}
.vc-feat-detail-title { font-size: 22px; }
}
/* =========================================
FEATURES — pinned scrollytelling
Top rail of 8 chips (with progress bar) + showcase row (phone | detail).
Outer .vc-features-pin = 480vh runway, .vc-features-sticky pins to 100vh.
========================================= */
/* Compact section head so the pinned 100vh leaves room for rail + phone */
.vc-features-pin .vc-feat-head {
margin: 0 auto clamp(20px, 3vh, 36px);
text-align: center;
}
.vc-features-pin .vc-feat-head .vc-h2 {
font-size: clamp(28px, 3.4vw, 44px);
margin: 8px 0;
}
.vc-features-pin .vc-feat-head .vc-section-lead {
font-size: clamp(14px, 1.3vw, 16px);
}
/* Top rail — horizontal row of 8 chips */
.vc-feat-toprail {
margin: 0 auto clamp(24px, 4vh, 48px);
max-width: 1100px;
width: 100%;
}
.vc-feat-toprail-row {
display: grid;
grid-template-columns: repeat(8, 1fr);
gap: 8px;
}
.vc-feat-chip {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 4px;
padding: 10px 12px;
border-radius: 12px;
border: 1px solid transparent;
background: transparent;
cursor: pointer;
text-align: start;
transition: background-color 0.3s var(--vc-ease),
border-color 0.3s var(--vc-ease),
color 0.3s var(--vc-ease);
}
.vc-feat-chip:hover:not(.active) { background: rgba(11,93,85,0.04); }
.vc-feat-chip:focus-visible {
outline: 2px solid var(--vc-teal-700);
outline-offset: 2px;
}
.vc-feat-chip-num {
font-family: var(--vc-font-display);
font-size: 12px;
font-weight: 700;
font-variant-numeric: tabular-nums;
letter-spacing: 0.06em;
color: rgba(11,93,85,0.35);
transition: color 0.3s var(--vc-ease);
}
.vc-feat-chip-label {
font-size: 13px;
line-height: 1.3;
font-weight: 500;
color: rgba(27,42,38,0.55);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
transition: color 0.3s var(--vc-ease);
}
.vc-feat-chip.past .vc-feat-chip-num { color: rgba(11,93,85,0.55); }
.vc-feat-chip.past .vc-feat-chip-label { color: rgba(27,42,38,0.7); }
.vc-feat-chip.active {
background: linear-gradient(135deg, rgba(15,118,110,0.10), rgba(200,162,74,0.06));
border-color: rgba(15,118,110,0.18);
}
.vc-feat-chip.active .vc-feat-chip-num {
color: var(--vc-teal-700);
font-size: 14px;
}
.vc-feat-chip.active .vc-feat-chip-label {
color: var(--vc-ink-900);
font-weight: 600;
}
.vc-feat-toprail-bar {
margin-top: 14px;
height: 3px;
background: rgba(11,93,85,0.08);
border-radius: 99px;
overflow: hidden;
}
.vc-feat-toprail-fill {
height: 100%;
background: linear-gradient(90deg, var(--vc-teal-700), var(--vc-gold-500));
border-radius: 99px;
transition: width 0.05s linear;
}
[dir="rtl"] .vc-feat-toprail-fill {
background: linear-gradient(270deg, var(--vc-teal-700), var(--vc-gold-500));
}
/* Showcase — text + phone side-by-side, vertically centered.
JSX order is detail → phone, so column 1 = text (1fr), column 2 = phone (auto).
The grid follows direction (LTR or RTL), so in RTL the text appears on the right
and the phone on the left automatically. */
.vc-feat-showcase {
display: grid;
grid-template-columns: 1fr minmax(240px, 300px);
gap: clamp(32px, 5vw, 72px);
align-items: center;
justify-items: stretch;
max-width: 1100px;
margin: 0 auto;
width: 100%;
flex: 1 1 auto;
min-height: 0;
}
.vc-feat-phone-col {
position: relative;
display: grid;
place-items: center;
perspective: 1200px;
/* Auto height — sized by the phone itself; row's align-items:center keeps it vertically centered */
}
.vc-feat-phone-col::before {
content: "";
position: absolute;
inset: 8% 6%;
background:
radial-gradient(60% 50% at 50% 50%, rgba(15,118,110,0.18), transparent 70%),
radial-gradient(80% 60% at 50% 110%, rgba(200,162,74,0.18), transparent 70%);
filter: blur(20px);
pointer-events: none;
z-index: 0;
}
.vc-feat-phone {
position: relative;
z-index: 1;
will-change: transform;
filter: drop-shadow(0 30px 60px rgba(11,93,85,0.22));
animation: vc-feat-phone-bob 5.4s ease-in-out infinite;
}
.vc-feat-phone-fader {
animation: vc-feat-phone-fade 0.55s var(--vc-ease) both;
}
@keyframes vc-feat-phone-bob {
0%, 100% { transform: translate3d(0, 0, 0) rotate(-2deg); }
50% { transform: translate3d(0, -14px, 0) rotate(-2deg); }
}
@media (prefers-reduced-motion: reduce) {
.vc-feat-phone { animation: none; }
}
.vc-feat-detail {
align-self: center;
max-width: 520px;
}
.vc-feat-detail-counter {
margin-top: 18px;
font-family: var(--vc-font-display);
font-size: 13px;
font-weight: 600;
letter-spacing: 0.08em;
color: rgba(11,93,85,0.55);
font-variant-numeric: tabular-nums;
}
/* Short-viewport safety: tighten head + rail margins so the phone doesn't get clipped
on ~720–820px tall laptop displays. */
@media (max-height: 860px) {
.vc-features-pin .vc-feat-head { margin-bottom: clamp(12px, 1.6vh, 22px); }
.vc-features-pin .vc-feat-head .vc-h2 { font-size: clamp(24px, 2.8vw, 36px); margin: 4px 0; }
.vc-features-pin .vc-feat-head .vc-section-lead { font-size: 14px; line-height: 1.5; }
.vc-feat-toprail { margin-bottom: clamp(14px, 2vh, 26px); }
.vc-feat-chip { padding: 8px 10px; }
.vc-feat-chip-label { font-size: 12px; }
}
/* Even shorter — scale the phone visually so it fits without overflowing the pinned 100vh. */
@media (max-height: 760px) {
.vc-feat-phone { transform-origin: center; }
.vc-feat-phone-fader { transform: scale(0.86); transform-origin: center; }
}
/* Tablet (≤1024px): chips wrap to 4×2 */
@media (max-width: 1024px) {
.vc-feat-toprail-row { grid-template-columns: repeat(4, 1fr); }
}
/* Mobile (≤720px): chips become a horizontal-scroll strip; text stacks above phone */
@media (max-width: 720px) {
.vc-feat-toprail-row {
display: flex;
grid-template-columns: none;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
gap: 8px;
padding-bottom: 6px;
}
.vc-feat-chip { flex: 0 0 140px; }
.vc-feat-showcase {
grid-template-columns: 1fr;
gap: 24px;
}
.vc-feat-detail {
text-align: center;
margin: 0 auto;
}
}
/* =========================================
HERO — cinematic video background
========================================= */
.vc-hero-video {
background: #06403B; /* fallback if video fails to load */
}
/* Hide the original blob/grid decorations — the video replaces them */
.vc-hero-video .vc-hero-grid-bg,
.vc-hero-video .vc-hero-grid,
.vc-hero-video .vc-hero-blob { display: none; }
.vc-hero-video .vc-hero-bg {
position: absolute;
inset: 0;
overflow: hidden;
z-index: -1;
pointer-events: none;
}
.vc-hero-video-el {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
/* Moderate source darken — enough to keep highlights tame without
muting the cinematic feel. */
filter: saturate(0.92) brightness(0.78) contrast(1.04);
}
.vc-hero-video-overlay {
position: absolute;
inset: 0;
/* Balanced gradient overlay — heavier where text/nav lives, lighter
in the middle so the video shows through. */
background:
linear-gradient(180deg,
rgba(0,0,0,0.7) 0%,
rgba(0,0,0,0.45) 22%,
rgba(0,0,0,0.32) 50%,
rgba(0,0,0,0.45) 78%,
rgba(0,0,0,0.65) 100%),
linear-gradient(90deg,
rgba(0,0,0,0.22) 0%,
rgba(0,0,0,0) 28%,
rgba(0,0,0,0) 72%,
rgba(0,0,0,0.22) 100%),
radial-gradient(ellipse 55% 45% at 50% 55%, rgba(6,64,59,0.18) 0%, rgba(0,0,0,0) 72%);
}
/* Light-on-dark text variant for hero with video */
.vc-hero-video .vc-hero-title {
color: #fff;
text-shadow: 0 2px 24px rgba(0,0,0,0.55), 0 2px 6px rgba(0,0,0,0.4);
}
.vc-hero-video .vc-hero-subtitle {
color: rgba(255,255,255,0.92);
text-shadow: 0 2px 16px rgba(0,0,0,0.55), 0 1px 3px rgba(0,0,0,0.35);
}
.vc-hero-video .vc-eyebrow-light {
background: rgba(0,0,0,0.4);
border-color: rgba(232,210,158,0.45);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
.vc-hero-video .vc-hero-accent {
/* Sampled from the VCOSH logo's teal-green wordmark, lifted lighter for
legibility on the dark sunset video. */
background: linear-gradient(135deg, #7FE6D4 0%, #3FBFAE 50%, #2DA597 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.45));
}
/* Buttons over a dark video — primary keeps the dark pill (still readable),
ghost gets a light border+text variant. */
.vc-hero-video .vc-btn-primary {
background: rgba(15, 24, 20, 0.78);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
box-shadow: 0 8px 24px -8px rgba(0,0,0,0.5);
}
.vc-hero-video .vc-btn-primary:hover {
background: var(--vc-teal-700);
}
.vc-hero-video .vc-btn-ghost {
color: #fff;
border-color: rgba(255,255,255,0.45);
background: rgba(255,255,255,0.05);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.vc-hero-video .vc-btn-ghost:hover {
border-color: rgba(255,255,255,0.85);
background: rgba(255,255,255,0.1);
}
/* Mini-stats: glassy panel that sits on the video */
.vc-hero-video .vc-hero-mini-stats {
background: rgba(255,255,255,0.08);
border-color: rgba(255,255,255,0.18);
backdrop-filter: blur(14px) saturate(140%);
-webkit-backdrop-filter: blur(14px) saturate(140%);
}
.vc-hero-video .vc-hms-n { color: #fff; }
.vc-hero-video .vc-hms-l { color: rgba(255,255,255,0.72); }
/* Eyebrow already supports a light variant via .vc-eyebrow-light — already applied in JSX */
@media (prefers-reduced-motion: reduce) {
.vc-hero-video-el { display: none; }
.vc-hero-video { background: #06403B; }
.vc-hero-video-overlay {
background: linear-gradient(180deg, rgba(6,64,59,0.85), rgba(6,64,59,1));
}
}
/* =========================================
NAV — light variant while floating over the dark hero video
(When the user scrolls past the hero, .scrolled kicks in and the nav
reverts to the light-bg + dark-text pattern defined above.)
========================================= */
.vc-nav:not(.scrolled) {
/* Soft top-down dark gradient so the nav has its own readable backdrop
even before the user starts scrolling. */
background: linear-gradient(180deg, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.18) 70%, rgba(0,0,0,0) 100%);
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(3px);
}
.vc-nav:not(.scrolled) .vc-logo-title {
color: #fff;
text-shadow: 0 1px 8px rgba(0,0,0,0.6);
}
.vc-nav:not(.scrolled) .vc-logo-sub { color: var(--vc-gold-400); }
.vc-nav:not(.scrolled) .vc-nav-links a {
color: #fff;
font-weight: 600;
text-shadow: 0 1px 10px rgba(0,0,0,0.7), 0 1px 3px rgba(0,0,0,0.5);
}
.vc-nav:not(.scrolled) .vc-nav-links a:hover { color: var(--vc-gold-400); }
.vc-nav:not(.scrolled) .vc-nav-links a::after { background: var(--vc-gold-400); }
.vc-nav:not(.scrolled) .vc-lang-btn {
color: #fff;
border-color: rgba(255,255,255,0.55);
background: rgba(0,0,0,0.35);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.vc-nav:not(.scrolled) .vc-lang-btn:hover {
border-color: #fff;
background: rgba(0,0,0,0.55);
}
.vc-nav:not(.scrolled) .vc-burger span { background: #fff; }
/* Primary CTA in the nav — keep its dark pill but add a light glassy ring
so the edge reads against the dark video without changing the pill itself. */
.vc-nav:not(.scrolled) .vc-btn-primary {
box-shadow: 0 0 0 1px rgba(255,255,255,0.15), 0 8px 24px -8px rgba(0,0,0,0.7);
}
/* ===== Icon System ===== */
/* TILE VARIANT - gradient-fill rounded square, white icon stroke */
.vc-icon-tile {
--vc-icon-tile-size: 56px;
width: var(--vc-icon-tile-size);
height: var(--vc-icon-tile-size);
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 14px;
background: linear-gradient(135deg, #0B5D55 0%, #0F766E 60%, #14B8A6 100%);
box-shadow: 0 8px 20px rgba(15, 118, 110, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.15);
flex-shrink: 0;
position: relative;
overflow: hidden;
}
.vc-icon-tile::after {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.18) 0%, transparent 60%);
pointer-events: none;
}
.vc-icon-tile svg {
position: relative;
z-index: 1;
}
/* SMALL TILE - for inline contexts (trio tags) */
.vc-icon-tile.is-sm {
--vc-icon-tile-size: 28px;
border-radius: 8px;
box-shadow: 0 3px 8px rgba(15, 118, 110, 0.22);
}
/* MEDIUM TILE - between is-sm and default 56px */
.vc-icon-tile.is-md {
--vc-icon-tile-size: 44px;
border-radius: 12px;
box-shadow: 0 6px 16px rgba(15, 118, 110, 0.35);
}
/* LARGE TILE - Why-card icons */
.vc-icon-tile.is-lg {
--vc-icon-tile-size: 64px;
border-radius: 16px;
}
/* STROKE VARIANT - bare icon, gradient stroke via #vc-icon-grad */
.vc-icon-stroke {
display: inline-block;
vertical-align: middle;
}
/* ===== Languages section v2 - typographic ===== */
.vc-lang-card-v2 {
background: #fff;
border: 1px solid rgba(15, 118, 110, 0.12);
border-radius: 18px;
padding: 24px 22px 22px;
position: relative;
overflow: hidden;
transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease, border-color .35s ease;
}
.vc-lang-card-v2:hover {
transform: translateY(-4px);
box-shadow: 0 14px 32px rgba(15, 118, 110, 0.12);
border-color: rgba(15, 118, 110, 0.25);
}
.vc-lang-card-v2 .vc-lang-native {
font-size: clamp(28px, 3.2vw, 44px);
line-height: 1.1;
font-weight: 600;
color: #0B5D55;
letter-spacing: -0.01em;
margin: 0 0 10px;
font-family: 'IBM Plex Sans Arabic', 'Noto Sans Devanagari', 'Noto Sans Bengali', 'Noto Sans Sinhala', 'Noto Sans Ethiopic', 'Noto Nastaliq Urdu', system-ui, sans-serif;
}
.vc-lang-card-v2 .vc-lang-latin {
font-size: 13px;
font-weight: 500;
color: #6B7066;
text-transform: uppercase;
letter-spacing: 0.08em;
margin: 0 0 4px;
}
.vc-lang-card-v2 .vc-lang-region {
font-size: 12px;
font-weight: 400;
color: #0F766E;
margin: 0;
}
.vc-lang-card-v2 .vc-lang-bar {
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 3px;
background: linear-gradient(90deg, #0B5D55, #0F766E, #14B8A6);
opacity: 0.4;
transition: opacity .35s ease;
}
.vc-lang-card-v2:hover .vc-lang-bar {
opacity: 1;
}
/* Flag — sits at the visual top-start corner (top-right in RTL, top-left in
LTR) of each card. Smaller scale so it accents rather than dominates the
typographic native-script word. */
.vc-lang-card-v2 {
position: relative;
}
.vc-lang-card-v2 .vc-lang-flag {
position: absolute;
top: 16px;
inset-inline-end: 18px; /* logical: right in LTR, left in RTL — wait, opposite */
font-size: 24px;
line-height: 1;
filter: drop-shadow(0 2px 4px rgba(11, 93, 85, 0.18));
pointer-events: none;
}
/* Use start-side anchor: in RTL the heading reads from the right, so the
flag sits at the LEFT (the "end" of the reading flow) to balance with
the headline mass. In LTR the heading reads from the left, so the flag
sits at the RIGHT. */
[dir="rtl"] .vc-lang-card-v2 .vc-lang-flag { right: auto; left: 18px; }
[dir="ltr"] .vc-lang-card-v2 .vc-lang-flag { left: auto; right: 18px; }
/* ===== Lang chip - small inline pill (WhatIs employee card row) ===== */
.vc-lang-chip {
display: inline-flex;
align-items: center;
padding: 4px 10px;
border-radius: 999px;
background: rgba(15, 118, 110, 0.08);
color: #0B5D55;
font-size: 12px;
font-weight: 500;
margin: 0 4px 4px 0;
white-space: nowrap;
}
/* Reset legacy emoji-tile styling on Features detail icon wrapper now that the
child .vc-icon-tile renders the gradient tile itself. Override display:grid
from the original rule so the tile aligns with the tag/title below it
(start-aligned within the flex column, not centered). */
.vc-feat-detail-icon {
width: auto;
height: auto;
background: transparent;
border: 0;
padding: 0;
font-size: 0;
display: flex;
align-self: flex-start;
}
/* Reset legacy emoji-tile styling on Why icon wrapper now that the child
.vc-icon-tile renders the gradient tile itself. */
.vc-why-icon {
background: transparent;
padding: 0;
font-size: 0;
width: auto;
height: auto;
}
/* Trio-tag layout — accommodate inline tile icon */
.vc-trio-tag {
display: inline-flex;
align-items: center;
gap: 8px;
}
/* Trio chips — multi-line wrap for the language pills */
.vc-trio-chips {
display: flex;
flex-wrap: wrap;
gap: 4px;
margin-top: 12px;
}
/* Languages grid v2 — 3-column responsive */
.vc-langs-grid-v2 {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;
margin-top: 32px;
}
@media (max-width: 900px) {
.vc-langs-grid-v2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
.vc-langs-grid-v2 { grid-template-columns: 1fr; }
}
/* Orbit emoji wrapper — content is now an SVG tile, not text */
.vc-orbit-emoji {
font-size: 0;
line-height: 0;
text-shadow: none;
}
/* =====================================================================
RESPONSIVE FIXES (2026-04-29) — F1-F5
Cascading fixes for tablet/mobile/ultrawide. Pin sections preserved.
===================================================================== */
/* ---------- F1: Nav hamburger drawer for <=900px (incl. iPad portrait) ---------- */
@media (max-width: 900px) {
.vc-nav-links,
.vc-nav-cta .vc-lang-btn,
.vc-nav-cta .vc-nav-partner,
.vc-nav-cta .vc-btn-primary { display: none; }
.vc-burger { display: flex; }
.vc-mobile-menu { display: flex; }
}
/* Partner link in the top nav (e.g. NIOSH). Sits next to the lang button as
a small bordered pill — visually subordinate to the primary "Book" CTA. */
.vc-nav-partner {
display: inline-flex;
align-items: center;
padding: 8px 14px;
border-radius: 99px;
border: 1px solid var(--vc-line);
font-size: 13px;
font-weight: 600;
letter-spacing: 0.04em;
color: var(--vc-ink-700);
text-decoration: none;
transition: all 0.2s;
}
.vc-nav-partner:hover {
border-color: #0F766E;
background: rgba(15, 118, 110, 0.06);
color: #0B5D55;
}
/* When over the dark hero, mirror the lang-btn's white treatment */
.vc-nav:not(.scrolled) .vc-nav-partner {
color: #fff;
border-color: rgba(255, 255, 255, 0.30);
background: rgba(255, 255, 255, 0.06);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
.vc-nav:not(.scrolled) .vc-nav-partner:hover {
background: rgba(255, 255, 255, 0.16);
border-color: rgba(255, 255, 255, 0.5);
}
/* In the mobile drawer, render as a tappable row that matches the other links */
.vc-mobile-menu > .vc-nav-partner {
display: block;
padding: 16px 8px;
font-size: 16px;
font-weight: 600;
border-radius: 0;
border: 0;
border-bottom: 1px solid rgba(15, 27, 23, 0.06);
color: var(--vc-ink-900);
background: transparent;
letter-spacing: 0;
}
[dir="rtl"] .vc-mobile-menu > .vc-nav-partner { text-align: right; }
[dir="ltr"] .vc-mobile-menu > .vc-nav-partner { text-align: left; }
.vc-mobile-menu > .vc-nav-partner:hover { color: #0F766E; background: transparent; }
/* Drawer styling: slide-in panel, full-width, tappable rows */
.vc-mobile-menu {
position: absolute;
left: 0;
right: 0;
top: 100%;
padding: 8px 20px 24px;
background: #fff;
border-top: 1px solid var(--vc-line-soft);
box-shadow: 0 18px 40px rgba(15, 27, 23, 0.12);
animation: vc-drawer-in .25s cubic-bezier(.2,.7,.2,1);
z-index: 50;
}
/* Navigation links — full-width tappable rows. Use child-combinator (>) +
:not selectors so this rule targets ONLY the plain anchors, not the
booking-button anchor (.vc-btn-primary). Otherwise the dark color here
overrode the button's white text and made it invisible. */
.vc-mobile-menu > a:not(.vc-btn-primary) {
display: block;
padding: 16px 8px;
font-size: 16px;
font-weight: 500;
color: var(--vc-ink-900);
border-bottom: 1px solid rgba(15, 27, 23, 0.06);
text-decoration: none;
transition: color .2s ease, padding .2s ease;
}
[dir="rtl"] .vc-mobile-menu > a:not(.vc-btn-primary) { text-align: right; }
[dir="ltr"] .vc-mobile-menu > a:not(.vc-btn-primary) { text-align: left; }
.vc-mobile-menu > a:not(.vc-btn-primary):hover {
color: #0F766E;
}
/* Drop the trailing border on the LAST plain link (just before the actions row) */
.vc-mobile-menu > a:not(.vc-btn-primary):last-of-type { border-bottom: 0; }
/* Lang switcher — small bordered pill, sits inline with the book button */
.vc-mobile-menu .vc-lang-btn {
margin-top: 16px;
align-self: stretch;
justify-content: center;
height: 48px;
padding: 0 18px;
border-radius: 999px;
background: transparent;
border: 1px solid rgba(15, 118, 110, 0.22);
color: #0B5D55;
font-size: 15px;
font-weight: 600;
display: inline-flex;
align-items: center;
gap: 8px;
cursor: pointer;
}
.vc-mobile-menu .vc-lang-btn:hover {
background: rgba(15, 118, 110, 0.06);
}
/* Book-a-meeting CTA — full-width pill, brand teal gradient, WHITE text */
.vc-mobile-menu .vc-btn-primary {
margin-top: 10px;
display: flex;
width: 100%;
height: 52px;
padding: 0 22px;
justify-content: center;
align-items: center;
border-radius: 999px;
background: linear-gradient(135deg, #0B5D55 0%, #0F766E 60%, #14B8A6 100%);
color: #FFFFFF !important; /* override any descendant `color` rule */
font-size: 16px;
font-weight: 700;
text-decoration: none;
box-shadow: 0 10px 24px rgba(11, 93, 85, 0.28);
}
.vc-mobile-menu .vc-btn-primary:hover {
transform: translateY(-1px);
box-shadow: 0 14px 30px rgba(11, 93, 85, 0.34);
}
@keyframes vc-drawer-in {
from { opacity: 0; transform: translateY(-8px); }
to { opacity: 1; transform: translateY(0); }
}
/* Note: nav is `position: fixed` (set in the original .vc-nav rule). Fixed
positioning creates its own positioning context so the absolutely-positioned
.vc-mobile-menu drawer anchors to the nav as expected. We don't override
position here — keeping it fixed so the nav stays at the top during scroll
and toggles to the cream/white scrolled state via .scrolled class. */
@media (max-width: 900px) {
.vc-burger {
padding: 8px;
/* Push burger to the opposite end of the brand logo. In LTR (brand on
left), this becomes margin-left: auto → burger on right. In RTL
(brand on right), this becomes margin-right: auto → burger on left. */
margin-inline-start: auto;
}
}
/* ---------- F2: Pin section responsive behavior ---------- */
/* TABLET (768-1024px): keep pins, but tighten scroll-runways and stack the
Features showcase vertically so it fills the pin viewport. */
@media (min-width: 768px) and (max-width: 1024px) {
/* Tighten Features pin runway (8 steps still, but ~360vh instead of 480vh) */
.vc-features-pin { height: 360vh; }
.vc-stats-pin,
.vc-app-pin { height: 200vh; }
.vc-how-section { height: 240vh; }
/* Features showcase: stack text above phone so each fills the tablet viewport */
.vc-feat-showcase {
grid-template-columns: 1fr;
gap: clamp(20px, 3vh, 32px);
max-width: 720px;
align-items: stretch;
}
.vc-feat-detail {
text-align: center;
max-width: 540px;
margin: 0 auto;
}
.vc-feat-phone-col {
transform: scale(0.85);
transform-origin: center top;
margin: 0 auto;
}
}
/* MOBILE (<768px): KEEP pinning + scrollytelling animations. Shorter scroll
runways so animations feel snappier on small viewports. Layouts adapt to
single column inside the pinned sticky inner. */
@media (max-width: 767px) {
/* Tighter pin runways for mobile — animations resolve faster */
.vc-features-pin { height: 360vh; } /* 8 features, 45vh each */
.vc-stats-pin,
.vc-app-pin { height: 200vh; }
.vc-how-section { height: 240vh; }
/* Sticky inners stay sticky and viewport-tall. (Default rules apply, no
overrides needed — leaving the desktop sticky behavior intact.) */
/* Features chip-rail: horizontal scroll with snap on mobile */
.vc-feat-toprail-row {
overflow-x: auto;
flex-wrap: nowrap;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
}
.vc-feat-chip {
scroll-snap-align: start;
flex-shrink: 0;
}
/* Features showcase: text/icon column above phone column.
Phone hidden for now (will be replaced with real screenshots). */
.vc-feat-showcase {
grid-template-columns: 1fr !important;
gap: 24px !important;
}
.vc-feat-phone-col {
display: none !important;
}
.vc-feat-detail {
text-align: center;
align-items: center;
max-width: 100%;
}
.vc-feat-detail .vc-feat-detail-icon { align-self: center; }
.vc-feat-detail-tag { align-self: center; }
/* App section: stack content above phones (single column), shrink phone
so the orbit chips don't overflow the small viewport. */
.vc-app-pin .vc-app-grid {
grid-template-columns: 1fr !important;
gap: 24px !important;
}
.vc-app-pin .vc-app-content {
text-align: center;
max-width: 100%;
}
.vc-app-pin .vc-app-content .vc-h2,
.vc-app-pin .vc-app-content .vc-section-lead { text-align: center; }
.vc-app-pin .vc-app-content .vc-hero-stores { justify-content: center; }
.vc-app-pin .vc-app-phones {
min-height: 320px;
margin: 0 auto;
width: 240px; /* bound so orbit chips don't overflow viewport */
max-width: 100%;
}
/* Orbit chips: tighten positions so they stay inside the viewport */
.vc-orbit-1, [dir="rtl"] .vc-orbit-1 { top: 4%; left: -4%; right: auto; }
.vc-orbit-2, [dir="rtl"] .vc-orbit-2 { top: 14%; right: -6%; left: auto; }
.vc-orbit-3, [dir="rtl"] .vc-orbit-3 { bottom: 14%; left: -2%; right: auto; }
.vc-orbit-4, [dir="rtl"] .vc-orbit-4 { bottom: 4%; right: -4%; left: auto; }
[dir="rtl"] .vc-orbit-1 { left: auto; right: -4%; }
[dir="rtl"] .vc-orbit-2 { right: auto; left: -6%; }
[dir="rtl"] .vc-orbit-3 { left: auto; right: -2%; }
[dir="rtl"] .vc-orbit-4 { right: auto; left: -4%; }
}
/* ---------- F3: Ultrawide treatment ---------- */
/* Wide laptops / desktop monitors (1600-2199px) — keep hero title at the
desktop ceiling (72px). Bigger titles dominate the page and feel oversized
on real monitors (the 1280-viewport preview matches the desktop ceiling). */
@media (min-width: 1600px) {
:root { --vc-max: 1440px; }
/* Hero title stays at the default clamp(36px, 5.6vw, 72px) — no override. */
.vc-hero-center .vc-hero-subtitle { font-size: clamp(16px, 1.05vw, 18px); max-width: 700px; }
}
/* Ultrawide / large monitors (2200px+) — give a small bump but not double */
@media (min-width: 2200px) {
:root { --vc-max: 1600px; }
.vc-hero-center .vc-hero-title { font-size: clamp(56px, 3.6vw, 80px); }
.vc-hero-center .vc-hero-subtitle { font-size: clamp(17px, 1vw, 20px); max-width: 760px; }
.vc-h2 { font-size: clamp(34px, 2.2vw, 48px); }
.vc-section-lead { font-size: clamp(15px, 0.95vw, 18px); }
}
/* ---------- F4: Narrow-mobile (<480px) refinements ---------- */
@media (max-width: 479px) {
/* Tighter container padding for very narrow screens */
.vc-container { padding: 0 16px; }
.vc-fit-inner { padding: 0 16px; }
/* Hero: tighten hero padding and CTAs */
.vc-hero.vc-fit { padding: 88px 0 40px; }
.vc-hero-center .vc-hero-title { font-size: clamp(26px, 7.5vw, 36px); margin: 12px 0; }
.vc-hero-center .vc-hero-subtitle { font-size: 14px; margin-bottom: 20px; }
.vc-hero-center .vc-hero-cta { gap: 8px; margin-bottom: 20px; }
.vc-hero-center .vc-btn-lg { padding: 12px 20px; font-size: 15px; }
/* Mini-stats: 2x2 grid with tighter padding */
.vc-hero-mini-stats {
grid-template-columns: repeat(2, 1fr);
padding: 16px;
gap: 12px;
}
.vc-hms-n { font-size: 22px; }
.vc-hms-l { font-size: 11px; }
/* Section headings: clamp lower */
.vc-h2 { font-size: clamp(22px, 6.5vw, 32px); line-height: 1.18; }
.vc-section-lead { font-size: 14px; }
.vc-section { padding: 48px 0; }
.vc-fit { padding: 48px 0; }
/* WhatIs trio cards: tighter padding */
.vc-trio-card { padding: 20px; }
/* Why cards */
.vc-why-card { padding: 20px; }
/* Features chip-rail: smaller chips */
.vc-feat-chip-num { font-size: 11px; }
.vc-feat-chip-label { font-size: 13px; }
/* Tile sizing: shrink large tiles slightly */
.vc-icon-tile.is-lg { --vc-icon-tile-size: 56px; border-radius: 14px; }
/* Languages cards: smaller native script */
.vc-lang-card-v2 { padding: 18px 16px 16px; }
.vc-lang-card-v2 .vc-lang-native { font-size: clamp(22px, 6vw, 32px); }
}
/* =====================================================================
MOBILE POLISH (2026-04-29) — addresses 5 specific issues from QA
1. Hero fills viewport on mobile (was collapsing to content)
2. AppSection phone doesn't overlap text below
3. Features phone visible on mobile
4. Languages section compact 2-col grid (was 1-col, too tall)
5. Footer 2-column on mobile
===================================================================== */
/* Fix 1: Hero fills full viewport on mobile when at top */
@media (max-width: 767px) {
.vc-hero.vc-fit {
min-height: 100vh;
min-height: 100svh; /* shorter mobile-safe value (excludes browser chrome) */
}
.vc-hero-center {
min-height: calc(100vh - 88px); /* viewport minus nav */
min-height: calc(100svh - 88px);
display: flex;
flex-direction: column;
justify-content: center;
}
}
/* Fix 2: AppSection phone — proper sizing + spacing so it doesn't overlap text */
@media (max-width: 767px) {
.vc-app-pin .vc-app-phones {
min-height: 380px; /* enough room for tilted 210px phone */
width: 220px;
max-width: 100%;
margin: 0 auto;
margin-bottom: 12px; /* extra gap before content/text */
}
.vc-app-pin .vc-app-grid {
gap: 32px !important; /* increase gap between phone and text */
}
}
/* Fix 3: Features phone visible on mobile (was hidden in F2) */
@media (max-width: 767px) {
.vc-feat-phone-col {
display: grid !important; /* override the previous display:none */
transform: scale(0.75);
transform-origin: center top;
margin: 8px auto 0;
justify-self: center;
}
/* Stack phone below the text/icon */
.vc-feat-showcase {
grid-template-columns: 1fr !important;
gap: 16px !important;
align-items: stretch;
}
.vc-feat-detail { order: 1; }
.vc-feat-phone-col { order: 2; }
}
/* Fix 4: Languages section — 2-col grid + compact cards on mobile */
@media (max-width: 767px) {
.vc-langs-grid-v2 {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 10px;
}
.vc-lang-card-v2 {
padding: 14px 12px 12px;
border-radius: 14px;
}
.vc-lang-card-v2 .vc-lang-native {
font-size: clamp(18px, 5vw, 24px);
margin: 0 0 4px;
}
.vc-lang-card-v2 .vc-lang-latin {
font-size: 11px;
letter-spacing: 0.06em;
}
.vc-lang-card-v2 .vc-lang-region {
font-size: 11px;
}
}
/* Fix 5: Footer compact mobile — brand full-width row, 3 link cols in 2-col grid */
@media (max-width: 767px) {
.vc-footer-top {
grid-template-columns: 1fr 1fr !important;
grid-template-areas:
"brand brand"
"col1 col2"
"col3 col3" !important;
gap: 24px 16px;
}
.vc-footer-top > .vc-footer-brand { grid-area: brand; }
.vc-footer-top > .vc-footer-col:nth-of-type(1) { grid-area: col1; }
.vc-footer-top > .vc-footer-col:nth-of-type(2) { grid-area: col2; }
.vc-footer-top > .vc-footer-col:nth-of-type(3) { grid-area: col3; }
.vc-footer-col-title { font-size: 11px; }
.vc-footer-col a { font-size: 13px; }
.vc-footer-col ul { gap: 8px; }
}
/* ---------- F5: Footer + chip-rail at small viewports ---------- */
/* Footer: stack to 1 column under 600px (currently stacks to 2 at <=1024) */
@media (max-width: 599px) {
.vc-footer-top {
grid-template-columns: 1fr !important;
gap: 32px;
padding-bottom: 32px;
}
.vc-footer-bottom {
flex-direction: column;
align-items: flex-start;
gap: 12px;
}
.vc-footer { padding: 48px 0 32px; }
}
/* Features chip-rail: at tablet (768-900) the 8 chips wrap to 2 rows naturally,
but on borderline widths (901-1024 with hamburger nav now) the chips can
become wide enough to overflow. Allow horizontal scroll with snap */
@media (min-width: 768px) and (max-width: 1024px) {
.vc-feat-toprail-row {
display: flex;
flex-wrap: wrap;
gap: 8px;
justify-content: center;
}
.vc-feat-chip {
flex: 0 1 auto;
}
}
/* (Removed: html { overflow-x: clip } — broke position:sticky pin sections.
Real horizontal-overflow source is identified and patched below.) */