@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 300;
font-display: swap;
src: url('/assets/fonts/Inter-300.ttf') format('truetype');
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('/assets/fonts/Inter-400.ttf') format('truetype');
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url('/assets/fonts/Inter-500.ttf') format('truetype');
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url('/assets/fonts/Inter-600.ttf') format('truetype');
}
@font-face {
font-family: 'Clash Display';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('/assets/fonts/ClashDisplay-400.woff2') format('woff2');
}
@font-face {
font-family: 'Clash Display';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url('/assets/fonts/ClashDisplay-500.woff2') format('woff2');
}
@font-face {
font-family: 'Clash Display';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url('/assets/fonts/ClashDisplay-600.woff2') format('woff2');
}
@font-face {
font-family: 'Clash Display';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('/assets/fonts/ClashDisplay-700.woff2') format('woff2');
}
:root {
--ripple-blur: 0px;
--ripple-opacity: 1;
--ripple-saturation: 100%;
--ripple-hue: 18deg;
--ripple-scale: 1;
}
body {
font-family: 'Inter', sans-serif;
font-feature-settings: "cv02", "cv03", "cv04", "cv11";
position: relative;
min-height: 100%;
background: #0B0C10;
}
.hero-title {
font-family: 'Clash Display', 'Inter', sans-serif;
}
.icon {
display: inline-block;
flex: 0 0 auto;
vertical-align: -0.125em;
}
.site-logo {
display: block;
height: auto;
color: #f8fafc;
transition: filter 0.3s ease, opacity 0.3s ease;
}
.site-logo--nav {
width: 118px;
}
.site-logo--footer {
width: 136px;
opacity: 0.9;
}
.site-ambient-bg {
pointer-events: none;
contain: layout paint style;
}
.site-ripple-bg {
position: absolute;
left: 0;
right: 0;
top: 0;
width: 100%;
height: 100vh;
height: 100svh;
z-index: 0;
filter: blur(var(--ripple-blur)) saturate(var(--ripple-saturation)) hue-rotate(var(--ripple-hue));
opacity: var(--ripple-opacity);
transform: translateZ(0) scale(var(--ripple-scale));
transform-origin: center;
will-change: opacity, transform;
}
.site-ripple-bg.is-out-of-hero {
opacity: 0 !important;
visibility: hidden;
filter: none !important;
}
.site-ripple-bg.is-out-of-hero .site-ripple-bg__inner,
.site-ripple-bg.is-out-of-hero .site-ripple-bg__scene,
.site-ripple-bg.is-out-of-hero canvas {
opacity: 0 !important;
visibility: hidden !important;
}
.site-ripple-bg__inner,
.site-ripple-bg__scene {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
.site-ambient-bg[data-alpha-mask] {
isolation: isolate;
overflow: hidden;
}
.site-ambient-bg[data-alpha-mask]::after {
content: "";
position: absolute;
inset: 0;
z-index: 3;
pointer-events: none;
background: linear-gradient(
90deg,
#0B0C10 0%,
rgba(11, 12, 16, 0.96) 5%,
rgba(11, 12, 16, 0.68) 13%,
rgba(11, 12, 16, 0) 26%,
rgba(11, 12, 16, 0) 74%,
rgba(11, 12, 16, 0.68) 87%,
rgba(11, 12, 16, 0.96) 95%,
#0B0C10 100%
);
}
.site-ambient-bg [data-us-project] {
transform: translateZ(0);
will-change: transform;
backface-visibility: hidden;
}
body > nav,
body > .hero-region,
body > .dark-section-stage,
body > section,
body > footer {
position: relative;
z-index: 3;
}
#approach,
body > footer {
background: #0B0C10;
}
#approach {
background: transparent;
}
.dark-section-stage {
position: relative;
isolation: isolate;
overflow: hidden;
background: #0B0C10;
margin-top: 0;
padding-top: 0;
}
.dark-section-stage > section {
position: relative;
z-index: 2;
background: transparent !important;
}
#products {
isolation: isolate;
overflow: hidden;
background: #0B0C10 !important;
margin-top: -1px;
box-shadow:
inset 0 1px 0 rgba(148, 163, 184, 0.08),
inset 0 120px 120px rgba(11, 12, 16, 0.58),
inset 0 -120px 120px rgba(11, 12, 16, 0.7);
}
#products > .max-w-7xl {
position: relative;
z-index: 2;
}
section {
content-visibility: auto;
contain-intrinsic-size: 720px;
}
.hero-region {
position: relative;
isolation: isolate;
overflow: hidden;
background: #0B0C10;
}
.hero-region > .site-ripple-bg {
position: absolute;
top: 0;
bottom: 0;
height: auto;
z-index: 0;
}
.hero-region > :not(.hero-grid):not(.site-ripple-bg) {
position: relative;
z-index: 1;
}
.hero-grid {
--grid-cell-x: 64px;
--grid-cell-y: 112px;
--grid-link-duration: 22s;
--grid-link-drift: 20px;
position: absolute;
inset: 0;
pointer-events: none;
z-index: 0;
background-image:
linear-gradient(rgba(255, 255, 255, 0.12) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, 0.12) 1px, transparent 1px);
background-size: var(--grid-cell-x) var(--grid-cell-y), var(--grid-cell-x) var(--grid-cell-y);
background-position: center top;
opacity: 0.36;
mask-image:
linear-gradient(to bottom, transparent 0%, black 18%, black 64%, transparent 90%),
linear-gradient(to right, transparent 0%, black 14%, black 86%, transparent 100%);
mask-composite: intersect;
-webkit-mask-image:
linear-gradient(to bottom, transparent 0%, black 18%, black 64%, transparent 90%),
linear-gradient(to right, transparent 0%, black 14%, black 86%, transparent 100%);
-webkit-mask-composite: source-in;
}
.hero-metrics {
position: relative;
z-index: 1;
}
.hero-grid::before,
.hero-grid::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background-image:
linear-gradient(rgba(125, 211, 252, 0.145) 1px, transparent 1px),
linear-gradient(90deg, rgba(125, 211, 252, 0.145) 1px, transparent 1px);
background-size: var(--grid-cell-x) var(--grid-cell-y), var(--grid-cell-x) var(--grid-cell-y);
opacity: 0.45;
mix-blend-mode: screen;
will-change: transform, background-position, opacity;
}
.hero-grid::before {
clip-path: inset(0 52% 0 0);
mask-image: linear-gradient(to right, transparent 0%, black 16%, black 38%, transparent 100%);
-webkit-mask-image: linear-gradient(to right, transparent 0%, black 16%, black 38%, transparent 100%);
animation: heroGridLeftDrift var(--grid-link-duration) ease-in-out infinite alternate;
}
.hero-grid::after {
clip-path: inset(0 0 0 52%);
mask-image: linear-gradient(to left, transparent 0%, black 16%, black 38%, transparent 100%);
-webkit-mask-image: linear-gradient(to left, transparent 0%, black 16%, black 38%, transparent 100%);
animation: heroGridRightDrift var(--grid-link-duration) ease-in-out infinite alternate;
}
.section-kicker {
display: inline-flex;
align-items: center;
gap: 10px;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(165, 180, 252, 0.92);
}
.section-kicker::before {
content: "";
width: 28px;
height: 1px;
background: rgba(129, 140, 248, 0.65);
}
.hero-badge {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 12px;
padding: 9px 15px;
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, 0.14);
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.105), rgba(255, 255, 255, 0.025)),
rgba(14, 165, 233, 0.035);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.2),
0 12px 34px rgba(0, 0, 0, 0.18);
color: rgba(226, 242, 255, 0.9);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.22em;
line-height: 1;
text-transform: uppercase;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.hero-badge::before {
content: "";
width: 7px;
height: 7px;
border-radius: 999px;
background: #7dd3fc;
box-shadow: 0 0 0 5px rgba(125, 211, 252, 0.1), 0 0 18px rgba(125, 211, 252, 0.75);
}
.hero-badge::after {
content: "";
position: absolute;
inset: 1px;
border-radius: inherit;
pointer-events: none;
background: linear-gradient(110deg, transparent 0 28%, rgba(255, 255, 255, 0.16) 48%, transparent 68%);
opacity: 0.5;
}
.hero-title--layered {
display: flex;
flex-direction: column;
align-items: center;
gap: clamp(2px, 0.8vw, 8px);
font-size: clamp(52px, 7.8vw, 108px);
line-height: 0.88;
letter-spacing: 0.005em;
color: #f8fafc;
text-wrap: balance;
}
.hero-title__line {
display: block;
white-space: nowrap;
}
.hero-title__line--soft {
color: #fff;
text-shadow: 0 18px 52px rgba(0, 0, 0, 0.28);
}
.hero-title__line--deep {
color: #fff;
}
.hero-title__mark,
.hero-title__accent {
position: relative;
display: inline-block;
}
.hero-title__mark {
padding-inline: 0.04em;
}
.hero-title__accent {
color: #60a5fa;
background: linear-gradient(180deg, #dbeafe 0%, #60a5fa 46%, #2563eb 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
text-shadow: none;
}
.hero-title__accent::after {
content: "";
position: absolute;
left: 0.08em;
right: 0.02em;
bottom: -0.05em;
height: 0.08em;
border-radius: 999px;
background: linear-gradient(90deg, transparent, rgba(96, 165, 250, 0.85), transparent);
filter: blur(1px);
opacity: 0.85;
}
.hero-subcopy {
font-size: clamp(16px, 1.5vw, 20px);
}
.hero-benefits {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 4px;
padding: 8px;
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, 0.08);
background: rgba(255, 255, 255, 0.035);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.08),
0 18px 48px rgba(0, 0, 0, 0.16);
backdrop-filter: blur(8px) saturate(108%);
-webkit-backdrop-filter: blur(8px) saturate(108%);
}
.hero-benefits__item {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 8px 12px;
border-radius: 999px;
color: rgba(203, 213, 225, 0.82);
font-size: 11px;
font-weight: 500;
white-space: nowrap;
}
.hero-benefits__item svg {
color: rgba(96, 165, 250, 0.95);
filter: drop-shadow(0 0 8px rgba(37, 99, 235, 0.38));
}
.hero-button-group {
align-items: stretch;
}
.hero-button-group .hero-button {
position: relative;
isolation: isolate;
overflow: hidden;
min-height: 48px;
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, 0.16);
background: rgba(255, 255, 255, 0.05);
box-shadow:
0 14px 40px rgba(0, 0, 0, 0.28),
inset 0 1px 0 rgba(255, 255, 255, 0.16);
transition:
transform 0.28s cubic-bezier(0.16, 1, 0.3, 1),
box-shadow 0.28s ease,
border-color 0.28s ease,
color 0.28s ease;
}
.hero-button-group .hero-button::before {
content: "";
position: absolute;
left: 50%;
top: 50%;
width: 172%;
aspect-ratio: 1;
z-index: 0;
background:
conic-gradient(from 0deg,
transparent 0deg,
transparent 58deg,
rgba(255, 255, 255, 0.95) 82deg,
rgba(125, 211, 252, 0.72) 106deg,
transparent 134deg,
transparent 224deg,
rgba(129, 140, 248, 0.58) 248deg,
rgba(255, 255, 255, 0.78) 272deg,
transparent 302deg,
transparent 360deg);
transform: translate(-50%, -50%);
animation: heroButtonFlow 4.2s linear infinite;
opacity: 0.88;
}
.hero-button-group .hero-button::after {
content: "";
position: absolute;
inset: 1px;
z-index: 1;
border-radius: inherit;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.16), transparent 42%),
var(--hero-button-face);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.26),
inset 0 -10px 24px rgba(0, 0, 0, 0.12);
}
.hero-button-group .hero-button span,
.hero-button-group .hero-button .icon {
position: relative;
z-index: 2;
}
.hero-button-group .hero-button:hover {
transform: translateY(-2px);
border-color: rgba(255, 255, 255, 0.32);
box-shadow:
0 18px 54px rgba(0, 0, 0, 0.34),
0 0 30px rgba(129, 140, 248, 0.16),
inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.hero-button-group .hero-button:active {
transform: translateY(0) scale(0.985);
}
.hero-button-group .hero-button--primary {
--hero-button-face: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(226, 232, 240, 0.93));
color: #05070d;
}
.hero-button-group .hero-button--secondary {
--hero-button-face: linear-gradient(180deg, rgba(21, 27, 43, 0.92), rgba(7, 10, 18, 0.9));
color: rgba(255, 255, 255, 0.94);
}
@keyframes heroButtonFlow {
from {
transform: translate(-50%, -50%) rotate(0deg);
}
to {
transform: translate(-50%, -50%) rotate(360deg);
}
}
.partner-logo {
display: flex;
align-items: center;
justify-content: center;
width: clamp(136px, 11.4vw, 184px);
height: clamp(46px, 4vw, 58px);
padding: 0;
background: transparent;
border: 0;
box-shadow: none;
opacity: 0.72;
transition: transform 0.25s ease, opacity 0.25s ease, filter 0.25s ease;
}
.partner-logo:hover {
transform: translateY(-2px);
opacity: 0.95;
}
.partner-logo__image {
display: block;
max-width: 100%;
max-height: 30px;
object-fit: contain;
filter: brightness(0) invert(1) drop-shadow(0 10px 18px rgba(0, 0, 0, 0.22));
pointer-events: none;
}
.partner-logo__image.partner-logo__image--tiktok,
.partner-logo__image.partner-logo__image--openai {
max-height: 34px;
}
.partner-logo__image.partner-logo__image--cloudflare {
max-height: 33px;
}
.partner-strip {
background:
linear-gradient(180deg, rgb(255 255 255 / 0%), rgb(255 255 255 / 2%)),
rgb(255 255 255 / 0%);
box-shadow:
inset 0 1px 0 rgb(255 255 255 / 0%),
inset 0 -1px 0 rgb(255 255 255 / 0%),
0 10px 32px rgb(0 0 0 / 0%);
backdrop-filter: blur(4px) saturate(108%);
-webkit-backdrop-filter: blur(4px) saturate(108%);
}
.partner-strip::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background:
radial-gradient(circle, rgba(255, 255, 255, 0.045) 0 1.25px, transparent 1.9px),
radial-gradient(circle, rgba(255, 255, 255, 0.026) 0 1px, transparent 1.8px),
linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.028), transparent);
background-size: 10px 10px, 16px 16px, 100% 100%;
background-position: 0 0, 5px 7px, center;
opacity: 0.14;
}
.approach {
isolation: isolate;
overflow: hidden;
position: relative;
}
.approach::before {
display: none;
}
.approach::after {
display: none;
}
.approach-layout {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
gap: clamp(18px, 2.4vw, 32px);
align-items: stretch;
perspective: 1400px;
}
.approach-layout::before {
content: "";
position: absolute;
left: 5%;
right: 5%;
top: 42%;
height: 1px;
pointer-events: none;
background: linear-gradient(90deg, transparent, rgba(125, 211, 252, 0.28), rgba(59, 130, 246, 0.18), transparent);
opacity: 0.52;
}
.approach-intro {
grid-column: 1 / span 5;
grid-row: 1;
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: space-between;
min-height: 430px;
max-width: none;
margin-inline: 0;
text-align: left;
border: 1px solid rgba(255, 255, 255, 0.09);
--glass-surface:
radial-gradient(circle at 86% 18%, rgba(14, 165, 233, 0.22), transparent 28%),
linear-gradient(145deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.01)),
rgba(255, 255, 255, 0.006);
--glass-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.06),
0 22px 70px rgba(0, 0, 0, 0.12);
}
.approach-intro::before,
.approach-loop::before {
content: "";
position: absolute;
left: -2px;
right: -2px;
top: -2px;
height: 64px;
z-index: 1;
pointer-events: none;
background:
linear-gradient(180deg, rgba(11, 12, 16, 0.88) 0%, rgba(11, 12, 16, 0.38) 46%, rgba(11, 12, 16, 0) 100%),
linear-gradient(90deg, rgba(255, 255, 255, 0.05), rgba(125, 211, 252, 0.08), rgba(255, 255, 255, 0.04));
backdrop-filter: blur(14px) saturate(116%);
-webkit-backdrop-filter: blur(14px) saturate(116%);
mask-image: linear-gradient(to bottom, black 0%, black 58%, transparent 100%);
-webkit-mask-image: linear-gradient(to bottom, black 0%, black 58%, transparent 100%);
opacity: 0.88;
}
.approach-intro::after {
content: "";
position: absolute;
right: -48px;
bottom: -52px;
width: 210px;
height: 210px;
border: 1px solid rgba(125, 211, 252, 0.14);
border-radius: 50%;
background:
linear-gradient(90deg, transparent 49%, rgba(125, 211, 252, 0.13) 50%, transparent 51%),
linear-gradient(0deg, transparent 49%, rgba(125, 211, 252, 0.13) 50%, transparent 51%);
opacity: 0.36;
}
.approach-intro > * {
position: relative;
z-index: 2;
}
.approach-intro .section-kicker {
margin-inline: 0;
justify-content: flex-start;
}
.approach-loop {
grid-column: 6 / -1;
grid-row: 1;
position: relative;
overflow: hidden;
display: grid;
grid-template-columns: minmax(0, 0.9fr) minmax(230px, 0.72fr);
gap: clamp(20px, 2.5vw, 32px);
align-items: center;
min-height: 430px;
border: 1px solid rgba(255, 255, 255, 0.09);
--glass-surface:
radial-gradient(circle at 82% 28%, rgba(59, 130, 246, 0.17), transparent 30%),
linear-gradient(145deg, rgba(255, 255, 255, 0.042), rgba(255, 255, 255, 0.008)),
rgba(255, 255, 255, 0.006);
--glass-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.06),
0 24px 78px rgba(0, 0, 0, 0.12);
}
.approach-loop::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background:
linear-gradient(115deg, transparent 0 44%, rgba(255, 255, 255, 0.06) 48%, transparent 54%),
radial-gradient(circle at 18% 18%, rgba(125, 211, 252, 0.12), transparent 28%);
opacity: 0.3;
}
.approach-loop > * {
position: relative;
z-index: 2;
}
.approach-loop__copy {
align-self: end;
}
.approach-loop__stages {
grid-column: 1 / -1;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
}
.approach-loop__stage {
position: relative;
overflow: hidden;
border-radius: 14px;
border: 1px solid rgba(255, 255, 255, 0.08);
background: rgba(255, 255, 255, 0.02);
padding: 14px 15px;
transition: transform 0.28s ease, border-color 0.28s ease, background 0.28s ease;
}
.approach-loop__stage:hover {
transform: translateY(-3px);
border-color: rgba(125, 211, 252, 0.24);
background: rgba(14, 165, 233, 0.045);
}
.approach-loop__stage span {
display: block;
margin-bottom: 10px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.12em;
color: rgba(125, 211, 252, 0.9);
}
.approach-loop__stage strong {
display: block;
font-size: 13px;
font-weight: 500;
color: rgba(248, 250, 252, 0.9);
}
.approach-orbit {
position: relative;
justify-self: center;
width: min(100%, 300px);
aspect-ratio: 1;
border-radius: 50%;
border: 1px solid rgba(125, 211, 252, 0.18);
background:
radial-gradient(circle, rgba(14, 165, 233, 0.13), transparent 28%),
radial-gradient(circle, transparent 42%, rgba(125, 211, 252, 0.09) 43%, transparent 45%),
radial-gradient(circle, transparent 62%, rgba(255, 255, 255, 0.08) 63%, transparent 65%);
box-shadow:
inset 0 0 40px rgba(14, 165, 233, 0.08),
0 20px 60px rgba(0, 0, 0, 0.12);
}
.approach-orbit::before,
.approach-orbit::after {
content: "";
position: absolute;
inset: 18%;
border-radius: inherit;
border: 1px solid rgba(255, 255, 255, 0.075);
animation: approachOrbitSpin 18s linear infinite;
}
.approach-orbit::after {
inset: 34%;
animation-duration: 12s;
animation-direction: reverse;
}
.approach-orbit__node {
position: absolute;
left: var(--x);
top: var(--y);
display: grid;
place-items: center;
width: 48px;
height: 48px;
border-radius: 16px;
border: 1px solid rgba(125, 211, 252, 0.28);
background: rgba(7, 12, 22, 0.72);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.12),
0 0 24px rgba(14, 165, 233, 0.16);
color: rgba(226, 242, 255, 0.92);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.08em;
transform: translate(-50%, -50%);
animation: approachNodePulse 2.8s ease-in-out infinite;
animation-delay: var(--delay, 0s);
}
.approach-loop__timeline {
grid-column: 1 / -1;
display: grid;
gap: 10px;
}
.approach-loop__item {
display: grid;
grid-template-columns: minmax(78px, 0.34fr) minmax(0, 1fr);
align-items: center;
gap: 14px;
border-radius: 12px;
border: 1px solid rgb(255 255 255 / 7%);
background: rgb(255 255 255 / 2.4%);
padding: 12px 14px;
transition: border-color 0.28s ease, background 0.28s ease, transform 0.28s ease;
}
.approach-loop__item:hover {
transform: translateX(4px);
border-color: rgba(125, 211, 252, 0.22);
background: rgba(255, 255, 255, 0.036);
}
.approach-loop__item span {
font-size: 10px;
font-weight: 600;
letter-spacing: 0.18em;
line-height: 1;
text-transform: uppercase;
color: rgb(186 230 253 / 82%);
}
.approach-loop__item strong {
display: block;
margin-bottom: 8px;
font-size: 12px;
font-weight: 500;
line-height: 1;
color: rgb(226 232 240 / 78%);
}
.approach-loop__bar {
height: 3px;
overflow: hidden;
border-radius: 999px;
background: rgb(255 255 255 / 7%);
}
.approach-loop__bar::before {
content: "";
display: block;
width: var(--fill);
height: 100%;
border-radius: inherit;
background: linear-gradient(to right, rgb(125 211 252 / 82%), rgb(59 130 246 / 44%));
}
.approach-cards {
grid-column: 1 / -1;
grid-row: 2;
position: relative;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(16px, 2vw, 26px);
align-items: start;
padding-top: clamp(4px, 1.2vw, 18px);
perspective: 1400px;
}
.approach-cards::before {
display: none;
}
.approach-card {
--accent: 59, 130, 246;
--card-offset: 0px;
--tilt-x: 0deg;
--tilt-y: 0deg;
--spot-x: 78%;
--spot-y: 18%;
position: relative;
overflow: hidden;
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 20px;
min-height: 328px;
border: 1px solid rgba(255, 255, 255, 0.09);
--glass-surface:
linear-gradient(140deg, rgba(var(--accent), 0.095), rgba(255, 255, 255, 0.014) 46%, rgba(255, 255, 255, 0.006)),
rgba(255, 255, 255, 0.006);
transform: translateY(var(--card-offset)) rotateX(var(--tilt-y)) rotateY(var(--tilt-x)) translateZ(0);
transform-style: preserve-3d;
transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.35s ease, box-shadow 0.35s ease, background 0.35s ease;
}
.approach-card::before {
content: "";
position: absolute;
inset: -1px;
pointer-events: none;
background:
linear-gradient(110deg, transparent 0 28%, rgba(255, 255, 255, 0.14) 42%, transparent 56%),
radial-gradient(circle at var(--spot-x) var(--spot-y), rgba(var(--accent), 0.28), transparent 28%);
opacity: 0;
transition: opacity 0.35s ease;
}
.approach-card::after {
content: attr(data-phase);
position: absolute;
right: 20px;
top: 10px;
font-size: clamp(52px, 7vw, 96px);
font-weight: 700;
letter-spacing: -0.08em;
line-height: 1;
color: rgba(255, 255, 255, 0.035);
}
.approach-card:hover {
transform: translateY(calc(var(--card-offset) - 10px)) rotateX(var(--tilt-y)) rotateY(var(--tilt-x)) scale(1.012);
border-color: rgba(var(--accent), 0.45);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.18),
0 28px 90px rgba(0, 0, 0, 0.3),
0 0 38px rgba(var(--accent), 0.12);
}
.approach-card:hover::before {
opacity: 1;
}
.approach-card > * {
position: relative;
z-index: 1;
}
.approach-cards .approach-card:nth-child(2) {
--card-offset: 30px;
}
.approach-cards .approach-card:nth-child(3) {
--card-offset: 12px;
}
.approach-cards .approach-card:first-child {
--card-offset: 0px;
}
.approach-card__icon {
position: relative;
isolation: isolate;
overflow: hidden;
display: grid;
place-items: center;
width: 68px;
height: 68px;
border-radius: 18px;
color: rgb(var(--accent));
background: rgba(255, 255, 255, 0.035);
border: 1px solid rgba(var(--accent), 0.26);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.18),
inset 0 -14px 24px rgba(0, 0, 0, 0.16),
0 16px 36px rgba(var(--accent), 0.12),
0 0 0 1px rgba(255, 255, 255, 0.035);
transition:
transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
border-color 0.35s ease,
box-shadow 0.35s ease;
}
.approach-card__icon::before {
content: "";
position: absolute;
inset: 0;
z-index: 2;
border-radius: inherit;
background:
linear-gradient(90deg, transparent 0 28%, rgba(var(--accent), 0.38) 43%, rgba(255, 255, 255, 0.92) 50%, rgba(var(--accent), 0.38) 57%, transparent 72%) 0 0 / 220% 1px no-repeat,
linear-gradient(180deg, transparent 0 28%, rgba(var(--accent), 0.38) 43%, rgba(255, 255, 255, 0.92) 50%, rgba(var(--accent), 0.38) 57%, transparent 72%) 100% 0 / 1px 220% no-repeat,
linear-gradient(270deg, transparent 0 28%, rgba(var(--accent), 0.38) 43%, rgba(255, 255, 255, 0.92) 50%, rgba(var(--accent), 0.38) 57%, transparent 72%) 100% 100% / 220% 1px no-repeat,
linear-gradient(0deg, transparent 0 28%, rgba(var(--accent), 0.38) 43%, rgba(255, 255, 255, 0.92) 50%, rgba(var(--accent), 0.38) 57%, transparent 72%) 0 100% / 1px 220% no-repeat;
opacity: 0.8;
animation: approachIconEdgeFlow 3.8s linear infinite;
pointer-events: none;
}
.approach-card__icon::after {
content: "";
position: absolute;
inset: 1px;
z-index: 0;
border-radius: calc(18px - 1px);
background:
radial-gradient(circle at 30% 18%, rgba(255, 255, 255, 0.18), transparent 26%),
linear-gradient(145deg, rgba(var(--accent), 0.18), rgba(5, 10, 20, 0.72) 54%, rgba(255, 255, 255, 0.035));
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.18),
inset 0 0 26px rgba(var(--accent), 0.1);
pointer-events: none;
}
.approach-card__icon svg {
position: relative;
z-index: 3;
width: 30px;
height: 30px;
filter: drop-shadow(0 0 10px rgba(var(--accent), 0.42));
transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), filter 0.35s ease;
}
.approach-card:hover .approach-card__icon {
animation: approachIconDrift 1.45s ease-in-out infinite alternate;
border-color: rgba(var(--accent), 0.52);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.22),
inset 0 -14px 24px rgba(0, 0, 0, 0.16),
0 18px 40px rgba(var(--accent), 0.18),
0 0 30px rgba(var(--accent), 0.16);
}
.approach-card:hover .approach-card__icon::before {
opacity: 1;
animation-duration: 2.6s;
}
.approach-card:hover .approach-card__icon svg {
transform: scale(1.08);
filter: drop-shadow(0 0 15px rgba(var(--accent), 0.62));
}
.approach-card__meta {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 22px;
}
.approach-card__meta span {
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, 0.09);
background: rgba(255, 255, 255, 0.045);
padding: 7px 10px;
font-size: 11px;
line-height: 1;
color: rgba(226, 232, 240, 0.78);
}
@keyframes approachIconDrift {
from {
transform: translateY(0) rotate(0deg);
}
to {
transform: translateY(-3px) rotate(-2deg);
}
}
@keyframes approachIconEdgeFlow {
from {
background-position:
220% 0,
100% -220%,
-220% 100%,
0 220%;
}
to {
background-position:
-220% 0,
100% 220%,
220% 100%,
0 -220%;
}
}
@keyframes approachOrbitSpin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@keyframes approachNodePulse {
0%, 100% {
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 0 18px rgba(14, 165, 233, 0.12);
}
50% {
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 0 32px rgba(14, 165, 233, 0.24);
}
}
@keyframes heroGridLeftDrift {
from {
transform: translate3d(calc(var(--grid-link-drift) * -0.45), 0, 0);
background-position: center top, center top;
opacity: 0.24;
}
to {
transform: translate3d(var(--grid-link-drift), -8px, 0);
background-position: calc(50% + var(--grid-link-drift)) -14px, calc(50% + var(--grid-link-drift)) -14px;
opacity: 0.46;
}
}
@keyframes heroGridRightDrift {
from {
transform: translate3d(calc(var(--grid-link-drift) * 0.45), 0, 0);
background-position: center top, center top;
opacity: 0.24;
}
to {
transform: translate3d(calc(var(--grid-link-drift) * -1), 8px, 0);
background-position: calc(50% - var(--grid-link-drift)) 14px, calc(50% - var(--grid-link-drift)) 14px;
opacity: 0.46;
}
}
.product-showcase {
position: relative;
margin-inline: calc(50% - 50vw);
margin-top: clamp(-46px, -3.6vw, -28px);
width: 100vw;
overflow: visible;
perspective: 2200px;
perspective-origin: 50% 46%;
isolation: isolate;
}
.product-showcase__track {
--cylinder-radius: 1400px;
position: relative;
width: 100vw;
height: clamp(540px, 44vw, 650px);
overflow: visible;
padding: 0;
perspective: 2200px;
perspective-origin: 50% 47%;
transform-style: preserve-3d;
contain: layout style;
cursor: grab;
user-select: none;
touch-action: pan-y;
}
.product-showcase__track:active {
cursor: grabbing;
}
.product-showcase__track.is-dragging {
cursor: grabbing;
}
.product-showcase__card {
--x: 0px;
--z: 280px;
--rotate: 0deg;
--scale: 1;
--fade: 1;
--hover-lift: 0px;
--product-card-radius: 8px;
position: absolute;
left: 50%;
top: 50%;
display: flex;
flex-direction: column;
width: 318px;
min-height: 452px;
overflow: hidden;
border-radius: var(--product-card-radius) !important;
cursor: pointer;
contain: layout style;
border: 1px solid rgba(255, 255, 255, 0.16);
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.065), rgba(255, 255, 255, 0.018)),
rgba(255, 255, 255, 0.01);
box-shadow: 0 22px 58px rgba(0, 0, 0, 0.16);
opacity: var(--fade);
transform:
translate3d(calc(-50% + var(--x)), calc(-50% + var(--hover-lift)), var(--z))
rotateY(var(--rotate))
scale(var(--scale));
transform-style: preserve-3d;
transform-origin: center;
backface-visibility: hidden;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: geometricPrecision;
transition:
border-color 0.35s ease,
box-shadow 0.35s ease,
opacity 0.26s ease,
transform 0.42s cubic-bezier(0.16, 1, 0.3, 1);
will-change: auto;
}
.product-showcase__track.is-dragging .product-showcase__card {
transition: none;
will-change: transform;
}
.product-showcase__card::before {
content: "";
position: absolute;
inset: -1px;
border-radius: inherit;
pointer-events: none;
background:
radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.2), transparent 34%),
linear-gradient(135deg, rgba(255, 255, 255, 0.22), transparent 28%, transparent 72%, rgba(255, 255, 255, 0.12));
opacity: 0.52;
transition: opacity 0.28s ease, background-position 0.38s ease;
}
.product-showcase__card::after {
content: "";
position: absolute;
inset: 8px;
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: inherit;
pointer-events: none;
transform: translateZ(18px);
transition: border-color 0.28s ease, inset 0.28s ease, opacity 0.28s ease;
}
.product-showcase__card.is-center {
border-color: rgba(255, 255, 255, 0.32);
box-shadow: 0 30px 86px rgba(14, 165, 233, 0.13), 0 24px 64px rgba(0, 0, 0, 0.24);
}
.product-showcase__card.is-center .product-showcase__content p,
.product-showcase__card.is-center .product-showcase__metrics em {
color: rgba(241, 245, 249, 0.88);
}
.product-showcase__card.is-center .product-showcase__head h3,
.product-showcase__card.is-center .product-showcase__metrics strong {
font-weight: 760;
}
.product-showcase__card:hover {
--hover-lift: -8px;
border-color: rgba(125, 211, 252, 0.46);
box-shadow:
0 32px 86px rgba(14, 165, 233, 0.12),
0 22px 64px rgba(0, 0, 0, 0.24),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.product-showcase__card:hover::before {
opacity: 0.72;
background:
radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.26), transparent 34%),
linear-gradient(112deg, transparent 0 26%, rgba(255, 255, 255, 0.2) 42%, transparent 58%),
linear-gradient(135deg, rgba(255, 255, 255, 0.22), transparent 28%, transparent 72%, rgba(125, 211, 252, 0.16));
}
.product-showcase__card:hover::after {
inset: 6px;
border-color: rgba(125, 211, 252, 0.2);
opacity: 0.92;
}
.product-showcase__card:active {
--hover-lift: -4px;
}
.product-showcase__card.is-selected {
border-color: rgba(125, 211, 252, 0.72);
box-shadow:
0 34px 96px rgba(14, 165, 233, 0.16),
0 24px 72px rgba(0, 0, 0, 0.26),
0 0 0 1px rgba(125, 211, 252, 0.22),
inset 0 1px 0 rgba(255, 255, 255, 0.13);
}
.product-showcase__card.is-selected::after {
inset: 6px;
border-color: rgba(125, 211, 252, 0.36);
box-shadow: inset 0 0 26px rgba(14, 165, 233, 0.08);
}
.product-showcase__shot {
aspect-ratio: 16 / 9;
flex: 0 0 auto;
overflow: hidden;
border-radius: var(--product-card-radius) var(--product-card-radius) 0 0;
background:
linear-gradient(135deg, rgba(15, 23, 42, 0.72), rgba(30, 41, 59, 0.5)),
rgba(2, 6, 23, 0.78);
}
.product-showcase__content {
position: relative;
z-index: 1;
flex: 0 0 auto;
display: flex;
flex-direction: column;
gap: 13px;
padding: 17px 18px 14px;
backface-visibility: hidden;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: geometricPrecision;
}
.product-showcase__head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 14px;
}
.product-showcase__kicker {
margin-bottom: 7px;
font-size: 10px;
font-weight: 760;
line-height: 1.2;
letter-spacing: 0;
text-transform: uppercase;
text-shadow: 0 0 0.01px currentColor;
}
.product-showcase__head h3 {
margin: 0;
font-size: 22px;
line-height: 1.05;
font-weight: 720;
letter-spacing: 0;
color: #fff;
text-shadow: 0 0 0.01px rgba(255, 255, 255, 0.9);
-webkit-text-stroke: 0.01px rgba(255, 255, 255, 0.26);
}
.product-showcase__index {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 32px;
height: 24px;
padding: 0 8px;
border-radius: 999px;
border: 1px solid rgba(147, 197, 253, 0.18);
background: rgba(15, 23, 42, 0.44);
color: rgba(191, 219, 254, 0.78);
font-size: 11px;
line-height: 1;
}
.product-showcase__content p {
margin: 0;
min-height: 42px;
font-size: 13px;
line-height: 1.55;
font-weight: 460;
color: rgba(226, 232, 240, 0.82);
text-shadow: 0 0 0.01px rgba(226, 232, 240, 0.72);
}
.product-showcase__metrics {
margin-top: 22px;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
padding-top: 0;
}
.product-showcase__metrics span {
display: inline-flex;
align-items: center;
min-width: 0;
min-height: 31px;
flex: 0 0 auto;
justify-content: center;
gap: 6px;
padding: 7px 10px;
border-radius: 999px;
border: 1px solid rgba(125, 211, 252, 0.18);
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.085), rgba(255, 255, 255, 0.032)),
rgba(15, 23, 42, 0.42);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.1),
0 10px 22px rgba(14, 165, 233, 0.045);
color: rgba(226, 232, 240, 0.82);
line-height: 1;
white-space: nowrap;
}
.product-showcase__metrics strong {
display: inline-block;
color: rgba(248, 250, 252, 0.96);
font-size: 13px;
font-weight: 780;
line-height: 1;
letter-spacing: 0;
text-shadow: 0 0 0.01px rgba(248, 250, 252, 0.8);
}
.product-showcase__metrics em {
display: inline-block;
overflow-wrap: anywhere;
color: rgba(191, 219, 254, 0.78);
font-size: 10px;
font-style: normal;
font-weight: 620;
line-height: 1;
letter-spacing: 0.01em;
}
.product-showcase__shot img {
width: 100%;
height: 100%;
object-fit: contain;
object-position: center;
display: block;
user-select: none;
-webkit-user-drag: none;
pointer-events: none;
transition: transform 0.38s cubic-bezier(0.16, 1, 0.3, 1);
transform: scale(1);
}
.product-showcase__card:hover .product-showcase__shot img,
.product-showcase__card.is-selected .product-showcase__shot img {
transform: scale(1);
}
.growth-system {
position: relative;
display: grid;
grid-template-columns: minmax(320px, 0.86fr) minmax(0, 1.34fr);
grid-template-areas:
"intro capabilities"
"stats capabilities";
gap: clamp(18px, 2vw, 26px);
align-items: stretch;
perspective: 1100px;
}
.growth-system::before {
display: none;
}
.growth-intro {
grid-area: intro;
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: space-between;
--tilt-x: 0deg;
--tilt-y: 0deg;
min-height: 382px;
max-width: none;
padding: clamp(30px, 3.4vw, 46px);
border: 1px solid rgba(255, 255, 255, 0.09);
--glass-surface:
radial-gradient(circle at 86% 18%, rgba(14, 165, 233, 0.1), transparent 34%),
linear-gradient(145deg, rgba(14, 165, 233, 0.08), rgba(255, 255, 255, 0.012) 56%),
rgba(255, 255, 255, 0.006);
--glass-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.06),
0 24px 72px rgba(0, 0, 0, 0.16);
transform-style: preserve-3d;
transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.35s ease, box-shadow 0.35s ease;
}
.growth-intro::after {
display: none;
}
.growth-intro > * {
position: relative;
z-index: 1;
}
.growth-intro__copy {
max-width: none;
}
.growth-stats {
grid-area: stats;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: clamp(12px, 1.3vw, 16px);
border: 0;
}
.growth-stat {
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: center;
gap: 8px;
min-height: 132px;
padding: 20px 22px;
border: 1px solid rgba(255, 255, 255, 0.085);
--glass-surface:
linear-gradient(150deg, rgba(14, 165, 233, 0.07), rgba(255, 255, 255, 0.008) 52%),
rgba(255, 255, 255, 0.006);
transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.32s ease, box-shadow 0.32s ease;
}
.growth-stat::before {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 2px;
height: auto;
background: linear-gradient(to bottom, rgba(125, 211, 252, 0.85), transparent);
opacity: 0.7;
}
.growth-stat::after {
content: "";
position: absolute;
right: 18px;
top: 18px;
width: 54px;
height: 2px;
border-radius: 999px;
background: linear-gradient(90deg, rgba(125, 211, 252, 0.48), transparent);
opacity: 0.55;
}
.growth-stat:hover {
transform: translateY(-4px);
border-color: rgba(125, 211, 252, 0.24);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.08),
0 22px 58px rgba(14, 165, 233, 0.08),
0 16px 46px rgba(0, 0, 0, 0.14);
}
.growth-capabilities {
grid-area: capabilities;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: clamp(16px, 1.8vw, 22px);
align-items: stretch;
}
.growth-capability {
--accent: 14, 165, 233;
--tilt-x: 0deg;
--tilt-y: 0deg;
--spot-x: 78%;
--spot-y: 22%;
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
align-items: stretch;
justify-content: space-between;
gap: 24px;
min-height: 0;
padding: clamp(24px, 2.4vw, 34px) !important;
border: 1px solid rgba(255, 255, 255, 0.09);
--glass-surface:
radial-gradient(circle at var(--spot-x) var(--spot-y), rgba(var(--accent), 0.105), transparent 30%),
linear-gradient(135deg, rgba(255, 255, 255, 0.038), rgba(255, 255, 255, 0.008)),
rgba(255, 255, 255, 0.006);
transform: rotateX(var(--tilt-y)) rotateY(var(--tilt-x)) translateZ(0);
transform-style: preserve-3d;
transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.35s ease, box-shadow 0.35s ease;
}
.growth-capability::before {
content: "";
position: absolute;
inset: -1px;
pointer-events: none;
background:
linear-gradient(110deg, transparent 0 34%, rgba(125, 211, 252, 0.2) 43%, rgba(14, 165, 233, 0.13) 49%, transparent 60%),
radial-gradient(circle at var(--spot-x) var(--spot-y), rgba(var(--accent), 0.18), transparent 30%);
opacity: 0;
transition: opacity 0.32s ease;
}
.growth-capability::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 3px;
background: linear-gradient(to right, rgba(125, 211, 252, 0.75), transparent);
pointer-events: none;
}
.growth-capability:hover {
transform: rotateX(var(--tilt-y)) rotateY(var(--tilt-x)) translateY(-8px);
border-color: rgba(125, 211, 252, 0.32);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.16),
0 30px 88px rgba(0, 0, 0, 0.24),
0 0 34px rgba(14, 165, 233, 0.1);
}
.growth-capability:hover::before {
opacity: 1;
}
.growth-capability > * {
position: relative;
z-index: 1;
}
.growth-capability:nth-child(2) {
grid-column: auto;
margin-top: 0;
}
.growth-capability:nth-child(3) {
grid-column: auto;
min-height: 0;
margin-top: 0;
}
.growth-capability:first-child {
grid-column: auto;
min-height: 0;
}
.growth-capability:nth-child(4) {
grid-column: auto;
min-height: 0;
margin-top: 0;
}
.growth-capability__top {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
flex: 1 1 auto;
}
.growth-capability__icon {
display: grid;
place-items: center;
width: 48px;
height: 48px;
min-width: 48px;
aspect-ratio: 1 / 1;
flex: 0 0 48px;
border-radius: 999px;
border: 1px solid rgba(var(--accent), 0.28);
background: rgba(var(--accent), 0.085);
color: rgba(226, 242, 255, 0.92);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.growth-capability__icon svg {
width: 24px;
height: 24px;
}
.growth-capability__meter {
flex: 0 0 auto;
width: 100%;
height: 5px;
overflow: hidden;
border-radius: 999px;
background: rgba(255, 255, 255, 0.07);
}
.growth-capability__meter span {
display: block;
width: var(--value);
height: 100%;
border-radius: inherit;
background: linear-gradient(90deg, rgba(var(--accent), 0.84), rgba(125, 211, 252, 0.28));
transition: width 0.38s ease;
}
#contact {
isolation: isolate;
background: #0B0C10 !important;
color: rgb(203 213 225);
overflow: visible !important;
}
#contact > .max-w-7xl {
position: relative;
z-index: 2;
overflow: visible;
}
.contact-bg {
position: absolute;
inset: 0;
z-index: 0;
overflow: hidden;
pointer-events: none;
}
.contact-bg__glow {
position: absolute;
width: min(760px, 70vw);
height: min(760px, 70vw);
border-radius: 999px;
filter: blur(76px);
opacity: 0.38;
}
.contact-bg__glow--left {
top: -28%;
left: -16%;
background: radial-gradient(circle at center, rgba(148, 163, 184, 0.12), transparent 62%);
}
.contact-bg__glow--right {
right: -22%;
bottom: -20%;
background: radial-gradient(circle at center, rgba(14, 165, 233, 0.1), transparent 64%);
}
.contact-bg__grid {
position: absolute;
inset: 0;
background-image:
linear-gradient(to right, rgba(255, 255, 255, 0.035) 1px, transparent 1px),
linear-gradient(to bottom, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
background-size: 40px 40px;
mask-image: radial-gradient(circle at center, black 42%, transparent 84%);
-webkit-mask-image: radial-gradient(circle at center, black 42%, transparent 84%);
opacity: 0.68;
}
.contact-panel {
position: relative;
}
.contact-panel__layout {
display: grid;
grid-template-columns: minmax(0, 0.92fr) minmax(430px, 1.08fr);
column-gap: 72px;
row-gap: clamp(28px, 3.5vw, 48px);
align-items: center;
min-height: 610px;
}
.contact-panel__copy .section-kicker {
width: fit-content;
padding: 7px 13px;
border-radius: 999px;
border: 1px solid rgba(99, 102, 241, 0.22);
background: rgba(99, 102, 241, 0.1);
box-shadow: 0 0 24px rgba(99, 102, 241, 0.12);
}
.contact-panel__copy h2 {
max-width: 700px;
font-size: 4.5rem;
line-height: 1.04;
letter-spacing: 0;
}
.contact-panel__aside {
position: relative;
display: grid;
place-items: center;
min-height: 620px;
overflow: visible;
padding-right: clamp(18px, 3vw, 46px);
}
.contact-globe {
position: relative;
width: min(560px, 100%);
aspect-ratio: 1;
display: grid;
place-items: center;
contain: layout style;
filter: drop-shadow(0 26px 58px rgba(14, 165, 233, 0.1));
}
.contact-globe::before,
.contact-globe::after {
content: "";
position: absolute;
border-radius: 999px;
pointer-events: none;
}
.contact-globe::before {
inset: 12%;
background:
radial-gradient(circle at center, rgba(14, 165, 233, 0.16), transparent 48%),
radial-gradient(circle at center, rgba(99, 102, 241, 0.1), transparent 66%);
filter: blur(16px);
}
.contact-globe::after {
inset: 19%;
border: 1px solid rgba(125, 211, 252, 0.12);
box-shadow:
0 0 58px rgba(14, 165, 233, 0.12),
inset 0 0 56px rgba(99, 102, 241, 0.1);
}
.contact-globe__canvas {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
z-index: 1;
}
.contact-globe__label {
position: absolute;
z-index: 2;
display: inline-flex;
align-items: center;
gap: 8px;
max-width: min(220px, 42%);
padding: 9px 14px;
border: 1px solid rgba(148, 163, 184, 0.26);
border-radius: 999px;
background: rgba(15, 23, 42, 0.78);
box-shadow: 0 18px 44px rgba(0, 0, 0, 0.32);
backdrop-filter: blur(14px) saturate(124%);
-webkit-backdrop-filter: blur(14px) saturate(124%);
color: rgb(226 232 240);
font-size: 0.75rem;
font-weight: 500;
white-space: nowrap;
animation: contactLabelFloat 5.6s ease-in-out infinite;
animation-delay: var(--label-delay, 0s);
}
.contact-globe__label .icon {
color: rgb(125 211 252);
flex: 0 0 auto;
}
.contact-globe__label--top-left {
top: 14%;
left: 3%;
}
.contact-globe__label--top-right {
top: 26%;
right: -1%;
}
.contact-globe__label--bottom-left {
bottom: 22%;
left: 1%;
}
.contact-globe__label--bottom-right {
right: 5%;
bottom: 12%;
}
.contact-panel__details {
position: relative;
z-index: 3;
grid-column: 1 / -1;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(280px, 0.9fr);
gap: 14px;
width: 100%;
justify-self: stretch;
margin-top: 0;
overflow: visible;
padding: clamp(12px, 1.4vw, 18px);
border: 1px solid rgba(148, 163, 184, 0.13);
border-radius: 28px;
background:
radial-gradient(circle at 14% 0%, rgba(14, 165, 233, 0.08), transparent 34%),
linear-gradient(180deg, rgba(255, 255, 255, 0.026), rgba(255, 255, 255, 0.01)),
rgba(255, 255, 255, 0.012);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.06),
0 24px 72px rgba(0, 0, 0, 0.18);
backdrop-filter: blur(12px) saturate(112%);
-webkit-backdrop-filter: blur(12px) saturate(112%);
}
.contact-panel__details > * {
margin-top: 0 !important;
}
.contact-panel__item {
position: relative;
display: flex;
flex-direction: column;
justify-content: flex-start;
gap: 18px;
min-height: 126px;
padding: clamp(20px, 2vw, 26px);
border: 1px solid rgba(255, 255, 255, 0.075);
border-radius: 22px;
background:
radial-gradient(circle at 88% 12%, rgba(125, 211, 252, 0.085), transparent 34%),
linear-gradient(145deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01)),
rgba(11, 12, 16, 0.54);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055);
overflow: hidden;
transition: background 0.28s ease, border-color 0.28s ease, transform 0.28s ease, box-shadow 0.28s ease;
}
.contact-panel__item::before {
content: "";
position: absolute;
left: clamp(20px, 2.1vw, 28px);
bottom: 18px;
width: 42px;
height: 2px;
border-radius: 999px;
background: linear-gradient(90deg, rgba(125, 211, 252, 0.72), transparent);
opacity: 0.82;
}
.contact-panel__item > div:first-child {
color: rgba(125, 211, 252, 0.82) !important;
letter-spacing: 0.18em !important;
margin-bottom: 0 !important;
}
.contact-panel__item a,
.contact-panel__item > div:nth-child(2) {
font-size: clamp(1rem, 1.08vw, 1.12rem);
line-height: 1.35;
word-break: break-word;
}
.contact-panel__item:hover {
background:
radial-gradient(circle at 88% 12%, rgba(14, 165, 233, 0.15), transparent 34%),
linear-gradient(145deg, rgba(14, 165, 233, 0.075), rgba(255, 255, 255, 0.018)),
rgba(11, 12, 16, 0.68);
border-color: rgba(125, 211, 252, 0.22);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.08),
0 14px 34px rgba(14, 165, 233, 0.07);
transform: translateY(-2px);
}
.contact-panel__actions {
display: flex;
flex-direction: column !important;
align-items: center;
justify-content: center;
gap: 12px;
min-height: 126px;
padding: clamp(18px, 2vw, 24px) !important;
background:
radial-gradient(circle at 50% 0%, rgba(125, 211, 252, 0.16), transparent 48%),
linear-gradient(145deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.015)),
rgba(255, 255, 255, 0.02);
border: 1px solid rgba(125, 211, 252, 0.16);
border-radius: 22px;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.08),
0 18px 46px rgba(14, 165, 233, 0.08);
}
.contact-panel__actions a:first-child {
width: 100%;
box-shadow: 0 12px 28px rgba(255, 255, 255, 0.1);
}
.contact-panel__actions a:first-child:hover {
transform: translateY(-2px);
box-shadow: 0 16px 34px rgba(255, 255, 255, 0.18);
}
.contact-panel__actions a:last-child {
width: 100%;
background: rgba(255, 255, 255, 0.045);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}
@keyframes contactLabelFloat {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(-8px);
}
}
@media (prefers-reduced-motion: reduce) {
.contact-globe__label {
animation: none;
}
}
@media (max-width: 1023px) {
.contact-panel__layout {
grid-template-columns: 1fr;
gap: 44px;
min-height: auto;
}
.contact-panel__copy h2 {
max-width: none;
font-size: 3.5rem;
}
.contact-panel__aside {
min-height: auto;
}
.contact-panel__details {
grid-template-columns: repeat(2, minmax(0, 1fr));
width: 100%;
justify-self: stretch;
margin-top: 0;
gap: 12px;
padding: 12px;
}
.contact-panel__item {
min-height: 124px;
padding: 22px;
}
.contact-panel__item:nth-child(3) {
grid-column: auto;
min-height: 118px;
}
.contact-panel__actions {
grid-column: auto;
justify-content: center;
}
}
@media (max-width: 767px) {
.contact-bg__glow {
width: 92vw;
height: 92vw;
filter: blur(74px);
}
.contact-bg__grid {
background-size: 34px 34px;
opacity: 0.54;
}
.contact-panel__layout {
gap: 32px;
}
.contact-panel__copy h2 {
font-size: 2.65rem;
line-height: 1.08;
}
.contact-globe {
width: min(430px, 100%);
}
.contact-globe__label {
padding: 7px 10px;
font-size: 0.68rem;
}
.contact-globe__label--top-left {
left: 0;
}
.contact-globe__label--top-right {
right: 0;
}
.contact-globe__label--bottom-left {
left: 0;
}
.contact-globe__label--bottom-right {
right: 0;
}
.contact-panel__details {
width: 100%;
margin-top: 0;
border-radius: 18px;
grid-template-columns: 1fr;
gap: 10px;
padding: 10px;
}
.contact-panel__item,
.contact-panel__item:nth-child(3) {
grid-column: auto;
min-height: 108px;
padding: 20px;
}
.contact-panel__actions {
flex-direction: column;
align-items: stretch;
padding: 18px;
min-height: 0;
}
.contact-panel__actions a {
width: 100%;
}
}
.approach-intro,
.approach-loop,
.approach-card,
.product-showcase__card,
.growth-intro,
.growth-stat,
.growth-capability {
border-color: var(--glass-border, rgb(255 255 255 / 8.5%));
background: var(--glass-surface,
linear-gradient(180deg, rgb(255 255 255 / 3%), rgb(255 255 255 / 0.8%)),
rgb(255 255 255 / 0.8%));
box-shadow: var(--glass-shadow,
inset 0 1px 0 rgb(255 255 255 / 5%),
inset 0 -1px 0 rgb(255 255 255 / 1.8%),
0 16px 46px rgb(0 0 0 / 10%));
backdrop-filter: var(--glass-filter, blur(4px) saturate(108%));
-webkit-backdrop-filter: var(--glass-filter, blur(4px) saturate(108%));
}
.dark-section-stage .product-showcase__card {
--glass-border: rgb(255 255 255 / 14%);
--glass-surface:
linear-gradient(180deg, rgb(255 255 255 / 7.5%), rgb(255 255 255 / 5%)),
rgb(10 16 28 / 62%);
--glass-shadow:
inset 0 1px 0 rgb(255 255 255 / 10%),
inset 0 -1px 0 rgb(255 255 255 / 4%),
0 18px 52px rgb(0 0 0 / 22%);
--glass-filter: blur(8px) saturate(116%);
}
.dark-section-stage .growth-intro,
.dark-section-stage .growth-stat,
.dark-section-stage .growth-capability {
--glass-border: rgb(255 255 255 / 8%);
--glass-surface:
linear-gradient(180deg, rgb(255 255 255 / 4.2%), rgb(255 255 255 / 1.2%)),
rgb(255 255 255 / 1.4%);
--glass-shadow:
inset 0 1px 0 rgb(255 255 255 / 6%),
inset 0 -1px 0 rgb(255 255 255 / 1.6%),
0 14px 42px rgb(0 0 0 / 7%);
--glass-filter: blur(8px) saturate(112%);
}
.approach-loop::after,
.growth-intro::after {
opacity: 0.22;
}
.approach-card:hover::before {
opacity: 0.38;
}
.product-showcase__card::before {
opacity: 0.18;
}
.product-showcase__card::after {
border-color: rgb(255 255 255 / 4.5%);
}
.product-showcase__card.is-center {
border-color: rgb(96 165 250 / 32%);
box-shadow:
inset 0 1px 0 rgb(255 255 255 / 7%),
0 28px 76px rgb(37 99 235 / 16%),
0 18px 58px rgb(0 0 0 / 14%);
}
.product-showcase__card.is-selected {
border-color: rgb(147 197 253 / 66%);
box-shadow:
inset 0 1px 0 rgb(255 255 255 / 8%),
0 34px 96px rgb(37 99 235 / 26%),
0 18px 70px rgb(96 165 250 / 12%),
0 22px 68px rgb(0 0 0 / 18%),
0 0 0 1px rgb(147 197 253 / 22%);
}
.product-showcase__card.is-selected::after {
border-color: rgb(147 197 253 / 36%);
}
.growth-stat::before {
opacity: 0.48;
}
.growth-capability::after {
background: linear-gradient(to right, rgb(125 211 252 / 42%), transparent);
}
.dark-section-stage .growth-stat::before,
.dark-section-stage .growth-stat::after,
.dark-section-stage .growth-capability::after {
opacity: 0.18;
}
.dark-section-stage .growth-capability::after {
background: linear-gradient(to right, rgb(125 211 252 / 18%), transparent);
}
@media (max-width: 1023px) {
.approach-layout::before {
display: none;
}
.approach-intro,
.approach-loop,
.approach-cards {
grid-column: 1 / -1;
grid-row: auto;
}
.approach-loop {
min-height: auto;
}
.approach-cards {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.growth-system {
grid-template-columns: 1fr;
grid-template-areas:
"intro"
"stats"
"capabilities";
}
.growth-intro,
.growth-stats,
.growth-capabilities {
grid-column: 1;
}
.growth-intro {
min-height: auto;
}
.growth-stats {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.growth-capabilities {
grid-template-columns: 1fr;
}
.growth-capability:first-child,
.growth-capability:nth-child(2),
.growth-capability:nth-child(3),
.growth-capability:nth-child(4) {
grid-column: auto;
margin-top: 0;
min-height: 154px;
}
}
@media (max-width: 767px) {
.hero-grid {
--grid-cell-x: 46px;
--grid-cell-y: 92px;
--grid-link-drift: 12px;
opacity: 0.29;
}
.hero-title--layered {
font-size: clamp(40px, 11.2vw, 62px);
line-height: 0.92;
}
.hero-benefits {
display: flex;
flex-wrap: wrap;
max-width: min(100%, 360px);
border-radius: 22px;
}
.hero-benefits__item {
flex: 1 1 142px;
justify-content: center;
padding-inline: 10px;
}
.product-showcase {
margin-inline: -24px;
margin-top: -22px;
width: auto;
perspective: none;
}
.product-showcase__track {
display: flex;
gap: 6px;
height: auto;
overflow-x: auto;
overscroll-behavior-x: contain;
padding: 40px 24px 84px;
scroll-padding-inline: 24px;
scrollbar-width: none;
perspective: none;
}
.product-showcase__track::-webkit-scrollbar {
display: none;
}
.product-showcase__card {
position: relative;
left: auto;
top: auto;
flex: 0 0 min(76vw, 292px);
width: auto;
min-height: auto;
opacity: 1;
transform: none;
scroll-snap-align: center;
}
.product-showcase__content {
padding: 15px 15px 13px;
gap: 11px;
}
.product-showcase__head h3 {
font-size: 20px;
}
.product-showcase__content p {
min-height: auto;
font-size: 12px;
}
.product-showcase__metrics {
margin-top: 18px;
gap: 6px;
}
.product-showcase__metrics span {
min-height: 29px;
padding: 6px 9px;
}
.product-showcase__metrics strong {
font-size: 12px;
}
.product-showcase__metrics em {
font-size: 9px;
}
.approach-layout {
grid-template-columns: 1fr;
gap: 18px;
}
.approach-layout::before {
display: none;
}
.approach-intro {
grid-column: 1;
min-height: auto;
text-align: left;
}
.approach-intro .section-kicker {
margin-inline: 0;
justify-content: flex-start;
}
.approach-loop {
grid-column: 1;
grid-template-columns: 1fr;
min-height: auto;
}
.approach-orbit {
width: min(260px, 100%);
}
.approach-cards {
grid-column: 1;
grid-template-columns: 1fr;
padding-top: 0;
}
.approach-card {
--card-offset: 0px !important;
grid-template-columns: 54px minmax(0, 1fr);
gap: 16px;
min-height: auto;
grid-column: auto !important;
transform: translateY(0) !important;
}
.approach-card__icon {
width: 54px;
height: 54px;
border-radius: 15px;
}
.approach-card__icon::after {
border-radius: 14px;
}
.approach-card__icon svg {
width: 25px;
height: 25px;
}
.approach-card:hover {
transform: translateY(-3px);
}
.growth-system {
grid-template-columns: 1fr;
grid-template-areas:
"intro"
"stats"
"capabilities";
gap: 18px;
}
.growth-system::before {
display: none;
}
.growth-intro {
grid-column: 1;
min-height: auto;
padding: 28px;
}
.growth-stats {
grid-column: 1;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.growth-stat {
min-height: auto;
padding: 18px;
}
.growth-capabilities {
grid-column: 1;
grid-template-columns: 1fr;
}
.growth-capability {
grid-column: 1 !important;
flex-direction: column;
align-items: stretch;
gap: 18px;
min-height: auto;
padding: 20px !important;
margin-top: 0 !important;
transform: none !important;
}
.growth-capability__meter {
flex-basis: auto;
width: 100%;
}
.growth-capability:hover {
transform: translateY(-3px);
}
}
/* Approach discipline matrix */
.approach {
padding-block: clamp(100px, 10vw, 160px);
background:
radial-gradient(ellipse at 64% 18%, rgba(14, 165, 233, 0.14), transparent 34%),
radial-gradient(ellipse at 34% 58%, rgba(59, 130, 246, 0.11), transparent 38%),
#0B0C10;
}
.approach::before {
display: block;
content: "";
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background:
linear-gradient(104deg, transparent 0 24%, rgba(59, 130, 246, 0.12) 42%, rgba(14, 165, 233, 0.07) 56%, transparent 78%),
radial-gradient(circle, rgba(255, 255, 255, 0.045) 0 0.8px, transparent 1.25px);
background-size: 100% 100%, 5px 5px;
mix-blend-mode: screen;
opacity: 0.48;
}
.approach::after {
display: block;
content: "";
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background:
linear-gradient(180deg, #0B0C10 0%, transparent 18%, transparent 80%, #0B0C10 100%),
linear-gradient(90deg, #0B0C10 0%, rgba(11, 12, 16, 0.25) 14%, transparent 50%, rgba(11, 12, 16, 0.3) 86%, #0B0C10 100%);
}
.approach-layout {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: clamp(18px, 1.8vw, 28px);
}
.approach-layout::before {
display: none;
}
.approach-intro {
grid-column: 1 / -1;
grid-row: auto;
min-height: auto;
padding: 0 !important;
margin-bottom: clamp(24px, 4vw, 50px);
border: 0;
background: transparent;
box-shadow: none;
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
.approach-intro::after {
display: none;
}
.approach-intro .section-kicker {
margin-bottom: clamp(24px, 3vw, 38px);
color: rgba(226, 232, 240, 0.72);
}
.approach-intro .section-kicker::before {
width: 54px;
background: rgba(226, 232, 240, 0.74);
}
.approach-intro h2 {
max-width: 980px;
margin-bottom: clamp(22px, 3vw, 34px);
font-size: clamp(52px, 6.6vw, 104px);
line-height: 0.98;
letter-spacing: 0;
}
.approach-intro p {
max-width: 760px;
font-size: clamp(16px, 1.4vw, 20px);
color: rgba(203, 213, 225, 0.74);
}
.approach-cards {
display: contents;
}
.approach-card,
.approach-loop {
grid-column: auto;
grid-row: auto;
position: relative;
min-height: clamp(330px, 28vw, 410px);
padding: clamp(30px, 3vw, 46px) !important;
border-radius: 4px !important;
border: 1px solid rgba(255, 255, 255, 0.1);
--glass-surface:
radial-gradient(circle at var(--spot-x, 74%) var(--spot-y, 18%), rgba(var(--accent, 59, 130, 246), 0.12), transparent 30%),
linear-gradient(145deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.012) 54%),
rgba(255, 255, 255, 0.006);
--glass-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.08),
0 26px 80px rgba(0, 0, 0, 0.18);
backdrop-filter: blur(8px) saturate(112%);
-webkit-backdrop-filter: blur(8px) saturate(112%);
transform: rotateX(var(--tilt-y, 0deg)) rotateY(var(--tilt-x, 0deg)) translateZ(0);
transform-style: preserve-3d;
transition:
transform 0.42s cubic-bezier(0.16, 1, 0.3, 1),
border-color 0.36s ease,
box-shadow 0.36s ease,
background 0.36s ease;
}
.approach-card {
display: flex;
flex-direction: column;
justify-content: space-between;
gap: clamp(24px, 3vw, 44px);
}
.approach-loop {
--accent: 14, 165, 233;
display: grid;
grid-template-columns: minmax(0, 1fr);
align-content: space-between;
gap: 22px;
overflow: hidden;
}
.approach-card::before,
.approach-loop::after {
background:
linear-gradient(110deg, transparent 0 34%, rgba(255, 255, 255, 0.09) 45%, transparent 58%),
radial-gradient(circle at var(--spot-x, 76%) var(--spot-y, 18%), rgba(var(--accent), 0.2), transparent 32%);
opacity: 0.18;
}
.approach-card::after {
content: attr(data-phase);
position: absolute;
top: clamp(20px, 2.2vw, 32px);
right: clamp(24px, 3vw, 40px);
z-index: 0;
font-size: clamp(70px, 8vw, 118px);
font-weight: 700;
line-height: 0.85;
letter-spacing: 0;
color: transparent;
-webkit-text-stroke: 1px rgba(255, 255, 255, 0.08);
text-stroke: 1px rgba(255, 255, 255, 0.08);
}
.approach-card > * ,
.approach-loop > * {
position: relative;
z-index: 2;
}
.approach-card:hover,
.approach-loop:hover {
border-color: rgba(var(--accent, 59, 130, 246), 0.42);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.14),
0 30px 96px rgba(0, 0, 0, 0.26),
0 0 42px rgba(var(--accent, 59, 130, 246), 0.12);
}
.approach-card:hover::before,
.approach-loop:hover::after {
opacity: 0.36;
}
.approach-card__icon {
width: 62px;
height: 62px;
border-radius: 3px;
border-color: rgba(var(--accent), 0.36);
background:
linear-gradient(145deg, rgba(var(--accent), 0.16), rgba(255, 255, 255, 0.025)),
rgba(4, 8, 15, 0.34);
}
.approach-card__icon::after {
border-radius: 2px;
}
.approach-card__icon svg {
width: 28px;
height: 28px;
}
.approach-card h3,
.approach-loop h3 {
opacity: 0;
transform: translateY(18px);
filter: blur(8px);
transition:
opacity 0.72s cubic-bezier(0.16, 1, 0.3, 1),
transform 0.72s cubic-bezier(0.16, 1, 0.3, 1),
filter 0.72s cubic-bezier(0.16, 1, 0.3, 1);
transition-delay: 0.18s;
}
.approach-card h3::after,
.approach-loop h3::after {
content: "";
display: block;
width: 0;
height: 1px;
margin-top: 20px;
background: linear-gradient(90deg, rgba(var(--accent, 59, 130, 246), 0.76), transparent);
transition: width 0.72s cubic-bezier(0.16, 1, 0.3, 1);
transition-delay: 0.32s;
}
.approach-card.reveal.active h3,
.approach-loop.reveal.active h3 {
opacity: 1;
transform: translateY(0);
filter: blur(0);
}
.approach-card.reveal.active h3::after,
.approach-loop.reveal.active h3::after {
width: min(120px, 42%);
}
.approach-card__meta,
.approach-loop__stages {
gap: 10px;
margin-top: clamp(24px, 3vw, 34px);
}
.approach-card__meta span,
.approach-loop__stage {
border-radius: 2px;
border-color: rgba(255, 255, 255, 0.11);
background: rgba(255, 255, 255, 0.032);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045);
}
.approach-card__meta span {
position: relative;
padding: 10px 12px 10px 28px;
font-size: 10px;
font-weight: 650;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.approach-card__meta span::before {
content: "";
position: absolute;
left: 10px;
top: 50%;
width: 8px;
height: 8px;
border: 1px solid rgba(var(--accent, 59, 130, 246), 0.72);
transform: translateY(-50%);
box-shadow: 0 0 12px rgba(var(--accent, 59, 130, 246), 0.24);
}
.approach-loop__copy {
max-width: 580px;
align-self: auto;
}
.approach-orbit {
position: absolute;
right: clamp(26px, 3vw, 44px);
top: clamp(36px, 4vw, 62px);
width: clamp(128px, 14vw, 190px);
opacity: 0.46;
}
.approach-loop__stages {
grid-template-columns: repeat(3, minmax(0, 1fr));
margin-top: 0;
}
.approach-loop__stage {
padding: 14px 15px;
}
.approach-loop__timeline {
gap: 9px;
}
.approach-loop__item {
border-radius: 2px;
background: rgba(255, 255, 255, 0.026);
}
@media (max-width: 1023px) {
.approach-layout {
grid-template-columns: 1fr;
}
.approach-cards {
display: grid;
grid-column: 1 / -1;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 18px;
}
.approach-card,
.approach-loop {
grid-column: auto;
min-height: auto;
}
.approach-loop {
grid-column: 1 / -1;
}
}
@media (max-width: 767px) {
.approach {
padding-block: 82px;
}
.approach-intro h2 {
font-size: clamp(42px, 13vw, 62px);
}
.approach-cards {
grid-template-columns: 1fr;
}
.approach-card,
.approach-loop {
grid-column: 1 / -1 !important;
padding: 26px !important;
transform: none !important;
}
.approach-loop {
grid-template-columns: 1fr;
}
.approach-orbit {
display: none;
}
.approach-loop__stages {
grid-template-columns: 1fr;
}
}
/* Approach layout refinement */
.approach-layout {
grid-template-columns: repeat(12, minmax(0, 1fr));
gap: clamp(14px, 1.4vw, 22px);
align-items: stretch;
}
.approach-intro {
display: grid;
grid-template-columns: minmax(0, 0.95fr) minmax(280px, 430px);
gap: clamp(24px, 4vw, 70px);
align-items: end;
margin-bottom: clamp(18px, 3vw, 36px);
}
.approach-intro h2 {
max-width: 850px;
margin-bottom: 0;
font-size: clamp(48px, 5.8vw, 92px);
line-height: 0.94;
}
.approach-intro p {
justify-self: end;
max-width: 430px;
margin-bottom: 0;
font-size: clamp(15px, 1.15vw, 18px);
}
.approach-cards {
display: contents;
}
.approach-card,
.approach-loop {
border-radius: 6px !important;
min-height: auto;
}
.approach-card {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: auto minmax(0, 1fr) auto;
align-content: stretch;
gap: clamp(18px, 2vw, 30px);
padding: clamp(28px, 2.7vw, 42px) !important;
}
.approach-cards .approach-card:first-child {
grid-column: 1 / span 5;
grid-row: 2 / span 2;
min-height: clamp(510px, 38vw, 620px);
}
.approach-cards .approach-card:nth-child(2) {
grid-column: 6 / span 4;
grid-row: 2;
min-height: clamp(250px, 19vw, 300px);
}
.approach-cards .approach-card:nth-child(3) {
grid-column: 10 / -1;
grid-row: 2;
min-height: clamp(250px, 19vw, 300px);
}
.approach-loop {
grid-column: 6 / -1;
grid-row: 3;
min-height: clamp(238px, 18vw, 300px);
display: grid;
grid-template-columns: minmax(0, 0.96fr) minmax(260px, 1.04fr);
align-items: end;
gap: clamp(18px, 2vw, 26px);
padding: clamp(28px, 2.7vw, 42px) !important;
}
.approach-card__body {
display: flex;
flex-direction: column;
min-height: 0;
}
.approach-card__phase,
.approach-loop__copy > div:first-child {
display: inline-flex;
align-items: center;
gap: 10px;
width: fit-content;
padding: 7px 10px;
border: 1px solid rgba(var(--accent, 59, 130, 246), 0.22);
background: rgba(var(--accent, 59, 130, 246), 0.055);
border-radius: 2px;
color: rgba(226, 242, 255, 0.84) !important;
}
.approach-card__phase::before,
.approach-loop__copy > div:first-child::before {
content: "";
width: 6px;
height: 6px;
border-radius: 50%;
background: rgb(var(--accent, 59, 130, 246));
box-shadow: 0 0 16px rgba(var(--accent, 59, 130, 246), 0.54);
}
.approach-card h3 {
max-width: 540px;
font-size: clamp(27px, 2.5vw, 42px);
line-height: 1.02;
letter-spacing: 0;
}
.approach-cards .approach-card:nth-child(2) h3,
.approach-cards .approach-card:nth-child(3) h3 {
font-size: clamp(24px, 2vw, 32px);
}
.approach-card p,
.approach-loop p {
max-width: 520px;
font-size: 14.5px;
line-height: 1.68;
color: rgba(203, 213, 225, 0.74);
}
.approach-cards .approach-card:first-child p {
font-size: 15.5px;
}
.approach-card__meta {
margin-top: auto;
padding-top: clamp(22px, 2.4vw, 34px);
}
.approach-loop__copy {
grid-column: 1;
align-self: end;
max-width: 430px;
}
.approach-loop h3 {
font-size: clamp(25px, 2.3vw, 38px);
line-height: 1.04;
}
.approach-orbit {
right: clamp(20px, 2vw, 34px);
top: clamp(18px, 2vw, 30px);
width: clamp(112px, 12vw, 164px);
opacity: 0.3;
}
.approach-loop__stages {
grid-column: 2;
grid-row: 1;
align-self: end;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
margin-top: 0;
}
.approach-loop__stage {
padding: 12px;
}
.approach-loop__stage span {
margin-bottom: 8px;
font-size: 10px;
}
.approach-loop__timeline {
grid-column: 1 / -1;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
}
.approach-loop__item {
grid-template-columns: 1fr;
gap: 8px;
padding: 12px;
}
.approach-loop__item strong {
margin-bottom: 7px;
}
@media (max-width: 1180px) {
.approach-cards .approach-card:first-child {
grid-column: 1 / span 6;
}
.approach-cards .approach-card:nth-child(2) {
grid-column: 7 / -1;
}
.approach-cards .approach-card:nth-child(3) {
grid-column: 7 / -1;
grid-row: 3;
}
.approach-loop {
grid-column: 1 / -1;
grid-row: 4;
}
}
@media (max-width: 1023px) {
.approach-intro {
grid-template-columns: 1fr;
gap: 18px;
}
.approach-intro p {
justify-self: start;
}
.approach-cards {
display: grid;
grid-column: 1 / -1;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 18px;
}
.approach-cards .approach-card:first-child,
.approach-cards .approach-card:nth-child(2),
.approach-cards .approach-card:nth-child(3) {
grid-column: auto;
grid-row: auto;
min-height: 300px;
}
.approach-loop {
grid-column: 1 / -1;
grid-row: auto;
grid-template-columns: 1fr;
}
.approach-loop__copy,
.approach-loop__stages,
.approach-loop__timeline {
grid-column: 1;
grid-row: auto;
}
}
@media (max-width: 767px) {
.approach-cards {
grid-template-columns: 1fr;
}
.approach-cards .approach-card:first-child,
.approach-cards .approach-card:nth-child(2),
.approach-cards .approach-card:nth-child(3),
.approach-loop {
min-height: auto;
}
.approach-card h3,
.approach-cards .approach-card:nth-child(2) h3,
.approach-cards .approach-card:nth-child(3) h3,
.approach-loop h3 {
font-size: clamp(25px, 8vw, 34px);
}
.approach-loop__timeline,
.approach-loop__stages {
grid-template-columns: 1fr;
}
}
/* Approach matrix restored */
.approach {
padding-block: clamp(96px, 10vw, 158px);
background:
radial-gradient(ellipse at 70% 12%, rgba(59, 130, 246, 0.14), transparent 32%),
radial-gradient(ellipse at 30% 62%, rgba(14, 165, 233, 0.1), transparent 36%),
#0B0C10;
}
.approach::before {
display: block;
content: "";
position: absolute;
inset: -8% -18%;
z-index: 0;
pointer-events: none;
background:
linear-gradient(104deg, transparent 0 22%, rgba(37, 99, 235, 0.16) 42%, rgba(14, 165, 233, 0.08) 56%, transparent 76%),
linear-gradient(15deg, transparent 0 44%, rgba(125, 211, 252, 0.08) 50%, transparent 58%),
radial-gradient(circle, rgba(255, 255, 255, 0.042) 0 0.8px, transparent 1.25px);
background-size: 100% 100%, 100% 100%, 5px 5px;
mix-blend-mode: screen;
opacity: 0.44;
}
.approach::after {
display: block;
content: "";
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background:
linear-gradient(180deg, #0B0C10 0%, transparent 16%, transparent 83%, #0B0C10 100%),
linear-gradient(90deg, #0B0C10 0%, rgba(11, 12, 16, 0.34) 13%, transparent 50%, rgba(11, 12, 16, 0.34) 87%, #0B0C10 100%);
}
.approach-layout {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: clamp(18px, 1.6vw, 26px);
align-items: stretch;
perspective: 1400px;
}
.approach-layout::before {
display: none;
}
.approach-intro {
grid-column: 1 / -1;
display: block;
max-width: 760px;
min-height: auto;
margin: 0 0 clamp(48px, 5vw, 64px);
padding: 0 !important;
border: 0;
background: transparent;
box-shadow: none;
backdrop-filter: none;
-webkit-backdrop-filter: none;
overflow: visible;
}
.approach-intro::before,
.approach-intro::after,
.approach-loop::before {
display: none;
}
.approach-intro .section-kicker {
margin-inline: 0;
margin-bottom: clamp(22px, 2.8vw, 34px);
justify-content: flex-start;
color: rgba(226, 232, 240, 0.76);
}
.approach-intro .section-kicker::before {
width: 54px;
background: rgba(226, 232, 240, 0.7);
}
.approach-title {
max-width: 760px;
font-family: 'Inter', sans-serif;
font-size: clamp(30px, 4vw, 48px) !important;
font-weight: 600;
line-height: 1.08 !important;
letter-spacing: 0 !important;
margin: 0 0 calc(1.5rem + 16px);
}
.approach-title__accent {
display: inline;
font-family: inherit;
font-style: normal;
font-weight: inherit;
color: inherit;
text-shadow: none;
}
.approach-intro p {
max-width: 760px;
margin: 0;
font-size: 1.125rem;
line-height: 1.625;
color: rgba(203, 213, 225, 0.72);
}
.approach-cards {
grid-column: 1 / -1;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(16px, 1.45vw, 22px);
align-items: stretch;
padding: 0;
perspective: inherit;
}
.approach-card,
.approach-cards .approach-card:first-child,
.approach-cards .approach-card:nth-child(2),
.approach-cards .approach-card:nth-child(3),
.approach-cards .approach-loop {
grid-column: auto;
grid-row: auto;
min-height: clamp(360px, 30vw, 460px);
}
.approach-card,
.approach-loop {
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: clamp(22px, 2.4vw, 36px);
padding: clamp(28px, 2.5vw, 42px) !important;
border-radius: 3px !important;
border: 1px solid rgba(255, 255, 255, 0.105);
background:
radial-gradient(circle at var(--spot-x, 74%) var(--spot-y, 18%), rgba(255, 255, 255, 0.045), transparent 34%),
linear-gradient(145deg, rgba(255, 255, 255, 0.052), rgba(255, 255, 255, 0.012) 54%),
rgba(255, 255, 255, 0.006);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.08),
0 26px 82px rgba(0, 0, 0, 0.18);
backdrop-filter: blur(8px) saturate(112%);
-webkit-backdrop-filter: blur(8px) saturate(112%);
transform: rotateX(var(--tilt-y, 0deg)) rotateY(var(--tilt-x, 0deg)) translateZ(0);
transform-style: preserve-3d;
transition:
transform 0.42s cubic-bezier(0.16, 1, 0.3, 1),
border-color 0.36s ease,
box-shadow 0.36s ease,
background 0.36s ease;
}
.approach-card::before,
.approach-loop::after {
content: "";
position: absolute;
inset: -1px;
pointer-events: none;
background:
linear-gradient(110deg, transparent 0 34%, rgba(255, 255, 255, 0.08) 45%, transparent 58%),
radial-gradient(circle at var(--spot-x, 76%) var(--spot-y, 18%), rgba(255, 255, 255, 0.08), transparent 34%);
opacity: 0.18;
transition: opacity 0.35s ease;
}
.approach-card::after {
content: attr(data-phase);
position: absolute;
top: clamp(20px, 2.2vw, 32px);
right: clamp(24px, 3vw, 40px);
z-index: 0;
font-size: clamp(72px, 8vw, 126px);
font-weight: 700;
line-height: 0.85;
letter-spacing: 0;
color: transparent;
-webkit-text-stroke: 1px rgba(255, 255, 255, 0.08);
text-stroke: 1px rgba(255, 255, 255, 0.08);
}
.approach-card > *,
.approach-loop > * {
position: relative;
z-index: 2;
}
.approach-card:hover,
.approach-loop:hover {
border-color: rgba(255, 255, 255, 0.18);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.14),
0 30px 96px rgba(0, 0, 0, 0.26);
}
.approach-card:hover::before,
.approach-loop:hover::after {
opacity: 0.36;
}
.approach-card__top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
}
.approach-card__icon {
width: 58px;
height: 58px;
border-radius: 2px;
border-color: rgba(var(--accent), 0.38);
background:
linear-gradient(145deg, rgba(var(--accent), 0.15), rgba(255, 255, 255, 0.025)),
rgba(4, 8, 15, 0.36);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.18),
inset 0 -14px 24px rgba(0, 0, 0, 0.16),
0 16px 36px rgba(var(--accent), 0.12),
0 0 0 1px rgba(255, 255, 255, 0.035);
}
.approach-card__icon::before {
display: block;
}
.approach-card__icon::after {
border-radius: 1px;
background:
radial-gradient(circle at 30% 18%, rgba(255, 255, 255, 0.18), transparent 26%),
linear-gradient(145deg, rgba(var(--accent), 0.18), rgba(5, 10, 20, 0.72) 54%, rgba(255, 255, 255, 0.035));
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.18),
inset 0 0 26px rgba(var(--accent), 0.1);
}
.approach-card__icon svg {
width: 27px;
height: 27px;
filter: drop-shadow(0 0 10px rgba(var(--accent), 0.42));
}
.approach-card:hover .approach-card__icon {
animation: approachIconDrift 1.45s ease-in-out infinite alternate;
border-color: rgba(var(--accent), 0.52);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.22),
inset 0 -14px 24px rgba(0, 0, 0, 0.16),
0 18px 40px rgba(var(--accent), 0.18),
0 0 30px rgba(var(--accent), 0.16);
}
.approach-card:hover .approach-card__icon::before {
display: block;
}
.approach-card:hover .approach-card__icon svg {
filter: drop-shadow(0 0 15px rgba(var(--accent), 0.62));
}
.approach-card__body {
display: flex;
flex-direction: column;
min-height: 0;
}
.approach-card__phase {
display: inline-flex;
align-items: center;
gap: 10px;
width: fit-content;
margin-bottom: 0 !important;
padding: 7px 10px;
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 2px;
background: rgba(255, 255, 255, 0.035);
color: rgba(226, 242, 255, 0.84) !important;
}
.approach-card__phase::before {
content: "";
width: 6px;
height: 6px;
border-radius: 50%;
background: rgba(226, 232, 240, 0.76);
box-shadow: 0 0 12px rgba(255, 255, 255, 0.16);
}
.approach-card h3,
.approach-loop h3 {
max-width: 560px;
font-size: clamp(26px, 2.15vw, 36px);
line-height: 1.06;
letter-spacing: 0;
}
.approach-card p,
.approach-loop p {
max-width: 560px;
font-size: 15px;
line-height: 1.68;
color: rgba(203, 213, 225, 0.74);
}
.approach-card__meta {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: clamp(20px, 2.4vw, 32px);
padding-top: clamp(18px, 2vw, 28px);
border-top: 1px solid rgba(255, 255, 255, 0.07);
}
.approach-card__meta span {
position: relative;
padding: 9px 10px 9px 24px;
border-radius: 2px;
border: 1px solid rgba(255, 255, 255, 0.11);
background: rgba(255, 255, 255, 0.032);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045);
font-size: 9px;
font-weight: 650;
letter-spacing: 0.08em;
line-height: 1;
text-transform: uppercase;
color: rgba(226, 232, 240, 0.76);
}
.approach-card__meta span::before {
content: "";
position: absolute;
left: 9px;
top: 50%;
width: 7px;
height: 7px;
border: 1px solid rgba(226, 232, 240, 0.5);
transform: translateY(-50%);
box-shadow: 0 0 10px rgba(255, 255, 255, 0.12);
}
.approach-cards .approach-card {
border-color: rgba(var(--accent), 0.18);
background:
radial-gradient(circle at var(--spot-x, 74%) var(--spot-y, 18%), rgba(var(--accent), 0.105), transparent 34%),
linear-gradient(180deg, rgba(13, 19, 32, 0.78), rgba(5, 9, 18, 0.94));
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.06),
inset 0 0 0 1px rgba(var(--accent), 0.035),
0 22px 64px rgba(0, 0, 0, 0.2);
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
.approach-cards .approach-card::before {
background:
linear-gradient(135deg, rgba(var(--accent), 0.32), transparent 22%, transparent 76%, rgba(var(--accent), 0.12)),
linear-gradient(90deg, rgba(var(--accent), 0.32), transparent 34%, transparent 68%, rgba(255, 255, 255, 0.045));
opacity: 0.16;
}
.approach-cards .approach-card::after {
-webkit-text-stroke-color: rgba(var(--accent), 0.12);
text-stroke-color: rgba(var(--accent), 0.12);
}
.approach-cards .approach-card:hover {
border-color: rgba(var(--accent), 0.38);
background:
radial-gradient(circle at var(--spot-x, 74%) var(--spot-y, 18%), rgba(var(--accent), 0.16), transparent 36%),
linear-gradient(180deg, rgba(14, 22, 38, 0.86), rgba(5, 9, 18, 0.96));
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.085),
inset 0 0 0 1px rgba(var(--accent), 0.08),
0 28px 78px rgba(0, 0, 0, 0.24),
0 0 34px rgba(var(--accent), 0.08);
}
.approach-cards .approach-card:hover::before {
opacity: 0.42;
}
.approach-cards .approach-card__icon {
background:
linear-gradient(180deg, rgba(var(--accent), 0.13), rgba(2, 6, 23, 0.84)),
rgba(2, 6, 23, 0.86);
border-color: rgba(var(--accent), 0.34);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.12),
inset 0 -12px 22px rgba(0, 0, 0, 0.24),
0 14px 30px rgba(0, 0, 0, 0.16),
0 0 24px rgba(var(--accent), 0.1);
}
.approach-cards .approach-card__icon::after {
background:
linear-gradient(145deg, rgba(var(--accent), 0.16), rgba(2, 6, 23, 0.88) 58%, rgba(255, 255, 255, 0.018));
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.12),
inset 0 0 20px rgba(var(--accent), 0.08);
}
.approach-cards .approach-card__meta {
border-top-color: rgba(var(--accent), 0.12);
}
.approach-cards .approach-card__meta span {
border-color: rgba(var(--accent), 0.18);
background: rgba(2, 6, 23, 0.44);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
color: rgba(226, 232, 240, 0.82);
}
.approach-cards .approach-card__meta span::before {
border-color: rgba(var(--accent), 0.56);
box-shadow: 0 0 12px rgba(var(--accent), 0.18);
}
@media (max-width: 1023px) {
.approach-intro {
max-width: 760px;
}
.approach-cards {
grid-template-columns: 1fr;
}
.approach-card,
.approach-cards .approach-card:first-child,
.approach-cards .approach-card:nth-child(2),
.approach-cards .approach-card:nth-child(3),
.approach-cards .approach-loop {
min-height: auto;
}
}
@media (max-width: 767px) {
.approach {
padding-block: 82px;
}
.approach-title {
font-size: clamp(30px, 9vw, 42px) !important;
}
.approach-card,
.approach-loop {
padding: 26px !important;
transform: none !important;
}
.approach-card h3,
.approach-loop h3 {
font-size: clamp(25px, 8vw, 34px);
}
}
/* Smooth Reveal Animation */
.reveal {
opacity: 0;
transform: translate3d(0, 22px, 0) scale(0.99);
transition: opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1), transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
will-change: opacity, transform;
}
.reveal.active {
opacity: 1;
transform: translate3d(0, 0, 0) scale(1);
will-change: auto;
}
.approach-card.reveal.active,
.approach-loop.reveal.active {
transform: rotateX(var(--tilt-y, 0deg)) rotateY(var(--tilt-x, 0deg)) translateZ(0);
}
.approach-card.reveal.active:hover,
.approach-loop.reveal.active:hover {
transform: translateY(-8px) rotateX(var(--tilt-y, 0deg)) rotateY(var(--tilt-x, 0deg)) scale(1.006);
}
.growth-intro.reveal.active {
transform: rotateX(var(--tilt-y, 0deg)) rotateY(var(--tilt-x, 0deg)) translateZ(0);
}
.growth-intro.reveal.active:hover {
transform: rotateX(var(--tilt-y, 0deg)) rotateY(var(--tilt-x, 0deg)) translateY(-4px);
}
.growth-capability.reveal.active {
transform: rotateX(var(--tilt-y, 0deg)) rotateY(var(--tilt-x, 0deg)) translateZ(0);
}
.growth-capability.reveal.active:hover {
transform: rotateX(var(--tilt-y, 0deg)) rotateY(var(--tilt-x, 0deg)) translateY(-8px);
}
@media (max-width: 767px) {
.growth-intro.reveal.active,
.growth-intro.reveal.active:hover,
.growth-capability.reveal.active,
.growth-capability.reveal.active:hover {
transform: none;
}
}
@media (min-width: 768px) {
.product-showcase__track .product-showcase__card.reveal {
transform:
translate3d(calc(-50% + var(--x)), calc(-50% + var(--hover-lift, 0px)), var(--z))
rotateY(var(--rotate))
scale(var(--scale));
will-change: auto;
}
.product-showcase__track .product-showcase__card.reveal:not(.active) {
opacity: 0;
}
.product-showcase__track .product-showcase__card.reveal.active {
opacity: var(--fade);
transform:
translate3d(calc(-50% + var(--x)), calc(-50% + var(--hover-lift, 0px)), var(--z))
rotateY(var(--rotate))
scale(var(--scale));
will-change: auto;
}
}
@media (max-width: 767px) {
.product-showcase__track .product-showcase__card,
.product-showcase__track .product-showcase__card.reveal,
.product-showcase__track .product-showcase__card.reveal.active {
opacity: 1;
transform: none;
}
}
.product-showcase__track .product-showcase__card:nth-child(3n + 1) {
--accent: 96, 165, 250;
--spot-x: 76%;
--spot-y: 18%;
}
.product-showcase__track .product-showcase__card:nth-child(3n + 2) {
--accent: 59, 130, 246;
--spot-x: 62%;
--spot-y: 16%;
}
.product-showcase__track .product-showcase__card:nth-child(3n) {
--accent: 52, 211, 153;
--spot-x: 70%;
--spot-y: 18%;
}
.product-showcase__track .product-showcase__card {
border-color: rgba(var(--accent), 0.18);
background:
radial-gradient(circle at var(--spot-x, 74%) var(--spot-y, 18%), rgba(var(--accent), 0.105), transparent 34%),
linear-gradient(180deg, rgba(13, 19, 32, 0.78), rgba(5, 9, 18, 0.94));
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.06),
inset 0 0 0 1px rgba(var(--accent), 0.035),
0 22px 64px rgba(0, 0, 0, 0.2);
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
.product-showcase__track .product-showcase__card::before {
background:
linear-gradient(135deg, rgba(var(--accent), 0.32), transparent 22%, transparent 76%, rgba(var(--accent), 0.12)),
linear-gradient(90deg, rgba(var(--accent), 0.32), transparent 34%, transparent 68%, rgba(255, 255, 255, 0.045));
opacity: 0.16;
}
.product-showcase__track .product-showcase__card::after {
border-color: rgba(var(--accent), 0.12);
}
.product-showcase__track .product-showcase__card:hover,
.product-showcase__track .product-showcase__card.is-center,
.product-showcase__track .product-showcase__card.is-selected {
border-color: rgba(var(--accent), 0.38);
background:
radial-gradient(circle at var(--spot-x, 74%) var(--spot-y, 18%), rgba(var(--accent), 0.16), transparent 36%),
linear-gradient(180deg, rgba(14, 22, 38, 0.86), rgba(5, 9, 18, 0.96));
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.085),
inset 0 0 0 1px rgba(var(--accent), 0.08),
0 28px 78px rgba(0, 0, 0, 0.24),
0 0 34px rgba(var(--accent), 0.08);
}
.product-showcase__track .product-showcase__card:hover::before,
.product-showcase__track .product-showcase__card.is-center::before,
.product-showcase__track .product-showcase__card.is-selected::before {
opacity: 0.42;
}
.product-showcase__metrics span {
background:
radial-gradient(circle at 90% 0%, rgba(34, 197, 94, 0.045), transparent 42%),
linear-gradient(180deg, rgba(2, 6, 23, 0.26), rgba(0, 0, 0, 0.22));
border-color: rgba(96, 165, 250, 0.14);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.06),
0 10px 22px rgba(0, 0, 0, 0.12);
}
.growth-system .growth-intro,
.growth-system .growth-stat,
.growth-system .growth-capability {
border-color: rgba(226, 232, 240, 0.14);
background:
radial-gradient(circle at var(--spot-x, 78%) var(--spot-y, 18%), rgba(56, 189, 248, 0.12), transparent 34%),
radial-gradient(circle at 12% 92%, rgba(34, 197, 94, 0.075), transparent 32%),
linear-gradient(145deg, rgba(255, 255, 255, 0.105), rgba(255, 255, 255, 0.032) 52%, rgba(15, 23, 42, 0.16)),
rgba(15, 23, 42, 0.22) !important;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.14),
inset 0 -1px 0 rgba(255, 255, 255, 0.035),
inset 0 0 0 1px rgba(125, 211, 252, 0.035),
0 18px 54px rgba(0, 0, 0, 0.18) !important;
backdrop-filter: blur(18px) saturate(135%) !important;
-webkit-backdrop-filter: blur(18px) saturate(135%) !important;
}
.growth-system .growth-intro::before,
.growth-system .growth-stat::before,
.growth-system .growth-capability::before {
background:
linear-gradient(118deg, rgba(255, 255, 255, 0.14), transparent 28%, transparent 74%, rgba(125, 211, 252, 0.075)),
radial-gradient(circle at var(--spot-x, 78%) var(--spot-y, 18%), rgba(125, 211, 252, 0.14), transparent 34%);
opacity: 0.2;
}
.growth-system .growth-stat::after,
.growth-system .growth-capability::after {
background: linear-gradient(to right, rgba(96, 165, 250, 0.2), rgba(34, 197, 94, 0.05), transparent);
}
.growth-system .growth-intro:hover,
.growth-system .growth-stat:hover,
.growth-system .growth-capability:hover {
border-color: rgba(186, 230, 253, 0.24);
background:
radial-gradient(circle at var(--spot-x, 78%) var(--spot-y, 18%), rgba(56, 189, 248, 0.16), transparent 36%),
radial-gradient(circle at 12% 92%, rgba(34, 197, 94, 0.095), transparent 32%),
linear-gradient(145deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.045) 54%, rgba(15, 23, 42, 0.2)),
rgba(15, 23, 42, 0.28) !important;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.17),
inset 0 0 0 1px rgba(125, 211, 252, 0.06),
0 24px 68px rgba(0, 0, 0, 0.2),
0 0 28px rgba(56, 189, 248, 0.07) !important;
backdrop-filter: blur(20px) saturate(145%) !important;
-webkit-backdrop-filter: blur(20px) saturate(145%) !important;
}
.contact-panel__details {
border-color: rgba(148, 163, 184, 0.14);
background:
radial-gradient(circle at 14% 0%, rgba(37, 99, 235, 0.06), transparent 34%),
radial-gradient(circle at 94% 8%, rgba(34, 197, 94, 0.04), transparent 28%),
linear-gradient(180deg, rgba(2, 6, 23, 0.2), rgba(0, 0, 0, 0.32));
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.065),
inset 0 0 0 1px rgba(96, 165, 250, 0.026),
0 20px 58px rgba(0, 0, 0, 0.14);
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
.contact-panel__item,
.contact-panel__actions {
border-color: rgba(148, 163, 184, 0.12);
background:
radial-gradient(circle at 86% 0%, rgba(37, 99, 235, 0.055), transparent 32%),
radial-gradient(circle at 8% 100%, rgba(34, 197, 94, 0.035), transparent 28%),
linear-gradient(180deg, rgba(2, 6, 23, 0.22), rgba(0, 0, 0, 0.3));
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.06),
0 12px 28px rgba(0, 0, 0, 0.1);
}
.contact-panel__item:hover,
.contact-panel__actions:hover {
border-color: rgba(96, 165, 250, 0.22);
background:
radial-gradient(circle at 86% 0%, rgba(37, 99, 235, 0.08), transparent 34%),
radial-gradient(circle at 8% 100%, rgba(34, 197, 94, 0.045), transparent 28%),
linear-gradient(180deg, rgba(2, 6, 23, 0.32), rgba(0, 0, 0, 0.44));
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.08),
0 16px 38px rgba(0, 0, 0, 0.14),
0 0 18px rgba(37, 99, 235, 0.04);
}
.contact-panel__actions a:last-child {
background: rgba(2, 6, 23, 0.26);
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
/* Responsive stability layer */
html,
body {
max-width: 100%;
overflow-x: hidden;
}
body {
overflow-wrap: break-word;
}
nav .max-w-7xl {
position: relative;
}
.mobile-nav-toggle {
display: inline-grid;
place-items: center;
width: 40px;
height: 40px;
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, 0.1);
background: rgba(255, 255, 255, 0.035);
color: #fff;
transition: border-color 0.24s ease, background 0.24s ease;
}
.mobile-nav-toggle[aria-expanded="true"] {
border-color: rgba(125, 211, 252, 0.28);
background: rgba(14, 165, 233, 0.08);
}
.mobile-nav-menu {
position: absolute;
left: 16px;
right: 16px;
top: calc(100% + 10px);
display: none;
grid-template-columns: 1fr;
gap: 4px;
padding: 10px;
border: 1px solid rgba(148, 163, 184, 0.16);
border-radius: 18px;
background:
radial-gradient(circle at 88% 0%, rgba(14, 165, 233, 0.12), transparent 36%),
linear-gradient(180deg, rgba(11, 12, 16, 0.97), rgba(4, 7, 14, 0.95));
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.08),
0 22px 58px rgba(0, 0, 0, 0.34);
}
.mobile-nav-menu.is-open {
display: grid;
}
.mobile-nav-menu a {
display: flex;
align-items: center;
min-height: 42px;
padding: 0 14px;
border-radius: 12px;
color: rgba(226, 232, 240, 0.86);
font-size: 13px;
font-weight: 600;
line-height: 1.2;
}
.mobile-nav-menu a:hover {
background: rgba(255, 255, 255, 0.055);
color: #fff;
}
.mobile-nav-menu__cta {
margin-top: 4px;
justify-content: center;
border: 1px solid rgba(125, 211, 252, 0.18);
background: rgba(14, 165, 233, 0.08);
}
@media (min-width: 768px) {
.mobile-nav-toggle {
display: none !important;
}
.mobile-nav-menu {
display: none !important;
}
}
@media (max-width: 1279px) {
.site-logo--nav {
width: 108px;
}
.hero-region header {
padding-top: clamp(7.5rem, 13vw, 11rem) !important;
padding-bottom: clamp(4.5rem, 8vw, 7rem) !important;
}
.hero-title--layered {
font-size: clamp(52px, 8.6vw, 92px);
line-height: 0.94;
}
.hero-subcopy {
max-width: 760px;
font-size: clamp(16px, 1.8vw, 19px);
}
#approach,
#products,
#growth,
#contact {
padding-block: clamp(86px, 9vw, 128px) !important;
}
.product-showcase__track {
height: clamp(500px, 54vw, 620px);
}
.product-showcase__card {
width: 300px;
min-height: 430px;
}
.growth-system {
grid-template-columns: 1fr;
grid-template-areas:
"intro"
"stats"
"capabilities";
max-width: 980px;
margin-inline: auto;
}
.growth-intro,
.growth-stats,
.growth-capabilities {
grid-column: 1;
}
.growth-intro {
min-height: auto;
}
.growth-capabilities {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.contact-panel__layout {
grid-template-columns: 1fr;
max-width: 980px;
min-height: auto;
margin-inline: auto;
row-gap: 42px;
}
.contact-panel__copy h2 {
max-width: 760px;
font-size: clamp(44px, 7vw, 72px);
}
.contact-panel__aside {
min-height: clamp(420px, 54vw, 560px);
padding-inline: clamp(18px, 4vw, 44px);
padding-right: clamp(18px, 4vw, 44px);
}
.contact-globe {
width: min(520px, 100%);
}
.contact-panel__details {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.contact-panel__actions {
grid-column: 1 / -1;
flex-direction: row !important;
}
.contact-panel__actions a {
width: auto;
flex: 1 1 0;
}
}
@media (max-width: 1023px) {
.hero-title--layered {
max-width: 760px;
margin-inline: auto;
font-size: clamp(48px, 10vw, 76px);
line-height: 0.98;
}
.hero-title__line {
white-space: normal;
text-wrap: balance;
}
.hero-benefits {
display: flex;
flex-wrap: wrap;
max-width: min(100%, 620px);
border-radius: 24px;
}
.hero-benefits__item {
flex: 1 1 178px;
justify-content: center;
}
.product-showcase {
margin-inline: calc(50% - 50vw);
width: 100vw;
overflow: visible;
perspective: none;
}
.product-showcase__track {
display: flex;
gap: clamp(12px, 2.4vw, 18px);
height: auto;
overflow-x: auto;
overflow-y: visible;
padding: clamp(30px, 5vw, 44px) max(24px, calc((100vw - 960px) / 2 + 24px)) clamp(66px, 8vw, 88px);
scroll-padding-inline: max(24px, calc((100vw - 960px) / 2 + 24px));
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
scrollbar-width: none;
overscroll-behavior-x: contain;
-webkit-overflow-scrolling: touch;
touch-action: pan-x pan-y;
perspective: none;
cursor: grab;
}
.product-showcase__track::-webkit-scrollbar {
display: none;
}
.product-showcase__card,
.product-showcase__track .product-showcase__card,
.product-showcase__track .product-showcase__card.reveal,
.product-showcase__track .product-showcase__card.reveal.active {
position: relative !important;
left: auto !important;
top: auto !important;
flex: 0 0 clamp(330px, 42vw, 390px);
width: auto;
min-height: auto;
opacity: 1 !important;
transform: none !important;
z-index: auto !important;
scroll-snap-align: center;
scroll-snap-stop: always;
}
.product-showcase__card:hover,
.product-showcase__card.is-selected,
.product-showcase__card.is-center {
transform: none !important;
}
.product-showcase__shot {
aspect-ratio: 16 / 9;
}
.product-showcase__content {
min-height: 250px;
}
.product-showcase__metrics {
margin-top: 16px;
}
.approach-cards {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.approach-cards .approach-card:first-child,
.approach-cards .approach-card:nth-child(2),
.approach-cards .approach-card:nth-child(3) {
grid-column: auto;
grid-row: auto;
min-height: 320px;
}
.approach-cards .approach-card:nth-child(3) {
grid-column: 1 / -1;
}
.growth-capabilities {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (min-width: 1024px) and (max-width: 1279px) {
.product-showcase {
margin-inline: calc(50% - 50vw);
width: 100vw;
overflow: visible;
perspective: none;
}
.product-showcase__track {
display: flex;
gap: clamp(14px, 2vw, 22px);
height: auto;
overflow-x: auto;
overflow-y: visible;
padding: clamp(34px, 4vw, 50px) max(28px, calc((100vw - 1080px) / 2 + 28px)) clamp(72px, 7vw, 96px);
scroll-padding-inline: max(28px, calc((100vw - 1080px) / 2 + 28px));
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
scrollbar-width: none;
overscroll-behavior-x: contain;
-webkit-overflow-scrolling: touch;
touch-action: pan-x pan-y;
perspective: none;
cursor: grab;
}
.product-showcase__track::-webkit-scrollbar {
display: none;
}
.product-showcase__card,
.product-showcase__track .product-showcase__card,
.product-showcase__track .product-showcase__card.reveal,
.product-showcase__track .product-showcase__card.reveal.active {
position: relative !important;
left: auto !important;
top: auto !important;
flex: 0 0 clamp(350px, 36vw, 410px);
width: auto;
min-height: auto;
opacity: 1 !important;
transform: none !important;
z-index: auto !important;
scroll-snap-align: center;
scroll-snap-stop: always;
}
.product-showcase__card:hover,
.product-showcase__card.is-selected,
.product-showcase__card.is-center {
transform: none !important;
}
.product-showcase__shot {
aspect-ratio: 16 / 9;
}
.product-showcase__content {
min-height: 250px;
}
.product-showcase__metrics {
margin-top: 16px;
}
}
@media (max-width: 767px) {
.site-logo--nav {
width: 96px;
}
nav .max-w-7xl {
height: 60px;
padding-inline: 18px;
}
.mobile-nav-menu {
left: 12px;
right: 12px;
top: calc(100% + 8px);
}
.hero-region header {
padding-top: 7.25rem !important;
padding-bottom: 4.75rem !important;
}
.hero-badge {
max-width: 100%;
padding: 8px 11px;
font-size: 9px;
letter-spacing: 0.16em;
line-height: 1.25;
}
.hero-title--layered {
font-size: clamp(40px, 13vw, 56px);
line-height: 1;
gap: 4px;
}
.hero-subcopy {
font-size: 15.5px;
line-height: 1.62;
}
.hero-benefits {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
width: 100%;
max-width: 390px;
gap: 6px;
padding: 6px;
border-radius: 20px;
}
.hero-benefits__item {
min-height: 38px;
padding: 8px 7px;
font-size: 10px;
line-height: 1.22;
white-space: normal;
}
.hero-button-group .hero-button {
width: 100%;
min-height: 46px;
}
.section-kicker {
gap: 8px;
font-size: 10px;
letter-spacing: 0.14em;
}
.partner-logo {
width: 118px;
height: 42px;
}
.partner-logo__image,
.partner-logo__image.partner-logo__image--tiktok,
.partner-logo__image.partner-logo__image--openai,
.partner-logo__image.partner-logo__image--cloudflare {
max-height: 26px;
}
#approach,
#products,
#growth,
#contact {
padding-block: 78px !important;
}
#products > .max-w-7xl,
#growth > .max-w-7xl,
#contact > .max-w-7xl,
.approach > .max-w-7xl,
footer > .max-w-7xl {
padding-inline: 20px !important;
}
#products h2,
.growth-intro h2,
.contact-panel__copy h2 {
font-size: clamp(31px, 9vw, 42px) !important;
line-height: 1.08 !important;
}
#products p,
.growth-intro p,
.contact-panel__copy p,
.approach-intro p {
font-size: 15px !important;
line-height: 1.62 !important;
}
.product-showcase {
margin-inline: -20px;
width: auto;
margin-top: -12px;
}
.product-showcase__track {
gap: 12px;
padding: 28px 20px 64px;
scroll-padding-inline: 20px;
}
.product-showcase__card,
.product-showcase__track .product-showcase__card,
.product-showcase__track .product-showcase__card.reveal,
.product-showcase__track .product-showcase__card.reveal.active {
flex-basis: min(84vw, 318px);
border-radius: 14px;
}
.product-showcase__content {
min-height: 252px;
gap: 10px;
padding: 16px;
}
.product-showcase__head {
gap: 10px;
}
.product-showcase__head h3 {
font-size: 20px;
line-height: 1.08;
}
.product-showcase__kicker {
font-size: 9.5px;
}
.product-showcase__index {
height: 23px;
min-width: 30px;
font-size: 10px;
}
.product-showcase__content p {
min-height: auto;
font-size: 12.5px;
line-height: 1.55;
}
.product-showcase__metrics {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 6px;
margin-top: 12px;
}
.product-showcase__metrics span {
justify-content: flex-start;
min-height: 30px;
padding: 7px 8px;
}
.product-showcase__metrics strong {
font-size: 12px;
}
.product-showcase__metrics em {
font-size: 9px;
}
.approach {
padding-block: 78px !important;
}
.approach-title {
font-size: clamp(30px, 9vw, 40px) !important;
}
.approach-cards {
grid-template-columns: 1fr;
}
.approach-cards .approach-card:first-child,
.approach-cards .approach-card:nth-child(2),
.approach-cards .approach-card:nth-child(3) {
grid-column: 1 / -1;
min-height: auto;
}
.approach-card,
.approach-loop {
padding: 24px !important;
}
.approach-card h3,
.approach-cards .approach-card:nth-child(2) h3,
.approach-cards .approach-card:nth-child(3) h3,
.approach-loop h3 {
font-size: clamp(24px, 7vw, 32px);
}
.growth-stats {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
.growth-stat {
min-height: 112px;
padding: 16px;
}
.growth-stat div {
font-size: 26px !important;
}
.growth-stat p {
font-size: 10px !important;
line-height: 1.35;
}
.growth-capabilities {
grid-template-columns: 1fr;
}
.growth-capability {
padding: 20px !important;
}
.growth-capability__top {
gap: 14px;
}
.growth-capability__top > div:first-child {
min-width: 0;
}
.growth-capability__icon {
width: 42px;
height: 42px;
min-width: 42px;
flex: 0 0 42px;
border-radius: 999px;
}
.contact-panel__layout {
row-gap: 30px;
}
.contact-panel__aside {
min-height: 360px;
padding-inline: 0;
padding-right: 0;
}
.contact-globe {
width: min(360px, 100%);
}
.contact-globe__label {
max-width: 43%;
padding: 7px 8px;
font-size: 10px;
line-height: 1.2;
white-space: normal;
text-align: center;
}
.contact-panel__details {
grid-template-columns: 1fr;
gap: 10px;
padding: 10px;
border-radius: 18px;
}
.contact-panel__item,
.contact-panel__item:nth-child(3) {
min-height: 106px;
padding: 18px;
}
.contact-panel__actions {
grid-column: auto;
flex-direction: column !important;
align-items: stretch;
min-height: 0;
padding: 18px !important;
}
footer .flex {
min-width: 0;
}
}
@media (max-width: 430px) {
.product-showcase__card,
.product-showcase__track .product-showcase__card,
.product-showcase__track .product-showcase__card.reveal,
.product-showcase__track .product-showcase__card.reveal.active {
flex-basis: min(88vw, 306px);
}
.product-showcase__metrics {
grid-template-columns: 1fr;
}
.growth-stats {
grid-template-columns: 1fr;
}
.contact-globe {
width: min(320px, 100%);
}
.contact-globe__label {
max-width: 46%;
font-size: 9.5px;
}
.contact-globe__label--top-left {
top: 8%;
left: 1%;
}
.contact-globe__label--top-right {
top: 20%;
right: 1%;
}
.contact-globe__label--bottom-left {
bottom: 18%;
left: 1%;
}
.contact-globe__label--bottom-right {
right: 1%;
bottom: 8%;
}
}
#growth .growth-system {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-areas:
"capabilities"
"stats";
gap: clamp(18px, 2.2vw, 28px);
align-items: stretch;
perspective: none;
}
#growth .growth-header {
max-width: 940px;
margin: 0 auto clamp(34px, 5vw, 64px);
text-align: center;
}
#growth .growth-header h2 {
max-width: 780px;
margin-inline: auto;
font-size: clamp(42px, 5.4vw, 76px);
line-height: 0.96;
}
#growth .growth-header__text {
display: grid;
gap: 14px;
max-width: 820px;
margin-inline: auto;
color: rgba(203, 213, 225, 0.82);
font-size: clamp(16px, 1.25vw, 18px);
font-weight: 300;
line-height: 1.7;
}
#growth .growth-header__text p {
margin: 0;
}
#growth .growth-intro {
grid-area: intro;
min-height: 100%;
padding: clamp(34px, 4vw, 58px);
border-radius: 22px;
justify-content: center;
transform: none !important;
}
#growth .growth-intro__copy {
max-width: 680px;
}
#growth .growth-intro h2 {
max-width: 680px;
font-size: clamp(42px, 5.4vw, 76px);
line-height: 0.96;
}
#growth .growth-intro__text {
display: grid;
gap: 18px;
max-width: 620px;
color: rgba(203, 213, 225, 0.82);
font-size: clamp(16px, 1.35vw, 18px);
font-weight: 300;
line-height: 1.74;
}
#growth .growth-intro__text p {
margin: 0;
}
#growth .growth-capabilities {
grid-area: capabilities;
display: grid;
grid-template-columns: 1fr;
gap: 12px;
}
#growth .growth-capability,
#growth .growth-capability:first-child,
#growth .growth-capability:nth-child(2),
#growth .growth-capability:nth-child(3),
#growth .growth-capability:nth-child(4) {
grid-column: auto;
min-height: auto;
margin-top: 0;
padding: clamp(22px, 2.2vw, 30px) !important;
display: grid;
grid-template-columns: 44px minmax(0, 1fr);
gap: 18px;
align-items: start;
border-radius: 18px;
transform: none !important;
}
#growth .growth-capability::after {
left: 0;
right: auto;
top: 22px;
bottom: 22px;
width: 2px;
height: auto;
background: linear-gradient(to bottom, rgba(var(--accent), 0.72), transparent);
}
#growth .growth-capability__number {
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
border-radius: 999px;
border: 1px solid rgba(var(--accent), 0.32);
background: rgba(var(--accent), 0.09);
color: rgba(226, 242, 255, 0.9);
font-size: 12px;
font-weight: 700;
line-height: 1;
}
#growth .growth-capability h3 {
margin: 0 0 10px;
color: #fff;
font-size: clamp(18px, 1.6vw, 22px);
line-height: 1.15;
font-weight: 620;
}
#growth .growth-capability p {
grid-column: 2;
margin: -2px 0 0;
max-width: 620px;
color: rgba(203, 213, 225, 0.78);
font-size: 14px;
line-height: 1.62;
}
#growth .growth-stats {
grid-area: stats;
display: grid;
grid-template-columns: 0.72fr repeat(4, minmax(0, 1fr));
gap: 0;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.085);
border-radius: 22px;
background:
linear-gradient(135deg, rgba(14, 165, 233, 0.07), rgba(255, 255, 255, 0.01)),
rgba(255, 255, 255, 0.006);
}
#growth .growth-stats__label,
#growth .growth-stat {
min-height: 154px;
padding: clamp(22px, 2.4vw, 32px);
border: 0;
border-right: 1px solid rgba(255, 255, 255, 0.075);
background: transparent;
box-shadow: none;
}
#growth .growth-stats__label {
display: flex;
align-items: center;
color: rgba(125, 211, 252, 0.9);
font-size: 12px;
font-weight: 700;
line-height: 1;
letter-spacing: 0.22em;
text-transform: uppercase;
}
#growth .growth-stat {
justify-content: center;
gap: 12px;
}
#growth .growth-stat:last-child {
border-right: 0;
}
#growth .growth-stat::before,
#growth .growth-stat::after {
display: none;
}
#growth .growth-stat:hover {
transform: none;
box-shadow: none;
border-color: rgba(255, 255, 255, 0.075);
}
#growth .growth-stat div {
margin: 0;
color: #fff;
font-size: clamp(30px, 3vw, 46px);
font-weight: 680;
line-height: 0.96;
}
#growth .growth-stat p {
margin: 0;
max-width: 150px;
color: rgba(148, 163, 184, 0.9);
font-size: 11px;
font-weight: 650;
line-height: 1.35;
letter-spacing: 0.12em;
text-transform: uppercase;
}
@media (max-width: 1279px) {
#growth .growth-system {
grid-template-columns: 1fr;
grid-template-areas:
"intro"
"capabilities"
"stats";
}
#growth .growth-intro {
min-height: auto;
}
#growth .growth-intro h2 {
font-size: clamp(40px, 7vw, 68px);
}
#growth .growth-stats {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
#growth .growth-stats__label {
grid-column: 1 / -1;
min-height: auto;
border-right: 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.075);
}
#growth .growth-stat:nth-child(3),
#growth .growth-stat:nth-child(5) {
border-right: 0;
}
#growth .growth-stat:nth-child(2),
#growth .growth-stat:nth-child(3) {
border-bottom: 1px solid rgba(255, 255, 255, 0.075);
}
}
@media (max-width: 767px) {
#growth .growth-intro {
padding: 28px;
border-radius: 18px;
}
#growth .growth-intro h2 {
font-size: clamp(34px, 11vw, 48px);
line-height: 1.02;
}
#growth .growth-intro__text {
font-size: 15.5px;
line-height: 1.66;
}
#growth .growth-capability,
#growth .growth-capability:first-child,
#growth .growth-capability:nth-child(2),
#growth .growth-capability:nth-child(3),
#growth .growth-capability:nth-child(4) {
grid-template-columns: 36px minmax(0, 1fr);
gap: 14px;
padding: 20px !important;
}
#growth .growth-capability__number {
width: 32px;
height: 32px;
font-size: 10px;
}
#growth .growth-capability h3 {
font-size: 18px;
}
#growth .growth-capability p {
font-size: 13.5px;
line-height: 1.56;
}
#growth .growth-stats {
grid-template-columns: 1fr;
}
#growth .growth-stats__label,
#growth .growth-stat,
#growth .growth-stat:nth-child(2),
#growth .growth-stat:nth-child(3),
#growth .growth-stat:nth-child(5) {
min-height: auto;
border-right: 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.075);
}
#growth .growth-stat:last-child {
border-bottom: 0;
}
#growth .growth-stat div {
font-size: 36px;
}
#growth .growth-stat p {
max-width: none;
}
}
#growth .growth-system {
grid-template-columns: minmax(0, 1fr);
gap: clamp(14px, 1.6vw, 20px);
}
#growth .growth-intro,
#growth .growth-capability,
#growth .growth-stat {
transform: rotateX(var(--tilt-y, 0deg)) rotateY(var(--tilt-x, 0deg)) translateZ(0) !important;
transition:
transform 0.34s cubic-bezier(0.16, 1, 0.3, 1),
border-color 0.28s ease,
box-shadow 0.28s ease,
background 0.28s ease;
}
#growth .growth-intro {
padding: clamp(28px, 3.2vw, 42px);
border-radius: 18px;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.08),
0 18px 54px rgba(0, 0, 0, 0.16);
}
#growth .growth-intro:hover {
border-color: rgba(125, 211, 252, 0.26);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.11),
0 24px 68px rgba(14, 165, 233, 0.08),
0 18px 54px rgba(0, 0, 0, 0.18);
}
#growth .growth-intro h2 {
font-size: clamp(36px, 4.5vw, 62px);
margin-bottom: 18px !important;
}
#growth .growth-intro .section-kicker {
margin-bottom: 18px !important;
}
#growth .growth-intro__text {
gap: 12px;
font-size: clamp(14.5px, 1.1vw, 16px);
line-height: 1.62;
}
#growth .growth-capabilities {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(10px, 1vw, 14px);
}
#growth .growth-capability,
#growth .growth-capability:first-child,
#growth .growth-capability:nth-child(2),
#growth .growth-capability:nth-child(3),
#growth .growth-capability:nth-child(4) {
position: relative;
grid-template-columns: 34px minmax(0, 1fr);
gap: 12px;
padding: clamp(16px, 1.5vw, 22px) !important;
border-radius: 14px;
overflow: hidden;
background:
radial-gradient(circle at 92% 12%, rgba(var(--accent), 0.13), transparent 34%),
linear-gradient(180deg, rgba(14, 22, 38, 0.76), rgba(5, 9, 18, 0.9));
}
#growth .growth-capability:nth-child(5) {
grid-column: span 2;
}
#growth .growth-capability::before {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(115deg, transparent 0 38%, rgba(255, 255, 255, 0.12) 48%, transparent 58%),
radial-gradient(circle at var(--flare-x, 86%) 8%, rgba(var(--accent), 0.18), transparent 34%);
opacity: 0;
transform: translateX(-18%);
transition: opacity 0.28s ease, transform 0.38s ease;
}
#growth .growth-capability::after {
top: 16px;
bottom: 16px;
}
#growth .growth-capability:hover,
#growth .growth-capability:focus-within {
border-color: rgba(var(--accent), 0.4);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.1),
0 18px 48px rgba(0, 0, 0, 0.22),
0 0 34px rgba(var(--accent), 0.08);
transform: rotateX(var(--tilt-y, 0deg)) rotateY(var(--tilt-x, 0deg)) translateY(-5px) !important;
}
#growth .growth-capability:hover::before,
#growth .growth-capability:focus-within::before {
opacity: 1;
transform: translateX(0);
}
#growth .growth-capability__number {
width: 30px;
height: 30px;
font-size: 10px;
transition: transform 0.28s ease, background 0.28s ease, border-color 0.28s ease;
}
#growth .growth-capability:hover .growth-capability__number {
transform: translateY(-2px) scale(1.06);
border-color: rgba(var(--accent), 0.58);
background: rgba(var(--accent), 0.15);
}
#growth .growth-capability h3 {
margin-bottom: 7px;
font-size: clamp(16px, 1.25vw, 19px);
}
#growth .growth-capability p {
font-size: 13px;
line-height: 1.5;
}
#growth .growth-stats {
border-radius: 18px;
}
#growth .growth-stats__label,
#growth .growth-stat {
min-height: 112px;
padding: clamp(18px, 1.7vw, 24px);
}
#growth .growth-stat {
position: relative;
overflow: hidden;
}
#growth .growth-stat::after {
content: "";
display: block;
position: absolute;
left: 18px;
right: 18px;
bottom: 0;
height: 2px;
border-radius: 999px;
background: linear-gradient(90deg, rgba(125, 211, 252, 0.72), transparent);
opacity: 0;
transform: scaleX(0.36);
transform-origin: left;
transition: opacity 0.28s ease, transform 0.28s ease;
}
#growth .growth-stat:hover {
background: rgba(14, 165, 233, 0.035);
transform: translateY(-3px) !important;
}
#growth .growth-stat:hover::after {
opacity: 1;
transform: scaleX(1);
}
#growth .growth-stat div {
font-size: clamp(26px, 2.45vw, 38px);
transition: color 0.28s ease, transform 0.28s ease;
}
#growth .growth-stat:hover div {
color: rgba(226, 242, 255, 0.98);
transform: translateY(-2px);
}
#growth .growth-stat p {
font-size: 10px;
line-height: 1.3;
}
@media (max-width: 1279px) {
#growth .growth-system {
grid-template-columns: 1fr;
}
#growth .growth-capabilities {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
#growth .growth-capability:nth-child(5) {
grid-column: 1 / -1;
}
}
@media (max-width: 767px) {
#growth .growth-header {
text-align: left;
margin-bottom: 28px;
}
#growth .growth-header h2 {
font-size: clamp(34px, 11vw, 48px);
line-height: 1.02;
}
#growth .growth-header__text {
font-size: 15.5px;
line-height: 1.66;
}
#growth .growth-capabilities {
grid-template-columns: 1fr;
}
#growth .growth-capability:nth-child(5) {
grid-column: auto;
}
#growth .growth-intro {
padding: 24px;
}
#growth .growth-stats__label,
#growth .growth-stat {
min-height: 96px;
}
}
#growth.growth-flow-section {
isolation: isolate;
background: #0a0a0c;
border-top: 1px solid rgba(39, 39, 42, 0.65);
border-bottom: 1px solid rgba(39, 39, 42, 0.65);
box-shadow:
inset 0 20px 40px rgba(0, 0, 0, 0.42),
inset 0 -20px 40px rgba(0, 0, 0, 0.42);
}
#growth.growth-flow-section .growth-flow__texture {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
opacity: 0.52;
background-image:
radial-gradient(circle at 20% 12%, rgba(99, 102, 241, 0.11), transparent 28%),
radial-gradient(circle at 82% 34%, rgba(14, 165, 233, 0.07), transparent 30%),
repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.011) 0 1px, transparent 1px 10px);
}
#growth.growth-flow-section .growth-flow-header {
max-width: none;
margin: 0 0 clamp(34px, 4.5vw, 56px);
text-align: left;
}
#growth.growth-flow-section .growth-flow-eyebrow {
display: flex;
align-items: center;
gap: 0.5rem;
color: rgb(113, 113, 122);
font-size: 0.75rem;
font-weight: 500;
line-height: 1;
letter-spacing: 0.18em;
text-transform: uppercase;
}
#growth.growth-flow-section .growth-flow-eyebrow span {
display: block;
width: 2rem;
height: 1px;
background: rgb(63, 63, 70);
}
#growth.growth-flow-section .growth-flow-header__body {
display: grid;
grid-template-columns: minmax(0, 0.9fr) minmax(360px, 0.86fr);
gap: clamp(24px, 3.4vw, 46px);
align-items: center;
margin-top: clamp(16px, 1.8vw, 22px);
}
#growth.growth-flow-section .growth-flow-header h2 {
margin: 0;
max-width: 680px;
color: rgb(244, 244, 245);
font-size: clamp(1.875rem, 4vw, 3rem);
font-weight: 600;
line-height: 1.08;
letter-spacing: -0.02em;
text-shadow: 0 10px 32px rgba(0, 0, 0, 0.48);
}
#growth.growth-flow-section .growth-flow-header__copy {
display: grid;
gap: 14px;
margin: 0;
max-width: none;
padding-left: clamp(18px, 2vw, 26px);
border-left: 1px solid rgba(82, 82, 91, 0.75);
}
#growth.growth-flow-section .growth-flow-header__copy p {
margin: 0;
color: rgb(161, 161, 170);
font-size: 1rem;
line-height: 1.65;
}
#growth.growth-flow-section .growth-flow {
position: relative;
display: grid;
gap: 0;
width: 100%;
max-width: none;
margin-left: 0;
margin-right: 0;
}
#growth.growth-flow-section .growth-flow__line {
position: absolute;
left: 0;
top: 0.5rem;
bottom: 0.5rem;
width: 1px;
background: linear-gradient(to bottom, rgba(82, 82, 91, 0), rgba(82, 82, 91, 0.95), rgba(82, 82, 91, 0));
overflow: hidden;
}
#growth.growth-flow-section .growth-flow__line::after {
content: "";
position: absolute;
left: 0;
top: 0;
width: 1px;
height: 140px;
background: linear-gradient(to bottom, transparent, rgba(99, 102, 241, 0.95), transparent);
box-shadow: 0 0 18px rgba(99, 102, 241, 0.62);
animation: growthFlowBeam 4.2s linear infinite;
}
#growth.growth-flow-section .growth-flow-stage {
position: relative;
display: grid;
grid-template-columns: 78px minmax(0, 1fr);
gap: clamp(14px, 2vw, 28px);
align-items: start;
padding: clamp(22px, 3vw, 34px) 0 clamp(22px, 3vw, 34px) clamp(24px, 3vw, 38px);
border-bottom: 1px solid rgba(39, 39, 42, 0.72);
transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.35s ease, background 0.35s ease;
}
#growth.growth-flow-section .growth-flow-stage::before {
content: "";
position: absolute;
left: -5px;
top: clamp(30px, 3.4vw, 42px);
width: 11px;
height: 11px;
border: 1px solid rgba(24, 24, 27, 0.95);
border-radius: 999px;
background: rgb(161, 161, 170);
box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.035), 0 0 14px rgba(255, 255, 255, 0.12);
transition: background 0.35s ease, box-shadow 0.35s ease, transform 0.35s ease;
}
#growth.growth-flow-section .growth-flow-stage::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -1px;
height: 1px;
background: linear-gradient(90deg, rgba(99, 102, 241, 0.75), transparent);
opacity: 0;
transform: scaleX(0.36);
transform-origin: left;
transition: opacity 0.35s ease, transform 0.35s ease;
}
#growth.growth-flow-section .growth-flow-stage:hover {
background: linear-gradient(90deg, rgba(99, 102, 241, 0.055), transparent 58%);
border-color: rgba(82, 82, 91, 0.95);
transform: none;
}
#growth.growth-flow-section .growth-flow-stage:hover::before {
background: rgb(99, 102, 241);
box-shadow: 0 0 0 8px rgba(99, 102, 241, 0.08), 0 0 18px rgba(99, 102, 241, 0.42);
transform: none;
}
#growth.growth-flow-section .growth-flow-stage:hover::after {
opacity: 1;
transform: scaleX(1);
}
#growth.growth-flow-section .growth-flow-stage__index {
color: rgb(82, 82, 91);
font-size: clamp(2rem, 4vw, 3.5rem);
font-weight: 400;
line-height: 0.9;
letter-spacing: -0.04em;
transition: color 0.35s ease, transform 0.35s ease;
}
#growth.growth-flow-section .growth-flow-stage:hover .growth-flow-stage__index {
color: rgba(161, 161, 170, 0.92);
transform: translateY(-3px);
}
#growth.growth-flow-section .growth-flow-stage__content {
display: grid;
grid-template-columns: minmax(220px, 0.38fr) minmax(0, 1fr);
gap: clamp(18px, 2.6vw, 38px);
align-items: start;
transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
#growth.growth-flow-section .growth-flow-stage:hover .growth-flow-stage__content {
transform: translateX(8px);
}
#growth.growth-flow-section .growth-flow-stage h3 {
margin: 0;
color: rgb(244, 244, 245);
font-size: clamp(1.45rem, 2.3vw, 2rem);
font-weight: 400;
line-height: 1.12;
letter-spacing: -0.03em;
}
#growth.growth-flow-section .growth-flow-stage p {
margin: 0;
max-width: none;
color: rgb(113, 113, 122);
font-size: 1rem;
line-height: 1.62;
}
@keyframes growthFlowBeam {
0% {
transform: translateY(-35%);
opacity: 0;
}
15% {
opacity: 1;
}
100% {
transform: translateY(340%);
opacity: 0;
}
}
@media (max-width: 1023px) {
#growth.growth-flow-section .growth-flow-header__body {
grid-template-columns: 1fr;
gap: 20px;
}
#growth.growth-flow-section .growth-flow-header__copy {
max-width: 680px;
padding-left: 18px;
}
#growth.growth-flow-section .growth-flow {
max-width: none;
margin-left: 0;
}
#growth.growth-flow-section .growth-flow-stage__content {
grid-template-columns: 1fr;
gap: 10px;
}
}
@media (max-width: 767px) {
#growth.growth-flow-section .growth-flow-stage {
grid-template-columns: 54px minmax(0, 1fr);
gap: 14px;
padding-left: 28px;
}
#growth.growth-flow-section .growth-flow-stage:hover {
transform: none;
}
#growth.growth-flow-section .growth-flow-stage:hover .growth-flow-stage__content {
transform: none;
}
#growth.growth-flow-section .growth-flow-stage__index {
font-size: 1.7rem;
}
}
#products {
padding-top: 0 !important;
}
/* Stagger delays */
.delay-100 { transition-delay: 100ms; }
.delay-200 { transition-delay: 200ms; }
.delay-300 { transition-delay: 300ms; }
/* Infinite Scroll Animation */
@keyframes scroll {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
.partner-marquee__track {
animation: scroll 40s linear infinite;
transform: translate3d(0, 0, 0);
will-change: transform;
}
.partner-marquee__track:hover {
animation-play-state: paused;
}
/* Gradient Mask for Carousel */
.partner-marquee {
mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
-webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}
/* Custom Scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #020617; }
::-webkit-scrollbar-thumb { background: #334155; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #475569; }
@media (prefers-reduced-motion: reduce) {
.reveal {
opacity: 1;
transform: none;
transition: none;
will-change: auto;
}
.partner-marquee__track {
animation: none;
}
.hero-grid::before,
.hero-grid::after {
animation: none;
}
.approach-orbit::before,
.approach-orbit::after,
.approach-orbit__node,
.approach-card__icon::before {
animation: none;
}
.approach-card,
.approach-card__icon,
.approach-card__icon svg {
transition: none;
}
.approach-card:hover .approach-card__icon {
animation: none;
}
}