/* Self-hosted fonts (latin subset) — no third-party request to Google Fonts, so the landing transfers no visitor IP to a third party (see openspec landing-privacy-and-legal). Weights match what the design + WebGL labels use. */ @font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 400; font-display: swap; src: url("./fonts/space-grotesk-400.woff2") format("woff2"); } @font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 500; font-display: swap; src: url("./fonts/space-grotesk-500.woff2") format("woff2"); } @font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 600; font-display: swap; src: url("./fonts/space-grotesk-600.woff2") format("woff2"); } @font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 700; font-display: swap; src: url("./fonts/space-grotesk-700.woff2") format("woff2"); } @font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("./fonts/jetbrains-mono-400.woff2") format("woff2"); } @font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("./fonts/jetbrains-mono-500.woff2") format("woff2"); } @font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("./fonts/ibm-plex-mono-400.woff2") format("woff2"); } @font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("./fonts/ibm-plex-mono-500.woff2") format("woff2"); } @font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 600; font-display: swap; src: url("./fonts/ibm-plex-mono-600.woff2") format("woff2"); } :root { --bg: #08080a; --fg: #f2f2ef; --accent: #a9a0ff; --mono: "JetBrains Mono", monospace; --sans: "Space Grotesk", "Helvetica Neue", sans-serif; } * { margin: 0; padding: 0; box-sizing: border-box; } /* Single scroll root: only scrolls. overflow on both html and body creates two scroll containers and intermittently swallows wheel/scroll. */ html { scroll-behavior: smooth; overflow-x: hidden; overscroll-behavior-y: none; } html, body { min-height: 100%; background: var(--bg); color: var(--fg); font-family: var(--sans); -webkit-font-smoothing: antialiased; } a { color: inherit; text-decoration: none; } ::selection { background: rgba(169, 160, 255, 0.32); } ::-webkit-scrollbar { width: 0; height: 0; } .mono { font-family: var(--mono); } @keyframes vsPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.3; transform: scale(0.7); } } /* ===================== WEBGL WALL ===================== */ #scene { position: fixed; inset: 0; z-index: 0; cursor: grab; /* touch: vertical swipes scroll the page; the wall pans on horizontal drag and on mouse drag (touch-action does not affect mouse input). */ touch-action: pan-y; } #scene.dragging { cursor: grabbing; } #scene.hovering { cursor: pointer; } .vignette { position: fixed; inset: 0; pointer-events: none; z-index: 1; background: radial-gradient(ellipse 130% 110% at 50% 45%, transparent 55%, rgba(0, 0, 0, 0.55) 82%, rgba(0, 0, 0, 0.92) 100%), linear-gradient(to bottom, rgba(0, 0, 0, 0.55), transparent 14%, transparent 86%, rgba(0, 0, 0, 0.65)); } /* fades the fixed wall to black as the page scrolls past the hero (JS-driven) */ #wall-fade { position: fixed; inset: 0; z-index: 1; pointer-events: none; background: var(--bg); opacity: 0; } /* ===================== CHROME ===================== */ .chrome-top { position: fixed; top: 0; left: 0; right: 0; /* above the persona overlay (.detail z-index: 20) so "Start free" stays reachable while a persona is open */ z-index: 24; display: flex; align-items: center; justify-content: space-between; padding: clamp(16px, 2.4vw, 26px) clamp(18px, 3vw, 34px); pointer-events: none; } .chrome-top > * { pointer-events: auto; } .brand { transition: opacity 0.4s ease; } /* the overlay's own close button moves to the top-left; hide the brand while a persona is open so the two don't collide */ body:has(#detail[aria-hidden="false"]) .brand { opacity: 0; pointer-events: none; } .brand { display: flex; align-items: center; gap: 11px; } /* ghost glyph — shared /ghost.svg, sized per placement */ .brand-ghost { display: block; width: 22px; height: 25px; } .brand-ghost.sm { width: 18px; height: 20px; } .brand-name { font-weight: 600; font-size: 18px; letter-spacing: -0.01em; } .chrome-nav { position: fixed; left: 0; right: 0; bottom: calc(clamp(16px, 2.5vw, 26px) + env(safe-area-inset-bottom)); z-index: 6; display: flex; align-items: center; justify-content: center; gap: 12px; padding: 0 16px; pointer-events: none; } .nav-shell { pointer-events: auto; display: flex; align-items: center; gap: 2px; padding: 6px; background: rgba(28, 28, 34, 0.55); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%); border: 1px solid rgba(255, 255, 255, 0.13); border-radius: 999px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 14px 34px -16px rgba(0, 0, 0, 0.7); } .nav-pill { padding: 9px 18px; border-radius: 999px; font-size: 14px; color: rgba(255, 255, 255, 0.82); white-space: nowrap; /* active state cross-fades in place — no moving indicator */ transition: background-color 0.25s ease, color 0.25s ease; } .nav-pill:not(.nav-pill--active):hover { background-color: rgba(255, 255, 255, 0.08); } .nav-pill--active { background-color: #f4f4f2; color: #0b0b0d; } /* ===================== BUTTONS ===================== */ .btn-light, .btn-ghost { display: inline-flex; align-items: center; justify-content: center; height: 44px; padding: 0 22px; font-size: 14px; border-radius: 999px; box-shadow: 0 10px 26px -14px rgba(0, 0, 0, 0.55); transition: background 0.2s; white-space: nowrap; } .btn-light { background: #f4f4f2; color: #0b0b0d; font-weight: 600; border: 1px solid transparent; } .btn-light:hover { background: #fff; } .btn-ghost { background: rgba(30, 30, 36, 0.5); backdrop-filter: blur(16px) saturate(160%); -webkit-backdrop-filter: blur(16px) saturate(160%); border: 1px solid rgba(255, 255, 255, 0.15); color: #f2f2ef; font-weight: 500; } .btn-ghost:hover { background: rgba(44, 44, 52, 0.6); } .btn-sm { height: auto; padding: 11px 18px; box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.55); } .btn-lg { height: auto; padding: 16px 32px; font-size: 17px; box-shadow: 0 14px 40px -12px rgba(0, 0, 0, 0.6); } /* ===================== CONTENT ===================== */ .content { position: relative; z-index: 2; pointer-events: none; } /* ---------- hero ---------- */ .hero { position: relative; /* dvh tracks the *visible* viewport so the flex-end panel isn't pushed under the fixed bottom nav by the mobile URL bar (100vh = the larger viewport). */ min-height: 100dvh; display: flex; align-items: flex-end; justify-content: flex-start; padding: 0 clamp(20px, 5vw, 72px) clamp(104px, 13vh, 150px); } .hero-panel { pointer-events: auto; max-width: 392px; padding: 20px 22px; border-radius: 18px; background: rgba(10, 10, 13, 0.3); backdrop-filter: blur(13px) saturate(150%); -webkit-backdrop-filter: blur(13px) saturate(150%); border: 1px solid rgba(255, 255, 255, 0.07); box-shadow: 0 24px 64px -34px rgba(0, 0, 0, 0.85); } .eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255, 255, 255, 0.62); white-space: nowrap; } .eyebrow-dot { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); animation: vsPulse 2.4s ease-in-out infinite; } .hero-title { font-weight: 700; font-size: clamp(25px, 3.2vw, 40px); line-height: 1.03; letter-spacing: -0.03em; margin-top: 12px; text-shadow: 0 2px 20px rgba(0, 0, 0, 0.55); } .hero-sub { font-size: clamp(13px, 1.3vw, 15px); line-height: 1.55; color: rgba(255, 255, 255, 0.78); margin-top: 11px; max-width: 40ch; text-shadow: 0 1px 12px rgba(0, 0, 0, 0.55); } .hero-cta { display: flex; gap: 10px; margin-top: 20px; flex-wrap: wrap; } /* ---------- generic section + glass panel ---------- */ .section { position: relative; padding: clamp(40px, 7vh, 90px) clamp(18px, 5vw, 48px); } .panel { max-width: 1120px; margin: 0 auto; pointer-events: auto; padding: clamp(30px, 4vw, 60px); border-radius: 32px; background: rgba(15, 15, 19, 0.6); backdrop-filter: blur(30px) saturate(150%); -webkit-backdrop-filter: blur(30px) saturate(150%); border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 40px 100px -40px rgba(0, 0, 0, 0.85); } .section-kicker { font-family: var(--mono); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255, 255, 255, 0.5); } .accent { color: var(--accent); } .section-title { font-weight: 700; font-size: clamp(30px, 4.4vw, 54px); line-height: 1.02; letter-spacing: -0.028em; margin-top: 16px; } .section-title.narrow { max-width: 18ch; } .section-lead { font-size: clamp(15px, 1.55vw, 17px); line-height: 1.6; color: rgba(255, 255, 255, 0.74); margin-top: 18px; max-width: 64ch; } .bright { color: #fff; } .section-closer { margin-top: 30px; font-weight: 500; font-size: clamp(17px, 2vw, 22px); letter-spacing: -0.01em; color: rgba(255, 255, 255, 0.92); } .section-closer.narrow { max-width: 40ch; color: rgba(255, 255, 255, 0.88); } .section-closer .muted { color: rgba(255, 255, 255, 0.5); } .section-cta { display: flex; gap: 10px; margin-top: 26px; flex-wrap: wrap; } /* ---------- section 01 product demo video ---------- */ /* The figure owns the aspect ratio; the video just fills it. Keeping the ratio on the box (not the