neuron-technologies/neuron-web
3
0
Fork 0
Code Issues 2 Pull Requests 3 Actions Packages Projects Releases Wiki Activity
Files
42f0786f97303e8eb5bbaaf61b052354d17e8ece
neuron-web/src/styles.el
T
Will Anderson 42f0786f97
Dev — Build & local smoke test / build-smoke (push) Successful in 2m34s
Details
feat(account): add email/password sign-up to account page 
The sign-in form only offered social auth and a link to /checkout.
Users wanting to create an account directly had no path.

Changes:
- "No account? Create one" toggle replaces the old "Choose a plan" link
- switchToSignUp() / switchToSignIn() toggle button label, placeholder,
  and autocomplete between sign-in and sign-up modes
- Explicit signUpWithEmail() calls signUp() directly; with autoconfirm
  enabled it returns a session immediately and reloads into the dashboard
- signInWithEmail() simplified: no silent sign-up fallback, clean errors
- Re-extract account JS (6dafc1586705 -> dadeb8ddb9a8)
- Re-extract styles chat JS (de72b8b61d75 -> 02ecc8cf6542) as side effect
  of extract-js.py run
2026-05-04 08:16:20 -05:00

2031 lines
65 KiB
EmacsLisp
Raw Blame History

// styles.el - Page shell: DOCTYPE, <head>, CSS, and the minimal
// inline <script> for scroll-reveal and nav scroll effect.
//
// This file contains NO application logic - only the outer HTML
// document structure and presentation layer.
//
// CSS is kept as a string constant here to keep component files
// free of style concerns. The inline <script> at the bottom is
// the absolute minimum needed for two progressive-enhancement
// behaviours that cannot be done in pure CSS today:
// 1. IntersectionObserver scroll-reveal (adds .visible to .reveal)
// 2. Nav background on scroll (adds .scrolled to #nav)
//
// Both degrade gracefully: without JS, the page is fully readable
// and all content is visible (reveal elements are visible by default
// in the noscript fallback style).
fn page_open() -> String {
return "<!DOCTYPE html>
<html lang=\"en\">
<head>
<meta charset=\"UTF-8\">
<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">
<title>Neuron - The AI That Remembers You</title>
<meta name=\"description\" content=\"Every AI resets when you close the tab. Neuron doesn&#39;t. Runs on your machine. Remembers everything. Cheaper than ChatGPT on day one.\">
<link rel=\"icon\" type=\"image/png\" sizes=\"16x16\" href=\"/assets/favicon-16.png\">
<link rel=\"icon\" type=\"image/png\" sizes=\"32x32\" href=\"/assets/favicon-32.png\">
<link rel=\"preconnect\" href=\"https://fonts.googleapis.com\">
<link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin>
<link href=\"https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;1,400;1,500&family=IBM+Plex+Sans:wght@300;400;500;600&display=swap\" rel=\"stylesheet\">
<style>
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
--bg: #FAFAF8;
--bg2: #F0F0EC;
--card: #FFFFFF;
--navy: #0052A0;
--navy-d: rgba(0,82,160,.06);
--navy-m: rgba(0,82,160,.12);
--navy-b: rgba(0,82,160,.20);
--navy-65: rgba(0,82,160,.65);
--navy-85: rgba(0,82,160,.85);
--t1: #0D0D14;
--t2: #3A3A4A;
--t3: #6B6B7E;
--t4: rgba(13,13,20,.35);
--border: rgba(0,0,0,.07);
--border2: rgba(0,0,0,.13);
--head: 'Playfair Display', Georgia, serif;
--body: 'IBM Plex Sans', system-ui, sans-serif;
}
html { scroll-behavior: smooth; }
html, body {
background: var(--bg);
color: var(--t1);
font-family: var(--body);
font-weight: 400;
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
}
body::before {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: 0;
background-image:
linear-gradient(rgba(0,0,0,.022) 1px, transparent 1px),
linear-gradient(90deg, rgba(0,0,0,.022) 1px, transparent 1px);
background-size: 48px 48px;
}
.container { max-width: 1280px; margin: 0 auto; padding: 0 2.5rem; }
.container-md { max-width: 900px; margin: 0 auto; padding: 0 2.5rem; }
.container-lg { max-width: 1100px; margin: 0 auto; padding: 0 2.5rem; }
@media (max-width: 480px) {
.container, .container-md, .container-lg { padding: 0 1.25rem; }
}
section { position: relative; z-index: 1; overflow-x: clip; }
.label {
font-family: var(--body);
font-size: 0.75rem;
font-weight: 500;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--navy-65);
}
.display-xl {
font-family: var(--head);
font-size: clamp(2.8rem, 6vw, 5rem);
font-weight: 600;
line-height: 1.06;
letter-spacing: -0.02em;
color: var(--t1);
}
.display-lg {
font-family: var(--head);
font-size: clamp(2rem, 4vw, 3.25rem);
font-weight: 600;
line-height: 1.1;
letter-spacing: -0.02em;
color: var(--t1);
}
.display-md {
font-family: var(--head);
font-size: clamp(1.4rem, 2.5vw, 1.875rem);
font-weight: 600;
line-height: 1.15;
color: var(--t1);
}
.gold {
background: linear-gradient(135deg, #003d7a 0%, #0078D4 50%, #0052A0 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.ink-muted { color: var(--t2); }
.ink-faint { color: var(--t3); }
.navy-line {
height: 1px;
background: linear-gradient(90deg, rgba(0,82,160,.30) 0%, rgba(0,82,160,.08) 100%);
}
.navy-line-center {
height: 1px;
background: linear-gradient(90deg, transparent 0%, rgba(0,82,160,.35) 50%, transparent 100%);
}
.navy-line-left {
height: 1px;
background: linear-gradient(90deg, rgba(0,82,160,.40), transparent);
}
.card-dark {
background: var(--card);
border: 1px solid rgba(0,0,0,.07);
box-shadow: 0 2px 12px rgba(13,13,20,.04);
}
.btn-primary {
display: inline-flex;
align-items: center;
gap: 0.75rem;
font-family: var(--body);
font-size: 0.75rem;
font-weight: 500;
letter-spacing: 0.15em;
text-transform: uppercase;
text-decoration: none;
color: #fff;
background: var(--navy);
padding: 1rem 2rem;
border: none;
cursor: pointer;
transition: background 300ms, box-shadow 300ms;
box-shadow: 0 2px 16px rgba(0,82,160,.20);
}
.btn-primary:hover { background: #0078D4; }
.btn-ghost {
display: inline-flex;
align-items: center;
gap: 0.75rem;
font-family: var(--body);
font-size: 0.75rem;
font-weight: 400;
letter-spacing: 0.15em;
text-transform: uppercase;
text-decoration: none;
color: var(--t2);
background: transparent;
padding: 1rem 2rem;
border: 1px solid var(--border2);
cursor: pointer;
transition: border-color 300ms, color 300ms;
}
.btn-ghost:hover { border-color: rgba(0,82,160,.35); color: var(--t1); }
/* Scroll reveal - elements start invisible; JS adds .visible */
.reveal {
opacity: 0;
transform: translateY(28px);
transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.visible { opacity: 1; transform: translateY(0); }
/* Noscript fallback: make everything visible when JS is unavailable */
@media (prefers-reduced-motion: reduce) {
.reveal { opacity: 1; transform: none; transition: none; }
}
/* ── NAV ─────────────────────────────────────────────────────────────────── */
#nav {
position: fixed;
top: 0; left: 0; right: 0;
z-index: 100;
transition: background 500ms, border-color 500ms;
}
#nav.scrolled {
background: rgba(250,250,248,.95);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-bottom: 1px solid var(--border);
}
.nav-inner {
max-width: 1280px;
margin: 0 auto;
padding: 0 2rem;
height: 4rem;
display: flex;
align-items: center;
justify-content: space-between;
position: relative;
}
.nav-logo img { height: 2rem; width: auto; display: block; }
/* ── Desktop links ───────────────────────────────────────────── */
.nav-links {
display: flex;
align-items: center;
gap: 1.25rem;
flex-wrap: nowrap;
}
.nav-link {
font-family: var(--body);
font-size: 0.675rem;
font-weight: 400;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--t3);
text-decoration: none;
white-space: nowrap;
transition: color 200ms;
}
.nav-link:hover { color: var(--t1); }
.nav-link.cta { color: var(--navy); }
.nav-link.cta:hover { color: #0078D4; }
/* ── Nav dropdown ─────────────────────────────────────────────────────── */
.nav-dropdown { position: relative; display: flex; align-items: center; }
.nav-dropdown-btn {
background: none; border: none; cursor: pointer; padding: 0;
font-family: var(--body); font-size: 0.8125rem; font-weight: 400;
letter-spacing: 0.02em; color: var(--t2); transition: color 200ms;
}
.nav-dropdown-btn:hover { color: var(--t1); }
.nav-dropdown-menu {
display: none; position: absolute; top: calc(100% + 0.75rem); left: 50%;
transform: translateX(-50%); background: #fff;
border: 1px solid var(--border2); box-shadow: 0 8px 32px rgba(0,0,0,.10);
min-width: 160px; flex-direction: column; z-index: 200; padding: 0.375rem 0;
}
.nav-dropdown.open .nav-dropdown-menu { display: flex; }
.nav-dropdown-item {
font-family: var(--body); font-size: 0.8125rem; font-weight: 400;
color: var(--t2); text-decoration: none; padding: 0.5rem 1.25rem;
transition: background 150ms, color 150ms; white-space: nowrap;
}
.nav-dropdown-item:hover { background: var(--bg2); color: var(--t1); }
.nav-cta {
font-family: var(--body);
font-size: 0.675rem;
font-weight: 500;
letter-spacing: 0.15em;
text-transform: uppercase;
color: #fff;
background: var(--navy);
text-decoration: none;
padding: 0.575rem 1.1rem;
white-space: nowrap;
box-shadow: 0 2px 12px rgba(0,82,160,.20);
transition: background 300ms;
}
.nav-cta:hover { background: #0078D4; }
/* ── Hamburger button ────────────────────────────────────────── */
.nav-hamburger {
display: none;
flex-direction: column;
justify-content: center;
gap: 5px;
background: none;
border: none;
cursor: pointer;
padding: 6px 4px;
z-index: 101;
-webkit-tap-highlight-color: transparent;
}
.nav-hamburger span {
display: block;
width: 22px;
height: 2px;
background: var(--t1);
border-radius: 1px;
transition: transform 280ms ease, opacity 200ms ease;
transform-origin: center;
}
.nav-hamburger[aria-expanded=\"true\"] span:nth-child(1) {
transform: translateY(7px) rotate(45deg);
}
.nav-hamburger[aria-expanded=\"true\"] span:nth-child(2) {
opacity: 0;
transform: scaleX(0);
}
.nav-hamburger[aria-expanded=\"true\"] span:nth-child(3) {
transform: translateY(-7px) rotate(-45deg);
}
/* ── Mobile menu ─────────────────────────────────────────────── */
.nav-mobile {
display: none;
position: absolute;
top: 4rem;
left: 0; right: 0;
background: rgba(250,250,248,.98);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border-bottom: 1px solid var(--border);
padding: 0.5rem 0 1.5rem;
flex-direction: column;
box-shadow: 0 8px 32px rgba(0,0,0,.08);
}
.nav-mobile.open { display: flex; }
.nav-mobile-link {
display: block;
padding: 0.875rem 2rem;
font-family: var(--body);
font-size: 0.75rem;
font-weight: 400;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--t2);
text-decoration: none;
border-bottom: 1px solid rgba(0,0,0,.05);
transition: color 150ms, background 150ms;
}
.nav-mobile-link:last-child { border-bottom: none; }
.nav-mobile-link:hover { color: var(--t1); background: rgba(0,82,160,.03); }
.nav-mobile-link.cta { color: var(--navy); }
.nav-mobile-cta {
display: block;
margin: 1rem 2rem 0;
padding: 0.8rem 1.5rem;
text-align: center;
font-family: var(--body);
font-size: 0.75rem;
font-weight: 500;
letter-spacing: 0.15em;
text-transform: uppercase;
color: #fff;
background: var(--navy);
text-decoration: none;
}
/* ── Responsive breakpoints ──────────────────────────────────── */
@media (max-width: 1060px) {
.nav-links { display: none; }
.nav-hamburger { display: flex; }
}
@media (min-width: 1061px) {
.nav-mobile { display: none !important; }
.nav-hamburger { display: none !important; }
}
/* ── HERO ───────────────────────────────────────────────────────────────── */
#hero {
padding: clamp(7rem, 18vh, 11rem) clamp(1.25rem, 5vw, 2.5rem) clamp(5rem, 12vh, 8rem);
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
overflow: hidden;
}
#hero .glow-tl {
position: absolute;
top: -10%; left: -5%;
width: 60%; height: 70%;
background: radial-gradient(circle, rgba(0,82,160,.07) 0%, transparent 70%);
pointer-events: none;
}
#hero .glow-br {
position: absolute;
bottom: -10%; right: -5%;
width: 55%; height: 65%;
background: radial-gradient(circle, rgba(0,120,212,.06) 0%, transparent 70%);
pointer-events: none;
}
.hero-label { margin-bottom: 2rem; }
.hero-headline { max-width: 56rem; margin-bottom: 1.5rem; }
.hero-sub {
font-family: var(--body);
font-weight: 300;
font-size: clamp(1rem, 2vw, 1.25rem);
color: var(--t2);
line-height: 1.7;
max-width: 36rem;
margin-bottom: 3rem;
}
.hero-ctas { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; justify-content: center; }
.hero-scroll {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
margin-top: 4rem;
opacity: 0;
animation: fadeIn 600ms ease 700ms forwards;
}
.hero-scroll span {
font-size: 0.65rem;
font-weight: 500;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--t3);
}
.hero-scroll-line {
width: 1px; height: 2.5rem;
background: linear-gradient(to bottom, var(--t3), transparent);
}
@keyframes fadeIn { to { opacity: 1; } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
.animate-up-1 { animation: fadeUp 0.7s cubic-bezier(0.16,1,0.3,1) 0.1s both; }
.animate-up-2 { animation: fadeUp 0.7s cubic-bezier(0.16,1,0.3,1) 0.2s both; }
.animate-up-3 { animation: fadeUp 0.7s cubic-bezier(0.16,1,0.3,1) 0.3s both; }
.animate-up-5 { animation: fadeUp 0.7s cubic-bezier(0.16,1,0.3,1) 0.5s both; }
/* ── PILLARS ─────────────────────────────────────────────────────────────── */
#pillars {
padding: 8rem 2.5rem;
background: var(--bg2);
}
.pillars-label { margin-bottom: 4rem; display: flex; align-items: center; gap: 1.5rem; }
.pillars-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
}
@media (max-width: 900px) { .pillars-grid { grid-template-columns: 1fr; } }
.pillar-card {
padding: 2.5rem 3rem;
display: flex;
flex-direction: column;
}
.pillar-numeral {
font-family: var(--head);
font-size: 3rem;
font-weight: 600;
color: rgba(0,82,160,.22);
display: block;
margin-bottom: 2rem;
}
.pillar-title { margin-bottom: 1.25rem; }
.pillar-rule {
width: 3rem; height: 1px;
background: rgba(0,82,160,.30);
margin-bottom: 1.5rem;
transition: width 700ms ease;
}
.pillar-card:hover .pillar-rule { width: 100%; }
.pillar-body {
font-family: var(--body);
font-weight: 300;
font-size: 0.95rem;
color: var(--t2);
line-height: 1.75;
flex: 1;
}
.pillar-detail {
margin-top: 2rem;
font-size: 0.7rem;
font-weight: 500;
letter-spacing: 0.15em;
text-transform: uppercase;
color: rgba(0,82,160,.45);
}
/* ── HOW IT WORKS ─────────────────────────────────────────────────────────── */
#how-it-works {
padding: 8rem 2.5rem 4rem;
}
.hiw-header { margin-bottom: 5rem; }
.hiw-label-row { display: flex; align-items: center; gap: 1.5rem; margin-bottom: 1.25rem; }
.steps-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 3rem 2rem;
position: relative;
}
.steps-grid::before {
content: '';
position: absolute;
top: 1.5rem;
left: 2rem; right: 2rem;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(0,82,160,.15) 10%, rgba(0,82,160,.25) 50%, rgba(0,82,160,.15) 90%, transparent);
pointer-events: none;
}
@media (max-width: 900px) {
.steps-grid { grid-template-columns: 1fr; }
.steps-grid::before { display: none; }
}
.step-circle-row { display: flex; align-items: center; gap: 1rem; margin-bottom: 2rem; }
.step-circle {
width: 3rem; height: 3rem; border-radius: 50%;
border: 1.5px solid rgba(0,82,160,.45);
background: var(--bg);
display: flex; align-items: center; justify-content: center;
position: relative; z-index: 1;
flex-shrink: 0;
}
.step-num {
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.12em;
color: rgba(0,82,160,.80);
}
.step-aside {
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.15em;
text-transform: uppercase;
color: rgba(0,82,160,.80);
}
.step-title { margin-bottom: 1rem; }
.step-body {
font-family: var(--body);
font-weight: 300;
font-size: 0.95rem;
color: var(--t2);
line-height: 1.75;
}
/* ── INFERENCE ───────────────────────────────────────────────────────────── */
#inference {
padding: 4rem 2.5rem 6rem;
}
.inference-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 6rem;
align-items: center;
}
@media (max-width: 900px) { .inference-grid { grid-template-columns: 1fr; gap: 3rem; } }
.inference-label-row { display: flex; align-items: center; gap: 1.5rem; margin-bottom: 1.5rem; }
.inference-headline { margin-bottom: 1.5rem; }
.inference-body {
font-family: var(--body);
font-weight: 300;
font-size: 1rem;
color: var(--t2);
line-height: 1.8;
margin-bottom: 1.5rem;
}
.stat-row {
border-top: 1px solid rgba(0,82,160,.15);
padding: 1.5rem 0;
}
.stat-row:last-child { border-bottom: 1px solid rgba(0,82,160,.15); }
.stat-row-head { display: flex; align-items: baseline; gap: 1rem; margin-bottom: 0.5rem; }
.stat-num {
font-family: var(--head);
font-size: 1.5rem;
font-weight: 600;
color: var(--navy);
}
.stat-label {
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.13em;
text-transform: uppercase;
color: var(--navy);
}
.stat-body {
font-family: var(--body);
font-weight: 300;
font-size: 0.875rem;
color: var(--t2);
line-height: 1.7;
}
/* ── EFFICIENCY ──────────────────────────────────────────────────────────── */
#efficiency {
padding: 5rem 2.5rem;
}
.efficiency-header { margin-bottom: 4rem; }
.efficiency-label-row { display: flex; align-items: center; gap: 1.5rem; margin-bottom: 1.25rem; }
.efficiency-sub {
font-family: var(--body);
font-weight: 300;
font-size: 1rem;
color: var(--t2);
line-height: 1.75;
max-width: 36rem;
}
.efficiency-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
margin-bottom: 3.5rem;
}
@media (max-width: 900px) { .efficiency-grid { grid-template-columns: 1fr; } }
.efficiency-card {
padding: 2.5rem;
text-align: center;
}
.efficiency-icon {
width: 4rem; height: 4rem;
border-radius: 50%;
border: 1.5px solid rgba(0,82,160,.20);
background: rgba(0,82,160,.04);
color: rgba(0,82,160,.70);
display: flex; align-items: center; justify-content: center;
margin: 0 auto 2rem;
}
.efficiency-stat {
font-family: var(--head);
font-size: 1.75rem;
font-weight: 600;
color: var(--navy);
margin-bottom: 0.75rem;
}
.efficiency-title {
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.13em;
text-transform: uppercase;
color: var(--navy);
margin-bottom: 1.25rem;
}
.efficiency-rule {
width: 2.5rem; height: 1px;
background: rgba(0,82,160,.25);
margin: 0 auto 1.5rem;
transition: width 700ms ease;
}
.efficiency-card:hover .efficiency-rule { width: 60%; }
.efficiency-body {
font-family: var(--body);
font-weight: 300;
font-size: 0.875rem;
color: var(--t2);
line-height: 1.75;
}
.efficiency-pullquote {
border-left: 2px solid rgba(0,82,160,.25);
padding: 0.25rem 0 0.25rem 1.5rem;
max-width: 40rem;
}
.efficiency-pullquote p {
font-family: var(--body);
font-weight: 400;
font-size: 0.875rem;
color: rgba(0,82,160,.65);
line-height: 1.75;
}
/* ── ENTERPRISE ──────────────────────────────────────────────────────────── */
#enterprise {
padding: 8rem 2.5rem;
background: var(--bg2);
}
.enterprise-header { margin-bottom: 4rem; }
.enterprise-label-row { display: flex; align-items: center; gap: 1.5rem; margin-bottom: 1.25rem; }
.enterprise-head-row {
display: flex; flex-wrap: wrap;
align-items: flex-end; justify-content: space-between;
gap: 2rem;
}
.enterprise-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.5rem;
margin-bottom: 2.5rem;
}
@media (max-width: 768px) { .enterprise-grid { grid-template-columns: 1fr; } }
.enterprise-cap {
padding: 2.5rem;
}
.enterprise-cap h3 { margin-bottom: 1.25rem; }
.enterprise-cap-rule {
width: 3rem; height: 1px;
background: rgba(0,82,160,.30);
margin-bottom: 1.5rem;
transition: width 700ms ease;
}
.enterprise-cap:hover .enterprise-cap-rule { width: 100%; }
.enterprise-cap-body {
font-family: var(--body);
font-weight: 300;
font-size: 0.9rem;
color: var(--t2);
line-height: 1.75;
}
.enterprise-box {
border-top: 2px solid rgba(0,82,160,.15);
background: rgba(0,82,160,.03);
padding: clamp(1.5rem, 4vw, 3rem);
}
.ent-who-label {
font-size: 0.7rem;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(0,82,160,.65);
margin-bottom: 1rem;
}
.ent-who-body {
font-family: var(--body);
font-weight: 300;
font-size: 0.9375rem;
color: var(--t1);
line-height: 1.75;
margin-bottom: 0.75rem;
}
.ent-who-note {
font-size: 0.875rem;
color: var(--t2);
line-height: 1.6;
margin-bottom: 2.5rem;
}
.ent-how-row { display: flex; flex-wrap: wrap; gap: 2.5rem; align-items: flex-start; }
.ent-how-label { flex-shrink: 0; width: 10rem; }
.ent-steps { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
@media (max-width: 768px) { .ent-steps { grid-template-columns: 1fr; } }
.ent-step-num { font-family: monospace; font-size: 0.75rem; color: rgba(0,82,160,.40); margin-bottom: 0.75rem; }
.ent-step-title { font-size: 0.875rem; font-weight: 500; color: var(--t1); margin-bottom: 0.5rem; }
.ent-step-body { font-family: var(--body); font-weight: 300; font-size: 0.875rem; color: var(--t2); line-height: 1.7; }
.ent-terms-row {
border-top: 1px solid rgba(0,82,160,.10);
margin-top: 2.5rem;
padding-top: 2rem;
display: flex; flex-wrap: wrap;
align-items: center; justify-content: space-between;
gap: 1rem;
}
.ent-terms-text { font-size: 0.875rem; color: var(--t2); max-width: 32rem; }
.ent-terms-link {
font-size: 0.75rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: rgba(0,82,160,.70);
text-decoration: none;
transition: color 200ms;
white-space: nowrap;
}
.ent-terms-link:hover { color: var(--navy); }
.ent-badge {
display: inline-flex;
align-items: center; gap: 0.5rem;
border: 1px solid rgba(0,82,160,.20);
background: rgba(0,82,160,.04);
padding: 0.5rem 1rem;
font-size: 0.7rem;
font-weight: 500;
letter-spacing: 0.15em;
text-transform: uppercase;
color: rgba(0,82,160,.75);
margin-bottom: 0.75rem;
}
.ent-badge-dot {
width: 6px; height: 6px;
border-radius: 50%;
background: var(--navy);
opacity: 0.6;
flex-shrink: 0;
}
/* ── MISSION ─────────────────────────────────────────────────────────────── */
#mission {
padding: 8rem 2.5rem;
}
.mission-origin { max-width: 48rem; margin: 0 auto 5rem; text-align: center; }
.mission-label-row { display: flex; align-items: center; justify-content: center; gap: 1.5rem; margin-bottom: 2rem; }
.mission-headline { margin-bottom: 3rem; }
.mission-body-para {
font-family: var(--body);
font-weight: 400;
font-size: clamp(0.9rem, 1.5vw, 1.0625rem);
color: var(--t2);
line-height: 1.9;
margin-bottom: 1.5rem;
}
.mission-body-emphasis strong { color: var(--t1); }
.mission-bigtech {
max-width: 48rem;
margin: 0 auto 6rem;
border-left: 3px solid var(--navy);
padding-left: 1.5rem;
}
.mission-bigtech-label {
font-size: 0.7rem;
font-weight: 500;
letter-spacing: 0.2em;
text-transform: uppercase;
color: rgba(0,82,160,.65);
margin-bottom: 1rem;
}
.mission-bigtech p {
font-family: var(--body);
font-weight: 400;
font-size: 0.9375rem;
line-height: 1.8;
margin-bottom: 1rem;
color: var(--t1);
}
.mission-bigtech p.muted { color: var(--t2); }
.mission-bigtech a { color: var(--navy); text-decoration: underline; text-underline-offset: 3px; }
.mission-problems { max-width: 64rem; margin: 0 auto; }
.mission-sub-row { display: flex; align-items: center; gap: 1.5rem; margin-bottom: 3.5rem; }
.mission-sub-line { height: 1px; width: 3rem; background: rgba(0,82,160,.40); }
.problems-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0;
}
@media (max-width: 768px) { .problems-grid { grid-template-columns: 1fr; } }
.problem-item {
border-top: 1px solid rgba(0,82,160,.15);
padding: 2rem 3rem 2rem 0;
}
.problem-item:nth-child(even) {
padding: 2rem 0 2rem 3rem;
border-left: 1px solid rgba(0,82,160,.10);
}
@media (max-width: 768px) {
.problem-item { padding: 2rem 0; }
.problem-item:nth-child(even) { padding: 2rem 0; border-left: none; }
}
.problems-grid-bottom { border-top: 1px solid rgba(0,82,160,.15); grid-column: 1 / -1; }
.problem-label {
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--navy);
margin-bottom: 0.75rem;
}
.problem-body {
font-family: var(--body);
font-weight: 400;
font-size: 0.875rem;
color: var(--t2);
line-height: 1.75;
}
.mission-closer {
text-align: center;
margin-top: 4rem;
max-width: 40rem;
margin-left: auto;
margin-right: auto;
}
.mission-closer p {
font-family: var(--head);
font-size: clamp(1.25rem, 2.5vw, 1.75rem);
font-weight: 600;
color: var(--t1);
line-height: 1.35;
}
.mission-closer span { color: var(--navy); }
/* ── LOCAL FIRST ─────────────────────────────────────────────────────────── */
#local-first {
padding: 8rem 2.5rem 5rem;
background: var(--bg2);
position: relative;
}
#local-first::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0; height: 3px;
background: linear-gradient(90deg, var(--navy) 0%, rgba(0,82,160,.20) 60%, transparent 100%);
}
.lf-label-row { display: flex; align-items: center; gap: 1.5rem; margin-bottom: 4rem; }
.lf-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 6rem;
align-items: start;
}
@media (max-width: 900px) { .lf-grid { grid-template-columns: 1fr; gap: 3rem; } }
.lf-headline { margin-bottom: 2rem; }
.lf-manifesto-para {
font-family: var(--body);
font-weight: 300;
font-size: 0.9375rem;
color: var(--t2);
line-height: 1.85;
margin-bottom: 1.25rem;
}
.lf-manifesto-closer {
border-left: 2px solid var(--navy);
padding-left: 1.25rem;
margin-top: 2rem;
}
.lf-manifesto-closer p {
font-family: var(--body);
font-weight: 400;
font-size: 0.9375rem;
color: var(--t1);
line-height: 1.8;
}
.lf-principles { position: sticky; top: 6rem; }
.lf-principle {
border-top: 1px solid rgba(0,82,160,.15);
padding: 1.75rem 0;
}
.lf-principle:last-child { border-bottom: 1px solid rgba(0,82,160,.15); }
.lf-principle-label {
font-size: 0.75rem;
font-weight: 500;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--navy);
margin-bottom: 0.5rem;
}
.lf-principle-body {
font-family: var(--body);
font-weight: 400;
font-size: 0.875rem;
color: var(--t2);
line-height: 1.7;
}
.lf-callout {
border-top: 1px solid rgba(0,82,160,.15);
margin-top: 4rem;
padding-top: 2.5rem;
text-align: center;
}
.lf-callout-h {
font-family: var(--head);
font-size: clamp(1.5rem, 3vw, 2.25rem);
font-weight: 600;
color: var(--t1);
margin-bottom: 0.5rem;
}
.lf-callout-h2 {
font-family: var(--head);
font-size: clamp(1.5rem, 3vw, 2.25rem);
font-weight: 600;
color: var(--navy);
margin-bottom: 1rem;
}
.lf-callout-sub {
font-size: 0.7rem;
font-weight: 500;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--t3);
}
/* ── PRICING ─────────────────────────────────────────────────────────────── */
#pricing {
padding: 8rem 2.5rem;
}
.pricing-label-row {
display: flex; align-items: center; justify-content: center; gap: 1.5rem;
margin-bottom: 1.25rem;
}
.pricing-header { text-align: center; margin-bottom: 4rem; }
.pricing-headline { margin-bottom: 1rem; }
.pricing-sub {
font-family: var(--body);
font-weight: 300;
font-size: 1rem;
color: var(--t2);
}
.pricing-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
max-width: 68rem;
margin: 0 auto 2.5rem;
}
@media (max-width: 900px) { .pricing-grid { grid-template-columns: 1fr; } }
.pricing-card {
padding: 2.5rem;
display: flex;
flex-direction: column;
}
.pricing-card.featured {
background: var(--card);
border: 1px solid rgba(0,82,160,.35);
box-shadow: 0 4px 24px rgba(0,82,160,.10);
position: relative;
}
.pricing-card.featured::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0; height: 1px;
background: linear-gradient(90deg, transparent, rgba(0,82,160,.5) 30%, rgba(0,82,160,.8) 50%, rgba(0,82,160,.5) 70%, transparent);
}
.pricing-card.featured::after {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
background: radial-gradient(ellipse 80% 40% at 50% -10%, rgba(0,82,160,.07) 0%, transparent 70%);
}
.pricing-tier {
font-size: 0.75rem;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--t2);
margin-bottom: 0.75rem;
}
.pricing-card.featured .pricing-tier { color: var(--navy); }
.pricing-price-row { display: flex; align-items: baseline; gap: 0.5rem; margin-bottom: 0.5rem; }
.pricing-price {
font-family: var(--head);
font-size: clamp(2.5rem, 5vw, 3.75rem);
font-weight: 600;
color: var(--t1);
}
.pricing-cadence { font-size: 0.875rem; color: var(--t3); }
.pricing-tagline {
font-size: 0.8125rem;
color: var(--t3);
margin-bottom: 2.5rem;
line-height: 1.5;
}
.pricing-card.featured .pricing-tagline { color: rgba(0,82,160,.55); }
.pricing-features { list-style: none; flex: 1; }
.pricing-features li {
display: flex;
align-items: flex-start;
gap: 0.75rem;
margin-bottom: 1rem;
}
.pricing-features li .dash { color: rgba(0,82,160,.30); flex-shrink: 0; margin-top: 0.05rem; }
.pricing-card.featured .pricing-features li .dash { color: var(--navy); }
.pricing-features li span { font-size: 0.875rem; color: var(--t2); line-height: 1.5; }
.pricing-cta { margin-top: 1.5rem; }
.pricing-cta a {
display: flex;
width: 100%;
align-items: center;
justify-content: center;
gap: 0.75rem;
font-family: var(--body);
font-size: 0.75rem;
font-weight: 500;
letter-spacing: 0.15em;
text-transform: uppercase;
text-decoration: none;
padding: 1rem;
transition: background 300ms, color 300ms, border-color 300ms;
}
.pricing-cta-ghost a {
border: 1px solid var(--border2);
color: var(--t2);
background: transparent;
}
.pricing-cta-ghost a:hover { border-color: rgba(0,82,160,.30); color: var(--navy); }
.pricing-cta-navy a {
border: 1px solid rgba(0,82,160,.30);
color: var(--navy);
background: transparent;
}
.pricing-cta-navy a:hover { background: var(--navy); color: #fff; }
.pricing-cta-solid a {
background: var(--navy);
color: #fff;
box-shadow: 0 2px 16px rgba(0,82,160,.25);
}
.pricing-cta-solid a:hover { background: #0078D4; }
.founding-spots {
margin-bottom: 1.5rem;
}
.founding-spots-label {
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--navy);
}
.founding-spots-bar {
margin-top: 0.5rem;
height: 4px;
background: rgba(0,82,160,.10);
overflow: hidden;
}
.founding-spots-fill {
height: 100%;
background: var(--navy);
transition: width 1000ms ease;
}
.founding-spots-sub {
margin-top: 0.25rem;
font-size: 0.6875rem;
color: var(--t4);
letter-spacing: 0.04em;
}
.pricing-fine {
text-align: center;
font-size: 0.7rem;
font-weight: 500;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--t3);
max-width: 68rem;
margin: 0 auto;
overflow-wrap: break-word;
word-break: break-word;
}
.founding-banner {
max-width: 64rem;
margin: 2.5rem auto 0;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.5rem;
padding: 1.5rem 2rem;
background: rgba(0,82,160,.04);
border: 1px solid rgba(0,82,160,.18);
}
@media (max-width: 600px) { .founding-banner { flex-direction: column; align-items: flex-start; } }
.founding-banner-label {
font-size: 0.7rem;
font-weight: 500;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--navy);
margin-bottom: 0.25rem;
}
.founding-banner-count {
font-family: var(--head);
font-size: 2rem;
font-weight: 600;
color: var(--t1);
}
.founding-banner-sub { font-size: 0.875rem; color: var(--t3); }
.founding-banner-bar {
margin-top: 0.5rem;
height: 6px;
width: 12rem;
background: rgba(0,0,0,.07);
border-radius: 9999px;
overflow: hidden;
}
.founding-banner-fill {
height: 100%;
border-radius: 9999px;
background: var(--navy);
transition: width 800ms ease;
}
/* ── SHARE ───────────────────────────────────────────────────────────────── */
#share {
padding: 8rem 2.5rem;
}
.share-label-row { display: flex; align-items: center; gap: 1.5rem; margin-bottom: 1.25rem; }
.share-headline { margin-bottom: 4rem; }
.share-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2rem;
max-width: 56rem;
margin: 0 auto;
}
@media (max-width: 768px) { .share-grid { grid-template-columns: 1fr; } }
.share-card {
padding: 2rem;
}
.share-card-label {
font-size: 0.75rem;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--navy);
margin-bottom: 0.5rem;
}
.share-card-body {
font-size: 0.875rem;
color: var(--t2);
line-height: 1.6;
margin-bottom: 1.5rem;
}
.hook-item {
border: 1px solid rgba(0,82,160,.12);
background: var(--bg);
padding: 1rem;
margin-bottom: 0.75rem;
position: relative;
}
.hook-text {
font-size: 0.875rem;
color: var(--t2);
line-height: 1.6;
padding-right: 5rem;
}
.hook-actions {
position: absolute;
top: 0.75rem; right: 0.75rem;
display: flex; gap: 0.25rem;
}
.hook-btn {
font-size: 0.6rem;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
color: rgba(0,82,160,.55);
border: 1px solid rgba(0,82,160,.20);
background: transparent;
padding: 0.25rem 0.625rem;
cursor: pointer;
transition: color 200ms, border-color 200ms, background 200ms;
text-decoration: none;
}
.hook-btn:hover { color: var(--navy); border-color: rgba(0,82,160,.50); background: var(--navy-d); }
.invite-form { display: flex; gap: 0; }
.invite-input {
flex: 1;
font-family: var(--body);
font-size: 0.875rem;
color: var(--t1);
background: var(--card);
border: 1px solid rgba(0,82,160,.18);
border-right: none;
padding: 0.75rem 1rem;
outline: none;
transition: border-color 200ms;
}
.invite-input:focus { border-color: rgba(0,82,160,.50); }
.invite-input::placeholder { color: var(--t3); }
.invite-submit {
flex-shrink: 0;
font-family: var(--body);
font-size: 0.7rem;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #fff;
background: var(--navy);
border: none;
padding: 0.75rem 1.25rem;
cursor: pointer;
transition: background 300ms;
min-width: 6rem;
}
.invite-submit:hover { background: #0078D4; }
.invite-note { font-size: 0.625rem; color: var(--t3); letter-spacing: 0.08em; text-transform: uppercase; margin-top: 0.5rem; }
.linkedin-share-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 0.625rem;
width: 100%;
font-family: var(--body);
font-size: 0.7rem;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
color: rgba(0,82,160,.70);
border: 1px solid rgba(0,82,160,.20);
background: transparent;
padding: 0.75rem;
cursor: pointer;
transition: border-color 300ms, color 300ms, background 300ms;
margin-top: 1rem;
text-decoration: none;
}
.linkedin-share-btn:hover {
border-color: rgba(0,82,160,.50);
color: var(--navy);
background: rgba(0,82,160,.04);
}
/* ── FOOTER ──────────────────────────────────────────────────────────────── */
#footer {
padding: 5rem 2.5rem 2.5rem;
border-top: 1px solid var(--border);
}
.footer-inner {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
justify-content: space-between;
gap: 2.5rem;
margin-bottom: 3rem;
}
.footer-brand { text-decoration: none; }
.footer-brand-name {
font-family: var(--head);
font-size: 1.5rem;
font-weight: 600;
color: var(--t1);
letter-spacing: -0.02em;
}
.footer-brand-tagline {
font-size: 0.7rem;
font-weight: 500;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--t3);
margin-top: 0.25rem;
}
.footer-center { flex: 1; min-width: 6rem; }
.footer-right { display: flex; flex-direction: column; align-items: flex-end; gap: 1rem; }
.footer-domain { font-size: 0.875rem; color: var(--t2); letter-spacing: 0.04em; }
.footer-nav { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.footer-nav a {
font-size: 0.65rem;
font-weight: 500;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--t3);
text-decoration: none;
transition: color 200ms;
}
.footer-nav a:hover { color: var(--navy); }
.footer-bottom {
border-top: 1px solid var(--border);
padding-top: 2rem;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 1rem;
}
.footer-copy { font-size: 0.75rem; color: var(--t3); }
.footer-tagline-bottom { font-size: 0.75rem; color: var(--t3); }
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--navy); border-radius: 2px; }
::-webkit-scrollbar-thumb:hover { background: #0078D4; }
.delay-100 { transition-delay: 100ms !important; }
.delay-200 { transition-delay: 200ms !important; }
.delay-300 { transition-delay: 300ms !important; }
.delay-400 { transition-delay: 400ms !important; }
.delay-500 { transition-delay: 500ms !important; }
.delay-600 { transition-delay: 600ms !important; }
.delay-700 { transition-delay: 700ms !important; }
.delay-800 { transition-delay: 800ms !important; }
/* ── NEURON DEMO CHAT WIDGET ────────────────────────────────────────────── */
#neuron-demo-btn {
position: fixed;
bottom: 2rem;
right: 2rem;
z-index: 9999;
}
#neuron-demo-btn button {
display: flex;
align-items: center;
gap: 0.625rem;
background: var(--navy);
color: #fff;
border: none;
cursor: pointer;
padding: 0.875rem 1.5rem;
font-family: var(--body);
font-size: 0.75rem;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
box-shadow: 0 4px 24px rgba(0,82,160,.35);
transition: background 300ms, box-shadow 300ms, transform 200ms;
}
#neuron-demo-btn button:hover {
background: #0078D4;
box-shadow: 0 6px 32px rgba(0,82,160,.45);
transform: translateY(-1px);
}
#neuron-demo-btn img {
width: 20px;
height: 20px;
object-fit: contain;
filter: brightness(0) invert(1);
}
#neuron-demo-panel {
position: fixed;
bottom: 5.5rem;
right: 2rem;
z-index: 9998;
width: 32rem;
max-width: calc(100vw - 2rem);
background: var(--card);
border: 1px solid rgba(0,82,160,.20);
border-radius: 1rem;
box-shadow: 0 16px 64px rgba(0,0,0,.15), 0 4px 16px rgba(0,82,160,.12);
display: flex;
flex-direction: column;
max-height: 70vh;
overflow: hidden;
animation: demoSlideIn 200ms cubic-bezier(0.16,1,0.3,1) both;
}
@media (max-width: 600px) {
#neuron-demo-panel {
right: 0;
left: 0;
bottom: 0;
width: 100%;
max-width: 100%;
max-height: 88vh;
border-left: none;
border-right: none;
border-bottom: none;
border-radius: 1.25rem 1.25rem 0 0;
box-shadow: 0 -8px 40px rgba(0,0,0,.18);
}
#neuron-demo-btn {
bottom: 1rem;
right: 1rem;
}
}
@keyframes demoSlideIn {
from { opacity: 0; transform: translateY(16px) scale(0.97); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
#neuron-demo-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1rem 1.25rem;
background: var(--navy);
color: #fff;
flex-shrink: 0;
border-radius: 1rem 1rem 0 0;
}
#neuron-demo-header-left {
display: flex;
align-items: center;
gap: 0.625rem;
}
#neuron-demo-header-left img {
width: 18px;
height: 18px;
object-fit: contain;
filter: brightness(0) invert(1);
opacity: 0.9;
}
#neuron-demo-header span {
font-family: var(--body);
font-size: 1rem;
font-weight: 700;
color: #fff;
letter-spacing: 0;
text-transform: none;
}
#neuron-demo-header-sub { display: none; }
#neuron-demo-close {
background: none;
border: none;
cursor: pointer;
padding: 0.375rem;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
opacity: 0.65;
transition: opacity 200ms;
}
#neuron-demo-close:hover { opacity: 1; }
#neuron-demo-close svg { display: block; }
#neuron-demo-messages {
flex: 1;
overflow-y: auto;
padding: 1.25rem 1.5rem;
display: flex;
flex-direction: column;
gap: 1rem;
min-height: 12rem;
max-height: 30rem;
scrollbar-width: thin;
}
.demo-msg {
display: flex;
flex-direction: row;
align-items: flex-start;
gap: 0.5rem;
font-family: var(--body);
font-size: 0.875rem;
line-height: 1.6;
background: none;
padding: 0;
border: none;
}
.demo-msg-user { align-self: flex-end; flex-direction: row-reverse; }
.demo-msg-ai { align-self: flex-start; width: 100%; }
.demo-msg-ai-body { display: flex; flex-direction: column; gap: 0; flex: 1; min-width: 0; }
.demo-msg-bubble { width: fit-content; }
.demo-msg-avatar {
width: 2rem;
height: 2rem;
border-radius: 50%;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
margin-top: 0.1rem;
}
.demo-msg-ai .demo-msg-avatar { background: #fff; border: 1px solid var(--border); }
.demo-msg-ai .demo-msg-avatar img { width: 1.125rem; height: 1.125rem; display: block; object-fit: contain; }
.demo-msg-user .demo-msg-avatar { background: var(--bg2); border: 1px solid var(--border); }
.demo-msg-user .demo-msg-avatar svg { color: var(--t3); }
.demo-msg-bubble {
max-width: calc(100% - 2.25rem);
padding: 0.625rem 0.875rem;
border-radius: 1rem;
}
.demo-msg-ai .demo-msg-bubble {
background: var(--bg2);
color: var(--t1);
border-radius: 0.25rem 1rem 1rem 1rem;
}
.demo-msg-user .demo-msg-bubble {
background: var(--navy);
color: #fff;
border-radius: 1rem 0.25rem 1rem 1rem;
}
.demo-msg-ai .demo-msg-bubble p { margin: 0; }
.demo-msg-ai .demo-msg-bubble p + p { margin-top: 0.75rem; }
.demo-msg-ai .demo-msg-bubble ul, .demo-msg-ai .demo-msg-bubble ol { margin: 0.5rem 0 0.5rem 1.25rem; }
.demo-msg-ai .demo-msg-bubble li + li { margin-top: 0.25rem; }
.demo-msg-ai .demo-msg-bubble strong { font-weight: 600; }
.demo-msg-ai .demo-msg-bubble em { font-style: italic; }
.demo-msg-ai .demo-msg-bubble a { color: var(--navy); text-decoration: underline; }
/* Code: marked.js emits <code> for inline backticks and <pre><code> for
fenced blocks. Without these rules they render as unstyled inline
text and the user can't tell where the code starts and stops. */
.demo-msg-ai .demo-msg-bubble code {
font-family: 'IBM Plex Mono', Menlo, Consolas, monospace;
font-size: 0.85em;
background: rgba(0, 0, 0, 0.06);
padding: 1px 4px;
border-radius: 3px;
word-break: break-word;
}
.demo-msg-ai .demo-msg-bubble pre {
background: rgba(0, 0, 0, 0.06);
padding: 0.75rem;
border-radius: 6px;
overflow-x: auto;
font-size: 0.85em;
line-height: 1.5;
margin: 0.5rem 0;
max-width: 100%;
white-space: pre;
}
.demo-msg-ai .demo-msg-bubble pre code {
background: none;
padding: 0;
font-size: inherit;
word-break: normal;
}
.demo-msg-ai .demo-msg-bubble blockquote {
border-left: 3px solid var(--border);
margin: 0.5rem 0;
padding: 0.25rem 0 0.25rem 0.75rem;
color: var(--t2);
}
.demo-msg-ai .demo-msg-bubble h1,
.demo-msg-ai .demo-msg-bubble h2,
.demo-msg-ai .demo-msg-bubble h3,
.demo-msg-ai .demo-msg-bubble h4 {
font-weight: 600;
margin: 0.5rem 0 0.25rem;
}
.demo-msg-ai .demo-msg-bubble h1 { font-size: 1.05em; }
.demo-msg-ai .demo-msg-bubble h2 { font-size: 1em; }
.demo-msg-ai .demo-msg-bubble h3 { font-size: 0.95em; }
.demo-msg-ai .demo-msg-bubble h4 { font-size: 0.9em; }
.demo-msg-share {
position: relative;
margin-top: 0.375rem;
align-self: flex-start;
margin-left: 2.5rem;
}
.demo-msg-share-btn {
background: none;
border: none;
cursor: pointer;
color: var(--t3);
font-family: var(--body);
font-size: 0.65rem;
letter-spacing: 0.06em;
text-transform: uppercase;
padding: 0.2rem 0.4rem;
transition: color 0.2s;
display: flex;
align-items: center;
gap: 0.3rem;
}
.demo-msg-share-btn:hover { color: var(--navy); }
.demo-share-menu {
position: absolute;
bottom: 100%;
left: 0;
background: #fff;
border: 1px solid var(--border2);
box-shadow: 0 4px 20px rgba(0,0,0,.12);
padding: 0.5rem;
display: none;
gap: 0.25rem;
flex-direction: column;
min-width: 160px;
z-index: 9999;
}
.demo-share-menu.open { display: flex; }
.demo-share-item {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 0.75rem;
font-family: var(--body);
font-size: 0.8125rem;
color: var(--t1);
cursor: pointer;
background: none;
border: none;
text-align: left;
width: 100%;
transition: background 0.15s;
text-decoration: none;
}
.demo-share-item:hover { background: var(--bg2); }
.demo-msg-thinking {
align-self: flex-start;
color: var(--t3);
font-size: 0.8rem;
letter-spacing: 0.04em;
display: flex;
align-items: center;
gap: 0.625rem;
padding: 0.25rem 0;
}
.demo-msg-thinking .demo-msg-avatar {
width: 1.75rem;
height: 1.75rem;
flex-shrink: 0;
}
.demo-msg-thinking .demo-msg-avatar img {
width: 1.125rem;
height: 1.125rem;
animation: brainPulse 1.4s ease-in-out infinite;
}
.demo-msg-thinking-dots { display: inline-flex; gap: 3px; }
.demo-msg-thinking-dots span {
width: 5px; height: 5px; border-radius: 50%;
background: rgba(0,82,160,0.55);
animation: thinkDot 1.2s ease-in-out infinite;
}
.demo-msg-thinking-dots span:nth-child(2) { animation-delay: 0.15s; }
.demo-msg-thinking-dots span:nth-child(3) { animation-delay: 0.3s; }
@keyframes thinkDot {
0%, 80%, 100% { opacity: 0.25; transform: scale(0.85); }
40% { opacity: 1; transform: scale(1); }
}
@keyframes brainPulse {
0%, 100% { opacity: 0.55; transform: scale(0.92); }
50% { opacity: 1; transform: scale(1.05); }
}
.demo-share-pill {
background: rgba(0,82,160,0.07);
border: 1px solid rgba(0,82,160,0.22);
color: var(--navy);
cursor: pointer;
padding: 0.4rem 0.75rem;
font-family: var(--body);
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
display: inline-flex;
align-items: center;
gap: 0.4rem;
margin-top: 0.5rem;
margin-left: 0;
align-self: flex-start;
transition: background 0.15s, border-color 0.15s, transform 0.1s;
line-height: 1;
border-radius: 6px;
}
.demo-share-pill:hover {
background: rgba(0,82,160,0.14);
border-color: rgba(0,82,160,0.45);
}
.demo-share-pill:active { transform: scale(0.97); }
.demo-share-pill svg { width: 11px; height: 11px; }
#neuron-demo-input-row {
display: flex;
border-top: 1px solid var(--border);
flex-shrink: 0;
}
#neuron-demo-text {
flex: 1;
font-family: var(--body);
font-size: 0.875rem;
color: var(--t1);
background: var(--bg);
border: none;
outline: none;
padding: 0.875rem 1rem;
}
#neuron-demo-text::placeholder { color: var(--t3); }
#neuron-demo-send {
flex-shrink: 0;
background: var(--navy);
color: #fff;
border: none;
cursor: pointer;
padding: 0.875rem 1.25rem;
font-family: var(--body);
font-size: 0.7rem;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
transition: background 200ms;
}
#neuron-demo-send:hover { background: #0078D4; }
#neuron-demo-send:disabled { opacity: 0.5; cursor: not-allowed; }
@media (max-width: 600px) {
#neuron-demo-text { font-size: 1rem; padding: 1rem; }
#neuron-demo-send { padding: 1rem 1.25rem; min-width: 64px; }
#neuron-demo-messages { padding: .75rem 1rem; }
}
.text-gradient-gold {
background: linear-gradient(135deg, #003d7a 0%, #0078D4 50%, #0052A0 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
button.pricing-cta-navy, button.pricing-cta-solid, button.pricing-cta-ghost {
width: 100%;
border: none;
cursor: pointer;
font-family: inherit;
font-size: inherit;
letter-spacing: inherit;
text-transform: inherit;
text-align: center;
padding: 0.875rem 1.5rem;
transition: background 300ms, opacity 300ms;
}
button[disabled] { opacity: 0.6; cursor: not-allowed; }
</style>
<script src=\"https://cdn.jsdelivr.net/npm/marked/marked.min.js\"></script>
<script src=\"https://challenges.cloudflare.com/turnstile/v0/api.js\" async defer></script>
<noscript><style>.reveal { opacity: 1 !important; transform: none !important; }</style></noscript>
<!-- Google Analytics -->
<script async src=\"https://www.googletagmanager.com/gtag/js?id=G-Y1EE43X9RN\"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-Y1EE43X9RN');
</script>
<!-- Open Graph -->
<meta property=\"og:type\" content=\"website\">
<meta property=\"og:url\" content=\"https://neurontechnologies.ai\">
<meta property=\"og:title\" content=\"Neuron - The AI That Remembers You\">
<meta property=\"og:description\" content=\"Every other AI forgets you. Neuron doesn&#39;t. Runs on your machine, builds a memory over time, and gets sharper the longer you use it. Built by one person. April 22, 2026 — the meeting. April 25 — you&#39;re looking at the proof.\">
<meta property=\"og:image\" content=\"https://neurontechnologies.ai/assets/brand/neuron-wordmark-on-light@2x.png\">
<!-- Twitter / X -->
<meta name=\"twitter:card\" content=\"summary_large_image\">
<meta name=\"twitter:title\" content=\"Neuron - The AI That Remembers You\">
<meta name=\"twitter:description\" content=\"Every other AI forgets you. Neuron doesn&#39;t. Runs on your machine. Remembers everything. $19/mo or $199 founding member (first 1,000).\">
<meta name=\"twitter:image\" content=\"https://neurontechnologies.ai/assets/brand/neuron-wordmark-on-light@2x.png\">
<!-- Canonical -->
<link rel=\"canonical\" href=\"https://neurontechnologies.ai\">
<!-- Structured data — GEO: Organization + SoftwareApplication + FAQPage -->
<script type=\"application/ld+json\">
{
\"@context\": \"https://schema.org\",
\"@graph\": [
{
\"@type\": \"Organization\",
\"name\": \"Neuron, LLC\",
\"url\": \"https://neurontechnologies.ai\",
\"founder\": {
\"@type\": \"Person\",
\"name\": \"Will Anderson\",
\"jobTitle\": \"Founder\"
},
\"description\": \"Neuron builds AI that runs on your machine, builds a memory over time, and gets sharper the longer you use it. One builder. Built different.\",
\"foundingDate\": \"2026\",
\"sameAs\": [\"https://github.com/neuron-technologies\"]
},
{
\"@type\": \"SoftwareApplication\",
\"name\": \"Neuron\",
\"applicationCategory\": \"AIApplication\",
\"operatingSystem\": \"macOS, Windows, Linux\",
\"offers\": [
{
\"@type\": \"Offer\",
\"name\": \"Free\",
\"price\": \"0\",
\"priceCurrency\": \"USD\"
},
{
\"@type\": \"Offer\",
\"name\": \"Professional\",
\"price\": \"19\",
\"priceCurrency\": \"USD\",
\"billingIncrement\": \"monthly\"
},
{
\"@type\": \"Offer\",
\"name\": \"Founding Member\",
\"description\": \"Lifetime access for the first 1,000 members.\",
\"price\": \"199\",
\"priceCurrency\": \"USD\"
}
],
\"description\": \"The AI that remembers you. Runs locally on your machine. Builds a persistent memory over every conversation. Gets sharper the longer you use it. Your data never leaves your device.\",
\"featureList\": [
\"Persistent memory — runs locally, never resets\",
\"Bring your own API keys (OpenAI, Anthropic, Grok)\",
\"Local inference via Ollama — coming, offline, zero cloud\",
\"Neuron Inference coming soon — priced below major APIs\",
\"Two devices included per plan\",
\"Enterprise deployment — Q1 2027\"
]
},
{
\"@type\": \"FAQPage\",
\"mainEntity\": [
{
\"@type\": \"Question\",
\"name\": \"What is Neuron?\",
\"acceptedAnswer\": {
\"@type\": \"Answer\",
\"text\": \"Neuron is an AI that runs on your machine and builds a persistent memory over time. Every other AI forgets you when you close the tab. Neuron doesn&#39;t. The longer you use it, the less you have to explain.\"
}
},
{
\"@type\": \"Question\",
\"name\": \"Does Neuron send my data to the cloud?\",
\"acceptedAnswer\": {
\"@type\": \"Answer\",
\"text\": \"No. Your memory lives on your machine and never leaves it. Neuron does not collect your data, train on your conversations, or require cloud storage. For inference you choose: local via Ollama, your own API keys, or Neuron Inference (coming soon).\"
}
},
{
\"@type\": \"Question\",
\"name\": \"How much does Neuron cost?\",
\"acceptedAnswer\": {
\"@type\": \"Answer\",
\"text\": \"Neuron has a free tier that never expires. Professional is $19/month. Founding Member is $199 lifetime — available to the first 1,000 members only. All plans include two devices.\"
}
},
{
\"@type\": \"Question\",
\"name\": \"Who built Neuron?\",
\"acceptedAnswer\": {
\"@type\": \"Answer\",
\"text\": \"Will Anderson. On April 22nd, 2026 he had a meeting with one of the largest technology companies in the world. Within two days their lawyers were engaged. He decided to build it himself. On April 25th he published the proof.\"
}
},
{
\"@type\": \"Question\",
\"name\": \"When does Neuron launch?\",
\"acceptedAnswer\": {
\"@type\": \"Answer\",
\"text\": \"Neuron is available for preorder now. Enterprise deployment launches Q1 2027.\"
}
}
]
}
]
}
</script>
</head>
<body>
"
}
fn page_close() -> String {
return "
<script src=\"/assets/js/407e72cd7182.js\" defer></script>
<!-- ── Neuron Demo Chat Widget ──────────────────────────────────────────────── -->
<div id=\"neuron-demo-btn\">
<button onclick=\"neuronDemoToggle()\" aria-label=\"Chat with Neuron\">
<img src=\"/assets/brand/neuron-brain.png\" alt=\"\">
Try Neuron
</button>
</div>
<div id=\"neuron-demo-panel\" style=\"display:none\">
<div id=\"neuron-demo-header\">
<div id=\"neuron-demo-header-left\">
<img src=\"/assets/brand/neuron-brain.png\" alt=\"Neuron\">
<div>
<span>Neuron</span>
<div id=\"neuron-demo-header-sub\">Live Demo</div>
</div>
</div>
<div style=\"display:flex;align-items:center;gap:0.75rem\">
<span id=\"neuron-demo-countdown\" style=\"font-family:var(--body);font-size:0.65rem;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;color:rgba(255,255,255,0.90)\"></span>
<button id=\"neuron-demo-close\" onclick=\"neuronDemoToggle()\" aria-label=\"Close\">
<svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"rgba(255,255,255,.85)\" stroke-width=\"1.75\" stroke-linecap=\"round\">
<line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"/><line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"/>
</svg>
</button>
</div>
</div>
<div id=\"neuron-demo-messages\"></div>
<div id=\"neuron-demo-turnstile\" style=\"padding:0.75rem 1rem 0;transition:opacity 0.6s,max-height 0.6s;overflow:hidden;max-height:80px\"></div>
<div id=\"neuron-demo-input-row\" style=\"display:none\">
<input type=\"text\" id=\"neuron-demo-text\" placeholder=\"Ask me anything...\" autocomplete=\"off\">
<button id=\"neuron-demo-send\" onclick=\"neuronDemoSend()\">Send</button>
</div>
</div>
<!-- Share preview modal: shown after the user clicks Share on an AI bubble.
Renders the share-card layout in an iframe (via srcdoc) so the visitor
sees exactly what the public card will look like before publishing. -->
<div id=\"neuron-share-preview-modal\" style=\"display:none;position:fixed;inset:0;z-index:200000;background:rgba(13,13,20,.55);align-items:center;justify-content:center;padding:1.5rem;font-family:'IBM Plex Sans',system-ui,sans-serif\">
<div style=\"background:#fff;width:100%;max-width:640px;max-height:90vh;display:flex;flex-direction:column;border-radius:12px;box-shadow:0 24px 80px rgba(0,0,0,.35);overflow:hidden\">
<div style=\"display:flex;align-items:center;justify-content:space-between;padding:1rem 1.25rem;border-bottom:1px solid rgba(0,0,0,.08)\">
<div>
<div style=\"font-size:.65rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#6B6B7E\">Preview</div>
<div style=\"font-size:1rem;font-weight:500;color:#0D0D14;margin-top:.15rem\">This is what you are about to publish</div>
</div>
<button type=\"button\" id=\"neuron-share-preview-close\" aria-label=\"Close\" style=\"background:none;border:none;cursor:pointer;color:#6B6B7E;padding:.25rem;line-height:1;font-size:1.5rem\">&times;</button>
</div>
<iframe id=\"neuron-share-preview-frame\" style=\"flex:1;width:100%;min-height:420px;border:0;background:#FAFAF8\" sandbox=\"allow-same-origin\"></iframe>
<div style=\"display:flex;align-items:center;justify-content:flex-end;gap:.6rem;padding:.85rem 1.25rem;border-top:1px solid rgba(0,0,0,.08);background:#FAFAF8\">
<button type=\"button\" id=\"neuron-share-preview-cancel\" style=\"background:#fff;border:1px solid rgba(0,0,0,.18);color:#3A3A4A;cursor:pointer;padding:.55rem 1rem;font:inherit;font-size:.8rem;font-weight:500;border-radius:6px\">Cancel</button>
<button type=\"button\" id=\"neuron-share-preview-publish\" style=\"background:#0052A0;border:1px solid #0052A0;color:#fff;cursor:pointer;padding:.55rem 1.1rem;font:inherit;font-size:.8rem;font-weight:600;letter-spacing:.04em;border-radius:6px\">Publish to gallery</button>
</div>
</div>
</div>
<script src=\"/assets/js/02ecc8cf6542.js\" defer></script>
</body>
</html>
"
}
Reference in New Issue View Git Blame Copy Permalink