/* Fonts are loaded via a in each page's (faster than an @import here, which would chain a second request behind this stylesheet). Families in use: Bricolage Grotesque, Hanken Grotesk, JetBrains Mono, Playpen Sans. */ :root { /* Ink base */ --ink: #06060e; --ink-2: #0a0a16; /* Brand accents (candy-tech) */ --violet: #7b5cff; --violet-2: #5a32f0; --blue: #6e9bff; --teal: #3fe0ae; --pink: #ff6fb0; --text: #f4f4fb; --muted: rgba(255, 255, 255, 0.66); font-family: 'Hanken Grotesk', system-ui, -apple-system, sans-serif; line-height: 1.5; font-weight: 400; color-scheme: dark; color: var(--text); background-color: var(--ink); font-synthesis: none; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } html { scroll-behavior: smooth; } html, body { margin: 0; min-width: 320px; background-color: var(--ink); overflow-x: hidden; } ::selection { background: rgba(123, 92, 255, 0.35); color: #fff; } #root { width: 100%; margin: 0; padding: 0; } /* ============ Typography ============ */ .font-bricolage { font-family: 'Bricolage Grotesque', sans-serif; } .font-playpen { font-family: 'Playpen Sans', cursive; } .font-figtree { font-family: 'Hanken Grotesk', sans-serif; } /* '.font-google' is used throughout the section components, map it to the primary grotesque so the whole site updates from one place. */ .font-google { font-family: 'Hanken Grotesk', sans-serif; } .font-mono, .monospace-like { font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; } /* ============ Background stack ============ */ .bg-stack { position: fixed; inset: 0; z-index: 0; overflow: hidden; background: radial-gradient(120% 80% at 50% -10%, #15123a 0%, transparent 55%), var(--ink); } .bg-aurora { position: absolute; inset: 0; } .bg-aurora .blob { position: absolute; /* Perf (founder, ultrawide lag): the 90px live blur over four 60vw layers was the page's biggest GPU cost. The radial gradient is already soft, so the blur bought almost nothing. Size capped so ultrawide monitors don't composite 2000px+ glow layers. */ width: min(60vw, 880px); height: min(60vw, 880px); border-radius: 50%; mix-blend-mode: screen; will-change: transform; } .blob-1 { background: radial-gradient(circle, var(--violet) 0%, transparent 62%); top: -12%; left: -8%; opacity: 0.5; animation: drift1 24s ease-in-out infinite; } .blob-2 { background: radial-gradient(circle, #2e6bff 0%, transparent 62%); top: 14%; right: -14%; opacity: 0.42; animation: drift2 29s ease-in-out infinite; } .blob-3 { background: radial-gradient(circle, var(--teal) 0%, transparent 62%); bottom: -18%; left: 16%; opacity: 0.3; animation: drift3 33s ease-in-out infinite; } .blob-4 { background: radial-gradient(circle, var(--pink) 0%, transparent 62%); top: 28%; left: 34%; opacity: 0.26; animation: drift4 27s ease-in-out infinite; } @keyframes drift1 { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(7vw, 6vh) scale(1.15); } } @keyframes drift2 { 0%, 100% { transform: translate(0, 0) scale(1.05); } 50% { transform: translate(-6vw, 4vh) scale(0.9); } } @keyframes drift3 { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(5vw, -5vh) scale(1.2); } } @keyframes drift4 { 0%, 100% { transform: translate(0, 0) scale(0.95); } 50% { transform: translate(-5vw, -6vh) scale(1.1); } } .bg-graph { position: absolute; inset: 0; width: 100%; height: 100%; } .bg-grain { position: absolute; inset: 0; opacity: 0.5; mix-blend-mode: overlay; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E"); } .bg-vignette { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(125% 95% at 50% 28%, transparent 42%, rgba(3, 3, 8, 0.66) 100%); } /* ============ Navbar ============ */ .landing-nav { position: fixed; top: 0; left: 0; right: 0; padding: 20px 32px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; z-index: 50; pointer-events: none; box-sizing: border-box; } .landing-nav > * { pointer-events: auto; } .nav-glass { background: rgba(10, 9, 22, 0.55); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border: 1px solid rgba(255, 255, 255, 0.09); border-radius: 50px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); } .nav-brand { justify-self: start; display: flex; align-items: center; gap: 12px; padding: 9px 24px 9px 14px; color: #fff; text-decoration: none; white-space: nowrap; transition: opacity 0.2s ease; } .nav-brand:hover { opacity: 0.9; } .nav-logo { /* The thick-stroke white variant, sized up: at 30px the thin-line original read as a faint partial circle (founder, regular Mac). */ width: 50px; height: 50px; flex-shrink: 0; filter: drop-shadow(0 0 7px rgba(123, 92, 255, 0.55)); } .nav-wordmark { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; font-size: 20px; letter-spacing: -0.02em; line-height: 1; display: inline-flex; align-items: baseline; gap: 7px; } .nav-wordmark .candy { background: linear-gradient(100deg, #b49bff, #6e9bff 55%, #3fe0ae); -webkit-background-clip: text; background-clip: text; color: transparent; } .nav-wordmark .labs { font-weight: 500; font-size: 15px; color: rgba(255, 255, 255, 0.5); letter-spacing: 0.01em; } .landing-nav-items { justify-self: center; display: flex; align-items: center; gap: 30px; padding: 14px 34px; } .nav-link { color: rgba(255, 255, 255, 0.82); font-size: 15px; text-decoration: none; font-weight: 500; white-space: nowrap; transition: color 0.2s ease; } .nav-link:hover { color: #fff; } .nav-auth { justify-self: end; display: flex; align-items: center; gap: 6px; padding: 6px; } .nav-login { padding: 9px 18px; border-radius: 50px; font-size: 14px; transition: background 0.2s ease, color 0.2s ease; } .nav-login:hover { background: rgba(255, 255, 255, 0.08); color: #fff; } .nav-signup { display: inline-flex; align-items: center; gap: 8px; background: linear-gradient(180deg, var(--violet), var(--violet-2)); color: #fff; border-radius: 50px; padding: 10px 22px; font-family: 'Hanken Grotesk', sans-serif; font-size: 14px; font-weight: 600; white-space: nowrap; text-decoration: none; border: none; cursor: pointer; box-shadow: 0 6px 20px rgba(123, 92, 255, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.25); transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.25s ease; } .nav-signup:hover { transform: translateY(-1px) scale(1.03); box-shadow: 0 10px 30px rgba(123, 92, 255, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.3); } @media (max-width: 1020px) { .landing-nav-items { display: none; } } @media (max-width: 560px) { /* Phone: brand pill + Sign in + Book a call must FIT 375px. The "Labs" suffix hides, paddings tighten, the CTA shrinks. */ .landing-nav { padding: 12px 10px; gap: 8px; } .nav-login { display: none; } .nav-wordmark { font-size: 16px; } .nav-wordmark .labs { display: none; } .nav-logo { width: 34px; height: 34px; } .nav-brand { padding: 7px 12px 7px 9px; gap: 8px; } .nav-auth { padding: 5px; gap: 6px; } .nav-auth .nav-link { padding: 7px 9px; font-size: 13px; } .nav-signup { padding: 8px 12px; font-size: 13px; white-space: nowrap; } } /* ============ Hero ============ */ .hero { position: relative; width: 100%; min-height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; z-index: 10; padding: 120px 24px 100px; box-sizing: border-box; text-align: center; } .hero > * { transition: opacity 0.7s ease, transform 0.75s cubic-bezier(0.2, 0.7, 0.2, 1); } /* Base state is VISIBLE; the `.pre` class (removed on mount) only offsets the content for a slide-up entrance, opacity is never reduced, so text can never be stuck invisible if the reveal does not run. */ .hero.pre .hero-badge, .hero.pre .hero-title, .hero.pre .hero-sub, .hero.pre .hero-cta { transform: translateY(18px); } .hero .hero-badge { transition-delay: 0.05s; } .hero .hero-title { transition-delay: 0.14s; } .hero .hero-sub { transition-delay: 0.26s; } .hero .hero-cta { transition-delay: 0.38s; } .hero .scroll-hint { transition-delay: 0.55s; } .hero-badge { display: inline-flex; align-items: center; gap: 9px; padding: 7px 16px 7px 12px; border-radius: 100px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.13); backdrop-filter: blur(10px); color: rgba(255, 255, 255, 0.85); font-size: 12.5px; letter-spacing: 0.02em; white-space: nowrap; margin-bottom: 30px; } .hero-badge-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 10px var(--teal); animation: pulseDot 2s infinite; } @keyframes pulseDot { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.45; transform: scale(0.75); } } .hero-title { font-family: 'Bricolage Grotesque', sans-serif; font-size: clamp(2.3rem, 5.4vw, 4.2rem); font-weight: 700; color: #fff; line-height: 1.08; letter-spacing: -0.035em; margin: 0 0 26px 0; max-width: 24ch; text-wrap: balance; } .grad-text { background: linear-gradient(100deg, var(--violet) 0%, var(--blue) 30%, var(--teal) 55%, var(--pink) 80%, var(--violet) 100%); background-size: 220% auto; -webkit-background-clip: text; background-clip: text; color: transparent; animation: shine 7s linear infinite; } @keyframes shine { to { background-position: 220% center; } } .hero-sub { font-size: clamp(1.05rem, 1.6vw, 1.3rem); color: var(--muted); max-width: 720px; margin: 0 0 44px 0; line-height: 1.6; text-wrap: pretty; } .hero-cta { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; justify-content: center; } .scroll-hint { position: absolute; bottom: 34px; left: 50%; transform: translateX(-50%); display: inline-flex; flex-direction: column; align-items: center; gap: 8px; color: rgba(255, 255, 255, 0.5); text-decoration: none; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; } .scroll-hint:hover { color: rgba(255, 255, 255, 0.8); } .scroll-hint .chev { animation: bob 1.8s ease-in-out infinite; } @keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } } /* ============ Buttons ============ */ .landing-button { display: inline-flex; align-items: center; justify-content: center; gap: 9px; background: linear-gradient(180deg, var(--violet), var(--violet-2)); color: #fff; border-radius: 50px; padding: 15px 30px; font-family: 'Hanken Grotesk', sans-serif; font-size: 16px; font-weight: 600; white-space: nowrap; text-decoration: none; border: none; cursor: pointer; box-shadow: 0 10px 34px rgba(123, 92, 255, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.28); transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.3s ease; } .landing-button:hover { transform: translateY(-2px) scale(1.03); box-shadow: 0 16px 46px rgba(123, 92, 255, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.35); } .secondary-button { display: inline-flex; align-items: center; justify-content: center; gap: 9px; background: rgba(255, 255, 255, 0.06); color: #fff; border-radius: 50px; padding: 15px 30px; font-family: 'Hanken Grotesk', sans-serif; font-size: 16px; font-weight: 600; white-space: nowrap; text-decoration: none; border: 1px solid rgba(255, 255, 255, 0.16); cursor: pointer; backdrop-filter: blur(10px); transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), background 0.3s ease, border-color 0.3s ease; } .secondary-button:hover { transform: translateY(-2px) scale(1.03); background: rgba(255, 255, 255, 0.11); border-color: rgba(255, 255, 255, 0.28); } /* ============ Hero pip pill ============ */ .pip-pill { position: relative; display: inline-flex; align-items: center; gap: 10px; margin: 0 0 30px; padding: 11px 18px; font-size: 14.5px; color: rgba(255, 255, 255, 0.88); background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 12px; cursor: pointer; transition: border-color 160ms ease, background 160ms ease; } .pip-pill:hover { border-color: rgba(123, 92, 255, 0.65); background: rgba(123, 92, 255, 0.1); } .pip-pill:focus-visible { outline: 2px solid #7b5cff; outline-offset: 2px; } .pip-dollar { color: rgba(255, 255, 255, 0.38); } .pip-copy { display: inline-flex; color: rgba(255, 255, 255, 0.55); margin-left: 4px; } .pip-copied { position: absolute; right: -68px; font-size: 12px; color: #3fe0ae; opacity: 0; transition: opacity 200ms ease; pointer-events: none; } .pip-copied.show { opacity: 1; }