/* =========================================================================
autoinference — landing page styles
========================================================================= */
/* ----- Self-hosted brand font (ari-w9500 bold — chunky modern sans) -- */
@font-face {
font-family: 'AriW9500';
src: url('fonts/ari-w9500-bold.ttf') format('truetype');
font-weight: 400 900;
font-style: normal;
font-display: swap;
}
/* ----- Tokens -------------------------------------------------------- */
:root {
/* surfaces — warm dark, refined neutral foundation */
--bg-0: #0E0B0A;
--bg-1: #14100E;
--bg-2: #1B1714;
--surface: rgba(255, 240, 225, 0.022);
--surface-2: rgba(255, 240, 225, 0.04);
--surface-3: rgba(255, 240, 225, 0.06);
--border: rgba(255, 230, 210, 0.06);
--border-2: rgba(255, 230, 210, 0.10);
--border-strong: rgba(255, 230, 210, 0.16);
/* text — crisp neutrals (no yellow cast) */
--fg-0: #FAFAFA;
--fg-1: #D9D6D2;
--fg-2: #8E8B86;
--fg-3: #5C5A56;
--fg-4: #38373A;
/* accents — restrained: orange as a single accent, used SPARINGLY */
--violet-500: #C2410C;
--violet-400: #C2410C; /* burnt orange — restrained, not bright */
--blue-500: #9A3412;
--blue-400: #C2410C;
--cyan-500: #B45309; /* deep amber */
--cyan-400: #D97706; /* amber-600, less aggressive than #FBBF24 */
--pink-400: #C2410C;
--green-400: #5A8C5A; /* muted sage, used only for success ✓ */
--orange-400: #D97706; /* the ONE accent */
--orange-500: #C2410C;
--orange-600: #9A3412;
--red-400: #B91C1C;
--red-500: #991B1B;
--amber-400: #D97706;
--amber-500: #B45309;
/* gradients — burnt amber → orange (single warm sweep, no harsh red) */
--grad-brand: linear-gradient(135deg, #D97706 0%, #C2410C 100%);
--grad-brand-soft: linear-gradient(135deg, rgba(217,119,6,0.08) 0%, rgba(194,65,12,0.08) 100%);
--grad-brand-strong: linear-gradient(135deg, #D97706 0%, #C2410C 100%);
/* shadows — soft, neutral (no orange glow leakage) */
--shadow-1: 0 2px 8px rgba(0, 0, 0, 0.3);
--shadow-2: 0 8px 30px rgba(0, 0, 0, 0.4);
--shadow-3: 0 20px 60px rgba(0, 0, 0, 0.5);
--shadow-brand: 0 20px 60px -20px rgba(0, 0, 0, 0.6);
--shadow-cyan: 0 20px 60px -20px rgba(0, 0, 0, 0.5);
/* type */
--font-sans: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
--font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
/* layout */
--container: 1240px;
--radius: 14px;
--radius-lg: 22px;
--radius-xl: 28px;
}
/* ----- Reset --------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
background: var(--bg-0);
color: var(--fg-1);
font-family: var(--font-sans);
font-size: 16px;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-feature-settings: 'ss01' on, 'ss02' on, 'cv11' on;
overflow-x: hidden;
min-height: 100vh;
position: relative;
}
img, svg { display: block; max-width: 100%; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input { font-family: inherit; }
a { color: inherit; text-decoration: none; transition: color 0.18s ease; }
ul, ol { margin: 0; padding: 0; list-style: none; }
::selection { background: rgba(167, 139, 250, 0.35); color: white; }
/* ----- Container ----------------------------------------------------- */
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 24px; position: relative; z-index: 2; }
@media (min-width: 900px) { .container { padding: 0 40px; } }
/* =========================================================================
BACKGROUND LAYERS
========================================================================= */
/* Background: ONE refined treatment — large soft radial warm glow + fine film grain.
No grid. No scanlines. No competing glows. */
.bg-grid {
position: fixed; inset: 0; z-index: 0;
pointer-events: none;
/* very subtle warm vignette near hero only — much reduced */
background:
radial-gradient(ellipse 60% 40% at 50% -5%,
rgba(217, 119, 6, 0.04) 0%,
rgba(194, 65, 12, 0.015) 40%,
transparent 75%);
}
.bg-glow {
position: fixed; z-index: 0;
pointer-events: none;
display: none; /* disabled — single bg-grid layer handles atmosphere */
}
.bg-glow--violet, .bg-glow--cyan { display: none; }
/* Fine film grain — neutral, no warm cast */
.bg-noise {
position: fixed; inset: 0; z-index: 1; pointer-events: none;
background-image: url("data:image/svg+xml;utf8,");
opacity: 1;
mix-blend-mode: overlay;
}
/* Scanlines: removed entirely — they were noise on top of noise */
.bg-scanlines { display: none; }
@keyframes float-1 {
0%, 100% { transform: translate(0, 0); }
50% { transform: translate(120px, 60px); }
}
@keyframes float-2 {
0%, 100% { transform: translate(0, 0); }
50% { transform: translate(-100px, 80px); }
}
/* =========================================================================
NAV
========================================================================= */
.nav {
position: sticky; top: 0; z-index: 50;
padding: 14px 0;
transition: padding 0.25s ease, background-color 0.25s ease, backdrop-filter 0.25s ease;
}
.nav.scrolled {
background: rgba(6, 6, 11, 0.75);
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(20px) saturate(180%);
border-bottom: 1px solid var(--border);
}
.nav__inner {
display: flex; align-items: center; justify-content: space-between; gap: 32px;
}
.nav__brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 16px; letter-spacing: -0.01em; }
.brand-mark { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 7px; }
.brand-name { background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 700; }
.nav__links { display: none; gap: 28px; align-items: center; }
.nav__links a {
color: var(--fg-2); font-size: 14px; font-weight: 500;
position: relative;
}
.nav__links a:hover { color: var(--fg-0); }
.nav__links .ext { font-size: 10px; opacity: 0.7; margin-left: 3px; }
@media (min-width: 900px) { .nav__links { display: flex; } }
.nav__cta { display: none; align-items: center; gap: 8px; }
@media (min-width: 900px) { .nav__cta { display: flex; } }
.nav__burger { display: flex; flex-direction: column; gap: 4px; padding: 8px; }
.nav__burger span { width: 22px; height: 1.5px; background: var(--fg-1); border-radius: 2px; }
@media (min-width: 900px) { .nav__burger { display: none; } }
/* mobile menu open state */
.nav.menu-open ~ .hero,
.nav.menu-open ~ .section { filter: blur(2px); }
.nav.menu-open .nav__links {
display: flex; flex-direction: column;
position: fixed; top: 64px; left: 16px; right: 16px;
background: var(--bg-1); border: 1px solid var(--border);
padding: 20px; gap: 18px; border-radius: var(--radius);
}
/* =========================================================================
BUTTONS
========================================================================= */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
padding: 9px 16px; border-radius: 10px;
font-size: 14px; font-weight: 600; letter-spacing: -0.005em;
transition: all 0.18s ease;
white-space: nowrap;
cursor: pointer;
position: relative;
}
.btn--lg { padding: 13px 22px; font-size: 15px; border-radius: 12px; }
.btn--primary {
background: white; color: #0A0A0F;
box-shadow: 0 4px 14px rgba(255, 255, 255, 0.12), inset 0 0 0 1px rgba(0,0,0,0.06);
}
.btn--primary:hover {
transform: translateY(-1px);
box-shadow: 0 8px 24px rgba(255, 255, 255, 0.18), inset 0 0 0 1px rgba(0,0,0,0.06);
}
.btn--primary::before {
content: ''; position: absolute; inset: -1px;
border-radius: inherit;
background: var(--grad-brand);
z-index: -1; opacity: 0;
transition: opacity 0.18s ease;
}
.btn--primary:hover::before { opacity: 1; }
.btn--secondary {
background: var(--surface-2); color: var(--fg-0);
border: 1px solid var(--border-2);
backdrop-filter: blur(10px);
}
.btn--secondary:hover {
background: var(--surface-3);
border-color: var(--border-strong);
transform: translateY(-1px);
}
.btn--ghost { color: var(--fg-2); padding: 8px 14px; font-size: 14px; }
.btn--ghost:hover { color: var(--fg-0); }
.btn__arrow { transition: transform 0.18s ease; }
.btn:hover .btn__arrow { transform: translateX(3px); }
/* =========================================================================
HERO
========================================================================= */
.hero {
padding: 60px 0 80px;
position: relative;
}
@media (min-width: 700px) { .hero { padding: 90px 0 100px; } }
@media (min-width: 1100px) { .hero { padding: 110px 0 120px; } }
.hero__inner { text-align: center; }
.badge {
display: inline-flex; align-items: center; gap: 10px;
padding: 6px 14px 6px 10px;
background: linear-gradient(135deg, rgba(167,139,250,0.12), rgba(34,211,238,0.12));
border: 1px solid rgba(167,139,250,0.25);
border-radius: 100px;
font-size: 13px; font-weight: 500; color: var(--fg-1);
margin-bottom: 32px;
transition: all 0.2s ease;
backdrop-filter: blur(10px);
}
.badge:hover {
border-color: rgba(167,139,250,0.5);
transform: translateY(-1px);
}
.badge__dot {
width: 8px; height: 8px; border-radius: 50%;
background: var(--cyan-400);
box-shadow: 0 0 0 4px rgba(34,211,238,0.18);
animation: pulse-dot 2s ease-in-out infinite;
}
.badge__arrow { color: var(--fg-2); transition: transform 0.2s ease; }
.badge:hover .badge__arrow { transform: translateX(3px); color: var(--fg-0); }
@keyframes pulse-dot {
0%, 100% { box-shadow: 0 0 0 4px rgba(34,211,238,0.18); }
50% { box-shadow: 0 0 0 8px rgba(34,211,238,0.05); }
}
.hero__title {
font-size: clamp(40px, 7vw, 84px);
line-height: 1.04;
letter-spacing: -0.035em;
font-weight: 800;
margin: 0 0 24px;
color: var(--fg-0);
}
.grad-text {
background: var(--grad-brand);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
position: relative;
}
.hero__sub {
font-size: clamp(16px, 1.6vw, 20px);
line-height: 1.55;
color: var(--fg-2);
max-width: 720px;
margin: 0 auto 40px;
}
.hero__sub em { font-style: normal; color: var(--fg-0); font-weight: 500; background: linear-gradient(180deg, transparent 68%, rgba(167,139,250,0.25) 68%); padding: 0 2px; }
.hero__cta {
display: flex; gap: 12px; justify-content: center;
margin-bottom: 36px;
flex-wrap: wrap;
}
.hero__meta {
display: inline-flex; align-items: center; gap: 28px;
padding: 10px 20px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 100px;
font-size: 13px; color: var(--fg-2);
flex-wrap: wrap; justify-content: center;
}
.hero__meta-item { display: flex; align-items: center; gap: 8px; }
.dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; }
.dot--green { background: var(--green-400); box-shadow: 0 0 8px rgba(52,211,153,0.6); }
.dot--violet { background: var(--violet-400); box-shadow: 0 0 8px rgba(167,139,250,0.6); }
.dot--cyan { background: var(--cyan-400); box-shadow: 0 0 8px rgba(34,211,238,0.6); }
.dot--pulse { background: var(--cyan-400); box-shadow: 0 0 0 3px rgba(34,211,238,0.18); animation: pulse-dot 2s ease-in-out infinite; }
/* =========================================================================
HERO MOCK
========================================================================= */
.hero__mock {
margin-top: 80px;
position: relative;
perspective: 2000px;
}
/* =========================================================================
MOCK CHROME (shared)
========================================================================= */
.mock {
background: linear-gradient(180deg, rgba(20,20,32,0.9), rgba(11,11,20,0.95));
border: 1px solid var(--border-2);
border-radius: var(--radius-xl);
box-shadow: var(--shadow-3), 0 0 0 1px rgba(255,255,255,0.04) inset;
overflow: hidden;
position: relative;
backdrop-filter: blur(20px);
}
.mock--hero {
transform: rotateX(2deg);
transform-origin: center top;
box-shadow: var(--shadow-3), var(--shadow-brand), 0 0 0 1px rgba(255,255,255,0.05) inset;
}
.mock--hero::after {
/* glow underneath */
content: '';
position: absolute;
bottom: -60px; left: 10%; right: 10%; height: 100px;
background: radial-gradient(ellipse at center, rgba(139,92,246,0.5), transparent 70%);
filter: blur(40px);
z-index: -1;
}
.mock__chrome {
display: flex; align-items: center; gap: 8px;
padding: 12px 16px;
background: rgba(255,255,255,0.025);
border-bottom: 1px solid var(--border);
}
.mock__dot { width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0; }
.mock__dot--r { background: #FF5F57; }
.mock__dot--y { background: #FEBC2E; }
.mock__dot--g { background: #28C840; }
.mock__url {
flex: 1;
margin: 0 12px;
padding: 5px 14px;
background: rgba(0,0,0,0.25);
border-radius: 7px;
font-family: var(--font-mono);
font-size: 11.5px; color: var(--fg-2);
text-align: center;
border: 1px solid rgba(255,255,255,0.04);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.mock__chrome-meta {
font-family: var(--font-mono);
font-size: 11px;
color: var(--fg-3);
padding: 4px 8px;
background: rgba(255,255,255,0.04);
border-radius: 5px;
}
/* hero mock body */
.mock__body {
display: grid;
grid-template-columns: 220px 1fr;
min-height: 480px;
}
@media (max-width: 800px) {
.mock__body { grid-template-columns: 1fr; }
.mock__side { display: none; }
}
.mock__side {
background: rgba(0,0,0,0.18);
border-right: 1px solid var(--border);
padding: 18px 16px;
display: flex; flex-direction: column;
font-size: 13px;
}
.mock__brand {
display: flex; align-items: center; gap: 8px;
font-weight: 600; color: var(--fg-0); font-size: 13px;
padding: 6px 8px;
margin-bottom: 20px;
}
.mock__brand-mark {
width: 20px; height: 20px; border-radius: 5px;
background: var(--grad-brand);
flex-shrink: 0;
}
.mock__nav { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.mock__nav a {
display: flex; align-items: center; gap: 10px;
padding: 7px 10px;
color: var(--fg-2);
border-radius: 7px;
font-size: 13px;
cursor: pointer;
font-weight: 500;
}
.mock__nav a.active {
background: rgba(167,139,250,0.12);
color: var(--fg-0);
box-shadow: inset 0 0 0 1px rgba(167,139,250,0.18);
}
.mock__nav a:hover { color: var(--fg-0); }
.mock__nav .ic {
width: 14px; height: 14px;
background: currentColor; opacity: 0.6;
border-radius: 3px;
flex-shrink: 0;
-webkit-mask: linear-gradient(135deg, transparent 30%, currentColor 30% 70%, transparent 70%);
}
.mock__workspace {
display: flex; align-items: center; gap: 10px;
padding: 10px;
background: rgba(255,255,255,0.025);
border: 1px solid var(--border);
border-radius: 9px;
margin-top: 14px;
}
.mock__wsbubble {
width: 32px; height: 32px; border-radius: 8px;
background: var(--grad-brand);
color: white; font-weight: 700; font-size: 14px;
display: flex; align-items: center; justify-content: center;
}
.mock__wsname { font-weight: 600; color: var(--fg-0); font-size: 12.5px; }
.mock__wsplan { color: var(--fg-3); font-size: 10.5px; }
.mock__main {
padding: 18px 22px 22px;
display: flex; flex-direction: column; gap: 16px;
min-width: 0;
}
.mock__topbar {
display: flex; align-items: flex-end; justify-content: space-between; gap: 12px;
flex-wrap: wrap;
}
.mock__crumb { font-size: 11px; color: var(--fg-3); margin-bottom: 8px; font-family: var(--font-mono); letter-spacing: 0; }
.mock__crumb strong { color: var(--fg-1); }
.mock__title { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.mock__title h3 { margin: 0; font-size: 18px; font-weight: 700; color: var(--fg-0); letter-spacing: -0.015em; }
.mock__tag {
font-family: var(--font-mono); font-size: 10.5px;
color: var(--fg-3); padding: 3px 7px;
background: rgba(255,255,255,0.04); border-radius: 5px;
}
.status-pill {
display: inline-flex; align-items: center; gap: 6px;
padding: 3px 8px;
background: rgba(52,211,153,0.12);
color: var(--green-400);
border-radius: 100px;
font-size: 10.5px; font-weight: 600;
text-transform: uppercase; letter-spacing: 0.04em;
border: 1px solid rgba(52,211,153,0.25);
}
.status-pill--live .ping {
width: 6px; height: 6px; border-radius: 50%;
background: var(--green-400);
box-shadow: 0 0 0 3px rgba(52,211,153,0.2);
animation: pulse-dot 1.5s ease-in-out infinite;
}
.status-pill--ok {
background: rgba(52,211,153,0.12);
color: var(--green-400);
border-color: rgba(52,211,153,0.25);
}
.mock__topbar-actions { display: flex; gap: 8px; }
.chip {
display: inline-flex; align-items: center; gap: 6px;
padding: 7px 12px;
background: var(--surface-2);
border: 1px solid var(--border);
border-radius: 8px;
font-size: 12px; font-weight: 600; color: var(--fg-1);
transition: all 0.15s ease;
}
.chip:hover { background: var(--surface-3); }
.chip--primary { background: var(--grad-brand); color: white; border: none; }
.chip--primary:hover { transform: translateY(-1px); }
.ic-sm { width: 11px; height: 11px; background: currentColor; opacity: 0.7; border-radius: 2px; }
/* stats row */
.mock__statsrow {
display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
}
@media (max-width: 600px) { .mock__statsrow { grid-template-columns: repeat(2, 1fr); } }
.statcard {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 10px;
padding: 12px 14px;
position: relative;
overflow: hidden;
}
.statcard__label { font-size: 10.5px; color: var(--fg-3); font-weight: 500; text-transform: uppercase; letter-spacing: 0.04em; }
.statcard__value {
font-size: 22px; font-weight: 700; color: var(--fg-0);
letter-spacing: -0.02em;
margin-top: 4px;
font-feature-settings: 'tnum' on;
}
.statcard__value .unit { font-size: 13px; font-weight: 500; color: var(--fg-2); margin-left: 2px; }
.statcard__delta { font-size: 11px; font-weight: 600; margin-top: 4px; font-family: var(--font-mono); }
.delta--up { color: var(--green-400); }
.delta--down { color: var(--cyan-400); }
.spark { position: absolute; bottom: 0; right: 0; width: 80px; height: 26px; opacity: 0.65; }
/* mock grid */
.mock__grid {
display: grid; grid-template-columns: 1.4fr 1fr; gap: 12px;
}
@media (max-width: 700px) { .mock__grid { grid-template-columns: 1fr; } }
.panel {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 12px;
padding: 14px;
min-height: 220px;
}
.panel__head {
display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
margin-bottom: 12px;
}
.panel__head h4 { margin: 0; font-size: 13px; font-weight: 600; color: var(--fg-0); }
.panel__sub { font-size: 10.5px; color: var(--fg-3); font-family: var(--font-mono); }
.agentlog { display: flex; flex-direction: column; gap: 6px; max-height: 200px; overflow: hidden; }
.agentlog__row {
display: grid; grid-template-columns: 56px 60px 1fr;
gap: 10px; align-items: center;
font-size: 11.5px;
color: var(--fg-2);
font-family: var(--font-mono);
line-height: 1.45;
}
.agentlog__row .t { color: var(--fg-3); font-size: 10.5px; }
.agentlog__row strong { color: var(--fg-0); font-weight: 600; }
.agentlog__row--active {
background: rgba(251,146,60,0.06);
margin: 0 -8px;
padding: 6px 8px;
border-radius: 6px;
}
.tag {
display: inline-block;
padding: 2px 6px;
border-radius: 4px;
font-size: 9.5px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
font-family: var(--font-sans);
text-align: center;
}
.tag--violet { background: rgba(167,139,250,0.16); color: var(--violet-400); }
.tag--blue { background: rgba(96,165,250,0.16); color: var(--blue-400); }
.tag--cyan { background: rgba(34,211,238,0.16); color: var(--cyan-400); }
.tag--pink { background: rgba(244,114,182,0.16); color: var(--pink-400); }
.tag--green { background: rgba(52,211,153,0.16); color: var(--green-400); }
.tag--orange { background: rgba(251,146,60,0.16); color: var(--orange-400); }
.dotpulse {
display: inline-block; width: 6px; height: 6px; border-radius: 50%;
background: var(--orange-400);
margin-left: 4px;
animation: pulse-dot 1.2s ease-in-out infinite;
}
.panel--compact { padding: 14px; }
.enginepick { display: flex; flex-direction: column; gap: 9px; }
.enginepick__row {
display: grid; grid-template-columns: 110px 1fr 32px;
gap: 10px; align-items: center;
font-size: 11.5px;
}
.enginepick__name { color: var(--fg-2); font-weight: 500; }
.enginepick__ver { color: var(--fg-3); font-family: var(--font-mono); font-size: 10px; margin-left: 4px; }
.enginepick__bar {
height: 6px;
background: rgba(255,255,255,0.04);
border-radius: 100px;
overflow: hidden;
position: relative;
}
.enginepick__bar span {
display: block; height: 100%;
background: linear-gradient(90deg, var(--violet-400), var(--blue-400));
border-radius: 100px;
}
.enginepick__row--win .enginepick__name { color: var(--fg-0); font-weight: 600; }
.enginepick__row--win .enginepick__bar span {
background: var(--grad-brand);
box-shadow: 0 0 12px rgba(34,211,238,0.4);
}
.enginepick__score {
font-family: var(--font-mono); font-size: 11px; font-weight: 600;
color: var(--fg-1); text-align: right;
}
.enginepick__row--win .enginepick__score { color: var(--cyan-400); }
/* floating cards */
.float {
position: absolute;
display: flex; align-items: center; gap: 12px;
padding: 12px 16px;
background: rgba(20,20,30,0.85);
backdrop-filter: blur(20px);
border: 1px solid var(--border-2);
border-radius: 14px;
box-shadow: var(--shadow-2);
font-size: 13px;
animation: float-card 6s ease-in-out infinite;
}
.float--tl {
top: -24px; left: -20px;
}
.float--br {
bottom: -24px; right: -20px;
animation-delay: -3s;
}
.float--wizard {
top: -16px; right: -16px;
}
/* Live indicator dot — small red glowing rhythmic blinker on floating widgets */
.float__icon,
.float__icon--ok {
width: 10px; height: 10px;
border-radius: 50%;
background: #FF3344;
box-shadow: 0 0 8px rgba(255, 51, 68, 0.85),
0 0 0 0 rgba(255, 51, 68, 0.55);
animation: liveBlink 1.4s ease-in-out infinite;
flex-shrink: 0;
position: relative;
/* push down a touch so it sits aligned with the first text row */
margin-top: 5px;
}
.float__icon--ok::after { content: none; }
@keyframes liveBlink {
0%, 100% {
opacity: 1;
box-shadow: 0 0 8px rgba(255, 51, 68, 0.85),
0 0 0 0 rgba(255, 51, 68, 0.55);
}
50% {
opacity: 0.55;
box-shadow: 0 0 12px rgba(255, 51, 68, 0.55),
0 0 0 7px rgba(255, 51, 68, 0.00);
}
}
.float__t { font-weight: 600; color: var(--fg-0); font-size: 13px; }
.float__s { font-size: 11.5px; color: var(--fg-2); font-family: var(--font-mono); }
.float__metric {
font-size: 26px; font-weight: 800; color: var(--fg-0);
letter-spacing: -0.02em;
}
.float__metric span { font-size: 16px; color: var(--cyan-400); }
.float__l { font-size: 11px; color: var(--fg-2); }
@keyframes float-card {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-8px); }
}
@media (max-width: 700px) {
.float { display: none; }
}
/* =========================================================================
LOGO BAR
========================================================================= */
.logobar {
padding: 50px 0 30px;
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
background: rgba(0, 0, 0, 0.2);
}
.logobar__label {
text-align: center; margin: 0 0 24px;
font-size: 12px; color: var(--fg-3);
font-weight: 500;
text-transform: uppercase; letter-spacing: 0.15em;
}
.logobar__marquee {
overflow: hidden;
position: relative;
mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent);
-webkit-mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent);
}
.logobar__track {
display: flex; gap: 14px;
white-space: nowrap;
width: fit-content;
animation: marquee 50s linear infinite;
}
@keyframes marquee {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
.logo-pill {
display: inline-flex; align-items: center; padding: 8px 18px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 100px;
color: var(--fg-1);
font-size: 13.5px; font-weight: 500;
font-family: var(--font-mono);
letter-spacing: -0.01em;
white-space: nowrap;
}
.logo-pill--hw {
background: linear-gradient(135deg, rgba(167,139,250,0.06), rgba(34,211,238,0.06));
border-color: rgba(167,139,250,0.18);
}
/* =========================================================================
SECTIONS — shared
========================================================================= */
.section { padding: 100px 0; position: relative; }
.section--tight { padding: 70px 0 50px; }
.section--perf { padding: 120px 0; }
.section--how { padding: 120px 0; }
.section--mock2 { padding: 100px 0; }
.section--validation { padding: 120px 0; }
.section--install { padding: 80px 0 110px; }
@media (max-width: 700px) {
.section, .section--how, .section--perf, .section--validation, .section--mock2, .section--install { padding: 70px 0; }
}
.eyebrow {
display: inline-block;
font-size: 12px; font-weight: 600;
color: var(--violet-400);
text-transform: uppercase; letter-spacing: 0.15em;
margin-bottom: 18px;
font-family: var(--font-mono);
}
.section__title {
font-size: clamp(30px, 4.5vw, 56px);
font-weight: 800;
letter-spacing: -0.03em;
line-height: 1.08;
margin: 0 0 20px;
color: var(--fg-0);
max-width: 900px;
}
.section__title em { font-style: normal; color: var(--fg-2); font-weight: 600; }
.section__title .strike { text-decoration: line-through; text-decoration-color: rgba(248,113,113,0.5); text-decoration-thickness: 2px; color: var(--fg-2); font-weight: 600; }
.section__title .strike em { color: var(--fg-3); }
.section__lede {
font-size: clamp(15px, 1.4vw, 18px);
line-height: 1.65;
color: var(--fg-2);
max-width: 700px;
margin: 0 0 56px;
}
.section__lede em { font-style: normal; color: var(--fg-0); font-weight: 500; }
/* =========================================================================
PAINROW (problem section)
========================================================================= */
.painrow {
margin-top: 40px;
display: grid; grid-template-columns: 1fr auto 1fr auto 1fr;
gap: 16px; align-items: center;
padding: 36px 32px;
background: linear-gradient(180deg, rgba(248,113,113,0.04), transparent);
border: 1px solid rgba(248,113,113,0.12);
border-radius: var(--radius-lg);
}
@media (max-width: 800px) {
.painrow { grid-template-columns: 1fr; }
.painrow__div { display: none; }
}
.painrow__item { text-align: center; }
.painrow__num {
font-size: clamp(28px, 3vw, 42px);
font-weight: 800;
color: var(--red-400);
letter-spacing: -0.025em;
font-feature-settings: 'tnum' on;
margin-bottom: 6px;
}
.painrow__l { color: var(--fg-2); font-size: 14px; line-height: 1.5; }
.painrow__l .src { color: var(--fg-3); font-size: 11px; display: block; margin-top: 4px; font-family: var(--font-mono); }
.painrow__div {
width: 1px; height: 50px;
background: linear-gradient(180deg, transparent, var(--border-2), transparent);
}
/* =========================================================================
PILLARS
========================================================================= */
.pillars {
margin-top: 30px;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 16px;
}
@media (min-width: 1100px) { .pillars { grid-template-columns: repeat(4, 1fr); } }
.pillar {
position: relative;
padding: 28px 24px 28px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
transition: all 0.25s ease;
overflow: hidden;
}
.pillar::before {
content: '';
position: absolute; inset: 0;
background: radial-gradient(circle at top, rgba(167,139,250,0.08), transparent 60%);
opacity: 0; transition: opacity 0.3s ease;
pointer-events: none;
}
.pillar:hover {
border-color: rgba(167,139,250,0.3);
transform: translateY(-4px);
box-shadow: var(--shadow-2);
}
.pillar:hover::before { opacity: 1; }
.pillar__head {
display: flex; align-items: center; justify-content: space-between;
margin-bottom: 18px;
}
.pillar__num {
font-family: var(--font-mono);
font-size: 12px;
color: var(--fg-3);
font-weight: 600;
}
.pillar__icon {
display: inline-flex; align-items: center; justify-content: center;
width: 38px; height: 38px;
border-radius: 10px;
background: var(--grad-brand-soft);
color: var(--violet-400);
border: 1px solid rgba(167,139,250,0.2);
}
.pillar__title {
font-size: 19px; font-weight: 700;
color: var(--fg-0);
letter-spacing: -0.015em;
margin: 0 0 10px;
}
.pillar__body {
font-size: 14px; line-height: 1.6;
color: var(--fg-2);
margin: 0 0 16px;
}
.pillar__body strong { color: var(--fg-0); font-weight: 600; }
.pillar__bullets {
border-top: 1px solid var(--border);
padding-top: 14px;
display: flex; flex-direction: column; gap: 6px;
}
.pillar__bullets li {
font-size: 12.5px; color: var(--fg-2);
font-family: var(--font-mono);
position: relative;
padding-left: 14px;
}
.pillar__bullets li::before {
content: '';
position: absolute; left: 0; top: 8px;
width: 4px; height: 4px; border-radius: 50%;
background: var(--cyan-400);
box-shadow: 0 0 6px rgba(34,211,238,0.5);
}
/* =========================================================================
HOW IT WORKS
========================================================================= */
.how {
margin-top: 40px;
display: grid;
grid-template-columns: 1fr 400px;
gap: 60px;
align-items: start;
}
@media (max-width: 1000px) {
.how { grid-template-columns: 1fr; }
.how__diagram { display: none; }
}
.how__steps { display: flex; flex-direction: column; gap: 28px; }
.how__step {
display: grid; grid-template-columns: 40px 1fr; gap: 20px;
position: relative;
}
.how__step:not(:last-child)::after {
content: '';
position: absolute;
left: 19px; top: 50px; bottom: -28px;
width: 1px;
background: linear-gradient(180deg, var(--border-2), transparent);
}
.how__num {
width: 40px; height: 40px;
border-radius: 10px;
background: var(--surface-2);
border: 1px solid var(--border-2);
display: flex; align-items: center; justify-content: center;
font-weight: 700; font-size: 14px;
color: var(--violet-400);
font-family: var(--font-mono);
}
.how__body h3 { margin: 6px 0 8px; font-size: 22px; font-weight: 700; color: var(--fg-0); letter-spacing: -0.02em; }
.how__body p { margin: 0 0 14px; color: var(--fg-2); font-size: 15px; line-height: 1.6; }
/* code block */
/* code blocks — macOS terminal-window + IDE syntax theme */
.codeblock {
background: linear-gradient(180deg, #050505, #000000);
border: 1px solid rgba(255, 230, 210, 0.08);
border-radius: 12px;
overflow: hidden;
box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.85);
}
.codeblock__head {
display: flex; align-items: center; gap: 8px;
padding: 11px 16px;
background: rgba(255, 230, 210, 0.02);
border-bottom: 1px solid rgba(255, 230, 210, 0.05);
font-family: var(--font-mono); font-size: 11px;
}
.codeblock__head .lang {
margin-left: 8px;
color: var(--fg-3);
text-transform: uppercase;
letter-spacing: 0.08em;
font-weight: 600;
}
.codeblock__head .copy {
margin-left: auto;
color: var(--fg-3);
cursor: pointer;
transition: color 0.15s ease;
}
.codeblock__head .copy:hover { color: var(--orange-400); }
.codeblock pre {
margin: 0; padding: 18px 20px;
font-family: var(--font-mono);
font-size: 13px; line-height: 1.7;
color: #E6EDF3;
overflow-x: auto;
}
/* IDE-themed syntax palette — warm coral/amber on near-black */
.codeblock code .kw { color: #FF7B72; font-weight: 500; } /* from, import, def, class */
.codeblock code .str { color: #FBBF24; } /* "string literals" */
.codeblock code .num { color: #79C0FF; } /* 200, 120 */
.codeblock code .cm { color: #7C828A; font-style: italic; } /* # comments */
.codeblock code .brc { color: #FFA657; } /* { } braces / dict delimiters */
/* diagram */
.how__diagram {
position: sticky; top: 100px;
background: linear-gradient(180deg, rgba(20,20,30,0.5), rgba(11,11,20,0.4));
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 20px;
}
.flowsvg { width: 100%; height: auto; }
.flowsvg .ft-l { fill: var(--fg-3); font: 600 9px var(--font-mono); letter-spacing: 0.1em; }
.flowsvg .ft-l--grad { fill: var(--violet-400); }
.flowsvg .ft-l--cyan { fill: var(--cyan-400); }
.flowsvg .ft-h { fill: var(--fg-0); font: 600 14px var(--font-sans); }
.flowsvg .ft-sub { fill: var(--fg-3); font: 400 11px var(--font-mono); }
.flowsvg .ft-ic { fill: var(--fg-2); font: 400 18px var(--font-sans); }
.flowsvg .ft-step { fill: var(--fg-1); font: 500 11px var(--font-sans); }
.flowsvg .flowline { stroke-dasharray: 4 4; }
/* =========================================================================
PERFORMANCE
========================================================================= */
.bignums {
display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
margin-top: 30px;
}
@media (max-width: 800px) { .bignums { grid-template-columns: repeat(2, 1fr); } }
.bignum {
position: relative;
padding: 28px 24px;
background: linear-gradient(180deg, var(--surface), transparent);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
overflow: hidden;
transition: all 0.25s ease;
}
.bignum::before {
content: ''; position: absolute; inset: 0;
background: radial-gradient(circle at top right, rgba(34,211,238,0.12), transparent 60%);
opacity: 0; transition: opacity 0.3s ease;
}
.bignum:hover { border-color: rgba(34,211,238,0.25); transform: translateY(-3px); }
.bignum:hover::before { opacity: 1; }
.bignum__v {
font-size: clamp(36px, 4.5vw, 60px);
font-weight: 800; line-height: 1;
letter-spacing: -0.04em;
background: var(--grad-brand);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
font-feature-settings: 'tnum' on;
margin-bottom: 12px;
position: relative;
}
.bignum__l { font-size: 13px; color: var(--fg-2); line-height: 1.5; font-weight: 500; }
.bignum__b {
height: 4px;
background: rgba(255,255,255,0.05);
border-radius: 100px;
margin-top: 18px;
overflow: hidden;
}
.bignum__b span {
display: block; height: 100%;
background: var(--grad-brand);
border-radius: 100px;
transform: scaleX(0);
transform-origin: left;
transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1) 0.2s;
}
.bignum.in-view .bignum__b span { transform: scaleX(1); }
.perfchart {
margin-top: 60px;
padding: 30px;
background: linear-gradient(180deg, rgba(20,20,30,0.5), rgba(11,11,20,0.3));
border: 1px solid var(--border);
border-radius: var(--radius-xl);
position: relative;
overflow: hidden;
}
.perfchart__head {
display: flex; justify-content: space-between; align-items: flex-start;
margin-bottom: 24px;
flex-wrap: wrap; gap: 12px;
}
.perfchart__title { font-size: 17px; font-weight: 600; color: var(--fg-0); margin-bottom: 4px; }
.perfchart__sub { font-size: 12.5px; color: var(--fg-3); font-family: var(--font-mono); }
.perfchart__legend { display: flex; gap: 18px; flex-wrap: wrap; }
.leg { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--fg-2); }
.leg__d { width: 10px; height: 2px; border-radius: 100px; }
.leg__d--gray { background: rgba(255,255,255,0.35); }
.leg__d--violet { background: var(--violet-400); }
.leg__d--cyan { background: var(--cyan-400); }
.perfchart__svg { width: 100%; height: 280px; }
.perfchart__svg .grid line { stroke: rgba(255,255,255,0.05); stroke-width: 1; }
.perfchart__svg .gridlbl { fill: var(--fg-3); font: 500 10px var(--font-mono); }
.perfchart__svg .endlbl { fill: var(--cyan-400); font: 600 12px var(--font-mono); }
.perfchart__svg .chartline { stroke-dasharray: 1000; stroke-dashoffset: 1000; }
.perfchart__svg.animate .chartline { animation: draw 2s ease forwards; }
.perfchart__svg.animate .chartline--violet { animation-delay: 0.3s; }
.perfchart__svg.animate .chartline--cyan { animation-delay: 0.6s; }
.perfchart__svg .chartarea { opacity: 0; }
.perfchart__svg.animate .chartarea { animation: fade-in 1s ease 1.2s forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes fade-in { to { opacity: 1; } }
/* =========================================================================
SPLITROW (mock #2)
========================================================================= */
.splitrow {
display: grid; grid-template-columns: 1fr 1.05fr; gap: 60px;
align-items: center;
}
@media (max-width: 1000px) { .splitrow { grid-template-columns: 1fr; gap: 50px; } }
.splitrow__copy .section__title { margin-bottom: 18px; }
.copylist { display: flex; flex-direction: column; gap: 12px; margin-top: 24px; }
.copylist li { display: flex; align-items: flex-start; gap: 10px; font-size: 14.5px; color: var(--fg-2); }
.check {
display: inline-flex; align-items: center; justify-content: center;
width: 18px; height: 18px; flex-shrink: 0;
border-radius: 50%;
background: rgba(52,211,153,0.18);
color: var(--green-400);
font-size: 11px; font-weight: 700;
}
.splitrow__mock { position: relative; }
/* wizard mock */
.mock--wizard .wiz { padding: 22px; display: flex; flex-direction: column; gap: 16px; }
.wiz__step {
display: grid; grid-template-columns: 28px 1fr;
gap: 14px; align-items: flex-start;
padding: 12px 14px;
background: rgba(255,255,255,0.025);
border: 1px solid var(--border);
border-radius: 10px;
position: relative;
}
.wiz__step--done { border-color: rgba(52,211,153,0.18); }
.wiz__step--active { border-color: rgba(34,211,238,0.35); background: linear-gradient(90deg, rgba(34,211,238,0.06), transparent); box-shadow: 0 0 0 3px rgba(34,211,238,0.08); }
.wiz__step--pending { opacity: 0.55; }
.wiz__bullet {
display: inline-flex; align-items: center; justify-content: center;
width: 28px; height: 28px; border-radius: 50%;
background: var(--surface-2); border: 1px solid var(--border);
font-size: 12px; font-weight: 700; color: var(--fg-3);
font-family: var(--font-mono);
}
.wiz__step--done .wiz__bullet {
background: rgba(52,211,153,0.15); color: var(--green-400);
border-color: rgba(52,211,153,0.3);
}
.wiz__step--active .wiz__bullet--spin {
background: rgba(34,211,238,0.15);
border: 2px solid rgba(34,211,238,0.18);
border-top-color: var(--cyan-400);
animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.wiz__label { font-size: 10.5px; color: var(--fg-3); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 4px; }
.wiz__value { font-size: 13.5px; color: var(--fg-0); font-weight: 500; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.wiz__value.muted, .muted { color: var(--fg-3); }
.hfchip { background: rgba(255,255,255,0.04); padding: 1px 4px; border-radius: 4px; }
.wiz__tag {
font-family: var(--font-mono); font-size: 10.5px;
color: var(--fg-3); padding: 2px 6px;
background: rgba(255,255,255,0.04); border-radius: 4px;
}
.kvchip {
font-family: var(--font-mono); font-size: 11px;
background: rgba(167,139,250,0.1);
border: 1px solid rgba(167,139,250,0.2);
color: var(--violet-400);
padding: 3px 8px; border-radius: 6px;
}
.kvchip strong { color: var(--fg-0); font-weight: 700; }
.wiz__progress {
width: 100%; height: 4px;
background: rgba(255,255,255,0.05);
border-radius: 100px;
margin-top: 8px;
overflow: hidden;
}
.wiz__progress span {
display: block; height: 100%;
background: var(--grad-brand);
border-radius: 100px;
animation: wiz-progress 4s ease-in-out infinite;
}
@keyframes wiz-progress {
0% { width: 20%; }
50% { width: 70%; }
100% { width: 20%; }
}
.wiz__foot {
display: flex; justify-content: space-between;
padding: 14px 22px;
border-top: 1px solid var(--border);
font-size: 11.5px; color: var(--fg-3);
font-family: var(--font-mono);
}
/* =========================================================================
VALIDATION
========================================================================= */
.testgrid {
margin-top: 30px;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 14px;
}
@media (min-width: 1000px) { .testgrid { grid-template-columns: repeat(4, 1fr); } }
.testcard {
padding: 22px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
transition: all 0.25s ease;
}
.testcard:hover { border-color: rgba(34,211,238,0.25); transform: translateY(-3px); }
.testcard__head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.testcard__icon {
display: inline-flex; align-items: center; justify-content: center;
width: 32px; height: 32px; border-radius: 8px;
background: rgba(34,211,238,0.12);
color: var(--cyan-400);
border: 1px solid rgba(34,211,238,0.2);
}
.testcard__head h3 { margin: 0; font-size: 16px; font-weight: 700; color: var(--fg-0); letter-spacing: -0.015em; }
.testcard__body { font-size: 13.5px; color: var(--fg-2); line-height: 1.6; margin: 0 0 16px; }
.testcard__body strong { color: var(--fg-0); }
.testcard__stat {
padding-top: 14px;
border-top: 1px solid var(--border);
display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
}
.testcard__statv {
font-size: 22px; font-weight: 800; color: var(--fg-0);
letter-spacing: -0.02em;
background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.testcard__statl { font-size: 11px; color: var(--fg-3); font-family: var(--font-mono); text-align: right; }
.mock--tests { margin-top: 50px; }
.testpanel { padding: 28px; }
.testpanel__head {
display: flex; align-items: center; justify-content: space-between;
margin-bottom: 20px;
flex-wrap: wrap; gap: 12px;
}
.testpanel__head h4 { margin: 0; font-size: 16px; font-weight: 700; color: var(--fg-0); }
.testrows { display: flex; flex-direction: column; gap: 8px; }
.testrow {
display: grid; grid-template-columns: 28px 200px 1fr 120px;
gap: 14px; align-items: center;
padding: 10px 14px;
background: rgba(255,255,255,0.02);
border-radius: 8px;
}
@media (max-width: 700px) {
.testrow { grid-template-columns: 24px 1fr; }
.testrow .trbar, .testrow .trval { display: none; }
}
.trbullet {
width: 22px; height: 22px; border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center;
font-weight: 700; font-size: 12px;
}
.trbullet--ok { background: rgba(52,211,153,0.15); color: var(--green-400); }
.trname { font-size: 13px; color: var(--fg-1); font-weight: 500; }
.trbar { height: 4px; background: rgba(255,255,255,0.05); border-radius: 100px; overflow: hidden; }
.trbar span { display: block; height: 100%; background: linear-gradient(90deg, var(--green-400), var(--cyan-400)); border-radius: 100px; transform: scaleX(0); transform-origin: left; transition: transform 1s ease 0.3s; }
.testrow.in-view .trbar span { transform: scaleX(1); }
.in-view ~ * .trbar span { transform: scaleX(1); }
.trval { font-family: var(--font-mono); font-size: 11.5px; color: var(--green-400); text-align: right; }
/* =========================================================================
CTA
========================================================================= */
.cta {
padding: 80px 0 100px;
}
.cta__card {
padding: 60px 40px;
background: linear-gradient(135deg, rgba(167,139,250,0.08), rgba(34,211,238,0.08));
border: 1px solid rgba(167,139,250,0.25);
border-radius: var(--radius-xl);
text-align: center;
position: relative;
overflow: hidden;
}
.cta__card::before {
content: '';
position: absolute; inset: 0;
background:
radial-gradient(circle at 20% 20%, rgba(167,139,250,0.18), transparent 50%),
radial-gradient(circle at 80% 80%, rgba(34,211,238,0.18), transparent 50%);
pointer-events: none;
}
.cta__card > * { position: relative; }
.cta__badge {
display: inline-flex; align-items: center; gap: 8px;
padding: 5px 12px;
background: rgba(255,255,255,0.06);
border: 1px solid var(--border-2);
border-radius: 100px;
font-size: 12px; font-weight: 500; color: var(--fg-1);
font-family: var(--font-mono);
margin-bottom: 20px;
}
.cta__title {
font-size: clamp(32px, 4.5vw, 56px);
font-weight: 800;
letter-spacing: -0.03em;
line-height: 1.1;
margin: 0 0 16px;
color: var(--fg-0);
}
.cta__sub {
font-size: clamp(14px, 1.3vw, 17px);
color: var(--fg-2); line-height: 1.6;
max-width: 560px; margin: 0 auto 32px;
}
.cta__form {
display: flex; gap: 10px; max-width: 480px; margin: 0 auto;
flex-wrap: wrap; justify-content: center;
}
.cta__email {
flex: 1; min-width: 240px;
padding: 13px 18px;
background: rgba(0,0,0,0.35);
border: 1px solid var(--border-2);
border-radius: 12px;
color: var(--fg-0); font-size: 14px;
transition: all 0.2s ease;
}
.cta__email:focus {
outline: none;
border-color: var(--violet-400);
background: rgba(0,0,0,0.5);
box-shadow: 0 0 0 3px rgba(167,139,250,0.18);
}
.cta__email::placeholder { color: var(--fg-3); }
.cta__fine { font-size: 12px; color: var(--fg-3); margin: 14px 0 0; }
.cta__row {
display: flex; gap: 24px; justify-content: center; margin-top: 28px;
padding-top: 24px; border-top: 1px solid var(--border);
flex-wrap: wrap;
}
.ghostlink {
display: inline-flex; align-items: center; gap: 8px;
color: var(--fg-2); font-size: 13px; font-weight: 500;
font-family: var(--font-mono);
}
.ghostlink:hover { color: var(--fg-0); }
/* =========================================================================
INSTALL FOOTER
========================================================================= */
.installgrid {
margin-top: 30px;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 10px;
}
.installcard {
display: flex; align-items: center; gap: 14px;
padding: 14px 18px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 10px;
transition: all 0.2s ease;
}
.installcard:hover {
border-color: var(--border-strong);
background: var(--surface-2);
}
.installcard__l {
font-size: 11px; color: var(--fg-3); font-weight: 600;
text-transform: uppercase; letter-spacing: 0.08em;
font-family: var(--font-mono);
min-width: 60px;
}
.installcard code {
flex: 1;
font-family: var(--font-mono); font-size: 13px;
color: var(--fg-1);
background: transparent;
overflow-x: auto;
white-space: nowrap;
}
/* =========================================================================
FOOTER
========================================================================= */
.footer { padding: 60px 0 30px; border-top: 1px solid var(--border); background: rgba(0,0,0,0.2); }
.footer__inner {
display: grid; grid-template-columns: 1fr 2fr;
gap: 40px;
margin-bottom: 50px;
}
@media (max-width: 800px) { .footer__inner { grid-template-columns: 1fr; } }
.footer__brand { display: flex; align-items: flex-start; gap: 12px; }
.footer__name { font-weight: 700; color: var(--fg-0); margin-bottom: 4px; }
.footer__line { color: var(--fg-3); font-size: 13px; max-width: 260px; }
.footer__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
@media (max-width: 600px) { .footer__cols { grid-template-columns: repeat(2, 1fr); } }
.footer__col { display: flex; flex-direction: column; gap: 8px; }
.footer__h {
font-size: 11px; font-weight: 700;
color: var(--fg-3); text-transform: uppercase; letter-spacing: 0.1em;
font-family: var(--font-mono);
margin-bottom: 8px;
}
.footer__col a { color: var(--fg-2); font-size: 13.5px; }
.footer__col a:hover { color: var(--fg-0); }
.footer__bottom {
display: flex; justify-content: space-between; align-items: center;
padding-top: 24px; border-top: 1px solid var(--border);
font-size: 12px; color: var(--fg-3);
flex-wrap: wrap; gap: 12px;
}
.footer__chips { display: flex; gap: 10px; flex-wrap: wrap; }
.footer__chip {
display: inline-flex; align-items: center; gap: 6px;
padding: 4px 10px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 100px;
font-size: 11.5px; color: var(--fg-2);
font-family: var(--font-mono);
}
/* =========================================================================
REVEAL ANIMATIONS
========================================================================= */
[data-reveal] {
opacity: 0;
transform: translateY(28px);
transition: opacity 1.1s cubic-bezier(0.22, 1, 0.36, 1), transform 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}
[data-reveal].in {
opacity: 1;
transform: translateY(0);
}
[data-reveal][style*="--i:0"] { transition-delay: 0s; }
[data-reveal][style*="--i:1"] { transition-delay: 0.12s; }
[data-reveal][style*="--i:2"] { transition-delay: 0.24s; }
[data-reveal][style*="--i:3"] { transition-delay: 0.36s; }
/* reduced motion */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
[data-reveal] { opacity: 1; transform: none; }
}
/* =========================================================================
v1.5 CLI-themed refactor — keep v1 content, add CLI/terminal aesthetic
========================================================================= */
/* ----- nav additions ----- */
.brand-ver {
font-family: var(--font-mono); font-size: 10.5px; font-weight: 500;
color: var(--fg-3);
padding: 2px 10px;
background: rgba(255,255,255,0.05);
border: 1px solid var(--border);
border-radius: 5px;
margin-left: 4px;
white-space: nowrap; /* keep v0.0.1-alpha on one line */
line-height: 1.6; /* slim vertical footprint */
}
.navic { display: inline-flex; align-items: center; gap: 6px; }
.navic img { opacity: 0.75; }
.btn--ghost { font-family: var(--font-mono); font-size: 13px; }
/* ----- ALPHA chip in hero badge (replaces dot+arrow link badge) ----- */
.badge {
cursor: default;
}
.badge__chip {
display: inline-flex; align-items: center; justify-content: center;
padding: 2px 7px;
background: var(--grad-brand);
color: white;
font-family: var(--font-mono);
font-size: 10px; font-weight: 700;
letter-spacing: 0.08em;
border-radius: 4px;
margin-right: 4px;
}
.badge__text { font-family: var(--font-mono); font-size: 12.5px; }
/* ----- CLI install card in hero (Factory.ai pattern) ----- */
/* ----- install hero — terminal-window aesthetic (chrome + body) ----- */
.install-hero {
max-width: 680px;
margin: 0 auto 32px;
background: linear-gradient(180deg, #050505, #000000);
border: 1px solid rgba(255, 230, 210, 0.08);
border-radius: 12px;
overflow: hidden;
box-shadow: 0 30px 80px -30px rgba(0,0,0,0.85);
text-align: left;
}
/* macOS-style chrome bar with traffic-light dots + subtitle */
.install-hero__chrome {
display: flex; align-items: center; gap: 8px;
padding: 11px 16px;
background: rgba(255, 230, 210, 0.02);
border-bottom: 1px solid rgba(255, 230, 210, 0.05);
}
.install-hero__chromeT {
margin-left: 10px;
font-family: var(--font-mono);
font-size: 11px;
color: var(--fg-3);
letter-spacing: 0.01em;
}
/* package-manager tab strip — sits between chrome and body */
.install-hero__tabs {
display: flex;
border-bottom: 1px solid rgba(255, 230, 210, 0.05);
background: rgba(0, 0, 0, 0.4);
overflow-x: auto;
scrollbar-width: none;
}
.install-hero__tabs::-webkit-scrollbar { display: none; }
.install-tab {
padding: 11px 18px;
font-family: var(--font-mono);
font-size: 12px; font-weight: 500;
color: var(--fg-3);
border: none; background: none;
cursor: pointer;
transition: color 0.15s ease, background 0.15s ease, border-bottom-color 0.15s ease;
border-bottom: 2px solid transparent;
white-space: nowrap;
letter-spacing: 0.01em;
}
.install-tab:hover { color: var(--fg-1); }
.install-tab.active {
color: var(--orange-400);
border-bottom-color: var(--orange-400);
background: transparent;
font-weight: 600;
}
/* terminal body — generous padding, prompt + command + copy */
.install-hero__body {
position: relative;
padding: 22px 24px;
display: flex; align-items: center; gap: 14px;
}
.install-cmd {
flex: 1;
font-family: var(--font-mono);
font-size: 14px;
color: var(--fg-0);
background: transparent;
overflow-x: auto;
white-space: nowrap;
padding: 0;
scrollbar-width: none;
font-weight: 500;
letter-spacing: -0.003em;
line-height: 1.5;
display: flex; align-items: baseline; gap: 12px;
min-width: 0;
}
.install-cmd::-webkit-scrollbar { display: none; }
.install-cmd[hidden] { display: none; }
/* green terminal $ prompt with soft phosphor glow */
.install-prompt {
color: #00C244;
font-weight: 700;
text-shadow: 0 0 8px rgba(0, 194, 68, 0.45);
flex-shrink: 0;
font-size: 15px;
}
.install-copy {
display: inline-flex; align-items: center; gap: 6px;
padding: 7px 12px;
background: rgba(255, 230, 210, 0.04);
border: 1px solid rgba(255, 230, 210, 0.08);
border-radius: 7px;
color: var(--fg-3);
font-family: var(--font-mono);
font-size: 11px; font-weight: 500;
flex-shrink: 0;
cursor: pointer;
transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.install-copy:hover {
background: rgba(217, 119, 6, 0.08);
border-color: rgba(217, 119, 6, 0.35);
color: var(--orange-400);
}
.install-copy.copied {
color: #00C244;
border-color: rgba(0, 194, 68, 0.45);
background: rgba(0, 194, 68, 0.08);
}
/* ----- logo grid (structured engines/hardware/runtimes) ----- */
.logobar { padding: 60px 0 50px; }
.logobar__label {
text-align: center; margin: 0 0 28px;
font-family: var(--font-mono);
font-size: 12px; color: var(--orange-400);
font-weight: 600;
letter-spacing: 0.04em;
}
.logogrid {
display: flex; flex-direction: column; gap: 22px;
max-width: 980px; margin: 0 auto;
}
.logogrid__group {
display: grid;
grid-template-columns: 110px 1fr;
gap: 22px;
align-items: center;
}
@media (max-width: 800px) {
.logogrid__group { grid-template-columns: 1fr; gap: 10px; }
}
.logogrid__h {
font-family: var(--font-mono);
font-size: 11px; color: var(--orange-400); font-weight: 700;
text-transform: uppercase; letter-spacing: 0.12em;
padding-right: 18px;
border-right: 1px solid rgba(217, 119, 6, 0.18);
text-align: right;
}
@media (max-width: 800px) {
.logogrid__h { border-right: none; padding-right: 0; text-align: left; }
}
.logogrid__row {
display: flex; gap: 8px; flex-wrap: wrap;
}
.lg-chip {
display: inline-flex; align-items: center; gap: 8px;
padding: 7px 13px;
background: rgba(217, 119, 6, 0.04);
border: 1px solid rgba(217, 119, 6, 0.18);
border-radius: 100px;
color: var(--fg-1);
font-size: 13px; font-weight: 500;
font-family: var(--font-mono);
letter-spacing: -0.01em;
transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease, color 0.15s ease;
white-space: nowrap;
}
.lg-chip:hover {
background: rgba(217, 119, 6, 0.10);
border-color: rgba(217, 119, 6, 0.45);
color: var(--fg-0);
transform: translateY(-1px);
}
.lg-chip img { display: inline-block; flex-shrink: 0; }
.lg-glyph {
display: inline-flex; align-items: center; justify-content: center;
width: 14px; height: 14px;
border-radius: 3px;
font-family: var(--font-mono);
font-size: 9px; font-weight: 800;
color: white;
flex-shrink: 0;
}
.lg-glyph--vllm { background: linear-gradient(135deg, #F97316, #DC2626); }
.lg-glyph--sglang { background: linear-gradient(135deg, #06B6D4, #3B82F6); }
.lg-glyph--fi { background: linear-gradient(135deg, #8B5CF6, #EC4899); }
.lg-glyph--ts { background: linear-gradient(135deg, #F97316, #FBBF24); color: #1a1a1a; }
.lg-glyph--lmd { background: linear-gradient(135deg, #10B981, #06B6D4); }
.lg-glyph--tgi { background: linear-gradient(135deg, #FFD21E, #F59E0B); color: #1a1a1a; }
.lg-glyph--cuda { background: #76B900; color: white; }
.lg-glyph--triton { background: #7C3AED; }
.lg-glyph--ncc { background: linear-gradient(135deg, #22D3EE, #60A5FA); }
.lg-glyph--uv { background: #DE5FE9; color: white; font-size: 8px; }
/* ----- eyebrow refinement (// comment style) ----- */
.eyebrow {
font-family: var(--font-mono);
color: var(--violet-400);
text-transform: none;
letter-spacing: 0;
font-size: 12.5px;
font-weight: 500;
}
/* ----- installcard with logos ----- */
.installcard {
display: flex; align-items: center; gap: 12px;
}
.installcard img,
.installcard .lg-glyph {
flex-shrink: 0;
}
.installcard__l {
font-size: 11px; color: var(--fg-3); font-weight: 600;
text-transform: uppercase; letter-spacing: 0.08em;
font-family: var(--font-mono);
min-width: 50px;
}
/* ----- footer with link icons ----- */
.footer__col a {
display: inline-flex; align-items: center; gap: 6px;
}
.footer__col a img { opacity: 0.7; vertical-align: middle; flex-shrink: 0; }
.footer__col a:hover img { opacity: 1; }
/* ----- subtle terminal-aesthetic touches ----- */
.mock__url { font-family: var(--font-mono); }
.mock__url::before {
content: '$ ';
color: var(--green-400);
font-weight: 700;
margin-right: 2px;
display: none; /* keep URL look on dashboard, enable on hover if desired */
}
/* "$ install" nav CTA visual */
.btn--ghost { font-family: var(--font-mono); font-size: 13px; padding: 8px 12px; }
.btn--ghost:hover { color: var(--cyan-400); }
/* =========================================================================
v2 TERMINAL REFACTOR — Factory.ai/droid aesthetic + Inception ASCII anims
========================================================================= */
/* nav (mono-everywhere refinement) */
.nav__links a { font-family: var(--font-mono); font-size: 13px; letter-spacing: -0.005em; }
.nav__cta .btn--primary { font-family: var(--font-mono); font-size: 13px; padding: 9px 14px; }
.nav__cta .btn--primary .btn__arrow { margin-left: 2px; }
/* subtle CRT scanlines (Inception Labs vibe) */
.bg-scanlines {
position: fixed; inset: 0; z-index: 1; pointer-events: none;
background: repeating-linear-gradient(
180deg,
transparent 0,
transparent 2px,
rgba(255,255,255,0.012) 2px,
rgba(255,255,255,0.012) 3px
);
opacity: 0.7;
mix-blend-mode: overlay;
}
/* =========================================================================
HERO TERMINAL — animated ASCII status
========================================================================= */
.hero__terminal {
margin-top: 60px;
position: relative;
perspective: 2400px;
}
.termx {
background: linear-gradient(180deg, #0D0D17 0%, #07070D 100%);
border: 1px solid var(--border-2);
border-radius: 14px;
box-shadow: var(--shadow-3), var(--shadow-brand), 0 0 0 1px rgba(255,255,255,0.04) inset;
overflow: hidden;
transform: rotateX(1.5deg);
transform-origin: center top;
position: relative;
font-family: var(--font-mono);
}
.termx::after {
content: '';
position: absolute;
bottom: -60px; left: 10%; right: 10%; height: 100px;
background: radial-gradient(ellipse at center, rgba(139,92,246,0.4), transparent 70%);
filter: blur(40px);
z-index: -1;
}
.termx__chrome {
display: flex; align-items: center; gap: 10px;
padding: 11px 16px;
background: rgba(255,255,255,0.025);
border-bottom: 1px solid var(--border);
}
.termx__title {
flex: 1;
display: flex; align-items: center; gap: 8px; justify-content: center;
font-size: 11.5px; color: var(--fg-3);
}
.termx__user { color: var(--violet-400); }
.termx__sep { color: var(--fg-3); }
.termx__path { color: var(--fg-2); }
.termx__right { display: flex; align-items: center; gap: 7px; font-size: 11px; color: var(--fg-3); }
.spinner {
display: inline-block; width: 12px; text-align: center;
color: var(--cyan-400); font-size: 13px;
}
.termx__sub { font-size: 10.5px; color: var(--cyan-400); }
.termx__body {
padding: 22px 26px;
font-size: 13px;
line-height: 1.7;
color: var(--fg-1);
min-height: 480px;
}
@media (max-width: 700px) {
.termx__body { font-size: 11px; padding: 16px 14px; min-height: 380px; }
}
.tx-line { white-space: pre-wrap; word-break: break-word; }
.tx-line--space { height: 6px; }
.tx-line--foot { color: var(--fg-3); font-size: 11.5px; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.tx-prompt { color: var(--green-400); font-weight: 700; user-select: none; }
.tx-cmd { color: var(--fg-0); margin-left: 4px; }
.tx-rule { color: var(--fg-4); font-size: 12px; user-select: none; white-space: nowrap; overflow: hidden; }
.tx-dim { color: var(--fg-3); }
.tx-key { color: var(--violet-400); }
.tx-val { color: var(--cyan-400); }
.tx-val--sm { font-size: 11.5px; }
.tx-row {
display: grid;
grid-template-columns: 90px 1fr auto;
gap: 16px; align-items: center;
font-size: 12.5px;
}
@media (max-width: 700px) {
.tx-row { grid-template-columns: 70px 1fr auto; gap: 10px; font-size: 10.5px; }
}
.tx-row .tx-key { font-size: 10.5px; font-weight: 600; letter-spacing: 0.04em; }
.tx-row .tx-val { color: var(--fg-0); font-weight: 500; }
.tx-pill {
display: inline-flex; align-items: center; gap: 5px;
padding: 2px 8px;
border: 1px solid;
border-radius: 4px;
font-size: 10px; font-weight: 600;
text-transform: lowercase;
letter-spacing: 0.02em;
}
.tx-pill--live { color: var(--green-400); border-color: rgba(52,211,153,0.35); background: rgba(52,211,153,0.06); }
.tx-pill--ok { color: var(--cyan-400); border-color: rgba(34,211,238,0.35); background: rgba(34,211,238,0.06); }
.tx-pill-dot {
width: 5px; height: 5px; border-radius: 50%;
background: currentColor;
box-shadow: 0 0 0 2px rgba(255,255,255,0.04);
animation: pulse-dot 1.6s ease-in-out infinite;
}
/* stat block with ASCII bar + sparkline */
.tx-stat { margin: 10px 0 14px; }
.tx-stat__head {
display: flex; justify-content: space-between; align-items: baseline;
font-size: 11px; margin-bottom: 4px;
}
.tx-stat__lbl {
color: var(--fg-3);
font-weight: 600;
letter-spacing: 0.06em;
}
.tx-stat__val { color: var(--fg-0); font-weight: 500; font-size: 12px; }
.tx-stat__hint { color: var(--fg-3); font-size: 10.5px; margin-left: 6px; }
/* ASCII bar — uses ▓░ characters via gradient + width animation */
.tx-bar {
height: 14px;
background: rgba(255,255,255,0.04);
border-radius: 2px;
overflow: hidden;
position: relative;
}
.tx-bar__fill {
display: block;
height: 100%;
width: 0;
transition: width 1.4s cubic-bezier(0.22, 1, 0.36, 1);
background-image: repeating-linear-gradient(90deg, currentColor 0 6px, transparent 6px 8px);
color: var(--cyan-400);
}
.tx-bar__fill[data-color="green"] { color: var(--green-400); }
.tx-bar__fill[data-color="violet"] { color: var(--violet-400); }
.tx-bar__fill[data-color="cyan"] { color: var(--cyan-400); }
.tx-bar__fill[data-color="pink"] { color: var(--pink-400); }
/* sparkline rendered via JS into mono ▁▂▃▄▅▆▇█ */
.tx-spark {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 1px;
margin-top: 3px;
white-space: nowrap;
overflow: hidden;
color: var(--cyan-400);
opacity: 0.7;
}
.tx-spark[data-spark="green"] { color: var(--green-400); }
.tx-spark[data-spark="violet"] { color: var(--violet-400); }
.tx-spark[data-spark="pink"] { color: var(--pink-400); }
.tx-time { color: var(--cyan-400); font-variant-numeric: tabular-nums; }
/* blinking cursor */
.cursor {
display: inline-block;
width: 8px; height: 14px;
background: var(--cyan-400);
vertical-align: middle;
margin-left: 4px;
animation: blink 1.1s ease-in-out infinite;
}
@keyframes blink {
0%, 49% { opacity: 1; }
50%, 100% { opacity: 0; }
}
/* float positions */
.hero__terminal .float--tl { top: -18px; left: -14px; }
.hero__terminal .float--br { bottom: -22px; right: -18px; }
/* =========================================================================
LOGO STACK (already styled — minor refinements)
========================================================================= */
.logogrid__h { font-family: var(--font-mono); text-transform: lowercase; letter-spacing: 0.08em; }
.lg-chip { font-family: var(--font-mono); }
/* =========================================================================
TERMINAL CARDS (replaces glossy pillars and validation testcards)
========================================================================= */
.tcards {
margin-top: 30px;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 14px;
}
@media (min-width: 1100px) { .tcards { grid-template-columns: repeat(4, 1fr); } }
.tcard {
position: relative;
padding: 22px 22px 20px;
background: linear-gradient(180deg, rgba(10,10,18,0.6), rgba(7,7,13,0.4));
border: 1px solid var(--border);
border-radius: 10px;
transition: all 0.2s ease;
overflow: hidden;
}
.tcard::before {
content: '';
position: absolute; top: 0; left: 0; height: 1px; width: 0;
background: var(--grad-brand);
transition: width 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.tcard:hover {
border-color: rgba(167,139,250,0.3);
transform: translateY(-2px);
}
.tcard:hover::before { width: 100%; }
.tcard__head {
display: flex; align-items: baseline; gap: 8px;
margin-bottom: 14px;
font-family: var(--font-mono);
}
.tcard__id {
font-size: 11px;
color: var(--fg-3);
font-weight: 700;
}
.tcard__name {
font-size: 14px;
color: var(--fg-0);
font-weight: 700;
letter-spacing: -0.005em;
}
.tcard__body {
font-size: 13.5px; color: var(--fg-2);
line-height: 1.6;
margin: 0 0 16px;
}
.tcard__body strong { color: var(--fg-0); font-weight: 600; }
.tcard__list {
display: flex; flex-direction: column; gap: 5px;
padding-top: 14px;
border-top: 1px solid var(--border);
font-family: var(--font-mono);
}
.tcard__row {
font-size: 12px;
color: var(--fg-2);
display: flex; align-items: center; gap: 6px;
}
.tcheck {
color: var(--green-400);
font-weight: 700;
flex-shrink: 0;
}
.tcard__stat {
padding-top: 14px;
border-top: 1px solid var(--border);
display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
}
.tcard__statv {
font-size: 22px; font-weight: 800;
background: var(--grad-brand);
-webkit-background-clip: text; background-clip: text;
color: transparent;
letter-spacing: -0.02em;
font-family: var(--font-mono);
}
.tcard__statl {
font-size: 11px; color: var(--fg-3);
font-family: var(--font-mono);
text-align: right;
}
/* =========================================================================
HOW IT WORKS — terminal-style steps
3-up grid that never overflows. Wider container for this section so
the three code-block widgets have breathing room.
========================================================================= */
.section--how .container {
max-width: 1440px; /* wider than the default 1240 so code blocks aren't crammed */
}
.hsteps {
margin: 30px auto 0;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr)); /* minmax(0,..) lets columns shrink below content size */
gap: 24px;
align-items: stretch;
justify-content: center;
}
@media (max-width: 1000px) {
.hsteps { grid-template-columns: minmax(0, 1fr); max-width: 640px; }
}
.hstep {
padding: 24px 24px;
background: rgba(10,10,18,0.5);
border: 1px solid var(--border);
border-radius: 10px;
min-width: 0; /* critical: allow grid child to shrink below content */
display: flex;
flex-direction: column;
overflow: hidden; /* belt-and-suspenders: nothing pokes out */
}
/* contain code blocks to their column — wrap long lines instead of overflowing
+ stretch each codeblock to fill the remaining column height so all 3 cards
end at the same vertical line (symmetric grid even when line counts differ) */
.hstep .codeblock {
min-width: 0;
max-width: 100%;
overflow: hidden;
flex: 1 1 auto;
margin-top: auto; /* push the codeblock to the column's bottom edge */
display: flex;
flex-direction: column;
}
.hstep .codeblock pre {
white-space: pre-wrap; /* wrap long lines like URLs */
word-break: break-word; /* allow URLs to break at any character if needed */
overflow-x: hidden;
flex: 1; /* fill the codeblock height so the dark surface reaches the bottom */
}
.hstep__head {
display: flex; align-items: baseline; gap: 8px;
margin-bottom: 8px;
font-family: var(--font-mono);
}
.hstep__id {
font-size: 11px; color: var(--fg-3); font-weight: 700;
}
.hstep__name {
font-size: 14px; color: var(--fg-0); font-weight: 700;
}
.hstep__copy {
font-size: 13.5px; color: var(--fg-2);
line-height: 1.55; margin: 0 0 14px;
/* hold space for 3 lines so all 3 cards' code boxes start at the same Y
even when one description wraps to 3 lines and the others wrap to 2 */
min-height: calc(3 * 1.55em);
}
/* =========================================================================
ASCII PERFORMANCE BAR CHART
========================================================================= */
.ascii-perf {
--ax-pad: 48px; /* one knob — controls ALL horizontal padding inside the widget */
margin: 30px auto 0;
max-width: 960px; /* tighter than v9.3 1080px so the widget is more proportionate */
background: #000000 !important;
border: 1px solid rgba(255, 230, 210, 0.08);
border-radius: 12px;
padding: 0;
font-family: var(--font-mono);
box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.85);
overflow: hidden;
position: relative;
}
.ascii-perf::before { display: none; }
.ascii-perf__chrome {
display: flex; align-items: center; gap: 8px;
padding: 11px var(--ax-pad);
background: rgba(255, 230, 210, 0.02);
border-bottom: 1px solid rgba(255, 230, 210, 0.05);
}
.ascii-perf__chromeT {
margin-left: 10px;
font-family: var(--font-mono);
font-size: 11px;
color: var(--fg-3);
letter-spacing: 0.01em;
}
.ascii-perf__head { padding: 22px var(--ax-pad) 0; margin-bottom: 20px; }
.ascii-perf__foot { padding: 0 var(--ax-pad) 22px; }
.ascii-perf__title {
font-size: 14px; color: var(--fg-0); font-weight: 600;
margin-bottom: 4px;
}
.ascii-perf__sub {
font-size: 11.5px; color: var(--fg-3);
display: flex; align-items: center; gap: 8px;
flex-wrap: wrap;
}
.ascii-perf__chip {
display: inline-flex; align-items: center;
padding: 2px 8px;
border-radius: 4px;
font-size: 10px; font-weight: 700;
letter-spacing: 0.04em;
background: rgba(251,146,60,0.12);
color: var(--orange-400);
border: 1px solid rgba(251,146,60,0.25);
}
.ascii-perf__chip--ok {
background: rgba(52,211,153,0.12);
color: var(--green-400);
border-color: rgba(52,211,153,0.3);
}
.ascii-perf__rows {
display: flex; flex-direction: column; gap: 12px;
padding: 18px var(--ax-pad); /* was '18px 0' — that shorthand was wiping the horizontal padding to zero */
border-top: 1px dashed var(--border);
border-bottom: 1px dashed var(--border);
}
.ascii-perf__row {
display: grid;
grid-template-columns: 110px 1fr 220px;
gap: 18px; align-items: center;
font-size: 13px;
}
@media (max-width: 700px) {
.ascii-perf__row { grid-template-columns: 100px 1fr; }
.ascii-perf__v { grid-column: 1 / -1; padding-left: 100px; }
}
.ascii-perf__l {
color: var(--fg-2); font-size: 12px;
text-transform: lowercase; letter-spacing: 0.04em;
}
.ascii-perf__bar {
height: 16px;
background: rgba(255,255,255,0.03);
border-radius: 2px;
overflow: hidden;
position: relative;
border: 1px solid var(--border);
}
.ascii-perf__fill {
display: block;
height: 100%;
width: 0;
transition: width 1.5s cubic-bezier(0.22, 1, 0.36, 1) 0.15s;
background-image: repeating-linear-gradient(90deg, currentColor 0 8px, transparent 8px 10px);
color: var(--cyan-400);
}
.ascii-perf__fill[data-color="green"] { color: var(--green-400); }
.ascii-perf__fill[data-color="violet"] { color: var(--violet-400); }
.ascii-perf__fill[data-color="pink"] { color: var(--pink-400); }
.ascii-perf__v {
font-size: 16px; font-weight: 700;
color: var(--fg-0);
letter-spacing: -0.02em;
text-align: right;
font-variant-numeric: tabular-nums;
}
.ascii-perf__t {
font-size: 11px; font-weight: 400;
color: var(--fg-3);
margin-left: 4px;
}
.ascii-perf__foot {
margin-top: 18px;
display: flex; align-items: center; gap: 10px;
font-size: 11.5px;
flex-wrap: wrap;
}
/* =========================================================================
WEBAPP section (smaller dashboard mockup with terminal chrome)
========================================================================= */
.section--webapp { padding: 110px 0; }
.mock--web {
background: linear-gradient(180deg, #0E0E18, #0A0A12);
border: 1px solid var(--border-2);
border-radius: 14px;
overflow: hidden;
box-shadow: var(--shadow-3), var(--shadow-cyan), 0 0 0 1px rgba(255,255,255,0.04) inset;
}
.mock--web .mock__body { min-height: 360px; grid-template-columns: 1fr; }
.mock--web .mock__main { padding: 20px 24px; }
.mock--web .mock__url::before {
content: '';
}
.mock__chartmini {
margin-top: 16px;
padding: 16px;
background: rgba(255,255,255,0.02);
border: 1px solid var(--border);
border-radius: 10px;
}
.mock__chartmini svg { width: 100%; height: 100px; }
.float--wizard { top: -14px; right: -14px; }
/* =========================================================================
TERMINAL TEST OUTPUT (validation)
========================================================================= */
.testterm {
margin-top: 30px;
background: linear-gradient(180deg, #0D0D17, #07070D);
border: 1px solid var(--border-2);
border-radius: 14px;
overflow: hidden;
box-shadow: var(--shadow-2);
font-family: var(--font-mono);
}
.testterm__chrome {
display: flex; align-items: center; gap: 10px;
padding: 11px 16px;
background: rgba(255,255,255,0.025);
border-bottom: 1px solid var(--border);
}
.testterm__body {
padding: 22px 32px;
font-size: 13px;
line-height: 1.7;
min-height: 360px;
}
@media (max-width: 700px) {
.testterm__body { font-size: 11px; padding: 16px 18px; }
}
.testrowx {
display: grid;
grid-template-columns: 35px 220px 1fr 130px;
gap: 12px; align-items: center;
padding: 5px 0;
font-size: 12.5px;
opacity: 0;
transform: translateX(-8px);
animation: testrow-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
animation-delay: calc(var(--d) * 0.18s + 0.3s);
}
@keyframes testrow-in {
to { opacity: 1; transform: translateX(0); }
}
@media (max-width: 700px) {
.testrowx { grid-template-columns: 30px 1fr; font-size: 11px; }
.testrowx__bar, .testrowx__v { display: none; }
}
.testrowx__ic { color: var(--green-400); font-weight: 700; }
.testrowx__name { color: var(--fg-1); font-weight: 500; }
.testrowx__bar {
height: 10px;
background: rgba(255,255,255,0.03);
border-radius: 2px;
overflow: hidden;
border: 1px solid var(--border);
}
.testrowx__bar span {
display: block; height: 100%;
width: 100%;
background-image: repeating-linear-gradient(90deg, var(--green-400) 0 6px, transparent 6px 8px);
transform: scaleX(0);
transform-origin: left;
animation: bar-fill 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
animation-delay: calc(var(--d) * 0.18s + 0.6s);
}
@keyframes bar-fill { to { transform: scaleX(1); } }
.testrowx__v {
color: var(--green-400);
font-size: 11.5px;
text-align: right;
font-variant-numeric: tabular-nums;
}
/* =========================================================================
GLOBAL TWEAKS — make existing v1 elements feel more terminal
========================================================================= */
/* sharper, less-glossy section titles */
.section__title { letter-spacing: -0.025em; }
/* painrow — terminal output styling */
.painrow {
background: rgba(10,10,18,0.4);
border: 1px solid rgba(248,113,113,0.2);
border-radius: 10px;
padding: 28px 24px;
}
.painrow__num { font-family: var(--font-mono); letter-spacing: -0.03em; }
.painrow__l { font-family: var(--font-sans); }
/* eyebrow further refinement */
.eyebrow {
font-family: var(--font-mono);
color: var(--cyan-400);
font-size: 12px;
font-weight: 500;
text-transform: none;
letter-spacing: 0;
}
/* .codeblock terminal aesthetic baked into the base ruleset above */
/* CTA card — slightly terminal */
.cta__card {
background: linear-gradient(180deg, rgba(10,10,18,0.85), rgba(7,7,13,0.7));
border: 1px solid var(--border-2);
}
.cta__badge {
font-family: var(--font-mono);
text-transform: lowercase;
letter-spacing: 0;
}
.cta__title { letter-spacing: -0.025em; }
.cta__email { font-family: var(--font-mono); }
.cta__form .btn--primary { font-family: var(--font-mono); }
/* status pills in dashboard mockup, terminal-styled */
.status-pill {
font-family: var(--font-mono);
letter-spacing: 0.03em;
text-transform: lowercase;
}
/* installgrid */
.installcard code { font-size: 12.5px; }
/* footer */
.footer__h { color: var(--cyan-400); }
.footer__col a { font-family: var(--font-mono); font-size: 13px; }
/* "Coming soon" badge text → mono */
.badge__text { font-family: var(--font-mono); font-size: 12.5px; }
.badge { cursor: default; }
/* mock url with $ prefix (override the hidden state for terminal feel) */
.mock--web .mock__url::before { display: none; }
.mock--web .mock__url { color: var(--green-400); text-align: left; padding-left: 14px; font-weight: 500; }
/* mock__title H3 — keep but make a touch sharper */
.mock__title h3 { letter-spacing: -0.018em; }
/* =========================================================================
v2 CLAUDE-CODE-CLI styled AGENT WIDGET
Hero gets a widget that LOOKS like Claude Code / Codex CLI in action.
========================================================================= */
.agentw {
background: #000000 !important;
border: 1px solid rgba(255, 230, 210, 0.08);
border-radius: 12px;
box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.85);
overflow: hidden;
font-family: var(--font-mono);
position: relative;
}
.agentw::after { display: none; }
/* chrome row — macOS-style with traffic-light dots + warm-tint bar */
.agentw__chrome {
display: flex; align-items: center; gap: 8px;
padding: 11px 16px;
background: rgba(255, 230, 210, 0.02);
border-bottom: 1px solid rgba(255, 230, 210, 0.05);
font-size: 12px;
}
/* small gap between the last traffic-light dot and the autoinference star */
.agentw__chrome .mock__dot + .agentw__star { margin-left: 6px; }
.agentw__star {
color: var(--orange-400);
font-size: 14px;
animation: agentstar 4s ease-in-out infinite;
}
@keyframes agentstar {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.7; transform: scale(0.95); }
}
.agentw__name { color: var(--fg-0); font-weight: 600; letter-spacing: -0.005em; }
.agentw__ver {
color: var(--fg-3);
font-size: 11px;
padding: 1px 6px;
background: rgba(255,255,255,0.04);
border-radius: 4px;
border: 1px solid rgba(255,255,255,0.06);
}
.agentw__chromeR {
margin-left: auto;
display: inline-flex; align-items: center; gap: 8px;
color: var(--orange-400);
font-size: 11.5px;
}
.agentw__spin {
display: inline-block; width: 12px;
color: var(--orange-400);
font-size: 14px;
text-align: center;
}
.agentw__status {
text-transform: lowercase;
letter-spacing: 0.02em;
font-weight: 500;
}
/* body */
.agentw__body {
padding: 24px 24px 22px;
font-size: 13.5px;
line-height: 1.65;
color: var(--fg-1);
min-height: 540px;
}
@media (max-width: 700px) {
.agentw__body { padding: 18px 14px; font-size: 12px; min-height: 460px; }
}
/* input box — Claude Code style, subtle neutral border (orange only on caret) */
.agentw__input {
display: flex; align-items: center; gap: 12px;
padding: 14px 18px;
border: 1px solid rgba(255, 230, 210, 0.10);
border-radius: 8px;
background: rgba(0, 0, 0, 0.18);
margin-bottom: 24px;
}
.agentw__input::before { display: none; }
.agentw__caret {
color: var(--orange-400);
font-weight: 600;
font-size: 15px;
flex-shrink: 0;
}
.agentw__cmd {
color: var(--fg-0);
font-weight: 500;
flex: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* tool calls — Claude Code's ● bullet + ⎿ indent pattern */
.agentw__tool {
margin-bottom: 14px;
opacity: 0;
transform: translateX(-6px);
animation: agenttool-in 0.65s cubic-bezier(0.22, 1, 0.36, 1) forwards;
animation-delay: calc(var(--d) * 0.45s + 0.7s);
}
@keyframes agenttool-in {
to { opacity: 1; transform: translateX(0); }
}
.agentw__toolH {
display: flex; align-items: baseline; gap: 8px;
font-size: 13.5px;
}
.agentw__bullet {
color: var(--orange-400);
font-size: 10px;
line-height: 1;
}
.agentw__toolN {
color: var(--fg-0);
font-weight: 600;
}
.agentw__took {
color: var(--fg-3);
font-size: 11.5px;
margin-left: auto;
}
.agentw__toolR {
display: flex; gap: 8px;
padding-left: 18px;
margin-top: 2px;
}
.agentw__indent {
color: var(--fg-3);
font-size: 13px;
flex-shrink: 0;
}
.agentw__toolT {
color: var(--fg-2);
font-size: 12.5px;
}
.agentw__up {
color: var(--amber-400);
font-weight: 600;
}
.agentw__ok {
color: var(--green-400);
font-weight: 600;
}
/* agent message — │ left border */
.agentw__msg {
display: flex; gap: 14px;
margin: 20px 0 16px;
opacity: 0;
transform: translateY(8px);
animation: agentmsg-in 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
animation-delay: calc(var(--d) * 0.45s + 0.7s);
}
@keyframes agentmsg-in {
to { opacity: 1; transform: translateY(0); }
}
.agentw__msgBar {
width: 2px;
background: rgba(217, 119, 6, 0.35);
border-radius: 2px;
flex-shrink: 0;
}
.agentw__msgBody p {
margin: 0 0 6px;
color: var(--fg-1);
font-size: 13.5px;
line-height: 1.55;
}
.agentw__msgBody p:last-child { margin-bottom: 0; }
.agentw__link {
color: var(--orange-400);
text-decoration: none;
border-bottom: 1px dashed rgba(251, 146, 60, 0.3);
}
/* thinking indicator */
.agentw__thinking {
display: flex; align-items: center; gap: 10px;
font-size: 12.5px;
color: var(--fg-3);
margin-top: 18px;
padding-top: 14px;
border-top: 1px solid rgba(255,255,255,0.04);
opacity: 0;
animation: agentmsg-in 0.7s ease forwards;
animation-delay: calc(var(--d) * 0.45s + 0.7s);
}
.agentw__think {
display: inline-block;
color: var(--amber-400);
font-size: 15px;
text-shadow: 0 0 8px rgba(251, 191, 36, 0.5);
}
.agentw__thinkT { font-style: italic; }
/* cursor in input box (inherits .cursor base, override color) */
.agentw .cursor { background: var(--orange-400); }
/* floats around the agent widget */
/* .hero__terminal .float--tl .float__icon now inherits the red live blinker */
.hero__terminal .float--br .float__metric span { color: var(--amber-400); }
/* =========================================================================
WEBAPP DASHBOARD — warm recoloring of v1 mockup
========================================================================= */
.section--webapp { padding: 110px 0; }
.mock--dashwarm {
margin-top: 32px;
transform: rotateX(1.5deg);
transform-origin: center top;
box-shadow: var(--shadow-3), var(--shadow-cyan), 0 0 0 1px rgba(255,255,255,0.04) inset;
}
.mock--dashwarm::after {
content: '';
position: absolute;
bottom: -60px; left: 10%; right: 10%; height: 100px;
background: radial-gradient(ellipse at center, rgba(239,68,68,0.4), transparent 70%);
filter: blur(40px); z-index: -1;
}
.float--dashwarm-tl { top: -20px; left: -20px; }
.float--dashwarm-br { bottom: -22px; right: -20px; }
/* copylist centered for webapp section */
.copylist--center {
margin: 36px auto 0;
max-width: 720px;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 10px;
font-family: var(--font-mono);
font-size: 12.5px;
}
/* =========================================================================
GLOBAL WARM RECOLORING — explicit overrides where hardcoded colors leak
========================================================================= */
/* status pills: 'live' now orange instead of green, since green is reserved */
.status-pill--live {
background: rgba(249,115,22,0.12);
color: var(--orange-400);
border-color: rgba(249,115,22,0.3);
}
.status-pill--live .ping {
background: var(--orange-400);
box-shadow: 0 0 0 3px rgba(249,115,22,0.22);
}
/* keep status-pill--ok (success) in green — that's the "where it needs to be" green */
.status-pill--ok {
background: rgba(74,222,128,0.10);
color: var(--green-400);
border-color: rgba(74,222,128,0.28);
}
/* dot colors */
.dot--green { background: var(--green-400); box-shadow: 0 0 8px rgba(74,222,128,0.6); }
.dot--violet { background: var(--orange-400); box-shadow: 0 0 8px rgba(251,146,60,0.6); }
.dot--cyan { background: var(--amber-400); box-shadow: 0 0 8px rgba(251,191,36,0.6); }
.dot--pulse { background: var(--orange-400); box-shadow: 0 0 0 3px rgba(249,115,22,0.22); animation: pulse-dot 2s ease-in-out infinite; }
/* badge dot */
.badge__dot {
background: var(--amber-400);
box-shadow: 0 0 0 4px rgba(251,191,36,0.18);
}
@keyframes pulse-dot {
0%, 100% { box-shadow: 0 0 0 4px rgba(251,191,36,0.18); }
50% { box-shadow: 0 0 0 8px rgba(251,191,36,0.05); }
}
/* selection */
::selection { background: rgba(249,115,22,0.35); color: white; }
/* eyebrow — warm */
.eyebrow { color: var(--orange-400); }
/* footer link h's → orange */
.footer__h { color: var(--orange-400); }
/* tag colors in agentlog (warm versions) */
.tag--violet { background: rgba(251,146,60,0.16); color: var(--orange-400); }
.tag--blue { background: rgba(239,68,68,0.16); color: var(--red-400); }
.tag--cyan { background: rgba(251,191,36,0.16); color: var(--amber-400); }
.tag--pink { background: rgba(244,114,182,0.12); color: #F472B6; }
.tag--green { background: rgba(74,222,128,0.16); color: var(--green-400); }
.tag--orange { background: rgba(251,146,60,0.16); color: var(--orange-400); }
/* dotpulse → orange */
.dotpulse { background: var(--orange-400); }
/* agentlog__row--active → warm orange bg */
.agentlog__row--active {
background: rgba(251,146,60,0.06);
}
/* sidebar nav active in dashboard → orange tint */
.mock__nav a.active {
background: rgba(249,115,22,0.12);
box-shadow: inset 0 0 0 1px rgba(249,115,22,0.18);
}
/* enginepick win bar → warm grad */
.enginepick__row--win .enginepick__bar span {
background: var(--grad-brand);
box-shadow: 0 0 12px rgba(251,146,60,0.4);
}
.enginepick__row--win .enginepick__score { color: var(--orange-400); }
.enginepick__bar span {
background: linear-gradient(90deg, var(--orange-400), var(--amber-400));
}
/* wsbubble in sidebar */
.mock__wsbubble { background: var(--grad-brand); }
.mock__brand-mark { background: var(--grad-brand); }
/* chip--primary → warm grad */
.chip--primary { background: var(--grad-brand); color: white; }
/* stat deltas */
.delta--up { color: var(--amber-400); }
.delta--down { color: var(--orange-400); }
/* install hero — warm theme baked into the base, nothing to override here */
/* hero terminal float--br metric color */
.hero__terminal .float--br .float__metric span { color: var(--amber-400); }
/* .codeblock syntax palette baked into the base IDE theme above */
/* checkmarks in copylist */
.check { background: rgba(74,222,128,0.15); color: var(--green-400); }
/* terminal cards (.tcard) — warm accent line */
.tcard:hover { border-color: rgba(251,146,60,0.3); }
.tcheck { color: var(--green-400); }
.tcard__statv { background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* ascii-perf chip "running" → orange */
.ascii-perf__chip { background: rgba(249,115,22,0.12); color: var(--orange-400); border-color: rgba(249,115,22,0.25); }
.ascii-perf__chip--ok { background: rgba(74,222,128,0.12); color: var(--green-400); border-color: rgba(74,222,128,0.3); }
/* testterm: pill should be GREEN for passed (use green sparingly here as success indicator) */
.testterm .tx-pill--ok { color: var(--green-400); border-color: rgba(74,222,128,0.35); background: rgba(74,222,128,0.08); }
/* logobar label */
.logobar__label { color: var(--fg-3); }
/* pillar/axis tag pills (if visible) — warm */
.ax-tag { color: var(--fg-2); }
/* =========================================================================
v1.9 FINAL RESTRAINT PASS
Goal: orange becomes a single accent (<5% of pixels), like Factory.ai.
Everything else is neutral warm grayscale. Subtler, more sophisticated.
========================================================================= */
/* body — refined warm dark */
body {
background: var(--bg-0);
color: var(--fg-1);
font-feature-settings: 'ss01' on, 'cv11' on;
}
/* generous container padding for breathing room */
.container { padding: 0 28px; }
@media (min-width: 900px) { .container { padding: 0 56px; } }
/* nav: cleaner, neutral by default */
.nav.scrolled {
background: rgba(14, 11, 10, 0.78);
backdrop-filter: blur(24px) saturate(140%);
border-bottom: 1px solid rgba(255, 230, 210, 0.04);
}
.nav__links a { color: var(--fg-2); }
.nav__links a:hover { color: var(--fg-0); }
.brand-name {
background: none;
-webkit-background-clip: initial;
background-clip: initial;
color: var(--orange-400);
/* Pixel display font — ari-w9500-display, self-hosted from /fonts. */
font-family: 'AriW9500', 'Silkscreen', 'Inter', monospace;
font-weight: 700;
font-size: 15px;
letter-spacing: 0;
text-transform: none; /* preserve 'Auto Inference' mixed case */
white-space: nowrap; /* never wrap to a second line */
/* nudge baseline so the chunky pixel font aligns with the mark */
position: relative;
top: 1px;
}
.footer__name {
font-family: 'AriW9500', 'Silkscreen', 'Inter', monospace;
font-weight: 700;
font-size: 14px;
letter-spacing: 0;
text-transform: none; /* preserve 'Auto Inference' mixed case */
color: var(--fg-0);
}
.brand-ver { color: var(--fg-3); background: rgba(255,230,210,0.04); border-color: rgba(255,230,210,0.06); }
/* nav CTA: subtler — primary becomes warm cream button (not orange gradient) */
.btn--primary {
background: var(--fg-1);
color: #14100E;
box-shadow: 0 1px 0 rgba(255,255,255,0.1) inset, 0 4px 12px rgba(0,0,0,0.3);
}
.btn--primary::before { display: none; }
.btn--primary:hover {
background: var(--fg-0);
transform: translateY(-1px);
}
.btn--secondary {
background: transparent;
border: 1px solid rgba(255, 230, 210, 0.12);
color: var(--fg-1);
}
.btn--secondary:hover {
background: rgba(255, 230, 210, 0.04);
border-color: rgba(255, 230, 210, 0.2);
}
.btn--ghost { color: var(--fg-3); font-family: var(--font-mono); }
.btn--ghost:hover { color: var(--fg-1); }
/* hero typography — more refined, generous */
.hero { padding-top: 80px; padding-bottom: 120px; }
.hero__title {
font-weight: 600;
letter-spacing: -0.04em;
line-height: 1.1; /* was 1.02 — give descenders (g, y, p) room */
color: var(--fg-0);
margin-bottom: 44px; /* was 28px — more breathing space before sub */
padding-bottom: 0.08em; /* extra room for descenders on last line */
}
/* gradient text — used ONCE in hero only, much subtler */
.grad-text {
background: linear-gradient(135deg, #D97706 0%, #B45309 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.hero__sub {
color: var(--fg-2);
font-size: clamp(15px, 1.4vw, 18px);
line-height: 1.6;
max-width: 640px;
margin-bottom: 44px;
}
/* HIGHLIGHTER MARK — animated marker stroke + glow.
Three flavors via class:
em.hl → orange text + amber stroke + orange glow (normal emphasis)
em.hl-red → red text + red stroke + red glow (high emphasis / important)
em.hl-white → WHITE text + amber stroke + subtle amber halo
(when you want the highlight to mark text without recoloring it)
Animates in when the parent [data-reveal] gets .in class.
SOLID color stroke (no edge fade) so the highlighter reads consistent
end-to-end. Generous padding (7px) so the stroke clearly covers the
first and last letters. */
em.hl, em.hl-red, em.hl-white {
font-style: normal;
font-weight: 600;
position: relative;
padding: 0 7px;
margin: 0 -1px;
border-radius: 2px;
background-size: 0% 92%;
background-repeat: no-repeat;
background-position: 0 60%;
text-shadow: 0 0 0 transparent;
letter-spacing: 0.005em;
transition:
background-size 1.4s cubic-bezier(0.22, 1, 0.36, 1) 1.6s,
text-shadow 0.9s ease 2.5s,
color 0.6s ease 2.0s;
}
/* orange variant — solid amber band */
em.hl {
color: var(--orange-400);
background-image: linear-gradient(
90deg,
rgba(251, 191, 36, 0.46),
rgba(251, 191, 36, 0.46)
);
}
[data-reveal].in em.hl {
background-size: 100% 92%;
text-shadow:
0 0 12px rgba(217, 119, 6, 0.55),
0 0 28px rgba(217, 119, 6, 0.28),
0 0 1px rgba(251, 191, 36, 0.4);
}
/* red variant — solid red band, for "more important" emphasis */
em.hl-red {
color: #F87171;
background-image: linear-gradient(
90deg,
rgba(239, 68, 68, 0.55),
rgba(239, 68, 68, 0.55)
);
}
[data-reveal].in em.hl-red {
background-size: 100% 92%;
text-shadow:
0 0 14px rgba(239, 68, 68, 0.65),
0 0 32px rgba(239, 68, 68, 0.32),
0 0 1px rgba(248, 113, 113, 0.5);
}
/* WHITE variant — solid amber band, text stays crisp white. */
em.hl-white {
color: var(--fg-0);
background-image: linear-gradient(
90deg,
rgba(251, 191, 36, 0.48),
rgba(251, 191, 36, 0.48)
);
}
[data-reveal].in em.hl-white {
background-size: 100% 92%;
/* gentle amber halo — does NOT tint the white text */
text-shadow:
0 0 14px rgba(251, 191, 36, 0.30),
0 0 1px rgba(255, 255, 255, 0.3);
}
/* When two highlighters share a paragraph, stagger the second so they
read sequentially left-to-right rather than firing simultaneously. */
[data-reveal] em.hl ~ em.hl,
[data-reveal] em.hl ~ em.hl-red,
[data-reveal] em.hl ~ em.hl-white,
[data-reveal] em.hl-red ~ em.hl,
[data-reveal] em.hl-red ~ em.hl-red,
[data-reveal] em.hl-red ~ em.hl-white,
[data-reveal] em.hl-white ~ em.hl,
[data-reveal] em.hl-white ~ em.hl-red,
[data-reveal] em.hl-white ~ em.hl-white {
transition-delay: 3.2s, 4.1s, 3.6s;
}
/* Modifier — keep the highlighter color but force the TEXT to stay white.
Combine with .hl-red (or any variant) to get the highlight pop without
recoloring the text. Used on hero "limit of silicon" so the red marker
stands out while the words remain crisp white for readability.
Targets both the em and any .rv-w word-spans JS injects inside. */
em.hl-red.hl-keepwhite,
em.hl-red.hl-keepwhite .rv-w,
em.hl-keepwhite,
em.hl-keepwhite .rv-w {
color: var(--fg-0) !important;
}
[data-reveal].in em.hl-red.hl-keepwhite,
[data-reveal].in em.hl-keepwhite {
/* drop the red text-glow (would tint white text); keep a soft red halo */
text-shadow:
0 0 14px rgba(239, 68, 68, 0.32),
0 0 1px rgba(255, 255, 255, 0.35) !important;
}
/* badge — neutral chip, not orange */
.badge {
background: rgba(255, 230, 210, 0.03);
border: 1px solid rgba(255, 230, 210, 0.08);
color: var(--fg-2);
padding: 6px 14px;
}
.badge__chip {
background: rgba(217, 119, 6, 0.14);
color: var(--orange-400);
border: 1px solid rgba(217, 119, 6, 0.20);
font-weight: 600;
letter-spacing: 0.06em;
border-radius: 3px;
padding: 2px 6px;
}
.badge__text { color: var(--fg-3); }
/* install hero — final aesthetic now lives in the base ruleset above */
/* hero meta — neutral */
.hero__meta {
background: transparent;
border: 1px solid rgba(255, 230, 210, 0.06);
color: var(--fg-3);
}
.hero__meta strong { color: var(--fg-1); font-weight: 500; font-family: var(--font-mono); font-size: 12px; }
.dot--green { background: var(--green-400); box-shadow: 0 0 6px rgba(90, 140, 90, 0.5); }
.dot--violet { background: var(--orange-400); box-shadow: none; opacity: 0.7; }
.dot--cyan { background: var(--fg-2); box-shadow: none; opacity: 0.7; }
/* logo bar — subtler */
.logobar { padding: 80px 0 60px; border-top: 1px solid rgba(255, 230, 210, 0.05); border-bottom: 1px solid rgba(255, 230, 210, 0.05); background: transparent; }
.logobar__label {
color: var(--fg-3);
text-transform: lowercase;
letter-spacing: 0.06em;
margin-bottom: 36px;
font-size: 11.5px;
}
.logogrid__h { color: var(--fg-3); border-right: 1px solid rgba(255, 230, 210, 0.05); }
.lg-chip {
background: rgba(255, 230, 210, 0.02);
border: 1px solid rgba(255, 230, 210, 0.06);
color: var(--fg-1);
font-weight: 400;
}
.lg-chip:hover {
background: rgba(255, 230, 210, 0.05);
border-color: rgba(255, 230, 210, 0.12);
}
/* eyebrows — muted neutral, not bright orange */
.eyebrow {
color: var(--fg-3);
font-family: var(--font-mono);
font-size: 12px;
font-weight: 400;
text-transform: none;
letter-spacing: 0.02em;
}
.eyebrow::before { content: '/ '; color: var(--orange-400); opacity: 0.5; }
/* section titles — single weight, no gradient unless explicitly .grad-text */
.section__title {
font-weight: 600;
letter-spacing: -0.03em;
line-height: 1.08;
color: var(--fg-0);
}
.section__lede { color: var(--fg-2); line-height: 1.6; }
.section__lede em { color: var(--fg-1); font-weight: 500; font-style: normal; }
/* sections: generous vertical rhythm */
.section { padding: 110px 0; }
@media (max-width: 700px) { .section { padding: 70px 0; } }
/* painrow — neutral, not red */
.painrow {
background: transparent;
border: 1px solid rgba(255, 230, 210, 0.06);
border-radius: 4px;
padding: 36px 32px;
}
.painrow__num { color: var(--fg-0); font-weight: 600; font-family: var(--font-mono); letter-spacing: -0.02em; }
.painrow__l { color: var(--fg-2); }
.painrow__l .src { color: var(--fg-4); }
.painrow__div { background: linear-gradient(180deg, transparent, rgba(255,230,210,0.08), transparent); }
/* terminal cards (.tcard) — sharp, neutral, no orange glow */
.tcard {
background: transparent;
border: 1px solid rgba(255, 230, 210, 0.06);
border-radius: 4px;
}
.tcard::before { display: none; }
.tcard:hover {
border-color: rgba(255, 230, 210, 0.14);
transform: none;
background: rgba(255, 230, 210, 0.015);
}
.tcard__id { color: var(--green-400); font-weight: 600; } /* [01] [02] [03] [04] — terminal green */
.tcard__name { color: var(--orange-400); font-weight: 600; } /* engine_selection, config_tuning, etc. — orange */
.tcard__body { color: var(--fg-2); }
.tcard__list { border-top-color: rgba(255, 230, 210, 0.06); }
.tcard__row { color: var(--fg-2); }
.tcheck { color: var(--green-400); }
.tcard__stat { border-top-color: rgba(255, 230, 210, 0.06); }
.tcard__statv {
background: none;
-webkit-background-clip: initial;
background-clip: initial;
color: var(--fg-0);
font-weight: 600;
}
.tcard__statl { color: var(--fg-3); }
/* how it works steps */
.hstep {
background: transparent;
border: 1px solid rgba(255, 230, 210, 0.06);
border-radius: 4px;
padding: 24px 26px;
}
.hstep__id { color: var(--green-400); font-weight: 600; } /* [01] [02] [03] — terminal green */
.hstep__name { color: var(--orange-400); font-weight: 600; } /* pick_a_model, state_your_hardware, hit_deploy — orange */
.hstep__copy { color: var(--fg-2); }
/* .codeblock final IDE-themed aesthetic lives in the base ruleset above */
/* ASCII performance — neutral, single subtle warm accent */
/* .ascii-perf terminal-window aesthetic baked into the base ruleset above */
.ascii-perf__title { color: var(--fg-0); font-weight: 500; }
.ascii-perf__sub { color: var(--fg-3); }
.ascii-perf__chip {
background: rgba(217, 119, 6, 0.10);
color: var(--orange-400);
border: 1px solid rgba(217, 119, 6, 0.18);
}
.ascii-perf__chip--ok {
background: rgba(90, 140, 90, 0.10);
color: var(--green-400);
border-color: rgba(90, 140, 90, 0.2);
}
.ascii-perf__rows { border-top: 1px solid rgba(255,230,210,0.05); border-bottom: 1px solid rgba(255,230,210,0.05); }
.ascii-perf__l { color: var(--fg-3); }
.ascii-perf__bar {
background: rgba(255, 230, 210, 0.03);
border: 1px solid rgba(255, 230, 210, 0.05);
}
.ascii-perf__fill { color: var(--orange-400); }
.ascii-perf__fill[data-color="green"] { color: var(--green-400); }
.ascii-perf__fill[data-color="violet"] { color: var(--orange-400); }
.ascii-perf__fill[data-color="pink"] { color: var(--fg-2); }
.ascii-perf__v { color: var(--fg-0); }
.ascii-perf__t { color: var(--fg-3); }
/* testterm */
.testterm {
background: #14100E;
border: 1px solid rgba(255, 230, 210, 0.06);
box-shadow: none;
}
.testterm__chrome {
background: transparent;
border-bottom: 1px solid rgba(255, 230, 210, 0.05);
}
.testrowx__name { color: var(--fg-1); font-weight: 400; }
.testrowx__bar {
background: rgba(255, 230, 210, 0.03);
border: 1px solid rgba(255, 230, 210, 0.05);
}
.testrowx__bar span {
background-image: repeating-linear-gradient(90deg, var(--green-400) 0 6px, transparent 6px 8px);
}
.testrowx__v { color: var(--green-400); }
/* dashboard mockup — restraint pass */
.mock--dashwarm {
/* dark-black surface (overrides base .mock navy-tinted gradient) */
background: linear-gradient(180deg, #050505, #000000);
border: 1px solid rgba(255, 230, 210, 0.08);
box-shadow: 0 30px 80px -30px rgba(0,0,0,0.85);
}
.mock--dashwarm::after { display: none; }
.mock__chrome {
background: rgba(255, 230, 210, 0.015);
border-bottom: 1px solid rgba(255, 230, 210, 0.05);
}
.mock__url {
background: rgba(0,0,0,0.2);
border: 1px solid rgba(255, 230, 210, 0.04);
color: var(--fg-3);
}
.mock__side {
background: rgba(0, 0, 0, 0.12);
border-right: 1px solid rgba(255, 230, 210, 0.05);
}
.mock__brand { color: var(--fg-0); }
.mock__nav a { color: var(--fg-2); }
.mock__nav a.active {
background: rgba(217, 119, 6, 0.08);
color: var(--fg-0);
box-shadow: inset 0 0 0 1px rgba(217, 119, 6, 0.14);
}
.mock__nav a:hover { color: var(--fg-1); }
.mock__workspace {
background: rgba(255,230,210,0.02);
border: 1px solid rgba(255, 230, 210, 0.06);
}
.mock__wsname { color: var(--fg-0); }
.mock__wsplan { color: var(--fg-3); }
.mock__crumb { color: var(--fg-3); }
.mock__crumb strong { color: var(--fg-1); }
.mock__title h3 { color: var(--fg-0); font-weight: 500; }
.mock__tag { background: rgba(255, 230, 210, 0.04); color: var(--fg-3); }
.chip {
background: rgba(255, 230, 210, 0.04);
border: 1px solid rgba(255, 230, 210, 0.08);
color: var(--fg-1);
}
.chip:hover { background: rgba(255, 230, 210, 0.08); }
.chip--primary { background: var(--orange-500); color: white; border: none; }
.statcard {
background: rgba(255, 230, 210, 0.02);
border: 1px solid rgba(255, 230, 210, 0.06);
}
.statcard__label { color: var(--fg-3); }
.statcard__value { color: var(--fg-0); }
.statcard__delta { color: var(--fg-2); font-weight: 500; }
.delta--up { color: var(--orange-400); }
.delta--down { color: var(--fg-2); }
.panel {
background: rgba(255, 230, 210, 0.02);
border: 1px solid rgba(255, 230, 210, 0.06);
}
.panel__head h4 { color: var(--fg-0); font-weight: 500; }
.panel__sub { color: var(--fg-3); }
.agentlog__row { color: var(--fg-2); }
.agentlog__row strong { color: var(--fg-0); }
.agentlog__row .t { color: var(--fg-4); }
.agentlog__row--active { background: rgba(217, 119, 6, 0.05); }
/* engine ranking bars */
.enginepick__row { color: var(--fg-2); }
.enginepick__name { color: var(--fg-2); }
.enginepick__bar { background: rgba(255, 230, 210, 0.04); }
.enginepick__bar span {
background: var(--fg-3);
box-shadow: none;
}
.enginepick__row--win .enginepick__name { color: var(--fg-0); }
.enginepick__row--win .enginepick__bar span {
background: var(--orange-400);
box-shadow: none;
}
.enginepick__score { color: var(--fg-2); }
.enginepick__row--win .enginepick__score { color: var(--orange-400); }
/* tags in agent log */
.tag--violet { background: rgba(217, 119, 6, 0.12); color: var(--orange-400); }
.tag--blue { background: rgba(255, 230, 210, 0.06); color: var(--fg-2); }
.tag--cyan { background: rgba(255, 230, 210, 0.06); color: var(--fg-2); }
.tag--pink { background: rgba(255, 230, 210, 0.06); color: var(--fg-2); }
.tag--green { background: rgba(90, 140, 90, 0.12); color: var(--green-400); }
.tag--orange { background: rgba(217, 119, 6, 0.12); color: var(--orange-400); }
.dotpulse { background: var(--orange-400); }
/* spark gradients — replace orange-on-orange with subtler */
.spark { opacity: 0.5; }
/* status pills — neutral by default */
.status-pill {
background: rgba(255, 230, 210, 0.04);
color: var(--fg-2);
border: 1px solid rgba(255, 230, 210, 0.08);
}
.status-pill--live {
background: rgba(217, 119, 6, 0.10);
color: var(--orange-400);
border-color: rgba(217, 119, 6, 0.18);
}
.status-pill--live .ping { background: var(--orange-400); box-shadow: 0 0 0 2px rgba(217, 119, 6, 0.18); }
.status-pill--ok {
background: rgba(90, 140, 90, 0.10);
color: var(--green-400);
border-color: rgba(90, 140, 90, 0.22);
}
/* floats around mockups — subtler */
.float {
background: rgba(20, 16, 14, 0.92);
border: 1px solid rgba(255, 230, 210, 0.10);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}
/* .float__icon final aesthetic (red live blinker) lives in the base ruleset above */
.float__t { color: var(--fg-0); font-weight: 500; }
.float__s { color: var(--fg-3); }
.float__metric { color: var(--fg-0); font-weight: 600; }
.float__metric span { color: var(--orange-400); }
.float__l { color: var(--fg-3); }
/* CTA card — neutral with single accent */
.cta__card {
background: rgba(255, 230, 210, 0.02);
border: 1px solid rgba(255, 230, 210, 0.08);
border-radius: 6px;
}
.cta__card::before { display: none; }
.cta__badge {
background: rgba(255, 230, 210, 0.04);
border: 1px solid rgba(255, 230, 210, 0.08);
color: var(--fg-3);
font-family: var(--font-mono);
}
.cta__title { color: var(--fg-0); font-weight: 600; letter-spacing: -0.03em; }
.cta__sub { color: var(--fg-2); }
.cta__email {
background: rgba(0, 0, 0, 0.25);
border: 1px solid rgba(255, 230, 210, 0.10);
color: var(--fg-0);
}
.cta__email:focus {
border-color: var(--orange-400);
box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.12);
}
.cta__email::placeholder { color: var(--fg-3); }
.cta__fine { color: var(--fg-3); }
.cta__row { border-top: 1px solid rgba(255, 230, 210, 0.05); }
.ghostlink { color: var(--fg-3); }
.ghostlink:hover { color: var(--fg-1); }
/* install grid */
.installcard {
background: transparent;
border: 1px solid rgba(255, 230, 210, 0.06);
border-radius: 4px;
}
.installcard:hover {
background: rgba(255, 230, 210, 0.02);
border-color: rgba(255, 230, 210, 0.12);
}
.installcard__l { color: var(--fg-3); }
.installcard code { color: var(--fg-1); }
/* footer */
.footer { border-top: 1px solid rgba(255, 230, 210, 0.05); background: transparent; }
.footer__name { color: var(--fg-0); font-weight: 500; }
.footer__line { color: var(--fg-3); }
.footer__line--meta { color: var(--fg-4); }
.footer__h { color: var(--fg-3); font-weight: 500; letter-spacing: 0; text-transform: none; }
.footer__col a { color: var(--fg-2); font-weight: 400; }
.footer__col a:hover { color: var(--fg-0); }
.footer__chip {
background: rgba(255, 230, 210, 0.03);
border: 1px solid rgba(255, 230, 210, 0.06);
color: var(--fg-3);
}
/* agent widget — final tone-down */
.agentw__name { font-weight: 500; }
.agentw__chromeR { color: var(--fg-3); }
.agentw__spin { color: var(--orange-400); }
.agentw__status { color: var(--fg-3); }
.agentw__cmd { color: var(--fg-0); font-weight: 400; }
.agentw__toolN { font-weight: 500; }
.agentw__took { color: var(--fg-4); font-size: 11px; }
.agentw__toolT { color: var(--fg-2); }
.agentw__up { color: var(--orange-400); font-weight: 500; }
.agentw__ok { color: var(--green-400); font-weight: 500; }
.agentw__msgBody p { color: var(--fg-1); }
.agentw__link { color: var(--orange-400); border-bottom: 1px dashed rgba(217, 119, 6, 0.25); }
.agentw__think { color: var(--orange-400); font-size: 13px; text-shadow: none; }
.agentw__thinkT { color: var(--fg-3); font-style: normal; }
.agentw__bullet { text-shadow: none; }
/* remove the over-bright lg-glyph backgrounds — make them subtler warm */
.lg-glyph--vllm { background: #C2410C; }
.lg-glyph--sglang { background: rgba(255, 230, 210, 0.12); color: var(--fg-1); }
.lg-glyph--fi { background: rgba(255, 230, 210, 0.12); color: var(--fg-1); }
.lg-glyph--lmd { background: rgba(255, 230, 210, 0.12); color: var(--fg-1); }
.lg-glyph--tgi { background: rgba(255, 230, 210, 0.12); color: var(--fg-1); }
.lg-glyph--cuda { background: #76B900; color: white; }
.lg-glyph--triton { background: rgba(255, 230, 210, 0.12); color: var(--fg-1); }
.lg-glyph--ncc { background: rgba(255, 230, 210, 0.12); color: var(--fg-1); }
.lg-glyph--uv { background: rgba(255, 230, 210, 0.12); color: var(--fg-1); }
/* hero terminal floats — refined */
.hero__terminal .float--tl { top: -16px; left: -16px; }
.hero__terminal .float--br { bottom: -20px; right: -16px; }
/* selection — restrained warm */
::selection { background: rgba(217, 119, 6, 0.25); color: var(--fg-0); }
/* button arrows */
.btn__arrow { color: inherit; }
/* responsive hero terminal */
@media (max-width: 700px) {
.agentw__body { padding: 18px 16px; }
.agentw__tool { margin-bottom: 10px; }
.agentw__toolH { font-size: 12.5px; }
.agentw__toolT { font-size: 11.5px; }
}
/* =========================================================================
PREMIUM WORD REVEAL — each word fades + lifts + unblurs, staggered.
The 1.2s per-word transition with 100ms stagger means multiple words
are mid-fade at once, producing a smooth wash rather than a typewriter.
========================================================================= */
.rv-w {
display: inline-block;
opacity: 0;
transform: translateY(12px);
filter: blur(8px);
will-change: opacity, transform, filter;
transition:
opacity 1.2s cubic-bezier(0.22, 1, 0.36, 1),
transform 1.2s cubic-bezier(0.22, 1, 0.36, 1),
filter 1.2s cubic-bezier(0.22, 1, 0.36, 1);
/* sequential reveal: seq-delay = time prior sibling [data-scramble] elements take.
For a first/only element, seq-delay is 0ms (fallback). */
transition-delay: calc(var(--seq-delay, 0ms) + var(--wi, 0) * 110ms + 150ms);
}
.rv-in .rv-w {
opacity: 1;
transform: translateY(0);
filter: blur(0);
}
/* let the parent's gradient flow into per-word spans */
.grad-text .rv-w {
background: inherit;
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
/* prevent layout shifts: reserve space even when blurred */
[data-scramble] { display: inline-block; }
/* Blinking orange cursor — auto-injected at the end of every title
(hero H1, section H2s, CTA H2) once its [data-scramble] children finish.
Same orange as the rest of the accents (--orange-400).
Sized in em so it scales naturally with the heading's font-size. */
.line-cursor {
display: inline-block;
width: 0.32em;
height: 0.85em;
background: var(--orange-400);
margin-left: 0.14em;
vertical-align: -0.06em;
opacity: 0;
border-radius: 1px;
box-shadow: 0 0 10px rgba(217, 119, 6, 0.4);
transition: opacity 0.6s ease;
}
.line-cursor.in {
opacity: 1;
animation: line-cursor-blink 1.05s steps(1, end) infinite;
}
@keyframes line-cursor-blink {
0%, 50% { opacity: 1; }
50.01%, 100% { opacity: 0; }
}
/* =========================================================================
v2.0 — ASCII rain background + install grid fix + more floats
========================================================================= */
/* ASCII terminal rain — atmospheric background animation */
.bg-rain {
position: fixed; inset: 0; z-index: 0;
pointer-events: none;
overflow: hidden;
mask-image: linear-gradient(180deg, transparent 0%, black 12%, black 88%, transparent 100%);
-webkit-mask-image: linear-gradient(180deg, transparent 0%, black 12%, black 88%, transparent 100%);
}
.bg-rain__col {
position: absolute;
top: 0;
margin: 0;
padding: 0;
font-family: var(--font-mono);
font-size: 11px;
line-height: 1.65;
color: var(--orange-400);
opacity: 0.22;
text-shadow: 0 0 6px rgba(249, 115, 22, 0.4);
white-space: pre;
user-select: none;
will-change: transform;
}
.bg-rain__col--l {
left: 24px;
text-align: left;
animation: rain-up 95s linear infinite;
}
.bg-rain__col--r {
right: 24px;
text-align: right;
animation: rain-up 130s linear infinite;
animation-delay: -30s;
}
@keyframes rain-up {
0% { transform: translateY(0); }
100% { transform: translateY(-50%); }
}
@media (max-width: 900px) {
.bg-rain__col--r { display: none; }
.bg-rain__col--l { font-size: 10px; opacity: 0.16; left: 12px; }
}
/* INSTALL GRID — wider container + 3-up grid + full command visibility.
Per user feedback: code text was truncating; widen container so every
command fits in one line without ellipsis. */
.section--install .container { max-width: 1440px; }
.installgrid {
margin: 30px auto 0;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;
align-items: stretch;
}
@media (max-width: 1000px) {
.installgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
.installgrid { grid-template-columns: minmax(0, 1fr); }
}
.installcard {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
padding: 16px 18px;
background: transparent;
border: 1px solid rgba(255, 230, 210, 0.06);
border-radius: 4px;
min-width: 0;
overflow: hidden;
}
.installcard:hover {
background: rgba(255, 230, 210, 0.02);
border-color: rgba(255, 230, 210, 0.12);
}
.installcard > img,
.installcard > .lg-glyph {
flex-shrink: 0;
}
.installcard__l {
font-size: 11px; color: var(--fg-3); font-weight: 600;
text-transform: uppercase; letter-spacing: 0.08em;
font-family: var(--font-mono);
}
/* command box — flex row with code + copy button side-by-side */
.installcard__cmd {
flex-basis: 100%;
display: flex;
align-items: center;
gap: 8px;
background: rgba(0, 0, 0, 0.4);
padding: 6px 6px 6px 10px;
border-radius: 5px;
border: 1px solid rgba(255, 230, 210, 0.05);
min-width: 0;
}
.installcard__cmd code {
flex: 1;
min-width: 0;
display: block;
background: transparent;
border: none;
padding: 0;
font-family: var(--font-mono);
font-size: 12.5px;
color: var(--fg-1);
white-space: nowrap;
overflow-x: auto;
scrollbar-width: none;
}
.installcard__cmd code::-webkit-scrollbar { display: none; }
.installcard__cmd code::before {
content: '$ ';
color: #00C244;
font-weight: 700;
margin-right: 4px;
text-shadow: 0 0 6px rgba(0, 194, 68, 0.35);
}
.installcard__cmd .copybtn {
width: 24px;
height: 24px;
}
/* tighten the outer card now that cmd box is compact */
.installcard {
padding: 12px 16px;
gap: 10px;
}
/* dashboard mockup — floats stay INSIDE viewport bounds */
.dashwrap {
margin-top: 32px;
position: relative;
overflow: visible;
}
.float--dashwarm-tl { top: -12px; left: -12px; }
.float--dashwarm-br { bottom: -12px; right: -8px; }
@media (max-width: 900px) {
.float--dashwarm-tl { top: 8px; left: 8px; transform: scale(0.85); transform-origin: top left; }
.float--dashwarm-br { display: none; }
}
@media (max-width: 700px) {
.float--dashwarm-tl { display: none; }
}
/* extra floats: kernel / spec decode / CUDA wins around hero + dashboard */
.float--kernel {
display: flex; align-items: center; gap: 10px;
padding: 10px 14px;
background: rgba(20, 16, 14, 0.92);
border: 1px solid rgba(255, 230, 210, 0.10);
border-radius: 8px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
font-family: var(--font-mono);
font-size: 11.5px;
}
/* .float--kernel .float__icon now inherits the red live blinker */
.float--kernel .float__t { color: var(--fg-0); font-weight: 500; font-size: 12px; }
.float--kernel .float__s { color: var(--fg-3); font-size: 11px; }
/* hero terminal — add positions for new floats */
.float--mid-r {
position: absolute;
top: 40%; right: -16px;
transform: translateY(-50%);
display: flex; align-items: center; gap: 10px;
padding: 10px 14px;
background: rgba(20, 16, 14, 0.92);
border: 1px solid rgba(255, 230, 210, 0.10);
border-radius: 8px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
font-family: var(--font-mono);
font-size: 11.5px;
animation: float-card 6s ease-in-out infinite;
animation-delay: -1.5s;
}
.float--mid-l {
position: absolute;
top: 65%; left: -16px;
display: flex; align-items: center; gap: 10px;
padding: 10px 14px;
background: rgba(20, 16, 14, 0.92);
border: 1px solid rgba(255, 230, 210, 0.10);
border-radius: 8px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
font-family: var(--font-mono);
font-size: 11.5px;
animation: float-card 6s ease-in-out infinite;
animation-delay: -3.5s;
}
@media (max-width: 1100px) {
.float--mid-r, .float--mid-l { display: none; }
}
/* dashboard extra floats */
.float--dashwarm-tr {
position: absolute;
top: 50%; right: -12px;
transform: translateY(-50%);
display: flex; align-items: center; gap: 10px;
padding: 10px 14px;
background: rgba(20, 16, 14, 0.94);
border: 1px solid rgba(255, 230, 210, 0.10);
border-radius: 8px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
font-family: var(--font-mono);
font-size: 11.5px;
}
.float--dashwarm-bl {
position: absolute;
bottom: 28%; left: -12px;
display: flex; align-items: center; gap: 10px;
padding: 10px 14px;
background: rgba(20, 16, 14, 0.94);
border: 1px solid rgba(255, 230, 210, 0.10);
border-radius: 8px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
font-family: var(--font-mono);
font-size: 11.5px;
}
@media (max-width: 1100px) {
.float--dashwarm-tr, .float--dashwarm-bl { display: none; }
}
.float__tag {
font-size: 9.5px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--orange-400);
font-family: var(--font-mono);
}
/* =========================================================================
v2.1 — agent widget DENSIFIED
Tighter spacing per tool call so we can fit ~17 tool calls + summary
message + thinking line in the widget without empty space.
========================================================================= */
.agentw__body {
padding: 22px 24px 20px;
font-size: 12.5px;
line-height: 1.6;
min-height: auto; /* let content drive height */
}
@media (max-width: 700px) {
.agentw__body { padding: 16px 14px; font-size: 11px; }
}
/* tighter tool spacing for density */
.agentw__tool { margin-bottom: 8px; }
.agentw__tool--summary {
margin-bottom: 14px;
padding-bottom: 8px;
border-bottom: 1px dashed rgba(255, 230, 210, 0.05);
}
.agentw__tool--summary .agentw__toolN { color: var(--fg-0); font-weight: 600; }
.agentw__toolH {
font-size: 12.5px;
display: flex; align-items: baseline; gap: 8px;
flex-wrap: wrap;
}
.agentw__toolN { color: var(--fg-1); font-weight: 500; }
.agentw__paren {
color: var(--fg-3);
font-size: 12px;
font-weight: 400;
}
.agentw__took {
color: var(--fg-4);
font-size: 10.5px;
margin-left: auto;
flex-shrink: 0;
}
.agentw__toolR {
display: flex; gap: 8px;
padding-left: 16px;
margin-top: 1px;
}
.agentw__indent { color: var(--fg-4); font-size: 12.5px; flex-shrink: 0; line-height: 1.5; }
.agentw__toolT { color: var(--fg-2); font-size: 12px; line-height: 1.5; }
.agentw__hi { color: var(--fg-0); font-weight: 500; }
.agentw__dim { color: var(--fg-3); font-size: 11.5px; }
/* input box: tighter */
.agentw__input { padding: 12px 16px; margin-bottom: 18px; }
/* agent message: a touch tighter line-height */
.agentw__msg { margin: 18px 0 14px; }
.agentw__msgBody p {
margin: 0 0 4px;
font-size: 12.5px;
line-height: 1.6;
color: var(--fg-1);
}
.agentw__msgBody p:last-child { margin-bottom: 0; margin-top: 8px; }
.agentw__msgBody .agentw__hi { color: var(--orange-400); }
/* thinking — tighter */
.agentw__thinking { margin-top: 14px; padding-top: 12px; font-size: 12px; }
/* bullet: tiny, refined */
.agentw__bullet { font-size: 9px; line-height: 1.5; }
/* =========================================================================
PRELOADER — full-screen boot sequence
Multiple ASCII rain columns (faster than the home-page rain) +
blinking 8-bit pixel logo + terminal-green loading bar.
========================================================================= */
body.preloading { overflow: hidden; }
.preloader {
position: fixed;
inset: 0;
z-index: 9999;
background:
radial-gradient(ellipse 70% 50% at 50% 30%,
rgba(217, 119, 6, 0.07) 0%,
rgba(194, 65, 12, 0.025) 50%,
transparent 80%),
#06060B;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
transition: opacity 0.8s ease, visibility 0s ease 0.8s;
}
.preloader.hidden {
opacity: 0;
visibility: hidden;
pointer-events: none;
}
/* rain — many columns, slightly faster than the home-page rain (~28-58s vs 95-130s) */
.preloader__rain {
position: absolute;
inset: 0;
overflow: hidden;
pointer-events: none;
}
.preloader__col {
position: absolute;
top: 0;
margin: 0;
padding: 0;
max-width: 115px; /* narrow body — leaves small gap to next column at 10-11 cols across */
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 10.5px;
line-height: 1.9;
color: var(--orange-400);
opacity: 0.22;
text-shadow: 0 0 6px rgba(249, 115, 22, 0.4);
white-space: pre;
user-select: none;
will-change: transform;
overflow: hidden;
}
@keyframes preRainScroll {
0% { transform: translateY(0); }
100% { transform: translateY(-50%); }
}
/* center — logo + bar + status */
.preloader__center {
position: relative;
z-index: 2;
text-align: center;
padding: 24px;
}
/* 8-bit pixel logo, blinking with orange glow */
.preloader__logo {
font-family: 'AriW9500', 'Silkscreen', 'JetBrains Mono', monospace;
font-size: clamp(40px, 6vw, 68px);
font-weight: 700;
color: var(--orange-400);
text-shadow:
0 0 14px rgba(249, 115, 22, 0.6),
0 0 32px rgba(249, 115, 22, 0.32),
0 0 1px rgba(251, 191, 36, 0.5);
letter-spacing: 0;
text-transform: none; /* preserve 'Auto Inference' mixed case */
margin-bottom: 36px;
animation: preLogoBlink 1.2s steps(1, end) infinite;
}
@keyframes preLogoBlink {
0%, 72% { opacity: 1; }
72.01%, 100% { opacity: 0.28; }
}
/* terminal-green loading bar — plain, solid, no stripes, no glow */
.preloader__bar {
width: clamp(280px, 36vw, 440px);
height: 14px;
background: rgba(255, 255, 255, 0.06);
border-radius: 1px;
/* no overflow:hidden — lets the glow bleed onto the screen */
margin: 0 auto;
position: relative;
}
.preloader__bar-fill {
height: 100%;
width: 0%;
border-radius: 1px;
background: #008A2E; /* deep terminal green — phosphor dark */
/* layered glow: tight core → medium halo → wide screen bleed */
box-shadow:
0 0 6px rgba(0, 138, 46, 1),
0 0 18px rgba(0, 138, 46, 0.85),
0 0 40px rgba(0, 138, 46, 0.55),
0 0 80px rgba(0, 138, 46, 0.32),
0 0 140px rgba(0, 138, 46, 0.16);
animation: preLoadFill 2.4s cubic-bezier(0.42, 0, 0.4, 1) forwards;
}
@keyframes preLoadFill {
0% { width: 0%; }
60% { width: 78%; } /* deliberate slow-down near the end */
100% { width: 100%; }
}
.preloader__status {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 11px;
color: var(--fg-3);
margin-top: 16px;
letter-spacing: 0.05em;
text-transform: lowercase;
min-height: 1.3em;
}
/* ==========================================================================
MCP INTEGRATION SECTION
========================================================================== */
.section--mcp { padding: 110px 0; }
.mcp-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 14px;
margin-top: 44px;
}
@media (max-width: 920px) { .mcp-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .mcp-grid { grid-template-columns: 1fr; } }
.mcp-tile {
display: flex;
flex-direction: column;
gap: 10px;
padding: 20px 18px;
background: linear-gradient(180deg, #050505, #000000);
border: 1px solid rgba(255, 230, 210, 0.08);
border-radius: 14px;
transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.mcp-tile:hover {
border-color: rgba(217, 119, 6, 0.40);
transform: translateY(-2px);
box-shadow: 0 12px 32px -16px rgba(217, 119, 6, 0.22);
}
.mcp-tile__head {
display: flex; align-items: center; gap: 12px;
margin-bottom: 2px;
}
/* All four logos fill their cell at the same size (matches Codex's edge-to-edge look) */
.mcp-tile__logo {
width: 38px; height: 38px;
display: inline-flex; align-items: center; justify-content: center;
background: transparent;
border: none;
border-radius: 9px;
flex-shrink: 0;
overflow: hidden;
}
.mcp-tile__logo img {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
opacity: 1;
}
.mcp-tile__glyph {
font-family: var(--font-mono);
font-size: 16px;
font-weight: 700;
color: var(--fg-1);
line-height: 1;
}
.mcp-tile__name {
font-size: 14px;
font-weight: 600;
color: var(--fg-0);
letter-spacing: -0.005em;
}
.mcp-tile__desc {
font-size: 11.5px;
color: var(--fg-3);
font-family: var(--font-mono);
line-height: 1.5;
}
/* Per-tile install command — flex row with the cmd text + a copy-icon button */
.mcp-tile__cmd {
margin-top: auto;
padding: 9px 9px 9px 12px;
background: rgba(0, 0, 0, 0.45);
border: 1px solid rgba(255, 230, 210, 0.06);
border-radius: 8px;
display: flex;
align-items: center;
gap: 10px;
transition: border-color 0.15s ease, background 0.15s ease;
}
.mcp-tile__cmd:hover {
border-color: rgba(217, 119, 6, 0.25);
}
.mcp-tile__cmdT {
flex: 1;
font-family: var(--font-mono);
font-size: 11.5px;
color: var(--fg-0);
line-height: 1.5;
white-space: normal;
word-break: break-word;
min-width: 0;
}
.mcp-tile__prompt {
color: #00C244; /* terminal green $ — matches universal install card */
font-weight: 700;
margin-right: 8px;
text-shadow: 0 0 6px rgba(0, 194, 68, 0.35);
}
/* terminal-style MCP demo widget */
.mcp-demo {
margin-top: 36px;
background: #000000 !important;
border: 1px solid rgba(255, 230, 210, 0.08);
border-radius: 12px;
overflow: hidden;
box-shadow: 0 30px 80px -30px rgba(0,0,0,0.85);
}
.mcp-demo__chrome {
display: flex; align-items: center; gap: 8px;
padding: 11px 16px;
background: rgba(255, 230, 210, 0.02);
border-bottom: 1px solid rgba(255, 230, 210, 0.05);
}
.mcp-demo__t {
margin-left: 10px;
font-family: var(--font-mono);
font-size: 11px;
color: var(--fg-3);
letter-spacing: 0.01em;
}
.mcp-demo__body {
padding: 22px 24px;
font-family: var(--font-mono);
font-size: 12.5px;
color: var(--fg-2);
line-height: 1.75;
display: flex; flex-direction: column; gap: 6px;
}
.mcp-demo__user {
color: var(--fg-0);
margin-bottom: 6px;
}
.mcp-demo__prompt {
color: var(--orange-400);
margin-right: 8px;
font-weight: 700;
}
.mcp-demo__call {
display: flex; align-items: baseline; gap: 8px;
flex-wrap: wrap;
margin-top: 6px;
}
.mcp-demo__bullet { color: var(--orange-400); font-size: 13px; line-height: 1; }
.mcp-demo__tool {
color: var(--fg-0);
font-weight: 600;
}
.mcp-demo__args { color: var(--fg-3); font-size: 11.5px; }
.mcp-demo__took { color: var(--fg-4); font-size: 11px; }
.mcp-demo__result {
display: flex; align-items: baseline; gap: 8px;
color: var(--fg-2);
padding-left: 18px;
}
.mcp-demo__indent { color: var(--fg-4); font-size: 12px; line-height: 1.4; flex-shrink: 0; }
.mcp-demo__up { color: #00C244; font-weight: 600; }
.mcp-demo__link { color: var(--orange-400); text-decoration: underline; text-decoration-color: rgba(217, 119, 6, 0.35); text-underline-offset: 3px; word-break: break-all; }
.mcp-demo__agent {
display: grid;
grid-template-columns: 3px 1fr;
gap: 12px;
margin-top: 14px;
padding-top: 4px;
}
.mcp-demo__agentBar {
background: var(--orange-400);
border-radius: 2px;
opacity: 0.55;
}
.mcp-demo__agentBody {
color: var(--fg-1);
font-family: var(--font-sans);
font-size: 13.5px;
line-height: 1.6;
padding: 2px 0;
}
.mcp-tile__brc { color: var(--orange-400); font-weight: 700; }
/* universal npx install block — sits above the per-editor grid */
.mcp-npx {
margin-top: 40px;
background: linear-gradient(180deg, #050505, #000000);
border: 1px solid rgba(217, 119, 6, 0.22);
border-radius: 14px;
padding: 18px 20px 16px;
box-shadow: 0 0 0 1px rgba(217, 119, 6, 0.06) inset,
0 20px 50px -20px rgba(217, 119, 6, 0.18);
}
.mcp-npx__head {
display: flex; align-items: center; justify-content: space-between; gap: 12px;
margin-bottom: 14px;
flex-wrap: wrap;
}
.mcp-npx__tag {
font-family: var(--font-mono);
font-size: 11px;
color: var(--orange-400);
letter-spacing: 0.02em;
font-weight: 600;
}
.mcp-npx__pkg {
font-family: var(--font-mono);
font-size: 11.5px;
color: var(--orange-400);
font-weight: 600;
}
.mcp-npx__variants {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
}
@media (max-width: 760px) { .mcp-npx__variants { grid-template-columns: 1fr; } }
.mcp-npx__variant {
display: flex; flex-direction: column; gap: 8px;
min-width: 0;
}
.mcp-npx__variantHead {
display: flex; align-items: baseline; justify-content: space-between;
gap: 10px;
flex-wrap: wrap;
}
.mcp-npx__variantLabel {
font-family: var(--font-mono);
font-size: 10.5px;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--fg-3);
font-weight: 600;
}
.mcp-npx__variantPkg {
font-family: var(--font-mono);
font-size: 11px;
color: var(--orange-400);
font-weight: 600;
}
.mcp-npx__row {
display: flex; align-items: stretch; gap: 8px;
}
.mcp-npx__cmd {
flex: 1;
margin: 0;
font-family: var(--font-mono);
font-size: 13px;
color: var(--fg-0);
background: rgba(0, 0, 0, 0.5);
padding: 13px 14px;
border-radius: 9px;
border: 1px solid rgba(255, 230, 210, 0.06);
line-height: 1.4;
overflow-x: auto;
white-space: nowrap;
min-width: 0;
}
.mcp-npx__prompt {
color: #00C244; /* terminal green $ — matches the loading bar / classic CRT phosphor */
font-weight: 700;
margin-right: 10px;
text-shadow: 0 0 6px rgba(0, 194, 68, 0.35);
}
.mcp-npx__copy {
background: rgba(255, 230, 210, 0.04);
border: 1px solid rgba(255, 230, 210, 0.08);
color: var(--fg-2);
font-family: var(--font-mono);
font-size: 11.5px;
padding: 0 14px;
border-radius: 9px;
cursor: pointer;
transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.mcp-npx__copy:hover {
color: var(--fg-0);
border-color: rgba(217, 119, 6, 0.35);
background: rgba(217, 119, 6, 0.08);
}
.mcp-npx__foot {
margin-top: 12px;
font-family: var(--font-mono);
font-size: 11.5px;
color: var(--fg-3);
line-height: 1.6;
}
.mcp-npx__foot code {
color: var(--fg-1);
background: rgba(255, 230, 210, 0.05);
padding: 1px 6px;
border-radius: 4px;
font-size: 11px;
}
/* registry chips */
.mcp-registries {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 10px;
margin-top: 36px;
justify-content: center;
}
.mcp-registries__l {
font-family: var(--font-mono);
font-size: 11px;
color: var(--fg-3);
margin-right: 4px;
}
/* ==========================================================================
REUSABLE COPY-ICON BUTTON (mcp tiles, install grid, anywhere with [data-copy])
========================================================================== */
.copybtn {
display: inline-flex; align-items: center; justify-content: center;
width: 28px; height: 28px;
padding: 0;
background: rgba(255, 230, 210, 0.04);
border: 1px solid rgba(255, 230, 210, 0.08);
border-radius: 6px;
color: var(--fg-3);
cursor: pointer;
flex-shrink: 0;
transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease, transform 0.1s ease;
}
.copybtn:hover {
color: var(--orange-400);
border-color: rgba(217, 119, 6, 0.40);
background: rgba(217, 119, 6, 0.08);
}
.copybtn:active { transform: translateY(1px); }
.copybtn.copied {
color: #00C244;
border-color: rgba(0, 194, 68, 0.50);
background: rgba(0, 194, 68, 0.10);
}
.copybtn svg { display: block; }
/* .installcard copy-button layout now lives inside .installcard__cmd above */
/* validation/test terminal — match the pure-black gradient of other terminal widgets */
.testterm,
.termx {
background: linear-gradient(180deg, #050505, #000000) !important;
border: 1px solid rgba(255, 230, 210, 0.08) !important;
border-radius: 12px;
box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.85) !important;
overflow: hidden;
}
.testterm__chrome,
.termx__chrome {
background: rgba(255, 230, 210, 0.02) !important;
border-bottom: 1px solid rgba(255, 230, 210, 0.05) !important;
}
.termx::after { display: none; }
/* ============================================================================
MOBILE-FIRST RESPONSIVE PASS
Consolidated phone/tablet refinements. Existing breakpoints in this file
handle most desktop→tablet transitions; this block fills the gaps for
phone widths (≤640px and ≤420px) — section spacing, typography scale,
widget paddings, touch targets, and overflow-prone elements.
============================================================================ */
@media (max-width: 640px) {
/* ---- Layout containers ---------------------------------------------- */
.container { padding-left: 18px; padding-right: 18px; }
.section,
.section--tight,
.section--how,
.section--perf,
.section--webapp,
.section--mcp,
.section--validation,
.section--install { padding-top: 64px; padding-bottom: 64px; }
/* ---- Typography scale ----------------------------------------------- */
.hero__title { font-size: clamp(32px, 9vw, 44px); line-height: 1.08; }
.section__title { font-size: clamp(22px, 6vw, 30px); line-height: 1.15; }
.hero__sub { font-size: 15px; line-height: 1.55; }
/* ---- Hero CTA + meta ------------------------------------------------ */
.hero__cta { flex-direction: column; gap: 10px; align-items: stretch; }
.hero__cta .btn { width: 100%; justify-content: center; padding: 14px 18px; }
.hero__meta {
display: flex; flex-wrap: wrap; gap: 8px 18px;
padding: 10px 16px;
font-size: 12px;
}
/* ---- Nav (mobile bar a little tighter) ----------------------------- */
.nav__inner { padding-top: 10px; padding-bottom: 10px; }
.brand-name { font-size: 13px !important; }
.brand-ver { font-size: 10px !important; padding: 1px 7px !important; }
.nav__cta .btn--ghost { display: none; } /* only the primary CTA stays */
/* ---- Hero install card --------------------------------------------- */
.install-hero { max-width: 100%; }
.install-hero__chrome { padding: 10px 14px; }
.install-hero__chromeT { font-size: 10.5px; margin-left: 8px; }
.install-hero__body { padding: 16px 16px; gap: 10px; }
.install-cmd { font-size: 13px; }
.install-prompt { font-size: 14px; }
.install-tab { padding: 10px 14px; font-size: 11.5px; }
.install-copy { padding: 6px 10px; font-size: 10.5px; }
/* ---- Hero agent widget --------------------------------------------- */
.agentw { border-radius: 12px; }
.agentw__chrome { padding: 10px 14px; gap: 6px; }
.agentw__chrome .agentw__star { font-size: 13px; }
.agentw__name { font-size: 12px; }
.agentw__ver { font-size: 10px; padding: 1px 6px; }
.agentw__chromeR { font-size: 10.5px; gap: 6px; }
.agentw__body { padding: 16px 14px !important; font-size: 11.5px !important; min-height: auto !important; line-height: 1.6; }
.agentw__cmd { font-size: 12px; }
/* ---- Hide hero float widgets on mobile (they overlap the agent body) */
.hero__terminal .float--tl,
.hero__terminal .float--br,
.float--mid-r,
.float--mid-l { display: none; }
/* ---- Pillars: stack 1 col on phone -------------------------------- */
.pillars { grid-template-columns: 1fr !important; gap: 14px; }
.pillar { padding: 22px 20px; }
/* ---- How-it-works code blocks (already stacks at 1000px) ---------- */
.hstep { padding: 20px 18px; }
.hstep__copy { font-size: 13px; min-height: 0 !important; /* drop the 3-line reserve on mobile */ }
.hstep .codeblock pre { font-size: 12px; padding: 14px 16px !important; }
.codeblock__head { padding: 10px 14px; }
/* ---- Performance ASCII bar widget --------------------------------- */
.ascii-perf { max-width: 100%; } /* fill the mobile viewport */
.ascii-perf__chrome { padding: 10px 18px; }
.ascii-perf__head { padding: 18px 18px 0 18px; margin-bottom: 12px; }
.ascii-perf__rows { padding-left: 18px; padding-right: 18px; }
.ascii-perf__foot { padding: 0 18px 18px 18px; }
.ascii-perf__title { font-size: 12px; }
.ascii-perf__sub { font-size: 10.5px; }
/* ---- Dashboard mockup: flatten 3D tilt + hide floating callouts --- */
.mock--dashwarm,
.dashwrap { transform: none !important; }
.float--dashwarm-tl,
.float--dashwarm-tr,
.float--dashwarm-br,
.float--dashwarm-bl { display: none; }
.mock__topbar-actions { gap: 6px; }
.mock__topbar-actions .chip { padding: 6px 10px; font-size: 11px; }
.statcard { padding: 10px 12px; }
.statcard__value { font-size: 18px; }
/* ---- MCP section --------------------------------------------------- */
.mcp-npx { padding: 14px 14px; }
.mcp-npx__head { margin-bottom: 12px; }
.mcp-npx__tag { font-size: 10.5px; }
.mcp-npx__variantLabel { font-size: 10px; }
.mcp-npx__variantPkg { font-size: 10.5px; }
.mcp-npx__cmd { font-size: 12px; padding: 11px 12px; }
.mcp-tile { padding: 16px 14px; gap: 8px; }
.mcp-tile__cmd { padding: 8px 8px 8px 10px; }
.mcp-tile__cmdT { font-size: 11px; }
.mcp-demo__body { padding: 16px 14px !important; font-size: 11.5px !important; line-height: 1.65; }
.mcp-demo__chrome { padding: 10px 14px; }
.mcp-demo__t { font-size: 10.5px; margin-left: 6px; }
.mcp-demo__call,
.mcp-demo__result { font-size: 11px; }
.mcp-demo__args { font-size: 10.5px; }
.mcp-demo__agentBody { font-size: 12.5px !important; line-height: 1.5; }
.mcp-registries { gap: 6px; justify-content: flex-start; }
.mcp-registries .lg-chip { font-size: 11px; padding: 5px 10px; }
/* ---- Logo bar (engines / hardware / runtimes) --------------------- */
.logobar { padding: 40px 0 30px; }
.logogrid__row { gap: 6px; }
.lg-chip { font-size: 11px; padding: 5px 10px; gap: 6px; }
/* ---- Install grid: ensure single column + compact ----------------- */
.installgrid { grid-template-columns: minmax(0, 1fr) !important; gap: 8px; }
.installcard { padding: 12px 14px; }
.installcard__l { min-width: 0; flex: 0 0 auto; }
.installcard__cmd { padding: 6px 6px 6px 10px; }
.installcard__cmd code { font-size: 11.5px; }
/* ---- Validation testterm + tcards --------------------------------- */
.testterm__body { padding: 18px 18px !important; }
.tx-rule { font-size: 10px; }
.tcards { grid-template-columns: 1fr !important; gap: 12px; }
.tcard { padding: 18px 16px; }
/* ---- Waitlist CTA card -------------------------------------------- */
.cta { padding: 70px 0; }
.cta__card { padding: 36px 22px !important; }
.cta__title { font-size: 28px !important; line-height: 1.15; }
.cta__form { flex-direction: column; gap: 10px; }
.cta__form .btn,
.cta__form input[type="email"] { width: 100%; }
/* ---- Code blocks (everywhere): readable on phone ------------------ */
.codeblock pre { font-size: 12px; padding: 14px 16px; line-height: 1.65; }
.codeblock__head { padding: 10px 14px; }
/* ---- Touch targets: copy buttons stay clickable ------------------- */
.copybtn { width: 32px; height: 32px; }
.install-copy { min-height: 32px; }
/* ---- Footer -------------------------------------------------------- */
.footer { padding: 60px 0 40px; }
.footer__inner { gap: 32px; }
.footer__cols { gap: 22px; }
}
/* small phones (iPhone SE 1st-gen / fold devices) */
@media (max-width: 420px) {
.container { padding-left: 14px; padding-right: 14px; }
.hero__title { font-size: clamp(28px, 8.5vw, 36px); }
.section__title { font-size: clamp(20px, 5.5vw, 26px); }
/* even tighter sections */
.section,
.section--tight,
.section--how,
.section--perf,
.section--webapp,
.section--mcp,
.section--validation,
.section--install { padding-top: 52px; padding-bottom: 52px; }
/* nav primary CTA stays visible, ghost was already hidden at 640px */
.nav__cta .btn--primary { padding: 8px 12px; font-size: 12.5px; }
.nav__cta .btn--primary .btn__arrow { display: none; }
/* very narrow code blocks — let long URLs wrap */
.codeblock pre,
.installcard__cmd code { word-break: break-word; white-space: pre-wrap !important; }
/* mcp demo args wrap aggressively */
.mcp-demo__args { word-break: break-all; }
}
/* Reduced-motion users (system preference) — disable big animations */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
.float__icon { animation: none; }
.preloader__bar-fill { animation-duration: 0.6s !important; }
}
/* ==========================================================================
FAQ SECTION (backs the FAQPage JSON-LD; / = native a11y)
========================================================================== */
.section--faq { padding: 110px 0; }
.faq {
margin-top: 36px;
max-width: 820px;
margin-left: auto;
margin-right: auto;
display: flex;
flex-direction: column;
gap: 12px;
}
.faq__item {
background: linear-gradient(180deg, #050505, #000000);
border: 1px solid rgba(255, 230, 210, 0.08);
border-radius: 10px;
overflow: hidden;
transition: border-color 0.15s ease;
}
.faq__item[open] {
border-color: rgba(217, 119, 6, 0.30);
}
.faq__q {
list-style: none;
cursor: pointer;
padding: 18px 22px;
font-family: var(--font-mono);
font-size: 14px;
font-weight: 600;
color: #FBBF24; /* amber/yellow — matches IDE string color */
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
letter-spacing: 0.01em;
transition: color 0.15s ease;
}
.faq__qSlash {
color: var(--fg-4); /* dim, like a real code-comment '//' */
font-weight: 500;
margin-right: 8px;
user-select: none;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after {
content: '+';
color: var(--orange-400);
font-weight: 700;
font-size: 20px;
line-height: 1;
transition: transform 0.2s ease;
flex-shrink: 0;
}
.faq__item[open] .faq__q::after { transform: rotate(45deg); }
.faq__q:hover { color: #FDE68A; } /* lighter amber on hover */
.faq__q:hover .faq__qSlash { color: var(--orange-400); }
.faq__a {
padding: 0 22px 20px;
}
.faq__a p {
margin: 0;
font-size: 14px;
line-height: 1.7;
color: var(--fg-2);
}
.faq__a code {
font-family: var(--font-mono);
font-size: 12.5px;
background: rgba(0, 0, 0, 0.45);
padding: 2px 7px;
border-radius: 4px;
border: 1px solid rgba(255, 230, 210, 0.06);
color: var(--fg-1);
word-break: break-word;
}
.faq__a strong { color: var(--fg-0); font-weight: 600; }
@media (max-width: 640px) {
.section--faq { padding: 64px 0; }
.faq__q { padding: 16px 18px; font-size: 13px; }
.faq__qSlash { margin-right: 6px; }
.faq__a { padding: 0 18px 16px; }
.faq__a p { font-size: 13.5px; }
}
/* ============================================================================
TERMINAL-WINDOW EDGE POLISH (final pass)
Sharper border + macOS-style triple-layer shadow on every terminal-window
surface so the edges look LIT, not soft. Was: 0.08-alpha border + a single
80px-spread mushy drop shadow → corners looked fuzzy / "unasthetic".
Now: 0.14 border + inset top rim highlight + crisp 1px definition shadow
+ tighter 50px drop. Applied to ALL terminal surfaces together so the
whole page stays one visual family.
============================================================================ */
.install-hero,
.agentw,
.hstep .codeblock,
.ascii-perf,
.mock--dashwarm,
.mcp-demo,
.testterm,
.termx {
border: 1px solid rgba(255, 230, 210, 0.14) !important;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.05),
0 1px 2px rgba(0, 0, 0, 0.55),
0 20px 50px -20px rgba(0, 0, 0, 0.75) !important;
}
/* Chrome bars (the strip with the traffic-light dots) get a crisper
bottom-edge separator so it reads as a real window header, not
washed-out warm tint */
.install-hero__chrome,
.agentw__chrome,
.codeblock__head,
.ascii-perf__chrome,
.mcp-demo__chrome,
.testterm__chrome,
.termx__chrome {
background: rgba(255, 230, 210, 0.025) !important;
border-bottom: 1px solid rgba(255, 230, 210, 0.08) !important;
}
/* ============================================================================
WAITLIST FORM — submit spinner + error state on the fine-print line
============================================================================ */
.cta__form button[type="submit"] {
position: relative;
}
.btn__spinner {
display: none;
width: 14px; height: 14px;
border-radius: 50%;
border: 2px solid rgba(255, 255, 255, 0.25);
border-top-color: #FFFFFF;
animation: wl-spin 0.7s linear infinite;
margin-left: 6px;
}
.cta__form.is-submitting .btn__arrow { display: none; }
.cta__form.is-submitting .btn__spinner { display: inline-block; }
.cta__form.is-submitting button[type="submit"] { pointer-events: none; opacity: 0.85; }
.cta__form input[type="email"]:invalid:not(:placeholder-shown) {
border-color: rgba(248, 113, 113, 0.5);
}
@keyframes wl-spin { to { transform: rotate(360deg); } }
.cta__fine.is-error { color: #F87171; }
.cta__fine.is-success { color: #00C244; }
/* ============================================================================
WAITLIST SUCCESS MODAL — slides up + scales in, with confetti firing behind it
============================================================================ */
.wl-modal {
position: fixed; inset: 0;
z-index: 10000;
display: flex; align-items: center; justify-content: center;
padding: 20px;
opacity: 0;
pointer-events: none;
transition: opacity 0.25s ease;
}
.wl-modal.is-open {
opacity: 1;
pointer-events: auto;
}
.wl-modal__backdrop {
position: absolute; inset: 0;
background: rgba(6, 6, 11, 0.78);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.wl-modal__card {
position: relative;
z-index: 1;
max-width: 460px;
width: 100%;
background: linear-gradient(180deg, #0A0A0F, #000000);
border: 1px solid rgba(255, 230, 210, 0.14);
border-radius: 16px;
padding: 36px 28px 28px;
text-align: center;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.06),
0 1px 2px rgba(0, 0, 0, 0.55),
0 30px 80px -20px rgba(217, 119, 6, 0.18),
0 30px 80px -20px rgba(0, 0, 0, 0.85);
transform: translateY(16px) scale(0.96);
opacity: 0;
transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.25s ease;
}
.wl-modal.is-open .wl-modal__card {
transform: translateY(0) scale(1);
opacity: 1;
}
.wl-modal__close {
position: absolute; top: 12px; right: 12px;
width: 32px; height: 32px;
background: transparent;
border: 1px solid rgba(255, 230, 210, 0.08);
border-radius: 8px;
color: var(--fg-3);
font-size: 18px; line-height: 1;
cursor: pointer;
transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.wl-modal__close:hover {
color: var(--fg-0);
border-color: rgba(217, 119, 6, 0.40);
background: rgba(217, 119, 6, 0.06);
}
.wl-modal__emoji {
font-size: 56px;
line-height: 1;
margin-bottom: 16px;
animation: wl-pop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.05s both;
display: inline-block;
}
@keyframes wl-pop {
0% { transform: scale(0) rotate(-30deg); opacity: 0; }
60% { transform: scale(1.18) rotate(8deg); opacity: 1; }
100% { transform: scale(1) rotate(0); opacity: 1; }
}
.wl-modal__title {
margin: 0 0 10px;
font-family: var(--font-sans);
font-size: 22px;
font-weight: 700;
color: var(--fg-0);
letter-spacing: -0.01em;
line-height: 1.25;
}
.wl-modal__sub {
margin: 0 0 18px;
font-size: 14px;
line-height: 1.55;
color: var(--fg-2);
}
.wl-modal__email {
color: var(--orange-400);
font-family: var(--font-mono);
font-size: 13px;
font-weight: 600;
word-break: break-all;
}
.wl-modal__meta {
display: flex; align-items: center; justify-content: center;
gap: 18px;
flex-wrap: wrap;
margin-bottom: 24px;
padding: 10px 14px;
background: rgba(255, 230, 210, 0.03);
border: 1px solid rgba(255, 230, 210, 0.06);
border-radius: 10px;
font-family: var(--font-mono);
font-size: 11.5px;
color: var(--fg-3);
}
.wl-modal__metaItem { display: inline-flex; align-items: center; gap: 6px; }
.wl-modal__btn {
display: inline-flex; align-items: center; justify-content: center;
padding: 11px 22px;
background: var(--orange-400);
color: #FFFFFF;
border: none;
border-radius: 9px;
font-family: var(--font-sans);
font-size: 14px;
font-weight: 600;
cursor: pointer;
letter-spacing: -0.005em;
transition: background 0.15s ease, transform 0.1s ease;
}
.wl-modal__btn:hover { background: #C2410C; }
.wl-modal__btn:active { transform: translateY(1px); }
@media (max-width: 640px) {
.wl-modal__card { padding: 30px 22px 22px; max-width: 100%; }
.wl-modal__title { font-size: 19px; }
.wl-modal__emoji { font-size: 48px; }
}
@media (prefers-reduced-motion: reduce) {
.wl-modal, .wl-modal__card { transition: opacity 0.01ms !important; }
.wl-modal__emoji { animation: none !important; }
}