/* ═══════════════════════════════════════════════════════════════
FC NAVBAR — Premium glass dock · 2026 redesign
· Sliding magic-line indicator · Logo shine · Magnetic CTA
· Scroll progress bar · Animated theme toggle
· Full dark / light theme parity
═══════════════════════════════════════════════════════════════ */
.fc-navbar {
position: absolute;
width: 100%;
left: 0; right: 0; top: 0;
z-index: 999;
padding: 22px 0 0;
transition: padding 0.4s cubic-bezier(0.25, 0.8, 0.25, 1),
background 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
}
.fc-navbar .container-fluid { padding: 0 48px; position: relative; }
/* Floating aura behind the navbar (subtle ambient bloom) */
.fc-navbar-aura {
position: absolute;
top: -40px; left: 50%;
transform: translateX(-50%);
width: 60%; height: 120px;
border-radius: 50%;
filter: blur(60px);
background: radial-gradient(ellipse, rgba(61,191,169,0.18), transparent 70%);
opacity: 0.7;
pointer-events: none;
z-index: -1;
transition: opacity .4s ease;
}
.fc-navbar.sticky .fc-navbar-aura { opacity: 0.45; }
.fc-navbar-inner {
display: flex;
align-items: center;
justify-content: space-between;
position: relative;
gap: 24px;
}
/* ───────── Logo ───────── */
.fc-navbar-logo { flex: 0 0 auto; position: relative; }
.fc-navbar-logo a {
position: relative;
display: inline-block;
overflow: hidden;
padding: 4px 6px;
border-radius: 8px;
}
.fc-navbar-logo a img {
max-height: 42px;
transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.3s ease;
position: relative;
z-index: 1;
}
.fc-navbar-logo a:hover img { transform: scale(1.06); filter: brightness(1.18); }
/* Shine sweep on logo hover */
.fc-navbar-logo-shine {
position: absolute;
top: 0; left: -100%;
width: 60%; height: 100%;
background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.55) 50%, transparent 100%);
transform: skewX(-20deg);
transition: left 0.85s cubic-bezier(0.25, 0.8, 0.25, 1);
pointer-events: none;
z-index: 2;
}
.fc-navbar-logo a:hover .fc-navbar-logo-shine { left: 130%; }
.fc-navbar-logo .header-logo-2 { display: none; }
/* ───────── Center pill ───────── */
.fc-navbar-pill {
position: absolute;
left: 50%;
transform: translateX(-50%);
display: flex;
justify-content: center;
}
.fc-navbar-nav {
position: relative;
background: linear-gradient(140deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
backdrop-filter: blur(22px) saturate(160%);
-webkit-backdrop-filter: blur(22px) saturate(160%);
border: 1px solid rgba(255,255,255,0.10);
border-radius: 100px;
padding: 6px;
box-shadow:
0 12px 40px rgba(0,0,0,0.30),
0 0 0 1px rgba(255,255,255,0.04) inset;
transition: background 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
/* NOTE: no overflow:hidden — would clip submenu */
}
/* Subtle inner sheen sweep — animated via background-position so it
stays visually contained without needing overflow:hidden on the parent. */
.fc-navbar-nav::before {
content: "";
position: absolute; inset: 0;
border-radius: inherit;
background: linear-gradient(120deg, transparent 35%, rgba(255,255,255,0.10) 50%, transparent 65%);
background-size: 220% 100%;
background-position: 100% 0;
animation: fcNavSheen 7s ease-in-out infinite;
pointer-events: none;
}
@keyframes fcNavSheen {
0% { background-position: 200% 0; }
55% { background-position: -100% 0; }
100% { background-position: -100% 0; }
}
/* Sliding magic-line indicator (animated background pill) */
.fc-navbar-indicator {
position: absolute;
top: 6px; left: 0;
height: calc(100% - 12px);
width: 0;
border-radius: 50px;
background: linear-gradient(135deg, rgba(61,191,169,0.22), rgba(26,123,175,0.22));
border: 1px solid rgba(61,191,169,0.35);
box-shadow: 0 4px 16px rgba(61,191,169,0.18);
opacity: 0;
transform: translateX(0);
transition: transform 0.45s cubic-bezier(0.5, 1.4, 0.4, 1),
width 0.45s cubic-bezier(0.5, 1.4, 0.4, 1),
opacity 0.3s ease;
z-index: 0;
pointer-events: none;
}
.fc-navbar-nav ul {
position: relative;
display: flex; align-items: center; gap: 2px;
margin: 0; padding: 0; list-style: none;
z-index: 1;
}
.fc-navbar-nav ul li { position: relative; }
.fc-navbar-nav ul li a {
position: relative;
display: inline-flex; align-items: center; gap: 6px;
font-size: 14px; font-weight: 600;
color: rgba(255,255,255,0.72);
padding: 11px 22px;
border-radius: 50px;
text-decoration: none;
transition: color 0.3s ease;
white-space: nowrap;
letter-spacing: 0.2px;
z-index: 2;
}
.fc-navbar-nav ul li a:hover,
.fc-navbar-nav ul li.active > a { color: #ffffff; }
.fc-navbar-nav ul li a i {
font-size: 9px;
transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.fc-navbar-nav ul li:hover > a i,
.fc-navbar-nav ul li.is-open > a i { transform: rotate(180deg); }
/* ───────── Submenu ───────── */
/* The submenu sits directly under the parent (top:100%) and uses
padding-top to create the visual gap. This keeps the hover area
continuous so the menu doesn't collapse when crossing the gap. */
.fc-navbar-nav ul li .submenu {
position: absolute;
top: 100%; left: 50%;
margin-top: 0;
padding: 28px 10px 10px; /* 18px visual gap + 10px content padding */
transform: translateX(-50%) translateY(10px) scale(.96);
transform-origin: top center;
min-width: 240px;
z-index: 99999;
visibility: hidden; opacity: 0;
background: linear-gradient(180deg, transparent 0, transparent 18px, rgba(20,28,42,0.96) 18px);
backdrop-filter: blur(28px) saturate(160%);
-webkit-backdrop-filter: blur(28px) saturate(160%);
border-radius: 16px;
box-shadow: 0 24px 60px rgba(0,0,0,0.45);
transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), visibility 0s linear 0.35s;
list-style: none;
}
/* Card border + inset highlight live on a pseudo-element so they
only cover the visible card area (below the 18px transparent gap) */
.fc-navbar-nav ul li .submenu::after {
content: "";
position: absolute;
top: 18px; left: 0; right: 0; bottom: 0;
border-radius: 16px;
border: 1px solid rgba(255,255,255,0.08);
box-shadow: 0 0 0 1px rgba(61,191,169,0.10) inset;
pointer-events: none;
}
.fc-navbar-nav ul li:hover > .submenu,
.fc-navbar-nav ul li:focus-within > .submenu,
.fc-navbar-nav ul li.is-open > .submenu {
visibility: visible; opacity: 1;
transform: translateX(-50%) translateY(0) scale(1);
transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), visibility 0s linear 0s;
}
/* Floating arrow above submenu (within the padding zone) */
.fc-navbar-nav ul li .submenu::before {
content: "";
position: absolute;
top: 12px; left: 50%;
transform: translateX(-50%) rotate(45deg);
width: 12px; height: 12px;
background: rgba(20,28,42,0.96);
border-left: 1px solid rgba(255,255,255,0.08);
border-top: 1px solid rgba(255,255,255,0.08);
z-index: 1;
}
.fc-navbar-nav ul li .submenu li {
display: block; margin: 0;
opacity: 0;
transform: translateY(8px);
transition: opacity .35s ease, transform .35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.fc-navbar-nav ul li:hover > .submenu li { opacity: 1; transform: translateY(0); }
.fc-navbar-nav ul li:hover > .submenu li:nth-child(1) { transition-delay: .04s; }
.fc-navbar-nav ul li:hover > .submenu li:nth-child(2) { transition-delay: .10s; }
.fc-navbar-nav ul li:hover > .submenu li:nth-child(3) { transition-delay: .16s; }
.fc-navbar-nav ul li .submenu li a {
display: flex; align-items: center; gap: 12px;
padding: 11px 14px;
font-size: 13.5px; font-weight: 500;
color: rgba(255,255,255,0.78);
border-radius: 10px;
transition: color .25s ease, background .25s ease, padding-left .3s ease;
}
.fc-navbar-nav ul li .submenu li a:hover {
background: linear-gradient(135deg, rgba(61,191,169,0.18), rgba(26,123,175,0.14));
color: #ffffff;
padding-left: 18px;
}
.fc-navbar-sub-ic {
width: 28px; height: 28px;
display: inline-flex; align-items: center; justify-content: center;
border-radius: 8px;
background: linear-gradient(135deg, rgba(61,191,169,0.18), rgba(26,123,175,0.18));
color: var(--fc-accent, #3DBFA9);
font-size: 11px;
border: 1px solid rgba(61,191,169,0.28);
transition: transform .35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.fc-navbar-nav ul li .submenu li a:hover .fc-navbar-sub-ic { transform: rotate(8deg) scale(1.1); }
/* ───────── Right side ───────── */
.fc-navbar-right { display: flex; align-items: center; gap: 14px; flex: 0 0 auto; }
/* CTA Button */
.fc-navbar-cta {
display: inline-flex; align-items: center; gap: 12px;
padding: 10px 12px 10px 22px;
border-radius: 100px;
font-size: 14px; font-weight: 700;
color: #ffffff;
background: linear-gradient(135deg, rgba(61,191,169,0.18), rgba(26,123,175,0.18));
border: 1px solid rgba(61,191,169,0.32);
text-decoration: none;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
position: relative;
overflow: hidden;
will-change: transform;
transition: transform .25s ease, box-shadow .35s ease, border-color .35s ease, background .35s ease;
}
.fc-navbar-cta::before {
content: "";
position: absolute; inset: 0;
border-radius: inherit;
background: linear-gradient(135deg, #3DBFA9, #1A7BAF);
opacity: 0;
transition: opacity 0.4s ease;
z-index: 0;
}
.fc-navbar-cta::after {
content: "";
position: absolute; inset: 0;
background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.30) 50%, transparent 70%);
transform: translateX(-100%);
transition: transform 0.85s cubic-bezier(0.25, 0.8, 0.25, 1);
z-index: 1;
}
.fc-navbar-cta:hover {
border-color: rgba(61,191,169,0);
box-shadow: 0 14px 30px -8px rgba(61,191,169,0.55);
color: #ffffff;
}
.fc-navbar-cta:hover::before { opacity: 1; }
.fc-navbar-cta:hover::after { transform: translateX(100%); }
.fc-navbar-cta-label,
.fc-navbar-cta-arrow { position: relative; z-index: 2; }
.fc-navbar-cta-arrow {
display: inline-flex; align-items: center; justify-content: center;
width: 30px; height: 30px;
border-radius: 50%;
background: rgba(255,255,255,0.92);
color: #0E2A33;
font-size: 11px;
transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), background .3s ease;
}
.fc-navbar-cta:hover .fc-navbar-cta-arrow {
transform: translate(3px, -3px) rotate(8deg);
background: #ffffff;
}
/* ───────── Sticky state (Dark) ───────── */
.fc-navbar.sticky {
position: fixed !important; top: 0 !important;
padding: 10px 0 0;
background: rgba(8,8,15,0.78);
backdrop-filter: blur(28px) saturate(180%);
-webkit-backdrop-filter: blur(28px) saturate(180%);
box-shadow: 0 1px 0 rgba(255,255,255,0.04), 0 12px 44px rgba(0,0,0,0.45);
border-bottom: 1px solid rgba(255,255,255,0.06);
z-index: 99999;
animation: fcNavSlideDown 0.45s cubic-bezier(0.25, 0.8, 0.25, 1);
}
@keyframes fcNavSlideDown {
from { transform: translateY(-12px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
.fc-navbar.sticky .fc-navbar-nav {
background: rgba(255,255,255,0.04);
border-color: rgba(255,255,255,0.08);
box-shadow: 0 8px 24px rgba(0,0,0,0.35), 0 0 0 1px rgba(255,255,255,0.03) inset;
}
/* ───────── Scroll progress bar ───────── */
.fc-navbar-progress {
position: absolute;
left: 0; right: 0; bottom: 0;
height: 2px;
background: rgba(255,255,255,0.06);
overflow: hidden;
opacity: 0;
transition: opacity .35s ease;
}
.fc-navbar.sticky .fc-navbar-progress { opacity: 1; }
.fc-navbar-progress span {
display: block;
height: 100%;
width: 100%;
transform-origin: 0 50%;
transform: scaleX(0);
background: linear-gradient(90deg, #3DBFA9, #1A7BAF);
box-shadow: 0 0 12px rgba(61,191,169,0.55);
transition: transform .12s linear;
}
/* ════════════════════════════════════════════════
LIGHT THEME OVERRIDES
════════════════════════════════════════════════ */
[data-theme="light"] .fc-navbar .fc-navbar-logo .header-logo { display: none; }
[data-theme="light"] .fc-navbar .fc-navbar-logo .header-logo-2 { display: block; }
[data-theme="light"] .fc-navbar-aura {
background: radial-gradient(ellipse, rgba(61,191,169,0.16), transparent 70%);
}
[data-theme="light"] .fc-navbar-nav {
background: linear-gradient(140deg, rgba(255,255,255,0.85), rgba(255,255,255,0.72));
border-color: rgba(14,42,51,0.08);
box-shadow:
0 12px 36px rgba(14,42,51,0.10),
0 0 0 1px rgba(255,255,255,0.5) inset;
}
[data-theme="light"] .fc-navbar-nav::before {
background: linear-gradient(120deg, transparent 30%, rgba(26,123,175,0.10) 50%, transparent 70%);
}
[data-theme="light"] .fc-navbar-indicator {
background: linear-gradient(135deg, rgba(61,191,169,0.16), rgba(26,123,175,0.16));
border-color: rgba(26,123,175,0.30);
box-shadow: 0 4px 14px rgba(26,123,175,0.18);
}
[data-theme="light"] .fc-navbar-nav ul li a {
color: rgba(14,42,51,0.65);
}
[data-theme="light"] .fc-navbar-nav ul li a:hover,
[data-theme="light"] .fc-navbar-nav ul li.active > a { color: #0E2A33; }
[data-theme="light"] .fc-navbar-nav ul li .submenu {
background: linear-gradient(180deg, transparent 0, transparent 18px, #ffffff 18px);
box-shadow: 0 24px 60px rgba(14,42,51,0.16);
}
[data-theme="light"] .fc-navbar-nav ul li .submenu::after {
border-color: rgba(14,42,51,0.08);
box-shadow: 0 0 0 1px rgba(26,123,175,0.06) inset;
}
[data-theme="light"] .fc-navbar-nav ul li .submenu::before {
background: #ffffff;
border-left-color: rgba(14,42,51,0.08);
border-top-color: rgba(14,42,51,0.08);
}
[data-theme="light"] .fc-navbar-nav ul li .submenu li a {
color: rgba(14,42,51,0.78);
}
[data-theme="light"] .fc-navbar-nav ul li .submenu li a:hover {
background: linear-gradient(135deg, rgba(61,191,169,0.10), rgba(26,123,175,0.08));
color: #0E2A33;
}
[data-theme="light"] .fc-navbar-cta {
color: #ffffff;
background: linear-gradient(135deg, rgba(61,191,169,0.16), rgba(26,123,175,0.16));
border-color: rgba(26,123,175,0.32);
}
[data-theme="light"] .fc-navbar-cta::before {
background: linear-gradient(135deg, #3DBFA9, #1A7BAF);
}
[data-theme="light"] .fc-navbar-cta {
color: #0E2A33;
}
[data-theme="light"] .fc-navbar-cta:hover {
color: #ffffff;
box-shadow: 0 14px 30px -8px rgba(26,123,175,0.45);
}
[data-theme="light"] .fc-navbar-cta-arrow {
background: linear-gradient(135deg, #3DBFA9, #1A7BAF);
color: #ffffff;
}
[data-theme="light"] .fc-navbar-cta:hover .fc-navbar-cta-arrow {
background: #ffffff;
color: #1A7BAF;
}
[data-theme="light"] .fc-navbar.sticky {
background: rgba(255,255,255,0.85) !important;
box-shadow: 0 1px 0 rgba(14,42,51,0.05), 0 10px 32px rgba(14,42,51,0.08) !important;
border-bottom: 1px solid rgba(14,42,51,0.06) !important;
}
[data-theme="light"] .fc-navbar.sticky .fc-navbar-nav {
background: rgba(255,255,255,0.7);
border-color: rgba(14,42,51,0.08);
box-shadow: 0 6px 20px rgba(14,42,51,0.06), 0 0 0 1px rgba(255,255,255,0.5) inset;
}
[data-theme="light"] .fc-navbar-progress {
background: rgba(14,42,51,0.06);
}
/* ════════════════════════════════════════════════
RESPONSIVE
════════════════════════════════════════════════ */
@media (max-width: 1199px) {
.fc-navbar-pill { display: none; }
.fc-navbar .container-fluid { padding: 0 20px; }
}
@media (max-width: 575px) {
.fc-navbar .container-fluid { padding: 0 16px; }
.fc-navbar-cta { padding: 8px 10px 8px 16px; font-size: 13px; gap: 8px; }
.fc-navbar-cta-arrow { width: 26px; height: 26px; font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
.fc-navbar-nav::before,
.fc-navbar.sticky,
.fc-navbar-cta::after,
.fc-navbar-logo-shine {
animation: none !important;
transition: none !important;
}
.fc-navbar-indicator { transition: none !important; }
}
/* ═══════════════════════════════════════════════════════════════
FC HERO SECTION - Premium (Dark/Light Theme Compatible)
═══════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════
FC HERO — Premium marketing-agency design
Dark / Light theme compatible · 2026 redesign
═══════════════════════════════════════════════════════════════ */
.fc-hero {
position: relative;
overflow: hidden;
isolation: isolate;
padding: 160px 0 110px;
background: var(--fc-bg, #08080f);
color: #ffffff;
transition: background 0.4s ease, color 0.4s ease;
}
/* ───── Ambient background layers ───── */
.fc-hero-mesh {
position: absolute;
inset: -10%;
z-index: 0;
background:
radial-gradient(60% 50% at 18% 22%, rgba(61,191,169,0.28) 0%, transparent 60%),
radial-gradient(50% 50% at 82% 20%, rgba(26,123,175,0.30) 0%, transparent 60%),
radial-gradient(60% 60% at 70% 85%, rgba(61,191,169,0.18) 0%, transparent 65%),
radial-gradient(45% 45% at 25% 80%, rgba(26,123,175,0.18) 0%, transparent 65%);
filter: blur(40px);
animation: fcHeroMeshDrift 22s ease-in-out infinite alternate;
pointer-events: none;
}
@keyframes fcHeroMeshDrift {
0% { transform: translate3d(0,0,0) scale(1); }
50% { transform: translate3d(2%, -1%, 0) scale(1.05); }
100% { transform: translate3d(-1%, 2%, 0) scale(0.97); }
}
.fc-hero-grid {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
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 at center, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0) 78%);
-webkit-mask-image: radial-gradient(ellipse at center, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0) 78%);
}
.fc-hero-noise {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
opacity: 0.045;
mix-blend-mode: overlay;
background-image: url("data:image/svg+xml;utf8,");
}
/* Floating orbs */
.fc-hero-orb {
position: absolute;
border-radius: 50%;
filter: blur(80px);
z-index: 0;
pointer-events: none;
will-change: transform;
}
.fc-hero-orb-1 {
top: -120px; left: -100px;
width: 480px; height: 480px;
background: radial-gradient(circle, rgba(61,191,169,0.45), transparent 70%);
animation: fcHeroOrbA 18s ease-in-out infinite alternate;
}
.fc-hero-orb-2 {
top: 30%; right: -160px;
width: 560px; height: 560px;
background: radial-gradient(circle, rgba(26,123,175,0.42), transparent 70%);
animation: fcHeroOrbB 22s ease-in-out infinite alternate;
}
.fc-hero-orb-3 {
bottom: -160px; left: 35%;
width: 460px; height: 460px;
background: radial-gradient(circle, rgba(61,191,169,0.30), transparent 70%);
animation: fcHeroOrbA 26s ease-in-out infinite alternate-reverse;
}
@keyframes fcHeroOrbA {
0% { transform: translate3d(0,0,0) scale(1); }
100% { transform: translate3d(40px,-30px,0) scale(1.08); }
}
@keyframes fcHeroOrbB {
0% { transform: translate3d(0,0,0) scale(1); }
100% { transform: translate3d(-50px,40px,0) scale(0.94); }
}
/* Cursor spotlight */
.fc-hero-spotlight {
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
opacity: 0;
transition: opacity 0.5s ease;
background: radial-gradient(420px circle at var(--sx, 50%) var(--sy, 50%),
rgba(255,255,255,0.06), transparent 60%);
}
/* ───── Layout ───── */
.fc-hero .container { position: relative; z-index: 2; }
.fc-hero-layout {
display: grid;
grid-template-columns: 1.05fr 1fr;
gap: 64px;
align-items: center;
min-height: 70vh;
}
/* ───── LEFT: Content ───── */
.fc-hero-content { position: relative; }
.fc-hero-badge {
display: inline-flex;
align-items: center;
gap: 12px;
padding: 10px 18px 10px 14px;
border-radius: 999px;
background: linear-gradient(135deg, rgba(61,191,169,0.10), rgba(26,123,175,0.10));
border: 1px solid rgba(61,191,169,0.30);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
font-size: 13px;
font-weight: 600;
letter-spacing: 0.04em;
color: rgba(255,255,255,0.92);
margin-bottom: 28px;
opacity: 0;
transform: translateY(14px);
transition: opacity .8s ease, transform .8s ease;
box-shadow: 0 8px 24px rgba(0,0,0,0.18);
position: relative;
overflow: hidden;
}
.fc-hero-badge::before {
content: "";
position: absolute; inset: 0;
background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.16) 50%, transparent 70%);
transform: translateX(-100%);
animation: fcHeroBadgeSheen 4.5s ease-in-out infinite;
}
@keyframes fcHeroBadgeSheen {
0% { transform: translateX(-100%); }
55% { transform: translateX(100%); }
100% { transform: translateX(100%); }
}
.fc-hero.is-revealed .fc-hero-badge { opacity: 1; transform: translateY(0); }
.fc-hero-badge-text { position: relative; z-index: 1; }
.fc-hero-badge-dot {
position: relative;
width: 8px; height: 8px;
border-radius: 50%;
background: var(--fc-accent, #3DBFA9);
box-shadow: 0 0 0 4px rgba(61,191,169,0.20);
}
.fc-hero-badge-dot::after {
content: "";
position: absolute; inset: -6px;
border-radius: 50%;
border: 1px solid rgba(61,191,169,0.55);
animation: fcHeroDotPing 2.2s ease-out infinite;
}
@keyframes fcHeroDotPing {
0% { transform: scale(.6); opacity: 1; }
100% { transform: scale(1.6); opacity: 0; }
}
/* Headline */
.fc-hero-headline {
font-family: inherit;
font-size: clamp(40px, 5.4vw, 78px);
font-weight: 800;
line-height: 1.04;
letter-spacing: -0.02em;
color: #ffffff;
margin: 0 0 28px;
}
.fc-hero-line { display: block; }
.fc-hero-word {
display: inline-block;
opacity: 0;
transform: translateY(28px);
filter: blur(8px);
transition: opacity .9s ease, transform .9s cubic-bezier(.2,.7,.2,1), filter .9s ease;
margin-right: .25em;
}
.fc-hero.is-revealed .fc-hero-word {
opacity: 1;
transform: translateY(0);
filter: blur(0);
}
/* Rotating word */
.fc-hero-rotator-wrap {
position: relative;
display: inline-block;
vertical-align: baseline;
padding: 0 .12em;
color: transparent;
background: linear-gradient(120deg, #3DBFA9 0%, #1A7BAF 60%, #3DBFA9 100%);
background-size: 200% 100%;
-webkit-background-clip: text;
background-clip: text;
animation: fcHeroGradientShift 6s linear infinite;
}
@keyframes fcHeroGradientShift {
0% { background-position: 0% 50%; }
100% { background-position: 200% 50%; }
}
.fc-hero-rotator {
position: relative;
display: inline-block;
vertical-align: baseline;
line-height: 1;
}
.fc-hero-rotator-sizer {
display: inline-block;
white-space: nowrap;
visibility: hidden;
pointer-events: none;
}
.fc-hero-rotator-word {
position: absolute;
left: 0;
top: 0;
white-space: nowrap;
opacity: 0;
transform: translateY(70%) rotateX(-90deg);
transform-origin: 0 100%;
transition: opacity .55s ease, transform .65s cubic-bezier(.2,.7,.2,1);
}
.fc-hero-rotator-word.is-active {
opacity: 1;
transform: translateY(0) rotateX(0);
}
.fc-hero-underline {
position: absolute;
left: 0; bottom: -10px;
width: 100%;
height: 14px;
overflow: visible;
}
.fc-hero-underline path {
stroke-dasharray: 240;
stroke-dashoffset: 240;
animation: fcHeroUnderDraw 1.2s 1.4s ease forwards;
}
@keyframes fcHeroUnderDraw {
to { stroke-dashoffset: 0; }
}
/* Lead */
.fc-hero-lead {
font-size: 18px;
line-height: 1.65;
color: rgba(255,255,255,0.72);
max-width: 540px;
margin: 0 0 36px;
opacity: 0;
transform: translateY(14px);
transition: opacity .9s ease .6s, transform .9s ease .6s;
}
.fc-hero.is-revealed .fc-hero-lead { opacity: 1; transform: translateY(0); }
/* CTAs */
.fc-hero-actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 16px;
margin-bottom: 48px;
opacity: 0;
transform: translateY(14px);
transition: opacity .9s ease .75s, transform .9s ease .75s;
}
.fc-hero.is-revealed .fc-hero-actions { opacity: 1; transform: translateY(0); }
.fc-hero-cta {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 16px 24px;
border-radius: 999px;
font-size: 15px;
font-weight: 600;
letter-spacing: 0.02em;
text-decoration: none;
transition: transform .25s ease, box-shadow .35s ease, background .35s ease, color .35s ease, border-color .35s ease;
will-change: transform;
position: relative;
overflow: hidden;
}
.fc-hero-cta-primary {
background: linear-gradient(135deg, #3DBFA9, #1A7BAF);
color: #ffffff;
box-shadow: 0 14px 30px -10px rgba(61,191,169,0.55), 0 0 0 1px rgba(255,255,255,0.04) inset;
}
.fc-hero-cta-primary::before {
content: "";
position: absolute; inset: 0;
background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.25) 50%, transparent 70%);
transform: translateX(-100%);
transition: transform .8s ease;
}
.fc-hero-cta-primary:hover {
box-shadow: 0 22px 44px -12px rgba(61,191,169,0.65), 0 0 0 1px rgba(255,255,255,0.06) inset;
}
.fc-hero-cta-primary:hover::before { transform: translateX(100%); }
.fc-hero-cta-arrow,
.fc-hero-cta-play {
display: inline-flex;
align-items: center; justify-content: center;
width: 28px; height: 28px;
border-radius: 50%;
background: rgba(255,255,255,0.18);
font-size: 11px;
transition: transform .35s cubic-bezier(.2,.7,.2,1), background .35s ease;
position: relative;
z-index: 1;
}
.fc-hero-cta-primary:hover .fc-hero-cta-arrow {
transform: translateX(4px) rotate(-8deg);
background: rgba(255,255,255,0.28);
}
.fc-hero-cta-ghost {
color: #ffffff;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.14);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.fc-hero-cta-ghost .fc-hero-cta-play {
background: linear-gradient(135deg, rgba(61,191,169,0.25), rgba(26,123,175,0.25));
color: var(--fc-accent, #3DBFA9);
}
.fc-hero-cta-ghost:hover {
background: rgba(255,255,255,0.08);
border-color: rgba(61,191,169,0.45);
color: #ffffff;
}
.fc-hero-cta-ghost:hover .fc-hero-cta-play { transform: scale(1.1); }
.fc-hero-cta-label { position: relative; z-index: 1; }
/* Stats */
.fc-hero-stats {
display: inline-flex;
align-items: center;
flex-wrap: wrap;
gap: 24px;
padding: 18px 26px;
border-radius: 18px;
background: linear-gradient(140deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
border: 1px solid rgba(255,255,255,0.08);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
opacity: 0;
transform: translateY(14px);
transition: opacity .9s ease .9s, transform .9s ease .9s;
}
.fc-hero.is-revealed .fc-hero-stats { opacity: 1; transform: translateY(0); }
.fc-hero-stat { display: flex; flex-direction: column; gap: 2px; }
.fc-hero-stat-num {
font-size: 22px;
font-weight: 800;
background: linear-gradient(120deg, #ffffff, #c9eee5);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
letter-spacing: -0.01em;
}
.fc-hero-stat-lbl {
font-size: 12px;
letter-spacing: 0.04em;
color: rgba(255,255,255,0.55);
}
.fc-hero-stat-sep {
width: 1px; height: 32px;
background: linear-gradient(180deg, transparent, rgba(255,255,255,0.18), transparent);
}
/* ───── RIGHT: Visual stage ───── */
.fc-hero-visual {
position: relative;
perspective: 1400px;
min-height: 540px;
}
.fc-hero-stage {
position: relative;
width: 100%; height: 100%;
min-height: 540px;
transform-style: preserve-3d;
transition: transform .25s ease;
opacity: 0;
animation: fcHeroStageIn 1s .4s cubic-bezier(.2,.7,.2,1) forwards;
}
@keyframes fcHeroStageIn {
from { opacity: 0; transform: translateY(30px) scale(.96); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
/* Decorative orbits */
.fc-hero-orbit {
position: absolute;
border-radius: 50%;
border: 1px dashed rgba(61,191,169,0.28);
pointer-events: none;
}
.fc-hero-orbit-1 {
top: 50%; left: 50%;
width: 540px; height: 540px;
transform: translate(-50%, -50%);
animation: fcHeroOrbitSpin 50s linear infinite;
}
.fc-hero-orbit-2 {
top: 50%; left: 50%;
width: 380px; height: 380px;
transform: translate(-50%, -50%);
border-color: rgba(26,123,175,0.30);
animation: fcHeroOrbitSpin 36s linear infinite reverse;
}
@keyframes fcHeroOrbitSpin {
from { transform: translate(-50%,-50%) rotate(0deg); }
to { transform: translate(-50%,-50%) rotate(360deg); }
}
/* Main card */
.fc-hero-card-main {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
width: 86%;
max-width: 420px;
padding: 24px 26px 22px;
border-radius: 22px;
background: linear-gradient(160deg, rgba(20,28,42,0.92) 0%, rgba(13,18,28,0.92) 100%);
border: 1px solid rgba(255,255,255,0.10);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
box-shadow:
0 30px 60px -20px rgba(0,0,0,0.65),
0 0 0 1px rgba(61,191,169,0.10) inset;
z-index: 2;
animation: fcHeroFloat 6s ease-in-out infinite;
}
@keyframes fcHeroFloat {
0%, 100% { transform: translate(-50%, -50%) translateY(0); }
50% { transform: translate(-50%, -50%) translateY(-10px); }
}
.fc-hero-card-image {
padding: 0;
overflow: hidden;
aspect-ratio: 4 / 3;
}
.fc-hero-card-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
border-radius: inherit;
}
.fc-hero-card-top {
display: flex; align-items: center; justify-content: space-between;
margin-bottom: 14px;
}
.fc-hero-card-tag {
display: inline-flex; align-items: center; gap: 8px;
padding: 6px 12px;
border-radius: 999px;
font-size: 10px; font-weight: 700; letter-spacing: 0.18em;
color: var(--fc-accent, #3DBFA9);
background: rgba(61,191,169,0.12);
border: 1px solid rgba(61,191,169,0.30);
}
.fc-hero-card-pulse {
width: 7px; height: 7px;
border-radius: 50%;
background: var(--fc-accent, #3DBFA9);
box-shadow: 0 0 0 0 rgba(61,191,169,0.6);
animation: fcHeroCardPulse 1.6s ease-out infinite;
}
@keyframes fcHeroCardPulse {
0% { box-shadow: 0 0 0 0 rgba(61,191,169,0.6); }
100% { box-shadow: 0 0 0 12px rgba(61,191,169,0); }
}
.fc-hero-card-time {
font-size: 11px; color: rgba(255,255,255,0.5); letter-spacing: 0.06em;
}
.fc-hero-card-title {
font-size: 22px; font-weight: 700; color: #fff; margin-bottom: 4px;
}
.fc-hero-card-meta {
font-size: 12px; color: rgba(255,255,255,0.5); margin-bottom: 14px;
}
.fc-hero-card-meter {
width: 100%; height: 6px;
border-radius: 999px;
background: rgba(255,255,255,0.08);
overflow: hidden;
margin-bottom: 18px;
}
.fc-hero-card-meter-bar {
height: 100%;
width: 0;
border-radius: 999px;
background: linear-gradient(90deg, #3DBFA9, #1A7BAF);
box-shadow: 0 0 12px rgba(61,191,169,0.55);
animation: fcHeroMeterFill 2.4s 0.9s cubic-bezier(.2,.7,.2,1) forwards;
}
@keyframes fcHeroMeterFill {
to { width: 82%; }
}
.fc-hero-card-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
margin-bottom: 14px;
}
.fc-hero-card-cell { display: flex; flex-direction: column; gap: 2px; }
.fc-hero-card-num {
font-size: 18px; font-weight: 800; color: #fff;
background: linear-gradient(120deg, #fff, #c9eee5);
-webkit-background-clip: text; background-clip: text;
color: transparent;
letter-spacing: -0.01em;
}
.fc-hero-card-lbl {
font-size: 10px; letter-spacing: 0.08em; color: rgba(255,255,255,0.55);
}
.fc-hero-card-chart {
width: 100%; height: 50px;
}
.fc-hero-card-chart-line {
stroke-dasharray: 420;
stroke-dashoffset: 420;
animation: fcHeroChartDraw 2.4s 1.1s ease forwards;
}
@keyframes fcHeroChartDraw {
to { stroke-dashoffset: 0; }
}
.fc-hero-card-chart-fill {
opacity: 0;
animation: fcHeroChartFade 1.6s 2.0s ease forwards;
}
@keyframes fcHeroChartFade {
to { opacity: 1; }
}
/* Floating mini cards */
.fc-hero-mini {
position: absolute;
display: flex; align-items: center; gap: 12px;
padding: 12px 16px;
border-radius: 14px;
background: rgba(20,28,42,0.92);
border: 1px solid rgba(255,255,255,0.10);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
box-shadow: 0 18px 36px -14px rgba(0,0,0,0.6);
z-index: 3;
}
.fc-hero-mini-1 {
top: 8%; left: -4%;
animation: fcHeroFloatA 5.5s ease-in-out infinite;
}
.fc-hero-mini-2 {
bottom: 14%; right: -5%;
animation: fcHeroFloatB 6.2s ease-in-out infinite;
}
@keyframes fcHeroFloatA {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-12px); }
}
@keyframes fcHeroFloatB {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(10px); }
}
.fc-hero-mini-ic {
width: 36px; height: 36px;
border-radius: 10px;
display: inline-flex; align-items: center; justify-content: center;
background: linear-gradient(135deg, rgba(61,191,169,0.22), rgba(26,123,175,0.22));
color: var(--fc-accent, #3DBFA9);
font-size: 14px;
border: 1px solid rgba(61,191,169,0.30);
}
.fc-hero-mini-ic-2 { color: #FFC93C; border-color: rgba(255,201,60,0.35); background: linear-gradient(135deg, rgba(255,201,60,0.18), rgba(26,123,175,0.18)); }
.fc-hero-mini-data { display: flex; flex-direction: column; gap: 1px; }
.fc-hero-mini-num { font-size: 14px; font-weight: 700; color: #fff; }
.fc-hero-mini-lbl { font-size: 11px; color: rgba(255,255,255,0.55); }
/* Audience cluster */
.fc-hero-cluster {
position: absolute;
bottom: 6%; left: 4%;
padding: 12px 16px;
border-radius: 14px;
background: rgba(20,28,42,0.92);
border: 1px solid rgba(255,255,255,0.10);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
box-shadow: 0 18px 36px -14px rgba(0,0,0,0.6);
z-index: 3;
animation: fcHeroFloatA 7s ease-in-out infinite;
}
.fc-hero-cluster-lbl {
display: block;
font-size: 11px; letter-spacing: 0.06em;
color: rgba(255,255,255,0.55); margin-bottom: 8px;
}
.fc-hero-cluster-row {
display: flex; align-items: center; gap: 12px;
}
.fc-hero-cluster-avatars { display: inline-flex; align-items: center; }
.fc-hero-cluster-avatars img {
width: 28px; height: 28px; border-radius: 50%;
border: 2px solid rgba(20,28,42,1);
margin-left: -8px;
object-fit: cover;
}
.fc-hero-cluster-avatars img:first-child { margin-left: 0; }
.fc-hero-cluster-avatar {
display: inline-flex; align-items: center; justify-content: center;
width: 28px; height: 28px; border-radius: 50%;
border: 2px solid rgba(20,28,42,1);
margin-left: -8px;
color: #fff; font-size: 10px; font-weight: 700;
letter-spacing: 0.02em;
text-transform: uppercase;
box-shadow: 0 2px 6px rgba(0,0,0,0.25);
}
.fc-hero-cluster-avatar:first-child { margin-left: 0; }
.fc-hero-cluster-avatar--1 { background: linear-gradient(135deg, #3DBFA9, #1A7BAF); }
.fc-hero-cluster-avatar--2 { background: linear-gradient(135deg, #F46036, #F7A44A); }
.fc-hero-cluster-avatar--3 { background: linear-gradient(135deg, #8E44AD, #3498DB); }
[data-theme="light"] .fc-hero-cluster-avatar { border-color: #ffffff; }
.fc-hero-cluster-more {
display: inline-flex; align-items: center; justify-content: center;
height: 28px; padding: 0 8px; margin-left: -8px;
border-radius: 999px;
background: linear-gradient(135deg, #3DBFA9, #1A7BAF);
color: #fff; font-size: 10px; font-weight: 700;
border: 2px solid rgba(20,28,42,1);
}
.fc-hero-cluster-stars {
display: inline-flex; gap: 2px;
color: #FFC93C; font-size: 11px;
}
/* Scroll indicator */
.fc-hero-scroll {
position: absolute;
bottom: 30px; left: 50%;
transform: translateX(-50%);
display: flex; flex-direction: column; align-items: center; gap: 8px;
z-index: 4;
opacity: 0;
animation: fcHeroFadeIn 1s 1.5s ease forwards;
}
@keyframes fcHeroFadeIn { to { opacity: 1; } }
.fc-hero-scroll-track {
position: relative;
width: 2px; height: 42px;
background: rgba(255,255,255,0.14);
border-radius: 2px; overflow: hidden;
}
.fc-hero-scroll-thumb {
position: absolute;
top: 0; left: 0;
width: 100%; height: 40%;
background: linear-gradient(180deg, #3DBFA9, #1A7BAF);
border-radius: 2px;
animation: fcHeroScrollThumb 2s ease-in-out infinite;
}
@keyframes fcHeroScrollThumb {
0% { transform: translateY(-100%); }
100% { transform: translateY(250%); }
}
.fc-hero-scroll-text {
font-size: 10px; letter-spacing: 0.2em;
color: rgba(255,255,255,0.55);
text-transform: uppercase;
}
/* ════════════════════════════════════════════════
LIGHT THEME
════════════════════════════════════════════════ */
[data-theme="light"] .fc-hero {
background: linear-gradient(180deg, #ffffff 0%, #F2F8FC 100%);
color: #0E2A33;
}
[data-theme="light"] .fc-hero-mesh {
background:
radial-gradient(60% 50% at 18% 22%, rgba(61,191,169,0.22) 0%, transparent 60%),
radial-gradient(50% 50% at 82% 20%, rgba(26,123,175,0.22) 0%, transparent 60%),
radial-gradient(60% 60% at 70% 85%, rgba(61,191,169,0.14) 0%, transparent 65%),
radial-gradient(45% 45% at 25% 80%, rgba(26,123,175,0.14) 0%, transparent 65%);
}
[data-theme="light"] .fc-hero-grid {
background-image:
linear-gradient(rgba(14,42,51,0.06) 1px, transparent 1px),
linear-gradient(90deg, rgba(14,42,51,0.06) 1px, transparent 1px);
}
[data-theme="light"] .fc-hero-noise { opacity: 0.025; mix-blend-mode: multiply; }
[data-theme="light"] .fc-hero-orb-1 { background: radial-gradient(circle, rgba(61,191,169,0.32), transparent 70%); }
[data-theme="light"] .fc-hero-orb-2 { background: radial-gradient(circle, rgba(26,123,175,0.30), transparent 70%); }
[data-theme="light"] .fc-hero-orb-3 { background: radial-gradient(circle, rgba(61,191,169,0.22), transparent 70%); }
[data-theme="light"] .fc-hero-spotlight {
background: radial-gradient(420px circle at var(--sx, 50%) var(--sy, 50%),
rgba(26,123,175,0.10), transparent 60%);
}
[data-theme="light"] .fc-hero-badge {
background: linear-gradient(135deg, rgba(61,191,169,0.10), rgba(26,123,175,0.10));
border-color: rgba(61,191,169,0.40);
color: #0E2A33;
box-shadow: 0 8px 22px rgba(26,123,175,0.10);
}
[data-theme="light"] .fc-hero-badge::before {
background: linear-gradient(120deg, transparent 30%, rgba(61,191,169,0.20) 50%, transparent 70%);
}
[data-theme="light"] .fc-hero-headline { color: #0E2A33; }
[data-theme="light"] .fc-hero-lead { color: rgba(14,42,51,0.72); }
[data-theme="light"] .fc-hero-cta-ghost {
color: #0E2A33;
background: #ffffff;
border-color: rgba(14,42,51,0.10);
box-shadow: 0 8px 22px rgba(14,42,51,0.05);
}
[data-theme="light"] .fc-hero-cta-ghost:hover {
background: #ffffff;
border-color: rgba(61,191,169,0.45);
box-shadow: 0 14px 30px rgba(26,123,175,0.10);
}
[data-theme="light"] .fc-hero-stats {
background: #ffffff;
border-color: rgba(14,42,51,0.08);
box-shadow: 0 10px 26px rgba(14,42,51,0.05);
}
[data-theme="light"] .fc-hero-stat-num {
background: linear-gradient(120deg, #0E2A33, #1A7BAF);
-webkit-background-clip: text; background-clip: text;
color: transparent;
}
[data-theme="light"] .fc-hero-stat-lbl { color: rgba(14,42,51,0.6); }
[data-theme="light"] .fc-hero-stat-sep {
background: linear-gradient(180deg, transparent, rgba(14,42,51,0.18), transparent);
}
[data-theme="light"] .fc-hero-orbit-1 { border-color: rgba(26,123,175,0.32); }
[data-theme="light"] .fc-hero-orbit-2 { border-color: rgba(61,191,169,0.32); }
[data-theme="light"] .fc-hero-card-main,
[data-theme="light"] .fc-hero-mini,
[data-theme="light"] .fc-hero-cluster {
background: #ffffff;
border-color: rgba(14,42,51,0.08);
box-shadow: 0 24px 60px -18px rgba(26,123,175,0.20);
}
[data-theme="light"] .fc-hero-card-title { color: #0E2A33; }
[data-theme="light"] .fc-hero-card-meta,
[data-theme="light"] .fc-hero-card-lbl,
[data-theme="light"] .fc-hero-mini-lbl,
[data-theme="light"] .fc-hero-cluster-lbl,
[data-theme="light"] .fc-hero-card-time { color: rgba(14,42,51,0.6); }
[data-theme="light"] .fc-hero-card-num,
[data-theme="light"] .fc-hero-mini-num {
color: #0E2A33;
background: linear-gradient(120deg, #0E2A33, #1A7BAF);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent;
}
[data-theme="light"] .fc-hero-card-meter { background: rgba(14,42,51,0.08); }
[data-theme="light"] .fc-hero-cluster-avatars img,
[data-theme="light"] .fc-hero-cluster-more {
border-color: #ffffff;
}
[data-theme="light"] .fc-hero-scroll-text { color: rgba(14,42,51,0.6); }
[data-theme="light"] .fc-hero-scroll-track { background: rgba(14,42,51,0.14); }
/* ════════════════════════════════════════════════
RESPONSIVE
════════════════════════════════════════════════ */
@media (max-width: 1199px) {
.fc-hero-layout { gap: 40px; }
.fc-hero-mini-1 { left: -2%; }
.fc-hero-mini-2 { right: -2%; }
}
@media (max-width: 991px) {
.fc-hero { padding: 130px 0 90px; }
.fc-hero-layout { grid-template-columns: 1fr; gap: 60px; min-height: auto; }
.fc-hero-visual { min-height: 480px; }
.fc-hero-stage { min-height: 480px; }
.fc-hero-card-main { max-width: 360px; }
.fc-hero-scroll { display: none; }
}
@media (max-width: 640px) {
.fc-hero { padding: 110px 0 70px; }
.fc-hero-headline { font-size: clamp(34px, 8vw, 48px); }
.fc-hero-lead { font-size: 16px; }
.fc-hero-actions { flex-direction: column; align-items: stretch; }
.fc-hero-cta { justify-content: center; }
.fc-hero-stats { gap: 14px; padding: 14px 18px; }
.fc-hero-stat-sep { display: none; }
.fc-hero-visual { min-height: 420px; }
.fc-hero-stage { min-height: 420px; }
.fc-hero-card-main { width: 92%; padding: 20px 20px 18px; }
.fc-hero-card-title { font-size: 18px; }
.fc-hero-card-num { font-size: 16px; }
.fc-hero-mini-1 { top: 4%; left: 0; }
.fc-hero-mini-2 { bottom: 8%; right: 0; }
.fc-hero-cluster { left: 0; bottom: 0; }
.fc-hero-orbit-1, .fc-hero-orbit-2 { display: none; }
}
@media (prefers-reduced-motion: reduce) {
.fc-hero-mesh,
.fc-hero-orb,
.fc-hero-card-main,
.fc-hero-mini,
.fc-hero-cluster,
.fc-hero-orbit-1, .fc-hero-orbit-2,
.fc-hero-card-pulse,
.fc-hero-badge::before,
.fc-hero-cta-primary::before,
.fc-hero-rotator-wrap,
.fc-hero-scroll-thumb,
.fc-hero-badge-dot::after {
animation: none !important;
}
.fc-hero-stage { animation: none !important; opacity: 1; transform: none; }
.fc-hero-word { opacity: 1 !important; transform: none !important; filter: none !important; }
.fc-hero-lead, .fc-hero-actions, .fc-hero-stats, .fc-hero-badge { opacity: 1 !important; transform: none !important; }
}
/* =====================================================================
CONTACT CONVO SECTION - "Let's start a conversation"
===================================================================== */
.contact-convo-section {
position: relative;
padding: 160px 0 100px;
background: var(--fc-bg);
overflow: hidden;
transition: background 0.4s ease;
}
/* Ambient orbs */
.contact-convo-orb {
position: absolute;
border-radius: 50%;
filter: blur(100px);
pointer-events: none;
}
.contact-convo-orb-1 {
width: 420px; height: 420px;
background: rgba(61,191,169,0.07);
top: -80px; right: 5%;
}
.contact-convo-orb-2 {
width: 320px; height: 320px;
background: rgba(155,108,247,0.05);
bottom: -60px; left: 8%;
}
/* Decorative rings */
.contact-convo-ring {
position: absolute;
border-radius: 50%;
border: 1px solid var(--fc-border, rgba(255,255,255,0.06));
pointer-events: none;
}
.contact-convo-ring-1 {
width: 260px; height: 260px;
top: 10%; left: -60px;
opacity: 0.4;
}
.contact-convo-ring-2 {
width: 180px; height: 180px;
bottom: 15%; right: -40px;
opacity: 0.3;
}
/* Decorative dot */
.contact-convo-dot {
position: absolute;
width: 6px; height: 6px;
border-radius: 50%;
background: var(--fc-accent, #3DBFA9);
pointer-events: none;
}
.contact-convo-dot-1 {
top: 22%; right: 12%;
opacity: 0.5;
animation: contactDotPulse 3s ease-in-out infinite;
}
@keyframes contactDotPulse {
0%, 100% { opacity: 0.3; transform: scale(1); }
50% { opacity: 0.7; transform: scale(1.5); }
}
/* Head */
.contact-convo-head {
max-width: 620px;
margin: 0 auto 64px;
position: relative;
z-index: 2;
}
.contact-convo-badge {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 11px;
font-weight: 700;
letter-spacing: 2.5px;
text-transform: uppercase;
color: var(--fc-accent, #3DBFA9);
margin-bottom: 20px;
}
.contact-convo-badge-dot {
width: 8px; height: 8px;
border-radius: 50%;
background: var(--fc-accent, #3DBFA9);
box-shadow: 0 0 8px rgba(61,191,169,0.4);
}
.contact-convo-title {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 48px;
font-weight: 800;
color: var(--fc-heading);
line-height: 1.15;
margin: 0 0 18px;
transition: color 0.4s ease;
}
.contact-convo-gradient {
background: linear-gradient(135deg, var(--fc-accent, #3DBFA9), rgba(26,123,175,0.8));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.contact-convo-sub {
font-size: 16px;
line-height: 1.7;
color: var(--fc-text-muted);
margin: 0;
transition: color 0.4s ease;
}
/* Grid: left info + right form */
.contact-convo-grid {
display: flex;
gap: 48px;
position: relative;
z-index: 2;
}
/* Left: Contact Information */
.contact-convo-info {
flex: 0 0 42%;
max-width: 42%;
}
.contact-info-heading {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 22px;
font-weight: 700;
color: var(--fc-heading);
margin: 0 0 32px;
transition: color 0.4s ease;
}
/* Info items */
.contact-info-item {
display: flex;
gap: 16px;
margin-bottom: 28px;
padding: 20px;
border-radius: 16px;
background: var(--fc-card, rgba(255,255,255,0.03));
border: 1px solid var(--fc-card-border, rgba(255,255,255,0.06));
transition: all 0.35s ease;
}
.contact-info-item:hover {
border-color: rgba(61,191,169,0.2);
transform: translateX(4px);
box-shadow: 0 6px 24px rgba(0,0,0,0.08);
}
/* Icon variants */
.contact-info-icon {
width: 48px; height: 48px;
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
font-size: 18px;
transition: transform 0.3s ease;
}
.contact-info-item:hover .contact-info-icon { transform: scale(1.1); }
.contact-info-icon-teal {
background: rgba(61,191,169,0.1);
color: #3DBFA9;
}
.contact-info-icon-purple {
background: rgba(155,108,247,0.1);
color: #9B6CF7;
}
.contact-info-icon-blue {
background: rgba(26,123,175,0.1);
color: #1A7BAF;
}
.contact-info-icon-orange {
background: rgba(245,166,35,0.1);
color: #F5A623;
}
/* Info text */
.contact-info-text h4 {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 16px;
font-weight: 700;
color: var(--fc-heading);
margin: 0 0 4px;
transition: color 0.4s ease;
}
.contact-info-sub {
font-size: 13px;
color: var(--fc-text-muted);
margin: 0 0 6px;
transition: color 0.4s ease;
}
.contact-info-text a {
font-size: 14px;
font-weight: 600;
color: var(--fc-accent, #3DBFA9);
text-decoration: none;
transition: color 0.3s ease;
}
.contact-info-text a:hover { color: #34a895; }
.contact-info-text address {
font-style: normal;
font-size: 14px;
color: var(--fc-text);
line-height: 1.6;
margin: 0;
transition: color 0.4s ease;
}
.contact-info-plain {
font-size: 14px;
color: var(--fc-text);
line-height: 1.6;
transition: color 0.4s ease;
}
/* Social */
.contact-info-social {
margin-top: 12px;
display: flex;
align-items: center;
gap: 16px;
}
.contact-info-social-label {
font-size: 13px;
font-weight: 600;
color: var(--fc-text-muted);
text-transform: uppercase;
letter-spacing: 1px;
}
.contact-info-social-icons {
display: flex;
gap: 10px;
}
.contact-info-social-icons a {
width: 36px; height: 36px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background: var(--fc-card, rgba(255,255,255,0.04));
border: 1px solid var(--fc-card-border, rgba(255,255,255,0.06));
color: var(--fc-text-muted);
font-size: 14px;
transition: all 0.3s ease;
text-decoration: none;
}
.contact-info-social-icons a:hover {
background: rgba(61,191,169,0.12);
border-color: rgba(61,191,169,0.3);
color: var(--fc-accent, #3DBFA9);
transform: translateY(-2px);
}
/* Right: Form Card */
.contact-convo-form-card {
flex: 1;
min-width: 0;
padding: 40px;
border-radius: 24px;
background: var(--fc-card, rgba(255,255,255,0.03));
border: 1px solid var(--fc-card-border, rgba(255,255,255,0.06));
position: relative;
transition: all 0.4s ease;
}
.contact-convo-form-card::before {
content: "";
position: absolute; inset: -1px;
border-radius: 25px;
padding: 1px;
background: linear-gradient(135deg, rgba(61,191,169,0.2), rgba(26,123,175,0.15), rgba(155,108,247,0.1));
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
opacity: 0;
transition: opacity 0.4s ease;
}
.contact-convo-form-card:hover::before { opacity: 1; }
/* Form elements */
.contact-form-row {
display: flex;
gap: 20px;
}
.contact-form-group {
margin-bottom: 22px;
flex: 1;
}
.contact-form-group label {
display: block;
font-size: 13px;
font-weight: 600;
color: var(--fc-heading);
margin-bottom: 8px;
letter-spacing: 0.3px;
transition: color 0.4s ease;
}
.contact-form-group input,
.contact-form-group textarea {
width: 100%;
padding: 14px 18px;
border-radius: 12px;
border: 1px solid var(--fc-card-border, rgba(255,255,255,0.08));
background: var(--fc-input-bg, rgba(255,255,255,0.03));
color: var(--fc-heading);
font-size: 14px;
font-family: inherit;
transition: all 0.3s ease;
outline: none;
}
.contact-form-group input::placeholder,
.contact-form-group textarea::placeholder {
color: var(--fc-text-muted);
opacity: 0.6;
}
.contact-form-group input:focus,
.contact-form-group textarea:focus {
border-color: var(--fc-accent, #3DBFA9);
box-shadow: 0 0 0 3px rgba(61,191,169,0.1);
}
.contact-form-group textarea {
resize: vertical;
min-height: 120px;
}
/* Submit button */
.contact-convo-submit {
width: 100%;
padding: 16px;
border-radius: 14px;
border: none;
background: var(--fc-accent, #3DBFA9);
color: #ffffff;
font-size: 15px;
font-weight: 700;
font-family: inherit;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
transition: all 0.35s ease;
position: relative;
overflow: hidden;
}
.contact-convo-submit:hover {
background: #34a895;
transform: translateY(-2px);
box-shadow: 0 8px 28px rgba(61,191,169,0.3);
}
.contact-convo-submit i {
font-size: 14px;
transition: transform 0.3s ease;
}
.contact-convo-submit:hover i {
transform: translate(3px, -3px);
}
/* Success */
.contact-convo-success {
text-align: center;
padding: 40px 0;
}
.contact-convo-success-icon {
font-size: 48px;
color: var(--fc-accent, #3DBFA9);
margin-bottom: 16px;
}
.contact-convo-success h4 {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 22px;
font-weight: 700;
color: var(--fc-heading);
margin: 0 0 8px;
}
.contact-convo-success p {
font-size: 15px;
color: var(--fc-text-muted);
margin: 0;
}
/* ── Responsive ── */
@media (max-width: 991px) {
.contact-convo-section { padding: 130px 0 80px; }
.contact-convo-grid { flex-direction: column; gap: 40px; }
.contact-convo-info { flex: 0 0 100%; max-width: 100%; }
.contact-convo-title { font-size: 38px; }
}
@media (max-width: 767px) {
.contact-convo-section { padding: 110px 0 60px; }
.contact-convo-title { font-size: 30px; }
.contact-convo-title br { display: none; }
.contact-convo-form-card { padding: 28px 22px; }
.contact-form-row { flex-direction: column; gap: 0; }
}
@media (max-width: 480px) {
.contact-convo-title { font-size: 26px; }
}
/* ===================================================================
FORM VALIDATION — shared across contact + role-apply forms
=================================================================== */
.form-field-error {
display: none;
margin-top: 6px;
font-size: 12px;
color: #ff6b6b;
line-height: 1.4;
letter-spacing: 0.2px;
}
.form-field-error.show { display: block; }
.contact-form-group input.is-invalid,
.contact-form-group textarea.is-invalid,
.role-form-group input.is-invalid,
.role-form-group textarea.is-invalid {
border-color: #ff6b6b !important;
box-shadow: 0 0 0 3px rgba(255, 107, 107, 0.12) !important;
}
.role-dropzone.is-invalid {
border-color: #ff6b6b !important;
box-shadow: 0 0 0 3px rgba(255, 107, 107, 0.12) !important;
}
/* ===================================================================
FLOWSTATE CREATIVE - DARK / LIGHT THEME SYSTEM
=================================================================== */
/* DARK MODE (default) */
:root,
:root[data-theme="dark"] {
--fc-bg: #0B1426;
--fc-bg-alt: #131F38;
--fc-card: #1A2845;
--fc-card-border: #243358;
--fc-header-bg: #0B1426;
--fc-text: #C9D1E0;
--fc-text-muted: #8A95B0;
--fc-heading: #FFFFFF;
--fc-accent: #3DBFA9;
--fc-accent-2: #1A7BAF;
--fc-accent-glow: rgba(61, 191, 169, 0.15);
--fc-border: rgba(61, 191, 169, 0.18);
--fc-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
--fc-overlay: linear-gradient(135deg, #0B1426 0%, #1A2845 60%, #1A7BAF 100%);
--fc-footer-bg: #060D1A;
--fc-input-bg: #1A2845;
--fc-input-border: #2A3A60;
}
/* LIGHT MODE */
:root[data-theme="light"] {
--fc-bg: #F7FAFE;
--fc-bg-alt: #EDF4F8;
--fc-card: #FFFFFF;
--fc-card-border: #DDE6EE;
--fc-header-bg: #FFFFFF;
--fc-text: #3D4F63;
--fc-text-muted: #5F7082;
--fc-heading: #14243F;
--fc-accent: #3DBFA9;
--fc-accent-2: #1A7BAF;
--fc-accent-glow: rgba(61, 191, 169, 0.12);
--fc-border: rgba(30, 45, 90, 0.10);
--fc-shadow: 0 6px 30px rgba(30, 45, 90, 0.07);
--fc-overlay: linear-gradient(135deg, #1E2D5A 0%, #1A7BAF 100%);
--fc-footer-bg: #1E2D5A;
--fc-input-bg: #EEF3F8;
--fc-input-border: #D2DCE6;
}
/* ==========================================================
LIGHT THEME — Global Rich Enhancements
========================================================== */
/* Body — soft cool-blue tint instead of pure white */
[data-theme="light"] body {
background: #F7FAFE !important;
}
/* Section backgrounds — alternating subtle tints to break monotony */
[data-theme="light"] .hww {
background: linear-gradient(180deg, #F7FAFE 0%, #EEF5FB 50%, #F2F8FC 100%) !important;
}
[data-theme="light"] .services-grid-section {
background: linear-gradient(180deg, #FFFFFF 0%, #F5FAFE 50%, #EDF4FA 100%) !important;
}
[data-theme="light"] .ov {
background: linear-gradient(170deg, #EBF3F9 0%, #F5FAFE 40%, #FFFFFF 100%) !important;
}
[data-theme="light"] .wfc {
background: linear-gradient(180deg, #EDF4FA 0%, #F7FAFE 50%, #FFFFFF 100%) !important;
}
[data-theme="light"] .moments-section {
background: linear-gradient(180deg, #F7FAFE 0%, #EEF5FB 100%) !important;
}
[data-theme="light"] .fc-feedback-section {
background: linear-gradient(180deg, #FFFFFF 0%, #F2F8FC 100%) !important;
}
/* Cards — add subtle depth and warmth */
[data-theme="light"] .svc-card,
[data-theme="light"] .wfc-card:not(.wfc-card-highlight),
[data-theme="light"] .ov-card:not(.ov-card-hero),
[data-theme="light"] .hww-step-card {
background: #FFFFFF !important;
border-color: rgba(30,45,90,0.06) !important;
box-shadow: 0 1px 3px rgba(30,45,90,0.04), 0 4px 16px rgba(30,45,90,0.03) !important;
}
[data-theme="light"] .svc-card:hover,
[data-theme="light"] .wfc-card:not(.wfc-card-highlight):hover,
[data-theme="light"] .ov-card:not(.ov-card-hero):hover,
[data-theme="light"] .hww-step:hover .hww-step-card {
box-shadow: 0 4px 12px rgba(30,45,90,0.06), 0 16px 48px rgba(30,45,90,0.08) !important;
border-color: rgba(61,191,169,0.22) !important;
}
/* Stats bar — soft card feel */
[data-theme="light"] .wfc-stats-bar {
background: #FFFFFF !important;
border-color: rgba(30,45,90,0.06) !important;
box-shadow: 0 2px 8px rgba(30,45,90,0.03), 0 8px 32px rgba(30,45,90,0.05) !important;
}
/* Marquee section — tinted instead of white */
[data-theme="light"] .marquee-section {
background: #EDF4FA !important;
}
/* Number circles */
[data-theme="light"] .hww-step-num span {
background: #FFFFFF !important;
box-shadow: 0 0 0 6px #F2F8FC, 0 2px 8px rgba(30,45,90,0.06) !important;
}
[data-theme="light"] .hww-step:hover .hww-step-num span {
background: linear-gradient(135deg, var(--fc-accent, #3DBFA9), var(--fc-accent-2, #1A7BAF)) !important;
color: #ffffff !important;
border-color: transparent !important;
box-shadow: 0 0 0 6px #F2F8FC, 0 8px 24px rgba(61,191,169,0.20) !important;
}
/* Heading contrast boost */
[data-theme="light"] h1,
[data-theme="light"] h2,
[data-theme="light"] h3,
[data-theme="light"] h4,
[data-theme="light"] h5,
[data-theme="light"] h6 {
color: #14243F !important;
}
/* Accent glow visibility bump for light */
[data-theme="light"] .svc-sec-glow-1,
[data-theme="light"] .wfc-glow-1 {
background: radial-gradient(circle, rgba(61,191,169,0.08) 0%, transparent 70%) !important;
}
[data-theme="light"] .svc-sec-glow-2,
[data-theme="light"] .wfc-glow-2 {
background: radial-gradient(circle, rgba(26,123,175,0.06) 0%, transparent 70%) !important;
}
[data-theme="light"] .wfc-glow-3 {
background: radial-gradient(circle, rgba(155,108,247,0.05) 0%, transparent 70%) !important;
}
/* Grid patterns — slightly more visible */
[data-theme="light"] .svc-sec-grid-bg,
[data-theme="light"] .wfc-grid-bg {
background-image:
linear-gradient(rgba(30,45,90,0.03) 1px, transparent 1px),
linear-gradient(90deg, rgba(30,45,90,0.03) 1px, transparent 1px) !important;
}
/* Background watermark text — more visible in light */
[data-theme="light"] .ov-bg-text { color: rgba(30,45,90,0.03) !important; }
[data-theme="light"] .hww-bg-text { color: rgba(30,45,90,0.025) !important; }
/* Diagonal strips — slightly more visible */
[data-theme="light"] .ov-diagonal,
[data-theme="light"] .hww-diag {
background: linear-gradient(135deg, transparent 43%, rgba(61,191,169,0.03) 44%, rgba(61,191,169,0.03) 45%, transparent 46%) !important;
}
/* Subtitle tag lines — brighter in light */
[data-theme="light"] .sec-tag-line {
opacity: 0.7 !important;
}
/* Feedback section cards */
[data-theme="light"] .fc-feedback-card {
background: #FFFFFF !important;
border-color: rgba(30,45,90,0.06) !important;
box-shadow: 0 2px 8px rgba(30,45,90,0.03), 0 8px 32px rgba(30,45,90,0.05) !important;
}
/* Nav buttons */
[data-theme="light"] .fc-feedback-prev,
[data-theme="light"] .fc-feedback-next {
background: #FFFFFF !important;
border-color: rgba(30,45,90,0.10) !important;
box-shadow: 0 2px 8px rgba(30,45,90,0.04) !important;
}
/* Sticky navbar — frosted glass with slight tint */
[data-theme="light"] .fc-navbar.sticky {
background: rgba(247,250,254,0.88) !important;
box-shadow: 0 1px 0 rgba(30,45,90,0.06), 0 8px 32px rgba(30,45,90,0.06) !important;
border-bottom: 1px solid rgba(30,45,90,0.06) !important;
}
/* Smooth transitions for theme switching */
html, body, header, section, footer, .header-top-section, #header-sticky,
.footer-section, .footer-area, .breadcrumb-wrapper,
.about-section, .service-section, .project-section, .testimonial-section,
.faq-section, .contact-section, .career-intro, .legal-section,
.service-box-item, .feature-card-items-3, .contact-info-box, .testimonial-box-item,
.project-card-items, .news-card-items, .counter-box-item, .faq-items,
.career-perk-box, .job-listing, .legal-content,
.how-we-work-section, .step-card, .step-number, .step-tag {
transition: background-color 0.4s ease, color 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease !important;
}
/* =========== GLOBAL =========== */
html {
/* JS-driven smoothing (GSAP ScrollSmoother) handles scroll;
keep CSS smooth-behavior off so the two don't double-jitter. */
scroll-behavior: auto;
}
/* ScrollSmoother wrapper safety */
#smooth-wrapper { overflow: hidden; }
#smooth-content { will-change: transform; }
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
}
body {
background-color: var(--fc-bg) !important;
color: var(--fc-text) !important;
font-family: "Inter", sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
}
/* GPU compositing for animated elements */
.moments-track,
.moments-track img,
.moment-img,
.mouseCursor,
.wfc-glow,
.svc-sec-glow,
.ov-bg-text {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-perspective: 1000px;
perspective: 1000px;
}
/* Reduce paint on hover-heavy elements */
.moment-img,
.svc-card,
.wfc-card,
.ov-card,
.val-card {
contain: layout style paint;
}
/* =========== Unified Section Subtitle =========== */
.sec-tag {
display: inline-flex !important;
align-items: center !important;
gap: 14px !important;
font-size: 13px !important;
font-weight: 700 !important;
letter-spacing: 3px !important;
text-transform: uppercase !important;
color: var(--fc-accent, #3DBFA9) !important;
background: none !important;
border: none !important;
padding: 0 !important;
margin-bottom: 20px !important;
box-shadow: none !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
border-radius: 0 !important;
}
.sec-tag-line {
display: inline-block;
width: 32px;
height: 2px;
border-radius: 2px;
background: var(--fc-accent, #3DBFA9);
flex-shrink: 0;
opacity: 0.5;
}
/* Light theme */
[data-theme="light"] .sec-tag {
color: var(--fc-accent, #3DBFA9) !important;
}
/* Hide any old icons/dots inside tags that now use sec-tag */
.sec-tag > i,
.sec-tag > .hww-dot,
.sec-tag > .svc-badge-dot,
.sec-tag > .wfc-badge-dot,
.sec-tag > .val-badge-dot {
display: none !important;
}
p, span, li {
color: var(--fc-text);
}
h1, h2, h3, h4, h5, h6 {
color: var(--fc-heading) !important;
}
a {
transition: color 0.3s ease;
}
/* =========== LOGO =========== */
.logo img, .header-logo img, .header-logo-2 img, .offcanvas__logo img, .footer-logo img {
max-height: 58px !important;
width: auto !important;
}
/* In dark mode use logo-light, in light mode use logo-dark via swap below */
:root[data-theme="light"] .header-logo img,
:root[data-theme="light"] .header-logo-2 img,
:root[data-theme="light"] .offcanvas__logo img {
content: url('../img/logo/logo-dark.png');
}
/* =========== HEADER TOP STRIP =========== */
.header-top-section {
background-color: var(--fc-header-bg) !important;
border-bottom: 1px solid var(--fc-border) !important;
padding: 12px 0;
}
.header-top-section,
.header-top-section *,
.header-top-section a,
.header-top-section li,
.header-top-section span,
.header-top-section i {
color: var(--fc-text) !important;
}
.header-top-section a:hover {
color: var(--fc-accent) !important;
}
.header-top-section .social-icon a {
width: 32px;
height: 32px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--fc-accent-glow);
margin-left: 6px;
transition: all 0.3s ease;
}
.header-top-section .social-icon a:hover {
background: var(--fc-accent);
color: #fff !important;
transform: translateY(-2px);
}
/* =========== STICKY HEADER =========== */
#header-sticky {
background-color: var(--fc-header-bg) !important;
border-bottom: 1px solid var(--fc-border) !important;
padding: 14px 0;
transition: all 0.4s ease;
box-shadow: 0 2px 20px rgba(0,0,0,0.1);
}
#header-sticky.sticky {
background-color: var(--fc-header-bg) !important;
box-shadow: 0 4px 30px rgba(0,0,0,0.15);
backdrop-filter: blur(10px);
}
/* =========== NAV MENU =========== */
.main-menu ul {
display: flex;
align-items: center;
gap: 8px;
list-style: none;
margin: 0;
padding: 0;
}
.main-menu ul li {
position: relative;
list-style: none;
}
.main-menu ul li a {
color: var(--fc-heading) !important;
font-weight: 600;
font-size: 15px;
padding: 12px 20px !important;
display: inline-block;
border-radius: 8px;
transition: all 0.3s ease;
text-decoration: none;
}
.main-menu ul li a:hover {
color: var(--fc-accent) !important;
background: var(--fc-accent-glow);
}
.main-menu ul li.has-dropdown > a::after {
content: "\f078";
font-family: "Font Awesome 6 Free";
font-weight: 900;
font-size: 10px;
margin-left: 8px;
transition: transform 0.3s ease;
}
.main-menu ul li.has-dropdown:hover > a::after {
transform: rotate(180deg);
}
/* Dropdown submenu */
.main-menu ul li .submenu {
position: absolute;
top: 110%;
left: 0;
min-width: 240px;
background: var(--fc-card);
border: 1px solid var(--fc-card-border);
border-radius: 12px;
padding: 10px;
list-style: none;
margin: 0;
box-shadow: var(--fc-shadow);
opacity: 0;
visibility: hidden;
transform: translateY(10px);
transition: all 0.3s ease;
z-index: 1000;
}
.main-menu ul li:hover > .submenu {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.main-menu ul li .submenu li {
display: block;
width: 100%;
}
.main-menu ul li .submenu li a {
display: block;
width: 100%;
padding: 12px 16px !important;
font-size: 14px;
color: var(--fc-text) !important;
border-radius: 8px;
}
.main-menu ul li .submenu li a:hover {
background: var(--fc-accent-glow);
color: var(--fc-accent) !important;
padding-left: 22px !important;
}
/* =========== THEME TOGGLE BUTTON =========== */
.theme-toggle-btn {
width: 44px;
height: 44px;
border-radius: 50%;
background: linear-gradient(135deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
border: 1px solid rgba(255,255,255,0.12);
color: #ffffff;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
margin-right: 0;
transition: transform .4s cubic-bezier(0.34, 1.56, 0.64, 1),
background .35s ease, border-color .35s ease,
color .35s ease, box-shadow .35s ease;
position: relative;
overflow: hidden;
font-size: 14px;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}
/* Rotating conic-gradient ring on hover */
.theme-toggle-ring {
position: absolute;
inset: -1px;
border-radius: 50%;
padding: 1px;
background: conic-gradient(from 0deg, rgba(61,191,169,0), rgba(61,191,169,0.85), rgba(26,123,175,0.85), rgba(61,191,169,0));
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
opacity: 0;
transition: opacity .35s ease;
animation: fcThemeRingSpin 4s linear infinite;
pointer-events: none;
}
@keyframes fcThemeRingSpin {
to { transform: rotate(360deg); }
}
.theme-toggle-btn:hover .theme-toggle-ring { opacity: 1; }
.theme-toggle-btn:hover {
background: linear-gradient(135deg, rgba(61,191,169,0.16), rgba(26,123,175,0.16));
border-color: rgba(61,191,169,0.45);
color: #ffffff;
transform: scale(1.08) rotate(-12deg);
box-shadow: 0 8px 24px rgba(61,191,169,0.25);
}
[data-theme="light"] .theme-toggle-btn {
background: linear-gradient(135deg, rgba(255,255,255,0.85), rgba(255,255,255,0.65));
border-color: rgba(14,42,51,0.10);
color: #0E2A33;
box-shadow: 0 6px 18px rgba(14,42,51,0.06);
}
[data-theme="light"] .theme-toggle-btn:hover {
background: linear-gradient(135deg, rgba(61,191,169,0.14), rgba(26,123,175,0.14));
border-color: rgba(26,123,175,0.40);
color: #1A7BAF;
box-shadow: 0 10px 26px rgba(26,123,175,0.18);
}
.fc-navbar.sticky .theme-toggle-btn {
background: rgba(255,255,255,0.05);
border-color: rgba(255,255,255,0.08);
color: rgba(255,255,255,0.6);
}
[data-theme="light"] .fc-navbar.sticky .theme-toggle-btn {
background: rgba(0,0,0,0.04);
border-color: rgba(0,0,0,0.08);
color: rgba(30,45,90,0.5);
}
[data-theme="light"] .fc-navbar.sticky .theme-toggle-btn:hover {
background: rgba(61,191,169,0.10);
border-color: rgba(61,191,169,0.25);
color: #1E2D5A;
}
.theme-toggle-btn .sun-icon,
.theme-toggle-btn .moon-icon {
position: absolute;
transition: all 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}
:root[data-theme="dark"] .theme-toggle-btn .sun-icon {
opacity: 1;
transform: rotate(0deg) scale(1);
}
:root[data-theme="dark"] .theme-toggle-btn .moon-icon {
opacity: 0;
transform: rotate(180deg) scale(0);
}
:root[data-theme="light"] .theme-toggle-btn .sun-icon {
opacity: 0;
transform: rotate(-180deg) scale(0);
}
:root[data-theme="light"] .theme-toggle-btn .moon-icon {
opacity: 1;
transform: rotate(0deg) scale(1);
}
/* =========== HEADER RIGHT BUTTONS =========== */
.header-right {
gap: 4px;
}
.header-button .theme-btn {
padding: 12px 28px;
}
/* =========== THEME BUTTONS =========== */
.theme-btn {
background: linear-gradient(135deg, var(--fc-accent) 0%, #2EA890 100%) !important;
color: #ffffff !important;
padding: 14px 32px;
border-radius: 50px;
font-weight: 600;
display: inline-flex;
align-items: center;
gap: 10px;
border: none;
text-decoration: none;
transition: all 0.3s ease;
box-shadow: 0 4px 20px rgba(61, 191, 169, 0.3);
}
.theme-btn:hover {
background: linear-gradient(135deg, var(--fc-accent-2) 0%, #166499 100%) !important;
color: #ffffff !important;
transform: translateY(-2px);
box-shadow: 0 8px 30px rgba(26, 123, 175, 0.4);
}
.theme-btn.style-2 {
background: transparent !important;
border: 2px solid var(--fc-accent) !important;
color: var(--fc-accent) !important;
box-shadow: none;
}
.theme-btn.style-2:hover {
background: var(--fc-accent) !important;
color: #fff !important;
}
/* =========== HERO SECTION =========== */
.hero-section,
.bg-cover.hero-section {
background: var(--fc-overlay) !important;
position: relative;
overflow: hidden;
}
.hero-section::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(circle at 20% 50%, rgba(61, 191, 169, 0.15) 0%, transparent 50%),
radial-gradient(circle at 80% 80%, rgba(26, 123, 175, 0.2) 0%, transparent 50%);
pointer-events: none;
}
.hero-section .container {
position: relative;
z-index: 2;
}
.hero-section h1, .hero-section h2, .hero-section h6, .hero-section p,
.hero-section span {
color: #ffffff !important;
}
.hero-section h6 {
display: inline-flex;
align-items: center;
gap: 10px;
background: rgba(61, 191, 169, 0.15);
padding: 10px 20px;
border-radius: 50px;
border: 1px solid rgba(61, 191, 169, 0.3);
color: #3DBFA9 !important;
font-weight: 600;
letter-spacing: 1.5px;
font-size: 13px;
}
.hero-section h1 {
font-size: 64px;
font-weight: 800;
line-height: 1.1;
margin: 24px 0;
background: linear-gradient(135deg, #ffffff 0%, #C9D1E0 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
@media (max-width: 768px) {
.hero-section h1 { font-size: 38px; }
}
/* =========== SECTION BACKGROUNDS =========== */
.about-section, .service-section, .project-section, .testimonial-section,
.faq-section, .contact-section, .news-section, .team-section,
.contact-info-section, .legal-section, .career-intro {
background-color: var(--fc-bg) !important;
}
.about-section-3, .feature-section-3, .feature-section-2 {
background-color: var(--fc-bg-alt) !important;
}
/* =========== SUB-TITLE =========== */
.sub-title, .section-title .sub-title {
color: var(--fc-accent) !important;
font-weight: 600;
letter-spacing: 2px;
display: inline-flex;
align-items: center;
gap: 10px;
font-size: 14px;
text-transform: uppercase;
}
.section-title h2 {
color: var(--fc-heading) !important;
font-size: 46px;
font-weight: 800;
line-height: 1.2;
}
@media (max-width: 768px) {
.section-title h2 { font-size: 32px; }
}
/* =========== CARDS =========== */
.service-box-item, .feature-card-items-3, .contact-info-box,
.testimonial-box-item, .project-card-items, .news-card-items,
.counter-box-item, .faq-items, .career-perk-box, .job-listing {
background: var(--fc-card) !important;
border: 1px solid var(--fc-card-border) !important;
border-radius: 16px;
box-shadow: var(--fc-shadow);
transition: all 0.4s ease !important;
}
.service-box-item:hover, .feature-card-items-3:hover,
.contact-info-box:hover, .project-card-items:hover,
.career-perk-box:hover, .job-listing:hover {
transform: translateY(-6px);
border-color: var(--fc-accent) !important;
box-shadow: 0 20px 60px var(--fc-accent-glow);
}
.service-box-item h3, .service-box-item h3 a,
.contact-info-box h4, .testimonial-box-item h4,
.project-card-items h3, .career-perk-box h4 {
color: var(--fc-heading) !important;
}
.service-box-item p, .contact-info-box p,
.testimonial-box-item p, .project-card-items p,
.career-perk-box p {
color: var(--fc-text) !important;
}
/* =========== COUNTER SECTION =========== */
.counter-section, .counter-section.bg-cover {
background: var(--fc-overlay) !important;
position: relative;
}
.counter-section h2, .counter-section h4, .counter-section p,
.counter-section span {
color: #ffffff !important;
}
.counter-box-item {
background: rgba(255,255,255,0.06) !important;
border: 1px solid rgba(255,255,255,0.12) !important;
backdrop-filter: blur(10px);
}
.counter-box-item h2 {
color: var(--fc-accent) !important;
font-size: 56px;
font-weight: 800;
}
/* =========== BREADCRUMB =========== */
.breadcrumb-wrapper {
background: var(--fc-overlay) !important;
padding: 100px 0;
position: relative;
border-bottom: 1px solid var(--fc-border);
}
.breadcrumb-wrapper::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(circle at 50% 50%, rgba(61, 191, 169, 0.1) 0%, transparent 70%);
}
.breadcrumb-wrapper h1, .breadcrumb-wrapper a, .breadcrumb-wrapper li {
color: #ffffff !important;
}
.breadcrumb-wrapper h1 {
font-size: 56px;
font-weight: 800;
}
.breadcrumb-items {
display: flex;
gap: 14px;
list-style: none;
padding: 0;
justify-content: center;
align-items: center;
}
/* =========== FOOTER =========== */
.footer-section, .footer-area {
background-color: var(--fc-footer-bg) !important;
padding: 80px 0 0 !important;
position: relative;
border-top: 1px solid var(--fc-border);
}
.footer-section *, .footer-area * {
color: #C9D1E0;
}
.footer-section h2, .footer-section h3, .footer-section h4, .footer-section h5,
.footer-area h2, .footer-area h3, .footer-area h4, .footer-area h5 {
color: #ffffff !important;
margin-bottom: 24px;
}
.footer-section a, .footer-area a {
color: #C9D1E0 !important;
transition: all 0.3s ease;
text-decoration: none;
}
.footer-section a:hover, .footer-area a:hover {
color: var(--fc-accent) !important;
padding-left: 6px;
}
.footer-bottom-wrapper {
border-top: 1px solid rgba(255,255,255,0.1);
padding: 24px 0;
margin-top: 60px;
}
/* =========== FORMS / INPUTS =========== */
input[type="text"], input[type="email"], input[type="tel"],
textarea, select {
background: var(--fc-input-bg) !important;
border: 1px solid var(--fc-input-border) !important;
color: var(--fc-text) !important;
border-radius: 10px !important;
padding: 14px 18px !important;
transition: all 0.3s ease;
}
input:focus, textarea:focus, select:focus {
border-color: var(--fc-accent) !important;
outline: none;
box-shadow: 0 0 0 3px var(--fc-accent-glow) !important;
}
::placeholder {
color: var(--fc-text-muted) !important;
opacity: 1;
}
/* =========== FAQ =========== */
.faq-items {
margin-bottom: 16px;
overflow: hidden;
}
.faq-items .accordion-button {
background: var(--fc-card) !important;
color: var(--fc-heading) !important;
font-weight: 600;
padding: 22px 28px;
border: none;
}
.faq-items .accordion-body {
background: var(--fc-card) !important;
color: var(--fc-text) !important;
padding: 0 28px 22px;
}
/* =========== LEGAL PAGES =========== */
.legal-content {
background: var(--fc-card) !important;
border: 1px solid var(--fc-card-border) !important;
color: var(--fc-text) !important;
}
.legal-content h3, .legal-content strong {
color: var(--fc-heading) !important;
}
.legal-content p {
color: var(--fc-text) !important;
}
.legal-content a {
color: var(--fc-accent) !important;
}
/* =========== PRELOADER =========== */
.preloader {
background: var(--fc-bg) !important;
}
.preloader .txt-loading .letters-loading {
color: var(--fc-accent) !important;
-webkit-text-stroke: 1px var(--fc-accent) !important;
}
.preloader .txt-loading .letters-loading::before {
color: var(--fc-accent) !important;
}
.preloader p {
color: var(--fc-text) !important;
}
/* =========== BACK TO TOP =========== */
.back-to-top {
background: var(--fc-accent) !important;
color: #fff !important;
border: none !important;
width: 44px !important;
height: 44px !important;
min-width: 44px;
min-height: 44px;
max-width: 44px;
max-height: 44px;
line-height: 44px !important;
border-radius: 12px !important;
box-shadow: 0 6px 20px var(--fc-accent-glow);
transition: all 0.3s ease;
display: flex !important;
align-items: center;
justify-content: center;
padding: 0 !important;
font-size: 16px !important;
cursor: pointer;
}
.back-to-top i {
font-size: 16px;
line-height: 1;
}
.back-to-top:hover {
background: var(--fc-accent-2) !important;
transform: translateY(-4px) !important;
box-shadow: 0 10px 30px rgba(26,123,175,0.3);
}
/* =========== CUSTOM SCROLLBAR =========== */
::-webkit-scrollbar {
width: 10px;
height: 10px;
}
::-webkit-scrollbar-track {
background: var(--fc-bg-alt);
}
::-webkit-scrollbar-thumb {
background: linear-gradient(180deg, var(--fc-accent), var(--fc-accent-2));
border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
background: var(--fc-accent);
}
/* =========== SELECTION =========== */
::selection {
background: var(--fc-accent);
color: #fff;
}
/* =========== OFFCANVAS =========== */
/* ── Offcanvas / Mobile Menu ── */
.fix-area {
position: fixed;
top: 0;
right: 0;
width: 100%;
height: 100%;
z-index: 99999;
pointer-events: none;
}
.offcanvas__info {
position: fixed;
top: 0;
right: 0;
width: 380px;
max-width: 85vw;
height: 100%;
background: var(--fc-card, #1A2845) !important;
border-left: 1px solid var(--fc-card-border, rgba(255,255,255,0.08));
z-index: 100000;
overflow-y: auto;
transform: translateX(100%);
transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
pointer-events: auto;
box-shadow: -10px 0 40px rgba(0, 0, 0, 0);
}
.offcanvas__info.info-open {
transform: translateX(0) !important;
box-shadow: -10px 0 40px rgba(0, 0, 0, 0.3);
}
.offcanvas__overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.6);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
z-index: 99998;
opacity: 0;
visibility: hidden;
transition: opacity 0.4s ease, visibility 0.4s ease;
}
.offcanvas__overlay.overlay-open {
opacity: 1 !important;
visibility: visible !important;
}
/* ── Offcanvas Layout ── */
.offcanvas__wrapper {
padding: 30px 28px;
display: flex;
flex-direction: column;
min-height: 100%;
}
.offcanvas__top {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 32px !important;
}
.offcanvas__logo img {
max-height: 42px;
}
.offcanvas__close button {
background: none;
border: 1px solid var(--fc-card-border, rgba(255,255,255,0.1));
color: var(--fc-text-muted, #8A95B0);
width: 40px;
height: 40px;
border-radius: 50%;
font-size: 16px;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
}
.offcanvas__close button:hover {
background: var(--fc-accent, #3DBFA9);
border-color: var(--fc-accent, #3DBFA9);
color: #fff;
transform: rotate(90deg);
}
/* ── Mobile Navigation ── */
.mobile-nav {
list-style: none;
padding: 0;
margin: 0 0 32px 0;
border-top: 1px solid var(--fc-card-border, rgba(255,255,255,0.08));
}
.mobile-nav__item {
border-bottom: 1px solid var(--fc-card-border, rgba(255,255,255,0.08));
opacity: 0;
transform: translateX(30px);
transition: opacity 0.35s ease, transform 0.35s ease;
}
.info-open .mobile-nav__item {
opacity: 1 !important;
transform: translateX(0) !important;
}
.info-open .mobile-nav__item:nth-child(1) { transition-delay: 0.08s; }
.info-open .mobile-nav__item:nth-child(2) { transition-delay: 0.14s; }
.info-open .mobile-nav__item:nth-child(3) { transition-delay: 0.20s; }
.info-open .mobile-nav__item:nth-child(4) { transition-delay: 0.26s; }
.info-open .mobile-nav__item:nth-child(5) { transition-delay: 0.32s; }
.info-open .mobile-nav__item:nth-child(6) { transition-delay: 0.38s; }
.mobile-nav__link {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 4px;
font-size: 17px;
font-weight: 600;
color: var(--fc-heading, #fff) !important;
text-decoration: none;
letter-spacing: 0.3px;
transition: color 0.25s ease, padding-left 0.25s ease;
}
.mobile-nav__link:hover {
color: var(--fc-accent, #3DBFA9) !important;
padding-left: 8px;
}
.mobile-nav__link i {
font-size: 12px;
color: var(--fc-text-muted, #8A95B0) !important;
transition: transform 0.3s ease, color 0.25s ease;
}
.mobile-nav__link:hover i {
color: var(--fc-accent, #3DBFA9) !important;
transform: translateX(3px);
}
.mobile-nav__link.active {
color: var(--fc-accent, #3DBFA9) !important;
}
/* ── Mobile Submenu ── */
.mobile-nav__sub-toggle {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 4px;
font-size: 17px;
font-weight: 600;
color: var(--fc-heading, #fff) !important;
cursor: pointer;
transition: color 0.25s ease, padding-left 0.25s ease;
background: none;
border: none;
width: 100%;
text-align: left;
}
.mobile-nav__sub-toggle:hover {
color: var(--fc-accent, #3DBFA9) !important;
padding-left: 8px;
}
.mobile-nav__sub-toggle i {
font-size: 12px;
color: var(--fc-text-muted, #8A95B0) !important;
transition: transform 0.3s ease;
}
.mobile-nav__sub-toggle.open i {
transform: rotate(180deg);
}
.mobile-nav__submenu {
list-style: none;
padding: 0 0 8px 16px;
margin: 0;
max-height: 0;
overflow: hidden;
transition: max-height 0.35s ease;
}
.mobile-nav__submenu.open {
max-height: 200px;
}
.mobile-nav__submenu li a {
display: block;
padding: 10px 4px;
font-size: 15px;
font-weight: 500;
color: var(--fc-text-muted, #8A95B0) !important;
text-decoration: none;
transition: color 0.25s ease, padding-left 0.25s ease;
}
.mobile-nav__submenu li a:hover {
color: var(--fc-accent, #3DBFA9) !important;
padding-left: 8px;
}
/* ── Contact CTA Button ── */
.offcanvas__cta {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
width: 100%;
padding: 14px 24px;
margin-bottom: 32px;
background: var(--fc-accent, #3DBFA9);
color: #fff !important;
font-size: 16px;
font-weight: 600;
letter-spacing: 0.5px;
border-radius: 50px;
text-decoration: none;
transition: background 0.3s ease, transform 0.25s ease, box-shadow 0.3s ease;
}
.offcanvas__cta:hover {
background: var(--fc-accent-hover, #34a896);
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(61, 191, 169, 0.35);
color: #fff !important;
}
.offcanvas__cta i {
color: #fff !important;
font-size: 14px;
}
/* ── Contact Info ── */
.offcanvas__contact {
margin-top: auto;
}
.offcanvas__contact h4 {
font-size: 15px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1.5px;
color: var(--fc-heading, #fff) !important;
margin-bottom: 18px;
padding-bottom: 12px;
border-bottom: 1px solid var(--fc-card-border, rgba(255,255,255,0.08));
}
.offcanvas__contact ul {
list-style: none;
padding: 0;
margin: 0 0 24px 0;
}
.offcanvas__contact li {
margin-bottom: 14px;
}
.offcanvas__contact-icon {
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(61, 191, 169, 0.1);
border-radius: 8px;
margin-right: 12px;
flex-shrink: 0;
}
.offcanvas__contact-icon i {
font-size: 14px;
color: var(--fc-accent, #3DBFA9) !important;
}
.offcanvas__contact-text a {
font-size: 14px;
color: var(--fc-text-muted, #8A95B0) !important;
text-decoration: none;
transition: color 0.25s ease;
word-break: break-word;
}
.offcanvas__contact-text a:hover {
color: var(--fc-accent, #3DBFA9) !important;
}
/* ── Social Icons ── */
.offcanvas__contact .social-icon {
display: flex;
align-items: center;
gap: 10px;
padding-top: 8px;
}
.offcanvas__contact .social-icon a {
width: 38px;
height: 38px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: rgba(61, 191, 169, 0.1);
transition: background 0.3s ease, transform 0.25s ease;
}
.offcanvas__contact .social-icon a i {
font-size: 14px;
color: var(--fc-accent, #3DBFA9) !important;
transition: color 0.25s ease;
}
.offcanvas__contact .social-icon a:hover {
background: var(--fc-accent, #3DBFA9);
transform: translateY(-3px);
}
.offcanvas__contact .social-icon a:hover i {
color: #fff !important;
}
/* ── Hamburger Toggle ── */
.sidebar__toggle {
cursor: pointer;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 8px;
transition: background 0.25s ease;
}
.sidebar__toggle:hover {
background: rgba(61, 191, 169, 0.1);
}
.sidebar__toggle i {
font-size: 20px;
}
/* =========== IMAGES =========== */
img {
max-width: 100%;
height: auto;
}
/* =========== SECTION PADDING =========== */
.section-padding {
padding: 110px 0;
}
@media (max-width: 768px) {
.section-padding { padding: 70px 0; }
}
/* =========== SMOOTH ANIMATIONS =========== */
.wow {
visibility: visible !important;
animation-fill-mode: both;
}
.no-js .wow {
visibility: visible !important;
animation: none !important;
}
/* =========== FIX TEMPLATE BUGS =========== */
.search_popup, .search-popup-overlay {
display: none !important;
}
.menu_search { display: none !important; }
/* Hide template scroll-text issues */
.gt-text-scale-anim {
display: inline-block;
}
/* Container max width fix */
.custom-container {
max-width: 1320px;
margin: 0 auto;
padding: 0 15px;
}
/* Remove unwanted dots/dashes in lists */
ul.list, .breadcrumb-items {
list-style: none;
padding: 0;
}
/* Mobile responsive */
@media (max-width: 1199px) {
.main-menu { display: none; }
.header__hamburger { display: block !important; }
}
@media (min-width: 1200px) {
.header__hamburger { display: none !important; }
}
/* =========== ENSURE CONTENT VISIBILITY =========== */
/* Prevent template animation classes from hiding content if JS doesn't fire */
.text-anim, .text-anims, .tz-itm-anim, .tz-itm-title,
.gt-text-scale-anim, .gt-letter-span, .gt-word-span,
.fadeInUp, .fadeIn, .fadeInLeft, .fadeInRight,
.img-custom-anim-left, .img-custom-anim-right, .img-custom-anim-top {
visibility: visible !important;
opacity: 1 !important;
}
/* =========== HOW WE WORK SECTION =========== */
/* =====================================================
HOW WE WORK — Vertical Alternating Timeline
===================================================== */
.hww {
background: var(--fc-bg, #0b1120);
padding: 120px 0;
position: relative;
overflow: hidden;
transition: background 0.4s ease;
}
/* Giant background text */
.hww-bg-text {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: clamp(140px, 16vw, 280px);
font-weight: 900;
letter-spacing: 18px;
text-transform: uppercase;
color: rgba(255,255,255,0.012);
white-space: nowrap;
pointer-events: none;
z-index: 0;
user-select: none;
}
/* Diagonal accent strip */
.hww-diag {
position: absolute;
top: -40%; left: -10%;
width: 120%; height: 200%;
background: linear-gradient(135deg, transparent 44%, rgba(61,191,169,0.02) 45%, rgba(61,191,169,0.02) 46%, transparent 47%);
pointer-events: none;
z-index: 0;
}
/* ---- Header ---- */
.hww-header {
margin-bottom: 70px;
position: relative;
z-index: 1;
}
.hww-title {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 50px;
font-weight: 800;
line-height: 1.12;
letter-spacing: -1px;
color: var(--fc-heading, #fff) !important;
margin: 0 0 18px;
}
.hww-title-hl {
position: relative;
display: inline;
}
.hww-title-hl::after {
content: '';
position: absolute;
left: 0; bottom: 2px;
width: 100%; height: 6px;
background: linear-gradient(90deg, var(--fc-accent, #3DBFA9), var(--fc-accent-2, #1A7BAF));
border-radius: 3px;
opacity: 0.35;
}
.hww-desc {
font-size: 17px;
line-height: 1.75;
color: var(--fc-text-muted, rgba(255,255,255,0.50));
max-width: 540px;
margin: 0 auto;
}
/* ===== Vertical Timeline ===== */
.hww-timeline {
position: relative;
max-width: 900px;
margin: 0 auto;
z-index: 1;
}
/* Vertical connecting line */
.hww-line {
position: absolute;
top: 0; bottom: 0;
left: 50%;
width: 2px;
transform: translateX(-50%);
background: linear-gradient(180deg, var(--fc-accent, #3DBFA9), var(--fc-accent-2, #1A7BAF), rgba(155,108,247,0.3));
opacity: 0.18;
z-index: 0;
}
/* ---- Single Step Row ---- */
.hww-step {
display: grid;
grid-template-columns: 1fr 80px 1fr;
align-items: start;
margin-bottom: 40px;
position: relative;
opacity: 0;
transform: translateY(24px);
animation: hwwFadeIn 0.6s cubic-bezier(0.25,0.8,0.25,1) forwards;
}
.hww-step:last-child { margin-bottom: 0; }
.hww-step:nth-child(1) { animation-delay: 0.05s; }
.hww-step:nth-child(2) { animation-delay: 0.15s; }
.hww-step:nth-child(3) { animation-delay: 0.25s; }
.hww-step:nth-child(4) { animation-delay: 0.35s; }
.hww-step:nth-child(5) { animation-delay: 0.45s; }
@keyframes hwwFadeIn {
to { opacity: 1; transform: translateY(0); }
}
/* Left step: content | number | empty */
.hww-step-left .hww-step-content { grid-column: 1; text-align: right; }
.hww-step-left .hww-step-num { grid-column: 2; }
/* Right step: empty | number | content */
.hww-step-right .hww-step-num { grid-column: 2; }
.hww-step-right .hww-step-content { grid-column: 3; text-align: left; }
/* ---- Number Circle ---- */
.hww-step-num {
display: flex;
justify-content: center;
z-index: 2;
}
.hww-step-num span {
width: 56px; height: 56px;
border-radius: 50%;
background: var(--fc-bg, #0b1120);
border: 2px solid rgba(61,191,169,0.25);
display: flex;
align-items: center;
justify-content: center;
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 16px;
font-weight: 800;
color: var(--fc-accent, #3DBFA9);
box-shadow: 0 0 0 6px var(--fc-bg, #0b1120);
transition: all 0.4s cubic-bezier(0.25,0.8,0.25,1);
}
.hww-step:hover .hww-step-num span {
background: linear-gradient(135deg, var(--fc-accent, #3DBFA9), var(--fc-accent-2, #1A7BAF));
color: #fff;
border-color: transparent;
transform: scale(1.1);
box-shadow: 0 0 0 6px var(--fc-bg, #0b1120), 0 8px 28px rgba(61,191,169,0.30);
}
/* ---- Step Card ---- */
.hww-step-card {
background: rgba(255,255,255,0.025);
border: 1px solid rgba(255,255,255,0.06);
border-radius: 20px;
padding: 30px 28px 26px;
position: relative;
overflow: hidden;
transition: all 0.45s cubic-bezier(0.25,0.8,0.25,1);
}
.hww-step:hover .hww-step-card {
transform: translateY(-5px);
border-color: rgba(61,191,169,0.20);
box-shadow: 0 20px 60px rgba(0,0,0,0.20), 0 0 0 1px rgba(61,191,169,0.06);
}
/* Left stripe */
.hww-step-stripe {
position: absolute;
top: 20%; left: 0;
width: 3px; height: 0;
border-radius: 0 3px 3px 0;
transition: height 0.5s cubic-bezier(0.25,0.8,0.25,1);
z-index: 2;
}
.hww-step:hover .hww-step-stripe { height: 60%; }
.hww-stripe-teal { background: linear-gradient(180deg, #3DBFA9, #2a9d8f); }
.hww-stripe-blue { background: linear-gradient(180deg, #1A7BAF, #1565a0); }
.hww-stripe-purple { background: linear-gradient(180deg, #9B6CF7, #7c5ce0); }
.hww-stripe-orange { background: linear-gradient(180deg, #F59E0B, #D97706); }
.hww-stripe-green { background: linear-gradient(180deg, #10B981, #059669); }
/* Horizontal layout: icon + text */
.hww-step-head {
display: flex;
align-items: flex-start;
gap: 18px;
margin-bottom: 18px;
}
.hww-step-left .hww-step-head {
flex-direction: row-reverse;
text-align: right;
}
/* Icon */
.hww-step-icon {
width: 50px; height: 50px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: all 0.4s cubic-bezier(0.25,0.8,0.25,1);
}
.hww-step:hover .hww-step-icon {
transform: scale(1.12);
}
.hww-step-icon i { font-size: 20px; color: #fff; }
.hww-si-teal { background: linear-gradient(135deg, #3DBFA9, #2a9d8f); box-shadow: 0 8px 24px rgba(61,191,169,0.25); }
.hww-si-blue { background: linear-gradient(135deg, #1A7BAF, #1565a0); box-shadow: 0 8px 24px rgba(26,123,175,0.25); }
.hww-si-purple { background: linear-gradient(135deg, #9B6CF7, #7c5ce0); box-shadow: 0 8px 24px rgba(155,108,247,0.25); }
.hww-si-orange { background: linear-gradient(135deg, #F59E0B, #D97706); box-shadow: 0 8px 24px rgba(245,158,11,0.25); }
.hww-si-green { background: linear-gradient(135deg, #10B981, #059669); box-shadow: 0 8px 24px rgba(16,185,129,0.25); }
/* Card text */
.hww-step-card h4 {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 18px;
font-weight: 700;
color: var(--fc-heading, #fff) !important;
margin: 0 0 8px;
transition: color 0.3s ease;
}
.hww-step:hover .hww-step-card h4 { color: var(--fc-accent, #3DBFA9) !important; }
.hww-step-card p {
font-size: 14px;
line-height: 1.7;
color: var(--fc-text-muted, rgba(255,255,255,0.45));
margin: 0;
}
/* Tag pill */
.hww-step-tag {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 12px;
font-weight: 600;
color: var(--fc-accent, #3DBFA9);
background: rgba(61,191,169,0.08);
border: 1px solid rgba(61,191,169,0.15);
padding: 7px 16px;
border-radius: 50px;
transition: all 0.35s ease;
}
.hww-step-tag i { font-size: 9px; }
.hww-step:hover .hww-step-tag {
background: linear-gradient(135deg, var(--fc-accent, #3DBFA9), var(--fc-accent-2, #1A7BAF));
color: #fff;
border-color: transparent;
box-shadow: 0 4px 16px rgba(61,191,169,0.25);
}
.hww-step-left .hww-step-tag { float: right; }
/* ========== LIGHT THEME ========== */
[data-theme="light"] .hww {
background: linear-gradient(180deg, #ffffff 0%, #f5fafe 50%, #f0f7fa 100%);
}
[data-theme="light"] .hww-bg-text { color: rgba(30,45,90,0.020); }
[data-theme="light"] .hww-title-hl::after { opacity: 0.22; }
[data-theme="light"] .hww-line { opacity: 0.12; }
[data-theme="light"] .hww-step-num span {
background: #ffffff;
border-color: rgba(61,191,169,0.25);
box-shadow: 0 0 0 6px #ffffff;
}
[data-theme="light"] .hww-step:hover .hww-step-num span {
box-shadow: 0 0 0 6px #ffffff, 0 8px 28px rgba(61,191,169,0.20);
}
[data-theme="light"] .hww-step-card {
background: #ffffff;
border-color: rgba(30,45,90,0.07);
box-shadow: 0 2px 16px rgba(30,45,90,0.04);
}
[data-theme="light"] .hww-step:hover .hww-step-card {
background: #ffffff;
border-color: rgba(61,191,169,0.22);
box-shadow: 0 16px 50px rgba(30,45,90,0.10), 0 0 0 1px rgba(61,191,169,0.08);
}
[data-theme="light"] .hww-step-tag {
background: rgba(61,191,169,0.06);
border-color: rgba(61,191,169,0.15);
}
/* ---- Responsive ---- */
@media (max-width: 768px) {
.hww { padding: 80px 0; }
.hww-title { font-size: 34px; }
.hww-header { margin-bottom: 50px; }
.hww-line { display: none; }
.hww-step {
grid-template-columns: 56px 1fr;
gap: 0 18px;
}
.hww-step-left .hww-step-content,
.hww-step-right .hww-step-content {
grid-column: 2;
text-align: left;
}
.hww-step-left .hww-step-num,
.hww-step-right .hww-step-num {
grid-column: 1;
grid-row: 1;
}
.hww-step-left .hww-step-head {
flex-direction: row;
text-align: left;
}
.hww-step-left .hww-step-tag { float: none; }
.hww-step-num span {
width: 48px; height: 48px;
font-size: 14px;
}
}
@media (max-width: 480px) {
.hww-title { font-size: 28px; }
.hww-step-card { padding: 24px 22px 22px; border-radius: 16px; }
.hww-bg-text { font-size: 70px; }
}
/* =========== FOUNDER SECTION =========== */
.founder-section {
background-color: var(--fc-bg);
padding: 100px 0;
overflow: hidden;
transition: background-color 0.4s ease;
}
/* Header */
.founder-header {
margin-bottom: 56px;
}
.founder-subtitle {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 12px;
font-weight: 700;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--fc-accent);
margin-bottom: 16px;
}
.founder-subtitle i {
font-size: 13px;
}
.founder-main-title {
font-size: 40px;
font-weight: 800;
color: var(--fc-heading) !important;
line-height: 1.2;
font-family: "Plus Jakarta Sans", sans-serif;
letter-spacing: -0.3px;
}
@media (max-width: 768px) {
.founder-main-title { font-size: 28px; }
}
/* ---- Profile Card (Left) ---- */
.founder-profile-card {
background: var(--fc-card);
border: 1px solid var(--fc-card-border);
border-radius: 20px;
overflow: hidden;
transition: all 0.4s ease;
}
.founder-profile-card:hover {
box-shadow: 0 16px 48px rgba(0, 0, 0, 0.08);
transform: translateY(-4px);
}
:root[data-theme="dark"] .founder-profile-card:hover {
box-shadow: 0 16px 48px rgba(0, 0, 0, 0.3);
}
/* Photo */
.founder-photo-wrap {
position: relative;
width: 100%;
aspect-ratio: 4 / 3.5;
overflow: hidden;
background: var(--fc-bg-alt);
}
.founder-photo-wrap img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: top center;
transition: transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.founder-profile-card:hover .founder-photo-wrap img {
transform: scale(1.04);
}
.founder-photo-badge {
position: absolute;
bottom: 16px;
left: 16px;
display: inline-flex;
align-items: center;
gap: 6px;
background: rgba(11, 20, 38, 0.75);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
color: #fff;
font-size: 12px;
font-weight: 700;
padding: 8px 16px;
border-radius: 10px;
letter-spacing: 0.5px;
}
.founder-photo-badge i {
color: var(--fc-accent);
font-size: 11px;
}
/* Info */
.founder-info {
padding: 28px 24px 0;
}
.founder-name {
font-size: 22px;
font-weight: 800;
color: var(--fc-heading) !important;
margin-bottom: 4px;
font-family: "Plus Jakarta Sans", sans-serif;
}
.founder-role {
font-size: 11px;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--fc-accent) !important;
margin-bottom: 20px;
}
/* Meta (location, education) */
.founder-meta {
display: flex;
flex-direction: column;
gap: 10px;
margin-bottom: 20px;
}
.founder-meta-item {
display: flex;
align-items: center;
gap: 10px;
font-size: 13.5px;
color: var(--fc-text);
}
.founder-meta-item i {
font-size: 13px;
color: var(--fc-accent);
width: 16px;
text-align: center;
}
/* Bio */
.founder-bio {
font-size: 13.5px;
color: var(--fc-text-muted);
line-height: 1.75;
margin-bottom: 20px;
}
/* Email */
.founder-email {
display: flex;
align-items: center;
gap: 10px;
padding: 14px 0;
border-top: 1px solid var(--fc-card-border);
margin-bottom: 0;
}
.founder-email i {
color: var(--fc-accent);
font-size: 14px;
}
.founder-email a {
font-size: 13px;
font-weight: 600;
color: var(--fc-accent);
transition: color 0.3s ease;
}
.founder-email a:hover {
color: var(--fc-accent-2);
}
/* Stats */
.founder-stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
border-top: 1px solid var(--fc-card-border);
}
.founder-stat {
padding: 20px 12px;
text-align: center;
transition: background-color 0.3s ease;
}
.founder-stat:not(:last-child) {
border-right: 1px solid var(--fc-card-border);
}
.founder-stat:hover {
background: var(--fc-accent-glow);
}
.stat-number {
display: block;
font-size: 22px;
font-weight: 800;
color: var(--fc-heading) !important;
font-family: "Plus Jakarta Sans", sans-serif;
line-height: 1.2;
margin-bottom: 2px;
}
.stat-label {
display: block;
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.8px;
color: var(--fc-text-muted);
}
/* ---- Right Column ---- */
.founder-right {
display: flex;
flex-direction: column;
gap: 24px;
height: 100%;
}
/* Quote Block */
.founder-quote-block {
background: var(--fc-card);
border: 1px solid var(--fc-card-border);
border-left: 3px solid var(--fc-accent);
border-radius: 18px;
padding: 32px 32px 28px;
transition: all 0.4s ease;
}
.founder-quote-block:hover {
border-left-color: var(--fc-accent-2);
box-shadow: 0 8px 28px rgba(0, 0, 0, 0.05);
}
:root[data-theme="dark"] .founder-quote-block:hover {
box-shadow: 0 8px 28px rgba(0, 0, 0, 0.25);
}
.quote-icon {
margin-bottom: 16px;
}
.quote-icon i {
font-size: 28px;
color: var(--fc-accent);
opacity: 0.4;
}
.quote-text {
font-size: 17px;
font-style: italic;
color: var(--fc-heading) !important;
line-height: 1.7;
margin-bottom: 16px;
font-weight: 500;
}
.quote-author {
font-size: 12px;
font-weight: 700;
letter-spacing: 1.5px;
color: var(--fc-text-muted);
text-transform: uppercase;
}
/* Career CTA Block */
.founder-career-block {
background: var(--fc-card);
border: 1px solid var(--fc-card-border);
border-radius: 18px;
padding: 28px;
flex: 1;
display: flex;
flex-direction: column;
transition: all 0.4s ease;
}
.founder-career-block:hover {
box-shadow: 0 8px 28px rgba(0, 0, 0, 0.05);
}
:root[data-theme="dark"] .founder-career-block:hover {
box-shadow: 0 8px 28px rgba(0, 0, 0, 0.25);
}
/* CTA Head */
.career-cta-head {
display: flex;
align-items: flex-start;
gap: 16px;
margin-bottom: 24px;
padding-bottom: 20px;
border-bottom: 1px solid var(--fc-card-border);
}
.career-cta-icon {
width: 44px;
height: 44px;
min-width: 44px;
border-radius: 12px;
background: linear-gradient(135deg, var(--fc-accent), var(--fc-accent-2));
display: flex;
align-items: center;
justify-content: center;
}
.career-cta-icon i {
font-size: 18px;
color: #fff;
}
.career-cta-text h4 {
font-size: 15px;
font-weight: 800;
letter-spacing: 1px;
color: var(--fc-heading) !important;
margin-bottom: 6px;
font-family: "Plus Jakarta Sans", sans-serif;
}
.career-cta-text p {
font-size: 13px;
color: var(--fc-text-muted);
line-height: 1.6;
margin: 0;
}
/* Perks */
.career-perks {
display: flex;
flex-direction: column;
gap: 6px;
margin-bottom: 24px;
}
.career-perk {
display: flex;
align-items: center;
gap: 14px;
padding: 14px 16px;
border-radius: 12px;
border: 1px solid var(--fc-card-border);
transition: all 0.3s ease;
}
.career-perk:hover {
border-color: rgba(61, 191, 169, 0.2);
background: var(--fc-accent-glow);
transform: translateX(4px);
}
.perk-icon {
width: 36px;
height: 36px;
min-width: 36px;
border-radius: 10px;
background: var(--fc-accent-glow);
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
}
.perk-icon i {
font-size: 16px;
color: var(--fc-accent);
transition: color 0.3s ease;
}
.career-perk:hover .perk-icon {
background: linear-gradient(135deg, var(--fc-accent), var(--fc-accent-2));
}
.career-perk:hover .perk-icon i {
color: #fff;
}
.perk-content h5 {
font-size: 13px;
font-weight: 700;
letter-spacing: 0.5px;
color: var(--fc-heading) !important;
margin-bottom: 2px;
}
.perk-content p {
font-size: 12.5px;
color: var(--fc-text-muted);
margin: 0;
line-height: 1.5;
}
/* CTA Button in career block */
.founder-career-block .theme-btn {
align-self: flex-start;
margin-top: auto;
}
/* ---- Responsive ---- */
@media (max-width: 991px) {
.founder-right { gap: 20px; }
.founder-quote-block { padding: 24px; }
.founder-career-block { padding: 24px; }
}
/* =========== FOUNDER SECTION — EDITORIAL POLISH =========== */
/* Section becomes an editorial stage with ambient glows */
.founder-section { position: relative; }
.founder-bg-shape {
position: absolute;
border-radius: 50%;
filter: blur(120px);
pointer-events: none;
z-index: 0;
opacity: 0.55;
}
.founder-bg-shape-1 {
width: 520px;
height: 520px;
top: -160px;
left: -160px;
background: radial-gradient(circle, var(--fc-accent-glow), transparent 70%);
}
.founder-bg-shape-2 {
width: 440px;
height: 440px;
bottom: -180px;
right: -140px;
background: radial-gradient(circle, rgba(26,123,175,0.18), transparent 70%);
}
.founder-section .container { position: relative; z-index: 1; }
/* Header: add a subtitle flourish and a short tagline */
.founder-subtitle {
gap: 12px;
}
.founder-subtitle-line {
display: inline-block;
width: 28px;
height: 1px;
background: linear-gradient(90deg, transparent, var(--fc-accent));
}
.founder-subtitle-line + i + * + .founder-subtitle-line,
.founder-subtitle .founder-subtitle-line:last-child {
background: linear-gradient(90deg, var(--fc-accent), transparent);
}
.founder-main-sub {
margin: 14px auto 0;
max-width: 560px;
font-size: 15.5px;
line-height: 1.7;
color: var(--fc-text-muted);
}
/* Profile card — add edition number, refined frame, softer lift */
.founder-profile-card {
position: relative;
box-shadow: 0 4px 24px rgba(0,0,0,0.04);
}
:root[data-theme="dark"] .founder-profile-card {
box-shadow: 0 4px 24px rgba(0,0,0,0.25);
}
.founder-card-index {
position: absolute;
top: 14px;
right: 16px;
z-index: 2;
font-family: "Plus Jakarta Sans", sans-serif;
font-size: 11px;
font-weight: 800;
letter-spacing: 2px;
color: #ffffff;
padding: 6px 10px;
border-radius: 6px;
background: rgba(11, 20, 38, 0.55);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255,255,255,0.12);
}
/* Photo: inner accent frame + top gradient wash */
.founder-photo-wrap::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(11,20,38,0.15) 0%, transparent 30%, transparent 55%, rgba(11,20,38,0.55) 100%);
pointer-events: none;
}
.founder-photo-frame {
position: absolute;
inset: 12px;
border: 1px solid rgba(255,255,255,0.18);
border-radius: 12px;
pointer-events: none;
transition: border-color 0.4s ease;
}
.founder-profile-card:hover .founder-photo-frame {
border-color: rgba(61,191,169,0.55);
}
/* Bio — second paragraph slightly lighter */
.founder-bio { margin-bottom: 14px; }
.founder-bio:last-of-type { margin-bottom: 20px; }
.founder-bio strong {
color: var(--fc-heading);
font-weight: 700;
background: linear-gradient(120deg, transparent 0%, var(--fc-accent-glow) 0%);
padding: 0 3px;
border-radius: 3px;
}
.founder-bio-alt { opacity: 0.92; }
/* Stats — upgrade to gradient numerals */
.stat-number {
background: linear-gradient(120deg, var(--fc-accent), var(--fc-accent-2));
-webkit-background-clip: text;
background-clip: text;
color: transparent !important;
letter-spacing: -0.3px;
}
/* Quote block — magazine-style treatment */
.founder-quote-block {
position: relative;
overflow: hidden;
border-left: none;
padding: 44px 36px 32px;
background:
linear-gradient(135deg, var(--fc-accent-glow), transparent 55%),
var(--fc-card);
}
.founder-quote-block::before {
content: "";
position: absolute;
left: 0; top: 0; bottom: 0;
width: 4px;
background: linear-gradient(180deg, var(--fc-accent), var(--fc-accent-2));
}
.founder-quote-block:hover { border-left: none; }
.founder-quote-mark {
position: absolute;
top: -18px;
right: 22px;
font-family: Georgia, "Times New Roman", serif;
font-size: 180px;
line-height: 1;
color: var(--fc-accent);
opacity: 0.12;
pointer-events: none;
user-select: none;
}
.founder-quote-accent {
position: absolute;
top: 24px;
right: 24px;
width: 42px;
height: 42px;
border-radius: 50%;
background:
radial-gradient(circle at 30% 30%, rgba(61,191,169,0.35), transparent 70%),
linear-gradient(135deg, rgba(61,191,169,0.18), rgba(26,123,175,0.18));
border: 1px solid rgba(61,191,169,0.28);
backdrop-filter: blur(8px);
}
.founder-quote-accent::after {
content: "";
position: absolute;
inset: 10px;
border-radius: 50%;
border: 1px dashed rgba(61,191,169,0.5);
animation: founderQuoteSpin 18s linear infinite;
}
@keyframes founderQuoteSpin {
to { transform: rotate(360deg); }
}
.quote-icon {
position: relative;
z-index: 1;
margin-bottom: 18px;
}
.quote-icon i {
font-size: 22px;
opacity: 1;
background: linear-gradient(135deg, var(--fc-accent), var(--fc-accent-2));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.quote-text {
position: relative;
z-index: 1;
font-family: "Plus Jakarta Sans", sans-serif;
font-size: 20px;
line-height: 1.55;
font-weight: 600;
font-style: normal;
letter-spacing: -0.2px;
margin-bottom: 22px;
color: var(--fc-heading) !important;
}
.quote-divider {
display: flex;
align-items: center;
gap: 10px;
margin: 0 0 16px;
}
.quote-divider-line {
flex: 0 0 36px;
height: 1px;
background: linear-gradient(90deg, var(--fc-accent), transparent);
}
.quote-divider-line:last-child {
background: linear-gradient(90deg, transparent, var(--fc-card-border));
flex: 1;
}
.quote-divider-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--fc-accent);
box-shadow: 0 0 0 4px var(--fc-accent-glow);
}
.quote-signature {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
gap: 2px;
}
.quote-signature-name {
font-family: "Caveat", "Brush Script MT", "Segoe Script", cursive;
font-size: 28px;
font-weight: 500;
line-height: 1;
color: var(--fc-heading);
letter-spacing: 0.3px;
}
.quote-signature .quote-author {
font-size: 11.5px;
letter-spacing: 1.6px;
text-transform: uppercase;
color: var(--fc-text-muted);
font-weight: 700;
}
/* ---- Founder section — responsive for editorial polish ---- */
@media (max-width: 991px) {
.founder-bg-shape-1,
.founder-bg-shape-2 { opacity: 0.35; }
.founder-quote-block { padding: 36px 28px 28px; }
.founder-quote-mark { font-size: 140px; top: -10px; right: 14px; }
.quote-text { font-size: 18px; }
.quote-signature-name { font-size: 26px; }
}
@media (max-width: 575px) {
.founder-card-index { font-size: 10px; padding: 5px 8px; top: 12px; right: 12px; }
.founder-photo-frame { inset: 10px; }
.founder-quote-block { padding: 30px 22px 24px; }
.founder-quote-mark { font-size: 110px; right: 10px; }
.founder-quote-accent { width: 34px; height: 34px; top: 16px; right: 16px; }
.quote-text { font-size: 16.5px; }
.quote-signature-name { font-size: 24px; }
.founder-main-sub { font-size: 14.5px; }
}
@media (prefers-reduced-motion: reduce) {
.founder-quote-accent::after { animation: none !important; }
}
/* Light-theme refinements so glass/overlays still read clean */
[data-theme="light"] .founder-card-index {
background: rgba(255,255,255,0.85);
color: var(--fc-heading);
border: 1px solid var(--fc-card-border);
}
[data-theme="light"] .founder-photo-frame {
border-color: rgba(255,255,255,0.55);
}
[data-theme="light"] .founder-quote-block {
background:
linear-gradient(135deg, var(--fc-accent-glow), transparent 55%),
#ffffff;
box-shadow: 0 10px 30px rgba(30,45,90,0.06);
}
[data-theme="light"] .founder-bio strong {
background: linear-gradient(120deg, rgba(61,191,169,0.18), rgba(26,123,175,0.10));
}
/* =========== SERVICES GRID SECTION =========== */
/* =====================================================
OUR SERVICES — Rich Premium Design
===================================================== */
.services-grid-section {
background-color: var(--fc-bg);
padding: 120px 0;
overflow: hidden;
transition: background-color 0.4s ease;
position: relative;
}
/* Section background decorations */
.svc-sec-glow {
position: absolute;
border-radius: 50%;
pointer-events: none;
filter: blur(120px);
z-index: 0;
}
.svc-sec-glow-1 {
width: 500px; height: 500px;
top: -10%; left: -8%;
background: radial-gradient(circle, rgba(61,191,169,0.10) 0%, transparent 70%);
animation: wfcOrb2 16s ease-in-out infinite;
}
.svc-sec-glow-2 {
width: 400px; height: 400px;
bottom: -8%; right: -6%;
background: radial-gradient(circle, rgba(155,108,247,0.07) 0%, transparent 70%);
animation: wfcOrb1 20s ease-in-out infinite;
}
.svc-sec-grid-bg {
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(61,191,169,0.02) 1px, transparent 1px),
linear-gradient(90deg, rgba(61,191,169,0.02) 1px, transparent 1px);
background-size: 70px 70px;
pointer-events: none;
z-index: 0;
mask-image: radial-gradient(ellipse 60% 50% at 50% 50%, black 0%, transparent 100%);
-webkit-mask-image: radial-gradient(ellipse 60% 50% at 50% 50%, black 0%, transparent 100%);
}
/* Header */
.services-grid-header {
margin-bottom: 60px;
}
.services-grid-subtitle {
display: inline-flex;
align-items: center;
gap: 10px;
font-size: 12px;
font-weight: 700;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--fc-accent);
margin-bottom: 20px;
}
.svc-badge-dot {
width: 8px; height: 8px;
border-radius: 50%;
background: var(--fc-accent, #3DBFA9);
display: inline-block;
box-shadow: 0 0 8px rgba(61,191,169,0.5);
animation: wfcDotPulse 2s ease-in-out infinite;
}
.services-grid-title {
font-size: 48px;
font-weight: 800;
color: var(--fc-heading) !important;
line-height: 1.15;
margin-bottom: 18px;
font-family: "Plus Jakarta Sans", sans-serif;
letter-spacing: -0.8px;
}
.svc-title-highlight {
position: relative;
display: inline;
}
.svc-title-highlight::after {
content: '';
position: absolute;
left: 0; bottom: 4px;
width: 100%; height: 6px;
background: linear-gradient(90deg, var(--fc-accent, #3DBFA9), var(--fc-accent-2, #1A7BAF));
border-radius: 3px;
opacity: 0.30;
}
.services-grid-desc {
font-size: 17px;
color: var(--fc-text-muted);
max-width: 600px;
margin: 0 auto;
line-height: 1.75;
}
/* Grid */
.services-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
/* Single Card */
.svc-card {
background: rgba(255,255,255,0.025);
border: 1px solid rgba(255,255,255,0.06);
border-radius: 22px;
padding: 38px 32px 34px;
position: relative;
overflow: hidden;
transition: all 0.45s cubic-bezier(0.25, 0.8, 0.25, 1);
opacity: 0;
transform: translateY(24px);
animation: svcFadeIn 0.5s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;
}
.svc-card:nth-child(1) { animation-delay: 0.05s; }
.svc-card:nth-child(2) { animation-delay: 0.10s; }
.svc-card:nth-child(3) { animation-delay: 0.15s; }
.svc-card:nth-child(4) { animation-delay: 0.20s; }
.svc-card:nth-child(5) { animation-delay: 0.25s; }
.svc-card:nth-child(6) { animation-delay: 0.30s; }
@keyframes svcFadeIn {
to { opacity: 1; transform: translateY(0); }
}
/* Number watermark */
.svc-card-num {
position: absolute;
top: 14px; right: 20px;
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 56px;
font-weight: 900;
color: rgba(255,255,255,0.02);
line-height: 1;
pointer-events: none;
z-index: 0;
transition: color 0.4s ease;
}
.svc-card:hover .svc-card-num {
color: rgba(61,191,169,0.06);
}
/* Top accent bar */
.svc-card-accent {
position: absolute;
top: 0; left: 0;
width: 0; height: 3px;
background: linear-gradient(90deg, var(--fc-accent, #3DBFA9), var(--fc-accent-2, #1A7BAF));
transition: width 0.5s cubic-bezier(0.25,0.8,0.25,1);
border-radius: 0 0 3px 0;
z-index: 2;
}
.svc-card:hover .svc-card-accent {
width: 100%;
}
/* Background glow per card */
.svc-card-glow {
position: absolute;
bottom: -50px; right: -50px;
width: 160px; height: 160px;
border-radius: 50%;
filter: blur(50px);
opacity: 0;
transition: opacity 0.5s ease;
pointer-events: none;
z-index: 0;
}
.svc-card:hover .svc-card-glow { opacity: 1; }
.svc-card-glow-teal { background: rgba(61,191,169,0.12); }
.svc-card-glow-blue { background: rgba(26,123,175,0.12); }
.svc-card-glow-purple { background: rgba(155,108,247,0.12); }
.svc-card-glow-orange { background: rgba(245,158,11,0.10); }
.svc-card-glow-green { background: rgba(16,185,129,0.12); }
.svc-card-glow-pink { background: rgba(236,72,153,0.10); }
/* Hover */
.svc-card:hover {
transform: translateY(-7px);
border-color: rgba(61,191,169,0.20);
box-shadow:
0 24px 70px rgba(0,0,0,0.20),
0 0 0 1px rgba(61,191,169,0.06);
}
/* Icon */
.svc-icon-box {
width: 54px;
height: 54px;
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 22px;
transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
position: relative;
z-index: 1;
}
.svc-icon-box i {
font-size: 22px;
color: #fff;
transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.svc-card:hover .svc-icon-box {
transform: scale(1.10) rotate(-4deg);
}
/* Icon color variants */
.svc-icon-teal {
background: linear-gradient(135deg, #3DBFA9, #2a9d8f);
box-shadow: 0 8px 24px rgba(61,191,169,0.25);
}
.svc-icon-blue {
background: linear-gradient(135deg, #1A7BAF, #1565a0);
box-shadow: 0 8px 24px rgba(26,123,175,0.25);
}
.svc-icon-purple {
background: linear-gradient(135deg, #9B6CF7, #7c5ce0);
box-shadow: 0 8px 24px rgba(155,108,247,0.25);
}
.svc-icon-orange {
background: linear-gradient(135deg, #F59E0B, #D97706);
box-shadow: 0 8px 24px rgba(245,158,11,0.25);
}
.svc-icon-green {
background: linear-gradient(135deg, #10B981, #059669);
box-shadow: 0 8px 24px rgba(16,185,129,0.25);
}
.svc-icon-pink {
background: linear-gradient(135deg, #EC4899, #BE185D);
box-shadow: 0 8px 24px rgba(236,72,153,0.25);
}
/* Title */
.svc-title {
font-size: 18px;
font-weight: 700;
color: var(--fc-heading) !important;
margin-bottom: 10px;
font-family: "Plus Jakarta Sans", sans-serif;
transition: color 0.3s ease;
position: relative;
z-index: 1;
}
.svc-card:hover .svc-title {
color: var(--fc-accent) !important;
}
/* Description */
.svc-desc {
font-size: 14px;
color: var(--fc-text-muted);
line-height: 1.75;
margin-bottom: 0;
position: relative;
z-index: 1;
}
/* ---- Light Theme ---- */
[data-theme="light"] .services-grid-section {
background: linear-gradient(180deg, #ffffff 0%, #f5fafe 50%, #f0f7fa 100%);
}
[data-theme="light"] .svc-sec-glow-1 {
background: radial-gradient(circle, rgba(61,191,169,0.06) 0%, transparent 70%);
}
[data-theme="light"] .svc-sec-glow-2 {
background: radial-gradient(circle, rgba(155,108,247,0.04) 0%, transparent 70%);
}
[data-theme="light"] .svc-sec-grid-bg {
background-image:
linear-gradient(rgba(30,45,90,0.025) 1px, transparent 1px),
linear-gradient(90deg, rgba(30,45,90,0.025) 1px, transparent 1px);
}
[data-theme="light"] .svc-title-highlight::after {
opacity: 0.22;
}
[data-theme="light"] .svc-card {
background: #ffffff;
border-color: rgba(30,45,90,0.07);
box-shadow: 0 2px 16px rgba(30,45,90,0.04);
}
[data-theme="light"] .svc-card:hover {
background: #ffffff;
border-color: rgba(61,191,169,0.25);
box-shadow: 0 20px 56px rgba(30,45,90,0.10), 0 0 0 1px rgba(61,191,169,0.08);
}
[data-theme="light"] .svc-card-num {
color: rgba(30,45,90,0.035);
}
[data-theme="light"] .svc-card:hover .svc-card-num {
color: rgba(61,191,169,0.07);
}
[data-theme="light"] .svc-card-glow-teal { background: rgba(61,191,169,0.06); }
[data-theme="light"] .svc-card-glow-blue { background: rgba(26,123,175,0.06); }
[data-theme="light"] .svc-card-glow-purple { background: rgba(155,108,247,0.06); }
[data-theme="light"] .svc-card-glow-orange { background: rgba(245,158,11,0.05); }
[data-theme="light"] .svc-card-glow-green { background: rgba(16,185,129,0.06); }
[data-theme="light"] .svc-card-glow-pink { background: rgba(236,72,153,0.05); }
/* ---- Responsive ---- */
@media (max-width: 991px) {
.services-grid { grid-template-columns: repeat(2, 1fr); }
.services-grid-title { font-size: 40px; }
}
@media (max-width: 768px) {
.services-grid-section { padding: 80px 0; }
.services-grid-title { font-size: 34px; }
.services-grid-header { margin-bottom: 44px; }
.services-grid { gap: 16px; }
}
@media (max-width: 575px) {
.services-grid { grid-template-columns: 1fr; }
.services-grid-title { font-size: 28px; }
.svc-card { padding: 30px 26px 28px; border-radius: 18px; }
.svc-card-num { font-size: 44px; }
}
/* =========== MARQUEE BETWEEN SECTIONS =========== */
.marquee-between {
padding: 0;
margin: 0;
overflow: hidden;
}
.marquee-between .marquee {
margin-bottom: 0;
padding: 24px 0;
background: var(--fc-bg-alt);
border-top: 1px solid var(--fc-card-border);
border-bottom: 1px solid var(--fc-card-border);
display: flex;
overflow: hidden;
white-space: nowrap;
}
.marquee-between .marquee .marquee-group {
display: flex;
align-items: center;
flex-shrink: 0;
gap: 40px;
padding: 0 20px;
animation: fcMarqueeScroll 25s linear infinite;
}
@keyframes fcMarqueeScroll {
0% { transform: translateX(0); }
100% { transform: translateX(-100%); }
}
.marquee-between .marquee .text {
color: var(--fc-heading);
font-size: 20px;
font-weight: 700;
display: inline-flex;
align-items: center;
gap: 12px;
letter-spacing: 1px;
text-transform: uppercase;
font-family: "Plus Jakarta Sans", sans-serif;
opacity: 0.7;
transition: opacity 0.3s ease;
white-space: nowrap;
flex-shrink: 0;
}
.marquee-between .marquee .text:hover {
opacity: 1;
}
.marquee-between .marquee .text i {
font-size: 10px;
color: var(--fc-accent);
opacity: 0.6;
}
.marquee-between .marquee .text img {
display: none;
}
/* Dark mode */
:root[data-theme="dark"] .marquee-between .marquee {
background: var(--fc-bg-alt);
border-color: var(--fc-card-border);
}
:root[data-theme="dark"] .marquee-between .marquee .text {
color: var(--fc-heading);
opacity: 0.5;
}
:root[data-theme="dark"] .marquee-between .marquee .text:hover {
opacity: 0.85;
}
@media (max-width: 1199px) {
.marquee-between .marquee .text { font-size: 18px; }
.marquee-between .marquee .marquee-group { gap: 30px; }
}
@media (max-width: 575px) {
.marquee-between .marquee .text { font-size: 16px; }
.marquee-between .marquee .marquee-group { gap: 24px; }
}
/* =========== VALUES SECTION =========== */
/* =====================================================
OUR VALUES — Asymmetric Bento with Side Stripes
===================================================== */
/* ---- Section ---- */
.ov {
background: linear-gradient(170deg, #060d1b 0%, #0b1120 50%, #0a1628 100%);
padding: 130px 0;
position: relative;
overflow: hidden;
transition: background 0.4s ease;
}
/* Giant background text */
.ov-bg-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: clamp(160px, 18vw, 320px);
font-weight: 900;
letter-spacing: 20px;
text-transform: uppercase;
color: rgba(255,255,255,0.015);
white-space: nowrap;
pointer-events: none;
z-index: 0;
user-select: none;
}
/* Diagonal gradient strip */
.ov-diagonal {
position: absolute;
top: -40%; left: -10%;
width: 120%;
height: 200%;
background: linear-gradient(135deg, transparent 42%, rgba(61,191,169,0.025) 43%, rgba(61,191,169,0.025) 44%, transparent 45%);
pointer-events: none;
z-index: 0;
}
/* ========== Centered Header ========== */
.ov-header {
text-align: center;
margin-bottom: 70px;
position: relative;
z-index: 1;
}
/* Tag with lines */
.ov-tag {
display: inline-flex;
align-items: center;
gap: 16px;
font-size: 12px;
font-weight: 700;
letter-spacing: 4px;
text-transform: uppercase;
color: var(--fc-accent, #3DBFA9);
margin-bottom: 24px;
}
.ov-tag-line {
display: inline-block;
width: 40px;
height: 1px;
background: linear-gradient(90deg, transparent, var(--fc-accent, #3DBFA9));
}
.ov-tag-line:last-child {
background: linear-gradient(90deg, var(--fc-accent, #3DBFA9), transparent);
}
/* Heading */
.ov-heading {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 50px;
font-weight: 800;
line-height: 1.12;
letter-spacing: -1px;
color: var(--fc-heading, #fff) !important;
margin: 0 0 20px;
}
/* Description */
.ov-desc {
font-size: 17px;
line-height: 1.75;
color: var(--fc-text-muted, rgba(255,255,255,0.50));
max-width: 580px;
margin: 0 auto;
}
/* ========== Asymmetric Bento Grid ========== */
.ov-bento {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: auto auto;
gap: 20px;
position: relative;
z-index: 1;
}
/* Hero card — spans col 1 and 2 rows */
.ov-card-hero {
grid-column: 1;
grid-row: 1 / 3;
}
/* ---- Base Card ---- */
.ov-card {
background: rgba(255,255,255,0.025);
border: 1px solid rgba(255,255,255,0.06);
border-radius: 22px;
padding: 34px 30px 30px;
position: relative;
overflow: hidden;
transition: all 0.45s cubic-bezier(0.25,0.8,0.25,1);
opacity: 0;
transform: translateY(20px);
animation: ovIn 0.55s cubic-bezier(0.25,0.8,0.25,1) forwards;
}
.ov-card:nth-child(1) { animation-delay: 0.05s; }
.ov-card:nth-child(2) { animation-delay: 0.12s; }
.ov-card:nth-child(3) { animation-delay: 0.19s; }
.ov-card:nth-child(4) { animation-delay: 0.26s; }
.ov-card:nth-child(5) { animation-delay: 0.33s; }
.ov-card:nth-child(6) { animation-delay: 0.40s; }
@keyframes ovIn {
to { opacity: 1; transform: translateY(0); }
}
/* Left side colored stripe */
.ov-card-stripe {
position: absolute;
top: 20%; left: 0;
width: 3px;
height: 0;
border-radius: 0 3px 3px 0;
transition: height 0.5s cubic-bezier(0.25,0.8,0.25,1), top 0.5s cubic-bezier(0.25,0.8,0.25,1);
z-index: 2;
}
.ov-card:hover .ov-card-stripe {
height: 60%;
top: 20%;
}
.ov-stripe-teal { background: linear-gradient(180deg, #3DBFA9, #2a9d8f); }
.ov-stripe-blue { background: linear-gradient(180deg, #1A7BAF, #1565a0); }
.ov-stripe-purple { background: linear-gradient(180deg, #9B6CF7, #7c5ce0); }
.ov-stripe-orange { background: linear-gradient(180deg, #F59E0B, #D97706); }
.ov-stripe-green { background: linear-gradient(180deg, #10B981, #059669); }
/* Number */
.ov-num {
display: inline-block;
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 13px;
font-weight: 800;
color: var(--fc-accent, #3DBFA9);
background: rgba(61,191,169,0.08);
border: 1px solid rgba(61,191,169,0.15);
width: 36px; height: 36px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 20px;
transition: all 0.4s ease;
position: relative;
z-index: 1;
}
.ov-card:hover .ov-num {
background: var(--fc-accent, #3DBFA9);
color: #fff;
border-color: var(--fc-accent, #3DBFA9);
transform: scale(1.08);
box-shadow: 0 6px 20px rgba(61,191,169,0.25);
}
/* Icon circle */
.ov-icon-circle {
width: 56px; height: 56px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 22px;
transition: all 0.4s cubic-bezier(0.25,0.8,0.25,1);
position: relative;
z-index: 1;
}
.ov-card:hover .ov-icon-circle {
transform: scale(1.12);
}
.ov-icon-circle i { font-size: 22px; color: #fff; }
/* Icon variants */
.ov-ic-teal { background: linear-gradient(135deg, #3DBFA9, #2a9d8f); box-shadow: 0 8px 28px rgba(61,191,169,0.30); }
.ov-ic-blue { background: linear-gradient(135deg, #1A7BAF, #1565a0); box-shadow: 0 8px 28px rgba(26,123,175,0.30); }
.ov-ic-purple { background: linear-gradient(135deg, #9B6CF7, #7c5ce0); box-shadow: 0 8px 28px rgba(155,108,247,0.30); }
.ov-ic-orange { background: linear-gradient(135deg, #F59E0B, #D97706); box-shadow: 0 8px 28px rgba(245,158,11,0.30); }
.ov-ic-green { background: linear-gradient(135deg, #10B981, #059669); box-shadow: 0 8px 28px rgba(16,185,129,0.30); }
/* Card text */
.ov-card h4 {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 18px;
font-weight: 700;
color: var(--fc-heading, #fff) !important;
margin: 0 0 10px;
transition: color 0.3s ease;
position: relative; z-index: 1;
}
.ov-card:hover h4 { color: var(--fc-accent, #3DBFA9) !important; }
.ov-card p {
font-size: 14px;
line-height: 1.7;
color: var(--fc-text-muted, rgba(255,255,255,0.45));
margin: 0;
position: relative; z-index: 1;
}
/* Hover */
.ov-card:hover {
transform: translateY(-6px);
border-color: rgba(61,191,169,0.18);
box-shadow: 0 20px 60px rgba(0,0,0,0.22), 0 0 0 1px rgba(61,191,169,0.06);
}
/* ===== Hero Card (card 1 — tall left) ===== */
.ov-card-hero {
background: linear-gradient(160deg, #0d1a33 0%, #0c1a30 50%, #081428 100%);
border: 1px solid rgba(61,191,169,0.12);
padding: 40px 36px 38px;
display: flex;
flex-direction: column;
box-shadow:
0 30px 80px rgba(0,0,0,0.30),
inset 0 1px 0 rgba(255,255,255,0.04);
}
.ov-card-hero:hover {
border-color: rgba(61,191,169,0.30);
box-shadow: 0 30px 90px rgba(0,0,0,0.35), 0 0 40px rgba(61,191,169,0.06);
}
.ov-hero-bg {
position: absolute;
top: -100px; right: -100px;
width: 300px; height: 300px;
background: radial-gradient(circle, rgba(61,191,169,0.10) 0%, transparent 70%);
pointer-events: none;
}
.ov-hero-content {
position: relative;
z-index: 1;
flex: 1;
display: flex;
flex-direction: column;
}
.ov-card-hero h3 {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 26px;
font-weight: 800;
color: #fff !important;
margin: 0 0 14px;
}
.ov-card-hero:hover h3 {
color: var(--fc-accent, #3DBFA9) !important;
}
.ov-card-hero p {
font-size: 15px;
line-height: 1.75;
color: rgba(255,255,255,0.50);
margin: 0;
}
/* Quote block inside hero */
.ov-hero-quote {
margin-top: auto;
padding-top: 28px;
display: flex;
align-items: flex-start;
gap: 14px;
border-top: 1px solid rgba(255,255,255,0.06);
margin-top: 30px;
padding-top: 24px;
}
.ov-hero-quote i {
font-size: 18px;
color: var(--fc-accent, #3DBFA9);
opacity: 0.5;
flex-shrink: 0;
margin-top: 2px;
}
.ov-hero-quote span {
font-size: 15px;
font-style: italic;
line-height: 1.65;
color: rgba(255,255,255,0.60);
font-weight: 500;
}
/* ==========================================================
OUR VALUES — LIGHT THEME
========================================================== */
[data-theme="light"] .ov {
background: linear-gradient(170deg, #eef5f9 0%, #f7fbfe 40%, #ffffff 100%);
}
[data-theme="light"] .ov-bg-text {
color: rgba(30,45,90,0.025);
}
[data-theme="light"] .ov-diagonal {
background: linear-gradient(135deg, transparent 42%, rgba(61,191,169,0.025) 43%, rgba(61,191,169,0.025) 44%, transparent 45%);
}
/* Header */
[data-theme="light"] .ov-tag-line {
background: linear-gradient(90deg, transparent, rgba(61,191,169,0.5));
}
[data-theme="light"] .ov-tag-line:last-child {
background: linear-gradient(90deg, rgba(61,191,169,0.5), transparent);
}
/* Cards */
[data-theme="light"] .ov-card {
background: #ffffff;
border-color: rgba(30,45,90,0.07);
box-shadow: 0 2px 16px rgba(30,45,90,0.04);
}
[data-theme="light"] .ov-card:hover {
background: #ffffff;
border-color: rgba(61,191,169,0.22);
box-shadow: 0 16px 50px rgba(30,45,90,0.10), 0 0 0 1px rgba(61,191,169,0.08);
}
[data-theme="light"] .ov-num {
background: rgba(61,191,169,0.08);
border-color: rgba(61,191,169,0.18);
color: #2a9d8f;
}
[data-theme="light"] .ov-card:hover .ov-num {
background: var(--fc-accent, #3DBFA9);
color: #fff;
border-color: var(--fc-accent, #3DBFA9);
}
/* Hero card stays dark */
[data-theme="light"] .ov-card.ov-card-hero {
background: linear-gradient(160deg, #1a2d52 0%, #162544 50%, #112040 100%) !important;
border-color: rgba(61,191,169,0.15) !important;
box-shadow: 0 24px 70px rgba(30,45,90,0.20);
}
[data-theme="light"] .ov-card.ov-card-hero:hover {
background: linear-gradient(160deg, #1a2d52 0%, #162544 50%, #112040 100%) !important;
border-color: rgba(61,191,169,0.35) !important;
box-shadow: 0 30px 80px rgba(30,45,90,0.25), 0 0 30px rgba(61,191,169,0.06);
}
[data-theme="light"] .ov-card-hero h3 { color: #fff !important; }
[data-theme="light"] .ov-card-hero:hover h3 { color: var(--fc-accent, #3DBFA9) !important; }
[data-theme="light"] .ov-card-hero p { color: rgba(255,255,255,0.55) !important; }
[data-theme="light"] .ov-hero-quote span { color: rgba(255,255,255,0.60) !important; }
[data-theme="light"] .ov-hero-quote i { color: var(--fc-accent, #3DBFA9); }
[data-theme="light"] .ov-card-hero .ov-num {
background: rgba(61,191,169,0.12);
border-color: rgba(61,191,169,0.22);
color: var(--fc-accent, #3DBFA9);
}
[data-theme="light"] .ov-card-hero:hover .ov-num {
background: var(--fc-accent, #3DBFA9);
color: #fff;
}
/* ---- Responsive ---- */
@media (max-width: 1024px) {
.ov-heading { font-size: 42px; }
.ov-bento {
grid-template-columns: 1fr 1fr;
grid-template-rows: auto;
}
.ov-card-hero {
grid-column: 1 / -1;
grid-row: auto;
}
}
@media (max-width: 768px) {
.ov { padding: 80px 0; }
.ov-heading { font-size: 34px; }
.ov-header { margin-bottom: 50px; }
.ov-bento { grid-template-columns: 1fr; }
.ov-card-hero { padding: 34px 28px 32px; }
.ov-card-hero h3 { font-size: 22px; }
.ov-bg-text { font-size: 100px; letter-spacing: 10px; }
}
@media (max-width: 480px) {
.ov-heading { font-size: 28px; }
.ov-card { padding: 28px 24px 26px; border-radius: 18px; }
.ov-bg-text { font-size: 70px; }
.ov-tag-line { width: 24px; }
}
/* ---- end values ---- */
/* =====================================================
WHY FLOWSTATE CREATIVE — Rich Premium Design
===================================================== */
/* ---- Section Shell ---- */
.wfc {
background: var(--fc-bg, #0b1120);
padding: 120px 0;
position: relative;
overflow: hidden;
transition: background 0.4s ease;
}
/* Background grid pattern */
.wfc-grid-bg {
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(61,191,169,0.025) 1px, transparent 1px),
linear-gradient(90deg, rgba(61,191,169,0.025) 1px, transparent 1px);
background-size: 70px 70px;
pointer-events: none;
z-index: 0;
mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, black 0%, transparent 100%);
-webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, black 0%, transparent 100%);
}
/* Ambient glows */
.wfc-glow {
position: absolute;
border-radius: 50%;
pointer-events: none;
filter: blur(120px);
z-index: 0;
}
.wfc-glow-1 {
width: 600px; height: 600px;
top: -12%; right: -8%;
background: radial-gradient(circle, rgba(61,191,169,0.14) 0%, transparent 70%);
animation: wfcOrb1 14s ease-in-out infinite;
}
.wfc-glow-2 {
width: 450px; height: 450px;
bottom: -8%; left: -6%;
background: radial-gradient(circle, rgba(26,123,175,0.10) 0%, transparent 70%);
animation: wfcOrb2 18s ease-in-out infinite;
}
.wfc-glow-3 {
width: 350px; height: 350px;
top: 50%; left: 40%;
background: radial-gradient(circle, rgba(155,108,247,0.06) 0%, transparent 70%);
animation: wfcOrb3 20s ease-in-out infinite;
}
@keyframes wfcOrb1 {
0%,100% { transform: translate(0,0) scale(1); }
50% { transform: translate(-30px,40px) scale(1.08); }
}
@keyframes wfcOrb2 {
0%,100% { transform: translate(0,0) scale(1); }
50% { transform: translate(35px,-25px) scale(1.06); }
}
@keyframes wfcOrb3 {
0%,100% { transform: translate(0,0) scale(1); }
50% { transform: translate(-20px,30px) scale(1.12); }
}
/* ========== ROW 1 — Header + Image ========== */
.wfc-top {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: center;
margin-bottom: 70px;
}
.wfc-top-text {
padding-right: 10px;
}
/* Badge */
.wfc-badge {
display: inline-flex;
align-items: center;
gap: 10px;
font-size: 12px;
font-weight: 700;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--fc-accent, #3DBFA9);
margin-bottom: 22px;
}
.wfc-badge-dot {
width: 8px; height: 8px;
border-radius: 50%;
background: var(--fc-accent, #3DBFA9);
display: inline-block;
box-shadow: 0 0 8px rgba(61,191,169,0.5);
animation: wfcDotPulse 2s ease-in-out infinite;
}
@keyframes wfcDotPulse {
0%,100% { opacity: 1; transform: scale(1); box-shadow: 0 0 8px rgba(61,191,169,0.5); }
50% { opacity: .6; transform: scale(1.5); box-shadow: 0 0 16px rgba(61,191,169,0.3); }
}
/* Title */
.wfc-title {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 48px;
font-weight: 800;
line-height: 1.12;
letter-spacing: -0.8px;
color: var(--fc-heading, #fff) !important;
margin: 0 0 22px;
}
.wfc-title-highlight {
position: relative;
display: inline;
}
.wfc-title-highlight::after {
content: '';
position: absolute;
left: 0; bottom: 2px;
width: 100%; height: 6px;
background: linear-gradient(90deg, var(--fc-accent, #3DBFA9), var(--fc-accent-2, #1A7BAF));
border-radius: 3px;
opacity: 0.35;
}
/* Subtitle */
.wfc-subtitle {
font-size: 17px;
line-height: 1.75;
color: var(--fc-text-muted, rgba(255,255,255,0.55));
max-width: 500px;
margin: 0 0 24px;
}
/* Mini pills */
.wfc-mini-pills {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.wfc-pill {
display: inline-flex;
align-items: center;
gap: 7px;
font-size: 12px;
font-weight: 600;
color: var(--fc-accent, #3DBFA9);
background: rgba(61,191,169,0.08);
border: 1px solid rgba(61,191,169,0.15);
padding: 7px 16px;
border-radius: 50px;
letter-spacing: 0.3px;
transition: all 0.3s ease;
}
.wfc-pill:hover {
background: rgba(61,191,169,0.14);
border-color: rgba(61,191,169,0.30);
transform: translateY(-2px);
}
.wfc-pill i {
font-size: 10px;
}
/* ---- Image Panel ---- */
.wfc-top-image {
position: relative;
}
/* Decorative ring */
.wfc-img-ring {
position: absolute;
top: -15px; right: -15px;
width: calc(100% + 10px);
height: calc(100% + 10px);
border: 2px dashed rgba(61,191,169,0.12);
border-radius: 28px;
pointer-events: none;
z-index: 0;
animation: wfcRingSpin 40s linear infinite;
}
@keyframes wfcRingSpin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.wfc-img-wrap {
position: relative;
border-radius: 22px;
overflow: hidden;
box-shadow:
0 30px 80px rgba(0,0,0,0.30),
0 0 0 1px rgba(61,191,169,0.08);
z-index: 1;
}
.wfc-img-wrap img {
width: 100%;
height: 400px;
object-fit: cover;
display: block;
transition: transform 8s cubic-bezier(0.25,0.8,0.25,1);
}
.wfc-img-wrap:hover img {
transform: scale(1.06);
}
.wfc-img-overlay {
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(6,13,27,0.10) 0%, transparent 30%, rgba(6,13,27,0.75) 100%);
pointer-events: none;
}
/* Floating badge — bottom-left */
.wfc-img-float-badge {
position: absolute;
bottom: 20px; left: 20px;
display: flex;
align-items: center;
gap: 12px;
background: rgba(11,17,32,0.70);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
border: 1px solid rgba(61,191,169,0.20);
border-radius: 14px;
padding: 14px 20px;
z-index: 3;
transition: all 0.35s ease;
}
.wfc-img-float-badge:hover {
border-color: rgba(61,191,169,0.40);
transform: translateY(-3px);
box-shadow: 0 10px 30px rgba(0,0,0,0.25);
}
.wfc-float-icon {
width: 40px; height: 40px;
border-radius: 10px;
background: linear-gradient(135deg, var(--fc-accent, #3DBFA9), var(--fc-accent-2, #1A7BAF));
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.wfc-float-icon i { font-size: 18px; color: #fff; }
.wfc-img-float-badge strong {
display: block;
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 14px; font-weight: 700;
color: #fff; margin-bottom: 2px;
}
.wfc-img-float-badge span {
font-size: 12px; color: rgba(255,255,255,0.55); font-weight: 500;
}
/* Floating badge — top-right (new) */
.wfc-img-float-badge-2 {
position: absolute;
top: -12px; right: -12px;
display: flex;
align-items: center;
gap: 12px;
background: rgba(11,17,32,0.70);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
border: 1px solid rgba(155,108,247,0.20);
border-radius: 14px;
padding: 14px 20px;
z-index: 4;
transition: all 0.35s ease;
animation: wfcBadgeFloat 4s ease-in-out infinite;
}
@keyframes wfcBadgeFloat {
0%,100% { transform: translateY(0); }
50% { transform: translateY(-6px); }
}
.wfc-img-float-badge-2:hover {
border-color: rgba(155,108,247,0.40);
box-shadow: 0 10px 30px rgba(0,0,0,0.25);
}
.wfc-float-icon-2 {
width: 40px; height: 40px;
border-radius: 10px;
background: linear-gradient(135deg, #9B6CF7, #7c5ce0);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.wfc-float-icon-2 i { font-size: 16px; color: #fff; }
.wfc-img-float-badge-2 strong {
display: block;
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 14px; font-weight: 700;
color: #fff; margin-bottom: 2px;
}
.wfc-img-float-badge-2 span {
font-size: 12px; color: rgba(255,255,255,0.55); font-weight: 500;
}
/* ========== ROW 2 — Stats Row (Rounded Bar, No Glow) ========== */
.wfc-stats-bar {
display: flex;
align-items: center;
justify-content: center;
gap: 0;
background: rgba(255,255,255,0.025);
border: 1px solid var(--fc-card-border, rgba(255,255,255,0.08));
border-radius: 22px;
padding: 36px 40px;
margin-bottom: 60px;
position: relative;
overflow: hidden;
box-shadow: none;
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
.wfc-stats-bar::before,
.wfc-stats-bar::after { display: none; }
/* Hide all decorative chrome — keeping it simple */
.wfc-stats-glow,
.wfc-stats-corner,
.wfc-stats-bar-shine,
.wfc-stat-ring,
.wfc-stat-dot,
.wfc-stat-divider span { display: none !important; }
/* Stat item */
.wfc-stat-item {
flex: 1;
text-align: center;
position: relative;
z-index: 1;
padding: 4px 8px;
transition: transform 0.35s ease;
}
.wfc-stat-item:hover { transform: translateY(-2px); }
/* Icon — simple gradient circle, no glow */
.wfc-stat-icon-sm {
position: relative;
width: 44px; height: 44px;
border-radius: 50%;
background: linear-gradient(135deg, var(--fc-accent, #3DBFA9), var(--fc-accent-2, #1A7BAF));
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 16px;
box-shadow: none;
transition: transform 0.35s ease;
}
.wfc-stat-icon-sm i {
font-size: 16px;
color: #ffffff;
position: relative;
z-index: 1;
}
.wfc-stat-item:hover .wfc-stat-icon-sm {
transform: scale(1.06);
}
/* Number */
.wfc-stat-num {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 44px;
font-weight: 800;
letter-spacing: -1.2px;
background: linear-gradient(135deg, var(--fc-accent, #3DBFA9), var(--fc-accent-2, #1A7BAF));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin-bottom: 8px;
line-height: 1.05;
}
/* Tiny accent underline under number */
.wfc-stat-accent {
display: block;
width: 24px;
height: 2px;
margin: 0 auto 12px;
background: linear-gradient(90deg, var(--fc-accent), var(--fc-accent-2));
border-radius: 2px;
opacity: 0.4;
transition: width 0.4s ease, opacity 0.3s ease;
}
.wfc-stat-item:hover .wfc-stat-accent {
width: 40px;
opacity: 0.75;
}
/* Label — plain uppercase */
.wfc-stat-label {
display: inline-block;
font-size: 12px;
font-weight: 700;
letter-spacing: 1.4px;
color: var(--fc-text-muted, rgba(255,255,255,0.55));
text-transform: uppercase;
}
/* Divider — single clean vertical line */
.wfc-stat-divider {
width: 1px;
height: 56px;
flex-shrink: 0;
background: linear-gradient(180deg, transparent, var(--fc-card-border, rgba(255,255,255,0.12)) 25%, var(--fc-card-border, rgba(255,255,255,0.12)) 75%, transparent);
}
.wfc-stat-divider::before { display: none; }
/* ========== ROW 3 — Bento Grid ========== */
.wfc-bento {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
/* Base card */
.wfc-card {
background: rgba(255,255,255,0.025);
border: 1px solid rgba(255,255,255,0.06);
border-radius: 22px;
padding: 36px 32px 32px;
position: relative;
overflow: hidden;
transition: all 0.45s cubic-bezier(0.25,0.8,0.25,1);
}
.wfc-card:hover {
transform: translateY(-7px);
border-color: rgba(61,191,169,0.22);
box-shadow:
0 24px 70px rgba(0,0,0,0.22),
0 0 0 1px rgba(61,191,169,0.06);
}
/* Card number watermark */
.wfc-card-num {
position: absolute;
top: 16px; right: 22px;
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 52px;
font-weight: 900;
color: rgba(255,255,255,0.025);
line-height: 1;
pointer-events: none;
z-index: 0;
transition: color 0.4s ease;
}
.wfc-card:hover .wfc-card-num {
color: rgba(61,191,169,0.06);
}
.wfc-card-num-light {
color: rgba(255,255,255,0.04) !important;
}
.wfc-card:hover .wfc-card-num-light {
color: rgba(61,191,169,0.08) !important;
}
/* Background glow per card (appears on hover) */
.wfc-card-bg-glow {
position: absolute;
bottom: -60px; right: -60px;
width: 180px; height: 180px;
border-radius: 50%;
filter: blur(60px);
opacity: 0;
transition: opacity 0.5s ease;
pointer-events: none;
z-index: 0;
}
.wfc-card:hover .wfc-card-bg-glow {
opacity: 1;
}
.wfc-card-bg-teal { background: rgba(61,191,169,0.10); }
.wfc-card-bg-blue { background: rgba(26,123,175,0.10); }
.wfc-card-bg-purple { background: rgba(155,108,247,0.10); }
.wfc-card-bg-orange { background: rgba(245,158,11,0.08); }
.wfc-card-bg-green { background: rgba(16,185,129,0.10); }
/* Top accent bar on hover */
.wfc-card-accent {
position: absolute;
top: 0; left: 0;
width: 0;
height: 3px;
background: linear-gradient(90deg, var(--fc-accent, #3DBFA9), var(--fc-accent-2, #1A7BAF));
transition: width 0.5s cubic-bezier(0.25,0.8,0.25,1);
border-radius: 0 0 3px 0;
z-index: 2;
}
.wfc-card:hover .wfc-card-accent {
width: 100%;
}
/* Card icon */
.wfc-card-icon {
width: 54px; height: 54px;
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 20px;
transition: all 0.4s cubic-bezier(0.25,0.8,0.25,1);
position: relative;
z-index: 1;
}
.wfc-card:hover .wfc-card-icon {
transform: scale(1.10) rotate(-4deg);
box-shadow: 0 12px 30px rgba(0,0,0,0.20);
}
.wfc-card-icon i {
font-size: 22px;
color: #fff;
}
/* Icon color variants */
.wfc-card-icon-teal {
background: linear-gradient(135deg, #3DBFA9, #2a9d8f);
box-shadow: 0 8px 24px rgba(61,191,169,0.25);
}
.wfc-card-icon-blue {
background: linear-gradient(135deg, #1A7BAF, #1565a0);
box-shadow: 0 8px 24px rgba(26,123,175,0.25);
}
.wfc-card-icon-purple {
background: linear-gradient(135deg, #9B6CF7, #7c5ce0);
box-shadow: 0 8px 24px rgba(155,108,247,0.25);
}
.wfc-card-icon-orange {
background: linear-gradient(135deg, #F59E0B, #D97706);
box-shadow: 0 8px 24px rgba(245,158,11,0.25);
}
.wfc-card-icon-green {
background: linear-gradient(135deg, #10B981, #059669);
box-shadow: 0 8px 24px rgba(16,185,129,0.25);
}
.wfc-card-icon-accent {
background: linear-gradient(135deg, var(--fc-accent, #3DBFA9), var(--fc-accent-2, #1A7BAF));
box-shadow: 0 8px 24px rgba(61,191,169,0.30);
}
/* Card typography */
.wfc-card h4 {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 18px;
font-weight: 700;
color: var(--fc-heading, #fff) !important;
margin: 0 0 10px;
transition: color 0.3s ease;
position: relative;
z-index: 1;
}
.wfc-card:hover h4 {
color: var(--fc-accent, #3DBFA9) !important;
}
.wfc-card p {
font-size: 14px;
line-height: 1.7;
color: var(--fc-text-muted, rgba(255,255,255,0.45));
margin: 0;
position: relative;
z-index: 1;
}
/* --- Highlight card (last card) --- */
.wfc-card-highlight {
background: linear-gradient(160deg, #0f1f3d 0%, #0c1a30 50%, #081428 100%);
border: 1px solid rgba(61,191,169,0.15);
box-shadow: 0 20px 60px rgba(0,0,0,0.28);
}
.wfc-card-highlight:hover {
border-color: rgba(61,191,169,0.40);
box-shadow: 0 28px 80px rgba(0,0,0,0.35), 0 0 40px rgba(61,191,169,0.08);
}
.wfc-highlight-glow {
position: absolute;
top: -100px; right: -100px;
width: 280px; height: 280px;
background: radial-gradient(circle, rgba(61,191,169,0.14) 0%, transparent 70%);
pointer-events: none;
}
.wfc-highlight-glow-2 {
position: absolute;
bottom: -80px; left: -80px;
width: 200px; height: 200px;
background: radial-gradient(circle, rgba(26,123,175,0.10) 0%, transparent 70%);
pointer-events: none;
}
.wfc-card-highlight h4 {
color: #fff !important;
}
.wfc-card-highlight p {
color: rgba(255,255,255,0.50);
}
.wfc-highlight-tag {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 22px;
font-size: 12px;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
color: var(--fc-accent, #3DBFA9);
background: rgba(61,191,169,0.10);
border: 1px solid rgba(61,191,169,0.22);
padding: 9px 20px;
border-radius: 50px;
position: relative;
z-index: 1;
transition: all 0.3s ease;
}
.wfc-card-highlight:hover .wfc-highlight-tag {
background: rgba(61,191,169,0.16);
border-color: rgba(61,191,169,0.35);
}
.wfc-highlight-tag i {
font-size: 13px;
}
/* Feature Approach Section theme compat */
.feature-approach-section {
background: var(--fc-overlay, #0a1628) !important;
}
/* ==========================================================
WHY FLOWSTATE — LIGHT THEME
========================================================== */
[data-theme="light"] .wfc {
background: linear-gradient(180deg, #f0f7fa 0%, #ffffff 50%, #f5fafe 100%);
}
[data-theme="light"] .wfc-grid-bg {
background-image:
linear-gradient(rgba(30,45,90,0.03) 1px, transparent 1px),
linear-gradient(90deg, rgba(30,45,90,0.03) 1px, transparent 1px);
}
[data-theme="light"] .wfc-glow-1 {
background: radial-gradient(circle, rgba(61,191,169,0.07) 0%, transparent 70%);
}
[data-theme="light"] .wfc-glow-2 {
background: radial-gradient(circle, rgba(26,123,175,0.06) 0%, transparent 70%);
}
[data-theme="light"] .wfc-glow-3 {
background: radial-gradient(circle, rgba(155,108,247,0.04) 0%, transparent 70%);
}
[data-theme="light"] .wfc-title-highlight::after {
opacity: 0.25;
}
/* Pills */
[data-theme="light"] .wfc-pill {
background: rgba(61,191,169,0.06);
border-color: rgba(61,191,169,0.15);
color: #2a9d8f;
}
[data-theme="light"] .wfc-pill:hover {
background: rgba(61,191,169,0.12);
}
/* Image */
[data-theme="light"] .wfc-img-wrap {
box-shadow: 0 24px 70px rgba(30,45,90,0.14), 0 0 0 1px rgba(30,45,90,0.06);
}
[data-theme="light"] .wfc-img-overlay {
background: linear-gradient(180deg, rgba(30,45,90,0.05) 0%, transparent 30%, rgba(30,45,90,0.55) 100%);
}
[data-theme="light"] .wfc-img-ring {
border-color: rgba(30,45,90,0.08);
}
[data-theme="light"] .wfc-img-float-badge {
background: rgba(255,255,255,0.92);
backdrop-filter: blur(14px);
border-color: rgba(30,45,90,0.10);
box-shadow: 0 8px 30px rgba(30,45,90,0.10);
}
[data-theme="light"] .wfc-img-float-badge strong { color: #1E2D5A; }
[data-theme="light"] .wfc-img-float-badge span { color: #6B7280; }
[data-theme="light"] .wfc-img-float-badge-2 {
background: rgba(255,255,255,0.92);
border-color: rgba(155,108,247,0.15);
box-shadow: 0 8px 30px rgba(30,45,90,0.10);
}
[data-theme="light"] .wfc-img-float-badge-2 strong { color: #1E2D5A; }
[data-theme="light"] .wfc-img-float-badge-2 span { color: #6B7280; }
/* Stats — Light theme */
[data-theme="light"] .wfc-stats-bar {
background: #ffffff;
border: 1px solid rgba(30,45,90,0.08);
box-shadow: none;
}
[data-theme="light"] .wfc-stat-divider {
background: linear-gradient(180deg, transparent, rgba(30,45,90,0.14) 25%, rgba(30,45,90,0.14) 75%, transparent);
}
[data-theme="light"] .wfc-stat-icon-sm {
box-shadow: none;
}
[data-theme="light"] .wfc-stat-divider::before {
background: linear-gradient(180deg, transparent, rgba(30,45,90,0.14) 30%, rgba(30,45,90,0.14) 70%, transparent);
}
[data-theme="light"] .wfc-stat-ring {
border-color: rgba(61,191,169,0.45);
}
[data-theme="light"] .wfc-stat-ring::after {
border-color: rgba(61,191,169,0.10);
}
[data-theme="light"] .wfc-stat-label {
color: #5F7082;
}
/* Bento Cards */
[data-theme="light"] .wfc-card {
background: #ffffff;
border-color: rgba(30,45,90,0.07);
box-shadow: 0 2px 16px rgba(30,45,90,0.04);
}
[data-theme="light"] .wfc-card:hover {
background: #ffffff;
border-color: rgba(61,191,169,0.25);
box-shadow: 0 20px 56px rgba(30,45,90,0.10), 0 0 0 1px rgba(61,191,169,0.08);
}
[data-theme="light"] .wfc-card-num {
color: rgba(30,45,90,0.04);
}
[data-theme="light"] .wfc-card:hover .wfc-card-num {
color: rgba(61,191,169,0.08);
}
[data-theme="light"] .wfc-card-bg-teal { background: rgba(61,191,169,0.06); }
[data-theme="light"] .wfc-card-bg-blue { background: rgba(26,123,175,0.06); }
[data-theme="light"] .wfc-card-bg-purple { background: rgba(155,108,247,0.06); }
[data-theme="light"] .wfc-card-bg-orange { background: rgba(245,158,11,0.05); }
[data-theme="light"] .wfc-card-bg-green { background: rgba(16,185,129,0.06); }
/* Highlight card stays dark — boosted specificity */
[data-theme="light"] .wfc-card.wfc-card-highlight {
background: linear-gradient(160deg, #1a2d52 0%, #162544 50%, #112040 100%) !important;
border-color: rgba(61,191,169,0.18) !important;
box-shadow: 0 20px 60px rgba(30,45,90,0.20);
}
[data-theme="light"] .wfc-card.wfc-card-highlight:hover {
background: linear-gradient(160deg, #1a2d52 0%, #162544 50%, #112040 100%) !important;
border-color: rgba(61,191,169,0.40) !important;
box-shadow: 0 28px 80px rgba(30,45,90,0.25), 0 0 30px rgba(61,191,169,0.06);
}
[data-theme="light"] .wfc-card.wfc-card-highlight h4 { color: #ffffff !important; }
[data-theme="light"] .wfc-card.wfc-card-highlight p { color: rgba(255,255,255,0.55) !important; }
[data-theme="light"] .wfc-card.wfc-card-highlight .wfc-card-num-light { color: rgba(255,255,255,0.04) !important; }
[data-theme="light"] .wfc-card.wfc-card-highlight:hover .wfc-card-num-light { color: rgba(61,191,169,0.08) !important; }
[data-theme="light"] .wfc-card.wfc-card-highlight .wfc-highlight-tag {
background: rgba(61,191,169,0.12);
border-color: rgba(61,191,169,0.25);
color: var(--fc-accent, #3DBFA9);
}
/* ---- Responsive ---- */
@media (max-width: 1024px) {
.wfc-top {
grid-template-columns: 1fr;
gap: 40px;
}
.wfc-top-text { padding-right: 0; text-align: center; }
.wfc-subtitle { margin: 0 auto 24px; }
.wfc-mini-pills { justify-content: center; }
.wfc-title { font-size: 40px; }
.wfc-bento { grid-template-columns: 1fr 1fr; }
.wfc-img-float-badge-2 { top: -10px; right: -6px; }
}
@media (max-width: 768px) {
.wfc { padding: 80px 0; }
.wfc-title { font-size: 34px; }
/* Stats bar becomes a compact 2×2 grid card */
.wfc-stats-bar {
display: grid;
grid-template-columns: 1fr 1fr;
flex-direction: unset;
gap: 0;
padding: 22px 18px;
border-radius: 18px;
margin-bottom: 50px;
position: relative;
}
/* Hairline dividers between cells */
.wfc-stat-item {
padding: 16px 10px;
position: relative;
}
.wfc-stat-item:nth-child(odd):not(:last-child)::after {
content: '';
position: absolute;
right: 0; top: 18%; bottom: 18%;
width: 1px;
background: linear-gradient(180deg, transparent, var(--fc-card-border, rgba(255,255,255,0.12)) 25%, var(--fc-card-border, rgba(255,255,255,0.12)) 75%, transparent);
}
.wfc-stat-item:nth-child(-n+2)::before {
content: '';
position: absolute;
left: 10%; right: 10%;
bottom: 0;
height: 1px;
background: linear-gradient(90deg, transparent, var(--fc-card-border, rgba(255,255,255,0.12)) 20%, var(--fc-card-border, rgba(255,255,255,0.12)) 80%, transparent);
}
[data-theme="light"] .wfc-stat-item:nth-child(odd):not(:last-child)::after {
background: linear-gradient(180deg, transparent, rgba(30,45,90,0.14) 25%, rgba(30,45,90,0.14) 75%, transparent);
}
[data-theme="light"] .wfc-stat-item:nth-child(-n+2)::before {
background: linear-gradient(90deg, transparent, rgba(30,45,90,0.14) 20%, rgba(30,45,90,0.14) 80%, transparent);
}
/* Hide the old divider elements in grid mode */
.wfc-stat-divider { display: none; }
.wfc-stat-icon-sm {
width: 38px;
height: 38px;
margin-bottom: 10px;
}
.wfc-stat-icon-sm i { font-size: 14px; }
.wfc-stat-num { font-size: 30px; letter-spacing: -0.8px; margin-bottom: 4px; }
.wfc-stat-accent { width: 20px; height: 2px; margin: 0 auto 8px; }
.wfc-stat-label { font-size: 10.5px; letter-spacing: 1.1px; }
.wfc-bento { grid-template-columns: 1fr; }
.wfc-img-wrap img { height: 300px; }
.wfc-top { margin-bottom: 50px; }
.wfc-img-ring { display: none; }
.wfc-img-float-badge-2 { top: auto; bottom: -12px; right: 20px; }
}
@media (max-width: 480px) {
.wfc-title { font-size: 28px; }
.wfc-card { padding: 28px 24px 26px; border-radius: 18px; }
.wfc-stats-bar { padding: 18px 12px; border-radius: 16px; }
.wfc-stat-item { padding: 14px 6px; }
.wfc-stat-icon-sm { width: 34px; height: 34px; margin-bottom: 8px; }
.wfc-stat-icon-sm i { font-size: 13px; }
.wfc-stat-num { font-size: 26px; letter-spacing: -0.6px; }
.wfc-stat-label { font-size: 9.5px; letter-spacing: 1px; }
.wfc-stat-accent { width: 16px; }
.wfc-mini-pills { gap: 8px; }
.wfc-pill { font-size: 11px; padding: 6px 12px; }
.wfc-card-num { font-size: 40px; }
}
/* ============================================================
WHY FLOWSTATE — PREMIUM FEATURE CARDS
Color-coded glass cards, stroke-outline giant numerals,
circular gradient icons, animated gradient borders,
color-matched hover shadows, and a flagship highlight card.
============================================================ */
/* Cards use color variables per item */
.wfc .wfc-bento {
gap: 24px;
padding: 16px 0 8px;
position: relative;
}
.wfc .wfc-bento .wfc-card:nth-child(1) { --card-c1: 61,191,169; --card-c2: 42,157,143; }
.wfc .wfc-bento .wfc-card:nth-child(2) { --card-c1: 26,123,175; --card-c2: 21,101,160; }
.wfc .wfc-bento .wfc-card:nth-child(3) { --card-c1: 155,108,247; --card-c2: 124,92,224; }
.wfc .wfc-bento .wfc-card:nth-child(4) { --card-c1: 245,158,11; --card-c2: 217,119,6; }
.wfc .wfc-bento .wfc-card:nth-child(5) { --card-c1: 16,185,129; --card-c2: 5,150,105; }
.wfc .wfc-bento .wfc-card:nth-child(6) { --card-c1: 61,191,169; --card-c2: 26,123,175; }
/* Base card — soft glass, subtle gradient surface, rounded */
.wfc .wfc-bento .wfc-card {
position: relative;
background:
linear-gradient(160deg, rgba(var(--card-c1),0.06) 0%, transparent 55%),
rgba(255,255,255,0.02);
border: 1px solid rgba(255,255,255,0.06);
border-radius: 22px;
padding: 40px 34px 36px;
overflow: hidden;
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
box-shadow: 0 10px 32px rgba(0,0,0,0.20);
transition:
transform 0.5s cubic-bezier(0.2,0.8,0.2,1),
box-shadow 0.5s ease,
border-color 0.4s ease;
}
/* Animated gradient border (revealed on hover) */
.wfc .wfc-bento .wfc-card::before {
content: '';
position: absolute;
inset: 0;
border-radius: 22px;
padding: 1px;
background: conic-gradient(
from var(--card-angle, 0deg),
rgba(var(--card-c1),0.9),
rgba(var(--card-c2),0.3) 30%,
transparent 55%,
rgba(var(--card-c1),0.6) 80%,
rgba(var(--card-c1),0.9) 100%
);
-webkit-mask:
linear-gradient(#000 0 0) content-box,
linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
opacity: 0;
transition: opacity 0.5s ease;
animation: wfcCardBorderSpin 8s linear infinite;
}
@property --card-angle {
syntax: '';
inherits: false;
initial-value: 0deg;
}
@keyframes wfcCardBorderSpin {
to { --card-angle: 360deg; }
}
/* Inner color-wash glow (bottom-right) */
.wfc .wfc-bento .wfc-card::after {
content: '';
position: absolute;
bottom: -80px; right: -80px;
width: 200px; height: 200px;
border-radius: 50%;
background: radial-gradient(circle, rgba(var(--card-c1),0.22), transparent 70%);
filter: blur(30px);
opacity: 0;
transition: opacity 0.5s ease;
pointer-events: none;
}
/* Hover lift + colored shadow + border reveal */
.wfc .wfc-bento .wfc-card:hover {
transform: translateY(-8px);
border-color: transparent;
box-shadow:
0 26px 60px rgba(var(--card-c1), 0.25),
0 10px 30px rgba(0,0,0,0.28);
}
.wfc .wfc-bento .wfc-card:hover::before { opacity: 1; }
.wfc .wfc-bento .wfc-card:hover::after { opacity: 1; }
/* Turn watermark number into a big gradient STROKE numeral */
.wfc .wfc-bento .wfc-card-num,
.wfc .wfc-bento .wfc-card-num-light {
position: absolute;
top: 22px; right: 26px;
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 74px !important;
font-weight: 900;
line-height: 1;
color: transparent !important;
background: transparent !important;
border: none !important;
padding: 0 !important;
letter-spacing: -2px;
-webkit-text-stroke: 1.5px rgba(var(--card-c1), 0.30);
text-stroke: 1.5px rgba(var(--card-c1), 0.30);
pointer-events: none;
z-index: 0;
transition: -webkit-text-stroke 0.4s ease, transform 0.5s cubic-bezier(0.2,0.8,0.2,1);
border-radius: 0 !important;
margin: 0 !important;
display: block !important;
}
.wfc .wfc-bento .wfc-card:hover .wfc-card-num,
.wfc .wfc-bento .wfc-card:hover .wfc-card-num-light {
-webkit-text-stroke: 1.5px rgba(var(--card-c1), 0.6);
transform: translate(-4px, 4px);
background: linear-gradient(135deg, rgba(var(--card-c1),0.18), rgba(var(--card-c2),0.10)) !important;
-webkit-background-clip: text;
background-clip: text;
}
/* Remove legacy elements */
.wfc .wfc-bento .wfc-card-accent { display: none; }
.wfc .wfc-bento .wfc-card-bg-glow {
position: absolute;
top: 30%; left: 30%;
width: 120px; height: 120px;
border-radius: 50%;
filter: blur(60px);
opacity: 0;
transition: opacity 0.5s ease;
pointer-events: none;
}
.wfc .wfc-bento .wfc-card:hover .wfc-card-bg-glow { opacity: 0.7; }
/* Circular gradient icon coin with rotating ring */
.wfc .wfc-bento .wfc-card-icon {
position: relative;
z-index: 2;
width: 60px;
height: 60px;
border-radius: 50%;
background: linear-gradient(135deg, rgb(var(--card-c1)), rgb(var(--card-c2))) !important;
box-shadow:
0 10px 28px rgba(var(--card-c1),0.35),
inset 0 1px 0 rgba(255,255,255,0.20);
margin-bottom: 28px;
transition: transform 0.5s cubic-bezier(0.2,0.8,0.2,1);
}
.wfc .wfc-bento .wfc-card-icon::before {
content: '';
position: absolute;
inset: -6px;
border-radius: 50%;
border: 1px dashed rgba(var(--card-c1), 0.45);
animation: wfcIconRing 18s linear infinite;
}
.wfc .wfc-bento .wfc-card-icon::after {
content: '';
position: absolute;
inset: 4px 16px auto 16px;
height: 14px;
border-radius: 50%;
background: linear-gradient(180deg, rgba(255,255,255,0.4), transparent);
pointer-events: none;
}
.wfc .wfc-bento .wfc-card-icon i {
font-size: 24px;
color: #ffffff;
filter: drop-shadow(0 1px 2px rgba(0,0,0,0.25));
position: relative;
z-index: 1;
}
.wfc .wfc-bento .wfc-card:hover .wfc-card-icon {
transform: translateY(-4px) rotate(-6deg) scale(1.06);
}
@keyframes wfcIconRing {
to { transform: rotate(360deg); }
}
/* Typography */
.wfc .wfc-bento .wfc-card h4 {
position: relative;
z-index: 2;
font-size: 20px;
letter-spacing: -0.3px;
margin-bottom: 14px;
padding-bottom: 14px;
}
.wfc .wfc-bento .wfc-card h4::after {
content: '';
position: absolute;
left: 0; bottom: 0;
width: 28px; height: 3px;
border-radius: 3px;
background: linear-gradient(90deg, rgb(var(--card-c1)), rgb(var(--card-c2)));
transition: width 0.5s cubic-bezier(0.2,0.8,0.2,1);
}
.wfc .wfc-bento .wfc-card:hover h4::after { width: 68px; }
.wfc .wfc-bento .wfc-card:hover h4 { color: var(--fc-heading) !important; }
.wfc .wfc-bento .wfc-card p {
position: relative;
z-index: 2;
font-size: 14.5px;
line-height: 1.75;
color: var(--fc-text-muted);
}
/* Flagship highlight card (#6) */
.wfc .wfc-bento .wfc-card.wfc-card-highlight,
[data-theme="light"] .wfc .wfc-bento .wfc-card.wfc-card-highlight {
background:
linear-gradient(135deg, rgba(61,191,169,0.22) 0%, rgba(26,123,175,0.16) 55%, rgba(11,20,38,0.25) 100%),
linear-gradient(160deg, #0f1f3d 0%, #0c1a30 50%, #081428 100%) !important;
border: 1px solid rgba(61,191,169,0.25) !important;
box-shadow: 0 18px 48px rgba(0,0,0,0.35) !important;
}
.wfc .wfc-bento .wfc-card.wfc-card-highlight:hover,
[data-theme="light"] .wfc .wfc-bento .wfc-card.wfc-card-highlight:hover {
box-shadow:
0 32px 72px rgba(61,191,169,0.25),
0 10px 30px rgba(0,0,0,0.40) !important;
border-color: rgba(61,191,169,0.45) !important;
}
.wfc .wfc-bento .wfc-card.wfc-card-highlight h4 { color: #ffffff !important; }
.wfc .wfc-bento .wfc-card.wfc-card-highlight p { color: rgba(255,255,255,0.65) !important; }
.wfc .wfc-bento .wfc-card.wfc-card-highlight .wfc-card-num-light {
-webkit-text-stroke: 1.5px rgba(255,255,255,0.20) !important;
}
.wfc .wfc-bento .wfc-card.wfc-card-highlight:hover .wfc-card-num-light {
-webkit-text-stroke: 1.5px rgba(61,191,169,0.65) !important;
}
.wfc .wfc-bento .wfc-highlight-glow,
.wfc .wfc-bento .wfc-highlight-glow-2 { opacity: 1; z-index: 0; }
/* CTA pill — filled gradient with sheen */
.wfc .wfc-bento .wfc-highlight-tag {
position: relative;
z-index: 2;
margin-top: 22px;
background: linear-gradient(135deg, var(--fc-accent), var(--fc-accent-2));
color: #ffffff;
border: none;
padding: 11px 22px;
font-size: 12px;
font-weight: 800;
letter-spacing: 1.2px;
box-shadow: 0 12px 28px rgba(61,191,169,0.35);
overflow: hidden;
transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.wfc .wfc-bento .wfc-highlight-tag::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.30) 50%, transparent 70%);
transform: translateX(-100%);
transition: transform 0.8s ease;
}
.wfc .wfc-bento .wfc-card-highlight:hover .wfc-highlight-tag {
transform: translateY(-3px);
box-shadow: 0 18px 36px rgba(61,191,169,0.50);
}
.wfc .wfc-bento .wfc-card-highlight:hover .wfc-highlight-tag::before {
transform: translateX(100%);
}
/* Responsive */
@media (max-width: 1024px) {
.wfc .wfc-bento { grid-template-columns: 1fr 1fr; gap: 20px; }
.wfc .wfc-bento .wfc-card { padding: 36px 28px 32px; }
.wfc .wfc-bento .wfc-card-num,
.wfc .wfc-bento .wfc-card-num-light { font-size: 66px !important; }
}
@media (max-width: 768px) {
.wfc .wfc-bento { grid-template-columns: 1fr; gap: 18px; }
.wfc .wfc-bento .wfc-card { padding: 32px 24px 28px; }
.wfc .wfc-bento .wfc-card-num,
.wfc .wfc-bento .wfc-card-num-light { font-size: 60px !important; top: 18px; right: 22px; }
.wfc .wfc-bento .wfc-card-icon { width: 54px; height: 54px; margin-bottom: 24px; }
.wfc .wfc-bento .wfc-card-icon i { font-size: 22px; }
.wfc .wfc-bento .wfc-card h4 { font-size: 18px; }
}
/* Light-theme refinements */
[data-theme="light"] .wfc .wfc-bento .wfc-card {
background:
linear-gradient(160deg, rgba(var(--card-c1),0.07) 0%, transparent 55%),
#ffffff;
border-color: rgba(30,45,90,0.06);
box-shadow: 0 6px 20px rgba(30,45,90,0.05);
}
[data-theme="light"] .wfc .wfc-bento .wfc-card:hover {
box-shadow:
0 24px 52px rgba(var(--card-c1), 0.22),
0 10px 24px rgba(30,45,90,0.08);
}
[data-theme="light"] .wfc .wfc-bento .wfc-card-num,
[data-theme="light"] .wfc .wfc-bento .wfc-card-num-light {
-webkit-text-stroke: 1.5px rgba(var(--card-c1), 0.32);
}
[data-theme="light"] .wfc .wfc-bento .wfc-card:hover .wfc-card-num,
[data-theme="light"] .wfc .wfc-bento .wfc-card:hover .wfc-card-num-light {
-webkit-text-stroke: 1.5px rgba(var(--card-c1), 0.7);
}
[data-theme="light"] .wfc .wfc-bento .wfc-card p {
color: #5F7082;
}
@media (prefers-reduced-motion: reduce) {
.wfc .wfc-bento .wfc-card::before,
.wfc .wfc-bento .wfc-card-icon::before { animation: none !important; }
.wfc .wfc-bento .wfc-card,
.wfc .wfc-bento .wfc-card-icon { transition: none !important; }
}
/* ============================================================
WHY FLOWSTATE — REBUILT POST-IMAGE SECTION
Features intro + 5 pillar cards (3 + 2 layout) + flagship CTA
============================================================ */
/* ── Features intro ── */
.wfc-features-head {
text-align: center;
max-width: 720px;
margin: 72px auto 44px;
}
.wfc-features-eyebrow {
display: inline-flex;
align-items: center;
gap: 12px;
font-size: 11.5px;
font-weight: 800;
letter-spacing: 3px;
color: var(--fc-accent);
margin-bottom: 20px;
text-transform: uppercase;
}
.wfc-features-eyebrow-line {
width: 36px;
height: 1px;
background: linear-gradient(90deg, transparent, var(--fc-accent));
}
.wfc-features-eyebrow-line:last-child {
background: linear-gradient(90deg, var(--fc-accent), transparent);
}
.wfc-features-title {
font-family: "Plus Jakarta Sans", sans-serif;
font-size: 40px;
font-weight: 800;
color: var(--fc-heading);
line-height: 1.12;
letter-spacing: -0.8px;
margin: 0 0 16px;
}
.wfc-features-title em {
font-style: italic;
font-weight: 700;
background: linear-gradient(135deg, var(--fc-accent) 0%, var(--fc-accent-2) 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
position: relative;
}
.wfc-features-title em::after {
content: '';
position: absolute;
left: 0; right: 0;
bottom: -4px;
height: 3px;
background: linear-gradient(90deg, var(--fc-accent), var(--fc-accent-2));
border-radius: 3px;
opacity: 0.4;
}
.wfc-features-lead {
font-size: 16px;
line-height: 1.7;
color: var(--fc-text-muted);
margin: 0;
}
/* ── Pillars grid (3 + 2 layout over 6 tracks) ── */
.wfc-pillars {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 22px;
margin-bottom: 28px;
position: relative;
}
.wfc-pillar {
grid-column: span 2;
position: relative;
padding: 36px 32px 34px;
border-radius: 20px;
background:
linear-gradient(160deg, rgba(var(--pc), 0.07) 0%, transparent 55%),
rgba(255, 255, 255, 0.025);
border: 1px solid rgba(255, 255, 255, 0.06);
overflow: hidden;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
transition:
transform 0.55s cubic-bezier(0.2, 0.8, 0.2, 1),
border-color 0.4s ease,
box-shadow 0.55s ease,
background 0.4s ease;
}
.wfc-pillar-wide { grid-column: span 3; }
.wfc-pillar:hover {
transform: translateY(-8px);
border-color: rgba(var(--pc), 0.35);
box-shadow:
0 28px 60px rgba(var(--pc), 0.22),
0 10px 28px rgba(0, 0, 0, 0.22);
}
/* Corner bracket — editorial mark */
.wfc-pillar-corner {
position: absolute;
top: 14px; left: 14px;
width: 14px; height: 14px;
border-top: 1.5px solid rgba(var(--pc), 0.55);
border-left: 1.5px solid rgba(var(--pc), 0.55);
border-radius: 4px 0 0 0;
pointer-events: none;
opacity: 0.7;
transition: opacity 0.4s ease, width 0.4s ease, height 0.4s ease;
}
.wfc-pillar:hover .wfc-pillar-corner {
opacity: 1;
width: 22px;
height: 22px;
}
/* Pillar head — icon + number */
.wfc-pillar-head {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 26px;
position: relative;
z-index: 2;
}
.wfc-pillar-icon {
position: relative;
width: 54px;
height: 54px;
border-radius: 16px;
background: linear-gradient(135deg, rgb(var(--pc)), rgb(var(--pc2)));
display: flex;
align-items: center;
justify-content: center;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
transition: transform 0.55s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.wfc-pillar-icon::after {
content: '';
position: absolute;
top: 6px; left: 10px; right: 10px;
height: 14px;
border-radius: 8px;
background: linear-gradient(180deg, rgba(255,255,255,0.32), transparent);
pointer-events: none;
}
.wfc-pillar-icon i {
font-size: 22px;
color: #fff;
filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.25));
position: relative;
z-index: 1;
}
.wfc-pillar:hover .wfc-pillar-icon {
transform: rotate(-6deg) scale(1.08);
}
.wfc-pillar-num {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 44px;
font-weight: 900;
line-height: 1;
color: transparent;
-webkit-text-stroke: 1.5px rgba(var(--pc), 0.35);
letter-spacing: -1px;
transition: -webkit-text-stroke 0.4s ease, transform 0.5s ease;
}
.wfc-pillar:hover .wfc-pillar-num {
-webkit-text-stroke: 1.5px rgba(var(--pc), 0.65);
transform: translateX(-4px);
}
/* Title + gradient accent */
.wfc-pillar-title {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 19.5px;
font-weight: 800;
color: var(--fc-heading);
letter-spacing: -0.3px;
margin: 0 0 12px;
padding-bottom: 14px;
position: relative;
z-index: 2;
}
.wfc-pillar-title::after {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 26px;
height: 3px;
border-radius: 3px;
background: linear-gradient(90deg, rgb(var(--pc)), rgb(var(--pc2)));
transition: width 0.55s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.wfc-pillar:hover .wfc-pillar-title::after { width: 64px; }
.wfc-pillar-text {
font-size: 14.5px;
line-height: 1.75;
color: var(--fc-text-muted);
margin: 0;
position: relative;
z-index: 2;
}
/* Hover aurora glow bleed */
.wfc-pillar-glow {
position: absolute;
bottom: -80px;
right: -80px;
width: 240px;
height: 240px;
border-radius: 50%;
background: radial-gradient(circle, rgba(var(--pc), 0.26), transparent 70%);
filter: blur(40px);
opacity: 0;
transition: opacity 0.55s ease;
pointer-events: none;
z-index: 0;
}
.wfc-pillar:hover .wfc-pillar-glow { opacity: 1; }
/* ── Flagship CTA card ── */
.wfc-flagship {
position: relative;
margin-top: 10px;
padding: 56px 60px;
border-radius: 24px;
background:
linear-gradient(135deg, rgba(61, 191, 169, 0.18) 0%, rgba(26, 123, 175, 0.14) 50%, rgba(11, 20, 38, 0.35) 100%),
linear-gradient(160deg, #0f1f3d 0%, #0a1a30 55%, #071123 100%);
border: 1px solid rgba(61, 191, 169, 0.22);
overflow: hidden;
display: grid;
grid-template-columns: 1.4fr 1fr;
gap: 48px;
align-items: center;
box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
}
.wfc-flagship-aurora {
position: absolute;
border-radius: 50%;
filter: blur(90px);
pointer-events: none;
z-index: 0;
}
.wfc-flagship-aurora-a {
top: -140px;
left: -120px;
width: 420px;
height: 420px;
background: radial-gradient(circle, rgba(61, 191, 169, 0.35), transparent 70%);
}
.wfc-flagship-aurora-b {
bottom: -160px;
right: -100px;
width: 380px;
height: 380px;
background: radial-gradient(circle, rgba(26, 123, 175, 0.30), transparent 70%);
}
.wfc-flagship-grid {
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
background-size: 40px 40px;
opacity: 0.5;
pointer-events: none;
mask-image: radial-gradient(circle at center, #000 0%, transparent 80%);
-webkit-mask-image: radial-gradient(circle at center, #000 0%, transparent 80%);
}
.wfc-flagship-content {
position: relative;
z-index: 2;
}
.wfc-flagship-tag {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 8px 14px;
border-radius: 100px;
background: rgba(61, 191, 169, 0.14);
border: 1px solid rgba(61, 191, 169, 0.30);
color: var(--fc-accent);
font-size: 11px;
font-weight: 800;
letter-spacing: 1.8px;
margin-bottom: 22px;
}
.wfc-flagship-tag-dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--fc-accent);
box-shadow: 0 0 0 3px rgba(61, 191, 169, 0.22);
animation: wfcFlagDot 2s ease-in-out infinite;
}
@keyframes wfcFlagDot {
0%, 100% { box-shadow: 0 0 0 3px rgba(61, 191, 169, 0.22); }
50% { box-shadow: 0 0 0 7px rgba(61, 191, 169, 0.05); }
}
.wfc-flagship-title {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 38px;
font-weight: 800;
line-height: 1.12;
letter-spacing: -0.7px;
color: #ffffff;
margin: 0 0 16px;
}
.wfc-flagship-text {
font-size: 16px;
line-height: 1.72;
color: rgba(255, 255, 255, 0.72);
margin: 0 0 28px;
max-width: 520px;
}
/* Flagship mini facts row */
.wfc-flagship-facts {
display: inline-flex;
align-items: center;
gap: 22px;
padding: 16px 24px;
border-radius: 14px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.08);
margin-bottom: 32px;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.wfc-flagship-fact { display: flex; flex-direction: column; gap: 2px; }
.wfc-flagship-fact-num {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 20px;
font-weight: 800;
background: linear-gradient(135deg, #ffffff, #c9eee5);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
letter-spacing: -0.4px;
line-height: 1.1;
}
.wfc-flagship-fact-lbl {
font-size: 10.5px;
font-weight: 700;
letter-spacing: 1.2px;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.55);
}
.wfc-flagship-fact-sep {
width: 1px;
height: 32px;
background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.18), transparent);
}
/* Flagship CTA */
.wfc-flagship-cta {
display: inline-flex;
align-items: center;
gap: 12px;
padding: 14px 18px 14px 26px;
border-radius: 100px;
background: linear-gradient(135deg, var(--fc-accent), var(--fc-accent-2));
color: #ffffff;
font-size: 14px;
font-weight: 700;
letter-spacing: 0.5px;
text-decoration: none;
position: relative;
overflow: hidden;
box-shadow: 0 14px 32px rgba(61, 191, 169, 0.38);
transition: transform 0.35s ease, box-shadow 0.35s ease;
isolation: isolate;
}
.wfc-flagship-cta::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, 0.32) 50%, transparent 70%);
transform: translateX(-100%);
transition: transform 0.75s ease;
z-index: -1;
}
.wfc-flagship-cta:hover {
transform: translateY(-3px);
box-shadow: 0 22px 44px rgba(61, 191, 169, 0.55);
}
.wfc-flagship-cta:hover::before { transform: translateX(100%); }
.wfc-flagship-cta-arrow {
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.2);
font-size: 12px;
transition: transform 0.35s ease, background 0.35s ease;
}
.wfc-flagship-cta:hover .wfc-flagship-cta-arrow {
transform: translateX(4px) rotate(-8deg);
background: rgba(255, 255, 255, 0.32);
}
/* ── Flagship visual — animated chart with rings & rocket ── */
.wfc-flagship-visual {
position: relative;
z-index: 1;
height: 260px;
display: flex;
align-items: center;
justify-content: center;
}
.wfc-flagship-ring {
position: absolute;
border-radius: 50%;
border: 1px solid rgba(61, 191, 169, 0.22);
pointer-events: none;
}
.wfc-flagship-ring-1 { width: 240px; height: 240px; animation: wfcFlagRing 24s linear infinite; }
.wfc-flagship-ring-2 { width: 300px; height: 300px; border-style: dashed; opacity: 0.5; animation: wfcFlagRing 36s linear infinite reverse; }
.wfc-flagship-ring-3 { width: 380px; height: 380px; opacity: 0.25; }
@keyframes wfcFlagRing { to { transform: rotate(360deg); } }
.wfc-flagship-chart {
position: relative;
width: 100%;
max-width: 340px;
height: 180px;
z-index: 1;
}
.wfc-flagship-grid-lines line {
stroke: rgba(255, 255, 255, 0.06);
stroke-width: 1;
stroke-dasharray: 2 4;
}
.wfc-flagship-chart-line {
stroke-dasharray: 460;
stroke-dashoffset: 460;
animation: wfcFlagDraw 2.4s 0.3s ease forwards;
}
@keyframes wfcFlagDraw { to { stroke-dashoffset: 0; } }
.wfc-flagship-chart-fill {
opacity: 0;
animation: wfcFlagFill 1.6s 1.2s ease forwards;
}
@keyframes wfcFlagFill { to { opacity: 1; } }
.wfc-flagship-chart-dots circle {
fill: #3DBFA9;
opacity: 0;
animation: wfcFlagDot 0.5s ease forwards;
}
.wfc-flagship-chart-dots circle:nth-child(1) { animation-delay: 1.4s; }
.wfc-flagship-chart-dots circle:nth-child(2) { animation-delay: 1.7s; }
.wfc-flagship-chart-dots circle:nth-child(3) { animation-delay: 2.0s; }
.wfc-flagship-chart-dots circle:nth-child(4) { animation-delay: 2.3s; }
.wfc-flagship-chart-dot-hero {
filter: drop-shadow(0 0 10px rgba(61, 191, 169, 0.9));
}
@keyframes wfcFlagDot { to { opacity: 1; } }
.wfc-flagship-rocket {
position: absolute;
top: 10%;
right: 12%;
width: 54px;
height: 54px;
border-radius: 50%;
background: linear-gradient(135deg, var(--fc-accent), var(--fc-accent-2));
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 20px;
box-shadow: 0 14px 32px rgba(61, 191, 169, 0.45), 0 0 0 6px rgba(61, 191, 169, 0.08);
animation: wfcFlagRocket 4.5s ease-in-out infinite;
z-index: 2;
}
@keyframes wfcFlagRocket {
0%, 100% { transform: translate(0, 0) rotate(-20deg); }
50% { transform: translate(-6px, -10px) rotate(-10deg); }
}
/* ── Light theme overrides ── */
[data-theme="light"] .wfc-pillar {
background:
linear-gradient(160deg, rgba(var(--pc), 0.10) 0%, transparent 55%),
#ffffff;
border-color: rgba(30, 45, 90, 0.08);
box-shadow: 0 4px 18px rgba(30, 45, 90, 0.05);
}
[data-theme="light"] .wfc-pillar:hover {
box-shadow:
0 22px 50px rgba(var(--pc), 0.22),
0 8px 20px rgba(30, 45, 90, 0.06);
}
[data-theme="light"] .wfc-pillar-text { color: #5F7082; }
[data-theme="light"] .wfc-pillar-corner { opacity: 0.85; }
/* Flagship — Light theme (white surface with teal wash) */
[data-theme="light"] .wfc-flagship {
background:
linear-gradient(135deg, rgba(61, 191, 169, 0.10) 0%, rgba(26, 123, 175, 0.08) 55%, transparent 100%),
#ffffff;
border-color: rgba(30, 45, 90, 0.08);
box-shadow: 0 20px 50px rgba(30, 45, 90, 0.08);
}
[data-theme="light"] .wfc-flagship-aurora-a {
background: radial-gradient(circle, rgba(61, 191, 169, 0.28), transparent 70%);
}
[data-theme="light"] .wfc-flagship-aurora-b {
background: radial-gradient(circle, rgba(26, 123, 175, 0.22), transparent 70%);
}
[data-theme="light"] .wfc-flagship-grid {
background-image:
linear-gradient(rgba(30, 45, 90, 0.04) 1px, transparent 1px),
linear-gradient(90deg, rgba(30, 45, 90, 0.04) 1px, transparent 1px);
}
[data-theme="light"] .wfc-flagship-title {
color: var(--fc-heading);
}
[data-theme="light"] .wfc-flagship-text {
color: #5F7082;
}
[data-theme="light"] .wfc-flagship-tag {
background: rgba(61, 191, 169, 0.10);
border-color: rgba(61, 191, 169, 0.30);
color: #2a9d8f;
}
[data-theme="light"] .wfc-flagship-facts {
background: rgba(30, 45, 90, 0.03);
border-color: rgba(30, 45, 90, 0.08);
}
[data-theme="light"] .wfc-flagship-fact-num {
background: linear-gradient(135deg, var(--fc-accent), var(--fc-accent-2));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
[data-theme="light"] .wfc-flagship-fact-lbl {
color: #5F7082;
}
[data-theme="light"] .wfc-flagship-fact-sep {
background: linear-gradient(180deg, transparent, rgba(30, 45, 90, 0.16), transparent);
}
[data-theme="light"] .wfc-flagship-ring {
border-color: rgba(61, 191, 169, 0.28);
}
[data-theme="light"] .wfc-flagship-grid-lines line {
stroke: rgba(30, 45, 90, 0.10);
}
/* ── Responsive ── */
@media (max-width: 1024px) {
.wfc-pillars { grid-template-columns: repeat(4, 1fr); gap: 18px; }
.wfc-pillar { grid-column: span 2; }
.wfc-pillar-wide { grid-column: span 2; }
.wfc-flagship {
grid-template-columns: 1fr;
gap: 36px;
padding: 48px 40px;
}
.wfc-flagship-visual { height: 220px; }
.wfc-flagship-ring-1 { width: 200px; height: 200px; }
.wfc-flagship-ring-2 { width: 260px; height: 260px; }
.wfc-flagship-ring-3 { width: 320px; height: 320px; }
}
@media (max-width: 768px) {
.wfc-features-head { margin: 56px auto 36px; }
.wfc-features-title { font-size: 30px; }
.wfc-pillars { grid-template-columns: 1fr; gap: 14px; }
.wfc-pillar, .wfc-pillar-wide { grid-column: span 1; padding: 28px 24px; }
.wfc-pillar-icon { width: 48px; height: 48px; border-radius: 13px; }
.wfc-pillar-icon i { font-size: 20px; }
.wfc-pillar-num { font-size: 36px; }
.wfc-flagship { padding: 36px 26px; border-radius: 20px; }
.wfc-flagship-title { font-size: 26px; }
.wfc-flagship-text { font-size: 15px; }
.wfc-flagship-facts {
flex-wrap: wrap;
gap: 14px 18px;
padding: 14px 18px;
}
.wfc-flagship-fact-sep { display: none; }
.wfc-flagship-visual { height: 180px; }
.wfc-flagship-ring-1 { width: 160px; height: 160px; }
.wfc-flagship-ring-2 { width: 220px; height: 220px; }
.wfc-flagship-ring-3 { display: none; }
.wfc-flagship-rocket { width: 46px; height: 46px; font-size: 17px; }
}
@media (max-width: 480px) {
.wfc-features-title { font-size: 26px; }
.wfc-features-lead { font-size: 14.5px; }
.wfc-flagship-title { font-size: 22px; }
.wfc-flagship-cta { padding: 12px 14px 12px 22px; font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
.wfc-flagship-ring-1,
.wfc-flagship-ring-2,
.wfc-flagship-rocket,
.wfc-flagship-chart-line,
.wfc-flagship-chart-fill,
.wfc-flagship-chart-dots circle,
.wfc-flagship-tag-dot {
animation: none !important;
}
.wfc-flagship-chart-line { stroke-dashoffset: 0; }
.wfc-flagship-chart-fill { opacity: 1; }
.wfc-flagship-chart-dots circle { opacity: 1; }
}
/* ============================================================
TRAINING FRAMEWORK (tfw) — Credential card + phase rail
Blueprint aesthetic, dark/light theme aware, responsive
============================================================ */
.tfw {
position: relative;
background: var(--fc-bg);
padding: 120px 0;
overflow: hidden;
transition: background 0.4s ease;
}
/* Blueprint grid */
.tfw-grid-bg {
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
background-size: 56px 56px;
mask-image: radial-gradient(ellipse at center, #000 0%, transparent 78%);
-webkit-mask-image: radial-gradient(ellipse at center, #000 0%, transparent 78%);
pointer-events: none;
z-index: 0;
}
.tfw-aurora {
position: absolute;
border-radius: 50%;
filter: blur(100px);
pointer-events: none;
z-index: 0;
opacity: 0.4;
}
.tfw-aurora-a { top: 8%; left: -10%; width: 440px; height: 440px; background: radial-gradient(circle, rgba(61,191,169,0.38), transparent 70%); }
.tfw-aurora-b { bottom: 4%; right: -8%; width: 400px; height: 400px; background: radial-gradient(circle, rgba(26,123,175,0.30), transparent 70%); }
/* Section corner crosshairs (blueprint marks) */
.tfw-corner {
position: absolute;
width: 16px; height: 16px;
border: 1.5px solid rgba(61,191,169,0.4);
pointer-events: none;
z-index: 1;
}
.tfw-corner-tl { top: 28px; left: 28px; border-right: none; border-bottom: none; }
.tfw-corner-tr { top: 28px; right: 28px; border-left: none; border-bottom: none; }
.tfw-corner-bl { bottom: 28px; left: 28px; border-right: none; border-top: none; }
.tfw-corner-br { bottom: 28px; right: 28px; border-left: none; border-top: none; }
.tfw .container { position: relative; z-index: 2; }
/* ── Header ── */
.tfw-head {
text-align: center;
max-width: 820px;
margin: 0 auto 64px;
}
.tfw-eyebrow {
display: inline-flex;
align-items: center;
gap: 12px;
font-size: 11.5px;
font-weight: 800;
letter-spacing: 3px;
color: var(--fc-accent);
margin-bottom: 22px;
text-transform: uppercase;
}
.tfw-eyebrow i { font-size: 12px; }
.tfw-eyebrow-line {
width: 40px;
height: 1px;
background: linear-gradient(90deg, transparent, var(--fc-accent));
}
.tfw-eyebrow-line:last-child { background: linear-gradient(90deg, var(--fc-accent), transparent); }
.tfw-title {
font-family: "Plus Jakarta Sans", sans-serif;
font-size: 44px;
font-weight: 800;
color: var(--fc-heading);
line-height: 1.14;
letter-spacing: -0.9px;
margin: 0 0 20px;
}
.tfw-title em {
font-style: italic;
font-weight: 700;
background: linear-gradient(135deg, var(--fc-accent), var(--fc-accent-2));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.tfw-lead {
font-size: 17px;
line-height: 1.75;
color: var(--fc-text-muted);
margin: 0 auto;
max-width: 700px;
}
.tfw-lead strong {
color: var(--fc-heading);
font-weight: 700;
background: linear-gradient(120deg, transparent 0%, rgba(61,191,169,0.22) 0%);
padding: 0 4px;
border-radius: 3px;
}
/* ── Body layout ── */
.tfw-body {
display: grid;
grid-template-columns: 5fr 7fr;
gap: 44px;
align-items: start;
}
/* ── LEFT: Credential card ── */
.tfw-credential {
position: relative;
padding: 44px 40px 40px;
border-radius: 22px;
background:
linear-gradient(160deg, rgba(61,191,169,0.08) 0%, transparent 55%),
var(--fc-card);
border: 1px solid var(--fc-card-border);
overflow: hidden;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
transition: transform 0.45s ease, box-shadow 0.45s ease, border-color 0.3s ease;
}
.tfw-credential::before {
content: '';
position: absolute;
left: 0; top: 0; bottom: 0;
width: 3px;
background: linear-gradient(180deg, var(--fc-accent), var(--fc-accent-2));
}
.tfw-credential::after {
content: '';
position: absolute;
bottom: -120px; right: -120px;
width: 260px; height: 260px;
border-radius: 50%;
background: radial-gradient(circle, rgba(61,191,169,0.22), transparent 70%);
filter: blur(30px);
pointer-events: none;
}
.tfw-credential-top {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 28px;
}
.tfw-credential-tag {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 10.5px;
font-weight: 800;
letter-spacing: 2px;
color: var(--fc-accent);
padding: 6px 12px;
border-radius: 100px;
background: var(--fc-accent-glow);
border: 1px solid rgba(61,191,169,0.24);
}
.tfw-credential-tag-dot {
width: 6px; height: 6px;
border-radius: 50%;
background: var(--fc-accent);
box-shadow: 0 0 0 3px rgba(61,191,169,0.2);
animation: tfwTagDot 2.2s ease-in-out infinite;
}
@keyframes tfwTagDot {
0%,100% { box-shadow: 0 0 0 3px rgba(61,191,169,0.2); }
50% { box-shadow: 0 0 0 6px rgba(61,191,169,0.06); }
}
.tfw-credential-code {
font-family: "JetBrains Mono", "Consolas", monospace;
font-size: 11px;
font-weight: 600;
letter-spacing: 1.5px;
color: var(--fc-text-muted);
opacity: 0.7;
}
.tfw-credential-intro {
font-size: 12px;
letter-spacing: 1.5px;
font-weight: 700;
text-transform: uppercase;
color: var(--fc-text-muted);
margin: 0 0 10px;
}
.tfw-credential-signature {
font-family: "Caveat", "Brush Script MT", cursive;
font-size: 48px;
font-weight: 600;
line-height: 1;
color: var(--fc-heading);
letter-spacing: 0.5px;
margin-bottom: 8px;
position: relative;
z-index: 1;
}
.tfw-credential-role {
font-size: 11px;
letter-spacing: 2px;
font-weight: 800;
color: var(--fc-accent);
margin: 0 0 32px;
padding-bottom: 24px;
border-bottom: 1px dashed var(--fc-card-border);
}
/* Rank badge */
.tfw-credential-badge {
display: grid;
grid-template-columns: auto auto;
grid-template-rows: auto auto;
column-gap: 14px;
row-gap: 2px;
align-items: center;
padding: 16px 18px;
border-radius: 14px;
background:
linear-gradient(135deg, rgba(61,191,169,0.12), rgba(26,123,175,0.10)),
var(--fc-bg-alt);
border: 1px solid rgba(61,191,169,0.25);
margin-bottom: 24px;
position: relative;
overflow: hidden;
}
.tfw-credential-badge::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.08) 50%, transparent 70%);
transform: translateX(-100%);
animation: tfwBadgeSheen 6s ease-in-out infinite;
}
@keyframes tfwBadgeSheen {
0%,40% { transform: translateX(-100%); }
60% { transform: translateX(120%); }
100% { transform: translateX(120%); }
}
.tfw-credential-badge-rank {
grid-row: 1 / span 2;
font-family: "Plus Jakarta Sans", sans-serif;
font-size: 44px;
font-weight: 900;
line-height: 1;
background: linear-gradient(135deg, var(--fc-accent), var(--fc-accent-2));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
letter-spacing: -2px;
position: relative;
z-index: 1;
}
.tfw-credential-badge-label {
display: flex;
flex-direction: column;
font-size: 12px;
font-weight: 800;
letter-spacing: 2px;
color: var(--fc-heading);
line-height: 1.25;
position: relative;
z-index: 1;
}
.tfw-credential-badge-sub {
grid-column: 2;
font-size: 10.5px;
color: var(--fc-text-muted);
letter-spacing: 0.4px;
margin-top: 4px;
position: relative;
z-index: 1;
}
/* Stats */
.tfw-credential-stats {
display: flex;
align-items: center;
gap: 18px;
}
.tfw-credential-stat { display: flex; flex-direction: column; gap: 3px; }
.tfw-credential-stat-num {
font-family: "Plus Jakarta Sans", sans-serif;
font-size: 22px;
font-weight: 800;
color: var(--fc-heading);
letter-spacing: -0.4px;
line-height: 1;
}
.tfw-credential-stat-lbl {
font-size: 10.5px;
font-weight: 700;
letter-spacing: 1.2px;
text-transform: uppercase;
color: var(--fc-text-muted);
}
.tfw-credential-stat-sep {
width: 1px; height: 32px;
background: linear-gradient(180deg, transparent, var(--fc-card-border), transparent);
}
/* Official seal */
.tfw-seal {
position: absolute;
bottom: 24px;
right: 24px;
width: 96px;
height: 96px;
opacity: 0.85;
pointer-events: none;
}
.tfw-seal svg { width: 100%; height: 100%; animation: tfwSealSpin 30s linear infinite; }
@keyframes tfwSealSpin { to { transform: rotate(360deg); } }
.tfw-seal-ring-outer { stroke: var(--fc-accent); stroke-width: 1; opacity: 0.5; }
.tfw-seal-ring-inner { stroke: var(--fc-accent); stroke-width: 0.5; stroke-dasharray: 2 3; opacity: 0.4; }
.tfw-seal-text {
font-family: "Plus Jakarta Sans", sans-serif;
font-size: 6.5px;
font-weight: 800;
letter-spacing: 1.4px;
fill: var(--fc-accent);
opacity: 0.75;
}
.tfw-seal-mark circle,
.tfw-seal-mark path {
stroke: var(--fc-accent);
stroke-width: 1.5;
opacity: 0.75;
}
/* ── RIGHT: Framework phases rail ── */
.tfw-framework {
position: relative;
padding-top: 4px;
}
.tfw-framework-label {
display: inline-block;
font-size: 10.5px;
font-weight: 800;
letter-spacing: 3px;
color: var(--fc-text-muted);
margin-bottom: 20px;
padding-left: 52px;
position: relative;
}
.tfw-framework-label::before {
content: '';
position: absolute;
left: 16px; top: 50%;
width: 28px;
height: 1px;
background: var(--fc-accent);
}
/* Phase list */
.tfw-phases {
list-style: none;
padding: 0;
margin: 0;
position: relative;
}
/* Vertical gradient rail */
.tfw-phases::before {
content: '';
position: absolute;
left: 22px;
top: 14px;
bottom: 14px;
width: 2px;
background: linear-gradient(180deg,
rgba(61,191,169,0.6) 0%,
rgba(26,123,175,0.6) 35%,
rgba(155,108,247,0.6) 65%,
rgba(245,158,11,0.6) 100%);
border-radius: 2px;
opacity: 0.55;
}
.tfw-phase {
position: relative;
padding: 22px 22px 22px 60px;
margin-bottom: 14px;
border-radius: 16px;
background: transparent;
border: 1px solid transparent;
transition: transform 0.45s cubic-bezier(0.2,0.8,0.2,1), background 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}
.tfw-phase:last-child { margin-bottom: 0; }
.tfw-phase:hover {
transform: translateX(6px);
background:
linear-gradient(135deg, rgba(var(--tp), 0.10) 0%, transparent 60%),
rgba(255,255,255,0.015);
border-color: rgba(var(--tp), 0.22);
box-shadow: 0 14px 30px rgba(var(--tp), 0.14);
}
/* Phase node on the rail */
.tfw-phase-node {
position: absolute;
left: 14px;
top: 30px;
width: 18px; height: 18px;
border-radius: 50%;
background: var(--fc-bg);
border: 2px solid rgb(var(--tp));
transition: transform 0.4s ease, background 0.4s ease, box-shadow 0.4s ease;
z-index: 1;
}
.tfw-phase-node::after {
content: '';
position: absolute;
inset: 3px;
border-radius: 50%;
background: rgb(var(--tp));
opacity: 0.35;
transition: opacity 0.4s ease, transform 0.4s ease;
}
.tfw-phase:hover .tfw-phase-node {
transform: scale(1.12);
box-shadow: 0 0 0 6px rgba(var(--tp), 0.12);
}
.tfw-phase:hover .tfw-phase-node::after { opacity: 1; transform: scale(1); }
.tfw-phase-head {
display: flex;
align-items: center;
gap: 14px;
margin-bottom: 8px;
}
.tfw-phase-num {
font-family: "Plus Jakarta Sans", sans-serif;
font-size: 13px;
font-weight: 800;
letter-spacing: 2px;
color: rgb(var(--tp));
padding: 3px 9px;
border-radius: 5px;
background: rgba(var(--tp), 0.12);
border: 1px solid rgba(var(--tp), 0.22);
line-height: 1;
}
.tfw-phase-icon {
width: 36px; height: 36px;
border-radius: 10px;
background: linear-gradient(135deg, rgb(var(--tp)), rgba(var(--tp), 0.75));
display: flex;
align-items: center;
justify-content: center;
transition: transform 0.45s cubic-bezier(0.2,0.8,0.2,1);
}
.tfw-phase-icon i { font-size: 15px; color: #fff; }
.tfw-phase:hover .tfw-phase-icon { transform: rotate(-6deg) scale(1.06); }
.tfw-phase-title {
font-family: "Plus Jakarta Sans", sans-serif;
font-size: 19px;
font-weight: 800;
color: var(--fc-heading);
margin: 0;
letter-spacing: -0.2px;
}
.tfw-phase-text {
font-size: 14.5px;
line-height: 1.72;
color: var(--fc-text-muted);
margin: 0;
padding-left: 50px;
}
/* ── Light theme ── */
[data-theme="light"] .tfw-grid-bg {
background-image:
linear-gradient(rgba(30,45,90,0.05) 1px, transparent 1px),
linear-gradient(90deg, rgba(30,45,90,0.05) 1px, transparent 1px);
}
[data-theme="light"] .tfw-aurora-a { background: radial-gradient(circle, rgba(61,191,169,0.22), transparent 70%); }
[data-theme="light"] .tfw-aurora-b { background: radial-gradient(circle, rgba(26,123,175,0.18), transparent 70%); }
[data-theme="light"] .tfw-corner { border-color: rgba(61,191,169,0.45); }
[data-theme="light"] .tfw-credential {
background:
linear-gradient(160deg, rgba(61,191,169,0.08) 0%, transparent 55%),
#ffffff;
box-shadow: 0 12px 36px rgba(30,45,90,0.08);
}
[data-theme="light"] .tfw-credential-badge {
background:
linear-gradient(135deg, rgba(61,191,169,0.10), rgba(26,123,175,0.08)),
#F7FAFE;
}
[data-theme="light"] .tfw-phase:hover {
background:
linear-gradient(135deg, rgba(var(--tp), 0.10) 0%, transparent 60%),
#ffffff;
box-shadow: 0 14px 30px rgba(var(--tp), 0.15), 0 4px 14px rgba(30,45,90,0.05);
}
[data-theme="light"] .tfw-phase-node {
background: #ffffff;
}
/* ── Responsive ── */
@media (max-width: 1024px) {
.tfw-body { grid-template-columns: 1fr; gap: 36px; }
.tfw-seal { opacity: 0.6; }
}
@media (max-width: 768px) {
.tfw { padding: 80px 0; }
.tfw-head { margin-bottom: 48px; }
.tfw-title { font-size: 32px; letter-spacing: -0.5px; }
.tfw-lead { font-size: 15.5px; }
.tfw-corner { display: none; }
.tfw-credential { padding: 32px 24px 28px; }
.tfw-credential-signature { font-size: 40px; }
.tfw-credential-badge-rank { font-size: 38px; }
.tfw-credential-badge-label { font-size: 11px; }
.tfw-seal { width: 72px; height: 72px; bottom: 18px; right: 18px; }
.tfw-phase { padding: 18px 18px 18px 54px; }
.tfw-phase-text { padding-left: 0; }
.tfw-phase-title { font-size: 17px; }
.tfw-framework-label { padding-left: 48px; font-size: 10px; }
}
@media (max-width: 480px) {
.tfw-title { font-size: 26px; }
.tfw-credential-signature { font-size: 34px; }
.tfw-credential-stats { gap: 14px; }
.tfw-credential-stat-num { font-size: 19px; }
.tfw-credential-badge {
grid-template-columns: auto 1fr;
padding: 14px 16px;
}
.tfw-credential-badge-rank { font-size: 34px; }
.tfw-seal { width: 60px; height: 60px; }
.tfw-phase-head { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
.tfw-credential-tag-dot,
.tfw-credential-badge::before,
.tfw-seal svg,
.tfw-phase,
.tfw-phase-icon,
.tfw-phase-node { animation: none !important; transition: none !important; }
}
/* ── CTA Banner ── */
.tfw-cta {
position: relative;
margin-top: 64px;
padding: 40px 48px;
border-radius: 22px;
background:
linear-gradient(135deg, rgba(61,191,169,0.14) 0%, rgba(26,123,175,0.08) 55%, transparent 100%),
linear-gradient(160deg, #0f1f3d 0%, #0b172e 50%, #081428 100%);
border: 1px solid rgba(61,191,169,0.22);
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
gap: 36px;
overflow: hidden;
box-shadow: 0 22px 54px rgba(0,0,0,0.28);
}
.tfw-cta-bar {
position: absolute;
left: 0; top: 14%; bottom: 14%;
width: 3px;
background: linear-gradient(180deg, var(--fc-accent), var(--fc-accent-2));
border-radius: 0 3px 3px 0;
pointer-events: none;
}
.tfw-cta-glow {
position: absolute;
border-radius: 50%;
filter: blur(80px);
pointer-events: none;
opacity: 0.55;
}
.tfw-cta-glow-a { top: -140px; left: 8%; width: 340px; height: 340px; background: radial-gradient(circle, rgba(61,191,169,0.38), transparent 70%); }
.tfw-cta-glow-b { bottom: -140px; right: 5%; width: 300px; height: 300px; background: radial-gradient(circle, rgba(26,123,175,0.32), transparent 70%); }
.tfw-cta-grid {
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
background-size: 40px 40px;
mask-image: radial-gradient(ellipse at center, #000 0%, transparent 85%);
-webkit-mask-image: radial-gradient(ellipse at center, #000 0%, transparent 85%);
pointer-events: none;
opacity: 0.6;
}
.tfw-cta-corner {
position: absolute;
width: 14px; height: 14px;
border: 1.5px solid rgba(61,191,169,0.4);
pointer-events: none;
}
.tfw-cta-corner-tr { top: 14px; right: 14px; border-left: none; border-bottom: none; border-radius: 0 4px 0 0; }
.tfw-cta-corner-bl { bottom: 14px; left: 14px; border-right: none; border-top: none; border-radius: 0 0 0 4px; }
/* Content */
.tfw-cta-content { position: relative; z-index: 1; }
.tfw-cta-tag {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 12px;
border-radius: 100px;
background: rgba(61,191,169,0.12);
border: 1px solid rgba(61,191,169,0.28);
color: var(--fc-accent);
font-size: 10.5px;
font-weight: 800;
letter-spacing: 2px;
margin-bottom: 16px;
}
.tfw-cta-tag-dot {
width: 6px; height: 6px;
border-radius: 50%;
background: var(--fc-accent);
box-shadow: 0 0 0 3px rgba(61,191,169,0.18);
animation: tfwCtaDot 2s ease-in-out infinite;
}
@keyframes tfwCtaDot {
0%,100% { box-shadow: 0 0 0 3px rgba(61,191,169,0.18); }
50% { box-shadow: 0 0 0 6px rgba(61,191,169,0.04); }
}
.tfw-cta-title {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 26px;
font-weight: 800;
color: #ffffff;
letter-spacing: -0.4px;
line-height: 1.22;
margin: 0 0 12px;
}
.tfw-cta-title em {
font-style: italic;
font-weight: 700;
background: linear-gradient(135deg, var(--fc-accent), var(--fc-accent-2));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.tfw-cta-text {
font-size: 14.5px;
line-height: 1.65;
color: rgba(255,255,255,0.72);
margin: 0;
max-width: 600px;
}
/* Side: micro-chip + CTA button */
.tfw-cta-side {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 14px;
}
.tfw-cta-chip {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 12px;
border-radius: 100px;
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.10);
color: rgba(255,255,255,0.78);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.4px;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.tfw-cta-chip i { color: var(--fc-accent); font-size: 11px; }
/* CTA button — distinctive with shimmer */
.tfw-cta-btn {
position: relative;
display: inline-flex;
align-items: center;
gap: 12px;
padding: 14px 18px 14px 26px;
border-radius: 100px;
background: linear-gradient(135deg, var(--fc-accent), var(--fc-accent-2));
color: #ffffff;
font-size: 14.5px;
font-weight: 700;
letter-spacing: 0.4px;
text-decoration: none;
box-shadow: 0 14px 28px rgba(61,191,169,0.32);
overflow: hidden;
isolation: isolate;
transition: transform 0.4s ease, box-shadow 0.4s ease;
white-space: nowrap;
}
.tfw-cta-btn::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.32) 50%, transparent 70%);
transform: translateX(-100%);
transition: transform 0.75s ease;
z-index: -1;
}
.tfw-cta-btn:hover {
transform: translateY(-3px);
box-shadow: 0 22px 44px rgba(61,191,169,0.48);
}
.tfw-cta-btn:hover::before { transform: translateX(100%); }
.tfw-cta-btn-arrow {
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px; height: 30px;
border-radius: 50%;
background: rgba(255,255,255,0.22);
font-size: 12px;
transition: transform 0.35s ease, background 0.35s ease;
}
.tfw-cta-btn:hover .tfw-cta-btn-arrow {
transform: translateX(3px) translateY(-3px);
background: rgba(255,255,255,0.36);
}
/* Light theme */
[data-theme="light"] .tfw-cta {
background:
linear-gradient(135deg, rgba(61,191,169,0.10) 0%, rgba(26,123,175,0.06) 55%, transparent 100%),
#ffffff;
border-color: rgba(30,45,90,0.10);
box-shadow: 0 18px 44px rgba(30,45,90,0.08);
}
[data-theme="light"] .tfw-cta-glow-a { background: radial-gradient(circle, rgba(61,191,169,0.22), transparent 70%); }
[data-theme="light"] .tfw-cta-glow-b { background: radial-gradient(circle, rgba(26,123,175,0.18), transparent 70%); }
[data-theme="light"] .tfw-cta-grid {
background-image:
linear-gradient(rgba(30,45,90,0.05) 1px, transparent 1px),
linear-gradient(90deg, rgba(30,45,90,0.05) 1px, transparent 1px);
}
[data-theme="light"] .tfw-cta-corner { border-color: rgba(61,191,169,0.5); }
[data-theme="light"] .tfw-cta-title { color: var(--fc-heading); }
[data-theme="light"] .tfw-cta-text { color: #5F7082; }
[data-theme="light"] .tfw-cta-chip {
background: rgba(30,45,90,0.04);
border-color: rgba(30,45,90,0.10);
color: #5F7082;
}
/* Responsive */
@media (max-width: 1024px) {
.tfw-cta { padding: 36px 36px; gap: 28px; }
.tfw-cta-title { font-size: 23px; }
}
@media (max-width: 768px) {
.tfw-cta {
grid-template-columns: 1fr;
padding: 30px 26px;
gap: 24px;
}
.tfw-cta-title { font-size: 21px; }
.tfw-cta-text { font-size: 14px; }
.tfw-cta-side { align-items: flex-start; }
}
@media (max-width: 480px) {
.tfw-cta { padding: 26px 22px; margin-top: 48px; }
.tfw-cta-title { font-size: 19px; }
.tfw-cta-corner { display: none; }
.tfw-cta-side { width: 100%; }
.tfw-cta-btn {
width: 100%;
justify-content: space-between;
padding: 14px 16px 14px 22px;
}
}
@media (prefers-reduced-motion: reduce) {
.tfw-cta-tag-dot { animation: none !important; }
.tfw-cta-btn, .tfw-cta-btn::before, .tfw-cta-btn-arrow { transition: none !important; }
}
/* ============================================================
OUR MOMENTS — Photo gallery with parallel scrolling rows
============================================================ */
.moments-section {
background: var(--fc-bg);
padding: 100px 0 80px;
overflow: hidden;
transition: background 0.4s ease;
contain: layout style;
}
/* Header */
.moments-header {
margin-bottom: 50px;
}
.moments-badge {
display: inline-block;
font-size: 12px;
font-weight: 700;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--fc-accent);
margin-bottom: 16px;
}
.moments-title {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 44px;
font-weight: 800;
color: var(--fc-heading);
margin: 0 0 14px;
line-height: 1.15;
}
.moments-subtitle {
font-size: 16px;
color: var(--fc-text-muted);
margin: 0 auto;
max-width: 520px;
line-height: 1.6;
}
/* Track wrapper — edge fade via mask */
.moments-track-wrap {
position: relative;
width: 100%;
overflow: hidden;
margin-bottom: 20px;
-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
}
.moments-track-wrap:last-child {
margin-bottom: 0;
}
/* The scrolling track — GPU-accelerated */
.moments-track {
display: flex;
gap: 18px;
width: max-content;
will-change: transform;
transform: translate3d(0, 0, 0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
/* Row 1 — scrolls left */
.moments-scroll-left {
animation: momentsLeft 45s linear infinite;
}
/* Row 2 — scrolls right */
.moments-scroll-right {
animation: momentsRight 50s linear infinite;
}
@keyframes momentsLeft {
0% { transform: translate3d(0, 0, 0); }
100% { transform: translate3d(-50%, 0, 0); }
}
@keyframes momentsRight {
0% { transform: translate3d(-50%, 0, 0); }
100% { transform: translate3d(0, 0, 0); }
}
/* Pause on hover */
.moments-track-wrap:hover .moments-track {
animation-play-state: paused;
}
/* Individual photo card */
.moment-img {
flex-shrink: 0;
width: 260px;
height: 190px;
border-radius: 14px;
overflow: hidden;
position: relative;
border: 3px solid var(--fc-card-border);
background: var(--fc-card);
box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08);
transition: border-color 0.3s ease, box-shadow 0.3s ease;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
transform: translateZ(0);
}
.moment-img a {
display: block;
width: 100%;
height: 100%;
position: relative;
}
.moment-img a::after {
content: "\f00e";
font-family: "Font Awesome 6 Free";
font-weight: 900;
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 26px;
color: #fff;
background: rgba(61, 191, 169, 0.45);
opacity: 0;
transition: opacity 0.3s ease;
border-radius: inherit;
}
.moment-img:hover a::after {
opacity: 1;
}
.moment-img img {
width: 100%;
height: 100%;
object-fit: contain;
object-position: center center;
display: block;
background: #0c1424;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
transform: translateZ(0);
}
.moment-img:hover {
border-color: var(--fc-accent);
box-shadow: 0 12px 40px rgba(61, 191, 169, 0.15);
z-index: 3;
cursor: pointer;
}
/* ---- Responsive ---- */
@media (max-width: 768px) {
.moments-section { padding: 70px 0 60px; }
.moments-title { font-size: 32px; }
.moment-img { width: 200px; height: 150px; }
.moments-track { gap: 14px; }
}
@media (max-width: 480px) {
.moments-title { font-size: 26px; }
.moment-img { width: 170px; height: 130px; border-radius: 10px; }
}
/* ============================================================
PARTNER FEEDBACK — Testimonial slider (clean card style)
============================================================ */
/* ═══════════════════════════════════════════════════════════════
FC FEEDBACK - 30/70 Split Layout with Premium Animations
═══════════════════════════════════════════════════════════════ */
.fc-feedback-section {
position: relative;
background: var(--fc-bg);
padding: 110px 0 100px;
overflow: hidden;
transition: background 0.4s ease;
}
.fc-feedback-bg-glow {
position: absolute;
border-radius: 50%;
filter: blur(120px);
pointer-events: none;
}
.fc-feedback-bg-glow-1 {
width: 400px; height: 350px;
background: rgba(61,191,169,0.06);
top: -50px; right: 10%;
}
.fc-feedback-bg-glow-2 {
width: 300px; height: 300px;
background: rgba(155,108,247,0.04);
bottom: -40px; left: 5%;
}
/* 30/70 Layout */
.fc-feedback-layout {
display: flex;
gap: 60px;
align-items: flex-start;
}
.fc-feedback-left {
flex: 0 0 30%;
max-width: 30%;
position: sticky;
top: 120px;
}
.fc-feedback-right {
flex: 0 0 70%;
max-width: 70%;
min-width: 0;
}
/* Badge */
.fc-feedback-badge {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 11px;
font-weight: 700;
letter-spacing: 2.5px;
text-transform: uppercase;
color: var(--fc-accent, #3DBFA9);
margin-bottom: 20px;
}
.fc-feedback-badge i {
font-size: 14px;
opacity: 0.7;
}
/* Title */
.fc-feedback-title {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 36px;
font-weight: 800;
color: var(--fc-heading);
line-height: 1.25;
margin: 0 0 18px;
transition: color 0.4s ease;
}
.fc-feedback-title-accent {
color: var(--fc-accent, #3DBFA9);
}
/* Description */
.fc-feedback-desc {
font-size: 15px;
line-height: 1.7;
color: var(--fc-text-muted);
margin: 0 0 32px;
transition: color 0.4s ease;
}
/* Mini stats */
.fc-feedback-stats {
display: flex;
gap: 24px;
margin-bottom: 36px;
}
.fc-feedback-stat {
display: flex;
flex-direction: column;
}
.fc-feedback-stat-num {
font-size: 28px;
font-weight: 800;
color: var(--fc-heading);
line-height: 1.2;
transition: color 0.4s ease;
}
.fc-feedback-stat-label {
font-size: 13px;
color: var(--fc-text-muted);
font-weight: 500;
margin-top: 2px;
transition: color 0.4s ease;
}
/* Navigation */
.fc-feedback-nav {
display: inline-flex;
align-items: center;
gap: 12px;
}
.fc-feedback-prev,
.fc-feedback-next {
width: 46px; height: 46px;
border-radius: 50%;
border: 1px solid var(--fc-card-border, rgba(255,255,255,0.1));
background: var(--fc-card, rgba(255,255,255,0.04));
color: var(--fc-text-muted);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
font-size: 14px;
transition: all 0.35s ease;
position: static !important;
}
.fc-feedback-prev:hover,
.fc-feedback-next:hover {
background: var(--fc-accent, #3DBFA9);
border-color: var(--fc-accent, #3DBFA9);
color: #ffffff;
transform: scale(1.1);
box-shadow: 0 4px 20px rgba(61,191,169,0.25);
}
.fc-feedback-dots {
display: flex;
align-items: center;
gap: 6px;
}
.fc-feedback-dots .swiper-pagination-bullet {
width: 8px; height: 8px;
border-radius: 50%;
background: var(--fc-card-border);
opacity: 1;
transition: all 0.35s ease;
cursor: pointer;
}
.fc-feedback-dots .swiper-pagination-bullet-active {
background: var(--fc-accent, #3DBFA9);
width: 24px;
border-radius: 10px;
}
/* ── Slider ── */
.fc-feedback-right {
overflow: hidden;
}
.fc-feedback-swiper {
overflow: hidden !important;
}
/* Card */
.fc-feedback-card {
background: var(--fc-card);
border: 1px solid var(--fc-card-border);
border-radius: 24px;
padding: 40px 36px 36px;
position: relative;
transition: all 0.4s ease;
overflow: hidden;
}
.fc-feedback-card::before {
content: "";
position: absolute;
top: 0; left: 0;
width: 100%; height: 4px;
background: linear-gradient(90deg, var(--fc-accent, #3DBFA9), rgba(26,123,175,0.6), rgba(155,108,247,0.5));
opacity: 0;
transition: opacity 0.4s ease;
}
.fc-feedback-swiper .swiper-slide-active .fc-feedback-card::before {
opacity: 1;
}
.fc-feedback-swiper .swiper-slide-active .fc-feedback-card {
box-shadow: 0 12px 48px rgba(0,0,0,0.08);
}
/* Card top row */
.fc-feedback-card-top {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 24px;
}
.fc-feedback-quote {
width: 48px; height: 48px;
border-radius: 14px;
background: linear-gradient(135deg, rgba(61,191,169,0.12), rgba(26,123,175,0.08));
display: flex;
align-items: center;
justify-content: center;
}
.fc-feedback-quote i {
font-size: 20px;
color: var(--fc-accent, #3DBFA9);
}
.fc-feedback-rating {
display: flex;
gap: 3px;
}
.fc-feedback-rating i {
font-size: 14px;
color: #F5A623;
}
/* Text */
.fc-feedback-text {
font-size: 16px;
line-height: 1.8;
color: var(--fc-text);
margin: 0 0 28px;
transition: color 0.4s ease;
}
/* Author */
.fc-feedback-author {
display: flex;
align-items: center;
gap: 14px;
padding-top: 20px;
border-top: 1px solid var(--fc-card-border);
}
.fc-feedback-avatar {
width: 44px; height: 44px;
border-radius: 50%;
background: linear-gradient(135deg, rgba(61,191,169,0.15), rgba(26,123,175,0.10));
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
font-family: 'Plus Jakarta Sans', sans-serif;
font-weight: 700;
font-size: 14px;
letter-spacing: 0.02em;
}
.fc-feedback-avatar i {
font-size: 16px;
color: var(--fc-accent, #3DBFA9);
}
.fc-feedback-avatar--teal { background: rgba(61,191,169,0.20); color: #6FE3CC; }
.fc-feedback-avatar--peach { background: rgba(244, 96, 54, 0.18); color: #FFB48A; }
.fc-feedback-avatar--blue { background: rgba(100,149,237,0.20); color: #A9C7F7; }
.fc-feedback-badge {
margin-left: auto;
display: inline-flex;
align-items: center;
padding: 5px 12px;
border-radius: 999px;
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.04em;
border: 1px solid transparent;
white-space: nowrap;
}
.fc-feedback-badge--client {
background: rgba(61,191,169,0.12);
color: #6FE3CC;
border-color: rgba(61,191,169,0.28);
}
.fc-feedback-badge--team {
background: rgba(244, 158, 76, 0.12);
color: #FFC48A;
border-color: rgba(244, 158, 76, 0.30);
}
.fc-feedback-author-info h4 {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 15px;
font-weight: 700;
color: var(--fc-heading);
margin: 0 0 2px;
transition: color 0.4s ease;
}
.fc-feedback-author-info span {
font-size: 13px;
font-weight: 500;
color: var(--fc-accent, #3DBFA9);
}
/* ── Responsive ── */
@media (max-width: 991px) {
.fc-feedback-layout {
flex-direction: column;
gap: 40px;
}
.fc-feedback-left,
.fc-feedback-right {
flex: 0 0 100%;
max-width: 100%;
position: static;
}
.fc-feedback-left {
text-align: center;
}
.fc-feedback-stats {
justify-content: center;
}
.fc-feedback-nav {
justify-content: center;
}
.fc-feedback-title { font-size: 32px; }
.fc-feedback-swiper { overflow: hidden !important; }
}
@media (max-width: 767px) {
.fc-feedback-section { padding: 80px 0 70px; }
.fc-feedback-title { font-size: 28px; }
.fc-feedback-card { padding: 32px 24px 28px; border-radius: 18px; }
.fc-feedback-text { font-size: 15px; }
}
@media (max-width: 480px) {
.fc-feedback-title { font-size: 24px; }
.fc-feedback-card { padding: 28px 20px 24px; border-radius: 16px; }
}
/* ============================================================
CAREER PAGE — jot-* classes
============================================================ */
/* ── Section wrapper ── */
.jot-section {
position: relative;
background: var(--fc-bg);
padding: 140px 0 100px;
overflow: hidden;
transition: background 0.4s ease;
}
/* ── Decorative orbs ── */
.jot-orb {
position: absolute;
border-radius: 50%;
filter: blur(120px);
pointer-events: none;
}
.jot-orb-1 {
width: 500px; height: 400px;
background: rgba(61,191,169,0.07);
top: -80px; right: 5%;
}
.jot-orb-2 {
width: 350px; height: 350px;
background: rgba(155,108,247,0.05);
bottom: 10%; left: -5%;
}
/* ── Hero area ── */
.jot-hero {
position: relative;
padding-bottom: 80px;
}
/* Floating decorative icons */
.jot-hero-float {
position: absolute;
width: 48px; height: 48px;
border-radius: 14px;
background: var(--fc-card, rgba(255,255,255,0.04));
border: 1px solid var(--fc-card-border, rgba(255,255,255,0.08));
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
color: var(--fc-accent, #3DBFA9);
animation: jotFloat 6s ease-in-out infinite;
pointer-events: none;
z-index: 1;
}
.jot-hero-float-1 { top: 5%; left: 8%; animation-delay: 0s; }
.jot-hero-float-2 { top: 10%; right: 10%; animation-delay: 1.5s; }
.jot-hero-float-3 { bottom: 25%; left: 5%; animation-delay: 3s; }
.jot-hero-float-4 { bottom: 20%; right: 8%; animation-delay: 4.5s; }
@keyframes jotFloat {
0%, 100% { transform: translateY(0) rotate(0deg); opacity: 0.5; }
50% { transform: translateY(-18px) rotate(8deg); opacity: 0.9; }
}
/* ── Top label mark ── */
.jot-hero-mark {
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
margin-bottom: 24px;
}
.jot-hero-mark-line {
width: 40px; height: 2px;
background: linear-gradient(90deg, transparent, var(--fc-accent, #3DBFA9));
border-radius: 2px;
}
.jot-hero-mark-line:last-child {
background: linear-gradient(90deg, var(--fc-accent, #3DBFA9), transparent);
}
.jot-hero-mark-text {
font-size: 11px;
font-weight: 700;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--fc-accent, #3DBFA9);
}
/* ── Premium badge ── */
.jot-badge {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 10px 22px;
border-radius: 50px;
background: var(--fc-card, rgba(255,255,255,0.04));
border: 1px solid var(--fc-card-border, rgba(255,255,255,0.08));
backdrop-filter: blur(8px);
margin-bottom: 32px;
}
.jot-badge-dot {
width: 8px; height: 8px;
border-radius: 50%;
background: #22C55E;
box-shadow: 0 0 8px rgba(34,197,94,0.5);
animation: jotPulse 2s ease-in-out infinite;
}
@keyframes jotPulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.6; transform: scale(1.3); }
}
.jot-badge-text {
font-size: 11px;
font-weight: 700;
letter-spacing: 2px;
color: var(--fc-text-muted, #8A95B0);
transition: color 0.4s ease;
}
.jot-badge-divider {
width: 1px; height: 14px;
background: var(--fc-card-border, rgba(255,255,255,0.12));
}
.jot-badge-count {
font-size: 12px;
font-weight: 700;
color: var(--fc-accent, #3DBFA9);
}
/* ── Title ── */
.jot-title {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 52px;
font-weight: 800;
color: var(--fc-heading, #fff);
line-height: 1.2;
margin: 0 0 24px;
transition: color 0.4s ease;
}
.jot-title-gradient {
position: relative;
display: inline-block;
background: linear-gradient(135deg, var(--fc-accent, #3DBFA9), #1A7BAF, #9B6CF7);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.jot-title-stroke {
position: absolute;
left: 0; bottom: -4px;
width: 100%; height: 14px;
}
/* ── Subtitle ── */
.jot-subtitle {
font-size: 16px;
line-height: 1.8;
color: var(--fc-text-muted, #8A95B0);
max-width: 620px;
margin: 0 auto 36px;
transition: color 0.4s ease;
}
/* ── Trust markers ── */
.jot-hero-markers {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 12px 24px;
margin-bottom: 40px;
}
.jot-marker {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 14px;
font-weight: 600;
color: var(--fc-text, #C9D1E0);
transition: color 0.4s ease;
}
.jot-marker-icon {
width: 24px; height: 24px;
border-radius: 50%;
background: linear-gradient(135deg, rgba(61,191,169,0.15), rgba(26,123,175,0.10));
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 10px;
color: var(--fc-accent, #3DBFA9);
}
/* ── Scroll cue ── */
.jot-hero-scroll {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
}
.jot-hero-scroll-line {
display: block;
width: 2px; height: 40px;
background: linear-gradient(180deg, var(--fc-accent, #3DBFA9), transparent);
border-radius: 2px;
animation: jotScrollPulse 2s ease-in-out infinite;
}
@keyframes jotScrollPulse {
0%, 100% { opacity: 0.4; height: 40px; }
50% { opacity: 1; height: 50px; }
}
.jot-hero-scroll-text {
font-size: 11px;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--fc-text-muted, #8A95B0);
transition: color 0.4s ease;
}
/* ── Positions header ── */
.jot-positions-header {
display: flex;
align-items: center;
gap: 20px;
margin-bottom: 40px;
padding-top: 20px;
}
.jot-positions-header h3 {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 28px;
font-weight: 800;
color: var(--fc-heading, #fff);
margin: 0;
white-space: nowrap;
transition: color 0.4s ease;
}
.jot-positions-line {
flex: 1;
height: 2px;
background: linear-gradient(90deg, var(--fc-card-border, rgba(255,255,255,0.1)), transparent);
border-radius: 2px;
}
/* ── Roles grid ── */
.jot-roles-grid {
display: flex;
flex-direction: column;
gap: 20px;
}
/* ── Role card ── */
.jot-role {
position: relative;
background: var(--fc-card, rgba(255,255,255,0.04));
border: 1px solid var(--fc-card-border, rgba(255,255,255,0.08));
border-radius: 20px;
padding: 36px 40px;
transition: all 0.4s ease;
overflow: hidden;
}
.jot-role::before {
content: "";
position: absolute;
top: 0; left: 0;
width: 100%; height: 3px;
background: linear-gradient(90deg, var(--fc-accent, #3DBFA9), #1A7BAF, #9B6CF7);
opacity: 0;
transition: opacity 0.4s ease;
}
.jot-role:hover {
transform: translateY(-4px);
box-shadow: 0 16px 48px rgba(0,0,0,0.1);
border-color: rgba(61,191,169,0.25);
}
.jot-role:hover::before {
opacity: 1;
}
/* Arrow link */
.jot-role-arrow {
position: absolute;
top: 32px; right: 36px;
width: 44px; height: 44px;
border-radius: 50%;
background: var(--fc-bg, rgba(255,255,255,0.04));
border: 1px solid var(--fc-card-border, rgba(255,255,255,0.08));
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 16px;
color: var(--fc-text-muted, #8A95B0);
transition: all 0.35s ease;
text-decoration: none;
}
.jot-role:hover .jot-role-arrow {
background: var(--fc-accent, #3DBFA9);
border-color: var(--fc-accent, #3DBFA9);
color: #fff;
transform: rotate(-0deg) scale(1.1);
box-shadow: 0 4px 20px rgba(61,191,169,0.3);
}
/* Role title */
.jot-role-title {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 22px;
font-weight: 700;
color: var(--fc-heading, #fff);
margin: 0 0 14px;
padding-right: 60px;
transition: color 0.4s ease;
}
/* Tags */
.jot-role-tags {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 16px;
}
.jot-role-tag {
display: inline-block;
padding: 5px 14px;
border-radius: 50px;
font-size: 12px;
font-weight: 600;
color: var(--fc-accent, #3DBFA9);
background: linear-gradient(135deg, rgba(61,191,169,0.10), rgba(26,123,175,0.06));
border: 1px solid rgba(61,191,169,0.15);
letter-spacing: 0.3px;
transition: all 0.3s ease;
}
.jot-role:hover .jot-role-tag {
background: linear-gradient(135deg, rgba(61,191,169,0.18), rgba(26,123,175,0.12));
border-color: rgba(61,191,169,0.3);
}
/* Description */
.jot-role-desc {
font-size: 15px;
line-height: 1.7;
color: var(--fc-text-muted, #8A95B0);
margin: 0 0 20px;
max-width: 680px;
transition: color 0.4s ease;
}
/* Apply button */
.jot-role-btn {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 14px;
font-weight: 700;
color: var(--fc-accent, #3DBFA9);
text-decoration: none;
transition: all 0.3s ease;
}
.jot-role-btn i {
font-size: 12px;
transition: transform 0.3s ease;
}
.jot-role-btn:hover {
color: var(--fc-heading, #fff);
}
.jot-role-btn:hover i {
transform: translateX(4px);
}
/* ── Career page responsive ── */
@media (max-width: 991px) {
.jot-section { padding: 120px 0 80px; }
.jot-title { font-size: 40px; }
.jot-hero-float { display: none; }
.jot-role { padding: 28px 28px; }
.jot-role-arrow { top: 24px; right: 24px; }
}
@media (max-width: 767px) {
.jot-section { padding: 100px 0 60px; }
.jot-title { font-size: 32px; }
.jot-subtitle { font-size: 15px; }
.jot-hero { padding-bottom: 50px; }
.jot-hero-markers { gap: 10px 16px; }
.jot-marker { font-size: 13px; }
.jot-positions-header h3 { font-size: 22px; }
.jot-role { padding: 24px 20px; border-radius: 16px; }
.jot-role-title { font-size: 19px; padding-right: 50px; }
.jot-role-arrow { top: 20px; right: 20px; width: 38px; height: 38px; font-size: 14px; }
.jot-role-tag { font-size: 11px; padding: 4px 12px; }
}
@media (max-width: 480px) {
.jot-title { font-size: 26px; }
.jot-badge { padding: 8px 16px; gap: 8px; }
.jot-badge-text { font-size: 10px; }
.jot-role-title { font-size: 17px; }
}
/* ============================================================
LEGAL HERO — legal-hero-* classes (Privacy Policy, Terms)
============================================================ */
.legal-hero {
position: relative;
background: var(--fc-bg);
padding: 160px 0 80px;
overflow: hidden;
transition: background 0.4s ease;
}
.legal-hero-orb {
position: absolute;
border-radius: 50%;
filter: blur(120px);
pointer-events: none;
}
.legal-hero-orb-1 {
width: 420px; height: 350px;
background: rgba(61,191,169,0.06);
top: -60px; right: 10%;
}
.legal-hero-orb-2 {
width: 300px; height: 300px;
background: rgba(155,108,247,0.04);
bottom: -40px; left: 5%;
}
.legal-hero-inner {
position: relative;
z-index: 1;
}
.legal-hero-badge {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 20px;
border-radius: 50px;
font-size: 11px;
font-weight: 700;
letter-spacing: 2.5px;
text-transform: uppercase;
color: var(--fc-accent, #3DBFA9);
background: var(--fc-card, rgba(255,255,255,0.04));
border: 1px solid var(--fc-card-border, rgba(255,255,255,0.08));
margin-bottom: 24px;
}
.legal-hero-badge i {
font-size: 14px;
}
.legal-hero-title {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 48px;
font-weight: 800;
color: var(--fc-heading, #fff);
line-height: 1.2;
margin: 0 0 18px;
transition: color 0.4s ease;
}
.legal-hero-sub {
font-size: 16px;
line-height: 1.8;
color: var(--fc-text-muted, #8A95B0);
max-width: 600px;
margin: 0 auto 28px;
transition: color 0.4s ease;
}
.legal-hero-breadcrumb {
display: inline-flex;
align-items: center;
gap: 10px;
font-size: 14px;
font-weight: 500;
}
.legal-hero-breadcrumb a {
color: var(--fc-text-muted, #8A95B0);
text-decoration: none;
transition: color 0.3s ease;
}
.legal-hero-breadcrumb a:hover {
color: var(--fc-accent, #3DBFA9);
}
.legal-hero-sep {
font-size: 10px;
color: var(--fc-text-muted, #8A95B0);
opacity: 0.5;
}
.legal-hero-current {
color: var(--fc-accent, #3DBFA9);
font-weight: 600;
}
/* Legal content theme support */
.legal-section {
background: var(--fc-bg);
transition: background 0.4s ease;
}
.legal-content {
background: var(--fc-card, #fff) !important;
border: 1px solid var(--fc-card-border, rgba(0,0,0,0.06));
box-shadow: 0 4px 30px rgba(0,0,0,0.06) !important;
}
.legal-content {
padding: 50px;
border-radius: 10px;
}
.legal-content h3 {
color: var(--fc-heading, #1E2D5A) !important;
margin-top: 40px;
margin-bottom: 20px;
}
.legal-content p,
.legal-content li {
color: var(--fc-text, #4A5568) !important;
line-height: 1.8;
}
.legal-content .legal-meta {
margin-bottom: 30px;
}
/* Legal hero responsive */
@media (max-width: 767px) {
.legal-hero { padding: 120px 0 60px; }
.legal-hero-title { font-size: 34px; }
.legal-hero-sub { font-size: 15px; }
}
@media (max-width: 480px) {
.legal-hero-title { font-size: 28px; }
}
/* ============================================================
ROLE APPLY PAGE — role-* classes
============================================================ */
/* ── Section ── */
.role-apply-section {
background: var(--fc-bg);
transition: background 0.4s ease;
}
/* ── Back link ── */
.role-back {
display: inline-flex;
align-items: center;
gap: 10px;
font-size: 14px;
font-weight: 600;
color: var(--fc-accent, #3DBFA9);
text-decoration: none;
margin-bottom: 40px;
transition: all 0.3s ease;
}
.role-back i {
font-size: 13px;
transition: transform 0.3s ease;
}
.role-back:hover {
color: var(--fc-heading, #fff);
}
.role-back:hover i {
transform: translateX(-4px);
}
/* ── Detail head ── */
.role-detail-head {
margin-bottom: 32px;
}
/* Badge pill */
.role-badge-pill {
display: inline-block;
padding: 7px 20px;
border-radius: 50px;
font-size: 11px;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--fc-accent, #3DBFA9);
background: rgba(61,191,169,0.08);
border: 1px solid rgba(61,191,169,0.18);
margin-bottom: 20px;
}
.role-category {
display: inline-block;
padding: 6px 18px;
border-radius: 50px;
font-size: 12px;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
color: var(--fc-accent, #3DBFA9);
background: linear-gradient(135deg, rgba(61,191,169,0.12), rgba(26,123,175,0.08));
border: 1px solid rgba(61,191,169,0.18);
margin-bottom: 20px;
}
/* Role title (h1) */
.role-title {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 42px;
font-weight: 800;
color: var(--fc-heading, #fff);
line-height: 1.15;
margin: 0 0 20px;
transition: color 0.4s ease;
}
/* Meta row */
.role-meta {
display: flex;
flex-wrap: wrap;
gap: 10px 28px;
}
.role-meta > span {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 14px;
font-weight: 500;
color: var(--fc-text-muted, #8A95B0);
transition: color 0.4s ease;
}
.role-meta > span i {
font-size: 14px;
color: var(--fc-accent, #3DBFA9);
}
/* ── Dividers ── */
.role-hr {
height: 1px;
background: var(--fc-card-border, rgba(255,255,255,0.08));
margin: 32px 0;
}
/* ── 2-Column Layout ── */
.role-layout {
display: grid;
grid-template-columns: 1fr 340px;
gap: 40px;
align-items: start;
}
.role-main {
min-width: 0;
}
.role-main .role-section {
max-width: 100%;
}
/* ── Sticky Sidebar ── */
.role-sidebar {
position: sticky;
top: 120px;
display: flex;
flex-direction: column;
gap: 20px;
}
/* Job Overview Card */
.role-overview-card {
background: var(--fc-card, rgba(255,255,255,0.04));
border: 1px solid var(--fc-card-border, rgba(255,255,255,0.08));
border-radius: 22px;
padding: 32px 28px 28px;
position: relative;
overflow: hidden;
}
.role-overview-card::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
background: linear-gradient(90deg, var(--fc-accent, #3DBFA9), var(--fc-accent-2, #1A7BAF));
}
.role-overview-heading {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 16px;
font-weight: 700;
color: var(--fc-heading, #fff) !important;
margin: 0 0 24px;
letter-spacing: 1.5px;
text-transform: uppercase;
}
/* Overview items */
.role-overview-item {
display: flex;
align-items: flex-start;
gap: 14px;
padding: 16px 0;
border-bottom: 1px solid var(--fc-card-border, rgba(255,255,255,0.06));
}
.role-overview-item:last-of-type {
border-bottom: none;
padding-bottom: 20px;
}
.role-overview-icon {
width: 38px; height: 38px;
border-radius: 10px;
background: rgba(61,191,169,0.08);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.role-overview-icon i {
font-size: 15px;
color: var(--fc-accent, #3DBFA9);
}
.role-overview-label {
display: block;
font-size: 11px;
font-weight: 700;
letter-spacing: 1.5px;
text-transform: uppercase;
color: var(--fc-text-muted, rgba(255,255,255,0.45));
margin-bottom: 4px;
}
.role-overview-item strong {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 15px;
font-weight: 700;
color: var(--fc-heading, #fff);
}
/* Apply CTA button */
.role-overview-cta {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
width: 100%;
padding: 16px 24px;
border-radius: 14px;
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 15px;
font-weight: 700;
color: #fff;
background: linear-gradient(135deg, var(--fc-accent, #3DBFA9), var(--fc-accent-2, #1A7BAF));
border: none;
text-decoration: none;
transition: all 0.35s ease;
box-shadow: 0 8px 24px rgba(61,191,169,0.25);
}
.role-overview-cta:hover {
transform: translateY(-2px);
box-shadow: 0 12px 32px rgba(61,191,169,0.35);
color: #fff;
}
.role-overview-cta i {
font-size: 14px;
transition: transform 0.3s ease;
}
.role-overview-cta:hover i {
transform: translateX(3px);
}
/* Share Card */
.role-share-card {
background: var(--fc-card, rgba(255,255,255,0.04));
border: 1px solid var(--fc-card-border, rgba(255,255,255,0.08));
border-radius: 18px;
padding: 24px 28px;
}
.role-share-heading {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 14px;
font-weight: 700;
color: var(--fc-heading, #fff) !important;
margin: 0 0 16px;
letter-spacing: 1px;
text-transform: uppercase;
}
.role-share-btns {
display: flex;
gap: 10px;
}
.role-share-btn {
width: 42px; height: 42px;
border-radius: 12px;
background: rgba(61,191,169,0.06);
border: 1px solid rgba(61,191,169,0.12);
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--fc-accent, #3DBFA9);
font-size: 15px;
cursor: pointer;
text-decoration: none;
transition: all 0.3s ease;
}
.role-share-btn:hover {
background: linear-gradient(135deg, var(--fc-accent, #3DBFA9), var(--fc-accent-2, #1A7BAF));
color: #fff;
border-color: transparent;
transform: translateY(-2px);
box-shadow: 0 6px 18px rgba(61,191,169,0.25);
}
/* Light theme */
[data-theme="light"] .role-overview-card {
background: #ffffff;
border-color: rgba(30,45,90,0.07);
box-shadow: 0 2px 16px rgba(30,45,90,0.05);
}
[data-theme="light"] .role-overview-item {
border-bottom-color: rgba(30,45,90,0.06);
}
[data-theme="light"] .role-overview-icon {
background: rgba(61,191,169,0.08);
}
[data-theme="light"] .role-share-card {
background: #ffffff;
border-color: rgba(30,45,90,0.07);
box-shadow: 0 2px 16px rgba(30,45,90,0.05);
}
[data-theme="light"] .role-share-btn {
background: rgba(61,191,169,0.06);
border-color: rgba(61,191,169,0.12);
}
[data-theme="light"] .role-badge-pill {
background: rgba(61,191,169,0.06);
border-color: rgba(61,191,169,0.16);
}
/* Responsive */
@media (max-width: 991px) {
.role-layout {
grid-template-columns: 1fr;
}
.role-sidebar {
position: static;
flex-direction: row;
flex-wrap: wrap;
}
.role-overview-card {
flex: 1;
min-width: 280px;
}
.role-share-card {
flex: 0 0 auto;
min-width: 200px;
}
}
@media (max-width: 575px) {
.role-sidebar {
flex-direction: column;
}
.role-overview-card,
.role-share-card {
min-width: 100%;
}
}
.role-hr-dot {
display: flex;
align-items: center;
justify-content: center;
margin: 36px 0;
}
.role-dot {
width: 8px; height: 8px;
border-radius: 50%;
background: var(--fc-accent, #3DBFA9);
opacity: 0.5;
}
/* ── Description ── */
.role-description {
font-size: 16px;
line-height: 1.85;
color: var(--fc-text, #C9D1E0);
max-width: 820px;
transition: color 0.4s ease;
}
/* ── Structured Role Sections ── */
.role-section {
max-width: 820px;
margin-bottom: 40px;
background: var(--fc-card, rgba(255,255,255,0.04));
border: 1px solid var(--fc-card-border, rgba(255,255,255,0.08));
border-radius: 20px;
padding: 36px 36px 32px;
position: relative;
overflow: hidden;
transition: all 0.4s ease;
}
.role-section::before {
content: '';
position: absolute;
top: 0; left: 0;
width: 4px; height: 100%;
background: linear-gradient(180deg, var(--fc-accent, #3DBFA9), var(--fc-accent-2, #1A7BAF));
border-radius: 0 4px 4px 0;
}
.role-section-title {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 20px;
font-weight: 700;
color: var(--fc-heading, #fff) !important;
margin: 0 0 22px;
display: flex;
align-items: center;
gap: 12px;
padding-bottom: 18px;
border-bottom: 1px solid var(--fc-card-border, rgba(255,255,255,0.08));
}
.role-section-title i {
color: var(--fc-accent, #3DBFA9);
font-size: 18px;
width: 40px; height: 40px;
border-radius: 12px;
background: rgba(61,191,169,0.08);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.role-section-body p {
font-size: 15px;
line-height: 1.8;
color: var(--fc-text, #C9D1E0);
margin: 0 0 16px;
}
.role-section-body p:last-child { margin-bottom: 0; }
/* Checklist */
.role-checklist {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 14px;
}
.role-checklist li {
display: flex;
align-items: flex-start;
gap: 14px;
font-size: 15px;
line-height: 1.7;
color: var(--fc-text, #C9D1E0);
padding: 12px 16px;
background: rgba(61,191,169,0.03);
border: 1px solid rgba(61,191,169,0.06);
border-radius: 12px;
transition: all 0.3s ease;
}
.role-checklist li:hover {
background: rgba(61,191,169,0.06);
border-color: rgba(61,191,169,0.14);
transform: translateX(4px);
}
.role-checklist li i {
color: var(--fc-accent, #3DBFA9);
font-size: 16px;
margin-top: 3px;
flex-shrink: 0;
}
.role-checklist li span {
color: var(--fc-text, #C9D1E0);
}
/* Light theme */
[data-theme="light"] .role-section {
background: #ffffff;
border-color: rgba(30,45,90,0.07);
box-shadow: 0 2px 16px rgba(30,45,90,0.04);
}
[data-theme="light"] .role-section-title {
border-bottom-color: rgba(30,45,90,0.08);
}
[data-theme="light"] .role-section-title i {
background: rgba(61,191,169,0.08);
}
[data-theme="light"] .role-checklist li {
background: rgba(61,191,169,0.03);
border-color: rgba(61,191,169,0.08);
}
[data-theme="light"] .role-checklist li:hover {
background: rgba(61,191,169,0.06);
border-color: rgba(61,191,169,0.16);
}
/* Responsive */
@media (max-width: 768px) {
.role-section { padding: 28px 24px 26px; border-radius: 16px; }
.role-section-title { font-size: 18px; gap: 10px; }
.role-section-title i { width: 34px; height: 34px; font-size: 15px; }
}
@media (max-width: 480px) {
.role-section { padding: 22px 18px 20px; border-radius: 14px; }
.role-checklist li { padding: 10px 12px; font-size: 14px; }
}
/* ── Apply card ── */
.role-apply-card {
background: var(--fc-card, rgba(255,255,255,0.04));
border: 1px solid var(--fc-card-border, rgba(255,255,255,0.08));
border-radius: 24px;
padding: 48px 44px;
max-width: 720px;
position: relative;
overflow: hidden;
}
.role-apply-card::before {
content: "";
position: absolute;
top: 0; left: 0;
width: 100%; height: 4px;
background: linear-gradient(90deg, var(--fc-accent, #3DBFA9), #1A7BAF, #9B6CF7);
}
.role-apply-title {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 26px;
font-weight: 800;
color: var(--fc-heading, #fff);
margin: 0 0 10px;
transition: color 0.4s ease;
}
.role-apply-sub {
font-size: 15px;
color: var(--fc-text-muted, #8A95B0);
margin: 0 0 32px;
line-height: 1.6;
transition: color 0.4s ease;
}
/* ── Form ── */
.role-apply-form {
display: flex;
flex-direction: column;
gap: 22px;
}
.role-form-row {
display: flex;
gap: 20px;
}
.role-form-group {
flex: 1;
display: flex;
flex-direction: column;
gap: 8px;
}
.role-form-group label {
font-size: 14px;
font-weight: 600;
color: var(--fc-heading, #fff);
transition: color 0.4s ease;
}
.role-form-group label .req {
color: #EF4444;
}
.role-form-group input,
.role-form-group textarea {
width: 100%;
padding: 14px 18px;
border-radius: 12px;
border: 1px solid var(--fc-card-border, rgba(255,255,255,0.1));
background: var(--fc-input-bg, var(--fc-bg, #0B1426));
color: var(--fc-text, #C9D1E0);
font-size: 15px;
font-family: inherit;
transition: all 0.3s ease;
outline: none;
}
.role-form-group input::placeholder,
.role-form-group textarea::placeholder {
color: var(--fc-text-muted, #8A95B0);
opacity: 0.6;
}
.role-form-group input:focus,
.role-form-group textarea:focus {
border-color: var(--fc-accent, #3DBFA9);
box-shadow: 0 0 0 3px rgba(61,191,169,0.12);
}
.role-form-group textarea {
resize: vertical;
min-height: 120px;
}
/* ── Dropzone ── */
.role-dropzone {
border: 2px dashed var(--fc-card-border, rgba(255,255,255,0.12));
border-radius: 16px;
padding: 36px 24px;
text-align: center;
cursor: pointer;
transition: all 0.35s ease;
background: transparent;
}
.role-dropzone:hover,
.role-dropzone:focus-visible {
border-color: var(--fc-accent, #3DBFA9);
background: rgba(61,191,169,0.04);
}
.role-dropzone-icon {
font-size: 32px;
color: var(--fc-accent, #3DBFA9);
margin-bottom: 12px;
}
.role-dropzone-text {
font-size: 15px;
color: var(--fc-text, #C9D1E0);
margin: 0 0 6px;
transition: color 0.4s ease;
}
.role-dropzone-text strong {
color: var(--fc-accent, #3DBFA9);
}
.role-dropzone-or {
color: var(--fc-text-muted, #8A95B0);
}
.role-dropzone-hint {
font-size: 12px;
color: var(--fc-text-muted, #8A95B0);
margin: 0;
transition: color 0.4s ease;
}
/* Dropzone file preview */
.role-dropzone-file {
display: flex;
align-items: center;
gap: 14px;
padding: 14px 18px;
background: var(--fc-card, rgba(255,255,255,0.04));
border: 1px solid var(--fc-card-border);
border-radius: 12px;
text-align: left;
}
.role-dropzone-file > i {
font-size: 24px;
color: var(--fc-accent, #3DBFA9);
}
.role-dropzone-file-info {
flex: 1;
display: flex;
flex-direction: column;
}
.role-dropzone-name {
font-size: 14px;
font-weight: 600;
color: var(--fc-heading, #fff);
transition: color 0.4s ease;
}
.role-dropzone-size {
font-size: 12px;
color: var(--fc-text-muted, #8A95B0);
}
.role-dropzone-remove {
width: 32px; height: 32px;
border-radius: 50%;
border: 1px solid var(--fc-card-border);
background: transparent;
color: var(--fc-text-muted, #8A95B0);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
font-size: 14px;
transition: all 0.3s ease;
}
.role-dropzone-remove:hover {
background: #EF4444;
border-color: #EF4444;
color: #fff;
}
/* ── Submit button ── */
.role-submit-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 16px 36px;
border-radius: 14px;
border: none;
background: linear-gradient(135deg, var(--fc-accent, #3DBFA9), #1A7BAF);
color: #ffffff;
font-size: 16px;
font-weight: 700;
font-family: 'Plus Jakarta Sans', sans-serif;
cursor: pointer;
transition: all 0.35s ease;
margin-top: 8px;
}
.role-submit-btn:hover {
transform: translateY(-2px);
box-shadow: 0 8px 30px rgba(61,191,169,0.3);
}
.role-submit-btn i {
font-size: 15px;
transition: transform 0.3s ease;
}
.role-submit-btn:hover i {
transform: translateX(3px);
}
/* ── Success state ── */
.role-form-success {
text-align: center;
padding: 40px 20px;
}
.role-success-icon {
font-size: 48px;
color: #22C55E;
margin-bottom: 16px;
}
.role-form-success h4 {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 22px;
font-weight: 800;
color: var(--fc-heading, #fff);
margin: 0 0 10px;
transition: color 0.4s ease;
}
.role-form-success p {
font-size: 15px;
color: var(--fc-text-muted, #8A95B0);
line-height: 1.7;
max-width: 400px;
margin: 0 auto;
transition: color 0.4s ease;
}
/* ── Role apply responsive ── */
@media (max-width: 767px) {
.role-title { font-size: 30px; }
.role-form-row { flex-direction: column; gap: 22px; }
.role-apply-card { padding: 32px 24px; border-radius: 18px; }
.role-apply-title { font-size: 22px; }
.role-meta { gap: 8px 20px; }
}
@media (max-width: 480px) {
.role-title { font-size: 24px; }
.role-apply-card { padding: 24px 18px; border-radius: 14px; }
.role-submit-btn { width: 100%; }
}
/* ============================================================
FAQ V2 — Two-column layout (Title left, Accordion right)
============================================================ */
.faq-v2-section {
background: var(--fc-bg);
padding: 100px 0 100px;
transition: background 0.4s ease;
}
/* Layout */
.faq-v2-layout {
display: grid;
grid-template-columns: 280px 1fr;
gap: 60px;
align-items: start;
}
/* Left title */
.faq-v2-left {
position: sticky;
top: 120px;
}
.faq-v2-title {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 56px;
font-weight: 900;
color: var(--fc-heading);
margin: 0;
letter-spacing: -1px;
line-height: 1;
}
/* Right accordion */
.faq-v2-right .accordion {
border: none !important;
background: none !important;
}
/* Each item */
.faq-v2-item {
border-bottom: 1px solid var(--fc-card-border);
transition: border-color 0.3s ease;
}
.faq-v2-item:first-child {
border-top: 1px solid var(--fc-card-border);
}
.faq-v2-item:hover {
border-color: var(--fc-accent);
}
/* Button */
.faq-v2-btn {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
padding: 24px 0;
background: none !important;
border: none !important;
outline: none !important;
box-shadow: none !important;
cursor: pointer;
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 16px;
font-weight: 700;
color: var(--fc-heading);
text-align: left;
line-height: 1.4;
transition: color 0.3s ease;
}
.faq-v2-btn:hover {
color: var(--fc-accent);
}
.faq-v2-btn:focus {
outline: none !important;
box-shadow: none !important;
}
.faq-v2-btn::after {
display: none !important;
}
/* Plus/Minus icon */
.faq-v2-icon {
flex-shrink: 0;
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
color: var(--fc-text-muted);
transition: all 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.faq-v2-btn:not(.collapsed) .faq-v2-icon {
transform: rotate(45deg);
color: var(--fc-accent);
}
/* Body */
.faq-v2-body {
padding: 0 0 24px;
}
.faq-v2-body p {
font-size: 15px;
line-height: 1.75;
color: var(--fc-text-muted);
margin: 0;
max-width: 600px;
}
/* ---- Responsive ---- */
@media (max-width: 768px) {
.faq-v2-layout {
grid-template-columns: 1fr;
gap: 30px;
}
.faq-v2-left { position: static; }
.faq-v2-title { font-size: 42px; }
.faq-v2-section { padding: 70px 0 70px; }
}
@media (max-width: 480px) {
.faq-v2-title { font-size: 34px; }
.faq-v2-btn { font-size: 15px; padding: 20px 0; }
}
/* ============================================================
FOOTER V2 — Clean minimal layout
============================================================ */
/* Override base footer styles */
.footer-section {
padding-bottom: 0 !important;
padding-top: 0 !important;
}
.footer-section .footer-area {
margin: 0 !important;
border-radius: 0 !important;
padding: 0 !important;
position: relative;
overflow: hidden;
background:
radial-gradient(ellipse 80% 60% at 15% 0%, rgba(61,191,169,0.10) 0%, transparent 55%),
radial-gradient(ellipse 70% 55% at 90% 100%, rgba(26,123,175,0.12) 0%, transparent 60%),
linear-gradient(180deg, #0A1220 0%, #060B14 55%, #040810 100%);
isolation: isolate;
}
.footer-section .footer-area::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 1px;
background: linear-gradient(90deg,
rgba(255,255,255,0) 0%,
rgba(61,191,169,0.55) 30%,
rgba(26,123,175,0.55) 70%,
rgba(255,255,255,0) 100%);
z-index: 2;
pointer-events: none;
}
.footer-section .footer-area::after {
content: "";
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
background-size: 60px 60px;
opacity: 0.4;
mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, black 0%, transparent 70%);
-webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, black 0%, transparent 70%);
pointer-events: none;
z-index: 0;
}
.footer-section .footer-area > .container {
position: relative;
z-index: 1;
}
/* Top section — logo left, links right */
/* ═══════════════════════════════════════════════════════════════
FOOTER V2 - Three Column Premium Layout
═══════════════════════════════════════════════════════════════ */
.footer-v2-top {
display: flex;
align-items: flex-start;
justify-content: space-between;
padding: 80px 0 60px;
gap: 56px;
position: relative;
}
.footer-v2-top::after {
content: "";
position: absolute;
left: 0; right: 0; bottom: 0;
height: 1px;
background: linear-gradient(90deg,
transparent 0%,
rgba(255,255,255,0.08) 20%,
rgba(255,255,255,0.08) 80%,
transparent 100%);
}
/* ── Left: Brand ── */
.footer-v2-brand {
flex: 0 0 280px;
max-width: 280px;
}
.footer-v2-brand .footer-logo img {
max-height: 48px;
width: auto;
display: block;
margin-bottom: 18px;
transition: transform 0.3s ease, filter 0.3s ease;
}
.footer-v2-brand .footer-logo:hover img {
transform: scale(1.05);
filter: brightness(1.15);
}
.footer-v2-tagline {
font-size: 14.5px;
line-height: 1.75;
color: rgba(255,255,255,0.55);
margin: 0 0 26px;
max-width: 280px;
}
.footer-v2-social {
display: flex;
gap: 10px;
}
.footer-v2-social a {
width: 40px; height: 40px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.08);
color: rgba(255,255,255,0.55);
font-size: 14px;
text-decoration: none;
transition: all 0.35s cubic-bezier(.2,.8,.2,1);
position: relative;
overflow: hidden;
}
.footer-v2-social a::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(61,191,169,0.9), rgba(26,123,175,0.9));
opacity: 0;
transition: opacity 0.35s ease;
z-index: -1;
}
.footer-v2-social a:hover {
border-color: transparent;
color: #fff;
transform: translateY(-4px);
box-shadow: 0 10px 26px rgba(61,191,169,0.28);
}
.footer-v2-social a:hover::before {
opacity: 1;
}
/* ── Center: Contact Info ── */
.footer-v2-contact {
flex: 0 0 auto;
}
.footer-v2-contact-item {
display: flex;
align-items: flex-start;
gap: 12px;
margin-bottom: 16px;
}
.footer-v2-contact-item:last-child { margin-bottom: 0; }
.footer-v2-contact-item i {
width: 34px; height: 34px;
border-radius: 10px;
display: flex; align-items: center; justify-content: center;
background: rgba(61,191,169,0.10);
border: 1px solid rgba(61,191,169,0.20);
color: #3DBFA9;
font-size: 13px;
flex-shrink: 0;
transition: all 0.3s ease;
}
.footer-v2-contact-item:hover i {
background: rgba(61,191,169,0.18);
border-color: rgba(61,191,169,0.35);
transform: translateY(-2px);
}
.footer-v2-contact-item a,
.footer-v2-contact-item span {
font-size: 14px;
line-height: 1.65;
color: rgba(255,255,255,0.62);
text-decoration: none;
transition: color 0.3s ease;
padding-top: 6px;
}
.footer-v2-contact-item a:hover {
color: #3DBFA9;
}
/* ── Right: Link Columns ── */
.footer-v2-links-row {
display: flex;
gap: 64px;
}
.footer-v2-heading {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 13px;
font-weight: 700;
color: #ffffff;
margin: 0 0 22px;
letter-spacing: 2px;
text-transform: uppercase;
position: relative;
padding-bottom: 14px;
}
.footer-v2-heading::after {
content: "";
position: absolute;
bottom: 0; left: 0;
width: 28px; height: 2px;
background: linear-gradient(90deg, #3DBFA9, #1A7BAF);
border-radius: 2px;
}
.footer-v2-links {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 12px;
}
.footer-v2-links li a {
font-size: 14.5px;
font-weight: 400;
color: rgba(255,255,255,0.58);
text-decoration: none;
transition: all 0.3s ease;
display: inline-flex;
align-items: center;
gap: 8px;
position: relative;
}
.footer-v2-links li a::before {
content: "";
display: block;
width: 0;
height: 1px;
background: linear-gradient(90deg, #3DBFA9, #1A7BAF);
transition: width 0.3s ease;
}
.footer-v2-links li a:hover {
color: #fff;
transform: translateX(4px);
}
.footer-v2-links li a:hover::before {
width: 16px;
}
/* ── Bottom bar ── */
.footer-v2-bottom {
padding: 26px 0;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
}
.footer-v2-bottom p {
font-size: 13px;
color: rgba(255,255,255,0.42);
margin: 0;
letter-spacing: 0.2px;
}
.footer-v2-back-top {
width: 42px; height: 42px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.08);
color: rgba(255,255,255,0.55);
font-size: 14px;
text-decoration: none;
transition: all 0.35s cubic-bezier(.2,.8,.2,1);
position: relative;
overflow: hidden;
}
.footer-v2-back-top::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(61,191,169,0.9), rgba(26,123,175,0.9));
opacity: 0;
transition: opacity 0.35s ease;
z-index: -1;
}
.footer-v2-back-top:hover {
border-color: transparent;
color: #fff;
transform: translateY(-4px);
box-shadow: 0 10px 26px rgba(61,191,169,0.28);
}
.footer-v2-back-top:hover::before {
opacity: 1;
}
/* Hide old footer elements */
.footer-widget-wrapper,
.footer-bottom-wrapper {
display: none !important;
}
/* ── Responsive ── */
@media (max-width: 991px) {
.footer-v2-top {
flex-wrap: wrap;
gap: 40px;
padding: 50px 0 40px;
}
.footer-v2-brand { flex: 0 0 100%; max-width: 100%; }
.footer-v2-contact { flex: 0 0 auto; }
}
@media (max-width: 767px) {
.footer-v2-top {
flex-direction: column;
gap: 36px;
padding: 40px 0 32px;
}
.footer-v2-links-row { gap: 48px; }
}
@media (max-width: 480px) {
.footer-v2-links-row {
flex-direction: column;
gap: 28px;
}
.footer-v2-bottom { padding: 20px 0; }
}
/* =====================================================
OUR SERVICES SECTION – About Page Premium
===================================================== */
/* ---- Keyframes ---- */
@keyframes ab-svc-card-in {
from { opacity: 0; transform: translateY(36px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes ab-svc-line-grow {
from { width: 0; }
to { width: 100%; }
}
@keyframes ab-svc-dot-pulse {
0%, 100% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.5); opacity: 0.5; }
}
@keyframes ab-svc-icon-spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
/* ---- Section shell ---- */
.ab-svc-section {
background: var(--fc-bg);
padding: 100px 0;
position: relative;
overflow: hidden;
}
/* Background glows */
.ab-svc-bg-glow {
position: absolute;
width: 500px; height: 500px;
border-radius: 50%;
filter: blur(100px);
pointer-events: none;
z-index: 0;
}
.ab-svc-bg-glow--left {
background: radial-gradient(circle, rgba(61,191,169,0.1) 0%, transparent 70%);
top: -100px; left: -150px;
}
.ab-svc-bg-glow--right {
background: radial-gradient(circle, rgba(130,80,255,0.08) 0%, transparent 70%);
bottom: -100px; right: -150px;
}
/* ---- Header two-column ---- */
.ab-svc-header {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 40px;
margin-bottom: 40px;
flex-wrap: wrap;
}
.ab-svc-header__left { flex: 1; min-width: 260px; }
.ab-svc-header__right {
flex: 1;
min-width: 260px;
max-width: 480px;
display: flex;
flex-direction: column;
align-items: flex-end;
text-align: right;
gap: 18px;
}
/* Badge */
.ab-svc-badge {
display: inline-flex;
align-items: center;
gap: 9px;
font-size: 11px;
font-weight: 700;
letter-spacing: 2.5px;
text-transform: uppercase;
color: var(--fc-accent, #3DBFA9);
background: rgba(61,191,169,0.1);
border: 1px solid rgba(61,191,169,0.25);
border-radius: 40px;
padding: 7px 18px;
margin-bottom: 18px;
display: inline-flex;
}
.ab-svc-badge__dot {
width: 7px; height: 7px;
border-radius: 50%;
background: var(--fc-accent, #3DBFA9);
box-shadow: 0 0 6px var(--fc-accent, #3DBFA9);
animation: ab-svc-dot-pulse 2s ease-in-out infinite;
flex-shrink: 0;
}
/* Title */
.ab-svc-title {
font-size: 52px;
font-weight: 800;
line-height: 1.1;
letter-spacing: -1px;
color: var(--fc-heading) !important;
margin: 0;
}
.ab-svc-title__accent {
background: linear-gradient(135deg, var(--fc-accent, #3DBFA9) 0%, #00d4ff 60%, #8250ff 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
/* Right desc + cta */
.ab-svc-subtitle-desc {
font-size: 16px;
color: var(--fc-text) !important;
line-height: 1.75;
margin: 0;
opacity: 0.8;
}
.ab-svc-cta-link {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 14px;
font-weight: 700;
color: var(--fc-accent, #3DBFA9) !important;
text-decoration: none;
border-bottom: 1px solid rgba(61,191,169,0.4);
padding-bottom: 2px;
transition: gap 0.3s ease, border-color 0.3s ease;
}
.ab-svc-cta-link:hover { gap: 14px; border-color: var(--fc-accent, #3DBFA9); }
/* Divider */
.ab-svc-divider {
height: 1px;
background: linear-gradient(90deg, transparent, var(--fc-border, rgba(0,0,0,0.08)) 20%, var(--fc-border, rgba(0,0,0,0.08)) 80%, transparent);
margin-bottom: 52px;
position: relative;
}
.ab-svc-divider::after {
content: '';
position: absolute;
top: 0; left: 0;
height: 1px;
width: 0;
background: linear-gradient(90deg, var(--fc-accent, #3DBFA9), #00d4ff, #8250ff);
animation: ab-svc-line-grow 1.4s cubic-bezier(0.4,0,0.2,1) 0.3s forwards;
}
/* ---- Cards Grid ---- */
.ab-svc-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0;
border: 1px solid var(--fc-border, rgba(0,0,0,0.07));
border-radius: 24px;
overflow: hidden;
background: var(--fc-card, #fff);
box-shadow: 0 16px 64px rgba(0,0,0,0.06);
}
/* ---- Single Card ---- */
.ab-svc-card {
position: relative;
overflow: hidden;
border-right: 1px solid var(--fc-border, rgba(0,0,0,0.07));
border-bottom: 1px solid var(--fc-border, rgba(0,0,0,0.07));
transition: background 0.4s ease;
}
/* Remove right border on last col */
.ab-svc-card:nth-child(3n) { border-right: none; }
/* Remove bottom border on last row */
.ab-svc-card:nth-child(n+4) { border-bottom: none; }
/* Scroll-reveal state */
.ab-svc-card--reveal {
opacity: 0;
transform: translateY(32px);
}
.ab-svc-card--reveal.is-visible {
animation: ab-svc-card-in 0.6s cubic-bezier(0.34,1.1,0.64,1) forwards;
}
/* Stagger via nth-child */
.ab-svc-card:nth-child(1).is-visible { animation-delay: 0.05s; }
.ab-svc-card:nth-child(2).is-visible { animation-delay: 0.12s; }
.ab-svc-card:nth-child(3).is-visible { animation-delay: 0.19s; }
.ab-svc-card:nth-child(4).is-visible { animation-delay: 0.26s; }
.ab-svc-card:nth-child(5).is-visible { animation-delay: 0.33s; }
.ab-svc-card:nth-child(6).is-visible { animation-delay: 0.40s; }
/* Inner layout */
.ab-svc-card__inner {
padding: 38px 34px;
position: relative;
z-index: 2;
height: 100%;
display: flex;
flex-direction: column;
gap: 0;
}
/* Gradient hover background */
.ab-svc-card__hover-bg {
position: absolute;
inset: 0;
background: linear-gradient(145deg, rgba(61,191,169,0.06) 0%, rgba(0,212,255,0.03) 100%);
opacity: 0;
transition: opacity 0.4s ease;
z-index: 1;
}
.ab-svc-card:hover .ab-svc-card__hover-bg { opacity: 1; }
/* Top row: icon + number */
.ab-svc-card__top {
display: flex;
align-items: flex-start;
justify-content: space-between;
margin-bottom: 22px;
}
/* Number */
.ab-svc-card__num {
font-size: 13px;
font-weight: 800;
letter-spacing: 1px;
color: var(--fc-text) !important;
opacity: 0.18;
transition: opacity 0.35s ease, color 0.35s ease;
line-height: 1;
padding-top: 4px;
}
.ab-svc-card:hover .ab-svc-card__num {
opacity: 0.7;
color: var(--fc-accent, #3DBFA9) !important;
}
/* Icon wrapper – default teal */
.ab-svc-card__icon-wrap {
width: 54px; height: 54px;
border-radius: 16px;
background: linear-gradient(135deg, rgba(61,191,169,0.15), rgba(0,212,255,0.08));
border: 1px solid rgba(61,191,169,0.2);
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
color: var(--fc-accent, #3DBFA9);
transition: transform 0.4s cubic-bezier(0.34,1.2,0.64,1), box-shadow 0.4s ease, background 0.4s ease;
flex-shrink: 0;
}
.ab-svc-card:hover .ab-svc-card__icon-wrap {
transform: translateY(-4px) scale(1.08);
box-shadow: 0 10px 30px rgba(61,191,169,0.28);
background: linear-gradient(135deg, var(--fc-accent, #3DBFA9), #2aa393);
color: #fff;
}
/* Per-card icon accent colours */
.ab-svc-card__icon-wrap--2 { background: linear-gradient(135deg, rgba(255,190,50,0.12), rgba(255,120,0,0.08)); border-color: rgba(255,190,50,0.25); color: #f5a623; }
.ab-svc-card:nth-child(2):hover .ab-svc-card__icon-wrap { background: linear-gradient(135deg, #f5a623, #e07c00); box-shadow: 0 10px 30px rgba(245,166,35,0.3); }
.ab-svc-card__icon-wrap--3 { background: linear-gradient(135deg, rgba(130,80,255,0.12), rgba(0,212,255,0.08)); border-color: rgba(130,80,255,0.22); color: #8250ff; }
.ab-svc-card:nth-child(3):hover .ab-svc-card__icon-wrap { background: linear-gradient(135deg, #8250ff, #5c2dcc); box-shadow: 0 10px 30px rgba(130,80,255,0.3); }
.ab-svc-card__icon-wrap--4 { background: linear-gradient(135deg, rgba(0,180,216,0.12), rgba(0,212,255,0.08)); border-color: rgba(0,180,216,0.22); color: #00b4d8; }
.ab-svc-card:nth-child(4):hover .ab-svc-card__icon-wrap { background: linear-gradient(135deg, #00b4d8, #0077a8); box-shadow: 0 10px 30px rgba(0,180,216,0.3); }
.ab-svc-card__icon-wrap--5 { background: linear-gradient(135deg, rgba(255,80,100,0.1), rgba(255,150,50,0.07)); border-color: rgba(255,80,100,0.2); color: #f94f6d; }
.ab-svc-card:nth-child(5):hover .ab-svc-card__icon-wrap { background: linear-gradient(135deg, #f94f6d, #c0183a); box-shadow: 0 10px 30px rgba(249,79,109,0.3); }
.ab-svc-card__icon-wrap--6 { background: linear-gradient(135deg, rgba(34,197,94,0.12), rgba(16,185,129,0.08)); border-color: rgba(34,197,94,0.22); color: #22c55e; }
.ab-svc-card:nth-child(6):hover .ab-svc-card__icon-wrap { background: linear-gradient(135deg, #22c55e, #15803d); box-shadow: 0 10px 30px rgba(34,197,94,0.3); }
/* Title */
.ab-svc-card__title {
font-size: 18px;
font-weight: 700;
color: var(--fc-heading) !important;
margin-bottom: 12px;
line-height: 1.3;
transition: color 0.3s ease;
}
.ab-svc-card:hover .ab-svc-card__title { color: var(--fc-accent, #3DBFA9) !important; }
/* Description */
.ab-svc-card__desc {
font-size: 14px;
color: var(--fc-text) !important;
line-height: 1.75;
margin: 0;
opacity: 0.75;
flex: 1;
}
/* ---- Bottom CTA Strip ---- */
.ab-svc-bottom-strip {
margin-top: 52px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
padding: 32px 40px;
border-radius: 20px;
background: linear-gradient(135deg, rgba(61,191,169,0.08) 0%, rgba(0,212,255,0.05) 100%);
border: 1px solid rgba(61,191,169,0.2);
flex-wrap: wrap;
}
.ab-svc-bottom-strip__text {
font-size: 18px;
font-weight: 600;
color: var(--fc-heading) !important;
margin: 0;
line-height: 1.4;
}
/* ---- Responsive ---- */
@media (max-width: 991px) {
.ab-svc-title { font-size: 38px; }
.ab-svc-header { align-items: flex-start; }
.ab-svc-header__right { align-items: flex-start; text-align: left; }
.ab-svc-grid { grid-template-columns: repeat(2, 1fr); }
/* Fix borders for 2-col */
.ab-svc-card:nth-child(3n) { border-right: 1px solid var(--fc-border, rgba(0,0,0,0.07)); }
.ab-svc-card:nth-child(2n) { border-right: none; }
.ab-svc-card:nth-child(n+4) { border-bottom: 1px solid var(--fc-border, rgba(0,0,0,0.07)); }
.ab-svc-card:nth-child(n+5) { border-bottom: none; }
}
@media (max-width: 767px) {
.ab-svc-section { padding: 70px 0; }
.ab-svc-title { font-size: 32px; }
.ab-svc-grid { grid-template-columns: 1fr; border-radius: 18px; }
/* Single col borders */
.ab-svc-card { border-right: none !important; border-bottom: 1px solid var(--fc-border, rgba(0,0,0,0.07)) !important; }
.ab-svc-card:last-child { border-bottom: none !important; }
.ab-svc-card__inner { padding: 28px 24px; }
.ab-svc-bottom-strip { padding: 24px; flex-direction: column; align-items: flex-start; }
.ab-svc-bottom-strip__text { font-size: 16px; }
}
@media (max-width: 575px) {
.ab-svc-title { font-size: 28px; letter-spacing: -0.5px; }
.ab-svc-header { flex-direction: column; gap: 20px; }
.ab-svc-header__right { align-items: flex-start; text-align: left; max-width: 100%; }
}
/* Dark mode tweaks */
:root[data-theme="dark"] .ab-svc-grid { box-shadow: 0 16px 64px rgba(0,0,0,0.2); }
:root[data-theme="dark"] .ab-svc-card:hover .ab-svc-card__hover-bg { opacity: 0.7; }
:root[data-theme="dark"] .ab-svc-bottom-strip { background: linear-gradient(135deg, rgba(61,191,169,0.06) 0%, rgba(0,212,255,0.04) 100%); }
/* =====================================================
OUR MOMENTS SECTION - About Page
===================================================== */
@keyframes moments-scroll-left {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
@keyframes moments-scroll-right {
from { transform: translateX(-50%); }
to { transform: translateX(0); }
}
@keyframes moments-dot-pulse {
0%, 100% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.6); opacity: 0.4; }
}
.moments-section {
background: var(--fc-bg);
padding: 100px 0 0;
overflow: hidden;
position: relative;
}
/* Header */
.moments-header {
margin-bottom: 56px;
}
.moments-badge {
display: inline-flex;
align-items: center;
gap: 9px;
font-size: 11px;
font-weight: 700;
letter-spacing: 2.5px;
text-transform: uppercase;
color: var(--fc-accent, #3DBFA9);
background: rgba(61,191,169,0.1);
border: 1px solid rgba(61,191,169,0.25);
border-radius: 40px;
padding: 7px 18px;
margin-bottom: 18px;
}
.moments-badge__dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--fc-accent, #3DBFA9);
box-shadow: 0 0 6px var(--fc-accent, #3DBFA9);
animation: moments-dot-pulse 2s ease-in-out infinite;
flex-shrink: 0;
}
.moments-title {
font-size: 48px;
font-weight: 800;
color: var(--fc-heading) !important;
letter-spacing: -1px;
line-height: 1.1;
margin-bottom: 14px;
}
.moments-subtitle {
font-size: 16px;
color: var(--fc-text) !important;
opacity: 0.75;
max-width: 520px;
margin: 0 auto;
line-height: 1.7;
}
/* Track wrapper - masks overflow and adds edge fades */
.moments-track-wrap {
overflow: hidden;
position: relative;
margin-bottom: 16px;
-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
}
.moments-track-wrap:last-child {
margin-bottom: 0;
}
/* Scrolling track */
.moments-track {
display: flex;
gap: 16px;
width: max-content;
padding: 6px 0;
will-change: transform;
transform: translateZ(0);
-webkit-transform: translateZ(0);
}
.moments-scroll-left {
animation: moments-scroll-left 32s linear infinite;
}
.moments-scroll-right {
animation: moments-scroll-right 28s linear infinite;
}
/* Pause on hover */
.moments-track-wrap:hover .moments-track {
animation-play-state: paused;
}
/* Individual image tile */
.moment-img {
position: relative;
width: 280px;
height: 200px;
flex-shrink: 0;
border-radius: 16px;
overflow: hidden;
background: var(--fc-bg-alt);
cursor: pointer;
transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.4s ease;
}
.moment-img:hover {
transform: scale(1.04);
box-shadow: 0 12px 40px rgba(61, 191, 169, 0.2);
z-index: 3;
}
.moment-img a {
display: block;
width: 100%;
height: 100%;
position: relative;
}
/* Zoom icon overlay on hover */
.moment-img a::after {
content: "\f00e";
font-family: "Font Awesome 6 Free";
font-weight: 900;
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 28px;
color: #fff;
background: rgba(61, 191, 169, 0.5);
opacity: 0;
transition: opacity 0.3s ease;
}
.moment-img:hover a::after {
opacity: 1;
}
.moment-img img {
width: 100%;
height: 100%;
object-fit: contain;
object-position: center center;
background: #0c1424;
transition: transform 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
display: block;
filter: none;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.moment-img:hover img {
transform: scale(1.06);
}
/* Subtle gradient overlay on hover (for non-linked images) */
.moment-img__overlay {
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.35) 100%);
opacity: 0;
transition: opacity 0.4s ease;
border-radius: 16px;
}
.moment-img:hover .moment-img__overlay {
opacity: 1;
}
/* Responsive */
@media (max-width: 991px) {
.moments-title { font-size: 36px; }
.moment-img { width: 220px; height: 160px; }
}
@media (max-width: 575px) {
.moments-section { padding-top: 70px; }
.moments-title { font-size: 28px; }
.moment-img { width: 180px; height: 130px; border-radius: 12px; }
.moments-track { gap: 12px; }
}
/* =====================================================
ABOUT COMPANY SECTION – Premium Redesign
===================================================== */
/* ---- Keyframes ---- */
@keyframes ac-orb-drift {
0%, 100% { transform: translate(0, 0) scale(1); }
33% { transform: translate(30px, -20px) scale(1.05); }
66% { transform: translate(-20px, 20px) scale(0.97); }
}
@keyframes ac-pulse-ring {
0% { transform: scale(1); opacity: 0.6; }
100% { transform: scale(1.6); opacity: 0; }
}
@keyframes ac-float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}
@keyframes ac-spin-slow {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
@keyframes ac-gradient-shift {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
@keyframes ac-progress {
from { width: 0; }
}
@keyframes ac-dot-blink {
0%, 100% { opacity: 1; }
50% { opacity: 0.3; }
}
@keyframes ac-border-rotate {
from { --ac-angle: 0deg; }
to { --ac-angle: 360deg; }
}
/* ═══════════════════════════════════════════════════════════
COMPANY STORY (cs) — About page intro section
═══════════════════════════════════════════════════════════ */
.cs {
position: relative;
background: var(--fc-bg);
padding: 240px 0 100px;
overflow: hidden;
transition: background 0.4s ease;
}
/* Ambient background */
.cs-bg {
position: absolute;
border-radius: 50%;
filter: blur(110px);
pointer-events: none;
opacity: 0.4;
z-index: 0;
}
.cs-bg-a { top: -10%; left: -8%; width: 460px; height: 460px; background: radial-gradient(circle, rgba(61,191,169,0.38), transparent 70%); animation: csDriftA 26s ease-in-out infinite; }
.cs-bg-b { bottom: -12%; right: -8%; width: 420px; height: 420px; background: radial-gradient(circle, rgba(26,123,175,0.28), transparent 70%); animation: csDriftB 30s ease-in-out infinite; }
@keyframes csDriftA { 0%,100% { transform: translate(0,0); } 50% { transform: translate(18px,-12px); } }
@keyframes csDriftB { 0%,100% { transform: translate(0,0); } 50% { transform: translate(-14px,10px); } }
/* Dashed orbit mark */
.cs-mark {
position: absolute;
top: 38%; right: 46%;
width: 200px; height: 200px;
border-radius: 50%;
border: 1px dashed rgba(61,191,169,0.12);
pointer-events: none;
z-index: 0;
animation: csMarkSpin 80s linear infinite;
}
.cs-mark::after {
content: '';
position: absolute;
inset: 30px;
border-radius: 50%;
border: 1px solid rgba(61,191,169,0.08);
}
@keyframes csMarkSpin { to { transform: rotate(360deg); } }
.cs .container { position: relative; z-index: 1; top: 50px; }
/* ── Header ── */
.cs-head {
text-align: center;
max-width: 820px;
margin: 0 auto 64px;
}
.cs-eyebrow {
display: inline-flex;
align-items: center;
gap: 12px;
font-size: 11.5px;
font-weight: 800;
letter-spacing: 3px;
color: var(--fc-accent);
margin-bottom: 22px;
text-transform: uppercase;
}
.cs-eyebrow i { font-size: 12px; }
.cs-eyebrow-line {
width: 36px;
height: 1px;
background: linear-gradient(90deg, transparent, var(--fc-accent));
}
.cs-eyebrow-line:last-child { background: linear-gradient(90deg, var(--fc-accent), transparent); }
.cs-title {
font-family: "Plus Jakarta Sans", sans-serif;
font-size: 52px;
font-weight: 800;
color: var(--fc-heading);
line-height: 1.1;
letter-spacing: -1.2px;
margin: 0;
}
.cs-title em {
font-style: italic;
font-weight: 700;
background: linear-gradient(135deg, var(--fc-accent), var(--fc-accent-2));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
position: relative;
}
.cs-title em::after {
content: '';
position: absolute;
left: 0; right: 0;
bottom: -2px;
height: 3px;
background: linear-gradient(90deg, var(--fc-accent), var(--fc-accent-2));
border-radius: 3px;
opacity: 0.4;
}
/* ── Body: two-column ── */
.cs-body {
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: 72px;
align-items: center;
}
/* LEFT — text */
.cs-text p {
font-size: 16px;
line-height: 1.8;
color: var(--fc-text-muted);
margin: 0 0 20px;
}
.cs-lede {
font-size: 17.5px !important;
color: var(--fc-text) !important;
line-height: 1.75 !important;
margin-bottom: 22px !important;
}
.cs-lede strong {
color: var(--fc-heading);
font-weight: 700;
}
.cs-highlight {
background: linear-gradient(120deg, transparent 0%, rgba(61,191,169,0.22) 0%);
color: var(--fc-heading);
font-weight: 700;
padding: 0 4px;
border-radius: 3px;
}
/* Custom bullet list */
.cs-list {
list-style: none;
padding: 0;
margin: 32px 0 0;
display: flex;
flex-direction: column;
gap: 12px;
}
.cs-list li {
display: flex;
align-items: flex-start;
gap: 14px;
font-size: 14.5px;
line-height: 1.6;
color: var(--fc-text);
transition: transform 0.35s ease;
}
.cs-list li:hover { transform: translateX(4px); }
.cs-list-icon {
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
border-radius: 50%;
background: linear-gradient(135deg, var(--fc-accent), var(--fc-accent-2));
color: #ffffff;
font-size: 10px;
margin-top: 2px;
box-shadow: 0 4px 12px rgba(61,191,169,0.28);
}
/* RIGHT — image marquee + floating elements */
.cs-visual {
position: relative;
width: 100%;
}
.cs-frame {
position: relative;
border-radius: 24px;
overflow: hidden;
background: var(--fc-card);
border: 1px solid var(--fc-card-border);
box-shadow: 0 24px 60px rgba(0,0,0,0.28);
}
.cs-frame-corner {
position: absolute;
width: 18px; height: 18px;
border: 1.5px solid rgba(61,191,169,0.55);
z-index: 3;
pointer-events: none;
}
.cs-frame-corner-tl { top: 14px; left: 14px; border-right: none; border-bottom: none; border-radius: 4px 0 0 0; }
.cs-frame-corner-br { bottom: 14px; right: 14px; border-left: none; border-top: none; border-radius: 0 0 4px 0; }
.cs-marquee {
position: relative;
height: 580px;
overflow: hidden;
mask-image: linear-gradient(180deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
-webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
}
.cs-marquee-track {
display: flex;
flex-direction: column;
gap: 18px;
padding: 18px;
animation: csMarquee 22s linear infinite;
}
.cs-marquee:hover .cs-marquee-track { animation-play-state: paused; }
@keyframes csMarquee {
0% { transform: translateY(0); }
100% { transform: translateY(-50%); }
}
.cs-photo {
flex-shrink: 0;
width: 100%;
aspect-ratio: 4 / 5;
border-radius: 18px;
overflow: hidden;
position: relative;
background: var(--fc-bg-alt);
}
.cs-photo img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.cs-photo::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent 60%, rgba(11,20,38,0.45));
pointer-events: none;
}
.cs-photo:hover img { transform: scale(1.05); }
/* Floating rank badge */
.cs-badge {
position: absolute;
top: 28px;
left: -22px;
z-index: 4;
display: grid;
grid-template-columns: auto auto;
column-gap: 10px;
align-items: center;
padding: 14px 18px;
border-radius: 16px;
background:
linear-gradient(135deg, rgba(11,20,38,0.92), rgba(26,123,175,0.78));
border: 1px solid rgba(61,191,169,0.35);
box-shadow: 0 18px 36px rgba(0,0,0,0.35);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
animation: csBadgeFloat 5s ease-in-out infinite;
}
.cs-badge-num {
font-family: "Plus Jakarta Sans", sans-serif;
font-size: 36px;
font-weight: 900;
line-height: 1;
background: linear-gradient(135deg, var(--fc-accent), #5ed9c4);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
letter-spacing: -1.5px;
}
.cs-badge-text {
display: flex;
flex-direction: column;
font-family: "Plus Jakarta Sans", sans-serif;
font-size: 10px;
font-weight: 800;
letter-spacing: 1.5px;
color: #ffffff;
line-height: 1.25;
}
@keyframes csBadgeFloat {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-6px); }
}
/* Floating stat chip */
.cs-chip {
position: absolute;
bottom: -20px;
right: -16px;
z-index: 4;
display: inline-flex;
align-items: center;
gap: 10px;
padding: 12px 18px;
border-radius: 100px;
background: var(--fc-card);
border: 1px solid var(--fc-card-border);
box-shadow: 0 16px 32px rgba(0,0,0,0.25);
font-size: 12.5px;
font-weight: 700;
color: var(--fc-heading);
letter-spacing: 0.2px;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
animation: csChipFloat 6s ease-in-out infinite;
}
.cs-chip-dot {
width: 8px; height: 8px;
border-radius: 50%;
background: var(--fc-accent);
box-shadow: 0 0 0 4px rgba(61,191,169,0.18);
animation: csChipPulse 2s ease-in-out infinite;
}
@keyframes csChipFloat {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-4px); }
}
@keyframes csChipPulse {
0%,100% { box-shadow: 0 0 0 4px rgba(61,191,169,0.18); }
50% { box-shadow: 0 0 0 8px rgba(61,191,169,0.06); }
}
/* ── Scroll-triggered entrance ── */
.cs .cs-eyebrow,
.cs .cs-title,
.cs .cs-text > p,
.cs .cs-list li,
.cs .cs-visual { opacity: 0; }
.cs .cs-eyebrow,
.cs .cs-title,
.cs .cs-text > p,
.cs .cs-list li,
.cs .cs-visual {
transition-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
transition-duration: 0.75s;
transition-property: opacity, transform;
}
.cs .cs-eyebrow { transform: translateY(-6px); }
.cs.is-visible .cs-eyebrow { opacity: 1; transform: translateY(0); transition-delay: 0.05s; }
.cs .cs-title { transform: translateY(16px); }
.cs.is-visible .cs-title { opacity: 1; transform: translateY(0); transition-delay: 0.15s; }
.cs .cs-title em::after {
transform: scaleX(0);
transform-origin: left;
transition: transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.cs.is-visible .cs-title em::after { transform: scaleX(1); transition-delay: 0.7s; }
.cs .cs-text > p { transform: translateY(14px); }
.cs.is-visible .cs-text > p:nth-of-type(1) { opacity: 1; transform: translateY(0); transition-delay: 0.3s; }
.cs.is-visible .cs-text > p:nth-of-type(2) { opacity: 1; transform: translateY(0); transition-delay: 0.42s; }
.cs.is-visible .cs-text > p:nth-of-type(3) { opacity: 1; transform: translateY(0); transition-delay: 0.54s; }
.cs .cs-list li { transform: translateX(-12px); transition: opacity 0.6s cubic-bezier(0.22,0.61,0.36,1), transform 0.6s cubic-bezier(0.22,0.61,0.36,1); }
.cs.is-visible .cs-list li:nth-child(1) { opacity: 1; transform: translateX(0); transition-delay: 0.65s; }
.cs.is-visible .cs-list li:nth-child(2) { opacity: 1; transform: translateX(0); transition-delay: 0.75s; }
.cs.is-visible .cs-list li:nth-child(3) { opacity: 1; transform: translateX(0); transition-delay: 0.85s; }
.cs.is-visible .cs-list li:nth-child(4) { opacity: 1; transform: translateX(0); transition-delay: 0.95s; }
.cs.is-visible .cs-list li:hover { transform: translateX(4px); transition-delay: 0s; }
.cs .cs-visual { transform: translateY(24px); }
.cs.is-visible .cs-visual { opacity: 1; transform: translateY(0); transition-delay: 0.35s; transition-duration: 0.9s; }
/* ── Light theme ── */
[data-theme="light"] .cs-bg-a { background: radial-gradient(circle, rgba(61,191,169,0.22), transparent 70%); }
[data-theme="light"] .cs-bg-b { background: radial-gradient(circle, rgba(26,123,175,0.16), transparent 70%); }
[data-theme="light"] .cs-mark { border-color: rgba(61,191,169,0.18); }
[data-theme="light"] .cs-mark::after { border-color: rgba(61,191,169,0.12); }
[data-theme="light"] .cs-frame { box-shadow: 0 20px 50px rgba(30,45,90,0.12); }
[data-theme="light"] .cs-badge {
background: linear-gradient(135deg, #1e2d5a, #1a7baf);
}
[data-theme="light"] .cs-chip {
box-shadow: 0 16px 32px rgba(30,45,90,0.10);
}
[data-theme="light"] .cs-highlight {
background: linear-gradient(120deg, rgba(61,191,169,0.22) 0%, rgba(26,123,175,0.10) 100%);
}
/* ── Responsive ── */
@media (max-width: 1024px) {
.cs-body { grid-template-columns: 1fr; gap: 56px; }
.cs-mark { display: none; }
.cs-title { font-size: 42px; }
.cs-badge { left: 16px; }
.cs-chip { right: 16px; }
.cs-marquee { height: 480px; }
}
@media (max-width: 768px) {
.cs { padding: 170px 0 70px; }
.cs-head { margin-bottom: 44px; }
.cs-title { font-size: 32px; letter-spacing: -0.5px; }
.cs-text p { font-size: 15px; }
.cs-lede { font-size: 16px !important; }
.cs-list li { font-size: 13.5px; }
.cs-marquee { height: 400px; }
.cs-badge { padding: 10px 14px; top: 18px; left: 12px; }
.cs-badge-num { font-size: 28px; }
.cs-badge-text { font-size: 9px; letter-spacing: 1.2px; }
.cs-chip { bottom: -14px; right: 12px; padding: 10px 14px; font-size: 11.5px; }
}
@media (max-width: 480px) {
.cs-title { font-size: 26px; }
.cs-frame-corner { display: none; }
}
@media (prefers-reduced-motion: reduce) {
.cs-bg-a, .cs-bg-b, .cs-mark,
.cs-marquee-track, .cs-badge, .cs-chip, .cs-chip-dot { animation: none !important; }
.cs .cs-eyebrow, .cs .cs-title, .cs .cs-text > p, .cs .cs-list li, .cs .cs-visual {
opacity: 1 !important;
transform: none !important;
transition: none !important;
}
.cs .cs-title em::after { transform: scaleX(1) !important; }
}
/* ═══════════════════════════════════════════════════════════
OUR APPROACH (apr) — About page system-of-work section
═══════════════════════════════════════════════════════════ */
.apr {
position: relative;
background: var(--fc-bg);
padding: 120px 0;
overflow: hidden;
transition: background 0.4s ease;
}
/* Ambient background */
.apr-bg {
position: absolute;
border-radius: 50%;
filter: blur(110px);
pointer-events: none;
opacity: 0.35;
z-index: 0;
}
.apr-bg-a { top: -8%; right: 8%; width: 440px; height: 440px; background: radial-gradient(circle, rgba(61,191,169,0.36), transparent 70%); animation: aprDriftA 28s ease-in-out infinite; }
.apr-bg-b { bottom: -12%; left: -6%; width: 400px; height: 400px; background: radial-gradient(circle, rgba(155,108,247,0.24), transparent 70%); animation: aprDriftB 32s ease-in-out infinite; }
@keyframes aprDriftA { 0%,100% { transform: translate(0,0); } 50% { transform: translate(-16px,12px); } }
@keyframes aprDriftB { 0%,100% { transform: translate(0,0); } 50% { transform: translate(14px,-10px); } }
/* Dashed orbit mark */
.apr-mark {
position: absolute;
top: 54%; right: 6%;
width: 180px; height: 180px;
border-radius: 50%;
border: 1px dashed rgba(61,191,169,0.12);
pointer-events: none;
z-index: 0;
animation: aprMarkSpin 80s linear infinite;
}
@keyframes aprMarkSpin { to { transform: rotate(360deg); } }
.apr .container { position: relative; z-index: 1; }
/* ── Top section: visual (left) + text (right) ── */
.apr-top {
display: grid;
grid-template-columns: 1fr 1.1fr;
gap: 64px;
align-items: center;
margin-bottom: 56px;
}
/* ── Header (left column, editorial) ── */
.apr-head { max-width: 640px; margin: 0; }
.apr-eyebrow {
display: inline-flex;
align-items: center;
gap: 12px;
font-size: 11.5px;
font-weight: 800;
letter-spacing: 3px;
color: var(--fc-accent);
margin-bottom: 22px;
text-transform: uppercase;
}
.apr-eyebrow-dash {
width: 28px;
height: 1px;
background: linear-gradient(90deg, var(--fc-accent), transparent);
}
.apr-title {
font-family: "Plus Jakarta Sans", sans-serif;
font-size: 46px;
font-weight: 800;
color: var(--fc-heading);
line-height: 1.12;
letter-spacing: -1px;
margin: 0 0 28px;
max-width: 820px;
}
.apr-title em {
font-style: italic;
font-weight: 700;
background: linear-gradient(135deg, var(--fc-accent), var(--fc-accent-2));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
position: relative;
}
.apr-title em::after {
content: '';
position: absolute;
left: 0; right: 0;
bottom: -3px;
height: 3px;
border-radius: 3px;
background: linear-gradient(90deg, var(--fc-accent), var(--fc-accent-2));
opacity: 0.4;
}
.apr-body { max-width: 780px; }
.apr-body p {
font-size: 16px;
line-height: 1.8;
color: var(--fc-text-muted);
margin: 0 0 18px;
}
.apr-body p:last-child { margin-bottom: 0; }
.apr-body strong {
color: var(--fc-heading);
font-weight: 700;
background: linear-gradient(120deg, transparent 0%, rgba(61,191,169,0.18) 0%);
padding: 0 4px;
border-radius: 3px;
}
/* ── Visual block (right column) ── */
.apr-visual {
position: relative;
width: 100%;
aspect-ratio: 4 / 4.2;
max-width: 520px;
justify-self: start;
}
/* Slow orbiting ring behind the frame */
.apr-visual-ring {
position: absolute;
inset: -28px;
border-radius: 50%;
border: 1px dashed rgba(61,191,169,0.22);
pointer-events: none;
animation: aprRingSpin 40s linear infinite;
}
.apr-visual-ring::after {
content: '';
position: absolute;
inset: 14px;
border-radius: 50%;
border: 1px solid rgba(61,191,169,0.10);
}
@keyframes aprRingSpin { to { transform: rotate(360deg); } }
/* Rounded image frame */
.apr-visual-frame {
position: relative;
width: 100%;
height: 100%;
border-radius: 26px;
overflow: hidden;
background: var(--fc-bg-alt);
border: 1px solid var(--fc-card-border);
box-shadow: 0 26px 64px rgba(0,0,0,0.32);
transform: translateZ(0);
isolation: isolate;
}
.apr-visual-frame img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 1.2s cubic-bezier(0.2,0.8,0.2,1);
animation: aprImgBreath 12s ease-in-out infinite;
}
.apr-visual:hover .apr-visual-frame img {
transform: scale(1.04);
}
@keyframes aprImgBreath {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.025); }
}
/* Gradient overlay with branded tint */
.apr-visual-overlay {
position: absolute;
inset: 0;
background:
linear-gradient(180deg, transparent 50%, rgba(11,20,38,0.55) 100%),
linear-gradient(135deg, rgba(61,191,169,0.14) 0%, transparent 40%, rgba(26,123,175,0.12) 100%);
pointer-events: none;
}
/* Corner crosshair marks */
.apr-visual-corner {
position: absolute;
width: 22px;
height: 22px;
border: 1.5px solid rgba(61,191,169,0.55);
pointer-events: none;
z-index: 2;
}
.apr-visual-corner-tl { top: 16px; left: 16px; border-right: none; border-bottom: none; border-radius: 4px 0 0 0; }
.apr-visual-corner-br { bottom: 16px; right: 16px; border-left: none; border-top: none; border-radius: 0 0 4px 0; }
/* Floating stat card (top-left, overlapping out) */
.apr-visual-card {
position: absolute;
top: 28px;
left: -22px;
z-index: 3;
display: flex;
align-items: center;
gap: 12px;
padding: 14px 18px;
border-radius: 16px;
background:
linear-gradient(135deg, rgba(11,20,38,0.92), rgba(26,123,175,0.78));
border: 1px solid rgba(61,191,169,0.35);
box-shadow: 0 18px 36px rgba(0,0,0,0.35);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
animation: aprCardFloat 5s ease-in-out infinite;
}
.apr-visual-card-ic {
width: 38px;
height: 38px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, var(--fc-accent), var(--fc-accent-2));
color: #fff;
font-size: 16px;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.15);
}
.apr-visual-card-body {
display: flex;
flex-direction: column;
gap: 2px;
}
.apr-visual-card-num {
font-family: "Plus Jakarta Sans", sans-serif;
font-size: 20px;
font-weight: 800;
line-height: 1;
background: linear-gradient(135deg, #ffffff, #c9eee5);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
letter-spacing: -0.4px;
}
.apr-visual-card-lbl {
font-family: "Plus Jakarta Sans", sans-serif;
font-size: 10.5px;
font-weight: 700;
letter-spacing: 1.2px;
color: rgba(255,255,255,0.7);
text-transform: uppercase;
}
@keyframes aprCardFloat {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-6px); }
}
/* Floating live chip (bottom-right, overlapping out) */
.apr-visual-chip {
position: absolute;
bottom: -18px;
right: -14px;
z-index: 3;
display: inline-flex;
align-items: center;
gap: 10px;
padding: 10px 16px;
border-radius: 100px;
background: var(--fc-card);
border: 1px solid var(--fc-card-border);
box-shadow: 0 14px 28px rgba(0,0,0,0.22);
font-size: 12px;
font-weight: 700;
color: var(--fc-heading);
letter-spacing: 0.2px;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
animation: aprChipFloat 6s ease-in-out infinite;
}
.apr-visual-chip-dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--fc-accent);
box-shadow: 0 0 0 3px rgba(61,191,169,0.2);
animation: aprChipPulse 2s ease-in-out infinite;
}
@keyframes aprChipFloat {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-4px); }
}
@keyframes aprChipPulse {
0%,100% { box-shadow: 0 0 0 3px rgba(61,191,169,0.2); }
50% { box-shadow: 0 0 0 7px rgba(61,191,169,0.06); }
}
/* ── Cards grid (2×2, subtle, no heavy boxes) ── */
.apr-cards {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
margin-top: 40px;
}
.apr-card {
position: relative;
padding: 34px 32px 30px;
border-radius: 20px;
background: rgba(255,255,255,0.02);
border: 1px solid rgba(255,255,255,0.06);
overflow: hidden;
transition: transform 0.5s cubic-bezier(0.2,0.8,0.2,1), border-color 0.4s ease, background 0.4s ease;
}
.apr-card:hover {
transform: translateY(-6px);
border-color: rgba(var(--ac), 0.32);
background: linear-gradient(160deg, rgba(var(--ac),0.06) 0%, transparent 60%), rgba(255,255,255,0.03);
}
.apr-card-glow {
position: absolute;
bottom: -80px;
right: -80px;
width: 220px;
height: 220px;
border-radius: 50%;
background: radial-gradient(circle, rgba(var(--ac),0.22), transparent 70%);
filter: blur(40px);
opacity: 0;
transition: opacity 0.55s ease;
pointer-events: none;
}
.apr-card:hover .apr-card-glow { opacity: 1; }
.apr-card-num {
display: inline-block;
font-family: "JetBrains Mono", "Consolas", monospace;
font-size: 12px;
font-weight: 700;
letter-spacing: 2px;
color: var(--fc-text-muted);
opacity: 0.65;
margin-bottom: 18px;
transition: color 0.35s ease, opacity 0.35s ease;
}
.apr-card:hover .apr-card-num {
color: rgb(var(--ac));
opacity: 1;
}
.apr-card-title {
font-family: "Plus Jakarta Sans", sans-serif;
font-size: 20px;
font-weight: 800;
color: var(--fc-heading);
letter-spacing: -0.3px;
margin: 0 0 12px;
line-height: 1.3;
}
.apr-card-text {
font-size: 14.5px;
line-height: 1.72;
color: var(--fc-text-muted);
margin: 0;
}
/* Gradient accent underline that draws in on hover */
.apr-card-accent {
position: absolute;
left: 32px;
bottom: 20px;
width: 28px;
height: 2px;
border-radius: 2px;
background: linear-gradient(90deg, rgb(var(--ac)), rgba(var(--ac),0.4));
opacity: 0.35;
transition: width 0.55s cubic-bezier(0.2,0.8,0.2,1), opacity 0.35s ease;
}
.apr-card:hover .apr-card-accent {
width: 68px;
opacity: 1;
}
/* ── Scroll-triggered entrance ── */
.apr .apr-eyebrow,
.apr .apr-title,
.apr .apr-body p,
.apr .apr-card,
.apr .apr-visual { opacity: 0; }
.apr .apr-eyebrow,
.apr .apr-title,
.apr .apr-body p,
.apr .apr-card,
.apr .apr-visual {
transition-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
transition-duration: 0.7s;
transition-property: opacity, transform;
}
.apr .apr-visual { transform: translateX(-28px) scale(0.98); transition-duration: 0.9s; }
.apr.is-visible .apr-visual { opacity: 1; transform: translateX(0) scale(1); transition-delay: 0.2s; }
.apr .apr-eyebrow { transform: translateY(-6px); }
.apr.is-visible .apr-eyebrow { opacity: 1; transform: translateY(0); transition-delay: 0.05s; }
.apr .apr-title { transform: translateY(14px); }
.apr.is-visible .apr-title { opacity: 1; transform: translateY(0); transition-delay: 0.15s; }
.apr .apr-title em::after {
transform: scaleX(0);
transform-origin: left;
transition: transform 0.85s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.apr.is-visible .apr-title em::after { transform: scaleX(1); transition-delay: 0.75s; }
.apr .apr-body p { transform: translateY(12px); }
.apr.is-visible .apr-body p:nth-of-type(1) { opacity: 1; transform: translateY(0); transition-delay: 0.3s; }
.apr.is-visible .apr-body p:nth-of-type(2) { opacity: 1; transform: translateY(0); transition-delay: 0.42s; }
.apr .apr-card { transform: translateY(20px); }
.apr.is-visible .apr-card:nth-child(1) { opacity: 1; transform: translateY(0); transition-delay: 0.45s; }
.apr.is-visible .apr-card:nth-child(2) { opacity: 1; transform: translateY(0); transition-delay: 0.55s; }
.apr.is-visible .apr-card:nth-child(3) { opacity: 1; transform: translateY(0); transition-delay: 0.65s; }
.apr.is-visible .apr-card:nth-child(4) { opacity: 1; transform: translateY(0); transition-delay: 0.75s; }
.apr.is-visible .apr-card:hover { transform: translateY(-6px); transition-delay: 0s; }
/* ── Light theme ── */
[data-theme="light"] .apr-bg-a { background: radial-gradient(circle, rgba(61,191,169,0.20), transparent 70%); }
[data-theme="light"] .apr-bg-b { background: radial-gradient(circle, rgba(155,108,247,0.14), transparent 70%); }
[data-theme="light"] .apr-mark { border-color: rgba(61,191,169,0.18); }
[data-theme="light"] .apr-card {
background: #ffffff;
border-color: rgba(30,45,90,0.08);
box-shadow: 0 4px 16px rgba(30,45,90,0.04);
}
[data-theme="light"] .apr-card:hover {
background: linear-gradient(160deg, rgba(var(--ac),0.08) 0%, transparent 60%), #ffffff;
box-shadow: 0 20px 44px rgba(var(--ac),0.18), 0 6px 16px rgba(30,45,90,0.06);
}
[data-theme="light"] .apr-card-text { color: #5F7082; }
[data-theme="light"] .apr-card-num { color: #8A95B0; }
/* ── Responsive ── */
@media (max-width: 1024px) {
.apr-top { grid-template-columns: 1fr; gap: 48px; }
.apr-visual { justify-self: start; max-width: 560px; aspect-ratio: 4 / 3.2; }
.apr-title { font-size: 38px; }
.apr-cards { gap: 18px; }
.apr-visual-ring { inset: -18px; }
}
@media (max-width: 768px) {
.apr { padding: 80px 0; }
.apr-top { gap: 40px; margin-bottom: 40px; }
.apr-title { font-size: 30px; letter-spacing: -0.5px; }
.apr-body p { font-size: 15px; line-height: 1.75; }
.apr-visual { aspect-ratio: 4 / 3; }
.apr-visual-card { top: 18px; left: 12px; padding: 10px 14px; }
.apr-visual-card-num { font-size: 17px; }
.apr-visual-card-lbl { font-size: 9.5px; letter-spacing: 1px; }
.apr-visual-card-ic { width: 32px; height: 32px; font-size: 14px; }
.apr-visual-chip { bottom: -14px; right: 12px; font-size: 11px; padding: 8px 14px; }
.apr-visual-corner { width: 16px; height: 16px; top: 12px; left: 12px; }
.apr-visual-corner-br { bottom: 12px; right: 12px; top: auto; left: auto; }
.apr-visual-ring { display: none; }
.apr-cards { grid-template-columns: 1fr; gap: 14px; margin-top: 32px; }
.apr-card { padding: 28px 24px 26px; }
.apr-card-title { font-size: 18px; }
.apr-card-accent { left: 24px; bottom: 18px; }
.apr-mark { display: none; }
}
@media (max-width: 480px) {
.apr-title { font-size: 26px; }
.apr-visual-card { left: -8px; }
}
/* ── Light theme ── */
[data-theme="light"] .apr-visual-frame {
border-color: rgba(30,45,90,0.10);
box-shadow: 0 20px 50px rgba(30,45,90,0.12);
}
[data-theme="light"] .apr-visual-overlay {
background:
linear-gradient(180deg, transparent 50%, rgba(30,45,90,0.35) 100%),
linear-gradient(135deg, rgba(61,191,169,0.08) 0%, transparent 40%, rgba(26,123,175,0.08) 100%);
}
[data-theme="light"] .apr-visual-ring { border-color: rgba(61,191,169,0.28); }
[data-theme="light"] .apr-visual-ring::after { border-color: rgba(61,191,169,0.14); }
[data-theme="light"] .apr-visual-card {
background: linear-gradient(135deg, #1e2d5a, #1a7baf);
}
[data-theme="light"] .apr-visual-chip {
box-shadow: 0 14px 28px rgba(30,45,90,0.10);
}
@media (prefers-reduced-motion: reduce) {
.apr-bg-a, .apr-bg-b, .apr-mark,
.apr-visual-ring, .apr-visual-frame img,
.apr-visual-card, .apr-visual-chip, .apr-visual-chip-dot { animation: none !important; }
.apr .apr-eyebrow, .apr .apr-title, .apr .apr-body p, .apr .apr-card, .apr .apr-visual {
opacity: 1 !important;
transform: none !important;
transition: none !important;
}
.apr .apr-title em::after { transform: scaleX(1) !important; }
}
/* ---- Section Shell ---- */
.about-company-section {
background-color: var(--fc-bg) !important;
position: relative;
overflow: hidden;
}
/* ---- Decorative Orbs ---- */
.ac-orb {
position: absolute;
border-radius: 50%;
filter: blur(80px);
pointer-events: none;
animation: ac-orb-drift 12s ease-in-out infinite;
}
.ac-orb--1 {
width: 500px; height: 500px;
background: radial-gradient(circle, rgba(61,191,169,0.18) 0%, transparent 70%);
top: -150px; left: -150px;
animation-delay: 0s;
}
.ac-orb--2 {
width: 400px; height: 400px;
background: radial-gradient(circle, rgba(0,212,255,0.13) 0%, transparent 70%);
bottom: 0; right: -100px;
animation-delay: -4s;
}
.ac-orb--3 {
width: 300px; height: 300px;
background: radial-gradient(circle, rgba(130,80,255,0.1) 0%, transparent 70%);
top: 50%; left: 55%;
animation-delay: -8s;
}
/* ---- Mesh Grid ---- */
.ac-mesh-grid {
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(61,191,169,0.04) 1px, transparent 1px),
linear-gradient(90deg, rgba(61,191,169,0.04) 1px, transparent 1px);
background-size: 60px 60px;
pointer-events: none;
}
/* ---- Header ---- */
.about-company-header {
max-width: 800px;
margin: 0 auto 56px;
}
.about-company-label {
color: var(--fc-accent) !important;
font-weight: 700;
letter-spacing: 2.5px;
display: inline-flex;
align-items: center;
gap: 10px;
font-size: 12px;
text-transform: uppercase;
background: linear-gradient(135deg, rgba(61,191,169,0.12), rgba(0,212,255,0.08));
padding: 9px 22px;
border-radius: 40px;
border: 1px solid rgba(61,191,169,0.3);
margin-bottom: 26px;
backdrop-filter: blur(8px);
box-shadow: 0 4px 20px rgba(61,191,169,0.12), inset 0 1px 0 rgba(255,255,255,0.1);
}
.ac-label-dot {
width: 7px; height: 7px;
border-radius: 50%;
background: var(--fc-accent, #3DBFA9);
display: inline-block;
flex-shrink: 0;
box-shadow: 0 0 6px var(--fc-accent, #3DBFA9);
animation: ac-dot-blink 2s ease-in-out infinite;
}
.about-company-title {
color: var(--fc-heading) !important;
font-size: 56px;
font-weight: 800;
line-height: 1.12;
margin-bottom: 22px;
letter-spacing: -1px;
}
.about-company-title .text-gradient {
background: linear-gradient(135deg, var(--fc-accent, #3DBFA9), #1A7BAF, #9B6CF7) !important;
-webkit-background-clip: text !important;
-webkit-text-fill-color: transparent !important;
background-clip: text !important;
color: transparent !important;
}
/* GSAP SplitText wraps chars in divs — force gradient text color on them */
.text-gradient div,
.text-gradient span,
.text-gradient .split-line,
.text-gradient .split-line div {
-webkit-text-fill-color: var(--fc-accent, #3DBFA9) !important;
color: var(--fc-accent, #3DBFA9) !important;
}
.about-company-desc {
color: var(--fc-text) !important;
font-size: 17px;
line-height: 1.75;
max-width: 640px;
margin: 0 auto 10px;
opacity: 0.88;
}
/* Header Actions */
.ac-header-actions {
display: flex;
align-items: center;
justify-content: center;
gap: 20px;
margin-top: 32px;
flex-wrap: wrap;
}
.ac-scroll-btn {
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--fc-text) !important;
font-size: 14px;
font-weight: 600;
text-decoration: none;
opacity: 0.7;
transition: opacity 0.3s, gap 0.3s;
}
.ac-scroll-btn i { animation: ac-float 2s ease-in-out infinite; }
.ac-scroll-btn:hover { opacity: 1; gap: 12px; }
/* ---- Stats Bar ---- */
.ac-stats-bar {
display: flex;
align-items: center;
justify-content: center;
gap: 0;
background: var(--fc-card, var(--white));
border: 1px solid var(--fc-border, rgba(0,0,0,0.06));
border-radius: 20px;
padding: 28px 40px;
margin-bottom: 56px;
position: relative;
box-shadow: 0 8px 40px rgba(0,0,0,0.06);
backdrop-filter: blur(12px);
overflow: hidden;
flex-wrap: wrap;
row-gap: 24px;
}
.ac-stats-bar::before {
content: '';
position: absolute;
inset: 0;
border-radius: 20px;
background: linear-gradient(135deg, rgba(61,191,169,0.04), rgba(0,212,255,0.03));
pointer-events: none;
}
.ac-stat {
flex: 1;
min-width: 120px;
text-align: center;
position: relative;
}
.ac-stat__num {
display: inline;
font-size: 42px;
font-weight: 800;
line-height: 1;
background: linear-gradient(135deg, var(--fc-accent, #3DBFA9), #00d4ff);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.ac-stat__suffix {
display: inline;
font-size: 28px;
font-weight: 800;
background: linear-gradient(135deg, var(--fc-accent, #3DBFA9), #00d4ff);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.ac-stat__label {
display: block;
font-size: 12px;
font-weight: 600;
letter-spacing: 1.5px;
text-transform: uppercase;
color: var(--fc-text) !important;
opacity: 0.6;
margin-top: 6px;
}
.ac-stat-divider {
width: 1px;
height: 56px;
background: linear-gradient(to bottom, transparent, rgba(61,191,169,0.3), transparent);
flex-shrink: 0;
margin: 0 12px;
}
/* ---- Card Base ---- */
.about-company-grid { margin-top: 0; }
.about-card {
background: var(--fc-card, var(--white));
border: 1px solid var(--fc-border, rgba(0,0,0,0.06));
border-radius: 20px;
padding: 36px;
height: 100%;
transition: transform 0.4s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.4s ease, border-color 0.4s ease;
position: relative;
overflow: hidden;
}
.about-card:hover {
transform: translateY(-6px);
box-shadow: 0 20px 60px rgba(0,0,0,0.1);
border-color: rgba(61,191,169,0.35);
}
/* Glow overlay */
.ac-card-glow {
position: absolute;
inset: 0;
border-radius: 20px;
background: radial-gradient(ellipse at 50% 0%, rgba(61,191,169,0.1) 0%, transparent 65%);
opacity: 0;
transition: opacity 0.4s ease;
pointer-events: none;
}
.ac-card-glow--gold { background: radial-gradient(ellipse at 50% 0%, rgba(255,190,50,0.12) 0%, transparent 65%); }
.ac-card-glow--blue { background: radial-gradient(ellipse at 50% 0%, rgba(0,180,216,0.12) 0%, transparent 65%); }
.about-card:hover .ac-card-glow { opacity: 1; }
/* ---- Tag ---- */
.ac-tag {
display: inline-block;
font-size: 10px;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--fc-accent, #3DBFA9);
background: rgba(61,191,169,0.1);
border: 1px solid rgba(61,191,169,0.2);
border-radius: 20px;
padding: 4px 12px;
margin-bottom: 14px;
}
/* ---- Team Card (wide) ---- */
.about-card--team {
display: flex;
align-items: center;
justify-content: space-between;
gap: 36px;
min-height: 260px;
background: linear-gradient(135deg, var(--fc-card, #fff) 60%, rgba(61,191,169,0.04));
}
.about-card--team .about-card__content { flex: 1; }
.about-card__title {
color: var(--fc-heading) !important;
font-size: 24px;
font-weight: 700;
margin-bottom: 14px;
}
.about-card__text {
color: var(--fc-text) !important;
font-size: 15px;
line-height: 1.75;
margin: 0 0 18px;
}
/* Feature list inside team card */
.ac-feature-list {
list-style: none;
padding: 0; margin: 0;
display: flex;
flex-direction: column;
gap: 8px;
}
.ac-feature-list li {
display: flex;
align-items: center;
gap: 10px;
font-size: 14px;
color: var(--fc-text) !important;
font-weight: 500;
}
.ac-feature-list li i {
width: 20px; height: 20px;
border-radius: 50%;
background: rgba(61,191,169,0.15);
color: var(--fc-accent, #3DBFA9);
font-size: 10px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
/* Icon group (team card right) */
.about-card__icon-group {
flex-shrink: 0;
position: relative;
width: 120px;
height: 120px;
}
.about-card__floating-icon {
width: 72px;
height: 72px;
background: linear-gradient(135deg, rgba(61,191,169,0.15), rgba(0,212,255,0.1));
border: 1px solid rgba(61,191,169,0.25);
border-radius: 18px;
display: flex;
align-items: center;
justify-content: center;
font-size: 30px;
color: var(--fc-accent, #3DBFA9);
position: absolute;
bottom: 0; left: 0;
}
/* Pulse ring on floating icon */
.ac-icon-pulse::before {
content: '';
position: absolute;
inset: -8px;
border-radius: 26px;
border: 2px solid rgba(61,191,169,0.3);
animation: ac-pulse-ring 2.5s ease-out infinite;
}
.ac-icon-pulse::after {
content: '';
position: absolute;
inset: -18px;
border-radius: 34px;
border: 2px solid rgba(61,191,169,0.15);
animation: ac-pulse-ring 2.5s ease-out infinite 0.6s;
}
.about-card__icon-group::before {
content: '';
position: absolute;
top: 0; right: 0;
width: 50px; height: 50px;
border: 1px solid rgba(61,191,169,0.15);
border-radius: 12px;
background: rgba(61,191,169,0.04);
}
.about-card__icon-group::after {
content: '';
position: absolute;
top: 28px; right: 28px;
width: 38px; height: 38px;
border: 1px solid rgba(61,191,169,0.1);
border-radius: 8px;
background: rgba(61,191,169,0.02);
}
/* ---- Highlight Card ---- */
.about-card--highlight {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 260px;
background: linear-gradient(145deg, rgba(61,191,169,0.06), rgba(0,212,255,0.04));
border: 1px solid rgba(61,191,169,0.2);
text-align: center;
}
.about-card__icon-circle {
width: 70px; height: 70px;
border-radius: 50%;
background: linear-gradient(135deg, var(--fc-accent, #3DBFA9), #2aa393);
display: flex;
align-items: center;
justify-content: center;
font-size: 28px;
color: #fff;
margin-bottom: 20px;
box-shadow: 0 10px 30px rgba(61,191,169,0.35);
position: relative;
flex-shrink: 0;
}
/* Spinning ring around icon */
.ac-icon-spin-wrap::after {
content: '';
position: absolute;
inset: -6px;
border-radius: 50%;
border: 2px dashed rgba(61,191,169,0.4);
animation: ac-spin-slow 8s linear infinite;
}
.about-card--highlight .about-card__title { font-size: 22px; margin-bottom: 0; }
/* ---- Stat Card ---- */
.about-card--stat {
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: linear-gradient(145deg, rgba(0,180,216,0.05), rgba(61,191,169,0.04));
border: 1px solid rgba(0,180,216,0.2);
}
.about-card__icon-circle--theme {
background: linear-gradient(135deg, #00b4d8, var(--fc-accent, #3DBFA9));
box-shadow: 0 10px 30px rgba(0,180,216,0.35);
}
.ac-icon-float { animation: ac-float 3s ease-in-out infinite; }
/* Progress bar */
.ac-progress-bar {
width: 100%;
height: 4px;
background: rgba(61,191,169,0.12);
border-radius: 4px;
margin-top: 18px;
overflow: hidden;
}
.ac-progress-fill {
height: 100%;
border-radius: 4px;
background: linear-gradient(90deg, var(--fc-accent, #3DBFA9), #00d4ff);
width: 0;
transition: width 1.5s cubic-bezier(0.4,0,0.2,1);
}
.ac-progress-label {
font-size: 11px;
font-weight: 600;
letter-spacing: 1.5px;
text-transform: uppercase;
color: var(--fc-text) !important;
opacity: 0.55;
margin-top: 8px;
display: block;
}
.about-card__text-sm {
color: var(--fc-text) !important;
font-size: 14px;
margin: 8px 0 0;
opacity: 0.75;
line-height: 1.6;
}
/* ---- Info Card ---- */
.about-card--info {
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 30px 24px;
border: 1px solid rgba(61,191,169,0.15);
}
.ac-card--focus {
background: linear-gradient(145deg, rgba(130,80,255,0.05), rgba(61,191,169,0.04));
border-color: rgba(130,80,255,0.2);
}
.ac-focus-icon {
width: 48px; height: 48px;
border-radius: 14px;
background: linear-gradient(135deg, rgba(130,80,255,0.15), rgba(61,191,169,0.1));
border: 1px solid rgba(130,80,255,0.2);
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
color: #8250ff;
margin-bottom: 14px;
}
/* Mini cards */
.about-card--mini { padding: 22px 20px; }
.ac-mini-icon {
width: 40px; height: 40px;
border-radius: 10px;
background: rgba(61,191,169,0.1);
border: 1px solid rgba(61,191,169,0.2);
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
color: var(--fc-accent, #3DBFA9);
margin-bottom: 12px;
}
.ac-mini-icon--gold {
background: rgba(255,190,50,0.1);
border-color: rgba(255,190,50,0.2);
color: #f5a623;
}
.about-card__label {
display: block;
font-size: 10px;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--fc-text) !important;
opacity: 0.5;
margin-bottom: 10px;
}
.about-card__value {
color: var(--fc-heading) !important;
font-size: 19px;
font-weight: 700;
margin: 0;
line-height: 1.3;
}
.about-card__value--accent {
background: linear-gradient(135deg, var(--fc-accent, #3DBFA9), #00d4ff);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
/* ---- Values Row ---- */
.ac-values-row {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
margin-top: 56px;
padding-top: 56px;
border-top: 1px solid var(--fc-border, rgba(0,0,0,0.06));
}
.ac-value-item {
text-align: center;
padding: 32px 20px;
border-radius: 16px;
background: var(--fc-card, var(--white));
border: 1px solid var(--fc-border, rgba(0,0,0,0.06));
transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
position: relative;
overflow: hidden;
}
.ac-value-item:hover {
transform: translateY(-4px);
box-shadow: 0 16px 48px rgba(0,0,0,0.08);
border-color: rgba(61,191,169,0.3);
}
.ac-value-item::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 2px;
background: linear-gradient(90deg, var(--fc-accent, #3DBFA9), #00d4ff);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.4s ease;
}
.ac-value-item:hover::before { transform: scaleX(1); }
.ac-value-icon {
width: 60px; height: 60px;
border-radius: 16px;
background: linear-gradient(135deg, rgba(61,191,169,0.15), rgba(0,212,255,0.08));
border: 1px solid rgba(61,191,169,0.2);
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
color: var(--fc-accent, #3DBFA9);
margin: 0 auto 18px;
transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.ac-value-item:hover .ac-value-icon { transform: scale(1.1); box-shadow: 0 8px 24px rgba(61,191,169,0.3); }
.ac-value-icon--2 { background: linear-gradient(135deg, rgba(0,212,255,0.15), rgba(61,191,169,0.08)); border-color: rgba(0,212,255,0.2); color: #00b4d8; }
.ac-value-icon--3 { background: linear-gradient(135deg, rgba(130,80,255,0.15), rgba(0,212,255,0.08)); border-color: rgba(130,80,255,0.2); color: #8250ff; }
.ac-value-icon--4 { background: linear-gradient(135deg, rgba(255,190,50,0.15), rgba(255,100,50,0.08)); border-color: rgba(255,190,50,0.25); color: #f5a623; }
.ac-value-title {
font-size: 17px;
font-weight: 700;
color: var(--fc-heading) !important;
margin-bottom: 10px;
}
.ac-value-desc {
font-size: 13.5px;
color: var(--fc-text) !important;
opacity: 0.72;
line-height: 1.65;
margin: 0;
}
/* ---- Responsive ---- */
@media (max-width: 1199px) {
.ac-values-row { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 991px) {
.about-company-title { font-size: 42px; letter-spacing: -0.5px; }
.about-card--team { flex-direction: column; text-align: center; min-height: auto; }
.about-card__icon-group { margin: 0 auto; }
.ac-feature-list { align-items: center; }
.ac-stats-bar { padding: 24px 20px; gap: 0; }
.ac-stat-divider { height: 40px; }
.about-card { padding: 28px; }
}
@media (max-width: 767px) {
/* Compact, balanced header on mobile */
.about-company-header { margin-bottom: 40px; max-width: 520px; }
.about-company-label {
font-size: 10.5px;
letter-spacing: 2px;
padding: 7px 16px;
margin-bottom: 20px;
gap: 8px;
box-shadow: none;
}
.ac-label-dot { width: 6px; height: 6px; }
.about-company-title {
font-size: 30px;
line-height: 1.18;
letter-spacing: -0.3px;
margin-bottom: 16px;
}
.about-company-desc {
font-size: 15px;
line-height: 1.7;
max-width: 460px;
opacity: 0.82;
}
.ac-header-actions { margin-top: 22px; gap: 12px; }
.ac-scroll-btn { font-size: 12px; }
/* Stats bar becomes a compact 2×2 grid with cross hairlines */
.ac-stats-bar {
display: grid;
grid-template-columns: 1fr 1fr;
flex-direction: unset;
flex-wrap: unset;
gap: 0;
padding: 20px 16px;
border-radius: 18px;
row-gap: 0;
margin-bottom: 44px;
}
.ac-stat {
flex: unset;
min-width: 0;
padding: 16px 10px;
position: relative;
}
/* Vertical hairline between left/right column */
.ac-stat:nth-child(odd):not(:last-child)::after {
content: '';
position: absolute;
right: 0; top: 18%; bottom: 18%;
width: 1px;
background: linear-gradient(180deg, transparent, rgba(61,191,169,0.3) 25%, rgba(61,191,169,0.3) 75%, transparent);
}
/* Horizontal hairline between row 1 and row 2 */
.ac-stat:nth-child(-n+2)::before {
content: '';
position: absolute;
left: 10%; right: 10%;
bottom: 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(61,191,169,0.3) 20%, rgba(61,191,169,0.3) 80%, transparent);
}
/* Hide the old element dividers — the pseudo-elements handle it */
.ac-stat-divider { display: none; }
.ac-stat__num { font-size: 30px; letter-spacing: -0.6px; }
.ac-stat__suffix { font-size: 20px; }
.ac-stat__label { font-size: 10.5px; letter-spacing: 1.1px; margin-top: 4px; }
.ac-values-row { grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 40px; padding-top: 40px; }
.ac-value-item { padding: 24px 16px; }
.about-card { border-radius: 16px; }
.ac-header-actions { flex-direction: column; gap: 14px; }
}
@media (max-width: 575px) {
.about-company-title { font-size: 28px; }
.about-company-desc { font-size: 15px; }
.about-card { padding: 22px 18px; }
.ac-stats-bar { padding: 16px 12px; border-radius: 16px; }
.ac-stat { padding: 14px 6px; }
.ac-stat__num { font-size: 26px; letter-spacing: -0.4px; }
.ac-stat__suffix { font-size: 18px; }
.ac-stat__label { font-size: 9.8px; letter-spacing: 1px; }
.ac-values-row { grid-template-columns: 1fr 1fr; gap: 12px; }
.ac-orb--1 { width: 260px; height: 260px; }
.ac-orb--2 { width: 200px; height: 200px; }
.ac-orb--3 { display: none; }
}
/* ================================================================
ABOUT PAGE — COMPREHENSIVE FIXES
Image quality · Spacing · Typography · Responsiveness
================================================================ */
/* ── 1. IMAGE QUALITY FIXES ──────────────────────────────────────
Parent card hover transforms (translateY) create new compositing
layers and can cause subpixel blurriness on child images.
Fix: force GPU-native rendering on all content images. */
.founder-photo-wrap img,
.moment-img img,
.about-card img {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
transform: translateZ(0);
-webkit-transform: translateZ(0);
image-rendering: auto;
}
/* Isolate blur-filter orbs so their stacking context
doesn't leak onto content siblings */
.ac-orb,
.ab-svc-bg-glow {
isolation: isolate;
z-index: 0;
}
.about-company-section .container,
.ab-svc-section .container {
isolation: isolate;
position: relative;
z-index: 2;
}
/* ── 2. SPACING FIXES ────────────────────────────────────────────*/
/* founder-info had 0 bottom padding — cramped gap above stats */
.founder-info {
padding: 28px 24px 22px;
}
/* founder bio text size — slightly small for readability */
.founder-bio {
font-size: 14.5px;
line-height: 1.75;
}
/* career-perks gap too tight (was 6px) */
.career-perks {
gap: 10px;
margin-bottom: 20px;
}
/* career-perk padding tighter on desktop so it doesn't push btn */
.career-perk {
padding: 12px 14px;
}
/* ac-values-row: margin-top + padding-top was 112px total — trim */
.ac-values-row {
margin-top: 40px;
padding-top: 40px;
}
/* about-company-header: bottom margin trim */
.about-company-header {
margin: 0 auto 44px;
}
/* ac-stats-bar: better vertical spacing */
.ac-stats-bar {
margin-bottom: 44px;
}
/* ab-svc-section: header bottom margin */
.ab-svc-header {
margin-bottom: 36px;
}
/* ── 3. TYPOGRAPHY FIXES ─────────────────────────────────────────*/
/* about-company-desc line-height slightly improved */
.about-company-desc {
font-size: 16px;
line-height: 1.75;
opacity: 0.85;
}
/* quote-text more readable */
.quote-text {
font-size: 16.5px;
line-height: 1.75;
}
/* perk-content text tightened up */
.perk-content h5 {
font-size: 12.5px;
margin-bottom: 1px;
}
.perk-content p {
font-size: 12px;
}
/* ab-svc card desc opacity was 0.75 — slightly low */
.ab-svc-card__desc {
opacity: 0.82;
}
/* ── 4. RESPONSIVENESS FIXES ─────────────────────────────────────*/
/* ── 991px tablet ── */
@media (max-width: 991px) {
.founder-section { padding: 80px 0; }
.founder-header { margin-bottom: 36px; }
.founder-main-title { font-size: 34px; }
.founder-right { gap: 18px; }
/* ab-svc header: align left on tablet */
.ab-svc-header {
flex-direction: column;
align-items: flex-start;
gap: 16px;
}
.ab-svc-header__right {
align-items: flex-start;
text-align: left;
max-width: 100%;
gap: 12px;
}
.ab-svc-cta-link { align-self: flex-start; }
}
/* ── 767px mobile ── */
@media (max-width: 767px) {
/* Founder section */
.founder-section { padding: 60px 0; }
.founder-header { margin-bottom: 28px; }
.founder-main-title { font-size: 26px; letter-spacing: -0.2px; }
.founder-subtitle { font-size: 11px; }
.founder-info { padding: 22px 20px 18px; }
.founder-name { font-size: 20px; }
.founder-bio { font-size: 14px; }
.founder-quote-block { padding: 22px 20px; }
.founder-career-block { padding: 20px; }
.quote-text { font-size: 15px; }
.career-cta-head { gap: 12px; margin-bottom: 18px; padding-bottom: 16px; }
/* About company section */
.about-company-section { padding: 70px 0 60px; }
.about-company-header { margin-bottom: 32px; }
.about-company-title { font-size: 30px !important; }
.about-company-desc { font-size: 15px; }
/* Values row */
.ac-values-row { margin-top: 32px; padding-top: 32px; }
/* Stats bar */
.ac-stats-bar { padding: 20px 16px; }
.ac-stat__num { font-size: 36px; }
.ac-stat__suffix { font-size: 24px; }
}
/* ── 575px small mobile ── */
@media (max-width: 575px) {
/* Founder stats — 10,000+ overflows in 3-col grid on tiny screens */
.founder-stats { grid-template-columns: 1fr 1fr 1fr; }
.stat-number { font-size: 18px; }
.stat-label { font-size: 10px; letter-spacing: 0.4px; }
/* About company */
.about-company-title { font-size: 26px !important; }
.about-company-desc { font-size: 14.5px; }
/* Stats bar stacked */
.ac-stat__num { font-size: 30px; }
.ac-stat__suffix { font-size: 20px; }
.ac-stat__label { font-size: 10.5px; }
/* Values row: 2 cols is fine, just reduce padding */
.ac-value-item { padding: 20px 14px; }
.ac-value-title { font-size: 15px; }
.ac-value-desc { font-size: 12.5px; }
/* Mini cards row */
.about-card--mini { padding: 18px 16px; }
.about-card__value { font-size: 15px; }
.about-card__label { font-size: 9.5px; }
/* Career block */
.career-cta-text h4 { font-size: 13px; }
.founder-career-block { padding: 18px; }
.career-perks { gap: 8px; }
}
/* ── 400px very small ── */
@media (max-width: 400px) {
.founder-stats {
grid-template-columns: 1fr 1fr;
}
.founder-stat:last-child {
grid-column: span 2;
border-right: none;
border-top: 1px solid var(--fc-card-border);
}
.stat-number { font-size: 17px; }
.ac-values-row { grid-template-columns: 1fr; }
.ac-value-item { padding: 18px 14px; }
.about-company-title { font-size: 23px !important; }
}
/* ================================================================
CUSTOM MOUSE CURSOR
cursor-outer = large ring that follows with lag
cursor-inner = small solid dot that follows instantly
================================================================ */
/* Hide default cursor site-wide */
* { cursor: none !important; }
/* On touch / mobile screens — restore default cursor & hide custom */
@media (hover: none) and (pointer: coarse) {
* { cursor: auto !important; }
.mouseCursor { display: none !important; }
}
/* ── Base styles ── */
.mouseCursor {
position: fixed;
top: 0; left: 0;
pointer-events: none;
z-index: 9999999;
border-radius: 50%;
/* transform is set entirely by JS (includes -50% offset) */
transition-property: width, height, background, border-color, opacity;
transition-duration: 0.25s;
transition-timing-function: ease;
visibility: hidden; /* shown by JS once mouse moves */
}
/* ── Outer ring ── */
.cursor-outer {
width: 36px;
height: 36px;
border: 1.5px solid rgba(61, 191, 169, 0.6);
background: transparent;
/* lag effect: the outer ring transitions its transform position */
transition: transform 0.12s ease,
width 0.25s ease,
height 0.25s ease,
border-color 0.25s ease,
opacity 0.25s ease;
}
/* ── Inner dot ── */
.cursor-inner {
width: 8px;
height: 8px;
background: #3DBFA9;
box-shadow: 0 0 10px rgba(61, 191, 169, 0.7), 0 0 20px rgba(61, 191, 169, 0.3);
transition: transform 0.06s ease,
width 0.2s ease,
height 0.2s ease,
background 0.2s ease,
opacity 0.2s ease;
}
/* ── Hover state (over links, buttons) ── */
.cursor-outer.cursor-hover {
width: 52px;
height: 52px;
border-color: rgba(61, 191, 169, 0.9);
background: rgba(61, 191, 169, 0.06);
}
.cursor-inner.cursor-hover {
width: 10px;
height: 10px;
background: #ffffff;
box-shadow: 0 0 14px rgba(61, 191, 169, 1), 0 0 28px rgba(61, 191, 169, 0.4);
}
/* ── Light theme adjustments ── */
[data-theme="light"] .cursor-outer {
border-color: rgba(30, 45, 90, 0.4);
}
[data-theme="light"] .cursor-inner {
background: #1E2D5A;
box-shadow: 0 0 10px rgba(30, 45, 90, 0.4);
}
[data-theme="light"] .cursor-outer.cursor-hover {
border-color: rgba(61, 191, 169, 0.8);
background: rgba(61, 191, 169, 0.05);
}
[data-theme="light"] .cursor-inner.cursor-hover {
background: #3DBFA9;
box-shadow: 0 0 14px rgba(61, 191, 169, 0.8);
}
/* ═══════════════════════════════════════════════════════════
OUR SPECIALITY — open editorial layout (no boxy container)
═══════════════════════════════════════════════════════════ */
.osp {
position: relative;
background: var(--fc-bg);
padding: 120px 0;
overflow: hidden;
transition: background 0.4s ease;
}
/* Ambient background shapes (subtle, not a box) */
.osp-bg {
position: absolute;
border-radius: 50%;
filter: blur(110px);
pointer-events: none;
opacity: 0.35;
z-index: 0;
}
.osp-bg-a { top: -10%; left: -8%; width: 440px; height: 440px; background: radial-gradient(circle, rgba(61,191,169,0.38), transparent 70%); }
.osp-bg-b { bottom: -14%; right: -6%; width: 380px; height: 380px; background: radial-gradient(circle, rgba(155,108,247,0.28), transparent 70%); }
/* Ornamental mark floating behind */
.osp-mark {
position: absolute;
top: 44%; right: 4%;
width: 180px; height: 180px;
border-radius: 50%;
border: 1px dashed rgba(61,191,169,0.14);
pointer-events: none;
z-index: 0;
}
.osp-mark::after {
content: '';
position: absolute;
inset: 24px;
border-radius: 50%;
border: 1px solid rgba(61,191,169,0.10);
}
.osp .container { position: relative; z-index: 1; }
/* Two-column asymmetric grid */
.osp-grid {
display: grid;
grid-template-columns: 1.15fr 1fr;
gap: 80px;
align-items: center;
}
/* ── LEFT ── */
.osp-content { position: relative; }
.osp-eyebrow {
display: inline-flex;
align-items: center;
gap: 12px;
font-size: 12px;
font-weight: 800;
letter-spacing: 3px;
color: var(--fc-accent);
margin-bottom: 22px;
text-transform: uppercase;
}
.osp-eyebrow-dash {
width: 32px;
height: 1px;
background: linear-gradient(90deg, var(--fc-accent), transparent);
}
.osp-title {
font-family: "Plus Jakarta Sans", sans-serif;
font-size: 48px;
font-weight: 800;
color: var(--fc-heading);
line-height: 1.1;
letter-spacing: -1px;
margin: 0 0 22px;
max-width: 620px;
}
.osp-title em {
font-style: italic;
font-weight: 700;
background: linear-gradient(135deg, var(--fc-accent), var(--fc-accent-2));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
position: relative;
}
.osp-title em::after {
content: '';
position: absolute;
left: 0; right: 0;
bottom: -2px;
height: 2px;
background: linear-gradient(90deg, var(--fc-accent), var(--fc-accent-2));
opacity: 0.35;
border-radius: 2px;
}
.osp-text {
font-size: 16.5px;
line-height: 1.75;
color: var(--fc-text-muted);
margin: 0 0 32px;
max-width: 560px;
}
/* Pills — soft, slightly varied for hand-made feel */
.osp-pills {
display: flex;
flex-wrap: wrap;
gap: 10px 12px;
max-width: 560px;
}
.osp-pill {
display: inline-flex;
align-items: center;
padding: 9px 18px;
border-radius: 100px;
background: var(--fc-accent-glow);
border: 1px solid rgba(61,191,169,0.20);
color: var(--fc-accent);
font-size: 13.5px;
font-weight: 600;
letter-spacing: 0.1px;
transition: transform 0.35s ease, background 0.35s ease, border-color 0.35s ease, color 0.35s ease;
cursor: default;
}
.osp-pill:hover {
transform: translateY(-2px);
background: linear-gradient(135deg, var(--fc-accent), var(--fc-accent-2));
border-color: transparent;
color: #fff;
}
/* Slight staggered size rhythm */
.osp-pill:nth-child(2) { padding: 9px 16px; }
.osp-pill:nth-child(4) { padding: 9px 20px; }
/* ── RIGHT: Feature list (no boxes, hairline separation) ── */
.osp-features {
position: relative;
display: flex;
flex-direction: column;
}
.osp-feature {
position: relative;
display: grid;
grid-template-columns: auto 1fr auto;
align-items: flex-start;
gap: 20px;
padding: 26px 4px 26px 4px;
transition: transform 0.45s cubic-bezier(0.2,0.8,0.2,1);
}
.osp-feature + .osp-feature::before {
content: '';
position: absolute;
top: 0;
left: 4px;
right: 4px;
height: 1px;
background: linear-gradient(90deg, transparent, var(--fc-card-border) 18%, var(--fc-card-border) 82%, transparent);
opacity: 0.7;
}
.osp-feature:hover {
transform: translateX(6px);
}
.osp-feature-icon {
width: 48px;
height: 48px;
border-radius: 14px;
background: linear-gradient(135deg, rgba(var(--fc), 0.14), rgba(var(--fc), 0.06));
border: 1px solid rgba(var(--fc), 0.22);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: transform 0.45s cubic-bezier(0.2,0.8,0.2,1), background 0.4s ease, border-color 0.4s ease;
}
.osp-feature-icon i {
font-size: 20px;
color: rgb(var(--fc));
transition: color 0.3s ease;
}
.osp-feature:hover .osp-feature-icon {
background: linear-gradient(135deg, rgb(var(--fc)), rgba(var(--fc), 0.75));
border-color: transparent;
transform: rotate(-6deg) scale(1.06);
}
.osp-feature:hover .osp-feature-icon i { color: #fff; }
.osp-feature-body h4 {
font-family: "Plus Jakarta Sans", sans-serif;
font-size: 18px;
font-weight: 800;
color: var(--fc-heading);
letter-spacing: -0.2px;
margin: 2px 0 6px;
line-height: 1.3;
}
.osp-feature-body p {
font-size: 14.5px;
line-height: 1.65;
color: var(--fc-text-muted);
margin: 0;
}
.osp-feature-index {
font-family: "JetBrains Mono", "Consolas", monospace;
font-size: 12px;
font-weight: 700;
letter-spacing: 1.5px;
color: var(--fc-text-muted);
opacity: 0.5;
padding-top: 4px;
transition: color 0.3s ease, opacity 0.3s ease;
}
.osp-feature:hover .osp-feature-index {
color: rgb(var(--fc));
opacity: 1;
}
/* ── Light theme ── */
[data-theme="light"] .osp-bg-a { background: radial-gradient(circle, rgba(61,191,169,0.22), transparent 70%); }
[data-theme="light"] .osp-bg-b { background: radial-gradient(circle, rgba(155,108,247,0.18), transparent 70%); }
[data-theme="light"] .osp-mark { border-color: rgba(61,191,169,0.22); }
[data-theme="light"] .osp-mark::after { border-color: rgba(61,191,169,0.16); }
[data-theme="light"] .osp-pill {
background: rgba(61,191,169,0.08);
border-color: rgba(61,191,169,0.22);
color: #2a9d8f;
}
[data-theme="light"] .osp-feature + .osp-feature::before {
background: linear-gradient(90deg, transparent, rgba(30,45,90,0.10) 18%, rgba(30,45,90,0.10) 82%, transparent);
}
/* ── Responsive ── */
@media (max-width: 1024px) {
.osp-grid { grid-template-columns: 1fr; gap: 48px; }
.osp-mark { display: none; }
.osp-title { max-width: none; font-size: 40px; }
}
@media (max-width: 768px) {
.osp { padding: 80px 0; }
.osp-title { font-size: 32px; letter-spacing: -0.5px; }
.osp-text { font-size: 15.5px; }
.osp-feature { grid-template-columns: auto 1fr; gap: 16px; padding: 22px 2px; }
.osp-feature-index { display: none; }
.osp-feature-icon { width: 44px; height: 44px; }
.osp-feature-icon i { font-size: 18px; }
.osp-feature-body h4 { font-size: 16.5px; }
}
@media (max-width: 480px) {
.osp-title { font-size: 26px; }
.osp-pill { font-size: 12.5px; padding: 8px 14px !important; }
}
/* ── Scroll-triggered entrance (smooth, tight timing) ── */
.osp .osp-eyebrow,
.osp .osp-title,
.osp .osp-text,
.osp .osp-pill,
.osp .osp-feature { opacity: 0; }
/* Shared easing — natural spring without overshoot */
.osp .osp-eyebrow,
.osp .osp-title,
.osp .osp-text,
.osp .osp-pill,
.osp .osp-feature {
transition-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
transition-duration: 0.7s;
transition-property: opacity, transform;
}
.osp .osp-eyebrow { transform: translateY(-6px); }
.osp.is-visible .osp-eyebrow {
opacity: 1;
transform: translateY(0);
transition-delay: 0.05s;
}
.osp .osp-title { transform: translateY(14px); }
.osp.is-visible .osp-title {
opacity: 1;
transform: translateY(0);
transition-delay: 0.15s;
}
/* Underline under "new markets" — gentle draw */
.osp .osp-title em::after {
transform: scaleX(0);
transform-origin: left;
transition: transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.osp.is-visible .osp-title em::after {
transform: scaleX(1);
transition-delay: 0.7s;
}
.osp .osp-text { transform: translateY(12px); }
.osp.is-visible .osp-text {
opacity: 1;
transform: translateY(0);
transition-delay: 0.3s;
}
.osp .osp-pill {
transform: translateY(10px);
transition: opacity 0.5s cubic-bezier(0.22, 0.61, 0.36, 1),
transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1),
background 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}
.osp.is-visible .osp-pill {
opacity: 1;
transform: translateY(0);
}
.osp.is-visible .osp-pill:nth-child(1) { transition-delay: 0.45s, 0.45s, 0s, 0s, 0s; }
.osp.is-visible .osp-pill:nth-child(2) { transition-delay: 0.51s, 0.51s, 0s, 0s, 0s; }
.osp.is-visible .osp-pill:nth-child(3) { transition-delay: 0.57s, 0.57s, 0s, 0s, 0s; }
.osp.is-visible .osp-pill:nth-child(4) { transition-delay: 0.63s, 0.63s, 0s, 0s, 0s; }
.osp.is-visible .osp-pill:nth-child(5) { transition-delay: 0.69s, 0.69s, 0s, 0s, 0s; }
.osp.is-visible .osp-pill:hover {
transform: translateY(-2px);
transition-delay: 0s;
}
.osp .osp-feature { transform: translateY(18px); }
.osp.is-visible .osp-feature {
opacity: 1;
transform: translateY(0);
}
.osp.is-visible .osp-feature:nth-child(1) { transition-delay: 0.25s; }
.osp.is-visible .osp-feature:nth-child(2) { transition-delay: 0.37s; }
.osp.is-visible .osp-feature:nth-child(3) { transition-delay: 0.49s; }
.osp.is-visible .osp-feature:hover {
transform: translateX(6px);
transition-delay: 0s;
}
/* Feature icon — gentle scale-in, no rotation flicker */
.osp .osp-feature-icon {
transform: scale(0.92);
transition: transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1),
background 0.4s ease,
border-color 0.4s ease;
}
.osp.is-visible .osp-feature-icon { transform: scale(1); }
.osp.is-visible .osp-feature:nth-child(1) .osp-feature-icon { transition-delay: 0.40s; }
.osp.is-visible .osp-feature:nth-child(2) .osp-feature-icon { transition-delay: 0.52s; }
.osp.is-visible .osp-feature:nth-child(3) .osp-feature-icon { transition-delay: 0.64s; }
.osp.is-visible .osp-feature:hover .osp-feature-icon {
transform: rotate(-6deg) scale(1.06);
transition-delay: 0s;
}
/* ── Ambient motion (gentle, non-distracting) ── */
@keyframes ospBgDrift1 {
0%, 100% { transform: translate(0, 0); }
50% { transform: translate(14px, -10px); }
}
@keyframes ospBgDrift2 {
0%, 100% { transform: translate(0, 0); }
50% { transform: translate(-12px, 8px); }
}
.osp-bg-a { animation: ospBgDrift1 24s ease-in-out infinite; }
.osp-bg-b { animation: ospBgDrift2 28s ease-in-out infinite; }
@keyframes ospMarkSpin { to { transform: rotate(360deg); } }
.osp-mark { animation: ospMarkSpin 80s linear infinite; }
@media (prefers-reduced-motion: reduce) {
.osp-bg-a, .osp-bg-b, .osp-mark { animation: none !important; }
.osp .osp-eyebrow,
.osp .osp-title,
.osp .osp-text,
.osp .osp-pill,
.osp .osp-feature,
.osp .osp-feature-icon {
opacity: 1 !important;
transform: none !important;
transition: none !important;
}
.osp .osp-title em::after { transform: scaleX(1) !important; }
}
/* ═══════════════════════════════════════════════════════════
OUR SERVICES (svx) — Editorial services grid (no boxes)
Used on both home and about page.
═══════════════════════════════════════════════════════════ */
.svx {
position: relative;
background: var(--fc-bg);
padding: 120px 0;
overflow: hidden;
transition: background 0.4s ease;
}
/* Ambient glows */
.svx-bg {
position: absolute;
border-radius: 50%;
filter: blur(110px);
pointer-events: none;
opacity: 0.4;
z-index: 0;
}
.svx-bg-a { top: -10%; left: 6%; width: 440px; height: 440px; background: radial-gradient(circle, rgba(61,191,169,0.36), transparent 70%); animation: svxDriftA 26s ease-in-out infinite; }
.svx-bg-b { bottom: -12%; right: 4%; width: 400px; height: 400px; background: radial-gradient(circle, rgba(155,108,247,0.24), transparent 70%); animation: svxDriftB 30s ease-in-out infinite; }
@keyframes svxDriftA { 0%,100% { transform: translate(0,0); } 50% { transform: translate(16px,-12px); } }
@keyframes svxDriftB { 0%,100% { transform: translate(0,0); } 50% { transform: translate(-14px,10px); } }
/* Dashed orbit mark floating behind */
.svx-mark {
position: absolute;
top: 46%; right: 48%;
width: 200px; height: 200px;
border-radius: 50%;
border: 1px dashed rgba(61,191,169,0.12);
pointer-events: none;
z-index: 0;
animation: svxMarkSpin 80s linear infinite;
}
.svx-mark::after {
content: '';
position: absolute;
inset: 28px;
border-radius: 50%;
border: 1px solid rgba(61,191,169,0.08);
}
@keyframes svxMarkSpin { to { transform: rotate(360deg); } }
.svx .container { position: relative; z-index: 1; }
/* ── Asymmetric header: title left, lead + CTA right ── */
.svx-head {
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: 60px;
align-items: end;
margin-bottom: 56px;
padding-bottom: 40px;
border-bottom: 1px solid var(--fc-card-border);
}
.svx-eyebrow {
display: inline-flex;
align-items: center;
gap: 12px;
font-size: 11.5px;
font-weight: 800;
letter-spacing: 3px;
color: var(--fc-accent);
margin-bottom: 22px;
text-transform: uppercase;
}
.svx-eyebrow-line {
width: 32px;
height: 1px;
background: linear-gradient(90deg, var(--fc-accent), transparent);
}
.svx-title {
font-family: "Plus Jakarta Sans", sans-serif;
font-size: 46px;
font-weight: 800;
color: var(--fc-heading);
line-height: 1.12;
letter-spacing: -1px;
margin: 0;
max-width: 620px;
}
.svx-title em {
font-style: italic;
font-weight: 700;
background: linear-gradient(135deg, var(--fc-accent), var(--fc-accent-2));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
position: relative;
}
.svx-title em::after {
content: '';
position: absolute;
left: 0; right: 0;
bottom: -2px;
height: 3px;
background: linear-gradient(90deg, var(--fc-accent), var(--fc-accent-2));
border-radius: 3px;
opacity: 0.4;
}
.svx-head-right {
padding-bottom: 6px;
display: flex;
flex-direction: column;
gap: 20px;
align-items: flex-start;
}
.svx-lead {
font-size: 16px;
line-height: 1.72;
color: var(--fc-text-muted);
margin: 0;
max-width: 460px;
}
.svx-head-cta {
display: inline-flex;
align-items: center;
gap: 10px;
font-size: 14px;
font-weight: 700;
color: var(--fc-accent);
text-decoration: none;
padding-bottom: 4px;
border-bottom: 1px solid rgba(61,191,169,0.35);
transition: gap 0.35s ease, color 0.35s ease, border-color 0.35s ease;
}
.svx-head-cta:hover {
gap: 14px;
color: var(--fc-accent-2);
border-color: rgba(26,123,175,0.55);
}
.svx-head-cta i { font-size: 12px; }
/* ── Editorial 3×2 grid (no heavy boxes) ── */
.svx-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0;
position: relative;
}
.svx-item {
position: relative;
padding: 44px 36px 40px;
overflow: hidden;
transition: background 0.55s ease;
z-index: 1;
}
.svx-item:hover {
background: radial-gradient(ellipse at center top, rgba(var(--sc),0.10) 0%, transparent 70%);
}
/* Fading hairline dividers between cells */
.svx-item::before {
content: '';
position: absolute;
left: 24px; right: 24px;
bottom: 0;
height: 1px;
background: linear-gradient(90deg, transparent, var(--fc-card-border) 18%, var(--fc-card-border) 82%, transparent);
opacity: 0.8;
z-index: 0;
}
.svx-item::after {
content: '';
position: absolute;
top: 32px; bottom: 32px;
right: 0;
width: 1px;
background: linear-gradient(180deg, transparent, var(--fc-card-border) 18%, var(--fc-card-border) 82%, transparent);
opacity: 0.8;
z-index: 0;
}
.svx-grid > .svx-item:nth-child(3n)::after { display: none; }
.svx-grid > .svx-item:nth-last-child(-n+3)::before { display: none; }
/* Hover color wash bleed (soft color glow) */
.svx-item-glow {
position: absolute;
bottom: -80px;
right: -80px;
width: 240px;
height: 240px;
border-radius: 50%;
background: radial-gradient(circle, rgba(var(--sc),0.22), transparent 70%);
filter: blur(40px);
opacity: 0;
transition: opacity 0.55s ease;
pointer-events: none;
z-index: 0;
}
.svx-item:hover .svx-item-glow { opacity: 1; }
/* Icon chip — outline by default, gradient-filled on hover */
.svx-item-ic {
position: relative;
width: 48px;
height: 48px;
border-radius: 14px;
background: linear-gradient(135deg, rgba(var(--sc),0.16), rgba(var(--sc),0.05));
border: 1px solid rgba(var(--sc),0.24);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 22px;
transition: transform 0.5s cubic-bezier(0.2,0.8,0.2,1), background 0.4s ease, border-color 0.4s ease;
z-index: 1;
}
.svx-item-ic i {
font-size: 20px;
color: rgb(var(--sc));
transition: color 0.3s ease;
}
.svx-item:hover .svx-item-ic {
background: linear-gradient(135deg, rgb(var(--sc)), rgb(var(--sc2)));
border-color: transparent;
transform: rotate(-4deg) scale(1.06);
}
.svx-item:hover .svx-item-ic i { color: #ffffff; }
/* Small mono-style number tag */
.svx-item-num {
display: block;
font-family: "JetBrains Mono", "Consolas", monospace;
font-size: 11px;
font-weight: 700;
letter-spacing: 2px;
color: var(--fc-text-muted);
opacity: 0.55;
margin-bottom: 10px;
text-transform: uppercase;
transition: color 0.35s ease, opacity 0.35s ease;
position: relative;
z-index: 1;
}
.svx-item:hover .svx-item-num {
color: rgb(var(--sc));
opacity: 1;
}
/* Title with gradient accent that grows on hover */
.svx-item-title {
font-family: "Plus Jakarta Sans", sans-serif;
font-size: 19.5px;
font-weight: 800;
color: var(--fc-heading);
letter-spacing: -0.3px;
margin: 0 0 14px;
padding-bottom: 14px;
position: relative;
line-height: 1.3;
z-index: 1;
}
.svx-item-title::after {
content: '';
position: absolute;
left: 0; bottom: 0;
width: 24px;
height: 2px;
border-radius: 2px;
background: linear-gradient(90deg, rgb(var(--sc)), rgb(var(--sc2)));
transition: width 0.55s cubic-bezier(0.2,0.8,0.2,1);
}
.svx-item:hover .svx-item-title::after { width: 60px; }
.svx-item-text {
font-size: 14.5px;
line-height: 1.72;
color: var(--fc-text-muted);
margin: 0;
position: relative;
z-index: 1;
}
/* ── Scroll-triggered entrance ── */
.svx .svx-eyebrow,
.svx .svx-title,
.svx .svx-lead,
.svx .svx-head-cta,
.svx .svx-item { opacity: 0; }
.svx .svx-eyebrow,
.svx .svx-title,
.svx .svx-lead,
.svx .svx-head-cta,
.svx .svx-item {
transition-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
transition-duration: 0.7s;
transition-property: opacity, transform;
}
.svx .svx-eyebrow { transform: translateY(-6px); }
.svx.is-visible .svx-eyebrow { opacity: 1; transform: translateY(0); transition-delay: 0.05s; }
.svx .svx-title { transform: translateY(14px); }
.svx.is-visible .svx-title { opacity: 1; transform: translateY(0); transition-delay: 0.15s; }
.svx .svx-title em::after {
transform: scaleX(0);
transform-origin: left;
transition: transform 0.85s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.svx.is-visible .svx-title em::after { transform: scaleX(1); transition-delay: 0.75s; }
.svx .svx-lead,
.svx .svx-head-cta { transform: translateY(12px); }
.svx.is-visible .svx-lead { opacity: 1; transform: translateY(0); transition-delay: 0.3s; }
.svx.is-visible .svx-head-cta { opacity: 1; transform: translateY(0); transition-delay: 0.4s; }
.svx.is-visible .svx-head-cta:hover { transition-delay: 0s; }
.svx .svx-item { transform: translateY(20px); }
.svx.is-visible .svx-item:nth-child(1) { opacity: 1; transform: translateY(0); transition-delay: 0.45s; }
.svx.is-visible .svx-item:nth-child(2) { opacity: 1; transform: translateY(0); transition-delay: 0.52s; }
.svx.is-visible .svx-item:nth-child(3) { opacity: 1; transform: translateY(0); transition-delay: 0.59s; }
.svx.is-visible .svx-item:nth-child(4) { opacity: 1; transform: translateY(0); transition-delay: 0.66s; }
.svx.is-visible .svx-item:nth-child(5) { opacity: 1; transform: translateY(0); transition-delay: 0.73s; }
.svx.is-visible .svx-item:nth-child(6) { opacity: 1; transform: translateY(0); transition-delay: 0.80s; }
/* ── Light theme ── */
[data-theme="light"] .svx-bg-a { background: radial-gradient(circle, rgba(61,191,169,0.22), transparent 70%); }
[data-theme="light"] .svx-bg-b { background: radial-gradient(circle, rgba(155,108,247,0.14), transparent 70%); }
[data-theme="light"] .svx-mark { border-color: rgba(61,191,169,0.18); }
[data-theme="light"] .svx-mark::after { border-color: rgba(61,191,169,0.12); }
[data-theme="light"] .svx-item::before {
background: linear-gradient(90deg, transparent, rgba(30,45,90,0.10) 18%, rgba(30,45,90,0.10) 82%, transparent);
}
[data-theme="light"] .svx-item::after {
background: linear-gradient(180deg, transparent, rgba(30,45,90,0.10) 18%, rgba(30,45,90,0.10) 82%, transparent);
}
[data-theme="light"] .svx-head {
border-bottom-color: rgba(30,45,90,0.10);
}
/* ── Responsive ── */
@media (max-width: 1024px) {
.svx-head { grid-template-columns: 1fr; gap: 28px; align-items: start; }
.svx-title { font-size: 38px; }
.svx-grid { grid-template-columns: repeat(2, 1fr); }
.svx-grid > .svx-item::after { display: block; }
.svx-grid > .svx-item::before { display: block; }
.svx-grid > .svx-item:nth-child(2n)::after { display: none; }
.svx-grid > .svx-item:nth-last-child(-n+2)::before { display: none; }
.svx-mark { display: none; }
}
@media (max-width: 768px) {
.svx { padding: 80px 0; }
.svx-head { margin-bottom: 40px; padding-bottom: 30px; }
.svx-title { font-size: 30px; letter-spacing: -0.5px; }
.svx-lead { font-size: 15px; }
.svx-grid { grid-template-columns: 1fr; }
.svx-grid > .svx-item::after { display: none !important; }
.svx-grid > .svx-item::before { display: block !important; left: 24px; right: 24px; }
.svx-grid > .svx-item:last-child::before { display: none !important; }
.svx-item { padding: 32px 24px 28px; }
.svx-item-title { font-size: 17.5px; }
}
@media (max-width: 480px) {
.svx-title { font-size: 26px; }
}
@media (prefers-reduced-motion: reduce) {
.svx-bg-a, .svx-bg-b, .svx-mark { animation: none !important; }
.svx .svx-eyebrow, .svx .svx-title, .svx .svx-lead, .svx .svx-head-cta, .svx .svx-item {
opacity: 1 !important;
transform: none !important;
transition: none !important;
}
.svx .svx-title em::after { transform: scaleX(1) !important; }
}
/* ═══════════════════════════════════════════════════════════
TEAM CULTURE SECTION
═══════════════════════════════════════════════════════════ */
.tc {
position: relative;
overflow: hidden;
background: var(--fc-bg, #08080f);
}
.tc-glow {
position: absolute;
border-radius: 50%;
filter: blur(120px);
pointer-events: none;
z-index: 0;
}
.tc-glow-1 {
width: 500px; height: 500px;
background: rgba(61,191,169,0.10);
top: -10%; left: -8%;
animation: tcGlowDrift 18s ease-in-out infinite alternate;
}
.tc-glow-2 {
width: 420px; height: 420px;
background: rgba(26,123,175,0.09);
bottom: -10%; right: -5%;
animation: tcGlowDrift 22s ease-in-out infinite alternate-reverse;
}
@keyframes tcGlowDrift {
0% { transform: translate(0,0) scale(1); }
100% { transform: translate(30px,-20px) scale(1.08); }
}
.tc-grid-bg {
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(61,191,169,0.05) 1px, transparent 1px),
linear-gradient(90deg, rgba(61,191,169,0.05) 1px, transparent 1px);
background-size: 60px 60px;
mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 30%, transparent 80%);
-webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 30%, transparent 80%);
pointer-events: none;
z-index: 0;
}
/* ── Two-block Layout ── */
.tc-layout {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 70px;
align-items: center;
}
/* Will be flipped to visible by .is-revealed (set via IntersectionObserver) */
.tc .tc-text { opacity: 0; transform: translateY(20px); transition: opacity .8s ease, transform .8s ease; }
.tc.is-revealed .tc-text { opacity: 1; transform: none; }
.tc .tc-media { opacity: 0; transform: translateY(20px) scale(.97); transition: opacity .9s ease, transform .9s ease; transition-delay: .15s; }
.tc.is-revealed .tc-media { opacity: 1; transform: none; }
/* ── LEFT BLOCK : Text ── */
.tc-text { position: relative; z-index: 2; }
.tc-title {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 46px;
font-weight: 800;
line-height: 1.15;
color: var(--fc-heading, #fff);
letter-spacing: -1px;
margin-top: 22px;
margin-bottom: 20px;
}
.tc-title-hl {
background: linear-gradient(110deg,
var(--fc-accent, #3DBFA9) 0%,
var(--fc-accent-2, #1A7BAF) 35%,
#6FE6D2 55%,
var(--fc-accent, #3DBFA9) 75%,
var(--fc-accent-2, #1A7BAF) 100%);
background-size: 220% 100%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
animation: tcShimmer 5s linear infinite;
}
@keyframes tcShimmer {
0% { background-position: 220% 50%; }
100% { background-position: -20% 50%; }
}
.tc-desc {
font-size: 16.5px;
line-height: 1.75;
color: var(--fc-text-muted, rgba(255,255,255,0.55));
margin: 0 0 32px;
}
/* Bullet points list */
.tc-points {
list-style: none;
padding: 0;
margin: 0 0 36px;
}
.tc-points li {
display: flex;
align-items: flex-start;
gap: 16px;
padding: 14px 0;
border-bottom: 1px dashed rgba(255,255,255,0.06);
/* Stagger reveal */
opacity: 0;
transform: translateX(-22px);
transition: opacity .65s cubic-bezier(.2,.8,.2,1), transform .65s cubic-bezier(.2,.8,.2,1);
}
.tc-points li:last-child { border-bottom: none; }
.tc.is-revealed .tc-points li { opacity: 1; transform: none; }
.tc.is-revealed .tc-points li:nth-child(1) { transition-delay: .25s; }
.tc.is-revealed .tc-points li:nth-child(2) { transition-delay: .38s; }
.tc.is-revealed .tc-points li:nth-child(3) { transition-delay: .51s; }
.tc.is-revealed .tc-points li:nth-child(4) { transition-delay: .64s; }
/* Hover ripple on list items */
.tc-points li {
position: relative;
}
.tc-points li::before {
content: '';
position: absolute;
left: -12px; right: -12px; top: 4px; bottom: 4px;
border-radius: 12px;
background: linear-gradient(90deg, rgba(61,191,169,0.06), rgba(26,123,175,0.03), transparent);
opacity: 0;
transform: translateX(-8px);
transition: opacity .35s ease, transform .35s ease;
pointer-events: none;
z-index: -1;
}
.tc-points li:hover::before { opacity: 1; transform: none; }
.tc-point-ic {
flex-shrink: 0;
width: 44px; height: 44px;
border-radius: 12px;
display: flex; align-items: center; justify-content: center;
background: linear-gradient(135deg, rgba(61,191,169,0.14), rgba(26,123,175,0.10));
color: var(--fc-accent, #3DBFA9);
font-size: 17px;
border: 1px solid rgba(61,191,169,0.18);
transition: all 0.35s ease;
}
.tc-points li:hover .tc-point-ic {
transform: rotate(-6deg) scale(1.08);
background: linear-gradient(135deg, rgba(61,191,169,0.22), rgba(26,123,175,0.16));
}
.tc-points h5 {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 16px;
font-weight: 700;
color: var(--fc-heading, #fff);
margin: 2px 0 4px;
letter-spacing: -0.2px;
}
.tc-points p {
font-size: 13.5px;
line-height: 1.6;
color: var(--fc-text-muted, rgba(255,255,255,0.55));
margin: 0;
}
/* CTA */
.tc-cta {
display: inline-flex;
align-items: center;
gap: 14px;
padding: 8px 10px 8px 28px;
border-radius: 50px;
font-size: 14.5px;
font-weight: 600;
color: var(--fc-accent, #3DBFA9);
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.10);
text-decoration: none;
backdrop-filter: blur(8px);
transition: background .4s ease, border-color .4s ease, box-shadow .4s ease, color .4s ease, transform .25s cubic-bezier(.2,.8,.2,1);
will-change: transform;
position: relative;
overflow: hidden;
}
.tc-cta::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(120deg, transparent 30%, rgba(61,191,169,0.20) 50%, transparent 70%);
transform: translateX(-100%);
transition: transform .8s ease;
pointer-events: none;
}
.tc-cta:hover {
border-color: rgba(61,191,169,0.30);
background: rgba(61,191,169,0.08);
box-shadow: 0 12px 32px rgba(61,191,169,0.20);
color: var(--fc-accent, #3DBFA9);
}
.tc-cta:hover::before { transform: translateX(100%); }
.tc-cta-arrow {
width: 36px; height: 36px;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
background: linear-gradient(135deg, var(--fc-accent, #3DBFA9), var(--fc-accent-2, #1A7BAF));
color: #fff;
font-size: 13px;
transition: transform 0.35s ease;
}
.tc-cta:hover .tc-cta-arrow { transform: rotate(45deg); }
/* ── RIGHT BLOCK : Image Carousel ── */
.tc-media {
position: relative;
}
/* Behind-the-image animated aura */
.tc-aura {
position: absolute;
inset: -40px;
background:
radial-gradient(60% 50% at 30% 35%, rgba(61,191,169,0.32), transparent 70%),
radial-gradient(55% 45% at 70% 65%, rgba(26,123,175,0.28), transparent 70%);
filter: blur(60px);
opacity: 0.85;
z-index: 0;
pointer-events: none;
animation: tcAuraSwirl 12s ease-in-out infinite alternate;
border-radius: 40px;
}
@keyframes tcAuraSwirl {
0% { transform: scale(1) rotate(0deg); opacity: 0.8; }
50% { transform: scale(1.06) rotate(8deg); opacity: 1; }
100% { transform: scale(1.02) rotate(-6deg); opacity: 0.85;}
}
.tc-slider {
position: relative;
width: 100%;
aspect-ratio: 4 / 5;
max-height: 600px;
border-radius: 28px;
overflow: hidden;
background: #0c1424;
box-shadow:
0 30px 80px rgba(0,0,0,0.45),
0 0 0 1px rgba(255,255,255,0.06);
z-index: 2;
transition: box-shadow .4s ease;
}
.tc-slider:hover {
box-shadow:
0 40px 100px rgba(0,0,0,0.55),
0 0 0 1px rgba(61,191,169,0.18),
0 0 60px rgba(61,191,169,0.10);
}
/* Slides — clip-path diagonal reveal */
.tc-slide {
position: absolute;
inset: 0;
opacity: 1;
z-index: 1;
clip-path: inset(0 100% 0 0 round 0px);
transform: scale(1.06);
transition: clip-path 1.1s cubic-bezier(.7,.0,.2,1), transform 8s ease;
will-change: clip-path, transform;
}
.tc-slide.is-active {
z-index: 3;
clip-path: inset(0 0 0 0 round 0px);
transform: scale(1);
}
.tc-slide img {
width: 100%; height: 100%;
object-fit: cover;
display: block;
transform: scale(1.08);
transition: transform 8s ease;
}
.tc-slide.is-active img {
transform: scale(1.0);
transition: transform 8s ease;
}
/* Subtle vignette + colour wash over images */
.tc-slider::after {
content: '';
position: absolute;
inset: 0;
background:
linear-gradient(180deg, rgba(8,8,15,0.0) 0%, rgba(8,8,15,0.55) 100%),
linear-gradient(135deg, rgba(61,191,169,0.10), transparent 50%);
pointer-events: none;
z-index: 4;
mix-blend-mode: normal;
}
/* Cursor-following glow inside slider */
.tc-cursor-glow {
position: absolute;
width: 280px; height: 280px;
border-radius: 50%;
background: radial-gradient(circle, rgba(61,191,169,0.30) 0%, rgba(26,123,175,0.10) 40%, transparent 70%);
transform: translate(-50%, -50%);
pointer-events: none;
opacity: 0;
transition: opacity .35s ease;
z-index: 5;
mix-blend-mode: screen;
}
/* Top progress bar — synced with autoplay */
.tc-progress {
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
background: rgba(255,255,255,0.07);
z-index: 6;
overflow: hidden;
}
.tc-progress-bar {
display: block;
width: 0%;
height: 100%;
background: linear-gradient(90deg,
var(--fc-accent, #3DBFA9),
#6FE6D2,
var(--fc-accent-2, #1A7BAF));
background-size: 200% 100%;
box-shadow: 0 0 14px rgba(61,191,169,0.65);
animation: tcProgressShimmer 2s linear infinite;
}
@keyframes tcProgressShimmer {
0% { background-position: 200% 50%; }
100% { background-position: -50% 50%; }
}
/* Slide dots */
.tc-dots {
position: absolute;
bottom: 22px; left: 50%;
transform: translateX(-50%);
display: flex;
gap: 8px;
z-index: 7;
}
.tc-dot {
position: relative;
width: 26px; height: 4px;
border-radius: 2px;
border: none;
background: rgba(255,255,255,0.30);
cursor: pointer;
padding: 0;
transition: all 0.4s cubic-bezier(.2,.8,.2,1);
}
.tc-dot.is-active {
width: 44px;
background: linear-gradient(90deg, var(--fc-accent, #3DBFA9), var(--fc-accent-2, #1A7BAF));
box-shadow: 0 0 14px rgba(61,191,169,0.55);
}
.tc-dot.is-active::after {
content: '';
position: absolute;
inset: -3px -6px;
border-radius: 6px;
border: 1px solid rgba(61,191,169,0.45);
opacity: 0;
animation: tcDotPulse 1.6s ease-out infinite;
}
@keyframes tcDotPulse {
0% { transform: scale(.8); opacity: .9; }
100% { transform: scale(1.5); opacity: 0; }
}
.tc-dot:hover { background: rgba(255,255,255,0.55); }
/* ── Prev / Next navigation arrows ── */
.tc-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 44px; height: 44px;
border-radius: 50%;
border: 1px solid rgba(255,255,255,0.18);
background: rgba(11,17,32,0.72);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
color: #fff;
font-size: 14px;
display: flex; align-items: center; justify-content: center;
cursor: pointer;
padding: 0;
z-index: 7;
opacity: 0;
transition: opacity .3s ease, background .3s ease, border-color .3s ease, transform .3s ease;
}
.tc-slider:hover .tc-nav,
.tc-nav:focus-visible {
opacity: 1;
}
.tc-nav-prev { left: 14px; }
.tc-nav-next { right: 14px; }
.tc-nav:hover {
background: linear-gradient(135deg, rgba(61,191,169,0.95), rgba(26,123,175,0.95));
border-color: rgba(61,191,169,0.6);
transform: translateY(-50%) scale(1.08);
box-shadow: 0 8px 24px rgba(61,191,169,0.35);
}
.tc-nav:active {
transform: translateY(-50%) scale(0.96);
}
@media (max-width: 767px) {
.tc-nav { opacity: 1; width: 38px; height: 38px; font-size: 13px; }
.tc-nav-prev { left: 10px; }
.tc-nav-next { right: 10px; }
}
[data-theme="light"] .tc-nav {
background: rgba(255,255,255,0.85);
border-color: rgba(30,45,90,0.12);
color: #0E2A33;
}
[data-theme="light"] .tc-nav:hover {
background: linear-gradient(135deg, #3DBFA9, #1A7BAF);
color: #fff;
}
/* ── Orbiting particles around the slider ── */
.tc-orbits {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 1;
}
.tc-orbit {
position: absolute;
border-radius: 50%;
top: 50%; left: 50%;
transform-origin: center;
}
.tc-orbit-1 {
width: 12px; height: 12px;
background: var(--fc-accent, #3DBFA9);
box-shadow: 0 0 18px rgba(61,191,169,0.9), 0 0 32px rgba(61,191,169,0.5);
animation: tcOrbit1 9s linear infinite;
}
.tc-orbit-2 {
width: 8px; height: 8px;
background: var(--fc-accent-2, #1A7BAF);
box-shadow: 0 0 14px rgba(26,123,175,0.9), 0 0 26px rgba(26,123,175,0.5);
animation: tcOrbit2 13s linear infinite;
}
.tc-orbit-3 {
width: 6px; height: 6px;
background: #6FE6D2;
box-shadow: 0 0 12px rgba(111,230,210,0.9);
animation: tcOrbit3 17s linear infinite;
}
@keyframes tcOrbit1 {
from { transform: rotate(0deg) translateX(280px) rotate(0deg); }
to { transform: rotate(360deg) translateX(280px) rotate(-360deg); }
}
@keyframes tcOrbit2 {
from { transform: rotate(120deg) translateX(310px) rotate(-120deg); }
to { transform: rotate(480deg) translateX(310px) rotate(-480deg); }
}
@keyframes tcOrbit3 {
from { transform: rotate(240deg) translateX(260px) rotate(-240deg); }
to { transform: rotate(-120deg) translateX(260px) rotate(120deg); }
}
/* Floating top-left badge */
.tc-badge {
position: absolute;
top: -20px; left: -20px;
padding: 16px 22px;
border-radius: 18px;
background: rgba(11,17,32,0.85);
border: 1px solid rgba(61,191,169,0.30);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
display: flex;
flex-direction: column;
text-align: center;
box-shadow: 0 14px 40px rgba(0,0,0,0.45);
z-index: 6;
animation: tcFloatA 5s ease-in-out infinite;
}
.tc-badge-num {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 26px;
font-weight: 800;
background: linear-gradient(135deg, var(--fc-accent, #3DBFA9), var(--fc-accent-2, #1A7BAF));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
line-height: 1;
}
.tc-badge-label {
font-size: 11px;
font-weight: 600;
letter-spacing: 1px;
text-transform: uppercase;
color: var(--fc-text-muted, rgba(255,255,255,0.65));
margin-top: 4px;
}
/* Floating bottom-right mini-card */
.tc-mini-card {
position: absolute;
bottom: 60px; right: -24px;
padding: 14px 18px;
border-radius: 14px;
background: rgba(11,17,32,0.85);
border: 1px solid rgba(255,255,255,0.10);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
display: flex;
align-items: center;
gap: 12px;
box-shadow: 0 14px 40px rgba(0,0,0,0.45);
z-index: 6;
animation: tcFloatB 6s ease-in-out infinite;
}
.tc-mini-ic {
width: 38px; height: 38px;
border-radius: 10px;
display: flex; align-items: center; justify-content: center;
background: rgba(255,200,40,0.14);
color: #FFC828;
font-size: 15px;
}
.tc-mini-card strong {
display: block;
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 16px;
font-weight: 800;
color: #fff;
line-height: 1;
}
.tc-mini-card small {
display: block;
font-size: 11px;
color: var(--fc-text-muted, rgba(255,255,255,0.6));
margin-top: 4px;
letter-spacing: 0.3px;
}
/* Decorative spinning ring */
.tc-ring {
position: absolute;
width: 180px; height: 180px;
border-radius: 50%;
border: 1.5px dashed rgba(61,191,169,0.30);
top: -40px; right: -40px;
z-index: 1;
animation: tcRingSpin 22s linear infinite;
}
.tc-ring::before {
content: '';
position: absolute;
width: 14px; height: 14px;
border-radius: 50%;
background: var(--fc-accent, #3DBFA9);
top: -7px; left: 50%;
transform: translateX(-50%);
box-shadow: 0 0 16px rgba(61,191,169,0.60);
}
/* Float animations */
@keyframes tcFloatA {
0%,100% { transform: translateY(0); }
50% { transform: translateY(-8px); }
}
@keyframes tcFloatB {
0%,100% { transform: translateY(0); }
50% { transform: translateY(10px); }
}
@keyframes tcRingSpin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
/* ── Light Theme - Team Culture ── */
[data-theme="light"] .tc-glow-1 { background: rgba(61,191,169,0.07); }
[data-theme="light"] .tc-glow-2 { background: rgba(26,123,175,0.06); }
[data-theme="light"] .tc-grid-bg {
background-image:
linear-gradient(rgba(26,123,175,0.06) 1px, transparent 1px),
linear-gradient(90deg, rgba(26,123,175,0.06) 1px, transparent 1px);
}
[data-theme="light"] .tc-points li { border-bottom-color: rgba(30,45,90,0.07); }
[data-theme="light"] .tc-points p { color: var(--fc-text-muted, #5F7082); }
[data-theme="light"] .tc-cta {
background: #ffffff;
border-color: rgba(30,45,90,0.10);
box-shadow: 0 4px 14px rgba(30,45,90,0.05);
}
[data-theme="light"] .tc-slider {
background: #EDF4FA;
box-shadow:
0 30px 80px rgba(30,45,90,0.18),
0 0 0 1px rgba(30,45,90,0.06);
}
[data-theme="light"] .tc-slider::after {
background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(20,36,63,0.30) 100%);
}
[data-theme="light"] .tc-badge,
[data-theme="light"] .tc-mini-card {
background: rgba(255,255,255,0.95);
border-color: rgba(30,45,90,0.10);
box-shadow: 0 14px 40px rgba(30,45,90,0.12);
}
[data-theme="light"] .tc-badge-label,
[data-theme="light"] .tc-mini-card small { color: #5F7082; }
[data-theme="light"] .tc-mini-card strong { color: #14243F; }
/* ── Light theme additions for new elements ── */
[data-theme="light"] .tc-aura {
background:
radial-gradient(60% 50% at 30% 35%, rgba(61,191,169,0.22), transparent 70%),
radial-gradient(55% 45% at 70% 65%, rgba(26,123,175,0.18), transparent 70%);
opacity: 0.7;
}
[data-theme="light"] .tc-cursor-glow {
background: radial-gradient(circle, rgba(61,191,169,0.22) 0%, rgba(26,123,175,0.10) 40%, transparent 70%);
mix-blend-mode: multiply;
}
[data-theme="light"] .tc-progress { background: rgba(30,45,90,0.08); }
[data-theme="light"] .tc-slider::after {
background:
linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(20,36,63,0.30) 100%),
linear-gradient(135deg, rgba(61,191,169,0.06), transparent 50%);
}
[data-theme="light"] .tc-points li { border-bottom-color: rgba(30,45,90,0.07); }
[data-theme="light"] .tc-points li::before {
background: linear-gradient(90deg, rgba(61,191,169,0.10), rgba(26,123,175,0.05), transparent);
}
[data-theme="light"] .tc-orbit-1 { box-shadow: 0 0 18px rgba(61,191,169,0.6), 0 0 32px rgba(61,191,169,0.3); }
[data-theme="light"] .tc-orbit-2 { box-shadow: 0 0 14px rgba(26,123,175,0.6), 0 0 26px rgba(26,123,175,0.3); }
[data-theme="light"] .tc-orbit-3 { background: var(--fc-accent, #3DBFA9); box-shadow: 0 0 12px rgba(61,191,169,0.5); }
/* ── Responsive ── */
@media (max-width: 1199px) {
.tc-layout { gap: 50px; }
.tc-title { font-size: 40px; }
/* Tighter orbit radius */
@keyframes tcOrbit1 { from { transform: rotate(0deg) translateX(240px) rotate(0deg); } to { transform: rotate(360deg) translateX(240px) rotate(-360deg); } }
@keyframes tcOrbit2 { from { transform: rotate(120deg) translateX(265px) rotate(-120deg); } to { transform: rotate(480deg) translateX(265px) rotate(-480deg); } }
@keyframes tcOrbit3 { from { transform: rotate(240deg) translateX(220px) rotate(-240deg); } to { transform: rotate(-120deg) translateX(220px) rotate(120deg); } }
}
@media (max-width: 991px) {
.tc-layout { grid-template-columns: 1fr; gap: 60px; }
.tc-media { max-width: 520px; margin: 0 auto; }
.tc-title { font-size: 38px; }
.tc-mini-card { right: -10px; }
.tc-badge { left: -10px; }
}
@media (max-width: 767px) {
/* Hide orbits + aura on small screens for performance */
.tc-orbits, .tc-aura { display: none; }
/* Disable 3D tilt + perspective on touch — prevents hidden layers */
.tc-media { perspective: none; transform-style: flat; width: 100%; max-width: 100%; }
.tc-slider { transform: none !important; transform-style: flat; }
/* On mobile the stacked section is taller than the viewport so the
IntersectionObserver never hits its 25% threshold and the fade-in
never fires — force media + text visible regardless of state. */
.tc .tc-media,
.tc .tc-text {
opacity: 1 !important;
transform: none !important;
}
/* Slider — medium size, simple opacity fade instead of clip-path */
.tc-slider {
aspect-ratio: 4 / 3.4;
width: 100%;
max-width: 100%;
max-height: none;
margin: 0 auto;
border-radius: 18px;
}
.tc-slide {
clip-path: none !important;
transform: none !important;
opacity: 0 !important;
transition: opacity 0.55s ease !important;
}
.tc-slide.is-active {
opacity: 1 !important;
}
.tc-slide img {
transform: none !important;
transition: none !important;
}
/* Pull badges inside the slider bounds so they don't float off the
edges or overlap the CTA above. Also stop the float animation on
mobile — it stacks with clip-path transitions and looks glitchy. */
.tc-badge {
top: 12px;
left: 12px;
padding: 10px 14px;
animation: none;
}
.tc-mini-card {
top: auto;
bottom: 12px;
right: 12px;
left: auto;
padding: 10px 14px;
animation: none;
}
.tc-badge-num { font-size: 20px; }
.tc-badge-label { font-size: 10px; }
.tc-ring { display: none; }
.tc-layout { gap: 40px; }
.tc-points li { padding: 14px 0; gap: 14px; }
.tc-points h5 { font-size: 16px; }
.tc-points p { font-size: 13px; }
.tc-cursor-glow { display: none; }
}
@media (max-width: 575px) {
.tc-title { font-size: 28px; line-height: 1.2; }
.tc-desc { font-size: 14px; }
.tc-slider { aspect-ratio: 4 / 3.6; border-radius: 14px; }
.tc-badge { top: 10px; left: 10px; padding: 8px 10px; }
.tc-badge-num { font-size: 16px; }
.tc-badge-label { font-size: 9px; letter-spacing: 0.6px; }
.tc-mini-card { bottom: 10px; right: 10px; padding: 8px 10px; gap: 8px; }
.tc-mini-card strong { font-size: 12px; }
.tc-mini-card small { font-size: 9px; }
.tc-mini-ic { width: 30px; height: 30px; font-size: 12px; }
.tc-dots { bottom: 52px; right: 10px; }
.tc-cta { padding: 12px 20px; font-size: 14px; }
.tc-point-ic { width: 38px; height: 38px; font-size: 14px; }
}
/* ── Accessibility: reduce motion ── */
@media (prefers-reduced-motion: reduce) {
.tc-title-hl,
.tc-progress-bar,
.tc-aura,
.tc-orbit-1, .tc-orbit-2, .tc-orbit-3,
.tc-ring,
.tc-badge, .tc-mini-card,
.tc-dot.is-active::after {
animation: none !important;
}
.tc-slider { transform: none !important; }
.tc-slide { transition: opacity .3s ease !important; clip-path: none !important; }
}
/* ============================================================
TRUST / Trusted by Industry Leaders
============================================================ */
.trust {
position: relative;
padding: 90px 0 80px;
overflow: hidden;
background: transparent;
isolation: isolate;
}
.trust-aurora {
position: absolute;
border-radius: 50%;
filter: blur(90px);
opacity: .55;
pointer-events: none;
z-index: 0;
animation: trustAuroraFloat 14s ease-in-out infinite alternate;
}
.trust-aurora-1 {
top: -120px;
left: -100px;
width: 460px;
height: 460px;
background: radial-gradient(circle, rgba(61,191,169,0.35) 0%, rgba(61,191,169,0) 70%);
}
.trust-aurora-2 {
bottom: -140px;
right: -100px;
width: 520px;
height: 520px;
background: radial-gradient(circle, rgba(26,123,175,0.32) 0%, rgba(26,123,175,0) 70%);
animation-delay: -6s;
}
@keyframes trustAuroraFloat {
0% { transform: translate3d(0,0,0) scale(1); }
50% { transform: translate3d(20px,-15px,0) scale(1.06); }
100% { transform: translate3d(-15px,20px,0) scale(.98); }
}
.trust-grid-bg {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
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: 56px 56px;
mask-image: radial-gradient(ellipse at center, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0) 75%);
-webkit-mask-image: radial-gradient(ellipse at center, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0) 75%);
}
.trust-wrap {
position: relative;
z-index: 2;
}
/* Header pill */
.trust-header {
text-align: center;
margin-bottom: 50px;
opacity: 0;
transform: translateY(18px);
transition: opacity .8s ease, transform .8s ease;
}
.trust.is-revealed .trust-header { opacity: 1; transform: translateY(0); }
.trust-tag {
display: inline-flex;
align-items: center;
gap: 14px;
padding: 12px 24px;
border-radius: 999px;
background: linear-gradient(135deg, rgba(61,191,169,0.10), rgba(26,123,175,0.10));
border: 1px solid rgba(61,191,169,0.28);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
position: relative;
overflow: hidden;
}
.trust-tag::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.18) 50%, transparent 70%);
transform: translateX(-100%);
animation: trustShimmer 4.2s ease-in-out infinite;
}
@keyframes trustShimmer {
0% { transform: translateX(-100%); }
60% { transform: translateX(100%); }
100% { transform: translateX(100%); }
}
.trust-tag i {
color: var(--fc-accent, #3DBFA9);
font-size: 14px;
filter: drop-shadow(0 0 8px rgba(61,191,169,0.6));
}
.trust-tag-text {
font-size: 12px;
font-weight: 700;
letter-spacing: .25em;
color: #ffffff;
text-transform: uppercase;
position: relative;
z-index: 1;
}
.trust-tag-line {
width: 28px;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(61,191,169,0.7), transparent);
}
.trust-tag-line-l { background: linear-gradient(90deg, transparent, rgba(61,191,169,0.7)); }
.trust-tag-line-r { background: linear-gradient(90deg, rgba(26,123,175,0.7), transparent); }
/* Logo constellation */
.trust-logos {
position: relative;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 28px;
align-items: center;
padding: 30px 10px 50px;
}
.trust-line {
position: absolute;
top: 50%;
left: 0;
width: 100%;
height: 80px;
transform: translateY(-50%);
pointer-events: none;
z-index: 0;
}
.trust-line-stroke {
stroke-dashoffset: 0;
animation: trustLineFlow 16s linear infinite;
}
@keyframes trustLineFlow {
from { stroke-dashoffset: 0; }
to { stroke-dashoffset: -200; }
}
.trust-pulse {
position: absolute;
top: 50%;
left: 4%;
width: 10px;
height: 10px;
border-radius: 50%;
background: var(--fc-accent, #3DBFA9);
box-shadow:
0 0 0 4px rgba(61,191,169,0.18),
0 0 18px rgba(61,191,169,0.85);
transform: translateY(-50%);
animation: trustPulseRun 7s ease-in-out infinite;
z-index: 1;
}
@keyframes trustPulseRun {
0% { left: 4%; opacity: 0; transform: translateY(-50%) scale(.4); }
10% { opacity: 1; transform: translateY(-50%) scale(1); }
50% { left: 50%; opacity: 1; }
90% { opacity: 1; transform: translateY(-50%) scale(1); }
100% { left: 96%; opacity: 0; transform: translateY(-50%) scale(.4); }
}
/* Logo card */
.trust-card {
position: relative;
z-index: 2;
border-radius: 22px;
transform-style: preserve-3d;
perspective: 900px;
opacity: 0;
transform: translateY(28px);
transition: opacity .9s ease, transform .9s ease;
}
.trust.is-revealed .trust-card { opacity: 1; transform: translateY(0); }
.trust.is-revealed .trust-card:nth-child(4) { transition-delay: .15s; }
.trust.is-revealed .trust-card:nth-child(5) { transition-delay: .30s; }
.trust.is-revealed .trust-card:nth-child(6) { transition-delay: .45s; }
.trust-card-inner {
position: relative;
display: flex;
align-items: center;
justify-content: center;
min-height: 150px;
padding: 32px 28px;
border-radius: 22px;
background: linear-gradient(140deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.02) 100%);
border: 1px solid rgba(255,255,255,0.08);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
overflow: hidden;
transition: border-color .35s ease, background .35s ease, transform .25s ease;
transform-style: preserve-3d;
}
.trust-card-inner img {
max-width: 70%;
max-height: 70px;
object-fit: contain;
filter: brightness(0) invert(1) opacity(.55);
transition: filter .4s ease, transform .5s ease;
will-change: transform;
}
.trust-card:hover .trust-card-inner {
border-color: rgba(61,191,169,0.45);
background: linear-gradient(140deg, rgba(61,191,169,0.08) 0%, rgba(26,123,175,0.06) 100%);
}
.trust-card:hover .trust-card-inner img {
filter: brightness(0) invert(1) opacity(1);
transform: scale(1.06);
}
/* Corner brackets */
.trust-card-corner {
position: absolute;
width: 18px;
height: 18px;
border: 1.5px solid var(--fc-accent, #3DBFA9);
opacity: 0;
transform: scale(.6);
transition: opacity .4s ease, transform .4s ease;
pointer-events: none;
}
.trust-corner-tl { top: 10px; left: 10px; border-right: none; border-bottom: none; border-top-left-radius: 6px; }
.trust-corner-tr { top: 10px; right: 10px; border-left: none; border-bottom: none; border-top-right-radius: 6px; }
.trust-corner-bl { bottom: 10px; left: 10px; border-right: none; border-top: none; border-bottom-left-radius: 6px; }
.trust-corner-br { bottom: 10px; right: 10px; border-left: none; border-top: none; border-bottom-right-radius: 6px; }
.trust-card:hover .trust-card-corner {
opacity: 1;
transform: scale(1);
}
/* Scan line sweep */
.trust-card-scan {
position: absolute;
top: 0;
left: -120%;
width: 60%;
height: 100%;
background: linear-gradient(120deg, transparent 0%, rgba(61,191,169,0.25) 50%, transparent 100%);
transform: skewX(-18deg);
pointer-events: none;
transition: left .9s ease;
}
.trust-card:hover .trust-card-scan {
left: 130%;
}
/* Cursor-follow glow (set via JS --tx/--ty) */
.trust-card-glow {
position: absolute;
inset: 0;
border-radius: 22px;
pointer-events: none;
opacity: 0;
transition: opacity .35s ease;
background: radial-gradient(220px circle at var(--tx, 50%) var(--ty, 50%),
rgba(61,191,169,0.22), transparent 60%);
z-index: 0;
}
.trust-card:hover .trust-card-glow { opacity: 1; }
/* Trust meta strip */
.trust-meta {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 22px;
margin-top: 30px;
padding: 20px 28px;
border-radius: 16px;
background: linear-gradient(140deg, rgba(255,255,255,0.03), rgba(255,255,255,0.015));
border: 1px solid rgba(255,255,255,0.06);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
opacity: 0;
transform: translateY(20px);
transition: opacity .9s ease .4s, transform .9s ease .4s;
}
.trust.is-revealed .trust-meta { opacity: 1; transform: translateY(0); }
.trust-meta-item {
display: inline-flex;
align-items: center;
gap: 10px;
}
.trust-meta-ic {
width: 32px;
height: 32px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, rgba(61,191,169,0.18), rgba(26,123,175,0.18));
border: 1px solid rgba(61,191,169,0.35);
color: var(--fc-accent, #3DBFA9);
font-size: 13px;
}
.trust-meta-txt {
font-size: 13px;
color: rgba(255,255,255,0.72);
letter-spacing: .02em;
}
.trust-meta-txt strong {
color: #ffffff;
font-weight: 700;
margin-right: 4px;
}
.trust-divider {
width: 1px;
height: 22px;
background: linear-gradient(180deg, transparent, rgba(255,255,255,0.18), transparent);
}
/* ---------- Light theme overrides ---------- */
[data-theme="light"] .trust {
background: linear-gradient(180deg, #ffffff 0%, #F2F8FC 100%);
}
[data-theme="light"] .trust-aurora-1 {
background: radial-gradient(circle, rgba(61,191,169,0.28) 0%, rgba(61,191,169,0) 70%);
opacity: .85;
filter: blur(80px);
}
[data-theme="light"] .trust-aurora-2 {
background: radial-gradient(circle, rgba(26,123,175,0.26) 0%, rgba(26,123,175,0) 70%);
opacity: .85;
filter: blur(80px);
}
[data-theme="light"] .trust-grid-bg {
background-image:
linear-gradient(rgba(14,42,51,0.07) 1px, transparent 1px),
linear-gradient(90deg, rgba(14,42,51,0.07) 1px, transparent 1px);
mask-image: radial-gradient(ellipse at center, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 75%);
-webkit-mask-image: radial-gradient(ellipse at center, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 75%);
}
[data-theme="light"] .trust-tag {
background: linear-gradient(135deg, rgba(61,191,169,0.12), rgba(26,123,175,0.12));
border-color: rgba(61,191,169,0.4);
box-shadow: 0 6px 18px rgba(26,123,175,0.08);
}
[data-theme="light"] .trust-tag-text { color: #0E2A33; }
[data-theme="light"] .trust-tag i {
color: #1A7BAF;
filter: drop-shadow(0 0 6px rgba(61,191,169,0.45));
}
[data-theme="light"] .trust-tag::before {
background: linear-gradient(120deg, transparent 30%, rgba(61,191,169,0.22) 50%, transparent 70%);
}
[data-theme="light"] .trust-tag-line-l { background: linear-gradient(90deg, transparent, rgba(26,123,175,0.55)); }
[data-theme="light"] .trust-tag-line-r { background: linear-gradient(90deg, rgba(26,123,175,0.55), transparent); }
[data-theme="light"] .trust-pulse {
background: #1A7BAF;
box-shadow:
0 0 0 4px rgba(26,123,175,0.18),
0 0 18px rgba(26,123,175,0.55);
}
[data-theme="light"] .trust-card-inner {
background: linear-gradient(140deg, #ffffff 0%, rgba(242,248,252,0.85) 100%);
border-color: rgba(14,42,51,0.10);
box-shadow: 0 10px 28px rgba(14,42,51,0.06);
}
/* Force-dark logo silhouette so any source PNG (white-on-dark or color) stays visible */
[data-theme="light"] .trust-card-inner img {
filter: brightness(0) opacity(.55);
}
[data-theme="light"] .trust-card:hover .trust-card-inner {
background: linear-gradient(140deg, #ffffff 0%, #F2F8FC 100%);
border-color: rgba(61,191,169,0.55);
box-shadow: 0 18px 40px rgba(26,123,175,0.14);
}
[data-theme="light"] .trust-card:hover .trust-card-inner img {
filter: brightness(0) opacity(1);
}
[data-theme="light"] .trust-card-corner {
border-color: #1A7BAF;
}
[data-theme="light"] .trust-card-scan {
background: linear-gradient(120deg, transparent 0%, rgba(26,123,175,0.20) 50%, transparent 100%);
}
[data-theme="light"] .trust-card-glow {
background: radial-gradient(220px circle at var(--tx, 50%) var(--ty, 50%),
rgba(26,123,175,0.18), transparent 60%);
}
[data-theme="light"] .trust-meta {
background: linear-gradient(140deg, #ffffff, #F2F8FC);
border-color: rgba(14,42,51,0.08);
box-shadow: 0 8px 22px rgba(14,42,51,0.05);
}
[data-theme="light"] .trust-meta-ic {
background: linear-gradient(135deg, rgba(61,191,169,0.15), rgba(26,123,175,0.15));
border-color: rgba(26,123,175,0.35);
color: #1A7BAF;
}
[data-theme="light"] .trust-meta-txt { color: rgba(14,42,51,0.72); }
[data-theme="light"] .trust-meta-txt strong { color: #0E2A33; }
[data-theme="light"] .trust-divider {
background: linear-gradient(180deg, transparent, rgba(14,42,51,0.22), transparent);
}
/* Desktop: track is layout-transparent so cards remain grid items.
Mobile clones are hidden. */
.trust-track { display: contents; }
.trust-card-clone { display: none; }
/* ---------- Responsive ---------- */
@media (max-width: 991px) {
.trust { padding: 70px 0 60px; }
.trust-logos {
grid-template-columns: repeat(3, 1fr);
gap: 18px;
}
.trust-card-inner { min-height: 130px; padding: 24px 18px; }
}
@media (max-width: 640px) {
/* Convert to horizontal auto-scroll marquee */
.trust-logos {
display: block;
grid-template-columns: none;
gap: 0;
padding: 24px 0 40px;
overflow: hidden;
mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
-webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.trust-line, .trust-pulse { display: none; }
/* Track becomes the animating row holding originals + clones */
.trust-track {
display: flex;
flex-wrap: nowrap;
width: max-content;
animation: trustMarquee 18s linear infinite;
}
.trust-track:hover { animation-play-state: paused; }
.trust-card-clone { display: block; }
/* Medium-sized logo cards */
.trust-card {
flex: 0 0 auto;
width: 200px;
margin-right: 18px;
opacity: 1 !important;
transform: none !important;
transition: none;
}
.trust-card-inner {
min-height: 100px;
padding: 18px 22px;
}
.trust-card-inner img {
max-width: 78%;
max-height: 50px;
}
.trust-meta { gap: 14px; padding: 16px 18px; }
.trust-divider { display: none; }
}
@keyframes trustMarquee {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
.trust-aurora,
.trust-tag::before,
.trust-line-stroke,
.trust-pulse {
animation: none !important;
}
.trust-card,
.trust-header,
.trust-meta {
opacity: 1 !important;
transform: none !important;
transition: none !important;
}
.trust-card-scan { display: none !important; }
}
/* ============================================================
GLOBAL SECTION SPACING — unified rhythm between sections
Removes inconsistent extra top/bottom margin across the site.
Hero, marquee transitional band, and footer keep their own.
============================================================ */
.section-padding,
.trust,
.hww,
.founder-section,
.services-grid-section,
.wfc,
.moments-section,
.ov,
.tc,
.fc-feedback-section,
.faq-v2-section {
padding-top: 80px;
padding-bottom: 80px;
margin-top: 0;
margin-bottom: 0;
}
/* Marquee stays as a tight transitional band between sections */
.marquee-between,
.marquee-section {
padding-top: 0;
padding-bottom: 0;
margin-top: 0;
margin-bottom: 0;
}
/* Strip stray vertical margins on common section wrappers
that contribute to visible gaps between sections */
section + section,
section + footer,
.section-padding + .section-padding {
margin-top: 0;
}
@media (max-width: 991px) {
.section-padding,
.trust,
.hww,
.founder-section,
.services-grid-section,
.wfc,
.moments-section,
.ov,
.tc,
.fc-feedback-section,
.faq-v2-section {
padding-top: 64px;
padding-bottom: 64px;
}
}
@media (max-width: 640px) {
.section-padding,
.trust,
.hww,
.founder-section,
.services-grid-section,
.wfc,
.moments-section,
.ov,
.tc,
.fc-feedback-section,
.faq-v2-section {
padding-top: 52px;
padding-bottom: 52px;
}
}
/* ═══════════════════════════════════════════════════════════
MOBILE PERFORMANCE — Keep scrolling buttery on phones.
Disables GPU-heavy effects (backdrop-blur, large blur filters,
infinite rotation/drift loops, 3D transforms) under 991px.
═══════════════════════════════════════════════════════════ */
@media (max-width: 991px) {
html, body {
-webkit-overflow-scrolling: touch;
overflow-x: hidden;
}
/* Hide top header strip (address / email / socials) on mobile */
.header-top-section,
.header-top-wrapper {
display: none !important;
}
/* Disable backdrop-filter everywhere — it's the single biggest
cause of scroll jank on mobile GPUs. */
body,
body * {
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
/* Reduce or remove heavy blur-filter on ambient glow elements */
.fc-hero-orb,
.fc-hero-mesh,
.fc-hero-spotlight,
.wfc-glow,
.svc-sec-glow,
.ab-svc-bg-glow,
.founder-bg-shape,
.wfc-stats-glow,
.apr-bg,
.osp-bg,
.cs-bg,
.svx-bg,
.tfw-aurora,
.tfw-credential::after,
.wfc-flagship-aurora,
.apr-visual-ring,
.apr-card-glow,
.svx-item-glow,
.pillar-glow,
.wfc-pillar-glow,
.founder-quote-block::before {
filter: blur(40px) !important;
}
/* Make sure the Company Story image marquee is NEVER blurred */
.cs-marquee,
.cs-marquee-track,
.cs-photo,
.cs-photo img {
filter: none !important;
}
/* Kill continuous ambient animations on mobile — they burn
battery and cause compositor churn without adding much UX. */
.osp-bg-a, .osp-bg-b, .osp-mark,
.cs-bg-a, .cs-bg-b, .cs-mark,
.apr-bg-a, .apr-bg-b, .apr-mark,
.svx-bg-a, .svx-bg-b, .svx-mark,
.tfw-aurora-a, .tfw-aurora-b,
.tfw-seal svg,
.tfw-credential-badge::before,
.apr-visual-ring,
.apr-visual-frame img,
.wfc-flagship-ring-1,
.wfc-flagship-ring-2,
.wfc-flagship-rocket,
.founder-quote-accent::after,
.fc-hero-orb,
.fc-hero-mesh,
.trust-line-stroke,
.trust-pulse,
.wfc-stats-bar-shine,
.tfw-cta-tag-dot,
.wfc-flagship-tag-dot,
.cs-chip-dot,
.osp-eyebrow-dash {
animation: none !important;
}
/* Disable 3D parallax / preserve-3d contexts that cost layers */
.fc-hero-stage,
.trust-card,
.trust-card-inner,
[data-magnetic] {
transform: none !important;
transform-style: flat !important;
perspective: none !important;
}
/* Remove heavy drop-shadows on mobile */
.wfc-card,
.svc-card,
.fc-hero-card-main,
.fc-hero-mini,
.fc-hero-cluster,
.founder-quote-block,
.founder-career-block,
.founder-profile-card,
.tfw-credential,
.tfw-cta,
.wfc-flagship,
.cs-frame,
.cs-badge,
.cs-chip,
.apr-card,
.apr-visual-frame,
.apr-visual-card,
.apr-visual-chip {
box-shadow: none !important;
}
/* Force GPU-friendly compositing on images in scrolling regions */
.moment-img img,
.cs-photo img,
.founder-photo-wrap img,
.apr-visual-frame img,
.trust-card-inner img {
will-change: auto;
transform: translateZ(0);
}
/* Keep touch scrolling native — don't let any parent trap it */
#smooth-wrapper,
#smooth-content {
transform: none !important;
overflow: visible !important;
position: static !important;
width: 100% !important;
height: auto !important;
}
}
/* ═══════════════════════════════════════════════════════════
MOBILE POLISH — Lighten heavy boxes and shadows across the
site on ≤768px so the layout feels editorial, not boxy.
═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
/* ── How We Work timeline cards ── */
.hww-step-card {
padding: 24px 20px 22px;
border-radius: 14px;
background: rgba(255,255,255,0.02);
border: 1px solid rgba(255,255,255,0.05);
box-shadow: none !important;
}
[data-theme="light"] .hww-step-card {
background: #ffffff;
border-color: rgba(30,45,90,0.06);
box-shadow: 0 2px 10px rgba(30,45,90,0.04) !important;
}
.hww-step-num { font-size: 56px; }
.hww-step-num span { font-size: 18px; }
/* ── Founder Profile card — lighter surface on mobile ── */
.founder-profile-card {
border-radius: 16px;
box-shadow: none !important;
}
.founder-profile-card:hover {
transform: none;
box-shadow: none !important;
}
.founder-info { padding: 22px 20px 16px; }
.founder-photo-wrap { aspect-ratio: 4 / 3.2; }
.founder-card-index { top: 10px; right: 12px; font-size: 10px; padding: 4px 8px; }
/* ── Founder Quote block ── */
.founder-quote-block {
padding: 28px 22px 24px;
border-radius: 14px;
box-shadow: none !important;
}
.founder-quote-mark { font-size: 100px; right: 10px; top: -8px; }
.founder-quote-accent { width: 30px; height: 30px; top: 14px; right: 14px; }
.quote-text { font-size: 16px; line-height: 1.65; margin-bottom: 18px; }
.quote-signature-name { font-size: 24px; }
/* ── Founder Career block ── */
.founder-career-block {
padding: 22px 20px;
border-radius: 14px;
box-shadow: none !important;
}
.career-cta-head {
gap: 12px;
margin-bottom: 16px;
padding-bottom: 14px;
}
.career-cta-icon { width: 38px; height: 38px; min-width: 38px; }
.career-cta-icon i { font-size: 15px; }
.career-cta-text h4 { font-size: 13.5px; letter-spacing: 0.6px; }
.career-cta-text p { font-size: 12.5px; }
/* Career perks — lighter, no transform on hover */
.career-perk {
padding: 11px 12px;
border-radius: 10px;
background: transparent;
border: 1px solid rgba(255,255,255,0.05);
}
.career-perk:hover {
transform: none;
background: rgba(61,191,169,0.08);
}
[data-theme="light"] .career-perk {
border-color: rgba(30,45,90,0.08);
}
.perk-icon { width: 32px; height: 32px; min-width: 32px; border-radius: 8px; }
.perk-icon i { font-size: 14px; }
.perk-content h5 { font-size: 12px; }
.perk-content p { font-size: 11.5px; }
/* ── TFW Credential card — softer ── */
.tfw-credential {
border-radius: 16px;
box-shadow: none;
}
.tfw-credential::after { filter: blur(20px); opacity: 0.4; }
/* ── About page: Company Story frame ── */
.cs-frame {
border-radius: 18px;
box-shadow: none !important;
}
[data-theme="light"] .cs-frame {
box-shadow: 0 6px 20px rgba(30,45,90,0.06) !important;
}
/* ── About page: Our Approach cards ── */
.apr-card {
border-radius: 14px;
padding: 22px 20px 20px;
border-color: rgba(255,255,255,0.05);
}
.apr-card:hover {
transform: none;
box-shadow: none !important;
}
[data-theme="light"] .apr-card {
border-color: rgba(30,45,90,0.07);
box-shadow: 0 2px 10px rgba(30,45,90,0.04);
}
[data-theme="light"] .apr-card:hover {
box-shadow: 0 8px 20px rgba(var(--ac), 0.14), 0 2px 8px rgba(30,45,90,0.04) !important;
}
/* ── FAQ items — tighter ── */
.faq-v2-btn {
font-size: 14.5px;
gap: 12px;
}
.faq-v2-icon { width: 28px; height: 28px; }
.faq-v2-body { font-size: 13.5px; }
/* ── WFC Flagship ── */
.wfc-flagship { box-shadow: none !important; border-radius: 18px; }
[data-theme="light"] .wfc-flagship { box-shadow: 0 10px 28px rgba(30,45,90,0.08) !important; }
.wfc-flagship-facts { padding: 12px 14px; gap: 12px 14px; }
/* ── TFW CTA — softer shadow ── */
.tfw-cta { box-shadow: 0 10px 22px rgba(0,0,0,0.18); }
[data-theme="light"] .tfw-cta { box-shadow: 0 8px 20px rgba(30,45,90,0.06); }
/* ── Section container horizontal padding ── */
.container,
.container-fluid { padding-left: 16px; padding-right: 16px; }
/* ── Global: tone down big shadows on mobile ── */
.svc-card,
.wfc-card,
.ab-svc-card,
.ov-card,
.fc-feedback-card {
box-shadow: none;
}
}
/* ── 480px refinements ── */
@media (max-width: 480px) {
.hww-step-card { padding: 20px 18px 18px; border-radius: 12px; }
.founder-profile-card { border-radius: 14px; }
.founder-quote-block,
.founder-career-block { padding: 20px 18px; border-radius: 12px; }
.tfw-credential { padding: 24px 20px 22px; border-radius: 14px; }
.cs-frame { border-radius: 14px; }
.apr-card { padding: 20px 16px 18px; border-radius: 12px; }
.wfc-flagship { padding: 28px 20px; border-radius: 14px; }
/* Core typography bumps so it stays readable but not oversized */
body { font-size: 14.5px; }
.founder-name { font-size: 19px; }
.founder-bio { font-size: 13px; line-height: 1.7; }
}