:root { color-scheme: light; --paper:#f1ecdf; --ink:#151515; --plum:#593861; --violet:#9a7ab4; --lime:#d8f266; --blue:#77cbd1; --line:rgba(21,21,21,.18); --muted:#615e58; --max:1180px; font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); line-height:1.55; }
body::before { position:fixed; inset:0; z-index:-1; content:""; opacity:.28; background-image:radial-gradient(#222 0.55px,transparent .7px); background-size:8px 8px; }
a { color:inherit; }
.wrap { width:min(calc(100% - 48px),var(--max)); margin-inline:auto; }
.skip-link { position:fixed; top:-60px; left:16px; z-index:40; padding:10px 15px; color:white; background:var(--plum); }
.skip-link:focus { top:16px; }
a:focus-visible { outline:3px solid var(--plum); outline-offset:4px; }
.masthead { position:sticky; top:0; z-index:20; display:flex; align-items:center; justify-content:space-between; min-height:68px; padding-inline:max(24px,calc((100vw - var(--max))/2)); border-bottom:1px solid var(--line); background:rgba(241,236,223,.9); backdrop-filter:blur(16px); }
.wordmark { display:flex; align-items:center; gap:10px; font-size:.86rem; font-weight:800; text-decoration:none; }
.wordmark span { display:grid; place-items:center; width:32px; height:32px; border:1px solid var(--ink); border-radius:50%; color:white; background:var(--plum); font-family:Georgia,serif; }
nav { display:flex; align-items:center; gap:26px; }
nav a { color:#55514b; font-size:.76rem; text-decoration:none; }
nav a:hover { color:var(--plum); }
nav .source { padding:9px 13px; border:1px solid var(--ink); border-radius:99px; color:var(--ink); }
.hero { display:grid; grid-template-columns:.9fr 1.1fr; gap:70px; align-items:center; min-height:720px; padding-block:82px; }
.kicker { margin:0 0 15px; color:var(--plum); font:700 .66rem/1.2 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.12em; text-transform:uppercase; }
h1,h2,blockquote { font-family:Georgia,"Times New Roman",serif; font-weight:400; }
h1 { margin:0; font-size:clamp(4.4rem,8vw,8.2rem); line-height:.79; letter-spacing:-.075em; }
h1 em { color:var(--plum); font-style:italic; }
.lede { max-width:590px; margin:34px 0 0; color:var(--muted); font-size:1.05rem; }
.actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:30px; }
.button { display:inline-flex; align-items:center; min-height:44px; padding:0 17px; border:1px solid var(--ink); border-radius:99px; font-size:.76rem; font-weight:750; text-decoration:none; }
.button.dark { color:white; background:var(--ink); }
.hero-diagram { display:grid; grid-template-columns:1fr 72px 1fr; align-items:center; }
.hero-diagram article { min-height:390px; padding:27px; border:1px solid var(--ink); border-radius:35px 35px 8px 8px; box-shadow:12px 14px 0 rgba(21,21,21,.11); }
.hero-diagram article > span { font:.61rem/1 ui-monospace,monospace; letter-spacing:.1em; }
.hero-diagram strong { display:block; margin-top:58px; font:400 3.6rem/1 Georgia,serif; }
.hero-diagram p { color:var(--muted); }
.native-card { background:#ded0e5; transform:rotate(-2deg); }
.fleet-card { background:#ccecef; transform:rotate(2deg); }
.bridge { position:relative; z-index:2; height:1px; background:var(--ink); }
.bridge::before,.bridge::after { position:absolute; top:-4px; width:9px; height:9px; content:""; border-radius:50%; background:var(--ink); }
.bridge::after { right:0; }
.bridge span { position:absolute; top:-28px; width:100%; font:.52rem/1 ui-monospace,monospace; text-align:center; }
.mini-ui { display:grid; grid-template-columns:repeat(3,7px) 1fr; gap:6px; align-items:center; margin-top:68px; padding:15px; border:1px solid var(--ink); border-radius:12px; background:rgba(255,255,255,.46); }
.mini-ui i { width:7px; height:7px; border-radius:50%; background:var(--plum); }
.mini-ui b { grid-column:1/-1; margin-top:22px; font-size:.76rem; }
.mini-ui small { grid-column:1/-1; color:var(--muted); }
.nodes { display:grid; grid-template-columns:1fr; gap:8px; margin-top:72px; text-align:center; }
.nodes i,.nodes b { padding:9px; border:1px solid var(--ink); border-radius:99px; font-size:.66rem; font-style:normal; background:rgba(255,255,255,.4); }
.nodes b { background:var(--lime); }
.split-section { padding-block:110px; border-block:1px solid var(--ink); background:#181818; color:#f5f0e5; }
.split-section header { display:grid; grid-template-columns:.65fr 1.35fr; gap:70px; align-items:start; }
.split-section .kicker { color:var(--lime); }
h2 { margin:0; font-size:clamp(3.2rem,6vw,6.3rem); line-height:.91; letter-spacing:-.055em; }
.build-grid { display:grid; grid-template-columns:1fr 1fr; gap:1px; margin-top:65px; border:1px solid rgba(255,255,255,.24); background:rgba(255,255,255,.24); }
.build-grid article { padding:34px; background:#181818; }
.number { color:var(--lime); font:700 .7rem/1 ui-monospace,monospace; }
.label { margin:55px 0 8px; color:#9f9a90; font:.65rem/1 ui-monospace,monospace; letter-spacing:.1em; text-transform:uppercase; }
.build-grid h3 { max-width:440px; margin:0; font:400 2rem/1.08 Georgia,serif; }
.build-grid ul { margin:30px 0; padding-left:18px; color:#c5c0b7; font-size:.86rem; }
.build-grid li { margin:10px 0; }
.truth { padding-top:20px; border-top:1px solid rgba(255,255,255,.2); color:#9f9a90; font-size:.78rem; }
.truth b { color:var(--lime); }
.roadmap { padding-block:115px; }
.roadmap-intro { display:grid; grid-template-columns:1.25fr .75fr; gap:70px; align-items:end; }
.roadmap-intro > p { margin:0; color:var(--muted); }
.roadmap ol { margin:65px 0 0; padding:0; border-top:1px solid var(--ink); list-style:none; }
.roadmap li { display:grid; grid-template-columns:115px 1fr; gap:35px; padding:30px 0; border-bottom:1px solid var(--line); }
.roadmap li > span { color:var(--muted); font:700 .65rem/1 ui-monospace,monospace; letter-spacing:.12em; text-transform:uppercase; }
.roadmap li.complete > span { color:var(--plum); }
.roadmap li.current > span { color:#283600; }
.roadmap li.current { padding-inline:18px; background:var(--lime); }
.roadmap h3 { margin:0 0 7px; font:400 1.7rem/1.1 Georgia,serif; }
.roadmap li p { max-width:760px; margin:0; color:var(--muted); font-size:.87rem; }
.roadmap li.current p { color:#3f480e; }
.intent { display:grid; grid-template-columns:.45fr 1fr; gap:35px 70px; padding-block:105px; border-top:1px solid var(--ink); }
.intent .kicker { grid-column:1/-1; }
blockquote { margin:0; font-size:clamp(2.6rem,4.5vw,4.7rem); line-height:.98; letter-spacing:-.04em; }
.intent > p:last-child { margin:0; color:var(--muted); }
.lineage { padding-block:100px; color:white; background:var(--plum); }
.lineage .wrap { display:grid; grid-template-columns:.85fr 1.15fr; gap:80px; }
.lineage .kicker { color:var(--lime); }
.comparison a { display:grid; grid-template-columns:150px 1fr; gap:24px; padding:21px 0; border-top:1px solid rgba(255,255,255,.25); text-decoration:none; }
.comparison a:last-child { border-bottom:1px solid rgba(255,255,255,.25); }
.comparison b { color:var(--lime); font-size:.82rem; }
.comparison span { color:#ddccdf; font-size:.82rem; }
.footer { display:flex; justify-content:space-between; gap:25px; padding-block:34px; font-size:.72rem; }
.footer p { margin:0; color:var(--muted); }
.footer a { font-weight:750; }
@media (max-width:900px) { .hero,.roadmap-intro,.intent,.lineage .wrap { grid-template-columns:1fr; } .hero-diagram { max-width:720px; } .split-section header { grid-template-columns:1fr; gap:20px; } }
@media (max-width:680px) { .wrap { width:min(calc(100% - 28px),var(--max)); } .masthead { padding-inline:14px; } nav a:not(.source) { display:none; } .wordmark { font-size:0; } .hero { min-height:0; padding-block:65px; } h1 { font-size:clamp(4.2rem,20vw,6rem); } .hero-diagram { grid-template-columns:1fr; gap:18px; } .bridge { width:1px; height:46px; margin:auto; } .bridge span { top:17px; left:12px; width:80px; text-align:left; } .hero-diagram article { min-height:330px; transform:none; } .build-grid { grid-template-columns:1fr; } .roadmap li { grid-template-columns:1fr; gap:12px; } .roadmap li.current { padding:20px; } .comparison a { grid-template-columns:1fr; gap:5px; } .footer { flex-direction:column; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { animation:none!important; transition:none!important; } }