
.nf-page-hero--illustrated { color:var(--nf-ink); background:#fff; }
.nf-web3-map__viewport { margin-top:calc(45 * var(--nf-u)); overflow-x:auto; overflow-y:hidden; }
.nf-web3-map { --map-u:var(--nf-u); position:relative; width:calc(1502 * var(--map-u)); height:calc(740 * var(--map-u)); margin-left:calc(218 * var(--nf-u)); }
.nf-web3-map__art { width:100%; height:100%; object-fit:contain; }
.nf-web3-map__badge { position:absolute; width:calc(363 * var(--map-u)); height:calc(106 * var(--map-u)); color:#000; }
.nf-web3-map__badge--global { left:calc(108 * var(--map-u)); top:calc(489 * var(--map-u)); }
.nf-web3-map__badge--roh { left:calc(616 * var(--map-u)); top:calc(336 * var(--map-u)); }
.nf-web3-map__badge--ron { left:calc(994 * var(--map-u)); top:calc(516 * var(--map-u)); }
.nf-web3-map__badge-background { position:absolute; left:-1.23%; top:-3.63%; width:104.17%; height:120.81%; max-width:none; }
.nf-web3-map__label { position:absolute; left:calc(128 * var(--map-u)); top:calc(29 * var(--map-u)); font-size:calc(31 * var(--map-u)); line-height:calc(43 * var(--map-u)); font-weight:500; white-space:nowrap; }
.nf-web3-map__icon { position:absolute; left:calc(27 * var(--map-u)); top:calc(21 * var(--map-u)); width:calc(55 * var(--map-u)); height:calc(64 * var(--map-u)); }
.nf-web3-map__icon>img { max-width:100%; max-height:100%; }
.nf-web3-map__badge--roh .nf-web3-map__icon { top:calc(27 * var(--map-u)); height:calc(56 * var(--map-u)); }
.nf-web3-map__badge--global .nf-web3-map__icon { left:calc(22 * var(--map-u)); width:calc(62 * var(--map-u)); }
.nf-web3-map__icon-layer { position:absolute; }
.nf-web3-map__icon-layer--0 { left:1.26%; top:0; width:71.65%; }
.nf-web3-map__icon-layer--1 { left:27.17%; top:52.67%; width:71.65%; }
.nf-web3-map__icon-layer--2 { left:1.26%; top:26.34%; width:45.94%; }
.nf-web3-map__icon-layer--3 { left:52.88%; top:0; width:45.83%; }

.nf-web3-roh { padding:calc(60 * var(--nf-u)) 0 calc(179 * var(--nf-u)); color:#000; }
.nf-web3-roh__heading { position:relative; isolation:isolate; min-height:calc(134 * var(--nf-u)); padding-top:calc(67 * var(--nf-u)); text-align:center; }
.nf-web3-roh__wordmark { position:absolute; z-index:-1; width:calc(619 * var(--nf-u)); left:calc(668 * var(--nf-u)); top:0; }
.nf-web3-roh__wordmark img { width:100%; height:auto; }
.nf-web3-roh__heading h2 { font-size:calc(56 * var(--nf-u)); line-height:calc(58 * var(--nf-u)); font-weight:700; }
.nf-web3-roh__grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:calc(24 * var(--nf-u)); width:calc(1632 * var(--nf-u)); margin:calc(82 * var(--nf-u)) 0 0 calc(146 * var(--nf-u)); }
.nf-web3-roh__card { position:relative; isolation:isolate; min-height:calc(500 * var(--nf-u)); padding:calc(34 * var(--nf-u)) calc(23 * var(--nf-u)); border:1px solid #eaeaea; border-radius:calc(12 * var(--nf-u)); overflow:hidden; }
.nf-web3-roh__image { position:absolute; inset:0; z-index:-1; background:#f5f4f8; }
.nf-web3-roh__image img { width:100%; height:100%; object-fit:cover; }
.nf-web3-roh__tag { display:inline-flex; align-items:center; justify-content:center; min-height:calc(24 * var(--nf-u)); padding:0 calc(8 * var(--nf-u)); font-size:calc(12 * var(--nf-u)); font-weight:500; line-height:1.3; color:#8d56da; background:#f8f3ff; border-radius:4px; }
.nf-web3-roh__card h3 { margin-top:calc(11 * var(--nf-u)); font-size:calc(32 * var(--nf-u)); line-height:calc(38 * var(--nf-u)); font-weight:700; }
.nf-web3-roh__card p { max-width:calc(316 * var(--nf-u)); margin-top:calc(17 * var(--nf-u)); font-size:calc(18 * var(--nf-u)); font-weight:500; line-height:calc(28 * var(--nf-u)); color:#0009; }

.nf-web3-ron { min-height:calc(1009 * var(--nf-u)); padding:calc(114 * var(--nf-u)) 0 calc(186 * var(--nf-u)); color:#000; background:#eaf1ff; }
.nf-web3-ron__background { position:absolute; inset:0; z-index:-1; }
.nf-web3-ron__background img { width:100%; height:100%; object-fit:cover; }
.nf-web3-ron__decoration { position:absolute; z-index:-1; left:0; bottom:0; width:calc(428 * var(--nf-u)); height:calc(254 * var(--nf-u)); opacity:.8; overflow:hidden; }
.nf-web3-ron__decoration img { position:absolute; left:50%; top:50%; width:calc(254 * var(--nf-u)); height:calc(428 * var(--nf-u)); max-width:none; transform:translate(-50%,-50%) rotate(90deg) scaleY(-1); }
.nf-web3-ron__heading { text-align:center; }
.nf-web3-ron__heading h2 { font-size:calc(56 * var(--nf-u)); font-weight:700; line-height:calc(66 * var(--nf-u)); }
.nf-web3-ron__heading p { width:calc(794 * var(--nf-u)); max-width:100%; min-height:calc(78 * var(--nf-u)); margin:calc(20 * var(--nf-u)) auto 0; font-size:calc(26 * var(--nf-u)); line-height:calc(39 * var(--nf-u)); font-weight:500; color:#585b6b; }
.nf-web3-ron__diagram { width:calc(1374 * var(--nf-u)); margin:calc(60 * var(--nf-u)) 0 0 calc(264 * var(--nf-u)); }
.nf-web3-ron__diagram>img { width:100%; height:auto; aspect-ratio:1374/412; object-fit:fill; }
.nf-web3-ron__labels { display:flex; justify-content:space-between; padding:0 calc(109 * var(--nf-u)) 0 calc(96 * var(--nf-u)); margin-top:calc(12 * var(--nf-u)); }
.nf-web3-ron__labels a { display:flex; align-items:center; justify-content:center; height:calc(62 * var(--nf-u)); width:calc(251 * var(--nf-u)); border:2px solid #7ac6ff; border-radius:60px; color:#0083f2; font-size:calc(28 * var(--nf-u)); font-weight:700; }
.nf-web3-ron__labels a:last-child { width:calc(327 * var(--nf-u)); }

.nf-web3-global { padding:calc(148 * var(--nf-u)) 0 calc(186 * var(--nf-u)); color:#000; }
.nf-web3-global__background { position:absolute; z-index:-1; inset:0; background:#fff; }
.nf-web3-global__background img { width:100%; height:100%; object-fit:cover; opacity:.8; }
.nf-web3-global__heading { text-align:center; }
.nf-web3-global__heading h2 { font-size:calc(64 * var(--nf-u)); line-height:calc(76 * var(--nf-u)); font-weight:700; }
.nf-web3-global__heading>p { margin:calc(22 * var(--nf-u)) auto 0; font-size:calc(26 * var(--nf-u)); line-height:calc(38 * var(--nf-u)); font-weight:500; color:#585b6b; }
.nf-web3-global__viewport { margin-top:calc(50 * var(--nf-u)); overflow-x:auto; overflow-y:hidden; }
.nf-web3-global__diagram { --diagram-u:var(--nf-u); position:relative; width:calc(1440 * var(--diagram-u)); height:calc(600 * var(--diagram-u)); margin-left:calc(255 * var(--nf-u)); }
.nf-web3-global__art { position:absolute; inset:0; overflow:hidden; }
.nf-web3-global__art img { position:absolute; width:104.91%; height:114.33%; left:-1.17%; top:-8.31%; max-width:none; }
.nf-web3-global__brand { position:absolute; top:calc(197 * var(--diagram-u)); left:calc(551 * var(--diagram-u)); width:calc(339 * var(--diagram-u)); color:white; text-align:center; }
.nf-web3-global__brand p { font-size:calc(16 * var(--diagram-u)); line-height:calc(26 * var(--diagram-u)); letter-spacing:calc(2 * var(--diagram-u)); }
.nf-web3-global__brand strong { display:block; margin-top:calc(-6 * var(--diagram-u)); font-family:Montserrat,Arial,sans-serif; font-size:calc(90 * var(--diagram-u)); line-height:calc(110 * var(--diagram-u)); font-weight:600; }
.nf-web3-global__button { position:absolute; top:calc(325 * var(--diagram-u)); width:calc(173 * var(--diagram-u)); height:calc(57 * var(--diagram-u)); overflow:hidden; }
.nf-web3-global__button--roh { left:calc(537 * var(--diagram-u)); }
.nf-web3-global__button--ron { left:calc(732 * var(--diagram-u)); width:calc(175 * var(--diagram-u)); }
.nf-web3-global__button img { position:absolute; max-width:none; }
.nf-web3-global__button--roh img { width:173.94%; height:187.87%; left:-37.05%; top:-43.89%; }
.nf-web3-global__button--ron img { width:147.91%; height:163.4%; left:-23.31%; top:-31.4%; }
.nf-web3-global__node { position:absolute; display:flex; align-items:center; gap:calc(27 * var(--diagram-u)); font-size:calc(33 * var(--diagram-u)); line-height:calc(46 * var(--diagram-u)); font-weight:500; white-space:nowrap; }
.nf-web3-global__icon { display:flex; align-items:center; width:calc(64 * var(--diagram-u)); height:calc(58 * var(--diagram-u)); overflow:hidden; }
.nf-web3-global__icon img { max-height:100%; max-width:100%; object-fit:contain; }
.nf-web3-global__node--ai { left:calc(65 * var(--diagram-u)); top:calc(131 * var(--diagram-u)); gap:calc(40 * var(--diagram-u)); }
.nf-web3-global__node--gpu { left:calc(63 * var(--diagram-u)); top:calc(272 * var(--diagram-u)); gap:calc(23 * var(--diagram-u)); }
.nf-web3-global__node--apps { left:calc(63 * var(--diagram-u)); top:calc(414 * var(--diagram-u)); gap:calc(17 * var(--diagram-u)); }
.nf-web3-global__node--assets { left:calc(1115 * var(--diagram-u)); top:calc(189 * var(--diagram-u)); }
.nf-web3-global__node--assets .nf-web3-global__icon { width:calc(47 * var(--diagram-u)); }
.nf-web3-global__node--assets .nf-web3-global__icon img { max-width:none; width:110.94%; }
.nf-web3-global__node--community { left:calc(1112 * var(--diagram-u)); top:calc(381 * var(--diagram-u)); gap:calc(17 * var(--diagram-u)); }
.nf-web3-global__node--community .nf-web3-global__icon { width:calc(70 * var(--diagram-u)); }

@media(max-width:1100px) {
 .nf-web3-map__viewport { margin-top:32px; }
 .nf-web3-map { --map-u:calc((100vw - 64px)/1502); margin:0 auto; }
 .nf-web3-roh { padding:40px 0 75px; }
 .nf-web3-roh__heading { min-height:100px; padding-top:45px; }
 .nf-web3-roh__wordmark { width:450px; max-width:90%; left:50%; transform:translateX(-50%); }
 .nf-web3-roh__heading h2 { font-size:38px; line-height:1.4; }
 .nf-web3-roh__grid { width:calc(100% - 64px); margin:44px auto 0; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
 .nf-web3-roh__card { min-height:480px; padding:28px 24px; border-radius:12px; }
 .nf-web3-roh__tag { min-height:24px; padding:0 8px; font-size:12px; }
 .nf-web3-roh__card h3 { font-size:28px; line-height:1.4; margin-top:12px; }
 .nf-web3-roh__card p { max-width:320px; font-size:15px; line-height:1.8; margin-top:14px; }
 .nf-web3-ron { min-height:0; padding:70px 0 90px; }
 .nf-web3-ron__heading { padding:0 32px; }
 .nf-web3-ron__heading h2 { font-size:38px; line-height:1.4; }
 .nf-web3-ron__heading p { width:700px; min-height:0; margin-top:22px; font-size:20px; line-height:1.8; }
 .nf-web3-ron__diagram { width:calc(100% - 64px); margin:48px auto 0; }
 .nf-web3-ron__labels { padding:0 5%; margin-top:14px; gap:20px; }
 .nf-web3-ron__labels a,.nf-web3-ron__labels a:last-child { width:auto; height:auto; min-height:45px; padding:7px 18px; font-size:18px; }
 .nf-web3-global { padding:75px 0 90px; }
 .nf-web3-global__heading { padding:0 32px; }
 .nf-web3-global__heading h2 { font-size:42px; line-height:1.4; }
 .nf-web3-global__heading>p { max-width:760px; font-size:19px; line-height:1.8; margin-top:20px; }
 .nf-web3-global__viewport { margin-top:40px; }
 .nf-web3-global__diagram { --diagram-u:calc((100vw - 64px)/1440); margin:0 auto; }
}
@media(max-width:700px) {
 .nf-web3-map__viewport { margin-top:25px; padding:0 20px; }
 .nf-web3-map { --map-u:calc(680px / 1502); margin:0; }
 .nf-web3-roh { padding:30px 0 55px; }
 .nf-web3-roh__heading { min-height:80px; padding-top:35px; }
 .nf-web3-roh__wordmark { width:330px; }
 .nf-web3-roh__heading h2 { font-size:30px; }
 .nf-web3-roh__grid { width:calc(100% - 40px); grid-template-columns:1fr; gap:22px; margin-top:30px; }
 .nf-web3-roh__card { min-height:470px; padding:27px 23px; }
 .nf-web3-roh__card h3 { font-size:27px; }
 .nf-web3-roh__card p { font-size:15px; }
 .nf-web3-ron { padding:55px 0 65px; }
 .nf-web3-ron__heading { padding:0 20px; }
 .nf-web3-ron__heading h2 { font-size:28px; }
 .nf-web3-ron__heading p { font-size:16px; line-height:1.9; margin-top:18px; }
 .nf-web3-ron__diagram { width:calc(100% - 24px); margin-top:32px; }
 .nf-web3-ron__labels { padding:0; gap:10px; }
 .nf-web3-ron__labels a,.nf-web3-ron__labels a:last-child { font-size:12px; padding:6px 10px; min-height:36px; border-width:1px; }
 .nf-web3-global { padding:55px 0 65px; }
 .nf-web3-global__heading { padding:0 20px; }
 .nf-web3-global__heading h2 { font-size:32px; }
 .nf-web3-global__heading>p { font-size:15px; line-height:1.9; margin-top:18px; }
 .nf-web3-global__viewport { padding:0 20px; margin-top:30px; }
 .nf-web3-global__diagram { --diagram-u:.5px; margin:0; }
}
