@import url("https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=DM+Serif+Display:ital@0;1&family=Manrope:wght@400;500;600;700&display=swap");

:root { color-scheme: dark; --void: #050608; --night: #0a0c10; --panel: rgba(18, 20, 23, .72); --gold: #d5ad62; --gold-bright: #f0d394; --ink: #f1eee7; --muted: #aaa69c; --quiet: #6d706f; --line: rgba(218, 189, 123, .2); --cool-line: rgba(198, 207, 219, .14); --serif: "DM Serif Display", Georgia, serif; --sans: Manrope, Inter, system-ui, sans-serif; --mono: "DM Mono", ui-monospace, monospace; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { background: var(--void); color: var(--ink); font-family: var(--sans); margin: 0; min-width: 320px; overflow-x: hidden; }
body::before, body::after { content: ""; pointer-events: none; position: fixed; z-index: 0; }
body::before { background-image: linear-gradient(rgba(255,255,255,.022) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px); background-size: 118px 118px; inset: 0; mask-image: linear-gradient(to bottom, black, transparent 70%); opacity: .32; }
body::after { background: radial-gradient(circle at 76% 14%, rgba(185, 132, 46, .1), transparent 27%), radial-gradient(circle at 15% 58%, rgba(54, 57, 79, .12), transparent 30%); inset: 0; }
a { color: inherit; text-decoration: none; }
button { color: inherit; font: inherit; }
button:focus-visible, a:focus-visible { outline: 1px solid var(--gold-bright); outline-offset: 5px; }
.page-width { margin: 0 auto; max-width: 1320px; padding-left: clamp(24px, 5vw, 82px); padding-right: clamp(24px, 5vw, 82px); position: relative; width: 100%; }
.landing-hero { background: radial-gradient(ellipse at 72% 45%, rgba(185, 144, 67, .085), transparent 35%), linear-gradient(115deg, #050608 25%, #090b10 100%); min-height: min(900px, 100vh); overflow: hidden; position: relative; z-index: 1; }
.landing-nav { align-items: center; display: flex; justify-content: space-between; margin: 0 auto; max-width: 1470px; padding: 30px clamp(24px, 5vw, 82px); position: relative; z-index: 5; }
.wordmark { align-items: center; display: inline-flex; gap: 12px; }
.wordmark-mark { align-items: center; border: 1px solid var(--gold); color: var(--gold-bright); display: inline-flex; font: 500 12px/1 var(--mono); height: 32px; justify-content: center; letter-spacing: -.1em; width: 32px; }
.wordmark strong, .wordmark small { display: block; }
.wordmark strong { font: 600 13px/1 var(--sans); letter-spacing: .2em; }
.wordmark small { color: var(--quiet); font: 400 8px/1 var(--mono); letter-spacing: .16em; margin-top: 6px; }
.primary-nav { align-items: center; display: flex; gap: clamp(18px, 3vw, 45px); }
.primary-nav a, .nav-toggle { color: var(--muted); font-size: 11px; letter-spacing: .08em; transition: color .25s ease; }
.primary-nav a:hover { color: var(--gold-bright); }
.nav-cta { border-bottom: 1px solid var(--gold); color: var(--gold-bright) !important; padding: 0 0 8px; }
.nav-cta span { font-size: 15px; margin-left: 6px; }
.nav-toggle { background: none; border: 0; display: none; }
.hero-ruled-line { background: var(--cool-line); height: 1px; position: absolute; top: 53%; width: 22vw; }.hero-ruled-line-left { left: 0; }.hero-ruled-line-right { right: 0; }
.hero-content { align-items: center; display: grid; gap: 4vw; grid-template-columns: minmax(360px, .86fr) minmax(450px, 1.14fr); min-height: 690px; padding-bottom: 55px; padding-top: 55px; }
.hero-copy { max-width: 610px; min-width: 0; position: relative; z-index: 2; }
.eyebrow { align-items: center; color: var(--gold); display: flex; font: 500 10px/1.4 var(--mono); gap: 12px; letter-spacing: .18em; margin: 0 0 26px; text-transform: uppercase; }
.eyebrow-line { background: var(--gold); display: inline-block; height: 1px; width: 29px; }
.hero-kicker { color: var(--quiet); font: 400 10px var(--mono); letter-spacing: .16em; margin-bottom: 20px; }
h1, h2, h3, p { margin-top: 0; }
h1, h2 { max-width: 100%; overflow-wrap: anywhere; }
h1, h2 { font: 400 clamp(53px, 6.8vw, 98px)/.94 var(--serif); letter-spacing: -.055em; margin-bottom: 30px; }
h1 em, h2 em { color: var(--gold-bright); font-style: italic; }
.hero-intro { color: var(--muted); font-size: 16px; line-height: 1.8; max-width: 450px; }
.hero-actions { align-items: center; display: flex; gap: 30px; margin-top: 40px; }
.button { align-items: center; display: inline-flex; font-size: 11px; gap: 18px; letter-spacing: .12em; padding: 16px 22px; text-transform: uppercase; transition: background .25s ease, border-color .25s ease, transform .25s ease; }
.button-primary { background: var(--gold); color: #16130d; }.button-primary:hover { background: var(--gold-bright); transform: translateY(-2px); }.button span { font-size: 18px; line-height: 0; }
.text-link { color: var(--muted); font-size: 11px; letter-spacing: .09em; }.text-link span { color: var(--gold); font-size: 16px; margin-left: 9px; }.text-link:hover { color: var(--ink); }
.hero-note { color: var(--quiet); font: 400 10px/1.5 var(--mono); letter-spacing: .06em; margin-top: 64px; max-width: 390px; text-transform: uppercase; }.status-pip { background: var(--gold); border-radius: 50%; box-shadow: 0 0 11px var(--gold); display: inline-block; height: 5px; margin-right: 8px; width: 5px; }
.orb-stage { height: min(620px, 62vw); min-height: 490px; position: relative; }
#network-canvas { height: 100%; inset: 0; position: absolute; width: 100%; }
.orb-glow { background: radial-gradient(circle, rgba(239, 193, 99, .19) 0, rgba(185, 128, 39, .07) 28%, transparent 67%); border-radius: 50%; filter: blur(14px); height: 67%; left: 16.5%; position: absolute; top: 16.5%; width: 67%; }
.orb-core { align-items: center; background: radial-gradient(circle at 40% 35%, rgba(255, 229, 168, .45), rgba(152, 101, 25, .22) 17%, rgba(17, 17, 19, .88) 61%, rgba(8, 9, 12, .97) 100%); border: 1px solid rgba(232, 193, 111, .62); border-radius: 50%; box-shadow: inset -20px -18px 45px rgba(0,0,0,.6), inset 13px 14px 30px rgba(255,235,180,.12), 0 0 32px rgba(193, 138, 48, .16); display: flex; height: 36%; justify-content: center; left: 32%; position: absolute; top: 32%; width: 36%; }
.orb-core::before, .orb-core::after { border: 1px solid rgba(235, 198, 122, .24); border-radius: 50%; content: ""; position: absolute; }.orb-core::before { inset: 10%; }.orb-core::after { border-color: rgba(235, 198, 122, .12); inset: 24%; }
.orb-core span { color: rgba(249, 221, 159, .84); font: 500 18px var(--mono); letter-spacing: -.12em; position: relative; z-index: 1; }.orb-core i { background: var(--gold-bright); border-radius: 50%; box-shadow: 0 0 20px 5px rgba(240, 209, 139, .38); height: 5px; position: absolute; right: 28%; top: 23%; width: 5px; }
.orbit { border: 1px solid rgba(217, 181, 106, .27); border-radius: 50%; height: 58%; left: 21%; position: absolute; top: 21%; width: 58%; }.orbit-one { transform: rotate(32deg) scaleX(.35); }.orbit-two { border-color: rgba(177, 190, 202, .18); transform: rotate(-34deg) scaleX(.35); }
.orb-axis { background: rgba(217,181,106,.2); position: absolute; }.axis-horizontal { height: 1px; left: 11%; right: 11%; top: 50%; }.axis-vertical { bottom: 11%; left: 50%; top: 11%; width: 1px; }
.orb-node { background: var(--gold-bright); border-radius: 50%; box-shadow: 0 0 10px 2px rgba(240,209,139,.5); height: 4px; position: absolute; width: 4px; }.node-a { left: 17%; top: 39%; }.node-b { right: 14%; top: 53%; }.node-c { left: 57%; top: 10%; }
.orb-caption, .orb-coordinate { color: var(--quiet); font: 400 9px/1.5 var(--mono); letter-spacing: .09em; position: absolute; text-transform: uppercase; }.orb-caption { bottom: 15%; left: 12%; display: flex; gap: 10px; }.orb-caption span { color: var(--gold); }.orb-caption p { margin: 0; }.orb-caption b { color: var(--muted); font-weight: 400; }.orb-coordinate { right: 8%; top: 17%; }
.hero-index { align-items: center; bottom: 26px; color: var(--quiet); display: flex; font: 400 9px var(--mono); gap: 13px; letter-spacing: .1em; }.index-rule { background: var(--line); height: 1px; width: 55px; }
.signal-strip { border-bottom: 1px solid var(--cool-line); border-top: 1px solid var(--cool-line); position: relative; z-index: 1; }.signal-items { align-items: center; color: var(--quiet); display: flex; font: 400 10px var(--mono); justify-content: space-between; letter-spacing: .22em; padding-bottom: 18px; padding-top: 18px; }.signal-items i { background: var(--gold); border-radius: 50%; height: 3px; opacity: .7; width: 3px; }
.examination-section { padding-bottom: 150px; padding-top: 160px; }.section-intro { display: grid; gap: 40px; grid-template-columns: 1fr 1.15fr 1fr; }.section-intro .eyebrow { align-self: start; }.section-intro h2 { font-size: clamp(47px, 5.5vw, 78px); margin: 0; }.section-intro > p:last-child { align-self: end; color: var(--muted); font-size: 14px; line-height: 1.8; margin-bottom: 9px; max-width: 310px; }
.examination-shell { background: linear-gradient(125deg, rgba(27,29,31,.92), rgba(12,15,20,.88)); border: 1px solid var(--cool-line); box-shadow: 0 30px 80px rgba(0,0,0,.24); margin: 92px auto 0; max-width: 1000px; overflow: hidden; }.conversation-header { align-items: center; border-bottom: 1px solid var(--cool-line); color: var(--quiet); display: flex; font: 400 9px var(--mono); justify-content: space-between; letter-spacing: .1em; padding: 18px 24px; }.conversation-header b { color: var(--gold); font-weight: 500; margin-right: 8px; }.conversation-state { color: var(--gold); }.conversation-state i { background: var(--gold); border-radius: 50%; display: inline-block; height: 4px; margin-right: 7px; width: 4px; }.conversation-body { display: grid; grid-template-columns: 120px 1fr; min-height: 500px; }.conversation-index { border-right: 1px solid var(--cool-line); color: var(--quiet); display: flex; flex-direction: column; font: 400 9px var(--mono); gap: 36px; padding: 44px 24px; }.conversation-index span:first-child { color: var(--gold); }.conversation-messages { margin: auto; max-width: 650px; padding: 58px 42px; width: 100%; }.conversation-message { border-left: 1px solid var(--line); margin-bottom: 28px; padding-left: 18px; }.conversation-message span { color: var(--gold); font: 400 9px var(--mono); letter-spacing: .12em; }.conversation-message p { color: var(--ink); font: 400 22px/1.35 var(--serif); margin: 9px 0 0; }.assistant-message { border-color: rgba(217,181,106,.58); }.assistant-message p { color: #d5d0c4; }.assistant-message .prompt-line { color: var(--muted); font: 400 13px/1.7 var(--sans); margin-top: 17px; max-width: 550px; }.conversation-input { align-items: center; border: 1px solid var(--cool-line); color: var(--quiet); display: flex; font-size: 11px; justify-content: space-between; margin-top: 48px; padding: 14px 16px; }.conversation-input b { color: var(--gold); font-size: 17px; font-weight: 400; }
.difference-section { background: linear-gradient(108deg, #0b0d10, #121117 57%, #0a0b0e); border-bottom: 1px solid var(--cool-line); border-top: 1px solid var(--cool-line); padding-bottom: 145px; padding-top: 145px; }.section-intro.compact { grid-template-columns: 1fr 1.15fr 1fr; }.difference-grid { display: grid; gap: 14px; grid-template-columns: repeat(3, 1fr); margin-top: 82px; }.glass-card { background: linear-gradient(105deg, rgba(27, 29, 30, .62), rgba(12, 15, 20, .68)); border: 1px solid var(--cool-line); min-height: 245px; padding: 29px 30px 33px; position: relative; transition: background .25s ease, border-color .25s ease, transform .25s ease; }.glass-card:hover { background: linear-gradient(105deg, rgba(38, 37, 32, .7), rgba(16, 18, 21, .72)); border-color: var(--line); transform: translateY(-4px); }.card-index { color: var(--gold); font: 400 9px var(--mono); letter-spacing: .1em; }.glass-card h3 { font: 400 28px/1.12 var(--serif); margin: 38px 0 14px; }.glass-card p { color: var(--muted); font-size: 13px; line-height: 1.7; margin: 0; max-width: 360px; }
.method-section { padding-bottom: 165px; padding-top: 165px; }.method-flow { border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(6, 1fr); margin-top: 94px; }.method-step { border-left: 1px solid var(--cool-line); min-height: 230px; padding: 22px 18px 20px; position: relative; }.method-step:last-child { border-right: 1px solid var(--cool-line); }.method-step::before { background: var(--gold); border-radius: 50%; content: ""; height: 5px; left: -3px; position: absolute; top: -3px; width: 5px; }.method-step span { color: var(--gold); display: block; font: 400 10px var(--mono); letter-spacing: .1em; }.method-step b { display: block; font: 400 25px/1 var(--serif); margin: 42px 0 15px; }.method-step p { color: var(--muted); font-size: 12px; line-height: 1.65; margin: 0; }
.entry-section { padding-bottom: 150px; }.entry-panel { border: 1px solid var(--line); margin: 0 auto; max-width: 940px; padding: 74px clamp(28px, 7vw, 100px); position: relative; text-align: center; }.entry-panel::before, .entry-panel::after { border: 1px solid rgba(217,181,106,.25); content: ""; height: 8px; position: absolute; width: 8px; }.entry-panel::before { left: 18px; top: 18px; }.entry-panel::after { bottom: 18px; right: 18px; }.entry-panel .eyebrow { justify-content: center; }.entry-panel h2 { font-size: clamp(48px, 6vw, 78px); margin-bottom: 22px; }.entry-panel > p:not(.eyebrow) { color: var(--muted); font-size: 14px; line-height: 1.8; margin: 0 auto 34px; max-width: 480px; }
.landing-footer { align-items: end; border-top: 1px solid var(--cool-line); display: grid; grid-template-columns: 1fr 1fr 1fr auto; gap: 30px; padding-bottom: 42px; padding-top: 34px; }.footer-mark .wordmark-mark { height: 27px; width: 27px; }.footer-mark strong { font-size: 11px; }.landing-footer > p { color: var(--quiet); font: 400 12px/1.6 var(--serif); margin: 0; }.landing-footer nav { display: flex; gap: 22px; }.landing-footer nav a, .footer-index { color: var(--quiet); font: 400 10px var(--mono); }.landing-footer nav a:hover { color: var(--gold); }.footer-index { white-space: nowrap; }
.reveal { opacity: 1; transform: none; }.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .8s ease, transform .8s ease; }.js .reveal.is-visible { opacity: 1; transform: none; }
.cursor-dot, .cursor-ring { border-radius: 50%; pointer-events: none; position: fixed; transform: translate(-50%, -50%); z-index: 20; }.cursor-dot { background: var(--gold-bright); box-shadow: 0 0 10px var(--gold); height: 4px; transition: transform .15s ease; width: 4px; }.cursor-ring { border: 1px solid rgba(240,209,139,.68); height: 24px; mix-blend-mode: screen; transition: height .2s ease, transform .13s ease, width .2s ease; width: 24px; }.cursor-ring.active { height: 38px; width: 38px; }
@media (pointer: coarse) { .cursor-dot, .cursor-ring { display: none; } }
@media (max-width: 1020px) { .hero-content { gap: 1vw; grid-template-columns: minmax(330px, .9fr) minmax(380px, 1.1fr); }.hero-copy { max-width: 480px; }.orb-stage { min-height: 430px; }.section-intro { grid-template-columns: .8fr 1fr 1fr; }.method-flow { grid-template-columns: repeat(3, 1fr); }.method-step:nth-child(4) { border-left: 0; }.method-step:nth-child(n+4) { border-top: 1px solid var(--cool-line); } }
@media (max-width: 700px) { html { scroll-behavior: auto; }.landing-nav { padding-bottom: 22px; padding-top: 22px; }.nav-toggle { display: block; letter-spacing: .1em; }.primary-nav { background: rgba(10,11,15,.97); border: 1px solid var(--line); display: none; flex-direction: column; gap: 24px; padding: 24px; position: absolute; right: 24px; top: 70px; width: 210px; }.primary-nav.open { display: flex; }.hero-content { display: flex; flex-direction: column; min-height: auto; padding-bottom: 20px; padding-top: 64px; }.hero-copy { min-width: 0; width: 100%; }.hero-copy h1 { font-size: clamp(42px, 12vw, 52px); line-height: .96; overflow-wrap: break-word; }.hero-actions { align-items: flex-start; flex-direction: column; gap: 24px; margin-top: 31px; }.hero-note { margin-top: 42px; }.orb-stage { height: 95vw; min-height: 320px; order: 2; width: 100%; }.orb-caption { bottom: 8%; left: 4%; }.orb-coordinate { right: 2%; top: 10%; }.hero-index { bottom: 18px; }.signal-items { gap: 14px; justify-content: flex-start; overflow: hidden; white-space: nowrap; }.signal-items span { font-size: 8px; }.signal-items i { flex: 0 0 auto; }.examination-section, .method-section { padding-bottom: 100px; padding-top: 100px; }.difference-section { padding-bottom: 100px; padding-top: 100px; }.section-intro, .section-intro.compact { display: block; }.section-intro h2 { margin-bottom: 25px; }.section-intro > p:last-child { max-width: 380px; }.examination-shell { margin-top: 55px; }.conversation-body { display: block; min-height: 0; }.conversation-index { border-bottom: 1px solid var(--cool-line); border-right: 0; flex-direction: row; gap: 24px; padding: 15px 20px; }.conversation-messages { padding: 35px 22px; }.conversation-message p { font-size: 19px; }.conversation-message .prompt-line { font-size: 12px; }.difference-grid { display: block; margin-top: 55px; }.glass-card { margin-bottom: 10px; min-height: 0; padding: 25px 24px 28px; }.glass-card h3 { font-size: 25px; margin-top: 30px; }.method-flow { display: block; margin-top: 60px; }.method-step, .method-step:nth-child(n+4) { border-left: 1px solid var(--cool-line); border-right: 0; border-top: 0; min-height: 0; padding: 20px 18px 28px 25px; }.method-step:last-child { border-right: 0; }.method-step b { margin: 22px 0 8px; }.method-step::before { left: -3px; }.entry-section { padding-bottom: 100px; }.entry-panel { padding: 58px 22px; }.entry-panel h2 { font-size: 47px; }.landing-footer { align-items: start; grid-template-columns: 1fr 1fr; padding-bottom: 30px; }.landing-footer > p { grid-column: 2; }.landing-footer nav { flex-direction: column; gap: 12px; }.footer-index { align-self: end; justify-self: end; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }.js .reveal { opacity: 1; transform: none; } }