:root {
--font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--font-mono: 'JetBrains Mono', 'Fira Code', monospace;
--font-serif: 'Newsreader', Georgia, 'Times New Roman', serif;
--text-hero: clamp(3rem, 6vw + 1rem, 5rem);
--text-display: clamp(1.875rem, 3.5vw + 0.5rem, 3rem);
--text-title: clamp(1.375rem, 1.5vw + 0.5rem, 1.75rem);
--text-heading: 1.25rem;
--text-body-lg: 1.0625rem;
--text-body: 1rem;
--text-body-sm: 0.9375rem;
--text-label: 0.875rem;
--text-caption: 0.8125rem;
--text-micro: 0.75rem;
--w-light: 300;
--w-regular: 400;
--w-ui: 510;
--w-semibold: 600;
--w-bold: 700;
--tracking-hero: -0.04em;
--tracking-display: -0.03em;
--tracking-title: -0.02em;
--tracking-heading: -0.015em;
--tracking-body: -0.005em;
--tracking-ui: 0em;
--tracking-micro: 0.04em;
--lh-hero: 1.05;
--lh-display: 1.1;
--lh-heading: 1.25;
--lh-body-lg: 1.65;
--lh-body: 1.55;
--lh-ui: 1.0;
--lh-caption: 1.4;
--bg: #000000;
--surface: rgba(15, 23, 42, 0.6);
--surface-2: rgba(15, 23, 42, 0.9);
--border: rgba(255, 255, 255, 0.08);
--border-hover: rgba(255, 255, 255, 0.16);
--text-1: #F8FAFC;
--text-2: #CBD5E1;
--text-3: #64748B;
--text-4: rgba(148, 163, 184, 0.5);
--blue: #2858a5;
--blue-2: #3B82F6;
--cyan: #06B6D4;
--cyan-2: #22D3EE;
--purple: #8B5CF6;
--amber: #F59E0B;
--green: #10B981;
--red: #EF4444;
--color-one: #2858a5;
--color-two: #06B6D4;
--color-three: #8B5CF6;
--nav-height: 4.5rem;
--max-w: 1280px;
--radius: 0.5rem;
--radius-lg: 0.75rem;
--radius-xl: 1rem;
}
*, *::before, *::after {
margin: 0; padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-feature-settings: "cv01", "ss03";
}
body {
font-family: var(--font-sans);
font-optical-sizing: auto;
background: transparent;
color: var(--text-1);
font-size: var(--text-body);
line-height: var(--lh-body);
letter-spacing: var(--tracking-body);
overflow-x: hidden;
}
#starfield {
position: fixed;
top: 0; left: 0;
width: 100vw; height: 100vh;
z-index: 0;
pointer-events: none;
background: #000;
}
#lightningCanvas {
position: fixed;
top: 0; left: 0;
width: 100vw; height: 100vh;
z-index: 1;
pointer-events: none;
}
.site-header, main, .site-footer, .mobile-nav {
position: relative;
z-index: 1;
}
img { display: block; max-width: 100%; }
a { text-decoration: none; color: inherit; }
button { cursor: pointer; font: inherit; border: none; background: none; }
@keyframes fade-in {
from { opacity: 0; transform: translateY(-10px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes fade-up {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes shimmer {
0%, 90%, 100% { background-position: calc(-100% - var(--shimmer-w, 100px)) 0; }
30%, 60% { background-position: calc(100% + var(--shimmer-w, 100px)) 0; }
}
@keyframes marquee {
from { transform: translate3d(0, 0, 0); }
to { transform: translate3d(-50%, 0, 0); }
}
@keyframes border-beam {
100% { offset-distance: 100%; }
}
@keyframes image-glow {
0% { opacity: 0; animation-timing-function: cubic-bezier(0.74, 0.25, 0.76, 1); }
10% { opacity: 0.7; animation-timing-function: cubic-bezier(0.12, 0.01, 0.08, 0.99); }
100% { opacity: 0.4; }
}
@keyframes pulse-dot {
0%, 100% { opacity: 1; }
50% { opacity: 0.4; }
}
@keyframes bar-grow {
from { height: 20%; }
to { height: var(--h); }
}
@keyframes float {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-6px); }
}
@keyframes gradient-shift {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
@keyframes orbit-slow {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
@keyframes shimmer-badge {
0%, 25% { background-position: 100% 0; }
55% { background-position: -100% 0; }
80%, 100% { background-position: 100% 0; }
}
.anim-fade-in {
opacity: 0;
animation: fade-in 1s var(--delay, 0ms) ease forwards;
}
.anim-fade-up {
opacity: 0;
animation: fade-up 1s var(--delay, 0ms) ease forwards;
}
.site-header {
position: fixed;
top: 0; left: 0;
width: 100%;
height: var(--nav-height);
z-index: 100;
border-bottom: 1px solid var(--border);
backdrop-filter: blur(16px) saturate(1.8);
-webkit-backdrop-filter: blur(16px) saturate(1.8);
background: rgba(0, 0, 0, 0.6);
animation: fade-in 600ms ease forwards;
}
.header-inner {
max-width: var(--max-w);
margin: 0 auto;
padding: 0 1.5rem;
height: 100%;
display: flex;
align-items: center;
gap: 2rem;
}
.header-logo {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: var(--text-label);
font-weight: var(--w-semibold);
letter-spacing: -0.01em;
color: var(--text-1);
flex-shrink: 0;
}
.header-logo img {
height: 22px;
width: auto;
}
.header-nav {
display: flex;
align-items: center;
gap: 0.25rem;
margin-left: 1rem;
}
.header-nav a {
font-size: var(--text-label);
font-weight: var(--w-ui);
color: var(--text-3);
padding: 0.375rem 0.75rem;
border-radius: var(--radius);
transition: color 0.2s, background 0.2s;
}
.header-nav a:hover {
color: var(--text-2);
background: rgba(255,255,255,0.05);
}
.header-actions {
display: flex;
align-items: center;
gap: 0.625rem;
margin-left: auto;
}
.btn-ghost {
font-size: var(--text-label);
font-weight: var(--w-ui);
color: var(--text-2);
padding: 0.4375rem 0.875rem;
border-radius: var(--radius);
transition: color 0.2s, background 0.2s;
}
.btn-ghost:hover {
color: var(--text-1);
background: rgba(255,255,255,0.06);
}
.btn-primary {
font-size: var(--text-label);
font-weight: var(--w-semibold);
color: #fff;
padding: 0.375rem 1rem;
border-radius: 8px;
background: linear-gradient(160deg, #3B6FD4 0%, #2858a5 60%, #1e3f80 100%);
border: 1px solid rgba(255,255,255,0.12);
box-shadow: 0 1px 0 rgba(255,255,255,0.1) inset, 0 2px 8px rgba(40,88,165,0.3);
transition: box-shadow 0.2s, transform 0.15s, background 0.2s;
}
.btn-primary:hover {
background: linear-gradient(160deg, #4a7fe8 0%, #3062bc 60%, #2451a0 100%);
box-shadow: 0 1px 0 rgba(255,255,255,0.14) inset, 0 4px 16px rgba(40,88,165,0.5);
transform: translateY(-1px);
}
.nav-toggle {
display: none;
align-items: center;
justify-content: center;
width: 2rem;
height: 2rem;
color: var(--text-2);
margin-left: auto;
}
.hero {
position: relative;
padding-top: calc(var(--nav-height) + 5rem);
padding-bottom: 0;
text-align: center;
overflow: hidden;
}
.hero::before {
content: '';
position: absolute;
top: 0; left: 50%;
transform: translateX(-50%);
width: 800px;
height: 400px;
background: radial-gradient(ellipse at center,
rgba(40,88,165,0.16) 0%,
rgba(6,182,212,0.06) 40%,
transparent 70%);
pointer-events: none;
z-index: 0;
}
.hero-inner {
position: relative;
z-index: 1;
max-width: 900px;
margin: 0 auto;
padding: 0 1.5rem;
}
.hero-logo-wrap {
display: flex;
justify-content: center;
margin-bottom: 1.5rem;
animation: fade-in 700ms ease forwards;
opacity: 0;
}
.hero-logo {
width: 280px;
height: 280px;
object-fit: contain;
filter: drop-shadow(0 0 40px rgba(40, 88, 165, 0.6))
drop-shadow(0 0 16px rgba(6, 182, 212, 0.25));
transition: filter 0.4s ease;
}
.hero-logo:hover {
filter: drop-shadow(0 0 60px rgba(40, 88, 165, 0.85))
drop-shadow(0 0 24px rgba(6, 182, 212, 0.4));
}
.hero-badge {
display: inline-flex;
align-items: center;
gap: 0.375rem;
height: 1.75rem;
padding: 0 0.75rem;
border-radius: 100px;
border: 1px solid rgba(255,255,255,0.1);
background: rgba(255,255,255,0.05);
backdrop-filter: blur(8px);
font-size: var(--text-micro);
font-weight: var(--w-ui);
color: var(--text-2);
cursor: pointer;
transition: background 0.2s, border-color 0.2s;
margin-bottom: 1.75rem;
animation: fade-in 800ms ease forwards;
opacity: 0;
}
.hero-badge:hover {
background: rgba(255,255,255,0.09);
border-color: rgba(255,255,255,0.18);
}
.hero-badge-text {
background: linear-gradient(
90deg,
var(--text-2) 0%,
rgba(255, 255, 255, 0.96) 50%,
var(--text-2) 100%
);
background-size: 200% 100%;
background-position: 100% 0;
background-clip: text;
-webkit-background-clip: text;
color: transparent;
animation: shimmer-badge 14s ease-in-out infinite;
}
.hero-badge-icon {
font-size: var(--text-micro);
color: var(--cyan-2);
transition: transform 0.2s;
}
.hero-badge:hover .hero-badge-icon {
transform: translateX(2px);
}
.hero-headline {
font-size: var(--text-hero);
font-weight: var(--w-bold);
letter-spacing: var(--tracking-hero);
line-height: var(--lh-hero);
color: var(--text-1);
margin-bottom: 1.5rem;
animation: fade-in 800ms 150ms ease forwards;
opacity: 0;
text-shadow: 0 0 80px rgba(40, 88, 165, 0.2);
}
.hero-headline-gradient {
background: linear-gradient(
135deg,
#dbeafe 0%,
#93C5FD 20%,
#60A5FA 40%,
#3B82F6 60%,
#2858a5 80%,
#1a3a75 100%
);
background-size: 250% auto;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
filter: drop-shadow(0 0 32px rgba(40, 88, 165, 0.65));
animation: gradient-shift 8s ease infinite;
}
.hero-sub {
font-size: var(--text-body-lg);
color: var(--text-3);
max-width: 540px;
margin: 0 auto 2.5rem;
line-height: var(--lh-body-lg);
letter-spacing: var(--tracking-body);
animation: fade-in 800ms 300ms ease forwards;
opacity: 0;
}
.hero-ctas {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.875rem;
margin-bottom: 5rem;
animation: fade-in 800ms 450ms ease forwards;
opacity: 0;
}
.cta-primary {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.6875rem 1.625rem;
border-radius: 10px;
background: linear-gradient(160deg, #3B6FD4 0%, #2858a5 55%, #1e3f80 100%);
color: #fff;
font-size: var(--text-body-sm);
font-weight: var(--w-semibold);
letter-spacing: 0.01em;
border: 1px solid rgba(255,255,255,0.12);
box-shadow:
0 1px 0 rgba(255,255,255,0.12) inset,
0 2px 12px rgba(40,88,165,0.35),
0 0 0 0 rgba(40,88,165,0);
transition: box-shadow 0.25s, transform 0.18s, background 0.25s;
position: relative;
overflow: hidden;
}
.cta-primary::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(160deg, rgba(255,255,255,0.1) 0%, transparent 60%);
opacity: 1;
transition: opacity 0.25s;
}
.cta-primary:hover {
background: linear-gradient(160deg, #4a7fe8 0%, #3062bc 55%, #2451a0 100%);
box-shadow:
0 1px 0 rgba(255,255,255,0.15) inset,
0 6px 24px rgba(40,88,165,0.6),
0 0 0 3px rgba(40,88,165,0.18);
transform: translateY(-2px);
}
.cta-primary:active {
transform: translateY(0px);
box-shadow: 0 1px 0 rgba(255,255,255,0.1) inset, 0 2px 8px rgba(40,88,165,0.3);
}
.cta-primary i {
transition: transform 0.2s ease;
}
.cta-primary:hover i {
transform: translateX(3px);
}
.cta-secondary {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.6875rem 1.625rem;
border-radius: 10px;
background: rgba(255,255,255,0.035);
color: var(--text-2);
font-size: var(--text-body-sm);
font-weight: var(--w-ui);
letter-spacing: 0.005em;
border: 1px solid rgba(255,255,255,0.09);
box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset;
transition: border-color 0.2s, background 0.2s, color 0.2s, box-shadow 0.2s, transform 0.18s;
}
.cta-secondary:hover {
border-color: rgba(255,255,255,0.16);
background: rgba(255,255,255,0.07);
color: var(--text-1);
box-shadow: 0 1px 0 rgba(255,255,255,0.07) inset, 0 4px 16px rgba(0,0,0,0.2);
transform: translateY(-2px);
}
.cta-secondary:active {
transform: translateY(0px);
}
.hero-mockup-wrap {
position: relative;
max-width: 1100px;
margin: 0 auto;
padding: 0 1.5rem;
animation: fade-up 1000ms 500ms ease forwards;
opacity: 0;
}
.hero-mockup-wrap::after {
content: '';
position: absolute;
left: 0; right: 0; bottom: 0;
height: 180px;
background: linear-gradient(to top, #000 30%, transparent);
z-index: 2;
pointer-events: none;
}
.hero-mockup-wrap::before {
content: '';
position: absolute;
bottom: 50%;
left: 0; right: 0;
height: 500px;
background: linear-gradient(to bottom, rgba(40,88,165,0.14) 0%, transparent 60%);
opacity: 0;
animation: image-glow 4100ms 600ms ease-out forwards;
pointer-events: none;
z-index: 0;
filter: blur(40px);
}
.hero-mockup {
position: relative;
z-index: 1;
border-radius: var(--radius-xl);
background: rgba(8,12,22,1);
overflow: hidden;
box-shadow: 0 40px 80px rgba(0,0,0,0.9),
0 0 140px rgba(40,88,165,0.08);
}
@keyframes spin-beam {
to { transform: translate(-50%, -50%) rotate(360deg); }
}
.hero-mockup-outer {
position: relative;
border-radius: calc(var(--radius-xl) + 1px);
padding: 1px;
overflow: hidden;
}
.hero-mockup-outer::before {
content: '';
position: absolute;
width: 250%;
aspect-ratio: 1;
top: 50%; left: 50%;
transform: translate(-50%, -50%) rotate(0deg);
background: conic-gradient(
transparent 0%,
transparent 55%,
rgba(40, 88, 165, 0.9) 68%,
#06B6D4 76%,
rgba(139, 92, 246, 0.55) 83%,
transparent 90%
);
animation: spin-beam 7s linear infinite;
z-index: 0;
pointer-events: none;
}
.mockup-chrome {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.75rem 1rem;
border-bottom: 1px solid rgba(255,255,255,0.06);
background: rgba(5,8,17,0.8);
}
.chrome-dots {
display: flex;
gap: 5px;
}
.chrome-dot {
width: 10px;
height: 10px;
border-radius: 50%;
}
.chrome-dot--r { background: #EF4444; opacity: 0.7; }
.chrome-dot--y { background: #F59E0B; opacity: 0.7; }
.chrome-dot--g { background: #10B981; opacity: 0.7; }
.chrome-url {
flex: 1;
max-width: 320px;
margin: 0 auto;
background: rgba(255,255,255,0.05);
border-radius: 6px;
padding: 0.25rem 0.75rem;
font-family: var(--font-mono);
font-size: var(--text-micro);
color: var(--text-3);
text-align: center;
}
.mockup-nav {
display: flex;
align-items: center;
gap: 0;
padding: 0 1rem;
border-bottom: 1px solid rgba(255,255,255,0.06);
background: rgba(8,12,24,0.9);
overflow: hidden;
}
.mockup-nav-tab {
display: flex;
align-items: center;
gap: 0.375rem;
padding: 0.625rem 1rem;
font-size: var(--text-caption);
font-weight: var(--w-ui);
color: var(--text-3);
border-bottom: 2px solid transparent;
transition: color 0.2s, border-color 0.2s;
white-space: nowrap;
cursor: default;
}
.mockup-nav-tab.active {
color: var(--blue-2);
border-bottom-color: var(--blue);
}
.mockup-nav-tab i {
font-size: var(--text-caption);
}
.tab-badge {
background: rgba(59,130,246,0.2);
color: var(--blue-2);
border-radius: 100px;
padding: 0 0.35rem;
font-size: var(--text-micro);
font-weight: var(--w-semibold);
letter-spacing: var(--tracking-micro);
}
.live-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--green);
animation: pulse-dot 2s infinite;
}
.dash-layout {
display: flex;
height: 100%;
min-height: 0;
background: rgba(5,8,17,1);
}
.dash-sidebar {
width: 148px;
flex-shrink: 0;
background: rgba(8,12,22,1);
border-right: 1px solid rgba(255,255,255,0.05);
display: flex;
flex-direction: column;
padding: 0.875rem 0;
}
.ds-brand {
display: flex;
align-items: center;
gap: 0.4rem;
padding: 0 0.875rem 0.875rem;
border-bottom: 1px solid rgba(255,255,255,0.05);
margin-bottom: 0.625rem;
}
.ds-brand-dot {
width: 16px;
height: 16px;
border-radius: 4px;
background: linear-gradient(135deg, #2858a5, #06B6D4);
flex-shrink: 0;
}
.ds-brand-name {
font-size: var(--text-micro);
font-weight: var(--w-bold);
color: var(--text-1);
letter-spacing: -0.01em;
}
.ds-section-label {
font-size: 9px;
font-weight: var(--w-semibold);
color: var(--text-3);
text-transform: uppercase;
letter-spacing: 0.07em;
padding: 0.5rem 0.875rem 0.25rem;
}
.ds-nav-item {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.3rem 0.875rem;
font-size: var(--text-micro);
font-weight: var(--w-ui);
color: var(--text-3);
border-radius: 0;
cursor: default;
}
.ds-nav-item.active {
color: var(--text-1);
background: rgba(255,255,255,0.05);
}
.ds-nav-item i { font-size: 0.75rem; flex-shrink: 0; }
.ds-nav-badge {
margin-left: auto;
font-size: 9px;
font-weight: var(--w-semibold);
padding: 0 0.3rem;
border-radius: 100px;
background: rgba(40,88,165,0.25);
color: #93C5FD;
}
.ds-nav-badge--amber {
background: rgba(245,158,11,0.2);
color: #FCD34D;
}
.ds-spacer { flex: 1; }
.dash-main {
flex: 1;
display: flex;
flex-direction: column;
overflow: hidden;
}
.dash-tabs {
display: flex;
align-items: center;
padding: 0 1rem;
border-bottom: 1px solid rgba(255,255,255,0.05);
background: rgba(8,12,22,0.8);
gap: 0;
}
.dt-tab {
display: flex;
align-items: center;
gap: 0.3rem;
padding: 0.55rem 0.75rem;
font-size: var(--text-micro);
font-weight: var(--w-ui);
color: var(--text-3);
border-bottom: 2px solid transparent;
cursor: default;
white-space: nowrap;
}
.dt-tab.active {
color: var(--text-1);
border-bottom-color: #3B82F6;
}
.dt-tab i { font-size: 0.7rem; }
.dt-badge {
font-size: 9px;
font-weight: var(--w-bold);
padding: 0 0.3rem;
border-radius: 100px;
background: rgba(40,88,165,0.3);
color: #93C5FD;
}
.dt-badge--amber {
background: rgba(245,158,11,0.2);
color: #FCD34D;
}
.dash-content {
padding: 0.875rem;
display: flex;
flex-direction: column;
gap: 0.625rem;
overflow: hidden;
}
.dash-kpi-row {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0.5rem;
}
.dash-bottom-row {
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: 0.5rem;
}
.mockup-body {
padding: 1.25rem;
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: auto auto;
gap: 0.75rem;
background: rgba(5,8,17,1);
}
.m-card {
background: rgba(15,23,42,0.8);
border: 1px solid rgba(255,255,255,0.07);
border-radius: var(--radius-lg);
padding: 1rem;
display: flex;
flex-direction: column;
gap: 0.5rem;
position: relative;
overflow: hidden;
}
.m-card::before {
content: '';
position: absolute;
inset: 0;
opacity: 0;
transition: opacity 0.3s;
}
.m-card--blue::before { background: radial-gradient(ellipse at 20% 0%, rgba(59,130,246,0.1) 0%, transparent 60%); }
.m-card--purple::before{ background: radial-gradient(ellipse at 20% 0%, rgba(139,92,246,0.1) 0%, transparent 60%); }
.m-card--amber::before { background: radial-gradient(ellipse at 20% 0%, rgba(245,158,11,0.1) 0%, transparent 60%); }
.m-card--green::before { background: radial-gradient(ellipse at 20% 0%, rgba(16,185,129,0.1) 0%, transparent 60%); }
.m-card-header {
display: flex;
align-items: center;
justify-content: space-between;
}
.m-card-label {
font-size: var(--text-micro);
font-weight: var(--w-ui);
color: var(--text-3);
text-transform: uppercase;
letter-spacing: var(--tracking-micro);
}
.m-card-icon {
width: 24px;
height: 24px;
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
font-size: var(--text-micro);
}
.m-card-icon--blue { background: rgba(59,130,246,0.15); color: var(--blue-2); }
.m-card-icon--purple { background: rgba(139,92,246,0.15); color: #A78BFA; }
.m-card-icon--amber { background: rgba(245,158,11,0.15); color: #FCD34D; }
.m-card-icon--green { background: rgba(16,185,129,0.15); color: #34D399; }
.m-card-value {
font-size: var(--text-heading);
font-weight: var(--w-bold);
letter-spacing: var(--tracking-heading);
line-height: var(--lh-ui);
}
.m-card-value--blue { color: var(--blue-2); }
.m-card-value--purple { color: #A78BFA; }
.m-card-value--amber { color: #FCD34D; }
.m-card-value--green { color: #34D399; }
.m-card-sub {
font-size: var(--text-micro);
color: var(--text-3);
}
.m-status {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: var(--text-micro);
color: var(--text-3);
padding: 0.2rem 0.4rem;
background: rgba(255,255,255,0.04);
border-radius: 4px;
border: 1px solid rgba(255,255,255,0.06);
}
.mini-bars {
display: flex;
align-items: flex-end;
gap: 2px;
height: 28px;
margin-top: 0.25rem;
}
.mini-bar {
flex: 1;
border-radius: 2px 2px 0 0;
animation: bar-grow 1s var(--delay, 0ms) ease-out forwards;
height: 20%;
}
.mini-bar--blue { background: rgba(59,130,246,0.5); }
.mini-bar--purple { background: rgba(139,92,246,0.5); }
.mini-bar--amber { background: rgba(245,158,11,0.5); }
.mini-bar--green { background: rgba(16,185,129,0.5); }
.m-ring-wrap {
display: flex;
align-items: center;
gap: 0.75rem;
}
.m-ring {
width: 48px;
height: 48px;
flex-shrink: 0;
}
.ring-label {
font-size: var(--text-micro);
color: var(--text-3);
line-height: var(--lh-caption);
}
.m-progress {
height: 3px;
background: rgba(255,255,255,0.07);
border-radius: 100px;
overflow: hidden;
}
.m-progress-fill {
height: 100%;
border-radius: 100px;
background: linear-gradient(90deg, var(--amber), #FCD34D);
}
.m-card--wide {
grid-column: span 2;
}
.visitor-rows {
display: flex;
flex-direction: column;
gap: 0.375rem;
margin-top: 0.25rem;
}
.visitor-row {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.375rem 0.5rem;
background: rgba(255,255,255,0.03);
border-radius: 6px;
}
.visitor-avatar {
width: 20px;
height: 20px;
border-radius: 50%;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: var(--text-micro);
font-weight: var(--w-semibold);
color: #fff;
}
.visitor-name {
font-size: var(--text-micro);
color: var(--text-2);
font-weight: var(--w-ui);
flex: 1;
}
.visitor-archetype {
font-size: var(--text-micro);
padding: 0.15rem 0.4rem;
border-radius: 100px;
font-weight: var(--w-semibold);
}
.arch--impulse { background: rgba(239,68,68,0.15); color: #FCA5A5; }
.arch--price { background: rgba(245,158,11,0.15); color: #FCD34D; }
.arch--researcher { background: rgba(59,130,246,0.15); color: var(--blue-2); }
.arch--hesitant { background: rgba(100,116,139,0.15); color: #94A3B8; }
.arch--comparison { background: rgba(139,92,246,0.15); color: #A78BFA; }
.visitor-clv {
font-size: var(--text-micro);
font-weight: var(--w-semibold);
color: var(--green);
font-family: var(--font-mono);
}
.arch-bars {
display: flex;
flex-direction: column;
gap: 0.4rem;
margin-top: 0.25rem;
}
.arch-bar-row {
display: flex;
align-items: center;
gap: 0.4rem;
}
.arch-bar-label {
font-size: var(--text-micro);
color: var(--text-3);
width: 70px;
flex-shrink: 0;
}
.arch-bar-track {
flex: 1;
height: 4px;
background: rgba(255,255,255,0.06);
border-radius: 100px;
overflow: hidden;
}
.arch-bar-fill {
height: 100%;
border-radius: 100px;
}
.arch-bar-pct {
font-size: var(--text-micro);
color: var(--text-3);
width: 24px;
text-align: right;
flex-shrink: 0;
}
.clients {
padding: 4rem 1.5rem 3rem;
text-align: center;
}
.clients-label {
font-size: var(--text-micro);
font-weight: var(--w-semibold);
color: var(--text-4);
letter-spacing: var(--tracking-micro);
text-transform: uppercase;
margin-bottom: 2.5rem;
}
.clients-row {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 2.5rem 3rem;
}
.client-logo {
display: flex;
align-items: center;
gap: 0.5rem;
color: var(--text-4);
font-size: var(--text-body-sm);
font-weight: var(--w-semibold);
letter-spacing: -0.01em;
transition: color 0.2s;
}
.client-logo:hover { color: var(--text-2); }
.client-logo i {
font-size: var(--text-heading);
}
.features-header {
text-align: center;
padding: 7rem 1.5rem 4rem;
max-width: 700px;
margin: 0 auto;
}
.features-header .section-eyebrow { margin-bottom: 1rem; }
.features-header .section-title { margin-bottom: 1.25rem; }
.features-header .section-sub { margin: 0 auto; }
.sphere-section {
position: relative;
margin: 0;
}
.sphere-mask {
pointer-events: none;
position: relative;
margin: -6rem 0;
height: 40rem;
overflow: hidden;
-webkit-mask-image: radial-gradient(ellipse at center, #000 0%, transparent 50%);
mask-image: radial-gradient(ellipse at center, #000 0%, transparent 50%);
}
.sphere-mask::before {
content: '';
position: absolute;
inset: 0;
opacity: 0.35;
background: radial-gradient(circle at bottom center, var(--color-one) 0%, transparent 70%);
}
.sphere-mask::after {
content: '';
position: absolute;
left: -50%;
top: 50%;
aspect-ratio: 1 / 0.7;
width: 200%;
border-radius: 50%;
border-top: 1px solid rgba(160, 200, 255, 0.18);
background: rgba(0,0,0,0);
box-shadow: 0 -1px 18px rgba(40, 88, 165, 0.12);
transition: transform 0.05s linear;
}
@media (max-width: 768px) {
.sphere-mask {
margin: -3rem 0;
height: 28rem;
-webkit-mask-image: radial-gradient(ellipse at center, #000 0%, transparent 62%);
mask-image: radial-gradient(ellipse at center, #000 0%, transparent 62%);
}
.sphere-mask::before { opacity: 0.55; }
.sphere-mask::after {
border-top-color: rgba(160,200,255,0.35);
box-shadow: 0 -1px 28px rgba(40,88,165,0.28);
}
}
#sphereCanvas {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
.section {
padding: 6rem 1.5rem;
}
.section-inner {
max-width: var(--max-w);
margin: 0 auto;
}
.dash-stats {
display: flex;
align-items: center;
justify-content: center;
gap: 0;
margin-top: 2.5rem;
padding: 1.75rem 2.5rem;
background: rgba(255,255,255,0.025);
border: 1px solid rgba(255,255,255,0.07);
border-radius: var(--radius-xl);
max-width: 720px;
margin-left: auto;
margin-right: auto;
}
.dash-stat {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.375rem;
padding: 0 1.5rem;
}
.dash-stat-value {
font-size: clamp(1.75rem, 3vw, 2.5rem);
font-weight: var(--w-bold);
letter-spacing: var(--tracking-hero);
color: var(--text-1);
line-height: 1;
}
.dash-stat-unit {
font-size: 0.55em;
font-weight: var(--w-semibold);
color: var(--blue-2);
vertical-align: super;
letter-spacing: 0;
}
.dash-stat-label {
font-size: var(--text-micro);
color: var(--text-3);
letter-spacing: var(--tracking-micro);
text-align: center;
line-height: var(--lh-caption);
max-width: 140px;
}
.dash-stat-divider {
width: 1px;
height: 3rem;
background: rgba(255,255,255,0.07);
flex-shrink: 0;
}
.section-eyebrow {
font-size: var(--text-micro);
font-weight: var(--w-semibold);
letter-spacing: var(--tracking-micro);
text-transform: uppercase;
color: var(--blue-2);
margin-bottom: 1rem;
text-align: center;
}
.section-title {
font-size: var(--text-display);
font-weight: var(--w-bold);
letter-spacing: var(--tracking-display);
line-height: var(--lh-display);
color: var(--text-1);
text-align: center;
margin-bottom: 1rem;
}
.section-sub {
font-size: var(--text-body-lg);
font-weight: var(--w-regular);
color: var(--text-3);
text-align: center;
max-width: 560px;
margin: 0 auto 4rem;
line-height: var(--lh-body-lg);
}
.features-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1px;
background: var(--border);
border-radius: var(--radius-xl);
overflow: hidden;
border: 1px solid var(--border);
}
.feature-card {
background: rgba(8,12,24,0.95);
padding: 2rem;
display: flex;
flex-direction: column;
gap: 0.875rem;
transition: background 0.2s;
position: relative;
overflow: hidden;
}
.feature-card::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.06), transparent);
}
.feature-card:hover {
background: rgba(15,23,42,0.9);
}
.feature-icon {
width: 40px;
height: 40px;
border-radius: var(--radius);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.125rem;
}
.feature-icon--blue { background: rgba(59,130,246,0.12); color: var(--blue-2); border: 1px solid rgba(59,130,246,0.2); }
.feature-icon--purple { background: rgba(139,92,246,0.12); color: #A78BFA; border: 1px solid rgba(139,92,246,0.2); }
.feature-icon--cyan { background: rgba(6,182,212,0.12); color: var(--cyan-2); border: 1px solid rgba(6,182,212,0.2); }
.feature-icon--amber { background: rgba(245,158,11,0.12); color: #FCD34D; border: 1px solid rgba(245,158,11,0.2); }
.feature-icon--green { background: rgba(16,185,129,0.12); color: #34D399; border: 1px solid rgba(16,185,129,0.2); }
.feature-icon--red { background: rgba(239,68,68,0.12); color: #FCA5A5; border: 1px solid rgba(239,68,68,0.2); }
.feature-name {
font-size: var(--text-heading);
font-weight: var(--w-semibold);
letter-spacing: var(--tracking-heading);
color: var(--text-1);
}
.feature-desc {
font-size: var(--text-body-sm);
color: var(--text-3);
line-height: var(--lh-body-lg);
}
#pricing {
background: linear-gradient(to bottom, transparent, rgba(15,23,42,0.3), transparent);
}
.pricing-toggle {
display: flex;
align-items: center;
justify-content: center;
gap: 0.75rem;
margin-bottom: 3rem;
}
.toggle-label {
font-size: var(--text-label);
color: var(--text-3);
font-weight: var(--w-ui);
}
.toggle-track {
width: 40px;
height: 22px;
background: rgba(255,255,255,0.1);
border-radius: 100px;
position: relative;
cursor: pointer;
border: 1px solid var(--border);
transition: background 0.2s;
}
.toggle-track.on {
background: rgba(59,130,246,0.4);
border-color: rgba(59,130,246,0.4);
}
.toggle-thumb {
position: absolute;
top: 2px; left: 2px;
width: 16px; height: 16px;
border-radius: 50%;
background: #fff;
transition: transform 0.2s;
box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}
.toggle-track.on .toggle-thumb {
transform: translateX(18px);
}
.toggle-save {
font-size: var(--text-micro);
font-weight: var(--w-semibold);
color: var(--green);
background: rgba(16,185,129,0.1);
border: 1px solid rgba(16,185,129,0.2);
padding: 0.15rem 0.5rem;
border-radius: 100px;
}
.pricing-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
max-width: 1100px;
margin-left: auto;
margin-right: auto;
}
@media (max-width: 960px) {
.pricing-grid {
grid-template-columns: 1fr;
max-width: 460px;
}
}
.pricing-card {
background: rgba(10,14,26,0.95);
border: 1px solid var(--border);
border-radius: var(--radius-xl);
padding: 1.75rem;
display: flex;
flex-direction: column;
gap: 1.25rem;
position: relative;
overflow: hidden;
transition: border-color 0.2s, box-shadow 0.2s;
}
.pricing-card:hover {
border-color: var(--border-hover);
box-shadow: 0 0 40px rgba(59,130,246,0.06);
}
.pricing-card--popular {
border-color: rgba(59,130,246,0.4);
background: rgba(10,14,26,1);
box-shadow: 0 0 0 1px rgba(59,130,246,0.15),
0 20px 60px rgba(59,130,246,0.1);
}
.pricing-popular-badge {
position: absolute;
top: 1.25rem;
right: 1.25rem;
font-size: var(--text-micro);
font-weight: var(--w-semibold);
color: var(--blue-2);
background: rgba(59,130,246,0.15);
border: 1px solid rgba(59,130,246,0.3);
padding: 0.2rem 0.6rem;
border-radius: 100px;
}
.plan-name {
font-size: var(--text-label);
font-weight: var(--w-semibold);
letter-spacing: var(--tracking-micro);
text-transform: uppercase;
color: var(--text-3);
}
.plan-desc {
font-size: var(--text-body-sm);
color: var(--text-3);
line-height: var(--lh-body);
margin-top: 0.25rem;
}
.plan-price {
display: flex;
align-items: flex-end;
gap: 0.25rem;
}
.plan-price-amount {
font-size: var(--text-display);
font-weight: var(--w-bold);
letter-spacing: var(--tracking-display);
line-height: var(--lh-ui);
color: var(--text-1);
}
.plan-price-period {
font-size: var(--text-label);
color: var(--text-3);
margin-bottom: 0.25rem;
}
.plan-visitors {
font-size: var(--text-caption);
color: var(--text-3);
background: rgba(255,255,255,0.04);
border: 1px solid var(--border);
padding: 0.3rem 0.6rem;
border-radius: var(--radius);
display: inline-block;
}
.plan-divider {
height: 1px;
background: var(--border);
}
.plan-features {
display: flex;
flex-direction: column;
gap: 0.625rem;
list-style: none;
flex: 1;
}
.plan-feature {
display: flex;
align-items: flex-start;
gap: 0.5rem;
font-size: var(--text-label);
line-height: var(--lh-body);
color: var(--text-2);
}
.plan-feature i {
color: var(--green);
font-size: var(--text-label);
flex-shrink: 0;
margin-top: 1px;
}
.plan-feature i.minus { color: var(--text-3); }
.plan-cta {
display: block;
text-align: center;
padding: 0.6875rem 1.25rem;
border-radius: var(--radius);
font-size: var(--text-label);
font-weight: var(--w-semibold);
transition: all 0.2s;
}
.plan-cta--outline {
border: 1px solid var(--border);
color: var(--text-2);
background: transparent;
}
.plan-cta--outline:hover {
border-color: var(--border-hover);
background: rgba(255,255,255,0.04);
color: var(--text-1);
}
.plan-cta--filled {
background: var(--blue);
color: #fff;
border: 1px solid transparent;
}
.plan-cta--filled:hover {
background: #2563EB;
box-shadow: 0 0 20px rgba(59,130,246,0.4);
}
.cta-section {
padding: 5rem 0;
overflow: hidden;
}
.marquee-wrap {
position: relative;
overflow: hidden;
height: 600px;
}
.marquee-wrap::before,
.marquee-wrap::after {
content: '';
position: absolute;
left: 0; right: 0;
height: 90px;
z-index: 2;
pointer-events: none;
}
.marquee-wrap::before {
top: 0;
background: linear-gradient(to bottom, #000 0%, transparent 100%);
}
.marquee-wrap::after {
bottom: 0;
background: linear-gradient(to top, #000 0%, transparent 100%);
}
.tile-grid {
display: grid;
grid-template-columns: repeat(16, 80px);
grid-auto-rows: 80px;
gap: 12px;
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
width: max-content;
}
.marquee-tile {
width: 80px;
height: 80px;
border-radius: var(--radius-lg);
border: 1px solid var(--border);
background: rgba(10,14,26,0.8);
display: flex;
align-items: center;
justify-content: center;
font-size: var(--text-title);
color: var(--text-3);
position: relative;
flex-shrink: 0;
transition: transform 0.28s cubic-bezier(0.34,1.4,0.64,1),
box-shadow 0.28s ease,
border-color 0.28s ease,
color 0.2s ease,
background 0.28s ease;
cursor: default;
}
.marquee-tile:hover {
transform: translateY(-8px) scale(1.12);
border-color: rgba(255,255,255,0.28);
background: rgba(18,24,40,0.95);
box-shadow: 0 16px 40px rgba(0,0,0,0.55),
0 0 22px var(--glow, rgba(59,130,246,0.35));
color: rgba(255,255,255,0.9);
z-index: 5;
}
.marquee-tile::before {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
opacity: 0;
}
.t-blue { --glow: rgba(59,130,246,0.4); }
.t-cyan { --glow: rgba(6,182,212,0.4); }
.t-purple { --glow: rgba(139,92,246,0.4); }
.t-amber { --glow: rgba(245,158,11,0.4); }
.t-green { --glow: rgba(16,185,129,0.4); }
.t-red { --glow: rgba(239,68,68,0.4); }
.cta-overlay {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 10;
text-align: center;
padding: 2rem 2.5rem;
background: rgba(5,8,17,0.7);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-radius: var(--radius-xl);
border: 1px solid rgba(255,255,255,0.08);
box-shadow: 0 0 60px rgba(0,0,0,0.8);
white-space: nowrap;
}
.cta-overlay-icon {
width: 56px;
height: 56px;
border-radius: 1rem;
background: rgba(59,130,246,0.1);
border: 1px solid rgba(59,130,246,0.2);
display: flex;
align-items: center;
justify-content: center;
font-size: var(--text-title);
color: var(--blue-2);
margin: 0 auto 1rem;
animation: float 4s ease-in-out infinite;
}
.cta-overlay-title {
font-size: var(--text-title);
font-weight: var(--w-bold);
letter-spacing: var(--tracking-title);
line-height: var(--lh-heading);
color: var(--text-1);
margin-bottom: 0.375rem;
}
.cta-overlay-sub {
font-size: var(--text-body-sm);
color: var(--text-3);
margin-bottom: 1.25rem;
}
.cta-overlay-btn {
display: inline-flex;
align-items: center;
gap: 0.375rem;
padding: 0.625rem 1.5rem;
border-radius: 100px;
background: var(--blue);
color: #fff;
font-size: var(--text-label);
font-weight: var(--w-semibold);
transition: all 0.2s;
}
.cta-overlay-btn:hover {
background: #2563EB;
box-shadow: 0 4px 20px rgba(59,130,246,0.5);
transform: translateY(-1px);
}
.site-footer {
border-top: 1px solid var(--border);
padding: 4rem 1.5rem 2rem;
background: rgba(0,0,0,0.5);
}
.footer-inner {
max-width: var(--max-w);
margin: 0 auto;
}
.footer-top {
display: grid;
grid-template-columns: 1.5fr repeat(3, 1fr);
gap: 3rem;
padding-bottom: 3rem;
border-bottom: 1px solid var(--border);
margin-bottom: 2rem;
}
.footer-brand p {
font-size: var(--text-body-sm);
color: var(--text-3);
max-width: 240px;
line-height: var(--lh-body-lg);
margin-top: 0.75rem;
}
.footer-logo {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: var(--text-body-lg);
font-weight: var(--w-bold);
letter-spacing: var(--tracking-heading);
color: var(--text-1);
margin-bottom: 0.25rem;
}
.footer-logo-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: linear-gradient(135deg, var(--blue), var(--cyan));
}
.footer-col h3 {
font-size: var(--text-micro);
font-weight: var(--w-semibold);
letter-spacing: var(--tracking-micro);
text-transform: uppercase;
color: var(--text-1);
margin-bottom: 1rem;
}
.footer-links {
list-style: none;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.footer-links a {
font-size: var(--text-body-sm);
color: var(--text-3);
transition: color 0.2s;
}
.footer-links a:hover { color: var(--text-2); }
.footer-bottom {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 1rem;
}
.footer-copy {
font-size: var(--text-caption);
color: var(--text-3);
}
.footer-socials {
display: flex;
gap: 1rem;
}
.footer-socials a {
font-size: var(--text-body-lg);
color: var(--text-3);
transition: color 0.2s;
}
.footer-socials a:hover { color: var(--text-2); }
.reveal {
opacity: 0;
transform: translateY(24px);
transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.visible {
opacity: 1;
transform: translateY(0);
}
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }
.reveal-delay-5 { transition-delay: 0.5s; }
.mobile-nav {
position: fixed;
inset: 0;
z-index: 200;
background: rgba(0,0,0,0.9);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
display: flex;
flex-direction: column;
padding: var(--nav-height) 1.5rem 2rem;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease;
}
.mobile-nav.open {
opacity: 1;
pointer-events: all;
}
.mobile-nav-links {
display: flex;
flex-direction: column;
gap: 0.25rem;
margin-top: 2rem;
}
.mobile-nav-links a {
font-size: var(--text-heading);
font-weight: var(--w-semibold);
letter-spacing: var(--tracking-heading);
color: var(--text-2);
padding: 0.75rem 0;
border-bottom: 1px solid var(--border);
transition: color 0.2s;
}
.mobile-nav-links a:hover { color: var(--text-1); }
.mobile-nav-actions {
display: flex;
flex-direction: column;
gap: 0.75rem;
margin-top: 2rem;
}
.mobile-cta-btn {
display: block;
text-align: center;
padding: 0.875rem;
border-radius: var(--radius);
font-size: var(--text-body-sm);
font-weight: var(--w-semibold);
transition: all 0.2s;
}
@media (max-width: 1024px) {
.features-grid {
grid-template-columns: repeat(2, 1fr);
}
.mockup-body {
grid-template-columns: repeat(2, 1fr);
}
.m-card--wide { grid-column: span 2; }
.footer-top {
grid-template-columns: 1fr 1fr;
gap: 2rem;
}
}
@media (max-width: 768px) {
.header-nav { display: none; }
.nav-toggle {
display: flex;
margin-left: auto;
}
.header-actions .btn-ghost { display: none; }
.features-grid {
grid-template-columns: 1fr;
}
.pricing-grid {
grid-template-columns: 1fr;
max-width: 420px;
margin: 0 auto;
}
.hero-ctas {
flex-direction: column;
align-items: stretch;
max-width: 280px;
margin-left: auto;
margin-right: auto;
}
.cta-primary, .cta-secondary {
justify-content: center;
}
.mockup-body {
grid-template-columns: repeat(2, 1fr);
}
.m-card--wide { grid-column: span 2; }
.footer-top {
grid-template-columns: 1fr;
gap: 2rem;
}
.footer-bottom {
flex-direction: column;
align-items: flex-start;
}
.clients-row { gap: 1.5rem 2rem; }
.section { padding-left: 0.75rem; padding-right: 0.75rem; }
.hero-mockup-wrap { padding-left: 0.5rem; padding-right: 0.5rem; }
.dash-sidebar { display: none; }
.dash-layout { flex-direction: column; }
.dash-main { width: 100%; overflow: hidden; }
.dash-content { padding: 0.75rem; }
.dash-kpi-row { grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.m-card--wide { grid-column: span 2; }
.dash-bottom-row { grid-template-columns: 1fr; gap: 0.5rem; }
.hero-mockup { max-height: none; overflow: visible; }
.visitor-archetype { white-space: nowrap; }
.visitor-row { gap: 0.4rem; padding: 0.375rem 0.45rem; }
.loop-layout { grid-template-columns: 1fr; min-height: auto; }
.loop-panel--engine { order: -1; }
.loop-engine-core { width: 140px; height: 140px; }
.loop-engine-stats { gap: 1.25rem; }
.loop-feed-wrap { height: 220px; flex: none; }
.loop-panel { padding: 1rem; border-right: none; border-bottom: 1px solid rgba(255,255,255,0.05); }
.loop-panel:last-child { border-bottom: none; }
.profile-layout { grid-template-columns: 1fr; }
.profile-panel--signals { max-height: none; overflow: visible; }
.profile-panel { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.05); }
.profile-panel:last-child { border-bottom: none; }
.footer-brand { text-align: left; }
.footer-logo { justify-content: flex-start; }
.cta-overlay {
width: calc(100vw - 2rem);
max-width: 340px;
padding: 1.5rem;
white-space: normal;
}
.cta-overlay-title { font-size: 1.15rem; line-height: 1.3; }
.waitlist-form { flex-direction: column; }
.waitlist-btn { justify-content: center; width: 100%; }
}
@media (max-width: 480px) {
.mockup-body {
grid-template-columns: 1fr 1fr;
}
.mockup-chrome { display: none; }
.m-card--wide { grid-column: span 2; }
.cta-overlay {
padding: 1.5rem;
min-width: unset;
width: 80vw;
}
.cta-overlay-title {
font-size: var(--text-heading);
}
}
.loop-layout {
display: grid;
grid-template-columns: 1fr 1.55fr 1fr;
min-height: 280px;
}
.loop-panel {
padding: 1rem 1.25rem;
border-right: 1px solid rgba(255,255,255,0.05);
display: flex;
flex-direction: column;
}
.loop-panel:last-child { border-right: none; }
.loop-panel-header {
display: flex;
align-items: center;
gap: 0.5rem;
margin-bottom: 0.875rem;
flex-shrink: 0;
}
.loop-panel-title {
font-size: 0.72rem;
font-weight: 600;
color: var(--text-2);
letter-spacing: 0.06em;
text-transform: uppercase;
}
.loop-live-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: #22c55e;
box-shadow: 0 0 6px #22c55e;
animation: live-pulse 2s ease-in-out infinite;
margin-left: auto;
}
@keyframes live-pulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.4; transform: scale(0.7); }
}
.loop-sync-badge {
margin-left: auto;
font-size: 0.68rem;
color: #22c55e;
background: rgba(34,197,94,0.1);
border: 1px solid rgba(34,197,94,0.22);
border-radius: 99px;
padding: 0.1rem 0.5rem;
}
.loop-feed-wrap {
position: relative;
height: 200px;
overflow: hidden;
flex: 1;
}
.loop-feed-wrap::after {
content: '';
position: absolute;
bottom: 0; left: 0; right: 0;
height: 55px;
background: linear-gradient(to top, rgba(8,12,22,1), transparent);
pointer-events: none;
z-index: 2;
}
.loop-feed-inner {
animation: lfi-ticker 26s linear infinite;
}
@keyframes lfi-ticker {
0% { transform: translateY(0); }
100% { transform: translateY(-50%); }
}
.loop-feed-item {
display: flex;
align-items: flex-start;
gap: 0.55rem;
padding: 0.55rem 0.625rem;
margin-bottom: 0.4rem;
border-radius: 7px;
background: rgba(255,255,255,0.025);
border: 1px solid rgba(255,255,255,0.05);
}
.lfi-arch {
flex-shrink: 0;
width: 26px;
height: 26px;
border-radius: 5px;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.6rem;
font-weight: 700;
letter-spacing: 0.01em;
}
.lfi-body {
flex: 1;
display: flex;
flex-direction: column;
gap: 0.12rem;
min-width: 0;
}
.lfi-label {
font-size: 0.73rem;
font-weight: 500;
color: rgba(255,255,255,0.85);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.lfi-meta {
font-size: 0.67rem;
color: var(--text-3);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.lfi-time {
flex-shrink: 0;
font-size: 0.67rem;
color: var(--text-3);
font-variant-numeric: tabular-nums;
margin-top: 0.1rem;
}
.loop-panel--engine {
align-items: center;
justify-content: flex-start;
gap: 0.9rem;
padding-top: 0.875rem;
background: rgba(40,88,165,0.025);
}
.loop-engine-core {
position: relative;
width: 168px;
height: 168px;
flex-shrink: 0;
}
.loop-engine-ring {
position: absolute;
border-radius: 50%;
inset: 0;
}
.loop-ring--outer {
border: 1px dashed rgba(59,130,246,0.18);
animation: ring-spin-cw 38s linear infinite;
}
.loop-ring--mid {
inset: 28px;
border: 1px solid rgba(59,130,246,0.2);
animation: ring-spin-ccw 24s linear infinite;
}
@keyframes ring-spin-cw { to { transform: rotate(360deg); } }
@keyframes ring-spin-ccw { to { transform: rotate(-360deg); } }
.loop-engine-center {
position: absolute;
width: 62px;
height: 62px;
border-radius: 50%;
background: rgba(40,88,165,0.18);
border: 1px solid rgba(59,130,246,0.38);
box-shadow: 0 0 22px rgba(40,88,165,0.28), 0 0 50px rgba(40,88,165,0.1);
display: flex;
align-items: center;
justify-content: center;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
animation: engine-pulse 3.2s ease-in-out infinite;
}
@keyframes engine-pulse {
0%, 100% { box-shadow: 0 0 22px rgba(40,88,165,0.28), 0 0 50px rgba(40,88,165,0.1); }
50% { box-shadow: 0 0 38px rgba(59,130,246,0.5), 0 0 80px rgba(40,88,165,0.22); }
}
.loop-arch-node {
position: absolute;
top: 50%;
left: 50%;
transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty)));
}
.loop-arch-dot {
width: 26px;
height: 26px;
border-radius: 50%;
background: rgba(5,8,17,0.9);
border: 1px solid var(--clr, #3B82F6);
display: flex;
align-items: center;
justify-content: center;
animation: arch-node-pulse 5s ease-in-out infinite;
animation-delay: var(--delay, 0s);
}
.loop-arch-dot span {
font-size: 0.57rem;
font-weight: 700;
color: var(--clr, #3B82F6);
letter-spacing: 0.01em;
}
@keyframes arch-node-pulse {
0%, 65%, 100% { opacity: 0.42; box-shadow: none; }
32% { opacity: 1; box-shadow: 0 0 10px var(--clr, #3B82F6); }
}
.loop-arch-spoke {
position: absolute;
top: 50%; left: 50%;
width: var(--len, 70px);
height: 1px;
background: linear-gradient(to right, rgba(59,130,246,0.25), transparent);
transform-origin: 0 50%;
transform: rotate(var(--rot)) translateY(-50%);
pointer-events: none;
}
.loop-engine-stats {
display: flex;
gap: 2rem;
align-items: center;
}
.loop-engine-stat {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.18rem;
}
.loop-engine-stat-val {
font-size: 1.15rem;
font-weight: 700;
color: #fff;
font-variant-numeric: tabular-nums;
}
.loop-engine-stat-key {
font-size: 0.68rem;
color: var(--text-3);
text-align: center;
white-space: nowrap;
}
.loop-integrations-list {
display: flex;
flex-direction: column;
gap: 0.45rem;
flex: 1;
}
.loop-int-row {
display: flex;
align-items: center;
gap: 0.625rem;
padding: 0.6rem 0.75rem;
border-radius: 8px;
background: rgba(255,255,255,0.025);
border: 1px solid rgba(255,255,255,0.05);
position: relative;
overflow: hidden;
}
.loop-int-row::before {
content: '';
position: absolute;
inset: 0;
background: rgba(40,88,165,0.12);
border-radius: inherit;
opacity: 0;
animation: int-sync-overlay 9s ease-in-out infinite;
animation-delay: var(--sync-delay, 0s);
}
@keyframes int-sync-overlay {
0%, 100% { opacity: 0; }
8% { opacity: 1; }
18% { opacity: 0; }
}
.lint--1 { --sync-delay: 0s; }
.lint--2 { --sync-delay: 1.8s; }
.lint--3 { --sync-delay: 3.6s; }
.lint--4 { --sync-delay: 5.4s; }
.lint--5 { --sync-delay: 7.2s; }
.loop-int-logo {
width: 30px;
height: 30px;
border-radius: 7px;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.78rem;
font-weight: 700;
flex-shrink: 0;
}
.loop-int-logo--klaviyo { background: rgba(0,118,255,0.14); color: #0076FF; border: 1px solid rgba(0,118,255,0.22); }
.loop-int-logo--hubspot { background: rgba(255,122,0,0.14); color: #FF7A00; border: 1px solid rgba(255,122,0,0.22); }
.loop-int-logo--meta { background: rgba(24,119,242,0.14); color: #1877F2; border: 1px solid rgba(24,119,242,0.22); }
.loop-int-logo--ga4 { background: rgba(234,67,53,0.14); color: #EA4335; border: 1px solid rgba(234,67,53,0.22); }
.loop-int-logo--slack { background: rgba(224,30,90,0.14); color: #E01E5A; border: 1px solid rgba(224,30,90,0.22); }
.loop-int-body {
flex: 1;
display: flex;
flex-direction: column;
gap: 0.1rem;
min-width: 0;
}
.loop-int-name {
font-size: 0.75rem;
font-weight: 600;
color: rgba(255,255,255,0.85);
}
.loop-int-action {
font-size: 0.67rem;
color: var(--text-3);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.loop-int-pulse {
width: 7px;
height: 7px;
border-radius: 50%;
background: #22c55e;
flex-shrink: 0;
animation: int-pulse-dot 9s ease-in-out infinite;
animation-delay: var(--sync-delay, 0s);
}
@keyframes int-pulse-dot {
0%, 100% { opacity: 0.2; box-shadow: none; transform: scale(1); }
8% { opacity: 1; box-shadow: 0 0 8px #22c55e; transform: scale(1.6); }
18% { opacity: 0.2; box-shadow: none; transform: scale(1); }
}
@media (max-width: 700px) {
.loop-layout {
grid-template-columns: 1fr;
}
.loop-panel { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.05); }
.loop-panel:last-child { border-bottom: none; }
.loop-engine-core { width: 160px; height: 160px; }
}
.waitlist-form {
display: flex;
gap: 0.5rem;
width: 100%;
max-width: 460px;
margin: 0 auto;
}
.waitlist-input {
flex: 1;
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.14);
border-radius: 10px;
padding: 0.7rem 1rem;
font-family: var(--font);
font-size: var(--text-body);
color: #fff;
outline: none;
transition: border-color 0.2s, background 0.2s;
min-width: 0;
}
.waitlist-input::placeholder { color: rgba(255,255,255,0.3); }
.waitlist-input:focus {
border-color: rgba(59,130,246,0.6);
background: rgba(59,130,246,0.06);
}
.waitlist-btn {
flex-shrink: 0;
display: inline-flex;
align-items: center;
gap: 0.375rem;
padding: 0.7rem 1.25rem;
border-radius: 10px;
background: linear-gradient(160deg, #3B6FD4, #2858a5, #1e3f80);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 4px 18px rgba(40,88,165,0.35);
color: #fff;
font-family: var(--font);
font-size: var(--text-body);
font-weight: var(--w-medium);
border: none;
cursor: pointer;
white-space: nowrap;
transition: transform 0.15s, box-shadow 0.15s;
}
.waitlist-btn:hover {
transform: translateY(-1px);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.15), 0 8px 28px rgba(40,88,165,0.5);
}
.waitlist-proof {
font-size: var(--text-caption);
color: var(--text-3);
text-align: center;
margin-top: 0.625rem;
}
.waitlist-success {
display: none;
align-items: center;
gap: 0.5rem;
font-size: var(--text-body);
color: #4ade80;
justify-content: center;
padding: 0.75rem 0;
}
@media (max-width: 500px) {
.waitlist-form { flex-direction: column; }
.waitlist-btn { justify-content: center; }
}
.wl-wrap {
position: relative;
width: 100%;
max-width: 460px;
margin: 0 auto;
}
.wl-trigger {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
width: 100%;
padding: 0.85rem 1.5rem;
border-radius: 12px;
background: linear-gradient(160deg, #3B6FD4, #2858a5, #1e3f80);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 4px 18px rgba(40,88,165,0.35);
color: #fff;
font-family: var(--font-sans);
font-size: var(--text-body);
font-weight: 600;
letter-spacing: -0.01em;
border: none;
cursor: pointer;
transition: transform 0.15s, box-shadow 0.2s;
}
.wl-trigger:hover {
transform: translateY(-1px);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.15), 0 8px 28px rgba(40,88,165,0.5);
}
.wl-trigger[aria-expanded="true"] { opacity: 0.85; }
.wl-panel {
position: relative;
width: 100%;
margin-top: 0.75rem;
background: rgba(10, 14, 26, 0.96);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 14px;
padding: 1.25rem;
box-shadow: 0 20px 60px rgba(0,0,0,0.6), 0 0 0 1px rgba(59,130,246,0.08);
backdrop-filter: blur(20px);
text-align: left;
animation: wlDrop 0.22s ease-out;
}
.wl-panel[hidden] { display: none; }
@keyframes wlDrop {
from { opacity: 0; transform: translateY(-8px); }
to { opacity: 1; transform: translateY(0); }
}
.wl-head {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 1rem;
}
.wl-title {
font-family: var(--font-sans);
font-size: 0.95rem;
font-weight: 600;
letter-spacing: -0.01em;
color: var(--text-1);
}
.wl-close {
background: transparent;
border: none;
color: var(--text-3);
cursor: pointer;
padding: 0.25rem;
font-size: 1.15rem;
line-height: 1;
border-radius: 6px;
transition: color 0.15s, background 0.15s;
}
.wl-close:hover { color: var(--text-1); background: rgba(255,255,255,0.05); }
.wl-sub {
font-size: 0.85rem;
color: var(--text-3);
line-height: 1.5;
margin: -0.25rem 0 1rem;
}
.wl-sub strong { color: var(--text-2); font-weight: 600; }
.wl-field {
display: block;
margin-bottom: 0.75rem;
}
.wl-field span {
display: block;
font-size: 0.72rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--text-3);
margin-bottom: 0.35rem;
}
.wl-field input {
display: block;
width: 100%;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.1);
border-radius: 10px;
padding: 0.65rem 0.85rem;
font-family: var(--font-sans);
font-size: 0.95rem;
color: var(--text-1);
outline: none;
transition: border-color 0.15s, background 0.15s;
}
.wl-field input::placeholder { color: rgba(255,255,255,0.25); }
.wl-field input:focus {
border-color: rgba(59,130,246,0.55);
background: rgba(59,130,246,0.04);
}
.wl-field input[name="code"] {
font-family: var(--font-mono);
font-size: 1.25rem;
letter-spacing: 0.4em;
text-align: center;
font-weight: 600;
}
.wl-honey {
position: absolute !important;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
white-space: nowrap;
border: 0;
opacity: 0;
pointer-events: none;
}
.wl-submit {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.4rem;
width: 100%;
padding: 0.7rem 1.25rem;
margin-top: 0.4rem;
border-radius: 10px;
background: linear-gradient(160deg, #3B6FD4, #2858a5, #1e3f80);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 4px 14px rgba(40,88,165,0.3);
color: #fff;
font-family: var(--font-sans);
font-size: 0.92rem;
font-weight: 600;
letter-spacing: -0.01em;
border: none;
cursor: pointer;
transition: transform 0.15s, box-shadow 0.2s, opacity 0.15s;
}
.wl-submit:hover:not(:disabled) {
transform: translateY(-1px);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.15), 0 6px 22px rgba(40,88,165,0.45);
}
.wl-submit:disabled { opacity: 0.6; cursor: not-allowed; }
.wl-back {
display: block;
width: 100%;
margin-top: 0.5rem;
background: transparent;
border: none;
color: var(--text-3);
font-size: 0.78rem;
cursor: pointer;
padding: 0.4rem;
transition: color 0.15s;
}
.wl-back:hover { color: var(--text-2); }
.wl-err {
font-size: 0.78rem;
color: #F87171;
margin: 0.6rem 0 0;
min-height: 1em;
line-height: 1.4;
}
.wl-done {
text-align: center;
padding: 0.5rem 0;
}
.wl-done-icon {
font-size: 2.5rem;
color: #4ade80;
margin-bottom: 0.5rem;
line-height: 1;
}
.wl-done-title {
font-family: var(--font-sans);
font-size: 1.05rem;
font-weight: 600;
color: var(--text-1);
margin-bottom: 0.25rem;
}
.wl-done-sub {
font-size: 0.85rem;
color: var(--text-3);
}
@media (max-width: 500px) {
.wl-panel { padding: 1rem; }
.wl-field input[name="code"] { font-size: 1.1rem; letter-spacing: 0.3em; }
}
.profile-layout {
display: grid;
grid-template-columns: 1fr 1.6fr 1fr;
min-height: 440px;
}
.profile-panel {
padding: 1.25rem 1.375rem;
border-right: 1px solid rgba(255,255,255,0.05);
display: flex;
flex-direction: column;
}
.profile-panel:last-child { border-right: none; }
.visitor-anon-badge {
display: inline-flex;
align-items: center;
gap: 0.35rem;
font-size: 0.67rem;
color: #22c55e;
background: rgba(34,197,94,0.08);
border: 1px solid rgba(34,197,94,0.2);
border-radius: 99px;
padding: 0.18rem 0.6rem;
margin-bottom: 0.875rem;
align-self: flex-start;
}
.visitor-id {
font-size: 1rem;
font-weight: 700;
color: rgba(255,255,255,0.9);
margin-bottom: 0.875rem;
letter-spacing: -0.01em;
}
.visitor-meta {
display: flex;
flex-direction: column;
gap: 0.45rem;
flex: 1;
}
.visitor-meta-row {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.72rem;
}
.visitor-meta-row i {
color: var(--text-3);
font-size: 0.8rem;
flex-shrink: 0;
}
.vm-label {
color: var(--text-3);
flex-shrink: 0;
}
.vm-value {
color: rgba(255,255,255,0.75);
margin-left: auto;
text-align: right;
font-variant-numeric: tabular-nums;
}
.visitor-live-row {
display: flex;
align-items: center;
gap: 0.5rem;
margin-top: auto;
padding-top: 0.875rem;
border-top: 1px solid rgba(255,255,255,0.05);
}
.vl-body {
display: flex;
flex-direction: column;
gap: 0.1rem;
min-width: 0;
}
.vl-label {
font-size: 0.67rem;
color: var(--text-3);
}
.vl-page {
font-size: 0.7rem;
color: rgba(255,255,255,0.7);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-family: var(--font-mono);
}
.profile-live-badge {
margin-left: auto;
display: flex;
align-items: center;
gap: 0.35rem;
font-size: 0.68rem;
color: #22c55e;
}
.profile-panel--signals {
background: rgba(40,88,165,0.02);
}
.profile-subheader {
font-size: 0.68rem;
font-weight: 600;
color: var(--text-3);
letter-spacing: 0.05em;
text-transform: uppercase;
margin-bottom: 0.5rem;
margin-top: 0.875rem;
}
.signal-list {
display: flex;
flex-direction: column;
gap: 0.55rem;
}
.signal-row {
display: flex;
align-items: center;
gap: 0.625rem;
}
.signal-label {
font-size: 0.7rem;
color: var(--text-2);
width: 120px;
flex-shrink: 0;
}
.signal-track {
flex: 1;
height: 5px;
background: rgba(255,255,255,0.07);
border-radius: 99px;
overflow: hidden;
}
.signal-fill {
height: 100%;
border-radius: 99px;
width: 0%;
background: var(--clr, #3B82F6);
animation: signal-grow 1.1s cubic-bezier(0.4,0,0.2,1) forwards;
animation-delay: var(--delay, 0s);
animation-play-state: paused;
}
.reveal.visible .signal-fill,
.reveal.visible ~ * .signal-fill {
animation-play-state: running;
}
.signal-fill { animation-play-state: running; }
@keyframes signal-grow {
from { width: 0%; }
to { width: var(--pct, 50%); }
}
.signal-pct {
font-size: 0.68rem;
font-weight: 600;
color: var(--text-2);
width: 22px;
text-align: right;
font-variant-numeric: tabular-nums;
}
.product-attention-card {
display: flex;
align-items: center;
gap: 0.625rem;
padding: 0.625rem;
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.06);
border-radius: 8px;
}
.pac-img {
width: 36px;
height: 36px;
border-radius: 6px;
background: rgba(40,88,165,0.15);
border: 1px solid rgba(59,130,246,0.2);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.pac-body {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 0.2rem;
}
.pac-name {
font-size: 0.72rem;
font-weight: 500;
color: rgba(255,255,255,0.85);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.pac-price {
font-size: 0.68rem;
color: var(--text-3);
}
.pac-track {
height: 3px;
background: rgba(255,255,255,0.07);
border-radius: 99px;
overflow: hidden;
margin-top: 0.15rem;
}
.pac-fill {
height: 100%;
border-radius: 99px;
width: 0%;
background: linear-gradient(to right, #3B82F6, #06B6D4);
animation: signal-grow 1.3s cubic-bezier(0.4,0,0.2,1) forwards;
animation-delay: var(--delay, 0.6s);
}
.pac-score {
font-size: 0.63rem;
color: var(--text-3);
}
.event-list {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.event-item {
display: flex;
align-items: flex-start;
gap: 0.5rem;
}
.event-dot {
width: 7px;
height: 7px;
border-radius: 50%;
flex-shrink: 0;
margin-top: 0.22rem;
}
.event-body {
display: flex;
flex-direction: column;
gap: 0.08rem;
}
.event-label {
font-size: 0.71rem;
color: rgba(255,255,255,0.75);
}
.event-time {
font-size: 0.65rem;
color: var(--text-3);
font-variant-numeric: tabular-nums;
}
.value-card {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.3rem;
padding: 1.125rem 0.75rem;
background: rgba(40,88,165,0.1);
border: 1px solid rgba(59,130,246,0.2);
border-radius: 10px;
margin-bottom: 0.875rem;
text-align: center;
}
.value-label {
font-size: 0.68rem;
color: var(--text-3);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.value-amount {
font-size: 2.25rem;
font-weight: 800;
background: linear-gradient(135deg, #93C5FD, #3B82F6);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
line-height: 1;
letter-spacing: -0.03em;
}
.value-period {
font-size: 0.7rem;
color: var(--text-3);
}
.value-confidence {
display: flex;
align-items: center;
gap: 0.35rem;
font-size: 0.68rem;
color: #22c55e;
margin-top: 0.1rem;
}
.value-conf-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: #22c55e;
animation: live-pulse 2s ease-in-out infinite;
}
.profile-type-badge {
display: flex;
align-items: center;
gap: 0.4rem;
padding: 0.45rem 0.75rem;
border-radius: 8px;
background: rgba(59,130,246,0.08);
border: 1px solid rgba(59,130,246,0.2);
font-size: 0.73rem;
font-weight: 600;
color: #93C5FD;
margin-bottom: 0.875rem;
}
.ptb-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: #3B82F6;
box-shadow: 0 0 8px rgba(59,130,246,0.6);
flex-shrink: 0;
}
.action-card {
padding: 0.875rem;
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 10px;
display: flex;
flex-direction: column;
gap: 0.625rem;
flex: 1;
}
.action-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
}
.action-title {
font-size: 0.7rem;
font-weight: 600;
color: var(--text-2);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.action-priority {
font-size: 0.63rem;
font-weight: 700;
border-radius: 99px;
padding: 0.1rem 0.5rem;
}
.action-priority--high {
background: rgba(239,68,68,0.12);
color: #F87171;
border: 1px solid rgba(239,68,68,0.25);
}
.action-desc {
font-size: 0.72rem;
color: rgba(255,255,255,0.65);
line-height: 1.55;
margin: 0;
}
.action-btn {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.5rem 0.875rem;
border-radius: 7px;
background: linear-gradient(135deg, #2858a5, #1e3f80);
color: #fff;
font-size: 0.72rem;
font-weight: 600;
border: none;
cursor: pointer;
font-family: var(--font);
align-self: flex-start;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
transition: transform 0.15s, box-shadow 0.15s;
}
.action-btn:hover {
transform: translateY(-1px);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 4px 14px rgba(40,88,165,0.4);
}
.profile-push-row {
display: flex;
align-items: center;
gap: 0.5rem;
margin-top: 0.625rem;
}
.push-target {
width: 28px;
height: 28px;
border-radius: 7px;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.72rem;
font-weight: 700;
color: var(--clr);
background: color-mix(in srgb, var(--clr) 14%, transparent);
border: 1px solid color-mix(in srgb, var(--clr) 28%, transparent);
cursor: pointer;
transition: transform 0.15s;
}
.push-target:hover { transform: scale(1.12); }
.push-label {
font-size: 0.7rem;
color: var(--text-3);
margin-left: 0.25rem;
}
@media (max-width: 700px) {
.profile-layout {
grid-template-columns: 1fr;
}
.profile-panel { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.05); }
.profile-panel:last-child { border-bottom: none; }
.signal-label { width: 90px; }
}
.af-cosmos-section {
padding: 4rem 0 2rem;
background: transparent !important;
}
.af-cosmos-section .section-inner {
background: transparent;
max-width: none;
padding: 0;
}
.af-cosmos-stage {
position: relative;
width: 100%;
height: clamp(560px, 86vh, 880px);
margin: 1.5rem auto 0;
background: transparent;
}
.af-cosmos-section #canvas-container {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
z-index: 2;
pointer-events: auto;
background: transparent;
-webkit-tap-highlight-color: transparent;
touch-action: pan-y;
}
.af-cosmos-section #canvas-container canvas {
display: block;
width: 100%;
height: 100%;
background: transparent !important;
-webkit-tap-highlight-color: transparent;
touch-action: pan-y;
outline: none;
}
.af-cosmos-section #labels-container {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 3;
}
.node-label {
position: absolute;
z-index: 10;
pointer-events: none;
transform: translate(-50%, -100%);
display: flex;
align-items: center;
gap: 0.4rem;
padding: 0.3rem 0.65rem;
border-radius: 100px;
background: rgba(6, 10, 22, 0.55);
border: 1px solid rgba(255, 255, 255, 0.06);
backdrop-filter: blur(10px) saturate(1.4);
-webkit-backdrop-filter: blur(10px) saturate(1.4);
box-shadow: 0 4px 18px rgba(0, 0, 0, 0.45);
transition: opacity 0.3s, border-color 0.3s, background 0.3s, transform 0.3s;
font-family: var(--font-sans);
}
.node-label.hidden { opacity: 0; }
.node-label-dot {
width: 6px; height: 6px;
border-radius: 50%;
box-shadow: 0 0 6px currentColor;
flex-shrink: 0;
}
.node-label-text {
font-family: var(--font-sans);
font-size: var(--text-micro);
font-weight: var(--w-semibold);
letter-spacing: var(--tracking-micro);
text-transform: uppercase;
color: var(--text-2);
white-space: nowrap;
transition: color 0.3s;
}
.node-label.active {
background: rgba(6, 10, 22, 0.82);
border-color: rgba(255, 255, 255, 0.18);
}
.node-label.active .node-label-text {
color: var(--text-1);
}
.feature-sidebar {
position: absolute;
z-index: 20;
top: 50%;
left: 1.5rem;
width: 188px;
padding: 1.125rem 0.5rem 1.125rem 0.625rem;
border-radius: var(--radius-xl);
background:
linear-gradient(180deg,
rgba(15, 22, 38, 0.75) 0%,
rgba(8, 12, 22, 0.55) 100%);
backdrop-filter: blur(24px) saturate(1.4);
-webkit-backdrop-filter: blur(24px) saturate(1.4);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.06),
inset 0 0 0 1px rgba(255, 255, 255, 0.025),
0 24px 60px rgba(0, 0, 0, 0.45);
opacity: 0;
transform: translate(-20px, -50%);
pointer-events: none;
transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.feature-sidebar.visible {
opacity: 1;
transform: translate(0, -50%);
pointer-events: auto;
}
.feature-sidebar::before {
content: '';
position: absolute;
top: 0; left: 18%; right: 18%;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(133, 171, 208, 0.35), transparent);
pointer-events: none;
}
.sidebar-title {
font-family: var(--font-mono);
font-size: 0.625rem;
font-weight: var(--w-ui);
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--text-4);
margin-bottom: 0.625rem;
padding: 0 0.625rem 0.625rem;
}
.sidebar-item {
display: flex;
align-items: center;
gap: 0.625rem;
padding: 0.5rem 0.625rem;
margin: 0.0625rem 0;
border-radius: 8px;
cursor: pointer;
transition: background 0.25s ease, padding-left 0.25s ease, color 0.25s ease;
position: relative;
}
.sidebar-item::before {
content: '';
position: absolute;
left: 0; top: 50%; transform: translateY(-50%);
width: 2px; height: 0;
border-radius: 1px;
background: var(--sidebar-accent, currentColor);
box-shadow: 0 0 8px var(--sidebar-accent, currentColor);
opacity: 0;
transition: height 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
}
.sidebar-item.active::before { height: 64%; opacity: 1; }
.sidebar-item:hover {
background: linear-gradient(90deg, rgba(255,255,255,0.045) 0%, transparent 100%);
padding-left: 0.875rem;
}
.sidebar-item.active {
background: linear-gradient(90deg, rgba(255,255,255,0.055) 0%, transparent 100%);
}
.sidebar-dot {
width: 7px; height: 7px;
border-radius: 50%;
flex-shrink: 0;
box-shadow: 0 0 8px currentColor;
opacity: 0.85;
transition: opacity 0.25s ease, transform 0.25s ease;
}
.sidebar-item:hover .sidebar-dot {
opacity: 1;
transform: scale(1.15);
}
.sidebar-item.active .sidebar-dot { opacity: 1; }
.sidebar-name {
font-family: var(--font-sans);
font-size: var(--text-label);
font-weight: var(--w-ui);
color: var(--text-2);
transition: color 0.25s ease;
letter-spacing: var(--tracking-body);
}
.sidebar-item:hover .sidebar-name,
.sidebar-item.active .sidebar-name { color: var(--text-1); }
.hint-bar {
position: absolute;
bottom: 1.25rem;
left: 50%; transform: translateX(-50%);
z-index: 25;
display: flex; align-items: center; gap: 0.5rem;
padding: 0.5rem 1rem;
border-radius: 100px;
border: 1px solid var(--border);
background: rgba(0,0,0,0.5);
backdrop-filter: blur(12px);
font-size: var(--text-micro);
font-weight: var(--w-ui);
color: var(--text-4);
letter-spacing: var(--tracking-micro);
text-transform: uppercase;
animation: hint-fade 8s ease forwards;
animation-delay: 2s;
opacity: 0;
pointer-events: none;
}
@keyframes hint-fade {
0% { opacity: 0; transform: translateX(-50%) translateY(10px); }
15% { opacity: 1; transform: translateX(-50%) translateY(0); }
85% { opacity: 1; transform: translateX(-50%) translateY(0); }
100% { opacity: 0; transform: translateX(-50%) translateY(-10px); pointer-events: none; }
}
.feat-backdrop {
position: fixed;
inset: 0;
z-index: 1000;
background: rgba(0, 0, 0, 0.62);
backdrop-filter: blur(12px) saturate(1.1);
-webkit-backdrop-filter: blur(12px) saturate(1.1);
opacity: 0;
pointer-events: none;
transition: opacity 0.4s ease;
}
.feat-backdrop.visible { opacity: 1; pointer-events: auto; }
main:has(.feat-modal.visible),
main.feat-modal-open { z-index: 1002; }
.feat-modal {
position: fixed;
z-index: 1001;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0.96);
width: min(640px, calc(100vw - 2rem));
max-height: calc(100vh - 4rem);
border-radius: 20px;
border: 1px solid rgba(255,255,255,0.10);
background:
radial-gradient(ellipse 60% 50% at 20% 0%, var(--feat-accent-bg, rgba(60,100,200,0.10)), transparent 65%),
radial-gradient(ellipse 55% 60% at 80% 100%, rgba(40,88,165,0.12), transparent 65%),
rgba(8, 12, 22, 0.84);
backdrop-filter: blur(36px) saturate(1.4);
-webkit-backdrop-filter: blur(36px) saturate(1.4);
box-shadow:
0 32px 100px rgba(0, 0, 0, 0.70),
0 0 90px var(--feat-accent-glow, rgba(60,100,200,0.14)),
inset 0 1px 0 rgba(255,255,255,0.08);
opacity: 0;
pointer-events: none;
transition: opacity 0.4s ease, transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
display: flex;
flex-direction: column;
overflow: hidden;
}
.feat-modal.visible {
opacity: 1;
pointer-events: auto;
transform: translate(-50%, -50%) scale(1);
}
.feat-modal::before {
content: '';
position: absolute;
top: 0; left: 12%; right: 12%;
height: 1px;
background: linear-gradient(90deg, transparent, var(--feat-accent, rgba(255,255,255,0.32)), transparent);
pointer-events: none;
z-index: 2;
}
.feat-modal::after {
content: '';
position: absolute;
inset: 0;
background-image: radial-gradient(circle, rgba(255,255,255,0.045) 1px, transparent 1.5px);
background-size: 22px 22px;
pointer-events: none;
z-index: 0;
}
.feat-modal-header {
display: flex;
align-items: flex-start;
gap: 1rem;
padding: 1.625rem 1.625rem 0;
position: relative;
z-index: 1;
}
.feat-modal-icon {
width: 52px; height: 52px;
border-radius: 12px;
display: flex;
align-items: center; justify-content: center;
flex-shrink: 0;
background:
radial-gradient(ellipse at 30% 20%, var(--feat-accent-bg, rgba(255,255,255,0.08)), transparent 70%),
rgba(15, 23, 42, 0.55);
border: 1px solid var(--feat-accent-border, rgba(255,255,255,0.12));
color: var(--feat-accent, var(--text-2));
box-shadow:
0 6px 20px rgba(0, 0, 0, 0.40),
0 0 24px var(--feat-accent-glow, transparent),
inset 0 1px 0 rgba(255,255,255,0.10);
position: relative;
overflow: hidden;
}
.feat-modal-icon::before {
content: '';
position: absolute;
top: 0; left: 12%; right: 12%;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.20), transparent);
}
.feat-modal-icon svg { width: 24px; height: 24px; position: relative; z-index: 1; }
.feat-modal-titlebar {
flex: 1;
display: flex;
flex-direction: column;
gap: 0.35rem;
min-width: 0;
padding-top: 0.15rem;
}
.feat-modal-eyebrow {
font-family: var(--font-mono);
font-size: 0.70rem;
font-weight: var(--w-semibold);
text-transform: uppercase;
letter-spacing: 0.18em;
color: var(--feat-accent, var(--text-3));
line-height: var(--lh-ui);
opacity: 0.85;
}
.feat-modal-title {
font-family: var(--font-sans);
font-size: 1.55rem;
font-weight: 700;
letter-spacing: -0.022em;
line-height: 1.15;
color: var(--text-1);
text-shadow: 0 0 40px var(--feat-accent-glow, transparent);
}
.feat-modal-title .ft-em {
font-family: var(--font-serif);
font-style: italic;
font-weight: 500;
font-size: 1.04em;
letter-spacing: 0;
}
.feat-modal-close {
width: 34px; height: 34px;
border-radius: 10px;
display: flex; align-items: center; justify-content: center;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.10);
color: var(--text-3);
flex-shrink: 0;
transition: all 0.2s ease;
cursor: pointer;
position: relative;
z-index: 1;
}
.feat-modal-close:hover {
background: rgba(255,255,255,0.08);
color: var(--text-1);
border-color: rgba(255,255,255,0.18);
}
.feat-modal-close svg { width: 14px; height: 14px; }
.feat-modal-tagline {
font-family: var(--font-sans);
font-size: 1.16rem;
font-weight: 400;
color: var(--text-1);
line-height: 1.5;
letter-spacing: -0.011em;
padding: 1rem 1.625rem 0;
position: relative;
z-index: 1;
}
.feat-modal-body {
padding: 1.375rem 1.625rem 0.5rem;
overflow-y: auto;
flex: 1;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
position: relative;
z-index: 1;
}
.feat-modal-body::-webkit-scrollbar { width: 4px; }
.feat-modal-body::-webkit-scrollbar-track { background: transparent; }
.feat-modal-body::-webkit-scrollbar-thumb {
background: rgba(255,255,255,0.1);
border-radius: 2px;
}
.feat-hero-proof {
margin-bottom: 1.5rem;
padding: 1.125rem 1.125rem;
border-radius: 14px;
border: 1px solid var(--feat-accent-border, rgba(255,255,255,0.10));
background:
radial-gradient(ellipse at 50% -20%, var(--feat-accent-bg, rgba(255,255,255,0.05)), transparent 65%),
rgba(15, 23, 42, 0.55);
backdrop-filter: blur(14px);
box-shadow:
0 12px 36px rgba(0, 0, 0, 0.30),
0 0 32px var(--feat-accent-glow, transparent),
inset 0 1px 0 rgba(255,255,255,0.06);
position: relative;
overflow: hidden;
}
.feat-hero-proof::before {
content: '';
position: absolute;
top: 0; left: 8%; right: 8%;
height: 1px;
background: linear-gradient(90deg, transparent, var(--feat-accent, rgba(255,255,255,0.15)), transparent);
pointer-events: none;
}
.feat-section { margin-bottom: 1.375rem; }
.feat-section-title {
font-family: var(--font-sans);
font-size: 0.8rem;
font-weight: 600;
text-transform: none;
letter-spacing: 0.004em;
color: var(--text-3);
opacity: 1;
margin-bottom: 0.7rem;
display: inline-flex;
align-items: center;
gap: 0.55rem;
}
.feat-section-title::before {
content: '';
width: 0.9rem; height: 1px;
background: var(--feat-accent, currentColor);
opacity: 0.75;
}
.feat-what {
font-family: var(--font-sans);
font-size: 0.96rem;
font-weight: 400;
color: var(--text-2);
line-height: 1.62;
letter-spacing: -0.006em;
}
.feat-capabilities {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.55rem 1.25rem;
}
.feat-cap {
display: flex;
align-items: flex-start;
gap: 0.625rem;
font-family: var(--font-sans);
font-size: 0.86rem;
font-weight: 400;
color: var(--text-2);
line-height: 1.45;
letter-spacing: -0.005em;
}
.feat-cap-tick {
width: 7px; height: 7px;
border-radius: 50%;
background: var(--feat-accent, var(--text-3));
box-shadow: 0 0 10px var(--feat-accent, transparent);
margin-top: 0.42rem;
flex-shrink: 0;
}
.feat-connects {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.feat-connect-btn {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.45rem 0.875rem 0.45rem 0.7rem;
border-radius: 100px;
border: 1px solid rgba(255,255,255,0.10);
background: rgba(15, 23, 42, 0.45);
backdrop-filter: blur(8px);
color: var(--text-2);
font-family: var(--font-sans);
font-size: 0.78rem;
font-weight: 500;
letter-spacing: -0.005em;
cursor: pointer;
transition: all 0.2s ease;
}
.feat-connect-btn:hover {
background: rgba(15, 23, 42, 0.70);
border-color: rgba(255,255,255,0.20);
color: var(--text-1);
transform: translateY(-1px);
}
.feat-connect-btn .dot {
width: 7px; height: 7px;
border-radius: 50%;
background: currentColor;
box-shadow: 0 0 8px currentColor;
flex-shrink: 0;
}
.feat-modal-footer {
display: flex;
gap: 0.625rem;
padding: 1.125rem 1.625rem 1.375rem;
border-top: 1px solid rgba(255,255,255,0.06);
position: relative;
z-index: 1;
background: rgba(0,0,0,0.18);
backdrop-filter: blur(14px);
}
.feat-cta-primary {
flex: 1;
padding: 0.85rem 1.25rem;
border-radius: 100px;
background:
linear-gradient(135deg, var(--feat-accent-bg, rgba(60,100,200,0.18)) 0%, rgba(15, 23, 42, 0.55) 100%);
border: 1px solid var(--feat-accent-border, rgba(255,255,255,0.18));
color: var(--text-1);
font-family: var(--font-sans);
font-size: 0.88rem;
font-weight: 600;
letter-spacing: -0.005em;
line-height: 1.3;
transition: all 0.2s ease;
cursor: pointer;
box-shadow:
0 4px 16px rgba(0, 0, 0, 0.30),
0 0 24px var(--feat-accent-glow, transparent),
inset 0 1px 0 rgba(255,255,255,0.10);
position: relative;
overflow: hidden;
}
.feat-cta-primary::before {
content: '';
position: absolute;
top: 0; left: 12%; right: 12%;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.20), transparent);
}
.feat-cta-primary:hover {
transform: translateY(-1px);
border-color: var(--feat-accent, rgba(255,255,255,0.30));
box-shadow:
0 6px 20px rgba(0, 0, 0, 0.36),
0 0 40px var(--feat-accent-glow, rgba(60,100,200,0.25)),
inset 0 1px 0 rgba(255,255,255,0.12);
}
.feat-cta-secondary {
padding: 0.85rem 1.25rem;
border-radius: 100px;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.10);
color: var(--text-2);
font-family: var(--font-sans);
font-size: 0.88rem;
font-weight: 500;
letter-spacing: -0.005em;
line-height: 1.3;
transition: all 0.2s ease;
cursor: pointer;
}
.feat-cta-secondary:hover {
background: rgba(255,255,255,0.08);
color: var(--text-1);
border-color: rgba(255,255,255,0.18);
}
.hp-archetypes { display: flex; flex-direction: column; gap: 0.65rem; }
.hp-arch-row { display: grid; grid-template-columns: 32px 1fr 42px; gap: 0.875rem; align-items: center; }
.hp-arch-chip { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 0.72rem; font-weight: var(--w-bold); color: #050a13; box-shadow: 0 0 14px var(--c, transparent), inset 0 1px 0 rgba(255,255,255,0.20); }
.hp-arch-meta { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }
.hp-arch-name { font-size: var(--text-caption); color: var(--text-2); font-weight: var(--w-ui); transition: color 0.3s; }
.hp-arch-bar { position: relative; height: 4px; background: rgba(255,255,255,0.05); border-radius: 2px; overflow: hidden; }
.hp-arch-fill { position: absolute; top: 0; left: 0; bottom: 0; border-radius: 2px; background: var(--c, var(--feat-accent)); box-shadow: 0 0 6px var(--c, transparent); transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1); }
.hp-arch-pct { font-family: var(--font-mono); font-size: var(--text-caption); color: var(--text-3); text-align: right; transition: color 0.3s; }
.hp-scoring { display: grid; grid-template-columns: auto 1fr; gap: 1.25rem; align-items: center; }
.hp-score-block { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0.25rem 1rem 0.25rem 0; border-right: 1px solid rgba(255,255,255,0.06); min-width: 90px; }
.hp-score-label { font-family: var(--font-mono); font-size: var(--text-micro); text-transform: uppercase; letter-spacing: var(--tracking-micro); color: var(--text-3); margin-bottom: 0.35rem; }
.hp-score-value { font-family: var(--font-mono); font-size: 2.6rem; font-weight: var(--w-bold); color: var(--feat-accent, var(--text-1)); line-height: 1; letter-spacing: -0.04em; text-shadow: 0 0 24px var(--feat-accent-glow, transparent); transition: text-shadow 0.4s ease; }
.hp-score-value.hp-pulse { animation: hp-num-pulse 0.55s ease; }
@keyframes hp-num-pulse {
0% { text-shadow: 0 0 24px var(--feat-accent-glow, transparent); }
45% { text-shadow: 0 0 36px var(--feat-accent), 0 0 18px var(--feat-accent); }
100% { text-shadow: 0 0 24px var(--feat-accent-glow, transparent); }
}
.hp-signal { transition: opacity 0.4s ease, transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), max-height 0.4s ease; max-height: 32px; overflow: hidden; display: grid; grid-template-columns: 10px 1fr auto; gap: 0.55rem; align-items: center; font-size: var(--text-caption); }
.hp-signal-enter { opacity: 0; transform: translateY(-10px); max-height: 0; }
.hp-signal-exit { opacity: 0; transform: translateX(20px); max-height: 0; }
.hp-signal-tick { width: 10px; height: 10px; border-radius: 50%; background: var(--feat-accent); box-shadow: 0 0 6px var(--feat-accent); transition: background 0.4s, box-shadow 0.4s, transform 0.4s; }
.hp-signal-enter .hp-signal-tick { transform: scale(1.6); background: var(--feat-accent); box-shadow: 0 0 14px var(--feat-accent); }
.hp-signal.cold .hp-signal-tick { background: rgba(255,255,255,0.15); box-shadow: none; }
.hp-signal-label { color: var(--text-2); }
.hp-signal-value { font-family: var(--font-mono); color: var(--text-3); font-size: var(--text-micro); }
.hp-score-delta { font-family: var(--font-mono); font-size: var(--text-micro); color: #94C5B0; margin-top: 0.4rem; }
.hp-signal-list { display: flex; flex-direction: column; gap: 0.4rem; }
.hp-triggers { display: flex; flex-direction: column; gap: 0.55rem; }
.hp-flow { display: grid; grid-template-columns: 1fr 14px 1fr 14px 1.3fr; gap: 0.4rem; align-items: center; }
.hp-flow-step { padding: 0.4rem 0.5rem; border-radius: 6px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.06); font-size: var(--text-micro); color: var(--text-2); text-align: center; line-height: 1.3; transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.4s ease, transform 0.3s ease; }
.hp-flow-step.hp-active { background: var(--feat-accent-bg); border-color: var(--feat-accent-border); color: var(--feat-accent); box-shadow: 0 0 14px var(--feat-accent-glow, transparent); }
.hp-flow-step.action { background: var(--feat-accent-bg); border-color: var(--feat-accent-border); color: var(--feat-accent); font-weight: var(--w-semibold); }
.hp-flow-step.action.hp-active { transform: scale(1.04); box-shadow: 0 0 22px var(--feat-accent), inset 0 0 0 1px var(--feat-accent); }
.hp-flow-arrow { color: var(--text-4); font-size: 0.8rem; text-align: center; transition: color 0.25s ease, text-shadow 0.25s ease, transform 0.25s ease; }
.hp-flow-arrow.hp-active { color: var(--feat-accent); text-shadow: 0 0 8px var(--feat-accent); transform: translateX(2px); }
.hp-integrations { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.55rem; }
.hp-int { display: flex; align-items: center; gap: 0.55rem; padding: 0.625rem 0.75rem; border-radius: 10px; background: rgba(15, 23, 42, 0.45); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,0.08); font-size: 0.74rem; position: relative; overflow: hidden; transition: border-color 0.25s ease, background 0.25s ease; }
.hp-int:hover { border-color: rgba(255,255,255,0.14); background: rgba(15, 23, 42, 0.65); }
.hp-int::after { content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 60%; background: linear-gradient(90deg, transparent, var(--feat-accent-glow, rgba(255,255,255,0.06)), transparent); opacity: 0; pointer-events: none; }
.hp-int.hp-syncing::after { animation: hp-sync-sweep 0.9s cubic-bezier(0.4, 0, 0.2, 1); }
@keyframes hp-sync-sweep {
0% { left: -60%; opacity: 0; }
20% { opacity: 1; }
80% { opacity: 1; }
100% { left: 100%; opacity: 0; }
}
.hp-int-name { color: var(--text-2); font-weight: var(--w-ui); flex: 1; }
.hp-int-status { width: 6px; height: 6px; border-radius: 50%; background: var(--feat-accent); box-shadow: 0 0 6px var(--feat-accent); transition: background 0.3s, box-shadow 0.3s; }
.hp-int.pending .hp-int-status { background: rgba(255,255,255,0.18); box-shadow: none; animation: hp-int-spin 0.8s linear infinite; }
@keyframes hp-int-spin {
0%, 100% { opacity: 1; }
50% { opacity: 0.3; }
}
.hp-dashboard { display: flex; flex-direction: column; gap: 0.5rem; }
.hp-dash-header { display: flex; justify-content: space-between; align-items: center; font-family: var(--font-mono); font-size: var(--text-micro); text-transform: uppercase; letter-spacing: var(--tracking-micro); color: var(--text-3); padding-bottom: 0.5rem; border-bottom: 1px solid rgba(255,255,255,0.06); }
.hp-dash-live::before { content: '●'; color: var(--feat-accent); margin-right: 0.4rem; font-size: 0.6rem; animation: hp-pulse 2s ease infinite; }
.hp-dash-row { display: grid; grid-template-columns: 50px 1fr 50px 90px; gap: 0.6rem; align-items: center; font-size: var(--text-caption); }
.hp-dash-id { font-family: var(--font-mono); color: var(--text-3); font-size: var(--text-micro); }
.hp-dash-arch { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--text-2); }
.hp-dash-arch::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--c); box-shadow: 0 0 6px var(--c); flex-shrink: 0; }
.hp-dash-clv { font-family: var(--font-mono); color: var(--text-2); text-align: right; font-size: var(--text-micro); }
.hp-dash-score { display: flex; align-items: center; gap: 0.4rem; }
.hp-dash-bar { flex: 1; height: 4px; background: rgba(255,255,255,0.06); border-radius: 2px; overflow: hidden; }
.hp-dash-bar-fill { height: 100%; background: var(--feat-accent); box-shadow: 0 0 6px var(--feat-accent); border-radius: 2px; transition: width 0.55s cubic-bezier(0.16, 1, 0.3, 1); }
.hp-dash-num { font-family: var(--font-mono); font-size: var(--text-micro); color: var(--text-2); width: 22px; text-align: right; transition: color 0.3s; }
.hp-dash-live { transition: color 0.3s; }
.hp-segments { display: flex; flex-direction: column; gap: 0.1rem; }
.hp-seg-row { display: grid; grid-template-columns: 1fr auto auto; gap: 0.875rem; align-items: center; padding: 0.625rem 0; border-bottom: 1px solid rgba(255,255,255,0.06); transition: padding-left 0.25s ease; }
.hp-seg-row:last-child { border-bottom: none; }
.hp-seg-row:hover { padding-left: 0.375rem; }
.hp-seg-name { font-size: 0.88rem; color: var(--text-2); font-weight: 500; letter-spacing: -0.005em; }
.hp-seg-count { font-family: var(--font-mono); font-size: 1rem; color: var(--text-1); font-weight: 600; letter-spacing: -0.01em; transition: color 0.3s, transform 0.3s; }
.hp-seg-count.hp-bumped { animation: hp-bump 0.45s ease; }
@keyframes hp-bump {
0% { transform: translateY(0); }
50% { transform: translateY(-2px); filter: brightness(1.25); }
100% { transform: translateY(0); }
}
.hp-seg-trend { font-size: 0.75rem; font-family: var(--font-mono); width: 14px; text-align: center; }
.hp-seg-trend.up { color: #94C5B0; }
.hp-seg-trend.down { color: #D88A95; }
.hp-seg-trend.flat { color: var(--text-3); }
.hp-forecasting { display: flex; flex-direction: column; gap: 0.85rem; }
.hp-spark { width: 100%; height: 56px; display: block; overflow: visible; }
.hp-spark polyline, .hp-spark polygon { transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1); }
.hp-spark-tip { filter: drop-shadow(0 0 6px var(--feat-accent)); transition: cy 0.6s cubic-bezier(0.4, 0, 0.2, 1); animation: hp-tip-pulse 1.6s ease infinite; }
@keyframes hp-tip-pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.45; }
}
.hp-horizons { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.55rem; }
.hp-horizon { text-align: center; padding: 0.7rem 0.5rem; border-radius: 10px; background: rgba(15, 23, 42, 0.45); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,0.08); transition: border-color 0.25s ease, transform 0.25s ease; }
.hp-horizon:hover { border-color: var(--feat-accent-border, rgba(255,255,255,0.18)); transform: translateY(-1px); }
.hp-horizon-label { font-family: var(--font-mono); font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.16em; color: var(--text-3); margin-bottom: 0.4rem; }
.hp-horizon-value { font-family: var(--font-mono); font-size: 1.05rem; color: var(--feat-accent); font-weight: 700; letter-spacing: -0.01em; text-shadow: 0 0 12px var(--feat-accent-glow, transparent); }
.hp-privacy { display: flex; flex-direction: column; gap: 0.65rem; }
.hp-badges { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.55rem; }
.hp-badge { display: flex; align-items: center; gap: 0.625rem; padding: 0.7rem 0.75rem; border-radius: 10px; background: rgba(15, 23, 42, 0.45); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,0.08); transition: border-color 0.25s ease; }
.hp-badge:hover { border-color: var(--feat-accent-border, rgba(255,255,255,0.18)); }
.hp-badge-tick { width: 20px; height: 20px; border-radius: 50%; background: var(--feat-accent); display: flex; align-items: center; justify-content: center; font-size: 11px; color: #050a13; font-weight: var(--w-bold); flex-shrink: 0; box-shadow: 0 0 12px var(--feat-accent-glow, transparent), inset 0 1px 0 rgba(255,255,255,0.25); }
.hp-badge-text { display: flex; flex-direction: column; min-width: 0; }
.hp-badge-label { font-size: var(--text-caption); color: var(--text-2); font-weight: var(--w-semibold); line-height: 1.2; }
.hp-badge-sub { font-size: var(--text-micro); color: var(--text-3); line-height: 1.3; }
.hp-reassurance { display: flex; align-items: center; gap: 0.55rem; padding: 0.55rem 0.75rem; border-radius: var(--radius); background: var(--feat-accent-bg); border: 1px solid var(--feat-accent-border); color: var(--feat-accent); font-family: var(--font-mono); font-size: var(--text-caption); }
.hp-reassurance::before { content: '●'; font-size: 0.55rem; animation: hp-pulse 2s ease infinite; }
@keyframes hp-pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.35; }
}
.hp-aichat { display: flex; flex-direction: column; gap: 0.6rem; }
.hp-aichat-providers { display: flex; gap: 0.35rem; }
.hp-aichat-provider {
flex: 1;
padding: 0.35rem 0.4rem;
border-radius: 6px;
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.06);
font-family: var(--font-mono);
font-size: var(--text-micro);
color: var(--text-3);
text-align: center;
transition: background 0.4s ease, border-color 0.4s ease, color 0.4s ease, box-shadow 0.4s ease;
}
.hp-aichat-provider.active {
background: var(--feat-accent-bg);
border-color: var(--feat-accent-border);
color: var(--feat-accent);
box-shadow: 0 0 12px var(--feat-accent-glow, transparent);
}
.hp-aichat-conversation {
display: flex;
flex-direction: column;
gap: 0.45rem;
padding: 0.65rem 0.7rem;
border-radius: var(--radius);
background: rgba(0,0,0,0.28);
border: 1px solid rgba(255,255,255,0.04);
}
.hp-aichat-msg {
font-size: var(--text-caption);
line-height: 1.4;
padding: 0.4rem 0.6rem;
border-radius: 8px;
max-width: 92%;
}
.hp-aichat-msg.user {
background: rgba(255,255,255,0.04);
color: var(--text-2);
align-self: flex-end;
border-bottom-right-radius: 2px;
}
.hp-aichat-msg.ai {
background: var(--feat-accent-bg);
border: 1px solid var(--feat-accent-border);
color: var(--text-1);
align-self: flex-start;
border-bottom-left-radius: 2px;
}
.hp-aichat-msg.ai::before {
content: 'AI';
display: inline-block;
font-family: var(--font-mono);
font-size: 0.6rem;
font-weight: var(--w-bold);
color: var(--feat-accent);
letter-spacing: 0.06em;
margin-right: 0.5rem;
padding: 0.05rem 0.3rem;
border-radius: 3px;
background: rgba(0,0,0,0.25);
vertical-align: middle;
}
.hp-aichat-action {
display: inline-flex;
align-items: center;
gap: 0.4rem;
align-self: flex-start;
padding: 0.4rem 0.75rem;
border-radius: 100px;
background: var(--feat-accent-bg);
border: 1px solid var(--feat-accent-border);
color: var(--feat-accent);
font-size: var(--text-micro);
font-weight: var(--w-semibold);
font-family: var(--font-mono);
transition: filter 0.3s ease, box-shadow 0.3s ease;
}
.hp-aichat-action::before {
content: '↳';
font-size: 0.95em;
}
.hp-aichat-action.hp-fired {
filter: brightness(1.2);
box-shadow: 0 0 16px var(--feat-accent-glow, transparent);
}
@media (min-width: 901px) {
#features-cards { display: none !important; }
}
@media (max-width: 900px) {
#features-constellation,
.feat-backdrop,
.feat-modal { display: none !important; }
}
@media (max-width: 900px) {
.feature-sidebar { display: none; }
.af-cosmos-stage { height: clamp(420px, 70vh, 640px); }
.feat-modal {
width: calc(100vw - 1rem);
max-height: calc(100vh - 1.5rem);
max-height: calc(100dvh - 1.5rem);
border-radius: var(--radius-lg);
backdrop-filter: blur(18px) saturate(1.2);
-webkit-backdrop-filter: blur(18px) saturate(1.2);
}
.feat-backdrop {
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
}
.feat-capabilities { grid-template-columns: 1fr; }
.hp-integrations { grid-template-columns: repeat(2, 1fr); }
.hp-scoring { grid-template-columns: 1fr; }
.hp-score-block { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.06); padding: 0 0 0.75rem 0; flex-direction: row; justify-content: center; gap: 0.75rem; }
.hp-flow { grid-template-columns: 1fr; }
.hp-flow-arrow { display: none; }
.hp-dash-row { grid-template-columns: 50px 1fr 50px; }
.hp-dash-row .hp-dash-score { display: none; }
.hint-bar { display: none; }
}
body.afc-scroll-locked {
overflow: hidden !important;
touch-action: none;
}
@media (max-width: 480px) {
.feat-modal-title { font-size: 1.25rem; }
.feat-modal-tagline { font-size: 0.95rem; }
}
/* ════════════════════════════════════════════════════════════════
   MOBILE RESPONSIVE PASS + SILVER WORDMARK  (appended 2026-06-24)
   Sits after the existing media blocks so overrides win at equal
   specificity. Kept readable on purpose.
   ════════════════════════════════════════════════════════════════ */

/* --- Silver "AURAFLOW" hero wordmark (replaces the faint logo-image text) --- */
.hero-logo-wrap{ flex-direction:column; align-items:center; }
.af-wordmark{ display:block; width:clamp(150px, 16vw, 232px); height:auto; margin:0.4rem auto 0; -webkit-user-select:none; user-select:none; }
.af-word{ font-family:var(--font-sans, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif); font-optical-sizing:auto; font-weight:400; font-style:normal; font-size:clamp(1.35rem, 1.1vw + 1.02rem, 1.65rem); line-height:1; letter-spacing:0.32em; text-indent:0.32em; background-image:linear-gradient(176deg, #eef2f8 0%, #d3dbe7 46%, #aab6c7 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; filter:drop-shadow(0 1px 1px rgba(0,0,0,0.4)); }
.af-tag{ font-family:var(--font-sans, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif); font-weight:400; font-size:0.8rem; letter-spacing:0.22em; text-indent:0.22em; line-height:1; color:#8793a6; padding:0; border:0; background:none; white-space:nowrap; }
@supports not ((-webkit-background-clip:text) or (background-clip:text)){ .af-word{ background:none; -webkit-text-fill-color:#f4f7fb; color:#f4f7fb; } }
@media (max-width:414px){ .af-wordmark{ margin-top:0.85rem; gap:0.5rem; } .af-word{ letter-spacing:0.26em; text-indent:0.26em; font-size:clamp(1.12rem, 5.6vw, 1.4rem); } .af-tag{ font-size:0.72rem; letter-spacing:0.18em; text-indent:0.18em; } }
@media (prefers-contrast:more){ .af-word{ background:none; -webkit-text-fill-color:#ffffff; color:#ffffff; filter:none; } .af-tag{ color:#c8d6ea; border-color:rgba(96,165,250,0.4); } }

/* ===== MOBILE: tablets & phones (768px) ===== */
@media (max-width:768px){
  /* Global fluid type — lower clamp floors + relax tracking so hero h1 and every section h2 wrap instead of clipping */
  :root{ --text-hero:clamp(2rem,8vw,2.75rem); --text-display:clamp(1.5rem,6.4vw,2rem); --tracking-hero:-0.02em; --tracking-display:-0.015em; }
  .hero-headline{ line-height:1.12; overflow-wrap:break-word; word-break:break-word; hyphens:auto; text-wrap:balance; margin-bottom:1.25rem; }
  .hero-headline-gradient{ overflow-wrap:break-word; word-break:break-word; }
  .hero-headline br{ display:none; }
  .section-title{ line-height:1.18; overflow-wrap:break-word; word-break:break-word; hyphens:auto; text-wrap:balance; padding:0 0.25rem; }
  .section-title br{ display:none; }
  .hero-sub,.section-sub{ font-size:1rem; line-height:1.55; padding:0 0.25rem; }
  html,body{ overflow-x:clip; }
  .hero-inner,.section-inner{ overflow-x:clip; }

  /* Header / nav — 44px toggle, tighten inner, drop header CTA (lives in drawer + hero) */
  .header-inner{ gap:0.75rem; padding:0 1rem; }
  .nav-toggle{ width:2.75rem; height:2.75rem; margin-left:auto; }
  .nav-toggle i{ font-size:1.4rem; }
  .header-actions{ gap:0.5rem; margin-left:0; }
  .header-actions .btn-primary{ display:none; }
  .mobile-cta-btn{ min-height:44px; display:flex; align-items:center; justify-content:center; }

  /* Hero logo + badge — shrink the 280px logo, trim top padding */
  .hero{ padding-top:calc(var(--nav-height) + 2.5rem); }
  .hero-inner{ padding:0 1.25rem; }
  .hero-logo{ width:180px; height:180px; }
  .hero-logo-wrap{ margin-bottom:1.25rem; }
  .hero-badge{ margin-bottom:1.5rem; }

  /* Hero CTA + waitlist — full-width (override existing 280px); 48px targets; 16px inputs */
  .hero-ctas{ max-width:none; width:100%; gap:0.75rem; margin-bottom:3rem; padding:0 0.25rem; }
  .wl-wrap{ max-width:none; }
  .wl-trigger{ min-height:48px; font-size:1rem; }
  .cta-secondary{ width:100%; justify-content:center; min-height:48px; padding:0.85rem 1.25rem; }
  .wl-submit{ min-height:48px; }
  .wl-field input{ font-size:16px; }
  .wl-close{ width:44px; height:44px; display:flex; align-items:center; justify-content:center; padding:0; }
  .wl-back{ min-height:44px; }

  /* Clients strip — trim desktop-tall padding/gap */
  .clients{ padding:2.5rem 1rem 2rem; }
  .clients-label{ margin-bottom:1.5rem; }
  .clients-row{ gap:1rem 1.75rem; }

  /* Dashboard mockup tabs — horizontal-scroll rail; detach the 'Tracking live' chip from margin-left:auto */
  .dash-tabs{ flex-wrap:nowrap; overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; scrollbar-width:none; padding:0 0.5rem; scroll-snap-type:x proximity; }
  .dash-tabs::-webkit-scrollbar{ display:none; }
  .dt-tab{ flex:0 0 auto; padding:0.6rem 0.7rem; scroll-snap-align:start; }
  .dash-tabs > div[style*="margin-left:auto"]{ margin-left:0 !important; flex:0 0 auto; }
  .dash-content{ padding:0.75rem; }

  /* Dashboard stat callouts — stack vertically with horizontal hairlines */
  .dash-stats{ flex-direction:column; gap:0; padding:0.5rem 1rem; margin-top:2rem; max-width:360px; }
  .dash-stat{ flex-direction:row; justify-content:space-between; align-items:center; width:100%; padding:0.9rem 0.25rem; gap:0.75rem; text-align:left; }
  .dash-stat-value{ font-size:1.85rem; flex-shrink:0; }
  .dash-stat-label{ max-width:none; text-align:right; }
  .dash-stat-divider{ width:100%; height:1px; }

  /* Dashboard duplicated wrapper — neutralise nested wrap padding/max-width + kill the second conic beam */
  .hero-mockup-wrap .hero-mockup-wrap{ max-width:none !important; padding:0 !important; margin:0 !important; }
  .hero-mockup-wrap .hero-mockup-outer .hero-mockup-outer::before{ display:none; }
  .m-card{ padding:0.8rem; }
  .arch-bar-label{ width:58px; }

  /* Pricing + global section padding — 44px CTAs, surface Pro first, trim section padding */
  .section{ padding-top:4rem; padding-bottom:4rem; }
  .pricing-card{ padding:1.5rem; }
  .pricing-card--popular{ order:-1; }
  .plan-cta{ padding:0.85rem 1.25rem; min-height:44px; display:flex; align-items:center; justify-content:center; }

  /* CTA marquee + overlay — override existing width; cut 600px marquee dead-space */
  .marquee-wrap{ height:460px; }
  .cta-overlay{ width:calc(100vw - 1.5rem); max-width:380px; padding:1.5rem 1.25rem; }
  .cta-overlay .wl-wrap{ max-width:100%; }

  /* Footer — 44px link rows, shrink inline-styled logo, trim padding */
  .site-footer{ padding:3rem 1.25rem 2rem; }
  .footer-top{ gap:2rem 1.5rem; }
  .footer-logo img{ height:64px !important; }
  .footer-links{ gap:0.25rem; }
  .footer-links a{ display:inline-block; padding:0.5rem 0; min-height:44px; line-height:1.7; }
  .footer-col h3{ margin-bottom:0.5rem; }

  /* Loop mockup ("Every channel in lockstep") — the interleaved base rules (L1761/L1809)
     override the earlier 768 block, leaving feed-wrap flex:1 (the gap) + non-shrinking
     stats (the right-edge clip). Re-assert here so source-order wins. */
  .loop-layout{ grid-template-columns:1fr; min-height:0; }
  .loop-panel{ min-width:0; border-right:none; }
  .loop-feed-wrap{ height:200px; flex:0 0 auto; }
  .loop-engine-stats{ width:100%; gap:0.5rem; justify-content:space-between; }
  .loop-engine-stat{ min-width:0; flex:1 1 0; text-align:center; }
  #intel-loop .hero-mockup{ overflow:hidden; }
}

/* ===== MOBILE: phones (480px) ===== */
@media (max-width:480px){
  /* Loop mockup — tighten so it fits 360px-class phones (where the bug shows) */
  .hero-mockup-wrap{ padding-left:0.6rem !important; padding-right:0.6rem !important; }
  .loop-panel{ padding:0.85rem 0.7rem; }
  .loop-engine-stat-val{ font-size:1.3rem; }
  .lfi-time{ font-size:0.6rem; }
  .loop-feed-item{ padding:0.5rem 0.5rem; }
  :root{ --text-hero:clamp(1.75rem,8.5vw,2.25rem); --text-display:clamp(1.375rem,7vw,1.75rem); }
  .hero-sub{ font-size:0.95rem; }

  .header-logo img:first-child{ height:32px !important; }
  .header-logo img:last-child{ height:26px !important; }

  .hero-logo{ width:140px; height:140px; }

  .wl-panel{ padding:1rem; }

  .clients-row{ gap:0.875rem 1.25rem; }
  .client-logo{ font-size:0.8rem; }

  .dt-tab{ font-size:0.7rem; padding:0.55rem 0.6rem; }
  .dash-tabs > div[style*="margin-left:auto"]{ display:none; }

  .dash-kpi-row{ grid-template-columns:1fr; }
  .dash-bottom-row{ grid-template-columns:1fr; }
  .m-card-value{ font-size:1.1rem; }
  .m-ring{ width:40px; height:40px; }

  .visitor-row{ gap:0.35rem; padding:0.35rem 0.4rem; }
  .visitor-name{ min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .visitor-archetype{ font-size:0.62rem; padding:0.12rem 0.35rem; }
  .visitor-clv{ font-size:0.66rem; }

  .feature-card{ padding:1.5rem 1.25rem; gap:0.75rem; }
  .feature-name{ font-size:1.125rem; }
  .feature-desc{ font-size:0.9rem; }

  .pricing-popular-badge{ position:static; align-self:flex-start; margin-bottom:-0.5rem; }
  .plan-price-amount{ font-size:2rem; }

  .blog-grid{ scroll-padding-left:0.25rem; gap:1rem; }
  .blog-card{ flex-basis:86%; min-height:18rem; }
  .blog-thumb{ height:6rem; padding:1.1rem 1.1rem 0; }
  .blog-title{ font-size:1rem; }
  .blog-card-body{ padding:0.4rem 1.1rem 1.2rem; }

  .cta-overlay{ width:calc(100vw - 1.5rem); }
  .cta-overlay-title{ font-size:1.2rem; line-height:1.3; }
  .cta-overlay-sub{ font-size:0.88rem; }
}