/* ═══════════════════════════════════════════════════════════ Olbrain Labs — Peacock v2 Peacock-blue anchor · cool-biased neutrals · trust positioning ═══════════════════════════════════════════════════════════ */ * { margin: 0; padding: 0; box-sizing: border-box; } /* ── Design tokens — Peacock v2, cool-biased neutrals ── Peacock blue anchor + Inter + JetBrains Mono. Newsreader serif is reserved for pull quotes only. */ :root { /* Surface */ --bg: #ffffff; --bg-subtle: #F4F5F6; --bg-card: rgba(0,0,0,0.02); --bg-invert: #000000; /* Foreground */ --fg-1: #000000; /* primary text, headings */ --fg-2: #4A4E54; /* body */ --fg-3: #8A8F96; /* muted, eyebrows, captions */ --fg-invert: #ffffff; /* Brand — peacock blue */ --brand-light: #006D7F; /* links, CTAs on light surfaces */ --brand-dark: #0A93A3; /* CTAs on dark surfaces */ --brand-hover: #3DB5C4; /* hover on dark surfaces */ --brand-tint: #E4F3F5; /* highlight panels */ /* Borders — 1px does the work that shadows would */ --border: rgba(0,0,0,0.10); --border-hover: rgba(0,0,0,0.25); --border-strong: #000000; /* Typography — Inter for everything, JetBrains Mono for labels */ --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', Consolas, monospace; --font-serif: 'Newsreader', Georgia, 'Times New Roman', serif; /* quotes only */ /* Mono sizes (eyebrows, captions, timestamps) */ --fs-mono-xs: 0.65rem; --fs-mono-sm: 0.72rem; --fs-mono-md: 0.85rem; /* Display sizes */ --fs-3xl: 2.8rem; --fs-4xl: 4rem; /* Weights */ --fw-normal: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-extrabold: 800; /* Line-heights */ --lh-tighter: 1.08; --lh-tight: 1.2; --lh-normal: 1.6; --lh-loose: 1.8; /* Letter-spacing */ --ls-tightest: -0.03em; /* hero H1 */ --ls-tight: -0.02em; /* H2 */ --ls-section: 3px; /* mono eyebrow tracking */ --ls-widest: 0.18em; /* agent labels 01..08 */ /* Radii — sharp by default, like a CAD drawing */ --radius-0: 0; /* cards, sections, panels */ --radius-sm: 6px; /* buttons */ /* Shadows — borders do the work */ --shadow-none: none; --shadow-hover: 0 0 0 1px rgba(0,0,0,0.25); /* ── Legacy aliases (do not remove — many rules still reference these) ── */ --text-primary: var(--fg-1); --text-secondary: var(--fg-2); --text-muted: var(--fg-3); --navy: var(--bg); --navy-light: var(--bg-subtle); --navy-card: var(--bg-card); --navy-border: var(--border); --brand: var(--fg-1); --brand-dark-legacy: #333333; --brand-soft: rgba(0,0,0,0.04); --brand-glow: rgba(0,0,0,0.06); --text-white: var(--fg-1); --text-dim: var(--fg-2); --accent: #000000; --accent-light: #000000; } /* ── Base Typography ── */ /* Lock to a light canvas: paint the root background and declare the scheme so dark-themed webviews / embedded preview panels can't show a dark backdrop through the (otherwise transparent) element behind our content. */ html { background: var(--bg); color-scheme: light; } body { font-family: var(--font-sans); background: var(--bg); color: var(--text-secondary); font-weight: 400; line-height: 1.6; overflow-x: hidden; } h1 { font-size: clamp(2.4rem, 5vw, 4rem); font-weight: 800; letter-spacing: -0.03em; color: var(--text-primary); line-height: 1.1; } h2 { font-size: clamp(1.8rem, 3.5vw, 2.8rem); font-weight: 700; letter-spacing: -0.02em; color: var(--text-primary); line-height: 1.15; } h3 { font-size: 1.15rem; font-weight: 600; color: var(--text-primary); } a { color: inherit; } strong { color: var(--text-primary); } /* ── Navigation ── */ nav { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; padding: 0.85rem 5%; display: flex; justify-content: space-between; align-items: center; background: rgba(10,10,10,0.92); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid rgba(255,255,255,0.08); } .logo-img { height: 44px; width: auto; max-width: 180px; object-fit: contain; } .brand-sup { font-size: 0.55em; letter-spacing: 0.05em; vertical-align: super; font-weight: 700; } .nav-links { display: flex; gap: 2rem; list-style: none; } .nav-links a { color: rgba(255,255,255,0.55); text-decoration: none; font-weight: 500; font-size: 0.9rem; transition: color 0.2s; } .nav-links a:hover { color: #ffffff; } .nav-cta { border: 1px solid #ffffff; background: #ffffff; color: #0a0a0a; padding: 0.6rem 1.25rem; border-radius: 6px; text-decoration: none; font-weight: 600; font-size: 0.9rem; transition: opacity 0.2s; } .nav-cta:hover { opacity: 0.85; } .mobile-menu-btn { display: none; background: none; border: none; cursor: pointer; padding: 0.5rem; } .mobile-menu-btn span { display: block; width: 24px; height: 2px; background: #ffffff; margin: 5px 0; border-radius: 2px; transition: 0.2s; } /* ── Hero ── */ .hero { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 5%; position: relative; overflow: hidden; background: #0a0a0a; color: #ffffff; border-bottom: 1px solid rgba(255,255,255,0.08); } .hero .hero-eyebrow { color: #8A8F96; } .hero h1, .hero h1 em { color: #ffffff; } .hero .hero-sub-headline { color: rgba(255,255,255,0.78); } .hero .hero-sub-headline strong { color: #ffffff; } .hero .hero-subtitle { color: rgba(255,255,255,0.6); } .hero .hero-subtitle strong { color: rgba(255,255,255,0.85); } .hero .hero-proof { color: rgba(255,255,255,0.4); } .hero .btn-primary { background: #ffffff; color: #0a0a0a; border-color: #ffffff; font-family: var(--font-mono); font-size: 0.78rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; padding: 1rem 2.4rem; border-radius: 0; } .hero .btn-ghost { color: rgba(255,255,255,0.6); border-color: rgba(255,255,255,0.2); } .hero .btn-ghost:hover { color: #ffffff; border-color: #ffffff; } .hero .tmb-diagram { color: rgba(255,255,255,0.7); } .hero .tmb-diagram .d-cap { fill: rgba(255,255,255,0.5); } .hero .tmb-diagram .d-sub { fill: rgba(255,255,255,0.4); } .hero .tmb-diagram rect[fill="#111111"] { fill: #ffffff; } .hero .tmb-diagram .d-title { fill: #0a0a0a !important; } .hero .tmb-diagram text[style*="fill:#ffffff"] { fill: #0a0a0a !important; } /* Soft radial glow — adds depth without clutter */ .hero::before { content: ''; position: absolute; top: -20%; left: 50%; transform: translateX(-50%); width: 140%; height: 80%; background: radial-gradient(ellipse 60% 50% at 50% 0%, rgba(255,255,255,0.04) 0%, transparent 70%); pointer-events: none; } /* Numbers strip */ .numbers-strip { background: #0a0a0a; border-bottom: 1px solid rgba(255,255,255,0.1); padding: 2.5rem 5%; } .numbers-inner { max-width: 1200px; margin: 0 auto; display: flex; justify-content: center; gap: 0; } .num-item { flex: 1; text-align: center; border-right: 1px solid rgba(255,255,255,0.1); padding: 0 2rem; } .num-item:last-child { border-right: 0; } .num-value { font-family: var(--font-mono); font-size: clamp(1.8rem, 3vw, 2.4rem); font-weight: 700; color: #ffffff; letter-spacing: -0.02em; line-height: 1.2; } .num-label { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.45); margin-top: 0.4rem; } /* Scroll reveal */ .reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1); } .reveal.visible { opacity: 1; transform: translateY(0); } .hero::after { display: none; } .hero-inner { display: flex; flex-direction: column; text-align: center; align-items: center; max-width: 820px; width: 100%; margin: 0 auto; position: relative; z-index: 1; } .hero-text { flex: 1; max-width: 720px; text-align: left; opacity: 1; animation: fadeUp 0.8s ease both; } .hero-visual { flex: 0 0 300px; margin-left: auto; opacity: 1; animation: fadeUp 0.8s ease 0.3s both; } /* Hero Eyebrow — wide-tracked wordmark + category */ .hero-eyebrow { display: block; padding: 0; background: none; border: none; font-family: var(--font-mono); font-size: 0.58rem; color: rgba(255,255,255,0.35); font-weight: 500; margin-bottom: 2rem; letter-spacing: 0.22em; text-transform: uppercase; } /* Thin decorative rule between eyebrow and headline */ .hero-rule { width: 40px; height: 1px; background: rgba(255,255,255,0.2); margin: 0 auto 2rem; } .hero h1 { font-size: clamp(2.4rem, 5vw, 4rem); font-weight: 800; line-height: 1.08; margin-bottom: 1.25rem; letter-spacing: -0.03em; color: #ffffff; } .hero h1 .forging { font-size: 0.5em; letter-spacing: 0.15em; font-weight: 700; display: block; margin-bottom: 0.2em; } /* Gradient text class — unused in B&W but kept for compat */ .hero h1 .gradient-text { color: var(--text-primary); } .hero-subtitle { font-size: 1.25rem; font-weight: 500; color: var(--text-secondary); margin-bottom: 1rem; line-height: 1.4; } .hero-subtitle strong { color: var(--text-primary); font-weight: 700; } .hero-sub { font-size: 1.05rem; color: var(--text-secondary); line-height: 1.7; margin-bottom: 2.5rem; max-width: 560px; } .hero-buttons { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 2rem; justify-content: center; } /* Buttons — Solid white primary */ .btn-primary { background: var(--text-primary); color: var(--bg); padding: 0.9rem 2rem; border-radius: 6px; text-decoration: none; font-weight: 600; font-size: 0.95rem; border: 1px solid var(--text-primary); transition: opacity 0.2s; display: inline-flex; align-items: center; gap: 0.5rem; } .btn-primary:hover { opacity: 0.85; } .btn-ghost { background: transparent; color: var(--text-secondary); padding: 0.9rem 2rem; border-radius: 6px; text-decoration: none; font-weight: 500; font-size: 0.95rem; border: 1px solid var(--border); transition: border-color 0.2s, color 0.2s; } .btn-ghost:hover { border-color: var(--text-primary); color: var(--text-primary); } /* Hero proof line */ .hero-proof { display: flex; gap: 1rem; flex-wrap: wrap; font-family: var(--font-mono); font-size: 0.7rem; color: var(--text-muted); } .hero-proof span { display: flex; align-items: center; gap: 0.4rem; } /* Identity layers strip below hero */ .hero-layers-strip { display: flex; gap: 1.5rem; max-width: 1200px; width: 100%; margin: 3rem auto 0; position: relative; z-index: 1; } .hero-layers-strip .identity-layer { flex: 1; padding: 1rem 1.2rem; border: 1px solid var(--border); border-radius: 0; background: transparent; } .hero-layers-strip .identity-layer:hover { border-color: var(--text-primary); } .hero-layers-strip .layer-content span { font-size: 0.75rem; } .hero-layers-strip .layer-icon { width: 36px; height: 36px; font-size: 0.6rem; border-radius: 0; background: transparent; border: 1px solid var(--border); color: var(--text-muted); } /* Platform logos — hidden */ .platform-logos { display: none; } .platform-logo { display: none; } /* ── Phone Mockup — Line Art Style ── */ .phone-frame { background: transparent; border: 2px solid rgba(0,0,0,0.2); border-radius: 32px; padding: 8px; position: relative; max-width: 280px; animation: phoneFloat 6s ease-in-out infinite; } .phone-notch { width: 80px; height: 18px; background: var(--bg); border: 1px solid rgba(0,0,0,0.1); border-top: none; border-radius: 0 0 10px 10px; position: absolute; top: 0; left: 50%; transform: translateX(-50%); z-index: 3; } .phone-screen { border-radius: 24px; overflow: hidden; border: 1px solid rgba(0,0,0,0.06); } /* ── WhatsApp Chat — B&W ── */ .wa-header { background: var(--bg-subtle) !important; color: var(--text-primary); padding: 1.5rem 1rem 0.7rem; display: flex; align-items: center; gap: 0.75rem; border-bottom: 1px solid var(--border); } .wa-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--text-primary) !important; border: none; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.75rem; color: var(--bg); flex-shrink: 0; } .wa-contact-name { font-weight: 600; font-size: 0.85rem; color: var(--text-primary); } .wa-contact-status { font-size: 0.65rem; color: var(--text-muted); } .wa-chat { background: var(--bg-subtle) !important; padding: 0.75rem; height: 380px; overflow: hidden; position: relative; } .wa-chat::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 40px; background: linear-gradient(transparent, var(--bg-subtle)); z-index: 2; pointer-events: none; } .wa-chat::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 30px; background: linear-gradient(var(--bg-subtle), transparent); z-index: 2; pointer-events: none; } .wa-chat-scroll { display: flex; flex-direction: column; gap: 0.4rem; animation: scrollChat 35s linear infinite; padding-bottom: 1rem; } .wa-chat-scroll:hover { animation-play-state: paused; } .wa-date-badge { align-self: center; background: transparent; color: var(--text-muted); font-size: 0.55rem; padding: 0.15rem 0.5rem; border: 1px solid rgba(0,0,0,0.08); margin: 0.3rem 0; font-family: var(--font-mono); } .wa-phase-label { align-self: center; background: transparent; color: var(--text-muted); font-size: 0.5rem; font-weight: 600; padding: 0.15rem 0.5rem; border: 1px solid rgba(0,0,0,0.12); margin: 0.3rem 0; text-transform: uppercase; letter-spacing: 0.1em; font-family: var(--font-mono); } .wa-msg { max-width: 85%; padding: 0.5rem 0.65rem; font-size: 0.68rem; color: var(--text-secondary); line-height: 1.45; position: relative; flex-shrink: 0; border-radius: 0; } .wa-msg .wa-time { font-size: 0.48rem; color: var(--text-muted); float: right; margin-left: 0.4rem; margin-top: 0.2rem; } .wa-msg.customer { background: transparent; align-self: flex-end; border: 1px solid rgba(0,0,0,0.15); color: var(--text-primary); } .wa-msg.agent { background: rgba(0,0,0,0.03); align-self: flex-start; border: 1px solid rgba(0,0,0,0.08); color: var(--text-secondary); } /* ── Validation Badge ── */ .validation-strip { display: flex; align-items: center; gap: 0.75rem; margin-top: 2rem; padding: 0.75rem 1rem; border: 1px solid var(--border); max-width: 560px; } .validation-strip .v-icon { font-size: 1.5rem; flex-shrink: 0; } .validation-strip p { font-size: 0.82rem; color: var(--text-secondary); line-height: 1.5; } .validation-strip strong { color: var(--text-primary); } /* ── Section Styles ── */ section { padding: 8rem 5%; position: relative; } .section-label { font-family: var(--font-mono); font-size: 0.72rem; font-weight: 400; text-transform: uppercase; letter-spacing: 3px; color: var(--text-muted); margin-bottom: 1rem; } .section-header { text-align: center; max-width: 700px; margin: 0 auto 4rem; } .section-header h2 { font-size: clamp(1.8rem, 3.5vw, 2.8rem); font-weight: 700; margin-bottom: 1rem; letter-spacing: -0.02em; color: var(--text-primary); } .section-header p { color: var(--text-secondary); font-size: 1.05rem; line-height: 1.7; } /* ── Epiphany / Why Agency ── */ .epiphany { background: var(--bg); } .epiphany-story { max-width: 800px; margin: 0 auto 4rem; border: 1px solid var(--border); padding: 3rem; position: relative; } .epiphany-story::before { display: none; } .epiphany-story .story-label { font-family: var(--font-mono); color: var(--text-muted); font-weight: 400; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 3px; margin-bottom: 1.25rem; } .epiphany-story p { color: var(--text-secondary); font-size: 1.05rem; line-height: 1.8; margin-bottom: 1.25rem; } .epiphany-story p:last-child { margin-bottom: 0; } .epiphany-story .story-highlight { color: var(--text-primary); font-weight: 600; } /* ── Agency traits (positive, non-comparative) ── */ .agency-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; max-width: 900px; margin: 0 auto; } .agency-trait { border: 1px solid var(--border, rgba(0,0,0,0.12)); padding: 2rem 1.75rem; transition: border-color 0.2s ease; } .agency-trait:hover { border-color: var(--text-primary); } .agency-trait-label { font-family: var(--font-mono); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-primary); margin-bottom: 0.85rem; } .agency-trait p { color: var(--text-secondary); font-size: 0.95rem; line-height: 1.6; margin: 0; } @media (max-width: 768px) { .agency-grid { grid-template-columns: 1fr; gap: 1rem; } } /* ── What you can build — agent taxonomy ── */ .taxonomy-section { padding: 5rem 5%; max-width: 1200px; margin: 0 auto; } .taxonomy-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); margin-top: 2.5rem; } .tax-card { background: var(--bg, #fff); padding: 1.75rem 1.6rem; } .tax-card.tax-note { background: var(--bg-subtle, #F4F5F6); } .tax-head { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.7rem; } .tax-name { font-size: 1.05rem; font-weight: 700; letter-spacing: -0.01em; color: var(--text-primary); } .tax-live { font-family: var(--font-mono); font-size: 0.6rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: #fff; background: var(--text-primary, #111); padding: 0.18rem 0.5rem; border-radius: 2px; } .tax-card p { font-size: 0.93rem; color: var(--text-secondary); line-height: 1.6; margin: 0; } @media (max-width: 768px) { .taxonomy-grid { grid-template-columns: 1fr; } } /* ── Transaction vs Relationship ── */ .worlds { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; max-width: 900px; margin: 0 auto; } .world-card { padding: 2.5rem; position: relative; transition: border-color 0.2s; } .world-card.old { background: transparent; border: 1px solid rgba(0,0,0,0.08); } .world-card.old:hover { border-color: rgba(0,0,0,0.2); } .world-card.new { background: transparent; border: 1px solid rgba(0,0,0,0.2); } .world-card.new:hover { border-color: var(--text-primary); } .world-label { font-family: var(--font-mono); font-size: 0.72rem; font-weight: 500; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 1.5rem; display: flex; align-items: center; gap: 0.5rem; } .world-card.old .world-label { color: var(--text-muted); } .world-card.new .world-label { color: var(--text-primary); } .world-card ul { list-style: none; display: flex; flex-direction: column; gap: 1rem; } .world-card li { color: var(--text-secondary); font-size: 0.92rem; line-height: 1.6; display: flex; align-items: flex-start; gap: 0.6rem; } .world-card li .icon { flex-shrink: 0; margin-top: 0.15rem; } .world-card.old li .icon { color: var(--text-muted); } .world-card.new li .icon { color: var(--text-primary); } /* ── How It Works ── */ .how-it-works { background: var(--bg-subtle); } .how-it-works .section-header { text-align: center; } .hiw-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; max-width: 1200px; margin: 0 auto 3rem; text-align: left; } .hiw-step { background: transparent; border: 1px solid var(--border); padding: 2rem 1.5rem; text-align: left; position: relative; transition: border-color 0.2s; } .hiw-step:hover { border-color: var(--border-hover); } .hiw-num { width: 44px; height: 44px; background: transparent; border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; font-weight: 700; color: var(--text-muted); font-size: 1.1rem; margin: 0 0 1.25rem; } .hiw-step h3 { font-size: 1.15rem; font-weight: 600; margin-bottom: 0.75rem; color: var(--text-primary); } .hiw-step p { color: var(--text-secondary); font-size: 0.92rem; line-height: 1.6; } .hiw-note { max-width: 700px; margin: 0 auto; text-align: center; padding: 1.5rem 2rem; border: 1px solid var(--border); color: var(--text-secondary); font-size: 0.92rem; } .hiw-note strong { color: var(--text-primary); } /* ── Products ── */ .demo-section { background: var(--bg); position: relative; } .capabilities-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; max-width: 950px; margin: 0 auto; } .cap-card { background: transparent; border: 1px solid var(--border); padding: 2rem; transition: border-color 0.2s; } .cap-card:hover { border-color: var(--border-hover); } .cap-icon { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; background: transparent; border: 1px solid var(--border); color: var(--text-secondary); margin-bottom: 1.25rem; } .cap-card h3 { font-size: 1.15rem; font-weight: 600; margin-bottom: 0.5rem; color: var(--text-primary); } .cap-card p { color: var(--text-secondary); font-size: 0.92rem; line-height: 1.6; margin-bottom: 1rem; } .cap-example { background: rgba(255,255,255,0.02); border-left: 1px solid var(--border); padding: 0.65rem 0.85rem; font-size: 0.82rem; color: var(--text-muted); font-style: italic; } /* ── Validation ── */ .validation { background: var(--bg); } .validation-content { max-width: 900px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; } .validation-text h3 { font-size: 1.5rem; font-weight: 700; margin-bottom: 1rem; color: var(--text-primary); } .validation-text p { color: var(--text-secondary); font-size: 1rem; line-height: 1.7; margin-bottom: 1.5rem; } .validation-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; } .stat-card { background: transparent; border: 1px solid var(--border); padding: 1.75rem; text-align: center; } .stat-card .stat-num { font-size: 2rem; font-weight: 700; color: var(--text-primary); margin-bottom: 0.25rem; } .stat-card .stat-label { font-size: 0.82rem; color: var(--text-muted); } /* ── Trust Marquee ── */ .trust-section { border-top: 1px solid var(--text-primary); border-bottom: 1px solid var(--text-primary); padding: 2.25rem 0; background: var(--text-primary); } .trust-section .section-label { color: rgba(255,255,255,0.6); } .trust-track { overflow: hidden; position: relative; } .trust-track::before, .trust-track::after { content: ''; position: absolute; top: 0; bottom: 0; width: 80px; z-index: 2; pointer-events: none; } .trust-track::before { left: 0; background: linear-gradient(to right, var(--text-primary), transparent); } .trust-track::after { right: 0; background: linear-gradient(to left, var(--text-primary), transparent); } .trust-logos { display: flex; align-items: center; gap: 3rem; white-space: nowrap; animation: marquee 80s linear infinite; } .trust-logos:hover { animation-play-state: paused; } .trust-logos a, .trust-logos span { font-family: var(--font-mono); color: rgba(255,255,255,0.55); text-decoration: none; font-size: 0.72rem; font-weight: 400; flex-shrink: 0; transition: color 0.2s; } .trust-logos a:hover { color: #ffffff; } .trust-sep { display: none; } /* ── Three Layers / What We Build ── */ .three-layers { padding: 8rem 5%; max-width: 1200px; margin: 0 auto; } .three-layers-grid { display: grid; grid-template-columns: repeat(2, 1fr); grid-auto-rows: 1fr; gap: 1.75rem; margin-top: 3rem; max-width: 920px; margin-left: auto; margin-right: auto; } .three-layers-grid .layer-card { display: flex; flex-direction: column; } .layers-footnote { text-align: center; margin: 3rem auto 0; max-width: 64ch; color: var(--text-secondary); font-size: 0.95rem; line-height: 1.6; font-style: italic; } .layers-footnote strong { font-style: normal; color: var(--text-primary); } @media (max-width: 1024px) { .three-layers-grid { grid-template-columns: repeat(2, 1fr); } } .layer-card { background: transparent; border: none; padding: 2rem; } .layer-card:hover { } .layer-card-icon { font-size: 0.75rem; font-family: var(--font-mono); font-weight: 500; margin-bottom: 1rem; width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; background: transparent; border: 1px solid rgba(255,255,255,0.3); color: rgba(255,255,255,0.6); } .layer-card h3 { color: var(--text-primary); font-size: 1.15rem; font-weight: 600; margin-bottom: 0.5rem; } .layer-card .layer-label { font-family: var(--font-mono); color: var(--text-muted); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 2px; font-weight: 400; margin-bottom: 0.75rem; } .layer-card p { color: var(--text-secondary); font-size: 0.9rem; line-height: 1.6; } .layer-card a { display: inline-block; margin-top: 1rem; color: var(--text-primary); font-size: 0.85rem; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; } .layer-card a:hover { color: var(--text-secondary); } /* ── Traction Grid ── */ .traction-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.5rem; margin-top: 3rem; } .traction-item { border: 1px solid var(--border); padding: 1.5rem; text-align: center; } .traction-item .traction-num { color: var(--text-primary); font-size: 2rem; font-weight: 700; margin-bottom: 0.3rem; } .traction-item .traction-label { color: var(--text-secondary); font-size: 0.85rem; line-height: 1.4; } /* ── Pricing ── */ .pricing { background: var(--bg); } .pricing-card { max-width: 580px; margin: 0 auto; border: 1px solid var(--border); padding: 3rem; text-align: center; } .pricing-card::before { display: none; } .pricing-amount { font-size: 3rem; font-weight: 700; color: var(--text-primary); margin-bottom: 0.25rem; } .pricing-period { color: var(--text-muted); font-size: 0.9rem; margin-bottom: 0.5rem; } .pricing-usage { color: var(--text-secondary); font-size: 1rem; margin-bottom: 0.5rem; } .pricing-tax { color: var(--text-muted); font-size: 0.78rem; margin-bottom: 2rem; } .pricing-features { list-style: none; text-align: left; display: flex; flex-direction: column; gap: 0.6rem; margin-bottom: 2.5rem; } .pricing-features li { color: var(--text-secondary); font-size: 0.92rem; display: flex; align-items: center; gap: 0.6rem; } .pricing-features li .check { color: var(--text-primary); flex-shrink: 0; } /* ── Team ── */ .team { background: var(--bg); } .team-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; max-width: 700px; margin: 0 auto; } .team-card { border: 1px solid var(--border); padding: 2rem; text-align: center; transition: border-color 0.2s; } .team-card:hover { border-color: var(--border-hover); } .team-img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; margin-bottom: 1rem; border: 1px solid var(--border); filter: grayscale(100%); } .team-card:hover .team-img { filter: grayscale(0%); } .team-card h3 { font-size: 1.1rem; font-weight: 600; margin-bottom: 0.25rem; color: var(--text-primary); } .team-card .team-role { font-family: var(--font-mono); color: var(--text-muted); font-size: 0.72rem; font-weight: 400; margin-bottom: 0.75rem; letter-spacing: 0.02em; } .team-card p { color: var(--text-secondary); font-size: 0.85rem; line-height: 1.6; } /* ── CTA Section ── */ .cta-section { background: var(--bg); text-align: center; position: relative; overflow: hidden; } .cta-section::before { display: none; } .cta-section h2 { font-size: clamp(1.8rem, 3.5vw, 2.6rem); font-weight: 700; margin-bottom: 1rem; position: relative; color: var(--text-primary); } .cta-section p { color: var(--text-secondary); font-size: 1.05rem; margin-bottom: 2.5rem; max-width: 500px; margin-left: auto; margin-right: auto; position: relative; } .cta-section .btn-primary { position: relative; } .cta-buttons { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; position: relative; } .cta-contact { margin-top: 1.25rem; color: var(--text-muted); font-size: 0.85rem; position: relative; } .cta-contact a { color: var(--text-primary); text-decoration: underline; text-underline-offset: 3px; } /* ── Footer ── */ footer { background: var(--bg); padding: 4rem 5% 2.5rem; border-top: 1px solid var(--border); } .footer-content { max-width: 1200px; margin: 0 auto; display: flex; flex-direction: column; gap: 2.5rem; } .footer-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem 1.5rem; } .footer-col h4 { font-family: var(--font-mono); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-primary); margin: 0 0 1.1rem; } .footer-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.7rem; } .footer-col a { font-family: var(--font-mono); color: var(--text-secondary); text-decoration: none; font-size: 0.82rem; transition: color 0.2s; } .footer-col a:hover { color: var(--text-primary); } /* legacy flat footer fallback */ .footer-links { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.95rem 1.5rem; list-style: none; padding: 0; margin: 0; } .footer-links a { font-family: var(--font-mono); color: var(--text-secondary); text-decoration: none; font-size: 0.82rem; transition: color 0.2s; } .footer-links a:hover { color: var(--text-primary); } .footer-left { font-family: var(--font-mono); color: var(--text-muted); font-size: 0.78rem; border-top: 1px solid var(--border); padding-top: 2rem; } /* ── Floating WhatsApp ── */ .wa-float { position: fixed; bottom: 1.5rem; right: 1.5rem; width: 56px; height: 56px; background: var(--text-primary); border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 999; transition: opacity 0.2s; } .wa-float:hover { opacity: 0.8; } .wa-float svg { width: 28px; height: 28px; fill: var(--bg); } /* ── Identity Layers Visual ── */ .identity-layers { display: flex; flex-direction: column; gap: 0.5rem; animation: fadeUp 0.8s ease 0.4s both; position: relative; } .identity-layers::before { display: none; } .identity-layer { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.4rem; border: 1px solid var(--border); background: transparent; transition: border-color 0.2s; position: relative; z-index: 1; } .identity-layer:last-child { margin-bottom: 0; } .identity-layer:hover { border-color: var(--border-hover); } .layer-3, .layer-2, .layer-1 { background: transparent; } .layer-icon { font-family: var(--font-mono); font-size: 0.65rem; flex-shrink: 0; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: transparent; border: 1px solid var(--border); color: var(--text-muted); } .layer-content { display: flex; flex-direction: column; gap: 0.15rem; text-align: left; } .layer-content strong { color: var(--text-primary); font-size: 0.95rem; font-weight: 600; } .layer-content span { color: var(--text-secondary); font-size: 0.8rem; line-height: 1.4; } /* ── Animations ── */ @keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } @keyframes scrollChat { 0% { transform: translateY(0); } 100% { transform: translateY(-50%); } } @keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } @keyframes phoneFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } /* ── Parable section ── */ .parable { background: var(--bg); padding: 8rem 5%; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .parable-inner { max-width: 780px; margin: 0 auto; text-align: center; } .parable-inner .section-label { margin-bottom: 1.5rem; } .parable-headline { font-size: clamp(1.4rem, 2.6vw, 2.1rem); font-weight: 600; line-height: 1.35; letter-spacing: -0.015em; color: var(--text-primary); margin-bottom: 4rem; } .parable-headline .parable-emph { color: var(--text-primary); font-weight: 700; } .parable-quote { margin: 0 auto 2rem; padding: 0; border: none; text-align: left; max-width: 620px; font-family: 'Inter', sans-serif; } .parable-quote p { color: var(--text-secondary); font-size: 1.1rem; line-height: 1.75; margin-bottom: 1.25rem; } .parable-quote p:first-child { font-weight: 600; color: var(--text-primary); font-size: 1.2rem; } .parable-punchline { margin-top: 2.5rem !important; padding-top: 2rem; border-top: 1px solid var(--border); color: var(--text-primary) !important; font-weight: 600 !important; font-size: 1.15rem !important; line-height: 1.6 !important; } .parable-attribution { font-family: var(--font-mono, 'JetBrains Mono', monospace); font-size: 0.75rem; color: var(--text-muted); letter-spacing: 0.05em; text-transform: uppercase; margin-top: 2.5rem; } .parable-attribution a { color: var(--text-muted); text-decoration: underline; text-underline-offset: 3px; } .parable-attribution a:hover { color: var(--text-primary); } @media (max-width: 768px) { .parable { padding: 5rem 5%; } .parable-headline { margin-bottom: 2.5rem; } .parable-quote p { font-size: 1rem; } } /* ── Built for Audit ── */ .audit-section { background: var(--bg-subtle); padding: 8rem 5%; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .audit-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; max-width: 1200px; margin: 0 auto 3rem; } .audit-card { background: var(--bg); border: 1px solid var(--border); padding: 2rem 1.75rem; position: relative; transition: border-color 0.2s; } .audit-card:hover { border-color: var(--border-hover); } .audit-card-label { font-family: var(--font-mono, 'JetBrains Mono', monospace); font-size: 0.7rem; letter-spacing: 0.12em; color: var(--text-muted); margin-bottom: 1.25rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--border); } .audit-card h3 { font-size: 1.05rem; font-weight: 600; color: var(--text-primary); margin-bottom: 0.75rem; line-height: 1.4; letter-spacing: -0.01em; } .audit-card p { color: var(--text-secondary); font-size: 0.92rem; line-height: 1.65; } .audit-note { text-align: center; font-family: var(--font-mono, 'JetBrains Mono', monospace); font-size: 0.8rem; color: var(--text-muted); letter-spacing: 0.04em; } .audit-note a { color: var(--text-primary); text-decoration: underline; text-underline-offset: 3px; } /* ── TLC ── */ .tlc-section { background: var(--bg); padding: 8rem 5%; } .tlc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; max-width: 1100px; margin: 0 auto; } .tlc-card { text-align: center; padding: 2.5rem 2rem; border: 1px solid var(--border); transition: border-color 0.2s; } .tlc-card:hover { border-color: var(--border-hover); } .tlc-letter { font-size: 3.5rem; font-weight: 800; color: var(--text-primary); letter-spacing: -0.04em; margin-bottom: 1rem; line-height: 1; } .tlc-card h3 { font-size: 1.2rem; font-weight: 700; color: var(--text-primary); margin-bottom: 1rem; letter-spacing: -0.01em; } .tlc-card p { color: var(--text-secondary); font-size: 0.95rem; line-height: 1.7; } /* ── Roadmap ── */ .roadmap-section { background: var(--bg-subtle); padding: 8rem 5%; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .roadmap-timeline { display: flex; align-items: stretch; justify-content: center; max-width: 1100px; margin: 0 auto 3rem; gap: 0; } .roadmap-node { flex: 1; text-align: center; padding: 2rem 1.5rem; background: var(--bg); border: 1px solid var(--border); position: relative; } .roadmap-node.active { border-color: var(--text-primary); border-width: 2px; } .roadmap-acronym { display: inline-block; font-family: var(--font-mono, 'JetBrains Mono', monospace); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.15em; color: var(--text-muted); padding: 0.25rem 0.6rem; border: 1px solid var(--border); margin-bottom: 1rem; } .roadmap-node.active .roadmap-acronym { color: var(--text-primary); border-color: var(--text-primary); } .roadmap-year { font-family: var(--font-mono, 'JetBrains Mono', monospace); font-size: 2.2rem; font-weight: 700; color: var(--text-primary); letter-spacing: -0.02em; margin-bottom: 0.5rem; } .roadmap-node.active .roadmap-year::after { content: " · LIVE"; font-size: 0.6rem; letter-spacing: 0.1em; vertical-align: middle; color: var(--text-muted); font-weight: 500; } .roadmap-brain { font-size: 1.05rem; font-weight: 600; color: var(--text-primary); margin-bottom: 0.75rem; letter-spacing: -0.01em; } .roadmap-node p { color: var(--text-secondary); font-size: 0.88rem; line-height: 1.6; } .roadmap-line { flex: 0 0 40px; align-self: center; height: 1px; background: var(--border); position: relative; } .roadmap-line::after { content: "→"; position: absolute; right: -8px; top: -11px; color: var(--text-muted); font-size: 1rem; } .roadmap-destination { max-width: 900px; margin: 3rem auto 2.5rem; padding: 2.5rem 2rem; background: var(--text-primary); color: var(--bg); display: flex; align-items: center; gap: 2rem; text-align: left; } .roadmap-arrow { font-size: 2.5rem; line-height: 1; color: var(--bg); flex-shrink: 0; } .roadmap-destination-label { font-family: var(--font-mono, 'JetBrains Mono', monospace); font-size: 0.7rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--bg); opacity: 0.65; margin-bottom: 0.6rem; } .roadmap-destination h3 { font-size: 1.8rem; font-weight: 700; color: var(--bg); letter-spacing: -0.02em; margin-bottom: 0.6rem; line-height: 1.1; } .roadmap-destination p { color: var(--bg); opacity: 0.85; font-size: 1rem; line-height: 1.6; margin: 0; } .roadmap-note { text-align: center; color: var(--text-muted); font-size: 0.9rem; max-width: 600px; margin: 0 auto; font-style: italic; } /* ── Privacy Strip ── */ .privacy-strip { background: var(--bg); padding: 5rem 5%; border-bottom: 1px solid var(--border); } .privacy-inner { max-width: 1100px; margin: 0 auto; text-align: center; } .privacy-inner .section-label { margin-bottom: 2rem; } .privacy-items { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; text-align: left; } .privacy-item { padding: 1.25rem; border-left: 2px solid var(--text-primary); padding-left: 1rem; } .privacy-item strong { display: block; color: var(--text-primary); font-size: 0.95rem; font-weight: 600; margin-bottom: 0.4rem; } .privacy-item span { color: var(--text-secondary); font-size: 0.85rem; line-height: 1.55; } /* ── Responsive: new sections ── */ @media (max-width: 960px) { .audit-grid { grid-template-columns: 1fr 1fr; } .tlc-grid { grid-template-columns: 1fr; max-width: 500px; } .roadmap-timeline { flex-direction: column; max-width: 500px; gap: 1rem; } .roadmap-line { flex: 0 0 40px; width: 1px; height: 40px; background: var(--border); } .roadmap-line::after { right: auto; left: -11px; top: auto; bottom: -2px; content: "↓"; } .privacy-items { grid-template-columns: 1fr 1fr; } } @media (max-width: 768px) { .audit-section, .tlc-section, .roadmap-section { padding: 5rem 5%; } .audit-grid { grid-template-columns: 1fr; max-width: 440px; margin-left: auto; margin-right: auto; } .privacy-strip { padding: 3rem 5%; } .privacy-items { grid-template-columns: 1fr; } .roadmap-destination { flex-direction: column; text-align: center; padding: 2rem 1.5rem; gap: 1rem; } .roadmap-arrow { font-size: 2rem; transform: rotate(90deg); } .roadmap-destination h3 { font-size: 1.5rem; } } @media (max-width: 768px) { .numbers-inner { flex-wrap: wrap; } .num-item { flex: 0 0 50%; border-bottom: 1px solid rgba(255,255,255,0.1); padding: 1.2rem 1rem; } .num-item:nth-child(2n) { border-right: 0; } .num-item:nth-last-child(-n+2) { border-bottom: 0; } } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { .hero-text, .hero-visual, .identity-layers { animation: none; opacity: 1; transform: none; } .hero::before { animation: none; } .phone-frame { animation: none; } .wa-chat-scroll { animation: none; } .trust-logos { animation: none; } .reveal { opacity: 1; transform: none; transition: none; } } /* ── Responsive: 960px ── */ @media (max-width: 960px) { section { padding: 5rem 5%; } .three-layers { padding: 5rem 5%; } .hero-inner { flex-direction: column; text-align: center; gap: 3rem; } .hero-text { max-width: 100%; text-align: center; } .hero-sub { margin-left: auto; margin-right: auto; } .hero-buttons { justify-content: center; } .hero-proof { justify-content: center; flex-wrap: wrap; } .hero-visual { flex: none; max-width: 280px; margin: 0 auto; } .hero-layers-strip { flex-direction: column; gap: 0.75rem; } .three-layers-grid { grid-template-columns: 1fr; max-width: 500px; margin-left: auto; margin-right: auto; } .worlds { grid-template-columns: 1fr; } .hiw-steps { grid-template-columns: 1fr 1fr; max-width: 600px; margin-left: auto; margin-right: auto; } .capabilities-grid { grid-template-columns: 1fr; max-width: 500px; margin-left: auto; margin-right: auto; } .validation-content { grid-template-columns: 1fr; text-align: center; } .validation-stats { max-width: 350px; margin: 0 auto; } .section-header { text-align: center; } } /* ── Responsive: 768px ── */ @media (max-width: 768px) { .top-banner { font-size: 0.72rem; padding: 0.5rem 3%; gap: 0.3rem; } .top-banner a { font-size: 0.68rem; padding: 0.15rem 0.6rem; } nav { top: 0; padding: 0.6rem 5%; } .logo-img { height: 34px; } .mobile-menu-btn { display: block; } .nav-links { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(10,10,10,0.98); flex-direction: column; justify-content: center; align-items: center; gap: 2.5rem; z-index: 999; } .nav-links.open { display: flex; } .nav-links a { font-size: 1.25rem; color: #ffffff; } .nav-cta { display: none; } .hero { padding: 6rem 5% 3rem; min-height: auto; } .hero h1 { font-size: 1.7rem; } .hero-sub { font-size: 0.95rem; } .hero-visual { max-width: 220px; margin: 0 auto; } .phone-frame { border-radius: 24px; padding: 6px; max-width: 220px; } .phone-screen { border-radius: 18px; } .phone-notch { width: 60px; height: 14px; border-radius: 0 0 8px 8px; } .wa-chat { height: 280px; } .epiphany-story { padding: 2rem 1.5rem; } .team-grid { grid-template-columns: 1fr; max-width: 350px; } .pricing-card { padding: 2rem 1.5rem; } .footer-cols { grid-template-columns: repeat(2, 1fr); gap: 2rem 1rem; } .footer-links { grid-template-columns: repeat(2, 1fr); } .section-header { text-align: center; } .products-layout { flex-direction: column; align-items: center; } .products-text { max-width: 100%; } .products-visual { flex: none; max-width: 240px; } .hero-proof { gap: 0.75rem; } .hero-proof span { font-size: 0.6rem; } } /* ── Product Layout ── */ .products-layout { display: flex; align-items: center; justify-content: center; gap: 3rem; max-width: 1100px; margin: 0 auto 3rem; flex-wrap: wrap; } .products-text { flex: 1; min-width: 300px; max-width: 550px; } .products-text h3 { color: var(--text-primary); font-size: 1.15rem; margin-bottom: 1rem; } .products-text h3 + ul { margin-bottom: 0; } .products-text h3:not(:first-child) { margin-top: 2rem; } .products-text a { color: var(--text-primary); text-decoration: underline; text-underline-offset: 3px; } .products-list { list-style: none; display: flex; flex-direction: column; gap: 0.6rem; } .products-list li { color: var(--text-secondary); font-size: 0.9rem; } .products-visual { flex: 0 0 300px; } /* ── Inline link styling ── */ .hiw-note a, .how-it-works a, .pricing-card a[href^="mailto"] { color: var(--text-primary); text-decoration: underline; text-underline-offset: 3px; font-weight: 600; } /* ── Section dividers — thin white line ── */ .three-layers::after, .demo-section::after, .how-it-works::after, .epiphany::after { content: ''; display: block; height: 1px; background: linear-gradient(90deg, transparent, rgba(0,0,0,0.08), transparent); margin-top: 4rem; max-width: 400px; margin-left: auto; margin-right: auto; } /* ── Top Banner (unused but kept for compat) ── */ .top-banner { display: none; } /* ── Inside Studio (eight in-product agents) ── */ .inside-studio { padding: 6rem 5% 5rem; max-width: 1200px; margin: 0 auto; } .inside-studio .section-header { margin-bottom: 3.5rem; } .inside-studio .section-header p { max-width: 70ch; margin-top: 1rem; } .agents-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; } /* Two named-surface cards (Studio / Noesis) on the homepage OS section */ .surface-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; max-width: 1000px; margin: 0 auto; } @media (max-width: 768px) { .surface-grid { grid-template-columns: 1fr; max-width: 500px; } } /* Product fleet: org-chart connector from the Alchemist box into the 4 cards */ .product-fleet { position: relative; margin-top: 3.5rem; } .product-fleet::before { /* vertical stem from the Alchemist box down to the bus */ content: ""; position: absolute; left: 50%; top: -3.5rem; width: 1px; height: calc(3.5rem - 22px); background: var(--text-primary); } .product-fleet::after { /* horizontal distribution bus above the cards */ content: ""; position: absolute; left: 11%; right: 11%; top: -22px; height: 1px; background: var(--border); } .product-fleet .agent-card { position: relative; } .product-fleet .agent-card::before { /* stub from the bus down into each card */ content: ""; position: absolute; left: 50%; top: -22px; width: 1px; height: 22px; background: var(--border); } @media (max-width: 1024px) { .product-fleet { margin-top: 2.5rem; } .product-fleet::before, .product-fleet::after, .product-fleet .agent-card::before { display: none; } } .agent-card { background: var(--bg-subtle); border: 1px solid var(--border); padding: 1.75rem 1.5rem; transition: border-color 0.3s ease, transform 0.3s ease; display: flex; flex-direction: column; min-height: 220px; } .agent-card:hover { border-color: var(--text-primary); transform: translateY(-2px); } .agent-card .agent-label { font-family: var(--font-mono); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.18em; color: var(--text-muted); margin-bottom: 1rem; } .agent-card h3 { font-size: 1.2rem; font-weight: 700; letter-spacing: -0.01em; margin-bottom: 0.5rem; color: var(--text-primary); } .agent-card p { font-size: 0.88rem; line-height: 1.5; color: var(--text-secondary); flex: 1; } .inside-footer { text-align: center; margin-top: 3rem; font-style: italic; color: var(--text-secondary); font-size: 1rem; max-width: 64ch; margin-left: auto; margin-right: auto; line-height: 1.55; } @media (max-width: 1024px) { .agents-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .agents-grid { grid-template-columns: 1fr; } .agent-card { min-height: auto; } } /* ── Hero H1 emphasis — Inter heavy, no serif ── */ .hero h1 em { font-family: var(--font-sans); font-style: normal; font-weight: var(--fw-extrabold); color: var(--fg-1); } /* ── Alchemist feature block (above 7 specialists) ── */ .alchemist-feature { background: var(--text-primary); color: #fff; padding: 2.5rem 2.5rem 2.25rem; margin: 0 5% 0; max-width: 1200px; margin-left: auto; margin-right: auto; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.6rem; position: relative; } .alchemist-feature .alchemist-tag { font-family: var(--font-mono); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255,255,255,0.55); margin-bottom: 0.4rem; } .alchemist-feature h3 { font-family: var(--font-sans); font-weight: var(--fw-extrabold); font-size: clamp(2.2rem, 4vw, 3.2rem); line-height: var(--lh-tighter); letter-spacing: var(--ls-tightest); color: #fff; font-style: normal; } .alchemist-feature p { font-size: 1.05rem; line-height: 1.6; color: rgba(255,255,255,0.85); max-width: 72ch; margin-left: auto; margin-right: auto; } .alchemist-feature p strong { color: #fff; font-weight: 500; } @media (max-width: 768px) { .alchemist-feature { padding: 1.75rem 1.5rem; margin-left: 6%; margin-right: 6%; } } /* ── Hero video (replaces phone mockup) ── */ .video-frame { background: #fff; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; box-shadow: 0 24px 48px -16px rgba(0,0,0,0.15), 0 8px 16px -4px rgba(0,0,0,0.08); line-height: 0; } .hero-video { width: 100%; height: auto; display: block; } .video-caption { text-align: center; margin-top: 1.25rem; } .watch-demo-btn { font-family: var(--font-mono); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-primary); background: transparent; border: 1px solid var(--border); padding: 0.65rem 1.1rem; border-radius: 4px; cursor: pointer; transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease; } .watch-demo-btn:hover { background: var(--text-primary); color: #fff; border-color: var(--text-primary); } /* Hero-visual sized for a ~60:40 text:visual split on desktop */ .hero-visual { flex: 0 0 440px !important; max-width: 440px; } /* ── Full demo modal ── */ .demo-modal { position: fixed; inset: 0; z-index: 10000; display: none; align-items: center; justify-content: center; padding: 4vh 4vw; } .demo-modal.open { display: flex; } .demo-modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.88); cursor: pointer; animation: fadeBackdrop 0.2s ease both; } @keyframes fadeBackdrop { from { opacity: 0; } to { opacity: 1; } } .demo-modal-inner { position: relative; width: 100%; max-width: 1280px; max-height: 92vh; z-index: 1; animation: scaleIn 0.25s ease both; } @keyframes scaleIn { from { transform: scale(0.96); opacity: 0; } to { transform: scale(1); opacity: 1; } } .demo-modal-inner video { width: 100%; height: auto; max-height: 92vh; background: #000; display: block; border-radius: 8px; } .demo-modal-close { position: absolute; top: -2.5rem; right: 0; background: transparent; border: none; color: #fff; font-size: 2rem; line-height: 1; cursor: pointer; padding: 0.25rem 0.6rem; font-weight: 300; opacity: 0.75; transition: opacity 0.2s ease; } .demo-modal-close:hover { opacity: 1; } @media (max-width: 768px) { .demo-modal { padding: 2vh 2vw; } .demo-modal-close { top: -2.5rem; } } /* ── Text-only hero — center the lone hero-text within hero-inner ── */ .hero-inner { justify-content: center; } .hero-text { max-width: 800px; } /* ═══════════════════════════════════════════════════════════ PREMIUM PASS — typography pump + dark section + motion ═══════════════════════════════════════════════════════════ */ /* ── A) Hero typography — premium tight ── */ .hero h1, .hero .hero-h1 { font-family: var(--font-sans); font-weight: var(--fw-extrabold); font-size: clamp(2.6rem, 5.5vw, 4.2rem); line-height: 1.1; letter-spacing: -0.035em; margin: 0 0 1.5rem; color: #ffffff; } .hero h1 em, .hero .hero-h1 em { font-style: normal; font-family: var(--font-sans); font-weight: var(--fw-extrabold); color: #ffffff; } /* Dream line — the claim. Stands alone, bold, with air below. */ .hero-dream { font-family: var(--font-sans); font-weight: 700; font-size: clamp(1.1rem, 1.8vw, 1.32rem); color: #ffffff; letter-spacing: -0.01em; margin: 0 auto 1.9rem; } /* Vehicle line — the resolution. Smaller, quieter; the comment below annotates it, so the two sit tight as one unit. */ .hero-vehicle { font-family: var(--font-sans); font-weight: 400; font-size: clamp(0.98rem, 1.4vw, 1.1rem); color: rgba(255,255,255,0.55); margin: 0 auto 0.55rem; } .hero-bridge { font-family: var(--font-mono); font-size: clamp(0.72rem, 1vw, 0.8rem); font-weight: 400; letter-spacing: 0.03em; color: rgba(255,255,255,0.34); margin: 0 auto 2.6rem; } .hero-sub-headline { font-family: var(--font-sans); font-style: normal; font-weight: 400; font-size: clamp(1.05rem, 1.6vw, 1.2rem); color: rgba(255,255,255,0.5); line-height: 1.6; max-width: 52ch; margin: 0 auto 1.4rem; letter-spacing: 0; } /* Hero vertical spacing — content centered in viewport */ .hero { padding: 0 5%; min-height: 100vh; display: flex; align-items: center; justify-content: center; } /* ── B) Dark Agency Protocol section ── */ .three-layers { background: #0a0a0a; color: rgba(255,255,255,0.78); padding: 7rem 5% 6rem !important; position: relative; overflow: hidden; } .three-layers::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,0.05) 1px, transparent 1px); background-size: 32px 32px; pointer-events: none; z-index: 0; } .three-layers > * { position: relative; z-index: 1; } .three-layers .section-header p, .three-layers .section-header h2 { color: #fff; } .three-layers .section-header h2 { font-family: var(--font-sans); font-weight: var(--fw-bold); font-style: normal; letter-spacing: var(--ls-tight); font-size: clamp(2.2rem, 4.5vw, 3.6rem); line-height: var(--lh-tight); } .three-layers .section-header > p { color: rgba(255,255,255,0.7); max-width: 64ch; margin: 1rem auto 0; } .three-layers .section-header > p::before { background: rgba(255,255,255,0.3); } .three-layers .section-label, .three-layers p.section-label { color: rgba(255,255,255,0.5); } .three-layers .layer-card { background: rgba(255,255,255,0.035); border: none; color: rgba(255,255,255,0.75); } .three-layers .layer-card .layer-card-icon { color: rgba(255,255,255,0.5); font-family: var(--font-mono); font-weight: 500; } .three-layers .layer-card .layer-label { color: rgba(255,255,255,0.5); } .three-layers .layer-card h3 { color: #fff; } .three-layers .layer-card p { color: rgba(255,255,255,0.7); } /* Override the inline style="color: var(--text-white)" which becomes invisible on dark bg */ .three-layers .layer-card p strong[style] { color: #fff !important; } .three-layers .layer-card a { color: rgba(255,255,255,0.7); border-bottom-color: rgba(255,255,255,0.3); } .three-layers .layer-card a:hover { color: #fff; border-bottom-color: #fff; } .three-layers .layers-footnote { color: rgba(255,255,255,0.6); } .three-layers .layers-footnote strong { color: #fff; } .three-layers .layer-card:hover { background: rgba(255,255,255,0.05); } /* ── D) Hover micro-interactions on all card surfaces ── */ .layer-card, .agent-card, .cap-card, .hiw-step, .world-card, .identity-layer { transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.3s ease, box-shadow 0.3s ease, background 0.3s ease; } .layer-card:hover, .agent-card:hover, .cap-card:hover, .hiw-step:hover { transform: translateY(-3px); } .agent-card:hover { border-color: var(--text-primary); box-shadow: 0 8px 24px -8px rgba(0,0,0,0.12); } .cap-card:hover { border-color: var(--border-hover); } .identity-layer { transition: transform 0.25s ease, border-color 0.25s ease; } .identity-layer:hover { transform: translateY(-2px); border-color: var(--border-hover); } /* old scroll-reveal block removed — see line ~290 for unified .reveal / .reveal.visible */ /* ── Dark-section text safety net — catch plain // that fall back to global black color, plus override any inline style attr ── */ .three-layers strong, .three-layers b, .three-layers em, .alchemist-feature strong, .alchemist-feature b, .alchemist-feature em { color: #fff !important; } /* ── Dated operational status line below hero proof bar ── */ .hero-status { margin-top: 1.5rem; font-family: var(--font-mono); font-size: 0.7rem; font-weight: 400; letter-spacing: 0.08em; color: var(--text-muted); font-style: normal; } /* ═══════════════════════════════════════════════════════════ TYPOGRAPHY: replace italics with weight contrast (brand preference) ═══════════════════════════════════════════════════════════ */ /* Global em — was browser-default italic; now bold non-italic */ em { font-style: normal; font-weight: 600; } /* Hero H1 — Inter ExtraBold per canonical design skill. The em inside H1 is emphasis-via-weight, not via serif. */ .hero h1 em, .hero .hero-h1 em { font-style: normal !important; font-family: var(--font-sans) !important; font-weight: var(--fw-extrabold); /* 800 — full hero weight */ letter-spacing: var(--ls-tightest); } /* Hero sub-headline — Inter, sentence weight */ .hero-sub-headline { font-style: normal !important; font-family: var(--font-sans) !important; font-weight: var(--fw-medium); } /* Three Layers (Agency Protocol) dark section H2 — Inter bold per skill */ .three-layers .section-header h2 { font-style: normal !important; font-family: var(--font-sans) !important; font-weight: var(--fw-bold); } /* Layers footnote — was italic */ .layers-footnote { font-style: normal !important; font-weight: 400; } .layers-footnote strong { font-style: normal !important; font-weight: 600; } /* Alchemist feature card h3 — Inter semibold per canonical skill (Newsreader is reserved for pull quotes only) */ .alchemist-feature h3 { font-style: normal !important; font-family: var(--font-sans) !important; font-weight: var(--fw-semibold); letter-spacing: var(--ls-tight); } /* Arm card tagline (if any) — was italic */ .arm-tagline { font-style: normal !important; font-weight: 500; } /* General CTA h2 em treatment — surrounding h2 is weight 700, so em needs to be heavier to register as emphasis */ .cta-section h2 em { font-style: normal !important; font-weight: 900; } /* Inside-footer italic — was italic */ .inside-footer { font-style: normal !important; font-weight: 400; } /* Case-cta italic em treatments (if any) — be safe */ .case-cta h2 em, .general-cta h2 { font-style: normal !important; font-weight: 600; } /* ═══════════════════════════════════════════════════════════ HERO LAYOUT FIX: keep H1 on one line, eliminate empty right panel ═══════════════════════════════════════════════════════════ */ /* Reduce H1 from huge to large — fits "Meet Alchemist." on one line at common viewports. At 6rem (96px) max, "Meet Alchemist." needs ~825px width which fits comfortably in 920px hero-text. */ .hero h1, .hero .hero-h1 { font-size: clamp(2.8rem, 6.5vw, 6rem) !important; line-height: 1.02 !important; margin: 0.5rem 0 1.25rem !important; } /* Widen hero-text so it doesn't leave a gaping empty right side on wide viewports. Center within the 1200px hero-inner via margin auto. */ .hero-text { max-width: 960px !important; margin-left: auto !important; margin-right: auto !important; width: 100%; } /* Sub-headline — let it sit on one line at common viewports. "The AI agent that builds and runs your enterprise agent fleet." is ~61 chars. */ .hero-sub-headline { max-width: 64ch !important; margin-bottom: 1.5rem !important; } /* Hero-inner now contains only hero-text (no visual panel since we removed video). Abandon flex-row; let hero-text center via its own margin auto. */ .hero-inner { display: block !important; } /* ═══════════════════════════════════════════════════════════ HERO — single-column text-only layout, centered Inscription treatment: light caps, wide-tracked — a proclamation, not a pitch. Weight 300 minimum for stroke legibility on dark. ═══════════════════════════════════════════════════════════ */ .hero-inner { display: block !important; max-width: 980px; margin: 0 auto; text-align: center; } .hero .hero-h1 { font-size: clamp(1.65rem, 3.6vw, 2.7rem) !important; line-height: 1.4 !important; font-weight: 300 !important; letter-spacing: 0.09em !important; text-transform: uppercase !important; } @media (max-width: 600px) { .hero .hero-h1 br { display: none; } } /* CTA hierarchy — one solid primary, quiet ghosts */ .hero-buttons .btn-primary { box-shadow: none; } /* TMB schematic */ .tmb-diagram { width: 100%; height: auto; display: block; overflow: visible; } .tmb-diagram .d-cap { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; fill: var(--text-muted); text-transform: uppercase; } .tmb-diagram .d-num { font-family: var(--font-mono); font-size: 11px; fill: var(--text-muted); } .tmb-diagram .d-title { font-family: var(--font-sans); font-size: 16px; font-weight: 700; fill: var(--text-primary); } .tmb-diagram .d-sub { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.02em; fill: var(--text-secondary); } .tmb-diagram .d-packet { font-family: var(--font-mono); font-size: 9px; font-weight: 500; letter-spacing: 0.08em; fill: var(--text-primary); } /* CS-packet glides down the spine: CNE -> Exec -> NC and back */ .tmb-packet { animation: tmbFlow 5s ease-in-out infinite; transform-box: view-box; } @keyframes tmbFlow { 0%, 8% { transform: translateY(0); } 46%, 54% { transform: translateY(252px); } 92%, 100% { transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .tmb-packet { animation: none; } .hero-visual { animation: none; } } @media (max-width: 980px) { .hero-inner { flex-direction: column !important; gap: 2.5rem; } .hero-buttons { justify-content: center; } } /* ═══════════════════════════════════════════════════════════ INSIDE STUDIO — orchestration diagram (Alchemist + 7 specialists) ═══════════════════════════════════════════════════════════ */ .studio-orchestration { margin: 0 5% 2.5rem; color: #000; } .orch-diagram { width: 100%; height: auto; display: block; overflow: visible; } .orch-diagram .orch-hub-title { font-family: var(--font-sans); font-size: 22px; font-weight: 800; letter-spacing: -0.02em; fill: #fff; } .orch-diagram .orch-hub-sub { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.14em; fill: rgba(255,255,255,0.7); } .orch-diagram .orch-phase { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.16em; fill: var(--text-muted); } .orch-diagram .orch-num { font-family: var(--font-mono); font-size: 11px; fill: var(--text-muted); } .orch-diagram .orch-name { font-family: var(--font-sans); font-size: 15px; font-weight: 700; fill: var(--text-primary); } .orch-diagram .orch-role { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.02em; fill: var(--text-secondary); } .orch-diagram .orch-caption { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em; fill: var(--text-muted); } .orch-diagram .orch-nodes rect[fill="none"] { transition: stroke 0.2s ease; } @media (max-width: 760px) { /* On small screens the 7-wide row is unreadable — hide the diagram, the specialist cards below carry the same content. */ .studio-orchestration { display: none; } }