.elementor-widget-container .premium-global-badge-{{ID}} .premium-badge-container{background-color:var( --e-global-color-primary );}.elementor-widget-container .premium-global-cursor-7629{color:var( --e-global-color-primary );fill:var( --e-global-color-primary );}.elementor-widget-container.premium-cursor-ftext .premium-global-cursor-7629 .premium-cursor-follow-text{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-widget-container .premium-global-badge-{{ID}} .premium-badge-text{color:var( --e-global-color-secondary );}.elementor-widget-container .premium-global-badge-{{ID}} .premium-badge-icon{color:var( --e-global-color-secondary );fill:var( --e-global-color-secondary );}.elementor-7629 .elementor-element.elementor-element-91e7a84{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:80px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-widget-html .premium-global-badge-{{ID}} .premium-badge-container{background-color:var( --e-global-color-primary );}.elementor-widget-html .premium-global-cursor-{{ID}}{color:var( --e-global-color-primary );fill:var( --e-global-color-primary );}.elementor-widget-html.premium-cursor-ftext .premium-global-cursor-{{ID}} .premium-cursor-follow-text{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-widget-html .premium-global-badge-{{ID}} .premium-badge-text{color:var( --e-global-color-secondary );}.elementor-widget-html .premium-global-badge-{{ID}} .premium-badge-icon{color:var( --e-global-color-secondary );fill:var( --e-global-color-secondary );}.elementor-7629 .elementor-element.elementor-element-34a5f52{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-widget-shortcode .premium-global-badge-{{ID}} .premium-badge-container{background-color:var( --e-global-color-primary );}.elementor-widget-shortcode .premium-global-cursor-{{ID}}{color:var( --e-global-color-primary );fill:var( --e-global-color-primary );}.elementor-widget-shortcode.premium-cursor-ftext .premium-global-cursor-{{ID}} .premium-cursor-follow-text{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-widget-shortcode .premium-global-badge-{{ID}} .premium-badge-text{color:var( --e-global-color-secondary );}.elementor-widget-shortcode .premium-global-badge-{{ID}} .premium-badge-icon{color:var( --e-global-color-secondary );fill:var( --e-global-color-secondary );}.elementor-7629 .elementor-element.elementor-element-6b3ba3a > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}:root{--page-title-display:none;}@media(max-width:1024px){.elementor-7629 .elementor-element.elementor-element-91e7a84{--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}}@media(max-width:767px){.elementor-7629 .elementor-element.elementor-element-91e7a84{--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-7629 .elementor-element.elementor-element-1d011e7 > .elementor-widget-container{padding:100px 0px 0px 0px;}}/* Start custom CSS for html, class: .elementor-element-1d011e7 *//* =========================================================
REVGENX SEO • LIGHT EDITORIAL + VR PARTICLE GLOBE
========================================================= */
:root {
/* ===== BRAND PRIMARIES ===== */
--p1: #795FED;
--p2: #6A88F4;
--p-grad: linear-gradient(135deg, #6A88F4 0%, #795FED 60%, #9B7BFF 100%);

/* ===== BRAND SECONDARIES ===== */
--teal: #2A6673;
--navy: #2A2C41;
--mist: #B0CBD2;
--y: #F2F253;
--y-soft: #F9F871;

/* ===== LIGHT TONAL CANVAS ===== */
--cream: #F5F1E8;
/* hero background - warm cream */
--cream-2: #EFE9DA;
/* deeper cream for sections */
--paper: #FAF7F0;
/* paper white */
--sage: #E5EAE3;
/* secondary section bg */
--mist-soft: #DCE5E7;
/* mist tinted bg */

/* ===== INK / TEXT ===== */
--ink: #1B1D2E;
--ink-2: #3A3D55;
--ink-soft: #6B6F86;
--muted: #9398AD;

--line: rgba(27, 29, 46, 0.10);
--line-2: rgba(27, 29, 46, 0.18);
}
.revgenx-seo-page, .revgenx-seo-page * {
box-sizing: border-box;
margin: 0;
padding: 0
}

.revgenx-seo-page { scroll-behavior: smooth; }

.revgenx-seo-page {
background: var(--cream);
color: var(--ink);
font-family: 'Inter', system-ui, sans-serif;
font-size: 16px;
line-height: 1.55;
/* DO NOT use overflow-x:hidden on body - it breaks position:sticky descendants.
Use overflow:clip on individual overflowing sections instead. */
-webkit-font-smoothing: antialiased;
}

html {
/* clip horizontal overflow at the html level - this does NOT break sticky */
overflow-x: clip;
}
.revgenx-seo-page a {
color: inherit;
text-decoration: none
}
.revgenx-seo-page button {
font-family: inherit;
cursor: pointer
}
.revgenx-seo-page img {
max-width: 100%;
display: block
}
.revgenx-seo-page ::selection {
background: var(--y);
color: var(--navy)
}

/* ============== HERO with 3D GLOBE ============== */
.revgenx-seo-page .hero {
margin-top: -100px;
position: relative;
padding: 80px 32px 60px;
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: flex-end;
overflow: hidden;
background:
radial-gradient(900px 600px at 80% 20%, rgba(106, 136, 244, 0.08), transparent 60%),
radial-gradient(700px 500px at 20% 80%, rgba(176, 203, 210, 0.25), transparent 60%),
var(--cream);
}

/* subtle dotted texture */
.revgenx-seo-page .hero::before {
content: "";
position: absolute;
inset: 0;
background-image: radial-gradient(circle at 1px 1px, rgba(27, 29, 46, 0.04) 1px, transparent 0);
background-size: 24px 24px;
mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
pointer-events: none;
}

.revgenx-seo-page .hero-inner {
max-width: 1440px;
margin: 0 auto;
width: 100%;
position: relative;
z-index: 2;
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: 40px;
align-items: end;
min-height: 80vh;
}

@media (max-width:980px) {
.revgenx-seo-page .hero-inner {
grid-template-columns: 1fr;
gap: 20px;
align-items: start
}

.revgenx-seo-page .hero {
padding-top: 60px
}
}

.revgenx-seo-page .hero-eyebrow {
display: inline-flex;
align-items: center;
gap: 10px;
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--ink-2);
margin-bottom: 24px;
padding: 8px 14px;
border: 1px solid var(--line-2);
border-radius: 999px;
background: rgba(255, 255, 255, 0.6);
width: fit-content;
font-weight: 500;
}

.revgenx-seo-page .hero-eyebrow .pulse {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--p1);
box-shadow: 0 0 0 0 rgba(121, 95, 237, 0.6);
animation: pulse 2s infinite;
}

@keyframes pulse {
0% {
box-shadow: 0 0 0 0 rgba(121, 95, 237, 0.6)
}

70% {
box-shadow: 0 0 0 12px rgba(121, 95, 237, 0)
}

100% {
box-shadow: 0 0 0 0 rgba(121, 95, 237, 0)
}
}

.revgenx-seo-page .hero h1 {
font-family: "Roboto", Sans-serif;
font-weight: 400;
font-size: clamp(48px, 7vw, 112px);
line-height: 0.95;
letter-spacing: -0.025em;
color: var(--ink);
margin-bottom: 28px;
}

.revgenx-seo-page .hero h1 .it {
font-style: normal;
font-variation-settings: "SOFT" 100, "WONK" 1;
background: var(--p-grad);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}

.revgenx-seo-page .hero h1 .reveal {
display: inline-block;
overflow: hidden;
vertical-align: bottom
}

.revgenx-seo-page .hero h1 .reveal span {
display: inline-block;
transform: translateY(110%);
animation: rise 1s cubic-bezier(.2, .7, .2, 1) forwards;
}

@keyframes rise {
to {
transform: translateY(0)
}
}

.revgenx-seo-page .hero-sub {
font-size: 18px;
color: var(--ink-2);
max-width: 540px;
margin-bottom: 36px;
line-height: 1.55;
}

.revgenx-seo-page .hero-ctas {
display: flex;
gap: 12px;
flex-wrap: wrap;
align-items: center;
}

.revgenx-seo-page .btn {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 16px 26px;
border-radius: 999px;
font-weight: 600;
font-size: 15px;
border: none;
cursor: pointer;
transition: all .3s cubic-bezier(.2, .7, .2, 1);
position: relative;
}

.revgenx-seo-page .btn-primary {
background: var(--ink);
color: var(--cream);
}

.revgenx-seo-page .btn-primary:hover {
transform: translateY(-2px);
background: var(--p1);
box-shadow: 0 18px 36px -12px rgba(121, 95, 237, 0.4)
}

.revgenx-seo-page .btn-ghost {
background: transparent;
color: var(--ink);
border: 1px solid var(--line-2);
}

.revgenx-seo-page .btn-ghost:hover {
background: rgba(255, 255, 255, 0.6);
border-color: var(--p1)
}

.revgenx-seo-page .btn .arrow {
width: 18px;
height: 18px;
transition: transform .3s ease
}

.revgenx-seo-page .btn:hover .arrow {
transform: translateX(4px)
}

.revgenx-seo-page .hero-meta {
display: flex;
gap: 24px;
align-items: center;
flex-wrap: wrap;
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
color: var(--ink-soft);
letter-spacing: 0.05em;
margin-top: 40px;
padding-top: 24px;
border-top: 1px solid var(--line);
max-width: 540px;
}

.revgenx-seo-page .hero-meta b {
color: var(--ink);
font-weight: 600
}

.revgenx-seo-page .hero-meta .dvd {
width: 1px;
height: 14px;
background: var(--line-2)
}

/* ===== Globe wrapper (right side) ===== */
.revgenx-seo-page .globe-stage {
position: relative;
width: 100%;
height: clamp(420px, 60vh, 720px);
display: grid;
place-items: center;
}

.revgenx-seo-page #globe-canvas {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}

/* floating team avatars on top of canvas */
.revgenx-seo-page .globe-marker {
position: absolute;
z-index: 5;
display: flex;
align-items: center;
gap: 8px;
pointer-events: none;
opacity: 0;
transition: opacity .4s ease;
}

.revgenx-seo-page .globe-marker.show {
opacity: 1
}

.revgenx-seo-page .globe-marker .avatar {
width: 44px;
height: 44px;
border-radius: 50%;
background: var(--paper);
border: 2px solid var(--ink);
display: grid;
place-items: center;
font-family: "Roboto", Sans-serif;
font-weight: 500;
font-size: 14px;
color: var(--ink);
box-shadow: 0 8px 20px -6px rgba(27, 29, 46, 0.3);
position: relative;
}

.revgenx-seo-page .globe-marker .avatar::after {
content: "";
position: absolute;
inset: -4px;
border: 1px dashed var(--p1);
border-radius: 50%;
opacity: .5;
animation: spin 12s linear infinite;
}

@keyframes spin {
to {
transform: rotate(360deg)
}
}

.revgenx-seo-page .globe-marker .label {
background: var(--ink);
color: var(--cream);
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
letter-spacing: 0.08em;
padding: 4px 8px;
border-radius: 6px;
text-transform: uppercase;
white-space: nowrap;
}

.revgenx-seo-page .globe-caption {
position: absolute;
bottom: 16px;
left: 50%;
transform: translateX(-50%);
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
letter-spacing: 0.12em;
color: var(--ink-soft);
text-transform: uppercase;
display: flex;
gap: 14px;
align-items: center;
background: rgba(255, 255, 255, 0.6);
backdrop-filter: blur(8px);
padding: 10px 16px;
border-radius: 999px;
border: 1px solid var(--line);
}

.revgenx-seo-page .globe-caption .dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--p1);
animation: pulse 2s infinite;
}

/* ============== MARQUEE STRIP ============== */
.revgenx-seo-page .strip {
background: var(--ink);
color: var(--cream);
padding: 28px 0;
overflow: hidden;
position: relative;
}

.revgenx-seo-page .strip-track {
display: flex;
gap: 60px;
align-items: center;
animation: scroll 40s linear infinite;
width: max-content;
}

@keyframes scroll {
to {
transform: translateX(-50%)
}
}

.revgenx-seo-page .strip-item {
font-family: "Roboto", Sans-serif;
font-style: normal;
font-size: 32px;
white-space: nowrap;
display: inline-flex;
align-items: center;
gap: 60px;
font-weight: 400;
}

.revgenx-seo-page .strip-item .star {
width: 24px;
height: 24px;
color: var(--y);
flex-shrink: 0;
}

.revgenx-seo-page .strip-item em {
color: var(--y)
}

/* ============== SECTION COMMON ============== */
.revgenx-seo-page section {
position: relative;
padding: 120px 32px
}

.revgenx-seo-page .container {
max-width: 1280px;
margin: 0 auto
}

.revgenx-seo-page .sec-eyebrow {
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ink-soft);
margin-bottom: 18px;
display: inline-flex;
align-items: center;
gap: 10px;
font-weight: 500;
}

.revgenx-seo-page .sec-eyebrow::before {
content: "";
width: 24px;
height: 1px;
background: var(--ink-soft);
opacity: .6;
}

.revgenx-seo-page .sec-h {
font-family: "Roboto", Sans-serif;
font-weight: 400;
font-size: clamp(40px, 5.5vw, 80px);
line-height: 1;
letter-spacing: -0.025em;
margin-bottom: 24px;
color: var(--ink);
max-width: 14ch;
}

.revgenx-seo-page .sec-h .it {
font-style: normal;
font-variation-settings: "SOFT" 100, "WONK" 1;
background: var(--p-grad);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}

.revgenx-seo-page .sec-h .accent {
font-style: normal;
color: var(--ink);
position: relative;
display: inline-block;
}

.revgenx-seo-page .sec-h .accent::after {
content: "";
position: absolute;
left: -2%;
right: -2%;
bottom: 8%;
height: 14%;
background: var(--y);
z-index: -1;
opacity: .85;
transform: skew(-6deg);
}

.revgenx-seo-page .sec-lede {
font-size: 18px;
color: var(--ink-2);
max-width: 600px;
line-height: 1.55;
}

/* ============== AI SEARCH RIPPLE (replaces dark engines section) ============== */
.revgenx-seo-page .ai-search {
background: var(--paper);
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}

.revgenx-seo-page .ai-grid {
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: 80px;
align-items: center;
}

@media (max-width: 880px) {
.revgenx-seo-page .ai-grid {
grid-template-columns: 1fr;
gap: 50px
}
}

.revgenx-seo-page .ai-stats {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
margin-top: 40px;
}

.revgenx-seo-page .stat-card {
padding: 28px 24px;
background: var(--cream);
border: 1px solid var(--line);
border-radius: 18px;
position: relative;
overflow: hidden;
transition: all .35s ease;
}

.revgenx-seo-page .stat-card:hover {
transform: translateY(-4px);
border-color: var(--p1);
box-shadow: 0 24px 50px -20px rgba(27, 29, 46, 0.12)
}

.revgenx-seo-page .stat-card::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 2px;
background: var(--p-grad);
transform: scaleX(0);
transform-origin: left;
transition: transform .5s ease;
}

.revgenx-seo-page .stat-card:hover::before {
transform: scaleX(1)
}

.revgenx-seo-page .stat-card .num {
font-family: "Roboto", Sans-serif;
font-size: 56px;
line-height: 1;
font-weight: 400;
font-style: normal;
color: var(--p1);
margin-bottom: 10px;
}

.revgenx-seo-page .stat-card .lbl {
font-size: 13px;
color: var(--ink-2);
line-height: 1.45;
}

/* ===== SEARCH ENGINE STACK ===== */
.revgenx-seo-page .engine-stack {
display: flex;
flex-direction: column;
gap: 12px;
}

.revgenx-seo-page .engine-row {
padding: 22px 24px;
background: var(--cream);
border: 1px solid var(--line);
border-radius: 16px;
display: grid;
grid-template-columns: 44px 1fr 80px;
gap: 18px;
align-items: center;
transition: all .35s ease;
position: relative;
overflow: hidden;
}

.revgenx-seo-page .engine-row:hover {
background: var(--paper);
border-color: var(--p1);
transform: translateX(8px);
box-shadow: 0 20px 40px -20px rgba(27, 29, 46, 0.15);
}

.revgenx-seo-page .engine-row .ic {
width: 44px;
height: 44px;
border-radius: 12px;
background: var(--mist-soft);
display: grid;
place-items: center;
}

.revgenx-seo-page .engine-row .ic svg {
width: 22px;
height: 22px;
color: var(--ink)
}

.revgenx-seo-page .engine-row .nm {
font-weight: 600;
font-size: 16px;
margin-bottom: 4px;
color: var(--ink)
}

.revgenx-seo-page .engine-row .desc {
font-size: 12px;
color: var(--ink-soft);
font-family: 'JetBrains Mono', monospace;
letter-spacing: 0.03em;
}

.revgenx-seo-page .engine-row .bar {
display: inline;
align-items: center;
gap: 8px;
}

.revgenx-seo-page .engine-row .bar-fill {
height: 4px;
flex: 1;
background: var(--mist-soft);
border-radius: 2px;
position: relative;
overflow: hidden;
}

.revgenx-seo-page .engine-row .bar-fill .fill {
position: absolute;
inset: 0;
background: var(--p-grad);
border-radius: inherit;
transform-origin: left;
transform: scaleX(0);
transition: transform 1s cubic-bezier(.2, .7, .2, 1);
}

.revgenx-seo-page .engine-row.in-view .bar-fill .fill {
transform: scaleX(var(--w, 1))
}

.revgenx-seo-page .engine-row .pct {
font-family: 'JetBrains Mono', monospace;
font-size: 13px;
font-weight: 600;
color: var(--p1);
min-width: 36px;
text-align: right;
}

/* ============== CWV PROCESS - flagship section ============== */
.revgenx-seo-page .cwv {
background: var(--sage);
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
position: relative;
overflow: hidden;
}

.revgenx-seo-page .cwv-head {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: end;
margin-bottom: 80px;
}

@media (max-width: 880px) {
.revgenx-seo-page .cwv-head {
grid-template-columns: 1fr;
gap: 30px
}
}

/* CWV gauges */
.revgenx-seo-page .cwv-gauges {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
margin-top: 60px;
}

@media (max-width: 880px) {
.revgenx-seo-page .cwv-gauges {
grid-template-columns: 1fr
}
}

.revgenx-seo-page .gauge-card {
background: var(--paper);
border: 1px solid var(--line);
border-radius: 24px;
padding: 32px 28px;
position: relative;
overflow: hidden;
transition: transform .4s ease, box-shadow .4s ease;
}

.revgenx-seo-page .gauge-card:hover {
transform: translateY(-6px);
box-shadow: 0 30px 60px -25px rgba(27, 29, 46, 0.2)
}

.revgenx-seo-page .gauge-card .glabel {
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--ink-soft);
margin-bottom: 14px;
font-weight: 500;
}

.revgenx-seo-page .gauge-card .gname {
font-family: "Roboto", Sans-serif;
font-weight: 400;
font-style: normal;
font-size: 28px;
color: var(--ink);
margin-bottom: 6px;
}

.revgenx-seo-page .gauge-card .gtagline {
font-size: 13px;
color: var(--ink-soft);
margin-bottom: 28px;
}

/* circular gauge */
.revgenx-seo-page .gauge-ring {
width: 180px;
height: 180px;
margin: 0 auto 24px;
position: relative;
}

.revgenx-seo-page .gauge-ring svg {
width: 100%;
height: 100%;
transform: rotate(-90deg);
}

.revgenx-seo-page .gauge-ring .ring-bg {
stroke: var(--line);
}

.revgenx-seo-page .gauge-ring .ring-fg {
stroke-linecap: round;
transition: stroke-dashoffset 1.5s cubic-bezier(.2, .7, .2, 1);
}

.revgenx-seo-page .gauge-ring .center {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}

.revgenx-seo-page .gauge-ring .val {
font-family: "Roboto", Sans-serif;
font-weight: 400;
font-style: normal;
font-size: 56px;
line-height: 1;
color: var(--ink);
}

.revgenx-seo-page .gauge-ring .unit {
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
color: var(--ink-soft);
letter-spacing: 0.1em;
text-transform: uppercase;
margin-top: 2px;
}

.revgenx-seo-page .gauge-card .impact {
background: var(--cream);
border: 1px solid var(--line);
border-radius: 12px;
padding: 14px 16px;
margin-top: auto;
display: flex;
align-items: center;
gap: 12px;
}

.revgenx-seo-page .gauge-card .impact-ico {
width: 32px;
height: 32px;
border-radius: 8px;
background: var(--p1);
color: white;
display: grid;
place-items: center;
flex-shrink: 0;
}

.revgenx-seo-page .gauge-card .impact-ico svg {
width: 16px;
height: 16px
}

.revgenx-seo-page .gauge-card .impact-txt {
font-size: 12px;
color: var(--ink-2);
line-height: 1.4;
}

.revgenx-seo-page .gauge-card .impact-txt b {
color: var(--ink)
}

/* CWV impact narrative */
.revgenx-seo-page .cwv-flow {
margin-top: 80px;
padding: 40px;
background: var(--paper);
border: 1px solid var(--line);
border-radius: 28px;
position: relative;
overflow: hidden;
}

.revgenx-seo-page .cwv-flow-head {
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ink-soft);
margin-bottom: 24px;
}

.revgenx-seo-page .flow-track {
display: grid;
grid-template-columns: repeat(5, 1fr) auto repeat(2, 1fr);
gap: 0;
align-items: center;
}

@media (max-width: 880px) {
.revgenx-seo-page .flow-track {
grid-template-columns: 1fr;
gap: 16px
}

.revgenx-seo-page .flow-arrow {
display: none !important
}
}

.revgenx-seo-page .flow-step {
text-align: center;
padding: 16px 12px;
border-right: 1px dashed var(--line-2);
position: relative;
}

.revgenx-seo-page .flow-step:last-of-type {
border-right: none
}

.revgenx-seo-page .flow-step .num {
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
color: var(--p1);
letter-spacing: 0.18em;
margin-bottom: 8px;
font-weight: 600;
}

.revgenx-seo-page .flow-step .label {
font-family: "Roboto", Sans-serif;
font-weight: 400;
font-size: 18px;
color: var(--ink);
line-height: 1.2;
margin-bottom: 6px;
}

.revgenx-seo-page .flow-step .metric {
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
color: var(--ink-soft);
}

.revgenx-seo-page .flow-step.outcome {
background: linear-gradient(135deg, rgba(121, 95, 237, 0.12), rgba(106, 136, 244, 0.08));
border: 1px solid var(--p1);
border-radius: 14px;
padding: 20px 16px;
}

.revgenx-seo-page .flow-step.outcome .label {
color: var(--p1);
font-style: normal
}

.revgenx-seo-page .flow-arrow {
display: grid;
place-items: center;
color: var(--ink-soft);
padding: 0 8px;
}

.revgenx-seo-page .flow-arrow svg {
width: 16px;
height: 16px
}

/* ============== SEO ROADMAP DIAL ============== */
.revgenx-seo-page .roadmap {
background: var(--ink);
color: var(--cream);
border-top: 1px solid var(--ink);
border-bottom: 1px solid var(--ink);
padding: 0;
position: relative;
overflow: hidden;
}

.revgenx-seo-page .roadmap-bg {
position: absolute;
inset: 0;
pointer-events: none;
background:
radial-gradient(800px 600px at 75% 30%, rgba(121, 95, 237, 0.18), transparent 60%),
radial-gradient(700px 500px at 25% 80%, rgba(106, 136, 244, 0.14), transparent 60%);
}

.revgenx-seo-page .roadmap-pin {
position: relative
}

.revgenx-seo-page .roadmap-stage {
position: relative;
padding: 120px 32px;
max-width: 1440px;
margin: 0 auto;
}

.revgenx-seo-page .roadmap-header {
text-align: center;
margin-bottom: 60px;
position: relative;
}

.revgenx-seo-page .roadmap-header .sec-eyebrow::before {
background: var(--mist);
opacity: .6
}

.revgenx-seo-page .rd-h {
font-family: "Roboto", Sans-serif;
font-weight: 400;
font-size: clamp(42px, 5.5vw, 80px);
line-height: 1;
letter-spacing: -0.025em;
color: var(--cream);
margin-bottom: 20px;
}

.revgenx-seo-page .rd-h .rd-it {
font-style: normal;
font-variation-settings: "SOFT" 100, "WONK" 1;
background: linear-gradient(135deg, #9B7BFF 0%, #F9F871 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}

.revgenx-seo-page .rd-lede {
font-size: 18px;
color: rgba(245, 241, 232, 0.7);
max-width: 640px;
margin: 0 auto;
line-height: 1.55;
}

.revgenx-seo-page .roadmap-canvas-wrap {
display: grid;
grid-template-columns: 240px 1fr 1fr;
gap: 40px;
align-items: center;
margin-top: 60px;
}

@media (max-width: 1080px) {
.revgenx-seo-page .roadmap-canvas-wrap {
display: inline;
grid-template-columns: 1fr;
gap: 32px;
}
}

.revgenx-seo-page .dial {
position: relative;
width: 100%;
max-width: 520px;
aspect-ratio: 1;
margin: 0 auto;
grid-column: 2;
}

.revgenx-seo-page .dial svg {
width: 100%;
height: 100%;
display: block;
filter: drop-shadow(0 30px 60px rgba(121, 95, 237, 0.4));
}

.revgenx-seo-page .dial-center {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
pointer-events: none;
}

.revgenx-seo-page .dial-phase {
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
letter-spacing: 0.2em;
color: var(--mist);
margin-bottom: 6px;
font-weight: 600;
}

.revgenx-seo-page .dial-period {
font-family: "Roboto", Sans-serif;
font-style: normal;
font-size: clamp(20px, 2.4vw, 28px);
color: var(--cream);
text-align: center;
line-height: 1.1;
}

.revgenx-seo-page .phase-nav {
display: flex;
flex-direction: column;
gap: 8px;
grid-column: 1;
grid-row: 1;
}

@media (max-width: 1080px) {
.revgenx-seo-page .phase-nav {
grid-column: 1;
grid-row: auto;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
}
}

.revgenx-seo-page .phase-pill {
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.10);
color: var(--cream);
padding: 14px 18px;
border-radius: 14px;
display: flex;
align-items: center;
gap: 12px;
text-align: left;
transition: all .35s ease;
cursor: pointer;
font-family: inherit;
}

.revgenx-seo-page .phase-pill .dot {
width: 10px;
height: 10px;
border-radius: 50%;
background: var(--line-2);
flex-shrink: 0;
transition: all .35s ease;
}

.revgenx-seo-page .phase-pill .t {
font-size: 14px;
font-weight: 600;
margin-bottom: 2px;
}

.revgenx-seo-page .phase-pill .s {
font-size: 11px;
font-family: 'JetBrains Mono', monospace;
color: rgba(245, 241, 232, 0.5);
letter-spacing: 0.05em;
}

.revgenx-seo-page .phase-pill:hover {
background: rgba(255, 255, 255, 0.07);
border-color: rgba(255, 255, 255, 0.18);
transform: translateX(4px);
}

.revgenx-seo-page .phase-pill.active {
background: linear-gradient(135deg, rgba(121, 95, 237, 0.2), rgba(106, 136, 244, 0.10));
border-color: var(--p1);
box-shadow: 0 12px 30px -10px rgba(121, 95, 237, 0.5);
}

.revgenx-seo-page .phase-pill.active .dot {
background: var(--y);
box-shadow: 0 0 0 4px rgba(242, 242, 83, 0.2);
}

.revgenx-seo-page .phase-card {
grid-column: 3;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 22px;
padding: 32px 30px;
position: relative;
overflow: hidden;
transition: opacity .4s ease, transform .4s ease;
}

@media (max-width: 1080px) {
.revgenx-seo-page .phase-card {
grid-column: 1
}
}

.revgenx-seo-page .phase-card::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, transparent, var(--p1), var(--y), transparent);
}

.revgenx-seo-page .phase-num {
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
letter-spacing: 0.2em;
color: var(--mist);
margin-bottom: 14px;
font-weight: 600;
}

.revgenx-seo-page .phase-card h3 {
font-family: "Roboto", Sans-serif;
font-weight: 400;
font-size: clamp(28px, 3vw, 40px);
line-height: 1.05;
letter-spacing: -0.02em;
color: var(--cream);
margin-bottom: 16px;
}

.revgenx-seo-page .phase-card h3 .it {
font-style: normal;
background: linear-gradient(135deg, #9B7BFF 0%, #F9F871 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}

.revgenx-seo-page .phase-card p {
font-size: 15px;
color: rgba(245, 241, 232, 0.7);
line-height: 1.6;
margin-bottom: 22px;
}

.revgenx-seo-page .phase-points {
list-style: none;
display: flex;
flex-direction: column;
gap: 10px;
}

.revgenx-seo-page .phase-points li {
display: flex;
align-items: center;
gap: 10px;
font-size: 13px;
color: rgba(245, 241, 232, 0.85);
}

.revgenx-seo-page .phase-points li svg {
width: 16px;
height: 16px;
color: var(--y);
flex-shrink: 0;
}

/* ============== WHAT WE DO ============== */
.revgenx-seo-page .what-we-do {
background: var(--paper);
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}

.revgenx-seo-page .wwd-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
margin-top: 60px;
}

@media (max-width: 980px) {
.revgenx-seo-page .wwd-grid {
grid-template-columns: repeat(2, 1fr)
}
}

@media (max-width: 640px) {
.revgenx-seo-page .wwd-grid {
grid-template-columns: 1fr
}
}

.revgenx-seo-page .wwd-card {
position: relative;
padding: 32px 28px;
background: var(--cream);
border: 1px solid var(--line);
border-radius: 22px;
overflow: hidden;
transition: all .4s cubic-bezier(.2, .7, .2, 1);
min-height: 280px;
display: flex;
flex-direction: column;
}

.revgenx-seo-page .wwd-card::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: var(--p-grad);
transform: scaleX(0);
transform-origin: left;
transition: transform .5s ease;
}

.revgenx-seo-page .wwd-card:hover {
transform: translateY(-6px);
border-color: var(--p1);
box-shadow: 0 30px 60px -25px rgba(121, 95, 237, 0.25);
background: var(--paper);
}

.revgenx-seo-page .wwd-card:hover::before {
transform: scaleX(1)
}

.revgenx-seo-page .wwd-card .wwd-num {
font-family: "Roboto", Sans-serif;
font-style: normal;
font-size: 56px;
line-height: 1;
background: var(--p-grad);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
margin-bottom: 20px;
}

.revgenx-seo-page .wwd-card h4 {
font-family: "Roboto", Sans-serif;
font-weight: 400;
font-size: 24px;
line-height: 1.15;
letter-spacing: -0.015em;
color: var(--ink);
margin-bottom: 12px;
}

.revgenx-seo-page .wwd-card p {
font-size: 14px;
color: var(--ink-2);
line-height: 1.55;
margin-bottom: 18px;
}

.revgenx-seo-page .wwd-card .wwd-tools {
margin-top: auto;
display: flex;
gap: 6px;
flex-wrap: wrap;
}

.revgenx-seo-page .wwd-card .wwd-tool {
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
padding: 4px 10px;
border-radius: 999px;
background: var(--mist-soft);
color: var(--ink-2);
letter-spacing: 0.05em;
transition: all .25s ease;
}

.revgenx-seo-page .wwd-card:hover .wwd-tool {
background: var(--p1);
color: var(--cream);
}

/* ============== PACKAGE INCLUDES ============== */
.revgenx-seo-page .package {
background: var(--ink);
color: var(--cream);
border-top: 1px solid var(--ink);
border-bottom: 1px solid var(--ink);
position: relative;
overflow: hidden;
}

.revgenx-seo-page .package::before {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(700px 500px at 80% 30%, rgba(121, 95, 237, 0.15), transparent 60%),
radial-gradient(600px 400px at 20% 80%, rgba(106, 136, 244, 0.12), transparent 60%);
pointer-events: none;
}

.revgenx-seo-page .package .container {
position: relative;
z-index: 2
}

.revgenx-seo-page .package-head {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: end;
margin-bottom: 60px;
}

@media (max-width: 880px) {
.revgenx-seo-page .package-head {
grid-template-columns: 1fr;
gap: 30px
}
}

.revgenx-seo-page .package .sec-h {
color: var(--cream)
}

.revgenx-seo-page .package .sec-h .accent {
color: var(--cream)
}

.revgenx-seo-page .package .sec-h .accent::after {
background: var(--y);
opacity: .6
}

.revgenx-seo-page .package .sec-eyebrow {
color: var(--mist)
}

.revgenx-seo-page .package .sec-eyebrow::before {
background: var(--mist);
opacity: .6
}

.revgenx-seo-page .package .sec-lede {
color: rgba(245, 241, 232, 0.7)
}

.revgenx-seo-page .pkg-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
}

@media (max-width: 980px) {
.revgenx-seo-page .pkg-grid {
grid-template-columns: 1fr;
gap: 40px
}
}

.revgenx-seo-page .pkg-col h4 {
font-family: "Roboto", Sans-serif;
font-weight: 400;
font-size: 28px;
letter-spacing: -0.015em;
margin-bottom: 24px;
color: var(--cream);
display: flex;
align-items: center;
gap: 14px;
}

.revgenx-seo-page .pkg-col h4::before {
content: "";
flex-shrink: 0;
width: 36px;
height: 36px;
border-radius: 10px;
background: var(--p-grad);
display: inline-block;
}

.revgenx-seo-page .pkg-list {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px 24px;
list-style: none;
}

@media (max-width: 540px) {
.revgenx-seo-page .pkg-list {
grid-template-columns: 1fr
}
}

.revgenx-seo-page .pkg-list.single {
grid-template-columns: 1fr
}

.revgenx-seo-page .pkg-item {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 14px 16px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 12px;
transition: all .3s ease;
cursor: default;
}

.revgenx-seo-page .pkg-item:hover {
background: rgba(121, 95, 237, 0.10);
border-color: var(--p1);
transform: translateX(4px);
}

.revgenx-seo-page .pkg-item .check {
width: 22px;
height: 22px;
flex-shrink: 0;
border-radius: 50%;
background: var(--y);
display: grid;
place-items: center;
margin-top: 1px;
}

.revgenx-seo-page .pkg-item .check svg {
width: 13px;
height: 13px;
color: var(--ink);
stroke-width: 3
}

.revgenx-seo-page .pkg-item .pkg-txt {
font-size: 13.5px;
line-height: 1.4;
color: rgba(245, 241, 232, 0.92);
}

.revgenx-seo-page .pkg-item .pkg-txt b {
color: var(--y);
font-weight: 600
}

/* ============== CASE STUDIES with animated bar charts ============== */
.revgenx-seo-page .cases {
background: var(--cream);
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}

.revgenx-seo-page .cases-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
margin-top: 60px;
}

@media (max-width: 1080px) {
.revgenx-seo-page .cases-grid {
grid-template-columns: 1fr
}
}

.revgenx-seo-page .case-block {
background: var(--paper);
border: 1px solid var(--line);
border-radius: 28px;
padding: 36px 32px;
display: flex;
flex-direction: column;
transition: all .4s ease;
position: relative;
overflow: hidden;
}

.revgenx-seo-page .case-block:hover {
transform: translateY(-6px);
box-shadow: 0 40px 80px -30px rgba(27, 29, 46, 0.18);
border-color: var(--p1);
}

.revgenx-seo-page .case-block .ind {
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ink-soft);
margin-bottom: 14px;
}

.revgenx-seo-page .case-block .name {
font-family: "Roboto", Sans-serif;
font-weight: 400;
font-size: 36px;
line-height: 1;
letter-spacing: -0.02em;
color: var(--ink);
margin-bottom: 10px;
}

.revgenx-seo-page .case-block .name .it {
font-style: normal;
background: var(--p-grad);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}

.revgenx-seo-page .case-block .lede {
font-size: 14px;
color: var(--ink-2);
line-height: 1.5;
margin-bottom: 28px;
}

/* Bar chart */
.revgenx-seo-page .case-chart {
background: var(--cream);
border: 1px solid var(--line);
border-radius: 16px;
padding: 24px 22px;
margin-bottom: 24px;
position: relative;
}

.revgenx-seo-page .case-chart-head {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 18px;
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--ink-soft);
}

.revgenx-seo-page .case-chart-head .delta {
background: var(--p1);
color: var(--cream);
padding: 3px 10px;
border-radius: 999px;
font-weight: 600;
letter-spacing: 0.06em;
}

.revgenx-seo-page .bars {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 6px;
height: 130px;
padding-bottom: 22px;
border-bottom: 1px dashed var(--line-2);
}

.revgenx-seo-page .bar {
flex: 1;
position: relative;
background: linear-gradient(180deg, var(--p2), var(--p1));
border-radius: 6px 6px 0 0;
height: 0;
transition: height 1.4s cubic-bezier(.2, .7, .2, 1);
min-height: 4px;
}

.revgenx-seo-page .bar.before {
background: linear-gradient(180deg, rgba(27, 29, 46, 0.18), rgba(27, 29, 46, 0.10));
}

.revgenx-seo-page .bar.peak {
background: linear-gradient(180deg, var(--y), var(--p1));
}

.revgenx-seo-page .bar .lbl {
position: absolute;
top: -22px;
left: 50%;
transform: translateX(-50%);
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
font-weight: 600;
color: var(--ink);
white-space: nowrap;
opacity: 0;
transition: opacity .4s ease .8s;
}

.revgenx-seo-page .bar.in-view .lbl {
opacity: 1
}

.revgenx-seo-page .bar-axis {
display: flex;
justify-content: space-between;
margin-top: 10px;
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
color: var(--ink-soft);
letter-spacing: 0.05em;
}

.revgenx-seo-page .case-stats {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
margin-top: auto;
}

.revgenx-seo-page .case-stat {
background: var(--cream);
border: 1px solid var(--line);
border-radius: 12px;
padding: 16px 14px;
text-align: center;
}

.revgenx-seo-page .case-stat .v {
font-family: "Roboto", Sans-serif;
font-style: normal;
font-size: 32px;
line-height: 1;
background: var(--p-grad);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
margin-bottom: 4px;
}

.revgenx-seo-page .case-stat .l {
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
text-transform: uppercase;
color: var(--ink-soft);
letter-spacing: 0.08em;
line-height: 1.3;
}

.revgenx-seo-page .case-block .keywords {
margin-top: 20px;
display: flex;
flex-wrap: wrap;
gap: 6px;
}

.revgenx-seo-page .case-block .kw {
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
padding: 4px 10px;
border-radius: 999px;
background: var(--mist-soft);
color: var(--ink-2);
letter-spacing: 0.05em;
display: inline-flex;
align-items: center;
gap: 4px;
}

.revgenx-seo-page .case-block .kw::before {
content: "#";
color: var(--p1);
font-weight: 600;
}

.revgenx-seo-page .case-block .kw.rank::before {
content: "★";
color: var(--y);
}


/* ============== VR SCROLL JOURNEY - sticky 4-stage cinematic ============== */
.revgenx-seo-page .vr-journey {
position: relative;
background: var(--ink);
color: var(--cream);
border-top: 1px solid var(--ink);
border-bottom: 1px solid var(--ink);
/* DO NOT set overflow:hidden here - sticky needs to escape */
}

.revgenx-seo-page .vr-pin {
position: relative;
height: 320vh;
/* total scroll length: 80vh per stage × 4 stages */
}


/* Elementor-safe VR 4-view scroll triggers */
.revgenx-seo-page .vr-step-triggers {
position: absolute;
inset: 0;
z-index: 0;
display: grid;
grid-template-rows: repeat(4, 1fr);
pointer-events: none;
}

.revgenx-seo-page .vr-step-trigger {
display: block;
min-height: 80vh;
pointer-events: none;
}

.revgenx-seo-page .vr-dots .d {
cursor: pointer;
}

.revgenx-seo-page .vr-dots .d:focus-visible {
outline: 2px solid var(--y);
outline-offset: 6px;
}

.revgenx-seo-page .vr-stage {
position: sticky;
top: 0;
height: 100vh;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
/* its OWN overflow hidden is fine; only ancestors of .vr-pin must NOT clip */
overflow: hidden;
background:
radial-gradient(900px 600px at 78% 28%, rgba(121, 95, 237, 0.20), transparent 60%),
radial-gradient(700px 500px at 22% 78%, rgba(106, 136, 244, 0.14), transparent 60%);
}

/* The 3D canvas, fills the stage */
.revgenx-seo-page .vr-canvas {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
z-index: 1;
display: block;
}

/* CSS-only fallback ring underneath - visible even if WebGL fails */
.revgenx-seo-page .vr-fallback-ring {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: clamp(280px, 38vw, 520px);
aspect-ratio: 1;
border-radius: 50%;
border: 1px dashed rgba(155, 123, 255, 0.18);
pointer-events: none;
animation: vrFallbackSpin 30s linear infinite;
z-index: 0;
}

.revgenx-seo-page .vr-fallback-ring::before {
content: "";
position: absolute;
inset: 14%;
border-radius: 50%;
border: 1px solid rgba(106, 136, 244, 0.16);
}

.revgenx-seo-page .vr-fallback-ring::after {
content: "";
position: absolute;
inset: 32%;
border-radius: 50%;
border: 1px dashed rgba(242, 242, 83, 0.14);
animation: vrFallbackSpin 18s linear infinite reverse;
}

@keyframes vrFallbackSpin {
to {
transform: translate(-50%, -50%) rotate(360deg)
}
}

/* Content panel sits ON TOP of canvas */
.revgenx-seo-page .vr-content-grid {
position: relative;
z-index: 4;
width: 100%;
max-width: 1280px;
padding: 0 32px;
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: 60px;
align-items: center;
}

@media (max-width: 880px) {
.revgenx-seo-page .vr-content-grid {
grid-template-columns: 1fr;
padding: 0 20px
}

.revgenx-seo-page .vr-content-grid>.vr-spacer {
display: none
}
}

.revgenx-seo-page .vr-spacer {}

.revgenx-seo-page .vr-panel {
background: rgba(255, 255, 255, 0.05);
-webkit-backdrop-filter: blur(20px) saturate(140%);
backdrop-filter: blur(20px) saturate(140%);
border: 1px solid rgba(255, 255, 255, 0.14);
border-radius: 28px;
padding: 40px 36px;
position: relative;
overflow: hidden;
}

.revgenx-seo-page .vr-panel::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, var(--p1), var(--y));
}

.revgenx-seo-page .vr-panel .vr-stage-num {
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
letter-spacing: 0.2em;
color: var(--y);
margin-bottom: 16px;
font-weight: 600;
text-transform: uppercase;
}

.revgenx-seo-page .vr-panel h3 {
font-family: "Roboto", Sans-serif;
font-weight: 400;
font-size: clamp(30px, 4vw, 48px);
line-height: 1.05;
letter-spacing: -0.02em;
color: var(--cream);
margin-bottom: 18px;
min-height: 2.4em;
}

.revgenx-seo-page .vr-panel h3 .it {
font-style: normal;
background: linear-gradient(135deg, #9B7BFF 0%, #F9F871 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}

.revgenx-seo-page .vr-panel p {
font-size: 16px;
color: rgba(245, 241, 232, 0.78);
line-height: 1.6;
margin-bottom: 22px;
min-height: 5em;
}

.revgenx-seo-page .vr-panel-tags {
display: flex;
gap: 6px;
flex-wrap: wrap;
min-height: 30px;
}

.revgenx-seo-page .vr-panel-tag {
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
padding: 6px 11px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.07);
color: rgba(245, 241, 232, 0.92);
border: 1px solid rgba(255, 255, 255, 0.12);
letter-spacing: 0.05em;
}

/* Side dot indicators */
.revgenx-seo-page .vr-dots {
position: absolute;
left: 32px;
top: 50%;
transform: translateY(-50%);
z-index: 5;
display: flex;
flex-direction: column;
gap: 14px;
}

@media (max-width: 880px) {
.revgenx-seo-page .vr-dots {
display: none
}
}

.revgenx-seo-page .vr-dots .d {
width: 10px;
height: 10px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.20);
transition: all .35s ease;
}

.revgenx-seo-page .vr-dots .d.on {
background: var(--y);
transform: scale(1.5);
box-shadow: 0 0 0 5px rgba(242, 242, 83, 0.18);
}

/* Floating progress chip */
.revgenx-seo-page .vr-chip {
position: absolute;
top: 32px;
right: 32px;
z-index: 6;
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
letter-spacing: 0.12em;
color: var(--cream);
background: rgba(27, 29, 46, 0.78);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
padding: 10px 16px;
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, 0.16);
display: inline-flex;
align-items: center;
gap: 12px;
}

.revgenx-seo-page .vr-chip .bar {
width: 64px;
height: 3px;
background: rgba(255, 255, 255, 0.16);
border-radius: 2px;
overflow: hidden;
}

.revgenx-seo-page .vr-chip .fill {
height: 100%;
background: linear-gradient(90deg, var(--p1), var(--y));
width: 0;
transition: width .15s linear;
}

@media (max-width: 880px) {
.revgenx-seo-page .vr-chip {
right: 16px;
top: 20px;
padding: 8px 12px
}

.revgenx-seo-page .vr-chip .bar {
width: 40px
}
}

/* ============== GLOBAL TEAM ============== */
.revgenx-seo-page .global {
background: var(--paper);
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}

.revgenx-seo-page .global-head {
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: 60px;
align-items: end;
margin-bottom: 60px;
}

@media (max-width: 880px) {
.revgenx-seo-page .global-head {
grid-template-columns: 1fr;
gap: 30px
}
}

.revgenx-seo-page .global-mini-globe {
width: 100%;
height: 280px;
position: relative;
}

.revgenx-seo-page #mini-globe {
width: 100%;
height: 100%;
display: block
}

.revgenx-seo-page .region-tabs {
display: flex;
gap: 8px;
flex-wrap: wrap;
margin-bottom: 32px;
padding-bottom: 24px;
border-bottom: 1px solid var(--line);
}

.revgenx-seo-page .region-tab {
background: transparent;
border: 1px solid var(--line-2);
border-radius: 999px;
padding: 10px 18px;
font-size: 13px;
font-weight: 500;
color: var(--ink-2);
transition: all .25s ease;
display: inline-flex;
align-items: center;
gap: 8px;
}

.revgenx-seo-page .region-tab:hover {
border-color: var(--p1);
color: var(--p1)
}

.revgenx-seo-page .region-tab.active {
background: var(--ink);
color: var(--cream);
border-color: var(--ink);
}

.revgenx-seo-page .region-tab .arr {
width: 24px;
height: 24px;
border-radius: 50%;
background: var(--ink);
color: var(--cream);
display: grid;
place-items: center;
transition: all .25s ease;
}

.revgenx-seo-page .region-tab .arr svg {
width: 11px;
height: 11px
}

.revgenx-seo-page .region-tab.active .arr {
background: var(--y);
color: var(--navy)
}

.revgenx-seo-page .office-list {
display: flex;
flex-direction: column;
}

.revgenx-seo-page .office-row {
display: grid;
grid-template-columns: 80px 1fr 2fr auto;
gap: 30px;
padding: 28px 0;
border-bottom: 1px solid var(--line);
align-items: center;
transition: background .3s ease, padding .3s ease;
}

.revgenx-seo-page .office-row:hover {
background: var(--cream);
padding-left: 16px
}

@media (max-width: 880px) {
.revgenx-seo-page .office-row {
grid-template-columns: 1fr;
gap: 8px;
padding: 24px 0
}

.revgenx-seo-page .office-row .arrow-link {
justify-self: start
}
}

.revgenx-seo-page .office-row .time {
font-family: 'JetBrains Mono', monospace;
font-size: 13px;
color: var(--ink-soft);
display: flex;
align-items: center;
gap: 6px;
}

.revgenx-seo-page .office-row .time::before {
content: "";
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--p1);
flex-shrink: 0;
}

.revgenx-seo-page .office-row .city {
font-family: "Roboto", Sans-serif;
font-weight: 400;
font-size: 36px;
letter-spacing: -0.015em;
color: var(--ink);
line-height: 1;
}

@media (max-width: 880px) {
.revgenx-seo-page .office-row .city {
font-size: 30px
}
}

.revgenx-seo-page .office-row .addr {
font-size: 13px;
color: var(--ink-soft);
line-height: 1.45;
}

.revgenx-seo-page .office-row .addr b {
color: var(--ink-2);
font-weight: 500;
margin-right: 6px
}

.revgenx-seo-page .office-row .arrow-link {
width: 38px;
height: 38px;
border-radius: 50%;
background: var(--cream);
border: 1px solid var(--line-2);
display: grid;
place-items: center;
transition: all .3s ease;
}

.revgenx-seo-page .office-row:hover .arrow-link {
background: var(--ink);
border-color: var(--ink)
}

.revgenx-seo-page .office-row .arrow-link svg {
width: 14px;
height: 14px;
color: var(--ink);
transition: color .3s ease
}

.revgenx-seo-page .office-row:hover .arrow-link svg {
color: var(--cream)
}

/* ============== STAT STRIP ============== */
.revgenx-seo-page .stat-strip {
padding: 80px 32px;
background: var(--ink);
color: var(--cream);
border-top: 1px solid var(--ink);
border-bottom: 1px solid var(--ink);
}

.revgenx-seo-page .stat-strip-grid {
max-width: 1280px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 30px;
}

@media (max-width: 880px) {
.revgenx-seo-page .stat-strip-grid {
grid-template-columns: repeat(2, 1fr);
gap: 40px
}
}

.revgenx-seo-page .strip-stat {
text-align: center
}

.revgenx-seo-page .strip-stat .big {
font-family: "Roboto", Sans-serif;
font-size: clamp(54px, 7vw, 96px);
line-height: 1;
font-style: normal;
background: var(--p-grad);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
margin-bottom: 8px;
}

.revgenx-seo-page .strip-stat .lbl {
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--mist);
}

/* ============== RESULTS / CASE STUDIES ============== */
.revgenx-seo-page .results {
background: var(--cream);
border-bottom: 1px solid var(--line)
}

.revgenx-seo-page .results-head {
display: flex;
justify-content: space-between;
align-items: end;
gap: 40px;
flex-wrap: wrap;
margin-bottom: 60px;
}

.revgenx-seo-page .results-grid {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 16px;
}

.revgenx-seo-page .case-card {
position: relative;
padding: 32px 28px;
border-radius: 22px;
background: var(--paper);
border: 1px solid var(--line);
overflow: hidden;
transition: all .4s cubic-bezier(.2, .7, .2, 1);
min-height: 360px;
display: flex;
flex-direction: column;
justify-content: space-between;
}

.revgenx-seo-page .case-card.c1 {
grid-column: span 5;
background: linear-gradient(135deg, var(--paper) 0%, var(--mist-soft) 100%)
}

.revgenx-seo-page .case-card.c2 {
grid-column: span 4
}

.revgenx-seo-page .case-card.c3 {
grid-column: span 3
}

.revgenx-seo-page .case-card.c4 {
grid-column: span 4
}

.revgenx-seo-page .case-card.c5 {
grid-column: span 4;
background: var(--ink);
color: var(--cream);
border-color: var(--ink)
}

.revgenx-seo-page .case-card.c5 .industry {
color: var(--mist)
}

.revgenx-seo-page .case-card.c5 h4 {
color: var(--cream)
}

.revgenx-seo-page .case-card.c5 .metric-lbl {
color: rgba(245, 241, 232, 0.7)
}

.revgenx-seo-page .case-card.c6 {
grid-column: span 4
}

@media (max-width: 980px) {
.revgenx-seo-page .case-card {
grid-column: span 6 !important
}
}

@media (max-width: 640px) {
.revgenx-seo-page .case-card {
grid-column: span 12 !important
}
}

.revgenx-seo-page .case-card:hover {
transform: translateY(-8px);
border-color: var(--p1)
}

.revgenx-seo-page .case-card .industry {
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
color: var(--ink-soft);
letter-spacing: 0.18em;
text-transform: uppercase;
margin-bottom: 14px;
}

.revgenx-seo-page .case-card h4 {
font-family: "Roboto", Sans-serif;
font-weight: 400;
font-size: 30px;
line-height: 1.05;
letter-spacing: -0.01em;
margin-bottom: 18px;
color: var(--ink);
}

.revgenx-seo-page .case-card .metric {
font-family: "Roboto", Sans-serif;
font-size: 88px;
line-height: 0.9;
background: var(--p-grad);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
font-style: normal;
margin-bottom: 8px;
}

.revgenx-seo-page .case-card.c5 .metric {
color: var(--y);
background: none;
-webkit-text-fill-color: var(--y)
}

.revgenx-seo-page .case-card .metric-lbl {
font-size: 14px;
color: var(--ink-2);
line-height: 1.4;
max-width: 26ch;
}

.revgenx-seo-page .case-card .more {
margin-top: 20px;
display: inline-flex;
align-items: center;
gap: 6px;
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--ink-soft);
transition: gap .3s ease, color .3s ease;
}

.revgenx-seo-page .case-card:hover .more {
gap: 12px;
color: var(--p1)
}

.revgenx-seo-page .case-card.c5:hover .more {
color: var(--y)
}

/* ============== FAQ ============== */
.revgenx-seo-page .faq {
background: var(--paper);
border-top: 1px solid var(--line)
}

.revgenx-seo-page .faq-grid {
display: grid;
grid-template-columns: 1fr 1.6fr;
gap: 80px;
align-items: start
}

@media (max-width: 880px) {
.revgenx-seo-page .faq-grid {
grid-template-columns: 1fr;
gap: 40px
}
}

.revgenx-seo-page .faq-list {
display: flex;
flex-direction: column
}

.revgenx-seo-page .faq-item {
border-top: 1px solid var(--line)
}

.revgenx-seo-page .faq-item:last-child {
border-bottom: 1px solid var(--line)
}

.revgenx-seo-page .faq-q {
width: 100%;
background: transparent;
border: none;
color: var(--ink);
text-align: left;
padding: 28px 0;
display: flex;
justify-content: space-between;
align-items: center;
gap: 20px;
font-family: "Roboto", Sans-serif;
font-size: 22px;
font-weight: 400;
line-height: 1.2;
letter-spacing: -0.005em;
transition: color .25s ease;
}

.revgenx-seo-page .faq-q:hover {
color: var(--p1)
}

.revgenx-seo-page .faq-q .ic {
width: 32px;
height: 32px;
flex-shrink: 0;
border-radius: 50%;
border: 1px solid var(--line-2);
display: grid;
place-items: center;
transition: all .3s ease;
}

.revgenx-seo-page .faq-q .ic svg {
width: 14px;
height: 14px;
transition: transform .3s ease;
color: var(--ink)
}

.revgenx-seo-page .faq-item.open .faq-q .ic {
background: var(--p1);
border-color: var(--p1)
}

.revgenx-seo-page .faq-item.open .faq-q .ic svg {
transform: rotate(45deg);
color: white
}

.revgenx-seo-page .faq-a {
max-height: 0;
overflow: hidden;
transition: max-height .4s cubic-bezier(.2, .7, .2, 1)
}

.revgenx-seo-page .faq-a-inner {
padding: 0 0 28px;
color: var(--ink-2);
font-size: 15px;
line-height: 1.6;
max-width: 60ch;
}

.revgenx-seo-page .faq-item.open .faq-a {
max-height: 400px
}

/* ============== CTA ============== */
.revgenx-seo-page .cta {
background: var(--cream);
position: relative;
overflow: hidden;
padding: 140px 32px;
border-top: 1px solid var(--line);
}

.revgenx-seo-page .cta::before {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(600px 400px at 80% 30%, rgba(121, 95, 237, 0.12), transparent 60%),
radial-gradient(500px 400px at 20% 80%, rgba(106, 136, 244, 0.10), transparent 60%);
pointer-events: none;
}

.revgenx-seo-page .cta-inner {
max-width: 1100px;
margin: 0 auto;
position: relative;
z-index: 2;
text-align: center;
}

.revgenx-seo-page .cta-inner h2 {
font-family: "Roboto", Sans-serif;
font-weight: 400;
font-size: clamp(54px, 8vw, 130px);
line-height: 0.94;
letter-spacing: -0.025em;
margin-bottom: 32px;
color: var(--ink);
}

.revgenx-seo-page .cta-inner h2 .it {
font-style: normal;
font-variation-settings: "SOFT" 100, "WONK" 1;
background: var(--p-grad);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}

.revgenx-seo-page .cta-inner p {
font-size: 18px;
color: var(--ink-2);
max-width: 560px;
margin: 0 auto 44px;
line-height: 1.5;
}

/* ============== reveal animations ============== */
.revgenx-seo-page .reveal-up {
opacity: 0;
transform: translateY(40px);
transition: opacity .8s ease, transform .8s cubic-bezier(.2, .7, .2, 1)
}

.revgenx-seo-page .reveal-up.in {
opacity: 1;
transform: translateY(0)
}

.revgenx-seo-page .stagger>* {
opacity: 0;
transform: translateY(30px);
transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1)
}

.revgenx-seo-page .stagger.in>* {
opacity: 1;
transform: translateY(0)
}

.revgenx-seo-page .stagger.in>*:nth-child(1) {
transition-delay: .05s
}

.revgenx-seo-page .stagger.in>*:nth-child(2) {
transition-delay: .12s
}

.revgenx-seo-page .stagger.in>*:nth-child(3) {
transition-delay: .19s
}

.revgenx-seo-page .stagger.in>*:nth-child(4) {
transition-delay: .26s
}

.revgenx-seo-page .stagger.in>*:nth-child(5) {
transition-delay: .33s
}

.revgenx-seo-page .stagger.in>*:nth-child(6) {
transition-delay: .40s
}

.revgenx-seo-page .stagger.in>*:nth-child(7) {
transition-delay: .47s
}

@media (prefers-reduced-motion: reduce) {

*,
*::before,
.revgenx-seo-page *::after {
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
transition-duration: .01ms !important;
}
}

/* =========================================================
Elementor Pro compatibility layer
Paste this CSS in Elementor Page Settings > Advanced > Custom CSS,
or upload/enqueue this file for the page.
========================================================= */
.revgenx-seo-page {
width: 100%;
max-width: none;
overflow-x: clip;
isolation: isolate;
}

/* Make the first hero line up inside Elementor instead of needing body control. */
.revgenx-seo-page .hero {
margin-top: 0;
}

/* Helps prevent offscreen Elementor/widget rendering cost. */
.revgenx-seo-page section:not(.hero):not(.vr-journey),
.revgenx-seo-page .strip {
content-visibility: auto;
contain-intrinsic-size: 900px;
}

/* Avoid theme widget spacing around the HTML widget. */
.elementor-widget-html .revgenx-seo-page,
.elementor-widget-html .revgenx-seo-page * {
box-sizing: border-box;
}

@media (max-width: 767px) {
.revgenx-seo-page .vr-pin {
height: auto;
}
.revgenx-seo-page .vr-stage {
position: relative;
min-height: 760px;
height: auto;
padding: 90px 0;
}
}

@media (max-width: 767px) {
.revgenx-seo-page .vr-step-triggers { display: none; }
}


/* =========================================================
ELEMENTOR VERSION: VR JOURNEY AS 4 STACKED SECTIONS
This avoids sticky-stage scroll issues inside Elementor wrappers.
========================================================= */
.revgenx-seo-page .vr-journey-stacked {
padding: 0;
overflow: hidden;
background: var(--ink);
}

.revgenx-seo-page .vr-stack-stage {
position: relative;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 120px 32px;
overflow: hidden;
background:
radial-gradient(900px 600px at 78% 28%, rgba(121, 95, 237, 0.20), transparent 60%),
radial-gradient(700px 500px at 22% 78%, rgba(106, 136, 244, 0.14), transparent 60%),
var(--ink);
border-top: 1px solid rgba(255,255,255,0.06);
}

.revgenx-seo-page .vr-stack-stage:first-child {
border-top: 0;
}

.revgenx-seo-page .vr-stack-orb {
position: absolute;
left: 16%;
top: 50%;
width: clamp(420px, 58vw, 980px);
aspect-ratio: 1;
transform: translate(-22%, -50%);
border-radius: 50%;
background-image: radial-gradient(circle, rgba(155,123,255,.95) 1.4px, transparent 1.8px);
background-size: 15px 15px;
background-position: center;
opacity: .86;
filter: drop-shadow(0 0 70px rgba(121,95,237,.16));
-webkit-mask-image: radial-gradient(circle, #000 0 68%, transparent 69%);
mask-image: radial-gradient(circle, #000 0 68%, transparent 69%);
pointer-events: none;
z-index: 0;
}

.revgenx-seo-page .vr-stack-stage-2 .vr-stack-orb {
background-size: 18px 18px;
transform: translate(-22%, -50%) rotate(18deg) scale(.92);
}

.revgenx-seo-page .vr-stack-stage-3 .vr-stack-orb {
background-size: 20px 14px;
transform: translate(-22%, -50%) rotate(-12deg) scale(.88);
}

.revgenx-seo-page .vr-stack-stage-4 .vr-stack-orb {
background-image: radial-gradient(circle, rgba(242,242,83,.9) 1.2px, transparent 1.8px), radial-gradient(circle,
rgba(155,123,255,.75) 1.3px, transparent 1.9px);
background-size: 26px 26px, 15px 15px;
transform: translate(-22%, -50%) rotate(10deg) scale(.95);
}

.revgenx-seo-page .vr-journey-stacked .vr-fallback-ring {
left: 48%;
z-index: 1;
opacity: .75;
}

.revgenx-seo-page .vr-journey-stacked .vr-content-grid {
z-index: 4;
}

.revgenx-seo-page .vr-journey-stacked .vr-panel {
transform: none !important;
opacity: 1 !important;
}

.revgenx-seo-page .vr-stack-chip {
display: inline-flex !important;
}

.revgenx-seo-page .vr-stack-chip .fill {
display: block;
}

.revgenx-seo-page .vr-stack-dots .d {
cursor: default;
}

@media (max-width: 880px) {
.revgenx-seo-page .vr-stack-stage {
min-height: auto;
padding: 110px 20px;
}

.revgenx-seo-page .vr-stack-orb {
left: 50%;
top: 32%;
width: 780px;
max-width: 120vw;
opacity: .42;
transform: translate(-50%, -50%) scale(.82);
}

.revgenx-seo-page .vr-journey-stacked .vr-fallback-ring {
left: 50%;
top: 35%;
opacity: .45;
}

.revgenx-seo-page .vr-stack-chip {
right: 16px;
top: 20px;
}
}

@media (max-width: 640px) {
.revgenx-seo-page .vr-stack-stage {
padding: 96px 16px;
}

.revgenx-seo-page .vr-stack-orb {
width: 680px;
opacity: .32;
}

.revgenx-seo-page .vr-journey-stacked .vr-panel {
padding: 32px 24px;
}
}

/* =========================================================
Elementor VR auto carousel version
Replaces sticky / mouse-scroll dependent VR behavior.
========================================================= */
.revgenx-seo-page .vr-journey-carousel {
position: relative;
background: var(--ink);
color: var(--cream);
border-top: 1px solid var(--ink);
border-bottom: 1px solid var(--ink);
overflow: hidden;
padding: 0;
}

.revgenx-seo-page .vr-carousel-stage {
position: relative;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
padding: 120px 32px;
background:
radial-gradient(900px 600px at 78% 28%, rgba(121, 95, 237, 0.20), transparent 60%),
radial-gradient(700px 500px at 22% 78%, rgba(106, 136, 244, 0.14), transparent 60%),
var(--ink);
}

.revgenx-seo-page .vr-carousel-orb {
position: absolute;
left: 16%;
top: 50%;
width: clamp(420px, 58vw, 980px);
aspect-ratio: 1;
transform: translate(-22%, -50%);
border-radius: 50%;
background-image: radial-gradient(circle, rgba(155,123,255,.95) 1.4px, transparent 1.8px);
background-size: 15px 15px;
background-position: center;
opacity: .86;
filter: drop-shadow(0 0 70px rgba(121,95,237,.16));
-webkit-mask-image: radial-gradient(circle, #000 0 68%, transparent 69%);
mask-image: radial-gradient(circle, #000 0 68%, transparent 69%);
pointer-events: none;
z-index: 0;
animation: vrCarouselOrbDrift 14s ease-in-out infinite alternate;
}

@keyframes vrCarouselOrbDrift {
0% { transform: translate(-22%, -50%) rotate(0deg) scale(1); background-size: 15px 15px; }
33% { transform: translate(-22%, -50%) rotate(10deg) scale(.96); background-size: 18px 18px; }
66% { transform: translate(-22%, -50%) rotate(-8deg) scale(.9); background-size: 20px 14px; }
100% { transform: translate(-22%, -50%) rotate(12deg) scale(.95); background-size: 24px 24px; }
}

.revgenx-seo-page .vr-journey-carousel .vr-fallback-ring {
left: 48%;
z-index: 1;
opacity: .75;
}

.revgenx-seo-page .vr-carousel-slides {
position: relative;
z-index: 4;
width: 100%;
max-width: 1280px;
min-height: 440px;
}

.revgenx-seo-page .vr-carousel-slide {
position: absolute;
inset: 0;
width: 100%;
opacity: 0;
visibility: hidden;
pointer-events: none;
transform: translateY(28px) scale(.985);
transition: opacity .65s ease, transform .65s cubic-bezier(.2,.7,.2,1), visibility .65s ease;
}

.revgenx-seo-page .vr-carousel-slide.is-active {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translateY(0) scale(1);
}

.revgenx-seo-page .vr-journey-carousel .vr-content-grid {
position: relative;
z-index: 4;
width: 100%;
max-width: 1280px;
padding: 0;
}

.revgenx-seo-page .vr-journey-carousel .vr-panel {
transform: none !important;
opacity: 1 !important;
}

.revgenx-seo-page .vr-carousel-chip {
display: inline-flex !important;
}

.revgenx-seo-page .vr-carousel-chip .fill {
display: block;
width: 0%;
}

.revgenx-seo-page .vr-carousel-dots {
z-index: 8;
}

.revgenx-seo-page .vr-carousel-dots .d {
border: 0;
padding: 0;
cursor: pointer;
display: block;
}

.revgenx-seo-page .vr-carousel-dots .d:focus-visible,
.revgenx-seo-page .vr-carousel-arrow:focus-visible {
outline: 2px solid var(--y);
outline-offset: 5px;
}

.revgenx-seo-page .vr-carousel-arrow {
position: absolute;
top: 50%;
z-index: 9;
width: 46px;
height: 46px;
border-radius: 999px;
border: 1px solid rgba(255,255,255,.16);
background: rgba(27,29,46,.65);
color: var(--cream);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
font-size: 34px;
line-height: 1;
display: grid;
place-items: center;
transform: translateY(-50%);
transition: background .25s ease, transform .25s ease, border-color .25s ease;
}

.revgenx-seo-page .vr-carousel-arrow:hover {
background: rgba(121,95,237,.75);
border-color: var(--p1);
transform: translateY(-50%) scale(1.06);
}

.revgenx-seo-page .vr-carousel-prev { left: 28px; }
.revgenx-seo-page .vr-carousel-next { right: 28px; }

@media (max-width: 880px) {
.revgenx-seo-page .vr-carousel-stage {
min-height: auto;
padding: 110px 20px 120px;
}

.revgenx-seo-page .vr-carousel-orb {
left: 50%;
top: 32%;
width: 780px;
max-width: 120vw;
opacity: .42;
transform: translate(-50%, -50%) scale(.82);
}

.revgenx-seo-page .vr-journey-carousel .vr-fallback-ring {
left: 50%;
top: 35%;
opacity: .45;
}

.revgenx-seo-page .vr-carousel-slides {
min-height: 560px;
}

.revgenx-seo-page .vr-carousel-chip {
right: 16px;
top: 20px;
}

.revgenx-seo-page .vr-carousel-prev,
.revgenx-seo-page .vr-carousel-next {
top: auto;
bottom: 28px;
transform: none;
width: 42px;
height: 42px;
}

.revgenx-seo-page .vr-carousel-arrow:hover {
transform: scale(1.06);
}

.revgenx-seo-page .vr-carousel-prev { left: calc(50% - 52px); }
.revgenx-seo-page .vr-carousel-next { right: calc(50% - 52px); }
}

@media (max-width: 640px) {
.revgenx-seo-page .vr-carousel-stage {
padding: 96px 16px 118px;
}

.revgenx-seo-page .vr-carousel-orb {
width: 680px;
opacity: .32;
}

.revgenx-seo-page .vr-carousel-slides {
min-height: 620px;
}

.revgenx-seo-page .vr-journey-carousel .vr-panel {
padding: 32px 24px;
}
}


/* ===== VR carousel visual stage changes ===== */
.revgenx-seo-page .vr-carousel-orb {
transition: background-image .65s ease, background-size .65s ease, filter .65s ease, opacity .65s ease, transform .65s
ease;
}

.revgenx-seo-page .vr-carousel-orb::before,
.revgenx-seo-page .vr-carousel-orb::after {
content: "";
position: absolute;
inset: 10%;
border-radius: 50%;
border: 1px solid rgba(242,242,83,.10);
pointer-events: none;
}

.revgenx-seo-page .vr-carousel-orb::after {
inset: 24%;
border-style: dashed;
border-color: rgba(106,136,244,.18);
animation: vrFallbackSpin 22s linear infinite reverse;
}

.revgenx-seo-page .vr-journey-carousel[data-active-stage="1"] .vr-carousel-orb {
background-image: radial-gradient(circle, rgba(155,123,255,.95) 1.4px, transparent 1.8px);
background-size: 15px 15px;
filter: drop-shadow(0 0 70px rgba(121,95,237,.18));
}

.revgenx-seo-page .vr-journey-carousel[data-active-stage="2"] .vr-carousel-orb {
background-image:
linear-gradient(90deg, rgba(106,136,244,.22) 1px, transparent 1px),
linear-gradient(0deg, rgba(155,123,255,.28) 1px, transparent 1px),
radial-gradient(circle, rgba(249,248,113,.90) 1.2px, transparent 1.7px);
background-size: 42px 42px, 42px 42px, 18px 18px;
filter: drop-shadow(0 0 85px rgba(106,136,244,.22));
}

.revgenx-seo-page .vr-journey-carousel[data-active-stage="3"] .vr-carousel-orb {
background-image:
radial-gradient(circle at 30% 35%, rgba(242,242,83,.95) 1.8px, transparent 2.4px),
radial-gradient(circle, rgba(155,123,255,.75) 1.2px, transparent 1.8px);
background-size: 58px 58px, 14px 20px;
filter: drop-shadow(0 0 95px rgba(242,242,83,.13));
}

.revgenx-seo-page .vr-journey-carousel[data-active-stage="4"] .vr-carousel-orb {
background-image:
conic-gradient(from 90deg, rgba(242,242,83,.22), transparent 24%, rgba(106,136,244,.22), transparent 50%,
rgba(121,95,237,.22), transparent 76%, rgba(242,242,83,.22)),
radial-gradient(circle, rgba(155,123,255,.95) 1.4px, transparent 1.9px);
background-size: 100% 100%, 22px 22px;
filter: drop-shadow(0 0 110px rgba(121,95,237,.24));
}

.revgenx-seo-page .vr-carousel-visual-badge {
position: absolute;
left: 13%;
top: 25%;
z-index: 3;
padding: 10px 14px;
border-radius: 999px;
border: 1px solid rgba(255,255,255,.16);
background: rgba(27,29,46,.70);
color: var(--y);
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
font-weight: 600;
letter-spacing: .14em;
text-transform: uppercase;
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
pointer-events: none;
transition: opacity .45s ease, transform .45s ease;
}

.revgenx-seo-page .vr-carousel-area-map {
position: absolute;
left: 5%;
top: 50%;
width: clamp(340px, 38vw, 640px);
aspect-ratio: 1;
transform: translateY(-50%);
z-index: 3;
pointer-events: none;
}

.revgenx-seo-page .vr-area-node {
position: absolute;
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 82px;
height: 32px;
padding: 0 12px;
border-radius: 999px;
border: 1px solid rgba(255,255,255,.13);
background: rgba(255,255,255,.05);
color: rgba(245,241,232,.68);
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
letter-spacing: .08em;
text-transform: uppercase;
transition: background .45s ease, color .45s ease, transform .45s ease, box-shadow .45s ease, border-color .45s ease;
}

.revgenx-seo-page .vr-area-node[data-area="1"] { left: 12%; top: 20%; }
.revgenx-seo-page .vr-area-node[data-area="2"] { right: 8%; top: 34%; }
.revgenx-seo-page .vr-area-node[data-area="3"] { left: 22%; bottom: 20%; }
.revgenx-seo-page .vr-area-node[data-area="4"] { right: 14%; bottom: 28%; }

.revgenx-seo-page .vr-area-node.is-active {
background: var(--y);
color: var(--navy);
border-color: var(--y);
transform: scale(1.12);
box-shadow: 0 0 0 8px rgba(242,242,83,.12), 0 18px 40px -18px rgba(242,242,83,.45);
}

.revgenx-seo-page .vr-journey-carousel[data-active-stage="2"] .vr-carousel-area-map { transform: translateY(-50%)
rotate(4deg); }
.revgenx-seo-page .vr-journey-carousel[data-active-stage="3"] .vr-carousel-area-map { transform: translateY(-50%)
rotate(-4deg); }
.revgenx-seo-page .vr-journey-carousel[data-active-stage="4"] .vr-carousel-area-map { transform: translateY(-50%)
rotate(8deg); }

@media (max-width: 880px) {
.revgenx-seo-page .vr-carousel-visual-badge {
left: 20px;
top: 72px;
font-size: 10px;
}
.revgenx-seo-page .vr-carousel-area-map {
left: 50%;
top: 34%;
width: min(540px, 95vw);
opacity: .82;
transform: translate(-50%, -50%);
}
.revgenx-seo-page .vr-journey-carousel[data-active-stage="2"] .vr-carousel-area-map,
.revgenx-seo-page .vr-journey-carousel[data-active-stage="3"] .vr-carousel-area-map,
.revgenx-seo-page .vr-journey-carousel[data-active-stage="4"] .vr-carousel-area-map {
transform: translate(-50%, -50%);
}
}

@media (max-width: 640px) {
.revgenx-seo-page .vr-carousel-area-map {
display: none;
}
}

/* ============== STAGE 1-4 MOVING 3D MODULE CAROUSEL ============== */
.revgenx-stage-only,
.revgenx-stage-only * {
box-sizing: border-box;
}

.revgenx-stage-only {
--p1: #795FED;
--p2: #6A88F4;
--ink: #1B1D2E;
--cream: #F5F1E8;
--y: #F2F253;
--mist: #B0CBD2;
--p-grad: linear-gradient(135deg, #6A88F4 0%, #795FED 60%, #9B7BFF 100%);
font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.revgenx-stage-only .rgx-vr-carousel {
position: relative;
overflow: hidden;
min-height: 760px;
padding: clamp(72px, 8vw, 120px) 32px;
color: var(--cream);
background: var(--ink);
border-top: 1px solid var(--ink);
border-bottom: 1px solid var(--ink);
}

.revgenx-stage-only .rgx-vr-bg {
position: absolute;
inset: 0;
pointer-events: none;
background:
radial-gradient(900px 600px at 76% 26%, rgba(121, 95, 237, 0.22), transparent 60%),
radial-gradient(700px 500px at 22% 78%, rgba(106, 136, 244, 0.15), transparent 60%),
radial-gradient(circle at 50% 50%, rgba(242, 242, 83, 0.04), transparent 38%);
}

.revgenx-stage-only .rgx-vr-shell {
position: relative;
z-index: 2;
width: min(1280px, 100%);
margin: 0 auto;
display: grid;
grid-template-columns: minmax(360px, 1.1fr) minmax(360px, 0.9fr);
gap: clamp(36px, 6vw, 72px);
align-items: center;
}

.revgenx-stage-only .rgx-vr-visual {
position: relative;
min-height: clamp(420px, 52vw, 650px);
border-radius: 34px;
overflow: hidden;
background: radial-gradient(circle at 50% 50%, rgba(255,255,255,0.05), transparent 62%);
}

.revgenx-stage-only .rgx-vr-canvas {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
z-index: 2;
display: block;
}

.revgenx-stage-only .rgx-vr-fallback-ring {
position: absolute;
top: 50%;
left: 50%;
width: clamp(280px, 34vw, 520px);
aspect-ratio: 1;
transform: translate(-50%, -50%);
border-radius: 50%;
border: 1px dashed rgba(155, 123, 255, 0.22);
animation: rgxSpin 30s linear infinite;
z-index: 1;
}

.revgenx-stage-only .rgx-vr-fallback-ring::before,
.revgenx-stage-only .rgx-vr-fallback-ring::after {
content: "";
position: absolute;
border-radius: 50%;
pointer-events: none;
}

.revgenx-stage-only .rgx-vr-fallback-ring::before {
inset: 14%;
border: 1px solid rgba(106, 136, 244, 0.16);
}

.revgenx-stage-only .rgx-vr-fallback-ring::after {
inset: 32%;
border: 1px dashed rgba(242, 242, 83, 0.16);
animation: rgxSpinInner 18s linear infinite reverse;
}

.revgenx-stage-only .rgx-vr-visual-label {
position: absolute;
left: 50%;
bottom: 26px;
transform: translateX(-50%);
z-index: 3;
padding: 10px 16px;
border: 1px solid rgba(255,255,255,0.14);
border-radius: 999px;
background: rgba(27, 29, 46, 0.72);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
color: var(--y);
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
white-space: nowrap;
}

.revgenx-stage-only .rgx-vr-panel {
position: relative;
padding: clamp(30px, 4vw, 44px) clamp(26px, 4vw, 40px);
border: 1px solid rgba(255, 255, 255, 0.14);
border-radius: 28px;
background: rgba(255, 255, 255, 0.055);
backdrop-filter: blur(20px) saturate(140%);
-webkit-backdrop-filter: blur(20px) saturate(140%);
box-shadow: 0 32px 90px rgba(0,0,0,0.22);
transition: opacity .35s ease, transform .35s ease;
}

.revgenx-stage-only .rgx-vr-panel.is-changing {
opacity: 0.52;
transform: translateY(14px);
}

.revgenx-stage-only .rgx-vr-panel::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, var(--p1), var(--y));
}

.revgenx-stage-only .rgx-vr-kicker {
margin-bottom: 16px;
color: var(--y);
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.2em;
text-transform: uppercase;
}

.revgenx-stage-only .rgx-vr-panel h3 {
margin: 0 0 18px;
color: var(--cream);
font-family: 'Fraunces', Georgia, serif;
font-size: clamp(34px, 4.2vw, 58px);
font-weight: 400;
line-height: 1.02;
letter-spacing: -0.025em;
}

.revgenx-stage-only .rgx-vr-panel h3 .it {
font-style: normal;
background: linear-gradient(135deg, #9B7BFF 0%, #F9F871 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}

.revgenx-stage-only .rgx-vr-panel p {
margin: 0 0 24px;
color: rgba(245, 241, 232, 0.78);
font-size: 16px;
line-height: 1.65;
}

.revgenx-stage-only .rgx-vr-tags {
display: flex;
flex-wrap: wrap;
gap: 7px;
min-height: 32px;
}

.revgenx-stage-only .rgx-vr-tags span {
display: inline-flex;
align-items: center;
padding: 6px 11px;
border: 1px solid rgba(255,255,255,0.12);
border-radius: 999px;
background: rgba(255,255,255,0.075);
color: rgba(245, 241, 232, 0.92);
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
letter-spacing: 0.05em;
}

.revgenx-stage-only .rgx-vr-controls {
display: flex;
align-items: center;
gap: 14px;
margin-top: 32px;
}

.revgenx-stage-only .rgx-vr-arrow {
width: 42px;
height: 42px;
border: 1px solid rgba(255,255,255,0.16);
border-radius: 999px;
background: rgba(255,255,255,0.06);
color: var(--cream);
font-size: 28px;
line-height: 1;
cursor: pointer;
transition: transform .25s ease, background .25s ease, border-color .25s ease;
}

.revgenx-stage-only .rgx-vr-arrow:hover,
.revgenx-stage-only .rgx-vr-arrow:focus {
transform: translateY(-2px);
background: rgba(121, 95, 237, 0.22);
border-color: var(--p1);
outline: none;
}

.revgenx-stage-only .rgx-vr-dots {
display: flex;
gap: 10px;
align-items: center;
}

.revgenx-stage-only .rgx-vr-dots button {
width: 10px;
height: 10px;
padding: 0;
border: none;
border-radius: 50%;
background: rgba(255,255,255,0.25);
cursor: pointer;
transition: transform .25s ease, background .25s ease, box-shadow .25s ease;
}

.revgenx-stage-only .rgx-vr-dots button.on {
background: var(--y);
transform: scale(1.45);
box-shadow: 0 0 0 6px rgba(242,242,83,0.18);
}

.revgenx-stage-only .rgx-vr-progress {
position: relative;
width: 100%;
height: 3px;
margin-top: 26px;
overflow: hidden;
border-radius: 999px;
background: rgba(255,255,255,0.14);
}

.revgenx-stage-only .rgx-vr-progress span {
display: block;
width: 0;
height: 100%;
border-radius: inherit;
background: linear-gradient(90deg, var(--p1), var(--y));
}

@keyframes rgxSpin {
to { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes rgxSpinInner {
to { transform: rotate(360deg); }
}

@media (max-width: 900px) {
.revgenx-stage-only .rgx-vr-carousel {
min-height: auto;
padding: 72px 18px;
}

.revgenx-stage-only .rgx-vr-shell {
grid-template-columns: 1fr;
gap: 28px;
}

.revgenx-stage-only .rgx-vr-visual {
min-height: 380px;
}
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-91e7a84 */.elementor-7629 .elementor-element.elementor-element-91e7a84{
    background: radial-gradient(900px 600px at 80% 20%, rgba(106, 136, 244, 0.08), transparent 60%), radial-gradient(700px 500px at 20% 80%, rgba(176, 203, 210, 0.25), transparent 60%), var(--cream);
}/* End custom CSS */