/* Reset and Base Styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
/* Color System - Refined for Trust & Legibility */
--primary-color: #1E3A8A; /* Navy blue for headlines */
--secondary-color: #7C3AED; /* Purple accent - used sparingly */
--accent-color: #0EA5E9; /* Softer blue instead of cyan */
--text-primary: #1E293B; /* Navy for better readability */
--text-secondary: #64748B; /* Soft grey instead of harsh grey */
--background-primary: #FFFFFF;
--background-secondary: #F8FAFC; /* Softer background */
--surface: #FFFFFF;
--border-color: #E2E8F0; /* Softer border color */
/* Status Colors - More Subtle */
--success-color: #1E3A8A; /* Use navy blue instead of green */
--error-color: #64748B; /* Use grey instead of red */
--warning-color: #F59E0B;
/* Dark Mode Colors - Softer, more readable */
--dark-text-primary: #F5F5F7;
--dark-text-secondary: #A1A1AA;
--dark-background-primary: #0F172A;
--dark-background-secondary: #1E293B;
--dark-surface: #334155;
--dark-border-color: #475569;
/* Shared semantic tokens for themeable components */
--nav-bg: rgba(255, 255, 255, 0.94);
--nav-border: rgba(226, 232, 240, 0.9);
--nav-shadow: 0 12px 32px rgba(15, 23, 42, 0.12);
--nav-bg-scrolled: rgba(255, 255, 255, 0.95);
--nav-shadow-scrolled: 0 2px 20px rgba(0, 0, 0, 0.1);
--nav-icon-color: #1E3A8A;
--footer-bg: #0F172A;
--footer-text-primary: #FFFFFF;
--footer-text-secondary: rgba(255, 255, 255, 0.78);
--footer-link: rgba(255, 255, 255, 0.72);
--footer-divider: rgba(255, 255, 255, 0.12);
--theme-toggle-bg: rgba(255, 255, 255, 0.88);
--theme-toggle-border: rgba(15, 23, 42, 0.12);
--theme-toggle-text: #1E293B;
--theme-toggle-shadow: 0 10px 24px rgba(15, 23, 42, 0.12);
--theme-toggle-hover-border: rgba(30, 58, 138, 0.2);
--theme-toggle-hover-shadow: 0 14px 28px rgba(15, 23, 42, 0.16);
--theme-toggle-icon-bg: rgba(30, 58, 138, 0.1);
--theme-toggle-icon-color: #1E3A8A;
--theme-menu-bg: rgba(255, 255, 255, 0.94);
--theme-menu-border: rgba(226, 232, 240, 0.92);
--theme-menu-shadow: 0 18px 48px rgba(15, 23, 42, 0.18);
--theme-menu-hover-bg: rgba(30, 58, 138, 0.08);
--theme-menu-active-bg: rgba(30, 58, 138, 0.12);
/* Shadows */
--shadow-light: 0 4px 20px rgba(0, 0, 0, 0.1);
--shadow-medium: 0 8px 40px rgba(0, 0, 0, 0.15);
--shadow-heavy: 0 16px 60px rgba(0, 0, 0, 0.2);
--shadow-colored: 0 8px 32px rgba(0, 122, 255, 0.3);
/* Gradients - Blue-focused with subtle accents */
--gradient-primary: linear-gradient(135deg, #1E3A8A 0%, #1E293B 100%);
--gradient-secondary: linear-gradient(135deg, #1E40AF 0%, #1E3A8A 100%);
--gradient-subtle: linear-gradient(135deg, #F8FAFC 0%, #F1F5F9 100%);
--gradient-glass: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
/* Typography */
--font-system: 'Inter Variable', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
--font-display: 'Inter Variable', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
/* Spacing */
--space-xs: 0.25rem;
--space-sm: 0.5rem;
--space-md: 1rem;
--space-lg: 1.5rem;
--space-xl: 2rem;
--space-2xl: 3rem;
--space-3xl: 4rem;
/* Border Radius */
--radius-sm: 0.375rem;
--radius-md: 0.5rem;
--radius-lg: 0.75rem;
--radius-xl: 1rem;
--radius-2xl: 1.5rem;
--radius-full: 9999px;
/* Animations */
--transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
--transition-base: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
--transition-slow: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
--ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
--ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
/* Theme-ready pages opt in with .
New page-specific styles should use semantic tokens plus
html[data-theme="dark"] body.page-name overrides instead of
@media (prefers-color-scheme: dark) page patches. */
html[data-theme="light"] {
color-scheme: light;
}
html[data-theme="dark"] {
color-scheme: dark;
--text-primary: var(--dark-text-primary);
--text-secondary: #B2BFCE;
--background-primary: #08111F;
--background-secondary: #0D1728;
--surface: #111C32;
--border-color: #263246;
--shadow-light: 0 6px 24px rgba(2, 6, 23, 0.32);
--shadow-medium: 0 12px 44px rgba(2, 6, 23, 0.46);
--shadow-heavy: 0 18px 60px rgba(2, 6, 23, 0.58);
--nav-bg: rgba(8, 17, 31, 0.88);
--nav-border: rgba(148, 163, 184, 0.16);
--nav-shadow: 0 14px 38px rgba(2, 6, 23, 0.42);
--nav-bg-scrolled: rgba(8, 17, 31, 0.94);
--nav-shadow-scrolled: 0 16px 40px rgba(2, 6, 23, 0.46);
--nav-icon-color: #E2E8F0;
--footer-bg: #050C17;
--footer-text-primary: #F8FAFC;
--footer-text-secondary: rgba(226, 232, 240, 0.78);
--footer-link: rgba(226, 232, 240, 0.72);
--footer-divider: rgba(148, 163, 184, 0.16);
--theme-toggle-bg: rgba(15, 23, 42, 0.78);
--theme-toggle-border: rgba(148, 163, 184, 0.18);
--theme-toggle-text: #F8FAFC;
--theme-toggle-shadow: 0 14px 30px rgba(2, 6, 23, 0.34);
--theme-toggle-hover-border: rgba(125, 211, 252, 0.3);
--theme-toggle-hover-shadow: 0 18px 36px rgba(2, 6, 23, 0.4);
--theme-toggle-icon-bg: rgba(148, 163, 184, 0.12);
--theme-toggle-icon-color: #DBEAFE;
--theme-menu-bg: rgba(10, 19, 36, 0.96);
--theme-menu-border: rgba(148, 163, 184, 0.18);
--theme-menu-shadow: 0 20px 56px rgba(2, 6, 23, 0.48);
--theme-menu-hover-bg: rgba(59, 130, 246, 0.14);
--theme-menu-active-bg: rgba(59, 130, 246, 0.18);
}
html {
scroll-behavior: smooth;
scroll-padding-top: 80px;
}
@supports (scroll-timeline: works) {
html {
scroll-timeline: --page-scroll block;
}
}
body {
font-family: var(--font-system);
font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
font-variation-settings: 'wght' 400;
line-height: 1.6;
color: var(--text-primary);
background-color: var(--background-primary);
overflow-x: hidden;
transition: color var(--transition-base), background-color var(--transition-base);
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
html.nav-menu-lock {
overflow: hidden;
overscroll-behavior: none;
}
body.nav-menu-lock {
position: fixed;
left: 0;
right: 0;
width: 100%;
overflow: hidden;
}
body.nav-menu-lock nav.site-nav .menu.open,
body.nav-menu-lock nav .menu.open {
touch-action: pan-y;
}
@media (prefers-color-scheme: dark) {
html:not([data-theme-ready="true"]) body,
html:not([data-theme-ready="true"]) h1,
html:not([data-theme-ready="true"]) h2,
html:not([data-theme-ready="true"]) h3,
html:not([data-theme-ready="true"]) h4,
html:not([data-theme-ready="true"]) h5,
html:not([data-theme-ready="true"]) h6,
html:not([data-theme-ready="true"]) p,
html:not([data-theme-ready="true"]) span,
html:not([data-theme-ready="true"]) a,
html:not([data-theme-ready="true"]) li,
html:not([data-theme-ready="true"]) td,
html:not([data-theme-ready="true"]) th,
html:not([data-theme-ready="true"]) label,
html:not([data-theme-ready="true"]) div,
html:not([data-theme-ready="true"]) section {
color: unset !important;
}
html:not([data-theme-ready="true"]) .hero-title,
html:not([data-theme-ready="true"]) .hero-title .title-line,
html:not([data-theme-ready="true"]) .hero-subtitle {
color: white !important;
}
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 clamp(1rem, 4vw, 2rem);
container-type: inline-size;
}
/* Solution Page Components */
body.solution-page {
--solution-section-muted-bg: var(--background-secondary);
--solution-section-dark-bg: #0F172A;
--solution-section-dark-text: #ECFEFF;
--solution-section-dark-lead: rgba(236, 254, 255, 0.88);
--solution-card-radius: 18px;
--solution-card-padding: 1.35rem;
--solution-card-title-size: 1.15rem;
--solution-card-title-gap: 0.55rem;
--solution-card-title-line-height: 1.25;
--solution-card-text-line-height: 1.7;
--solution-card-bg: var(--surface);
--solution-card-border: rgba(15, 23, 42, 0.08);
--solution-card-shadow: 0 12px 32px rgba(15, 23, 42, 0.06);
--solution-card-title-color: var(--text-primary);
--solution-card-text-color: var(--text-secondary);
--solution-card-accent: linear-gradient(90deg, #0F766E, #22D3EE);
--solution-card-glow: radial-gradient(circle, rgba(34, 211, 238, 0.12) 0%, rgba(34, 211, 238, 0) 72%);
--solution-card-glow-opacity: 0;
--solution-card-kicker-bg: rgba(15, 118, 110, 0.08);
--solution-card-kicker-text: #115E59;
--solution-faq-grid-gap: 1.2rem;
--solution-faq-grid-max: 1100px;
--solution-faq-radius: 16px;
--solution-faq-bg: var(--surface);
--solution-faq-border: rgba(15, 23, 42, 0.08);
--solution-faq-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
--solution-faq-open-border: rgba(15, 118, 110, 0.3);
--solution-faq-open-shadow: 0 12px 32px rgba(15, 23, 42, 0.1);
--solution-faq-toggle-color: var(--primary-color);
--solution-faq-accent: linear-gradient(90deg, #0F766E, #22D3EE);
--solution-faq-accent-opacity: 0;
--solution-faq-glow: radial-gradient(circle, rgba(34, 211, 238, 0.12) 0%, rgba(34, 211, 238, 0) 72%);
--solution-faq-glow-opacity: 0;
--solution-cta-max: 980px;
--solution-cta-radius: 18px;
--solution-cta-bg: linear-gradient(135deg, #0F172A, #0F766E);
--solution-cta-text: #ECFEFF;
--solution-cta-muted-text: rgba(236, 254, 255, 0.88);
--solution-cta-shadow: 0 24px 60px rgba(15, 23, 42, 0.16);
}
body.solution-page.solution-page--dark-nav {
--nav-bg-scrolled: var(--nav-bg);
--nav-shadow-scrolled: var(--nav-shadow);
}
body.solution-page.solution-page--dark-nav nav .menubar .menubar-logo {
filter: none;
}
.solution-section--muted {
background: var(--solution-section-muted-bg);
}
.solution-section--dark {
background: var(--solution-section-dark-bg);
color: var(--solution-section-dark-text);
}
.solution-section--dark h2,
.solution-section--dark .section-lead,
.solution-section--dark .section-lead strong {
color: var(--solution-section-dark-text);
}
.solution-section--dark .section-lead {
color: var(--solution-section-dark-lead);
}
.solution-card {
position: relative;
overflow: hidden;
isolation: isolate;
border-radius: var(--solution-card-radius);
border: 1px solid var(--solution-card-border);
background: var(--solution-card-bg);
padding: var(--solution-card-padding);
box-shadow: var(--solution-card-shadow);
}
.solution-card::before {
content: "";
position: absolute;
inset: 0 0 auto 0;
height: 4px;
background: var(--solution-card-accent);
z-index: 0;
}
.solution-card::after {
content: "";
position: absolute;
top: 0;
right: 0;
width: 180px;
height: 180px;
border-radius: 999px;
transform: translate(34%, -52%);
background: var(--solution-card-glow);
opacity: var(--solution-card-glow-opacity);
pointer-events: none;
z-index: 0;
}
.solution-card > * {
position: relative;
z-index: 1;
}
.solution-card h3 {
color: var(--solution-card-title-color);
margin: 0 0 var(--solution-card-title-gap);
font-size: var(--solution-card-title-size);
line-height: var(--solution-card-title-line-height);
letter-spacing: -0.01em;
}
.solution-card p {
margin: 0;
color: var(--solution-card-text-color);
line-height: var(--solution-card-text-line-height);
}
.solution-card--glass {
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.solution-card--accent-cyan {
--solution-card-accent: linear-gradient(90deg, #0F766E, #22D3EE);
--solution-card-glow: radial-gradient(circle, rgba(34, 211, 238, 0.12) 0%, rgba(34, 211, 238, 0) 72%);
--solution-card-glow-opacity: 0.9;
}
.solution-card--accent-amber {
--solution-card-accent: linear-gradient(90deg, #0EA5A4, #F59E0B);
--solution-card-glow: radial-gradient(circle, rgba(245, 158, 11, 0.14) 0%, rgba(245, 158, 11, 0) 72%);
--solution-card-glow-opacity: 0.9;
}
.solution-card--accent-teal {
--solution-card-accent: linear-gradient(90deg, #0EA5A4, #F59E0B);
--solution-card-glow: radial-gradient(circle, rgba(20, 184, 166, 0.12) 0%, rgba(20, 184, 166, 0) 72%);
--solution-card-glow-opacity: 0.9;
}
.solution-card--accent-amber-cyan {
--solution-card-accent: linear-gradient(90deg, #F59E0B, #22D3EE);
--solution-card-glow: radial-gradient(circle, rgba(251, 191, 36, 0.14) 0%, rgba(251, 191, 36, 0) 72%);
--solution-card-glow-opacity: 0.9;
}
.solution-card-kicker {
display: inline-flex;
align-items: center;
gap: 0.4rem;
margin-bottom: 0.8rem;
padding: 0.35rem 0.7rem;
border-radius: 999px;
background: var(--solution-card-kicker-bg);
color: var(--solution-card-kicker-text);
font-size: 0.82rem;
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
}
.solution-faq-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: var(--solution-faq-grid-gap);
max-width: var(--solution-faq-grid-max);
margin: 0 auto;
}
.solution-faq-item {
position: relative;
overflow: hidden;
isolation: isolate;
background: var(--solution-faq-bg);
border-radius: var(--solution-faq-radius);
border: 1px solid var(--solution-faq-border);
box-shadow: var(--solution-faq-shadow);
padding: 1.45rem 1.6rem;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.solution-faq-item::before {
content: "";
position: absolute;
inset: 0 0 auto 0;
height: 4px;
background: var(--solution-faq-accent);
opacity: var(--solution-faq-accent-opacity);
z-index: 0;
}
.solution-faq-item::after {
content: "";
position: absolute;
top: 0;
right: 0;
width: 170px;
height: 170px;
border-radius: 999px;
transform: translate(38%, -54%);
background: var(--solution-faq-glow);
opacity: var(--solution-faq-glow-opacity);
pointer-events: none;
z-index: 0;
}
.solution-faq-item > * {
position: relative;
z-index: 1;
}
.solution-faq-item[open] {
border-color: var(--solution-faq-open-border);
box-shadow: var(--solution-faq-open-shadow);
}
.solution-faq-item summary {
list-style: none;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 1rem;
font-size: 1.02rem;
font-weight: 600;
color: var(--text-primary);
}
.solution-faq-item summary::-webkit-details-marker {
display: none;
}
.solution-faq-item summary::after {
content: "+";
font-size: 1.2rem;
font-weight: 700;
color: var(--solution-faq-toggle-color);
line-height: 1;
}
.solution-faq-item[open] summary::after {
content: "-";
}
.solution-faq-item p {
margin: 1rem 0 0;
color: var(--text-secondary);
line-height: 1.72;
}
.solution-cta-panel {
max-width: var(--solution-cta-max);
margin: 0 auto;
padding: clamp(2rem, 3vw, 2.5rem);
border-radius: var(--solution-cta-radius);
background: var(--solution-cta-bg);
box-shadow: var(--solution-cta-shadow);
display: grid;
gap: 1rem;
align-items: center;
grid-template-columns: minmax(0, 1.4fr) auto;
color: var(--solution-cta-text);
}
.solution-cta-panel h2 {
margin: 0 0 0.5rem;
color: var(--solution-cta-text);
}
.solution-cta-panel p {
margin: 0;
color: var(--solution-cta-muted-text);
line-height: 1.72;
}
.solution-cta-panel p + p {
margin-top: 0.6rem;
}
@media (max-width: 768px) {
.solution-cta-panel {
grid-template-columns: 1fr;
}
}
/* New Colorful Navigation Styles */
ul {
margin: 0;
padding: 0;
}
ul li {
list-style: none;
}
a {
text-decoration: none;
color: white;
}
/* Navigation */
nav {
/* Nav Bar */
/* Main Nav */
}
nav .menubar {
width: 100%;
height: 80px;
position: fixed;
top: 0;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 40px;
box-sizing: border-box;
background-color: var(--nav-bg);
border-bottom: 1px solid var(--nav-border);
box-shadow: var(--nav-shadow);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
transition: background-color var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
z-index: 9999;
}
nav .menubar.is-scrolled {
background-color: var(--nav-bg-scrolled, var(--nav-bg));
box-shadow: var(--nav-shadow-scrolled, var(--nav-shadow));
}
@media screen and (max-width: 767px) {
nav .menubar {
height: 60px;
padding: 0 20px;
}
}
nav .menubar .home {
display: flex;
align-items: center;
}
.brand-lockup { display: flex; align-items: center; gap: 24px; }
.brand-signature, .masthead-link { display: none; }
nav .menubar .menubar-logo {
height: 64px;
width: 120px;
display: block;
object-fit: contain;
transition: filter var(--transition-base);
}
html[data-theme="dark"] nav .menubar .menubar-logo {
filter: none;
}
html:not([data-theme="dark"])[data-nav-experiment="classic"] nav.site-nav .menubar {
background-color: rgba(255, 255, 255, 0.94);
--nav-icon-color: #1E3A8A;
}
nav .menubar .icons {
display: flex;
align-items: center;
gap: 1rem;
/* Icon Menu Hamburguer */
/* Secondary Icons */
}
/* Partner Portal Button */
.partner-portal-btn {
padding: 0.5rem 1.25rem;
background: var(--primary-color);
color: white;
text-decoration: none;
border-radius: 8px;
font-size: 0.875rem;
font-weight: 600;
transition: all 0.3s ease;
white-space: nowrap;
}
.partner-portal-btn:hover {
background: var(--secondary-color);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}
@media screen and (max-width: 767px) {
.partner-portal-btn {
display: none; /* Hide on mobile to save space */
}
}
nav .menubar .icons .icon-menu {
border: 0;
background: transparent;
display: flex;
width: 30px;
height: 30px;
z-index: 10000;
position: relative;
display: flex;
align-items: center;
cursor: pointer;
padding: 5px;
/* Icon Close */
}
nav .menubar .icons .icon-menu span {
background-color: var(--nav-icon-color);
width: 30px;
height: 3px;
position: absolute;
display: flex;
justify-content: flex-end;
transition: all 0.2s ease;
right: 0;
border-radius: 5px;
}
nav .menubar .icons .icon-menu span:before, nav .menubar .icons .icon-menu span:after {
position: absolute;
content: "";
width: 100%;
height: 100%;
background-color: var(--nav-icon-color);
border-radius: 5px;
}
.theme-control {
position: relative;
display: inline-flex;
}
.theme-toggle {
position: relative;
display: inline-flex;
align-items: center;
gap: 0.55rem;
min-width: 78px;
height: 42px;
padding: 0 0.8rem 0 0.45rem;
border-radius: 999px;
border: 1px solid var(--theme-toggle-border);
background: var(--theme-toggle-bg);
color: var(--theme-toggle-text);
box-shadow: var(--theme-toggle-shadow);
cursor: pointer;
transition: background var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base), transform var(--transition-base), color var(--transition-base);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}
.theme-toggle:hover {
transform: translateY(-1px);
border-color: var(--theme-toggle-hover-border);
box-shadow: var(--theme-toggle-hover-shadow);
}
.theme-toggle-icon-wrap {
position: relative;
width: 28px;
height: 28px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 999px;
background: var(--theme-toggle-icon-bg);
color: var(--theme-toggle-icon-color);
flex-shrink: 0;
}
.theme-toggle-icon {
position: absolute;
width: 15px;
height: 15px;
opacity: 0;
transform: scale(0.76) rotate(-10deg);
transition: opacity var(--transition-base), transform var(--transition-base);
}
.theme-toggle[data-preference="system"] .theme-toggle-icon--system,
.theme-toggle[data-preference="light"] .theme-toggle-icon--light,
.theme-toggle[data-preference="dark"] .theme-toggle-icon--dark {
opacity: 1;
transform: scale(1) rotate(0deg);
}
.theme-toggle-label {
font-size: 0.84rem;
font-weight: 600;
letter-spacing: 0.01em;
white-space: nowrap;
}
.theme-menu[hidden] {
display: none;
}
.theme-menu {
position: absolute;
top: calc(100% + 0.65rem);
right: 0;
min-width: 220px;
display: grid;
gap: 0.25rem;
padding: 0.45rem;
background: var(--theme-menu-bg);
border: 1px solid var(--theme-menu-border);
border-radius: 16px;
box-shadow: var(--theme-menu-shadow);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
z-index: 10010;
}
.theme-menu-item {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: 0.1rem 0.75rem;
width: 100%;
padding: 0.75rem 0.85rem;
border: none;
border-radius: 12px;
background: transparent;
color: var(--text-primary);
text-align: left;
cursor: pointer;
transition: background var(--transition-base), color var(--transition-base);
}
.theme-menu-item:hover {
background: var(--theme-menu-hover-bg);
}
.theme-menu-item[data-active="true"] {
background: var(--theme-menu-active-bg);
}
.theme-menu-item-label {
font-size: 0.92rem;
font-weight: 600;
}
.theme-menu-item-meta {
grid-column: 1 / 2;
font-size: 0.8rem;
color: var(--text-secondary);
}
.theme-menu-item-check {
color: var(--primary-color);
opacity: 0;
transition: opacity var(--transition-base);
}
.theme-menu-item[data-active="true"] .theme-menu-item-check {
opacity: 1;
}
@media screen and (max-width: 767px) {
.theme-toggle {
width: 38px;
min-width: 38px;
height: 38px;
padding: 0;
justify-content: center;
}
.theme-toggle-label {
display: none;
}
.theme-toggle-icon-wrap {
width: 26px;
height: 26px;
}
.theme-menu {
right: -0.35rem;
min-width: 190px;
}
}
nav .menubar .icons .icon-menu span:before {
transform: translateY(-10px);
transition: all 0.3s 0.1s ease;
}
nav .menubar .icons .icon-menu span:after {
transform: translateY(10px);
transition: all 0.3s 0.2s ease;
}
nav .menubar .icons .icon-menu:hover span {
width: 30px;
}
nav .menubar .icons .icon-menu:hover span:before {
width: 25px;
}
nav .menubar .icons .icon-menu:hover span:after {
width: 20px;
}
nav .menubar .icons .icon-menu.icon-closed {
justify-content: center;
}
nav .menubar .icons .icon-menu.icon-closed span {
background-color: white;
justify-content: center;
width: 0px;
right: initial;
opacity: 0.5;
transition: all 0.6s ease;
}
nav .menubar .icons .icon-menu.icon-closed span:before, nav .menubar .icons .icon-menu.icon-closed span:after {
width: 30px;
background-color: white;
}
nav .menubar .icons .icon-menu.icon-closed span:before {
transform: rotate(45deg);
}
nav .menubar .icons .icon-menu.icon-closed span:after {
transform: rotate(-45deg);
}
nav .menubar .icons .icon-menu.icon-closed:hover span {
width: 0;
opacity: 1;
}
@media screen and (max-width: 767px) {
nav .menubar .icons .icon-menu.icon-closed:hover span:before {
transform: rotate(45deg);
}
nav .menubar .icons .icon-menu.icon-closed:hover span:after {
transform: rotate(-45deg);
}
}
nav .menu {
display: none;
/* Open Menu */
/* Animation - Close */
}
nav .menu.open {
display: flex;
z-index: 9998;
overflow: hidden;
position: fixed;
top: 0;
left: 0;
width: 100%;
/* Menu Open - Main Link */
}
nav .menu.open .menu-link {
width: 25%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
transition: all 0.4s ease-in-out;
animation: menu 0.6s ease forwards;
height: 100vh;
position: relative;
/* Main Link - text */
/* Sub Menu */
/* Menu Links - Hover */
}
@keyframes menu {
0% {
height: 0;
transform: translatey(-50%);
}
100% {
height: 100vh;
transform: translatey(0%);
}
}
nav .menu.open .menu-link:nth-child(1) {
background-color: #1E3A8A; /* Navy blue */
animation-duration: 0.6s;
}
nav .menu.open .menu-link:nth-child(2) {
background-color: #1E293B; /* Navy slate */
animation-duration: 0.8s;
}
nav .menu.open .menu-link:nth-child(3) {
background-color: #0EA5E9; /* Softer blue accent */
animation-duration: 1s;
}
nav .menu.open .menu-link:nth-child(4) {
background-color: #1E293B; /* Navy for contrast */
animation-duration: 1.2s;
}
nav .menu.open .menu-link:nth-child(5) {
background-color: #7C3AED; /* Purple - used sparingly */
animation-duration: 1.4s;
}
nav .menu.open .menu-link:nth-child(6) {
background-color: #1E3A8A; /* Navy blue - matching Home for symmetry */
animation-duration: 1.6s;
}
nav .menu.open .menu-link .text-item {
color: white;
text-transform: uppercase;
font-weight: 800;
font-size: 40px;
opacity: 0.3;
width: 100%;
height: 20%;
letter-spacing: 5px;
transform: rotate(-90deg) translateX(0px);
transition: all 0.4s 0.2s ease-in-out, letter-spacing 0.2s ease-in, opacity 0.2s ease-in;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
transform-origin: center;
animation: text-in 0.6s ease;
position: absolute;
}
@media screen and (max-width: 767px) {
nav .menu.open .menu-link .text-item {
transform: rotate(0deg);
font-size: 30px;
}
}
@keyframes text-in {
0% {
opacity: 0;
}
20% {
opacity: 0;
}
100% {
opacity: 0.3;
}
}
nav .menu.open .menu-link .text-item .icon {
position: absolute;
display: flex;
width: 30px;
height: 30px;
opacity: 0;
transform: translateY(0px);
transition: all 0.4s ease-in-out;
background-image: url("https://rafaelavlucas.github.io/assets/icons/white/icon-54.svg");
}
@media screen and (max-width: 767px) {
nav .menu.open .menu-link .text-item .icon {
opacity: 0.5;
transform: translateY(40px);
}
}
nav .menu.open .menu-link .submenu {
display: flex;
flex-direction: column;
justify-content: center;
padding: 0 40px;
box-sizing: border-box;
opacity: 0;
z-index: -1;
transition: all 0.6s ease-in-out;
height: 0%;
width: 100%;
background-color: rgba(255, 255, 255, 0.1);
bottom: 0;
transform: translateY(50%);
position: absolute;
}
@media screen and (max-width: 767px) {
nav .menu.open .menu-link .submenu {
padding: 0 5%;
}
}
nav .menu.open .menu-link .submenu .sub-item {
display: none;
margin: 10px 0;
color: white;
text-transform: uppercase;
letter-spacing: 2px;
font-size: 20px;
font-weight: 600;
position: relative;
width: fit-content;
cursor: pointer;
padding: 5px 15px;
}
@media screen and (max-width: 767px) {
nav .menu.open .menu-link .submenu .sub-item {
font-size: 16px;
}
}
nav .menu.open .menu-link .submenu .sub-item:after {
content: "";
height: 0%;
width: 3px;
background-color: white;
opacity: 0.3;
position: absolute;
top: 0;
left: 0;
transition: height 0.4s 0.3s ease, width 0.4s ease;
}
nav .menu.open .menu-link .submenu .sub-item:hover:after {
width: 100%;
height: 100%;
transition: height 0.4s ease, width 0.4s 0.3s ease;
}
nav .menu.open .menu-link:hover {
width: 50%;
transition: all 0.4s ease-in-out;
/* When Click to Open Sub Menu */
}
nav .menu.open .menu-link:hover .text-item {
height: 50%;
transform: rotate(0deg) translateX(0px);
font-size: 30px;
opacity: 1;
letter-spacing: 10px;
}
nav .menu.open .menu-link:hover .text-item .icon {
opacity: 1;
transform: translateY(40px);
transition: all 0.3s 0.4s ease-in-out;
}
@media screen and (max-width: 767px) {
nav .menu.open .menu-link:hover .text-item {
width: 100%;
font-size: 30px;
opacity: 0.3;
letter-spacing: 5px;
}
}
@media screen and (max-width: 767px) {
nav .menu.open .menu-link:hover.active {
height: 80vh;
}
}
nav .menu.open .menu-link:hover.active .text-item {
transform: rotate(0deg) translateX(0px) translateY(-50%);
transform-origin: center center;
transition: all 0.6s ease-in-out;
}
@media screen and (max-width: 767px) {
nav .menu.open .menu-link:hover.active .text-item {
height: 20%;
transform: translateY(-180%);
}
}
nav .menu.open .menu-link:hover.active .text-item .icon {
transition: all 0.3s ease-in-out;
transform: translateY(40px) rotate(-180deg);
}
nav .menu.open .menu-link:hover.active .submenu {
transform: translateY(0);
height: 50%;
z-index: 1;
opacity: 1;
bottom: 0;
}
@media screen and (max-width: 767px) {
nav .menu.open .menu-link:hover.active .submenu {
height: 70%;
}
}
nav .menu.open .menu-link:hover.active .submenu .sub-item {
display: flex;
animation: submenu 1s ease forwards;
z-index: 2;
}
@keyframes submenu {
0% {
transform: translatex(50px) rotate(5-deg);
opacity: 0;
}
50% {
transform: translatex(50px) rotate(-5deg);
opacity: 0;
}
100% {
opacity: 1;
transform: translatex(0px) rotate(0deg);
}
}
nav .menu.open .menu-link:hover.active .submenu .sub-item:nth-child(1) {
animation-duration: 1s;
}
nav .menu.open .menu-link:hover.active .submenu .sub-item:nth-child(2) {
animation-duration: 1.2s;
}
nav .menu.open .menu-link:hover.active .submenu .sub-item:nth-child(3) {
animation-duration: 1.4s;
}
nav .menu.open .menu-link:hover.active .submenu .sub-item:nth-child(4) {
animation-duration: 1.6s;
}
nav .menu.open .menu-link:hover.active .submenu .sub-item:nth-child(5) {
animation-duration: 1.8s;
}
@media screen and (max-width: 767px) {
nav .menu.open .menu-link {
width: 100%;
height: calc((100vh - 60px) / 6); /* Subtract menubar height, divide by visible top-level items */
height: calc((100dvh - 60px) / 6);
min-height: 80px; /* Minimum height to ensure readability */
flex: 0 0 auto;
animation: menu-mobile 0.6s ease forwards;
transform: translatey(0%);
right: 0;
}
@keyframes menu-mobile {
0% {
transform: translateX(200%);
}
100% {
transform: translateX(0%);
}
}
nav .menu.open .menu-link:hover {
width: 100%;
}
}
@media screen and (max-width: 767px) {
nav .menu.open {
height: calc(100vh - 60px); /* Full height minus menubar */
height: calc(100dvh - 60px);
top: 60px; /* Start below menubar */
flex-direction: column;
box-sizing: border-box;
overflow-x: hidden;
overflow-y: auto;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
padding-bottom: env(safe-area-inset-bottom, 0px);
}
}
nav .menu.close .menu-link {
animation: menu-close 1s ease forwards;
}
@keyframes menu-close {
0% {
height: 100vh;
}
100% {
height: 0;
}
}
nav .menu.close .menu-link .text-item {
animation: text-out 0.6s ease forwards;
}
@keyframes text-out {
0% {
opacity: 0.3;
}
80% {
opacity: 0;
}
100% {
opacity: 0;
}
}
/* Editorial masthead: an unframed brand on the hero, a quiet surface on scroll. */
html[data-nav-experiment="floating"] {
scroll-padding-top: 120px;
}
html[data-nav-experiment="floating"] nav.site-nav {
--masthead-ink: #182635;
--masthead-muted: #566576;
--masthead-line: rgba(24, 38, 53, 0.16);
--masthead-surface: rgba(255, 255, 255, 0.95);
--masthead-blur: blur(18px);
position: fixed;
inset: 0 0 auto;
z-index: 10000;
padding: 0 clamp(24px, 5vw, 80px);
box-sizing: border-box;
pointer-events: none;
background: transparent;
}
/* Keep blur off the nav itself so its fixed menu remains viewport-sized. */
html[data-nav-experiment="floating"] nav.site-nav::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
background: var(--masthead-surface);
backdrop-filter: var(--masthead-blur);
-webkit-backdrop-filter: var(--masthead-blur);
transition: background-color 200ms ease;
}
html[data-theme="dark"][data-nav-experiment="floating"] nav.site-nav {
--masthead-ink: #f4f7fb;
--masthead-muted: #b7c4d4;
--masthead-line: rgba(244, 247, 251, 0.2);
--masthead-surface: rgba(8, 17, 31, 0.95);
}
html[data-nav-experiment="floating"] nav.site-nav[data-hero-overlay="dark"]:not(.is-scrolled) {
--masthead-ink: #f4f7fb;
--masthead-muted: #b7c4d4;
--masthead-line: rgba(244, 247, 251, 0.2);
--masthead-surface: transparent;
--masthead-blur: none;
}
html[data-nav-experiment="floating"] nav.site-nav .menubar {
position: relative;
top: auto;
left: auto;
right: auto;
width: 100%;
max-width: none;
height: 104px;
margin: 0 auto;
padding: 0;
gap: 32px;
border: 0;
border-bottom: 1px solid var(--masthead-line);
border-radius: 0;
background: transparent !important;
box-shadow: none;
backdrop-filter: none;
-webkit-backdrop-filter: none;
pointer-events: none;
}
html[data-nav-experiment="floating"] nav.site-nav .brand-lockup,
html[data-nav-experiment="floating"] nav.site-nav .icons {
pointer-events: auto;
}
html[data-nav-experiment="floating"] nav.site-nav .brand-signature {
display: block;
padding-left: 24px;
border-left: 1px solid var(--masthead-line);
color: var(--masthead-muted);
-webkit-text-fill-color: currentColor;
font-size: 13px;
font-weight: 400;
line-height: 1.6;
letter-spacing: 0;
}
html[data-nav-experiment="floating"] nav.site-nav .masthead-link {
display: inline-flex;
align-items: center;
min-height: 44px;
color: var(--masthead-ink) !important;
-webkit-text-fill-color: currentColor !important;
font-size: 14px;
font-weight: 500;
letter-spacing: 0;
text-decoration: none;
text-underline-offset: 6px;
}
html[data-nav-experiment="floating"] nav.site-nav .masthead-link:hover {
text-decoration: underline;
}
html[data-nav-experiment="floating"] nav.site-nav .menubar :is(a, button):focus-visible {
outline: 2px solid var(--masthead-ink);
outline-offset: 5px;
}
html[data-nav-experiment="floating"] nav.site-nav .menubar .menubar-logo {
height: 80px;
width: 120px;
filter: none !important;
opacity: 1;
}
html[data-theme="dark"][data-nav-experiment="floating"] nav.site-nav .menubar .menubar-logo,
html[data-theme="dark"][data-nav-experiment="floating"] body.home nav.site-nav .menubar .menubar-logo,
html[data-theme="dark"][data-nav-experiment="floating"] body.solution-page.solution-page--dark-nav nav.site-nav .menubar .menubar-logo {
filter: none !important;
opacity: 1;
}
html[data-nav-experiment="floating"] nav.site-nav .menubar .icons {
position: static;
width: auto;
transform: none;
gap: 32px;
}
html[data-nav-experiment="floating"] .partner-portal-btn {
padding: 0.58rem 1.08rem;
border-radius: 999px;
box-shadow: none;
}
html[data-nav-experiment="floating"] .partner-portal-btn:hover {
transform: translateY(-1px);
}
html[data-nav-experiment="floating"] nav.site-nav .theme-toggle {
height: 40px;
min-width: 74px;
}
html[data-nav-experiment="floating"] nav.site-nav.is-scrolled .theme-toggle {
height: 36px;
}
html[data-nav-experiment="floating"] nav.site-nav .menubar .icons .icon-menu {
width: 44px;
height: 44px;
padding: 0;
justify-content: center;
border: 1px solid var(--masthead-line);
border-radius: 50%;
background: transparent;
box-shadow: none;
transition: border-color 160ms ease;
}
html[data-nav-experiment="floating"] nav.site-nav .menubar .icons .icon-menu:hover {
border-color: var(--masthead-ink);
}
html[data-nav-experiment="floating"] nav.site-nav .menubar .icons .icon-menu span {
right: 12px;
width: 18px;
height: 2px;
background-color: var(--masthead-ink) !important;
opacity: 1;
}
html[data-nav-experiment="floating"] nav.site-nav .menubar .icons .icon-menu span::before,
html[data-nav-experiment="floating"] nav.site-nav .menubar .icons .icon-menu span::after {
width: 18px;
height: 2px;
background-color: var(--masthead-ink) !important;
opacity: 1;
}
html[data-theme="dark"][data-nav-experiment="floating"] nav.site-nav .menubar .icons .icon-menu span,
html[data-theme="dark"][data-nav-experiment="floating"] nav.site-nav .menubar .icons .icon-menu span::before,
html[data-theme="dark"][data-nav-experiment="floating"] nav.site-nav .menubar .icons .icon-menu span::after {
background-color: var(--masthead-ink) !important;
}
html[data-nav-experiment="floating"] nav.site-nav .menubar .icons .icon-menu span::before {
transform: translateY(-6px);
}
html[data-nav-experiment="floating"] nav.site-nav .menubar .icons .icon-menu span::after {
transform: translateY(6px);
}
html[data-nav-experiment="floating"] nav.site-nav .menubar .icons .icon-menu:hover span,
html[data-nav-experiment="floating"] nav.site-nav .menubar .icons .icon-menu:hover span::before,
html[data-nav-experiment="floating"] nav.site-nav .menubar .icons .icon-menu:hover span::after {
width: 18px;
}
html[data-nav-experiment="floating"] nav.site-nav .menubar .icons .icon-menu.icon-closed {
border-color: var(--masthead-ink);
}
html[data-nav-experiment="floating"] nav.site-nav .menubar .icons .icon-menu.icon-closed span,
html[data-nav-experiment="floating"] nav.site-nav .menubar .icons .icon-menu.icon-closed:hover span {
width: 18px;
right: 12px;
background-color: transparent !important;
opacity: 1;
}
html[data-nav-experiment="floating"] nav.site-nav .menubar .icons .icon-menu.icon-closed span::before,
html[data-nav-experiment="floating"] nav.site-nav .menubar .icons .icon-menu.icon-closed span::after {
background-color: var(--masthead-ink) !important;
}
html[data-nav-experiment="floating"] nav.site-nav .menubar .icons .icon-menu.icon-closed span::before {
transform: rotate(45deg);
}
html[data-nav-experiment="floating"] nav.site-nav .menubar .icons .icon-menu.icon-closed span::after {
transform: rotate(-45deg);
}
html[data-nav-experiment="floating"] nav.site-nav .menu.open {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 14px;
top: 116px;
left: 50%;
right: auto;
width: min(1180px, calc(100vw - 28px));
height: auto;
max-height: calc(100vh - 132px);
padding: 18px;
border-radius: 28px;
border: 1px solid rgba(255, 255, 255, 0.42);
background:
linear-gradient(135deg, rgba(255, 255, 255, 0.46), rgba(255, 255, 255, 0.2)),
rgba(255, 255, 255, 0.26);
box-shadow: 0 28px 80px rgba(15, 23, 42, 0.24);
overflow: auto;
pointer-events: auto;
transform: translateX(-50%);
backdrop-filter: blur(26px) saturate(160%);
-webkit-backdrop-filter: blur(26px) saturate(160%);
transition: opacity 0.22s ease, transform 0.22s ease;
}
html[data-theme="dark"][data-nav-experiment="floating"] nav.site-nav .menu.open {
border-color: rgba(148, 163, 184, 0.24);
background:
linear-gradient(135deg, rgba(30, 41, 59, 0.62), rgba(15, 23, 42, 0.48)),
rgba(15, 23, 42, 0.36);
box-shadow: 0 28px 80px rgba(0, 0, 0, 0.36);
}
html[data-nav-experiment="floating"] nav.site-nav.is-scrolled .menu.open {
top: 116px;
max-height: calc(100vh - 132px);
}
html[data-nav-experiment="floating"] nav.site-nav .menu.open.close {
opacity: 0;
pointer-events: none;
transform: translateX(-50%) translateY(-8px) scale(0.985);
}
html[data-nav-experiment="floating"] nav.site-nav .menu.open .menu-link {
--glass-accent: 30, 58, 138;
isolation: isolate;
display: flex;
align-items: stretch;
justify-content: flex-start;
flex-direction: column;
width: auto;
min-width: 0;
height: auto;
min-height: 196px;
padding: 18px;
border: 1px solid rgba(255, 255, 255, 0.52);
border-radius: 22px;
background:
linear-gradient(140deg, rgba(255, 255, 255, 0.64), rgba(255, 255, 255, 0.26) 46%, rgba(var(--glass-accent), 0.12)),
rgba(255, 255, 255, 0.34);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.72),
0 16px 34px rgba(15, 23, 42, 0.12);
overflow: hidden;
animation: floating-menu-in 0.45s ease both;
transform: translateY(0);
transition: border-color var(--transition-base), box-shadow var(--transition-base), transform var(--transition-base), background var(--transition-base);
}
html[data-theme="dark"][data-nav-experiment="floating"] nav.site-nav .menu.open .menu-link {
border-color: rgba(255, 255, 255, 0.16);
background:
linear-gradient(140deg, rgba(51, 65, 85, 0.62), rgba(15, 23, 42, 0.36) 48%, rgba(var(--glass-accent), 0.18)),
rgba(15, 23, 42, 0.3);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.12),
0 18px 42px rgba(0, 0, 0, 0.24);
}
html[data-nav-experiment="floating"] nav.site-nav .menu.open .menu-link:nth-child(1) {
--glass-accent: 30, 58, 138;
}
html[data-nav-experiment="floating"] nav.site-nav .menu.open .menu-link:nth-child(2) {
--glass-accent: 14, 165, 233;
}
html[data-nav-experiment="floating"] nav.site-nav .menu.open .menu-link:nth-child(3) {
--glass-accent: 20, 184, 166;
}
html[data-nav-experiment="floating"] nav.site-nav .menu.open .menu-link:nth-child(4) {
--glass-accent: 124, 58, 237;
}
html[data-nav-experiment="floating"] nav.site-nav .menu.open .menu-link:nth-child(5) {
--glass-accent: 37, 99, 235;
}
html[data-nav-experiment="floating"] nav.site-nav .menu.open .menu-link:nth-child(6) {
--glass-accent: 5, 150, 105;
}
html[data-nav-experiment="floating"] nav.site-nav .menu.open .menu-link::before,
html[data-nav-experiment="floating"] nav.site-nav .menu.open .menu-link::after {
content: "";
position: absolute;
pointer-events: none;
z-index: -1;
}
html[data-nav-experiment="floating"] nav.site-nav .menu.open .menu-link::before {
inset: 0;
background:
linear-gradient(115deg, rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0.12) 44%, rgba(var(--glass-accent), 0.18)),
linear-gradient(180deg, rgba(255, 255, 255, 0.24), transparent 42%);
opacity: 0.82;
}
html[data-nav-experiment="floating"] nav.site-nav .menu.open .menu-link::after {
top: -45%;
left: -35%;
width: 80%;
height: 190%;
background: linear-gradient(108deg, transparent 26%, rgba(255, 255, 255, 0.46) 48%, transparent 68%);
opacity: 0;
transform: translateX(-35%) rotate(8deg);
transition: opacity var(--transition-base), transform 0.7s ease;
}
html[data-nav-experiment="floating"] nav.site-nav .menu.open .menu-link:hover,
html[data-nav-experiment="floating"] nav.site-nav .menu.open .menu-link.active {
width: auto;
border-color: rgba(255, 255, 255, 0.72);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.82),
0 20px 44px rgba(15, 23, 42, 0.16);
transform: translateY(-2px);
}
html[data-nav-experiment="floating"] nav.site-nav .menu.open .menu-link:hover::after,
html[data-nav-experiment="floating"] nav.site-nav .menu.open .menu-link.active::after {
opacity: 1;
transform: translateX(155%) rotate(8deg);
}
html[data-nav-experiment="floating"] nav.site-nav .menu.open.close .menu-link {
animation: floating-menu-close 0.22s ease forwards;
}
@keyframes floating-menu-in {
0% {
opacity: 0;
opacity: 0;
transform: translateY(-10px) scale(0.98);
}
100% {
opacity: 1;
transform: translateY(0) scale(1);
}
}
@keyframes floating-menu-close {
0% {
opacity: 1;
transform: translateY(0) scale(1);
}
100% {
opacity: 0;
transform: translateY(-10px) scale(0.98);
}
}
html[data-nav-experiment="floating"] nav.site-nav .menu.open .menu-link .text-item,
html[data-nav-experiment="floating"] nav.site-nav .menu.open .menu-link:hover .text-item,
html[data-nav-experiment="floating"] nav.site-nav .menu.open .menu-link.active .text-item,
html[data-nav-experiment="floating"] nav.site-nav .menu.open .menu-link:hover.active .text-item {
z-index: 1;
position: relative;
width: 100%;
height: auto;
min-height: auto;
padding: 0;
color: var(--text-primary) !important;
-webkit-text-fill-color: var(--text-primary) !important;
font-size: clamp(1rem, 1.2vw, 1.18rem);
font-weight: 650;
letter-spacing: 0.06em;
line-height: 1.2;
text-align: left;
opacity: 0.9;
transform: none;
text-transform: uppercase;
align-items: flex-start;
justify-content: flex-start;
flex-direction: row;
}
html[data-nav-experiment="floating"] nav.site-nav .menu.open .menu-link:not(.sub) .text-item,
html[data-nav-experiment="floating"] nav.site-nav .menu.open .menu-link:not(.sub):hover .text-item {
margin: auto 0;
align-items: center;
justify-content: center;
text-align: center;
}
html[data-nav-experiment="floating"] nav.site-nav .menu.open .menu-link .text-item .icon,
html[data-nav-experiment="floating"] nav.site-nav .menu.open .menu-link:hover .text-item .icon,
html[data-nav-experiment="floating"] nav.site-nav .menu.open .menu-link:hover.active .text-item .icon {
display: none;
}
html[data-nav-experiment="floating"] nav.site-nav .menu.open .menu-link .submenu {
z-index: 1;
position: relative;
bottom: auto;
display: grid;
grid-template-columns: 1fr;
gap: 6px;
width: 100%;
height: auto;
max-height: none;
margin-top: 14px;
padding: 0;
overflow: visible;
background: transparent;
opacity: 1;
visibility: visible;
pointer-events: auto;
z-index: 1;
transform: none;
transition: none;
}
html[data-nav-experiment="floating"] nav.site-nav .menu.open .menu-link .submenu .sub-item,
html[data-nav-experiment="floating"] nav.site-nav .menu.open .menu-link.active .submenu .sub-item,
html[data-nav-experiment="floating"] nav.site-nav .menu.open .menu-link:hover.active .submenu .sub-item {
display: flex;
width: 100%;
margin: 0;
padding: 0;
color: var(--text-primary);
font-size: 0.86rem;
font-weight: 600;
letter-spacing: 0;
text-transform: none;
animation: none;
}
html[data-nav-experiment="floating"] nav.site-nav .menu.open .menu-link .submenu .sub-item a {
display: block;
width: 100%;
padding: 0.48rem 0.62rem;
border: 1px solid rgba(255, 255, 255, 0.28);
border-radius: 12px;
background: rgba(255, 255, 255, 0.26);
color: rgba(15, 23, 42, 0.74) !important;
-webkit-text-fill-color: rgba(15, 23, 42, 0.74) !important;
transition: background-color var(--transition-base), border-color var(--transition-base), color var(--transition-base), transform var(--transition-base);
}
html[data-theme="dark"][data-nav-experiment="floating"] nav.site-nav .menu.open .menu-link .submenu .sub-item a {
border-color: rgba(255, 255, 255, 0.12);
background: rgba(255, 255, 255, 0.07);
color: rgba(226, 232, 240, 0.84) !important;
-webkit-text-fill-color: rgba(226, 232, 240, 0.84) !important;
}
html[data-nav-experiment="floating"] nav.site-nav .menu.open .menu-link .submenu .sub-item:hover::after {
display: none;
}
html[data-nav-experiment="floating"] nav.site-nav .menu.open .menu-link .submenu .sub-item a:hover {
border-color: rgba(var(--glass-accent), 0.28);
background: rgba(255, 255, 255, 0.46);
color: rgb(var(--glass-accent)) !important;
-webkit-text-fill-color: rgb(var(--glass-accent)) !important;
transform: translateX(2px);
}
@media screen and (max-width: 1100px) and (min-width: 768px) {
html[data-nav-experiment="floating"] nav.site-nav .menu.open {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media screen and (max-width: 767px) {
html[data-nav-experiment="floating"] {
scroll-padding-top: 100px;
}
html[data-nav-experiment="floating"] nav.site-nav {
inset: 0 0 auto;
padding: 0 20px;
}
html[data-nav-experiment="floating"] nav.site-nav .menubar,
html[data-nav-experiment="floating"] nav.site-nav.is-scrolled .menubar {
height: 84px;
padding: 0;
gap: 20px;
border-radius: 0;
}
html[data-nav-experiment="floating"] nav.site-nav .menubar .menubar-logo,
html[data-nav-experiment="floating"] nav.site-nav.is-scrolled .menubar .menubar-logo {
height: 64px;
width: 96px;
}
html[data-nav-experiment="floating"] nav.site-nav .menubar .icons {
gap: 16px;
}
html[data-nav-experiment="floating"] nav.site-nav .theme-toggle,
html[data-nav-experiment="floating"] nav.site-nav.is-scrolled .theme-toggle {
width: 38px;
min-width: 38px;
height: 38px;
}
html[data-nav-experiment="floating"] nav.site-nav .menubar .icons .icon-menu {
width: 44px;
height: 44px;
}
html[data-nav-experiment="floating"] nav.site-nav .menu.open,
html[data-nav-experiment="floating"] nav.site-nav.is-scrolled .menu.open {
top: 94px;
bottom: 12px;
bottom: max(12px, env(safe-area-inset-bottom, 0px));
left: 50%;
right: auto;
width: calc(100vw - 24px);
height: auto;
max-height: none;
grid-template-columns: 1fr;
grid-auto-rows: max-content;
align-content: start;
gap: 10px;
padding: 12px;
padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
border-radius: 24px;
overflow-x: hidden;
overflow-y: auto;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
transform: translateX(-50%);
}
html[data-nav-experiment="floating"] nav.site-nav .menu.open .menu-link,
html[data-nav-experiment="floating"] nav.site-nav .menu.open .menu-link:hover {
width: 100%;
height: auto;
min-height: auto;
padding: 16px;
transform: none;
}
html[data-nav-experiment="floating"] nav.site-nav .menu.open .menu-link .text-item,
html[data-nav-experiment="floating"] nav.site-nav .menu.open .menu-link:hover .text-item,
html[data-nav-experiment="floating"] nav.site-nav .menu.open .menu-link.active .text-item,
html[data-nav-experiment="floating"] nav.site-nav .menu.open .menu-link:hover.active .text-item {
min-height: auto;
font-size: 0.98rem;
letter-spacing: 0.06em;
}
html[data-nav-experiment="floating"] nav.site-nav .menu.open .menu-link:not(.sub) {
min-height: 78px;
}
html[data-nav-experiment="floating"] nav.site-nav .menu.open .menu-link .submenu {
max-height: none;
margin-top: 12px;
padding: 0;
overflow: visible;
}
}
@media screen and (max-width: 900px) {
html[data-nav-experiment="floating"] nav.site-nav .brand-signature {
display: none;
}
}
@media screen and (max-width: 767px) {
html[data-nav-experiment="floating"] nav.site-nav .masthead-link {
display: none;
}
}
/* Appearance stays in the expanded menu, outside the navigation link tiles. */
nav.site-nav .menu-appearance {
grid-column: 1 / -1;
flex: 0 0 auto;
min-width: 0;
padding: 14px 4px 0;
border-top: 1px solid var(--theme-toggle-border);
list-style: none;
color: var(--text-primary);
-webkit-text-fill-color: currentColor;
}
nav.site-nav .appearance-control {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 10px 20px;
}
nav.site-nav .appearance-label {
font-size: 14px;
font-weight: 600;
letter-spacing: 0;
}
nav.site-nav .appearance-options {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
width: 252px;
max-width: 100%;
padding: 3px;
border: 1px solid var(--theme-toggle-border);
border-radius: 8px;
background: var(--theme-toggle-bg);
}
nav.site-nav .appearance-option {
position: relative;
min-width: 0;
cursor: pointer;
}
nav.site-nav .appearance-option input {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
margin: 0;
opacity: 0;
cursor: pointer;
}
nav.site-nav .appearance-choice {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
min-height: 44px;
border: 1px solid transparent;
border-radius: 5px;
color: var(--theme-toggle-text);
font-size: 13px;
font-weight: 500;
letter-spacing: 0;
}
nav.site-nav .appearance-choice svg {
width: 16px;
height: 16px;
flex-shrink: 0;
}
nav.site-nav .appearance-option:hover .appearance-choice {
background: var(--theme-menu-hover-bg);
}
nav.site-nav .appearance-option input:checked + .appearance-choice {
background: var(--theme-menu-active-bg);
border-color: var(--theme-toggle-icon-color);
font-weight: 700;
}
nav.site-nav .appearance-option input:focus-visible + .appearance-choice {
outline: 2px solid var(--theme-toggle-icon-color);
outline-offset: 2px;
}
@media screen and (min-width: 768px) {
html[data-nav-experiment="classic"] nav.site-nav .menu.open {
flex-wrap: wrap;
align-content: start;
height: 100vh;
height: 100dvh;
overflow-y: auto;
}
html[data-nav-experiment="classic"] nav.site-nav .menu.open .menu-link {
flex: 1 0 calc(100% / 6);
min-height: calc(100vh - 90px);
min-height: calc(100dvh - 90px);
max-height: calc(100vh - 90px);
max-height: calc(100dvh - 90px);
}
}
html[data-nav-experiment="classic"] nav.site-nav .menu-appearance {
width: 100%;
padding: 14px 24px;
background: var(--background-primary);
}
/* The solution pages in miniature: coloured workflows on one frosted surface. */
nav.site-nav .site-menu-panel {
--menu-surface: rgba(226, 235, 240, 0.76);
--menu-sheen: linear-gradient(125deg, #ffffffc7, #ffffff30 48%, #ffffff70);
--menu-tint: linear-gradient(110deg, #b2d7f044, #c3e5de38 62%, #d6c3e955);
--menu-ink: #233341;
--menu-muted: #465b6c;
--menu-line: #ffffff85;
--menu-divider: #435e782b;
--menu-hover: #ffffff70;
--menu-selected: #ffffff8f;
--menu-accent: #305b84;
--menu-green: #34695c;
--menu-plum: #73557b;
--menu-icon-surface: #ffffff60;
--menu-icon-edge: #ffffffab;
--theme-toggle-border: var(--menu-line);
--theme-toggle-bg: var(--menu-surface);
--theme-toggle-text: var(--menu-ink);
--theme-menu-hover-bg: var(--menu-hover);
--theme-menu-active-bg: var(--menu-selected);
--theme-toggle-icon-color: var(--menu-green);
position: fixed;
z-index: 9998;
top: 116px;
left: 50%;
width: min(1320px, calc(100% - 64px));
max-height: calc(100vh - 132px);
max-height: calc(100dvh - 132px);
padding: 30px 28px 20px;
overflow-y: auto;
overscroll-behavior: contain;
touch-action: pan-y;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
scrollbar-color: var(--menu-divider) transparent;
border: 1px solid var(--menu-line);
border-radius: 24px;
background: var(--menu-sheen), var(--menu-tint), var(--menu-surface);
backdrop-filter: blur(28px) saturate(135%);
-webkit-backdrop-filter: blur(28px) saturate(135%);
color: var(--menu-ink);
box-shadow: inset 0 1px 0 #ffffffa6, 0 24px 64px #0e1d3040, 0 4px 16px #0e1d3014;
font-family: Inter, -apple-system, BlinkMacSystemFont, sans-serif;
font-size: 17px;
font-variation-settings: normal;
line-height: 1.5;
pointer-events: auto;
transform: translateX(-50%);
animation: site-menu-reveal 220ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
html[data-theme="dark"] nav.site-nav .site-menu-panel {
--menu-surface: rgba(24, 34, 41, 0.88);
--menu-sheen: linear-gradient(125deg, #ffffff0f, #ffffff00 48%, #ffffff05);
--menu-tint: linear-gradient(110deg, #5887b220, #579c811a 62%, #966ea723);
--menu-ink: #f0f5f8;
--menu-muted: #b9c9d5;
--menu-line: #d8e9f333;
--menu-divider: #c3d7e329;
--menu-hover: #deefff10;
--menu-selected: #deefff1c;
--menu-accent: #a9cdeb;
--menu-green: #9ecfbc;
--menu-plum: #d3b7dc;
--menu-icon-surface: #c9e3f40b;
--menu-icon-edge: #c9e3f429;
box-shadow: inset 0 1px 0 #ffffff1a, 0 24px 64px #00000066, 0 4px 16px #00000026;
}
nav.site-nav .site-menu-panel *,
nav.site-nav .site-menu-panel *::before,
nav.site-nav .site-menu-panel *::after { box-sizing: border-box; letter-spacing: 0; }
nav.site-nav .site-menu-panel[hidden],
nav.site-nav .site-menu-backdrop[hidden] { display: none !important; }
nav.site-nav .site-menu-panel.close { animation: site-menu-dismiss 160ms ease both; pointer-events: none; }
nav.site-nav .menubar .icons .icon-menu span { transition: background-color 120ms ease; }
nav.site-nav .menubar .icons .icon-menu span::before,
nav.site-nav .menubar .icons .icon-menu span::after { transition: transform 160ms ease; }
nav.site-nav .site-menu-backdrop {
position: fixed;
inset: 104px 0 0;
z-index: 0;
background: #10202c26;
pointer-events: auto;
}
nav.site-nav .site-menu-groups {
display: grid;
grid-template-columns: minmax(0, 2.5fr) minmax(0, 1.05fr) minmax(0, 1fr);
gap: 24px;
}
nav.site-nav .site-menu-group { min-width: 0; }
nav.site-nav #site-menu h2 {
margin: 0 0 16px;
padding: 0 8px;
border: 0;
color: var(--menu-accent);
-webkit-text-fill-color: currentColor;
font: 500 16px/1.4 Inter, -apple-system, BlinkMacSystemFont, sans-serif;
text-align: left;
text-transform: none;
}
nav.site-nav #site-menu .site-menu-solutions h2 {
font-family: "Avenir Next", "Helvetica Neue", Inter, sans-serif;
font-size: 30px;
font-weight: 400;
line-height: 1.2;
color: var(--menu-ink);
margin-bottom: 22px;
}
nav.site-nav #site-menu .site-menu-industries h2 { color: var(--menu-green); }
nav.site-nav #site-menu .site-menu-resources h2 { color: var(--menu-plum); }
nav.site-nav .site-menu-group ul { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
nav.site-nav .site-menu-group li { min-width: 0; margin: 0; padding: 0; list-style: none; }
nav.site-nav .site-menu-solutions ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; }
nav.site-nav #site-menu a {
position: relative;
display: flex;
align-items: center;
gap: 12px;
min-height: 44px;
padding: 10px 8px;
border: 1px solid transparent;
border-radius: 8px;
background: transparent;
color: var(--menu-ink) !important;
-webkit-text-fill-color: currentColor !important;
font-size: 16px;
font-weight: 450;
line-height: 1.45;
text-align: left;
text-decoration: none;
text-transform: none;
overflow-wrap: break-word;
transition: background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}
nav.site-nav #site-menu a:hover {
background: var(--menu-hover);
border-color: var(--menu-icon-edge);
box-shadow: 0 4px 14px #152b4008;
}
nav.site-nav #site-menu a[aria-current="page"] { background: var(--menu-selected); border-color: var(--menu-icon-edge); font-weight: 550; }
nav.site-nav #site-menu .site-menu-solutions a {
min-height: 100px;
height: 100%;
padding: 16px 10px;
gap: 13px;
border-color: transparent;
border-top-color: var(--menu-divider);
border-radius: 0;
font-size: 18px;
isolation: isolate;
}
nav.site-nav #site-menu .site-menu-solutions a::before {
content: "";
position: absolute;
inset: -1px 0 auto;
height: 2px;
background: var(--menu-icon-colour);
transform: scaleX(0.16);
transform-origin: left;
opacity: 0.65;
transition: transform 260ms ease, opacity 260ms ease;
}
nav.site-nav #site-menu .site-menu-solutions a::after {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: linear-gradient(115deg, var(--menu-icon-colour), transparent);
opacity: 0.035;
transition: opacity 220ms ease;
}
nav.site-nav #site-menu .site-menu-solutions a:is(:hover,:focus-visible,[aria-current="page"],[data-menu-preview-active])::before { transform: scaleX(1); opacity: 0.85; }
nav.site-nav #site-menu .site-menu-solutions a:is(:hover,:focus-visible)::after { opacity: 0.11; }
nav.site-nav #site-menu .site-menu-solutions a:is(:hover,:focus-visible) { background: var(--menu-hover); box-shadow: none; }
nav.site-nav .site-menu-copy { display: block; min-width: 0; }
nav.site-nav .site-menu-label { display: block; min-width: 0; }
nav.site-nav .site-menu-description { display: block; margin-top: 5px; color: var(--menu-muted); font-size: 13px; font-weight: 400; line-height: 1.5; }
nav.site-nav .site-menu-icon {
display: grid;
place-items: center;
width: 44px;
height: 44px;
flex: 0 0 44px;
border: 1px solid var(--menu-icon-edge);
border-radius: 8px;
background: var(--menu-icon-surface);
color: var(--menu-icon-colour, var(--menu-accent));
box-shadow: inset 0 1px 0 #ffffff26, 0 2px 4px #20395105;
transition: background-color 160ms ease, transform 260ms ease, box-shadow 260ms ease;
}
nav.site-nav #site-menu a:is(:hover,:focus-visible) .site-menu-icon { transform: translateY(-2px); box-shadow: inset 0 1px 0 #ffffff40, 0 5px 10px #142b3a12; }
nav.site-nav .site-menu-icon::before {
content: "";
width: 23px;
height: 23px;
background: currentColor;
mask: var(--menu-icon) center / contain no-repeat;
-webkit-mask: var(--menu-icon) center / contain no-repeat;
}
nav.site-nav [data-menu-tone="blue"] { --menu-icon-colour: #325f96; }
nav.site-nav [data-menu-tone="teal"] { --menu-icon-colour: #267060; }
nav.site-nav [data-menu-tone="plum"] { --menu-icon-colour: #944f54; }
nav.site-nav [data-menu-tone="steel"] { --menu-icon-colour: #416b7d; }
nav.site-nav [data-menu-tone="green"] { --menu-icon-colour: #4f7045; }
nav.site-nav [data-menu-tone="gold"] { --menu-icon-colour: #8c661e; }
nav.site-nav [data-menu-tone="cyan"] { --menu-icon-colour: #1c707f; }
nav.site-nav [data-menu-tone="violet"] { --menu-icon-colour: #71549a; }
html[data-theme="dark"] nav.site-nav [data-menu-tone="blue"] { --menu-icon-colour: #a6c9f3; }
html[data-theme="dark"] nav.site-nav [data-menu-tone="teal"] { --menu-icon-colour: #95d6c4; }
html[data-theme="dark"] nav.site-nav [data-menu-tone="plum"] { --menu-icon-colour: #eeb5b8; }
html[data-theme="dark"] nav.site-nav [data-menu-tone="steel"] { --menu-icon-colour: #a2cdda; }
html[data-theme="dark"] nav.site-nav [data-menu-tone="green"] { --menu-icon-colour: #b4d79f; }
html[data-theme="dark"] nav.site-nav [data-menu-tone="gold"] { --menu-icon-colour: #e8cd95; }
html[data-theme="dark"] nav.site-nav [data-menu-tone="cyan"] { --menu-icon-colour: #8ad3e2; }
html[data-theme="dark"] nav.site-nav [data-menu-tone="violet"] { --menu-icon-colour: #c8b2ef; }
nav.site-nav .site-menu-directory { min-width: 0; padding-left: 24px; border-left: 1px solid var(--menu-divider); }
nav.site-nav .site-menu-resources { margin-top: 24px; }
nav.site-nav #site-menu .site-menu-resources a { padding-block: 10px; border-bottom-color: var(--menu-divider); border-radius: 0; }
nav.site-nav .site-menu-spotlight {
position: relative;
min-width: 0;
padding: 9px 20px 22px;
display: flex;
flex-direction: column;
border-left: 1px solid var(--menu-divider);
isolation: isolate;
}
nav.site-nav .site-menu-spotlight::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: linear-gradient(155deg, var(--menu-icon-colour), transparent 78%);
opacity: 0.075;
}
nav.site-nav .site-menu-spotlight-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; color: var(--menu-icon-colour); }
nav.site-nav .site-menu-spotlight-name { min-width: 0; font-size: 13px; line-height: 1.5; font-weight: 550; }
nav.site-nav .site-menu-spotlight-index { flex-shrink: 0; padding-top: 2px; font-size: 11px; font-variant-numeric: tabular-nums; color: var(--menu-muted); }
nav.site-nav .site-menu-spotlight-title {
margin: 28px 0 25px;
min-height: 108px;
font-family: "Avenir Next", "Helvetica Neue", Inter, sans-serif;
font-size: 30px;
font-weight: 400;
line-height: 1.18;
color: var(--menu-ink);
text-wrap: balance;
}
nav.site-nav .site-menu-journey { margin: 0; padding: 0; list-style: none; }
nav.site-nav .site-menu-journey li { position: relative; min-height: 67px; display: flex; align-items: flex-start; gap: 14px; margin: 0; padding: 0; list-style: none; }
nav.site-nav .site-menu-journey li:not(:last-child)::before {
content: "";
position: absolute;
top: 25px;
bottom: 5px;
left: 12px;
width: 1px;
background: var(--menu-icon-colour);
opacity: 0.45;
transform-origin: top;
}
nav.site-nav .site-menu-step-number { display: grid; place-items: center; width: 25px; height: 25px; flex: 0 0 25px; border: 1px solid var(--menu-icon-colour); border-radius: 50%; font-size: 10px; font-variant-numeric: tabular-nums; color: var(--menu-icon-colour); }
nav.site-nav .site-menu-step-label { min-width: 0; padding-top: 2px; font-size: 14px; line-height: 1.5; color: var(--menu-ink); }
nav.site-nav .site-menu-spectrum { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 5px; padding-top: 24px; margin-top: auto; }
nav.site-nav .site-menu-spectrum span { height: 3px; background: var(--menu-icon-colour); opacity: 0.45; }
nav.site-nav .site-menu-spotlight[data-menu-tone="blue"] .site-menu-spectrum [data-menu-tone="blue"],
nav.site-nav .site-menu-spotlight[data-menu-tone="teal"] .site-menu-spectrum [data-menu-tone="teal"],
nav.site-nav .site-menu-spotlight[data-menu-tone="plum"] .site-menu-spectrum [data-menu-tone="plum"],
nav.site-nav .site-menu-spotlight[data-menu-tone="steel"] .site-menu-spectrum [data-menu-tone="steel"],
nav.site-nav .site-menu-spotlight[data-menu-tone="green"] .site-menu-spectrum [data-menu-tone="green"],
nav.site-nav .site-menu-spotlight[data-menu-tone="gold"] .site-menu-spectrum [data-menu-tone="gold"],
nav.site-nav .site-menu-spotlight[data-menu-tone="cyan"] .site-menu-spectrum [data-menu-tone="cyan"],
nav.site-nav .site-menu-spotlight[data-menu-tone="violet"] .site-menu-spectrum [data-menu-tone="violet"] { opacity: 1; }
nav.site-nav .site-menu-panel.open .site-menu-journey li::before { animation: site-menu-trace 600ms 150ms ease both; }
nav.site-nav .site-menu-panel.open .site-menu-journey li:nth-child(2)::before { animation-delay: 400ms; }
nav.site-nav #site-menu .site-menu-resources a::after,
nav.site-nav #site-menu [data-nav-contact]::after {
content: "";
width: 16px;
height: 16px;
flex: 0 0 16px;
margin-left: auto;
background: currentColor;
opacity: 0.65;
mask: url('img/navigation/arrow-up-right.svg') center / contain no-repeat;
-webkit-mask: url('img/navigation/arrow-up-right.svg') center / contain no-repeat;
}
nav.site-nav #site-menu :is(a,input):focus-visible { outline: 2px solid var(--menu-accent); outline-offset: 2px; }
nav.site-nav .site-menu-footer {
display: flex;
justify-content: space-between;
align-items: center;
gap: 24px;
margin-top: 28px;
padding-top: 20px;
border-top: 1px solid var(--menu-divider);
}
nav.site-nav .site-menu-quicklinks { display: flex; flex-wrap: wrap; gap: 8px 24px; }
nav.site-nav #site-menu .site-menu-quicklinks a { font-size: 16px; }
nav.site-nav #site-menu .menu-appearance { padding: 0; border: 0; width: auto; background: transparent; color: var(--menu-muted); }
nav.site-nav #site-menu .appearance-control { gap: 12px; }
nav.site-nav #site-menu .appearance-label { font-size: 13px; font-weight: 450; }
nav.site-nav #site-menu .appearance-options { width: 240px; border-radius: 8px; background: #ffffff0d; }
nav.site-nav #site-menu .appearance-choice { min-height: 38px; font-weight: 450; }
nav.site-nav #site-menu .appearance-option input:checked + .appearance-choice { font-weight: 550; }
@keyframes site-menu-reveal {
from { opacity: 0; transform: translateX(-50%) translateY(-8px); }
to { opacity: 1; transform: translateX(-50%) translateY(0); }
}
@keyframes site-menu-dismiss {
from { opacity: 1; transform: translateX(-50%) translateY(0); }
to { opacity: 0; transform: translateX(-50%) translateY(-4px); }
}
@keyframes site-menu-trace { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@media (max-width: 1200px) {
nav.site-nav .site-menu-groups { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
nav.site-nav .site-menu-spotlight { display: none; }
nav.site-nav #site-menu .site-menu-solutions a { min-height: 112px; font-size: 17px; }
nav.site-nav .site-menu-icon { width: 38px; height: 38px; flex-basis: 38px; }
nav.site-nav #site-menu .site-menu-solutions a[data-menu-preview-active]:not(:hover,:focus-visible,[aria-current="page"])::before { transform: scaleX(0.16); }
}
@media (max-width: 900px) {
nav.site-nav .site-menu-groups { grid-template-columns: minmax(0, 1fr); }
nav.site-nav .site-menu-directory { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 28px; padding: 24px 0 0; border-left: 0; border-top: 1px solid var(--menu-divider); }
nav.site-nav .site-menu-resources { margin-top: 0; }
nav.site-nav #site-menu .site-menu-solutions a { min-height: 94px; }
}
@media (max-width: 767px) {
nav.site-nav .site-menu-panel {
top: 96px;
width: calc(100% - 40px);
max-height: calc(100vh - 112px);
max-height: calc(100dvh - 112px - env(safe-area-inset-bottom, 0px));
padding: 24px 20px 20px;
border-radius: 20px;
}
nav.site-nav .site-menu-backdrop { top: 84px; }
nav.site-nav .site-menu-groups { gap: 24px; }
nav.site-nav .site-menu-solutions ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
nav.site-nav .site-menu-footer { flex-direction: column; align-items: stretch; gap: 18px; margin-top: 24px; padding-top: 16px; }
nav.site-nav #site-menu .appearance-options { width: 218px; }
}
@media (max-width: 540px) {
nav.site-nav .site-menu-solutions ul { column-gap: 14px; }
nav.site-nav #site-menu h2 { margin-bottom: 16px; }
nav.site-nav #site-menu .site-menu-solutions a { flex-direction: column; align-items: flex-start; min-height: 164px; gap: 10px; padding: 14px 4px; }
nav.site-nav .site-menu-description { margin-top: 4px; }
nav.site-nav .site-menu-directory { grid-template-columns: minmax(0,1fr); gap: 24px; }
nav.site-nav .site-menu-resources { padding-top: 24px; border-top: 1px solid var(--menu-divider); }
nav.site-nav .site-menu-footer { gap: 14px; }
}
@media (prefers-reduced-motion: reduce) {
nav.site-nav .site-menu-panel,
nav.site-nav .site-menu-panel.close,
nav.site-nav .site-menu-panel.open .site-menu-journey li::before { animation: none; }
nav.site-nav .site-menu-panel a,
nav.site-nav .site-menu-panel a::before,
nav.site-nav .site-menu-panel a::after,
nav.site-nav .site-menu-icon { transition: none !important; }
nav.site-nav .menubar .icons .icon-menu span,
nav.site-nav .menubar .icons .icon-menu span::before,
nav.site-nav .menubar .icons .icon-menu span::after { transition: none; }
}
/* Hero Section */
.hero {
min-height: 100vh;
height: auto; /* Allow height to expand with content */
display: flex;
align-items: center;
justify-content: center;
position: relative;
overflow: visible; /* Allow content to be visible */
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%); /* Dark gradient background */
transition: background 0.5s ease, color 0.5s ease;
padding: 100px 0 40px 0; /* Consistent padding top and bottom */
box-sizing: border-box;
}
.hero-background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
.gradient-orb {
position: absolute;
border-radius: 50%;
filter: blur(60px);
animation: float 6s ease-in-out infinite;
}
.orb-1 {
width: 300px;
height: 300px;
background: var(--gradient-primary);
top: 20%;
left: 10%;
animation-delay: 0s;
}
.orb-2 {
width: 200px;
height: 200px;
background: var(--gradient-secondary);
top: 60%;
right: 20%;
animation-delay: 2s;
}
.orb-3 {
width: 150px;
height: 150px;
background: linear-gradient(135deg, #5856D6 0%, #007AFF 100%);
bottom: 30%;
left: 60%;
animation-delay: 4s;
}
@keyframes float {
0%, 100% { transform: translateY(0px) rotate(0deg); }
50% { transform: translateY(-20px) rotate(180deg); }
}
.hero-content {
color: white !important;
text-align: center;
z-index: 10; /* Higher z-index to ensure it's above data room */
max-width: 1200px; /* Increased from 800px for wider text span */
padding: 0 40px; /* Increased padding for better spacing */
width: 100%; /* Ensure full width */
margin: 0 auto; /* Center the content */
position: relative; /* Ensure z-index works */
}
.hero-title {
font-family: 'Avenir Next', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
font-size: clamp(3rem, 8vw, 6rem);
font-weight: 100; /* Ultra-thin weight */
line-height: 1.1;
margin-bottom: 1.5rem;
opacity: 0;
animation: fadeInUp 1s ease 0.5s forwards;
color: white !important; /* Always white */
}
.title-line {
display: block;
color: white !important; /* Override gradient for better readability */
}
.hero-subtitle {
font-family: 'Avenir Next', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
font-size: 1.5rem; /* Increased from 1.25rem */
line-height: 1.6; /* Better line spacing */
color: rgba(255, 255, 255, 0.9); /* White with slight transparency */
margin-bottom: 3rem;
opacity: 0;
animation: fadeInUp 1s ease 0.7s forwards;
max-width: 900px; /* Constrain width for optimal reading */
margin-left: auto;
margin-right: auto;
}
.hero-cta {
display: flex;
gap: 1rem;
justify-content: center;
flex-wrap: wrap;
opacity: 0;
animation: fadeInUp 1s ease 0.9s forwards;
}
.cta-primary, .cta-secondary {
padding: 1rem 2rem;
border-radius: 50px;
font-weight: 600;
font-size: 1rem;
cursor: pointer;
transition: all 0.3s ease;
border: none;
text-decoration: none;
display: inline-block;
}
.cta-primary {
background: var(--gradient-primary);
color: white;
box-shadow: var(--shadow-medium);
}
.cta-primary:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-heavy);
}
.cta-secondary {
background: transparent;
color: var(--text-primary);
border: 2px solid var(--border-color);
}
.cta-secondary:hover {
border-color: var(--primary-color);
color: var(--primary-color);
transform: translateY(-2px);
}
/* Dark room button visibility */
.hero .cta-secondary {
background: rgba(255, 255, 255, 0.1);
border: 2px solid rgba(255, 255, 255, 0.4);
color: white;
box-shadow: 0 0 20px rgba(255, 255, 255, 0.2),
inset 0 0 20px rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
position: relative;
overflow: hidden;
}
.hero .cta-secondary::before {
content: '';
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.3), transparent);
border-radius: 12px;
opacity: 0;
transition: opacity 0.3s ease;
}
.hero .cta-secondary:hover {
background: rgba(255, 255, 255, 0.2);
border-color: rgba(255, 255, 255, 0.6);
color: white;
box-shadow: 0 0 30px rgba(255, 255, 255, 0.3),
inset 0 0 30px rgba(255, 255, 255, 0.15);
}
.hero .cta-secondary:hover::before {
opacity: 1;
}
/* Primary button glow in dark */
.hero .cta-primary {
color: #ffffff;
-webkit-text-fill-color: #ffffff;
box-shadow: 0 0 30px rgba(37, 99, 235, 0.4),
0 4px 20px rgba(0, 0, 0, 0.3);
}
.scroll-indicator {
position: absolute;
bottom: 2rem;
left: 50%;
transform: translateX(-50%);
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
color: var(--text-secondary);
font-size: 0.875rem;
opacity: 0;
animation: fadeInUp 1s ease 1.1s forwards;
}
.scroll-line {
width: 2px;
height: 30px;
background: var(--gradient-primary);
animation: scrollPulse 2s ease-in-out infinite;
}
@keyframes scrollPulse {
0%, 100% { opacity: 0.3; }
50% { opacity: 1; }
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Scroll Mouse Indicator */
.scroll-mouse-indicator {
position: relative;
margin-top: 60px;
display: flex;
flex-direction: column;
align-items: center;
cursor: pointer;
opacity: 0.8;
transition: opacity var(--transition-base);
animation: fadeInUp 1s ease 0.8s forwards;
opacity: 0;
}
.scroll-mouse-indicator:hover {
opacity: 1;
}
/* Mouse Shape */
.mouse {
width: 26px;
height: 40px;
border: 2px solid var(--text-secondary);
border-radius: 13px;
position: relative;
margin-bottom: 10px;
}
/* Mouse Wheel */
.mouse-wheel {
width: 3px;
height: 8px;
background: var(--text-secondary);
border-radius: 2px;
position: absolute;
top: 8px;
left: 50%;
transform: translateX(-50%);
animation: mouseWheel 2s ease-in-out infinite;
}
@keyframes mouseWheel {
0% {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
100% {
opacity: 0;
transform: translateX(-50%) translateY(12px);
}
}
/* Scroll Arrows */
.scroll-arrows {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
}
.arrow {
display: block;
width: 10px;
height: 10px;
border-right: 2px solid var(--text-secondary);
border-bottom: 2px solid var(--text-secondary);
transform: rotate(45deg);
opacity: 0;
animation: scrollArrow 2s ease-in-out infinite;
}
.arrow:nth-child(1) {
animation-delay: 0s;
}
.arrow:nth-child(2) {
animation-delay: 0.2s;
}
.arrow:nth-child(3) {
animation-delay: 0.4s;
}
@keyframes scrollArrow {
0% {
opacity: 0;
transform: rotate(45deg) translateY(-5px);
}
50% {
opacity: 1;
}
100% {
opacity: 0;
transform: rotate(45deg) translateY(5px);
}
}
/* Mobile adjustments for scroll indicators */
@media (max-width: 768px) {
.scroll-mouse-indicator {
margin-top: 40px;
}
.mouse {
width: 22px;
height: 34px;
}
.mouse-wheel {
width: 2px;
height: 6px;
top: 6px;
}
}
/* Discover Section */
.discover-section {
padding: 8rem 0;
background: var(--background-secondary);
}
.section-header {
text-align: center;
margin-bottom: 4rem;
}
.section-title {
font-size: clamp(2.5rem, 5vw, 4rem);
font-weight: 700;
margin-bottom: 1rem;
background: var(--gradient-primary);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.section-subtitle {
font-size: 1.25rem;
color: var(--text-secondary);
}
.discover-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 2rem;
margin-top: 4rem;
}
.discover-card {
background: var(--surface);
padding: 3rem 2rem;
border-radius: 20px;
text-align: center;
box-shadow: var(--shadow-light);
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.discover-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: var(--gradient-primary);
opacity: 0;
transition: opacity 0.3s ease;
}
.discover-card:hover {
transform: translateY(-10px);
box-shadow: var(--shadow-heavy);
}
.discover-card:hover::before {
opacity: 0.05;
}
.card-icon {
width: 80px;
height: 80px;
margin: 0 auto 2rem;
background: var(--gradient-primary);
border-radius: 20px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
z-index: 1;
}
.card-icon svg {
width: 40px;
height: 40px;
color: white;
}
.discover-card h3 {
font-size: 1.5rem;
font-weight: 600;
margin-bottom: 1rem;
position: relative;
z-index: 1;
}
.discover-card p {
color: var(--text-secondary);
line-height: 1.6;
position: relative;
z-index: 1;
}
/* Innovation Section */
.innovation-section {
padding: 8rem 0;
background: var(--background-primary);
}
.innovation-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
align-items: center;
}
.innovation-text h2 {
font-size: clamp(2.5rem, 4vw, 3.5rem);
font-weight: 700;
margin-bottom: 2rem;
background: var(--gradient-primary);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.innovation-text p {
font-size: 1.125rem;
color: var(--text-secondary);
margin-bottom: 3rem;
line-height: 1.7;
}
.innovation-stats {
display: flex;
gap: 2rem;
}
.stat {
text-align: center;
}
.stat-number {
display: block;
font-size: 2.5rem;
font-weight: 700;
background: var(--gradient-primary);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.stat-label {
font-size: 0.875rem;
color: var(--text-secondary);
text-transform: uppercase;
letter-spacing: 0.1em;
}
.innovation-visual {
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.floating-device {
width: 300px;
height: 400px;
background: linear-gradient(145deg, #f0f0f0, #ffffff);
border-radius: 30px;
box-shadow: var(--shadow-heavy);
position: relative;
animation: deviceFloat 4s ease-in-out infinite;
}
@keyframes deviceFloat {
0%, 100% { transform: translateY(0px) rotate(0deg); }
50% { transform: translateY(-15px) rotate(2deg); }
}
.device-screen {
position: absolute;
top: 20px;
left: 20px;
right: 20px;
bottom: 20px;
background: #000;
border-radius: 20px;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.screen-content {
position: relative;
width: 100px;
height: 100px;
}
.pulse-ring {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 40px;
height: 40px;
border: 2px solid var(--primary-color);
border-radius: 50%;
animation: pulse 2s ease-in-out infinite;
}
.pulse-ring-2 {
animation-delay: 0.5s;
border-color: var(--secondary-color);
}
.pulse-ring-3 {
animation-delay: 1s;
border-color: var(--accent-color);
}
@keyframes pulse {
0% {
transform: translate(-50%, -50%) scale(0.5);
opacity: 1;
}
100% {
transform: translate(-50%, -50%) scale(2);
opacity: 0;
}
}
/* Industries Section */
.industries-section {
padding: 8rem 0;
background: var(--bg-light);
}
.industries-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
margin-top: 3rem;
}
.industry-card {
background: white;
border-radius: 16px;
padding: 2.5rem;
text-decoration: none;
color: var(--text-primary);
border: 1px solid var(--border-color);
transition: all 0.3s ease;
display: flex;
flex-direction: column;
position: relative;
overflow: hidden;
}
.industry-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: var(--gradient-primary);
transform: translateX(-100%);
transition: transform 0.3s ease;
}
.industry-card:hover {
box-shadow: 0 10px 40px rgba(0,0,0,0.1);
border-color: var(--primary-color);
transform: translateY(-4px);
}
.industry-card:hover::before {
transform: translateX(0);
}
.industry-icon {
font-size: 3rem;
margin-bottom: 1.5rem;
}
.industry-card h3 {
font-size: 1.5rem;
margin-bottom: 1rem;
color: var(--text-primary);
}
.industry-card p {
color: var(--text-secondary);
line-height: 1.6;
margin-bottom: 1.5rem;
flex-grow: 1;
}
.industry-link {
color: var(--primary-color);
font-weight: 600;
display: inline-flex;
align-items: center;
transition: transform 0.3s ease;
}
.industry-card:hover .industry-link {
transform: translateX(5px);
}
/* About Section */
.about-section {
padding: 8rem 0;
background: var(--background-secondary);
}
.about-content {
max-width: 800px;
margin: 0 auto;
text-align: center;
}
.about-content h2 {
font-size: clamp(2.5rem, 4vw, 3.5rem);
font-weight: 700;
margin-bottom: 2rem;
background: var(--gradient-primary);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.about-description {
font-size: 1.25rem;
color: var(--text-secondary);
margin-bottom: 4rem;
line-height: 1.7;
}
.about-values {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 3rem;
margin-top: 4rem;
}
.value {
text-align: center;
}
.value h4 {
font-size: 1.5rem;
font-weight: 600;
margin-bottom: 1rem;
color: var(--text-primary);
}
.value p {
color: var(--text-secondary);
line-height: 1.6;
}
/* Contact Section */
.contact-section {
padding: 8rem 0;
background: var(--background-primary);
}
.contact-content {
max-width: 600px;
margin: 0 auto;
text-align: center;
}
.contact-content h2 {
font-size: clamp(2.5rem, 4vw, 3.5rem);
font-weight: 700;
margin-bottom: 1rem;
background: var(--gradient-primary);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.contact-content p {
font-size: 1.125rem;
color: var(--text-secondary);
margin-bottom: 3rem;
}
.contact-section .cta-primary,
.contact-section .cta-primary:hover {
color: #ffffff;
-webkit-text-fill-color: #ffffff;
}
.contact-form {
text-align: left;
}
.form-group {
margin-bottom: 1.5rem;
}
.form-group input,
.form-group textarea {
width: 100%;
padding: 1rem;
border: 2px solid var(--border-color);
border-radius: 12px;
font-size: 1rem;
font-family: inherit;
transition: border-color 0.3s ease;
background: var(--surface);
}
.form-group input:focus,
.form-group textarea:focus {
outline: none;
border-color: var(--primary-color);
}
.submit-btn {
width: 100%;
padding: 1rem;
background: var(--gradient-primary);
color: white;
border: none;
border-radius: 12px;
font-size: 1rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: var(--shadow-medium);
}
.submit-btn:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-heavy);
}
/* FAQ Preview in Contact Section */
.faq-preview {
margin-top: 4rem;
padding-top: 4rem;
border-top: 2px solid var(--border-color);
}
.faq-preview h3 {
font-size: 2rem;
font-weight: 700;
margin-bottom: 3rem;
text-align: center;
color: var(--text-primary);
}
.testimonial-faqs {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
max-width: 1000px;
margin: 0 auto;
}
.testimonial-faq {
background: white;
padding: 2.5rem;
border-radius: 16px;
border-left: 4px solid var(--primary-color);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
transition: all 0.3s ease;
}
.testimonial-faq:hover {
transform: translateY(-3px);
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}
.testimonial-faq blockquote {
font-size: 1.25rem;
font-weight: 600;
color: var(--text-primary);
font-style: italic;
margin: 0 0 1.5rem 0;
position: relative;
}
.testimonial-faq blockquote::before {
content: '"';
font-size: 2rem;
color: var(--primary-color);
position: absolute;
left: -0.5rem;
top: -0.5rem;
font-family: serif;
}
.testimonial-faq blockquote::after {
content: '"';
font-size: 2rem;
color: var(--primary-color);
position: absolute;
right: -0.5rem;
bottom: -0.5rem;
font-family: serif;
}
.testimonial-faq p {
font-size: 1rem;
color: var(--text-secondary);
line-height: 1.6;
margin: 0;
}
.contact-footer {
margin-top: 4rem;
text-align: center;
padding: 3rem;
background: var(--background-secondary);
border-radius: 16px;
}
.skeptical-note {
font-size: 1.25rem;
color: var(--text-primary);
font-weight: 600;
margin-bottom: 1.5rem;
}
.email-link {
display: inline-flex;
align-items: center;
gap: 0.75rem;
padding: 1rem 2rem;
background: var(--primary-color);
color: white;
text-decoration: none;
border-radius: 100px;
font-weight: 600;
font-size: 1.125rem;
transition: all 0.3s ease;
}
.email-link:hover {
transform: translateY(-2px);
box-shadow: 0 10px 30px rgba(37, 99, 235, 0.3);
}
.email-link svg {
flex-shrink: 0;
}
/* Responsive Design for FAQ */
@media (max-width: 768px) {
.testimonial-faqs {
grid-template-columns: 1fr;
}
.testimonial-faq {
padding: 2rem;
}
.contact-footer {
padding: 2rem;
}
.email-link {
font-size: 1rem;
padding: 0.875rem 1.5rem;
}
}
/* Footer */
.footer {
background: var(--footer-bg);
color: var(--footer-text-primary);
padding: 3rem 0 1rem;
}
.footer-content {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 2rem;
gap: 3rem;
}
.footer-company-info {
flex: 1;
max-width: 300px;
}
.footer-company-info h4 {
color: var(--footer-text-primary);
font-size: 1.1rem;
font-weight: 600;
margin-bottom: 0.5rem;
}
.footer-company-info p {
color: var(--footer-text-secondary);
font-size: 0.9rem;
margin: 0.25rem 0;
line-height: 1.5;
}
.footer-company-info a {
color: var(--footer-text-primary);
text-decoration: none;
transition: color 0.2s ease;
}
.footer-company-info a:hover {
color: var(--accent-color);
text-decoration: underline;
}
.footer-logo span {
font-size: 1.5rem;
font-weight: 700;
}
.footer-links {
display: grid;
align-items: flex-start;
gap: 0.65rem;
}
.footer-links li {
margin: 0;
}
.footer-links a {
color: var(--footer-link);
text-decoration: none;
transition: color 0.3s ease;
}
.footer-links a:hover {
color: var(--footer-text-primary);
}
.footer-social {
display: flex;
gap: 1rem;
}
.social-link {
width: 40px;
height: 40px;
background: rgba(255, 255, 255, 0.1);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
}
.social-link:hover {
background: var(--primary-color);
transform: translateY(-2px);
}
.social-link svg {
width: 20px;
height: 20px;
}
.footer-bottom {
text-align: center;
padding-top: 2rem;
border-top: 1px solid var(--footer-divider);
color: var(--footer-link);
}
/* Responsive Design */
@media (max-width: 768px) {
.nav-menu {
position: fixed;
left: -100%;
top: 70px;
flex-direction: column;
background-color: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(20px);
width: 100%;
text-align: center;
transition: 0.3s;
box-shadow: var(--shadow-light);
padding: 2rem 0;
}
.nav-menu.active {
left: 0;
}
.hamburger {
display: flex;
}
.hamburger.active span:nth-child(2) {
opacity: 0;
}
.hamburger.active span:nth-child(1) {
transform: translateY(8px) rotate(45deg);
}
.hamburger.active span:nth-child(3) {
transform: translateY(-8px) rotate(-45deg);
}
.hero-cta {
flex-direction: column;
align-items: center;
}
.innovation-content {
grid-template-columns: 1fr;
text-align: center;
}
.innovation-stats {
justify-content: center;
}
.footer-content {
flex-direction: column;
gap: 2rem;
text-align: center;
align-items: center;
}
.footer-company-info {
text-align: center;
max-width: 100%;
}
.footer-links {
order: 2;
justify-content: center;
align-items: center;
}
.footer-social {
order: 3;
}
}
@media (max-width: 480px) {
.container {
padding: 0 15px;
}
.nav-container {
padding: 0 15px;
}
.discover-grid {
grid-template-columns: 1fr;
}
.about-values {
grid-template-columns: 1fr;
}
.innovation-stats {
flex-direction: column;
gap: 1rem;
}
}
/* Container Queries for responsive design */
@container (min-width: 768px) {
.container {
padding: 0 clamp(1.5rem, 5vw, 3rem);
}
}
@container (min-width: 1024px) {
.container {
padding: 0 clamp(2rem, 6vw, 4rem);
}
}
/* Utility Classes */
.glass {
background: var(--gradient-glass);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.1);
}
.morphism {
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.1);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}
.parallax {
will-change: transform;
transform: translateZ(0);
}
.animate-fade-in {
opacity: 0;
transform: translateY(2rem);
animation: fade-in 0.8s var(--ease-spring) forwards;
}
.animate-scale-in {
opacity: 0;
transform: scale(0.8);
animation: scale-in 0.6s var(--ease-bounce) forwards;
}
.animate-slide-in {
opacity: 0;
transform: translateX(-2rem);
animation: slide-in 0.7s var(--ease-spring) forwards;
}
@keyframes fade-in {
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes scale-in {
to {
opacity: 1;
transform: scale(1);
}
}
@keyframes slide-in {
to {
opacity: 1;
transform: translateX(0);
}
}
/* Advanced Modern Effects */
.hover-lift {
transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.hover-lift:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-heavy);
}
.magnetic-hover {
transition: transform var(--transition-fast);
}
.glow-effect {
position: relative;
overflow: hidden;
}
.glow-effect::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transition: left 0.5s;
}
.glow-effect:hover::before {
left: 100%;
}
/* Scroll-driven animations */
@supports (animation-timeline: scroll()) {
.scroll-reveal {
animation: scroll-reveal linear both;
animation-timeline: view();
animation-range: entry 0% cover 30%;
}
@keyframes scroll-reveal {
from {
opacity: 0;
transform: translateY(3rem);
}
to {
opacity: 1;
transform: translateY(0);
}
}
}
/* Enhanced Responsive Design */
@media (max-width: 1024px) {
.hero-title {
font-size: clamp(2.5rem, 6vw, 4rem);
}
.innovation-content {
grid-template-columns: 1fr;
gap: 3rem;
}
.innovation-visual {
order: -1;
}
.floating-device {
width: 250px;
height: 350px;
}
}
/* Medium screens (13" MacBooks, tablets) */
@media (max-width: 1024px) {
.hero {
padding-top: max(80px, 10vh); /* Maintain good spacing for laptops */
min-height: 550px;
}
}
@media (max-width: 640px) {
.hero {
padding: 60px 0 2rem 0; /* Account for mobile navbar height */
}
.hero-title {
font-size: clamp(2rem, 8vw, 3rem);
margin-bottom: 1rem;
}
.hero-subtitle {
font-size: 1rem;
margin-bottom: 2rem;
}
.cta-primary,
.cta-secondary {
padding: 0.875rem 1.5rem;
font-size: 0.875rem;
}
.discover-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.discover-card {
padding: 2rem 1.5rem;
}
.innovation-stats {
flex-direction: column;
gap: 1.5rem;
}
.stat-number {
font-size: 2rem;
}
.about-values {
grid-template-columns: 1fr;
gap: 2rem;
}
.section-title {
font-size: clamp(2rem, 6vw, 2.5rem);
}
.footer-content {
flex-direction: column;
text-align: center;
gap: 2rem;
}
.footer-social {
justify-content: center;
}
}
/* Performance Optimizations */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms \!important;
animation-iteration-count: 1 \!important;
transition-duration: 0.01ms \!important;
}
}
/* High contrast mode support */
@media (prefers-contrast: high) {
:root {
--primary-color: #0066CC;
--secondary-color: #4A4A4A;
--text-primary: #000000;
--text-secondary: #333333;
--border-color: #666666;
}
}
/* Print styles */
@media print {
.navbar,
.install-btn {
display: none \!important;
}
.hero {
height: auto;
padding: 2rem 0;
}
.hero-background {
display: none;
}
* {
color: #000 \!important;
background: transparent \!important;
box-shadow: none \!important;
}
}
/* Focus management for accessibility */
.skip-link {
position: absolute;
top: -40px;
left: 6px;
background: var(--primary-color);
color: white;
padding: 8px;
text-decoration: none;
border-radius: 4px;
z-index: 10000;
transition: top 0.3s;
}
.skip-link:focus {
top: 6px;
}
/* Loading states */
.loading {
opacity: 0.5;
pointer-events: none;
position: relative;
}
.loading::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 20px;
height: 20px;
margin: -10px 0 0 -10px;
border: 2px solid var(--primary-color);
border-top: 2px solid transparent;
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* Code Block Copy */
.code-block-wrapper {
margin: 20px 0;
}
.code-block-toolbar {
display: flex;
justify-content: flex-end;
margin-bottom: 8px;
}
.copy-code-btn {
border: 1px solid rgba(148, 163, 184, 0.5);
background: rgba(15, 23, 42, 0.9);
color: #f8fafc;
padding: 6px 12px;
border-radius: 999px;
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
cursor: pointer;
transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}
.copy-code-btn:hover {
background: #1e293b;
border-color: rgba(148, 163, 184, 0.85);
transform: translateY(-1px);
}
.copy-code-btn:focus-visible {
outline: 2px solid rgba(59, 130, 246, 0.8);
outline-offset: 2px;
}
.copy-code-btn.copied {
background: #16a34a;
border-color: #16a34a;
color: #ffffff;
}
/* Logo Styling */
.logo-svg {
height: 32px;
width: auto;
display: block;
object-fit: contain;
transition: all var(--transition-base);
}
.logo-svg:hover {
transform: scale(1.05);
}
.footer-logo-svg {
height: 120px;
width: 180px;
display: block;
object-fit: contain;
filter: none;
}
/* Data/AI Theme Colors */
:root {
/* Data-focused color palette */
--primary-color: #1E3A8A;
--secondary-color: #7C3AED;
--accent-color: #0EA5E9;
--success-color: #10B981;
--warning-color: #F59E0B;
--error-color: #EF4444;
/* Data visualization colors */
--data-blue: #1E40AF;
--data-purple: #7C2D12;
--data-blue: #0EA5E9;
--data-green: #059669;
--data-orange: #EA580C;
/* Gradients for data themes */
--gradient-data: linear-gradient(135deg, #1E3A8A 0%, #1E293B 50%, #0EA5E9 100%);
--gradient-insight: linear-gradient(135deg, #1E40AF 0%, #7C2D12 100%);
--gradient-discovery: radial-gradient(circle at 30% 70%, #1E3A8A 0%, #1E293B 50%, #0EA5E9 100%);
}
/* Enhanced Use Cases Grid */
.use-cases-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 2rem;
margin-top: 2rem;
}
.use-case {
text-align: center;
padding: 1.5rem;
background: rgba(255, 255, 255, 0.05);
border-radius: var(--radius-lg);
border: 1px solid rgba(255, 255, 255, 0.1);
transition: all var(--transition-base);
}
.use-case:hover {
transform: translateY(-4px);
background: rgba(255, 255, 255, 0.08);
border-color: var(--primary-color);
}
.use-case-icon {
font-size: 2.5rem;
margin-bottom: 1rem;
opacity: 0.9;
}
.use-case h4 {
font-size: 1.125rem;
font-weight: 600;
margin-bottom: 0.5rem;
color: var(--text-primary);
}
.use-case p {
font-size: 0.875rem;
color: var(--text-secondary);
line-height: 1.5;
}
/* Enhanced Search Demo */
.search-demo {
padding: 1.5rem;
background: rgba(0, 0, 0, 0.9);
border-radius: var(--radius-lg);
color: white;
font-family: 'SF Mono', Monaco, Consolas, monospace;
}
.search-query {
margin-bottom: 1.5rem;
padding: 1rem;
background: rgba(37, 99, 235, 0.1);
border: 1px solid rgba(37, 99, 235, 0.3);
border-radius: var(--radius-md);
position: relative;
}
.search-query::before {
content: '🔍';
position: absolute;
left: 1rem;
top: 50%;
transform: translateY(-50%);
font-size: 1.2rem;
}
.query-text {
font-size: 0.875rem;
color: #93C5FD;
margin-left: 2rem;
font-style: italic;
}
.search-results {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.result-item {
height: 20px;
background: linear-gradient(90deg, rgba(37, 99, 235, 0.3) 0%, rgba(124, 58, 237, 0.3) 100%);
border-radius: 4px;
animation: pulse-result 2s ease-in-out infinite;
}
.result-item:nth-child(1) {
width: 85%;
animation-delay: 0s;
}
.result-item:nth-child(2) {
width: 70%;
animation-delay: 0.5s;
}
.result-item:nth-child(3) {
width: 90%;
animation-delay: 1s;
}
@keyframes pulse-result {
0%, 100% {
opacity: 0.3;
}
50% {
opacity: 0.8;
}
}
/* Philosophy Quote Styling */
.philosophy {
margin-top: 3rem;
text-align: center;
position: relative;
}
/* Remove any wavy decorations */
.philosophy::after,
.philosophy::before {
display: none !important;
}
.philosophy blockquote {
font-size: 1.375rem;
font-style: italic;
color: var(--text-secondary);
max-width: 600px;
margin: 0 auto;
position: relative;
padding: 2rem;
background: var(--gradient-glass);
border-radius: var(--radius-xl);
border: 1px solid rgba(255, 255, 255, 0.1);
}
.philosophy blockquote::before {
content: '"';
position: absolute;
top: -10px;
left: 20px;
font-size: 4rem;
color: var(--primary-color);
opacity: 0.3;
}
/* Enhanced Hero Background for Data Theme */
.hero {
background: linear-gradient(135deg, #F8FAFC 0%, #E2E8F0 100%);
position: relative;
overflow: hidden;
padding-top: max(80px, 12vh); /* Increased percentage for better laptop spacing */
box-sizing: border-box;
}
.hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(circle at 20% 80%, rgba(37, 99, 235, 0.1) 0%, transparent 50%),
radial-gradient(circle at 80% 20%, rgba(124, 58, 237, 0.1) 0%, transparent 50%),
radial-gradient(circle at 40% 40%, rgba(6, 182, 212, 0.1) 0%, transparent 50%);
z-index: 1;
}
.hero-content {
position: relative;
z-index: 2;
}
/* Responsive adjustments */
@media (max-width: 768px) {
.use-cases-grid {
grid-template-columns: 1fr;
gap: 1rem;
}
.philosophy blockquote {
font-size: 1.125rem;
padding: 1.5rem;
}
.logo-svg {
height: 28px;
}
}
/* Data Room Visualization Enhancements */
.data-room-container {
background: radial-gradient(circle at 30% 70%, rgba(37, 99, 235, 0.03) 0%, transparent 70%),
radial-gradient(circle at 70% 30%, rgba(124, 58, 237, 0.03) 0%, transparent 70%);
}
.data-item {
cursor: pointer;
transition: all 0.2s ease;
}
.data-item:hover {
transform-origin: center;
filter: drop-shadow(0 4px 12px rgba(37, 99, 235, 0.4));
}
.data-item text {
transition: all 0.2s ease;
}
.data-item:hover text {
font-weight: 600;
}
/* Enhanced hero section for data room */
.hero-content {
position: relative;
z-index: 10;
backdrop-filter: blur(1px);
background: rgba(255, 255, 255, 0.02);
border-radius: var(--radius-2xl);
padding: 2rem;
border: 1px solid rgba(255, 255, 255, 0.05);
}
/* Performance optimizations for data room */
.data-room-container svg {
will-change: transform;
transform: translateZ(0);
}
.data-item {
will-change: transform, opacity;
transform: translateZ(0);
}
/* Add subtle grid lines for depth */
.hero::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image:
linear-gradient(rgba(37, 99, 235, 0.03) 1px, transparent 1px),
linear-gradient(90deg, rgba(37, 99, 235, 0.03) 1px, transparent 1px);
background-size: 100px 100px;
z-index: 0;
opacity: 0.3;
animation: grid-drift 20s linear infinite;
}
@keyframes grid-drift {
0% { transform: translate(0, 0); }
100% { transform: translate(100px, 100px); }
}
/* Data type specific styling */
.data-item[data-type="email"] {
filter: drop-shadow(0 2px 8px rgba(37, 99, 235, 0.2));
}
.data-item[data-type="document"] {
filter: drop-shadow(0 2px 8px rgba(124, 58, 237, 0.2));
}
.data-item[data-type="chat"] {
filter: drop-shadow(0 2px 8px rgba(6, 182, 212, 0.2));
}
/* Tablet and smaller screens */
@media (max-width: 1024px) {
.hero {
min-height: auto; /* Let content determine height */
padding: 90px 20px 40px 20px; /* Better padding for medium screens */
}
.hero-content {
max-width: 90%; /* Give more room for content */
}
}
/* Mobile optimizations */
@media (max-width: 768px) {
.hero {
min-height: auto; /* Let content determine height */
padding: 80px 20px 30px 20px; /* Consistent padding all around */
}
/* Override when dark background is applied */
.hero[style*="background"] {
min-height: auto;
padding: 80px 20px 30px 20px;
}
.hero-content {
padding: 0; /* Remove extra padding, already handled by hero */
max-width: 100%; /* Full width on mobile */
}
.hero-title {
font-size: clamp(2rem, 6vw, 3rem); /* Smaller font size for mobile */
margin-bottom: 1rem;
line-height: 1.2; /* Slightly more line height for readability */
}
.hero-subtitle {
font-size: 1rem; /* Smaller subtitle */
margin-bottom: 2rem;
line-height: 1.5; /* Better line height for readability */
}
.scroll-mouse-indicator {
display: none; /* Hide scroll indicator on mobile to save space */
}
.data-room-container {
opacity: 0.7;
}
}
/* Extra small screens (phones in portrait) */
@media (max-width: 480px) {
.hero {
padding-top: 70px; /* Smaller padding for very small screens */
}
.hero-content {
padding: 1.5rem 15px; /* Less padding on very small screens */
}
.hero-title {
font-size: 1.75rem; /* Even smaller font size */
margin-bottom: 0.75rem;
}
.title-line {
display: inline; /* Don't break lines on very small screens */
}
.hero-subtitle {
font-size: 0.9rem; /* Smaller subtitle text */
margin-bottom: 1.5rem;
}
.hero-cta {
margin-top: 1rem;
}
.cta-secondary {
padding: 0.75rem 1.5rem; /* Smaller button padding */
font-size: 0.9rem;
}
.hero-content {
padding: 1.5rem;
margin: 1rem;
}
.hero::after {
background-size: 50px 50px;
}
.principle-main {
padding: 2rem;
}
.principle-main h3 {
font-size: 1.75rem;
}
.principle-main p {
font-size: 1rem;
}
.principle-stats {
gap: 2rem;
}
.stat-value {
font-size: 2rem;
}
.principles-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.disruption-visual {
padding: 2rem;
}
.disruption-timeline {
flex-direction: column;
gap: 2rem;
}
.timeline-connector {
display: none !important;
}
.disruption-timeline::before {
display: none;
}
.timeline-item p {
max-width: 100%;
}
}
/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
.data-room-container {
opacity: 0.3;
}
.data-item {
animation: none \!important;
transform: none \!important;
}
.hero::after {
animation: none \!important;
}
}
/* Data Room Overlay - Enhanced Visibility */
.data-room-overlay {
mix-blend-mode: normal;
}
.floating-data-item {
filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.2));
will-change: transform;
pointer-events: auto !important;
}
.hero {
position: relative;
overflow: hidden;
padding-top: max(80px, 12vh); /* Increased percentage for better laptop spacing */
box-sizing: border-box;
}
.hero-background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 0;
}
.gradient-orb {
opacity: 0.3; /* Reduce orb opacity to make data items more visible */
}
/* Ensure hero content is above data room */
.hero-content {
position: relative;
z-index: 20 !important;
}
/* Homepage platform hero */
.platform-hero {
min-height: 76vh;
background:
radial-gradient(circle at 50% 78%, rgba(249, 115, 22, 0.16) 0%, rgba(249, 115, 22, 0) 30%),
radial-gradient(circle at 18% 26%, rgba(59, 130, 246, 0.18) 0%, rgba(59, 130, 246, 0) 34%),
radial-gradient(circle at 82% 18%, rgba(139, 92, 246, 0.16) 0%, rgba(139, 92, 246, 0) 32%),
linear-gradient(180deg, #07111f 0%, #091729 48%, #0d1727 100%);
overflow: hidden;
}
.platform-hero::before {
background:
radial-gradient(circle at 28% 32%, rgba(125, 211, 252, 0.08) 0%, transparent 28%),
radial-gradient(circle at 72% 24%, rgba(168, 85, 247, 0.07) 0%, transparent 30%),
linear-gradient(180deg, rgba(3, 7, 18, 0.14) 0%, rgba(3, 7, 18, 0.34) 100%);
z-index: 1;
}
.platform-hero::after {
background-image:
linear-gradient(rgba(148, 163, 184, 0.05) 1px, transparent 1px),
linear-gradient(90deg, rgba(148, 163, 184, 0.05) 1px, transparent 1px);
background-size: 112px 112px;
opacity: 0.22;
}
.platform-hero .hero-background {
z-index: 0;
}
.platform-hero .gradient-orb {
opacity: 0.14;
filter: blur(90px);
}
.platform-hero .hero-content {
max-width: 640px;
padding: 0;
background: transparent;
border: 0;
border-radius: 0;
backdrop-filter: none;
text-align: left;
}
.platform-hero .hero-title,
.platform-hero .hero-subtitle {
text-shadow: 0 10px 30px rgba(3, 7, 18, 0.38);
}
.platform-hero .data-room-container {
background: none;
}
.platform-hero-layout {
position: relative;
z-index: 20;
/* Full-width, left-anchored — no more centered 1240px container
on the homepage hero. The text sits close to the left edge and
the animation owns the right half. */
width: 100%;
margin: 0;
padding: clamp(4.5rem, 8vh, 6.5rem) 0 clamp(2rem, 4vh, 3rem) clamp(2rem, 5vw, 5rem);
min-height: calc(76vh - 80px);
display: flex;
flex-direction: column;
justify-content: flex-start;
box-sizing: border-box;
}
.platform-hero .hero-title {
font-size: clamp(3rem, 5vw, 4.85rem);
line-height: 1.04;
margin-bottom: 1.25rem;
}
.platform-hero .hero-subtitle {
max-width: 620px;
margin: 0 0 2rem;
font-size: clamp(1.08rem, 1.7vw, 1.22rem);
line-height: 1.65;
color: rgba(255, 255, 255, 0.84);
}
.platform-hero .hero-cta {
justify-content: flex-start;
}
.platform-hero-visual {
position: relative;
min-height: 430px;
border-radius: 30px;
background:
linear-gradient(180deg, rgba(10, 17, 31, 0.88) 0%, rgba(8, 13, 25, 0.72) 100%);
border: 1px solid rgba(148, 163, 184, 0.14);
box-shadow:
0 32px 120px rgba(2, 6, 23, 0.54),
inset 0 1px 0 rgba(255, 255, 255, 0.04);
overflow: hidden;
}
.platform-hero-visual::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(circle at 30% 22%, rgba(56, 189, 248, 0.08) 0%, transparent 32%),
radial-gradient(circle at 78% 18%, rgba(139, 92, 246, 0.08) 0%, transparent 32%);
pointer-events: none;
}
.platform-flow-scene {
position: absolute;
inset: 0;
overflow: hidden;
}
.platform-flow-paths {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
.flow-path {
fill: none;
stroke: rgba(148, 163, 184, 0.18);
stroke-width: 2.25;
stroke-linecap: round;
stroke-dasharray: 8 12;
animation: platformFlowDrift 8s linear infinite;
}
.flow-path-2 {
animation-delay: -1.4s;
}
.flow-path-3 {
animation-delay: -2.2s;
}
.flow-path-out {
stroke: rgba(125, 211, 252, 0.26);
animation-delay: -3.1s;
}
.flow-ambient-glow {
position: absolute;
left: 50%;
top: 60%;
width: 44%;
height: 34%;
transform: translate(-50%, -50%);
border-radius: 999px;
background: radial-gradient(circle, rgba(249, 115, 22, 0.18) 0%, rgba(249, 115, 22, 0.05) 46%, transparent 78%);
filter: blur(8px);
animation: platformGlowPulse 6s ease-in-out infinite;
}
.flow-source,
.flow-card,
.flow-output,
.flow-packet {
position: absolute;
}
.flow-source {
left: 36px;
width: 96px;
height: 40px;
display: flex;
align-items: center;
gap: 10px;
padding: 0 14px;
border-radius: 999px;
border: 1px solid rgba(148, 163, 184, 0.16);
background: rgba(15, 23, 42, 0.48);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
color: rgba(255, 255, 255, 0.84);
}
.source-email {
top: 112px;
}
.source-chat {
top: 192px;
}
.source-documents {
top: 272px;
}
.flow-source-dot,
.flow-ribbon-dot {
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
flex: 0 0 auto;
}
.source-email .flow-source-dot {
background: #60A5FA;
}
.source-chat .flow-source-dot {
background: #22D3EE;
}
.source-documents .flow-source-dot {
background: #F59E0B;
}
.flow-source-label {
font-size: 0.95rem;
font-weight: 500;
letter-spacing: -0.01em;
}
.flow-card {
left: 50%;
top: 50%;
width: 230px;
min-height: 160px;
transform: translate(-50%, -50%);
padding: 18px 18px 16px;
border-radius: 24px;
background: linear-gradient(180deg, rgba(20, 27, 45, 0.94) 0%, rgba(22, 26, 39, 0.86) 100%);
border: 1px solid rgba(148, 163, 184, 0.18);
box-shadow:
0 24px 50px rgba(2, 6, 23, 0.45),
inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.flow-card::before {
content: '';
position: absolute;
left: 18px;
right: 18px;
top: 14px;
height: 3px;
border-radius: 999px;
background: rgba(125, 211, 252, 0.55);
}
.flow-eyebrow {
display: block;
margin-top: 10px;
margin-bottom: 6px;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.56);
}
.flow-card h3 {
margin: 0 0 14px;
font-size: 1.12rem;
font-weight: 500;
letter-spacing: -0.02em;
color: rgba(255, 255, 255, 0.94);
}
.flow-modules {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 10px;
}
.flow-module {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 7px 12px;
border-radius: 999px;
border: 1px solid rgba(148, 163, 184, 0.16);
background: rgba(255, 255, 255, 0.04);
font-size: 0.82rem;
font-weight: 500;
color: rgba(255, 255, 255, 0.78);
animation: modulePulse 8s ease-in-out infinite;
}
.flow-module::before {
content: '';
width: 7px;
height: 7px;
border-radius: 50%;
background: currentColor;
opacity: 0.8;
}
.module-discovery {
color: #FBBF24;
animation-delay: 0.2s;
}
.module-collaborate {
color: #2DD4BF;
animation-delay: 1.2s;
}
.module-sign {
color: #FB923C;
animation-delay: 2.1s;
}
.module-send {
color: #4ADE80;
animation-delay: 3s;
}
.flow-ribbon,
.flow-trigger-chip {
display: inline-flex;
align-items: center;
gap: 8px;
border-radius: 999px;
border: 1px solid rgba(148, 163, 184, 0.14);
background: rgba(255, 255, 255, 0.04);
}
.flow-ribbon {
width: 100%;
padding: 8px 12px;
font-size: 0.76rem;
color: rgba(255, 255, 255, 0.66);
}
.flow-ribbon-dot {
background: #7DD3FC;
}
.flow-trigger-chip {
margin-top: 12px;
padding: 7px 12px;
font-size: 0.76rem;
font-weight: 600;
color: rgba(255, 255, 255, 0.82);
box-shadow: 0 0 0 0 rgba(125, 211, 252, 0.22);
animation: triggerPulse 2.4s ease-in-out infinite;
}
.flow-output {
right: 34px;
top: 126px;
width: 174px;
padding: 18px 18px 16px;
border-radius: 22px;
border: 1px solid rgba(148, 163, 184, 0.16);
background: rgba(15, 23, 42, 0.54);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.flow-output-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 14px;
}
.flow-output h4 {
margin: 0;
font-size: 0.96rem;
font-weight: 500;
color: rgba(255, 255, 255, 0.92);
}
.flow-output-badge {
width: 13px;
height: 13px;
border-radius: 50%;
background: rgba(52, 211, 153, 0.26);
border: 1px solid rgba(52, 211, 153, 0.5);
box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.25);
animation: badgePulse 2.8s ease-in-out infinite;
}
.flow-output-list {
margin: 0;
padding: 0;
list-style: none;
display: grid;
gap: 10px;
}
.flow-output-list li {
position: relative;
padding-left: 18px;
font-size: 0.78rem;
color: rgba(255, 255, 255, 0.66);
}
.flow-output-list li::before {
content: '';
position: absolute;
left: 0;
top: 8px;
width: 8px;
height: 8px;
border-radius: 50%;
background: rgba(96, 165, 250, 0.4);
}
.flow-packet {
width: 10px;
height: 10px;
border-radius: 50%;
filter: drop-shadow(0 0 8px currentColor);
}
.packet-1 {
left: 118px;
top: 126px;
background: #60A5FA;
animation: packetInOne 6s ease-in-out infinite;
}
.packet-2 {
left: 118px;
top: 206px;
background: #22D3EE;
animation: packetInTwo 6s ease-in-out infinite;
}
.packet-3 {
left: 118px;
top: 286px;
background: #F59E0B;
animation: packetInThree 6s ease-in-out infinite;
}
.packet-out {
left: 354px;
top: 205px;
background: #34D399;
animation: packetOut 6s ease-in-out infinite;
}
@keyframes platformFlowDrift {
0% {
stroke-dashoffset: 0;
opacity: 0.4;
}
50% {
opacity: 0.82;
}
100% {
stroke-dashoffset: -120;
opacity: 0.4;
}
}
@keyframes platformGlowPulse {
0%, 100% {
opacity: 0.42;
transform: translate(-50%, -50%) scale(0.96);
}
50% {
opacity: 0.76;
transform: translate(-50%, -50%) scale(1.04);
}
}
@keyframes modulePulse {
0%, 100% {
background: rgba(255, 255, 255, 0.04);
border-color: rgba(148, 163, 184, 0.16);
box-shadow: none;
}
18%, 32% {
background: rgba(255, 255, 255, 0.09);
border-color: currentColor;
box-shadow: 0 0 24px rgba(125, 211, 252, 0.14);
}
}
@keyframes triggerPulse {
0%, 100% {
box-shadow: 0 0 0 0 rgba(125, 211, 252, 0.12);
border-color: rgba(148, 163, 184, 0.14);
}
50% {
box-shadow: 0 0 0 10px rgba(125, 211, 252, 0);
border-color: rgba(125, 211, 252, 0.34);
}
}
@keyframes badgePulse {
0%, 100% {
box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.22);
opacity: 0.7;
}
50% {
box-shadow: 0 0 0 9px rgba(52, 211, 153, 0);
opacity: 1;
}
}
@keyframes packetInOne {
0%, 12% {
transform: translate(0, 0);
opacity: 0;
}
20%, 42% {
opacity: 1;
}
52%, 100% {
transform: translate(150px, 56px);
opacity: 0;
}
}
@keyframes packetInTwo {
0%, 18% {
transform: translate(0, 0);
opacity: 0;
}
26%, 48% {
opacity: 1;
}
58%, 100% {
transform: translate(150px, 4px);
opacity: 0;
}
}
@keyframes packetInThree {
0%, 24% {
transform: translate(0, 0);
opacity: 0;
}
32%, 54% {
opacity: 1;
}
64%, 100% {
transform: translate(150px, -48px);
opacity: 0;
}
}
@keyframes packetOut {
0%, 58% {
transform: translate(0, 0);
opacity: 0;
}
66%, 82% {
opacity: 1;
}
100% {
transform: translate(120px, -12px);
opacity: 0;
}
}
.platform-hero .scroll-indicator {
bottom: 1.75rem;
color: rgba(148, 163, 184, 0.82);
z-index: 20;
}
.platform-hero .scroll-line {
background: linear-gradient(180deg, rgba(96, 165, 250, 0.1), rgba(96, 165, 250, 0.92));
}
@media (max-width: 768px) {
.platform-hero-layout {
width: min(100%, calc(100% - 32px));
grid-template-columns: 1fr;
gap: 1.75rem;
padding: 3.5rem 0 5.25rem;
}
.platform-hero .hero-content {
max-width: none;
text-align: center;
}
.platform-hero .hero-subtitle {
margin-left: auto;
margin-right: auto;
}
.platform-hero .hero-cta {
justify-content: center;
}
.platform-hero-visual {
min-height: 360px;
}
.flow-card {
width: 210px;
}
.flow-output {
right: 22px;
width: 154px;
}
.flow-source {
left: 18px;
width: 84px;
padding: 0 12px;
}
.flow-source-label {
font-size: 0.84rem;
}
.platform-hero::after {
background-size: 64px 64px;
opacity: 0.16;
}
}
/* Principles Showcase for Why Us Section */
.principles-showcase {
margin: 4rem 0;
}
.principle-main {
background: var(--gradient-subtle);
border-radius: 24px;
padding: 3rem;
text-align: center;
margin-bottom: 3rem;
position: relative;
overflow: hidden;
}
.principle-main::before {
content: '';
position: absolute;
top: -50%;
right: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle, var(--primary-color) 0%, transparent 70%);
opacity: 0.05;
animation: rotate 30s linear infinite;
}
.principle-icon-large {
margin-bottom: 1.5rem;
display: inline-block;
color: var(--primary-color);
}
.principle-icon-large svg {
width: 64px;
height: 64px;
color: var(--primary-color);
stroke: var(--primary-color);
}
.principle-main h3 {
font-size: 2.5rem;
margin-bottom: 1rem;
color: var(--text-primary);
}
.principle-main p {
font-size: 1.25rem;
color: var(--text-secondary);
max-width: 600px;
margin: 0 auto 2rem;
line-height: 1.6;
}
.principle-stats {
display: flex;
justify-content: center;
gap: 3rem;
flex-wrap: wrap;
}
.stat-item {
text-align: center;
}
.stat-value {
display: block;
font-size: 2.5rem;
font-weight: 700;
color: var(--primary-color);
margin-bottom: 0.5rem;
}
.stat-label {
font-size: 0.875rem;
color: var(--text-secondary);
text-transform: uppercase;
letter-spacing: 0.1em;
}
.principles-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 2rem;
margin: 3rem 0;
}
@media (min-width: 900px) {
.principles-grid {
grid-template-columns: repeat(6, minmax(0, 1fr));
}
.principles-grid .principle-card {
grid-column: span 2;
}
.principles-grid .principle-card:nth-child(4) {
grid-column: 2 / span 2;
}
.principles-grid .principle-card:nth-child(5) {
grid-column: 4 / span 2;
}
}
.principle-card {
background: white;
border-radius: 16px;
padding: 2rem;
position: relative;
border: 1px solid var(--border-color);
transition: all 0.3s ease;
}
.principle-card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 24px rgba(0,0,0,0.1);
border-color: var(--primary-color);
}
.principle-number {
position: absolute;
top: -10px;
left: 20px;
background: var(--gradient-primary);
color: white;
padding: 0.5rem 1rem;
border-radius: 20px;
font-weight: 700;
font-size: 0.875rem;
}
.principle-card h4 {
margin-top: 1rem;
margin-bottom: 1rem;
font-size: 1.25rem;
color: var(--text-primary);
}
.principle-card p {
color: var(--text-secondary);
line-height: 1.6;
}
/* Disruption Visual */
.disruption-visual {
margin-top: 5rem;
padding: 3rem;
background: linear-gradient(135deg, var(--bg-light) 0%, white 100%);
border-radius: 24px;
border: 1px solid var(--border-color);
}
.disruption-header {
text-align: center;
margin-bottom: 3rem;
}
.disruption-header h3 {
font-size: 2rem;
margin-bottom: 1rem;
color: var(--text-primary);
}
.disruption-header p {
color: var(--text-secondary);
font-size: 1.125rem;
}
.disruption-timeline {
display: flex;
align-items: center;
justify-content: space-between;
position: relative;
max-width: 900px;
margin: 0 auto;
padding: 2rem 0;
}
.timeline-item {
flex: 1;
text-align: center;
position: relative;
z-index: 2;
}
.timeline-marker {
width: 60px;
height: 60px;
border-radius: 50%;
background: white;
border: 3px solid var(--border-color);
margin: 0 auto 1.5rem;
position: relative;
transition: all 0.3s ease;
}
.timeline-marker::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--border-color);
transition: all 0.3s ease;
}
.timeline-marker.active {
border-color: var(--primary-color);
box-shadow: 0 0 0 8px rgba(37, 99, 235, 0.1);
}
.timeline-marker.active::after {
background: var(--primary-color);
width: 30px;
height: 30px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.timeline-connector {
position: absolute;
top: 30px;
left: 33.33%;
right: 33.33%;
height: 3px;
background: var(--border-color);
z-index: 1;
}
.timeline-item h4 {
font-size: 1.25rem;
margin-bottom: 0.5rem;
color: var(--text-primary);
}
.timeline-item p {
font-size: 0.875rem;
color: var(--text-secondary);
max-width: 200px;
margin: 0 auto;
}
.timeline-item.past {
opacity: 0.6;
}
.timeline-item.future {
opacity: 0.6;
}
/* Timeline Animations */
@keyframes rotatingArc {
0% {
stroke-dashoffset: 628;
opacity: 0;
}
20% {
opacity: 1;
}
100% {
stroke-dashoffset: 0;
opacity: 1;
}
}
@keyframes orbitDot {
0% {
transform: rotate(0deg) translateX(100px) rotate(0deg);
opacity: 0;
}
20% {
opacity: 1;
}
100% {
transform: rotate(360deg) translateX(100px) rotate(-360deg);
opacity: 1;
}
}
@keyframes energyPulse {
0%, 100% {
transform: translate(-50%, -50%) scale(1);
opacity: 0.8;
}
50% {
transform: translate(-50%, -50%) scale(1.5);
opacity: 0.3;
}
}
@keyframes markerGlow {
0% {
box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.8);
transform: scale(0);
}
50% {
box-shadow: 0 0 20px 10px rgba(37, 99, 235, 0.3);
transform: scale(1.1);
}
100% {
box-shadow: 0 0 30px 15px rgba(37, 99, 235, 0.1);
transform: scale(1);
}
}
@keyframes fadeInUp {
0% {
opacity: 0;
transform: translateY(30px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
@keyframes dataFlow {
0% {
transform: translateX(-100%);
opacity: 0;
}
50% {
opacity: 1;
}
100% {
transform: translateX(200%);
opacity: 0;
}
}
/* SVG Arc Container */
.timeline-arc-container {
position: absolute;
top: -50px;
left: 33.33%;
width: 33.33%;
height: 200px;
pointer-events: none;
z-index: 3;
}
.timeline-arc-svg {
width: 100%;
height: 100%;
overflow: visible;
}
/* Apply animations when section is in view */
.disruption-timeline.animate .timeline-item {
opacity: 0;
animation: fadeInUp 0.8s ease-out forwards;
}
.disruption-timeline.animate .timeline-item.past {
animation-delay: 0s;
}
.disruption-timeline.animate .timeline-item.present {
animation-delay: 0.4s;
}
.disruption-timeline.animate .timeline-item.future {
animation-delay: 0.8s;
}
.disruption-timeline.animate .timeline-marker {
transform: scale(0);
animation: markerGlow 1s ease-out forwards;
}
.disruption-timeline.animate .timeline-item.past .timeline-marker {
animation-delay: 0.2s;
}
.disruption-timeline.animate .timeline-item.present .timeline-marker {
animation-delay: 0.6s;
}
.disruption-timeline.animate .timeline-item.future .timeline-marker {
animation-delay: 1s;
}
/* Rotating ring around Today */
.timeline-marker.active::before {
content: '';
position: absolute;
top: -15px;
left: -15px;
right: -15px;
bottom: -15px;
border: 2px solid var(--primary-color);
border-radius: 50%;
border-top-color: transparent;
border-right-color: transparent;
animation: rotate 2s linear infinite;
}
@keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
/* Energy particles */
.timeline-item.present .timeline-marker::after {
background: var(--primary-color);
animation: energyPulse 2s ease-in-out infinite;
}
/* Data flow lines */
.disruption-timeline.animate::after {
content: '';
position: absolute;
top: 30px;
left: 16.66%;
width: 4px;
height: 4px;
background: var(--accent-color);
border-radius: 50%;
animation: dataFlow 3s ease-in-out infinite;
animation-delay: 1.5s;
}
/* Hover effects */
.timeline-item:hover .timeline-marker {
transform: scale(1.2);
border-color: var(--primary-color);
box-shadow: 0 0 40px 10px rgba(37, 99, 235, 0.3);
}
.timeline-item:hover {
opacity: 1 !important;
}
.timeline-item:hover h4 {
color: var(--primary-color);
}
/* Progress line effect - now more subtle */
.disruption-timeline::before {
content: '';
position: absolute;
top: 30px;
left: 16.66%;
right: 16.66%;
height: 1px;
background: linear-gradient(90deg,
transparent 0%,
var(--border-color) 20%,
var(--border-color) 80%,
transparent 100%);
z-index: 0;
opacity: 0.3;
}
/* Feature Grid for Why Us Section */
.feature-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 2rem;
margin: 3rem 0;
}
.feature-card {
background: white;
border-radius: 16px;
padding: 2.5rem;
box-shadow: 0 4px 20px rgba(0,0,0,0.08);
border: 1px solid var(--border-color);
transition: all 0.3s ease;
}
.feature-card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 30px rgba(0,0,0,0.12);
border-color: var(--primary-color);
}
.feature-icon {
font-size: 3rem;
margin-bottom: 1.5rem;
}
.feature-card h4 {
font-size: 1.5rem;
color: var(--text-primary);
margin-bottom: 1rem;
}
.feature-card p {
color: var(--text-secondary);
line-height: 1.6;
margin-bottom: 2rem;
}
.feature-metric {
display: flex;
align-items: baseline;
gap: 0.5rem;
padding-top: 1.5rem;
border-top: 1px solid var(--border-color);
}
.metric-number {
font-size: 2rem;
font-weight: 700;
color: var(--primary-color);
}
.metric-label {
color: var(--text-secondary);
font-size: 0.875rem;
}
/* Status Quo Comparison */
.status-quo-comparison {
margin-top: 4rem;
padding: 3rem;
background: var(--gradient-subtle);
border-radius: 16px;
}
.status-quo-comparison h3 {
text-align: center;
font-size: 2rem;
margin-bottom: 2rem;
color: var(--text-primary);
}
.comparison-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 3rem;
max-width: 800px;
margin: 0 auto;
}
.old-way, .new-way {
background: white;
padding: 2rem;
border-radius: 12px;
box-shadow: 0 2px 10px rgba(0,0,0,0.08);
}
.old-way {
border-left: 4px solid var(--error-color);
}
.new-way {
border-left: 4px solid var(--success-color);
}
.old-way h4, .new-way h4 {
font-size: 1.25rem;
margin-bottom: 1.5rem;
}
.old-way h4 {
color: var(--error-color);
}
.new-way h4 {
color: var(--success-color);
}
.old-way ul, .new-way ul {
list-style: none;
padding: 0;
}
.old-way li, .new-way li {
padding: 0.5rem 0;
padding-left: 2rem;
position: relative;
color: var(--text-secondary);
}
.old-way li::before {
content: "×";
position: absolute;
left: 0;
color: var(--error-color);
font-size: 1.5rem;
font-weight: bold;
}
.new-way li::before {
content: "✓";
position: absolute;
left: 0;
color: var(--success-color);
font-weight: bold;
}
/* Compliance Module Section */
.compliance-section {
padding: 5rem 0;
background: var(--background-secondary);
}
.compliance-showcase {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 3rem;
margin-top: 3rem;
}
.compliance-main {
display: flex;
flex-direction: column;
gap: 2rem;
}
/* Compliance Screenshot */
.compliance-screen-container {
position: relative;
background: white;
border-radius: 12px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
overflow: hidden;
cursor: pointer;
transition: transform 0.3s ease;
}
.compliance-screen-container:hover {
transform: scale(1.02);
}
.compliance-screenshot {
width: 100%;
height: auto;
display: block;
border-radius: 12px;
}
.click-to-expand {
position: absolute;
bottom: 1rem;
right: 1rem;
background: rgba(0, 0, 0, 0.8);
color: white;
padding: 0.5rem 1rem;
border-radius: 100px;
font-size: 0.875rem;
font-weight: 500;
opacity: 0;
transition: opacity 0.3s ease;
}
.compliance-screen-container:hover .click-to-expand {
opacity: 1;
}
/* Image Modal */
.image-modal {
display: none;
position: fixed;
z-index: 9999;
padding-top: 50px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0, 0, 0, 0.9);
animation: fadeIn 0.3s ease;
}
.modal-content {
margin: auto;
display: block;
max-width: 95%;
max-height: 90vh;
border-radius: 8px;
animation: zoomIn 0.3s ease;
}
.modal-close {
position: absolute;
top: 15px;
right: 35px;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
cursor: pointer;
}
.modal-close:hover,
.modal-close:focus {
color: #bbb;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes zoomIn {
from { transform: scale(0.8); }
to { transform: scale(1); }
}
/* Compliance Features */
.compliance-features {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
}
.compliance-features .feature-card {
background: white;
padding: 1.5rem;
border-radius: 12px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}
.feature-icon {
font-size: 2rem;
margin-bottom: 1rem;
}
.compliance-features h4 {
font-size: 1.125rem;
font-weight: 700;
margin-bottom: 0.5rem;
color: var(--text-primary);
}
.compliance-features p {
font-size: 0.875rem;
color: var(--text-secondary);
line-height: 1.6;
}
/* Compliance Sidebar */
.compliance-sidebar {
display: flex;
flex-direction: column;
gap: 2rem;
}
.compliance-sidebar h3 {
font-size: 1.5rem;
font-weight: 700;
color: var(--text-primary);
}
.framework-list {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.framework-item {
display: flex;
gap: 1rem;
padding: 1.5rem;
background: white;
border-radius: 12px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}
.framework-icon {
font-size: 2rem;
flex-shrink: 0;
}
.framework-item h5 {
font-size: 1rem;
font-weight: 700;
margin-bottom: 0.25rem;
color: var(--text-primary);
}
.framework-item p {
font-size: 0.875rem;
color: var(--text-secondary);
line-height: 1.4;
}
.compliance-stats {
background: white;
padding: 2rem;
border-radius: 12px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}
.compliance-stats h4 {
font-size: 1.25rem;
font-weight: 700;
margin-bottom: 1.5rem;
color: var(--text-primary);
}
.compliance-stats .stat-item {
display: flex;
flex-direction: column;
margin-bottom: 1.5rem;
}
.compliance-stats .stat-value {
font-size: 2rem;
font-weight: 800;
color: var(--primary-color);
}
.compliance-stats .stat-label {
font-size: 0.875rem;
color: var(--text-secondary);
}
/* Compliance CTA */
.compliance-cta {
text-align: center;
margin-top: 3rem;
padding: 3rem;
background: var(--gradient-primary);
border-radius: 16px;
color: white;
}
.compliance-cta p {
font-size: 1.25rem;
margin-bottom: 1.5rem;
}
.compliance-cta .cta-primary {
background: white;
color: var(--primary-color);
}
.compliance-cta .cta-primary:hover {
background: #f8f9fa;
}
/* Transparency Section */
.transparency-section {
padding: 5rem 0;
background: var(--gradient-subtle);
}
.industry-comparison {
margin-top: 4rem;
}
.comparison-visual {
display: grid;
grid-template-columns: 1fr auto 1fr;
gap: 3rem;
align-items: start;
max-width: 1200px;
margin: 0 auto;
}
.industry-status {
background: white;
padding: 3rem;
border-radius: 16px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05);
transition: transform 0.3s ease;
}
.industry-status:hover {
transform: translateY(-5px);
}
.industry-status.old-way {
border-top: 4px solid var(--error-color);
}
.industry-status.new-way {
border-top: 4px solid var(--success-color);
}
.status-icon {
display: flex;
justify-content: center;
margin-bottom: 1.5rem;
}
.old-way .status-icon svg {
color: var(--error-color);
}
.new-way .status-icon svg {
color: var(--success-color);
}
.industry-status h3 {
text-align: center;
font-size: 1.75rem;
font-weight: 700;
margin-bottom: 2rem;
color: var(--text-primary);
}
.status-items {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.status-item {
display: flex;
gap: 1rem;
align-items: flex-start;
margin-bottom: 1.5rem;
}
.status-item:last-child {
margin-bottom: 0;
}
.item-marker {
flex-shrink: 0;
width: 8px;
height: 8px;
border-radius: 50%;
margin-top: 0.5rem;
position: relative;
}
.item-marker::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 16px;
height: 16px;
border-radius: 50%;
opacity: 0.2;
}
.old-marker {
background: var(--error-color);
}
.old-marker::before {
background: var(--error-color);
}
.new-marker {
background: var(--primary-color);
}
.new-marker::before {
background: var(--primary-color);
}
.item-content h4 {
font-size: 1rem;
font-weight: 600;
margin-bottom: 0.25rem;
color: var(--text-primary);
}
.item-content p {
font-size: 0.875rem;
color: var(--text-secondary);
line-height: 1.4;
}
.comparison-divider {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 1rem;
}
.divider-line {
width: 2px;
height: 80px;
background: var(--border-color);
}
.vs-badge {
background: var(--primary-color);
color: white;
width: 60px;
height: 60px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 800;
font-size: 1.25rem;
box-shadow: 0 4px 20px rgba(37, 99, 235, 0.3);
}
/* Guarantee Section */
.guarantee-section {
margin-top: 5rem;
position: relative;
z-index: 5;
}
.guarantee-content {
background: white;
padding: 3rem;
border-radius: 16px;
border: 2px solid var(--primary-color);
text-align: center;
max-width: 700px;
margin: 0 auto;
position: relative;
overflow: hidden;
z-index: 10;
}
/* Remove any potential wavy decorations */
.guarantee-content::after,
.guarantee-content::before {
display: none !important;
}
.guarantee-section::after,
.guarantee-section::before {
display: none !important;
}
.guarantee-content h3 {
font-size: 2rem;
font-weight: 800;
color: var(--text-primary);
margin-bottom: 2.5rem;
}
.guarantee-list {
display: flex;
flex-direction: column;
gap: 1.5rem;
text-align: left;
}
.guarantee-item {
display: flex;
align-items: flex-start;
gap: 1rem;
}
.guarantee-marker {
width: 8px;
height: 8px;
background: var(--primary-color);
border-radius: 50%;
margin-top: 0.5rem;
flex-shrink: 0;
box-shadow: 0 0 8px rgba(37, 99, 235, 0.4);
}
.guarantee-item p {
font-size: 1.125rem;
line-height: 1.6;
color: var(--text-primary);
margin: 0;
font-weight: 500;
}
/* Responsive Design for Transparency Section */
@media (max-width: 1024px) {
.comparison-visual {
grid-template-columns: 1fr;
gap: 2rem;
}
.comparison-divider {
flex-direction: row;
margin: 2rem 0;
}
.divider-line {
width: 80px;
height: 2px;
}
.guarantee-content {
padding: 2rem;
}
}
@media (max-width: 768px) {
.industry-status {
padding: 2rem;
}
.guarantee-content {
padding: 2rem 1.5rem;
}
.guarantee-content h3 {
font-size: 1.5rem;
}
}
/* Responsive Design for Compliance Section */
@media (max-width: 1024px) {
.compliance-showcase {
grid-template-columns: 1fr;
}
.compliance-features {
grid-template-columns: 1fr;
}
.review-interface {
grid-template-columns: 1fr;
}
.review-sidebar {
display: none;
}
}
@media (max-width: 768px) {
.compliance-screen {
font-size: 0.875rem;
}
.doc-content {
font-size: 0.875rem;
}
.hotkeys {
gap: 1rem;
}
.hotkeys span {
font-size: 0.75rem;
}
}
/* Timeline Arc and Creative Animations */
.timeline-arc {
position: absolute;
width: 100%;
height: 400px;
top: -150px;
left: 0;
z-index: 0;
opacity: 0;
transition: opacity 0.6s ease-out;
}
.disruption-timeline.animate .timeline-arc {
opacity: 1;
}
/* Rotating arc animation */
.arc-path {
stroke-dasharray: 628;
stroke-dashoffset: 628;
transition: stroke-dashoffset 2s ease-out 0.5s;
}
.disruption-timeline.animate .arc-path {
stroke-dashoffset: 0;
}
/* Energy particles */
.energy-particle {
opacity: 0;
transition: opacity 0.3s ease-out;
}
.disruption-timeline.animate .energy-particle {
opacity: 1;
transition-delay: 1.5s;
}
/* Rotating ring around Today marker */
.rotating-ring {
position: absolute;
width: 80px;
height: 80px;
top: -10px;
left: -10px;
border: 2px solid transparent;
border-top-color: #7C3AED;
border-right-color: #7C3AED;
border-radius: 50%;
animation: rotateRing 3s linear infinite;
opacity: 0;
transition: opacity 0.6s ease-out 0.8s;
}
.disruption-timeline.animate .rotating-ring {
opacity: 1;
}
@keyframes rotateRing {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
/* Hide timeline connectors during animation */
.timeline-connector {
transition: opacity 0.3s ease-out;
}
.disruption-timeline.animate .timeline-connector {
opacity: 0;
}
/* Ensure timeline items are above the SVG */
.timeline-item {
position: relative;
z-index: 1;
}
/* Cookie Consent Banner Styles */
#cookie-banner {
position: fixed;
bottom: 0;
left: 0;
right: 0;
background: rgba(30, 41, 59, 0.98);
backdrop-filter: blur(20px);
color: white;
padding: 24px;
transform: translateY(100%);
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
z-index: 9999;
box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.2);
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
#cookie-banner.show {
transform: translateY(0);
}
.cookie-banner-content {
max-width: 1200px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 20px;
}
.cookie-banner-text {
font-size: 15px;
line-height: 1.6;
color: rgba(255, 255, 255, 0.9);
}
.cookie-banner-text a {
color: var(--accent-color);
text-decoration: underline;
}
.cookie-banner-actions {
display: flex;
gap: 12px;
flex-wrap: wrap;
}
.cookie-btn {
padding: 10px 20px;
border: none;
border-radius: 8px;
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: all 0.2s ease;
font-family: inherit;
}
.cookie-btn-primary {
background: var(--accent-color);
color: white;
}
.cookie-btn-primary:hover {
background: #0891b2;
transform: translateY(-1px);
}
.cookie-btn-secondary {
background: transparent;
color: white;
border: 1px solid rgba(255, 255, 255, 0.3);
}
.cookie-btn-secondary:hover {
background: rgba(255, 255, 255, 0.1);
border-color: rgba(255, 255, 255, 0.5);
}
.cookie-btn-text {
background: transparent;
color: rgba(255, 255, 255, 0.7);
text-decoration: underline;
padding: 10px;
}
.cookie-btn-text:hover {
color: white;
}
/* Cookie Preferences Modal */
#cookie-preferences-modal {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.7);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
z-index: 10000;
padding: 20px;
}
#cookie-preferences-modal.show {
opacity: 1;
visibility: visible;
}
.cookie-modal-content {
background: white;
border-radius: 16px;
max-width: 600px;
width: 100%;
max-height: 80vh;
overflow: hidden;
display: flex;
flex-direction: column;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
transform: scale(0.9);
transition: transform 0.3s ease;
}
#cookie-preferences-modal.show .cookie-modal-content {
transform: scale(1);
}
.cookie-modal-header {
padding: 24px 24px 20px;
border-bottom: 1px solid #e5e7eb;
display: flex;
justify-content: space-between;
align-items: center;
}
.cookie-modal-header h2 {
margin: 0;
font-size: 24px;
color: var(--text-primary);
}
.cookie-modal-close {
background: none;
border: none;
font-size: 24px;
cursor: pointer;
color: #6b7280;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 6px;
transition: all 0.2s ease;
}
.cookie-modal-close:hover {
background: #f3f4f6;
color: var(--text-primary);
}
.cookie-modal-body {
padding: 24px;
overflow-y: auto;
flex: 1;
}
.cookie-category {
margin-bottom: 24px;
padding-bottom: 24px;
border-bottom: 1px solid #e5e7eb;
}
.cookie-category:last-child {
border-bottom: none;
margin-bottom: 0;
padding-bottom: 0;
}
.cookie-category-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 12px;
}
.cookie-category-title {
font-size: 18px;
font-weight: 600;
color: var(--text-primary);
}
.cookie-category-description {
font-size: 14px;
color: #6b7280;
line-height: 1.6;
}
.cookie-toggle {
position: relative;
width: 48px;
height: 24px;
}
.cookie-toggle input {
opacity: 0;
width: 0;
height: 0;
}
.cookie-toggle-slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #e5e7eb;
transition: 0.3s;
border-radius: 24px;
}
.cookie-toggle-slider:before {
position: absolute;
content: "";
height: 18px;
width: 18px;
left: 3px;
bottom: 3px;
background-color: white;
transition: 0.3s;
border-radius: 50%;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.cookie-toggle input:checked + .cookie-toggle-slider {
background-color: var(--accent-color);
}
.cookie-toggle input:checked + .cookie-toggle-slider:before {
transform: translateX(24px);
}
.cookie-toggle input:disabled + .cookie-toggle-slider {
background-color: #d1d5db;
cursor: not-allowed;
}
.cookie-modal-footer {
padding: 20px 24px;
border-top: 1px solid #e5e7eb;
display: flex;
justify-content: flex-end;
gap: 12px;
}
/* Cookie Toast Notification */
.cookie-toast {
position: fixed;
bottom: 24px;
left: 50%;
transform: translateX(-50%) translateY(100px);
background: var(--text-primary);
color: white;
padding: 12px 24px;
border-radius: 8px;
font-size: 14px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
opacity: 0;
transition: all 0.3s ease;
z-index: 10001;
}
.cookie-toast.show {
transform: translateX(-50%) translateY(0);
opacity: 1;
}
html[data-theme="dark"] #cookie-banner {
background: rgba(7, 16, 29, 0.94);
color: #F8FAFC;
border-top: 1px solid rgba(148, 163, 184, 0.18);
box-shadow: 0 -12px 32px rgba(2, 6, 23, 0.42);
}
html[data-theme="dark"] .cookie-banner-text {
color: rgba(226, 232, 240, 0.9);
}
html[data-theme="dark"] .cookie-banner-text a {
color: #7DD3FC;
}
html[data-theme="dark"] .cookie-btn-secondary {
color: #F8FAFC;
border-color: rgba(148, 163, 184, 0.32);
}
html[data-theme="dark"] .cookie-btn-secondary:hover {
background: rgba(148, 163, 184, 0.12);
border-color: rgba(191, 219, 254, 0.42);
}
html[data-theme="dark"] .cookie-btn-text {
color: rgba(226, 232, 240, 0.72);
}
html[data-theme="dark"] .cookie-btn-text:hover {
color: #F8FAFC;
}
html[data-theme="dark"] #cookie-preferences-modal {
background: rgba(2, 6, 23, 0.76);
}
html[data-theme="dark"] .cookie-modal-content {
background: #0E1729;
border: 1px solid rgba(148, 163, 184, 0.18);
box-shadow: 0 24px 80px rgba(2, 6, 23, 0.58);
}
html[data-theme="dark"] .cookie-modal-header,
html[data-theme="dark"] .cookie-modal-footer,
html[data-theme="dark"] .cookie-category {
border-color: rgba(148, 163, 184, 0.16);
}
html[data-theme="dark"] .cookie-modal-close {
color: rgba(226, 232, 240, 0.72);
}
html[data-theme="dark"] .cookie-modal-close:hover {
background: rgba(148, 163, 184, 0.12);
color: #F8FAFC;
}
html[data-theme="dark"] .cookie-category-description {
color: #A6B6C8;
}
html[data-theme="dark"] .cookie-toggle-slider {
background-color: #334155;
}
html[data-theme="dark"] .cookie-toggle-slider:before {
background-color: #F8FAFC;
}
html[data-theme="dark"] .cookie-toggle input:disabled + .cookie-toggle-slider {
background-color: #475569;
}
html[data-theme="dark"] .cookie-toast {
background: #0F172A;
color: #F8FAFC;
border: 1px solid rgba(148, 163, 184, 0.18);
}
/* Responsive Design */
@media (min-width: 768px) {
.cookie-banner-content {
flex-direction: row;
align-items: center;
justify-content: space-between;
}
.cookie-banner-text {
flex: 1;
margin-right: 24px;
}
.cookie-banner-actions {
flex-shrink: 0;
}
}
@media (max-width: 640px) {
#cookie-banner {
padding: 20px 16px;
}
.cookie-banner-actions {
width: 100%;
}
.cookie-btn {
flex: 1;
justify-content: center;
font-size: 13px;
padding: 8px 16px;
}
.cookie-btn-text {
flex: none;
width: 100%;
text-align: center;
}
.cookie-modal-content {
margin: 10px;
max-height: calc(100vh - 40px);
}
}
/* Spot "How it works" list — semantic , clean visual style */
.how-spot-works-list {
counter-reset: item;
max-width: 760px;
margin: 0.75rem auto 0 auto;
padding: 0;
list-style: none;
display: grid;
row-gap: 0.35rem;
text-align: left;
}
.how-spot-works-list li {
display: grid;
grid-template-columns: 2.2rem 1fr;
align-items: start;
column-gap: 0.65rem;
padding: 0.55rem 0.7rem;
border: 1px solid rgba(15, 23, 42, 0.06);
border-radius: 12px;
background: rgba(15, 23, 42, 0.02);
line-height: 1.6;
color: var(--text-primary, #0F172A);
font-size: 1.05rem;
}
.how-spot-works-list li::before {
content: counter(item);
counter-increment: item;
width: 2rem;
height: 2rem;
border-radius: 999px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 0.95rem;
font-weight: 600;
background: linear-gradient(135deg, rgba(124, 58, 237, 0.12), rgba(99, 102, 241, 0.18));
color: #1E293B;
box-shadow: 0 8px 18px rgba(124, 58, 237, 0.12);
}
/* =====================================================
Hero Stage — "The Living Platform"
A full-bleed desktop canvas, with its own row on small screens.
Depth layers (back to front): nebula, horizon grid,
far perimeter, audit ring, 7 orbiting module-worlds
with signature motion, connection beams, rotating
facet core, multi-direction data streams, verified
response particles, and foreground bokeh.
===================================================== */
.platform-hero { position: relative; }
.hero-stage {
position: absolute;
inset: 0;
z-index: 2;
overflow: hidden;
pointer-events: none;
}
.hero-stage-canvas {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
display: block;
pointer-events: auto;
}
/* Left-column fade mask: hides the animation behind the copy column
so the text has a clean, uncluttered backdrop. Aligned to a ~52%
text-column / ~48% animation-lane split on desktop. */
.hero-stage::before {
content: '';
position: absolute;
inset: 0;
/* Text now starts near the left edge and ends by ~42% of viewport.
Mask covers through 40%, fades out by 62%, letting the animation
breathe cleanly on the right. */
background: linear-gradient(90deg,
rgba(7, 17, 31, 0.94) 0%,
rgba(7, 17, 31, 0.92) 32%,
rgba(7, 17, 31, 0.7) 42%,
rgba(7, 17, 31, 0.28) 54%,
rgba(7, 17, 31, 0) 62%);
pointer-events: none;
z-index: 3;
}
/* Soft top + bottom fade so the scene doesn't "cut" at section edges */
.hero-stage::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg,
rgba(7, 17, 31, 0.45) 0%,
rgba(7, 17, 31, 0) 20%,
rgba(7, 17, 31, 0) 80%,
rgba(7, 17, 31, 0.45) 100%);
pointer-events: none;
z-index: 3;
}
/* Hoist hero content above the canvas, and cap it tight enough
that it never bleeds into the animation lane on the right.
NOTE: the base `.hero-content` rule applies `margin: 0 auto` and
`text-align: center`, which centered the text in the viewport. We
have to explicitly override both here to left-anchor it. */
.platform-hero .hero-content {
position: relative;
z-index: 25;
max-width: min(500px, 46vw) !important;
width: auto !important;
margin: 0 !important;
padding: 0 !important;
text-align: left !important;
background: transparent !important;
border: 0 !important;
backdrop-filter: none !important;
}
/* Slightly smaller, tighter headline — avoids colliding with the
orrery on mid-width desktops while still feeling confident. */
.platform-hero .hero-title {
font-size: clamp(2.25rem, 4vw, 3.75rem) !important;
line-height: 1.05 !important;
}
.platform-hero .hero-subtitle {
font-size: clamp(1rem, 1.35vw, 1.08rem);
max-width: 460px;
}
/* The old decorative grid overlay on .platform-hero::after clashed
with the canvas grid — tone it down */
.platform-hero::after { opacity: 0.08; }
/* ---------- Homepage hero headline + CTA reveal ---------- */
.platform-hero .hero-title .title-line {
display: block;
opacity: 0;
transform: translateY(18px);
animation: heroLineRise 0.95s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}
.platform-hero .hero-title .title-line:nth-child(1) { animation-delay: 0.15s; }
.platform-hero .hero-title .title-line:nth-child(2) { animation-delay: 0.42s; }
.platform-hero .hero-title .title-highlight {
background-image: linear-gradient(90deg, #A5B4FC 0%, #7DD3FC 45%, #FDE68A 100%) !important;
background-size: 220% 100% !important;
-webkit-background-clip: text !important;
background-clip: text !important;
-webkit-text-fill-color: transparent !important;
color: transparent !important;
animation: heroHighlightShimmer 7s ease-in-out infinite !important;
filter: drop-shadow(0 0 24px rgba(125, 211, 252, 0.18));
text-shadow: none !important;
}
.platform-hero .hero-subtitle {
opacity: 0;
transform: translateY(14px);
animation: heroLineRise 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) 0.65s forwards;
}
.platform-hero .hero-cta {
opacity: 0;
transform: translateY(14px);
animation: heroLineRise 0.85s cubic-bezier(0.2, 0.8, 0.2, 1) 0.85s forwards;
}
@keyframes heroLineRise {
to { opacity: 1; transform: none; }
}
@keyframes heroHighlightShimmer {
0%, 100% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
}
/* ---------- Trust strip under CTAs ---------- */
.platform-hero .hero-trust-strip {
margin: 1.5rem 0 0;
padding: 0;
list-style: none;
display: flex;
flex-wrap: wrap;
gap: 0.55rem 1.25rem;
opacity: 0;
transform: translateY(14px);
animation: heroLineRise 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) 1.05s forwards;
}
.platform-hero .hero-trust-strip li {
display: inline-flex;
align-items: center;
gap: 7px;
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: rgba(203, 213, 225, 0.78);
white-space: nowrap;
}
.platform-hero .hero-trust-strip li::before {
content: '';
width: 5px;
height: 5px;
border-radius: 50%;
background: rgba(125, 211, 252, 0.9);
box-shadow: 0 0 8px rgba(125, 211, 252, 0.6);
}
/* ---------- Responsive tweaks ---------- */
@media (max-width: 820px) {
.platform-hero {
display: block;
min-height: auto;
padding: 128px 0 24px;
}
.platform-hero-layout {
width: 100%;
min-height: auto !important;
padding: 0 20px !important;
align-items: center;
}
.platform-hero .hero-content {
width: 100% !important;
max-width: 640px !important;
text-align: center !important;
margin: 0 auto !important;
}
.platform-hero .hero-title {
font-size: 2.25rem !important;
line-height: 1.15 !important;
}
.platform-hero .hero-subtitle { font-size: 1rem; }
.platform-hero .hero-cta { justify-content: center !important; }
.platform-hero .hero-subtitle { margin-left: auto !important; margin-right: auto !important; }
.platform-hero .hero-trust-strip { justify-content: center; gap: 0.45rem 0.9rem; }
.platform-hero .hero-trust-strip li { font-size: 0.66rem; }
/* A separate scene row prevents any animated content crossing the copy. */
.platform-hero .hero-stage {
position: relative;
inset: auto;
width: min(100%, 560px);
aspect-ratio: 1;
margin: 32px auto 0;
}
.platform-hero .hero-stage::before { display: none; }
.platform-hero .scroll-indicator {
position: relative;
left: auto;
bottom: auto;
transform: none;
margin: 16px auto 0;
}
}
@media (max-width: 767px) {
.platform-hero { padding-top: 112px; }
}
@media (max-width: 480px) {
.platform-hero .hero-title { font-size: 2rem !important; }
}
/* ---------- Theme sanity: the homepage hero is already dark by
design, so we only need a small refinement when the page itself
is in dark mode. */
html[data-theme="dark"] body.home .hero-stage::before,
html[data-theme="dark"] body.home .hero-stage::after {
mix-blend-mode: normal;
}
/* ============================================================
HOMEPAGE — APPLE-INSPIRED REFINEMENT
Scoped under body.home so these polish rules don't leak into
product-detail pages. Whitespace, restraint, confident type.
============================================================ */
body.home {
--nav-bg: rgba(255, 255, 255, 0.82);
--nav-border: rgba(226, 232, 240, 0.84);
--nav-shadow: 0 14px 34px rgba(15, 23, 42, 0.1);
--nav-bg-scrolled: rgba(255, 255, 255, 0.94);
--nav-shadow-scrolled: 0 16px 38px rgba(15, 23, 42, 0.12);
--nav-icon-color: #1E3A8A;
--ap-bg: #FFFFFF;
--ap-bg-soft: #F5F5F7;
--ap-bg-panel: #FBFBFD;
--ap-bg-elevated: #FFFFFF;
--ap-ink: #1D1D1F;
--ap-ink-soft: #515154;
--ap-ink-faint: #86868B;
--ap-line: rgba(0, 0, 0, 0.08);
--ap-line-soft: rgba(0, 0, 0, 0.05);
--ap-navy: #1E3A8A;
--ap-navy-hover: #17307A;
--ap-navy-soft: #EDF1FA;
--ap-button-secondary-bg: rgba(255, 255, 255, 0.6);
--ap-button-secondary-border: rgba(30, 58, 138, 0.3);
--ap-button-secondary-text: #1E3A8A;
--ap-status-old-bg: #FDECEC;
--ap-status-old-text: #D64545;
--ap-status-new-bg: #E8F5EC;
--ap-status-new-text: #1FA25C;
--ap-visual-line: rgba(29, 29, 31, 0.22);
--ap-visual-border-soft: rgba(0, 0, 0, 0.06);
--ap-visual-ring: rgba(255, 255, 255, 0.9);
--ap-ease: cubic-bezier(0.25, 0.8, 0.25, 1);
--ap-radius: 20px;
--ap-radius-lg: 28px;
--ap-shadow: 0 1px 2px rgba(0, 0, 0, 0.03), 0 6px 28px rgba(15, 23, 42, 0.06);
--ap-shadow-hi: 0 2px 4px rgba(0, 0, 0, 0.04), 0 18px 48px rgba(15, 23, 42, 0.14);
background: var(--ap-bg);
}
html[data-theme="dark"] body.home {
--nav-bg: rgba(5, 12, 22, 0.9);
--nav-border: rgba(148, 163, 184, 0.16);
--nav-shadow: 0 18px 42px rgba(2, 6, 23, 0.44);
--nav-bg-scrolled: var(--nav-bg);
--nav-shadow-scrolled: var(--nav-shadow);
--ap-bg: #07101D;
--ap-bg-soft: #0B1524;
--ap-bg-panel: #101C2F;
--ap-bg-elevated: #0E192B;
--ap-ink: #F5F7FB;
--ap-ink-soft: #BBC9DA;
--ap-ink-faint: #8FA1B7;
--ap-line: rgba(148, 163, 184, 0.18);
--ap-line-soft: rgba(148, 163, 184, 0.12);
--ap-navy: #8DBBFF;
--ap-navy-hover: #76A8F7;
--ap-navy-soft: rgba(96, 165, 250, 0.16);
--ap-button-secondary-bg: rgba(15, 23, 42, 0.64);
--ap-button-secondary-border: rgba(141, 187, 255, 0.28);
--ap-button-secondary-text: #DBEAFE;
--ap-status-old-bg: rgba(127, 29, 29, 0.26);
--ap-status-old-text: #FCA5A5;
--ap-status-new-bg: rgba(20, 83, 45, 0.28);
--ap-status-new-text: #86EFAC;
--ap-visual-line: rgba(226, 232, 240, 0.24);
--ap-visual-border-soft: rgba(148, 163, 184, 0.14);
--ap-visual-ring: rgba(7, 16, 29, 0.92);
--ap-shadow: 0 1px 2px rgba(2, 6, 23, 0.28), 0 16px 38px rgba(2, 6, 23, 0.32);
--ap-shadow-hi: 0 2px 6px rgba(2, 6, 23, 0.34), 0 26px 60px rgba(2, 6, 23, 0.46);
background: var(--ap-bg);
}
body.home nav .menubar {
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
}
html[data-theme="dark"] body.home nav .menubar .menubar-logo {
filter: none;
}
/* Remove heavy section dividers — spacing does the work now */
body.home .section-divider { display: none !important; }
/* Unified vertical rhythm across every section */
body.home .product-strip,
body.home .transparency-section,
body.home .discover-section,
body.home .about-section,
body.home .home-labs-section,
body.home .industries-section,
body.home .contact-section {
padding: clamp(4.5rem, 10vh, 8rem) 0 !important;
background: var(--ap-bg);
position: relative;
}
/* Alternating restful panels for scroll rhythm */
body.home .transparency-section,
body.home .about-section {
background: var(--ap-bg-soft);
}
/* (no .container overrides — let the site's default container rules
handle width and padding. Overriding them broke the product grid.) */
/* ---------- Section headers: confident & centered ---------- */
body.home .section-header {
text-align: center;
max-width: 820px;
margin: 0 auto clamp(3rem, 6vh, 5rem) !important;
padding: 0 1rem;
}
body.home .section-title {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Display', sans-serif !important;
font-size: clamp(2rem, 3.4vw, 3.25rem) !important;
font-weight: 300 !important;
line-height: 1.08 !important;
letter-spacing: -0.022em !important;
color: var(--ap-ink) !important;
margin: 0 0 1rem !important;
background: none !important;
-webkit-text-fill-color: var(--ap-ink) !important;
}
body.home .section-subtitle {
font-size: clamp(1.05rem, 1.35vw, 1.2rem) !important;
line-height: 1.55 !important;
color: var(--ap-ink-soft) !important;
font-weight: 400 !important;
max-width: 720px;
margin: 0 auto !important;
}
/* ==========================================================
Product Strip — living cards
Two-zone card: tinted visual top, clean text bottom.
Each product has its own color personality and signature
micro-animation that mirrors what the product actually does.
========================================================== */
body.home .product-strip { background: var(--ap-bg); }
body.home .product-card {
--pc-color: var(--ap-navy);
--pc-color-soft: rgba(30, 58, 138, 0.06);
--pc-color-mid: rgba(30, 58, 138, 0.14);
background: var(--ap-bg-elevated) !important;
border: 1px solid var(--ap-line) !important;
border-radius: var(--ap-radius-lg) !important;
padding: 0 !important;
box-shadow: var(--ap-shadow) !important;
-webkit-backdrop-filter: none !important;
backdrop-filter: none !important;
overflow: hidden !important;
text-decoration: none !important;
color: inherit !important;
display: flex !important;
flex-direction: column !important;
transition:
transform 0.55s cubic-bezier(0.2, 0.85, 0.25, 1.05),
box-shadow 0.55s var(--ap-ease),
border-color 0.4s var(--ap-ease) !important;
}
body.home .product-card:hover {
transform: translateY(-6px);
box-shadow: var(--ap-shadow-hi) !important;
border-color: var(--pc-color-mid) !important;
}
/* --- Visual zone --- */
body.home .product-card .card-visual {
position: relative;
height: 124px;
overflow: hidden;
background:
radial-gradient(circle at 20% 10%, var(--pc-color-soft) 0%, transparent 55%),
linear-gradient(160deg, var(--pc-color-soft) 0%, rgba(255,255,255,0) 65%);
border-bottom: 1px solid var(--ap-line-soft);
transition: background 0.55s var(--ap-ease);
}
body.home .product-card:hover .card-visual {
background:
radial-gradient(circle at 20% 10%, var(--pc-color-mid) 0%, transparent 60%),
linear-gradient(160deg, var(--pc-color-mid) 0%, rgba(255,255,255,0) 70%);
}
/* Each visual wrapper is centered in the visual zone */
body.home .product-card .vis {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
}
/* Tiny top-right accent pill (product color) */
body.home .product-card .card-visual::after {
content: '';
position: absolute;
top: 14px;
right: 14px;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--pc-color);
box-shadow: 0 0 0 0 var(--pc-color-mid);
opacity: 0.8;
animation: pcAccentPulse 2.8s ease-in-out infinite;
}
@keyframes pcAccentPulse {
0%, 100% { box-shadow: 0 0 0 0 var(--pc-color-mid); opacity: 0.8; }
50% { box-shadow: 0 0 0 6px transparent; opacity: 1; }
}
/* --- Text body zone --- */
body.home .product-card .card-body {
padding: 1.4rem 1.4rem 1.25rem;
flex: 1;
display: flex;
flex-direction: column;
}
body.home .product-card h3 {
font-size: 1.2rem !important;
font-weight: 500 !important;
letter-spacing: -0.015em !important;
color: var(--ap-ink) !important;
margin: 0 0 0.45rem !important;
}
body.home .product-card p {
font-size: 0.92rem !important;
color: var(--ap-ink-soft) !important;
line-height: 1.55 !important;
margin: 0 0 1rem !important;
flex: 1;
}
body.home .product-card .product-link {
color: var(--pc-color) !important;
font-weight: 500 !important;
font-size: 0.92rem !important;
transition: letter-spacing 0.3s var(--ap-ease);
align-self: flex-start;
}
body.home .product-card:hover .product-link { letter-spacing: 0.02em; }
/* ---------- Product color themes ---------- */
body.home .product-card.card-discovery {
--pc-color: #3B82F6;
--pc-color-soft: rgba(59, 130, 246, 0.08);
--pc-color-mid: rgba(59, 130, 246, 0.22);
}
body.home .product-card.card-spot {
--pc-color: #8B5CF6;
--pc-color-soft: rgba(139, 92, 246, 0.09);
--pc-color-mid: rgba(139, 92, 246, 0.22);
}
body.home .product-card.card-reasoning {
--pc-color: #B8763B;
--pc-color-soft: rgba(184, 118, 59, 0.1);
--pc-color-mid: rgba(184, 118, 59, 0.24);
}
body.home .product-card.card-dsar {
--pc-color: #D97706;
--pc-color-soft: rgba(245, 158, 11, 0.1);
--pc-color-mid: rgba(245, 158, 11, 0.24);
}
body.home .product-card.card-collab {
--pc-color: #0D9488;
--pc-color-soft: rgba(45, 212, 191, 0.12);
--pc-color-mid: rgba(45, 212, 191, 0.28);
}
body.home .product-card.card-sign {
--pc-color: #EA580C;
--pc-color-soft: rgba(251, 146, 60, 0.1);
--pc-color-mid: rgba(251, 146, 60, 0.24);
}
body.home .product-card.card-send {
--pc-color: #0284C7;
--pc-color-soft: rgba(56, 189, 248, 0.1);
--pc-color-mid: rgba(56, 189, 248, 0.24);
}
body.home .product-card.card-migrate {
--pc-color: #DB2777;
--pc-color-soft: rgba(236, 72, 153, 0.09);
--pc-color-mid: rgba(236, 72, 153, 0.22);
}
/* ==========================================================
Living visuals — each one is ~72×72px of CSS/SVG art
========================================================== */
/* ---- 1. eDiscovery: radar sweep inside a circle ---- */
body.home .vis-discovery {
width: 78px; height: 78px; margin: auto;
position: relative;
}
body.home .vis-d-ring {
position: absolute; inset: 0;
border-radius: 50%;
border: 1.5px solid var(--pc-color);
opacity: 0.4;
}
body.home .vis-d-ring-inner {
inset: 18px;
opacity: 0.25;
}
body.home .vis-d-scan {
position: absolute;
top: 50%; left: 50%;
width: 39px; height: 2px;
background: linear-gradient(90deg, transparent, var(--pc-color));
transform-origin: left center;
animation: visDiscScan 3s linear infinite;
border-radius: 2px;
}
body.home .product-card.card-discovery:hover .vis-d-scan {
animation-duration: 1.4s;
}
body.home .vis-d-target {
position: absolute;
top: 22px; left: 52px;
width: 6px; height: 6px;
border-radius: 50%;
background: var(--pc-color);
box-shadow: 0 0 12px var(--pc-color);
opacity: 0;
animation: visDiscTarget 3s linear infinite;
}
@keyframes visDiscScan {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
@keyframes visDiscTarget {
0%, 10% { opacity: 0; }
14% { opacity: 1; }
40% { opacity: 0.3; }
60% { opacity: 0; }
100% { opacity: 0; }
}
/* ---- 2. Spot: concentric pulse rings ---- */
body.home .vis-spot {
width: 78px; height: 78px; position: relative; margin: auto;
}
body.home .vis-s-core {
position: absolute; top: 50%; left: 50%;
width: 12px; height: 12px; margin: -6px 0 0 -6px;
border-radius: 50%;
background: var(--pc-color);
box-shadow: 0 0 10px var(--pc-color);
}
body.home .vis-s-ring {
position: absolute; top: 50%; left: 50%;
width: 12px; height: 12px; margin: -6px 0 0 -6px;
border-radius: 50%;
border: 1.5px solid var(--pc-color);
animation: visSpotPulse 2.4s cubic-bezier(0.2, 0.8, 0.2, 1) infinite;
opacity: 0;
}
body.home .vis-s-ring:nth-child(2) { animation-delay: 0s; }
body.home .vis-s-ring:nth-child(3) { animation-delay: 0.8s; }
body.home .vis-s-ring:nth-child(4) { animation-delay: 1.6s; }
body.home .product-card.card-spot:hover .vis-s-ring {
animation-duration: 1.2s;
}
@keyframes visSpotPulse {
0% { transform: scale(0.7); opacity: 0.85; }
80% { opacity: 0; }
100% { transform: scale(6); opacity: 0; }
}
/* ---- 3. Reasoning Canvas: a decision graph becoming a record ---- */
body.home .vis-reasoning {
width: 130px;
height: 82px;
margin: auto;
}
body.home .vis-rc-svg {
width: 100%;
height: 100%;
overflow: visible;
}
body.home .vis-rc-edge {
fill: none;
stroke: var(--pc-color);
stroke-width: 1.7;
stroke-linecap: round;
stroke-dasharray: 76;
stroke-dashoffset: 76;
opacity: 0.72;
animation: visReasonEdge 2.8s ease-in-out infinite;
}
body.home .vis-rc-e1 { animation-delay: 0s; }
body.home .vis-rc-e2 { animation-delay: 0.25s; }
body.home .vis-rc-e3 { animation-delay: 0.5s; }
body.home .vis-rc-e4 { animation-delay: 0.75s; }
body.home .vis-rc-node {
fill: var(--ap-bg-panel);
stroke: var(--pc-color);
stroke-width: 1.6;
filter: drop-shadow(0 3px 8px rgba(184, 118, 59, 0.14));
}
body.home .vis-rc-trigger,
body.home .vis-rc-action {
fill: var(--pc-color-soft);
}
body.home .vis-rc-check {
fill: none;
stroke: var(--pc-color);
stroke-width: 2.4;
stroke-linecap: round;
stroke-linejoin: round;
stroke-dasharray: 24;
stroke-dashoffset: 24;
animation: visReasonCheck 2.8s ease-in-out infinite 0.9s;
}
body.home .product-card.card-reasoning:hover .vis-rc-edge,
body.home .product-card.card-reasoning:hover .vis-rc-check {
animation-duration: 1.6s;
}
@keyframes visReasonEdge {
0% { stroke-dashoffset: 76; opacity: 0.2; }
45% { stroke-dashoffset: 0; opacity: 0.78; }
82% { stroke-dashoffset: 0; opacity: 0.78; }
100% { stroke-dashoffset: -76; opacity: 0.18; }
}
@keyframes visReasonCheck {
0% { stroke-dashoffset: 24; opacity: 0; }
42% { stroke-dashoffset: 0; opacity: 1; }
84% { stroke-dashoffset: 0; opacity: 1; }
100% { stroke-dashoffset: -24; opacity: 0; }
}
/* ---- 4. DSAR & FOI: "find the subject's data, redact everyone else's"
------------------------------------------------------------------
Story: a record file with the subject's identity at the top.
One line glows amber — that's the requester's data, found.
One line has a black redaction bar with a light-beam sweeping
across it — other people's data being protected.
---- */
body.home .vis-dsar {
width: 98px;
margin: auto;
filter: drop-shadow(0 4px 12px rgba(217, 119, 6, 0.12));
}
body.home .vis-r-doc {
display: flex;
flex-direction: column;
gap: 6px;
padding: 10px 12px;
background: var(--ap-bg-panel);
border: 1px solid var(--pc-color-mid);
border-radius: 8px;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
}
/* Subject header — avatar + name bar — signals "this record is about
a specific person" (the data subject). */
body.home .vis-r-header {
display: flex;
align-items: center;
gap: 6px;
padding-bottom: 5px;
margin-bottom: 2px;
border-bottom: 1px solid var(--ap-visual-border-soft);
}
body.home .vis-r-avatar {
width: 12px;
height: 12px;
border-radius: 50%;
background: var(--pc-color);
flex-shrink: 0;
box-shadow: 0 0 0 2px var(--ap-visual-ring), 0 0 8px var(--pc-color-mid);
}
body.home .vis-r-name {
flex: 1;
height: 4px;
background: var(--pc-color);
opacity: 0.55;
border-radius: 2px;
}
/* Body text lines */
body.home .vis-r-line {
display: block;
height: 4px;
background: var(--ap-visual-line);
border-radius: 2px;
}
body.home .vis-r-line-short { width: 62%; }
/* The "your data found" highlight — amber pulse */
body.home .vis-r-highlight {
background: var(--pc-color);
animation: visDsarHighlight 3s ease-in-out infinite;
}
body.home .product-card.card-dsar:hover .vis-r-highlight {
animation-duration: 1.5s;
}
@keyframes visDsarHighlight {
0%, 15% { opacity: 0.2; box-shadow: 0 0 0 0 var(--pc-color-mid); }
45% { opacity: 1; box-shadow: 0 0 0 3px var(--pc-color-mid); }
80% { opacity: 1; box-shadow: 0 0 0 0 transparent; }
100% { opacity: 0.2; box-shadow: 0 0 0 0 transparent; }
}
/* The "other people's data, redacted" bar — black bar with a light
beam sweeping across to signal the redaction is live/ongoing. */
body.home .vis-r-redact {
background: #1D1D1F;
position: relative;
overflow: hidden;
}
body.home .vis-r-redact::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(90deg,
transparent 0%,
rgba(255, 255, 255, 0.65) 45%,
rgba(255, 255, 255, 0.65) 55%,
transparent 100%);
transform: translateX(-100%);
animation: visDsarSweep 3s ease-in-out infinite;
}
body.home .product-card.card-dsar:hover .vis-r-redact::after {
animation-duration: 1.5s;
}
@keyframes visDsarSweep {
0%, 20% { transform: translateX(-100%); }
70% { transform: translateX(100%); }
100% { transform: translateX(100%); }
}
/* ---- 5. Collaborate: 3 orbiting avatar dots with arcs ---- */
body.home .vis-collab {
width: 120px; height: 80px; margin: auto;
position: relative;
}
body.home .vis-c-arcs {
position: absolute; inset: 0;
width: 100%; height: 100%;
}
body.home .vis-c-arcs path {
fill: none;
stroke: var(--pc-color);
stroke-width: 1.4;
stroke-linecap: round;
stroke-dasharray: 3 6;
animation: visCollabDash 4s linear infinite;
opacity: 0.45;
}
body.home .vis-c-dot {
position: absolute;
width: 12px; height: 12px;
border-radius: 50%;
background: var(--pc-color);
box-shadow: 0 0 0 2px var(--ap-visual-ring), 0 2px 6px rgba(0, 0, 0, 0.15);
animation: visCollabBob 2.4s ease-in-out infinite;
}
body.home .vis-c-dot-a { left: 18px; top: 44px; }
body.home .vis-c-dot-b { left: 54px; top: 16px; animation-delay: 0.4s; }
body.home .vis-c-dot-c { left: 90px; top: 44px; animation-delay: 0.8s; }
body.home .product-card.card-collab:hover .vis-c-arcs path {
animation-duration: 1.8s;
opacity: 0.7;
}
@keyframes visCollabDash {
to { stroke-dashoffset: -36; }
}
@keyframes visCollabBob {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-3px); }
}
/* ---- 6. Simply Sign: drawing checkmark ---- */
body.home .vis-sign {
width: 82px; height: 82px; margin: auto;
}
body.home .vis-sg-svg {
width: 100%; height: 100%;
overflow: visible;
}
body.home .vis-sg-circle {
fill: none;
stroke: var(--pc-color);
stroke-width: 1.5;
opacity: 0.3;
}
body.home .vis-sg-check {
fill: none;
stroke: var(--pc-color);
stroke-width: 3;
stroke-linecap: round;
stroke-linejoin: round;
stroke-dasharray: 56;
stroke-dashoffset: 56;
animation: visSignDraw 3s ease-in-out infinite;
}
body.home .product-card.card-sign:hover .vis-sg-check {
animation-duration: 1.6s;
}
@keyframes visSignDraw {
0% { stroke-dashoffset: 56; }
45% { stroke-dashoffset: 0; }
85% { stroke-dashoffset: 0; opacity: 1; }
100% { stroke-dashoffset: -56; opacity: 0; }
}
/* ---- 7. Simply Send: paper-plane trail ---- */
body.home .vis-send {
width: 130px; height: 80px; margin: auto;
}
body.home .vis-sn-svg {
width: 100%; height: 100%;
}
body.home .vis-sn-trail {
fill: none;
stroke: var(--pc-color);
stroke-width: 1.6;
stroke-linecap: round;
stroke-dasharray: 60;
stroke-dashoffset: 60;
opacity: 0.6;
animation: visSendTrail 2.4s ease-out infinite;
}
body.home .vis-sn-t1 { animation-delay: 0s; }
body.home .vis-sn-t2 { animation-delay: 0.25s; stroke-dasharray: 50; stroke-dashoffset: 50; }
body.home .vis-sn-t3 { animation-delay: 0.5s; stroke-dasharray: 50; stroke-dashoffset: 50; }
body.home .vis-sn-plane {
fill: var(--pc-color);
stroke: none;
animation: visSendPlane 2.4s ease-out infinite;
}
body.home .product-card.card-send:hover .vis-sn-trail,
body.home .product-card.card-send:hover .vis-sn-plane {
animation-duration: 1.4s;
}
@keyframes visSendTrail {
0% { stroke-dashoffset: 60; opacity: 0; }
20% { opacity: 0.75; }
60% { stroke-dashoffset: 0; opacity: 0.75; }
100% { stroke-dashoffset: -60; opacity: 0; }
}
@keyframes visSendPlane {
0%, 20% { transform: translateX(-40px); opacity: 0; }
35% { opacity: 1; }
85% { transform: translateX(0); opacity: 1; }
100% { transform: translateX(20px); opacity: 0; }
}
/* ---- 8. Migrate: content flowing between two archive boxes ---- */
body.home .vis-migrate {
width: 148px; height: 72px; margin: auto;
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
}
body.home .vis-m-box {
width: 36px; height: 48px;
background: var(--ap-bg-panel);
border: 1px solid var(--pc-color-mid);
border-radius: 6px;
display: flex;
flex-direction: column;
justify-content: center;
gap: 4px;
padding: 0 6px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.04);
}
body.home .vis-m-box span {
display: block;
height: 3px;
background: var(--pc-color);
border-radius: 2px;
opacity: 0.5;
}
body.home .vis-m-box-src span:nth-child(1) { animation: visMFade 3s ease-in-out infinite 0s; }
body.home .vis-m-box-src span:nth-child(2) { animation: visMFade 3s ease-in-out infinite 0.3s; }
body.home .vis-m-box-src span:nth-child(3) { animation: visMFade 3s ease-in-out infinite 0.6s; }
body.home .vis-m-box-dst span:nth-child(1) { animation: visMAppear 3s ease-in-out infinite 1.2s; opacity: 0.1; }
body.home .vis-m-box-dst span:nth-child(2) { animation: visMAppear 3s ease-in-out infinite 1.5s; opacity: 0.1; }
body.home .vis-m-box-dst span:nth-child(3) { animation: visMAppear 3s ease-in-out infinite 1.8s; opacity: 0.1; }
body.home .vis-m-stream {
position: relative;
width: 60px;
height: 2px;
background: linear-gradient(90deg, var(--pc-color-mid), var(--pc-color-soft));
border-radius: 2px;
overflow: visible;
display: flex;
}
body.home .vis-m-stream span {
position: absolute;
top: 50%; left: 0;
width: 8px; height: 8px; margin: -4px 0 0 0;
border-radius: 50%;
background: var(--pc-color);
box-shadow: 0 0 8px var(--pc-color);
animation: visMStream 2s linear infinite;
opacity: 0;
}
body.home .vis-m-stream span:nth-child(1) { animation-delay: 0s; }
body.home .vis-m-stream span:nth-child(2) { animation-delay: 0.5s; }
body.home .vis-m-stream span:nth-child(3) { animation-delay: 1s; }
body.home .vis-m-stream span:nth-child(4) { animation-delay: 1.5s; }
body.home .product-card.card-migrate:hover .vis-m-stream span {
animation-duration: 1.2s;
}
@keyframes visMStream {
0% { left: 0; opacity: 0; }
15% { opacity: 1; }
85% { opacity: 1; }
100% { left: 52px; opacity: 0; }
}
@keyframes visMFade {
0%, 60% { opacity: 0.6; }
80% { opacity: 0.15; }
100% { opacity: 0.6; }
}
@keyframes visMAppear {
0%, 30% { opacity: 0.1; }
50% { opacity: 0.6; }
100% { opacity: 0.6; }
}
/* ========================================================
Hover-only animations on product cards
----
By default, pause every internal animation so the page feels
calm: only the hovered card's visual comes alive. Problematic
"invisible at frame 0" states (checkmark undrawn, trails empty,
plane off-screen) get an explicit rest-visible override below.
======================================================== */
/* Pause everything at rest */
body.home .product-card .vis-d-scan,
body.home .product-card .vis-d-target,
body.home .product-card .vis-s-ring,
body.home .product-card .vis-rc-edge,
body.home .product-card .vis-rc-check,
body.home .product-card .vis-r-highlight,
body.home .product-card .vis-r-redact::after,
body.home .product-card .vis-c-arcs path,
body.home .product-card .vis-c-dot,
body.home .product-card .vis-sg-check,
body.home .product-card .vis-sn-trail,
body.home .product-card .vis-sn-plane,
body.home .product-card .vis-m-box-src span,
body.home .product-card .vis-m-box-dst span,
body.home .product-card .vis-m-stream span,
body.home .product-card .card-visual::after {
animation-play-state: paused !important;
}
/* Resume only when THIS card is hovered */
body.home .product-card:hover .vis-d-scan,
body.home .product-card:hover .vis-d-target,
body.home .product-card:hover .vis-s-ring,
body.home .product-card:hover .vis-rc-edge,
body.home .product-card:hover .vis-rc-check,
body.home .product-card:hover .vis-r-highlight,
body.home .product-card:hover .vis-r-redact::after,
body.home .product-card:hover .vis-c-arcs path,
body.home .product-card:hover .vis-c-dot,
body.home .product-card:hover .vis-sg-check,
body.home .product-card:hover .vis-sn-trail,
body.home .product-card:hover .vis-sn-plane,
body.home .product-card:hover .vis-m-box-src span,
body.home .product-card:hover .vis-m-box-dst span,
body.home .product-card:hover .vis-m-stream span,
body.home .product-card:hover .card-visual::after {
animation-play-state: running !important;
}
/* Explicit rest states for animations whose frame-0 is invisible —
these override the paused-at-0 rendering so the idle card still
looks complete. Only applied when the card is NOT hovered. */
/* Sign — check shown fully drawn at rest */
body.home .product-card.card-sign:not(:hover) .vis-sg-check {
stroke-dashoffset: 0 !important;
opacity: 1 !important;
}
/* Send — trails fully drawn, plane at final position at rest */
body.home .product-card.card-send:not(:hover) .vis-sn-trail {
stroke-dashoffset: 0 !important;
opacity: 0.7 !important;
}
body.home .product-card.card-send:not(:hover) .vis-sn-plane {
transform: translateX(0) !important;
opacity: 1 !important;
}
/* Spot — rings hidden at rest (just the core dot shows); hover blooms them */
body.home .product-card.card-spot:not(:hover) .vis-s-ring {
opacity: 0 !important;
}
/* Reasoning Canvas — full graph visible at rest */
body.home .product-card.card-reasoning:not(:hover) .vis-rc-edge,
body.home .product-card.card-reasoning:not(:hover) .vis-rc-check {
stroke-dashoffset: 0 !important;
opacity: 0.76 !important;
}
/* Migrate — packets hidden at rest; boxes at their natural fill */
body.home .product-card.card-migrate:not(:hover) .vis-m-stream span {
opacity: 0 !important;
}
body.home .product-card.card-migrate:not(:hover) .vis-m-box-src span,
body.home .product-card.card-migrate:not(:hover) .vis-m-box-dst span {
opacity: 0.6 !important;
}
/* DSAR — highlight at rest is muted; hover brings the pulse */
body.home .product-card.card-dsar:not(:hover) .vis-r-highlight {
opacity: 0.85 !important;
}
/* Collaborate — arcs static at rest */
body.home .product-card.card-collab:not(:hover) .vis-c-arcs path {
stroke-dashoffset: 0 !important;
opacity: 0.45 !important;
}
/* Discovery — scan line static pointing right at rest */
body.home .product-card.card-discovery:not(:hover) .vis-d-scan {
transform: rotate(40deg) !important;
}
body.home .product-card.card-discovery:not(:hover) .vis-d-target {
opacity: 0 !important;
}
/* ---- Reduced motion: pause animations, keep visuals static ---- */
@media (prefers-reduced-motion: reduce) {
body.home .vis-d-scan,
body.home .vis-d-target,
body.home .vis-s-ring,
body.home .vis-rc-edge,
body.home .vis-rc-check,
body.home .vis-r-highlight,
body.home .vis-r-redact::after,
body.home .vis-c-arcs path,
body.home .vis-c-dot,
body.home .vis-sg-check,
body.home .vis-sn-trail,
body.home .vis-sn-plane,
body.home .vis-m-box-src span,
body.home .vis-m-box-dst span,
body.home .vis-m-stream span,
body.home .product-card .card-visual::after {
animation: none !important;
}
body.home .vis-sg-check { stroke-dashoffset: 0; }
body.home .vis-d-target { opacity: 0.8; }
body.home .vis-r-highlight { opacity: 0.85; }
}
/* ---------- How It Works: 3-step cards ---------- */
body.home .discover-section { background: var(--ap-bg); }
/* =====================================================================
How It Works — 3 workflow-step cards with living icons
Blue → Violet → Emerald color progression (gather → review → finish)
===================================================================== */
body.home .discover-card {
/* Per-card tokens (overridden below by step modifier) */
--dc-accent: var(--ap-navy);
--dc-tint: var(--ap-navy-soft);
--dc-tint-2: rgba(30, 58, 138, 0.2);
background: var(--ap-bg-elevated) !important;
border: 1px solid var(--ap-line) !important;
border-radius: var(--ap-radius-lg) !important;
padding: 2.5rem 2rem !important;
box-shadow: var(--ap-shadow) !important;
transition:
transform 0.5s cubic-bezier(0.2, 0.85, 0.25, 1.05),
box-shadow 0.5s var(--ap-ease),
border-color 0.4s var(--ap-ease) !important;
position: relative !important;
overflow: hidden !important;
text-align: left !important;
}
body.home .discover-card:hover {
transform: translateY(-5px);
box-shadow: var(--ap-shadow-hi) !important;
border-color: var(--dc-tint-2) !important;
}
body.home .discover-card .card-icon {
width: 60px !important;
height: 60px !important;
border-radius: 16px !important;
background: var(--dc-tint) !important;
color: var(--dc-accent) !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
margin-bottom: 1.5rem !important;
padding: 0 !important;
transition: background 0.4s var(--ap-ease), transform 0.5s var(--ap-ease);
}
body.home .discover-card:hover .card-icon {
background: var(--dc-tint-2) !important;
transform: scale(1.03);
}
body.home .discover-card .card-icon .dc-vis {
width: 36px !important;
height: 36px !important;
color: var(--dc-accent) !important;
stroke: currentColor !important;
overflow: visible;
}
body.home .discover-card h3 {
font-size: 1.4rem !important;
font-weight: 500 !important;
letter-spacing: -0.015em !important;
color: var(--ap-ink) !important;
margin: 0 0 0.75rem !important;
}
body.home .discover-card p {
font-size: 1rem !important;
line-height: 1.6 !important;
color: var(--ap-ink-soft) !important;
margin: 0 !important;
}
/* ---- Per-step color personalities ---- */
body.home .discover-card.step-1 {
--dc-accent: #3B82F6; /* blue — starting / gathering */
--dc-tint: rgba(59, 130, 246, 0.08);
--dc-tint-2: rgba(59, 130, 246, 0.22);
}
body.home .discover-card.step-2 {
--dc-accent: #8B5CF6; /* violet — reviewing / processing */
--dc-tint: rgba(139, 92, 246, 0.09);
--dc-tint-2: rgba(139, 92, 246, 0.22);
}
body.home .discover-card.step-3 {
--dc-accent: #10B981; /* emerald — finished / shipped */
--dc-tint: rgba(16, 185, 129, 0.1);
--dc-tint-2: rgba(16, 185, 129, 0.24);
}
/* =====================================================================
Signature animations — one per workflow step
===================================================================== */
/* ---- Step 1: Bring together — inputs converge into the hub ---- */
body.home .dc1-item {
transform-box: fill-box;
transform-origin: center;
animation: dc1Converge 3s ease-in-out infinite;
}
body.home .dc1-a { animation-delay: 0s; }
body.home .dc1-b { animation-delay: 0.2s; }
body.home .dc1-c { animation-delay: 0.4s; }
body.home .dc1-d { animation-delay: 0.6s; }
body.home .discover-card.step-1:hover .dc1-item { animation-duration: 1.8s; }
@keyframes dc1Converge {
0%, 5% { transform: translate(0, 0) scale(1); opacity: 1; }
55%, 60% { opacity: 0; }
61% { transform: translate(var(--dx, 0), var(--dy, 0)) scale(0.4); opacity: 0; }
100% { transform: translate(0, 0) scale(1); opacity: 1; }
}
/* Per-corner delta so each item converges from its own direction */
body.home .dc1-a { --dx: 14px; --dy: 14px; }
body.home .dc1-b { --dx: -14px; --dy: 14px; }
body.home .dc1-c { --dx: 14px; --dy: -14px; }
body.home .dc1-d { --dx: -14px; --dy: -14px; }
/* ---- Step 2: Work with evidence — review beam sweeps, audit ticks fill ---- */
body.home .dc2-beam {
animation: dc2Beam 4s ease-in-out infinite;
}
body.home .discover-card.step-2:hover .dc2-beam { animation-duration: 2.2s; }
@keyframes dc2Beam {
0%, 5% { transform: translateY(0); opacity: 0.28; }
25% { transform: translateY(7px); opacity: 0.34; }
50% { transform: translateY(14px); opacity: 0.34; }
75% { transform: translateY(21px); opacity: 0.34; }
95%, 100%{ transform: translateY(21px); opacity: 0; }
}
body.home .dc2-tick {
transform-box: fill-box;
transform-origin: center;
transform: scale(0);
opacity: 0;
animation: dc2Tick 4s ease-in-out infinite;
}
body.home .dc2-tick-1 { animation-delay: 0s; }
body.home .dc2-tick-2 { animation-delay: 1s; }
body.home .dc2-tick-3 { animation-delay: 2s; }
body.home .dc2-tick-4 { animation-delay: 3s; }
body.home .discover-card.step-2:hover .dc2-tick { animation-duration: 2.2s; }
@keyframes dc2Tick {
0%, 2% { transform: scale(0); opacity: 0; }
8% { transform: scale(1.2); opacity: 1; }
12% { transform: scale(1); opacity: 1; }
88% { transform: scale(1); opacity: 1; }
100% { transform: scale(1); opacity: 0; }
}
/* ---- Step 3: Finish — approval check draws, seal radiates ---- */
body.home .dc3-check {
stroke-dasharray: 28;
stroke-dashoffset: 28;
animation: dc3Check 3.4s ease-in-out infinite;
}
body.home .dc3-seal {
transform-box: fill-box;
transform-origin: center;
animation: dc3Seal 3.4s ease-in-out infinite;
}
body.home .dc3-pulse {
transform-box: fill-box;
transform-origin: center;
animation: dc3Pulse 3.4s ease-out infinite;
}
body.home .discover-card.step-3:hover .dc3-check,
body.home .discover-card.step-3:hover .dc3-seal,
body.home .discover-card.step-3:hover .dc3-pulse { animation-duration: 1.9s; }
@keyframes dc3Check {
0%, 15% { stroke-dashoffset: 28; }
45% { stroke-dashoffset: 0; }
90% { stroke-dashoffset: 0; opacity: 1; }
100% { stroke-dashoffset: 0; opacity: 1; }
}
@keyframes dc3Seal {
0%, 15% { transform: scale(0.85); }
40% { transform: scale(1.06); }
55% { transform: scale(1); }
100% { transform: scale(1); }
}
@keyframes dc3Pulse {
0%, 45% { transform: scale(1); opacity: 0; }
50% { transform: scale(1); opacity: 0.6; }
100% { transform: scale(2.1); opacity: 0; }
}
/* Reduced-motion guard */
@media (prefers-reduced-motion: reduce) {
body.home .dc1-item,
body.home .dc2-beam,
body.home .dc2-tick,
body.home .dc3-check,
body.home .dc3-seal,
body.home .dc3-pulse {
animation: none !important;
}
body.home .dc1-item { opacity: 1; transform: none; }
body.home .dc2-tick { transform: scale(1); opacity: 1; }
body.home .dc3-check { stroke-dashoffset: 0; }
body.home .dc3-pulse { opacity: 0; }
}
/* ---------- Transparency: Old Guard vs Simply Discover Way ---------- */
body.home .transparency-section { background: var(--ap-bg-soft); }
body.home .industry-status {
background: var(--ap-bg-elevated) !important;
border: 1px solid var(--ap-line) !important;
border-radius: var(--ap-radius-lg) !important;
padding: 2.5rem 2rem !important;
box-shadow: var(--ap-shadow) !important;
}
body.home .industry-status.old-way { opacity: 0.94; }
body.home .industry-status .status-icon {
width: 48px !important;
height: 48px !important;
border-radius: 14px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
margin-bottom: 1.25rem !important;
padding: 0 !important;
}
body.home .industry-status.old-way .status-icon {
background: var(--ap-status-old-bg) !important;
color: var(--ap-status-old-text) !important;
}
body.home .industry-status.new-way .status-icon {
background: var(--ap-status-new-bg) !important;
color: var(--ap-status-new-text) !important;
}
body.home .industry-status .status-icon svg {
width: 24px !important;
height: 24px !important;
stroke: currentColor !important;
color: inherit !important;
}
body.home .industry-status h3 {
font-size: 1.5rem !important;
font-weight: 500 !important;
letter-spacing: -0.015em !important;
color: var(--ap-ink) !important;
margin: 0 0 1.5rem !important;
}
body.home .status-items {
display: flex !important;
flex-direction: column !important;
gap: 1.25rem !important;
}
body.home .status-item {
display: flex !important;
gap: 0.85rem !important;
align-items: flex-start !important;
}
body.home .item-marker {
width: 6px !important;
height: 6px !important;
border-radius: 50% !important;
margin-top: 9px !important;
flex-shrink: 0 !important;
}
body.home .item-marker.old-marker { background: #D64545 !important; }
body.home .item-marker.new-marker { background: #1FA25C !important; }
body.home .status-item h4 {
font-size: 1rem !important;
font-weight: 600 !important;
color: var(--ap-ink) !important;
margin: 0 0 0.25rem !important;
letter-spacing: -0.005em !important;
}
body.home .status-item p {
font-size: 0.93rem !important;
color: var(--ap-ink-soft) !important;
line-height: 1.5 !important;
margin: 0 !important;
}
/* Center VS divider */
body.home .comparison-divider {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
gap: 1rem !important;
padding: 1rem 0 !important;
}
body.home .divider-line {
width: 1px !important;
height: 60px !important;
background: var(--ap-line) !important;
flex: 1 0 60px !important;
min-height: 40px;
max-height: 120px;
}
body.home .vs-badge {
padding: 7px 14px !important;
background: var(--ap-bg-elevated) !important;
border: 1px solid var(--ap-line) !important;
border-radius: 999px !important;
font-size: 0.7rem !important;
font-weight: 700 !important;
letter-spacing: 0.12em !important;
color: var(--ap-ink-soft) !important;
box-shadow: none !important;
}
@media (max-width: 900px) {
body.home .comparison-visual { grid-template-columns: 1fr !important; }
body.home .comparison-divider { flex-direction: row !important; padding: 0.5rem 0 !important; }
body.home .divider-line { width: 40px !important; height: 1px !important; flex: 0 0 40px !important; min-height: 0; }
}
/* ---------- Guarantee panel ----------
Single card (no nested border). Heading centered. Items left-
aligned as a consistent bulleted list so every marker sits at
the same x-position and aligns with the first line of wrapped text.
---------- */
body.home .guarantee-section {
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
padding: 0 !important;
max-width: 860px !important;
margin: 3.5rem auto 0 !important;
box-shadow: none !important;
position: relative;
z-index: 5;
}
/* This is the actual visible card — neutralize the old navy border. */
body.home .guarantee-content {
background: var(--ap-bg-elevated) !important;
border: 1px solid var(--ap-line) !important;
border-radius: var(--ap-radius-lg) !important;
padding: 2.5rem 2.25rem 2.25rem !important;
box-shadow: var(--ap-shadow) !important;
max-width: 100% !important;
text-align: center !important;
overflow: visible !important;
}
body.home .guarantee-content h3 {
font-size: 1.4rem !important;
font-weight: 500 !important;
letter-spacing: -0.015em !important;
color: var(--ap-ink) !important;
margin: 0 0 1.5rem !important;
}
/* The list itself is a block, centered in the card, with consistent
left alignment so all bullets line up vertically. */
body.home .guarantee-list {
display: flex !important;
flex-direction: column !important;
gap: 0.75rem !important;
align-items: stretch !important;
padding: 0 !important;
margin: 0 auto !important;
max-width: 560px;
text-align: left !important;
}
body.home .guarantee-item {
display: flex !important;
gap: 0.75rem !important;
align-items: flex-start !important;
padding: 0 !important;
background: transparent !important;
border: 0 !important;
max-width: none !important;
}
body.home .guarantee-marker {
width: 6px !important;
height: 6px !important;
border-radius: 50% !important;
background: var(--ap-navy) !important;
flex-shrink: 0 !important;
/* Aligns the dot with the first text line regardless of wrapping */
margin-top: 0.55rem !important;
box-shadow: none !important;
}
body.home .guarantee-item p {
font-size: 0.98rem !important;
color: var(--ap-ink) !important;
margin: 0 !important;
line-height: 1.55 !important;
text-align: left !important;
font-weight: 400 !important;
}
/* ---------- Why Us / About ---------- */
body.home .about-section { background: var(--ap-bg-soft); }
body.home .about-content {
max-width: 1100px !important;
margin: 0 auto !important;
padding: 0 clamp(1.25rem, 3vw, 2rem) !important;
}
body.home .about-content > h2 {
font-size: clamp(2rem, 3.4vw, 3.25rem) !important;
font-weight: 300 !important;
line-height: 1.08 !important;
letter-spacing: -0.022em !important;
color: var(--ap-ink) !important;
text-align: center !important;
margin: 0 auto 1.25rem !important;
max-width: 900px;
background: none !important;
-webkit-text-fill-color: var(--ap-ink) !important;
}
body.home .about-description {
font-size: clamp(1.05rem, 1.35vw, 1.2rem) !important;
color: var(--ap-ink-soft) !important;
text-align: center !important;
max-width: 780px !important;
margin: 0 auto 4rem !important;
line-height: 1.55 !important;
}
body.home .principles-showcase { margin: 0 !important; }
/* ---------- Featured principle card — "Built for teams that cannot
afford context loss". Hero card above the 5 smaller principles. ----- */
body.home .principle-main {
--pm-accent: #1E3A8A;
--pm-tint: rgba(30, 58, 138, 0.07);
--pm-tint-2: rgba(30, 58, 138, 0.18);
background:
linear-gradient(160deg, var(--pm-tint) 0%, rgba(255,255,255,0) 55%),
var(--ap-bg-elevated) !important;
border: 1px solid var(--ap-line) !important;
border-radius: var(--ap-radius-lg) !important;
padding: 3.5rem 2.5rem 3rem !important;
box-shadow: var(--ap-shadow) !important;
text-align: center !important;
margin-bottom: 2rem !important;
overflow: hidden !important;
position: relative !important;
transition:
transform 0.55s cubic-bezier(0.2, 0.85, 0.25, 1.05),
box-shadow 0.55s var(--ap-ease),
border-color 0.4s var(--ap-ease) !important;
isolation: isolate;
}
body.home .principle-main:hover {
box-shadow: var(--ap-shadow-hi) !important;
border-color: var(--pm-tint-2) !important;
}
/* Top accent line — extends full-width on hover */
body.home .principle-main::before {
content: '' !important;
display: block !important;
position: absolute !important;
top: 0 !important;
left: 0 !important;
right: auto !important;
bottom: auto !important;
width: 34% !important;
height: 3px !important;
background: var(--pm-accent) !important;
opacity: 0.9 !important;
transition: width 0.6s var(--ap-ease) !important;
z-index: 3 !important;
animation: none !important;
border-radius: 0 !important;
}
body.home .principle-main:hover::before { width: 100% !important; }
/* Tiny pulsing accent dot top-right */
body.home .principle-main::after {
content: '';
position: absolute;
top: 18px;
right: 22px;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--pm-accent);
opacity: 0.8;
animation: pmDotPulse 3s ease-in-out infinite;
z-index: 3;
}
@keyframes pmDotPulse {
0%, 100% { box-shadow: 0 0 0 0 var(--pm-tint-2); opacity: 0.8; }
50% { box-shadow: 0 0 0 8px transparent; opacity: 1; }
}
/* Icon tile — larger to match the section's presence */
body.home .principle-icon-large {
width: 76px !important;
height: 76px !important;
border-radius: 20px !important;
background: var(--pm-tint) !important;
color: var(--pm-accent) !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
margin: 0 auto 1.75rem !important;
padding: 0 !important;
transition: background 0.4s var(--ap-ease), transform 0.5s var(--ap-ease);
}
body.home .principle-main:hover .principle-icon-large {
background: var(--pm-tint-2) !important;
transform: scale(1.04);
}
body.home .principle-icon-large .pm-vis {
width: 44px !important;
height: 44px !important;
color: var(--pm-accent) !important;
stroke: currentColor !important;
overflow: visible;
}
/* Audit-trail nodes pulse in sequence — left → center → right.
Reinforces the "chain of custody" story visually. */
body.home .pm-node {
transform-box: fill-box;
transform-origin: center;
opacity: 0.45;
animation: pmNodePulse 3s ease-in-out infinite;
}
body.home .pm-n1 { animation-delay: 0s; }
body.home .pm-n2 { animation-delay: 0.6s; }
body.home .pm-n3 { animation-delay: 1.2s; }
body.home .principle-main:hover .pm-node { animation-duration: 1.8s; }
@keyframes pmNodePulse {
0%, 65%, 100% { transform: scale(1); opacity: 0.45; }
20% { transform: scale(1.4); opacity: 1;
filter: drop-shadow(0 0 4px var(--pm-tint-2)); }
}
body.home .principle-main h3 {
font-size: clamp(1.6rem, 2.3vw, 2.15rem) !important;
font-weight: 400 !important;
letter-spacing: -0.02em !important;
color: var(--ap-ink) !important;
margin: 0 auto 1rem !important;
max-width: 700px;
}
body.home .principle-main p {
font-size: 1.05rem !important;
color: var(--ap-ink-soft) !important;
max-width: 640px !important;
margin: 0 auto 2rem !important;
line-height: 1.6 !important;
}
/* ---- Stats bar — three pillars with colored accent dashes ---- */
body.home .principle-stats {
display: flex !important;
justify-content: center !important;
gap: 0 !important;
padding-top: 2rem !important;
border-top: 1px solid var(--ap-line);
margin-top: 2.25rem !important;
flex-wrap: wrap;
}
body.home .stat-item {
position: relative;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
gap: 0.55rem !important;
padding: 0.5rem clamp(1.5rem, 3vw, 2.75rem) !important;
background: transparent !important;
}
/* Vertical dividers between pillars */
body.home .stat-item + .stat-item::before {
content: '';
position: absolute;
left: 0;
top: 18%;
bottom: 18%;
width: 1px;
background: var(--ap-line);
}
/* Colored accent dash above each stat — different color per pillar */
body.home .stat-item::after {
content: '';
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 28px;
height: 3px;
border-radius: 2px;
background: var(--stat-accent, var(--ap-navy));
transition: width 0.5s var(--ap-ease), opacity 0.5s var(--ap-ease);
opacity: 0.85;
}
body.home .principle-main:hover .stat-item::after {
width: 44px;
opacity: 1;
}
/* Individual pillar colors — mirror the 3-step workflow palette */
body.home .stat-fast { --stat-accent: #3B82F6; } /* blue */
body.home .stat-hosted { --stat-accent: #10B981; } /* emerald */
body.home .stat-defensible { --stat-accent: #8B5CF6; } /* violet */
body.home .stat-value {
font-size: 1.6rem !important;
font-weight: 500 !important;
color: var(--ap-ink) !important;
letter-spacing: -0.02em !important;
background: none !important;
-webkit-text-fill-color: var(--ap-ink) !important;
line-height: 1.05 !important;
}
body.home .stat-label {
font-size: 0.7rem !important;
color: var(--ap-ink-soft) !important;
font-weight: 600 !important;
letter-spacing: 0.14em !important;
text-transform: uppercase;
}
/* Reduced-motion guard for the featured card */
@media (prefers-reduced-motion: reduce) {
body.home .pm-node,
body.home .principle-main::after,
body.home .principle-main::before {
animation: none !important;
transition: none !important;
}
body.home .pm-node { opacity: 0.9; }
}
/* Responsive: stack the stats on narrow screens */
@media (max-width: 640px) {
body.home .stat-item { padding: 0.5rem 1.25rem !important; }
body.home .stat-item + .stat-item::before { display: none; }
body.home .principle-stats { gap: 1.5rem !important; }
}
/* ---------- Principles grid — 5 equal-weight cards ----------
The original CSS split cards 4 & 5 into a centered second row,
which left them visually stranded. We put all 5 in one row on
wide screens, left-align the card content so the "01" number
reads as a proper header label, and let narrower viewports
naturally wrap (bottom row left-aligned, not centered). */
body.home .principles-grid {
display: grid !important;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
gap: 1rem !important;
margin: 2rem 0 0 !important;
}
/* Cancel the existing 6-col / 2-span / centered 4th+5th layout */
@media (min-width: 900px) {
body.home .principles-grid .principle-card,
body.home .principles-grid .principle-card:nth-child(4),
body.home .principles-grid .principle-card:nth-child(5) {
grid-column: auto !important;
}
}
/* On wide screens force all 5 into a single balanced row */
@media (min-width: 1100px) {
body.home .principles-grid {
grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
}
}
/* ---------- Principle cards — the "sexy number" treatment ----------
Each card has its own color personality driven by two custom
props: --pr-accent (the vivid brand color) and --pr-tint (a
whisper of that color as a gradient background).
Visual hooks:
• Huge outlined display number as the hero graphic
• Animated top accent line — grows to full width on hover
• Tiny pulsing dot top-right (same color language as product cards)
• Number fills with color on hover
• Card lifts with a soft spring ease
------------------------------------------------------------- */
body.home .principle-card {
/* Per-card color tokens — overridden below by nth-child */
--pr-accent: #1E3A8A;
--pr-tint: rgba(30, 58, 138, 0.05);
--pr-tint-2: rgba(30, 58, 138, 0.14);
background:
linear-gradient(155deg, var(--pr-tint) 0%, rgba(255, 255, 255, 0) 65%),
var(--ap-bg-elevated) !important;
border: 1px solid var(--ap-line) !important;
border-radius: var(--ap-radius) !important;
padding: 1.75rem 1.35rem 1.5rem !important;
box-shadow: var(--ap-shadow) !important;
transition:
transform 0.5s cubic-bezier(0.2, 0.85, 0.25, 1.05),
box-shadow 0.5s var(--ap-ease),
border-color 0.4s var(--ap-ease) !important;
position: relative !important;
overflow: hidden !important;
text-align: left !important;
isolation: isolate;
}
/* Top accent line — starts ~30% wide, extends to full on hover */
body.home .principle-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
height: 2.5px;
width: 32%;
background: var(--pr-accent);
opacity: 0.85;
transition: width 0.55s var(--ap-ease);
z-index: 2;
}
body.home .principle-card:hover::before { width: 100%; }
/* Tiny pulsing dot in the top-right corner */
body.home .principle-card::after {
content: '';
position: absolute;
top: 14px;
right: 14px;
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--pr-accent);
opacity: 0.75;
animation: prDotPulse 2.8s ease-in-out infinite;
z-index: 2;
}
@keyframes prDotPulse {
0%, 100% { box-shadow: 0 0 0 0 var(--pr-tint-2); opacity: 0.75; }
50% { box-shadow: 0 0 0 6px transparent; opacity: 1; }
}
body.home .principle-card:hover {
transform: translateY(-5px);
box-shadow: var(--ap-shadow-hi) !important;
border-color: var(--pr-tint-2) !important;
}
/* THE HERO: massive outlined display number */
body.home .principle-number {
position: static !important;
top: auto !important;
left: auto !important;
display: block !important;
padding: 0 !important;
margin: 0.35rem 0 0.85rem !important;
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Display', sans-serif !important;
font-size: clamp(3.25rem, 3.6vw, 4rem) !important;
font-weight: 700 !important;
line-height: 0.9 !important;
letter-spacing: -0.04em !important;
color: transparent !important;
-webkit-text-fill-color: transparent !important;
-webkit-text-stroke: 1.3px var(--pr-accent);
text-stroke: 1.3px var(--pr-accent);
background: none !important;
border-radius: 0 !important;
text-align: left !important;
font-variant-numeric: tabular-nums;
transition:
color 0.5s var(--ap-ease),
-webkit-text-fill-color 0.5s var(--ap-ease),
transform 0.5s cubic-bezier(0.2, 0.85, 0.25, 1.05) !important;
}
/* On hover, number fills in with its accent color and lifts slightly */
body.home .principle-card:hover .principle-number {
color: var(--pr-accent) !important;
-webkit-text-fill-color: var(--pr-accent) !important;
transform: translateY(-2px);
}
body.home .principle-card h4 {
font-size: 1.02rem !important;
font-weight: 500 !important;
letter-spacing: -0.012em !important;
color: var(--ap-ink) !important;
margin: 0 0 0.45rem !important;
text-align: left !important;
}
body.home .principle-card p {
font-size: 0.87rem !important;
color: var(--ap-ink-soft) !important;
line-height: 1.55 !important;
margin: 0 !important;
text-align: left !important;
}
/* ---- Per-card color personalities ---- */
body.home .principle-card:nth-child(1) {
--pr-accent: #3B82F6; /* blue — Radical simplicity */
--pr-tint: rgba(59, 130, 246, 0.08);
--pr-tint-2: rgba(59, 130, 246, 0.22);
}
body.home .principle-card:nth-child(2) {
--pr-accent: #8B5CF6; /* purple — Explainable evidence */
--pr-tint: rgba(139, 92, 246, 0.08);
--pr-tint-2: rgba(139, 92, 246, 0.22);
}
body.home .principle-card:nth-child(3) {
--pr-accent: #0D9488; /* teal — Your data, your environment */
--pr-tint: rgba(13, 148, 136, 0.08);
--pr-tint-2: rgba(13, 148, 136, 0.24);
}
body.home .principle-card:nth-child(4) {
--pr-accent: #EA580C; /* orange — Operator-first tooling */
--pr-tint: rgba(234, 88, 12, 0.08);
--pr-tint-2: rgba(234, 88, 12, 0.22);
}
body.home .principle-card:nth-child(5) {
--pr-accent: #DB2777; /* rose — One place for the work */
--pr-tint: rgba(219, 39, 119, 0.08);
--pr-tint-2: rgba(219, 39, 119, 0.22);
}
/* Reduced-motion guard */
@media (prefers-reduced-motion: reduce) {
body.home .principle-card::after { animation: none !important; }
body.home .principle-card,
body.home .principle-card::before,
body.home .principle-number {
transition: none !important;
}
}
/* Philosophy — pull quote */
body.home .philosophy {
margin: 4rem auto 0 !important;
padding: 3rem 2rem !important;
text-align: center !important;
background: transparent !important;
border: 0 !important;
max-width: 900px;
}
body.home .philosophy blockquote {
font-size: clamp(1.35rem, 2.2vw, 1.8rem) !important;
font-weight: 300 !important;
line-height: 1.35 !important;
letter-spacing: -0.015em !important;
color: var(--ap-ink) !important;
font-style: normal !important;
margin: 0 auto !important;
padding: 0 !important;
border: none !important;
background: none !important;
max-width: 800px;
quotes: "\201C" "\201D";
}
body.home .philosophy blockquote::before,
body.home .philosophy blockquote::after {
content: none !important;
}
body.home .philosophy cite {
display: block !important;
margin-top: 1.5rem !important;
font-size: 0.95rem !important;
font-weight: 500 !important;
color: var(--ap-ink-soft) !important;
font-style: normal !important;
letter-spacing: 0 !important;
}
/* ---------- Mini FAQ (details/summary) Apple accordion ---------- */
body.home .mini-faq {
margin: 3rem auto 0 !important;
max-width: 820px !important;
display: block !important;
grid-template-columns: none !important;
gap: 0 !important;
}
body.home .mini-faq details {
background: var(--ap-bg-elevated) !important;
border: 0 !important;
border-top: 1px solid var(--ap-line) !important;
border-radius: 0 !important;
box-shadow: none !important;
padding: 1.4rem 0.5rem !important;
transition: padding 0.3s var(--ap-ease);
}
body.home .mini-faq details:last-child {
border-bottom: 1px solid var(--ap-line) !important;
}
body.home .mini-faq details[open] {
box-shadow: none !important;
border-color: var(--ap-line) !important;
}
body.home .mini-faq summary {
font-size: 1.05rem !important;
font-weight: 500 !important;
color: var(--ap-ink) !important;
padding: 0 !important;
letter-spacing: -0.005em;
}
body.home .mini-faq summary::after {
content: '+' !important;
font-size: 1.35rem !important;
font-weight: 300 !important;
color: var(--ap-navy) !important;
transition: transform 0.3s var(--ap-ease);
line-height: 1;
}
body.home .mini-faq details[open] summary::after {
content: '+' !important;
transform: rotate(45deg);
}
body.home .mini-faq p {
color: var(--ap-ink-soft) !important;
font-size: 1rem !important;
margin: 1rem 0 0 !important;
line-height: 1.6 !important;
max-width: 720px;
}
/* ---------- Home Labs teaser ----------
Labs is adjacent to the platform, not another production workflow.
Keep it as a compact vision panel between company principles and
industry pages.
--------------------------------------------------------------- */
body.home .home-labs-section {
background: var(--ap-bg) !important;
}
body.home .home-labs-panel {
display: grid;
grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.8fr);
gap: clamp(1.5rem, 4vw, 3rem);
align-items: center;
background:
linear-gradient(145deg, rgba(13, 148, 136, 0.08) 0%, rgba(255, 255, 255, 0) 58%),
var(--ap-bg-elevated) !important;
border: 1px solid var(--ap-line) !important;
border-radius: var(--ap-radius-lg) !important;
padding: clamp(2rem, 5vw, 3.5rem) !important;
box-shadow: var(--ap-shadow) !important;
position: relative;
overflow: hidden;
}
body.home .home-labs-panel::before {
content: '';
position: absolute;
left: 0;
top: 0;
height: 3px;
width: 34%;
background: linear-gradient(90deg, #0D9488, #3B82F6, #B8763B);
opacity: 0.9;
transition: width 0.6s var(--ap-ease);
}
body.home .home-labs-panel:hover::before {
width: 100%;
}
body.home .home-labs-kicker {
margin: 0 0 0.85rem !important;
color: #0D9488 !important;
font-size: 0.76rem !important;
font-weight: 800 !important;
letter-spacing: 0.16em !important;
text-transform: uppercase;
}
body.home .home-labs-copy h2 {
color: var(--ap-ink) !important;
font-size: clamp(1.85rem, 3vw, 2.75rem) !important;
font-weight: 300 !important;
line-height: 1.08 !important;
letter-spacing: -0.024em !important;
margin: 0 0 1rem !important;
}
body.home .home-labs-copy p {
color: var(--ap-ink-soft) !important;
font-size: 1.02rem !important;
line-height: 1.65 !important;
max-width: 690px;
margin: 0 0 1.45rem !important;
}
body.home .home-labs-link {
color: #0D9488 !important;
font-weight: 600 !important;
text-decoration: none !important;
transition: letter-spacing 0.3s var(--ap-ease);
}
body.home .home-labs-link:hover {
letter-spacing: 0.02em;
}
body.home .home-labs-queue {
display: grid;
gap: 0.75rem;
padding: 0.25rem 0;
}
body.home .home-labs-queue-row {
display: grid;
grid-template-columns: 42px minmax(0, 1fr);
gap: 0.35rem 0.85rem;
align-items: baseline;
padding: 1rem 0;
border-bottom: 1px solid var(--ap-line);
}
body.home .home-labs-queue-row:last-child {
border-bottom: 0;
}
body.home .home-labs-queue-row span {
grid-row: span 2;
color: transparent;
-webkit-text-fill-color: transparent;
-webkit-text-stroke: 1.1px #0D9488;
font-size: 1.9rem;
font-weight: 800;
line-height: 1;
letter-spacing: -0.04em;
}
body.home .home-labs-queue-row strong {
color: var(--ap-ink);
font-size: 1rem;
font-weight: 600;
letter-spacing: -0.01em;
}
body.home .home-labs-queue-row em {
color: var(--ap-ink-soft);
font-size: 0.9rem;
font-style: normal;
line-height: 1.45;
}
@media (max-width: 820px) {
body.home .home-labs-panel {
grid-template-columns: 1fr;
}
}
/* ---------- Industries grid ---------- */
body.home .industries-section { background: var(--ap-bg); }
/* ==========================================================
Industry cards — per-industry color, living icon
Each of the six industries gets its own color personality
and a unique signature animation inside the icon tile.
========================================================== */
body.home .industry-card {
/* Per-card tokens (overridden below by industry modifier) */
--ind-accent: var(--ap-navy);
--ind-tint: var(--ap-navy-soft);
--ind-tint-2: rgba(30, 58, 138, 0.2);
background: var(--ap-bg-elevated) !important;
border: 1px solid var(--ap-line) !important;
border-radius: var(--ap-radius-lg) !important;
padding: 2.25rem 1.75rem !important;
box-shadow: var(--ap-shadow) !important;
transition:
transform 0.5s cubic-bezier(0.2, 0.85, 0.25, 1.05),
box-shadow 0.5s var(--ap-ease),
border-color 0.4s var(--ap-ease) !important;
text-decoration: none !important;
color: inherit !important;
display: flex !important;
flex-direction: column !important;
position: relative;
overflow: hidden;
}
body.home .industry-card:hover {
transform: translateY(-5px);
box-shadow: var(--ap-shadow-hi) !important;
border-color: var(--ind-tint-2) !important;
}
/* Icon tile — now colored by industry + bigger so the living icon breathes */
body.home .industry-card .industry-icon {
width: 60px !important;
height: 60px !important;
border-radius: 16px !important;
background: var(--ind-tint) !important;
color: var(--ind-accent) !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
margin-bottom: 1.35rem !important;
padding: 0 !important;
transition: background 0.4s var(--ap-ease), transform 0.5s var(--ap-ease);
}
body.home .industry-card:hover .industry-icon {
background: var(--ind-tint-2) !important;
transform: scale(1.03);
}
body.home .industry-card .industry-icon .ind-vis {
width: 34px !important;
height: 34px !important;
color: var(--ind-accent) !important;
stroke: currentColor;
overflow: visible;
}
body.home .industry-card h3 {
font-size: 1.22rem !important;
font-weight: 500 !important;
color: var(--ap-ink) !important;
letter-spacing: -0.015em !important;
margin: 0 0 0.5rem !important;
}
body.home .industry-card p {
font-size: 0.95rem !important;
color: var(--ap-ink-soft) !important;
line-height: 1.55 !important;
flex: 1;
margin: 0 0 1rem !important;
}
body.home .industry-card .industry-link {
color: var(--ind-accent) !important;
font-weight: 500 !important;
font-size: 0.9rem !important;
display: inline-flex !important;
align-items: center;
gap: 5px;
transition: gap 0.3s var(--ap-ease), color 0.4s var(--ap-ease);
}
body.home .industry-card:hover .industry-link { gap: 9px; }
/* ---- Per-industry color personalities ---- */
body.home .ind-legal {
--ind-accent: #4F46E5; /* indigo — authority */
--ind-tint: rgba(79, 70, 229, 0.08);
--ind-tint-2: rgba(79, 70, 229, 0.2);
}
body.home .ind-gov {
--ind-accent: #334155; /* deep slate — institutional */
--ind-tint: rgba(51, 65, 85, 0.08);
--ind-tint-2: rgba(51, 65, 85, 0.2);
}
body.home .ind-hr {
--ind-accent: #F43F5E; /* rose — people-warm */
--ind-tint: rgba(244, 63, 94, 0.08);
--ind-tint-2: rgba(244, 63, 94, 0.22);
}
body.home .ind-fin {
--ind-accent: #059669; /* emerald — growth */
--ind-tint: rgba(5, 150, 105, 0.08);
--ind-tint-2: rgba(5, 150, 105, 0.22);
}
body.home .ind-pe {
--ind-accent: #CA8A04; /* gold — wealth */
--ind-tint: rgba(202, 138, 4, 0.1);
--ind-tint-2: rgba(202, 138, 4, 0.24);
}
body.home .ind-reg {
--ind-accent: #7C3AED; /* violet — oversight */
--ind-tint: rgba(124, 58, 237, 0.08);
--ind-tint-2: rgba(124, 58, 237, 0.22);
}
/* ==========================================================
Signature animations — one per industry icon
========================================================== */
/* ---- Legal: scales tipping gently ---- */
body.home .ind-l-arm {
transform-origin: 24px 14px;
animation: indScalesTip 4s ease-in-out infinite;
}
body.home .ind-legal:hover .ind-l-arm { animation-duration: 2.2s; }
@keyframes indScalesTip {
0%, 100% { transform: rotate(-6deg); }
50% { transform: rotate(6deg); }
}
/* ---- Government: light sweeps across columns ---- */
body.home .ind-g-sweep {
transform: translateX(-10px);
animation: indGovSweep 4s ease-in-out infinite;
}
body.home .ind-g-dot {
animation: indGovDot 2.6s ease-in-out infinite;
transform-origin: 24px 5px;
}
body.home .ind-gov:hover .ind-g-sweep { animation-duration: 2s; }
@keyframes indGovSweep {
0%, 10% { transform: translateX(-10px); opacity: 0; }
20% { opacity: 0.6; }
80% { transform: translateX(36px); opacity: 0.6; }
100% { transform: translateX(38px); opacity: 0; }
}
@keyframes indGovDot {
0%, 100% { transform: scale(1); opacity: 0.8; }
50% { transform: scale(1.5); opacity: 1; }
}
/* ---- Human Resources: flowing arc + sequential head pulses ---- */
body.home .ind-h-arc {
animation: indHrArc 4s linear infinite;
}
body.home .ind-h-head {
transform-origin: center;
transform-box: fill-box;
animation: indHrHead 2.4s ease-in-out infinite;
}
body.home .ind-h-a { animation-delay: 0s; }
body.home .ind-h-b { animation-delay: 0.5s; }
body.home .ind-h-c { animation-delay: 1s; }
body.home .ind-hr:hover .ind-h-arc { animation-duration: 2s; }
body.home .ind-hr:hover .ind-h-head { animation-duration: 1.4s; }
@keyframes indHrArc {
to { stroke-dashoffset: -28; }
}
@keyframes indHrHead {
0%, 100% { transform: scale(1); }
30% { transform: scale(1.12); }
60% { transform: scale(1); }
}
/* ---- Financial Services: bars grow from baseline ---- */
body.home .ind-f-bar {
transform-origin: center 42px;
transform-box: fill-box;
animation: indFinBar 3.5s ease-in-out infinite;
transform: scaleY(0.15);
opacity: 0.3;
}
body.home .ind-f-b1 { animation-delay: 0s; }
body.home .ind-f-b2 { animation-delay: 0.2s; }
body.home .ind-f-b3 { animation-delay: 0.4s; }
body.home .ind-f-b4 { animation-delay: 0.6s; }
body.home .ind-f-line {
stroke-dasharray: 48;
stroke-dashoffset: 48;
animation: indFinLine 3.5s ease-in-out infinite;
animation-delay: 0.8s;
}
body.home .ind-fin:hover .ind-f-bar,
body.home .ind-fin:hover .ind-f-line { animation-duration: 2s; }
@keyframes indFinBar {
0%, 10% { transform: scaleY(0.15); opacity: 0.3; }
45% { transform: scaleY(1); opacity: 1; }
85% { transform: scaleY(1); opacity: 1; }
100% { transform: scaleY(0.15); opacity: 0.3; }
}
@keyframes indFinLine {
0%, 20% { stroke-dashoffset: 48; opacity: 0; }
40% { opacity: 0.55; }
65% { stroke-dashoffset: 0; opacity: 0.55; }
90% { opacity: 0.55; }
100% { stroke-dashoffset: -48; opacity: 0; }
}
/* ---- Private Equity: growth trajectory draws into briefcase ---- */
body.home .ind-p-growth {
stroke-dasharray: 42;
stroke-dashoffset: 42;
animation: indPeGrowth 3s ease-in-out infinite;
}
body.home .ind-p-arrow {
stroke-dasharray: 10;
stroke-dashoffset: 10;
animation: indPeArrow 3s ease-in-out infinite;
animation-delay: 0.9s;
}
body.home .ind-pe:hover .ind-p-growth,
body.home .ind-pe:hover .ind-p-arrow { animation-duration: 1.6s; }
@keyframes indPeGrowth {
0%, 10% { stroke-dashoffset: 42; }
50% { stroke-dashoffset: 0; }
80% { stroke-dashoffset: 0; }
100% { stroke-dashoffset: -42; }
}
@keyframes indPeArrow {
0%, 10% { stroke-dashoffset: 10; }
50% { stroke-dashoffset: 0; }
80% { stroke-dashoffset: 0; }
100% { stroke-dashoffset: -10; }
}
/* ---- Regulation & Compliance: shield check draws in and out ---- */
body.home .ind-r-check {
stroke-dasharray: 30;
stroke-dashoffset: 30;
animation: indRegCheck 3.4s ease-in-out infinite;
}
body.home .ind-reg:hover .ind-r-check { animation-duration: 1.8s; }
@keyframes indRegCheck {
0%, 10% { stroke-dashoffset: 30; }
45% { stroke-dashoffset: 0; }
80% { stroke-dashoffset: 0; opacity: 1; }
100% { stroke-dashoffset: -30; opacity: 0; }
}
/* Reduced-motion guard */
@media (prefers-reduced-motion: reduce) {
body.home .ind-l-arm,
body.home .ind-g-sweep,
body.home .ind-g-dot,
body.home .ind-h-arc,
body.home .ind-h-head,
body.home .ind-f-bar,
body.home .ind-f-line,
body.home .ind-p-growth,
body.home .ind-p-arrow,
body.home .ind-r-check {
animation: none !important;
}
body.home .ind-f-bar { transform: scaleY(1); opacity: 1; }
body.home .ind-f-line { stroke-dashoffset: 0; opacity: 0.55; }
body.home .ind-p-growth,
body.home .ind-p-arrow { stroke-dashoffset: 0; }
body.home .ind-r-check { stroke-dashoffset: 0; }
}
/* ---------- Contact section ---------- */
/* ==========================================================
Contact section — elevated closing block
Decorative accent pulse above the heading, polished Apple-pill
CTAs with arrow micro-interaction, and the mini FAQ items
converted to proper elevated cards with left-accent when open.
========================================================== */
body.home .contact-section {
background:
radial-gradient(circle at 50% 0%, rgba(30, 58, 138, 0.04) 0%, transparent 40%),
var(--ap-bg-soft) !important;
position: relative;
}
html[data-theme="dark"] body.home .contact-section {
background:
radial-gradient(circle at 50% 0%, rgba(141, 187, 255, 0.12) 0%, transparent 42%),
var(--ap-bg-soft) !important;
}
body.home .contact-content {
max-width: 820px !important;
margin: 0 auto !important;
padding: 0 clamp(1.25rem, 3vw, 2rem) !important;
text-align: center !important;
position: relative;
}
/* Tiny pulsing accent dot above the heading — visually anchors the
section and matches the motion grammar used throughout the page. */
body.home .contact-content::before {
content: '';
display: block;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--ap-navy);
margin: 0 auto 1.75rem;
opacity: 0.85;
box-shadow: 0 0 0 0 rgba(30, 58, 138, 0.3);
animation: contactAccentPulse 2.8s ease-in-out infinite;
}
@keyframes contactAccentPulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(30, 58, 138, 0.3); transform: scale(1); }
50% { box-shadow: 0 0 0 10px rgba(30, 58, 138, 0); transform: scale(1.15); }
}
body.home .contact-content > h2 {
font-size: clamp(2.25rem, 3.8vw, 3.5rem) !important;
font-weight: 300 !important;
line-height: 1.06 !important;
letter-spacing: -0.022em !important;
color: var(--ap-ink) !important;
margin: 0 0 1.25rem !important;
background: none !important;
-webkit-text-fill-color: var(--ap-ink) !important;
}
body.home .contact-content > p {
font-size: clamp(1.05rem, 1.35vw, 1.2rem) !important;
color: var(--ap-ink-soft) !important;
max-width: 640px;
margin: 0 auto !important;
line-height: 1.55 !important;
}
/* CTA group wrapper — more breathing room between buttons */
body.home .contact-section .hero-cta {
margin-top: 2rem !important;
gap: 1rem !important;
}
body.home .contact-section .home-contact-cta {
margin-top: 1.25rem !important;
}
body.home .contact-section .home-contact-link {
text-decoration: none !important;
}
body.home .contact-section .home-contact-faq {
margin-top: 1.75rem !important;
}
/* ---------- Primary CTA ---------- */
body.home .contact-section .cta-primary,
body.home .contact-section .hero-cta .cta-primary {
display: inline-flex !important;
align-items: center;
justify-content: center;
gap: 0.45rem;
background: var(--ap-navy) !important;
color: #ffffff !important;
border-radius: 999px !important;
padding: 1rem 2.15rem !important;
font-size: 1rem !important;
font-weight: 500 !important;
letter-spacing: -0.005em !important;
border: 0 !important;
cursor: pointer;
position: relative;
overflow: hidden;
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.15) inset,
0 4px 14px rgba(30, 58, 138, 0.22) !important;
transition:
transform 0.3s var(--ap-ease),
background 0.3s var(--ap-ease),
box-shadow 0.35s var(--ap-ease),
letter-spacing 0.3s var(--ap-ease) !important;
}
/* Subtle sheen that passes over the button on hover */
body.home .contact-section .cta-primary::after,
body.home .contact-section .hero-cta .cta-primary::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(100deg,
transparent 0%,
rgba(255, 255, 255, 0.18) 48%,
rgba(255, 255, 255, 0.18) 52%,
transparent 100%);
transform: translateX(-120%);
transition: transform 0.8s var(--ap-ease);
pointer-events: none;
}
body.home .contact-section .cta-primary:hover,
body.home .contact-section .hero-cta .cta-primary:hover {
transform: translateY(-2px);
background: var(--ap-navy-hover) !important;
letter-spacing: 0.005em !important;
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.2) inset,
0 10px 30px rgba(30, 58, 138, 0.36) !important;
}
body.home .contact-section .cta-primary:hover::after,
body.home .contact-section .hero-cta .cta-primary:hover::after {
transform: translateX(120%);
}
body.home .contact-section .cta-primary:active,
body.home .contact-section .hero-cta .cta-primary:active {
transform: translateY(0);
}
/* ---------- Secondary CTA — now with arrow micro-interaction ---------- */
body.home .contact-section .cta-secondary,
body.home .contact-section .hero-cta .cta-secondary {
display: inline-flex !important;
align-items: center;
justify-content: center;
gap: 0.5rem;
background: var(--ap-button-secondary-bg) !important;
color: var(--ap-button-secondary-text) !important;
border: 1px solid var(--ap-button-secondary-border) !important;
border-radius: 999px !important;
padding: 1rem 2.15rem !important;
font-size: 1rem !important;
font-weight: 500 !important;
letter-spacing: -0.005em !important;
text-decoration: none !important;
cursor: pointer;
position: relative;
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
transition:
transform 0.3s var(--ap-ease),
background 0.3s var(--ap-ease),
color 0.3s var(--ap-ease),
border-color 0.3s var(--ap-ease),
box-shadow 0.35s var(--ap-ease),
gap 0.3s var(--ap-ease) !important;
}
body.home .contact-section .cta-secondary::after,
body.home .contact-section .hero-cta .cta-secondary::after {
content: '→';
display: inline-block;
font-weight: 400;
transform: translateX(-3px);
opacity: 0;
transition: transform 0.3s var(--ap-ease), opacity 0.3s var(--ap-ease);
}
body.home .contact-section .cta-secondary:hover,
body.home .contact-section .hero-cta .cta-secondary:hover {
transform: translateY(-2px);
background: var(--ap-navy) !important;
color: #fff !important;
border-color: var(--ap-navy) !important;
gap: 0.7rem;
box-shadow: 0 10px 26px rgba(30, 58, 138, 0.28) !important;
}
body.home .contact-section .cta-secondary:hover::after,
body.home .contact-section .hero-cta .cta-secondary:hover::after {
transform: translateX(0);
opacity: 1;
}
/* ========================================================
Contact section Mini-FAQ — proper elevated cards
======================================================== */
body.home .contact-section .mini-faq {
margin: 3rem auto 0 !important;
max-width: 720px !important;
display: flex !important;
flex-direction: column;
gap: 0.85rem !important;
text-align: left;
}
body.home .contact-section .mini-faq details {
background: var(--ap-bg-elevated) !important;
border: 1px solid var(--ap-line) !important;
border-top: 1px solid var(--ap-line) !important;
border-radius: 16px !important;
box-shadow: var(--ap-shadow) !important;
padding: 1.35rem 1.6rem !important;
position: relative;
overflow: hidden;
transition:
transform 0.4s var(--ap-ease),
box-shadow 0.4s var(--ap-ease),
border-color 0.4s var(--ap-ease) !important;
}
body.home .contact-section .mini-faq details:last-child {
border-bottom: 1px solid var(--ap-line) !important;
}
body.home .contact-section .mini-faq details:hover {
transform: translateY(-2px);
border-color: rgba(30, 58, 138, 0.2) !important;
box-shadow: var(--ap-shadow-hi) !important;
}
/* Left accent bar — appears only when the item is open */
body.home .contact-section .mini-faq details::before {
content: '';
position: absolute;
left: 0;
top: 50%;
bottom: 50%;
width: 3px;
background: var(--ap-navy);
border-radius: 0 3px 3px 0;
transition: top 0.35s var(--ap-ease), bottom 0.35s var(--ap-ease);
}
body.home .contact-section .mini-faq details[open]::before {
top: 12px;
bottom: 12px;
}
body.home .contact-section .mini-faq details[open] {
border-color: rgba(30, 58, 138, 0.25) !important;
box-shadow: var(--ap-shadow-hi) !important;
}
body.home .contact-section .mini-faq summary {
font-size: 1.02rem !important;
font-weight: 500 !important;
color: var(--ap-ink) !important;
padding: 0 !important;
letter-spacing: -0.005em;
list-style: none !important;
cursor: pointer;
}
body.home .contact-section .mini-faq summary::-webkit-details-marker {
display: none !important;
}
/* Plus-to-X rotation with a clean circle background */
body.home .contact-section .mini-faq summary::after {
content: '+' !important;
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: 50%;
background: rgba(30, 58, 138, 0.08);
color: var(--ap-navy) !important;
font-size: 1.15rem !important;
font-weight: 300 !important;
line-height: 1;
transition: transform 0.35s var(--ap-ease), background 0.3s var(--ap-ease);
}
html[data-theme="dark"] body.home .contact-section .mini-faq summary::after {
background: rgba(141, 187, 255, 0.16);
}
body.home .contact-section .mini-faq details[open] summary::after {
content: '+' !important;
transform: rotate(45deg);
background: var(--ap-navy);
color: #fff !important;
}
body.home .contact-section .mini-faq p {
color: var(--ap-ink-soft) !important;
font-size: 0.98rem !important;
margin: 0.85rem 0 0 !important;
line-height: 1.6 !important;
max-width: 640px;
}
/* Reduced-motion guard */
@media (prefers-reduced-motion: reduce) {
body.home .contact-content::before,
body.home .contact-section .cta-primary::after,
body.home .contact-section .hero-cta .cta-primary::after,
body.home .contact-section .cta-secondary::after,
body.home .contact-section .hero-cta .cta-secondary::after {
animation: none !important;
transition: none !important;
}
}
/* ---------- Responsive: stack & compact on narrow screens ---------- */
@media (max-width: 768px) {
body.home .product-strip,
body.home .transparency-section,
body.home .discover-section,
body.home .about-section,
body.home .industries-section,
body.home .contact-section {
padding: clamp(3rem, 8vh, 5rem) 0 !important;
}
body.home .section-header { margin-bottom: 2.5rem !important; }
body.home .principle-main { padding: 2.5rem 1.5rem !important; }
body.home .guarantee-section { padding: 2.25rem 1.5rem !important; }
body.home .industry-status { padding: 2rem 1.5rem !important; }
body.home .philosophy { padding: 2rem 1rem !important; }
}
/* ---------- Respect reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
.platform-hero .hero-title .title-line,
.platform-hero .hero-subtitle,
.platform-hero .hero-cta,
.platform-hero .hero-trust-strip {
opacity: 1 !important;
transform: none !important;
animation: none !important;
}
.platform-hero .hero-title .title-highlight {
animation: none !important;
background-position: 50% 50% !important;
}
.hero-stage-canvas { transform: none !important; }
}