/* ============================================================
RANKRIX — SITE CSS (homepage + global background)
Built on top of the rkx-header / rkx-footer token system.
============================================================ */
:root {
--rkx-page-text: rgba(255,255,255,0.86);
--rkx-page-muted: rgba(255,255,255,0.55);
--rkx-page-dim: rgba(255,255,255,0.32);
--rkx-page-line: rgba(255,255,255,0.08);
--rkx-page-line-strong: rgba(255,255,255,0.14);
--rkx-page-surface: rgba(255,255,255,0.025);
--rkx-page-surface-2: rgba(255,255,255,0.04);
--rkx-accent-1: #1D24CA;
--rkx-accent-2: #2d35e0;
--rkx-accent-tx: #0057ff;
--rkx-accent-glow: rgba(29,36,202,0.45);
--rkx-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
--rkx-font-mono: 'Poppins', ui-monospace, Menlo, Consolas, monospace;
--rkx-gutter: clamp(20px, 4vw, 56px);
--rkx-max: 1400px;
}
/* ============================================================
RESET + BASE
============================================================ */
*,
*::before,
*::after { box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; text-size-adjust: 100%; }
body {
margin: 0;
background: #05060d;
color: var(--rkx-page-text);
font-family: var(--rkx-font-sans);
font-size: 16px;
line-height: 1.55;
letter-spacing: -0.005em;
overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a {
color: inherit;
text-decoration: none;
}
/* selection */
::selection {
background: rgba(29,36,202,0.65);
color: #fff;
}
/* ============================================================
GLOBAL BACKGROUND
Option A: fixed viewport, behind everything, with veil + grain.
Sections can override via data-section.
============================================================ */
.rkx-bg {
position: fixed;
inset: 0;
z-index: -1;
pointer-events: none;
overflow: hidden;
background: #05060d;
}
.rkx-bg__image {
position: absolute;
inset: -4%;
background: var(--rkx-bg-image, url('../images/Galactic.jpg')) center/cover no-repeat;
background-color: #05060d;
will-change: transform;
/* slight slow drift, respects reduced-motion */
animation: rkx-drift 60s ease-in-out infinite alternate;
filter: blur(15px) saturate(100%);
-webkit-filter: blur(15px) saturate(100%);
}
.rkx-bg__veil {
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 90% 60% at 50% 10%, transparent 0%, rgba(5,6,13,0.35) 60%, rgba(5,6,13,0.85) 100%),
linear-gradient(180deg, rgba(5,6,13,0.20) 0%, rgba(5,6,13,0.55) 35%, rgba(5,6,13,0.78) 70%, #05060d 100%);
}
.rkx-bg__grain {
position: absolute;
inset: 0;
opacity: 0.045;
mix-blend-mode: overlay;
background-image: url("data:image/svg+xml;utf8,");
}
/* Frosted-glass veil — sits on top of the motion-art layer. */
.rkx-bg-blur {
position: fixed;
inset: 0;
pointer-events: none;
backdrop-filter: blur(20px) saturate(150%);
-webkit-backdrop-filter: blur(20px) saturate(150%);
background-color: rgba(0, 0, 0, 0.6);
}
@keyframes rkx-drift {
0% { transform: translate3d(-1.5%, 0.5%, 0) scale(1.02); }
100% { transform: translate3d( 1.5%, -1%, 0) scale(1.04); }
}
@media (prefers-reduced-motion: reduce) {
.rkx-bg__image { animation: none; }
}
/* ============================================================
LAYOUT PRIMITIVES
============================================================ */
.rkx-main {
/* push first section below the floating pill header */
padding-top: clamp(70px, 10vh, 130px);
}
.rkx-section {
position: relative;
padding-block: clamp(60px, 9vw, 140px);
}
.rkx-container {
width: 100%;
max-width: var(--rkx-max);
margin: 0 auto;
padding-inline: var(--rkx-gutter);
}
/* ============================================================
TYPE
============================================================ */
.rkx-h1 {
font-family: var(--rkx-font-sans);
font-weight: 700;
font-size: clamp(38px, 6.4vw, 92px);
line-height: 0.98;
letter-spacing: -0.035em;
margin: 0 0 28px;
color: #fff;
text-wrap: balance;
}
.rkx-h1__accent {
color: var(--rkx-accent-tx);
font-style: normal;
font-weight: 500;
display: inline;
}
.rkx-h2 {
font-family: var(--rkx-font-sans);
font-weight: 700;
font-size: clamp(30px, 4vw, 60px);
line-height: 1.02;
letter-spacing: -0.03em;
color: #fff;
margin: 0;
text-wrap: balance;
}
.rkx-h2__accent {
color: var(--rkx-accent-tx);
font-style: normal;
font-weight: 500;
}
.rkx-lede {
font-size: clamp(16px, 1.25vw, 19px);
line-height: 1.55;
color: var(--rkx-page-muted);
max-width: 56ch;
margin: 0 0 32px;
text-wrap: pretty;
}
.rkx-lede em {
color: #fff;
font-style: normal;
border-bottom: 1px dashed rgba(255,255,255,0.25);
padding-bottom: 1px;
}
.rkx-eyebrow {
font-family: var(--rkx-font-mono);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--rkx-accent-tx);
line-height: 1;
}
.rkx-eyebrow--dim { color: var(--rkx-page-dim); }
.rkx-eyebrow-sep {
color: var(--rkx-page-dim);
font-family: var(--rkx-font-mono);
font-size: 11px;
}
.rkx-eyebrow-row {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 8px 14px;
margin-bottom: 28px;
background: rgba(255,255,255,0.03);
border: 1px solid var(--rkx-page-line);
border-radius: 1px;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.rkx-pulse {
width: 7px;
height: 7px;
border-radius: 50%;
background: #4ade80;
box-shadow: 0 0 10px #4ade80;
animation: rkx-pulse-dot 2.4s ease-in-out infinite;
}
@keyframes rkx-pulse-dot {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.4; transform: scale(0.85); }
}
/* ============================================================
SECTION HEADS
============================================================ */
.rkx-section__head {
display: grid;
grid-template-columns: 1fr 1fr;
align-items: end;
gap: clamp(28px, 4vw, 64px);
margin-bottom: clamp(40px, 5vw, 72px);
padding-bottom: 28px;
border-bottom: 1px solid var(--rkx-page-line);
}
.rkx-section__head-left .rkx-eyebrow { display: inline-block; margin-bottom: 18px; }
.rkx-section__head-right {
font-size: clamp(15px, 1.1vw, 17px);
line-height: 1.55;
color: var(--rkx-page-muted);
max-width: 50ch;
margin: 0;
text-wrap: pretty;
}
.rkx-section__head-link {
grid-column: 2;
justify-self: end;
font-family: var(--rkx-font-mono);
font-size: 12px;
letter-spacing: 0.08em;
color: var(--rkx-accent-tx);
transition: opacity 160ms;
text-transform: uppercase;
}
.rkx-section__head-link:hover { opacity: 0.7; }
@media (max-width: 767px) {
.rkx-section__head {
grid-template-columns: 1fr;
align-items: start;
}
.rkx-section__head-link { grid-column: 1; justify-self: start; }
}
/* ============================================================
CTAs
============================================================ */
.rkx-cta-row {
display: flex;
flex-wrap: wrap;
gap: 12px;
align-items: center;
}
.rkx-cta {
position: relative;
overflow: hidden;
display: inline-flex;
align-items: center;
gap: 10px;
height: 50px;
padding: 0 22px;
font-family: var(--rkx-font-sans);
font-size: 14px;
font-weight: 600;
letter-spacing: 0.005em;
border-radius: 1px;
border: 1px solid transparent;
transition: background 160ms, border-color 160ms, box-shadow 200ms, color 160ms, gap 160ms;
}
.rkx-cta svg { width: 14px; height: 14px; transition: transform 160ms; }
.rkx-cta:hover svg { transform: translateX(2px); }
.rkx-cta--primary {
background: var(--rkx-accent-1);
color: #fff;
border-color: rgba(29,36,202,0.55);
}
.rkx-cta--primary::before {
content: '';
position: absolute;
inset: 0;
left: -100%;
background: linear-gradient(115deg, transparent 0%, transparent 35%, rgba(255,255,255,0.28) 50%, transparent 65%, transparent 100%);
transition: left 700ms;
pointer-events: none;
}
.rkx-cta--primary:hover {
background: var(--rkx-accent-2);
box-shadow: 0 0 26px var(--rkx-accent-glow), 0 8px 30px -10px rgba(29,36,202,0.6);
}
.rkx-cta--primary:hover::before { left: 100%; }
.rkx-cta--primary > * { position: relative; z-index: 1; }
.rkx-cta--ghost {
background: rgba(255,255,255,0.04);
color: #fff;
border-color: var(--rkx-page-line-strong);
}
.rkx-cta--ghost:hover {
background: rgba(255,255,255,0.08);
border-color: rgba(255,255,255,0.28);
}
/* ============================================================
HERO
============================================================ */
.rkx-hero {
padding-block: clamp(40px, 8vh, 100px) clamp(60px, 8vw, 120px);
}
.rkx-hero__grid {
display: grid;
grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
gap: clamp(32px, 5vw, 80px);
align-items: end;
}
@media (max-width: 1023px) {
.rkx-hero__grid { grid-template-columns: 1fr; gap: 48px; }
}
.rkx-hero__lead { min-width: 0; }
.rkx-trust {
display: flex;
flex-wrap: wrap;
gap: 24px 40px;
margin: 36px 0 0;
padding: 24px 0 0;
list-style: none;
border-top: 1px solid var(--rkx-page-line);
font-size: 13px;
color: var(--rkx-page-muted);
}
.rkx-trust li { display: inline-flex; align-items: baseline; gap: 10px; }
.rkx-trust__mono {
font-family: var(--rkx-font-mono);
font-size: 10px;
letter-spacing: 0.12em;
color: var(--rkx-accent-tx);
}
/* Hero side panel */
.rkx-hero__panel { min-width: 0; }
.rkx-panel {
background: rgba(8,10,22,0.5);
border: 1px solid var(--rkx-page-line-strong);
backdrop-filter: blur(14px) saturate(1.4);
-webkit-backdrop-filter: blur(14px) saturate(1.4);
box-shadow: 0 24px 60px -20px rgba(0,0,0,0.6), 0 1px 0 rgba(255,255,255,0.05) inset;
}
.rkx-panel__head {
display: flex;
align-items: center;
gap: 10px;
padding: 14px 18px;
border-bottom: 1px solid var(--rkx-page-line);
background: rgba(255,255,255,0.025);
}
.rkx-panel__dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--rkx-accent-tx);
box-shadow: 0 0 10px var(--rkx-accent-glow);
animation: rkx-pulse-dot 2.4s ease-in-out infinite;
}
.rkx-panel__title {
font-family: var(--rkx-font-mono);
font-size: 11px;
letter-spacing: 0.14em;
color: var(--rkx-page-text);
flex: 1;
}
.rkx-panel__meta {
font-family: var(--rkx-font-mono);
font-size: 10px;
color: var(--rkx-page-dim);
letter-spacing: 0.1em;
}
.rkx-panel__rows { padding: 6px 18px; }
.rkx-row {
display: grid;
grid-template-columns: 1fr auto auto;
align-items: baseline;
gap: 14px;
padding: 14px 0;
border-bottom: 1px dashed var(--rkx-page-line);
}
.rkx-row:last-child { border-bottom: none; }
.rkx-row__label {
font-size: 12.5px;
color: var(--rkx-page-muted);
line-height: 1.3;
}
.rkx-row__val {
font-family: var(--rkx-font-sans);
font-feature-settings: 'tnum';
font-size: 22px;
font-weight: 700;
color: #fff;
letter-spacing: -0.02em;
line-height: 1;
}
.rkx-row__val small { font-size: 12px; font-weight: 500; color: var(--rkx-page-muted); margin-left: 2px; }
.rkx-row__delta {
font-family: var(--rkx-font-mono);
font-size: 11px;
color: var(--rkx-page-dim);
letter-spacing: 0.05em;
white-space: nowrap;
}
.rkx-row__delta--pos { color: #4ade80; }
.rkx-panel__foot {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 18px;
border-top: 1px solid var(--rkx-page-line);
background: rgba(255,255,255,0.015);
}
.rkx-panel__link {
font-family: var(--rkx-font-mono);
font-size: 11px;
color: var(--rkx-accent-tx);
letter-spacing: 0.06em;
transition: opacity 160ms;
}
.rkx-panel__link:hover { opacity: 0.7; }
/* ============================================================
MARQUEE STRIP
============================================================ */
.rkx-marquee-section {
padding-block: clamp(28px, 4vw, 56px);
border-top: 1px solid var(--rkx-page-line);
border-bottom: 1px solid var(--rkx-page-line);
background: rgba(255,255,255,0.015);
}
.rkx-marquee-wrap {
display: flex;
align-items: center;
gap: clamp(20px, 3vw, 48px);
overflow: hidden;
}
.rkx-marquee-wrap > .rkx-eyebrow {
flex-shrink: 0;
white-space: nowrap;
}
.rkx-marquee {
flex: 1;
overflow: hidden;
mask-image: linear-gradient(90deg, transparent 0, #000 80px, #000 calc(100% - 80px), transparent 100%);
-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 80px, #000 calc(100% - 80px), transparent 100%);
}
.rkx-marquee__track {
display: inline-flex;
gap: 56px;
animation: rkx-marquee 40s linear infinite;
white-space: nowrap;
padding-left: 56px;
}
.rkx-marquee__item {
font-family: var(--rkx-font-mono);
font-size: 13px;
letter-spacing: 0.18em;
color: var(--rkx-page-muted);
text-transform: uppercase;
}
@keyframes rkx-marquee {
0% { transform: translate3d(0, 0, 0); }
100% { transform: translate3d(-50%, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
.rkx-marquee__track { animation: none; }
}
@media (max-width: 767px) {
.rkx-marquee-wrap { flex-direction: column; align-items: flex-start; gap: 14px; }
.rkx-marquee { width: 100%; }
}
/* ============================================================
SERVICES
============================================================ */
.rkx-svc-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1px;
background: var(--rkx-page-line);
border: 1px solid var(--rkx-page-line);
}
@media (max-width: 1023px) {
.rkx-svc-grid { grid-template-columns: 1fr; }
}
.rkx-svc {
position: relative;
padding: clamp(28px, 3vw, 44px);
background: rgba(8,10,22,0.45);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
display: flex;
flex-direction: column;
gap: 22px;
transition: background 280ms, transform 280ms;
}
.rkx-svc:hover { background: rgba(12,14,28,0.6); }
.rkx-svc--feature {
background: linear-gradient(180deg, rgba(29,36,202,0.10) 0%, rgba(8,10,22,0.5) 70%);
border-bottom: 1px solid rgba(29,36,202,0.3);
}
.rkx-svc--feature:hover { background: linear-gradient(180deg, rgba(29,36,202,0.15) 0%, rgba(12,14,28,0.6) 70%); }
.rkx-svc__head {
display: flex;
align-items: baseline;
gap: 16px;
flex-wrap: wrap;
}
.rkx-svc__num {
font-family: var(--rkx-font-mono);
font-size: 11px;
letter-spacing: 0.14em;
color: var(--rkx-accent-tx);
line-height: 1;
}
.rkx-svc__title {
font-family: var(--rkx-font-sans);
font-size: clamp(22px, 1.6vw, 28px);
font-weight: 700;
letter-spacing: -0.025em;
color: #fff;
margin: 0;
flex: 1;
}
.rkx-svc__desc {
font-size: 14.5px;
line-height: 1.55;
color: var(--rkx-page-muted);
margin: 0;
max-width: 38ch;
text-wrap: pretty;
}
.rkx-svc__list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
}
.rkx-svc__list li {
border-top: 1px solid var(--rkx-page-line);
}
.rkx-svc__list a {
display: block;
padding: 12px 0;
font-size: 14px;
font-weight: 500;
color: var(--rkx-page-text);
transition: color 160ms, padding-left 160ms;
position: relative;
}
.rkx-svc__list a::after {
content: '→';
font-family: var(--rkx-font-mono);
color: var(--rkx-page-dim);
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
opacity: 0;
transition: opacity 160ms, transform 220ms;
}
.rkx-svc__list a:hover {
color: #fff;
padding-left: 8px;
}
.rkx-svc__list a:hover::after { opacity: 1; transform: translate(-2px, -50%); }
.rkx-svc__cta {
margin-top: auto;
font-family: var(--rkx-font-mono);
font-size: 12px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--rkx-accent-tx);
align-self: flex-start;
padding-top: 12px;
transition: opacity 160ms, gap 160ms;
}
.rkx-svc__cta:hover { opacity: 0.7; }
/* ============================================================
METRICS STRIP
============================================================ */
.rkx-metrics {
padding-block: clamp(40px, 6vw, 80px);
border-top: 1px solid var(--rkx-page-line);
border-bottom: 1px solid var(--rkx-page-line);
background: rgba(255,255,255,0.012);
}
.rkx-metrics__grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: clamp(20px, 3vw, 40px);
}
@media (max-width: 1023px) { .rkx-metrics__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 479px) { .rkx-metrics__grid { grid-template-columns: 1fr; } }
.rkx-metric {
display: flex;
flex-direction: column;
gap: 6px;
padding-left: 18px;
border-left: 1px solid var(--rkx-page-line-strong);
}
.rkx-metric__num {
font-family: var(--rkx-font-sans);
font-feature-settings: 'tnum';
font-size: clamp(40px, 4.5vw, 64px);
font-weight: 700;
color: #fff;
line-height: 0.95;
letter-spacing: -0.04em;
}
.rkx-metric__num small {
font-size: 0.45em;
font-weight: 500;
color: var(--rkx-accent-tx);
margin-left: 2px;
}
.rkx-metric__lbl {
font-size: 13.5px;
color: var(--rkx-page-muted);
line-height: 1.4;
text-wrap: pretty;
}
.rkx-metric__src {
font-family: var(--rkx-font-mono);
font-size: 10px;
color: rgba(248,113,113,0.7); /* visibly flagged — requires source */
letter-spacing: 0.08em;
margin-top: 2px;
}
/* ============================================================
PROCESS
============================================================ */
.rkx-process__list {
counter-reset: step;
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1px;
background: var(--rkx-page-line);
border: 1px solid var(--rkx-page-line);
}
@media (max-width: 1023px) { .rkx-process__list { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 539px) { .rkx-process__list { grid-template-columns: 1fr; } }
.rkx-step {
position: relative;
background: rgba(8,10,22,0.45);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
padding: clamp(24px, 2.4vw, 36px);
display: flex;
flex-direction: column;
gap: 14px;
min-height: 280px;
transition: background 240ms;
}
.rkx-step:hover { background: rgba(12,14,28,0.6); }
.rkx-step__num {
font-family: var(--rkx-font-mono);
font-size: 11px;
letter-spacing: 0.14em;
color: var(--rkx-accent-tx);
line-height: 1;
}
.rkx-step__title {
font-family: var(--rkx-font-sans);
font-size: clamp(22px, 1.6vw, 28px);
font-weight: 700;
letter-spacing: -0.025em;
color: #fff;
margin: 0;
}
.rkx-step__desc {
font-size: 14px;
line-height: 1.55;
color: var(--rkx-page-muted);
margin: 0;
text-wrap: pretty;
}
.rkx-step__meta {
margin-top: auto;
padding-top: 18px;
border-top: 1px dashed var(--rkx-page-line);
font-family: var(--rkx-font-mono);
font-size: 11px;
letter-spacing: 0.08em;
color: var(--rkx-page-dim);
text-transform: uppercase;
}
/* ============================================================
CASE STUDIES
============================================================ */
.rkx-cases__grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(20px, 2vw, 28px);
}
@media (max-width: 1023px) { .rkx-cases__grid { grid-template-columns: 1fr; } }
.rkx-case {
display: flex;
flex-direction: column;
background: rgba(8,10,22,0.4);
border: 1px solid var(--rkx-page-line);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
transition: border-color 240ms, transform 240ms, box-shadow 280ms;
}
.rkx-case:hover {
border-color: rgba(29,36,202,0.45);
transform: translateY(-3px);
box-shadow: 0 20px 50px -20px rgba(29,36,202,0.35);
}
.rkx-case__media {
position: relative;
aspect-ratio: 16/10;
overflow: hidden;
border-bottom: 1px solid var(--rkx-page-line);
}
.rkx-case__media::after {
content: attr(data-tag);
position: absolute;
top: 12px;
left: 12px;
padding: 5px 9px;
font-family: var(--rkx-font-mono);
font-size: 10px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--rkx-accent-tx);
background: rgba(8,10,22,0.7);
border: 1px solid rgba(29,36,202,0.4);
border-radius: 1px;
backdrop-filter: blur(8px);
z-index: 2;
}
.rkx-case__placeholder {
position: absolute;
inset: 0;
background:
repeating-linear-gradient(135deg, rgba(255,255,255,0.025) 0 1px, transparent 1px 14px),
linear-gradient(135deg, rgba(29,36,202,0.18) 0%, rgba(8,10,22,0.4) 60%);
display: flex;
align-items: center;
justify-content: center;
}
.rkx-case__placeholder-label {
font-family: var(--rkx-font-mono);
font-size: 11px;
letter-spacing: 0.18em;
color: var(--rkx-page-dim);
text-transform: uppercase;
}
.rkx-case__body {
padding: clamp(20px, 2vw, 28px);
display: flex;
flex-direction: column;
gap: 14px;
}
.rkx-case__meta {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
flex-wrap: wrap;
}
.rkx-case__title {
font-family: var(--rkx-font-sans);
font-size: clamp(17px, 1.3vw, 20px);
font-weight: 600;
letter-spacing: -0.02em;
color: #fff;
margin: 0;
line-height: 1.25;
text-wrap: balance;
}
.rkx-case__stats {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
padding-top: 14px;
margin-top: 4px;
border-top: 1px solid var(--rkx-page-line);
}
.rkx-case__stat-num {
display: block;
font-family: var(--rkx-font-sans);
font-feature-settings: 'tnum';
font-size: 24px;
font-weight: 700;
color: #fff;
letter-spacing: -0.025em;
line-height: 1;
}
.rkx-case__stat-num small {
font-size: 0.55em;
font-weight: 500;
color: var(--rkx-accent-tx);
margin-left: 2px;
}
.rkx-case__stat-lbl {
display: block;
font-size: 11px;
color: var(--rkx-page-dim);
margin-top: 5px;
letter-spacing: 0.02em;
}
/* ============================================================
TESTIMONIAL
============================================================ */
.rkx-testimonial { padding-block: clamp(80px, 10vw, 160px); }
.rkx-quote {
position: relative;
margin: 0;
max-width: 980px;
padding: clamp(36px, 4vw, 60px);
border: 1px solid var(--rkx-page-line-strong);
background: rgba(8,10,22,0.5);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.rkx-quote__mark {
position: absolute;
top: 12px;
left: clamp(20px, 3vw, 40px);
font-family: var(--rkx-font-sans);
font-size: clamp(80px, 9vw, 140px);
font-weight: 700;
line-height: 1;
color: var(--rkx-accent-1);
opacity: 0.35;
}
.rkx-quote__body {
position: relative;
margin: 0 0 32px;
font-family: var(--rkx-font-sans);
font-size: clamp(20px, 2vw, 30px);
font-weight: 500;
line-height: 1.35;
letter-spacing: -0.02em;
color: #fff;
text-wrap: balance;
}
.rkx-quote__cite {
display: flex;
align-items: center;
gap: 16px;
padding-top: 24px;
border-top: 1px solid var(--rkx-page-line);
}
.rkx-quote__avatar {
width: 48px;
height: 48px;
flex-shrink: 0;
background: linear-gradient(135deg, rgba(29,36,202,0.3), rgba(255,255,255,0.04));
border: 1px solid var(--rkx-page-line-strong);
display: flex;
align-items: center;
justify-content: center;
font-family: var(--rkx-font-mono);
font-size: 11px;
color: var(--rkx-accent-tx);
}
.rkx-quote__person { flex: 1; }
.rkx-quote__name { font-weight: 600; color: #fff; font-size: 14px; }
.rkx-quote__role { font-size: 12.5px; color: var(--rkx-page-muted); margin-top: 2px; }
.rkx-quote__logo {
width: 120px;
height: 36px;
background: rgba(255,255,255,0.025);
border: 1px dashed var(--rkx-page-line-strong);
display: flex;
align-items: center;
justify-content: center;
}
@media (max-width: 539px) {
.rkx-quote__logo { display: none; }
.rkx-quote__cite { flex-wrap: wrap; }
}
/* ============================================================
FINAL CTA
============================================================ */
.rkx-final { padding-block: clamp(60px, 7vw, 120px) clamp(100px, 12vw, 200px); }
.rkx-final__card {
position: relative;
overflow: hidden;
padding: clamp(40px, 5vw, 80px);
border: 1px solid rgba(29,36,202,0.45);
background:
linear-gradient(135deg, rgba(29,36,202,0.18) 0%, rgba(8,10,22,0.6) 55%, rgba(29,36,202,0.10) 100%);
box-shadow: 0 30px 90px -30px rgba(29,36,202,0.5), 0 1px 0 rgba(255,255,255,0.04) inset;
}
.rkx-final__bg {
position: absolute;
inset: 0;
background:
radial-gradient(circle at 85% 0%, rgba(29,36,202,0.5) 0%, transparent 50%),
radial-gradient(circle at 0% 100%, rgba(0,87,255,0.18) 0%, transparent 55%);
pointer-events: none;
z-index: 0;
}
.rkx-final__inner {
position: relative;
z-index: 1;
max-width: 720px;
}
.rkx-final__inner .rkx-eyebrow { display: inline-block; margin-bottom: 24px; }
.rkx-final__title { margin-bottom: 20px; }
.rkx-final__desc {
font-size: clamp(15px, 1.2vw, 18px);
color: var(--rkx-page-muted);
line-height: 1.55;
margin: 0 0 36px;
max-width: 56ch;
text-wrap: pretty;
}
/* ============================================================
RESPONSIVE TWEAKS
============================================================ */
@media (max-width: 639px) {
.rkx-main { padding-top: 80px; }
.rkx-hero { padding-block: 30px 60px; }
.rkx-eyebrow-row { flex-wrap: wrap; }
.rkx-cta { width: 100%; justify-content: center; }
.rkx-section__head { margin-bottom: 32px; }
}
/* 4K bump */
@media (min-width: 2560px) {
:root { --rkx-max: 1900px; }
.rkx-main { padding-top: 180px; }
}
@media (min-width: 3840px) {
:root { --rkx-max: 2600px; --rkx-gutter: 80px; }
.rkx-main { padding-top: 240px; }
body { font-size: 18px; }
}
/* ============================================================
PAGE-LEVEL PRIMITIVES — added in expansion round
============================================================ */
/* Compact hero (interior pages) */
.rkx-hero--compact { padding-block: clamp(40px, 6vw, 90px) clamp(40px, 5vw, 80px); }
.rkx-hero--compact .rkx-h1 { font-size: clamp(34px, 5vw, 72px); }
/* Breadcrumbs */
.rkx-crumbs {
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
margin-bottom: 22px;
font-family: var(--rkx-font-mono);
font-size: 11px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--rkx-page-dim);
}
.rkx-crumbs a { color: var(--rkx-page-muted); transition: color 160ms; }
.rkx-crumbs a:hover { color: #fff; }
.rkx-crumbs__sep { color: var(--rkx-page-dim); }
.rkx-crumbs__current { color: var(--rkx-accent-tx); }
/* FAQ */
.rkx-faq__list {
display: flex;
flex-direction: column;
border-top: 1px solid var(--rkx-page-line);
}
.rkx-faq__item {
border-bottom: 1px solid var(--rkx-page-line);
}
.rkx-faq__trigger {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
padding: 22px 0;
background: transparent;
border: none;
color: #fff;
font-family: var(--rkx-font-sans);
font-size: clamp(16px, 1.3vw, 19px);
font-weight: 600;
letter-spacing: -0.01em;
text-align: left;
cursor: pointer;
transition: padding-left 160ms;
}
.rkx-faq__trigger:hover { padding-left: 8px; }
.rkx-faq__chevron {
width: 22px; height: 22px;
border: 1px solid var(--rkx-page-line-strong);
border-radius: 1px;
display: grid;
place-items: center;
color: var(--rkx-accent-tx);
font-family: var(--rkx-font-mono);
font-size: 14px;
line-height: 1;
flex-shrink: 0;
transition: background 160ms, border-color 160ms, transform 240ms;
}
.rkx-faq__item.is-open .rkx-faq__chevron {
background: rgba(29,36,202,0.18);
border-color: rgba(29,36,202,0.45);
transform: rotate(45deg);
}
.rkx-faq__body {
overflow: hidden;
max-height: 0;
transition: max-height 320ms ease;
}
.rkx-faq__item.is-open .rkx-faq__body { max-height: 480px; }
.rkx-faq__body p {
font-size: 14.5px;
line-height: 1.65;
color: var(--rkx-page-muted);
margin: 0 0 22px;
max-width: 70ch;
padding-right: 42px;
text-wrap: pretty;
}
/* Two-column intro (eyebrow + h2 + lede) */
.rkx-two-col {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
gap: clamp(28px, 4vw, 80px);
align-items: start;
}
@media (max-width: 1023px) { .rkx-two-col { grid-template-columns: 1fr; } }
.rkx-two-col__title { margin: 0; }
.rkx-two-col__body { font-size: clamp(15px, 1.1vw, 17px); color: var(--rkx-page-muted); line-height: 1.65; }
.rkx-two-col__body p + p { margin-top: 1em; }
/* Bullet grid (deliverables / features) */
.rkx-bullets {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1px;
background: var(--rkx-page-line);
border: 1px solid var(--rkx-page-line);
}
@media (max-width: 639px) { .rkx-bullets { grid-template-columns: 1fr; } }
.rkx-bullets li {
background: rgba(8,10,22,0.45);
padding: 22px 24px;
display: flex;
gap: 16px;
align-items: flex-start;
transition: background 240ms;
}
.rkx-bullets li:hover { background: rgba(12,14,28,0.6); }
.rkx-bullets__num {
font-family: var(--rkx-font-mono);
font-size: 11px;
letter-spacing: 0.1em;
color: var(--rkx-accent-tx);
line-height: 1.6;
min-width: 24px;
}
.rkx-bullets__title {
font-size: 15.5px;
font-weight: 600;
color: #fff;
margin: 0 0 4px;
}
.rkx-bullets__desc {
font-size: 13.5px;
color: var(--rkx-page-muted);
line-height: 1.55;
margin: 0;
}
/* Pillar trio */
.rkx-pillars {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1px;
background: var(--rkx-page-line);
border: 1px solid var(--rkx-page-line);
}
@media (max-width: 1023px) { .rkx-pillars { grid-template-columns: 1fr; } }
.rkx-pillar {
background: rgba(8,10,22,0.45);
padding: clamp(28px, 3vw, 44px);
display: flex;
flex-direction: column;
gap: 14px;
transition: background 240ms;
}
.rkx-pillar:hover { background: rgba(12,14,28,0.6); }
.rkx-pillar__num {
font-family: var(--rkx-font-mono);
font-size: 11px;
letter-spacing: 0.14em;
color: var(--rkx-accent-tx);
}
.rkx-pillar__title {
font-size: clamp(20px, 1.6vw, 26px);
font-weight: 700;
letter-spacing: -0.025em;
color: #fff;
margin: 0;
}
.rkx-pillar__desc {
font-size: 14px;
color: var(--rkx-page-muted);
line-height: 1.6;
margin: 0;
text-wrap: pretty;
}
/* Long-form prose (blog posts, legal pages) */
.rkx-prose {
max-width: 72ch;
margin: 0 auto;
font-size: 16.5px;
line-height: 1.7;
color: rgba(255,255,255,0.78);
}
.rkx-prose > * + * { margin-top: 1.1em; }
.rkx-prose h2 {
font-family: var(--rkx-font-sans);
font-size: clamp(22px, 2.2vw, 30px);
font-weight: 700;
letter-spacing: -0.02em;
color: #fff;
margin-top: 1.8em;
margin-bottom: 0.4em;
text-wrap: balance;
}
.rkx-prose h3 {
font-family: var(--rkx-font-sans);
font-size: clamp(18px, 1.5vw, 22px);
font-weight: 600;
color: #fff;
margin-top: 1.6em;
margin-bottom: 0.3em;
}
.rkx-prose a {
color: var(--rkx-accent-tx);
border-bottom: 1px solid rgba(0,87,255,0.4);
transition: color 160ms, border-color 160ms;
}
.rkx-prose a:hover { color: #fff; border-bottom-color: #fff; }
.rkx-prose ul, .rkx-prose ol { padding-left: 1.3em; }
.rkx-prose li + li { margin-top: 0.4em; }
.rkx-prose blockquote {
border-left: 2px solid var(--rkx-accent-1);
padding: 4px 0 4px 20px;
margin: 1.6em 0;
color: #fff;
font-size: 1.1em;
font-style: normal;
}
.rkx-prose code {
font-family: var(--rkx-font-mono);
font-size: 0.88em;
background: rgba(255,255,255,0.06);
padding: 1px 6px;
border-radius: 1px;
}
.rkx-prose hr {
border: 0;
border-top: 1px solid var(--rkx-page-line);
margin: 2em 0;
}
/* Article header */
.rkx-article-head {
max-width: 72ch;
margin: 0 auto clamp(36px, 4vw, 64px);
}
.rkx-article-head .rkx-h1 {
font-size: clamp(30px, 4.5vw, 56px);
margin-bottom: 18px;
}
.rkx-article-meta {
display: flex;
flex-wrap: wrap;
gap: 18px;
font-family: var(--rkx-font-mono);
font-size: 11px;
letter-spacing: 0.1em;
color: var(--rkx-page-dim);
text-transform: uppercase;
padding-top: 18px;
border-top: 1px solid var(--rkx-page-line);
}
.rkx-article-meta strong { color: var(--rkx-page-text); font-weight: 500; }
/* Post / job / case card grid */
.rkx-cards {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(20px, 2vw, 28px);
}
@media (max-width: 1023px) { .rkx-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 639px) { .rkx-cards { grid-template-columns: 1fr; } }
.rkx-card {
display: flex;
flex-direction: column;
padding: clamp(22px, 2vw, 32px);
background: rgba(8,10,22,0.45);
border: 1px solid var(--rkx-page-line);
transition: border-color 220ms, transform 240ms, box-shadow 280ms;
text-decoration: none;
color: inherit;
}
.rkx-card:hover {
border-color: rgba(29,36,202,0.45);
transform: translateY(-3px);
box-shadow: 0 20px 50px -20px rgba(29,36,202,0.35);
}
.rkx-card__cat {
font-family: var(--rkx-font-mono);
font-size: 10px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--rkx-accent-tx);
margin-bottom: 14px;
}
.rkx-card__title {
font-size: clamp(17px, 1.4vw, 22px);
font-weight: 600;
letter-spacing: -0.02em;
line-height: 1.25;
color: #fff;
margin: 0 0 12px;
text-wrap: balance;
}
.rkx-card__desc {
font-size: 14px;
line-height: 1.55;
color: var(--rkx-page-muted);
margin: 0 0 18px;
flex: 1;
}
.rkx-card__meta {
display: flex;
align-items: center;
justify-content: space-between;
padding-top: 14px;
border-top: 1px solid var(--rkx-page-line);
font-family: var(--rkx-font-mono);
font-size: 10px;
letter-spacing: 0.1em;
color: var(--rkx-page-dim);
text-transform: uppercase;
}
.rkx-card__cta {
color: var(--rkx-accent-tx);
transition: gap 160ms;
}
/* Pricing tier */
.rkx-tiers {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1px;
background: var(--rkx-page-line);
border: 1px solid var(--rkx-page-line);
}
@media (max-width: 1023px) { .rkx-tiers { grid-template-columns: 1fr; } }
.rkx-tier {
background: rgba(8,10,22,0.5);
padding: clamp(28px, 2.5vw, 40px);
display: flex;
flex-direction: column;
gap: 18px;
transition: background 240ms;
}
.rkx-tier--feat {
background: linear-gradient(180deg, rgba(29,36,202,0.12) 0%, rgba(8,10,22,0.55) 70%);
border-bottom: 1px solid rgba(29,36,202,0.45);
position: relative;
}
.rkx-tier--feat::before {
content: 'MOST POPULAR';
position: absolute;
top: 0;
left: 50%;
transform: translate(-50%, -50%);
padding: 4px 10px;
background: var(--rkx-accent-1);
color: #fff;
font-family: var(--rkx-font-mono);
font-size: 9.5px;
letter-spacing: 0.16em;
border: 1px solid rgba(29,36,202,0.6);
}
.rkx-tier__name {
font-family: var(--rkx-font-mono);
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--rkx-accent-tx);
}
.rkx-tier__price {
font-size: clamp(36px, 4vw, 56px);
font-weight: 700;
letter-spacing: -0.03em;
color: #fff;
line-height: 1;
}
.rkx-tier__price small {
font-size: 0.32em;
color: var(--rkx-page-muted);
font-weight: 500;
letter-spacing: 0;
margin-left: 6px;
}
.rkx-tier__desc {
font-size: 13.5px;
color: var(--rkx-page-muted);
line-height: 1.5;
margin: 0;
}
.rkx-tier__list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
}
.rkx-tier__list li {
padding: 11px 0;
border-top: 1px solid var(--rkx-page-line);
font-size: 13.5px;
color: var(--rkx-page-text);
display: flex;
align-items: flex-start;
gap: 10px;
line-height: 1.4;
}
.rkx-tier__list li::before {
content: '+';
color: var(--rkx-accent-tx);
font-family: var(--rkx-font-mono);
font-size: 13px;
flex-shrink: 0;
}
.rkx-tier__cta { margin-top: auto; }
/* Contact form */
.rkx-form { display: flex; flex-direction: column; gap: 16px; max-width: 540px; }
.rkx-field { display: flex; flex-direction: column; gap: 6px; }
.rkx-field__label {
font-family: var(--rkx-font-mono);
font-size: 10px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--rkx-page-dim);
}
.rkx-field input,
.rkx-field textarea,
.rkx-field select {
width: 100%;
padding: 14px 16px;
background: rgba(255,255,255,0.02);
border: 1px solid var(--rkx-page-line-strong);
border-radius: 1px;
color: #fff;
font-family: var(--rkx-font-sans);
font-size: 14.5px;
line-height: 1.4;
transition: border-color 160ms, background 160ms;
}
.rkx-field input:focus,
.rkx-field textarea:focus,
.rkx-field select:focus {
outline: none;
border-color: var(--rkx-accent-tx);
background: rgba(255,255,255,0.04);
}
.rkx-field textarea { resize: vertical; min-height: 120px; }
/* Contact split */
.rkx-contact {
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: clamp(32px, 4vw, 64px);
align-items: start;
}
@media (max-width: 1023px) { .rkx-contact { grid-template-columns: 1fr; } }
.rkx-contact__info {
display: flex;
flex-direction: column;
gap: 22px;
padding: clamp(24px, 2.4vw, 36px);
border: 1px solid var(--rkx-page-line-strong);
background: rgba(8,10,22,0.4);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.rkx-contact__row { display: flex; flex-direction: column; gap: 4px; }
.rkx-contact__lbl {
font-family: var(--rkx-font-mono);
font-size: 10px;
letter-spacing: 0.14em;
color: var(--rkx-page-dim);
text-transform: uppercase;
}
.rkx-contact__val { font-size: 15px; color: #fff; }
.rkx-contact__val a { color: inherit; border-bottom: 1px dashed rgba(255,255,255,0.25); }
.rkx-contact__val a:hover { color: var(--rkx-accent-tx); border-bottom-color: var(--rkx-accent-tx); }
/* 404 / empty state */
.rkx-empty {
text-align: center;
padding-block: clamp(80px, 12vw, 200px);
}
.rkx-empty__code {
font-family: var(--rkx-font-mono);
font-size: clamp(80px, 14vw, 200px);
font-weight: 600;
line-height: 1;
letter-spacing: -0.04em;
color: transparent;
-webkit-text-stroke: 1px var(--rkx-accent-tx);
margin-bottom: 8px;
}
.rkx-empty__h1 {
font-size: clamp(28px, 3.5vw, 48px);
font-weight: 700;
letter-spacing: -0.025em;
color: #fff;
margin: 0 0 16px;
}
.rkx-empty__desc {
font-size: clamp(15px, 1.2vw, 17px);
color: var(--rkx-page-muted);
max-width: 56ch;
margin: 0 auto 32px;
line-height: 1.55;
}
/* List view (services parent) */
.rkx-list-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1px;
background: var(--rkx-page-line);
border: 1px solid var(--rkx-page-line);
}
@media (max-width: 767px) { .rkx-list-grid { grid-template-columns: 1fr; } }
.rkx-list-item {
background: rgba(8,10,22,0.45);
padding: clamp(22px, 2.2vw, 32px);
display: flex;
flex-direction: column;
gap: 12px;
text-decoration: none;
color: inherit;
transition: background 240ms;
}
.rkx-list-item:hover { background: rgba(29,36,202,0.10); }
.rkx-list-item__top {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 14px;
}
.rkx-list-item__num {
font-family: var(--rkx-font-mono);
font-size: 11px;
letter-spacing: 0.1em;
color: var(--rkx-accent-tx);
}
.rkx-list-item__arrow {
font-family: var(--rkx-font-mono);
color: var(--rkx-page-dim);
transition: transform 220ms, color 160ms;
}
.rkx-list-item:hover .rkx-list-item__arrow { transform: translateX(4px); color: var(--rkx-accent-tx); }
.rkx-list-item__title {
font-size: clamp(18px, 1.5vw, 22px);
font-weight: 600;
letter-spacing: -0.02em;
color: #fff;
margin: 0;
}
.rkx-list-item__desc {
font-size: 13.5px;
color: var(--rkx-page-muted);
line-height: 1.55;
margin: 0;
}
/* ============================================================
POPPINS 12PX OVERRIDE — forces 12px on every mono-styled label
(user request — May 2026)
============================================================ */
[class*="__mono"],
.rkx-eyebrow,
.rkx-eyebrow-sep,
.rkx-eyebrow--dim,
.rkx-trust__mono,
.rkx-panel__title,
.rkx-panel__meta,
.rkx-panel__link,
.rkx-row__delta,
.rkx-marquee__item,
.rkx-svc__num,
.rkx-svc__cta,
.rkx-step__num,
.rkx-step__meta,
.rkx-pillar__num,
.rkx-bullets__num,
.rkx-card__cat,
.rkx-card__meta,
.rkx-card__cta,
.rkx-list-item__num,
.rkx-list-item__arrow,
.rkx-tier__name,
.rkx-tier__price small,
.rkx-tier__list li::before,
.rkx-field__label,
.rkx-contact__lbl,
.rkx-crumbs,
.rkx-crumbs a,
.rkx-crumbs__sep,
.rkx-crumbs__current,
.rkx-faq__chevron,
.rkx-case__placeholder-label,
.rkx-case__stat-num small,
.rkx-metric__num small,
.rkx-metric__src,
.rkx-fc-axis-label,
.rkx-fc-metric-num,
.rkx-fc-metric-lbl,
.rkx-feat-label,
.rkx-foot-copy,
.rkx-foot-explore-arrow,
.rkx-pane-label,
.rkx-pane-link span:last-child,
.rkx-drawer-title,
.rkx-drawer-section-label,
.rkx-drawer-link span:last-child,
.rkxl__hud-top,
.rkxl__hud-bot,
.rkxl__eyebrow,
.rkxl__status-label,
.rkxl__pct,
.rkxl__log,
.rkxl__hint,
.rkxl__hint kbd,
.rkx-article-meta,
.rkx-prose code {
font-family: 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
font-size: 12px !important;
letter-spacing: 0.04em !important;
}
/* Numeric / display values keep their large sizes — only the family changes */
.rkx-row__val,
.rkx-row__val small,
.rkx-metric__num,
.rkx-case__stat-num,
.rkx-empty__code,
.rkx-tier__price {
font-family: 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}
/* ============================================================
HERO — FULL-WIDTH 2-COLUMN (May 2026 redesign)
============================================================ */
.rkx-hero--full {
padding: 0;
width: 100%;
max-width: none;
margin: 0;
}
.rkx-hero--full .rkx-hero__grid {
display: grid;
grid-template-columns: 1fr 1fr;
width: 100%;
min-height: clamp(560px, 88vh, 880px);
gap: 0;
}
.rkx-hero--full .rkx-hero__lead {
padding: clamp(40px, 7vw, 110px) clamp(28px, 5vw, 90px);
display: flex;
flex-direction: column;
justify-content: center;
min-width: 0;
border-right: 1px solid var(--rkx-page-line);
}
.rkx-hero--full .rkx-hero__widget {
padding: clamp(24px, 3vw, 56px);
display: flex;
align-items: center;
justify-content: center;
min-width: 0;
position: relative;
overflow: hidden;
}
@media (max-width: 1023px) {
.rkx-hero--full .rkx-hero__grid { grid-template-columns: 1fr; min-height: 0; }
.rkx-hero--full .rkx-hero__lead { border-right: none; border-bottom: 1px solid var(--rkx-page-line); }
.rkx-hero--full .rkx-hero__widget { aspect-ratio: 1/1; padding: 24px; }
}
/* ============================================================
ORBITAL WIDGET
============================================================ */
.rkx-orb {
position: relative;
width: 100%;
max-width: 620px;
aspect-ratio: 1;
perspective: 1200px;
transform-style: preserve-3d;
}
.rkx-orb__glow {
position: absolute;
inset: -20%;
background:
radial-gradient(circle at var(--rkx-mx, 50%) var(--rkx-my, 50%),
rgba(0,87,255,0.35) 0%,
rgba(0,87,255,0.15) 25%,
transparent 55%);
pointer-events: none;
transition: background 80ms linear;
filter: blur(20px);
z-index: 0;
}
.rkx-orb__rings {
position: absolute;
inset: 0;
pointer-events: none;
transform: rotateX(var(--rkx-rx, 0deg)) rotateY(var(--rkx-ry, 0deg));
transform-style: preserve-3d;
transition: transform 200ms ease-out;
}
.rkx-orb__ring {
position: absolute;
inset: 0;
border: 1px solid var(--rkx-page-line);
border-radius: 50%;
}
.rkx-orb__ring--1 { inset: 24%; border-color: rgba(255,255,255,0.18); }
.rkx-orb__ring--2 { inset: 12%; border-color: rgba(255,255,255,0.12); border-style: dashed; }
.rkx-orb__ring--3 { inset: 0; border-color: rgba(255,255,255,0.06); }
.rkx-orb__rings::before,
.rkx-orb__rings::after {
content: '';
position: absolute;
inset: 24%;
border: 1px solid transparent;
border-radius: 50%;
border-top-color: var(--rkx-accent-tx);
box-shadow: 0 0 18px rgba(0,87,255,0.45) inset;
animation: rkx-orb-spin 18s linear infinite;
opacity: 0.55;
}
.rkx-orb__rings::after {
inset: 12%;
border-top-color: transparent;
border-right-color: var(--rkx-accent-tx);
animation-duration: 26s;
animation-direction: reverse;
opacity: 0.4;
}
@keyframes rkx-orb-spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* Beam SVG covers full orb */
.rkx-orb__beam {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
pointer-events: none;
opacity: 0;
transition: opacity 200ms ease;
z-index: 1;
}
.rkx-orb.has-active .rkx-orb__beam { opacity: 1; }
/* Core */
.rkx-orb__core {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: clamp(120px, 22%, 180px);
aspect-ratio: 1;
border-radius: 50%;
background: radial-gradient(circle at 30% 30%,
rgba(0,87,255,0.55) 0%,
rgba(0,87,255,0.18) 45%,
rgba(8,10,22,0.95) 70%);
border: 1px solid rgba(0,87,255,0.55);
box-shadow:
0 0 60px rgba(0,87,255,0.45),
0 0 0 1px rgba(0,87,255,0.15) inset;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
color: #fff;
z-index: 3;
transition: transform 240ms cubic-bezier(0.4,0,0.2,1), box-shadow 240ms;
}
.rkx-orb__core:hover {
transform: translate(-50%, -50%) scale(1.06);
box-shadow: 0 0 90px rgba(0,87,255,0.7), 0 0 0 1px rgba(0,87,255,0.3) inset;
}
.rkx-orb__core-inner {
text-align: center;
line-height: 1.2;
padding: 10px;
}
.rkx-orb__core-eyebrow {
display: block;
font-family: 'Poppins', sans-serif;
font-size: 9px;
letter-spacing: 0.22em;
color: var(--rkx-accent-tx);
margin-bottom: 4px;
}
.rkx-orb__core-label {
display: block;
font-size: clamp(11px, 1.05vw, 14px);
font-weight: 600;
letter-spacing: -0.01em;
color: #fff;
margin-bottom: 2px;
}
.rkx-orb__core-hint {
display: block;
font-family: 'Poppins', sans-serif;
font-size: 9px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--rkx-page-dim);
}
.rkx-orb__core-pulse {
position: absolute;
inset: -4px;
border-radius: 50%;
border: 1px solid rgba(0,87,255,0.45);
pointer-events: none;
animation: rkx-orb-pulse 3.2s ease-out infinite;
}
.rkx-orb__core-pulse--2 { animation-delay: 1.6s; }
@keyframes rkx-orb-pulse {
0% { transform: scale(1); opacity: 0.7; }
100% { transform: scale(1.7); opacity: 0; }
}
/* Planets — placed by JS via --x and --y */
.rkx-orb__planets {
position: absolute;
inset: 0;
transform: rotateX(var(--rkx-rx, 0deg)) rotateY(var(--rkx-ry, 0deg));
transform-style: preserve-3d;
transition: transform 200ms ease-out;
}
.rkx-orb__planet {
position: absolute;
top: 50%;
left: 50%;
width: clamp(56px, 9%, 78px);
aspect-ratio: 1;
border-radius: 50%;
transform: translate(-50%, -50%) translate(var(--x, 0px), var(--y, 0px));
background: rgba(8,10,22,0.75);
border: 1px solid rgba(255,255,255,0.16);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
color: #fff;
text-decoration: none;
font-family: 'Inter', sans-serif;
font-size: clamp(10px, 0.9vw, 12px);
font-weight: 500;
letter-spacing: -0.005em;
display: flex;
align-items: center;
justify-content: center;
z-index: 4;
cursor: pointer;
transition: background 180ms, border-color 180ms, box-shadow 200ms, transform 240ms cubic-bezier(0.4,0,0.2,1);
will-change: transform;
}
.rkx-orb__planet::after {
content: attr(data-svc);
position: absolute;
top: calc(100% + 10px);
left: 50%;
transform: translate(-50%, 0) scale(0.9);
padding: 4px 9px;
font-family: 'Poppins', sans-serif;
font-size: 10px;
letter-spacing: 0.06em;
color: #fff;
background: rgba(0,87,255,0.85);
border: 1px solid rgba(0,87,255,0.6);
border-radius: 1px;
white-space: nowrap;
opacity: 0;
pointer-events: none;
transition: opacity 180ms, transform 240ms;
z-index: 5;
}
.rkx-orb__planet:hover,
.rkx-orb__planet:focus-visible {
background: rgba(0,87,255,0.9);
border-color: rgba(0,87,255,1);
box-shadow: 0 0 24px rgba(0,87,255,0.6), 0 0 0 1px rgba(0,87,255,0.4);
outline: none;
z-index: 6;
}
.rkx-orb__planet:hover {
transform: translate(-50%, -50%) translate(var(--x, 0px), var(--y, 0px)) scale(1.18);
}
.rkx-orb__planet:hover::after,
.rkx-orb__planet:focus-visible::after {
opacity: 1;
transform: translate(-50%, 0) scale(1);
}
.rkx-orb__planet:focus-visible {
box-shadow: 0 0 0 2px var(--rkx-accent-tx), 0 0 24px rgba(0,87,255,0.6);
}
/* HUD readout (corner stamps) */
.rkx-orb__hud {
position: absolute;
font-family: 'Poppins', sans-serif;
font-size: 10px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--rkx-page-dim);
display: inline-flex;
align-items: center;
gap: 6px;
z-index: 4;
}
.rkx-orb__hud--tl { top: 0; left: 0; }
.rkx-orb__hud--tr { top: 0; right: 0; }
.rkx-orb__hud--bl { bottom: 0; left: 0; color: var(--rkx-accent-tx); }
.rkx-orb__hud--br { bottom: 0; right: 0; font-variant-numeric: tabular-nums; }
.rkx-orb__hud-dot {
width: 6px; height: 6px; border-radius: 50%;
background: #4ade80;
box-shadow: 0 0 8px #4ade80;
animation: rkx-pulse-dot 2.2s ease-in-out infinite;
}
/* Reduced motion: kill orbit + pulses */
@media (prefers-reduced-motion: reduce) {
.rkx-orb__rings::before,
.rkx-orb__rings::after,
.rkx-orb__core-pulse {
animation: none;
}
.rkx-orb__planet { transition: none !important; }
}
@media (max-width: 639px) {
.rkx-orb { max-width: 380px; }
.rkx-orb__planet { width: 52px; font-size: 10px; }
.rkx-orb__core { width: 100px; }
.rkx-orb__hud { font-size: 9px; letter-spacing: 0.12em; }
}
/* ============================================================
HERO FIT — fit within viewport on every screen
(May 2026 — responsive type + vertical centering)
============================================================ */
.rkx-hero--full .rkx-hero__grid {
/* Lock to viewport height on desktop so content never overflows.
Use svh so mobile browser chrome doesn't cause overflow. */
min-height: 100svh;
height: 100svh;
max-height: 100svh;
align-items: stretch;
}
/* Both columns vertically centered */
.rkx-hero--full .rkx-hero__lead {
justify-content: center;
padding-block: clamp(20px, 4vh, 64px);
}
.rkx-hero--full .rkx-hero__widget {
align-items: center;
justify-content: center;
padding: clamp(16px, 3vh, 48px) clamp(16px, 3vw, 40px);
}
/* Responsive hero typography that fits viewport height */
.rkx-hero--full .rkx-h1 {
/* min 24px, scale by both viewport width AND height so it shrinks on short screens */
font-size: clamp(24px, min(3.6vw, 5.2vh), 46px) !important;
line-height: 1.08;
margin-bottom: clamp(14px, 2vh, 24px);
}
.rkx-hero--full .rkx-lede {
font-size: clamp(13.5px, min(1.15vw, 1.9vh), 17px);
line-height: 1.5;
margin-bottom: clamp(16px, 2.4vh, 28px);
}
.rkx-hero--full .rkx-eyebrow-row {
margin-bottom: clamp(12px, 2vh, 22px);
}
.rkx-hero--full .rkx-trust {
margin-top: clamp(16px, 2.5vh, 28px);
padding-top: clamp(14px, 2vh, 22px);
gap: clamp(12px, 1.5vh, 24px) 32px;
font-size: 12.5px;
}
/* Widget sizing — fits within available height */
.rkx-hero--full .rkx-orb {
max-width: min(100%, 80vh);
max-height: 80vh;
}
/* Stacked on tablet/phone — let it breathe naturally */
@media (max-width: 1023px) {
.rkx-hero--full .rkx-hero__grid {
height: auto;
min-height: 0;
max-height: none;
}
.rkx-hero--full .rkx-orb {
max-width: min(420px, 80vw);
max-height: none;
}
}
/* Tall narrow desktop (sub-720px) — release the lock so things don't crush */
@media (max-height: 640px) and (min-width: 1024px) {
.rkx-hero--full .rkx-hero__grid {
height: auto;
min-height: 640px;
max-height: none;
}
}
/* ============================================================
HERO GROWTH DASHBOARD WIDGET
============================================================ */
.rkx-dash {
position: relative;
width: 100%;
max-width: 560px;
background: rgba(8,10,22,0.6);
border: 1px solid var(--rkx-page-line-strong);
backdrop-filter: blur(16px) saturate(1.4);
-webkit-backdrop-filter: blur(16px) saturate(1.4);
box-shadow:
0 30px 80px -30px rgba(0,0,0,0.7),
0 0 0 1px rgba(255,255,255,0.04) inset,
0 0 60px -20px rgba(0,87,255,0.35);
display: flex;
flex-direction: column;
overflow: hidden;
font-family: 'Inter', sans-serif;
}
.rkx-dash__glow {
position: absolute;
top: -80px;
right: -80px;
width: 240px;
height: 240px;
background: radial-gradient(circle, rgba(0,87,255,0.35) 0%, transparent 70%);
pointer-events: none;
opacity: 0.7;
z-index: 0;
}
/* Header */
.rkx-dash__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
padding: 14px 18px;
border-bottom: 1px solid var(--rkx-page-line);
background: rgba(255,255,255,0.02);
position: relative;
z-index: 1;
}
.rkx-dash__title {
display: inline-flex;
align-items: center;
gap: 10px;
}
.rkx-dash__dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: #4ade80;
box-shadow: 0 0 10px #4ade80;
animation: rkx-pulse-dot 2.2s ease-in-out infinite;
}
.rkx-dash__title-text {
font-family: 'Poppins', sans-serif;
font-size: 11px;
letter-spacing: 0.16em;
color: #fff;
text-transform: uppercase;
}
.rkx-dash__range {
display: inline-flex;
gap: 2px;
padding: 2px;
background: rgba(255,255,255,0.04);
border: 1px solid var(--rkx-page-line);
border-radius: 1px;
}
.rkx-dash__range-btn {
padding: 5px 10px;
background: transparent;
border: none;
color: var(--rkx-page-muted);
font-family: 'Poppins', sans-serif;
font-size: 10px;
letter-spacing: 0.1em;
cursor: pointer;
transition: background 160ms, color 160ms;
border-radius: 1px;
}
.rkx-dash__range-btn:hover { color: #fff; }
.rkx-dash__range-btn.is-active {
background: rgba(0,87,255,0.85);
color: #fff;
box-shadow: 0 0 12px rgba(0,87,255,0.5);
}
/* KPI strip */
.rkx-dash__kpis {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0;
border-bottom: 1px solid var(--rkx-page-line);
position: relative;
z-index: 1;
}
.rkx-dash__kpi {
padding: 14px 16px;
display: flex;
flex-direction: column;
gap: 3px;
border-right: 1px solid var(--rkx-page-line);
}
.rkx-dash__kpi:last-child { border-right: none; }
.rkx-dash__kpi-lbl {
font-family: 'Poppins', sans-serif;
font-size: 9.5px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--rkx-page-dim);
}
.rkx-dash__kpi-val {
font-family: 'Inter', sans-serif;
font-feature-settings: 'tnum';
font-size: 20px;
font-weight: 700;
color: #fff;
letter-spacing: -0.025em;
line-height: 1.1;
transition: color 200ms;
}
.rkx-dash__kpi-delta {
font-family: 'Poppins', sans-serif;
font-size: 10px;
letter-spacing: 0.06em;
color: var(--rkx-page-dim);
}
.rkx-dash__kpi-delta--pos { color: #4ade80; }
.rkx-dash__kpi-delta--neg { color: #f87171; }
/* Chart */
.rkx-dash__chart-wrap {
position: relative;
padding: 6px 12px 4px;
z-index: 1;
}
.rkx-dash__chart {
width: 100%;
height: clamp(140px, 22vh, 200px);
display: block;
cursor: crosshair;
}
.rkx-dash__line,
.rkx-dash__area {
transition: stroke 240ms;
}
.rkx-dash__tip {
position: absolute;
transform: translate(-50%, calc(-100% - 14px));
padding: 6px 10px;
background: rgba(0,87,255,0.95);
border: 1px solid rgba(255,255,255,0.18);
border-radius: 1px;
pointer-events: none;
opacity: 0;
transition: opacity 160ms;
display: flex;
flex-direction: column;
gap: 2px;
min-width: 110px;
text-align: center;
box-shadow: 0 8px 20px -6px rgba(0,87,255,0.5);
}
.rkx-dash__tip.is-visible { opacity: 1; }
.rkx-dash__tip::after {
content: '';
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
border: 5px solid transparent;
border-top-color: rgba(0,87,255,0.95);
}
.rkx-dash__tip-x {
font-family: 'Poppins', sans-serif;
font-size: 9.5px;
letter-spacing: 0.12em;
color: rgba(255,255,255,0.7);
text-transform: uppercase;
}
.rkx-dash__tip-y {
font-family: 'Inter', sans-serif;
font-size: 12.5px;
font-weight: 600;
color: #fff;
font-feature-settings: 'tnum';
}
/* Channel toggles */
.rkx-dash__channels {
display: flex;
gap: 6px;
padding: 12px 14px;
border-top: 1px solid var(--rkx-page-line);
flex-wrap: wrap;
position: relative;
z-index: 1;
}
.rkx-dash__chan {
flex: 1 1 0;
min-width: 76px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 8px 10px;
background: rgba(255,255,255,0.025);
border: 1px solid var(--rkx-page-line);
color: var(--rkx-page-muted);
font-family: 'Inter', sans-serif;
font-size: 11.5px;
font-weight: 500;
cursor: pointer;
border-radius: 1px;
transition: background 160ms, border-color 160ms, color 160ms, transform 200ms;
}
.rkx-dash__chan:hover {
background: rgba(255,255,255,0.05);
color: #fff;
transform: translateY(-1px);
}
.rkx-dash__chan.is-active {
background: rgba(0,87,255,0.16);
border-color: rgba(0,87,255,0.55);
color: #fff;
box-shadow: 0 0 14px rgba(0,87,255,0.25);
}
.rkx-dash__chan-sw {
width: 9px;
height: 9px;
border-radius: 50%;
background: var(--c, #fff);
box-shadow: 0 0 8px var(--c, #fff);
flex-shrink: 0;
}
/* Footer */
.rkx-dash__foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
padding: 11px 18px;
border-top: 1px solid var(--rkx-page-line);
background: rgba(255,255,255,0.015);
font-family: 'Poppins', sans-serif;
font-size: 10px;
letter-spacing: 0.08em;
color: var(--rkx-page-dim);
position: relative;
z-index: 1;
}
.rkx-dash__foot-r {
color: var(--rkx-accent-tx);
text-decoration: none;
transition: opacity 160ms;
}
.rkx-dash__foot-r:hover { opacity: 0.7; }
/* Responsive caps so widget fits on short screens */
@media (max-height: 720px) and (min-width: 1024px) {
.rkx-dash__chart { height: clamp(110px, 18vh, 160px); }
.rkx-dash__kpi { padding: 10px 14px; }
.rkx-dash__kpi-val { font-size: 18px; }
}
@media (max-width: 1023px) {
.rkx-dash { max-width: min(540px, 92vw); }
}
@media (max-width: 480px) {
.rkx-dash__channels { gap: 4px; padding: 10px; }
.rkx-dash__chan { min-width: 0; padding: 7px 6px; font-size: 10.5px; }
.rkx-dash__kpi-val { font-size: 17px; }
.rkx-dash__head { padding: 12px 14px; }
}
/* ============================================================
DASHBOARD WIDGET — BIGGER + ANIMATED (May 18 2026)
============================================================ */
.rkx-dash {
max-width: 680px !important;
transform: perspective(1400px) rotateX(var(--rkx-dash-rx, 0deg)) rotateY(var(--rkx-dash-ry, 0deg));
transform-style: preserve-3d;
transition: transform 280ms cubic-bezier(0.4,0,0.2,1);
}
.rkx-dash__chart {
height: clamp(170px, 26vh, 240px) !important;
}
.rkx-dash__kpi { padding: 18px 18px !important; }
.rkx-dash__kpi-val { font-size: 24px !important; }
/* Boot-in: dashboard rises + scales in once entrance fires */
@keyframes rkx-dash-rise {
0% { transform: perspective(1400px) translateY(28px) scale(0.96); opacity: 0; }
100% { transform: perspective(1400px) translateY(0) scale(1); opacity: 1; }
}
.rkx-hero__widget[data-anim] .rkx-dash {
animation: rkx-dash-rise 900ms cubic-bezier(0.22, 1, 0.36, 1) 200ms backwards;
}
/* Animated KPI pulse on range change */
@keyframes rkx-kpi-pulse {
0% { transform: scale(1); color: #fff; }
40% { transform: scale(1.08); color: var(--rkx-accent-tx); }
100% { transform: scale(1); color: #fff; }
}
.rkx-dash__kpi-val.is-pulsing {
animation: rkx-kpi-pulse 600ms cubic-bezier(0.4,0,0.2,1);
display: inline-block;
transform-origin: left center;
}
/* Animated chart entry — fade + stroke-dash sweep */
.rkx-dash__line {
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
animation: rkx-line-draw 1600ms cubic-bezier(0.65, 0, 0.35, 1) 600ms forwards;
}
@keyframes rkx-line-draw {
to { stroke-dashoffset: 0; }
}
.rkx-dash__area {
opacity: 0;
animation: rkx-fade-in 800ms ease-out 1600ms forwards;
}
@keyframes rkx-fade-in { to { opacity: 1; } }
/* Ambient glow drifts */
.rkx-dash__glow {
animation: rkx-glow-drift 9s ease-in-out infinite alternate;
}
@keyframes rkx-glow-drift {
0% { transform: translate(0, 0) scale(1); opacity: 0.55; }
100% { transform: translate(-18px, 12px) scale(1.15); opacity: 0.85; }
}
/* Grid line shimmer */
.rkx-dash__grid line {
animation: rkx-grid-shimmer 4.5s ease-in-out infinite;
}
.rkx-dash__grid line:nth-child(2) { animation-delay: 0.6s; }
.rkx-dash__grid line:nth-child(3) { animation-delay: 1.2s; }
@keyframes rkx-grid-shimmer {
0%, 100% { opacity: 1; }
50% { opacity: 0.35; }
}
/* Live sync dot in footer */
.rkx-dash__sync-dot {
display: inline-block;
width: 6px;
height: 6px;
border-radius: 50%;
background: #4ade80;
box-shadow: 0 0 8px #4ade80;
margin-right: 6px;
vertical-align: 1px;
animation: rkx-pulse-dot 1.6s ease-in-out infinite;
}
.rkx-dash__foot-l {
display: inline-flex;
align-items: center;
}
.rkx-dash__foot-r {
color: var(--rkx-page-dim) !important;
cursor: default;
}
/* Subtle inner gradient sheen that drifts across the card */
.rkx-dash::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(115deg,
transparent 30%,
rgba(255,255,255,0.04) 50%,
transparent 70%);
pointer-events: none;
transform: translateX(-100%);
animation: rkx-dash-sheen 7s ease-in-out 2.2s infinite;
z-index: 2;
}
@keyframes rkx-dash-sheen {
0% { transform: translateX(-100%); }
60% { transform: translateX(100%); }
100% { transform: translateX(100%); }
}
/* Range button: liquid-pill active state */
.rkx-dash__range-btn.is-active {
position: relative;
animation: rkx-btn-pop 320ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes rkx-btn-pop {
0% { transform: scale(0.92); }
100% { transform: scale(1); }
}
/* Channel switch: line stroke fades smoothly */
.rkx-dash__line { transition: stroke 360ms ease; }
.rkx-dash__area { transition: opacity 360ms ease; }
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
.rkx-dash,
.rkx-dash__line,
.rkx-dash__area,
.rkx-dash__glow,
.rkx-dash__grid line,
.rkx-dash::after,
.rkx-hero__widget[data-anim] .rkx-dash {
animation: none !important;
}
.rkx-dash__line { stroke-dasharray: none; stroke-dashoffset: 0; }
.rkx-dash__area { opacity: 1; }
}
/* Responsive size caps */
@media (max-height: 760px) and (min-width: 1024px) {
.rkx-dash__chart { height: clamp(140px, 20vh, 190px) !important; }
.rkx-dash__kpi { padding: 12px 16px !important; }
.rkx-dash__kpi-val { font-size: 20px !important; }
}
@media (max-width: 1023px) {
.rkx-dash { max-width: min(640px, 94vw) !important; }
}
/* ============================================================
GLOBAL ITALIC → NORMAL (May 18 2026 — user request)
============================================================ */
em, i, cite, address, dfn, var,
.rkx-h1__accent,
.rkx-h2__accent,
.rkx-prose blockquote,
.rkx-prose em,
.rkx-prose i {
font-style: normal !important;
}
/* ============================================================
GLOBAL FULL-WIDTH SECTIONS (May 19 2026 — user request)
Every section now full-bleed with hero-matching horizontal
padding. Containers stretch edge-to-edge; the inner content
width is controlled by the same lead-column padding as hero.
============================================================ */
.rkx-section {
width: 100%;
max-width: none;
padding-block: clamp(60px, 9vw, 140px);
}
.rkx-section .rkx-container,
.rkx-marquee-section .rkx-container,
.rkx-services .rkx-container,
.rkx-metrics .rkx-container,
.rkx-process .rkx-container,
.rkx-cases .rkx-container,
.rkx-testimonial .rkx-container,
.rkx-final .rkx-container {
max-width: none !important;
width: 100%;
padding-inline: clamp(28px, 5vw, 90px);
margin: 0;
}
/* Hero already locks padding via .rkx-hero__lead; align siblings to match */
.rkx-hero--full .rkx-hero__lead {
padding-inline: clamp(28px, 5vw, 90px) !important;
}
/* Final CTA card edge-padding flush with siblings */
.rkx-final .rkx-final__card {
width: 100%;
}
/* Section heads stretch with section width */
.rkx-section__head {
width: 100%;
}
/* Marquee uses the same gutters */
.rkx-marquee-section .rkx-container.rkx-marquee-wrap {
padding-inline: clamp(28px, 5vw, 90px);
}
@media (max-width: 639px) {
.rkx-section { padding-block: clamp(48px, 12vw, 80px); }
.rkx-section .rkx-container,
.rkx-hero--full .rkx-hero__lead { padding-inline: 22px !important; }
}
/* ============================================================
HERO VIEWPORT LOCK (May 19 2026)
Override the global section padding for hero so it stays
within 100svh even on large monitors.
============================================================ */
.rkx-section.rkx-hero--full {
padding-block: 0 !important;
height: 100svh;
min-height: 100svh;
max-height: 100svh;
overflow: hidden;
}
.rkx-hero--full .rkx-hero__grid {
height: 100% !important;
min-height: 0 !important;
max-height: 100% !important;
}
/* Cap the widget on big screens so it doesn't dominate */
@media (min-width: 1280px) {
.rkx-dash {
max-width: clamp(520px, 38vw, 660px) !important;
}
}
@media (min-width: 1920px) {
.rkx-dash {
max-width: 660px !important;
}
}
@media (max-height: 760px) and (min-width: 1024px) {
.rkx-hero--full .rkx-h1 {
font-size: clamp(22px, min(3vw, 4.6vh), 38px) !important;
}
.rkx-hero--full .rkx-lede {
font-size: clamp(12.5px, min(1vw, 1.7vh), 15px) !important;
}
.rkx-hero--full .rkx-trust {
margin-top: clamp(10px, 1.6vh, 18px) !important;
padding-top: clamp(10px, 1.4vh, 16px) !important;
}
}
/* ============================================================
DISCIPLINES INTERACTIVE WIDGET (May 19 2026)
Replaces .rkx-svc-grid. 3 panels: active expands, others
collapse to slim vertical rails on desktop.
============================================================ */
.rkx-disc {
display: grid;
grid-template-columns: minmax(78px, 0.4fr) minmax(78px, 0.4fr) minmax(78px, 0.4fr);
gap: 1px;
background: var(--rkx-page-line);
border: 1px solid var(--rkx-page-line);
min-height: 540px;
transition: grid-template-columns 600ms cubic-bezier(0.65, 0, 0.35, 1);
}
/* The active panel grows; inactive panels shrink to rails */
.rkx-disc:has(.rkx-disc__panel[data-disc="01"].is-active) { grid-template-columns: 1fr 78px 78px; }
.rkx-disc:has(.rkx-disc__panel[data-disc="02"].is-active) { grid-template-columns: 78px 1fr 78px; }
.rkx-disc:has(.rkx-disc__panel[data-disc="03"].is-active) { grid-template-columns: 78px 78px 1fr; }
.rkx-disc__panel {
position: relative;
background: rgba(8,10,22,0.5);
overflow: hidden;
min-width: 0;
transition: background 320ms ease;
}
.rkx-disc__panel.is-active {
background: linear-gradient(180deg, rgba(0,87,255,0.06) 0%, rgba(8,10,22,0.55) 60%);
}
/* Rail — visible when collapsed */
.rkx-disc__rail {
position: absolute;
top: 0; bottom: 0; left: 0;
width: 78px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
padding: 28px 0;
cursor: pointer;
user-select: none;
z-index: 2;
transition: opacity 240ms ease, transform 320ms ease, background 240ms ease;
background: linear-gradient(180deg, rgba(8,10,22,0.6) 0%, rgba(8,10,22,0.3) 100%);
}
.rkx-disc__rail:hover { background: rgba(0,87,255,0.10); }
.rkx-disc__rail-num {
font-family: 'Poppins', sans-serif;
font-size: 11px;
letter-spacing: 0.16em;
color: var(--rkx-accent-tx);
}
.rkx-disc__rail-name {
writing-mode: vertical-rl;
transform: rotate(180deg);
font-family: 'Inter', sans-serif;
font-size: 14px;
font-weight: 600;
letter-spacing: 0.04em;
color: rgba(255,255,255,0.75);
text-transform: uppercase;
white-space: nowrap;
line-height: 1;
transition: color 240ms ease;
}
.rkx-disc__rail:hover .rkx-disc__rail-name { color: #fff; }
.rkx-disc__rail-progress {
position: absolute;
bottom: 0;
left: 0;
width: 0%;
height: 2px;
background: linear-gradient(90deg, #0057ff 0%, #4dabff 100%);
box-shadow: 0 0 10px rgba(0,87,255,0.6);
}
.rkx-disc__panel.is-active .rkx-disc__rail {
background: transparent;
pointer-events: none;
opacity: 0;
}
/* Body — only visible when active */
.rkx-disc__body {
height: 100%;
padding: 36px 36px 36px 110px;
display: grid;
grid-template-columns: 1.05fr 1fr;
gap: 36px;
align-items: center;
opacity: 0;
transform: translateX(-10px);
transition: opacity 380ms ease 120ms, transform 480ms cubic-bezier(0.4,0,0.2,1) 120ms;
pointer-events: none;
}
.rkx-disc__panel.is-active .rkx-disc__body {
opacity: 1;
transform: translateX(0);
pointer-events: auto;
}
.rkx-disc__copy {
display: flex;
flex-direction: column;
gap: 16px;
min-width: 0;
}
.rkx-disc__head {
display: flex;
align-items: baseline;
gap: 14px;
flex-wrap: wrap;
}
.rkx-disc__num {
font-family: 'Poppins', sans-serif;
font-size: 11px;
letter-spacing: 0.16em;
color: var(--rkx-accent-tx);
}
.rkx-disc__title {
font-size: clamp(22px, 2vw, 32px);
font-weight: 700;
letter-spacing: -0.025em;
line-height: 1.1;
color: #fff;
margin: 0;
}
.rkx-disc__desc {
font-size: 14.5px;
line-height: 1.6;
color: var(--rkx-page-muted);
margin: 0;
max-width: 46ch;
}
.rkx-disc__list {
list-style: none;
margin: 4px 0 0;
padding: 0;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0;
border-top: 1px solid var(--rkx-page-line);
}
.rkx-disc__list li { border-bottom: 1px solid var(--rkx-page-line); }
.rkx-disc__list li:nth-child(odd) { border-right: 1px solid var(--rkx-page-line); }
.rkx-disc__list a {
display: block;
padding: 10px 12px 10px 0;
font-size: 13.5px;
font-weight: 500;
color: var(--rkx-page-text);
transition: color 160ms, padding-left 160ms;
position: relative;
}
.rkx-disc__list a::after {
content: '→';
position: absolute;
right: 4px; top: 50%;
transform: translateY(-50%);
color: var(--rkx-page-dim);
font-family: 'Poppins', sans-serif;
opacity: 0;
transition: opacity 160ms, transform 220ms;
}
.rkx-disc__list a:hover {
color: #fff;
padding-left: 8px;
}
.rkx-disc__list a:hover::after { opacity: 1; color: var(--rkx-accent-tx); transform: translate(-2px, -50%); }
.rkx-disc__cta {
margin-top: 10px;
font-family: 'Poppins', sans-serif;
font-size: 12px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--rkx-accent-tx);
align-self: flex-start;
transition: opacity 160ms;
}
.rkx-disc__cta:hover { opacity: 0.7; }
/* Visual side */
.rkx-disc__visual {
position: relative;
height: 100%;
min-height: 320px;
display: flex;
align-items: center;
justify-content: center;
perspective: 1200px;
}
.rkx-disc__stamp {
position: absolute;
bottom: 12px;
right: 12px;
padding: 10px 14px;
background: rgba(8,10,22,0.85);
border: 1px solid rgba(0,87,255,0.4);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
z-index: 5;
}
.rkx-disc__stamp-val {
display: block;
font-family: 'Inter', sans-serif;
font-size: 22px;
font-weight: 700;
letter-spacing: -0.025em;
color: #fff;
line-height: 1;
font-feature-settings: 'tnum';
}
.rkx-disc__stamp-val small {
font-size: 0.5em;
color: var(--rkx-accent-tx);
margin-left: 2px;
}
.rkx-disc__stamp-lbl {
display: block;
font-family: 'Poppins', sans-serif;
font-size: 9.5px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--rkx-page-dim);
margin-top: 4px;
}
/* ---- VISUAL 01: BROWSER MOCKUP ---- */
.rkx-browser {
width: 100%;
max-width: 380px;
aspect-ratio: 1.4 / 1;
background: rgba(8,10,22,0.85);
border: 1px solid var(--rkx-page-line-strong);
box-shadow: 0 30px 60px -25px rgba(0,87,255,0.5), 0 1px 0 rgba(255,255,255,0.04) inset;
transform: rotate(-2deg);
transition: transform 600ms cubic-bezier(0.4,0,0.2,1);
}
.rkx-disc__panel.is-active .rkx-browser { transform: rotate(0deg); animation: rkx-browser-in 700ms cubic-bezier(0.34,1.56,0.64,1) 300ms backwards; }
@keyframes rkx-browser-in {
0% { opacity: 0; transform: translateY(20px) rotate(-2deg); }
100% { opacity: 1; transform: translateY(0) rotate(0deg); }
}
.rkx-browser__bar {
display: flex;
align-items: center;
gap: 6px;
padding: 8px 12px;
border-bottom: 1px solid var(--rkx-page-line);
background: rgba(255,255,255,0.02);
}
.rkx-browser__dot {
width: 8px; height: 8px;
border-radius: 50%;
background: rgba(255,255,255,0.15);
}
.rkx-browser__dot:first-child { background: rgba(0,87,255,0.7); }
.rkx-browser__url {
margin-left: 12px;
font-family: 'Poppins', sans-serif;
font-size: 10px;
color: var(--rkx-page-dim);
letter-spacing: 0.06em;
}
.rkx-browser__body {
position: relative;
padding: 18px;
height: calc(100% - 36px);
display: flex;
flex-direction: column;
gap: 10px;
}
.rkx-browser__skel {
height: 8px;
background: linear-gradient(90deg, rgba(255,255,255,0.05) 0%, rgba(0,87,255,0.3) 50%, rgba(255,255,255,0.05) 100%);
background-size: 200% 100%;
animation: rkx-skel-sweep 2.4s ease-in-out infinite;
border-radius: 1px;
}
.rkx-browser__skel--lg { width: 75%; height: 14px; }
.rkx-browser__skel--md { width: 45%; height: 8px; animation-delay: 0.2s; }
@keyframes rkx-skel-sweep {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
.rkx-browser__grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 8px;
margin-top: auto;
}
.rkx-browser__tile {
aspect-ratio: 1;
background: rgba(0,87,255,0.12);
border: 1px solid rgba(0,87,255,0.25);
animation: rkx-tile-rise 600ms cubic-bezier(0.4,0,0.2,1) backwards;
}
.rkx-browser__tile:nth-child(1) { animation-delay: 600ms; }
.rkx-browser__tile:nth-child(2) { animation-delay: 720ms; background: rgba(0,87,255,0.2); }
.rkx-browser__tile:nth-child(3) { animation-delay: 840ms; }
@keyframes rkx-tile-rise {
0% { opacity: 0; transform: translateY(12px); }
100% { opacity: 1; transform: translateY(0); }
}
.rkx-browser__cursor {
position: absolute;
width: 14px;
height: 14px;
bottom: 38%;
left: 28%;
pointer-events: none;
animation: rkx-cursor-fly 4s cubic-bezier(0.4,0,0.2,1) 1s infinite;
}
.rkx-browser__cursor::before {
content: '';
position: absolute;
inset: 0;
background: #fff;
clip-path: polygon(0 0, 0 70%, 30% 50%, 50% 95%, 70% 85%, 50% 50%, 100% 50%);
}
@keyframes rkx-cursor-fly {
0% { transform: translate(0, 0); opacity: 0; }
20% { opacity: 1; }
50% { transform: translate(80px, -30px); }
80% { transform: translate(140px, 30px); opacity: 1; }
100% { transform: translate(180px, 50px); opacity: 0; }
}
/* ---- VISUAL 02: GROWTH BARS ---- */
.rkx-growth {
width: 100%;
max-width: 400px;
padding: 22px;
background: rgba(8,10,22,0.85);
border: 1px solid var(--rkx-page-line-strong);
box-shadow: 0 30px 60px -25px rgba(0,87,255,0.5);
}
.rkx-growth__head {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 14px;
}
.rkx-growth__title {
font-family: 'Poppins', sans-serif;
font-size: 10px;
letter-spacing: 0.16em;
color: var(--rkx-page-dim);
}
.rkx-growth__delta {
font-family: 'Inter', sans-serif;
font-size: 14px;
font-weight: 700;
color: #4ade80;
}
.rkx-growth__chart {
display: grid;
grid-template-columns: repeat(12, 1fr);
align-items: end;
gap: 4px;
height: 140px;
}
.rkx-growth__bar {
height: 0%;
background: linear-gradient(180deg, #0057ff 0%, rgba(0,87,255,0.5) 100%);
border-radius: 1px 1px 0 0;
transition: height 800ms cubic-bezier(0.22, 1, 0.36, 1);
}
.rkx-disc__panel.is-active .rkx-growth__bar {
height: var(--h);
transition-delay: calc(var(--i, 0) * 30ms);
}
.rkx-disc__panel.is-active .rkx-growth__bar:nth-child(1) { transition-delay: 300ms; height: 22%; }
.rkx-disc__panel.is-active .rkx-growth__bar:nth-child(2) { transition-delay: 340ms; height: 34%; }
.rkx-disc__panel.is-active .rkx-growth__bar:nth-child(3) { transition-delay: 380ms; height: 28%; }
.rkx-disc__panel.is-active .rkx-growth__bar:nth-child(4) { transition-delay: 420ms; height: 46%; }
.rkx-disc__panel.is-active .rkx-growth__bar:nth-child(5) { transition-delay: 460ms; height: 38%; }
.rkx-disc__panel.is-active .rkx-growth__bar:nth-child(6) { transition-delay: 500ms; height: 62%; }
.rkx-disc__panel.is-active .rkx-growth__bar:nth-child(7) { transition-delay: 540ms; height: 58%; }
.rkx-disc__panel.is-active .rkx-growth__bar:nth-child(8) { transition-delay: 580ms; height: 74%; }
.rkx-disc__panel.is-active .rkx-growth__bar:nth-child(9) { transition-delay: 620ms; height: 68%; }
.rkx-disc__panel.is-active .rkx-growth__bar:nth-child(10) { transition-delay: 660ms; height: 86%; }
.rkx-disc__panel.is-active .rkx-growth__bar:nth-child(11) { transition-delay: 700ms; height: 78%; }
.rkx-disc__panel.is-active .rkx-growth__bar:nth-child(12) { transition-delay: 740ms; height: 96%; }
.rkx-growth__bar--peak {
background: linear-gradient(180deg, #4dabff 0%, #0057ff 100%);
box-shadow: 0 0 14px rgba(0,87,255,0.6);
}
.rkx-growth__foot {
display: flex;
justify-content: space-between;
margin-top: 10px;
padding-top: 8px;
border-top: 1px solid var(--rkx-page-line);
font-family: 'Poppins', sans-serif;
font-size: 9.5px;
letter-spacing: 0.14em;
color: var(--rkx-page-dim);
}
/* ---- VISUAL 03: BRAND SWATCHES ---- */
.rkx-swatches {
display: grid;
grid-template-columns: repeat(3, 70px);
grid-auto-rows: 70px;
gap: 8px;
padding: 22px;
background: rgba(8,10,22,0.85);
border: 1px solid var(--rkx-page-line-strong);
box-shadow: 0 30px 60px -25px rgba(0,87,255,0.5);
}
.rkx-swatch {
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.08);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transform: scale(0.92) translateY(8px);
transition: opacity 380ms cubic-bezier(0.34,1.56,0.64,1), transform 480ms cubic-bezier(0.34,1.56,0.64,1);
}
.rkx-disc__panel.is-active .rkx-swatch { opacity: 1; transform: none; }
.rkx-disc__panel.is-active .rkx-swatch:nth-child(1) { transition-delay: 300ms; }
.rkx-disc__panel.is-active .rkx-swatch:nth-child(2) { transition-delay: 360ms; }
.rkx-disc__panel.is-active .rkx-swatch:nth-child(3) { transition-delay: 420ms; }
.rkx-disc__panel.is-active .rkx-swatch:nth-child(4) { transition-delay: 480ms; }
.rkx-disc__panel.is-active .rkx-swatch:nth-child(5) { transition-delay: 540ms; }
.rkx-disc__panel.is-active .rkx-swatch:nth-child(6) { transition-delay: 600ms; }
.rkx-disc__panel.is-active .rkx-swatch:nth-child(7) { transition-delay: 660ms; }
.rkx-disc__panel.is-active .rkx-swatch:nth-child(8) { transition-delay: 720ms; }
.rkx-disc__panel.is-active .rkx-swatch:nth-child(9) { transition-delay: 780ms; }
.rkx-swatch--logo {
background: linear-gradient(135deg, #0057ff 0%, #1D24CA 100%);
color: #fff;
font-family: 'Inter', sans-serif;
font-size: 32px;
font-weight: 700;
letter-spacing: -0.04em;
}
.rkx-swatch--type {
background: rgba(255,255,255,0.95);
color: #05060d;
font-family: 'Inter', sans-serif;
font-size: 26px;
font-weight: 600;
letter-spacing: -0.02em;
}
.rkx-swatch--mark svg { width: 28px; height: 28px; }
.rkx-swatch--mono {
background: transparent;
color: var(--rkx-accent-tx);
font-family: 'Poppins', sans-serif;
font-size: 14px;
letter-spacing: 0.16em;
border: 1px dashed rgba(0,87,255,0.4);
}
/* ============================================================
RESPONSIVE — stack on tablet/mobile
============================================================ */
@media (max-width: 1023px) {
.rkx-disc {
grid-template-columns: 1fr !important;
min-height: 0;
}
.rkx-disc__panel {
min-height: 78px;
transition: none;
}
.rkx-disc__rail {
position: relative;
width: 100%;
height: 78px;
flex-direction: row;
padding: 0 20px;
gap: 16px;
justify-content: flex-start;
}
.rkx-disc__rail-name {
writing-mode: horizontal-tb;
transform: none;
font-size: 13px;
}
.rkx-disc__rail-progress {
height: 2px;
bottom: 0;
left: 0;
}
.rkx-disc__panel.is-active .rkx-disc__rail {
opacity: 1;
pointer-events: auto;
background: rgba(0,87,255,0.10);
border-bottom: 1px solid rgba(0,87,255,0.3);
}
.rkx-disc__body {
padding: 28px 24px;
grid-template-columns: 1fr;
gap: 28px;
max-height: 0;
overflow: hidden;
opacity: 0;
transform: none;
transition: max-height 500ms ease, opacity 400ms ease 100ms, padding 300ms ease;
}
.rkx-disc__panel.is-active .rkx-disc__body {
max-height: 2000px;
opacity: 1;
}
.rkx-disc__visual { min-height: 260px; }
}
@media (max-width: 639px) {
.rkx-disc__rail { padding: 0 16px; }
.rkx-disc__rail-name { font-size: 12px; }
.rkx-browser, .rkx-growth { max-width: 100%; }
.rkx-swatches { grid-template-columns: repeat(3, 60px); grid-auto-rows: 60px; }
.rkx-disc__list { grid-template-columns: 1fr; }
.rkx-disc__list li:nth-child(odd) { border-right: none; }
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
.rkx-browser__skel,
.rkx-browser__cursor,
.rkx-disc__panel.is-active .rkx-browser,
.rkx-disc__panel.is-active .rkx-growth__bar,
.rkx-disc__panel.is-active .rkx-swatch {
animation: none !important;
transition: none !important;
}
}
/* ============================================================
MOBILE FIXES + RESPONSIVE WIDGETS (May 19 2026)
============================================================ */
/* Hero on mobile: release viewport lock so widget has room */
@media (max-width: 1023px) {
.rkx-section.rkx-hero--full {
height: auto !important;
min-height: 0 !important;
max-height: none !important;
overflow: visible !important;
padding-block: clamp(80px, 12vw, 120px) clamp(40px, 8vw, 70px) !important;
}
.rkx-hero--full .rkx-hero__grid {
grid-template-columns: 1fr !important;
height: auto !important;
max-height: none !important;
}
.rkx-hero--full .rkx-hero__lead {
border-right: none !important;
border-bottom: 1px solid var(--rkx-page-line);
padding: 0 0 clamp(28px, 5vw, 40px) !important;
}
.rkx-hero--full .rkx-hero__widget {
padding: clamp(28px, 5vw, 40px) 0 0 !important;
align-items: flex-start !important;
}
.rkx-hero--full .rkx-h1 {
font-size: clamp(28px, 7.5vw, 42px) !important;
}
.rkx-hero--full .rkx-lede {
font-size: 15px !important;
}
.rkx-dash {
max-width: 100% !important;
width: 100%;
}
}
@media (max-width: 639px) {
.rkx-section.rkx-hero--full {
padding-block: 90px 30px !important;
}
.rkx-dash__head { padding: 12px 14px; flex-wrap: wrap; gap: 10px; }
.rkx-dash__title-text { font-size: 10px; }
.rkx-dash__range-btn { padding: 5px 8px; font-size: 9.5px; }
.rkx-dash__kpis { grid-template-columns: 1fr 1fr 1fr; }
.rkx-dash__kpi { padding: 12px 10px !important; }
.rkx-dash__kpi-val { font-size: 16px !important; }
.rkx-dash__kpi-lbl { font-size: 9px; }
.rkx-dash__chart { height: 140px !important; }
.rkx-dash__channels { padding: 10px; gap: 5px; }
.rkx-dash__chan { padding: 7px 6px; font-size: 10.5px; min-width: 0; }
.rkx-dash__chan-sw { width: 7px; height: 7px; }
.rkx-dash__foot { padding: 10px 14px; font-size: 9.5px; }
.rkx-dash::after { display: none; } /* kill sheen on small screens */
}
/* Disciplines widget — accordion fix on mobile */
@media (max-width: 1023px) {
.rkx-disc {
display: block !important;
border: 1px solid var(--rkx-page-line);
background: transparent;
min-height: 0;
}
.rkx-disc__panel {
border-bottom: 1px solid var(--rkx-page-line);
background: rgba(8,10,22,0.5);
}
.rkx-disc__panel:last-child { border-bottom: none; }
.rkx-disc__rail {
position: relative !important;
opacity: 1 !important;
pointer-events: auto !important;
height: auto !important;
min-height: 64px;
background: transparent !important;
border-bottom: 1px solid transparent;
}
.rkx-disc__rail-name {
writing-mode: horizontal-tb !important;
transform: none !important;
font-size: 14px !important;
}
.rkx-disc__panel.is-active .rkx-disc__rail {
background: rgba(0,87,255,0.10) !important;
border-bottom-color: rgba(0,87,255,0.3);
}
.rkx-disc__body {
padding: 24px 20px !important;
grid-template-columns: 1fr !important;
gap: 24px;
max-height: 0;
overflow: hidden;
opacity: 0;
transform: none !important;
transition: max-height 500ms ease, opacity 400ms ease 100ms, padding 300ms ease !important;
padding-block: 0 !important;
}
.rkx-disc__panel.is-active .rkx-disc__body {
max-height: 2400px;
opacity: 1;
padding: 24px 20px !important;
}
.rkx-disc__visual { min-height: 240px; }
.rkx-browser, .rkx-growth, .rkx-swatches { max-width: 100% !important; }
.rkx-disc__list { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 539px) {
.rkx-disc__list { grid-template-columns: 1fr; }
.rkx-disc__list li:nth-child(odd) { border-right: none !important; }
.rkx-swatches { grid-template-columns: repeat(3, 1fr) !important; grid-auto-rows: clamp(54px, 18vw, 70px) !important; padding: 16px; }
.rkx-disc__stamp { position: relative; right: auto; bottom: auto; margin-top: 16px; align-self: flex-start; }
.rkx-disc__visual { flex-direction: column; align-items: stretch; }
}
/* ============================================================
INTERACTIVE METRICS — counter-up + hover lift
============================================================ */
.rkx-metric {
cursor: default;
transition: border-left-color 240ms ease, transform 320ms cubic-bezier(0.4,0,0.2,1);
}
.rkx-metric:hover {
border-left-color: var(--rkx-accent-tx);
transform: translateY(-3px);
}
.rkx-metric__num {
transition: color 260ms ease, text-shadow 260ms ease;
}
.rkx-metric:hover .rkx-metric__num {
color: #fff;
text-shadow: 0 0 24px rgba(0,87,255,0.5);
}
.rkx-metric__bar {
margin-top: 12px;
height: 2px;
background: var(--rkx-page-line);
overflow: hidden;
border-radius: 1px;
}
.rkx-metric__bar-fill {
height: 100%;
width: 0%;
background: linear-gradient(90deg, #0057ff 0%, #4dabff 100%);
box-shadow: 0 0 10px rgba(0,87,255,0.5);
transition: width 1400ms cubic-bezier(0.22,1,0.36,1) var(--rkx-d, 0ms);
}
.rkx-metric.is-in .rkx-metric__bar-fill { width: var(--rkx-w, 70%); }
/* ============================================================
INTERACTIVE PROCESS STEPS — connector + hover highlight
============================================================ */
.rkx-step {
position: relative;
overflow: hidden;
}
.rkx-step::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 0%;
height: 2px;
background: linear-gradient(90deg, #0057ff 0%, #4dabff 100%);
box-shadow: 0 0 10px rgba(0,87,255,0.5);
transition: width 600ms cubic-bezier(0.22,1,0.36,1);
z-index: 2;
}
.rkx-step.is-in::before { width: 100%; }
.rkx-step:hover {
background: rgba(0,87,255,0.05) !important;
}
.rkx-step__num {
transition: color 240ms ease, transform 280ms cubic-bezier(0.34,1.56,0.64,1);
}
.rkx-step:hover .rkx-step__num {
transform: scale(1.4) translateX(-2px);
}
/* ============================================================
INTERACTIVE CASE CARDS — image cursor parallax + stat reveal
============================================================ */
.rkx-case {
transition: border-color 240ms ease, transform 320ms cubic-bezier(0.4,0,0.2,1), box-shadow 320ms ease;
}
.rkx-case__media {
position: relative;
overflow: hidden;
}
.rkx-case__placeholder {
transition: transform 1200ms cubic-bezier(0.4,0,0.2,1), filter 600ms ease;
}
.rkx-case:hover .rkx-case__placeholder {
transform: scale(1.06);
filter: brightness(1.15);
}
.rkx-case__stat-num {
transition: color 240ms ease;
}
.rkx-case:hover .rkx-case__stat-num {
color: var(--rkx-accent-tx);
}
.rkx-case__title {
transition: color 240ms ease, transform 280ms ease;
}
.rkx-case:hover .rkx-case__title {
color: var(--rkx-accent-tx);
transform: translateX(3px);
}
/* ============================================================
INTERACTIVE TESTIMONIAL — quote breathe + glow
============================================================ */
.rkx-quote {
transition: border-color 320ms ease, box-shadow 320ms ease;
}
.rkx-quote:hover {
border-color: rgba(0,87,255,0.4);
box-shadow: 0 30px 80px -30px rgba(0,87,255,0.45);
}
.rkx-quote__mark {
animation: rkx-quote-pulse 5s ease-in-out infinite;
}
@keyframes rkx-quote-pulse {
0%, 100% { opacity: 0.35; transform: scale(1); }
50% { opacity: 0.6; transform: scale(1.08); }
}
.rkx-quote__avatar {
transition: transform 300ms cubic-bezier(0.34,1.56,0.64,1), background 240ms ease;
}
.rkx-quote:hover .rkx-quote__avatar {
transform: rotate(-6deg) scale(1.1);
background: linear-gradient(135deg, rgba(0,87,255,0.45), rgba(255,255,255,0.06));
}
/* ============================================================
INTERACTIVE FINAL CTA — glow follows cursor
============================================================ */
.rkx-final__card {
position: relative;
overflow: hidden;
}
.rkx-final__card::after {
content: '';
position: absolute;
width: 380px;
height: 380px;
border-radius: 50%;
background: radial-gradient(circle, rgba(0,87,255,0.35) 0%, transparent 65%);
pointer-events: none;
opacity: 0;
transition: opacity 280ms ease;
top: var(--rkx-cursor-y, 50%);
left: var(--rkx-cursor-x, 50%);
transform: translate(-50%, -50%);
mix-blend-mode: screen;
z-index: 1;
}
.rkx-final__card:hover::after { opacity: 1; }
.rkx-final__inner { position: relative; z-index: 2; }
/* ============================================================
MARQUEE — pause on hover, speed-up class
============================================================ */
.rkx-marquee-wrap:hover .rkx-marquee__track {
animation-play-state: paused;
}
/* ============================================================
SERVICES LIST GRID PAGES — interactive item lift
============================================================ */
.rkx-list-item {
position: relative;
overflow: hidden;
}
.rkx-list-item::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 0%;
height: 2px;
background: var(--rkx-accent-tx);
transition: width 360ms cubic-bezier(0.22,1,0.36,1);
}
.rkx-list-item:hover::before { width: 100%; }
/* ============================================================
FAQ ITEMS — slide highlight
============================================================ */
.rkx-faq__item {
position: relative;
}
.rkx-faq__item::before {
content: '';
position: absolute;
top: 0; bottom: 0;
left: 0;
width: 2px;
background: var(--rkx-accent-tx);
transform: scaleY(0);
transform-origin: center;
transition: transform 320ms cubic-bezier(0.22,1,0.36,1);
}
.rkx-faq__item.is-open::before { transform: scaleY(1); }
/* ============================================================
PRICING TIERS — hover lift + glow
============================================================ */
.rkx-tier {
transition: background 280ms ease, transform 320ms cubic-bezier(0.4,0,0.2,1), box-shadow 320ms ease;
}
.rkx-tier:hover {
transform: translateY(-4px);
box-shadow: 0 30px 60px -20px rgba(0,87,255,0.35);
}
.rkx-tier__list li {
transition: padding-left 200ms ease, color 200ms ease;
}
.rkx-tier__list li:hover {
padding-left: 12px;
color: #fff;
}
/* ============================================================
ARTICLE / CASE / SERVICE BULLETS — sequential hover
============================================================ */
.rkx-bullets li {
transition: background 240ms ease, transform 280ms cubic-bezier(0.4,0,0.2,1);
}
.rkx-bullets li:hover {
transform: translateX(4px);
}
.rkx-bullets__title {
transition: color 200ms ease;
}
.rkx-bullets li:hover .rkx-bullets__title {
color: var(--rkx-accent-tx);
}
/* ============================================================
PILLAR CARDS — gradient ring on hover
============================================================ */
.rkx-pillar {
position: relative;
transition: background 280ms ease;
}
.rkx-pillar::after {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 2px;
background: linear-gradient(90deg, transparent 0%, #0057ff 50%, transparent 100%);
transform: scaleX(0);
transition: transform 460ms cubic-bezier(0.22,1,0.36,1);
}
.rkx-pillar:hover::after { transform: scaleX(1); }
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
.rkx-metric,
.rkx-step,
.rkx-case,
.rkx-quote__mark,
.rkx-tier,
.rkx-bullets li,
.rkx-pillar::after,
.rkx-list-item::before,
.rkx-faq__item::before,
.rkx-final__card::after {
transition: none !important;
animation: none !important;
}
}
/* ============================================================
LENIS + SCROLL-BASED ANIMATIONS (May 19 2026)
============================================================ */
/* Lenis baseline */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
/* Scrolled header state — shrinks + extra blur */
.rkx-header-wrap.is-scrolled .rkx-header {
background: rgba(0,0,0,0.72);
box-shadow: 0 8px 36px rgba(0,0,0,0.55), 0 1px 0 rgba(255,255,255,0.08) inset;
}
/* Universal scroll-fx variants — initial state */
[data-scroll-fx] {
opacity: 0;
transition:
opacity 700ms cubic-bezier(0.22, 1, 0.36, 1) var(--rkx-fx-delay, 0ms),
transform 800ms cubic-bezier(0.22, 1, 0.36, 1) var(--rkx-fx-delay, 0ms);
will-change: opacity, transform;
}
[data-scroll-fx="rise"] { transform: translateY(36px); }
[data-scroll-fx="fade"] { transform: none; }
[data-scroll-fx="slide-l"] { transform: translateX(-40px); }
[data-scroll-fx="slide-r"] { transform: translateX(40px); }
[data-scroll-fx="scale"] { transform: scale(0.9); }
[data-scroll-fx="tilt"] { transform: translateY(28px) rotate(-1.5deg); }
[data-scroll-fx].is-revealed {
opacity: 1;
transform: none;
}
/* Process page: pinned vertical line */
.rkx-phase-line {
position: fixed;
top: 100px;
bottom: 80px;
left: clamp(14px, 2vw, 28px);
width: 1px;
background: rgba(255,255,255,0.05);
z-index: 5;
pointer-events: none;
}
.rkx-phase-line::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: var(--rkx-phase-pct, 0%);
background: linear-gradient(180deg, #0057ff 0%, #4dabff 100%);
box-shadow: 0 0 14px rgba(0,87,255,0.6);
transition: height 200ms linear;
}
@media (max-width: 767px) {
.rkx-phase-line { display: none; }
}
/* Services num scroll-rotate transition */
.rkx-svc__num {
display: inline-block;
transition: transform 600ms cubic-bezier(0.4, 0, 0.2, 1);
transform-origin: center;
}
/* Tilt scroll-fx clean reset */
[data-scroll-fx="tilt"].is-revealed { transform: translateY(0) rotate(0); }
/* About: cards with cursor parallax */
.rkx-card {
transform-style: preserve-3d;
transition: transform 320ms cubic-bezier(0.4, 0, 0.2, 1), border-color 240ms ease, box-shadow 280ms ease;
}
/* Reduced motion: kill scroll fx, snap-reveal */
@media (prefers-reduced-motion: reduce) {
[data-scroll-fx] {
opacity: 1 !important;
transform: none !important;
transition: none !important;
}
.rkx-bg__image { transform: none !important; }
.rkx-dash { transform: none !important; }
.rkx-phase-line::before { transition: none !important; }
}
/* Small-screen tuning */
@media (max-width: 639px) {
[data-scroll-fx="rise"] { transform: translateY(20px); }
[data-scroll-fx="slide-l"] { transform: translateX(-20px); }
[data-scroll-fx="slide-r"] { transform: translateX(20px); }
}
/* ============================================================
EXTENDED SCROLL-FX VARIANTS (May 19 2026)
============================================================ */
[data-scroll-fx]:not(.is-revealed) {
/* small perf hint */
will-change: opacity, transform;
}
/* Section bg reveal — softer than child elements */
section.rkx-section[data-scroll-fx],
.rkx-disc[data-scroll-fx],
.rkx-svc-grid[data-scroll-fx],
.rkx-cases__grid[data-scroll-fx],
.rkx-cards[data-scroll-fx],
.rkx-tiers[data-scroll-fx],
.rkx-pillars[data-scroll-fx],
.rkx-bullets[data-scroll-fx],
.rkx-faq__list[data-scroll-fx],
.rkx-list-grid[data-scroll-fx],
.rkx-metrics__grid[data-scroll-fx],
.rkx-process__list[data-scroll-fx] {
transition-duration: 1100ms !important;
}
section.rkx-section[data-scroll-fx="fade"] {
transform: none !important;
}
/* Faster reveal for short text */
.rkx-eyebrow[data-scroll-fx],
.rkx-badge[data-scroll-fx],
.rkx-marquee__item[data-scroll-fx],
.rkx-contact__row[data-scroll-fx],
.rkx-svc__list li[data-scroll-fx],
.rkx-disc__list li[data-scroll-fx],
.rkx-tier__list li[data-scroll-fx],
.rkx-prose > *[data-scroll-fx] {
transition-duration: 500ms !important;
}
/* ============================================================
BOOKING MODAL — Glass-blurred, interactive
(May 19 2026)
============================================================ */
body.rkx-book-locked { overflow: hidden; }
.rkx-book {
position: fixed;
inset: 0;
z-index: 10000;
opacity: 0;
pointer-events: none;
transition: opacity 360ms cubic-bezier(0.22,1,0.36,1);
font-family: 'Inter', sans-serif;
}
.rkx-book.is-open { opacity: 1; pointer-events: auto; }
.rkx-book__backdrop {
position: absolute;
inset: 0;
background: rgba(2, 4, 12, 0.7);
backdrop-filter: blur(18px) saturate(1.4);
-webkit-backdrop-filter: blur(18px) saturate(1.4);
}
.rkx-book__shell {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0.96);
width: min(720px, 94vw);
max-height: 92vh;
background:
linear-gradient(135deg, rgba(0,87,255,0.10) 0%, rgba(8,10,22,0.85) 60%),
rgba(8,10,22,0.85);
border: 1px solid rgba(255,255,255,0.12);
backdrop-filter: blur(28px) saturate(1.6);
-webkit-backdrop-filter: blur(28px) saturate(1.6);
box-shadow:
0 50px 120px -30px rgba(0,87,255,0.45),
0 30px 80px -20px rgba(0,0,0,0.8),
0 0 0 1px rgba(255,255,255,0.05) inset;
display: flex;
flex-direction: column;
overflow: hidden;
transition: transform 480ms cubic-bezier(0.34,1.56,0.64,1), opacity 360ms ease;
}
.rkx-book.is-open .rkx-book__shell { transform: translate(-50%, -50%) scale(1); }
.rkx-book__noise {
position: absolute;
inset: 0;
pointer-events: none;
opacity: 0.05;
mix-blend-mode: overlay;
background-image: url("data:image/svg+xml;utf8,");
z-index: 0;
}
/* HEADER */
.rkx-book__head {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 16px;
padding: 18px 22px;
border-bottom: 1px solid rgba(255,255,255,0.06);
background: linear-gradient(180deg, rgba(255,255,255,0.025) 0%, transparent 100%);
position: relative;
z-index: 1;
}
.rkx-book__brand {
display: inline-flex;
align-items: center;
gap: 10px;
}
.rkx-book__brand-dot {
width: 8px; height: 8px;
border-radius: 50%;
background: #4ade80;
box-shadow: 0 0 10px #4ade80;
animation: rkx-pulse-dot 2.2s ease-in-out infinite;
}
.rkx-book__brand-text {
font-family: 'Poppins', sans-serif;
font-size: 10px;
letter-spacing: 0.18em;
color: rgba(255,255,255,0.85);
}
.rkx-book__steps {
display: inline-flex;
align-items: center;
gap: 0;
}
.rkx-book__step {
width: 28px; height: 28px;
display: inline-flex;
align-items: center;
justify-content: center;
font-family: 'Poppins', sans-serif;
font-size: 10px;
letter-spacing: 0.08em;
color: rgba(255,255,255,0.4);
border: 1px solid rgba(255,255,255,0.12);
border-radius: 50%;
background: rgba(255,255,255,0.025);
transition: all 240ms ease;
}
.rkx-book__step.is-active {
color: #fff;
background: #0057ff;
border-color: rgba(0,87,255,0.8);
box-shadow: 0 0 14px rgba(0,87,255,0.6);
}
.rkx-book__step.is-done {
color: var(--rkx-accent-tx);
border-color: rgba(0,87,255,0.4);
background: rgba(0,87,255,0.10);
}
.rkx-book__step-line {
width: 22px;
height: 1px;
background: rgba(255,255,255,0.10);
margin: 0 4px;
}
.rkx-book__close {
margin-left: auto;
width: 36px; height: 36px;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.12);
color: rgba(255,255,255,0.75);
cursor: pointer;
border-radius: 1px;
display: inline-flex;
align-items: center;
justify-content: center;
transition: all 200ms ease;
}
.rkx-book__close:hover {
background: rgba(255,255,255,0.08);
border-color: rgba(255,255,255,0.28);
color: #fff;
transform: rotate(90deg);
}
.rkx-book__close svg { width: 16px; height: 16px; }
/* BODY */
.rkx-book__body {
flex: 1;
overflow-y: auto;
padding: 28px 28px 16px;
position: relative;
z-index: 1;
}
.rkx-book__body--anim {
animation: rkx-book-step-in 380ms cubic-bezier(0.22,1,0.36,1);
}
@keyframes rkx-book-step-in {
0% { opacity: 0; transform: translateX(20px); }
100% { opacity: 1; transform: translateX(0); }
}
.rkx-book__title {
font-family: 'Inter', sans-serif;
font-size: clamp(20px, 2.6vw, 28px);
font-weight: 700;
letter-spacing: -0.025em;
color: #fff;
margin: 0 0 6px;
line-height: 1.15;
}
.rkx-book__sub {
font-size: 14px;
color: rgba(255,255,255,0.55);
margin: 0 0 22px;
line-height: 1.5;
}
/* STEP 1: Service grid */
.rkx-book__grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
.rkx-book__card {
position: relative;
text-align: left;
padding: 14px 16px;
background: rgba(255,255,255,0.025);
border: 1px solid rgba(255,255,255,0.08);
color: #fff;
cursor: pointer;
transition: all 220ms cubic-bezier(0.4,0,0.2,1);
display: flex;
flex-direction: column;
gap: 6px;
overflow: hidden;
border-radius: 1px;
}
.rkx-book__card:hover {
background: rgba(255,255,255,0.05);
border-color: rgba(0,87,255,0.4);
transform: translateY(-2px);
}
.rkx-book__card.is-selected {
background: rgba(0,87,255,0.18);
border-color: rgba(0,87,255,0.7);
box-shadow: 0 0 24px rgba(0,87,255,0.35) inset, 0 0 0 1px rgba(0,87,255,0.35);
}
.rkx-book__card-icon {
width: 28px; height: 28px;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--rkx-accent-tx);
background: rgba(0,87,255,0.15);
border: 1px solid rgba(0,87,255,0.3);
border-radius: 1px;
}
.rkx-book__card-icon svg { width: 16px; height: 16px; }
.rkx-book__card-name {
font-size: 14px;
font-weight: 600;
letter-spacing: -0.01em;
color: #fff;
}
.rkx-book__card-desc {
font-size: 12px;
color: rgba(255,255,255,0.55);
line-height: 1.4;
}
.rkx-book__card-check {
position: absolute;
top: 12px;
right: 12px;
width: 20px; height: 20px;
display: flex;
align-items: center;
justify-content: center;
background: #0057ff;
border-radius: 50%;
color: #fff;
opacity: 0;
transform: scale(0.6);
transition: all 280ms cubic-bezier(0.34,1.56,0.64,1);
}
.rkx-book__card-check svg { width: 11px; height: 11px; }
.rkx-book__card.is-selected .rkx-book__card-check { opacity: 1; transform: scale(1); }
/* STEP 2: Calendar */
.rkx-book__cal-head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 0 14px;
margin-bottom: 8px;
border-bottom: 1px solid rgba(255,255,255,0.06);
}
.rkx-book__cal-title {
font-family: 'Inter', sans-serif;
font-size: 16px;
font-weight: 600;
color: #fff;
}
.rkx-book__cal-nav {
width: 32px; height: 32px;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.12);
color: #fff;
cursor: pointer;
border-radius: 1px;
font-size: 16px;
line-height: 1;
transition: all 200ms;
}
.rkx-book__cal-nav:hover:not(:disabled) {
background: rgba(0,87,255,0.2);
border-color: rgba(0,87,255,0.5);
}
.rkx-book__cal-nav:disabled { opacity: 0.3; cursor: not-allowed; }
.rkx-book__cal-grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 4px;
}
.rkx-book__cal-dow {
text-align: center;
font-family: 'Poppins', sans-serif;
font-size: 10px;
letter-spacing: 0.14em;
color: rgba(255,255,255,0.35);
padding: 8px 0;
}
.rkx-book__cal-cell {
aspect-ratio: 1;
background: rgba(255,255,255,0.025);
border: 1px solid rgba(255,255,255,0.05);
color: #fff;
cursor: pointer;
font-family: 'Inter', sans-serif;
font-size: 13px;
font-weight: 500;
border-radius: 1px;
transition: all 180ms ease;
display: flex;
align-items: center;
justify-content: center;
}
.rkx-book__cal-cell--blank {
background: transparent;
border-color: transparent;
cursor: default;
}
.rkx-book__cal-cell:hover:not(:disabled):not(.rkx-book__cal-cell--blank) {
background: rgba(0,87,255,0.15);
border-color: rgba(0,87,255,0.4);
transform: scale(1.08);
}
.rkx-book__cal-cell.is-disabled {
color: rgba(255,255,255,0.18);
cursor: not-allowed;
background: transparent;
border-color: transparent;
}
.rkx-book__cal-cell.is-today {
border-color: rgba(0,87,255,0.4);
color: var(--rkx-accent-tx);
}
.rkx-book__cal-cell.is-selected {
background: #0057ff !important;
border-color: #0057ff !important;
color: #fff !important;
box-shadow: 0 0 20px rgba(0,87,255,0.5);
transform: scale(1.04);
}
.rkx-book__hint {
font-family: 'Poppins', sans-serif;
font-size: 11px;
color: rgba(255,255,255,0.35);
margin: 14px 0 0;
letter-spacing: 0.04em;
}
/* STEP 3: Time slots */
.rkx-book__slots-wrap {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 22px;
}
.rkx-book__slots-lbl {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: 'Poppins', sans-serif;
font-size: 10px;
letter-spacing: 0.16em;
color: rgba(255,255,255,0.55);
margin-bottom: 10px;
text-transform: uppercase;
}
.rkx-book__slots-lbl svg { width: 14px; height: 14px; color: var(--rkx-accent-tx); }
.rkx-book__slots {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 6px;
}
.rkx-book__slot {
padding: 10px 0;
background: rgba(255,255,255,0.025);
border: 1px solid rgba(255,255,255,0.08);
color: #fff;
font-family: 'Inter', sans-serif;
font-size: 13px;
font-weight: 500;
cursor: pointer;
border-radius: 1px;
font-feature-settings: 'tnum';
transition: all 180ms;
}
.rkx-book__slot:hover {
background: rgba(0,87,255,0.15);
border-color: rgba(0,87,255,0.45);
}
.rkx-book__slot.is-selected {
background: #0057ff;
border-color: #0057ff;
color: #fff;
box-shadow: 0 0 18px rgba(0,87,255,0.5);
}
/* STEP 4: Form */
.rkx-book__form {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
}
.rkx-book__field {
display: flex;
flex-direction: column;
gap: 5px;
}
.rkx-book__field--wide { grid-column: 1 / -1; }
.rkx-book__field-lbl {
font-family: 'Poppins', sans-serif;
font-size: 10px;
letter-spacing: 0.14em;
color: rgba(255,255,255,0.55);
text-transform: uppercase;
}
.rkx-book__field input,
.rkx-book__field textarea {
width: 100%;
padding: 11px 14px;
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.10);
color: #fff;
font-family: 'Inter', sans-serif;
font-size: 14px;
border-radius: 1px;
transition: all 200ms;
resize: vertical;
}
.rkx-book__field input:focus,
.rkx-book__field textarea:focus {
outline: none;
border-color: rgba(0,87,255,0.7);
background: rgba(0,87,255,0.06);
box-shadow: 0 0 16px rgba(0,87,255,0.2);
}
.rkx-book__consent {
grid-column: 1 / -1;
font-family: 'Poppins', sans-serif;
font-size: 11px;
color: rgba(255,255,255,0.4);
margin: 4px 0 0;
}
.rkx-book__consent a { color: var(--rkx-accent-tx); text-decoration: underline; }
/* STEP 5: Confirm */
.rkx-book__confirm { text-align: center; padding: 22px 0 8px; }
.rkx-book__confirm-check {
width: 64px; height: 64px;
margin: 0 auto 20px;
background: rgba(0,87,255,0.18);
border: 1px solid rgba(0,87,255,0.5);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--rkx-accent-tx);
box-shadow: 0 0 30px rgba(0,87,255,0.4);
animation: rkx-book-check-in 600ms cubic-bezier(0.34,1.56,0.64,1);
}
@keyframes rkx-book-check-in {
0% { transform: scale(0.5); opacity: 0; }
60% { transform: scale(1.1); opacity: 1; }
100% { transform: scale(1); }
}
.rkx-book__confirm-check svg { width: 28px; height: 28px; }
.rkx-book__confirm-summary {
margin: 20px auto;
max-width: 360px;
text-align: left;
border-top: 1px solid rgba(255,255,255,0.08);
border-bottom: 1px solid rgba(255,255,255,0.08);
}
.rkx-book__confirm-summary > div {
display: flex;
justify-content: space-between;
align-items: baseline;
padding: 10px 0;
border-bottom: 1px dashed rgba(255,255,255,0.06);
}
.rkx-book__confirm-summary > div:last-child { border-bottom: none; }
.rkx-book__confirm-summary dt {
font-family: 'Poppins', sans-serif;
font-size: 10px;
letter-spacing: 0.14em;
color: rgba(255,255,255,0.4);
text-transform: uppercase;
margin: 0;
}
.rkx-book__confirm-summary dd {
font-size: 13.5px;
color: #fff;
margin: 0;
font-weight: 500;
text-align: right;
}
/* FOOTER */
.rkx-book__foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
padding: 14px 22px;
border-top: 1px solid rgba(255,255,255,0.06);
background: linear-gradient(0deg, rgba(255,255,255,0.025) 0%, transparent 100%);
position: relative;
z-index: 1;
}
.rkx-book__summary {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: 'Poppins', sans-serif;
font-size: 11px;
letter-spacing: 0.04em;
color: rgba(255,255,255,0.6);
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.rkx-book__summary svg { width: 13px; height: 13px; color: var(--rkx-accent-tx); }
.rkx-book__sep { color: rgba(255,255,255,0.25); padding: 0 2px; }
.rkx-book__actions {
display: inline-flex;
gap: 8px;
}
.rkx-book__btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 16px;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.12);
color: #fff;
font-family: 'Inter', sans-serif;
font-size: 13px;
font-weight: 600;
cursor: pointer;
border-radius: 1px;
transition: all 200ms;
}
.rkx-book__btn svg { width: 12px; height: 12px; }
.rkx-book__btn--ghost:hover {
background: rgba(255,255,255,0.08);
border-color: rgba(255,255,255,0.28);
}
.rkx-book__btn--primary {
background: #0057ff;
border-color: rgba(0,87,255,0.6);
box-shadow: 0 0 16px rgba(0,87,255,0.3);
}
.rkx-book__btn--primary:hover:not(.is-disabled) {
background: #1a6fff;
box-shadow: 0 0 24px rgba(0,87,255,0.5);
}
.rkx-book__btn.is-disabled,
.rkx-book__btn:disabled {
opacity: 0.4;
cursor: not-allowed;
box-shadow: none;
}
/* RESPONSIVE */
@media (max-width: 639px) {
.rkx-book__shell {
width: 100%;
height: 100%;
max-height: 100%;
top: 0; left: 0;
transform: translate(0, 100%) scale(1);
border-radius: 0;
border-left: none;
border-right: none;
border-bottom: none;
}
.rkx-book.is-open .rkx-book__shell {
transform: translate(0, 0) scale(1);
}
.rkx-book__head { padding: 14px 16px; grid-template-columns: 1fr auto; }
.rkx-book__steps { display: none !important; }
.rkx-book__body { padding: 22px 18px 14px; }
.rkx-book__grid { grid-template-columns: 1fr; }
.rkx-book__form { grid-template-columns: 1fr; }
.rkx-book__slots-wrap { grid-template-columns: 1fr; gap: 16px; }
.rkx-book__cal-cell { font-size: 12px; }
.rkx-book__foot { flex-direction: column-reverse; align-items: stretch; padding: 14px 16px; }
.rkx-book__summary { justify-content: center; }
.rkx-book__actions { width: 100%; }
.rkx-book__btn { flex: 1; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
.rkx-book__shell, .rkx-book__body--anim, .rkx-book__confirm-check,
.rkx-book__brand-dot, .rkx-book__close { animation: none !important; transition: none !important; }
}
/* ============================================================
COMPARE — "Traditional agency vs Rankrix" (May 20 2026)
Replaces the placeholder testimonial section. 2-column
side-by-side with red-tinted negatives and accent positives.
============================================================ */
.rkx-compare {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1px;
background: var(--rkx-page-line);
border: 1px solid var(--rkx-page-line);
}
@media (max-width: 767px) { .rkx-compare { grid-template-columns: 1fr; } }
.rkx-compare__col {
background: rgba(8,10,22,0.5);
padding: clamp(28px, 3vw, 44px);
display: flex;
flex-direction: column;
gap: 18px;
transition: background 320ms ease, transform 320ms cubic-bezier(0.4,0,0.2,1);
}
.rkx-compare__col:hover { background: rgba(12,14,28,0.6); }
.rkx-compare__col--pos {
background: linear-gradient(180deg, rgba(29,36,202,0.10) 0%, rgba(8,10,22,0.5) 70%);
border-bottom: 1px solid rgba(29,36,202,0.3);
}
.rkx-compare__col--pos:hover {
background: linear-gradient(180deg, rgba(29,36,202,0.15) 0%, rgba(12,14,28,0.6) 70%);
}
.rkx-compare__head {
display: flex;
flex-direction: column;
gap: 8px;
padding-bottom: 18px;
border-bottom: 1px solid var(--rkx-page-line);
}
.rkx-eyebrow.rkx-eyebrow--neg {
color: rgba(248,113,113,0.78) !important;
}
.rkx-compare__title {
font-family: var(--rkx-font-sans);
font-size: clamp(20px, 1.7vw, 26px);
font-weight: 700;
letter-spacing: -0.025em;
color: #fff;
margin: 0;
line-height: 1.15;
}
.rkx-compare__list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
}
.rkx-compare__list li {
position: relative;
padding: 14px 0 14px 30px;
border-bottom: 1px dashed var(--rkx-page-line);
font-size: 14.5px;
line-height: 1.55;
color: var(--rkx-page-muted);
transition: color 220ms ease, padding-left 220ms ease;
}
.rkx-compare__list li:last-child { border-bottom: none; }
.rkx-compare__list li:hover { color: #fff; padding-left: 36px; }
.rkx-compare__list li::before {
position: absolute;
left: 0;
top: 12px;
width: 20px;
height: 20px;
display: inline-flex;
align-items: center;
justify-content: center;
font-family: var(--rkx-font-mono);
font-weight: 600;
line-height: 1;
border-radius: 1px;
transition: transform 220ms cubic-bezier(0.34,1.56,0.64,1);
}
/* Negative column: ✕ in soft red */
.rkx-compare__col--neg .rkx-compare__list li::before {
content: '✕';
color: rgba(248,113,113,0.85);
background: rgba(248,113,113,0.08);
border: 1px solid rgba(248,113,113,0.2);
font-size: 12px;
}
.rkx-compare__col--neg .rkx-compare__list li:hover::before {
transform: scale(1.1);
background: rgba(248,113,113,0.15);
}
/* Positive column: ✓ in accent blue */
.rkx-compare__col--pos .rkx-compare__list li { color: var(--rkx-page-text); }
.rkx-compare__col--pos .rkx-compare__list li::before {
content: '✓';
color: var(--rkx-accent-tx);
background: rgba(29,36,202,0.12);
border: 1px solid rgba(29,36,202,0.35);
font-size: 12px;
}
.rkx-compare__col--pos .rkx-compare__list li:hover::before {
transform: scale(1.1);
background: rgba(29,36,202,0.22);
box-shadow: 0 0 12px rgba(29,36,202,0.4);
}
@media (prefers-reduced-motion: reduce) {
.rkx-compare__col,
.rkx-compare__list li,
.rkx-compare__list li::before { transition: none !important; }
}