/* Self-hosted Inter (SIL Open Font License). Variable font — one file covers the whole 100–900 weight range used across the site (400 body, 500/600/700 UI + headings). Latin subset from @fontsource-variable. `font-display: swap` shows the system fallback immediately, then swaps to Inter once loaded (no invisible-text flash). Served from our own origin, so the existing `font-src 'self'` CSP already allows it — no header change needed. Why self-host instead of relying on the OS font: Apple's San Francisco can't legally be web-embedded, and the previous stack's `-apple-system` only gave SF to Apple visitors while everyone else got a grab-bag of system fallbacks. Inter (a near-twin of SF, designed for screens) gives every platform the same typeface. */ @font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/fonts/inter-latin-wght-normal.woff2") format("woff2"); } @font-face { font-family: "Inter"; font-style: italic; font-weight: 100 900; font-display: swap; src: url("/fonts/inter-latin-wght-italic.woff2") format("woff2"); } :root { --bg-0: #07060f; --bg-1: #0f0c1c; --bg-2: #15112a; --text: #f1ecf7; --text-muted: #a89cb8; --text-dim: #6b5f7f; --accent: #d44a8b; --accent-warm: #fcd45a; --accent-cool: #5cd0d6; --border: rgba(255, 255, 255, 0.08); --border-strong: rgba(255, 255, 255, 0.16); --card-bg: rgba(255, 255, 255, 0.04); --content-max: 1120px; --radius-sm: 8px; --radius-md: 14px; --radius-lg: 22px; --shadow-lg: 0 24px 60px -20px rgba(0, 0, 0, 0.6); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { font-family: "Inter", -apple-system, BlinkMacSystemFont, system-ui, "Helvetica Neue", sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; background: var(--bg-0); color: var(--text); line-height: 1.55; overflow-x: hidden; } /* * Build-mode CTA toggle. * * `marketing/build.sh` sets `` to either `notify` * (pre-launch, waitlist CTA visible, hides buy buttons) or `buy` * (post-launch, buy buttons visible, hides waitlist CTA + section). * * Default with no/unknown data-mode is the safe one: behave like * `notify`. So if the build script ever fails to substitute the * placeholder, the page degrades to pre-launch state rather than * exposing buy buttons pointing at a placeholder URL. */ body[data-mode="buy"] .notify-only { display: none !important; } body:not([data-mode="buy"]) .buy-only { display: none !important; } /* Animated background blobs — deliberately slow and quiet */ .bg-decor { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; } .bg-decor::before, .bg-decor::after { content: ""; position: absolute; border-radius: 50%; filter: blur(120px); opacity: 0.55; animation: drift 28s ease-in-out infinite alternate; } .bg-decor::before { width: 720px; height: 720px; background: radial-gradient(circle, #6b1f80, transparent 70%); top: -180px; left: -200px; } .bg-decor::after { width: 640px; height: 640px; background: radial-gradient(circle, #c43a78, transparent 70%); bottom: -200px; right: -180px; animation-delay: -10s; } @keyframes drift { 0% { transform: translate(0, 0) scale(1); } 100% { transform: translate(60px, -40px) scale(1.08); } } @media (prefers-reduced-motion: reduce) { .bg-decor::before, .bg-decor::after { animation: none; } } /* Layout */ .container { max-width: var(--content-max); margin: 0 auto; padding: 0 24px; } nav.top { padding: 24px 0; display: flex; align-items: center; justify-content: space-between; gap: 24px; } nav.top .brand { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 1.05rem; letter-spacing: 0.01em; color: var(--text); text-decoration: none; } nav.top .brand .mark { width: 28px; height: 28px; background: url('/icon.svg') center/contain no-repeat; } nav.top .links { display: flex; gap: 20px; } nav.top .links a { color: var(--text-muted); text-decoration: none; font-size: 0.95rem; transition: color 120ms ease; } nav.top .links a:hover { color: var(--text); } /* Hero */ .hero { padding: 80px 0 64px; text-align: center; } .hero .eyebrow { display: inline-block; padding: 6px 14px; border-radius: 999px; background: rgba(212, 74, 139, 0.12); color: var(--accent); font-size: 0.85rem; font-weight: 500; border: 1px solid rgba(212, 74, 139, 0.3); margin-bottom: 24px; } .hero h1 { font-size: clamp(2.4rem, 6vw, 4.4rem); line-height: 1.04; margin: 0 0 24px; font-weight: 700; letter-spacing: -0.02em; background: linear-gradient(180deg, var(--text), #c8b8da); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .hero .lede { font-size: clamp(1.05rem, 1.8vw, 1.3rem); color: var(--text-muted); max-width: 620px; margin: 0 auto 36px; } .cta-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; } .btn { display: inline-flex; align-items: center; gap: 8px; padding: 14px 22px; border-radius: 999px; font-weight: 600; font-size: 0.98rem; text-decoration: none; border: 1px solid transparent; transition: transform 140ms ease, background 140ms ease, box-shadow 140ms ease; } .btn-primary { background: linear-gradient(180deg, #e25691, #b53872); color: white; box-shadow: 0 8px 24px -8px rgba(212, 74, 139, 0.5); } .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 12px 30px -8px rgba(212, 74, 139, 0.6); } .btn-secondary { background: transparent; color: var(--text); border-color: var(--border-strong); } .btn-secondary:hover { background: var(--card-bg); } /* * Hero preview — the animated Inferno video beneath the CTA row. * The MP4 itself is rendered at 480×270 by the exporter; we let it * scale up to ~880 px in the layout. The `poster` PNG (same * mid-frame, ~130 KB) renders instantly while the ~1 MB MP4 streams * in, so the hero never shows an empty box. The dark gradient frame * matches the visualizer's own backdrop so the edge blends into the * page. */ .hero-preview { margin: 56px auto 0; max-width: 880px; padding: 0; } .hero-preview .hero-video, .hero-preview img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: var(--radius-md); border: 1px solid var(--border); box-shadow: 0 24px 60px -24px rgba(212, 74, 139, 0.45), 0 8px 24px -8px rgba(0, 0, 0, 0.5); background: var(--bg-1, #07060f); object-fit: cover; } .hero-preview figcaption { margin-top: 14px; text-align: center; color: var(--text-muted); font-size: 0.9rem; letter-spacing: 0.02em; } /* Section heading */ section { padding: 64px 0; } section h2 { font-size: clamp(1.6rem, 3.5vw, 2.4rem); margin: 0 0 12px; letter-spacing: -0.015em; font-weight: 700; } section .section-lede { color: var(--text-muted); max-width: 620px; margin: 0 0 36px; } /* Visualizer cards */ .viz-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; } .viz-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 14px; transition: transform 160ms ease, border-color 160ms ease; } .viz-card:hover { transform: translateY(-3px); border-color: var(--border-strong); } /* * Visualizer thumbnails are `