/* ============================================================
DESIGN TOKENS — values mirror perspective.co
============================================================ */
:root {
/* Page surfaces */
--bg: #0A0A0A;
--bg-soft: #111111;
/* Text */
--text: #FFFFFF;
--text-muted: rgba(255, 255, 255, 0.62);
--text-subtle: rgba(255, 255, 255, 0.45);
/* Primary accent */
--accent: #EA653F;
--accent-hover: #F2764F;
--accent-soft: rgba(234, 101, 63, 0.12);
/* Legacy aliases — kept so older rules keep working */
--blue: var(--accent);
--blue-hover: var(--accent-hover);
--blue-soft: var(--accent-soft);
/* Neutrals */
--border: rgba(255, 255, 255, 0.08);
--border-strong:rgba(255, 255, 255, 0.14);
/* Typography — Inter, same weights perspective.co uses */
--font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
/* Type scale calibrated to perspective.co's live values
H1 72px / 79.2 / -0.01em, section H2 56px / 67.2, small H2 32px / 40,
body 16px / 22.4 (1.4) */
--text-display: clamp(44px, 6.5vw, 72px);
--text-h2: clamp(28px, 5vw, 56px);
--text-h3: clamp(24px, 2.4vw, 32px);
--text-body-xl: 20px;
--text-body-lg: 18px;
--text-body: 16px;
--text-body-sm: 14px;
--text-caption: 13px;
--leading-tight: 1.1;
--leading-snug: 1.2;
--leading-normal: 1.4;
--leading-relaxed:1.5;
--tracking-tight: -0.035em; /* matches -0.72px / 72px and -0.56 / 56px */
--tracking-normal: 0;
/* Spacing (4pt grid) */
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-8: 32px;
--space-10: 40px;
--space-12: 48px;
--space-16: 64px;
--space-20: 80px;
--space-24: 96px;
--space-32: 128px;
/* Radii — perspective.co uses 8px nav buttons, 12px hero CTAs */
--radius-sm: 6px;
--radius-md: 8px;
--radius-lg: 12px;
--radius-xl: 20px;
/* Shadows — matches the subtle CTA shadow on perspective.co */
--shadow-btn: 0 0 1px 0 rgba(0,0,0,0.08), 0 1px 4px 0 rgba(0,0,0,0.12);
--shadow-md: 0 8px 24px rgba(20, 20, 20, 0.06);
--shadow-lg: 0 24px 60px rgba(20, 20, 20, 0.10);
/* Motion */
--ease: cubic-bezier(0.19, 1, 0.22, 1);
--duration-fast: 150ms;
--duration-normal: 250ms;
/* Layout */
--container: 1240px;
--nav-height: 64px;
}
/* ============================================================
RESET & BASE
============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
font-size: 16px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
scroll-behavior: smooth;
scroll-padding-top: var(--nav-height);
overflow-x: hidden;
}
body {
font-family: var(--font-sans);
font-size: var(--text-body);
line-height: var(--leading-normal);
color: var(--text);
background: var(--bg);
overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
/* Accessibility — skip-to-content link, only visible on keyboard focus */
.skip-link {
position: absolute;
top: -100px;
left: 16px;
z-index: 100;
padding: 10px 16px;
background: #000;
color: #fff;
border-radius: 8px;
font-size: 14px;
font-weight: 600;
transition: top 150ms ease;
}
.skip-link:focus { top: 16px; outline: 2px solid var(--accent); outline-offset: 2px; }
button { font: inherit; background: none; border: none; cursor: pointer; color: inherit; }
img, svg { display: block; max-width: 100%; }
:focus-visible {
outline: 2px solid var(--blue);
outline-offset: 3px;
border-radius: 4px;
}
.container {
width: 100%;
max-width: var(--container);
margin: 0 auto;
padding: 0 var(--space-6);
}
@media (max-width: 720px) {
.container { padding: 0 var(--space-4); }
.br-desktop { display: none; }
}
.br-mobile { display: none; }
@media (max-width: 720px) {
.br-mobile { display: inline; }
}
/* ============================================================
BUTTONS — mirror perspective.co CTA treatments
============================================================ */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
font-family: inherit;
font-size: var(--text-body-sm);
font-weight: 600;
line-height: 1;
letter-spacing: var(--tracking-normal);
white-space: nowrap;
cursor: pointer;
text-decoration: none;
border: 0;
border-radius: var(--radius-md);
padding: 8px 14px;
height: 36px;
box-shadow: var(--shadow-btn);
transition:
background var(--duration-fast) ease,
color var(--duration-fast) ease,
box-shadow var(--duration-normal) var(--ease),
transform 120ms var(--ease),
opacity var(--duration-fast) ease;
}
@media (hover: hover) and (pointer: fine) {
.btn:active { transform: scale(0.98); transition-duration: 60ms; }
}
/* Primary — solid blue (perspective.co "Try for free") */
.btn-primary {
background: var(--blue);
color: #fff;
}
.btn-primary:hover { background: var(--blue-hover); box-shadow: 0 0 1px 0 rgba(0,0,0,.1), 0 2px 8px 0 rgba(234,101,63,0.35); }
/* Secondary — dark surface with light text (dark-mode counterpart) */
.btn-secondary {
background: #1A1A1A;
color: var(--text);
border: 1px solid rgba(255, 255, 255, 0.08);
}
.btn-secondary:hover { background: #242424; border-color: rgba(255, 255, 255, 0.14); }
/* Ghost — plain gray text, used for Login / Talk to sales */
.btn-ghost {
background: transparent;
color: var(--text-muted);
box-shadow: none;
}
.btn-ghost:hover { color: var(--text); background: rgba(255,255,255,0.06); }
/* Medium — hero CTAs */
.btn-md {
font-size: var(--text-body);
padding: 12px 20px;
height: 46px;
border-radius: var(--radius-md);
}
/* Hero-sized CTA — larger type and padding, 12px radius */
.btn-lg {
font-size: var(--text-body-xl);
padding: 16px 32px;
height: 64px;
border-radius: var(--radius-lg);
}
/* ============================================================
NAV — 74px, sticky, transparent
============================================================ */
.nav {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 50;
height: var(--nav-height);
display: flex;
align-items: center;
background: rgba(10, 10, 10, 0.72);
backdrop-filter: saturate(180%) blur(14px);
-webkit-backdrop-filter: saturate(180%) blur(14px);
border-bottom: 1px solid var(--border);
transform: translateY(-100%);
opacity: 0;
pointer-events: none;
transition: transform var(--duration-normal) var(--ease),
opacity var(--duration-normal) ease;
}
.nav.scrolled {
transform: translateY(0);
opacity: 1;
pointer-events: auto;
}
@media (prefers-reduced-motion: reduce) {
.nav { transition: opacity var(--duration-fast) ease; transform: none; }
}
.nav-inner {
width: 100%;
max-width: var(--container);
margin: 0 auto;
padding: 0 var(--space-6);
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-6);
position: relative;
}
.nav-brand {
display: inline-flex;
align-items: center;
gap: 10px;
font-weight: 700;
font-size: 18px;
letter-spacing: -0.01em;
color: var(--text);
flex-shrink: 0;
}
.nav-logo {
width: 32px;
height: 32px;
display: block;
border-radius: 8px;
}
.nav-menu {
display: flex;
align-items: center;
gap: var(--space-1);
list-style: none;
}
.nav-menu > li > a,
.nav-menu > li > button {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
font-size: var(--text-caption);
font-weight: 500;
color: var(--text);
border-radius: var(--radius-md);
transition: background var(--duration-fast) ease, color var(--duration-fast) ease;
}
.nav-menu > li > a:hover,
.nav-menu > li > button:hover {
background: rgba(255,255,255,0.06);
}
.nav-caret {
color: var(--text-muted);
}
.nav-caret svg { width: 14px; height: 14px; }
/* Default sizing for Lucide icons inside buttons */
.btn [data-lucide],
.btn svg.lucide {
width: 1em;
height: 1em;
}
/* Tighten right padding when the icon trails the label */
.btn-icon-trailing {
padding-right: 12px;
}
/* Nudge right padding larger when the icon leads the label */
.btn-icon-leading {
padding-right: 24px;
}
.nav-actions {
display: flex;
align-items: center;
gap: var(--space-2);
flex-shrink: 0;
}
.nav-toggle {
display: none;
width: 42px;
height: 42px;
align-items: center;
justify-content: center;
border-radius: var(--radius-md);
color: var(--text);
}
.nav-toggle:hover { background: rgba(255,255,255,0.06); }
@media (max-width: 1024px) {
.nav-menu { display: none; }
}
@media (max-width: 720px) {
.nav-actions .btn-ghost { display: none; }
.nav-toggle { display: inline-flex; }
.nav-inner { padding: 0 var(--space-4); gap: var(--space-3); }
}
/* ============================================================
HERO
============================================================ */
.hero {
position: relative;
padding: var(--space-4) 0 0;
text-align: center;
background: var(--bg);
overflow: clip;
isolation: isolate;
display: flex;
flex-direction: column;
}
/* Desktop / tablet — pin the hero to the viewport so the next section
scrolls up over it. Mobile keeps the hero in normal flow. */
@media (min-width: 721px) {
.hero {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 100vh;
height: 100dvh;
z-index: 0;
}
}
@media (max-width: 720px) {
.hero-darken { display: none; }
}
/* Desktop+ — everything after the fixed hero needs to start below the
viewport so it scrolls *over* the hero rather than starting at the top
of the page. Mobile reads top-down normally so we skip the offset. */
@media (min-width: 721px) {
.hero ~ * { position: relative; z-index: 1; }
.hero + section {
/* Leave a small peek of the dark card visible at the bottom of the
initial viewport, hinting that there is more below. */
margin-top: calc(100vh - 56px);
margin-top: calc(100dvh - 56px);
}
}
/* On shorter viewports the peek would overlap the logo bar too much,
so reduce how much of the dark card pokes above the fold. */
@media (min-width: 721px) and (max-height: 820px) {
.hero + section {
margin-top: calc(100vh - 28px);
margin-top: calc(100dvh - 28px);
}
}
/* Dark overlay on the hero — opacity is driven by JS scroll position
so the hero darkens as the next section scrolls over it. */
.hero-darken {
position: absolute;
inset: 0;
background: #000;
opacity: 0;
pointer-events: none;
z-index: 5; /* above hero content + glows, below nav */
will-change: opacity;
}
.hero > .container {
width: 100%;
flex: 1 0 auto;
display: flex;
align-items: flex-start;
justify-content: center;
padding-top: 0;
}
.hero > .hero-logos {
width: 100%;
flex: 0 0 auto;
margin-top: var(--space-8);
/* Bottom padding keeps logos above the dark card peek. */
padding: 0 0 var(--space-24);
}
.hero > .hero-logos .logos-caption { margin-bottom: var(--space-4); }
/* On shorter viewports, drop the logo bar closer to the bottom edge to
give the hero content above more breathing room. */
@media (max-height: 820px) {
.hero > .hero-logos { padding-bottom: var(--space-10); }
}
@media (min-width: 721px) {
.hero { padding-top: var(--space-12); }
}
/* Soft animated glow — peeks out behind the hero visual */
.hero::before {
content: "";
position: absolute;
left: 50%;
top: 58%;
width: min(1400px, 110%);
aspect-ratio: 1 / 1;
transform: translate(-50%, -50%);
pointer-events: none;
z-index: -1;
filter: blur(90px);
background:
radial-gradient(circle at 35% 40%, rgba(255, 200, 110, 0.20), transparent 60%),
radial-gradient(circle at 70% 60%, rgba(234, 101, 63, 0.12), transparent 65%),
radial-gradient(circle at 50% 80%, rgba(255, 225, 140, 0.14), transparent 65%);
opacity: 0;
animation:
heroGlowDrift 24s linear infinite,
heroFlareIn 1400ms cubic-bezier(0.19, 1, 0.22, 1) 200ms forwards;
will-change: transform, opacity;
}
/* Side blooms — blue left / purple right, flanking the warm center glow */
.hero::after {
content: "";
position: absolute;
left: 50%;
top: 58%;
width: min(1700px, 120%);
height: 520px;
transform: translate(-50%, -50%);
pointer-events: none;
z-index: -2;
filter: blur(90px);
background:
radial-gradient(circle at 15% 50%, rgba(79, 125, 243, 0.18), transparent 22%),
radial-gradient(circle at 85% 50%, rgba(155, 109, 255, 0.18), transparent 22%);
opacity: 0;
animation:
heroSideDrift 28s linear infinite,
heroFlareIn 1600ms cubic-bezier(0.19, 1, 0.22, 1) 350ms forwards;
will-change: transform, opacity;
}
@keyframes heroFlareIn {
from { opacity: 0; }
to { opacity: 1; }
}
/* Staggered fade-up for hero content — extended out into the logo bar
so the section-logos elements complete the loading cascade. */
.hero .hero-eyebrow,
.hero .hero-title,
.hero .hero-subtitle,
.hero .hero-ctas,
.hero .hero-login,
.hero .hero-trust,
.hero .hero-graphic,
.hero .hero-connect,
.section-logos .logos-caption,
.section-logos .logos-marquee {
opacity: 0;
animation: heroFadeUp 900ms cubic-bezier(0.19, 1, 0.22, 1) forwards;
}
.hero .hero-graphic { animation-delay: 1000ms; }
.hero .hero-connect { animation-delay: 1200ms; }
.hero .hero-eyebrow { animation-delay: 1450ms; }
.hero .hero-title { animation-delay: 1600ms; }
.hero .hero-subtitle { animation-delay: 1750ms; }
.hero .hero-ctas { animation-delay: 1900ms; }
.hero .hero-login { animation-delay: 2050ms; }
.section-logos .logos-caption { animation-delay: 2200ms; }
.section-logos .logos-marquee { animation-delay: 2350ms; }
.hero .hero-trust { animation-delay: 2500ms; }
/* Pull the login line closer to the CTAs — cancels the hero-inner gap
(--space-6 = 24px) and adds back --space-3 (12px) for a tight pairing. */
.hero .hero-ctas + .hero-login {
margin-top: calc(var(--space-6) * -1 + var(--space-3));
}
@keyframes heroFadeUp {
from { opacity: 0; transform: translateY(14px); }
to { opacity: 1; transform: translateY(0); }
}
/* Respect reduced motion — no intro, just show everything */
@media (prefers-reduced-motion: reduce) {
.hero::before,
.hero::after,
.hero .hero-eyebrow,
.hero .hero-title,
.hero .hero-subtitle,
.hero .hero-ctas,
.hero .hero-login,
.hero .hero-trust,
.hero .hero-graphic,
.hero .hero-connect,
.section-logos .logos-caption,
.section-logos .logos-marquee {
opacity: 1;
animation: none;
}
}
@keyframes heroSideDrift {
0% { transform: translate(-50%, -50%) scale(1); }
25% { transform: translate(-50%, -52%) scale(1.03); }
50% { transform: translate(-50%, -48%) scale(1.01); }
75% { transform: translate(-50%, -51%) scale(1.04); }
100% { transform: translate(-50%, -50%) scale(1); }
}
@media (min-width: 721px) {
.hero::before { top: 0; }
.hero::after { top: 0; }
}
@keyframes heroGlowDrift {
0% { transform: translate(-50%, -50%) scale(1) rotate(0deg); }
20% { transform: translate(-47%, -52%) scale(1.05) rotate(72deg); }
40% { transform: translate(-52%, -53%) scale(1.02) rotate(144deg); }
60% { transform: translate(-53%, -48%) scale(1.06) rotate(216deg); }
80% { transform: translate(-48%, -47%) scale(1.03) rotate(288deg); }
100% { transform: translate(-50%, -50%) scale(1) rotate(360deg); }
}
.hero-inner {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-4);
}
/* Tighten only the gap between the eyebrow and the headline */
.hero-eyebrow + .hero-title {
margin-top: calc(var(--space-6) * -1 + var(--space-4));
}
.hero-graphic {
width: 100%;
max-width: 760px;
height: auto;
margin: -110px auto 0;
display: block;
}
@media (min-width: 721px) {
.hero-graphic { margin-top: -240px; }
}
/* On standard laptop sizes (~1440x900), shrink the graphic a bit so the
rest of the hero content can shift up into view. */
@media (min-width: 721px) and (max-height: 920px) {
.hero-graphic {
max-width: 600px;
margin-top: -180px;
}
}
/* On shorter laptops (~1024x768), push the graphic up further so there's
more headroom for the rest of the hero content. */
@media (min-width: 721px) and (max-height: 820px) {
.hero-graphic {
max-width: 540px;
margin-top: -200px;
}
}
/* On narrow viewports, let the image bleed past the container so it's
intentionally clipped a bit on the left and right. */
@media (max-width: 720px) {
.hero-graphic {
width: calc(100% + var(--space-12));
max-width: none;
margin-left: calc(var(--space-12) * -0.5);
margin-right: calc(var(--space-12) * -0.5);
}
}
.hero-app-icon {
width: 56px;
height: 56px;
display: block;
margin: 0 auto var(--space-2);
}
/* Dual-icon MCP connection — Claude ↔ Perspective, wrapped in a macOS-style dock */
.hero-connect {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
padding: 8px 12px;
margin: calc(-35px - var(--space-6)) auto var(--space-2);
position: relative;
z-index: 1;
background: rgba(40, 40, 40, 0.55);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 22px;
backdrop-filter: blur(20px) saturate(160%);
-webkit-backdrop-filter: blur(20px) saturate(160%);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.08),
0 10px 30px rgba(0, 0, 0, 0.35);
}
.hero-connect-icon {
width: 52px;
height: 52px;
display: block;
border-radius: 14px;
}
@media (min-width: 721px) {
.hero-connect {
margin-top: calc(-65px - var(--space-6));
margin-bottom: var(--space-8);
}
}
/* Dock reused outside the hero (e.g. sitting on the CTA card's top edge) */
.cta-connect {
position: relative;
z-index: 2;
margin: 0 auto -35px;
}
@media (min-width: 721px) {
.cta-connect { margin: 0 auto -35px; }
}
.hero-connect-link {
position: relative;
width: 20px;
height: 20px;
display: flex;
align-items: center;
justify-content: center;
color: rgba(255, 255, 255, 0.62);
flex-shrink: 0;
}
.hero-connect-link::before,
.hero-connect-link::after {
content: "";
position: absolute;
background: currentColor;
border-radius: 2px;
}
.hero-connect-link::before {
width: 14px;
height: 2px;
}
.hero-connect-link::after {
width: 2px;
height: 14px;
}
@keyframes heroConnectFlow {
0% { left: -30%; opacity: 0; }
15% { opacity: 1; }
85% { opacity: 1; }
100% { left: 100%; opacity: 0; }
}
@media (max-width: 520px) {
.hero-connect { gap: var(--space-2); }
.hero-connect-icon { width: 52px; height: 52px; border-radius: 14px; }
.hero-connect-link { width: 18px; height: 18px; }
.hero-connect-link::before { width: 12px; }
.hero-connect-link::after { height: 12px; }
}
.hero-eyebrow {
font-size: var(--text-body-lg);
font-weight: 600;
color: var(--text);
letter-spacing: var(--tracking-tight);
}
@media (min-width: 721px) {
.hero-eyebrow { font-size: 28px; }
}
.hero-title {
font-size: var(--text-display);
font-weight: 700;
line-height: var(--leading-tight);
letter-spacing: var(--tracking-tight);
color: var(--text);
max-width: 20ch;
margin: 0 auto;
text-wrap: balance;
}
@media (max-width: 720px) {
.hero-title { font-size: 36px; }
}
/* On tall viewports (e.g. external monitors, 1080+ resolutions), let the
headline grow further so the hero doesn't feel empty at the bottom. */
@media (min-width: 721px) and (min-height: 980px) {
.hero-title { font-size: clamp(72px, 6.8vw, 96px); }
.hero-graphic {
max-width: 880px;
/* Extra space between graphic and the eyebrow below it */
margin-bottom: var(--space-8);
}
/* More breathing room between eyebrow → headline → subtitle */
.hero-eyebrow + .hero-title { margin-top: var(--space-3); }
.hero-title + .hero-subtitle,
.hero-subtitle { margin-top: var(--space-3); }
}
.hero-subtitle {
font-size: var(--text-body);
line-height: 1.55;
color: rgba(255, 255, 255, 0.62);
max-width: 60ch;
margin: 0 auto;
}
@media (max-width: 720px) {
.hero-subtitle { max-width: 32ch; }
/* Stack the hero CTAs vertically, each full-width */
.hero .hero-ctas {
flex-direction: column;
align-items: stretch;
width: 100%;
max-width: 300px;
gap: var(--space-3);
}
.hero .hero-ctas .btn {
width: 100%;
justify-content: center;
}
}
.hero-ctas {
display: flex;
align-items: center;
gap: var(--space-3);
flex-wrap: wrap;
justify-content: center;
margin-top: var(--space-4);
}
.hero-trust {
display: flex;
align-items: center;
gap: var(--space-6);
margin-top: var(--space-3);
font-size: var(--text-body-sm);
color: var(--text-muted);
flex-wrap: wrap;
justify-content: center;
}
.hero-trust-item { display: inline-flex; align-items: center; gap: 6px; }
.hero-trust-item strong { color: var(--text); font-weight: 600; }
.hero-trust-stars { color: #F5A623; letter-spacing: 1px; }
.hero-trust-divider { width: 1px; height: 14px; background: var(--border-strong); }
/* Product mockup placeholder — rounded rectangle, subtle shadow, light surface.
Swap the inner .hero-mockup-label for 
*/
.hero-mockup {
position: relative;
width: 100%;
max-width: 1120px;
margin: var(--space-10) auto 0;
aspect-ratio: 16 / 9;
border-radius: var(--radius-xl);
background: linear-gradient(180deg, #141414 0%, #0F0F0F 100%);
border: 1px solid var(--border);
box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.hero-mockup::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(circle at 15% 20%, rgba(234,101,63,0.06), transparent 45%),
radial-gradient(circle at 85% 80%, rgba(234,101,63,0.05), transparent 45%);
pointer-events: none;
}
.hero-mockup-label {
position: relative;
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: 10px 18px;
background: rgba(255, 255, 255, 0.04);
border: 1px dashed var(--border-strong);
border-radius: 9999px;
font-size: var(--text-caption);
font-weight: 500;
color: var(--text-muted);
}
@media (max-width: 720px) {
.hero { padding: var(--space-8) 0 var(--space-16); }
.hero-mockup { margin-top: var(--space-10); border-radius: var(--radius-lg); }
}
/* ============================================================
SECTIONS — generic shell, reused across the page
============================================================ */
.section {
padding: var(--space-24) 0;
}
.section-head {
max-width: 760px;
margin: 0 auto;
text-align: center;
}
.section-workflow .section-head {
max-width: 980px;
}
.section-eyebrow {
font-size: var(--text-body-sm);
font-weight: 600;
color: var(--accent);
letter-spacing: 0.01em;
margin: 0 0 var(--space-3);
}
.section-title {
font-size: var(--text-h2);
font-weight: 700;
line-height: var(--leading-snug);
letter-spacing: var(--tracking-tight);
color: var(--text);
text-wrap: pretty;
}
.section-subtitle {
margin-top: var(--space-4);
font-size: 16px;
line-height: var(--leading-relaxed);
color: var(--text-muted);
}
@media (max-width: 720px) {
.section { padding: var(--space-16) 0; }
}
/* Workflow section — ALWAYS dark, regardless of body theme.
Re-binds the theme tokens locally so all child elements
(eyebrows, titles, subtitles, etc.) render in dark mode. */
.section-workflow-intro {
padding-top: 240px;
padding-bottom: 160px;
background: var(--bg);
}
@media (max-width: 720px) {
.section-workflow-intro {
padding-top: 120px;
padding-bottom: 100px;
}
}
.section-workflow-intro .section-eyebrow {
font-size: var(--text-body-lg);
color: var(--accent);
letter-spacing: var(--tracking-tight);
}
@media (min-width: 721px) {
.section-workflow-intro .section-eyebrow { font-size: 28px; }
}
.section-workflow-intro .section-head {
max-width: 1100px;
text-align: left;
margin: 0;
}
.section-workflow-intro .section-title {
font-size: var(--text-display);
line-height: var(--leading-tight);
/* Start words light, darken as they scroll into view */
color: rgba(15, 15, 15, 0.18);
}
.section-workflow-intro .section-title .word {
transition: color 350ms cubic-bezier(0.19, 1, 0.22, 1);
}
.section-workflow-intro .section-title .word.is-revealed {
color: var(--text);
}
@media (prefers-reduced-motion: reduce) {
.section-workflow-intro .section-title { color: var(--text); }
.section-workflow-intro .section-title .word { transition: none; }
}
.section-workflow-intro .section-title-followup {
margin-top: var(--space-10);
}
.section-workflow-intro .section-eyebrow + .section-title {
margin-top: var(--space-4);
}
/* Five-step workflow indicator */
.workflow-steps {
display: flex;
align-items: flex-start;
justify-content: center;
gap: var(--space-3);
list-style: none;
margin: var(--space-12) auto 0;
padding: 0;
max-width: 760px;
}
.workflow-step {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-3);
flex: 0 0 auto;
}
.workflow-step-circle {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 50%;
border: 1px solid rgba(15, 15, 15, 0.16);
background: transparent;
color: var(--text);
font-size: 14px;
font-weight: 600;
}
.workflow-step-label {
font-size: 13px;
font-weight: 500;
color: var(--text-muted);
letter-spacing: 0;
white-space: nowrap;
}
.workflow-step-divider {
flex: 1 1 auto;
height: 1px;
background: rgba(15, 15, 15, 0.14);
margin-top: 18px;
max-width: 80px;
}
@media (max-width: 720px) {
.workflow-steps {
gap: var(--space-2);
}
.workflow-step-circle { width: 32px; height: 32px; font-size: 13px; }
.workflow-step-label { font-size: 12px; }
.workflow-step-divider { max-width: 24px; margin-top: 16px; }
}
.section-workflow {
--text: #FFFFFF;
--text-muted: rgba(255, 255, 255, 0.62);
--text-subtle: rgba(255, 255, 255, 0.45);
--border: rgba(255, 255, 255, 0.08);
--border-strong: rgba(255, 255, 255, 0.14);
padding-top: 110px;
padding-bottom: 220px;
background: #000000;
color: var(--text);
}
@media (max-width: 720px) {
.section-workflow { padding-top: 64px; padding-bottom: 100px; }
}
.section-workflow {
/* Card-style framing — slight side breathing room + rounded edges */
margin-left: var(--space-4);
margin-right: var(--space-4);
border-radius: var(--radius-lg, 24px);
box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25);
overflow: hidden;
}
@media (min-width: 721px) {
.section-workflow {
margin-left: var(--space-6);
margin-right: var(--space-6);
border-radius: 28px;
}
}
/* Emph inside the dark subtitle — pop white against the muted body text */
.section-workflow .section-subtitle .emph { color: var(--text); }
/* Grey base branch lines were near-black for light mode; flip to near-white */
.section-workflow .stack-branches-base path {
stroke: rgba(255, 255, 255, 0.18);
}
/* Beam base layer (under the moving gradient) — same flip */
.section-workflow .stack-beam-line {
background-color: rgba(255, 255, 255, 0.18);
}
/* Card hover background — was a hint of black on white; flip to white on black */
.section-workflow .constellation-card:hover,
.section-workflow .constellation-card:focus-within {
background-color: rgba(255, 255, 255, 0.06);
}
/* Caption below the wrapper — fades in after the wrapper + cards land */
.section-workflow .stack-caption {
max-width: 1100px;
margin: var(--space-12) auto 0;
text-align: center;
opacity: 0;
transform: translateY(8px);
transition:
opacity 500ms var(--ease-out-expo, cubic-bezier(0.19, 1, 0.22, 1)) 1700ms,
transform 500ms var(--ease-out-expo, cubic-bezier(0.19, 1, 0.22, 1)) 1700ms;
}
.section-workflow:has(.stack.is-visible) .stack-caption {
opacity: 1;
transform: translateY(0);
}
/* On smaller laptops the caption gets too wide and reads as a banner —
tighten the column so it stays a comfortable reading width. */
@media (min-width: 721px) and (max-width: 1080px) {
.section-workflow .stack-caption { max-width: 760px; }
}
/* Match the hero subtitle's narrower column on mobile. */
@media (max-width: 720px) {
.section-workflow .stack-caption { max-width: 32ch; }
/* Match the hero CTAs: stack vertically, capped at 300px wide. */
.section-workflow .stack-ctas {
flex-direction: column;
align-items: stretch;
width: 100%;
max-width: 300px;
margin-left: auto;
margin-right: auto;
gap: var(--space-3);
}
.section-workflow .stack-ctas .btn {
width: 100%;
justify-content: center;
}
}
/* CTAs below caption — fade in after caption */
.section-workflow .stack-ctas {
margin-top: var(--space-8);
opacity: 0;
transform: translateY(8px);
transition:
opacity 500ms var(--ease-out-expo, cubic-bezier(0.19, 1, 0.22, 1)) 2000ms,
transform 500ms var(--ease-out-expo, cubic-bezier(0.19, 1, 0.22, 1)) 2000ms;
}
.section-workflow:has(.stack.is-visible) .stack-ctas {
opacity: 1;
transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
.section-workflow .stack-caption,
.section-workflow .stack-ctas { opacity: 1; transform: none; transition: none; }
}
/* Wrapper glass — dark frosted card on dark surface */
.section-workflow .stack-box {
background: rgba(255, 255, 255, 0.06);
border-color: rgba(255, 255, 255, 0.12);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.10),
0 22px 50px rgba(0, 0, 0, 0.35);
}
/* Soft rainbow glow that fades in on hover (sits behind cards, halos the box) */
.section-workflow .stack-box::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
background: conic-gradient(
from 0deg at 50% 50%,
rgba(255, 138, 76, 0.55),
rgba(251, 191, 36, 0.55),
rgba(93, 214, 198, 0.55),
rgba(79, 125, 243, 0.55),
rgba(155, 109, 255, 0.55),
rgba(255, 122, 182, 0.55),
rgba(255, 138, 76, 0.55)
);
filter: blur(40px);
opacity: 0;
pointer-events: none;
z-index: 0;
transition: opacity 600ms ease;
will-change: opacity, transform;
}
.section-workflow .stack-box:hover::before {
opacity: 0.45;
animation: stackRainbow 10s linear infinite;
}
@keyframes stackRainbow {
from { filter: blur(40px) hue-rotate(0deg); }
to { filter: blur(40px) hue-rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
.section-workflow .stack-box:hover::before { animation: none; }
}
/* ============================================================
APP NAV — Perspective platform icons
============================================================ */
.app-nav-stack {
display: flex;
flex-direction: column;
align-items: stretch;
width: fit-content;
max-width: 100%;
margin: var(--space-12) auto var(--space-4);
}
.app-nav-connector {
align-self: center;
width: 0;
height: 36px;
border-left: 1.5px dashed rgba(255, 255, 255, 0.28);
margin: 0 auto;
}
.claude-chat-wrap {
width: 100%;
display: flex;
justify-content: center;
margin-bottom: -120px;
position: relative;
z-index: 0;
pointer-events: none;
}
.app-nav-stack > .app-nav-wrap {
position: relative;
z-index: 1;
}
.claude-chat-frame {
position: relative;
width: 95%;
max-width: 640px;
display: block;
}
.claude-chat-img {
display: block;
width: 100%;
height: auto;
border-radius: 16px;
border: 1px solid rgba(15, 15, 15, 0.08);
box-shadow:
0 1px 2px rgba(15, 15, 15, 0.06),
0 12px 32px rgba(15, 15, 15, 0.12),
0 32px 80px rgba(15, 15, 15, 0.10);
}
body:not(.theme-light) .claude-chat-img {
border-color: rgba(255, 255, 255, 0.08);
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.30),
0 12px 32px rgba(0, 0, 0, 0.40),
0 32px 80px rgba(0, 0, 0, 0.35);
}
.claude-chat-badge {
position: absolute;
top: -18px;
left: -18px;
width: 64px;
height: 64px;
display: block;
filter: drop-shadow(0 8px 18px rgba(15, 15, 15, 0.22));
pointer-events: none;
}
body.theme-light .app-nav-connector {
border-left-color: rgba(15, 15, 15, 0.22);
}
.app-nav-icon-img {
width: 64px;
height: 64px;
display: block;
}
.app-nav {
position: relative;
display: inline-flex;
flex-wrap: wrap;
justify-content: center;
align-items: flex-start;
gap: var(--space-10);
max-width: 100%;
margin: 0 auto;
padding: var(--space-4) var(--space-10);
background: rgba(40, 40, 40, 0.55);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 32px;
backdrop-filter: blur(20px) saturate(160%);
-webkit-backdrop-filter: blur(20px) saturate(160%);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.08),
0 18px 50px rgba(0, 0, 0, 0.30);
}
/* ============================================================
CONSTELLATION — Claude in the center, capabilities around it
============================================================ */
/* Stack layout: Claude on top → animated beam → wide box (2 rows × 7 cols) */
.stack-wrap {
position: relative;
width: 100%;
padding: 0 var(--space-6);
margin: var(--space-12) 0 var(--space-4);
box-sizing: border-box;
}
.stack {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
max-width: 1200px;
margin: 0 auto;
isolation: isolate;
}
/* ---- Claude on top ---- */
.stack-claude {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-2);
z-index: 3;
opacity: 0;
transform: translateY(-12px);
transition:
opacity 500ms var(--ease-out-expo, cubic-bezier(0.19, 1, 0.22, 1)),
transform 500ms var(--ease-out-expo, cubic-bezier(0.19, 1, 0.22, 1));
}
.stack.is-visible .stack-claude {
opacity: 1;
transform: translateY(0);
}
.stack-claude-icon {
width: 84px;
height: 84px;
display: block;
position: relative;
z-index: 1;
}
.stack-claude-label {
font-size: 18px;
font-weight: 700;
color: var(--text);
letter-spacing: var(--tracking-tight);
position: relative;
z-index: 1;
}
.stack-claude-glow {
position: absolute;
top: -20px;
left: 50%;
width: 220px;
height: 220px;
transform: translateX(-50%);
background: radial-gradient(
circle at center,
rgba(255, 138, 76, 0.45) 0%,
rgba(255, 138, 76, 0.15) 35%,
transparent 70%
);
filter: blur(8px);
pointer-events: none;
z-index: 0;
opacity: 0;
animation: stackClaudeGlow 4s ease-in-out infinite;
}
.stack.is-visible .stack-claude-glow {
opacity: 1;
}
@keyframes stackClaudeGlow {
0%, 100% { transform: translateX(-50%) scale(0.95); opacity: 0.7; }
50% { transform: translateX(-50%) scale(1.05); opacity: 1; }
}
/* ---- Beam from Claude to box ---- */
.stack-beam {
position: relative;
width: 2px;
height: 80px;
margin: 4px 0 -4px;
z-index: 2;
}
.stack-beam-line {
position: absolute;
inset: 0;
background:
linear-gradient(
180deg,
transparent 0%,
rgba(255, 138, 76, 0.0) 10%,
rgba(255, 138, 76, 0.95) 30%,
rgba(155, 109, 255, 0.95) 55%,
rgba(79, 125, 243, 0.95) 75%,
rgba(79, 125, 243, 0.0) 90%,
transparent 100%
) 0 -120% / 100% 220% no-repeat,
rgba(15, 15, 15, 0.14);
border-radius: 999px;
transform-origin: top center;
transform: scaleY(0);
transition: transform 500ms var(--ease-out-expo, cubic-bezier(0.19, 1, 0.22, 1)) 200ms;
}
.stack.is-visible .stack-beam-line {
transform: scaleY(1);
animation: stackBeamFlow 2.6s linear infinite;
animation-delay: 500ms;
}
@keyframes stackBeamFlow {
from { background-position: 0 220%; }
to { background-position: 0 -120%; }
}
@media (prefers-reduced-motion: reduce) {
.stack.is-visible .stack-beam-line { animation: none; background-position: 0 50%; }
}
.stack-beam-pulse {
position: absolute;
left: 50%;
top: 0;
width: 10px;
height: 10px;
margin-left: -5px;
border-radius: 50%;
background: radial-gradient(
circle,
#fff 0%,
rgba(255, 200, 140, 0.95) 35%,
rgba(155, 109, 255, 0.0) 75%
);
box-shadow:
0 0 12px rgba(255, 200, 140, 0.9),
0 0 24px rgba(155, 109, 255, 0.7);
opacity: 0;
will-change: transform, opacity;
}
.stack.is-visible .stack-beam-pulse {
animation: stackBeamPulseRun 2.6s linear infinite;
animation-delay: var(--delay, 0s);
}
@keyframes stackBeamPulseRun {
0% { transform: translateY(-6px) scale(0.6); opacity: 0; }
15% { opacity: 1; }
85% { opacity: 1; }
100% { transform: translateY(80px) scale(1.2); opacity: 0; }
}
/* ---- Wide box with capability cards (2 rows × 7 cols) ---- */
.stack-box {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: repeat(7, minmax(0, 1fr));
grid-template-rows: repeat(2, 1fr);
column-gap: var(--space-3);
row-gap: var(--space-6);
padding: 40px var(--space-6) 32px;
width: 100%;
max-width: 1200px;
margin: 63px auto 0;
box-sizing: border-box;
align-items: center;
justify-items: stretch;
background: rgba(255, 255, 255, 0.5);
border: 1px solid rgba(255, 255, 255, 0.65);
border-radius: 28px;
backdrop-filter: blur(20px) saturate(160%);
-webkit-backdrop-filter: blur(20px) saturate(160%);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.7),
0 22px 50px rgba(15, 15, 15, 0.10);
opacity: 0;
transform: translateY(20px) scale(0.985);
transition:
opacity 500ms var(--ease-out-expo, cubic-bezier(0.19, 1, 0.22, 1)) 800ms,
transform 600ms var(--ease-out-expo, cubic-bezier(0.19, 1, 0.22, 1)) 800ms;
}
.stack.is-visible .stack-box {
opacity: 1;
transform: translateY(0) scale(1);
}
/* Branching connector lines (SVG above box, behind perspective icon) */
.stack-branches {
position: absolute;
top: -143px;
left: 0;
right: 0;
width: 100%;
height: 143px;
pointer-events: none;
z-index: 0;
overflow: visible;
}
/* Base grey lines — fade in last (after box) */
.stack-branches-base path {
fill: none;
stroke: rgba(15, 15, 15, 0.14);
stroke-width: 1.5;
stroke-linecap: round;
opacity: 0;
transition: opacity 400ms ease 1500ms;
}
.stack.is-visible .stack-branches-base path {
opacity: 1;
}
/* Colored tracers — flow along each branch toward Claude */
.stack-branches-tracer path {
fill: none;
stroke: var(--tracer-color, #9B6DFF);
stroke-width: 1.5;
stroke-linecap: round;
stroke-dasharray: 14 286; /* 14 dash + 286 gap = 300 pattern, on pathLength 100 */
stroke-dashoffset: 0;
opacity: 0;
filter: drop-shadow(0 0 3px var(--tracer-color, #9B6DFF));
transition: opacity 400ms ease 1600ms;
}
.stack.is-visible .stack-branches-tracer path {
opacity: 0.55;
animation: branchFlow 3.6s linear infinite;
animation-delay: var(--delay, 0s);
}
@keyframes branchFlow {
from { stroke-dashoffset: 0; }
to { stroke-dashoffset: -300; }
}
@media (prefers-reduced-motion: reduce) {
.stack-branches-tracer path { animation: none; opacity: 0; }
}
/* Perspective at end of beam — absolutely positioned at top of wrapper, overlapping by 1/4 */
.stack-perspective {
position: absolute;
top: -63px;
left: 50%;
display: flex;
align-items: center;
justify-content: center;
z-index: 4;
opacity: 0;
transform: translateX(-50%) translateY(-8px) scale(0.85);
transform-origin: center center;
transition:
opacity 400ms var(--ease-out-expo, cubic-bezier(0.19, 1, 0.22, 1)) 550ms,
transform 450ms var(--ease-out-expo, cubic-bezier(0.19, 1, 0.22, 1)) 550ms;
}
.stack.is-visible .stack-perspective {
opacity: 1;
transform: translateX(-50%) translateY(0) scale(1);
}
.stack-perspective-icon {
width: 84px;
height: 84px;
display: block;
filter: drop-shadow(0 10px 22px rgba(15, 15, 15, 0.18));
}
@media (prefers-reduced-motion: reduce) {
.stack-perspective { opacity: 1; transform: translateX(-50%); transition: none; }
}
/* Subtle horizontal flow lines behind cards */
.stack-flow {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
overflow: hidden;
border-radius: 28px;
}
.stack-flow-line {
position: absolute;
top: var(--top, 50%);
left: 0;
width: var(--w, 140px);
height: 1.5px;
background: linear-gradient(
90deg,
transparent 0%,
var(--hue, #4F7DF3) 50%,
transparent 100%
);
opacity: 0.45;
filter: blur(0.3px) drop-shadow(0 0 6px var(--hue, #4F7DF3));
animation: stackFlow 6s linear infinite;
animation-delay: var(--delay, 0s);
will-change: transform, left;
}
@keyframes stackFlow {
0% { left: 0; transform: translateX(-100%); opacity: 0; }
10% { opacity: 0.45; }
90% { opacity: 0.45; }
100% { left: 100%; transform: translateX(0); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
.stack-flow-line,
.stack-beam-pulse,
.stack-claude-glow { animation: none; }
.stack-claude,
.stack-box { opacity: 1; transform: none; transition: none; }
.stack-beam-line { transform: scaleY(1); transition: none; }
}
.constellation-card {
--card-color: var(--brand-blue, #4F7DF3);
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
gap: var(--space-3);
padding: var(--space-3);
background: transparent;
border: 0;
border-radius: 14px;
box-shadow: none;
height: 100%;
width: 100%;
box-sizing: border-box;
cursor: default;
transition: background-color 200ms ease;
}
.constellation-card:hover,
.constellation-card:focus-within {
z-index: 20;
background-color: rgba(15, 15, 15, 0.045);
}
/* Hover tooltip — always above the card */
.constellation-tooltip {
position: absolute;
left: 50%;
bottom: calc(100% + 10px);
transform: translateX(-50%) translateY(4px);
width: max-content;
max-width: 220px;
padding: 10px 12px;
background: rgba(15, 15, 15, 0.94);
color: #fff;
font-size: 12px;
font-weight: 500;
line-height: 1.45;
letter-spacing: 0;
text-align: center;
border-radius: 10px;
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.06) inset,
0 12px 28px rgba(0, 0, 0, 0.22);
opacity: 0;
pointer-events: none;
z-index: 10;
transition:
opacity 180ms ease,
transform 180ms var(--ease-out-expo, cubic-bezier(0.19, 1, 0.22, 1));
}
/* Downward-pointing arrow */
.constellation-tooltip::before {
content: "";
position: absolute;
left: 50%;
top: 100%;
transform: translateX(-50%);
border: 5px solid transparent;
border-top-color: rgba(15, 15, 15, 0.94);
}
.constellation-card:hover .constellation-tooltip,
.constellation-card:focus-within .constellation-tooltip {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
@media (prefers-reduced-motion: reduce) {
.constellation-tooltip { transition: opacity 100ms ease; transform: translateX(-50%); }
}
.constellation-icon-wrap {
width: 36px;
height: 36px;
flex: 0 0 auto;
border-radius: 8px;
background: var(--card-color);
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
}
.constellation-icon-wrap svg {
width: 20px;
height: 20px;
}
.constellation-label {
font-size: 14px;
font-weight: 600;
color: var(--text);
letter-spacing: var(--tracking-tight);
}
.constellation-soon {
display: block;
margin-top: 2px;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text-subtle);
}
/* Card stagger entrance */
.stack-box .constellation-card {
opacity: 0;
transform: translateY(10px) scale(0.96);
transition:
opacity 380ms var(--ease-out-expo, cubic-bezier(0.19, 1, 0.22, 1)),
transform 380ms var(--ease-out-expo, cubic-bezier(0.19, 1, 0.22, 1));
}
.stack.is-visible .stack-box .constellation-card {
opacity: 1;
transform: translateY(0) scale(1);
}
.stack-box .constellation-card:nth-child(2) { transition-delay: 1000ms; }
.stack-box .constellation-card:nth-child(3) { transition-delay: 1055ms; }
.stack-box .constellation-card:nth-child(4) { transition-delay: 1110ms; }
.stack-box .constellation-card:nth-child(5) { transition-delay: 1165ms; }
.stack-box .constellation-card:nth-child(6) { transition-delay: 1220ms; }
.stack-box .constellation-card:nth-child(7) { transition-delay: 1275ms; }
.stack-box .constellation-card:nth-child(8) { transition-delay: 1330ms; }
.stack-box .constellation-card:nth-child(9) { transition-delay: 1110ms; }
.stack-box .constellation-card:nth-child(10) { transition-delay: 1165ms; }
.stack-box .constellation-card:nth-child(11) { transition-delay: 1220ms; }
.stack-box .constellation-card:nth-child(12) { transition-delay: 1275ms; }
.stack-box .constellation-card:nth-child(13) { transition-delay: 1330ms; }
.stack-box .constellation-card:nth-child(14) { transition-delay: 1385ms; }
.stack-box .constellation-card:nth-child(15) { transition-delay: 1440ms; }
@media (prefers-reduced-motion: reduce) {
.stack-box .constellation-card {
opacity: 1;
transform: none;
transition: none;
}
}
/* Compact desktop / small laptop (~1024px) — keep 7 columns × 2 rows
but shrink icons/labels so everything still fits. */
@media (min-width: 721px) and (max-width: 1080px) {
.stack-box {
grid-template-columns: repeat(7, minmax(0, 1fr));
grid-template-rows: repeat(2, 1fr);
column-gap: var(--space-2);
row-gap: var(--space-4);
padding: 28px var(--space-4) 24px;
}
.stack-box .constellation-card {
gap: 10px;
padding: var(--space-2);
}
.stack-box .constellation-icon-wrap {
width: 28px;
height: 28px;
border-radius: 7px;
}
.stack-box .constellation-icon-wrap svg {
width: 16px;
height: 16px;
}
.stack-box .constellation-label {
font-size: 11px;
line-height: 1.25;
}
.stack-box .constellation-soon { font-size: 9px; }
}
/* Tablet (small phones in landscape too) — drop to 4 columns, 4 rows */
@media (max-width: 720px) {
.stack-box {
grid-template-columns: repeat(4, minmax(0, 1fr));
grid-template-rows: repeat(4, 1fr);
}
}
/* Mobile — 3 columns × 5 rows, smaller cards */
@media (max-width: 640px) {
.stack-wrap {
padding: 0 var(--space-4);
}
.stack-box {
grid-template-columns: repeat(3, minmax(0, 1fr));
grid-template-rows: repeat(5, 1fr);
column-gap: var(--space-2);
row-gap: var(--space-4);
padding: var(--space-6) var(--space-3);
}
.stack-box .constellation-card {
gap: 8px;
padding: var(--space-2) 2px;
}
.stack-box .constellation-icon-wrap {
width: 26px;
height: 26px;
border-radius: 6px;
}
.stack-box .constellation-icon-wrap svg {
width: 14px;
height: 14px;
}
.stack-box .constellation-label {
font-size: 10px;
line-height: 1.2;
}
.stack-box .constellation-soon { font-size: 8px; }
.stack-claude-icon {
width: 64px;
height: 64px;
}
}
.app-nav-wrap {
display: flex;
justify-content: center;
width: 100%;
}
.app-nav-item {
--app-color: var(--text);
flex: 0 1 auto;
min-width: 110px;
max-width: 200px;
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-4);
padding: var(--space-6) var(--space-4);
border-radius: 24px;
text-align: center;
}
.app-nav-icon-wrap {
position: relative;
width: 64px;
height: 64px;
display: flex;
align-items: center;
justify-content: center;
}
.app-nav-icon-bg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
color: var(--app-color);
}
.app-nav-icon {
position: relative;
width: 32px;
height: 32px;
color: #fff;
}
.app-nav-label {
font-size: 16px;
font-weight: 600;
color: var(--text);
letter-spacing: var(--tracking-tight);
}
@media (max-width: 720px) {
.app-nav {
gap: 0;
padding: var(--space-2) var(--space-3);
border-radius: 28px;
}
.app-nav-item {
min-width: 33.333%;
max-width: 33.333%;
padding: var(--space-4) var(--space-2);
gap: var(--space-3);
}
.app-nav-icon-wrap {
width: 56px;
height: 56px;
}
.app-nav-icon {
width: 28px;
height: 28px;
}
.app-nav-label {
font-size: 14px;
}
}
/* ============================================================
LOGO MARQUEE
============================================================ */
.section-logos {
padding: var(--space-6) 0 var(--space-12);
}
.logos-caption {
text-align: center;
font-size: var(--text-body-sm);
font-weight: 500;
color: var(--text-muted);
margin: 0 0 var(--space-8);
}
.logos-marquee {
position: relative;
display: flex;
gap: var(--space-12);
width: 100%;
max-width: 1200px;
margin: 0 auto;
overflow: hidden;
/* Fade the edges so logos don't snap on and off */
mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.logos-track {
display: flex;
flex: 0 0 auto;
align-items: center;
gap: var(--space-12);
margin: 0;
padding: 0 var(--space-6) 0 0;
list-style: none;
animation: logo-marquee 42s linear infinite;
}
.logos-track > li {
flex: 0 0 auto;
display: flex;
align-items: center;
}
.logos-track img {
height: 40px;
width: auto;
max-width: none;
object-fit: contain;
opacity: 0.7;
filter: grayscale(100%);
transition: opacity 180ms ease, filter 180ms ease;
}
.logos-track img:hover {
opacity: 1;
filter: grayscale(0);
}
@keyframes logo-marquee {
from { transform: translateX(0); }
to { transform: translateX(calc(-100% - var(--space-12))); }
}
.logos-marquee:hover .logos-track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
.logos-track { animation: none; }
}
@media (max-width: 720px) {
.logos-track { gap: var(--space-8); }
.logos-track img { height: 32px; }
}
/* ============================================================
SLIDER
============================================================ */
.slider {
margin-top: var(--space-12);
position: relative;
}
.slider-track {
display: flex;
gap: var(--space-4);
padding: 0 max(var(--space-6), calc((100vw - var(--container) + var(--space-6) * 2) / 2));
margin: 0;
list-style: none;
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x mandatory;
scroll-padding-left: max(var(--space-6), calc((100vw - var(--container) + var(--space-6) * 2) / 2));
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.slider-track::-webkit-scrollbar { display: none; }
.slide {
flex: 0 0 auto;
width: min(1080px, 78vw);
aspect-ratio: 16 / 10;
position: relative;
border-radius: var(--radius-xl);
overflow: hidden;
scroll-snap-align: start;
background: #1A1A1A;
}
.slide-media {
position: absolute;
inset: 0;
background: transparent;
}
.slide-media img,
.slide-media video {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.slide-title {
position: absolute;
left: var(--space-6);
right: var(--space-6);
bottom: var(--space-5);
margin: 0;
color: var(--text);
font-size: 16px;
font-weight: 600;
line-height: 1.4;
letter-spacing: var(--tracking-tight);
z-index: 1;
text-wrap: pretty;
}
.slide-title-soft {
display: block;
margin-top: var(--space-3);
font-weight: 400;
color: rgba(255, 255, 255, 0.62);
}
.slide-step {
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: 9999px;
background: rgba(255, 255, 255, 0.16);
color: #fff;
font-size: 14px;
font-weight: 600;
letter-spacing: 0;
margin-bottom: var(--space-6);
flex: 0 0 auto;
align-self: flex-start;
}
body.theme-light .slide-step {
background: rgba(15, 15, 15, 0.08);
color: var(--text);
}
@media (min-width: 721px) {
.slide {
display: flex;
align-items: stretch;
}
.slide-media {
position: relative;
inset: auto;
flex: 1 1 58%;
order: 2;
}
.slide-title {
position: relative;
left: auto;
right: auto;
bottom: auto;
order: 1;
flex: 1 1 42%;
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: var(--space-10) var(--space-8);
margin: 0;
max-width: none;
font-size: clamp(28px, 2.4vw, 36px);
line-height: 1.2;
letter-spacing: var(--tracking-tight);
}
.slide-title .slide-title-soft {
font-size: 18px;
line-height: 1.45;
margin-top: var(--space-4);
}
.slide:nth-child(3) .slide-title { max-width: none; }
}
/* Controls row — pagination + play/pause, both in a dark pill */
.slider-controls {
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-3);
margin-top: var(--space-6);
}
.slider-dots {
display: inline-flex;
align-items: center;
gap: 10px;
height: 40px;
padding: 0 18px;
background: #1A1A1A;
border-radius: 9999px;
}
.slider-dot {
width: 8px;
height: 8px;
border-radius: 9999px;
background: rgba(255, 255, 255, 0.22);
border: 0;
padding: 0;
cursor: pointer;
transition: background 180ms ease, width 280ms var(--ease);
}
.slider-dot[aria-selected="true"] {
background: var(--text);
width: 28px;
}
.slider-play {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 9999px;
background: #1A1A1A;
color: var(--text);
cursor: pointer;
transition: background 180ms ease;
}
.slider-play:hover { background: #242424; }
.slider-play [data-lucide],
.slider-play svg.lucide { width: 16px; height: 16px; }
/* Render Lucide play/pause as filled glyphs */
.slider-play svg.lucide,
.slider-play svg.lucide * {
fill: currentColor;
stroke: currentColor;
}
@media (max-width: 720px) {
.slider-track {
padding: 0 var(--space-4);
scroll-padding-left: var(--space-4);
}
.slide {
width: 82vw;
aspect-ratio: 3 / 4;
}
}
/* ============================================================
INFRASTRUCTURE SECTION (dark)
============================================================ */
.section-infra {
background: #0A0A0A;
color: #fff;
}
.section-infra .section-head {
max-width: 900px;
text-align: left;
margin: 0;
}
/* Eyebrow row: number circle + label.
Starts collapsed (just the circle), expands to reveal the label
once the section scrolls into view. */
.section-eyebrow:has(.section-step) {
display: inline-flex;
align-items: center;
gap: 0;
margin: 0 0 var(--space-5);
padding: 0;
background: transparent;
color: var(--accent);
line-height: 1;
font-size: 15px;
transition: gap 500ms var(--ease-out-expo, cubic-bezier(0.19, 1, 0.22, 1));
}
.section-step {
display: inline-flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
border-radius: 50%;
background: var(--accent);
color: #FFFFFF;
font-size: 12px;
font-weight: 600;
flex-shrink: 0;
}
.section-step-label {
display: inline-block;
max-width: 0;
opacity: 0;
white-space: nowrap;
overflow: hidden;
/* Give descenders (g, y) room — line-height 1 was clipping them. */
line-height: 1.3;
padding-block: 2px;
transform: translateX(-4px);
transition:
max-width 600ms var(--ease-out-expo, cubic-bezier(0.19, 1, 0.22, 1)),
opacity 400ms ease 150ms,
transform 500ms var(--ease-out-expo, cubic-bezier(0.19, 1, 0.22, 1)) 100ms;
}
/* Expanded state — added via JS when section scrolls into view */
.section-head.is-revealed .section-eyebrow:has(.section-step) {
gap: 10px;
}
.section-head.is-revealed .section-step-label {
max-width: 260px;
opacity: 1;
transform: translateX(0);
}
@media (prefers-reduced-motion: reduce) {
.section-eyebrow:has(.section-step),
.section-step-label {
transition: none;
}
.section-eyebrow:has(.section-step) { gap: 10px; }
.section-step-label { max-width: 260px; opacity: 1; transform: none; }
}
.section-infra .section-eyebrow { color: rgba(255, 255, 255, 0.55); }
.section-infra .section-title { color: #fff; }
.section-infra .section-subtitle { color: rgba(255, 255, 255, 0.55); }
.section-infra .section-subtitle .emph {
color: #fff;
font-weight: 500;
}
/* Prompt block — sits under each step's subtitle */
.prompt-block {
position: relative;
margin-top: var(--space-6);
padding: var(--space-5) var(--space-6);
background: #131313;
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: var(--radius-md);
text-align: left;
}
.prompt-block .prompt-label {
display: inline-block;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--accent);
margin-bottom: var(--space-2);
}
.prompt-block .prompt-text {
margin: 0;
font-size: 15px;
line-height: 1.55;
color: rgba(255, 255, 255, 0.88);
text-wrap: pretty;
padding-right: 80px;
}
.prompt-block .prompt-copy {
position: absolute;
top: var(--space-4);
right: var(--space-4);
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 10px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: var(--radius-sm, 8px);
color: rgba(255, 255, 255, 0.7);
font-size: 12px;
font-weight: 500;
cursor: pointer;
transition: background var(--duration-fast) ease, color var(--duration-fast) ease, border-color var(--duration-fast) ease;
}
.prompt-block .prompt-copy:hover {
background: rgba(255, 255, 255, 0.08);
color: #fff;
}
.prompt-block .prompt-copy [data-lucide],
.prompt-block .prompt-copy svg.lucide { width: 14px; height: 14px; }
.prompt-block .prompt-copy.is-copied {
color: #3E8C6A;
border-color: rgba(62, 140, 106, 0.4);
}
@media (max-width: 720px) {
.prompt-block { padding: var(--space-4) var(--space-5); }
.prompt-block .prompt-text { font-size: 14px; padding-right: 0; padding-top: var(--space-7); }
.prompt-block .prompt-copy { top: var(--space-3); right: var(--space-3); }
}
/* prompt-block keeps its dark styling everywhere — it's the "Claude chat input" motif.
No light-theme override needed because all current prompt-block instances sit inside
.section-infra, which stays dark even on theme-light. */
.infra-slider {
position: relative;
margin-top: var(--space-12);
}
.infra-track {
display: flex;
gap: var(--space-4);
padding: 0 max(var(--space-6), calc((100vw - var(--container) + var(--space-6) * 2) / 2));
margin: 0;
list-style: none;
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x mandatory;
scroll-padding-left: max(var(--space-6), calc((100vw - var(--container) + var(--space-6) * 2) / 2));
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.infra-track::-webkit-scrollbar { display: none; }
.infra-slide {
flex: 0 0 auto;
width: min(360px, 78vw);
scroll-snap-align: start;
display: flex;
flex-direction: column;
gap: var(--space-5);
}
.infra-card {
aspect-ratio: 1 / 1;
border-radius: var(--radius-xl);
background: #1A1A1A;
position: relative;
overflow: hidden;
}
.infra-card img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.infra-caption {
margin: 0;
font-size: 16px;
line-height: 1.5;
color: rgba(255, 255, 255, 0.55);
padding: 0 var(--space-2);
}
.infra-caption-title {
color: #fff;
font-weight: 600;
}
.infra-controls {
display: flex;
justify-content: flex-start;
gap: var(--space-3);
max-width: var(--container);
margin: var(--space-8) auto 0;
padding: 0 var(--space-6);
}
.infra-nav {
width: 44px;
height: 44px;
border-radius: 9999px;
background: rgba(255, 255, 255, 0.08);
color: #fff;
border: 0;
padding: 0;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: background var(--duration-fast) ease;
}
.infra-nav:hover { background: rgba(255, 255, 255, 0.16); }
.infra-nav:disabled { opacity: 0.3; cursor: default; }
.infra-nav [data-lucide],
.infra-nav svg.lucide { width: 20px; height: 20px; }
@media (max-width: 720px) {
.infra-track {
padding: 0 var(--space-4);
scroll-padding-left: var(--space-4);
}
.infra-slide { width: 82vw; }
.infra-controls { padding: 0 var(--space-4); }
}
/* ============================================================
RESULTS
============================================================ */
#reporting { padding-bottom: var(--space-24); }
.section-results {
background: transparent;
/* Card framing — scrolls up over the sticky story below */
position: relative;
z-index: 2;
margin: 0 var(--space-4) 120px;
padding-top: 140px;
border-radius: 28px;
overflow: hidden;
box-shadow: 0 -24px 60px rgba(0, 0, 0, 0.18);
}
@media (min-width: 721px) {
.section-results {
margin: 0 var(--space-6) 160px;
}
}
@media (max-width: 720px) {
.section-results {
padding-top: 80px;
margin-bottom: 80px;
}
}
.section-results .section-head {
text-align: center;
margin: 0 auto;
max-width: 1200px;
}
.section-results .section-head .section-subtitle {
max-width: 720px;
margin-left: auto;
margin-right: auto;
}
.section-results .section-title .emph { color: var(--accent); }
.results-grid {
list-style: none;
margin: var(--space-16) 0 0;
padding: 0;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--space-6);
}
.result-card {
padding: var(--space-8) var(--space-6);
border-radius: var(--radius-lg, 20px);
border: 1px solid rgba(15, 15, 15, 0.08);
background: #FFFFFF;
box-shadow: var(--shadow-sm);
text-align: left;
}
.result-kpi {
margin: 0;
font-size: clamp(40px, 5vw, 56px);
font-weight: 700;
letter-spacing: var(--tracking-tight);
line-height: 1;
color: var(--accent);
}
.result-label {
margin: var(--space-3) 0 var(--space-2);
font-size: 18px;
font-weight: 600;
color: var(--text);
}
.result-copy {
margin: 0;
font-size: 15px;
line-height: var(--leading-relaxed);
color: var(--text-muted);
}
@media (max-width: 960px) {
.results-grid { grid-template-columns: 1fr; }
}
/* Story section eyebrow & title — match the workflow-intro scale */
.story-body .section-eyebrow {
font-size: var(--text-body-lg);
letter-spacing: var(--tracking-tight);
}
@media (min-width: 721px) {
.story-body .section-eyebrow { font-size: 28px; }
}
.story-body .section-title {
font-size: var(--text-display);
line-height: var(--leading-tight);
}
.story-body .section-eyebrow + .section-title {
margin-top: var(--space-4);
}
/* Story-variant of the result cards — translucent glass on darkened photo */
.story-results {
margin-top: var(--space-10);
max-width: 1100px;
width: 100%;
}
.story-results .result-card {
background: rgba(255, 255, 255, 0.08);
border-color: rgba(255, 255, 255, 0.14);
backdrop-filter: blur(14px) saturate(140%);
-webkit-backdrop-filter: blur(14px) saturate(140%);
box-shadow: none;
}
.story-results .result-kpi { color: #FFFFFF; }
.story-results .result-label { color: #FFFFFF; }
.story-results .result-copy { color: rgba(255, 255, 255, 0.72); }
/* ============================================================
CUSTOMER STORY — copy sits ON the photo, uniform dark overlay
============================================================ */
/* Story + pricing scroll stack — story pins, pricing card scrolls over */
.story-pricing-stack {
position: relative;
z-index: 1; /* keep both above the fixed hero */
}
.section-story {
position: sticky;
top: 0;
min-height: 100vh;
padding: 160px 0;
background: #0A0A0A;
overflow: hidden;
isolation: isolate;
display: flex;
align-items: center;
}
@media (max-width: 720px) {
.section-story { padding: 100px 0; }
}
.section-story .container { width: 100%; }
.story-media {
position: absolute;
inset: 0;
z-index: 0;
overflow: hidden;
}
.story-media img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.story-media::after {
content: "";
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.75);
pointer-events: none;
}
.section-story .container {
position: relative;
z-index: 1;
}
.story {
padding: var(--space-12) 0;
}
.story-body {
max-width: 1100px;
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-5);
color: #FFFFFF;
text-align: center;
}
.story-body .story-quote,
.story-body .section-eyebrow,
.story-body .story-attribution { max-width: 720px; }
.story-body .section-title { max-width: 1200px; text-wrap: balance; }
.story-body .section-eyebrow {
margin: 0;
color: var(--accent);
}
.story-body .section-title {
margin: 0;
color: #FFFFFF;
}
.story-quote {
margin: 0;
font-size: 18px;
line-height: 1.6;
color: rgba(255, 255, 255, 0.82);
}
.story-attribution {
margin: 0;
font-size: 14px;
color: rgba(255, 255, 255, 0.65);
letter-spacing: 0.01em;
}
@media (max-width: 900px) {
.story { padding: var(--space-12) 0 var(--space-16); }
}
@media (max-width: 720px) {
.story-body {
align-items: flex-start;
text-align: left;
}
.story-body .hero-ctas { justify-content: flex-start; }
}
/* ============================================================
PRICING — full-width free-plan card inside the results section
Lives on top of the 3 result cards; spans the same width as the grid.
Shares bg / radius / shadow with .result-card so the card family
reads as one design system. A subtle orange highlight chases around
the border perimeter (via the ::before pseudo below) to lift it.
============================================================ */
@property --pricing-angle {
syntax: '';
initial-value: 0deg;
inherits: false;
}
.section-results .pricing-card {
position: relative;
margin: var(--space-16) 0 var(--space-8);
padding: var(--space-12) var(--space-10);
background: #FFFFFF;
border: 1px solid rgba(15, 15, 15, 0.08);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-8);
color: var(--text);
}
.section-results .pricing-card + .results-grid {
margin-top: 0;
}
/* Subtle orange highlight chasing around the border perimeter. */
.section-results .pricing-card::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
padding: 1px;
background: conic-gradient(
from var(--pricing-angle, 0deg),
transparent 0deg,
transparent 280deg,
rgba(234, 101, 63, 0.55) 330deg,
transparent 360deg
);
-webkit-mask:
linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
animation: pricingBorderChase 8s linear infinite;
will-change: --pricing-angle;
}
@keyframes pricingBorderChase {
to { --pricing-angle: 360deg; }
}
@media (prefers-reduced-motion: reduce) {
.section-results .pricing-card::before { animation: none; }
}
/* TOP — centered headline with capacity row underneath */
.pricing-card-head {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-5);
}
.pricing-plan {
margin: 0;
font-size: clamp(40px, 5vw, 56px);
font-weight: 700;
line-height: var(--leading-tight);
letter-spacing: var(--tracking-tight);
color: var(--text);
}
.pricing-capacity {
list-style: none;
margin: 0 auto;
padding: 0;
max-width: 720px;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--space-3) var(--space-5);
}
.pricing-capacity li {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
font-size: 15px;
font-weight: 500;
line-height: 1.4;
color: var(--text);
}
.pricing-capacity li [data-lucide],
.pricing-capacity li svg.lucide {
width: 18px;
height: 18px;
color: var(--accent);
flex-shrink: 0;
}
/* "What's included." intro line above the 6-card grid */
.pricing-included-intro {
margin: 0;
font-size: var(--text-body-sm);
font-weight: 500;
color: var(--text-muted);
}
/* 6 killer feature cards — 3x2 grid, each with small label + square image.
Grid is constrained to ~840px so individual cards stay compact (Apple-style)
instead of stretching the full inner width of the pricing card. */
.pricing-killer-grid {
list-style: none;
margin: 0 auto;
padding: 0;
width: 100%;
max-width: 840px;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--space-3);
}
.pricing-killer-card {
display: flex;
flex-direction: column;
gap: var(--space-3);
padding: var(--space-4);
background: var(--bg-soft);
border: 1px solid var(--border);
border-radius: var(--radius-md);
}
.pricing-killer-label {
margin: 0;
font-size: 13px;
font-weight: 600;
line-height: 1.3;
color: var(--text);
text-align: center;
}
.pricing-killer-image {
aspect-ratio: 1 / 1;
border-radius: var(--radius-sm, 6px);
overflow: hidden;
background: rgba(15, 15, 15, 0.04);
}
.pricing-killer-image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.pricing-cta {
align-self: center;
margin-top: 0;
}
@media (max-width: 720px) {
.section-results .pricing-card { padding: var(--space-8) var(--space-5); gap: var(--space-6); }
.pricing-capacity { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pricing-killer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* ============================================================
PRICING — 3-plan grid (Free / Base / Grow) with billing toggle
Cream cards on the outside, dark featured middle card with an
orange "Recommended" badge. CTAs use the standard btn-primary
styling from the rest of the page.
============================================================ */
/* Billing toggle (yearly / monthly) */
.billing-toggle-wrap {
display: flex;
justify-content: center;
margin: var(--space-16) 0 var(--space-8);
}
.billing-toggle {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 4px;
background: rgba(15, 15, 15, 0.06);
border-radius: 999px;
}
.billing-toggle-btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 16px;
background: transparent;
border: 0;
border-radius: 999px;
font-size: 14px;
font-weight: 500;
color: var(--text-muted);
cursor: pointer;
transition: background var(--duration-fast) ease, color var(--duration-fast) ease, box-shadow var(--duration-fast) ease;
}
.billing-toggle-btn:hover { color: var(--text); }
.billing-toggle-btn.is-active {
background: #FFFFFF;
color: var(--text);
box-shadow: 0 1px 4px rgba(15, 15, 15, 0.08);
}
.billing-toggle-save {
font-size: 11px;
font-weight: 700;
color: var(--accent);
letter-spacing: 0.02em;
}
.pricing-plans {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--space-4);
margin: 0 0 var(--space-8);
align-items: stretch;
}
.plan-card {
position: relative;
display: flex;
flex-direction: column;
padding: var(--space-8);
background: var(--bg-soft);
border-radius: var(--radius-lg);
text-align: left;
color: var(--text);
}
.plan-card-featured {
background: #0F0F0F;
color: #FFFFFF;
}
.plan-card-top {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
margin-bottom: var(--space-3);
}
.plan-name {
margin: 0;
font-size: 18px;
font-weight: 600;
letter-spacing: var(--tracking-tight);
color: inherit;
}
.plan-card-badge {
display: inline-block;
padding: 4px 10px;
background: var(--accent);
color: #FFFFFF;
font-size: 12px;
font-weight: 600;
border-radius: 999px;
white-space: nowrap;
}
.plan-price {
margin: 0 0 var(--space-3);
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: var(--space-2);
}
.plan-price-amount {
font-size: clamp(36px, 4vw, 48px);
font-weight: 700;
line-height: 1;
letter-spacing: var(--tracking-tight);
color: inherit;
}
.plan-price-suffix {
font-size: 14px;
font-weight: 500;
color: var(--text-muted);
}
.plan-card-featured .plan-price-suffix { color: rgba(255, 255, 255, 0.65); }
.plan-tagline {
margin: 0 0 var(--space-6);
font-size: 14px;
line-height: 1.5;
color: var(--text-muted);
}
.plan-card-featured .plan-tagline { color: rgba(255, 255, 255, 0.7); }
.plan-features {
list-style: none;
margin: 0 0 var(--space-6);
padding: 0;
display: flex;
flex-direction: column;
gap: 4px;
flex: 1;
}
.plan-features li {
display: flex;
align-items: center;
gap: var(--space-3);
font-size: 15px;
font-weight: 500;
line-height: 1.4;
color: inherit;
}
.plan-features li [data-lucide],
.plan-features li svg.lucide {
width: 20px;
height: 20px;
color: inherit;
flex-shrink: 0;
}
/* CTA — sized using .btn .btn-md, but visually subtle so it blends with
the card surface instead of competing with the orange CTAs elsewhere
on the page. Transparent background + hairline border that picks up
the card's text color. */
.plan-cta {
align-self: stretch;
justify-content: center;
background: transparent;
color: var(--text);
border: 1px solid rgba(15, 15, 15, 0.18);
box-shadow: none;
}
.plan-cta:hover {
background: rgba(15, 15, 15, 0.05);
border-color: rgba(15, 15, 15, 0.32);
}
.plan-card-featured .plan-cta {
background: var(--accent);
color: #FFFFFF;
border-color: var(--accent);
}
.plan-card-featured .plan-cta:hover {
background: var(--accent-hover);
border-color: var(--accent-hover);
}
/* Hover highlight + tooltips on each plan feature row */
.plan-features li {
position: relative;
padding: 10px 10px;
margin-left: -10px;
margin-right: -10px;
border-radius: 8px;
transition: background-color 160ms ease;
}
.plan-features li:hover,
.plan-features li:focus-within {
background-color: rgba(15, 15, 15, 0.05);
}
.plan-card-featured .plan-features li:hover,
.plan-card-featured .plan-features li:focus-within {
background-color: rgba(255, 255, 255, 0.08);
}
.plan-features li .constellation-tooltip {
/* Center horizontally over the row */
left: 50%;
transform: translateX(-50%) translateY(4px);
}
.plan-features li:hover .constellation-tooltip,
.plan-features li:focus-within .constellation-tooltip {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
@media (max-width: 960px) {
.pricing-plans { grid-template-columns: 1fr; max-width: 480px; margin-left: auto; margin-right: auto; }
}
/* ============================================================
FAQ (light)
============================================================ */
.section-faq {
background: transparent;
}
@media (max-width: 720px) {
#faq .container { padding-left: var(--space-8); padding-right: var(--space-8); }
}
.faq {
max-width: 860px;
margin: 0 auto;
}
.faq-head {
text-align: left;
margin: 0 0 var(--space-12);
max-width: none;
}
.faq-head .section-title { margin: 0; }
@media (min-width: 721px) {
.faq-head { text-align: center; }
}
.faq-item {
border-top: 1px solid rgba(255, 255, 255, 0.08);
padding: var(--space-6) 0;
}
.faq-item:last-of-type { border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.faq-item > summary {
list-style: none;
cursor: pointer;
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--space-6);
font-size: 18px;
font-weight: 500;
line-height: 1.35;
color: var(--text);
letter-spacing: var(--tracking-tight);
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary::marker { content: ""; }
.faq-chevron {
flex-shrink: 0;
width: 20px;
height: 20px;
color: rgba(255, 255, 255, 0.62);
transition: transform var(--duration-normal) var(--ease);
}
.faq-item[open] .faq-chevron { transform: rotate(180deg); }
.faq-answer {
margin: var(--space-4) 0 0;
padding-right: var(--space-10);
font-size: 16px;
line-height: 1.6;
color: rgba(255, 255, 255, 0.62);
}
@media (max-width: 720px) {
.faq-item > summary { font-size: 16px; gap: var(--space-4); }
.faq-answer { padding-right: var(--space-6); }
}
/* ============================================================
FINAL CTA — dark card on light surface
============================================================ */
/* The CTA + footer share a single mesh-gradient backdrop on their parent
wrapper. Both sections are transparent so the gradient flows naturally
across the boundary, with no hard edges. */
.page-bottom-glow {
position: relative;
background: #000000;
overflow: hidden;
isolation: isolate;
z-index: 2; /* above the fixed hero, matches the old footer z-index */
}
.page-bottom-glow::before {
content: "";
position: absolute;
left: 50%;
top: 62%;
width: min(1300px, 105%);
height: min(800px, 55%);
transform: translate(-50%, -50%);
pointer-events: none;
z-index: 0;
filter: blur(120px);
background:
radial-gradient(circle at 35% 40%, rgba(255, 200, 110, 0.26), transparent 50%),
radial-gradient(circle at 70% 60%, rgba(234, 101, 63, 0.20), transparent 55%),
radial-gradient(circle at 50% 80%, rgba(255, 225, 140, 0.20), transparent 55%);
animation: heroGlowDrift 24s linear infinite;
will-change: transform;
}
.page-bottom-glow::after {
content: "";
position: absolute;
left: 50%;
top: 62%;
width: min(1600px, 125%);
height: min(620px, 45%);
transform: translate(-50%, -50%);
pointer-events: none;
z-index: 0;
filter: blur(120px);
background:
radial-gradient(circle at 15% 50%, rgba(79, 125, 243, 0.22), transparent 20%),
radial-gradient(circle at 85% 50%, rgba(155, 109, 255, 0.22), transparent 20%);
animation: heroSideDrift 28s linear infinite;
will-change: transform;
}
.page-bottom-glow > * { position: relative; z-index: 1; }
.section-cta {
position: relative;
background: transparent;
}
@media (prefers-reduced-motion: reduce) {
.section-cta::before,
.section-cta::after { animation: none; }
}
.cta-card-wrap {
max-width: var(--container);
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
}
.cta-card {
position: relative;
width: 100%;
background: #161616;
color: #fff;
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: var(--radius-xl);
padding: clamp(var(--space-16), 10vw, var(--space-24)) var(--space-8);
/* Extra bottom padding to leave room for the half-cropped graphic */
padding-bottom: clamp(140px, 18vw, 220px);
text-align: center;
overflow: hidden;
isolation: isolate;
}
@media (max-width: 720px) {
.cta-card { padding-bottom: 220px; }
}
/* Hero graphic peeking out from the bottom edge of the CTA card.
translateY(50%) is relative to the image's own height, so exactly
half of the image sits below the card's bottom edge. */
.cta-graphic {
position: absolute;
left: 50%;
bottom: 0;
width: min(680px, 80%);
height: auto;
transform: translate(-50%, 50%);
pointer-events: none;
user-select: none;
z-index: 0;
}
.cta-inner { position: relative; z-index: 1; }
@media (max-width: 720px) {
.cta-graphic { width: min(420px, 92%); }
}
/* Soft animated warm glow — same recipe as the hero */
.cta-card::before {
content: "";
position: absolute;
left: 50%;
top: 0;
width: min(1200px, 110%);
aspect-ratio: 1 / 1;
transform: translate(-50%, -50%);
pointer-events: none;
z-index: -1;
filter: blur(90px);
background:
radial-gradient(circle at 35% 40%, rgba(255, 200, 110, 0.20), transparent 60%),
radial-gradient(circle at 70% 60%, rgba(234, 101, 63, 0.12), transparent 65%),
radial-gradient(circle at 50% 80%, rgba(255, 225, 140, 0.14), transparent 65%);
animation: heroGlowDrift 24s linear infinite;
will-change: transform;
}
/* Side blooms — blue left / purple right */
.cta-card::after {
content: "";
position: absolute;
left: 50%;
top: 0;
width: min(1500px, 120%);
height: 460px;
transform: translate(-50%, -50%);
pointer-events: none;
z-index: -2;
filter: blur(90px);
background:
radial-gradient(circle at 15% 50%, rgba(79, 125, 243, 0.18), transparent 22%),
radial-gradient(circle at 85% 50%, rgba(155, 109, 255, 0.18), transparent 22%);
animation: heroSideDrift 28s linear infinite;
will-change: transform;
}
.cta-inner {
position: relative;
z-index: 1;
max-width: 720px;
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-6);
}
.cta-inner .section-title {
margin: 0;
color: #fff;
text-wrap: pretty;
font-size: clamp(34px, 6vw, 64px);
}
@media (max-width: 720px) {
.cta-inner .section-title { font-size: 28px; }
}
.cta-inner .cta-description {
margin: 0;
font-size: 16px;
line-height: 1.55;
color: rgba(255, 255, 255, 0.6);
text-wrap: pretty;
}
.cta-inner .btn {
margin-top: 0;
}
/* CTA tabs — starter-prompt switcher above the prompt box */
.cta-tabs {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 6px;
width: 100%;
margin-top: var(--space-2);
}
.cta-tab {
appearance: none;
border: 1px solid rgba(255, 255, 255, 0.1);
background: rgba(255, 255, 255, 0.04);
color: rgba(255, 255, 255, 0.7);
padding: 8px 14px;
border-radius: 999px;
font-size: 13px;
font-weight: 500;
cursor: pointer;
transition: background var(--duration-fast) ease, color var(--duration-fast) ease, border-color var(--duration-fast) ease;
}
.cta-tab:hover {
background: rgba(255, 255, 255, 0.08);
color: #fff;
}
.cta-tab.is-active {
background: var(--accent);
border-color: var(--accent);
color: #fff;
}
/* Prompt box — styled like a Claude chat input */
.cta-prompt {
position: relative;
width: 100%;
background: #1A1A1A;
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: var(--radius-lg);
padding: var(--space-6);
text-align: left;
margin-top: var(--space-2);
}
.cta-prompt-text {
display: none;
margin: 0;
color: rgba(255, 255, 255, 0.88);
font-size: 15px;
line-height: 1.55;
font-family: var(--font-sans);
padding-right: 80px;
}
.cta-prompt-text.is-active {
display: block;
}
.cta-prompt-text .placeholder {
color: var(--accent);
font-weight: 500;
}
.cta-copy {
position: absolute;
top: var(--space-4);
right: var(--space-4);
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 10px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: var(--radius-sm, 8px);
color: rgba(255, 255, 255, 0.7);
font-size: 12px;
font-weight: 500;
cursor: pointer;
transition: background var(--duration-fast) ease, color var(--duration-fast) ease, border-color var(--duration-fast) ease;
}
.cta-copy:hover {
background: rgba(255, 255, 255, 0.08);
color: #fff;
}
.cta-copy [data-lucide],
.cta-copy svg.lucide { width: 14px; height: 14px; }
.cta-copy.is-copied {
color: #3E8C6A;
border-color: rgba(62, 140, 106, 0.4);
}
.cta-actions {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: var(--space-3);
margin-top: var(--space-2);
}
.cta-actions .btn [data-lucide],
.cta-actions .btn svg.lucide { width: 16px; height: 16px; }
.cta-actions [data-copy-prompt].is-copied {
color: #3E8C6A;
}
@media (max-width: 720px) {
.cta-card {
padding: var(--space-16) var(--space-6);
/* Keep room below for the half-cropped graphic */
padding-bottom: 170px;
}
.cta-prompt { padding: var(--space-5); }
.cta-prompt-text { font-size: 14px; padding-right: 0; padding-top: var(--space-7); }
.cta-copy { top: var(--space-3); right: var(--space-3); }
.cta-tab { font-size: 12px; padding: 7px 12px; }
}
/* ============================================================
CONNECT CLAUDE INSTALL PAGE
============================================================ */
/* Self-contained layout for the Connect Claude install page.
- padding-top = nav-height + 64px breathing room → content always clears
the fixed nav without depending on .page-main's cascade order.
- min-height keeps short pages from collapsing above the footer. */
.install-main {
min-height: calc(100vh - 200px);
padding-top: calc(var(--nav-height) + var(--space-16));
padding-bottom: var(--space-20);
}
/* Hero margin matches the 96px ramp between major sections below. */
.install-hero {
text-align: center;
max-width: 720px;
margin: 0 auto var(--space-24);
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-3);
}
/* Override .hero-connect's negative top margin — that pull-up is designed
for the landing page where the dock floats over the hero graphic. On the
install page there's no graphic above it, so the negative margin yanks
the dock straight up into the nav. */
.install-connect {
margin: 0 auto var(--space-4);
}
/* Sub-page hero — title uses the section-title scale (clamp 28–56px)
instead of the landing-page display scale (44–72px). Prevents the
72px headline from overflowing the 720px hero container. */
.install-title {
margin: 0;
font-size: var(--text-h2);
max-width: 18ch;
text-wrap: pretty;
}
.install-sub {
margin: 0;
max-width: 540px;
font-size: 16px;
line-height: 1.55;
color: var(--text-muted);
}
/* 3-column horizontal grid — matches the .results-grid recipe so the
Connect Claude page shares the landing page's card cadence. */
.install-steps {
max-width: var(--container);
margin: 0 auto;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--space-6);
align-items: stretch;
}
@media (max-width: 960px) {
.install-steps {
grid-template-columns: 1fr;
max-width: 560px;
gap: var(--space-5);
}
}
/* Each step is a card — same visual primitives as .result-card and
.pricing-card on the landing page. */
.install-step {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-3);
padding: var(--space-8) var(--space-6);
background: #FFFFFF;
border: 1px solid rgba(15, 15, 15, 0.08);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
text-align: center;
/* Page-load entrance — reuses the same heroFadeUp keyframe + easing
the landing page hero uses. Staggered left-to-right. */
opacity: 0;
animation: heroFadeUp 900ms cubic-bezier(0.19, 1, 0.22, 1) forwards;
}
.install-step:nth-child(1) { animation-delay: 200ms; }
.install-step:nth-child(2) { animation-delay: 350ms; }
.install-step:nth-child(3) { animation-delay: 500ms; }
@media (prefers-reduced-motion: reduce) {
.install-step { opacity: 1; animation: none; }
}
.install-step-num {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: 50%;
background: var(--accent);
color: #fff;
font-size: 18px;
font-weight: 700;
flex-shrink: 0;
}
.install-step-title {
margin: 0;
font-size: 22px;
font-weight: 700;
line-height: 1.25;
color: var(--text);
}
.install-step-sub {
margin: 0;
font-size: 15px;
line-height: 1.5;
color: var(--text-subtle);
}
.install-step-foot {
margin: 0;
font-size: 13px;
color: var(--text-subtle);
text-align: center;
}
.install-step-link {
color: var(--accent);
text-decoration: none;
font-weight: 500;
}
.install-step-link:hover { text-decoration: underline; }
.install-code {
position: relative;
width: 100%;
margin-top: auto; /* pin to the bottom — equalises card rhythm */
background: #0F0F0F;
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: var(--radius-md);
padding: 14px 16px;
text-align: left;
}
.install-code-text {
display: block;
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 14px;
line-height: 1.5;
color: #F4F4F4;
padding-right: 80px;
word-break: break-word;
}
.install-code-prompt .install-code-text {
font-family: var(--font-sans);
font-size: 15px;
color: rgba(255, 255, 255, 0.92);
}
.install-code-copy {
position: absolute;
top: 10px;
right: 10px;
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 10px;
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: var(--radius-sm, 8px);
color: rgba(255, 255, 255, 0.75);
font-size: 12px;
font-weight: 500;
cursor: pointer;
transition: background var(--duration-fast) ease, color var(--duration-fast) ease, border-color var(--duration-fast) ease;
}
.install-code-copy:hover {
background: rgba(255, 255, 255, 0.12);
color: #fff;
}
.install-code-copy [data-lucide],
.install-code-copy svg.lucide { width: 14px; height: 14px; }
.install-code-copy.is-copied {
color: #3E8C6A;
border-color: rgba(62, 140, 106, 0.4);
}
/* Compat line is a footnote to the install steps — tighten to the steps. */
.install-compat {
text-align: center;
margin: var(--space-8) auto 0;
font-size: 14px;
color: var(--text-subtle);
}
/* Major section break — 96px between top-level page sections. */
.install-grid-wrap {
max-width: 920px;
margin: var(--space-24) auto 0;
}
/* Spacing between the section-title heading and the grid below it.
Same gap rhythm as section-title → results-grid on index.html. */
.install-grid-wrap .section-head {
margin-bottom: var(--space-8);
}
.install-grid {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-3);
}
.install-grid-card {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--space-3);
padding: var(--space-5);
border: 1px solid rgba(15, 15, 15, 0.08);
border-radius: var(--radius-md);
background: rgba(15, 15, 15, 0.02);
text-align: left;
}
.install-grid-icon {
width: 24px;
height: 24px;
color: var(--accent);
}
.install-grid-icon svg.lucide,
.install-grid-icon[data-lucide] { width: 24px; height: 24px; }
.install-grid-label {
font-size: 14px;
font-weight: 600;
color: var(--text);
line-height: 1.3;
}
/* FAQ section — heading + item styling inherited from the shared .faq
wrapper + .section-head + .section-title + .faq-item rules used on
index.html. Only spacing is install-page-specific. */
.install-faq {
margin-top: var(--space-24);
}
.install-faq .faq-answer code {
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 13px;
padding: 1px 6px;
background: rgba(15, 15, 15, 0.06);
border-radius: 4px;
}
.install-footer-cta {
margin: var(--space-24) auto 0;
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-3);
}
.install-footer-note {
margin: 0;
font-size: 13px;
color: var(--text-subtle);
}
@media (max-width: 720px) {
/* Page padding scales to the design system's mobile rhythm — top still
clears the nav, bottom drops to 64px. */
.install-main {
padding-top: calc(var(--nav-height) + var(--space-10));
padding-bottom: var(--space-16);
}
/* Hero margin + major section breaks scale 96 → 64 on mobile. */
.install-hero { margin-bottom: var(--space-16); }
.install-grid-wrap,
.install-faq,
.install-footer-cta { margin-top: var(--space-16); }
/* Step card internals shrink for narrower viewports. */
.install-step-num { width: 36px; height: 36px; font-size: 16px; }
.install-step-title { font-size: 18px; }
.install-code-text { padding-right: 0; padding-top: var(--space-7); font-size: 13px; }
.install-code-prompt .install-code-text { font-size: 14px; }
.install-code-copy { top: 8px; right: 8px; }
/* "What Claude can now do" grid collapses from 3 → 2 cols. */
.install-grid { grid-template-columns: repeat(2, 1fr); }
}
/* ============================================================
FOOTER
============================================================ */
/* ============================================================
SITE FOOTER — solid black, links + legal disclaimer
============================================================ */
.site-footer {
background: transparent;
color: rgba(255, 255, 255, 0.62);
padding: 40px 24px 48px;
text-align: center;
font-size: 14px;
line-height: 1.5;
/* The .page-bottom-glow wrapper is z-index 2 above the fixed hero,
so the footer inherits that stacking — no additional lift needed. */
position: relative;
z-index: 1;
}
.site-footer-row {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 8px 24px;
margin: 0 auto 24px;
max-width: 1100px;
}
.site-footer-copy { white-space: nowrap; }
.site-footer-links {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 8px 20px;
}
.site-footer-links a {
color: rgba(255, 255, 255, 0.62);
text-decoration: none;
transition: color 150ms ease;
}
.site-footer-links a:hover { color: #FFFFFF; }
.site-footer-disclaimer {
max-width: 900px;
margin: 0 auto;
padding-top: 20px;
border-top: 1px solid rgba(255, 255, 255, 0.08);
color: rgba(255, 255, 255, 0.36);
font-size: 11px;
line-height: 1.55;
}
.site-footer-disclaimer p {
margin: 0 0 12px;
}
.site-footer-disclaimer p:last-child { margin-bottom: 0; }
@media (max-width: 720px) {
.site-footer { padding: 32px 16px 40px; font-size: 13px; }
.site-footer-disclaimer { font-size: 10px; }
}
/* ============================================================
REDUCED MOTION
============================================================ */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
.btn, .nav, .nav-menu a, .nav-menu button { transition: none; }
.btn:active { transform: none; }
*, *::before, *::after {
animation-duration: 1ms !important;
animation-iteration-count: 1 !important;
transition-duration: 1ms !important;
}
}
/* ============================================================
PASSWORD GATE
============================================================ */
html.pg-locked,
html.pg-locked body { overflow: hidden; height: 100vh; }
html.pg-locked body > *:not(#pg) { display: none !important; }
#pg { display: none; }
html.pg-locked #pg {
display: flex;
position: fixed;
inset: 0;
z-index: 9999;
align-items: center;
justify-content: center;
background: var(--bg);
padding: var(--space-6);
}
.pg-card {
width: 100%;
max-width: 380px;
background: #111111;
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: var(--radius-lg);
padding: var(--space-8);
text-align: center;
box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}
.pg-card h1 {
font-size: 20px;
font-weight: 600;
color: var(--text);
margin: 0 0 var(--space-2);
letter-spacing: -0.01em;
}
.pg-card p.pg-lede {
font-size: 14px;
color: var(--text-muted);
margin: 0 0 var(--space-6);
}
.pg-form {
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.pg-input {
width: 100%;
height: 44px;
padding: 0 var(--space-4);
background: #0A0A0A;
border: 1px solid rgba(255, 255, 255, 0.10);
border-radius: var(--radius-md);
color: var(--text);
font: inherit;
font-size: 15px;
outline: none;
transition: border-color 160ms ease;
}
.pg-input:focus { border-color: var(--accent); }
.pg-submit {
height: 44px;
border: 0;
border-radius: var(--radius-pill);
background: var(--accent);
color: #fff;
font: inherit;
font-weight: 600;
font-size: 15px;
cursor: pointer;
transition: background 160ms ease;
}
.pg-submit:hover { background: var(--accent-hover); }
.pg-error {
font-size: 13px;
color: #ff6b6b;
margin: var(--space-3) 0 0;
min-height: 1em;
}
/* ============================================================
STEPS — progress indicator in nav (Account → Key)
============================================================ */
.steps {
list-style: none;
margin: 0;
padding: 0;
display: inline-flex;
align-items: center;
gap: var(--space-3);
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.step {
display: inline-flex;
align-items: center;
gap: var(--space-2);
font-size: 14px;
font-weight: 500;
color: var(--text-subtle);
transition: color 160ms ease;
}
.step-num {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
border-radius: 9999px;
background: transparent;
border: 1px solid rgba(255, 255, 255, 0.18);
color: var(--text-subtle);
font-size: 12px;
font-weight: 600;
line-height: 1;
transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
}
.step.is-active {
color: var(--text);
}
.step.is-active .step-num {
background: var(--accent);
border-color: var(--accent);
color: #fff;
}
/* ============================================================
GENERIC PAGE LAYOUT (used by sub-pages like api-key.html)
============================================================ */
.page-main {
min-height: calc(100vh - 200px);
padding: var(--space-32, 128px) 0 var(--space-24);
text-align: center;
}
/* Variant: reduce bottom padding when followed by another section (e.g. logos) */
.page-main-tight {
min-height: 0;
padding-bottom: var(--space-12);
}
/* Slightly smaller headline on sub-pages for longer multi-line copy */
.page-main .hero-title {
font-size: clamp(30px, 4vw, 42px);
max-width: 22ch;
}
.page-main .hero-eyebrow {
color: var(--text-muted);
}
/* Fast staggered fade-in for sub-page content */
.page-main .hero-eyebrow,
.page-main .hero-title,
.page-main .signup-form {
opacity: 0;
animation: heroFadeUp 500ms cubic-bezier(0.19, 1, 0.22, 1) forwards;
}
.page-main .hero-eyebrow { animation-delay: 80ms; }
.page-main .hero-title { animation-delay: 160ms; }
.page-main .signup-form { animation-delay: 240ms; }
.section-logos {
opacity: 0;
animation: heroFadeUp 500ms cubic-bezier(0.19, 1, 0.22, 1) 360ms forwards;
}
@media (prefers-reduced-motion: reduce) {
.page-main .hero-eyebrow,
.page-main .hero-title,
.page-main .signup-form,
.section-logos {
opacity: 1;
animation: none;
}
}
/* ============================================================
SIGNUP FORM (api-key.html)
============================================================ */
.signup-form {
width: 100%;
max-width: 420px;
margin: var(--space-8) auto 0;
display: flex;
flex-direction: column;
gap: var(--space-4);
text-align: left;
}
.form-field {
display: flex;
flex-direction: column;
}
.form-input-wrap {
position: relative;
display: block;
}
.form-input-icon {
position: absolute;
left: var(--space-4);
top: 50%;
transform: translateY(-50%);
width: 18px;
height: 18px;
color: var(--text-subtle);
pointer-events: none;
}
.form-input-icon svg.lucide {
width: 18px;
height: 18px;
display: block;
}
.form-input {
width: 100%;
height: 48px;
padding: 0 var(--space-4);
background: #111111;
border: 1px solid rgba(255, 255, 255, 0.10);
border-radius: var(--radius-md);
color: var(--text);
font: inherit;
font-size: 15px;
outline: none;
transition: border-color 160ms ease, background 160ms ease;
}
.form-input-with-icon {
padding-left: 44px;
}
.form-input-wrap:focus-within .form-input-icon {
color: var(--text-muted);
}
.form-input::placeholder {
color: var(--text-subtle);
}
.form-input:hover {
border-color: rgba(255, 255, 255, 0.16);
}
.form-input:focus {
border-color: var(--accent);
background: #161616;
}
.form-check {
display: flex;
align-items: flex-start;
gap: var(--space-3);
font-size: 14px;
line-height: 1.5;
color: var(--text-muted);
cursor: pointer;
user-select: none;
margin-top: var(--space-2);
}
.form-checkbox {
appearance: none;
-webkit-appearance: none;
flex: 0 0 auto;
width: 18px;
height: 18px;
margin: 2px 0 0;
background: #111111;
border: 1px solid rgba(255, 255, 255, 0.18);
border-radius: 4px;
cursor: pointer;
position: relative;
transition: background 160ms ease, border-color 160ms ease;
}
.form-checkbox:hover {
border-color: rgba(255, 255, 255, 0.28);
}
.form-checkbox:checked {
background: var(--accent);
border-color: var(--accent);
}
.form-checkbox:checked::after {
content: "";
position: absolute;
left: 5px;
top: 1px;
width: 5px;
height: 10px;
border: solid #fff;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
.form-checkbox:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
.form-link {
color: var(--text);
text-decoration: underline;
text-underline-offset: 2px;
text-decoration-color: rgba(255, 255, 255, 0.3);
transition: text-decoration-color 160ms ease;
}
.form-link:hover {
text-decoration-color: var(--text);
}
.form-submit {
width: 100%;
margin-top: var(--space-2);
justify-content: center;
}
.form-foot {
margin: var(--space-4) 0 0;
text-align: center;
font-size: 13px;
color: var(--text-muted);
}
/* ============================================================
LIGHT THEME — applied via
Used on sub-pages (e.g. api-key.html). Overrides dark tokens
and a handful of components that hardcoded dark surfaces.
============================================================ */
body.theme-light {
--bg: #FFFFFF;
--bg-soft: #F9F9F7;
--text: #0F0F0F;
--text-muted: rgba(15, 15, 15, 0.60);
--text-subtle: rgba(15, 15, 15, 0.42);
--border: rgba(15, 15, 15, 0.08);
--border-strong: rgba(15, 15, 15, 0.14);
background: var(--bg);
color: var(--text);
}
/* Nav — light glass */
body.theme-light .nav {
background: rgba(255, 255, 255, 0.78);
backdrop-filter: saturate(180%) blur(14px);
-webkit-backdrop-filter: saturate(180%) blur(14px);
transition: transform var(--duration-normal) var(--ease),
opacity var(--duration-normal) ease,
background-color 350ms ease,
border-color 350ms ease,
color 350ms ease;
}
/* Nav dark mode — applied while the nav overlaps the dark workflow section */
body.theme-light .nav.nav-dark {
background: rgba(10, 10, 10, 0.72);
border-bottom-color: rgba(255, 255, 255, 0.08);
color: #FFFFFF;
}
body.theme-light .nav.nav-dark .nav-brand,
body.theme-light .nav.nav-dark a,
body.theme-light .nav.nav-dark .btn-ghost { color: #FFFFFF; }
body.theme-light .nav.nav-dark .btn-ghost:hover {
background: rgba(255, 255, 255, 0.08);
}
/* Buttons */
body.theme-light .btn-ghost:hover {
color: var(--text);
background: rgba(15, 15, 15, 0.05);
}
/* Step indicator */
body.theme-light .step-num {
border-color: rgba(15, 15, 15, 0.20);
}
/* Form inputs */
body.theme-light .form-input {
background: #FFFFFF;
border-color: rgba(15, 15, 15, 0.12);
color: var(--text);
}
body.theme-light .form-input::placeholder {
color: var(--text-subtle);
}
body.theme-light .form-input:hover {
border-color: rgba(15, 15, 15, 0.20);
}
body.theme-light .form-input:focus {
border-color: var(--accent);
background: #FFFFFF;
}
body.theme-light .form-checkbox {
background: #FFFFFF;
border-color: rgba(15, 15, 15, 0.22);
}
body.theme-light .form-checkbox:hover {
border-color: rgba(15, 15, 15, 0.32);
}
body.theme-light .form-checkbox:checked {
background: var(--accent);
border-color: var(--accent);
}
body.theme-light .form-link {
color: var(--text);
text-decoration-color: rgba(15, 15, 15, 0.30);
}
body.theme-light .form-link:hover {
text-decoration-color: var(--text);
}
/* Site footer styled directly — no theme override needed. */
/* Password gate (when this sub-page is locked) */
body.theme-light #pg {
background: var(--bg);
}
body.theme-light .pg-card {
background: #FFFFFF;
border: 1px solid rgba(15, 15, 15, 0.08);
box-shadow: 0 24px 60px rgba(15, 15, 15, 0.08);
}
body.theme-light .pg-input {
background: #FFFFFF;
border-color: rgba(15, 15, 15, 0.12);
color: var(--text);
}
/* ============================================================
LIGHT THEME — full-page override (body.theme-light)
Flips every dark surface, hardcoded white text, and component
that bakes in a dark color, so the homepage reads cleanly on
white without rewriting individual sections.
============================================================ */
/* Hero — soften mesh gradients on white so they don't blow out.
!important is required because the heroFlareIn animation sets
opacity:1 forwards, which otherwise wins over a normal rule. */
body.theme-light .hero::before { opacity: 0.55 !important; }
body.theme-light .hero::after { opacity: 0.45 !important; }
body.theme-light .cta-card::before { opacity: 0.55 !important; }
body.theme-light .cta-card::after { opacity: 0.45 !important; }
/* Dock — light glass */
body.theme-light .hero-connect {
background: rgba(255, 255, 255, 0.65);
border-color: rgba(15, 15, 15, 0.08);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.7),
0 18px 50px rgba(15, 15, 15, 0.10);
}
/* App nav dock stays dark in light mode */
body.theme-light .app-nav {
background: rgba(20, 20, 20, 0.85);
border-color: rgba(255, 255, 255, 0.06);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.08),
0 18px 50px rgba(0, 0, 0, 0.30);
}
body.theme-light .app-nav .app-nav-label {
color: rgba(255, 255, 255, 0.92);
}
body.theme-light .hero-connect-link { color: rgba(15, 15, 15, 0.55); }
body.theme-light .hero-subtitle { color: var(--text-muted); }
/* Section surfaces — flip dark blocks to white / off-white */
body.theme-light .section-faq { background: transparent; }
body.theme-light .section-cta { background: transparent; }
/* Pricing card is now always white (matches .result-card) — no theme-light
override needed. */
body.theme-light .section-results {
background: linear-gradient(180deg, #FFFFFF 0%, #F9F9F7 100%);
}
/* .section-workflow is forced-dark via its own rule; no light override here. */
body.theme-light .section-infra { background: var(--bg); }
/* Extra breathing room below the last slider section before the dark story */
#leads-and-reports { padding-bottom: 200px; }
/* Story stays dark in both themes — copy sits on the darkened photo. */
/* Section-infra — flip ALL hardcoded white text */
body.theme-light .section-infra { color: var(--text); }
body.theme-light .section-infra .section-title { color: var(--text); }
body.theme-light .section-infra .section-subtitle,
body.theme-light .infra-caption { color: var(--text-muted); }
body.theme-light .section-infra .section-eyebrow { color: var(--accent); }
body.theme-light .section-infra .section-subtitle .emph { color: var(--text); }
body.theme-light .infra-caption-title { color: var(--text); }
/* Infra nav buttons (chevrons) — warm grey surface, dark icon */
body.theme-light .infra-nav {
background: #EFE8DE;
color: var(--text);
}
body.theme-light .infra-nav:hover { background: #E5DCCE; }
/* Story body stays light-on-dark in both themes — copy sits on the darkened photo. */
body.theme-light .story-body,
body.theme-light .story-body .section-title { color: #FFFFFF; }
body.theme-light .story-quote { color: rgba(255, 255, 255, 0.82); }
body.theme-light .story-attribution { color: rgba(255, 255, 255, 0.65); }
/* CTA card — entire card had color: #fff at the parent level */
/* CTA section is dark in both themes — keep the dark card styling */
/* Cards — slider slides + infra cards stay light on light bg */
body.theme-light .slide,
body.theme-light .infra-card { background: #F0F0EE; }
body.theme-light .slider-dots,
body.theme-light .slider-play { background: #F0F0EE; }
body.theme-light .slider-play:hover { background: #E5E5E2; }
body.theme-light .slider-dot { background: rgba(15, 15, 15, 0.22); }
body.theme-light .slider-dot[aria-selected="true"] { background: var(--text); }
/* Slide title text */
body.theme-light .slide-title { color: var(--text); }
body.theme-light .slide-title-soft { color: rgba(15, 15, 15, 0.55); }
/* Buttons — secondary needs a light surface counterpart */
body.theme-light .btn-secondary {
background: var(--bg);
color: var(--text);
border: 1px solid rgba(15, 15, 15, 0.10);
}
body.theme-light .btn-secondary:hover {
background: var(--bg-soft);
border-color: rgba(15, 15, 15, 0.16);
}
/* Workflow section is dark — revert secondary button to its dark default */
body.theme-light .section-workflow .btn-secondary {
background: #1A1A1A;
color: #FFFFFF;
border: 1px solid rgba(255, 255, 255, 0.08);
}
body.theme-light .section-workflow .btn-secondary:hover {
background: #242424;
border-color: rgba(255, 255, 255, 0.14);
}
/* FAQ — borders and text */
/* FAQ section is dark in both themes — revert text overrides to white-on-dark */
body.theme-light .faq-item { border-top-color: rgba(255, 255, 255, 0.08); }
body.theme-light .faq-item:last-of-type { border-bottom-color: rgba(255, 255, 255, 0.08); }
body.theme-light .faq-item summary { color: #FFFFFF; }
body.theme-light .faq-item p { color: rgba(255, 255, 255, 0.62); }
body.theme-light .section-faq .section-title { color: #FFFFFF; }
/* Footer stays dark — overrides handled earlier in the file */
/* Logo marquee caption */
body.theme-light .logos-caption { color: var(--text-muted); }
body.theme-light .section-logos {
background: transparent;
}
/* Marquee mask uses #000 luminance and works for both modes — no change needed. */