/* ===========================================================
Flagship Fintech — Design Tokens v3
"Black skin" — true black base, editorial typography,
high-contrast, generous negative space.
Inspired by: Linear, Vercel, Things, Apple, Mercury
=========================================================== */
@import url("./fonts.css");
:root {
/*
* Token layers:
* 1. --c-* / --bg-* → palette (hex defined once in :root)
* 2. --on-dark-* / --on-light-* → fg & lines per surface
* 3. --fg-* / --line-* → active page theme (dark default)
* 4. --accent-* → semantic roles (reference --c-*)
* Mockups use .ui-on-dark to snap back to --on-dark-* on light pages.
*/
/* ---- True black surface system ---- */
--bg: #000000; /* page */
--bg-1: #050505; /* nav blur */
--bg-2: #0a0a0c; /* raised */
--bg-3: #101015; /* card */
--bg-4: #16161c; /* hover */
/* ---- Interactive surfaces (hover / selected) ---- */
--surface-hover: rgba(255, 255, 255, 0.045);
--surface-selected: rgba(103, 196, 242, 0.1);
--surface-selected-border: rgba(103, 196, 242, 0.26);
--surface-selected-glow: rgba(103, 196, 242, 0.07);
/* ---- Brand (kept from existing deck identity) ---- */
--c-blue-700: #1f33b5;
--c-blue-600: #2640d4;
--c-blue-500: #3047db;
--c-blue-400: #5572f0;
/* Primary accent type — solid color + legibility drop-shadow (no gradient) */
--accent-primary: var(--c-blue-500);
--accent-primary-filter:
drop-shadow(0 0 1.5px rgba(0, 0, 0, 0.9))
drop-shadow(0 2px 5px rgba(0, 0, 0, 0.68))
drop-shadow(0 0 18px rgba(0, 0, 0, 0.45));
/*
* Sky / ice — luminous cyan (links, glows, aurora).
* Canonical hex from design system — never alias to --c-blue-*.
*/
--c-sky-500: #67c4f2;
--c-sky-400: #8ad6ff; /* 8AD6FF */
--c-sky-300: #b6e7ff; /* B6E7FF */
--c-ice: #eaf7ff; /* EAF7FF */
--c-sky-500-rgb: 103, 196, 242;
--c-blue-500-rgb: 48, 71, 219;
--c-blue-600-rgb: 38, 64, 212;
--c-mint: #5af2a8; /* slightly brighter on black */
--c-warn: #ffb84d;
--c-coral: #ff7676;
/* Extended accents — vibrant but controlled on black */
--c-violet-500: #9d7dff;
--c-violet-400: #c4b0ff;
--c-amber-400: #fbbf24;
--c-rose-400: #fb7185;
--c-teal-400: #2dd4bf;
--c-fuchsia-500:#e879f9;
--c-orange-500: #ff7a18;
--c-orange-400: #ff9f43;
--c-purple-600: #7c3aed;
--c-purple-500: #a855f7;
/* Arsenal gold — hero accent + underline (canonical hex once) */
--c-gold-900: #7a5c08;
--c-gold-800: #9a7209;
--c-gold-700: #b08727;
--c-gold-600: #c9920f;
--c-gold-500: #d1ac47;
--c-gold-400: #d4a017;
--c-gold-300: #ecc866;
--c-gold-200: #f3c623;
--c-gold-100: #f6ef89;
/* Hero “Arsenal” — animated text gradient + underline */
--hero-arsenal-gradient: linear-gradient(
90deg,
var(--c-blue-600) 0%,
var(--c-blue-500) 18%,
var(--c-blue-400) 36%,
var(--c-sky-400) 50%,
var(--c-sky-300) 64%,
var(--c-blue-400) 82%,
var(--c-blue-600) 100%
);
--hero-arsenal-underline: var(--c-gold-200);
--hero-arsenal-gradient-size: 180% 100%;
--hero-arsenal-gradient-duration: 6s;
--hero-arsenal-gradient-ease: cubic-bezier(0.42, 0, 0.58, 1);
--hero-arsenal-gradient-rest: 30% 50%;
--hero-arsenal-glow: drop-shadow(0 1px 12px rgba(103, 196, 242, 0.2));
/* Aurora (dark default) — violet / sky / mint green */
--aurora-core: radial-gradient(
ellipse 62% 52% at 50% 22%,
rgba(90, 242, 168, 0.32) 0%,
rgba(45, 212, 191, 0.24) 28%,
rgba(103, 196, 242, 0.2) 48%,
rgba(157, 125, 255, 0.16) 62%,
transparent 76%
);
--aurora-core-opacity: 0.88;
--aurora-spin-a: conic-gradient(
from 208deg at 50% 50%,
rgba(90, 242, 168, 0.58) 0deg,
rgba(45, 212, 191, 0.52) 42deg,
rgba(103, 196, 242, 0.44) 78deg,
rgba(124, 58, 237, 0.62) 118deg,
rgba(168, 85, 247, 0.56) 158deg,
rgba(157, 125, 255, 0.5) 198deg,
rgba(126, 245, 200, 0.54) 238deg,
rgba(90, 242, 168, 0.62) 278deg,
rgba(45, 212, 191, 0.5) 318deg,
rgba(90, 242, 168, 0.58) 360deg
);
--aurora-spin-b: conic-gradient(
from 168deg at 50% 50%,
rgba(126, 245, 200, 0.48) 0deg,
rgba(90, 242, 168, 0.56) 55deg,
rgba(45, 212, 191, 0.44) 105deg,
rgba(103, 196, 242, 0.36) 155deg,
rgba(168, 85, 247, 0.46) 205deg,
rgba(90, 242, 168, 0.52) 265deg,
rgba(45, 212, 191, 0.46) 315deg,
rgba(126, 245, 200, 0.48) 360deg
);
--aurora-blur: 44px;
--aurora-blur-b: 52px;
--aurora-opacity-a: 0.72;
--aurora-opacity-b: 0.48;
--aurora-saturate: 1.55;
--aurora-rotate-a: 42s;
--aurora-rotate-b: 58s;
/* normal — screen blend recomposites the whole page each frame and flickers on many GPUs */
--aurora-blend: normal;
/* ---- Hairlines & foreground on dark (define once; panels reuse via .ui-on-dark) ---- */
--on-dark-line-1: rgba(255, 255, 255, 0.05);
--on-dark-line-2: rgba(255, 255, 255, 0.09);
--on-dark-line-3: rgba(255, 255, 255, 0.14);
--on-dark-line-4: rgba(255, 255, 255, 0.22);
--on-dark-fg-hi: #ffffff;
--on-dark-fg-md: rgba(255, 255, 255, 0.72);
--on-dark-fg-lo: rgba(255, 255, 255, 0.46);
--on-dark-fg-dim: rgba(255, 255, 255, 0.28);
--on-dark-bg: #000000;
--on-dark-bg-1: #050505;
--on-dark-bg-2: #0a0a0c;
--on-dark-bg-3: #101015;
--on-dark-bg-4: #16161c;
--line-1: var(--on-dark-line-1);
--line-2: var(--on-dark-line-2);
--line-3: var(--on-dark-line-3);
--line-4: var(--on-dark-line-4);
--fg-hi: var(--on-dark-fg-hi);
--fg-md: var(--on-dark-fg-md);
--fg-lo: var(--on-dark-fg-lo);
--fg-dim: var(--on-dark-fg-dim);
/* Semantic color roles — UI labels, eyebrows, tags, headline accents */
--accent-ui: var(--c-sky-400);
--accent-ui-rgb: var(--c-sky-500-rgb);
--accent-link: var(--accent-ui);
--accent-highlight: var(--c-sky-500);
/* ---- Fonts ---- */
--font-sans: "Geist", -apple-system, system-ui, sans-serif;
--font-mono: "Geist Mono", "SF Mono", ui-monospace, monospace;
--font-serif: "Instrument Serif", "New York", "Iowan Old Style", serif;
--font-hero-lead: "Montserrat", var(--font-sans);
--font-hero-accent: "Montserrat", var(--font-sans);
--hero-arsenal-font-weight: 500;
--hero-arsenal-font-style: normal;
--hero-arsenal-letter-spacing: -0.03em;
/* Site heading scale — hero title DNA */
--heading-lead-weight: 300;
--heading-weight: 500;
--heading-em-weight: var(--hero-arsenal-font-weight);
--heading-mega-lh: 0.98;
--heading-mega-track: -0.046em;
--heading-display-lh: 1.08;
--heading-display-track: -0.034em;
--heading-h1-lh: 1.02;
--heading-h1-track: -0.034em;
--heading-h2-lh: 1.06;
--heading-h2-track: -0.026em;
--heading-h3-lh: 1.12;
--heading-h3-track: -0.022em;
--heading-h4-lh: 1.18;
--heading-h4-track: -0.018em;
/* Arabic UI: local Cairo (overridden on html:lang(ar) via --font-sans) */
--font-sans-ar: "Cairo", "Segoe UI", "Tahoma", sans-serif;
/* ---- Type scale (font-size only) ---- */
--fs-mega: clamp(2.75rem, 6vw, 5.25rem);
--fs-jumbo: clamp(2.5rem, 5.2vw, 4.5rem);
--fs-display: clamp(2.15rem, 3.8vw, 3.5rem);
--fs-h1: clamp(2.25rem, 3.8vw, 3.75rem);
--fs-h2: clamp(1.75rem, 2.6vw, 2.5rem);
--fs-h3: 1.5rem;
--fs-h4: 1.125rem;
--fs-lg: 1.125rem;
--fs-md: 1rem;
--fs-sm: 0.875rem;
--fs-xs: 0.75rem;
--fs-mi: 0.6875rem;
/* Legacy type aliases (t-* = font-size in utilities) */
--t-mega: var(--fs-mega);
--t-jumbo: var(--fs-jumbo);
--t-display: var(--fs-display);
--t-h1: var(--fs-h1);
--t-h2: var(--fs-h2);
--t-h3: var(--fs-h3);
--t-h4: var(--fs-h4);
--t-lg: var(--fs-lg);
--t-md: var(--fs-md);
--t-sm: var(--fs-sm);
--t-xs: var(--fs-xs);
--t-mi: var(--fs-mi);
/* Legacy text-color aliases (t-md is NOT a text color — use --fg-md) */
--t-hi: var(--fg-hi);
--t-lo: var(--fg-lo);
--t-dim: var(--fg-dim);
/* ---- Spacing ---- */
--s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px;
--s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px;
--s-16: 64px; --s-20: 80px; --s-24: 96px; --s-32: 128px; --s-40: 160px;
/* ---- Radii (smaller, more architectural) ---- */
--r-xs: 4px; --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-xl: 20px;
--r-pill: 999px;
/* ---- Motion ---- */
--ease: cubic-bezier(0.20, 0.0, 0.10, 1.0);
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
--dur-1: 150ms; --dur-2: 280ms; --dur-3: 480ms; --dur-4: 800ms;
/* ---- Chromatic elevation (soft neon / bloom on true black) ---- */
--shadow-deep: 0 28px 56px -26px rgba(0, 0, 0, 0.78);
--glow-sky: 0 0 56px -18px rgba(var(--c-sky-500-rgb), 0.22);
--glow-violet: 0 0 48px -20px rgba(157, 125, 255, 0.18);
--glow-mint: 0 0 44px -20px rgba(90, 242, 168, 0.14);
--glow-fuchsia: 0 0 40px -22px rgba(232, 121, 249, 0.12);
--shadow-ambient: var(--shadow-deep), var(--glow-sky), var(--glow-violet);
--shadow-dropdown: 0 40px 88px -20px rgba(0, 0, 0, 0.88), var(--glow-sky), var(--glow-violet), var(--glow-mint);
--shadow-panel: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 40px 80px -30px rgba(0, 0, 0, 0.82),
0 0 52px -18px rgba(103, 196, 242, 0.09), 0 0 44px -22px rgba(157, 125, 255, 0.07),
0 0 36px -24px rgba(90, 242, 168, 0.05);
--shadow-card: 0 22px 48px -28px rgba(0, 0, 0, 0.72), 0 0 0 1px rgba(103, 196, 242, 0.055),
var(--glow-violet), 0 0 40px -26px rgba(103, 196, 242, 0.06);
--shadow-card-hover: 0 32px 56px -22px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(138, 214, 255, 0.22),
0 0 64px -10px rgba(103, 196, 242, 0.22), 0 0 48px -14px rgba(157, 125, 255, 0.16),
0 0 40px -18px rgba(90, 242, 168, 0.08);
--shadow-nav-scrolled: 0 1px 0 rgba(103, 196, 242, 0.07), 0 18px 48px -12px rgba(0, 0, 0, 0.65),
0 0 40px -20px rgba(103, 196, 242, 0.08);
}
/* Page surface — partner logos & future light pages (see getPartnerLogoSrc in components.jsx) */
html[data-surface="dark"] {
color-scheme: dark;
}
html[data-surface="light"],
html:not([data-surface]) {
color-scheme: light;
/* Light surface — re-map semantic tokens (inherits :root structure) */
--bg: #f6f7fb;
--bg-1: #eef0f6;
--bg-2: #e6e9f2;
--bg-3: #dde2ec;
--bg-4: #d2d8e5;
--surface-hover: rgba(10, 12, 24, 0.045);
--surface-selected: rgba(48, 71, 219, 0.08);
--surface-selected-border: rgba(48, 71, 219, 0.2);
--surface-selected-glow: rgba(48, 71, 219, 0.05);
--on-light-line-1: rgba(10, 12, 24, 0.06);
--on-light-line-2: rgba(10, 12, 24, 0.10);
--on-light-line-3: rgba(10, 12, 24, 0.14);
--on-light-line-4: rgba(10, 12, 24, 0.22);
--on-light-fg-hi: #0a0c18;
--on-light-fg-md: rgba(10, 12, 24, 0.72);
--on-light-fg-lo: rgba(10, 12, 24, 0.48);
--on-light-fg-dim: rgba(10, 12, 24, 0.32);
--line-1: var(--on-light-line-1);
--line-2: var(--on-light-line-2);
--line-3: var(--on-light-line-3);
--line-4: var(--on-light-line-4);
--fg-hi: var(--on-light-fg-hi);
--fg-md: var(--on-light-fg-md);
--fg-lo: var(--on-light-fg-lo);
--fg-dim: var(--on-light-fg-dim);
--t-hi: var(--fg-hi);
--t-lo: var(--fg-lo);
--t-dim: var(--fg-dim);
--accent-primary: var(--c-blue-600);
--accent-ui: var(--c-blue-600);
--accent-ui-rgb: var(--c-blue-600-rgb);
--accent-link: var(--accent-ui);
--accent-highlight: var(--c-sky-500);
--accent-primary-filter:
drop-shadow(0 0 1px rgba(255, 255, 255, 1))
drop-shadow(0 1px 2px rgba(255, 255, 255, 0.92))
drop-shadow(0 0 14px rgba(255, 255, 255, 0.52));
--c-mint: #0a8f57;
--c-warn: #b86e00;
--c-coral: #c93c3c;
/* Softer elevation on pale surfaces (replacements for dark-only shadows) */
--shadow-deep: 0 18px 44px -22px rgba(10, 12, 24, 0.10);
--shadow-dropdown: 0 28px 72px -16px rgba(10, 12, 24, 0.12), 0 0 0 1px rgba(10, 12, 24, 0.05);
--shadow-ambient: var(--shadow-deep), 0 0 48px -22px rgba(103, 196, 242, 0.10);
--shadow-panel: 0 1px 0 rgba(255, 255, 255, 0.85) inset, 0 16px 40px -18px rgba(10, 12, 24, 0.08),
0 0 32px -20px rgba(103, 196, 242, 0.08);
--shadow-card: 0 12px 32px -18px rgba(10, 12, 24, 0.09), 0 0 0 1px rgba(10, 12, 24, 0.05);
--shadow-card-hover: 0 22px 48px -12px rgba(10, 12, 24, 0.12), 0 0 0 1px rgba(38, 64, 212, 0.10),
0 0 36px -12px rgba(103, 196, 242, 0.14);
--shadow-nav-scrolled: 0 1px 0 rgba(10, 12, 24, 0.06), 0 12px 36px -6px rgba(10, 12, 24, 0.08);
--hero-arsenal-gradient: linear-gradient(
90deg,
var(--c-blue-700) 0%,
var(--c-blue-600) 18%,
var(--c-blue-500) 36%,
var(--c-blue-400) 50%,
var(--c-sky-500) 64%,
var(--c-blue-500) 82%,
var(--c-blue-700) 100%
);
--hero-arsenal-glow: drop-shadow(0 1px 8px rgba(48, 71, 219, 0.14));
/* Aurora — light mode: gold + soft mint green */
--aurora-core: radial-gradient(
ellipse 58% 48% at 50% 20%,
rgba(167, 243, 208, 0.38) 0%,
rgba(110, 231, 183, 0.28) 32%,
rgba(253, 224, 71, 0.24) 52%,
rgba(103, 196, 242, 0.14) 68%,
transparent 78%
);
--aurora-core-opacity: 0.76;
--aurora-spin-a: conic-gradient(
from 202deg at 50% 50%,
rgba(167, 243, 208, 0.42) 0deg,
rgba(110, 231, 183, 0.38) 48deg,
rgba(250, 204, 21, 0.34) 96deg,
rgba(253, 224, 71, 0.32) 142deg,
rgba(52, 211, 153, 0.36) 188deg,
rgba(103, 196, 242, 0.22) 234deg,
rgba(167, 243, 208, 0.4) 288deg,
rgba(110, 231, 183, 0.38) 336deg,
rgba(167, 243, 208, 0.42) 360deg
);
--aurora-spin-b: conic-gradient(
from 178deg at 50% 50%,
rgba(110, 231, 183, 0.34) 0deg,
rgba(167, 243, 208, 0.36) 72deg,
rgba(253, 224, 71, 0.28) 132deg,
rgba(52, 211, 153, 0.32) 192deg,
rgba(103, 196, 242, 0.18) 252deg,
rgba(110, 231, 183, 0.34) 312deg,
rgba(167, 243, 208, 0.36) 360deg
);
--aurora-blur: 48px;
--aurora-blur-b: 58px;
--aurora-opacity-a: 0.68;
--aurora-opacity-b: 0.48;
--aurora-saturate: 1.34;
--aurora-rotate-a: 52s;
--aurora-rotate-b: 68s;
--aurora-blend: normal;
}
/* Mockups / cards on dark chrome — snap to dark fg & lines (inherits palette from :root) */
.ui-on-dark,
.floating-card,
.pos-terminal,
.black-panel {
color-scheme: dark;
--bg: var(--on-dark-bg);
--bg-1: var(--on-dark-bg-1);
--bg-2: var(--on-dark-bg-2);
--bg-3: var(--on-dark-bg-3);
--bg-4: var(--on-dark-bg-4);
--fg-hi: var(--on-dark-fg-hi);
--fg-md: var(--on-dark-fg-md);
--fg-lo: var(--on-dark-fg-lo);
--fg-dim: var(--on-dark-fg-dim);
--t-hi: var(--on-dark-fg-hi);
--t-lo: var(--on-dark-fg-lo);
--t-dim: var(--on-dark-fg-dim);
--line-1: var(--on-dark-line-1);
--line-2: var(--on-dark-line-2);
--line-3: var(--on-dark-line-3);
--line-4: var(--on-dark-line-4);
--accent-ui: var(--c-sky-400);
--accent-ui-rgb: var(--c-sky-500-rgb);
--accent-link: var(--accent-ui);
}
html[data-surface="light"] body {
background:
radial-gradient(ellipse 85% 48% at 10% -12%, rgba(250, 204, 21, 0.14), transparent 50%),
radial-gradient(ellipse 70% 42% at 92% 0%, rgba(253, 224, 71, 0.1), transparent 48%),
radial-gradient(ellipse 60% 40% at 50% 100%, rgba(251, 191, 36, 0.08), transparent 50%),
radial-gradient(ellipse 50% 35% at 75% 38%, rgba(253, 230, 138, 0.07), transparent 52%),
var(--bg);
}
html[data-surface="light"] :focus-visible {
outline: 2px solid rgba(38, 64, 212, 0.55);
outline-offset: 3px;
box-shadow: 0 0 0 4px rgba(103, 196, 242, 0.22), 0 0 20px rgba(157, 125, 255, 0.18);
}
html[data-surface="light"] ::selection {
background: linear-gradient(120deg, rgba(103, 196, 242, 0.35), rgba(157, 125, 255, 0.28));
color: var(--t-hi);
}
html[data-surface="light"] .tape {
border-top-color: var(--line-2);
border-bottom-color: var(--line-2);
background: linear-gradient(
90deg,
rgba(48, 71, 219, 0.05) 0%,
rgba(103, 196, 242, 0.045) 28%,
rgba(157, 125, 255, 0.045) 52%,
rgba(90, 242, 168, 0.04) 78%,
rgba(251, 113, 133, 0.03) 100%
);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.65),
0 0 32px -18px rgba(103, 196, 242, 0.10),
0 0 28px -20px rgba(157, 125, 255, 0.06);
}
html[data-surface="light"] .btn-primary {
background: var(--t-hi);
color: #fafbff;
box-shadow:
0 4px 18px -4px rgba(10, 12, 24, 0.18),
0 0 28px -10px rgba(103, 196, 242, 0.2),
0 0 22px -12px rgba(157, 125, 255, 0.12);
}
html[data-surface="light"] .btn-primary:hover {
color: #05060a;
}
html[data-surface="light"] .chip {
background: rgba(255, 255, 255, 0.88);
border-color: var(--line-2);
box-shadow:
0 1px 2px rgba(10, 12, 24, 0.04),
inset 0 1px 0 rgba(255, 255, 255, 0.95),
0 0 20px -8px rgba(103, 196, 242, 0.10);
}
html[data-surface="light"] .btn-secondary {
background: rgba(255, 255, 255, 0.55);
color: var(--t-hi);
border-color: var(--line-3);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.9),
0 1px 3px rgba(10, 12, 24, 0.04);
}
html[data-surface="light"] .btn-secondary:hover {
background: linear-gradient(145deg, rgba(255, 255, 255, 0.95) 0%, rgba(234, 247, 255, 0.75) 45%, rgba(243, 240, 255, 0.7) 100%);
border-color: rgba(38, 64, 212, 0.22);
box-shadow:
0 0 24px -6px rgba(103, 196, 242, 0.18),
inset 0 1px 0 rgba(255, 255, 255, 1);
}
html[data-surface="light"] .btn-text:hover {
text-shadow: none;
color: var(--c-blue-600);
}
html[data-surface="light"] .serif-em-dim {
color: rgba(38, 64, 212, 0.42);
text-shadow: none;
}
html[data-surface="light"] .catalog-card:hover {
border-color: rgba(38, 64, 212, 0.22) !important;
background: linear-gradient(165deg, rgba(234, 247, 255, 0.55), rgba(243, 240, 255, 0.35), rgba(255, 255, 255, 0.4) 72%) !important;
}
html[data-surface="light"] .catalog-compare thead th {
background: var(--bg-2);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
html[data-surface="light"] .hero-aurora {
opacity: 0.42;
filter: blur(72px);
}
html[data-surface="light"] .hero-mesh-fade {
background: radial-gradient(ellipse 82% 62% at 50% 18%, transparent 0%, rgba(246, 247, 251, 0.78) 72%, rgba(230, 233, 242, 0.95) 100%);
}
html[data-surface="light"] .floating-card {
--fc-shadow-umbra: rgba(18, 32, 58, 0.07);
--fc-shadow-penumbra: rgba(22, 36, 62, 0.035);
--fc-shadow-ambient: rgba(22, 36, 62, 0.018);
--fc-shadow-tint: rgba(48, 71, 219, 0.015);
}
html[data-surface="light"] .floating-card__glow {
opacity: 0.2;
}
html[data-surface="light"] .mockup-strip__frame {
background: #fff;
box-shadow:
0 10px 28px -12px rgba(10, 12, 24, 0.08),
0 0 0 1px rgba(10, 12, 24, 0.05),
0 0 28px -16px rgba(103, 196, 242, 0.08);
}
html[data-surface="light"] .mockup-strip__frame--phone {
background: linear-gradient(160deg, #f0f2f8 0%, #e4e8f0 100%);
}
html[data-surface="light"] .mockup-strip__stage {
background:
radial-gradient(ellipse 90% 70% at 50% 0%, rgba(103, 196, 242, 0.06), transparent 55%),
#eef0f6;
}
html[data-surface="light"] .mockup-strip__card:hover .mockup-strip__frame {
border-color: rgba(38, 64, 212, 0.22);
box-shadow:
0 16px 36px -14px rgba(10, 12, 24, 0.10),
0 0 0 1px rgba(38, 64, 212, 0.10),
0 0 40px -10px rgba(103, 196, 242, 0.14);
}
html[data-surface="light"] .flow-ribbon-wrap--minimal {
border-top-color: rgba(38, 64, 212, 0.12);
border-bottom-color: rgba(157, 125, 255, 0.12);
background: linear-gradient(90deg, rgba(48, 71, 219, 0.04), transparent 38%, transparent 62%, rgba(90, 242, 168, 0.04));
box-shadow:
0 0 28px -14px rgba(103, 196, 242, 0.08),
inset 0 1px 0 rgba(255, 255, 255, 0.65);
}
html[data-surface="light"] .hero-status-pill {
background: rgba(255, 255, 255, 0.72);
border-color: var(--line-2);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.95),
0 1px 3px rgba(10, 12, 24, 0.05),
0 0 28px -10px rgba(103, 196, 242, 0.12);
}
html[data-surface="light"] .site-header[data-scrolled="true"] {
box-shadow: var(--shadow-nav-scrolled);
}
html[data-surface="light"] .site-footer {
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.75),
0 -16px 40px -20px rgba(10, 12, 24, 0.06),
0 0 40px -24px rgba(103, 196, 242, 0.08);
}
html[data-surface="light"] .cta-chrome {
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.55),
0 -20px 48px -28px rgba(10, 12, 24, 0.05),
0 0 48px -26px rgba(157, 125, 255, 0.06);
}
html[data-surface="light"] .cta-vignette {
background: radial-gradient(ellipse 62% 44% at 50% 48%, transparent 28%, rgba(238, 240, 246, 0.5) 68%, rgba(230, 233, 242, 0.88) 100%);
}
html[data-surface="light"] .team-photo-overlay {
background: linear-gradient(180deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0.06) 34%, rgba(10, 12, 24, 0.48) 100%);
}
html[data-surface="light"] .site-footer__mega {
background: linear-gradient(180deg, rgba(10, 12, 24, 0.78), rgba(10, 12, 24, 0.32));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
html[data-surface="light"] ::-webkit-scrollbar-thumb {
background: rgba(10, 12, 24, 0.12);
}
html[data-surface="light"] ::-webkit-scrollbar-thumb:hover {
background: rgba(10, 12, 24, 0.22);
}
html[data-surface="light"] .surface-glow {
box-shadow: var(--shadow-card);
}
/* Vignettes & footer mega wordmark — shared classes (dark defaults, light tuned above) */
.hero-mesh-fade {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 0;
background:
radial-gradient(ellipse 75% 55% at 50% 12%, transparent 0%, rgba(0, 0, 0, 0.35) 52%, rgba(0, 0, 0, 0.68) 78%),
linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.45) 100%);
}
.cta-vignette {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background: radial-gradient(ellipse 60% 40% at 50% 50%, transparent, rgba(0, 0, 0, 0.6) 80%);
}
.team-photo-overlay {
position: absolute;
inset: 0;
pointer-events: none;
background: linear-gradient(180deg, rgba(0, 0, 0, 0.18) 0%, rgba(0, 0, 0, 0.05) 35%, rgba(0, 0, 0, 0.85) 100%);
}
.site-footer__mega {
margin: 0;
line-height: 0.9;
letter-spacing: -0.058em;
font-weight: 500;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.02));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
user-select: none;
}
html[dir="rtl"] .rail-grid {
direction: rtl;
}
@media (max-width: 900px) {
html[dir="rtl"] .rail-grid {
direction: ltr;
}
}
html[dir="rtl"] .manifesto-section .rail-grid .manifesto-section__index {
justify-self: start;
text-align: left;
}
@media (max-width: 900px) {
html[dir="rtl"] .manifesto-section .rail-grid .manifesto-section__index {
justify-self: start;
text-align: left;
}
}
/* ===========================================================
Base
=========================================================== */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html {
overflow-x: clip;
max-width: 100%;
}
#root {
overflow-x: clip;
max-width: 100%;
min-width: 0;
}
/* Arabic locale: modern local sans; relax Geist-specific OpenType tweaks */
html:lang(ar) {
--font-sans: var(--font-sans-ar);
}
body {
background:
radial-gradient(ellipse 90% 50% at 10% -15%, rgba(48, 71, 219, 0.26), transparent 48%),
radial-gradient(ellipse 70% 45% at 95% 5%, rgba(103, 196, 242, 0.14), transparent 46%),
radial-gradient(ellipse 55% 38% at 50% 105%, rgba(157, 125, 255, 0.12), transparent 48%),
radial-gradient(ellipse 45% 30% at 72% 40%, rgba(90, 242, 168, 0.08), transparent 50%),
radial-gradient(ellipse 50% 40% at 88% 72%, rgba(232, 121, 249, 0.05), transparent 45%),
var(--bg);
color: var(--fg-hi);
font-family: var(--font-sans);
font-size: 16px;
line-height: 1.55;
letter-spacing: -0.006em;
font-weight: 400;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
font-feature-settings: "ss01" on, "cv11" on, "ss03" on;
overflow-x: hidden;
}
html:lang(ar) body {
letter-spacing: 0;
font-feature-settings: "kern" 1;
}
:focus-visible {
outline: 2px solid rgba(138, 214, 255, 0.75);
outline-offset: 3px;
box-shadow: 0 0 0 4px rgba(48, 71, 219, 0.28), 0 0 28px rgba(157, 125, 255, 0.22);
}
::selection {
background: linear-gradient(120deg, rgba(103, 196, 242, 0.45), rgba(157, 125, 255, 0.38));
color: #fff;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }
/* ===========================================================
Layout primitives → Tailwind (@layer components in tailwind-built.css)
Build: npm install && npm run build:css
=========================================================== */
/* Hairline divider */
.hr {
height: 1px; border: none; margin: 0;
background: var(--line-1);
}
/* Tape — full-bleed hairline with side ticks */
.tape {
position: relative;
border-top: 1px solid var(--line-2);
border-bottom: 1px solid var(--line-2);
background: linear-gradient(
90deg,
rgba(48, 71, 219, 0.07) 0%,
rgba(103, 196, 242, 0.06) 28%,
rgba(157, 125, 255, 0.06) 52%,
rgba(90, 242, 168, 0.05) 78%,
rgba(251, 113, 133, 0.04) 100%
);
box-shadow:
inset 0 1px 0 rgba(103, 196, 242, 0.07),
0 0 56px -22px rgba(103, 196, 242, 0.08),
0 0 48px -24px rgba(157, 125, 255, 0.06);
}
/* ===========================================================
Type utilities — Montserrat heading system (hero DNA)
=========================================================== */
.t-mega,
.t-jumbo,
.t-display,
.t-h1,
.t-h2,
.t-h3,
.t-h4 {
font-family: var(--font-hero-lead);
color: var(--t-hi);
}
.t-mega {
font-size: var(--fs-mega);
line-height: var(--heading-mega-lh);
letter-spacing: var(--heading-mega-track);
font-weight: var(--heading-lead-weight);
}
.t-jumbo {
font-size: var(--fs-jumbo);
line-height: 0.92;
letter-spacing: -0.048em;
font-weight: var(--heading-lead-weight);
}
.t-display {
font-size: var(--fs-display);
line-height: var(--heading-display-lh);
letter-spacing: var(--heading-display-track);
font-weight: var(--heading-lead-weight);
}
.t-h1 {
font-size: var(--fs-h1);
line-height: var(--heading-h1-lh);
letter-spacing: var(--heading-h1-track);
font-weight: var(--heading-weight);
}
.t-h2 {
font-size: var(--fs-h2);
line-height: var(--heading-h2-lh);
letter-spacing: var(--heading-h2-track);
font-weight: var(--heading-weight);
}
.t-h3 {
font-size: var(--fs-h3);
line-height: var(--heading-h3-lh);
letter-spacing: var(--heading-h3-track);
font-weight: var(--heading-weight);
}
.t-h4 {
font-size: var(--fs-h4);
line-height: var(--heading-h4-lh);
letter-spacing: var(--heading-h4-track);
font-weight: var(--heading-weight);
}
.t-lg { font-size: var(--fs-lg); line-height: 1.55; font-weight: 400; }
.t-md { font-size: var(--fs-md); line-height: 1.62; font-weight: 400; }
.t-sm { font-size: var(--fs-sm); line-height: 1.55; font-weight: 400; }
.t-xs { font-size: var(--fs-xs); line-height: 1.5; font-weight: 400; }
.t-mono {
font-family: var(--font-mono);
font-feature-settings: "ss01" on, "ss02" on;
}
.t-serif { font-family: var(--font-serif); font-weight: 400; letter-spacing: -0.012em; }
.t-serif-it { font-family: var(--font-serif); font-style: italic; font-weight: 400; letter-spacing: -0.014em; }
.t-eyebrow {
font-family: var(--font-mono);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.18em;
color: var(--accent-ui);
font-weight: 400;
text-shadow: none;
filter: none;
}
.t-muted { color: var(--fg-md); }
.t-dim { color: var(--fg-lo); }
/* Heading parts — shared with hero title */
.heading__lead,
.hero-title__lead {
font-family: var(--font-hero-lead);
font-style: normal;
font-weight: var(--heading-lead-weight);
letter-spacing: -0.02em;
color: var(--t-hi);
}
.heading__body,
.hero-title__sans,
.hero-title__punct {
font-family: var(--font-hero-lead);
font-style: normal;
font-weight: var(--heading-weight);
color: var(--t-hi);
}
.heading__em,
.serif-em,
.serif-em--primary {
font-family: var(--font-hero-accent);
font-style: var(--hero-arsenal-font-style);
font-weight: var(--heading-em-weight);
font-synthesis: none;
letter-spacing: var(--hero-arsenal-letter-spacing);
color: transparent;
background: var(--hero-arsenal-gradient);
background-size: var(--hero-arsenal-gradient-size);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
text-shadow: none;
filter: none;
}
.heading__em--dim,
.serif-em-dim {
font-family: var(--font-hero-accent);
font-style: normal;
font-weight: var(--heading-em-weight);
font-synthesis: none;
letter-spacing: var(--hero-arsenal-letter-spacing);
color: var(--accent-ui);
text-shadow: none;
filter: none;
}
/* Instrument Serif has no Arabic; use Cairo for editorial spans */
html:lang(ar) .heading__lead,
html:lang(ar) .heading__body,
html:lang(ar) .heading__em,
html:lang(ar) .heading__em--dim,
html:lang(ar) .serif-em,
html:lang(ar) .serif-em-dim {
font-family: var(--font-sans-ar);
font-style: normal;
letter-spacing: 0;
}
html:lang(ar) .heading__em,
html:lang(ar) .serif-em {
font-weight: 600;
}
html:lang(ar) .heading__em--dim,
html:lang(ar) .serif-em-dim {
font-weight: 500;
}
html:lang(ar) .t-serif,
html:lang(ar) .t-serif-it {
font-family: var(--font-sans-ar);
font-style: normal;
letter-spacing: 0;
}
html:lang(ar) .manifesto-pull {
font-family: var(--font-sans-ar);
font-style: normal;
font-weight: 500;
letter-spacing: 0;
}
html:lang(ar) .manifesto-lead {
letter-spacing: -0.015em;
}
html:lang(ar) .t-mega,
html:lang(ar) .t-jumbo,
html:lang(ar) .t-display,
html:lang(ar) .t-h1,
html:lang(ar) .t-h2,
html:lang(ar) .t-h3,
html:lang(ar) .t-h4 {
letter-spacing: -0.02em;
}
/* ===========================================================
Reveal — hide in CSS before paint; persist with [data-in]
(React className updates wipe `.in`; data-in survives re-renders).
Use `translate` so hover `transform` on the same node still works.
=========================================================== */
.reveal {
opacity: 0;
translate: 0 12px;
transition: opacity 520ms var(--ease-out), translate 560ms var(--ease-out);
}
.reveal.in,
.reveal[data-in] {
opacity: 1;
translate: 0;
}
/* Sibling headings/copy that share a rail — cheap stagger without extra classes */
.reveal + .reveal { transition-delay: 80ms; }
.reveal + .reveal + .reveal { transition-delay: 150ms; }
.reveal.reveal-d1 { transition-delay: 70ms; }
.reveal.reveal-d2 { transition-delay: 140ms; }
.reveal.reveal-d3 { transition-delay: 210ms; }
.reveal.reveal-d4 { transition-delay: 280ms; }
/* Grid/list stagger: container is observed; children animate when marked in */
.reveal-stagger > * {
opacity: 0;
translate: 0 12px;
transition: opacity 480ms var(--ease-out), translate 520ms var(--ease-out);
}
.reveal-stagger.in > *,
.reveal-stagger[data-in] > * {
opacity: 1;
translate: 0;
}
.reveal-stagger.in > *:nth-child(1),
.reveal-stagger[data-in] > *:nth-child(1) { transition-delay: 0ms; }
.reveal-stagger.in > *:nth-child(2),
.reveal-stagger[data-in] > *:nth-child(2) { transition-delay: 55ms; }
.reveal-stagger.in > *:nth-child(3),
.reveal-stagger[data-in] > *:nth-child(3) { transition-delay: 110ms; }
.reveal-stagger.in > *:nth-child(4),
.reveal-stagger[data-in] > *:nth-child(4) { transition-delay: 165ms; }
.reveal-stagger.in > *:nth-child(5),
.reveal-stagger[data-in] > *:nth-child(5) { transition-delay: 220ms; }
.reveal-stagger.in > *:nth-child(6),
.reveal-stagger[data-in] > *:nth-child(6) { transition-delay: 275ms; }
.reveal-stagger.in > *:nth-child(7),
.reveal-stagger[data-in] > *:nth-child(7) { transition-delay: 330ms; }
.reveal-stagger.in > *:nth-child(n + 8),
.reveal-stagger[data-in] > *:nth-child(n + 8) { transition-delay: 360ms; }
/* Hero / proof entrance — hide only while data-enter=0 (boot script).
Missing attribute stays visible so hydration cannot flash hidden. */
.hero-enter {
transition: opacity 600ms var(--ease-out), translate 680ms var(--ease-out);
}
html[data-enter="0"] .hero-enter {
opacity: 0;
translate: 0 14px;
}
html[data-enter="1"] .hero-enter {
opacity: 1;
translate: 0;
}
.hero-enter-d1 { transition-delay: 70ms; }
.hero-enter-d2 { transition-delay: 140ms; }
.hero-enter-d3 { transition-delay: 210ms; }
.hero-enter-d4 { transition-delay: 280ms; }
/* ===========================================================
Inner pages — proof strip, catalog, product detail
=========================================================== */
.proof-strip {
border-bottom: 1px solid var(--line-2);
background:
linear-gradient(180deg, rgba(48, 71, 219, 0.08) 0%, transparent 55%),
linear-gradient(90deg, rgba(103, 196, 242, 0.04) 0%, rgba(157, 125, 255, 0.05) 50%, rgba(90, 242, 168, 0.04) 100%),
var(--bg-1);
padding: var(--s-5) 0;
box-shadow:
inset 0 -1px 0 rgba(103, 196, 242, 0.06),
0 20px 48px -28px rgba(0, 0, 0, 0.55),
0 0 56px -24px rgba(103, 196, 242, 0.07),
0 0 48px -26px rgba(157, 125, 255, 0.06);
}
.proof-strip__cell:nth-child(4n + 1) { color: var(--t-hi); }
.proof-strip__cell:nth-child(4n + 2) .proof-strip__k { color: rgba(138, 214, 255, 0.85); }
.proof-strip__cell:nth-child(4n + 3) .proof-strip__k { color: rgba(196, 176, 255, 0.88); }
.proof-strip__cell:nth-child(4n) .proof-strip__k { color: rgba(90, 242, 168, 0.85); }
.proof-strip__inner {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: var(--s-6) var(--s-8);
}
.proof-strip__cell { min-width: 0; }
.proof-strip__cell {
transition: opacity 480ms var(--ease-out), translate 520ms var(--ease-out);
}
html[data-enter="0"] .proof-strip__cell {
opacity: 0;
translate: 0 10px;
}
html[data-enter="1"] .proof-strip__cell { opacity: 1; translate: 0; }
html[data-enter="1"] .proof-strip__cell:nth-child(1) { transition-delay: 240ms; }
html[data-enter="1"] .proof-strip__cell:nth-child(2) { transition-delay: 300ms; }
html[data-enter="1"] .proof-strip__cell:nth-child(3) { transition-delay: 360ms; }
html[data-enter="1"] .proof-strip__cell:nth-child(4) { transition-delay: 420ms; }
.proof-strip__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2rem;
height: 2rem;
margin-bottom: 8px;
border-radius: 10px;
border: 1px solid var(--line-2);
background: var(--bg-3);
color: var(--accent-ui);
}
.proof-strip__k {
font-size: 10px;
letter-spacing: 0.12em;
color: var(--t-dim);
margin-bottom: 6px;
}
.proof-strip__v {
color: var(--fg-md);
line-height: 1.45;
}
.solutions-segments {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 1px;
background: var(--line-2);
border: 1px solid var(--line-2);
}
.solutions-segment-card {
min-width: 0;
min-height: 220px;
padding: 32px 28px;
background: var(--bg);
transition: background 280ms var(--ease);
}
@media (hover: hover) and (pointer: fine) {
.solutions-segment-card:hover {
background: linear-gradient(180deg, rgba(103, 196, 242, 0.05), transparent 70%), var(--bg);
}
}
.solutions-segment-card__icon {
display: grid;
place-items: center;
width: 88px;
height: 88px;
margin-bottom: 22px;
border-radius: 20px;
border: 1px solid var(--line-2);
color: var(--accent-ui);
background:
linear-gradient(145deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.01) 100%),
var(--bg-2);
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.04) inset,
0 16px 40px -28px rgba(0, 0, 0, 0.45);
transition: transform 320ms var(--ease-out), border-color 280ms var(--ease);
}
@media (hover: hover) and (pointer: fine) {
.solutions-segment-card:hover .solutions-segment-card__icon {
transform: translateY(-2px);
border-color: rgba(138, 214, 255, 0.35);
}
}
html[data-surface="light"] .solutions-segment-card__icon {
background:
linear-gradient(145deg, rgba(48, 71, 219, 0.08) 0%, rgba(103, 196, 242, 0.04) 100%),
var(--bg-1);
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.7) inset,
0 12px 32px -24px rgba(10, 12, 24, 0.08);
}
.catalog-compare {
width: 100%;
border-collapse: collapse;
font-size: var(--t-sm);
min-width: 520px;
}
.catalog-compare th,
.catalog-compare td {
border: 1px solid var(--line-2);
padding: 12px 14px;
text-align: left;
vertical-align: top;
}
.catalog-compare thead th {
color: var(--t-lo);
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.08em;
text-transform: uppercase;
background: var(--bg-2);
box-shadow: inset 0 1px 0 rgba(103, 196, 242, 0.06);
}
@media (max-width: 900px) {
.detail-split {
grid-template-columns: 1fr !important;
gap: 40px !important;
}
}
.catalog-card {
box-shadow: var(--shadow-card);
transition:
border-color 200ms var(--ease),
background 200ms var(--ease),
box-shadow 320ms var(--ease-out),
transform 320ms var(--ease-out);
}
.catalog-card:hover {
border-color: rgba(138, 214, 255, 0.35) !important;
background: linear-gradient(165deg, rgba(103, 196, 242, 0.08), rgba(157, 125, 255, 0.04), transparent 70%) !important;
box-shadow: var(--shadow-card-hover);
}
@media (hover: hover) and (pointer: fine) {
.catalog-card:hover {
transform: translateY(-3px);
}
}
.surface-glow {
box-shadow: var(--shadow-card);
}
/* Pre-footer CTA band */
.cta-chrome {
box-shadow:
inset 0 1px 0 rgba(103, 196, 242, 0.08),
0 -36px 72px -32px rgba(0, 0, 0, 0.55),
0 0 72px -28px rgba(157, 125, 255, 0.09),
0 0 56px -30px rgba(103, 196, 242, 0.07);
}
/* ===========================================================
Site-wide aurora — fixed background behind page content
=========================================================== */
/* Stack main content above aurora — exclude fixed chrome (nav, skip link, consent) */
.site-body > .site-shell,
.site-body > .site-footer {
position: relative;
z-index: 1;
}
.site-aurora-anchor {
position: fixed;
inset: 0;
width: 0;
height: 0;
z-index: 0;
overflow: visible;
pointer-events: none;
}
.site-aurora {
position: fixed;
inset: 0 0 auto 0;
height: min(88vh, 960px);
z-index: 0;
pointer-events: none;
overflow: hidden;
isolation: isolate;
contain: layout style paint;
-webkit-mask-image: linear-gradient(
to bottom,
#000 0%,
#000 28%,
rgba(0, 0, 0, 0.94) 48%,
rgba(0, 0, 0, 0.55) 72%,
rgba(0, 0, 0, 0.18) 88%,
transparent 100%
);
mask-image: linear-gradient(
to bottom,
#000 0%,
#000 28%,
rgba(0, 0, 0, 0.94) 48%,
rgba(0, 0, 0, 0.55) 72%,
rgba(0, 0, 0, 0.18) 88%,
transparent 100%
);
}
.site-aurora::after {
display: none;
}
.site-aurora__glow {
position: absolute;
top: -28%;
left: 50%;
width: min(96vmax, 1400px);
height: min(72vmax, 920px);
transform: translate3d(-50%, 0, 0);
background: var(--aurora-core);
filter: blur(56px) saturate(var(--aurora-saturate));
opacity: var(--aurora-core-opacity);
mix-blend-mode: var(--aurora-blend);
backface-visibility: hidden;
animation: site-aurora-core 18s ease-in-out infinite;
}
.site-aurora__layer {
position: absolute;
inset: -8% -12%;
pointer-events: none;
}
.site-aurora__layer--b {
opacity: 0.92;
}
.site-aurora__spin {
position: absolute;
top: -46%;
left: 50%;
width: 150vmax;
height: 150vmax;
transform: translate3d(-50%, 0, 0);
transform-origin: 50% 58%;
background: var(--aurora-spin-a);
filter: blur(var(--aurora-blur)) saturate(var(--aurora-saturate)) brightness(1.04);
opacity: var(--aurora-opacity-a);
mix-blend-mode: var(--aurora-blend);
backface-visibility: hidden;
animation:
site-aurora-rotate var(--aurora-rotate-a) linear infinite,
site-aurora-tense 10s ease-in-out infinite;
transition: opacity 0.65s cubic-bezier(0.2, 0, 0.1, 1);
}
.site-aurora__spin--b {
top: -42%;
width: 128vmax;
height: 128vmax;
transform-origin: 48% 54%;
background: var(--aurora-spin-b);
opacity: var(--aurora-opacity-b);
filter: blur(var(--aurora-blur-b)) saturate(var(--aurora-saturate)) hue-rotate(14deg) brightness(1.02);
animation:
site-aurora-rotate var(--aurora-rotate-b) linear infinite reverse,
site-aurora-tense-b 10s ease-in-out infinite 0.8s;
}
@keyframes site-aurora-rotate {
from {
transform: translate3d(-50%, 0, 0) rotate(0deg);
}
to {
transform: translate3d(-50%, 0, 0) rotate(360deg);
}
}
@keyframes site-aurora-drift-a {
0%,
100% {
transform: translate(0, 0) scale(1);
}
33% {
transform: translate(1.8%, 1.2%) scale(1.015);
}
66% {
transform: translate(-1.4%, -0.8%) scale(0.992);
}
}
@keyframes site-aurora-drift-b {
0%,
100% {
transform: translate(0, 0) scale(1);
}
40% {
transform: translate(-2%, 1%) scale(1.02);
}
70% {
transform: translate(1.2%, -1.4%) scale(0.988);
}
}
/* Opacity + transform only — animating filter/blur repaints every frame */
@keyframes site-aurora-core {
0%,
100% {
opacity: calc(var(--aurora-core-opacity) * 0.9);
transform: translate3d(-50%, 0, 0) scale(1);
}
50% {
opacity: calc(var(--aurora-core-opacity) * 1.06);
transform: translate3d(-50%, 0, 0) scale(1.04);
}
}
@keyframes site-aurora-tense {
0%,
100% {
opacity: calc(var(--aurora-opacity-a) * 0.92);
}
50% {
opacity: calc(var(--aurora-opacity-a) * 1.1);
}
}
@keyframes site-aurora-tense-b {
0%,
100% {
opacity: calc(var(--aurora-opacity-b) * 0.9);
}
50% {
opacity: calc(var(--aurora-opacity-b) * 1.12);
}
}
/* Lighter aurora on small screens — normal blend, smaller layer */
@media (max-width: 900px) {
.site-aurora {
height: min(68vh, 640px);
}
.site-aurora__glow {
display: none;
}
.site-aurora__glow,
.site-aurora__spin {
mix-blend-mode: normal;
filter: blur(36px) saturate(var(--aurora-saturate));
}
.site-aurora__spin {
width: 118vmax;
height: 118vmax;
animation: site-aurora-rotate var(--aurora-rotate-a) linear infinite;
}
.site-aurora__spin--b {
display: none;
}
}
/* Pause heavy motion while scrolling — including fixed aurora (avoids scroll flicker) */
html[data-scrolling="true"] .partners-carousel__track,
html[data-scrolling="true"] .flow-ribbon__path,
html[data-scrolling="true"] .stacked-wires-dash,
html[data-scrolling="true"] .hero-card-sweep,
html[data-scrolling="true"] .floating-card__deck,
html[data-scrolling="true"] .site-aurora__glow,
html[data-scrolling="true"] .site-aurora__spin,
html[data-scrolling="true"] .site-aurora__spin--b,
html[data-scrolling="true"] .hero-aurora {
animation-play-state: paused !important;
}
.partners-carousel--paused .partners-carousel__track {
animation-play-state: paused !important;
}
.site-shell {
contain: layout style;
}
@media (max-width: 900px) {
.site-header[data-scrolled="true"] {
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
}
/* content-visibility removed — caused visible flash/flicker while scrolling on Chrome/Safari */
/* Global reach map — light surface contrast */
html[data-surface="light"] .global-reach {
background: radial-gradient(
ellipse 88% 72% at 50% 42%,
rgba(255, 255, 255, 0.72) 0%,
rgba(238, 242, 250, 0.35) 55%,
transparent 100%
);
border-radius: var(--r-lg);
}
html[data-surface="light"] #markets .global-reach__svg {
filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.85));
}
html[data-surface="light"] .site-aurora {
-webkit-mask-image: linear-gradient(
to bottom,
#000 0%,
rgba(0, 0, 0, 0.92) 32%,
rgba(0, 0, 0, 0.45) 62%,
rgba(0, 0, 0, 0.12) 84%,
transparent 100%
);
mask-image: linear-gradient(
to bottom,
#000 0%,
rgba(0, 0, 0, 0.92) 32%,
rgba(0, 0, 0, 0.45) 62%,
rgba(0, 0, 0, 0.12) 84%,
transparent 100%
);
}
html[data-surface="light"] .site-aurora::after {
display: none;
}
html[data-surface="light"] .site-aurora__glow {
animation-duration: 18s;
}
html[data-surface="light"] .site-aurora__spin {
animation:
site-aurora-rotate var(--aurora-rotate-a) linear infinite,
site-aurora-tense 12s ease-in-out infinite;
}
html[data-surface="light"] .site-aurora__spin--b {
animation:
site-aurora-rotate var(--aurora-rotate-b) linear infinite reverse,
site-aurora-tense-b 14s ease-in-out infinite 0.8s;
}
/* ===========================================================
Hero aurora + marketing ribbons + mockup strip
=========================================================== */
.hero-aurora {
position: absolute;
inset: -30% -20% 10%;
background:
conic-gradient(from 200deg at 50% 45%,
rgba(48, 71, 219, 0.28),
rgba(103, 196, 242, 0.2),
rgba(157, 125, 255, 0.22),
rgba(232, 121, 249, 0.14),
rgba(90, 242, 168, 0.16),
rgba(251, 113, 133, 0.11),
rgba(45, 212, 191, 0.08),
rgba(48, 71, 219, 0.24));
filter: blur(80px);
opacity: 0.68;
animation: hero-aurora-spin 28s linear infinite;
pointer-events: none;
}
@keyframes hero-aurora-spin {
to { transform: rotate(360deg); }
}
.flow-ribbon__path {
stroke-dasharray: 12 18;
animation: flow-ribbon-dash 14s linear infinite;
}
.flow-ribbon__path--delay {
animation-duration: 20s;
animation-direction: reverse;
opacity: 0.85;
}
.flow-ribbon-wrap--minimal {
border-top: 1px solid rgba(103, 196, 242, 0.22);
border-bottom: 1px solid rgba(157, 125, 255, 0.18);
padding: 4px 0 8px;
background: linear-gradient(90deg, rgba(48, 71, 219, 0.05), transparent 35%, transparent 65%, rgba(90, 242, 168, 0.05));
box-shadow:
0 0 40px -18px rgba(103, 196, 242, 0.1),
0 0 36px -20px rgba(157, 125, 255, 0.08),
inset 0 1px 0 rgba(138, 214, 255, 0.05);
}
@keyframes flow-ribbon-dash {
to { stroke-dashoffset: -360; }
}
.stacked-wires-dash {
animation: stacked-wires-dash 12s linear infinite;
}
@keyframes stacked-wires-dash {
to { stroke-dashoffset: -80; }
}
/* ===========================================================
Site atmosphere — geometric washes, rings, node motifs
Sits behind copy (z-index -1 / sibling stacking). Static-first.
=========================================================== */
.site-shell {
position: relative;
}
.site-shell > :not(.page-atmosphere):not(.section-atmosphere) {
position: relative;
z-index: 1;
}
.page-atmosphere,
.section-atmosphere {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
overflow: hidden;
contain: layout style paint;
}
.section > .section-atmosphere,
.section-lg > .section-atmosphere,
.cta-chrome > .section-atmosphere,
.inner-page > .section-atmosphere,
.site-footer > .section-atmosphere {
z-index: -1;
}
.section-atmosphere {
-webkit-mask-image: linear-gradient(
to right,
#000 0%,
#000 15%,
rgba(0, 0, 0, 0.18) 26%,
rgba(0, 0, 0, 0.18) 74%,
#000 85%,
#000 100%
);
mask-image: linear-gradient(
to right,
#000 0%,
#000 15%,
rgba(0, 0, 0, 0.18) 26%,
rgba(0, 0, 0, 0.18) 74%,
#000 85%,
#000 100%
);
}
.page-atmosphere {
z-index: 0;
}
.site-shell > .page-atmosphere {
z-index: 0;
}
.inner-page {
isolation: isolate;
}
.inner-page > .section-atmosphere {
z-index: -1;
}
.atm-svg {
display: block;
width: 100%;
height: 100%;
--atm-stroke: 1px;
}
.atm-svg circle,
.atm-svg ellipse,
.atm-svg path,
.atm-svg rect {
vector-effect: non-scaling-stroke;
}
.atm-svg--orbs .atm-g-rings,
.atm-svg--orbs .atm-g-nodes,
.atm-svg--orbs .atm-g-arcs {
display: none;
}
.atm-svg--rings .atm-g-orbs,
.atm-svg--rings .atm-g-nodes,
.atm-svg--rings .atm-g-arcs {
display: none;
}
.atm-svg--nodes .atm-g-orbs,
.atm-svg--nodes .atm-g-rings,
.atm-svg--nodes .atm-g-arcs {
display: none;
}
.atm-svg--arcs .atm-g-orbs,
.atm-svg--arcs .atm-g-rings,
.atm-svg--arcs .atm-g-nodes {
display: none;
}
.page-atmosphere__grid {
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(var(--c-blue-500-rgb), 0.045) 1px, transparent 1px),
linear-gradient(90deg, rgba(var(--c-blue-500-rgb), 0.045) 1px, transparent 1px);
background-size: 72px 72px;
background-position: center top;
-webkit-mask-image: linear-gradient(
to right,
#000 0%,
#000 11%,
transparent 20%,
transparent 80%,
#000 89%,
#000 100%
);
mask-image: linear-gradient(
to right,
#000 0%,
#000 11%,
transparent 20%,
transparent 80%,
#000 89%,
#000 100%
);
opacity: 0.7;
}
.page-atmosphere__washes {
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 36% 22% at 6% 18%, rgba(var(--c-sky-500-rgb), 0.1), transparent 72%),
radial-gradient(ellipse 32% 20% at 96% 32%, rgba(157, 125, 255, 0.08), transparent 70%),
radial-gradient(ellipse 28% 18% at 8% 58%, rgba(90, 242, 168, 0.05), transparent 68%),
radial-gradient(ellipse 40% 24% at 94% 74%, rgba(var(--c-blue-500-rgb), 0.08), transparent 72%),
radial-gradient(ellipse 34% 16% at 50% 92%, rgba(103, 196, 242, 0.05), transparent 70%);
background-repeat: no-repeat;
}
.page-atmosphere__band {
position: absolute;
left: 0;
right: 0;
height: min(56vw, 680px);
opacity: 0.55;
}
.page-atmosphere__band--a { top: 10%; }
.page-atmosphere__band--b {
top: 32%;
transform: scaleX(-1);
opacity: 0.42;
}
.page-atmosphere__band--c { top: 54%; opacity: 0.48; }
.page-atmosphere__band--d {
top: 76%;
transform: scaleX(-1);
opacity: 0.4;
}
/* Keep hero cards + aurora uncluttered */
.site-shell:has(.hero-section) .page-atmosphere {
-webkit-mask-image: linear-gradient(
to bottom,
transparent 0,
transparent min(58vh, 580px),
#000 min(82vh, 860px),
#000 100%
);
mask-image: linear-gradient(
to bottom,
transparent 0,
transparent min(58vh, 580px),
#000 min(82vh, 860px),
#000 100%
);
}
.site-shell:has(> .inner-page) .page-atmosphere__band--d {
display: none;
}
.section-atmosphere__wash {
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 48% 42% at 0% 12%, rgba(var(--c-sky-500-rgb), 0.08), transparent 68%),
radial-gradient(ellipse 42% 38% at 100% 88%, rgba(157, 125, 255, 0.07), transparent 70%);
}
.section-atmosphere .atm-svg {
position: absolute;
inset: -8% -4%;
width: 108%;
height: 116%;
opacity: 0.72;
}
.section,
.section-lg {
position: relative;
isolation: isolate;
}
.hero-section {
isolation: auto;
}
.section::before,
.section-lg::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
background:
radial-gradient(ellipse 38% 32% at 0% 16%, rgba(var(--c-sky-500-rgb), 0.07), transparent 70%),
radial-gradient(ellipse 34% 28% at 100% 78%, rgba(157, 125, 255, 0.06), transparent 68%),
radial-gradient(ellipse 22% 18% at 100% 10%, rgba(90, 242, 168, 0.045), transparent 70%);
}
.section::after,
.section-lg::after {
content: "";
position: absolute;
z-index: -1;
pointer-events: none;
inset-inline-end: -7%;
top: 6%;
width: min(38vw, 380px);
height: min(38vw, 380px);
border: 1px solid rgba(var(--c-sky-500-rgb), 0.11);
border-radius: 50%;
box-shadow:
0 0 0 36px rgba(var(--c-blue-500-rgb), 0.035),
0 0 72px -18px rgba(var(--c-sky-500-rgb), 0.12);
}
.section:nth-of-type(even)::after,
.section-lg:nth-of-type(even)::after {
inset-inline-end: auto;
inset-inline-start: -9%;
top: auto;
bottom: 8%;
width: min(34vw, 320px);
height: min(34vw, 320px);
border-color: rgba(157, 125, 255, 0.12);
box-shadow:
0 0 0 28px rgba(157, 125, 255, 0.03),
0 0 64px -20px rgba(157, 125, 255, 0.1);
}
.section:nth-of-type(3n)::after {
top: 42%;
width: min(28vw, 260px);
height: min(28vw, 260px);
border-color: rgba(90, 242, 168, 0.1);
box-shadow:
0 0 0 22px rgba(90, 242, 168, 0.025),
0 0 56px -22px rgba(90, 242, 168, 0.08);
}
.hero-section::before,
.hero-section::after {
content: none;
}
.architecture-section::after {
opacity: 0.45;
}
.proof-strip {
position: relative;
isolation: isolate;
}
.proof-strip::before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background:
radial-gradient(ellipse 28% 80% at 8% 50%, rgba(var(--c-sky-500-rgb), 0.08), transparent 70%),
radial-gradient(ellipse 24% 80% at 92% 50%, rgba(157, 125, 255, 0.07), transparent 70%);
}
.proof-strip__inner {
position: relative;
z-index: 1;
}
.partners-carousel {
position: relative;
isolation: isolate;
}
.partners-carousel::before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background:
radial-gradient(ellipse 40% 70% at 12% 50%, rgba(var(--c-blue-500-rgb), 0.06), transparent 72%),
radial-gradient(ellipse 36% 70% at 88% 50%, rgba(103, 196, 242, 0.06), transparent 72%);
}
.partners-carousel > * {
position: relative;
z-index: 1;
}
.cta-chrome {
isolation: isolate;
}
.section-lg.cta-chrome {
padding-block: clamp(72px, 9vw, 120px);
}
.cta-closer {
max-width: 40rem;
}
.cta-closer__title {
max-width: 22ch;
margin-inline: auto;
}
.cta-closer__body {
margin-top: 1.5rem;
max-width: 34rem;
line-height: 1.55;
}
.cta-closer__actions {
margin-top: 1.75rem;
}
.cta-chrome .section-atmosphere {
z-index: -1;
}
.cta-chrome .section-atmosphere .atm-svg {
opacity: 0.5;
}
.cta-chrome::after {
inset-inline-end: 8%;
top: 18%;
width: min(46vw, 460px);
height: min(46vw, 460px);
opacity: 0.85;
}
.site-footer {
position: relative;
isolation: isolate;
overflow-x: clip;
}
.site-footer > .section-atmosphere {
z-index: -1;
}
.site-footer > .container-wide {
position: relative;
z-index: 1;
}
.site-footer-mega-wrap {
position: relative;
}
.site-footer-mega-wrap::before,
.site-footer-mega-wrap::after {
content: "";
position: absolute;
pointer-events: none;
border-radius: 50%;
border: 1px solid rgba(var(--c-sky-500-rgb), 0.1);
}
.site-footer-mega-wrap::before {
width: min(42vw, 420px);
height: min(42vw, 420px);
inset-inline-start: -8%;
top: 50%;
transform: translateY(-50%);
box-shadow: 0 0 0 32px rgba(var(--c-blue-500-rgb), 0.03);
}
.site-footer-mega-wrap::after {
width: min(28vw, 260px);
height: min(28vw, 260px);
inset-inline-end: -2%;
top: 42%;
border-color: rgba(157, 125, 255, 0.12);
}
html[data-surface="light"] .page-atmosphere__grid {
background-image:
linear-gradient(rgba(var(--c-blue-500-rgb), 0.055) 1px, transparent 1px),
linear-gradient(90deg, rgba(var(--c-blue-500-rgb), 0.055) 1px, transparent 1px);
opacity: 0.85;
}
html[data-surface="light"] .page-atmosphere__washes {
background:
radial-gradient(ellipse 36% 22% at 6% 18%, rgba(var(--c-sky-500-rgb), 0.12), transparent 72%),
radial-gradient(ellipse 32% 20% at 96% 32%, rgba(157, 125, 255, 0.09), transparent 70%),
radial-gradient(ellipse 28% 18% at 8% 58%, rgba(90, 242, 168, 0.06), transparent 68%),
radial-gradient(ellipse 40% 24% at 94% 74%, rgba(var(--c-blue-500-rgb), 0.09), transparent 72%),
radial-gradient(ellipse 34% 16% at 50% 92%, rgba(103, 196, 242, 0.06), transparent 70%);
}
html[data-surface="light"] .page-atmosphere__band {
opacity: 0.62;
}
html[data-surface="light"] .section::before,
html[data-surface="light"] .section-lg::before {
background:
radial-gradient(ellipse 38% 32% at 0% 16%, rgba(var(--c-sky-500-rgb), 0.09), transparent 70%),
radial-gradient(ellipse 34% 28% at 100% 78%, rgba(157, 125, 255, 0.07), transparent 68%),
radial-gradient(ellipse 22% 18% at 100% 10%, rgba(90, 242, 168, 0.05), transparent 70%);
}
html[data-surface="light"] .section::after,
html[data-surface="light"] .section-lg::after {
border-color: rgba(var(--c-blue-500-rgb), 0.12);
box-shadow:
0 0 0 36px rgba(var(--c-blue-500-rgb), 0.04),
0 0 64px -16px rgba(var(--c-sky-500-rgb), 0.14);
}
html[data-surface="light"] .section-atmosphere__wash {
background:
radial-gradient(ellipse 48% 42% at 0% 12%, rgba(var(--c-sky-500-rgb), 0.1), transparent 68%),
radial-gradient(ellipse 42% 38% at 100% 88%, rgba(157, 125, 255, 0.08), transparent 70%);
}
html[data-surface="light"] .atm-svg {
opacity: 0.9;
}
@media (max-width: 900px) {
.page-atmosphere__grid {
-webkit-mask-image: linear-gradient(
to bottom,
#000 0%,
transparent 16%,
transparent 84%,
#000 100%
);
mask-image: linear-gradient(
to bottom,
#000 0%,
transparent 16%,
transparent 84%,
#000 100%
);
opacity: 0.45;
}
.page-atmosphere__band--b,
.page-atmosphere__band--d {
display: none;
}
.page-atmosphere__band {
opacity: 0.38;
height: min(70vw, 420px);
}
.section::after,
.section-lg::after {
width: min(58vw, 240px);
height: min(58vw, 240px);
opacity: 0.7;
}
.section-atmosphere .atm-svg {
opacity: 0.5;
}
.section-atmosphere {
-webkit-mask-image: linear-gradient(
to bottom,
#000 0%,
rgba(0, 0, 0, 0.35) 12%,
rgba(0, 0, 0, 0.12) 28%,
rgba(0, 0, 0, 0.12) 72%,
rgba(0, 0, 0, 0.4) 88%,
#000 100%
);
mask-image: linear-gradient(
to bottom,
#000 0%,
rgba(0, 0, 0, 0.35) 12%,
rgba(0, 0, 0, 0.12) 28%,
rgba(0, 0, 0, 0.12) 72%,
rgba(0, 0, 0, 0.4) 88%,
#000 100%
);
}
.site-footer-mega-wrap::before,
.site-footer-mega-wrap::after {
opacity: 0.55;
}
}
@media (prefers-reduced-motion: no-preference) {
html:not([data-reduce-motion="true"]) .page-atmosphere__band--a {
animation: atm-drift 54s ease-in-out infinite;
}
html:not([data-reduce-motion="true"]) .page-atmosphere__band--c {
animation: atm-drift-b 68s ease-in-out infinite;
}
}
@keyframes atm-drift {
0%, 100% { transform: translate3d(0, 0, 0); }
50% { transform: translate3d(0, 12px, 0); }
}
@keyframes atm-drift-b {
0%, 100% { transform: translate3d(0, 0, 0); }
50% { transform: translate3d(0, -10px, 0); }
}
html[data-reduce-motion="true"] .page-atmosphere__band--a,
html[data-reduce-motion="true"] .page-atmosphere__band--c,
html[dir="rtl"] .page-atmosphere__band--b,
html[dir="rtl"] .page-atmosphere__band--d {
animation: none;
}
html[dir="rtl"] .page-atmosphere__band--b,
html[dir="rtl"] .page-atmosphere__band--d {
transform: none;
}
html[dir="rtl"] .page-atmosphere__band--a,
html[dir="rtl"] .page-atmosphere__band--c {
transform: scaleX(-1);
}
/* ---------- Mockup strip — bento: desktop banner + phone row ---------- */
.mockup-strip-section {
border-top: 1px solid var(--line-2);
padding-top: clamp(48px, 6vw, 56px);
padding-bottom: clamp(56px, 7vw, 64px);
}
.mockup-strip-section__header {
margin-bottom: clamp(32px, 4vw, 40px);
}
.mockup-strip-section__lead {
margin: 0;
color: var(--fg-md);
max-width: 560px;
line-height: 1.55;
}
.mockup-strip-bento {
display: flex;
flex-direction: column;
gap: clamp(16px, 2.5vw, 24px);
align-items: stretch;
}
/* Phone screenshots — 3-up row on desktop, stacked deck on mobile */
.mockup-strip-phones {
width: 100%;
}
.mockup-strip-phones-row {
display: none;
}
@media (min-width: 901px) {
.mockup-strip-phones-row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
gap: clamp(12px, 2vw, 20px);
align-items: start;
width: 100%;
}
.mockup-strip-phones-row .mockup-strip__frame--phone {
max-width: 100%;
margin-inline: 0;
}
.mockup-strip-phones-row__card .mockup-strip__caption {
text-align: center;
}
.mockup-strip-phone-stack {
display: none;
}
}
/* Phone screenshots — stacked deck with swap */
.mockup-strip-phone-stack {
width: 100%;
max-width: min(100%, 360px);
margin-inline: auto;
overflow: visible;
touch-action: pan-y;
}
.mockup-strip-phone-stack__deck {
position: relative;
width: 100%;
max-width: 280px;
margin-inline: auto;
overflow: visible;
/* Reserve space so back cards peek from behind */
padding: 0 56px 44px 0;
}
.mockup-strip-phone-stack__item {
position: absolute;
top: 0;
left: 0;
width: calc(100% - 52px);
margin: 0;
padding: 0;
border: 0;
background: transparent;
cursor: pointer;
text-align: inherit;
transform-origin: 50% 0;
transition:
transform 520ms var(--ease),
opacity 420ms var(--ease-out),
filter 420ms var(--ease-out);
-webkit-tap-highlight-color: transparent;
}
.mockup-strip-phone-stack__item--pos-0 {
z-index: 3;
transform: translate(0, 0) scale(1);
opacity: 1;
filter: brightness(1);
}
.mockup-strip-phone-stack__item--pos-1 {
z-index: 2;
transform: translate(26px, 18px) scale(0.93);
opacity: 0.84;
filter: brightness(0.9);
}
.mockup-strip-phone-stack__item--pos-2 {
z-index: 1;
transform: translate(52px, 34px) scale(0.86);
opacity: 0.68;
filter: brightness(0.8);
}
.mockup-strip-phone-stack__item.is-stack-hidden {
z-index: 0;
opacity: 0;
visibility: hidden;
pointer-events: none;
}
.mockup-strip-phone-stack__item:focus-visible {
outline: none;
}
.mockup-strip-phone-stack__item:focus-visible .mockup-strip__frame {
box-shadow:
0 0 0 2px var(--accent-ui),
0 28px 56px -32px rgba(0, 0, 0, 0.75);
}
.mockup-strip-phone-stack__card {
width: 100%;
pointer-events: none;
}
.mockup-strip-phone-stack__card.mockup-strip__card:hover {
transform: none;
}
.mockup-strip-phone-stack__card .mockup-strip__frame--phone {
max-width: 100%;
margin-inline: 0;
}
.mockup-strip-phone-stack__label {
margin: clamp(14px, 2.5vw, 18px) 0 10px;
text-align: center;
font-size: 10px;
letter-spacing: 0.1em;
color: var(--fg-dim);
}
.mockup-strip-phone-stack__dots {
display: flex;
justify-content: center;
align-items: center;
gap: 8px;
}
.mockup-strip-phone-stack__dot {
width: 7px;
height: 7px;
padding: 0;
border: 0;
border-radius: 999px;
background: var(--line-3);
cursor: pointer;
transition: background 200ms var(--ease), transform 200ms var(--ease);
}
.mockup-strip-phone-stack__dot.is-active {
background: var(--accent-ui);
transform: scale(1.15);
}
.mockup-strip-phone-stack__dot:focus-visible {
outline: 2px solid var(--accent-ui);
outline-offset: 2px;
}
.mockup-strip__card {
margin: 0;
display: flex;
flex-direction: column;
gap: 0;
min-width: 0;
transition: transform 280ms var(--ease-out), border-color 200ms var(--ease), box-shadow 320ms var(--ease-out);
}
.mockup-strip__card:hover {
transform: translateY(-3px);
}
.mockup-strip__frame {
overflow: hidden;
border: 1px solid var(--line-2);
background: var(--bg-2);
box-shadow:
0 24px 48px -28px rgba(0, 0, 0, 0.65),
0 0 44px -22px rgba(103, 196, 242, 0.08),
0 0 36px -22px rgba(157, 125, 255, 0.06);
}
.mockup-strip__card:hover .mockup-strip__frame {
border-color: rgba(138, 214, 255, 0.4);
box-shadow:
0 28px 56px -32px rgba(0, 0, 0, 0.75),
0 0 52px -10px rgba(103, 196, 242, 0.18),
0 0 40px -12px rgba(157, 125, 255, 0.12);
}
.mockup-strip__frame--desktop {
border-radius: 14px;
}
.mockup-strip__frame--phone {
border-radius: 32px;
max-width: min(100%, 272px);
margin-inline: auto;
width: 100%;
padding: 10px;
background: linear-gradient(160deg, #1a1a22 0%, #08080c 100%);
box-shadow:
0 24px 48px -28px rgba(0, 0, 0, 0.72),
inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.mockup-strip__browser-chrome {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 14px;
border-bottom: 1px solid var(--line-2);
background: rgba(0, 0, 0, 0.35);
}
.mockup-strip__browser-url {
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 10px;
letter-spacing: 0.06em;
color: var(--fg-dim);
padding: 5px 10px;
border-radius: 6px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid var(--line-2);
}
.mockup-strip__phone-bezel {
display: flex;
justify-content: center;
padding: 6px 0 2px;
}
.mockup-strip__phone-notch {
width: 28%;
max-width: 88px;
height: 5px;
border-radius: 999px;
background: rgba(0, 0, 0, 0.55);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.mockup-strip__stage {
position: relative;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
background:
radial-gradient(ellipse 90% 70% at 50% 0%, rgba(103, 196, 242, 0.08), transparent 55%),
#050508;
}
.mockup-strip__frame--phone .mockup-strip__stage {
border-radius: 22px;
border: 1px solid rgba(255, 255, 255, 0.06);
}
.mockup-strip__img {
width: 100%;
height: 100%;
object-fit: contain;
object-position: center;
display: block;
transition: transform 480ms var(--ease-out);
}
.mockup-strip__card:hover .mockup-strip__img {
transform: scale(1.015);
}
.mockup-strip__caption {
margin: 0;
padding: 12px 4px 0;
font-size: 10px;
letter-spacing: 0.1em;
color: var(--fg-dim);
text-align: center;
}
.mockup-strip__card--desktop .mockup-strip__caption {
text-align: start;
padding-inline: 2px;
}
@media (max-width: 900px) {
.mockup-strip-phone-stack__deck {
max-width: min(72vw, 280px);
padding: 0 64px 48px 4px;
}
.mockup-strip-phone-stack__item--pos-1 {
transform: translate(28px, 20px) scale(0.92);
}
.mockup-strip-phone-stack__item--pos-2 {
transform: translate(56px, 38px) scale(0.85);
}
}
@media (max-width: 640px) {
.mockup-strip-phone-stack {
max-width: min(100%, 320px);
}
.mockup-strip-phone-stack__deck {
max-width: min(68vw, 260px);
padding: 0 56px 42px 0;
}
.mockup-strip-phone-stack__item {
width: calc(100% - 48px);
}
.mockup-strip-phone-stack__item--pos-1 {
transform: translate(22px, 16px) scale(0.92);
}
.mockup-strip-phone-stack__item--pos-2 {
transform: translate(44px, 30px) scale(0.85);
}
}
html[data-reduce-motion="true"] .mockup-strip-phone-stack__item {
transition-duration: 200ms;
}
/* English / screenshot UI: stay LTR when document is RTL (Arabic locale) */
.ltr-mock {
direction: ltr;
unicode-bidi: isolate;
}
/* Hero floating card stack — always dark UI on card chrome */
.floating-card {
container-type: inline-size;
container-name: floating-card;
width: 100%;
/* Stack bounding box (offset pair of ID-1 cards), not the card itself. */
aspect-ratio: 1.32 / 1;
perspective: clamp(720px, 140cqi, 1200px);
perspective-origin: 42% 40%;
position: relative;
touch-action: pan-y;
--fc-frx: 6deg;
--fc-fry: -9deg;
--fc-fnx: 0;
--fc-fny: 0;
--fc-fbob: 0px;
--fc-brx: 8deg;
--fc-bry: -6deg;
--fc-bnx: 0;
--fc-bny: 0;
--fc-bbob: 0px;
--fc-fz: 68px;
--fc-bz: -118px;
--fc-lx: 0;
--fc-ly: 0;
--fc-blx: 0;
--fc-bly: 0;
--fc-sx: 0;
--fc-sy: 0;
--fc-pad: clamp(11px, 6.2cqi, 26px);
--fc-radius: clamp(12px, 4.6cqi, 18px);
--fc-card-w: 84%;
--fc-back-x: 18%;
--fc-back-y: 16%;
--fc-shadow-umbra: rgba(12, 18, 36, 0.14);
--fc-shadow-penumbra: rgba(14, 22, 42, 0.06);
--fc-shadow-ambient: rgba(14, 22, 42, 0.03);
--fc-shadow-tint: rgba(48, 71, 219, 0.04);
color: var(--fg-md);
}
.floating-card__scene {
position: absolute;
inset: 0;
transform-style: preserve-3d;
}
.floating-card__floor {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
}
.floating-card__deck {
position: absolute;
inset: 0;
z-index: 1;
transform-style: preserve-3d;
}
.floating-card__glow {
position: absolute;
right: -14%;
bottom: -32%;
width: 72%;
height: 70%;
background: radial-gradient(
closest-side,
rgba(48, 71, 219, 0.62) 0%,
rgba(103, 196, 242, 0.22) 36%,
transparent 72%
);
transform: translate3d(calc(var(--fc-lx) * -26px), calc(var(--fc-ly) * -18px), -80px);
filter: blur(2px);
pointer-events: none;
}
.floating-card__glow::after {
content: "";
position: absolute;
left: -95%;
top: -78%;
width: 78%;
height: 78%;
background: radial-gradient(
closest-side,
rgba(255, 132, 72, 0.28) 0%,
rgba(103, 196, 242, 0.14) 42%,
transparent 70%
);
transform: translate3d(calc(var(--fc-lx) * 16px), calc(var(--fc-ly) * 12px), 0);
pointer-events: none;
}
.floating-card__shadow {
position: absolute;
pointer-events: none;
border-radius: 50%;
}
.floating-card__shadow--back {
left: 34%;
right: 4%;
top: auto;
bottom: -2%;
height: 24%;
background: radial-gradient(ellipse 75% 55% at 50% 45%, var(--fc-shadow-penumbra), transparent 74%);
filter: blur(34px);
transform: translate3d(calc(12px + var(--fc-sx) * 12px), calc(10px + var(--fc-sy) * 7px), -168px) scaleY(0.36);
}
.floating-card__shadow--front {
display: none;
}
.floating-card__back,
.floating-card__front,
.floating-card__slab {
position: absolute;
display: flex;
flex-direction: column;
justify-content: space-between;
overflow: hidden;
box-sizing: border-box;
width: var(--fc-card-w);
aspect-ratio: 85.6 / 53.98;
height: auto;
flex-shrink: 0;
}
.floating-card__slab {
display: block;
}
.floating-card__back {
left: var(--fc-back-x);
top: var(--fc-back-y);
z-index: 0;
padding: var(--fc-pad);
border-radius: clamp(11px, 3.8cqi, 16px);
background:
radial-gradient(ellipse 86% 72% at 92% 8%, rgba(90, 242, 168, 0.2), transparent 54%),
radial-gradient(ellipse 55% 48% at 6% 100%, rgba(103, 196, 242, 0.18), transparent 52%),
linear-gradient(168deg, #1a5f66 0%, #0d3c4a 48%, #071e2c 100%);
border: 1px solid rgba(120, 236, 210, 0.28);
transform-origin: 76% 70%;
transform:
translate3d(
calc(28px + var(--fc-bnx) * 36px),
calc(22px + var(--fc-bny) * 28px + var(--fc-bbob)),
var(--fc-bz)
)
rotateX(var(--fc-brx))
rotateY(var(--fc-bry));
box-shadow:
0 0 0 1px rgba(120, 236, 210, 0.1) inset,
inset 0 -14px 22px rgba(0, 28, 36, 0.32);
}
.floating-card__front-top {
position: relative;
z-index: 2;
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5em;
flex-shrink: 0;
}
.floating-card__word {
font-size: clamp(11px, 3.8cqi, 15px);
font-weight: 500;
letter-spacing: -0.03em;
color: #fff;
line-height: 1;
}
.floating-card__nfc {
width: clamp(14px, 5cqi, 20px);
height: clamp(14px, 5cqi, 20px);
color: rgba(255, 255, 255, 0.88);
flex-shrink: 0;
}
.floating-card__slab {
left: 0;
top: 1%;
z-index: 1;
border-radius: var(--fc-radius);
background: linear-gradient(180deg, #222326 0%, #141518 100%);
transform-origin: 76% 70%;
transform:
translate3d(calc(var(--fc-fnx) * 8px), calc(var(--fc-fny) * 6px + var(--fc-fbob)), calc(var(--fc-fz) - 5px))
rotateX(var(--fc-frx))
rotateY(var(--fc-fry));
box-shadow: none;
pointer-events: none;
}
.floating-card__front {
left: 0;
top: 1%;
z-index: 2;
padding: var(--fc-pad);
border-radius: var(--fc-radius);
isolation: isolate;
background: linear-gradient(165deg, #1c1d20 0%, #141518 46%, #0e0f12 100%);
border: 1px solid rgba(255, 255, 255, 0.08);
box-shadow:
0 0 0 1px rgba(255, 255, 255, 0.04) inset,
inset 0 -10px 18px rgba(0, 0, 0, 0.18);
transform-origin: 76% 70%;
transform:
translate3d(calc(var(--fc-fnx) * 8px), calc(var(--fc-fny) * 6px + var(--fc-fbob)), var(--fc-fz))
rotateX(var(--fc-frx))
rotateY(var(--fc-fry));
}
.floating-card__motif {
position: absolute;
right: -6%;
bottom: -10%;
width: 62%;
height: 108%;
z-index: 1;
color: rgba(255, 255, 255, 0.22);
mix-blend-mode: overlay;
pointer-events: none;
opacity: 0.7;
filter: drop-shadow(0 0 0.4px rgba(255, 255, 255, 0.35));
}
.floating-card__motif--back {
right: auto;
left: -10%;
bottom: -18%;
width: 48%;
height: 86%;
opacity: 0.45;
transform: scaleX(-1);
}
.floating-card__motif--signal {
right: -14%;
bottom: -18%;
left: auto;
width: 82%;
height: 122%;
color: rgba(214, 255, 246, 0.62);
opacity: 1;
mix-blend-mode: screen;
filter: none;
transform: none;
}
.floating-card__skin {
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
z-index: 0;
overflow: hidden;
}
.floating-card__skin--ebony {
background:
repeating-linear-gradient(
93deg,
rgba(255, 228, 196, 0.03) 0 0.6px,
transparent 0.6px 3.2px,
rgba(0, 0, 0, 0.16) 3.2px 3.9px,
transparent 3.9px 7.5px
),
repeating-linear-gradient(
88deg,
transparent 0 16px,
rgba(18, 12, 8, 0.28) 16px 18px,
transparent 18px 44px,
rgba(72, 52, 34, 0.1) 44px 47px,
transparent 47px 78px
);
mix-blend-mode: overlay;
opacity: 0.55;
}
.floating-card__skin--ebony::before {
content: "";
position: absolute;
inset: -8% -20%;
background-image: url("data:image/svg+xml;utf8,");
background-size: 140% 100%;
background-position: center;
mix-blend-mode: soft-light;
opacity: 0.45;
}
.floating-card__skin--ebony::after {
content: "";
position: absolute;
inset: 0;
background-image: url("data:image/svg+xml;utf8,");
background-size: 160px 160px;
mix-blend-mode: overlay;
opacity: 0.22;
}
.floating-card__skin--leather {
background:
radial-gradient(ellipse 70% 55% at 30% 20%, rgba(255, 236, 214, 0.04), transparent 50%),
repeating-linear-gradient(
18deg,
rgba(255, 228, 196, 0.02) 0 1px,
transparent 1px 9px
);
mix-blend-mode: overlay;
opacity: 0.5;
}
.floating-card__skin--leather::before {
content: "";
position: absolute;
inset: 0;
background-image: url("data:image/svg+xml;utf8,");
background-size: 140px 140px;
mix-blend-mode: soft-light;
opacity: 0.5;
}
.floating-card__skin--leather::after {
content: "";
position: absolute;
inset: 0;
background-image: url("data:image/svg+xml;utf8,");
background-size: 72px 72px;
mix-blend-mode: multiply;
opacity: 0.18;
}
.floating-card__skin--weave {
background:
repeating-linear-gradient(
45deg,
rgba(4, 22, 28, 0.34) 0 2px,
rgba(168, 255, 228, 0.07) 2px 3px,
transparent 3px 9px
),
repeating-linear-gradient(
-45deg,
rgba(2, 16, 24, 0.3) 0 2px,
rgba(103, 196, 242, 0.08) 2px 3px,
transparent 3px 9px
);
mix-blend-mode: multiply;
opacity: 0.95;
}
.floating-card__skin--weave::before {
content: "";
position: absolute;
inset: 0;
background-image: url("data:image/svg+xml;utf8,");
background-size: 110px 120px;
mix-blend-mode: soft-light;
opacity: 0.78;
}
.floating-card__skin--weave::after {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 70% 80% at 82% 108%, rgba(90, 242, 168, 0.16), transparent 55%),
radial-gradient(ellipse 50% 40% at 8% 0%, rgba(255, 255, 255, 0.12), transparent 48%);
pointer-events: none;
}
.floating-card__core {
position: relative;
z-index: 2;
flex: 1 1 auto;
display: flex;
align-items: center;
justify-content: center;
min-height: 0;
}
.floating-card__mark {
width: clamp(56px, 22cqi, 96px);
display: flex;
align-items: center;
}
.floating-card__mark img {
width: 100%;
height: auto;
display: block;
opacity: 0.92;
}
.floating-card__mark--light {
width: clamp(64px, 24cqi, 108px);
}
.floating-card__mark--light img {
opacity: 1;
filter: drop-shadow(0 2px 8px rgba(8, 24, 48, 0.35));
}
.floating-card__glare {
position: absolute;
inset: -4%;
background: radial-gradient(
ellipse 140% 120% at calc(50% + var(--fc-lx) * 24%) calc(28% + var(--fc-ly) * 20%),
rgba(255, 255, 255, 0.09) 0%,
rgba(255, 255, 255, 0.03) 38%,
transparent 68%
);
mix-blend-mode: screen;
pointer-events: none;
z-index: 1;
}
.floating-card__grain {
position: absolute;
inset: 0;
opacity: 0.14;
mix-blend-mode: overlay;
pointer-events: none;
z-index: 3;
background-image: url("data:image/svg+xml;utf8,");
background-size: 140px 140px;
}
.floating-card__front-sheen {
position: absolute;
inset: -55%;
background: linear-gradient(
calc(118deg + var(--fc-lx) * 14deg),
transparent 12%,
rgba(255, 255, 255, 0.04) 28%,
rgba(255, 255, 255, 0.18) 46%,
rgba(255, 255, 255, 0.4) 50%,
rgba(255, 255, 255, 0.12) 54%,
transparent 78%
);
background-size: 160% 160%;
background-position: calc(50% + var(--fc-lx) * 18%) calc(50% + var(--fc-ly) * 18%);
pointer-events: none;
z-index: 1;
opacity: 0.55;
mix-blend-mode: screen;
}
.floating-card__front-edge {
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
box-shadow:
inset 0 0 0 1px rgba(255, 255, 255, 0.05),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
z-index: 4;
}
.floating-card__logo {
display: block;
height: clamp(9px, 2.9cqi, 13px);
width: auto;
max-width: 55%;
}
.floating-card__favicon {
display: block;
flex-shrink: 0;
width: clamp(16px, 5.7cqi, 24px);
height: clamp(16px, 5.7cqi, 24px);
object-fit: contain;
opacity: 0.96;
filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35));
}
.floating-card__front-mid {
position: relative;
z-index: 1;
display: flex;
align-items: center;
gap: clamp(6px, 3.8cqi, 16px);
min-width: 0;
flex: 1 1 auto;
margin-block: clamp(4px, 2cqi, 10px);
}
.floating-card__chip {
position: absolute;
left: 0;
top: 48%;
transform: translateY(-50%);
z-index: 3;
flex-shrink: 0;
overflow: hidden;
width: clamp(30px, 11.2cqi, 46px);
aspect-ratio: 46 / 34;
border-radius: clamp(3px, 1.2cqi, 6px);
background:
linear-gradient(
calc(145deg + var(--fc-lx) * 28deg),
#f4f5f7 0%,
#c8ccd3 24%,
#9aa0aa 50%,
#6d7380 78%,
#dfe2e8 100%
);
border: 1px solid rgba(255, 255, 255, 0.28);
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.45) inset,
0 3px 8px rgba(0, 0, 0, 0.4) inset,
0 2px 6px rgba(0, 0, 0, 0.3);
}
.floating-card__back .floating-card__chip {
background:
linear-gradient(
calc(145deg + var(--fc-blx) * 28deg),
#f4f1e6 0%,
#d9c48a 22%,
#a89058 48%,
#6f5a32 72%,
#3d341c 100%
);
border-color: rgba(255, 236, 190, 0.35);
}
.floating-card__chip::after {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(
circle at calc(42% + var(--fc-lx) * 40%) calc(32% + var(--fc-ly) * 32%),
rgba(255, 255, 255, 0.72),
transparent 52%
);
pointer-events: none;
}
.floating-card__chip-line {
position: absolute;
left: 13%;
right: 13%;
height: 9%;
background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.32), transparent);
}
.floating-card__chip-line:nth-child(1) {
top: 20%;
}
.floating-card__chip-line:nth-child(2) {
top: 41%;
}
.floating-card__chip-line:nth-child(3) {
top: 62%;
}
.floating-card__chip-slot {
position: absolute;
left: 46%;
top: 0;
bottom: 0;
width: 2%;
background: rgba(0, 0, 0, 0.42);
}
.floating-card__number {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: clamp(2px, 1.1cqi, 8px);
flex: 1 1 auto;
min-width: 0;
font-size: clamp(10px, 4.6cqi, 18px);
letter-spacing: 0.055em;
color: var(--t-hi);
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.floating-card__number span {
flex: 0 1 auto;
min-width: 0;
}
.floating-card__meta {
position: relative;
z-index: 2;
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: clamp(6px, 2.5cqi, 14px);
min-width: 0;
flex-shrink: 0;
}
.floating-card__meta-value {
font-size: clamp(9px, 2.9cqi, 13px);
font-weight: 500;
letter-spacing: 0.04em;
color: #fff;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.floating-card__brand,
.floating-card__brand-sm {
display: block;
width: clamp(34px, 13.5cqi, 58px);
height: auto;
object-fit: contain;
flex-shrink: 0;
}
.floating-card__brand {
opacity: 0.98;
filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.25));
}
.floating-card__brand-sm {
opacity: 0.94;
}
@container floating-card (max-width: 300px) {
.floating-card__number {
font-size: clamp(9px, 4.2cqi, 14px);
letter-spacing: 0.04em;
gap: clamp(1px, 0.9cqi, 5px);
}
.floating-card__chip {
width: clamp(28px, 10.5cqi, 40px);
}
}
@media (max-width: 900px) {
.floating-card {
--fc-back-x: 14%;
--fc-back-y: 12%;
--fc-fz: 56px;
--fc-bz: -100px;
}
}
@media (max-width: 480px) {
.floating-card {
--fc-frx: 5deg;
--fc-fry: -7deg;
--fc-brx: 7deg;
--fc-bry: -5deg;
--fc-back-x: 12%;
--fc-back-y: 10%;
--fc-fz: 48px;
--fc-bz: -88px;
--fc-card-w: 86%;
}
}
/* POS device mockup — always dark (SwitchIllustration, …) */
.pos-terminal {
color: var(--fg-md);
}
/* Product mockup chrome — always dark (SwitchViz, GatewayViz, …) */
.black-panel {
color: var(--fg-md);
border-radius: 12px;
overflow: hidden;
border: 1px solid var(--on-dark-line-2);
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0.004) 28%, rgba(0, 0, 0, 0.2) 100%),
linear-gradient(180deg, var(--on-dark-bg-3) 0%, var(--on-dark-bg-2) 42%, var(--on-dark-bg-1) 100%);
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.04) inset,
0 40px 80px -30px rgba(0, 0, 0, 0.82),
0 0 52px -18px rgba(var(--c-sky-500-rgb), 0.09);
}
html[data-surface="light"] .black-panel,
html[data-surface="light"] .black-panel .viz-rule-row,
html[data-surface="light"] .pos-terminal,
html[data-surface="light"] .markets-tiles,
html[data-surface="light"] .team-member-card,
html[data-surface="light"] .proof-strip {
color-scheme: dark;
}
.team-member-card {
border-radius: 14px;
overflow: hidden;
border: 1px solid var(--line-2);
background: var(--bg-3);
min-width: 0;
transition: border-color 280ms var(--ease), box-shadow 320ms var(--ease-out), transform 320ms var(--ease-out);
}
.team-member-card__photo {
aspect-ratio: 3 / 4;
position: relative;
background: var(--bg-2);
overflow: hidden;
}
.team-member-card__photo img {
transition: transform 720ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
.team-member-card:hover {
border-color: rgba(138, 214, 255, 0.28);
box-shadow: var(--shadow-card);
transform: translateY(-3px);
}
.team-member-card:hover .team-member-card__photo img {
transform: scale(1.045);
}
}
.team-member-card__body {
padding: 18px 18px 20px;
}
.black-panel__chrome {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: 10px;
min-width: 0;
padding: 11px 16px 10px 14px;
border-bottom: 1px solid var(--on-dark-line-2);
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.055) 0%, rgba(255, 255, 255, 0.02) 48%, rgba(0, 0, 0, 0.12) 100%);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.black-panel__title {
font-size: 11px;
color: var(--fg-md);
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
text-align: center;
justify-self: stretch;
letter-spacing: 0.04em;
opacity: 0.92;
}
.black-panel .chip--mockup {
background: rgba(255, 255, 255, 0.06);
border-color: rgba(255, 255, 255, 0.14);
color: rgba(255, 255, 255, 0.78);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.black-panel .chip--mockup.chip--success {
color: var(--c-mint);
border-color: rgba(90, 242, 168, 0.4);
background: rgba(90, 242, 168, 0.12);
box-shadow:
0 0 24px -10px rgba(90, 242, 168, 0.35),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.black-panel .chip--mockup.chip--success .dot {
background: var(--c-mint);
box-shadow: 0 0 8px rgba(90, 242, 168, 0.6);
}
.black-panel .chip--mockup.chip--info {
color: var(--accent-ui);
border-color: rgba(var(--accent-ui-rgb), 0.4);
background: rgba(var(--accent-ui-rgb), 0.12);
box-shadow:
0 0 22px -10px rgba(var(--accent-ui-rgb), 0.28),
inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.black-panel .chip--mockup.chip--warn {
color: var(--c-warn);
border-color: rgba(255, 184, 77, 0.4);
background: rgba(255, 184, 77, 0.1);
}
.black-panel__footer {
padding: 16px 28px;
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
background: rgba(var(--c-sky-500-rgb), 0.04);
border-top: 1px solid var(--line-2);
}
.viz-rule-row {
display: grid;
grid-template-columns: 22px minmax(0, 1fr);
grid-template-rows: auto auto;
column-gap: clamp(10px, 2.5vw, 16px);
row-gap: 4px;
align-items: start;
padding: 12px clamp(10px, 3vw, 14px);
border-radius: 8px;
background: rgba(255, 255, 255, 0.015);
border: 1px solid var(--line-1);
min-width: 0;
}
.viz-rule-row__idx {
grid-column: 1;
grid-row: 1 / 3;
align-self: start;
padding-top: 1px;
font-size: 11px;
color: var(--t-dim);
width: 22px;
flex-shrink: 0;
}
.viz-rule-row__cond {
grid-column: 2;
grid-row: 1;
font-size: 12.5px;
color: var(--fg-md);
min-width: 0;
overflow-wrap: break-word;
word-break: normal;
line-height: 1.35;
}
.viz-rule-row__cond-kw {
color: var(--accent-ui);
}
.viz-rule-row__act {
grid-column: 2;
grid-row: 2;
font-size: 12.5px;
min-width: 0;
overflow-wrap: break-word;
word-break: normal;
line-height: 1.35;
}
/* ---------- Partners — infinite horizontal marquee ---------- */
.partners-carousel {
--partners-marquee-duration: 44s;
border-top: 1px solid var(--line-2);
}
.partners-carousel__header {
margin-bottom: 28px;
}
.partners-carousel__track {
display: flex;
flex-wrap: nowrap;
width: max-content;
align-items: center;
animation: partners-marquee var(--partners-marquee-duration) linear infinite;
will-change: transform;
}
.partners-carousel__group {
display: flex;
flex-shrink: 0;
align-items: center;
}
.partners-carousel__cell {
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: center;
height: 52px;
padding: 0 36px;
box-sizing: border-box;
}
.partners-carousel__logo-wrap {
display: block;
line-height: 0;
}
.partners-carousel__logo {
display: block;
height: 36px;
width: auto;
max-width: 100%;
object-fit: contain;
object-position: 50% 50%;
opacity: 0.88;
transition:
opacity 220ms var(--ease),
filter 280ms var(--ease);
}
html[data-surface="light"] .partners-carousel__logo {
filter: brightness(0);
}
html[data-surface="dark"] .partners-carousel__logo {
filter: brightness(0) invert(1);
}
.partners-carousel__cell:hover .partners-carousel__logo,
.partners-carousel__logo-wrap:hover .partners-carousel__logo,
.partners-carousel__static-cell:hover .partners-carousel__logo {
filter: none !important;
opacity: 1;
}
.partners-carousel:hover .partners-carousel__track {
animation-play-state: paused;
}
.partners-carousel--paused:hover .partners-carousel__track {
animation-play-state: paused !important;
}
@keyframes partners-marquee {
from {
transform: translate3d(0, 0, 0);
}
to {
transform: translate3d(-50%, 0, 0);
}
}
.partners-carousel__viewport {
overflow: hidden;
width: 100%;
border-block: 1px solid var(--line-2);
background: color-mix(in srgb, var(--t-hi) 3%, transparent);
-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 7%, #000 93%, transparent 100%);
mask-image: linear-gradient(90deg, transparent 0%, #000 7%, #000 93%, transparent 100%);
}
/* Reduced motion: manual horizontal scroll instead of wrapped static grid */
.partners-carousel--reduced .partners-carousel__viewport,
html[data-reduce-motion="true"] .partners-carousel__viewport {
overflow-x: auto;
overflow-y: hidden;
overscroll-behavior-x: contain;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
cursor: grab;
}
.partners-carousel--reduced .partners-carousel__viewport::-webkit-scrollbar,
html[data-reduce-motion="true"] .partners-carousel__viewport::-webkit-scrollbar {
display: none;
}
.partners-carousel--reduced .partners-carousel__viewport:active,
html[data-reduce-motion="true"] .partners-carousel__viewport:active {
cursor: grabbing;
}
.partners-carousel__static {
display: flex;
flex-wrap: wrap;
gap: 24px 40px;
align-items: center;
justify-content: center;
min-height: 52px;
padding: 20px 24px;
border: 1px solid var(--line-2);
border-radius: var(--r-lg, 12px);
background: color-mix(in srgb, var(--t-hi) 3%, transparent);
}
.partners-carousel__static-cell {
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: center;
height: 52px;
}
@media (prefers-reduced-motion: reduce) {
.partners-carousel__track {
animation: none !important;
}
.partners-carousel:hover .partners-carousel__track {
animation-play-state: running;
}
.site-aurora__glow,
.site-aurora__layer,
.site-aurora__spin,
.site-aurora__spin--b {
animation: none !important;
}
.site-aurora__glow {
opacity: 0.55;
}
.site-aurora__spin {
opacity: 0.5;
}
.site-aurora__spin--b {
opacity: 0.38;
}
.hero-aurora {
animation: none;
opacity: 0.35;
}
.flow-ribbon__path,
.flow-ribbon__path--delay,
.stacked-wires-dash {
animation: none;
stroke-dashoffset: 0;
}
.mockup-strip__card {
box-shadow: 0 16px 32px -26px rgba(0, 0, 0, 0.68) !important;
}
.mockup-strip__card:hover {
transform: none;
box-shadow: 0 18px 36px -24px rgba(0, 0, 0, 0.72) !important;
}
.mockup-strip__card:hover .mockup-strip__img {
transform: none;
}
}
/* Nav “Reduce motion” toggle — mirrors prefers-reduced-motion rules above */
html[data-reduce-motion="true"] .partners-carousel__track {
animation: none !important;
}
html[data-reduce-motion="true"] .partners-carousel__logo {
opacity: 1;
}
/* Lite motion (default) — static aurora spins; subtle core pulse only */
html[data-reduce-motion="true"] .site-aurora__spin,
html[data-reduce-motion="true"] .site-aurora__spin--b {
animation: none !important;
opacity: 0.52;
}
html[data-reduce-motion="true"] .site-aurora__glow {
animation: site-aurora-core 24s ease-in-out infinite;
opacity: 0.58;
}
html[data-reduce-motion="true"] .hero-aurora {
animation: none;
opacity: 0.35;
}
html[data-reduce-motion="true"] .floating-card__scene,
html[data-reduce-motion="true"] .floating-card__back,
html[data-reduce-motion="true"] .floating-card__front,
html[data-reduce-motion="true"] .floating-card__slab,
html[data-reduce-motion="true"] .floating-card__glare,
html[data-reduce-motion="true"] .floating-card__holo,
html[data-reduce-motion="true"] .floating-card__chip,
html[data-reduce-motion="true"] .floating-card__chip::after {
transition-duration: 0s !important;
}
@media (prefers-reduced-motion: reduce) {
.floating-card__deck {
animation: none !important;
}
}
html[data-reduce-motion="true"] .flow-ribbon__path,
html[data-reduce-motion="true"] .flow-ribbon__path--delay,
html[data-reduce-motion="true"] .stacked-wires-dash {
animation: none;
stroke-dashoffset: 0;
}
/* ---------- Manifesto (#about) — editorial layout ---------- */
.manifesto-section {
position: relative;
border-top: 1px solid var(--line-2);
background:
radial-gradient(ellipse 75% 60% at 12% 0%, rgba(48, 71, 219, 0.18), transparent 52%),
radial-gradient(ellipse 55% 45% at 88% 8%, rgba(103, 196, 242, 0.12), transparent 50%),
radial-gradient(ellipse 50% 42% at 55% 95%, rgba(157, 125, 255, 0.10), transparent 52%),
radial-gradient(ellipse 40% 35% at 95% 70%, rgba(90, 242, 168, 0.07), transparent 50%);
}
.manifesto-section .rail-grid .manifesto-section__index {
justify-self: end;
align-self: start;
text-align: right;
max-width: 200px;
}
@media (max-width: 900px) {
.manifesto-section .rail-grid .manifesto-section__index {
justify-self: start;
text-align: left;
max-width: none;
}
}
.manifesto-hero {
display: grid;
grid-template-columns: minmax(0, 1.12fr) minmax(260px, 0.88fr);
gap: clamp(36px, 5vw, 72px);
align-items: stretch;
}
.manifesto-hero__main {
min-width: 0;
}
.manifesto-lead {
margin: 0;
font-size: clamp(1.85rem, 3.2vw, 3rem);
line-height: 1.14;
letter-spacing: -0.035em;
font-weight: 500;
color: var(--t-hi);
text-wrap: balance;
max-width: 24ch;
}
.manifesto-pull {
position: relative;
margin: clamp(22px, 3.5vw, 36px) 0 0;
padding-left: calc(clamp(18px, 2.5vw, 28px) + 6px);
border-left: none;
font-family: var(--font-serif);
font-style: italic;
font-weight: 400;
font-size: clamp(1.65rem, 2.85vw, 2.65rem);
line-height: 1.22;
letter-spacing: -0.02em;
color: var(--t-hi);
text-wrap: pretty;
max-width: 26ch;
}
.manifesto-pull::before {
content: "";
position: absolute;
left: 0;
top: 0.12em;
bottom: 0.12em;
width: 3px;
border-radius: 4px;
background: linear-gradient(180deg, #8ad6ff 0%, #9d7dff 42%, #5af2a8 100%);
box-shadow: 0 0 20px rgba(103, 196, 242, 0.35);
}
.manifesto-pull-accent {
color: var(--accent-ui);
filter: none;
}
.manifesto-pull-rest {
font-family: var(--font-sans);
font-style: normal;
font-weight: 400;
font-size: 0.82em;
letter-spacing: -0.02em;
color: var(--fg-md);
}
.manifesto-body {
margin: clamp(20px, 2.5vw, 28px) 0 0;
font-size: 1.125rem;
line-height: 1.65;
color: var(--fg-md);
max-width: 52ch;
}
.manifesto-pills {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: clamp(22px, 3vw, 30px);
}
.manifesto-pill {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--fg-md);
padding: 7px 12px;
border-radius: 999px;
border: 1px solid var(--line-2);
background: rgba(255, 255, 255, 0.03);
}
.manifesto-pill:nth-child(3n + 1) {
border-color: rgba(var(--accent-ui-rgb), 0.35);
color: var(--accent-ui);
background: rgba(var(--accent-ui-rgb), 0.06);
box-shadow: 0 0 28px -12px rgba(var(--accent-ui-rgb), 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.manifesto-pill:nth-child(3n + 2) {
border-color: rgba(157, 125, 255, 0.38);
color: var(--c-violet-400);
background: rgba(157, 125, 255, 0.07);
box-shadow: 0 0 28px -12px rgba(157, 125, 255, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.manifesto-pill:nth-child(3n) {
border-color: rgba(90, 242, 168, 0.35);
color: rgba(180, 250, 220, 0.95);
background: rgba(90, 242, 168, 0.06);
box-shadow: 0 0 26px -12px rgba(90, 242, 168, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
html[data-surface="light"] .manifesto-pill {
background: rgba(255, 255, 255, 0.92);
border-color: var(--line-3);
color: var(--fg-md);
box-shadow:
0 1px 2px rgba(10, 12, 24, 0.05),
inset 0 1px 0 rgba(255, 255, 255, 0.95);
}
html[data-surface="light"] .manifesto-pill:nth-child(3n + 1) {
border-color: rgba(var(--accent-ui-rgb), 0.24);
color: var(--accent-ui);
background: linear-gradient(145deg, rgba(234, 247, 255, 0.75), rgba(255, 255, 255, 0.95));
box-shadow: 0 0 22px -10px rgba(var(--accent-ui-rgb), 0.14);
}
html[data-surface="light"] .manifesto-pill:nth-child(3n + 2) {
border-color: rgba(107, 79, 199, 0.28);
color: #5c45a8;
background: linear-gradient(145deg, rgba(243, 240, 255, 0.8), rgba(255, 255, 255, 0.95));
box-shadow: 0 0 22px -10px rgba(157, 125, 255, 0.12);
}
html[data-surface="light"] .manifesto-pill:nth-child(3n) {
border-color: rgba(10, 143, 87, 0.28);
color: #0a8f57;
background: linear-gradient(145deg, rgba(220, 252, 236, 0.65), rgba(255, 255, 255, 0.95));
box-shadow: 0 0 20px -10px rgba(10, 143, 87, 0.1);
}
.manifesto-aside {
position: relative;
isolation: isolate;
overflow: hidden;
border: 1px solid rgba(103, 196, 242, 0.24);
border-radius: 20px;
padding: 0;
background:
linear-gradient(
165deg,
rgba(103, 196, 242, 0.16) 0%,
rgba(157, 125, 255, 0.08) 38%,
rgba(3, 5, 8, 0.55) 72%,
rgba(90, 242, 168, 0.06) 100%
),
rgba(255, 255, 255, 0.02);
display: flex;
flex-direction: column;
gap: 0;
min-height: 100%;
box-shadow:
0 40px 80px -48px rgba(0, 0, 0, 0.75),
inset 0 1px 0 rgba(255, 255, 255, 0.08),
0 0 0 1px rgba(157, 125, 255, 0.1),
0 0 72px -24px rgba(103, 196, 242, 0.18),
0 0 56px -20px rgba(232, 121, 249, 0.1),
0 0 48px -22px rgba(90, 242, 168, 0.08);
}
.manifesto-aside--terminal {
padding: 0;
gap: clamp(14px, 2vw, 18px);
justify-content: stretch;
border: none;
background: transparent;
box-shadow: none;
}
.manifesto-aside--terminal::before,
.manifesto-aside--terminal::after {
display: none;
}
html[data-surface="light"] .manifesto-aside--terminal {
background: transparent;
box-shadow: none;
}
.manifesto-aside__caption {
position: relative;
z-index: 1;
margin: 0;
font-size: clamp(0.9375rem, 1.35vw, 1.0625rem);
line-height: 1.58;
color: var(--fg-md);
text-wrap: pretty;
}
.manifesto-aside__caption-label {
font-family: var(--font-mono);
font-size: 0.78em;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--c-fuchsia-400);
}
html[data-surface="light"] .manifesto-aside__caption-label {
color: #6b4fc7;
}
.manifesto-aside::before {
content: "";
position: absolute;
top: -55%;
right: -25%;
width: 70%;
height: 90%;
background: radial-gradient(circle, rgba(157, 125, 255, 0.2), transparent 68%);
pointer-events: none;
z-index: 0;
}
.manifesto-aside::after {
content: "";
position: absolute;
bottom: -40%;
left: -15%;
width: 55%;
height: 70%;
background: radial-gradient(circle, rgba(90, 242, 168, 0.12), transparent 70%);
pointer-events: none;
z-index: 0;
}
/* Mac window chrome (BlackPanel, ManifestoBootTerminal) */
.mac-traffic-lights {
display: flex;
align-items: center;
gap: 7px;
flex-shrink: 0;
padding: 3px 2px 3px 0;
}
.mac-traffic-lights__dot {
width: 11px;
height: 11px;
border-radius: 999px;
flex-shrink: 0;
box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.28);
}
/* Manifesto boot terminal — macOS-style code window */
.manifesto-terminal {
position: relative;
z-index: 1;
flex: 1;
display: flex;
flex-direction: column;
min-height: clamp(380px, 52vh, 520px);
color-scheme: dark;
--term-bg: #0b121e;
--term-titlebar: #161b28;
--term-fg: rgba(255, 255, 255, 0.88);
--term-dim: rgba(255, 255, 255, 0.52);
--term-sky: #5ccfe6;
--term-mint: #5af78e;
border-radius: 14px;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.1);
background: var(--term-bg);
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.45) inset,
0 28px 72px -24px rgba(0, 0, 0, 0.75),
0 0 80px -32px rgba(92, 207, 230, 0.12);
}
.manifesto-terminal__titlebar {
display: flex;
align-items: center;
flex-shrink: 0;
min-height: 38px;
padding-inline: clamp(20px, 3.2vw, 36px);
background: var(--term-titlebar);
border-bottom: 1px solid rgba(255, 255, 255, 0.07);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.manifesto-terminal__screen {
flex: 1;
padding-block: clamp(28px, 3.5vw, 40px);
padding-inline: clamp(28px, 4vw, 44px);
font-family: var(--font-mono);
font-size: clamp(13px, 1.5vw, 15px);
font-weight: 400;
line-height: 1.55;
letter-spacing: 0.02em;
font-variant-ligatures: none;
font-feature-settings: "liga" 0, "calt" 0;
color: var(--term-fg);
background-color: var(--term-bg);
background-image: radial-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px);
background-size: 18px 18px;
background-position: 0 0;
}
.manifesto-terminal__row {
display: block;
white-space: pre-wrap;
word-break: break-word;
}
.manifesto-terminal__row + .manifesto-terminal__row,
.manifesto-terminal__row + .manifesto-terminal__rule,
.manifesto-terminal__rule + .manifesto-terminal__row {
margin-top: 0.42em;
}
.manifesto-terminal__row--prompt {
margin-bottom: 0.55em;
color: var(--term-fg);
}
.manifesto-terminal__user {
color: var(--term-sky);
}
.manifesto-terminal__path {
color: var(--term-fg);
}
.manifesto-terminal__cmd,
.manifesto-terminal__typed {
color: var(--term-fg);
}
.manifesto-terminal__cursor {
display: inline-block;
width: 0.55em;
height: 1.05em;
margin-inline-start: 1px;
vertical-align: -0.12em;
background: var(--term-sky);
box-shadow: 0 0 10px rgba(92, 207, 230, 0.55);
animation: manifesto-terminal-cursor 1.05s step-end infinite;
}
@keyframes manifesto-terminal-cursor {
0%,
49% {
opacity: 1;
}
50%,
100% {
opacity: 0;
}
}
.manifesto-terminal__row--dim {
color: var(--term-dim);
}
.manifesto-terminal__row--sky {
color: var(--term-sky);
}
.manifesto-terminal__row--mint {
color: var(--term-mint);
}
.manifesto-terminal__row--script {
display: flex;
align-items: baseline;
flex-wrap: nowrap;
gap: 0.45em;
white-space: nowrap;
}
.manifesto-terminal__row--section {
color: rgba(255, 255, 255, 0.38);
font-size: 0.9em;
letter-spacing: 0.02em;
white-space: pre-wrap;
margin-top: 0.35em;
margin-bottom: 0.1em;
font-style: italic;
}
.manifesto-terminal__tag {
flex-shrink: 0;
color: var(--term-dim);
font-weight: 500;
}
.manifesto-terminal__row--sky .manifesto-terminal__tag {
color: rgba(92, 207, 230, 0.75);
}
.manifesto-terminal__name,
.manifesto-terminal__action {
flex-shrink: 0;
color: var(--term-fg);
font-weight: 500;
}
.manifesto-terminal__row--echo {
color: var(--term-sky);
margin-top: 0.35em;
margin-bottom: 0.15em;
line-height: 1.5;
white-space: pre-wrap;
}
.manifesto-terminal__leader {
flex: 1 1 auto;
min-width: 8px;
height: 1px;
align-self: center;
margin-inline: 0.15em;
background: repeating-linear-gradient(
90deg,
rgba(255, 255, 255, 0.14) 0,
rgba(255, 255, 255, 0.14) 2px,
transparent 2px,
transparent 5px
);
opacity: 0.85;
}
.manifesto-terminal__detail {
flex-shrink: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
color: var(--term-dim);
}
.manifesto-terminal__row--sky .manifesto-terminal__detail,
.manifesto-terminal__row--mint .manifesto-terminal__detail {
color: rgba(255, 255, 255, 0.55);
}
.manifesto-terminal__result {
flex-shrink: 0;
color: var(--term-mint);
font-weight: 600;
text-transform: lowercase;
}
.manifesto-terminal__row--sky .manifesto-terminal__result {
color: var(--term-sky);
}
.manifesto-terminal__result--bright {
color: var(--term-mint);
text-transform: none;
}
.manifesto-terminal__ok {
display: inline;
font-weight: 600;
}
.manifesto-terminal__rule {
border: none;
height: 0;
margin: 0.9em 0;
border-top: 1px dashed rgba(255, 255, 255, 0.16);
background: none;
}
.manifesto-terminal__row--status {
margin-top: 0.2em;
}
.manifesto-terminal__row--status .manifesto-terminal__tag {
color: var(--term-mint);
}
.manifesto-terminal__row--status .manifesto-terminal__name {
color: var(--term-fg);
}
html[data-surface="light"] .manifesto-terminal {
border-color: rgba(48, 71, 219, 0.14);
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.04) inset,
0 24px 56px -28px rgba(48, 71, 219, 0.2),
0 12px 32px -16px rgba(10, 12, 24, 0.12);
}
@media (max-width: 640px) {
.manifesto-terminal__row--script {
flex-wrap: wrap;
white-space: normal;
row-gap: 0.2em;
}
.manifesto-terminal__leader {
display: none;
}
.manifesto-terminal__detail {
flex: 1 1 100%;
padding-inline-start: 2.8em;
}
.manifesto-terminal__name {
flex: 1 1 auto;
}
}
.manifesto-terminal__row--in,
.manifesto-terminal__rule--in {
animation: manifesto-terminal-line-in 0.32s var(--ease-out) both;
}
@keyframes manifesto-terminal-line-in {
from {
opacity: 0;
transform: translateY(5px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.manifesto-terminal__dots {
display: inline-block;
margin-inline-start: 0.15em;
color: var(--term-dim);
animation: manifesto-terminal-dots 1.2s steps(4, end) infinite;
}
@keyframes manifesto-terminal-dots {
0%,
100% {
opacity: 0.35;
}
50% {
opacity: 1;
}
}
@media (prefers-reduced-motion: reduce) {
.manifesto-terminal__cursor {
animation: none;
opacity: 0.85;
}
.manifesto-terminal__row--in,
.manifesto-terminal__rule--in {
animation: none;
}
.manifesto-terminal__dots {
animation: none;
opacity: 0.6;
}
}
.manifesto-aside__viz,
.manifesto-aside__content {
position: relative;
z-index: 1;
}
.manifesto-aside__viz {
padding: clamp(18px, 2.5vw, 24px) clamp(20px, 2.8vw, 28px) 0;
border-bottom: 1px solid rgba(103, 196, 242, 0.14);
background: linear-gradient(180deg, rgba(103, 196, 242, 0.08) 0%, transparent 100%);
}
.manifesto-stack-art {
display: block;
width: 100%;
height: auto;
max-height: clamp(140px, 22vw, 200px);
}
.manifesto-stack-art__flow {
stroke-dasharray: 6 10;
animation: manifesto-stack-flow 5s linear infinite;
}
.manifesto-stack-art__flow--delay {
animation-delay: -2.2s;
}
@keyframes manifesto-stack-flow {
to { stroke-dashoffset: -32; }
}
.manifesto-aside__content {
display: flex;
flex-direction: column;
flex: 1;
padding: clamp(22px, 3vw, 30px);
}
.manifesto-aside__head {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 16px;
}
.manifesto-aside__mark {
flex-shrink: 0;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--c-mint);
box-shadow: 0 0 14px rgba(90, 242, 168, 0.75);
}
.manifesto-aside__label {
display: inline-flex;
align-items: center;
margin: 0;
padding: 6px 12px;
border-radius: 999px;
border: 1px solid rgba(232, 121, 249, 0.38);
background: rgba(232, 121, 249, 0.1);
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--c-fuchsia-400);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.manifesto-aside__text {
margin: 0;
flex: 1;
font-size: clamp(1.0625rem, 1.55vw, 1.25rem);
line-height: 1.58;
color: var(--t-hi);
text-wrap: pretty;
max-width: 42ch;
}
.manifesto-aside__stats {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
margin-top: clamp(20px, 2.8vw, 26px);
padding-top: 0;
border-top: none;
}
.manifesto-aside__stat {
display: flex;
flex-direction: column;
gap: 12px;
min-width: 0;
padding: 14px 13px 13px;
border-radius: 14px;
border: 1px solid rgba(255, 255, 255, 0.1);
background: rgba(0, 0, 0, 0.28);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
transition: border-color 280ms var(--ease), box-shadow 280ms var(--ease), transform 280ms var(--ease);
}
.manifesto-aside__stat:hover {
transform: translateY(-1px);
}
.manifesto-aside__stat--blue {
border-color: rgba(103, 196, 242, 0.28);
}
.manifesto-aside__stat--blue:hover {
border-color: rgba(103, 196, 242, 0.45);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.06),
0 0 32px -12px rgba(103, 196, 242, 0.25);
}
.manifesto-aside__stat--violet {
border-color: rgba(157, 125, 255, 0.28);
}
.manifesto-aside__stat--violet:hover {
border-color: rgba(157, 125, 255, 0.45);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.06),
0 0 32px -12px rgba(157, 125, 255, 0.22);
}
.manifesto-aside__stat-icon {
display: grid;
place-items: center;
width: 38px;
height: 38px;
border-radius: 11px;
border: 1px solid rgba(255, 255, 255, 0.1);
background: rgba(255, 255, 255, 0.04);
}
.manifesto-aside__stat--blue .manifesto-aside__stat-icon {
color: var(--accent-ui);
border-color: rgba(var(--accent-ui-rgb), 0.35);
background: linear-gradient(145deg, rgba(var(--accent-ui-rgb), 0.2), rgba(var(--c-blue-500-rgb), 0.1));
box-shadow: 0 0 24px -8px rgba(var(--accent-ui-rgb), 0.35);
}
.manifesto-aside__stat--violet .manifesto-aside__stat-icon {
color: var(--c-violet-400);
border-color: rgba(157, 125, 255, 0.35);
background: linear-gradient(145deg, rgba(157, 125, 255, 0.22), rgba(103, 196, 242, 0.08));
box-shadow: 0 0 24px -8px rgba(157, 125, 255, 0.3);
}
.manifesto-aside__stat-body {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
}
.manifesto-aside__stat-title {
font-family: var(--font-sans);
font-size: 14px;
font-weight: 600;
letter-spacing: -0.02em;
line-height: 1.3;
color: var(--t-hi);
}
.manifesto-aside__stat-hint {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--t-dim);
line-height: 1.35;
}
html[data-surface="light"] .manifesto-aside {
border-color: rgba(48, 71, 219, 0.18);
background:
linear-gradient(
165deg,
rgba(234, 247, 255, 0.95) 0%,
rgba(255, 255, 255, 0.98) 48%,
rgba(243, 240, 255, 0.9) 100%
);
box-shadow:
0 16px 48px -28px rgba(48, 71, 219, 0.18),
inset 0 1px 0 rgba(255, 255, 255, 0.95),
0 0 0 1px rgba(48, 71, 219, 0.06);
}
html[data-surface="light"] .manifesto-aside::before {
background: radial-gradient(circle, rgba(157, 125, 255, 0.12), transparent 68%);
}
html[data-surface="light"] .manifesto-aside::after {
background: radial-gradient(circle, rgba(90, 242, 168, 0.08), transparent 70%);
}
html[data-surface="light"] .manifesto-aside__label {
border-color: rgba(107, 79, 199, 0.28);
background: rgba(243, 240, 255, 0.9);
color: #6b4fc7;
}
html[data-surface="light"] .manifesto-aside__text {
color: var(--t-hi);
}
html[data-surface="light"] .manifesto-aside__viz {
border-bottom-color: rgba(48, 71, 219, 0.1);
background: linear-gradient(180deg, rgba(234, 247, 255, 0.65) 0%, transparent 100%);
}
html[data-surface="light"] .manifesto-stack-art .manifesto-stack-art__base-label,
html[data-surface="light"] .manifesto-stack-art text {
fill: rgba(10, 12, 24, 0.45);
}
html[data-surface="light"] .manifesto-stack-art .manifesto-stack-art__top-label {
fill: var(--c-blue-600);
}
html[data-surface="light"] .manifesto-aside__stat {
background: rgba(255, 255, 255, 0.88);
border-color: var(--line-3);
box-shadow:
0 1px 2px rgba(10, 12, 24, 0.04),
inset 0 1px 0 rgba(255, 255, 255, 0.95);
}
html[data-surface="light"] .manifesto-aside__stat--blue {
border-color: rgba(48, 71, 219, 0.2);
}
html[data-surface="light"] .manifesto-aside__stat--violet {
border-color: rgba(107, 79, 199, 0.22);
}
html[data-surface="light"] .manifesto-aside__stat--blue .manifesto-aside__stat-icon {
color: var(--c-blue-600);
background: linear-gradient(145deg, rgba(234, 247, 255, 0.9), rgba(255, 255, 255, 0.95));
}
html[data-surface="light"] .manifesto-aside__stat--violet .manifesto-aside__stat-icon {
color: #5c45a8;
background: linear-gradient(145deg, rgba(243, 240, 255, 0.9), rgba(255, 255, 255, 0.95));
}
.manifesto-ribbon-wrap {
margin-top: clamp(40px, 5vw, 56px);
}
.manifesto-ribbon-wrap .flow-ribbon-wrap {
margin-top: 0;
}
.manifesto-tri {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.manifesto-tri__cell {
padding: 36px 28px 8px 0;
border-right: 1px solid var(--line-2);
}
.manifesto-tri__cell:nth-child(1) {
background: linear-gradient(180deg, rgba(48, 71, 219, 0.06) 0%, transparent 55%);
}
.manifesto-tri__cell:nth-child(2) {
background: linear-gradient(180deg, rgba(103, 196, 242, 0.06) 0%, transparent 55%);
}
.manifesto-tri__cell:nth-child(3) {
background: linear-gradient(180deg, rgba(157, 125, 255, 0.07) 0%, transparent 55%);
}
.manifesto-tri__cell:nth-child(n + 2) {
padding-left: 28px;
}
.manifesto-tri__cell:last-child {
border-right: none;
}
.manifesto-tri__copy {
margin-top: 16px;
color: var(--fg-md);
line-height: 1.58;
}
@media (max-width: 900px) {
.manifesto-hero {
grid-template-columns: 1fr;
}
.manifesto-aside {
min-height: 0;
}
.manifesto-terminal {
min-height: 0;
max-height: min(68vh, 400px);
}
.manifesto-terminal__screen {
overflow-y: auto;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
padding-block: 20px;
padding-inline: 18px;
font-size: 12px;
line-height: 1.5;
}
.manifesto-terminal__titlebar {
min-height: 34px;
padding-inline: 16px;
}
.manifesto-terminal--complete .manifesto-terminal__cursor {
display: none;
}
.manifesto-aside__stats {
grid-template-columns: 1fr;
}
.manifesto-tri {
grid-template-columns: 1fr;
}
.manifesto-tri__cell {
border-right: none;
border-bottom: 1px solid var(--line-2);
padding: 28px 0 8px;
}
.manifesto-tri__cell:nth-child(n + 2) {
padding-left: 0;
}
.manifesto-tri__cell:last-child {
border-bottom: none;
}
}
@media (prefers-reduced-motion: reduce) {
.manifesto-stack-art__flow {
animation: none;
}
}
/* ===========================================================
Buttons
=========================================================== */
.btn {
--py: 11px; --px: 18px;
display: inline-flex;
align-items: center; justify-content: center;
gap: 8px;
padding: var(--py) var(--px);
border-radius: var(--r-pill);
border: 1px solid transparent;
font-family: var(--font-sans);
font-size: 13.5px;
font-weight: 500;
letter-spacing: -0.005em;
line-height: 1;
white-space: nowrap;
cursor: pointer;
transition:
color var(--dur-2) var(--ease),
background var(--dur-2) var(--ease),
border-color var(--dur-2) var(--ease),
box-shadow var(--dur-2) var(--ease),
transform var(--dur-2) var(--ease);
user-select: none;
}
.btn:focus-visible {
outline: 2px solid rgba(138, 214, 255, 0.75);
outline-offset: 3px;
}
.btn:active:not(.btn-text) {
transform: translateY(0) scale(0.985);
}
.btn__icon-end {
display: inline-flex;
transition: transform 280ms var(--ease-out);
}
.btn-primary {
background: var(--t-hi);
color: var(--bg);
box-shadow:
0 6px 22px -6px rgba(255, 255, 255, 0.14),
0 0 32px -12px rgba(103, 196, 242, 0.14),
0 0 28px -14px rgba(157, 125, 255, 0.1);
}
.btn-primary:hover {
background: linear-gradient(125deg, #b6e7ff 0%, #8ad6ff 26%, #c4b0ff 58%, #7ee8d0 88%, #5af2a8 100%);
color: #030508;
box-shadow:
0 14px 44px -12px rgba(103, 196, 242, 0.5),
0 0 36px -10px rgba(157, 125, 255, 0.35);
}
.btn-secondary {
background: transparent;
color: var(--t-hi);
border-color: var(--line-3);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03), 0 0 24px -14px rgba(103, 196, 242, 0.06);
}
.btn-secondary:hover {
background: linear-gradient(145deg, rgba(103, 196, 242, 0.08) 0%, rgba(157, 125, 255, 0.06) 55%, rgba(90, 242, 168, 0.05) 100%);
border-color: rgba(138, 214, 255, 0.42);
box-shadow: 0 0 28px -8px rgba(103, 196, 242, 0.12);
}
@media (hover: hover) and (pointer: fine) {
.btn-primary:hover,
.btn-secondary:hover {
transform: translateY(-1px);
}
.btn:hover .btn__icon-end {
transform: translateX(3px);
}
html[dir="rtl"] .btn:hover .btn__icon-end {
transform: translateX(-3px);
}
}
.btn-text {
background: transparent;
color: var(--t-hi);
padding: 4px 0;
border-radius: 0;
position: relative;
}
.btn-text::after {
content: ""; position: absolute; left: 0; right: 22px; bottom: 0;
height: 1px; background: var(--line-3);
transition: background 200ms var(--ease);
}
.btn-text:hover { color: var(--c-blue-500); text-shadow: 0 0 24px rgba(48, 71, 219, 0.28); }
.btn-text:hover::after { background: var(--accent-ui); box-shadow: 0 0 12px rgba(var(--accent-ui-rgb), 0.45); }
.btn-sm { --py: 7px; --px: 12px; font-size: 12.5px; }
.btn-lg { --py: 14px; --px: 22px; font-size: 14.5px; }
/* ===========================================================
Chip
=========================================================== */
.chip {
display: inline-flex; align-items: center; gap: 6px;
max-width: 100%;
min-width: 0;
padding: 4px 9px;
border-radius: var(--r-pill);
border: 1px solid var(--line-2);
background: rgba(255,255,255,0.025);
font-family: var(--font-mono);
font-size: 11px;
color: var(--fg-md);
letter-spacing: 0.02em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
box-shadow:
0 0 22px -8px rgba(103, 196, 242, 0.12),
inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.chip .dot {
width: 5px; height: 5px; border-radius: 50%;
background: var(--c-mint);
}
/* ---------- Wordmark — theme-aware wide logo ---------- */
.wordmark {
line-height: 0;
}
.wordmark__img {
display: block;
height: var(--wordmark-h, 20px);
width: auto;
}
.wordmark__img--on-light {
display: none;
}
html[data-surface="light"] .wordmark__img--on-dark {
display: none;
}
html[data-surface="light"] .wordmark__img--on-light {
display: block;
}
/* ---------- Global chrome: nav, home product grid, footer ---------- */
.site-header[data-scrolled="true"] {
box-shadow: var(--shadow-nav-scrolled);
}
@keyframes nav-panel-in {
from { opacity: 0; transform: translateY(-8px); }
to { opacity: 1; transform: translateY(0); }
}
[data-radix-navigation-menu-viewport][data-state="open"] {
animation: nav-panel-in 220ms var(--ease-out);
}
.hero-status-pill {
border-radius: 999px;
border: 1px solid var(--line-2);
background: rgba(255, 255, 255, 0.02);
backdrop-filter: blur(8px);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.06),
0 0 36px -10px rgba(103, 196, 242, 0.15),
0 0 28px -12px rgba(90, 242, 168, 0.1);
}
.product-index__link {
transition: background 400ms var(--ease), box-shadow 400ms var(--ease);
}
/* Product index card surfaces — see tailwind-input.css `.product-index-card` */
.site-footer {
box-shadow:
inset 0 1px 0 rgba(103, 196, 242, 0.08),
0 -28px 56px -30px rgba(0, 0, 0, 0.55),
0 0 64px -28px rgba(157, 125, 255, 0.08),
0 0 48px -28px rgba(103, 196, 242, 0.07);
}
/* ===========================================================
Animations
=========================================================== */
@keyframes float-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes pulse-ring {
0% { box-shadow: 0 0 0 0 rgba(103,196,242,0.32), 0 0 0 0 rgba(157,125,255,0.18); }
100% { box-shadow: 0 0 0 12px rgba(103,196,242,0), 0 0 0 20px rgba(157,125,255,0); }
}
@keyframes dash { to { stroke-dashoffset: -1000; } }
@keyframes scan {
0% { transform: translateY(-100%); }
100% { transform: translateY(200%); }
}
/* ===========================================================
404 — not found
=========================================================== */
.not-found {
position: relative;
overflow: hidden;
padding-top: clamp(24px, 4vw, 48px);
padding-bottom: clamp(64px, 10vw, 120px);
min-height: min(78vh, 880px);
}
.not-found__glow {
position: absolute;
inset: -12% 8% auto;
height: min(52vh, 520px);
background:
radial-gradient(ellipse 70% 55% at 18% 40%, rgba(48, 71, 219, 0.22), transparent 68%),
radial-gradient(ellipse 55% 48% at 82% 28%, rgba(103, 196, 242, 0.14), transparent 70%),
radial-gradient(ellipse 40% 36% at 50% 88%, rgba(157, 125, 255, 0.1), transparent 72%);
filter: blur(2px);
pointer-events: none;
}
.not-found__code {
margin: clamp(12px, 2vw, 20px) 0 0;
font-size: clamp(9rem, 32vw, 20rem);
font-weight: 500;
line-height: 0.82;
letter-spacing: -0.075em;
font-variant-numeric: tabular-nums;
color: transparent;
background: linear-gradient(
168deg,
rgba(138, 214, 255, 0.98) 0%,
rgba(103, 196, 242, 0.92) 28%,
rgba(157, 125, 255, 0.88) 62%,
rgba(232, 121, 249, 0.72) 100%
);
-webkit-background-clip: text;
background-clip: text;
text-shadow: 0 0 80px rgba(103, 196, 242, 0.22);
user-select: none;
}
html[data-surface="light"] .not-found__code {
background: linear-gradient(
168deg,
rgba(48, 71, 219, 0.95) 0%,
rgba(64, 96, 232, 0.9) 35%,
rgba(103, 196, 242, 0.85) 70%,
rgba(90, 120, 255, 0.78) 100%
);
-webkit-background-clip: text;
background-clip: text;
}
.not-found__title {
margin-top: clamp(8px, 1.5vw, 16px);
}
.not-found__grid {
position: relative;
z-index: 1;
display: grid;
gap: clamp(36px, 5vw, 56px);
align-items: center;
}
@media (min-width: 900px) {
.not-found__grid {
grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
gap: clamp(40px, 5vw, 72px);
}
}
.not-found__panel {
min-width: 0;
}
.not-found__trace {
padding: 18px 20px 20px;
font-family: var(--font-mono, ui-monospace, monospace);
font-size: 11px;
line-height: 1.45;
letter-spacing: 0.01em;
}
.not-found__trace-line {
padding: 7px 0;
border-bottom: 1px dashed rgba(138, 214, 255, 0.12);
}
.not-found__trace-line:last-of-type {
border-bottom: none;
}
.not-found__trace-text {
color: rgba(214, 232, 255, 0.82);
word-break: break-word;
}
.not-found__trace-footer {
display: flex;
align-items: center;
gap: 10px;
margin-top: 14px;
padding-top: 12px;
border-top: 1px solid rgba(138, 214, 255, 0.14);
}
.not-found__trace-result {
color: var(--c-warn, #ffb84d);
font-weight: 600;
letter-spacing: 0.08em;
}
.not-found__trace-cursor {
width: 7px;
height: 14px;
background: rgba(103, 196, 242, 0.85);
animation: manifesto-terminal-cursor 1.05s step-end infinite;
}
.not-found__suggest {
margin-top: clamp(28px, 4vw, 40px);
padding-top: 20px;
border-top: 1px solid var(--line-2);
}
.not-found__suggest-label {
display: block;
font-size: 10px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--t-lo);
margin-bottom: 12px;
}
.not-found__suggest-list {
display: flex;
flex-wrap: wrap;
gap: 8px 10px;
list-style: none;
margin: 0;
padding: 0;
}
.not-found__suggest-link {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 6px 12px;
border-radius: 999px;
border: 1px solid var(--line-2);
background: rgba(255, 255, 255, 0.02);
color: var(--fg-md);
font-size: 13px;
text-decoration: none;
transition: border-color 180ms var(--ease), color 180ms var(--ease), background 180ms var(--ease);
}
.not-found__suggest-link:hover {
border-color: rgba(103, 196, 242, 0.35);
color: var(--t-hi);
background: rgba(103, 196, 242, 0.06);
}
html[data-surface="light"] .not-found__suggest-link {
background: rgba(15, 23, 42, 0.02);
}
html[data-surface="light"] .not-found__suggest-link:hover {
background: rgba(48, 71, 219, 0.05);
}
/* Scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.16); }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
}
.reveal,
.reveal-stagger > *,
.hero-enter,
.proof-strip__cell,
html[data-enter="0"] .hero-enter,
html[data-enter="0"] .proof-strip__cell {
opacity: 1 !important;
transform: none;
translate: none;
transition: none;
}
.btn-primary:hover,
.btn-secondary:hover,
.catalog-card:hover,
.team-member-card:hover,
.team-member-card:hover .team-member-card__photo img,
.solutions-segment-card:hover .solutions-segment-card__icon,
.btn:hover .btn__icon-end {
transform: none;
}
.site-header[data-scrolled="true"] {
box-shadow: 0 8px 24px -10px rgba(0, 0, 0, 0.55) !important;
}
.catalog-card,
.catalog-card:hover {
box-shadow: 0 14px 28px -22px rgba(0, 0, 0, 0.7) !important;
}
.surface-glow {
box-shadow: 0 14px 28px -22px rgba(0, 0, 0, 0.7) !important;
}
.cta-chrome {
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}
.product-index__link--active {
box-shadow: inset 0 0 48px -20px rgba(103, 196, 242, 0.06) !important;
}
.site-footer {
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}
.hero-status-pill {
box-shadow: none !important;
}
.partners-carousel__viewport {
box-shadow: none !important;
}
.btn-primary,
.btn-primary:hover {
box-shadow: 0 4px 14px -6px rgba(0, 0, 0, 0.45) !important;
}
}
html[data-reduce-motion="true"] *,
html[data-reduce-motion="true"] *::before,
html[data-reduce-motion="true"] *::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
}
/* Hero card sheen is the product shot — keep it unless the OS asks to reduce. */
html[data-reduce-motion="true"] .hero-card-sweep {
animation: hero-card-sweep 5.4s cubic-bezier(0.4, 0, 0.2, 1) infinite !important;
animation-duration: 5.4s !important;
animation-iteration-count: infinite !important;
}
@media (prefers-reduced-motion: reduce) {
html[data-reduce-motion="true"] .hero-card-sweep,
.hero-card-sweep {
animation: none !important;
}
}
html[data-reduce-motion="true"] .reveal,
html[data-reduce-motion="true"] .reveal-stagger > *,
html[data-reduce-motion="true"] .hero-enter,
html[data-reduce-motion="true"] .proof-strip__cell {
opacity: 1 !important;
transform: none;
translate: none;
transition: none;
}
html[data-reduce-motion="true"] .manifesto-terminal__cursor {
animation: none;
opacity: 0.85;
}
.manifesto-terminal--mobile.manifesto-terminal--complete .manifesto-terminal__dots {
animation: none;
opacity: 0.6;
}
html[data-reduce-motion="true"] .manifesto-terminal__row--in,
html[data-reduce-motion="true"] .manifesto-terminal__rule--in {
animation: none;
}
html[data-reduce-motion="true"] .manifesto-stack-art__flow {
animation: none;
}