/* =========================================================================
1. DESIGN TOKENS
========================================================================= */
:root {
--bg: #ffffff;
--bg-alt: #f7f7f4;
--bg-dark: #0a0a0a;
--bg-dark-elev: #141312;
--ink: #0a0a0a;
--ink-soft: #4a4a4a;
--ink-mute: #a3a3a0;
--ink-inverse: #ffffff;
--ink-inverse-soft: #c9c9c4;
--ink-inverse-mute: #6b6b68;
--brand-blue: #0158F5;
--brand-orange: #FE6B01;
--divider: rgba(10, 10, 10, 0.10);
--divider-strong:rgba(10, 10, 10, 0.16);
--divider-dark: rgba(255, 255, 255, 0.08);
--pill-bg: rgba(10, 10, 10, 0.03);
--pill-border: rgba(10, 10, 10, 0.08);
--r-lg: 28px;
--r-md: 16px;
--r-sm: 10px;
--r-pill:999px;
--max-w: 1360px;
--gutter: clamp(20px, 4vw, 56px);
--section-y: clamp(72px, 10vw, 128px);
--shadow-card:
0 1px 2px rgba(0, 0, 0, 0.04),
0 20px 40px -20px rgba(0, 0, 0, 0.28);
--shadow-card-hover:
0 1px 2px rgba(0, 0, 0, 0.05),
0 30px 60px -20px rgba(0, 0, 0, 0.34);
}
/* =========================================================================
2. RESET + BASE
========================================================================= */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
background: var(--bg);
color: var(--ink);
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
font-size: 16px;
line-height: 1.55;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: 0; background: none; }
ul { list-style: none; }
::selection { background: var(--brand-blue); color: #fff; }
/* =========================================================================
3. UTILITIES
========================================================================= */
.container { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: var(--section-y) 0; position: relative; }
.section--alt { background: var(--bg-alt); }
.section--dark {
background: var(--bg-dark);
color: var(--ink-inverse);
}
.bracket-tag {
color: var(--brand-orange);
font-size: 14px;
font-weight: 500;
letter-spacing: 0.01em;
}
.bracket-tag::before { content: '[ '; }
.bracket-tag::after { content: ' ]'; }
.section-head {
display: grid;
grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.2fr);
gap: 48px;
align-items: start;
padding-bottom: 64px;
}
.section-head h2 {
font-family: 'Inter Tight', sans-serif;
font-size: clamp(30px, 3.4vw, 48px);
font-weight: 600;
line-height: 1.05;
letter-spacing: -0.028em;
max-width: 20ch;
}
.section-head .tag-wrap { display: flex; justify-content: center; padding-top: 10px; }
.section-head .desc {
font-size: 16px;
line-height: 1.55;
color: var(--ink-soft);
max-width: 46ch;
}
.section--dark .section-head .desc { color: var(--ink-inverse-soft); }
/* Buttons */
.btn {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 15px 22px;
border-radius: var(--r-pill);
font-family: 'Inter', sans-serif;
font-size: 15px;
font-weight: 500;
transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
white-space: nowrap;
cursor: pointer;
border: 0;
}
.btn svg { width: 14px; height: 14px; transition: transform 0.25s ease; }
.btn:hover svg { transform: translate(2px, -2px); }
/* PRIMARY CTA — glossy pill with animated brand-blue flowing gradient
and dual blue+orange shadow glow. Applied everywhere on the site
as the single "primary action" button treatment. */
.btn-primary {
position: relative;
overflow: hidden;
isolation: isolate;
color: var(--ink);
font-weight: 600;
border: 1px solid rgba(1, 88, 245, 0.20);
background:
linear-gradient(100deg,
#6BA5FF 0%,
#B4D0FF 22%,
#E5EFFF 42%,
#B4D0FF 58%,
#4A95FF 78%,
#0158F5 100%
);
background-size: 220% 100%;
animation: btn-shine 6s ease-in-out infinite;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.55),
0 2px 8px rgba(1, 88, 245, 0.22),
0 10px 28px -6px rgba(1, 88, 245, 0.32),
0 16px 48px -10px rgba(254, 107, 1, 0.14);
transition:
transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
box-shadow 0.3s ease;
}
.btn-primary:hover {
transform: translateY(-2px);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.60),
0 4px 12px rgba(1, 88, 245, 0.30),
0 14px 36px -4px rgba(1, 88, 245, 0.42),
0 20px 56px -10px rgba(254, 107, 1, 0.22);
}
.btn-primary svg { color: var(--ink); }
@keyframes btn-shine {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
.btn-outline {
background: transparent;
color: var(--ink);
border: 1px solid var(--divider-strong);
}
.btn-outline:hover { background: rgba(10,10,10,0.04); border-color: rgba(10,10,10,0.28); }
.section--dark .btn-outline {
color: #fff;
border-color: rgba(255,255,255,0.20);
}
.section--dark .btn-outline:hover { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.35); }
/* Display type helper */
.display {
font-family: 'Inter Tight', sans-serif;
font-weight: 700;
letter-spacing: -0.032em;
line-height: 0.98;
}
.display .mute { color: var(--ink-mute); font-weight: 700; }
/* Grain overlay reused across dark cards */
.grain::after {
content: '';
position: absolute;
inset: 0;
background-image: url("data:image/svg+xml;utf8,");
opacity: 0.28;
mix-blend-mode: overlay;
pointer-events: none;
z-index: 2;
}
/* =========================================================================
4. (NAV removed — no header)
========================================================================= */
/* =========================================================================
5. STAGE + HERO (sticky hero, gallery covers on scroll)
========================================================================= */
.stage {
position: relative;
/* No overflow-hidden here — that would break position: sticky */
}
.hero {
position: sticky; /* pins to top of viewport during stage scroll */
top: 0;
z-index: 0;
height: 100vh; /* full viewport, no nav to subtract */
min-height: 680px;
max-height: 900px;
display: grid;
grid-template-columns: 1.05fr 1fr;
overflow: hidden;
background: var(--bg);
}
.hero::before {
content: '';
position: absolute;
left: calc(1.05 / 2.05 * 100%);
top: 0; bottom: 0;
width: 1px;
background-image: linear-gradient(to bottom, var(--divider-strong) 50%, transparent 50%);
background-size: 1px 8px;
background-repeat: repeat-y;
z-index: 2;
pointer-events: none;
}
/* Card gallery: slides up and covers the pinned hero on scroll */
.card-gallery {
position: relative;
z-index: 1; /* above hero so it visually covers */
background: var(--bg); /* solid bg so hero is fully occluded */
padding: 88px 0 112px;
}
.card-gallery .grid {
max-width: var(--max-w);
margin: 0 auto;
padding: 0 var(--gutter);
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
/* --- Folder-tab card (from reference video) ---
Structure:
.folder-card
.folder-cover full-bleed image/gradient (z: 1)
.folder-panel positioned bottom half; contains tab + body
.folder-tab protrudes UP above panel top-left (the "tab")
.folder-num big number sitting inside the tab
.folder-body main white panel with content
.folder-arrow top-right corner arrow
.folder-text title + description near bottom
Interaction: on hover, .folder-panel translates DOWN, sliding tab + body
together toward the card's bottom edge — revealing more of the cover.
*/
.folder-card {
position: relative;
aspect-ratio: 4 / 5;
border-radius: 24px;
overflow: hidden;
background: #d5d5d5;
isolation: isolate;
cursor: pointer;
box-shadow: var(--shadow-card);
}
.folder-cover {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 1;
transform: scale(1.02);
transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.folder-card:hover .folder-cover { transform: scale(1.08); }
.folder-panel {
position: absolute;
top: 52%; /* panel occupies bottom 48% - more image visible above */
left: 0; right: 0;
bottom: 0;
z-index: 2;
transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
will-change: transform;
}
.folder-card:hover .folder-panel {
transform: translateY(55%); /* slide down to reveal more of the cover */
}
.folder-tab {
position: absolute;
bottom: 100%; /* sits directly on top of the panel */
left: 0;
width: 48%;
min-width: 130px;
height: 68px;
background: #fff;
border-top-right-radius: 22px;
display: flex;
align-items: flex-end;
padding: 0 22px 12px;
z-index: 2;
}
.folder-num {
font-family: 'Inter Tight', sans-serif;
font-weight: 500;
font-size: 44px;
line-height: 1;
letter-spacing: -0.02em;
color: var(--ink);
}
.folder-body {
position: absolute;
inset: 0;
background: #fff;
border-top-right-radius: 22px;
z-index: 1;
}
.folder-arrow {
position: absolute;
top: 18px;
right: 20px;
width: 22px;
height: 22px;
color: var(--ink);
transition: transform 0.25s ease;
}
.folder-arrow svg { width: 100%; height: 100%; }
.folder-card:hover .folder-arrow { transform: translate(3px, -3px); }
.folder-text {
position: absolute;
bottom: 26px;
left: 22px;
right: 22px;
}
.folder-text h3 {
font-family: 'Inter Tight', sans-serif;
font-weight: 700;
font-size: clamp(18px, 1.6vw, 22px);
line-height: 1.2;
letter-spacing: -0.02em;
color: var(--ink);
margin-bottom: 8px;
}
.folder-text p {
font-size: 14px;
line-height: 1.5;
color: var(--ink-soft);
}
.hero-left {
padding: 80px 64px 64px;
display: flex;
flex-direction: column;
justify-content: center;
max-width: 720px;
}
.hero-badge {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 9px 16px 9px 12px;
background: var(--pill-bg);
border: 1px solid var(--pill-border);
border-radius: var(--r-pill);
align-self: flex-start;
margin-bottom: 36px;
}
.hero-badge .dot {
width: 8px; height: 8px; border-radius: 50%;
background: var(--brand-blue);
box-shadow: 0 0 0 3px rgba(1, 88, 245, 0.18);
animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse {
0%,100% { box-shadow: 0 0 0 3px rgba(1,88,245,0.18); }
50% { box-shadow: 0 0 0 6px rgba(1,88,245,0.06); }
}
.hero-badge span:last-child {
font-size: 12px;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--ink-soft);
}
.hero h1 {
font-family: 'Inter Tight', sans-serif;
font-weight: 700;
font-size: clamp(36px, 4.4vw, 60px);
line-height: 1.0;
letter-spacing: -0.028em;
margin-bottom: 20px;
}
.hero h1 .mute { color: var(--ink-mute); font-weight: 700; }
.hero-sub {
font-size: 16px;
line-height: 1.55;
color: var(--ink-soft);
max-width: 460px;
margin-bottom: 28px;
}
.hero-ctas { display: flex; gap: 12px; align-items: center; }
.hero-right {
position: relative;
overflow: hidden;
padding: 24px 24px 24px 24px;
-webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 8%, #000 92%, transparent 100%);
mask-image: linear-gradient(to bottom, transparent 0%, #000 8%, #000 92%, transparent 100%);
}
.marquee-track {
display: flex;
flex-direction: column;
gap: 20px;
animation: scroll-up 52s linear infinite;
will-change: transform;
}
.hero-right:hover .marquee-track { animation-play-state: paused; }
@keyframes scroll-up {
from { transform: translateY(0); }
to { transform: translateY(-50%); }
}
/* Service card (used in hero marquee AND services section) */
.svc-card {
position: relative;
display: block;
border-radius: var(--r-lg);
overflow: hidden;
color: #fff;
isolation: isolate;
flex-shrink: 0;
box-shadow: var(--shadow-card);
transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.svc-card:hover { transform: scale(1.008); }
.svc-card::before { /* radial light source */
content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
}
.svc-card-inner {
position: relative; z-index: 3;
height: 100%;
padding: 26px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.svc-meta {
display: flex;
justify-content: space-between;
align-items: flex-start;
font-size: 11px;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: rgba(255,255,255,0.62);
}
.svc-index { font-family: 'Inter Tight', sans-serif; }
.svc-title {
font-family: 'Inter Tight', sans-serif;
font-weight: 700;
font-size: 32px;
line-height: 1.02;
letter-spacing: -0.024em;
color: #fff;
}
.svc-title .arrow {
display: inline-block;
margin-left: 6px;
opacity: 0.75;
transition: transform 0.25s ease, opacity 0.25s ease;
}
.svc-card:hover .svc-title .arrow { transform: translate(3px, -3px); opacity: 1; }
/* Hero-scale marquee cards */
.hero-right .svc-card { height: clamp(400px, 58vh, 580px); width: 100%; }
/* Landscape image-card variant — used in the hero marquee for the
branded service tiles. Aspect-ratio keeps the 16:9 crop, image fills. */
.hero-right .svc-card--image {
height: auto;
aspect-ratio: 16 / 9;
background: #f5f5f4;
border: 1px solid var(--divider);
box-shadow:
0 2px 6px rgba(0,0,0,0.04),
0 10px 28px -12px rgba(0,0,0,0.12);
}
.svc-card--image img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.svc-card--image:hover img { transform: scale(1.04); }
/* Per-card gradients (shared across hero marquee + services) */
.c-content {
background: radial-gradient(circle at 60% 25%, #2a2a2a 0%, #0f0f0f 55%, #050505 100%);
}
.c-content::before {
background:
radial-gradient(circle at 60% 25%, rgba(255,255,255,0.14), transparent 45%),
radial-gradient(circle at 20% 100%, rgba(0,0,0,0.5), transparent 55%);
}
.c-reputation {
background: linear-gradient(160deg, #f5f5f4 0%, #d4d4d1 50%, #a8a8a4 100%);
color: var(--ink);
}
.c-reputation::before {
background:
radial-gradient(circle at 30% 20%, rgba(255,255,255,0.7), transparent 40%),
radial-gradient(circle at 80% 90%, rgba(0,0,0,0.12), transparent 55%);
}
.c-reputation .svc-title { color: var(--ink); }
.c-reputation .svc-meta { color: rgba(10,10,10,0.55); }
.c-seo {
background: radial-gradient(circle at 65% 40%, #2a7bff 0%, #0158F5 42%, #011f5a 100%);
}
.c-seo::before {
background:
radial-gradient(circle at 65% 40%, rgba(180,210,255,0.35), transparent 45%),
radial-gradient(circle at 15% 100%, rgba(0,0,15,0.55), transparent 55%);
}
.c-aeo {
background: radial-gradient(ellipse at 20% 30%, #1a1a1a 0%, #060606 50%, #000 100%);
}
.c-aeo::before {
background:
radial-gradient(circle at 20% 30%, rgba(255,255,255,0.12), transparent 42%),
linear-gradient(to bottom right, transparent 60%, rgba(0,0,0,0.6));
}
.c-performance {
background: radial-gradient(circle at 45% 55%, #ff8a3a 0%, #FE6B01 45%, #6a2400 100%);
}
.c-performance::before {
background:
radial-gradient(circle at 45% 55%, rgba(255,220,180,0.32), transparent 42%),
radial-gradient(circle at 90% 10%, rgba(0,0,0,0.35), transparent 55%);
}
.c-social {
background: radial-gradient(circle at 40% 60%, #4a4a4a 0%, #202020 50%, #0a0a0a 100%);
}
.c-social::before {
background:
radial-gradient(circle at 40% 60%, rgba(255,255,255,0.15), transparent 45%),
radial-gradient(circle at 85% 15%, rgba(0,0,0,0.45), transparent 55%);
}
.c-ugc {
background: linear-gradient(170deg, #ffffff 0%, #ededea 55%, #d8d8d3 100%);
color: var(--ink);
box-shadow: var(--shadow-card), inset 0 0 0 1px rgba(10,10,10,0.06);
}
.c-ugc::before {
background:
radial-gradient(circle at 70% 30%, rgba(255,255,255,0.9), transparent 50%),
radial-gradient(circle at 15% 100%, rgba(0,0,0,0.08), transparent 55%);
}
.c-ugc .svc-title { color: var(--ink); }
.c-ugc .svc-meta { color: rgba(10,10,10,0.5); }
.c-influencer {
background: linear-gradient(150deg, #1f1f1f 0%, #0a0a0a 60%, #000 100%);
}
.c-influencer::before {
background:
linear-gradient(120deg, rgba(255,255,255,0.14) 0%, transparent 30%),
radial-gradient(circle at 80% 90%, rgba(0,0,0,0.5), transparent 55%);
}
.c-web {
background: radial-gradient(circle at 30% 70%, #16324a 0%, #0a1a2a 55%, #050d16 100%);
}
.c-web::before {
background:
radial-gradient(circle at 30% 70%, rgba(150,190,255,0.20), transparent 45%),
radial-gradient(circle at 90% 10%, rgba(0,0,0,0.45), transparent 55%);
}
/* =========================================================================
6. TRUST STRIP (5 capability pillars)
========================================================================= */
.trust-strip {
border-top: 1px solid var(--divider);
border-bottom: 1px solid var(--divider);
padding: 32px 0;
background: var(--bg);
}
.trust-grid {
max-width: var(--max-w);
margin: 0 auto;
padding: 0 var(--gutter);
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 0;
}
.trust-cell {
padding: 12px 24px;
border-right: 1px solid var(--divider);
}
.trust-cell:last-child { border-right: 0; }
.trust-cell:first-child { padding-left: 0; }
.trust-cell:last-child { padding-right: 0; }
.trust-cell h4 {
font-family: 'Inter Tight', sans-serif;
font-weight: 600;
font-size: 16px;
letter-spacing: -0.01em;
margin-bottom: 6px;
color: var(--ink);
}
.trust-cell p {
font-size: 13px;
line-height: 1.45;
color: var(--ink-soft);
}
/* =========================================================================
7. SERVICES (4 pillar cards, 2x2 grid)
========================================================================= */
/* Services scroll-carousel — 4 cards in the same viewport space.
As the user scrolls through the carousel container, JS swaps which
card is .is-active. Previous cards tilt backward and lift up
dramatically (rotateX + translateY); the next card peeks from below
waiting its turn. Reads like a 3D deck reveal. */
.services-carousel {
position: relative;
height: 400vh; /* 4 cards × one viewport each */
}
.services-stage {
position: sticky;
top: 0;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
perspective: 1200px;
perspective-origin: 50% 30%;
overflow: hidden;
padding: 0 var(--gutter);
}
.services-grid {
position: relative;
width: 100%;
max-width: 1240px;
height: 500px;
}
.services-grid > .pillar-card {
position: absolute;
inset: 0;
height: 500px;
padding: 40px 48px;
transform-origin: 50% 100%; /* pivot from bottom edge */
transform-style: preserve-3d;
will-change: transform, opacity;
transition:
transform 0.75s cubic-bezier(0.22, 1, 0.36, 1),
opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1);
backface-visibility: hidden;
/* DEFAULT (future card): hidden below, waiting */
opacity: 0;
transform: translateY(80px) scale(0.90);
z-index: 1;
}
/* Card immediately AFTER active — peeks from below the active card
with a bottom-strip visible, signalling there's more to come */
.services-grid > .pillar-card.is-next {
opacity: 1;
transform: translateY(28px) scale(0.96);
z-index: 10;
}
/* Card CURRENTLY active — flat, prominent, full size, in front */
.services-grid > .pillar-card.is-active {
opacity: 1;
transform: translateY(0) scale(1);
z-index: 20;
}
/* Card that has been PAST (user scrolled beyond it) — tilts backward
dramatically on X-axis, lifts up out of view, fades out */
.services-grid > .pillar-card.is-past {
opacity: 0;
transform: translateY(-220px) rotateX(-32deg) scale(0.92);
z-index: 5;
pointer-events: none;
}
/* Landscape internal layout — the middle wrapper div (not .pillar-head)
becomes a 2-column grid using named areas so title+tagline sit left
and the services pill list sits right. Middle div is content-sized
(no flex:1) so pillar-card's own space-between flex distributes
head, content and cta evenly across the card. */
.services-grid > .pillar-card > div:not(.pillar-head) {
display: grid;
grid-template-columns: 1.4fr 1fr;
grid-template-areas:
"title services"
"tagline services";
grid-template-rows: auto auto;
gap: 14px 48px;
}
.services-grid > .pillar-card > div:not(.pillar-head) > .pillar-title {
grid-area: title;
margin-top: 0;
}
.services-grid > .pillar-card > div:not(.pillar-head) > .pillar-tagline {
grid-area: tagline;
margin-top: 0;
max-width: 100%;
}
.services-grid > .pillar-card > div:not(.pillar-head) > .pillar-services {
grid-area: services;
align-self: end;
margin-top: 0;
max-width: none;
height: fit-content;
}
/* Disable hover translateY (would fight the sticky positioning) — keep
subtle box-shadow change only */
.services-grid > .pillar-card:hover {
transform: none;
box-shadow: var(--shadow-card-hover);
}
.pillar-card {
position: relative;
height: 440px;
border-radius: var(--r-lg);
overflow: hidden;
color: #fff;
padding: 32px;
isolation: isolate;
box-shadow: var(--shadow-card);
transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
display: flex;
flex-direction: column;
justify-content: space-between;
}
.pillar-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card-hover); }
.pillar-card::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.pillar-card > * { position: relative; z-index: 3; }
.pillar-bg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 2;
opacity: 0.32;
mix-blend-mode: overlay;
pointer-events: none;
border-radius: inherit;
}
/* Light cards (c-reputation, c-ugc) need a much softer image so dark text stays readable */
.c-reputation .pillar-bg,
.c-ugc .pillar-bg {
opacity: 0.14;
mix-blend-mode: multiply;
}
.pillar-head {
display: flex;
justify-content: space-between;
align-items: flex-start;
font-size: 11px;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: rgba(255,255,255,0.62);
}
.pillar-title {
font-family: 'Inter Tight', sans-serif;
font-weight: 700;
font-size: clamp(28px, 3vw, 40px);
line-height: 1.02;
letter-spacing: -0.028em;
color: #fff;
margin-top: 24px;
}
.pillar-tagline {
color: rgba(255,255,255,0.72);
font-size: 15px;
margin-top: 12px;
max-width: 40ch;
}
.pillar-services {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 24px;
}
.pillar-services li {
font-size: 12px;
font-weight: 500;
letter-spacing: 0.02em;
padding: 6px 12px;
background: rgba(255,255,255,0.10);
border: 1px solid rgba(255,255,255,0.14);
border-radius: var(--r-pill);
color: rgba(255,255,255,0.9);
backdrop-filter: blur(6px);
}
.pillar-cta {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 14px;
font-weight: 500;
color: #fff;
margin-top: 24px;
align-self: flex-start;
transition: gap 0.2s ease;
}
.pillar-cta::after { content: '→'; transition: transform 0.25s ease; }
.pillar-card:hover .pillar-cta { gap: 10px; }
.pillar-card:hover .pillar-cta::after { transform: translateX(2px); }
/* Feature card overrides (light card) */
.pillar-card.c-reputation .pillar-title,
.pillar-card.c-reputation .pillar-tagline,
.pillar-card.c-reputation .pillar-cta,
.pillar-card.c-ugc .pillar-title,
.pillar-card.c-ugc .pillar-tagline,
.pillar-card.c-ugc .pillar-cta { color: var(--ink); }
.pillar-card.c-reputation .pillar-head,
.pillar-card.c-ugc .pillar-head { color: rgba(10,10,10,0.5); }
.pillar-card.c-reputation .pillar-services li,
.pillar-card.c-ugc .pillar-services li {
background: rgba(10,10,10,0.05);
border-color: rgba(10,10,10,0.08);
color: var(--ink);
}
/* =========================================================================
8. BUSINESS CHALLENGE → OUTCOME (bento grid — asymmetric layout)
========================================================================= */
.bento-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: minmax(220px, auto) minmax(220px, auto) minmax(200px, auto);
grid-template-areas:
"a a b"
"c d e"
"c f f";
gap: 14px;
}
.bento-cell {
position: relative;
padding: 28px 26px 24px;
border-radius: var(--r-md);
overflow: hidden;
isolation: isolate;
transition:
transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
box-shadow 0.4s ease;
display: flex;
flex-direction: column;
gap: 12px;
cursor: default;
}
.bento-cell:hover {
transform: translateY(-4px);
box-shadow: 0 16px 40px -12px rgba(0,0,0,0.12);
}
/* --- Grid area assignments --- */
.bento-a { grid-area: a; }
.bento-b { grid-area: b; }
.bento-c { grid-area: c; }
.bento-d { grid-area: d; }
.bento-e { grid-area: e; }
.bento-f { grid-area: f; }
/* --- Visual treatments per cell (mixed for bento variety) --- */
/* A — big top-left, dark card with huge watermark number */
.bento-a {
background: linear-gradient(140deg, #262626 0%, #0a0a0a 100%);
color: #fff;
padding: 36px 34px 30px;
}
/* Watermark numeral behind content on the big card */
.bento-a::before {
content: '01';
position: absolute;
top: 8px; right: 20px;
font-family: 'Inter Tight', sans-serif;
font-weight: 800;
font-size: 220px;
line-height: 1;
letter-spacing: -0.05em;
color: transparent;
-webkit-text-stroke: 1.5px rgba(255,255,255,0.06);
z-index: -1;
pointer-events: none;
}
/* B, D — plain light cards with border */
.bento-b, .bento-d {
background: var(--bg);
border: 1px solid var(--divider);
}
.bento-b:hover, .bento-d:hover { border-color: var(--brand-blue); }
/* C — tall featured card in brand blue */
.bento-c {
background: linear-gradient(160deg, #4a95ff 0%, #0158F5 55%, #002d80 100%);
color: #fff;
padding: 32px 30px 30px;
}
.bento-c::before {
content: '03';
position: absolute;
bottom: -30px; right: -10px;
font-family: 'Inter Tight', sans-serif;
font-weight: 800;
font-size: 280px;
line-height: 1;
letter-spacing: -0.05em;
color: transparent;
-webkit-text-stroke: 1.5px rgba(255,255,255,0.14);
z-index: -1;
pointer-events: none;
}
/* E — brand orange accent card */
.bento-e {
background: linear-gradient(160deg, #ffa15c 0%, #FE6B01 55%, #7a2a00 100%);
color: #fff;
}
/* F — wide CTA card, dark */
.bento-f {
background: linear-gradient(140deg, #262626 0%, #0a0a0a 100%);
color: #fff;
padding: 30px 34px 30px;
flex-direction: row;
align-items: center;
justify-content: space-between;
gap: 32px;
}
/* --- Content within cells --- */
.bento-num {
font-family: 'Inter Tight', sans-serif;
font-size: 11px;
font-weight: 500;
letter-spacing: 0.16em;
text-transform: uppercase;
opacity: 0.7;
}
.bento-a .bento-num, .bento-c .bento-num, .bento-e .bento-num, .bento-f .bento-num {
color: rgba(255,255,255,0.75);
}
.bento-b .bento-num, .bento-d .bento-num { color: var(--brand-orange); }
.bento-problem {
font-family: 'Inter Tight', sans-serif;
font-weight: 700;
line-height: 1.15;
letter-spacing: -0.02em;
margin: 0;
}
.bento-a .bento-problem, .bento-c .bento-problem { font-size: 32px; }
.bento-b .bento-problem, .bento-d .bento-problem, .bento-e .bento-problem { font-size: 20px; color: var(--ink); }
.bento-a .bento-problem, .bento-c .bento-problem, .bento-e .bento-problem { color: #fff; }
.bento-outcome {
font-family: 'Inter', sans-serif;
font-size: 14px;
line-height: 1.55;
margin: 0;
margin-top: auto;
padding-top: 12px;
border-top: 1px solid rgba(255,255,255,0.14);
}
.bento-a .bento-outcome, .bento-c .bento-outcome, .bento-e .bento-outcome {
color: rgba(255,255,255,0.82);
}
.bento-b .bento-outcome, .bento-d .bento-outcome {
color: var(--ink-soft);
border-top-color: var(--divider);
}
/* F (CTA card) special content layout */
.bento-f .bento-cta-text {
flex: 1;
}
.bento-f h4 {
font-family: 'Inter Tight', sans-serif;
font-weight: 700;
font-size: 22px;
line-height: 1.2;
letter-spacing: -0.02em;
color: #fff;
margin: 0 0 6px;
}
.bento-f p {
font-size: 14px;
line-height: 1.5;
color: rgba(255,255,255,0.7);
margin: 0;
}
/* Bento stagger reveal — each cell fades up on its own delay */
.bento-grid > .bento-cell {
opacity: 0;
transform: translateY(28px);
transition:
opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
transform 0.7s cubic-bezier(0.22, 1, 0.36, 1),
box-shadow 0.4s ease;
}
.bento-grid.is-in > .bento-cell { opacity: 1; transform: translateY(0); }
.bento-grid.is-in > .bento-a { transition-delay: 0ms; }
.bento-grid.is-in > .bento-b { transition-delay: 100ms; }
.bento-grid.is-in > .bento-c { transition-delay: 200ms; }
.bento-grid.is-in > .bento-d { transition-delay: 300ms; }
.bento-grid.is-in > .bento-e { transition-delay: 400ms; }
.bento-grid.is-in > .bento-f { transition-delay: 500ms; }
/* Once revealed, keep hover translate but preserve the settled position */
.bento-grid.is-in > .bento-cell:hover { transform: translateY(-4px); }
/* Legacy solution-grid classes kept for backwards compatibility */
.solution-grid { display: none; }
/* Legacy classes kept for backwards compatibility (unused after redesign) */
.challenge-table { display: none; }
/* =========================================================================
9. HOW WE WORK (6 interactive step cards)
========================================================================= */
.steps-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
.step-card {
background: var(--bg-dark-elev);
color: var(--ink-inverse);
border-radius: var(--r-md);
padding: 26px 24px 28px;
display: flex;
flex-direction: column;
gap: 20px;
cursor: pointer;
border: 1px solid rgba(255,255,255,0.05);
transition:
transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
border-color 0.4s ease,
background 0.4s ease;
will-change: transform;
position: relative;
overflow: hidden;
}
.step-card::after {
content: '';
position: absolute;
top: -60%; right: -30%;
width: 260px; height: 260px;
border-radius: 50%;
background: radial-gradient(circle, rgba(1,88,245,0.16), transparent 60%);
opacity: 0;
transition: opacity 0.6s ease;
pointer-events: none;
}
.step-card:hover {
transform: translateY(-8px);
border-color: rgba(255,255,255,0.14);
background: #1a1918;
}
.step-card:hover::after { opacity: 1; }
.step-head {
display: flex;
justify-content: space-between;
align-items: center;
}
.step-number {
font-family: 'Inter Tight', sans-serif;
font-weight: 500;
font-size: 13px;
letter-spacing: 0.06em;
color: var(--brand-orange);
}
.step-icon-wrap {
width: 44px; height: 44px;
border-radius: 10px;
background: rgba(255,255,255,0.05);
display: flex;
align-items: center;
justify-content: center;
border: 1px solid rgba(255,255,255,0.08);
transition: background 0.3s ease, border-color 0.3s ease;
}
.step-card:hover .step-icon-wrap {
background: rgba(1,88,245,0.15);
border-color: rgba(1,88,245,0.35);
}
.step-icon {
width: 22px; height: 22px;
color: var(--ink-inverse);
stroke: currentColor;
fill: none;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}
.step-title {
font-family: 'Inter Tight', sans-serif;
font-weight: 700;
font-size: 22px;
line-height: 1.15;
letter-spacing: -0.018em;
color: var(--ink-inverse);
margin-top: 4px;
}
.step-desc {
color: var(--ink-inverse-soft);
font-size: 14px;
line-height: 1.55;
}
/* -- Icon animations on hover -- */
.i-discover .scan { transform-origin: center; transition: transform 0.4s ease; }
.step-card:hover .i-discover .scan { animation: scan-move 2s ease-in-out infinite; }
@keyframes scan-move { 0%,100% { transform: translateX(0); } 50% { transform: translateX(3px); } }
.i-strategize .pin { transform-origin: center; transition: transform 0.4s ease; }
.step-card:hover .i-strategize .pin { animation: pin-bob 1.6s ease-in-out infinite; }
@keyframes pin-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }
.i-build .block { transform-origin: center bottom; transition: transform 0.4s ease; }
.step-card:hover .i-build .b1 { animation: build-rise 1.6s ease-in-out infinite; animation-delay: 0s; }
.step-card:hover .i-build .b2 { animation: build-rise 1.6s ease-in-out infinite; animation-delay: 0.15s; }
.step-card:hover .i-build .b3 { animation: build-rise 1.6s ease-in-out infinite; animation-delay: 0.30s; }
@keyframes build-rise { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }
.i-launch .plane {
transform-origin: center;
transition: transform 0.6s cubic-bezier(0.4,0,0.2,1);
}
.step-card:hover .i-launch .plane { animation: launch-fly 1.8s ease-in-out infinite; }
@keyframes launch-fly {
0%,100% { transform: translate(0,0); }
50% { transform: translate(2px,-2px); }
}
.i-optimize .knob { transition: transform 0.4s ease; }
.step-card:hover .i-optimize .k1 { animation: knob-slide 2s ease-in-out infinite; }
.step-card:hover .i-optimize .k2 { animation: knob-slide 2s ease-in-out infinite reverse; animation-delay: 0.3s; }
@keyframes knob-slide { 0%,100% { transform: translateX(0); } 50% { transform: translateX(4px); } }
.i-scale .bar { transform-origin: bottom; transition: transform 0.4s ease; }
.step-card:hover .i-scale .sb1 { animation: bar-pop 1.8s ease-in-out infinite; animation-delay: 0s; }
.step-card:hover .i-scale .sb2 { animation: bar-pop 1.8s ease-in-out infinite; animation-delay: 0.15s; }
.step-card:hover .i-scale .sb3 { animation: bar-pop 1.8s ease-in-out infinite; animation-delay: 0.30s; }
@keyframes bar-pop { 0%,100% { transform: scaleY(1); } 50% { transform: scaleY(1.15); } }
/* =========================================================================
10. AEO / GEO (dark feature section)
========================================================================= */
.aeo-section .section-head h2 { max-width: 24ch; }
.aeo-focus-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 16px;
padding-top: 8px;
}
.aeo-focus {
padding: 24px 22px 26px;
border: 1px solid rgba(255,255,255,0.10);
border-radius: var(--r-md);
background: linear-gradient(180deg, rgba(255,255,255,0.02), transparent);
transition: transform 0.35s ease, border-color 0.35s ease, background 0.35s ease;
}
.aeo-focus:hover {
transform: translateY(-4px);
border-color: rgba(254,102,1,0.5);
background: linear-gradient(180deg, rgba(254,102,1,0.08), transparent);
}
.aeo-focus .num {
font-family: 'Inter Tight', sans-serif;
font-weight: 500;
font-size: 12px;
letter-spacing: 0.08em;
color: var(--brand-orange);
margin-bottom: 20px;
display: block;
}
.aeo-focus h4 {
font-family: 'Inter Tight', sans-serif;
font-weight: 700;
font-size: 18px;
line-height: 1.2;
letter-spacing: -0.015em;
color: var(--ink-inverse);
margin-bottom: 10px;
}
.aeo-focus p {
font-size: 13px;
line-height: 1.55;
color: var(--ink-inverse-soft);
}
.aeo-flow {
margin-top: 64px;
padding: 40px 32px;
border: 1px dashed rgba(255,255,255,0.14);
border-radius: var(--r-md);
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
flex-wrap: wrap;
}
.aeo-flow-step {
flex: 1;
min-width: 140px;
text-align: center;
}
.aeo-flow-step .icon {
width: 44px; height: 44px;
border-radius: 50%;
background: rgba(1,88,245,0.15);
color: var(--brand-blue);
display: inline-flex;
align-items: center;
justify-content: center;
margin-bottom: 12px;
}
.aeo-flow-step .icon svg { width: 20px; height: 20px; }
.aeo-flow-step .label {
display: block;
font-family: 'Inter Tight', sans-serif;
font-weight: 600;
font-size: 15px;
color: var(--ink-inverse);
}
.aeo-flow-arrow {
color: var(--ink-inverse-mute);
font-size: 20px;
padding: 0 6px;
}
.aeo-flow-step:last-child .icon {
background: rgba(254,102,1,0.15);
color: var(--brand-orange);
}
/* =========================================================================
11. INDUSTRIES / SERVICES — pill grid with tumble-in entry
Pills start scattered above/around with heavy rotation, then cascade
into a neat responsive grid layout and stay put.
========================================================================= */
.industries-orbit {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 16px 20px;
place-items: center;
padding: 40px 40px 0;
margin: 24px auto 0;
max-width: 1080px;
}
/* Override: static positioning inside grid + disable the perpetual float */
.industries-orbit .orbit-card {
position: static;
padding: 15px 26px;
font-size: 16px;
font-weight: 600;
letter-spacing: -0.005em;
animation: none !important; /* no continuous drift — pills settle */
/* Entry state: each pill starts at a unique offset above/aside with
heavy rotation, then tumbles into its grid cell */
opacity: 0;
transform:
translate(var(--start-x, 0), var(--start-y, -200px))
rotate(var(--start-rot, 40deg))
scale(var(--start-scale, 0.85));
transition:
opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
transform 1.4s cubic-bezier(0.34, 1.56, 0.64, 1); /* springy landing */
}
/* Landed state: neutral position, no rotation, full scale */
.industries-orbit.is-in .orbit-card {
opacity: 1;
transform: translate(0, 0) rotate(0deg) scale(1);
}
/* Per-pill entry variables — unique starting offset + rotation for each,
so pills don't fall in unison. Positive rotations spin clockwise,
negative counter-clockwise. Y is always negative (pills come from
above) but X varies so they arrive from different angles. */
.industries-orbit .i1 { --start-x: -60px; --start-y: -180px; --start-rot: -38deg; }
.industries-orbit .i2 { --start-x: 40px; --start-y: -220px; --start-rot: 32deg; }
.industries-orbit .i3 { --start-x: -20px; --start-y: -160px; --start-rot: -45deg; }
.industries-orbit .i4 { --start-x: 60px; --start-y: -190px; --start-rot: 28deg; }
.industries-orbit .i5 { --start-x: -50px; --start-y: -210px; --start-rot: 42deg; }
.industries-orbit .i6 { --start-x: 30px; --start-y: -170px; --start-rot: -30deg; }
.industries-orbit .i7 { --start-x: -40px; --start-y: -200px; --start-rot: 48deg; }
.industries-orbit .i8 { --start-x: 50px; --start-y: -230px; --start-rot: -35deg; }
.industries-orbit .i9 { --start-x: -30px; --start-y: -180px; --start-rot: 25deg; }
.industries-orbit .i10 { --start-x: 45px; --start-y: -210px; --start-rot: -40deg; }
.industries-orbit .i11 { --start-x: -55px; --start-y: -170px; --start-rot: 36deg; }
.industries-orbit .i12 { --start-x: 35px; --start-y: -195px; --start-rot: -28deg; }
/* Staggered entry delays — a cascading waterfall so pills arrive one
after another rather than all at once. ~100ms between each. */
.orbit-frame.is-in .orbit-card:nth-of-type(1) { transition-delay: 0ms; }
.orbit-frame.is-in .orbit-card:nth-of-type(2) { transition-delay: 100ms; }
.orbit-frame.is-in .orbit-card:nth-of-type(3) { transition-delay: 200ms; }
.orbit-frame.is-in .orbit-card:nth-of-type(4) { transition-delay: 300ms; }
.orbit-frame.is-in .orbit-card:nth-of-type(5) { transition-delay: 400ms; }
.orbit-frame.is-in .orbit-card:nth-of-type(6) { transition-delay: 500ms; }
.orbit-frame.is-in .orbit-card:nth-of-type(7) { transition-delay: 600ms; }
.orbit-frame.is-in .orbit-card:nth-of-type(8) { transition-delay: 700ms; }
.orbit-frame.is-in .orbit-card:nth-of-type(9) { transition-delay: 800ms; }
.orbit-frame.is-in .orbit-card:nth-of-type(10) { transition-delay: 900ms; }
.orbit-frame.is-in .orbit-card:nth-of-type(11) { transition-delay: 1000ms; }
.orbit-frame.is-in .orbit-card:nth-of-type(12) { transition-delay: 1100ms; }
.orbit-frame.is-in .orbit-card:nth-of-type(13) { transition-delay: 1200ms; }
/* Center the section head — the pill grid sits below it */
.industries-section .section-head {
grid-template-columns: 1fr;
text-align: center;
padding-bottom: 32px;
gap: 16px;
}
.industries-section .section-head h2 {
margin: 0 auto;
max-width: 22ch;
}
.industries-section .section-head .tag-wrap { justify-content: center; padding-top: 0; }
/* =========================================================================
12. WHY US (differentiators)
========================================================================= */
.why-list {
display: grid;
grid-template-columns: 1fr;
border-top: 1px solid var(--divider);
}
.why-row {
display: grid;
grid-template-columns: 80px minmax(0, 1fr) minmax(0, 1.5fr);
gap: 32px;
align-items: center;
padding: 28px 0;
border-bottom: 1px solid var(--divider);
transition: background 0.25s ease;
}
.why-row:hover { background: rgba(1,88,245,0.02); }
.why-num {
font-family: 'Inter Tight', sans-serif;
font-weight: 500;
font-size: 14px;
color: var(--brand-blue);
letter-spacing: 0.04em;
}
.why-title {
font-family: 'Inter Tight', sans-serif;
font-weight: 600;
font-size: clamp(20px, 2.2vw, 26px);
letter-spacing: -0.015em;
color: var(--ink);
}
.why-desc {
font-size: 15px;
line-height: 1.55;
color: var(--ink-soft);
}
/* =========================================================================
13. FAQ (accordion)
========================================================================= */
.faq-grid { display: grid; grid-template-columns: 1fr; gap: 0; border-top: 1px solid var(--divider); }
.faq-item {
border-bottom: 1px solid var(--divider);
}
.faq-item summary {
list-style: none;
padding: 24px 0;
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
cursor: pointer;
font-family: 'Inter Tight', sans-serif;
font-weight: 600;
font-size: clamp(17px, 1.6vw, 20px);
letter-spacing: -0.012em;
color: var(--ink);
transition: color 0.2s ease;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--brand-blue); }
.faq-icon {
width: 32px; height: 32px;
border-radius: 50%;
border: 1px solid var(--divider-strong);
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), background 0.25s ease, border-color 0.25s ease;
}
.faq-icon::before, .faq-icon::after {
content: '';
position: absolute;
background: currentColor;
border-radius: 2px;
transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.faq-icon::before { width: 12px; height: 1.5px; }
.faq-icon::after { width: 1.5px; height: 12px; }
.faq-item[open] .faq-icon {
background: var(--brand-orange);
border-color: var(--brand-orange);
color: #fff;
}
.faq-item[open] .faq-icon::after { transform: scaleY(0); }
.faq-answer {
padding: 0 0 28px 0;
font-size: 15px;
line-height: 1.65;
color: var(--ink-soft);
max-width: 72ch;
}
/* =========================================================================
14. FINAL CTA (animated gradient banner)
========================================================================= */
.final-cta {
padding: clamp(60px, 8vw, 120px) 0;
background: var(--bg); /* section background — page-color, not the banner */
}
/* The banner itself — rounded, inset, animated brand-color gradient */
.final-cta-banner {
position: relative;
border-radius: clamp(24px, 3vw, 40px);
padding: clamp(60px, 9vw, 120px) clamp(32px, 6vw, 80px);
text-align: center;
color: #ffffff;
overflow: hidden;
isolation: isolate;
box-shadow:
0 8px 32px -12px rgba(1, 88, 245, 0.30),
0 30px 80px -30px rgba(254, 107, 1, 0.24);
/* Multi-stop brand-color gradient — no white, only tonal variants of
brand blue and brand orange. Bigger than the container (260%) +
slow horizontal animation creates the flowing bands effect. */
background:
linear-gradient(
105deg,
#0158F5 0%,
#4a95ff 10%,
#6ba5ff 20%,
#0158F5 32%,
#0140b5 42%,
#0a2e7d 50%,
#7a2a00 55%,
#FE6B01 62%,
#ff8a3a 72%,
#0140b5 84%,
#0158F5 100%
);
background-size: 260% 100%;
background-position: 0% 50%;
animation: cta-flow 14s ease-in-out infinite;
}
/* Subtle grain texture on top of the gradient for depth */
.final-cta-banner::after {
content: '';
position: absolute;
inset: 0;
background-image: url("data:image/svg+xml;utf8,");
opacity: 0.10;
mix-blend-mode: overlay;
pointer-events: none;
z-index: 1;
}
/* Content sits above the animated background */
.final-cta-banner > * { position: relative; z-index: 2; }
@keyframes cta-flow {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
/* Content styling inside the banner */
.final-cta-banner .eyebrow {
font-family: 'Inter Tight', sans-serif;
font-weight: 500;
font-size: 13px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.85);
margin-bottom: 24px;
display: inline-block;
padding: 6px 14px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.14);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
.final-cta-banner h2 {
font-family: 'Inter Tight', sans-serif;
font-weight: 700;
font-size: clamp(34px, 5vw, 64px);
line-height: 1.02;
letter-spacing: -0.03em;
max-width: 22ch;
margin: 0 auto 24px;
color: #ffffff;
text-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
}
.final-cta-banner p {
max-width: 52ch;
margin: 0 auto 40px;
color: rgba(255, 255, 255, 0.88);
font-size: 17px;
line-height: 1.6;
text-shadow: 0 1px 6px rgba(0, 0, 0, 0.10);
}
.final-cta-banner .ctas {
display: inline-flex;
gap: 12px;
margin-bottom: 40px;
flex-wrap: wrap;
justify-content: center;
}
.final-cta-banner .btn-outline {
background: rgba(255, 255, 255, 0.14);
color: #ffffff;
border: 1px solid rgba(255, 255, 255, 0.42);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
.final-cta-banner .btn-outline:hover {
background: rgba(255, 255, 255, 0.22);
border-color: rgba(255, 255, 255, 0.60);
transform: translateY(-2px);
}
.final-cta-banner .tagline {
font-family: 'Inter Tight', sans-serif;
font-weight: 500;
font-size: 13px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.80);
}
@media (max-width: 700px) {
.final-cta-banner {
border-radius: 24px;
padding: 60px 24px;
}
.final-cta-banner .ctas { flex-direction: column; width: 100%; }
.final-cta-banner .ctas .btn { justify-content: center; }
}
/* =========================================================================
15. (FOOTER removed — no footer)
========================================================================= */
/* =========================================================================
16. RESPONSIVE
========================================================================= */
@media (max-width: 1024px) {
.services-carousel { height: auto; }
.services-stage {
position: static;
height: auto;
perspective: none;
padding: 24px 0;
}
.services-grid { display: flex; flex-direction: column; gap: 20px; height: auto; padding-bottom: 0; }
.services-grid > .pillar-card {
position: static;
height: auto;
min-height: 480px;
margin-bottom: 0;
padding: 32px;
opacity: 1 !important;
transform: none !important;
}
.services-grid > .pillar-card > div:not(.pillar-head) {
display: flex;
flex-direction: column;
gap: 16px;
padding-top: 0;
}
.services-grid > .pillar-card > div:not(.pillar-head) > .pillar-services { align-self: stretch; }
.aeo-focus-grid { grid-template-columns: repeat(2, 1fr); }
.steps-grid { grid-template-columns: repeat(2, 1fr); }
.trust-grid { grid-template-columns: repeat(2, 1fr); }
.trust-cell { border-right: 0; border-bottom: 1px solid var(--divider); padding: 16px 0; }
.card-gallery .grid { grid-template-columns: 1fr 1fr; gap: 16px; }
}
@media (max-width: 900px) {
/* On mobile, un-stick the hero — the cover pattern needs viewport headroom */
.hero {
position: static;
grid-template-columns: 1fr;
grid-template-rows: auto auto;
height: auto;
max-height: none;
min-height: 0;
overflow: visible;
}
.hero::before { display: none; }
.hero-left { padding: 56px 24px 40px; max-width: 100%; }
.hero-right { height: 560px; padding: 16px 24px; }
.hero h1 { font-size: clamp(32px, 7vw, 48px); }
.hero-ctas { flex-wrap: wrap; }
.card-gallery { padding: 40px 0 64px; }
.card-gallery .grid { grid-template-columns: 1fr; gap: 16px; }
.folder-card { aspect-ratio: 5 / 6; }
.folder-card:hover .folder-panel { transform: none; } /* touch has no hover */
.folder-card:hover .folder-cover { transform: scale(1.02); }
.folder-card:hover .folder-arrow { transform: none; }
.section-head { grid-template-columns: 1fr; gap: 20px; padding-bottom: 40px; }
.section-head .tag-wrap { justify-content: flex-start; padding-top: 0; }
.section-head h2 { font-size: clamp(30px, 6vw, 44px); }
.challenge-row {
grid-template-columns: 1fr;
gap: 12px;
padding: 24px 0;
}
.challenge-arrow { display: none; }
.outcome-text { color: var(--brand-blue); }
.steps-grid { grid-template-columns: 1fr; }
.aeo-focus-grid { grid-template-columns: 1fr; }
.aeo-flow { flex-direction: column; padding: 32px 24px; }
.aeo-flow-arrow { transform: rotate(90deg); }
.industries-orbit {
min-height: 0;
display: flex;
flex-wrap: wrap;
gap: 10px;
justify-content: center;
margin-top: 8px;
}
.industries-orbit .orbit-card {
position: static;
animation: none !important;
transform: none !important;
opacity: 1 !important;
padding: 10px 18px;
font-size: 14px;
}
.why-row { grid-template-columns: 1fr; gap: 8px; padding: 20px 0; }
.why-num { font-size: 12px; }
}
/* =========================================================================
ADDITIONAL SECTIONS (added to cover full source doc)
========================================================================= */
/* --- Why DigitalScale360 (intro block, big statement + supporting paragraphs) --- */
.why-intro .intro-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
gap: 64px;
align-items: start;
}
.why-intro .intro-eyebrow {
font-family: 'Inter Tight', sans-serif;
font-weight: 500;
font-size: 12px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--brand-orange);
margin-bottom: 16px;
display: block;
}
.why-intro h2 {
font-family: 'Inter Tight', sans-serif;
font-weight: 700;
font-size: clamp(32px, 3.8vw, 56px);
line-height: 1.02;
letter-spacing: -0.03em;
color: var(--ink);
max-width: 14ch;
}
.why-intro .intro-body p {
font-size: 17px;
line-height: 1.65;
color: var(--ink-soft);
margin-bottom: 18px;
}
.why-intro .intro-body p:last-of-type { margin-bottom: 28px; }
.why-intro .intro-cta {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: 'Inter Tight', sans-serif;
font-weight: 600;
font-size: 15px;
color: var(--brand-blue);
transition: gap 0.2s ease;
}
.why-intro .intro-cta::after { content: '→'; transition: transform 0.25s ease; }
.why-intro .intro-cta:hover { gap: 12px; }
.why-intro .intro-cta:hover::after { transform: translateX(3px); }
/* --- Performance / Results section --- */
.performance-metrics {
display: flex;
flex-wrap: wrap;
gap: 12px;
padding: 32px 0 0;
}
.metric-pill {
padding: 12px 20px;
border-radius: var(--r-pill);
background: rgba(1,88,245,0.06);
border: 1px solid rgba(1,88,245,0.12);
font-family: 'Inter Tight', sans-serif;
font-weight: 600;
font-size: 15px;
letter-spacing: -0.005em;
color: var(--ink);
transition: transform 0.25s ease, background 0.25s ease, border-color 0.25s ease;
}
.metric-pill:hover {
transform: translateY(-2px);
background: rgba(1,88,245,0.10);
border-color: rgba(1,88,245,0.24);
}
.performance-questions {
margin-top: 32px;
padding: 32px 0 0;
border-top: 1px solid var(--divider);
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.performance-q {
padding: 20px 0;
font-family: 'Inter Tight', sans-serif;
font-weight: 500;
font-size: 16px;
line-height: 1.4;
color: var(--ink-soft);
letter-spacing: -0.01em;
}
.performance-q strong {
color: var(--brand-blue);
font-weight: 600;
}
.performance-note {
margin-top: 40px;
font-size: 13px;
color: var(--ink-mute);
font-style: italic;
}
/* --- Case Studies scroll-controlled reveal carousel ---
The section is a tall scroll track (400vh total, one viewport per step).
Inside, a sticky stage holds 4 overlapping panels. As the user scrolls,
JS calculates progress and swaps which panel is `.active` — each panel
fades and 3D-tilts in from below, then exits by tilting up and fading.
Result: one step visible at a time, with a smooth cinematic hand-off. */
.case-carousel {
position: relative;
height: 400vh; /* 4 steps × one viewport each */
margin-top: 8px;
}
.case-stage {
position: sticky;
top: 0;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
perspective: 1400px;
overflow: hidden;
}
.case-progress {
position: absolute;
top: 40px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 8px;
z-index: 10;
}
.case-progress .dot {
width: 22px;
height: 3px;
border-radius: 2px;
background: rgba(10,10,10,0.12);
transition: background 0.4s ease, width 0.4s ease;
}
.case-progress .dot.is-active {
background: var(--brand-blue);
width: 44px;
}
.case-progress .dot.is-past { background: rgba(1,88,245,0.35); }
/* Big background watermark numeral behind each panel's content — gives
the empty space visual weight and reinforces which step you're on. */
.case-panel .panel-num-bg {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-family: 'Inter Tight', sans-serif;
font-weight: 800;
font-size: clamp(280px, 40vw, 560px);
line-height: 1;
letter-spacing: -0.05em;
color: transparent;
-webkit-text-stroke: 1.5px rgba(10,10,10,0.05);
z-index: 0;
pointer-events: none;
user-select: none;
white-space: nowrap;
}
.case-panel:nth-of-type(odd) .panel-num-bg { -webkit-text-stroke-color: rgba(1,88,245,0.09); }
.case-panel:nth-of-type(even) .panel-num-bg { -webkit-text-stroke-color: rgba(254,107,1,0.10); }
/* Ambient blurred orbs — soft brand-color blobs floating behind the panel */
.stage-orbs {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
overflow: hidden;
}
.stage-orbs .orb {
position: absolute;
border-radius: 50%;
filter: blur(90px);
animation: orb-drift 14s ease-in-out infinite;
}
.stage-orbs .orb-1 {
width: 460px; height: 460px;
background: rgba(1,88,245,0.18);
top: -140px; left: -120px;
}
.stage-orbs .orb-2 {
width: 380px; height: 380px;
background: rgba(254,107,1,0.14);
bottom: -100px; right: -100px;
animation-delay: -5s;
}
.stage-orbs .orb-3 {
width: 260px; height: 260px;
background: rgba(1,88,245,0.10);
top: 40%; right: 12%;
animation-delay: -9s;
}
@keyframes orb-drift {
0%, 100% { transform: translate(0, 0) scale(1); }
33% { transform: translate(40px, -30px) scale(1.08); }
66% { transform: translate(-30px, 30px) scale(0.95); }
}
/* Side index indicator — "01 / 04" in the top corner */
.stage-index {
position: absolute;
top: 32px;
right: 32px;
z-index: 6;
font-family: 'Inter Tight', sans-serif;
font-size: 13px;
font-weight: 500;
letter-spacing: 0.14em;
color: var(--ink-mute);
display: flex;
align-items: baseline;
gap: 4px;
}
.stage-index .curr {
font-size: 22px;
font-weight: 700;
letter-spacing: -0.01em;
color: var(--ink);
transition: color 0.4s ease;
}
.stage-index .divider { opacity: 0.4; margin: 0 2px; }
/* Scroll hint at the bottom — animated chevron + label; fades on last panel */
.scroll-hint {
position: absolute;
bottom: 44px;
left: 50%;
transform: translateX(-50%);
z-index: 6;
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
color: var(--ink-mute);
transition: opacity 0.5s ease;
}
.scroll-hint.is-hidden { opacity: 0; pointer-events: none; }
.scroll-hint .hint-label {
font-family: 'Inter Tight', sans-serif;
font-size: 10px;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
}
.scroll-hint .hint-arrow {
width: 22px; height: 22px;
animation: hint-bob 2s ease-in-out infinite;
}
@keyframes hint-bob {
0%, 100% { transform: translateY(0); opacity: 0.5; }
50% { transform: translateY(6px); opacity: 1; }
}
.case-panel {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 40px;
opacity: 0;
transform: translateY(80px) rotateX(18deg);
transform-origin: center bottom;
transition:
opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1),
transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
will-change: opacity, transform;
pointer-events: none;
}
.case-panel.is-active {
opacity: 1;
transform: translateY(0) rotateX(0);
pointer-events: auto;
}
.case-panel.is-past {
opacity: 0;
transform: translateY(-80px) rotateX(-18deg);
transform-origin: center top;
}
.case-panel .panel-num {
font-family: 'Inter Tight', sans-serif;
font-weight: 500;
font-size: 14px;
letter-spacing: 0.16em;
text-transform: uppercase;
margin-bottom: 32px;
}
.case-panel:nth-of-type(odd) .panel-num { color: var(--brand-blue); }
.case-panel:nth-of-type(even) .panel-num { color: var(--brand-orange); }
.case-panel .panel-icon {
width: 96px;
height: 96px;
border-radius: 24px;
margin: 0 auto 40px;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(160deg, #fdfdfd 0%, #f0f0f0 100%);
border: 1px solid var(--divider);
position: relative;
box-shadow: 0 10px 30px -12px rgba(0,0,0,0.15);
}
.case-panel .panel-icon::after {
content: '';
position: absolute;
inset: -12px -12px -24px -12px;
border-radius: inherit;
z-index: -1;
background: radial-gradient(60% 55% at 50% 100%, var(--glow, rgba(1,88,245,0.32)), transparent 70%);
filter: blur(6px);
pointer-events: none;
}
.case-panel:nth-of-type(odd) .panel-icon { --glow: rgba(1,88,245,0.35); }
.case-panel:nth-of-type(even) .panel-icon { --glow: rgba(254,107,1,0.35); }
.case-panel .panel-icon svg { width: 40px; height: 40px; }
.case-panel:nth-of-type(odd) .panel-icon svg { color: var(--brand-blue); }
.case-panel:nth-of-type(even) .panel-icon svg { color: var(--brand-orange); }
.case-panel .panel-name {
font-family: 'Inter Tight', sans-serif;
font-weight: 700;
font-size: clamp(36px, 5vw, 64px);
letter-spacing: -0.03em;
line-height: 1.02;
color: var(--ink);
margin-bottom: 20px;
max-width: 16ch;
}
.case-panel .panel-desc {
font-family: 'Inter', sans-serif;
font-size: clamp(16px, 1.4vw, 20px);
line-height: 1.5;
color: var(--ink-soft);
max-width: 32ch;
}
/* Mobile: fall back to a static vertical stack (scroll carousel doesn't
feel right on tall narrow screens). */
@media (max-width: 900px) {
/* Bento grid collapses gracefully — 2 cols on tablet, 1 col on phone */
.bento-grid {
grid-template-columns: 1fr 1fr;
grid-template-rows: auto;
grid-template-areas:
"a a"
"b c"
"d c"
"e c"
"f f";
}
.bento-a::before { font-size: 160px; }
.bento-c::before { font-size: 220px; }
.bento-f { flex-direction: column; align-items: flex-start; gap: 20px; }
}
@media (max-width: 600px) {
.bento-grid {
grid-template-columns: 1fr;
grid-template-areas:
"a"
"b"
"c"
"d"
"e"
"f";
}
.bento-a .bento-problem,
.bento-c .bento-problem { font-size: 24px; }
}
@media (max-width: 900px) {
.case-carousel { height: auto; }
.case-stage {
position: static;
height: auto;
perspective: none;
display: block;
padding: 24px 0;
}
.case-progress { display: none; }
.stage-orbs,
.stage-index,
.scroll-hint,
.panel-num-bg { display: none; }
.case-panel {
position: static;
opacity: 1;
transform: none !important;
padding: 40px 20px;
pointer-events: auto;
border-bottom: 1px solid var(--divider);
}
.case-panel:last-of-type { border-bottom: none; }
.case-panel .panel-icon { width: 72px; height: 72px; }
.case-panel .panel-icon svg { width: 30px; height: 30px; }
}
.case-cta-wrap {
display: flex;
justify-content: center;
padding-top: 24px;
}
/* --- Insights / Resources --- */
.insights-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
.insight-cat {
padding: 32px 28px;
border-radius: var(--r-md);
background: var(--bg);
border: 1px solid var(--divider);
cursor: pointer;
transition: transform 0.35s ease, border-color 0.35s ease, background 0.35s ease;
display: flex;
justify-content: space-between;
align-items: center;
gap: 20px;
}
.insight-cat:hover {
transform: translateY(-4px);
border-color: var(--brand-blue);
background: rgba(1,88,245,0.03);
}
.insight-cat h4 {
font-family: 'Inter Tight', sans-serif;
font-weight: 600;
font-size: 18px;
letter-spacing: -0.015em;
color: var(--ink);
}
.insight-cat .arrow {
width: 32px; height: 32px;
border-radius: 50%;
background: var(--bg-alt);
color: var(--brand-blue);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 16px;
flex-shrink: 0;
transition: transform 0.25s ease, background 0.25s ease;
}
.insight-cat:hover .arrow {
background: var(--brand-blue);
color: #fff;
transform: translateX(3px);
}
/* --- Business challenge lead copy inside container --- */
.challenge-lead {
max-width: 780px;
margin: 0 auto 48px;
text-align: center;
font-size: 17px;
line-height: 1.65;
color: var(--ink-soft);
}
.challenge-lead p { margin-bottom: 14px; }
.challenge-cta-wrap {
display: flex;
justify-content: center;
padding-top: 40px;
}
/* --- AEO/GEO lead copy --- */
.aeo-lead {
max-width: 760px;
margin: -20px auto 48px;
text-align: center;
font-size: 16px;
line-height: 1.65;
color: var(--ink-inverse-soft);
}
/* --- Why us lead copy --- */
.why-lead {
max-width: 780px;
margin: -20px auto 40px;
text-align: center;
font-size: 16px;
line-height: 1.65;
color: var(--ink-soft);
}
/* --- Hero micro-copy at the bottom --- */
.hero-micro {
margin-top: 24px;
font-family: 'Inter Tight', sans-serif;
font-size: 13px;
font-weight: 500;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ink-mute);
}
/* --- Hero eyebrow chip row --- */
.hero-eyebrow-row {
font-family: 'Inter Tight', sans-serif;
font-size: 11px;
font-weight: 500;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--ink-mute);
margin-top: 20px;
}
.hero-tagline {
display: inline-block;
margin-top: 6px;
font-family: 'Inter Tight', sans-serif;
font-weight: 600;
font-size: 15px;
color: var(--brand-orange);
letter-spacing: -0.005em;
}
/* --- Responsive additions --- */
@media (max-width: 1024px) {
.why-intro .intro-grid { grid-template-columns: 1fr; gap: 32px; }
.case-flow { grid-template-columns: repeat(2, 1fr); gap: 40px; max-width: 100%; padding: 20px 0; }
.case-flow > .case-step-v2:nth-child(even) { padding-top: 0; }
.case-connector { display: none; }
}
@media (max-width: 700px) {
.case-flow { grid-template-columns: 1fr; gap: 32px; }
.insights-grid { grid-template-columns: repeat(2, 1fr); }
.performance-questions { grid-template-columns: 1fr; gap: 12px; }
}
@media (max-width: 900px) {
.insights-grid { grid-template-columns: 1fr; }
.performance-metrics { gap: 8px; }
.metric-pill { font-size: 13px; padding: 10px 16px; }
}
/* =========================================================================
SCROLL-TRIGGERED REVEAL SYSTEM (Why DigitalScale360 onwards)
========================================================================= */
/* Base reveal — element fades up from below when its section enters viewport */
.reveal {
opacity: 0;
transform: translateY(32px);
transition:
opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
will-change: opacity, transform;
}
.reveal.is-in {
opacity: 1;
transform: translateY(0);
}
/* Staggered children — each direct child comes in 90ms after the previous */
.stagger > * {
opacity: 0;
transform: translateY(24px);
transition:
opacity 0.75s cubic-bezier(0.22, 1, 0.36, 1),
transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
will-change: opacity, transform;
}
.stagger.is-in > *:nth-child(1) { transition-delay: 0ms; }
.stagger.is-in > *:nth-child(2) { transition-delay: 90ms; }
.stagger.is-in > *:nth-child(3) { transition-delay: 180ms; }
.stagger.is-in > *:nth-child(4) { transition-delay: 270ms; }
.stagger.is-in > *:nth-child(5) { transition-delay: 360ms; }
.stagger.is-in > *:nth-child(6) { transition-delay: 450ms; }
.stagger.is-in > *:nth-child(7) { transition-delay: 540ms; }
.stagger.is-in > *:nth-child(8) { transition-delay: 630ms; }
.stagger.is-in > *:nth-child(n+9) { transition-delay: 720ms; }
.stagger.is-in > * {
opacity: 1;
transform: translateY(0);
}
/* Variant: gentle scale-in for card grids */
.stagger-scale > * {
opacity: 0;
transform: translateY(18px) scale(0.97);
transition:
opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
will-change: opacity, transform;
}
.stagger-scale.is-in > *:nth-child(1) { transition-delay: 0ms; }
.stagger-scale.is-in > *:nth-child(2) { transition-delay: 110ms; }
.stagger-scale.is-in > *:nth-child(3) { transition-delay: 220ms; }
.stagger-scale.is-in > *:nth-child(4) { transition-delay: 330ms; }
.stagger-scale.is-in > *:nth-child(5) { transition-delay: 440ms; }
.stagger-scale.is-in > *:nth-child(6) { transition-delay: 550ms; }
.stagger-scale.is-in > *:nth-child(n+7) { transition-delay: 660ms; }
.stagger-scale.is-in > * {
opacity: 1;
transform: translateY(0) scale(1);
}
/* =========================================================================
ORBITAL FLOATING CARDS (around big statement text)
Style from the reference video: solid vibrant colored pills with white
text, tilted playfully, that rise up from below like anti-gravity
and then drift suspended — bobbing, swaying, and rocking on their
own tempo so no two pills are ever synced.
========================================================================= */
.orbit-frame {
position: relative;
}
.orbit-card {
position: absolute;
padding: 14px 22px;
border-radius: var(--r-pill);
box-shadow:
0 2px 4px rgba(0,0,0,0.06),
0 20px 40px -14px rgba(0,0,0,0.28);
font-family: 'Inter Tight', sans-serif;
font-size: 16px;
font-weight: 600;
letter-spacing: -0.01em;
color: #ffffff; /* white text on solid color */
background: var(--brand-blue); /* default; overridden by tone classes */
white-space: nowrap;
/* Entry state: pill starts far below its resting position, small, and
with no tilt. On entry it *lifts up* into place with a springy
overshoot, then adopts its resting tilt (--tilt).
Anti-gravity = starts heavy below, rises light and floats. */
opacity: 0;
transform: translateY(240px) scale(0.4) rotate(0deg);
transition:
opacity 1.1s cubic-bezier(0.22, 1, 0.36, 1),
transform 1.3s cubic-bezier(0.34, 1.56, 0.64, 1); /* springy on transform */
z-index: 3;
}
.orbit-frame.is-in .orbit-card {
opacity: 1;
transform: translateY(0) scale(1) rotate(var(--tilt, 0deg));
}
.orbit-frame.is-in .orbit-card:nth-of-type(1) { transition-delay: 50ms; }
.orbit-frame.is-in .orbit-card:nth-of-type(2) { transition-delay: 200ms; }
.orbit-frame.is-in .orbit-card:nth-of-type(3) { transition-delay: 350ms; }
.orbit-frame.is-in .orbit-card:nth-of-type(4) { transition-delay: 500ms; }
.orbit-frame.is-in .orbit-card:nth-of-type(5) { transition-delay: 650ms; }
.orbit-frame.is-in .orbit-card:nth-of-type(6) { transition-delay: 800ms; }
.orbit-frame.is-in .orbit-card:nth-of-type(7) { transition-delay: 950ms; }
/* Tone variants — each pill gets its own solid color */
/* Solid tone variants for orbit pills — brand-only (blue, orange, black).
Non-brand tone names redirect to shades within the brand palette. */
.orbit-card.tone-blue,
.orbit-card.tone-skyblue { background: #0158F5; }
.orbit-card.tone-teal { background: #1a6dff; }
.orbit-card.tone-green,
.orbit-card.tone-purple { background: #0140B5; }
.orbit-card.tone-orange { background: #FE6B01; }
.orbit-card.tone-yellow,
.orbit-card.tone-coral { background: #FF8533; color: #fff; }
.orbit-card.tone-pink,
.orbit-card.tone-red { background: #C74A00; }
.orbit-card.tone-ink { background: #0a0a0a; }
/* ---- ANTI-GRAVITY IDLE DRIFT ----
After the entry, each pill floats freely — drifting in Y, subtly in X,
and rocking a couple degrees around its resting tilt. Each pill gets
its own keyframe (float-1..7) so no two pills are ever in phase.
The pill's resting tilt is stored in --tilt on the position rule;
each frame nudges rotation by a small delta around that anchor.
Durations are long (10-14s) so bigger amplitudes read as graceful. */
.orbit-frame.is-in .orbit-card {
/* animation is set per-pill below (name + duration vary) */
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-fill-mode: forwards;
}
/* The entry transition finishes before the animation starts, so we
delay the animation to prevent it from interrupting the entry lift. */
.orbit-frame.is-in .orbit-card:nth-of-type(1) { animation: float-1 12.4s 1.6s ease-in-out infinite; }
.orbit-frame.is-in .orbit-card:nth-of-type(2) { animation: float-2 13.8s 1.9s ease-in-out infinite; }
.orbit-frame.is-in .orbit-card:nth-of-type(3) { animation: float-3 11.6s 2.2s ease-in-out infinite; }
.orbit-frame.is-in .orbit-card:nth-of-type(4) { animation: float-4 14.5s 2.5s ease-in-out infinite; }
.orbit-frame.is-in .orbit-card:nth-of-type(5) { animation: float-5 12.9s 2.8s ease-in-out infinite; }
.orbit-frame.is-in .orbit-card:nth-of-type(6) { animation: float-6 13.4s 3.1s ease-in-out infinite; }
.orbit-frame.is-in .orbit-card:nth-of-type(7) { animation: float-7 11.9s 3.4s ease-in-out infinite; }
/* Each pill's drift is unique — different X/Y amplitudes, rotation
deltas, and subtle scale breathing. All frames end where they began,
so the loop is seamless. Amplitudes are large so the motion reads
as ANTI-GRAVITY — pills clearly defying gravity, not just bobbing. */
@keyframes float-1 {
0%,100% { transform: translate(0px, 0px) rotate(var(--tilt)) scale(1); }
20% { transform: translate(8px, -22px) rotate(calc(var(--tilt) + 6deg)) scale(1.02); }
40% { transform: translate(-6px, -40px) rotate(calc(var(--tilt) - 5deg)) scale(0.99); }
60% { transform: translate(12px, -30px) rotate(calc(var(--tilt) + 9deg)) scale(1.03); }
80% { transform: translate(-4px, -14px) rotate(calc(var(--tilt) + 2deg)) scale(1); }
}
@keyframes float-2 {
0%,100% { transform: translate(0px, 0px) rotate(var(--tilt)) scale(1); }
25% { transform: translate(-10px, -32px) rotate(calc(var(--tilt) - 8deg)) scale(1.02); }
50% { transform: translate(6px, -20px) rotate(calc(var(--tilt) + 5deg)) scale(0.98); }
75% { transform: translate(-8px, -44px) rotate(calc(var(--tilt) - 4deg)) scale(1.01); }
}
@keyframes float-3 {
0%,100% { transform: translate(0px, 0px) rotate(var(--tilt)) scale(1); }
15% { transform: translate(9px, -18px) rotate(calc(var(--tilt) + 8deg)) scale(1); }
35% { transform: translate(-7px, -38px) rotate(calc(var(--tilt) - 6deg)) scale(1.03); }
55% { transform: translate(14px, -26px) rotate(calc(var(--tilt) + 4deg)) scale(0.99); }
80% { transform: translate(-5px, -46px) rotate(calc(var(--tilt) - 10deg))scale(1.02); }
}
@keyframes float-4 {
0%,100% { transform: translate(0px, 0px) rotate(var(--tilt)) scale(1); }
30% { transform: translate(-11px, -28px) rotate(calc(var(--tilt) - 9deg)) scale(1.02); }
55% { transform: translate(10px, -42px) rotate(calc(var(--tilt) + 7deg)) scale(0.98); }
80% { transform: translate(-6px, -16px) rotate(calc(var(--tilt) - 3deg)) scale(1.01); }
}
@keyframes float-5 {
0%,100% { transform: translate(0px, 0px) rotate(var(--tilt)) scale(1); }
22% { transform: translate(7px, -34px) rotate(calc(var(--tilt) + 5deg)) scale(1.02); }
45% { transform: translate(-9px, -18px) rotate(calc(var(--tilt) - 7deg)) scale(0.98); }
70% { transform: translate(11px, -48px) rotate(calc(var(--tilt) + 10deg)) scale(1.03); }
88% { transform: translate(-3px, -22px) rotate(calc(var(--tilt) + 3deg)) scale(1); }
}
@keyframes float-6 {
0%,100% { transform: translate(0px, 0px) rotate(var(--tilt)) scale(1); }
28% { transform: translate(-8px, -26px) rotate(calc(var(--tilt) - 6deg)) scale(1.01); }
52% { transform: translate(13px, -40px) rotate(calc(var(--tilt) + 8deg)) scale(0.99); }
76% { transform: translate(-5px, -30px) rotate(calc(var(--tilt) - 4deg)) scale(1.02); }
}
@keyframes float-7 {
0%,100% { transform: translate(0px, 0px) rotate(var(--tilt)) scale(1); }
20% { transform: translate(-6px, -20px) rotate(calc(var(--tilt) - 5deg)) scale(1.01); }
42% { transform: translate(9px, -36px) rotate(calc(var(--tilt) + 6deg)) scale(1.03); }
65% { transform: translate(-11px, -44px) rotate(calc(var(--tilt) - 9deg)) scale(0.98); }
85% { transform: translate(4px, -22px) rotate(calc(var(--tilt) + 4deg)) scale(1.01); }
}
/* Positions + resting rotation for each orbit card
(--tilt CSS variable is the rest angle — drift keyframes add ± around it) */
.orbit-frame .orbit-1 { top: -10px; right: 10%; --tilt: -8deg; }
.orbit-frame .orbit-2 { top: 38%; right: -50px; --tilt: 6deg; }
.orbit-frame .orbit-3 { bottom: -20px; right: 22%; --tilt: -4deg; }
.orbit-frame .orbit-4 { top: 8%; left: -40px; --tilt: -10deg; }
.orbit-frame .orbit-5 { bottom: 12%; left: -20px; --tilt: 8deg; }
.orbit-frame .orbit-6 { top: 62%; left: 36%; --tilt: -6deg; }
.orbit-frame .orbit-7 { top: -6px; left: -14%; --tilt: 10deg; }
/* On smaller widths, tuck the orbit cards inward so they don't clip off-screen */
@media (max-width: 1200px) {
.orbit-card { font-size: 14px; padding: 12px 18px; }
.orbit-frame .orbit-1 { top: -14px; right: 4%; }
.orbit-frame .orbit-2 { top: 45%; right: -12px; }
.orbit-frame .orbit-3 { bottom: -12px; right: 20%; }
.orbit-frame .orbit-4 { top: 4%; left: -8px; }
.orbit-frame .orbit-5 { bottom: 10%; left: 0; }
}
/* =========================================================================
COUNTER / stat pop (used in Performance section)
========================================================================= */
.counter-num {
font-family: 'Inter Tight', sans-serif;
font-weight: 700;
font-size: clamp(52px, 6vw, 88px);
line-height: 1;
letter-spacing: -0.036em;
color: var(--brand-blue);
display: inline-block;
transition: color 0.4s ease;
}
.counter-num .suffix { color: var(--brand-blue); }
.perf-stats-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 32px;
padding: 40px 0 8px;
border-top: 1px solid var(--divider);
border-bottom: 1px solid var(--divider);
padding-bottom: 40px;
margin-bottom: 40px;
}
.perf-stat { text-align: left; }
.perf-stat-label {
font-family: 'Inter Tight', sans-serif;
font-weight: 500;
font-size: 13px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ink-mute);
margin-top: 12px;
display: block;
}
/* Section head fade-up on enter */
.section-head.reveal { transform: translateY(28px); }
@media (max-width: 900px) {
.perf-stats-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
.orbit-frame .orbit-card { display: none; } /* skip orbits on mobile — no room */
}
/* =========================================================================
PHYSICS PILLS — draggable pills with anti-gravity float
Used in the "Why DigitalScale360" section. Each pill idles with a
gentle drift/rotation, but can be grabbed and dragged anywhere by the
user with mouse or touch. When released, the pill stays where it
landed and resumes drifting around its new position.
========================================================================= */
.physics-section .section-head {
grid-template-columns: 1fr;
text-align: center;
padding-bottom: 100px;
gap: 14px;
place-items: center;
}
.physics-section .section-head h2 {
margin: 0 auto;
max-width: 22ch;
}
.physics-section .section-head .desc {
margin: 0 auto;
max-width: 44ch;
font-size: 15px;
color: var(--ink-soft);
}
.physics-cta {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 12px 22px;
border-radius: var(--r-pill);
background: var(--ink);
color: #fff;
font-family: 'Inter Tight', sans-serif;
font-size: 14px;
font-weight: 500;
letter-spacing: 0.01em;
margin-top: 8px;
transition: transform 0.2s ease, background 0.2s ease;
}
.physics-cta:hover {
transform: translateY(-1px);
background: #1a1a1a;
}
.physics-cta svg { width: 12px; height: 12px; transition: transform 0.25s ease; }
.physics-cta:hover svg { transform: translate(2px, -2px); }
.physics-pills {
position: relative;
height: 400px;
overflow: visible; /* cards fully visible, no bottom clipping */
margin: 0 auto;
max-width: 1240px;
touch-action: none; /* prevent page scroll while dragging */
}
.phys-pill {
/* Renamed conceptually to "card" — now a portfolio-style landscape card
rather than a small pill. Bigger, richer, still draggable + floating. */
position: absolute;
width: 260px;
height: 340px;
padding: 20px 22px 22px;
border-radius: 18px;
color: #ffffff;
background: var(--brand-blue);
cursor: grab;
user-select: none;
-webkit-user-select: none;
touch-action: none;
overflow: hidden;
isolation: isolate;
display: flex;
flex-direction: column;
box-shadow:
0 4px 12px rgba(0,0,0,0.10),
0 24px 48px -14px rgba(0,0,0,0.32);
will-change: transform;
transition: box-shadow 0.3s ease, scale 0.3s ease;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
/* Glossy sheen overlay — a soft highlight from top-left for depth */
.phys-pill::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(120% 90% at 20% 0%, rgba(255,255,255,0.20) 0%, transparent 55%),
radial-gradient(80% 60% at 100% 100%, rgba(0,0,0,0.28) 0%, transparent 55%);
pointer-events: none;
z-index: 1;
}
/* Grain texture */
.phys-pill::after {
content: '';
position: absolute;
inset: 0;
background-image: url("data:image/svg+xml;utf8,");
opacity: 0.20;
mix-blend-mode: overlay;
pointer-events: none;
z-index: 2;
}
.phys-pill:hover {
scale: 1.03;
box-shadow:
0 6px 16px rgba(0,0,0,0.14),
0 32px 60px -14px rgba(0,0,0,0.40);
}
.phys-pill.dragging {
cursor: grabbing;
animation: none !important;
z-index: 100;
scale: 1.06;
box-shadow:
0 10px 24px rgba(0,0,0,0.20),
0 40px 80px -14px rgba(0,0,0,0.48);
transition: none;
}
/* Content inside each card */
.phys-pill .phys-bg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 0;
opacity: 0.28;
mix-blend-mode: overlay;
pointer-events: none;
border-radius: inherit;
}
.phys-pill.tone-yellow .phys-bg { opacity: 0.16; mix-blend-mode: multiply; }
.phys-pill .card-tag {
position: relative;
z-index: 3;
font-family: 'Inter Tight', sans-serif;
font-size: 11px;
font-weight: 500;
letter-spacing: 0.16em;
text-transform: uppercase;
opacity: 0.75;
}
.phys-pill .card-arrow {
position: absolute;
top: 20px;
right: 22px;
z-index: 3;
opacity: 0.85;
}
.phys-pill .card-arrow svg { width: 18px; height: 18px; display: block; }
.phys-pill .card-title {
position: relative;
z-index: 3;
font-family: 'Inter Tight', sans-serif;
font-size: 34px;
font-weight: 700;
line-height: 1.02;
letter-spacing: -0.028em;
margin-top: auto;
margin-bottom: 6px;
}
.phys-pill .card-desc {
position: relative;
z-index: 3;
font-family: 'Inter', sans-serif;
font-size: 13px;
font-weight: 500;
line-height: 1.35;
opacity: 0.9;
max-width: 22ch;
}
/* Gradient tone variants — brand-only palette (blue, orange, black).
Non-brand tone names redirect to variants of the three brand colors,
so HTML tone-* classes still work but the rendered result is always
on-brand. Distinct gradients give visual variety within the palette. */
/* --- Blue family (bright, deep, navy) --- */
.phys-pill.tone-blue,
.phys-pill.tone-skyblue { background: linear-gradient(150deg, #4a95ff 0%, #0158F5 55%, #002d80 100%); }
.phys-pill.tone-teal { background: linear-gradient(150deg, #6ba5ff 0%, #0158F5 55%, #003fb2 100%); }
.phys-pill.tone-green,
.phys-pill.tone-purple { background: linear-gradient(150deg, #2a5cd6 0%, #0140b5 55%, #0a2e7d 100%); }
/* --- Orange family (bright, warm, rust) --- */
.phys-pill.tone-orange { background: linear-gradient(150deg, #ffa15c 0%, #FE6B01 55%, #7a2a00 100%); }
.phys-pill.tone-yellow,
.phys-pill.tone-coral { background: linear-gradient(150deg, #ffb888 0%, #FE6B01 55%, #a34200 100%); color: #fff; }
.phys-pill.tone-pink,
.phys-pill.tone-red { background: linear-gradient(150deg, #f4813a 0%, #C74A00 55%, #6b1f00 100%); }
/* --- Ink family (charcoal, black) --- */
.phys-pill.tone-ink { background: linear-gradient(150deg, #262626 0%, #0a0a0a 55%, #000 100%); }
/* Anti-gravity idle float — 4 variants with different drift paths.
Each keyframe adds motion ON TOP OF each pill's rest rotation
(--rest-rot), so a pill tilted -30° at rest still rocks around -30°
rather than snapping to 0°. Amplitude: up to -30px Y, ±14px X,
±7° rotation around the rest angle, subtle scale breathing. */
@keyframes phys-float-1 {
0%,100% { transform: translate(0, 0) rotate(var(--rest-rot, 0deg)) scale(1); }
30% { transform: translate(8px, -18px) rotate(calc(var(--rest-rot, 0deg) + 4deg)) scale(1.02); }
60% { transform: translate(-6px, -28px) rotate(calc(var(--rest-rot, 0deg) - 5deg)) scale(0.98); }
85% { transform: translate(10px, -12px) rotate(calc(var(--rest-rot, 0deg) + 3deg)) scale(1.01); }
}
@keyframes phys-float-2 {
0%,100% { transform: translate(0, 0) rotate(var(--rest-rot, 0deg)) scale(1); }
25% { transform: translate(-10px, -14px) rotate(calc(var(--rest-rot, 0deg) - 6deg)) scale(1.02); }
55% { transform: translate(8px, -26px) rotate(calc(var(--rest-rot, 0deg) + 5deg)) scale(0.98); }
80% { transform: translate(-4px, -10px) rotate(calc(var(--rest-rot, 0deg) - 3deg)) scale(1.01); }
}
@keyframes phys-float-3 {
0%,100% { transform: translate(0, 0) rotate(var(--rest-rot, 0deg)) scale(1); }
20% { transform: translate(12px, -8px) rotate(calc(var(--rest-rot, 0deg) + 5deg)) scale(1.01); }
45% { transform: translate(-8px, -24px) rotate(calc(var(--rest-rot, 0deg) - 7deg)) scale(1.03); }
70% { transform: translate(6px, -30px) rotate(calc(var(--rest-rot, 0deg) + 4deg)) scale(0.98); }
90% { transform: translate(-4px, -14px) rotate(calc(var(--rest-rot, 0deg) + 2deg)) scale(1); }
}
@keyframes phys-float-4 {
0%,100% { transform: translate(0, 0) rotate(var(--rest-rot, 0deg)) scale(1); }
35% { transform: translate(-14px, -20px) rotate(calc(var(--rest-rot, 0deg) - 4deg)) scale(1.02); }
65% { transform: translate(10px, -14px) rotate(calc(var(--rest-rot, 0deg) + 6deg)) scale(0.99); }
88% { transform: translate(-6px, -26px) rotate(calc(var(--rest-rot, 0deg) - 2deg)) scale(1.01); }
}
@media (max-width: 900px) {
.physics-pills {
height: auto;
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x mandatory;
display: flex;
gap: 12px;
padding: 8px var(--gutter) 32px;
-webkit-overflow-scrolling: touch;
}
.phys-pill {
position: static;
flex: 0 0 78vw;
max-width: 300px;
height: 320px;
transform: none !important;
animation: none !important;
scroll-snap-align: start;
cursor: default;
touch-action: pan-x;
}
.phys-pill:hover,
.phys-pill.dragging { scale: 1; transition: none; }
}
/* =========================================================================
17. REDUCED MOTION
========================================================================= */
@media (prefers-reduced-motion: reduce) {
.marquee-track { animation: none; }
.hero-badge .dot { animation: none; }
.orbit-frame .orbit-card { animation: none; }
.reveal, .stagger > *, .stagger-scale > * {
opacity: 1 !important;
transform: none !important;
transition: none !important;
}
* { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}
/* =========================================================================
HERO LAYOUT FIX (v19)
- Neutralises the leftover placeholder `.hero` rule in header.css
(max-width:1440px / margin:auto / padding) that squeezed this hero.
- Hero sits in the same container (--max-w + --gutter) as the sections below.
- Wider copy column so the headline sits on two lines; copy centred vertically.
========================================================================= */
.stage > .hero {
/* same edges as the card row directly below (container + its inner gutter) */
max-width: var(--max-w);
margin: 0 auto;
padding: 0 calc(var(--gutter) * 2);
grid-template-columns: 1.35fr 1fr;
height: calc(100vh - var(--header-h, 104px));
min-height: 600px;
max-height: 780px;
}
/* divider sits on the column boundary inside the padded container */
.stage > .hero::before { left: calc(var(--gutter) * 2 + (100% - 4 * var(--gutter)) * 1.35 / 2.35); }
.stage > .hero .hero-left {
max-width: none;
padding: 40px 48px 40px 0;
justify-content: center;
}
.stage > .hero .hero-right { padding: 24px 0 24px 24px; } /* image edge = card row edge */
.stage > .hero .hero-badge { margin-bottom: 24px; }
.stage > .hero h1 {
font-size: clamp(34px, 3.3vw, 48px);
line-height: 1.04;
margin-bottom: 18px;
}
.stage > .hero h1 .hero-line { display: block; white-space: nowrap; }
.stage > .hero .hero-sub { max-width: 560px; margin-bottom: 24px; }
.stage > .hero .hero-micro { margin-top: 18px; }
@media (max-width: 1100px) {
.stage > .hero .hero-left { padding: 32px 32px 40px 0; }
.stage > .hero h1 .hero-line { white-space: normal; }
}
@media (max-width: 900px) {
.stage > .hero {
grid-template-columns: 1fr;
height: auto;
min-height: 0;
max-height: none;
padding: 0;
}
.stage > .hero .hero-left { padding: 40px 24px 32px; }
.stage > .hero .hero-right { padding: 16px 24px; }
.stage > .hero h1 { font-size: clamp(32px, 7vw, 48px); }
}