/* ---- Mini reset (replicates the parts of Tailwind preflight this site
was authored against - the runtime CDN compiler is gone) ---- */
*, ::before, ::after { border-width: 0; border-style: solid; border-color: currentColor; }
html { line-height: 1.5; -moz-tab-size: 4; tab-size: 4; }
h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; }
h1, h2, h3, h4, h5, h6, p, blockquote, figure, figcaption, dl, dd, hr, pre { margin: 0; }
ul, ol { list-style: none; margin: 0; padding: 0; }
a { color: inherit; text-decoration: inherit; }
b, strong { font-weight: bolder; }
button, input, optgroup, select, textarea { font: inherit; color: inherit; margin: 0; padding: 0; line-height: inherit; }
button, [type="button"], [type="submit"], [role="button"] { background-color: transparent; background-image: none; cursor: pointer; }
img, svg, video, canvas, iframe { display: block; vertical-align: middle; }
img, video { max-width: 100%; height: auto; }
[hidden] { display: none; }
/* ---- Static utility classes (the only Tailwind utilities ever used) ---- */
.relative { position: relative; }
.h-screen { height: 100vh; height: 100svh; } /* svh: stable under iOS URL-bar collapse */
.h-full { height: 100%; }
.w-full { width: 100%; }
.overflow-hidden { overflow: hidden; }
.text-base { font-size: 1rem; line-height: 1.5rem; }
.font-semibold { font-weight: 600; }
.px-7 { padding-left: 1.75rem; padding-right: 1.75rem; }
.py-3\.5 { padding-top: 0.875rem; padding-bottom: 0.875rem; }
@font-face {
font-family: 'Geist';
font-style: normal;
font-display: swap;
font-weight: 100 900;
src: url(https://cdn.jsdelivr.net/fontsource/fonts/geist:vf@latest/latin-wght-normal.woff2) format('woff2-variations');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Geist Mono';
font-style: normal;
font-display: swap;
font-weight: 100 900;
src: url(https://cdn.jsdelivr.net/fontsource/fonts/geist-mono:vf@latest/latin-wght-normal.woff2) format('woff2-variations');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Geist Pixel Square';
font-style: normal;
font-display: swap;
font-weight: 400;
src: url(https://cdn.jsdelivr.net/npm/geist@1.7.2/dist/fonts/geist-pixel/GeistPixel-Square.woff2) format('woff2');
}
:root {
--accent: #5f7fd6;
--accent-hover: #4f6cce;
--accent-glow: rgba(95, 127, 214, 0.42);
--accent-dim: rgba(95, 127, 214, 0.14);
--sparkles-color: #ffffff;
--font-display: 'Bricolage Grotesque', 'Geist', system-ui, sans-serif;
--font-serif: 'Instrument Serif', 'Bricolage Grotesque', Georgia, serif;
/* Brand palette - blue + beige theme with soft-flow gradients */
--periwinkle: #5f7fd6; /* primary blue accent */
--periwinkle-light: #8fb0ec; /* light blue (display accent) */
--periwinkle-deep: #4a63c4; /* deep blue */
--lavender: #9aa6e8; /* soft lavender for gradient blends */
--cream: #f6f0cb; /* cream base */
--cream-soft: #faf6df; /* lighter cream */
--ink: #2f3560; /* indigo ink (headings / text) */
--accent-blue: #7cb8f5; /* sky blue */
--accent-blue-soft: #a9d6f7; /* light sky */
--accent-blue-mid: #8fa9d4; /* medium blue */
--accent-slate: #4e6591; /* slate blue (shadow) */
--accent-navy: #152437; /* dark navy (deep shadow) */
--accent-purple: #5f7fd6; /* purple */
--accent-purple-light: #a995dc;/* light purple */
--accent-purple-deep: #4c34a8; /* deep purple */
--accent-cream: #f6efc9; /* cream */
--accent-beige: #efe6cb; /* beige */
}
[data-theme="light"] {
color-scheme: light;
--bg-page: #f1ebd9;
--bg-elevated: #fffdf7;
--bg-muted: #eae3ce;
--bg-inset: #e3dbc3;
/* blue → ivory gradient behind the hero + navbar (smooth flow) */
--hero-bg: linear-gradient(180deg, #7d96e0 0%, #9db2e6 13%, #cdd3dd 27%, #e9e6cf 47%, #f1ebd9 100%);
/* genuine hue travel left -> right (sky blue -> periwinkle -> warm
blush-lavender), not just one colour restated at two positions */
--nav-drop-gradient:
radial-gradient(80% 210% at 10% -75%, rgba(108, 168, 244, 0.92), transparent 56%),
radial-gradient(78% 220% at 55% -85%, rgba(130, 143, 240, 0.55), transparent 60%),
radial-gradient(85% 230% at 92% -85%, rgba(214, 160, 220, 0.85), transparent 55%),
linear-gradient(180deg, #6a83e4 0%, #9b9bec 46%, #cfa7d8 78%, rgba(207, 167, 216, 0) 100%);
--nav-divider-color: rgba(255, 255, 255, 0.65);
--mesh-a: rgba(122, 150, 224, 0.14);
--mesh-b: rgba(196, 182, 236, 0.18);
--hero-text: #2f3560;
--hero-text-muted: #63688f;
--hero-outline-border: rgba(58, 58, 106, 0.28);
--hero-outline-text: #4a4a80;
--text-primary: #2a2a52;
--text-secondary: #53537b;
--text-muted: #82829e;
--border: rgba(42, 42, 82, 0.10);
--border-strong: rgba(42, 42, 82, 0.18);
--nav-bg: rgba(248, 243, 205, 0.5);
--nav-border: rgba(58, 58, 106, 0.12);
--nav-text: #4a4a80;
--nav-text-muted: rgba(74, 74, 128, 0.72);
--nav-on-hero-text: #ffffff;
--nav-on-hero-muted: rgba(255, 255, 255, 0.8);
--nav-on-hero-cta-bg: rgba(250, 246, 223, 0.68);
--nav-on-hero-cta-text: #4a3fa8;
--card-bg: #fffdf7;
--card-border: rgba(42, 42, 82, 0.10);
--card-hover-border: rgba(95, 127, 214, 0.55);
--pricing-bg: #f1ebd9;
--pricing-text: #2a2a52;
--pricing-muted: #53537b;
--pricing-card: #fffdf7;
--pricing-card-border: rgba(42, 42, 82, 0.10);
--pricing-features-border: rgba(42, 42, 82, 0.10);
--pricing-btn-bg: linear-gradient(to top, #efe7c0, #f7f1d2);
--pricing-btn-border: rgba(58, 58, 106, 0.16);
--pricing-btn-text: #3a3a6a;
--pricing-toggle-bg: #efe7c0;
--pricing-toggle-border: rgba(58, 58, 106, 0.14);
--pricing-toggle-text: #63638f;
--pricing-grid-line: rgba(58, 58, 106, 0.08);
--pricing-sparkle: rgba(95, 127, 214, 0.6);
--pricing-glow-opacity: 0.3;
--pricing-eyebrow: #5f7fd6;
--pricing-icon: #5f7fd6;
--pricing-check: #4a63c4;
--pricing-badge-bg: linear-gradient(135deg, #8fb0ec, #4a63c4);
--pricing-badge-text: #ffffff;
--pricing-card-ring: rgba(95, 127, 214, 0.30);
--pricing-primary-glow: rgba(95, 127, 214, 0.40);
--pricing-decor: rgba(95, 127, 214, 0.95);
--workflow-divider: rgba(58, 58, 106, 0.14);
--workflow-progress-bg: rgba(58, 58, 106, 0.14);
--workflow-progress-fill: #5f7fd6;
--logo-fill: #5a4fb0;
--glass-bg: rgba(248, 243, 205, 0.82);
--sc-macbook-glow: rgba(74, 99, 196, 0.72);
--sc-macbook-glow-core: rgba(150, 178, 235, 0.6);
--sc-macbook-halo: rgba(74, 99, 196, 0.55);
--glass-bg-strong: rgba(248, 243, 205, 0.94);
--glass-border: rgba(255, 253, 240, 0.8);
--glass-border-outer: rgba(58, 58, 106, 0.14);
--glass-shadow: 0 10px 34px rgba(88, 74, 176, 0.16), 0 2px 8px rgba(58, 58, 106, 0.06);
--glass-inset-top: inset 0 1px 0 rgba(255, 253, 244, 0.9);
--glass-inset-bottom: inset 0 -1px 0 rgba(58, 58, 106, 0.08);
--glass-liquid: rgba(255, 253, 244, 0.25);
--glass-shine: rgba(255, 253, 244, 0.55);
--footer-bg: #eae3ce;
--footer-card: #fffdf7;
--footer-label-bg: rgba(42, 42, 82, 0.07);
--footer-social-bg: #5f7fd6;
--footer-visual: linear-gradient(135deg, rgba(95, 127, 214, 0.6) 0%, rgba(169, 155, 232, 0.4) 52%, rgba(241, 235, 217, 0.7) 100%);
--card-shadow: 0 2px 4px rgba(42, 42, 82, 0.04), 0 12px 32px rgba(42, 42, 82, 0.09);
--card-shadow-hover: 0 8px 18px rgba(42, 42, 82, 0.10), 0 26px 60px rgba(60, 60, 120, 0.16);
/* mesh/glow atmosphere - site-wide. Light mode needs noticeably richer,
more saturated blooms and object glows than a soft wash, since that
reads as near-invisible against a light page (no darkness for it to
glow against) - dark mode already pops for free from its black bg. */
--mesh-glow-1: rgba(95, 127, 214, 0.42);
--mesh-glow-2: rgba(74, 99, 196, 0.4);
--object-glow-strong: 0 0 34px rgba(74, 99, 196, 0.62), 0 14px 28px rgba(24, 34, 82, 0.24);
/* roadmap atmosphere - light mode needs noticeably richer, more saturated
blooms than the shared --mesh tokens, since a soft wash reads as
near-invisible against a light page (no darkness for it to glow against) */
--roadmap-glow-1: rgba(95, 127, 214, 0.42);
--roadmap-glow-2: rgba(74, 99, 196, 0.4);
--roadmap-road-glow: drop-shadow(0 0 46px rgba(74, 99, 196, 0.75)) drop-shadow(0 16px 30px rgba(24, 34, 82, 0.3));
--roadmap-badge-glow: 0 0 40px rgba(74, 99, 196, 0.7), 0 14px 28px rgba(24, 34, 82, 0.28), inset 0 2px 0 rgba(255, 255, 255, 0.5);
--roadmap-halo: rgba(74, 99, 196, 0.4);
--roadmap-vignette: rgba(20, 30, 74, 0.14);
--roadmap-road-c1: #8fb0ec;
--roadmap-road-c2: #5f7fd6;
--roadmap-road-c3: #3d55b8;
--roadmap-badge-fill: linear-gradient(155deg, #8fb0ec, #3d55b8);
}
[data-theme="dark"] {
color-scheme: dark;
/* Indigo + matte black, with a little blue */
--accent: #7d7bf0;
--accent-hover: #6f6cec;
--accent-glow: rgba(112, 108, 240, 0.5);
--accent-dim: rgba(112, 108, 240, 0.16);
--periwinkle: #7d7bf0;
--periwinkle-light: #9b93f6;
--periwinkle-deep: #5a54d6;
--bg-page: #08070d;
--bg-elevated: #100e1c;
--bg-muted: #0b0a13;
--bg-inset: #191632;
--hero-bg: radial-gradient(120% 90% at 50% -10%, #1a1740 0%, #100d24 34%, #08070d 72%);
/* genuine hue travel left -> right (indigo -> periwinkle -> deep
violet-magenta), an aurora feel instead of one tone at two spots */
--nav-drop-gradient:
radial-gradient(78% 210% at 10% -75%, rgba(96, 100, 224, 0.48), transparent 58%),
radial-gradient(80% 220% at 55% -85%, rgba(125, 123, 240, 0.4), transparent 62%),
radial-gradient(85% 230% at 92% -85%, rgba(158, 84, 196, 0.44), transparent 55%),
linear-gradient(180deg, #1c1850 0%, #221a4a 44%, #2a1a40 76%, rgba(42, 26, 64, 0) 100%);
--nav-divider-color: rgba(155, 147, 246, 0.4);
--mesh-a: rgba(112, 108, 240, 0.16);
--mesh-b: rgba(90, 120, 214, 0.13);
--hero-text: #edeafb;
--hero-text-muted: #a7a2ce;
--hero-outline-border: rgba(125, 123, 240, 0.32);
--hero-outline-text: #d4cff5;
--text-primary: #edeafb;
--text-secondary: #aba6d2;
--text-muted: #7b769e;
--border: rgba(125, 123, 240, 0.12);
--border-strong: rgba(125, 123, 240, 0.22);
--nav-bg: rgba(12, 10, 24, 0.82);
--nav-border: rgba(125, 123, 240, 0.14);
--nav-text: #edeafb;
--nav-text-muted: rgba(237, 234, 251, 0.6);
--nav-on-hero-text: #edeafb;
--nav-on-hero-muted: rgba(237, 234, 251, 0.64);
--nav-on-hero-cta-bg: rgba(125, 123, 240, 0.16);
--nav-on-hero-cta-text: #cfcbfa;
--card-bg: rgba(125, 123, 240, 0.055);
--card-border: rgba(125, 123, 240, 0.15);
--card-hover-border: rgba(125, 123, 240, 0.55);
--pricing-bg: #08070d;
--pricing-text: #edeafb;
--pricing-muted: #aba6d2;
--pricing-card: linear-gradient(165deg, #17142e 0%, #0d0b1a 100%);
--pricing-card-border: rgba(125, 123, 240, 0.16);
--pricing-features-border: rgba(125, 123, 240, 0.18);
--pricing-btn-bg: linear-gradient(to top, #171430, #37339a);
--pricing-btn-border: rgba(125, 123, 240, 0.3);
--pricing-btn-text: #ffffff;
--pricing-toggle-bg: #161331;
--pricing-toggle-border: rgba(125, 123, 240, 0.24);
--pricing-toggle-text: #d4cff5;
--pricing-grid-line: rgba(125, 123, 240, 0.16);
--pricing-sparkle: #b7b1f8;
--pricing-glow-opacity: 0.5;
--pricing-eyebrow: #9b93f6;
--pricing-icon: #9b93f6;
--pricing-check: #9b93f6;
--pricing-badge-bg: linear-gradient(135deg, #9b93f6, #5a54d6);
--pricing-badge-text: #ffffff;
--pricing-card-ring: rgba(125, 123, 240, 0.34);
--pricing-primary-glow: rgba(112, 108, 240, 0.50);
--pricing-decor: rgba(155, 147, 246, 0.98);
--workflow-divider: rgba(125, 123, 240, 0.14);
--workflow-progress-bg: rgba(125, 123, 240, 0.16);
--workflow-progress-fill: #edeafb;
--logo-fill: #cbc7ee;
--glass-bg: rgba(125, 123, 240, 0.09);
--glass-bg-strong: rgba(125, 123, 240, 0.15);
--glass-border: rgba(155, 147, 246, 0.3);
--glass-border-outer: rgba(125, 123, 240, 0.14);
--glass-shadow: 0 14px 44px rgba(0, 0, 0, 0.55), 0 4px 16px rgba(5, 4, 12, 0.4);
--glass-inset-top: inset 0 1px 0 rgba(155, 147, 246, 0.24);
--glass-inset-bottom: inset 0 -1px 0 rgba(125, 123, 240, 0.06);
--glass-liquid: rgba(125, 123, 240, 0.09);
--sc-macbook-glow: rgba(125, 123, 240, 0.85);
--sc-macbook-glow-core: rgba(180, 172, 250, 0.7);
--sc-macbook-halo: rgba(112, 108, 240, 0.55);
--glass-shine: rgba(155, 147, 246, 0.18);
--footer-bg: #08070d;
--footer-card: #100e1c;
--footer-label-bg: rgba(125, 123, 240, 0.08);
--footer-social-bg: #5a54d6;
--footer-visual: linear-gradient(135deg, rgba(26, 23, 64, 0.8) 0%, rgba(112, 108, 240, 0.34) 55%, rgba(90, 120, 214, 0.28) 100%);
--card-shadow: 0 2px 6px rgba(0, 0, 0, 0.28), 0 18px 44px rgba(0, 0, 0, 0.32);
--card-shadow-hover: 0 10px 24px rgba(0, 0, 0, 0.34), 0 30px 66px rgba(10, 8, 30, 0.5);
/* mesh/glow atmosphere - dark mode already glows fine against the near-black
backdrop, so these just carry the existing look forward as named tokens */
--mesh-glow-1: var(--accent-dim);
--mesh-glow-2: var(--mesh-b);
--object-glow-strong: 0 16px 32px var(--accent-glow);
/* roadmap atmosphere - dark mode already glows fine against the near-black
backdrop, so these just carry the existing look forward as named tokens */
--roadmap-glow-1: var(--accent-dim);
--roadmap-glow-2: var(--mesh-b);
--roadmap-road-glow: drop-shadow(0 14px 26px var(--accent-glow));
--roadmap-badge-glow: 0 16px 32px var(--accent-glow), inset 0 2px 0 rgba(255, 255, 255, 0.32);
--roadmap-halo: rgba(112, 108, 240, 0.10);
--roadmap-vignette: transparent;
--roadmap-road-c1: var(--periwinkle-light);
--roadmap-road-c2: var(--accent);
--roadmap-road-c3: var(--periwinkle-deep);
--roadmap-badge-fill: linear-gradient(155deg, var(--periwinkle-light), var(--periwinkle-deep));
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }
body {
margin: 0;
font-family: 'Geist', 'Geist Sans', system-ui, sans-serif;
background: var(--bg-page);
color: var(--text-primary);
-webkit-tap-highlight-color: transparent;
transition: background-color 0.35s cubic-bezier(0.16, 1, 0.3, 1), color 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
a, button { touch-action: manipulation; }
/* anchor jumps land below the fixed navbar */
section[id] { scroll-margin-top: 76px; }
.hero-section {
background: var(--hero-bg);
transition: background-color 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.site-header {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 50;
padding: 16px 24px 0;
pointer-events: none;
background: transparent;
border: none;
}
/* Coloured backdrop band behind the navbar - blue in light mode, indigo in
dark mode - giving the header a "dropped" gradient card look while at
the top of the page. Fades out once scrolled past the hero. */
.nav-gradient-drop {
position: absolute;
left: 0;
right: 0;
top: 0;
height: clamp(100px, 11.5vw, 120px);
pointer-events: none;
background: var(--nav-drop-gradient);
opacity: 1;
z-index: 0;
transition: opacity 0.35s cubic-bezier(0.26, 1, 0.3, 1);
}
.site-header.nav-past-hero .nav-gradient-drop { opacity: 0; }
/* Thin full-width rule under the navbar (like the reference) */
.nav-divider {
position: absolute;
left: 0;
right: 0;
top: clamp(88px, 11.5vw, 72px);
height: 1px;
z-index: 1;
pointer-events: none;
background: linear-gradient(90deg, transparent, var(--nav-divider-color) 15%, var(--nav-divider-color) 85%, transparent);
opacity: 1;
transition: opacity 0.45s ease;
}
.site-header.nav-past-hero .nav-divider { opacity: 0; }
.site-header-shell {
position: relative;
z-index: 2;
max-width: 88rem;
margin: 0 auto;
pointer-events: auto;
}
/* Pill that hugs just the nav links - hidden on mobile like before */
.nav-glass {
position: relative;
isolation: isolate;
overflow: hidden;
display: none;
border-radius: 9999px;
background: var(--glass-bg);
border: 1px solid var(--glass-border-outer);
box-shadow: var(--glass-shadow), var(--glass-inset-top), var(--glass-inset-bottom);
backdrop-filter: blur(28px) saturate(180%);
-webkit-backdrop-filter: blur(28px) saturate(180%);
transition:
background 0.45s cubic-bezier(0.16, 1, 0.3, 1),
box-shadow 0.45s cubic-bezier(0.16, 1, 0.3, 1),
border-color 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
@media (min-width: 1060px) {
.nav-glass {
display: inline-flex;
align-items: center;
justify-self: center;
height: 56px;
padding: 0 64px;
}
}
.site-header.nav-past-hero .nav-glass {
background: var(--glass-bg-strong);
}
.nav-glass::before {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
padding: 1px;
background: linear-gradient(
180deg,
var(--glass-border) 0%,
rgba(255, 255, 255, 0.08) 45%,
rgba(255, 255, 255, 0.03) 100%
);
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
}
.nav-glass-shine {
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
background:
linear-gradient(180deg, var(--glass-shine) 0%, transparent 38%),
radial-gradient(ellipse 80% 50% at 50% -20%, rgba(255, 255, 255, 0.35), transparent 70%);
opacity: 0.9;
}
.nav-glass-liquid {
position: absolute;
inset: -20% -10%;
border-radius: inherit;
pointer-events: none;
opacity: 0.55;
background:
repeating-linear-gradient(
105deg,
transparent 0%,
var(--glass-liquid) 12%,
transparent 24%,
rgba(255, 255, 255, 0.04) 36%,
transparent 48%
);
background-size: 220% 100%;
animation: nav-liquid-flow 10s ease-in-out infinite;
mix-blend-mode: overlay;
}
.nav-glass-noise {
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
opacity: 0.035;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@keyframes nav-liquid-flow {
0%, 100% { transform: translateX(0); background-position: 0% 50%; }
50% { transform: translateX(-2%); background-position: 100% 50%; }
}
.site-header-inner {
position: relative;
z-index: 1;
padding: 0 32px;
height: 72px;
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 32px;
}
.nav-logo {
justify-self: start;
font-family: var(--font-display);
font-size: 1.5rem;
font-weight: 700;
letter-spacing: -0.01em;
line-height: 1;
text-decoration: none;
white-space: nowrap;
background: linear-gradient(180deg, var(--nav-text) 10%, var(--accent) 160%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
transition: opacity 0.35s ease;
}
.site-header.nav-on-hero .nav-logo {
background: linear-gradient(180deg, var(--nav-on-hero-text) 4%, var(--accent) 220%);
-webkit-background-clip: text;
background-clip: text;
}
.site-header.nav-past-hero .nav-logo {
background: linear-gradient(180deg, var(--nav-text) 10%, var(--accent) 160%);
-webkit-background-clip: text;
background-clip: text;
}
.nav-menu {
display: flex;
align-items: center;
justify-content: center;
gap: 32px;
position: relative;
z-index: 1;
}
.nav-sep {
width: 1px;
height: 16px;
background: var(--nav-text-muted);
opacity: 0.4;
}
.nav-link {
font-size: 1rem;
font-weight: 500;
color: var(--nav-text-muted);
text-decoration: none;
transition: color 0.2s ease;
}
.nav-link:hover { color: var(--nav-text); }
.nav-tag {
display: inline-flex; align-items: center; white-space: nowrap;
font-size: 0.62rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
padding: 2px 7px; border-radius: 999px; background: var(--accent-dim); color: var(--accent);
}
.mobile-link .nav-tag { margin-left: 8px; }
.site-header.nav-on-hero .nav-link,
.site-header.nav-past-hero .nav-link {
color: var(--nav-text-muted);
}
.site-header.nav-on-hero .nav-link:hover,
.site-header.nav-past-hero .nav-link:hover {
color: var(--nav-text);
}
.nav-actions {
display: flex;
align-items: center;
gap: 8px;
flex-shrink: 0;
justify-self: end;
}
.nav-signin {
font-size: 0.9375rem;
font-weight: 500;
color: var(--nav-text-muted);
text-decoration: none;
padding: 8px 16px;
transition: color 0.2s ease;
}
.nav-signin:hover { color: var(--nav-text); }
.site-header.nav-on-hero .nav-signin,
.site-header.nav-past-hero .nav-signin {
color: var(--nav-text-muted);
}
.site-header.nav-on-hero .nav-signin:hover,
.site-header.nav-past-hero .nav-signin:hover {
color: var(--nav-text);
}
/* Outlined cream pill, like the reference "Book Demo" */
.nav-cta {
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 1rem;
font-weight: 600;
padding: 16px 24px;
border-radius: 9999px;
text-decoration: none;
white-space: nowrap;
flex: none;
background: var(--nav-on-hero-cta-bg);
color: var(--nav-on-hero-cta-text);
border: 1px solid var(--border-strong);
transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.nav-cta:hover {
transform: translateY(-1px);
border-color: var(--accent);
box-shadow: 0 8px 22px var(--accent-glow);
}
.site-header.nav-on-hero .nav-cta,
.site-header.nav-past-hero .nav-cta {
background: var(--nav-on-hero-cta-bg);
color: var(--nav-on-hero-cta-text);
border-color: var(--border-strong);
}
.site-header.nav-on-hero .nav-cta:hover,
.site-header.nav-past-hero .nav-cta:hover {
border-color: var(--accent);
box-shadow: 0 8px 22px var(--accent-glow);
}
.theme-toggle {
/* Light mode is still WIP — hide the toggle so visitors can't switch to it. */
display: none !important;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 9999px;
border: none;
background: transparent;
color: var(--nav-text-muted);
cursor: pointer;
transition: color 0.2s ease, background 0.2s ease;
}
.theme-toggle:hover {
color: var(--nav-text);
background: var(--accent-dim);
}
.site-header.nav-on-hero .theme-toggle { color: var(--nav-on-hero-muted); }
.site-header.nav-past-hero .theme-toggle { color: var(--nav-text-muted); }
.site-header.nav-on-hero .theme-toggle:hover { color: var(--nav-on-hero-text); background: rgba(255, 255, 255, 0.16); }
.site-header.nav-past-hero .theme-toggle:hover { color: var(--nav-text); background: var(--accent-dim); }
.theme-toggle svg { width: 18px; height: 18px; }
.theme-toggle .icon-sun,
.theme-toggle .icon-moon { display: none; }
[data-theme="light"] .theme-toggle .icon-moon { display: block; }
[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
/* ---- Language switcher: compact dropdown (desktop header) ---- */
.lang-switcher { position: relative; }
.lang-toggle {
display: inline-flex; align-items: center; justify-content: center; gap: 3px;
width: 36px; height: 36px; padding: 0; flex: none;
border-radius: 9999px; border: none; background: transparent; color: var(--nav-text-muted);
cursor: pointer; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase;
transition: color 0.2s ease, background 0.2s ease;
}
.lang-toggle svg { width: 18px; height: 18px; }
.lang-toggle-code { display: none; }
.lang-toggle:hover { color: var(--nav-text); background: var(--accent-dim); }
.site-header.nav-on-hero .lang-toggle { color: var(--nav-on-hero-muted); }
.site-header.nav-past-hero .lang-toggle { color: var(--nav-text-muted); }
.site-header.nav-on-hero .lang-toggle:hover { color: var(--nav-on-hero-text); background: rgba(255, 255, 255, 0.16); }
.site-header.nav-past-hero .lang-toggle:hover { color: var(--nav-text); background: var(--accent-dim); }
.lang-menu {
position: absolute; top: calc(100% + 10px); right: 0; min-width: 176px;
background: var(--glass-bg); border: 1px solid var(--card-border); border-radius: 16px;
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(20px) saturate(180%);
box-shadow: 0 20px 45px rgba(20, 16, 40, 0.18); padding: 8px; display: grid; gap: 2px;
opacity: 0; visibility: hidden; transform: translateY(-6px); pointer-events: none;
transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s; z-index: 60;
}
.lang-switcher.open .lang-menu { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; }
.lang-option {
display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%;
padding: 8px 16px; border-radius: 10px; border: none; background: transparent;
color: var(--text-primary); font-size: 0.9rem; font-weight: 500; text-align: left; cursor: pointer;
transition: background 0.15s ease;
}
.lang-option:hover { background: var(--accent-dim); }
.lang-option[aria-current="true"] { color: var(--accent); font-weight: 700; }
.lang-option .lang-code { font-size: 0.7rem; color: var(--text-muted); text-transform: uppercase; }
/* ---- Language switcher: inline pill row (mobile drawer + footer) ---- */
.lang-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.lang-pill {
display: inline-flex; align-items: center; justify-content: center;
padding: 6px 16px; border-radius: 9999px; border: 1px solid var(--card-border);
background: transparent; color: var(--text-secondary); font-size: 0.8rem; font-weight: 600;
cursor: pointer; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.lang-pill:hover { border-color: var(--accent); color: var(--text-primary); }
.lang-pill[aria-current="true"] { background: var(--accent-dim); color: var(--accent); border-color: transparent; }
.footer-lang { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.footer-lang-label { font-size: 0.8rem; color: var(--text-muted); }
/* ---- Mobile navigation (hamburger + glass dropdown) ---- */
.nav-burger {
display: none;
width: 44px;
height: 44px;
border-radius: 12px;
align-items: center;
justify-content: center;
flex-direction: column;
gap: 5px;
color: var(--nav-text);
transition: color 0.2s ease, background 0.2s ease;
}
.nav-burger span {
display: block;
width: 20px;
height: 2px;
border-radius: 2px;
background: currentColor;
transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease;
}
.site-header.nav-on-hero .nav-burger { color: var(--nav-on-hero-text); }
.site-header.nav-past-hero .nav-burger { color: var(--nav-text); }
.nav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; transform: scaleX(0.4); }
.nav-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.mobile-menu {
position: absolute;
left: 0;
right: 0;
top: calc(100% + 10px);
z-index: 5;
opacity: 0;
visibility: hidden;
transform: translateY(-14px) scale(0.98);
transform-origin: top right;
pointer-events: none;
transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 0.3s;
}
.site-header.menu-open .mobile-menu {
opacity: 1;
visibility: visible;
transform: translateY(0) scale(1);
pointer-events: auto;
transition: opacity 0.38s cubic-bezier(0.16, 1, 0.3, 1), transform 0.38s cubic-bezier(0.16, 1, 0.3, 1);
}
.mobile-menu-card {
border-radius: 22px;
background: var(--glass-bg-strong);
border: 1px solid var(--glass-border-outer);
box-shadow: 0 24px 60px rgba(12, 10, 34, 0.22);
backdrop-filter: blur(28px) saturate(180%);
-webkit-backdrop-filter: blur(28px) saturate(180%);
padding: 8px;
display: flex;
flex-direction: column;
gap: 2px;
}
.mobile-link {
display: flex;
align-items: center;
justify-content: space-between;
min-height: 56px;
padding: 0 16px;
border-radius: 14px;
font-size: 1.05rem;
font-weight: 600;
color: var(--nav-text);
transition: background 0.2s ease;
}
.mobile-link svg { width: 16px; height: 16px; opacity: 0.45; }
.mobile-link:hover, .mobile-link:active { background: var(--accent-dim); }
/* "Product" (and similar) rows that expand in place rather than
navigating directly - the desktop mega-menu's sub-pages otherwise
have no path into them on mobile. */
.mobile-link-toggle {
width: 100%; background: none; border: none; font: inherit; cursor: pointer;
text-align: left; -webkit-tap-highlight-color: transparent;
}
.mobile-link-toggle .mobile-link-chevron { transition: transform 0.25s ease; }
.mobile-link-toggle[aria-expanded="true"] .mobile-link-chevron { transform: rotate(90deg); }
.mobile-submenu { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; }
.mobile-submenu.open { max-height: 480px; }
.mobile-submenu-inner { padding: 2px 0 6px; display: flex; flex-direction: column; gap: 1px; }
.mobile-sublink {
display: block; padding: 11px 16px 11px 32px; border-radius: 12px;
font-size: 0.94rem; font-weight: 500; color: var(--nav-text-muted, var(--nav-text));
opacity: 0.86; transition: background 0.2s ease, opacity 0.2s ease;
}
.mobile-sublink:hover, .mobile-sublink:active { background: var(--accent-dim); opacity: 1; }
.mobile-menu-cta {
margin-top: 8px;
display: flex;
align-items: center;
justify-content: center;
min-height: 56px;
border-radius: 16px;
font-weight: 600;
font-size: 1.05rem;
background: var(--accent);
color: #fff;
box-shadow: 0 10px 26px var(--accent-glow);
transition: background 0.2s ease, transform 0.2s ease;
}
.mobile-menu-cta:active { transform: scale(0.985); }
/* staggered entrance for the sheet items */
.mobile-menu .mobile-link,
.mobile-menu .mobile-menu-cta {
opacity: 0;
transform: translateY(-8px);
transition: opacity 0.28s ease, transform 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}
.site-header.menu-open .mobile-link,
.site-header.menu-open .mobile-menu-cta { opacity: 1; transform: none; }
.site-header.menu-open .mobile-link:nth-child(1) { transition-delay: 0.04s; }
.site-header.menu-open .mobile-link:nth-child(2) { transition-delay: 0.09s; }
.site-header.menu-open .mobile-link:nth-child(3) { transition-delay: 0.14s; }
.site-header.menu-open .mobile-menu-cta { transition-delay: 0.19s; }
@media (min-width: 1060px) {
.mobile-menu { display: none; }
}
@media (max-width: 767px) {
.site-header { padding: 8px 16px 0; padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right)); }
.site-header-inner {
display: flex;
justify-content: space-between;
padding: 0 4px 0 16px;
height: 64px;
gap: 8px;
}
.nav-logo { font-size: 1.2rem; }
.nav-actions { gap: 4px; }
.nav-cta { padding: 8px 16px; font-size: 0.9rem; }
.theme-toggle { width: 44px; height: 44px; }
}
@media (max-width: 1059px) {
.nav-burger { display: inline-flex; }
}
.section-eyebrow {
font-size: 11px;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--accent);
margin-bottom: 12px;
}
/* Staggered word reveal: each word rises out of its own clipping mask */
.section-title .tw {
display: inline-block;
overflow: hidden;
vertical-align: bottom;
padding-bottom: 0.12em;
margin-bottom: -0.12em;
}
.section-title .tw-in {
display: inline-block;
transform: translateY(115%);
transition: transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
transition-delay: calc(var(--wi, 0) * 60ms);
}
.section-title.t-in .tw-in { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
.section-title .tw-in { transform: none; transition: none; }
}
.section-title {
font-family: var(--font-display);
font-size: clamp(1.9rem, 4.2vw, 2.75rem);
font-weight: 600;
letter-spacing: -0.01em;
line-height: 1.1;
color: var(--text-primary);
text-wrap: balance;
max-width: 22ch;
margin-left: auto;
margin-right: auto;
}
.section-lead {
font-size: 1.0625rem;
line-height: 1.65;
color: var(--text-secondary);
max-width: 42ch;
margin: 16px auto 0;
}
.site-section {
position: relative;
padding: 72px 24px;
}
.site-section--muted { background: var(--bg-muted); }
.site-section--elevated { background: var(--bg-elevated); }
.section-header {
margin: 0 auto 56px;
max-width: 640px;
text-align: center;
}
.gradient-text {
color: var(--text-primary);
font-weight: 600;
}
.glow-orb {
position: absolute;
border-radius: 50%;
filter: blur(80px);
pointer-events: none;
}
.feature-card {
background: var(--card-bg);
border: 1px solid var(--card-border);
border-radius: 16px;
padding: 32px;
transition: border-color 0.3s cubic-bezier(0.16, 1, 0.3, 1), transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.feature-card:hover {
border-color: var(--card-hover-border);
transform: translateY(-3px);
box-shadow: 0 16px 40px rgba(78, 101, 145, 0.08);
}
.feature-icon {
width: 44px;
height: 44px;
border-radius: 12px;
background: var(--accent-dim);
color: var(--accent);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 24px;
}
.feature-card h3 {
font-family: var(--font-display);
font-size: 1.25rem;
font-weight: 600;
color: var(--text-primary);
margin: 0 0 8px;
}
.feature-card p {
font-size: 0.9375rem;
line-height: 1.6;
color: var(--text-secondary);
margin: 0;
}
.features-grid {
display: grid;
grid-template-columns: 1fr;
gap: 24px;
}
@media (min-width: 768px) {
.features-grid { grid-template-columns: repeat(3, 1fr); }
}
/* ── Workflow section (stepper + preview) ── */
.workflow-section {
background: var(--bg-page);
color: var(--text-primary);
padding: 72px 24px;
transition: background-color 0.35s cubic-bezier(0.16, 1, 0.3, 1), color 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.workflow-section-header {
max-width: 640px;
margin: 0 auto 64px;
text-align: center;
}
.workflow-section-header .section-eyebrow {
color: var(--text-muted);
}
.workflow-section-header .section-title {
color: var(--text-primary);
max-width: 20ch;
}
.workflow-section-header .section-lead {
color: var(--text-secondary);
}
.workflow-layout {
max-width: 72rem;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr;
gap: 48px;
align-items: center;
}
@media (min-width: 1024px) {
.workflow-layout {
grid-template-columns: minmax(280px, 380px) 1fr;
gap: 64px;
}
}
.workflow-brand {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 16px;
}
.workflow-brand-icon {
width: 32px;
height: 32px;
color: var(--text-primary);
}
.workflow-brand h2 {
font-size: 1.125rem;
font-weight: 600;
letter-spacing: -0.02em;
margin: 0;
color: var(--text-primary);
}
.workflow-intro p {
font-size: 0.9375rem;
line-height: 1.65;
color: var(--text-secondary);
margin: 0 0 24px;
max-width: 34ch;
}
.workflow-explore {
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 0.875rem;
font-weight: 500;
padding: 8px 16px;
border-radius: 9999px;
border: 1px solid var(--border-strong);
color: var(--text-primary);
text-decoration: none;
transition: border-color 0.2s ease, background 0.2s ease;
margin-bottom: 40px;
}
.workflow-explore:hover {
border-color: var(--card-hover-border);
background: var(--accent-dim);
}
.workflow-stepper {
display: flex;
flex-direction: column;
gap: 8px;
}
.workflow-step-btn {
display: block;
width: 100%;
text-align: left;
background: none;
border: 1px solid transparent;
border-radius: 14px;
padding: 16px 16px;
cursor: pointer;
color: var(--text-muted);
font-family: inherit;
transition: color 0.25s ease, background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.workflow-step-btn:hover {
color: var(--text-secondary);
background: var(--accent-dim);
}
.workflow-step-btn.active {
color: var(--text-primary);
background: var(--card-bg);
border-color: var(--card-border);
box-shadow: var(--card-shadow);
}
.workflow-step-title {
display: flex;
align-items: center;
gap: 8px;
font-size: 1rem;
font-weight: 600;
letter-spacing: -0.01em;
}
.workflow-step-title::before {
content: '';
width: 8px;
height: 8px;
border-radius: 50%;
background: currentColor;
opacity: 0.35;
flex-shrink: 0;
transition: opacity 0.25s ease, box-shadow 0.25s ease;
}
.workflow-step-btn.active .workflow-step-title::before {
opacity: 1;
background: var(--accent);
box-shadow: 0 0 10px var(--accent-glow);
}
/* grid-rows accordion: symmetric 0fr<->1fr so the section height never
bulges mid-transition (max-height clamping used to grow-then-shrink it) */
.workflow-step-desc-wrap {
display: grid;
grid-template-rows: 0fr;
margin-top: 0;
transition: grid-template-rows 0.35s cubic-bezier(0.16, 1, 0.3, 1), margin-top 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.workflow-step-btn.active .workflow-step-desc-wrap {
grid-template-rows: 1fr;
margin-top: 10px;
}
.workflow-step-desc {
display: block;
min-height: 0;
font-size: 0.875rem;
line-height: 1.6;
color: var(--text-secondary);
max-width: 36ch;
overflow: hidden;
opacity: 0;
transition: opacity 0.3s ease;
}
.workflow-step-btn.active .workflow-step-desc { opacity: 1; }
.workflow-step-progress {
display: block;
height: 1px;
background: var(--workflow-progress-bg);
margin-top: 16px;
position: relative;
overflow: hidden;
opacity: 0;
transition: opacity 0.25s ease;
}
.workflow-step-btn.active .workflow-step-progress {
opacity: 1;
}
.workflow-step-progress::after {
content: '';
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 0%;
background: var(--workflow-progress-fill);
}
.workflow-step-btn.active .workflow-step-progress::after {
animation: workflow-progress-fill 5s linear forwards;
}
.workflow-section.is-paused .workflow-step-btn.active .workflow-step-progress::after,
.workflow-section:hover .workflow-step-btn.active .workflow-step-progress::after {
animation-play-state: paused;
}
@keyframes workflow-progress-fill {
from { width: 0%; }
to { width: 100%; }
}
.workflow-preview {
min-height: 424px;
}
@media (min-width: 1024px) {
.workflow-preview { min-height: 520px; }
}
.workflow-stage {
position: relative;
width: 100%;
height: 100%;
min-height: 424px;
border-radius: 20px;
overflow: hidden;
background: #141416;
}
@media (min-width: 1024px) {
.workflow-stage { min-height: 520px; }
}
.workflow-bg {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
opacity: 0;
transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.workflow-bg.active {
opacity: 1;
}
.workflow-bg::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.45) 100%);
}
.workflow-ui-wrap {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
padding: 32px 24px;
z-index: 1;
}
.workflow-ui {
width: 100%;
max-width: 424px;
background: rgba(18, 18, 20, 0.92);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 14px;
box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
opacity: 0;
transform: translateY(12px) scale(0.98);
transition: opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1), transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
pointer-events: none;
}
.workflow-ui.active {
opacity: 1;
transform: translateY(0) scale(1);
pointer-events: auto;
}
.workflow-ui-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 16px 16px;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.workflow-ui-title {
display: flex;
align-items: center;
gap: 8px;
font-size: 0.8125rem;
font-weight: 500;
color: #f4f4f5;
}
.workflow-ui-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--accent);
}
.workflow-ui-body {
padding: 16px;
}
.workflow-ui-label {
font-size: 0.6875rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: rgba(244, 244, 245, 0.45);
margin-bottom: 12px;
}
.workflow-stat-row {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
margin-bottom: 16px;
}
.workflow-stat {
padding: 16px;
border-radius: 10px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.06);
}
.workflow-stat-value {
font-size: 1.25rem;
font-weight: 600;
letter-spacing: -0.02em;
color: #f4f4f5;
}
.workflow-stat-label {
font-size: 0.6875rem;
color: rgba(244, 244, 245, 0.45);
margin-top: 4px;
}
.workflow-table {
width: 100%;
border-collapse: collapse;
font-size: 0.75rem;
}
.workflow-table th {
text-align: left;
font-weight: 500;
color: rgba(244, 244, 245, 0.45);
padding: 8px 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.workflow-table td {
padding: 8px 0;
color: rgba(244, 244, 245, 0.75);
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.workflow-badge {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 0.6875rem;
font-weight: 500;
padding: 3px 8px;
border-radius: 9999px;
background: rgba(34, 197, 94, 0.12);
color: #4ade80;
}
.workflow-badge::before {
content: '';
width: 5px;
height: 5px;
border-radius: 50%;
background: #4ade80;
}
.workflow-channel-list {
display: flex;
flex-direction: column;
gap: 8px;
}
.workflow-channel {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 16px;
border-radius: 10px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.06);
font-size: 0.8125rem;
color: rgba(244, 244, 245, 0.85);
}
.workflow-channel.on {
border-color: rgba(78, 101, 145, 0.35);
background: rgba(78, 101, 145, 0.08);
}
.workflow-toggle {
width: 36px;
height: 20px;
border-radius: 9999px;
background: rgba(255, 255, 255, 0.12);
position: relative;
}
.workflow-channel.on .workflow-toggle {
background: var(--accent);
}
.workflow-toggle::after {
content: '';
position: absolute;
top: 2px;
left: 2px;
width: 16px;
height: 16px;
border-radius: 50%;
background: #fff;
transition: transform 0.2s ease;
}
.workflow-channel.on .workflow-toggle::after {
transform: translateX(16px);
}
.workflow-variant-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
}
.workflow-variant {
aspect-ratio: 3 / 4;
border-radius: 8px;
background-size: cover;
background-position: center;
border: 1px solid rgba(255, 255, 255, 0.08);
}
.workflow-brand-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
}
.workflow-brand-item {
padding: 16px;
border-radius: 10px;
background: rgba(255, 255, 255, 0.04);
border: 1px dashed rgba(255, 255, 255, 0.12);
text-align: center;
font-size: 0.75rem;
color: rgba(244, 244, 245, 0.55);
}
.workflow-brand-item.filled {
border-style: solid;
border-color: rgba(78, 101, 145, 0.3);
color: rgba(244, 244, 245, 0.85);
}
.site-footer {
padding: 72px 24px 32px;
background: var(--footer-bg);
transition: background-color 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.footer-shell {
max-width: 72rem;
margin: 0 auto;
}
.footer-top {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 48px;
padding-bottom: 56px;
}
@media (min-width: 1024px) {
.footer-top {
grid-template-columns: minmax(0, 1fr) 320px;
gap: 64px;
}
}
.footer-nav-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 32px 24px;
}
@media (min-width: 768px) {
.footer-nav-grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 32px 24px;
}
}
.footer-col-label {
display: inline-flex;
align-items: center;
font-size: 0.6875rem;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--text-secondary);
background: var(--footer-label-bg);
border-radius: 6px;
padding: 6px 8px;
margin-bottom: 16px;
}
.footer-col ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 16px;
}
.footer-col a {
font-size: 0.9375rem;
font-weight: 500;
color: var(--text-primary);
text-decoration: none;
transition: color 0.2s ease;
}
.footer-col a:hover { color: var(--accent); }
.footer-aside {
display: flex;
flex-direction: column;
gap: 16px;
}
.footer-newsletter {
background: var(--footer-card);
border: 1px solid var(--border);
border-radius: 12px;
overflow: hidden;
}
.footer-newsletter-visual {
height: 120px;
background: var(--footer-visual);
background-size: cover;
position: relative;
}
.footer-newsletter-visual::after {
content: '';
position: absolute;
inset: 0;
background-image: radial-gradient(circle, rgba(255, 255, 255, 0.35) 1px, transparent 1px);
background-size: 8px 8px;
opacity: 0.5;
mix-blend-mode: overlay;
}
.footer-newsletter-body {
padding: 24px;
}
.footer-newsletter-body h3 {
font-size: 1.125rem;
font-weight: 600;
letter-spacing: -0.02em;
color: var(--text-primary);
margin: 0 0 16px;
}
.footer-newsletter-form {
display: flex;
gap: 8px;
}
.footer-newsletter-form input {
flex: 1;
min-width: 0;
font-family: inherit;
font-size: 0.875rem;
padding: 8px 16px;
border-radius: 8px;
border: 1px solid var(--border-strong);
background: var(--bg-page);
color: var(--text-primary);
}
.footer-newsletter-form input::placeholder {
color: var(--text-muted);
}
.footer-newsletter-form input:focus {
outline: 2px solid var(--accent);
outline-offset: 1px;
}
.footer-newsletter-form button {
flex-shrink: 0;
font-family: inherit;
font-size: 0.875rem;
font-weight: 500;
padding: 8px 16px;
border-radius: 8px;
border: none;
background: #18181b;
color: #ffffff;
cursor: pointer;
transition: background 0.2s ease;
}
[data-theme="dark"] .footer-newsletter-form button {
background: #f4f4f5;
color: #18181b;
}
.footer-newsletter-form button:hover {
opacity: 0.88;
}
.footer-social {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 16px 16px;
border-radius: 12px;
background: var(--footer-social-bg);
color: #ffffff;
}
.footer-social > span {
font-size: 0.9375rem;
font-weight: 600;
}
.footer-social-icons {
display: flex;
align-items: center;
gap: 16px;
}
.footer-social-icons a {
display: inline-flex;
align-items: center;
justify-content: center;
color: #ffffff;
opacity: 0.92;
transition: opacity 0.2s ease, transform 0.2s ease;
}
.footer-social-icons a:hover {
opacity: 1;
transform: translateY(-1px);
}
.footer-social-icons svg {
width: 18px;
height: 18px;
}
.footer-wordmark {
font-family: var(--font-display);
font-size: clamp(4rem, 16vw, 11rem);
font-weight: 700;
letter-spacing: -0.02em;
line-height: 0.9;
padding: 8px 0 40px;
user-select: none;
/* big watermark reads as texture, not content: fade toward the accent */
background: linear-gradient(180deg, var(--text-primary) 12%, var(--accent) 145%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.footer-bottom {
display: flex;
flex-direction: column;
gap: 16px;
padding-top: 24px;
border-top: 1px solid var(--border);
}
@media (min-width: 768px) {
.footer-bottom {
flex-direction: row;
align-items: center;
justify-content: space-between;
}
}
.footer-copy {
font-size: 0.75rem;
font-weight: 500;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--text-muted);
margin: 0;
}
.footer-legal {
display: flex;
flex-wrap: wrap;
gap: 16px 24px;
}
.footer-legal a {
font-size: 0.75rem;
font-weight: 500;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--text-muted);
text-decoration: none;
transition: color 0.2s ease;
}
.footer-legal a:hover { color: var(--text-primary); }
.reveal-item {
opacity: 0;
transform: translateY(14px);
transition: opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1), transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-item.visible {
opacity: 1;
transform: translateY(0);
}
/* Purple gradient pill button (reference "Create Your First Ad") */
.btn-primary {
display: inline-flex;
align-items: center;
gap: 8px;
font-weight: 600;
background: linear-gradient(180deg, var(--periwinkle-light) 0%, var(--periwinkle-deep) 100%);
color: #ffffff;
border-radius: 9999px;
box-shadow: 0 14px 34px var(--accent-glow), inset 0 1px 0 rgba(255, 255, 255, 0.35);
transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}
.btn-primary:hover {
transform: translateY(-1px);
filter: brightness(1.04);
box-shadow: 0 18px 44px var(--accent-glow), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
/* Circular arrow chip inside a pill button */
.btn-arrow {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: 9999px;
background: rgba(255, 255, 255, 0.22);
flex-shrink: 0;
}
.btn-arrow svg { width: 16px; height: 16px; }
.btn-ghost {
border: 1px solid rgba(255,255,255,0.14);
transition: border-color 0.2s ease, background 0.2s ease;
}
.btn-ghost:hover {
border-color: rgba(255,255,255,0.28);
background: rgba(255,255,255,0.04);
}
#hero-root { touch-action: none; }
/* ── Hero cards ── */
.hero-stage {
position: relative;
width: 100%;
height: 100%;
background: var(--hero-bg);
overflow: hidden;
transition: background-color 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
/* ── Animated halftone canvas backdrop ──
A precomputed dot grid (built once per theme from the source JPG) is
redrawn each frame as ONE Path2D fill: dots breathe on a drift wave,
the brightest twinkle, and they push away from the cursor. Only the
active theme's image loads up front; the other is fetched when idle. */
.hero-mesh {
position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0;
}
.hero-canvas {
position: absolute; inset: 0;
width: 100%; height: 100%;
display: block;
opacity: 0.6; /* dot field sits behind copy, not competing with it */
transition: opacity 0.24s ease;
}
.hero-canvas.is-switching { opacity: 0; }
/* soft centre scrim keeps the headline + chat readable over the busy dots,
with a faint periwinkle warmth so it ties into the brand palette */
.hero-scrim {
position: absolute; inset: 0;
background:
radial-gradient(60% 44% at 50% 46%, var(--accent-dim) 0%, transparent 60%),
radial-gradient(120% 86% at 50% 44%, var(--bg-page) 0%, rgba(0,0,0,0) 56%);
}
/* ── Animated sparkles ──
Pure CSS twinkle (opacity + scale + a touch of rotation), reusing the
same 4-point star mark as the pricing section's decor for a consistent
brand mark. Cheap: transform/opacity only, no JS, no per-frame cost. */
.hero-sparkles { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.hero-spark {
position: absolute;
left: var(--x); top: var(--y);
width: var(--sz); height: var(--sz);
color: var(--hero-spark-c, rgba(255, 255, 255, 0.95));
filter: drop-shadow(0 0 6px var(--accent-glow));
opacity: 0;
transform: scale(0.3) rotate(0deg);
animation: heroSparkTwinkle var(--dur, 4.2s) ease-in-out var(--delay, 0s) infinite;
}
[data-theme="light"] .hero-spark { --hero-spark-c: rgba(74, 63, 168, 0.75); }
.hero-spark svg { display: block; width: 100%; height: 100%; }
@keyframes heroSparkTwinkle {
0%, 100% { opacity: 0; transform: scale(0.25) rotate(0deg); }
45% { opacity: 0.95; transform: scale(1) rotate(14deg); }
65% { opacity: 0.4; transform: scale(0.75) rotate(20deg); }
}
@media (prefers-reduced-motion: reduce) {
.hero-spark { animation: none; opacity: 0.55; transform: scale(0.8); }
}
.hero-inner {
position: relative;
z-index: 1;
display: flex;
height: 100%;
width: 100%;
flex-direction: column;
align-items: center;
justify-content: center;
perspective: 1000px;
}
/* ── Floating creative cards (scatter -> bottom ring ticker) ── */
.hero-float-layer { position: absolute; inset: 0; z-index: 2; }
.hero-card {
--hc-w: clamp(122px, 12.5vw, 178px);
position: absolute;
left: 50%;
top: 50%;
width: var(--hc-w);
height: calc(var(--hc-w) * 1.42);
margin-left: calc(var(--hc-w) / -2);
margin-top: calc(var(--hc-w) * -0.71);
will-change: transform, opacity;
cursor: pointer;
pointer-events: auto;
}
@media (max-width: 700px) { .hero-card { --hc-w: clamp(88px, 24vw, 122px); } }
/* idle bob lives between the JS-positioned card and the flip layer */
.hero-card-bob {
position: absolute; inset: 0;
transform-style: preserve-3d;
perspective: 780px; /* local depth for the flip layer */
animation: cardBob 6s ease-in-out infinite alternate;
}
/* JS drives one full rotateY on this layer as the card enters the ring;
kept separate so it never fights the CSS hover on .hero-card-inner.
No permanent will-change: the browser promotes it while the morph runs. */
.hero-card-flip {
position: absolute; inset: 0;
transform-style: preserve-3d;
}
.hero-card:nth-child(2n) .hero-card-bob { animation-duration: 7.2s; animation-delay: -2.4s; }
.hero-card:nth-child(3n) .hero-card-bob { animation-duration: 8.4s; animation-delay: -4s; }
@keyframes cardBob { from { transform: translateY(-7px); } to { transform: translateY(7px); } }
.hero-card-inner {
position: relative;
width: 100%;
height: 100%;
transform-style: preserve-3d;
transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
/* hover: card lifts + scales + glows (bob pauses so the lift reads cleanly).
Position is set by JS on .hero-card each frame, so the hover transform
lives on .hero-card-inner, which the script never touches. */
.hero-card:hover { z-index: 40; }
.hero-card:hover .hero-card-bob { animation-play-state: paused; }
.hero-card:hover .hero-card-inner { transform: translateY(-12px) scale(1.08); }
.hero-card-face {
position: absolute;
inset: 0;
border-radius: 13px;
overflow: hidden;
backface-visibility: hidden;
box-shadow:
0 22px 50px rgba(21, 36, 55, 0.5),
0 0 40px rgba(106, 79, 208, 0.14),
0 0 0 1px rgba(169, 149, 220, 0.24) inset;
transition: box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.hero-card:hover .hero-card-face {
box-shadow:
0 40px 90px rgba(21, 36, 55, 0.62),
0 0 64px var(--accent-glow),
0 0 0 1.5px rgba(169, 149, 220, 0.55) inset;
}
/* Diagonal light sheen across the front face for a glossy 3D read */
.hero-card-front::before {
content: '';
position: absolute;
inset: 0;
z-index: 2;
pointer-events: none;
background: linear-gradient(
122deg,
rgba(255, 255, 255, 0.28) 0%,
rgba(255, 255, 255, 0.06) 24%,
transparent 46%,
transparent 62%,
rgba(124, 92, 214, 0.16) 100%
);
mix-blend-mode: screen;
}
/* Placeholder look lives on the container so it always shows behind the
![]()
- if the photo never loads, this is the permanent, clean result
(never the browser's broken-image icon + alt text). */
.hero-card-front {
background: linear-gradient(150deg, var(--accent-purple-light) 0%, var(--accent-slate) 100%);
}
.hero-card-face video {
width: 100%;
height: 100%;
object-fit: cover;
background: linear-gradient(150deg, var(--accent-purple-light) 0%, var(--accent-slate) 100%);
}
.hero-card-front::after {
content: '';
position: absolute;
inset: 0;
background:
linear-gradient(160deg, rgba(124, 92, 214, 0.08) 0%, rgba(21, 36, 55, 0.22) 100%);
transition: background 0.25s;
}
.hero-card:hover .hero-card-front::after { background: transparent; }
/* "AI generated" tag on each card */
.hero-ai-tag {
position: absolute;
left: 8px; bottom: 8px;
z-index: 3;
display: inline-flex;
align-items: center;
gap: 5px;
font-family: var(--font-display);
font-size: 9.5px;
font-weight: 600;
letter-spacing: 0.02em;
white-space: nowrap;
color: #fff;
padding: 4px 8px 4px 7px;
border-radius: 9999px;
background: rgba(10, 8, 26, 0.5);
border: 1px solid rgba(255, 255, 255, 0.16);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
.hero-ai-tag::before {
content: '';
width: 6px; height: 6px; border-radius: 50%;
background: linear-gradient(135deg, var(--periwinkle-light), var(--accent));
box-shadow: 0 0 7px var(--accent-glow);
}
.hero-card-back {
transform: rotateY(180deg);
background: linear-gradient(165deg, #241a44 0%, #101a30 100%);
border: 1px solid rgba(169, 149, 220, 0.4);
display: flex;
align-items: center;
justify-content: center;
padding: 8px;
text-align: center;
}
.hero-card-back p:first-child {
font-size: 11px;
font-weight: 700;
color: var(--accent-purple-light);
text-transform: uppercase;
letter-spacing: 0.15em;
margin-bottom: 4px;
}
.hero-card-back p:last-child {
font-size: 11px;
font-weight: 500;
color: #fff;
line-height: 1.3;
}
.hero-intro {
position: absolute;
z-index: 6;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
/* explicit width: left:50% otherwise collapses shrink-to-fit width on phones */
width: min(100vw, 820px);
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
pointer-events: none;
padding: 0 24px;
}
.hero-intro::before {
content: '';
position: absolute;
left: 50%;
top: 50%;
width: 140%;
height: 200%;
transform: translate(-50%, -50%);
background: radial-gradient(ellipse at center, var(--bg-page) 0%, rgba(0, 0, 0, 0) 68%);
opacity: 0.8;
z-index: -1;
pointer-events: none;
}
.hero-intro h1 {
font-family: var(--font-display);
font-size: clamp(2rem, 5.2vw, 4rem);
font-weight: 700;
color: var(--hero-text);
letter-spacing: -0.02em;
line-height: 1.04;
max-width: none; /* the
controls the two lines */
margin: 0 auto;
text-shadow: 0 0 42px rgba(95, 127, 214, 0.22);
transition: color 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
/* stylised serif-italic accent word for a creative-studio feel */
.hero-intro h1 em {
font-family: var(--font-serif);
font-style: italic;
font-weight: 400;
letter-spacing: 0;
padding-right: 0.06em;
background: linear-gradient(100deg, var(--periwinkle-light) 0%, var(--accent) 62%, var(--periwinkle-deep) 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.hero-intro h1 span {
background: linear-gradient(100deg, var(--periwinkle-light) 0%, var(--accent) 58%, var(--periwinkle-deep) 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.hero-sub {
margin: 24px 0 0;
font-size: clamp(1rem, 2.2vw, 1.18rem);
color: var(--hero-text-muted);
max-width: 52ch; /* keeps the refined caption on one line */
line-height: 1.5;
transition: color 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
/* Chat prompt box: always light, in every theme */
.hero-chat {
pointer-events: auto;
width: min(620px, 100%);
margin-top: 54px; /* clear gap from the caption */
text-align: left;
background: #ffffff;
border: 1.5px solid rgba(24, 24, 40, 0.10);
border-radius: 20px;
box-shadow: 0 26px 64px rgba(15, 14, 45, 0.28), 0 0 0 5px rgba(125, 123, 240, 0.14);
padding: 16px 16px 16px;
transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.hero-chat:focus-within {
border-color: var(--accent);
box-shadow: 0 26px 64px rgba(15, 14, 45, 0.32), 0 0 0 5px rgba(125, 123, 240, 0.2), 0 0 34px var(--accent-glow);
}
.hero-chat textarea {
display: block;
width: 100%;
border: 0;
outline: 0;
resize: none;
background: transparent;
font: inherit;
font-size: 1.02rem;
color: #1b1b2e;
min-height: 56px;
line-height: 1.5;
}
.hero-chat textarea::placeholder { color: #8a8aa2; }
.hero-chat-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
margin-top: 6px;
}
.hero-suggest {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 0.92rem;
font-weight: 600;
color: #55556e;
padding: 8px 8px;
border-radius: 10px;
transition: color 0.2s ease, background 0.2s ease;
}
.hero-suggest:hover { color: var(--accent); background: rgba(125, 123, 240, 0.12); }
.hero-suggest svg { width: 16px; height: 16px; }
/* ── Stylised Generate button ── */
.hero-generate {
position: relative;
overflow: hidden;
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--font-display);
font-size: 0.95rem;
font-weight: 600;
letter-spacing: -0.005em;
padding: 8px 24px 8px 16px;
border-radius: 13px;
color: #fff;
background: linear-gradient(135deg, var(--periwinkle-light) 0%, var(--accent) 46%, var(--periwinkle-deep) 100%);
box-shadow: 0 12px 28px var(--accent-glow), inset 0 1px 0 rgba(255, 255, 255, 0.45), inset 0 -2px 6px rgba(30, 20, 90, 0.25);
transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}
/* gloss sheen sweeps across only on hover (no idle cost) */
.hero-generate::before {
content: '';
position: absolute; top: 0; bottom: 0; left: -70%; width: 48%;
background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.55), transparent);
transform: skewX(-18deg);
transition: left 0.6s ease;
pointer-events: none;
}
.hero-generate:hover::before { left: 135%; }
.hero-generate:hover { transform: translateY(-1px) scale(1.02); filter: brightness(1.04); box-shadow: 0 16px 36px var(--accent-glow), inset 0 1px 0 rgba(255, 255, 255, 0.5); }
.hero-generate:active { transform: translateY(0) scale(0.99); }
.gen-ic {
display: inline-flex; align-items: center; justify-content: center;
width: 22px; height: 22px; border-radius: 7px;
background: rgba(255, 255, 255, 0.2);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
}
.gen-ic svg { width: 13px; height: 13px; }
.hero-chips {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 8px;
margin-top: 14px;
pointer-events: auto;
}
.hero-chip {
font-size: 0.8rem;
font-weight: 600;
color: var(--text-secondary);
background: var(--glass-bg);
border: 1px solid var(--card-border);
border-radius: 9999px;
padding: 7px 16px;
cursor: pointer;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.hero-chip:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-dim); }
/* "Suggest ideas" swaps the row to a fresh trio - each chip eases in */
.hero-chips.chips-swap .hero-chip { animation: chipIn 0.34s cubic-bezier(0.16, 1, 0.3, 1) both; }
.hero-chips.chips-swap .hero-chip:nth-child(2) { animation-delay: 0.05s; }
.hero-chips.chips-swap .hero-chip:nth-child(3) { animation-delay: 0.10s; }
@keyframes chipIn { from { opacity: 0; transform: translateY(7px) scale(0.96); } to { opacity: 1; transform: none; } }
@media (max-width: 700px) {
.hero-chat { margin-top: 38px; padding: 16px 16px 8px; border-radius: 16px; }
.hero-chat textarea { min-height: 48px; font-size: 0.95rem; }
/* chips + shuffle are a desktop enhancement; on phones the static
placeholder guides input and the row is just the Generate action */
.hero-chips, .hero-suggest { display: none; }
.hero-chat-row { justify-content: flex-end; }
.hero-generate { padding: 8px 16px; font-size: 0.88rem; }
}
.hero-arc-content {
position: absolute;
top: 38%;
left: 50%;
z-index: 10;
width: 90%;
max-width: 760px;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 0 16px;
pointer-events: none;
opacity: 0;
transform: translate(-50%, -50%) translateY(24px);
transition: opacity 0.6s, transform 0.6s;
}
/* Soft backing so the centred copy stays readable over the tunnel's
vanishing point in both themes. */
.hero-arc-content::before {
content: '';
position: absolute;
left: 50%;
top: 50%;
width: 150%;
height: 200%;
transform: translate(-50%, -50%);
background: radial-gradient(ellipse at center, var(--bg-page) 0%, rgba(0, 0, 0, 0) 66%);
opacity: 0.78;
z-index: -1;
pointer-events: none;
}
.hero-arc-content.visible {
opacity: 1;
transform: translate(-50%, -50%);
pointer-events: auto;
}
.hero-arc-content h2 {
font-family: var(--font-display);
font-size: clamp(2rem, 5.2vw, 3.75rem);
font-weight: 600;
color: var(--hero-text);
letter-spacing: -0.01em;
margin: 0 0 24px;
white-space: nowrap;
transition: color 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
@media (max-width: 480px) {
.hero-arc-content h2 { white-space: normal; }
}
.hero-arc-content h2 span {
background: linear-gradient(100deg, var(--accent-purple) 0%, var(--accent) 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.hero-arc-content > p {
font-size: clamp(1.0625rem, 2.4vw, 1.25rem);
color: var(--hero-text-muted);
max-width: 36rem;
line-height: 1.6;
margin: 0;
transition: color 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.hero-arc-actions {
margin-top: 32px;
display: flex;
gap: 16px;
flex-wrap: wrap;
justify-content: center;
}
.hero-btn-outline {
/* inline-flex (not the default inline) so a pill border on text that
wraps to 2+ lines draws as one unified rounded box instead of a
separate fragment per line. */
display: inline-flex;
align-items: center;
justify-content: center;
text-align: center;
font-size: 1rem;
font-weight: 600;
padding: 16px 32px;
border-radius: 9999px;
border: 1.5px solid var(--hero-outline-border);
color: var(--hero-outline-text);
text-decoration: none;
transition: border-color 0.2s, color 0.2s, background 0.2s, transform 0.2s;
}
.hero-btn-outline:hover { border-color: var(--accent); background: var(--accent-dim); transform: translateY(-1px); }
/* ── Reusable section CTA row ── */
.cta-row {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 16px;
margin-top: 52px;
}
.cta-row .cta-note {
flex-basis: 100%;
text-align: center;
font-size: 0.85rem;
color: var(--text-muted);
margin-top: 2px;
}
/* ── Logo strip ── */
.logos-section {
background: var(--bg-muted);
padding: 56px 24px;
}
.logos-inner {
max-width: 72rem;
margin: 0 auto;
text-align: center;
}
.logos-label {
font-size: 11px;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--text-muted);
margin-bottom: 28px;
}
.logos-carousel {
position: relative;
padding-top: 32px;
overflow: hidden;
mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
-webkit-mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
}
.logos-track {
display: flex;
width: max-content;
animation: logos-marquee 36s linear infinite;
}
.logos-carousel:hover .logos-track {
animation-play-state: paused;
}
.logos-set {
display: flex;
align-items: center;
gap: 56px;
padding-right: 56px;
flex-shrink: 0;
}
@keyframes logos-marquee {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
.logo-item {
position: relative;
display: flex;
align-items: center;
justify-content: center;
height: 56px;
flex-shrink: 0;
color: var(--logo-fill);
opacity: 0.45;
filter: grayscale(100%);
transition: opacity 0.25s ease, filter 0.25s ease;
}
.logo-item[data-title]::after {
content: attr(data-title);
position: absolute;
bottom: calc(100% + 4px);
left: 50%;
transform: translateX(-50%) translateY(4px);
background: #0f172a;
color: #ffffff;
padding: 4px 10px;
border-radius: 6px;
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.02em;
white-space: nowrap;
pointer-events: none;
opacity: 0;
visibility: hidden;
transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
border: 1px solid rgba(255, 255, 255, 0.18);
z-index: 20;
}
.logo-item[data-title]:hover::after {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(0);
}
.logo-item:hover {
opacity: 0.85;
filter: grayscale(0%);
}
.logo-item img {
height: 26px;
width: auto;
max-width: 120px;
object-fit: contain;
}
.logo-item img[src*="mp_tourist"] {
height: 64px;
max-height: 64px;
max-width: 180px;
}
.logo-item svg {
height: 32px;
width: auto;
fill: #27272a;
}
/* ── Pricing section ── */
.logo-item svg text { fill: var(--logo-fill); }
[data-theme="dark"] .logo-item img {
filter: grayscale(100%) brightness(1.6);
}
/* ── Testimonials ── */
.testimonials-section {
background: var(--bg-page);
}
.testimonials-carousel {
position: relative;
max-width: 720px;
margin: 0 auto;
}
.testimonials-viewport {
position: relative;
min-height: 224px;
}
@media (min-width: 768px) {
.testimonials-viewport { min-height: 200px; }
}
.testimonial-slide {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 0 8px;
opacity: 0;
visibility: hidden;
transform: translateY(10px);
transition:
opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1),
transform 0.55s cubic-bezier(0.16, 1, 0.3, 1),
visibility 0.55s;
}
.testimonial-slide.active {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.testimonial-quote {
font-size: clamp(1.125rem, 2.5vw, 1.5rem);
font-weight: 500;
line-height: 1.55;
letter-spacing: -0.02em;
color: var(--text-primary);
margin: 0 0 32px;
max-width: 38ch;
}
.testimonial-author {
display: flex;
flex-direction: column;
gap: 4px;
}
.testimonial-name {
font-size: 0.9375rem;
font-weight: 600;
color: var(--text-primary);
}
.testimonial-company {
font-size: 0.875rem;
color: var(--text-muted);
}
.testimonials-dots {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
margin-top: 40px;
}
.testimonial-dot {
width: 8px;
height: 8px;
border-radius: 9999px;
border: none;
padding: 0;
background: var(--border-strong);
cursor: pointer;
transition: background 0.25s ease, transform 0.25s ease, width 0.25s ease;
}
.testimonial-dot:hover {
background: var(--text-muted);
}
.testimonial-dot.active {
width: 24px;
background: var(--accent);
}
.pricing-wrap {
position: relative;
min-height: 100vh;
background: var(--pricing-bg);
overflow: hidden;
padding: 72px 24px 96px;
color: var(--pricing-text);
transition: background-color 0.35s cubic-bezier(0.16, 1, 0.3, 1), color 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.pricing-grid-bg {
position: absolute;
inset: 0;
height: 384px;
background-image:
linear-gradient(to right, var(--pricing-grid-line) 1px, transparent 1px),
linear-gradient(to bottom, var(--pricing-grid-line) 1px, transparent 1px);
background-size: 70px 80px;
mask-image: radial-gradient(50% 50%, white, transparent);
-webkit-mask-image: radial-gradient(50% 50%, white, transparent);
pointer-events: none;
}
.pricing-sparkles {
position: absolute;
inset: 0;
height: 384px;
overflow: hidden;
mask-image: radial-gradient(50% 50%, white, transparent 85%);
-webkit-mask-image: radial-gradient(50% 50%, white, transparent 85%);
pointer-events: none;
}
.pricing-sparkles span {
position: absolute;
width: 2px;
height: 2px;
background: var(--pricing-sparkle);
border-radius: 50%;
animation: sparkle-fall linear infinite;
opacity: 0;
}
@keyframes sparkle-fall {
0% { transform: translateY(-10px); opacity: 0; }
10% { opacity: 0.8; }
90% { opacity: 0.4; }
100% { transform: translateY(400px); opacity: 0; }
}
.pricing-glow {
position: absolute;
left: -568px;
right: -568px;
top: -114px;
height: 2053px;
border-radius: 50%;
border: 200px solid rgba(78, 101, 145, var(--pricing-glow-opacity));
filter: blur(92px);
pointer-events: none;
}
.pricing-radial {
position: absolute;
top: 0;
left: 10%;
right: 10%;
width: 80%;
height: 100%;
background: radial-gradient(circle at center, rgba(78, 101, 145, 0.35) 0%, transparent 70%);
opacity: 0.6;
mix-blend-mode: multiply;
pointer-events: none;
}
.pricing-header {
position: relative;
z-index: 10;
text-align: center;
max-width: 52rem;
margin: 0 auto;
padding-bottom: 1.5rem;
}
.pricing-eyebrow {
display: inline-block;
font-family: var(--font-display);
font-weight: 600;
font-size: 0.95rem;
color: var(--pricing-eyebrow);
margin-bottom: 0.85rem;
opacity: 0;
transform: translateY(12px);
transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.16,1,0.3,1);
}
.pricing-wrap.in-view .pricing-eyebrow { opacity: 1; transform: translateY(0); }
.pricing-title {
font-family: var(--font-display);
font-size: clamp(2.4rem, 6vw, 3.6rem);
font-weight: 700;
line-height: 1.05;
color: var(--pricing-text);
margin-bottom: 1.15rem;
}
.pricing-title .word {
display: inline-block;
overflow: hidden;
vertical-align: bottom;
padding-bottom: 0.12em;
}
.pricing-title .word-inner {
display: inline-block;
transform: translateY(115%);
opacity: 0;
}
.pricing-wrap.in-view .pricing-title .word-inner {
animation: word-reveal 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
animation-delay: var(--wd, 0s);
}
@keyframes word-reveal {
from { transform: translateY(115%); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
/* hand-drawn underline scribble under the highlighted word */
.pricing-title .hl { position: relative; white-space: nowrap; }
.pricing-title .hl svg {
position: absolute;
left: -3%;
bottom: -0.18em;
width: 106%;
height: 0.42em;
overflow: visible;
}
.pricing-title .hl svg path {
fill: none;
stroke: var(--pricing-eyebrow);
stroke-width: 9;
stroke-linecap: round;
stroke-dasharray: var(--len, 400);
stroke-dashoffset: var(--len, 400);
opacity: 0.9;
}
.pricing-wrap.in-view .pricing-title .hl svg path {
animation: hl-draw 0.7s ease 0.72s forwards;
}
@keyframes hl-draw { to { stroke-dashoffset: 0; } }
.pricing-sub {
color: var(--pricing-muted);
font-size: clamp(1rem, 1.4vw, 1.15rem);
margin: 0 auto 1.6rem;
max-width: 44ch;
opacity: 0;
transform: translateY(-16px);
filter: blur(8px);
transition: opacity 0.5s 0.12s, transform 0.5s 0.12s, filter 0.5s 0.12s;
}
.pricing-wrap.in-view .pricing-sub {
opacity: 1;
transform: translateY(0);
filter: blur(0);
}
.pricing-toggle-wrap {
opacity: 0;
transform: translateY(-10px);
transition: opacity 0.5s ease 0.22s, transform 0.5s ease 0.22s;
}
.pricing-wrap.in-view .pricing-toggle-wrap { opacity: 1; transform: translateY(0); }
/* floating themed decorations (star + sparkle), reused from image ref but tinted to theme */
.pricing-decor {
position: absolute;
z-index: 6;
pointer-events: none;
color: var(--pricing-decor);
opacity: 0;
transform: scale(0.4);
transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.34,1.56,0.64,1);
}
.pricing-wrap.in-view .pricing-decor { opacity: 1; transform: scale(1); }
.pricing-decor svg { display: block; width: 100%; height: 100%; filter: drop-shadow(0 6px 16px var(--accent-glow)); }
.pricing-decor.d-left { top: 132px; left: clamp(12px, 10vw, 170px); width: clamp(34px, 4vw, 56px); height: clamp(34px, 4vw, 56px); animation: decor-float-a 6s ease-in-out infinite; transition-delay: 0.28s; }
.pricing-decor.d-right { top: 104px; right: clamp(12px, 10vw, 170px); width: clamp(42px, 4.8vw, 70px); height: clamp(42px, 4.8vw, 70px); animation: decor-float-b 7.5s ease-in-out infinite; transition-delay: 0.38s; }
@keyframes decor-float-a { 0%,100% { translate: 0 0; } 50% { translate: 0 -14px; } }
@keyframes decor-float-b { 0%,100% { translate: 0 0; } 50% { translate: 0 -20px; } }
.pricing-toggle {
position: relative;
display: inline-flex;
border-radius: 9999px;
background: var(--pricing-toggle-bg);
border: 1px solid var(--pricing-toggle-border);
padding: 4px;
}
.pricing-toggle-btn {
position: relative;
z-index: 2;
height: 40px;
padding: 0 24px;
border-radius: 9999px;
font-size: 14px;
font-weight: 500;
color: var(--pricing-toggle-text);
background: none;
border: none;
cursor: pointer;
font-family: inherit;
transition: color 0.2s;
}
.pricing-toggle-btn.active { color: var(--pricing-text); }
.pricing-toggle-pill {
position: absolute;
top: 4px;
left: 4px;
height: 40px;
width: calc(50% - 4px);
border-radius: 9999px;
background: linear-gradient(to top, #4a63c4, #8fb0ec);
border: 4px solid #5f7fd6;
box-shadow: 0 0 12px rgba(95, 127, 214, 0.45);
transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.pricing-toggle-pill.yearly { transform: translateX(100%); }
.pricing-cards {
position: relative;
z-index: 10;
display: grid;
grid-template-columns: 1fr;
gap: 24px;
max-width: 66rem;
margin: 0 auto;
padding-top: 2rem;
}
@media (min-width: 768px) {
.pricing-cards { grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: start; }
}
.price-card {
position: relative;
display: flex;
flex-direction: column;
border-radius: 22px;
border: 1.5px solid var(--pricing-card-border);
background: var(--pricing-card);
color: var(--pricing-text);
padding: 32px 24px 32px;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 18px 44px rgba(10, 8, 24, 0.26);
opacity: 0;
transform: translateY(30px) rotate(var(--tilt, 0deg)) scale(0.95);
filter: blur(8px);
transition: opacity 0.55s cubic-bezier(0.16,1,0.3,1),
transform 0.55s cubic-bezier(0.16,1,0.3,1),
filter 0.55s cubic-bezier(0.16,1,0.3,1),
box-shadow 0.3s ease, border-color 0.3s ease;
}
.price-card:nth-child(1) { --tilt: -1.5deg; }
.price-card:nth-child(2) { --tilt: 0deg; }
.price-card:nth-child(3) { --tilt: 1.5deg; }
.pricing-wrap.in-view .price-card {
opacity: 1;
transform: translateY(0) rotate(var(--tilt, 0deg)) scale(1);
filter: blur(0);
}
.pricing-wrap.in-view .price-card:nth-child(1) { transition-delay: 0.14s; }
.pricing-wrap.in-view .price-card:nth-child(2) { transition-delay: 0.26s; }
.pricing-wrap.in-view .price-card:nth-child(3) { transition-delay: 0.38s; }
.price-card:hover {
transform: translateY(-6px) rotate(0deg) scale(1.015);
border-color: var(--pricing-card-ring);
box-shadow: 0 26px 60px rgba(10, 8, 24, 0.4), 0 0 46px var(--accent-glow);
}
.price-card.popular {
border-color: var(--pricing-card-ring);
box-shadow: 0 22px 58px rgba(10, 8, 24, 0.4), 0 0 60px var(--pricing-primary-glow);
z-index: 2;
}
.price-badge {
position: absolute;
top: -14px;
right: -8px;
left: auto;
transform: rotate(8deg);
font-family: var(--font-display);
font-size: 0.82rem;
font-weight: 700;
letter-spacing: 0;
text-transform: none;
background: var(--pricing-badge-bg);
color: var(--pricing-badge-text);
padding: 7px 16px;
border-radius: 9999px;
white-space: nowrap;
box-shadow: 0 8px 20px var(--pricing-primary-glow);
z-index: 5;
}
.pricing-wrap.in-view .price-badge {
animation: badge-pop 0.5s cubic-bezier(0.34,1.56,0.64,1) 0.5s backwards;
}
@keyframes badge-pop {
from { opacity: 0; transform: rotate(8deg) scale(0.3); }
to { opacity: 1; transform: rotate(8deg) scale(1); }
}
.price-icon {
width: 56px;
height: 56px;
border-radius: 50%;
display: grid;
place-items: center;
border: 1.5px solid var(--pricing-icon);
color: var(--pricing-icon);
background: var(--accent-dim);
margin-bottom: 20px;
}
.price-icon svg { width: 24px; height: 24px; }
.price-card-header { text-align: left; }
.price-card-name {
font-family: var(--font-display);
font-size: 1.6rem;
font-weight: 600;
margin-bottom: 4px;
color: var(--pricing-text);
}
.price-desc {
font-size: 0.9rem;
color: var(--pricing-muted);
margin: 0 0 16px;
line-height: 1.5;
max-width: 26ch;
}
.price-amount {
display: flex;
align-items: baseline;
font-family: var(--font-display);
font-size: 2.6rem;
font-weight: 700;
color: var(--pricing-text);
margin-bottom: 22px;
}
.price-amount .period {
font-size: 1rem;
font-weight: 400;
color: var(--pricing-muted);
margin-left: 4px;
}
.price-amount .price-value { font-variant-numeric: tabular-nums; }
.price-features { margin-bottom: 24px; }
.price-features ul {
list-style: none;
display: flex;
flex-direction: column;
gap: 16px;
}
.price-features li {
display: flex;
align-items: center;
gap: 8px;
font-size: 0.92rem;
color: var(--pricing-text);
}
.price-features li .feat-check {
flex-shrink: 0;
width: 22px;
height: 22px;
border-radius: 50%;
display: grid;
place-items: center;
border: 1.5px solid var(--pricing-check);
color: var(--pricing-check);
}
.price-features li .feat-check svg { width: 12px; height: 12px; }
.price-card-body { margin-top: auto; }
.price-btn {
width: 100%;
padding: 16px;
font-family: var(--font-display);
font-weight: 600;
font-size: 1.02rem;
border-radius: 12px;
border: 1.5px solid var(--pricing-btn-border);
background: var(--pricing-btn-bg);
color: var(--pricing-btn-text);
cursor: pointer;
transition: transform 0.15s ease, box-shadow 0.2s ease, filter 0.2s ease;
}
.price-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(10,8,24,0.3); }
.price-btn.primary {
background: var(--pricing-badge-bg);
border-color: transparent;
color: #ffffff;
box-shadow: 0 10px 30px var(--pricing-primary-glow);
}
.price-btn.primary:hover { box-shadow: 0 14px 38px var(--pricing-primary-glow); filter: brightness(1.06); }
.price-value { transition: opacity 0.2s; }
.price-value.updating { opacity: 0.4; }
@media (prefers-reduced-motion: reduce) {
#hero-root * { animation: none !important; transition: none !important; }
.pricing-title .word-inner,
.pricing-sparkles span { animation: none !important; }
.pricing-eyebrow, .pricing-sub, .pricing-toggle-wrap, .pricing-decor,
.price-card, .pricing-title .word-inner {
opacity: 1 !important;
transform: none !important;
filter: none !important;
}
.pricing-title .hl svg path { stroke-dashoffset: 0 !important; }
.logos-track { animation: none; }
.logos-carousel {
overflow-x: auto;
mask-image: none;
-webkit-mask-image: none;
}
.workflow-bg,
.workflow-ui,
.workflow-step-desc,
.workflow-step-desc-wrap { transition: none !important; }
.testimonial-slide { transition: none !important; }
.nav-glass-liquid { animation: none; }
}
/* ============================================================
Capabilities - MacBook screen -> panel -> cards
Faithful port of the reference engine: the laptop screen warps
via homography onto the glass, flattens into a 3-wide tiled
panel, dissolves in (a gif can be dropped onto #sc-joinedGif),
then the panel splits into three cards that flip to their backs
and fan into an arc. Scroll-position driven (native sticky
scroll - never blocks the page).
============================================================ */
.scroll-cards {
position: relative;
--sc-mb-w: min(920px, 82vw);
--sc-mb-ar: 804 / 405;
--sc-card-w: clamp(210px, 22vw, 300px);
--sc-card-h: clamp(280px, 29vw, 400px);
--sc-card-radius: 20px;
--sc-display: 'Bricolage Grotesque', system-ui, sans-serif;
--sc-body: 'Geist', system-ui, sans-serif;
/* the joined panel image tiled across the 3 card fronts - set a
src on #sc-joinedGif (the gif you'll add) or override --sc-joined */
--sc-joined: linear-gradient(180deg, #221f2e 0%, #15121d 100%);
--sc-c1: linear-gradient(158deg, #F6EFDC 0%, #E4D9BC 46%, #C8BC98 100%); --sc-c1-ink: #191712;
--sc-c2: linear-gradient(160deg, #C1D8F1 0%, #7E9EC8 46%, #3B5B8B 100%); --sc-c2-ink: #0f2036;
--sc-c3: linear-gradient(160deg, #A891E0 0%, #6E58AC 38%, #201a30 100%); --sc-c3-ink: #ffffff;
}
.sc-track { position: relative; width: 100%; height: 260vh; }
.sc-viewport { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden;
display: flex; flex-direction: column; align-items: center;
background: var(--bg-muted); transition: background-color 0.35s cubic-bezier(0.16,1,0.3,1); }
/* CTA below the fanned cards - opacity driven by scroll progress in JS */
.sc-cta {
position: absolute;
left: 50%;
bottom: clamp(40px, 9vh, 92px);
transform: translate(-50%, 14px);
z-index: 8;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 16px;
width: max-content;
max-width: 92vw;
opacity: 0;
pointer-events: none;
transition: opacity 0.2s linear;
}
.sc-cta.sc-cta-on { pointer-events: auto; }
@media (max-width: 560px) { .sc-cta { bottom: 32px; gap: 8px; } }
/* reveal "stage" - theme-aware (stays light in light mode, deep in dark mode) */
.sc-dark-layer { position: absolute; inset: 0; z-index: 1; opacity: 0; will-change: opacity;
background:
radial-gradient(58% 46% at 50% 8%, var(--mesh-glow-1) 0%, transparent 62%),
radial-gradient(46% 40% at 86% 84%, var(--mesh-glow-2) 0%, transparent 58%),
var(--bg-page); }
.sc-dark-layer .sc-grid { position: absolute; inset: -2px;
background-image:
linear-gradient(var(--pricing-grid-line) 1px, transparent 1px),
linear-gradient(90deg, var(--pricing-grid-line) 1px, transparent 1px);
background-size: 46px 46px;
-webkit-mask: radial-gradient(72% 62% at 50% 46%, #000 0%, transparent 78%);
mask: radial-gradient(72% 62% at 50% 46%, #000 0%, transparent 78%); }
.sc-eyebrow { position: absolute; top: 32px; left: 32px; z-index: 6; opacity: 0;
font-family: var(--sc-body); font-weight: 600; font-size: 12px; letter-spacing: 0.22em;
text-transform: uppercase; color: var(--accent); display: flex; align-items: center; gap: 8px; will-change: opacity; }
.sc-eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 999px; background: var(--accent); box-shadow: 0 0 12px var(--accent); }
.sc-head-wrap { position: relative; width: 100%; height: 19vh; flex-shrink: 0; margin-top: 3vh; z-index: 6; }
.sc-head { position: absolute; top: 0; left: 0; right: 0; text-align: center; padding: 0 24px; will-change: opacity, transform; }
.sc-eyebrow-top { font-family: var(--sc-display); font-weight: 600; font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 14px;
background: linear-gradient(90deg, var(--periwinkle-light), var(--accent)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sc-head h1 { font-family: var(--sc-display); font-weight: 600; margin: 0; font-size: clamp(23px, 3.3vw, 40px); line-height: 1.12; }
.sc-head.sc-hero h1 { color: var(--text-primary); }
.sc-head.sc-big { opacity: 0; } .sc-head.sc-big h1 { color: var(--periwinkle-light); }
.sc-subhead { margin: 16px auto 0; max-width: 42ch; line-height: 1.55; font-size: clamp(13px, 1.2vw, 16px); color: var(--text-muted); }
.sc-backdrop { position: absolute; top: 16%; left: 50%; transform: translateX(-50%);
width: calc(var(--sc-mb-w) * 1.35); height: 70vh; border-radius: 50%; z-index: 1;
background: radial-gradient(50% 50% at 50% 42%, var(--sc-macbook-halo) 0%, transparent 70%);
filter: blur(6px);
will-change: opacity; }
/* laptop */
.sc-stage-mb { flex: 1; width: 100%; display: grid; place-items: start center; padding-top: 6vh; z-index: 2; }
/* supporting copy in the four corners around the laptop (stays until the cards split).
On big screens the callouts hug the laptop's edges (near the middle) instead of
flying out to the far viewport corners; on medium screens they sit near the edge. */
.sc-corner { position: absolute; z-index: 5; width: clamp(200px, 14vw, 224px);
opacity: 0; will-change: opacity, transform; pointer-events: none; }
.sc-corner-ic { display: inline-flex; width: 48px; height: 48px; border-radius: 15px;
align-items: center; justify-content: center; margin-bottom: 15px;
border: 1px solid var(--border-strong); background: var(--card-bg); color: var(--accent);
box-shadow: var(--object-glow-strong), inset 0 1px 0 rgba(255,255,255,0.14); }
.sc-corner-ic svg { width: 24px; height: 24px; }
.sc-corner-k { display: block; font-family: var(--sc-display); font-weight: 700;
font-size: clamp(18px, 1.45vw, 22px); color: var(--text-primary); margin-bottom: 8px; letter-spacing: -0.01em; line-height: 1.15; }
.sc-corner p { margin: 0; font-family: var(--sc-body); font-size: clamp(13px, 0.98vw, 15.5px);
line-height: 1.55; color: var(--text-muted); }
/* big screens: hug the laptop (its half-width is 460px), pointing inward */
.sc-corner-tl, .sc-corner-bl { right: calc(50% + 472px); left: auto; text-align: right; }
.sc-corner-tr, .sc-corner-br { left: calc(50% + 472px); right: auto; text-align: left; }
.sc-corner-tl, .sc-corner-tr { top: 19%; }
.sc-corner-bl, .sc-corner-br { bottom: 17%; }
/* medium screens: not enough room beside the laptop, so sit near the edge */
@media (max-width: 1410px) {
.sc-corner-tl, .sc-corner-bl { right: auto; left: clamp(20px, 3vw, 72px); text-align: left; }
.sc-corner-tr, .sc-corner-br { left: auto; right: clamp(20px, 3vw, 72px); text-align: right; }
}
@media (max-width: 1180px) { .sc-corner { display: none; } }
.sc-assembly { position: relative; width: var(--sc-mb-w); aspect-ratio: var(--sc-mb-ar); overflow: visible; z-index: 2; }
.sc-assembly::before {
content: '';
position: absolute;
inset: -22% -14%;
border-radius: 50%;
background: radial-gradient(circle at 50% 46%, var(--sc-macbook-glow-core) 0%, var(--sc-macbook-glow) 34%, transparent 68%);
filter: blur(30px);
opacity: 0.95;
pointer-events: none;
z-index: 0;
transition: background 0.35s ease, opacity 0.35s ease;
}
.sc-macbook { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; display: block; pointer-events: none;
will-change: opacity; filter: drop-shadow(0 28px 46px rgba(10, 8, 24, 0.34)); }
.sc-layer { position: absolute; top: 0; left: 0; width: var(--sc-mb-w); aspect-ratio: 16/10; transform-origin: 0 0; z-index: 3; will-change: transform, opacity; }
.sc-layer .sc-frame { position: absolute; inset: 0; border-radius: 10px; overflow: hidden; background: #0b0b12; }
.sc-frame .sc-screen-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; z-index: 3; }
/* faux dashboard (default screen media, until a gif is dropped in) */
.sc-faux { position: absolute; inset: 0; z-index: 2; display: grid; grid-template-columns: 20% 1fr; background: linear-gradient(160deg, #17131f 0%, #0c0a12 100%); color: #e9e5f6; overflow: hidden; }
.sc-fx-side { border-right: 1px solid rgba(255,255,255,0.06); padding: 4% 6%; display: flex; flex-direction: column; gap: 8%; }
.sc-fx-logo { font-family: var(--sc-display); font-weight: 700; font-size: clamp(8px,1vw,13px); letter-spacing: 0.03em; }
.sc-fx-nav { display: flex; flex-direction: column; gap: 10%; }
.sc-fx-nav span { height: clamp(3px,0.6vw,6px); border-radius: 3px; background: rgba(255,255,255,0.12); }
.sc-fx-nav span.on { background: linear-gradient(90deg, rgba(157,138,216,0.9), rgba(157,138,216,0.3)); }
.sc-fx-main { padding: 3.4% 4%; display: flex; flex-direction: column; gap: 3.6%; min-width: 0; }
.sc-fx-title { font-family: var(--sc-display); font-weight: 700; font-size: clamp(13px,1.9vw,26px); }
.sc-fx-tags { display: flex; gap: 5px; flex-wrap: wrap; }
.sc-fx-tags i { height: clamp(8px,1vw,14px); width: clamp(30px,5vw,64px); border-radius: 999px; background: rgba(255,255,255,0.09); }
.sc-fx-tags i:first-child { background: rgba(157,138,216,0.4); }
.sc-fx-row { display: grid; grid-template-columns: 42% 1fr; gap: 4%; flex: 1; min-height: 0; }
.sc-fx-video { position: relative; border-radius: 9px; overflow: hidden; background: radial-gradient(120% 90% at 30% 15%, rgba(150,110,230,0.30), transparent 55%), linear-gradient(160deg, #2a2436, #15121d); }
.sc-fx-video .play { position: absolute; top: 44%; left: 50%; transform: translate(-50%,-50%); width: clamp(26px,3.4vw,46px); aspect-ratio: 1; border-radius: 50%; background: rgba(255,255,255,0.92); }
.sc-fx-video .play::after { content:""; position:absolute; top:50%; left:55%; transform:translate(-50%,-50%); border-style: solid; border-width: 7px 0 7px 12px; border-color: transparent transparent transparent #16121f; }
.sc-fx-cap { position: absolute; left: 8%; bottom: 9%; background: #fff; color: #111; border-radius: 5px; padding: 2px 6px; font-family: var(--sc-display); font-weight: 700; font-size: clamp(6px,0.8vw,11px); }
.sc-fx-cap span { color: #999; font-weight: 500; }
.sc-fx-panel { display: flex; flex-direction: column; gap: 6%; min-width: 0; }
.sc-fx-panel .lead { font-family: var(--sc-display); font-weight: 600; font-size: clamp(9px,1.15vw,15px); }
.sc-fx-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 7% 8%; }
.sc-fx-stat label { display: block; font-size: clamp(5px,0.62vw,8px); letter-spacing: 0.08em; color: rgba(233,229,246,0.5); margin-bottom: 3px; }
.sc-fx-stat b { font-family: var(--sc-display); font-weight: 600; font-size: clamp(11px,1.5vw,20px); }
.sc-fx-stat .bar { height: 2.5px; margin-top: 4px; border-radius: 3px; background: rgba(255,255,255,0.12); overflow: hidden; }
.sc-fx-stat .bar::after { content:""; display:block; height:100%; width: var(--v,60%); background: linear-gradient(90deg, #c8f082, #86d0a0); }
/* ============================================================
CARDS - tiled into the panel, then split apart, then flip
============================================================ */
.sc-cards-stage { position: absolute; left: 50%; width: var(--sc-card-w); height: var(--sc-card-h);
transform: translate(-50%, -50%); perspective: 1600px; transform-style: preserve-3d; z-index: 4; opacity: 0; will-change: opacity; }
.sc-card { position: absolute; top: 0; left: 0; width: var(--sc-card-w); height: var(--sc-card-h); transform-style: preserve-3d; will-change: transform; }
.sc-card-inner { position: absolute; inset: 0; transform-style: preserve-3d; will-change: transform; }
.sc-face { position: absolute; inset: 0; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden;
box-shadow: 0 2px 6px rgba(0,0,0,0.32), 0 26px 54px rgba(0,0,0,0.5), inset 0 0 0 1px rgba(255,255,255,0.08); }
.sc-face.sc-back { transform: rotateY(180deg); border-radius: var(--sc-card-radius); }
.sc-face::after { content: ""; position: absolute; inset: 0; pointer-events: none;
background: linear-gradient(125deg, rgba(255,255,255,0.14) 0%, transparent 34%); mix-blend-mode: screen; opacity: 0.45; }
/* FRONT = one third of the joined panel image (seamless when tiled).
background-size uses 300% width + auto height so a real (non-square)
gif keeps its own aspect ratio - it's centred and cropped top/bottom
rather than stretched to fit the panel's aspect. */
.sc-front { background-image: var(--sc-joined); background-size: 300% auto; background-repeat: no-repeat; background-color: #141019; }
.sc-card[data-index="0"] .sc-front { background-position: 0% 50%; border-radius: var(--sc-card-radius) 4px 4px var(--sc-card-radius); }
.sc-card[data-index="1"] .sc-front { background-position: 50% 50%; border-radius: 4px; }
.sc-card[data-index="2"] .sc-front { background-position: 100% 50%; border-radius: 4px var(--sc-card-radius) var(--sc-card-radius) 4px; }
/* BACK = marketing content */
.sc-back { display: flex; flex-direction: column; padding: 32px 24px 32px; border-radius: var(--sc-card-radius); }
.sc-back::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(80% 60% at 12% 6%, rgba(255,255,255,0.35), transparent 55%); opacity: 0.5; }
.sc-back .sc-icon { width: 48px; height: 48px; position: relative; }
.sc-btxt { margin-top: auto; position: relative; }
.sc-back h3 { margin: 0 0 16px; font-family: var(--sc-display); font-weight: 700; font-size: clamp(19px, 1.9vw, 26px); line-height: 1.1; letter-spacing: -0.025em; text-wrap: balance; }
.sc-back p { margin: 0; font-family: var(--sc-body); font-weight: 400; font-size: clamp(12px, 1vw, 14.5px); line-height: 1.46; }
.sc-back-1 { background: var(--sc-c1); color: var(--sc-c1-ink); } .sc-back-1 .sc-icon { stroke: var(--sc-c1-ink); fill: none; }
.sc-back-2 { background: var(--sc-c2); color: var(--sc-c3-ink); } .sc-back-2 .sc-icon { fill: var(--sc-c3-ink); }
.sc-back-3 { background: var(--sc-c3); color: var(--sc-c3-ink); } .sc-back-3 .sc-icon { fill: var(--sc-c3-ink); }
/* final fanned cards get a soft glow on hover */
.sc-card:hover .sc-face { box-shadow: 0 30px 66px rgba(47, 40, 96, 0.3), 0 0 40px var(--accent-glow), inset 0 0 0 1px rgba(255,255,255,0.14); }
@media (max-width: 620px) {
.sc-head-wrap { height: 14vh; margin-top: 2vh; }
.sc-fx-side { display: none; }
.sc-faux { grid-template-columns: 1fr; }
/* phone: the 3-card panel scales to the viewport (3 x 29vw + gaps ~= 100vw) */
.scroll-cards { --sc-card-w: min(29vw, 210px); --sc-card-h: min(42vw, 280px); --sc-card-radius: 12px; }
.sc-back { padding: 16px 8px 16px; }
.sc-back h3 { font-size: clamp(11px, 3.1vw, 14px); margin: 0 0 4px; }
.sc-back p { display: none; }
.sc-back .sc-icon { width: 18px; height: 18px; }
}
@media (prefers-reduced-motion: reduce) { .sc-face::after { opacity: 0.25; } }
/* ============================================================
Testimonials - 3D deck that fans out into a perspective ticker
============================================================ */
.testi-section { position: relative; }
.testi-track { position: relative; width: 100%; height: 128vh; }
.testi-viewport {
position: sticky;
top: 0;
height: 100vh;
height: 100svh;
overflow: hidden;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: clamp(24px, 4vh, 52px);
background:
radial-gradient(60% 50% at 50% 0%, var(--mesh-glow-1) 0%, transparent 60%),
var(--bg-page);
transition: background-color 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.testi-head {
position: relative;
text-align: center;
z-index: 6;
padding: 0 24px;
}
.testi-head .section-eyebrow { margin-bottom: 8px; }
.testi-head .section-title { max-width: 20ch; margin: 0 auto; }
.testi-stage {
position: relative;
width: var(--tc-w);
height: var(--tc-h);
perspective: 1500px;
transform-style: preserve-3d;
--tc-w: clamp(240px, 25vw, 340px);
--tc-h: clamp(230px, 23vw, 300px);
}
.testi-card {
position: absolute;
left: 50%;
top: 50%;
width: var(--tc-w);
height: var(--tc-h);
margin-left: calc(var(--tc-w) / -2);
margin-top: calc(var(--tc-h) / -2);
border-radius: 20px;
background: var(--bg-elevated);
border: 1px solid var(--border-strong);
box-shadow: 0 4px 12px rgba(20, 16, 45, 0.18), 0 30px 60px rgba(20, 16, 45, 0.32);
padding: 24px 24px 24px;
display: flex;
flex-direction: column;
gap: 16px;
backface-visibility: hidden;
will-change: transform, opacity;
}
.testi-top { display: flex; align-items: flex-start; justify-content: space-between; }
.testi-av {
width: 48px;
height: 48px;
border-radius: 50%;
background: linear-gradient(150deg, var(--g1), var(--g2));
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 0.85rem;
letter-spacing: 0.02em;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.testi-qm {
font-family: var(--font-display);
font-size: 3rem;
line-height: 0.6;
color: var(--accent);
opacity: 0.5;
}
.testi-stars { display: flex; gap: 3px; color: #f6b73c; margin-top: -2px; }
.testi-stars svg { width: 15px; height: 15px; filter: drop-shadow(0 1px 2px rgba(246, 183, 60, 0.35)); }
.testi-card blockquote {
margin: 0;
flex: 1;
font-size: clamp(0.95rem, 1.15vw, 1.08rem);
line-height: 1.5;
font-weight: 500;
color: var(--text-primary);
letter-spacing: -0.01em;
}
.testi-card figcaption {
font-size: 0.82rem;
color: var(--text-muted);
}
.testi-card figcaption strong { color: var(--text-secondary); font-weight: 600; }
.testi-controls {
position: relative;
display: flex;
gap: 16px;
z-index: 6;
top: 64px
}
.testi-arrow {
width: 44px;
height: 44px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid var(--border-strong);
background: var(--card-bg);
color: var(--accent);
cursor: pointer;
transition: background 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}
.testi-arrow svg { width: 18px; height: 18px; }
.testi-arrow:hover { transform: translateY(-1px); border-color: var(--accent); background: var(--accent); color: #fff; }
.testi-hint {
position: absolute;
bottom: 24px;
left: 50%;
transform: translateX(-50%);
z-index: 5;
font-size: 10.5px;
letter-spacing: 0.24em;
text-transform: uppercase;
font-weight: 600;
color: var(--text-muted);
transition: opacity 0.4s ease;
}
/* ============================================================
Case studies (ref image 2)
============================================================ */
.cases-section {
position: relative;
padding: 96px 24px;
background:
radial-gradient(62% 48% at 12% 2%, var(--mesh-glow-1), transparent 62%),
linear-gradient(180deg, var(--bg-page) 0%, var(--bg-elevated) 100%);
}
.cases-shell { max-width: 78rem; margin: 0 auto; }
.cases-head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 24px; margin-bottom: 44px; }
/* Spotlight ticker: cards flow continuously; the one crossing the middle
grows + brightens while the others recede (JS-driven, pauses on hover). */
.cases-ticker {
position: relative; overflow: hidden; padding: 56px 0 40px;
-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
}
.cases-track { display: flex; gap: 24px; width: max-content; will-change: transform; }
.case-card {
flex: 0 0 clamp(280px, 26vw, 336px);
background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 20px;
padding: 24px; display: flex; flex-direction: column; gap: 24px;
box-shadow: 0 12px 32px rgba(47, 53, 96, 0.09);
/* no will-change: 15 clones would pin 15 GPU layers permanently;
the conveyor's per-frame transform promotes them on demand */
}
/* JS owns .case-card transform every frame - don't transition it (would lag) */
.cases-ticker .case-card { transition: opacity 0.25s ease, box-shadow 0.3s ease, border-color 0.3s ease; }
.cases-ticker .case-card:hover { transform: none; }
@media (prefers-reduced-motion: reduce) {
.cases-ticker { overflow-x: auto; scrollbar-width: none; }
.cases-ticker::-webkit-scrollbar { display: none; }
}
.case-badge {
align-self: flex-start; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
color: #fff; background: var(--accent); padding: 6px 16px; border-radius: 9999px;
}
.case-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 16px; background: var(--bg-inset); border-radius: 14px; }
.case-stat { display: flex; flex-direction: column; gap: 5px; }
.case-stat .case-num { font-family: var(--font-display); font-size: clamp(1.7rem, 2.4vw, 2rem); font-weight: 700; letter-spacing: -0.02em; color: var(--text-primary); line-height: 1; }
.case-lbl { font-size: 0.8rem; color: var(--text-muted); }
.case-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.case-logo-img { height: 24px; width: auto; max-width: 128px; object-fit: contain; opacity: 0.9; }
[data-theme="dark"] .case-logo-img { filter: brightness(1.9) saturate(0.8); opacity: 0.85; }
.case-more { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.case-more span { transition: transform 0.2s ease; }
.case-more:hover span { transform: translateX(3px); }
/* ============================================================
By the numbers - stats + graph
============================================================ */
.stats-section {
position: relative;
overflow: hidden;
padding: 96px 24px;
background:
radial-gradient(58% 44% at 88% 6%, var(--mesh-glow-1), transparent 62%),
linear-gradient(180deg, var(--bg-elevated) 0%, var(--bg-page) 100%);
}
.stats-shell { max-width: 72rem; margin: 0 auto; }
.stats-top { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin: 0 auto 48px; }
@media (min-width: 768px) { .stats-top { grid-template-columns: repeat(4, 1fr); } }
.stat-tile { text-align: center; padding: 32px 16px; background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 18px; box-shadow: 0 10px 28px rgba(47, 53, 96, 0.06); }
.stat-big {
display: block;
font-family: var(--font-display);
font-size: clamp(2.1rem, 4vw, 3.1rem);
font-weight: 800;
line-height: 1;
letter-spacing: -0.03em;
font-variant-numeric: tabular-nums; /* count-up digits don't jitter width */
background: linear-gradient(135deg, var(--periwinkle-light) 0%, var(--accent) 55%, var(--periwinkle-deep) 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.count-up { font-variant-numeric: tabular-nums; }
.stat-cap { display: block; margin-top: 10px; font-size: 0.85rem; color: var(--text-secondary); }
.stats-grid { display: grid; grid-template-columns: 1fr; gap: 24px; }
@media (min-width: 900px) { .stats-grid { grid-template-columns: 1.35fr 1fr; } }
.chart-card { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 20px; padding: 24px; box-shadow: 0 10px 30px rgba(47, 53, 96, 0.07); }
.chart-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 26px; }
.chart-title { display: block; font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; color: var(--text-primary); }
.chart-sub { display: block; font-size: 0.82rem; color: var(--text-muted); margin-top: 4px; }
.chart-kpi { flex-shrink: 0; font-size: 0.85rem; font-weight: 600; color: var(--accent); background: var(--accent-dim); padding: 8px 16px; border-radius: 9999px; white-space: nowrap; }
.bars { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; height: 224px; }
.bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; height: 100%; justify-content: flex-end; }
.bar { width: 100%; max-width: 48px; height: 0; border-radius: 10px 10px 4px 4px; background: linear-gradient(180deg, var(--periwinkle-light), var(--accent)); transition: height 1.1s cubic-bezier(0.16, 1, 0.3, 1); }
.bar-hi { background: linear-gradient(180deg, var(--accent), var(--periwinkle-deep)); box-shadow: var(--object-glow-strong); }
.bar-x { font-size: 0.72rem; color: var(--text-muted); }
.stat-list { display: flex; flex-direction: column; justify-content: center; background: linear-gradient(160deg, var(--bg-elevated), var(--bg-inset)); border: 1px solid var(--card-border); border-radius: 20px; padding: 8px 24px; }
.stat-row { display: flex; align-items: center; gap: 16px; padding: 16px 4px; border-bottom: 1px solid var(--border); }
.stat-row:last-child { border-bottom: none; }
.stat-ic { flex-shrink: 0; width: 44px; height: 44px; border-radius: 12px; background: var(--card-bg); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; color: var(--accent); box-shadow: 0 4px 12px rgba(47, 53, 96, 0.06); }
.stat-ic svg { width: 20px; height: 20px; }
.stat-row-num { display: block; font-weight: 800; font-size: 1.6rem; letter-spacing: -0.02em; color: var(--accent); line-height: 1; }
.stat-row-label { display: block; font-family: var(--font-display); font-weight: 600; font-size: 1.12rem; letter-spacing: -0.01em; color: var(--text-primary); line-height: 1.1; }
.stat-row-cap { display: block; font-size: 0.85rem; color: var(--text-secondary); margin-top: 5px; }
/* ============================================================
Capability engine - hub & spoke (ref image 5)
============================================================ */
.engine-section {
position: relative;
padding: 96px 24px; /* matches stats/roadmap/before-after rhythm */
overflow: hidden;
background:
radial-gradient(70% 55% at 18% 8%, var(--mesh-glow-1), transparent 60%),
radial-gradient(65% 55% at 92% 26%, var(--mesh-glow-2), transparent 60%),
linear-gradient(180deg, var(--bg-page) 0%, var(--bg-elevated) 100%);
}
.engine-shell { max-width: 78rem; margin: 0 auto; }
.engine-top { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: center; margin-bottom: 44px; }
@media (min-width: 960px) { .engine-top { grid-template-columns: 0.85fr 1.15fr; } }
.engine-title { font-family: var(--font-display); font-size: clamp(1.9rem, 4vw, 2.8rem); font-weight: 600; line-height: 1.08; letter-spacing: -0.01em; color: var(--text-primary); margin: 8px 0 16px; }
.engine-title em { font-style: italic; background: linear-gradient(100deg, var(--accent), var(--periwinkle-deep)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.engine-lead { font-size: 1rem; line-height: 1.6; color: var(--text-secondary); max-width: 36ch; }
.engine-diagram { position: relative; min-height: 320px; display: grid; grid-template-columns: 1fr auto 1fr; grid-template-rows: auto auto; gap: 16px 24px; align-items: center; }
.engine-hub {
grid-column: 2; grid-row: 1 / span 2; align-self: center;
width: clamp(150px, 17vw, 188px); aspect-ratio: 1; border-radius: 50%;
background: radial-gradient(circle at 50% 34%, var(--periwinkle-light), var(--accent) 55%, var(--periwinkle-deep));
color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
box-shadow: var(--object-glow-strong), inset 0 2px 0 rgba(255, 255, 255, 0.3);
}
.engine-hub-mark { font-size: 1.6rem; }
.engine-hub-name { font-family: var(--font-display); font-weight: 700; letter-spacing: 0.08em; font-size: 1rem; margin-top: 6px; }
.engine-hub-sub { font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.88; margin-top: 4px; }
.engine-node { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 16px; padding: 16px 16px; box-shadow: 0 8px 24px rgba(47, 53, 96, 0.07); }
.engine-node.n1 { grid-column: 1; grid-row: 1; }
.engine-node.n2 { grid-column: 1; grid-row: 2; }
.engine-node.n3 { grid-column: 3; grid-row: 1; }
.engine-node.n4 { grid-column: 3; grid-row: 2; }
.engine-node-t { display: block; font-family: var(--font-display); font-weight: 600; font-size: 0.98rem; color: var(--text-primary); margin-bottom: 6px; }
.engine-node-d { display: block; font-size: 0.82rem; line-height: 1.45; color: var(--text-muted); }
.engine-layer { border: 1px solid var(--card-border); border-radius: 20px; background: var(--card-bg); padding: 24px 24px; margin-bottom: 26px; }
.engine-layer-title { display: block; text-align: center; font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); margin-bottom: 22px; }
.engine-layer-grid { display: grid; grid-template-columns: 1fr; gap: 24px; }
@media (min-width: 768px) { .engine-layer-grid { grid-template-columns: repeat(4, 1fr); } }
.engine-ctl-ic { width: 44px; height: 44px; border-radius: 12px; background: var(--accent-dim); color: var(--accent); display: flex; align-items: center; justify-content: center; margin-bottom: 12px; }
.engine-ctl-ic svg { width: 22px; height: 22px; }
.engine-ctl h4 { font-family: var(--font-display); font-weight: 600; font-size: 0.98rem; color: var(--text-primary); margin: 0 0 6px; }
.engine-ctl p { font-size: 0.82rem; line-height: 1.45; color: var(--text-muted); margin: 0; }
.engine-foot { text-align: center; font-size: 0.98rem; color: var(--text-secondary); margin: 0; }
.engine-foot strong { color: var(--accent); font-weight: 700; }
@media (max-width: 720px) {
.engine-diagram { grid-template-columns: 1fr; grid-template-rows: none; }
.engine-hub { grid-column: 1; grid-row: auto; margin: 4px auto; }
.engine-node.n1, .engine-node.n2, .engine-node.n3, .engine-node.n4 { grid-column: 1; grid-row: auto; }
}
/* ============================================================
Card hover + glow effects (site-wide)
============================================================ */
.case-card, .stat-tile, .chart-card, .engine-node {
box-shadow: var(--card-shadow);
}
.case-card, .stat-tile, .chart-card, .engine-node, .engine-ctl {
transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.32s ease, border-color 0.32s ease;
}
.case-card:hover, .stat-tile:hover, .chart-card:hover, .engine-node:hover {
transform: translateY(-5px);
border-color: var(--card-hover-border);
box-shadow: var(--card-shadow-hover), 0 0 42px var(--accent-glow);
}
.engine-ctl { border-radius: 14px; padding: 4px; }
.engine-ctl:hover { transform: translateY(-3px); }
.feature-card:hover {
box-shadow: 0 18px 44px rgba(47, 40, 96, 0.14), 0 0 40px var(--accent-glow);
}
/* testi cards keep their JS-driven transform - only glow the border/shadow */
.testi-card { transition: box-shadow 0.3s ease, border-color 0.3s ease; }
.testi-card:hover {
border-color: var(--card-hover-border);
box-shadow: 0 0 0 1px var(--accent), 0 26px 56px var(--accent-glow);
}
/* pricing card hover/transition handled in the pricing block above */
/* capability card faces get a soft glow on hover */
.sc-card:hover .sc-face { box-shadow: 0 30px 66px rgba(47, 40, 96, 0.3), 0 0 40px var(--accent-glow), inset 0 0 0 1px rgba(255,255,255,0.14); }
/* ============================================================
Hero background - vertical marquee columns (ref image 4)
============================================================ */
/* ============================================================
Roadmap - the creative loop (animated winding road)
============================================================ */
.roadmap-section {
position: relative;
padding: 96px 24px 104px;
overflow: hidden;
background:
radial-gradient(58% 52% at 84% 6%, var(--roadmap-glow-1), transparent 60%),
radial-gradient(52% 48% at 10% 96%, var(--roadmap-glow-2), transparent 58%),
linear-gradient(180deg, var(--bg-page) 0%, var(--bg-elevated) 100%);
}
.roadmap-shell { max-width: 80rem; margin: 0 auto; }
.roadmap-head { text-align: center; margin-bottom: clamp(32px, 5vw, 56px); }
.roadmap-head .section-title { margin: 0 auto; }
.roadmap-head .section-lead { margin: 16px auto 0; }
.roadmap-wrap { position: relative; width: 100%; aspect-ratio: 1200 / 420; }
.roadmap-wrap::before {
content: '';
position: absolute;
inset: -12% -4%;
z-index: 0;
pointer-events: none;
background:
radial-gradient(58% 52% at 50% 48%, var(--roadmap-halo), transparent 70%),
radial-gradient(72% 66% at 50% 50%, var(--roadmap-vignette), transparent 76%);
filter: blur(4px);
}
.roadmap-svg { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; overflow: visible; }
.road-base {
fill: none;
stroke: url(#roadGrad);
stroke-width: 44;
stroke-linecap: round;
stroke-linejoin: round;
filter: var(--roadmap-road-glow);
transition: stroke-dashoffset 1.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.road-dash {
fill: none;
stroke: rgba(255, 255, 255, 0.8);
stroke-width: 3.5;
stroke-linecap: round;
stroke-dasharray: 2 24;
opacity: 0;
transition: opacity 0.6s ease 1s;
}
.roadmap-wrap.in-view .road-dash { opacity: 0.85; animation: road-march 2.6s linear infinite; }
@keyframes road-march { to { stroke-dashoffset: -52; } }
.road-node {
position: absolute;
transform: translate(-50%, -50%);
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
opacity: 0;
scale: 0.55;
transition: opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1), scale 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
z-index: 2;
}
.roadmap-wrap.in-view .road-node { opacity: 1; scale: 1; }
.road-node[data-i="0"] { transition-delay: 0.25s; }
.road-node[data-i="1"] { transition-delay: 0.45s; }
.road-node[data-i="2"] { transition-delay: 0.65s; }
.road-node[data-i="3"] { transition-delay: 0.85s; }
.road-node[data-i="4"] { transition-delay: 1.05s; }
.road-node[data-i="5"] { transition-delay: 1.25s; }
.road-badge {
width: clamp(54px, 6.6vw, 86px);
aspect-ratio: 1;
border-radius: 50%;
background: var(--roadmap-badge-fill);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
box-shadow: var(--roadmap-badge-glow);
}
.road-badge svg { width: 46%; height: 46%; }
.road-text {
font-family: var(--font-display);
font-weight: 600;
font-size: clamp(0.85rem, 1.25vw, 1.1rem);
color: var(--text-primary);
text-align: center;
white-space: nowrap;
line-height: 1.1;
}
.road-text b {
display: block;
font-size: 1.5em;
font-weight: 700;
color: var(--accent);
line-height: 1;
margin-bottom: 3px;
}
@media (max-width: 640px) {
.roadmap-wrap { aspect-ratio: 1200 / 620; }
.road-text { font-size: 0.72rem; }
}
/* ============================================================
Gradient-mesh backgrounds for otherwise-flat sections
============================================================ */
.logos-section {
position: relative;
background:
radial-gradient(50% 120% at 15% 50%, var(--mesh-glow-1), transparent 60%),
radial-gradient(50% 120% at 85% 50%, var(--mesh-glow-2), transparent 60%),
var(--bg-muted);
}
.workflow-section {
position: relative;
background:
radial-gradient(48% 60% at 8% 4%, var(--mesh-glow-1), transparent 58%),
radial-gradient(52% 64% at 92% 98%, var(--mesh-glow-2), transparent 58%),
var(--bg-page) !important;
}
.testimonials-section, .site-section--elevated, .site-section {
position: relative;
}
/* ============================================================
Before / After comparison slider (between Proof and Loop)
============================================================ */
.ba-section {
position: relative;
padding: 96px 24px 104px;
background:
radial-gradient(60% 46% at 88% 4%, var(--mesh-glow-1), transparent 60%),
radial-gradient(54% 46% at 8% 98%, var(--mesh-glow-2), transparent 58%),
linear-gradient(180deg, var(--bg-elevated) 0%, var(--bg-page) 100%);
}
.ba-shell { max-width: 72rem; margin: 0 auto; }
.ba-head { text-align: center; max-width: 44rem; margin: 0 auto 48px; }
.ba-head .section-title { margin: 0 auto; }
.ba-head .section-lead { margin: 16px auto 0; }
.ba-slider {
--pos: 66;
--ba-ring: conic-gradient(from 0deg,
var(--periwinkle-deep), var(--periwinkle-light), var(--accent), var(--periwinkle-light), var(--periwinkle-deep));
position: relative;
max-width: 62rem; margin: 0 auto;
}
/* soft outer bloom (breathing, behind everything - rotating a non-square
rect would sweep its corners outside the viewport) */
.ba-glow {
position: absolute; inset: -7px; z-index: 0; border-radius: 34px; pointer-events: none;
background: var(--ba-ring); filter: blur(22px); opacity: 0.5;
animation: baGlow 5.5s ease-in-out infinite alternate;
}
@keyframes baGlow { from { opacity: 0.38; transform: scale(0.995); } to { opacity: 0.6; transform: scale(1.012); } }
/* crisp 1.6px gradient ring: a big rotating conic clipped by the rounded box,
with the frame laid on top so only the edge shows */
.ba-ring {
position: relative; z-index: 1; border-radius: 28px; padding: 1.6px; overflow: hidden;
}
.ba-ring::before {
content: ''; position: absolute; z-index: 0; top: 50%; left: 50%;
width: 230%; aspect-ratio: 1; transform: translate(-50%, -50%);
background: var(--ba-ring);
animation: baRing 7s linear infinite;
}
@keyframes baRing { to { transform: translate(-50%, -50%) rotate(360deg); } }
.ba-frame {
position: relative; z-index: 1; overflow: hidden; border-radius: 26.4px;
aspect-ratio: 16 / 10; cursor: ew-resize; touch-action: none;
background: #0b0a16;
box-shadow: 0 30px 70px rgba(10, 8, 30, 0.4);
}
.ba-img { position: absolute; inset: 0; user-select: none; -webkit-user-select: none; }
/* faint grid so an empty frame still reads as an image placeholder */
.ba-img::before {
content: ''; position: absolute; inset: 0; pointer-events: none;
background-image:
linear-gradient(var(--grid) 1px, transparent 1px),
linear-gradient(90deg, var(--grid) 1px, transparent 1px);
background-size: 46px 46px;
-webkit-mask: radial-gradient(82% 82% at 50% 50%, #000, transparent 92%);
mask: radial-gradient(82% 82% at 50% 50%, #000, transparent 92%);
}
/* AFTER = vibrant, on-brand (base layer) */
.ba-after {
--grid: rgba(255, 255, 255, 0.09);
background:
radial-gradient(80% 90% at 20% 8%, rgba(155, 147, 246, 0.5), transparent 55%),
radial-gradient(70% 80% at 92% 94%, rgba(95, 127, 214, 0.45), transparent 55%),
linear-gradient(140deg, var(--periwinkle-light) 0%, var(--accent) 45%, var(--periwinkle-deep) 100%);
}
/* BEFORE = dull / generic (clipped from the left edge) */
.ba-before {
--grid: rgba(255, 255, 255, 0.05);
background:
radial-gradient(80% 90% at 20% 8%, rgba(120, 120, 140, 0.28), transparent 55%),
linear-gradient(140deg, #3a3a44 0%, #23232b 55%, #17171e 100%);
clip-path: inset(0 calc((100 - var(--pos)) * 1%) 0 0);
}
/* placeholder "empty image" content - offset into each half so the two
labels never collide at the divider */
.ba-ph { position: absolute; top: 50%; transform: translate(-50%, -50%);
display: flex; flex-direction: column; align-items: center; gap: 16px; }
.ba-before .ba-ph { left: 27%; }
.ba-after .ba-ph { left: 73%; }
.ba-ph svg { width: clamp(40px, 5vw, 58px); height: auto; }
.ba-ph span { font-family: var(--font-display); font-weight: 600; font-size: clamp(0.82rem, 1.4vw, 1rem); letter-spacing: 0.03em; }
.ba-after .ba-ph { color: rgba(255, 255, 255, 0.94); }
.ba-after .ba-ph svg { filter: drop-shadow(0 6px 18px rgba(10, 8, 30, 0.4)); }
.ba-before .ba-ph { color: rgba(220, 220, 232, 0.58); }
.ba-badge {
position: absolute; top: 16px; font-size: 11px; font-weight: 700; letter-spacing: 0.1em;
text-transform: uppercase; padding: 6px 16px; border-radius: 9999px; color: #fff; z-index: 2;
-webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.ba-badge-before { left: 16px; background: rgba(20, 20, 28, 0.55); border: 1px solid rgba(255, 255, 255, 0.14); }
.ba-badge-after { right: 16px; background: rgba(10, 8, 30, 0.4); border: 1px solid rgba(255, 255, 255, 0.28); }
/* divider + handle */
.ba-divider {
position: absolute; top: 0; bottom: 0; left: calc(var(--pos) * 1%);
width: 2px; transform: translateX(-50%); z-index: 4; pointer-events: none;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.2), #fff 18%, #fff 82%, rgba(255, 255, 255, 0.2));
box-shadow: 0 0 20px var(--accent-glow), 0 0 6px rgba(255, 255, 255, 0.6);
}
.ba-handle {
position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
width: 56px; height: 56px; border-radius: 50%; pointer-events: auto; cursor: ew-resize;
background: linear-gradient(155deg, var(--periwinkle-light), var(--periwinkle-deep));
border: 2px solid rgba(255, 255, 255, 0.85);
box-shadow: 0 8px 24px var(--accent-glow), 0 0 0 6px rgba(112, 108, 240, 0.16);
display: flex; align-items: center; justify-content: center; color: #fff;
transition: transform 0.15s ease, box-shadow 0.2s ease;
}
.ba-handle:hover, .ba-handle:focus-visible { box-shadow: 0 10px 30px var(--accent-glow), 0 0 0 9px rgba(112, 108, 240, 0.22); outline: none; }
.ba-handle:active { transform: translate(-50%, -50%) scale(0.94); }
.ba-handle svg { width: 24px; height: 24px; }
/* one-time reveal sweep when it scrolls into view (disabled during drag) */
.ba-slider.ba-in .ba-before { transition: clip-path 1.15s cubic-bezier(0.16, 1, 0.3, 1); }
.ba-slider.ba-in .ba-divider { transition: left 1.15s cubic-bezier(0.16, 1, 0.3, 1); }
@media (prefers-reduced-motion: reduce) {
.ba-glow, .ba-ring::before { animation: none; }
}
@media (max-width: 560px) { .ba-frame { aspect-ratio: 4 / 5; } }
/* ============================================================
Polish VFX: cursor spotlight, button sheen, ambient orbs
============================================================ */
/* Sheen sweep across the primary pill button */
.btn-primary { position: relative; overflow: hidden; }
.btn-primary::before {
content: '';
position: absolute; top: 0; bottom: 0; left: -80%; width: 55%;
background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.35), transparent);
transform: skewX(-20deg);
transition: left 0.55s ease;
pointer-events: none;
}
.btn-primary:hover::before { left: 125%; }
/* Pointer-following spotlight wash on cards (hover-capable devices only) */
@media (hover: hover) and (pointer: fine) {
.price-card::after, .case-card::after, .testi-card::after {
content: '';
position: absolute; inset: -1px; border-radius: inherit;
background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%), var(--accent-glow), transparent 62%);
opacity: 0;
transition: opacity 0.35s ease;
pointer-events: none;
z-index: 1;
}
.price-card:hover::after, .case-card:hover::after, .testi-card:hover::after { opacity: 0.4; }
}
/* Slow-drifting ambient orbs - a soft halftone dot-mesh cloud instead of a
plain blurred sphere, echoing the hero's dot motif. Pure CSS (a dot
raster masked into a circle), same transform-only float as before, so
there's no added animation cost - just a different, on-theme look. */
.fx-orb {
position: absolute;
border-radius: 50%;
pointer-events: none;
z-index: 0;
background-image: radial-gradient(circle, var(--fx-dot-c) 1.15px, transparent 1.7px);
background-size: 8px 8px;
-webkit-mask-image: radial-gradient(circle at 50% 50%, #000 0%, #000 38%, transparent 72%);
mask-image: radial-gradient(circle at 50% 50%, #000 0%, #000 38%, transparent 72%);
animation: orbFloat 13s ease-in-out infinite alternate;
}
[data-theme="dark"] .fx-orb { --fx-dot-c: rgba(157, 150, 246, 0.9); opacity: 0.32; }
[data-theme="light"] .fx-orb { --fx-dot-c: rgba(74, 99, 196, 0.75); opacity: 0.38; }
@keyframes orbFloat {
from { transform: translate3d(0, 0, 0) scale(1); }
to { transform: translate3d(0, -34px, 0) scale(1.06); }
}
@media (prefers-reduced-motion: reduce) {
.fx-orb { animation: none; }
.btn-primary::before { display: none; }
}
/* ============================================================
PERFORMANCE LAYER (optimized build)
============================================================ */
/* 1. Animation visibility gate: sections tagged data-animgate get .in-vp
from one shared IntersectionObserver; while off-screen every CSS
animation inside them is paused, so marquees / sparkles / orbs / glows
stop costing compositor time the moment they scroll away. */
[data-animgate]:not(.in-vp) *,
[data-animgate]:not(.in-vp) *::before,
[data-animgate]:not(.in-vp) *::after {
animation-play-state: paused !important;
}
/* 2. Below-fold render skipping: these sections are plain flow content
(no sticky scrubbing, no load-time measurements), so the browser can
skip layout+paint until they approach the viewport. */
#stats, #engine, #roadmap, .site-footer {
content-visibility: auto;
contain-intrinsic-size: auto 1000px;
}
/* 3. Tap-to-flip for touch devices (hover flip has no touch equivalent) */
.hero-card.flipped .hero-card-inner { transform: rotateY(180deg); }
/* 4. Master reduced-motion: every decorative animation collapses to a
calm static state; content is always visible. JS-driven systems
(canvas, videos, morph spin, count-ups, typewriter) check the same
media query on their side. */
@media (prefers-reduced-motion: reduce) {
.logos-track, .fx-orb, .ba-glow, .ba-ring::before, .hero-spark,
.hero-card-bob, .pricing-sparkles span, .pricing-decor,
.nav-glass-liquid, .road-dash,
.btn-primary::before, .hero-generate::before,
.hero-chips.chips-swap .hero-chip {
animation: none !important;
}
.reveal-item {
opacity: 1 !important;
transform: none !important;
transition: none !important;
}
.section-title .tw { overflow: visible; }
.section-title .tw-in { transform: none !important; transition: none !important; }
}
/* 5. Mobile / low-power adaptation: cut GPU-expensive blur + particle
work substantially, and tighten text stagger so copy reads fast. */
@media (max-width: 700px) {
.hero-spark:nth-child(n+6) { display: none; } /* 9 -> 5 sparkles */
.hero-ai-tag {
backdrop-filter: none; -webkit-backdrop-filter: none;
background: rgba(10, 8, 26, 0.72); /* solid, no blur */
}
.nav-glass {
backdrop-filter: blur(14px) saturate(150%);
-webkit-backdrop-filter: blur(14px) saturate(150%);
}
.nav-glass-liquid, .nav-glass-noise { display: none; } /* animated overlay off */
.mobile-menu-card {
backdrop-filter: blur(14px) saturate(150%);
-webkit-backdrop-filter: blur(14px) saturate(150%);
}
.fx-orb { background-size: 6px 6px; } /* slightly finer dots at small sizes */
.ba-glow { filter: blur(14px); } /* was 22px */
.section-title .tw-in {
transition-duration: 0.45s;
transition-delay: calc(var(--wi, 0) * 38ms); /* faster read on phones */
}
}
/* ============================================================
PHONE EXPERIENCE FIXES
============================================================ */
/* Halftone fallback: when canvas pixel-reads are blocked (opening the
file via file:// taints the canvas), the engine hides the canvas and
tags the mesh - the raw halftone art shows as a static backdrop. */
.hero-mesh.ht-static::before {
content: '';
position: absolute; inset: 0;
background-image: url('assets/darkmode_hero.jpg');
background-size: cover;
background-position: center;
opacity: 0.48;
mix-blend-mode: screen;
}
[data-theme="light"] .hero-mesh.ht-static::before {
background-image: url('assets/lightmode_hero.jpg');
mix-blend-mode: multiply;
opacity: 0.4;
}
@media (max-width: 700px) {
/* 1. Capabilities: the four corner captions return as a 2x2 band in the
empty space below the fanned cards (JS keeps them visible on phones) */
.sc-corner { display: block; width: 42vw; text-align: center; }
.sc-corner-tl, .sc-corner-bl { left: 6vw; right: auto; text-align: center; }
.sc-corner-tr, .sc-corner-br { right: 6vw; left: auto; text-align: center; }
.sc-corner-tl, .sc-corner-tr { top: 55%; bottom: auto; }
.sc-corner-bl, .sc-corner-br { top: 68%; bottom: auto; }
.sc-corner-ic { width: 32px; height: 32px; border-radius: 9px; margin-bottom: 6px; }
.sc-corner-ic svg { width: 16px; height: 16px; }
.sc-corner-k { font-size: 0.78rem; }
.sc-corner p { font-size: 0.66rem; line-height: 1.4; }
.sc-cta { bottom: 16px; gap: 8px; } /* clears the caption band above */
/* 2. Testimonials: no deck-to-ticker scrub on phones - the section is
exactly one screen and the ticker runs from the start (JS pins d2r=1) */
.testi-track { height: 100svh; }
/* 3. Before/after: vertical comparison (before on top, drag up/down) */
.ba-frame { cursor: ns-resize; }
.ba-before { clip-path: inset(0 0 calc((100 - var(--pos)) * 1%) 0); }
.ba-divider {
top: calc(var(--pos) * 1%); bottom: auto; left: 0; right: 0;
width: auto; height: 2px;
transform: translateY(-50%);
background: linear-gradient(90deg, rgba(255, 255, 255, 0.2), #fff 18%, #fff 82%, rgba(255, 255, 255, 0.2));
}
.ba-slider.ba-in .ba-divider { transition: top 1.15s cubic-bezier(0.16, 1, 0.3, 1); }
.ba-handle { cursor: ns-resize; }
.ba-handle svg { transform: rotate(90deg); }
.ba-before .ba-ph { left: 50%; top: 26%; }
.ba-after .ba-ph { left: 50%; top: auto; bottom: 14%; transform: translate(-50%, 0); }
.ba-badge-after { top: auto; bottom: 16px; right: 16px; }
/* 4. Roadmap: taller canvas, smaller badges, wrapping labels - no overlap */
.roadmap-wrap { aspect-ratio: 1200 / 700; }
.road-base { stroke-width: 32; }
.road-node { gap: 6px; }
.road-badge { width: 40px; }
.road-text { font-size: 0.62rem; white-space: normal; max-width: 72px; }
.road-text b { font-size: 1.25em; margin-bottom: 1px; }
/* labels of the upper nodes go ABOVE their badge, clear of the road */
.road-node[data-i="0"], .road-node[data-i="2"], .road-node[data-i="4"] {
flex-direction: column-reverse;
}
/* 4b. Invisible section seams: on phones the corner-hugging radial
glows and the blurred orbs sitting at section borders made the
boundary between these same-tone sections read as a hard line.
Keep the plain vertical gradients (identical colours meet at each
edge) and let the road's own central halo carry the glow. */
.ba-section {
background: linear-gradient(180deg, var(--bg-elevated) 0%, var(--bg-page) 100%);
}
.roadmap-section {
background: linear-gradient(180deg, var(--bg-page) 0%, var(--bg-elevated) 100%);
}
.stats-section {
background: linear-gradient(180deg, var(--bg-elevated) 0%, var(--bg-page) 100%);
}
.engine-section {
background: linear-gradient(180deg, var(--bg-page) 0%, var(--bg-elevated) 100%);
}
.roadmap-section > .fx-orb,
.stats-section > .fx-orb { display: none; }
}
/* 5. Navbar on phones: the hero gradient band stays with the header all
the way down the page so the logo / CTA never sit on raw content
(JS also keeps the on-hero text colours below 768px) */
@media (max-width: 767px) {
.site-header.nav-past-hero .nav-gradient-drop { opacity: 1; }
}
/* =====================================================================
INNER PAGES - shared component system
Used by every page below the homepage (about, features/product,
industries, pricing, stories/case-studies, showcase, trust-security).
Reuses the tokens/vars defined above for full visual consistency.
===================================================================== */
/* ---- basic type helpers missing from the homepage-only stylesheet ---- */
.lead {
font-size: 1.125rem;
line-height: 1.65;
color: var(--text-secondary);
max-width: 56ch;
}
.stagger .reveal-item { transition-delay: calc(var(--i, 0) * 0.08s); }
/* ---- page hero banner ---- */
.page-hero {
position: relative;
overflow: hidden;
padding: 168px 24px 88px;
text-align: center;
background: var(--hero-bg);
isolation: isolate;
}
.page-hero-shell {
position: relative;
z-index: 1;
max-width: 760px;
margin: 0 auto;
}
.page-hero h1 {
font-family: var(--font-display);
font-weight: 700;
font-size: clamp(2.3rem, 5.4vw, 3.6rem);
line-height: 1.08;
letter-spacing: -0.02em;
color: var(--text-primary);
margin: 0 0 24px;
text-wrap: balance;
}
.page-hero h1 em { font-style: normal; color: var(--accent); }
.page-hero .lead { max-width: 60ch; margin: 0 auto; }
.page-hero .cta-row { margin-top: 32px; justify-content: center; }
@media (max-width: 640px) {
.page-hero { padding: 136px 24px 64px; }
}
/* ---- section shell / layout ---- */
.pg-section { position: relative; padding: 88px 24px; overflow: hidden; }
.pg-section.alt { background: var(--bg-muted); }
.pg-shell { position: relative; z-index: 1; max-width: 1120px; margin: 0 auto; }
.pg-head { max-width: 640px; margin: 0 auto 56px; text-align: center; }
.pg-head .section-title { margin-bottom: 0; }
.pg-head .section-lead { margin-top: 14px; }
@media (max-width: 640px) { .pg-section { padding: 64px 24px; } }
.cta-row { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.pg-grid { display: grid; gap: 24px; }
/* Centered flex-wrap variant: a fixed column-count grid (auto-fit/fill)
either stretches a lone trailing card to fill the whole row, or
leaves it stranded on its own - for card counts that don't divide
evenly (5 cards, say) that reads as broken. Flex-wrap + centering
instead lets each row size to however many cards actually fit, and
centers a short last row (3 over 2) so it looks like a deliberate
layout rather than a leftover. */
.pg-grid.pg-grid--center-wrap { display: flex; flex-wrap: wrap; justify-content: center; }
/* basis 300px (not the old 230/210px minmax) is deliberate: at the
.pg-shell max-width (1120px) it's the widest basis that still forces
exactly 3 per row instead of 4 - see the arithmetic this replaced. */
.pg-grid--center-wrap > * { flex: 1 1 300px; max-width: 360px; }
.pg-card {
position: relative;
background: var(--card-bg);
border: 1px solid var(--card-border);
border-radius: 20px;
padding: 32px 24px;
transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
scroll-margin-top: 96px;
}
.pg-card:target { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim); animation: pg-card-flash 1.8s ease; }
@keyframes pg-card-flash { 0%, 40% { box-shadow: 0 0 0 3px var(--accent-dim); } 100% { box-shadow: none; } }
.pg-card h3 {
font-family: var(--font-display); font-weight: 700; font-size: 1.08rem;
color: var(--text-primary); margin: 0 0 8px;
}
.pg-card p { font-size: 0.94rem; line-height: 1.55; color: var(--text-secondary); margin: 0; }
.pg-ic {
display: inline-flex; align-items: center; justify-content: center;
width: 40px; height: 40px; border-radius: 12px; margin-bottom: 14px;
background: var(--accent-dim); color: var(--accent);
}
.pg-ic svg { width: 22px; height: 22px; }
/* generic hover lift, used across cards/media tiles instead of the
pointer-tracked 3D tilt (kept CSS-only so every card benefits, JS just
layers a cursor spotlight on top via --mx/--my where available) */
.tilt {
--mx: 50%; --my: 50%;
transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease, box-shadow 0.3s ease;
}
.tilt:hover { transform: translateY(-4px); border-color: var(--card-hover-border); box-shadow: var(--card-shadow-hover); }
.tilt::before {
content: ''; position: absolute; inset: 0; border-radius: inherit; opacity: 0;
background: radial-gradient(240px circle at var(--mx) var(--my), var(--accent-dim), transparent 70%);
transition: opacity 0.4s ease; pointer-events: none; z-index: 0;
}
.tilt:hover::before { opacity: 1; }
.pg-card.tilt { isolation: isolate; }
.pg-card.tilt > * { position: relative; z-index: 1; }
/* ---- CTA band ---- */
.band {
position: relative;
text-align: center;
padding: 56px 40px;
border-radius: 28px;
background: var(--hero-bg);
overflow: hidden;
}
.band h2 {
font-family: var(--font-display); font-weight: 700;
font-size: clamp(1.5rem, 3.2vw, 2.15rem); line-height: 1.2;
color: var(--nav-on-hero-text, #fff); max-width: 30ch; margin: 0 auto 24px;
}
[data-theme="light"] .band h2 { color: #2a2a52; }
.band .cta-row { justify-content: center; }
@media (max-width: 640px) { .band { padding: 40px 24px; } }
/* ---- FAQ accordion ---- */
.faq { display: grid; gap: 16px; max-width: 784px; margin: 0 auto; }
.faq details {
background: var(--card-bg);
border: 1px solid var(--card-border);
border-radius: 16px;
padding: 22px 24px;
transition: border-color 0.45s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.45s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.45s cubic-bezier(0.16, 1, 0.3, 1);
box-shadow: 0 0 0 0 transparent;
overflow: hidden;
}
.faq details.is-open {
border-color: var(--card-hover-border);
box-shadow: 0 4px 24px -4px rgba(125, 123, 240, 0.14);
}
.faq summary {
cursor: pointer;
list-style: none;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
font-family: var(--font-display);
font-weight: 600;
font-size: 1rem;
color: var(--text-primary);
user-select: none;
transition: color 0.35s ease;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
content: '+';
flex: none;
display: inline-grid;
place-items: center;
width: 28px;
height: 28px;
border-radius: 50%;
background: var(--bg-inset);
font-size: 1.15rem;
font-weight: 400;
color: var(--accent);
transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), background 0.4s ease, color 0.4s ease;
}
.faq details.is-open summary::after {
transform: rotate(45deg);
background: var(--accent-dim);
color: var(--accent);
}
.faq p {
margin: 0;
font-size: 0.94rem;
line-height: 1.6;
color: var(--text-secondary);
height: 0;
opacity: 0;
overflow: hidden;
transform: translateY(-4px);
transition: height 0.38s cubic-bezier(0.16, 1, 0.3, 1),
opacity 0.35s ease,
transform 0.38s cubic-bezier(0.16, 1, 0.3, 1),
margin 0.38s cubic-bezier(0.16, 1, 0.3, 1);
}
.faq details.is-open p,
.faq details[open] p {
margin: 16px 0 0;
opacity: 1;
transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
.faq details, .faq summary::after, .faq p { transition: none; }
}
/* ---- chips ---- */
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.chip {
display: inline-flex; align-items: center; padding: 7px 16px;
border-radius: 9999px; font-size: 0.84rem; font-weight: 500;
color: var(--text-muted); background: var(--bg-inset); border: 1px solid var(--border);
white-space: nowrap;
}
.chip.solid { color: var(--accent); background: var(--accent-dim); border-color: transparent; font-weight: 600; }
/* ---- marquee ---- */
.marquee { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee-track { display: flex; gap: 16px; width: max-content; animation: marquee-scroll 32s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } }
/* ---- brand logos in tickers ----
Real brand marks vary wildly in colour and weight, so they are muted to a
neutral wash by default and only bloom to full colour on hover. Several
marks are near-black, so dark mode flattens every logo to white rather
than tinting: consistent, and nothing disappears into the background. */
.marquee-track.logos { gap: 52px; align-items: center; }
.brand-logo {
flex: 0 0 auto;
height: 22px; width: auto; max-width: 90px;
object-fit: contain;
opacity: 0.5;
filter: grayscale(100%);
transition: opacity 0.25s ease, filter 0.25s ease;
}
.brand-logo[src*="mp_tourist"] {
height: 58px;
max-height: 58px;
max-width: 160px;
}
.brand-logo:hover { opacity: 1; filter: grayscale(0%); }
[data-theme="dark"] .brand-logo { opacity: 0.62; filter: brightness(0) invert(1); }
[data-theme="dark"] .brand-logo:hover { opacity: 1; filter: brightness(0) invert(1); }
/* Nori and Master ship as fully opaque artwork (a mark baked onto a solid
black / green plate) rather than a transparent PNG. The white-out filter
would flatten them to a blank rectangle, so they pass through unfiltered
and just get their corners rounded - they already carry the contrast
they need on any surface. */
.brand-logo.is-solid { border-radius: 6px; }
[data-theme="dark"] .brand-logo.is-solid,
[data-theme="dark"] .brand-logo.is-solid:hover { filter: grayscale(100%); }
/* ---- brand card: ad video behind a dark scrim, logo in front ----
The scrim is dark in both themes, so the logo is always whited out here
(unlike .brand-logo, which follows the theme). */
.brand-card {
position: relative;
overflow: hidden;
border-radius: 20px;
aspect-ratio: 3 / 4;
display: grid;
place-items: center;
background: #12101f;
border: 1px solid var(--card-border);
box-shadow: 0 18px 44px rgba(10, 8, 30, 0.28);
transition: transform 0.18s ease-out, box-shadow 0.3s ease, border-color 0.3s ease;
}
.brand-card:hover { box-shadow: 0 26px 60px var(--accent-glow); border-color: var(--accent); }
.bc-vid {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover;
opacity: 0;
transition: opacity 0.6s ease, transform 0.5s ease;
}
.bc-vid.ready { opacity: 1; }
.brand-card:hover .bc-vid { transform: scale(1.06); }
/* The ad footage is busy and often carries its own on-screen type, so the
scrim runs heavy - the logo has to win. Hover lifts it enough to read
the clip without ever letting the footage compete with the mark. */
.bc-scrim {
position: absolute; inset: 0;
background:
radial-gradient(64% 50% at 50% 46%, rgba(8, 6, 20, 0.62), transparent 72%),
linear-gradient(180deg, rgba(8, 6, 20, 0.78) 0%, rgba(8, 6, 20, 0.6) 45%, rgba(8, 6, 20, 0.9) 100%);
transition: background 0.3s ease;
}
.brand-card:hover .bc-scrim {
background:
radial-gradient(64% 50% at 50% 46%, rgba(8, 6, 20, 0.5), transparent 72%),
linear-gradient(180deg, rgba(8, 6, 20, 0.62) 0%, rgba(8, 6, 20, 0.4) 45%, rgba(8, 6, 20, 0.82) 100%);
}
/* Logos are served pre-trimmed to their alpha bounds, so every mark now
fills its box and lands at the same optical weight regardless of how
much padding the original PNG carried. The width cap keeps the widest
wordmarks (Belkin is 48px of source art) from upscaling into mush. */
.bc-logo {
position: relative; z-index: 2;
max-width: min(66%, 100px); max-height: 32px;
object-fit: contain;
filter: brightness(0) invert(1) drop-shadow(0 2px 10px rgba(0, 0, 0, 0.5));
}
.bc-logo[src*="mp_tourist"] {
max-height: 72px;
max-width: min(85%, 160px);
}
.bc-logo.is-solid {
border-radius: 6px;
filter: drop-shadow(0 3px 12px rgba(0, 0, 0, 0.6));
}
.bc-tag {
position: absolute; z-index: 2; left: 0; right: 0; bottom: 14px;
text-align: center;
font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
color: rgba(255, 255, 255, 0.82);
}
@media (max-width: 700px) { .bc-logo { max-height: 40px; max-width: min(70%, 120px); } }
/* ---- stat band ---- */
.stat-band { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.stat-card {
text-align: center; padding: 32px 24px; border-radius: 20px;
background: var(--card-bg); border: 1px solid var(--card-border);
}
.stat-card .num {
display: block; font-family: var(--font-display); font-weight: 800;
font-size: clamp(1.9rem, 4vw, 2.6rem); letter-spacing: -0.02em;
background: linear-gradient(120deg, var(--periwinkle-light), var(--accent), var(--periwinkle-deep));
-webkit-background-clip: text; background-clip: text; color: transparent;
}
.stat-card .cap { display: block; margin-top: 10px; font-size: 0.88rem; color: var(--text-muted); line-height: 1.5; }
/* ---- proof-point platform grid (multi-platform feature page) ---- */
.proof-platforms { display: flex; flex-wrap: wrap; gap: 20px; max-width: 900px; margin: 0 auto; }
.proof-platforms .stat-card { flex: 1 1 230px; display: flex; flex-direction: column; justify-content: center; }
.proof-platform-row { flex: 2 1 480px; display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.proof-platform {
flex: 1 1 100px; max-width: 130px;
padding: 22px 12px; display: flex; flex-direction: column; align-items: center; text-align: center;
}
.proof-platform .pg-ic { margin-bottom: 12px; }
.proof-platform span:last-child {
font-family: var(--font-display); font-weight: 700; font-size: 0.85rem; color: var(--text-primary);
}
@media (max-width: 700px) { .proof-platforms { flex-direction: column; } }
/* ---- timeline ---- */
.timeline { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.tl-item {
position: relative; padding: 24px 24px; border-radius: 20px;
background: var(--card-bg); border: 1px solid var(--card-border);
}
.tl-step {
display: inline-block; padding: 4px 16px; border-radius: 9999px;
font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
color: var(--accent); background: var(--accent-dim); margin-bottom: 14px;
}
.tl-item h3 { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; color: var(--text-primary); margin: 0 0 8px; }
.tl-item p { font-size: 0.92rem; line-height: 1.55; color: var(--text-secondary); margin: 0; }
/* ---- connected flow diagram (linear process, e.g. Generate -> Publish -> Audit) ---- */
.flow-track { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; padding-top: 4px; }
.flow-line { position: absolute; top: 22px; left: calc(16.5% + 22px); right: calc(16.5% + 22px); width: auto; height: 4px; z-index: 0; overflow: visible; }
.flow-line line { stroke: var(--accent); stroke-width: 2; stroke-dasharray: 6 6; opacity: 0.5; animation: ng-flow 1.8s linear infinite; }
.flow-node { position: relative; z-index: 1; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.flow-dot {
width: 44px; height: 44px; border-radius: 50%; background: var(--card-bg);
border: 1px solid var(--card-hover-border); color: var(--accent);
display: flex; align-items: center; justify-content: center; box-shadow: var(--card-shadow);
transition: transform 0.3s ease;
}
.flow-node:hover .flow-dot { transform: scale(1.08); }
.flow-dot svg { width: 20px; height: 20px; }
.flow-step {
font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent);
}
.flow-node h3 { font-family: var(--font-display); font-weight: 700; font-size: 1rem; color: var(--text-primary); margin: 2px 0 4px; }
.flow-node p { font-size: 0.86rem; line-height: 1.55; color: var(--text-secondary); margin: 0; max-width: 28ch; }
@media (max-width: 760px) {
.flow-track { grid-template-columns: 1fr; gap: 32px; }
.flow-line { display: none; }
}
@media (prefers-reduced-motion: reduce) { .flow-line line { animation: none; } }
/* ---- placeholder media tile (stands in for real generated video) ---- */
.ph-media {
position: relative; display: flex; flex-direction: column; align-items: center;
justify-content: center; gap: 8px; aspect-ratio: 3/4; border-radius: 18px;
background: linear-gradient(155deg, var(--bg-inset), var(--bg-muted));
border: 1px solid var(--card-border); color: var(--text-muted); overflow: hidden;
}
.ph-media.tall { aspect-ratio: 3/4; }
.ph-media svg { width: 32px; height: 32px; opacity: 0.55; }
.ph-media span { font-size: 0.82rem; font-weight: 600; color: var(--text-secondary); }
.ph-media .ai-tag { position: absolute; top: 8px; left: 8px; }
/* ---- brief → draft animated demo (feature pages) ---- */
.ph-media.has-brief-draft {
display: block;
padding: clamp(14px, 2.4vw, 20px);
aspect-ratio: 16/10;
}
.brief-draft {
display: grid;
grid-template-columns: 1fr auto 1fr;
gap: clamp(12px, 2vw, 16px);
align-items: stretch;
height: 100%;
}
.brief-draft-card {
background: var(--card-bg);
border: 1px solid var(--card-border);
border-radius: 12px;
padding: 16px;
min-width: 0;
min-height: 0;
overflow-x: hidden;
overflow-y: auto;
scrollbar-width: none;
display: flex;
flex-direction: column;
gap: 12px;
}
.brief-draft-card::-webkit-scrollbar { display: none; }
.brief-draft-title {
margin: 0;
font-size: 1rem;
font-weight: 700;
line-height: 1.35;
color: var(--text-primary);
letter-spacing: -0.01em;
}
.brief-draft-subhead {
margin: 0;
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--text-muted);
}
.brief-draft-tags {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin: 0;
}
.brief-draft-tags span {
font-size: 0.75rem;
font-weight: 600;
padding: 4px 10px;
border-radius: 9999px;
color: var(--accent);
background: var(--accent-dim);
border: 1px solid transparent;
line-height: 1.3;
}
.brief-draft-ref {
display: flex;
align-items: center;
gap: 12px;
margin: 0;
padding: 10px 12px;
border-radius: 8px;
background: var(--bg-inset);
border: 1px solid var(--card-border);
}
.brief-draft-ref img {
width: 56px;
height: 36px;
object-fit: cover;
border-radius: 6px;
flex-shrink: 0;
}
.brief-draft-ref-label {
display: block;
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--text-muted);
margin-bottom: 4px;
}
.brief-draft-ref p {
margin: 0;
font-size: 0.875rem;
line-height: 1.45;
color: var(--text-secondary);
}
.brief-draft-notes {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 8px;
}
.brief-draft-notes li {
position: relative;
padding-left: 14px;
font-size: 0.875rem;
line-height: 1.5;
color: var(--text-secondary);
}
.brief-draft-notes li::before {
content: '';
position: absolute;
left: 0;
top: 0.62em;
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--accent);
opacity: 0.7;
}
.brief-draft-prompt {
margin: 0;
padding: 10px 12px;
border-radius: 8px;
font-size: 0.875rem;
line-height: 1.5;
color: var(--text-secondary);
background: var(--bg-inset);
border: 1px dashed var(--card-border);
font-style: italic;
}
.brief-draft-label {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 0.75rem;
font-weight: 600;
color: var(--text-muted);
letter-spacing: 0.04em;
text-transform: uppercase;
}
.brief-draft-label svg { width: 15px; height: 15px; opacity: 0.8; flex-shrink: 0; }
.brief-draft-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
margin: 0;
}
.brief-draft-badge {
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.03em;
padding: 4px 10px;
border-radius: 9999px;
color: #6ee7a8;
background: rgba(52, 211, 153, 0.12);
border: 1px solid rgba(52, 211, 153, 0.28);
opacity: 0;
transform: scale(0.92);
transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1), transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.brief-draft-hook-block {
position: relative;
margin: 0;
padding: 12px 12px 12px 14px;
border-radius: 8px;
background: var(--bg-inset);
border-left: 3px solid var(--accent);
}
.brief-draft-hook-label {
display: block;
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--text-muted);
margin-bottom: 6px;
}
.brief-draft-hook-score {
display: inline-block;
margin-top: 8px;
font-size: 0.75rem;
font-weight: 700;
padding: 3px 8px;
border-radius: 9999px;
color: var(--accent);
background: var(--accent-dim);
font-variant-numeric: tabular-nums;
}
.brief-draft-line {
margin: 0;
font-size: 0.875rem;
line-height: 1.5;
color: var(--text-secondary);
}
.brief-draft-line--hook {
color: var(--text-primary);
font-weight: 500;
font-size: 0.9375rem;
}
.brief-draft-shots {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 10px;
}
.brief-draft-shots li {
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 0.875rem;
line-height: 1.5;
color: var(--text-secondary);
}
.brief-draft-shot-visual {
position: relative;
flex-shrink: 0;
}
.brief-draft-shot-thumb {
width: 40px;
height: 40px;
object-fit: cover;
border-radius: 8px;
border: 1px solid var(--card-border);
display: block;
}
.brief-draft-num {
position: absolute;
bottom: -5px;
right: -5px;
width: 18px;
height: 18px;
border-radius: 5px;
background: var(--accent);
color: #fff;
font-size: 0.6875rem;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
font-variant-numeric: tabular-nums;
border: 2px solid var(--card-bg);
}
.brief-draft-shot-text { flex: 1; min-width: 0; padding-top: 2px; }
.brief-draft-hooks-rail {
margin: 0;
padding-top: 0;
border-top: 1px solid var(--card-border);
}
.brief-draft-hooks-label {
display: block;
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--text-muted);
margin-bottom: 8px;
}
.brief-draft-hooks-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 6px;
}
.brief-draft-hooks-list li {
display: grid;
grid-template-columns: 20px 1fr auto;
align-items: center;
gap: 8px;
font-size: 0.8125rem;
line-height: 1.45;
color: var(--text-secondary);
padding: 8px 10px;
border-radius: 8px;
background: var(--bg-inset);
}
.brief-draft-hooks-rank {
font-size: 0.75rem;
font-weight: 700;
color: var(--accent);
font-variant-numeric: tabular-nums;
}
.brief-draft-hooks-pct {
font-size: 0.75rem;
font-weight: 700;
font-variant-numeric: tabular-nums;
color: var(--text-muted);
}
.brief-draft-arrow {
display: flex;
align-items: center;
justify-content: center;
align-self: center;
width: clamp(28px, 4vw, 40px);
color: var(--text-muted);
opacity: 0;
transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.brief-draft-arrow svg { width: 100%; height: auto; display: block; }
.brief-draft-arrow-line {
fill: none;
stroke: currentColor;
stroke-width: 1.5;
stroke-linecap: round;
stroke-linejoin: round;
stroke-dasharray: 36;
stroke-dashoffset: 36;
transition: stroke-dashoffset 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}
.brief-draft.is-flowing .brief-draft-arrow-line {
animation: brief-draft-flow 1.6s linear infinite;
}
@keyframes brief-draft-flow { to { stroke-dashoffset: -36; } }
.brief-draft-card--brief,
.brief-draft-card--draft {
opacity: 0;
transform: translateY(8px);
transition:
opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1),
transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.brief-draft.is-active .brief-draft-card--brief {
opacity: 1;
transform: translateY(0);
transition-delay: 0s;
}
.brief-draft.is-active .brief-draft-arrow {
opacity: 1;
transition-delay: 0.32s;
}
.brief-draft.is-active .brief-draft-arrow-line {
stroke-dashoffset: 0;
transition-delay: 0.38s;
}
.brief-draft.is-active .brief-draft-card--draft {
opacity: 1;
transform: translateY(0);
transition-delay: 0.58s;
}
.brief-draft.is-active .brief-draft-badge {
opacity: 1;
transform: scale(1);
transition-delay: 0.78s;
}
@media (max-width: 640px) {
.brief-draft { grid-template-columns: 1fr; grid-template-rows: auto auto auto; }
.brief-draft-arrow { transform: rotate(90deg); width: 32px; margin: 2px auto; }
}
@media (prefers-reduced-motion: reduce) {
.brief-draft-card--brief,
.brief-draft-card--draft,
.brief-draft-arrow,
.brief-draft-badge {
opacity: 1;
transform: none;
transition: none;
}
.brief-draft-arrow-line { stroke-dashoffset: 0; transition: none; animation: none; }
}
/* ---- auto-cut & captions demo (feature-auto-edit) ---- */
.ph-media.has-auto-edit {
display: block;
padding: clamp(14px, 2.4vw, 20px);
aspect-ratio: 16/10;
}
.auto-edit-demo {
display: flex;
flex-direction: column;
gap: 12px;
height: 100%;
min-height: 0;
background: linear-gradient(165deg, var(--card-bg) 0%, rgba(125, 150, 224, 0.06) 100%);
border: 1px solid var(--card-border);
border-radius: 12px;
padding: clamp(14px, 2vw, 18px);
opacity: 0;
transform: translateY(8px);
transition:
opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1),
transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.auto-edit-head {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
min-width: 0;
}
.auto-edit-label {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--accent);
flex-shrink: 0;
}
.auto-edit-title {
flex: 1;
min-width: 0;
font-size: 0.9375rem;
font-weight: 700;
color: var(--text-primary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.auto-edit-badge {
flex-shrink: 0;
padding: 4px 10px;
border-radius: 999px;
font-size: 0.6875rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
color: #4ade80;
background: rgba(52, 211, 153, 0.12);
border: 1px solid rgba(52, 211, 153, 0.28);
opacity: 0;
transform: scale(0.92);
transition:
opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1),
transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.auto-edit-body {
display: grid;
grid-template-columns: minmax(130px, 36%) 1fr;
gap: clamp(12px, 2vw, 16px);
flex: 1;
min-height: 0;
align-items: stretch;
}
.auto-edit-player-col {
display: flex;
flex-direction: column;
gap: 10px;
min-width: 0;
min-height: 0;
justify-content: center;
}
.auto-edit-preview {
position: relative;
border-radius: 10px;
overflow: hidden;
background: #0a0c14;
border: 1px solid rgba(125, 150, 224, 0.35);
box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
justify-self: center;
width: 100%;
transition:
aspect-ratio 0.45s cubic-bezier(0.16, 1, 0.3, 1),
max-width 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
.auto-edit-preview.is-ratio-916 {
aspect-ratio: 9/16;
max-width: 100%;
}
.auto-edit-preview.is-ratio-11 {
aspect-ratio: 1/1;
max-width: 88%;
}
.auto-edit-preview.is-ratio-169 {
aspect-ratio: 16/9;
max-width: 100%;
}
.auto-edit-frame {
position: absolute;
inset: 0;
}
.auto-edit-frame img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
transition: object-position 0.45s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.auto-edit-preview.is-ratio-916 .auto-edit-frame img { object-position: center 16%; }
.auto-edit-preview.is-ratio-11 .auto-edit-frame img { object-position: center 22%; transform: scale(1.06); }
.auto-edit-preview.is-ratio-169 .auto-edit-frame img { object-position: center 38%; transform: scale(1.12); }
.auto-edit-preview .ai-tag {
position: absolute;
top: 8px;
left: 8px;
z-index: 2;
}
.auto-edit-caption {
position: absolute;
left: 8px;
right: 8px;
bottom: 10px;
margin: 0;
padding: 8px 10px;
border-radius: 8px;
font-size: 0.8125rem;
font-weight: 700;
line-height: 1.35;
text-align: center;
color: #fff;
background: rgba(0, 0, 0, 0.78);
backdrop-filter: blur(4px);
border: 1px solid rgba(255, 255, 255, 0.12);
opacity: 0;
transform: translateY(6px);
transition:
opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1),
transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
z-index: 2;
pointer-events: none;
}
.auto-edit-caption.is-visible {
opacity: 1;
transform: translateY(0);
}
.auto-edit-preview.is-ratio-169 .auto-edit-caption {
font-size: 0.75rem;
padding: 6px 10px;
bottom: 8px;
}
.auto-edit-controls {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 10px;
border-radius: 10px;
background: var(--bg-inset);
border: 1px solid var(--card-border);
}
.auto-edit-play {
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
padding: 0;
border: none;
border-radius: 50%;
cursor: pointer;
color: #fff;
background: linear-gradient(135deg, var(--accent), #5b7fd4);
box-shadow: 0 2px 10px rgba(125, 150, 224, 0.45);
transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.auto-edit-play:hover { transform: scale(1.06); }
.auto-edit-play:active { transform: scale(0.96); }
.auto-edit-play svg { width: 16px; height: 16px; }
.auto-edit-icon-pause { display: none; }
.auto-edit-demo.is-playing .auto-edit-icon-play { display: none; }
.auto-edit-demo.is-playing .auto-edit-icon-pause { display: block !important; }
.auto-edit-progress {
flex: 1;
min-width: 0;
padding: 6px 0;
cursor: pointer;
touch-action: none;
}
.auto-edit-progress-track {
position: relative;
height: 6px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.08);
overflow: visible;
}
.auto-edit-progress-fill {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 0%;
border-radius: 999px;
background: linear-gradient(90deg, #7d96e0, #2dd4bf);
transition: width 0.05s linear;
}
.auto-edit-progress-thumb {
position: absolute;
top: 50%;
left: 0%;
width: 12px;
height: 12px;
margin-top: -6px;
margin-left: -6px;
border-radius: 50%;
background: #fff;
border: 2px solid var(--accent);
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
pointer-events: none;
transition: left 0.05s linear;
}
.auto-edit-time {
flex-shrink: 0;
font-size: 0.75rem;
font-weight: 600;
font-variant-numeric: tabular-nums;
color: var(--text-secondary);
white-space: nowrap;
}
.auto-edit-time-sep { opacity: 0.45; margin: 0 2px; }
.auto-edit-panel {
display: flex;
flex-direction: column;
gap: 12px;
min-width: 0;
min-height: 0;
justify-content: center;
}
.auto-edit-stage {
display: flex;
flex-direction: column;
gap: 8px;
min-width: 0;
}
.auto-edit-stage-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.auto-edit-stage-label {
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--text-muted);
}
.auto-edit-duration {
font-size: 0.8125rem;
font-weight: 600;
font-variant-numeric: tabular-nums;
color: var(--text-secondary);
}
.auto-edit-duration--cut { color: #2dd4bf; }
.auto-edit-timeline {
display: flex;
align-items: stretch;
gap: 4px;
height: 40px;
padding: 6px;
border-radius: 8px;
background: var(--bg-inset);
border: 1px solid var(--card-border);
}
.auto-edit-timeline--cut {
position: relative;
}
.auto-edit-clip {
display: block;
flex: 1;
min-width: 0;
border-radius: 5px;
border: 1px solid transparent;
padding: 0;
cursor: default;
transition:
opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1),
transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
box-shadow 0.2s ease,
filter 0.2s ease;
}
.auto-edit-clip--raw {
flex: 1;
width: 100%;
background: linear-gradient(180deg, rgba(148, 163, 184, 0.45), rgba(100, 116, 139, 0.25));
border-color: rgba(148, 163, 184, 0.35);
}
.auto-edit-clip--hook {
flex: 1.35;
background: linear-gradient(180deg, #7d96e0, #5b72c4);
border-color: rgba(125, 150, 224, 0.65);
}
.auto-edit-clip--broll {
flex: 0.85;
background: linear-gradient(180deg, #2dd4bf, #14b8a6);
border-color: rgba(45, 212, 191, 0.55);
}
.auto-edit-clip--product {
flex: 0.95;
background: linear-gradient(180deg, #fbbf24, #f59e0b);
border-color: rgba(251, 191, 36, 0.55);
}
.auto-edit-clip--cta {
flex: 0.65;
background: linear-gradient(180deg, #f472b6, #ec4899);
border-color: rgba(244, 114, 182, 0.55);
}
.auto-edit-timeline--cut .auto-edit-clip {
opacity: 0;
transform: scaleX(0.6);
transform-origin: left center;
cursor: pointer;
}
.auto-edit-timeline--cut .auto-edit-clip:hover {
filter: brightness(1.12);
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.25);
}
.auto-edit-timeline--cut .auto-edit-clip.is-active {
box-shadow: 0 0 0 2px #fff, 0 0 12px rgba(125, 150, 224, 0.55);
filter: brightness(1.08);
}
.auto-edit-playhead {
position: absolute;
top: 4px;
bottom: 4px;
left: 0%;
width: 2px;
background: #fff;
border-radius: 1px;
box-shadow: 0 0 8px rgba(255, 255, 255, 0.75);
pointer-events: none;
z-index: 2;
opacity: 0;
transition: left 0.05s linear, opacity 0.3s ease;
}
.auto-edit-demo.is-active .auto-edit-playhead { opacity: 1; }
.auto-edit-stage--cut {
opacity: 0;
transform: translateY(8px);
transition:
opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1),
transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.auto-edit-meta {
display: flex;
flex-direction: column;
gap: 10px;
padding-top: 4px;
border-top: 1px solid var(--card-border);
}
.auto-edit-meta-group {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
min-width: 0;
}
.auto-edit-meta-label {
font-size: 0.6875rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--text-muted);
min-width: 56px;
flex-shrink: 0;
}
.auto-edit-pills {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin: 0;
padding: 0;
list-style: none;
}
.auto-edit-pills li { list-style: none; }
.auto-edit-pill {
padding: 5px 12px;
border-radius: 999px;
font-size: 0.75rem;
font-weight: 700;
font-family: inherit;
color: var(--text-primary);
background: var(--bg-muted);
border: 1px solid var(--card-border);
cursor: pointer;
opacity: 0;
transform: translateY(4px);
transition:
opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1),
transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
background 0.2s ease,
border-color 0.2s ease,
color 0.2s ease,
box-shadow 0.2s ease;
}
.auto-edit-pill:hover {
border-color: rgba(125, 150, 224, 0.45);
background: rgba(125, 150, 224, 0.1);
}
.auto-edit-pills--langs .auto-edit-pill.is-active {
color: #fff;
background: linear-gradient(135deg, #7d96e0, #5b72c4);
border-color: rgba(125, 150, 224, 0.65);
box-shadow: 0 2px 10px rgba(125, 150, 224, 0.35);
}
.auto-edit-pills--ratios .auto-edit-pill.is-active[data-auto-edit-ratio="916"] {
color: #fff;
background: linear-gradient(135deg, #7d96e0, #5b72c4);
border-color: rgba(125, 150, 224, 0.65);
}
.auto-edit-pills--ratios .auto-edit-pill.is-active[data-auto-edit-ratio="11"] {
color: #042f2e;
background: linear-gradient(135deg, #2dd4bf, #14b8a6);
border-color: rgba(45, 212, 191, 0.65);
}
.auto-edit-pills--ratios .auto-edit-pill.is-active[data-auto-edit-ratio="169"] {
color: #1a1200;
background: linear-gradient(135deg, #fbbf24, #f59e0b);
border-color: rgba(251, 191, 36, 0.65);
}
.auto-edit-demo.is-active {
opacity: 1;
transform: translateY(0);
}
.auto-edit-demo.is-active .auto-edit-badge {
opacity: 1;
transform: scale(1);
transition-delay: 0.72s;
}
.auto-edit-demo.is-active .auto-edit-stage--cut {
opacity: 1;
transform: translateY(0);
transition-delay: 0.28s;
}
.auto-edit-demo.is-active .auto-edit-timeline--cut .auto-edit-clip:nth-child(1) {
opacity: 1;
transform: scaleX(1);
transition-delay: 0.36s;
}
.auto-edit-demo.is-active .auto-edit-timeline--cut .auto-edit-clip:nth-child(2) {
opacity: 1;
transform: scaleX(1);
transition-delay: 0.44s;
}
.auto-edit-demo.is-active .auto-edit-timeline--cut .auto-edit-clip:nth-child(3) {
opacity: 1;
transform: scaleX(1);
transition-delay: 0.52s;
}
.auto-edit-demo.is-active .auto-edit-timeline--cut .auto-edit-clip:nth-child(4) {
opacity: 1;
transform: scaleX(1);
transition-delay: 0.6s;
}
.auto-edit-demo.is-active .auto-edit-caption.is-visible {
opacity: 1;
transform: translateY(0);
transition-delay: 0.48s;
}
.auto-edit-demo.is-active .auto-edit-pills--langs .auto-edit-pill:nth-child(1),
.auto-edit-demo.is-active .auto-edit-pills--langs li:nth-child(1) .auto-edit-pill {
opacity: 1;
transform: translateY(0);
transition-delay: 0.64s;
}
.auto-edit-demo.is-active .auto-edit-pills--langs li:nth-child(2) .auto-edit-pill {
opacity: 1;
transform: translateY(0);
transition-delay: 0.72s;
}
.auto-edit-demo.is-active .auto-edit-pills--ratios li:nth-child(1) .auto-edit-pill {
opacity: 1;
transform: translateY(0);
transition-delay: 0.8s;
}
.auto-edit-demo.is-active .auto-edit-pills--ratios li:nth-child(2) .auto-edit-pill {
opacity: 1;
transform: translateY(0);
transition-delay: 0.88s;
}
.auto-edit-demo.is-active .auto-edit-pills--ratios li:nth-child(3) .auto-edit-pill {
opacity: 1;
transform: translateY(0);
transition-delay: 0.96s;
}
@media (max-width: 640px) {
.auto-edit-body { grid-template-columns: 1fr; }
.auto-edit-preview.is-ratio-916 { max-width: 180px; margin: 0 auto; }
.auto-edit-preview.is-ratio-11 { max-width: 180px; }
.auto-edit-preview.is-ratio-169 { max-width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
.auto-edit-demo,
.auto-edit-stage--cut,
.auto-edit-timeline--cut .auto-edit-clip,
.auto-edit-caption,
.auto-edit-badge,
.auto-edit-pill {
opacity: 1;
transform: none;
transition: none;
}
.auto-edit-preview,
.auto-edit-frame img,
.auto-edit-progress-fill,
.auto-edit-progress-thumb,
.auto-edit-playhead {
transition: none;
}
}
/* ---- platform friction demo (feature-multi-platform problem) ---- */
.ph-media.has-platform-friction {
display: block;
padding: clamp(14px, 2.4vw, 20px);
aspect-ratio: auto;
min-height: 0;
}
.platform-friction-demo {
display: flex;
flex-direction: column;
gap: clamp(14px, 2vw, 18px);
height: 100%;
min-height: 0;
background: linear-gradient(165deg, var(--card-bg) 0%, rgba(125, 150, 224, 0.06) 100%);
border: 1px solid var(--card-border);
border-radius: 14px;
padding: clamp(16px, 2.2vw, 22px);
opacity: 0;
transform: translateY(8px);
transition:
opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1),
transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.platform-friction-demo.is-active { opacity: 1; transform: translateY(0); }
.pf-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
padding-bottom: 14px;
border-bottom: 1px solid var(--card-border);
}
.pf-header-tag {
display: inline-block;
font-size: 0.6875rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--accent);
margin-bottom: 4px;
}
.pf-header-title {
margin: 0;
font-family: var(--font-display);
font-size: clamp(1rem, 1.6vw, 1.125rem);
font-weight: 700;
line-height: 1.3;
color: var(--text-primary);
}
.pf-header-stat {
flex-shrink: 0;
text-align: right;
padding: 8px 12px;
border-radius: 10px;
background: rgba(249, 115, 22, 0.1);
border: 1px solid rgba(249, 115, 22, 0.25);
}
.pf-header-stat-value {
display: block;
font-family: var(--font-display);
font-size: 1.125rem;
font-weight: 800;
line-height: 1.1;
color: #f97316;
font-variant-numeric: tabular-nums;
}
.pf-header-stat-label {
display: block;
font-size: 0.6875rem;
font-weight: 600;
color: var(--text-secondary);
margin-top: 2px;
}
.pf-body {
display: grid;
grid-template-columns: minmax(108px, 140px) auto 1fr;
gap: clamp(10px, 1.6vw, 16px);
align-items: stretch;
min-width: 0;
}
.pf-master {
display: flex;
flex-direction: column;
gap: 10px;
min-width: 0;
}
.pf-master-label {
margin: 0;
font-size: 0.6875rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--text-secondary);
}
.pf-frame {
position: relative;
width: 100%;
margin: 0 auto;
border-radius: 8px;
overflow: hidden;
border: 2px solid var(--accent);
background: #0a0c14;
box-shadow: 0 0 0 3px rgba(125, 150, 224, 0.15);
}
.pf-frame img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 20%;
}
.pf-frame--916 { aspect-ratio: 9/16; max-width: 120px; }
.pf-frame--45 { aspect-ratio: 4/5; }
.pf-frame--169 { aspect-ratio: 16/9; }
.pf-frame--11 { aspect-ratio: 1/1; }
.pf-master-meta {
margin: 0;
display: flex;
flex-direction: column;
gap: 6px;
}
.pf-meta-row {
display: flex;
justify-content: space-between;
gap: 8px;
font-size: 0.75rem;
line-height: 1.3;
}
.pf-meta-row dt {
margin: 0;
color: var(--text-secondary);
font-weight: 500;
}
.pf-meta-row dd {
margin: 0;
font-weight: 700;
color: var(--text-primary);
font-variant-numeric: tabular-nums;
}
.pf-connector {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
min-width: 28px;
}
.pf-connector-line {
flex: 1;
width: 2px;
min-height: 40px;
border-radius: 2px;
background: linear-gradient(180deg, var(--accent), rgba(125, 150, 224, 0.15));
}
.pf-connector-badge {
writing-mode: vertical-rl;
transform: rotate(180deg);
font-size: 0.625rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--text-secondary);
white-space: nowrap;
}
.pf-cards {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: clamp(8px, 1.2vw, 12px);
min-width: 0;
list-style: none;
margin: 0;
padding: 0;
}
.pf-card {
display: flex;
flex-direction: column;
gap: 8px;
padding: 10px;
border-radius: 10px;
background: var(--bg-inset);
border: 1px solid var(--card-border);
min-width: 0;
opacity: 0;
transform: translateY(6px);
transition:
opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1),
transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.pf-card-head {
display: flex;
align-items: center;
gap: 6px;
min-width: 0;
}
.pf-brand {
flex-shrink: 0;
width: 18px;
height: 18px;
object-fit: contain;
}
.pf-card-name {
font-size: 0.8125rem;
font-weight: 700;
color: var(--text-primary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.pf-card--meta { border-top: 2px solid #1877f2; }
.pf-card--tiktok { border-top: 2px solid #fe2c55; }
.pf-card--youtube { border-top: 2px solid #ff4444; }
.pf-card--google { border-top: 2px solid #34a853; }
.pf-card--linkedin { border-top: 2px solid #0a66c2; }
.pf-specs {
margin: 0;
display: flex;
flex-direction: column;
gap: 4px;
}
.pf-spec {
display: flex;
justify-content: space-between;
gap: 6px;
font-size: 0.6875rem;
line-height: 1.35;
}
.pf-spec dt {
margin: 0;
color: var(--text-secondary);
font-weight: 500;
}
.pf-spec dd {
margin: 0;
font-weight: 600;
color: var(--text-primary);
text-align: right;
font-variant-numeric: tabular-nums;
}
.pf-delta {
margin-top: auto;
padding: 4px 8px;
border-radius: 6px;
font-size: 0.625rem;
font-weight: 700;
letter-spacing: 0.02em;
text-align: center;
color: var(--text-secondary);
background: rgba(255, 255, 255, 0.04);
border: 1px solid var(--card-border);
}
.pf-delta--warn {
color: #fbbf24;
background: rgba(251, 191, 36, 0.1);
border-color: rgba(251, 191, 36, 0.28);
}
.pf-delta--rule {
color: #93c5fd;
background: rgba(147, 197, 253, 0.1);
border-color: rgba(147, 197, 253, 0.28);
}
.pf-footnote {
margin: 0;
padding-top: 12px;
border-top: 1px solid var(--card-border);
font-size: 0.8125rem;
line-height: 1.5;
color: var(--text-secondary);
}
.platform-friction-demo.is-active .pf-card:nth-child(1) { opacity: 1; transform: translateY(0); transition-delay: 0.1s; }
.platform-friction-demo.is-active .pf-card:nth-child(2) { opacity: 1; transform: translateY(0); transition-delay: 0.16s; }
.platform-friction-demo.is-active .pf-card:nth-child(3) { opacity: 1; transform: translateY(0); transition-delay: 0.22s; }
.platform-friction-demo.is-active .pf-card:nth-child(4) { opacity: 1; transform: translateY(0); transition-delay: 0.28s; }
.platform-friction-demo.is-active .pf-card:nth-child(5) { opacity: 1; transform: translateY(0); transition-delay: 0.34s; }
/* ---- one-click publish demo (feature-multi-platform proof) ---- */
.publish-demo { max-width: 920px; margin: 0 auto; }
.publish-demo-shell {
display: grid;
grid-template-columns: minmax(240px, 1fr) auto minmax(260px, 1.1fr);
gap: clamp(12px, 2.4vw, 20px);
align-items: stretch;
padding: clamp(16px, 2.4vw, 22px);
border-radius: 16px;
background: linear-gradient(165deg, var(--card-bg) 0%, rgba(125, 150, 224, 0.07) 100%);
border: 1px solid var(--card-border);
}
.publish-source {
display: flex;
flex-direction: column;
gap: 14px;
min-width: 0;
}
.publish-source-media {
position: relative;
width: 100%;
border-radius: 10px;
overflow: hidden;
border: 1px solid var(--card-border);
background: #0a0c14;
aspect-ratio: 16/10;
}
.publish-source-media img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 22%;
}
.publish-source-tag {
position: absolute;
left: 8px;
top: 8px;
padding: 4px 8px;
border-radius: 6px;
font-size: 0.625rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
color: #fff;
background: rgba(0, 0, 0, 0.72);
}
.publish-source-copy {
display: flex;
flex-direction: column;
gap: 8px;
min-width: 0;
}
.publish-source-label {
font-size: 0.6875rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--accent);
}
.publish-source-title {
margin: 0;
font-size: 1rem;
font-weight: 700;
line-height: 1.3;
color: var(--text-primary);
}
.publish-source-meta {
margin: 0;
font-size: 0.8125rem;
color: var(--text-secondary);
}
.publish-launch-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
margin-top: 4px;
padding: 11px 16px;
min-height: 44px;
width: 100%;
border: none;
border-radius: 10px;
cursor: pointer;
font-family: inherit;
font-size: 0.875rem;
font-weight: 700;
color: #fff;
background: linear-gradient(135deg, #7d96e0, #5b72c4);
box-shadow: 0 4px 18px rgba(125, 150, 224, 0.4);
transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.2s ease;
}
.publish-launch-btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.publish-launch-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 22px rgba(125, 150, 224, 0.5); }
.publish-launch-btn:active { transform: translateY(0); }
.publish-launch-btn.is-launched {
background: linear-gradient(135deg, #34d399, #10b981);
box-shadow: 0 4px 18px rgba(52, 211, 153, 0.35);
}
.publish-source-note {
margin: 0;
font-size: 0.75rem;
line-height: 1.45;
color: var(--text-muted);
}
.publish-rail {
position: relative;
width: 28px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
}
.publish-rail-line {
position: absolute;
top: 8%;
bottom: 8%;
width: 2px;
border-radius: 1px;
background: linear-gradient(180deg, rgba(125, 150, 224, 0.15), rgba(125, 150, 224, 0.55), rgba(45, 212, 191, 0.55));
opacity: 0.5;
transition: opacity 0.3s ease;
}
.publish-rail-pulse {
position: absolute;
top: 50%;
left: 50%;
width: 10px;
height: 10px;
margin: -5px 0 0 -5px;
border-radius: 50%;
background: var(--accent);
box-shadow: 0 0 0 0 rgba(125, 150, 224, 0.5);
opacity: 0;
}
.publish-demo.is-launching .publish-rail-line { opacity: 1; }
.publish-demo.is-launching .publish-rail-pulse {
opacity: 1;
animation: publish-pulse 1.2s ease-out infinite;
}
@keyframes publish-pulse {
0% { box-shadow: 0 0 0 0 rgba(125, 150, 224, 0.55); transform: scale(1); }
70% { box-shadow: 0 0 0 12px rgba(125, 150, 224, 0); transform: scale(1.15); }
100% { box-shadow: 0 0 0 0 rgba(125, 150, 224, 0); transform: scale(1); }
}
.publish-targets {
display: flex;
flex-direction: column;
gap: 8px;
margin: 0;
padding: 0;
list-style: none;
min-width: 0;
justify-content: center;
}
.publish-target {
display: grid;
grid-template-columns: 4px 1fr auto;
align-items: center;
gap: 12px;
padding: 12px 14px;
border-radius: 10px;
background: var(--bg-inset);
border: 1px solid var(--card-border);
transition:
border-color 0.25s ease,
background 0.25s ease,
transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.publish-target-accent {
align-self: stretch;
border-radius: 4px;
background: var(--accent);
}
.publish-target--meta .publish-target-accent { background: #1877f2; }
.publish-target--tiktok .publish-target-accent { background: #25f4ee; }
.publish-target--youtube .publish-target-accent { background: #ff4444; }
.publish-target--google .publish-target-accent { background: #34a853; }
.publish-target--linkedin .publish-target-accent { background: #0a66c2; }
.publish-target-body {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.publish-target-name {
font-size: 0.875rem;
font-weight: 700;
color: var(--text-primary);
}
.publish-target-spec {
font-size: 0.75rem;
color: var(--text-secondary);
}
.publish-target-status {
flex-shrink: 0;
padding: 4px 10px;
border-radius: 999px;
font-size: 0.6875rem;
font-weight: 700;
letter-spacing: 0.03em;
text-transform: uppercase;
color: var(--text-muted);
background: var(--bg-muted);
border: 1px solid var(--card-border);
transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}
.publish-target.is-formatting .publish-target-status {
color: #fbbf24;
background: rgba(251, 191, 36, 0.12);
border-color: rgba(251, 191, 36, 0.35);
}
.publish-target.is-live {
border-color: rgba(52, 211, 153, 0.35);
background: rgba(52, 211, 153, 0.06);
transform: translateX(2px);
}
.publish-target.is-live .publish-target-status {
color: #4ade80;
background: rgba(52, 211, 153, 0.12);
border-color: rgba(52, 211, 153, 0.35);
}
@media (max-width: 1024px) {
.pf-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
.publish-demo-shell { grid-template-columns: 1fr; }
.publish-rail { display: none; }
.pf-header { flex-direction: column; align-items: stretch; }
.pf-header-stat { text-align: left; align-self: flex-start; }
.pf-body {
grid-template-columns: 1fr;
gap: 14px;
}
.pf-master {
flex-direction: row;
align-items: flex-start;
gap: 14px;
}
.pf-frame--916 { max-width: 88px; flex-shrink: 0; }
.pf-master-meta { flex: 1; justify-content: center; }
.pf-connector {
flex-direction: row;
min-width: 0;
width: 100%;
}
.pf-connector-line {
flex: 1;
width: auto;
height: 2px;
min-height: 0;
background: linear-gradient(90deg, var(--accent), rgba(125, 150, 224, 0.15));
}
.pf-connector-badge {
writing-mode: horizontal-tb;
transform: none;
}
.pf-cards {
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
padding-bottom: 4px;
gap: 10px;
}
.pf-card {
flex: 0 0 min(72vw, 168px);
scroll-snap-align: start;
}
}
@media (prefers-reduced-motion: reduce) {
.platform-friction-demo,
.pf-card,
.publish-rail-pulse,
.publish-target {
opacity: 1;
transform: none;
transition: none;
animation: none;
}
}
/* ---- Brand Vault check demo (feature-brand-checkpoint) ---- */
.brand-vault-demo {
background: var(--card-bg);
border: 1px solid var(--card-border);
border-radius: 12px;
padding: clamp(16px, 2.4vw, 20px);
opacity: 0;
transform: translateY(8px);
transition:
opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1),
transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.brand-vault-compare {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
width: 100%;
min-height: clamp(280px, 32vw, 340px);
}
.brand-vault-compare-col {
display: flex;
flex-direction: column;
gap: 10px;
min-width: 0;
min-height: 0;
}
.brand-vault-compare-col--after {
opacity: 0;
transform: translateX(10px);
transition:
opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1),
transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.brand-vault-compare-label {
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--text-muted);
flex-shrink: 0;
}
.brand-vault-compare-label--after { color: #6ee7a8; }
.brand-vault-ad {
flex: 1;
min-height: clamp(240px, 28vw, 300px);
width: 100%;
background: var(--bg-inset);
border: 1px solid var(--card-border);
border-radius: 10px;
padding: 20px 18px;
display: flex;
flex-direction: column;
gap: 16px;
justify-content: space-between;
overflow-y: auto;
scrollbar-width: none;
}
.brand-vault-ad::-webkit-scrollbar { display: none; }
.brand-vault-flag-row {
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
}
.brand-vault-flag-row--claim { align-items: flex-start; }
.brand-vault-ad-logo {
flex-shrink: 0;
padding: 5px 8px;
border-radius: 8px;
background: var(--card-bg);
border: 1px solid var(--card-border);
}
.brand-vault-ad--before .brand-vault-ad-logo span {
display: inline-block;
font-family: var(--font-display);
font-weight: 800;
font-size: 1.1rem;
line-height: 1;
color: var(--accent);
transform: scaleX(1.4);
transform-origin: left center;
}
.brand-vault-ad-logo--fixed span {
display: inline-block;
font-family: var(--font-display);
font-weight: 800;
font-size: 1.1rem;
line-height: 1;
color: var(--accent);
}
.brand-vault-ad-copy {
display: flex;
flex-direction: column;
gap: 8px;
flex: 1;
min-height: 64px;
justify-content: center;
}
.brand-vault-ad-line {
display: block;
height: 7px;
border-radius: 9999px;
background: var(--border-strong);
width: 88%;
opacity: 0.55;
}
.brand-vault-ad-line--short { width: 62%; }
.brand-vault-ad-line--shorter { width: 44%; }
.brand-vault-ad-claim {
margin: 0;
flex-shrink: 0;
font-size: 0.8125rem;
font-weight: 600;
line-height: 1.4;
color: var(--text-secondary);
padding: 4px 6px;
border-radius: 6px;
max-width: 46%;
}
.brand-vault-ad-claim--fixed {
color: var(--text-primary);
max-width: 46%;
}
.brand-vault-ad-swatch {
flex-shrink: 0;
width: 32px;
height: 32px;
border-radius: 8px;
background: #3b6fe0;
border: 1px solid rgba(255, 255, 255, 0.12);
}
.brand-vault-ad-swatch--fixed {
background: var(--accent);
border-color: rgba(255, 255, 255, 0.16);
}
.brand-vault-hotspot {
box-shadow: 0 0 0 1.5px rgba(248, 113, 113, 0.8);
}
.brand-vault-callout {
margin: 0;
flex: 1;
min-width: 0;
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 8px;
border-radius: 9999px;
font-size: 0.6875rem;
font-weight: 600;
line-height: 1.3;
color: #fca5a5;
background: rgba(127, 29, 29, 0.35);
border: 1px solid rgba(248, 113, 113, 0.35);
opacity: 0;
transform: translateX(-4px);
transition:
opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1),
transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.brand-vault-callout::before {
content: '';
flex-shrink: 0;
width: 6px;
height: 6px;
border-radius: 50%;
background: #f87171;
}
.brand-vault-ok {
margin: 0;
flex: 1;
min-width: 0;
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 8px;
border-radius: 9999px;
font-size: 0.6875rem;
font-weight: 600;
line-height: 1.3;
color: #6ee7a8;
background: rgba(52, 211, 153, 0.1);
border: 1px solid rgba(52, 211, 153, 0.28);
}
.brand-vault-ok::before {
content: '';
flex-shrink: 0;
width: 6px;
height: 6px;
border-radius: 50%;
background: #4ade80;
}
.brand-vault-demo.is-active {
opacity: 1;
transform: translateY(0);
transition-delay: 0s;
}
.brand-vault-demo.is-active .brand-vault-flag-row--logo .brand-vault-callout {
opacity: 1;
transform: translateX(0);
transition-delay: 0.24s;
}
.brand-vault-demo.is-active .brand-vault-flag-row--claim .brand-vault-callout {
opacity: 1;
transform: translateX(0);
transition-delay: 0.36s;
}
.brand-vault-demo.is-active .brand-vault-flag-row--color .brand-vault-callout {
opacity: 1;
transform: translateX(0);
transition-delay: 0.48s;
}
.brand-vault-demo.is-active .brand-vault-compare-col--after {
opacity: 1;
transform: translateX(0);
transition-delay: 0.62s;
}
@media (max-width: 720px) {
.brand-vault-compare { grid-template-columns: 1fr 1fr; }
.brand-vault-ad-claim,
.brand-vault-ad-claim--fixed { max-width: 42%; font-size: 0.75rem; }
.brand-vault-callout,
.brand-vault-ok { font-size: 0.625rem; padding: 4px 6px; }
}
@media (max-width: 480px) {
.brand-vault-compare { grid-template-columns: 1fr; }
.brand-vault-ad-claim,
.brand-vault-ad-claim--fixed { max-width: none; flex: 1; }
.brand-vault-flag-row { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
.brand-vault-demo,
.brand-vault-compare-col--after,
.brand-vault-callout {
opacity: 1;
transform: none;
transition: none;
}
}
/* "AI Generated" transparency tag - used on every generated sample video */
.ai-tag {
display: inline-flex; align-items: center; gap: 5px; padding: 5px 8px;
border-radius: 9999px; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.04em;
text-transform: uppercase; color: #fff; background: rgba(20, 16, 40, 0.62);
backdrop-filter: blur(6px); border: 1px solid rgba(255,255,255,0.16);
}
.ai-tag::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--periwinkle-light); box-shadow: 0 0 8px var(--periwinkle-light); }
/* ---- node graph (features overview) ---- */
.node-graph { position: relative; max-width: 760px; margin: 0 auto; aspect-ratio: 780/490; }
.node-graph > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.ng-path {
fill: none; stroke: var(--accent); stroke-width: 1.5; stroke-dasharray: 4 6;
opacity: 0.55; animation: ng-flow 1.8s linear infinite;
}
@keyframes ng-flow { to { stroke-dashoffset: -20; } }
@keyframes ng-pulse {
0%, 100% { box-shadow: var(--object-glow-strong); }
50% { box-shadow: var(--object-glow-strong), 0 0 0 10px var(--accent-dim); }
}
.ng-node {
position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column;
align-items: center; gap: 8px; text-align: center; width: 152px;
}
.ng-node.hub { width: 120px; }
.ng-dot {
display: flex; align-items: center; justify-content: center; width: 56px; height: 56px;
border-radius: 50%; background: var(--card-bg); border: 1px solid var(--card-hover-border);
color: var(--accent); box-shadow: var(--card-shadow);
transition: transform 0.3s ease, border-color 0.3s ease;
}
.ng-node:not(.hub):hover .ng-dot { transform: scale(1.08); border-color: var(--accent); }
.ng-node.hub .ng-dot {
width: 64px; height: 64px; background: var(--accent); color: #fff;
box-shadow: var(--object-glow-strong); animation: ng-pulse 2.6s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
.ng-path { animation: none; }
.ng-node.hub .ng-dot { animation: none; }
}
.ng-dot svg { width: 24px; height: 24px; }
.ng-node.hub .ng-dot svg { width: 32px; height: 32px; }
.ng-lbl { font-size: 0.82rem; font-weight: 700; color: var(--text-primary); line-height: 1.4; }
@media (max-width: 700px) {
.node-graph { aspect-ratio: auto; height: auto; }
.ng-node { position: static; transform: none; width: auto; display: inline-flex; flex-direction: row; gap: 8px; align-items: center; text-align: left; margin-bottom: 18px; }
.ng-node.hub { display: none; }
.node-graph > svg { display: none; }
}
/* ---- orbit diagram (six pillars circling a central engine) ---- */
.orbit-diagram { position: relative; max-width: 600px; margin: 0 auto; aspect-ratio: 1/1; }
.orbit-diagram > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.orbit-ring circle {
fill: none; stroke: var(--border-strong); stroke-width: 1; stroke-dasharray: 2.5 3.5;
transform-origin: 50px 50px; animation: orbit-spin 50s linear infinite;
}
.orbit-lines line {
stroke: var(--accent); stroke-width: 1; stroke-dasharray: 3 4; opacity: 0.4;
animation: ng-flow 2.4s linear infinite;
}
@keyframes orbit-spin { to { transform: rotate(360deg); } }
.orbit-hub {
position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
width: 136px; height: 136px; border-radius: 28px;
background: linear-gradient(150deg, var(--periwinkle-light), var(--accent), var(--periwinkle-deep));
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
color: #fff; box-shadow: var(--object-glow-strong); text-align: center; padding: 8px; z-index: 1;
}
.orbit-hub svg { width: 24px; height: 24px; }
.orbit-hub b { font-family: var(--font-display); font-weight: 800; font-size: 0.88rem; letter-spacing: 0.01em; }
.orbit-hub small { font-size: 0.58rem; opacity: 0.85; letter-spacing: 0.05em; text-transform: uppercase; }
.orbit-node {
position: absolute; transform: translate(-50%, -50%); width: 160px; text-align: center;
display: flex; flex-direction: column; align-items: center; gap: 8px; z-index: 1;
}
.orbit-dot {
width: 48px; height: 48px; border-radius: 50%; background: var(--card-bg);
border: 1px solid var(--card-hover-border); color: var(--accent);
display: flex; align-items: center; justify-content: center; box-shadow: var(--card-shadow);
transition: transform 0.3s ease;
}
.orbit-node:hover .orbit-dot { transform: scale(1.08); }
.orbit-dot svg { width: 20px; height: 20px; }
.orbit-lbl { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); }
.orbit-node p { font-size: 0.8rem; color: var(--text-muted); margin: 0; line-height: 1.45; }
.orbit-fallback { display: none; }
@media (prefers-reduced-motion: reduce) {
.orbit-ring circle { animation: none; }
.orbit-lines line { animation: none; }
}
@media (max-width: 760px) {
.orbit-diagram { display: none; }
.orbit-fallback { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.orbit-fallback .pg-card { display: flex; align-items: center; gap: 16px; text-align: left; }
.orbit-fallback .orbit-dot { flex: none; }
}
/* "AI Generated" transparency tag - used on every generated sample video */
.ai-tag {
display: inline-flex; align-items: center; gap: 5px; padding: 5px 8px;
border-radius: 9999px; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.04em;
text-transform: uppercase; color: #fff; background: rgba(20, 16, 40, 0.62);
backdrop-filter: blur(6px); border: 1px solid rgba(255,255,255,0.16);
}
.ai-tag::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--periwinkle-light); box-shadow: 0 0 8px var(--periwinkle-light); }
/* ---- node graph (features overview) ---- */
/* wrapping panel: the diagram used to float directly on the section
background, reading thin next to the denser card sections around it -
giving it a card surface of its own (same tokens as .chart-card) ties
it into the site's visual language. */
.node-graph-panel {
max-width: 900px; margin: 0 auto;
background: var(--card-bg); border: 1px solid var(--card-border);
border-radius: 28px; box-shadow: var(--card-shadow);
padding: clamp(32px, 6vw, 64px) clamp(20px, 5vw, 48px);
}
.node-graph { position: relative; max-width: 760px; margin: 0 auto; aspect-ratio: 780/490; }
.node-graph > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.ng-path {
fill: none; stroke: var(--accent); stroke-width: 1.5; stroke-dasharray: 4 6;
opacity: 0.55; animation: ng-flow 1.8s linear infinite;
}
@keyframes ng-flow { to { stroke-dashoffset: -20; } }
@keyframes ng-pulse {
0%, 100% { box-shadow: var(--object-glow-strong); }
50% { box-shadow: var(--object-glow-strong), 0 0 0 10px var(--accent-dim); }
}
.ng-node {
--ng-dot-size: 68px;
position: absolute;
/* left/top mark the point the connecting SVG path actually ends on.
Centering the whole node (dot + label stacked) here, as before,
pulled the dot up off that point by roughly half the label's height
- shift by just the dot's own half-height instead, so the line
plugs straight into the dot and the label hangs below it. */
transform: translate(-50%, calc(var(--ng-dot-size) / -2));
display: flex; flex-direction: column;
align-items: center; gap: 10px; text-align: center; width: 160px;
}
.ng-node.hub { --ng-dot-size: 84px; width: 130px; }
.ng-dot {
display: flex; align-items: center; justify-content: center;
width: var(--ng-dot-size); height: var(--ng-dot-size);
border-radius: 50%; background: var(--card-bg); border: 1px solid var(--card-hover-border);
color: var(--accent); box-shadow: var(--card-shadow);
transition: transform 0.3s ease, border-color 0.3s ease;
}
.ng-node:not(.hub):hover .ng-dot { transform: scale(1.08); border-color: var(--accent); }
.ng-node.hub .ng-dot {
background: var(--accent); color: #fff;
box-shadow: var(--object-glow-strong); animation: ng-pulse 2.6s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
.ng-path { animation: none; }
.ng-node.hub .ng-dot { animation: none; }
}
.ng-dot svg { width: 28px; height: 28px; }
.ng-node.hub .ng-dot svg { width: 36px; height: 36px; }
.ng-lbl { font-size: 0.88rem; font-weight: 700; color: var(--text-primary); line-height: 1.4; }
@media (max-width: 700px) {
.node-graph-panel { padding: 28px 20px; border-radius: 22px; }
.node-graph { aspect-ratio: auto; height: auto; }
.ng-node { position: static; transform: none; width: auto; display: inline-flex; flex-direction: row; gap: 8px; align-items: center; text-align: left; margin-bottom: 18px; }
.ng-node.hub { display: none; }
.node-graph > svg { display: none; }
}
/* ---- orbit diagram (six pillars circling a central engine) ---- */
.orbit-diagram { position: relative; max-width: 600px; margin: 0 auto; aspect-ratio: 1/1; }
.orbit-diagram > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.orbit-ring circle {
fill: none; stroke: var(--border-strong); stroke-width: 1; stroke-dasharray: 2.5 3.5;
transform-origin: 50px 50px; animation: orbit-spin 50s linear infinite;
}
.orbit-lines line {
stroke: var(--accent); stroke-width: 1; stroke-dasharray: 3 4; opacity: 0.4;
animation: ng-flow 2.4s linear infinite;
}
@keyframes orbit-spin { to { transform: rotate(360deg); } }
.orbit-hub {
position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
width: 136px; height: 136px; border-radius: 28px;
background: linear-gradient(150deg, var(--periwinkle-light), var(--accent), var(--periwinkle-deep));
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
color: #fff; box-shadow: var(--object-glow-strong); text-align: center; padding: 8px; z-index: 1;
}
.orbit-hub svg { width: 24px; height: 24px; }
.orbit-hub b { font-family: var(--font-display); font-weight: 800; font-size: 0.88rem; letter-spacing: 0.01em; }
.orbit-hub small { font-size: 0.58rem; opacity: 0.85; letter-spacing: 0.05em; text-transform: uppercase; }
.orbit-node {
position: absolute; transform: translate(-50%, -50%); width: 160px; text-align: center;
display: flex; flex-direction: column; align-items: center; gap: 8px; z-index: 1;
}
.orbit-dot {
width: 48px; height: 48px; border-radius: 50%; background: var(--card-bg);
border: 1px solid var(--card-hover-border); color: var(--accent);
display: flex; align-items: center; justify-content: center; box-shadow: var(--card-shadow);
transition: transform 0.3s ease;
}
.orbit-node:hover .orbit-dot { transform: scale(1.08); }
.orbit-dot svg { width: 20px; height: 20px; }
.orbit-lbl { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); }
.orbit-node p { font-size: 0.8rem; color: var(--text-muted); margin: 0; line-height: 1.45; }
.orbit-fallback { display: none; }
@media (prefers-reduced-motion: reduce) {
.orbit-ring circle { animation: none; }
.orbit-lines line { animation: none; }
}
@media (max-width: 760px) {
.orbit-diagram { display: none; }
.orbit-fallback { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.orbit-fallback .pg-card { display: flex; align-items: center; gap: 16px; text-align: left; }
.orbit-fallback .orbit-dot { flex: none; }
}
/* ---- brand asset library (the Vault's contents, as a shelf of locked asset types) ---- */
.asset-library {
display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); max-width: 984px; margin: 0 auto;
}
.asset-card {
position: relative; background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 20px;
padding: 24px 24px 24px; box-shadow: var(--card-shadow); transition: border-color 0.2s ease, transform 0.2s ease;
}
.asset-card:hover { border-color: var(--card-hover-border); transform: translateY(-3px); }
.asset-lock {
position: absolute; top: 16px; right: 16px; display: flex; align-items: center; gap: 4px;
font-size: 0.66rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent);
background: var(--accent-dim); padding: 4px 8px 4px 7px; border-radius: 999px;
}
.asset-lock svg { width: 11px; height: 11px; }
.asset-icon {
width: 44px; height: 44px; border-radius: 13px; display: flex; align-items: center; justify-content: center;
background: var(--accent-dim); color: var(--accent); margin-bottom: 16px;
}
.asset-icon svg { width: 21px; height: 21px; }
.asset-icon.type-aa {
font-family: var(--font-display); font-weight: 800; font-size: 1.15rem; letter-spacing: -0.02em;
}
.asset-card h3 { font-family: var(--font-display); font-weight: 700; font-size: 1rem; color: var(--text-primary); margin: 0 0 6px; }
.asset-card p { font-size: 0.86rem; color: var(--text-secondary); line-height: 1.55; margin: 0 0 16px; }
.asset-swatch-row { display: flex; gap: 8px; }
.asset-swatch-row span {
width: 24px; height: 24px; border-radius: 50%; background: var(--c, var(--accent));
box-shadow: 0 4px 10px rgba(20,16,40,0.16), inset 0 0 0 2px rgba(255,255,255,0.25); flex: none;
}
.asset-type-preview {
display: flex; gap: 8px; align-items: baseline; font-family: var(--font-display); color: var(--text-primary);
}
.asset-type-preview b { font-size: 1.6rem; font-weight: 800; }
.asset-type-preview i { font-family: var(--font-serif); font-style: italic; font-size: 1.3rem; color: var(--text-secondary); }
.asset-logo-preview {
display: flex; gap: 8px;
}
.asset-logo-preview span {
flex: none; width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center;
font-family: var(--font-display); font-weight: 800; font-size: 0.72rem;
}
.asset-logo-preview span.a1 { background: var(--ink); color: #fff; }
.asset-logo-preview span.a2 { background: var(--accent-dim); color: var(--accent); border: 1px solid var(--card-border); }
.asset-logo-preview span.a3 { background: var(--periwinkle-light); color: var(--ink); }
.asset-voice-preview {
font-family: var(--font-serif); font-style: italic; color: var(--text-primary); font-size: 0.92rem; line-height: 1.4;
border-left: 2px solid var(--accent-dim); padding-left: 12px;
}
.asset-imagery-preview { display: flex; gap: 8px; }
.asset-imagery-preview span {
flex: 1; height: 32px; border-radius: 8px;
}
.asset-imagery-preview span:nth-child(1) { background: linear-gradient(135deg, var(--periwinkle-light), var(--periwinkle)); }
.asset-imagery-preview span:nth-child(2) { background: linear-gradient(135deg, var(--periwinkle), var(--periwinkle-deep)); }
.asset-imagery-preview span:nth-child(3) { background: linear-gradient(135deg, var(--periwinkle-deep), var(--ink)); }
.asset-claims-preview { display: grid; gap: 6px; }
.asset-claims-row { display: flex; align-items: center; gap: 8px; font-size: 0.78rem; color: var(--text-secondary); }
.asset-claims-row svg { width: 14px; height: 14px; color: var(--accent); flex: none; }
/* ---- stacked growth-block diagram (signals building into one score) ----
Each block is a distinct, growing width/depth so the 01->04 hierarchy is
readable at a glance; a lit top edge + darkened flank fake a 3D extrusion. */
.stack-diagram {
position: relative; display: grid; gap: 24px 32px; align-items: center; max-width: 904px; margin: 0 auto;
grid-template-columns: 1fr auto 1fr;
grid-template-areas: "sc1 tower sc2" "sc3 tower sc4";
}
.stack-tower { grid-area: tower; display: flex; flex-direction: column; align-items: center; }
.stack-block {
position: relative; margin-top: -3px; display: flex; align-items: center; padding-left: 22px;
clip-path: polygon(5% 0, 100% 0, 95% 100%, 0 100%);
box-shadow: 0 14px 26px -12px rgba(20,16,40,0.45);
}
.stack-block::before {
content: ''; position: absolute; inset: 0 0 auto 0; height: 34%;
background: linear-gradient(to bottom, rgba(255,255,255,0.4), rgba(255,255,255,0));
}
.stack-block::after {
content: ''; position: absolute; inset: auto 0 0 0; height: 30%;
background: linear-gradient(to top, rgba(0,0,0,0.22), rgba(0,0,0,0));
}
.stack-block-num {
position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center;
width: 32px; height: 32px; border-radius: 50%; background: rgba(0,0,0,0.24); color: #fff;
font-family: var(--font-display); font-weight: 800; font-size: 0.78rem; letter-spacing: 0.02em;
box-shadow: inset 0 0 0 1px rgba(255,255,255,0.3);
}
.stack-block:nth-child(1) { width: 176px; height: 64px; background: linear-gradient(135deg, var(--periwinkle-light), var(--periwinkle) 85%); }
.stack-block:nth-child(2) { width: 232px; height: 64px; background: linear-gradient(135deg, var(--periwinkle), var(--accent) 85%); }
.stack-block:nth-child(3) { width: 288px; height: 64px; background: linear-gradient(135deg, var(--accent), var(--periwinkle-deep) 85%); }
.stack-block:nth-child(4) { width: 344px; height: 64px; background: linear-gradient(135deg, var(--periwinkle-deep), var(--ink) 88%); }
.stack-callout.sc1 { grid-area: sc1; text-align: right; }
.stack-callout.sc2 { grid-area: sc2; }
.stack-callout.sc3 { grid-area: sc3; text-align: right; }
.stack-callout.sc4 { grid-area: sc4; }
.stack-callout-num {
display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px;
border-radius: 50%; background: var(--accent-dim); color: var(--accent); font-size: 0.78rem; font-weight: 800;
margin-bottom: 8px;
}
.stack-callout h3 { font-family: var(--font-display); font-weight: 700; font-size: 1rem; color: var(--text-primary); margin: 0 0 4px; }
.stack-callout p { font-size: 0.86rem; color: var(--text-secondary); line-height: 1.55; margin: 0; }
@media (max-width: 900px) {
.stack-block:nth-child(1) { width: 148px; }
.stack-block:nth-child(2) { width: 194px; }
.stack-block:nth-child(3) { width: 240px; }
.stack-block:nth-child(4) { width: 286px; }
}
@media (max-width: 760px) {
.stack-diagram { grid-template-columns: 1fr; grid-template-areas: "tower" "sc1" "sc2" "sc3" "sc4"; }
.stack-callout.sc1, .stack-callout.sc3 { text-align: left; }
.stack-tower { width: 100%; }
.stack-block:nth-child(1) { width: 58%; }
.stack-block:nth-child(2) { width: 72%; }
.stack-block:nth-child(3) { width: 86%; }
.stack-block:nth-child(4) { width: 100%; }
}
/* ---- winding journey path (numbered stops along an S-curve) ---- */
.journey-path { position: relative; max-width: 640px; margin: 0 auto; }
.journey-path > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; z-index: 0; }
.journey-path > svg path {
fill: none; stroke: var(--accent); stroke-width: 2; stroke-dasharray: 7 7; opacity: 0.45;
animation: ng-flow 2.6s linear infinite;
}
@media (prefers-reduced-motion: reduce) { .journey-path > svg path { animation: none; } }
.journey-stop {
position: relative; z-index: 1; display: grid; grid-template-columns: 64px 1fr; gap: 24px; align-items: center;
margin-bottom: 44px;
}
.journey-stop:last-child { margin-bottom: 0; }
.journey-stop:nth-child(even) { direction: rtl; }
.journey-stop:nth-child(even) > * { direction: ltr; }
.journey-dot {
width: 64px; height: 64px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
background: var(--card-bg); border: 2px solid var(--card-hover-border); color: var(--accent);
font-family: var(--font-display); font-weight: 800; font-size: 1.1rem; box-shadow: var(--card-shadow);
}
.journey-stop h3 { font-family: var(--font-display); font-weight: 700; font-size: 1rem; color: var(--text-primary); margin: 0 0 6px; }
.journey-stop p { font-size: 0.88rem; color: var(--text-secondary); line-height: 1.55; margin: 0; }
@media (max-width: 560px) {
.journey-path > svg { display: none; }
.journey-stop, .journey-stop:nth-child(even) { direction: ltr; grid-template-columns: 52px 1fr; margin-bottom: 28px; }
.journey-dot { width: 56px; height: 56px; font-size: 0.95rem; }
}
/* ---- Transformation split: fragmented old world vs SuperMaya's one
intelligent system. Three spread-out zones - old world, the SuperMaya
hub, and the new world - joined by animated connector wires. ---- */
.transform-shell { max-width: 1160px; margin: 0 auto; }
.transform-split {
display: grid; grid-template-columns: 1fr auto 1fr; gap: 60px; align-items: start;
/* Declared here (not on .transform-hub-zone) so .flow-out — a sibling
branch under .transform-new, not a descendant of .transform-hub-zone
— can also inherit --flow-row. It needs the same value the hub's
centering math and the fan-line SVG paths already assume. */
--transform-header: calc(32px + 21px + 1.6rem * 1.2 + 32px);
--flow-row: 56px;
--flow-gap: 12px;
--flow-count: 6;
--flow-list-h: calc(var(--flow-count) * var(--flow-row) + (var(--flow-count) - 1) * var(--flow-gap));
}
@media (max-width: 900px) { .transform-split { grid-template-columns: 1fr; gap: 16px; } }
.transform-old, .transform-new {
border-radius: 26px; padding: 32px 32px 40px; position: relative;
}
.transform-old { background: #14101f; border: 1px solid rgba(157,150,246,0.25); overflow: hidden; }
.transform-new { background: var(--bg-elevated); border: 1px solid var(--card-border); overflow: visible; }
.transform-label {
font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 10px;
}
.transform-label.old { color: #b7aef0; }
.transform-label.new { color: var(--accent); }
.transform-old h3 { font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: 1.6rem; color: #f0eefc; margin: 0 0 32px; line-height: 1.2; }
.transform-new h3 { font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: 1.6rem; color: var(--text-primary); margin: 0 0 32px; line-height: 1.2; }
.transform-mesh { position: relative; aspect-ratio: 1/0.82; }
.transform-mesh > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.transform-mesh-lines line {
stroke: rgba(157,150,246,0.4); stroke-width: 0.7; stroke-dasharray: 2 2.4;
animation: transform-flow-dash 3.4s linear infinite;
}
.mesh-node {
/* The line endpoints (x%,y%) mark where the icon should sit, not the
midpoint of icon+label - centering the whole stack there (-50%)
drags the icon off-line by half the label's height. Pin the dot's
own center (half its 32px height) to the point instead. */
position: absolute; transform: translate(-50%, -16px); display: flex; flex-direction: column;
align-items: center; gap: 6px; width: 80px; text-align: center;
}
.mesh-node-dot {
width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
background: rgba(255,255,255,0.04); border: 1px solid rgba(157,150,246,0.5); color: #cdc7fb;
transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}
.mesh-node-dot svg { width: 15px; height: 15px; }
.mesh-node span { font-size: 0.68rem; color: #b7aef0; line-height: 1.3; transition: color 0.3s ease; }
.mesh-node.mesh-center .mesh-node-dot { background: rgba(157,150,246,0.16); }
.mesh-node:hover .mesh-node-dot {
background: rgba(157,150,246,0.3); border-color: #cdc7fb; color: #fff;
transform: scale(1.14);
box-shadow: 0 0 0 6px rgba(157,150,246,0.16), 0 0 20px rgba(157,150,246,0.65);
}
.mesh-node:hover span { color: #e7e4fc; }
/* Standalone hub, spread out between the two panels - connected to each
by its own short animated wire rather than being nested in either. */
.transform-hub-zone {
position: relative;
display: flex;
align-items: center;
justify-content: center;
align-self: start;
width: 112px;
height: 112px;
margin-top: calc(var(--transform-header) + var(--flow-list-h) / 2 - 56px);
}
.transform-wire-in {
position: absolute;
right: 100%;
top: 50%;
transform: translateY(-50%);
width: 72px;
height: 24px;
overflow: visible;
pointer-events: none;
z-index: 0;
}
.transform-wire-in path {
fill: none;
stroke: var(--accent);
stroke-width: 2;
opacity: 0.7;
stroke-dasharray: 6 6;
animation: transform-flow-dash 1.6s linear infinite;
}
.transform-fan-lines {
position: absolute;
left: -92px;
top: 0;
width: 92px;
height: 100%;
overflow: visible;
pointer-events: none;
z-index: 2;
}
.transform-fan-lines path {
fill: none;
stroke: var(--accent);
stroke-width: 1.8;
opacity: 0.65;
stroke-dasharray: 6 6;
animation: transform-flow-dash 2s linear infinite;
}
@keyframes transform-flow-dash { to { stroke-dashoffset: -24; } }
.transform-hub {
position: relative; z-index: 1; width: 112px; height: 112px; border-radius: 26px; flex: none;
background: linear-gradient(150deg, var(--periwinkle-light), var(--accent), var(--periwinkle-deep));
display: flex; align-items: center; justify-content: center; text-align: center;
box-shadow: var(--object-glow-strong); color: #fff; font-family: var(--font-display); font-weight: 800;
font-size: 0.74rem; letter-spacing: 0.02em; padding: 6px;
animation: transform-hub-pulse 2.8s ease-in-out infinite;
}
@keyframes transform-hub-pulse {
0%, 100% { box-shadow: var(--object-glow-strong); }
50% { box-shadow: 0 0 0 9px var(--accent-dim), var(--object-glow-strong); }
}
.transform-new { position: relative; }
.flow-out-list { position: relative; z-index: 1; display: grid; gap: 12px; }
/* min-height matches --flow-row (defined on .transform-hub-zone above),
which the fan-line SVG's path coordinates and the hub's vertical
centering both assume as the real row height — without it, rows size
to their content instead and the "tentacles" drift off the icons. */
.flow-out { display: flex; align-items: center; gap: 16px; min-height: var(--flow-row); }
.flow-out-ic {
flex: none; width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
background: var(--accent-dim); color: var(--accent);
transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}
.flow-out-ic svg { width: 18px; height: 18px; }
.flow-out b { display: block; font-family: var(--font-display); font-weight: 700; font-size: 0.9rem; color: var(--text-primary); }
.flow-out small { font-size: 0.76rem; color: var(--text-muted); }
.flow-out:hover .flow-out-ic {
background: var(--accent); color: #fff; transform: scale(1.14);
box-shadow: 0 0 0 6px var(--accent-dim), 0 0 20px var(--accent);
}
@media (prefers-reduced-motion: reduce) {
.transform-mesh-lines line, .transform-in-lines path, .transform-hub, .transform-fan-lines path { animation: none; }
}
@media (max-width: 480px) {
.mesh-node { width: 64px; }
.mesh-node span { font-size: 0.6rem; }
}
@media (max-width: 900px) {
.transform-hub-zone { margin: 16px auto; margin-top: 16px; }
.transform-in-lines, .transform-fan-lines { display: none; }
}
/* ---- interactive stepper (process walkthrough) ---- */
.stepper { display: grid; gap: 32px; grid-template-columns: 1fr; }
@media (min-width: 900px) { .stepper { grid-template-columns: 0.85fr 1.15fr; align-items: stretch; } }
.step-list { display: grid; gap: 8px; }
.step-btn {
position: relative; text-align: left; padding: 16px 24px; border-radius: 16px;
background: var(--card-bg); border: 1px solid var(--card-border); cursor: pointer;
transition: border-color 0.3s ease, background 0.3s ease;
}
.step-btn:hover { border-color: var(--card-hover-border); }
.step-btn.active { border-color: var(--card-hover-border); background: var(--accent-dim); }
.st-t { display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 700; font-size: 1.02rem; color: var(--text-primary); }
.st-n {
display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px;
border-radius: 50%; font-size: 0.8rem; background: var(--bg-inset); color: var(--text-secondary);
transition: background 0.3s ease, color 0.3s ease;
}
.step-btn.active .st-n { background: var(--accent); color: #fff; }
.st-d {
display: block; max-height: 0; overflow: hidden; font-size: 0.88rem; line-height: 1.55;
color: var(--text-secondary); transition: max-height 0.35s ease, margin-top 0.35s ease; margin-top: 0;
}
.step-btn.active .st-d { max-height: 120px; margin-top: 10px; }
.st-bar { display: block; height: 2px; margin-top: 14px; border-radius: 2px; background: var(--border); overflow: hidden; }
.st-bar::before { content: ''; display: block; height: 100%; width: 0%; background: var(--accent); }
.step-btn.active .st-bar::before {
animation: stepper-bar-fill 4.5s linear forwards;
}
.stepper.is-paused .step-btn.active .st-bar::before,
.stepper:hover .step-btn.active .st-bar::before {
animation-play-state: paused;
}
@keyframes stepper-bar-fill {
from { width: 0%; }
to { width: 100%; }
}
.step-stage {
position: relative; border-radius: 20px; padding: 24px; background: var(--card-bg);
border: 1px solid var(--card-border); display: flex; flex-direction: column; justify-content: center;
}
.step-panel {
display: none;
opacity: 0;
transform: translateY(6px);
transition: opacity 0.35s ease, transform 0.35s ease;
}
.step-panel.active {
display: block;
opacity: 1;
transform: translateY(0);
}
.md-title { font-family: var(--font-display); font-weight: 700; font-size: 0.95rem; color: var(--text-primary); margin-bottom: 4px; }
.md-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.md-cell {
border-radius: 12px; background: var(--bg-inset); border: 1px solid var(--border); padding: 16px;
display: flex; flex-direction: column; gap: 4px;
}
.md-cell b { font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; color: var(--text-primary); }
.md-cell span { font-size: 0.76rem; color: var(--text-muted); }
.md-note { font-size: 0.84rem; color: var(--text-muted); line-height: 1.5; }
.flow-tags { display: flex; flex-wrap: wrap; gap: 8px; }
/* storyboard canvas cards (features stepper) */
.storyboard-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
margin-bottom: 14px;
}
.storyboard-card {
position: relative;
aspect-ratio: 3/4;
border-radius: 14px;
padding: 14px 10px 12px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
overflow: hidden;
border: 1px solid var(--card-border);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.storyboard-card::before {
content: "";
position: absolute;
inset: 0;
opacity: 0.9;
pointer-events: none;
}
.storyboard-card-icon {
position: relative;
z-index: 1;
flex: 1;
display: grid;
place-items: center;
color: var(--periwinkle-light);
opacity: 0.75;
}
.storyboard-card-icon svg { width: 24px; height: 24px; }
.storyboard-card-label {
position: relative;
z-index: 1;
font-size: 0.72rem;
font-weight: 600;
line-height: 1.2;
padding: 5px 10px;
border-radius: 999px;
background: rgba(0, 0, 0, 0.22);
border: 1px solid rgba(255, 255, 255, 0.1);
color: var(--text-secondary);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
white-space: nowrap;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
}
.storyboard-card--cinematic::before {
background:
radial-gradient(ellipse 90% 70% at 50% 18%, rgba(143, 176, 236, 0.42), transparent 68%),
linear-gradient(168deg, rgba(74, 99, 196, 0.28) 0%, var(--bg-inset) 52%, var(--bg-muted) 100%);
}
.storyboard-card--ugc::before {
background:
radial-gradient(ellipse 90% 70% at 50% 18%, rgba(169, 149, 220, 0.4), transparent 68%),
linear-gradient(168deg, rgba(125, 123, 240, 0.22) 0%, var(--bg-inset) 52%, var(--bg-muted) 100%);
}
.storyboard-card--drama::before {
background:
radial-gradient(ellipse 90% 70% at 50% 18%, rgba(124, 184, 245, 0.38), transparent 68%),
linear-gradient(168deg, rgba(95, 127, 214, 0.24) 0%, var(--bg-inset) 52%, var(--bg-muted) 100%);
}
.storyboard-card--scene::before {
background:
radial-gradient(ellipse 90% 70% at 50% 18%, rgba(169, 214, 247, 0.36), transparent 68%),
linear-gradient(168deg, rgba(76, 52, 168, 0.2) 0%, var(--bg-inset) 52%, var(--bg-muted) 100%);
}
@media (max-width: 520px) {
.storyboard-grid { grid-template-columns: repeat(2, 1fr); }
}
[data-theme="light"] .storyboard-card-label {
background: rgba(255, 255, 255, 0.72);
border-color: var(--border);
color: var(--text-primary);
}
[data-theme="light"] .storyboard-card {
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65), 0 2px 8px rgba(74, 99, 196, 0.06);
}
/* animated bar rows (used in features / industries / stories) */
.bars2 { display: grid; gap: 16px; }
.bar2 { display: grid; grid-template-columns: 84px 1fr 44px; align-items: center; gap: 16px; }
.bl { font-size: 0.82rem; color: var(--text-secondary); }
.bt { display: block; height: 8px; border-radius: 9999px; background: var(--bg-inset); overflow: hidden; }
.bf { display: block; height: 100%; width: 0; border-radius: 9999px; background: linear-gradient(90deg, var(--periwinkle-light), var(--accent)); transition: width 1s cubic-bezier(0.16,1,0.3,1); }
.bv { font-size: 0.84rem; font-weight: 700; color: var(--text-primary); text-align: right; font-variant-numeric: tabular-nums; }
/* ---- segment tabs (industries) ---- */
.seg-tabs { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 32px; }
.seg-tab {
padding: 8px 24px; border-radius: 9999px; font-size: 0.88rem; font-weight: 600;
color: var(--text-secondary); background: var(--bg-inset); border: 1px solid var(--border);
cursor: pointer; transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.seg-tab:hover { border-color: var(--card-hover-border); }
.seg-tab.active { background: var(--accent); color: #fff; border-color: transparent; }
.seg-panel-wrap { position: relative; }
.seg-panel {
display: none; grid-template-columns: 1fr; gap: 32px;
background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 24px; padding: 32px;
}
.seg-panel.active { display: grid; }
@media (min-width: 800px) { .seg-panel { grid-template-columns: 1fr 1fr; align-items: center; } }
.seg-metric {
font-family: var(--font-display); font-weight: 800; font-size: clamp(2.2rem, 5vw, 3.2rem);
letter-spacing: -0.02em;
background: linear-gradient(120deg, var(--periwinkle-light), var(--accent), var(--periwinkle-deep));
-webkit-background-clip: text; background-clip: text; color: transparent;
}
/* ---- before/after comparison (text/icon based - no imagery required) ---- */
.shift-compare {
max-width: 880px; margin: 0 auto; display: flex; align-items: center; gap: 24px;
}
.shift-card {
flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 14px;
padding: 32px 28px; border-radius: 20px;
background: var(--card-bg); border: 1px solid var(--card-border);
}
.shift-card--accent {
background: var(--accent-dim); border-color: var(--card-hover-border);
box-shadow: 0 0 0 1px rgba(0,0,0,0.02), 0 20px 44px -20px var(--accent-glow);
}
.shift-pill {
padding: 5px 16px; border-radius: 9999px; font-size: 0.72rem; font-weight: 700;
text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-secondary);
background: var(--bg-inset); border: 1px solid var(--card-border);
}
.shift-pill--accent { color: #fff; background: var(--accent); border-color: transparent; }
.shift-icon { width: 30px; height: 30px; color: var(--text-muted); flex: none; }
.shift-icon--accent { color: var(--accent); }
.shift-cap { margin: 0; font-size: 1.15rem; font-weight: 700; line-height: 1.35; color: var(--text-primary); }
.shift-arrow { flex: none; width: 40px; height: 40px; color: var(--text-muted); }
.shift-arrow svg { width: 100%; height: 100%; }
@media (max-width: 700px) {
.shift-compare { flex-direction: column; }
.shift-card { width: 100%; }
.shift-arrow { transform: rotate(90deg); }
}
/* ---- case result chips ---- */
.result-chips { display: grid; gap: 16px; }
.result-chip {
padding: 16px 24px; border-radius: 16px; background: var(--card-bg); border: 1px solid var(--card-border);
font-size: 0.92rem; color: var(--text-secondary); line-height: 1.5;
}
.result-chip em { font-style: normal; font-weight: 700; color: var(--text-primary); }
/* ---- filter pills (case studies / showcase) ---- */
.filter-row { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 40px; }
.filter-btn {
padding: 8px 16px; border-radius: 9999px; font-size: 0.86rem; font-weight: 600;
color: var(--text-secondary); background: var(--bg-inset); border: 1px solid var(--border);
cursor: pointer; transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.filter-btn:hover { border-color: var(--card-hover-border); }
.filter-btn.active { background: var(--accent); color: #fff; border-color: transparent; }
/* ---- case study card grid ---- */
.case-grid { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.case-card { display: flex; flex-direction: column; gap: 16px; }
.case-card .case-logo { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; color: var(--text-primary); }
.case-card .case-tag { font-size: 0.76rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; }
.case-stats { display: flex; gap: 24px; }
.case-stat b {
display: block; font-family: var(--font-display); font-weight: 800; font-size: 1.5rem;
color: var(--accent); letter-spacing: -0.01em;
}
.case-stat span { font-size: 0.76rem; color: var(--text-muted); }
.case-card p.case-summary { font-size: 0.92rem; color: var(--text-secondary); line-height: 1.5; margin: 0; }
.case-card .hero-btn-outline { margin-top: auto; align-self: flex-start; padding: 8px 16px; font-size: 0.86rem; }
/* ---- showcase gallery ---- */
.gallery-grid { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(240px, 300px)); justify-content: center; }
.gallery-card {
position: relative; border-radius: 18px; overflow: hidden; aspect-ratio: 9/16;
background: linear-gradient(155deg, var(--bg-inset), var(--bg-muted)); border: 1px solid var(--card-border);
width: 100%;
}
.gallery-card .gc-body {
position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; padding: 16px;
}
.gallery-card svg { width: 32px; height: 32px; color: var(--text-muted); opacity: 0.6; }
.gallery-card .gc-mid { flex: 1; display: flex; align-items: center; justify-content: center; }
.gallery-card .gc-foot { display: flex; flex-direction: column; gap: 8px; }
.gallery-card .gc-title { font-size: 0.86rem; font-weight: 700; color: #fff; text-shadow: 0 2px 10px rgba(0,0,0,0.4); }
.gallery-card .gc-cta {
display: inline-flex; align-items: center; gap: 6px; font-size: 0.76rem; font-weight: 700;
color: #fff; opacity: 0; transform: translateY(6px);
transition: opacity 0.3s ease, transform 0.3s ease;
}
.gallery-card:hover .gc-cta { opacity: 1; transform: translateY(0); }
.gallery-card::after {
content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(10,8,24,0.72), transparent 55%);
pointer-events: none;
}
.gallery-card[hidden] { display: none; }
/* ---- trust & security cards ---- */
.trust-grid { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.trust-card { display: flex; flex-direction: column; gap: 8px; }
.trust-card .pg-ic { background: var(--accent-dim); }
.cert-row { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; }
.cert-badge {
display: flex; align-items: center; gap: 8px; padding: 16px 24px; border-radius: 16px;
background: var(--card-bg); border: 1px solid var(--card-border); font-size: 0.86rem; font-weight: 600; color: var(--text-secondary);
}
.cert-badge svg { width: 20px; height: 20px; color: var(--accent); flex: none; }
.cert-badge.pending { opacity: 0.6; }
.cert-badge .cert-status { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); }
/* ---- inner-page footer ---- */
.pg-footer { padding: 56px 24px 32px; background: var(--footer-bg); border-top: 1px solid var(--border); }
.pg-footer-shell { max-width: 1120px; margin: 0 auto; }
.pg-footer-top {
display: flex; flex-wrap: wrap; gap: 24px; justify-content: space-between; align-items: flex-start;
padding-bottom: 28px; border-bottom: 1px solid var(--border);
}
.fbrand {
font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; color: var(--text-primary);
display: flex; flex-direction: column; gap: 6px;
}
.fbrand small { font-family: 'Geist', sans-serif; font-weight: 400; font-size: 0.82rem; color: var(--text-muted); }
.pg-footer-top nav { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.pg-footer-top nav a { font-size: 0.9rem; color: var(--text-secondary); text-decoration: none; transition: color 0.2s ease; }
.pg-footer-top nav a:hover { color: var(--accent); }
.pg-footer-bottom {
display: flex; flex-wrap: wrap; gap: 8px; justify-content: space-between;
padding-top: 22px; font-size: 0.8rem; color: var(--text-muted);
}
@media (max-width: 640px) { .pg-footer-top { flex-direction: column; } }
/* ---- ROI calculator (pricing page) ---- */
.roi {
display: grid; gap: 32px; grid-template-columns: 1fr; align-items: center;
background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 24px;
padding: 40px 32px; max-width: 920px; margin: 0 auto;
}
@media (min-width: 800px) { .roi { grid-template-columns: 1fr 1fr; } }
.roi input[type="range"] {
width: 100%; margin-top: 14px; accent-color: var(--accent); height: 6px;
}
.roi-label { display: flex; align-items: baseline; justify-content: space-between; }
.roi-label b { font-family: var(--font-display); font-weight: 800; font-size: 1.6rem; color: var(--accent); }
.roi-out { display: grid; gap: 16px; }
.roi-stat {
display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
padding: 16px 16px; border-radius: 14px; background: var(--bg-inset);
}
.roi-stat b { font-family: var(--font-display); font-weight: 800; font-size: 1.2rem; color: var(--text-primary); white-space: nowrap; }
.roi-stat span { font-size: 0.82rem; color: var(--text-muted); text-align: right; }
/* nav: 5 top-level items (Product/Solutions carry dropdowns) */
@media (min-width: 1060px) { .nav-glass { padding: 0 48px; } }
.nav-menu { gap: 24px; }
.nav-link { font-size: 0.95rem; }
/* dropdown trigger chevron */
.nav-link.has-drop { display: inline-flex; align-items: center; gap: 5px; }
.nav-link.has-drop svg { width: 11px; height: 11px; transition: transform 0.25s ease; opacity: 0.75; }
.nav-link.has-drop[aria-expanded="true"] svg { transform: rotate(180deg); }
/* ---- Mega menu dropdown (Product / Solutions) ---- */
.mega-menu {
position: absolute;
left: 0; right: 0; top: 100%;
margin-top: 12px;
display: flex;
justify-content: center;
opacity: 0;
visibility: hidden;
transform: translateY(-8px);
transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s;
pointer-events: none;
z-index: 40;
}
.site-header.mega-open .mega-menu { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; }
.mega-panel {
display: none;
/* Positioned (not flex-centered) so JS can place it directly under
whichever trigger is hovered — see positionPanel() in site.js. */
position: absolute;
top: 0;
left: 0;
grid-template-columns: repeat(2, minmax(190px, 1fr));
gap: 8px;
background: var(--glass-bg-strong);
border: 1px solid var(--glass-border-outer);
border-radius: 20px;
box-shadow: var(--glass-shadow);
backdrop-filter: blur(28px) saturate(180%);
-webkit-backdrop-filter: blur(28px) saturate(180%);
padding: 22px;
max-width: 500px;
width: 92vw;
}
.mega-panel.active { display: grid; }
.mega-col-label {
font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
color: var(--nav-text-muted); padding: 6px 16px 8px;
}
.mega-link {
display: flex; flex-direction: column; gap: 2px; padding: 8px 16px; border-radius: 12px;
text-decoration: none;
}
.mega-link b { font-size: 0.88rem; font-weight: 600; color: var(--nav-text); }
.mega-link span { font-size: 0.76rem; color: var(--nav-text-muted); line-height: 1.4; }
@media (max-width: 1059px) { .mega-menu { display: none !important; } }
/* ---- RTL (Arabic): flip the structural chrome and let the browser's
bidi algorithm handle in-copy text direction everywhere else. This is
a best-effort mirror of navigation/layout, not a pixel-for-pixel
mirror of every bespoke diagram. ---- */
html[dir="rtl"] body { text-align: right; }
html[dir="rtl"] .nav-menu,
html[dir="rtl"] .nav-actions,
html[dir="rtl"] .cta-row,
html[dir="rtl"] .hero-btn-outline,
html[dir="rtl"] .mobile-menu-card,
html[dir="rtl"] .pg-footer-top,
html[dir="rtl"] .pg-footer-bottom,
html[dir="rtl"] .pg-footer-top nav,
html[dir="rtl"] .footer-lang { direction: rtl; }
html[dir="rtl"] .lang-menu { right: auto; left: 0; }
html[dir="rtl"] .lang-option,
html[dir="rtl"] .mobile-link,
html[dir="rtl"] .mega-link { text-align: right; }
html[dir="rtl"] .nav-link.has-drop svg,
html[dir="rtl"] .mobile-link svg { transform: scaleX(-1); }
html[dir="rtl"] .btn-arrow svg,
html[dir="rtl"] .btn-primary .btn-arrow { transform: scaleX(-1); }
html[dir="rtl"] .section-eyebrow,
html[dir="rtl"] .section-title,
html[dir="rtl"] .section-lead,
html[dir="rtl"] .page-hero-shell,
html[dir="rtl"] .pg-head { text-align: center; }
html[dir="rtl"] .fbrand { text-align: right; }
/* ---- Solutions Mega-Dropdown: Un-clickable "Coming Soon" State ---- */
.mega-panel[data-panel="solutions"] .mega-link,
.mega-panel[data-panel="solutions"] a,
.mega-panel[data-panel="solutions"] button {
cursor: default !important;
opacity: 0.85;
}
/* ---- Brand Favicon Library Styling ---- */
.brand-favicon {
display: inline-block;
vertical-align: middle;
flex-shrink: 0;
width: 1.1em;
height: 1.1em;
}
img.brand-favicon {
object-fit: contain;
}
.pg-ic img.brand-favicon {
width: 22px;
height: 22px;
}
.mega-link {
text-align: left;
}
.mega-link b {
display: inline-flex !important;
align-items: center !important;
gap: 8px;
text-align: left !important;
}