/* ============================================================
lumenore-insights-new.css
Standalone stylesheet for lumenore-insights-new.html — a full
redesign/rewrite of the Lumenore Insights product page. This file
is a NEW, independent bundle: it does NOT modify or get loaded by
the original lumenore-insights.html (that page keeps using
insights-bundle.css, untouched).
Base layer below (through the responsive breakpoints) is carried
over from insights-bundle.css verbatim, since it defines the
site's shared dark-canvas mechanics that this new page still
needs: :root design tokens, body background, hero-stage/hero-orbs/
hero-particles, trusted-logo marquee, buttons, and the .reveal
scroll-in animation system. Every section-specific rule for THIS
page's own content (Challenge, One Platform, Build & Explore, AI
Intelligence, Share & Collaborate, Mid-Page CTA, Enterprise-Grade,
Business Impact, Capabilities, Team Persona, Customer Impact,
Product CTAs, FAQ, Bottom CTA) is new and lives in the
"LUMENORE INSIGHTS — NEW PAGE SECTIONS" block appended at the end
of this file, styled per Figma (UwNoD3i1IN0dtK5sJStZBJ, node
3294:36232) using this site's own color/spacing/font tokens rather
than Figma's raw pixel values.
============================================================ */
/* ── 1. index.css ─────────────────────────────────────────── */
/* ===========================================================
* Lumenore — Homepage v2 (Figma: 994-29782)
* Built on the same architecture as v2o/home.css. Token names
* mirror the existing Figma-export pattern (var(--Name, #hex)),
* values come from the Lumenore-New design variables.
* ----------------------------------------------------------- */
:root{
/* ---- Royal Blue ramp ---- */
--Royal-Blue-Blue-50: #e7eef8;
--Royal-Blue-Blue-150: #b8d0fd;
--Royal-Blue-Blue-200: #9fbae4;
--Royal-Blue-Blue-350: #5886d0;
--Royal-Blue-Blue-400: #4075c9;
--Royal-Blue-Blue-450: #2863c3;
--Royal-Blue-Blue-500: #0e48a5;
--Royal-Blue-Blue-550: #0c3b87;
--Royal-Blue-Blue-600: #0a3578;
--Royal-Blue-Blue-750: #07214b;
--Royal-Blue-Blue-850: #051A3C;
--Royal-Blue-Blue-900: #051A3C;
--Penn-Blue: #001040;
--Absolute-Black: #212121;
--Base-White: #fcfcfc;
/* ---- Violet ramp ---- */
--Violet-Violet-50: #f0ebf7;
--Violet-Violet-250: #b499d7;
--Violet-Violet-450: #7747b6;
--Violet-Violet-500: #55298e;
--Violet-Violet-550: #4d2580;
/* ---- Sky Blue / Turquoise ---- */
--SkyBlue-SkyBlue-50: #e7f8fe;
--SkyBlue-SkyBlue-500: #12b6f8;
--Turquoise-SkyBlue-50: #e8f6fa;
--Turquoise-SkyBlue-500: #1ca9c9;
/* ---- Neutrals ---- */
--Grey-Grey-100: #fbfbfb;
--Grey-Grey-200: #f7f7f7;
--Grey-Grey-600: #bbbbbb;
--Grey-Grey-700: #8c8c8c;
--Grey-Grey-800: #5e5e5e;
--Grey-Grey-900: #2f2f2f;
--Map-Grey: #eaeaea;
--blueGray-50: #F8FAFC;
--blueGray-200: #E2E8F0;
--blueGray-400: #94A3B8;
--blueGray-500: #64748B;
--blueGray-600: #475569;
--blueGray-700: #334155;
/* Cool greys used in dashboard mock */
--cool-101828: #101828;
--cool-99a1af: #99a1af;
--cool-6a7282: #6a7282;
--cool-e5e7eb: #e5e7eb;
--cool-f9fafb: #f9fafb;
--cool-d1d5dc: #d1d5dc;
/* ---- Gradients (exact Figma) ---- */
--AI-Agents-Text: linear-gradient(83.02deg, #4AE7FF 51.42%, #4075C9 63.25%, #E879F9 76.03%);
--Search-Glow: linear-gradient(86.83deg, #22d3ee 0.77%, #3b82f6 50%, #e879f9 99.23%);
--Explore-Button: linear-gradient(270deg, #7747b6 0%, #4075c9 50.7%, #1ca9c9 100%);
--Compare-Button: linear-gradient(270deg, #7747b6 0%, #4075c9 50.7%, #1ca9c9 100%);
--Tab-Bar-Bg: linear-gradient(165.59deg, #ffffff 2.41%, #eef4ff 100.51%);
--Active-Tab-Bg: linear-gradient(157.45deg, #e9eff8 2.41%, #d9e3f5 100.51%);
/* ---- Effects ---- */
--Card-Shadow: 0 4px 14px 0 rgba(0, 0, 0, 0.25);
--Card-Shadow-Soft: 0 2px 6px rgba(0, 0, 0, 0.08);
--Tab-Active-Shadow: 0 10px 15px 0 rgba(0,0,0,.1), 0 4px 6px 0 rgba(0,0,0,.1);
--Dash-Card-Shadow: 0 20px 25px -5px rgba(16,24,40,.05), 0 8px 10px -6px rgba(16,24,40,.05);
}
/* ===========================================================
* Base reset + typography
* ----------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
/* overflow-x: clip (not hidden) — clips horizontal overflow WITHOUT
promoting html/body to a scroll container. Critical for
.products-sticky (position: sticky), which silently breaks if
html/body becomes the scroll container (overflow-x: hidden makes
overflow-y compute to auto). `clip` does not alter overflow-y. */
html{ overflow-x: clip; }
body{
margin: 0;
padding: 0;
overflow-x: clip;
font-family: 'Inter', sans-serif;
color: var(--Base-White, #fcfcfc);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
position: relative;
/* Figma full-page background — navy at top, violet glow at bottom.
Bottom matches Rectangle 1265: violet-500 #55298e → #031430 → #051A3C */
background-color: var(--Royal-Blue-Blue-900, #051A3C);
background-image:
/* Center-top cyan glow (matches hero's mix-blend-plus-lighter ellipse) */
radial-gradient(ellipse 1000px 520px at 50% 240px,
rgba(28, 169, 201, .16) 0%,
rgba(40, 99, 195, .08) 42%,
transparent 72%),
/* Upper-left fuchsia hint */
radial-gradient(ellipse 700px 600px at 16% 6%,
rgba(232, 121, 249, .05) 0%,
transparent 62%),
/* Upper-right blue hint */
radial-gradient(ellipse 800px 700px at 84% 5%,
rgba(64, 117, 201, .07) 0%,
transparent 62%),
/* Bottom violet glow (trust + CTA + footer block) */
radial-gradient(ellipse 1500px 1100px at 50% 86%,
rgba(85, 41, 142, .55) 0%,
rgba(85, 41, 142, .22) 34%,
transparent 62%),
/* Main vertical depth gradient through the full page */
linear-gradient(180deg,
var(--Royal-Blue-Blue-900, #051A3C) 0%,
var(--Royal-Blue-Blue-850, #051A3C) 7%,
var(--Royal-Blue-Blue-900, #051A3C) 46%,
var(--Royal-Blue-Blue-900, #051A3C) 74%,
var(--Royal-Blue-Blue-850, #051A3C) 88%,
#051A3C 100%);
}
/* Unified page-wide grain texture overlay (matches Figma "grain" frames at 6% opacity) */
body::before{
content: "";
position: fixed;
inset: 0;
background-image:
radial-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
radial-gradient(rgba(255, 255, 255, .025) 1px, transparent 1px);
background-size: 3px 3px, 7px 7px;
background-position: 0 0, 1px 2px;
pointer-events: none;
z-index: 1;
opacity: .65;
}
h1, h2, h3, h4{
font-family: 'Space Grotesk', sans-serif;
font-weight: 300;
color: var(--cool-101828, #101828);
margin: 0;
font-variation-settings: 'SOFT' 0, 'WONK' 1;
}
h5, h6, p, a, li, button, input{
font-family: 'Inter', sans-serif;
margin: 0;
}
ul{ margin: 0; padding: 0; list-style: none; }
img{ max-width: 100%; }
a{ color: inherit; text-decoration: none; }
.container{
width: 100%;
max-width: 1500px;
margin: 0 auto;
padding: 0 32px;
}
/* Bootstrap-style 1320px ladder — matches index.html / final-home-bundle */
.hero-bg-page .container {
width: 100%; max-width: 100%;
margin-right: auto; margin-left: auto;
padding-right: 1rem; padding-left: 1rem;
}
@media (min-width: 576px) { .hero-bg-page .container { max-width: 540px; } }
@media (min-width: 768px) { .hero-bg-page .container { max-width: 720px; } }
@media (min-width: 992px) { .hero-bg-page .container { max-width: 960px; } }
@media (min-width: 1200px) { .hero-bg-page .container { max-width: 1140px; } }
@media (min-width: 1400px) { .hero-bg-page .container { max-width: 1320px; } }
/* ===========================================================
* Site header — hello bar + nav bar (Figma 994:29783)
* ----------------------------------------------------------- */
.site-top{
position: sticky;
top: 0;
z-index: 200;
border-bottom: 1px solid rgba(252, 252, 252, .2);
}
/* ── Hello bar ────────────────────────────────────────────── */
.hello-bar{
background: var(--Royal-Blue-Blue-750, #07214b);
border-bottom: 1px solid rgba(252, 252, 252, .2);
padding: 10px 48px 11px;
display: flex;
align-items: center;
gap: 10px;
}
.hello-bar .hello-left{
flex: 1;
display: flex;
align-items: center;
gap: 20px;
min-width: 0;
}
.hello-bar .hello-badge{
background: var(--Base-White, #fcfcfc);
color: var(--Royal-Blue-Blue-500, #0e48a5);
font-family: 'Inter', sans-serif;
font-weight: 700;
font-size: 14px;
line-height: 16px;
padding: 4px 10px;
border-radius: 4px;
white-space: nowrap;
}
.hello-bar .hello-message{
color: rgba(255, 255, 255, .8);
font-family: 'Inter', sans-serif;
font-weight: 400;
font-size: 14px;
line-height: 16px;
white-space: nowrap;
}
.hello-bar .hello-cta{
display: inline-flex;
align-items: center;
gap: 6px;
color: var(--Base-White, #fcfcfc);
font-family: 'Inter', sans-serif;
font-size: 14px;
line-height: 16px;
text-decoration: underline;
text-underline-position: from-font;
text-decoration-thickness: 1px;
white-space: nowrap;
}
.hello-bar .hello-cta:hover{ color: var(--SkyBlue-SkyBlue-500, #12b6f8); }
.hello-bar .hello-cta svg{ width: 14px; height: 14px; }
.hello-bar .hello-login{
color: rgba(255, 255, 255, .9);
font-family: 'Inter', sans-serif;
font-weight: 700;
font-size: 15px;
line-height: 25px;
padding: 8px 0 8px 16px;
margin-left: 8px;
border-left: 1px solid rgba(255, 255, 255, .18);
white-space: nowrap;
}
.hello-bar .hello-login:hover{ color: var(--SkyBlue-SkyBlue-500, #12b6f8); }
.hello-bar .hello-consult{
color: rgba(255, 255, 255, .9);
font-family: 'Inter', sans-serif;
font-weight: 700;
font-size: 15px;
line-height: 25px;
padding: 8px 0;
white-space: nowrap;
}
.hello-bar .hello-consult:hover{ color: var(--SkyBlue-SkyBlue-500, #12b6f8); }
/* ── Main nav bar ─────────────────────────────────────────── */
.site-header{
position: relative;
z-index: 20;
background: var(--Royal-Blue-Blue-900, #051A3C);
border-bottom: 1px solid rgba(255, 255, 255, .1);
height: 81px;
padding: 20px 48px 21px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
}
/* Logo: L + UMENORE wordmark + AI superscript */
.site-header .brand-mark{
display: inline-flex;
align-items: center;
height: 44px;
color: var(--Base-White, #fcfcfc);
text-decoration: none;
}
.site-header .brand-mark .brand-l{
font-family: 'Space Grotesk', sans-serif;
font-weight: 500;
font-size: 30px;
line-height: 30px;
color: var(--SkyBlue-SkyBlue-500, #12b6f8);
margin-right: 2px;
}
.site-header .brand-mark .brand-word{
font-family: 'Space Grotesk', sans-serif;
font-weight: 400;
font-size: 17px;
letter-spacing: .12em;
color: var(--Base-White, #fcfcfc);
position: relative;
top: 2px;
}
.site-header .brand-mark .brand-ai{
font-family: 'Inter', sans-serif;
font-weight: 700;
font-size: 10px;
line-height: 1;
color: var(--SkyBlue-SkyBlue-500, #12b6f8);
margin-left: 4px;
align-self: flex-start;
margin-top: 2px;
}
/* Nav links with dropdown arrows */
.site-header .nav-links{
display: flex;
gap: 32px;
align-items: center;
}
.site-header .nav-links > li > a{
display: inline-flex;
align-items: center;
gap: 6px;
color: rgba(255, 255, 255, .9);
font-family: 'Inter', sans-serif;
font-weight: 400;
font-size: 15px;
line-height: 26px;
white-space: nowrap;
cursor: pointer;
}
.site-header .nav-links > li > a:hover{ color: var(--SkyBlue-SkyBlue-500, #12b6f8); }
.site-header .nav-links > li > a .caret{
width: 8px;
height: 4px;
flex: 0 0 8px;
}
.site-header .nav-links > li > a .nav-ai-icon{
width: 15px;
height: 14px;
flex: 0 0 15px;
}
/* Header CTA buttons */
.site-header .nav-actions{
display: flex;
align-items: center;
gap: 12px;
}
.site-header .btn-demo{
background:
linear-gradient(var(--Royal-Blue-Blue-900, #051A3C), var(--Royal-Blue-Blue-900, #051A3C)) padding-box,
var(--Explore-Button) border-box;
border: 2px solid transparent;
color: var(--Base-White, #fcfcfc);
font-family: 'Inter', sans-serif;
font-weight: 700;
font-size: 13.5px;
line-height: 1.2;
padding: 8px 18px;
border-radius: 6px;
cursor: pointer;
transition:
transform .22s cubic-bezier(.22, .61, .36, 1),
box-shadow .22s cubic-bezier(.22, .61, .36, 1),
background .22s ease;
white-space: nowrap;
}
.site-header .btn-demo:hover{
background:
linear-gradient(rgba(255,255,255,.07), rgba(255,255,255,.07)) padding-box,
var(--Explore-Button) border-box;
transform: translateY(-1px);
box-shadow:
0 8px 24px -8px rgba(64, 117, 201, .55),
0 2px 10px -2px rgba(119, 71, 182, .4);
}
.site-header .btn-start{
background: var(--Explore-Button);
color: var(--Base-White, #fcfcfc);
font-family: 'Inter', sans-serif;
font-weight: 700;
font-size: 15px;
line-height: 25px;
padding: 8px 16px;
border-radius: 8px;
border: none;
cursor: pointer;
white-space: nowrap;
transition: filter .25s ease;
}
.site-header .btn-start:hover{ filter: brightness(1.1); }
/* ===========================================================
* Section: Hero (Figma 994:29786)
* ----------------------------------------------------------- */
.hero-section{
position: relative;
background: var(--Royal-Blue-Blue-900, #051A3C);
overflow: hidden;
color: var(--Base-White, #fcfcfc);
}
.hero-section .container{
position: relative;
z-index: 2;
}
.hero-content{
max-width: 960px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 32px;
align-items: center;
}
.hero-section h1{
font-size: 56px;
line-height: 64px;
letter-spacing: -0.8px;
color: var(--Base-White, #fcfcfc);
font-weight: 300;
}
.hero-section h1 .ai-agents-gradient{
background: var(--AI-Agents-Text);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
font-weight: 400;
}
.hero-section .hero-sub{
color: var(--Base-White, #fcfcfc);
font-size: 20px;
line-height: 30px;
font-weight: 400;
max-width: 760px;
margin: 0 auto;
}
/* Hero search ── two layers: outer glass + inner cyan-bordered box */
.hero-search-wrap{
position: relative;
width: 800px;
max-width: 100%;
margin: 0 auto;
}
.hero-search-glow{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 652px;
height: 186px;
border-radius: 350px;
background: var(--Search-Glow);
opacity: .3;
filter: blur(125px);
pointer-events: none;
}
.hero-search{
position: relative;
background: rgba(255, 255, 255, .1);
border: 1px solid rgba(255, 255, 255, .2);
border-radius: 12px;
padding: 12px;
display: flex;
flex-direction: column;
gap: 8px;
/* Motion DNA mirroring .scene-card.sc-1 from the persona section:
① transform → mouse parallax (CSS-var driven by JS wireParallax on
#heroSearchWrap), composed at slightly damped amplitudes since
this card is larger than the persona scene-card.
② translate (independent property) → idle ±8px Y-float, 6.5s
ease-in-out alternate loop (heroFloat).
③ scale (independent property) → reserved for hover lift.
Three properties stay separate so they NEVER fight each other. */
transform: translate3d(calc(var(--mx, 0) * 6px), calc(var(--my, 0) * 4px), 0);
transition: transform .25s ease-out, box-shadow .4s ease;
animation:
heroSearchReveal .65s cubic-bezier(.22, .61, .36, 1) .10s backwards,
heroFloat 6.5s ease-in-out 1.0s infinite alternate;
will-change: transform, translate;
box-shadow:
0 1px 3px rgba(16, 24, 40, .06),
0 24px 48px -20px rgba(14, 72, 165, .22),
0 12px 24px -16px rgba(85, 41, 142, .10),
inset 0 1px 0 rgba(255, 255, 255, .12);
}
.hero-search-wrap:hover .hero-search{
scale: 1.005;
box-shadow:
0 1px 3px rgba(16, 24, 40, .08),
0 32px 64px -22px rgba(14, 72, 165, .32),
0 18px 36px -16px rgba(85, 41, 142, .18),
inset 0 1px 0 rgba(255, 255, 255, .18);
}
/* One-shot reveal — slide + scale + fade (same recipe as scReveal) */
@keyframes heroSearchReveal{
from{ opacity: 0; transform: translate3d(0, 22px, 0) scale(.97); }
to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}
/* Idle Y-float using `translate` so it composes with the parallax transform.
Same ±8px amplitude / 6.5s cadence as .scene-card.sc-1 (scFloat1). */
@keyframes heroFloat{
0% { translate: 0 -8px; }
100% { translate: 0 8px; }
}
@media (prefers-reduced-motion: reduce){
.hero-search{ animation: none; transform: none; }
.hero-search-wrap:hover .hero-search{ scale: 1; }
}
.hero-search-inner{
background: rgba(15, 23, 42, .7);
border: 1.666px solid var(--Turquoise-SkyBlue-500, #1ca9c9);
border-radius: 8.884px;
padding: 13.325px 13.325px 11.104px;
display: flex;
flex-direction: column;
justify-content: space-between;
min-height: 153.241px;
text-align: left;
}
.hero-search-inner .placeholder-text{
font-size: 14px;
line-height: 1.3;
color: var(--blueGray-200, #E2E8F0);
letter-spacing: -.28px;
/* Reserve a baseline so the inner panel doesn't reflow as characters land */
min-height: 1.3em;
}
/* Blinking caret — pseudo element after the typed text. JS toggles
.is-typing on the host while characters are streaming, and a separate
.is-done state once typing finishes (caret keeps blinking). */
.hero-search-inner .placeholder-text::after{
content: "";
display: inline-block;
width: 2px;
height: 1.05em;
margin-left: 3px;
vertical-align: -2px;
background: var(--Turquoise-SkyBlue-500, #1ca9c9);
border-radius: 1px;
animation: heroCaretBlink 1s steps(1, end) infinite;
opacity: 0;
transition: opacity .15s ease;
}
.hero-search-inner .placeholder-text.is-typing::after,
.hero-search-inner .placeholder-text.is-done::after{
opacity: 1;
}
/* While actively streaming we hold the caret solid (no blink) so it
reads as a moving insertion point; on .is-done it returns to blink. */
.hero-search-inner .placeholder-text.is-typing::after{
animation: none;
}
@keyframes heroCaretBlink{
0%, 50% { opacity: 1; }
50.01%, 100% { opacity: 0; }
}
/* Tag chip hover + active polish — matches Figma royal-blue chip (#2863c3) */
.hero-search-tag{
transition:
background .25s cubic-bezier(.22, .61, .36, 1),
border-color .25s cubic-bezier(.22, .61, .36, 1),
color .25s ease,
transform .2s ease;
}
.hero-search-tag:hover{
background: rgba(255, 255, 255, .14);
border-color: rgba(255, 255, 255, .28);
color: #fff;
}
.hero-search-tag.is-active:hover{
background: var(--Royal-Blue-Blue-450, #2863c3);
transform: translateY(-1px);
}
.hero-search-tag.is-active{
box-shadow: 0 6px 16px -8px rgba(40, 99, 195, .55);
}
@media (prefers-reduced-motion: reduce){
.hero-search-inner .placeholder-text{ transition: none; }
.hero-search-inner .placeholder-text::after{ animation: none; opacity: 0; }
.hero-search-tag{ transition: none; }
}
.hero-search-inner .input-row{
display: flex;
align-items: center;
gap: 6.663px;
width: 100%;
}
.hero-search-inner .icon-btn{
width: 35.534px;
height: 35.534px;
border-radius: 200px;
background: var(--blueGray-700, #334155);
border: none;
color: var(--Base-White, #fcfcfc);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.hero-search-inner .tools-btn{
height: 35.534px;
padding: 0 16px 0 12px;
border-radius: 50px;
background: var(--blueGray-700, #334155);
border: none;
color: var(--Base-White, #fcfcfc);
display: inline-flex;
align-items: center;
gap: 4.442px;
font-size: 13.33px;
font-weight: 400;
line-height: 1.3;
cursor: pointer;
letter-spacing: -.27px;
}
.hero-search-inner .tools-btn svg{ width: 18px; height: 18px; }
.hero-search-inner .spacer{ flex: 1; }
.hero-search-inner .explore-btn{
background: var(--Explore-Button);
color: var(--Base-White, #fcfcfc);
border: none;
border-radius: 8px;
padding: 8px 16px;
display: inline-flex;
align-items: center;
gap: 10px;
font-size: 15px;
font-weight: 700;
line-height: 25px;
cursor: pointer;
}
.hero-search-inner .explore-btn svg{ width: 18px; height: 18px; }
/* Tag chips inside search card */
.hero-search-tags{
display: flex;
gap: 10px;
padding: 4px 0 10px;
}
.hero-search-tag{
height: 28px;
padding: 6px 16px;
border-radius: 50px;
background: rgba(255, 255, 255, .08);
border: 1px solid var(--Grey-Grey-800, #5e5e5e);
color: var(--Grey-Grey-100, #fbfbfb);
font-size: 12px;
line-height: 16px;
font-weight: 400;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.hero-search-tag.is-active{
background: var(--Royal-Blue-Blue-450, #2863c3);
border-color: transparent;
color: var(--Base-White, #fcfcfc);
}
/* Footer of hero search: 100+ sources + overlap icons */
.hero-search-footer{
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 2.221px;
}
.hero-search-footer .src-label{
display: inline-flex;
align-items: center;
gap: 6.663px;
font-size: 13.325px;
line-height: 1.3;
color: var(--Base-White, #fcfcfc);
letter-spacing: -.27px;
}
.hero-search-footer .src-label svg{ width: 20px; height: 20px; }
.hero-search-footer .src-stack{
display: flex;
align-items: center;
}
.hero-search-footer .src-stack .src-bubble{
width: 28.872px;
height: 28.872px;
border-radius: 80.199px;
background: var(--blueGray-600, #475569);
border: 0.802px solid var(--blueGray-400, #94A3B8);
display: inline-flex;
align-items: center;
justify-content: center;
margin-right: -4.812px;
color: var(--Base-White, #fcfcfc);
font-size: 9px;
font-weight: 600;
overflow: hidden;
}
.hero-search-footer .src-stack .src-bubble:last-child{ margin-right: 0; }
.hero-search-footer .src-stack .src-bubble svg{ width: 16px; height: 16px; }
/* ===========================================================
* Section: Trusted / Logos (dark, matches page background)
* ----------------------------------------------------------- */
.trusted-section{
background: #051A3C;
padding: 65px 0;
text-align: center;
position: relative;
z-index: 2;
}
.trusted-section h2{
/* Canonical sitewide H2 — Space Grotesk 300 / 44px / 54px / -0.6px tracking.
Same scale used by features/personas/pricing/success/testimonial. */
font-family: 'Space Grotesk', sans-serif;
font-weight: 300;
font-size: 44px;
line-height: 54px;
letter-spacing: -.6px;
color: var(--Base-White, #fcfcfc);
text-align: center;
margin: 0 auto 50px;
max-width: 920px;
}
.logo-slider{
overflow: hidden;
position: relative;
white-space: nowrap;
width: 100%;
}
.logo-track{
display: inline-flex;
align-items: center;
animation: scroll-left 50s linear infinite;
}
.logo-track > div{
flex: 0 0 auto;
margin: 0 56px;
display: flex;
align-items: center;
justify-content: center;
}
.logo-track img{
max-height: 52px;
max-width: 180px;
height: auto;
width: auto;
object-fit: contain;
vertical-align: middle;
opacity: 1;
}
@keyframes scroll-left{
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
/* ===========================================================
* Section: Products — tabbed (Figma 994:29832)
* ----------------------------------------------------------- */
.section-products{
/* Solid at top, fades transparent at bottom so features gradient bleeds through */
background: linear-gradient(180deg,
#051A3C 0%,
#051A3C 65%,
transparent 100%);
/* Scroll track — the inner .products-sticky pins for (height − 100vh) of
scrolling, split across the 3 products. 300vh ⇒ ~66vh of scroll each,
giving the 3rd product enough hold time before exiting. */
height: 300vh;
padding: 0;
position: relative;
z-index: 3;
color: var(--Base-White, #fcfcfc);
}
/* Centered section heading + subheading — pinned above the products (Figma 994:29829) */
.products-intro{
text-align: center;
margin-bottom: 20px;
}
.products-intro .products-title{
/* Canonical sitewide H2 — Space Grotesk 300 / 44px / 54px / -0.6px tracking */
font-family: 'Space Grotesk', sans-serif;
font-weight: 300;
font-size: 44px;
line-height: 54px;
letter-spacing: -.6px;
color: var(--Base-White, #fcfcfc);
text-align: center;
font-variation-settings: 'SOFT' 0, 'WONK' 1;
margin: 0 0 12px;
}
.products-intro .products-subtitle{
font-family: 'Inter', sans-serif;
font-weight: 400;
font-size: 15px;
line-height: 22px;
letter-spacing: -0.15px;
color: rgba(255, 255, 255, .8);
margin: 0;
}
/* Sticky pin — full-screen stage that stays fixed while the track scrolls */
.products-sticky{
position: sticky;
top: 0;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
padding: 36px 0;
box-sizing: border-box;
overflow: visible;
}
.products-sticky > .container{
position: relative;
z-index: 1;
width: 100%;
}
/* ── Scroll progress dots ───────────────────────────────────── */
.product-progress{
display: flex;
justify-content: center;
gap: 10px;
margin-top: 22px;
}
.product-progress .pp-dot{
width: 8px;
height: 8px;
border-radius: 50%;
background: rgba(252, 252, 252, .2);
transition: background .35s ease, width .35s ease;
}
.product-progress .pp-dot.is-active{
width: 26px;
border-radius: 50px;
background: var(--SkyBlue-SkyBlue-500, #12b6f8);
}
/* ── Header row: eyebrow + segmented product switcher ───────── */
.section-products .products-head{
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
flex-wrap: wrap;
margin-bottom: 28px;
padding-bottom: 20px;
border-bottom: 1px solid rgba(159, 186, 228, .15);
}
.section-products .ph-eyebrow{
font-family: 'Inter', sans-serif;
font-weight: 400;
font-size: 11px;
line-height: 16px;
letter-spacing: 1.165px;
text-transform: uppercase;
color: var(--SkyBlue-SkyBlue-500, #12b6f8);
margin: 0;
}
/* Segmented pill switcher (glass on dark) */
.product-tabs{
display: inline-flex;
flex-wrap: wrap;
gap: 6px;
padding: 5px;
background: rgba(252, 252, 252, .06);
border: 1px solid rgba(159, 186, 228, .25);
border-radius: 50px;
}
.product-tab{
background: transparent;
border: none;
border-radius: 50px;
padding: 9px 20px;
font-family: 'Inter', sans-serif;
font-weight: 500;
font-size: 14px;
line-height: 1;
color: rgba(252, 252, 252, .55);
cursor: pointer;
white-space: nowrap;
transition: color .25s ease, background .25s ease, box-shadow .25s ease;
}
.product-tab:hover{ color: var(--Base-White, #fcfcfc); background: rgba(252,252,252,.07); }
.product-tab.is-active{
background: rgba(40, 99, 195, .55);
color: var(--Base-White, #fcfcfc);
font-weight: 600;
box-shadow: 0 0 0 1.5px rgba(100, 149, 237, .5), 0 4px 16px rgba(40, 99, 195, .35);
}
/* ── Two-column stage ───────────────────────────────────────── */
.product-stage{
display: grid;
grid-template-columns: 1fr 1fr;
gap: 56px;
align-items: center;
min-height: 0;
}
/* ── Left column: active product content ────────────────────── */
.product-detail{
/* Per-product accent — overridden by variant classes below */
--pd-accent: var(--Violet-Violet-450, #7747b6);
--pd-accent-bg: rgba(119, 71, 182, .22);
--pd-accent-border: rgba(119, 71, 182, .55);
display: flex;
flex-direction: column;
align-items: flex-start;
/* Grouped vertical rhythm via per-element margins (see below) rather than a
single flat gap — keeps the label tight to the heading and separates the
body / tags / proof groups. */
gap: 0;
}
.product-detail.is-insights{
--pd-accent: var(--Royal-Blue-Blue-450, #2863c3);
--pd-accent-bg: rgba(40, 99, 195, .22);
--pd-accent-border: rgba(40, 99, 195, .55);
}
.product-detail.is-datamagnet{
--pd-accent: var(--Turquoise-SkyBlue-500, #1ca9c9);
--pd-accent-bg: rgba(28, 169, 201, .22);
--pd-accent-border: rgba(28, 169, 201, .55);
}
/* ── Premium switch animation (staggered slide-fade, no blink) ──
Each child eases in from below; outgoing content lifts away fast. */
.product-detail > *{
transition: opacity .22s ease, transform .22s cubic-bezier(.22, .61, .36, 1);
will-change: opacity, transform;
}
.product-detail > *:nth-child(1){ transition-delay: 0s; }
.product-detail > *:nth-child(2){ transition-delay: .02s; }
.product-detail > *:nth-child(3){ transition-delay: .04s; }
.product-detail > *:nth-child(4){ transition-delay: .06s; }
.product-detail > *:nth-child(5){ transition-delay: .08s; }
.product-detail > *:nth-child(6){ transition-delay: .10s; }
/* Outgoing — quick, uniform lift + fade */
.product-detail.is-leaving > *{
opacity: 0;
transform: translateY(-6px);
transition: opacity .08s ease-in, transform .08s ease-in;
transition-delay: 0s;
}
/* Incoming start state — applied instantly, then released to settle in */
.product-detail.is-entering > *{
opacity: 0;
transform: translateY(12px);
transition: none;
}
.product-detail .pd-pill{
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--pd-accent-bg);
border: 1px solid var(--pd-accent-border);
co lor: var(--pd-accent);
padding: 6px 14px;
border-radius: 50px;
font-family: 'Inter', sans-serif;
font-weight: 400;
font-size: 11px;
line-height: 16px;
letter-spacing: 1.165px;
text-transform: uppercase;
/* Uniform 34px rhythm between every block in the product-detail panel:
pill → h3 → paragraph → chips → quote → cta. */
margin-bottom: 34px;
}
.product-detail .pd-pill::before{
content: "";
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--pd-accent);
}
.product-detail h3{
font-family: 'Space Grotesk', sans-serif;
font-weight: 500;
font-size: 28px;
line-height: 36px;
letter-spacing: -0.3px;
color: var(--Base-White, #fcfcfc);
margin: 0 0 34px;
}
.product-detail p{
font-family: 'Inter', sans-serif;
font-weight: 400;
font-size: 15px;
line-height: 26px;
color: rgba(252, 252, 252, .72);
margin: 0 0 34px;
max-width: 56ch;
}
.product-detail .pd-chips{
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 34px;
}
.product-detail .pd-chip{
background: var(--pd-accent-bg);
border: 1px solid var(--pd-accent-border);
color: #fcfcfc;
padding: 7px 14px;
border-radius: 50px;
font-family: 'Inter', sans-serif;
font-weight: 500;
font-size: 13px;
line-height: 16px;
display: inline-flex;
align-items: center;
}
/* Customer quote — glass card with brand accent rail */
.product-detail .pd-quote{
margin: 0 0 34px;
background: rgba(252, 252, 252, .04);
border: 1px solid rgba(159, 186, 228, .15);
border-left: 3px solid var(--pd-accent);
border-radius: 12px;
padding: 14px 20px;
max-width: 520px;
}
.product-detail .pd-quote[hidden]{ display: none; }
.product-detail .pd-quote blockquote{
margin: 0 0 6px;
font-family: 'Inter', sans-serif;
font-weight: 500;
font-style: italic;
font-size: 15px;
line-height: 24px;
color: var(--Base-White, #fcfcfc);
}
.product-detail .pd-quote figcaption{
font-family: 'Inter', sans-serif;
font-weight: 400;
font-size: 13px;
line-height: 18px;
color: rgba(252, 252, 252, .6);
}
/* Explore link — accent text + nudging arrow */
.product-detail .pd-cta{
display: inline-flex;
align-items: center;
gap: 8px;
background: none;
border: none;
padding: 0;
color: var(--pd-accent);
font-family: 'Inter', sans-serif;
font-weight: 700;
font-size: 15px;
line-height: 25px;
text-decoration: none;
cursor: pointer;
transition: filter .25s ease;
}
.product-detail .pd-cta:hover{ filter: brightness(1.15); }
.product-detail .pd-cta .pd-cta-arrow{
transition: transform .25s ease;
}
.product-detail .pd-cta:hover .pd-cta-arrow{ transform: translateX(4px); }
/* ── Right column: product visual ───────────────────────────── */
.product-visual{
position: relative;
display: flex;
align-items: center;
justify-content: center;
min-width: 0;
overflow: visible;
}
/* Soft accent wash behind the GIF — wide diffuse base layer */
.product-visual::before{
content: "";
position: absolute;
inset: 10% 8%;
z-index: 0;
pointer-events: none;
background: radial-gradient(60% 60% at 50% 50%,
var(--pd-glow, rgba(119, 71, 182, .28)) 0%,
transparent 70%);
filter: blur(52px);
}
/* ── Per-product orb colors ─────────────────────────────────── */
.product-visual{
--pv-orb-a: rgba(119, 71, 182, .72);
--pv-orb-b: rgba(85, 41, 142, .52);
}
.product-detail.is-insights ~ .product-visual,
.product-stage:has(.is-insights) .product-visual{
--pd-glow: rgba(40, 99, 195, .30);
--pv-orb-a: rgba(40, 99, 195, .72);
--pv-orb-b: rgba(28, 169, 201, .52);
}
.product-stage:has(.is-datamagnet) .product-visual{
--pd-glow: rgba(28, 169, 201, .30);
--pv-orb-a: rgba(28, 169, 201, .72);
--pv-orb-b: rgba(18, 182, 248, .52);
}
/* ── Animated background orbs — centred on each side edge of the GIF ── */
.pv-orb{
position: absolute;
border-radius: 50%;
filter: blur(60px);
pointer-events: none;
will-change: opacity, transform;
z-index: 0;
animation: glowBreathe 7s ease-in-out infinite alternate;
transition: background .55s ease;
}
/* Left-edge orb: centre sits on the left border, half peeks outside */
.pv-orb-a{
top: 50%;
left: -18%;
width: 60%;
height: 80%;
translate: 0 -50%;
background: radial-gradient(circle, var(--pv-orb-a) 0%, transparent 65%);
transform: translate3d(calc(var(--mx, 0) * -8px), calc(var(--my, 0) * -6px), 0);
}
/* Right-edge orb: centre sits on the right border, half peeks outside */
.pv-orb-b{
top: 50%;
right: -18%;
width: 60%;
height: 80%;
translate: 0 -50%;
background: radial-gradient(circle, var(--pv-orb-b) 0%, transparent 65%);
animation-duration: 9s;
animation-delay: 1.4s;
transform: translate3d(calc(var(--mx, 0) * 6px), calc(var(--my, 0) * 5px), 0);
}
.product-visual img{
position: relative;
z-index: 1;
display: block;
width: 100%;
height: auto;
max-height: 52vh;
object-fit: contain;
border-radius: 12px;
mix-blend-mode: lighten;
/* Float + mouse parallax — same pattern as persona scene cards.
scFloat1 uses the `translate` independent property so `transform`
stays free for the mouse-parallax offset. */
animation: scFloat1 6.5s ease-in-out 0.5s infinite alternate;
transform: translate3d(calc(var(--mx, 0) * 12px), calc(var(--my, 0) * 8px), 0);
transition: opacity .4s ease, transform .4s cubic-bezier(.22, .61, .36, 1);
will-change: opacity, transform, translate;
}
.product-visual.is-leaving img{
opacity: 0;
transform: scale(.99) translateY(-5px);
transition: opacity .08s ease-in, transform .08s ease-in;
}
.product-visual.is-entering img{
opacity: 0;
transform: scale(.99) translateY(10px);
transition: none;
}
/* Respect reduced-motion — fade only, no movement */
@media (prefers-reduced-motion: reduce){
.product-detail > *,
.product-visual img{
transition: opacity .2s ease !important;
transform: none !important;
transition-delay: 0s !important;
}
.product-detail.is-entering > *,
.product-visual.is-entering img{ transform: none !important; }
}
/* ===========================================================
* Section: Features & Capabilities (Figma 994:29843)
* Horizontal-scroll of light cards on dark, fading into personas
* ----------------------------------------------------------- */
.section-features{
position: relative;
padding: 120px 0 150px;
background: transparent;
z-index: 2;
}
/* Gradient bridge extends up into the Products section and fades in from a
transparent navy (matching the dark page canvas) so there's no hard edge —
then ramps navy → violet → royal blue → pale blue into Features. The final
stop is a pale brand tint (NOT pure white) so the Personas section can pick
up exactly that colour at its top and resolve to white inside — making the
whole flow look like one continuous gradient with no visible seam. */
.section-features::before{
content: "";
position: absolute;
left: 0;
right: 0;
top: -220px;
bottom: 0;
/* Stops spread evenly so the bottom half ramps gently from sky-blue
through pale brand into the Royal-Blue-Blue-50 anchor that the
Personas fade picks up — no crowded band of light blue near the
boundary, no visible stripe. */
background: linear-gradient(180deg,
#051A3C 0%,
#1a1e52 24%,
#32216e 36%,
#55298e 48%,
#2863c5 62%,
#5886d0 73%,
#9fbae4 83%,
#c8d8ee 92%,
var(--Royal-Blue-Blue-50, #e7eef8) 100%);
z-index: -1;
pointer-events: none;
}
.section-features .container{
position: relative;
z-index: 1;
}
/* Premium intro — eyebrow pill (on-dark variant), Space Grotesk h2 with
gradient accent on the key phrase, muted-white sub. Matches the
Persona / Pricing / Success intro pattern, retuned for dark bg. */
.features-intro{
text-align: center;
max-width: 880px;
margin: 0 auto 56px;
}
.features-eyebrow{
display: inline-flex;
align-items: center;
gap: 10px;
font-family: 'Inter', sans-serif;
font-weight: 500;
font-size: 11px;
line-height: 16px;
letter-spacing: 1.6px;
text-transform: uppercase;
color: var(--SkyBlue-SkyBlue-300, #67d3ff);
background: rgba(255, 255, 255, .06);
border: 1px solid rgba(255, 255, 255, .14);
padding: 7px 16px;
border-radius: 50px;
margin: 0 0 22px;
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
}
.features-eyebrow .fe-dot{
width: 6px;
height: 6px;
border-radius: 50%;
background: linear-gradient(135deg, var(--SkyBlue-SkyBlue-500, #12b6f8) 0%, var(--Violet-Violet-450, #7747b6) 100%);
box-shadow: 0 0 0 3px rgba(18, 182, 248, .18);
}
.section-features h2{
font-family: 'Space Grotesk', sans-serif;
font-weight: 300;
font-size: 44px;
line-height: 54px;
color: var(--Base-White, #fcfcfc);
text-align: center;
margin: 0 0 18px;
letter-spacing: -.6px;
max-width: none;
}
.section-features h2 .fh-accent{
/* Plain white — matches the rest of the heading. Italic stays for
typographic emphasis. The parent h2's text-shadow now applies
directly (no background-clip transparency to break it). */
color: var(--Base-White, #fcfcfc);
font-style: italic;
}
.section-features .section-sub{
font-family: 'inter', serif;
font-weight: 400;
font-size: 15px;
line-height: 28px;
text-align: center;
max-width: 680px;
margin: 0 auto;
}
/* ─────────────────────────────────────────────────────────────────
FEATURES MARQUEE — single horizontal track, RIGHT → LEFT auto-scroll.
All 12 feature cards live in one track. No clones — the JS handler
shuffles cards through the DOM as they scroll past: when a card
fully exits the left edge, it's appended to the end of the track
and the track's translateX is shifted by exactly one card-width so
the visual position is unchanged. Result: a true infinite loop
with no visible duplication of any blog. Edges fade via mask-image
so cards enter/exit smoothly. Hover pauses the scroll. */
.features-marquee{
position: relative;
overflow: hidden;
margin: 0 -16px;
padding: 14px 16px 28px;
-webkit-mask-image: linear-gradient(90deg,
transparent 0%,
#000 7%,
#000 93%,
transparent 100%);
mask-image: linear-gradient(90deg,
transparent 0%,
#000 7%,
#000 93%,
transparent 100%);
}
.features-track{
display: flex;
gap: 24px;
width: max-content;
will-change: transform;
}
/* Feature card — light grey with violet border */
.feature-card{
flex: 0 0 313px;
width: 313px;
height: 278px;
background: var(--Grey-Grey-200, #f7f7f7);
border: 1px solid var(--Violet-Violet-250, #b499d7);
border-radius: 8px;
padding: 32px 24px 24px;
display: flex;
flex-direction: column;
gap: 16px;
align-items: flex-start;
filter: drop-shadow(0 4px 4px rgba(0, 0, 0, .12));
transition: transform .25s ease, box-shadow .25s ease;
}
.feature-card:hover{
transform: translateY(-4px);
box-shadow: 0 8px 16px rgba(85, 41, 142, .18);
}
.feature-card .fc-icon{
width: 52px;
height: 52px;
border-radius: 14px;
background: var(--Royal-Blue-Blue-50, #e7eef8);
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--Royal-Blue-Blue-500, #0e48a5);
flex: 0 0 52px;
}
.feature-card .fc-icon svg{ width: 24px; height: 24px; }
.feature-card h5{
font-family: 'Space Grotesk', sans-serif;
font-weight: 400;
font-size: 20px;
line-height: 30px;
color: var(--Absolute-Black, #242424);
margin: 0;
min-width: 100%;
}
.feature-card p{
font-family: 'Inter', sans-serif;
font-weight: 400;
font-size: 15px;
line-height: 26px;
color: var(--Absolute-Black, #242424);
margin: 0;
}
/* ===========================================================
* Section: Personas (Figma 994:29844)
* ----------------------------------------------------------- */
/* Per-active-persona accent — set on .section-personas via JS. Defaults shown. */
.section-personas{
--pa-accent: var(--Royal-Blue-Blue-500, #0e48a5);
--pa-accent-secondary: var(--Violet-Violet-450, #7747b6);
--pa-accent-glow-a: rgba(40, 99, 195, .55);
--pa-accent-glow-b: rgba(119, 71, 182, .40);
--pa-accent-glow-c: rgba(28, 169, 201, .25);
--pa-accent-soft: rgba(40, 99, 195, .08);
--pa-accent-border: rgba(40, 99, 195, .40);
background: var(--Base-White, #fcfcfc);
color: var(--cool-101828, #101828);
padding: 96px 0 132px;
position: relative;
z-index: 2;
overflow: hidden;
isolation: isolate;
}
/* Soft entry fade — smooths the dark→light transition above into white.
Starts a hair ABOVE the section so it overlaps where the Features
bridge ends (both sit at --Royal-Blue-Blue-50 there), then resolves
to pure white over ~560px with many graduated stops so no band is
visible. Reads as one continuous ramp from dark canvas → pale tint
→ white with zero seam between the sections. */
.section-personas .personas-fade{
position: absolute;
top: 0;
left: 0;
right: 0;
height: 560px;
background: linear-gradient(180deg,
/* Pin the top edge to EXACTLY #e7eef8 so the pixel at y=0 of
Personas matches the pixel at the bottom of Features — zero
subpixel mismatch, no visible boundary line. */
var(--Royal-Blue-Blue-50, #e7eef8) 0%,
rgba(231, 238, 248, 1) 6%,
rgba(231, 238, 248, .92) 16%,
rgba(231, 238, 248, .78) 28%,
rgba(231, 238, 248, .62) 40%,
rgba(231, 238, 248, .46) 52%,
rgba(231, 238, 248, .30) 65%,
rgba(231, 238, 248, .18) 77%,
rgba(231, 238, 248, .08) 87%,
rgba(231, 238, 248, .03) 94%,
rgba(231, 238, 248, 0) 100%);
pointer-events: none;
z-index: 0;
}
/* Content sits above the fade */
.section-personas .container{
position: relative;
z-index: 1;
}
/* ── Intro: eyebrow + heading + sub ─────────────────────────────
Editorial composition: a small dotted eyebrow above a Space Grotesk
headline whose tail picks up a brand-color gradient. */
.personas-intro{
text-align: center;
max-width: 840px;
margin: 0 auto 80px;
}
.personas-eyebrow{
display: inline-flex;
align-items: center;
gap: 10px;
font-family: 'Inter', sans-serif;
font-weight: 500;
font-size: 11px;
line-height: 16px;
letter-spacing: 1.6px;
text-transform: uppercase;
color: var(--Royal-Blue-Blue-500, #0e48a5);
background: linear-gradient(135deg, rgba(40, 99, 195, .08) 0%, rgba(119, 71, 182, .08) 100%);
border: 1px solid rgba(40, 99, 195, .14);
padding: 7px 16px;
border-radius: 50px;
margin-bottom: 24px;
}
.personas-eyebrow .pe-dot{
width: 6px;
height: 6px;
border-radius: 50%;
background: linear-gradient(135deg,
var(--Royal-Blue-Blue-500, #0e48a5) 0%,
var(--Violet-Violet-450, #7747b6) 100%);
box-shadow: 0 0 0 3px rgba(40, 99, 195, .12);
}
.section-personas h2{
font-family: 'Space Grotesk', sans-serif;
font-weight: 300;
font-size: 44px;
line-height: 54px;
text-align: center;
color: var(--cool-101828, #101828);
margin: 0 0 18px;
letter-spacing: -.6px;
}
/* Gradient-text accent on the trailing portion of the headline */
.section-personas h2 .ph-accent{
background: linear-gradient(135deg,
var(--Royal-Blue-Blue-500, #0e48a5) 0%,
var(--Violet-Violet-450, #7747b6) 55%,
var(--Turquoise-SkyBlue-500, #1ca9c9) 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
font-style: italic;
}
.section-personas .section-sub{
font-family: 'inter', serif;
font-weight: 400;
font-size: 15px;
line-height: 30px;
color: #4a5568;
text-align: center;
max-width: 720px;
margin: 0 auto;
}
/* ── Persona Explorer: stepper (left) + dashboard showcase (right) ── */
/* ── Persona Explorer: content (left) + animated scene stage (right) ──
The right stage holds four absolute-positioned scenes, one per persona.
On persona change, the active scene fades + slides in while its layered
cards stagger up sequentially — a content-first storytelling reveal. */
.persona-explorer{
display: grid;
grid-template-columns: minmax(320px, .95fr) minmax(0, 1.15fr);
gap: 80px;
align-items: center;
position: relative;
}
/* LEFT column ───────────────────────────────────────────────── */
.pex-content{
display: flex;
flex-direction: column;
align-items: flex-start;
}
/* Compact horizontal persona selector at the top of the left column */
.pex-selector{
display: inline-flex;
flex-wrap: wrap;
gap: 4px;
padding: 5px;
background: #f1f5f9;
border: none;
box-shadow:
inset 0 1px 2px rgba(16, 24, 40, .05),
0 1px 3px rgba(16, 24, 40, .04);
border-radius: 50px;
margin-bottom: 32px;
}
.px-tab{
border: none;
background: transparent;
color: #475467;
padding: 9px 17px;
border-radius: 50px;
font-family: 'Inter', sans-serif;
font-weight: 500;
font-size: 13px;
line-height: 1;
cursor: pointer;
letter-spacing: .1px;
transition: color .3s ease, background .3s ease, box-shadow .35s ease,
transform .35s cubic-bezier(.22, .61, .36, 1), border-color .3s ease;
position: relative;
}
.px-tab:hover{
color: var(--cool-101828, #101828);
transform: translateY(-1px);
}
.px-tab.is-active{
/* Filled brand gradient pill with glow shadow — strong hierarchy */
background: linear-gradient(135deg, var(--pa-accent) 0%, var(--pa-accent-secondary) 100%);
color: #ffffff;
font-weight: 600;
transform: scale(1.05);
box-shadow:
0 8px 22px -8px var(--pa-accent-glow-a, rgba(40, 99, 195, .55)),
0 3px 6px -3px var(--pa-accent-glow-b, rgba(119, 71, 182, .35)),
inset 0 1px 0 rgba(255, 255, 255, .30);
}
.px-tab.is-active:hover{
transform: scale(1.05) translateY(-1px);
color: #ffffff;
}
.pex-text{
display: flex;
flex-direction: column;
align-items: flex-start;
}
.pex-role-label{
display: inline-flex;
align-items: center;
gap: 6px;
font-family: 'Inter', sans-serif;
font-weight: 500;
font-size: 11px;
line-height: 16px;
letter-spacing: 1.4px;
text-transform: uppercase;
color: var(--pa-accent, #0e48a5);
margin-bottom: 18px;
transition: color .35s ease;
}
.pex-role-label::before{
content: "";
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--pa-accent);
box-shadow: 0 0 8px var(--pa-accent);
transition: background .35s ease, box-shadow .35s ease;
}
.pex-text h3{
font-family: 'Space Grotesk', sans-serif;
font-weight: 500;
font-size: 28px;
line-height: 36px;
color: var(--cool-101828, #101828);
margin: 0 0 22px;
letter-spacing: -0.3px;
max-width: 22ch;
}
.pex-text h3 .pquote{
color: var(--pa-accent);
opacity: .5;
font-family: 'Space Grotesk', sans-serif;
font-size: 34px;
line-height: 1;
margin: 0 1px;
transition: color .35s ease;
}
.pex-text p{
font-family: 'Inter', sans-serif;
font-weight: 400;
font-size: 15px;
line-height: 26px;
color: #4a5568;
margin: 0 0 24px;
max-width: 48ch;
}
.persona-chips{
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.persona-chips .chip{
display: inline-flex;
align-items: center;
gap: 6px;
padding: 7px 13px;
border-radius: 50px;
background: var(--pa-accent-soft, rgba(40, 99, 195, .08));
border: 1px solid var(--pa-accent-border, rgba(40, 99, 195, .35));
color: var(--pa-accent, #0e48a5);
font-family: 'Inter', sans-serif;
font-weight: 500;
font-size: 12.5px;
line-height: 16px;
box-shadow: 0 1px 3px rgba(14, 72, 165, .08);
transition: background .25s ease, border-color .25s ease, color .35s ease, box-shadow .25s ease;
}
.persona-chips .chip:hover{
background: var(--pa-accent-soft, rgba(40, 99, 195, .14));
border-color: var(--pa-accent, rgba(40, 99, 195, .55));
box-shadow: 0 2px 8px rgba(14, 72, 165, .14);
}
.persona-chips .chip svg{ width: 12px; height: 12px; }
/* RIGHT column ─────────────────────────────────────────────── */
.pex-stage{
position: relative;
width: 100%;
min-height: 380px;
aspect-ratio: 4 / 3;
isolation: isolate;
}
/* Each scene stacks at the same coordinates; only the active is visible.
Outgoing scene slides up + fades; incoming scene fades + slides in,
then its inner cards stagger up sequentially — Lemni-style storytelling. */
.persona-scene,
.plan-scene{
position: absolute;
inset: 0;
opacity: 0;
visibility: hidden;
transform: translateY(12px);
transition: opacity .45s ease, transform .55s cubic-bezier(.22, .61, .36, 1), visibility 0s linear .55s;
pointer-events: none;
}
.persona-scene.is-on,
.plan-scene.is-on{
opacity: 1;
visibility: visible;
transform: none;
transition: opacity .45s ease, transform .55s cubic-bezier(.22, .61, .36, 1), visibility 0s linear 0s;
pointer-events: auto;
}
/* Soft glowing gradient orbs INSIDE the scene — image background treatment.
They retune per active persona via --pa-accent-glow-* and parallax-shift. */
.scene-glow{
position: absolute;
border-radius: 50%;
filter: blur(80px);
pointer-events: none;
will-change: transform, background;
z-index: 0;
transition: background .55s ease;
}
.scene-glow-a{
top: -12%;
left: -10%;
width: 70%;
height: 70%;
background: radial-gradient(circle, var(--pa-accent-glow-a) 0%, transparent 70%);
}
.scene-glow-b{
bottom: -12%;
right: -8%;
width: 64%;
height: 64%;
background: radial-gradient(circle, var(--pa-accent-glow-b) 0%, transparent 70%);
}
/* ── Scene cards: base "glass" panel ─────────────────────────
White card with brand-tinted layered shadow + hairline border.
Floats above the glow. Three animation layers compose:
• `transform` → mouse parallax (CSS-var-driven via .pex-stage --mx/--my)
• `translate` → idle "float" keyframe (independent CSS property, composes
with transform — see scFloat1/2/3 below)
• `animation:scReveal` → one-shot stagger reveal when scene becomes active
*/
.scene-card{
position: absolute;
z-index: 1;
background: rgba(255, 255, 255, .94);
-webkit-backdrop-filter: saturate(140%) blur(14px);
backdrop-filter: saturate(140%) blur(14px);
border: 1px solid rgba(255, 255, 255, .9);
border-radius: 18px;
padding: 18px 20px;
box-shadow:
0 1px 3px rgba(16, 24, 40, .06),
0 24px 48px -20px rgba(14, 72, 165, .22),
0 12px 24px -16px rgba(85, 41, 142, .10),
inset 0 1px 0 rgba(255, 255, 255, .6);
color: var(--pa-accent);
opacity: 0;
/* Default off-state — mouse parallax baseline (mx/my default 0) */
transform: translate3d(0, 0, 0);
transition: transform .25s ease-out, box-shadow .4s ease;
will-change: opacity, transform, translate;
}
/* Active scene: each card mouse-tracks at a different amplitude, plays the
stagger reveal, then begins a slow infinite float — all composed cleanly. */
.persona-scene.is-on .scene-card,
.plan-scene.is-on .scene-card{
opacity: 1;
}
.persona-scene.is-on .scene-card.sc-1,
.plan-scene.is-on .scene-card.sc-1{
/* `backwards` (not `both`) so the reveal's from-state applies during the
stagger delay, but the rule's transform reclaims control afterwards —
letting the mouse-parallax CSS-var translate take effect post-reveal. */
transform: translate3d(calc(var(--mx, 0) * 10px), calc(var(--my, 0) * 8px), 0);
animation:
scReveal .55s cubic-bezier(.22, .61, .36, 1) 0s backwards,
scFloat1 6.5s ease-in-out 0.7s infinite alternate;
}
.persona-scene.is-on .scene-card.sc-2,
.plan-scene.is-on .scene-card.sc-2{
transform: translate3d(calc(var(--mx, 0) * -9px), calc(var(--my, 0) * 6px), 0);
animation:
scReveal .55s cubic-bezier(.22, .61, .36, 1) .10s backwards,
scFloat2 7.5s ease-in-out 0.8s infinite alternate;
}
.persona-scene.is-on .scene-card.sc-3,
.plan-scene.is-on .scene-card.sc-3{
transform: translate3d(calc(var(--mx, 0) * 6px), calc(var(--my, 0) * -7px), 0);
animation:
scReveal .55s cubic-bezier(.22, .61, .36, 1) .18s backwards,
scFloat3 8s ease-in-out 0.9s infinite alternate;
}
/* Card positions — balanced layered cluster.
Cards are stacked diagonally (top-left → mid-right → bottom-center) and
*touch* with only a small overlap zone at each junction so the layered
feel is preserved without obscuring content. sc-2 is also slimmer so it
covers only the right edge of sc-1, never its primary content area. */
.scene-card.sc-1{ top: 0; left: 0; width: 70%; }
.scene-card.sc-2{ top: 28%; right: 0; width: 44%; }
.scene-card.sc-3{ top: 58%; left: 18%; width: 56%; }
/* ── One-shot reveal: slide + scale + fade ─────────────────── */
@keyframes scReveal{
from{ opacity: 0; transform: translate3d(0, 22px, 0) scale(.97); }
to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}
/* ── Idle float — uses `translate` (independent) so it composes with the
mouse-parallax `transform` without overwriting it. */
@keyframes scFloat1{
0% { translate: 0 -8px; }
100% { translate: 0 8px; }
}
@keyframes scFloat2{
0% { translate: 0 9px; }
100% { translate: 0 -7px; }
}
@keyframes scFloat3{
0% { translate: -6px 0; }
100% { translate: 6px 0; }
}
/* ── Stage perspective + depth backdrop ─────────────────────
Perspective primes 3D-feel composition; the ::before adds a soft
dot-grid texture behind the cards (5–10% opacity, masked toward the
center) for premium depth without clutter. */
.pex-stage{
perspective: 1400px;
transform-style: preserve-3d;
}
.pex-stage::before{
content: "";
position: absolute;
inset: -10% -6%;
z-index: 0;
pointer-events: none;
background-image: radial-gradient(rgba(40, 99, 195, .055) 1px, transparent 1px);
background-size: 26px 26px;
-webkit-mask-image: radial-gradient(ellipse 75% 65% at 50% 50%, #000 30%, transparent 80%);
mask-image: radial-gradient(ellipse 75% 65% at 50% 50%, #000 30%, transparent 80%);
opacity: .9;
}
/* ── Breathing glows — slow infinite scale + opacity pulse ──
Uses `scale` (independent property) so it composes with the JS-driven
parallax `transform: translate3d(...)` instead of overwriting it. */
.scene-glow{
animation: glowBreathe 7s ease-in-out infinite alternate;
}
.scene-glow-b{ animation-duration: 8.5s; animation-delay: 1.2s; }
@keyframes glowBreathe{
0% { scale: 1; opacity: 1; }
100% { scale: 1.08; opacity: .82; }
}
/* ── Chart content animations — fire when scene becomes active ── */
/* Sparkline draws on like ink across paper */
.persona-scene.is-on .sc-spark .draw-line{
stroke-dasharray: 520;
stroke-dashoffset: 520;
animation: drawLine 1.4s cubic-bezier(.22, .61, .36, 1) .55s forwards;
}
@keyframes drawLine{ to{ stroke-dashoffset: 0; } }
/* Top-quarter / goal bars sweep in from the left */
.persona-scene.is-on .sc-bar i,
.persona-scene.is-on .sc-progress i{
transform-origin: left center;
animation: barGrow 1s cubic-bezier(.22, .61, .36, 1) .55s backwards;
}
@keyframes barGrow{
from{ transform: scaleX(0); }
to { transform: scaleX(1); }
}
/* ── Idle "blink" indicator on active pipeline node + KPI dots ── */
.persona-scene.is-on .sc-node-active{
animation: nodePulseGlow 2.6s ease-in-out infinite;
}
@keyframes nodePulseGlow{
0%, 100% { box-shadow: 0 6px 14px -6px var(--pa-accent-glow-a, rgba(40,99,195,.45)); }
50% { box-shadow: 0 10px 22px -6px var(--pa-accent-glow-a, rgba(40,99,195,.7)); }
}
/* ── Stage hover: deeper shadow + intensified glow ────────── */
.pex-stage:hover .scene-card,
.px-stage:hover .scene-card{
box-shadow:
0 1px 3px rgba(16, 24, 40, .08),
0 32px 64px -22px rgba(14, 72, 165, .32),
0 18px 36px -16px rgba(85, 41, 142, .18),
inset 0 1px 0 rgba(255, 255, 255, .7);
}
.pex-stage:hover .scene-glow-a,
.px-stage:hover .scene-glow-a{ opacity: 1.08; }
.pex-stage:hover .scene-glow-b,
.px-stage:hover .scene-glow-b{ opacity: 1.08; }
/* ── Reduced-motion: keep the reveal but suppress infinite motion ── */
@media (prefers-reduced-motion: reduce){
.persona-scene.is-on .scene-card.sc-1,
.persona-scene.is-on .scene-card.sc-2,
.persona-scene.is-on .scene-card.sc-3,
.plan-scene.is-on .scene-card.sc-1,
.plan-scene.is-on .scene-card.sc-2,
.plan-scene.is-on .scene-card.sc-3{
animation: scReveal .35s ease-out both;
transform: none !important;
}
.scene-glow,
.persona-scene.is-on .sc-node-active{ animation: none !important; }
.persona-scene.is-on .sc-spark .draw-line{ animation: none; stroke-dashoffset: 0; }
.persona-scene.is-on .sc-bar i,
.persona-scene.is-on .sc-progress i{ animation: none; transform: none; }
}
/* ── Card interior atoms ─────────────────────────────────── */
.sc-hd{ display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.sc-eyebrow{
font-family: 'Inter', sans-serif;
font-weight: 600;
font-size: 10.5px;
line-height: 14px;
letter-spacing: 1.2px;
text-transform: uppercase;
color: var(--pa-accent);
opacity: .85;
}
.sc-pill{
font-family: 'Inter', sans-serif;
font-weight: 500;
font-size: 10.5px;
color: var(--cool-99a1af, #99a1af);
background: rgba(40, 99, 195, .06);
border-radius: 50px;
padding: 3px 9px;
}
/* Stat row used by the trend card */
.sc-stat-row{ display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.sc-num{
font-family: 'Space Grotesk', sans-serif;
font-weight: 300;
font-size: 30px;
line-height: 1.05;
color: var(--cool-101828, #101828);
letter-spacing: -.5px;
}
.sc-num-sm{ font-size: 22px; }
.sc-delta{
display: inline-flex;
align-items: center;
gap: 3px;
font-family: 'Inter', sans-serif;
font-weight: 600;
font-size: 11.5px;
color: #009966;
background: rgba(0, 153, 102, .10);
border-radius: 50px;
padding: 3px 8px;
}
.sc-delta svg{ display: block; }
.sc-spark{ width: 100%; height: 56px; color: var(--pa-accent); display: block; }
/* Row list used by Top Quarters / Models / Jobs */
.sc-rows{ list-style: none; padding: 0; margin: 8px 0 0; display: flex; flex-direction: column; gap: 8px; }
.sc-rows li{
display: grid;
grid-template-columns: 76px 1fr auto;
align-items: center;
gap: 10px;
font-family: 'Inter', sans-serif;
font-size: 12px;
color: #4a5568;
}
.sc-rl{ color: var(--cool-101828, #101828); font-weight: 500; }
.sc-rv{ font-weight: 600; color: var(--cool-101828, #101828); font-size: 12px; }
.sc-bar{
display: block;
height: 5px;
background: rgba(40, 99, 195, .08);
border-radius: 50px;
overflow: hidden;
}
.sc-bar i{
display: block;
height: 100%;
background: linear-gradient(90deg, var(--pa-accent) 0%, var(--pa-accent-secondary) 100%);
border-radius: 50px;
}
/* Insight & alert cards — single line of copy with a pulsing accent dot */
.sc-insight, .sc-alert{
padding: 16px 18px;
display: flex;
align-items: flex-start;
gap: 12px;
background: linear-gradient(135deg, rgba(255,255,255,.98) 0%, rgba(248,250,253,.95) 100%);
}
.sc-pulse{
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--pa-accent);
box-shadow: 0 0 0 4px var(--pa-accent-soft);
flex: 0 0 8px;
margin-top: 7px;
animation: scPulse 2.2s ease-in-out infinite;
}
.sc-pulse-warn{ background: #f59e0b; box-shadow: 0 0 0 4px rgba(245, 158, 11, .14); }
@keyframes scPulse{
0%,100%{ transform: scale(1); opacity: 1; }
50% { transform: scale(1.25); opacity: .8; }
}
.sc-text{
margin: 0;
font-family: 'Inter', sans-serif;
font-size: 13px;
line-height: 20px;
color: var(--cool-101828, #101828);
}
.sc-text strong{ color: var(--pa-accent); font-weight: 700; }
/* KPI grid used by Business Leader's pulse card */
/* Business KPI grid — 1x4 horizontal row.
A single row keeps the Business hero card the same height as the other
personas' sc-1 cards, so the diagonal cluster overlap stays consistent
across all scenes rather than ballooning for the 2×2 layout. */
.sc-grid{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 6px; }
.sc-kpi{
padding: 10px 10px;
background: linear-gradient(135deg, rgba(255,255,255,.65) 0%, var(--pa-accent-soft) 100%);
border: 1px solid var(--pa-accent-border);
border-radius: 12px;
display: flex;
flex-direction: column;
gap: 3px;
min-width: 0;
}
.sc-kpi .sc-num-sm{ font-size: 19px; line-height: 1.1; }
.sc-kpi .sc-lbl{ font-size: 10px; }
.sc-lbl{ font-family: 'Inter', sans-serif; font-size: 10.5px; color: var(--cool-99a1af, #99a1af); letter-spacing: .3px; }
/* Goal progress bar */
.sc-goal{ padding: 16px 18px; }
.sc-progress{
height: 8px;
background: rgba(40, 99, 195, .08);
border-radius: 50px;
overflow: hidden;
margin: 6px 0 8px;
}
.sc-progress i{
display: block;
height: 100%;
background: linear-gradient(90deg, var(--pa-accent) 0%, var(--pa-accent-secondary) 100%);
border-radius: 50px;
}
.sc-meta{ font-family: 'Inter', sans-serif; font-size: 11.5px; color: var(--cool-99a1af, #99a1af); }
.sc-meta-r{ font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 600; color: var(--pa-accent); }
/* Checklist for "this week's focus" */
.sc-checks{ list-style: none; padding: 0; margin: 8px 0 0; display: flex; flex-direction: column; gap: 8px; }
.sc-checks li{
display: flex;
align-items: center;
gap: 10px;
font-family: 'Inter', sans-serif;
font-size: 12.5px;
color: var(--cool-101828, #101828);
}
.sc-check{
width: 14px;
height: 14px;
border-radius: 4px;
background: linear-gradient(135deg, var(--pa-accent) 0%, var(--pa-accent-secondary) 100%);
position: relative;
flex: 0 0 14px;
}
.sc-check::after{
content: "";
position: absolute;
top: 3px;
left: 4px;
width: 5px;
height: 8px;
border: 2px solid #fff;
border-top: 0;
border-left: 0;
transform: rotate(45deg);
}
/* Pipeline node strip — Model / ETL pipelines */
.sc-pipeline{ padding: 18px 18px 22px; }
.sc-nodes{
display: flex;
align-items: center;
gap: 8px;
margin-top: 12px;
flex-wrap: wrap;
}
.sc-node{
flex: 1;
min-width: 0;
text-align: center;
padding: 10px 8px;
background: rgba(40, 99, 195, .05);
border: 1px solid var(--pa-accent-border);
border-radius: 10px;
font-family: 'Inter', sans-serif;
font-size: 11.5px;
font-weight: 500;
color: var(--pa-accent);
position: relative;
}
.sc-node + .sc-node::before{
content: "";
position: absolute;
left: -8px;
top: 50%;
width: 8px;
height: 1.5px;
background: linear-gradient(90deg, transparent, var(--pa-accent));
opacity: .5;
transform: translateY(-50%);
}
.sc-node-active{
background: linear-gradient(135deg, var(--pa-accent) 0%, var(--pa-accent-secondary) 100%);
border-color: transparent;
color: #fff;
box-shadow: 0 6px 14px -6px var(--pa-accent-glow-a, rgba(40,99,195,.45));
}
/* Accuracy badges for the Models list */
.sc-badge{
font-family: 'Inter', sans-serif;
font-weight: 600;
font-size: 11.5px;
padding: 3px 8px;
border-radius: 50px;
}
.sc-good{ background: rgba(0, 153, 102, .12); color: #009966; }
.sc-mid { background: rgba(245, 158, 11, .14); color: #b45309; }
/* Status pills for Job Health */
.sc-status{
font-family: 'Inter', sans-serif;
font-weight: 600;
font-size: 11px;
padding: 3px 9px;
border-radius: 50px;
text-transform: lowercase;
letter-spacing: .3px;
}
.sc-ok { background: rgba(0, 153, 102, .12); color: #009966; }
.sc-warn{ background: rgba(245, 158, 11, .14); color: #b45309; }
/* Big-number metric card used by Engineer's latency */
.sc-metric{
padding: 18px 20px;
display: flex;
flex-direction: column;
gap: 4px;
}
.sc-metric-num{
font-family: 'Space Grotesk', sans-serif;
font-weight: 300;
font-size: 40px;
line-height: 1;
color: var(--cool-101828, #101828);
letter-spacing: -.5px;
}
.sc-metric-num small{
font-size: 16px;
color: var(--cool-99a1af, #99a1af);
margin-left: 4px;
}
.sc-metric-foot{
font-family: 'Inter', sans-serif;
font-size: 11.5px;
color: var(--cool-99a1af, #99a1af);
}
/* ===========================================================
* Section: Pricing — Explore (Figma 994:29853 / 401:16954)
* ----------------------------------------------------------- */
/* Per-active-plan accent palette — JS swaps these on .section-pricing on tab change.
Defaults match Freemium (Turquoise → Sky Blue). */
.section-pricing{
--pa-accent: var(--Turquoise-SkyBlue-500, #1ca9c9);
--pa-accent-secondary: var(--SkyBlue-SkyBlue-500, #12b6f8);
--pa-accent-glow-a: rgba(28, 169, 201, .50);
--pa-accent-glow-b: rgba(18, 182, 248, .35);
--pa-accent-glow-c: rgba(40, 99, 195, .20);
--pa-accent-soft: rgba(28, 169, 201, .08);
--pa-accent-border: rgba(28, 169, 201, .25);
background: var(--Base-White, #fcfcfc);
padding: 96px 0 132px;
position: relative;
z-index: 2;
overflow: hidden;
isolation: isolate;
}
/* Desktop spacing tightening — no longer locked to 100vh so the
section sizes to its content and doesn't add empty viewport space. */
@media (min-width: 992px){
.section-pricing{
padding-top: 72px;
padding-bottom: 72px;
}
.section-pricing .pricing-intro{ margin-bottom: 64px; }
.section-pricing .pricing-switcher{ margin-bottom: 64px; }
}
/* ── Intro: eyebrow + Space Grotesk heading with gradient accent + sub ─── */
.pricing-intro{
text-align: center;
max-width: 840px;
margin: 0 auto 72px;
}
.pricing-eyebrow{
display: inline-flex;
align-items: center;
gap: 10px;
font-family: 'Inter', sans-serif;
font-weight: 500;
font-size: 11px;
line-height: 16px;
letter-spacing: 1.6px;
text-transform: uppercase;
color: var(--pa-accent);
background: linear-gradient(135deg, rgba(28, 169, 201, .08) 0%, rgba(18, 182, 248, .08) 100%);
border: 1px solid rgba(28, 169, 201, .14);
padding: 7px 16px;
border-radius: 50px;
margin-bottom: 24px;
transition: color .4s ease;
}
.pricing-eyebrow .pe-dot{
width: 6px;
height: 6px;
border-radius: 50%;
background: linear-gradient(135deg, var(--pa-accent) 0%, var(--pa-accent-secondary) 100%);
box-shadow: 0 0 0 3px rgba(28, 169, 201, .12);
transition: background .4s ease;
}
.section-pricing h2{
font-family: 'Space Grotesk', sans-serif;
font-weight: 300;
font-size: 44px;
line-height: 54px;
text-align: center;
color: var(--cool-101828, #101828);
margin: 0 0 18px;
letter-spacing: -.6px;
}
.section-pricing h2 .ph-accent{
background: linear-gradient(135deg,
var(--pa-accent) 0%,
var(--pa-accent-secondary) 55%,
var(--Violet-Violet-450, #7747b6) 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
font-style: italic;
}
.section-pricing .section-sub{
font-family: 'Space Grotesk', sans-serif;
font-weight: 300;
font-size: 19px;
line-height: 30px;
color: #4a5568;
text-align: center;
margin: 0 auto;
max-width: 720px;
}
/* ═══════════════════════════════════════════════════════════════════
PRICING COMPRESSION SHOWCASE — fresh, content-first layout
No persona copy: vertical flow → big plan toggle → compression banner
→ 3+2 feature grid → centered CTA. All accents drive off --pa-accent-*.
═══════════════════════════════════════════════════════════════════ */
/* ── 2) Big plan toggle ─────────────────────────────────────────
Centered, oversized pill switcher. Active state is the unmissable
focal point: gradient fill + glow halo + slight scale up. */
.pricing-switcher{
display: flex;
justify-content: center;
gap: 8px;
padding: 7px;
background: #ffffff;
border: 1px solid rgba(40, 99, 195, .12);
border-radius: 50px;
margin: 0 auto 64px;
width: fit-content;
box-shadow:
0 1px 3px rgba(16, 24, 40, .04),
0 14px 32px -16px rgba(14, 72, 165, .15);
}
.ps-pill{
display: inline-flex;
align-items: center;
gap: 14px;
padding: 12px 24px 12px 16px;
border-radius: 50px;
background: transparent;
border: none;
cursor: pointer;
color: #4a5568;
transition:
background .35s ease,
color .3s ease,
box-shadow .35s ease,
transform .35s cubic-bezier(.22, .61, .36, 1);
}
.ps-pill:hover{
color: var(--cool-101828, #101828);
transform: translateY(-1px);
}
.ps-pill.is-active{
background: linear-gradient(135deg, var(--pa-accent) 0%, var(--pa-accent-secondary) 100%);
color: #ffffff;
transform: scale(1.03);
box-shadow:
0 12px 28px -8px var(--pa-accent-glow-a),
0 4px 8px -3px var(--pa-accent-glow-b),
inset 0 1px 0 rgba(255, 255, 255, .30);
}
.ps-pill.is-active:hover{ transform: scale(1.03) translateY(-1px); color: #fff; }
.ps-icon{
width: 34px;
height: 34px;
border-radius: 50%;
background: var(--pa-accent-soft);
color: var(--pa-accent);
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 34px;
transition: background .35s ease, color .35s ease;
}
.ps-pill.is-active .ps-icon{
background: rgba(255, 255, 255, .22);
color: #ffffff;
}
.ps-label{ display: flex; flex-direction: column; text-align: left; line-height: 1; }
.ps-name{
font-family: 'Inter', sans-serif;
font-weight: 600;
font-size: 15px;
line-height: 20px;
}
.ps-pill.is-active .ps-name{ font-weight: 700; }
.ps-caption{
font-family: 'Inter', sans-serif;
font-weight: 400;
font-size: 11.5px;
line-height: 15px;
margin-top: 2px;
opacity: .85;
}
/* ── Showcase panel: TWO premium cards in a left/right split.
LEFT = plan decision area (title, note, 5 numbered bullets, CTA)
RIGHT = supporting story (eyebrow, h4, sub-bullets, stat + GIF)
A small "→" flow indicator visually bridges them, communicating
the compression story (this plan → this outcome). */
/* No panel box, no divider — two zones sit directly on the section
background, separated only by the column gap. */
.pricing-showcase{
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.32fr);
column-gap: 56px;
align-items: stretch;
position: relative;
background: none;
border: none;
border-radius: 0;
padding: 0;
box-shadow: none;
}
/* Comparison-flow indicator floats over the seam between the two cards.
Absolute-centered so the cards keep their clean rectangular silhouettes,
while the icon visually links them as a "compression flow" cue. */
.ps-flow{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: inline-flex;
align-items: center;
justify-content: center;
width: 52px;
height: 52px;
border-radius: 50%;
background: linear-gradient(135deg, #ffffff 0%, var(--pa-accent-soft) 100%);
border: 1px solid var(--pa-accent-border);
color: var(--pa-accent);
box-shadow:
0 1px 3px rgba(16, 24, 40, .06),
0 10px 22px -8px var(--pa-accent-glow-a);
z-index: 3;
animation: psFlowFloat 4.5s ease-in-out infinite alternate;
transition: background .4s ease, border-color .4s ease, color .4s ease;
}
@keyframes psFlowFloat{
0% { transform: translate(-50%, -50%) translateX(-3px); }
100% { transform: translate(-50%, -50%) translateX(3px); }
}
/* LEFT zone — premium floating box wrapping the whole plan summary.
Soft white surface, 1px pale border, multi-layer shadow with subtle
brand-tinted depth, gentle idle Y-float so it feels alive.
On hover the whole box lifts, glows with brand-accent shadow, gets
a soft accent border + glassy inset top-edge highlight.
Three motion channels compose without conflict:
· translate (individual) — idle Y-float
· transform — hover lift (translateY)
· scale (individual) — hover slight scale-up
Children (the chip cards) consume the --mx / --my parallax vars set
on this container by the JS handler, so the chips inside still drift
with cursor while the box itself stays anchored. */
.ps-left{
position: relative;
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 36px 32px 32px;
background: rgba(255, 255, 255, .96);
border: 1px solid rgba(228, 232, 243, .85);
border-radius: 24px;
box-shadow:
0 1px 3px rgba(16, 24, 40, .04),
0 18px 40px -20px rgba(14, 72, 165, .12),
0 10px 22px -14px rgba(85, 41, 142, .06);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
will-change: translate, transform, scale, box-shadow;
animation: psLeftIdleFloat 7.5s ease-in-out 1.4s infinite alternate;
transition:
transform .55s cubic-bezier(.22, .61, .36, 1),
scale .45s cubic-bezier(.22, .61, .36, 1),
box-shadow .55s cubic-bezier(.22, .61, .36, 1),
border-color .4s ease,
background .4s ease;
}
.ps-left::before{ content: none; }
@keyframes psLeftIdleFloat{
0% { translate: 0 -3px; }
100% { translate: 0 3px; }
}
.ps-left:hover{
transform: translateY(-4px);
scale: 1.005;
border-color: var(--pa-accent-border);
background: rgba(255, 255, 255, .99);
box-shadow:
0 1px 3px rgba(16, 24, 40, .05),
0 32px 64px -24px var(--pa-accent-glow-a),
0 18px 36px -18px var(--pa-accent-glow-b),
inset 0 1px 0 rgba(255, 255, 255, .9);
}
.ps-left-head{
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 18px;
}
/* Plan tag — small uppercase pill, soft brand fill */
.ps-plan-tag{
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 12px;
border-radius: 50px;
background: var(--pa-accent-soft);
border: 1px solid var(--pa-accent-border);
color: var(--pa-accent);
font-family: 'Inter', sans-serif;
font-weight: 600;
font-size: 11px;
line-height: 16px;
letter-spacing: 1.2px;
text-transform: uppercase;
transition: color .4s ease, background .4s ease, border-color .4s ease;
}
.ps-title{
font-family: 'Space Grotesk', sans-serif;
font-weight: 300;
font-size: 30px;
line-height: 40px;
letter-spacing: -.3px;
color: var(--cool-101828, #101828);
margin: 0 0 14px;
max-width: 22ch;
transition: color .35s ease;
}
.ps-note{
font-family: 'Inter', sans-serif;
font-weight: 600;
font-size: 15px;
line-height: 24px;
color: var(--cool-101828, #101828);
margin: 0 0 28px;
letter-spacing: -.1px;
}
/* "What's included" eyebrow — tiny uppercase label above the bullets,
with a subtle gradient tail mark so it reads as a section delimiter. */
.ps-included-eyebrow{
margin: 0 0 12px;
padding: 0;
font-family: 'Inter', sans-serif;
font-weight: 600;
font-size: 11px;
line-height: 16px;
letter-spacing: 1.6px;
text-transform: uppercase;
color: #4a5568;
display: flex;
align-items: center;
gap: 10px;
transition: color .4s ease;
}
.ps-included-eyebrow > span{ flex: 0 0 auto; }
.ps-included-eyebrow::after{
content: "";
flex: 1 1 auto;
height: 1px;
background: linear-gradient(90deg, rgba(228, 232, 243, .9), transparent);
opacity: .9;
}
/* Light, minimal bullet rows — no per-row card styling, no heavy active fill.
Inactive = muted grey body text with a small number marker.
Active = brand-colored text + brand-gradient number marker + soft accent rail.
Hover = subtle text darken + faint accent background.
The bullets read as a clean vertical text list, not card-like blocks. */
/* ─────────────────────────────────────────────────────────────────
FLOATING CHIP BULLETS — Launch-Strategy-inspired clickable cards.
Each chip is a soft white floating surface with its own shadow,
border, and depth. Active state lights up with brand-soft gradient
+ accent text + brand-glow shadow. Three composing motions:
· translate (individual) — idle Y-drift (varied rhythm)
· transform — mouse parallax (varied intensity)
· scale (individual) — hover lift
--mx / --my come from the parallax handler on .ps-left.
───────────────────────────────────────────────────────────────── */
.ps-bullets{
display: flex;
flex-direction: column;
gap: 10px;
margin-bottom: 32px;
width: 100%;
perspective: 1000px;
}
.psb{
display: flex;
align-items: center;
gap: 12px;
padding: 12px 16px;
border-radius: 14px;
background: rgba(255, 255, 255, .94);
border: 1px solid rgba(228, 232, 243, .85);
color: var(--cool-101828, #101828);
font-family: 'Inter', sans-serif;
font-weight: 400;
font-size: 13.5px;
line-height: 20px;
cursor: pointer;
text-align: left;
width: 100%;
position: relative;
box-shadow:
0 1px 2px rgba(16, 24, 40, .04),
0 6px 16px -10px rgba(14, 72, 165, .10);
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
will-change: translate, transform, scale;
/* --psb-hover-lift is 0 by default, -4px on hover. It rides inside the
parallax transform so the lift composes with cursor parallax without
fighting it. Idle (translate) and scale (hover) live on their own
individual properties — three independent motion channels. */
--psb-hover-lift: 0px;
transform: translate3d(
calc(var(--mx, 0) * var(--psb-parax-x, 4px)),
calc(var(--my, 0) * var(--psb-parax-y, 2px) + var(--psb-hover-lift)),
0
);
transition:
transform .5s cubic-bezier(.22, .61, .36, 1),
scale .4s cubic-bezier(.22, .61, .36, 1),
box-shadow .5s cubic-bezier(.22, .61, .36, 1),
background .4s ease,
border-color .4s ease,
color .35s ease;
/* Stagger reveal + gentle idle Y-float. nth-child rules below tune
both the reveal delay and the idle rhythm per chip. */
animation:
psbEnter .55s cubic-bezier(.22, .61, .36, 1) var(--psb-enter-delay, 0s) backwards,
psbIdleFloat var(--psb-idle-dur, 6s) ease-in-out var(--psb-idle-delay, 1s) infinite alternate;
}
.psb-text{ flex: 1 1 auto; min-width: 0; }
/* Right-edge arrow — faint by default, animates in on hover/active.
Sits on a brand-accent color so it harmonises with the active state. */
.psb-arrow{
flex: 0 0 auto;
margin-left: 8px;
color: var(--pa-accent);
font-size: 15px;
line-height: 1;
opacity: .35;
will-change: transform, opacity;
transition:
transform .35s cubic-bezier(.22, .61, .36, 1),
opacity .3s ease,
color .35s ease;
}
.psb:hover .psb-arrow{
opacity: .9;
transform: translateX(3px);
}
.psb.is-active .psb-arrow{
opacity: 1;
transform: translateX(2px);
}
.psb.is-active:hover .psb-arrow{
transform: translateX(4px);
}
/* Stagger + idle rhythms — different per chip = layered depth */
.psb:nth-child(1){ --psb-enter-delay: 0s; --psb-idle-dur: 5.5s; --psb-idle-delay: 1s; --psb-parax-x: 6px; --psb-parax-y: 3px; }
.psb:nth-child(2){ --psb-enter-delay: .07s; --psb-idle-dur: 6.2s; --psb-idle-delay: 1.2s; --psb-parax-x: 4px; --psb-parax-y: 2px; }
.psb:nth-child(3){ --psb-enter-delay: .14s; --psb-idle-dur: 5.8s; --psb-idle-delay: 1.4s; --psb-parax-x: 2px; --psb-parax-y: 1px; }
.psb:nth-child(4){ --psb-enter-delay: .21s; --psb-idle-dur: 6.5s; --psb-idle-delay: 1.6s; --psb-parax-x: 5px; --psb-parax-y: 2px; }
.psb:nth-child(5){ --psb-enter-delay: .28s; --psb-idle-dur: 6s; --psb-idle-delay: 1.8s; --psb-parax-x: 7px; --psb-parax-y: 3px; }
/* Premium hover: lift, slight scale-up, deeper brand-glow shadow,
accent border, and a soft inset top-edge highlight that gives the
chip a glassy "lit-from-above" look. All transitions are smoothed
on a single cubic-bezier curve so the lift / glow / scale move in
lockstep. */
.psb:hover{
--psb-hover-lift: -4px;
scale: 1.025;
border-color: var(--pa-accent-border);
background: rgba(255, 255, 255, .98);
box-shadow:
0 1px 2px rgba(16, 24, 40, .06),
0 24px 48px -16px var(--pa-accent-glow-a),
0 12px 24px -10px var(--pa-accent-glow-b),
inset 0 1px 0 rgba(255, 255, 255, .9);
}
.psb.is-active{
bac kground: var(--pa-accent-soft);
border-color: var(--pa-accent-border);
color: var(--pa-accent);
font-weight: 500;
box-shadow:
0 1px 2px rgba(16, 24, 40, .06),
0 18px 36px -14px var(--pa-accent-glow-a),
0 8px 18px -8px var(--pa-accent-glow-b),
inset 0 1px 0 rgba(255, 255, 255, .85);
}
.psb.is-active:hover{
--psb-hover-lift: -4px;
scale: 1.03;
box-shadow:
0 1px 2px rgba(16, 24, 40, .07),
0 28px 56px -16px var(--pa-accent-glow-a),
0 14px 28px -10px var(--pa-accent-glow-b),
inset 0 1px 0 rgba(255, 255, 255, .9);
}
@keyframes psbEnter{
from { opacity: 0; translate: -8px 4px; scale: .98; }
to { opacity: 1; translate: 0 0; scale: 1; }
}
@keyframes psbIdleFloat{
0% { translate: 0 -2px; }
100% { translate: 0 2px; }
}
.ps-cta{
margin-top: auto;
align-self: flex-start;
display: inline-flex;
align-items: center;
gap: 10px;
padding: 12px 22px;
border-radius: 12px;
background: linear-gradient(135deg, var(--pa-accent) 0%, var(--pa-accent-secondary) 100%);
color: #ffffff;
font-family: 'Inter', sans-serif;
font-weight: 700;
font-size: 14.5px;
line-height: 22px;
text-decoration: none;
box-shadow:
0 10px 24px -10px var(--pa-accent-glow-a),
0 3px 6px -3px var(--pa-accent-glow-b),
inset 0 1px 0 rgba(255, 255, 255, .22);
transition: transform .3s ease, box-shadow .35s ease;
cursor: pointer;
}
.ps-cta:hover{
transform: translateY(-2px);
box-shadow:
0 16px 32px -12px var(--pa-accent-glow-a),
0 6px 10px -4px var(--pa-accent-glow-b);
}
.ps-cta .ps-cta-arrow{ display: inline-flex; transition: transform .3s ease; }
.ps-cta:hover .ps-cta-arrow{ transform: translateX(4px); }
/* RIGHT zone — content-only column inside the unified panel.
No card border, no card shadow, no background — just content. */
.ps-right{
position: relative;
background: none;
border: none;
border-radius: 0;
padding: 0;
box-shadow: none;
display: flex;
flex-direction: column;
overflow: visible;
}
.ps-right::before{ content: none; }
.ps-right > *{ position: relative; z-index: 1; }
/* Mid-swap state — JS adds .is-swapping briefly, swaps content, removes class.
Content fades + lifts during the swap so the change feels intentional. */
.ps-right .psr-eyebrow,
.ps-right .psr-title,
.ps-right .psr-comp-chip,
.ps-right .psr-bullets,
.ps-right .psr-stat,
.ps-right .psr-stage{
transition:
opacity .35s ease,
transform .45s cubic-bezier(.22, .61, .36, 1);
}
.ps-right.is-swapping .psr-eyebrow,
.ps-right.is-swapping .psr-title,
.ps-right.is-swapping .psr-comp-chip,
.ps-right.is-swapping .psr-bullets,
.ps-right.is-swapping .psr-stat,
.ps-right.is-swapping .psr-stage{
opacity: 0;
transform: translateY(8px);
}
/* Staggered reveal — when .is-swapping is removed, content blocks fade
back in one after another for a premium cascade. */
.ps-right .psr-eyebrow { transition-delay: 0s; }
.ps-right .psr-title { transition-delay: .04s; }
.ps-right .psr-comp-chip { transition-delay: .08s; }
.ps-right .psr-bullets { transition-delay: .12s; }
.ps-right .psr-stat { transition-delay: .18s; }
.ps-right .psr-stage { transition-delay: .24s; }
/* But during the leaving (is-swapping ON) state, kill the delays so the
exit is uniform-quick — only the entrance is staggered. */
.ps-right.is-swapping .psr-eyebrow,
.ps-right.is-swapping .psr-title,
.ps-right.is-swapping .psr-comp-chip,
.ps-right.is-swapping .psr-bullets,
.ps-right.is-swapping .psr-stat,
.ps-right.is-swapping .psr-stage{
transition-delay: 0s;
}
.psr-eyebrow{
display: inline-block;
font-family: 'Inter', sans-serif;
font-weight: 600;
font-size: 11px;
line-height: 16px;
letter-spacing: 1.4px;
text-transform: uppercase;
color: var(--pa-accent);
margin-bottom: 14px;
transition: color .4s ease;
}
.psr-title{
font-family: 'Space Grotesk', sans-serif;
font-weight: 400;
font-size: 22px;
line-height: 32px;
color: var(--cool-101828, #101828);
margin: 0 0 18px;
letter-spacing: -.2px;
}
.psr-bullets{
list-style: none;
padding: 0;
margin: 0 0 28px;
display: flex;
flex-direction: column;
gap: 10px;
}
.psr-bullets li{
position: relative;
padding-left: 24px;
font-family: 'Inter', sans-serif;
font-size: 14px;
line-height: 22px;
color: #4a5568;
}
.psr-bullets li::before{
content: "";
position: absolute;
left: 4px;
top: 8px;
width: 8px;
height: 8px;
border-radius: 50%;
background: linear-gradient(135deg, var(--pa-accent) 0%, var(--pa-accent-secondary) 100%);
box-shadow: 0 0 0 3px var(--pa-accent-soft);
transition: background .4s ease, box-shadow .4s ease;
}
/* Legacy .psr-bottom wrapper (no longer used in markup, but retained for any
stragglers); kept neutral so it doesn't paint or layout. */
.psr-bottom{
display: contents;
}
.psr-bottom::after{ content: none; }
/* Comp-chip caption — equal visual weight to the bullet list. Same Inter
400 14/22 grey body text, no italic, no box, no arrow. Sits between h4
and the bulleted list as a one-line "from/to" context line. */
.psr-comp-chip{
display: block;
margin: 0 0 12px;
padding: 0;
background: none;
border: none;
box-shadow: none;
color: #4a5568;
font-family: 'Inter', sans-serif;
font-weight: 400;
font-style: normal;
font-size: 14px;
line-height: 22px;
letter-spacing: 0;
}
.psr-comp-chip strong{
color: inherit;
font-weight: inherit;
font-style: inherit;
background: none;
padding: 0;
}
/* Stat — flat inline row beneath the GIF. Brand-accent serif number on the
left, muted body caption on the right. No rail, no eyebrow, no box. */
.psr-stat{
position: relative;
padding: 0;
background: none;
border: none;
border-radius: 0;
display: flex;
align-items: baseline;
gap: 16px;
box-shadow: none;
transition: color .4s ease;
}
.psr-stat::before{ content: none; }
.psr-stat-num{
font-family: 'Space Grotesk', sans-serif;
font-weight: 300;
font-size: 36px;
line-height: 1;
margin: 0;
letter-spacing: -.5px;
color: var(--pa-accent);
flex: 0 0 auto;
transition: color .4s ease;
/* Brief scale-pulse on each new render so the number "lands" */
animation: psrStatNumPulse .9s cubic-bezier(.22, .61, .36, 1) both;
transform-origin: left center;
}
.psr-stat-num small{
font-size: 20px;
margin-left: 2px;
opacity: .7;
font-weight: 300;
color: var(--pa-accent);
}
.psr-stat-cap{
font-family: 'Inter', sans-serif;
font-size: 13.5px;
line-height: 19px;
color: #4a5568;
margin: 0;
flex: 1 1 auto;
align-self: center;
max-width: none;
}
@keyframes psrStatNumPulse{
0% { opacity: 0; transform: translateY(6px) scale(.96); }
60% { opacity: 1; transform: translateY(0) scale(1.02); }
100% { opacity: 1; transform: translateY(0) scale(1); }
}
/* ─────────────────────────────────────────────────────────────────
LAYERED VISUAL STAGE — premium "Launch-Strategy"-style composition.
The stage is a relative container holding:
· .psr-stage-bg — ambient brand-tinted backdrop (breathes)
· .psr-media — main GIF visual hero (idle Y-float, mouse parallax)
· .psr-float-top — floating "live sync" chip overlapping top-right
· .psr-float-bottom — floating mini-metric card overlapping bottom-left
Each layer animates on a different rhythm and parallaxes at a
different intensity, producing layered z-depth.
--mx / --my are CSS variables set by the parallax JS handler in
the [-0.5, 0.5] range.
───────────────────────────────────────────────────────────────── */
.psr-stage{
position: relative;
margin-top: 22px;
padding: 10px 10px 14px;
isolation: isolate;
}
/* Ambient brand-tinted backdrop — soft radial wash behind the GIF.
Counter-parallax (moves opposite cursor) for furthest-back depth. */
.psr-stage-bg{
position: absolute;
inset: 0;
background:
radial-gradient(60% 70% at 50% 55%, var(--pa-accent-soft) 0%, transparent 72%);
filter: blur(8px);
opacity: .55;
z-index: 0;
pointer-events: none;
border-radius: 24px;
transform: translate3d(
calc(var(--mx, 0) * -4px),
calc(var(--my, 0) * -3px),
0
);
animation: psrStageBreathe 8s ease-in-out infinite alternate;
transition: transform .6s cubic-bezier(.22, .61, .36, 1);
}
@keyframes psrStageBreathe{
0% { opacity: .42; scale: .96; }
100% { opacity: .68; scale: 1.04; }
}
/* Main GIF — matches the Persona scene-card "sc-1" motion DNA:
· transform → mouse parallax CO-direction with cursor (10px × mx,
8px × my) so it reads as the foreground layer.
· translate → idle Y-float ±8px, 6.5s ease-in-out infinite alternate
(mirror of scFloat1).
· scale + translate via psrMediaEnter → one-shot slide-up + scale-up
reveal (22px / .97), backwards fill so the from-state
applies during the .10s pre-delay.
These three motion channels live on three different CSS properties
(transform, translate, scale) so they compose without fighting. */
.psr-media{
position: relative;
z-index: 1;
width: 100%;
aspect-ratio: 16 / 9;
border-radius: 14px;
overflow: hidden;
backg round: linear-gradient(135deg, var(--pa-accent-soft) 0%, rgba(255, 255, 255, 1) 100%);
border: 1px solid rgba(255, 255, 255, .9);
box-shadow:
0 1px 3px rgba(16, 24, 40, .06),
0 24px 48px -20px rgba(14, 72, 165, .22),
0 12px 24px -16px rgba(85, 41, 142, .10),
inset 0 1px 0 rgba(255, 255, 255, .6);
animation:
psrMediaEnter .65s cubic-bezier(.22, .61, .36, 1) .10s backwards,
psrMediaFloat 6.5s ease-in-out 1s infinite alternate;
will-change: translate, transform, box-shadow;
transform: translate3d(
calc(var(--mx, 0) * 10px),
calc(var(--my, 0) * 8px),
0
);
transition:
box-shadow .4s ease,
transform .25s ease-out;
}
.psr-media:hover{
box-shadow:
0 1px 3px rgba(16, 24, 40, .08),
0 32px 60px -20px rgba(14, 72, 165, .28),
0 18px 34px -16px rgba(85, 41, 142, .14),
inset 0 1px 0 rgba(255, 255, 255, .7);
}
@keyframes psrMediaEnter{
from { opacity: 0; translate: 0 22px; scale: .97; }
to { opacity: 1; translate: 0 0; scale: 1; }
}
@keyframes psrMediaFloat{
0% { translate: 0 -8px; }
100% { translate: 0 8px; }
}
.psr-media img,
.psr-media video{
display: block;
width: 100%;
height: 100%;
object-fit: cover;
transition: opacity .35s ease, transform .45s cubic-bezier(.22, .61, .36, 1);
}
.ps-right.is-swapping .psr-media img,
.ps-right.is-swapping .psr-media video{
opacity: 0;
transform: scale(.985);
}
/* Swap state — fade the ambient backdrop alongside the GIF. */
.ps-right.is-swapping .psr-stage-bg{
opacity: 0;
transition: opacity .3s ease;
}
/* Reduced-motion — strip all idle/parallax/pulse animation in the stage. */
@media (prefers-reduced-motion: reduce){
.ps-right .psr-eyebrow,
.ps-right .psr-title,
.ps-right .psr-comp-chip,
.ps-right .psr-bullets,
.ps-right .psr-stat,
.ps-right .psr-stage,
.psr-media img,
.psr-media video{
transition: opacity .2s ease !important;
transform: none !important;
}
.psr-media,
.psr-stage-bg{
animation: none !important;
transform: none !important;
}
/* Strip the left-chip motion suite too — keep static chips */
.psb{
animation: none !important;
transform: none !important;
translate: 0 0 !important;
scale: 1 !important;
transition: background .2s ease, color .2s ease, border-color .2s ease !important;
}
/* And the left box's idle float + hover lift — keep static */
.ps-left{
animation: none !important;
transform: none !important;
translate: 0 0 !important;
scale: 1 !important;
transition: box-shadow .2s ease, border-color .2s ease, background .2s ease !important;
}
/* Success + Testimonial — kill idle/parallax/reveal animations */
.story-card,
.testimonial-card,
.testimonial-tab{
animation: none !important;
transform: none !important;
translate: 0 0 !important;
scale: 1 !important;
opacity: 1 !important;
}
/* Features marquee — stop the infinite loop; let the track scroll
horizontally instead so the cards remain accessible. */
.features-track{
animation: none !important;
transform: none !important;
}
.features-marquee{
overflow-x: auto;
-webkit-mask-image: none !important;
mask-image: none !important;
}
}
/* ===========================================================
* Section: Success Stories — carousel (Figma 994:29866)
* ----------------------------------------------------------- */
/* ─────────────────────────────────────────────────────────────────
SUCCESS STORIES — premium SaaS theme. Brand palette (Turquoise /
SkyBlue) drives accent on the eyebrow, gradient on the headline,
and the glow tints inside card shadows.
Cards use the same motion DNA as Persona scene cards:
· transform → mouse parallax co-direction
· translate → idle Y-float (varied rhythms via nth-child)
· scale → hover lift
Stagger reveal fires when the carousel enters the viewport. */
.section-success{
--ss-accent: var(--Turquoise-SkyBlue-500, #1ca9c9);
--ss-accent-secondary: var(--SkyBlue-SkyBlue-500, #12b6f8);
--ss-accent-glow-a: rgba(28, 169, 201, .22);
--ss-accent-glow-b: rgba(18, 182, 248, .14);
--ss-accent-soft: rgba(28, 169, 201, .08);
--ss-accent-border: rgba(28, 169, 201, .22);
background: var(--Base-White, #fcfcfc);
padding: 88px 0 96px;
position: relative;
z-index: 2;
isolation: isolate;
}
.success-intro{
text-align: center;
max-width: 840px;
margin: 0 auto 48px;
}
.success-eyebrow{
display: inline-flex;
align-items: center;
gap: 10px;
font-family: 'Inter', sans-serif;
font-weight: 500;
font-size: 11px;
line-height: 16px;
letter-spacing: 1.6px;
text-transform: uppercase;
color: var(--ss-accent);
background: linear-gradient(135deg, var(--ss-accent-soft) 0%, rgba(18, 182, 248, .08) 100%);
border: 1px solid var(--ss-accent-border);
padding: 7px 16px;
border-radius: 50px;
margin: 0 0 22px;
}
.success-eyebrow .se-dot{
width: 6px;
height: 6px;
border-radius: 50%;
background: linear-gradient(135deg, var(--ss-accent) 0%, var(--ss-accent-secondary) 100%);
box-shadow: 0 0 0 3px rgba(28, 169, 201, .12);
}
.section-success h2{
font-family: 'Space Grotesk', sans-serif;
font-weight: 300;
font-size: 44px;
line-height: 54px;
text-align: center;
color: var(--cool-101828, #101828);
margin: 0 0 18px;
letter-spacing: -.6px;
}
.section-success h2 .sh-accent{
background: linear-gradient(135deg,
var(--ss-accent) 0%,
var(--ss-accent-secondary) 55%,
var(--Violet-Violet-450, #7747b6) 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
font-style: italic;
}
.section-success .section-sub{
font-family: 'inter', serif;
font-weight: 400;
font-size: 15px;
line-height: 28px;
color: #4a5568;
text-align: center;
max-width: 640px;
margin: 0 auto;
}
/* Carousel container — keeps grid layout; sets --mx/--my for cards. */
.stories-carousel{
display: grid;
grid-template-columns: 44px 1fr 44px;
gap: 28px;
align-items: center;
width: 100%;
margin: 0 auto;
position: relative;
}
/* "See all case studies" CTA — centered below the carousel (Figma 994:29867).
The button itself is .btn-primary (canonical gradient pill); this wrapper
only handles centering and top spacing so the CTA breathes from the cards. */
.success-cta{
display: flex;
justify-content: center;
margin-top: 36px;
/* Subtle entry — fades and slides up when the section scrolls into view,
reusing the storiesCarousel reveal trigger (.is-revealed sets on the
carousel; we tie the CTA's transition to it via the parent .container). */
opacity: 0;
transform: translateY(8px);
transition:
opacity .55s cubic-bezier(.22, .61, .36, 1) .35s,
transform .55s cubic-bezier(.22, .61, .36, 1) .35s;
}
.stories-carousel.is-revealed ~ .success-cta,
.section-success .stories-carousel.is-revealed + .success-cta{
opacity: 1;
transform: translateY(0);
}
@media (prefers-reduced-motion: reduce){
.success-cta{ opacity: 1; transform: none; transition: none; }
}
/* Premium round arrow buttons — soft white surface, brand-glow shadow,
hover lift + scale matching the chip/box hover language. */
.stories-arrow{
width: 44px;
height: 44px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
background: rgba(255, 255, 255, .96);
border: 1px solid rgba(228, 232, 243, .85);
color: var(--ss-accent);
box-shadow:
0 1px 2px rgba(16, 24, 40, .05),
0 8px 18px -10px var(--ss-accent-glow-a);
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
transition:
transform .4s cubic-bezier(.22, .61, .36, 1),
scale .35s cubic-bezier(.22, .61, .36, 1),
box-shadow .4s ease,
border-color .35s ease,
color .35s ease;
}
.stories-arrow:hover{
scale: 1.06;
transform: translateY(-2px);
border-color: var(--ss-accent-border);
color: var(--ss-accent-secondary);
box-shadow:
0 1px 2px rgba(16, 24, 40, .07),
0 16px 30px -12px var(--ss-accent-glow-a),
0 8px 18px -8px var(--ss-accent-glow-b);
}
.stories-arrow:disabled,
.stories-arrow.is-disabled{
opacity: .35;
cursor: not-allowed;
pointer-events: none;
}
.stories-arrow svg{ width: 16px; height: 16px; }
.stories-viewport{
overflow: hidden;
padding: 8px 4px 32px; /* room for hover lift + idle float */
margin: -8px -4px -32px;
}
.stories-track{
display: flex;
gap: 24px;
transition: transform .65s cubic-bezier(.22, .61, .36, 1);
will-change: transform;
}
/* Story card — premium floating card with multi-layer brand-tinted
shadow + bright white border for that glassy "lit-from-above" feel.
Idle Y-float on `translate`, mouse parallax on `transform`, hover
lift via `scale` + an extra translateY ride inside the parallax calc
through `--story-hover-lift`. */
.story-card{
flex: 0 0 360px;
width: 360px;
background: rgba(255, 255, 255, .96);
border: 1px solid rgba(255, 255, 255, .9);
border-radius: 20px;
overflow: hidden;
display: flex;
flex-direction: column;
text-decoration: none;
position: relative;
box-shadow:
0 1px 3px rgba(16, 24, 40, .05),
0 18px 36px -18px rgba(14, 72, 165, .14),
0 10px 22px -14px rgba(85, 41, 142, .08),
inset 0 1px 0 rgba(255, 255, 255, .6);
--story-hover-lift: 0px;
transform: translate3d(
calc(var(--mx, 0) * 6px),
calc(var(--my, 0) * 4px + var(--story-hover-lift)),
0
);
transition:
transform .55s cubic-bezier(.22, .61, .36, 1),
scale .4s cubic-bezier(.22, .61, .36, 1),
box-shadow .5s cubic-bezier(.22, .61, .36, 1),
border-color .4s ease;
/* Reveal hidden until the carousel enters the viewport */
opacity: 0;
translate: 0 18px;
will-change: translate, transform, scale, box-shadow;
}
/* Once the JS adds .is-revealed on the carousel, cards stagger in
with their own delay AND begin a gentle idle Y-float on different
rhythms — borrowed straight from the Persona scene-card pattern. */
.stories-carousel.is-revealed .story-card{
animation:
storyCardReveal .7s cubic-bezier(.22, .61, .36, 1) var(--story-enter-delay, 0s) forwards,
storyCardIdle var(--story-idle-dur, 6.5s) ease-in-out var(--story-idle-delay, 1.4s) infinite alternate;
}
.story-card:nth-child(1){ --story-enter-delay: 0s; --story-idle-dur: 6.4s; --story-idle-delay: 1.2s; }
.story-card:nth-child(2){ --story-enter-delay: .08s; --story-idle-dur: 7.0s; --story-idle-delay: 1.4s; }
.story-card:nth-child(3){ --story-enter-delay: .16s; --story-idle-dur: 6.6s; --story-idle-delay: 1.6s; }
.story-card:nth-child(4){ --story-enter-delay: .24s; --story-idle-dur: 7.4s; --story-idle-delay: 1.8s; }
.story-card:nth-child(5){ --story-enter-delay: .32s; --story-idle-dur: 6.8s; --story-idle-delay: 2.0s; }
@keyframes storyCardReveal{
from { opacity: 0; translate: 0 18px; }
to { opacity: 1; translate: 0 0; }
}
@keyframes storyCardIdle{
0% { translate: 0 -4px; }
100% { translate: 0 4px; }
}
.story-card:hover{
--story-hover-lift: -4px;
scale: 1.015;
border-color: var(--ss-accent-border);
box-shadow:
0 1px 3px rgba(16, 24, 40, .07),
0 28px 56px -20px var(--ss-accent-glow-a),
0 16px 32px -16px var(--ss-accent-glow-b),
inset 0 1px 0 rgba(255, 255, 255, .8);
}
.story-card .story-image{
height: 200px;
overflow: hidden;
background: linear-gradient(135deg, var(--ss-accent-soft) 0%, rgba(255, 255, 255, 1) 100%);
position: relative;
}
.story-card .story-image img{
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: scale .6s cubic-bezier(.22, .61, .36, 1);
}
.story-card:hover .story-image img{
scale: 1.04;
}
.story-card .story-body{
padding: 22px 22px 24px;
display: flex;
flex-direction: column;
flex: 1;
gap: 0;
}
.story-card .story-eyebrow{
display: inline-flex;
align-items: center;
gap: 8px;
font-family: 'Inter', sans-serif;
font-weight: 600;
font-size: 11px;
line-height: 16px;
color: var(--ss-accent);
text-transform: uppercase;
letter-spacing: 1.4px;
margin: 0 0 14px;
}
.story-card .story-eyebrow .story-eyebrow-dot{
width: 5px;
height: 5px;
border-radius: 50%;
background: linear-gradient(135deg, var(--ss-accent) 0%, var(--ss-accent-secondary) 100%);
box-shadow: 0 0 0 3px var(--ss-accent-soft);
}
.story-card .story-title{
font-family: 'Space Grotesk', sans-serif;
font-weight: 400;
font-size: 19px;
line-height: 28px;
color: var(--cool-101828, #101828);
letter-spacing: -.3px;
margin: 0 0 22px;
flex: 1;
}
.story-card .story-link{
display: inline-flex;
align-items: center;
gap: 8px;
font-family: 'Inter', sans-serif;
font-weight: 500;
font-size: 13.5px;
line-height: 20px;
color: var(--ss-accent);
letter-spacing: -.1px;
align-self: flex-start;
transition: color .35s ease, gap .35s cubic-bezier(.22, .61, .36, 1);
}
.story-card:hover .story-link{
color: var(--ss-accent-secondary);
gap: 12px;
}
.story-card .story-link svg{
width: 14px;
height: 14px;
transition: transform .35s cubic-bezier(.22, .61, .36, 1);
}
.story-card:hover .story-link svg{ transform: translateX(2px); }
/* ===========================================================
* Section: Testimonials — tabs + big quote (Figma 994:29873)
* ----------------------------------------------------------- */
/* ─────────────────────────────────────────────────────────────────
TESTIMONIALS — premium SaaS theme. Brand palette: Royal Blue +
Violet. Outer card is a single floating glass surface; tabs are
chip cards (mirroring the pricing .psb hover/active language);
quote text is Space Grotesk serif for editorial weight. Auto-tab
rotation in JS triggers a fade swap via .is-swapping. */
.section-testimonial{
--ts-accent: var(--Royal-Blue-Blue-500, #0e48a5);
--ts-accent-secondary: var(--Violet-Violet-450, #7747b6);
--ts-accent-glow-a: rgba(14, 72, 165, .18);
--ts-accent-glow-b: rgba(85, 41, 142, .14);
--ts-accent-soft: rgba(14, 72, 165, .07);
--ts-accent-border: rgba(14, 72, 165, .22);
/* Long, many-stop fade from solid white to fully transparent —
gives the blurred Figma gradient (painted by .page-finale::before
extending up into this zone) plenty of runway to bloom through
gradually. No abrupt opacity step = no perceptible band. */
background: linear-gradient(180deg,
var(--Base-White, #fcfcfc) 0%,
var(--Base-White, #fcfcfc) 58%,
rgba(252, 252, 252, .92) 68%,
rgba(252, 252, 252, .75) 76%,
rgba(252, 252, 252, .55) 83%,
rgba(252, 252, 252, .35) 89%,
rgba(252, 252, 252, .18) 94%,
rgba(252, 252, 252, .06) 97%,
rgba(252, 252, 252, 0) 100%);
padding: 96px 0 180px;
position: relative;
/* Higher than .page-finale so the testimonial card paints over
the page-finale's blurred ::before that reaches up into here. */
z-index: 3;
isolation: isolate;
}
.section-testimonial::after{ content: none; }
.testimonial-intro{
text-align: center;
max-width: 840px;
margin: 0 auto 56px;
position: relative;
z-index: 2;
}
.testimonial-eyebrow{
display: inline-flex;
align-items: center;
gap: 10px;
font-family: 'Inter', sans-serif;
font-weight: 500;
font-size: 11px;
line-height: 16px;
letter-spacing: 1.6px;
text-transform: uppercase;
color: var(--ts-accent);
background: linear-gradient(135deg, var(--ts-accent-soft) 0%, rgba(85, 41, 142, .06) 100%);
border: 1px solid var(--ts-accent-border);
padding: 7px 16px;
border-radius: 50px;
margin: 0 0 22px;
}
.testimonial-eyebrow .te-dot{
width: 6px;
height: 6px;
border-radius: 50%;
background: linear-gradient(135deg, var(--ts-accent) 0%, var(--ts-accent-secondary) 100%);
box-shadow: 0 0 0 3px rgba(14, 72, 165, .12);
}
.section-testimonial h2{
font-family: 'Space Grotesk', sans-serif;
font-weight: 300;
font-size: 44px;
line-height: 54px;
text-align: center;
color: var(--cool-101828, #101828);
margin: 0 0 18px;
letter-spacing: -.6px;
}
.section-testimonial h2 .th-accent{
background: linear-gradient(135deg,
var(--ts-accent) 0%,
var(--ts-accent-secondary) 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
font-style: italic;
}
.section-testimonial .section-sub{
font-family: 'inter', serif;
font-weight: 400;
font-size: 15px;
line-height: 28px;
color: #4a5568;
text-align: center;
max-width: 640px;
margin: 0 auto;
}
/* Outer testimonial card — premium floating glass surface with
multi-layer brand-tinted shadow + bright white inset highlight.
Gentle idle Y-float so it feels alive, and a subtle cursor parallax
driven by --mx / --my (set by the JS handler attached to this card). */
.testimonial-card{
position: relative;
z-index: 2;
background: rgba(255, 255, 255, .98);
border: 1px solid rgba(255, 255, 255, .9);
border-radius: 28px;
padding: 56px 56px 52px;
width: 100%;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 44px;
box-shadow:
0 1px 3px rgba(16, 24, 40, .05),
0 32px 64px -28px var(--ts-accent-glow-a),
0 18px 36px -22px var(--ts-accent-glow-b),
inset 0 1px 0 rgba(255, 255, 255, .7);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
will-change: translate, transform, box-shadow;
transform: translate3d(
calc(var(--mx, 0) * 6px),
calc(var(--my, 0) * 4px),
0
);
animation: testimonialCardIdle 8s ease-in-out 1.5s infinite alternate;
transition:
transform .55s cubic-bezier(.22, .61, .36, 1),
box-shadow .5s cubic-bezier(.22, .61, .36, 1),
border-color .4s ease;
}
@keyframes testimonialCardIdle{
0% { translate: 0 -3px; }
100% { translate: 0 3px; }
}
.testimonial-card:hover{
border-color: var(--ts-accent-border);
box-shadow:
0 1px 3px rgba(16, 24, 40, .06),
0 40px 80px -28px var(--ts-accent-glow-a),
0 22px 44px -22px var(--ts-accent-glow-b),
inset 0 1px 0 rgba(255, 255, 255, .85);
}
/* ── Tabs row — chip cards mirroring the pricing .psb hover language ── */
.testimonial-tabs{
display: flex;
gap: 12px;
align-items: stretch;
justify-content: flex-start;
width: 100%;
flex-wrap: wrap;
}
.testimonial-tab{
background: rgba(255, 255, 255, .94);
border: 1px solid rgba(228, 232, 243, .85);
border-radius: 14px;
padding: 12px 16px;
cursor: pointer;
text-align: left;
display: flex;
flex-direction: column;
gap: 4px;
min-width: 240px;
flex: 0 1 auto;
position: relative;
box-shadow:
0 1px 2px rgba(16, 24, 40, .04),
0 6px 16px -10px var(--ts-accent-glow-a);
--tt-hover-lift: 0px;
transform: translate3d(0, var(--tt-hover-lift), 0);
transition:
transform .5s cubic-bezier(.22, .61, .36, 1),
scale .4s cubic-bezier(.22, .61, .36, 1),
box-shadow .45s cubic-bezier(.22, .61, .36, 1),
background .4s ease,
border-color .4s ease,
color .35s ease;
}
.testimonial-tab .tt-name{
font-family: 'Inter', sans-serif;
font-weight: 600;
font-size: 14px;
line-height: 20px;
color: var(--cool-101828, #101828);
white-space: nowrap;
transition: color .35s ease;
}
.testimonial-tab .tt-role{
font-family: 'Inter', sans-serif;
font-weight: 400;
font-size: 12px;
line-height: 16px;
color: #4a5568;
white-space: nowrap;
}
.testimonial-tab:hover:not(.is-active){
--tt-hover-lift: -3px;
scale: 1.02;
border-color: var(--ts-accent-border);
box-shadow:
0 1px 2px rgba(16, 24, 40, .05),
0 14px 28px -12px var(--ts-accent-glow-a),
0 6px 14px -8px var(--ts-accent-glow-b);
}
.testimonial-tab.is-active{
backg round: var(--ts-accent-soft);
border-color: var(--ts-accent-border);
box-shadow:
0 1px 2px rgba(16, 24, 40, .05),
0 18px 36px -14px var(--ts-accent-glow-a),
0 8px 18px -8px var(--ts-accent-glow-b),
inset 0 1px 0 rgba(255, 255, 255, .9);
}
.testimonial-tab.is-active .tt-name{
color: var(--ts-accent);
font-weight: 600;
}
/* ── Quote body — editorial Space Grotesk text, brand-gradient quote mark ── */
.testimonial-body{
display: flex;
gap: 36px;
align-items: flex-start;
width: 100%;
transition:
opacity .4s ease,
transform .5s cubic-bezier(.22, .61, .36, 1);
}
.testimonial-card.is-swapping .testimonial-body{
opacity: 0;
transform: translateY(8px);
}
.testimonial-body .quote-mark{
flex: 0 0 80px;
width: 80px;
height: 80px;
color: var(--ts-accent);
opacity: .35;
/* Brand-gradient via mask so the SVG fill becomes a gradient */
background: linear-gradient(135deg, var(--ts-accent) 0%, var(--ts-accent-secondary) 100%);
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
opacity: .85;
}
.testimonial-body .quote-mark svg{ display: none; }
.testimonial-body .quote-content{
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 28px;
}
.testimonial-body .quote-text{
font-family: 'inter', serif;
font-weight: 400;
font-size: 15px;
line-height: 36px;
color: var(--cool-101828, #101828);
margin: 0;
letter-spacing: -.2px;
white-space: pre-wrap;
font-style: italic;
}
.testimonial-body .quote-meta{
display: flex;
flex-direction: column;
gap: 4px;
}
.testimonial-body .quote-stars{
display: inline-flex;
align-items: center;
gap: 2px;
height: 14px;
margin-bottom: 8px;
}
.testimonial-body .quote-stars svg{
width: 14px;
height: 14px;
color: var(--ts-accent);
filter: drop-shadow(0 1px 2px var(--ts-accent-glow-a));
}
.testimonial-body .quote-name{
font-family: 'Inter', sans-serif;
font-weight: 700;
font-size: 15px;
line-height: 24px;
color: var(--cool-101828, #101828);
margin: 0;
}
.testimonial-body .quote-role{
font-family: 'Inter', sans-serif;
font-weight: 400;
font-size: 13.5px;
line-height: 22px;
color: #4a5568;
margin: 0;
}
/* ===========================================================
* Section: Trust / Before You Decide / CTA (Figma 994:29874)
* ----------------------------------------------------------- */
/* Page finale wrapper — reproduces Figma Rectangle 1265 (node 994:29996)
EXACTLY: a tall violet→navy linear gradient rectangle with
`filter: blur(100px)` that physically extends ABOVE the page-finale
into the testimonial's transparent bottom zone. The heavy blur
diffuses the rectangle's top edge softly across the section
boundary, so the transition from white → violet → navy reads as one
continuous Gaussian wash with zero separation line. */
.page-finale{
position: relative;
z-index: 2;
/* No solid bg — the blurred ::before is the sole gradient paint
across the section so there's no "solid-vs-blurred" color
mismatch at the testimonial boundary. Body's dark navy bg sits
behind it as a fallback, fully obscured by ::before. */
background: transparent;
overflow: visible;
isolation: isolate;
}
.page-finale::before{
content: "";
position: absolute;
/* Stays within page-finale's width — blur diffuses ~100px outward,
which the body's overflow-x: hidden clips harmlessly. */
left: 0;
right: 0;
/* Extends UP further into the testimonial's transparent zone so
the ::before's own top blur-edge is well above where it becomes
visible — by the time the testimonial reveals it, the gradient
is at fully-saturated solid violet, no top-edge softening. */
top: -400px;
/* Stops at page-finale's bottom — no off-screen extension below
(the gradient is already at solid #051A3C here, so the blur edge
blends invisibly into the body's dark navy bg). Saves 240px of
extra scroll height at the bottom of the page. */
bottom: 0;
/* Exact Figma stops (Rectangle 1265, node 994:29996) */
background: linear-gradient(179deg,
#55298E 0%,
#55298E 16.14%,
#031430 58.228%,
#051A3C 78.04%,
#051A3C 100%);
/* Heavy Gaussian blur — matches Figma's filter: blur(100px). */
filter: blur(100px);
pointer-events: none;
z-index: 0;
}
.section-trust{
position: relative;
background: transparent;
color: var(--Base-White, #fcfcfc);
padding: 80px 0 64px;
overflow: hidden;
z-index: 2;
}
.section-trust .container{ position: relative; z-index: 2; }
.trust-row{
display: grid;
grid-template-columns: 1fr auto;
gap: 56px;
align-items: center;
padding-bottom: 56px;
border-bottom: 1px solid rgba(159, 186, 228, .15);
}
.trust-row h2{
/* Canonical sitewide H2 — Space Grotesk 300 / 44px / 54px / -0.6px tracking.
Alignment stays left here because this H2 sits in a 2-column grid
beside the compliance badges, not a centered heading layout. */
font-family: 'Space Grotesk', sans-serif;
font-weight: 300;
font-size: 44px;
line-height: 54px;
letter-spacing: -.6px;
color: var(--Base-White, #fcfcfc);
margin: 0;
}
.trust-badges{
display: flex;
gap: 28px;
align-items: center;
}
.trust-badges img{
width: 140px;
height: 140px;
object-fit: contain;
display: block;
}
.before-decide{
display: grid;
/* Intro stays compact on the left; FAQ takes whatever remains of
the container width. Drops the previous 370+590 fixed-width
cluster so the whole row spans the full container. */
grid-template-columns: minmax(280px, 380px) 1fr;
gap: 64px;
padding: 56px 0 0;
border-bottom: none;
align-items: start;
}
.before-decide .bd-intro{
display: flex;
flex-direction: column;
gap: 28px;
}
.before-decide h3{
font-family: 'Space Grotesk', sans-serif;
font-weight: 500;
font-size: 28px;
line-height: 36px;
letter-spacing: -0.3px;
color: var(--Base-White, #fcfcfc);
margin: 0;
}
.before-decide .lead{
color: var(--Map-Grey, #eaeaea);
font-size: 15px;
line-height: 26px;
margin: 0;
}
/* FAQ accordion (right column) */
.bd-faq{
width: 100%;
}
.bd-faq .faq-item{
border-top: 1px solid rgba(251, 251, 251, .22);
padding: 24px 0;
}
.bd-faq .faq-item:last-child{
border-bottom: 1px solid rgba(251, 251, 251, .22);
}
.bd-faq .faq-q{
display: flex;
gap: 31px;
align-items: flex-start;
cursor: pointer;
background: none;
border: none;
padding: 0;
width: 100%;
text-align: left;
}
.bd-faq .faq-num{
flex: 0 0 32px;
width: 32px;
font-family: 'Inter', sans-serif;
font-weight: 400;
font-size: 15px;
line-height: 26px;
color: var(--Base-White, #fcfcfc);
}
.bd-faq .faq-text{
flex: 1;
font-family: 'Inter', sans-serif;
font-weight: 700;
font-size: 15px;
line-height: 25px;
color: var(--Grey-Grey-100, #fbfbfb);
}
.bd-faq .faq-toggle{
flex: 0 0 16px;
width: 16px;
height: 16px;
margin-top: 4px;
position: relative;
transition: transform .25s ease;
color: var(--Base-White, #fcfcfc);
}
.bd-faq .faq-toggle::before,
.bd-faq .faq-toggle::after{
content: "";
position: absolute;
background: currentColor;
border-radius: 2px;
}
.bd-faq .faq-toggle::before{ /* horizontal bar */
top: 50%;
left: 0;
width: 16px;
height: 2px;
transform: translateY(-50%);
}
.bd-faq .faq-toggle::after{ /* vertical bar */
left: 50%;
top: 0;
width: 2px;
height: 16px;
transform: translateX(-50%);
transition: opacity .25s ease;
}
.bd-faq .faq-item.is-open .faq-toggle::after{ opacity: 0; }
.bd-faq .faq-answer{
max-height: 0;
overflow: hidden;
transition: max-height .35s ease, padding .35s ease, opacity .3s ease;
opacity: 0;
padding-left: 63px;
}
.bd-faq .faq-item.is-open .faq-answer{
max-height: 320px;
opacity: 1;
padding-top: 16px;
}
.bd-faq .faq-answer p{
font-family: 'Inter', sans-serif;
font-weight: 400;
font-size: 15px;
line-height: 26px;
color: var(--Map-Grey, #eaeaea);
margin: 0;
}
/* ===========================================================
* Section: Footer (now contains the "Got more questions?" banner)
* ----------------------------------------------------------- */
.site-footer{
background: transparent;
color: var(--Base-White, #fcfcfc);
padding: 72px 0 32px;
position: relative;
z-index: 2;
}
/* Footer CTA banner — premium glass panel with brand-tinted background,
pale brand-blue border, soft violet halo behind, and a sparkle eyebrow.
Was washing out at 18-22% opacity against the navy footer; bumped to
richer brand gradient + brighter border + radial halo glow so the
panel clearly reads as a CTA without competing with the body copy. */
.footer-cta{
position: relative;
isolation: isolate;
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 32px;
padding: 36px 44px;
border-radius: 22px;
background:
linear-gradient(135deg,
rgba(85, 41, 142, .42) 0%,
rgba(14, 72, 165, .36) 50%,
rgba(28, 169, 201, .26) 100%);
border: 1px solid rgba(159, 186, 228, .35);
box-shadow:
0 1px 2px rgba(0, 0, 0, .25),
0 24px 56px -22px rgba(85, 41, 142, .55),
0 8px 24px -10px rgba(28, 169, 201, .25),
inset 0 1px 0 rgba(255, 255, 255, .14),
inset 0 0 0 1px rgba(255, 255, 255, .04);
-webkit-backdrop-filter: blur(14px);
backdrop-filter: blur(14px);
margin-bottom: 64px;
overflow: hidden;
transition:
transform .35s cubic-bezier(.22, .61, .36, 1),
border-color .35s ease,
box-shadow .45s ease;
}
/* Decorative soft halo — large radial gradient that bleeds violet light
into the bottom-left corner. Pure decoration; pointer-events off. */
.footer-cta-halo{
position: absolute;
z-index: -1;
inset: -40% -10% -10% -10%;
background:
radial-gradient(ellipse 55% 70% at 20% 80%, rgba(119, 71, 182, .35) 0%, transparent 60%),
radial-gradient(ellipse 50% 65% at 85% 25%, rgba(28, 169, 201, .22) 0%, transparent 60%);
filter: blur(20px);
pointer-events: none;
opacity: .9;
transition: opacity .45s ease;
}
/* Subtle moving shimmer along the top edge — animates 10s, very gentle */
.footer-cta::before{
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
background: linear-gradient(105deg,
transparent 30%,
rgba(255, 255, 255, .06) 50%,
transparent 70%);
background-size: 220% 100%;
background-position: 0% 0%;
pointer-events: none;
animation: footerCtaShimmer 11s ease-in-out infinite;
z-index: 0;
}
@keyframes footerCtaShimmer{
0%, 100% { background-position: -120% 0%; opacity: .6; }
50% { background-position: 120% 0%; opacity: 1; }
}
.footer-cta:hover{
transform: translateY(-2px);
border-color: rgba(159, 186, 228, .55);
box-shadow:
0 1px 2px rgba(0, 0, 0, .28),
0 32px 68px -22px rgba(85, 41, 142, .68),
0 12px 30px -10px rgba(28, 169, 201, .32),
inset 0 1px 0 rgba(255, 255, 255, .2),
inset 0 0 0 1px rgba(255, 255, 255, .06);
}
.footer-cta:hover .footer-cta-halo{ opacity: 1; }
.footer-cta-text{
flex: 1 1 auto;
min-width: 280px;
position: relative;
z-index: 1;
}
/* Eyebrow chip — sparkle + label, sets visual hierarchy and signals "this
is a CTA, not body copy" before the heading even reads. */
.footer-cta-eyebrow{
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 12px 4px 10px;
margin-bottom: 12px;
border-radius: 999px;
background: rgba(255, 255, 255, .08);
border: 1px solid rgba(159, 186, 228, .28);
color: #cfe2ff;
font-family: 'Inter', sans-serif;
font-size: 11px;
font-weight: 600;
letter-spacing: .35px;
text-transform: uppercase;
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
}
.footer-cta-eyebrow svg{
color: var(--Turquoise-SkyBlue-500, #1ca9c9);
animation: footerCtaSparkle 3.6s linear infinite;
}
@keyframes footerCtaSparkle{
0%, 100% { transform: rotate(0); opacity: 1; }
50% { transform: rotate(180deg); opacity: .7; }
}
.footer-cta-text h3{
font-family: 'Space Grotesk', sans-serif;
font-weight: 500;
font-size: 28px;
line-height: 36px;
color: #ffffff;
margin: 0 0 8px;
letter-spacing: -0.3px;
/* Tiny shadow lifts the white off the busy backdrop without looking heavy */
text-shadow: 0 2px 12px rgba(0, 0, 0, .25);
}
.footer-cta-text p{
color: rgba(255, 255, 255, .86);
font-size: 15px;
line-height: 24px;
margin: 0;
max-wi dth: 560px;
}
/* The Get-in-Touch CTA inside the banner sits above all decorative layers */
.footer-cta .footer-cta-button{ position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce){
.footer-cta::before{ animation: none; opacity: .4; }
.footer-cta-eyebrow svg{ animation: none; }
.footer-cta:hover{ transform: none; }
}
.footer-cta-button{
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--Base-White, #fcfcfc);
color: var(--Royal-Blue-Blue-700, #0a2d68);
padding: 12px 22px;
border-radius: 50px;
font-family: 'Inter', sans-serif;
font-weight: 600;
font-size: 14.5px;
line-height: 20px;
border: 1px solid transparent;
text-decoration: none;
box-shadow:
0 1px 2px rgba(16, 24, 40, .12),
0 10px 24px -10px rgba(14, 72, 165, .45);
transition:
transform .35s cubic-bezier(.22, .61, .36, 1),
box-shadow .4s ease,
background .35s ease,
color .35s ease;
white-space: nowrap;
}
.footer-cta-button svg{ transition: transform .35s cubic-bezier(.22, .61, .36, 1); }
.footer-cta-button:hover{
transform: translateY(-2px);
box-shadow:
0 1px 2px rgba(16, 24, 40, .14),
0 16px 30px -10px rgba(14, 72, 165, .55);
}
.footer-cta-button:hover svg{ transform: translateX(3px); }
.site-footer .footer-nav{
display: grid;
grid-template-columns: 1.3fr repeat(5, 1fr);
gap: 40px;
padding-top: 56px;
border-top: 1px solid rgba(159, 186, 228, .12);
}
.brand-col .brand-logo{
display: flex;
align-items: center;
gap: 16px;
margin-bottom: 28px;
}
.brand-col .brand-logo-img{
height: 32px;
width: auto;
display: block;
}
.brand-col .gptw-badge{
height: 48px;
width: auto;
display: block;
}
.ask-ai-box{
background: rgba(252, 252, 252, .04);
border: 1px solid rgba(159, 186, 228, .15);
border-radius: 12px;
padding: 18px;
margin-bottom: 28px;
max-width: 220px;
}
.ask-ai-box .ask-ai-label{
font-family: 'Space Grotesk', sans-serif;
font-weight: 300;
font-size: 18px;
line-height: 26px;
color: var(--Base-White, #fcfcfc);
margin-bottom: 14px;
}
.ask-ai-icons{ display: flex; gap: 8px; }
.ask-ai-icons a{
width: 32px;
height: 32px;
border-radius: 50%;
background: rgba(255, 255, 255, .05);
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid rgba(159, 186, 228, .12);
transition: background .25s ease;
}
.ask-ai-icons a:hover{ background: rgba(255, 255, 255, .1); }
.follow-us-label{
font-size: 12px;
text-transform: uppercase;
letter-spacing: .12em;
color: rgba(252, 252, 252, .6);
margin: 0 0 14px;
}
.social-list{ display: flex; gap: 10px; }
.social-list a{
width: 36px;
height: 36px;
border-radius: 50%;
background: rgba(255, 255, 255, .05);
border: 1px solid rgba(159, 186, 228, .12);
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--Base-White, #fcfcfc);
transition: background .25s ease;
}
.social-list a:hover{ background: var(--Royal-Blue-Blue-500, #0e48a5); }
.footer-col h4{
font-family: 'Inter', sans-serif;
font-weight: 700;
font-size: 16px;
color: var(--SkyBlue-SkyBlue-500, #12b6f8);
margin: 0 0 16px;
padding-bottom: 12px;
border-bottom: 1px solid rgba(159, 186, 228, .12);
}
.footer-col h4.col-spaced{ margin-top: 32px; }
.footer-col ul li{ margin-bottom: 10px; }
.footer-col ul li a{
color: var(--Base-White, #fcfcfc);
font-size: 14px;
line-height: 20px;
transition: color .2s ease;
}
.footer-col ul li a:hover{ color: var(--SkyBlue-SkyBlue-500, #12b6f8); }
.copyright{
margin-top: 32px;
padding-top: 20px;
border-top: 1px solid rgba(159, 186, 228, .12);
display: flex;
justify-content: space-between;
flex-wrap: wrap;
gap: 16px;
align-items: center;
}
.copyright p{
color: rgba(252, 252, 252, .7);
font-size: 14px;
}
.legal-links{ display: flex; gap: 26px; }
.legal-links a{
color: rgba(252, 252, 252, .7);
font-size: 14px;
}
.legal-links a:hover{ color: var(--SkyBlue-SkyBlue-500, #12b6f8); }
/* ===========================================================
* Responsive
* ----------------------------------------------------------- */
@media (max-width: 1199px){
.site-footer .footer-nav{ grid-template-columns: 1fr repeat(3, 1fr); row-gap: 48px; }
.brand-col{ grid-column: 1 / -1; }
.product-stage{ gap: 40px; }
}
@media (max-width: 991px){
/* Wrap instead of hiding — keeps the full promo message + Register
Now link visible on every width (matches index.html's pattern).
Doubled-class + !important: this bundle has an unconditional
.hello-bar{ padding: 1px !important } rule (for the transparent
hero header) that a plain selector here can't beat regardless of
source order — matching final-home-bundle.css's fix. */
.hello-bar.hello-bar{ padding: 18px 24px 20px !important; flex-wrap: wrap; row-gap: 12px; }
.hello-bar .hello-left{ flex-wrap: wrap; row-gap: 12px; }
.hello-bar .hello-badge.hello-badge{ font-size: 10px !important; padding: 3px 8px !important; }
.hello-bar .hello-msg-group{ flex-wrap: wrap; row-gap: 6px; }
.hello-bar .hello-message{ white-space: normal; }
/* Reachable inside the mobile-nav-panel instead, as a plain nav item. */
.hello-bar .hello-login{ display: none; }
.site-header{ padding: 14px 24px; height: auto; }
.site-header .nav-links{ display: none; }
.site-header .btn-demo{ display: none; }
/* Still reachable as a full-width CTA inside the mobile-nav-panel —
just decluttering the header row itself (matches index.html). */
.site-header .btn-start.btn-primary{ display: none; }
.hero-section{ padding: 70px 0 90px; min-height: auto; }
.hero-section h1{ font-size: 44px; line-height: 54px; }
.hero-section .hero-sub{ font-size: 17px; line-height: 26px; }
.hero-search-wrap{ width: 100%; }
.hero-search-inner{ min-height: auto; gap: 14px; }
.hero-search-footer{ flex-direction: column; gap: 12px; align-items: flex-start; }
/* Un-pin the product section on tablet/mobile — a 100vh pin would clip stacked content */
.section-products{ height: auto; }
.products-intro{ margin-bottom: 28px; }
.products-sticky{ position: static; height: auto; min-height: 0; padding: 64px 0; overflow: visible; }
.product-progress{ display: none; }
.product-stage{ grid-template-columns: 1fr; gap: 40px; min-height: 0; }
.product-detail{ padding: 0; }
.product-detail h3{ font-size: 24px; line-height: 32px; }
.trusted-section h3{ font-size: 19px; line-height: 28px; }
.products-head{ margin-bottom: 40px; }
.feature-grid,
.story-grid{ grid-template-columns: 1fr; }
.persona-explorer{ grid-template-columns: 1fr; gap: 48px; }
.pex-stage{ min-height: 380px; aspect-ratio: auto; }
.pex-text h3{ font-size: 24px; line-height: 32px; }
.px-tab{ font-size: 12.5px; padding: 7px 14px; }
.personas-intro{ margin-bottom: 56px; }
.pricing-switcher{ flex-wrap: wrap; margin-bottom: 48px; }
.ps-pill{ padding: 10px 18px 10px 12px; gap: 10px; }
.ps-name{ font-size: 14px; }
.ps-caption{ font-size: 11px; }
/* Showcase stacks vertically on tablet. No panel, no divider. */
.pricing-showcase{
grid-template-columns: 1fr;
row-gap: 36px;
column-gap: 0;
padding: 0;
}
.ps-flow{ display: none; }
.ps-left{ padding: 30px 28px 28px; border-radius: 20px; }
.ps-right{ padding: 0; }
.ps-title{ font-size: 26px; line-height: 36px; }
.pricing-intro{ margin-bottom: 56px; }
/* Unified tablet H2 sizing for every section, matching the canonical
site-wide H2 scale (44px desktop → 34px tablet → 26px mobile). */
.trusted-section h2,
.products-intro .products-title,
.section-features h2,
.section-personas h2,
.section-pricing h2,
.section-success h2,
.section-testimonial h2,
.trust-row h2{ font-size: 34px; line-height: 44px; }
.success-intro,
.testimonial-intro,
.features-intro{ margin-bottom: 44px; }
.features-track{ gap: 18px; animation-duration: 72s; }
.stories-carousel{ grid-template-columns: 40px 1fr 40px; gap: 20px; }
.story-card{ flex: 0 0 320px; width: 320px; }
.testimonial-card{ padding: 44px 36px 40px; border-radius: 22px; }
.testimonial-body{ flex-direction: column; gap: 24px; }
.testimonial-body .quote-mark{ flex: 0 0 56px; width: 56px; height: 56px; }
.testimonial-body .quote-text{ font-size: 15px; line-height: 32px; }
.trust-row{ grid-template-columns: 1fr; text-align: center; }
.trust-badges{ justify-content: center; }
.before-decide{ grid-template-columns: 1fr; gap: 32px; }
.before-decide ul{ grid-template-columns: 1fr; }
.site-footer .footer-nav{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 575px){
.container{ padding: 0 20px; }
.hello-bar.hello-bar{ padding: 18px 20px 20px !important; gap: 12px; row-gap: 12px; }
.hello-bar .hello-consult{ display: none; }
.site-header{ padding: 12px 20px; }
.site-header .brand-mark .brand-word{ font-size: 15px; }
.hero-section h1{ font-size: 34px; line-height: 44px; }
.hero-section .hero-sub{ font-size: 15px; line-height: 24px; }
.trusted-section h2,
.section-products h2,
.products-intro .products-title,
.section-features h2,
.section-personas h2,
.section-pricing h2,
.section-success h2,
.section-testimonial h2,
.trust-row h2{ font-size: 26px; line-height: 36px; }
.before-decide h3,
.footer-cta-text h3,
.trusted-section h3{ font-size: 20px; line-height: 28px; }
.product-detail h3{ font-size: 20px; line-height: 28px; }
.product-tab{ font-size: 13px; padding: 8px 14px; }
.pex-stage{ min-height: 360px; aspect-ratio: auto; }
.pex-text h3{ font-size: 20px; line-height: 28px; }
.scene-card{ padding: 14px 16px; border-radius: 14px; }
.scene-card.sc-1{ width: 72%; }
.scene-card.sc-2{ width: 60%; }
.scene-card.sc-3{ width: 70%; }
/* On tiny screens, the 1×4 KPI row gets too cramped — fall back to 2×2 */
.sc-grid{ grid-template-columns: 1fr 1fr; gap: 8px; }
.sc-num{ font-size: 24px; }
.sc-metric-num{ font-size: 32px; }
.sc-spark{ height: 44px; }
/* Pricing — mobile compaction */
/* Pricing — mobile compaction */
.pricing-switcher{ width: 100%; padding: 5px; }
.ps-pill{ flex: 1; justify-content: center; padding: 10px 12px; }
.pricing-showcase{ padding: 0; }
.ps-left{ padding: 24px 22px 22px; border-radius: 18px; }
.ps-title{ font-size: 22px; line-height: 32px; }
.psr-title{ font-size: 19px; line-height: 28px; }
.psr-stat-num{ font-size: 32px; }
.psr-stat-num small{ font-size: 20px; }
.psr-stat{ gap: 12px; }
.ps-cta{ width: 100%; justify-content: center; }
.psr-stage{ padding: 6px 4px 10px; margin-top: 16px; }
/* Success Stories — mobile compaction */
.success-intro,
.testimonial-intro,
.features-intro{ margin-bottom: 32px; }
.features-track{ gap: 14px; animation-duration: 80s; }
.features-marquee{ padding: 12px 12px 22px; margin: 0 -12px; }
.stories-carousel{ grid-template-columns: 36px 1fr 36px; gap: 12px; }
.stories-arrow{ width: 36px; height: 36px; }
.story-card{ flex: 0 0 280px; width: 280px; border-radius: 16px; }
.story-card .story-image{ height: 168px; }
.story-card .story-body{ padding: 18px; }
.story-card .story-title{ font-size: 16px; line-height: 24px; }
.testimonial-card{ padding: 32px 24px 28px; border-radius: 18px; gap: 32px; }
.testimonial-tab{ min-width: 100%; }
.testimonial-body .quote-text{ font-size: 15px; line-height: 28px; }
.testimonial-body .quote-mark{ flex: 0 0 48px; width: 48px; height: 48px; }
.footer-cta{ flex-direction: column; align-items: flex-start; padding: 28px; margin-bottom: 48px; }
.footer-cta-button{ width: 100%; justify-content: center; }
.site-footer .footer-nav{ padding-top: 48px; }
.site-footer .footer-nav{ grid-template-columns: 1fr; }
.copyright{ flex-direction: column; align-items: flex-start; }
.legal-links{ flex-wrap: wrap; gap: 16px; }
}
/* ===================================================================
EXPLORE OVERLAY — "Click to explore" → Ask Me demo
Mirrors the Figma prototype (node 801:13966): 10-scene storyboard
showing the simulated Ask Me AI workflow, ending in a free-message
paywall + signup modal.
Layout: full-viewport fixed overlay → 240px sidebar + flexible main
pane → top bar / scrollable canvas / composer. Brand palette
(royal blue → violet → turquoise) used for accents; backgrounds are
the same dark navy stack used in the page-finale / Trusted band.
=================================================================== */
.explore-overlay{
position: fixed; inset: 0;
z-index: 9000;
background: #0B1124;
opacity: 0;
visibility: hidden;
transition: opacity .35s cubic-bezier(.22,.61,.36,1), visibility 0s linear .35s;
color: #e2e8f0;
font-family: 'Inter', system-ui, sans-serif;
}
.explore-overlay.is-open{
opacity: 1; visibility: visible;
transition: opacity .35s cubic-bezier(.22,.61,.36,1), visibility 0s;
}
body.explore-locked{ overflow: hidden; }
.explore-shell{
position: relative;
width: 100%; height: 100%;
display: grid;
grid-template-columns: 240px 1fr;
background:
radial-gradient(ellipse at 18% 0%, rgba(85,41,142,.22) 0%, transparent 55%),
radial-gradient(ellipse at 100% 100%, rgba(14,72,165,.18) 0%, transparent 60%),
linear-gradient(180deg, #0B1124 0%, #0A0F22 100%);
}
/* ---------- Sidebar ---------- */
.ex-sidebar{
position: relative;
border-right: 1px solid rgba(255,255,255,.06);
padding: 18px 12px;
display: flex; flex-direction: column; gap: 24px;
}
.ex-sidebar-top{
display: flex; align-items: center; justify-content: space-between;
padding: 4px 6px;
}
.ex-brand{
display: inline-flex; align-items: center; gap: 6px;
font-weight: 700; letter-spacing: 1.5px; font-size: 12px;
}
.ex-brand-mark{
width: 22px; height: 22px; display: grid; place-items: center;
border-radius: 5px;
background: linear-gradient(135deg, #7747B6, #4075C9 55%, #1CA9C9);
color: #fff; font-weight: 800; font-size: 13px;
}
.ex-brand-text{ color: #cbd5e1; font-weight: 600; }
.ex-sidebar-collapse{
width: 26px; height: 26px;
background: transparent; border: 0; color: #94a3b8; cursor: pointer;
border-radius: 6px;
}
.ex-sidebar-collapse:hover{ background: rgba(255,255,255,.04); color: #e2e8f0; }
.ex-nav{ display: flex; flex-direction: column; gap: 4px; }
.ex-nav-item{
display: inline-flex; align-items: center; gap: 10px;
padding: 8px 10px;
background: transparent; border: 0;
color: #cbd5e1; font-size: 13px; text-align: left; cursor: pointer;
border-radius: 8px;
transition: background .18s, color .18s;
}
.ex-nav-item:hover{ background: rgba(255,255,255,.04); color: #fff; }
.ex-nav-item.is-active{
background: rgba(64,117,201,.16);
color: #fff;
box-shadow: inset 0 0 0 1px rgba(64,117,201,.32);
}
/* ---------- Main pane ---------- */
.ex-main{
display: grid;
grid-template-rows: 56px 1fr auto;
min-height: 0;
position: relative;
}
.ex-topbar{
display: flex; align-items: center; justify-content: space-between;
padding: 0 24px;
border-bottom: 1px solid rgba(255,255,255,.05);
background: rgba(11,17,36,.4);
backdrop-filter: blur(8px);
}
.ex-back{
display: inline-flex; align-items: center; gap: 8px;
padding: 6px 12px;
background: rgba(255,255,255,.04);
border: 1px solid rgba(255,255,255,.08);
color: #cbd5e1; font-size: 13px;
border-radius: 999px; cursor: pointer;
transition: background .18s, color .18s, transform .18s;
}
.ex-back:hover{ background: rgba(255,255,255,.08); color: #fff; transform: translateX(-2px); }
.ex-top-actions{ display: inline-flex; gap: 8px; }
.ex-top-btn{
padding: 7px 14px;
border-radius: 999px;
font-size: 13px; font-weight: 500; cursor: pointer;
transition: transform .18s, box-shadow .18s, background .18s;
border: 1px solid transparent;
}
.ex-signin{
background: transparent; color: #e2e8f0;
border-color: rgba(255,255,255,.14);
}
.ex-signin:hover{ background: rgba(255,255,255,.06); }
.ex-signup{
background: linear-gradient(90deg, #4075C9 0%, #1CA9C9 100%);
color: #fff; font-weight: 600;
box-shadow: 0 6px 18px -8px rgba(28,169,201,.55);
}
.ex-signup:hover{ transform: translateY(-1px); box-shadow: 0 10px 22px -8px rgba(28,169,201,.7); }
/* ---------- Chat canvas ---------- */
.ex-canvas{
overflow-y: auto;
padding: 28px 0 16px;
scroll-behavior: smooth;
}
.ex-stream{
max-width: 880px;
margin: 0 auto;
padding: 0 24px;
display: flex; flex-direction: column; gap: 18px;
}
/* Row + bubble */
.ex-row{ display: flex; }
.ex-row--user{ justify-content: flex-end; }
.ex-row--ai{ justify-content: flex-start; }
.ex-bubble{
max-width: 70%;
padding: 14px 16px;
border-radius: 14px;
font-size: 14px; line-height: 1.55;
color: #e6edf7;
}
.ex-bubble--user{
background: rgba(64,117,201,.18);
border: 1px solid rgba(64,117,201,.32);
border-bottom-right-radius: 4px;
}
.ex-bubble--small{ font-size: 13px; padding: 10px 14px; }
.ex-source-chip{
display: inline-flex; align-items: center; gap: 6px;
padding: 4px 8px 4px 4px;
margin-bottom: 8px;
background: rgba(34,197,94,.14);
border: 1px solid rgba(34,197,94,.22);
border-radius: 999px;
font-size: 11px; color: #86efac; font-weight: 600;
}
.ex-source-chip svg{ width: 12px; height: 12px; padding: 2px; background: rgba(34,197,94,.18); border-radius: 50%; }
.ex-source-x{ color: #86efac; opacity: .7; font-weight: 400; }
.ex-bubble-text{ color: #f1f5f9; }
/* Processing pill */
.ex-process{
display: inline-flex; align-items: center; gap: 10px;
padding: 10px 14px;
background: rgba(255,255,255,.04);
border: 1px solid rgba(255,255,255,.08);
border-radius: 10px;
font-size: 13px; color: #cbd5e1;
}
.ex-process--inline{ background: transparent; border: 0; padding: 4px 0; color: #94a3b8; font-size: 13px; }
.ex-spark{
display: inline-grid; place-items: center;
width: 22px; height: 22px;
color: #1CA9C9;
animation: exSparkSpin 3.6s linear infinite;
}
.ex-process-dots{ display: inline-flex; gap: 3px; }
.ex-process-dots i{
width: 4px; height: 4px; border-radius: 50%;
background: #64748b;
animation: exDot 1.2s ease-in-out infinite;
}
.ex-process-dots i:nth-child(2){ animation-delay: .15s; }
.ex-process-dots i:nth-child(3){ animation-delay: .30s; }
.ex-process-chev{ color: #64748b; }
@keyframes exSparkSpin{ from { transform: rotate(0); } to { transform: rotate(360deg); } }
@keyframes exDot{
0%, 100% { opacity: .35; transform: scale(.85); }
50% { opacity: 1; transform: scale(1.1); background: #1CA9C9; }
}
/* AI cards */
.ex-card{
width: 100%;
max-width: 100%;
padding: 18px 20px;
background: rgba(255,255,255,.025);
border: 1px solid rgba(255,255,255,.06);
border-radius: 14px;
font-size: 14px; line-height: 1.6; color: #cbd5e1;
}
.ex-card-title{
margin: 0 0 8px;
font-size: 15px; color: #fff; font-weight: 600;
display: flex; align-items: baseline; gap: 8px;
}
.ex-card-title--mt{ margin-top: 20px; }
.ex-card-meta{ font-size: 12px; font-weight: 400; color: #94a3b8; }
.ex-card-lead{ margin: 0 0 8px; color: #cbd5e1; }
.ex-card-lead--mt{ margin-top: 14px; }
.ex-card-note{ margin: 10px 0 0; color: #94a3b8; font-size: 13px; font-style: italic; }
.ex-card em{ font-style: normal; color: #fde68a; font-weight: 500; }
.ex-bullets{ margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.ex-bullets li{ display: flex; align-items: center; gap: 10px; }
.ex-bullets--plain li{ padding-left: 16px; position: relative; }
.ex-bullets--plain li::before{
content: ""; position: absolute; left: 0; top: .65em;
width: 5px; height: 5px; border-radius: 50%; background: #64748b;
}
.ex-bullets strong{ color: #fff; font-weight: 600; }
.ex-dot{
width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}
.ex-dot--up{ background: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,.18); }
.ex-dot--down{ background: #f97316; box-shadow: 0 0 0 3px rgba(249,115,22,.18); }
/* Action groups (Recommended Actions) */
.ex-action-group{ margin-top: 10px; }
.ex-action-head{
margin: 0 0 4px;
color: #e2e8f0; font-weight: 500;
display: flex; align-items: center; gap: 6px;
}
.ex-check{
display: inline-grid; place-items: center;
width: 16px; height: 16px; border-radius: 50%;
background: rgba(34,197,94,.18); color: #22c55e;
font-size: 10px; font-weight: 700;
}
/* Follow-up chips */
.ex-followups{
margin-top: 16px;
display: flex; flex-wrap: wrap; gap: 8px;
}
.ex-followup{
padding: 8px 14px;
background: rgba(255,255,255,.04);
border: 1px solid rgba(64,117,201,.28);
border-radius: 999px;
color: #c7d4e8; font-size: 12.5px; cursor: pointer;
transition: background .2s, border-color .2s, color .2s, transform .2s;
}
.ex-followup:hover{
background: rgba(64,117,201,.18);
border-color: rgba(64,117,201,.55);
color: #fff;
transform: translateY(-1px);
}
/* Chart card */
.ex-card--chart{ padding: 18px 20px 20px; }
.ex-chart-head{
display: flex; align-items: center; justify-content: space-between;
margin-bottom: 14px;
}
.ex-chart-legend{
display: inline-flex; gap: 14px;
font-size: 11.5px; color: #94a3b8;
}
.ex-chart-legend span{ display: inline-flex; align-items: center; gap: 6px; }
.ex-leg{ width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.ex-leg--gain{ background: #4075C9; }
.ex-leg--loss{ background: #f97316; }
.ex-chart-wrap{
display: grid;
grid-template-columns: 1fr 220px;
gap: 20px;
align-items: stretch;
}
.ex-chart{
display: grid;
grid-template-columns: 36px 1fr;
height: 220px;
background: rgba(255,255,255,.015);
border-radius: 10px;
padding: 10px 12px 28px;
position: relative;
}
.ex-chart-y{
display: flex; flex-direction: column; justify-content: space-between;
font-size: 10px; color: #64748b;
padding-right: 8px;
text-align: right;
}
.ex-chart-bars{
display: flex; align-items: flex-end; justify-content: space-around;
gap: 16px;
border-left: 1px solid rgba(255,255,255,.08);
padding-left: 6px;
position: relative;
}
.ex-chart-bars::before,
.ex-chart-bars::after{
content: ""; position: absolute; left: 6px; right: 0;
height: 1px; background: rgba(255,255,255,.04);
}
.ex-chart-bars::before{ top: 25%; }
.ex-chart-bars::after{ top: 50%; }
.ex-bar-col{
display: flex; flex-direction: column; align-items: center;
flex: 1; height: 100%;
justify-content: flex-end;
position: relative;
}
.ex-bar{
width: 100%;
max-width: 48px;
height: var(--ex-h, 50%);
border-radius: 4px 4px 0 0;
position: relative;
background: linear-gradient(180deg, #5694e5 0%, #4075C9 100%);
box-shadow: 0 0 0 1px rgba(64,117,201,.22) inset, 0 6px 14px -8px rgba(64,117,201,.6);
animation: exBarRise .9s cubic-bezier(.22,.61,.36,1) backwards;
}
.ex-bar--loss{
background: linear-gradient(180deg, #fb923c 0%, #f97316 100%);
box-shadow: 0 0 0 1px rgba(249,115,22,.28) inset, 0 6px 14px -8px rgba(249,115,22,.6);
}
.ex-bar-col:nth-child(1) .ex-bar{ animation-delay: .05s; }
.ex-bar-col:nth-child(2) .ex-bar{ animation-delay: .15s; }
.ex-bar-col:nth-child(3) .ex-bar{ animation-delay: .25s; }
.ex-bar-col:nth-child(4) .ex-bar{ animation-delay: .35s; }
.ex-bar-col:nth-child(5) .ex-bar{ animation-delay: .45s; }
@keyframes exBarRise{
from{ transform: scaleY(0); opacity: 0; }
to{ transform: scaleY(1); opacity: 1; }
}
.ex-bar{ transform-origin: bottom; }
.ex-bar-lbl{
position: absolute; top: -18px; left: 50%; transform: translateX(-50%);
font-size: 10.5px; color: #cbd5e1; font-weight: 600;
}
.ex-bar-x{
position: absolute; bottom: -22px;
font-size: 11px; color: #94a3b8;
}
/* Data summary side panel */
.ex-data-summary{
background: rgba(255,255,255,.025);
border: 1px solid rgba(255,255,255,.06);
border-radius: 10px;
padding: 14px;
font-size: 11.5px;
color: #94a3b8;
}
.ex-data-summary h5{
margin: 0 0 6px;
font-size: 12px; color: #cbd5e1; font-weight: 600;
}
.ex-ds-meta{ margin: 0 0 10px; color: #94a3b8; }
.ex-ds-meta strong{ color: #e2e8f0; }
.ex-ds-group{ margin: 10px 0 4px; }
.ex-ds-tag{
display: inline-block;
padding: 2px 8px;
background: rgba(119,71,182,.18);
border: 1px solid rgba(119,71,182,.3);
border-radius: 999px;
color: #c4b5fd; font-size: 10px; font-weight: 600; letter-spacing: .2px;
}
.ex-ds-list{ margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; }
.ex-ds-list li{ display: flex; justify-content: space-between; gap: 8px; line-height: 1.4; }
.ex-ds-k{ color: #cbd5e1; }
.ex-ds-v{ color: #1CA9C9; font-weight: 500; }
.ex-card-interp{
margin: 14px 0 0; padding-top: 14px;
border-top: 1px solid rgba(255,255,255,.06);
font-size: 13px; color: #cbd5e1;
}
.ex-card-interp strong{ color: #fff; }
/* Reveal animation for any block appended after the sequence starts */
.ex-reveal{
animation: exReveal .55s cubic-bezier(.22,.61,.36,1) backwards;
}
@keyframes exReveal{
from{ opacity: 0; transform: translateY(10px); }
to{ opacity: 1; transform: translateY(0); }
}
/* ---------- Composer ---------- */
.ex-composer{
padding: 16px 24px 12px;
border-top: 1px solid rgba(255,255,255,.05);
background: rgba(11,17,36,.55);
backdrop-filter: blur(6px);
}
.ex-composer-row{
max-width: 880px; margin: 0 auto;
background: rgba(255,255,255,.04);
border: 1px solid rgba(255,255,255,.08);
border-radius: 12px;
padding: 12px 14px;
margin-bottom: 8px;
}
.ex-input-text{ color: #64748b; font-size: 13.5px; }
.ex-composer-actions{
max-width: 880px; margin: 0 auto;
display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.ex-comp-btn{
width: 30px; height: 30px;
background: rgba(255,255,255,.04);
border: 1px solid rgba(255,255,255,.08);
border-radius: 50%;
color: #cbd5e1; cursor: pointer;
display: inline-grid; place-items: center;
transition: background .18s, color .18s;
}
.ex-comp-btn:hover{ background: rgba(255,255,255,.08); color: #fff; }
.ex-comp-pill{
display: inline-flex; align-items: center; gap: 6px;
padding: 6px 12px;
background: rgba(64,117,201,.16);
border: 1px solid rgba(64,117,201,.28);
border-radius: 999px;
color: #c7d4e8; font-size: 12px; cursor: pointer;
transition: background .18s;
}
.ex-comp-pill:hover{ background: rgba(64,117,201,.24); }
.ex-comp-spacer{ flex: 1; }
.ex-comp-preview{
display: inline-flex; align-items: center; gap: 6px;
padding: 6px 12px;
background: transparent;
border: 1px solid rgba(255,255,255,.1);
border-radius: 999px;
color: #94a3b8; font-size: 12px; cursor: pointer;
transition: color .18s, border-color .18s;
}
.ex-comp-preview:hover{ color: #e2e8f0; border-color: rgba(255,255,255,.2); }
.ex-comp-microcopy{
max-width: 880px; margin: 8px auto 0;
font-size: 11px; color: #475569; text-align: center;
}
.ex-comp-microcopy a{ color: #64748b; text-decoration: underline; }
/* ---------- Paywall (free message limit) ---------- */
.ex-paywall{
position: absolute; inset: 56px 0 0 240px;
display: flex; align-items: flex-end; justify-content: center;
background: linear-gradient(180deg, rgba(11,17,36,0) 0%, rgba(11,17,36,.7) 50%, rgba(11,17,36,.92) 100%);
backdrop-filter: blur(6px);
pointer-events: none;
opacity: 0;
transition: opacity .4s cubic-bezier(.22,.61,.36,1);
padding-bottom: 140px;
z-index: 4;
}
.ex-paywall.is-open{ opacity: 1; pointer-events: auto; }
.ex-paywall-card{
max-width: 460px; width: 90%;
padding: 22px 24px;
background: rgba(15,23,42,.88);
border: 1px solid rgba(255,255,255,.08);
border-radius: 14px;
text-align: center;
box-shadow: 0 30px 60px -20px rgba(0,0,0,.6);
transform: translateY(20px);
transition: transform .4s cubic-bezier(.22,.61,.36,1);
}
.ex-paywall.is-open .ex-paywall-card{ transform: translateY(0); }
.ex-paywall-spark{
display: inline-grid; place-items: center;
width: 36px; height: 36px;
margin-bottom: 10px;
color: #1CA9C9;
}
.ex-paywall-title{ margin: 0 0 6px; font-size: 17px; color: #fff; font-weight: 600; }
.ex-paywall-sub{ margin: 0 0 14px; font-size: 13px; color: #94a3b8; }
.ex-paywall-actions{ display: inline-flex; gap: 10px; }
.ex-paywall-btn{
padding: 8px 18px;
border-radius: 999px;
font-size: 13px; cursor: pointer; font-weight: 500;
background: transparent;
border: 1px solid rgba(255,255,255,.16);
color: #e2e8f0;
transition: background .18s, transform .18s;
}
.ex-paywall-btn:hover{ background: rgba(255,255,255,.06); }
.ex-paywall-btn--primary{
background: linear-gradient(90deg, #4075C9 0%, #1CA9C9 100%);
border-color: transparent; color: #fff; font-weight: 600;
box-shadow: 0 6px 18px -8px rgba(28,169,201,.55);
}
.ex-paywall-btn--primary:hover{ transform: translateY(-1px); }
/* ---------- Sign in / Sign up modal ---------- */
.ex-modal{
position: absolute; inset: 0;
display: flex; align-items: center; justify-content: center;
background: rgba(2,6,23,.65);
backdrop-filter: blur(10px);
opacity: 0;
pointer-events: none;
transition: opacity .35s cubic-bezier(.22,.61,.36,1);
z-index: 5;
}
.ex-modal.is-open{ opacity: 1; pointer-events: auto; }
.ex-modal-card{
position: relative;
width: 90%; max-width: 380px;
padding: 28px 28px 24px;
background: #0f1a32;
border: 1px solid rgba(255,255,255,.08);
border-radius: 16px;
text-align: center;
box-shadow: 0 30px 80px -20px rgba(0,0,0,.7), 0 0 0 1px rgba(64,117,201,.1);
transform: translateY(16px) scale(.96);
transition: transform .4s cubic-bezier(.22,.61,.36,1);
}
.ex-modal.is-open .ex-modal-card{ transform: translateY(0) scale(1); }
.ex-modal-close{
position: absolute; top: 12px; right: 12px;
width: 28px; height: 28px; border-radius: 8px;
background: transparent; border: 0;
color: #94a3b8; cursor: pointer;
display: grid; place-items: center;
transition: background .18s, color .18s;
}
.ex-modal-close:hover{ background: rgba(255,255,255,.06); color: #fff; }
.ex-modal-spark{
display: inline-grid; place-items: center;
margin-bottom: 6px;
}
.ex-modal-title{ margin: 0 0 6px; font-size: 18px; color: #fff; font-weight: 600; }
.ex-modal-sub{ margin: 0 0 18px; font-size: 12.5px; color: #94a3b8; line-height: 1.5; }
.ex-social-btn{
width: 100%;
display: inline-flex; align-items: center; justify-content: center; gap: 10px;
padding: 10px 14px;
margin-bottom: 8px;
background: rgba(255,255,255,.04);
border: 1px solid rgba(255,255,255,.12);
border-radius: 10px;
color: #e2e8f0; font-size: 13px; cursor: pointer;
transition: background .18s, border-color .18s;
}
.ex-social-btn:hover{ background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.2); }
.ex-or{
display: flex; align-items: center; gap: 10px;
margin: 12px 0;
color: #475569; font-size: 11px;
}
.ex-or::before, .ex-or::after{
content: ""; flex: 1; height: 1px; background: rgba(255,255,255,.08);
}
.ex-more-options{
width: 100%;
padding: 10px 14px;
background: transparent;
border: 1px solid rgba(255,255,255,.12);
border-radius: 10px;
color: #cbd5e1; font-size: 13px; cursor: pointer;
transition: background .18s, color .18s;
}
.ex-more-options:hover{ background: rgba(255,255,255,.06); color: #fff; }
/* ---------- Responsive ---------- */
@media (max-width: 900px){
.explore-shell{ grid-template-columns: 60px 1fr; }
.ex-brand-text{ display: none; }
.ex-nav-item span, .ex-nav-item{ font-size: 0; }
.ex-nav-item svg{ width: 18px; height: 18px; }
.ex-paywall{ inset: 56px 0 0 60px; }
.ex-chart-wrap{ grid-template-columns: 1fr; }
.ex-data-summary{ font-size: 11px; }
}
@media (max-width: 600px){
.ex-topbar{ padding: 0 12px; }
.ex-stream{ padding: 0 14px; }
.ex-card{ padding: 14px; }
.ex-bubble{ max-width: 85%; }
.ex-composer{ padding: 12px 14px 10px; }
.ex-modal-card{ padding: 22px 18px 18px; }
}
@media (prefers-reduced-motion: reduce){
.explore-overlay, .ex-paywall, .ex-paywall-card, .ex-modal, .ex-modal-card{ transition: none !important; }
.ex-reveal, .ex-bar, .ex-spark, .ex-process-dots i{ animation: none !important; }
.ex-bar{ transform: none !important; }
}
/* ===================================================================
CANONICAL PRIMARY BUTTON — .btn-primary
One signature CTA used everywhere a high-emphasis action lives:
top nav "Start for Free", hero "Click to explore", product CTA,
pricing CTA, footer banner, overlay top, paywall.
Visual language: violet → royal-blue → turquoise gradient pill
(the brand's signature mix), white bold text, optional arrow that
slides on hover.
Motion (theme-matched, easing cubic-bezier(.22,.61,.36,1)):
① Breathing gradient — background-position pans subtly to feel alive
② Hover sheen sweep — diagonal white highlight crosses the surface
③ Hover lift -2px + intensified brand-violet glow shadow
④ Arrow slides +4px right (matches existing .pd-cta / .ps-cta pattern)
Selector specificity uses :where() so it overrides via cascade-position
only — keeps existing per-section rules intact unless they specifically
conflict. Placed at end of stylesheet to sit last in the cascade.
=================================================================== */
:where(.btn-primary){
/* Reset across and